/* =============================================================================
   Starhorse Shipping Line, Inc. — site styles
   -----------------------------------------------------------------------------
   Loaded after css/styles.css (the compiled Bootstrap 5.2.3 / Creative theme
   bundle, which should be treated as vendor code and not edited by hand).
   Everything specific to this site lives here.

   Contents
     1.  CSS variables
     2.  Base
     3.  Global utilities / shared components
     4.  Header / navigation
     5.  Hero (masthead)
     6.  About
     7.  Vessels carousel
     8.  Routes (banner, port logo marquee)
     9.  Rates (fare finder)
     10. FAQs
     11. Career
     12. Contact
     13. Footer
     14. Animations (keyframes, scroll reveal, reduced motion)
     15. AI assistant (floating chat widget)
   ============================================================================= */

/* =============================================================================
   1. CSS VARIABLES
   ============================================================================= */
/* Self-hosted display face for the hero headline (public/fonts/) */
@font-face {
  font-family: "Baksoda";
  src: url("/fonts/Baksoda_Demo.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Maritime palette */
  --sh-navy-deep: #0a2540;
  --sh-navy: #123a5c;
  --sh-teal: #1c6e8c;
  --sh-foam: #eaf4f7;
  --sh-gold: #c9a24b;

  /* Brand reds (--bs-primary is the brand red: #c82020) */
  --sh-red: var(--bs-primary);
  --sh-red-hover: var(--bs-link-hover-color);
  --sh-red-deep: #8f1717;
  --sh-burgundy: #5c1420;

  /* Typography */
  --sh-font-heading: "Merriweather Sans", sans-serif;
  --sh-font-display: "Baksoda", var(--sh-font-heading);

  /* Radii */
  --sh-radius-card: 1rem;

  /* Elevation */
  --sh-shadow-card: 0 1rem 2rem -1.25rem rgba(10, 37, 64, 0.28);
  --sh-shadow-card-hover: 0 1.5rem 2.75rem -1.5rem rgba(10, 37, 64, 0.38);

  /* Focus ring */
  --sh-focus-ring: 2px solid var(--bs-primary);
}

/* =============================================================================
   2. BASE
   ============================================================================= */
html {
  height: 100%;
  scroll-padding-top: calc(4.5rem - 1px);
}

body {
  width: 100%;
  height: 100%;
}

.page-section {
  padding: 8rem 0;
}

hr.divider {
  height: 0.2rem;
  max-width: 3.25rem;
  margin: 1.5rem auto;
  background-color: var(--bs-primary);
  opacity: 1;
}

/* Anchor offset must clear the fixed navbar, whose height depends on the
   logo size per breakpoint (see section 4). */
@media (min-width: 576px) and (max-width: 1199.98px) {
  html {
    scroll-padding-top: 7.25rem;
  }
}

/* Desktop: the compact (scrolled) bar — 64px logo plus padding */
@media (min-width: 1200px) {
  html {
    scroll-padding-top: 6rem;
  }
}

/* Phones: tighter vertical rhythm. Desktop's 8rem section padding alone
   cost ~2 screen-heights of blank scrolling on a phone. */
@media (max-width: 767.98px) {
  .page-section {
    padding: 3.5rem 0;
  }

  hr.divider {
    margin: 1rem auto 1.25rem;
  }
}

/* Native <input> placeholders previously inherited this tone from a CDN
   reset; set explicitly so it no longer depends on that stylesheet. */
input::placeholder,
textarea::placeholder {
  color: #9ca3af;
}

/* =============================================================================
   3. GLOBAL UTILITIES / SHARED COMPONENTS
   ============================================================================= */
.btn-xl {
  padding: 1.25rem 2.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  border-radius: 10rem;
}

/* Skip link — hidden until focused (uses Bootstrap's
   .visually-hidden-focusable for the hide/show behaviour). */
.skip-link:focus {
  position: fixed !important;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1080;
  padding: 0.6rem 1.1rem;
  background: #fff;
  color: var(--bs-primary);
  font-family: var(--sh-font-heading);
  font-weight: 700;
  border-radius: var(--bs-border-radius);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

/* Shared "empty state" panel (Career + Contact) */
.sh-empty-state {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: linear-gradient(135deg, var(--sh-foam) 0%, #fff 100%);
  border: 1px dashed var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  color: var(--bs-gray-600);
}

.sh-empty-state i {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 2.25rem;
  color: var(--sh-teal);
  opacity: 0.6;
}

/* Swipeable card row (phones only). Applied to a Bootstrap .row: below
   768px the cards sit side by side with the next one peeking in, instead of
   stacking into several screens of scrolling. Bleeds to the screen edges
   (container padding is 1.5rem) while the first card stays aligned with the
   content. Dots (plus prev/next arrows from 768px up) are appended by
   js/scripts.js (initSnapRows), which hides them while the row fits.
   .sh-snap-row--always keeps the row a single scrolling line on every
   screen size; the Bootstrap column classes still set how many cards fit. */
.sh-snap-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.sh-snap-nav[hidden] {
  display: none;
}

.sh-snap-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  font-size: 1rem;
  color: var(--bs-primary);
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 50%;
  box-shadow: 0 0.4rem 0.9rem -0.5rem rgba(10, 37, 64, 0.35);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}

.sh-snap-arrow:hover:not(:disabled) {
  color: #fff;
  background: var(--bs-primary);
  border-color: var(--bs-primary);
}

.sh-snap-arrow:focus-visible {
  outline: var(--sh-focus-ring);
  outline-offset: 2px;
}

.sh-snap-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.sh-snap-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}

.sh-snap-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  background: var(--bs-gray-300);
  border: 0;
  border-radius: 999px;
  transition:
    width 0.25s ease,
    background 0.25s ease;
}

.sh-snap-dot.is-active {
  width: 20px;
  background: var(--bs-primary);
}

@media (min-width: 768px) {
  .sh-snap-row--always {
    flex-wrap: nowrap;
    justify-content: flex-start !important; /* beats .justify-content-center */
    padding-top: 0.5rem;
    padding-bottom: 1.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .sh-snap-row--always::-webkit-scrollbar {
    display: none;
  }

  .sh-snap-row--always > * {
    scroll-snap-align: start;
  }

  /* Centres a row that fits; the auto margins collapse to 0 once it
     overflows, so the first card never gets cut off. */
  .sh-snap-row--always > :first-child {
    margin-left: auto;
  }

  .sh-snap-row--always > :last-child {
    margin-right: auto;
  }
}

@media (max-width: 767.98px) {
  .sh-snap-arrow {
    display: none;
  }

  .sh-snap-row {
    flex-wrap: nowrap;
    justify-content: flex-start !important; /* beats .justify-content-center */
    margin-right: -1.5rem;
    margin-left: -1.5rem;
    padding: 0.5rem 0.75rem 1.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.75rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .sh-snap-row::-webkit-scrollbar {
    display: none;
  }

  .sh-snap-row > * {
    flex: 0 0 84%;
    width: 84%;
    max-width: 22rem;
    scroll-snap-align: start;
  }

  .sh-snap-row > :only-child {
    flex-basis: 100%;
    width: 100%;
    max-width: none;
  }
}

/* Shared keyboard focus ring for custom (non-Bootstrap) controls */
.sh-vc-thumb:focus-visible,
.sh-vc-dot:focus-visible,
.sh-career-resume-drop:focus-visible,
.sh-contact-row:focus-visible,
.sh-port-card:focus-visible,
.btn-sh-directions:focus-visible {
  outline: var(--sh-focus-ring);
  outline-offset: 2px;
}

/* =============================================================================
   4. HEADER / NAVIGATION
   Collapses to the hamburger menu below 1200px (navbar-expand-xl). The
   centred-logo desktop layout needs ~1200px to fit all nine links plus the
   Book Now button; at 992–1199px it previously pushed Book Now off-screen.
   ============================================================================= */
#mainNav {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease;
}

#mainNav .nav-logo {
  display: block;
  width: auto;
  height: 90px;
  transition: height 0.2s ease;
}

#mainNav .navbar-nav .nav-item .nav-link {
  padding: 0.75rem 0;
  font-family: var(--bs-font-sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bs-gray-600);
}

#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link:active {
  color: var(--bs-primary);
}

/* Book Now CTA */
#mainNav .navbar-nav .nav-item .nav-link.book-now-link {
  display: flex;
  align-items: center;
}

#mainNav .book-now-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  font-family: var(--sh-font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: #fff;
  background-color: var(--bs-primary);
  border-radius: 50rem;
  box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.35);
  transition:
    background-color 0.2s ease-in-out,
    transform 0.15s ease-in-out,
    box-shadow 0.2s ease-in-out;
}

#mainNav .book-now-link:hover .book-now-btn,
#mainNav .book-now-link:focus-visible .book-now-btn {
  background-color: var(--sh-red-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.45);
}

/* Collapsed (hamburger) menu: a compact 3-column grid of tap tiles with a
   full-width Book Now, rather than a tall single-column list. The two
   <ul>s use display: contents so all links share one grid. */
@media (max-width: 1199.98px) {
  #mainNav .navbar-collapse {
    max-height: calc(100vh - 4.5rem);
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
  }

  #mainNav .navbar-nav-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.75rem 0 1rem;
  }

  #mainNav .navbar-nav-wrapper > .navbar-nav {
    display: contents;
  }

  #mainNav .navbar-nav .nav-item .nav-link {
    padding: 0.7rem 0.4rem;
    font-size: 1rem;
    text-align: center;
    background: var(--bs-gray-100);
    border-radius: 0.6rem;
  }

  #mainNav .navbar-nav .nav-item .nav-link.active {
    background: rgba(var(--bs-primary-rgb), 0.08);
  }

  #mainNav .navbar-nav .nav-item--book {
    grid-column: 1 / -1;
  }

  #mainNav .navbar-nav .nav-item .nav-link.book-now-link {
    justify-content: center;
    padding: 0.25rem 0 0;
    background: none;
  }

  #mainNav .navbar-nav .book-now-link .book-now-btn {
    width: 100%;
    min-height: 48px;
  }
}

@media (max-width: 575.98px) {
  #mainNav .nav-logo {
    height: 46px;
  }

  #mainNav .navbar-toggler {
    padding: 0.3rem 0.6rem;
    font-size: 1.1rem;
  }
}

/* Expanded desktop bar: logo centred between two link groups, transparent
   over the hero until the page scrolls (.navbar-shrink, set by JS). */
@media (min-width: 1200px) {
  #mainNav {
    background-color: transparent;
    box-shadow: none;
  }

  #mainNav .container {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }

  #mainNav .nav-logo {
    height: 120px;
  }

  #mainNav .navbar-nav-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
  }

  #mainNav .nav-left,
  #mainNav .nav-right {
    flex: 1 1 0;
    flex-direction: row;
    align-items: center;
  }

  #mainNav .nav-left {
    justify-content: flex-end;
  }

  #mainNav .nav-right {
    justify-content: flex-start;
  }

  #mainNav .navbar-brand-center {
    flex-shrink: 0;
    align-items: center;
    margin: 0 1.5rem;
    padding: 0.5rem 0;
  }

  #mainNav .navbar-nav .nav-item .nav-link {
    padding: 0 0.6rem;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
  }

  #mainNav .navbar-nav .nav-item .nav-link:hover {
    color: #fff;
  }

  #mainNav .navbar-nav .nav-item .nav-link.book-now-link {
    margin-left: 0.6rem;
    padding: 0;
  }

  #mainNav .book-now-btn {
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
  }

  #mainNav {
    transition:
      background-color 0.3s ease,
      box-shadow 0.3s ease;
  }

  #mainNav .nav-logo {
    transition: height 0.3s ease;
  }

  #mainNav.navbar-shrink {
    background-color: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }

  /* The large hero-sized logo compacts once the page scrolls, so the solid
     bar doesn't cover a fifth of the screen while reading. */
  #mainNav.navbar-shrink .nav-logo {
    height: 64px;
  }

  #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link {
    color: var(--bs-gray-900);
  }

  #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link:hover {
    color: var(--bs-primary);
  }
}

@media (min-width: 1400px) {
  #mainNav .container {
    padding-right: 3rem;
    padding-left: 3rem;
  }

  #mainNav .nav-logo {
    height: 150px;
  }

  #mainNav .navbar-brand-center {
    margin: 0 2rem;
  }

  #mainNav .navbar-nav .nav-item .nav-link {
    padding: 0 0.85rem;
    font-size: 1.15rem;
  }

  #mainNav .navbar-nav .nav-item .nav-link.book-now-link {
    margin-left: 0.85rem;
  }

  #mainNav .book-now-btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
  }
}

