:root {
  --navy-deep: #080F1D;
  --navy: #0D1C35;
  --navy-mid: #132442;
  --navy-light: #1C3460;
  --gold: #B8924A;
  --gold-light: #D4AB6A;
  --gold-dim: rgba(184, 146, 74, .15);
  --red: #C81822;
  --white: #F5F3EE;
  --white-dim: rgba(245, 243, 238, .72);
  --white-faint: rgba(245, 243, 238, .08);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Outfit', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  background:
    radial-gradient(ellipse at top, rgba(28, 52, 96, .5) 0%, transparent 55%),
    var(--navy-deep);
  color: var(--white);
  min-height: 100vh;
}

.page {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
}

/* Default content column for inner pages — roughly 80% of .page's
   1800px. Used for nearly everything below a full-bleed hero: prose,
   card grids, tables, forms, maps. Only a few genuinely short/dense
   elements (chat widget, hero titles, pricing/checklist cards) stay
   narrower than this on purpose — see their own comments. */
.content-wide {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* Header */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1800px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  gap: 1.5rem;
}

.site-header-logo img {
  height: 56px;
  width: auto;
  display: block;
}

.site-nav {
  display: flex;
  gap: 2rem;
}

.site-nav a {
  color: var(--white-dim);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s;
}

.site-nav a:hover { color: var(--white); }

.site-nav .nav-ai { position: relative; }

.nav-ai-badge {
  display: inline-block;
  margin-left: .35rem;
  padding: .1rem .35rem;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .08em;
  border-radius: 3px;
  vertical-align: 2px;
}

.nav-ai::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + .6rem);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--navy-light);
  color: var(--white);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: .35rem .6rem;
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 10;
}

.nav-ai:hover::after,
.nav-ai:focus-visible::after { opacity: 1; }

.site-nav-toggle { display: none; }

/* Phones: menu behind a toggle, so the hero (and the AI Nawigator box)
   starts right under the logo instead of under three rows of links. */
@media (max-width: 640px) {
  .site-header { flex-wrap: wrap; padding: 1rem 1.25rem; gap: 0; }
  .site-header-logo img { height: 44px; }
  .site-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    background: none;
    border: 1px solid var(--white-faint);
    border-radius: 4px;
    cursor: pointer;
  }
  .site-nav-toggle span { display: block; height: 2px; background: var(--white); }
  .site-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    padding-top: .75rem;
  }
  .site-header.nav-open .site-nav { display: flex; }
  .site-nav a { padding: .8rem 0; border-top: 1px solid var(--white-faint); font-size: .85rem; }
  .nav-ai::after { display: none; }
}

/* Site footer */

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, .05);
  padding: 3.5rem 3rem 2rem;
  margin-top: 4rem;
}

.site-footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1800px;
  margin: 0 auto;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.site-footer-logo {
  margin-bottom: 1rem;
  display: inline-block;
}

.site-footer-logo img { height: 72px; width: auto; display: block; }

.site-footer-tagline {
  font-size: .8rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--white-dim);
  max-width: 260px;
}

.site-footer-social { display: flex; gap: .9rem; margin-top: 1.25rem; }

.site-footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(245, 243, 238, .2);
  color: var(--white-dim);
  transition: border-color .2s ease, color .2s ease;
}

.site-footer-social a:hover { border-color: var(--gold); color: var(--gold); }
.site-footer-social svg { width: 16px; height: 16px; fill: currentColor; }

.site-footer-col-title {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.site-footer-links { list-style: none; display: flex; flex-direction: column; gap: .7rem; padding: 0; margin: 0; }

.site-footer-links a {
  font-size: .8rem;
  font-weight: 300;
  color: var(--white-dim);
  text-decoration: none;
  transition: color .2s;
}

.site-footer-links a:hover { color: var(--white); }

.site-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1800px;
  margin: 0 auto;
  padding-top: 2rem;
  font-size: .7rem;
  font-weight: 300;
  color: rgba(245, 243, 238, .5);
}

.site-footer-legal { display: flex; gap: 2rem; }
.site-footer-legal a { color: rgba(245, 243, 238, .5); text-decoration: none; }
.site-footer-legal a:hover { color: var(--white-dim); }
.site-footer-legal button#cookie-settings-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: rgba(245, 243, 238, .5);
}
.site-footer-legal button#cookie-settings-link:hover { color: var(--white-dim); }

.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1000;
  max-width: 640px;
  margin: 0 auto;
  background: var(--navy-mid);
  border: 1px solid var(--white-faint);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.cookie-banner[hidden] { display: none; }

.cookie-banner-text {
  flex: 1 1 320px;
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--white-dim);
}

.cookie-banner-text a { color: var(--gold-light); }

.cookie-banner-actions {
  display: flex;
  gap: .75rem;
  flex-shrink: 0;
}

.cookie-banner-btn {
  border-radius: 3px;
  padding: .6rem 1.1rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.cookie-banner-btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-deep);
}
.cookie-banner-btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); }

.cookie-banner-btn-secondary {
  background: transparent;
  border-color: var(--white-faint);
  color: var(--white-dim);
}
.cookie-banner-btn-secondary:hover { color: var(--white); border-color: var(--white-dim); }

@media (max-width: 1024px) {
  .site-footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .site-footer-top { grid-template-columns: 1fr; }
  .site-footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }

  /* Compact banner on phones — the full-size one covered the hero's
     AI Nawigator box. */
  .cookie-banner { left: .5rem; right: .5rem; bottom: .5rem; padding: .85rem 1rem; gap: .65rem; }
  .cookie-banner-text { flex-basis: 100%; font-size: .75rem; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-btn { flex: 1; padding: .55rem .5rem; }
}

/* Hero / intro */

.hero-eyebrow {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .75rem;
}

.about-hero h1,
.about-hero h2,
.blog-header h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.2rem;
  margin: 0 0 .75rem;
}

.about-hero-sub {
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  color: var(--gold-light);
  margin: 0;
}

/* Homepage photo hero */

.site-hero {
  position: relative;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 2rem 5rem;
  overflow: hidden;
}

.site-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.site-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.site-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(8, 15, 29, .92) 0%, rgba(8, 15, 29, .4) 42%, rgba(8, 15, 29, .1) 68%, rgba(8, 15, 29, .3) 100%),
    linear-gradient(to right, rgba(8, 15, 29, .5) 0%, transparent 50%);
}

.site-hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.site-hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  letter-spacing: .2em;
  margin-bottom: 1.5rem;
}

.site-hero .hero-eyebrow::before {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: var(--gold);
}

.site-hero-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.1;
  margin: 0 0 1.5rem;
}

.site-hero-sub {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--white-dim);
  max-width: 440px;
  margin: 0;
}

.site-hero-coords {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  z-index: 2;
  font-size: .65rem;
  letter-spacing: .2em;
  color: var(--white-dim);
  font-family: 'Courier New', monospace;
}

.search-card {
  margin-top: 2.5rem;
  background: rgba(13, 28, 53, .82);
  backdrop-filter: blur(6px);
  border: 1px solid var(--white-faint);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  padding: 1.5rem;
}

.section-eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.25rem;
}

.section-eyebrow::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--gold);
}

.section-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  margin: 0 0 2.5rem;
}

.search-form { display: flex; flex-direction: column; gap: .85rem; }

.search-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .85rem;
}

