/* ==========================================================================
   Book a Berth design system
   --------------------------------------------------------------------------
   Self-contained. No framework, no jQuery. Everything is scoped under .bb so
   it cannot leak into the rest of the site, and Bootstrap 2 inheritance is
   neutralised inside that scope.

   Type: Source Serif 4 for display, Inter for everything else. Both are
   self-hosted variable fonts, latin subset, so there is no third-party
   request and no layout shift beyond the initial swap.

   Loaded only on Book a Berth pages.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Fonts
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Berth Sans";
  src: url("/fonts/berth/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Berth Serif";
  src: url("/fonts/berth/source-serif-4-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --------------------------------------------------------------------------
   Host adaptation
   The site container is a fixed 940px from Bootstrap 2, which forces a
   horizontal scroll on phones. These pages need to work on a pontoon, so the
   container is made fluid. Only applies where this stylesheet is loaded.
   -------------------------------------------------------------------------- */
body .container.marketing {
  width: auto;
  max-width: 1180px;
  padding-left: 18px;
  padding-right: 18px;
}

@media (min-width: 1240px) {
  body .container.marketing { padding-left: 0; padding-right: 0; }
}

.bb-host .hgcontent { padding: 0; background: transparent; border: 0; }

/* The host theme styles bare elements inside .marketing: paragraphs are pinned
   to 14px and left aligned with !important, headings carry their own margins.
   Those rules reach inside our scope, so they are undone here. This sheet loads
   after the theme, so equal-specificity selectors win. */
.bb p, .bb li {
  font-size: inherit;
  line-height: inherit;
  text-align: inherit !important;
}
.bb h1, .bb h2, .bb h3, .bb h4 { margin: 0; text-align: inherit !important; }
.bb img { margin: 0; }


/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
.bb {
  --bb-ink:        #0c1e2d;
  --bb-ink-soft:   #4d6274;
  --bb-ink-faint:  #7c8fa0;
  --bb-line:       #dfe6ec;
  --bb-line-soft:  #edf1f5;
  --bb-bg:         #f5f8fa;
  --bb-surface:    #ffffff;
  --bb-surface-alt:#f7fafc;

  --bb-navy:       #0d3b5c;
  --bb-navy-deep:  #06263b;
  --bb-accent:     #0f8fa8;
  --bb-accent-deep:#0a7086;
  --bb-accent-wash:#e8f5f8;

  --bb-yes:        #17703f;
  --bb-yes-wash:   #e9f4ee;
  --bb-no:         #a63a29;
  --bb-no-wash:    #fbedeb;
  --bb-warn:       #8f6008;
  --bb-warn-wash:  #fdf4e3;
  --bb-gold:       #c9871f;

  --bb-radius:     16px;
  --bb-radius-sm:  10px;
  --bb-radius-lg:  24px;

  --bb-shadow-sm:  0 1px 2px rgba(12,30,45,.05), 0 2px 6px rgba(12,30,45,.04);
  --bb-shadow:     0 2px 6px rgba(12,30,45,.05), 0 12px 32px rgba(12,30,45,.08);
  --bb-shadow-lg:  0 4px 10px rgba(12,30,45,.06), 0 28px 60px rgba(12,30,45,.14);

  --bb-font: "Berth Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --bb-font-display: "Berth Serif", Georgia, "Times New Roman", serif;

  font-family: var(--bb-font);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--bb-ink);
  font-feature-settings: "cv02" 1, "cv03" 1, "cv04" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Neutralise Bootstrap 2 inheritance inside our scope */
.bb *, .bb *::before, .bb *::after { box-sizing: border-box; }

/* :where() keeps the reset at zero specificity, so the spacing utilities below
   can still set margins on a plain <p> without an arms race. */
.bb :where(p, ul, ol, h1, h2, h3, h4, figure) { margin: 0; }
.bb :where(ul, ol) { padding: 0; list-style: none; }
.bb img { max-width: 100%; height: auto; border: 0; }
.bb a { color: var(--bb-accent-deep); text-decoration: none; }
.bb a:hover { text-decoration: underline; }
.bb strong, .bb b { font-weight: 600; }

/* The host theme renders <code> in crimson on grey, which reads as an error
   next to a booking reference. */
.bb code, .bb kbd {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .9375em;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bb-line-soft);
  border: 0;
  color: var(--bb-ink);
  white-space: nowrap;
}