/* Declared after the breakpoint blocks so it wins over .navbar-shrink
   without needing !important. */
#mainNav .navbar-nav .nav-item .nav-link.active {
  color: var(--bs-primary);
}

/* =============================================================================
   5. HERO (MASTHEAD)
   ============================================================================= */
header.masthead {
  position: relative;
  overflow: hidden;
  padding-top: 10rem;
  padding-bottom: calc(10rem - 4.5rem);
}

/* Phones: a small still of the fleet sits behind the hero video, so the
   section looks right before the video starts (or when it's skipped for
   data saver / reduced motion, js/scripts.js initHeroVideo). */
@media (max-width: 767.98px) {
  header.masthead {
    background: #0a2540 url("/assets/img/hero-poster-sm.jpg") center / cover no-repeat;
  }
}

header.masthead .video-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Warm tint over the video so the white headline stays legible */
header.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(92, 77, 66, 0.4);
  pointer-events: none;
}

header.masthead .container {
  position: relative;
  z-index: 2;
}

header.masthead h1 {
  font-family: var(--sh-font-display);
  font-weight: normal;
  font-size: 2.25rem;
}

.masthead-book-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  margin: 0.25rem auto 0;
  padding: 0;
  text-decoration: none;
}

.masthead-book-link .book-now-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  gap: 0.55rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--sh-font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
  background: var(--sh-red);
  border-radius: 50rem;
  box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.4);
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.masthead-book-link:hover .book-now-btn,
.masthead-book-link:focus-visible .book-now-btn {
  color: #fff;
  background: var(--sh-red-hover);
  box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.48);
  transform: translateY(-2px);
}

.masthead-book-link:focus-visible {
  outline: var(--sh-focus-ring);
  outline-offset: 3px;
}

.masthead-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.masthead-actions .masthead-book-link {
  margin: 0;
}

/* Secondary hero action: ghost pill, same height as Book Now */
.masthead-fares-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  font-family: var(--sh-font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50rem;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background-color 0.2s ease;
}

.masthead-fares-link:hover,
.masthead-fares-link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.25);
}

.masthead-fares-link:focus-visible {
  outline: var(--sh-focus-ring);
  outline-offset: 3px;
}

/* Phones: the hero fits one screen with both actions in view */
@media (max-width: 575.98px) {
  header.masthead {
    padding-top: 7.5rem;
    padding-bottom: 3.5rem;
  }

  header.masthead h1 {
    font-size: 1.9rem;
  }

  .masthead-actions .masthead-book-link .book-now-btn,
  .masthead-fares-link {
    padding-right: 1.15rem;
    padding-left: 1.15rem;
    font-size: 0.82rem;
  }
}

@media (min-width: 992px) {
  header.masthead {
    height: 100vh;
    min-height: 40rem;
    padding-top: 4.5rem;
    padding-bottom: 0;
  }

  header.masthead h1 {
    font-size: 3rem;
  }
}

@media (min-width: 1200px) {
  header.masthead h1 {
    font-size: 3.5rem;
  }
}

/* =============================================================================
   6. ABOUT
   ============================================================================= */
.about-section {
  --sh-red-tint: #fdf1f1;
  --sh-red-tint-border: #f3d9d9;
  --sh-ink: #1c1c1c;
  --sh-muted: #6c757d;
  --sh-line: #eadada;
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #fff;
}

.about-inner {
  padding: 6rem 0 5rem;
}
@media (max-width: 767.98px) {
  .about-inner {
    padding: 1.75rem 0 1.5rem;
  }
}

/* Wavy top / bottom dividers — filled with the page background colour */
.about-wave {
  position: relative;
  z-index: 2;
  width: 100%;
  line-height: 0;
}

.about-wave svg {
  display: block;
  width: 100%;
  height: 90px;
}

.about-wave path {
  fill: var(--bs-body-bg);
}

/* Decorative diagonal ribbons (echo the brand mark) */
.about-section .ribbon-tl,
.about-section .ribbon-br {
  position: absolute;
  z-index: 0;
  width: 260px;
  height: 260px;
  opacity: 0.9;
  pointer-events: none;
}

.about-section .ribbon-tl {
  top: -60px;
  left: -90px;
  background: linear-gradient(
    135deg,
    var(--sh-red) 0%,
    var(--sh-red-deep) 100%
  );
  clip-path: polygon(0 0, 60% 0, 0 60%);
}

.about-section .ribbon-br {
  right: -90px;
  bottom: -70px;
  background: linear-gradient(
    315deg,
    var(--sh-red) 0%,
    var(--sh-red-deep) 100%
  );
  clip-path: polygon(100% 100%, 40% 100%, 100% 40%);
}

/* Eyebrow label */
.about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  font-family: var(--sh-font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sh-red);
  background: var(--sh-red-tint);
  border: 1px solid var(--sh-red-tint-border);
  border-radius: 50rem;
}

.about-eyebrow::before {
  content: "\2693"; /* anchor */
  font-size: 0.9rem;
}

.about-intro h2 {
  margin-top: 1rem;
  font-weight: 700;
  color: var(--sh-ink);
}

.about-intro p {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
  font-size: 1.08rem;
  color: var(--sh-muted);
}

/* Stat strip */
.about-stats {
  margin-top: 3rem;
  overflow: hidden;
  background: linear-gradient(
    120deg,
    var(--sh-red) 0%,
    var(--sh-red-deep) 100%
  );
  border-radius: var(--sh-radius-card);
  box-shadow: 0 1.25rem 2.5rem rgba(var(--bs-primary-rgb), 0.25);
}

.about-stat {
  padding: 2rem 1rem;
  text-align: center;
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  transition: background 0.3s ease;
}

.about-stat:last-child {
  border-right: none;
}

.about-stat:hover {
  background: rgba(255, 255, 255, 0.08);
}

.about-stat-icon {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 2.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

.about-stat:hover .about-stat-icon {
  color: #fff;
  transform: scale(1.15) translateY(-3px);
}

.about-stat .num {
  display: block;
  font-family: var(--sh-font-heading);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums; /* steady width while counting up */
}

.about-stat .lbl {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

/* Content blocks */
.about-block {
  position: relative;
  z-index: 1;
  margin-top: 6rem;
}

.about-block-head {
  margin-bottom: 2.75rem;
  text-align: center;
}

.about-block-head h3 {
  font-weight: 700;
  color: var(--sh-ink);
}

.about-block-head p {
  max-width: 680px;
  margin: 0.5rem auto 0;
  color: var(--sh-muted);
}

.about-block-head .about-eyebrow {
  margin-bottom: 0.25rem;
}

/* Mission / Vision / Coverage cards */
.about-mvp-card {
  height: 100%;
  padding: 2.25rem 1.75rem;
  background: #fff;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-radius-card);
  box-shadow: 0 0.75rem 2rem rgba(28, 20, 20, 0.05);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.about-mvp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1.5rem 2.75rem rgba(var(--bs-primary-rgb), 0.16);
}

.about-mvp-card .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.25rem;
  color: var(--sh-red);
  background: var(--sh-red-tint);
  border-radius: 0.85rem;
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}

.about-mvp-card:hover .icon {
  color: #fff;
  background: var(--sh-red);
  transform: rotate(-6deg) scale(1.06);
}

.about-mvp-card .icon i {
  font-size: 1.75rem;
}

.about-mvp-card h3 {
  font-weight: 700;
  color: var(--sh-ink);
}

.about-mvp-card p {
  margin-bottom: 0;
  font-size: 0.98rem;
  color: var(--sh-muted);
}

/* Video feature */
.about-video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #14181f;
  border-radius: 1.1rem;
  box-shadow: 0 1.5rem 3rem rgba(28, 20, 20, 0.25);
}

.about-video-wrap video,
.about-video-wrap iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.about-video-caption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--sh-muted);
}

/* Route cards */
.about-routes-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-radius-card);
  box-shadow: 0 0.5rem 1.5rem rgba(28, 20, 20, 0.04);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.about-routes-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 2rem rgba(var(--bs-primary-rgb), 0.12);
}

.about-routes-card h4 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--sh-red);
  border-bottom: 2px solid var(--sh-red-tint);
}

.about-routes-card h4 i {
  width: 1.5rem;
  font-size: 1.1rem;
  text-align: center;
}

.about-routes-card ul {
  flex: 1;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.about-routes-card li {
  position: relative;
  margin-bottom: 0.6rem;
  padding-left: 1.15rem;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--sh-muted);
}

.about-routes-card li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--sh-red);
  border-radius: 50%;
}

/* Call to action */
/* Closing call to action: text left / actions right from lg up, stacked and
   centred below. Brand burgundy → navy, with a soft glow and footer-style waves. */
.about-cta {
  position: relative;
  display: grid;
  gap: 1.75rem;
  align-items: center;
  margin-top: 5.5rem;
  padding: 3rem 1.5rem 3.5rem;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(circle at 12% 0%, rgba(200, 32, 32, 0.45), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(28, 110, 140, 0.35), transparent 50%),
    linear-gradient(120deg, var(--sh-burgundy) 0%, #2a0f16 55%, var(--sh-navy-deep) 100%);
  border-radius: 1.25rem;
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(10, 37, 64, 0.55);
}

.about-cta__waves {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 70px;
  pointer-events: none;
}

.about-cta__waves path {
  fill: #fff;
  opacity: 0.05;
}

.about-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  padding: 0.3rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-gold);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

.about-cta h3 {
  margin-bottom: 0.6rem;
  font-weight: 700;
  color: #fff;
}

.about-cta p {
  max-width: 520px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.78);
}

.about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.about-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.4rem;
  font-family: var(--sh-font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.about-cta__btn:hover {
  transform: translateY(-2px);
}

.about-cta__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.about-cta__btn--primary {
  color: var(--bs-primary);
  background: #fff;
  box-shadow: 0 0.75rem 1.5rem -0.75rem rgba(0, 0, 0, 0.6);
}

.about-cta__btn--primary:hover {
  color: #fff;
  background: var(--bs-primary);
}

.about-cta__btn--ghost {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.about-cta__btn--ghost:hover {
  color: var(--sh-navy-deep);
  background: #fff;
  border-color: #fff;
}

@media (min-width: 992px) {
  .about-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2.5rem;
    padding: 3.25rem 3.5rem 3.75rem;
    text-align: left;
  }

  .about-cta p {
    margin-left: 0;
  }

  .about-cta__actions {
    justify-content: flex-end;
    max-width: 22rem;
  }

  /* Primary action on its own row, the two secondary ones beside each other */
  .about-cta__btn--primary {
    flex-basis: 100%;
  }

  .about-cta__btn--ghost {
    flex: 1 1 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-cta__btn:hover {
    transform: none;
  }
}

@media (max-width: 991.98px) {
  .about-routes-card h4 {
    font-size: 0.95rem;
  }

  .about-routes-card li {
    font-size: 0.88rem;
  }
}

@media (max-width: 767.98px) {
  .about-wave svg {
    height: 50px;
  }

  .about-intro p {
    font-size: 1rem;
  }

  .about-stats {
    margin-top: 2rem;
  }

  /* 2 x 2 grid: right border on the left column, bottom border on the top row */
  .about-stat {
    padding: 1.1rem 0.75rem;
    border-right: none;
  }

  .about-stat:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.18);
  }

  .about-stat:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }

  .about-stat-icon {
    margin-bottom: 0.45rem;
    font-size: 1.5rem;
  }

  .about-stat .num {
    font-size: 1.75rem;
  }

  .about-stat .lbl {
    margin-top: 0.3rem;
    font-size: 0.72rem;
  }

  .about-block {
    margin-top: 3rem;
  }

  .about-block-head {
    margin-bottom: 1.25rem;
  }

  /* Video feature: text and video stack with g-5's 3rem gap otherwise */
  .about-block .row.g-5 {
    --bs-gutter-y: 1.25rem;
  }

  .about-mvp-card {
    padding: 1.5rem 1.35rem;
  }

  .about-mvp-card .icon {
    width: 46px;
    height: 46px;
    margin-bottom: 0.9rem;
  }

  .about-mvp-card .icon i {
    font-size: 1.4rem;
  }

  .about-mvp-card p {
    font-size: 0.93rem;
  }

  .about-routes-card {
    padding: 1.35rem;
  }

  .about-routes-card h4 {
    font-size: 0.9rem;
  }

  .about-cta {
    margin-top: 3rem;
    padding: 2.25rem 1.25rem 2.75rem;
  }

  /* Phones: full-width buttons, easy to tap */
  .about-cta__actions {
    flex-direction: column;
  }

  .about-cta__btn {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .about-section .ribbon-tl,
  .about-section .ribbon-br {
    width: 140px;
    height: 140px;
  }

  .about-section .ribbon-tl {
    left: 0;
  }

  .about-section .ribbon-br {
    right: 0;
  }
}