.search-field { display: flex; flex-direction: column; gap: .4rem; }

.search-field label {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white-dim);
}

.search-field select,
.search-field input {
  padding: .8rem .9rem;
  background: var(--navy-mid);
  border: 1px solid var(--white-faint);
  border-radius: 3px;
  color: var(--white);
  font-family: var(--sans);
  font-size: .9rem;
}

.search-field select option { background: var(--navy); }

@media (max-width: 640px) {
  .site-hero { padding: 4rem 1.5rem 3rem; min-height: 560px; }
  .site-hero-title { font-size: 2.1rem; }
  .site-hero-coords { left: 1.5rem; }
  .search-card { padding: 1.25rem; }
  .search-row-3 { grid-template-columns: 1fr; }
}

/* Form card */

.form-card {
  background: var(--navy);
  border: 1px solid var(--white-faint);
  border-radius: 4px;
  padding: 2rem;
}

form { display: flex; flex-direction: column; gap: 1.25rem; }

label {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold);
  margin-bottom: .5rem;
}

input, select {
  width: 100%;
  padding: .8rem .9rem;
  background: var(--navy-mid);
  border: 1px solid var(--white-faint);
  border-radius: 3px;
  color: var(--white);
  font-family: var(--sans);
  font-size: .95rem;
  transition: border-color .2s;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--gold);
}

select { cursor: pointer; }

button, .btn-primary {
  padding: .95rem;
  background: var(--gold);
  color: var(--navy-deep);
  border: none;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, transform .2s;
}

button:hover, .btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

/* Loading state */

.loading-state {
  text-align: center;
  padding: 4rem 1rem;
}

.loading-spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto 2rem;
  border-radius: 50%;
  border: 2px solid var(--white-faint);
  border-top-color: var(--gold);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-stage {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--white);
  min-height: 2.4rem;
  transition: opacity .4s;
}

.loading-substage {
  color: var(--white-dim);
  font-size: .8rem;
  margin-top: .5rem;
  letter-spacing: .05em;
}

/* PDF-generation modal */

.pdf-modal-overlay[hidden] { display: none; }

.pdf-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 15, 29, .75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.pdf-modal-box {
  background: var(--navy);
  border: 1px solid var(--white-faint);
  border-radius: 6px;
  padding: 2.5rem 3rem;
  text-align: center;
}

.pdf-modal-box .loading-spinner { margin-bottom: 1.25rem; }

.pdf-modal-text {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--white);
}

/* Result / proposal content */

.result-intro {
  text-align: center;
  margin-bottom: 2rem;
}

.result-intro .hero-eyebrow { margin-bottom: .5rem; }

.result-intro h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.8rem;
  margin: 0;
}

.proposal-card {
  background: var(--navy);
  border: 1px solid var(--white-faint);
  border-radius: 4px;
  padding: 1.75rem;
  margin-bottom: 1.25rem;
}

.proposal-card-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .75rem;
}

.proposal-card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0 0 .35rem;
}

.proposal-yacht-meta {
  color: var(--white-dim);
  font-size: .85rem;
  margin: 0 0 .75rem;
}

.proposal-body-text {
  line-height: 1.65;
  margin: 0 0 .6rem;
  color: var(--white);
}

.proposal-body-text a {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.proposal-body-text a:hover {
  color: var(--gold);
}

.proposal-body-text img {
  display: block;
  width: auto;
  max-width: min(100%, 760px);
  max-height: 560px;
  height: auto;
  margin: 2rem auto .5rem;
  border-radius: 6px;
}

.proposal-body-text p:has(> img) em {
  display: block;
  text-align: center;
  font-size: .8rem;
  color: var(--white-dim);
}

.route-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.route-stop {
  position: relative;
  display: flex;
  gap: .9rem;
  padding-bottom: 2.75rem;
}

.route-stop:last-child { padding-bottom: 0; }

.route-marker {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: .35rem;
  border-radius: 50%;
  background: var(--gold);
  position: relative;
}

.route-stop:not(:last-child) .route-marker::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 4px;
  width: 1px;
  height: calc(100% + 2.75rem - 14px);
  background: var(--gold-dim);
}

.route-stop-body { flex: 1; }

.route-day {
  display: block;
  color: var(--gold);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}

.route-location {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  display: block;
  margin-bottom: .9rem;
}

.route-description {
  color: var(--white-dim);
  font-size: .92rem;
  line-height: 1.7;
  margin: 0 0 .9rem;
}

.route-distance {
  color: var(--gold-light);
  font-size: .75rem;
}

.route-moor-type {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  margin: .2rem 0 .3rem;
}

.route-variant {
  font-size: .8rem;
  color: var(--gold-light);
  margin: 1.25rem 0 2rem;
}

.route-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  padding: .75rem 0;
  margin: 0 0 1rem;
  border-top: 1px solid var(--white-faint);
  border-bottom: 1px solid var(--white-faint);
  font-size: .82rem;
  color: var(--white-dim);
}

.route-facts strong { color: var(--white); font-weight: 600; }

.guide-facts { flex-direction: column; font-size: .9rem; gap: .4rem; padding: 0; border: 0; }

.route-photo { margin: .75rem 0; max-width: 480px; }

.route-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
}

.route-photo figcaption { margin-top: .3rem; font-size: .68rem; }

.route-photo figcaption a { color: var(--white-dim); text-decoration: none; }

.route-guide {
  font-size: .9rem;
  line-height: 1.7;
  color: var(--white-dim);
  margin: .65rem 0 0;
}

.route-guide strong { color: var(--gold-light); font-weight: 600; }

.guide-status {
  font-size: .82rem;
  color: var(--gold-light);
  margin: .6rem 0 0;
  animation: guide-pulse 1.6s ease-in-out infinite;
}

@keyframes guide-pulse { 50% { opacity: .45; } }

.guide-list {
  padding-left: 1.1rem;
  margin: .5rem 0 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--white-dim);
}

.guide-list li + li { margin-top: .4rem; }

.guide-list strong { color: var(--white); font-weight: 600; }

.guide-note {
  font-size: .75rem;
  color: var(--white-dim);
  margin: 0 0 1.5rem;
}

#guide-sections .checklist-grid { margin-bottom: 1.25rem; }

.preview-pending {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--gold-light);
  font-size: .9rem;
}

.preview-pending p { margin: 0; }

.preview-pending .loading-spinner { width: 28px; height: 28px; margin: 0; flex-shrink: 0; }

.route-alternative {
  font-size: .8rem;
  line-height: 1.6;
  color: var(--white-dim);
  margin: 1rem 0 0;
  padding: .6rem .85rem;
  background: rgba(245, 243, 238, .04);
  border-left: 2px solid var(--gold-dim);
  border-radius: 2px;
}

.route-alternative strong {
  color: var(--gold-light);
  font-weight: 600;
}

.weather-stats {
  list-style: none;
  display: flex;
  gap: 2rem;
  padding: 0;
  margin: .75rem 0 0;
}

.weather-stats li {
  display: flex;
  flex-direction: column;
  font-size: .75rem;
  color: var(--white-dim);
}

.weather-stats li span {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--white);
}

.weather-daily-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  padding: 0;
  margin: 1rem 0 0;
}

.weather-day {
  flex: 1 1 110px;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .75rem .85rem;
  background: var(--navy-mid);
  border: 1px solid var(--white-faint);
  border-radius: 4px;
  font-size: .8rem;
}

