/*
 * Captain Fishing Charters - Native CSS Design System
 * Replaces Tailwind with @layer, CSS custom properties, and CSS nesting
 * DHH/37signals style: semantic classes, OKLCH colors, modern CSS
 */

@layer reset, tokens, base, components, layouts, utilities;

/* ================================================================
   RESET
   ================================================================ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { height: 100%; -webkit-text-size-adjust: 100%; }
  body { min-height: 100%; line-height: 1.5; -webkit-font-smoothing: antialiased; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  table { border-collapse: collapse; }
}

/* ================================================================
   TOKENS
   ================================================================ */
@layer tokens {
  :root {
    /* Navy - primary brand */
    --navy-50: #f0f4f8;
    --navy-100: #d9e2ec;
    --navy-200: #bcccdc;
    --navy-300: #9fb3c8;
    --navy-400: #829ab1;
    --navy-500: #627d98;
    --navy-600: #486581;
    --navy-700: #334e68;
    --navy-800: #243b53;
    --navy-900: #102a43;

    /* Ocean - teal accents */
    --ocean-50: #f0fdfa;
    --ocean-100: #ccfbf1;
    --ocean-200: #99f6e4;
    --ocean-300: #5eead4;
    --ocean-400: #2dd4bf;
    --ocean-500: #14b8a6;
    --ocean-600: #0d9488;
    --ocean-700: #0f766e;
    --ocean-800: #115e59;
    --ocean-900: #134e4a;

    /* Coral - CTA accent */
    --coral-50: #fef7f0;
    --coral-100: #feecdc;
    --coral-200: #fcd9bd;
    --coral-300: #fdba8c;
    --coral-400: #ff8a4c;
    --coral-500: #ff5a1f;
    --coral-600: #d03801;
    --coral-700: #b91c1c;
    --coral-800: #991b1b;
    --coral-900: #7f1d1d;

    /* Gray */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --gray-950: #030712;

    /* Red */
    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-900: #7f1d1d;

    /* Green */
    --green-50: #f0fdf4;
    --green-100: #dcfce7;
    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;
    --green-800: #166534;
    --green-900: #14532d;

    /* Blue */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;
    --blue-950: #172554;

    /* Yellow */
    --yellow-400: #facc15;
    --yellow-500: #eab308;
    --yellow-600: #ca8a04;
    --yellow-800: #854d0e;

    /* Amber */
    --amber-300: #fcd34d;
    --amber-400: #fbbf24;
    --amber-600: #d97706;

    /* Cyan */
    --cyan-400: #22d3ee;
    --cyan-500: #06b6d4;
    --cyan-600: #0891b2;
    --cyan-700: #0e7490;

    /* Slate */
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    /* Teal */
    --teal-400: #2dd4bf;
    --teal-500: #14b8a6;
    --teal-700: #0f766e;
    --teal-900: #134e4a;

    /* Purple */
    --purple-100: #f3e8ff;
    --purple-500: #a855f7;
    --purple-600: #9333ea;

    /* Pink */
    --pink-500: #ec4899;
    --pink-600: #db2777;

    /* Orange */
    --orange-400: #fb923c;
    --orange-900: #7c2d12;

    /* Typography */
    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.625rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    /* Textures */
    --texture-dots: radial-gradient(circle, rgb(255 255 255 / 0.03) 1px, transparent 1px);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition: 300ms ease;
  }
}

/* ================================================================
   BASE
   ================================================================ */
@layer base {
  html { height: 100%; }
  body {
    font-family: var(--font-sans);
    color: var(--gray-900);
    background: var(--gray-50);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  main { flex: 1; }
  body.bg-white { background: white; }
  body.bg-dark { background: var(--gray-900); }

  h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; }
  h1, h2 { font-family: var(--font-display); font-weight: 400; }

  svg { display: inline-block; vertical-align: middle; }

  /* Base form element styles */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    font-size: 1rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

    &:focus {
      outline: none;
      border-color: var(--blue-500);
      box-shadow: 0 0 0 2px rgb(59 130 246 / 0.3);
    }

    &::placeholder { color: var(--gray-400); }
  }

  textarea { resize: vertical; }

  label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 0.25rem;
  }
}

/* ================================================================
   COMPONENTS
   ================================================================ */
