:root {
  --ink: #142126;
  --deep: #071114;
  --sea: #1f6f66;
  --glass: #8fd0c4;
  --foam: #e7eeea;
  --paper: #fbfcfb;
  --line: rgba(20, 33, 38, 0.12);
  --line-ink: rgba(20, 33, 38, 0.12);
  --brass: #8fd0c4;
  --moss: #1c6b62;
  --muted: #5c6b72;
  --danger: #8d2e2e;
  --shadow: 0 1px 0 rgba(20, 33, 38, 0.04);
  --sheen: none;
  --sans: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --control: 40px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--foam);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color-scheme: light;
}
::selection { background: #c9ebe4; color: var(--deep); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 0.4em; }
.public h1, .public h2, .public h3, .public h4, .public .card strong {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
p { margin: 0 0 0.8em; }

.wrap { width: 100%; margin: 0; padding-inline: 24px; }

.site-header {
  position: sticky; top: 0; z-index: 20;
  color: #f4f7f5;
  background: var(--deep);
  border-bottom: 2px solid var(--glass);
  box-shadow: none;
}
.header-bar { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 1.05rem; letter-spacing: -0.03em; white-space: nowrap; font-weight: 600; }
.public .logo { font-family: var(--display); font-weight: 500; font-style: italic; font-size: 1.45rem; letter-spacing: -0.03em; }
.mark {
  width: 9px; height: 9px;
  background: var(--glass);
  box-shadow: none;
  transform: rotate(45deg);
}
.primary-nav { display: flex; gap: 16px; flex: 1; min-width: 0; }
.primary-nav a { text-decoration: none; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.78; font-weight: 500; }
.primary-nav a:hover { opacity: 1; color: var(--glass); }
.site-header .btn, .site-header .btn.small {
  background: transparent;
  color: var(--glass);
  border-color: var(--glass);
}
.site-header .btn:hover { background: var(--glass); color: var(--deep); border-color: var(--glass); }
.header-actions { display: flex; gap: 14px; align-items: center; margin-left: auto; }
body.public .header-actions { gap: 8px; }
.header-actions a, .text-btn { color: #f4f8fb; text-decoration: none; }
button.text-btn { background: transparent; border: 0; padding: 0; cursor: pointer; font: inherit; letter-spacing: 0.04em; }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-label {
  display: none; cursor: pointer;
  border: 1px solid rgba(214, 230, 240, 0.35);
  padding: 6px 12px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}

.btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--deep);
  color: #f7faf8;
  text-decoration: none;
  border: 1px solid var(--deep);
  border-radius: 0;
  padding: 0.42rem 0.85rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: none;
}
.btn:hover { background: #16343a; border-color: #16343a; }
.btn.dark {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-ink);
  box-shadow: none;
}
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-ink);
  box-shadow: none;
  backdrop-filter: none;
}
.btn.small { padding: 0.28rem 0.6rem; font-size: 0.75rem; min-height: 0; }
.btn.full { width: 100%; }
.btn.google {
  width: 100%;
  background: #fff;
  color: var(--ink);
  border-color: rgba(16, 42, 68, 0.16);
}
.btn.google:hover { color: var(--ink); }
.or { text-align: center; color: var(--muted); font-size: 0.82rem; margin: 4px 0; }

.hero {
  min-height: 640px;
  background:
    linear-gradient(90deg, rgba(7, 17, 20, 0.78) 0%, rgba(7, 17, 20, 0.42) 46%, rgba(7, 17, 20, 0.12) 100%),
    url("/images/stock/hero-1400w.webp") center 42% / cover no-repeat;
  color: white;
  display: grid;
  align-items: end;
  position: relative;
  overflow: hidden;
}
.hero-copy { position: relative; z-index: 1; padding-block: 88px 120px; max-width: 760px; }
.eyebrow { letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.68rem; font-weight: 600; color: var(--sea); margin-bottom: 14px; }
.hero .eyebrow, .auth-aside .eyebrow { color: var(--glass); }
.hero h1 { font-size: clamp(3rem, 6vw, 5.2rem); color: white; font-weight: 500; line-height: 0.96; max-width: 12ch; }
.hero .lede { font-size: 1.12rem; max-width: 46ch; color: rgba(244, 248, 251, 0.88); }
.card strong { font-family: var(--display); font-size: 1.22rem; font-weight: 500; letter-spacing: -0.02em; }

.type-switch {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.filters .type-switch { grid-template-columns: 1fr; margin-bottom: 4px; }
.type-switch label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line-ink);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
.type-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.type-switch label:has(:checked) {
  background: #0e7490;
  border-color: #0e7490;
  color: #fff;
}
.search-panel {
  position: relative; z-index: 2;
  margin-top: -28px;
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) minmax(160px, 0.9fr) auto;
  gap: 12px;
  align-items: end;
  padding: 18px 18px 16px;
  border-radius: 0;
  background: var(--paper);
  border: 1px solid var(--line-ink);
  border-top: 3px solid var(--sea);
  box-shadow: none;
}
.search-panel .btn { height: var(--control); min-height: var(--control); padding-inline: 1rem; }