.weather-day-date {
  color: var(--gold);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.weather-day-temp {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--white);
}

.weather-day-wind {
  color: var(--white-dim);
}

.weather-day-conditions {
  color: var(--white-dim);
  font-size: .75rem;
}

.weather-regional {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--white-faint);
}

.weather-forecast-link {
  display: inline-block;
  margin-top: .4rem;
  color: var(--gold-light);
  font-size: .85rem;
  text-decoration: underline;
  text-underline-offset: .15em;
}

.weather-forecast-link:hover { color: var(--gold); }

.checklist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.checklist-grid .proposal-card { margin-bottom: 0; }

.checklist {
  padding-left: 1.1rem;
  margin: 0;
  color: var(--white-dim);
  font-size: .9rem;
  line-height: 1.8;
}

.proposal-disclaimer {
  font-style: italic;
  opacity: .7;
  font-size: .85rem;
  text-align: center;
  margin: 1.5rem 0;
}

.proposal-booking-link {
  display: block;
  text-align: center;
  padding: 1rem 1.5rem;
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 3px;
  color: var(--gold);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background .2s, color .2s;
  margin-bottom: 1.5rem;
}

.proposal-booking-link:hover {
  background: var(--gold);
  color: var(--navy-deep);
}

/* Sticky PDF download bar */

.download-bar {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--navy-deep) 60%, transparent);
  padding: 1.5rem 0 1rem;
  margin-top: .5rem;
}

.download-bar-actions {
  display: flex;
  gap: .75rem;
}

.download-bar-actions[hidden],
.pdf-lead-form[hidden] {
  display: none;
}

#download-pdf {
  flex: 1;
}

.btn-secondary {
  flex: 1;
  background: transparent;
  color: var(--gold-light);
  border: 1px solid var(--gold-dim);
}

.btn-secondary:hover {
  background: var(--gold-dim);
  color: var(--gold-light);
}

.pdf-lead-form {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: .85rem;
}

.pdf-lead-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}

.pdf-lead-form input {
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 300;
  background: var(--white-faint);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--white);
  padding: .8rem 1rem;
  outline: none;
  transition: border-color .2s;
}

.pdf-lead-form input:focus { border-color: var(--gold); }

.pdf-lead-form-note {
  font-size: .7rem;
  font-weight: 300;
  color: var(--white-dim);
  line-height: 1.5;
}

.download-bar-feedback {
  margin-top: .6rem;
  font-size: .8rem;
  text-align: center;
}

.download-bar-feedback.error { color: #f5a0a0; }
.download-bar-feedback.success { color: var(--white); }

@media (max-width: 560px) {
  .download-bar-actions { flex-direction: column; }
  .pdf-lead-form .form-row { grid-template-columns: 1fr; }
}

.form-error, .result-error {
  color: var(--gold-light);
  background: var(--gold-dim);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  padding: 1rem;
  font-size: .9rem;
  text-align: center;
}

.result-error-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.result-error-box .result-error { width: 100%; }

.back-link {
  display: inline-block;
  color: var(--white-dim);
  text-decoration: none;
  font-size: .8rem;
  margin-bottom: 1.5rem;
  transition: color .2s;
}

.back-link:hover { color: var(--white); }

@media (max-width: 560px) {
  .checklist-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.8rem; }
  .weather-stats { gap: 1.25rem; }
}

/* Tabs */

.tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.5rem;
}

.tab-button {
  flex: 1;
  padding: .85rem;
  background: var(--navy);
  border: 1px solid var(--white-faint);
  border-radius: 3px;
  color: var(--white-dim);
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}

.tab-button.active {
  border-color: var(--gold);
  color: var(--gold);
}

.tab-button:hover {
  background: var(--navy);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* AI Nawigator chat */

.chat-card {
  background: var(--navy);
  border: 1px solid var(--white-faint);
  border-radius: 4px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#chat-log {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-height: 360px;
  overflow-y: auto;
}

.chat-bubble {
  padding: .75rem 1rem;
  border-radius: 3px;
  font-size: .9rem;
  line-height: 1.5;
}

.chat-bubble.user {
  align-self: flex-end;
  max-width: 85%;
  background: var(--gold-dim);
  color: var(--white);
}

.chat-bubble.assistant {
  background: var(--navy-mid);
  color: var(--white);
}

.chat-typing {
  display: flex;
  gap: .3rem;
  align-self: flex-start;
}
.chat-typing span {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--white);
  opacity: .3;
  animation: chat-typing 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes chat-typing {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-typing span { animation: none; opacity: .7; }
}

#chat-form {
  display: flex;
  gap: .5rem;
}

#chat-input {
  flex: 1;
}

#chat-form button {
  width: auto;
  padding: .8rem 1.25rem;
}

/* Wyszukiwarka tab */

.search-intro {
  color: var(--white-dim);
  font-size: .9rem;
  margin-bottom: 1rem;
  text-align: center;
}

/* visibility, not display: none. WBM's page runs its own jQuery Chosen
   plugin (the Kraj/Akwen/Baza selects) on document-ready, which happens
   long before this iframe's 'load' event fires (load waits on every
   sub-resource; Chosen only needs the DOM). display:none would make the
   iframe report zero width for that entire stretch, and Chosen measures
   the underlying <select>'s width once, at init, to size its own replacement
   search box — with a zero-width container that came out ~1 character
   wide, showing e.g. "V" instead of "Wybierz kraj...". visibility:hidden
   keeps the iframe's box (and everything inside it) laid out at its real
   size while still being invisible, so that measurement is correct. */
.bm-widget-frame[hidden] { visibility: hidden; }

.bm-widget-frame {
  width: 100%;
  min-height: 300px;
  border: 1px solid var(--white-faint);
  border-radius: 4px;
  background: var(--navy);
  display: block;
}

/* Applied by booking-manager.js's mountFrame() when WBM's auto-resize
   (manual §8.3) never reports a height back — falls back to a normal,
   internally-scrollable frame so content stays reachable. */
.bm-widget-frame-scroll-fallback { min-height: 700px; }

/* Flota's frame only: padding on the plain wrapper div, not on #wbmFleet
   itself. Padding directly on the iframe caused the clipping bug fixed
   above (mountFrame() sets the iframe's exact content height in JS, and
   border-box padding shrinks the visible viewport below that). Margin on
   the iframe was tried instead but doesn't work either: .bm-widget-wrap has
   no border/padding of its own, so nothing stops the iframe's vertical
   margin from collapsing through the wrap and escaping outside it instead
   of creating visible space around the iframe.
   The wrap also takes over the border/background .bm-widget-frame normally
   provides, and #wbmFleet gives them up below — otherwise the padding sits
   between two identically-dark navy boxes with no border between them and
   is invisible, even though it's really there in the layout. This way
   there's one visible bordered box (the wrap) with the iframe content
   inset inside it, matching what padding-on-the-frame used to look like
   everywhere else before it started clipping content. */
#bm-fleet-wrap {
  padding: 1.5rem;
  border: 1px solid var(--white-faint);
  border-radius: 4px;
  background: var(--navy);
}

#wbmFleet {
  border: none;
  border-radius: 0;
  background: transparent;
}

/* Destination grid */

.destination-grid {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: .75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--white-faint) transparent;
}

.destination-grid .destination-card {
  flex: 0 0 240px;
  scroll-snap-align: start;
}