/* =============================================================================
   7. VESSELS CAROUSEL
   Left: vessel info, specs, features. Right: main photo + thumbnail column
   (a horizontal strip below 992px). Round-robin prev/next + dots below.
   ============================================================================= */
#vessels.page-section {
  padding: 8rem 0 6rem;
}

.sh-vc {
  max-width: 1360px;
  margin: 0 auto;
  outline: none;
}

.sh-vc:focus-visible {
  outline: var(--sh-focus-ring);
  outline-offset: 6px;
  border-radius: var(--bs-border-radius-lg);
}

/* Track / slides */
.sh-vc-viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--bs-border-radius-xl);
  touch-action: pan-y;
  cursor: grab;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sh-vc-viewport:active {
  cursor: grabbing;
}

/* Only the off-screen slides need clipping (horizontally); letting the
   active card's shadow paint below the viewport avoids a hard-edged cut.
   clip-path bounds how far anything may spill downward. Browsers without
   overflow: clip keep the overflow: hidden above. */
@supports (overflow: clip) {
  .sh-vc-viewport {
    overflow: visible;
    overflow-x: clip;
    clip-path: inset(0 0 -8rem 0);
  }
}

/* align-items: flex-start keeps each slide at its natural height (the
   default stretch made every slide as tall as the tallest vessel), so the
   JS-driven viewport height can match the active slide. */
.sh-vc-track {
  display: flex;
  align-items: flex-start;
  width: 100%;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.sh-vc-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
}

.sh-vc-slide__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(1.75rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-xl);
  box-shadow: 0 1.75rem 3.25rem -1.75rem rgba(10, 37, 64, 0.28);
  transition: box-shadow 0.3s ease;
}

/* Only the visible card casts a shadow; otherwise the neighbouring
   off-screen slides' shadows bleed in at the carousel edges. */
.sh-vc-slide:not(.is-active) .sh-vc-slide__grid {
  box-shadow: none;
}

/* Info panel */
.sh-vc-info__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bs-primary);
}

.sh-vc-info__name {
  margin-bottom: 1.1rem;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--sh-navy-deep);
}

.sh-vc-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.sh-vc-specs__item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  background: var(--sh-foam);
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: var(--bs-border-radius-pill);
}

.sh-vc-specs__item i {
  align-self: center;
  font-size: 0.85rem;
  color: var(--bs-primary);
}

.sh-vc-specs__value {
  font-weight: 700;
  color: var(--sh-navy-deep);
}

.sh-vc-specs__label {
  color: var(--bs-gray-600);
}

.sh-vc-info__desc {
  margin-bottom: 1.5rem;
  line-height: 1.7;
  color: var(--bs-gray-700);
}

.sh-vc-features__title {
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-navy);
}

.sh-vc-features__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-vc-feature {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sh-navy-deep);
  background: var(--bs-gray-100);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.sh-vc-feature__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 0.85rem;
  color: var(--bs-primary);
  background: #fff;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
  border-radius: 50%;
}

/* Gallery */
.sh-vc-gallery {
  display: flex;
  gap: 0.75rem;
  height: 100%;
}

.sh-vc-gallery__main {
  position: relative;
  flex: 1 1 auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bs-gray-100);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 1.25rem 2.5rem -1.5rem rgba(10, 37, 64, 0.35);
  touch-action: pan-y;
}

.sh-vc-gallery__main[tabindex]:focus-visible {
  outline: 3px solid var(--bs-primary);
  outline-offset: 2px;
}

.sh-vc-gallery__main-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    opacity 0.2s ease,
    transform 0.5s ease;
}

.sh-vc-gallery__main-img.is-fading {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .sh-vc-gallery__main:hover .sh-vc-gallery__main-img {
    transform: scale(1.035);
  }
}

.sh-vc-gallery__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  font-size: 0.85rem;
  color: var(--bs-gray-500);
}

.sh-vc-gallery__empty i {
  font-size: 2rem;
}

.sh-vc-thumbs-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
}

/* Trailing-edge fade hinting there is more to scroll; shown only when the
   strip actually overflows (data-overflowing is set by JS). */
.sh-vc-thumbs-wrap::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 0;
  left: 0;
  height: 28px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.sh-vc-thumbs-wrap[data-overflowing="true"]::after {
  opacity: 1;
}

.sh-vc-thumbs {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding-right: 2px;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scrollbar-width: thin;
}

.sh-vc-thumbs::-webkit-scrollbar {
  width: 4px;
}

.sh-vc-thumbs::-webkit-scrollbar-thumb {
  background: var(--bs-border-color);
  border-radius: 4px;
}

.sh-vc-thumb {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--bs-gray-100);
  border: 2px solid transparent;
  border-radius: var(--bs-border-radius);
  scroll-snap-align: start;
  transition:
    border-color 0.2s ease,
    transform 0.15s ease;
}

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

.sh-vc-thumb:hover {
  transform: translateY(-2px);
}

.sh-vc-thumb.is-active {
  border-color: var(--bs-primary);
}

/* Vessel-to-vessel navigator */
.sh-vc-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2rem;
}

.sh-vc-arrow {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 1.1rem;
  color: var(--bs-primary);
  cursor: pointer;
  background: #fff;
  border: 1.5px solid var(--bs-primary);
  border-radius: 50%;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}

.sh-vc-arrow:hover,
.sh-vc-arrow:focus-visible {
  color: #fff;
  background: var(--bs-primary);
  box-shadow: 0 0.5rem 1rem -0.4rem rgba(var(--bs-primary-rgb), 0.5);
  outline: none;
}

.sh-vc-arrow:active {
  transform: scale(0.94);
}

.sh-vc-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sh-vc-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  cursor: pointer;
  background: var(--bs-gray-300);
  border: none;
  border-radius: 999px;
  transition:
    width 0.25s ease,
    background 0.25s ease;
}

.sh-vc-dot:hover {
  background: var(--sh-teal);
}

.sh-vc-dot.is-active {
  width: 26px;
  background: var(--bs-primary);
}

.sh-vc-swipe-hint {
  display: none;
}

/* Tablet & phone: stacked, thumbnails become a horizontal swipeable strip */
@media (max-width: 991.98px) {
  #vessels.page-section {
    padding: 5.5rem 0 4.5rem;
  }

  .sh-vc-slide__grid {
    grid-template-columns: 1fr;
  }

  .sh-vc-gallery {
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 1.5rem;
  }

  .sh-vc-gallery__main {
    aspect-ratio: 16 / 10;
  }

  .sh-vc-thumbs-wrap {
    width: 100%;
  }

  .sh-vc-thumbs-wrap::after {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 32px;
    height: auto;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
  }

  .sh-vc-thumbs {
    flex-direction: row;
    max-height: none;
    padding-right: 0;
    padding-bottom: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .sh-vc-thumbs .sh-vc-thumb {
    width: 76px;
    height: 76px;
  }

  /* Swipe hint, dismissed the first time the visitor drags */
  .sh-vc-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    font-size: 0.72rem;
    color: var(--bs-gray-600);
    transition: opacity 0.3s ease;
  }

  .sh-vc[data-swiped="true"] .sh-vc-swipe-hint {
    opacity: 0;
  }
}

/* Phones: photo first (it identifies the vessel at a glance), details
   below; features become compact wrapping pills; long descriptions are
   clamped behind a "Read more" toggle (added by js/scripts.js). */
@media (max-width: 767.98px) {
  #vessels.page-section {
    padding: 3.5rem 0 3rem;
  }

  .sh-vc-slide__grid {
    gap: 1rem;
    padding: 1.5rem;
  }

  .sh-vc-gallery {
    order: -1;
    margin-top: 0;
  }

  .sh-vc-info__name {
    margin-bottom: 0.75rem;
    font-size: 1.4rem;
  }

  .sh-vc-specs {
    margin-bottom: 0.9rem;
  }

  .sh-vc-info__desc {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .sh-vc-info__desc.is-clamped {
    display: -webkit-box;
    overflow: hidden;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }

  .sh-vc-features {
    margin-top: 1rem;
  }

  .sh-vc-features__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .sh-vc-feature {
    gap: 0.4rem;
    padding: 0.3rem 0.7rem 0.3rem 0.35rem;
    font-size: 0.8rem;
    border-radius: var(--bs-border-radius-pill);
  }

  .sh-vc-feature__icon {
    width: 22px;
    height: 22px;
    font-size: 0.75rem;
  }

  .sh-vc-nav {
    margin-top: 1.25rem;
  }
}

/* "Read more" toggle under a clamped vessel description (phones only) */
.sh-vc-readmore {
  display: none;
}

@media (max-width: 767.98px) {
  .sh-vc-readmore:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 32px;
    margin-bottom: 0.25rem;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bs-primary);
    background: none;
    border: 0;
  }

  .sh-vc-readmore i {
    transition: transform 0.25s ease;
  }

  .sh-vc-readmore[aria-expanded="true"] i {
    transform: rotate(180deg);
  }
}

@media (max-width: 575.98px) {
  .sh-vc-slide__grid {
    gap: 1.15rem;
    padding: 1.1rem;
    border-radius: var(--bs-border-radius-lg);
  }

  .sh-vc-gallery__main {
    aspect-ratio: 4 / 3;
    border-radius: var(--bs-border-radius);
  }

  .sh-vc-thumbs .sh-vc-thumb {
    width: 62px;
    height: 62px;
  }

  .sh-vc-specs {
    gap: 0.4rem;
  }

  .sh-vc-specs__item {
    padding: 0.32rem 0.65rem;
    font-size: 0.76rem;
  }

  .sh-vc-nav {
    gap: 0.85rem;
  }

  .sh-vc-arrow {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}

@media (max-width: 359.98px) {
  .sh-vc-features__list {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   8. ROUTES — port chart (map), port logo marquee
   ============================================================================= */

@media (max-width: 767.98px) {
  #routes.page-section {
    padding: 3.5rem 0 3rem;
  }

  .routes-map-wrap.mb-5 {
    margin-bottom: 0 !important; /* beats the .mb-5 utility */
  }

  .port-marquee__header {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
  }

  .port-marquee__viewport {
    padding: 0.75rem 0;
  }

  .port-logo {
    gap: 0.5rem;
    width: 104px;
  }

  .port-logo__mark {
    height: 72px;
  }

  .port-logo__name {
    font-size: 0.68rem;
  }

  .port-marquee__cta {
    margin-top: 0.75rem;
  }
}

/* Port chart (components/site/RouteMap.tsx) — the admin desk sign-in chart,
   rebuilt: dot-matrix Philippines, radar sweep from Lucena, ports and routes,
   beside a text column with live "instruments". The SVG crops ("slice") to
   the card, anchored right, so narrower cards lose sea rather than islands.
   Colours follow the site palette: foam with navy ink by day, deep navy
   after dark in Manila (js/scripts.js switches it and adds the hover
   crosshair and clock). */
.routes-map {
  --rm-bg: var(--sh-foam);
  --rm-fg: var(--sh-navy-deep);
  --rm-sub: #4a6378;
  --rm-beacon: var(--bs-primary);
  --rm-l07: rgba(10, 37, 64, 0.07);
  --rm-l16: rgba(10, 37, 64, 0.16);
  --rm-l28: rgba(10, 37, 64, 0.28);
  --rm-l60: rgba(10, 37, 64, 0.55);
  --rm-tag: rgba(255, 255, 255, 0.94);
  --rm-sky: radial-gradient(ellipse 75% 60% at 72% 12%, rgba(255, 255, 255, 0.7), transparent 70%);
  position: relative;
  display: flex;
  aspect-ratio: 7 / 5;
  min-height: 540px;
  overflow: hidden;
  color: var(--rm-fg);
  background: var(--rm-bg);
  border-radius: var(--sh-radius-card);
  box-shadow: 0 1.5rem 3rem -1rem rgba(10, 37, 64, 0.3);
  transition:
    background-color 600ms ease,
    color 600ms ease;
}

.routes-map[data-theme="night"] {
  --rm-bg: var(--sh-navy-deep);
  --rm-fg: var(--sh-foam);
  --rm-sub: #8fa6ba;
  --rm-beacon: #e8615a;
  --rm-l07: rgba(234, 244, 247, 0.07);
  --rm-l16: rgba(234, 244, 247, 0.16);
  --rm-l28: rgba(234, 244, 247, 0.28);
  --rm-l60: rgba(234, 244, 247, 0.6);
  --rm-tag: rgba(10, 37, 64, 0.88);
  --rm-sky: radial-gradient(ellipse 60% 45% at 72% 0%, rgba(120, 170, 220, 0.12), transparent 70%);
}

.routes-map__sky {
  position: absolute;
  inset: 0;
  background: var(--rm-sky);
  pointer-events: none;
}

.routes-map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--rm-fg);
  pointer-events: none;
}

