/* ============================================================
   Shoreline Sightseeing — Redesign Overrides
   ------------------------------------------------------------
   Drop-in stylesheet that re-themes the existing site with:
   • Gigalyps display font on headlines, buttons, nav, labels
   • Brand palette: Shoreline Blue #28a9e0, Shoreline Red #e82229,
     Footer deep blue #285eab
   • Updated button styling (red primary, blue navy variant)
   • Footer & nav refinements
   • Home-page hero scene (`.ssi-top` / `.ssi-middle`) — only
     rendered on pages that include the markup; harmless elsewhere

   Include after the theme's CSS:
     <link rel="stylesheet" href="/path/to/shoreline-redesign.css">

   Pair with shoreline-redesign.js for the boat scroll animation.
   ============================================================ */

/* ── Nexa (Adobe Typekit) ─────────────────────────────────── */
@import url("https://use.typekit.net/njd0pje.css");

/* ── Gigalyps font ────────────────────────────────────────── */
@font-face {
  font-family: 'Gigalyps';
  src: url('./gigalypsetrial-regular.otf') format('opentype');
  font-display: swap;
}

/* ════════════════════════════════════════════════════════
   BLOG POST PAGE STYLING (single-post template)
   ════════════════════════════════════════════════════════ */
body.single-post .entry-header {
  text-align: center;
  max-width: 820px;
  margin: 2rem auto 1.5rem;
  padding: 0 1rem;
}
body.single-post .entry-title {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  font-size: clamp(1.75rem, 4vw, 3rem) !important;
  color: var(--ss-blue) !important;
  letter-spacing: 1px;
  line-height: 1.1;
  margin-bottom: 1rem !important;
}
body.single-post .ss-blog-card__excerpt {
  font-size: 1.15rem;
  color: #4a5260;
  line-height: 1.55;
  font-style: italic;
}
body.single-post .entry-primary-category,
body.single-post .entry-meta {
  justify-content: center;
}
body.single-post .entry-category__link,
body.single-post .entry-tags__link {
  color: var(--ss-red) !important;
  font-family: 'Gigalyps','Impact',sans-serif !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.85rem;
  text-decoration: none !important;
}
body.single-post .entry-category__link:hover,
body.single-post .entry-tags__link:hover {
  color: var(--ss-blue) !important;
}
body.single-post .entry-content {
  max-width: 760px;
  margin: 2rem auto;
  padding: 0 1rem;
  font-size: 1.08rem;
  line-height: 1.75;
  color: #2c3540;
}
body.single-post .entry-content h2,
body.single-post .entry-content h3 {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  color: var(--ss-blue) !important;
  letter-spacing: 0.5px;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
body.single-post .entry-content h2 { font-size: 1.75rem; }
body.single-post .entry-content h3 { font-size: 1.35rem; }
body.single-post .entry-content p { margin-bottom: 1.25rem; }
body.single-post .entry-content a {
  color: var(--ss-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.single-post .entry-content a:hover { color: var(--ss-red-dark); }
body.single-post .entry-content img,
body.single-post .entry-content .wp-block-image img,
body.single-post .entry-content figure img {
  width: 100% !important;
  height: auto !important;
  border-radius: 1rem;
  box-shadow: 0 6px 22px rgba(0,0,0,0.10);
  margin: 1.5rem 0;
}
body.single-post .entry-footer {
  max-width: 820px;
  margin: 2rem auto 4rem;
  padding: 2rem 1rem;
  border-top: 1px solid #e6eef5;
  text-align: center;
}
body.single-post .entry-tags { justify-content: center; }

/* ════════════════════════════════════════════════════════
   MOBILE / RESPONSIVE OVERRIDES
   ════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .ssi-middle { min-height: 420px; padding: 40px 0 120px 0; }
  .ssi-sears   { width: 200px !important; left: 2vw; }
  .ssi-ferris  { width: 280px !important; left: calc(2vw + 170px); }
  .ssi-bridge-wrap { width: 240px !important; right: 1vw; }
  .ssi-bridge-wrap img { width: 480px !important; }
  .ssi-boat { width: 460px !important; }
  .ssi-stars-block {
    right: 4vw !important; width: 320px !important; top: 24px !important;
  }
  .ssi-stars-block h2 { font-size: 38px !important; }
  .ssi-stars svg { width: 50px !important; height: 50px !important; }
}
@media (max-width: 767px) {
  .ssi-middle {
    min-height: auto; padding: 40px 1rem 100px 1rem;
    display: flex; flex-direction: column; align-items: center;
  }
  .ssi-stars-block {
    position: static !important; right: auto !important; top: auto !important;
    width: 100% !important; max-width: 460px !important;
    text-align: center; margin: 0 auto 1.5rem; transform: none !important;
  }
  .ssi-stars-block h2 { font-size: 32px !important; }
  .ssi-sears,
  .ssi-ferris,
  .ssi-bridge-wrap,
  .ssi-boat-wrap { position: absolute; bottom: -10px; }
  .ssi-sears   { left: 2vw;  width: 120px !important; }
  .ssi-ferris  { left: 32vw; width: 180px !important; }
  .ssi-bridge-wrap { right: 1vw; width: 140px !important; }
  .ssi-bridge-wrap img { width: 280px !important; }
  .ssi-boat-wrap { display: none !important; }
  .ssi-waves { height: 60px !important; }
  .ss-hero-wave { height: 55px !important; }
  :root { --ss-hero-band: 60px; }
  .ss-header .navbar-nav .nav-link { font-size: 14px !important; }
  .os-stats__inner { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem !important; }
  .os-stat__icon { height: 64px !important; }
  .os-stat:nth-child(1) .os-stat__icon { height: 78px !important; }
  .os-stat__num { font-size: 2rem !important; }
  .os-stat__label { font-size: 0.85rem !important; }
  .ss-fleet-since__main { font-size: 1.25rem !important; }
  .ss-fleet-since__sub  { font-size: 0.9rem !important; }
}

/* ════════════════════════════════════════════════════════
   HOME PAGE — Stats / Trust strip
   ════════════════════════════════════════════════════════ */
.ss-home-stats {
  background: var(--ss-blue);
  padding: 1.5rem 1rem;
  position: relative;
  z-index: 2;
}
.ss-home-stats__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.ss-home-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ss-home-stat__num {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  color: var(--ss-red);
  line-height: 1;
  margin-bottom: 0.4rem;
  letter-spacing: 1px;
}
.ss-home-stat__label {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  color: #ffffff;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1;
}
@media (max-width: 767px) {
  .ss-home-stats__inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
}

/* ════════════════════════════════════════════════════════
   ACCESSIBILITY — visible focus rings, screen-reader helpers
   ════════════════════════════════════════════════════════ */
/* Keyboard focus ring on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ss-red) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
/* Nav links keep their rounded pill focus */
.ss-header .navbar-nav .nav-link:focus-visible {
  outline-offset: 4px !important;
}
/* Filter pills — focus shows the pill border */
.vbw-filter-pill:focus-visible,
.ss-tab:focus-visible,
.ss-blog-filter__pill:focus-visible {
  outline: 3px solid var(--ss-red) !important;
  outline-offset: 2px !important;
}
/* Buttons — focus halo */
.btn:focus-visible,
.ss-btn-primary:focus-visible,
.ss-btn-navy:focus-visible,
.ss-mobile-cta:focus-visible {
  outline: 3px solid #ffffff !important;
  box-shadow: 0 0 0 6px rgba(232,34,41,0.5) !important;
}
/* Skip-to-content link (visible only on keyboard focus) */
.ss-skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ss-red);
  color: #fff !important;
  padding: 12px 24px;
  z-index: 99999;
  text-decoration: none;
  font-family: 'Gigalyps','Impact',sans-serif;
  letter-spacing: 1px;
  border-radius: 0 0 999px 999px;
  transition: top .2s ease;
}
.ss-skip-link:focus { top: 0; }

/* Sticky mobile "Book Now" CTA — only visible on phone/tablet */
.ss-mobile-cta {
  display: none;
}
@media (max-width: 991px) {
  .ss-mobile-cta {
    display: flex;
    position: fixed;
    bottom: 12px;
    left: 12px;
    right: 12px;
    background: var(--ss-red);
    color: #ffffff !important;
    padding: 14px 22px;
    border-radius: 999px;
    z-index: 9999;
    text-decoration: none;
    box-shadow: 0 8px 28px rgba(232,34,41,0.45);
    font-family: 'Gigalyps','Impact',sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    align-items: center;
    justify-content: space-between;
    transition: background .2s ease, transform .2s ease;
  }
  .ss-mobile-cta:hover,
  .ss-mobile-cta:active {
    background: var(--ss-red-dark);
    transform: translateY(-2px);
  }
  .ss-mobile-cta__label {
    font-size: 1rem;
    font-weight: 800;
  }
  .ss-mobile-cta__sub {
    font-size: 0.75rem;
    opacity: 0.9;
    letter-spacing: 0.5px;
    text-transform: none;
  }
  /* Push body content up so the CTA doesn't cover the footer */
  body { padding-bottom: 80px; }
}

/* ── Hide cookie consent popup (GDPR plugin) ───────────── */
#moove_gdpr_cookie_modal,
#moove_gdpr_cookie_info_bar,
.moove-gdpr-modal-content,
.moove-gdpr-info-bar-container,
[class*="moove-gdpr"],
[id*="moove_gdpr"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Brand tokens ─────────────────────────────────────────── */
:root {
  --ss-blue: #28a9e0;
  --ss-red: #e82229;
  --ss-red-dark: #c41e24;
  --ss-footer-blue: #285eab;
  --ss-navy: #28a9e0;      /* alias used by theme */
  --ss-orange: #e82229;    /* alias used by theme */
}

/* ── Display font on headings, buttons, nav ─────────────── */
h1, h2, h3, h4, h5, h6,
.ss-section-title,
.hero__headline,
.hero__eyebrow,
.ss-tour-card__title,
.ss-how__title,
.vbw-heading,
.ss-header__site-name,
.ss-group-card .card-body h3,
.ss-schedule .ss-section-title,
.ss-btn-primary,
.ss-btn-outline,
.ss-btn-navy,
.ss-btn-outline-navy,
.btn,
.vbw-find-btn,
.ss-tour-card__price,
.ss-tour-card__footer .btn {
  font-family: 'Gigalyps', 'Impact', sans-serif !important;
}

/* ── Color overrides — navy → Shoreline Blue ─────────────── */
h1, h2, h3, h4, h5, h6,
.ss-section-title,
.ss-tour-card__title,
.ss-how__title,
.ss-header__site-name,
.text-navy,
.ss-nav-chevron,
.ss-header .navbar-nav .nav-link,
.ss-footer__col-heading a,
.ss-footer__col-heading {
  color: var(--ss-blue) !important;
}

/* "How It Works" step headers — red */
.ss-how__title { color: var(--ss-red) !important; }
/* "How It Works" round icons — spin once when scrolled into view, then settle level */
.ss-how__icon {
  will-change: transform;
}
.ss-how__icon.is-spinning {
  animation: ss-icon-spin 1.4s ease-out both;
}
@keyframes ss-icon-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(720deg); }
}

/* ── Pricing: smaller + Shoreline Blue (tour cards) ──────── */
.ss-tour-card__price {
  font-size: .75rem !important;
  color: var(--ss-blue) !important;
  white-space: nowrap;
}
.ss-tour-card__price strong { color: var(--ss-blue) !important; }

/* ── Tour detail page: TICKETS & PRICING big price ─ red + Gigalyps */
.ss-tickets-pricing__price {
  color: var(--ss-red) !important;
  font-family: 'Gigalyps','Impact',sans-serif !important;
  letter-spacing: 1px;
}

/* ── Superscript cents (injected by shoreline-redesign.js) ──
   Applies wherever a price like "$32.50" appears. The .50 is
   wrapped in <sup class="ss-cents"> and shrunk/raised so the
   dollar value reads cleanly. ──────────────────────────── */
.ss-cents {
  font-size: 0.55em !important;
  vertical-align: super !important;
  line-height: 0 !important;
  top: -0.05em;
  position: relative;
  font-weight: inherit;
  margin-left: 0.05em;
}
.ss-dollar {
  font-size: 0.55em !important;
  vertical-align: super !important;
  line-height: 0 !important;
  top: -0.05em;
  position: relative;
  font-weight: inherit;
  margin-right: 0.05em;
}

/* ── Unified card treatment across the entire site ─────────
   Every card variant (tour cards, group cards, dock cards,
   water-taxi dock cards, booking cards) gets the same look:
   white background, 1rem radius, soft shadow, lift on hover.
   ────────────────────────────────────────────────────────── */