@layer components {

  /* ---- Buttons ---- */
  .btn-coral {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--coral-500);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgb(255 90 31 / 0.3);
    transition: all var(--transition);
    cursor: pointer;
    border: none;
    text-align: center;

    &:hover {
      background: var(--coral-400);
      transform: scale(1.05);
    }
  }

  .btn-navy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--navy-800);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgb(36 59 83 / 0.3);
    transition: all var(--transition);
    cursor: pointer;
    border: none;
    text-align: center;

    &:hover {
      background: var(--navy-700);
      transform: scale(1.05);
    }
  }

  .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: white;
    padding: 0.75rem 1.5rem;
    border: 2px solid white;
    border-radius: 0.375rem;
    font-weight: 700;
    transition: all var(--transition);
    cursor: pointer;
    text-align: center;

    &:hover {
      background: white;
      color: var(--navy-900);
    }
  }

  .btn-red {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--red-600);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgb(220 38 38 / 0.3);
    transition: all var(--transition);
    cursor: pointer;
    border: none;
    text-align: center;

    &:hover { background: var(--red-500); }
  }

  .btn-amber {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--amber-400);
    color: var(--blue-950);
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgb(251 191 36 / 0.3);
    transition: all var(--transition);
    cursor: pointer;
    border: none;
    text-align: center;

    &:hover { background: var(--amber-300); }
  }

  .btn-cyan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cyan-500);
    color: var(--slate-900);
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgb(6 182 212 / 0.3);
    transition: all var(--transition);
    cursor: pointer;
    border: none;
    text-align: center;

    &:hover { background: var(--cyan-400); }
  }

  .btn-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--blue-600);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    box-shadow: 0 10px 15px -3px rgb(37 99 235 / 0.3);
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
    text-align: center;

    &:hover { background: var(--blue-700); }
  }

  .btn-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 700;
    box-shadow: var(--shadow-xl);
    transition: all var(--transition);
    cursor: pointer;
    border: none;
    text-align: center;

    &:hover { background: var(--gray-100); }
  }

  .btn--lg { padding: 1rem 2rem; font-size: 1.125rem; }
  .btn--full { width: 100%; }
  .btn--disabled { opacity: 0.5; cursor: not-allowed; }

  /* ---- Cards ---- */
  .card {
    background: white;
    border-radius: 0.75rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
  }

  .card-hover {
    background: white;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-100);
    transition: all var(--transition);

    &:hover {
      box-shadow: var(--shadow-2xl);
      transform: translateY(-0.25rem);
      border-color: var(--ocean-200);
    }
  }

  /* ---- Badges ---- */
  .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
  }

  .badge--confirmed { background: var(--green-100); color: var(--green-800); }
  .badge--pending { background: rgb(254 249 195); color: var(--yellow-800); }
  .badge--cancelled { background: var(--red-100); color: var(--red-700); }
  .badge--completed { background: var(--blue-100); color: var(--blue-800); }
  .badge--available { background: var(--ocean-100); color: var(--ocean-800); }
  .badge--full { background: var(--coral-100); color: var(--coral-800); }

  .badge svg { width: 1rem; height: 1rem; margin-right: 0.25rem; }

  /* ---- Flash Messages ---- */
  .flash {
    padding: 1rem;
    border-left: 4px solid;
    display: flex;
    align-items: center;
    justify-content: space-between;

    & .flash__content {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    & .flash__icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

    & .flash__dismiss {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.25rem;
      transition: color var(--transition-fast);

      & svg { width: 1.25rem; height: 1.25rem; }
    }
  }

  .flash--notice {
    background: var(--green-50);
    border-color: var(--green-400);

    & .flash__icon { color: var(--green-400); }
    & p { color: var(--green-700); }
    & .flash__dismiss { color: var(--green-400); &:hover { color: var(--green-600); } }
  }

  .flash--alert {
    background: var(--red-50);
    border-color: var(--red-400);

    & .flash__icon { color: var(--red-400); }
    & p { color: var(--red-700); }
    & .flash__dismiss { color: var(--red-400); &:hover { color: var(--red-600); } }
  }

  /* ---- Page Header ---- */
  .page-header {
    background: linear-gradient(to bottom right, var(--navy-900), var(--navy-800), var(--navy-900));
    color: white;
    padding-block: 3rem;

    & h1 {
      font-size: clamp(2.25rem, 5vw, 3rem);
      font-weight: 400;
      margin-bottom: 0.5rem;
      letter-spacing: -0.025em;
    }

    & p { color: var(--navy-200); font-size: 1.125rem; }
  }

  .page-header--photos {
    background: linear-gradient(to bottom right, rgb(3 21 41 / 0.85), rgb(15 30 49 / 0.8)), url("/assets/IMG_3053-82548bf4.JPG");
    background-size: cover;
    background-position: center;
    padding-block: 4rem;
  }

  /* ---- Main Navbar ---- */
  .navbar {
    background: var(--navy-900);
    color: white;

    & .navbar__inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
      max-width: 80rem;
      margin-inline: auto;
    }

    & .navbar__logo {
      font-size: 1.5rem;
      font-weight: 700;

      & a { transition: color var(--transition); }
      & a:hover { color: var(--coral-400); }

      & .navbar__logo-link {
        display: block;
        transition: opacity var(--transition);
        &:hover { opacity: 0.85; }
      }

      & img {
        height: 3rem;
        width: auto;
      }
    }

    & .navbar__links {
      display: none;
      align-items: center;
      gap: 1.5rem;

      & a {
        transition: color var(--transition);
        &:hover { color: var(--coral-400); }
        &.navbar__link--active { color: var(--coral-400); }
      }
    }

    & .navbar__toggle {
      display: block;
      padding: 0.5rem;
      border-radius: 0.25rem;
      background: none;
      border: none;
      color: white;
      cursor: pointer;
      transition: background var(--transition);

      &:hover { background: var(--navy-800); }
      & svg { width: 1.5rem; height: 1.5rem; }
    }

    & .navbar__mobile {
      margin-top: 1rem;
      padding-block: 1rem;
      border-top: 1px solid var(--navy-800);
      display: flex;
      flex-direction: column;
      gap: 0.75rem;

      & a {
        transition: color var(--transition);
        &:hover { color: var(--coral-400); }
      }
    }
  }

  @media (min-width: 768px) {
    .navbar .navbar__links { display: flex; }
    .navbar .navbar__toggle { display: none; }
  }

  /* ---- Satellite Navbar ---- */
  .sat-nav {
    color: white;
    padding-block: 1rem;

    & .sat-nav__inner {
      max-width: 80rem;
      margin-inline: auto;
      padding-inline: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    & .sat-nav__logo {
      font-size: 1.25rem;
      font-weight: 900;
    }

    & .sat-nav__cta {
      padding: 0.5rem 1.5rem;
      border-radius: 0.375rem;
      font-weight: 700;
      transition: all var(--transition-fast);
    }
  }

  .sat-nav--shark {
    background: black;
    & .sat-nav__logo span { color: var(--red-500); }
    & .sat-nav__cta { background: var(--red-600); color: white; &:hover { background: var(--red-500); } }
  }

  .sat-nav--guides {
    background: var(--blue-950);
    & .sat-nav__logo span { color: var(--amber-400); }
    & .sat-nav__cta { background: var(--amber-400); color: var(--blue-950); &:hover { background: var(--amber-300); } }
  }

  .sat-nav--tarpon {
    background: var(--slate-900);
    & .sat-nav__logo span { color: var(--cyan-400); }
    & .sat-nav__cta { background: var(--cyan-500); color: var(--slate-900); &:hover { background: var(--cyan-400); } }
  }

  /* ---- Footer ---- */
  .footer {
    background: var(--navy-900);
    color: white;
    padding-block: 3rem;

    & h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
    & h4 { font-weight: 600; margin-bottom: 1rem; }

    & .footer__logo {
      margin-bottom: 1.25rem;
      & img { height: 4rem; width: auto; opacity: 0.9; }
    }

    & .footer__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    & .footer__text { color: var(--navy-300); }

    & .footer__links {
      color: var(--navy-300);
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      & a { transition: color var(--transition); &:hover { color: var(--ocean-400); } }
    }

    & .footer__contact {
      color: var(--navy-300);
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      & li { display: flex; align-items: center; }
      & svg { width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; color: var(--ocean-400); }
    }

    & .footer__bottom {
      border-top: 1px solid var(--navy-800);
      margin-top: 2rem;
      padding-top: 2rem;
      text-align: center;
      color: var(--navy-400);
    }
  }

  @media (min-width: 768px) {
    .footer .footer__grid { grid-template-columns: repeat(4, 1fr); }
  }

  /* ---- Satellite Footer ---- */
  .satellite-footer {
    background: var(--gray-900);
    color: white;
    padding-block: 3rem;

    & h4 { font-weight: 700; font-size: 1.125rem; margin-bottom: 1rem; }

    & .satellite-footer__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    & .satellite-footer__text { color: var(--gray-400); font-size: 0.875rem; }

    & .satellite-footer__links {
      color: var(--gray-400);
      font-size: 0.875rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      & a { transition: color var(--transition-fast); &:hover { color: white; } }
    }

    & .satellite-footer__bottom {
      border-top: 1px solid var(--gray-800);
      margin-top: 2rem;
      padding-top: 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      font-size: 0.875rem;
      color: var(--gray-500);

      & a { transition: color var(--transition-fast); }
    }

    & .link--cyan { color: var(--cyan-400); &:hover { color: rgb(34 211 238 / 0.8); } }
    & .link--red { color: var(--red-400); &:hover { color: rgb(248 113 113 / 0.8); } }
    & .link--blue { color: var(--blue-400); &:hover { color: rgb(96 165 250 / 0.8); } }
  }

  @media (min-width: 768px) {
    .satellite-footer .satellite-footer__grid { grid-template-columns: repeat(3, 1fr); }
    .satellite-footer .satellite-footer__bottom { flex-direction: row; justify-content: space-between; }
  }

  /* ---- Satellite CTA button ---- */
  .satellite-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    border-radius: 0.375rem;
    font-weight: 700;
    font-size: 1.125rem;
    text-align: center;
    transition: all var(--transition);
  }

  .satellite-cta--secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid white;
    padding: 1rem 2rem;
    border-radius: 0.375rem;
    font-weight: 700;
    font-size: 1.125rem;
    text-align: center;
    transition: all var(--transition);

    &:hover { background: white; color: var(--gray-900); }
  }

  /* ---- Newsletter Form ---- */
  .newsletter-form {
    display: flex;
    gap: 0.5rem;

    & input[type="email"] {
      flex: 1;
      padding: 0.5rem 0.75rem;
      border-radius: 0.25rem;
      background: var(--gray-800);
      border: 1px solid var(--gray-700);
      color: white;

      &::placeholder { color: var(--gray-400); }
      &:focus { border-color: var(--yellow-500); outline: none; }
    }

    & .newsletter-form__error { color: var(--red-400); font-size: 0.875rem; margin-top: 0.25rem; }

    & button {
      background: var(--yellow-500);
      color: var(--blue-900);
      padding: 0.5rem 1rem;
      border-radius: 0.25rem;
      font-weight: 700;
      border: none;
      cursor: pointer;
      transition: background var(--transition-fast);
      white-space: nowrap;

      &:hover { background: var(--yellow-400); }
    }
  }

  .newsletter-success {
    background: rgb(20 83 45 / 0.5);
    border: 1px solid var(--green-700);
    border-radius: 0.25rem;
    padding: 1rem;
    text-align: center;

    & svg { width: 2rem; height: 2rem; color: var(--green-400); margin: 0 auto 0.5rem; }
    & .newsletter-success__title { color: var(--green-400); font-weight: 600; }
    & .newsletter-success__text { color: var(--gray-400); font-size: 0.875rem; }
  }

  /* ---- Trip Card ---- */
  .trip-card {
    overflow: hidden;
    margin-bottom: 1.5rem;

    & .trip-card__header {
      background: linear-gradient(to bottom right, var(--navy-700), var(--navy-800), var(--navy-900));
      color: white;
      padding: 1rem 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

      & h3 { font-size: 1.25rem; font-weight: 700; }
      & .trip-card__date { color: var(--navy-200); font-size: 0.875rem; }
      & .trip-card__price { font-size: 1.5rem; font-weight: 700; text-align: right; }
      & .trip-card__per { color: var(--navy-200); font-size: 0.875rem; text-align: right; }
    }

    & .trip-card__body {
      padding: 1.5rem;

      & > p { color: var(--gray-600); margin-bottom: 1rem; }
    }

    & .trip-card__highlights {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1rem;

      & span {
        background: var(--ocean-100);
        color: var(--ocean-800);
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 500;
      }
    }

    & .trip-card__meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.875rem;
      color: var(--gray-500);

      & svg { width: 1rem; height: 1rem; display: inline; margin-right: 0.25rem; }
    }
  }

  /* ---- Form Card ---- */
  .form-card {
    background: white;
    box-shadow: var(--shadow);
    border-radius: 0.375rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;

    & h2 { font-size: 1.25rem; font-weight: 400; margin-bottom: 1rem; }

    & .form-card__fields { display: flex; flex-direction: column; gap: 1rem; }

    & .form-card__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }

    & .form-card__summary {
      background: var(--gray-50);
      border-radius: 0.375rem;
      padding: 1rem;
      margin-top: 1rem;

      & .form-card__row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1.125rem;
      }

      & .form-card__total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--blue-600);
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--gray-200);
      }
    }

    & .form-card__help { color: var(--gray-500); font-size: 0.875rem; margin-top: 0.25rem; }
    & .form-card__error { color: var(--red-600); font-size: 0.875rem; margin-top: 0.5rem; }

    /* Stripe card element container */
    & #card-element {
      padding: 0.75rem 1rem;
      border: 1px solid var(--gray-300);
      border-radius: 0.25rem;
      background: white;
      min-height: 2.5rem;

      &:focus-within {
        border-color: var(--ocean-500);
        box-shadow: 0 0 0 3px oklch(from var(--ocean-500) l c h / 0.1);
      }
    }

    & .form-card__security {
      display: flex;
      align-items: center;
      color: var(--gray-500);
      font-size: 0.875rem;
      gap: 0.5rem;

      & svg { width: 1.25rem; height: 1.25rem; color: var(--green-500); }
    }

    & .form-card__accepted {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      color: var(--gray-500);

      & span {
        background: var(--gray-100);
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        font-weight: 500;
      }
    }
  }

  @media (min-width: 768px) {
    .form-card .form-card__grid { grid-template-columns: repeat(2, 1fr); }
    .form-card .form-card__grid--full { grid-column: span 2; }
  }

  /* ---- Error Box ---- */
  .error-box {
    background: var(--coral-50);
    border: 1px solid var(--coral-200);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 2rem;

    & h3 { color: var(--coral-800); font-weight: 600; margin-bottom: 0.5rem; }
    & ul { list-style: disc; padding-left: 1.25rem; }
    & li { color: var(--coral-600); }
  }

  /* ---- Empty State ---- */
  .empty-state {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-100);

    & p { color: var(--gray-500); margin-bottom: 1rem; }
    & p:last-child { color: var(--gray-400); }
  }

  .empty-notice {
    background: var(--coral-50);
    border-left: 4px solid var(--coral-400);
    padding: 1.5rem;
    border-radius: 0.375rem;

    & p { color: var(--coral-800); font-size: 1.125rem; }
  }

  /* ---- Auth Card ---- */
  .auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom right, var(--gray-50), var(--gray-100));
    padding: 3rem 1rem;
  }

  .auth-card {
    max-width: 28rem;
    width: 100%;

    & .auth-card__inner {
      background: white;
      border-radius: 0.75rem;
      box-shadow: var(--shadow-xl);
      padding: 2rem;
      border: 1px solid var(--gray-100);
    }

    & .auth-card__header { text-align: center; margin-bottom: 2rem; }

    & .auth-card__icon {
      width: 4rem;
      height: 4rem;
      border-radius: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;

      & svg { width: 2rem; height: 2rem; }
    }
    & .auth-card__icon--blue { background: var(--blue-100); & svg { color: var(--blue-600); } }
    & .auth-card__icon--green { background: var(--green-100); & svg { color: var(--green-600); } }

    & h2 { font-size: 1.5rem; font-weight: 400; color: var(--gray-900); }
    & .auth-card__subtitle { margin-top: 0.5rem; font-size: 0.875rem; color: var(--gray-500); }

    & .auth-card__alert {
      border-radius: 0.75rem;
      padding: 1rem;
      margin-bottom: 1.5rem;
      font-size: 0.875rem;
    }
    & .auth-card__alert--error { background: var(--red-50); border: 1px solid var(--red-100); color: var(--red-700); }
    & .auth-card__alert--success { background: var(--green-50); border: 1px solid var(--green-100); color: var(--green-700); }

    & .auth-card__form { display: flex; flex-direction: column; gap: 1.5rem; }

    & .auth-card__input {
      appearance: none;
      border-radius: 0.75rem;
      width: 100%;
      padding: 0.75rem 1rem;
      border: 1px solid var(--gray-200);
      color: var(--gray-900);
      transition: box-shadow var(--transition-fast);

      &:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgb(59 130 246 / 0.5);
        border-color: transparent;
      }
    }

    & .auth-card__code-input {
      appearance: none;
      border-radius: 0.75rem;
      width: 100%;
      padding: 1.25rem 1rem;
      border: 2px solid var(--gray-200);
      color: var(--gray-900);
      text-align: center;
      font-size: 1.875rem;
      letter-spacing: 0.5em;
      font-family: var(--font-mono);
      background: var(--gray-50);
      transition: box-shadow var(--transition-fast);

      &:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgb(59 130 246 / 0.5);
        border-color: transparent;
      }

      &::placeholder { color: var(--gray-300); }
    }

    & .auth-card__footer { margin-top: 1.5rem; text-align: center; font-size: 0.75rem; color: var(--gray-400); }
  }

  /* ---- Booking Confirmation ---- */
  .booking-success {
    background: var(--green-600);
    color: white;
    padding-block: 3rem;
    text-align: center;

    & svg { width: 4rem; height: 4rem; margin: 0 auto 1rem; }
    & h1 { font-size: 2.25rem; font-weight: 400; margin-bottom: 0.5rem; }
    & p { color: rgb(220 252 231); }
  }

  .booking-detail {
    background: white;
    box-shadow: var(--shadow-lg);
    border-radius: 0.375rem;
    overflow: hidden;
    margin-bottom: 2rem;

    & .booking-detail__header {
      background: var(--blue-900);
      color: white;
      padding: 1rem 1.5rem;

      & h2 { font-size: 1.25rem; font-weight: 400; }
      & p { color: var(--blue-200); }
    }

    & .booking-detail__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }

    & .booking-detail__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }

    & .booking-detail__label { color: var(--gray-500); font-size: 0.875rem; }
    & .booking-detail__value { font-weight: 600; }
    & .booking-detail__value--green { font-weight: 600; color: var(--green-600); }
  }

  .info-card {
    background: white;
    box-shadow: var(--shadow);
    border-radius: 0.375rem;
    padding: 1.5rem;
    margin-bottom: 2rem;

    & h3 { font-weight: 700; font-size: 1.125rem; margin-bottom: 1rem; }

    & .info-card__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }

    & .info-card__label { color: var(--gray-500); font-size: 0.875rem; }
    & .info-card__value { font-weight: 600; }
  }

  .gear-list {
    background: var(--blue-50);
    border-radius: 0.375rem;
    padding: 1.5rem;
    margin-bottom: 2rem;

    & h3 { font-weight: 700; font-size: 1.125rem; margin-bottom: 1rem; color: var(--blue-900); }

    & ul { display: flex; flex-direction: column; gap: 0.5rem; }

    & li {
      display: flex;
      align-items: center;
      color: var(--blue-800);

      & svg { width: 1.25rem; height: 1.25rem; color: var(--blue-500); margin-right: 0.5rem; flex-shrink: 0; }
    }
  }

  .contact-card {
    background: var(--gray-100);
    border-radius: 0.375rem;
    padding: 1.5rem;
    text-align: center;

    & p { color: var(--gray-600); margin-bottom: 0.5rem; }
    & .contact-card__phone { font-weight: 600; }
    & .contact-card__email { color: var(--gray-500); }
  }

  /* ---- Trip List (trips/index) ---- */
  .trip-list-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;

    & .trip-list-card__header {
      background: linear-gradient(to bottom right, var(--navy-700), var(--navy-800), var(--navy-900));
      color: white;
      padding: 1.5rem;

      & h2 { font-size: 1.5rem; font-weight: 400; margin-bottom: 0.5rem; }
      & p { color: var(--navy-200); }
    }

    & .trip-list-card__body {
      padding: 1.5rem;
      flex: 1;
      display: flex;
      flex-direction: column;

      & > p { flex: 1; }
      & > a:last-child { margin-top: auto; }
    }

    & .trip-list-card__price {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;

      & .price { font-size: 1.5rem; font-weight: 700; color: var(--ocean-600); }
      & .capacity { font-size: 0.875rem; color: var(--gray-500); }
    }
  }

  /* ---- Trip Show Page ---- */
  .trip-detail {
    overflow: hidden;
    margin-bottom: 2rem;
    padding: 2rem;

    & h2 { font-size: 1.5rem; font-weight: 400; margin-bottom: 1rem; color: var(--navy-800); }
    & p { color: var(--gray-700); line-height: 1.75; }
  }

  .trip-detail__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  @media (min-width: 768px) {
    .trip-detail__stats { grid-template-columns: repeat(3, 1fr); }
  }

  .trip-detail__stat {
    background: var(--gray-50);
    border-radius: 0.375rem;
    padding: 1rem;

    & .trip-detail__stat-label { font-size: 0.875rem; color: var(--gray-500); margin-bottom: 0.25rem; }
    & .trip-detail__stat-value { font-size: 1.125rem; font-weight: 600; color: var(--navy-800); }
    & .trip-detail__stat-value--ocean { font-size: 1.125rem; font-weight: 600; color: var(--ocean-600); }
  }

  /* ---- Admin Layout ---- */
  /* Keep admin headings sans-serif (no display font) */
  .admin-nav ~ * h1,
  .admin-nav ~ * h2,
  .admin-header h1,
  .admin-header h2 { font-family: var(--font-sans); font-weight: 700; }

  .admin-nav {
    background: var(--gray-800);

    & .admin-nav__inner {
      max-width: 80rem;
      margin-inline: auto;
      padding-inline: 1rem;
      display: flex;
      height: 4rem;
      align-items: center;
      justify-content: space-between;
    }

    & .admin-nav__brand { color: white; font-weight: 700; font-size: 1.25rem; }

    & .admin-nav__links {
      display: none;
      margin-left: 2.5rem;
      align-items: baseline;
      gap: 1rem;
    }

    & .admin-nav__link {
      padding: 0.5rem 0.75rem;
      border-radius: 0.25rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-300);
      transition: all var(--transition-fast);

      &:hover { background: var(--gray-700); color: white; }
    }

    & .admin-nav__link--active {
      background: var(--gray-900);
      color: white;
    }

    & .admin-nav__site-link {
      color: var(--gray-300);
      font-size: 0.875rem;
      transition: color var(--transition-fast);

      &:hover { color: white; }
    }
  }

  @media (min-width: 768px) {
    .admin-nav .admin-nav__links { display: flex; }
  }

  .admin-header {
    background: white;
    box-shadow: var(--shadow);
    padding: 1.5rem 1rem;

    & > div { max-width: 80rem; margin-inline: auto; }
  }

  /* ---- Admin Stats ---- */
  .stat-card {
    background: white;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    padding: 1.5rem;
    transition: box-shadow var(--transition-fast);

    &:hover { box-shadow: var(--shadow-md); }

    & .stat-card__header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }

    & .stat-card__icon {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;

      & svg { width: 1.25rem; height: 1.25rem; }
    }

    & .stat-card__icon--green { background: var(--green-100); & svg { color: var(--green-600); } }
    & .stat-card__icon--blue { background: var(--blue-100); & svg { color: var(--blue-600); } }
    & .stat-card__icon--purple { background: var(--purple-100); & svg { color: var(--purple-600); } }
    & .stat-card__icon--amber { background: rgb(254 243 199); & svg { color: var(--amber-600); } }

    & .stat-card__label { font-size: 0.875rem; color: var(--gray-500); font-weight: 500; }
    & .stat-card__value { font-size: 1.875rem; font-weight: 700; color: var(--gray-900); }
  }

  /* ---- Admin Panel Card ---- */
  .panel-card {
    background: white;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;

    & .panel-card__header {
      padding: 1.5rem;
      border-bottom: 1px solid var(--gray-100);

      & h2 { font-size: 1.125rem; font-weight: 600; color: var(--gray-900); }
      & p { font-size: 0.875rem; color: var(--gray-500); margin-top: 0.25rem; }
    }

    & .panel-card__body { padding: 1.5rem; }

    & .panel-card__empty {
      text-align: center;
      padding: 3rem 0;

      & .panel-card__empty-icon {
        width: 3rem;
        height: 3rem;
        background: var(--gray-100);
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;

        & svg { width: 1.5rem; height: 1.5rem; color: var(--gray-400); }
      }

      & p { color: var(--gray-500); }
    }
  }

  /* ---- Admin Progress Bar ---- */
  .progress-bar {
    width: 100%;
    height: 0.625rem;
    background: var(--gray-100);
    border-radius: 9999px;
    overflow: hidden;

    & .progress-bar__fill {
      height: 100%;
      border-radius: 9999px;
      transition: width 0.5s ease;
    }

    & .progress-bar__fill--blue {
      background: linear-gradient(to right, var(--blue-500), var(--blue-600));
    }
  }

  /* ---- Admin List Row ---- */
  .list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    transition: background var(--transition-fast);

    &:hover { background: var(--gray-50); }

    & .list-row__label { color: var(--gray-700); font-weight: 500; }
    & .list-row__value { background: var(--gray-100); color: var(--gray-900); font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; }
  }

  .trip-list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    transition: background var(--transition-fast);

    &:hover { background: var(--gray-50); }

    & .trip-list-row__info p:first-child { font-weight: 500; color: var(--gray-900); }
    & .trip-list-row__info p:last-child { font-size: 0.875rem; color: var(--gray-500); }

    & .trip-list-row__spots {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.75rem;
      border-radius: 0.375rem;
      font-size: 0.875rem;
      font-weight: 600;
    }

    & .trip-list-row__spots--ok { background: var(--green-100); color: var(--green-700); }
    & .trip-list-row__spots--low { background: var(--red-100); color: var(--red-700); }
  }

  /* ---- Admin Table ---- */
  .admin-table {
    background: white;
    box-shadow: var(--shadow);
    border-radius: 0.375rem;
    overflow: hidden;

    & table { width: 100%; }

    & thead { background: var(--gray-50); }

    & th {
      padding: 0.75rem 1.5rem;
      text-align: left;
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--gray-500);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    & th:last-child { text-align: right; }

    & tbody tr { border-top: 1px solid var(--gray-200); }
    & tbody tr.past-row { background: var(--gray-50); color: var(--gray-400); }

    & td {
      padding: 1rem 1.5rem;
      white-space: nowrap;
    }

    & td:last-child { text-align: right; }

    & .admin-table__name { font-weight: 500; }
    & .admin-table__sub { font-size: 0.875rem; color: var(--gray-500); }

    & .admin-table__action {
      color: var(--blue-600);
      font-size: 0.875rem;
      font-weight: 500;
      transition: color var(--transition-fast);

      &:hover { color: var(--blue-900); }
    }
  }

  /* ---- Admin Filter Tabs ---- */
  .filter-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .filter-tab {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all var(--transition-fast);
  }

  .filter-tab--inactive { background: var(--gray-200); color: var(--gray-700); &:hover { background: var(--gray-300); } }
  .filter-tab--blue { background: var(--blue-600); color: white; }
  .filter-tab--green { background: var(--green-600); color: white; }
  .filter-tab--yellow { background: var(--yellow-600); color: white; }
  .filter-tab--red { background: var(--red-600); color: white; }

  /* ---- Admin Date Range Tabs ---- */
  .date-range {
    display: flex;
    gap: 0.5rem;
    background: var(--gray-100);
    padding: 0.25rem;
    border-radius: 0.75rem;
  }

  .date-range__tab {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-600);
    transition: all var(--transition-fast);

    &:hover { color: var(--gray-900); }
  }

  .date-range__tab--active {
    background: white;
    color: var(--gray-900);
    box-shadow: var(--shadow-sm);
  }

  /* ---- Hero Sections ---- */
  .hero {
    position: relative;
    color: white;
    display: flex;
    align-items: center;
    overflow: hidden;

    & .hero__bg {
      position: absolute;
      inset: 0;
    }

    & .hero__content {
      position: relative;
      max-width: 80rem;
      margin-inline: auto;
      padding: 6rem 1rem;
    }

    & .hero__inner { max-width: 48rem; }
    & .hero__inner--wide { max-width: 56rem; }

    & h1 {
      font-weight: 400;
      margin-bottom: 1.5rem;
      letter-spacing: -0.025em;
      line-height: 1.1;
    }

    & .hero__text {
      font-size: 1.25rem;
      margin-bottom: 2rem;
      line-height: 1.75;
    }

    & .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
  }

  .hero--main {
    min-height: 60vh;
    & .hero__bg {
      background: linear-gradient(to bottom right, rgb(3 21 41 / 0.85), rgb(15 30 49 / 0.8), rgb(3 21 41 / 0.85)), url("/assets/galveston-sunset-2b80d6ab.jpg");
      background-size: cover;
      background-position: center;
    }
    & .hero__bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        var(--texture-dots),
        radial-gradient(ellipse at top right, rgb(20 184 166 / 0.1), transparent, transparent);
      background-size: 20px 20px, 100% 100%;
    }
    & h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
    & .hero__text { color: var(--navy-200); }

    & .hero__watermark {
      display: none;
    }
  }

  @media (min-width: 1024px) {
    .hero--main .hero__watermark {
      display: block;
      position: absolute;
      right: 2rem;
      top: 50%;
      transform: translateY(-50%);
      width: 20rem;
      height: 20rem;
      background: url("/assets/logo-fish-commander-white-4154a285.png") no-repeat center / contain;
      opacity: 0.04;
      pointer-events: none;
    }
  }

  .hero--shark {
    min-height: 80vh;
    & .hero__bg {
      background: linear-gradient(to bottom right, rgb(17 17 17 / 0.8), rgb(31 31 31 / 0.75), rgb(0 0 0 / 0.85)), url("/assets/IMG_2782-70b324a3.JPG");
      background-size: cover;
      background-position: center;
    }
    & .hero__bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at top right, rgb(127 29 29 / 0.2), transparent, transparent);
    }
    & h1 { font-size: clamp(3rem, 7vw, 4.5rem); font-weight: 400; }
    & .hero__text { color: var(--gray-300); max-width: 42rem; }
    & .hero__kicker { color: var(--red-500); font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 1.5rem; font-size: 0.875rem; }
    & .accent { color: var(--red-500); }
  }

  .hero--guides {
    min-height: 75vh;
    & .hero__bg {
      background: linear-gradient(to bottom right, rgb(23 37 84 / 0.85), rgb(30 58 95 / 0.8), rgb(15 23 42 / 0.85)), url("/assets/IMG_5190-b6cd21d8.JPG");
      background-size: cover;
      background-position: center top;
    }
    & .hero__bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at top left, rgb(251 191 36 / 0.15), transparent, transparent);
    }
    & h1 { font-size: clamp(3rem, 6vw, 3.75rem); }
    & .hero__text { color: var(--blue-200); max-width: 42rem; }
    & .hero__kicker { color: var(--amber-400); font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 1.5rem; font-size: 0.875rem; }
    & .accent { color: var(--amber-400); }
  }

  .hero--tarpon {
    min-height: 80vh;
    & .hero__bg {
      background: linear-gradient(to bottom right, rgb(15 23 42 / 0.75), rgb(30 41 59 / 0.7), rgb(2 6 23 / 0.8)), url("/assets/IMG_5484-0a0ad5a8.JPG");
      background-size: cover;
      background-position: center top;
    }
    & .hero__video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }
    & .hero__bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom right, rgb(15 23 42 / 0.7), rgb(30 41 59 / 0.65), rgb(2 6 23 / 0.75));
      z-index: 1;
    }
    & .hero__bg::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at top right, rgb(6 182 212 / 0.2), transparent, transparent);
      z-index: 2;
    }
    & h1 { font-size: clamp(3rem, 7vw, 4.5rem); font-weight: 400; }
    & .hero__text { color: var(--slate-300); max-width: 42rem; }
    & .accent { color: var(--cyan-400); }
  }

  /* ---- Section Styles ---- */
  .section { padding-block: 4rem; }
  .section--lg { padding-block: 6rem; }
  .section--dark {
    background-color: var(--navy-900);
    background-image: var(--texture-dots);
    background-size: 20px 20px;
    color: white;
  }
  .section--gray { background: var(--gray-50); }
  .section--white { background: white; }
  .section--black { background: black; color: white; }

  /* Satellite section themes */
  .section--shark-dark { background: var(--gray-900); color: white; }
  .section--shark-black { background: black; color: white; }
  .section--shark-cta {
    background: linear-gradient(to bottom right, var(--red-600), var(--red-600), var(--red-700));
    color: white;
    position: relative;
    overflow: hidden;
  }

  .section--guides-dark { background: var(--slate-900); color: white; }
  .section--guides-darker { background: var(--slate-950); color: white; }
  .section--guides-gradient {
    background: linear-gradient(to bottom right, rgb(30 58 95), var(--blue-950), var(--slate-900));
    color: white;
    position: relative;
    overflow: hidden;
  }
  .section--guides-cta {
    background: linear-gradient(to bottom right, var(--blue-600), var(--blue-700), var(--blue-800));
    color: white;
    position: relative;
    overflow: hidden;
  }

  .section--tarpon-dark { background: var(--slate-900); color: white; }
  .section--tarpon-darker { background: var(--slate-950); color: white; }
  .section--tarpon-cta {
    background: linear-gradient(to bottom right, var(--cyan-600), var(--cyan-600), var(--cyan-700));
    color: white;
    position: relative;
    overflow: hidden;
  }

  .section--coral-cta {
    background: linear-gradient(to bottom right, var(--coral-400), var(--coral-500), var(--coral-600));
    color: white;
    position: relative;
    overflow: hidden;

    & .section__overlay {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at top right, rgb(255 255 255 / 0.2), transparent, transparent);
    }
  }

  .section__header {
    text-align: center;
    margin-bottom: 3rem;

    & h2 {
      font-size: clamp(1.875rem, 4vw, 2.5rem);
      font-weight: 400;
      margin-bottom: 1rem;
      letter-spacing: -0.025em;
    }

    & p { font-size: 1.125rem; color: var(--gray-500); }
    & .section__header-line {
      width: 6rem;
      height: 0.25rem;
      background: linear-gradient(to right, var(--ocean-400), var(--coral-400));
      margin: 0 auto;
      border-radius: 9999px;
    }
  }

  .section__header--kicker {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    font-size: 0.875rem;
  }

  /* ---- Feature Grid Items ---- */
  .feature-card {
    text-align: center;

    & .feature-card__icon {
      margin-bottom: 1rem;
      display: flex;
      justify-content: center;
    }

    & h3 { font-weight: 700; margin-bottom: 0.5rem; }
    & p { color: var(--gray-600); }
  }

  /* Dark section overrides for text legibility */
  .section--dark .section__header p,
  .section--dark .feature-card p { color: var(--navy-200); }
  .section--dark .section__header-line { margin-top: 1rem; }

  .section--shark-dark .section__header p,
  .section--shark-black .section__header p { color: var(--gray-400); }
  .section--guides-dark .section__header p,
  .section--guides-darker .section__header p,
  .section--guides-gradient .section__header p { color: var(--slate-400); }
  .section--tarpon-dark .section__header p,
  .section--tarpon-darker .section__header p { color: var(--slate-400); }

  /* ---- Species/Feature Cards (Shark, Guides, Tarpon) ---- */
  .species-card {
    background: linear-gradient(to bottom, var(--gray-900), var(--gray-950));
    padding: 2rem;
    border-radius: 0.75rem;
    text-align: center;
    border: 1px solid var(--gray-800);
    transition: all var(--transition);

    &:hover {
      border-color: var(--red-500);
      transform: translateY(-0.25rem);
      box-shadow: 0 20px 25px -5px rgb(127 29 29 / 0.2);
    }

    & .species-card__icon {
      width: 5rem;
      height: 5rem;
      background: rgb(220 38 38 / 0.1);
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      transition: background var(--transition-fast);
    }

    &:hover .species-card__icon { background: rgb(220 38 38 / 0.2); }

    & .species-card__icon svg { color: var(--red-400); transition: color var(--transition-fast); }
    &:hover .species-card__icon svg { color: rgb(252 165 165); }

    & h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; }
    & p { color: var(--gray-400); font-size: 0.875rem; line-height: 1.75; }
  }

  .guide-feature-card {
    text-align: center;
    padding: 2rem;
    border-radius: 0.75rem;
    background: rgb(30 41 59 / 0.5);
    border: 1px solid var(--slate-700);
    transition: background var(--transition);

    &:hover { background: var(--slate-800); }

    & .guide-feature-card__icon {
      width: 5rem;
      height: 5rem;
      background: linear-gradient(to bottom right, var(--blue-600), var(--blue-700));
      border-radius: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      box-shadow: 0 10px 15px -3px rgb(59 130 246 / 0.2);
      transition: transform var(--transition);
    }

    &:hover .guide-feature-card__icon { transform: scale(1.1); }
    & .guide-feature-card__icon svg { color: white; }
    & h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; color: white; }
    & p { color: var(--slate-400); line-height: 1.75; }
  }

  .trip-type-card {
    background: var(--slate-800);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 1px solid var(--slate-700);
    transition: box-shadow var(--transition);

    &:hover { box-shadow: 0 25px 50px -12px rgb(59 130 246 / 0.1); }

    & .trip-type-card__image {
      height: 12rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    & .trip-type-card__body { padding: 2rem; }
    & .trip-type-card__tag {
      font-size: 0.75rem;
      font-weight: 600;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      display: inline-block;
      margin-bottom: 1rem;
    }

    & h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; color: white; }
    & > p, & .trip-type-card__body > p { color: var(--slate-400); margin-bottom: 1.5rem; line-height: 1.75; }

    & .trip-type-card__features {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
      color: var(--slate-400);

      & li {
        display: flex;
        align-items: center;
        gap: 0.75rem;
      }

      & .check {
        width: 1.25rem;
        height: 1.25rem;
        background: rgb(20 83 45 / 0.5);
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--green-400);
        font-size: 0.75rem;
        flex-shrink: 0;
      }
    }

    & .trip-type-card__best-for {
      font-size: 0.8125rem;
      color: var(--slate-400);
      font-style: italic;
      margin-top: 0.75rem;
    }

    & .trip-type-card__footer {
      padding-top: 1rem;
      border-top: 1px solid var(--slate-700);

      & p { color: var(--slate-500); font-size: 0.875rem; font-weight: 500; }
    }
  }

  /* ---- Testimonial Card ---- */
  .testimonial-card {
    background: rgb(255 255 255 / 0.1);
    backdrop-filter: blur(4px);
    border-radius: 0.75rem;
    padding: 2rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    transition: background var(--transition-fast);

    &:hover { background: rgb(255 255 255 / 0.15); }

    & .testimonial-card__stars {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      color: var(--yellow-400);
      margin-bottom: 1.25rem;
    }

    & .testimonial-card__quote {
      color: rgb(239 246 255);
      margin-bottom: 1.5rem;
      line-height: 1.75;
    }

    & .testimonial-card__author {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    & .testimonial-card__avatar {
      width: 2.5rem;
      height: 2.5rem;
      background: var(--yellow-400);
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--blue-900);
      font-weight: 700;
    }

    & .testimonial-card__name { font-weight: 600; }

    & .testimonial-card__source {
      font-size: 0.75rem;
      color: var(--slate-400);
      margin-top: 0.125rem;
    }
  }

  /* Light background testimonial cards (homepage) */
  .section--white .testimonial-card {
    background: var(--slate-50);
    border-color: var(--slate-200);

    &:hover { background: var(--slate-100); }

    & .testimonial-card__quote { color: var(--slate-700); }
    & .testimonial-card__name { color: var(--slate-900); }
    & .testimonial-card__source { color: var(--slate-500); }
  }

  /* ---- Season Calendar ---- */
  .season-table {
    background: var(--slate-800);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    border: 1px solid var(--slate-700);

    & .season-table__header {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      background: linear-gradient(to right, var(--slate-800), var(--slate-700));
      color: white;
      font-weight: 700;
      text-align: center;

      & div {
        padding: 1.25rem;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
    }

    & .season-table__rows { border-top: 1px solid var(--slate-700); }

    & .season-table__row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      text-align: center;
      padding-block: 1.25rem;
      border-top: 1px solid var(--slate-700);
      transition: background var(--transition-fast);

      &:hover { background: rgb(51 65 85 / 0.5); }
    }

    & .season-table__row--alt { background: rgb(51 65 85 / 0.3); }

    & .season-table__month { font-weight: 700; color: white; }
    & .season-table__activity { color: var(--cyan-400); font-weight: 600; }
    & .season-table__activity--dim { color: rgb(34 211 238 / 0.7); font-weight: 500; }
    & .season-table__size { color: var(--slate-400); }
  }

  .peak-badge {
    background: var(--cyan-500);
    color: var(--slate-900);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    display: inline-block;
  }

  .available-badge {
    background: rgb(20 83 45 / 0.5);
    color: var(--green-400);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-block;
  }

  .book-early-badge {
    background: rgb(124 45 18 / 0.5);
    color: var(--orange-400);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-block;
  }

  /* ---- Safety Badges ---- */
  .safety-badge {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid;
  }

  .safety-badge--green { background: rgb(22 163 74 / 0.2); color: var(--green-400); border-color: rgb(22 163 74 / 0.3); }
  .safety-badge--blue { background: rgb(37 99 235 / 0.2); color: var(--blue-400); border-color: rgb(37 99 235 / 0.3); }
  .safety-badge--red { background: rgb(220 38 38 / 0.2); color: var(--red-400); border-color: rgb(220 38 38 / 0.3); }

  /* ---- Tarpon experience & credentials ---- */
  .tarpon-feature-card {
    text-align: center;
    padding: 2rem;
    border-radius: 0.75rem;
    background: rgb(30 41 59 / 0.5);
    border: 1px solid var(--slate-700);
    transition: all var(--transition);

    &:hover { box-shadow: 0 20px 25px -5px rgb(6 182 212 / 0.2); }

    & .tarpon-feature-card__icon {
      width: 6rem;
      height: 6rem;
      background: linear-gradient(to bottom right, var(--slate-700), var(--slate-600));
      border-radius: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      box-shadow: 0 10px 15px -3px rgb(6 182 212 / 0.2);
      transition: transform var(--transition);
    }

    &:hover .tarpon-feature-card__icon { transform: scale(1.1); }
    & .tarpon-feature-card__icon svg { color: var(--cyan-400); }
    & h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: white; }
    & p { color: var(--slate-400); line-height: 1.75; }
  }

  .included-card {
    background: rgb(255 255 255 / 0.1);
    backdrop-filter: blur(4px);
    border-radius: 0.75rem;
    padding: 1.5rem;
    border: 1px solid rgb(6 182 212 / 0.2);
    text-align: center;
    transition: background var(--transition-fast);

    &:hover { background: rgb(255 255 255 / 0.2); }

    & .included-card__icon {
      display: flex;
      justify-content: center;
      margin-bottom: 0.75rem;

      & svg { color: var(--cyan-400); transition: transform var(--transition-fast); }
    }

    &:hover .included-card__icon svg { transform: scale(1.1); }
    & p { font-weight: 600; }
  }

  /* ---- Detail Table (shark, tarpon trip details) ---- */
  .detail-table {
    background: linear-gradient(to bottom, var(--gray-800), rgb(31 41 55 / 0.95));
    border-radius: 0.75rem;
    padding: 2rem;
    border: 1px solid var(--gray-700);
    box-shadow: var(--shadow-2xl);

    & h3 { font-size: 1.5rem; font-weight: 700; color: white; margin-bottom: 2rem; }

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

    & li {
      display: flex;
      justify-content: space-between;
      color: var(--gray-300);

      &:not(:last-child) { padding-bottom: 1.25rem; border-bottom: 1px solid rgb(55 65 81 / 0.5); }
    }

    & .detail-table__label { color: var(--gray-400); }
    & .detail-table__value { color: white; font-weight: 700; }
  }

  .detail-table--slate {
    background: linear-gradient(to bottom, var(--slate-800), rgb(30 41 59 / 0.95));
    border-color: var(--slate-700);

    & li:not(:last-child) { border-color: rgb(51 65 85 / 0.5); }
    & .detail-table__label { color: var(--slate-400); }
  }

  /* ---- Experience Steps (shark "What to Expect") ---- */
  .experience-step {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;

    & .experience-step__icon {
      width: 3.5rem;
      height: 3.5rem;
      background: rgb(220 38 38 / 0.2);
      border-radius: 0.375rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

      & svg { color: var(--red-400); }
    }

    & h3 { font-weight: 700; color: white; font-size: 1.25rem; margin-bottom: 0.5rem; }
    & p { line-height: 1.75; }
  }

  /* ---- Credential checklist (tarpon) ---- */
  .credential-check {
    display: flex;
    align-items: center;
    gap: 1.25rem;

    & .credential-check__icon {
      background: linear-gradient(to bottom right, var(--cyan-500), var(--cyan-600));
      width: 3rem;
      height: 3rem;
      border-radius: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.125rem;
      color: var(--slate-900);
      box-shadow: 0 10px 15px -3px rgb(6 182 212 / 0.3);
      flex-shrink: 0;
    }

    & span:last-child { font-size: 1.125rem; }
  }

  /* ---- Tarpon season indicator ---- */
  .season-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgb(30 41 59 / 0.5);
    border: 1px solid rgb(6 182 212 / 0.3);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    margin-bottom: 1.5rem;

    & .season-indicator__dot {
      width: 0.5rem;
      height: 0.5rem;
      background: var(--cyan-400);
      border-radius: 9999px;
      animation: pulse 2s infinite;
    }

    & span:last-child {
      color: var(--cyan-400);
      font-weight: 600;
      font-size: 0.875rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  /* ---- Trip Type Cards (Home page) ---- */
  .trip-type-showcase {
    overflow: hidden;

    & .trip-type-showcase__image {
      height: 12rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;

      & .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.2), transparent); }
      & svg { transition: all var(--transition); position: relative; z-index: 1; }
    }

    &:hover .trip-type-showcase__image svg { transform: scale(1.1); }

    & .trip-type-showcase__body { padding: 1.5rem; }
    & h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
    & p { color: var(--gray-600); margin-bottom: 1rem; }

    & .link-ocean {
      color: var(--ocean-600);
      font-weight: 600;
      transition: color var(--transition);
      &:hover { color: var(--ocean-500); }
    }
  }

  .trip-type-showcase__image--navy {
    background: linear-gradient(to bottom, rgb(30 41 59 / 0.6), rgb(15 23 42 / 0.8)), url("/assets/IMG_2782-70b324a3.JPG");
    background-size: cover;
    background-position: center;
    & svg { color: white; opacity: 0.9; }
    &:hover svg { color: var(--ocean-400); }
  }
  .trip-type-showcase__image--ocean {
    background: linear-gradient(to bottom, rgb(6 78 59 / 0.5), rgb(20 83 45 / 0.7)), url("/assets/IMG_3053-82548bf4.JPG");
    background-size: cover;
    background-position: center;
    & svg { color: white; opacity: 0.9; }
  }
  .trip-type-showcase__image--coral {
    background: linear-gradient(to bottom, rgb(30 41 59 / 0.5), rgb(51 65 85 / 0.7)), url("/assets/IMG_5484-0a0ad5a8.JPG");
    background-size: cover;
    background-position: center;
    & svg { color: white; opacity: 0.9; }
  }

  /* ---- Nautical Decorative Elements ---- */
  .star-divider {
    text-align: center;
    padding-block: 2rem;
    color: var(--navy-300);
    font-size: 0.625rem;
    letter-spacing: 0.75em;
    line-height: 1;

    & span { opacity: 0.5; }
  }

  .section--dark .star-divider { color: var(--navy-500); }

  .nautical-rule {
    border: none;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent,
      var(--navy-200) 20%,
      var(--navy-300) 50%,
      var(--navy-200) 80%,
      transparent
    );
    margin-block: 2rem;
    max-width: 20rem;
    margin-inline: auto;
  }

  .section--dark .nautical-rule {
    background: linear-gradient(
      to right,
      transparent,
      var(--navy-700) 20%,
      var(--navy-600) 50%,
      var(--navy-700) 80%,
      transparent
    );
  }

  /* ---- Brand Mark ---- */
  .brand-mark {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--gray-200);

    & img { height: 8rem; width: auto; margin-inline: auto; }
  }

  /* ---- About Page ---- */
  .about-content { max-width: 56rem; margin-inline: auto; }

  .about-section {
    margin-bottom: 4rem;

    & h2 { font-size: 1.875rem; font-weight: 400; margin-bottom: 2rem; }

    & .about-section__two-col {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    & .about-section__text p {
      font-size: 1.125rem;
      line-height: 1.75;
      color: var(--gray-700);
      margin-bottom: 1rem;
    }

    & .about-section__image {
      & img { width: 100%; height: auto; border-radius: 0.375rem; box-shadow: var(--shadow-lg); }
    }

    & .about-section__placeholder {
      height: 18rem;
      background: var(--gray-200);
      border-radius: 0.375rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gray-400);
      font-weight: 500;
    }
  }

  @media (min-width: 768px) {
    .about-section .about-section__two-col { flex-direction: row; }
    .about-section__col--1-3 { width: 33.333%; }
    .about-section__col--2-3 { width: 66.667%; }
  }

  .about-why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  @media (min-width: 768px) {
    .about-why-grid { grid-template-columns: repeat(2, 1fr); }
  }

  .about-why-card {
    padding: 1.5rem;

    & .about-why-card__header {
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
    }

    & .about-why-card__icon {
      width: 3rem;
      height: 3rem;
      background: var(--ocean-100);
      border-radius: 0.375rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 1rem;

      & svg { color: var(--ocean-600); }
    }

    & h3 { font-size: 1.25rem; font-weight: 700; }
    & p { color: var(--gray-600); }
  }

  .social-links {
    text-align: center;
    margin-bottom: 4rem;

    & h2 { font-size: 1.5rem; font-weight: 400; margin-bottom: 1.5rem; }

    & .social-links__icons {
      display: flex;
      justify-content: center;
      gap: 1.5rem;
    }

    & a {
      width: 3rem;
      height: 3rem;
      border-radius: 0.375rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      transition: transform var(--transition-fast);

      &:hover { transform: scale(1.1); }
    }

    & .social-links__instagram { background: linear-gradient(to bottom right, var(--purple-500), var(--pink-500)); }
    & .social-links__facebook { background: var(--blue-600); }
  }

  /* ---- Photo Gallery ---- */
  .photo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;

    & img {
      width: 100%;
      height: 16rem;
      object-fit: cover;
      border-radius: 0.5rem;
      box-shadow: var(--shadow-md);
      transition: transform var(--transition), box-shadow var(--transition);
    }

    & img:hover {
      transform: scale(1.02);
      box-shadow: var(--shadow-xl);
    }

    & .photo-grid__item {
      width: 100%;
      height: 16rem;
      object-fit: cover;
    }

    & .photo-grid__caption {
      padding: 1rem;

      & p:first-child { color: var(--gray-700); font-size: 0.875rem; }
      & p:last-child { color: var(--gray-500); font-size: 0.75rem; margin-top: 0.5rem; }
    }
  }

  .photo-grid--featured {
    & img { height: 20rem; }
  }

  .photo-grid--dark {
    & img {
      border: 1px solid rgb(255 255 255 / 0.1);
    }
    & img:hover {
      border-color: rgb(255 255 255 / 0.2);
    }
  }

  @media (min-width: 768px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }

  .instagram-link {
    display: inline-block;
    background: linear-gradient(to right, var(--purple-500), var(--pink-500));
    color: white;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    transition: all var(--transition);

    &:hover {
      background: linear-gradient(to right, var(--purple-600), var(--pink-600));
      transform: scale(1.05);
    }
  }

  /* ---- About CTA Card ---- */
  .cta-card {
    background: linear-gradient(to bottom right, var(--navy-900), var(--navy-800), var(--navy-900));
    color: white;
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;

    & h2 { font-size: 1.5rem; font-weight: 400; margin-bottom: 1rem; letter-spacing: -0.025em; }
    & p { color: var(--navy-200); margin-bottom: 1.5rem; }
  }

  /* ---- Safety bar (shark page) ---- */
  .safety-bar {
    padding-block: 3rem;
    background: rgb(31 41 55 / 0.5);
    border-top: 1px solid rgb(55 65 81 / 0.5);
    border-bottom: 1px solid rgb(55 65 81 / 0.5);

    & .safety-bar__inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.5rem;
    }

    & h2 { font-size: 1.25rem; font-weight: 400; color: white; margin-bottom: 0.25rem; }
    & p { color: var(--gray-400); font-size: 0.875rem; }

    & .safety-bar__badges {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
      justify-content: center;
    }
  }

  @media (min-width: 768px) {
    .safety-bar .safety-bar__inner {
      flex-direction: row;
      justify-content: space-between;
    }
  }
}