/* Sizes below are chart units; the zoomed view draws ~1.8 px per unit on desktop */
.routes-map__graticule {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.08;
  stroke-width: 0.6;
}

.routes-map__graticule-label {
  fill: currentColor;
  fill-opacity: 0.38;
  font-size: 6px;
  letter-spacing: 0.7px;
}

.routes-map__par {
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.routes-map__sweep {
  fill: currentColor;
}

.routes-map__sweep-edge {
  stroke: currentColor;
  stroke-opacity: 0.4;
  stroke-width: 0.6;
}

/* The dots inside the sweep's leading wedge light up as it passes */
.routes-map__lit {
  fill: currentColor;
  fill-opacity: 0.75;
}

.routes-map__land {
  animation: rm-fade-in 1800ms ease both;
}

.routes-map__route {
  fill: none;
  stroke: var(--rm-beacon);
  stroke-opacity: 0.6;
  stroke-width: 0.8;
  stroke-linecap: round;
}

/* Routes draw out from their origin once the map scrolls into view (JS adds
   .is-live and staggers the delays; without JS they simply show). */
.js .routes-map__route {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.js .routes-map.is-live .routes-map__route {
  stroke-dashoffset: 0;
}

.routes-map__port {
  fill: var(--rm-bg);
  stroke: currentColor;
  stroke-opacity: 0.85;
  stroke-width: 0.8;
}

.routes-map__home {
  fill: none;
  stroke: currentColor;
}

.routes-map__ripple {
  stroke-opacity: 0.45;
  stroke-width: 0.6;
  transform-box: fill-box;
  transform-origin: center;
  animation: rm-ripple 6s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}

.routes-map__ripple--2 {
  animation-delay: -2s;
}

.routes-map__ripple--3 {
  animation-delay: -4s;
}

.routes-map__home-ring {
  stroke-opacity: 0.55;
  stroke-width: 0.7;
}

.routes-map__beacon {
  fill: var(--rm-beacon);
  transform-box: fill-box;
  transform-origin: center;
  animation: rm-beacon 2.4s ease-in-out infinite;
}

.routes-map__hit {
  fill: none;
  stroke: var(--rm-beacon);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 200ms ease;
}

.routes-map__home-label {
  fill: currentColor;
  font-size: 6.5px;
  letter-spacing: 0.3px;
  text-anchor: end;
}

.routes-map__home-name {
  font-weight: 600;
  fill-opacity: 0.88;
}

.routes-map__home-pos {
  fill-opacity: 0.55;
}

.routes-map__compass {
  fill: none;
  stroke: currentColor;
}

.routes-map__compass-ring {
  stroke-opacity: 0.32;
  stroke-width: 5;
  stroke-dasharray: 0.8 9.25;
  transform-box: fill-box;
  transform-origin: center;
  animation: rm-ring-rot 240s linear infinite;
}

.routes-map__compass-hair {
  stroke-opacity: 0.16;
  stroke-width: 0.8;
}

.routes-map__compass-ns,
.routes-map__compass-ew {
  fill: currentColor;
  stroke-width: 0.8;
}

.routes-map__compass-ns {
  fill-opacity: 0.06;
  stroke-opacity: 0.3;
}

.routes-map__compass-ew {
  fill-opacity: 0.04;
  stroke-opacity: 0.22;
}

.routes-map__compass-north {
  fill: currentColor;
  fill-opacity: 0.22;
  stroke: none;
}

.routes-map__compass-n {
  fill: currentColor;
  fill-opacity: 0.45;
  stroke: none;
  font-size: 13px;
  letter-spacing: 2px;
  text-anchor: middle;
}

/* Ticked chart frame */
.routes-map__frame {
  position: absolute;
  inset: 14px;
  border: 1px solid var(--rm-l16);
  border-radius: 0.4rem;
  pointer-events: none;
}

.routes-map__frame i {
  position: absolute;
  display: block;
}

.routes-map__frame .ft,
.routes-map__frame .fb {
  right: 0;
  left: 0;
  height: 7px;
  background-image: repeating-linear-gradient(90deg, var(--rm-l28) 0 1px, transparent 1px 32px);
}

.routes-map__frame .ft {
  top: 0;
}

.routes-map__frame .fb {
  bottom: 0;
}

.routes-map__frame .fl,
.routes-map__frame .fr {
  top: 0;
  bottom: 0;
  width: 7px;
  background-image: repeating-linear-gradient(180deg, var(--rm-l28) 0 1px, transparent 1px 32px);
}

.routes-map__frame .fl {
  left: 0;
}

.routes-map__frame .fr {
  right: 0;
}

.routes-map__frame .fi {
  inset: 9px;
  border: 1px solid var(--rm-l07);
}

/* Crosshair that snaps to the nearest port (fine pointers only) */
.routes-map__cross {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.routes-map__cross.is-on {
  opacity: 1;
}

.routes-map__cross i {
  position: absolute;
  display: block;
}

.routes-map__vx {
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rm-l16);
}

.routes-map__hx {
  right: 0;
  left: 0;
  height: 1px;
  background: var(--rm-l16);
}

.routes-map__ring {
  width: 15px;
  height: 15px;
  margin: -7px 0 0 -7px;
  border: 1px solid var(--rm-l60);
  border-radius: 50%;
}

.routes-map__tag {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 11px;
  white-space: nowrap;
  color: var(--rm-fg);
  background: var(--rm-tag);
  border: 1px solid var(--rm-l16);
  border-radius: 6px;
  box-shadow: 0 0.5rem 1.25rem -0.5rem rgba(10, 37, 64, 0.25);
}

.routes-map__tag b {
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.routes-map__tag span {
  font-size: 11px;
  line-height: 14px;
  color: var(--rm-sub);
  font-variant-numeric: tabular-nums;
}

/* Text column: label top left; headline and instruments bottom left */
.routes-map__copy {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  padding: 3.25rem 4rem 3rem;
  pointer-events: none;
}

.routes-map__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 17rem;
}

.routes-map__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rm-fg);
}

.routes-map__caption {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--rm-sub);
}

.routes-map__lower {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.routes-map__rule {
  width: 28px;
  height: 2px;
  background: var(--rm-beacon);
  border-radius: 1px;
}

.routes-map__motto {
  max-width: 34rem;
  margin: 0 0 0.85rem;
  font-size: clamp(1.6rem, 2.8vw, 2.15rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--rm-sub);
}

.routes-map__motto span {
  display: block;
}

.routes-map__motto-strong {
  font-weight: 500;
  color: var(--rm-fg);
}

.routes-map__instruments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  max-width: 39rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rm-l16);
}

.routes-map__inst {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.routes-map__k {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  color: var(--rm-sub);
}

.routes-map__v {
  font-size: clamp(1.35rem, 2.3vw, 1.75rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--rm-fg);
  font-variant-numeric: tabular-nums;
}

/* The small AM / PM after a time */
.routes-map__v small {
  margin-left: 0.4rem;
  font-size: 0.5em;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.routes-map__s {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--rm-sub);
  font-variant-numeric: tabular-nums;
}

@keyframes rm-ripple {
  from {
    opacity: 0.55;
    transform: scale(0.05);
  }

  to {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes rm-beacon {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

@keyframes rm-ring-rot {
  to {
    transform: rotate(360deg);
  }
}

@keyframes rm-fade-in {
  from {
    opacity: 0;
  }
}

/* Tablets: a tighter text column */
@media (max-width: 991.98px) {
  .routes-map__copy {
    padding: 2.5rem 2.5rem 2.25rem;
  }

  .routes-map__instruments {
    gap: 1.25rem;
  }
}

/* Phones: the chart on top (portrait crop), text and instruments beneath */
@media (max-width: 767.98px) {
  .routes-map {
    flex-direction: column;
    aspect-ratio: auto;
    min-height: 0;
    padding-top: 112%; /* reserves the chart area (percent of width) */
  }

  .routes-map__svg {
    bottom: auto;
    height: auto;
    aspect-ratio: 1 / 1.12;
  }

  .routes-map__graticule-label {
    display: none;
  }

  .routes-map__copy {
    gap: 1.25rem;
    padding: 0.5rem 1.6rem 1.75rem;
  }

  .routes-map__head {
    max-width: none;
  }

  .routes-map__motto {
    margin-bottom: 0.25rem;
    font-size: 1.45rem;
  }

  .routes-map__instruments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
  }

  /* The live clock is the least essential reading on a small screen */
  .routes-map__inst:first-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .routes-map__ripple {
    opacity: 0;
  }

  .routes-map__par,
  .js .routes-map__route {
    transition: none;
  }
}

/* Port logo marquee — each port is rendered several times per .port-marquee__group
   and the group is rendered twice; the track slides by exactly one group
   (-50%), so the loop is seamless. Duration is set by js/scripts.js
   (--port-marquee-duration) to keep a constant speed for any number of ports. */
.port-marquee__header {
  margin-top: 3.5rem;
  margin-bottom: 1.25rem;
  text-align: center;
}

.port-marquee__eyebrow {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sh-gold);
}

.port-marquee__title {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--sh-navy-deep);
}

.port-marquee {
  --port-gap: clamp(1rem, 2.5vw, 2rem);
}

/* Soft fade at both edges; padding leaves room for the hover lift + shadow */
.port-marquee__viewport {
  overflow: hidden;
  padding: 1rem 0 1.25rem;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}

.port-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: scrollRightToLeft var(--port-marquee-duration, 60s) linear infinite;
}

.port-marquee__viewport:hover .port-marquee__track {
  animation-play-state: paused;
}

/* The trailing padding equals the gap, so both groups are exactly the same width */
.port-marquee__group {
  display: flex;
  gap: var(--port-gap);
  margin: 0;
  padding: 0 var(--port-gap) 0 0;
  list-style: none;
}

.port-logo {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: clamp(118px, 13vw, 168px);
}

.port-logo__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(92px, 10vw, 124px);
  /* No tile: logos are uploaded as transparent PNG/SVG and sit on the section background */
  transition: transform 0.3s ease;
}

.port-logo__mark img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.port-logo__name {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--sh-navy-deep);
}

/* Logos always show in full colour; mouse users just get a small lift on hover. */
@media (hover: hover) and (pointer: fine) {
  .port-logo:hover .port-logo__mark {
    transform: translateY(-4px) scale(1.05);
  }
}

.port-marquee__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  padding-bottom: 0.15rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bs-primary);
  border-bottom: 2px solid transparent;
  transition:
    border-color 0.2s ease,
    gap 0.2s ease;
}

.port-marquee__cta:hover,
.port-marquee__cta:focus-visible {
  gap: 0.65rem;
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.port-marquee__cta-icon {
  flex-shrink: 0;
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
}

/* Reduced motion: no scrolling — show each port once, wrapped and centred */
@media (prefers-reduced-motion: reduce) {
  .port-marquee__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .port-marquee__track {
    width: auto;
    justify-content: center;
    animation: none;
  }

  .port-marquee__group {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 1rem;
  }

  .port-marquee__group + .port-marquee__group,
  .port-logo.is-repeat {
    display: none;
  }
}

/* =============================================================================
   9. RATES — fare finder card
   ============================================================================= */
#rates.page-section {
  padding: 8rem 0;
}

.sh-fare-card {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 1.5rem 2.75rem -1.5rem rgba(10, 37, 64, 0.22);
  animation: sh-fade-up 0.5s ease both;
}

/* Top accent bar */
.sh-fare-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sh-navy-deep), var(--bs-primary));
}