.bb :where(input, select, textarea, button) {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

/* Bootstrap 2 forces a fixed height and inline-block on inputs */
.bb input[type="text"], .bb input[type="email"], .bb input[type="tel"],
.bb input[type="number"], .bb input[type="date"], .bb select, .bb textarea {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--bb-radius-sm);
}


/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.bb-wrap { max-width: 880px; margin: 0 auto; padding: 10px 0 72px; }
.bb-wrap--wide { max-width: 1120px; }
.bb-wrap--narrow { max-width: 640px; }

.bb-stack > * + * { margin-top: 26px; }
.bb-stack-sm > * + * { margin-top: 14px; }
.bb-stack-lg > * + * { margin-top: 44px; }

.bb-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 660px) {
  .bb-grid--2 { grid-template-columns: 1fr 1fr; }
  .bb-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .bb-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.bb-grid .bb-span-2 { grid-column: 1 / -1; }

.bb-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bb-row--between { justify-content: space-between; }
.bb-spacer { flex: 1 1 auto; }

/* Prose never runs wider than it can be read comfortably */
.bb-prose { max-width: 68ch; }


/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.bb h1, .bb .bb-h1 {
  font-family: var(--bb-font-display);
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  font-weight: 600;
  color: var(--bb-navy-deep);
}

/* Standalone decision pages are narrow and read at arm's length on a phone,
   so their headline sits between h1 and h2. */
.bb .bb-h1--compact {
  font-size: clamp(1.7rem, 1.4rem + 1.1vw, 2.1rem);
  line-height: 1.18;
}

.bb h2, .bb .bb-h2 {
  font-family: var(--bb-font-display);
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.05rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  font-weight: 600;
  color: var(--bb-navy-deep);
}

.bb h3 {
  font-family: var(--bb-font);
  font-size: 1.0625rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--bb-navy-deep);
}

/* Card titles sit a step below a section heading but still carry the
   display face, so a card reads as a unit rather than a run of bold text. */
.bb .bb-h3 {
  font-family: var(--bb-font-display);
  font-size: 1.1875rem;
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--bb-navy-deep);
}

.bb .bb-lede {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  line-height: 1.62;
  color: var(--bb-ink-soft);
  max-width: 64ch;
}

.bb .bb-muted { color: var(--bb-ink-soft); }
.bb .bb-faint { color: var(--bb-ink-faint); }
.bb .bb-small { font-size: .9375rem; line-height: 1.6; }
.bb .bb-xs    { font-size: .8125rem; line-height: 1.55; }
.bb .bb-strong { font-weight: 600; }
.bb .bb-center { text-align: center !important; }
.bb .bb-nums { font-variant-numeric: tabular-nums; }

.bb .bb-eyebrow {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bb-accent-deep);
}

/* Section header block: eyebrow, title, one line of context */
.bb-sectionhead { max-width: 64ch; }
.bb-sectionhead h2 { margin-top: 6px; }
.bb-sectionhead p { margin-top: 10px; color: var(--bb-ink-soft); }


/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */
.bb-card {
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
  padding: 26px 24px;
  box-shadow: var(--bb-shadow-sm);
}
@media (min-width: 660px) { .bb-card { padding: 34px 36px; } }

.bb-card--flush { padding: 0; overflow: hidden; }
.bb-card--raised { box-shadow: var(--bb-shadow); border-color: transparent; }
.bb-card--quiet { background: var(--bb-surface-alt); box-shadow: none; }

.bb-card__head {
  padding: 20px 26px;
  border-bottom: 1px solid var(--bb-line);
  background: var(--bb-surface-alt);
}
.bb-card__body { padding: 26px; }

.bb-divider { height: 1px; background: var(--bb-line); border: 0; margin: 28px 0; }


/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.bb-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--bb-radius-lg);
  background:
    radial-gradient(900px 420px at 8% -40%, rgba(15,143,168,.45), transparent 60%),
    linear-gradient(155deg, #12466b 0%, var(--bb-navy-deep) 78%);
  color: #fff;
  padding: 40px 26px;
  box-shadow: var(--bb-shadow);
}
@media (min-width: 660px) { .bb-hero { padding: 60px 52px; } }