/* ================================================================
   LAYOUTS
   ================================================================ */
@layer layouts {
  .container {
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
  }

  @media (min-width: 640px) {
    .container { padding-inline: 1.5rem; }
  }

  @media (min-width: 1024px) {
    .container { padding-inline: 2rem; }
  }

  .container--sm { max-width: 42rem; }
  .container--md { max-width: 56rem; }
  .container--lg { max-width: 80rem; }

  .grid-2 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
  .grid-3 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
  .grid-4 { display: grid; grid-template-columns: 1fr; gap: 2rem; }

  @media (min-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
  }

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

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

  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

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

  .stack { display: flex; flex-direction: column; }
  .stack--sm { gap: 0.5rem; }
  .stack--md { gap: 1rem; }
  .stack--lg { gap: 2rem; }
  .stack--xl { gap: 3rem; }

  .two-col-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
  }

  @media (min-width: 1024px) {
    .two-col-layout { grid-template-columns: repeat(2, 1fr); }
  }

  .max-w-2xl { max-width: 42rem; }
  .max-w-3xl { max-width: 48rem; }
  .max-w-4xl { max-width: 56rem; }
  .max-w-5xl { max-width: 64rem; }
}

/* ================================================================
   UTILITIES
   ================================================================ */
@layer utilities {
  .hidden { display: none; }
  .block { display: block; }
  .inline-block { display: inline-block; }
  .overflow-hidden { overflow: hidden; }

  .text-center { text-align: center; }
  .text-right { text-align: right; }
  .text-sm { font-size: 0.875rem; }
  .text-xs { font-size: 0.75rem; }
  .text-lg { font-size: 1.125rem; }
  .text-xl { font-size: 1.25rem; }
  .text-2xl { font-size: 1.5rem; }
  .text-3xl { font-size: 1.875rem; }
  .font-bold { font-weight: 700; }
  .font-semibold { font-weight: 600; }
  .font-medium { font-weight: 500; }

  .text-white { color: white; }
  .text-muted { color: var(--gray-500); }
  .text-light { color: var(--gray-400); }
  .text-ocean { color: var(--ocean-600); }
  .text-coral { color: var(--coral-500); }
  .text-red { color: var(--red-500); }
  .text-cyan { color: var(--cyan-400); }
  .text-amber { color: var(--amber-400); }

  .mb-0 { margin-bottom: 0; }
  .mb-1 { margin-bottom: 0.25rem; }
  .mb-2 { margin-bottom: 0.5rem; }
  .mb-4 { margin-bottom: 1rem; }
  .mb-6 { margin-bottom: 1.5rem; }
  .mb-8 { margin-bottom: 2rem; }
  .mt-2 { margin-top: 0.5rem; }
  .mt-4 { margin-top: 1rem; }
  .mt-8 { margin-top: 2rem; }

  .w-full { width: 100%; }
  .mx-auto { margin-inline: auto; }

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

  .mb-3 { margin-bottom: 0.75rem; }
}