.destination-card {
  display: block;
  text-decoration: none;
  color: var(--white);
  background: var(--navy);
  border: 1px solid var(--white-faint);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .2s, transform .2s;
}

.destination-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.destination-card-image {
  height: 140px;
  background-color: var(--navy-mid);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.destination-card-placeholder {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--gold-light);
  text-transform: capitalize;
}

.destination-card-body {
  padding: 1rem;
}

.destination-card-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 .4rem;
  text-transform: capitalize;
}

.destination-card-desc {
  color: var(--white-dim);
  font-size: .8rem;
  line-height: 1.5;
  margin: 0 0 .5rem;
}

.destination-card-price {
  color: var(--gold-light);
  font-size: .75rem;
  font-weight: 600;
  margin: 0;
}

@media (max-width: 560px) {
  .destination-grid .destination-card { flex-basis: 200px; }
}

/* Destination detail page */

.destination-hero {
  position: relative;
  height: 260px;
  background-color: var(--navy-mid);
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.destination-hero-credit {
  position: absolute;
  right: .75rem;
  bottom: .6rem;
  margin: 0;
  padding: .2rem .5rem;
  border-radius: 3px;
  background: rgba(8, 15, 29, .55);
  font-size: .68rem;
  color: rgba(245, 243, 238, .8);
}
.destination-hero-credit a { color: inherit; }

.destination-hero-placeholder {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--gold-light);
}

/* Marketing sections (full-width, below .page) */

.marketing-section {
  padding: 6rem 2rem;
}

.marketing-section > * {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
}

.marketing-eyebrow {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.marketing-eyebrow::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--gold);
}

.marketing-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.marketing-sub {
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--white-dim);
  max-width: 520px;
}

/* Why section */

.why-section { background: var(--navy); }

.why-inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 4rem;
  align-items: stretch;
}

.why-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 2rem;
  margin-top: 2.5rem;
}

.pillar-num {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
  margin-bottom: .6rem;
  -webkit-text-stroke: 1px rgba(184, 146, 74, .3);
  color: transparent;
}

.pillar-title {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .6rem;
}

.pillar-text {
  font-size: .85rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--white-dim);
}

.why-visual {
  position: relative;
  background: var(--navy-mid);
  min-height: 320px;
  overflow: hidden;
}

.why-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.why-visual-tag {
  position: absolute;
  bottom: 1.5rem;
  left: -1rem;
  background: var(--gold);
  color: var(--navy-deep);
  padding: 1.1rem 1.35rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  max-width: 220px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .why-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .why-visual { display: none; }
}

@media (max-width: 560px) {
  .why-pillars { grid-template-columns: 1fr; }
}

/* B2B section */

.b2b-section {
  background: var(--navy);
  border-top: 1px solid rgba(184, 146, 74, .15);
  border-bottom: 1px solid rgba(184, 146, 74, .15);
}

.b2b-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.b2b-visual {
  position: relative;
  aspect-ratio: 1;
  background: var(--navy-mid);
  overflow: hidden;
}

.b2b-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.b2b-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.5rem 0;
}

.b2b-tag {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .4rem .8rem;
  border: 1px solid rgba(184, 146, 74, .35);
  color: var(--gold);
}

.b2b-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .06);
  margin: 2rem 0;
}

.b2b-stat {
  background: var(--navy);
  padding: 1.25rem 1rem;
  text-align: center;
}

.b2b-stat-num {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--gold-light);
  line-height: 1;
}

.b2b-stat-label {
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-top: .4rem;
}

@media (max-width: 900px) {
  .b2b-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .b2b-visual { display: none; }
}

@media (max-width: 560px) {
  .b2b-numbers { grid-template-columns: 1fr; }
}

/* How it works section */

.how-section { background: var(--navy-deep); }

.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 3rem;
  border: 1px solid rgba(255, 255, 255, .06);
}

.how-step {
  padding: 2.5rem 2rem;
  border-right: 1px solid rgba(255, 255, 255, .06);
}

.how-step:last-child { border-right: none; }

.how-step-num {
  font-family: var(--serif);
  font-size: 4rem;
  font-weight: 300;
  line-height: 1;
  -webkit-text-stroke: 1px rgba(184, 146, 74, .25);
  color: transparent;
  margin-bottom: 1.25rem;
  display: block;
}

.how-step-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .05em;
  margin-bottom: .75rem;
}

.how-step-text {
  font-size: .85rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--white-dim);
}

@media (max-width: 900px) {
  .how-steps { grid-template-columns: 1fr; }
  .how-step { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .06); }
  .how-step:last-child { border-bottom: none; }
}

/* Fleet section */

.fleet-section { background: var(--navy); }

.fleet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3rem;
}

.fleet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5px;
}

/* .yacht-card is sometimes an <a> (homepage Last Minute teasers link
   straight to a listing) and sometimes a plain <div> (propozycja.astro's
   suggested-yacht cards) — reset link styling unconditionally so both
   read the same regardless of the wrapping element. */
.yacht-card { background: var(--navy-mid); color: var(--white); text-decoration: none; display: block; }

.yacht-img {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
}

.yacht-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.yacht-img-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .2rem .5rem;
}

.yacht-body { padding: 1.25rem; }

.yacht-type {
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .4rem;
}

.yacht-name {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: .75rem;
}

.yacht-specs {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .7rem;
  font-weight: 300;
  color: var(--white-dim);
  margin-bottom: 1rem;
}

.yacht-divider { height: 1px; background: rgba(255, 255, 255, .06); margin-bottom: 1rem; }

.yacht-footer { display: flex; justify-content: space-between; align-items: center; }

.yacht-price { font-family: var(--serif); font-size: 1.05rem; color: var(--white); }

.yacht-price span { font-family: var(--sans); font-size: .65rem; font-weight: 300; color: var(--white-dim); }

.yacht-link {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}

.yacht-link::after { content: '→'; margin-left: .25rem; }

@media (max-width: 1024px) {
  .fleet-grid { grid-template-columns: repeat(2, 1fr); }
  .fleet-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

@media (max-width: 560px) {
  .fleet-grid { grid-template-columns: 1fr; }
}

/* /flota/: the native yacht list (filters, a .fleet-grid of .yacht-card,
   "Pokaż więcej"). A ?jacht= link swaps it for WBM's frame; the class is
   set in <head>, so neither flashes before the other. */
.fleet-detail .fleet-list,
html:not(.fleet-detail) #bm-fleet-wrap { display: none; }

/* The page has no .page wrapper (the frame runs edge to edge). */
.fleet-list { padding: 0 2rem; }

.fleet-filters {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .85rem;
  align-items: end;
  margin-bottom: 1.5rem;
}

/* Selects and inputs render a pixel or two apart; one height keeps the row's labels level. */
.fleet-filters select,
.fleet-filters input,
.fleet-filters button { height: 2.75rem; padding-top: 0; padding-bottom: 0; }

.fleet-status { color: var(--white-dim); font-size: .9rem; margin: 0 0 1rem; }

.fleet-more { display: block; margin: 2rem auto 0; padding: .95rem 2.5rem; }

.fleet-list .yacht-card:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -2px; }