.bb-hero h1 { color: #fff; max-width: 20ch; }
.bb-hero h1 + .bb-lede { margin-top: 18px; }
.bb-hero .bb-eyebrow { color: #86d8e8; }
.bb-hero .bb-lede { color: rgba(255,255,255,.82); max-width: 58ch; }
.bb-hero .bb-eyebrow + h1 { margin-top: 14px; }
.bb-hero a { color: #9fe0ee; }
.bb-hero > * { position: relative; z-index: 1; }

/* Faint compass-rose rings, purely decorative */
.bb-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -140px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 30px rgba(255,255,255,.04), 0 0 0 72px rgba(255,255,255,.026);
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   Badges and pills
   -------------------------------------------------------------------------- */
.bb-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .002em;
  background: var(--bb-accent-wash);
  color: var(--bb-accent-deep);
  white-space: nowrap;
}
.bb-badge--yes   { background: var(--bb-yes-wash);  color: var(--bb-yes); }
.bb-badge--no    { background: var(--bb-no-wash);   color: var(--bb-no); }
.bb-badge--warn  { background: var(--bb-warn-wash); color: var(--bb-warn); }
.bb-badge--quiet { background: var(--bb-line-soft); color: var(--bb-ink-soft); }
.bb-badge--onDark {
  background: rgba(255,255,255,.10);
  color: #eaf6f9;
  border: 1px solid rgba(255,255,255,.16);
}

.bb-badges { display: flex; flex-wrap: wrap; gap: 10px; }

.bb-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }


/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */
.bb-trust {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--bb-line);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
  overflow: hidden;
}
@media (min-width: 560px) { .bb-trust { grid-template-columns: repeat(3, 1fr); } }

.bb-trust__item { background: var(--bb-surface); padding: 22px 24px; }
.bb-trust__value {
  font-family: var(--bb-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--bb-navy-deep);
  letter-spacing: -.015em;
  line-height: 1.15;
}
.bb-trust__label { font-size: .875rem; color: var(--bb-ink-soft); margin-top: 5px; }


/* --------------------------------------------------------------------------
   Numbered explainer, for "what actually happens"
   -------------------------------------------------------------------------- */
.bb-explain { display: grid; }
.bb-explain__item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--bb-line-soft);
}
.bb-explain__item:first-child { border-top: 0; padding-top: 4px; }
.bb-explain__item:last-child { padding-bottom: 4px; }

.bb-explain__num {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bb-accent-wash);
  color: var(--bb-accent-deep);
  display: grid;
  place-items: center;
  font-family: var(--bb-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
}
.bb-explain__num--tick { background: var(--bb-yes-wash); color: var(--bb-yes); }

.bb-explain__title { font-size: 1.0625rem; font-weight: 600; color: var(--bb-navy-deep); }
.bb-explain__body { margin-top: 6px; color: var(--bb-ink-soft); max-width: 62ch; }


/* --------------------------------------------------------------------------
   Question and answer list
   -------------------------------------------------------------------------- */
.bb-qa { display: grid; }
.bb-qa__item { padding: 24px 0; border-top: 1px solid var(--bb-line-soft); }
.bb-qa__item:first-child { border-top: 0; padding-top: 4px; }
.bb-qa__item:last-child { padding-bottom: 0; }
.bb .bb-qa__q {
  font-family: var(--bb-font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bb-navy-deep);
}
.bb-qa__a { margin-top: 8px; color: var(--bb-ink-soft); max-width: 70ch; }


/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.bb-fieldset { border: 0; padding: 0; margin: 0; }

.bb .bb-legend {
  display: block;
  font-family: var(--bb-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--bb-navy-deep);
  text-transform: none;
  width: 100%;
  margin: 0 0 26px;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--bb-line);
}

/* Vertical rhythm between fields inside a fieldset. The legend keeps only a
   hairline of its own margin so it does not double up with this gap. */
.bb-fields > * + * { margin-top: 22px; }
.bb .bb-fields > .bb-legend { margin-bottom: 4px; }

.bb-field { display: block; }

.bb-label {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--bb-ink);
  margin-bottom: 8px;
}
.bb-label .bb-req { color: var(--bb-no); margin-left: 3px; }
.bb-label .bb-opt { color: var(--bb-ink-faint); font-weight: 400; margin-left: 5px; font-size: .875rem; }

.bb .bb-hint { font-size: .875rem; line-height: 1.5; color: var(--bb-ink-soft); margin-top: 8px; }

