patx/frontlineboats
frontline boats website
Commit e93e9aa · patx · 2026-07-30T18:44:04-04:00
Comments
No comments yet.
Diff
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
new file mode 100644
index 0000000..37f75c9
Binary files /dev/null and b/apple-touch-icon.png differ
diff --git a/favicon-192.png b/favicon-192.png
new file mode 100644
index 0000000..483e7ce
Binary files /dev/null and b/favicon-192.png differ
diff --git a/favicon-32.png b/favicon-32.png
new file mode 100644
index 0000000..e61b68b
Binary files /dev/null and b/favicon-32.png differ
diff --git a/favicon-512.png b/favicon-512.png
new file mode 100644
index 0000000..51b086c
Binary files /dev/null and b/favicon-512.png differ
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..1d2a828
Binary files /dev/null and b/favicon.ico differ
diff --git a/frontline-1.png b/frontline-1.png
new file mode 100644
index 0000000..466860e
Binary files /dev/null and b/frontline-1.png differ
diff --git a/frontline-2.png b/frontline-2.png
new file mode 100644
index 0000000..577e5ef
Binary files /dev/null and b/frontline-2.png differ
diff --git a/frontline-3.png b/frontline-3.png
new file mode 100644
index 0000000..d3c7cbe
Binary files /dev/null and b/frontline-3.png differ
diff --git a/frontline-4.png b/frontline-4.png
new file mode 100644
index 0000000..9dc0ec5
Binary files /dev/null and b/frontline-4.png differ
diff --git a/frontline-5.png b/frontline-5.png
new file mode 100644
index 0000000..5dc3732
Binary files /dev/null and b/frontline-5.png differ
diff --git a/frontline-6.png b/frontline-6.png
new file mode 100644
index 0000000..d76125f
Binary files /dev/null and b/frontline-6.png differ
diff --git a/frontline-about.jpg b/frontline-about.jpg
new file mode 100644
index 0000000..9dd67d2
Binary files /dev/null and b/frontline-about.jpg differ
diff --git a/frontline-hero.jpg b/frontline-hero.jpg
new file mode 100644
index 0000000..da82a76
Binary files /dev/null and b/frontline-hero.jpg differ
diff --git a/frontline-hero.png b/frontline-hero.png
new file mode 100644
index 0000000..9b1323b
Binary files /dev/null and b/frontline-hero.png differ
diff --git a/frontline-logo.jpg b/frontline-logo.jpg
new file mode 100644
index 0000000..cea541f
Binary files /dev/null and b/frontline-logo.jpg differ
diff --git a/frontline-logo.png b/frontline-logo.png
new file mode 100644
index 0000000..b3d11b7
Binary files /dev/null and b/frontline-logo.png differ
diff --git a/frontline-og_card.png b/frontline-og_card.png
new file mode 100644
index 0000000..ac40674
Binary files /dev/null and b/frontline-og_card.png differ
diff --git a/gallery/audio-amplifier-fuse-block-install.jpg b/gallery/audio-amplifier-fuse-block-install.jpg
new file mode 100644
index 0000000..e392558
Binary files /dev/null and b/gallery/audio-amplifier-fuse-block-install.jpg differ
diff --git a/gallery/audio-boss-head-unit-switch-panel.jpg b/gallery/audio-boss-head-unit-switch-panel.jpg
new file mode 100644
index 0000000..e4d006a
Binary files /dev/null and b/gallery/audio-boss-head-unit-switch-panel.jpg differ
diff --git a/gallery/detailing-console-gelcoat-gloss.jpg b/gallery/detailing-console-gelcoat-gloss.jpg
new file mode 100644
index 0000000..80b3c8d
Binary files /dev/null and b/gallery/detailing-console-gelcoat-gloss.jpg differ
diff --git a/gallery/detailing-hull-side-waterline-gloss.jpg b/gallery/detailing-hull-side-waterline-gloss.jpg
new file mode 100644
index 0000000..8c0e8f5
Binary files /dev/null and b/gallery/detailing-hull-side-waterline-gloss.jpg differ
diff --git a/gallery/detailing-motor-yacht-exterior.jpg b/gallery/detailing-motor-yacht-exterior.jpg
new file mode 100644
index 0000000..f06766f
Binary files /dev/null and b/gallery/detailing-motor-yacht-exterior.jpg differ
diff --git a/gallery/detailing-sea-ray-hull-polish.jpg b/gallery/detailing-sea-ray-hull-polish.jpg
new file mode 100644
index 0000000..cfa0657
Binary files /dev/null and b/gallery/detailing-sea-ray-hull-polish.jpg differ
diff --git a/gallery/detailing-seavee-hull-gloss.jpg b/gallery/detailing-seavee-hull-gloss.jpg
new file mode 100644
index 0000000..8ffe3f0
Binary files /dev/null and b/gallery/detailing-seavee-hull-gloss.jpg differ
diff --git a/gallery/detailing-yacht-hull-mirror-finish.jpg b/gallery/detailing-yacht-hull-mirror-finish.jpg
new file mode 100644
index 0000000..a3c4313
Binary files /dev/null and b/gallery/detailing-yacht-hull-mirror-finish.jpg differ
diff --git a/gallery/detailing-yacht-topsides-coating.jpg b/gallery/detailing-yacht-topsides-coating.jpg
new file mode 100644
index 0000000..90b8c96
Binary files /dev/null and b/gallery/detailing-yacht-topsides-coating.jpg differ
diff --git a/gallery/electronics-action-craft-simrad-helm.jpg b/gallery/electronics-action-craft-simrad-helm.jpg
new file mode 100644
index 0000000..19f4fee
Binary files /dev/null and b/gallery/electronics-action-craft-simrad-helm.jpg differ
diff --git a/gallery/electronics-garmin-displays-switch-panel.jpg b/gallery/electronics-garmin-displays-switch-panel.jpg
new file mode 100644
index 0000000..a602083
Binary files /dev/null and b/gallery/electronics-garmin-displays-switch-panel.jpg differ
diff --git a/gallery/electronics-garmin-twin-display-acrylic.jpg b/gallery/electronics-garmin-twin-display-acrylic.jpg
new file mode 100644
index 0000000..67bdda5
Binary files /dev/null and b/gallery/electronics-garmin-twin-display-acrylic.jpg differ
diff --git a/gallery/electronics-garmin-yamaha-helm-rebuild.jpg b/gallery/electronics-garmin-yamaha-helm-rebuild.jpg
new file mode 100644
index 0000000..7b9ada5
Binary files /dev/null and b/gallery/electronics-garmin-yamaha-helm-rebuild.jpg differ
diff --git a/gallery/electronics-gauge-cluster-switch-panel.jpg b/gallery/electronics-gauge-cluster-switch-panel.jpg
new file mode 100644
index 0000000..d531996
Binary files /dev/null and b/gallery/electronics-gauge-cluster-switch-panel.jpg differ
diff --git a/gallery/electronics-sea-pro-twin-garmin-vhf.jpg b/gallery/electronics-sea-pro-twin-garmin-vhf.jpg
new file mode 100644
index 0000000..451ccf4
Binary files /dev/null and b/gallery/electronics-sea-pro-twin-garmin-vhf.jpg differ
diff --git a/gallery/electronics-seafox-helm-raymarine.jpg b/gallery/electronics-seafox-helm-raymarine.jpg
new file mode 100644
index 0000000..7006eb5
Binary files /dev/null and b/gallery/electronics-seafox-helm-raymarine.jpg differ
diff --git a/gallery/electronics-wellcraft-garmin-upgrade.jpg b/gallery/electronics-wellcraft-garmin-upgrade.jpg
new file mode 100644
index 0000000..2e0a45a
Binary files /dev/null and b/gallery/electronics-wellcraft-garmin-upgrade.jpg differ
diff --git a/gallery/lighting-night-helm-simrad-led.jpg b/gallery/lighting-night-helm-simrad-led.jpg
new file mode 100644
index 0000000..a4d9a78
Binary files /dev/null and b/gallery/lighting-night-helm-simrad-led.jpg differ
diff --git a/gallery/outboard-gearcase-lube-service.jpg b/gallery/outboard-gearcase-lube-service.jpg
new file mode 100644
index 0000000..5593786
Binary files /dev/null and b/gallery/outboard-gearcase-lube-service.jpg differ
diff --git a/gallery/outboard-powerhead-repair.jpg b/gallery/outboard-powerhead-repair.jpg
new file mode 100644
index 0000000..554a0d8
Binary files /dev/null and b/gallery/outboard-powerhead-repair.jpg differ
diff --git a/gallery/outboard-service-oil-change.jpg b/gallery/outboard-service-oil-change.jpg
new file mode 100644
index 0000000..9e2338e
Binary files /dev/null and b/gallery/outboard-service-oil-change.jpg differ
diff --git a/gallery/outboard-starter-motor-replacement.jpg b/gallery/outboard-starter-motor-replacement.jpg
new file mode 100644
index 0000000..9a32d6b
Binary files /dev/null and b/gallery/outboard-starter-motor-replacement.jpg differ
diff --git a/gallery/outboard-yamaha-70-rigging.jpg b/gallery/outboard-yamaha-70-rigging.jpg
new file mode 100644
index 0000000..ee3f118
Binary files /dev/null and b/gallery/outboard-yamaha-70-rigging.jpg differ
diff --git a/gallery/repair-bilge-pumps-seachest-battery.jpg b/gallery/repair-bilge-pumps-seachest-battery.jpg
new file mode 100644
index 0000000..95940f9
Binary files /dev/null and b/gallery/repair-bilge-pumps-seachest-battery.jpg differ
diff --git a/gallery/thumbs/audio-amplifier-fuse-block-install.jpg b/gallery/thumbs/audio-amplifier-fuse-block-install.jpg
new file mode 100644
index 0000000..d71588f
Binary files /dev/null and b/gallery/thumbs/audio-amplifier-fuse-block-install.jpg differ
diff --git a/gallery/thumbs/audio-boss-head-unit-switch-panel.jpg b/gallery/thumbs/audio-boss-head-unit-switch-panel.jpg
new file mode 100644
index 0000000..6c79bb9
Binary files /dev/null and b/gallery/thumbs/audio-boss-head-unit-switch-panel.jpg differ
diff --git a/gallery/thumbs/detailing-console-gelcoat-gloss.jpg b/gallery/thumbs/detailing-console-gelcoat-gloss.jpg
new file mode 100644
index 0000000..21695f7
Binary files /dev/null and b/gallery/thumbs/detailing-console-gelcoat-gloss.jpg differ
diff --git a/gallery/thumbs/detailing-hull-side-waterline-gloss.jpg b/gallery/thumbs/detailing-hull-side-waterline-gloss.jpg
new file mode 100644
index 0000000..be7b762
Binary files /dev/null and b/gallery/thumbs/detailing-hull-side-waterline-gloss.jpg differ
diff --git a/gallery/thumbs/detailing-motor-yacht-exterior.jpg b/gallery/thumbs/detailing-motor-yacht-exterior.jpg
new file mode 100644
index 0000000..bceedc4
Binary files /dev/null and b/gallery/thumbs/detailing-motor-yacht-exterior.jpg differ
diff --git a/gallery/thumbs/detailing-sea-ray-hull-polish.jpg b/gallery/thumbs/detailing-sea-ray-hull-polish.jpg
new file mode 100644
index 0000000..810f6d9
Binary files /dev/null and b/gallery/thumbs/detailing-sea-ray-hull-polish.jpg differ
diff --git a/gallery/thumbs/detailing-seavee-hull-gloss.jpg b/gallery/thumbs/detailing-seavee-hull-gloss.jpg
new file mode 100644
index 0000000..08b4c20
Binary files /dev/null and b/gallery/thumbs/detailing-seavee-hull-gloss.jpg differ
diff --git a/gallery/thumbs/detailing-yacht-hull-mirror-finish.jpg b/gallery/thumbs/detailing-yacht-hull-mirror-finish.jpg
new file mode 100644
index 0000000..40731bc
Binary files /dev/null and b/gallery/thumbs/detailing-yacht-hull-mirror-finish.jpg differ
diff --git a/gallery/thumbs/detailing-yacht-topsides-coating.jpg b/gallery/thumbs/detailing-yacht-topsides-coating.jpg
new file mode 100644
index 0000000..aa60128
Binary files /dev/null and b/gallery/thumbs/detailing-yacht-topsides-coating.jpg differ
diff --git a/gallery/thumbs/electronics-action-craft-simrad-helm.jpg b/gallery/thumbs/electronics-action-craft-simrad-helm.jpg
new file mode 100644
index 0000000..364bc9a
Binary files /dev/null and b/gallery/thumbs/electronics-action-craft-simrad-helm.jpg differ
diff --git a/gallery/thumbs/electronics-garmin-displays-switch-panel.jpg b/gallery/thumbs/electronics-garmin-displays-switch-panel.jpg
new file mode 100644
index 0000000..deb9930
Binary files /dev/null and b/gallery/thumbs/electronics-garmin-displays-switch-panel.jpg differ
diff --git a/gallery/thumbs/electronics-garmin-twin-display-acrylic.jpg b/gallery/thumbs/electronics-garmin-twin-display-acrylic.jpg
new file mode 100644
index 0000000..2610c7d
Binary files /dev/null and b/gallery/thumbs/electronics-garmin-twin-display-acrylic.jpg differ
diff --git a/gallery/thumbs/electronics-garmin-yamaha-helm-rebuild.jpg b/gallery/thumbs/electronics-garmin-yamaha-helm-rebuild.jpg
new file mode 100644
index 0000000..83af039
Binary files /dev/null and b/gallery/thumbs/electronics-garmin-yamaha-helm-rebuild.jpg differ
diff --git a/gallery/thumbs/electronics-gauge-cluster-switch-panel.jpg b/gallery/thumbs/electronics-gauge-cluster-switch-panel.jpg
new file mode 100644
index 0000000..214b62a
Binary files /dev/null and b/gallery/thumbs/electronics-gauge-cluster-switch-panel.jpg differ
diff --git a/gallery/thumbs/electronics-sea-pro-twin-garmin-vhf.jpg b/gallery/thumbs/electronics-sea-pro-twin-garmin-vhf.jpg
new file mode 100644
index 0000000..9685ef0
Binary files /dev/null and b/gallery/thumbs/electronics-sea-pro-twin-garmin-vhf.jpg differ
diff --git a/gallery/thumbs/electronics-seafox-helm-raymarine.jpg b/gallery/thumbs/electronics-seafox-helm-raymarine.jpg
new file mode 100644
index 0000000..779bd90
Binary files /dev/null and b/gallery/thumbs/electronics-seafox-helm-raymarine.jpg differ
diff --git a/gallery/thumbs/electronics-wellcraft-garmin-upgrade.jpg b/gallery/thumbs/electronics-wellcraft-garmin-upgrade.jpg
new file mode 100644
index 0000000..322fb53
Binary files /dev/null and b/gallery/thumbs/electronics-wellcraft-garmin-upgrade.jpg differ
diff --git a/gallery/thumbs/lighting-night-helm-simrad-led.jpg b/gallery/thumbs/lighting-night-helm-simrad-led.jpg
new file mode 100644
index 0000000..50a45ab
Binary files /dev/null and b/gallery/thumbs/lighting-night-helm-simrad-led.jpg differ
diff --git a/gallery/thumbs/outboard-gearcase-lube-service.jpg b/gallery/thumbs/outboard-gearcase-lube-service.jpg
new file mode 100644
index 0000000..b20060b
Binary files /dev/null and b/gallery/thumbs/outboard-gearcase-lube-service.jpg differ
diff --git a/gallery/thumbs/outboard-powerhead-repair.jpg b/gallery/thumbs/outboard-powerhead-repair.jpg
new file mode 100644
index 0000000..3eba734
Binary files /dev/null and b/gallery/thumbs/outboard-powerhead-repair.jpg differ
diff --git a/gallery/thumbs/outboard-service-oil-change.jpg b/gallery/thumbs/outboard-service-oil-change.jpg
new file mode 100644
index 0000000..3a39db5
Binary files /dev/null and b/gallery/thumbs/outboard-service-oil-change.jpg differ
diff --git a/gallery/thumbs/outboard-starter-motor-replacement.jpg b/gallery/thumbs/outboard-starter-motor-replacement.jpg
new file mode 100644
index 0000000..70e9f7b
Binary files /dev/null and b/gallery/thumbs/outboard-starter-motor-replacement.jpg differ
diff --git a/gallery/thumbs/outboard-yamaha-70-rigging.jpg b/gallery/thumbs/outboard-yamaha-70-rigging.jpg
new file mode 100644
index 0000000..a34dce3
Binary files /dev/null and b/gallery/thumbs/outboard-yamaha-70-rigging.jpg differ
diff --git a/gallery/thumbs/repair-bilge-pumps-seachest-battery.jpg b/gallery/thumbs/repair-bilge-pumps-seachest-battery.jpg
new file mode 100644
index 0000000..6e479a6
Binary files /dev/null and b/gallery/thumbs/repair-bilge-pumps-seachest-battery.jpg differ
diff --git a/gallery/thumbs/wiring-bench-built-fuse-block.jpg b/gallery/thumbs/wiring-bench-built-fuse-block.jpg
new file mode 100644
index 0000000..01b14a7
Binary files /dev/null and b/gallery/thumbs/wiring-bench-built-fuse-block.jpg differ
diff --git a/gallery/thumbs/wiring-console-fuse-panel-nmea2000.jpg b/gallery/thumbs/wiring-console-fuse-panel-nmea2000.jpg
new file mode 100644
index 0000000..a37ee02
Binary files /dev/null and b/gallery/thumbs/wiring-console-fuse-panel-nmea2000.jpg differ
diff --git a/gallery/thumbs/wiring-console-harness-cleanup.jpg b/gallery/thumbs/wiring-console-harness-cleanup.jpg
new file mode 100644
index 0000000..84c63e8
Binary files /dev/null and b/gallery/thumbs/wiring-console-harness-cleanup.jpg differ
diff --git a/gallery/thumbs/wiring-full-rewire-panel-amp.jpg b/gallery/thumbs/wiring-full-rewire-panel-amp.jpg
new file mode 100644
index 0000000..e33c482
Binary files /dev/null and b/gallery/thumbs/wiring-full-rewire-panel-amp.jpg differ
diff --git a/gallery/thumbs/wiring-rigging-board-bus-bars.jpg b/gallery/thumbs/wiring-rigging-board-bus-bars.jpg
new file mode 100644
index 0000000..3e66047
Binary files /dev/null and b/gallery/thumbs/wiring-rigging-board-bus-bars.jpg differ
diff --git a/gallery/thumbs/wiring-switch-panel-fusing.jpg b/gallery/thumbs/wiring-switch-panel-fusing.jpg
new file mode 100644
index 0000000..a6c6fd5
Binary files /dev/null and b/gallery/thumbs/wiring-switch-panel-fusing.jpg differ
diff --git a/gallery/wiring-bench-built-fuse-block.jpg b/gallery/wiring-bench-built-fuse-block.jpg
new file mode 100644
index 0000000..ad1b109
Binary files /dev/null and b/gallery/wiring-bench-built-fuse-block.jpg differ
diff --git a/gallery/wiring-console-fuse-panel-nmea2000.jpg b/gallery/wiring-console-fuse-panel-nmea2000.jpg
new file mode 100644
index 0000000..aad6042
Binary files /dev/null and b/gallery/wiring-console-fuse-panel-nmea2000.jpg differ
diff --git a/gallery/wiring-console-harness-cleanup.jpg b/gallery/wiring-console-harness-cleanup.jpg
new file mode 100644
index 0000000..0a05d57
Binary files /dev/null and b/gallery/wiring-console-harness-cleanup.jpg differ
diff --git a/gallery/wiring-full-rewire-panel-amp.jpg b/gallery/wiring-full-rewire-panel-amp.jpg
new file mode 100644
index 0000000..eb8822c
Binary files /dev/null and b/gallery/wiring-full-rewire-panel-amp.jpg differ
diff --git a/gallery/wiring-rigging-board-bus-bars.jpg b/gallery/wiring-rigging-board-bus-bars.jpg
new file mode 100644
index 0000000..0c6c7ed
Binary files /dev/null and b/gallery/wiring-rigging-board-bus-bars.jpg differ
diff --git a/gallery/wiring-switch-panel-fusing.jpg b/gallery/wiring-switch-panel-fusing.jpg
new file mode 100644
index 0000000..7ea54cc
Binary files /dev/null and b/gallery/wiring-switch-panel-fusing.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..fa08d7e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,2804 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Frontline Boat Services — Marine Electronics, Outboard Service & Detailing | Miami, FL</title>
+ <meta name="description" content="First responder owned marine shop in Miami. Marine electronics, outboard service, wiring and rewiring, audio and lighting, detailing and coatings, and general boat repair across Miami-Dade and Broward." />
+ <link rel="canonical" href="https://frontlineboatservices.com/" />
+ <meta name="theme-color" content="#131314" />
+ <link rel="icon" href="favicon.ico" sizes="any" />
+ <link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png" />
+ <link rel="icon" type="image/png" sizes="192x192" href="favicon-192.png" />
+ <link rel="apple-touch-icon" href="apple-touch-icon.png" />
+ <meta property="og:type" content="website" />
+ <meta property="og:title" content="Frontline Boat Services — Miami, FL" />
+ <meta property="og:description" content="Marine electronics, outboard service, rewiring, audio and lighting, detailing and coatings across Miami-Dade and Broward." />
+ <meta property="og:image" content="frontline-og_card.png" />
+ <meta property="og:image:width" content="1731" />
+ <meta property="og:image:height" content="909" />
+ <meta property="og:image:alt" content="Frontline Boat Services social preview card" />
+ <meta name="twitter:card" content="summary_large_image" />
+ <meta name="twitter:title" content="Frontline Boat Services — Miami, FL" />
+ <meta name="twitter:description" content="Marine electronics, outboard service, rewiring, audio and lighting, detailing and coatings across Miami-Dade and Broward." />
+ <meta name="twitter:image" content="frontline-og_card.png" />
+ <meta name="twitter:image:alt" content="Frontline Boat Services social preview card" />
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+ <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600&family=Oswald:wght@400;500;600;700&display=swap" rel="stylesheet" />
+ <link rel="preload" as="image" href="frontline-hero.png" />
+ <script>document.documentElement.classList.add('js');</script>
+ <style>
+ /* ══ TOKENS ═══════════════════════════════════════════════════════════ */
+ :root {
+ /* Brand */
+ --flame: #D62B2B; /* fills, rules, indicators */
+ --flame-lite: #F04141; /* small red text — meets AA on dark */
+ --ember: #FF5C1A; /* hover / energized */
+ --gold: #C9A84C; /* certifications only */
+
+ /* Surfaces, darkest to lightest */
+ --pitch: #0C0C0E; /* acrylic panel face */
+ --smoke: #131314; /* page */
+ --coal: #171719; /* alternating band */
+ --ash: #1C1C1F; /* raised card */
+ --steel: #2C2C30; /* hairline border */
+ --slate: #3D3D42; /* stronger border */
+
+ /* Ink */
+ --white: #F0EDE8;
+ --engrave: #E6E2DC; /* panel legend text */
+ --mist: #B4B4B9; /* body */
+ --mist-dim:#8A8A90; /* captions */
+
+ --font-display: 'Bebas Neue', 'Oswald', sans-serif;
+ --font-heading: 'Oswald', sans-serif;
+ --font-body: 'Inter', system-ui, sans-serif;
+
+ --gutter: 5vw;
+ --engraved: 0 1px 0 rgba(0,0,0,0.85), 0 -1px 0 rgba(255,255,255,0.05);
+ }
+
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
+
+ body {
+ background: var(--smoke);
+ color: var(--white);
+ font-family: var(--font-body);
+ font-size: 16px;
+ line-height: 1.6;
+ overflow-x: hidden;
+ }
+
+ img { max-width: 100%; }
+
+ ::selection { background: var(--flame); color: #fff; }
+
+ :focus-visible {
+ outline: 2px solid var(--ember);
+ outline-offset: 3px;
+ }
+
+ .skip-link {
+ position: absolute;
+ left: 1rem;
+ top: -4rem;
+ z-index: 200;
+ background: var(--flame);
+ color: #fff;
+ font-family: var(--font-heading);
+ font-size: 0.75rem;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ padding: 0.75rem 1.25rem;
+ text-decoration: none;
+ transition: top 0.2s ease;
+ }
+
+ .skip-link:focus { top: 1rem; }
+
+ /* ══ TYPE UTILITIES ═══════════════════════════════════════════════════ */
+ .eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.6rem;
+ font-family: var(--font-heading);
+ font-size: 0.7rem;
+ font-weight: 600;
+ letter-spacing: 0.22em;
+ text-transform: uppercase;
+ color: var(--flame-lite);
+ margin-bottom: 0.9rem;
+ }
+
+ .eyebrow::before {
+ content: '';
+ width: 26px;
+ height: 2px;
+ background: var(--flame);
+ flex-shrink: 0;
+ }
+
+ .display {
+ font-family: var(--font-display);
+ font-size: clamp(2.5rem, 5.2vw, 4.1rem);
+ font-weight: 400;
+ line-height: 0.96;
+ letter-spacing: 0.015em;
+ color: var(--white);
+ margin-bottom: 1.25rem;
+ }
+
+ .display .accent { color: var(--flame); }
+
+ .lede {
+ font-size: 1rem;
+ font-weight: 300;
+ color: var(--mist);
+ max-width: 58ch;
+ line-height: 1.75;
+ }
+
+ .lede + .lede { margin-top: 1rem; }
+
+ /* Engraved panel legend — the page's signature type treatment */
+ .legend {
+ font-family: var(--font-heading);
+ font-size: 0.66rem;
+ font-weight: 600;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--engrave);
+ text-shadow: var(--engraved);
+ }
+
+ /* ══ BUTTONS ══════════════════════════════════════════════════════════ */
+ .btn {
+ display: inline-block;
+ font-family: var(--font-heading);
+ font-size: 0.8rem;
+ font-weight: 500;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ padding: 1rem 2rem;
+ border: 1px solid transparent;
+ cursor: pointer;
+ text-decoration: none;
+ text-align: center;
+ transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
+ }
+
+ .btn--primary {
+ background: var(--flame);
+ color: #fff;
+ }
+
+ .btn--primary:hover { background: var(--ember); transform: translateY(-1px); }
+
+ .btn--ghost {
+ background: transparent;
+ color: var(--white);
+ border-color: var(--slate);
+ }
+
+ .btn--ghost:hover { border-color: var(--flame); color: var(--flame-lite); }
+
+ /* ══ NAV ══════════════════════════════════════════════════════════════ */
+ .nav {
+ position: fixed;
+ top: 0; left: 0; right: 0;
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1.5rem;
+ padding: 0 var(--gutter);
+ height: 108px;
+ background: rgba(15,15,16,0.74);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+ border-bottom: 1px solid transparent;
+ transition: height 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
+ }
+
+ .nav.is-scrolled,
+ .nav.is-open {
+ height: 64px;
+ background: rgba(15,15,16,0.94);
+ border-bottom-color: var(--steel);
+ box-shadow: 0 4px 24px rgba(0,0,0,0.55);
+ }
+
+ .nav-logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
+
+ .nav-logo img {
+ width: 230px;
+ height: auto;
+ display: block;
+ transition: width 0.25s ease;
+ }
+
+ .nav.is-scrolled .nav-logo img,
+ .nav.is-open .nav-logo img { width: 132px; }
+
+ .nav-links {
+ display: flex;
+ gap: 1.9rem;
+ list-style: none;
+ }
+
+ .nav-links a {
+ position: relative;
+ font-family: var(--font-heading);
+ font-size: 0.78rem;
+ font-weight: 500;
+ letter-spacing: 0.13em;
+ text-transform: uppercase;
+ color: var(--mist);
+ text-decoration: none;
+ white-space: nowrap;
+ transition: color 0.2s;
+ }
+
+ .nav-links a::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: -0.45rem;
+ width: 24px;
+ height: 2px;
+ background: var(--flame);
+ transform: scaleX(0);
+ transform-origin: left;
+ transition: transform 0.2s ease;
+ }
+
+ .nav-links a:hover,
+ .nav-links a.is-active { color: var(--flame-lite); }
+
+ .nav-links a:hover::after,
+ .nav-links a.is-active::after { transform: scaleX(1); }
+
+ .nav-actions { display: flex; align-items: center; gap: 0.75rem; }
+
+ .nav-cta {
+ font-family: var(--font-heading);
+ font-size: 0.74rem;
+ font-weight: 500;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ white-space: nowrap;
+ background: var(--flame);
+ color: #fff;
+ padding: 0.6rem 1.2rem;
+ border: 1px solid var(--flame);
+ cursor: pointer;
+ text-decoration: none;
+ transition: background 0.2s, color 0.2s;
+ }
+
+ .nav-cta:hover { background: var(--ember); border-color: var(--ember); }
+
+ .nav-cta--call {
+ background: transparent;
+ color: var(--white);
+ }
+
+ .nav-cta--call:hover { background: var(--flame); border-color: var(--flame); color: #fff; }
+
+ .nav-cta--social {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ background: transparent;
+ border-color: var(--slate);
+ color: var(--white);
+ padding: 0.55rem 0.7rem;
+ }
+
+ .nav-cta--social:hover { background: var(--flame); border-color: var(--flame); color: #fff; }
+
+ /* Icon only until the nav collapses, where it gets a label like the others */
+ .nav-social-label { display: none; }
+
+ .nav-toggle {
+ display: none;
+ width: 46px;
+ height: 46px;
+ border: 1px solid var(--slate);
+ background: transparent;
+ color: var(--white);
+ cursor: pointer;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ gap: 5px;
+ }
+
+ .nav-toggle span {
+ width: 20px;
+ height: 2px;
+ background: currentColor;
+ transition: transform 0.2s ease, opacity 0.2s ease;
+ }
+
+ .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+ .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
+ .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+
+ /* ══ HERO ═════════════════════════════════════════════════════════════ */
+ .hero {
+ position: relative;
+ min-height: 100vh;
+ display: flex;
+ align-items: flex-end;
+ /* Top padding clears the nav so the headline can never slide under it
+ on short viewports — the hero grows instead of clipping. */
+ padding: calc(108px + 2.5rem) var(--gutter) 8vh;
+ overflow: hidden;
+ }
+
+ .hero-bg {
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(to right, rgba(8,8,9,0.96) 34%, rgba(8,8,9,0.45) 100%),
+ linear-gradient(to top, rgba(8,8,9,0.9), rgba(8,8,9,0) 45%),
+ url('frontline-hero.png') center/cover no-repeat;
+ }
+
+ /* Diagonal red slash bleeding off the right edge — carried from the mark */
+ .hero-slash {
+ position: absolute;
+ top: 0; right: -60px;
+ width: 180px;
+ height: 100%;
+ background: var(--flame);
+ transform: skewX(-8deg);
+ opacity: 0.09;
+ pointer-events: none;
+ }
+
+ .hero-slash::after {
+ content: '';
+ position: absolute;
+ top: 0; left: -100px;
+ width: 60px;
+ height: 100%;
+ background: var(--ember);
+ opacity: 0.5;
+ }
+
+ .hero-content {
+ position: relative;
+ z-index: 2;
+ max-width: 44rem;
+ width: 100%;
+ }
+
+ /* Hero eyebrow reads as a live panel circuit */
+ .hero-eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.7rem;
+ margin-bottom: 1.4rem;
+ }
+
+ .hero-eyebrow .legend { color: var(--engrave); }
+
+ .led {
+ width: 9px;
+ height: 9px;
+ border-radius: 50%;
+ flex-shrink: 0;
+ background: var(--flame);
+ box-shadow: 0 0 0 3px rgba(214,43,43,0.16), 0 0 12px rgba(255,92,26,0.8);
+ animation: pulse 3.2s ease-in-out infinite;
+ }
+
+ @keyframes pulse {
+ 0%, 100% { box-shadow: 0 0 0 3px rgba(214,43,43,0.16), 0 0 12px rgba(255,92,26,0.75); }
+ 50% { box-shadow: 0 0 0 5px rgba(214,43,43,0.08), 0 0 18px rgba(255,92,26,0.95); }
+ }
+
+ .hero-title {
+ font-family: var(--font-display);
+ font-size: clamp(3.4rem, 8.4vw, 6.8rem);
+ line-height: 0.9;
+ letter-spacing: 0.015em;
+ color: var(--white);
+ margin-bottom: 1rem;
+ }
+
+ .hero-title .accent { color: var(--flame); }
+
+ .hero-sub {
+ font-family: var(--font-heading);
+ font-size: clamp(0.95rem, 2vw, 1.25rem);
+ font-weight: 400;
+ letter-spacing: 0.09em;
+ text-transform: uppercase;
+ color: var(--mist);
+ margin-bottom: 1.6rem;
+ max-width: 48ch;
+ }
+
+ .hero-body {
+ font-size: 1.02rem;
+ font-weight: 300;
+ color: var(--mist);
+ max-width: 52ch;
+ margin-bottom: 2.4rem;
+ line-height: 1.75;
+ }
+
+ .hero-body strong {
+ font-family: var(--font-heading);
+ font-size: 1.06em;
+ font-weight: 600;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ color: var(--flame-lite);
+ }
+
+ .hero-actions {
+ display: flex;
+ gap: 1rem;
+ flex-wrap: wrap;
+ align-items: center;
+ }
+
+ /* ══ TRUST BAR ════════════════════════════════════════════════════════ */
+ .trust-bar {
+ background: var(--ash);
+ border-top: 1px solid var(--steel);
+ border-bottom: 1px solid var(--steel);
+ padding: 1.25rem var(--gutter);
+ display: flex;
+ align-items: center;
+ gap: 2.4rem;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .trust-item {
+ display: flex;
+ align-items: center;
+ gap: 0.6rem;
+ font-family: var(--font-heading);
+ font-size: 0.74rem;
+ font-weight: 500;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--mist);
+ }
+
+ .trust-item svg { flex-shrink: 0; color: var(--flame); }
+
+ .trust-divider { width: 1px; height: 20px; background: var(--steel); }
+
+ /* ══ SECTION SHELL ════════════════════════════════════════════════════ */
+ .section {
+ padding: 7rem var(--gutter);
+ scroll-margin-top: 76px;
+ }
+
+ .section--band { background: var(--coal); }
+
+ .section-head { max-width: 62rem; margin-bottom: 3.5rem; }
+
+ .section-head--split {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
+ gap: 3rem;
+ align-items: end;
+ max-width: none;
+ }
+
+ .section-head--split .display { margin-bottom: 0; }
+
+ /* ══ SERVICES — BENTO ═════════════════════════════════════════════════ */
+ /* Asymmetric grid: the two trades Frontline is known for get the room,
+ the rest fill in around them. */
+ .bento {
+ display: grid;
+ gap: 1px;
+ background: var(--steel);
+ border: 1px solid var(--steel);
+ grid-template-columns: repeat(6, minmax(0, 1fr));
+ grid-template-areas:
+ "elec elec elec elec wir wir"
+ "elec elec elec elec wir wir"
+ "out out det det serv serv"
+ "aud aud aud aud aud aud"
+ "bus bus bus bus bus bus";
+ }
+
+ .b-elec { grid-area: elec; }
+ .b-wir { grid-area: wir; }
+ .b-out { grid-area: out; }
+ .b-det { grid-area: det; }
+ .b-serv { grid-area: serv; }
+ .b-aud { grid-area: aud; }
+
+ .tile {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ background: var(--pitch);
+ }
+
+ .tile-figure {
+ position: relative;
+ overflow: hidden;
+ background: var(--ash);
+ }
+
+ .tile-figure img {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ filter: contrast(1.02);
+ transform: scale(1.01);
+ transition: transform 0.6s ease;
+ }
+
+ .tile:hover .tile-figure img { transform: scale(1.05); }
+
+ .tile-body {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ padding: 1.9rem 1.75rem 2rem;
+ /* acrylic face + sheen */
+ background:
+ linear-gradient(154deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 45%),
+ var(--pitch);
+ }
+
+ .tile-legend {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-size: 0.61rem;
+ letter-spacing: 0.19em;
+ line-height: 1.6;
+ }
+
+ .tile-name {
+ font-family: var(--font-display);
+ font-size: clamp(1.55rem, 2vw, 1.95rem);
+ line-height: 1;
+ letter-spacing: 0.02em;
+ color: var(--white);
+ padding-bottom: 0.95rem;
+ margin-bottom: 0.95rem;
+ border-bottom: 1px solid rgba(255,255,255,0.1);
+ }
+
+ .tile-desc {
+ font-size: 0.875rem;
+ font-weight: 300;
+ color: var(--mist);
+ line-height: 1.7;
+ margin-bottom: 1.3rem;
+ max-width: 46ch;
+ }
+
+ .tile-list {
+ list-style: none;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
+ gap: 0.5rem 1.25rem;
+ margin-top: auto;
+ }
+
+ .tile-list li {
+ position: relative;
+ padding-left: 0.95rem;
+ font-size: 0.8rem;
+ font-weight: 300;
+ color: var(--mist-dim);
+ line-height: 1.5;
+ }
+
+ .tile-list li::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0.6em;
+ width: 7px;
+ height: 2px;
+ background: var(--flame);
+ }
+
+ /* Feature tile — photo runs full bleed, copy sits on the scrim */
+ .tile--feature .tile-figure {
+ position: absolute;
+ inset: 0;
+ }
+
+ .tile--feature .tile-figure::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(to top, rgba(8,8,9,0.96) 30%, rgba(8,8,9,0.72) 62%, rgba(8,8,9,0.25) 100%),
+ linear-gradient(to right, rgba(8,8,9,0.7) 0%, rgba(8,8,9,0) 65%);
+ }
+
+ .tile--feature .tile-body {
+ justify-content: flex-end;
+ min-height: 27rem;
+ padding: 2.5rem;
+ background: none;
+ }
+
+ .tile--feature .tile-name {
+ font-size: clamp(2rem, 3.2vw, 3rem);
+ padding-bottom: 1.1rem;
+ margin-bottom: 1.1rem;
+ border-bottom-color: rgba(255,255,255,0.22);
+ }
+
+ .tile--feature .tile-desc {
+ color: var(--white);
+ opacity: 0.82;
+ max-width: 42ch;
+ margin-bottom: 1.5rem;
+ }
+
+ .tile--feature .tile-list {
+ margin-top: 0;
+ max-width: 38rem;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .tile--feature .tile-list li { color: var(--mist); }
+
+ /* Tall tile — photo on top, copy beneath */
+ .tile--tall .tile-figure { flex: 0 0 34%; min-height: 9rem; }
+
+ /* Medium tiles */
+ .tile--med .tile-figure { flex: 0 0 9.5rem; }
+
+ /* Wide banner tile — photo beside the copy */
+ .tile--wide { flex-direction: row; }
+ .tile--wide .tile-figure { flex: 0 0 38%; min-height: 14rem; }
+ .tile--wide .tile-body { padding: 2.25rem 2.25rem 2.4rem; }
+ .tile--wide .tile-name { font-size: clamp(1.7rem, 2.4vw, 2.3rem); }
+ .tile--wide .tile-desc { max-width: 58ch; }
+ .tile--wide .tile-list { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 46rem; }
+
+ /* Bus bar closing the grid */
+ .bento-bus {
+ grid-area: bus;
+ background: #0A0A0C;
+ padding: 1.5rem clamp(1.5rem, 2.6vw, 2.5rem);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1.5rem;
+ flex-wrap: wrap;
+ }
+
+ .bento-bus p {
+ font-size: 0.92rem;
+ font-weight: 300;
+ color: var(--mist);
+ max-width: 56ch;
+ }
+
+ .bento-bus a {
+ font-family: var(--font-heading);
+ font-size: 0.78rem;
+ font-weight: 500;
+ letter-spacing: 0.13em;
+ text-transform: uppercase;
+ color: var(--flame-lite);
+ text-decoration: none;
+ white-space: nowrap;
+ border-bottom: 1px solid rgba(240,65,65,0.4);
+ padding-bottom: 2px;
+ transition: color 0.2s, border-color 0.2s;
+ }
+
+ .bento-bus a:hover { color: var(--ember); border-color: var(--ember); }
+
+ /* ══ ABOUT ════════════════════════════════════════════════════════════ */
+ .about {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ gap: 4.5rem;
+ align-items: center;
+ padding: 7rem var(--gutter);
+ background: var(--ash);
+ scroll-margin-top: 76px;
+ }
+
+ .about-visual {
+ position: relative;
+ align-self: stretch;
+ min-height: clamp(30rem, 62vh, 44rem);
+ }
+
+ .about-img {
+ width: 100%;
+ height: 100%;
+ min-height: inherit;
+ object-fit: cover;
+ object-position: center;
+ display: block;
+ background: linear-gradient(135deg, #1a1a1a, #2e2e2e);
+ }
+
+ .fr-badge {
+ position: absolute;
+ bottom: 1.25rem;
+ right: -1.25rem;
+ background: var(--smoke);
+ border: 2px solid var(--flame);
+ padding: 1rem 1.25rem;
+ display: flex;
+ align-items: center;
+ gap: 0.85rem;
+ box-shadow: 0 18px 40px -20px rgba(0,0,0,0.9);
+ }
+
+ .fr-badge-flag { width: 44px; flex-shrink: 0; }
+
+ .fr-badge-text {
+ font-family: var(--font-heading);
+ font-size: 0.72rem;
+ font-weight: 500;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--flame-lite);
+ line-height: 1.35;
+ }
+
+ .credentials {
+ display: flex;
+ gap: 2.5rem;
+ margin-top: 2.75rem;
+ flex-wrap: wrap;
+ }
+
+ .credential { display: flex; flex-direction: column; gap: 0.3rem; max-width: 15rem; }
+
+ .credential-mark {
+ font-family: var(--font-display);
+ font-size: 2.4rem;
+ line-height: 1;
+ color: var(--flame);
+ }
+
+ .credential-mark--gold { color: var(--gold); }
+
+ .credential-label {
+ font-family: var(--font-heading);
+ font-size: 0.68rem;
+ font-weight: 500;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--mist-dim);
+ line-height: 1.5;
+ }
+
+ /* ══ REVIEWS ══════════════════════════════════════════════════════════ */
+ .rating-summary {
+ display: flex;
+ align-items: center;
+ gap: 1.25rem;
+ flex-wrap: wrap;
+ }
+
+ .stars {
+ display: inline-flex;
+ gap: 4px;
+ color: var(--flame);
+ }
+
+ .rating-score {
+ font-family: var(--font-display);
+ font-size: 3rem;
+ line-height: 0.9;
+ color: var(--white);
+ }
+
+ .rating-meta {
+ font-family: var(--font-heading);
+ font-size: 0.72rem;
+ font-weight: 500;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ color: var(--mist-dim);
+ margin-top: 0.45rem;
+ }
+
+ .reviews {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+ gap: 1px;
+ background: var(--steel);
+ border: 1px solid var(--steel);
+ }
+
+ .review {
+ background: var(--smoke);
+ padding: 2.5rem 2rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+ }
+
+ .review blockquote {
+ flex: 1;
+ font-size: 0.95rem;
+ font-weight: 300;
+ color: var(--mist);
+ line-height: 1.75;
+ }
+
+ .review-attrib {
+ border-top: 1px solid var(--steel);
+ padding-top: 1.3rem;
+ }
+
+ .review-name {
+ font-family: var(--font-heading);
+ font-size: 0.84rem;
+ font-weight: 600;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--white);
+ }
+
+ .review-source {
+ font-family: var(--font-heading);
+ font-size: 0.64rem;
+ font-weight: 500;
+ letter-spacing: 0.17em;
+ text-transform: uppercase;
+ color: var(--mist-dim);
+ margin-top: 0.35rem;
+ }
+
+ /* ══ GALLERY ══════════════════════════════════════════════════════════ */
+ .filters {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.6rem;
+ margin-bottom: 2.5rem;
+ }
+
+ /* Filters use the same panel language as the services section */
+ .filter {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.6rem;
+ background: var(--pitch);
+ border: 1px solid var(--steel);
+ color: var(--mist);
+ font-family: var(--font-heading);
+ font-size: 0.72rem;
+ font-weight: 500;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ padding: 0.65rem 1.1rem;
+ cursor: pointer;
+ transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
+ }
+
+ .filter::before {
+ content: '';
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ background: var(--slate);
+ transition: background 0.2s ease, box-shadow 0.2s ease;
+ }
+
+ .filter:hover { border-color: var(--slate); color: var(--white); }
+
+ .filter[aria-pressed="true"] {
+ color: var(--white);
+ border-color: var(--flame);
+ background: rgba(214,43,43,0.09);
+ }
+
+ .filter[aria-pressed="true"]::before {
+ background: var(--flame);
+ box-shadow: 0 0 9px rgba(255,92,26,0.9);
+ }
+
+ .filter-count {
+ font-size: 0.66rem;
+ color: var(--mist-dim);
+ letter-spacing: 0.08em;
+ }
+
+ .shots {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
+ gap: 1px;
+ background: var(--steel);
+ border: 1px solid var(--steel);
+ }
+
+ .shot {
+ position: relative;
+ display: block;
+ width: 100%;
+ aspect-ratio: 4 / 5;
+ border: 0;
+ padding: 0;
+ background: var(--ash);
+ overflow: hidden;
+ cursor: pointer;
+ isolation: isolate;
+ }
+
+ .shot[hidden] { display: none; }
+
+ .shot-img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+ filter: saturate(0.9) contrast(1.03);
+ transform: scale(1.01);
+ transition: transform 0.5s ease, filter 0.5s ease;
+ }
+
+ .shot::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(to top, rgba(8,8,9,0.85) 0%, rgba(8,8,9,0.1) 42%, rgba(214,43,43,0.1) 100%);
+ opacity: 0.9;
+ transition: opacity 0.35s ease;
+ pointer-events: none;
+ }
+
+ .shot:hover .shot-img,
+ .shot:focus-visible .shot-img {
+ transform: scale(1.06);
+ filter: saturate(1.05) contrast(1.07);
+ }
+
+ .shot:hover::after { opacity: 0.75; }
+
+ .shot-tag {
+ position: absolute;
+ left: 1rem;
+ bottom: 1rem;
+ right: 1rem;
+ z-index: 1;
+ font-family: var(--font-heading);
+ font-size: 0.66rem;
+ font-weight: 500;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--engrave);
+ text-align: left;
+ text-shadow: 0 1px 4px rgba(0,0,0,0.9);
+ }
+
+ .shot-tag::before {
+ content: '';
+ display: block;
+ width: 20px;
+ height: 2px;
+ background: var(--flame);
+ margin-bottom: 0.55rem;
+ }
+
+ .gallery-more {
+ display: flex;
+ justify-content: center;
+ margin-top: 2.5rem;
+ }
+
+ .gallery-empty {
+ padding: 3rem 0;
+ text-align: center;
+ color: var(--mist-dim);
+ font-family: var(--font-heading);
+ font-size: 0.8rem;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ }
+
+ /* ══ LIGHTBOX ═════════════════════════════════════════════════════════ */
+ .lightbox {
+ position: fixed;
+ inset: 0;
+ z-index: 1000;
+ display: grid;
+ place-items: center;
+ padding: clamp(1rem, 4vw, 3.5rem);
+ background: rgba(8,8,9,0.72);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ transition: opacity 0.2s ease, visibility 0.2s ease;
+ }
+
+ .lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
+
+ .lightbox-figure {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+ max-height: 100%;
+ }
+
+ .lightbox-figure img {
+ max-width: 100%;
+ max-height: 78vh;
+ object-fit: contain;
+ box-shadow: 0 30px 80px -30px rgba(0,0,0,0.9);
+ }
+
+ .lightbox-caption {
+ display: flex;
+ align-items: baseline;
+ gap: 1rem;
+ flex-wrap: wrap;
+ justify-content: center;
+ text-align: center;
+ max-width: 62ch;
+ }
+
+ .lightbox-index {
+ font-family: var(--font-heading);
+ font-size: 0.72rem;
+ font-weight: 600;
+ letter-spacing: 0.16em;
+ color: var(--flame-lite);
+ white-space: nowrap;
+ }
+
+ .lightbox-text {
+ font-size: 0.88rem;
+ font-weight: 300;
+ color: var(--mist);
+ }
+
+ .lightbox-btn {
+ position: fixed;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ border: 1px solid var(--slate);
+ background: rgba(12,12,14,0.85);
+ color: var(--white);
+ cursor: pointer;
+ transition: border-color 0.2s ease, color 0.2s ease;
+ }
+
+ .lightbox-btn:hover { border-color: var(--flame); color: var(--flame-lite); }
+
+ .lightbox-close { top: 1.25rem; right: 1.25rem; }
+ .lightbox-prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
+ .lightbox-next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
+
+ body.is-locked { overflow: hidden; }
+
+ /* ══ SERVICE AREAS ════════════════════════════════════════════════════ */
+ .areas {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
+ gap: 1px;
+ background: var(--steel);
+ border: 1px solid var(--steel);
+ margin-top: 3.5rem;
+ }
+
+ .area {
+ background: var(--ash);
+ padding: 2.75rem 2.25rem;
+ min-height: 15rem;
+ }
+
+ .area-name {
+ font-family: var(--font-display);
+ font-size: clamp(2.4rem, 5vw, 3.6rem);
+ line-height: 1;
+ color: var(--white);
+ margin-bottom: 0.35rem;
+ }
+
+ .area-label {
+ font-family: var(--font-heading);
+ font-size: 0.72rem;
+ font-weight: 600;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ color: var(--flame-lite);
+ margin-bottom: 1.1rem;
+ }
+
+ .area-copy {
+ font-size: 0.92rem;
+ font-weight: 300;
+ color: var(--mist);
+ line-height: 1.7;
+ }
+
+ /* ══ CONTACT ══════════════════════════════════════════════════════════ */
+ .contact {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ gap: 4.5rem;
+ align-items: start;
+ padding: 7rem var(--gutter);
+ background: var(--ash);
+ scroll-margin-top: 76px;
+ }
+
+ .contact-info {
+ display: flex;
+ flex-direction: column;
+ gap: 1.6rem;
+ margin-top: 2.5rem;
+ }
+
+ .contact-row { display: flex; align-items: flex-start; gap: 1rem; }
+
+ .contact-icon {
+ width: 20px;
+ height: 20px;
+ color: var(--flame);
+ flex-shrink: 0;
+ margin-top: 3px;
+ }
+
+ .contact-label {
+ font-family: var(--font-heading);
+ font-size: 0.65rem;
+ font-weight: 500;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--mist-dim);
+ margin-bottom: 0.15rem;
+ }
+
+ .contact-value {
+ font-size: 1rem;
+ color: var(--white);
+ text-decoration: none;
+ }
+
+ a.contact-value:hover { color: var(--flame-lite); }
+
+ .social-row { display: flex; gap: 0.75rem; margin-top: 0.5rem; flex-wrap: wrap; }
+
+ .social-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.6rem;
+ font-family: var(--font-heading);
+ font-size: 0.76rem;
+ font-weight: 600;
+ letter-spacing: 0.11em;
+ text-transform: uppercase;
+ color: var(--white);
+ background: var(--smoke);
+ border: 1px solid var(--steel);
+ padding: 0.8rem 1.15rem;
+ text-decoration: none;
+ transition: background 0.2s, border-color 0.2s, color 0.2s;
+ }
+
+ .social-btn svg { color: var(--flame); transition: color 0.2s; }
+
+ .social-btn:hover {
+ background: var(--flame);
+ border-color: var(--flame);
+ color: #fff;
+ }
+
+ .social-btn:hover svg { color: #fff; }
+
+ /* Form */
+ .quote-form {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ background: var(--smoke);
+ border: 1px solid var(--steel);
+ padding: 2.25rem;
+ }
+
+ .form-title {
+ font-family: var(--font-display);
+ font-size: 1.75rem;
+ line-height: 1;
+ color: var(--white);
+ margin-bottom: 0.35rem;
+ }
+
+ .form-note {
+ font-size: 0.85rem;
+ font-weight: 300;
+ color: var(--mist-dim);
+ margin-bottom: 0.75rem;
+ }
+
+ .form-field { display: flex; flex-direction: column; }
+
+ .form-label {
+ font-family: var(--font-heading);
+ font-size: 0.65rem;
+ font-weight: 500;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--mist-dim);
+ margin-bottom: 0.4rem;
+ }
+
+ .form-input,
+ .form-select,
+ .form-textarea {
+ background: var(--pitch);
+ border: 1px solid var(--steel);
+ color: var(--white);
+ font-family: var(--font-body);
+ font-size: 0.95rem;
+ padding: 0.8rem 1rem;
+ outline: none;
+ transition: border-color 0.2s;
+ width: 100%;
+ }
+
+ .form-input::placeholder,
+ .form-textarea::placeholder { color: #5A5A5F; }
+
+ .form-input:focus,
+ .form-select:focus,
+ .form-textarea:focus { border-color: var(--flame); }
+
+ .form-input:disabled,
+ .form-select:disabled,
+ .form-textarea:disabled { opacity: 0.5; }
+
+ .form-select { appearance: none; cursor: pointer; }
+
+ .form-textarea { resize: vertical; min-height: 7rem; }
+
+ .form-row {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 1rem;
+ }
+
+ .form-submit { width: 100%; padding: 1.1rem 1rem; font-size: 0.85rem; }
+
+ .form-fine {
+ font-size: 0.76rem;
+ color: var(--mist-dim);
+ text-align: center;
+ line-height: 1.6;
+ }
+
+ .form-success {
+ display: none;
+ border: 1px solid var(--flame);
+ background: rgba(214,43,43,0.08);
+ padding: 2rem 1.5rem;
+ text-align: center;
+ }
+
+ .quote-form.is-sent .form-success { display: block; }
+ .quote-form.is-sent > :not(.form-success) { display: none; }
+
+ .form-success h3 {
+ font-family: var(--font-display);
+ font-size: 1.6rem;
+ line-height: 1;
+ color: var(--white);
+ margin-bottom: 0.75rem;
+ }
+
+ .form-success p {
+ font-size: 0.9rem;
+ font-weight: 300;
+ color: var(--mist);
+ line-height: 1.7;
+ }
+
+ .form-success a { color: var(--flame-lite); }
+
+ /* ══ STICKY CALL ══════════════════════════════════════════════════════ */
+ .sticky-call {
+ position: fixed;
+ left: 50%;
+ bottom: 1.25rem;
+ z-index: 90;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.85rem;
+ min-width: min(92vw, 26rem);
+ padding: 0.8rem 1rem;
+ background: #101012;
+ border: 1px solid var(--flame);
+ box-shadow: 0 16px 40px -12px rgba(0,0,0,0.8);
+ color: var(--white);
+ text-decoration: none;
+ transform: translate(-50%, calc(100% + 2rem));
+ opacity: 0;
+ pointer-events: none;
+ transition: transform 0.25s ease, opacity 0.25s ease;
+ }
+
+ .sticky-call.is-visible {
+ transform: translate(-50%, 0);
+ opacity: 1;
+ pointer-events: auto;
+ }
+
+ .sticky-call-icon {
+ width: 42px;
+ height: 42px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ background: var(--flame);
+ color: #fff;
+ }
+
+ .sticky-call-copy { display: flex; flex-direction: column; line-height: 1.25; }
+
+ .sticky-call-label {
+ font-family: var(--font-heading);
+ font-size: 0.66rem;
+ font-weight: 500;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--mist);
+ }
+
+ .sticky-call-number {
+ font-family: var(--font-heading);
+ font-size: 1.05rem;
+ font-weight: 500;
+ letter-spacing: 0.04em;
+ color: var(--white);
+ }
+
+ /* ══ FOOTER ═══════════════════════════════════════════════════════════ */
+ .footer {
+ background: #101012;
+ border-top: 1px solid var(--steel);
+ padding: 3.5rem var(--gutter) 2rem;
+ }
+
+ .footer-grid {
+ display: grid;
+ grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
+ gap: 3rem;
+ padding-bottom: 2.5rem;
+ border-bottom: 1px solid var(--steel);
+ }
+
+ .footer-logo img { width: 230px; height: auto; display: block; margin-bottom: 1.25rem; }
+
+ .footer-social { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
+
+ .footer-social-btn {
+ width: 42px;
+ height: 42px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid var(--steel);
+ color: var(--mist);
+ text-decoration: none;
+ transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+ }
+
+ .footer-social-btn:hover {
+ background: var(--flame);
+ border-color: var(--flame);
+ color: #fff;
+ }
+
+ .footer-blurb {
+ font-size: 0.86rem;
+ font-weight: 300;
+ color: var(--mist-dim);
+ line-height: 1.7;
+ max-width: 34ch;
+ }
+
+ .footer-col-title {
+ font-family: var(--font-heading);
+ font-size: 0.68rem;
+ font-weight: 600;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--white);
+ margin-bottom: 1.1rem;
+ }
+
+ .footer-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
+
+ .footer-list a,
+ .footer-list span {
+ font-size: 0.86rem;
+ font-weight: 300;
+ color: var(--mist-dim);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .footer-list a:hover { color: var(--flame-lite); }
+
+ .footer-base {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ flex-wrap: wrap;
+ padding-top: 1.75rem;
+ }
+
+ .footer-note { font-size: 0.76rem; color: #5F5F64; font-weight: 300; }
+
+ /* ══ SCROLL REVEAL ════════════════════════════════════════════════════ */
+ .js [data-reveal] {
+ opacity: 0;
+ transform: translateY(16px);
+ transition: opacity 0.6s ease, transform 0.6s ease;
+ }
+
+ .js [data-reveal].is-inview { opacity: 1; transform: none; }
+
+ /* ══ RESPONSIVE ═══════════════════════════════════════════════════════ */
+ /* Six links, two social icons and two CTAs need ~1250px — collapse below that */
+ @media (max-width: 1240px) {
+ .nav {
+ height: auto;
+ min-height: 92px;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+ padding: 0.5rem var(--gutter);
+ }
+
+ .nav.is-scrolled,
+ .nav.is-open { height: auto; min-height: 64px; }
+
+ .nav-logo { flex: 1; min-width: 0; }
+ .nav-logo img { width: min(56vw, 200px); }
+
+ .nav.is-scrolled .nav-logo img,
+ .nav.is-open .nav-logo img { width: 132px; }
+
+ .nav-toggle { display: flex; position: relative; z-index: 2; }
+
+ .nav-links {
+ order: 3;
+ width: 100%;
+ flex-direction: column;
+ align-items: stretch;
+ gap: 0.25rem;
+ max-height: 0;
+ margin-top: 0;
+ padding: 0;
+ overflow: hidden;
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ background: #101012;
+ border-top: 1px solid transparent;
+ transition: max-height 0.28s ease, margin-top 0.28s ease, padding 0.28s ease, opacity 0.2s ease, visibility 0.2s ease, border-color 0.2s ease;
+ }
+
+ .nav.is-open .nav-links {
+ max-height: 28rem;
+ margin-top: 0.5rem;
+ padding: 0.75rem;
+ opacity: 1;
+ visibility: visible;
+ pointer-events: auto;
+ border-top-color: var(--steel);
+ box-shadow: 0 18px 34px rgba(0,0,0,0.5);
+ }
+
+ .nav-links a {
+ display: block;
+ padding: 0.9rem 0.75rem;
+ background: var(--ash);
+ border: 1px solid transparent;
+ transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+ }
+
+ .nav-links a:hover,
+ .nav-links a.is-active {
+ background: rgba(214,43,43,0.12);
+ border-color: rgba(214,43,43,0.38);
+ }
+
+ .nav-links a::after { display: none; }
+
+ .nav-actions {
+ order: 4;
+ width: 100%;
+ flex-direction: column;
+ gap: 0;
+ }
+
+ .nav-cta {
+ display: block;
+ width: 100%;
+ max-height: 0;
+ margin-top: 0;
+ padding: 0;
+ overflow: hidden;
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ border-color: transparent;
+ transition: max-height 0.28s ease, margin-top 0.28s ease, padding 0.28s ease, opacity 0.2s ease, visibility 0.2s ease, background 0.2s ease;
+ }
+
+ .nav.is-open .nav-cta {
+ max-height: 4rem;
+ margin-top: 0.5rem;
+ padding: 0.9rem 1rem;
+ opacity: 1;
+ visibility: visible;
+ pointer-events: auto;
+ }
+
+ .nav.is-open .nav-cta--call {
+ background: var(--ash);
+ border-color: var(--flame);
+ }
+
+ .about,
+ .contact,
+ .section-head--split {
+ grid-template-columns: minmax(0, 1fr);
+ gap: 3rem;
+ }
+
+ .section-head--split { align-items: start; }
+ .section-head--split .display { margin-bottom: 0; }
+
+ .about-visual { min-height: clamp(24rem, 56vh, 34rem); }
+
+ .fr-badge { right: 1rem; }
+
+ .contact-info { margin-top: 0; }
+
+ /* Bento reflows to two columns; the feature and banner stay full width */
+ .bento {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ grid-template-areas:
+ "elec elec"
+ "wir out"
+ "det serv"
+ "aud aud"
+ "bus bus";
+ }
+
+ .tile--tall .tile-figure { flex: 0 0 11rem; }
+
+ /* In the collapsed nav the social links behave like the other CTAs */
+ .nav-cta--social { display: flex; }
+ .nav-cta--social .nav-social-label { display: inline; }
+
+ }
+
+ @media (max-width: 620px) {
+ .section { padding: 4.5rem var(--gutter); }
+ .about, .contact { padding: 4.5rem var(--gutter); }
+
+ .hero {
+ min-height: 100svh;
+ align-items: flex-start;
+ padding-top: calc(92px + 2.5rem);
+ padding-bottom: 4rem;
+ }
+
+ /* A portrait viewport crops this panorama down to ~20% of its width, so
+ anchor right to keep the helm and technician in frame instead of the
+ empty water. Order matches the three layers: scrim, scrim, photo. */
+ .hero-bg {
+ background-position: 0 0, 0 0, 70% center;
+ }
+
+ .hero-title { font-size: clamp(2.9rem, 17vw, 4.2rem); line-height: 0.88; }
+ .hero-sub { margin-bottom: 1.25rem; }
+ .hero-body { margin-bottom: 2rem; }
+ .hero-actions { align-items: stretch; }
+ .btn { width: 100%; padding: 0.95rem 1rem; }
+
+ .trust-bar { justify-content: flex-start; gap: 1.25rem 2rem; }
+ .trust-divider { display: none; }
+
+ .bento {
+ grid-template-columns: minmax(0, 1fr);
+ grid-template-areas: "elec" "wir" "out" "det" "serv" "aud" "bus";
+ }
+
+ .tile-body { padding: 1.6rem 1.4rem 1.8rem; }
+ .tile--feature .tile-body { min-height: 22rem; padding: 1.8rem 1.5rem; }
+ .tile--feature .tile-list,
+ .tile--wide .tile-list { grid-template-columns: minmax(0, 1fr); }
+ .tile--wide { flex-direction: column; }
+ .tile--wide .tile-figure { flex: 0 0 11rem; }
+ .tile--wide .tile-body { padding: 1.6rem 1.4rem 1.8rem; }
+ .bento-bus { padding: 1.5rem 1.4rem; }
+
+ .quote-form { padding: 1.5rem; }
+ .form-row { grid-template-columns: minmax(0, 1fr); }
+
+ .shots { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
+ .shot-tag { left: 0.7rem; right: 0.7rem; bottom: 0.7rem; font-size: 0.58rem; letter-spacing: 0.12em; }
+
+ .lightbox-prev { left: 0.5rem; }
+ .lightbox-next { right: 0.5rem; }
+ .lightbox-figure img { max-height: 68vh; }
+
+ .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
+
+ .sticky-call {
+ left: var(--gutter);
+ right: var(--gutter);
+ bottom: 0.75rem;
+ min-width: 0;
+ transform: translateY(calc(100% + 1.5rem));
+ }
+
+ .sticky-call.is-visible { transform: translateY(0); }
+
+ .fr-badge { right: 0.75rem; bottom: 0.75rem; max-width: calc(100% - 1.5rem); padding: 0.8rem 0.9rem; }
+ }
+
+ @media (prefers-reduced-motion: reduce) {
+ html { scroll-behavior: auto; }
+ *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
+ .js [data-reveal] { opacity: 1; transform: none; }
+ }
+ </style>
+</head>
+<body>
+
+ <a class="skip-link" href="#main">Skip to content</a>
+
+ <!-- ══ NAV ══════════════════════════════════════════════════════════════ -->
+ <nav class="nav" id="site-nav">
+ <a class="nav-logo" href="#hero" aria-label="Frontline Boat Services home">
+ <img src="frontline-logo.png" alt="Frontline Boat Services" width="230" height="94">
+ </a>
+ <button class="nav-toggle" type="button" aria-label="Open navigation" aria-controls="primary-navigation" aria-expanded="false">
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ </button>
+ <ul class="nav-links" id="primary-navigation">
+ <li><a href="#services">Services</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#reviews">Reviews</a></li>
+ <li><a href="#work">Our Work</a></li>
+ <li><a href="#areas">Areas</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ <div class="nav-actions">
+ <a class="nav-cta nav-cta--social" href="https://instagram.com/frontlineboats" target="_blank" rel="noopener" aria-label="Frontline Boat Services on Instagram">
+ <svg width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.9" viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
+ <span class="nav-social-label">@FrontlineBoats</span>
+ </a>
+ <a class="nav-cta nav-cta--social" href="https://www.facebook.com/frontlineboats/" target="_blank" rel="noopener" aria-label="Frontline Boat Services on Facebook">
+ <svg width="17" height="17" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
+ <span class="nav-social-label">Facebook</span>
+ </a>
+ <a class="nav-cta nav-cta--call" href="tel:+17862780478">Call (786) 278-0478</a>
+ <a class="nav-cta" href="#contact">Get a Quote</a>
+ </div>
+ </nav>
+
+ <main id="main">
+
+ <!-- ══ HERO ═══════════════════════════════════════════════════════════ -->
+ <section id="hero" class="hero">
+ <div class="hero-bg"></div>
+ <div class="hero-slash"></div>
+ <div class="hero-content">
+ <div class="hero-eyebrow">
+ <span class="led" aria-hidden="true"></span>
+ <span class="legend">Miami, FL — First Responder Owned & Operated</span>
+ </div>
+ <h1 class="hero-title">FULL SERVICE <br><span class="accent">MARINE</span> SOLUTIONS</h1>
+ <p class="hero-sub">Electronics · Outboards · Rewiring · Audio & Lighting · Detailing</p>
+ <p class="hero-body">
+ <strong>Frontline Boat Services</strong> keeps South Florida boats running and looking right —
+ from a single gauge to a full rewire, an outboard service, or a ceramic coating. NMEA certified,
+ marine-grade parts, every circuit labeled and tested before you get the keys back.
+ </p>
+ <div class="hero-actions">
+ <a class="btn btn--primary" href="#contact">Get a Free Quote</a>
+ <a class="btn btn--ghost" href="#services">See What We Do</a>
+ </div>
+ </div>
+ </section>
+
+ <!-- ══ TRUST BAR ══════════════════════════════════════════════════════ -->
+ <div class="trust-bar">
+ <div class="trust-item">
+ <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+ First Responder Owned
+ </div>
+ <div class="trust-divider" aria-hidden="true"></div>
+ <div class="trust-item">
+ <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+ NMEA Certified
+ </div>
+ <div class="trust-divider" aria-hidden="true"></div>
+ <div class="trust-item">
+ <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
+ Mobile & Dockside
+ </div>
+ <div class="trust-divider" aria-hidden="true"></div>
+ <div class="trust-item">
+ <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+ Miami-Dade & Broward
+ </div>
+ <div class="trust-divider" aria-hidden="true"></div>
+ <div class="trust-item">
+ <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ 5.0 Stars on Google
+ </div>
+ </div>
+
+ <!-- ══ SERVICES ═══════════════════════════════════════════════════════ -->
+ <section id="services" class="section">
+ <div class="section-head section-head--split" data-reveal>
+ <div>
+ <p class="eyebrow">What We Do</p>
+ <h2 class="display">EVERY SYSTEM,<br>HANDLED RIGHT</h2>
+ </div>
+ <p class="lede">
+ Six trades under one roof, so you are not chasing three vendors to finish one boat. Every
+ job gets the same standard: diagnosed properly, built to marine spec, labeled and tested
+ before it leaves.
+ </p>
+ </div>
+
+ <div class="bento" data-reveal>
+
+ <article class="tile tile--feature b-elec">
+ <div class="tile-figure">
+ <img src="gallery/electronics-garmin-twin-display-acrylic.jpg" alt="Twin Garmin displays set into a custom-cut acrylic helm panel with engraved switch legends" loading="lazy">
+ </div>
+ <div class="tile-body">
+ <span class="legend tile-legend">Installs · Upgrades · Custom Systems</span>
+ <h3 class="tile-name">Marine Electronics</h3>
+ <p class="tile-desc">
+ Chartplotters, sonar, radar and comms on properly built NMEA 2000 backbones, set into a
+ custom acrylic helm panel cut for your dash.
+ </p>
+ <ul class="tile-list">
+ <li>Chartplotters & MFDs</li>
+ <li>Radar & sonar</li>
+ <li>VHF, AIS & antennas</li>
+ <li>Autopilot & steering</li>
+ <li>NMEA 2000 networks</li>
+ <li>Custom acrylic helm panels</li>
+ </ul>
+ </div>
+ </article>
+
+ <article class="tile tile--tall b-wir">
+ <div class="tile-figure">
+ <img src="gallery/wiring-rigging-board-bus-bars.jpg" alt="Custom rigging board with dual fuse blocks, bus bars, NMEA 2000 drops and labeled circuits" loading="lazy">
+ </div>
+ <div class="tile-body">
+ <span class="legend tile-legend">Custom Wiring · Battery Systems · Acrylic Panels</span>
+ <h3 class="tile-name">Wiring & Rewiring</h3>
+ <p class="tile-desc">
+ Full rewires and custom distribution on tinned wire with proper fusing, finished with a
+ custom acrylic switch panel. Every circuit labeled.
+ </p>
+ <ul class="tile-list">
+ <li>Complete rewires</li>
+ <li>Distribution & fusing</li>
+ <li>Battery banks & switches</li>
+ <li>Chargers & isolators</li>
+ <li>Custom acrylic switch panels</li>
+ <li>Harness cleanup</li>
+ </ul>
+ </div>
+ </article>
+
+ <article class="tile tile--med b-out">
+ <div class="tile-figure">
+ <img src="gallery/outboard-service-oil-change.jpg" alt="Outboard tilted up on a bay boat for a scheduled oil and filter service" loading="lazy">
+ </div>
+ <div class="tile-body">
+ <span class="legend tile-legend">Maintenance · Repairs · Diagnostics</span>
+ <h3 class="tile-name">Outboard Services</h3>
+ <p class="tile-desc">
+ Scheduled service and real diagnostics on Yamaha, Mercury and Suzuki power.
+ </p>
+ <ul class="tile-list">
+ <li>Scheduled servicing</li>
+ <li>Oil & gearcase lube</li>
+ <li>Water pumps & impellers</li>
+ <li>Fault-code diagnostics</li>
+ <li>Starters & charging</li>
+ <li>Rigging & controls</li>
+ </ul>
+ </div>
+ </article>
+
+ <article class="tile tile--med b-det">
+ <div class="tile-figure">
+ <img src="gallery/detailing-seavee-hull-gloss.jpg" alt="SeaVee hull compounded and polished to a mirror gloss at a Miami dock" loading="lazy">
+ </div>
+ <div class="tile-body">
+ <span class="legend tile-legend">Interior · Exterior · Full Packages</span>
+ <h3 class="tile-name">Detailing & Coatings</h3>
+ <p class="tile-desc">
+ Wash-and-wax through full gelcoat restoration and ceramic coating, inside and out.
+ </p>
+ <ul class="tile-list">
+ <li>Wash, wax & sealants</li>
+ <li>Compound & polish</li>
+ <li>Ceramic coatings</li>
+ <li>Gelcoat restoration</li>
+ <li>Interior, vinyl & canvas</li>
+ <li>Non-skid & teak</li>
+ </ul>
+ </div>
+ </article>
+
+ <article class="tile tile--med b-serv">
+ <div class="tile-figure">
+ <img src="gallery/repair-bilge-pumps-seachest-battery.jpg" alt="Bilge compartment with washdown pump, sea chest plumbing and a properly protected battery switch" loading="lazy">
+ </div>
+ <div class="tile-body">
+ <span class="legend tile-legend">Wiring · Lighting · Pumps · Sea Chests</span>
+ <h3 class="tile-name">Service & Repair</h3>
+ <p class="tile-desc">
+ The running list every boat builds up, cleared in one visit instead of one weekend at a time.
+ </p>
+ <ul class="tile-list">
+ <li>Bilge & livewell pumps</li>
+ <li>Sea chests & plumbing</li>
+ <li>Nav & courtesy lighting</li>
+ <li>Shore power & chargers</li>
+ <li>Trim, tilt & jack plates</li>
+ <li>Electrical troubleshooting</li>
+ </ul>
+ </div>
+ </article>
+
+ <article class="tile tile--wide b-aud">
+ <div class="tile-figure">
+ <img src="gallery/lighting-night-helm-simrad-led.jpg" alt="Night helm with a Simrad chartplotter, Fusion stereo and green LED-lit marine speakers" loading="lazy">
+ </div>
+ <div class="tile-body">
+ <span class="legend tile-legend">Marine Audio · LED Lighting · Custom Installs</span>
+ <h3 class="tile-name">Audio & Lighting</h3>
+ <p class="tile-desc">
+ Sound and light that survive saltwater, sun and vibration, mounted so nothing shakes
+ itself loose offshore.
+ </p>
+ <ul class="tile-list">
+ <li>Speakers & subwoofers</li>
+ <li>Amplifiers & zones</li>
+ <li>Head units & controls</li>
+ <li>Underwater lights</li>
+ <li>LED accent & spreaders</li>
+ <li>Custom acrylic fabrication</li>
+ </ul>
+ </div>
+ </article>
+
+ <div class="bento-bus">
+ <p>Not on the list? If it is on the boat, ask. Most of what we do started as somebody's odd job.</p>
+ <a href="tel:+17862780478">Call or text (786) 278-0478</a>
+ </div>
+ </div>
+ </section>
+
+ <!-- ══ ABOUT ══════════════════════════════════════════════════════════ -->
+ <section id="about" class="about">
+ <div class="about-visual" data-reveal>
+ <img class="about-img" src="frontline-about.jpg" alt="Frontline Boat Services technician washing down a center console at a Miami dock at sunset" loading="lazy">
+ <div class="fr-badge">
+ <svg class="fr-badge-flag" viewBox="0 0 60 36" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Thin red line flag">
+ <rect width="60" height="36" fill="#1A1A1A"/>
+ <rect y="0" width="60" height="4" fill="#555"/>
+ <rect y="8" width="60" height="4" fill="#555"/>
+ <rect y="16" width="60" height="4" fill="#D62B2B"/>
+ <rect y="24" width="60" height="4" fill="#555"/>
+ <rect y="32" width="60" height="4" fill="#555"/>
+ <rect width="24" height="20" fill="#1A1A1A" opacity="0.6"/>
+ </svg>
+ <div class="fr-badge-text">First Responder<br>Owned & Operated</div>
+ </div>
+ </div>
+
+ <div data-reveal>
+ <p class="eyebrow">About Frontline</p>
+ <h2 class="display">TRAINED TO<br>NEVER FAIL</h2>
+ <p class="lede">
+ Frontline Boat Services was founded by Brian Frias, an active firefighter who brought the same
+ habits off the truck as on it: no shortcuts, no guesswork, no half-measures.
+ </p>
+ <p class="lede">
+ Brian is NMEA certified as a Basic NMEA 2000 Installer and an Advanced Marine Electronics
+ Installer (AMEI), so the standards behind every install, rewire and diagnostic job are the
+ documented ones — not whatever the last guy felt like doing.
+ </p>
+ <p class="lede">
+ We work out of Miami for boaters across South Florida who are tired of sloppy installs and
+ chasing the same electrical gremlin season after season. When we hand your boat back, every
+ system works — and keeps working.
+ </p>
+ <div class="credentials">
+ <div class="credential">
+ <span class="credential-mark credential-mark--gold">NMEA</span>
+ <span class="credential-label">Certified NMEA 2000 Installer</span>
+ </div>
+ <div class="credential">
+ <span class="credential-mark credential-mark--gold">AMEI</span>
+ <span class="credential-label">Advanced Marine Electronics Installer</span>
+ </div>
+ <div class="credential">
+ <span class="credential-mark">100%</span>
+ <span class="credential-label">First Responder Owned & Operated</span>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- ══ REVIEWS ════════════════════════════════════════════════════════ -->
+ <section id="reviews" class="section section--band">
+ <div class="section-head section-head--split" data-reveal>
+ <div>
+ <p class="eyebrow">What Boat Owners Say</p>
+ <h2 class="display">RATED 5.0<br>ON GOOGLE</h2>
+ </div>
+ <div class="rating-summary">
+ <span class="rating-score">5.0</span>
+ <div>
+ <span class="stars" role="img" aria-label="5 out of 5 stars">
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ </span>
+ <div class="rating-meta">19 reviews on Google</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="reviews" data-reveal>
+ <article class="review">
+ <span class="stars" role="img" aria-label="5 out of 5 stars">
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ </span>
+ <blockquote>
+ “Recently had my Boat completely re-wired and panel re-done. Brian did an amazing clean
+ job. I would reach out to his company if you're planning on upgrading your boat.”
+ </blockquote>
+ <div class="review-attrib">
+ <div class="review-name">Pedro Figueroa</div>
+ <div class="review-source">Google Review</div>
+ </div>
+ </article>
+
+ <article class="review">
+ <span class="stars" role="img" aria-label="5 out of 5 stars">
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ </span>
+ <blockquote>
+ “Greatest investment ive done to my boat. I have a 22ft Everglades and i had the entire
+ boat rewired as well as put brand new pumps and other accessories. I highly recommend
+ Frontline for the clean and detailed installation as well as great customer service.”
+ </blockquote>
+ <div class="review-attrib">
+ <div class="review-name">Alejandro Brunet</div>
+ <div class="review-source">Google Review</div>
+ </div>
+ </article>
+
+ <article class="review">
+ <span class="stars" role="img" aria-label="5 out of 5 stars">
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ </span>
+ <blockquote>
+ “Brian with Frontline came out and did my 100 hour service quickly and only used OEM
+ products. I would highly recommend.”
+ </blockquote>
+ <div class="review-attrib">
+ <div class="review-name">Matt Baker</div>
+ <div class="review-source">Google Review</div>
+ </div>
+ </article>
+ </div>
+
+ <div class="gallery-more">
+ <a class="btn btn--ghost" href="https://share.google/EpuaCoLlPrNN9mZjG" target="_blank" rel="noopener">Read all 19 reviews on Google</a>
+ </div>
+ </section>
+
+ <!-- ══ OUR WORK ═══════════════════════════════════════════════════════ -->
+ <section id="work" class="section">
+ <div class="section-head section-head--split" data-reveal>
+ <div>
+ <p class="eyebrow">Recent Work</p>
+ <h2 class="display">SYSTEMS BUILT<br>FOR THE WATER</h2>
+ </div>
+ <p class="lede">
+ Real jobs off South Florida docks — helm rebuilds, full rewires, outboard service and
+ finish work. Pick a trade to filter, or tap any photo to see it full size.
+ </p>
+ </div>
+
+ <div class="filters" role="group" aria-label="Filter photos by trade" data-reveal>
+ <button class="filter" type="button" data-filter="all" aria-pressed="true">All Work <span class="filter-count">30</span></button>
+ <button class="filter" type="button" data-filter="electronics" aria-pressed="false">Electronics <span class="filter-count">8</span></button>
+ <button class="filter" type="button" data-filter="wiring" aria-pressed="false">Wiring & Repair <span class="filter-count">7</span></button>
+ <button class="filter" type="button" data-filter="outboard" aria-pressed="false">Outboard <span class="filter-count">5</span></button>
+ <button class="filter" type="button" data-filter="detailing" aria-pressed="false">Detailing <span class="filter-count">7</span></button>
+ <button class="filter" type="button" data-filter="audio" aria-pressed="false">Audio & Lighting <span class="filter-count">3</span></button>
+ </div>
+
+ <div class="shots" id="shots" data-reveal>
+
+ <!-- Electronics -->
+ <button class="shot" type="button" data-cat="electronics" data-full="gallery/electronics-seafox-helm-raymarine.jpg">
+ <img class="shot-img" src="gallery/thumbs/electronics-seafox-helm-raymarine.jpg" alt="Sea Fox center console helm with a Raymarine multifunction display, analog gauges and a custom backlit switch panel" loading="lazy">
+ <span class="shot-tag">Raymarine helm build</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="electronics" data-full="gallery/electronics-garmin-twin-display-acrylic.jpg">
+ <img class="shot-img" src="gallery/thumbs/electronics-garmin-twin-display-acrylic.jpg" alt="Twin Garmin displays set into a custom acrylic helm panel with a Fusion stereo and Lenco trim controls" loading="lazy">
+ <span class="shot-tag">Custom acrylic helm panel</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="electronics" data-full="gallery/electronics-sea-pro-twin-garmin-vhf.jpg">
+ <img class="shot-img" src="gallery/thumbs/electronics-sea-pro-twin-garmin-vhf.jpg" alt="Sea Pro helm with twin Garmin displays, a VHF radio and a refreshed gauge cluster" loading="lazy">
+ <span class="shot-tag">Twin display & VHF</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="electronics" data-full="gallery/electronics-action-craft-simrad-helm.jpg">
+ <img class="shot-img" src="gallery/thumbs/electronics-action-craft-simrad-helm.jpg" alt="Action Craft helm fitted with a Simrad display, stereo head unit and new switch panel" loading="lazy">
+ <span class="shot-tag">Simrad flats-boat helm</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="electronics" data-full="gallery/electronics-wellcraft-garmin-upgrade.jpg">
+ <img class="shot-img" src="gallery/thumbs/electronics-wellcraft-garmin-upgrade.jpg" alt="Wellcraft helm upgraded with a Garmin multifunction display and a secondary engine data screen" loading="lazy">
+ <span class="shot-tag">Garmin MFD upgrade</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="electronics" data-full="gallery/electronics-garmin-displays-switch-panel.jpg">
+ <img class="shot-img" src="gallery/thumbs/electronics-garmin-displays-switch-panel.jpg" alt="Twin Garmin displays beside a labeled stainless switch panel and Suzuki trim controls" loading="lazy">
+ <span class="shot-tag">Labeled switch panel</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="electronics" data-full="gallery/electronics-garmin-yamaha-helm-rebuild.jpg">
+ <img class="shot-img" src="gallery/thumbs/electronics-garmin-yamaha-helm-rebuild.jpg" alt="Helm rebuild with a Garmin display, Yamaha binnacle controls, tachometer and new push-button panel" loading="lazy">
+ <span class="shot-tag">Full helm rebuild</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="electronics" data-full="gallery/electronics-gauge-cluster-switch-panel.jpg">
+ <img class="shot-img" src="gallery/thumbs/electronics-gauge-cluster-switch-panel.jpg" alt="Restored gauge cluster and lit switch panel on a center console dash" loading="lazy">
+ <span class="shot-tag">Gauge cluster refit</span>
+ </button>
+
+ <!-- Wiring & repair -->
+ <button class="shot" type="button" data-cat="wiring" data-full="gallery/wiring-rigging-board-bus-bars.jpg">
+ <img class="shot-img" src="gallery/thumbs/wiring-rigging-board-bus-bars.jpg" alt="Custom rigging board with dual fuse blocks, bus bars, NMEA 2000 drops and amplifiers" loading="lazy">
+ <span class="shot-tag">Custom rigging board</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="wiring" data-full="gallery/wiring-console-fuse-panel-nmea2000.jpg">
+ <img class="shot-img" src="gallery/thumbs/wiring-console-fuse-panel-nmea2000.jpg" alt="Console rewire with a labeled fuse block, ignition-protected breakers and an NMEA 2000 backbone" loading="lazy">
+ <span class="shot-tag">Console rewire</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="wiring" data-full="gallery/wiring-full-rewire-panel-amp.jpg">
+ <img class="shot-img" src="gallery/thumbs/wiring-full-rewire-panel-amp.jpg" alt="Complete rewire on a backing board with dual fuse blocks, labeled breakers, bus bars and an amplifier" loading="lazy">
+ <span class="shot-tag">Complete rewire</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="wiring" data-full="gallery/wiring-bench-built-fuse-block.jpg">
+ <img class="shot-img" src="gallery/thumbs/wiring-bench-built-fuse-block.jpg" alt="Bench-built distribution panel with a Blue Sea fuse block and every circuit individually labeled" loading="lazy">
+ <span class="shot-tag">Bench-built distribution</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="wiring" data-full="gallery/wiring-switch-panel-fusing.jpg">
+ <img class="shot-img" src="gallery/thumbs/wiring-switch-panel-fusing.jpg" alt="New helm switch panel with push-button switches, a USB charge port and proper circuit fusing" loading="lazy">
+ <span class="shot-tag">New switch panel</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="wiring" data-full="gallery/wiring-console-harness-cleanup.jpg">
+ <img class="shot-img" src="gallery/thumbs/wiring-console-harness-cleanup.jpg" alt="Console harness cleanup with a new fuse block, bus bars and loomed, secured cable runs" loading="lazy">
+ <span class="shot-tag">Harness cleanup</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="wiring" data-full="gallery/repair-bilge-pumps-seachest-battery.jpg">
+ <img class="shot-img" src="gallery/thumbs/repair-bilge-pumps-seachest-battery.jpg" alt="Bilge compartment with washdown pump, sea chest plumbing, battery switch and protected battery cabling" loading="lazy">
+ <span class="shot-tag">Pumps & sea chest</span>
+ </button>
+
+ <!-- Outboard -->
+ <button class="shot" type="button" data-cat="outboard" data-full="gallery/outboard-service-oil-change.jpg">
+ <img class="shot-img" src="gallery/thumbs/outboard-service-oil-change.jpg" alt="Outboard tilted up for a scheduled oil and filter service on a bay boat" loading="lazy">
+ <span class="shot-tag">Scheduled service</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="outboard" data-full="gallery/outboard-gearcase-lube-service.jpg">
+ <img class="shot-img" src="gallery/thumbs/outboard-gearcase-lube-service.jpg" alt="Lower unit gearcase lube drained into a pan and refilled during routine outboard maintenance" loading="lazy">
+ <span class="shot-tag">Gearcase service</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="outboard" data-full="gallery/outboard-powerhead-repair.jpg">
+ <img class="shot-img" src="gallery/thumbs/outboard-powerhead-repair.jpg" alt="Outboard with the cowling removed for powerhead diagnostics and repair" loading="lazy">
+ <span class="shot-tag">Powerhead diagnostics</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="outboard" data-full="gallery/outboard-yamaha-70-rigging.jpg">
+ <img class="shot-img" src="gallery/thumbs/outboard-yamaha-70-rigging.jpg" alt="Yamaha 70 outboard rigged on a tender with new controls, fuel line and battery box" loading="lazy">
+ <span class="shot-tag">Repower & rigging</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="outboard" data-full="gallery/outboard-starter-motor-replacement.jpg">
+ <img class="shot-img" src="gallery/thumbs/outboard-starter-motor-replacement.jpg" alt="New starter motor and flywheel exposed during an outboard starting-system repair" loading="lazy">
+ <span class="shot-tag">Starter replacement</span>
+ </button>
+
+ <!-- Detailing -->
+ <button class="shot" type="button" data-cat="detailing" data-full="gallery/detailing-seavee-hull-gloss.jpg">
+ <img class="shot-img" src="gallery/thumbs/detailing-seavee-hull-gloss.jpg" alt="SeaVee hull polished to a mirror gloss alongside a Miami dock" loading="lazy">
+ <span class="shot-tag">Hull cut & polish</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="detailing" data-full="gallery/detailing-sea-ray-hull-polish.jpg">
+ <img class="shot-img" src="gallery/thumbs/detailing-sea-ray-hull-polish.jpg" alt="Sea Ray blue hull compounded, polished and sealed on the hard" loading="lazy">
+ <span class="shot-tag">Compound & seal</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="detailing" data-full="gallery/detailing-motor-yacht-exterior.jpg">
+ <img class="shot-img" src="gallery/thumbs/detailing-motor-yacht-exterior.jpg" alt="Motor yacht topsides and stainless detailed and polished from the waterline up" loading="lazy">
+ <span class="shot-tag">Full exterior package</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="detailing" data-full="gallery/detailing-yacht-topsides-coating.jpg">
+ <img class="shot-img" src="gallery/thumbs/detailing-yacht-topsides-coating.jpg" alt="Dark yacht topsides after a full exterior detail and protective ceramic coating" loading="lazy">
+ <span class="shot-tag">Ceramic coating</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="detailing" data-full="gallery/detailing-console-gelcoat-gloss.jpg">
+ <img class="shot-img" src="gallery/thumbs/detailing-console-gelcoat-gloss.jpg" alt="Console and gunwale gelcoat restored to a deep even gloss" loading="lazy">
+ <span class="shot-tag">Gelcoat restoration</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="detailing" data-full="gallery/detailing-hull-side-waterline-gloss.jpg">
+ <img class="shot-img" src="gallery/thumbs/detailing-hull-side-waterline-gloss.jpg" alt="Hull side and waterline finished to a clean gloss at the dock" loading="lazy">
+ <span class="shot-tag">Waterline finish</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="detailing" data-full="gallery/detailing-yacht-hull-mirror-finish.jpg">
+ <img class="shot-img" src="gallery/thumbs/detailing-yacht-hull-mirror-finish.jpg" alt="Grey yacht hull polished to a mirror finish reflecting the teak deck" loading="lazy">
+ <span class="shot-tag">Mirror finish</span>
+ </button>
+
+ <!-- Audio & lighting -->
+ <button class="shot" type="button" data-cat="audio" data-full="gallery/lighting-night-helm-simrad-led.jpg">
+ <img class="shot-img" src="gallery/thumbs/lighting-night-helm-simrad-led.jpg" alt="Night helm with a Simrad chartplotter, Fusion stereo and green LED-lit speakers" loading="lazy">
+ <span class="shot-tag">LED helm lighting</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="audio" data-full="gallery/audio-boss-head-unit-switch-panel.jpg">
+ <img class="shot-img" src="gallery/thumbs/audio-boss-head-unit-switch-panel.jpg" alt="Marine-grade Boss Audio head unit mounted beside a lit stainless switch panel at the helm" loading="lazy">
+ <span class="shot-tag">Head unit install</span>
+ </button>
+
+ <button class="shot" type="button" data-cat="audio" data-full="gallery/audio-amplifier-fuse-block-install.jpg">
+ <img class="shot-img" src="gallery/thumbs/audio-amplifier-fuse-block-install.jpg" alt="Marine amplifier and fuse block mounted under the console with loomed, strain-relieved cabling" loading="lazy">
+ <span class="shot-tag">Amplifier & fusing</span>
+ </button>
+
+ </div>
+
+ <p class="gallery-empty" id="gallery-empty" hidden>No photos in that trade yet.</p>
+
+ <div class="gallery-more">
+ <button class="btn btn--ghost" type="button" id="gallery-toggle" aria-controls="shots">Show all 30 photos</button>
+ </div>
+ </section>
+
+ <!-- ══ SERVICE AREAS ══════════════════════════════════════════════════ -->
+ <section id="areas" class="section section--band">
+ <div class="section-head section-head--split" data-reveal>
+ <div>
+ <p class="eyebrow">Service Areas</p>
+ <h2 class="display">MIAMI-DADE<br>& BROWARD</h2>
+ </div>
+ <p class="lede">
+ We come to the boat. Home dock, dry storage, marina slip or driveway — most electronics,
+ wiring, outboard and detailing work happens where your boat already sits.
+ </p>
+ </div>
+
+ <div class="areas" data-reveal>
+ <div class="area">
+ <div class="area-name">Miami-Dade</div>
+ <div class="area-label">Primary Service County</div>
+ <p class="area-copy">
+ Based in Miami and working with boat owners, marinas and dockside projects throughout
+ Miami-Dade — from Haulover down through Coconut Grove, Key Biscayne and Homestead.
+ </p>
+ </div>
+ <div class="area">
+ <div class="area-name">Broward</div>
+ <div class="area-label">North Coverage Area</div>
+ <p class="area-copy">
+ Available across Broward County for installs, rewires, outboard service, repairs and
+ detailing — Fort Lauderdale, Dania, Hollywood, Pompano and the marinas in between.
+ </p>
+ </div>
+ </div>
+ </section>
+
+ <!-- ══ CONTACT ════════════════════════════════════════════════════════ -->
+ <section id="contact" class="contact">
+ <div data-reveal>
+ <p class="eyebrow">Get In Touch</p>
+ <h2 class="display">MESSAGE US<br>TODAY</h2>
+ <p class="lede">
+ Ready for a quote, or just want a straight answer about whether something is worth fixing?
+ Call, text or send the form. We reply to every message.
+ </p>
+
+ <div class="contact-info">
+ <div class="contact-row">
+ <svg class="contact-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+ <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.38C1.61 2.18 2.6 1 3.8 1h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 8.91a16 16 0 0 0 6.06 6.06l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
+ </svg>
+ <div>
+ <div class="contact-label">Phone / Text</div>
+ <a class="contact-value" href="tel:+17862780478">(786) 278-0478</a>
+ </div>
+ </div>
+
+ <div class="contact-row">
+ <svg class="contact-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+ <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>
+ </svg>
+ <div>
+ <div class="contact-label">Email</div>
+ <a class="contact-value" href="mailto:[email protected]">[email protected]</a>
+ </div>
+ </div>
+
+ <div class="contact-row">
+ <svg class="contact-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+ <path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
+ </svg>
+ <div>
+ <div class="contact-label">Service Area</div>
+ <span class="contact-value">Miami, FL — Miami-Dade & Broward</span>
+ </div>
+ </div>
+
+ <div class="social-row">
+ <a class="social-btn" href="https://instagram.com/frontlineboats" target="_blank" rel="noopener">
+ <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.9" viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
+ @FrontlineBoats
+ </a>
+ <a class="social-btn" href="https://www.facebook.com/frontlineboats/" target="_blank" rel="noopener">
+ <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
+ Facebook
+ </a>
+ <a class="social-btn" href="https://share.google/EpuaCoLlPrNN9mZjG" target="_blank" rel="noopener">
+ <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ 5.0 on Google
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <div data-reveal>
+ <!-- To deliver straight to an inbox, point action= at a form endpoint
+ (Formspree, Netlify Forms, etc.). Until then this opens the
+ visitor's mail app with the details prefilled. -->
+ <form class="quote-form" id="quote-form" novalidate>
+ <div>
+ <h2 class="form-title">Request a Quote</h2>
+ <p class="form-note">The more you tell us about the boat, the tighter the number.</p>
+ </div>
+
+ <div class="form-row">
+ <div class="form-field">
+ <label class="form-label" for="fname">First Name</label>
+ <input class="form-input" type="text" id="fname" name="fname" autocomplete="given-name" placeholder="John" required />
+ </div>
+ <div class="form-field">
+ <label class="form-label" for="lname">Last Name</label>
+ <input class="form-input" type="text" id="lname" name="lname" autocomplete="family-name" placeholder="Smith" required />
+ </div>
+ </div>
+
+ <div class="form-field">
+ <label class="form-label" for="email">Email</label>
+ <input class="form-input" type="email" id="email" name="email" autocomplete="email" placeholder="[email protected]" required />
+ </div>
+
+ <div class="form-field">
+ <label class="form-label" for="phone">Phone / Text</label>
+ <input class="form-input" type="tel" id="phone" name="phone" autocomplete="tel" placeholder="(305) 000-0000" required />
+ </div>
+
+ <div class="form-field">
+ <label class="form-label" for="service">Service Needed</label>
+ <select class="form-select" id="service" name="service" required>
+ <option value="" disabled selected>Select a service…</option>
+ <option>Marine Electronics</option>
+ <option>Outboard Services</option>
+ <option>Detailing & Coatings</option>
+ <option>Service & Repair</option>
+ <option>Wiring & Rewiring</option>
+ <option>Audio & Lighting</option>
+ <option>Something else / Not sure</option>
+ </select>
+ </div>
+
+ <div class="form-field">
+ <label class="form-label" for="message">Tell Us About Your Boat</label>
+ <textarea class="form-textarea" id="message" name="message" placeholder="Year, make, model, and what you're looking to have done…" required></textarea>
+ </div>
+
+ <button class="btn btn--primary form-submit" type="submit">Request a Free Quote</button>
+ <p class="form-fine">In a hurry? Call or text <a class="contact-value" href="tel:+17862780478">(786) 278-0478</a>.</p>
+
+ <div class="form-success" id="form-success" tabindex="-1">
+ <h3>Details Ready to Send</h3>
+ <p>
+ Your email app should have opened with everything filled in — hit send and we will get
+ back to you. If it did not open, call or text
+ <a href="tel:+17862780478">(786) 278-0478</a> or email
+ <a href="mailto:[email protected]">[email protected]</a>.
+ </p>
+ </div>
+ </form>
+ </div>
+ </section>
+
+ </main>
+
+ <!-- ══ FOOTER ═══════════════════════════════════════════════════════════ -->
+ <footer class="footer">
+ <div class="footer-grid">
+ <div>
+ <div class="footer-logo">
+ <img src="frontline-logo.png" alt="Frontline Boat Services" width="230" height="94">
+ </div>
+ <p class="footer-blurb">
+ First responder owned marine service out of Miami, FL. Electronics, outboards, wiring,
+ audio and lighting, detailing and repair across Miami-Dade and Broward.
+ </p>
+ <div class="footer-social">
+ <a class="footer-social-btn" href="https://instagram.com/frontlineboats" target="_blank" rel="noopener" aria-label="Instagram">
+ <svg width="19" height="19" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
+ </a>
+ <a class="footer-social-btn" href="https://www.facebook.com/frontlineboats/" target="_blank" rel="noopener" aria-label="Facebook">
+ <svg width="19" height="19" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
+ </a>
+ <a class="footer-social-btn" href="https://share.google/EpuaCoLlPrNN9mZjG" target="_blank" rel="noopener" aria-label="Google reviews">
+ <svg width="19" height="19" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>
+ </a>
+ </div>
+ </div>
+
+ <div>
+ <h2 class="footer-col-title">Services</h2>
+ <ul class="footer-list">
+ <li><a href="#services">Marine Electronics</a></li>
+ <li><a href="#services">Outboard Services</a></li>
+ <li><a href="#services">Detailing & Coatings</a></li>
+ <li><a href="#services">Service & Repair</a></li>
+ <li><a href="#services">Wiring & Rewiring</a></li>
+ <li><a href="#services">Audio & Lighting</a></li>
+ </ul>
+ </div>
+
+ <div>
+ <h2 class="footer-col-title">Contact</h2>
+ <ul class="footer-list">
+ <li><a href="tel:+17862780478">(786) 278-0478</a></li>
+ <li><a href="mailto:[email protected]">[email protected]</a></li>
+ <li><span>Miami, FL</span></li>
+ <li><a href="https://instagram.com/frontlineboats" target="_blank" rel="noopener">@FrontlineBoats</a></li>
+ <li><a href="https://share.google/EpuaCoLlPrNN9mZjG" target="_blank" rel="noopener">Google Reviews</a></li>
+ <li><a href="#contact">Request a Quote</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="footer-base">
+ <div class="footer-note">Miami, FL · First Responder Owned · NMEA Certified</div>
+ <div class="footer-note">© <span id="year">2026</span> Frontline Boat Services. All rights reserved.</div>
+ </div>
+ </footer>
+
+ <a class="sticky-call" href="tel:+17862780478" aria-hidden="true" tabindex="-1">
+ <span class="sticky-call-icon" aria-hidden="true">
+ <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+ <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.38C1.61 2.18 2.6 1 3.8 1h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 8.91a16 16 0 0 0 6.06 6.06l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
+ </svg>
+ </span>
+ <span class="sticky-call-copy">
+ <span class="sticky-call-label">Call or Text</span>
+ <span class="sticky-call-number">(786) 278-0478</span>
+ </span>
+ </a>
+
+ <!-- ══ LIGHTBOX ═════════════════════════════════════════════════════════ -->
+ <div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-hidden="true" aria-label="Project photo viewer">
+ <button class="lightbox-btn lightbox-close" type="button" aria-label="Close photo viewer">
+ <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
+ </button>
+ <button class="lightbox-btn lightbox-prev" type="button" aria-label="Previous photo">
+ <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 18 9 12l6-6"/></svg>
+ </button>
+ <button class="lightbox-btn lightbox-next" type="button" aria-label="Next photo">
+ <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
+ </button>
+ <figure class="lightbox-figure">
+ <img id="lightbox-img" src="" alt="">
+ <figcaption class="lightbox-caption">
+ <span class="lightbox-index" id="lightbox-index"></span>
+ <span class="lightbox-text" id="lightbox-text"></span>
+ </figcaption>
+ </figure>
+ </div>
+
+ <script type="application/ld+json">
+ {
+ "@context": "https://schema.org",
+ "@type": "AutoRepair",
+ "name": "Frontline Boat Services",
+ "description": "First responder owned marine service company in Miami, FL. Marine electronics, outboard service, wiring and rewiring, marine audio and lighting, detailing and coatings, and general boat repair.",
+ "telephone": "+1-786-278-0478",
+ "email": "[email protected]",
+ "image": "frontline-og_card.png",
+ "logo": "frontline-logo.png",
+ "address": { "@type": "PostalAddress", "addressLocality": "Miami", "addressRegion": "FL", "addressCountry": "US" },
+ "areaServed": [
+ { "@type": "AdministrativeArea", "name": "Miami-Dade County, FL" },
+ { "@type": "AdministrativeArea", "name": "Broward County, FL" }
+ ],
+ "sameAs": [
+ "https://instagram.com/frontlineboats",
+ "https://www.facebook.com/frontlineboats/",
+ "https://share.google/EpuaCoLlPrNN9mZjG"
+ ],
+ "hasOfferCatalog": {
+ "@type": "OfferCatalog",
+ "name": "Marine Services",
+ "itemListElement": [
+ { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Marine Electronics — installs, upgrades and custom systems" } },
+ { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Outboard Services — maintenance, repairs and diagnostics" } },
+ { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Detailing & Coatings — interior, exterior and full packages" } },
+ { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Service & Repair — wiring, lighting, pumps and sea chests" } },
+ { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Wiring & Rewiring — custom wiring and battery systems" } },
+ { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Audio & Lighting — marine audio, LED lighting and custom installs" } }
+ ]
+ }
+ }
+ </script>
+
+ <script>
+ (function () {
+ 'use strict';
+
+ var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+ /* ── Footer year ────────────────────────────────────────────────────── */
+ var yearEl = document.getElementById('year');
+ if (yearEl) { yearEl.textContent = new Date().getFullYear(); }
+
+ /* ── Nav ────────────────────────────────────────────────────────────── */
+ var nav = document.getElementById('site-nav');
+ var navToggle = nav.querySelector('.nav-toggle');
+ var navList = document.getElementById('primary-navigation');
+ var mobileNav = window.matchMedia('(max-width: 1240px)');
+ var hero = document.getElementById('hero');
+ var footer = document.querySelector('.footer');
+ var stickyCall = document.querySelector('.sticky-call');
+
+ var navTargets = Array.prototype.slice.call(nav.querySelectorAll('.nav-links a[href^="#"]'))
+ .map(function (link) { return { link: link, section: document.querySelector(link.getAttribute('href')) }; })
+ .filter(function (pair) { return pair.section; });
+
+ function syncNavA11y() {
+ navList.setAttribute('aria-hidden', String(mobileNav.matches && !nav.classList.contains('is-open')));
+ }
+
+ function setMobileNav(open) {
+ nav.classList.toggle('is-open', open);
+ navToggle.setAttribute('aria-expanded', String(open));
+ navToggle.setAttribute('aria-label', open ? 'Close navigation' : 'Open navigation');
+ syncNavA11y();
+ }
+
+ function setActiveLink(id) {
+ navTargets.forEach(function (pair) {
+ var active = pair.section.id === id;
+ pair.link.classList.toggle('is-active', active);
+ if (active) { pair.link.setAttribute('aria-current', 'location'); }
+ else { pair.link.removeAttribute('aria-current'); }
+ });
+ }
+
+ function updateStickyCall() {
+ var pastHero = hero.getBoundingClientRect().bottom <= 0;
+ var footerVisible = footer.getBoundingClientRect().top < window.innerHeight;
+ var show = pastHero && !footerVisible;
+ stickyCall.classList.toggle('is-visible', show);
+ stickyCall.setAttribute('aria-hidden', String(!show));
+ stickyCall.tabIndex = show ? 0 : -1;
+ }
+
+ function onScroll() {
+ var offset = nav.offsetHeight + 24;
+ var atEnd = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 2;
+ var active = '';
+
+ navTargets.forEach(function (pair) {
+ if (pair.section.getBoundingClientRect().top <= offset) { active = pair.section.id; }
+ });
+
+ if (atEnd && navTargets.length) { active = navTargets[navTargets.length - 1].section.id; }
+
+ setActiveLink(active);
+ nav.classList.toggle('is-scrolled', window.scrollY > 40);
+ updateStickyCall();
+ }
+
+ navToggle.addEventListener('click', function () {
+ setMobileNav(!nav.classList.contains('is-open'));
+ });
+
+ nav.querySelectorAll('.nav-links a, .nav-cta').forEach(function (link) {
+ link.addEventListener('click', function () {
+ var href = link.getAttribute('href') || '';
+ if (href.charAt(0) === '#') { setActiveLink(href.slice(1)); }
+ setMobileNav(false);
+ });
+ });
+
+ window.addEventListener('scroll', onScroll, { passive: true });
+ window.addEventListener('resize', function () { onScroll(); syncNavA11y(); });
+ window.addEventListener('load', onScroll);
+ onScroll();
+ syncNavA11y();
+
+ /* ── Scroll reveal ──────────────────────────────────────────────────── */
+ var revealTargets = document.querySelectorAll('[data-reveal]');
+
+ if (reduceMotion || !('IntersectionObserver' in window)) {
+ revealTargets.forEach(function (el) { el.classList.add('is-inview'); });
+ } else {
+ var revealObserver = new IntersectionObserver(function (entries) {
+ entries.forEach(function (entry) {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('is-inview');
+ revealObserver.unobserve(entry.target);
+ }
+ });
+ }, { rootMargin: '0px 0px -8% 0px', threshold: 0.05 });
+
+ revealTargets.forEach(function (el) { revealObserver.observe(el); });
+ }
+
+ /* ── Gallery: filter + show more ────────────────────────────────────── */
+ var shotsGrid = document.getElementById('shots');
+ var shots = Array.prototype.slice.call(shotsGrid.querySelectorAll('.shot'));
+ var filterButtons = Array.prototype.slice.call(document.querySelectorAll('.filter'));
+ var galleryToggle = document.getElementById('gallery-toggle');
+ var galleryEmpty = document.getElementById('gallery-empty');
+ var INITIAL_SHOWN = 12;
+
+ var currentFilter = 'all';
+ var expanded = false;
+ var visibleShots = [];
+
+ function renderGallery() {
+ var matching = shots.filter(function (shot) {
+ return currentFilter === 'all' || shot.dataset.cat === currentFilter;
+ });
+
+ var limit = expanded ? matching.length : Math.min(INITIAL_SHOWN, matching.length);
+ visibleShots = matching.slice(0, limit);
+
+ shots.forEach(function (shot) {
+ shot.hidden = visibleShots.indexOf(shot) === -1;
+ });
+
+ visibleShots.forEach(function (shot, i) {
+ shot.setAttribute('aria-label', 'View photo ' + (i + 1) + ' of ' + visibleShots.length +
+ ': ' + shot.querySelector('.shot-img').alt);
+ });
+
+ galleryEmpty.hidden = matching.length > 0;
+
+ if (matching.length > INITIAL_SHOWN) {
+ galleryToggle.hidden = false;
+ galleryToggle.textContent = expanded
+ ? 'Show fewer photos'
+ : 'Show all ' + matching.length + ' photos';
+ } else {
+ galleryToggle.hidden = true;
+ }
+ }
+
+ filterButtons.forEach(function (button) {
+ button.addEventListener('click', function () {
+ currentFilter = button.dataset.filter;
+ expanded = false;
+ filterButtons.forEach(function (other) {
+ other.setAttribute('aria-pressed', String(other === button));
+ });
+ renderGallery();
+ });
+ });
+
+ galleryToggle.addEventListener('click', function () {
+ expanded = !expanded;
+ renderGallery();
+ if (!expanded) {
+ shotsGrid.scrollIntoView({ behavior: reduceMotion ? 'auto' : 'smooth', block: 'start' });
+ }
+ });
+
+ renderGallery();
+
+ /* ── Lightbox ───────────────────────────────────────────────────────── */
+ var lightbox = document.getElementById('lightbox');
+ var lightboxImg = document.getElementById('lightbox-img');
+ var lightboxIndex = document.getElementById('lightbox-index');
+ var lightboxText = document.getElementById('lightbox-text');
+ var closeBtn = lightbox.querySelector('.lightbox-close');
+ var prevBtn = lightbox.querySelector('.lightbox-prev');
+ var nextBtn = lightbox.querySelector('.lightbox-next');
+ var lastFocused = null;
+ var activeIndex = 0;
+
+ function showPhoto(index) {
+ if (!visibleShots.length) { return; }
+ activeIndex = (index + visibleShots.length) % visibleShots.length;
+
+ var shot = visibleShots[activeIndex];
+ var thumb = shot.querySelector('.shot-img');
+
+ lightboxImg.src = shot.dataset.full;
+ lightboxImg.alt = thumb.alt;
+ lightboxIndex.textContent = (activeIndex + 1) + ' / ' + visibleShots.length;
+ lightboxText.textContent = thumb.alt;
+
+ var multiple = visibleShots.length > 1;
+ prevBtn.hidden = !multiple;
+ nextBtn.hidden = !multiple;
+ }
+
+ function openLightbox(index) {
+ lastFocused = document.activeElement;
+ showPhoto(index);
+ lightbox.classList.add('is-open');
+ lightbox.setAttribute('aria-hidden', 'false');
+ document.body.classList.add('is-locked');
+ closeBtn.focus();
+ }
+
+ function closeLightbox() {
+ lightbox.classList.remove('is-open');
+ lightbox.setAttribute('aria-hidden', 'true');
+ document.body.classList.remove('is-locked');
+ lightboxImg.removeAttribute('src');
+ lightboxImg.alt = '';
+ if (lastFocused) { lastFocused.focus(); }
+ }
+
+ shots.forEach(function (shot) {
+ shot.addEventListener('click', function () {
+ var index = visibleShots.indexOf(shot);
+ if (index !== -1) { openLightbox(index); }
+ });
+ });
+
+ closeBtn.addEventListener('click', closeLightbox);
+ prevBtn.addEventListener('click', function () { showPhoto(activeIndex - 1); });
+ nextBtn.addEventListener('click', function () { showPhoto(activeIndex + 1); });
+
+ lightbox.addEventListener('click', function (event) {
+ if (event.target === lightbox || event.target.classList.contains('lightbox-figure')) {
+ closeLightbox();
+ }
+ });
+
+ document.addEventListener('keydown', function (event) {
+ if (lightbox.classList.contains('is-open')) {
+ if (event.key === 'Escape') { closeLightbox(); }
+ if (event.key === 'ArrowLeft') { showPhoto(activeIndex - 1); }
+ if (event.key === 'ArrowRight') { showPhoto(activeIndex + 1); }
+ return;
+ }
+
+ if (event.key === 'Escape' && nav.classList.contains('is-open')) {
+ setMobileNav(false);
+ navToggle.focus();
+ }
+ });
+
+ /* ── Quote form ─────────────────────────────────────────────────────── */
+ var form = document.getElementById('quote-form');
+ var formSuccess = document.getElementById('form-success');
+
+ form.addEventListener('submit', function (event) {
+ event.preventDefault();
+
+ if (!form.checkValidity()) {
+ form.reportValidity();
+ return;
+ }
+
+ var value = function (id) { return document.getElementById(id).value.trim(); };
+ var name = (value('fname') + ' ' + value('lname')).trim();
+
+ var body = [
+ 'Name: ' + name,
+ 'Email: ' + value('email'),
+ 'Phone: ' + value('phone'),
+ 'Service needed: ' + value('service'),
+ '',
+ 'About the boat:',
+ value('message')
+ ].join('\n');
+
+ window.location.href = 'mailto:[email protected]' +
+ '?subject=' + encodeURIComponent('Quote request — ' + value('service') + ' — ' + name) +
+ '&body=' + encodeURIComponent(body);
+
+ form.classList.add('is-sent');
+ formSuccess.focus();
+ });
+ })();
+ </script>
+</body>
+</html>