/* Route selector: From / To fields + secondary Swap action */
.sh-fare-route {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sh-fare-route__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.sh-fare-route__actions {
  display: flex;
  justify-content: flex-end;
}

.sh-fare-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sh-navy);
}

.sh-fare-swap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 1.15rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sh-navy-deep);
  cursor: pointer;
  background: var(--sh-foam);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-pill);
  transition:
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.15s ease;
}

.sh-fare-swap i {
  font-size: 0.95rem;
  transition: transform 0.35s ease;
}

.sh-fare-swap:hover,
.sh-fare-swap:focus-visible {
  color: #fff;
  background: var(--bs-primary);
  box-shadow: 0 0.6rem 1.1rem -0.5rem rgba(var(--bs-primary-rgb), 0.45);
  outline: none;
}

.sh-fare-swap:hover i,
.sh-fare-swap:focus-visible i,
.sh-fare-swap.is-swapping i {
  transform: rotate(180deg);
}

.sh-fare-swap:active {
  transform: scale(0.96);
}

/* Combobox: searchable + freely-typeable From / To fields */
.sh-fare-combo {
  position: relative;
  text-align: left;
}

.sh-fare-combo__control {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.sh-fare-combo__control:focus-within {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
}

.sh-fare-combo__icon {
  position: absolute;
  left: 0.85rem;
  font-size: 0.95rem;
  color: var(--bs-primary);
  pointer-events: none;
}

.sh-fare-combo__input {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 2.4rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--sh-navy-deep);
  background: transparent;
  border: 0;
  border-radius: inherit;
}

.sh-fare-combo__input:focus {
  outline: none;
}

.sh-fare-combo__clear {
  position: absolute;
  right: 0.6rem;
  padding: 0.3rem;
  line-height: 0;
  color: var(--bs-gray-500);
  cursor: pointer;
  background: transparent;
  border: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    color 0.15s ease;
}

.sh-fare-combo.has-value .sh-fare-combo__clear {
  opacity: 1;
  pointer-events: auto;
}

.sh-fare-combo__clear:hover {
  color: var(--sh-navy-deep);
}

.sh-fare-combo__listbox {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  left: 0;
  z-index: 20;
  max-height: 14rem;
  margin: 0;
  padding: 0.35rem;
  overflow-y: auto;
  list-style: none;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 1rem 2rem -0.75rem rgba(10, 37, 64, 0.35);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.sh-fare-combo__listbox.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sh-fare-combo__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.925rem;
  color: var(--sh-navy-deep);
  cursor: pointer;
  border-radius: var(--bs-border-radius-sm);
  animation: sh-fade-down 0.15s ease both;
}

.sh-fare-combo__option i {
  font-size: 0.8rem;
  color: var(--bs-primary);
}

.sh-fare-combo__option:hover,
.sh-fare-combo__option.is-active {
  background: var(--sh-foam);
}

.sh-fare-combo__option--empty {
  font-style: italic;
  color: var(--bs-gray-600);
  cursor: default;
}

.sh-fare-combo__option--empty:hover {
  background: none;
}

/* Result panel */
.sh-fare-divider {
  margin: 1.75rem 0 1.5rem;
  border: none;
  border-top: 1px dashed var(--bs-border-color);
}

.sh-fare-result {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.sh-fare-result.is-fading {
  opacity: 0;
}

.sh-fare-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.sh-fare-group {
  flex: 1 1 260px;
  text-align: center;
}

.sh-fare-group__title {
  position: relative;
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-navy-deep);
}

.sh-fare-group__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 2.25rem;
  height: 3px;
  background: var(--bs-primary);
  border-radius: 2px;
  transform: translateX(-50%);
}

.sh-fare-group__image-wrap {
  overflow: hidden;
  background: var(--bs-gray-100);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 1rem 2rem -1.25rem rgba(10, 37, 64, 0.3);
}

.sh-fare-group__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.98);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

.sh-fare-group__image.is-loaded {
  opacity: 1;
  transform: scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .sh-fare-group__image-wrap:hover .sh-fare-group__image {
    transform: scale(1.035);
  }
}

/* Text rates: Passenger / Cargo tabs, then a compact list per section.
   Long lists get a search box and collapsible groups (js/scripts.js), and
   from tablets up a group's rows flow into two columns. */
.sh-fare-tabs {
  display: flex;
  gap: 0.25rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.25rem;
  padding: 0.25rem;
  background: var(--bs-gray-100);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
}

.sh-fare-tabs__tab {
  display: inline-flex;
  flex: 1 1 0;
  min-width: 0; /* lets a tab shrink below its text width instead of overflowing */
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.45rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--sh-navy);
  background: transparent;
  border: 0;
  border-radius: 999px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.sh-fare-tabs__tab:hover {
  background: rgba(10, 37, 64, 0.06);
}

.sh-fare-tabs__tab[aria-selected="true"] {
  color: #fff;
  background: var(--bs-primary);
  box-shadow: 0 0.35rem 0.9rem -0.4rem rgba(143, 23, 23, 0.6);
}

.sh-fare-tabs__tab:focus-visible {
  outline: var(--sh-focus-ring);
  outline-offset: 2px;
}

.sh-fare-tabs__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sh-fare-tabs__label-short {
  display: none;
}

.sh-fare-tabs__tab .bi,
.sh-fare-tabs__count {
  flex: 0 0 auto;
}

.sh-fare-tabs__count {
  min-width: 1.5rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: inherit;
  background: rgba(10, 37, 64, 0.08);
  border-radius: 999px;
}

.sh-fare-tabs__tab[aria-selected="true"] .sh-fare-tabs__count {
  background: rgba(255, 255, 255, 0.22);
}

.sh-fare-panel {
  animation: sh-fare-panel-in 0.25s ease both;
}

.sh-fare-panel:focus-visible {
  outline: var(--sh-focus-ring);
  outline-offset: 4px;
  border-radius: var(--bs-border-radius);
}

@keyframes sh-fare-panel-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.sh-fare-search {
  position: relative;
  margin-bottom: 1rem;
}

.sh-fare-search .bi-search {
  position: absolute;
  top: 50%;
  left: 0.9rem;
  color: var(--bs-gray-500);
  transform: translateY(-50%);
  pointer-events: none;
}

.sh-fare-search__input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem 0.55rem 2.4rem;
  font-size: 1rem; /* 16px+ keeps iOS from zooming on focus */
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
}

.sh-fare-search__input:focus {
  outline: none;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(200, 32, 32, 0.15);
}

.sh-fare-search__empty {
  margin: 0.5rem 0 0;
  padding: 1.25rem;
  text-align: center;
  color: var(--bs-gray-600);
}

.sh-fare-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}

.sh-fare-cat__title {
  margin: 0 0 0.25rem;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-red-deep);
}

.sh-fare-cat__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  color: inherit;
  background: var(--sh-red-tint, #fdf1f1);
  border: 0;
  border-radius: var(--bs-border-radius);
}

.sh-fare-cat__toggle:focus-visible {
  outline: var(--sh-focus-ring);
  outline-offset: 2px;
}

.sh-fare-cat__name {
  flex: 1 1 auto;
}

.sh-fare-cat__count {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bs-gray-600);
}

.sh-fare-cat__toggle .bi-chevron-down {
  transition: transform 0.2s ease;
}

.sh-fare-cat.is-open .sh-fare-cat__toggle .bi-chevron-down {
  transform: rotate(180deg);
}

.sh-fare-cat.is-collapsible .sh-fare-rows {
  padding-inline: 0.25rem;
}

.sh-fare-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-fare-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px dashed var(--bs-border-color);
  break-inside: avoid;
}

.sh-fare-row__label {
  min-width: 0;
  font-weight: 600;
  color: var(--sh-navy-deep);
}

.sh-fare-row__note {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--bs-gray-600);
}

.sh-fare-row__amount {
  flex: 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--bs-primary);
}

/* display: flex above would otherwise override the hidden attribute */
.sh-fare-row[hidden],
.sh-fare-rows[hidden],
.sh-fare-cat[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .sh-fare-rows--split {
    column-count: 2;
    column-gap: 2.5rem;
  }
}

@media (max-width: 575.98px) {
  .sh-fare-tabs {
    width: 100%;
  }

  .sh-fare-tabs__tab {
    gap: 0.35rem;
    padding-inline: 0.6rem;
    font-size: 0.85rem;
  }

  .sh-fare-tabs__tab[aria-selected="true"] {
    box-shadow: 0 0.25rem 0.6rem -0.35rem rgba(143, 23, 23, 0.6);
  }

  .sh-fare-tabs__label-full {
    display: none;
  }

  .sh-fare-tabs__label-short {
    display: inline;
  }

  .sh-fare-row {
    padding-block: 0.55rem;
    font-size: 0.925rem;
  }
}

/* Narrow phones: drop the tab icons so both labels fit */
@media (max-width: 389.98px) {
  .sh-fare-tabs__tab .bi {
    display: none;
  }
}

.sh-fare-effective {
  margin: 0 0 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--bs-gray-600);
}

.sh-fare-effective i {
  margin-right: 0.25rem;
  color: var(--bs-primary);
}

.sh-fare-notes {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  color: var(--sh-navy);
  background: var(--sh-foam);
  border-radius: var(--bs-border-radius);
}

.sh-fare-notes i {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  color: var(--sh-teal);
}

.sh-fare-notes p {
  margin: 0;
  white-space: pre-line;
}

.sh-fare-group__empty {
  padding: 2.5rem 1rem;
  color: var(--bs-gray-600);
  background: var(--bs-gray-100);
  border: 1px dashed var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.sh-fare-noroute {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--bs-gray-600);
}

.sh-fare-noroute i {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 2rem;
  color: var(--bs-primary);
}

@media (min-width: 576px) {
  .sh-fare-route__fields {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

@media (max-width: 991.98px) {
  #rates.page-section {
    padding: 5.5rem 0;
  }
}

@media (max-width: 767.98px) {
  #rates.page-section {
    padding: 3.5rem 0;
  }

  .sh-fare-groups {
    flex-direction: column;
  }
}

/* "View full size" link under each fare chart — phones only, where the
   chart is scaled down past comfortable reading size. */
.sh-fare-group__zoom {
  display: none;
}

/* Phones: From / To stacked with a round swap button beside them (the
   familiar travel-app pattern) instead of a full-width button row. */
@media (max-width: 575.98px) {
  #rates.page-section {
    padding: 3.5rem 0;
  }

  .sh-fare-card {
    padding: 1.35rem 1rem;
  }

  .sh-fare-route {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
  }

  .sh-fare-route__fields {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.75rem;
  }

  .sh-fare-route__actions {
    flex: 0 0 auto;
    padding-top: 1.4rem; /* centre on the inputs, not the labels */
  }

  .sh-fare-swap {
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
  }

  .sh-fare-swap span {
    display: none; /* aria-label still names the button */
  }

  /* Stacked fields: the swap reads as up/down */
  .sh-fare-swap i {
    transform: rotate(90deg);
  }

  .sh-fare-swap:hover i,
  .sh-fare-swap:focus-visible i,
  .sh-fare-swap.is-swapping i {
    transform: rotate(270deg);
  }

  .sh-fare-combo__listbox {
    max-height: 11rem;
  }

  .sh-fare-divider {
    margin: 1.25rem 0 1rem;
  }

  .sh-fare-noroute {
    padding: 1rem 0.5rem 0.5rem;
    font-size: 0.95rem;
  }

  .sh-fare-noroute i {
    margin-bottom: 0.4rem;
    font-size: 1.5rem;
  }

  .sh-fare-group__zoom {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 40px;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
  }

  .sh-fare-card > p.mt-4 {
    margin-top: 1.25rem !important; /* beats the .mt-4 utility */
    font-size: 0.78rem;
  }
}

@media (max-width: 359.98px) {
  .sh-fare-combo__input {
    padding-right: 2.1rem;
    padding-left: 2.1rem;
    font-size: 0.95rem;
  }

  .sh-fare-combo__icon {
    left: 0.65rem;
    font-size: 0.85rem;
  }

  .sh-fare-combo__clear {
    right: 0.4rem;
  }
}

/* =============================================================================
   10. FAQS — accordion (scoped to .sh-faq-accordion; Bootstrap's collapse
   markup and JS are unchanged)
   ============================================================================= */
.sh-faq-accordion {
  --faq-radius: var(--bs-border-radius-lg);
  --faq-red: var(--bs-primary);
  --faq-red-dark: var(--bs-link-hover-color);
  --faq-red-tint: rgba(var(--bs-primary-rgb), 0.07);
}