.bb-input, .bb-select, .bb-textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  font-size: 1rem;
  background: var(--bb-surface);
  border: 1px solid #cbd6df;
  border-radius: var(--bb-radius-sm);
  color: var(--bb-ink);
  transition: border-color .14s ease, box-shadow .14s ease;
  -webkit-appearance: none;
  appearance: none;
}

.bb-textarea { min-height: 128px; resize: vertical; line-height: 1.6; }

.bb-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234d6274' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}

.bb-input::placeholder, .bb-textarea::placeholder { color: #9fb0bd; }

.bb-input:hover, .bb-select:hover, .bb-textarea:hover { border-color: #adbecc; }

.bb-input:focus, .bb-select:focus, .bb-textarea:focus {
  outline: none;
  border-color: var(--bb-accent);
  box-shadow: 0 0 0 3px rgba(15,143,168,.17);
}

.bb-input[aria-invalid="true"], .bb-select[aria-invalid="true"], .bb-textarea[aria-invalid="true"] {
  border-color: var(--bb-no);
  background: #fffbfa;
}
.bb-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(166,58,41,.15); }

/* Input with a trailing unit, e.g. metres */
.bb-unit { position: relative; }
.bb-unit .bb-input { padding-right: 56px; }
.bb-unit__suffix {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--bb-ink-faint);
  pointer-events: none;
}

/* Checkbox and radio */
.bb-check {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-sm);
  background: var(--bb-surface);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.bb-check:hover { border-color: #adbecc; background: var(--bb-surface-alt); }
.bb-check input { margin: 1px 0 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--bb-accent); }
.bb-check__title { display: block; font-weight: 600; font-size: .9375rem; }
.bb-check__note { display: block; font-size: .875rem; color: var(--bb-ink-soft); margin-top: 3px; }
.bb-check:focus-within { border-color: var(--bb-accent); box-shadow: 0 0 0 3px rgba(15,143,168,.15); }

/* Segmented choice, used for price basis and decline reasons */
.bb-choices { display: grid; gap: 12px; }
.bb-choice {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border: 1.5px solid var(--bb-line);
  border-radius: var(--bb-radius-sm);
  background: var(--bb-surface);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.bb-choice:hover { border-color: #adbecc; }
.bb-choice input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--bb-accent); }
.bb-choice__label { font-weight: 550; }
.bb-choice:has(input:checked) {
  border-color: var(--bb-accent);
  background: var(--bb-accent-wash);
}
.bb-choice:focus-within { box-shadow: 0 0 0 3px rgba(15,143,168,.15); }

/* Honeypot: must be reachable by bots but invisible and unfocusable for people */
.bb-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}