.ss-tour-card,
.ss-group-card,
.ss-dock-card,
.ss-wt-dock-card,
.ss-booking-card {
  background: #fff !important;
  border: none !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.ss-tour-card:hover,
.ss-group-card:hover,
.ss-dock-card:hover,
.ss-wt-dock-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* Card titles — Gigalyps + Shoreline Blue across every variant */
.ss-tour-card__title,
.ss-group-card .card-body h3,
.ss-dock-card__name,
.ss-wt-dock-card__name {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  color: var(--ss-blue) !important;
  letter-spacing: .5px;
}

/* Card "read more" / metadata links — Shoreline Blue */
.ss-tour-card__more,
.ss-dock-card__address a,
.ss-wt-dock-card a {
  color: var(--ss-blue) !important;
  font-weight: 600;
}
.ss-tour-card__more:hover,
.ss-dock-card__address a:hover,
.ss-wt-dock-card a:hover {
  color: var(--ss-red) !important;
}

/* Card image top — consistent rounded corners */
.ss-tour-card .card-img-top,
.ss-group-card .card-img-top,
.ss-dock-card__img img,
.ss-wt-dock-card__img img {
  border-radius: 0 !important;
}

/* ── Primary buttons (orange → Shoreline Red, smaller) ───── */
.ss-btn-primary,
.btn.ss-btn-primary {
  --bs-btn-bg: var(--ss-red);
  --bs-btn-border-color: var(--ss-red);
  --bs-btn-hover-bg: var(--ss-red-dark);
  --bs-btn-hover-border-color: var(--ss-red-dark);
  background-color: var(--ss-red) !important;
  border-color: var(--ss-red) !important;
  font-size: .75rem !important;
  padding: .35rem 1rem !important;
}
.ss-btn-primary:hover,
.btn.ss-btn-primary:hover,
.ss-btn-primary:focus,
.btn.ss-btn-primary:focus,
.ss-btn-primary:active,
.btn.ss-btn-primary:active {
  background-color: var(--ss-red-dark) !important;
  border-color: var(--ss-red-dark) !important;
  color: #ffffff !important;
}

/* Outline button hover — white text on red fill */
.ss-btn-outline:hover,
.btn.ss-btn-outline:hover,
.ss-btn-outline:focus,
.btn.ss-btn-outline:focus {
  background-color: var(--ss-red) !important;
  border-color: var(--ss-red) !important;
  color: #ffffff !important;
}

/* Navy button hover — white text */
.ss-btn-navy:hover,
.btn.ss-btn-navy:hover,
.ss-btn-navy:focus,
.btn.ss-btn-navy:focus,
.ss-btn-navy-outline:hover,
.btn.ss-btn-outline-navy:hover {
  color: #ffffff !important;
}

/* Navy button variant — keep but use Shoreline Blue */
.ss-btn-navy,
.btn.ss-btn-navy {
  background-color: var(--ss-blue) !important;
  border-color: var(--ss-blue) !important;
}

/* Outline button hover */
.ss-btn-outline:hover { color: var(--ss-red) !important; }

/* ── Hero — center all content ───────────────────────────── */
.hero .container,
.hero__content,
.hero__eyebrow,
.hero__headline,
.hero__sub,
.hero__ctas,
.hero__trust {
  text-align: center !important;
}

/* "The Water" headline — sized to feel like the natural hero word
   over the eyebrow line, not dominate the page. ~2.2x the eyebrow. */
.hero__headline {
  font-size: clamp(2.5rem, 6vw, 5rem) !important;
  letter-spacing: 1px !important;
  line-height: 0.95 !important;
  margin-top: 0.05em !important;
  margin-bottom: 0.15em !important;
}
.hero__eyebrow {
  font-size: clamp(1.4rem, 3vw, 2.25rem) !important;
  letter-spacing: 0.5px !important;
  line-height: 0.95 !important;
  margin-bottom: 0 !important;
}

/* Bring sub / CTAs / trust closer to the headline */
.hero__sub {
  margin-top: 0.4rem !important;
  margin-bottom: 0.85rem !important;
  line-height: 1.1 !important;
}
.hero__ctas {
  margin-top: 0.85rem !important;
  margin-bottom: 0.65rem !important;
}
.hero__trust {
  margin-top: 0.4rem !important;
}
.hero__ctas { justify-content: center !important; }
.hero .ss-btn-primary,
.hero .ss-btn-outline {
  font-size: .9rem !important;
  padding: .55rem 1.6rem !important;
}

/* ── Booking widget — Find Tickets button red ────────────── */
.vbw-find-btn,
.vbw-search-bar button,
.vbw-container button[type="submit"],
.vbw-container .btn {
  background-color: var(--ss-red) !important;
  border-color: var(--ss-red) !important;
  color: #fff !important;
}
.vbw-find-btn:hover,
.vbw-search-bar button:hover {
  background-color: var(--ss-red-dark) !important;
  border-color: var(--ss-red-dark) !important;
}

/* Water taxi + tour filter row — one line, scrollable on mobile */
.ss-wt-filter-row,
.ss-tours-hero__filter-row,
.ss-tour-filter-row,
.ss-tab-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center;
  align-items: center;
  gap: 10px !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.25rem 1rem !important;
  white-space: nowrap;
}
.ss-wt-filter-row::-webkit-scrollbar,
.ss-tours-hero__filter-row::-webkit-scrollbar,
.ss-tour-filter-row::-webkit-scrollbar,
.ss-tab-row::-webkit-scrollbar {
  display: none;
}
.ss-wt-filter-row .ss-tab,
.ss-tours-hero__filter-row .ss-tab,
.ss-tour-filter-row .ss-tab,
.ss-tab-row .ss-tab {
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════
   ROUTE MAPS — real Chicago map with brand-styled route overlay
   The base PNG is a stylized Chicago map (downtown + river +
   Lake Michigan). On top: an SVG path showing the tour route,
   a brand-red animated boat dot tracing the path, and pulsing
   markers at key landmarks. Title chip in Gigalyps.
   ════════════════════════════════════════════════════════ */
.ss-rmap {
  position: relative;
  width: 100%;
  aspect-ratio: 2000 / 933;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #28a9e0;
  box-shadow: 0 10px 32px rgba(40,169,224,0.18);
}
.ss-rmap__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Simplify the basemap visually so the route reads clearly */
  filter: contrast(0.65) brightness(1.10) saturate(0.7);
  opacity: 0.85;
}
/* Soft white wash over the map to mute the fine detail further */
.ss-rmap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.18);
  z-index: 1;
  pointer-events: none;
}
.ss-rmap__overlay,
.ss-rmap__title {
  z-index: 2;
}
.ss-rmap__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* White shadow stroke underneath for legibility */
.ss-rmap__overlay .ss-rmap__route-shadow {
  fill: none;
  stroke: #ffffff;
  stroke-width: 16;
  stroke-linecap: round;
  opacity: 0.85;
}
/* The dashed coloured route path on top */
.ss-rmap__overlay .ss-rmap__route {
  fill: none;
  stroke: var(--rmap-color, var(--ss-red));
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 24 14;
  animation: ss-rmap-dash 1.6s linear infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.30));
}
@keyframes ss-rmap-dash {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -38; }
}
/* Boat moving along the route */
.ss-rmap__boat {
  fill: #ffffff;
  stroke: var(--rmap-color, var(--ss-red));
  stroke-width: 4;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.55));
}
/* Pulsing landmark stops */
.ss-rmap__overlay .ss-rmap__stop {
  fill: var(--rmap-color, var(--ss-red));
  stroke: #ffffff;
  stroke-width: 3;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.30));
}
.ss-rmap__overlay .ss-rmap__stop-pulse {
  fill: var(--rmap-color, var(--ss-red));
  opacity: 0;
  animation: ss-rmap-pulse 2s ease-out infinite;
}
.ss-rmap__overlay .ss-rmap__stop-pulse.delay1 { animation-delay: 0.4s; }
.ss-rmap__overlay .ss-rmap__stop-pulse.delay2 { animation-delay: 0.8s; }
.ss-rmap__overlay .ss-rmap__stop-pulse.delay3 { animation-delay: 1.2s; }
@keyframes ss-rmap-pulse {
  0%   { transform: scale(1); opacity: 0.7; transform-origin: center; transform-box: fill-box; }
  100% { transform: scale(3.5); opacity: 0; transform-origin: center; transform-box: fill-box; }
}
/* Stop labels in Gigalyps */
.ss-rmap__overlay .ss-rmap__label {
  font-family: 'Gigalyps','Impact',sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  fill: #ffffff;
  paint-order: stroke fill;
  stroke: #1a3a5f;
  stroke-width: 4;
  stroke-linejoin: round;
}
/* Title chip */
.ss-rmap__title {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 8;
  background: var(--ss-red);
  color: #ffffff;
  font-family: 'Gigalyps','Impact',sans-serif;
  font-size: 1rem;
  padding: 8px 18px;
  border-radius: 999px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(0,0,0,0.20);
}

/* Embedded Google route map (legacy iframe — kept for compatibility) */
.ss-gmap-wrap {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,0.10);
  background: #eaf6fc;
}
.ss-gmap {
  display: block;
  width: 100%;
  border: 0;
  min-height: 480px;
}

/* Leaflet-based custom route map — brand-themed Shoreline look */
.ss-leaflet-wrap {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,0.10);
  background: #eaf6fc;
}
.ss-leaflet {
  width: 100%;
  /* Match the aspect ratio of the original map images (640×448) */
  aspect-ratio: 640 / 448;
  height: auto;
  min-height: 320px;
  border-radius: 1rem;
  background: #d6efff;
}
/* Basemap — push the pale Positron water to brand Shoreline Blue.
   The pale gray streets / cream land have low saturation so they
   barely change; the (slightly saturated) light-blue water amplifies
   strongly toward our brand blue (#28a9e0). */
.ss-leaflet .leaflet-tile-pane {
  filter: saturate(7) brightness(0.93) contrast(1.08);
}
/* Light-blue background underneath the tiles so any water-colored
   "holes" in the rendering match the brand blue. */
.ss-leaflet,
.ss-leaflet .leaflet-container {
  background: #28a9e0;
}
/* Hide all Leaflet/CARTO/OSM attribution from the map */
.ss-leaflet .leaflet-control-attribution {
  display: none !important;
}
/* Zoom controls — round, brand styled */
.ss-leaflet .leaflet-bar {
  border: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.14) !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.ss-leaflet .leaflet-bar a {
  background-color: #ffffff !important;
  color: var(--ss-blue) !important;
  border: none !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  transition: background .2s ease, color .2s ease;
}
.ss-leaflet .leaflet-bar a:first-child { border-radius: 999px 999px 0 0 !important; }
.ss-leaflet .leaflet-bar a:last-child  { border-radius: 0 0 999px 999px !important; }
.ss-leaflet .leaflet-bar a:hover {
  background-color: var(--ss-red) !important;
  color: #ffffff !important;
}
/* Popups in brand style */
.ss-leaflet .leaflet-popup-content-wrapper {
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  background: #ffffff;
}
.ss-leaflet .leaflet-popup-content {
  font-family: inherit;
  margin: 12px 16px;
  color: #285eab;
  font-size: 14px;
}
.ss-leaflet .leaflet-popup-tip {
  background: #ffffff;
}

/* Custom pulsing pin used for route start/end markers */
.ss-leaflet-pin {
  position: relative;
  width: 24px;
  height: 24px;
}
.ss-leaflet-pin .ss-pin-dot {
  position: absolute;
  inset: 0;
  background: var(--ss-red);
  border: 4px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.30);
  z-index: 2;
}
.ss-leaflet-pin .ss-pin-pulse {
  position: absolute;
  inset: 0;
  background: var(--ss-red);
  border-radius: 50%;
  opacity: 0.55;
  z-index: 1;
  animation: ss-leaflet-pulse 2s ease-out infinite;
}
@keyframes ss-leaflet-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(4);   opacity: 0; }
}

/* Brand text labels for landmarks (no illustrations on the map) */
.ss-leaflet-label {
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
  white-space: nowrap;
}
.ss-leaflet-label__dot {
  position: absolute;
  left: 0; top: 0;
  width: 10px;
  height: 10px;
  background: var(--ss-red);
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.30);
}
.ss-leaflet-label__text {
  position: absolute;
  font-family: 'Gigalyps','Impact',sans-serif;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #285eab;
  background: rgba(255,255,255,0.94);
  padding: 2px 7px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  text-transform: uppercase;
  pointer-events: none;
  line-height: 1.2;
  font-weight: 800;
}
/* Direction-based positioning so labels don't pile on each other */
.dir-n  .ss-leaflet-label__text { left: 50%; bottom: 14px; transform: translateX(-50%); }
.dir-s  .ss-leaflet-label__text { left: 50%; top: 14px;    transform: translateX(-50%); }
.dir-e  .ss-leaflet-label__text { left: 14px; top: -2px; }
.dir-w  .ss-leaflet-label__text { right: 14px; top: -2px; }
.dir-ne .ss-leaflet-label__text { left: 12px; bottom: 12px; }
.dir-nw .ss-leaflet-label__text { right: 12px; bottom: 12px; }
.dir-se .ss-leaflet-label__text { left: 12px; top: 12px; }
.dir-sw .ss-leaflet-label__text { right: 12px; top: 12px; }

/* Hide label text when map is zoomed out — only the red dots remain */
.ss-leaflet.ss-labels-hidden .ss-leaflet-label__text,
.leaflet-container.ss-labels-hidden .ss-leaflet-label__text {
  display: none;
}

/* Boat sailing along the route */
.ss-leaflet-boat {
  background: transparent !important;
  border: none !important;
}
.ss-leaflet-boat img {
  display: block;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.45));
  animation: ss-leaflet-boat-bob 1.6s ease-in-out infinite alternate;
}
@keyframes ss-leaflet-boat-bob {
  from { transform: translateY(0)    rotate(-2deg); }
  to   { transform: translateY(-3px) rotate(2deg);  }
}

/* Tour / water-taxi filter pills (.ss-tab) — Nexa Bold for readability */
.ss-tab {
  background: #ffffff !important;
  color: var(--ss-blue) !important;
  border: none !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  font-family: var(--ss-nexa) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: background .2s, color .2s !important;
}
.ss-tab.active,
.ss-tab:hover {
  background: var(--ss-red) !important;
  color: #ffffff !important;
  border: none !important;
}

/* Blog filter pill row — matches the tour / water-taxi filter row.
   One line, horizontally scrollable on overflow, Nexa Bold pills. */
.ss-blog-filter-nav {
  margin: 0 auto 2rem !important;
  max-width: 1200px;
}
.ss-blog-filter {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center;
  align-items: center;
  gap: 10px !important;
  padding: 0.25rem 1rem !important;
  margin: 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
}
.ss-blog-filter::-webkit-scrollbar { display: none; }
.ss-blog-filter li {
  list-style: none;
  flex-shrink: 0;
}

/* Blog filter pills — same treatment as .ss-tab on tour/water-taxi pages */
.ss-blog-filter__pill {
  background: #ffffff !important;
  color: var(--ss-blue) !important;
  border: none !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  font-family: var(--ss-nexa) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.ss-blog-filter__pill.is-active,
.ss-blog-filter__pill:hover {
  background: var(--ss-red) !important;
  color: #ffffff !important;
  border: none !important;
  transform: none;
}

/* EXPERIENCE / DATE labels */
.vbw-label {
  color: var(--ss-red) !important;
  font-family: 'Gigalyps','Impact',sans-serif !important;
  letter-spacing: 1px;
  font-size: 1.25rem !important;
}

/* "Find your perfect time" / "Route schedule" heading — match section title size */
h2.vbw-heading,
.vbw-header .vbw-heading,
.vbw-header h2.vbw-heading,
.vbw-route-schedule .vbw-heading,
.vbw-route-schedule h2.vbw-heading {
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  font-weight: 800 !important;
  font-family: 'Gigalyps','Impact',sans-serif !important;
  color: var(--ss-red) !important;
  letter-spacing: 1px !important;
}

/* ── Blue band under every hero, with the home-page wave as its
   top edge. Page title sits inside this band for easy reading. */

/* Variable: how much blue band sits below the hero image */
:root {
  --ss-hero-band: 60px;
}

/* Hero: cover the box, hero is tall enough that boats (lower in the photo)
   remain visible above the wave + 110px blue title band. Title sits in the
   band, below the wave. */
.ss-tour-hero,
.ss-tours-hero,
.ss-wt-hero,
.ss-simple-hero {
  position: relative !important;
  min-height: 460px !important;
  align-items: flex-end !important;
  padding-bottom: 1rem !important;
  background-size: cover !important;
  background-position: center 35% !important;  /* favour the upper-middle so subjects clear the wave */
  background-repeat: no-repeat !important;
  background-color: var(--ss-blue) !important;
}
@media (max-width: 767px) {
  .ss-tour-hero,
  .ss-tours-hero,
  .ss-wt-hero,
  .ss-simple-hero {
    min-height: 340px !important;
    background-position: center 40% !important;
  }
}
.ss-tour-hero::after,
.ss-tours-hero::after,
.ss-wt-hero::after,
.ss-simple-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ss-hero-band);
  background: var(--ss-blue);
  z-index: 1;
  pointer-events: none;
}
/* Hero content (title + badge) sits in the blue band, above the
   image AND above the wave layer. We target the IMMEDIATE container
   that wraps the title so its entire stacking context lifts above
   the wave (z-index 4) and overlay (hidden). */