.sh-faq-item {
  margin-bottom: 1rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-left: 3px solid transparent;
  /* !important: overrides Bootstrap's :first-of-type / :last-of-type
       accordion-item radius rules so every item is a separate rounded card. */
  border-radius: var(--faq-radius) !important;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.sh-faq-item:last-child {
  margin-bottom: 0;
}

.sh-faq-item:hover {
  border-color: var(--faq-red);
  box-shadow: 0 0.75rem 1.75rem -0.5rem rgba(var(--bs-primary-rgb), 0.22);
}

/* Left accent bar stays lit while that item is open (progressive
   enhancement: browsers without :has() keep the transparent border). */
.sh-faq-item:has(.accordion-button:not(.collapsed)) {
  border-left-color: var(--faq-red);
}

.sh-faq-accordion .accordion-button {
  padding: 1.15rem 1.5rem;
  font-weight: 600;
  color: var(--bs-gray-900);
  background: #fff;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.sh-faq-accordion .accordion-button:focus {
  border-color: transparent;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.sh-faq-accordion .accordion-button:not(.collapsed) {
  color: var(--faq-red-dark);
  background: var(--faq-red-tint);
  box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

/* Thinner chevron that turns brand red when open */
.sh-faq-accordion .accordion-button::after {
  width: 1.1rem;
  height: 1.1rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-size: 1.1rem;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.sh-faq-accordion .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c82020'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}

.sh-faq-accordion .accordion-body {
  padding: 1.15rem 1.5rem 1.5rem;
  line-height: 1.7;
  color: var(--bs-gray-700);
}

/* Soft fade of the answer text alongside Bootstrap's height transition */
.sh-faq-accordion .accordion-collapse.collapsing .accordion-body,
.sh-faq-accordion .accordion-collapse.show .accordion-body {
  animation: sh-fade-down 0.35s ease;
}

@media (max-width: 575.98px) {
  .sh-faq-accordion .accordion-button {
    padding: 1rem 1.1rem;
    font-size: 0.95rem;
  }

  .sh-faq-accordion .accordion-body {
    padding: 0.9rem 1.1rem 1.25rem;
    font-size: 0.92rem;
  }
}

/* Promos: white cards on the light section background */
.sh-promo {
  height: calc(100% - 3rem); /* equal heights; the .mt-5 offset is outside */
  padding: 2.25rem 1.75rem;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--sh-radius-card);
  box-shadow: var(--sh-shadow-card);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.sh-promo:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-shadow-card-hover);
}

.sh-promo__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: rgba(var(--bs-primary-rgb), 0.08);
  border-radius: 50%;
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}

.sh-promo__icon i {
  line-height: 1;
  transition: color 0.25s ease;
}

.sh-promo:hover .sh-promo__icon {
  background: var(--bs-primary);
  transform: scale(1.06);
}

.sh-promo:hover .sh-promo__icon i {
  color: #fff !important; /* beats the .text-primary utility */
}

/* Promos (phones): icon-left rows instead of three tall centred blocks */
@media (max-width: 767.98px) {
  #promos .row {
    --bs-gutter-y: 0.75rem;
  }

  .sh-promo {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    align-items: center;
    height: auto;
    margin-top: 0 !important; /* beats the .mt-5 utility */
    padding: 1rem 1.1rem;
    text-align: left;
    border-radius: var(--bs-border-radius-lg);
  }

  .sh-promo > :first-child {
    grid-row: span 2;
    margin-bottom: 0 !important;
  }

  .sh-promo__icon {
    width: 52px;
    height: 52px;
  }

  .sh-promo > :first-child .fs-1 {
    font-size: 1.5rem !important;
  }

  .sh-promo h3 {
    margin-bottom: 0.15rem !important;
    font-size: 1.05rem;
  }

  .sh-promo p {
    font-size: 0.9rem;
  }
}

/* =============================================================================
   11. CAREER — posting cards, Details modal, Apply modal
   ============================================================================= */
.sh-career-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--sh-shadow-card);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .sh-career-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-shadow-card-hover);
  }
}

/* Recruitment posters are shown in full (object-fit: contain) so nothing on
   the 5:4 hiring image is ever cropped; the gradient frames any letterboxing. */
.sh-career-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sh-foam) 0%, #fff 100%);
}

.sh-career-card__media {
  position: relative;
}

.sh-career-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sh-career-card__media-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--sh-teal);
  opacity: 0.45;
}

.sh-career-card__media-empty i {
  font-size: 3rem;
}

.sh-career-card__body {
  flex: 1 1 auto;
  padding: 1.25rem 1.25rem 0.5rem;
}

.sh-career-card__badge {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.08);
  border-radius: var(--bs-border-radius-pill);
}

.sh-career-card__title {
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sh-navy-deep);
}

.sh-career-card__desc {
  display: -webkit-box;
  margin-bottom: 0;
  overflow: hidden;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--bs-gray-700);
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.sh-career-card__footer {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding: 1rem 1.25rem 1.25rem;
}

.sh-career-card__footer .btn {
  flex: 1 1 0;
}

/* Shown above the cards while online applications are switched off */
.sh-career-closed-note {
  display: inline-block;
  margin: -0.5rem 0 2rem;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  color: var(--sh-navy);
  background: var(--sh-foam);
  border-radius: var(--bs-border-radius);
}

/* Details modal — poster stacked on top here; poster left / details right
   from lg up (see the min-width: 992px block below). */
.sh-career-detail-modal .modal-content {
  position: relative;
  overflow: hidden;
}

/* Floating close button — sits over the poster, so it gets its own backing */
.sh-career-detail-modal .sh-career-detail__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  padding: 0.6rem;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0.9;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

.sh-career-detail-modal .sh-career-detail__close:hover,
.sh-career-detail-modal .sh-career-detail__close:focus {
  opacity: 1;
}

/* Posters are shown in full (object-fit: contain) — 4:5 portrait and square
   hiring images both fit without cropping; the gradient frames the rest. */
.sh-career-detail__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50vh;
  background: linear-gradient(135deg, var(--sh-foam) 0%, #fff 100%);
}

.sh-career-detail__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sh-career-detail__zoom {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sh-navy-deep);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--bs-border-radius-pill);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
}

.sh-career-detail__zoom:hover,
.sh-career-detail__zoom:focus {
  color: var(--bs-primary);
}

.sh-career-detail__info {
  padding: 1.5rem 1.25rem;
}

.sh-career-detail__title {
  margin-bottom: 1.25rem;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sh-navy-deep);
}

/* No poster: details only, kept clear of the floating close button */
.sh-career-detail--no-media .sh-career-detail__media {
  display: none;
}

.sh-career-detail--no-media .sh-career-detail__info {
  padding-right: 3.75rem;
}

/* Apply modal: the <form> wraps body + footer, so it has to pass the
   dialog's height limit down (flex column) or the body can't scroll. */
.sh-career-apply-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

/* Stacked layout: a shorter poster, so the form starts within reach */
@media (max-width: 991.98px) {
  .sh-career-apply-modal .sh-career-detail__media {
    height: 28vh;
  }
}

@media (min-width: 992px) {
  .sh-career-detail {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: minmax(0, 1fr);
    /* Fixed landscape panel: the centered dialog's margins (3.5rem) and
           the footer (~5rem) fit beneath it on any desktop viewport. */
    height: min(40rem, calc(100vh - 8.5rem));
  }

  .sh-career-detail__media {
    height: auto;
    border-right: 1px solid var(--bs-border-color);
  }

  /* The details column scrolls on its own; the poster stays in view. */
  .sh-career-detail__info {
    overflow-y: auto;
    padding: 2rem 2.25rem;
  }

  .sh-career-detail--no-media {
    display: block;
    height: auto;
  }

  .sh-career-detail--no-media .sh-career-detail__info {
    overflow-y: visible;
    padding-right: 4rem;
  }

  .sh-career-detail__title {
    font-size: 1.6rem;
  }
}

.sh-career-detail-section {
  margin-bottom: 1.1rem;
}

.sh-career-detail-section:last-child {
  margin-bottom: 0;
}

.sh-career-detail-section h6 {
  margin-bottom: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-navy);
}

.sh-career-detail-section p {
  margin-bottom: 0;
  white-space: pre-wrap;
  color: var(--bs-gray-700);
}

/* Resume dropzone */
.sh-career-resume-drop {
  padding: 1.25rem 1rem;
  text-align: center;
  color: var(--bs-gray-600);
  cursor: pointer;
  border: 2px dashed var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.sh-career-resume-drop i {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1.5rem;
  color: var(--sh-teal);
}

.sh-career-resume-drop:hover,
.sh-career-resume-drop.is-active {
  background: rgba(var(--bs-primary-rgb), 0.04);
  border-color: var(--bs-primary);
}

.sh-career-resume-selected {
  margin-top: 0.6rem;
  font-weight: 600;
  color: var(--sh-navy-deep);
}

.sh-career-resume-selected .btn-link {
  padding: 0 0 0 0.35rem;
}

@media (max-width: 575.98px) {
  .sh-career-card__body {
    padding: 1rem 1rem 0.25rem;
  }

  .sh-career-card__footer {
    flex-direction: column;
    padding: 0.85rem 1rem 1rem;
  }

  /* Full-width stacked buttons get a comfortable thumb target */
  .sh-career-card__footer .btn {
    min-height: 44px;
  }

  /* Full-screen modal (.modal-fullscreen-sm-down): a shorter poster so the
     details start above the fold; the footer's Apply button stays pinned. */
  .sh-career-detail__media {
    height: 38vh;
  }

  .sh-career-detail-modal .modal-footer {
    flex-wrap: nowrap;
  }

  .sh-career-detail-modal .modal-footer .btn {
    flex: 1 1 0;
    min-height: 44px;
  }
}

/* =============================================================================
   12. CONTACT — head office, map, contact details, ports directory
   Grid areas keep DOM order = mobile reading order (Office → Map → Details →
   Ports); larger screens just re-map the same areas.
   ============================================================================= */
.sh-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "office"
    "map"
    "details"
    "ports";
  gap: 1.5rem;
}

.sh-contact-office {
  grid-area: office;
}

.sh-contact-map {
  grid-area: map;
}

.sh-contact-details {
  grid-area: details;
}

.sh-contact-ports {
  grid-area: ports;
}

@media (min-width: 768px) {
  .sh-contact-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "office map"
      "details details"
      "ports ports";
    align-items: stretch;
  }

  .sh-contact-map {
    display: flex;
  }

  .sh-contact-map__frame,
  .sh-contact-map__empty {
    flex: 1 1 auto;
  }
}

@media (min-width: 992px) {
  .sh-contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas:
      "office map"
      "details map"
      "ports ports";
  }
}

/* Card shell (Head Office + Contact Details) */
.sh-contact-card {
  height: 100%;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--sh-shadow-card);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .sh-contact-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-shadow-card-hover);
  }
}

.sh-contact-card__badge {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1rem;
  font-size: 1.35rem;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--bs-primary) 0%,
    var(--sh-red-hover) 100%
  );
  border-radius: 50%;
}

.sh-contact-card__title {
  margin-bottom: 0.9rem;
  font-weight: 700;
  color: var(--sh-navy-deep);
}

.sh-contact-card__subtitle {
  margin-bottom: 1.1rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sh-navy-deep);
}

.sh-contact-address {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 1.4rem;
  line-height: 1.6;
  color: var(--bs-gray-700);
}

.sh-contact-address i {
  flex-shrink: 0;
  margin-top: 0.2rem;
  font-size: 1.1rem;
  color: var(--bs-primary);
}

.btn-sh-directions {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.08);
  border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
  border-radius: 10rem;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.btn-sh-directions:hover {
  color: #fff;
  background: var(--bs-primary);
  transform: translateY(-1px);
}

/* Contact rows (Telephone / Mobile / Email / Facebook) */
.sh-contact-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0;
  color: var(--bs-gray-800);
  text-decoration: none;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  transition:
    color 0.2s ease,
    padding-left 0.2s ease;
}

.sh-contact-row:last-child {
  border-bottom: none;
}

.sh-contact-row:hover {
  padding-left: 0.35rem;
  color: var(--bs-primary);
}

.sh-contact-row__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 0.9rem;
  color: var(--sh-teal);
  background: var(--sh-foam);
  border-radius: 50%;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.sh-contact-row:hover .sh-contact-row__icon {
  color: #fff;
  background: var(--bs-primary);
}