@media (max-width: 1024px) {
  .fleet-filters { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .fleet-list { padding: 0 1rem; }
  .fleet-filters { grid-template-columns: 1fr 1fr; }
}

/* Contact section */

.contact-section {
  background:
    radial-gradient(ellipse 70% 60% at 30% 50%, rgba(42, 127, 191, .1) 0%, transparent 55%),
    var(--navy-deep);
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: start;
}

.contact-channels { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; }

.contact-channel {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid rgba(255, 255, 255, .07);
  text-decoration: none;
  color: var(--white);
  transition: border-color .2s;
}

.contact-channel:hover { border-color: var(--gold); }

.channel-icon {
  width: 2.25rem;
  height: 2.25rem;
  background: var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
}

.channel-label {
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: .2rem;
}

.channel-value { font-size: .9rem; font-weight: 400; }

.contact-form { display: flex; flex-direction: column; gap: .85rem; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.contact-form .form-field { display: flex; flex-direction: column; gap: .4rem; }

.contact-form .form-field label {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white-dim);
}

.contact-form .form-field input,
.contact-form .form-field select,
.contact-form .form-field textarea {
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 300;
  background: var(--white-faint);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--white);
  padding: .8rem 1rem;
  outline: none;
  transition: border-color .2s;
}

.contact-form .form-field textarea {
  resize: vertical;
  min-height: 100px;
}

.contact-form .form-field input:focus,
.contact-form .form-field select:focus,
.contact-form .form-field textarea:focus { border-color: var(--gold); }

.contact-form .form-field select option { background: var(--navy); }

.contact-form-submit {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 1.05rem;
  background: var(--gold);
  color: var(--navy-deep);
  border: none;
  cursor: pointer;
  margin-top: .25rem;
  transition: background .2s;
}

.contact-form-submit:hover { background: var(--gold-light); }
.contact-form-submit:disabled { opacity: .6; cursor: not-allowed; }

.contact-form-note {
  font-size: .7rem;
  font-weight: 300;
  color: var(--white-dim);
  text-align: center;
  line-height: 1.6;
}

.contact-form-note a { color: var(--gold-light); }

.contact-form-feedback {
  display: none;
  padding: 1rem 1.1rem;
  font-size: .85rem;
  line-height: 1.5;
  text-align: center;
}

.contact-form-feedback.success {
  display: block;
  background: rgba(42, 127, 191, .12);
  border: 1px solid rgba(42, 127, 191, .35);
  color: var(--white);
}

.contact-form-feedback.error {
  display: block;
  background: rgba(180, 50, 50, .12);
  border: 1px solid rgba(180, 50, 50, .35);
  color: #f5a0a0;
}

@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 560px) {
  .contact-form .form-row { grid-template-columns: 1fr; }
}

/* O nas page */

.about-hero {
  padding: 5rem 2rem 3rem;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.about-photo {
  margin: 0 auto 4rem;
  padding: 0 2rem;
}

.about-photo picture,
.about-photo img {
  width: 100%;
  max-height: 640px;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}

.about-body {
  max-width: 900px;
  margin: 0 auto 4rem;
  padding: 0 2rem;
}

.about-body p {
  color: var(--white-dim);
  font-size: .95rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.about-values {
  max-width: 900px;
  margin: 0 auto 5rem;
  padding: 0 2rem;
}

/* Team member bios */

.team-section {
  max-width: 900px;
  margin: 0 auto 5rem;
  padding: 0 2rem;
}

.team-member {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  align-items: start;
}

.team-member + .team-member {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--white-faint);
}

.team-member-photo {
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 4px;
  background: var(--navy-mid);
}

.team-member-photo picture,
.team-member-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.team-member-name {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: .3rem;
}

.team-member-role {
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.team-member-bio p {
  color: var(--white-dim);
  font-size: .9rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.team-member-quote {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-light);
  font-size: 1rem;
}

@media (max-width: 640px) {
  .team-member { grid-template-columns: 1fr; }
  .team-member-photo { max-width: 260px; }
}

.eventy-cta-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 auto 5rem;
  padding: 0 2rem;
}

/* Rejsy — format overview cards */

.format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 1440px;
  margin: 0 auto 5rem;
  padding: 0 2rem;
}

.format-card {
  background: var(--navy-mid);
  border: 1px solid var(--white-faint);
  border-radius: 4px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}

.format-card-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.format-card-title {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--white);
  margin: 0 0 .75rem;
}

.format-card-text {
  font-size: .85rem;
  line-height: 1.65;
  color: var(--white-dim);
  margin: 0 0 1.25rem;
  flex: 1;
}

.format-card-badge {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white-dim);
}

.format-card-link {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}

.format-card-link::after {
  content: '→';
  margin-left: .25rem;
}

/* Czartery indywidualne — search + results */

.search-page-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2.5rem;
  max-width: 1440px;
  margin: 0 auto 5rem;
  padding: 0 2rem;
  align-items: start;
}

.search-sidebar {
  background: var(--navy-mid);
  border: 1px solid var(--white-faint);
  border-radius: 4px;
  padding: 1.5rem;
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.search-sidebar-title {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.search-sidebar-note {
  font-size: .75rem;
  line-height: 1.6;
  color: var(--white-dim);
  margin: 0;
}

.search-results-count {
  font-size: .8rem;
  color: var(--white-dim);
  margin: 0 0 1.25rem;
}

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
}

.search-results-empty {
  color: var(--white-dim);
  font-size: .9rem;
  text-align: center;
  padding: 3rem 1rem;
}

@media (max-width: 900px) {
  .search-page-layout { grid-template-columns: 1fr; }
  .search-sidebar { position: static; }
  .search-results-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .search-results-grid { grid-template-columns: 1fr; }
}

/* Blog listing */

.blog-header {
  margin: 0 auto;
  padding: 5rem 2rem 3rem;
  text-align: center;
}

.blog-grid {
  margin: 0 auto;
  padding: 0 2rem 5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.post-card-date {
  color: var(--gold-light);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 .5rem;
}

/* Rejsy page */

.rejsy-intro {
  max-width: 900px;
  margin: 0 auto 4rem;
  padding: 0 2rem;
  text-align: center;
  color: var(--white-dim);
  font-size: .95rem;
  line-height: 1.8;
}

.formula-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1440px;
  margin: 0 auto 5rem;
  padding: 0 2rem;
}

.formula-card {
  background: var(--navy-mid);
  border: 1px solid var(--white-faint);
  border-radius: 4px;
  padding: 2rem;
}

.formula-tag {
  display: inline-block;
  background: var(--gold-dim);
  color: var(--gold-light);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .4rem .75rem;
  border-radius: 2px;
  margin-bottom: 1rem;
}

.formula-dates {
  color: var(--white-dim);
  font-size: .8rem;
  margin-bottom: 1.25rem;
}

.formula-title {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 300;
  margin-bottom: 1rem;
}

.formula-text {
  font-size: .9rem;
  line-height: 1.75;
  color: var(--white-dim);
  margin-bottom: 1.25rem;
}

.formula-who {
  font-size: .85rem;
  line-height: 1.7;
  color: var(--white-dim);
  border-top: 1px solid var(--white-faint);
  padding-top: 1.25rem;
}

.formula-who strong {
  color: var(--white);
  font-weight: 600;
}

@media (max-width: 800px) {
  .formula-grid { grid-template-columns: 1fr; }
}

/* Single-cruise offer on /rejsy/ (route, yacht photos and specs) */
.cruise-route {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  color: var(--white-dim);
  font-size: .9rem;
  line-height: 2;
}
.cruise-route strong { color: var(--white); font-weight: 500; }
.cruise-photo { display: block; width: 100%; border-radius: 3px; }
.cruise-photos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .5rem 0 1.25rem; }
.cruise-specs { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.5rem; margin: 0 0 1.25rem; }
.cruise-specs dt { font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--white-dim); }
.cruise-specs dd { margin: .15rem 0 0; font-size: 1.05rem; font-weight: 600; }