.ss-tour-hero > .container,
.ss-tour-hero > .container-xl,
.ss-tour-hero > .ss-tour-hero__content,
.ss-tours-hero > .container,
.ss-tours-hero > .container-xl,
.ss-tours-hero > .ss-tours-hero__content,
.ss-tours-hero > .ss-stack-2,
.ss-tours-hero .container-xl.ss-stack-2,
.ss-wt-hero > .container,
.ss-wt-hero > .container-xl,
.ss-wt-hero > .ss-wt-hero__content,
.ss-wt-hero .container-xl.ss-stack-2,
.ss-simple-hero > .container,
.ss-simple-hero > .container-xl,
.ss-simple-hero > .ss-simple-hero__content,
.ss-simple-hero .container-xl.ss-stack-2 {
  position: relative !important;
  z-index: 10 !important;
}

/* The title text itself stays above any sibling element (badge, etc.) */
.ss-tour-hero__title,
.ss-tour-hero__badge,
.ss-tours-hero__title,
.ss-tours-hero__sub,
.ss-wt-hero__title,
.ss-wt-hero__sub,
.ss-simple-hero__title,
.ss-tour-hero h1, .ss-tour-hero h2,
.ss-tours-hero h1, .ss-tours-hero h2,
.ss-wt-hero h1, .ss-wt-hero h2,
.ss-simple-hero h1, .ss-simple-hero h2 {
  position: relative !important;
  z-index: 11 !important;
  text-align: center !important;
}

/* All page-header titles use the same size as the tour-page hero title */
.ss-tour-hero__title,
.ss-tours-hero__title,
.ss-wt-hero__title,
.ss-simple-hero__title,
.ss-tour-hero h1, .ss-tour-hero h2,
.ss-tours-hero h1, .ss-tours-hero h2,
.ss-wt-hero h1, .ss-wt-hero h2,
.ss-simple-hero h1, .ss-simple-hero h2 {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  margin-bottom: 0 !important;
  white-space: nowrap !important;
  position: relative !important;
  top: 5px !important;
}

/* Fall back to wrapping titles on narrow viewports so they never
   overflow the container — and auto-shrink long ones to fit. */
@media (max-width: 767px) {
  .ss-tour-hero__title,
  .ss-tours-hero__title,
  .ss-wt-hero__title,
  .ss-simple-hero__title,
  .ss-tour-hero h1, .ss-tour-hero h2,
  .ss-tours-hero h1, .ss-tours-hero h2,
  .ss-wt-hero h1, .ss-wt-hero h2,
  .ss-simple-hero h1, .ss-simple-hero h2 {
    white-space: normal !important;
  }
}

/* Spanish architecture tour title is long — shrink to fit one line */
body.postid-5488 .ss-tour-hero__title {
  font-size: clamp(1.5rem, 3.6vw, 2.6rem) !important;
}

/* Add the same animated wave to the bottom of the home page hero
   (which has no .ss-hero-wave element by default) via ::after */
section.hero,
section.hero--video,
.hero.hero--video {
  position: relative !important;
  overflow: hidden !important;
}
section.hero::after,
.hero.hero--video::after,
.hero::after {
  display: none !important;
  content: none !important;
}
@keyframes hero-wave-flow {
  from { background-position: 0 bottom; }
  to   { background-position: -825px bottom; }
}

/* Wave sits at the top of the blue band */
.ss-hero-wave {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(var(--ss-hero-band) - 1px) !important;
  width: 100% !important;
  height: 70px !important;
  z-index: 4 !important;
  pointer-events: none !important;
  background-image: url("./wave-pattern.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 0 bottom;
  animation: none;
  overflow: hidden;
}
.ss-hero-wave svg { display: none !important; }

/* Hero wave height (matches home hero) */
.ss-hero-wave { height: 40px !important; }

@keyframes ssi-wave-flow {
  from { background-position: 0 bottom; }
  to   { background-position: -825px bottom; }
}

/* ── Remove dark color overlays on header/hero sections ── */
.hero__overlay,
.ss-tour-hero__overlay,
.ss-tours-hero__overlay,
.ss-hero__overlay,
[class*="-hero__overlay"],
[class*="hero__overlay"] {
  display: none !important;
  background: transparent !important;
}

/* ── Hero background framing: focus on the boat (middle-lower) for
   every hero on the site. Boats sit in the lower-middle of these
   landscape photos, so we drop the crop window down. */
.ss-tour-hero,
.ss-tours-hero,
.ss-wt-hero,
.ss-simple-hero,
.ss-hero,
[class*="-hero"][style*="background-image"] {
  background-position: 50% 62% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* ── Hero / page-header headlines: white over background image ── */
.hero,
.hero *,
.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6,
.hero__headline,
.hero__eyebrow,
.hero__sub,
.hero__trust,
.hero__content,
.hero__text,
.ss-tour-hero,
.ss-tour-hero *,
.ss-tour-hero h1, .ss-tour-hero h2, .ss-tour-hero h3,
.ss-tour-hero__title,
.ss-tour-hero__badge,
.ss-tour-hero__content,
.ss-tours-hero,
.ss-tours-hero *,
.ss-tours-hero h1, .ss-tours-hero h2, .ss-tours-hero h3,
.ss-tours-hero__title,
.ss-tours-hero__content,
[class*="-hero"] h1,
[class*="-hero"] h2,
[class*="-hero"] h3,
[class*="-hero__title"],
[class*="-hero__headline"],
[class*="-hero__subtitle"],
[class*="-hero__eyebrow"] {
  color: #ffffff !important;
}
/* Keep the small red badge on tour heroes red (it's a pill, not a headline)
   and centered within the hero like the title */
.ss-tour-hero__badge {
  background: var(--ss-red) !important;
  color: #ffffff !important;
  display: inline-block !important;
  position: relative !important;
  margin: 0 auto 1.25rem !important;
  top: 18px !important;
  z-index: 12 !important;
}
.ss-tour-hero__content {
  text-align: center !important;
}

/* ── Navigation ─────────────────────────────────────────── */
.ss-header .navbar-nav .nav-link:hover,
.ss-header .navbar-nav .nav-link.active,
a[style*="#f5821f"],
a[style*="#F5821F"] {
  color: var(--ss-red) !important;
}
.ss-header .navbar-nav .nav-link {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  letter-spacing: 0.5px;
}
.ss-header .navbar-nav .dropdown-menu .dropdown-item {
  color: var(--ss-blue) !important;
}
.ss-header .navbar-nav .dropdown-menu .dropdown-item:hover,
.ss-header .navbar-nav .dropdown-menu .dropdown-item:focus,
.ss-header .navbar-nav .dropdown-menu .dropdown-item.active {
  color: var(--ss-red) !important;
  background: transparent !important;
}

/* ── Footer ─────────────────────────────────────────────── */
.ss-footer { background: var(--ss-footer-blue) !important; }
.ss-footer .ss-footer__col-heading,
.ss-footer .ss-footer__col-heading a {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  letter-spacing: 1px;
}
.ss-footer a:hover,
.ss-footer .ss-footer__col-heading a:hover,
.ss-footer .ss-footer__nav-list a:hover {
  color: var(--ss-red) !important;
  text-decoration: none;
}

/* Wave divider above footer — inline SVG in exact footer-blue (#285eab),
   no PNG / filter shenanigans. Scallops point UP into the section above. */
.ss-footer {
  position: relative;
  padding-top: 70px !important;
}
/* Push any section that sits directly above the footer away from the wave */
section:has(+ .ss-footer),
div:has(+ .ss-footer),
main:has(+ .ss-footer) > *:last-child,
main:has(+ .ss-footer) {
  padding-bottom: 3.5rem !important;
}
/* Tour detail pages need extra breathing room above the footer */
body.ss-page-tour-single section:has(+ .ss-footer),
body.ss-page-tour-single div:has(+ .ss-footer),
body.ss-page-tour-single main:has(+ .ss-footer) > *:last-child,
body.ss-page-tour-single main:has(+ .ss-footer) {
  padding-bottom: 7rem !important;
}
body.ss-page-tour-single .ss-footer {
  margin-top: 2rem;
}
/* Blog pagination — just enough clearance above the wave */
.ss-blog-pagination {
  margin-bottom: 2.5rem !important;
}
.ss-footer::before {
  content: "";
  position: absolute;
  top: -84px;                  /* lift wave above footer; 1px overlap avoids seam */
  left: 0;
  right: 0;
  height: 85px;
  background-image: url("./wave-pattern-dark.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 0 bottom;
  pointer-events: none;
  z-index: 9999;
  animation: none;
}
/* Footer wave scrolls the OPPOSITE direction of the Our-Chicago wave above
   (which goes from 0 → -825px). This goes 0 → +825px. */
@keyframes ss-footer-wave-flow {
  from { background-position: 0 bottom; }
  to   { background-position: 825px bottom; }
}
/* Beefier social icons */
.ss-footer__social-row { gap: 14px !important; margin-top: 1rem !important; }
.ss-footer__social-icon {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  transition: background .25s ease, transform .25s ease;
}
.ss-footer__social-icon:hover {
  background: var(--ss-red);
  transform: translateY(-3px);
}
/* Keep the glyph itself white on red hover */
.ss-footer__social-icon svg,
.ss-footer__social-icon i,
.ss-footer__social-icon img {
  color: #ffffff;
  fill: currentColor;
  transition: color .25s ease, fill .25s ease, filter .25s ease;
}
.ss-footer__social-icon svg path,
.ss-footer__social-icon svg circle,
.ss-footer__social-icon svg rect,
.ss-footer__social-icon svg polygon { fill: currentColor; }
.ss-footer__social-icon:hover svg,
.ss-footer__social-icon:hover i,
.ss-footer__social-icon:hover svg path,
.ss-footer__social-icon:hover svg circle,
.ss-footer__social-icon:hover svg rect,
.ss-footer__social-icon:hover svg polygon {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* For <img>-based icons, force them to stay bright white on hover */
.ss-footer__social-icon:hover img {
  filter: brightness(0) invert(1);
}

/* ════════════════════════════════════════════════════════════
   "Our Story" page — illustrated, animated, dramatic redesign
   ════════════════════════════════════════════════════════════ */

/* Home-page historic captains photo — "Chicago's largest fleet since 1939" overlay */
.ss-fleet-since {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
}
.ss-fleet-since__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;     /* anchor at top */
  text-align: center;
  padding: 1.25rem 1rem 1rem;
  /* Light fade only at the top so the sky reads clearly, no gradient over the captains */
  background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.10) 35%, transparent 60%);
  pointer-events: none;
}
.ss-fleet-since__main {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  font-size: clamp(1.5rem, 4vw, 3rem);
  letter-spacing: 1px;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 4px 18px rgba(0,0,0,0.6), 0 1px 0 rgba(0,0,0,0.45);
}
.ss-fleet-since__sub {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  font-size: clamp(1rem, 2.5vw, 1.6rem);
  letter-spacing: 1.5px;
  margin-top: 0.5rem;
  color: var(--ss-red);
  text-shadow: 0 4px 18px rgba(0,0,0,0.55);
}


/* ── Reveal-on-scroll (used across the page) ──────────────── */
[data-os-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
[data-os-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── OS-1: Stats banner ──────────────────────────────────── */
.os-stats {
  background: var(--ss-blue);
  padding: 3.5rem 1rem 2rem;
  position: relative;
  z-index: 20;
  overflow: hidden;
  margin-top: 0 !important;
}
/* Wave at top of stats banner removed — clean flat blue edge. */
.os-stats::before { display: none !important; content: none !important; }
/* Skyline section: illustrations removed entirely — collapse the strip */
.os-skyline { display: none !important; }
.os-sky { display: none !important; }
.os-sky__waves { display: none !important; }
/* Labels inside the blue stats banner — white for contrast */
.os-stat__label {
  color: #ffffff !important;
}
/* (Removed faded background stars on the stats banner per spec) */
.os-stats__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;          /* bottom-align all four columns */
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.os-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* icon/number/label hug the bottom of the cell */
}
@media (max-width: 900px) {
  .os-stats__inner { grid-template-columns: repeat(2, 1fr); }
}
.os-stat {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 1rem 0.5rem;
  text-align: center;
  box-shadow: none;
  transition: transform .35s ease;
}
.os-stat:hover {
  transform: translateY(-4px);
}
.os-stat__icon {
  height: 95px;
  width: auto;
  display: block;
  margin: 0 auto 0.75rem;
  object-fit: contain;
  transition: transform .4s ease;
}
.os-stat:hover .os-stat__icon { transform: scale(1.08) rotate(-3deg); }
/* First stat (lighthouse) a touch taller to match its proportions */
.os-stat:nth-child(1) .os-stat__icon { height: 115px; }
.os-stat__icon--spin {
  animation: os-life-spin 24s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes os-life-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.os-stat__num {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  color: var(--ss-red);
  line-height: 1;
  margin: 0.35rem 0;
  letter-spacing: 1px;
}
.os-stat__label {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  color: var(--ss-blue);
  font-size: 1rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 0.95;
}

/* ── OS-2: Illustrated skyline panorama ─────────────────── */
.os-skyline {
  position: relative;
  height: 800px;
  background: transparent;
  overflow: visible;   /* allow tall building tops to poke up above the section */
  margin-bottom: 0;
}
.os-sky {
  position: absolute;
  bottom: 90px;
  height: auto;
  max-width: none;
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.22));
}
/* Keep Hancock, 150 N Riverside, Sears, and Marina City — hide the rest */
.os-sky--cottages,
.os-sky--tribune,
.os-sky--stregis,
.os-sky--bridges { display: none !important; }

/* Buildings lowered so their bases sit well below the wave line */
.os-sky--hancock { left: 14%; bottom: -20px; width: 250px; z-index: 4; }
.os-sky--150n    { left: 28%; bottom: -20px; width: 300px; z-index: 3; }
.os-sky--sears   { left: 42%; bottom: -20px; width: 284px; z-index: 5; }
.os-sky--marina  { left: 60%; bottom: -90px; width: 560px; z-index: 3; }
.os-sky--boat {
  left: -670px;
  bottom: 0;
  width: 648px;
  z-index: 4;          /* below the wave layer so wave covers the hull */
  animation: os-boat-sail 30s linear infinite;
}
@keyframes os-boat-sail {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 260px)); }
}
.os-sky__waves {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 85px;
  z-index: 10;          /* above all buildings AND the boat */
  background-image: url("./wave-pattern.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 0 bottom;
  animation: none;
  pointer-events: none;
}
@keyframes os-wave-flow {
  from { background-position: 0 bottom; }
  to   { background-position: -825px bottom; }
}

/* ── OS-3: Page content polish & floats ─────────────────── */
.os-content {
  position: relative;
  background: linear-gradient(180deg, #fafdff 0%, #ffffff 100%);
  overflow: hidden;
}
/* (Floating decorative illustrations removed — no lowered-opacity images) */
.os-float { display: none !important; }
.os-content .container-xl { position: relative; z-index: 2; }

/* Section headings on simple-content templates */
.ss-simple-content .stk-block-heading__text,
.ss-simple-content h2 {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  color: var(--ss-blue) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  letter-spacing: 1px !important;
  text-align: center !important;
  margin: 2rem auto 0.5rem !important;
  position: relative;
  padding-bottom: 0.75rem;
}
/* Red underline accent on every heading */
.ss-simple-content .stk-block-heading__text::after,
.ss-simple-content h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: var(--ss-red);
  border-radius: 2px;
  margin: 0.75rem auto 0;
}

/* Body paragraphs */
.ss-simple-content p {
  font-size: 1.08rem;
  line-height: 1.75;
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  color: #2c3540;
}

/* Quote / testimonial paragraphs (gray italic) */
.ss-simple-content p.has-gray-color em,
.ss-simple-content em {
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.6;
  display: inline-block;
  margin-top: 0.5rem;
}

/* Images: rounded corners, soft shadow, hover lift */
.ss-simple-content figure,
.ss-simple-content .stk-img-wrapper {
  display: block;
  overflow: hidden;
  border-radius: 1.25rem;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.ss-simple-content figure:hover,
.ss-simple-content .stk-img-wrapper:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 16px 42px rgba(0,0,0,0.18);
}
.ss-simple-content img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* ── OS-4: Timeline (vertical with center line, alternating sides) ── */
.os-content .stk-row:has(> .timelineitem),
.os-content > .container-xl {
  position: relative;
}
.ss-simple-content .timelineitem {
  position: relative;
  background: #ffffff;
  border-radius: 1.25rem;
  padding: 1.5rem 1.75rem;
  margin: 1.5rem auto;
  max-width: 760px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  transition: transform .3s ease, box-shadow .3s ease;
}
/* Suppress the inline-theme blue dot and triangle so no vertical line forms */
.ss-simple-content .stk-block.timelineitem::before,
.ss-simple-content .stk-block.timelineitem::after {
  display: none !important;
}
/* Kill the 4px blue left border on the Stackable timeline wrapper */
.ss-simple-content .stk-605c5a1,
.ss-simple-content [class*="stk-605c5a1"] {
  border: none !important;
  border-left: none !important;
}

/* Timeline year headings — Gigalyps */
.ss-simple-content .timelineitem h2,
.ss-simple-content .timelineitem h3,
.ss-simple-content .timelineitem h4,
.ss-simple-content .timelineitem .stk-block-heading__text,
.ss-simple-content .stk-block.timelineitem h2,
.ss-simple-content .stk-block.timelineitem h3 {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  letter-spacing: 1px !important;
}
/* Year labels (1939, 1949, …) — Gigalyps, bigger, brand red.
   Targets ONLY the specific Stackable year-block classes that the
   theme tags as years (NOT every text block inside a timeline item) */
.ss-simple-content .stk-d6968b1 .stk-block-text__text,
.ss-simple-content .stk-578b109 .stk-block-text__text,
.ss-simple-content .stk-c983344 .stk-block-text__text,
.ss-simple-content .stk-54d10cb .stk-block-text__text,
.ss-simple-content .stk-f5500cf .stk-block-text__text,
.ss-simple-content .stk-35985a8 .stk-block-text__text,
.ss-simple-content .stk-50591f8 .stk-block-text__text,
.ss-simple-content .stk-4b134bb .stk-block-text__text,
.ss-simple-content .stk-7151125 .stk-block-text__text,
.ss-simple-content .stk-b0b3ab1 .stk-block-text__text {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  font-size: 2rem !important;
  letter-spacing: 1px !important;
  color: var(--ss-red) !important;
  line-height: 1 !important;
}
.ss-simple-content .timelineitem:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.14);
}
.ss-simple-content .timelineitem h1,
.ss-simple-content .timelineitem h2,
.ss-simple-content .timelineitem h3,
.ss-simple-content .timelineitem h4 {
  text-align: left !important;
  margin: 0 0 .5rem !important;
  font-size: 1.5rem !important;
  color: var(--ss-red) !important;
  padding-bottom: 0 !important;
  font-family: 'Gigalyps','Impact',sans-serif !important;
  letter-spacing: 0.5px;
}
.ss-simple-content .timelineitem h2::after,
.ss-simple-content .timelineitem h3::after {
  display: none;
}
.ss-simple-content .timelineitem p {
  text-align: left !important;
  margin: 0 !important;
  max-width: none !important;
  font-size: 1rem;
}