.sh-contact-row__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.sh-contact-row__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bs-gray-500);
}

/* Map */
.sh-contact-map__frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--sh-shadow-card);
}

.sh-contact-map__frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.sh-contact-map__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 260px;
  color: var(--bs-gray-500);
  background: var(--sh-foam);
  border: 1px dashed var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
}

.sh-contact-map__empty i {
  font-size: 2rem;
  opacity: 0.6;
}

/* Ports directory */
.sh-contact-ports__title {
  margin-bottom: 1.1rem;
  font-weight: 700;
  color: var(--sh-navy-deep);
}

/* The full list shows at every width — no nested scroll box */
.sh-port-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.sh-port-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  color: var(--bs-gray-800);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-left: 3px solid transparent;
  border-radius: var(--bs-border-radius);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.sh-port-card:hover {
  color: var(--bs-gray-800);
  border-color: var(--bs-border-color);
  border-left-color: var(--bs-primary);
  box-shadow: 0 0.75rem 1.5rem -0.75rem rgba(var(--bs-primary-rgb), 0.28);
  transform: translateY(-2px);
}

.sh-port-card__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 1rem;
  color: var(--sh-teal);
  background: var(--sh-foam);
  border-radius: 50%;
}

.sh-port-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.sh-port-card__name {
  font-size: 0.92rem;
  font-weight: 700;
}

.sh-port-card__phone {
  font-size: 0.85rem;
  color: var(--bs-gray-600);
}

.sh-port-card:hover .sh-port-card__phone {
  color: var(--bs-primary);
}

.sh-contact-empty--inline {
  max-width: none;
  margin: 0;
}

@media (min-width: 576px) {
  .sh-port-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .sh-port-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Phones: the full port list (no nested scroll box — those trap touch
   scrolling) but only the first six until "Show all" is tapped. The class
   and button are added by js/scripts.js, so without JS every port shows. */
.sh-port-toggle {
  display: none;
}

@media (max-width: 767.98px) {
  .sh-contact-grid {
    gap: 1rem;
  }

  .sh-port-grid {
    gap: 0.5rem;
  }

  .sh-port-scroll.is-collapsed .sh-port-card:nth-child(n + 7) {
    display: none;
  }

  .sh-port-card {
    gap: 0.7rem;
    padding: 0.6rem 0.85rem;
  }

  .sh-port-card__icon {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }

  .sh-port-toggle:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 44px;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.06);
    border: 1px dashed rgba(var(--bs-primary-rgb), 0.35);
    border-radius: var(--bs-border-radius);
  }

  .sh-port-toggle i {
    transition: transform 0.25s ease;
  }

  .sh-port-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
  }

  .sh-contact-card__badge {
    width: 42px;
    height: 42px;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
  }

  .sh-contact-ports__title {
    margin-bottom: 0.75rem;
  }
}

/* Keep the map compact on large monitors */
@media (min-width: 1400px) {
  .sh-contact-map {
    align-items: center;
  }

  .sh-contact-map__frame {
    max-height: 480px;
  }
}

/* Small phones: wrap long strings, full-width directions button, 44px
   minimum touch targets on tappable rows (WCAG 2.5.5). */
@media (max-width: 575.98px) {
  .sh-contact-card {
    padding: 1.25rem;
  }

  .sh-contact-map__frame,
  .sh-contact-map__empty {
    min-height: 200px;
  }

  .sh-contact-row {
    padding: 0.45rem 0;
  }

  .sh-contact-address span,
  .sh-contact-row__text span,
  .sh-port-card__name {
    overflow-wrap: anywhere;
  }

  .btn-sh-directions {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .sh-contact-row,
  .sh-port-card {
    min-height: 44px;
  }
}

/* =============================================================================
   13. FOOTER — wave + vessel stage, main columns, bottom bar
   ============================================================================= */
.sh-footer {
  position: relative;
  font-family: var(--bs-body-font-family);
  color: rgba(255, 255, 255, 0.82);
  background: var(--sh-burgundy);
}

.sh-footer a {
  text-decoration: none;
}

/* Wave + vessel stage. No background of its own, so the page background
   shows above the wave; the wave shares the footer's burgundy fill. */
.sh-footer-wave-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  height: clamp(130px, 20vw, 220px);
  overflow: hidden;
}

/* Wave layers are 200% wide (two identical halves) so a -50% slide loops.
   Back layers sit behind the vessel; the front layer covers its keel. */
.sh-footer-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  display: block;
  width: 200%;
  height: 100%;
  fill: var(--sh-burgundy);
}

.sh-footer-wave-back {
  z-index: 1;
  opacity: 0.35;
}

.sh-footer-wave-mid {
  z-index: 1;
  opacity: 0.6;
}

.sh-footer-wave-front {
  z-index: 4;
}

/* The ship's waterline sits 10% of its width above the wrap's bottom edge;
   this lines it up with the front wave's mean level (37.5% from the bottom). */
.sh-footer-vessel-wrap {
  --sh-vessel-w: clamp(116px, 19vw, 260px);
  position: absolute;
  bottom: calc(37.5% - var(--sh-vessel-w) * 0.1);
  left: 4%;
  z-index: 3;
  width: var(--sh-vessel-w);
}

.sh-footer-vessel-float {
  position: relative;
  display: block;
  transform-origin: 50% 78%;
}

.sh-footer-vessel {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3));
}

@media (prefers-reduced-motion: no-preference) {
  .sh-footer-wave-back {
    animation: sh-wave-drift 22s linear infinite reverse;
  }

  .sh-footer-wave-mid {
    animation: sh-wave-drift 15s linear infinite;
  }

  .sh-footer-wave-front {
    animation: sh-wave-drift 10s linear infinite;
  }

  .sh-footer-vessel-float {
    animation: sh-vessel-bob 4.6s ease-in-out infinite;
  }

  .sh-footer-vessel-foam {
    animation: sh-vessel-foam 2.3s ease-in-out infinite;
  }
}

@keyframes sh-wave-drift {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes sh-vessel-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-5%) rotate(1.2deg);
  }
}

@keyframes sh-vessel-foam {
  0%,
  100% {
    opacity: 0.9;
  }

  50% {
    opacity: 0.45;
  }
}

/* Main columns */
.sh-footer-main {
  position: relative;
  z-index: 1;
  padding: 5rem 0 3rem;
}

.sh-footer-heading {
  position: relative;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  margin-top: 1rem;
  font-family: var(--sh-font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.sh-footer-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2.5rem;
  height: 3px;
  background: var(--sh-red);
  border-radius: 2px;
}

.sh-footer-logo-badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 0.65rem 1.1rem;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.sh-footer-logo-badge:hover {
  transform: translateY(-3px);
}

.sh-footer-logo-badge img {
  display: block;
  width: auto;
  height: 52px;
}

.sh-footer-desc {
  max-width: 360px;
  margin-bottom: 1.75rem;
  font-size: 0.94rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

.sh-footer-social-label {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--sh-font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.sh-footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.sh-footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

.sh-footer-social-icon:hover,
.sh-footer-social-icon:focus-visible {
  color: #fff;
  background: var(--sh-red);
  box-shadow: 0 0.6rem 1.25rem rgba(var(--bs-primary-rgb), 0.45);
  transform: translateY(-4px) scale(1.08);
}

.sh-footer-links,
.sh-footer-contact-list {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.sh-footer-links li {
  margin-bottom: 0.7rem;
}

.sh-footer-links a {
  position: relative;
  display: inline-block;
  padding-left: 0.9rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.72);
  transition:
    color 0.2s ease,
    padding-left 0.2s ease;
}

.sh-footer-links a::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--sh-red);
  border-radius: 50%;
}

.sh-footer-links a:hover,
.sh-footer-links a:focus-visible {
  padding-left: 1.2rem;
  color: #fff;
}

.sh-footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
  font-size: 0.94rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.sh-footer-contact-list li:last-child {
  margin-bottom: 0;
}

.sh-footer-contact-list i {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 1rem;
  color: var(--sh-red);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.6rem;
}

.sh-footer-contact-list a {
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s ease;
}

.sh-footer-contact-list a:hover,
.sh-footer-contact-list a:focus-visible {
  color: #fff;
}

.sh-footer-book-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 1.5rem;
  padding: 0.75rem 1.6rem;
  font-family: var(--sh-font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sh-red);
  border-radius: 50rem;
  box-shadow: 0 0.6rem 1.5rem rgba(var(--bs-primary-rgb), 0.35);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}

.sh-footer-book-btn:hover,
.sh-footer-book-btn:focus-visible {
  color: #fff;
  background: var(--sh-red-hover);
  box-shadow: 0 0.85rem 1.85rem rgba(var(--bs-primary-rgb), 0.45);
  transform: translateY(-3px);
}

/* Bottom bar */
.sh-footer-bottom {
  position: relative;
  z-index: 1;
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sh-footer-bottom-inner {
  padding: 1.35rem 0;
  text-align: center;
}

.sh-footer-copy {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
}
.sh-footer-cookie {
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.sh-footer-cookie:hover,
.sh-footer-cookie:focus-visible {
  color: #fff;
}

/* -----------------------------------------------------------------------
   Cookie consent banner (components/site/CookieConsent.tsx)
   Bottom-left card; on phones it spans the width just above the
   quick-action bar. Sits above the assistant button until answered.
   ----------------------------------------------------------------------- */
.sh-cookie {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 1045;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--sh-radius-card);
  box-shadow: var(--sh-shadow-card-hover);
}
@media (min-width: 768px) {
  .sh-cookie {
    right: auto;
    bottom: 1.5rem;
    left: 1.5rem;
    max-width: 26rem;
  }
}
.sh-cookie__title {
  margin: 0 0 0.35rem;
  font-family: var(--sh-font-heading);
  font-weight: 700;
  color: var(--sh-navy-deep);
}
.sh-cookie__text {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
}
.sh-cookie__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* -----------------------------------------------------------------------
   Career › Apply: applicant policies (components/site/ApplicantPolicies.tsx)
   ----------------------------------------------------------------------- */
.sh-policies {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.sh-policy {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  background: var(--bs-tertiary-bg);
}
.sh-policy > summary {
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sh-navy-deep);
  cursor: pointer;
}
.sh-policy > summary .bi {
  margin-right: 0.35rem;
  color: var(--sh-teal);
}
.sh-policy__body {
  max-height: 18rem;
  overflow-y: auto;
  padding: 0 0.85rem 0.85rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--bs-body-color);
}
.sh-policy__body:focus-visible {
  outline: 2px solid var(--sh-teal);
  outline-offset: -2px;
}
.sh-policy__body h4 {
  margin: 0.9rem 0 0.3rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sh-navy-deep);
}
.sh-policy__body ul,
.sh-policy__body ol {
  padding-left: 1.1rem;
  margin-bottom: 0.5rem;
}
.sh-policy__body li + li {
  margin-top: 0.2rem;
}
.sh-policy__body p {
  margin-bottom: 0.5rem;
}
.sh-policy__meta {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

/* Vessel horizontal placement nudges */
@media (min-width: 576px) {
  .sh-footer-vessel-wrap {
    left: 5%;
  }
}

@media (min-width: 768px) {
  .sh-footer-vessel-wrap {
    left: 6%;
  }
}

@media (min-width: 992px) {
  .sh-footer-vessel-wrap {
    left: 7%;
  }
}

@media (min-width: 1400px) {
  .sh-footer-vessel-wrap {
    left: 8%;
  }
}

@media (max-width: 991.98px) {
  .sh-footer-main {
    padding: 4.25rem 0 2.75rem;
  }

  .sh-footer-col {
    margin-bottom: 0.5rem;
  }

  .sh-footer-heading {
    margin-bottom: 1rem;
  }
}

/* Phones: full-width intro and contact, with the link groups side by side */
@media (max-width: 767.98px) {
  .sh-footer-main {
    padding: 3.25rem 0 2.25rem;
    text-align: center;
  }

  .sh-footer-main .row {
    --bs-gutter-y: 1.5rem;
  }

  .sh-footer-col {
    margin-bottom: 0;
  }

  .sh-footer-col:first-child,
  .sh-footer-col:last-child {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .sh-footer-col:nth-child(2) {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Its three links duplicate Quick Links */
  .sh-footer-col--services {
    display: none;
  }

  .sh-footer-col:last-child {
    margin-top: 0.25rem;
  }

  /* Quick Links as one wrapped, centred line of tap targets */
  .sh-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15rem 1.1rem;
  }

  .sh-footer-links li {
    margin-bottom: 0;
  }

  .sh-footer-links a {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  .sh-footer-desc {
    max-width: 420px;
    margin-right: auto;
    margin-left: auto;
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .sh-footer-heading::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .sh-footer-social {
    justify-content: center;
  }

  .sh-footer-links a,
  .sh-footer-links a:hover,
  .sh-footer-links a:focus-visible {
    padding-left: 0;
  }

  .sh-footer-links a::before {
    display: none;
  }

  .sh-footer-contact-list li {
    justify-content: center;
    text-align: left;
  }

  /* The quick-action bar's Book Now is always on screen down here */
  .sh-footer-book-btn {
    display: none;
  }
}

@media (max-width: 413.98px) {
  .sh-footer-wave-stage {
    height: clamp(100px, 26vw, 150px);
  }

  .sh-footer-main {
    padding: 2.75rem 0 2rem;
  }

  .sh-footer-heading {
    font-size: 0.8rem;
  }

  .sh-footer-desc {
    font-size: 0.9rem;
  }

  .sh-footer-contact-list i {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }

  .sh-footer-contact-list li {
    gap: 0.65rem;
  }
}

@media (max-width: 374.98px) {
  .sh-footer-main {
    padding: 2.5rem 0 1.75rem;
  }

  .sh-footer-logo-badge img {
    height: 44px;
  }
}

/* Mobile quick-action bar (phones; .d-md-none hides it from 768px up).
   Fixed to the bottom, within thumb reach. With JS it stays tucked away
   while the hero is on screen and while a form field has focus (so it
   never sits on top of the on-screen keyboard). */
.sh-mobile-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr);
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--bs-border-color);
  box-shadow: 0 -0.5rem 1.25rem rgba(10, 37, 64, 0.1);
  transition: transform 0.3s ease;
}

.js .sh-mobile-bar:not(.is-visible) {
  transform: translateY(110%);
}

.sh-mobile-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-height: 48px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-decoration: none;
  color: var(--bs-gray-700);
  border-radius: 0.6rem;
}