/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.bb .bb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  min-height: 50px;
  border: 1px solid transparent;
  border-radius: var(--bb-radius-sm);
  background: var(--bb-accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .002em;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(12,30,45,.10);
  transition: background .14s ease, box-shadow .14s ease, transform .06s ease;
  -webkit-appearance: none;
  appearance: none;
}
.bb .bb-btn:hover { background: var(--bb-accent-deep); color: #fff; text-decoration: none; }
.bb .bb-btn:active { transform: translateY(1px); }
.bb .bb-btn:focus-visible { outline: 3px solid rgba(15,143,168,.45); outline-offset: 2px; }

.bb .bb-btn--lg { padding: 18px 32px; min-height: 58px; font-size: 1.0625rem; border-radius: var(--bb-radius); }
.bb .bb-btn--sm { padding: 9px 15px; min-height: 38px; font-size: .875rem; }
.bb .bb-btn--block { display: flex; width: 100%; }

.bb .bb-btn--navy { background: var(--bb-navy); }
.bb .bb-btn--navy:hover { background: var(--bb-navy-deep); }

.bb .bb-btn--ghost {
  background: transparent;
  border-color: #cbd6df;
  color: var(--bb-ink);
  box-shadow: none;
}
.bb .bb-btn--ghost:hover { background: var(--bb-surface-alt); border-color: #adbecc; color: var(--bb-ink); }

.bb .bb-btn--quiet {
  background: transparent; color: var(--bb-ink-soft);
  box-shadow: none; padding-left: 8px; padding-right: 8px;
}
.bb .bb-btn--quiet:hover { background: transparent; color: var(--bb-ink); text-decoration: underline; }

.bb .bb-btn--yes { background: var(--bb-yes); }
.bb .bb-btn--yes:hover { background: #125c33; }
.bb .bb-btn--no  { background: var(--bb-no); }
.bb .bb-btn--no:hover { background: #8b2f21; }

.bb .bb-btn[disabled], .bb-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* On dark backgrounds the ghost button needs to invert */
.bb .bb-hero .bb-btn--ghost { border-color: rgba(255,255,255,.34); color: #fff; }
.bb .bb-hero .bb-btn--ghost:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.5); color: #fff; }

.bb .bb-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.bb .bb-actions--end { justify-content: flex-end; }

.bb .bb-cal-actions { gap: 10px; }
.bb .bb-cal-actions .bb-btn { min-height: 44px; }

/* The two decision buttons on the marina response page */
.bb .bb-decide { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .bb .bb-decide { grid-template-columns: 1fr 1fr; } }

.bb .bb-decide .bb-btn {
  flex-direction: column;
  gap: 4px;
  padding: 26px 20px;
  min-height: 96px;
  font-size: 1.25rem;
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-sm);
}
.bb .bb-decide .bb-btn small { font-size: .875rem; font-weight: 500; opacity: .9; }


/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.bb-alert {
  padding: 18px 20px;
  border-radius: var(--bb-radius-sm);
  border: 1px solid;
  font-size: .9375rem;
  line-height: 1.6;
}
.bb-alert h3 { margin-bottom: 5px; font-size: 1rem; color: inherit; }
.bb-alert ul { margin-top: 9px; }
.bb-alert li { padding-left: 18px; position: relative; margin-top: 4px; }
.bb-alert li::before { content: "•"; position: absolute; left: 4px; }

.bb-alert--error   { background: var(--bb-no-wash);   border-color: #f0c6bf; color: #7d2b1e; }
.bb-alert--success { background: var(--bb-yes-wash);  border-color: #bbdfca; color: #115730; }
.bb-alert--info    { background: var(--bb-accent-wash); border-color: #bce0e9; color: #095c6d; }
.bb-alert--warn    { background: var(--bb-warn-wash); border-color: #ecd6a8; color: #77500a; }


/* --------------------------------------------------------------------------
   Definition rows, used for request and offer summaries
   -------------------------------------------------------------------------- */
.bb-dl { display: grid; grid-template-columns: 1fr; }
.bb-dl__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bb-line-soft);
}
@media (min-width: 560px) {
  .bb-dl__row { grid-template-columns: minmax(140px, 26%) 1fr; align-items: baseline; }
}
.bb-dl__row:first-child { padding-top: 2px; }
.bb-dl__row:last-child { border-bottom: 0; padding-bottom: 2px; }
.bb-dl__key { color: var(--bb-ink-soft); font-size: .9375rem; }
.bb-dl__val { font-weight: 600; }
.bb-dl__val a { font-weight: 600; }

/* Vessel spec chips */
.bb-specs { display: flex; flex-wrap: wrap; gap: 12px; }
.bb-spec {
  background: var(--bb-surface-alt);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-sm);
  padding: 12px 16px;
  min-width: 96px;
}
.bb-spec__label {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--bb-ink-faint); font-weight: 700;
}
.bb-spec__value {
  font-size: 1.1875rem; font-weight: 650; color: var(--bb-navy-deep);
  letter-spacing: -.015em; font-variant-numeric: tabular-nums; margin-top: 2px;
}


/* --------------------------------------------------------------------------
   Price display
   -------------------------------------------------------------------------- */
.bb-price {
  background: linear-gradient(160deg, var(--bb-accent-wash), #fff 72%);
  border: 1px solid #c2e3ea;
  border-radius: var(--bb-radius);
  padding: 28px 26px;
  text-align: center;
}
.bb-price__amount {
  font-family: var(--bb-font-display);
  font-size: clamp(2.3rem, 1.7rem + 2.6vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -.028em;
  color: var(--bb-navy-deep);
  line-height: 1.02;
}
.bb-price__basis { color: var(--bb-ink-soft); font-size: .9375rem; margin-top: 8px; }
.bb-price__total { margin-top: 12px; font-size: .9375rem; color: var(--bb-ink-soft); }
.bb-price__total strong { color: var(--bb-navy-deep); }


/* --------------------------------------------------------------------------
   Compact stepper, showing where you are in the flow
   -------------------------------------------------------------------------- */
.bb-steps { display: grid; gap: 14px; }
@media (min-width: 700px) { .bb-steps { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 20px; } }

.bb-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--bb-ink-faint);
}
.bb-step__num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bb-line-soft);
  color: var(--bb-ink-faint);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8125rem; font-weight: 700;
  flex: 0 0 auto;
}
.bb-step--done .bb-step__num { background: var(--bb-yes); color: #fff; }
.bb-step--done { color: var(--bb-ink-soft); }
.bb-step--now .bb-step__num { background: var(--bb-accent); color: #fff; }
.bb-step--now { color: var(--bb-ink); font-weight: 600; }


/* --------------------------------------------------------------------------
   Timeline, used on the mariner status page and the admin console
   -------------------------------------------------------------------------- */
.bb-timeline { position: relative; padding-left: 28px; }
.bb-timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--bb-line);
}
.bb-tl { position: relative; padding: 0 0 22px; }
.bb-tl:last-child { padding-bottom: 0; }
.bb-tl::before {
  content: "";
  position: absolute;
  left: -25px; top: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bb-surface);
  border: 2.5px solid var(--bb-line);
}
.bb-tl--yes::before  { border-color: var(--bb-yes); }
.bb-tl--no::before   { border-color: var(--bb-no); }
.bb-tl--now::before  { border-color: var(--bb-accent); box-shadow: 0 0 0 4px rgba(15,143,168,.16); }
.bb-tl__title { font-weight: 600; font-size: .9375rem; color: var(--bb-ink); }
.bb-tl__meta { font-size: .8125rem; color: var(--bb-ink-faint); margin-top: 2px; }
.bb-tl__body { font-size: .9375rem; color: var(--bb-ink-soft); margin-top: 6px; }