/* ================================================================
   CALENDAR COMPONENTS
   ================================================================ */
@layer components {
  /* Admin Calendar Layout */
  .admin-calendar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .calendar-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;

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

  .calendar-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* Calendar Navigation */
  .calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
  }

  .calendar-nav__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--navy-900);
  }

  .calendar-nav__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    color: var(--gray-700);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition-fast);

    &:hover {
      background: var(--gray-50);
      border-color: var(--gray-300);
    }
  }

  /* Calendar Grid */
  .calendar-grid {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .calendar-grid__header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--navy-800);
    color: white;
  }

  .calendar-grid__header-cell {
    padding: 0.75rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .calendar-grid__week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--gray-100);

    &:last-child {
      border-bottom: none;
    }
  }

  /* Calendar Day */
  .calendar-day {
    min-height: 100px;
    padding: 0.5rem;
    border-right: 1px solid var(--gray-100);
    background: white;
    cursor: pointer;
    transition: background var(--transition-fast);

    &:last-child {
      border-right: none;
    }

    &:hover:not(.calendar-day--past):not(.calendar-day--other-month) {
      background: var(--gray-50);
    }
  }

  .calendar-day--other-month {
    background: var(--gray-50);
    opacity: 0.5;
    cursor: default;
  }

  .calendar-day--today {
    background: var(--ocean-50);
    border: 2px solid var(--ocean-400);
  }

  .calendar-day--past {
    background: var(--gray-100);
    cursor: default;

    .calendar-day__number {
      color: var(--gray-400);
    }
  }

  .calendar-day--blackout {
    background: var(--red-50);
    border-left: 3px solid var(--red-400);
  }

  .calendar-day--selected {
    outline: 2px solid var(--coral-500);
    outline-offset: -2px;
  }

  .calendar-day--available {
    border-left: 3px solid var(--green-400);
  }

  .calendar-day--limited {
    border-left: 3px solid var(--amber-400);
  }

  .calendar-day--full {
    border-left: 3px solid var(--gray-400);
  }

  .calendar-day__number {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.25rem;
  }

  .calendar-day__status {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    display: inline-block;
  }

  .calendar-day__status--blackout {
    background: var(--red-100);
    color: var(--red-700);
  }

  .calendar-day__trips {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
  }

  .calendar-day__trip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.375rem;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    transition: background var(--transition-fast);

    &:hover {
      background: var(--gray-200);
    }
  }

  .calendar-day__trip.calendar-day--available {
    background: var(--green-100);
    border-left: 2px solid var(--green-500);
  }

  .calendar-day__trip.calendar-day--full {
    background: var(--gray-200);
    border-left: 2px solid var(--gray-400);
  }

  .calendar-day__trip.calendar-day--cancelled {
    background: var(--red-100);
    border-left: 2px solid var(--red-400);
    text-decoration: line-through;
    opacity: 0.6;
  }

  .calendar-day__trip-type {
    font-weight: 600;
    color: var(--gray-700);
  }

  .calendar-day__trip-spots {
    color: var(--gray-500);
  }

  .calendar-day__more {
    font-size: 0.625rem;
    color: var(--gray-500);
    text-align: center;
    padding: 0.125rem;
  }

  .calendar-day__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 50px;
  }

  .calendar-day__add-trip {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border-radius: 50%;
    color: var(--gray-400);
    font-size: 1rem;
    font-weight: 300;
    transition: all var(--transition-fast);
    opacity: 0;

    .calendar-day:hover & {
      opacity: 1;
    }

    &:hover {
      background: var(--coral-500);
      color: white;
    }
  }

  /* Calendar Legend */
  .calendar-legend {
    display: flex;
    gap: 1.5rem;
    padding: 1rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
  }

  .calendar-legend__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--gray-600);
  }

  .calendar-legend__dot {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid transparent;
  }

  .calendar-legend__dot--available {
    background: var(--green-400);
  }

  .calendar-legend__dot--limited {
    background: var(--amber-400);
  }

  .calendar-legend__dot--full {
    background: var(--gray-400);
  }

  .calendar-legend__dot--blackout {
    background: var(--red-400);
  }

  /* Calendar Sidebar */
  .calendar-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .calendar-sidebar__section {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
  }

  .calendar-sidebar__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--navy-800);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--gray-100);
  }

  /* Blackout Form */
  .blackout-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Blackout List */
  .blackout-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .blackout-list__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--red-50);
    border-radius: var(--radius);
    border-left: 3px solid var(--red-400);
  }

  .blackout-list__info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .blackout-list__date {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-800);
  }

  .blackout-list__reason {
    font-size: 0.75rem;
    color: var(--gray-500);
  }

  .blackout-list__remove {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--gray-400);
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);

    &:hover {
      background: var(--red-100);
      color: var(--red-600);
    }
  }

  /* Customer Calendar (public-facing) */
  .booking-calendar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
  }

  .booking-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .booking-calendar__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--navy-900);
  }

  .booking-calendar__nav {
    display: flex;
    gap: 0.5rem;
  }

  .booking-calendar__nav-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    color: var(--gray-600);
    cursor: pointer;
    transition: all var(--transition-fast);

    &:hover:not(:disabled) {
      background: var(--gray-50);
      border-color: var(--gray-300);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  .booking-calendar__grid {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .booking-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--navy-800);
    color: white;
  }

  .booking-calendar__weekday {
    padding: 0.75rem 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .booking-calendar__week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--gray-100);

    &:last-child {
      border-bottom: none;
    }
  }

  .booking-calendar__day {
    padding: 0.75rem 0.5rem;
    text-align: center;
    border-right: 1px solid var(--gray-100);
    min-height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: background var(--transition-fast);

    &:last-child {
      border-right: none;
    }

    &:hover:not(.booking-calendar__day--disabled) {
      background: var(--gray-50);
    }
  }

  .booking-calendar__day--other-month {
    opacity: 0.3;
    cursor: default;
  }

  .booking-calendar__day--disabled {
    background: var(--gray-100);
    cursor: not-allowed;
  }

  .booking-calendar__day--today {
    background: var(--ocean-50);

    .booking-calendar__day-number {
      background: var(--ocean-500);
      color: white;
    }
  }

  .booking-calendar__day--available {
    cursor: pointer;

    &:hover {
      background: var(--green-50);
    }
  }

  .booking-calendar__day--selected {
    background: var(--coral-50);
    outline: 2px solid var(--coral-500);
    outline-offset: -2px;
  }

  .booking-calendar__day-number {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 50%;
  }

  .booking-calendar__day-status {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
  }

  .booking-calendar__day-status--available {
    background: var(--green-100);
    color: var(--green-700);
  }

  .booking-calendar__day-status--limited {
    background: var(--amber-100);
    color: var(--amber-700);
  }

  .booking-calendar__day-status--full {
    background: var(--gray-200);
    color: var(--gray-600);
  }

  /* Selected Date Trips */
  .booking-calendar__selected-trips {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
  }

  .booking-calendar__selected-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy-800);
    margin-bottom: 1rem;
  }

  .booking-calendar__trip-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .booking-calendar__trip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    transition: all var(--transition-fast);

    &:hover {
      border-color: var(--coral-300);
      box-shadow: var(--shadow-sm);
    }
  }

  .booking-calendar__trip-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .booking-calendar__trip-name {
    font-weight: 600;
    color: var(--navy-800);
  }

  .booking-calendar__trip-details {
    font-size: 0.875rem;
    color: var(--gray-500);
  }

  .booking-calendar__trip-action {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--coral-500);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius);
    transition: background var(--transition-fast);

    &:hover {
      background: var(--coral-600);
    }
  }

  /* Mobile responsiveness for calendars */
  @media (max-width: 640px) {
    .calendar-day {
      min-height: 60px;
      padding: 0.25rem;
    }

    .calendar-day__number {
      font-size: 0.75rem;
    }

    .calendar-day__trips {
      display: none;
    }

    .calendar-day--available::after,
    .calendar-day--limited::after,
    .calendar-day--full::after {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-top: 0.25rem;
    }

    .calendar-day--available::after {
      background: var(--green-400);
    }

    .calendar-day--limited::after {
      background: var(--amber-400);
    }

    .calendar-day--full::after {
      background: var(--gray-400);
    }

    .booking-calendar__day {
      min-height: 50px;
      padding: 0.5rem 0.25rem;
    }

    .booking-calendar__day-number {
      width: 24px;
      height: 24px;
      font-size: 0.75rem;
    }

    .booking-calendar__day-status {
      font-size: 0.5rem;
      padding: 0.125rem 0.25rem;
    }

    .calendar-legend {
      flex-wrap: wrap;
      gap: 1rem;
    }
  }
}