.sh-mobile-bar__item i {
  font-size: 1.2rem;
  line-height: 1;
}

.sh-mobile-bar__item:hover,
.sh-mobile-bar__item:focus-visible {
  color: var(--bs-primary);
}

.sh-mobile-bar__item:focus-visible {
  outline: var(--sh-focus-ring);
  outline-offset: 2px;
}

.sh-mobile-bar__item--book {
  flex-direction: row;
  gap: 0.4rem;
  font-family: var(--sh-font-heading);
  font-size: 0.8rem;
  text-transform: uppercase;
  color: #fff;
  background: var(--sh-red);
  border-radius: 50rem;
  box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.35);
}

.sh-mobile-bar__item--book i {
  font-size: 1rem;
}

.sh-mobile-bar__item--book:hover,
.sh-mobile-bar__item--book:focus-visible {
  color: #fff;
  background: var(--sh-red-hover);
}

/* Keep the copyright line clear of the bar (padding inside the footer,
   so the burgundy runs to the very bottom of the page) */
@media (max-width: 767.98px) {
  .sh-footer-bottom-inner {
    padding-bottom: calc(1.35rem + 4rem + env(safe-area-inset-bottom, 0px));
  }
}

/* =============================================================================
   14. ANIMATIONS
   ============================================================================= */
@keyframes scrollRightToLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Generic entrance: fade + rise */
@keyframes sh-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Generic entrance: fade + drop (dropdown options, accordion answers) */
@keyframes sh-fade-down {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Vessel feature chips cascade in when their slide becomes active */
.sh-vc-slide.is-active .sh-vc-feature {
  opacity: 0;
  transform: translateY(6px);
  animation: sh-fade-up 0.35s ease forwards;
}

.sh-vc-slide.is-active .sh-vc-feature:nth-child(1) {
  animation-delay: 0.02s;
}
.sh-vc-slide.is-active .sh-vc-feature:nth-child(2) {
  animation-delay: 0.06s;
}
.sh-vc-slide.is-active .sh-vc-feature:nth-child(3) {
  animation-delay: 0.1s;
}
.sh-vc-slide.is-active .sh-vc-feature:nth-child(4) {
  animation-delay: 0.14s;
}
.sh-vc-slide.is-active .sh-vc-feature:nth-child(5) {
  animation-delay: 0.18s;
}
.sh-vc-slide.is-active .sh-vc-feature:nth-child(6) {
  animation-delay: 0.22s;
}
.sh-vc-slide.is-active .sh-vc-feature:nth-child(n + 7) {
  animation-delay: 0.26s;
}

/* Scroll reveal ([data-animate-in] / [data-animate-stagger], driven by
   js/scripts.js). Scoped to html.js so content is never hidden when
   JavaScript is unavailable. The script removes the attribute once the
   entrance finishes, so hover transforms on the revealed element keep
   working afterwards. Sideways variants are only used inside sections that
   clip their overflow, so they never cause horizontal page scroll. */
.js [data-animate-in],
.js [data-animate-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
}

.js [data-animate-in="left"] {
  transform: translateX(-40px);
}

.js [data-animate-in="right"] {
  transform: translateX(40px);
}

.js [data-animate-in="zoom"] {
  transform: scale(0.94);
}

/* Section dividers draw outwards from the centre */
.js [data-animate-in="draw"] {
  transform: scaleX(0);
}

.js [data-animate-in].is-visible,
.js [data-animate-stagger].is-visible > * {
  animation: sh-reveal-in 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.js [data-animate-stagger].is-visible > * {
  animation-delay: calc(var(--sh-stagger-i, 0) * 0.1s);
}

@keyframes sh-reveal-in {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Hero: the headline, divider and actions settle in on page load */
@media (prefers-reduced-motion: no-preference) {
  header.masthead h1 {
    animation: sh-hero-rise 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s both;
  }

  header.masthead .divider {
    animation: sh-hero-draw 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.6s both;
  }

  header.masthead .masthead-actions {
    animation: sh-hero-rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.8s both;
  }
}

@keyframes sh-hero-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}

@keyframes sh-hero-draw {
  from {
    transform: scaleX(0);
  }
}

/* Reading progress: a thin brand bar along the top edge, driven purely by
   the page scroll position (browsers without scroll timelines skip it). */
.sh-scroll-progress {
  display: none;
}

@supports (animation-timeline: scroll()) {
  .sh-scroll-progress {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1031; /* above the fixed navbar (1030) */
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--sh-red) 0%, var(--sh-gold) 100%);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
    animation: sh-scroll-progress linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes sh-scroll-progress {
  to {
    transform: scaleX(1);
  }
}

/* Footer vessel sails in once, the first time the footer scrolls into view.
   The hidden start pose only applies after JS adds .js-vessel-ready. */
@media (prefers-reduced-motion: no-preference) {
  .sh-footer-vessel-wrap.js-vessel-ready {
    opacity: 0;
    transform: translateX(-160%) translateY(10px);
  }

  .sh-footer-vessel-wrap.js-vessel-ready.sh-vessel-animate {
    animation: shFooterShipEnter 1.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
}

@keyframes shFooterShipEnter {
  0% {
    opacity: 0;
    transform: translateX(-160%) translateY(10px);
  }

  55% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

/* Reduced motion: one consolidated override for every animated component */
@media (prefers-reduced-motion: reduce) {
  .sh-vc-track,
  .sh-vc-viewport,
  .sh-vc-gallery__main-img,
  .sh-vc-feature,
  .sh-vc-arrow,
  .sh-vc-dot,
  .port-logo__mark,
  .port-logo__mark img,
  .port-marquee__cta,
  .sh-fare-card,
  .sh-fare-group__image,
  .sh-fare-swap,
  .sh-fare-swap i,
  .sh-fare-combo__option,
  .sh-fare-result,
  .sh-faq-item,
  .sh-faq-accordion .accordion-button,
  .sh-faq-accordion .accordion-button::after,
  .sh-faq-accordion .accordion-body,
  .sh-career-card,
  .sh-contact-card,
  .sh-port-card,
  .sh-promo,
  .sh-promo__icon,
  .routes-map__land,
  .routes-map__ripple,
  .routes-map__beacon,
  .routes-map__compass-ring,
  .about-mvp-card .icon,
  .sh-snap-dot,
  .sh-vc-readmore i,
  .sh-port-toggle i,
  .sh-mobile-bar {
    animation: none !important;
    transition: none !important;
  }

  .sh-vc-slide.is-active .sh-vc-feature,
  .js [data-animate-in],
  .js [data-animate-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}


/* =============================================================================
   15. AI ASSISTANT (floating chat widget — components/site/Assistant.tsx)
   ============================================================================= */
.sh-assistant {
  position: fixed;
  right: 1rem;
  /* Clears the mobile quick-action bar on phones. */
  bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .sh-assistant {
    right: 1.5rem;
    bottom: 1.5rem;
  }
}

.sh-assistant-toggle {
  width: 56px;
  height: 56px;
  padding: 0;
  font-size: 1.4rem;
  border-radius: 50%;
  box-shadow: 0 0.5rem 1.25rem rgba(10, 37, 64, 0.25);
}

.sh-assistant-panel {
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 2rem));
  height: min(540px, calc(100vh - 11rem));
  overflow: hidden;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 1rem 2.5rem rgba(10, 37, 64, 0.25);
}

.sh-assistant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  font-family: var(--sh-font-heading);
  font-weight: 700;
  color: #fff;
  background: var(--sh-navy-deep);
}

.sh-assistant-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  overflow-y: auto;
  background: var(--sh-foam);
}

.sh-assistant-msg {
  max-width: 85%;
  padding: 0.55rem 0.8rem;
  font-size: 0.92rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 0.9rem;
}

.sh-assistant-msg-assistant {
  align-self: flex-start;
  color: var(--bs-gray-900);
  background: #fff;
  border-bottom-left-radius: 0.25rem;
}

.sh-assistant-msg-user {
  align-self: flex-end;
  color: #fff;
  background: var(--sh-red);
  border-bottom-right-radius: 0.25rem;
}

/* Thinking indicator: bouncing dots + a status line that changes with the wait. */
.sh-assistant-thinking {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  white-space: normal;
}

.sh-assistant-dots {
  display: inline-flex;
  gap: 0.25rem;
}

.sh-assistant-dots span {
  width: 0.45rem;
  height: 0.45rem;
  background: var(--sh-teal);
  border-radius: 50%;
  animation: sh-assistant-bounce 1.2s ease-in-out infinite;
}

.sh-assistant-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.sh-assistant-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

.sh-assistant-thinking-label {
  font-size: 0.85rem;
  color: transparent;
  /* Shimmer sweeps across the text; the fallback color shows where background-clip is unsupported. */
  background: linear-gradient(90deg, var(--bs-gray-600) 0%, var(--bs-gray-600) 40%, var(--sh-teal) 50%, var(--bs-gray-600) 60%, var(--bs-gray-600) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: sh-assistant-shimmer 2s linear infinite, sh-assistant-fade-in 0.35s ease-out;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .sh-assistant-thinking-label {
    color: var(--bs-gray-600);
  }
}

/* Blinking cursor at the end of a reply while it streams in. */
.sh-assistant-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--sh-teal);
  animation: sh-assistant-blink 1s step-end infinite;
}

@keyframes sh-assistant-bounce {
  0%, 60%, 100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-0.3rem);
  }
}

@keyframes sh-assistant-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -150% 0;
  }
}

@keyframes sh-assistant-fade-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
}

@keyframes sh-assistant-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-assistant-dots span,
  .sh-assistant-thinking-label,
  .sh-assistant-caret {
    animation: none;
  }

  .sh-assistant-dots span {
    opacity: 0.6;
  }

  .sh-assistant-thinking-label {
    color: var(--bs-gray-600);
    background: none;
  }
}

.sh-assistant-error {
  align-self: stretch;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--sh-red-deep);
  background: #fdecec;
  border-radius: 0.5rem;
}

.sh-assistant-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--bs-border-color);
}

.sh-assistant-form textarea {
  resize: none;
  max-height: 6rem;
}

.sh-assistant-form .btn {
  flex-shrink: 0;
}

.sh-assistant-note {
  margin: 0;
  padding: 0 0.75rem 0.6rem;
  font-size: 0.72rem;
  color: var(--bs-gray-600);
}