/* Center decorative accent: subtle divider between main sections */
.ss-simple-content > .container-xl > * + * { margin-top: 2.5rem; }


/* ── Headings inside blue-background sections → white

/* Section headings on simple-content templates */
.ss-simple-content .stk-block-heading__text,
.ss-simple-content h2 {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  color: var(--ss-blue) !important;
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  letter-spacing: 1px !important;
  text-align: center !important;
  margin: 2rem auto 0.5rem !important;
  position: relative;
  padding-bottom: 0.75rem;
}
/* Red underline accent on every heading */
.ss-simple-content .stk-block-heading__text::after,
.ss-simple-content h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: var(--ss-red);
  border-radius: 2px;
  margin: 0.75rem auto 0;
}

/* Body paragraphs */
.ss-simple-content p {
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  color: #2c3540;
}

/* Quote / testimonial paragraphs (gray italic) */
.ss-simple-content p.has-gray-color em,
.ss-simple-content em {
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.6;
  display: inline-block;
  margin-top: 0.5rem;
}

/* Images: rounded corners, soft shadow, hover lift */
.ss-simple-content figure,
.ss-simple-content .stk-img-wrapper {
  display: block;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 4px 18px rgba(0,0,0,0.10);
  transition: transform .35s ease, box-shadow .35s ease;
}
.ss-simple-content figure:hover,
.ss-simple-content .stk-img-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.15);
}
.ss-simple-content img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Timeline items — visually consistent cards */
.ss-simple-content .timelineitem {
  position: relative;
  background: #fff;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem 1.25rem 2.5rem;
  margin: 1.25rem auto;
  max-width: 820px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  border-left: 6px solid var(--ss-blue);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ss-simple-content .timelineitem:hover {
  transform: translateX(4px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.12);
  border-left-color: var(--ss-red);
}
.ss-simple-content .timelineitem h2,
.ss-simple-content .timelineitem h3,
.ss-simple-content .timelineitem h4 {
  text-align: left !important;
  margin-top: 0 !important;
  font-size: 1.5rem !important;
  color: var(--ss-red) !important;
  padding-bottom: 0 !important;
}
.ss-simple-content .timelineitem h2::after,
.ss-simple-content .timelineitem h3::after {
  display: none;     /* skip the underline on timeline headings */
}
.ss-simple-content .timelineitem p {
  text-align: left !important;
  margin-left: 0 !important;
  max-width: none !important;
  font-size: 1rem;
}

/* Center decorative accent: subtle divider between main sections */
.ss-simple-content > .container-xl > * + * { margin-top: 2.5rem; }


/* ── Headings inside blue-background sections → white
   (so they don't disappear into the blue background) ─── */
.ss-citypass-banner__card,
.ss-citypass-banner__card * ,
.ss-review-block__quote,
.ss-review-block__quote *,
.ss-wt-schedule-freq,
.ss-wt-schedule-freq *,
.ss-groups-hero,
.ss-groups-hero * {
  /* default text inside these blue cards is white */
}
.ss-citypass-banner__card h1,
.ss-citypass-banner__card h2,
.ss-citypass-banner__card h3,
.ss-citypass-banner__card h4,
.ss-citypass-banner__card .ss-citypass-banner__heading,
.ss-review-block__quote h1,
.ss-review-block__quote h2,
.ss-review-block__quote h3,
.ss-review-block__quote h4,
.ss-groups-hero h1,
.ss-groups-hero h2,
.ss-groups-hero h3,
.ss-groups-hero h4 {
  color: #ffffff !important;
}
.ss-citypass-banner__card .ss-citypass-banner__body,
.ss-citypass-banner__card p,
.ss-review-block__quote p,
.ss-groups-hero p {
  color: #ffffff !important;
}

/* ── CityPASS banner — render as a FULL-WIDTH page section,
   not a floating rounded card.
   The blue moves to the section, the card chrome is stripped. */
.ss-citypass-banner {
  background: #28a9e0 !important;
  margin: 0 !important;
  padding: 3rem 0 !important;
}
.ss-citypass-banner__card {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.ss-citypass-banner__heading {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 0.85rem !important;
}
.ss-citypass-banner__body {
  font-size: 1rem !important;
  line-height: 1.55 !important;
  max-width: 820px !important;
}

/* ════════════════════════════════════════════════════════
   SCROLL BOAT — drifts along right edge as user scrolls
   ════════════════════════════════════════════════════════ */
.ss-scroll-boat {
  display: none !important;
  position: fixed;
  left: 12px;
  bottom: calc(20px + var(--scroll-p, 0) * (100vh - 120px));
  width: 60px;
  height: auto;
  z-index: 1050;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.30));
  transition: bottom .15s ease-out;
  animation: ss-scroll-boat-bob 3s ease-in-out infinite alternate;
}
@keyframes ss-scroll-boat-bob {
  from { transform: rotate(-3deg); }
  to   { transform: rotate(3deg); }
}
@media (max-width: 991px) {
  .ss-scroll-boat { display: none; }   /* hide on mobile, sticky CTA there instead */
}

/* ════════════════════════════════════════════════════════
   NIGHT THEME — applied to fireworks tour pages (body.ss-theme-night)
   ════════════════════════════════════════════════════════ */