/* --------------------------------------------------------------------------
   Standalone pages (arriving from an email, no site chrome)
   -------------------------------------------------------------------------- */
.bb-standalone {
  min-height: 100vh;
  background: var(--bb-bg);
  padding: 0 18px 56px;
  margin: 0;
}
.bb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 0 26px;
}
.bb .bb-topbar__brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--bb-font-display);
  font-weight: 600; font-size: 1.0625rem;
  color: var(--bb-navy-deep);
}
.bb-topbar__brand img { height: 34px; width: auto; }

.bb-foot {
  max-width: 760px;
  margin: 36px auto 0;
  text-align: center;
  font-size: .8125rem;
  color: var(--bb-ink-faint);
}
.bb-foot a { color: var(--bb-ink-soft); }


/* --------------------------------------------------------------------------
   Test mode ribbon
   -------------------------------------------------------------------------- */
.bb-testbar {
  background: repeating-linear-gradient(135deg, #7a5206, #7a5206 12px, #96670c 12px, #96670c 24px);
  color: #fff;
  text-align: center;
  padding: 11px 16px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: var(--bb-radius-sm);
}
.bb-testbar strong { text-transform: uppercase; letter-spacing: .12em; }


/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.bb-empty { text-align: center; padding: 52px 24px; color: var(--bb-ink-soft); }
.bb-empty__icon { font-size: 2.75rem; opacity: .3; margin-bottom: 12px; line-height: 1; }


/* --------------------------------------------------------------------------
   Tables and navigation, used by the admin console
   -------------------------------------------------------------------------- */
.bb-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--bb-radius); }

.bb-table { width: 100%; border-collapse: collapse; font-size: .9375rem; background: var(--bb-surface); }
.bb-table th, .bb-table td { padding: 13px 16px; text-align: left; vertical-align: top; }
.bb-table thead th {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 700;
  color: var(--bb-ink-faint);
  background: var(--bb-surface-alt);
  border-bottom: 1px solid var(--bb-line);
  white-space: nowrap;
}
.bb-table tbody tr { border-bottom: 1px solid var(--bb-line-soft); }
.bb-table tbody tr:last-child { border-bottom: 0; }
.bb-table tbody tr:hover { background: var(--bb-surface-alt); }
.bb-table td.bb-num, .bb-table th.bb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-table .bb-nowrap { white-space: nowrap; }
.bb-table a { font-weight: 600; }
.bb-table tfoot td { border-top: 2px solid var(--bb-line); padding-top: 16px; }
.bb-struck td { color: var(--bb-ink-faint); text-decoration: line-through; }

