/* Mandurah Antifoul, built by Sprout and Spark Digital
   Look: black header, ocean teal bands, antifoul red for actions,
   bold italic condensed headings, big photo-led sections (inspired by Aquasports Marine). */
:root {
  --black:#0e1113;
  --charcoal:#14191c;
  --teal:#1b2125;
  --teal-dark:#13181b;
  --red:#1e63b5;        /* antifoul red: buttons and highlight boxes only */
  --red-dark:#184f91;
  --teal-light:#8dbcf0; /* light accent used on dark backgrounds */
  --sand: #f4f6f6;
  --white: #ffffff;
  --ink: #15191c;
  --muted: #4e5a60;
  --line: #d8dfe1;
  --on-dark-muted: #b9c4c8;
  --font-head: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Barlow", "Segoe UI", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: var(--teal); }
[hidden] { display: none !important; }
.container { max-width: 1160px; margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
h1, h2, h3, h4 { font-family: var(--font-head); font-style: italic; font-weight: 800; line-height: 1.02; margin: 0; text-transform: uppercase; letter-spacing: 0.005em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
h3 { font-size: 1.6rem; }
h4, .h4 { font-size: 1.25rem; }
.h3 { font-size: 1.6rem; }
p { margin: 0; }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 62ch; }
.eyebrow { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }

/* Top bar */
.topbar { background: var(--black); color: var(--white); font-size: 0.92rem; border-bottom: 1px solid #222a2e; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 10px 20px; flex-wrap: wrap; padding-block: 8px; }
.topbar a { color: var(--white); text-decoration: none; }
.topbar .contacts a { display: inline-flex; align-items: center; min-height: 28px; }
.topbar .contacts { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.topbar .contacts .tb-label { color: var(--on-dark-muted); margin-right: 6px; font-family: var(--font-head); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8rem; }
/* Phones (D24a): one slim row of three short items, Call, Email, Free quote. Full number and email stay in aria-label. */
@media (max-width: 700px) {
  .topbar .container { flex-wrap: nowrap; gap: 6px; padding-block: 2px; }
  .topbar .contacts { flex-wrap: nowrap; gap: 4px; margin-left: -10px; }
  .topbar .tb-full { display: none; }
  .topbar .contacts a { min-height: 44px; padding-inline: 10px; }
  .topbar .contacts .tb-label { margin-right: 0; color: var(--white); font-size: 1rem; }
  .topbar .btn-sm { min-height: 44px; padding: 4px 14px; white-space: nowrap; }
}

/* Header + nav */
.site-header { background: var(--black); position: sticky; top: 0; z-index: 20; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.brand img { height: 56px; width: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { display: block; color: var(--white); text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 8px 11px; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--red); }
.nav-toggle { display: none; background: none; border: 2px solid #3a454a; color: var(--white); font: 700 1rem var(--font-head); text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 12px; border-radius: 4px; cursor: pointer; }
.teal-band { height: 8px; background: var(--teal); }
@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--black); border-top: 1px solid #222a2e; display: none; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; padding: 8px max(18px, env(safe-area-inset-left, 0px)) 16px; }
  .brand img { height: 46px; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-head); font-style: italic; font-weight: 800; font-size: 1.2rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; padding: 12px 24px; border-radius: 3px; border: 2px solid transparent; cursor: pointer; }
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-dark); }
.btn-ghost { background: transparent; color: var(--white); border-color: var(--white); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); }
.btn-dark { background: var(--black); color: var(--white); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-sm { font-size: 1rem; padding: 7px 14px; }

/* Placeholder photos */
.ph { position: relative; margin: 0; background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 55%, var(--teal-light) 100%); color: var(--white); display: flex; align-items: flex-end; overflow: hidden; min-height: 220px; border-radius: 4px; }
.ph::before { content: ""; position: absolute; inset: 0; background: url("img/marlin-white.png") no-repeat right -30px center / auto 85%; opacity: 0.09; }
.ph .ph-label { position: relative; margin: 14px; background: rgba(14,17,19,0.78); padding: 6px 10px; border-radius: 3px; font-size: 0.85rem; font-weight: 600; }
.ph.tall { min-height: 360px; }
.ph.alt { background: linear-gradient(135deg, #1b2125 0%, #2f4247 60%, #5b7277 100%); }
.ph.sun { background: linear-gradient(160deg, #0c6f78 0%, #3e8f8f 50%, #c9b98c 100%); }

/* Hero */
.hero { position: relative; color: var(--white); min-height: 560px; display: flex; align-items: flex-end; }
.hero .ph { position: absolute; inset: 0; border-radius: 0; min-height: 0; align-items: flex-start; justify-content: flex-end; }
.hero .ph .ph-label { margin: 18px; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,17,19,0.85) 0%, rgba(14,17,19,0.25) 60%, rgba(14,17,19,0.1) 100%); }
.hero .container { position: relative; z-index: 1; padding-block: 104px 64px; display: flex; flex-direction: column; gap: 18px; width: 100%; }
.hero h1 .box { display: inline-block; background: var(--teal); color: var(--white); padding: 4px 16px 6px; }
.hero h1 .box.red { background: var(--red); }
.hero p { font-size: 1.25rem; max-width: 46ch; }
.price-tag { display: inline-flex; gap: 10px; align-items: baseline; background: var(--white); color: var(--black); padding: 8px 14px; font-family: var(--font-head); font-weight: 800; font-style: italic; text-transform: uppercase; width: fit-content; }
.price-tag strong { color: var(--red); font-size: 1.6rem; }

/* Sections */
.section { padding-block: 72px; }
.section.tight { padding-block: 48px; }
.section.sand { background: var(--sand); }
.section.dark { background: var(--black); color: var(--white); }
.section.teal { background: var(--teal); color: var(--white); }
.section.dark .lede, .section.teal .lede { color: #d7e4e6; }
.section.dark .eyebrow, .section.teal .eyebrow { color: var(--teal-light); }
.section-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 36px; align-items: center; }
.grid-2 > * { min-width: 0; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.card .ph { border-radius: 0; min-height: 180px; }
.card-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-body p { color: var(--muted); }
.card-body .more { margin-top: auto; font-family: var(--font-head); font-weight: 800; font-style: italic; text-transform: uppercase; text-decoration: none; color: var(--red); letter-spacing: 0.04em; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ticks li { padding-left: 28px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 12px; height: 7px; border-left: 3px solid var(--red); border-bottom: 3px solid var(--red); transform: rotate(-45deg); }
.section.dark .ticks li::before, .section.teal .ticks li::before { border-color: #ffffff; }

/* Steps (real sequence) */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps li { background: var(--charcoal); border-top: 5px solid var(--red); padding: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; counter-increment: step; }
/* Number on the left and icon on the right share the first row, both 2.6rem tall; heading and text sit full width below. */
.steps li::before { content: counter(step); order: 0; font-family: var(--font-head); font-style: italic; font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--teal-light); }
.steps li > :not(.step-icon) { order: 2; flex: 0 0 100%; }
.steps p { color: var(--on-dark-muted); }
.step-icon { order: 1; display: block; font-size: 2.6rem; width: 1em; height: 1em; flex: 0 0 auto; color: var(--teal-light); }
.step-icon svg { width: 100%; height: 100%; display: block; stroke-width: 1.3; }

/* Pricing strip */
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border: 2px solid var(--black); }
.prices > div { padding: 22px; display: flex; flex-direction: column; gap: 4px; border-right: 2px solid var(--black); }
.prices > div:last-child { border-right: 0; }
.prices .amt { font-family: var(--font-head); font-style: italic; font-weight: 800; font-size: 2.4rem; color: var(--red); line-height: 1; font-variant-numeric: tabular-nums; }
.prices .lbl { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.prices small { color: var(--muted); }
@media (max-width: 720px) { .prices > div { border-right: 0; border-bottom: 2px solid var(--black); } .prices > div:last-child { border-bottom: 0; } }

/* Reviews: real Google reviews, quoted word for word. No stars, counts or dates (we were not given a rating, and dates go stale).
   CSS columns let long and short reviews sit together without big gaps; one column on phones. */
.reviews { columns: 3 280px; column-gap: 22px; }
.review { break-inside: avoid; margin: 0 0 22px; background: var(--white); color: var(--ink); padding: 24px 24px 22px; border-radius: 4px; box-shadow: 0 1px 3px rgba(14,17,19,0.08); display: flex; flex-direction: column; gap: 14px; }
.review blockquote { margin: 0; position: relative; padding-top: 30px; }
.review blockquote::before { content: "\201C"; position: absolute; top: -8px; left: -2px; font-family: var(--font-head); font-size: 3.6rem; line-height: 1; color: var(--red); }
.review blockquote p { margin: 0; font-size: 1.05rem; overflow-wrap: break-word; }
.review figcaption { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.reviews-more { margin: 14px 0 0; font-weight: 700; }
.reviews-more a { display: inline-block; padding: 8px 0; color: var(--red-dark); }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.faq summary { cursor: pointer; padding: 16px 18px; font-weight: 700; font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--red); }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 18px 18px; color: var(--muted); display: flex; flex-direction: column; gap: 10px; max-width: 72ch; }
.faq .answer ul { margin: 0; padding-left: 1.2em; }
.faq-group { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; }
.note { font-size: 0.92rem; color: var(--muted); }

/* CTA band */
.cta-band { background: var(--red); color: var(--white); }
.cta-band .container { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-block: 40px; }
.cta-band h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* Page header */
.page-head { background: var(--black); color: var(--white); position: relative; overflow: hidden; }
.page-head::before { content: ""; position: absolute; right: -40px; top: 50%; width: 360px; height: 360px; transform: translateY(-50%); background: url("img/marlin-white.png") no-repeat center / contain; opacity: 0.07; }
.page-head .container { position: relative; padding-block: 56px; display: flex; flex-direction: column; gap: 12px; }
.page-head p { color: var(--on-dark-muted); font-size: 1.15rem; max-width: 60ch; }

/* Service detail */
.service { padding-block: 56px; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.service:last-child { border-bottom: 0; }
.process { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.process > div { border: 2px solid var(--black); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.process ol { margin: 0; padding-left: 1.2em; }

/* Marketplace */
.listing .badge { position: absolute; top: 12px; left: 12px; background: #f2b705; color: #1b1b1b; font-weight: 700; font-size: 0.75rem; padding: 3px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.05em; }
.listing .price { font-family: var(--font-head); font-style: italic; font-weight: 800; font-size: 1.8rem; color: var(--red); }
.specs { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 0.95rem; color: var(--muted); margin: 0; }
.specs dt { font-weight: 600; color: var(--ink); }
.specs dd { margin: 0; }
.listing .card-body .btn { margin-top: auto; align-self: flex-start; }

/* Forms */
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.form .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-weight: 600; }
.field input, .field select, .field textarea { font: 400 1rem var(--font-body); padding: 11px 12px; border: 1px solid #b8c3c6; border-radius: 3px; background: var(--white); color: var(--ink); width: 100%; }
.field textarea { min-height: 120px; resize: vertical; }
.field small { color: var(--muted); }
.len-row { display: flex; gap: 8px; }
.len-row input { flex: 1 1 auto; min-width: 0; }
.field .len-row select { width: auto; flex: 0 0 auto; }
.field-msg { margin: 0; color: #a4161a; font-weight: 600; }
.field-msg:empty { display: none; }
.req { font-weight: 400; color: var(--muted); font-size: 0.9em; }
.form-note { margin: 0; color: var(--muted); }
.field [aria-invalid="true"] { border-color: #a4161a; box-shadow: 0 0 0 1px #a4161a; }
.form-msg { background: #e6f3ef; border-left: 5px solid var(--teal); padding: 14px 16px; }
.form-msg-error { background: #fdecec; border-left-color: #c62828; }
/* Spam trap: hidden from people, bots fill it in */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.info-list { display: flex; flex-direction: column; gap: 18px; }
.info-list .h4 { margin-bottom: 4px; }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours td { padding: 5px 0; border-bottom: 1px solid var(--line); }
.hours td:last-child { text-align: right; }

/* Prose */
.prose { max-width: 72ch; display: flex; flex-direction: column; gap: 14px; }
.prose h2 { font-size: 1.9rem; margin-top: 18px; }
.prose ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }

/* Footer */
.site-footer { background: var(--charcoal); color: var(--on-dark-muted); font-size: 0.95rem; }
.site-footer .container { padding-block: 48px 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.site-footer .h4 { color: var(--white); margin-bottom: 10px; }
.site-footer a { color: var(--white); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.site-footer .footer-logo { height: 48px; width: auto; margin-bottom: 12px; }
.social-link { display: inline-flex; align-items: center; gap: 6px; }
.social-icon { flex-shrink: 0; }
.footer-base { border-top: 1px solid #2c363b; }
.footer-base .container { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-block: 16px; grid-template-columns: none; font-size: 0.85rem; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Photos */
.ph.photo { background: var(--charcoal); }
.ph.photo::before { display: none; }
.ph.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph.photo .ph-label { font-size: 0.72rem; font-weight: 600; opacity: 0.85; }
.hero .ph.photo .ph-label { margin: 18px; }
.hero .ph.photo img { object-position: 75% center; }
.hero::after { background: linear-gradient(90deg, rgba(14,17,19,0.82) 0%, rgba(14,17,19,0.45) 45%, rgba(14,17,19,0.05) 75%), linear-gradient(0deg, rgba(14,17,19,0.6) 0%, rgba(14,17,19,0) 50%); }

/* Hero video */
.hero-media { position: absolute; inset: 0; margin: 0; overflow: hidden; background: #0e1113; }
.hero-video { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; display: block; }
.hero-media .ph-label { position: absolute; top: 18px; right: 18px; margin: 0; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } .hero-media { background: url(media/hero-poster.jpg) 60% center / cover; } }
/* Hero video pause/play button (D26 option a): small round icon button, top right of the video, every screen size.
   To swap or remove it, change only this block and the <button class="hero-pause"> in index.html. */
.hero-pause { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(14,17,19,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.6); cursor: pointer; }
.hero-pause:hover, .hero-pause:focus-visible { background: #fff; color: #0e1113; }
.hero-pause-icon { display: block; fill: currentColor; }
.hero-pause .i-play, .hero-pause[data-state="paused"] .i-pause { display: none; }
.hero-pause[data-state="paused"] .i-play { display: inline; }
@media (prefers-reduced-motion: reduce) { .hero-pause { display: none; } }
/* D26 option b: phones play the short clip once and stop on its last frame, so there is no pause button there. */
@media (max-width: 700px) { .hero-pause { display: none; } }
.hero-media .ph-label { background: rgba(14,17,19,0.78); color: #fff; padding: 6px 10px; font: 600 0.75rem Inter, sans-serif; border-radius: 3px; }
.hero::after { background: linear-gradient(90deg, rgba(14,17,19,0.85) 0%, rgba(14,17,19,0.5) 45%, rgba(14,17,19,0.1) 78%), linear-gradient(180deg, rgba(14,17,19,0.55) 0%, rgba(14,17,19,0) 40%), linear-gradient(0deg, rgba(14,17,19,0.6) 0%, rgba(14,17,19,0) 50%); }
.hero .eyebrow { text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
@media (max-width: 700px) { .hero::after { background: linear-gradient(180deg, rgba(14,17,19,0.7) 0%, rgba(14,17,19,0.55) 50%, rgba(14,17,19,0.75) 100%); } }
.hero-media .ph-label { opacity: 1; }
.hero h1 .box.sub { font-size: 0.42em; margin-top: 8px; padding: 6px 14px 7px; background: var(--charcoal); letter-spacing: 0.04em; }

/* Services grid, 4 across on wide screens */
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }

.footer-map{display:block;width:100%;height:160px;border:0;border-radius:8px;margin-top:10px}

.map-preview{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:16px;text-decoration:none;color:#fff;background:linear-gradient(135deg,var(--charcoal),var(--teal-dark));border:1px solid rgba(255,255,255,.2)}
.map-preview strong{font-size:1rem}
.map-preview small{font-size:.8rem;line-height:1.35;opacity:.85}
.map-preview .map-pin{color:var(--teal-light);font-size:1.4rem;line-height:1}
.map-preview:hover strong{text-decoration:underline}

/* Rotating photo gallery (Chris's own photos) */
.gallery { position: relative; background: var(--charcoal); border-radius: 6px; overflow: hidden; }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; aspect-ratio: 4 / 3; background: var(--black); }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(14,17,19,0.7); color: var(--white); font-size: 1.4rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gallery-btn:hover, .gallery-btn:focus-visible { background: var(--red); }
.gallery-prev { left: 12px; } .gallery-next { right: 12px; }
.gallery-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.gallery-dot { position: relative; flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.gallery-dot::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid var(--white); }
.gallery-dot[aria-current="true"]::before { background: var(--white); }
.gallery-wrap { max-width: 880px; margin: 0 auto; }
@media (min-width: 900px) { .gallery-slide { aspect-ratio: 16 / 9; } }

/* Hero framing: keeps the boat in view at every screen shape.
   Wide screens crop top and bottom, so favour the lower part where the boat runs.
   Tall screens (phones) crop the sides, so centre on the boat's path (54% to 66% across). */
.hero-video { object-position: 64% 85%; }
@media (prefers-reduced-motion: reduce) { .hero-media { background-position: 64% 85%; } }

/* Phones (D25a): the video fills most of the screen height. The eyebrow and the three headline blocks sit at the TOP
   of the video, over the sky and bridge, so the boat in the lower part of the clip stays clear; the estimator button
   sits alone at the bottom of the video. The sentence, the quote button and the price note follow below the video.
   The eyebrow chip is solid, the same colour as the black headline block, so the four read as one stack with the same
   6px gap between each. Phone block colours: blue, black, blue (white text).
   The page order is unchanged: .container and .btn-row step aside (display: contents) so each line can be placed in
   the grid. Row 1 is the eyebrow, row 2 the headline, row 3 the clear part of the video, row 4 the estimator button.
   The fade belongs to the video box itself (.hero-media::after, inset 0, above the video), so it always matches the
   video whatever the browser does with svh or grid sizing (more robust on iOS Safari than a grid-placed layer).
   The fade is light on purpose: every overlay line has a solid background, and the boat should stay visible. */
@media (max-width: 700px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto auto auto; min-height: 0; background: var(--black); }
  .hero::after { display: none; }
  .hero-media { grid-area: 1 / 1 / 5 / 2; position: relative; inset: auto; width: 100%; height: 80vh; height: 80svh; min-height: 400px; isolation: isolate; }
  .hero-video { position: relative; z-index: 0; object-position: 45% 80%; }
  .hero-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; transform: translateZ(0);
    background: linear-gradient(0deg, rgba(14,17,19,0.45) 0, rgba(14,17,19,0.15) 90px, rgba(14,17,19,0) 160px); }
  .hero .container, .hero .btn-row { display: contents; }
  .hero .container > *, .hero .btn-row > * { grid-column: 1; position: relative; z-index: 2; justify-self: start; margin-inline: max(18px, env(safe-area-inset-left, 0px)) max(18px, env(safe-area-inset-right, 0px)); }
  .hero .eyebrow { grid-row: 1; margin-top: 18px; max-width: calc(100% - 36px); padding: 4px 9px; line-height: 1.5; background: var(--teal); text-shadow: none; }
  .hero h1 { grid-row: 2; margin-top: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: clamp(2.1rem, 10.5vw, 2.6rem); }
  .hero h1 br { display: none; }
  .hero h1 .box { background: var(--red); }
  .hero h1 .box.red { background: var(--teal); }
  .hero h1 .box.sub { margin-top: 0; background: var(--red); }
  .hero .hero-est { grid-row: 4; margin-top: 18px; margin-bottom: 22px; }
  .hero p { grid-row: 5; margin-top: 24px; font-size: 1.15rem; }
  .hero .hero-quote { grid-row: 6; margin-top: 18px; }
  /* block box with room for the italic overhang, so the last letter of each line is never clipped at the edge */
  .hero .price-tag { grid-row: 7; display: block; margin-top: 18px; margin-bottom: 40px; padding: 10px 18px 10px 14px; line-height: 1.35; max-width: calc(100% - 36px); }
}
/* Short phones (568 to 700px tall, e.g. 320 x 568 and 360 x 640): the video is shorter, so the boat in the end frame sits
   within about 80px of the bottom. A slimmer estimator button (still a 44px+ tap target) closer to the edge keeps it clear. */
@media (max-width: 700px) and (max-height: 700px) {
  .hero .hero-est { padding-block: 8px; line-height: 1.3; margin-bottom: 14px; }
}
/* Phones with reduced motion: no video, just the still the phone clip ends on */
@media (max-width: 700px) and (prefers-reduced-motion: reduce) { .hero-media { background: url(media/hero-mobile-end.jpg) 45% 80% / cover; } }

/* Antifoul price estimator */
.estimator { background: var(--white); border: 2px solid var(--black); padding: 28px; display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.estimator .form { margin: 0; }
.estimator .check-row { flex-direction: row; align-items: center; gap: 10px; }
.estimator .check-row input { width: auto; }
.estimate-empty { color: var(--muted); font-size: 0.95rem; }
.estimate-box { background: var(--sand); border-left: 5px solid var(--red); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.estimate-box .lbl { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; color: var(--muted); }
.estimate-box .amt { font-family: var(--font-head); font-style: italic; font-weight: 800; font-size: 2.2rem; color: var(--red); line-height: 1.1; font-variant-numeric: tabular-nums; }
.estimate-box small { color: var(--muted); }

/* Services dropdown menu */
.nav .has-sub { position: relative; }
.nav .has-sub > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.nav .nav-sub { display: none; position: absolute; top: 100%; left: 0; z-index: 30; min-width: 260px; flex-direction: column; flex-wrap: nowrap; gap: 0; margin: 0; padding: 6px 0; background: var(--black); border-top: 3px solid var(--red); box-shadow: 0 12px 28px rgba(0,0,0,0.45); }
.nav .has-sub:hover > .nav-sub, .nav .has-sub:focus-within > .nav-sub { display: flex; }
.nav .nav-sub a { padding: 10px 18px; font-size: 1rem; white-space: nowrap; border-bottom: 0; }
.nav .nav-sub a:hover, .nav .nav-sub a[aria-current="page"] { background: #1c2327; color: var(--teal-light); }
@media (max-width: 960px) {
  .nav .has-sub > a::after { display: none; }
  .nav .nav-sub { display: block; position: static; min-width: 0; padding: 0 0 6px 14px; background: transparent; border-top: 0; box-shadow: none; }
  .nav .nav-sub a { padding: 6px 11px; font-size: 0.95rem; color: var(--on-dark-muted); }
}

/* Skip link, and links big enough to tap (at least 24 px high) */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--black); color: var(--white); padding: 10px 16px; font-weight: 700; }
.skip-link:focus { left: 12px; top: 12px; outline: 3px solid var(--teal-light); }
.site-footer a, .footer-base a, .breadcrumb a, .info-list a { display: inline-block; min-height: 24px; line-height: 24px; }
.site-footer .footer-map, .site-footer .social-link, .site-footer .fb-link { min-height: 24px; }

/* Phones (D24a): sticky Call / Free quote bar. main.js adds .is-visible once the hero (or page heading) has scrolled
   away, and takes it off while the quote form is on screen. Hidden (not just moved) when off, so it cannot be tabbed to. */
.mobile-cta { display: none; }
@media (max-width: 700px) {
  .mobile-cta { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
    background: var(--black); border-top: 1px solid #2c363b; box-shadow: 0 -6px 18px rgba(0,0,0,0.35);
    transform: translateY(100%); visibility: hidden; transition: transform 0.25s ease, visibility 0s linear 0.25s; }
  .mobile-cta.is-visible { transform: none; visibility: visible; transition: transform 0.25s ease, visibility 0s linear 0s; }
  .mobile-cta .btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 8px 6px; font-size: 1.05rem; letter-spacing: 0.02em; white-space: nowrap; }
  /* room under the footer so the bar never covers the last lines */
  .site-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) { .mobile-cta, .mobile-cta.is-visible { transition: none; } }

/* Used Boats (server-built pages) */
.listing-media { position: relative; }
.listing .badge.sold { background: var(--black); color: var(--white); }
.listing-desc { font-size: 0.95rem; white-space: pre-line; }
.sold-flag { display: inline-block; align-self: flex-start; background: var(--black); color: var(--white); font: 700 0.9rem var(--font-head); text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 12px; border-radius: 3px; }
.breadcrumb { margin-bottom: 8px; font-size: 0.9rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: 0.6; }
.breadcrumb a { color: var(--teal-light); }

/* ==========================================================================
   Used Boats marketplace (decision D27a, 09/11/2026): list page cards, filter bar, photo carousels,
   listing page layout and enquiry panel. Built by inc/render.php, driven by used-boats.js.
   Kept in this one block at the end so it is easy to find and merge. Everything here starts with .ub-
   (plus .visually-hidden). Without JavaScript the filter bar stays hidden and photo strips scroll sideways.
   ========================================================================== */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* List page: filters (Ash's card notes, 09/11/2026: rounded, a "Filters" sidebar on wide screens, a button on phones).
   used-boats.js adds .has-filters to .ub-browse when it shows them, so without JavaScript the cards keep the full width. */
.ub-toolbar { margin-bottom: 18px; }
.ub-filter-toggle { display: inline-flex; min-height: 44px; border-radius: 8px; font-family: var(--font-body); font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 700; }
.ub-filters { margin-top: 12px; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 6px 18px 4px; }
.ub-filters:not(.is-open) { display: none; }
.ub-fhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.ub-ftitle { font-family: var(--font-body); font-style: normal; font-weight: 700; font-size: 1.2rem; line-height: 1.3; text-transform: none; letter-spacing: 0; }
.ub-reset { min-height: 44px; padding: 0 2px; background: none; border: 0; font: 600 0.95rem var(--font-body); color: var(--red); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ub-reset:hover { color: var(--red-dark); }
.ub-filters .field { gap: 4px; }
.ub-filters .field label { font-size: 0.9rem; }
.ub-filters .field input, .ub-filters .field select { padding: 9px 10px; min-height: 44px; border-radius: 8px; }
.ub-f-q { padding: 14px 0; border-bottom: 1px solid var(--line); }
.ub-fgroup { border-bottom: 1px solid var(--line); }
.ub-fgroup:last-child { border-bottom: 0; }
.ub-fgroup summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-weight: 700; cursor: pointer; }
.ub-fgroup summary::-webkit-details-marker { display: none; }
.ub-fgroup summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.ub-fgroup[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.ub-fgroup-body { padding-bottom: 14px; }
.ub-frange { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ub-results { min-width: 0; }
.ub-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 18px; }
.ub-count { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.ub-sortbox { flex-direction: row; align-items: center; gap: 8px; }
.ub-sortbox label { font-size: 0.95rem; white-space: nowrap; }
.ub-sortbox select { width: auto; min-height: 44px; padding: 8px 10px; border-radius: 8px; }
@media (min-width: 900px) {
  .ub-browse.has-filters { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
  .ub-filter-toggle { display: none; }
  .ub-toolbar { margin-bottom: 0; }
  .ub-filters, .ub-filters:not(.is-open) { display: flex; margin-top: 0; }
}

/* List page: cards (white, rounded, photo on top with count, arrows and dots, then price, specs and two buttons) */
.ub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.ub-card { border-radius: 12px; transition: box-shadow 0.2s ease; }
.ub-card:hover, .ub-card:focus-within { box-shadow: 0 10px 28px rgba(14,17,19,0.13); }
.ub-card .card-body { padding: 16px 18px 18px; gap: 6px; }
.ub-media { aspect-ratio: 3 / 2; background: var(--charcoal); overflow: hidden; border-radius: 11px 11px 0 0; }
.ub-cardtrack { position: relative; display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ub-cardtrack::-webkit-scrollbar { display: none; }
.ub-cardslide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.ub-cardslide img { width: 100%; height: 100%; object-fit: cover; }
.ub-nophoto { height: 100%; background: url("img/marlin-white.png") no-repeat center / auto 55%; opacity: 0.12; }
.ub-media .badge { z-index: 2; }
.ub-card .badge.sold { left: auto; right: 12px; border-radius: 6px; font-size: 0.8rem; padding: 4px 10px; }
.ub-photocount { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 6px; background: rgba(14,17,19,0.72); color: var(--white); font-size: 0.85rem; font-weight: 600; line-height: 1; pointer-events: none; }
.ub-cardnav { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(14,17,19,0.6); color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ub-cardnav svg { width: 22px; height: 22px; }
.ub-cardnav:hover, .ub-cardnav:focus-visible { background: rgba(14,17,19,0.88); }
.ub-cardprev { left: 8px; }
.ub-cardnext { right: 8px; }
.ub-dots { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; z-index: 2; }
.ub-dots[hidden] { display: none; }
.ub-dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ub-dot::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: rgba(255,255,255,0.55); box-shadow: 0 0 0 1px rgba(0,0,0,0.35); }
.ub-dot[aria-current="true"]::before { background: var(--white); }
.ub-card-title { font-family: var(--font-body); font-style: normal; font-weight: 700; font-size: 1.15rem; line-height: 1.3; text-transform: none; letter-spacing: 0; }
.ub-card-title a { color: var(--ink); text-decoration: none; }
.ub-card-title a:hover { color: var(--red); text-decoration: underline; }
.ub-card .ub-card-price { font-weight: 700; font-size: 1.6rem; line-height: 1.15; color: var(--ink); }
.ub-card .ub-card-kind { font-weight: 600; font-size: 0.92rem; color: var(--red); }
.ub-cardspecs { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; font-size: 0.92rem; color: var(--ink); }
.ub-cardspecs li { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: break-word; }
.ub-ico { flex: 0 0 auto; color: var(--muted); }
.ub-photocount .ub-ico { color: inherit; }
.ub-card-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.ub-card .ub-excerpt { font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ub-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ub-card-actions > :only-child { grid-column: 1 / -1; }
.ub-btn { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border: 2px solid var(--red); border-radius: 8px; font: 700 1rem/1.2 var(--font-body); text-align: center; text-decoration: none; }
.ub-btn-outline { background: var(--white); color: var(--red); }
.ub-btn-outline:hover { background: #eef4fb; color: var(--red-dark); border-color: var(--red-dark); }
.ub-btn-solid { background: var(--red); color: var(--white); }
.ub-btn-solid:hover { background: var(--red-dark); border-color: var(--red-dark); }
.ub-empty { border: 2px dashed var(--line); border-radius: 12px; padding: 36px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
@media (prefers-reduced-motion: reduce) { .ub-card { transition: none; } }

/* Listing page layout */
.section.ub-detail { padding-block: 24px 72px; }
.ub-detail .breadcrumb { color: var(--muted); margin-bottom: 18px; }
.ub-detail .breadcrumb a { color: var(--red); }
.ub-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.ub-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
@media (min-width: 960px) {
  .ub-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; }
  .ub-jump { display: none; }
}
@media (min-width: 960px) and (min-height: 760px) {
  .ub-side { position: sticky; top: 96px; }
}

/* Listing page gallery */
.ub-stage { position: relative; background: var(--black); border-radius: 12px; overflow: hidden; }
.ub-track { position: relative; display: flex; aspect-ratio: 4 / 3; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ub-track::-webkit-scrollbar { display: none; }
.ub-track:focus-visible { outline-offset: -3px; }
.ub-slide { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: start; }
.ub-slide img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 700px) { .ub-track { aspect-ratio: 3 / 2; } }
.ub-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(14,17,19,0.72); color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ub-nav:hover, .ub-nav:focus-visible { background: var(--red); }
.ub-prev { left: 12px; }
.ub-next { right: 12px; }
.ub-counter { position: absolute; right: 12px; bottom: 12px; margin: 0; background: rgba(14,17,19,0.78); color: var(--white); font-size: 0.9rem; font-weight: 600; padding: 3px 10px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.ub-thumbs { list-style: none; display: flex; gap: 8px; margin: 10px 0 0; padding: 0 0 4px; overflow-x: auto; }
.ub-thumbs li { flex: 0 0 auto; }
.ub-thumb { display: block; width: 88px; aspect-ratio: 4 / 3; border: 2px solid transparent; border-radius: 8px; overflow: hidden; opacity: 0.75; }
.ub-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ub-thumb:hover, .ub-thumb[aria-current="true"] { opacity: 1; border-color: var(--red); }
@media (prefers-reduced-motion: reduce) { .ub-track, .ub-cardtrack { scroll-behavior: auto; } }

/* Listing page: title, price, key facts, sections */
.ub-head { display: flex; flex-direction: column; gap: 8px; }
.ub-title { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.ub-pricebar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ub-detail .price { font-family: var(--font-head); font-style: italic; font-weight: 800; font-size: 2.2rem; line-height: 1.1; color: var(--red); }
.ub-line { color: var(--muted); }
.ub-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); border: 1px solid var(--line); border-radius: 12px; }
.ub-facts li { padding: 12px 16px; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.ub-facts li:last-child { border-right: 0; }
.ub-fact-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.ub-fact-value { font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.ub-section { border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.ub-section .listing-desc { font-size: 1.02rem; max-width: 70ch; }
.ub-spec-table { grid-template-columns: minmax(110px, 32%) 1fr; gap: 0; font-size: 1rem; color: var(--ink); }
.ub-spec-table dt, .ub-spec-table dd { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ub-spec-table dt { background: var(--sand); }

/* Listing page: side panel with price and enquiry form */
.ub-panel { border: 1px solid var(--line); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 12px; background: var(--white); box-shadow: 0 6px 24px rgba(14,17,19,0.08); }
.ub-panel .h4 { margin-top: 4px; }
.ub-panel .form { grid-template-columns: 1fr; gap: 10px; }
.ub-panel .field { gap: 4px; }
.ub-panel .field input { padding: 9px 11px; }
.ub-panel .field textarea { min-height: 96px; padding: 9px 11px; }
.ub-panel .btn { width: 100%; }
.ub-detail .btn { border-radius: 8px; }
.ub-panel small { display: block; margin-top: 8px; font-size: 0.82rem; line-height: 1.45; }
.ub-panel .btn-row { flex-direction: column; }