.inclusions-list {
  list-style: none;
  max-width: 1100px;
  margin: 0 auto 5rem;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2.5rem;
}

.inclusions-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--white-dim);
}

.inclusions-list li::before {
  content: '✓';
  color: var(--gold);
  font-weight: 600;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .inclusions-list { grid-template-columns: 1fr; }
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto 2rem;
  padding: 0 2rem;
}

.pricing-card {
  background: var(--navy);
  border: 1px solid var(--white-faint);
  border-radius: 4px;
  padding: 1.75rem;
  text-align: center;
}

.pricing-card-label {
  font-size: .75rem;
  color: var(--white-dim);
  margin-bottom: .5rem;
}

.pricing-card-num {
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 300;
  color: var(--gold-light);
}

.pricing-card-note {
  font-size: .75rem;
  color: var(--white-dim);
  margin-top: .5rem;
}

@media (max-width: 700px) {
  .pricing-grid { grid-template-columns: 1fr; gap: 1rem; }
}

.pricing-fineprint {
  max-width: 700px;
  margin: 0 auto 5rem;
  padding: 0 2rem;
  font-size: .8rem;
  line-height: 1.7;
  color: var(--white-dim);
  text-align: center;
}

.trips-table-wrap {
  max-width: 1440px;
  margin: 0 auto 5rem;
  padding: 0 2rem;
  overflow-x: auto;
}

.trips-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.trips-table th,
.trips-table td {
  text-align: left;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--white-faint);
  font-size: .85rem;
}

.trips-table th {
  color: var(--gold);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.trips-table td { color: var(--white-dim); }
.trips-table td:first-child { color: var(--white); font-weight: 500; }

/* Zaplanuj rejs — example plan tiles */

.plan-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1440px;
  margin: 0 auto 5rem;
  padding: 0 2rem;
}

.plan-tile {
  display: block;
  background: var(--navy-mid);
  border: 1px solid var(--white-faint);
  border-radius: 4px;
  padding: 1.75rem;
  text-decoration: none;
  transition: border-color .2s, transform .2s;
}

.plan-tile:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.plan-tile-region {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .75rem;
}

.plan-tile-title {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--white);
  margin-bottom: .6rem;
}

.plan-tile-summary {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--white-dim);
  margin-bottom: 1rem;
}

.plan-tile-meta {
  font-size: .75rem;
  color: var(--white-dim);
  display: flex;
  gap: 1rem;
  border-top: 1px solid var(--white-faint);
  padding-top: .85rem;
}

.plan-tile-icon {
  display: block;
  font-size: 1.75rem;
  margin-bottom: .85rem;
}

@media (max-width: 900px) {
  .plan-tile-grid { grid-template-columns: 1fr; }
}

.planner-divider {
  max-width: 1440px;
  margin: 0 auto 3rem;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--white-dim);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.planner-divider::before,
.planner-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--white-faint);
}

.planner-card-wrap {
  /* Deliberately narrower than .content-wide — a chat widget reads
     better contained than stretched edge-to-edge. */
  max-width: 900px;
  margin: 0 auto 3rem;
  padding: 0 2rem;
}

.navigator-hero-icon {
  display: block;
  margin: 0 auto 1.5rem;
  width: 140px;
  height: 140px;
}

.navigator-note {
  font-size: .8rem;
  line-height: 1.6;
  color: var(--white-dim);
  text-align: center;
  margin: 1.25rem 0 0;
}

.navigator-warning {
  font-size: .75rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--gold-light);
  text-align: center;
  margin: .75rem 0 0;
}

/* Example plan detail page — map */

.plan-map {
  height: 360px;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: var(--navy-mid);
}

.plan-map-marker {
  background: none;
  border: 0;
}
.plan-map-marker-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  border: 2px solid var(--gold);
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
.plan-map-marker-day {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  padding: 1px 4px;
  border-radius: 9px;
  background: var(--gold);
  color: var(--navy-deep);
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.plan-map-note {
  margin: .5rem 0 0;
  font-size: .75rem;
  color: var(--white-dim);
  font-style: italic;
}

.plan-map-fullscreen {
  padding: .45rem .7rem;
  font-size: .7rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
.plan-map-fullscreen:hover { transform: none; }

/* !important: Leaflet sets position: relative inline on its container. */
.plan-map--fullscreen {
  position: fixed !important;
  inset: 0;
  z-index: 1100;
  height: auto;
  border-radius: 0;
}
body.plan-map-open { overflow: hidden; }

@media print {
  .plan-map-fullscreen, .yacht-share { display: none; }
}

/* Proposal yacht cards: the share button sits over the photo, outside the
   card's own <a>. */
.yacht-card-wrap { position: relative; display: flex; }
.yacht-card-wrap .yacht-card { flex: 1; min-width: 0; }
.yacht-share {
  position: absolute;
  top: .6rem;
  right: .6rem;
  padding: .4rem .65rem;
  font-size: .65rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
.yacht-share:hover { transform: none; }

#fleet-back {
  display: inline-block;
  margin-top: .75rem;
  color: var(--gold-light);
  font-size: .85rem;
  text-decoration: none;
}
#fleet-back[hidden] { display: none; }

.share-dialog {
  width: min(380px, calc(100vw - 2rem));
  background: var(--navy-mid);
  color: var(--white);
  border: 1px solid var(--white-faint);
  border-radius: 6px;
  padding: 1.5rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
.share-dialog::backdrop { background: rgba(8, 15, 29, .7); }
.share-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
.share-options a,
.share-options button {
  padding: .8rem;
  background: transparent;
  color: var(--gold-light);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
}
.share-options a:hover,
.share-options button:hover { background: var(--gold-dim); transform: none; }
.share-options [hidden] { display: none; }
.share-feedback {
  min-height: 1.2em;
  margin: .9rem 0 0;
  font-size: .8rem;
  text-align: center;
  word-break: break-all;
}

.plan-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  list-style: none;
  margin: .75rem 0 0;
  padding: 0;
  font-size: .75rem;
  color: var(--white-dim);
}

.leaflet-tooltip {
  background: var(--navy);
  color: var(--white);
  border: 1px solid var(--gold-dim);
  font-family: var(--sans);
  font-size: .75rem;
  box-shadow: none;
}

.leaflet-tooltip-top:before { border-top-color: var(--navy); }

/* Result page (wynik.astro) */

button:disabled, .btn-primary:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

button:disabled:hover, .btn-primary:disabled:hover {
  background: var(--gold);
  transform: none;
}

.yacht-suggestions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

@media (max-width: 640px) {
  .yacht-suggestions-grid { grid-template-columns: 1fr; }
}

.yacht-card-ai {
  background: var(--navy-mid);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 1.25rem;
  grid-column: 1 / -1;
}

.yacht-card-ai-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  margin-bottom: .75rem;
}

.route-details {
  border: none;
}

.route-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}

.route-summary::-webkit-details-marker { display: none; }