body.ss-theme-night {
  --ss-blue: #4dbcef;          /* slightly lighter blue for dark bg legibility */
  --ss-footer-blue: #0a1a3c;   /* darker footer */
  background: #0a1830;
}
body.ss-theme-night .ss-tour-hero,
body.ss-theme-night .ss-simple-hero {
  background-color: #0a1830 !important;
  filter: brightness(0.85) contrast(1.10);
}
body.ss-theme-night .ss-tour-hero::after,
body.ss-theme-night [class*="-hero"]::after {
  background: linear-gradient(180deg, #1a2a4a 0%, #0a1830 100%) !important;
}
body.ss-theme-night main,
body.ss-theme-night .ss-simple-content,
body.ss-theme-night .ss-casting-off {
  background: linear-gradient(180deg, #0a1830 0%, #0e2244 100%) !important;
  color: #e5edf8 !important;
}
body.ss-theme-night .ss-simple-content p,
body.ss-theme-night .ss-casting-off p {
  color: #c3d2e6 !important;
}
body.ss-theme-night h1, body.ss-theme-night h2,
body.ss-theme-night h3, body.ss-theme-night h4 {
  color: #ffd54a !important;   /* warm gold like fireworks */
}
body.ss-theme-night .ss-tickets-pricing {
  background: linear-gradient(180deg, #102246 0%, #0a1830 100%) !important;
}
body.ss-theme-night .ss-tickets-pricing__tour-name,
body.ss-theme-night .ss-tickets-pricing__price {
  color: #ffd54a !important;
}
body.ss-theme-night .ss-trust {
  background: linear-gradient(180deg, #102246 0%, #0a1830 100%) !important;
}
body.ss-theme-night .ss-trust__rating { color: #ffd54a !important; }
body.ss-theme-night .ss-related-tours {
  background: linear-gradient(180deg, #0a1830 0%, #0e2244 100%) !important;
}
body.ss-theme-night .ss-related-tour {
  background: #102246 !important;
  color: #e5edf8 !important;
}
body.ss-theme-night .ss-related-tour__name { color: #4dbcef !important; }
body.ss-theme-night .ss-related-tour__desc { color: #c3d2e6 !important; }

/* ════════════════════════════════════════════════════════
   PRINT STYLES — clean black-on-white for tour itineraries
   ════════════════════════════════════════════════════════ */
@media print {
  body { background: #ffffff !important; color: #000000 !important; }
  body * { animation: none !important; transition: none !important; }
  /* Hide non-essential page chrome */
  .ss-header, .ss-footer, .ss-mobile-cta, .ss-search,
  .ss-promo, .ss-newsletter, .ss-related-tours,
  .ssi-top .vbw-schedule-footer, .vbw-schedule-filters,
  .ss-leaflet, .ss-casting-off__map-wrap, .ssi-waves,
  .ss-hero-wave, .ss-tours-hero__filter-row,
  iframe, video, .ss-skip-link,
  [class*="trustindex"] { display: none !important; }
  /* Reset hero backgrounds */
  .ss-tour-hero, .ss-tours-hero, .ss-wt-hero, .ss-simple-hero, .hero {
    background: none !important; min-height: 0 !important; color: #000 !important;
    padding: 0 0 1rem 0 !important;
  }
  .ss-tour-hero__title, .ss-tour-hero__badge,
  .ss-tours-hero__title, .ss-wt-hero__title, .ss-simple-hero__title,
  .hero__headline, .hero__sub {
    color: #000 !important;
    text-shadow: none !important;
    font-size: 1.5rem !important;
  }
  /* Make content full width */
  .container, .container-xl, .container-lg { max-width: 100% !important; }
  /* Hyperlinks: show URL after */
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; }
  /* Page breaks */
  h1, h2, h3 { page-break-after: avoid; }
  img { max-width: 100% !important; page-break-inside: avoid; }
}

/* ════════════════════════════════════════════════════════
   TRUST STRIP — for tour detail pages (reviews snapshot)
   ════════════════════════════════════════════════════════ */
.ss-trust {
  background: linear-gradient(180deg, #ffffff 0%, #eaf6fc 100%);
  padding: 2.5rem 1rem 3rem;
  text-align: center;
}
.ss-trust__inner { max-width: 1000px; margin: 0 auto; }
.ss-trust__stars {
  display: inline-flex;
  gap: 4px;
  margin: 0 auto 0.75rem;
  color: #ffba2e;
  font-size: 1.5rem;
}
.ss-trust__rating {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  font-size: 2.25rem;
  color: var(--ss-blue);
  letter-spacing: 1px;
  margin: 0;
}
.ss-trust__count {
  color: #4a5260;
  font-size: 1rem;
  margin-top: 0.25rem;
}

/* ════════════════════════════════════════════════════════
   SHARE BUTTONS (blog posts)
   ════════════════════════════════════════════════════════ */
.ss-share {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 2rem auto;
  max-width: 760px;
  padding: 0 1rem;
}
.ss-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eef3f8;
  color: var(--ss-blue);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.ss-share__btn:hover {
  background: var(--ss-red);
  color: #ffffff !important;
  transform: translateY(-3px);
}
.ss-share__label {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  color: var(--ss-blue);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  align-self: center;
  margin-right: 0.5rem;
}

/* ════════════════════════════════════════════════════════
   PROMO BANNER (dismissible) at top of page
   ════════════════════════════════════════════════════════ */
.ss-promo {
  background: var(--ss-red);
  color: #ffffff;
  padding: 0.6rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.95rem;
  text-align: center;
  position: relative;
  z-index: 1200;
}
.ss-promo__msg strong { font-family: 'Gigalyps','Impact',sans-serif !important; letter-spacing: 0.5px; }
.ss-promo__close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.15);
  border: none;
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  transition: background .2s ease;
}
.ss-promo__close:hover { background: rgba(255,255,255,0.35); }
@media (max-width: 600px) {
  .ss-promo { font-size: 0.8rem; padding: 0.5rem 2.5rem 0.5rem 0.75rem; }
}

/* ════════════════════════════════════════════════════════
   NEWSLETTER SIGNUP (top of footer)
   ════════════════════════════════════════════════════════ */
.ss-newsletter {
  max-width: 1100px;
  margin: 0 auto 2.5rem;
  padding: 2rem;
  background: #ffffff;
  border: 2px solid var(--ss-blue);
  border-radius: 1.25rem;
  position: relative;
  z-index: 2;
  box-shadow: 0 8px 24px rgba(40,169,224,0.18);
}
.ss-newsletter__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr);
  gap: 1.75rem;
  align-items: center;
}
@media (max-width: 767px) {
  .ss-newsletter__inner { grid-template-columns: 1fr; }
}
.ss-newsletter__title {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  font-size: 1.5rem;
  color: var(--ss-red);
  letter-spacing: 1px;
  margin: 0 0 0.3rem;
}
.ss-newsletter__sub {
  color: var(--ss-footer-blue);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}
.ss-newsletter__form {
  display: flex;
  gap: 0.5rem;
  position: relative;
}
.ss-newsletter__email {
  flex-grow: 1;
  padding: 0.85rem 1.1rem;
  border: 2px solid var(--ss-blue);
  border-radius: 999px;
  font-size: 1rem;
  background: #ffffff;
  color: var(--ss-footer-blue);
}
.ss-newsletter__email:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(40,169,224,0.25);
}
.ss-newsletter__submit {
  background: var(--ss-red);
  border: none;
  color: #ffffff;
  font-family: 'Gigalyps','Impact',sans-serif !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.ss-newsletter__submit:hover {
  background: var(--ss-red-dark);
  transform: translateY(-2px);
}
.ss-newsletter__msg {
  position: absolute;
  left: 0; right: 0; top: 110%;
  text-align: center;
  color: var(--ss-red);
  font-family: 'Gigalyps','Impact',sans-serif !important;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.ss-newsletter__form.is-sent .ss-newsletter__msg { opacity: 1; }
.ss-newsletter__form.is-sent .ss-newsletter__email,
.ss-newsletter__form.is-sent .ss-newsletter__submit { opacity: 0.5; pointer-events: none; }

/* ════════════════════════════════════════════════════════
   SITE SEARCH (overlay)
   ════════════════════════════════════════════════════════ */
.ss-search__trigger {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  color: var(--ss-blue);
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 1100;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transition: transform .25s ease, background .2s ease;
}
.ss-search__trigger:hover {
  background: var(--ss-blue);
  color: #ffffff;
  transform: scale(1.08);
}
.ss-search__overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(30,58,95,0.6);
  backdrop-filter: blur(6px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.ss-search__overlay.is-open { display: flex; }
.ss-search__box {
  position: relative;
  background: #ffffff;
  border-radius: 1rem;
  width: 92%;
  max-width: 560px;
  padding: 1.25rem 1.25rem 0.75rem;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.ss-search__input {
  width: 100%;
  font-size: 1.15rem;
  padding: 0.85rem 2.5rem 0.85rem 1.25rem;
  border: 2px solid #e3edf5;
  border-radius: 999px;
  outline: none;
  font-family: inherit;
}
.ss-search__input:focus {
  border-color: var(--ss-blue);
  box-shadow: 0 0 0 4px rgba(40,169,224,0.18);
}
.ss-search__close {
  position: absolute;
  top: 26px;
  right: 22px;
  border: none;
  background: transparent;
  color: var(--ss-blue);
  font-size: 1.25rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
}
.ss-search__results {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  max-height: 50vh;
  overflow-y: auto;
}
.ss-search__results li { border-top: 1px solid #eef3f8; }
.ss-search__results li:first-child { border-top: none; }
.ss-search__results a {
  display: block;
  padding: 0.85rem 1rem;
  color: #285eab;
  text-decoration: none;
  font-family: 'Gigalyps','Impact',sans-serif !important;
  letter-spacing: 0.5px;
  transition: background .15s ease, color .15s ease;
}
.ss-search__results a:hover {
  background: var(--ss-blue);
  color: #ffffff;
}
.ss-search__empty {
  padding: 1rem;
  color: #6b7280;
  text-align: center;
}

/* ════════════════════════════════════════════════════════
   REDUCED-MOTION PREFERENCE
   ════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Pause specifically-named looping animations */
  .ssi-waves,
  .ss-footer::before,
  .hero::after,
  .ss-hero-wave,
  .ssi-boat,
  .ssi-stars svg,
  .os-stat__icon--spin,
  .os-sky--boat,
  .ss-leaflet-boat img,
  .ss-leaflet-pin .ss-pin-pulse,
  .ss-rmap__route,
  [data-os-reveal],
  .os-fleet-since-anim {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════
   RELATED TOURS strip (injected by JS at the bottom of tour pages)
   ════════════════════════════════════════════════════════ */
.ss-related-tours {
  background: linear-gradient(180deg, #ffffff 0%, #eaf6fc 100%);
  padding: 4rem 1rem 5rem;
  text-align: center;
}
.ss-related-tours__inner { max-width: 1200px; margin: 0 auto; }
.ss-related-tours__title {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  color: var(--ss-blue) !important;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 2.5rem;
  letter-spacing: 1px;
}
.ss-related-tours__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 767px) {
  .ss-related-tours__grid { grid-template-columns: 1fr; }
}
/* ── "You May Also Like" — illustration art cards ──────────
   Each card has a soft, brand-tinted art panel up top showing a
   Shoreline illustration, and a clean white text block below. */
.ss-related-tour {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 18px;
  text-decoration: none;
  text-align: left;
  box-shadow:
    0 1px 0 rgba(15, 30, 60, 0.04),
    0 14px 28px rgba(15, 30, 60, 0.10);
  overflow: hidden;
  color: inherit;
  border-top: none !important;
  transition:
    transform .35s cubic-bezier(.34,1.56,.64,1),
    box-shadow .35s ease;
  position: relative;
}

/* Top photo panel — uses each tour's own hero image, cropped */
.ss-related-tour__art {
  display: block;
  position: relative;
  height: 220px;
  background-color: #eaf6fc;
  background-repeat: no-repeat;
  background-position: center 50%;
  background-size: cover;
  overflow: hidden;
  transition: transform .55s ease;
}
/* (no wave, no radial highlight, no tinted variants) */

/* Body block */
.ss-related-tour__body {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem 1.5rem;
  flex: 1;
}
.ss-related-tour__name {
  font-family: var(--ss-nexa) !important;
  font-weight: 700 !important;
  color: var(--ss-navy) !important;
  font-size: 1.25rem !important;
  letter-spacing: 0 !important;
  line-height: 1.2;
  margin-bottom: 0.4rem;
  text-transform: none !important;
}
.ss-related-tour__desc {
  font-family: var(--ss-nexa) !important;
  color: var(--ss-ink) !important;
  font-size: 0.95rem !important;
  line-height: 1.55;
  margin-bottom: 0.9rem;
  flex-grow: 1;
}
.ss-related-tour__cta {
  font-family: var(--ss-nexa) !important;
  font-weight: 700 !important;
  color: var(--ss-red) !important;
  font-size: 0.85rem !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.ss-related-tour__arrow {
  display: inline-block;
  transition: transform .25s ease;
}

/* Hover: card lifts; illustration scales + tilts; arrow slides */
.ss-related-tour,
.ss-related-tour:hover,
.ss-related-tour:focus,
.ss-related-tour:active,
.ss-related-tour:visited,
.ss-related-tour *,
.ss-related-tour:hover *,
.ss-related-tour:focus * {
  text-decoration: none !important;
}
.ss-related-tour:hover {
  transform: translateY(-6px);
  box-shadow:
    0 1px 0 rgba(15, 30, 60, 0.06),
    0 18px 32px rgba(15, 30, 60, 0.14);
}
.ss-related-tour:hover .ss-related-tour__art {
  transform: scale(1.04);
}
.ss-related-tour:hover .ss-related-tour__arrow {
  transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {
  .ss-related-tour,
  .ss-related-tour__art,
  .ss-related-tour__arrow { transition: none !important; }
}

/* ════════════════════════════════════════════════════════
   TOUR DETAIL PAGE — section polish
   ════════════════════════════════════════════════════════ */
.ss-tour-detail__highlights-title,
.ss-tickets-pricing__label,
.ss-tour-map__title {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  color: var(--ss-red) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
}
/* Tour highlights headline reads like a proper section title, not an eyebrow */
.ss-tour-detail__highlights-title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem) !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 1.25rem !important;
  line-height: 1.05 !important;
}
.ss-tickets-pricing__tour-name {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  color: var(--ss-blue) !important;
  letter-spacing: 0.5px;
}
.ss-tickets-pricing__starting-label {
  color: #4a5260;
  font-size: 1rem;
}
/* Tour highlights — full-width rows, no card, no bracket */
.ss-tour-highlights--grid {
  /* Force single column so each item spans the full content width */
  grid-template-columns: 1fr !important;
}
.ss-tour-highlights--grid > [class*="col"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}
.ss-tour-highlights--grid li,
.ss-tour-highlights--grid > div {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  padding: 0.65rem 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  transition: color .2s ease;
}
.ss-tour-highlights--grid li:hover,
.ss-tour-highlights--grid > div:hover {
  transform: none;
}

/* Item row — preserver + text flowing inline */
.ss-tour-highlights--grid__item {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  color: var(--ss-navy) !important;
  font-family: var(--ss-nexa) !important;
  font-weight: 500 !important;
  font-size: 1.05rem !important;
  line-height: 1.4 !important;
}
/* Replace default check icon with brand-styled one */
.ss-tour-highlights--grid li::before,
.ss-tour-highlights--grid > div > .check-icon,
.ss-tour-detail__highlights svg {
  filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(7480%) hue-rotate(354deg);
}

/* --- Life-preserver bullets on tour highlights --------------- */
.ss-tour-highlights--grid__check {
  display: inline-block !important;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  vertical-align: -8px;
  background-image: url("./SS_LifePreserver_Illustration.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: 0;
  transform: scale(0.2) rotate(-45deg);
  transition:
    opacity 0.85s ease,
    transform 1.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* When the highlights section is in-view, pop the preservers in.
   Stagger by item order so they cascade. */
.ss-tour-highlights--grid.is-visible .ss-tour-highlights--grid__check {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  animation: ss-preserver-bob 9s ease-in-out 0.9s infinite;
}
.ss-tour-highlights--grid.is-visible .ss-tour-highlights--grid__item:nth-child(1) .ss-tour-highlights--grid__check,
.ss-tour-highlights--grid.is-visible > [class*="col"]:nth-child(1) .ss-tour-highlights--grid__check { transition-delay: 0.10s; animation-delay: 1.6s; }
.ss-tour-highlights--grid.is-visible .ss-tour-highlights--grid__item:nth-child(2) .ss-tour-highlights--grid__check,
.ss-tour-highlights--grid.is-visible > [class*="col"]:nth-child(2) .ss-tour-highlights--grid__check { transition-delay: 0.30s; animation-delay: 1.9s; }
.ss-tour-highlights--grid.is-visible .ss-tour-highlights--grid__item:nth-child(3) .ss-tour-highlights--grid__check,
.ss-tour-highlights--grid.is-visible > [class*="col"]:nth-child(3) .ss-tour-highlights--grid__check { transition-delay: 0.50s; animation-delay: 2.2s; }
.ss-tour-highlights--grid.is-visible .ss-tour-highlights--grid__item:nth-child(4) .ss-tour-highlights--grid__check,
.ss-tour-highlights--grid.is-visible > [class*="col"]:nth-child(4) .ss-tour-highlights--grid__check { transition-delay: 0.70s; animation-delay: 2.5s; }
.ss-tour-highlights--grid.is-visible .ss-tour-highlights--grid__item:nth-child(5) .ss-tour-highlights--grid__check,
.ss-tour-highlights--grid.is-visible > [class*="col"]:nth-child(5) .ss-tour-highlights--grid__check { transition-delay: 0.90s; animation-delay: 2.8s; }
.ss-tour-highlights--grid.is-visible .ss-tour-highlights--grid__item:nth-child(6) .ss-tour-highlights--grid__check,
.ss-tour-highlights--grid.is-visible > [class*="col"]:nth-child(6) .ss-tour-highlights--grid__check { transition-delay: 1.10s; animation-delay: 3.1s; }
.ss-tour-highlights--grid.is-visible .ss-tour-highlights--grid__item:nth-child(7) .ss-tour-highlights--grid__check,
.ss-tour-highlights--grid.is-visible > [class*="col"]:nth-child(7) .ss-tour-highlights--grid__check { transition-delay: 1.30s; animation-delay: 3.4s; }
.ss-tour-highlights--grid.is-visible .ss-tour-highlights--grid__item:nth-child(8) .ss-tour-highlights--grid__check,
.ss-tour-highlights--grid.is-visible > [class*="col"]:nth-child(8) .ss-tour-highlights--grid__check { transition-delay: 1.50s; animation-delay: 3.7s; }

@keyframes ss-preserver-bob {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.04) rotate(-6deg); }
}

/* Reduced-motion users: skip the bob, just appear */
@media (prefers-reduced-motion: reduce) {
  .ss-tour-highlights--grid__check {
    transition: none !important;
    opacity: 1;
    transform: none;
  }
  .ss-tour-highlights--grid.is-visible .ss-tour-highlights--grid__check {
    animation: none !important;
  }
}

/* Casting off section — solid white, no gradient */
.ss-casting-off { background: #ffffff !important; }

/* Tour-page FAQ section — full-bleed light-blue background.
   Some pages wrap <main> in a constrained parent; this breaks out
   to the full viewport width regardless. */
section.ss-faq {
  background: #eaf4ff !important;
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.ss-casting-off__intro {
  max-width: 760px;
  margin: 0 auto 2rem !important;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #2c3540;
}

/* Tickets & pricing card — brand-blue section, white type */
.ss-tickets-pricing {
  background: #28a9e0 !important;
  border-radius: 1.5rem;
  margin: 2rem auto;
  max-width: 1100px;
  text-align: center;
  padding: 3rem 1.5rem !important;
  box-shadow: 0 18px 36px rgba(15, 30, 60, 0.10);
}

/* Hide the auto-injected "4.8 / 5 — Based on X reviews" trust strip on tour pages */
.ss-trust { display: none !important; }

/* Defensive: nothing inside the pricing card is ever black */
.ss-tickets-pricing,
.ss-tickets-pricing *,
.ss-tickets-pricing p,
.ss-tickets-pricing li,
.ss-tickets-pricing span,
.ss-tickets-pricing strong,
.ss-tickets-pricing h1,
.ss-tickets-pricing h2,
.ss-tickets-pricing h3,
.ss-tickets-pricing h4 {
  color: #ffffff !important;
}

/* Force readable colors on the blue ticket card */
.ss-tickets-pricing .ss-tickets-pricing__label {
  color: #ffffff !important;
  background: var(--ss-red);
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  letter-spacing: 2px !important;
  font-size: 0.85rem;
  margin-bottom: 1rem !important;
}
.ss-tickets-pricing .ss-tickets-pricing__tour-name {
  color: #ffffff !important;
  font-family: 'Gigalyps','Impact',sans-serif !important;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.ss-tickets-pricing .ss-tickets-pricing__starting-label {
  color: #ffffff !important;
  opacity: 0.92;
  font-size: 1.05rem;
  margin-top: 1rem;
}
.ss-tickets-pricing .ss-tickets-pricing__price {
  color: #ffffff !important;
  font-family: 'Gigalyps','Impact',sans-serif !important;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  line-height: 1;
}
.ss-tickets-pricing .ss-tickets-pricing__age-line {
  color: #ffffff !important;
  opacity: 0.95;
  font-family: var(--ss-nexa) !important;
  font-weight: 400 !important;
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
.ss-tickets-pricing .ss-tickets-pricing__age-line + .ss-tickets-pricing__age-line {
  margin-top: 0;
}

/* ════════════════════════════════════════════════════════
   BLOG LANDING — card grid
   ════════════════════════════════════════════════════════ */
.ss-blog-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 !important;
  justify-content: center;
}
.ss-blog-grid > .ss-blog-card-wrap {
  width: 100% !important;
  max-width: 100% !important;
  flex: unset !important;
  padding: 0 !important;
}
@media (max-width: 991px) {
  .ss-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ss-blog-grid { grid-template-columns: 1fr; max-width: 480px; }
}
/* Blog cards — original look: no border, soft shadow, brand-blue
   title that turns red on hover, red eyebrow meta. */
.ss-blog-card {
  background: #ffffff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}
.ss-blog-card,
.ss-blog-card:hover,
.ss-blog-card *,
.ss-blog-card:hover * { text-decoration: none !important; }
.ss-blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(40,169,224,0.20);
}
.ss-blog-card__img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #eaf6fc;
}
.ss-blog-card__img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .5s ease;
}
.ss-blog-card:hover .ss-blog-card__img img {
  transform: scale(1.06);
}
.ss-blog-card__body {
  padding: 1.25rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.ss-blog-card__meta {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  color: var(--ss-red) !important;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.ss-blog-card__title {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  color: var(--ss-blue) !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.5px;
  line-height: 1.2;
  margin-bottom: 0.8rem !important;
  transition: color .2s ease;
}
.ss-blog-card:hover .ss-blog-card__title { color: var(--ss-red) !important; }
.ss-blog-card__excerpt {
  color: #4a5260;
  font-size: 0.92rem;
  line-height: 1.55;
  flex-grow: 1;
}
.ss-blog-card a {
  color: inherit;
  text-decoration: none !important;
}

/* ════════════════════════════════════════════════════════
   CONTACT FORM (Gravity Forms)
   ════════════════════════════════════════════════════════ */
.gform_wrapper {
  max-width: 720px;
  margin: 2rem auto;
}
.gform_wrapper .gfield_label,
.gform_wrapper .gform_required_legend,
.gform_wrapper label {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  color: var(--ss-blue) !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase;
  margin-bottom: 0.4rem !important;
}
.gform_wrapper input[type="text"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select {
  width: 100%;
  padding: 0.85rem 1.1rem !important;
  border: 2px solid #e3edf5 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  font-size: 1rem;
  color: #285eab;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gform_wrapper textarea {
  border-radius: 1.25rem !important;
  min-height: 140px;
  resize: vertical;
}
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  border-color: var(--ss-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(40,169,224,0.18) !important;
}
.gform_wrapper input[type="submit"],
.gform_wrapper .gform_button {
  background: var(--ss-red) !important;
  border: none !important;
  color: #ffffff !important;
  font-family: 'Gigalyps','Impact',sans-serif !important;
  font-size: 1rem !important;
  letter-spacing: 1px;
  padding: 0.9rem 2.5rem !important;
  border-radius: 999px !important;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(232,34,41,0.35);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper .gform_button:hover {
  background: var(--ss-red-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(232,34,41,0.45);
}
.gform_wrapper .gform_footer {
  text-align: center;
  margin-top: 2rem !important;
}
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_asterisk {
  color: var(--ss-red) !important;
}
.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
  color: var(--ss-red) !important;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}
.gform_wrapper .gform_validation_errors {
  background: rgba(232,34,41,0.08);
  border-left: 4px solid var(--ss-red);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

/* ════════════════════════════════════════════════════════
   FAQ ACCORDION
   ════════════════════════════════════════════════════════ */
.ss-faq-pane {
  max-width: 880px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.ss-faq-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ss-faq-details__item {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 2px 12px rgba(40,169,224,0.10);
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.ss-faq-details__item:hover {
  box-shadow: 0 6px 22px rgba(40,169,224,0.18);
}
.ss-faq-details__item[open] {
  box-shadow: 0 8px 28px rgba(40,169,224,0.22);
}
.ss-faq-details__question {
  cursor: pointer;
  padding: 1.1rem 3rem 1.1rem 1.25rem;
  position: relative;
  font-family: 'Gigalyps','Impact',sans-serif !important;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  color: var(--ss-blue);
  list-style: none;
  user-select: none;
}
.ss-faq-details__question::-webkit-details-marker { display: none; }
.ss-faq-details__question::marker { display: none; content: ''; }
.ss-faq-details__question::after {
  content: '';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--ss-red);
  transition: transform .25s ease, background .25s ease;
}
.ss-faq-details__question::before {
  content: '';
  position: absolute;
  right: calc(1.25rem + 7px);
  top: 50%;
  width: 10px;
  height: 2px;
  margin-top: -1px;
  background: #ffffff;
  border-radius: 1px;
  z-index: 1;
  transition: transform .25s ease;
}
/* Vertical stroke for the "+" — painted on ::after, hidden when open */
.ss-faq-details__item:not([open]) .ss-faq-details__question::after {
  background-image: linear-gradient(#ffffff, #ffffff);
  background-size: 2px 10px;
  background-repeat: no-repeat;
  background-position: center;
}
.ss-faq-details__question:hover::after {
  background: var(--ss-red-dark);
  transform: scale(1.08);
}
.ss-faq-details__item[open] .ss-faq-details__question::after {
  background: var(--ss-blue);
  transform: rotate(180deg);
}
.ss-faq-details__answer {
  padding: 0 1.25rem 1.25rem;
  font-size: 1rem;
  line-height: 1.65;
  color: #2c3540;
  animation: ss-faq-open .35s ease-out;
}
@keyframes ss-faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Tour Supplement (architecture landmarks page) ─────────────
   /toursupplem/ — uses Stackable feature-grid for a wall of building cards.
   Force a clean 3-up grid (2 on tablet, 1 on phone), tame image heights,
   and unify card typography. */
body.page-id-2619 .wp-block-stackable-feature-grid .stk-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2.5rem 2rem !important;
  align-items: start;
}
@media (max-width: 991px) {
  body.page-id-2619 .wp-block-stackable-feature-grid .stk-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  body.page-id-2619 .wp-block-stackable-feature-grid .stk-row {
    grid-template-columns: 1fr !important;
  }
}
body.page-id-2619 .wp-block-stackable-feature-grid .wp-block-stackable-column {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(40,169,224,0.10);
  padding: 0 !important;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
body.page-id-2619 .wp-block-stackable-feature-grid .wp-block-stackable-column:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(40,169,224,0.20);
}
body.page-id-2619 .wp-block-stackable-feature-grid .stk-column-wrapper,
body.page-id-2619 .wp-block-stackable-feature-grid .stk-block-content {
  padding: 0 !important;
}
body.page-id-2619 .wp-block-stackable-feature-grid .stk-img-wrapper {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden;
}
body.page-id-2619 .wp-block-stackable-feature-grid .stk-img-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  border-radius: 0 !important;
}
body.page-id-2619 .wp-block-stackable-feature-grid .wp-block-stackable-heading,
body.page-id-2619 .wp-block-stackable-feature-grid .wp-block-stackable-text {
  padding: 0 1.25rem !important;
}
body.page-id-2619 .wp-block-stackable-feature-grid .wp-block-stackable-heading:first-of-type {
  padding-top: 1rem !important;
}
body.page-id-2619 .wp-block-stackable-feature-grid h6.stk-block-heading__text {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  color: var(--ss-blue) !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0 0 0.4rem !important;
}
body.page-id-2619 .wp-block-stackable-feature-grid .wp-block-stackable-heading + .wp-block-stackable-heading h6.stk-block-heading__text {
  color: var(--ss-red) !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 0.85rem !important;
}
body.page-id-2619 .wp-block-stackable-feature-grid p.stk-block-text__text {
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: #334155 !important;
  padding-bottom: 1.25rem;
  text-align: left !important;
}

/* Page title centered & in brand */
body.page-id-2619 .ss-simple-hero__title { letter-spacing: 1px; }

/* ── News page: scale down the giant article headlines ───────── */
.ss-simple-content .wp-block-stackable-heading h2,
.ss-simple-content .stk-block-heading__text,
.ss-simple-content h2 {
  font-size: 1.35rem !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  margin: 0 0 0.5rem !important;
}
.ss-simple-content .wp-block-stackable-heading h2 a,
.ss-simple-content .stk-block-heading__text a {
  font-weight: 700;
}
.ss-simple-content p { font-size: 0.95rem; }

/* ── Tighten gap between Highlights and Places to Eat on water-taxi pages,
   but keep plenty of breathing room below the restaurant cards before the wave ── */
.ss-wt-highlights.py-5 { padding-bottom: 1.5rem !important; }
.ss-wt-restaurants.py-5,
.ss-wt-restaurants {
  padding-top: 1.5rem !important;
  padding-bottom: 13rem !important;
}
/* Belt-and-suspenders — push the inner row away from the wave too */
.ss-wt-restaurants .row,
.ss-wt-restaurants > .container-xl {
  margin-bottom: 4rem !important;
}

/* ── Inline FAQ blocks on tour / water-taxi pages ─────────
   Pages use <button class="ss-faq__question"> + sibling <div class="ss-faq__answer">.
   We match the look of the dedicated FAQ page (.ss-faq-details__*).
   Accordion toggle is wired up by shoreline-redesign.js. */
.ss-faq {
  max-width: 880px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.ss-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ss-faq__item {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 2px 12px rgba(40,169,224,0.10);
  overflow: hidden;
  transition: box-shadow .25s ease;
}
.ss-faq__item:hover {
  box-shadow: 0 6px 22px rgba(40,169,224,0.18);
}
.ss-faq__item.is-open {
  box-shadow: 0 8px 28px rgba(40,169,224,0.22);
}
.ss-faq__question {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 1.1rem 3rem 1.1rem 1.25rem;
  position: relative;
  font-family: 'Gigalyps','Impact',sans-serif !important;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  color: var(--ss-blue);
  background: transparent;
  border: none;
  user-select: none;
}
.ss-faq__question::after {
  content: '';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--ss-red);
  transition: transform .25s ease, background .25s ease;
}
.ss-faq__question::before {
  content: '';
  position: absolute;
  right: calc(1.25rem + 7px);
  top: 50%;
  width: 10px;
  height: 2px;
  margin-top: -1px;
  background: #ffffff;
  border-radius: 1px;
  z-index: 1;
  box-shadow: 0 0 0 0 #ffffff;
}
/* Vertical stroke for the "+" — hidden when item is open */
.ss-faq__question {
  /* enable a second pseudo via background-image on ::after below */
}
.ss-faq__item:not(.is-open) .ss-faq__question::after {
  background-image: linear-gradient(#ffffff, #ffffff);
  background-size: 2px 10px;
  background-repeat: no-repeat;
  background-position: center;
}
.ss-faq__question:hover::after {
  background: var(--ss-red-dark);
  transform: scale(1.08);
}
.ss-faq__item.is-open .ss-faq__question::after {
  background: var(--ss-blue);
  transform: rotate(180deg);
}
.ss-faq__answer {
  display: none !important;
  padding: 0 1.25rem 1.25rem;
  font-size: 1rem;
  line-height: 1.65;
  color: #2c3540;
}
.ss-faq__item.is-open .ss-faq__answer {
  display: block !important;
  animation: ss-faq-open .35s ease-out;
}
.ss-faq__answer p:last-child { margin-bottom: 0; }

/* ── Groups & Events ────────────────────────────────────── */
.ss-groups {
  background: var(--ss-blue) !important;
  position: relative;
  z-index: 8;
  padding-bottom: 6rem !important;  /* extra room below cards before the wave divider */
}
.ss-groups .ss-section-title { color: #ffffff !important; }
.ss-groups .ss-section-sub { color: #fff !important; }
.ss-groups .ss-group-card { background: #fff; }
.ss-groups .ss-group-card .card-body .btn {
  display: inline-block !important;
  min-width: 260px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-family: 'Gigalyps','Impact',sans-serif !important;
  letter-spacing: 1px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  border-radius: 999px !important;
}

/* ============================================================
   HOME PAGE: "Today on the Water" + "Our Chicago" hero scene
   Only renders if the page includes the .ssi-top / .ssi-middle
   markup; on pages without it the rules below do nothing.
   ============================================================ */

.ssi-top {
  background: var(--ss-blue);
  padding: 36px 24px 60px;
  text-align: center;
  position: relative;
  overflow: visible;
}
.ssi-top h2.ss-section-title {
  color: #ffffff !important;
  font-family: 'Gigalyps','Impact',sans-serif !important;
  font-size: 44px !important;
  letter-spacing: 1px;
  margin-bottom: 6px !important;
}

/* Filter pills */
.ssi-top .vbw-schedule-filters {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  margin: 0 0 22px !important;
  flex-wrap: wrap !important;
}
.ssi-top .vbw-filter-pill {
  background: #ffffff !important;
  color: var(--ss-blue) !important;
  border: none !important;
  padding: 10px 26px !important;
  border-radius: 999px !important;
  font-family: 'Gigalyps','Impact',sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 1px;
  cursor: pointer;
}
.ssi-top .vbw-filter-pill.is-active {
  background: var(--ss-red) !important;
  color: #ffffff !important;
}

/* Date label */
.ssi-top .vbw-schedule-date-label {
  color: #285eab !important;
  font-weight: 700 !important;
  text-align: left !important;
  margin: 0 auto 12px !important;
  max-width: 900px !important;
  padding-left: 8px !important;
  font-size: 14px !important;
}

/* Schedule rows */
.ssi-top .vbw-schedule-list { max-width: 900px; margin: 0 auto; }
.ssi-top .vbw-sched-row {
  background: #ffffff !important;
  border-radius: 999px !important;
  padding: 16px 28px !important;
  margin: 0 0 10px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  overflow: hidden;
}
.ssi-top .vbw-sched-row .vbw-sched-left {
  display: flex; align-items: center; gap: 8px;
  color: #285eab; font-weight: 600;
}
.ssi-top .vbw-sched-badge {
  background: transparent !important;
  color: var(--ss-blue) !important;
  font-weight: 600 !important;
  padding: 0 !important;
}

/* Footer of schedule + CTA */
.ssi-top .vbw-schedule-footer { text-align: center; margin-top: 20px; }
.ssi-top .vbw-schedule-cta {
  background: var(--ss-red) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 14px 38px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-family: 'Gigalyps','Impact',sans-serif !important;
  letter-spacing: 1px;
  font-size: 14px;
  cursor: pointer;
}
.ssi-top .vbw-header { display: none !important; }

/* ── White "Our Chicago" middle section ──────────────────── */
.ssi-middle {
  position: relative;
  min-height: 540px;
  background: #ffffff;
  padding: 60px 0 140px 0;
  overflow: visible;
}

/* Illustrations: tower, ferris wheel, boat, bridge */
.ssi-sears {
  position: absolute;
  left: 4vw;
  bottom: -55px;
  width: 300px;
  max-width: none !important;
  height: auto !important;
  z-index: 3;
  pointer-events: none;
}
.ssi-ferris {
  position: absolute;
  left: calc(4vw + 240px);
  bottom: -60px;
  width: 440px;
  max-width: none !important;
  height: auto !important;
  z-index: 3;
  pointer-events: none;
}

/* Boat — scroll-driven horizontal travel, plus bobbing in waves */
.ssi-boat-wrap {
  position: absolute;
  left: 0;
  bottom: -30px;
  z-index: 8;
  pointer-events: none;
  transform: translateX(var(--boat-x, -600px));
  will-change: transform;
}
.ssi-boat {
  display: block;
  width: 600px;
  max-width: none !important;
  height: auto !important;
  animation: ssi-boat-bob 3.5s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes ssi-boat-bob {
  0%, 100% { transform: translateY(0)    rotate(-1.5deg); }
  50%      { transform: translateY(-5px) rotate(1.5deg); }
}

/* Bridge — far right */
.ssi-bridge-wrap {
  position: absolute;
  right: 2vw;
  bottom: -35px;
  width: 360px;
  overflow: hidden;
  z-index: 4;
  pointer-events: none;
}
.ssi-bridge-wrap img {
  width: 720px !important;
  max-width: none !important;
  height: auto !important;
  display: block;
  float: right;
}

/* Animated scalloped wave at the bottom */
.ssi-waves {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 85px;
  max-width: none !important;
  z-index: 9;
  pointer-events: none;
  display: block;
  background-image: url("./wave-pattern.png");
  background-repeat: repeat-x;
  background-size: 1500px 100%;
  background-position: 0 bottom;
  animation: ssi-wave-flow 25s linear infinite;
}

/* "Our Chicago" text block — right-side */
.ssi-stars-block {
  position: absolute;
  right: 18vw;
  top: 40px;
  text-align: center;
  width: 380px;
  z-index: 7;
}
.ssi-stars-block h2 {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  color: var(--ss-blue);
  font-size: 52px;
  margin: 0 0 12px;
  letter-spacing: 1px;
  white-space: nowrap;
}
.ssi-stars {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 14px;
}
.ssi-stars svg {
  width: 72px;
  height: 72px;
  display: block;
  overflow: visible;
}
.ssi-stars svg polygon {
  fill: var(--ss-red);
  stroke: #111111;
  stroke-width: 4;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.ssi-stars-block h3 {
  font-family: 'Gigalyps','Impact',sans-serif !important;
  color: var(--ss-blue);
  font-size: 26px;
  margin: 14px 0 10px;
  letter-spacing: 1px;
}
.ssi-stars-block .ssi-copy {
  color: #4a5260;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 22px;
}
.ssi-stars-block .ssi-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
}
.ssi-stars-block .ssi-btns a {
  display: inline-block;
  padding: 14px 30px;
  background: var(--ss-red);
  border: 2px solid var(--ss-red);
  color: #ffffff !important;
  border-radius: 999px;
  font-family: 'Gigalyps','Impact',sans-serif !important;
  font-size: 13px;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}
.ssi-stars-block .ssi-btns a:hover {
  background: var(--ss-red-dark);
  border-color: var(--ss-red-dark);
}

/* ── Site-wide: red text on blue background → white ───────────
   Any element with a Shoreline-blue background forces red descendants
   (text, headings, links) to render white for legibility. */
.bg-primary,
.has-vivid-cyan-blue-background-color,
.has-pale-cyan-blue-background-color,
[style*="background-color:#28a9e0"],
[style*="background-color: #28a9e0"],
[style*="background:#28a9e0"],
[style*="background: #28a9e0"],
[style*="background-color:#28A9E0"],
[style*="background:#28A9E0"] {
  /* container marker — no rule needed here */
}
.bg-primary *,
.bg-primary,
.has-vivid-cyan-blue-background-color *,
.has-vivid-cyan-blue-background-color,
.has-pale-cyan-blue-background-color *,
.has-pale-cyan-blue-background-color,
[style*="background-color:#28a9e0"] *,
[style*="background-color: #28a9e0"] *,
[style*="background:#28a9e0"] *,
[style*="background: #28a9e0"] *,
[style*="background-color:#28A9E0"] *,
[style*="background:#28A9E0"] * {
  /* scope only — actual color override below for red text */
}
.bg-primary .has-vivid-red-color,
.bg-primary .has-luminous-vivid-orange-color,
.bg-primary .has-orange-color,
.bg-primary .has-red-color,
.bg-primary [style*="color:#e82229"],
.bg-primary [style*="color: #e82229"],
.bg-primary [style*="color:#E82229"],
.bg-primary [style*="color: #E82229"],
.has-vivid-cyan-blue-background-color .has-vivid-red-color,
.has-vivid-cyan-blue-background-color .has-luminous-vivid-orange-color,
.has-vivid-cyan-blue-background-color .has-orange-color,
.has-vivid-cyan-blue-background-color .has-red-color,
.has-vivid-cyan-blue-background-color [style*="color:#e82229"],
.has-vivid-cyan-blue-background-color [style*="color: #e82229"],
.has-vivid-cyan-blue-background-color [style*="color:#E82229"],
.has-pale-cyan-blue-background-color .has-vivid-red-color,
.has-pale-cyan-blue-background-color .has-luminous-vivid-orange-color,
.has-pale-cyan-blue-background-color .has-orange-color,
.has-pale-cyan-blue-background-color .has-red-color,
.has-pale-cyan-blue-background-color [style*="color:#e82229"],
[style*="background-color:#28a9e0"] .has-vivid-red-color,
[style*="background-color:#28a9e0"] .has-luminous-vivid-orange-color,
[style*="background-color:#28a9e0"] [style*="color:#e82229"],
[style*="background-color: #28a9e0"] .has-vivid-red-color,
[style*="background-color: #28a9e0"] [style*="color:#e82229"],
[style*="background:#28a9e0"] .has-vivid-red-color,
[style*="background:#28a9e0"] .has-luminous-vivid-orange-color,
[style*="background:#28a9e0"] [style*="color:#e82229"],
[style*="background: #28a9e0"] .has-vivid-red-color,
[style*="background: #28a9e0"] [style*="color:#e82229"],
[style*="background-color:#28A9E0"] .has-vivid-red-color,
[style*="background-color:#28A9E0"] [style*="color:#E82229"],
[style*="background:#28A9E0"] .has-vivid-red-color,
[style*="background:#28A9E0"] [style*="color:#E82229"] {
  color: #ffffff !important;
}

/* ============================================================
   GLOBAL BODY COPY — Nexa (via Adobe Typekit)
   Loaded by @import at the top of this file:
     https://use.typekit.net/njd0pje.css
   Typekit serves the family as "nexa".
   ============================================================ */

/* Sitewide body-copy font stack */
body,
p,
li,
dd,
dt,
blockquote,
figcaption,
small,
label,
input,
select,
textarea,
button,
table,
td,
th,
.ss-tour-card__desc,
.ss-group-card__desc,
.ss-news-card__excerpt,
.ss-news-card__meta time,
.ss-news-intro__lede,
.entry-content,
.entry-content p,
.entry-content li,
.stk-block-text,
.wp-block-paragraph,
.ss-footer,
.ss-footer p,
.ss-footer li,
.ss-footer a {
  font-family: "nexa", "Nexa Book", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 400;
}

/* Headings, brand display text, and pills keep Gigalyps —
   any rule above with !important Gigalyps already wins. */

/* Force Nexa onto Bootstrap + Ventrata booking widget which use their
   own CSS custom properties. Redefining the vars at :root cascades
   to every consumer of var(--bs-body-font-family) / var(--vbw-font). */
:root {
  --bs-body-font-family: "nexa", "Nexa Book", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  --vbw-font: "nexa", "Nexa Book", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Belt-and-suspenders override on widget root selectors */
.vbw,
.vbw *,
.vbw-widget,
.vbw-widget * {
  font-family: "nexa", "Nexa Book", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* ============================================================
   TYPE SYSTEM — Gigalyps for the BIG moments only.
   Everything secondary uses Nexa at the right weight.
   Adobe Typekit ships nexa at weights 300 / 400 / 700 / 800.
     - 300 = Light
     - 400 = Book (regular)
     - 700 = Bold
     - 800 = Heavy / Black
   ============================================================ */

/* Reusable Nexa stacks */
:root {
  --ss-nexa: "nexa", "Nexa Book", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ss-body: #111111 !important; /* was light slate gray (#334155) — switch body copy to near-black */
}

/* Body copy hard black-ish — but NOT inside the footer */
body,
p,
li,
.ss-tour-card__desc,
.ss-group-card__desc,
.ss-blog-card__excerpt,
.ss-section-sub,
.entry-content,
.entry-content p,
.entry-content li {
  color: #111111 !important;
}
.ss-footer,
.ss-footer p,
.ss-footer li,
.ss-footer a,
.ss-footer span,
.ss-footer strong,
.ss-footer .ss-footer__col-heading,
.ss-footer .ss-footer__col-heading a {
  color: #ffffff !important;
}
.ss-footer a:hover,
.ss-footer .ss-footer__col-heading a:hover,
.ss-footer .ss-footer__nav-list a:hover {
  color: var(--ss-red) !important;
}

/* --- Card titles (tour, group, news, blog) --- Nexa Bold ---- */
.ss-tour-card__title,
.ss-group-card__title,
.ss-news-card__title,
.ss-blog-card__title,
.ss-news-card--feature .ss-news-card__title {
  font-family: var(--ss-nexa) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.22 !important;
}
.ss-news-card--feature .ss-news-card__title {
  letter-spacing: -0.2px !important;
  line-height: 1.15 !important;
}

/* --- Navigation --- Nexa Bold, tighter tracking --- */
.ss-header .navbar-nav .nav-link {
  font-family: var(--ss-nexa) !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
}
.ss-header .navbar-nav .dropdown-menu .dropdown-item {
  font-family: var(--ss-nexa) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* --- Buttons / CTAs --- Nexa Bold uppercase --- */
.btn,
.ss-btn-primary,
.ss-btn-outline,
.ss-news-card__cta,
.ss-tour-card .btn,
.ss-group-card .btn,
.hero .btn,
button.btn,
a.btn {
  font-family: var(--ss-nexa) !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* The small inline arrow CTAs (e.g. "Read article ↗") don't want caps */
.ss-news-card__cta {
  letter-spacing: 1.5px !important;
}

/* --- Filter / schedule pills --- Nexa Bold uppercase ---
   (.ss-news-pill is intentionally excluded — news page styles them
    to match the .ss-tab pills exactly: sentence case, 14px) */
.ssi-top .vbw-filter-pill,
.vbw-filter-pill {
  font-family: var(--ss-nexa) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* --- Eyebrows, meta labels, small caps --- Nexa Bold caps --- */
.ss-news-intro__eyebrow,
.ss-news-card__source,
.vbw-label,
.ss-section-eyebrow,
.ss-card-eyebrow {
  font-family: var(--ss-nexa) !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}
.ss-news-card__meta {
  font-family: var(--ss-nexa) !important;
  font-weight: 700 !important;
  letter-spacing: 1.25px !important;
}

/* --- Footer column headings --- Nexa Bold caps --- */
.ss-footer .ss-footer__col-heading,
.ss-footer .ss-footer__col-heading a {
  font-family: var(--ss-nexa) !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
.ss-footer a,
.ss-footer li {
  font-family: var(--ss-nexa) !important;
  font-weight: 400 !important;
}

/* --- Form labels / inputs --- Nexa --- */
label,
input,
select,
textarea {
  font-family: var(--ss-nexa) !important;
}
label {
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

/* --- "How It Works" step headers --- Nexa Heavy --- */
.ss-how__title {
  font-family: var(--ss-nexa) !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}

/* --- Section sub-titles / dek copy --- Nexa Book at larger size --- */
.ss-section-sub,
.ss-news-intro__lede {
  font-family: var(--ss-nexa) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

/* --- News intro headline: cleaner Nexa Heavy reads better than Gigalyps here --- */
.ss-news-intro__title {
  font-family: var(--ss-nexa) !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.1 !important;
}

/* Keep Gigalyps where it counts: hero titles, section H1/H2,
   any element explicitly using .ss-section-title or ss-*-hero__title.
   Those rules earlier in this file already set Gigalyps !important and
   are NOT overridden above. */

/* ============================================================
   FINAL DESIGN SYSTEM PASS — sitewide enforcement.
   Loaded last so it wins the cascade. Defines the canonical
   type + color rules for every common element.
   ============================================================ */

/* Brand color tokens */
:root {
  --ss-ink: #111111;          /* body copy on light */
  --ss-ink-muted: #475569;    /* meta on light (used sparingly) */
  --ss-navy: #285eab;         /* deeper royal blue (matches footer bg) for headings on light */
  --ss-blue: #28a9e0;         /* primary brand blue */
  --ss-red: #e82229;          /* primary brand red */
}

/* --- H3 / H4 / H5 / H6 default → Nexa Bold (NOT Gigalyps) ----
   The big earlier `h1..h6 { Gigalyps !important }` rule applied
   the display font everywhere; here we narrow Gigalyps to H1/H2
   and `.ss-section-title` only. */
h3, h4, h5, h6,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
article h3, article h4, article h5, article h6 {
  font-family: var(--ss-nexa) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ss-navy) !important;
  line-height: 1.25 !important;
}
h3 { font-size: 1.5rem !important; }
h4 { font-size: 1.25rem !important; }
h5 { font-size: 1.05rem !important; }
h6 { font-size: 0.95rem !important; }

/* H1 / H2 — Gigalyps stays, but tightened sizing + navy on light */
h1, h2,
.ss-section-title {
  font-family: 'Gigalyps', 'Impact', sans-serif !important;
  color: var(--ss-navy);
  letter-spacing: 0.5px;
  line-height: 1.1;
}
/* On blue/red backgrounds we already force white earlier — those
   rules use !important and continue to win. */

/* --- Body copy --- */
body,
p,
li,
dd,
.entry-content p,
.entry-content li,
.ss-group-card__desc,
.ss-tour-card__desc,
.ss-blog-card__excerpt,
.ss-section-sub {
  font-family: var(--ss-nexa) !important;
  font-weight: 400 !important;
  color: var(--ss-ink) !important;
  line-height: 1.6;
}

/* Bold/strong in body copy keeps near-black, just heavier weight */
p strong, li strong, .entry-content strong {
  color: var(--ss-ink) !important;
  font-weight: 700 !important;
}

/* --- Links in body copy --- blue, underline on hover --- */
.entry-content a,
.ss-simple-content a,
.ss-blog-card a,
main p a,
main li a {
  color: var(--ss-blue) !important;
  text-decoration: none;
  font-weight: 700;
}
.entry-content a:hover,
.ss-simple-content a:hover,
main p a:hover,
main li a:hover {
  color: var(--ss-red) !important;
  text-decoration: underline;
}

/* --- Buttons keep the earlier Nexa 700 caps treatment ---
   Color rules: primary = red bg / white text; outline = white border / white text on dark; */

/* --- Footer protected: links/text WHITE, brand-red on hover --- */
.ss-footer,
.ss-footer p,
.ss-footer li,
.ss-footer a,
.ss-footer span,
.ss-footer strong {
  color: #ffffff !important;
}
.ss-footer a:hover {
  color: var(--ss-red) !important;
}

/* --- Anything that lives on a blue or red background reads white,
   regardless of inline color. Catches inline-style overrides.
   NOTE: .ssi-middle has a WHITE background — its text stays dark. */
.ssi-top,
.ssi-top p,
.ssi-top li,
.ss-groups .ss-section-sub,
.hero,
.hero__sub,
.hero p,
.hero h1,
.hero h2 {
  color: #ffffff !important;
}

/* Our Chicago section sits on white — keep its text dark/navy */
.ssi-middle,
.ssi-middle p,
.ssi-middle .ssi-stars-block,
.ssi-middle .ssi-stars-block p,
.ssi-middle .ssi-copy {
  color: var(--ss-ink) !important;
}
.ssi-middle .ssi-stars-block h2,
.ssi-middle .ssi-stars-block h3 {
  color: var(--ss-blue) !important;
}

/* --- Hero subtitle / hero kicker readability --- */
.hero__sub,
.hero__trust,
.ssi-subtitle {
  font-family: var(--ss-nexa) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* --- Form helpers --- */
::placeholder { color: #8a8a8a !important; opacity: 1; }
input, select, textarea {
  color: var(--ss-ink) !important;
}

/* --- Small print / fine print --- slightly muted but never gray-on-gray --- */
small, .small, .fine-print, .ss-fine-print {
  color: var(--ss-ink) !important;
  opacity: 0.85;
}

/* --- Card meta dates on news/blog cards: navy, not gray --- */
.ss-news-card__meta time,
.ss-blog-card__meta,
.ss-blog-card__date {
  color: var(--ss-navy) !important;
  opacity: 0.9;
}

/* --- Eyebrows / brand-color accents on light: red --- */
.ss-news-intro__eyebrow,
.ss-section-eyebrow,
.ss-card-eyebrow {
  color: var(--ss-red) !important;
}

/* --- News card source label on light: brand blue --- */
.ss-news-card__source {
  color: var(--ss-blue) !important;
}

/* ============================================================
   TYPE SCALE — uniform sizes across the site.
   Loaded last so it wins. One canonical size per role.
     - body / paragraph / list / card excerpt:   1rem    (16px)
     - small label / meta / date:                0.85rem (~13.6px)
     - eyebrow / tag:                            0.78rem (~12.5px)
     - sub-headline / lede / button text:        1.1rem  (~17.6px)
     - card title (H3 role):                    1.25rem (20px)
     - sub-section H4:                           1.1rem  (~17.6px)
     - feature/hero secondary title:             1.6rem  (~25.6px)
   ============================================================ */

/* Body copy */
body,
p,
li,
dd,
.entry-content,
.entry-content p,
.entry-content li,
.ss-tour-card__desc,
.ss-group-card__desc,
.ss-blog-card__excerpt,
.ss-news-card__excerpt,
.ss-section-sub,
.ss-faq-details__answer,
.ss-faq-details__answer p,
.ss-faq__answer,
.ss-faq__answer p,
.ss-tour-highlights--grid__item,
.ss-casting-off__intro,
.ss-tickets-pricing__age-line,
.ss-tickets-pricing__starting-label {
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

/* Sub-headline / lede / sub-section / large body */
.ss-news-intro__lede,
.hero__sub,
.ss-tour-hero__sub,
.ss-tours-hero__sub,
.ss-wt-hero__sub,
.ss-simple-hero__sub,
.ssi-subtitle,
.ss-faq-details__question,
.ss-faq__question,
h4 {
  font-size: 1.1rem !important;
  line-height: 1.45 !important;
}

/* Card titles (H3 role) — uniform across tour / group / blog / news */
.ss-tour-card__title,
.ss-group-card__title,
.ss-blog-card__title,
.ss-news-card__title,
h3 {
  font-size: 1.25rem !important;
  line-height: 1.25 !important;
}

/* Featured news card title gets one tier larger */
.ss-news-card--feature .ss-news-card__title {
  font-size: 1.6rem !important;
  line-height: 1.2 !important;
}

/* Small labels / meta / dates */
.ss-news-card__meta,
.ss-news-card__meta time,
.ss-news-card__source,
.ss-blog-card__meta,
.ss-blog-card__date,
small,
.small {
  font-size: 0.85rem !important;
}

/* Eyebrows / tags — even smaller, tracked out.
   NOTE: .ss-tour-detail__highlights-title is intentionally NOT in this
   list — it's a section headline, sized separately above. */
.ss-news-intro__eyebrow,
.ss-section-eyebrow,
.ss-card-eyebrow,
.ss-tickets-pricing__label,
.ss-tour-map__title,
.vbw-label {
  font-size: 0.78rem !important;
}

/* Tour highlights headline — proper section title size, wins last */
.ss-tour-detail__highlights-title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem) !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 1.25rem !important;
  line-height: 1.05 !important;
}

/* Buttons / pills — uniform */
.btn,
.ss-btn-primary,
.ss-btn-outline,
.ss-tour-card .btn,
.ss-group-card .btn,
.hero .btn,
button.btn,
a.btn,
.vbw-find-btn,
.ssi-top .vbw-filter-pill,
.vbw-filter-pill,
.ss-news-card__cta {
  font-size: 0.95rem !important;
}

/* Footer link sizes — uniform */
.ss-footer .ss-footer__nav-list a,
.ss-footer p,
.ss-footer li {
  font-size: 0.95rem !important;
}
.ss-footer .ss-footer__col-heading,
.ss-footer .ss-footer__col-heading a {
  font-size: 1.25rem !important;
  letter-spacing: 1px !important;
  margin-bottom: 1rem !important;
}

/* ============================================================
   GIGALYPS = ALL CAPS sitewide.
   Every element using the display font renders uppercase.
   ============================================================ */
h1, h2,
.ss-section-title,
.hero__headline,
.hero__eyebrow,
.ss-tour-hero__title,
.ss-tours-hero__title,
.ss-wt-hero__title,
.ss-simple-hero__title,
.ss-tour-hero h1, .ss-tour-hero h2,
.ss-tours-hero h1, .ss-tours-hero h2,
.ss-wt-hero h1, .ss-wt-hero h2,
.ss-simple-hero h1, .ss-simple-hero h2,
.ssi-stars-block h2,
.ssi-stars-block h3,
.ss-tickets-pricing__tour-name,
.ss-related-tours__title,
.ss-promo__msg,
.ss-promo__msg strong,
.ss-section-eyebrow,
.os-stat__num,
.stk-block.timelineitem .stk-block-text:first-child p strong {
  text-transform: uppercase !important;
}

/* Section sub-title (the line under a section title) */
.ss-section-sub {
  font-size: 1.1rem !important;
  line-height: 1.55 !important;
}

/* Pricing display: keep huge price, normalize supporting copy */
.ss-tickets-pricing__price {
  font-size: clamp(3rem, 8vw, 5.5rem) !important;
  line-height: 1 !important;
}
.ss-tickets-pricing__tour-name {
  font-size: clamp(1.5rem, 3.4vw, 2.4rem) !important;
  line-height: 1.1 !important;
}


/* ============================================================
   READABILITY OVERRIDES — move sentence-length / micro UI
   off Gigalyps onto Nexa at the right weight. Gigalyps now
   serves ONLY hero/section H1+H2 + the brand logotype.
   ============================================================ */

/* FAQ questions — Nexa Bold, navy, scannable.
   Covers BOTH FAQ markup variants:
     - dedicated /faqs/ page uses .ss-faq-details__question
     - tour/water-taxi/blog pages use .ss-faq__question */
.ss-faq-details__question,
.ss-faq__question {
  font-family: var(--ss-nexa) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  font-size: 1.15rem !important;
  line-height: 1.35 !important;
  color: var(--ss-navy) !important;
  text-transform: none !important;
}
.ss-faq-details__answer,
.ss-faq-details__answer p,
.ss-faq-details__answer li,
.ss-faq__answer,
.ss-faq__answer p,
.ss-faq__answer li {
  font-family: var(--ss-nexa) !important;
  font-weight: 400 !important;
  color: var(--ss-ink) !important;
  line-height: 1.6 !important;
}

/* FAQ tab buttons (Tickets / Tours / etc.) */
.ss-faq-tabs button,
.ss-faq-tab,
.ss-faq-tabs__btn {
  font-family: var(--ss-nexa) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* Hero subtitle / hero descriptive text — Nexa Book at readable size */
.hero__sub,
.hero__trust,
.ssi-subtitle,
.ss-tour-hero__sub,
.ss-tours-hero__sub,
.ss-wt-hero__sub,
.ss-simple-hero__sub {
  font-family: var(--ss-nexa) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.4 !important;
}

/* Promo bar messaging — keep it loud but switch to Nexa Heavy
   (Gigalyps in a slim bar at marquee size is fine; in body weight
    its strokes muddle). */
.ss-promo__msg,
.ss-promo__msg strong,
.ss-promo__cta {
  font-family: var(--ss-nexa) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* Blog post entry titles (single post) — Gigalyps is fine when
   centered & solo; but blog card titles should be Nexa Bold
   (already set above). Reinforce here in case theme css wins. */
.ss-blog-card__title {
  font-family: var(--ss-nexa) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Tour card price — Nexa Heavy reads cleaner than Gigalyps at small size */
.ss-tour-card__price {
  font-family: var(--ss-nexa) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

/* "Find your time" widget heading / labels */
.vbw-heading,
.vbw-find-btn,
.vbw-label {
  font-family: var(--ss-nexa) !important;
}
.vbw-heading {
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}
.vbw-find-btn {
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* "How it works" body / step descriptions if any */
.ss-how__step p,
.ss-how__step-desc {
  font-family: var(--ss-nexa) !important;
  font-weight: 400 !important;
  color: var(--ss-ink) !important;
  line-height: 1.6 !important;
}

/* Generic "long form heading" guardrail:
   any H3/H4 with class containing "title" or "heading" inside
   article/entry-content stays Nexa Bold, NOT Gigalyps. */
.entry-content [class*="title"],
.entry-content [class*="heading"],
article [class*="title"],
article [class*="heading"] {
  font-family: var(--ss-nexa) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
/* but keep the page-level ss-section-title in Gigalyps */
.ss-section-title,
.ss-simple-hero__title,
.ss-tour-hero__title,
.ss-tours-hero__title,
.ss-wt-hero__title {
  font-family: 'Gigalyps', 'Impact', sans-serif !important;
}