.bb-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--bb-line);
  margin-bottom: 26px;
}
.bb-nav a {
  padding: 11px 16px;
  border-radius: 8px 8px 0 0;
  color: var(--bb-ink-soft);
  font-weight: 600;
  font-size: .9375rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.bb-nav a:hover { background: var(--bb-surface-alt); text-decoration: none; color: var(--bb-ink); }
.bb-nav a.is-active { color: var(--bb-accent-deep); border-bottom-color: var(--bb-accent); background: var(--bb-accent-wash); }

.bb-stats { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .bb-stats { grid-template-columns: repeat(4, 1fr); } }

.bb-stat {
  background: var(--bb-surface);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
  padding: 24px 22px;
}
.bb-stat__value {
  font-family: var(--bb-font-display);
  font-size: 2.35rem;
  font-weight: 600;
  letter-spacing: -.028em;
  color: var(--bb-navy-deep);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.bb-stat__label { font-size: .875rem; color: var(--bb-ink-soft); margin-top: 8px; line-height: 1.45; }
.bb-stat--alert .bb-stat__value { color: var(--bb-no); }
.bb-stat--good  .bb-stat__value { color: var(--bb-yes); }

.bb-admin { background: var(--bb-bg); min-height: 100vh; padding: 0 20px 64px; margin: 0; }
.bb-adminbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto; padding: 20px 0;
}
.bb-adminbar__title {
  font-family: var(--bb-font-display);
  font-weight: 600; font-size: 1.1875rem;
  color: var(--bb-navy-deep);
}

/* A commission statement is printed and posted to the marina, so it has to
   survive leaving the screen. */
@media print {
  .bb-adminbar, .bb-nav, .bb-btn, .bb-alert, form .bb-row { display: none !important; }
  .bb-admin { padding: 0; }
  .bb-card { border: 0; box-shadow: none; padding: 0; }
  .bb-table tbody tr:hover { background: none; }
}


/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
.bb-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.bb :focus-visible { outline: 3px solid rgba(15,143,168,.45); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .bb *, .bb *::before, .bb *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}


/* --------------------------------------------------------------------------
   Dark mode, for the standalone email-linked pages
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .bb-standalone .bb, .bb-standalone.bb {
    --bb-ink:         #e7eef4;
    --bb-ink-soft:    #a7bac9;
    --bb-ink-faint:   #7e93a3;
    --bb-line:        #24384a;
    --bb-line-soft:   #1b2c3b;
    --bb-bg:          #0a1622;
    --bb-surface:     #10202e;
    --bb-surface-alt: #142838;
    --bb-accent:      #2eaec6;
    --bb-accent-deep: #46bdd3;
    --bb-accent-wash: #12303a;
    --bb-yes:         #3fa76c;
    --bb-yes-wash:    #122c1f;
    --bb-no:          #e0705c;
    --bb-no-wash:     #2e1815;
    --bb-warn:        #d8a33f;
    --bb-warn-wash:   #2b2110;
  }

  .bb-standalone { background: #0a1622; }
  .bb-standalone .bb h1, .bb-standalone .bb h2, .bb-standalone .bb h3,
  .bb-standalone .bb .bb-legend, .bb-standalone .bb .bb-qa__q { color: #f2f7fa; }
  .bb-standalone .bb-input, .bb-standalone .bb-select, .bb-standalone .bb-textarea {
    background: #0c1a26;
    border-color: #2b435a;
    color: #e7eef4;
  }
  .bb-standalone .bb-input::placeholder { color: #63788a; }
  .bb-standalone .bb-price { background: linear-gradient(160deg, #12303a, #10202e 70%); border-color: #23505d; }
  .bb-standalone .bb-price__amount { color: #f2f7fa; }
  .bb-standalone .bb-trust__value { color: #f2f7fa; }
  .bb-standalone .bb-spec__value { color: #f2f7fa; }
  .bb-standalone .bb-btn--ghost { border-color: #33506b; color: #e7eef4; }
  .bb-standalone .bb-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a7bac9' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  }
}


/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .bb-topbar, .bb-foot, .bb-actions, .bb-btn { display: none !important; }
  .bb-card { box-shadow: none; border-color: #ccc; }
  .bb-hero { background: #fff !important; color: #000 !important; }
  .bb-hero h1, .bb-hero .bb-lede { color: #000 !important; }
}