label.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5d7082;
}
.field.row-field { flex-direction: row; align-items: center; gap: 10px; }
.field.row-field select { width: auto; min-width: 190px; height: 42px; min-height: 42px; }

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  width: 100%;
  max-width: 100%;
  min-height: var(--control);
  height: var(--control);
  padding: 0 0.9rem;
  border-radius: 0;
  border: 1px solid rgba(20, 33, 38, 0.16);
  background: #fff;
  box-shadow: none;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.98rem;
  font-weight: 400;
}
textarea {
  height: auto;
  min-height: 140px;
  padding: 0.85rem 0.9rem;
  line-height: 1.5;
  resize: vertical;
}
select {
  appearance: none;
  padding-right: 2.2rem;
  background:
    linear-gradient(45deg, transparent 50%, #3d5568 50%) calc(100% - 18px) 52% / 6px 6px no-repeat,
    linear-gradient(135deg, #3d5568 50%, transparent 50%) calc(100% - 13px) 52% / 6px 6px no-repeat,
    linear-gradient(180deg, #ffffff, #f4f8fb);
}
input::placeholder { color: #7d8fa0; opacity: 1; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(14, 77, 115, 0.7);
  box-shadow: 0 0 0 4px rgba(20, 90, 130, 0.16), inset 0 1px 0 #fff;
}
input[type="file"] {
  height: auto;
  min-height: 0;
  padding: 0.65rem 0.75rem;
  background: rgba(255, 255, 255, 0.7);
}
input[type="checkbox"], input[type="radio"] {
  width: 1.05rem;
  height: 1.05rem;
  min-height: 0;
  accent-color: #0e4d73;
  margin: 0;
  flex: none;
}
.inline select,
.inline input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]) {
  width: auto;
  min-width: 8.5rem;
  height: 40px;
  min-height: 40px;
}
.check {
  display: flex; gap: 8px; align-items: center;
  text-transform: none; letter-spacing: 0; font-size: 0.98rem; font-weight: 400; color: var(--ink);
}

.section { padding-block: 72px; }
.section h2 { font-size: clamp(1.7rem, 2.6vw, 2.15rem); }
.public .section h2, .ink-band .section-head h2 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); }
.section-head { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line-ink); }
.ink-band {
  background: var(--deep);
  color: #f4f7f5;
  padding-block: 72px;
}
.ink-band .eyebrow, .ink-band .kicker { color: var(--glass); }
.ink-band h2, .ink-band h3 { color: #f7faf8; }
.ink-band .section-head { border-bottom-color: rgba(255, 255, 255, 0.14); }
.ink-band .btn.ghost { color: #f7faf8; border-color: rgba(247, 250, 248, 0.35); background: transparent; }
.ink-band .btn.ghost:hover { color: var(--glass); border-color: var(--glass); }
.muted { color: var(--muted); }
.grid-boats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.home-boats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.card, .boat-row, .article-card, .panel, .filters, .auth-card, .stat, table {
  background: var(--paper);
  border: 1px solid var(--line-ink);
  box-shadow: none;
}
.card {
  border-radius: 0; overflow: hidden; text-decoration: none;
  display: flex; flex-direction: column; min-height: 100%;
  transition: border-color 0.2s ease;
}
.card:hover { border-color: var(--sea); }
.card .media { aspect-ratio: 3/2; background: #d5e4ee; overflow: hidden; }
.card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.card:hover .media img { transform: scale(1.04); }
.card .body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.price { font-family: var(--display); font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; }
.meta { color: var(--muted); font-size: 0.9rem; }
.kicker { color: var(--sea); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }

.band { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; }
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  color: #f4f8fb; border-radius: 0; padding: 22px; text-decoration: none; min-height: 168px;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 40%),
    linear-gradient(165deg, #12324c, #071422);
  border: 1px solid rgba(190, 214, 230, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 16px 30px rgba(7, 20, 34, 0.16);
}
.tile.alt {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 38%),
    linear-gradient(165deg, #1a6280, #0c3a52);
}
.tile strong { font-size: 1.15rem; font-weight: 600; }
.article-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; }
.article-card { border-radius: 14px; padding: 22px; text-decoration: none; display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a, .badge {
  border: 1px solid var(--line-ink);
  border-radius: 0; padding: 6px 12px; text-decoration: none;
  background: transparent;
  box-shadow: none;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.public .chips a {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0;
  padding: 4px 0 6px;
  border: 0;
  border-bottom: 1px solid var(--line-ink);
  margin-right: 8px;
}
.public .chips a:hover { border-bottom-color: var(--sea); color: var(--sea); }
.badge.live { background: rgba(214, 236, 230, 0.9); color: var(--moss); border-color: transparent; }
.badge.warn { background: rgba(255, 236, 214, 0.95); color: #8a4b12; border-color: transparent; }
.badge.muted { background: rgba(232, 238, 242, 0.9); }

.search-layout { display: grid; grid-template-columns: 280px 1fr; gap: 22px; padding-block: 28px 64px; align-items: start; }
.search-layout .grid-boats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.related-boats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
.filters {
  border-radius: 0; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: 88px;
}
.filters h2 { font-size: 1.15rem; }
.filters details { display: flex; flex-direction: column; gap: 12px; }
.filters summary { cursor: pointer; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.74rem; font-weight: 600; color: #5d7082; }
.filters .btn { width: 100%; }
.results-bar { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.boat-list { display: grid; gap: 12px; }
.boat-row { display: grid; grid-template-columns: 240px 1fr; gap: 14px; border-radius: 14px; overflow: hidden; text-decoration: none; }
.boat-row img { width: 100%; height: 100%; object-fit: cover; min-height: 170px; }
.boat-row .body { padding: 14px 16px 16px 0; }
.detail { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 420px); gap: 28px; padding-block: 28px 72px; align-items: start; }
.detail > article, .detail > aside { min-width: 0; }
.gallery { margin-top: 8px; outline: none; }
.gallery-stage { position: relative; border-radius: 0; overflow: hidden; background: #d5e4ee; box-shadow: none; }
.gallery-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); color: #102033;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 16px rgba(8, 24, 42, 0.18);
}
.gallery-nav.prev { left: 12px; }
.gallery-nav.next { right: 12px; }
.gallery-count {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(7, 21, 37, 0.72); color: #fff;
  border-radius: 999px; padding: 4px 10px; font-size: 0.8rem; letter-spacing: 0.04em;
}
.gallery-thumbs {
  display: flex; gap: 8px; margin-top: 10px; overflow-x: auto;
  padding-bottom: 4px; scroll-snap-type: x mandatory;
}
.gallery-thumbs button {
  flex: 0 0 108px; height: 72px; padding: 0; border-radius: 8px; overflow: hidden;
  border: 2px solid transparent; background: #d5e4ee; cursor: pointer; scroll-snap-align: start;
}
.gallery-thumbs button.is-on { border-color: #0e4d73; }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.boat-video { margin-top: 22px; }
.boat-video h2 { font-size: 1.2rem; margin: 4px 0 10px; }
.boat-video video { width: 100%; max-height: 520px; border-radius: 14px; background: #071422; display: block; }
.video-frame { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; background: #071422; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.overview-copy { width: 100%; }
.overview-copy p { font-size: 1.05rem; line-height: 1.65; width: 100%; max-width: none; margin: 0 0 14px; }
.overview-heading { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 22px 0 12px; color: var(--sea); }
.overview-note { width: 100%; max-width: none; line-height: 1.65; margin: 0; }
.crumbs { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0; padding: 0; margin: 0 0 12px; font-size: 0.84rem; }
.crumbs li { display: flex; align-items: center; color: var(--muted); }
.crumbs li:not(:last-child)::after { content: "/"; margin: 0 8px; color: #8aa0b2; }
.crumbs a { color: var(--sea); text-decoration: none; }
.crumbs [aria-current="page"] { color: var(--ink); }
.org-lockup { display: flex; align-items: center; gap: 12px; }
.org-lockup h2, .org-lockup p { margin: 0; }
.org-logo { width: 64px; height: 64px; object-fit: contain; padding: 6px; box-sizing: border-box; border-radius: 12px; background: #fff; border: 1px solid rgba(16, 42, 68, 0.08); flex: 0 0 auto; }
.org-logo.tiny { width: 28px; height: 28px; border-radius: 6px; }
.org-logo.large { width: 84px; height: 84px; flex: 0 0 auto; align-self: center; }
.org-meta { display: flex; align-items: center; gap: 8px; }
.hero-lockup { display: flex; align-items: center; gap: 16px; }
.boat-tabs { margin-top: 22px; }
.boat-tabs > input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.boat-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid rgba(16, 42, 68, 0.12);
  margin-bottom: 18px;
}
.boat-tab-bar label {
  cursor: pointer;
  padding: 10px 14px 12px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
}
.boat-tab-bar label span {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sea);
}
.boat-tabs input:focus-visible + .boat-tab-bar label,
.boat-tab-bar label:hover { color: var(--ink); }
.boat-tabs input:nth-of-type(1):checked ~ .boat-tab-bar label:nth-of-type(1),
.boat-tabs input:nth-of-type(2):checked ~ .boat-tab-bar label:nth-of-type(2),
.boat-tabs input:nth-of-type(3):checked ~ .boat-tab-bar label:nth-of-type(3) {
  color: var(--ink);
  border-bottom-color: var(--sea);
}
.boat-panel { display: none; }
.boat-tabs input:nth-of-type(1):checked ~ .overview,
.boat-tabs input:nth-of-type(2):checked ~ .specs,
.boat-tabs input:nth-of-type(3):checked ~ .kit { display: block; }
.spec-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.spec-highlights div { border-top: 1px solid var(--line-ink); padding-top: 8px; }
.spec-highlights span { display: block; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.spec-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.spec-jump a {
  text-decoration: none;
  border: 1px solid rgba(16, 42, 68, 0.1);
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.88rem;
  font-weight: 600;
}
.spec-sheet { display: flex; flex-direction: column; gap: 16px; }
.spec-group {
  border: 1px solid rgba(16, 42, 68, 0.08);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  scroll-margin-top: 84px;
}
.spec-group h2 {
  margin: 0;
  padding: 11px 16px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--sans);
  color: #f4f7f5;
  background: var(--deep);
}
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; }
.spec-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 11px 16px;
  border-top: 1px solid var(--line-ink);
  font-size: 0.98rem;
}
.spec-grid .spec-row:nth-child(odd) { border-right: 1px solid var(--line-ink); }
.spec-row span { color: var(--muted); }
.spec-row b { font-weight: 600; text-align: right; min-width: 0; }
.spec-group .feature-list { padding: 8px 16px 12px 32px; }
details summary { cursor: pointer; font-weight: 600; margin: 8px 0; }
.panel { border-radius: 0; padding: 18px; }
.panel.sticky { position: sticky; top: 88px; }
.feature-list { margin: 0; padding-left: 18px; }
.feature-list li { padding: 5px 0; }
.prose { max-width: none; }
.prose p { font-size: 1.05rem; }
.page-hero { padding-block: 42px 10px; }
.page-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); }

.site-footer {
  color: #d5e0dc;
  padding: 64px 0 28px;
  background: var(--deep);
  border-top: 2px solid var(--glass);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.site-footer a { color: #d5e0dc; text-decoration: none; display: block; padding: 4px 0; opacity: 0.86; }
.site-footer a:hover { color: var(--glass); }
.site-footer .logo { color: #f4f7f5; }
.site-footer strong { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--glass); }
.fine { opacity: 0.62; font-size: 0.88rem; margin-top: 28px; }

.flash {
  margin: 16px auto;
  background: rgba(226, 242, 236, 0.88);
  border: 1px solid rgba(170, 210, 198, 0.9);
  color: #145443;
  border-radius: 12px;
  padding: 12px 14px;
  backdrop-filter: blur(10px);
}
.flash.error { background: rgba(253, 236, 236, 0.9); border-color: #f0c6c6; color: var(--danger); }
.flash ul { margin: 0; padding-left: 18px; }

.auth-shell { display: grid; grid-template-columns: .9fr 1.1fr; min-height: calc(100vh - 60px); }
.auth-aside {
  color: white; padding: 56px 48px;
  background:
    linear-gradient(180deg, rgba(143, 208, 196, 0.16), transparent 32%),
    var(--deep);
  border-right: 2px solid var(--glass);
}
.auth-card { max-width: 480px; margin: 40px auto; border-radius: 16px; padding: 24px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.demo {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(214, 230, 240, 0.22);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.92rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.portal { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.side {
  color: #e7f0f6; padding: 22px 16px;
  background: var(--deep);
  border-right: 2px solid var(--glass);
}
.side a { color: #e7f0f6; text-decoration: none; display: block; padding: 8px 10px; border-radius: 8px; }
.side a:hover, .side a.active { background: rgba(255, 255, 255, 0.08); }
.side .logo { margin: 4px 10px 16px; }
.portal-main { padding: 32px; min-width: 0; }
.portal-main h1 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
.stat { border-radius: 14px; padding: 16px; }
.stat b { display: block; font-size: 1.45rem; font-weight: 600; letter-spacing: -0.03em; }
table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 14px; overflow: hidden; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid rgba(16, 42, 68, 0.08); vertical-align: middle; font-size: 0.95rem; }
th { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); background: rgba(244, 248, 251, 0.7); font-weight: 600; }
.pager { display: flex; gap: 14px; align-items: center; justify-content: center; padding: 18px; }
.pager a { color: var(--sea); }
.directory { display: grid; gap: 28px; }
.country-block h2 { font-size: 1.45rem; }
.marina-block { margin: 0 0 36px; }
.marina-block h2 { font-size: 1.45rem; }
.marina-plan { margin: 0 0 18px; }
.marina-plan-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.marina-plan-tools .is-on { box-shadow: inset 0 0 0 2px #f4f8fb, 0 0 0 2px #0e4d73; }
.marina-sheet {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  background: #082c42;
  box-shadow: var(--shadow);
  touch-action: none;
  font-family: "Inter", sans-serif;
}
.marina-sheet .soundings text { fill: rgba(214, 236, 244, 0.55); font-size: 1.7px; text-anchor: middle; }
.marina-sheet .walls line { stroke: #b7b1a4; stroke-width: 2.4; stroke-linecap: butt; }
.marina-sheet .quay-wall { fill: #8d97a0; }
.marina-sheet .shed { fill: #efeae1; stroke: #6d6458; stroke-width: 0.15; }
.marina-sheet .roof { fill: #3d4c59; }
.marina-sheet .bollard { fill: #2c3540; }
.marina-sheet .quay-label { fill: #1c2430; font-size: 2.5px; font-weight: 600; }
.marina-sheet .pontoon { stroke: #f4efe6; stroke-width: 2.7; stroke-linecap: round; }
.marina-sheet .piles circle { fill: #d9d3c6; stroke: #4d5964; stroke-width: 0.18; }
.marina-sheet .buoy.port { fill: #d4534a; }
.marina-sheet .buoy.starboard { fill: #3c9a62; }
.marina-sheet .berth-mark { cursor: pointer; }
.marina-sheet .hit { fill: transparent; }
.marina-sheet .hull { fill: #f7fafc; stroke: #16324a; stroke-width: 0.28; }
.marina-sheet .deckline { fill: none; stroke: #8ea0ae; stroke-width: 0.16; }
.marina-sheet .swing { fill: none; stroke: rgba(244, 248, 251, 0.7); stroke-width: 0.28; stroke-dasharray: 0.7 0.5; }
.marina-sheet .buoy { stroke: #102033; stroke-width: 0.18; }
.marina-sheet .berth-mark .buoy { fill: #f2c14e; }
.marina-sheet .berth-code { fill: #f4f8fb; font-size: 2.15px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.marina-sheet .berth-code.beside { text-anchor: start; }
.marina-sheet .berth-mark.is-busy .hull { fill: #8ea4b3; }
.marina-sheet .berth-mark.is-partial .hull { fill: #c9d6df; }
.marina-sheet .cap-badge circle { fill: #f4b942; stroke: #16324a; stroke-width: 0.3; }
.marina-sheet .cap-badge.is-full circle { fill: #8ea4b3; }
.marina-sheet .cap-badge text { font-size: 1.9px; font-weight: 700; text-anchor: middle; fill: #16324a; pointer-events: none; }
.marina-sheet .berth-mark.is-hidden .hull { fill: transparent; stroke-dasharray: 0.55 0.4; }
.marina-sheet .berth-mark.is-active .hull { fill: #e7fbff; stroke: #22d3ee; stroke-width: 0.45; }
.marina-sheet .berth-mark:hover .hull { stroke: #22d3ee; }
.marina-sheet .compass circle { fill: rgba(8, 28, 42, 0.35); stroke: rgba(244, 248, 251, 0.7); stroke-width: 0.2; }
.marina-sheet .compass polygon { fill: #f4f8fb; }
.marina-sheet .compass text { fill: #f4f8fb; font-size: 1.8px; font-weight: 700; text-anchor: middle; }
.plan-key { display: flex; flex-wrap: wrap; gap: 8px 14px; list-style: none; margin: 10px 0 0; padding: 0; color: #5c6d7e; font-size: 0.78rem; font-weight: 600; }
.plan-key li { display: inline-flex; align-items: center; gap: 6px; }
.plan-key i { width: 16px; height: 10px; border-radius: 999px; display: inline-block; }
.plan-key .key-hull { background: #f7fafc; border: 1px solid #16324a; }
.plan-key .key-busy { background: #8ea4b3; border: 1px solid #16324a; }
.plan-key .key-cap { background: #f4b942; border: 1px solid #16324a; width: 13px; height: 13px; border-radius: 50%; font-style: normal; font-size: 8px; font-weight: 700; line-height: 12px; text-align: center; color: #16324a; }
.plan-key .key-swing { background: transparent; border: 1px dashed #8ea4b3; border-radius: 50%; height: 12px; width: 12px; }
.plan-key .key-pontoon { background: #f4efe6; border: 1px solid #c8bfb0; border-radius: 2px; width: 18px; height: 6px; }
.marina-plan-note { margin-top: 8px; font-size: 0.92rem; }
.marina-plan[data-editable] .marina-sheet { cursor: crosshair; }
.marina-plan[data-editable][data-mode="move"] .marina-sheet { cursor: default; }
fieldset { border: 0; padding: 0; margin: 0; }
legend.kicker { margin-bottom: 8px; }

.masthead { padding-block: 48px 4px; }
.masthead h1 { font-size: clamp(2.8rem, 6vw, 4.4rem); }
.masthead p { font-size: 1.15rem; max-width: 42ch; }

.story-spread {
  display: grid;
  grid-template-columns: 1.45fr 0.9fr;
  gap: 18px;
  align-items: stretch;
}
.feature-story {
  position: relative;
  display: flex;
  min-height: 480px;
  border-radius: 0;
  overflow: hidden;
  color: #f4f8fb;
  text-decoration: none;
  box-shadow: 0 22px 44px rgba(8, 24, 42, 0.16);
}
.feature-story img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature-story .feature-copy {
  position: relative;
  z-index: 1;
  margin-top: auto;
  width: 100%;
  padding: 28px 28px 24px;
  background: linear-gradient(180deg, transparent, rgba(7, 18, 32, 0.28) 18%, rgba(7, 18, 32, 0.86));
}
.feature-story h2 { color: white; font-size: clamp(1.9rem, 3vw, 2.8rem); max-width: 16ch; }
.feature-story p { color: rgba(244, 248, 251, 0.92); max-width: 46ch; margin: 0; }
.feature-story .kicker { color: #d7e7f2; }
.feature-wide { min-height: 520px; margin-bottom: 18px; }

.story-stack { display: flex; flex-direction: column; gap: 18px; min-height: 0; min-width: 0; }
.story-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  text-decoration: none;
  border-radius: 0;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid rgba(16, 42, 68, 0.08);
  box-shadow: var(--shadow), var(--sheen);
}
.story-card .story-media { position: relative; aspect-ratio: 16 / 10; background: #d5e4ee; overflow: hidden; }
.story-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-card .story-copy { padding: 14px 16px 16px; }
.story-card h3 { font-size: 1.35rem; }
.story-card p { color: var(--muted); font-size: 0.95rem; margin: 0; }
.story-stack .story-card { flex: 1 1 0; min-height: 0; flex-direction: row; overflow: hidden; }
.story-stack .story-card .story-media { aspect-ratio: auto; width: 42%; flex: none; min-height: 0; overflow: hidden; }
.story-stack .story-card .story-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.story-stack .story-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.story { padding-block: 24px 56px; }
.story-hero {
  height: min(68vh, 620px);
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 28px;
  background: #d5e4ee;
}
.story-hero img { width: 100%; height: 100%; object-fit: cover; }
.story-sheet { max-width: 740px; margin-inline: auto; }
.story-sheet h1 { font-size: clamp(2.5rem, 5vw, 3.8rem); }
.deck { font-size: 1.28rem; line-height: 1.45; color: var(--ink); }
.story-body p { font-size: 1.08rem; line-height: 1.7; }
.story-body p:first-of-type::first-letter {
  font-family: var(--display);
  float: left;
  font-size: 3.5rem;
  line-height: 0.8;
  padding: 8px 10px 0 0;
  color: var(--sea);
}

.tile-grid.guides { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile.photo {
  background-size: cover;
  background-position: center;
  min-height: 220px;
  position: relative;
  isolation: isolate;
}
.tile.photo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(7, 20, 34, 0.08), rgba(7, 20, 34, 0.78));
}
.tile.photo > * { position: relative; z-index: 1; }

@media (max-width: 1100px) {
  .primary-nav { gap: 10px; }
  .primary-nav a { font-size: 0.72rem; letter-spacing: 0.08em; }
  .grid-boats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .grid-boats, .article-grid, .stat-grid, .footer-grid, .story-grid, .tile-grid.guides { grid-template-columns: 1fr 1fr; }
  .story-spread { grid-template-columns: 1fr; }
  .feature-story, .feature-wide { min-height: 380px; }
  .story-stack .story-card { flex: none; min-height: 0; overflow: visible; flex-direction: column; }
  .story-stack .story-card .story-media { width: 100%; aspect-ratio: 16 / 9; height: auto; }
  .search-layout, .detail, .band, .auth-shell, .portal, .boat-row { grid-template-columns: minmax(0, 1fr); }
  .search-layout .grid-boats { grid-template-columns: 1fr 1fr; }
  .search-panel { grid-template-columns: 1fr 1fr; }
  .search-panel .type-switch { grid-template-columns: 1fr 1fr; }
  .search-panel .btn { grid-column: 1 / -1; }
  .filters { position: static; }
  .primary-nav { display: none; }
  .nav-toggle:checked ~ .primary-nav {
    display: flex; flex-direction: column;
    position: absolute; top: 60px; left: 0; right: 0;
    background: rgba(7, 21, 37, 0.96);
    padding: 16px 22px 20px;
    backdrop-filter: blur(16px);
  }
  .nav-toggle-label { display: inline-flex; }
  .header-bar { flex-wrap: wrap; }
  .portal-main { padding: 16px; }
  .boat-row .body { padding: 14px; }
  .side { position: sticky; top: 0; z-index: 5; }
}
@media (max-width: 640px) {
  .grid-boats, .article-grid, .stat-grid, .footer-grid, .tile-grid, .tile-grid.guides, .story-grid, .split, .search-panel,
  .search-layout .grid-boats, .spec-grid, .spec-highlights { grid-template-columns: 1fr; }
  .spec-grid .spec-row:nth-child(odd) { border-right: 0; }
  .wrap { padding-inline: 16px; }
  .story-hero { height: 240px; }
  .feature-story, .feature-wide { min-height: 320px; }
  .masthead h1 { font-size: 2.4rem; }
  .gallery-thumbs button { flex-basis: 84px; height: 56px; }
  .spec-highlights { grid-template-columns: 1fr 1fr; }
}

body.public {
  --ink: #142126;
  --deep: #090d16;
  --sea: #0e7490;
  --glass: #22d3ee;
  --foam: #f4f8fb;
  --paper: #ffffff;
  --line-ink: rgba(20, 40, 60, 0.1);
  --muted: #5c6d7e;
  --display: "Outfit", "Avenir Next", sans-serif;
  --sans: "Inter", "Avenir Next", sans-serif;
  background: #f4f8fb;
  color: #142126;
  font-family: "Inter", "Avenir Next", sans-serif;
}
body.public ::selection { background: #0e7490; color: white; }
body.public h1,
body.public h2,
body.public h3,
body.public h4,
body.public .card strong,
body.public .price,
body.public .logo,
body.public .tile strong {
  font-family: "Outfit", "Avenir Next", sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}
body.public .market-bar {
  background: #0f172a;
  border-bottom: 1px solid rgba(34, 211, 238, 0.2);
  color: #67e8f9;
  font-size: 0.75rem;
  font-weight: 600;
}
body.public .market-bar-inner {
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 34px;
  white-space: nowrap;
  overflow: hidden;
}
body.public .market-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #334155;
  flex: none;
}
body.public .site-header {
  background: rgba(15, 23, 42, 0.95);
  border-bottom: 1px solid #1e293b;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
body.public .header-bar { min-height: 76px; gap: 12px; }
body.public .logo {
  font-style: normal;
  font-size: 1.45rem;
  font-weight: 800;
  gap: 12px;
  color: white;
}
body.public .logo .word span { color: #22d3ee; }
body.public .mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #0e7490;
  color: white;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(8, 145, 178, 0.35);
}
body.public .header-search { flex: 1 1 240px; max-width: 420px; min-width: 200px; }
body.public .header-search input {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: #090d16;
  color: #e2e8f0;
  padding: 0 14px;
}
body.public .header-search input:focus { outline: none; border-color: #22d3ee; }
body.public .primary-nav { flex: none; gap: 10px; }
body.public .primary-nav a { letter-spacing: 0.04em; font-size: 0.72rem; }
body.public .primary-nav a:hover { color: #22d3ee; }
body.public .header-account {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
}
body.public .header-account:hover {
  color: white;
  border-color: #22d3ee;
  background: rgba(8, 145, 178, 0.18);
}
body.public .header-actions .text-btn {
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  color: #536175;
}
body.public .header-actions .text-btn:hover { color: white; }
body.public .pref { position: relative; }
body.public .pref summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}
body.public .pref summary::-webkit-details-marker { display: none; }
body.public .pref summary::marker { content: ""; }
body.public .pref-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  min-width: 168px;
  padding: 6px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
body.public .pref-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #e2e8f0;
  font-family: "Inter", sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
body.public .pref-menu button:hover,
body.public .pref-menu button.is-on { background: rgba(8, 145, 178, 0.22); color: white; }
body.public .flag {
  width: 16px;
  height: 11px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
body.public .btn,
body.public button.btn {
  background: #0e7490;
  border-color: #0e7490;
  color: white;
  border-radius: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  box-shadow: none;
}
body.public .btn:hover,
body.public .site-header .btn:hover { background: #155e75; border-color: #0e7490; color: white; }
body.public .site-header .btn,
body.public .site-header .btn.small {
  background: #0e7490;
  color: white;
  border-color: #0e7490;
}
body.public .header-actions .btn.small {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
}
body.public .btn.ghost,
body.public .btn.dark {
  background: #fff;
  color: #0f172a;
  border-color: #cbd5e1;
}
body.public .btn.ghost:hover,
body.public .btn.dark:hover { border-color: #22d3ee; color: white; }
body.public .hero {
  min-height: 0;
  text-align: center;
  border-bottom: 1px solid #1e293b;
  background:
    linear-gradient(to bottom, rgba(9, 13, 22, 0.4), rgba(9, 13, 22, 0.82)),
    url("/images/stock/hero-1400w.webp") center 42% / cover no-repeat;
}
body.public .hero-copy { max-width: 1100px; margin-inline: auto; padding-block: 88px 72px; }
body.public .pill {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.16);
  border: 1px solid rgba(34, 211, 238, 0.45);
  color: #a5f3fc;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.public .hero h1 {
  max-width: 16ch;
  margin-inline: auto;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
body.public .hero h1 span { color: #22d3ee; }
body.public .hero .lede { margin-inline: auto; max-width: 46rem; color: #e2e8f0; font-size: 1.15rem; }
body.public .search-panel {
  margin-top: 36px;
  max-width: 1080px;
  margin-inline: auto;
  padding: 22px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(34, 211, 238, 0.28);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px);
}
body.public label.field { color: #155e75; }
body.public .search-panel label.field { color: #67e8f9; }
body.public .search-panel .type-switch { grid-column: 1 / -1; }
body.public .search-panel .type-switch label {
  background: #0f172a;
  color: #e2e8f0;
  border-color: #334155;
}
body.public .search-panel .type-switch label:has(:checked),
body.public .filters .type-switch label:has(:checked) {
  background: #0e7490;
  border-color: #0e7490;
  color: #fff;
}
body.public input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]),
body.public select,
body.public textarea {
  background: #fff;
  color: #142126;
  border: 1px solid #d5e0ea;
  border-radius: 10px;
  box-shadow: none;
}
body.public select {
  background-image:
    linear-gradient(45deg, transparent 50%, #0891b2 50%),
    linear-gradient(135deg, #0891b2 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-color: #fff;
}
body.public .search-panel input,
body.public .search-panel select,
body.public .header-search input {
  background-color: #0f172a;
  color: #e2e8f0;
  border-color: #334155;
}
body.public .search-panel select {
  background-image:
    linear-gradient(45deg, transparent 50%, #67e8f9 50%),
    linear-gradient(135deg, #67e8f9 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-color: #0f172a;
}
body.public input:focus,
body.public select:focus,
body.public textarea:focus { outline: none; border-color: #22d3ee; }
body.public .section-head { border-bottom-color: #e2e8f0; }
body.public .section h2,
body.public .ink-band .section-head h2,
body.public .page-hero h1,
body.public .masthead h1,
body.public .story-sheet h1,
body.public .feature-story h2,
body.public .country-block h2,
body.public .marina-block h2 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}
body.public .section-head h2 { margin: 0; }
body.public .page-hero h2,
body.public .prose h2 {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}
body.public .directory-head { padding-top: 36px; }
body.public .directory-head h1,
body.public .org-profile h1 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.3em;
}
body.public .directory-head .section-head { align-items: end; margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
body.public .directory-head .muted { margin: 0; max-width: 52ch; }
body.public .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  margin-top: 18px;
}
body.public .filter-bar .field { margin: 0; min-width: 180px; }
body.public .directory-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
body.public .compact-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
body.public .directory-card .media,
body.public .berth-card .media,
body.public .compact-grid .card .media { aspect-ratio: 3 / 2; }
body.public .directory-card .body,
body.public .berth-card .body,
body.public .compact-grid .card .body { padding: 8px 10px 10px; gap: 2px; }
body.public .directory-card .body { gap: 4px; }
body.public .directory-card strong,
body.public .berth-card strong {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}
body.public .org-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 28px;
  padding: 22px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}
body.public .org-profile .org-logo.large { width: 96px; height: 96px; }
body.public .org-profile p { margin: 0 0 0.7em; }
body.public .org-contact { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; }
body.public .org-contact a { color: #0e7490; font-weight: 600; text-decoration: none; }
body.public .org-contact a:hover { color: #0e7490; }
body.public .chips .badge {
  border-radius: 999px;
  border: 1px solid #d5e0ea;
  background: #f8fafc;
  color: #0f172a;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
}
body.public .marina-group {
  display: grid;
  grid-template-columns: minmax(440px, 680px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin: 0 0 22px;
  padding: 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}
body.public .marina-group h2 { font-size: 1.15rem; }
body.public .marina-group .meta { margin: 6px 0 12px; }
body.public .berth-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
body.public .berth-card .price,
body.public .compact-grid .price { font-size: 0.92rem; font-weight: 600; }
body.public .compact-grid .card strong { font-size: 0.9rem; font-weight: 600; line-height: 1.25; }
body.public .compact-grid .meta { font-size: 0.75rem; line-height: 1.35; }
body.public .berth-photo { margin: 8px 0 18px; border-radius: 16px; overflow: hidden; background: #d5e4ee; }
body.public .berth-photo img { width: 100%; height: 360px; object-fit: cover; display: block; }
body.public .detail .org-lockup a { color: #0e7490; font-weight: 600; text-decoration: none; }
@media (max-width: 1600px) {
  body.public .directory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.public .compact-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.public .berth-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1280px) {
  body.public .directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.public .compact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.public .berth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  body.public .directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.public .compact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.public .berth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  body.public .directory-grid,
  body.public .berth-grid,
  body.public .compact-grid { grid-template-columns: 1fr 1fr; }
  body.public .marina-group,
  body.public .org-profile { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body.public .directory-grid,
  body.public .berth-grid,
  body.public .compact-grid { grid-template-columns: 1fr; }
  body.public .berth-photo img { height: 220px; }
}
body.public .card,
body.public .story-card,
body.public .panel,
body.public .filters,
body.public .auth-card,
body.public .spec-group,
body.public .boat-row {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  color: #142126;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
body.public .card:hover,
body.public .story-card:hover { border-color: rgba(34, 211, 238, 0.55); }
body.public .card .media { border-radius: 0; }
body.public .kicker,
body.public .eyebrow,
body.public .crumbs a { color: #0e7490; }
body.public .price { color: #0f172a; font-size: 1.35rem; }
@media (min-width: 1101px) {
  body.public .home-boats .card .body { padding: 10px 12px 12px; gap: 2px; }
  body.public .home-boats .card strong {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
  }
  body.public .home-boats .price { font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
  body.public .home-boats .meta { font-size: 0.75rem; line-height: 1.35; }
  body.public .home-boats .kicker { font-size: 0.62rem; letter-spacing: 0.08em; }
  body.public .home-boats .org-logo.tiny { width: 20px; height: 20px; }
}
body.public .meta,
body.public .muted,
body.public .story-card p { color: #5c6d7e; }
body.public .deck { color: #334155; font-size: 1.2rem; }
body.public .ink-band { background: transparent; color: inherit; padding-block: 0 72px; }
body.public .ink-band h2,
body.public .ink-band h3 { color: #0f172a; }
body.public .feature-story h2,
body.public .feature-story p { color: white; }
body.public .feature-story .kicker { color: #a5f3fc; }
body.public .ink-band .btn.ghost { color: #0f172a; border-color: #cbd5e1; background: #fff; }
body.public .feature-story,
body.public .story-hero,
body.public .tile { border-radius: 16px; }
body.public .chips a {
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0;
  border-radius: 10px;
  border: 1px solid #d5e0ea;
  background: #fff;
  color: #0f172a;
  padding: 8px 14px;
  margin: 0;
}
body.public .chips a:hover { background: #ecfeff; color: #0e7490; border-color: #22d3ee; }
body.public .site-footer {
  background: #0f172a;
  border-top: 1px solid #1e293b;
  color: #536175;
}
body.public .site-footer strong { color: white; letter-spacing: 0.14em; }
body.public .site-footer a:hover { color: #22d3ee; }
body.public .spec-group h2 {
  background: #f4fafb;
  color: #0e4d73;
  font-family: "Outfit", sans-serif;
  border-bottom: 1px solid #e6eef5;
}
body.public .spec-row { border-color: #e6eef5; }
body.public .spec-row b { color: #142126; }
body.public .gallery-thumbs button.is-on { border-color: #0e7490; }
body.public .crumbs [aria-current="page"] { color: #142126; }
body.public .fact-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 22px 0 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
}
body.public .fact-strip div { padding: 14px 16px; border-right: 1px solid #e6eef5; border-bottom: 1px solid #e6eef5; }
body.public .fact-strip span {
  display: block;
  margin-bottom: 4px;
  color: #0e7490;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.public .fact-strip b { font-weight: 600; color: #0f172a; }
body.public .boat-block { margin-top: 28px; }
body.public .boat-block > h2 { font-size: 1.6rem; margin-bottom: 12px; }
body.public .story-body p:first-of-type::first-letter { color: #22d3ee; }
body.public .auth-aside { border-right-color: rgba(34, 211, 238, 0.4); }
body.public .flash { background: rgba(8, 47, 73, 0.9); color: #a5f3fc; border-color: rgba(34, 211, 238, 0.35); }
body.public .flash.error { background: rgba(69, 10, 10, 0.9); color: #fecaca; border-color: #7f1d1d; }
@media (max-width: 1100px) {
  body.public .header-search { display: none; }
  body.public .market-bar-inner span:nth-child(n+4) { display: none; }
  body.public .fact-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body.public .fact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Boat page: Outfit 600 for titles, Inter 400 for text, Inter 600 for labels. */
body.public .detail h1,
body.public .detail h2,
body.public .detail h3,
body.public .detail .page-hero .price,
body.public .detail .card strong,
body.public .detail .card .price {
  font-family: "Outfit", "Avenir Next", sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}
body.public .detail h1 { font-size: 1.5rem; line-height: 1.2; }
body.public .detail .card strong { font-size: 1.25rem; line-height: 1.3; }
body.public .detail h2,
body.public .detail h3 {
  font-family: "Inter", "Avenir Next", sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0;
  line-height: 1.3;
}
body.public .detail .boat-block {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
}
body.public .detail .boat-block > h2 { margin: 0 0 16px; font-size: 1.125rem; }
body.public .detail .page-hero .price { font-size: 1.5rem; line-height: 1.2; }
body.public .detail .card .price { font-size: 1rem; line-height: 1.3; }
body.public .detail .price .muted,
body.public .detail .page-hero > .muted,
body.public .detail .overview-copy p,
body.public .detail .overview-note,
body.public .detail .fact-strip b,
body.public .detail .spec-row,
body.public .detail .spec-row b,
body.public .detail .feature-list,
body.public .detail .feature-list li,
body.public .detail .meta,
body.public .detail .crumbs {
  font-family: "Inter", "Avenir Next", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.6;
}
body.public .detail .fact-strip b,
body.public .detail .spec-row,
body.public .detail .spec-row b,
body.public .detail .meta { line-height: 1.4; }
body.public .detail .spec-row,
body.public .detail .spec-row b,
body.public .detail .feature-list,
body.public .detail .feature-list li { font-size: 0.875rem; }
body.public .detail .crumbs,
body.public .detail .meta,
body.public .detail .spec-jump a { font-size: 0.875rem; }
body.public .detail .kicker,
body.public .detail .fact-strip span,
body.public .detail .spec-group h2,
body.public .detail label.field {
  font-family: "Inter", "Avenir Next", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
}
body.public .detail .spec-jump a {
  font-family: "Inter", "Avenir Next", sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.public .auth-shell {
  align-items: stretch;
  min-height: calc(100vh - 200px);
  background: #f4f8fb;
}
body.public .auth-aside {
  background:
    linear-gradient(to bottom, rgba(9, 13, 22, 0.42), rgba(9, 13, 22, 0.84)),
    url("/images/stock/hero-1400w.webp") center 40% / cover no-repeat;
  border-right: 0;
}
body.public .auth-aside h1, body.public .auth-aside .auth-aside-title {
  max-width: 16ch;
  font-family: "Outfit", "Avenir Next", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
body.public .auth-aside .pill { margin-bottom: 18px; }
body.public .demo {
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(34, 211, 238, 0.35);
  color: #e2e8f0;
  box-shadow: none;
  font-size: 0.875rem;
  font-weight: 400;
}
body.public .demo strong { color: white; }
body.public .demo code { color: #a5f3fc; }
body.public .auth-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 36px 24px 72px;
}
body.public .auth-card {
  margin: 48px auto;
  padding: 28px;
}
body.public .auth-page .auth-card { margin: 0; }
body.public .auth-card h1 {
  font-family: "Outfit", "Avenir Next", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
body.public .auth-card,
body.public .auth-card p,
body.public .auth-card .or {
  font-size: 0.875rem;
  font-weight: 400;
}
body.public .auth-card label.field {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
body.public .auth-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]),
body.public .auth-card select,
body.public .auth-card textarea,
body.public .auth-card .btn,
body.public .auth-card button.btn,
body.public .btn.google {
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
}
body.public .auth-card .btn,
body.public .auth-card button.btn,
body.public .btn.google { font-weight: 600; }
body.public .role-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.public .btn.google {
  background: #fff;
  color: #142126;
  border-radius: 10px;
  border-color: #d5e0ea;
  font-family: "Inter", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.875rem;
  font-weight: 600;
}
body.public .btn.google:hover {
  background: #f8fafc;
  color: #142126;
  border-color: #22d3ee;
}

body.desk {
  --ink: #142126;
  --muted: #5c6d7e;
  --sea: #0e7490;
  --paper: #fff;
  --line-ink: #e2e8f0;
  background: #f4f8fb;
  color: #142126;
  font-family: "Inter", "Avenir Next", sans-serif;
}
body.desk { font-size: 0.875rem; }
body.desk h1,
body.desk .portal-main h1 {
  font-family: "Outfit", "Avenir Next", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: #0f172a;
}
body.desk h2,
body.desk h3,
body.desk .panel h2 {
  font-family: "Inter", "Avenir Next", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0;
  color: #0f172a;
}
body.desk .portal { background: #f4f8fb; }
body.desk .side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 100vh;
  padding: 22px 14px 18px;
  background: #0f172a;
  border-right: 1px solid #1e293b;
  color: #e2e8f0;
}
body.desk .side .logo {
  margin: 0 8px 18px;
  color: white;
  font-family: "Outfit", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.25rem;
}
body.desk .side .logo .word span { color: #22d3ee; }
body.desk .side .mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #0e7490;
  color: white;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(8, 145, 178, 0.35);
}
body.desk .desk-who {
  margin: 0 8px 16px;
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
}
body.desk .desk-who span {
  display: block;
  margin-bottom: 2px;
  color: #67e8f9;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.desk .side nav { display: flex; flex-direction: column; gap: 2px; }
body.desk .side nav a {
  color: #cbd5e1;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.875rem;
  font-weight: 500;
}
body.desk .side nav a:hover { background: rgba(255, 255, 255, 0.06); color: white; }
body.desk .side nav a.is-on { background: rgba(8, 145, 178, 0.22); color: #a5f3fc; }
body.desk .side form { margin-top: auto; padding-top: 18px; }
body.desk .side .btn {
  background: transparent;
  color: #e2e8f0;
  border-color: #334155;
}
body.desk .side .btn:hover { background: transparent; border-color: #22d3ee; color: #22d3ee; }
body.desk .portal-main { padding: 32px 36px 64px; }
body.desk .portal-main h1 { margin-bottom: 8px; }
body.desk .stat,
body.desk .panel,
body.desk table {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
body.desk .stat-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
body.desk .stat span { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
body.desk .stat b {
  margin-top: 6px;
  color: #0f172a;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
}
body.desk .panel { padding: 22px; }
body.desk label.field,
body.desk th {
  color: #0e7490;
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
body.desk td { font-size: 0.875rem; font-weight: 400; }
body.desk input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]),
body.desk select,
body.desk textarea {
  background: #fff;
  color: #142126;
  border: 1px solid #d5e0ea;
  border-radius: 10px;
  box-shadow: none;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
}
body.desk input:focus,
body.desk select:focus,
body.desk textarea:focus { outline: none; border-color: #22d3ee; }
body.desk .btn,
body.desk button.btn {
  background: #0e7490;
  border-color: #0e7490;
  color: white;
  border-radius: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: none;
}
body.desk .btn:hover,
body.desk button.btn:hover { background: #155e75; border-color: #0e7490; color: white; }
body.desk .btn.small { font-size: 0.875rem; }
body.desk table { border-collapse: separate; overflow: hidden; }
body.desk th {
  background: #f4fafb;
  color: #0e4d73;
}
body.desk td { border-bottom-color: #e6eef5; }
body.desk .flash { margin: 0 0 16px; }
body.desk a { color: #0e7490; }
body.desk .muted { color: #5c6d7e; }
@media (max-width: 980px) {
  body.desk .side { min-height: 0; }
  body.desk .side form { margin-top: 12px; }
  body.desk .portal-main { padding: 20px 16px 48px; }
}
body.public .detail .spec-group .feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  row-gap: 0;
  margin: 0;
  padding: 6px 18px 10px;
  list-style: none;
}
body.public .detail .spec-group .feature-list li {
  position: relative;
  padding: 5px 0 5px 14px;
}
body.public .detail .spec-group .feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #0e7490;
}
@media (max-width: 640px) {
  body.public .detail .spec-group .feature-list { grid-template-columns: 1fr; }
}
body.desk .wizard-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
body.desk .wizard-steps button {
  width: 100%;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 8px 4px;
  color: #5c6d7e;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
body.desk .wizard-steps button.is-on {
  background: #0e7490;
  border-color: #0e7490;
  color: #fff;
}
body.desk .wizard-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
body.desk .wizard-nav .btn.ghost,
body.desk .wizard-nav .btn.ghost:hover {
  background: #fff;
  color: #142126;
  border: 1px solid #d5e0ea;
}
body.desk .wizard-panel h2 { margin: 8px 0 0; }
body.desk .field-errors { margin: 0; padding-left: 18px; color: #b42318; }
body.desk .photo-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
body.desk .photo-tile {
  position: relative;
  margin: 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  cursor: grab;
}
body.desk .photo-tile.is-dragging { opacity: 0.45; }
body.desk .photo-tile img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}
body.desk .photo-tile.is-cover::before {
  content: "Cover";
  position: absolute;
  top: 8px;
  left: 8px;
  background: #0e7490;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
body.desk .photo-tile figcaption {
  display: flex;
  gap: 4px;
  padding: 6px;
}
body.desk .photo-tile figcaption button {
  flex: 1;
  background: #f4f8fb;
  border: 0;
  border-radius: 8px;
  padding: 6px 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 980px) {
  body.desk .wizard-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.desk .photo-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.chat-window {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 22px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
.chat-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 460px;
}
.chat-list {
  overflow: auto;
  border-right: 1px solid #e6eef5;
  background: #f8fbfc;
}
.chat-empty { margin: 0; padding: 18px; color: #5c6d7e; font-size: 0.875rem; }
.chat-person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid #e6eef5;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: #142126;
}
.chat-person.is-on { background: #fff; box-shadow: inset 3px 0 0 #0891b2; }
.chat-person-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.92rem;
}
.chat-status { font-size: 0.75rem; color: #5c6d7e; font-weight: 600; }
.chat-status.is-on { color: #15803d; }
.chat-sub { font-size: 0.75rem; color: #5c6d7e; }
.presence {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  flex: none;
}
.presence.is-on { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }
.chat-pane { display: flex; flex-direction: column; min-width: 0; min-height: 460px; }
.chat-pane-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #e6eef5;
}
.chat-pane-head strong { font-size: 0.95rem; }
.chat-log {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: #f4f8fb;
}
.bubble {
  max-width: min(75%, 460px);
  padding: 8px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
}
.bubble p { margin: 0; white-space: pre-wrap; font-size: 0.9rem; }
.bubble time { display: block; margin-top: 4px; font-size: 0.7rem; color: #5c6d7e; }
.bubble.mine { margin-left: auto; background: #0e7490; border-color: #0e7490; color: #fff; }
.bubble.mine time { color: #f0f9fb; }
.chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 12px;
  border-top: 1px solid #e6eef5;
  background: #fff;
}
.chat-form textarea { min-height: 46px; resize: vertical; }
@media (max-width: 800px) {
  .chat-layout { grid-template-columns: 1fr; }
  .chat-list { max-height: 180px; border-right: 0; border-bottom: 1px solid #e6eef5; }
  .chat-pane, .chat-layout { min-height: 0; }
  .chat-log { min-height: 280px; }
}

/* ---------- Compare ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.card-shell { position: relative; display: flex; flex-direction: column; min-width: 0; }
.card-shell > .card { flex: 1; }
.compare-toggle { margin: 0; }
.compare-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 7px;
  border: 1px solid #cbd5e1; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); color: #0f172a;
  font-size: 0.74rem; font-weight: 600; line-height: 1.2; cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.compare-btn:hover { border-color: #22d3ee; }
.compare-btn:focus-visible { outline: 2px solid #0891b2; outline-offset: 2px; }
.compare-btn[disabled] { opacity: 0.6; cursor: progress; }
.compare-box {
  width: 15px; height: 15px; flex: none;
  border: 1.5px solid #94a3b8; border-radius: 4px; background: #fff;
  display: inline-grid; place-items: center;
}
.compare-btn[aria-pressed="true"] { background: #ecfeff; border-color: #0e7490; color: #0e7490; }
.compare-btn[aria-pressed="true"] .compare-box { background: #0e7490; border-color: #0e7490; }
.compare-btn[aria-pressed="true"] .compare-box::after {
  content: ""; width: 7px; height: 4px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.compare-toggle.on-card { position: absolute; top: 10px; right: 10px; z-index: 2; }
.compare-toggle.on-detail .compare-btn {
  width: 100%; justify-content: center; padding: 9px 12px; border-radius: 10px;
  font-size: 0.88rem; box-shadow: none;
}

.compare-tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(15, 23, 42, 0.97); color: #e2e8f0;
  border-top: 1px solid rgba(34, 211, 238, 0.35);
  box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.25);
  backdrop-filter: blur(8px);
}
.compare-tray-inner { display: flex; align-items: center; gap: 18px; min-height: 72px; padding-block: 8px; }
.compare-tray-count { display: flex; flex-direction: column; line-height: 1.2; flex: none; }
.compare-tray-count strong { font-family: "Outfit", sans-serif; font-size: 1rem; color: #fff; }
.compare-tray-count span { font-size: 0.78rem; color: #67e8f9; }
.compare-tray-items { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
.compare-tray-items li {
  position: relative; display: flex; align-items: center; min-width: 0; max-width: 260px; flex: 1;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px;
}
.compare-tray-items li.is-empty { border-style: dashed; background: transparent; min-height: 56px; max-width: 120px; }
.compare-tray-thumb { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 30px 4px 4px; text-decoration: none; color: #f8fafc; }
.compare-tray-thumb img { width: 64px; height: 48px; object-fit: cover; border-radius: 7px; flex: none; }
.compare-tray-title { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compare-tray-items form { position: absolute; top: 4px; right: 4px; margin: 0; }
.compare-tray-remove {
  width: 22px; height: 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 0.95rem; line-height: 22px; padding: 0;
}
.compare-tray-remove:hover { background: #0e7490; }
.compare-tray-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.compare-tray-actions form { margin: 0; }
.compare-tray-actions .text-btn { color: #cbd5e1; font-size: 0.82rem; }
.compare-tray-actions .text-btn:hover { color: #fff; }
body.has-compare-tray { padding-bottom: 76px; }
.compare-toast {
  position: fixed; left: 50%; bottom: 92px; z-index: 40; transform: translateX(-50%);
  max-width: min(92vw, 520px); padding: 10px 16px; border-radius: 10px;
  background: #0f172a; color: #a5f3fc; border: 1px solid rgba(34, 211, 238, 0.4);
  font-size: 0.88rem; font-weight: 500; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.3);
}
.compare-toast.is-error { background: #450a0a; color: #fecaca; border-color: #b91c1c; }
body:not(.has-compare-tray) .compare-toast { bottom: 24px; }

.compare-page { padding-bottom: 56px; }
.compare-head .section-head { align-items: end; }
.compare-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.compare-head-actions form { margin: 0; }
.compare-diff-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 500; color: #334155; cursor: pointer; }
.compare-hint { color: #0e7490; font-weight: 500; }
.compare-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 56px 24px !important; color: #0e7490; }
.compare-empty h2 { color: #0f172a; margin: 8px 0 0; }
.compare-empty p { max-width: 46ch; }
.compare-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
.compare-scroll:focus-visible { outline: 2px solid #0891b2; outline-offset: 2px; }
table.compare-table {
  width: min(100%, calc(200px + var(--cols, 3) * 460px));
  min-width: calc(180px + var(--cols, 3) * 250px);
  border: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed;
  box-shadow: none; background: transparent;
}
.compare-table th, .compare-table td {
  padding: 12px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid #eef2f6; font-size: 0.92rem; color: #0f172a;
}
.compare-table td + td, .compare-table th.compare-boat + th.compare-boat { border-left: 1px solid #eef2f6; }
.compare-table th[scope="row"], .compare-table .compare-corner {
  position: sticky; left: 0; z-index: 1; width: 180px;
  background: #f8fafc; border-right: 1px solid #e2e8f0;
  font-family: "Inter", sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: #475569;
}
.compare-table .compare-corner { vertical-align: bottom; }
.compare-legend { display: flex; gap: 8px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.78rem; color: #536175; line-height: 1.35; }
.compare-legend i { width: 12px; height: 12px; margin-top: 2px; flex: none; border-radius: 3px; background: #cffafe; box-shadow: inset 0 0 0 1px #67e8f9; }
.compare-boat { padding-top: 16px !important; padding-bottom: 18px !important; }
.compare-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: #d5e4ee; margin-bottom: 12px; }
.compare-photo img { width: 100%; height: 100%; object-fit: cover; }
.compare-photo form { position: absolute; top: 8px; right: 8px; margin: 0; }
.compare-remove {
  width: 32px; height: 32px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(15, 23, 42, 0.72); color: #fff; font-size: 1.15rem; line-height: 32px; padding: 0;
}
.compare-remove:hover { background: #0e7490; }
.compare-title {
  display: block; margin: 4px 0 2px; text-decoration: none; color: #0f172a;
  font-family: "Outfit", sans-serif; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
}
.compare-title:hover { color: #0e7490; }
.compare-boat .price { font-size: 1.25rem; }
.compare-table tr.is-diff td { background: #f0fdff; }
.compare-table tr.is-diff th[scope="row"] { background: #ecfeff; box-shadow: inset 3px 0 0 #22d3ee; color: #0e7490; }
.compare-table.diff-only tr.is-same { display: none; }
.compare-actions-row td { border-bottom: 0; }
.compare-actions-row form { margin: 10px 0 0; text-align: center; }
.compare-remove-text { color: #536175 !important; font-size: 0.82rem; text-decoration: underline; }

@media (max-width: 640px) {
  .compare-tray-inner { gap: 10px; min-height: 64px; }
  .compare-tray-count span { display: none; }
  .compare-tray-title, .compare-tray-items li.is-empty { display: none; }
  .compare-tray-items { gap: 6px; }
  .compare-tray-items li { flex: none; max-width: none; }
  .compare-tray-thumb { padding: 3px; }
  .compare-tray-thumb img { width: 56px; height: 42px; }
  .compare-tray-items form { top: -7px; right: -7px; }
  .compare-tray-remove { background: #334155; }
  .compare-tray-actions { gap: 10px; margin-left: auto; }
  .compare-tray-actions .text-btn { display: none; }
  body.has-compare-tray { padding-bottom: 68px; }
  .compare-toast { bottom: 80px; }
  table.compare-table { min-width: calc(112px + var(--cols, 3) * 210px); }
  .compare-table th[scope="row"], .compare-table .compare-corner { width: 112px; padding: 10px; font-size: 0.66rem; }
  .compare-table th, .compare-table td { padding: 10px 12px; font-size: 0.86rem; }
  .compare-legend { font-size: 0.7rem; }
  .compare-head .section-head { flex-direction: column; align-items: flex-start; }
  .compare-toggle.on-card { top: 8px; right: 8px; }
}
/* The global table rule clips overflow, which stops the label column from sticking. */
table.compare-table { overflow: visible; border-radius: 0; }
.compare-table th.compare-boat {
  text-transform: none; letter-spacing: normal; font-weight: 400;
  background: #fff; font-size: 0.92rem; color: #0f172a;
}
.compare-table th.compare-boat .kicker { font-size: 0.68rem; }
@media (max-width: 640px) {
  .compare-tray-count { display: none; }
  .compare-tray-items { flex: 1; }
  .compare-tray-actions .btn { padding-inline: 12px; white-space: nowrap; }
}

/* Smaller hero photograph on phones. Matches the preload in home.blade.php. */
@media (max-width: 640px) {
  body.public .hero {
    background:
      linear-gradient(to bottom, rgba(9, 13, 22, 0.4), rgba(9, 13, 22, 0.82)),
      url("/images/stock/hero-800w.webp") center 42% / cover no-repeat;
  }
}

/* ---------- Boat search: filter groups, live results, mobile sheet ---------- */
.search-hero { padding-top: 8px; }
.filters-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.filters-body { display: flex; flex-direction: column; gap: 12px; }
.filters:focus { outline: none; }
/* Mobile-only controls (the public theme's .btn display rule is more specific than a bare class). */
.filters-head .filters-close, .search-toolbar .btn.filters-open, .filters-actions .btn.filters-apply { display: none; }
.filter-group { border: 0; border-top: 1px solid #e2e8f0; margin: 2px 0 0; padding: 12px 0 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.filter-group legend, .filter-group .range-label {
  padding: 0; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #5d7082;
}
.filter-group legend { float: left; width: auto; }
.filter-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.filter-group-head legend { float: none; }
.filter-group .range-label { display: block; margin-top: 2px; }
.unit-suffix { color: #0e7490; text-transform: none; letter-spacing: 0; font-weight: 600; }
.range-row { display: flex; flex-direction: column; gap: 6px; }
.filters .split { gap: 8px; grid-template-columns: 1fr 1fr; }
label.field.compact { gap: 5px; font-size: 0.62rem; }
label.field.compact input, label.field.compact select { min-height: 38px; height: 38px; padding-block: 6px; }
.unit-switch { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 999px; overflow: hidden; background: #fff; }
.unit-switch label { position: relative; cursor: pointer; }
.unit-switch input { position: absolute; opacity: 0; pointer-events: none; }
.unit-switch span { display: block; padding: 3px 11px; font-size: 0.74rem; font-weight: 600; color: #475569; }
.unit-switch label:has(:checked) span { background: #0f172a; color: #fff; }
.unit-switch label:has(:focus-visible) span { outline: 2px solid #22d3ee; outline-offset: -2px; }
.filters-actions { display: flex; gap: 10px; }
.filters-actions .btn { flex: 1; }
.filters-clear[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.search-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 0 0 12px; }
.search-toolbar .sort-field select { min-width: 170px; }
.filters-badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: #0e7490; color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0;
}
.filters-badge[hidden] { display: none; }
.empty-results { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.empty-results .btn { width: auto; }
.search-results { transition: opacity 0.15s ease; }

/* Desktop: show the whole filter form. The page scrolls; the column does not clip. */
@media (min-width: 981px) {
  .search-layout > form > .filters { position: static; max-height: none; overflow: visible; }
}
/* With live results the Update button is redundant on wider screens. */
@media (min-width: 768px) {
  html.js .filters-submit { display: none; }
  html.js .filters-actions .filters-clear { flex: 1; }
}

/* Skeleton shimmer while results load. */
.skeleton-card { border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; background: #fff; }
.skeleton-card .sk-media { aspect-ratio: 4 / 3; }
.skeleton-card .sk-body { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.skeleton-card .sk-line { display: block; height: 11px; border-radius: 6px; }
.skeleton-card .sk-media, .skeleton-card .sk-line {
  background: linear-gradient(90deg, #e8eef3 0%, #f5f8fa 40%, #e8eef3 80%);
  background-size: 300% 100%;
  animation: sk-shimmer 1.1s ease-in-out infinite;
}
@keyframes sk-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton-card .sk-media, .skeleton-card .sk-line { animation: none; }
}

/* Mobile: sticky Filters + Sort bar, filters in a full-height sheet. */
@media (max-width: 767px) {
  html.js .search-toolbar {
    position: sticky; top: var(--header-h, 68px); z-index: 15;
    justify-content: space-between;
    margin: 0 -16px 12px; padding: 10px 16px;
    background: rgba(244, 248, 251, 0.96); backdrop-filter: blur(8px);
    border-bottom: 1px solid #e2e8f0;
  }
  html.js .search-toolbar .btn.filters-open { display: inline-flex; align-items: center; gap: 8px; width: auto; min-height: 40px; height: 40px; padding-inline: 14px; }
  html.js .search-toolbar .sort-field { gap: 8px; }
  html.js .search-toolbar .sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  html.js .search-toolbar .sort-field select { min-width: 0; width: auto; max-width: 52vw; height: 40px; min-height: 40px; }
  html.js .search-hero { padding-block: 18px 6px; }
  html.js .search-hero p { display: none; }
  html.js .search-layout { padding-top: 0; gap: 0; }
  html.js .search-layout > form { order: 2; }
  html.js .search-main { order: 1; }

  html.js .search-layout > form > .filters {
    position: fixed; inset: 0; z-index: 70;
    display: flex; flex-direction: column; gap: 0;
    padding: 0; border-radius: 0; border: 0; box-shadow: none;
    max-height: none; overflow: hidden;
    transform: translateY(100%); visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  html.js [data-search].filters-open > form > .filters {
    transform: none; visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
  }
  html.js .filters-head { padding: 14px 16px; border-bottom: 1px solid #e2e8f0; }
  html.js .filters-close {
    display: inline-grid; place-items: center; width: 40px; height: 40px;
    border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #0f172a; cursor: pointer;
  }
  html.js .filters-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 20px; -webkit-overflow-scrolling: touch; }
  html.js .filters-actions {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #e2e8f0; background: #fff;
    box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.06);
  }
  html.js .filters-actions .filters-submit { display: none; }
  html.js .filters-actions .filters-apply { display: inline-flex; flex: 2; justify-content: center; }
  html.js .filters-actions .filters-clear { flex: 1; }
  body.sheet-open { overflow: hidden; }
  body.sheet-open .compare-tray, body.sheet-open .compare-toast { visibility: hidden; }
}

/* ---------- Marina profile page ---------- */
.text-link { color: #0e7490; font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.small { font-size: 0.82rem; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
html:has(.marina-page) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.marina-page) { scroll-behavior: auto; } }

.marina-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(460px, 62vh, 640px);
  display: flex; align-items: flex-end;
  background: #0f172a; color: #fff;
}
.marina-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.marina-hero--placeholder { background: radial-gradient(120% 140% at 85% 10%, #0e7490 0%, #0f172a 55%, #090d16 100%); }
.marina-hero-pattern { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.marina-hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(9, 13, 22, 0.6) 0%, rgba(9, 13, 22, 0) 26%),
    linear-gradient(90deg, rgba(9, 13, 22, 0.72) 0%, rgba(9, 13, 22, 0.35) 45%, rgba(9, 13, 22, 0) 70%),
    linear-gradient(0deg, rgba(9, 13, 22, 0.9) 0%, rgba(9, 13, 22, 0.5) 45%, rgba(9, 13, 22, 0.12) 80%);
}
.marina-hero-inner { padding-block: 28px 40px; width: 100%; }
.marina-hero .crumbs { position: absolute; top: 18px; }
body.public .marina-hero .crumbs a, .marina-hero .crumbs li, body.public .marina-hero .crumbs [aria-current="page"] { color: rgba(255, 255, 255, 0.86); }
.marina-hero .crumbs li:not(:last-child)::after { color: rgba(255, 255, 255, 0.5); }
.marina-hero-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
body.public .marina-hero .kicker {
  color: #a5f3fc; padding: 4px 10px; border-radius: 999px;
  background: rgba(9, 13, 22, 0.55); border: 1px solid rgba(165, 243, 252, 0.35);
}
.marina-hero-location, .marina-hero-tagline { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
.marina-hero .org-logo.tiny { width: 30px; height: 30px; border-radius: 8px; border: 0; }
body.public .marina-hero h1 { color: #fff; font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.02; margin: 0 0 10px; letter-spacing: -0.03em; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.marina-hero-location { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: rgba(255, 255, 255, 0.86); font-weight: 500; }
.marina-hero-tagline { max-width: 640px; margin: 0 0 22px; font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.marina-facts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px;
  max-width: 760px; margin: 0 0 24px; padding: 0;
}
.marina-facts:has(> .marina-fact:nth-child(5)) .marina-fact dd { font-size: 1.3rem; }
@media (min-width: 641px) and (max-width: 1180px) {
  .marina-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 520px; }
}
@media (max-width: 640px) {
  .marina-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marina-facts > .marina-fact:nth-child(5):last-child { grid-column: 1 / -1; }
}
.marina-fact {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; min-width: 0;
  padding: 10px 16px; border-radius: 12px;
  background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.marina-fact dt { font-size: 0.74rem; color: rgba(226, 232, 240, 0.85); letter-spacing: 0.02em; }
.marina-fact dd { margin: 0; font-family: var(--display); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.marina-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.marina-hero-actions .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding-inline: 1.2rem; }
body.public .btn.ghost-light { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.55); color: #fff; }
body.public .btn.ghost-light:hover { background: #fff; color: #0f172a; border-color: #fff; }

.marina-subnav {
  position: sticky; top: var(--header-h, 80px); z-index: 12;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #e2e8f0;
}
.marina-subnav.is-stuck { box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08); }
.marina-subnav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; }
.marina-subnav ul { display: flex; flex: 0 1 auto; min-width: 0; gap: 4px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.marina-subnav ul::-webkit-scrollbar { display: none; }
.marina-subnav a[data-subnav-link] {
  display: block; padding: 16px 12px 14px; white-space: nowrap;
  color: #334155; font-weight: 600; font-size: 0.92rem; text-decoration: none;
  border-bottom: 2px solid transparent;
}
.marina-subnav a[data-subnav-link]:hover { color: #0e7490; }
.marina-subnav a[aria-current] { color: #0e7490; border-bottom-color: #0e7490; }
.marina-section { scroll-margin-top: calc(var(--header-h, 80px) + 64px); padding-block: 48px 8px; }
.marina-section .section-head { flex-wrap: wrap; align-items: baseline; row-gap: 4px; }
.marina-section .section-head h2 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); }
.marina-page > .marina-section:last-child { padding-bottom: 72px; }

/* About section and contact card: see "Marina about section" below. */

.facility-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.facility { display: flex; align-items: center; gap: 12px; padding: 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; }
.facility-icon-wrap { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: #ecfeff; color: #0e7490; }
.facility-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.facility-label { font-weight: 600; color: #0f172a; font-size: 0.95rem; line-height: 1.25; }
.facility-note { font-size: 0.8rem; color: #536175; }

.marina-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(150px, 220px)); gap: 10px; }
.gallery-tile { position: relative; display: block; overflow: hidden; border-radius: 14px; background: #e2e8f0; cursor: zoom-in; }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-tile:hover img { transform: scale(1.035); }
.gallery-tile:focus-visible { outline: 3px solid #22d3ee; outline-offset: 2px; }
.gallery-tile.is-large { grid-row: span 2; }
.marina-gallery.count-1 { grid-template-columns: 1fr; grid-template-rows: minmax(260px, 440px); }
.marina-gallery.count-2 { grid-template-columns: 2fr 1fr; }
.marina-gallery.count-2 .gallery-tile:not(.is-large) { grid-row: span 2; }
.marina-gallery.count-3 { grid-template-columns: 2fr 1fr; }
.marina-gallery.count-4 { grid-template-columns: 2fr 1fr 1fr; }
.marina-gallery.count-4 .gallery-tile:nth-child(4) { grid-column: span 2; }
.gallery-more {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  background: rgba(15, 23, 42, 0.55); color: #fff; font-family: var(--display); font-size: 1.7rem; font-weight: 600;
}
.gallery-more span { font-family: inherit; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em; }

.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(5, 9, 18, 0.96); color: #fff; overflow: hidden;
}
.lightbox::backdrop { background: rgba(5, 9, 18, 0.9); }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
html.lightbox-open { overflow: hidden; }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.lightbox-count { font-size: 0.9rem; color: rgba(226, 232, 240, 0.9); font-variant-numeric: tabular-nums; }
.lightbox-stage { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 72px 28px; min-height: 0; touch-action: pan-y; }
.lightbox-stage img { max-width: 100%; max-height: calc(100dvh - 140px); object-fit: contain; border-radius: 6px; transition: opacity 0.2s ease; user-select: none; -webkit-user-drag: none; }
.lightbox-stage img.is-loading { opacity: 0.35; }
.lightbox-stage figcaption { color: rgba(226, 232, 240, 0.92); font-size: 0.95rem; text-align: center; max-width: 70ch; }
.lightbox-btn {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; cursor: pointer;
}
.lightbox-btn:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox-btn:focus-visible { outline: 3px solid #22d3ee; outline-offset: 2px; }
.lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }
.lightbox-btn[hidden] { display: none; }

@media (max-width: 980px) {
}
@media (max-width: 767px) {
  .marina-hero { min-height: 540px; }
  .marina-hero-inner { padding-block: 64px 26px; }
  .marina-fact { min-width: 0; flex: 1 1 calc(50% - 10px); padding: 9px 12px; }
  .marina-fact dd { font-size: 1.2rem; }
  .marina-hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .marina-subnav { position: static; }
  .marina-subnav-cta { display: none; }
  .marina-section { padding-block: 36px 4px; }
  .facility-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .facility { padding: 10px; gap: 10px; }
  .facility-icon-wrap { width: 38px; height: 38px; }
  .facility-label { font-size: 0.86rem; }
  .marina-gallery, .marina-gallery.count-2, .marina-gallery.count-3, .marina-gallery.count-4 {
    grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-auto-rows: 120px;
  }
  .gallery-tile.is-large { grid-column: span 2; grid-row: auto; height: 230px; }
  .marina-gallery.count-2 .gallery-tile:not(.is-large) { grid-column: span 2; grid-row: auto; }
  .marina-gallery.count-4 .gallery-tile:nth-child(4) { grid-column: span 2; }
  .lightbox-stage { padding: 0 8px 20px; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 18px; transform: none; width: 44px; height: 44px; }
  .lightbox-stage img { max-height: calc(100dvh - 170px); }
}

/* Marina profile editor (portal and admin) */
.form-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.form-head h2 { margin: 0; }
.form-section { border: 0; border-top: 1px solid var(--line-ink); margin: 6px 0 0; padding: 16px 0 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.form-section legend { font-weight: 600; font-size: 1rem; padding: 0 8px 0 0; }
.hero-edit { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.hero-edit-preview img, .hero-edit-empty { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--line-ink); }
.hero-edit-empty { display: grid; place-items: center; padding: 16px; text-align: center; font-size: 0.85rem; color: var(--muted); background: repeating-linear-gradient(135deg, #f8fafc 0 10px, #f1f5f9 10px 20px); }
.facility-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.facility-check { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line-ink); border-radius: 10px; cursor: pointer; background: #fff; font-size: 0.92rem; }
.facility-check:has(:checked) { border-color: #0e7490; background: #ecfeff; }
.facility-check .facility-icon { color: #0e7490; flex: 0 0 auto; }
.photo-upload { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; padding: 14px; border: 1px dashed var(--line-ink); border-radius: 12px; }
.photo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.photo-item { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--line-ink); border-radius: 12px; background: #fff; }
.photo-thumb { position: relative; }
.photo-thumb img { width: 160px; height: 100px; object-fit: cover; border-radius: 8px; display: block; }
.photo-pos { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: rgba(15, 23, 42, 0.8); color: #fff; font-size: 0.75rem; font-weight: 700; }
.photo-hero-badge { position: absolute; bottom: 6px; left: 6px; padding: 2px 8px; border-radius: 999px; background: #0e7490; color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; }
.photo-alt { display: flex; gap: 8px; align-items: end; }
.photo-alt .field { flex: 1; }
.photo-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.photo-actions form { margin: 0; }
.btn.danger { background: #fff; color: #b42318; border-color: #f0c6c6; }
.btn.danger:hover { background: #b42318; color: #fff; border-color: #b42318; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 900px) {
  .hero-edit, .photo-upload { grid-template-columns: minmax(0, 1fr); }
  .photo-item { grid-template-columns: 120px minmax(0, 1fr); }
  .photo-thumb img { width: 120px; height: 80px; }
  .photo-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .photo-item { grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "thumb actions" "alt alt"; align-items: start; }
  .photo-thumb { grid-area: thumb; }
  .photo-actions { grid-area: actions; grid-column: auto; align-self: center; }
  .photo-alt { grid-area: alt; }
}

/* Portal theme buttons for the gallery manager */
body.desk .photo-manager .btn.ghost { background: #fff; color: #0f172a; border-color: #cbd5e1; }
body.desk .photo-manager .btn.ghost:hover:not(:disabled) { border-color: #0e7490; color: #0e7490; }
body.desk .photo-manager .btn.danger { background: #fff; color: #b42318; border-color: #f0c6c6; }
body.desk .photo-manager .btn.danger:hover { background: #b42318; color: #fff; border-color: #b42318; }
body.desk .marina-profile-form .field .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Marina about section: the marina's own words as a quote on a photo */
.marina-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 384px); gap: clamp(28px, 4vw, 56px); align-items: start; }
.marina-about { min-width: 0; }
.about-head { margin-bottom: 18px; }
.about-eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  font-family: "Inter", sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #0e7490;
}
.about-eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: currentColor; }
body.public .marina-about .about-head h2, body.public .broker-map-head h2 {
  margin: 0; max-width: 34ch; text-wrap: balance;
  font-family: "Outfit", "Avenir Next", sans-serif; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: #0f172a;
}

.about-stage {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(18px, 3.2vw, 40px); border-radius: 20px; background: #0b2530;
}
.about-stage-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.about-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, rgba(8, 47, 73, 0.18), rgba(2, 12, 18, 0.5));
}
.about-stage--plain { background: radial-gradient(120% 140% at 0% 0%, #155e75 0%, #0b2530 55%, #071114 100%); }

.about-quote {
  position: relative; margin: 0; max-width: 64ch;
  padding: 34px clamp(22px, 3.4vw, 46px) 26px;
  color: #f1f5f9; border-radius: 16px;
  background: rgba(7, 17, 24, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.about-quote-mark {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  font-family: Georgia, "Times New Roman", serif; font-size: 7rem; line-height: 1; color: #22d3ee; opacity: 0.4;
}
.about-quote-mark--open { top: -6px; left: 12px; }
.about-quote-mark--close { right: 14px; bottom: -58px; }

.about-scroll {
  position: relative; z-index: 1; margin: 0; padding: 6px 14px 6px 0;
  max-height: 360px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(103, 232, 249, 0.45) transparent;
  border-radius: 6px;
}
.about-scroll::-webkit-scrollbar { width: 6px; }
.about-scroll::-webkit-scrollbar-thumb { background: rgba(103, 232, 249, 0.45); border-radius: 6px; }
.about-scroll::-webkit-scrollbar-track { background: transparent; }
.about-scroll:focus-visible { outline: 2px solid #67e8f9; outline-offset: 6px; }
.about-scroll.fade-bottom { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); }
.about-scroll.fade-top { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 48px); mask-image: linear-gradient(to bottom, transparent, #000 48px); }
.about-scroll.fade-top.fade-bottom {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 48px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 48px, #000 calc(100% - 56px), transparent);
}

.about-lead p { margin: 0 0 1em; font-size: 1.08rem; line-height: 1.66; color: #fff; text-wrap: pretty; }
.about-lead strong { font-weight: 700; }
.about-body { font-size: 1.03rem; line-height: 1.72; color: rgba(241, 245, 249, 0.88); text-wrap: pretty; }
.about-lead a, .about-body a { color: #67e8f9; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(103, 232, 249, 0.5); }
.about-lead a:hover, .about-body a:hover { text-decoration-color: currentColor; }
.about-lead a:focus-visible, .about-body a:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; border-radius: 2px; }
.about-body > :first-child { margin-top: 0; }
.about-body > :last-child { margin-bottom: 0; }
.about-body p { margin: 0 0 1em; }
.about-body strong { color: #fff; font-weight: 600; }
body.public .about-body h3, body.public .about-body h4 {
  display: flex; align-items: center; gap: 12px; margin: 1.5em 0 0.55em;
  font-family: "Outfit", "Avenir Next", sans-serif; font-size: 1.08rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #fff;
}
.about-body h3::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.18); }
.about-body ul, .about-body ol { margin: 0 0 1em; padding: 0; list-style: none; }
.about-body li { position: relative; margin: 0.45em 0; padding-left: 1.6em; }
.about-body ul > li::before {
  content: ""; position: absolute; left: 0.3em; top: 0.66em; width: 0.4em; height: 0.4em;
  border-radius: 2px; background: #22d3ee; transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.22);
}
.about-body ol { counter-reset: about-list; }
.about-body ol > li { counter-increment: about-list; padding-left: 2em; }
.about-body ol > li::before {
  content: counter(about-list); position: absolute; left: 0; top: 0.2em; display: grid; place-items: center; width: 1.5em; height: 1.5em;
  border-radius: 50%; background: rgba(34, 211, 238, 0.18); color: #a5f3fc; font-size: 0.8em; font-weight: 700; line-height: 1;
}
.about-body blockquote { margin: 1.2em 0; padding-left: 1em; border-left: 2px solid #22d3ee; color: #fff; }
.about-quote-by {
  position: relative; z-index: 1; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em; color: rgba(226, 232, 240, 0.85);
}

.about-highlights { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.about-highlight { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; }
.about-highlight-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #ecfeff; color: #0e7490; }
.about-highlight-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.about-highlight-text strong { font-family: "Outfit", "Avenir Next", sans-serif; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; color: #0f172a; overflow-wrap: anywhere; }
.about-highlight-text span { font-size: 0.78rem; color: #536175; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .about-quote { background: rgba(7, 17, 24, 0.84); }
}

/* Contact and practical details card */
.marina-info {
  position: sticky; top: calc(var(--header-h, 80px) + 74px);
  padding: 4px 22px 20px; background: #fff; border: 1px solid #e2e8f0; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 22px 44px -24px rgba(15, 23, 42, 0.22);
}
body.public .marina-info .info-title { margin: 0; padding: 18px 0 14px; font-family: "Outfit", "Avenir Next", sans-serif; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; color: #0f172a; }
.info-group { padding: 16px 0; border-top: 1px solid #edf1f5; }
.info-group:last-child { padding-bottom: 2px; }
body.public .info-group h3 { margin: 0 0 10px; font-family: "Inter", sans-serif; font-size: 0.72rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: #536175; }
.info-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.info-row { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; margin: 0 -8px; padding: 6px 8px; border-radius: 12px; }
.info-row:has(a.info-value):hover { background: #f8fafc; }
.info-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #f1f5f9; color: #0e7490; }
.info-row:has(a.info-value):hover .info-icon { background: #ecfeff; }
.info-text { display: flex; flex-direction: column; min-width: 0; }
.info-label { font-size: 0.75rem; line-height: 1.3; color: #536175; }
.info-value { font-size: 0.95rem; font-weight: 500; line-height: 1.4; color: #0f172a; overflow-wrap: anywhere; }
a.info-value { color: #0e7490; font-weight: 600; text-decoration: none; }
a.info-value::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
a.info-value:focus-visible { outline: none; }
a.info-value:focus-visible::after { outline: 3px solid #22d3ee; outline-offset: -2px; }
.info-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.info-directions { display: inline-flex; align-items: center; gap: 8px; }
.info-map { display: inline-flex; align-items: center; gap: 5px; font-size: 0.9rem; }
table.hours-table { width: 100%; border: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible; border-collapse: separate; border-spacing: 0; font-size: 0.92rem; }
.hours-table th, .hours-table td { padding: 9px 10px; vertical-align: baseline; border-bottom: 1px dashed #e2e8f0; background: none; font-size: 0.92rem; }
.hours-table th { text-align: left; font-weight: 500; letter-spacing: 0; text-transform: none; color: #475569; white-space: nowrap; }
.hours-table td { text-align: right; color: #0f172a; font-variant-numeric: tabular-nums; }
.hours-table td.hours-note { text-align: left; font-size: 0.86rem; color: #536175; }
.hours-table tr:last-child > * { border-bottom: 0; }
.hours-table tr.is-today > * { background: #ecfeff; border-bottom-color: transparent; color: #0f172a; font-weight: 600; }
.hours-table tr.is-today > :first-child { border-radius: 10px 0 0 10px; }
.hours-table tr.is-today > :last-child { border-radius: 0 10px 10px 0; }
.today-badge {
  display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: #155e75; color: #fff;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.5; text-transform: uppercase; vertical-align: 1px;
}

/* In-page nav: scrolls sideways when the labels do not fit, with faded edges */
.marina-subnav ul.fade-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
.marina-subnav ul.fade-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 44px); mask-image: linear-gradient(to right, transparent, #000 44px); }
.marina-subnav ul.fade-start.fade-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}

@media (max-width: 980px) {
  .marina-overview { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .marina-info { position: static; }
}
@media (max-width: 767px) {
  body.public .marina-about .about-head h2, body.public .broker-map-head h2 { font-size: 1.35rem; }
  .about-head { margin-bottom: 14px; }
  /* A band of the photo shows above the panel so it reads as a photo, not a frame. */
  .about-stage { padding: 88px 12px 12px; border-radius: 16px; }
  .about-stage::before { background: linear-gradient(180deg, rgba(2, 12, 18, 0) 0, rgba(2, 12, 18, 0.15) 88px, rgba(2, 12, 18, 0.55) 100%); }
  .about-stage--plain { padding-top: 14px; }
  .about-quote { padding: 28px 16px 18px 18px; border-radius: 12px; }
  .about-quote-mark { font-size: 4.6rem; }
  .about-quote-mark--open { top: -4px; left: 8px; }
  .about-quote-mark--close { right: 10px; bottom: -38px; }
  .about-scroll { max-height: min(52vh, 360px); padding-right: 10px; }
  .hours-table th, .hours-table td { padding-inline: 8px; }
  .hours-table td { overflow-wrap: anywhere; }
  .hours-table th { white-space: normal; }
  .hours-table .today-badge { display: block; width: fit-content; margin: 4px 0 0; }
  .about-lead p { font-size: 1.03rem; }
  .about-body { font-size: 0.97rem; line-height: 1.68; }
  .about-highlights { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .about-highlight { gap: 10px; padding: 10px; border-radius: 12px; }
  .about-highlight-icon { width: 34px; height: 34px; border-radius: 10px; }
  .about-highlight-text strong { font-size: 1rem; }
  .about-highlight-text span { font-size: 0.74rem; }
  .marina-info { padding: 2px 16px 16px; border-radius: 16px; }
  .marina-subnav a[data-subnav-link] { padding-inline: 10px; }
}

/* Permanent (monthly / annual) berths: cards, badges, enquiry form, search tabs */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.perm-card {
  display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.perm-card[data-state="full"] { background: #fbfcfd; }
.perm-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.perm-card-name { min-width: 0; }
body.public .perm-card-name h3 { margin: 0; font-family: "Outfit", "Avenir Next", sans-serif; font-size: 1.12rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: #0f172a; }
.perm-card-name p { margin: 2px 0 0; font-size: 0.84rem; color: #536175; }
.avail-badge {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; line-height: 1.3; white-space: nowrap; border: 1px solid transparent;
}
.avail-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.avail-badge--available { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.avail-badge--soon { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.avail-badge--waitlist { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
.avail-badge--full { background: #f1f5f9; color: #536175; border-color: #e2e8f0; }

.perm-size { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid #e6eef5; border-radius: 12px; overflow: hidden; }
.perm-size > div { padding: 9px 10px; border-right: 1px solid #e6eef5; min-width: 0; }
.perm-size > div:last-child { border-right: 0; }
.perm-size dt { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; color: #536175; }
.perm-size dd { margin: 2px 0 0; font-weight: 600; color: #0f172a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.perm-size dd span { display: block; font-size: 0.78rem; font-weight: 500; color: #536175; }

.perm-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.perm-price p { margin: 0; }
.perm-price strong { font-family: "Outfit", "Avenir Next", sans-serif; font-weight: 600; letter-spacing: -0.01em; color: #0f172a; font-variant-numeric: tabular-nums; }
.perm-price span { font-size: 0.84rem; color: #536175; }
.perm-price-main strong { font-size: 1.5rem; }
.perm-price-alt strong { font-size: 1.02rem; }

.perm-includes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.perm-includes li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 999px; background: #f0fdfa; color: #115e59; font-size: 0.78rem; font-weight: 500; }
.perm-includes li svg { flex: none; color: #0d9488; }
.perm-includes li.is-no { background: #f8fafc; color: #536175; }
.perm-includes li.is-no svg { color: #536175; }
.perm-terms { margin: 0; font-size: 0.86rem; color: #334155; }
.perm-note { margin: -6px 0 0; font-size: 0.8rem; line-height: 1.45; color: #536175; }
.perm-card-foot { margin-top: auto; padding-top: 2px; }
.perm-card-foot .btn { width: 100%; justify-content: center; }
.perm-full-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: #f8fafc; color: #536175; font-size: 0.86rem; text-align: center; }
.perm-general { margin: 18px 0 0; color: #475569; }
body.public .perm-card .btn.ghost { background: #fff; color: #0e7490; border: 1px solid #0e7490; }
body.public .perm-card .btn.ghost:hover { background: #ecfeff; }

/* Enquiry dialog and form */
.perm-dialog {
  width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 20px;
  background: #fff; color: #0f172a; box-shadow: 0 30px 80px -20px rgba(2, 12, 18, 0.5); overflow: auto; overscroll-behavior: contain;
}
.perm-dialog::backdrop { background: rgba(7, 17, 24, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
html.dialog-open { overflow: hidden; }
.perm-dialog-close {
  position: sticky; top: 12px; float: right; margin: 12px 12px 0 0; z-index: 2;
  display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #e2e8f0; border-radius: 50%; background: #fff; color: #334155; cursor: pointer;
}
.perm-dialog-close:hover { background: #f1f5f9; }
.perm-dialog-close:focus-visible { outline: 3px solid #22d3ee; outline-offset: 2px; }
.enq-form { display: grid; gap: 14px; }
.enq--sheet .enq-form, .enq--page .enq-form, .enq--sheet .enq-success, .enq--page .enq-success { padding: 26px 28px 24px; }
.enq-head { display: grid; gap: 3px; }
.enq--sheet .enq-head { padding-right: 40px; }
.enq-kicker { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #0e7490; }
body.public .enq-title { margin: 0; font-family: "Outfit", "Avenir Next", sans-serif; font-size: 1.4rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: #0f172a; }
.enq-sub { margin: 0; font-size: 0.88rem; line-height: 1.45; color: #536175; }
.enq-errors { margin: 0; padding: 9px 12px; border-radius: 10px; background: #fef2f2; color: #b91c1c; font-size: 0.88rem; border: 1px solid #fecaca; }
.enq-fieldset { margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid #edf1f5; min-width: 0; display: grid; gap: 12px; }
.enq-fieldset[hidden] { display: none; }
.enq-fieldset legend { padding: 0 8px 0 0; font-family: "Outfit", "Avenir Next", sans-serif; font-size: 1rem; font-weight: 600; color: #0f172a; }
.enq-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.enq .optional { font-weight: 500; letter-spacing: 0; text-transform: none; color: #536175; }
.enq .optional[hidden] { display: none; }
.enq [aria-invalid="true"] { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }
.field-error { font-size: 0.8rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: #b91c1c; }
.field-error[hidden] { display: none; }
.enq-term { display: flex; flex-direction: column; gap: 7px; }
.enq-term > span:first-child { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #0e7490; }
.enq-term-options { display: flex; gap: 8px; }
.enq-term-options label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control, 40px); padding: 0 12px;
  border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; font-size: 0.92rem; font-weight: 500; color: #0f172a; cursor: pointer;
}
.enq-term-options label:has(:checked) { border-color: #0e7490; background: #ecfeff; color: #0e7490; }
.enq-term-options input { accent-color: #0e7490; margin: 0; }
.enq textarea { resize: vertical; min-height: 4.6em; }
.enq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.enq-privacy { margin: 0; font-size: 0.8rem; color: #536175; }
.enq-submit[disabled] { opacity: 0.7; cursor: progress; }
.enq-success { display: grid; justify-items: start; gap: 8px; outline: none; }
.enq-success[hidden], .enq-form[hidden] { display: none; }
.enq-success p { margin: 0; color: #334155; line-height: 1.5; }
.enq-success-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #ecfdf5; color: #047857; }
.enq-success .btn { margin-top: 6px; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.enq-page { padding-block: 22px 64px; }
.enq-page .crumbs { margin-bottom: 14px; }
.enq-page-card { max-width: 780px; background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; }

/* Hero contact card: on the right of the hero from 1024px, below it on smaller screens */
.hero-enquiry-card {
  background: #fff; color: #0f172a; border: 1px solid #e2e8f0; border-radius: 18px; padding: 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.hero-enquiry { padding-block: 18px 6px; }
.enq--hero .enq-form { gap: 11px; }
body.public .enq--hero .enq-title { font-size: 1.22rem; }
.enq--hero .enq-sub { font-size: 0.84rem; }
.enq--hero label.field { gap: 5px; }
.enq--hero input, .enq--hero select { min-height: 40px; height: 40px; }
.enq--hero textarea { min-height: 0; height: 74px; }
.enq--hero .enq-submit { width: 100%; justify-content: center; }
.enq--hero .enq-privacy { width: 100%; text-align: center; font-size: 0.76rem; }
@media (min-width: 1024px) {
  .marina-top { display: grid; grid-template-areas: "stack"; }
  .marina-top > .marina-hero, .marina-top > .hero-enquiry { grid-area: stack; }
  .marina-top > .marina-hero { min-height: clamp(560px, 66vh, 680px); }
  .marina-top .marina-hero-inner { padding-right: calc(370px + 56px + var(--gutter, 24px)); }
  .hero-enquiry { position: relative; z-index: 1; padding: 0; display: flex; align-items: flex-end; pointer-events: none; }
  .hero-enquiry-inner { display: flex; justify-content: flex-end; padding-block: 58px 34px; }
  .hero-enquiry-card {
    width: 370px; pointer-events: auto; padding: 18px 20px 16px;
    background: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: 0 24px 60px -24px rgba(2, 8, 20, 0.6);
  }
  .marina-top .marina-hero-shade {
    background:
      linear-gradient(180deg, rgba(9, 13, 22, 0.6) 0%, rgba(9, 13, 22, 0) 26%),
      linear-gradient(90deg, rgba(9, 13, 22, 0.72) 0%, rgba(9, 13, 22, 0.35) 50%, rgba(9, 13, 22, 0.15) 75%, rgba(9, 13, 22, 0.35) 100%),
      linear-gradient(0deg, rgba(9, 13, 22, 0.9) 0%, rgba(9, 13, 22, 0.5) 45%, rgba(9, 13, 22, 0.12) 80%);
  }
}

/* Berth search: Visitor | Permanent */
.berth-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-width: 640px; margin-top: 18px; padding: 5px; background: #e8eef3; border-radius: 16px; }
.berth-tab { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; color: #334155; text-decoration: none; }
.berth-tab strong { font-size: 0.98rem; font-weight: 600; color: #0f172a; }
.berth-tab span { font-size: 0.8rem; line-height: 1.3; color: #536175; }
.berth-tab:hover { background: rgba(255, 255, 255, 0.6); }
.berth-tab.is-active { background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1); }
.berth-tab.is-active strong { color: #0e7490; }
.berth-tab:focus-visible { outline: 3px solid #22d3ee; outline-offset: 2px; }
.perm-fit { display: flex; gap: 8px; min-width: 0; }
body.public .perm-filters .perm-fit .field { min-width: 0; width: 96px; }
body.public .perm-filters .field input, body.public .perm-filters .field select { width: 100%; min-width: 0; }
body.public .perm-filters .field[data-wide] { min-width: 210px; }
.perm-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; }
.perm-facts > div { display: flex; flex-direction: column-reverse; gap: 1px; min-width: 150px; padding: 10px 16px; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0; }
.perm-facts dt { font-size: 0.76rem; color: #536175; }
.perm-facts dd { margin: 0; font-family: "Outfit", "Avenir Next", sans-serif; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; color: #0f172a; font-variant-numeric: tabular-nums; }
.perm-count { margin: 0 0 14px; }
.perm-marina { padding: 22px 0 26px; border-top: 1px solid #e2e8f0; }
.perm-marina:first-of-type { border-top: 0; padding-top: 6px; }
.perm-marina-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
body.public .perm-marina-head h2 { margin: 0; font-size: 1.3rem; }
.perm-marina-head .meta { margin: 2px 0 0; }
.perm-empty { padding: 36px 20px; text-align: center; background: #fff; border: 1px dashed #cbd5e1; border-radius: 16px; }

@media (max-width: 767px) {
  .perm-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .perm-card { padding: 16px; gap: 12px; }
  .perm-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; }
  .enq--sheet .enq-form, .enq--page .enq-form, .enq--sheet .enq-success, .enq--page .enq-success { padding: 20px 16px 28px; }
  .enq--sheet .enq-grid-2, .enq--page .enq-grid-2 { gap: 10px; }
  .hero-enquiry { padding-block: 16px 0; }
  .hero-enquiry-card { padding: 16px; border-radius: 16px; }
  .enq-fieldset .enq-grid-2 > .enq-term { grid-column: 1 / -1; }
  .berth-tabs { max-width: none; }
  .berth-tab { padding: 9px 10px; }
  .berth-tab span { font-size: 0.74rem; }
  body.public .perm-filters .field { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .perm-fit { flex: 1 1 100%; }
  body.public .perm-filters .perm-fit .field { flex: 1; width: auto; }
  .perm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .perm-facts > div { min-width: 0; padding: 8px 10px; }
  .perm-facts dt { font-size: 0.7rem; line-height: 1.25; }
  .perm-facts dd { font-size: 1.1rem; }
  .perm-filters .btn { flex: 1 1 100%; }
  .perm-marina-head { flex-direction: column; align-items: flex-start; }
}

/* Portal: permanent berth bands and the marina inbox */
body.desk .split3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.desk .desk-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }
body.desk .desk-toolbar p { margin: 0; max-width: 68ch; }
body.desk .desk-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body.desk .link-button { padding: 0; border: 0; background: none; color: #b91c1c; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
body.desk .desk-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 8px; padding: 0 6px; border-radius: 999px; background: #0e7490; color: #fff; font-size: 0.72rem; font-weight: 700; }
body.desk .perm-desk-table tr.is-hidden td { opacity: 0.6; }
body.desk .perm-desk-avail { display: flex; gap: 6px; align-items: center; }
body.desk .perm-desk-avail select { flex: 0 0 140px; width: 140px; min-width: 0; }
body.desk .perm-desk-avail input[type="number"] { flex: 0 0 64px; width: 64px; min-width: 0; }
body.desk .perm-desk-actions { white-space: nowrap; }
body.desk .perm-desk-actions form { display: inline; margin-left: 12px; }
body.desk .perm-desk-includes { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 12px; }
body.desk .perm-desk-includes legend { padding: 0 6px; font-weight: 600; }
body.desk .filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 14px; }
body.desk .filter-row .field { min-width: 200px; }
body.desk .enq-desk-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
body.desk .enq-desk-counts a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #334155; text-decoration: none; font-size: 0.88rem; }
body.desk .enq-desk-counts a span { color: #536175; font-variant-numeric: tabular-nums; }
body.desk .enq-desk-counts a.is-on { border-color: #0e7490; background: #ecfeff; color: #0e7490; }
body.desk .enq-desk-table td { vertical-align: top; }
body.desk .enq-desk-table tr.is-new td:first-child { box-shadow: inset 3px 0 0 #0891b2; }
body.desk .enq-desk-message { max-width: 34ch; white-space: pre-line; line-height: 1.45; }
body.desk .enq-desk-status select { width: auto; min-width: 120px; }
.enq-type-tag { display: inline-block; margin-bottom: 4px; padding: 2px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; background: #f1f5f9; color: #334155; }
.enq-type-tag--visitor { background: #ecfeff; color: #0e7490; }
.enq-type-tag--permanent { background: #eef2ff; color: #4338ca; }
.enq-status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: #f1f5f9; color: #334155; }
.enq-status--new { background: #ecfeff; color: #0e7490; }
.enq-status--offered { background: #eef2ff; color: #3730a3; }
.enq-status--accepted { background: #ecfdf5; color: #047857; }
.enq-status--declined { background: #fef2f2; color: #b91c1c; }
.avail-dot { display: inline-flex; align-items: center; gap: 5px; margin: 2px 8px 2px 0; font-size: 0.82rem; white-space: nowrap; }
.avail-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #10b981; }
.avail-dot--soon::before { background: #3b82f6; }
.avail-dot--waitlist::before { background: #f59e0b; }
.avail-dot--full::before { background: #94a3b8; }
@media (max-width: 767px) {
  body.desk .split3 { grid-template-columns: minmax(0, 1fr); }
  body.desk .perm-desk-avail { flex-wrap: wrap; }
}
/* Keep a focused field clear of the sticky header when errors scroll it into view. */
.enq input, .enq select, .enq textarea, .enq-errors, .enq-success { scroll-margin-top: 130px; }

/* ---------- Booking requests: guests pay the marina directly ---------- */
.form-error { margin: 0; padding: 10px 12px; background: #fdf0f0; border-left: 3px solid #b91c1c; color: #7f1d1d; font-size: 0.9rem; }
.form-ok { margin: 0; padding: 10px 12px; background: #eaf5f2; border-left: 3px solid var(--sea); color: var(--ink); font-size: 0.9rem; }
.booking-request h2 { margin: 0 0 4px; }
.booking-request p.small { margin: 0; line-height: 1.45; }
.booking-request input[aria-invalid="true"] { border-color: #b91c1c; box-shadow: 0 0 0 1px #b91c1c inset; }
.booking-request input, .booking-request textarea { scroll-margin-top: 130px; }
.stay-dates { list-style: none; margin: -4px 0 0; padding: 0; display: grid; gap: 4px; font-size: 0.82rem; }
.stay-dates li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; background: var(--foam); }
.stay-dates li b { font-weight: 600; }
.stay-dates li.confirmed b, .stay-dates li.full b { color: var(--danger); }
.stay-dates li.few b { color: #b45309; }
.stay-dates li.open b { color: var(--sea); }
.stay-dates li b small { font-weight: 500; color: var(--muted); font-size: 0.78rem; }
.stay-dates-note { margin: -2px 0 0; }
.field-hint { display: block; margin-top: -8px; font-size: 0.78rem; color: var(--muted); }
.loa-split { grid-template-columns: 1.6fr 1fr; }
.price-preview .quote-lines { width: 100%; border-collapse: collapse; margin: 4px 0 2px; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.price-preview .quote-lines td { padding: 3px 0; vertical-align: top; border: 0; background: none; }
.price-preview .quote-lines td:last-child { text-align: right; white-space: nowrap; padding-left: 10px; }
.price-preview .quote-lines tr.discount td:last-child { color: #15803d; }
.price-preview .quote-lines tr.total td { border-top: 1px solid rgba(22, 50, 74, 0.25); padding-top: 6px; font-weight: 700; font-size: 0.95rem; }
.price-preview .quote-error[hidden], .price-preview .quote-lines[hidden], .price-preview .quote-msg[hidden] { display: none; }
.price-preview.is-loading .quote-lines { opacity: 0.55; }
.price-rules { margin-top: 18px; padding: 14px 16px; background: var(--foam); border-left: 3px solid var(--sea); }
.price-rules h2 { font-size: 1.05rem; margin: 0 0 6px; }
.price-rules ul { margin: 0 0 8px; padding-left: 18px; }
.price-rules li { margin: 2px 0; }
.price-rules p { margin: 0; }
.capacity-note { margin: 6px 0 0; }
.stay-dates li.requested b { color: var(--muted); font-weight: 500; }
.pay-direct { display: grid; gap: 3px; padding: 10px 12px; background: var(--foam); border-left: 3px solid var(--sea); }
.pay-direct b { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sea); }
.pay-direct span { font-size: 0.92rem; }

.status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; line-height: 1.6; background: #eef1f2; color: var(--ink); white-space: nowrap; }
.status-pill.requested { background: #fff4dd; color: #7a4b00; }
.status-pill.confirmed { background: #e2f3ee; color: #155e54; }
.status-pill.declined, .status-pill.cancelled { background: #f3e6e6; color: #7f1d1d; }
.status-pill.paid { background: var(--sea); color: #fff; }
.status-pill.legacy { background: #eef1f2; color: var(--muted); font-weight: 500; }
.status-pill.off { background: #eef1f2; color: var(--muted); }

.booking-page { padding-bottom: 40px; }
.booking-page h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 4px 0 18px; }
.booking-sent { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; margin: 6px 0 22px; background: #eaf5f2; border-left: 4px solid var(--sea); }
.booking-sent h1 { margin: 0 0 4px; font-size: 1.6rem; }
.booking-sent p { margin: 0; color: var(--ink); }
.booking-sent-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--sea); color: #fff; display: grid; place-items: center; }
.booking-sent-icon svg { width: 20px; height: 20px; }
.booking-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 14px; }
.booking-status-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.facts-list { margin: 0; display: grid; }
.facts-list > div { display: grid; grid-template-columns: 42% 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.facts-list > div:last-child { border-bottom: 0; }
.facts-list dt { color: var(--muted); font-size: 0.9rem; }
.facts-list dd { margin: 0; font-weight: 500; }
.booking-pay { display: grid; gap: 12px; }
.booking-pay h2 { margin: 0; font-size: 1.25rem; }
.booking-pay p { margin: 0; }
.next-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.booking-papers, .booking-papers-desk { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
.booking-papers { padding-top: 4px; }
.booking-papers b { flex-basis: 100%; font-size: 0.92rem; }
.booking-papers a, .booking-papers-desk a { font-weight: 600; }
.pay-amount { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 12px; background: var(--foam); }
.pay-amount span { color: var(--muted); font-size: 0.9rem; }
.pay-amount b { font-size: 1.35rem; }
.pay-instructions { padding: 10px 12px; border-left: 3px solid var(--line); background: #fafbfb; white-space: normal; }
.booking-contact { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.92rem; }
.btn.full { width: 100%; justify-content: center; text-align: center; }
@media (max-width: 760px) {
  .booking-grid { grid-template-columns: 1fr; }
  .facts-list > div { grid-template-columns: 40% 1fr; }
}

/* Portal: request actions and payment settings */
.req-actions { display: grid; gap: 6px; justify-items: start; min-width: 190px; }
.req-actions form { margin: 0; }
.req-confirm { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; }
.req-amount { display: grid; gap: 2px; font-size: 0.75rem; color: var(--muted); }
body.desk .req-amount input { width: 110px; min-height: 32px; padding: 4px 8px; }
.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.pay-method { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.pay-method input { margin: 0; }
.stripe-connect { display: flex; justify-content: space-between; gap: 14px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border: 1px dashed var(--line); background: #fafbfb; }
.stripe-connect.is-live { border-style: solid; border-color: rgba(31, 111, 102, 0.35); background: #f2f8f6; }
.stripe-connect-text { display: grid; gap: 4px; justify-items: start; max-width: 60ch; }
.stripe-connect-text p { margin: 0; }
.stripe-connect-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.desk-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.req-actions .btn.ghost, body.desk .req-actions .btn.ghost { background: transparent; color: var(--ink); border: 1px solid rgba(20, 33, 38, 0.25); box-shadow: none; }
.req-actions .btn.ghost:hover { border-color: var(--ink); }
.req-confirm { flex-wrap: nowrap; }
body.desk .req-actions .req-amount input { width: 104px; min-width: 0; }
@media (max-width: 700px) {
  body.desk .enq-desk-table { min-width: 640px; }
}

/* Teams: org switcher, role pills, team page */
body.desk .desk-org { margin: 18px 0 14px; padding: 0 4px; }
body.desk .desk-org-type { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5fd4e6; }
body.desk .desk-org-name { display: block; color: #fff; font-size: 15px; margin-top: 2px; }
body.desk .desk-me { margin: 6px 0 0; color: rgba(255,255,255,.72); font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
body.desk .org-switch select { width: 100%; margin-top: 4px; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; padding: 7px 8px; font: inherit; font-size: 13px; }
body.desk .org-switch select option { color: #142126; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.role-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; background: #e6eef0; color: #2c4650; }
.role-pill.owner { background: #dff3ea; color: #17643f; }
.role-pill.manager { background: #e1effa; color: #1d5a8a; }
.role-pill.staff { background: #fdf1d8; color: #87560d; }
.role-pill.viewer { background: #eceef1; color: #4b5560; }
body.desk .team-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
body.desk .team-main, body.desk .team-side { display: grid; gap: 18px; min-width: 0; }
body.desk .team-grid .panel h2 { margin: 0 0 12px; font-size: 17px; }
body.desk .team-grid .panel h2 .muted { font-weight: 500; font-size: 14px; }
body.desk .team-grid .panel h3 { margin: 18px 0 8px; font-size: 15px; }
body.desk .team-table select { width: auto; min-width: 120px; padding: 6px 8px; }
body.desk .team-table tr.is-expired td { opacity: .6; }
body.desk .team-actions { display: flex; gap: 6px; flex-wrap: wrap; }
body.desk .team-invite { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: 10px; align-items: end; }
body.desk .team-invite .btn { height: 42px; }
body.desk .role-legend { margin: 0; display: grid; gap: 10px; }
body.desk .role-legend div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: baseline; }
body.desk .role-legend dd { margin: 0; color: #3d5159; }
body.desk .activity { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
body.desk .activity li { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid rgba(20,33,38,.08); font-size: 14px; }
body.desk .activity li:last-child { border-bottom: 0; padding-bottom: 0; }
body.desk .activity-who { font-weight: 600; }
body.desk .team-me .check { display: flex; gap: 8px; align-items: center; font-weight: 600; }
body.desk .team-me .check input { width: auto; }
body.desk .role-note { display: flex; gap: 12px; align-items: center; margin-top: 16px; }
body.desk .role-note p { margin: 0; }
body.desk .role-quick { margin-top: 16px; }
body.desk .role-links { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
body.desk .by-line { margin-top: 2px; }
.invite-shell .auth-card form { margin: 0; }
@media (max-width: 1000px) {
  body.desk .team-grid { grid-template-columns: 1fr; }
  body.desk .team-invite { grid-template-columns: 1fr; }
}
body.desk .team-main, body.desk .team-side { grid-template-columns: minmax(0, 1fr); }
body.desk .btn.ghost { background: transparent; color: var(--ink, #142126); border: 1px solid rgba(20, 33, 38, 0.25); box-shadow: none; }
body.desk .btn.ghost:hover { border-color: var(--ink, #142126); }
body.desk .side .btn.ghost { color: #fff; border-color: rgba(255,255,255,.3); }
body.desk .team-actions { flex-wrap: nowrap; }
body.desk .org-switch { margin-top: 2px; position: relative; }
body.desk .org-switch summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; }
body.desk .org-switch summary::-webkit-details-marker { display: none; }
body.desk .org-switch summary:hover, body.desk .org-switch[open] summary { background: rgba(255,255,255,.07); }
body.desk .org-switch .desk-org-name { margin: 0; }
body.desk .org-switch-hint { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
body.desk .org-switch-hint::after { content: " ▾"; }
body.desk .org-switch-menu { margin: 6px -8px 4px; padding: 6px; background: #fff; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.35); display: grid; gap: 2px; }
body.desk .org-switch-menu button { display: grid; gap: 1px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 7px; padding: 8px 10px; font: inherit; color: #142126; cursor: pointer; }
body.desk .org-switch-menu button span { font-weight: 600; font-size: 14px; }
body.desk .org-switch-menu button small { color: #5b6f76; font-size: 12px; }
body.desk .org-switch-menu button:hover { background: #eef5f6; }
body.desk .org-switch-menu button.is-on { background: #e3f4f7; box-shadow: inset 3px 0 0 #0f8ea6; }
.invite-shell .invite-role-text { color: rgba(255,255,255,.86); }

/* Marina Payments page: Stripe card, grouped settings, guest preview */
.stripe-card { display: grid; gap: 14px; margin: 0 0 22px; padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-left: 4px solid #635bff; }
.stripe-card.is-pending { border-left-color: #c98a12; }
.stripe-card.is-live { border-left-color: var(--sea); background: #f6faf8; }
.stripe-card p, .stripe-card ul { margin: 0; }
.stripe-card-head { display: flex; gap: 14px; align-items: center; }
.stripe-card-head h2 { margin: 0 0 4px; font-size: 1.3rem; }
.stripe-mark { display: inline-grid; place-items: center; min-width: 64px; height: 40px; padding: 0 10px; border-radius: 8px; background: #635bff; color: #fff; font: 700 1.05rem/1 var(--sans); letter-spacing: -0.02em; }
.stripe-points, .stripe-missing { padding-left: 20px; display: grid; gap: 6px; max-width: 70ch; }
.stripe-missing li::marker { color: #c98a12; }
.stripe-card-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn.big, body.desk .btn.big { min-height: 48px; padding: 0.7rem 1.4rem; font-size: 1rem; }
.btn.stripe-btn, body.desk .btn.stripe-btn { background: #635bff; border-color: #635bff; color: #fff; }
.btn.stripe-btn:hover, body.desk .btn.stripe-btn:hover { background: #4f46e5; border-color: #4f46e5; }
.stripe-card .btn.ghost, body.desk .stripe-card .btn.ghost { background: transparent; color: var(--ink); border: 1px solid rgba(20, 33, 38, 0.25); box-shadow: none; }
.stripe-card .btn.ghost.danger, body.desk .stripe-card .btn.ghost.danger { color: var(--danger); border-color: rgba(141, 46, 46, 0.35); }
.stripe-notice { padding: 10px 14px; background: #eef0ff; border: 1px solid #c9c6ff; color: #2e2a7a; }
.stripe-readonly { padding: 8px 12px; background: #f3f4f4; color: var(--muted); font-weight: 600; }
.stripe-account { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.stripe-account dt { color: var(--muted); font-size: 0.8rem; }
.stripe-account dd { margin: 0; font-weight: 600; }
.pay-settings-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 26px; }
.pay-settings-layout > :only-child { grid-column: 1 / -1; max-width: 520px; }
.pay-group { display: grid; gap: 10px; padding: 14px 0 4px; border-top: 1px solid var(--line); }
.pay-group h3 { margin: 0; font-size: 1rem; }
.pay-group p { margin: 0; }
.pay-method span small { display: block; font-size: 0.8rem; }
.pay-preview { display: grid; gap: 10px; position: sticky; top: 16px; }
.pay-preview h2 { margin: 0; }
.pay-preview p { margin: 0; }
.pay-shown { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 0.9rem; }
.pay-shown li::before { content: "✓"; display: inline-block; width: 1.3em; color: var(--sea); font-weight: 700; }
.pay-shown li.off::before { content: "–"; color: var(--muted); }
.pay-shown li.off { color: var(--muted); }
.pay-preview-box { padding: 16px; border: 1px dashed rgba(20, 33, 38, 0.25); background: var(--paper); }
.pay-preview-box h2 { font-size: 1.1rem; }
.btn.is-preview { pointer-events: none; }
.setup-card { display: grid; gap: 12px; }
.setup-card h2 { margin: 0; }
.setup-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.setup-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.setup-steps .tick { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); font-size: 0.8rem; color: transparent; }
.setup-steps li.done .tick { background: var(--sea); border-color: var(--sea); color: #fff; }
.setup-steps li.done .step-label { color: var(--muted); }
.setup-steps .step-label { font-weight: 600; }
.setup-steps .step-note { display: block; font-weight: 400; font-size: 0.85rem; color: var(--muted); }
.setup-steps li.highlight { background: #f6f5ff; margin: 0 -12px; padding: 12px; border-top-color: transparent; }
.setup-steps li.highlight .tick { border-color: #635bff; }
.admin-banner { padding: 14px 18px; margin-bottom: 18px; background: #fff7e6; border: 1px solid #f0d49b; border-left: 4px solid #c98a12; }
.admin-banner p, .admin-banner ol { margin: 4px 0 0; }
.admin-banner code { font-size: 0.85em; background: rgba(0,0,0,0.05); padding: 1px 4px; }
@media (max-width: 860px) {
  .pay-settings-layout { grid-template-columns: minmax(0, 1fr); }
  .pay-preview { position: static; }
  .stripe-card { padding: 18px; }
  .setup-steps li { grid-template-columns: 28px minmax(0, 1fr); }
  .setup-steps li .btn { grid-column: 2; justify-self: start; }
}
.stripe-card-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr); gap: 24px; align-items: start; }
.stripe-card-main { display: grid; gap: 14px; justify-items: start; }
.stripe-card-main p, .stripe-card-main ul { margin: 0; }
.stripe-steps { margin: 0; padding: 14px 16px 14px 34px; display: grid; gap: 10px; background: #f6f5ff; font-size: 0.92rem; }
.stripe-steps li::marker { color: #635bff; font-weight: 700; }
#guest-payments + h2, .pay-settings-layout ~ h2 { margin-top: 8px; }
@media (max-width: 860px) { .stripe-card-body { grid-template-columns: minmax(0, 1fr); } }
.desk-scroll td.mono { white-space: nowrap; }

/* Marina Payments (money view) */
.slim-banner { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: space-between; padding: 9px 14px; margin: 0 0 14px; background: #f6f5ff; border: 1px solid #dcd9ff; font-size: 0.92rem; }
.slim-banner a { font-weight: 600; color: #4f46e5; }
.pay-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; }
.pay-tile { display: grid; gap: 4px; align-content: start; }
.pay-tile small { font-size: 0.8rem; color: var(--muted); }
.pay-tile.is-awaiting b { color: #7a4b00; }
.pay-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 4px 0 12px; }
.pay-filters .enq-desk-counts { margin: 0; }
.pay-filter-fields { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
body.desk .pay-filter-fields input[type=search] { width: 200px; min-height: 34px; padding: 4px 10px; }
body.desk .pay-filter-fields select { width: auto; min-height: 34px; padding: 4px 28px 4px 10px; }
.pay-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.pay-table td.mono a { color: inherit; text-decoration: underline; text-decoration-color: rgba(20, 33, 38, 0.3); }
.pay-table tr.is-awaiting td:first-child { box-shadow: inset 3px 0 0 #e0a43a; }
.pay-action { min-width: 150px; }
.mark-paid summary { list-style: none; cursor: pointer; display: inline-flex; }
.mark-paid summary::-webkit-details-marker { display: none; }
.mark-paid[open] summary { background: transparent; color: var(--ink); border: 1px solid rgba(20, 33, 38, 0.25); box-shadow: none; }
.mark-paid form { display: grid; gap: 8px; margin-top: 8px; padding: 12px; min-width: 220px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(20, 33, 38, 0.08); }
.mark-paid fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 6px; }
.mark-paid legend { font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; white-space: normal; }
.mark-paid label { display: flex; gap: 8px; align-items: center; font-size: 0.9rem; cursor: pointer; }
.mark-paid p { margin: 0; }
.pay-action .btn.ghost, body.desk .pay-action .btn.ghost { background: transparent; color: var(--ink); border: 1px solid rgba(20, 33, 38, 0.25); box-shadow: none; }
.pay-empty h2 { margin-top: 0; }
.legacy-payments { margin-top: 22px; }
.legacy-payments summary { cursor: pointer; font-weight: 600; }
.legacy-payments[open] summary { margin-bottom: 10px; }
.enq-desk-table tr:target td, tr:target td { background: #fff8e6; }
@media (max-width: 860px) {
  .pay-tiles { grid-template-columns: minmax(0, 1fr); }
  .pay-filters { align-items: stretch; }
  .pay-filter-fields { width: 100%; }
  body.desk .pay-filter-fields input[type=search] { flex: 1 1 140px; width: auto; }
}
.stripe-hint { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); }
body.desk .pay-filter-fields input#pay-q { width: 220px; flex: 0 1 220px; min-height: 34px; padding: 4px 10px; }
body.desk .pay-filter-fields select#pay-method { width: auto; flex: 0 0 auto; min-height: 34px; }
.pay-filter-fields { flex-wrap: nowrap; }
.mark-paid summary.btn, body.desk .mark-paid summary.btn { background: #fff; color: var(--sea); border: 1px solid rgba(31, 111, 102, 0.45); box-shadow: none; }
.mark-paid summary.btn:hover { background: #f2f8f6; }
@media (max-width: 860px) {
  .pay-filter-fields { flex-wrap: wrap; }
  body.desk .pay-filter-fields input#pay-q { flex: 1 1 100%; width: 100%; }
}
@media (max-width: 640px) {
  .pay-table, .pay-table tbody, .pay-table tr, .pay-table td { display: block; width: 100%; }
  .pay-table thead { display: none; }
  .pay-table tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .pay-table td { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; padding: 3px 0; border: 0; }
  .pay-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 2px; }
  .pay-table td.pay-action { display: block; padding-top: 8px; }
  .pay-table td.pay-action::before { content: none; }
  .pay-table td.pay-action:empty { display: none; }
  .pay-table tr.is-awaiting td:first-child { box-shadow: none; }
  .pay-table tr.is-awaiting { box-shadow: inset 3px 0 0 #e0a43a; }
  .pay-table + * { margin-top: 0; }
}
@media (max-width: 640px) {
  .pay-table td > * { grid-column: 2; justify-self: start; }
  .pay-table td::before { grid-column: 1; grid-row: 1 / span 3; }
}
@media (max-width: 640px) { .pay-table td { row-gap: 0; } .pay-table td::before { grid-row: 1 / span 2; } }

/* Berth pricing fields + example calculator (portal, admin) */
.pricing-fields { border: 1px solid var(--line, #d8dee4); padding: 14px 16px 16px; margin: 4px 0; display: grid; gap: 12px; min-width: 0; }
.pricing-fields legend { font-weight: 700; padding: 0 6px; }
.pricing-fields > p.muted { margin: 0; }
.pricing-fields .mode-choice { display: grid; gap: 6px; }
.pricing-fields .per-metre-group, .pricing-fields .flat-group { display: grid; gap: 10px; }
.pricing-fields [hidden] { display: none !important; }
.pricing-fields .season-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 0.9rem; }
.pricing-fields .season-label { font-weight: 600; }
.pricing-fields .season-date { display: inline-flex; align-items: center; gap: 6px; }
.pricing-fields .season-date select { width: auto; min-width: 0; padding-right: 26px; }
.pricing-fields .season-rate { display: inline-flex; align-items: center; gap: 6px; }
.pricing-fields .season-rate input { width: 90px; }
.price-calculator { background: var(--foam, #eef5f7); border-left: 3px solid var(--sea, #0e5878); padding: 12px 14px; display: grid; gap: 8px; }
.price-calculator .calc-inputs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.price-calculator .calc-inputs label { display: grid; gap: 3px; font-size: 0.78rem; font-weight: 600; }
.price-calculator .calc-inputs input, .price-calculator .calc-inputs select { width: 100%; min-width: 0; }
.price-calculator .calc-lines { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.9rem; background: none; }
.price-calculator .calc-lines td { padding: 3px 0; border: 0; background: none; }
.price-calculator .calc-lines td + td { text-align: right; white-space: nowrap; padding-left: 12px; }
.price-calculator .calc-lines tr.discount td + td { color: #15803d; }
.price-calculator .calc-lines tr.total td { border-top: 1px solid rgba(22, 50, 74, 0.25); padding-top: 6px; font-weight: 700; }
.price-calculator .calc-lines tr.approx td { color: var(--muted, #5b6b78); font-size: 0.8rem; }
@media (max-width: 640px) {
    .price-calculator .calc-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.req-quote { margin-top: 6px; font-size: 0.8rem; }
.req-quote summary { cursor: pointer; color: var(--sea, #0e5878); }
.req-quote table { width: 100%; border-collapse: collapse; margin-top: 4px; font-variant-numeric: tabular-nums; }
.req-quote td { padding: 2px 0; border: 0; background: none; font-size: 0.8rem; }
.req-quote td + td { text-align: right; white-space: nowrap; padding-left: 8px; }
.req-quote tr.total td { font-weight: 700; border-top: 1px solid rgba(22, 50, 74, 0.2); }
.req-occupancy { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.req-occupancy span { font-size: 0.72rem; padding: 1px 5px; background: #e7eef2; border-radius: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.req-occupancy span.is-full { background: #fde2e1; color: #9b1c1c; font-weight: 600; }
.req-occupancy span.is-few { background: #fdf0d5; color: #8a4b08; }
.req-note { display: grid; gap: 2px; font-size: 0.78rem; }
.req-note input { font-size: 0.85rem; }
.booking-quote { margin-top: 14px; border-top: 1px solid var(--line, #d8dee4); padding-top: 10px; }
.booking-quote summary { cursor: pointer; font-weight: 600; }
.booking-quote .quote-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.booking-quote .quote-table td { padding: 4px 0; border: 0; background: none; }
.booking-quote .quote-table td + td { text-align: right; white-space: nowrap; padding-left: 12px; }
.booking-quote .quote-table tr.discount td + td { color: #15803d; }
.booking-quote .quote-table tr.total td { border-top: 1px solid rgba(22, 50, 74, 0.25); font-weight: 700; padding-top: 6px; }

/* ---------- Verified reviews ---------- */
.stars { position: relative; display: inline-block; line-height: 1; font-size: 1rem; letter-spacing: 0.06em; white-space: nowrap; vertical-align: -0.1em; }
.stars-bg { color: #cbd5e1; }
.stars-fg { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: #f59e0b; }
.stars.is-large { font-size: 1.35rem; }
.marina-hero-rating {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 6px 12px; border-radius: 999px;
  background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; text-decoration: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 0.92rem;
}
.marina-hero-rating:hover { background: rgba(15, 23, 42, 0.75); }
.marina-hero-rating .stars-bg { color: rgba(255, 255, 255, 0.35); }
.marina-hero-rating span:last-child { color: rgba(226, 232, 240, 0.9); text-decoration: underline; text-underline-offset: 3px; }
.card-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; color: inherit; text-decoration: none; }
.card-rating span:last-child { color: #536175; }
.reviews-layout { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 32px; align-items: start; }
.reviews-summary { position: sticky; top: calc(var(--header-h, 80px) + 64px); padding: 22px; border-radius: 16px; background: #fff; border: 1px solid #e2e8f0; }
.reviews-score { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.reviews-score > strong { font-family: var(--display); font-size: 3rem; line-height: 1; letter-spacing: -0.03em; }
.reviews-bars { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.reviews-bars li { display: grid; grid-template-columns: 64px 1fr 28px; align-items: center; gap: 8px; font-size: 0.86rem; }
.reviews-bar, .reviews-cat-bar { display: block; height: 8px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.reviews-bar > span, .reviews-cat-bar > span { display: block; height: 100%; background: #f59e0b; border-radius: inherit; }
.reviews-bar-count { text-align: right; color: #536175; }
.reviews-categories { margin: 0; padding-top: 14px; border-top: 1px solid #e2e8f0; display: grid; gap: 8px; }
.reviews-categories div { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 10px; font-size: 0.88rem; }
.reviews-categories dt { color: #334155; }
.reviews-categories dd { margin: 0; display: grid; grid-template-columns: 1fr 26px; align-items: center; gap: 8px; text-align: right; font-weight: 600; }
.reviews-cat-bar > span { background: #155e75; }
.reviews-list { display: grid; gap: 14px; }
.reviews-sort { display: flex; justify-content: flex-end; }
.reviews-sort label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: #475569; }
.reviews-sort select { padding: 6px 34px 6px 10px; width: auto; min-width: 150px; border-radius: 10px; border: 1px solid #cbd5e1; background: #fff; }
.review-card { padding: 20px 22px; border-radius: 16px; background: #fff; border: 1px solid #e2e8f0; }
.review-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.review-card h3 { margin: 0; font-size: 1.06rem; }
.review-meta { margin: 6px 0 10px; font-size: 0.88rem; color: #475569; }
.review-verified { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(214, 236, 230, 0.9); color: #166534; font-size: 0.78rem; font-weight: 600; }
.review-body { line-height: 1.6; color: #1e293b; }
.review-reply { margin-top: 14px; padding: 12px 16px; border-left: 3px solid #0e7490; background: #f0f9ff; border-radius: 0 12px 12px 0; font-size: 0.94rem; }
.review-reply p { margin: 6px 0 0; }
.review-report { margin-top: 10px; font-size: 0.84rem; color: #536175; }
.review-report summary { cursor: pointer; width: max-content; }
.review-report form { display: grid; gap: 8px; max-width: 420px; margin-top: 8px; }
.reviews-more { justify-self: start; }
.reviews-empty { padding: 18px 0; }
@media (max-width: 900px) {
  .reviews-layout { grid-template-columns: 1fr; }
  .reviews-summary { position: static; }
}
.review-write { padding-block: 24px 64px; }
.review-write-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.review-write h1 { margin: 4px 0 6px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.review-write-aside { display: grid; gap: 6px; }
.review-tips { margin: 8px 0 0; padding-left: 18px; color: #475569; font-size: 0.9rem; display: grid; gap: 6px; }
@media (max-width: 860px) { .review-write-grid { grid-template-columns: 1fr; } }
.star-input { border: 0; padding: 0; margin: 0; }
.star-input legend { font-weight: 600; margin-bottom: 6px; }
.star-input-row { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star-input-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input-row label { font-size: 2.1rem; line-height: 1; color: #cbd5e1; cursor: pointer; transition: color 0.12s, transform 0.12s; }
.star-input-row.is-small label { font-size: 1.4rem; }
.star-input-row label:hover, .star-input-row label:hover ~ label,
.star-input-row input:checked ~ label { color: #f59e0b; }
.star-input-row input:focus-visible + label { outline: 2px solid #0e7490; outline-offset: 2px; border-radius: 4px; }
.star-input.is-invalid legend { color: #b91c1c; }
.review-categories-input { border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 14px; }
.review-categories-input summary { cursor: pointer; font-weight: 600; }
.review-categories-input .cat-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid #f1f5f9; }
.review-categories-input .cat-row:last-child { border-bottom: 0; }
.portal-review { padding: 16px 0; border-bottom: 1px solid #e2e8f0; }
.portal-review:last-child { border-bottom: 0; }
.portal-review header { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.portal-review.is-hidden { opacity: 0.7; }
.portal-reply-form { margin-top: 10px; max-width: 640px; }
.portal-review-stats { margin-bottom: 18px; }
.review-write .review-hint { text-transform: none; letter-spacing: 0; font-weight: 400; display: block; margin-top: 4px; }

/* Berth holds */
.hold-banner { display: grid; gap: 4px; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: #fff7e6; border: 1px solid #f5d28a; color: #7a4b00; }
.hold-banner span { font-size: 0.9rem; color: #8a5a10; }
.status-pill.expired { background: #eef0f3; color: #475569; }
.hold-countdown { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: #fff7e6; color: #8a5a10; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.hold-countdown.is-soon { background: #fdecec; color: #b42318; }
.hold-countdown.is-lapsed { background: #eef0f3; color: #475569; }
.desk-sort { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; font-size: 0.85rem; }

/* Marina directory maps (progressive enhancement: hidden without JS) */
.js-map-only { display: none !important; }
html.js-map .js-map-only { display: revert !important; }
html.js-map .map-toggle.js-map-only { display: none !important; }
.marina-map { height: 360px; border-radius: 14px; border: 1px solid #dbe4ea; background: #e6eef2; overflow: hidden; z-index: 0; }
.marina-map-overview { margin: 0 0 28px; }
.marina-map-overview .marina-map { height: 380px; }
.marina-map-overview p { margin: 6px 2px 0; }
.country-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.public .country-layout.has-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 42%); gap: 20px; align-items: start; }
body.public .country-layout.has-map .directory-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.country-map-wrap { position: sticky; top: 96px; }
.country-map-wrap .marina-map { height: min(520px, calc(100vh - 140px)); min-height: 320px; }
.dir-item { position: relative; display: flex; flex-direction: column; border-radius: 14px; transition: box-shadow .15s, transform .15s; }
.dir-item > .card { flex: 1; }
.dir-item.is-highlighted { box-shadow: 0 0 0 3px #0891b2; }
.map-locate { margin-top: 6px; align-self: flex-start; background: none; border: 0; padding: 4px 2px; color: #0e7490; font-weight: 600; font-size: 0.82rem; cursor: pointer; }
.map-locate:hover, .map-locate:focus-visible { text-decoration: underline; }
.map-toggle { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 999px; padding: 2px; background: #fff; }
.map-toggle button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; font-weight: 600; font-size: 0.85rem; color: #334155; cursor: pointer; }
.map-toggle button.is-on { background: #0e7490; color: #fff; }
.marina-pin { background: none; border: 0; }
.marina-pin svg path { fill: #0891b2; stroke: #fff; stroke-width: 2; }
.marina-pin svg circle { fill: #fff; }
.marina-pin.is-active svg path, .marina-pin:hover svg path, .marina-pin:focus svg path { fill: #0e3a4a; }
.marina-pin.is-active { z-index: 1000 !important; transform-origin: bottom center; }
.marina-pin:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; border-radius: 50%; }
.marina-cluster { background: none; }
.marina-cluster span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #0e7490; color: #fff; font-weight: 700; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 0 0 4px rgba(8,145,178,.3); }
.marina-popup .leaflet-popup-content { margin: 0; width: 240px !important; }
.marina-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 12px; overflow: hidden; }
.map-card { display: block; color: inherit; text-decoration: none; }
.map-card img { display: block; width: 100%; height: 120px; object-fit: cover; }
.map-card-body { display: grid; gap: 2px; padding: 10px 12px 12px; font-size: 0.85rem; }
.map-card-body strong { font-size: 0.95rem; }
.map-card-town { color: #536175; }
.map-card-rating { color: #b45309; }
.map-card-price { font-weight: 600; }
.map-card-link { color: #0e7490; font-weight: 600; margin-top: 4px; }
@media (max-width: 860px) {
    html.js-map .map-toggle.js-map-only { display: inline-flex !important; }
    body.public .country-layout.has-map { display: block; }
    .country-layout.has-map .country-map-wrap { display: none !important; }
    .show-map .country-layout.has-map .country-map-wrap { display: block !important; position: static; }
    .show-map .country-layout.has-map .directory-grid { display: none; }
    .country-map-wrap .marina-map { height: 70vh; }
    .marina-map-overview .marina-map { height: 260px; }
}

/* Minimum nightly charge: real "from" nights with the per-metre rate as a small second line */
.fact-detail, .price-detail, .card-from small { display: block; font-size: 0.72em; font-weight: 500; color: var(--muted); margin-top: 2px; letter-spacing: 0; text-transform: none; }
.card-from { font-weight: 600; color: inherit; }
.map-card-detail { font-size: 0.78rem; color: #536175; }

/* Few marinas in a country: cards at their natural width, the map fills the rest at card height */
@media (min-width: 861px) {
    body.public .country-layout.has-map.is-few { grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
    body.public .country-layout.has-map.is-few .directory-grid { grid-template-columns: repeat(var(--cards), 240px); }
    .country-layout.is-few .country-map-wrap { position: static; }
    .country-layout.is-few .country-map-wrap, .country-layout.is-few .country-map-wrap .marina-map { height: 100%; min-height: 300px; }
}

/* ===== Premium marine look: page bands, tinted sections, image-led cards ===== */
body.public {
  --navy: #0b1626;
  --navy-2: #10223a;
  --teal: #0e7490;
  --teal-bright: #22d3ee;
  --tint-cool: #f1f5f9;
  --card-radius: 16px;
  --card-shadow: 0 1px 2px rgba(11, 22, 38, 0.06), 0 10px 26px rgba(11, 22, 38, 0.08);
  --card-shadow-hover: 0 4px 10px rgba(11, 22, 38, 0.08), 0 22px 44px rgba(11, 22, 38, 0.16);
}
/* Chart-contour pattern: a tiny inline SVG, no image request */
.page-band {
  --chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240' viewBox='0 0 480 240'%3E%3Cg fill='none' stroke='%2322d3ee' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M0 40c60-26 120 26 180 0s120-26 180 0 90 18 120 6'/%3E%3Cpath d='M0 80c60-26 120 26 180 0s120-26 180 0 90 18 120 6'/%3E%3Cpath d='M0 120c60-26 120 26 180 0s120-26 180 0 90 18 120 6'/%3E%3Cpath d='M0 160c60-26 120 26 180 0s120-26 180 0 90 18 120 6'/%3E%3Cpath d='M0 200c60-26 120 26 180 0s120-26 180 0 90 18 120 6'/%3E%3C/g%3E%3Cg fill='%2322d3ee' fill-opacity='.18'%3E%3Ccircle cx='96' cy='62' r='1.6'/%3E%3Ccircle cx='310' cy='150' r='1.6'/%3E%3Ccircle cx='420' cy='34' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  position: relative;
  color: #e2e8f0;
  background: var(--chart) 0 0 / 480px 240px repeat, linear-gradient(135deg, #0b1626 0%, #10223a 55%, #0c2a3a 100%);
  border-bottom: 1px solid rgba(34, 211, 238, 0.18);
  overflow: hidden;
}
.page-band.has-image {
  background:
    var(--chart) 0 0 / 480px 240px repeat,
    linear-gradient(100deg, rgba(11, 22, 38, 0.97) 0%, rgba(11, 22, 38, 0.9) 48%, rgba(11, 22, 38, 0.62) 100%),
    url("/images/stock/hero-800w.webp") right 40% / cover no-repeat,
    #0b1626;
}
.page-band::after { /* teal hairline glow at the bottom edge */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.55), transparent);
}
.page-band-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding-block: 40px 34px; }
.page-band.is-compact .page-band-inner { padding-block: 22px 26px; }
.page-band-copy { min-width: 0; max-width: 760px; }
.page-band-eyebrow { color: var(--teal-bright); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; }
body.public .page-band h1 { color: #fff; margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; }
.page-band-intro { margin: 10px 0 0; color: #b6c4d4; max-width: 62ch; font-size: 1rem; }
.page-band-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.page-band-stats li { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(148, 197, 222, 0.22); font-size: 0.86rem; color: #cbd5e1; }
.page-band-stats b { color: #fff; font-size: 1rem; }
.page-band-controls { flex: 0 0 auto; min-width: 240px; }
body.public .page-band .crumbs a { color: #7dd3fc; }
body.public .page-band .crumbs, body.public .page-band .crumbs [aria-current="page"] { color: #cbd5e1; }
body.public .page-band .crumbs li + li::before { color: #536175; }
.band-filter .field { color: #536175; }
body.public .band-filter select { background-color: rgba(255, 255, 255, 0.96); border-color: transparent; min-width: 240px; color: #0f172a; }
.band-chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(148, 197, 222, 0.22); color: #e2e8f0; font-size: 0.88rem; }
.listing-band-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }

/* Price chips and badges on image-led cards */
.price-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(11, 22, 38, 0.86); color: #fff; font-weight: 700; font-size: 0.9rem; line-height: 1.2; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); backdrop-filter: blur(4px); }
.price-chip small { font-weight: 500; color: #a5b4c3; font-size: 0.78em; }
.price-chip.is-large { font-size: 1.25rem; padding: 7px 14px; background: #155e75; }
.price-chip.is-large small { color: #e0f7fb; }
.card .media { position: relative; }
.card .media .price-chip { position: absolute; left: 12px; bottom: 12px; z-index: 2; }
.card .media .media-tag { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #0f172a; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.card .media::after { content: ""; position: absolute; inset: 45% 0 0 0; background: linear-gradient(to bottom, transparent, rgba(11, 22, 38, 0.55)); pointer-events: none; }
.card-badge { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 3px 9px; border-radius: 6px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--teal); }
/* Featured = paid promotion. One turquoise label everywhere (brand --teal-bright); navy text, 8.2:1 contrast. */
:root { --featured: #22d3ee; --featured-ink: #062b3a; }
.card-badge.is-featured, .kf-featured { background: var(--featured); color: var(--featured-ink); }
.kf-featured { display: inline-flex; align-items: center; gap: 4px; }
.kf-featured-star { flex: none; }
/* "Example listing": the demo boat/brokerage shown while there are no real ones. Navy on white text, 14:1. */
.card-badge.is-example { background: #0f2a44; color: #fff; }
.example-note { color: #0e7490; font-weight: 600; }
.example-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 14px; color: #475569; font-size: .9rem; }
.listing-band-meta .card-badge.is-example { background: #fff; color: #0f2a44; }
.example-card { position: relative; }
.example-card > .card-badge { z-index: 3; }
.card-badge.is-new { background: #0f766e; }
.card-badge.static { position: static; }

/* Card hierarchy, radius, shadow, hover lift */
body.public .card { border-radius: var(--card-radius); border-color: rgba(15, 23, 42, 0.07); box-shadow: var(--card-shadow); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
body.public .card:hover, body.public .card:focus-visible { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); border-color: rgba(8, 145, 178, 0.35); }
@media (prefers-reduced-motion: reduce) { body.public .card { transition: none; } body.public .card:hover { transform: none; } }
body.public .search-layout .card .media img, body.public .related-boats .card .media img { aspect-ratio: 3 / 2; height: auto; width: 100%; object-fit: cover; }
body.public .card .card-specs { color: #334155; font-weight: 500; }
body.public .card .body strong { font-size: 1.02rem; }
.card-shell .compare-toggle.on-card, .card-shell .on-card { z-index: 3; }

/* Boat search: tinted page, tinted sidebar, sticky toolbar */
body.public .search-layout { padding-block: 26px 64px; }
body.public .search-layout > form > .filters { background: linear-gradient(180deg, #f3f8fa, #eef4f2); border-color: rgba(8, 145, 178, 0.14); box-shadow: none; }
body.public .search-layout > form > .filters .filters-head h2 { font-size: 1rem; letter-spacing: 0.02em; }
body.public .search-toolbar { position: sticky; top: 72px; z-index: 5; margin: 0 0 14px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); border: 1px solid rgba(15, 23, 42, 0.07); box-shadow: 0 6px 18px rgba(11, 22, 38, 0.06); justify-content: space-between; }
body.public .search-results .results-bar { padding: 2px 4px 10px; }
.empty-state { text-align: center; padding: 44px 24px; border-radius: 18px; background: var(--chart, none), linear-gradient(135deg, #f3f8fa, #eef3f8); border: 1px dashed rgba(8, 145, 178, 0.35); color: #334155; }
.empty-state h2 { margin: 0 0 6px; font-size: 1.25rem; color: #0f172a; }
.empty-state p { margin: 0 auto 16px; max-width: 46ch; }

/* Marina directory: alternating full-width country bands with a heading strip */
.directory-sections { padding-bottom: 24px; }
.directory-sections > .marina-map-overview { padding-top: 28px; margin-bottom: 0; padding-bottom: 28px; }
.directory-sections .country-block { padding-block: 30px 34px; margin: 0; background: #fff; border-top: 1px solid rgba(15, 23, 42, 0.05); }
.directory-sections .country-block.is-tint { background: linear-gradient(180deg, #eef3f8, #f4f7fa); }
.directory-sections > .marina-map-overview + * { border-top: 0; }
body.public .search-layout { background: transparent; }
.directory-sections .country-head { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid rgba(8, 145, 178, 0.18); }
.country-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.country-title h2 { margin: 0; }
.country-flag { width: 28px; height: 20px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12); object-fit: cover; }
.country-count { padding: 3px 10px; border-radius: 999px; background: rgba(8, 145, 178, 0.1); color: #0e7490; font-size: 0.8rem; font-weight: 600; }
body.public .directory-card .card-from small { display: block; color: #475569; font-weight: 500; font-size: 0.8rem; }

/* Single listing: warm page, white panels */
body.public .listing-band + .detail { padding-top: 26px; }
body.public .detail .boat-block { background: #fff; border-radius: 18px; padding: 22px 24px; margin-top: 18px; border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: var(--card-shadow); }
body.public .detail .boat-description { margin-top: 32px; background: none; border: 0; box-shadow: none; padding: 0; }
body.public .boat-description .about-head h2 { margin: 0; font-family: "Outfit", "Avenir Next", sans-serif; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); font-weight: 600; letter-spacing: -0.02em; color: #0f172a; }
body.public .boat-description .about-quote { max-width: none; }
body.public .boat-description .about-scroll { max-height: 380px; }
body.public .detail .fact-strip { border-radius: 16px; overflow: hidden; }
body.public .detail aside .panel { border-top: 3px solid var(--teal); }

@media (max-width: 860px) {
  .page-band-inner { flex-direction: column; align-items: stretch; padding-block: 26px 24px; }
  .page-band-controls { min-width: 0; }
  body.public .band-filter select { min-width: 0; width: 100%; }
  .page-band.has-image { background: var(--chart) 0 0 / 480px 240px repeat, linear-gradient(180deg, rgba(11, 22, 38, 0.95), rgba(11, 22, 38, 0.86)), url("/images/stock/hero-400w.webp") center / cover no-repeat, #0b1626; }
  body.public .search-toolbar { top: 64px; }
  body.public .detail .boat-block { padding: 18px 16px; }
}
@media (max-width: 420px) {
  .page-band-stats li { font-size: 0.8rem; padding: 6px 10px; }
}

body.public .empty-state.empty-results { display: block; text-align: center; }
body.public .empty-state .btn { display: inline-flex; width: auto; }
@media (min-width: 861px) { body.public .search-toolbar { justify-content: flex-end; background: rgba(255, 255, 255, 0.82); } }
@media (max-width: 760px) { body.public .boat-description .about-scroll { max-height: min(52vh, 340px); } }
body.public .boat-description .overview-note { margin: 14px 0 0; color: #475569; font-size: 0.92rem; }

/* Quote panel, plain variant (boat description): solid navy, no photo, no blur */
.about-quote.about-quote--plain {
  max-width: none; border-radius: 16px; border: 0;
  background:
    var(--chart, none) 0 0 / 480px 240px repeat,
    linear-gradient(150deg, #10223a 0%, #0b1626 60%, #0a1e2b 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(11, 22, 38, 0.08), 0 14px 32px rgba(11, 22, 38, 0.16);
  padding-bottom: 30px;
}
.about-quote--plain { --chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240'%3E%3Cg fill='none' stroke='%2322d3ee' stroke-opacity='.06'%3E%3Cpath d='M0 60c60-26 120 26 180 0s120-26 180 0 90 18 120 6'/%3E%3Cpath d='M0 140c60-26 120 26 180 0s120-26 180 0 90 18 120 6'/%3E%3Cpath d='M0 220c60-26 120 26 180 0s120-26 180 0 90 18 120 6'/%3E%3C/g%3E%3C/svg%3E"); }
.about-quote--plain .about-quote-mark--close { bottom: -40px; }
body.public .boat-description .about-scroll { max-height: 420px; }
@media (max-width: 760px) { body.public .boat-description .about-scroll { max-height: min(56vh, 380px); } .about-quote--plain .about-quote-mark--close { bottom: -26px; } }
/* Both variants: breathing room around the quote marks */
body.public .about-quote { padding: 78px clamp(24px, 3.4vw, 46px) 34px; }
body.public .about-quote .about-quote-mark { font-size: 6rem; }
body.public .about-quote .about-quote-mark--open { top: 14px; left: 22px; }
body.public .about-quote .about-quote-mark--close { right: 22px; bottom: -42px; }
@media (max-width: 760px) {
  body.public .about-quote { padding: 62px 16px 26px 18px; }
  body.public .about-quote .about-quote-mark { font-size: 4.6rem; }
  body.public .about-quote .about-quote-mark--open { top: 12px; left: 16px; }
  body.public .about-quote .about-quote-mark--close { right: 16px; bottom: -30px; }
}

/* ===== Directory: maps take at most half the width ===== */
.overview-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.directory-sections > .marina-map-overview .marina-map { height: 420px; }
.overview-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.overview-side-title { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #0e7490; }
.overview-side-title + .country-jump, .top-marinas + .overview-side-title { margin-top: 6px; }
.top-marinas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.top-marina { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.07); box-shadow: var(--card-shadow); color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.top-marina:hover, .top-marina:focus-visible { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
.top-marina > img { width: 64px; height: 56px; object-fit: cover; border-radius: 10px; }
.top-marina-text { display: grid; gap: 2px; min-width: 0; }
.top-marina-text strong { font-size: 0.98rem; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-marina-text > span { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #475569; }
.top-marina-meta { display: grid; justify-items: end; gap: 2px; font-size: 0.82rem; }
.top-marina-rating { font-weight: 700; color: #92400e; }
.top-marina-from { color: #0f172a; font-weight: 600; white-space: nowrap; }
.country-flag.is-tiny { width: 16px; height: 11px; border-radius: 2px; }
.country-jump { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.country-jump a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: #fff; border: 1px solid rgba(8, 145, 178, 0.25); color: #0f172a; font-size: 0.86rem; font-weight: 600; text-decoration: none; }
.country-jump a:hover, .country-jump a:focus-visible { border-color: #0e7490; background: #ecfeff; }
.country-jump a span { color: #0e7490; font-weight: 700; }
@media (min-width: 861px) {
  body.public .country-layout.has-map,
  body.public .country-layout.has-map.is-few { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  body.public .country-layout.has-map .directory-grid,
  body.public .country-layout.has-map.is-few .directory-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); align-content: start; }
  body.public .country-layout.has-map.is-one .directory-grid { grid-template-columns: minmax(0, 300px); }
  .country-layout.has-map .country-map-wrap { position: sticky; top: 90px; align-self: start; }
  .country-layout.has-map .country-map-wrap .marina-map { height: min(420px, calc(100vh - 140px)); min-height: 300px; }
  .country-layout.is-few .country-map-wrap { position: static; align-self: stretch; }
  .country-layout.is-few .country-map-wrap .marina-map { height: 100%; min-height: 300px; max-height: 420px; }
}
@media (max-width: 860px) {
  .overview-split { grid-template-columns: 1fr; }
  .overview-side { display: none; }
  .directory-sections > .marina-map-overview .marina-map { height: 260px; }
}

/* ===== Boat listing: video + deck plans row ===== */
.media-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 26px; }
.media-row.has-two, .media-row.is-single { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } /* a lone video or plans card takes the left half */
.media-row .boat-video { margin-top: 0; }
.media-row h2 { font-size: 1.2rem; margin: 4px 0 10px; }
.video-frame.is-file { padding-top: 0; }
.video-frame.is-file video { border-radius: 0; max-height: none; aspect-ratio: 16 / 9; object-fit: cover; }
.deck-plans { min-width: 0; }
.deck-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.deck-tab { appearance: none; border: 1px solid rgba(8, 145, 178, 0.3); background: #fff; color: #0f172a; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.deck-tab:hover { border-color: #0e7490; }
.deck-tab[aria-selected="true"] { background: #155e75; border-color: #0e7490; color: #fff; }
.deck-tab:focus-visible { outline: 2px solid #0891b2; outline-offset: 2px; }
.deck-stage { display: grid; gap: 12px; }
.deck-plans.has-tabs .deck-stage { gap: 0; }
.deck-plan-link { position: relative; display: block; border-radius: 14px; overflow: hidden; background: #e8f1f6; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: var(--card-shadow); cursor: zoom-in; }
.deck-plan-link img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 520; object-fit: contain; }
.media-row .deck-plan-link img { aspect-ratio: 16 / 9; }
.deck-zoom { position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(11, 22, 38, 0.82); color: #fff; font-size: 0.78rem; font-weight: 600; }
.deck-plan-link:focus-visible { outline: 3px solid #0891b2; outline-offset: 2px; }
.deck-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px; border-radius: 14px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.1); box-shadow: var(--card-shadow); color: inherit; text-decoration: none; }
.deck-file:hover { border-color: #0e7490; }
.deck-file-icon { display: grid; place-items: center; width: 48px; height: 58px; border-radius: 8px; background: #b91c1c; color: #fff; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; }
.deck-file-text { display: grid; gap: 2px; }
.deck-file-text span { color: #475569; font-size: 0.86rem; }
.deck-file-open { color: #0e7490; font-weight: 700; font-size: 0.9rem; }
@media (max-width: 760px) { .media-row.has-two, .media-row.is-single { grid-template-columns: minmax(0, 1fr); } }
/* Lightbox zoom (deck plans) */
.lightbox-hint { color: rgba(226, 232, 240, 0.75); font-size: 0.85rem; margin-left: auto; margin-right: 12px; }
[data-zoomable] .lightbox-stage img { cursor: zoom-in; background: #fff; }
.lightbox-stage.is-zoomed { display: block; overflow: auto; padding: 0 16px 16px; touch-action: auto; }
.lightbox-stage.is-zoomed img { max-width: none; max-height: none; width: 220%; cursor: zoom-out; }
.lightbox-stage.is-zoomed figcaption { display: none; }
/* Portal deck plan manager */
.deckplan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.deckplan-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.deckplan-thumb img { width: 96px; height: 54px; object-fit: contain; background: #e8f1f6; border-radius: 6px; display: block; }
.deckplan-pdf { display: grid; place-items: center; width: 96px; height: 54px; border-radius: 6px; background: #b91c1c; color: #fff; font-weight: 800; font-size: 0.8rem; }
.deckplan-label, .deckplan-move, .deckplan-upload { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.deckplan-label input { flex: 1; min-width: 120px; }
.deckplan-upload { align-items: flex-end; gap: 12px; }
@media (max-width: 640px) { .deckplan-row { grid-template-columns: 72px minmax(0, 1fr); } .deckplan-thumb img, .deckplan-pdf { width: 72px; } }

/* ===== Deck plan designer (portal) ===== */
body.desk.is-designer .portal { grid-template-columns: 1fr; }
body.desk.is-designer .portal > aside.side { display: none; }
.designer-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 14px; }
.designer-top p { margin: 0; }
.designer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 10px; position: sticky; top: 0; z-index: 5; }
.designer-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; margin-left: 6px; }
.designer-status { margin-left: auto; font-size: 0.88rem; color: #0f766e; font-weight: 600; }
.designer-status.is-dirty { color: #b45309; }
.designer-restore { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; }
.designer-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr) 250px; gap: 14px; align-items: start; }
.designer-palette, .designer-inspector { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; position: sticky; top: 64px; }
.designer-palette h2, .designer-inspector h2 { font-size: 0.95rem; margin: 0 0 6px; }
.palette-list { display: grid; gap: 6px; }
.palette-item { appearance: none; text-align: left; padding: 7px 10px; border-radius: 8px; border: 1.5px solid #0f2a3d; background: #fff; color: #0f2a3d; font: inherit; font-size: 0.86rem; font-weight: 600; cursor: grab; }
.palette-item.is-accent { background: #ecfeff; }
.palette-item:hover, .palette-item:focus-visible { border-color: #0e7490; box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15); }
.designer-main { min-width: 0; }
.designer-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; vertical-align: top; }
[data-add-deck] { margin: 0 0 8px 6px; vertical-align: top; }
.designer-tab { appearance: none; border: 1px solid #cbd5e1; background: #fff; color: #0f172a; padding: 7px 14px; border-radius: 10px 10px 0 0; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.designer-tab[aria-selected="true"] { background: #155e75; border-color: #0e7490; color: #fff; }
.designer-tab.is-add { border-style: dashed; color: #0e7490; }
.designer-stage { position: relative; background: #e8f1f6; border: 1px solid #c7dbe6; border-radius: 12px; padding: 10px; min-height: 260px; }
.designer-canvas { display: block; width: 100%; height: auto; touch-action: none; user-select: none; outline: none; }
.designer-canvas:focus-visible { box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.35); border-radius: 8px; }
.dz-grid line { stroke: #c7dbe6; stroke-width: 0.01; }
.dz-grid line.is-major { stroke: #b3cddb; stroke-width: 0.02; }
.dz-hull { fill: #fbfdfe; stroke: #0f2a3d; stroke-width: 3; }
.dz-bow, .dz-name { fill: #0f2a3d; font-family: Inter, Helvetica, Arial, sans-serif; font-weight: 600; }
.dz-name { fill: #0e7490; }
.dz-room { cursor: move; }
.dz-room rect:first-child { fill: #fff; stroke: #0f2a3d; stroke-width: 2.2; }
.dz-room rect.is-accent { fill: #ecfeff; }
.dz-room.is-selected rect:first-child { stroke: #0891b2; stroke-width: 3; }
.dz-room.is-out rect:first-child { stroke: #b91c1c; stroke-dasharray: 6 4; }
.dz-label { fill: #0f2a3d; font-family: Helvetica, Arial, sans-serif; font-weight: 600; pointer-events: none; }
.dz-handle { fill: #fff; stroke: #0891b2; stroke-width: 2; cursor: nwse-resize; }
.dz-handle[data-handle="ne"], .dz-handle[data-handle="sw"] { cursor: nesw-resize; }
.designer-inline { position: absolute; z-index: 3; padding: 6px 8px; border: 2px solid #0891b2; border-radius: 8px; font: inherit; font-weight: 600; text-align: center; }
.designer-empty { text-align: center; padding: 26px 12px; }
.designer-empty h2 { margin: 0 0 4px; }
.template-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.template-card { appearance: none; display: grid; gap: 8px; padding: 14px; border-radius: 12px; border: 1.5px solid #cbd5e1; background: #fff; cursor: pointer; font: inherit; font-weight: 600; color: #0f172a; }
.template-card svg { width: 100%; height: 90px; }
.template-card .dz-hull { stroke-width: 2.5; }
.template-card:hover, .template-card:focus-visible { border-color: #0e7490; box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15); }
.template-card.is-suggested { border-color: #0e7490; background: #f0fdff; }
.designer-help { margin: 8px 2px 0; }
.designer-inspector .field { margin-bottom: 8px; }
.designer-dims { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.designer-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.designer-warn { margin: 4px 0; padding: 8px 10px; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 0.84rem; }
.btn.danger { color: #b91c1c; }
.designer-preview { display: none; }
.designer-preview.is-readonly { display: grid; gap: 12px; }
.designer-narrow-note { padding: 12px 14px; border-radius: 12px; background: #ecfeff; border: 1px solid #a5f3fc; color: #164e63; }
.designer-preview-item { margin: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.designer-preview-item img { display: block; width: 100%; height: auto; }
.designer-preview-item figcaption { padding: 8px 12px; font-weight: 600; }
.deckplan-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #ecfeff; color: #0e7490; font-size: 0.74rem; font-weight: 700; }
.deckplan-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
@media (max-width: 1100px) { .designer-grid { grid-template-columns: 160px minmax(0, 1fr); } .designer-inspector { grid-column: 1 / -1; position: static; } }
@media (max-width: 899px) {
  .designer { display: none; }
  .designer-preview { display: grid; gap: 12px; }
}
.designer-inspector [data-room-panel] { border-top: 1px solid #e2e8f0; margin-top: 12px; padding-top: 12px; }
.designer-inspector[hidden] { display: none; }
.palette-item:disabled { opacity: 0.45; cursor: not-allowed; }

/* ===== Legal / trust pages ===== */
@media (min-width: 981px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; } }
.link-button { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left; }
.site-footer .link-button { display: block; color: #d5e0dc; padding: 4px 0; opacity: 0.86; text-decoration: none; }
.site-footer .link-button:hover, .site-footer .link-button:focus-visible { text-decoration: underline; }
.legal-updated { margin: 10px 0 0; font-size: 0.9rem; color: #cfe3ee; }
.legal-wrap { background: #f4f8fb; padding: 28px 0 64px; }
.legal-draft { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: #eef4fb; border: 1px solid #bcd0e6; color: #1e3a5f; font-size: 0.92rem; }
.legal-lang { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: #ecfeff; border: 1px solid #a5f3fc; color: #164e63; font-size: 0.92rem; }
.legal-grid { display: grid; grid-template-columns: 250px minmax(0, 760px); gap: 40px; align-items: start; justify-content: center; }
.legal-toc { position: sticky; top: 92px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px 16px 12px; max-height: calc(100vh - 120px); overflow: auto; }
.legal-toc h2 { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: #0e7490; margin: 0 0 8px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: flex; gap: 8px; padding: 6px 8px; border-radius: 8px; color: #1e293b; text-decoration: none; font-size: 0.9rem; line-height: 1.35; }
.legal-toc a::before { content: counter(toc); color: #536175; font-variant-numeric: tabular-nums; min-width: 1.2em; }
.legal-toc a:hover, .legal-toc a:focus-visible { background: #f0f9ff; color: #0e7490; }
.legal-body { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 36px 44px; font-size: 1.02rem; line-height: 1.7; color: #1e293b; counter-reset: sec; }
.legal-body section { scroll-margin-top: 96px; padding-bottom: 8px; }
.legal-body section + section { border-top: 1px solid #eef2f6; padding-top: 18px; }
.legal-body h2 { counter-increment: sec; font-size: 1.3rem; margin: 6px 0 10px; color: #0f2a3d; }
.legal-body h2::before { content: counter(sec) ". "; color: #0e7490; }
.legal-body p, .legal-body li { max-width: 68ch; }
.legal-body ul { padding-left: 1.2em; }
.legal-body li { margin: 6px 0; }
.legal-body a { color: #0e7490; }
.legal-ph { background: #e0f2fe; color: #0c4a6e; padding: 0 4px; border-radius: 4px; font-weight: 600; font-size: 0.92em; }
.legal-note { display: inline-block; background: #e0f2fe; color: #0c4a6e; padding: 4px 10px; border-radius: 8px; font-size: 0.88rem; font-weight: 600; }
.legal-table-wrap { overflow-x: auto; }
.legal-table { width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 0.93rem; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid #e2e8f0; }
.legal-table th { background: #f1f5f9; color: #0f2a3d; font-weight: 600; }
.legal-print-note { display: none; }
.legal-consent { font-size: 0.84rem; color: #475569; margin: 6px 0 10px; }
.legal-consent a { color: #0e7490; }
.booking-trust { font-size: 0.9rem; color: #475569; }
@media (max-width: 960px) {
  .legal-grid { grid-template-columns: 1fr; gap: 16px; }
  .legal-toc { position: static; max-height: none; }
  .legal-body { padding: 24px 20px; }
}
@media print {
  .site-header, .site-footer, .legal-toc, .cookie-banner, .cookie-dialog, .legal-draft, [data-compare-tray-slot], .compare-toast { display: none !important; }
  .page-band { background: none !important; color: #000 !important; padding: 0 0 12px !important; }
  .page-band * { color: #000 !important; }
  .legal-wrap { background: none; padding: 0; }
  .legal-grid { display: block; }
  .legal-body { border: 0; padding: 0; font-size: 11pt; }
  .legal-body a { color: #000; }
  .legal-body section { break-inside: avoid-page; }
  .legal-print-note { display: block; margin-top: 24px; font-size: 9pt; color: #555; }
}

/* ===== Cookie banner and settings ===== */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 980px; margin: 0 auto; background: #0f2a3d; color: #e2edf4; border-radius: 16px; box-shadow: 0 18px 40px rgba(15, 42, 61, 0.35); padding: 18px 20px; }
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.cookie-banner h2 { font-size: 1rem; margin: 0 0 4px; color: #fff; }
.cookie-banner p { margin: 0; font-size: 0.9rem; }
.cookie-banner a { color: #67e8f9; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-banner .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, 0.45); background: transparent; }
.cookie-dialog { border: 0; border-radius: 16px; padding: 22px; max-width: 480px; width: calc(100% - 32px); box-shadow: 0 24px 60px rgba(15, 42, 61, 0.35); }
.cookie-dialog::backdrop { background: rgba(15, 23, 42, 0.55); }
.cookie-dialog h2 { margin: 0 0 12px; font-size: 1.2rem; }
.cookie-dialog fieldset { border: 0; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.cookie-cat { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 0.9rem; }
.cookie-cat b { display: block; }
.cookie-cat.is-off { opacity: 0.65; }
.video-consent { position: absolute; inset: 0; display: grid; place-items: center; background: #0f2a3d center / cover no-repeat; }
.video-consent::before { content: ""; position: absolute; inset: 0; background: rgba(15, 42, 61, 0.7); }
.video-consent iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-consent-box { position: relative; text-align: center; color: #e2edf4; padding: 16px; max-width: 420px; }
.video-consent-box p { font-size: 0.82rem; margin: 10px 0 0; }
.video-consent-box a, .video-consent-box .link-button { color: #67e8f9; }
.video-consent[data-loaded]::before { display: none; }
@media (max-width: 720px) { .cookie-banner-inner { grid-template-columns: 1fr; } .cookie-banner { left: 8px; right: 8px; bottom: 8px; } }

/* ===== About page ===== */
.about-section { padding: 56px 0; background: #fff; }
.about-section.is-tinted { background: #eef4f8; }
.about-mission { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: start; }
.about-mission h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 6px 0 0; }
.about-copy p { font-size: 1.06rem; line-height: 1.7; margin: 0 0 14px; }
.about-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.about-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 6px 18px rgba(15, 42, 61, 0.06); }
.about-card h3 { margin: 0; font-size: 1.1rem; color: #0f2a3d; }
.about-card p { margin: 0; flex: 1; line-height: 1.6; color: #334155; }
.about-card a { color: #0e7490; font-weight: 600; text-decoration: none; }
.about-values { list-style: none; padding: 0; margin: 18px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.about-values li { padding: 16px 18px; border-left: 3px solid #0e7490; background: #f8fafc; border-radius: 0 12px 12px 0; }
.about-values b { display: block; color: #0f2a3d; margin-bottom: 4px; }
.about-section a { color: #0e7490; }
.about-cta { background: #0f2a3d; color: #e2edf4; padding: 44px 0; }
.about-cta h2 { color: #fff; margin: 0 0 6px; }
.about-cta p { margin: 0; }
.about-cta-inner { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }
@media (max-width: 960px) { .about-cards { grid-template-columns: 1fr 1fr; } .about-mission { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 600px) { .about-cards, .about-values { grid-template-columns: 1fr; } }

/* ===== Guide pages (buying, selling, membership, help, journal) ===== */
.guide-section { padding: 48px 0; background: #f6f8fb; }
.guide-section.is-tinted { background: #eaf1f6; }
.guide-section h2 { color: #0f2a3d; }
.guide-narrow { max-width: 820px; }
.guide-band-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
body.public .btn.ghost.light, .btn.ghost.light { background: transparent; color: #e2e8f0; border-color: rgba(226, 232, 240, 0.45); }
body.public .btn.ghost.light:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.guide-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; }
.guide-toc ol + h2 { margin-top: 14px; }
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 820px; }
.guide-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px 24px; scroll-margin-top: 96px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.guide-step-n { width: 40px; height: 40px; border-radius: 50%; background: #0f2a3d; color: #67e8f9; display: grid; place-items: center; font-weight: 800; }
.guide-step h3 { margin: 6px 0 6px; font-size: 1.15rem; color: #0f2a3d; }
.guide-step p { margin: 0 0 8px; line-height: 1.65; color: #1e293b; max-width: 68ch; }
.guide-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.guide-links a { color: #0e7490; font-weight: 600; text-decoration: none; }
.guide-links a:hover { text-decoration: underline; }
.guide-two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.guide-checklist h2 { margin: 4px 0 14px; }
.check-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.check-list li { position: relative; padding-left: 30px; line-height: 1.5; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #cffafe; color: #0e7490; font-size: 0.8rem; font-weight: 800; display: grid; place-items: center; }
.guide-faq { margin-bottom: 28px; scroll-margin-top: 96px; }
.guide-faq h2 { margin: 0 0 14px; }
.faq-list { display: grid; gap: 10px; }
.faq-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; }
.faq-item[hidden], [data-faq-group][hidden] { display: none !important; }
.faq-item summary { cursor: pointer; padding: 16px 48px 16px 20px; font-weight: 650; color: #0f2a3d; list-style: none; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: #0e7490; }
.faq-item[open] summary::after { content: "–"; }
.faq-item summary:focus-visible { outline: 2px solid #0891b2; outline-offset: 2px; border-radius: 12px; }
.faq-answer { padding: 0 20px 16px; color: #334155; line-height: 1.65; }
.faq-answer p { margin: 0; max-width: 68ch; }
.guide-empty { background: #fff; border: 1px dashed #cbd5e1; border-radius: 12px; padding: 18px; color: #475569; }
.guide-note { margin: 20px 0 0; color: #334155; }
.guide-note a { color: #0e7490; font-weight: 600; }
.guide-cta { margin: 0; }
.help-search input { width: min(380px, 100%); padding: 13px 16px; border-radius: 12px; border: 0; font-size: 1rem; background: #fff; color: #0f172a; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; }
.plan-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 26px 28px; display: flex; flex-direction: column; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05); }
.plan-card.is-featured { border-color: #0e7490; box-shadow: 0 10px 30px rgba(8, 145, 178, 0.14); }
.plan-card h2 { margin: 4px 0 6px; }
.plan-card .btn { margin-top: auto; align-self: flex-start; }
.plan-price { margin: 4px 0 16px; color: #475569; }
.plan-price b { font-size: 2rem; color: #0f2a3d; letter-spacing: -0.02em; }
.plan-card:not(.is-featured) .plan-price b { font-size: 1.45rem; }
.plan-table td:not(:first-child), .plan-table th:not(:first-child) { text-align: center; width: 130px; }
.plan-table .yes { color: #0e7490; font-weight: 800; }
.plan-table .no { color: #536175; }
.plan-table { background: #fff; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; max-width: 460px; justify-content: flex-end; }
.chip { display: inline-flex; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(148, 197, 222, 0.28); color: #e2e8f0; text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.chip:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.chip[aria-current="page"] { background: #22d3ee; border-color: #22d3ee; color: #0b1626; }
.story-meta { margin-top: 10px; color: #536175; font-size: 0.84rem; }
.feature-story .story-meta { color: #cbd5e1; }
.journal-feature { margin-bottom: 22px; }
.story-band-inner { padding-block: 36px 34px; max-width: 860px; }
.story-band h1 { color: #fff; margin: 6px 0 10px; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem); line-height: 1.12; }
body.public .story-band .deck, .story-band .deck { color: #b6c4d4; font-size: 1.1rem; margin: 0 0 12px; max-width: 60ch; }
.story-byline { color: #536175; font-size: 0.9rem; margin: 0; }
.story-crumbs { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: #536175; }
.story-crumbs a { color: #67e8f9; text-decoration: none; font-weight: 700; }
.story-page .story-hero { margin: 28px 0 0; border-radius: 16px; overflow: hidden; aspect-ratio: 21 / 9; }
.story-page .story-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-layout { display: grid; grid-template-columns: minmax(0, 700px); justify-content: center; gap: 40px; padding: 36px 0 56px; }
.story-layout.has-toc { grid-template-columns: 230px minmax(0, 700px); }
.story-page .story-body { font-size: 1.08rem; line-height: 1.75; color: #1e293b; }
.story-page .story-body p { margin: 0 0 1.1em; max-width: 66ch; }
.story-page .story-body h2 { font-size: 1.4rem; margin: 1.6em 0 0.5em; color: #0f2a3d; scroll-margin-top: 96px; }
.story-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 28px; padding-top: 18px; border-top: 1px solid #e2e8f0; font-size: 0.92rem; }
.story-share span { font-weight: 700; color: #0f2a3d; }
.story-share a, .story-share .linkish { color: #0e7490; font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
@media (max-width: 900px) {
  .guide-grid, .story-layout.has-toc { grid-template-columns: 1fr; gap: 16px; }
  .guide-toc { display: none; }
  .story-toc { position: static; max-height: none; }
  .guide-two, .plan-grid { grid-template-columns: 1fr; }
  .page-band-inner { flex-wrap: wrap; }
  .page-band-controls { min-width: 0; width: 100%; }
  .chip-row { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .guide-section { padding: 32px 0; }
  .guide-step { grid-template-columns: 1fr; padding: 18px; gap: 8px; }
  .guide-step-n { width: 32px; height: 32px; font-size: 0.9rem; }
  .story-page .story-hero { aspect-ratio: 16 / 10; margin-top: 16px; }
  .plan-table td:not(:first-child), .plan-table th:not(:first-child) { width: 64px; }
}
@media print { .story-share, .guide-cta, .help-search, .chip-row { display: none; } }

body.public .market-bar { overflow: hidden; } /* long strap line must not widen the page on phones */
.story-layout { align-items: start; }
.story-page .story-hero { width: auto; max-width: 100%; height: auto; margin-left: 0; margin-right: 0; }

.notice.warn { padding: 12px 16px; border-radius: 10px; background: #fff7ed; border: 1px solid #fdba74; color: #7c2d12; margin: 0 0 16px; }
.booking-paused h2 { margin: 0; }
.plan-trial { display: inline-block; margin: 4px 0 0; padding: 3px 10px; border-radius: 999px; background: #cffafe; color: #0e7490; font-weight: 700; font-size: 0.82rem; }
.plan-card .plan-trial { align-self: flex-start; }

/* Unclaimed (public-data) marinas */
.marina-pin.is-unclaimed svg path { fill: #94a3b8; }
.marina-pin.is-unclaimed svg circle { fill: #e2e8f0; }
.map-card-unclaimed, .badge-unclaimed { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #e2e8f0; color: #475569; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.badge-unclaimed.is-band { margin-top: 14px; background: rgba(255,255,255,0.1); color: #cbd5e1; border: 1px solid rgba(148,197,222,0.3); text-transform: none; letter-spacing: 0; font-size: 0.85rem; padding: 5px 12px; }
.basic-listings { margin-top: 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 16px; }
.basic-listings summary { cursor: pointer; font-weight: 650; color: #0f2a3d; }
.basic-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.basic-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.basic-list a { color: #0e7490; font-weight: 600; }
.basic-list .map-locate { margin-left: auto; }
.unclaimed-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.unclaimed-hero { height: 220px; border-radius: 16px; background: linear-gradient(135deg, #e2e8f0, #f1f5f9); color: #536175; display: grid; place-items: center; align-content: center; gap: 6px; font-weight: 600; }
.unclaimed-map { height: 280px; border-radius: 12px; }
.facts-list { display: grid; gap: 8px; margin: 0 0 12px; }
.facts-list div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; }
.facts-list dt { color: #536175; font-weight: 600; }
.facts-list dd { margin: 0; }
.claim-card { border: 2px solid #0891b2; }
.claim-card h2 { margin: 4px 0 8px; }
.claim-card .btn { width: 100%; justify-content: center; }
@media (max-width: 900px) { .unclaimed-grid { grid-template-columns: 1fr; } .unclaimed-grid aside { order: -1; } }

/* ---------- Berth search (visitor + permanent), v21 ---------- */
.band-tabs { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.band-tab { display: grid; gap: 2px; padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(148, 197, 222, 0.28); background: rgba(255, 255, 255, 0.05); color: #cbd5e1; text-decoration: none; min-width: 220px; }
.band-tab strong { color: #fff; font-size: 0.98rem; }
.band-tab span { font-size: 0.8rem; }
.band-tab:hover { background: rgba(255, 255, 255, 0.1); }
.band-tab.is-active { background: #fff; border-color: #fff; color: #475569; }
.band-tab.is-active strong { color: #0e7490; }
.berth-search { background: #eef3f7; padding: 22px 0 56px; }
.berth-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 14px; align-items: end; padding: 16px 18px; background: #e3ecf2; border: 1px solid #d5e1ea; border-radius: 14px; }
.berth-filters .field { margin: 0; }
.berth-filters .perm-fit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; grid-column: span 2; }
.berth-filters input, .berth-filters select { background: #fff; }
.berth-filters-head, .bs-toolbar { display: none; }
.bs-count { margin: 18px 0 10px; font-weight: 600; color: #334155; }
.bs-results[aria-busy="true"] { opacity: 0.55; transition: opacity 0.15s; }
.bm-group { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(15, 42, 61, 0.04); }
.bm-head { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.bm-photo { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; background: #e2e8f0; }
.bm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bm-copy h2 { margin: 2px 0 2px; font-size: 1.25rem; }
.bm-copy h2 a { color: #0f2a3d; text-decoration: none; }
.bm-copy h2 a:hover { text-decoration: underline; }
.bm-copy .meta { margin: 0 0 6px; }
.bm-line { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 0.9rem; }
.bm-view { align-self: start; white-space: nowrap; }
.bm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.bcard { display: grid; gap: 4px; align-content: start; padding: 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.bcard:hover, .bcard:focus-visible { border-color: #0e7490; box-shadow: 0 4px 14px rgba(8, 145, 178, 0.12); }
.bcard-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.bcard-name { font-size: 1.02rem; color: #0f2a3d; }
.bcard-price { font-weight: 700; color: #0f2a3d; }
.bcard .meta { font-size: 0.82rem; }
.bcard-facts { display: flex; gap: 16px; margin: 6px 0 0; font-size: 0.82rem; }
.bcard-facts dt { color: #536175; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.bcard-facts dd { margin: 0; font-weight: 600; }
.avail { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #e2e8f0; color: #475569; white-space: nowrap; }
.avail.is-free { background: #dcfce7; color: #166534; }
.bm-plan { margin-top: 12px; border-top: 1px solid #eef2f6; padding-top: 10px; }
.bm-plan summary { cursor: pointer; color: #0e7490; font-weight: 600; font-size: 0.92rem; }
.bm-plan[open] summary { margin-bottom: 10px; }
.perm-marina.bm-group .perm-grid { margin-top: 14px; }
.bs-empty { text-align: center; background: #fff; border: 1px dashed #cbd5e1; border-radius: 16px; padding: 40px 20px; color: #536175; margin-top: 18px; }
.bs-empty h2 { color: #0f2a3d; font-size: 1.2rem; margin: 10px 0 6px; }
.bs-empty-ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 760px) {
    .band-tab { min-width: 0; flex: 1 1 0; padding: 8px 10px; }
    .band-tab span { display: none; }
    .bs-toolbar { display: flex; margin-top: 4px; }
    .berth-filters { display: none; }
    .berth-filters.is-open { display: grid; position: fixed; inset: auto 0 0 0; z-index: 60; max-height: 85vh; overflow: auto; grid-template-columns: 1fr; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -10px 40px rgba(15, 42, 61, 0.3); padding-bottom: 24px; }
    .berth-filters.is-open .berth-filters-head { display: flex; justify-content: space-between; align-items: center; }
    .berth-filters .perm-fit { grid-column: auto; }
    .sheet-close { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #475569; }
    body.sheet-open::after { content: ''; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 55; }
    .bm-head { grid-template-columns: 96px minmax(0, 1fr); }
    .bm-view { grid-column: 1 / -1; }
    .bm-cards { grid-template-columns: 1fr; }
}
.perm-results .perm-count { margin: 18px 0 10px; font-weight: 600; color: #334155; }

/* Berth search: marina cards in a grid (v21b) */
.bm-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 640px) { .bm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .bm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bm-grid .bm-group { display: flex; flex-direction: column; padding: 0; margin: 0; overflow: hidden; height: 100%; }
.bm-grid .bm-photo { border-radius: 0; aspect-ratio: 16 / 8; }
.bm-grid .bm-copy { padding: 12px 14px 4px; }
.bm-grid .bm-copy h2 { font-size: 1.1rem; }
.bm-grid .bm-line { font-size: 0.82rem; gap: 8px; }
.bm-list { list-style: none; margin: 6px 0 0; padding: 0 8px; display: grid; gap: 2px; flex: 1; align-content: start; }
.brow { display: flex; justify-content: space-between; gap: 10px; padding: 9px 6px; border-top: 1px solid #eef2f6; color: inherit; text-decoration: none; border-radius: 8px; }
.bm-list li:first-child .brow { border-top: 0; }
.brow:hover, .brow:focus-visible { background: #f1f7fa; }
.brow-main { display: grid; gap: 1px; min-width: 0; }
.brow-main strong { color: #0f2a3d; font-size: 0.94rem; }
.brow-main .kicker { font-size: 0.66rem; }
.brow-main .meta { font-size: 0.76rem; }
.brow-side { display: grid; justify-items: end; align-content: start; gap: 4px; text-align: right; }
.brow-price { font-weight: 700; font-size: 0.88rem; color: #0f2a3d; white-space: nowrap; }
.brow-price small { font-weight: 500; color: #536175; }
.brow-side .avail-badge { font-size: 0.68rem; }
.bm-foot { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px 14px; border-top: 1px solid #eef2f6; margin-top: 6px; font-size: 0.88rem; }
.bm-plan-open { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: #0e7490; font-weight: 600; }
.bm-plan-dialog { width: min(980px, 94vw); max-height: 90vh; border: 0; border-radius: 16px; padding: 16px 18px 20px; box-shadow: 0 30px 80px rgba(15, 23, 42, 0.45); }
.bm-plan-dialog::backdrop { background: rgba(15, 23, 42, 0.6); }
.bm-plan-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.bm-plan-head h3 { margin: 0; }
.bm-plan-dialog .sheet-close { display: inline-block; border: 0; background: none; font-size: 1.7rem; line-height: 1; cursor: pointer; color: #475569; }
.claim-row .badge-unclaimed { align-self: flex-start; }

/* Brand mark (v22) */
.brand-mark { display: inline-flex; flex: none; line-height: 0; }
.brand-mark img { display: block; width: auto; height: 36px; }
.site-footer .brand-mark img, .side .brand-mark img { height: 32px; }
.site-header .brand-mark img { height: 40px; }

/* ---------- Footer v23 ---------- */
.footer-cta { background: linear-gradient(120deg, #0b2a4a 0%, #0e4d6b 55%, #0891b2 140%); color: #e2f3f8; }
.footer-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-block: 34px 44px; }
.footer-cta h2 { margin: 0 0 6px; color: #fff; font-family: var(--display, inherit); font-size: 1.5rem; font-style: normal; }
.footer-cta p { margin: 0; color: #bfe3ee; max-width: 52ch; }
.footer-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.footer-cta-actions .btn { min-height: 46px; display: inline-flex; align-items: center; }
body.public .footer-cta .btn.ghost.light { color: #fff; border-color: rgba(255, 255, 255, 0.55); background: transparent; }
body.public .footer-cta .btn.ghost.light:hover { background: rgba(255, 255, 255, 0.1); }
.site-footer { position: relative; background: #061732; color: #b6c4d4; padding: 0; margin: 0; }
.site-footer .footer-wave { position: absolute; top: -1px; left: 0; width: 100%; height: 28px; fill: #0b3150; opacity: 0.9; }
.footer-main { display: grid; grid-template-columns: minmax(260px, 1.1fr) 2.4fr; gap: 48px; padding-block: 64px 40px; }
.footer-logo { font-size: 1.7rem !important; color: #fff; }
.site-footer .footer-logo .brand-mark img { height: 52px; }
.footer-tagline { color: #e2e8f0; font-weight: 600; margin: 16px 0 4px; }
.footer-value { margin: 0 0 18px; color: #94a9bd; font-size: 0.92rem; }
.footer-prefs { display: flex; gap: 8px; flex-wrap: wrap; }
.site-footer .pref summary { border-color: rgba(148, 197, 222, 0.3); color: #e2e8f0; }
.site-footer .pref-menu { top: auto; bottom: calc(100% + 6px); }
.footer-social { list-style: none; display: flex; gap: 14px; padding: 0; margin: 18px 0 0; }
.footer-social a { color: #9fdcec; }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.footer-col summary { list-style: none; color: #fff; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; cursor: default; }
.footer-col summary::-webkit-details-marker { display: none; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a, .site-footer .footer-bar a { color: #b6c4d4; text-decoration: none; }
.footer-col a:hover, .site-footer .footer-bar a:hover { color: #67e8f9; text-decoration: underline; }
.site-footer a:focus-visible, .site-footer button:focus-visible, .site-footer summary:focus-visible, .footer-cta a:focus-visible { outline: 2px solid #67e8f9; outline-offset: 3px; border-radius: 4px; }
.footer-bar { border-top: 1px solid rgba(148, 197, 222, 0.14); font-size: 0.84rem; color: #8ea2b6; }
.footer-bar-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 18px; }
.footer-bar p { margin: 0; }
.footer-notes { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.site-footer .link-button { background: none; border: 0; padding: 0; color: #b6c4d4; font: inherit; cursor: pointer; }
.site-footer .link-button:hover { color: #67e8f9; text-decoration: underline; }
.site-footer.is-slim { background: transparent; color: #536175; margin-top: 48px; }
.site-footer.is-slim .footer-bar { border-top-color: #e2e8f0; color: #536175; }
.site-footer.is-slim .footer-bar a { color: #475569; }
.site-footer.is-slim .wrap { padding-inline: 0; max-width: none; }
@media (max-width: 1100px) { .footer-main { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 760px) {
    .footer-cta-inner { flex-direction: column; align-items: stretch; padding-block: 28px 40px; }
    .footer-cta-actions { flex-direction: column; }
    .footer-cta-actions .btn { justify-content: center; text-align: center; white-space: normal; }
    .footer-main { padding-block: 48px 8px; gap: 24px; }
    .footer-cols { grid-template-columns: 1fr; gap: 0; }
    .footer-col { border-top: 1px solid rgba(148, 197, 222, 0.14); }
    .footer-col summary { cursor: pointer; margin: 0; padding: 16px 0; display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
    .footer-col summary::after { content: '+'; font-size: 1.3rem; font-weight: 400; color: #67e8f9; }
    .footer-col[open] summary::after { content: '−'; }
    .footer-col ul { padding-bottom: 14px; gap: 2px; }
    .footer-col a { display: block; padding: 10px 0; }
    .footer-bar-inner { flex-direction: column; }
}
body.public .site-footer, .site-footer { padding: 0; margin-top: 0; }
.site-footer .footer-main a, .site-footer .footer-bar a { display: inline; padding: 0; opacity: 1; }
.site-footer .footer-col a { display: inline-block; padding: 2px 0; }
.site-footer .footer-logo { display: flex; }
@media (max-width: 760px) { .site-footer .footer-col a { display: block; padding: 10px 0; } }

/* ---------- Directory v24: three equal marina cards per country ---------- */
body.public .directory-grid.marina-cards,
body.public .country-layout.has-map .directory-grid.marina-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; grid-auto-rows: 1fr; }
.marina-cards .dir-item { height: 100%; }
.marina-cards .directory-card { display: flex; flex-direction: column; height: 100%; }
.marina-cards .directory-card .media { aspect-ratio: 4 / 3; height: auto; flex: none; overflow: hidden; }
.marina-cards .directory-card .media img { width: 100%; height: 100%; object-fit: cover; }
.marina-cards .directory-card .body { flex: 1; display: flex; flex-direction: column; }
.marina-cards .directory-card .body strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.marina-cards .card-rating { margin-top: auto; padding-top: 6px; min-height: 26px; }
.marina-cards .card-rating.is-empty { color: #536175; font-size: .86rem; }
.view-all-link { display: inline-block; margin-top: 14px; font-weight: 600; color: #0e7490; }
.view-all-link:hover { text-decoration: underline; }
@media (min-width: 1100px) { body.public .country-layout.has-map { grid-template-columns: minmax(0, 1fr) minmax(300px, 36%); } }
@media (max-width: 900px) { body.public .directory-grid.marina-cards, body.public .country-layout.has-map .directory-grid.marina-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { body.public .directory-grid.marina-cards, body.public .country-layout.has-map .directory-grid.marina-cards { grid-template-columns: 1fr; grid-auto-rows: auto; } }
body.public .directory-grid.marina-cards { display: grid; }
/* Same content block height in every country so cards line up page-wide. */
.marina-cards .directory-card .body { min-height: 158px; }
.marina-cards .directory-card .body .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marina-cards .directory-card .kicker { min-height: 1.2em; }
.marina-cards .directory-card .body { min-height: 132px; }
.view-all-link { margin-top: 30px; }
.marina-placeholder { display: grid; place-items: center; align-content: center; gap: 4px; width: 100%; height: 100%; min-height: 100%; background: linear-gradient(135deg, #e2e8f0, #f1f5f9); color: #536175; font-size: .8rem; font-weight: 600; }
.directory-card .media .marina-placeholder { aspect-ratio: 4 / 3; }
.marina-placeholder.is-thumb { width: 72px; height: 54px; border-radius: 10px; flex: none; }

/* ---------- Logo alignment v25: tight inline mark, centred on the wordmark ---------- */
.logo, body.public .logo, .site-footer .footer-logo, .side .logo { display: inline-flex; align-items: center; }
.brand-mark img, .site-header .brand-mark img { height: 28px; width: auto; }
.side .brand-mark img { height: 24px; }
.site-footer .footer-logo .brand-mark img { height: 38px; }
/* The italic wordmark's box sits slightly low for its x-height; lift the mark a hair to meet it optically. */
.logo .brand-mark { position: relative; top: 1px; }

/* ---------- Home v26: hero mode switch, marinas section, broker marquee ---------- */
.mode-switch { grid-column: 1 / -1; display: inline-flex; justify-self: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(148,197,222,.25); }
.mode-switch label { position: relative; cursor: pointer; }
.mode-switch input { position: absolute; opacity: 0; inset: 0; }
.mode-switch span { display: block; padding: 7px 22px; border-radius: 999px; color: #cbd5e1; font-weight: 700; font-size: .9rem; }
.mode-switch input:checked + span { background: #fff; color: #0b2a4a; }
.mode-switch input:focus-visible + span { outline: 2px solid #67e8f9; outline-offset: 2px; }
.search-panel [data-mode][hidden] { display: none !important; }
.search-panel > div[data-mode] { grid-column: 1 / -1; }

.home-marinas { background: linear-gradient(180deg, #eef6f9 0%, #f8fafc 100%); }
.home-marinas .section-lede { margin: 6px 0 0; color: #475569; }
.home-marinas-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
body.public .home-marina-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-marina-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding: 14px 20px; border-radius: 14px; background: #0b2a4a; color: #cbd5e1; }
.home-marina-stats { list-style: none; display: flex; gap: 28px; flex-wrap: wrap; margin: 0; padding: 0; }
.home-marina-stats strong { color: #fff; font-size: 1.25rem; margin-right: 4px; }
.claim-link { color: #67e8f9; font-weight: 600; text-decoration: none; }
.claim-link:hover, .claim-link:focus-visible { text-decoration: underline; }

.broker-strip { padding: 34px 0 40px; background: #fff; border-block: 1px solid #e2e8f0; }
.broker-strip-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.broker-strip-head h2 { margin: 0; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: #536175; font-style: normal; font-family: var(--sans, inherit); }
.broker-strip-head a { color: #0e7490; font-weight: 600; font-size: .9rem; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee calc(var(--n, 6) * 4s) linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0 9px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.broker-logo { display: flex; align-items: center; gap: 10px; height: 72px; padding: 0 22px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; text-decoration: none; color: #334155; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s, border-color .2s; white-space: nowrap; }
.broker-logo:hover, .broker-logo:focus-visible { filter: none; opacity: 1; border-color: #67c7da; }
.broker-logo:focus-visible { outline: 2px solid #0891b2; outline-offset: 2px; }
.broker-logo img { height: 44px; width: auto; max-width: 160px; object-fit: contain; }
.broker-initials { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #0b2a4a; color: #67e8f9; font-weight: 800; font-size: .9rem; }
.broker-name { font-weight: 700; font-size: .95rem; }
@media (prefers-reduced-motion: reduce) {
    .marquee { -webkit-mask-image: none; mask-image: none; }
    .marquee-track { animation: none; width: auto; justify-content: center; }
    .marquee-group { flex-wrap: wrap; justify-content: center; padding: 0 16px; }
    .marquee-group[aria-hidden="true"] { display: none; }
}
@media (max-width: 1100px) { body.public .home-marina-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
    body.public .home-marina-cards { grid-template-columns: 1fr; }
    .home-marinas-ctas { width: 100%; } .home-marinas-ctas .btn { flex: 1; justify-content: center; text-align: center; }
    .home-marina-stats { gap: 16px; }
    .broker-logo { height: 60px; padding: 0 14px; }
}
body.public .directory-grid.marina-cards.home-marina-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { body.public .directory-grid.marina-cards.home-marina-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { body.public .directory-grid.marina-cards.home-marina-cards { grid-template-columns: 1fr; } }
.broker-logo img { height: 40px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .marquee-group + .marquee-group { display: none; } }
.price-chip.is-stacked { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; padding: 5px 11px 6px; border-radius: 12px; }
.price-chip.is-stacked small { font-size: .68rem; font-weight: 600; opacity: .85; letter-spacing: .01em; }
.price-chip.is-stacked b { font-size: .92rem; }
.bm-from { margin: 4px 0 0; font-weight: 700; color: #0e7490; font-size: .9rem; }
.top-marina-from { white-space: normal; text-align: right; font-size: .78rem; }

/* ---------- Home rhythm: one gap between sections (64px desktop, 44px mobile) ---------- */
/* Sections on the same background share one gap: the follower drops its top padding (inline padding-top:0). */
body.public .home-flow > .section { padding-block: 64px; }
body.public .home-flow > .section[style*="padding-top:0"] { padding-top: 0; }
body.public .home-flow > .home-marinas { padding-block: 60px; }
body.public .home-flow > .broker-strip { padding-block: 30px 34px; }
body.public .home-flow > .ink-band { padding-block: 64px; }
body.public .home-flow > .section:last-child { padding-bottom: 64px; }
@media (max-width: 760px) {
    body.public .home-flow > .section, body.public .home-flow > .ink-band, body.public .home-flow > .home-marinas { padding-block: 44px; }
    body.public .home-flow > .section[style*="padding-top:0"] { padding-top: 0; }
    body.public .home-flow > .broker-strip { padding-block: 24px 28px; }
}
/* Boats and marinas sit on near-identical light backgrounds: split one gap between them. */
body.public .home-flow > .hero + .section { padding-bottom: 32px; }
body.public .home-flow > .home-marinas { padding-block: 32px 40px; }
body.public .home-flow > .broker-strip + .ink-band { padding-top: 36px; }
@media (max-width: 760px) {
    body.public .home-flow > .hero + .section { padding-bottom: 22px; }
    body.public .home-flow > .home-marinas { padding-block: 22px 26px; }
    body.public .home-flow > .broker-strip + .ink-band { padding-top: 22px; }
}
body.public .home-flow > .home-marinas { padding-bottom: 28px; }
@media (max-width: 760px) {
    body.public .home-flow > .home-marinas { padding-bottom: 16px; }
    body.public .home-flow > .section:last-child { padding-bottom: 44px; }
}

/* ---------- Demo marina page + unclaimed preview panel ---------- */
.demo-banner { background: #e6f6f8; color: #0b3a4a; border-bottom: 1px solid #a5dfe8; }
.demo-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 8px; }
.demo-banner p { margin: 0; font-size: .9rem; }
.demo-banner .btn.small { padding: 6px 14px; min-height: 34px; font-size: .85rem; white-space: nowrap; }
@media (max-width: 640px) { .demo-banner-inner { flex-direction: column; align-items: stretch; gap: 6px; } .demo-banner .btn.small { text-align: center; justify-content: center; } }
.claim-stack { display: grid; gap: 14px; align-content: start; }
.claim-stack .claim-card { position: static; }
.demo-preview { display: grid; gap: 8px; text-decoration: none; color: inherit; border: 1px solid #bae6fd; background: #f0f9ff; transition: box-shadow .15s, transform .15s; }
.demo-preview:hover, .demo-preview:focus-visible { box-shadow: 0 8px 24px rgba(8, 145, 178, .18); transform: translateY(-1px); }
.demo-preview:focus-visible { outline: 2px solid #0891b2; outline-offset: 2px; }
.demo-thumb { position: relative; display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; }
.demo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.demo-thumb-bar { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: linear-gradient(transparent, rgba(6, 23, 50, .85)); color: #fff; font-size: .78rem; }
.demo-thumb-bar i { font-style: normal; color: #a5f3fc; font-size: .72rem; }
.demo-preview strong { font-size: 1.05rem; color: #0b2a4a; }

/* ---------- Gallery captions: calm bottom overlay, always visible, no layout shift ---------- */
.gallery-tile { position: relative; }
.gallery-caption { position: absolute; inset: auto 0 0 0; display: grid; gap: 2px; padding: 34px 14px 12px; background: linear-gradient(180deg, rgba(6, 23, 50, 0) 0%, rgba(6, 23, 50, .62) 45%, rgba(6, 23, 50, .86) 100%); color: #fff; pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.gallery-caption b { font-size: .95rem; font-weight: 700; line-height: 1.2; }
.gallery-caption span { font-size: .8rem; line-height: 1.35; color: #e2e8f0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gallery-tile.is-large .gallery-caption { padding: 60px 20px 18px; }
.gallery-tile.is-large .gallery-caption b { font-size: 1.15rem; }
.gallery-tile.is-large .gallery-caption span { font-size: .9rem; -webkit-line-clamp: 3; }
@media (max-width: 760px) { .gallery-caption { padding: 26px 10px 8px; } .gallery-caption span { -webkit-line-clamp: 2; font-size: .76rem; } }
[data-lightbox-caption] strong { display: block; font-weight: 700; }
[data-lightbox-caption] span { display: block; opacity: .9; }
/* Photo manager: description + caption fields as a tidy two-column form. */
.photo-alt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; align-items: start; }
.photo-alt .field { flex: none; min-width: 0; }
.photo-alt .field:first-of-type { grid-column: 1 / -1; }
.photo-alt .field:has(textarea) { grid-column: 1 / -1; }
.photo-alt textarea { width: 100%; resize: vertical; min-height: 56px; }
.photo-alt .field .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.photo-alt p.small { grid-column: 1 / -1; margin: 0; }
.photo-alt button { justify-self: start; }
@media (max-width: 640px) { .photo-alt { grid-template-columns: 1fr; } }

/* ---------- Brokerage profile (mirrors the marina profile) ---------- */
.broker-hero-id { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.broker-hero-logo { flex: none; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.25); overflow: hidden; }
.broker-hero-logo img { width: 100%; height: 100%; object-fit: contain; }
.broker-hero-logo b { color: #0b2a4a; font-size: 1.4rem; font-weight: 800; }
.broker-hero-id h1 { margin: 2px 0 0; }
.broker-enq h2 { margin: 0 0 4px; font-size: 1.15rem; }
.broker-enq .stack { gap: 10px; }
.broker-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 18px 0 0; }
.broker-badges li { padding: 6px 12px; border-radius: 999px; background: #e0f2fe; color: #0b3a5b; font-size: .85rem; font-weight: 600; border: 1px solid #bae6fd; }
.broker-team-section { background: #eef4f8; padding-block: 56px; }
.broker-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.team-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 16px; background: #fff; border: 1px solid #dbe6ee; box-shadow: 0 2px 10px rgba(15, 23, 42, .04); }
.team-photo { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #0b2a4a, #0e7490); color: #a5f3fc; font-weight: 800; font-size: 1.6rem; margin-bottom: 6px; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { margin: 0; font-size: 1.1rem; }
.team-title { margin: 0; color: #0e7490; font-weight: 600; font-size: .92rem; }
.team-bio { margin: 2px 0; color: #475569; font-size: .9rem; }
.team-meta { display: flex; gap: 6px; align-items: center; margin: 2px 0; color: #334155; font-size: .86rem; }
.team-meta svg { color: #0e7490; flex: none; }
.team-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 4px 0 0; }
.team-tags li { padding: 3px 9px; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: .78rem; border: 1px solid #e2e8f0; }
.team-contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; }
.team-contact a { padding: 7px 12px; border-radius: 10px; border: 1px solid #cbd5e1; color: #0b2a4a; font-weight: 600; font-size: .85rem; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }
.team-contact a:hover, .team-contact a:focus-visible { border-color: #0e7490; color: #0e7490; }
.broker-offices { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; margin-bottom: 10px; }
.office-card { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #dbe6ee; }
.office-body { padding: 16px 18px; }
.office-body h3 { margin: 0 0 4px; }
.office-body p { margin: 4px 0; }
.office-links { display: flex; flex-wrap: wrap; gap: 14px; }
.office-links a { color: #0e7490; font-weight: 600; }
.sold-title { margin-top: 28px; }
.sold-list { list-style: none; padding: 0; display: grid; gap: 6px; }
.sold-badge { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #0b2a4a; color: #fff; font-size: .72rem; font-weight: 700; }
@media (max-width: 560px) { .broker-hero-logo { width: 54px; height: 54px; } .broker-offices { grid-template-columns: 1fr; } }
.office-edit { padding: 14px; border: 1px solid var(--line-ink, #e2e8f0); border-radius: 12px; display: grid; gap: 8px; }
.row-actions { display: flex; gap: 8px; }
.team-edit { padding: 12px 14px; border: 1px solid var(--line-ink, #e2e8f0); border-radius: 12px; background: #fff; }
.team-edit.is-hidden { opacity: .7; background: #f8fafc; }
.team-edit-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.team-edit-actions { margin-left: auto; display: flex; gap: 6px; }
.team-photo.small { width: 40px; height: 40px; font-size: .9rem; margin: 0; }
.team-edit details summary { cursor: pointer; color: #0e7490; font-weight: 600; margin-top: 8px; }
.pill-muted { padding: 2px 8px; border-radius: 999px; background: #e2e8f0; color: #475569; font-size: .75rem; }

/* About + office map, equal-height columns on desktop; map stacks below on mobile. */
.broker-about-grid.has-map { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.broker-about-grid.has-map .marina-about { max-width: none; }
.broker-map-col { display: flex; flex-direction: column; min-height: 360px; }
.broker-map { flex: 1; min-height: 360px; border-radius: 18px; overflow: hidden; border: 1px solid #dbe6ee; background: linear-gradient(135deg, #e0f2fe, #eef4f8); z-index: 0; }
.broker-map .leaflet-popup-content { font-size: .88rem; line-height: 1.4; }
.broker-offices { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 960px) {
    .broker-about-grid.has-map { grid-template-columns: 1fr; }
    .broker-map-col, .broker-map { min-height: 300px; }
}
.broker-page .marina-overview { display: block; }

/* Map sits in the same grid row as the quote panel, so both share top, bottom and height exactly. */
@media (min-width: 961px) {
    .broker-about-grid.has-map { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "head ." "panel map" "badges ."; row-gap: 0; align-items: stretch; }
    .broker-about-grid.has-map .marina-about { display: contents; }
    .broker-about-grid.has-map .about-head { grid-area: head; }
    .broker-about-grid.has-map .about-stage, .broker-about-grid.has-map .quote-plain { grid-area: panel; margin: 0; }
    .broker-about-grid.has-map .broker-badges { grid-area: badges; }
    .broker-about-grid.has-map .broker-map-col { grid-area: map; min-height: 0; margin: 0; padding: 0; }
    .broker-about-grid.has-map .broker-map { min-height: 0; height: 100%; border-radius: 20px; box-sizing: border-box; }
}

/* Map card: title strip inside, card still equals the About panel's box. */
.broker-map-col { border-radius: 20px; overflow: hidden; border: 1px solid #dbe6ee; background: #fff; display: flex; flex-direction: column; }
.broker-map-col .broker-map, .broker-about-grid.has-map .broker-map { border: 0; border-radius: 0; flex: 1 1 auto; height: auto; min-height: 240px; }
.broker-about-grid.has-map .broker-map-col { box-sizing: border-box; }
@media (min-width: 961px) { .broker-about-grid.has-map .broker-map { min-height: 0; } }
/* Boats for sale on brokerage pages: 5 / 3 / 2 / 1. */
.broker-page #boats .grid-boats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1279px) { .broker-page #boats .grid-boats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .broker-page #boats .grid-boats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .broker-page #boats .grid-boats { grid-template-columns: minmax(0, 1fr); } }

/* v5: map heading lives in the heading row (aligned with About), map card in the panel row. */
.broker-map-col { border: 0; border-radius: 0; overflow: visible; background: none; }
.broker-map-col .broker-map, .broker-about-grid.has-map .broker-map { border: 1px solid #dbe6ee; border-radius: 20px; overflow: hidden; box-sizing: border-box; }
@media (min-width: 961px) {
    .broker-about-grid.has-map { grid-template-areas: "head mhead" "panel map" "badges ."; }
    .broker-about-grid.has-map .broker-map-col { display: contents; }
    .broker-about-grid.has-map .broker-map-head { grid-area: mhead; }
    .broker-about-grid.has-map .broker-map { grid-area: map; height: auto; min-height: 0; }
}
@media (max-width: 960px) { .broker-map-col .broker-map { min-height: 300px; } }
@media (max-width: 960px) { .broker-about-grid.has-map .broker-map-col .broker-map { min-height: 300px; } }


/* Smart fit (see js/smart-fit.js): whole photo over a blurred copy when cover would crop too much. */
.fit-smart.is-contained { isolation: isolate; overflow: hidden; background-color: #0b1a2e; }
.fit-smart.is-contained::before { content: ""; position: absolute; inset: -40px; z-index: -3; background: var(--fit-bg) center / cover no-repeat; filter: blur(26px) brightness(.5) saturate(1.1); pointer-events: none; }
.fit-smart.is-contained > img[data-fit-smart] { object-fit: contain !important; transform: none !important; }
.gallery-tile.fit-smart.is-contained { position: relative; }
.gallery-tile.fit-smart.is-contained::before { z-index: 0; }
.gallery-tile.fit-smart.is-contained > img[data-fit-smart] { position: relative; z-index: 1; }
.gallery-tile.fit-smart.is-contained .gallery-caption { z-index: 2; }
.org-logo.tiny { padding: 2px; }
.marina-hero.fit-smart.is-contained::before { filter: blur(30px) brightness(.8) saturate(1.1); }

/* Boat photo mosaic: main photo 2/3 + two stacked tiles 1/3 (desktop); swipe strip on phones. */
.boat-mosaic { position: relative; }
.mosaic-track { display: grid; gap: 8px; aspect-ratio: 2 / 1; max-height: 450px; width: 100%; border-radius: 16px; overflow: hidden; }
.boat-mosaic.count-1 .mosaic-track { grid-template-columns: 1fr; }
.boat-mosaic.count-2 .mosaic-track { grid-template-columns: 2fr 1fr; }
.boat-mosaic.count-3 .mosaic-track { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.boat-mosaic.count-3 .mosaic-tile.is-main { grid-row: 1 / span 2; }
.mosaic-tile { position: relative; display: block; overflow: hidden; background: #d5e4ee; min-height: 0; }
.mosaic-tile.is-extra { display: none; }
.mosaic-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform .4s ease; }
.mosaic-tile:hover img { transform: scale(1.03); }
.mosaic-tile:focus-visible { outline: 3px solid #0891b2; outline-offset: -3px; }
.mosaic-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8, 20, 38, .55); color: #fff; font-weight: 700; font-size: 1.15rem; letter-spacing: .01em; }
.mosaic-all { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; gap: 6px; align-items: center; background: rgba(255,255,255,.94); color: #0b2a4a; border: 0; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.mosaic-count { display: none; }
@media (max-width: 767px) {
    .mosaic-track { display: flex; height: auto; aspect-ratio: 4 / 3; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 12px; }
    .mosaic-track::-webkit-scrollbar { display: none; }
    .mosaic-tile, .mosaic-tile.is-extra { display: block; flex: 0 0 100%; scroll-snap-align: start; }
    .mosaic-more { display: none; }
    .mosaic-all { display: none; }
    .mosaic-count { display: block; position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(8, 20, 38, .7); color: #fff; font-size: .8rem; font-weight: 600; }
}
.boat-mosaic.count-1 .mosaic-track { aspect-ratio: 3 / 2; max-height: 520px; }

/* Listing disclaimer: subtle small note with an info icon. */
.listing-disclaimer { display: flex; gap: 8px; align-items: flex-start; margin: 18px 0 28px; padding: 10px 12px; border-radius: 10px; background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569; font-size: .82rem; line-height: 1.45; }
.listing-disclaimer svg { flex: none; margin-top: 1px; color: #0e7490; }
.disclaimer-wrap { padding-bottom: 8px; }
.disclaimer-wrap .listing-disclaimer { margin: 28px 0 36px; }

/* ---------- Free trial landing ---------- */
.trial-radio { position: absolute; opacity: 0; pointer-events: none; }
.trial-page:has(#t-brokerage:checked) [data-for="marina"], .trial-page:has(#t-marina:checked) [data-for="brokerage"] { display: none !important; }
.trial-hero { background: radial-gradient(120% 140% at 85% 0%, #0e7490 0%, #0b2a4a 45%, #071631 100%); color: #fff; padding-block: 72px 64px; }
.trial-hero-inner { max-width: 860px; }
.trial-eyebrow { margin: 0 0 8px; color: #67e8f9; font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.trial-hero h1 { margin: 0 0 14px; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em; }
.trial-sub { margin: 0 0 26px; font-size: 1.1rem; color: #cfe3f2; max-width: 640px; }
.trial-toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); margin-bottom: 22px; }
.trial-toggle label { padding: 9px 20px; border-radius: 999px; cursor: pointer; font-weight: 600; color: #dbeafe; min-height: 40px; display: inline-flex; align-items: center; }
.trial-page:has(#t-brokerage:checked) .trial-toggle label[for="t-brokerage"], .trial-page:has(#t-marina:checked) .trial-toggle label[for="t-marina"] { background: #fff; color: #0b2a4a; }
.trial-page:has(.trial-radio:focus-visible) .trial-toggle { outline: 2px solid #67e8f9; outline-offset: 3px; }
.trial-hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.trial-hero-ctas > span { display: contents; }
.trial-section { padding-block: 56px; }
.trial-h2 { margin: 0 0 18px; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.trial-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.trial-feature { padding: 20px; border-radius: 16px; background: #fff; border: 1px solid #dbe6ee; border-top: 3px solid #0891b2; }
.trial-feature h3 { margin: 0 0 6px; font-size: 1.05rem; }
.trial-feature p { margin: 0; color: #475569; font-size: .93rem; }
.trial-band { background: #eef4f8; padding-block: 56px; }
.trial-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.trial-steps li { padding: 20px; background: #fff; border-radius: 16px; border: 1px solid #dbe6ee; }
.trial-steps b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #0b2a4a; color: #67e8f9; margin-bottom: 10px; }
.trial-steps h3 { margin: 0 0 6px; font-size: 1.02rem; }
.trial-steps p { margin: 0; color: #475569; font-size: .92rem; }
.trial-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.trial-demos { display: grid; gap: 12px; margin-top: 14px; }
.trial-demo { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-radius: 14px; background: #0b2a4a; color: #fff; text-decoration: none; font-weight: 600; }
.trial-demo:hover, .trial-demo:focus-visible { background: #155e75; }
.trial-plan { padding: 26px; border-radius: 20px; background: #fff; border: 1px solid #bae6fd; box-shadow: 0 10px 30px rgba(11, 42, 74, .08); }
.trial-plan h2 { margin: 0 0 6px; }
.trial-price { margin: 0 0 10px; } .trial-price b { font-size: 2rem; color: #0b2a4a; } .trial-price span { color: #475569; }
.trial-claim { padding: 28px; border-radius: 20px; background: #eef4f8; }
.trial-search { display: flex; gap: 10px; margin: 14px 0; } .trial-search input { flex: 1; min-height: 44px; }
.trial-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.trial-results li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #dbe6ee; }
.trial-final { background: #0b2a4a; color: #fff; padding-block: 56px; text-align: center; }
.trial-final-inner { display: grid; justify-items: center; gap: 8px; } .trial-final h2 { margin: 0; } .trial-final p { margin: 0 0 12px; color: #cfe3f2; }
@media (max-width: 900px) { .trial-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trial-split { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .trial-hero { padding-block: 48px 40px; } .trial-steps { grid-template-columns: 1fr; } .trial-search { flex-direction: column; } .trial-hero-ctas .btn { flex: 1 1 100%; justify-content: center; } }
.trial-note { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: #e0f2fe; border: 1px solid #bae6fd; }
.footer-cta-link { color: #a5f3fc; font-weight: 600; white-space: nowrap; }
.footer-cta-link:hover, .footer-cta-link:focus-visible { color: #fff; }

/* Website link: icon + "Visit website" + domain */
.website-link { display: inline-flex; align-items: center; gap: 6px; color: #0e7490; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.website-link:hover .website-domain, .website-link:focus-visible .website-domain { text-decoration: underline; }
.website-domain { color: #475569; font-weight: 500; }
.website-btn { display: inline-flex; align-items: center; gap: 6px; }
.website-btn .website-domain { color: inherit; opacity: .8; font-weight: 500; }
@media (max-width: 560px) { .website-btn .website-domain { display: none; } }

/* Free trial: product imagery */
.trial-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.trial-hero-grid .trial-hero-inner { max-width: none; }
.trial-hero-visual { position: relative; padding: 0 0 56px 0; }
.trial-hero-photo { border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.trial-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trial-float { position: absolute; left: -36px; bottom: 0; width: 68%; }
.browser-frame { margin: 0; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid #dbe4ee; box-shadow: 0 24px 48px -24px rgba(7, 22, 49, .35), 0 2px 6px rgba(7, 22, 49, .06); }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #eef3f8; border-bottom: 1px solid #dbe4ee; }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #c7d3e0; }
.browser-bar span { margin-left: 10px; flex: 1; max-width: 300px; height: 18px; line-height: 18px; padding: 0 10px; border-radius: 9px; background: #fff; color: #536175; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trial-shot, .trial-shot img { display: block; width: 100%; height: auto; }
.trial-rows { display: grid; gap: 64px; }
.trial-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.trial-row.is-flipped .trial-row-text { order: 2; }
.trial-row-text h3 { margin: 0 0 10px; font-size: 1.5rem; color: #0b2a4a; letter-spacing: -.01em; }
.trial-row-text p { margin: 0; color: #475569; line-height: 1.6; max-width: 46ch; }
.trial-demo { gap: 14px; }
.trial-demo-thumb { flex: 0 0 96px; width: 96px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .25); }
.trial-demo-thumb img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
@media (max-width: 900px) {
  .trial-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .trial-float { left: auto; right: 0; width: 72%; }
  .trial-hero-visual { padding: 0 0 40px; }
  .trial-rows { gap: 40px; }
  .trial-row { grid-template-columns: 1fr; gap: 18px; }
  .trial-row.is-flipped .trial-row-text { order: 0; }
}
.trial-demo > span { flex: 1; }

/* Disclaimer: full text always visible (legal) */
.listing-disclaimer { font-size: .875rem; line-height: 1.55; color: #334155; max-height: none; overflow: visible; }
.disclaimer-body { min-width: 0; }
.disclaimer-body p { margin: 0; }
.disclaimer-body p + p { margin-top: 6px; }

/* Error pages */
.error-page { padding-block: 72px 88px; max-width: 720px; }
.error-page h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); margin: 0 0 12px; }
.error-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* Mobile readability (audit): nothing smaller than 13px on phones. Generated from rules that set a smaller size. */
@media (max-width: 760px) {
  .about-eyebrow,
  .avail,
  .avail-badge,
  .badge-unclaimed,
  .band-tab span,
  .bcard-facts dt,
  .berth-tab span,
  .boat-tab-bar label span,
  .brow-main .kicker,
  .brow-main .meta,
  .brow-side .avail-badge,
  .browser-bar span,
  .btn.small,
  .bubble time,
  .card .media .media-tag,
  .card-badge,
  .chat-status,
  .compare-btn,
  .compare-legend,
  .compare-table .compare-corner,
  .compare-table th.compare-boat .kicker,
  .compare-table th[scope="row"],
  .compare-tray-count span,
  .country-count,
  .demo-thumb-bar,
  .demo-thumb-bar i,
  .enq--hero .enq-privacy,
  .enq-kicker,
  .enq-privacy,
  .enq-status,
  .enq-term > span:first-child,
  .enq-type-tag,
  .eyebrow,
  .facility-note,
  .field-error,
  .field-hint,
  .filter-group .range-label,
  .filter-group legend,
  .filters summary,
  .filters-badge,
  .footer-col summary,
  .gallery-caption span,
  .gallery-count,
  .hold-countdown,
  .info-label,
  .kicker,
  .map-card-detail,
  .map-card-unclaimed,
  .marina-fact dt,
  .marina-placeholder,
  .mosaic-count,
  .overview-side-title,
  .page-band-eyebrow,
  .page-band-stats li,
  .pay-method span small,
  .pay-tile small,
  .perm-facts dt,
  .perm-includes li,
  .perm-note,
  .perm-size dd span,
  .perm-size dt,
  .photo-hero-badge,
  .photo-pos,
  .pill-muted,
  .price-calculator .calc-inputs label,
  .price-calculator .calc-lines tr.approx td,
  .price-chip.is-stacked small,
  .req-amount,
  .req-note,
  .req-occupancy span,
  .req-quote,
  .req-quote td,
  .review-verified,
  .role-pill,
  .setup-steps .tick,
  .sold-badge,
  .spec-highlights span,
  .status-pill,
  .stay-dates li b small,
  .story-crumbs,
  .stripe-account dt,
  .team-tags li,
  .today-badge,
  .trial-eyebrow,
  .unit-switch span,
  body.desk .desk-badge,
  body.desk .desk-org-type,
  body.desk .desk-who span,
  body.desk .org-switch-hint,
  body.desk .org-switch-menu button small,
  body.desk .photo-tile figcaption button,
  body.desk .stat span,
  body.desk .wizard-steps button,
  body.desk label.field,
  body.desk th,
  body.public .auth-card label.field,
  body.public .chips .badge,
  body.public .compact-grid .meta,
  body.public .detail .fact-strip span,
  body.public .detail .kicker,
  body.public .detail label.field,
  body.public .fact-strip span,
  body.public .header-account,
  body.public .header-actions .btn.small,
  body.public .home-boats .kicker,
  body.public .home-boats .meta,
  body.public .pill,
  body.public .pref summary,
  label.field,
  label.field.compact,
  th { font-size: .8125rem !important; }
  body.public label.field, body.public .field > span:first-child { font-size: .8125rem !important; }
}

/* Audit: slim one-row sticky header on phones; account/locale controls move into the menu */
.nav-toggle:focus-visible + .nav-toggle-label { outline: 2px solid #67e8f9; outline-offset: 2px; }
@media (max-width: 760px) {
  body.public .header-bar { min-height: 56px; gap: 10px; padding-block: 6px; }
  body.public .site-header .logo img, body.public .site-header .logo svg { max-height: 28px; width: auto; }
  body.public .nav-toggle-label { margin-left: auto; min-height: 44px; min-width: 44px; justify-content: center; align-items: center; }
  body.public .header-bar > .header-actions { display: none; }
  body.public .nav-toggle:checked ~ .header-actions { display: flex; flex-wrap: wrap; width: 100%; gap: 8px; padding: 6px 0 10px; margin: 0; }
  body.public .nav-toggle:checked ~ .primary-nav { top: auto; position: static; width: 100%; order: 5; padding: 8px 0; background: none; backdrop-filter: none; }
  body.public .nav-toggle:checked ~ .primary-nav a { min-height: 44px; display: flex; align-items: center; font-size: 1rem; }
  html { scroll-padding-top: 72px; }
}

/* Audit: 44px touch targets on phones */
@media (max-width: 760px) {
  .crumbs a, .crumbs li { min-height: 44px; display: inline-flex; align-items: center; }
  .crumbs { row-gap: 0; }
  .marina-subnav a { min-height: 44px; display: inline-flex; align-items: center; }
  .info-value, .info-row a { min-height: 44px; display: inline-flex; align-items: center; }
  .story-share a, .story-share button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .bm-grid .text-link, .bm-grid button.text-link, .bm-grid .card-rating, .bm-grid h2 a, .bm-grid .brow { min-height: 44px; display: inline-flex; align-items: center; }
  .card-rating { min-height: 44px; display: inline-flex; align-items: center; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 44px; display: flex; align-items: center; gap: 10px; }
  summary { min-height: 44px; display: flex; align-items: center; }
  .portal-main td a, .portal-main td button, .portal-main .btn.small, .portal-main .text-link, body.desk .setup-steps a { min-height: 44px; display: inline-flex; align-items: center; }
  .site-footer a { min-height: 44px; display: inline-flex; align-items: center; }
  .legal-body a, .prose a { padding-block: 10px; }
}

/* Audit: wide tables scroll inside themselves on small screens instead of widening the page */
.portal-main { min-width: 0; }
@media (max-width: 760px) {
  .portal-main table, body.public .legal-body table, body.public main table:not(.compare-table) { display: block !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; overflow-x: auto !important; position: relative; -webkit-overflow-scrolling: touch; }
  .legal-grid > *, .legal-body, .legal-table-wrap { min-width: 0; max-width: 100%; }
  .portal-main table th, .portal-main table td { white-space: nowrap; }
  .portal-main table td.wrap, .portal-main table td p { white-space: normal; }
}

/* Audit: links inside running text are underlined (not colour alone) */
body.public :is(p, dd) > a:not([class]), body.public .about-lead li > a, body.public p > span > a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }

/* Audit: muted text in the portal on tinted panels */
body.desk { --muted: #536175; }
.trial-plan > .trial-eyebrow { color: #0e7490; }
.portal aside .text-btn, .portal-side .text-btn { color: #cbd5e1; }
body.public .header-actions form .text-btn, body.public .header-actions .text-btn { color: #cbd5e1; }

/* Home: alternating bands (white / cool tint / photo). Each band owns its even padding, so no double gaps. */
body.public .home-flow > section.home-band.home-band { position: relative; padding-block: 64px; margin: 0; border: 0; }
body.public .home-flow > section.hb-white { background: #fff; }
body.public .home-flow > section.hb-tint { background: #eef3f8; border-block: 1px solid #e1e8f0; }
body.public .home-flow > section.hb-photo { background: #0b1f33; color: #f1f5f9; overflow: hidden; isolation: isolate; }
.hb-photo > .hb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hb-photo::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7, 22, 40, .88) 0%, rgba(9, 30, 52, .80) 45%, rgba(7, 22, 40, .92) 100%); }
.hb-photo > .wrap { position: relative; }
.hb-photo .section-head h2, .hb-photo h2, .hb-photo h3:not(.card h3) { color: #fff; }
.hb-photo .section-head .eyebrow, .hb-photo > .wrap > .eyebrow { color: #67e8f9; }
.hb-photo .section-head p, .hb-photo .section-head .muted { color: #dbe6ef; }
.hb-photo .section-head a:not(.btn) { color: #a5f3fc; }
.hb-photo .card, .hb-photo .directory-card { box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
body.public .home-flow > .broker-strip.home-band.home-band { padding-block: 40px; }
@media (max-width: 760px) {
  body.public .home-flow > section.home-band.home-band { padding-block: 44px; }
  body.public .home-flow > .broker-strip.home-band.home-band { padding-block: 32px; }
  .hb-photo::before { background: linear-gradient(180deg, rgba(7, 22, 40, .9), rgba(7, 22, 40, .9)); }
}
@media (prefers-reduced-motion: reduce) { .hb-photo > .hb-bg { transition: none; } }
body.public .home-flow > section.hb-white + section.hb-white { padding-top: 0; } /* if the broker strip is absent, two white bands merge */

/* Home hero: footer's wave, flipped, so the photo flows into the white Featured band. */
body.public .home-flow > .hero { position: relative; overflow: hidden; padding-bottom: 28px; border-bottom: 0; }
.hero > .hero-wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 28px; fill: #fff; transform: scaleY(-1); pointer-events: none; z-index: 1; display: block; }

/* Home hero water: footer-coloured wave + short solid strip, then the white band. */
body.public .home-flow > .hero { padding-bottom: calc(28px + 32px); }
.hero > .hero-water { position: absolute; left: 0; right: 0; bottom: 0; height: 32px; background: #0b3150; z-index: 1; }
.hero > .hero-wave { bottom: 31px; fill: #0b3150; }
.hero > .hero-wave-back { fill: #1b5f80; opacity: .55; bottom: 34px; transform: scaleY(-1) translateX(-6%); width: 112%; z-index: 0; }
@media (max-width: 760px) {
  body.public .home-flow > .hero { padding-bottom: calc(22px + 20px); }
  .hero > .hero-wave { height: 22px; bottom: 19px; }
  .hero > .hero-wave-back { bottom: 22px; }
  .hero > .hero-water { height: 20px; }
}

/* Home hero search: both modes stacked in one grid cell -> constant height, no page jump on toggle. */
.search-panel > .hero-modes { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-modes > .hero-mode { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(220px, 1.6fr) minmax(160px, 0.9fr) auto; gap: 12px; align-items: end; align-content: start;
  visibility: hidden; opacity: 0; transition: opacity .18s ease, visibility 0s linear .18s; }
.hero-modes > .hero-mode.is-active { visibility: visible; opacity: 1; transition: opacity .18s ease, visibility 0s; }
.hero-mode > .type-switch { grid-column: 1 / -1; }
.hero-mode[data-mode="berths"] > .field:first-child { grid-column: auto; }
@media (max-width: 980px) {
  .hero-modes > .hero-mode { grid-template-columns: 1fr 1fr; }
  .hero-mode > .btn { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .hero-modes > .hero-mode { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .hero-modes > .hero-mode, .hero-modes > .hero-mode.is-active { transition: none; } }

/* ===== Contact page ===== */
body.public .contact-hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 0; background: #0b1f33; padding-bottom: calc(28px + 32px); }
.contact-hero > .contact-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; z-index: -2; }
.contact-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 22, 40, .72), rgba(7, 22, 40, .88)); }
body.public .contact-hero .contact-hero-copy { padding-block: 84px 56px; }
body.public .contact-hero h1 { max-width: 18ch; }
body.public .contact-hero .pill { color: #cffafe; }
.contact-routes { padding-block: 56px 16px; }
.route-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.route-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e1e8f0; border-radius: 16px; padding: 22px; box-shadow: 0 6px 20px rgba(15, 42, 61, .06); transition: border-color .15s, box-shadow .15s; }
.route-card:hover, .route-card:focus-within { border-color: #67c4d6; box-shadow: 0 10px 28px rgba(15, 42, 61, .1); }
.route-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #e6f4f7; color: #0e6178; margin-bottom: 14px; }
.route-card h3 { margin: 0 0 6px; font-size: 1.08rem; color: #0f2a3d; }
.route-card p { margin: 0 0 16px; color: #475569; font-size: .95rem; line-height: 1.5; flex: 1; }
.route-links { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.route-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; font-size: .95rem; }
.route-ask { color: #0e6178; }
.route-more { color: #334155; text-decoration: underline; text-underline-offset: 3px; font-weight: 500 !important; }
.contact-main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; align-items: start; padding-block: 40px 64px; scroll-margin-top: 80px; }
.contact-form-card, .contact-details { background: #fff; border: 1px solid #e1e8f0; border-radius: 18px; padding: 30px; box-shadow: 0 8px 26px rgba(15, 42, 61, .07); min-width: 0; }
.contact-form-card h2, .contact-details h2 { margin: 0 0 4px; font-size: 1.45rem; color: #0f2a3d; }
.contact-form-card > .muted { margin: 0 0 18px; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form .cf-full { grid-column: 1 / -1; }
.contact-form .field { margin: 0; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; min-height: 44px; }
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form [aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 1px #b42318; }
.cf-submit { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.cf-submit .btn { min-height: 48px; padding-inline: 28px; }
.cf-submit p { margin: 0; font-size: .9rem; }
.contact-alert { display: flex; gap: 12px; align-items: flex-start; border-radius: 12px; padding: 14px 16px; margin: 0 0 18px; outline: none; }
.contact-alert p, .contact-alert ul { margin: 2px 0 0; }
.contact-alert ul { padding-left: 18px; }
.contact-alert svg { flex: none; margin-top: 1px; }
.contact-alert.is-ok { background: #e8f6f1; border: 1px solid #9fd8c4; color: #0b4f3c; }
.contact-alert.is-error { background: #fdeceb; border: 1px solid #f1b2ad; color: #8a1c13; }
.contact-alert:focus-visible { outline: 2px solid #0891b2; outline-offset: 2px; }
.contact-details dl { margin: 16px 0 20px; display: grid; gap: 14px; }
.contact-details dl > div { border-bottom: 1px solid #eef2f6; padding-bottom: 12px; }
.contact-details dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #4b5d6b; font-weight: 700; }
.contact-details dd { margin: 3px 0 0; color: #0f2a3d; overflow-wrap: anywhere; }
.contact-details dd a { color: #0e6178; font-weight: 650; }
.contact-details address { font-style: normal; line-height: 1.5; }
.contact-map { height: 220px; border-radius: 12px; overflow: hidden; background: #e6eef4; border: 1px solid #d7e2ea; z-index: 0; }
.contact-faq { background: #eef3f8; border-block: 1px solid #e1e8f0; padding-block: 64px; }
.contact-faq h2 { margin: 0 0 18px; color: #0f2a3d; }
.contact-faq .faq-list { display: grid; gap: 10px; max-width: 860px; }
.contact-faq .faq-answer { padding: 0 20px 16px; color: #334155; }
.contact-faq .faq-answer a { color: #0e6178; font-weight: 650; }
@media (max-width: 1080px) { .route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .contact-main { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  body.public .contact-hero { padding-bottom: calc(22px + 20px); }
  body.public .contact-hero .contact-hero-copy { padding-block: 56px 36px; }
  .contact-routes { padding-block: 36px 8px; }
  .contact-main { padding-block: 28px 44px; }
  .contact-faq { padding-block: 44px; }
  .contact-form-card, .contact-details { padding: 20px; }
}
@media (max-width: 560px) {
  .route-grid, .contact-form { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Marine services ===== */
.svc-search { margin: 26px auto 0; max-width: 760px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .96); text-align: left; }
.svc-search .field { margin: 0; color: #0f2a3d; }
.svc-search .field > span { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #334155; }
.svc-search input, .svc-search select, .svc-search .btn { min-height: 44px; width: 100%; }
.svc-chips { padding-block: 34px 6px; }
.svc-chips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.svc-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid #d5e0e9; color: #0f2a3d; font-weight: 600; font-size: .92rem; text-decoration: none; }
.svc-chip svg { color: #0e6178; flex: none; }
.svc-chip b { font-weight: 700; font-size: .78rem; color: #334155; background: #eef3f8; border-radius: 999px; padding: 1px 8px; }
.svc-chip:hover { border-color: #67c4d6; }
.svc-chip[aria-current="page"] { background: #0f2a3d; border-color: #0f2a3d; color: #fff; }
.svc-chip[aria-current="page"] svg { color: #67e8f9; }
.svc-chip[aria-current="page"] b { background: rgba(255, 255, 255, .16); color: #fff; }
.svc-results { padding-block: 24px 64px; }
.svc-results-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.svc-results-head h2 { margin: 0; font-size: 1.3rem; color: #0f2a3d; }
.svc-results-head .text-link { display: inline-flex; align-items: center; min-height: 44px; }
.svc-map { height: 380px; border-radius: 16px; overflow: hidden; border: 1px solid #d7e2ea; background: #e6eef4; z-index: 0; }
.svc-map.is-small { height: 260px; border-radius: 12px; }
.svc-results > .muted.small { margin: 8px 0 22px; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 18px; margin-bottom: 22px; }
.svc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e1e8f0; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px rgba(15, 42, 61, .06); min-width: 0; }
.svc-card:hover, .svc-card:focus-within { border-color: #67c4d6; }
.svc-card-media { display: block; aspect-ratio: 16 / 9; background: #eef3f8; }
.svc-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-card-ph { height: 100%; display: grid; place-content: center; justify-items: center; gap: 6px; color: #4b6475; font-size: .85rem; background: linear-gradient(135deg, #eef3f8, #e1ebf2); }
.svc-card-ph svg { color: #0e6178; opacity: .7; }
.svc-card-body { padding: 16px 18px 18px; display: grid; gap: 8px; align-content: start; }
.svc-card h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.svc-card h3 a { color: #0f2a3d; text-decoration: none; }
.svc-card h3 a:hover { text-decoration: underline; }
.svc-card h3 a::after { content: ""; } 
.svc-card-place { margin: 0; color: #475569; font-size: .9rem; }
.svc-dist { color: #0e6178; font-weight: 650; }
.svc-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.svc-cats li, .svc-cats a { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; color: #0b4f63; background: #e6f4f7; border-radius: 999px; padding: 3px 10px 3px 8px; }
.svc-cats .svc-more { padding-inline: 10px; }
.svc-card .badge-unclaimed { justify-self: start; }
.svc-empty { text-align: center; }
/* profile */
.svc-hero { position: relative; overflow: hidden; isolation: isolate; background: #0b1f33; color: #f1f5f9; padding: 40px 0 calc(28px + 32px + 28px); }
.svc-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.svc-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 22, 40, .7), rgba(7, 22, 40, .9)); }
.svc-hero:not(.has-photo)::before { background: linear-gradient(135deg, #0b2a44, #0f3b57); }
.svc-hero-inner { position: relative; display: grid; gap: 14px; }
.svc-crumbs { font-size: .9rem; color: #cbd5e1; }
.svc-crumbs a { color: #a5f3fc; display: inline-flex; align-items: center; min-height: 32px; }
.svc-hero-id { display: flex; gap: 16px; align-items: center; }
.svc-logo { width: 72px; height: 72px; border-radius: 14px; background: #fff; object-fit: contain; padding: 8px; flex: none; }
.svc-hero h1 { margin: 0; color: #fff; font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.1; overflow-wrap: anywhere; }
.svc-hero-place { margin: 4px 0 0; color: #dbe6ef; font-size: 1.05rem; }
.svc-cats.is-hero a { background: rgba(255, 255, 255, .12); color: #e0f7fb; text-decoration: none; min-height: 32px; border: 1px solid rgba(165, 243, 252, .35); }
.svc-cats.is-hero a:hover { background: rgba(255, 255, 255, .2); }
.svc-hero .badge-unclaimed { justify-self: start; }
.svc-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.svc-hero-actions .btn { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.svc-hero > .hero-wave { position: absolute; left: 0; width: 100%; height: 28px; transform: scaleY(-1); pointer-events: none; display: block; bottom: 31px; fill: #0b3150; z-index: 1; }
.svc-hero > .hero-wave-back { fill: #1b5f80; opacity: .55; bottom: 34px; transform: scaleY(-1) translateX(-6%); width: 112%; z-index: 0; }
.svc-hero > .hero-water { position: absolute; left: 0; right: 0; bottom: 0; height: 32px; background: #0b3150; z-index: 1; }
.svc-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; align-items: start; padding-block: 40px 40px; }
.svc-main, .svc-side { display: grid; gap: 20px; min-width: 0; }
.svc-section h2, .svc-side h2 { margin: 0 0 12px; font-size: 1.25rem; color: #0f2a3d; }
.svc-section p { line-height: 1.65; color: #1e293b; }
.svc-cat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.svc-cat-grid li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #f3f8fb; border: 1px solid #e1e8f0; color: #0f2a3d; font-weight: 600; }
.svc-cat-grid svg { color: #0e6178; flex: none; }
.svc-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.svc-gallery figure { margin: 0; }
.svc-gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; display: block; }
.svc-gallery figcaption { font-size: .85rem; color: #475569; margin-top: 6px; }
/* Empty photo box: sized by its own aspect, never by % of the panel (which made it spill past the panel edge). */
.svc-noph { display: grid; place-items: center; box-sizing: border-box; width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 5; max-height: 220px; border-radius: 12px; border: 1px dashed #b8c6d6; background: linear-gradient(135deg, #e2e8f0, #eef3f8); color: #536175; overflow: hidden; }
.svc-noph svg { max-width: 40%; height: auto; }
@media (max-width: 640px) { .svc-noph { aspect-ratio: 16 / 9; } }
.svc-directions { margin-top: 12px; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.svc-side .claim-card .btn { min-height: 44px; }
.svc-pop { display: grid; gap: 3px; min-width: 160px; }
.svc-pop a { font-weight: 650; color: #0e6178; }
.svc-pin svg path { fill: #0e6178; }
/* nearby on marina pages */
.svc-nearby-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.svc-nearby-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 64px; background: #fff; border: 1px solid #e1e8f0; border-radius: 14px; text-decoration: none; color: #0f2a3d; }
.svc-nearby-item:hover { border-color: #67c4d6; }
.svc-nearby-icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: #e6f4f7; color: #0e6178; }
.svc-nearby-text { display: grid; min-width: 0; flex: 1; }
.svc-nearby-text strong { overflow-wrap: anywhere; }
.svc-nearby-text span { font-size: .85rem; color: #475569; }
.svc-nearby-dist { flex: none; font-weight: 700; color: #0e6178; font-size: .9rem; }
/* portal */
.svc-edit { max-width: 860px; }
.svc-edit-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 6px 14px; border: 1px solid #e1e8f0; border-radius: 12px; padding: 12px 16px; }
.svc-edit-cats .check { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.svc-edit-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.svc-edit-photos { display: flex; flex-wrap: wrap; gap: 12px; }
.svc-edit-photos img { border-radius: 8px; object-fit: cover; }
@media (max-width: 900px) { .svc-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .svc-search { grid-template-columns: minmax(0, 1fr); }
  .svc-chips ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .svc-chip { white-space: nowrap; }
  .svc-map { height: 300px; }
  .svc-hero { padding-bottom: calc(22px + 20px + 22px); }
  .svc-hero > .hero-wave { height: 22px; bottom: 19px; }
  .svc-hero > .hero-wave-back { bottom: 22px; }
  .svc-hero > .hero-water { height: 20px; }
  .svc-edit-2 { grid-template-columns: minmax(0, 1fr); }
  .svc-results { padding-bottom: 44px; }
}
.svc-cats.is-hero li { background: none; padding: 0; }
.svc-cats.is-hero a { padding: 4px 12px 4px 10px; }
@media (max-width: 560px) {
  .svc-grid { gap: 12px; }
  .svc-card { flex-direction: row; }
  .svc-card-media { flex: none; width: 96px; aspect-ratio: auto; }
  .svc-card-ph > span { display: none; }
  .svc-card-body { padding: 12px 14px; gap: 6px; }
}
.svc-nearby-list > li { display: flex; }
.svc-nearby-item { flex: 1; }

/* Admin › Import (CSV upload, preview, API tokens). Cool grey-blue, navy and teal. */
body.desk .import-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; margin: 18px 0; align-items: start; }
@media (max-width: 900px) { body.desk .import-grid { grid-template-columns: 1fr; } }
body.desk .import-grid .panel h2, body.desk .import-tokens h2, body.desk .import-runs h2 { margin: 0 0 12px; font-size: 1.1rem; color: #0b1626; }
body.desk .import-types { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
body.desk .import-types legend { font-weight: 600; margin-bottom: 8px; color: #0b1626; }
body.desk .import-type { position: relative; cursor: pointer; }
body.desk .import-type input { position: absolute; opacity: 0; inset: 0; }
body.desk .import-type span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid #cbd5e1; background: #f8fafc; color: #334155; font-weight: 600; font-size: 0.92rem; }
body.desk .import-type input:checked + span { background: #0b1626; border-color: #0b1626; color: #fff; }
body.desk .import-type input:focus-visible + span { outline: 2px solid #0e7490; outline-offset: 2px; }
body.desk .import-tpl-list { list-style: none; padding: 0; margin: 10px 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
body.desk .import-cols summary { cursor: pointer; font-weight: 600; color: #0e7490; }
body.desk .import-cols dl { margin: 10px 0 0; font-size: 0.86rem; }
body.desk .import-cols dt { font-weight: 600; color: #0b1626; margin-top: 8px; }
body.desk .import-cols dd { margin: 2px 0 0; color: #5c6d7e; }
body.desk .import-tokens, body.desk .import-runs { margin: 18px 0; }
body.desk .import-token-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-top: 16px; padding-top: 16px; border-top: 1px solid #e2e8f0; }
body.desk .import-abilities { border: 0; padding: 0; margin: 0; display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.9rem; }
body.desk .import-abilities legend { font-weight: 600; font-size: 0.85rem; margin-bottom: 6px; }
body.desk .import-newtoken { background: #ecfeff; border: 1px solid #a5f3fc; border-radius: 12px; padding: 12px 14px; margin: 10px 0 14px; color: #0b1626; }
body.desk .import-token-value { display: block; margin-top: 6px; font-size: 0.95rem; word-break: break-all; user-select: all; background: #fff; padding: 8px 10px; border-radius: 8px; border: 1px solid #cbd5e1; }
body.desk .import-table tr.is-revoked td { color: #94a3b8; }
body.desk .import-table td { vertical-align: top; }
body.desk .import-run-errors summary { cursor: pointer; color: #7f1d1d; font-weight: 600; }
body.desk .import-run-errors ul { margin: 6px 0 0; padding-left: 18px; font-size: 0.82rem; max-width: 420px; }
body.desk .import-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; line-height: 1.6; white-space: nowrap; background: #eef2f6; color: #475569; }
body.desk .import-pill.created { background: #ccfbf1; color: #115e59; }
body.desk .import-pill.updated { background: #e0f2fe; color: #075985; }
body.desk .import-pill.unchanged { background: #eef2f6; color: #475569; }
body.desk .import-pill.skipped { background: #e2e8f0; color: #334155; }
body.desk .import-pill.error { background: #f3e6e6; color: #7f1d1d; }
body.desk .import-pill.claimed { background: #0b1626; color: #e2e8f0; margin-left: 4px; }
body.desk .import-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
@media (max-width: 760px) { body.desk .import-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.desk .import-stat { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 16px; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05); border-top: 4px solid #cbd5e1; }
body.desk .import-stat b { display: block; font-size: 1.7rem; color: #0b1626; font-family: var(--display); }
body.desk .import-stat span { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: #5c6d7e; }
body.desk .import-stat.created { border-top-color: #14b8a6; }
body.desk .import-stat.updated { border-top-color: #0e7490; }
body.desk .import-stat.error { border-top-color: #b45353; }
body.desk .import-confirm { margin: 0 0 16px; }
body.desk .import-confirm-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
body.desk .import-preview tr.is-error td { background: #fbf6f6; }
body.desk .import-preview tr.is-created td:first-child { box-shadow: inset 3px 0 0 #14b8a6; }
body.desk .import-preview tr.is-updated td:first-child { box-shadow: inset 3px 0 0 #0e7490; }
body.desk .import-preview tr.is-error td:first-child { box-shadow: inset 3px 0 0 #b45353; }
body.desk .import-errors { margin: 0; padding-left: 16px; color: #7f1d1d; }
body.desk .import-help { margin: 6px 0 0; }