.route-summary-chevron {
  color: var(--gold);
  transition: transform .2s;
  font-size: .8rem;
}

.route-details[open] .route-summary-chevron { transform: rotate(90deg); }

/* "Zobacz wszystkie dostępne jachty": a big button in the middle of its card. */
.bm-widget-summary { justify-content: center; }

/* Once clicked the button has done its job: hide it, leave the search open. */
.bm-widget-panel .route-details[open] > .bm-widget-summary { display: none; }

.bm-widget-button {
  display: inline-block;
  width: min(100%, 520px);
  padding: 1.1rem 2rem;
  font-size: 1rem;
  text-align: center;
}

.route-change-form {
  display: flex;
  gap: .5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--white-faint);
}

.route-change-form input { flex: 1; }

.route-change-form button { width: auto; padding: .85rem 1.1rem; white-space: nowrap; }

.weather-sailing-primary {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin: .75rem 0 1rem;
}

.weather-sailing-primary .weather-summary-icon {
  font-size: 2rem;
  line-height: 1;
  align-self: center;
}

.weather-sailing-primary .wind-compass {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--gold-light);
}

.weather-sailing-primary .wind-speed {
  font-size: 1.1rem;
  color: var(--white);
}

.weather-sailing-primary .wind-label {
  font-size: .75rem;
  color: var(--white-dim);
}

.bm-widget-panel { margin-top: 1.25rem; }

.bm-widget-notice {
  color: var(--white-dim);
  font-size: .8rem;
  text-align: center;
  padding: 1.5rem;
}

.bm-widget-wrap { position: relative; }

/* Phones and small tablets: the WBM widget is unreadable inside our page
   padding and card padding (268px of a 390px screen on /destynacje/), so it
   breaks out to the full screen width — the headings and text around it
   keep their margins. Every mounted frame sits in a .bm-widget-wrap
   (booking-manager.js ensurePreloader), so the wrap and its preloader go
   full width together; a frame not (yet) wrapped does it on its own. */
@media (max-width: 768px) {
  .bm-widget-wrap,
  .bm-widget-frame:not(.bm-widget-wrap .bm-widget-frame) {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
  }
  .bm-widget-wrap .bm-widget-frame,
  .bm-widget-frame:not(.bm-widget-wrap .bm-widget-frame),
  #bm-fleet-wrap {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  #bm-fleet-wrap { padding-left: 0; padding-right: 0; }
}

.bm-widget-preloader[hidden] { display: none; }

/* Absolutely positioned over .bm-widget-wrap (position: relative) so it
   overlaps the iframe instead of stacking below it — the iframe now stays
   in normal flow (min-height: 300px) even while loading, since it's hidden
   via visibility rather than display: none (see .bm-widget-frame[hidden]
   for why), so without this the preloader and the invisible iframe's
   reserved space would show as two stacked blocks instead of one. */
.bm-widget-preloader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: absolute;
  inset: 0;
  min-height: 300px;
  border: 1px solid var(--white-faint);
  border-radius: 4px;
  background: var(--navy);
}

.bm-boat-icon { width: 90px; height: auto; }

.bm-boat-hull-group {
  transform-origin: 60px 50px;
  animation: bmBoatBob 2.4s ease-in-out infinite;
}

.bm-boat-sail { fill: var(--white); }
.bm-boat-sail-2 { opacity: .65; }
.bm-boat-mast { stroke: var(--gold-light); stroke-width: 1.5; }
.bm-boat-hull { fill: var(--gold); }

.bm-wave {
  fill: none;
  stroke: var(--white-faint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 6;
  animation: bmWaveMove 3s linear infinite;
}
.bm-wave-2 { stroke: var(--gold-dim); animation-duration: 4s; animation-direction: reverse; }

.bm-widget-preloader-text {
  color: var(--white-dim);
  font-size: .75rem;
  letter-spacing: .05em;
  margin: 0;
}

@keyframes bmBoatBob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-6px) rotate(4deg); }
}

@keyframes bmWaveMove {
  to { stroke-dashoffset: -28; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-boat-hull-group, .bm-wave { animation: none; }
}

.search-sidebar-note-block {
  max-width: 480px;
  margin: 2rem auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: center;
}

/* Floating proposal feedback ("Oceń propozycję") */

/* A horizontal pill on the right edge. Positioned without transform on
   purpose: the global button:hover rule sets transform, which used to undo
   a rotated vertical tab on hover and make it jump under the cursor. */
.feedback-tab {
  position: fixed;
  right: 0;
  top: calc(50% - 1.3rem);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  background: var(--gold);
  color: var(--navy-deep);
  border: 0;
  border-radius: 1.3rem 0 0 1.3rem;
  padding: .7rem 1rem .7rem .9rem;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}
.feedback-tab:hover { background: var(--gold-light); transform: none; }
.feedback-tab-icon { font-size: 1rem; line-height: 1; }
.feedback-tab-long { margin-left: -.2rem; }
/* The open panel has its own close button; hide the pill behind it. */
.feedback-tab[aria-expanded="true"] { visibility: hidden; }
.feedback-tab:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.feedback-tab[hidden], .feedback-panel[hidden], #feedback-form[hidden] { display: none; }

.feedback-panel {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 950;
  width: min(380px, calc(100vw - 4rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--navy-mid);
  border: 1px solid var(--white-faint);
  border-radius: 6px;
  padding: 1.5rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}

.feedback-close {
  position: absolute;
  top: .5rem;
  right: .6rem;
  background: none;
  border: 0;
  color: var(--white-dim);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: .25rem .4rem;
}
.feedback-close:hover { color: var(--white); }

.feedback-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0 1.5rem 1rem 0;
}

#feedback-form { gap: 0; }
.feedback-scale-options label { margin: 0; }
.feedback-scale { border: 0; padding: 0; margin: 0 0 1rem; }
.feedback-scale legend,
.feedback-label {
  display: block;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: .5rem;
}
.feedback-label span { text-transform: none; letter-spacing: 0; opacity: .7; }

.feedback-scale-options {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: .3rem;
}
.feedback-scale-options label { position: relative; }
.feedback-scale-options input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.feedback-scale-options span {
  display: block;
  text-align: center;
  padding: .55rem 0;
  font-size: .85rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 3px;
  background: var(--white-faint);
  transition: background .15s, border-color .15s;
}
.feedback-scale-options label:hover span { border-color: var(--gold); }
.feedback-scale-options input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); font-weight: 600; }
.feedback-scale-options input:focus-visible + span { outline: 2px solid var(--white); outline-offset: 1px; }

.feedback-scale-hints {
  display: flex;
  justify-content: space-between;
  font-size: .7rem;
  color: var(--white-dim);
  margin-top: .35rem;
}

#feedback-form textarea,
#feedback-form input[type=email] {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 300;
  background: var(--white-faint);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--white);
  padding: .7rem .9rem;
  margin-bottom: .9rem;
  outline: none;
  resize: vertical;
}
#feedback-form textarea:focus,
#feedback-form input[type=email]:focus { border-color: var(--gold); }