/* ================================================================
   UI IMPROVEMENTS - Hero Overlays, Trust Badges, Captain Bio
   Based on UI_IMAGE_REVIEW.md recommendations
   ================================================================ */
@layer components {

  /* ---- Hero Overlay for Text Readability ---- */
  .hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.4) 40%,
      rgba(0, 0, 0, 0.5) 70%,
      rgba(0, 0, 0, 0.7) 100%
    );
    z-index: 1;
  }

  /* Enhanced text shadows for hero content */
  .hero h1,
  .hero .hero__text,
  .hero .hero__kicker {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
  }

  .hero--shark h1,
  .hero--tarpon h1 {
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.6), 0 6px 12px rgba(0, 0, 0, 0.4);
  }

  /* Ensure hero content is above overlay */
  .hero .hero__content {
    z-index: 2;
  }

  /* ---- Trust Badges Component ---- */
  .trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem 1rem;
    border-bottom: 1px solid var(--gray-200);
  }

  .trust-badges--light {
    background: white;

    & .trust-badge-item__icon { color: var(--ocean-600); }
    & .trust-badge-item__label { color: var(--gray-900); }
    & .trust-badge-item__detail { color: var(--gray-500); }
  }

  .trust-badges--dark {
    background: var(--gray-900);
    border-bottom-color: var(--gray-800);

    & .trust-badge-item__icon { color: var(--cyan-400); }
    & .trust-badge-item__label { color: white; }
    & .trust-badge-item__detail { color: var(--gray-400); }
  }

  .trust-badges--compact {
    padding: 1rem;
    gap: 1rem;
  }

  .trust-badge-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: transform var(--transition-fast);

    &:hover { transform: translateY(-2px); }
  }

  .trust-badge-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .trust-badge-item__text {
    display: flex;
    flex-direction: column;
  }

  .trust-badge-item__label {
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.2;
  }

  .trust-badge-item__detail {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .trust-badges--compact .trust-badge-item__text {
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
  }

  .trust-badges--compact .trust-badge-item__detail {
    display: none;
  }

  /* ---- Captain Bio Component ---- */

  /* Inline version for hero sections */
  .captain-bio-inline {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .captain-bio-inline__image {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.5);
    flex-shrink: 0;

    & img { width: 100%; height: 100%; object-fit: cover; }
  }

  .captain-bio-inline__name {
    font-weight: 700;
    font-size: 1rem;
    color: white;
    margin-bottom: 0.125rem;
  }

  .captain-bio-inline__credentials {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
  }

  /* Compact card version */
  .captain-bio-compact {
    background: var(--gray-800);
    border-radius: 0.75rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 2rem auto;
    max-width: 56rem;

    @media (min-width: 768px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .captain-bio-compact__image {
    width: 8rem;
    height: 8rem;
    border-radius: 0.75rem;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: var(--shadow-lg);

    & img { width: 100%; height: 100%; object-fit: cover; }

    @media (min-width: 768px) {
      width: 10rem;
      height: 10rem;
    }
  }

  .captain-bio-compact__content {
    flex: 1;

    & h3 {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--cyan-400);
      margin-bottom: 0.5rem;
    }
  }

  .captain-bio-compact__name {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.75rem;
  }

  .captain-bio-compact__bio {
    color: var(--gray-300);
    line-height: 1.75;
    margin-bottom: 1rem;
  }

  .captain-bio-compact__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    & span {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      font-size: 0.875rem;
      color: var(--gray-400);

      & svg { color: var(--green-400); }
    }
  }

  /* Full section version */
  .captain-bio-section {
    background: linear-gradient(to bottom, var(--gray-50), white);
    padding: 4rem 0;
  }

  .captain-bio {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;

    @media (min-width: 768px) {
      grid-template-columns: 280px 1fr;
    }

    @media (min-width: 1024px) {
      grid-template-columns: 320px 1fr;
    }
  }

  .captain-bio__image {
    & img {
      width: 100%;
      height: auto;
      border-radius: 0.75rem;
      box-shadow: var(--shadow-2xl);
    }
  }

  .captain-bio__content {
    & h2 {
      font-size: clamp(1.75rem, 4vw, 2.25rem);
      font-weight: 400;
      color: var(--navy-900);
      margin-bottom: 1.25rem;
    }
  }

  .captain-bio__kicker {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ocean-600);
    margin-bottom: 0.75rem;
  }

  .captain-bio__intro {
    font-size: 1.25rem;
    color: var(--gray-700);
    line-height: 1.75;
    margin-bottom: 1rem;
  }

  .captain-bio__text {
    color: var(--gray-600);
    line-height: 1.75;
    margin-bottom: 2rem;
  }

  .captain-bio__credentials {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;

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

  .captain-bio__credential {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .captain-bio__credential-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--ocean-100);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    & svg { color: var(--ocean-600); }
  }

  .captain-bio__credential-label {
    display: block;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--gray-900);
  }

  .captain-bio__credential-detail {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-500);
  }

  /* ---- Urgency/Availability Badges ---- */
  .trip-card__urgency {
    margin-bottom: 0.75rem;
  }

  .trip-card__urgency--critical {
    animation: pulse-urgent 2s infinite;
  }

  @keyframes pulse-urgent {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
  }

  .urgency-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
  }

  .urgency-badge--critical {
    background: var(--red-100);
    color: var(--red-700);
    border: 1px solid var(--red-200);

    & svg { color: var(--red-500); }
  }

  .urgency-badge--warning {
    background: rgb(254 243 199);
    color: var(--yellow-800);
    border: 1px solid rgb(253 224 71);

    & svg { color: var(--yellow-600); }
  }

  .urgency-badge--full {
    background: var(--gray-100);
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
  }

  /* ---- Button Hierarchy Improvements ---- */
  .btn--primary {
    transform: scale(1);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  }

  .btn--lg.btn--primary {
    padding: 1.125rem 2.5rem;
    font-size: 1.125rem;
  }

  .btn-outline-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    padding: 0.875rem 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: all var(--transition);
    cursor: pointer;
    text-align: center;

    &:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.6);
      color: white;
    }
  }

  .hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
  }

  /* Improved color contrast for WCAG AA compliance */
  .text-cyan {
    color: var(--cyan-500); /* Darker for better contrast on light bg */
  }

  .section--dark .text-cyan,
  .section--tarpon-dark .text-cyan,
  .section--shark-dark .text-cyan {
    color: var(--cyan-400); /* Lighter on dark backgrounds */
  }

  .text-red {
    color: var(--red-600); /* Darker for better contrast */
  }

  .section--dark .text-red,
  .section--shark-dark .text-red {
    color: var(--red-400); /* Lighter on dark backgrounds */
  }

  /* ================================================================
     BOAT INFO SECTION
     ================================================================ */
  .boat-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    background: var(--slate-800);
    border-radius: 0.75rem;
    padding: 2rem;
    border: 1px solid var(--slate-700);
  }

  @media (min-width: 768px) {
    .boat-info {
      grid-template-columns: 1fr 1fr;
    }
  }

  .boat-info__gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;

    & img {
      width: 100%;
      height: 12rem;
      object-fit: cover;
      border-radius: 0.5rem;
      border: 1px solid var(--slate-600);
    }

    & img:first-child {
      height: 16rem;
    }
  }

  @media (min-width: 640px) {
    .boat-info__gallery {
      grid-template-columns: repeat(2, 1fr);

      & img:first-child {
        grid-column: span 2;
      }
    }
  }

  .boat-info__content {
    & h3 {
      font-size: 1.5rem;
      font-weight: 700;
      color: white;
      margin-bottom: 0.5rem;
    }

    & .boat-info__subtitle {
      color: var(--slate-400);
      margin-bottom: 1.5rem;
    }
  }

  .boat-info__specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .boat-info__spec-item {
    & .boat-info__spec-label {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--slate-500);
      margin-bottom: 0.25rem;
    }

    & .boat-info__spec-value {
      color: white;
      font-weight: 600;
    }
  }

  .boat-info__features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .boat-info__feature {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--slate-700);
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    color: var(--slate-300);

    & svg {
      color: var(--green-400);
      width: 1rem;
      height: 1rem;
    }
  }

  /* Compact variant */
  .boat-info--compact {
    padding: 1.5rem;
    gap: 1.5rem;

    & .boat-info__gallery img {
      height: 10rem;
    }

    & .boat-info__gallery img:first-child {
      height: 10rem;
    }

    & h3 {
      font-size: 1.25rem;
    }
  }

  /* Site color variants */
  .boat-info--shark {
    & .boat-info__feature svg { color: var(--red-400); }
  }

  .boat-info--tarpon {
    & .boat-info__feature svg { color: var(--cyan-400); }
  }

  .boat-info--guides {
    & .boat-info__feature svg { color: var(--amber-400); }
  }

  /* ================================================================
     FAQ ACCORDION
     ================================================================ */
  .faq-section {
    max-width: 56rem;
    margin-inline: auto;
  }

  .faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .faq-item {
    background: var(--slate-800);
    border-radius: 0.75rem;
    border: 1px solid var(--slate-700);
    overflow: hidden;
    transition: border-color var(--transition);

    &:hover {
      border-color: var(--slate-600);
    }
  }

  .faq-item--open {
    border-color: var(--slate-600);
  }

  .faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    gap: 1rem;

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: 2px solid var(--cyan-400);
      outline-offset: -2px;
    }
  }

  .faq-item__icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--slate-400);
    transition: transform var(--transition);

    & svg {
      width: 1.25rem;
      height: 1.25rem;
    }
  }

  .faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }

  .faq-item__answer-inner {
    padding: 0 1.5rem 1.5rem;
    color: var(--slate-300);
    line-height: 1.75;

    & p + p {
      margin-top: 1rem;
    }

    & a {
      color: var(--cyan-400);
      text-decoration: underline;
      text-underline-offset: 2px;

      &:hover {
        color: var(--cyan-300);
      }
    }
  }

  /* Site color variants */
  .faq-list--shark {
    & .faq-item__question:hover { color: var(--red-400); }
    & .faq-item--open .faq-item__question { color: var(--red-400); }
    & .faq-item__answer-inner a { color: var(--red-400); }
    & .faq-item__answer-inner a:hover { color: var(--red-300); }
  }

  .faq-list--tarpon {
    & .faq-item__question:hover { color: var(--cyan-400); }
    & .faq-item--open .faq-item__question { color: var(--cyan-400); }
  }

  .faq-list--guides {
    & .faq-item__question:hover { color: var(--amber-400); }
    & .faq-item--open .faq-item__question { color: var(--amber-400); }
    & .faq-item__answer-inner a { color: var(--amber-400); }
    & .faq-item__answer-inner a:hover { color: var(--amber-300); }
  }

  /* ================================================================
     FISH COMMANDER BADGE
     ================================================================ */
  .fish-commander-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(to right, var(--slate-800), var(--slate-700));
    border-radius: 0.75rem;
    border: 1px solid var(--slate-600);
    margin-top: 2rem;
    transition: border-color var(--transition);

    &:hover {
      border-color: var(--slate-500);
    }

    & .fish-commander-badge__icon {
      width: 3rem;
      height: 3rem;
      background: var(--ocean-600);
      border-radius: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;

      & svg {
        color: white;
        width: 1.5rem;
        height: 1.5rem;
      }
    }

    & .fish-commander-badge__content {
      flex: 1;

      & .fish-commander-badge__label {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--slate-400);
        margin-bottom: 0.125rem;
      }

      & .fish-commander-badge__title {
        font-weight: 700;
        color: white;
      }
    }

    & .fish-commander-badge__arrow {
      color: var(--slate-400);
      transition: transform var(--transition), color var(--transition);
    }

    &:hover .fish-commander-badge__arrow {
      transform: translateX(4px);
      color: white;
    }
  }

  .fish-commander-badge--inline {
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;

    & .fish-commander-badge__icon {
      width: 2.5rem;
      height: 2.5rem;
    }
  }

  /* ================================================================
     TRIPADVISOR PROOF
     ================================================================ */
  .ta-proof {
    text-align: center;
  }

  .ta-proof__stars {
    color: #00aa6c;
    letter-spacing: 0.05em;
  }

  .ta-proof--badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    background: rgba(0, 170, 108, 0.08);
    border: 1px solid rgba(0, 170, 108, 0.2);

    & .ta-proof__stars { font-size: 1.25rem; }
    & .ta-proof__text { font-size: 0.9375rem; color: var(--gray-700); }
    & .ta-proof__rank { font-size: 0.8125rem; color: var(--gray-500); font-style: italic; }
  }

  .ta-proof--card {
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    background: rgba(0, 170, 108, 0.06);
    border: 1px solid rgba(0, 170, 108, 0.15);

    & .ta-proof__header {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      justify-content: center;
    }

    & .ta-proof__rating { display: flex; align-items: center; gap: 0.5rem; }
    & .ta-proof__score { font-size: 2rem; font-weight: 700; color: #00aa6c; }
    & .ta-proof__stars { font-size: 1.125rem; }
    & .ta-proof__meta { text-align: left; }
    & .ta-proof__count { font-size: 0.9375rem; font-weight: 600; color: var(--gray-700); }
    & .ta-proof__rank { font-size: 0.8125rem; color: var(--gray-500); font-style: italic; margin-top: 0.125rem; }
  }

  /* Dark variant for satellite pages */
  .section--shark-dark .ta-proof--card,
  .section--tarpon-dark .ta-proof--card,
  .section--guides-dark .ta-proof--card,
  .section--dark .ta-proof--card {
    background: rgba(0, 170, 108, 0.1);
    border-color: rgba(0, 170, 108, 0.25);

    & .ta-proof__count { color: var(--gray-200); }
    & .ta-proof__rank { color: var(--gray-400); }
  }

  .section--shark-dark .ta-proof--badge,
  .section--tarpon-dark .ta-proof--badge,
  .section--guides-dark .ta-proof--badge,
  .section--dark .ta-proof--badge {
    background: rgba(0, 170, 108, 0.1);
    border-color: rgba(0, 170, 108, 0.25);

    & .ta-proof__text { color: var(--gray-200); }
    & .ta-proof__rank { color: var(--gray-400); }
  }

  /* ================================================================
     MORE TRIPS SECTION
     ================================================================ */
  .more-trips {
    padding: 3rem 0;
    border-top: 1px solid var(--slate-700);
  }

  .more-trips__header {
    text-align: center;
    margin-bottom: 2rem;

    & p {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--slate-400);
      margin-bottom: 0.5rem;
    }

    & h3 {
      font-size: 1.5rem;
      font-weight: 700;
      color: white;
    }
  }

  .more-trips__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  @media (min-width: 768px) {
    .more-trips__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .more-trips__card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--slate-800);
    border-radius: 0.75rem;
    border: 1px solid var(--slate-700);
    transition: all var(--transition);
    text-decoration: none;

    &:hover {
      border-color: var(--slate-500);
      transform: translateY(-2px);
    }
  }

  .more-trips__card-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    & svg {
      width: 1.5rem;
      height: 1.5rem;
    }
  }

  .more-trips__card-icon--shark {
    background: rgb(127 29 29 / 0.5);
    & svg { color: var(--red-400); }
  }

  .more-trips__card-icon--tarpon {
    background: rgb(8 145 178 / 0.3);
    & svg { color: var(--cyan-400); }
  }

  .more-trips__card-icon--guides {
    background: rgb(180 83 9 / 0.3);
    & svg { color: var(--amber-400); }
  }

  .more-trips__card-content {
    & .more-trips__card-title {
      font-weight: 600;
      color: white;
      margin-bottom: 0.125rem;
    }

    & .more-trips__card-desc {
      font-size: 0.875rem;
      color: var(--slate-400);
    }
  }

  /* ================================================================
     PHOTO LABELS
     ================================================================ */
  .photo-item {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
  }

  .photo-item__image {
    width: 100%;
    height: 16rem;
    object-fit: cover;
    transition: transform var(--transition);
  }

  .photo-item:hover .photo-item__image {
    transform: scale(1.05);
  }

  .photo-label {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    padding: 0.375rem 0.75rem;
    background: rgb(0 0 0 / 0.7);
    backdrop-filter: blur(4px);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .photo-label--tarpon {
    background: rgb(8 145 178 / 0.9);
  }

  .photo-label--redfish {
    background: rgb(194 65 12 / 0.9);
  }

  .photo-label--trout {
    background: rgb(22 163 74 / 0.9);
  }

  .photo-label--shark {
    background: rgb(127 29 29 / 0.9);
  }

  .photo-label--cobia {
    background: rgb(51 65 85 / 0.9);
  }

  .photo-label--flounder {
    background: rgb(120 53 15 / 0.9);
  }

  /* ================================================================
     TESTIMONIALS (reusable partial)
     ================================================================ */
  .testimonials-section {
    position: relative;
  }

  .testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

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

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

  /* Site-specific testimonial avatars */
  .testimonial-card--shark .testimonial-card__avatar {
    background: var(--red-500);
  }

  .testimonial-card--tarpon .testimonial-card__avatar {
    background: var(--cyan-500);
  }

  .testimonial-card--guides .testimonial-card__avatar {
    background: var(--amber-500);
  }

  /* ================================================================
     SEASON CALENDAR (reusable partial)
     ================================================================ */
  .season-calendar {
    max-width: 56rem;
    margin-inline: auto;
  }

  /* Site-specific calendar badges */
  .season-table--shark {
    & .peak-badge {
      background: var(--red-500);
    }
  }

  .season-table--guides {
    & .peak-badge {
      background: var(--amber-500);
      color: white;
    }
  }
}