.feedback-note { font-size: .7rem; color: var(--white-dim); line-height: 1.5; margin: -.4rem 0 1rem; }
.feedback-note a { color: var(--gold-light); }
.feedback-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#feedback-submit { width: 100%; }
.feedback-status { font-size: .8rem; text-align: center; margin: .6rem 0 0; min-height: 1em; }
.feedback-status.error { color: #f5a0a0; }
.feedback-status.success { color: var(--gold-light); }

@media (max-width: 640px) {
  .feedback-tab { padding: .6rem .8rem .6rem .75rem; }
  .feedback-tab-long { display: none; }
  .feedback-panel {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    transform: none;
    width: auto;
    max-height: 85vh;
    border-radius: 10px 10px 0 0;
  }
  .feedback-scale-options { grid-template-columns: repeat(5, 1fr); }
}

/* /destynacje/ — chart of destinations (static SVG built in destynacje/index.astro) */

.charts-intro {
  max-width: 40rem;
  padding: 4rem 0 2rem;
}
.charts-intro h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
  margin: 0 0 1rem;
}
.charts-intro p {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--white-dim);
  margin: 0;
}

.chart {
  margin: 0 0 3rem;
}
.chart svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--white-faint);
  border-radius: 4px;
  background: var(--navy-deep);
}
.chart figcaption {
  font-size: .75rem;
  font-style: italic;
  color: var(--white-dim);
  margin-top: .75rem;
}

.chart-sea { fill: var(--navy); }
.chart-land {
  fill: var(--navy-light);
  stroke: rgba(212, 171, 106, .28);
  stroke-width: .6;
  stroke-linejoin: round;
}
.chart-land-detail { stroke-width: .8; }
.chart-graticule {
  fill: none;
  stroke: rgba(245, 243, 238, .06);
  stroke-width: .6;
}
.chart-frame {
  fill: rgba(184, 146, 74, .06);
  stroke: var(--gold);
  stroke-width: 1;
}
.chart-leader {
  stroke: var(--gold);
  stroke-width: .8;
  stroke-dasharray: 3 5;
  opacity: .6;
}
.chart-degree {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  fill: rgba(245, 243, 238, .35);
}
.chart-panel-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  fill: var(--gold-light);
}

.chart-marker { cursor: pointer; }
.chart-marker-dot {
  fill: var(--navy-deep);
  stroke: var(--gold);
  stroke-width: 1.5;
  transition: fill .2s, stroke-width .2s;
}
.chart-marker-sail { fill: var(--gold-light); transition: fill .2s; }
.chart-label-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  fill: var(--white);
}
.chart-label-count {
  font-family: var(--sans);
  font-size: 12.5px;
  fill: var(--gold-light);
}
.chart-marker:hover .chart-marker-dot,
.chart-marker:focus-visible .chart-marker-dot {
  fill: var(--gold);
  stroke-width: 3;
}
.chart-marker:hover .chart-marker-sail,
.chart-marker:focus-visible .chart-marker-sail { fill: var(--navy-deep); }
.chart-marker:focus-visible { outline: none; }
.chart-marker:focus-visible .chart-label-name { text-decoration: underline; }

.destinations-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}
.destination-card-fleet {
  color: var(--gold-light);
  font-size: .8rem;
  font-weight: 500;
  margin: 0 0 .5rem;
}

@media (max-width: 700px) {
  .charts-intro { padding-top: 2.5rem; }
  /* Labels would be ~6px tall at this width — the cards below carry them. */
  .chart-label, .chart-degree, .chart-panel-name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chart-marker-dot, .chart-marker-sail { transition: none; }
}

/* Blog categories + sample-route index (blog/trasy, destination pages) */
.blog-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 1rem 0 1.5rem;
}

.blog-categories a {
  padding: .35rem .9rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold-light);
  font-size: .85rem;
  text-decoration: none;
}

.blog-categories a:hover,
.blog-categories a[aria-current] {
  background: var(--gold);
  color: var(--navy-deep);
}

.route-index {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: .6rem 0;
}

.route-index summary {
  cursor: pointer;
  color: var(--white);
}

.route-index summary span { color: var(--white-dim); }

.route-index ul {
  margin: .6rem 0 0;
  padding-left: 1.2rem;
  color: var(--white-dim);
  font-size: .9rem;
  line-height: 1.7;
}

.route-index a { color: var(--gold-light); }

/* Long destination descriptions: section headings inside the body card */
.proposal-body-text h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 2rem 0 .6rem;
}

.proposal-body-text h3 {
  font-size: 1.05rem;
  margin: 1.4rem 0 .4rem;
  color: var(--gold-light);
}

.route-index-title a {
  color: var(--white);
  text-decoration: none;
}

.route-index-title a:hover { color: var(--gold-light); }

/* Blog list: category counts, tags, search */
.blog-categories a span { opacity: .6; font-size: .75rem; margin-left: .15rem; }

.blog-tags { gap: .35rem; margin: 0; }

.blog-tags a {
  padding: .2rem .65rem;
  border-color: rgba(255, 255, 255, .2);
  color: var(--white-dim);
  font-size: .75rem;
}

.blog-search {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 1.25rem;
}

.blog-empty {
  text-align: center;
  color: var(--white-dim);
  padding: 0 2rem 2rem;
}

.blog-empty a { color: var(--gold-light); }

.blog-grid [hidden] { display: none; }

.hero-eyebrow a { color: inherit; text-decoration: none; }
.hero-eyebrow a:hover { color: var(--gold-light); }

.content-wide > .blog-tags { justify-content: flex-start; margin: 1.5rem 0 0; }

/* Photo credits collected at the end of a destination description */
.proposal-body-text small {
  display: block;
  margin-top: 2rem;
  font-size: .8rem;
  color: var(--white-dim);
}

/* Compact blog header: posts visible without scrolling */
.blog-header { padding: 2rem 2rem 1.5rem; }
.blog-header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}
.blog-header-top h1 { margin: 0; }
.blog-header-top .blog-search { margin: 0; flex: 1 1 260px; max-width: 360px; }
.blog-header > .blog-categories { justify-content: flex-start; margin: 1rem 0 .75rem; }
.blog-header { text-align: left; }
.blog-tags-toggle summary {
  cursor: pointer;
  color: var(--white-dim);
  font-size: .8rem;
}
.blog-tags-toggle .blog-tags { justify-content: flex-start; margin-top: .6rem; }

@media (max-width: 640px) {
  .blog-header { padding: 1.25rem 1rem 1rem; }
  .blog-header-top .blog-search { max-width: none; }
  .blog-header > .blog-categories {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-right: -1rem;
  }
  .blog-header > .blog-categories a { white-space: nowrap; }
}

/* Compact headers on every page except the homepage */
body:not(:has(.site-hero)) .site-header { padding: .75rem 2rem; }
body:not(:has(.site-hero)) .site-header-logo img { height: 42px; }

.about-hero { padding: 2rem 2rem 1.5rem; }
.about-hero .hero-eyebrow { margin-bottom: .4rem; }
.about-hero h1, .about-hero h2 { font-size: 1.9rem; margin-bottom: .5rem; }
.navigator-hero-icon { width: 72px; height: 72px; margin-bottom: .75rem; }
.destination-hero { height: 200px; margin-bottom: 1.5rem; }

@media (max-width: 640px) {
  body:not(:has(.site-hero)) .site-header { padding: .6rem 1rem; }
  body:not(:has(.site-hero)) .site-header-logo img { height: 36px; }
  .about-hero { padding: 1.25rem 1rem 1rem; }
  .about-hero h1, .about-hero h2 { font-size: 1.6rem; }
  .destination-hero { height: 150px; }
}