/*
  MacroDivers global stylesheet
  =============================

  This file now treats the reusable design system as the source of truth for
  layout, cards, grids, FAQ sections and return links. Page-specific selectors
  should only handle genuinely unique content such as a destination gallery,
  hero image assignment or specialist nudibranch diagram.
*/

/* =========================================================
   1. Design tokens
   ========================================================= */
:root {
  --navy: #061a31;
  --navy2: #092846;
  --teal: #34c6d3;
  --coral: #ff7f6a;
  --white: #fff;
  --soft: #d8e6ec;
  --muted: #93aab5;

  --md-bg: #061722;
  --md-bg-deep: #031018;
  --md-section: #071d2a;
  --md-section-soft: #082332;
  --md-card: rgba(255, 255, 255, 0.055);
  --md-card-strong: rgba(255, 255, 255, 0.075);
  --md-border: rgba(255, 255, 255, 0.11);
  --md-border-teal: rgba(52, 198, 211, 0.35);
  --md-teal: var(--teal);
  --md-teal-soft: rgba(52, 198, 211, 0.14);
  --md-text: #f4fbfd;
  --md-muted: #c8dbe1;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  --md-page-gutter: clamp(1.25rem, 6vw, 6rem);
  --md-content-narrow: 760px;
  --md-content-medium: 960px;
  --md-content-wide: 1120px;

  --radius-sm: 0.5rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.25rem;
  --radius-card: 1.35rem;

  --shadow-card:
    0 18px 40px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-card-hover:
    0 24px 55px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(52, 198, 211, 0.10),
    0 0 28px rgba(52, 198, 211, 0.09);
  --transition-card:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

/* =========================================================
   2. Reset and base elements
   ========================================================= */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  margin: 0;
  background: var(--navy);
  color: var(--soft);
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  line-height: 1.6;
}
.serif,
h1,
h2,
h3,
.brand {
  font-family: Georgia, "Times New Roman", serif;
}
a {
  color: inherit;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   2a. Subtle movement and editorial notes
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on-scroll {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.7s ease,
      transform 0.7s ease;
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  .reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .gallery-item img,
  .card img,
  .home-intro-photo-card img,
  .gear-photo img {
    transition:
      transform 0.7s ease,
      filter 0.7s ease;
  }

  .gallery-item:hover img,
  .gallery-item:focus-within img,
  .card:hover img,
  .card:focus-within img,
  .home-intro-photo-card:hover img,
  .gear-photo:hover img {
    transform: scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.field-note,
.editorial-note {
  margin: clamp(1.25rem, 3vw, 2rem) 0;
  padding: clamp(1.1rem, 2.4vw, 1.55rem);
  border: 1px solid rgba(52, 198, 211, 0.24);
  border-left: 4px solid var(--teal);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(52, 198, 211, 0.12), rgba(255, 127, 106, 0.055)),
    rgba(255, 255, 255, 0.035);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}

.field-note__label,
.editorial-note__label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--teal);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.field-note p,
.editorial-note p {
  margin: 0;
}

.contact-social-section {
  text-align: center;
  background: linear-gradient(180deg, rgba(3, 16, 24, 0.35), rgba(7, 29, 42, 0.72));
}

.contact-social-inner {
  max-width: var(--md-content-wide);
  margin-inline: auto;
}

.contact-social-header {
  max-width: 760px;
  margin-inline: auto;
}

.contact-card-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-lg);
  margin-block-start: var(--space-lg);
  flex-wrap: wrap;
}

.contact-card {
  flex: 1 1 320px;
  max-width: 460px;
  min-width: 280px;
  text-align: left;
  padding: var(--space-lg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.contact-card-label,
.contact-card__eyebrow {
  margin: 0 0 var(--space-sm);
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
}

.contact-card h3 {
  margin: 0 0 var(--space-sm);
}

.contact-card p {
  margin: 0;
}

.contact-role,
.contact-card > p:not(.contact-card-label):not(.contact-card__eyebrow) {
  margin: 0 0 var(--space-md);
  color: var(--md-muted);
  line-height: 1.65;
}

.contact-link-list {
  display: grid;
  gap: var(--space-sm);
}

.contact-link-item,
.contact-link-list div,
.contact-link-list p {
  margin: 0;
}

.contact-link-list dt,
.contact-link-list span {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  margin-block-end: 0.15rem;
}

.contact-link-list dd,
.contact-link-list p {
  margin: 0;
}

.contact-link-list a,
.social-link-row a,
.contact-follow-row a {
  display: inline-flex;
  width: fit-content;
  color: #ffffff;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-link-list a:hover,
.contact-link-list a:focus,
.social-link-row a:hover,
.social-link-row a:focus,
.contact-follow-row a:hover,
.contact-follow-row a:focus {
  color: var(--teal);
}

.social-follow-block,
.contact-follow-block {
  margin-block-start: var(--space-xl);
  text-align: center;
}

.social-follow-title,
.social-follow-block p,
.contact-follow-block p {
  margin: 0 0 var(--space-sm);
  font-weight: 700;
}

.social-link-row,
.contact-follow-row {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.social-link-row a,
.contact-follow-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(43, 224, 230, 0.45);
  border-radius: 999px;
  text-decoration: none;
}

.contact-trust-note {
  max-width: 760px;
  margin: var(--space-md) auto 0;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 760px) {
  .contact-card-grid {
    flex-direction: column;
    align-items: center;
  }

  .contact-card {
    width: 100%;
    max-width: 520px;
    padding: var(--space-md);
  }
}

/* =========================================================
   3. Header and navigation
   ========================================================= */
#site-header,
#site-footer {
  display: contents;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 5vw;
  background: linear-gradient(
    180deg,
    rgba(6, 26, 49, 0.9),
    rgba(6, 26, 49, 0.35),
    transparent
  );
  backdrop-filter: blur(10px);
}

.brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  line-height: 1;
}

.brand::before {
  content: none !important;
  display: none !important;
}

.brand-icon {
  display: block;
  width: 90px;
  height: auto;
  flex: 0 0 auto;
  opacity: 1;
}

.brand-text {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 47px;
}

.brand-wordmark {
  display: block;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 1.48rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

.brand-macro {
  color: #34c6d3;
}

.brand-divers {
  color: #ffffff;
}

.brand-tagline {
  display: inline-flex;
  align-items: center;
  font-family: "Lato", "Calibri", Arial, sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #34c6d3;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .brand-icon {
    width: 70px;
  }

  .brand-wordmark {
    font-size: 1.22rem;
  }

  .brand-tagline {
    font-size: 0.5rem;
    letter-spacing: 0.2em;
  }
}

@media (max-width: 580px) {
  .brand-icon {
    width: 58px;
  }

  .brand-wordmark {
    font-size: 1.1rem;
  }

  .brand-tagline {
    display: none;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav > a,
.nav-dropdown > a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  color: #d9f4f7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.22s ease;
}

.nav > a::after,
.nav-dropdown > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.45rem;
  width: 0;
  height: 2px;
  background: var(--teal);
  transition: width 0.22s ease;
}

.nav > a:hover,
.nav-dropdown > a:hover,
.dropdown-menu a:hover {
  color: var(--teal);
}

.nav > a:hover::after,
.nav-dropdown > a:hover::after {
  width: 100%;
}

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  padding: 10px 0;
  background: rgba(6, 26, 49, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38);
  z-index: 100;
}

.dropdown-menu a {
  display: block;
  padding: 10px 16px;
  color: #d9f4f7;
  white-space: nowrap;
  text-decoration: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: none;
}

.dropdown-menu a:hover {
  background: rgba(52, 198, 211, 0.12);
}

.dropdown-menu hr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin: 0.8rem 0;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  display: block;
}

.menu-toggle {
  display: none;
  margin-left: auto;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 9px 14px;
  font: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
/* Home page hero. */
.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  background:
    linear-gradient(
      90deg,
      rgba(6, 26, 49, 0.95),
      rgba(6, 26, 49, 0.55),
      rgba(6, 26, 49, 0.85)
    ),
    url("assets/images/glossodoris-atromarginata.webp") center/cover no-repeat;
  padding: 120px 6vw 80px;
}
.hero-inner {
  max-width: 980px;
  text-align: center;
}
.logo {
  width: min(460px, 82vw);
  height: auto;
  margin: 0 auto 18px;
  filter: drop-shadow(0 10px 35px rgba(0, 0, 0, 0.55));
}
.mission {
  font-size: clamp(18px, 2.4vw, 28px);
  color: #fff;
  max-width: 900px;
  margin: 22px auto;
}
.mission strong {
  color: var(--coral);
  font-weight: 500;
}
.intro {
  max-width: 720px;
  margin: 0 auto;
  color: #d7eaf0;
}
.button-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px;
}
.btn {
  border: 1px solid rgba(52, 198, 211, 0.7);
  color: #fff;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(52, 198, 211, 0.12);
}
.btn.alt {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.07);
}
section {
  padding: 90px 6vw;
}
.wrap {
  max-width: 1180px;
  margin: auto;
}
.eyebrow {
  color: var(--teal);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 13px;
}
h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  color: #fff;
}
h2 {
  font-size: clamp(28px, 4vw, 36px);
  color: #fff;
  line-height: 1.1;
  margin: 10px 0 22px;
}
p.lead {
  font-size: clamp(17px, 2vw, 20px);
  max-width: 820px;
}
/* Reusable card grids. */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  overflow: hidden;
}

/* Prevent distortion on standalone images and logos. Gallery cards still crop neatly using object-fit: cover. */
.gear-photo img,
.split img,
.camera-layout img,
.panel img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.card img {
  width: 100%;
  height: 310px;
  object-fit: cover;
}
.card-body {
  padding: 20px;
}
.card h3 {
  color: #fff;
  margin: 0 0 4px;
  font-size: clamp(20px, 2.2vw, 24px);
}
.tag {
  display: inline-block;
  margin-top: 8px;
  color: var(--teal);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.panel {
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.025)
  );
}
.destinations {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.dest {
  min-height: 190px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(3, 18, 34, 0.08), rgba(3, 18, 34, 0.88)),
    linear-gradient(160deg, rgba(52, 198, 211, 0.12), rgba(255, 127, 106, 0.06));
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(0,0,0,0.20);
}

.dest:hover {
  transform: translateY(-2px);
  border-color: rgba(52, 198, 211, 0.4);
  box-shadow: 0 20px 46px rgba(0,0,0,0.30), 0 0 26px rgba(52, 198, 211, 0.10);
}

.dest-mozambique {
  background-image:
    linear-gradient(180deg, rgba(3,18,34,0.08), rgba(3,18,34,0.90)),
    url("assets/images/mozambique-nudibranch.webp");
}

.dest-raja-ampat {
  background-image:
    linear-gradient(180deg, rgba(3,18,34,0.08), rgba(3,18,34,0.90)),
    url("assets/images/raja-ampat-reef.webp");
}

.dest-ambon {
  background-image:
    linear-gradient(180deg, rgba(3,18,34,0.08), rgba(3,18,34,0.90)),
    url("assets/images/ambon-nudibranch.webp");
}

.dest-anilao {
  background-image:
    linear-gradient(180deg, rgba(3,18,34,0.08), rgba(3,18,34,0.90)),
    url("assets/images/anilao-nudibranch.webp");
}

.dest-lembeh {
  background-image:
    linear-gradient(180deg, rgba(3,18,34,0.20), rgba(3,18,34,0.92)),
    url("assets/images/ambon-frogfish.webp");
}
.dest small {
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.11em;
}
.dest b {
  font-family: Georgia, serif;
  color: white;
  font-size: clamp(20px, 2.2vw, 24px);
}
.coming {
  border-color: rgba(255, 127, 106, 0.45);
}
/* ============================================================
   MacroDivers - Site Footer v3
   Shared footer styling for partials/footer.html.
   ============================================================ */

/* Outer shell */
.site-footer {
  background: linear-gradient(180deg, rgba(3, 16, 24, 0.2), #020b10);
  border-top: 1px solid rgba(52, 198, 211, 0.12);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Four-column main row */
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-top: 52px;
  padding-bottom: 44px;
  align-items: start;
}

/* Column 1: Brand */
.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 16px;
}
.site-footer__logo img {
  display: block;
  width: 48px;
  height: auto;
  opacity: 0.9;
}
.site-footer__wordmark {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}
.site-footer__macro  { color: var(--teal); }
.site-footer__divers { color: var(--white); }

.site-footer__tagline {
  margin: 0 0 20px;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 260px;
}

/* Brand social icon row */
.site-footer__social {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(52, 198, 211, 0.25);
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.site-footer__social-link:hover,
.site-footer__social-link:focus {
  color: var(--teal);
  border-color: var(--teal);
  background: rgba(52, 198, 211, 0.08);
  outline: none;
}

/* Shared nav heading */
.site-footer__nav-heading {
  margin: 0 0 14px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

/* Columns 2 and 3: Navigation lists */
.site-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.site-footer__nav-list a {
  color: var(--soft);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.2s ease;
}
.site-footer__nav-list a:hover,
.site-footer__nav-list a:focus {
  color: var(--teal);
}

/* Column 4: Contact emails */
.site-footer__contact-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__contact-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-footer__contact-name {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}
.site-footer__contact-list a {
  color: var(--soft);
  text-decoration: none;
  font-size: 0.85rem;
  word-break: break-all;
  transition: color 0.2s ease;
}
.site-footer__contact-list a:hover,
.site-footer__contact-list a:focus {
  color: var(--teal);
}

/* Column 4: Follow Us personal accounts */
.site-footer__follow-heading {
  margin-top: 4px;   /* tighter gap after email list */
}
.site-footer__follow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__follow-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.site-footer__follow-name {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);  /* subtler than teal; differentiates from email labels */
}
.site-footer__follow-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.site-footer__follow-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--soft);
  text-decoration: none;
  font-size: 0.82rem;
  transition: color 0.2s ease;
}
.site-footer__follow-links a:hover,
.site-footer__follow-links a:focus {
  color: var(--teal);
}
.site-footer__follow-links svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* Bottom bar */
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  padding-bottom: 24px;
}
.site-footer__copyright {
  margin: 0;
  font-size: 0.78rem;
  color: #4a6572;
}
.site-footer__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}
.site-footer__legal a {
  font-size: 0.78rem;
  color: #4a6572;
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer__legal a:hover,
.site-footer__legal a:focus {
  color: var(--muted);
}

/* Responsive */
@media (max-width: 960px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .site-footer__brand {
    grid-column: 1 / -1;   /* brand spans full width on tablet */
  }
  .site-footer__tagline {
    max-width: 100%;
  }
}

@media (max-width: 580px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 40px;
    padding-bottom: 32px;
  }
  .site-footer__brand {
    grid-column: auto;
  }
  .site-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .site-footer__legal {
    gap: 14px;
    flex-wrap: wrap;
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox.is-open {
  display: flex;
}
.lightbox img {
  max-height: 82vh;
  max-width: 92vw;
  border-radius: 12px;
}
.lightbox button {
  position: absolute;
  top: 20px;
  right: 20px;
  border: 0;
  background: #fff;
  color: #000;
  border-radius: 999px;
  padding: 10px 14px;
}
.note {
  color: #9fb5be;
  font-size: 15px;
}
.gallery-img {
  cursor: zoom-in;
}
@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
  .split {
    grid-template-columns: 1fr;
  }
  .destinations {
    grid-template-columns: 1fr 1fr;
  }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav {
    display: none;
    position: absolute;
    top: 64px;
    right: 5vw;
    left: 5vw;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    background: rgba(6, 26, 49, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    padding: 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  }
  .nav.open {
    display: flex;
  }
  .nav-dropdown {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }
  .nav > a,
  .nav-dropdown > a {
    width: 100%;
    min-height: 34px;
  }
  .dropdown-menu {
    position: static;
    display: none;
    min-width: 0;
    width: 100%;
    margin-top: 4px;
    padding: 6px 0 8px 14px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .nav.open .nav-dropdown:hover .dropdown-menu,
  .nav.open .nav-dropdown:focus-within .dropdown-menu,
  .nav.open .nav-dropdown.open .dropdown-menu {
    display: block;
  }
  .dropdown-menu a {
    padding: 7px 0;
    font-size: 13px;
  }
  .card img {
    height: 260px;
  }
  section {
    padding: 70px 5vw;
  }
}
@media (max-width: 580px) {
  .hero {
    padding: 100px 22px 60px;
  }
  .logo {
    width: min(330px, 86vw);
  }
  .grid,
  .destinations {
    grid-template-columns: 1fr;
  }
  .topbar {
    padding: 14px 18px;
  }
  .mission {
    font-size: 19px;
  }
  .intro {
    font-size: 15px;
  }
  .button-row {
    flex-direction: column;
  }
  .btn {
    width: 100%;
    text-align: center;
  }
  .card img {
    height: 250px;
  }
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 30px;
  }
}

.camera-section {
  background: #0d2238;
}

.camera-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: 2rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  overflow: hidden;
}

.camera-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.camera-content {
  padding: 2rem;
}

.camera-content h3 {
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .camera-card {
    grid-template-columns: 1fr;
  }
}

/* Typography consistency update */
main section p:not(.eyebrow):not(.mission):not(.intro),
.panel p,
.card p,
.dest p,
.note,
main section li {
  font-size: 1.05rem;
  line-height: 1.75;
}

main section p:not(.eyebrow):not(.mission):not(.intro),
.panel p,
.card p {
  margin-top: 0;
  margin-bottom: 1rem;
}

main section p.lead,
p.lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #d8e6ec;
  max-width: 860px;
  margin-top: 0;
  margin-bottom: 1.1rem;
}

main section h2 + p,
main section h3 + p {
  margin-top: 0;
}

.panel h3 {
  margin-top: 0;
}

.card-body p {
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 0.4rem;
}

@media (max-width: 700px) {
  main section p:not(.eyebrow):not(.mission):not(.intro),
  .panel p,
  main section li {
    font-size: 1rem;
    line-height: 1.68;
  }

  main section p.lead,
  p.lead {
    font-size: 1.06rem;
    line-height: 1.65;
  }
}



/* Nudibranch education section */
.education-hero {
  min-height: 72vh;
  display: grid;
  place-items: center;
  padding: 130px 6vw 80px;
  background:
    linear-gradient(90deg, rgba(6,26,49,0.96), rgba(6,26,49,0.55), rgba(6,26,49,0.88)),
    var(--education-hero-image) center/cover no-repeat;
}

.education-hero .wrap {
  max-width: 980px;
  text-align: center;
}

.education-hero h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
}

.education-section {
  padding: 90px 6vw;
}

.education-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.education-card {
  padding: 24px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.11);
}

.education-card .number {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(52,198,211,0.16);
  border: 1px solid rgba(52,198,211,0.55);
  color: #fff;
  margin-bottom: 12px;
  font-weight: 700;
}

.education-card h3 {
  margin-top: 0;
  color: #fff;
}

.education-card p {
  margin-bottom: 0;
}

.diagram-card {
  margin-top: 32px;
  padding: 30px;
  border-radius: 26px;
  background: rgba(52,198,211,0.08);
  border: 1px solid rgba(52,198,211,0.25);
}

.taxonomy-tree,
.name-diagram,
.lifecycle {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin: 24px auto 0;
}

.taxonomy-tree span,
.name-diagram span,
.lifecycle span {
  display: block;
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  text-align: center;
}

.name-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 24px;
}

.name-box {
  padding: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.1);
}

.name-box strong {
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.comparison-card {
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.1);
}

.comparison-card img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.comparison-card div {
  padding: 22px;
}

.fact-icon {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .education-grid,
  .comparison-grid,
  .name-split {
    grid-template-columns: 1fr;
  }

  .comparison-card img {
    height: auto;
  }
}


/* Nudibranch anatomy page */
.anatomy-overview {
  margin-top: 32px;
  padding: 28px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.1);
}

.anatomy-overview img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.12);
}

.anatomy-parts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.anatomy-part {
  padding: 24px;
  border-radius: 22px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
}

.anatomy-part h3 {
  margin-top: 0;
  color: #fff;
}

.anatomy-part strong {
  color: var(--teal);
}

.anatomy-note {
  margin-top: 32px;
  padding: 24px;
  border-left: 4px solid var(--teal);
  border-radius: 18px;
  background: rgba(52,198,211,0.08);
}

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


/* Nudibranch life cycle page */
.lifecycle-stage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.lifecycle-stage {
  padding: 26px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.1);
}

.lifecycle-stage h3 {
  margin-top: 0;
  color: #fff;
}

.lifecycle-stage .stage-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(52,198,211,0.16);
  border: 1px solid rgba(52,198,211,0.55);
  color: #fff;
  font-weight: 700;
}

.lifecycle-diagram-panel {
  margin-top: 32px;
  padding: 28px;
  border-radius: 26px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.1);
}

.lifecycle-diagram-panel img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.12);
}

.lifecycle-flow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 26px;
}

.lifecycle-flow span {
  padding: 14px 12px;
  border-radius: 18px;
  text-align: center;
  color: #fff;
  background: rgba(52,198,211,0.09);
  border: 1px solid rgba(52,198,211,0.25);
}

@media (max-width: 900px) {
  .lifecycle-stage-grid,
  .lifecycle-flow {
    grid-template-columns: 1fr;
  }
}


/* Nudibranch identification guide */
.id-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.id-guide-card {
  padding: 26px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.1);
}

.id-guide-card h3 {
  margin-top: 0;
  color: #fff;
}

.id-guide-card .step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(52,198,211,0.16);
  border: 1px solid rgba(52,198,211,0.55);
  color: #fff;
  font-weight: 700;
}

.card-learn-more {
  display: inline-block;
  margin-top: 0.2rem;
  color: var(--accent, #34c6d3);
  font-weight: 700;
  text-decoration: none;
  text-underline-offset: 0.2em;
}

.card-learn-more:hover,
.card-learn-more:focus {
  text-decoration: underline;
}

.card-learn-more:focus-visible {
  outline: 2px solid rgba(52, 198, 211, 0.78);
  outline-offset: 4px;
  border-radius: 4px;
}

.identification-checklist {
  margin-top: 32px;
  padding: 28px;
  border-radius: 26px;
  background: rgba(52,198,211,0.08);
  border: 1px solid rgba(52,198,211,0.25);
}

.identification-checklist ul {
  columns: 2;
  gap: 36px;
}

.mistake-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.mistake-card {
  padding: 22px;
  border-radius: 22px;
  background: rgba(255,127,106,0.08);
  border: 1px solid rgba(255,127,106,0.22);
}

.mistake-card h3 {
  margin-top: 0;
  color: #fff;
}

@media (max-width: 900px) {
  .id-guide-grid,
  .mistake-grid {
    grid-template-columns: 1fr;
  }

  .identification-checklist ul {
    columns: 1;
  }
}


/* Refined home photo intro */
.home-photo-teaser {
  padding-top: 80px;
  padding-bottom: 80px;
}

.home-pathways {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
  background: #071822;
}

.home-pathway-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}

.home-pathway-card {
  display: flex;
  min-height: 180px;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
  color: #fff;
  text-decoration: none;
  box-shadow: 0 16px 38px rgba(0,0,0,0.22);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.home-pathway-card:hover {
  transform: translateY(-2px);
  border-color: rgba(52,198,211,0.48);
  background: linear-gradient(180deg, rgba(52,198,211,0.11), rgba(255,255,255,0.035));
}

.home-pathway-card span {
  color: var(--teal);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-pathway-card strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.22;
}

.home-photo-teaser .section-intro {
  max-width: 760px;
  margin-bottom: 28px;
}

.home-photo-teaser .section-intro p {
  margin-bottom: 0;
}

.photo-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.photo-mosaic img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
}

.home-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

@media (max-width: 900px) {
  .home-pathway-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .photo-mosaic {
    grid-template-columns: repeat(2, 1fr);
  }

  .photo-mosaic img {
    height: 220px;
  }
}

@media (max-width: 580px) {
  .home-pathway-grid {
    grid-template-columns: 1fr;
  }

  .home-pathway-card {
    min-height: 140px;
  }

  .photo-mosaic {
    grid-template-columns: 1fr;
  }

  .photo-mosaic img {
    height: auto;
  }
}


/* Educational tooltip links */
.tooltip-link {
  position: relative;
  color: var(--teal);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: help;
}

.tooltip-link .tooltip-text {
  visibility: hidden;
  opacity: 0;
  width: min(340px, 82vw);
  background: #06233f;
  color: #fff;
  text-align: left;
  border-radius: 12px;
  padding: 12px 14px;
  line-height: 1.5;
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  position: absolute;
  z-index: 9999;
  bottom: 135%;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.25s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
}

.tooltip-link:hover .tooltip-text,
.tooltip-link:focus .tooltip-text,
.tooltip-link:focus-within .tooltip-text {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 768px) {
  .tooltip-link .tooltip-text {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 24px;
    transform: none;
    width: auto;
    max-width: none;
  }
}


/* Additional Nudibranch guide pages */
.guide-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.guide-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.guide-card {
  padding: 26px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.1);
}

.guide-card h3 {
  margin-top: 0;
  color: #fff;
}

.guide-card .guide-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(52,198,211,0.14);
  border: 1px solid rgba(52,198,211,0.35);
  margin-bottom: 12px;
  font-size: 1.35rem;
}

.guide-photo-card {
  overflow: hidden;
  padding: 0;
}

.guide-photo-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.guide-photo-card div {
  padding: 22px;
}

.hotspot-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 28px;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
}

.hotspot-table th,
.hotspot-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-align: left;
}

.hotspot-table th {
  color: #fff;
  background: rgba(52,198,211,0.12);
}

@media (max-width: 900px) {
  .guide-grid-2,
  .guide-grid-3 {
    grid-template-columns: 1fr;
  }

  .guide-photo-card img {
    height: auto;
  }

  .hotspot-table {
    display: block;
    overflow-x: auto;
  }
}



/* Academy dropdown section styling */
.dropdown-section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
  margin: 0.8rem 0 0.3rem;
  padding: 0 0.8rem;
  font-weight: 700;
}

/* Academy homepage and Species Database preview cards */

.academy-preview {
  padding: 5rem 1.5rem;
  background: #071822;
}

.academy-preview .section-heading {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
}

.academy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.academy-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  padding: 1.8rem;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

.academy-card h3 {
  margin-top: 0;
  margin-bottom: 0.8rem;
}

.academy-card p {
  line-height: 1.6;
  opacity: 0.92;
}

.narrow {
  max-width: 900px;
}

.species-hero {
  background: linear-gradient(135deg, #06212f, #0b4d63);
}

/* Academy landing page */

.academy-hero {
  background-image:
    linear-gradient(rgba(0,0,0,0.46), rgba(0,0,0,0.46)),
    url("assets/images/academy-hero.webp");
  background-size: cover;
  background-position: center;
}

.academy-preview .btn {
  display: inline-block;
  margin-top: 1.2rem;
}

.academy-card a,
.academy-card span {
  display: inline-block;
  margin-top: auto;
  font-weight: 700;
}

.academy-card span {
  opacity: 0.75;
}


/* Academy and Species hero image styling */
.academy-hero,
.species-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
}

.academy-hero h1,
.academy-hero p,
.species-hero h1,
.species-hero p {
  text-shadow: 0 4px 18px rgba(0,0,0,0.65);
}

/* Compact Academy dropdown redesign */
.academy-short-menu {
  min-width: 220px;
}

.academy-short-menu a {
  white-space: nowrap;
}

/* Academy section landing pages */
.academy-landing-grid .academy-card a,
.academy-landing-grid .academy-card span {
  display: inline-block;
  margin-top: auto;
  font-weight: 700;
}

.academy-landing-grid .academy-card span {
  opacity: 0.75;
}

/* Better Macro Diving and Photography pages */
.feature-infographic {
  display: block;
  width: min(100%, 980px);
  height: auto;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 20px 45px rgba(0,0,0,0.35);
}

.clean-list {
  line-height: 1.8;
  margin: 1.5rem 0 2rem;
}

.academy-crosslink {
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
}

.academy-crosslink .btn + .btn {
  margin-left: 0.75rem;
}


.image-caption {
  text-align: center;
  margin-top: 1rem;
  opacity: 0.85;
  font-size: 0.95rem;
}


/* Coming soon labels */
.academy-card span {
  display: inline-block;
  margin-top: auto;
  font-weight: 700;
  opacity: 0.75;
}


/* Academy Nudibranchs hero image */
.academy-nudibranchs-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.28)), url('assets/images/academy-nudibranchs-hero.webp');
  background-size: cover;
  background-position: center;
}

.academy-nudibranchs-hero h1,
.academy-nudibranchs-hero p {
  text-shadow: 0 4px 18px rgba(0,0,0,0.7);
}





/* Academy Photography hero image */
.academy-photography-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.28)), url('assets/images/academy-photography-hero.webp');
  background-size: cover;
  background-position: center;
}

.academy-marine-life-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image:
    linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.28)),
    url("assets/images/ghost-pipefish.webp");
  background-size: cover;
  background-position: center;
}

.camera-hero {
  background-image:
    linear-gradient(rgba(0,0,0,0.46), rgba(0,0,0,0.46)),
    url("assets/images/tg7-camera-setup.webp");
  background-size: cover;
  background-position: center;
}

.academy-photography-hero h1,
.academy-photography-hero p {
  text-shadow: 0 4px 18px rgba(0,0,0,0.7);
}





/* Destinations page map hero - dedicated self-contained layout */
.destinations-map-hero {
  position: relative;
  min-height: 520px;
  background-image: linear-gradient(rgba(0,0,0,0.20), rgba(0,0,0,0.20)), url('assets/images/destinations-hero-world-map.webp');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.destinations-map-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 2rem 3rem;
}

.destinations-map-hero__overlay h1 {
  color: #ffffff;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1.05;
  margin: 0 0 1rem;
  text-shadow: 0 5px 24px rgba(0,0,0,0.95);
}

.destinations-map-hero__overlay p {
  color: #ffffff;
  max-width: 920px;
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.5;
  margin: 0;
  text-shadow: 0 4px 20px rgba(0,0,0,0.95);
}

@media (max-width: 700px) {
  .destinations-map-hero {
    min-height: 420px;
  }

  .destinations-map-hero__overlay {
    padding-top: 6rem;
  }
}

/* What Is A Nudibranch - three group card layout */
.comparison-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.comparison-grid-three .comparison-card img {
  height: 260px;
  object-fit: cover;
  width: 100%;
}

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

/* Destination infographic sections */
.destination-infographic-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.destination-infographic {
  display: block;
  width: min(100%, 1050px);
  height: auto;
  margin: 2rem auto 0;
  border-radius: 18px;
  box-shadow: 0 20px 45px rgba(0,0,0,0.35);
}

/* Return link sections */
.return-link-section {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.return-link-card {
  text-align: center;
}

.return-link-card .btn {
  display: inline-block;
  margin-top: 1rem;
}

/* Content type labels */
.content-type-label {
  display: inline-block;
  margin: 0.8rem 0 0.4rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.82;
}

/* Better Macro Photography hero image */
.better-macro-photography-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.28)), url('assets/images/better-macro-photography-hero.webp');
  background-size: cover;
  background-position: center;
}

.better-macro-photography-hero h1,
.better-macro-photography-hero p {
  text-shadow: 0 4px 18px rgba(0,0,0,0.7);
}

/* Macro Diving Skills hero image */
.macro-diving-skills-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.28)), url('assets/images/macro-diving-skills-hero.webp');
  background-size: cover;
  background-position: center;
}

.macro-diving-skills-hero h1,
.macro-diving-skills-hero p {
  text-shadow: 0 4px 18px rgba(0,0,0,0.7);
}

/* Academy Diving hero image */
.academy-diving-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.28)), url('assets/images/academy-diving-hero.webp');
  background-size: cover;
  background-position: center;
}

.academy-diving-hero h1,
.academy-diving-hero p {
  text-shadow: 0 4px 18px rgba(0,0,0,0.7);
}

/* Responsible Muck Diving hero image */
.responsible-muck-diving-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.28)), url('assets/images/responsible-muck-diving-hero.webp');
  background-size: cover;
  background-position: center;
}

.responsible-muck-diving-hero h1,
.responsible-muck-diving-hero p {
  text-shadow: 0 4px 18px rgba(0,0,0,0.7);
}

/* Destination image-only galleries. Keep image crops consistent across trip pages. */
/* Mozambique image-only gallery */
.mozambique-gallery-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Destination image-only gallery */
.raja-ampat-gallery-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.destination-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.destination-gallery-grid .gallery-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 16px 35px rgba(0,0,0,0.28);
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.destination-gallery-grid .gallery-item:focus {
  outline: 2px solid rgba(52,198,211,0.72);
  outline-offset: 3px;
}

.destination-gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

.destination-gallery-grid .gallery-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 0.18rem;
  padding: 2.1rem 1rem 0.85rem;
  color: #ffffff;
  background: linear-gradient(
    180deg,
    rgba(3, 17, 28, 0) 0%,
    rgba(3, 17, 28, 0.84) 46%,
    rgba(3, 17, 28, 0.96) 100%
  );
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.destination-gallery-grid .gallery-item:hover .gallery-caption,
.destination-gallery-grid .gallery-item:focus .gallery-caption,
.destination-gallery-grid .gallery-item.is-caption-open .gallery-caption {
  opacity: 1;
  transform: translateY(0);
}

.destination-gallery-grid .caption-common-name,
.destination-gallery-grid .caption-credit {
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.destination-gallery-grid .caption-common-name {
  font-weight: 700;
}

.destination-gallery-grid .caption-scientific-name {
  font-size: 0.95rem;
  opacity: 0.92;
}

.destination-gallery-grid .caption-credit {
  font-size: 0.82rem;
  opacity: 0.86;
}











/* MacroDivers visual depth polish pass
   Unifies dark blue backgrounds, improves card depth and adds subtle teal accents.
   CSS-only update: content, layout and images remain unchanged.
*/

/* One consistent underwater base */
html,
body {
  background:
    radial-gradient(circle at top left, rgba(52,198,211,0.06), transparent 34rem),
    linear-gradient(180deg, var(--md-bg-deep), var(--md-bg) 26rem, var(--md-bg-deep));
  color: var(--md-text);
}

/* Smooth out hard colour jumps between sections */
main,
section,
.content-section,
.academy-preview {
  background-color: transparent !important;
}

.content-section,
.academy-preview {
  position: relative;
}

.content-section::before,
.academy-preview::before {
  content: "";
  position: absolute;
  left: 6vw;
  right: 6vw;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52,198,211,0.22), transparent);
  pointer-events: none;
}

.content-section:first-of-type::before,
.page-hero + .content-section::before,
.hero + section::before {
  opacity: 0.35;
}

/* Section headings feel more intentional */
.section-heading {
  position: relative;
}

.section-heading h2,
.content-section h2,
.academy-preview h2 {
  text-shadow: 0 3px 18px rgba(0,0,0,0.35);
}

.section-heading h2::after,
.content-section .container > h2:first-child::after,
.content-section .container.narrow > h2:first-child::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin: 0.8rem auto 0;
  background: linear-gradient(90deg, transparent, var(--md-teal), transparent);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(52,198,211,0.35);
}

.content-section .container.narrow > h2:first-child::after {
  margin-left: 0;
  margin-right: 0;
}

/* Make cards premium but still calm */
.academy-card,
.destination-card,
.guide-card,
.comparison-card,
.education-card,
.diagram-card,
.info-card,
.return-link-card,
.academy-crosslink,
.id-guide-card,
.card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.04)) !important;
  border: 1px solid var(--md-border) !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

.academy-card:hover,
.destination-card:hover,
.guide-card:hover,
.comparison-card:hover,
.education-card:hover,
.diagram-card:hover,
.info-card:hover,
.return-link-card:hover,
.id-guide-card:hover,
.card:hover {
  transform: translateY(-3px);
  border-color: var(--md-border-teal) !important;
  background:
    linear-gradient(180deg, rgba(52,198,211,0.10), rgba(255,255,255,0.045)) !important;
  box-shadow:
    0 24px 55px rgba(0,0,0,0.34),
    0 0 0 1px rgba(52,198,211,0.08),
    0 0 28px rgba(52,198,211,0.08);
}

/* Card headings and links */
.academy-card h3,
.destination-card h3,
.guide-card h3,
.comparison-card h3,
.education-card h3,
.diagram-card h3,
.info-card h3,
.card h3 {
  color: #ffffff;
}

.academy-card:hover h3,
.destination-card:hover h3,
.guide-card:hover h3,
.comparison-card:hover h3,
.education-card:hover h3,
.id-guide-card:hover h3,
.card:hover h3 {
  color: #e9feff;
}

.academy-card a,
.destination-card a,
.guide-card a,
.card a {
  color: var(--md-teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.frogfish-page .education-card:hover {
  transform: translateY(-3px);
  border-color: rgba(52,198,211,0.9) !important;
  background:
    linear-gradient(180deg, rgba(52,198,211,0.10), rgba(255,255,255,0.045)) !important;
  box-shadow:
    0 24px 55px rgba(0,0,0,0.34),
    0 0 0 1px rgba(52,198,211,0.08),
    0 0 28px rgba(52,198,211,0.08);
}

/* Buttons feel a little more tactile */
.btn,
button,
.button {
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.btn:hover,
button:hover,
.button:hover {
  transform: translateY(-1px);
  border-color: rgba(52,198,211,0.9);
  background: rgba(52,198,211,0.18);
  box-shadow: 0 12px 30px rgba(52,198,211,0.10);
}

/* Image blocks: subtle lift without becoming flashy */
.feature-infographic,
.destination-infographic,
.destination-gallery-grid img,
.nudi-group-card img,
.comparison-card img {
  box-shadow:
    0 22px 48px rgba(0,0,0,0.34),
    0 0 0 1px rgba(255,255,255,0.06);
}

/* Gallery images feel clickable/finished even without captions */
.destination-gallery-grid .gallery-item,
.destination-gallery-grid img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.destination-gallery-grid .gallery-item:hover,
.destination-gallery-grid .gallery-item:focus,
.destination-gallery-grid .gallery-item.is-caption-open,
.destination-gallery-grid img:hover {
  transform: translateY(-3px) scale(1.01);
  filter: brightness(1.06);
  box-shadow:
    0 26px 62px rgba(0,0,0,0.42),
    0 0 0 1px rgba(52,198,211,0.18);
}

/* Subtle highlight panels for important crosslinks */
.academy-crosslink,
.return-link-card {
  background:
    linear-gradient(135deg, rgba(52,198,211,0.10), rgba(255,255,255,0.035)) !important;
  border-color: rgba(52,198,211,0.20) !important;
}

/* Keep mobile calm and readable */
@media (max-width: 800px) {
  .academy-card:hover,
  .destination-card:hover,
  .guide-card:hover,
  .comparison-card:hover,
  .education-card:hover,
  .diagram-card:hover,
  .info-card:hover,
  .return-link-card:hover,
  .id-guide-card:hover,
  .card:hover,
  .destination-gallery-grid .gallery-item:hover,
  .destination-gallery-grid img:hover {
    transform: none;
  }

  .content-section::before,
  .academy-preview::before {
    left: 1.5rem;
    right: 1.5rem;
  }
}

/* End MacroDivers visual depth polish pass */














/* MacroDivers home mini gallery */
.home-mini-gallery-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.home-mini-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.home-mini-gallery-grid .gallery-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.30),
    0 0 0 1px rgba(255,255,255,0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.home-mini-gallery-grid .gallery-item:focus {
  outline: 2px solid rgba(52,198,211,0.72);
  outline-offset: 3px;
}

.home-mini-gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  cursor: zoom-in;
  transition: transform 0.22s ease, filter 0.22s ease;
}

.home-mini-gallery-grid .gallery-item:hover,
.home-mini-gallery-grid .gallery-item:focus,
.home-mini-gallery-grid .gallery-item.is-caption-open {
  transform: translateY(-3px) scale(1.01);
  filter: brightness(1.06);
  box-shadow:
    0 26px 62px rgba(0,0,0,0.42),
    0 0 0 1px rgba(52,198,211,0.18);
}

.home-mini-gallery-grid .gallery-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 0.18rem;
  padding: 2.1rem 1rem 0.85rem;
  color: #ffffff;
  background: linear-gradient(
    180deg,
    rgba(3, 17, 28, 0) 0%,
    rgba(3, 17, 28, 0.84) 46%,
    rgba(3, 17, 28, 0.96) 100%
  );
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.home-mini-gallery-grid .gallery-item:hover .gallery-caption,
.home-mini-gallery-grid .gallery-item:focus .gallery-caption,
.home-mini-gallery-grid .gallery-item.is-caption-open .gallery-caption {
  opacity: 1;
  transform: translateY(0);
}

.home-mini-gallery-grid .caption-common-name,
.home-mini-gallery-grid .caption-credit {
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.home-mini-gallery-grid .caption-common-name {
  font-weight: 700;
}

.home-mini-gallery-grid .caption-scientific-name {
  font-size: 0.95rem;
  opacity: 0.92;
}

.home-mini-gallery-grid .caption-credit {
  font-size: 0.82rem;
  opacity: 0.86;
}

@media (max-width: 850px) {
  .home-mini-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .home-mini-gallery-grid {
    grid-template-columns: 1fr;
  }
}
/* End MacroDivers home mini gallery */

/* Shared gallery lightbox opened by script.js. */
/* MacroDivers gallery lightbox */
.destination-gallery-grid img,
.home-mini-gallery-grid img,
.lightbox-gallery img {
  cursor: zoom-in;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 5rem 5.5rem;
  background: rgba(2, 10, 16, 0.92);
  backdrop-filter: blur(8px);
}

.gallery-lightbox.is-open {
  display: flex;
}

.gallery-lightbox img {
  max-width: min(94vw, 1400px);
  max-height: 76vh;
  width: auto;
  height: auto;
  border-radius: 18px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.12);
}

.gallery-lightbox-caption {
  position: fixed;
  right: 1rem;
  bottom: 1.2rem;
  left: 1rem;
  z-index: 10000;
  width: min(92vw, 1100px);
  margin: 0 auto;
  padding: 0.7rem 1rem;
  color: #ffffff;
  background: rgba(2, 10, 16, 0.72);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: clamp(0.92rem, 1.7vw, 1.08rem);
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0,0,0,0.82);
}

.gallery-lightbox-caption em {
  font-family: inherit;
}

.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
  position: fixed;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.gallery-lightbox-close {
  top: 1.2rem;
  right: 1.4rem;
  width: 48px;
  height: 48px;
  font-size: 2rem;
  line-height: 1;
}

.gallery-lightbox-prev,
.gallery-lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  font-size: 2.2rem;
  line-height: 1;
}

.gallery-lightbox-prev {
  left: 1.5rem;
}

.gallery-lightbox-next {
  right: 1.5rem;
}

.gallery-lightbox-close:hover,
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
  border-color: rgba(52,198,211,0.85);
  background: rgba(52,198,211,0.18);
}

.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
  transform: translateY(-50%) scale(1.04);
}

@media (max-width: 700px) {
  .gallery-lightbox {
    padding: 1rem 3.5rem 5.2rem;
  }

  .gallery-lightbox img {
    max-width: 94vw;
    max-height: 70vh;
    border-radius: 12px;
  }

  .gallery-lightbox-caption {
    font-size: 0.9rem;
  }

  .gallery-lightbox-close {
    width: 42px;
    height: 42px;
    top: 0.8rem;
    right: 0.8rem;
  }

  .gallery-lightbox-prev,
  .gallery-lightbox-next {
    width: 42px;
    height: 42px;
    font-size: 1.8rem;
  }

  .gallery-lightbox-prev {
    left: 0.6rem;
  }

  .gallery-lightbox-next {
    right: 0.6rem;
  }
}
/* End MacroDivers gallery lightbox */








/* MacroDivers index gallery 25 photo refinement */
.home-mini-gallery-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 1.1rem !important;
}

.home-mini-gallery-grid .gallery-item,
.home-mini-gallery-grid img {
  aspect-ratio: 4 / 3;
}

.home-mini-gallery-grid img {
  object-fit: cover;
  width: 100%;
  display: block;
}
/* End MacroDivers index gallery 25 photo refinement */


/* MacroDivers final Ambon-style hero consistency
   Applies the Ambon-style compact hero treatment across all hero pages,
   including Academy pages that were still using older hero sizing/text.
*/

/* One shared compact hero system */
.hero,
.home-hero,
.page-hero,
.destination-hero,
.species-hero,
.academy-hero,
.academy-nudibranchs-hero,
.academy-photography-hero,
.academy-diving-hero,
.academy-diving-safety-hero,
.academy-marine-life-hero,
.macro-diving-skills-hero,
.responsible-muck-diving-hero,
.better-macro-photography-hero,
.better-macro-diving-hero,
.destinations-map-hero,
[class*="-hero"] {
  min-height: 410px !important;
  height: 410px !important;
  padding: 6.6rem 1.5rem 3.4rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Ambon-style readable overlay: clear text, visible image.
   The first layer is the site-wide 62% dark photo overlay. */
.hero::before,
.home-hero::before,
.page-hero::before,
.destination-hero::before,
.species-hero::before,
.academy-hero::before,
.academy-nudibranchs-hero::before,
.academy-photography-hero::before,
.academy-diving-hero::before,
.academy-diving-safety-hero::before,
.academy-marine-life-hero::before,
.macro-diving-skills-hero::before,
.responsible-muck-diving-hero::before,
.better-macro-photography-hero::before,
.better-macro-diving-hero::before,
.destinations-map-hero::before,
[class*="-hero"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(2,10,16,0.62), rgba(2,10,16,0.62)),
    radial-gradient(circle at 50% 50%, rgba(52,198,211,0.02), rgba(2,10,16,0.14) 78%);
  pointer-events: none;
  z-index: 0;
}

/* Put hero content above the overlay */
.hero .wrap,
.hero .container,
.home-hero .container,
.page-hero .container,
.destination-hero .container,
.species-hero .container,
.academy-hero .container,
.academy-nudibranchs-hero .container,
.academy-photography-hero .container,
.academy-diving-hero .container,
.academy-diving-safety-hero .container,
.academy-marine-life-hero .container,
.macro-diving-skills-hero .container,
.responsible-muck-diving-hero .container,
.better-macro-photography-hero .container,
.better-macro-diving-hero .container,
.destinations-map-hero .container,
.destinations-map-hero__overlay,
[class*="-hero"] .container {
  position: relative !important;
  z-index: 1 !important;
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hero labels: match Ambon-style small teal label */
.hero .wrap::before,
.hero .container::before,
.page-hero .container::before,
.destination-hero .container::before,
.species-hero .container::before,
.academy-hero .container::before,
.academy-nudibranchs-hero .container::before,
.academy-photography-hero .container::before,
.academy-diving-hero .container::before,
.academy-diving-safety-hero .container::before,
.academy-marine-life-hero .container::before,
.macro-diving-skills-hero .container::before,
.responsible-muck-diving-hero .container::before,
.better-macro-photography-hero .container::before,
.better-macro-diving-hero .container::before,
[class*="-hero"] .container::before {
  content: "MACRODIVERS";
  display: block;
  margin-bottom: 0.7rem;
  color: #34c6d3;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* But do not add fake label above the home logo */
.home-hero-content::before {
  content: none !important;
}

/* Hero headings */
.hero h1,
.home-hero h1,
.page-hero h1,
.destination-hero h1,
.species-hero h1,
.academy-hero h1,
.academy-nudibranchs-hero h1,
.academy-photography-hero h1,
.academy-diving-hero h1,
.academy-diving-safety-hero h1,
.academy-marine-life-hero h1,
.macro-diving-skills-hero h1,
.responsible-muck-diving-hero h1,
.better-macro-photography-hero h1,
.better-macro-diving-hero h1,
.destinations-map-hero h1,
.destinations-map-hero__overlay h1,
[class*="-hero"] h1 {
  color: #ffffff !important;
  font-size: clamp(2.45rem, 4.6vw, 4.15rem) !important;
  line-height: 1.04 !important;
  margin: 0 0 0.65rem !important;
  text-shadow:
    0 4px 18px rgba(0,0,0,0.95),
    0 0 24px rgba(0,0,0,0.65) !important;
}

.academy-marine-life-hero h1 {
  font-size: clamp(2.3rem, 4vw, 3.55rem) !important;
}

/* Teal line under hero headings */
.hero h1::after,
.home-hero h1::after,
.page-hero h1::after,
.destination-hero h1::after,
.species-hero h1::after,
.academy-hero h1::after,
.academy-nudibranchs-hero h1::after,
.academy-photography-hero h1::after,
.academy-diving-hero h1::after,
.academy-diving-safety-hero h1::after,
.academy-marine-life-hero h1::after,
.macro-diving-skills-hero h1::after,
.responsible-muck-diving-hero h1::after,
.better-macro-photography-hero h1::after,
.better-macro-diving-hero h1::after,
.destinations-map-hero h1::after,
.destinations-map-hero__overlay h1::after,
[class*="-hero"] h1::after {
  content: "";
  display: block;
  width: 96px;
  height: 3px;
  margin: 0.72rem auto 0;
  background: #34c6d3;
  border-radius: 999px;
  box-shadow: 0 0 20px rgba(52,198,211,0.65);
}

/* Hero subtitles */
.hero p,
.home-hero p,
.page-hero p,
.destination-hero p,
.species-hero p,
.academy-hero p,
.academy-nudibranchs-hero p,
.academy-photography-hero p,
.academy-diving-hero p,
.academy-diving-safety-hero p,
.academy-marine-life-hero p,
.macro-diving-skills-hero p,
.responsible-muck-diving-hero p,
.better-macro-photography-hero p,
.better-macro-diving-hero p,
.destinations-map-hero p,
.destinations-map-hero__overlay p,
[class*="-hero"] p {
  color: #ffffff !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(0.98rem, 1.32vw, 1.12rem) !important;
  line-height: 1.42 !important;
  opacity: 1 !important;
  text-shadow:
    0 3px 14px rgba(0,0,0,0.95),
    0 0 20px rgba(0,0,0,0.65) !important;
}

/* Home page hero logo/text */
.home-hero-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 0.35rem !important;
}

.home-hero-logo {
  display: block !important;
  max-width: min(500px, 78vw) !important;
  height: auto !important;
  margin: 0 auto 0 !important;
  filter: drop-shadow(0 9px 24px rgba(0,0,0,0.60));
}

.home-hero-content .home-hero-shortline {
  position: relative !important;
  top: -1.45rem !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
  color: #ffffff !important;
}

/* Older destination/about heroes use .hero-inner rather than .container. Keep
   multi-paragraph hero copy compact so it stays inside the photo area. */
.hero .hero-inner {
  position: relative !important;
  z-index: 1 !important;
  max-width: 820px !important;
  padding: 0 1rem !important;
}

.hero .hero-inner .eyebrow {
  margin-bottom: 0.55rem !important;
}

.hero .hero-inner .mission {
  margin-top: 1.15rem !important;
  margin-bottom: 0 !important;
}

.hero .hero-inner .intro {
  margin-top: 0.75rem !important;
  margin-bottom: 0 !important;
  max-width: 700px !important;
}

/* Coral Triangle hover */
.coral-triangle-term {
  color: #34c6d3 !important;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: help;
}

.coral-triangle-term:hover {
  color: #ffffff !important;
  text-shadow: 0 0 18px rgba(52,198,211,0.85);
}

/* Destination map hero compatibility */
.destinations-map-hero__overlay {
  position: relative !important;
  inset: auto !important;
  min-height: auto !important;
  padding: 0 !important;
}

/* Mobile consistency */
@media (max-width: 800px) {
  .hero,
  .home-hero,
  .page-hero,
  .destination-hero,
  .species-hero,
  .academy-hero,
  .academy-nudibranchs-hero,
  .academy-photography-hero,
  .academy-diving-hero,
  .academy-diving-safety-hero,
  .academy-marine-life-hero,
  .macro-diving-skills-hero,
  .responsible-muck-diving-hero,
  .better-macro-photography-hero,
  .better-macro-diving-hero,
  .destinations-map-hero,
  [class*="-hero"] {
    min-height: 330px !important;
    height: 330px !important;
    padding: 5.8rem 1.15rem 2.6rem !important;
  }

  .home-hero-logo {
    max-width: min(390px, 78vw) !important;
  }

  .home-hero-content .home-hero-shortline {
    top: -0.75rem !important;
    font-size: 0.98rem !important;
  }

  .hero h1,
  .home-hero h1,
  .page-hero h1,
  .destination-hero h1,
  .species-hero h1,
  .academy-hero h1,
  .academy-nudibranchs-hero h1,
  .academy-photography-hero h1,
  .academy-diving-hero h1,
  .academy-diving-safety-hero h1,
  .academy-marine-life-hero h1,
  .macro-diving-skills-hero h1,
  .responsible-muck-diving-hero h1,
  .better-macro-photography-hero h1,
  .better-macro-diving-hero h1,
  .destinations-map-hero h1,
  .destinations-map-hero__overlay h1,
  [class*="-hero"] h1 {
    font-size: clamp(1.9rem, 8.6vw, 2.8rem) !important;
  }

  .hero .hero-inner .intro {
    display: none !important;
  }
}

/* End MacroDivers final Ambon-style hero consistency */























/* MacroDivers home hero text-only reset
   Home page now uses the same hero format as normal pages: title plus short line.
*/
.home-page-hero {
  min-height: 340px !important;
  height: auto !important; /* allow growth for CTA row */
  padding: 7.25rem 1.5rem 2.6rem !important; /* clear fixed nav and keep banner compact */
}

.home-page-hero .container::before {
  content: "MACRODIVERS" !important;
  display: block;
  margin-bottom: 0.58rem;
  color: #34c6d3;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.home-page-hero h1 {
  color: #ffffff !important;
  max-width: 980px !important;
  margin: 0 auto 0.55rem !important;
  font-size: clamp(1.65rem, 2.75vw, 2.35rem) !important;
  line-height: 1.04 !important;
  text-shadow:
    0 4px 18px rgba(0,0,0,0.95),
    0 0 24px rgba(0,0,0,0.65) !important;
}

.home-page-hero h1::before {
  content: "" !important;
  display: block !important;
  width: 60px !important;
  height: 2px !important;
  background: #34c6d3 !important;
  margin: 0 auto 0.7rem auto !important;
}

.home-page-hero h1::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: 0.62rem auto 0 auto;
  background: #34c6d3;
  border-radius: 999px;
  box-shadow: 0 0 20px rgba(52,198,211,0.65);
}

.home-page-hero p {
  color: #ffffff !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
  font-size: clamp(0.94rem, 1.18vw, 1.05rem) !important;
  line-height: 1.36 !important;
  opacity: 1 !important;
  text-shadow:
    0 3px 14px rgba(0,0,0,0.95),
    0 0 20px rgba(0,0,0,0.65) !important;
}

.home-page-hero .coral-triangle-term {
  color: #34c6d3 !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.18em !important;
  cursor: help !important;
}

.home-page-hero .coral-triangle-term:hover {
  color: #ffffff !important;
  text-shadow: 0 0 18px rgba(52,198,211,0.85) !important;
}

@media (max-width: 800px) {
  .home-page-hero {
    min-height: 330px !important;
    height: auto !important;
    padding: 6.4rem 1.15rem 2.4rem !important;
  }

  .home-page-hero h1 {
    font-size: clamp(1.35rem, 6.2vw, 1.95rem) !important;
  }

  .home-page-hero p {
    font-size: 0.98rem !important;
  }

  .home-page-hero .hero-cta-row {
    flex-direction: column !important;
    align-items: center !important;
  }

  .home-page-hero .hero-btn {
    width: 100% !important;
    max-width: 280px !important;
    text-align: center !important;
  }
}

/* Hero CTA buttons */
.home-page-hero .hero-cta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 1rem !important;
  margin-top: 1.1rem !important;
}

.home-page-hero .hero-btn {
  display: inline-block !important;
  padding: 0.62rem 1.45rem !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  letter-spacing: 0.02em !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  cursor: pointer !important;
}

.home-page-hero .hero-btn--outline {
  background: transparent !important;
  border: 2px solid #34c6d3 !important;
  color: #34c6d3 !important;
}

.home-page-hero .hero-btn--outline:hover,
.home-page-hero .hero-btn--outline:focus {
  background: #34c6d3 !important;
  color: #061a31 !important;
}

.home-page-hero .hero-btn--filled {
  background: #34c6d3 !important;
  border: 2px solid #34c6d3 !important;
  color: #061a31 !important;
}

.home-page-hero .hero-btn--filled:hover,
.home-page-hero .hero-btn--filled:focus {
  background: #28a8b4 !important;
  border-color: #28a8b4 !important;
}
/* End MacroDivers home hero text-only reset */


/* Destination detail page layout
   These classes keep Ambon, Anilao, Mozambique and Raja Ampat using the same
   section order, spacing and visual rhythm. Edit the HTML inside each section,
   but try to keep the section classes and order consistent across pages. */
.destination-page .destination-overview-section,
.destination-page .destination-dive-base-section,
.destination-page .destination-marine-life-section,
.destination-page .destination-story-section,
.destination-page .destination-takeaway-section,
.destination-page .personal-stay-review {
  padding: 4rem 0;
}

.destination-page .destination-overview-section + .destination-infographic-section,
.destination-page .destination-infographic-section + .destination-dive-base-section,
.destination-page .destination-dive-base-section + .destination-marine-life-section,
.destination-page .destination-marine-life-section + .destination-story-section,
.destination-page .destination-story-section + .destination-takeaway-section,
.destination-page .destination-takeaway-section + .personal-stay-review,
.destination-page .personal-stay-review + .destination-gallery-section,
.destination-page .destination-takeaway-section + .destination-gallery-section {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.destination-page .destination-gallery-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.destination-page .panel h3:first-child,
.destination-page .card h3:first-child {
  margin-top: 0;
}

.destination-page .section-heading {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.personal-stay-review .container {
  max-width: 980px;
}

.personal-stay-review .section-kicker {
  margin: 0 0 0.55rem;
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.personal-stay-review-intro {
  max-width: 720px;
  margin: 0.65rem auto 0;
  color: var(--soft);
}

.personal-stay-review-card {
  max-width: 840px;
  margin: 2rem auto 0;
  padding: clamp(1.35rem, 3vw, 2.1rem);
  border: 1px solid rgba(52, 198, 211, 0.22);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.026));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.personal-stay-review-card p {
  max-width: 72ch;
  margin: 0 auto 1rem;
  color: var(--soft);
  font-size: 1rem;
  line-height: 1.72;
  text-align: center;
}

.personal-stay-review-card p:last-child {
  margin-bottom: 0;
}

.personal-stay-review-card:hover,
.personal-stay-review-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(52, 198, 211, 0.62);
  background: linear-gradient(180deg, rgba(52, 198, 211, 0.11), rgba(255, 255, 255, 0.045));
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.28), 0 0 28px rgba(52, 198, 211, 0.12);
}

@media (max-width: 700px) {
  .personal-stay-review .container {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  .personal-stay-review-card {
    margin-top: 1.5rem;
    padding: 1.1rem;
    border-radius: 18px;
  }

  .personal-stay-review-card p {
    font-size: 0.98rem;
    line-height: 1.65;
  }
}

/* Keep right-hand desktop dropdowns inside the browser window.
   The About menu sits near the right edge, so align its dropdown to the right
   of the parent item instead of opening further to the right. Mobile menu
   rules above still use the full-width stacked layout. */
@media (min-width: 901px) {
  .nav-dropdown:last-child .dropdown-menu {
    left: auto;
    right: 0;
  }
}

/* Home page introduction split: text and image hook below the hero.
   The section becomes a single column on smaller screens. */
.home-intro-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.home-intro-copy {
  max-width: 720px;
}

.home-intro-photo-card {
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 22px 60px rgba(0,0,0,0.28);
}

.home-intro-photo-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.home-intro-photo-card figcaption {
  padding: 1rem 1.2rem 1.2rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
}

@media (max-width: 850px) {
  .home-intro-split {
    grid-template-columns: 1fr;
  }
}

/* Best Macro Diving Destinations page */
.macro-destinations-page .academy-card p strong {
  color: var(--teal);
  font-weight: 600;
}

.macro-destination-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 32px;
}

.macro-destination-jump a {
  display: inline-block;
  padding: 9px 14px;
  border: 1px solid rgba(52, 198, 211, 0.42);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(52, 198, 211, 0.08);
  text-decoration: none;
}

.macro-destination-jump a:hover,
.macro-destination-jump a:focus {
  border-color: rgba(52, 198, 211, 0.85);
  background: rgba(52, 198, 211, 0.15);
}

.macro-pick-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.macro-two-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.macro-three-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.macro-take {
  max-width: 960px;
  margin: 28px auto 0;
  padding: 18px 22px;
  border-left: 3px solid var(--md-teal);
  border-radius: 18px;
  background: rgba(52, 198, 211, 0.08);
  color: #d7eaf0;
}

@media (max-width: 1100px) {
  .macro-pick-grid,
  .macro-three-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .macro-pick-grid,
  .macro-two-card-grid,
  .macro-three-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Macro destinations country sections */
.country-block {
  margin-top: 2rem;
}

.country-block > h3 {
  margin-bottom: 0.5rem;
}

.destination-detail-grid {
  margin-top: 1rem;
}

.destination-detail-grid h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

/* Coral Triangle destination facts use the site blue for readable text labels. */
.coral-destination-grid .card-body p strong {
  color: var(--teal);
}

.coral-destination-grid .card-body h4 {
  color: #ffffff;
}

/* Macro destinations: stronger country headings */
.country-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 2.4rem 0 0.75rem;
  padding: 0.55rem 0.9rem;
  border-left: 4px solid var(--teal);
  border-radius: 0 14px 14px 0;
  background: rgba(52, 198, 211, 0.08);
  color: #ffffff;
  letter-spacing: 0.02em;
}

.country-heading::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  border-radius: 999px;
  background: var(--teal);
  opacity: 0.85;
}

.country-block > p {
  max-width: 980px;
}

/* Macro destinations hero: match preferred site hero format */
.macro-destinations-hero .container::before {
  content: "MACRODIVERS";
}

.macro-destinations-hero p {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Site-wide hero consistency layer
   Keeps older hero-photo pages visually aligned with the preferred page-hero style. */
.hero .hero-inner,
.education-hero .wrap,
.camera-hero .wrap,
.destinations-map-hero__overlay {
  position: relative !important;
  z-index: 1 !important;
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.hero .hero-inner .eyebrow,
.education-hero .wrap .eyebrow,
.camera-hero .wrap .eyebrow {
  display: block !important;
  margin-bottom: 0.55rem !important;
  color: #34c6d3 !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

.hero .hero-inner h1,
.education-hero .wrap h1,
.camera-hero .wrap h1,
.destinations-map-hero__overlay h1 {
  color: #ffffff !important;
  font-size: clamp(2.45rem, 4.6vw, 4.15rem) !important;
  line-height: 1.04 !important;
  margin: 0 0 0.65rem !important;
  text-shadow:
    0 4px 18px rgba(0,0,0,0.95),
    0 0 24px rgba(0,0,0,0.65) !important;
}

.hero .hero-inner h1::after,
.education-hero .wrap h1::after,
.camera-hero .wrap h1::after,
.destinations-map-hero__overlay h1::after {
  content: "";
  display: block;
  width: 96px;
  height: 3px;
  margin: 0.72rem auto 0;
  background: #34c6d3;
  border-radius: 999px;
  box-shadow: 0 0 20px rgba(52,198,211,0.65);
}

.hero .hero-inner .mission,
.hero .hero-inner .intro,
.education-hero .wrap .mission,
.camera-hero .wrap .lead,
.destinations-map-hero__overlay p {
  color: #ffffff !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(0.98rem, 1.32vw, 1.12rem) !important;
  line-height: 1.42 !important;
  opacity: 1 !important;
  text-shadow:
    0 3px 14px rgba(0,0,0,0.95),
    0 0 20px rgba(0,0,0,0.65) !important;
}

.hero .hero-inner .intro {
  margin-top: 0.75rem !important;
  margin-bottom: 0 !important;
  max-width: 700px !important;
  opacity: 0.92 !important;
}

.hero .hero-inner .mission {
  margin-top: 1.15rem !important;
  margin-bottom: 0 !important;
}

.hero .hero-inner .button-row,
.education-hero .wrap .button-row,
.camera-hero .wrap .button-row {
  margin-top: 1.35rem !important;
}

/* Make sure old hero wrappers are not visually taller than the preferred hero treatment. */
.hero:not(.home-page-hero),
.education-hero,
.camera-hero,
.destinations-map-hero {
  min-height: 410px !important;
  height: 410px !important;
  padding: 6.6rem 1.5rem 3.4rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Blog feedback buttons */
.buttons button.selected {
  outline: 2px solid var(--accent, #34c6d3);
  box-shadow: 0 0 0 4px rgba(52, 198, 211, 0.16);
}


/* FAQ sections: shared MacroDivers styling
   Questions use the site turquoise accent; answers are indented with a subtle left rule.
   The !important flags deliberately override older page-level heading styles on legacy pages. */
.faq-section {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.faq-section > h2,
.faq-section .container > h2 {
  margin-bottom: 1.75rem;
}

.faq-section .faq-card {
  display: block;
  padding: 1.45rem 1.6rem;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.026));
  border: 1px solid rgba(52,198,211,0.22);
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
}

.faq-section .faq-card:hover {
  transform: translateY(-3px);
  border-color: rgba(52,198,211,0.52);
  background: linear-gradient(180deg, rgba(52,198,211,0.105), rgba(255,255,255,0.045));
  box-shadow: var(--shadow-card-hover);
}

.faq-section .faq-card h3 {
  margin: 0 0 0.75rem;
  color: var(--accent, #34c6d3);
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  line-height: 1.35;
}

.faq-section .faq-card p {
  margin: 0;
  padding-left: 1rem;
  border-left: 2px solid rgba(52,198,211,0.30);
  color: rgba(255,255,255,0.90);
  line-height: 1.72;
}

.faq-section .faq-card p:last-child {
  margin-bottom: 0;
}

/* Orders and Types of Sea Slugs Academy page */
.sea-slug-orders-hero {
  --education-hero-image: url("assets/images/academy-nudibranchs-hero.webp");
}

.sea-slug-orders-content .wrap {
  max-width: 1180px;
}

.sea-slug-orders-content > .wrap > p:not(.lead) {
  max-width: 860px;
}

.database-note,
.order-card,
.type-card,
.photo-needed-card,
.unknown-category-card,
.category-reference-section,
.sea-slug-cta {
  border: 1px solid rgba(52, 198, 211, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.026));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.database-note,
.unknown-category-card,
.category-reference-section,
.sea-slug-cta {
  margin-top: 32px;
  padding: clamp(1.35rem, 3vw, 2rem);
  border-radius: 24px;
}

.database-note {
  border-left: 4px solid #d6a642;
}

.database-note ul {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
}

.database-note strong,
.unknown-category-card strong,
.category-reference-table th {
  color: var(--teal);
}

.order-section {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.order-card {
  padding: clamp(1.35rem, 3vw, 2rem);
  border-radius: 24px;
  border-left: 4px solid #d6a642;
}

.order-card h2,
.category-reference-section h2,
.unknown-category-card h2,
.sea-slug-cta h2 {
  margin-top: 0;
  color: var(--white);
}

.common-name {
  color: rgba(255, 255, 255, 0.88);
}

.type-grid,
.photo-needed-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.type-card,
.photo-needed-card {
  border-radius: 22px;
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.type-card {
  padding: 0 1.25rem 1.25rem;
}

.photo-needed-card {
  padding: 1.35rem;
}

.type-card:hover,
.photo-needed-card:hover,
.unknown-category-card:hover,
.category-reference-section:hover {
  transform: translateY(-3px);
  border-color: rgba(52, 198, 211, 0.56);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.32), 0 0 28px rgba(52, 198, 211, 0.1);
}

.type-card h3,
.photo-needed-card h3 {
  margin: 0.25rem 0 0.75rem;
  color: var(--white);
}

.type-photo-placeholder {
  display: grid;
  min-height: 180px;
  margin: 0 -1.25rem 1.2rem;
  place-items: center;
  border-bottom: 1px solid rgba(52, 198, 211, 0.22);
  background:
    linear-gradient(135deg, rgba(52, 198, 211, 0.12), rgba(214, 166, 66, 0.11)),
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.08), transparent 34%),
    rgba(6, 26, 49, 0.72);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

.type-image {
  margin: 0 -1.25rem 1.2rem;
  border-bottom: 1px solid rgba(52, 198, 211, 0.22);
  background: rgba(3, 15, 28, 0.58);
}

.type-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: rgba(3, 15, 28, 0.88);
}

.type-image figcaption {
  padding: 0.78rem 1rem 0.9rem;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.92rem;
  line-height: 1.45;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.type-image figcaption em {
  color: var(--white);
}

.photo-needed-card strong {
  display: inline-flex;
  margin-top: 0.75rem;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  background: rgba(214, 166, 66, 0.12);
  border: 1px solid rgba(214, 166, 66, 0.36);
  color: #f3d68a;
}

.unknown-category-card {
  border-left: 4px solid var(--teal);
}

.category-reference-table-wrap {
  margin-top: 1.2rem;
  overflow-x: auto;
}

.category-reference-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.category-reference-table th,
.category-reference-table td {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
  vertical-align: top;
}

.category-reference-table tbody tr:hover {
  background: rgba(52, 198, 211, 0.08);
}

.sea-slug-cta .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.25rem;
}

@media (max-width: 980px) {
  .type-grid,
  .photo-needed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .type-grid,
  .photo-needed-grid {
    grid-template-columns: 1fr;
  }

  .type-photo-placeholder {
    min-height: 150px;
  }

  .category-reference-table {
    min-width: 640px;
  }
}


/* Hand signals resource page */
.infographic-figure {
  margin: 2rem auto 1rem;
  text-align: center;
}

.infographic-figure figcaption {
  max-width: 860px;
  margin: 1rem auto 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.98rem;
  line-height: 1.6;
}

.download-button-row {
  margin-top: 1.5rem;
}

.hand-signals-note {
  margin-top: -1rem;
  margin-bottom: 1.5rem;
}

.hand-signals-download-section .feature-infographic {
  max-width: 760px;
}





/* Nudibranch database reset button - inside search panel */
.database-reset-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  justify-self: start;
  align-self: end;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: #07566b;
  color: #ffffff;
  font-weight: 800;
  padding: 0.82rem 1.15rem;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 54, 68, 0.16);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.database-reset-btn:hover,
.database-reset-btn:focus {
  background: #003f52;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 54, 68, 0.22);
}

.database-reset-btn:focus-visible {
  outline: 3px solid rgba(0, 160, 190, 0.35);
  outline-offset: 3px;
}


/* Private nudibranch database colour filter alignment */
#database-primary-colour,
#database-second-colour,
#database-third-colour {
  width: 100%;
}

/* Make the 1st, 2nd and 3rd colour controls equal size in the filter grid */
.database-filters label:has(#database-primary-colour),
.database-filters label:has(#database-second-colour),
.database-filters label:has(#database-third-colour),
.database-search label:has(#database-primary-colour),
.database-search label:has(#database-second-colour),
.database-search label:has(#database-third-colour) {
  grid-column: span 1 !important;
}

/* Fallback classes if the browser ignores :has */
.colour-filter-equal {
  grid-column: span 1 !important;
}


/* Help tooltips for private nudibranch database */
.tooltip-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: help;
  border-bottom: 1px dotted rgba(0, 90, 110, 0.45);
}

.tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: #e8f7fb;
  color: #07566b;
  border: 1px solid #b8e2ec;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.tooltip-label::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.55rem);
  z-index: 50;
  width: min(280px, 80vw);
  padding: 0.7rem 0.8rem;
  border-radius: 0.75rem;
  background: #062d3a;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.35;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.25rem);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
  white-space: normal;
  font-style: normal;
}

.tooltip-label::before {
  content: "";
  position: absolute;
  left: 1rem;
  bottom: calc(100% + 0.2rem);
  z-index: 51;
  border: 0.4rem solid transparent;
  border-top-color: #062d3a;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.tooltip-label:hover::after,
.tooltip-label:focus::after,
.tooltip-label:focus-visible::after,
.tooltip-label:hover::before,
.tooltip-label:focus::before,
.tooltip-label:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.species-card h3 .tooltip-label,
.species-card summary .tooltip-label,
.database-card h3 .tooltip-label,
.database-card summary .tooltip-label {
  color: inherit;
}

@media (max-width: 720px) {
  .tooltip-label::after {
    left: 50%;
    transform: translate(-50%, 0.25rem);
  }

  .tooltip-label:hover::after,
  .tooltip-label:focus::after,
  .tooltip-label:focus-visible::after {
    transform: translate(-50%, 0);
  }
}


/* Colour filters are now all-colour match fields */
#database-primary-colour,
#database-second-colour,
#database-third-colour {
  width: 100%;
}


/* Small help text under database search field */
.database-field-hint {
  display: block;
  margin-top: 0.35rem;
  color: #486978;
  font-size: 0.82rem;
  font-weight: 650;
}


/* Private database admin action button */
.database-admin-actions {
  margin: 1.25rem 0 1.5rem;
  padding: 1rem 1.1rem;
  border-radius: 1rem;
  background: #f2fbfd;
  border: 1px solid #cbeaf0;
  box-shadow: 0 8px 22px rgba(0, 54, 68, 0.08);
}

.database-admin-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
}

.database-admin-note {
  margin: 0.65rem 0 0;
  color: #365b68;
  font-size: 0.92rem;
  line-height: 1.45;
}


/* Cleaner 404 page layout */
.not-found-page .not-found-hero {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(4rem, 10vw, 7rem) 1rem clamp(3rem, 7vw, 5rem);
}

.not-found-page .not-found-hero .hero-content {
  max-width: 880px;
  margin: 0 auto;
}

.not-found-page .not-found-hero h1 {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

.not-found-content {
  padding: clamp(2rem, 5vw, 4rem) 1rem;
  background: #061c26;
}

.not-found-card {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: clamp(1.35rem, 4vw, 2.2rem);
  border-radius: 1.35rem;
  background: rgba(255,255,255,0.96);
  color: #082f3d;
  border: 1px solid rgba(84,198,211,0.22);
  box-shadow: 0 18px 42px rgba(0,0,0,0.22);
  text-align: center;
}

.not-found-card h2 {
  color: #063547;
  margin-bottom: 0.65rem;
}

.not-found-card p {
  max-width: 640px;
  margin: 0 auto 1.25rem;
  color: #365b68;
  line-height: 1.6;
}

.not-found-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

.not-found-links .button {
  margin: 0;
}

@media (max-width: 700px) {
  .not-found-page .not-found-hero {
    min-height: 300px;
  }

  .not-found-links {
    flex-direction: column;
    align-items: stretch;
  }

  .not-found-links .button {
    width: 100%;
  }
}


/* Size filter/card display */
#database-size {
  width: 100%;
}

/* Home page Coral Triangle tooltip */
.home-page-hero .coral-triangle-term.tooltip-link {
  display: inline-block;
  position: relative;
  color: #ffffff !important;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: help;
}

.home-page-hero .coral-triangle-term.tooltip-link:hover,
.home-page-hero .coral-triangle-term.tooltip-link:focus,
.home-page-hero .coral-triangle-term.tooltip-link:focus-within {
  color: #34c6d3 !important;
  text-shadow: 0 0 18px rgba(52,198,211,0.85);
  outline: none;
}

.home-page-hero .coral-triangle-term .tooltip-text {
  width: min(380px, 86vw);
  background: rgba(6, 35, 63, 0.98);
  color: #ffffff;
  border: 1px solid rgba(52,198,211,0.35);
  border-radius: 14px;
  padding: 13px 15px;
  line-height: 1.45;
  font-size: 0.92rem;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  text-align: left;
  position: absolute;
  z-index: 99999;
  bottom: 135%;
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
  text-shadow: none;
  pointer-events: none;
}

.home-page-hero .coral-triangle-term .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: rgba(6, 35, 63, 0.98) transparent transparent transparent;
}

.home-page-hero .coral-triangle-term:hover .tooltip-text,
.home-page-hero .coral-triangle-term:focus .tooltip-text,
.home-page-hero .coral-triangle-term:focus-within .tooltip-text {
  visibility: visible;
  opacity: 1;
}


/* MacroDivers lightbox image size normalisation
   Keeps every opened lightbox image inside the same viewing frame.
   This changes only the enlarged lightbox view, not page text, layout,
   gallery thumbnail formatting, fonts or normal image sizes. */
.gallery-lightbox img,
.lightbox img {
  width: min(86vw, 1120px) !important;
  height: min(72vh, 700px) !important;
  max-width: min(86vw, 1120px) !important;
  max-height: min(72vh, 700px) !important;
  object-fit: contain !important;
  background: rgba(2, 10, 16, 0.78);
  border-radius: 18px;
}

@media (max-width: 700px) {
  .gallery-lightbox img,
  .lightbox img {
    width: 88vw !important;
    height: 66vh !important;
    max-width: 88vw !important;
    max-height: 66vh !important;
    border-radius: 12px;
  }
}
/* End MacroDivers lightbox image size normalisation */








/* MacroDivers shared Academy hero support for long page titles
   These five new diver education pages use the same page-hero academy-hero
   structure as the existing Academy pages. This modifier only prevents long
   H1 headings from over-scaling on wide screens. */
.page-hero.academy-hero.education-long-title-hero h1 {
  font-size: clamp(2.25rem, 3vw, 3.45rem) !important;
  line-height: 1.08 !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-hero.academy-hero.education-long-title-hero p {
  max-width: 850px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 1500px) {
  .page-hero.academy-hero.education-long-title-hero h1 {
    font-size: 3.45rem !important;
  }
}

@media (max-width: 700px) {
  .page-hero.academy-hero.education-long-title-hero h1 {
    font-size: clamp(2rem, 9vw, 2.9rem) !important;
    line-height: 1.1 !important;
  }
}
/* End MacroDivers shared Academy hero support for long page titles */

/* Homepage route cards
   Kept at the end so these cards retain their layout over older shared link styles. */
.home-pathways .home-pathway-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}

.home-pathways .home-pathway-card {
  display: flex;
  min-height: 180px;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
  color: #fff;
  text-decoration: none;
  box-shadow: 0 16px 38px rgba(0,0,0,0.22);
}

.home-pathways .home-pathway-card:hover {
  transform: translateY(-2px);
  border-color: rgba(52,198,211,0.48);
  background: linear-gradient(180deg, rgba(52,198,211,0.11), rgba(255,255,255,0.035));
}

.home-pathways .home-pathway-card span {
  color: var(--teal);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-pathways .home-pathway-card strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.22;
}

@media (max-width: 900px) {
  .home-pathways .home-pathway-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 580px) {
  .home-pathways .home-pathway-grid {
    grid-template-columns: 1fr;
  }

  .home-pathways .home-pathway-card {
    min-height: 140px;
  }
}

/* Standard hero photo assignments
   New pages should add a semantic hero class in HTML, then assign the photo
   here. The shared hero rules above control height, overlay, typography and
   responsive behaviour site-wide. */
.about-hero,
.legal-hero,
.full-story-hero,
.contact-hero {
  background-image: url("assets/images/about-hero.webp") !important;
  background-position: center 15% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.home-nudibranch-hero {
  background: url("assets/images/academy-nudibranchs-hero.webp") center/cover no-repeat !important;
}

.macro-destinations-photo-hero {
  background: url("assets/images/destinations-hero-world-map.webp") center/cover no-repeat !important;
}

.academy-hero {
  background: url("assets/images/academy-hero.webp") center/cover no-repeat !important;
}

.academy-nudibranchs-hero {
  background: url("assets/images/academy-nudibranchs-hero.webp") center/cover no-repeat !important;
}

.academy-photography-hero {
  background: url("assets/images/academy-photography-hero.webp") center/cover no-repeat !important;
}

.academy-diving-hero {
  background: url("assets/images/academy-diving-hero.webp") center/cover no-repeat !important;
}

.academy-marine-life-hero,
.frogfish-hero {
  background-image: url("assets/images/ghost-pipefish.webp") !important;
  background-position: center 42% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.macro-diving-skills-hero {
  background: url("assets/images/macro-diving-skills-hero.webp") center/cover no-repeat !important;
}

.responsible-muck-diving-hero {
  background: url("assets/images/responsible-muck-diving-hero.webp") center/cover no-repeat !important;
}

.better-macro-photography-hero {
  background: url("assets/images/better-macro-photography-hero.webp") center/cover no-repeat !important;
}

.camera-hero {
  background: url("assets/images/tg7-camera-setup.webp") center/cover no-repeat !important;
}

.destinations-map-hero {
  background: url("assets/images/destinations-hero-world-map.webp") center/cover no-repeat !important;
}

.ambon-hero {
  background: url("assets/images/ambon-hero.webp") center/cover no-repeat !important;
}

.anilao-hero {
  background: url("assets/images/anilao-hero.webp") center/cover no-repeat !important;
}

.mozambique-hero {
  background: url("assets/images/mozambique-hero.webp") center/cover no-repeat !important;
}

.raja-ampat-hero {
  background: url("assets/images/raja-ampat-hero.webp") center/cover no-repeat !important;
}

.coral-triangle-hero,
.nudibranch-hotspots-hero {
  background: url("assets/images/coral-triangle-hero.webp") center/cover no-repeat !important;
}

.identify-nudibranchs-hero,
.nudibranch-food-hero {
  background: url("assets/images/how-to-identify-nudibranchs-hero.webp") center/cover no-repeat !important;
}

.nudibranch-anatomy-photo-hero {
  background: url("assets/images/nudibranch-anatomy-hero.webp") center/cover no-repeat !important;
}

.nudibranch-behaviour-hero {
  background: url("assets/images/nudibranch-mating.webp") center/cover no-repeat !important;
}

.nudibranch-facts-hero {
  background: url("assets/images/chromodoris-willani-hero.webp") center/cover no-repeat !important;
}

.nudibranch-life-cycle-photo-hero {
  background: url("assets/images/dorid-nudibranch-anatomy-hero.webp") center/cover no-repeat !important;
}

.scientific-names-photo-hero {
  background: url("assets/images/scientific-names-hero-nudibranch.webp") center/cover no-repeat !important;
}

.what-is-nudibranch-photo-hero {
  background: url("assets/images/what-is-a-nudibranch-hero.webp") center/cover no-repeat !important;
}

.rhinophores-hero {
  background: linear-gradient(rgba(6, 26, 49, 0.42), rgba(6, 26, 49, 0.52)),
    url("images/nudibranchs/rhinophores/horizontal-perfoliate-goniobranchus.webp") center/cover no-repeat !important;
  background-position: center 46% !important;
}

.gills-hero {
  background: linear-gradient(rgba(6, 26, 49, 0.42), rgba(6, 26, 49, 0.54)),
    url("images/nudibranchs/gills/nudibranch-gills-external-retractable.webp") center/cover no-repeat !important;
  background-position: center 46% !important;
}

.gills-page .gills-hero .wrap,
.rhinophores-page .rhinophores-hero .wrap {
  max-width: 760px !important;
  padding-top: 0.4rem !important;
}

.gills-page .gills-hero .eyebrow,
.rhinophores-page .rhinophores-hero .eyebrow {
  margin-bottom: 0.65rem !important;
}

.gills-page .gills-hero h1,
.rhinophores-page .rhinophores-hero h1 {
  font-size: clamp(2.7rem, 4.4vw, 4.05rem) !important;
  line-height: 1.02 !important;
  margin-bottom: 0.8rem !important;
}

.gills-page .gills-hero h1::after,
.rhinophores-page .rhinophores-hero h1::after {
  margin-top: 0.75rem !important;
}

.gills-page .gills-hero .mission,
.rhinophores-page .rhinophores-hero .mission {
  max-width: 680px !important;
  margin-top: 0.85rem !important;
  margin-bottom: 0 !important;
  text-wrap: balance;
}

.gills-page .gills-content .wrap,
.rhinophores-page .rhinophores-content .wrap {
  max-width: 1120px;
}

.rhinophore-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1.25rem;
  margin: 2rem 0 2.75rem;
}

.rhinophore-fact-box,
.rhinophore-note,
.rhinophore-photo-tips,
.rhinophore-cta {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.026));
  border: 1px solid rgba(52, 198, 211, 0.22);
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  color: var(--soft);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.rhinophore-fact-box,
.rhinophore-note {
  padding: 1.25rem;
  border-left: 4px solid #d6a642;
}

.rhinophore-fact-box h2,
.rhinophore-note h2,
.rhinophore-photo-tips h2,
.rhinophore-cta h2 {
  color: var(--white);
}

.rhinophore-fact-box .eyebrow,
.rhinophore-note .eyebrow {
  color: var(--teal);
}

.rhinophore-fact-box:hover,
.rhinophore-note:hover,
.rhinophore-fact-box:focus-within,
.rhinophore-note:focus-within {
  transform: translateY(-3px);
  border-color: rgba(52, 198, 211, 0.56);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.32), 0 0 28px rgba(52, 198, 211, 0.1);
}

.rhinophore-fact-box h2,
.rhinophore-note p:last-child,
.rhinophore-photo-tips p:last-child {
  margin-bottom: 0;
}

.rhinophore-fact-box ul,
.rhinophore-photo-tips ul {
  margin: 0.75rem 0 0;
  padding-left: 1.2rem;
}

.rhinophore-fact-box li,
.rhinophore-photo-tips li {
  margin: 0.45rem 0;
}

.rhinophore-type {
  margin: 3rem 0;
}

.rhinophore-subtype-list {
  margin: 1rem 0 1.25rem;
  padding-left: 1.2rem;
}

.rhinophore-subtype-list li {
  margin: 0.5rem 0;
}

.rhinophore-subtype-list strong {
  color: var(--white);
}

.rhinophore-type h2,
.rhinophore-table-section h2,
.rhinophore-photo-tips h2 {
  margin-bottom: 0.75rem;
}

.look-for,
.responsible-note {
  border-left: 4px solid #10b3a3;
  background: rgba(16, 179, 163, 0.1);
  padding: 0.85rem 1rem;
  border-radius: 0 8px 8px 0;
}

.rhinophore-gallery {
  --rhinophore-card-width: 260px;
  display: grid;
  gap: 1rem;
  justify-content: center;
  margin: 1.5rem 0 2.5rem;
}

.rhinophore-gallery.three {
  grid-template-columns: repeat(3, minmax(0, var(--rhinophore-card-width)));
}

.rhinophore-gallery.two {
  grid-template-columns: repeat(2, minmax(0, var(--rhinophore-card-width)));
}

.rhinophore-gallery.four {
  grid-template-columns: repeat(4, minmax(0, var(--rhinophore-card-width)));
}

.rhinophore-gallery.single {
  grid-template-columns: minmax(0, var(--rhinophore-card-width));
}

.rhinophore-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.026));
  border: 1px solid rgba(52, 198, 211, 0.22);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  margin: 0;
  min-height: 100%;
}

.rhinophore-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.rhinophore-card figcaption {
  padding: 0.75rem 0.9rem;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--white);
  min-height: 7.25rem;
}

.rhinophore-card figcaption span {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.gill-card figcaption strong {
  display: block;
  margin-bottom: 0.35rem;
}

.rhinophore-table-section {
  margin: 3rem 0;
}

.rhinophore-table-section .responsive-table {
  overflow-x: auto;
  border: 1px solid rgba(52, 198, 211, 0.22);
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.rhinophore-table-section table {
  width: 100%;
  border-collapse: collapse;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.026));
  border-radius: 24px;
  overflow: hidden;
}

.rhinophore-table-section th,
.rhinophore-table-section td {
  padding: 0.85rem;
  border-bottom: 1px solid rgba(52, 198, 211, 0.16);
  text-align: left;
  vertical-align: top;
  color: var(--soft);
}

.rhinophore-table-section th {
  background: rgba(9, 40, 70, 0.92);
  color: var(--white);
}

.rhinophore-table-section td:first-child,
.rhinophore-table-section td em {
  color: var(--white);
}

.rhinophore-photo-tips {
  padding: 1.5rem;
  margin: 3rem 0;
}

.rhinophore-cta {
  padding: 1.5rem;
  margin-top: 3rem;
}

.body-types-page .body-types-hero {
  background:
    linear-gradient(rgba(3, 13, 25, 0.45), rgba(3, 13, 25, 0.64)),
    url("images/nudibranchs/body-types/oval-goniobranchus.webp") center/cover no-repeat !important;
}

.body-type-gallery {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
  justify-content: center;
}

.body-type-gallery.three {
  grid-template-columns: repeat(3, minmax(0, 260px));
}

.body-type-card {
  background: #ffffff;
  border: 1px solid rgba(8, 47, 73, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.body-type-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.body-type-card figcaption {
  padding: 0.75rem 0.9rem;
  color: #123047;
  font-size: 0.95rem;
  line-height: 1.4;
}

.body-type-card figcaption span {
  display: block;
  margin-top: 0.35rem;
  color: #45606f;
  font-size: 0.84rem;
}

.body-type-note {
  border-left: 4px solid #1aa6a6;
  background: rgba(26, 166, 166, 0.08);
  padding: 1rem;
  border-radius: 12px;
  margin: 1rem 0 1.5rem;
}

.body-type-note ul {
  margin: 0.65rem 0 0;
  padding-left: 1.25rem;
}

.body-type-note li + li {
  margin-top: 0.35rem;
}

@media (max-width: 950px) {
  .rhinophore-top-grid,
  .rhinophore-gallery.three,
  .rhinophore-gallery.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rhinophore-gallery {
    --rhinophore-card-width: 320px;
  }

  .rhinophore-gallery.three,
  .rhinophore-gallery.four,
  .rhinophore-gallery.two {
    grid-template-columns: repeat(2, minmax(0, var(--rhinophore-card-width)));
  }

  .body-type-gallery.three {
    grid-template-columns: repeat(2, minmax(0, 320px));
  }
}

@media (max-width: 650px) {
  .gills-page .gills-hero,
  .rhinophores-page .rhinophores-hero,
  .body-types-page .body-types-hero {
    min-height: 360px !important;
    height: 360px !important;
    padding-top: 5.4rem !important;
    padding-bottom: 2.3rem !important;
  }

  .gills-page .gills-hero .wrap,
  .rhinophores-page .rhinophores-hero .wrap,
  .body-types-page .body-types-hero .wrap {
    max-width: 100% !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .gills-page .gills-hero h1,
  .rhinophores-page .rhinophores-hero h1,
  .body-types-page .body-types-hero h1 {
    font-size: clamp(2.05rem, 10vw, 2.75rem) !important;
  }

  .gills-page .gills-hero .mission,
  .rhinophores-page .rhinophores-hero .mission,
  .body-types-page .body-types-hero .mission {
    font-size: 0.98rem !important;
    line-height: 1.35 !important;
  }

  .rhinophore-top-grid,
  .rhinophore-gallery.three,
  .rhinophore-gallery.two,
  .rhinophore-gallery.four,
  .rhinophore-gallery.single {
    grid-template-columns: 1fr;
  }

  .body-type-gallery.three {
    grid-template-columns: 1fr;
  }

  .rhinophore-gallery {
    --rhinophore-card-width: 100%;
  }

  .rhinophore-card figcaption {
    min-height: 0;
  }

  .rhinophore-fact-box,
  .rhinophore-note,
  .rhinophore-photo-tips,
  .rhinophore-cta {
    padding: 1rem;
  }

  .rhinophore-table-section th,
  .rhinophore-table-section td {
    min-width: 11rem;
  }
}

.database-hero {
  background: url("assets/images/species-database-hero.webp") center/cover no-repeat !important;
}

.not-found-hero {
  background: url("assets/images/index-gallery-22.webp") center/cover no-repeat !important;
}

/* Best Macro Diving Destinations: keep destination name text on-brand blue. */
.macro-destinations-page .macro-pick-grid .academy-card p strong,
.macro-destinations-page .coral-destination-grid .card-body p strong {
  color: var(--teal) !important;
}

/* Rhinophores page readability override: keep these elements in the MacroDivers dark card style. */
.gills-page .rhinophore-fact-box,
.gills-page .rhinophore-note,
.gills-page .rhinophore-photo-tips,
.gills-page .rhinophore-cta,
.gills-page .rhinophore-card,
.rhinophores-page .rhinophore-fact-box,
.rhinophores-page .rhinophore-note,
.rhinophores-page .rhinophore-photo-tips,
.rhinophores-page .rhinophore-cta,
.rhinophores-page .rhinophore-card,
.rhinophores-page .rhinophore-table-section table {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.026)) !important;
  border-color: rgba(52, 198, 211, 0.22) !important;
  color: var(--soft) !important;
}

.gills-page .rhinophore-fact-box *,
.gills-page .rhinophore-note *,
.gills-page .rhinophore-photo-tips *,
.gills-page .rhinophore-cta *,
.gills-page .rhinophore-card figcaption,
.rhinophores-page .rhinophore-fact-box *,
.rhinophores-page .rhinophore-note *,
.rhinophores-page .rhinophore-photo-tips *,
.rhinophores-page .rhinophore-cta *,
.rhinophores-page .rhinophore-card figcaption,
.rhinophores-page .rhinophore-table-section td {
  color: var(--soft) !important;
}

.gills-page .rhinophore-fact-box h2,
.gills-page .rhinophore-note h2,
.gills-page .rhinophore-photo-tips h2,
.gills-page .rhinophore-cta h2,
.gills-page .rhinophore-card figcaption,
.gills-page .gill-card figcaption strong,
.rhinophores-page .rhinophore-fact-box h2,
.rhinophores-page .rhinophore-note h2,
.rhinophores-page .rhinophore-photo-tips h2,
.rhinophores-page .rhinophore-cta h2,
.rhinophores-page .rhinophore-table-section h2,
.rhinophores-page .rhinophore-table-section th,
.rhinophores-page .rhinophore-table-section td:first-child,
.rhinophores-page .rhinophore-table-section td em,
.rhinophores-page .rhinophore-card figcaption {
  color: var(--white) !important;
}

.gills-page .rhinophore-fact-box .eyebrow,
.gills-page .rhinophore-note .eyebrow,
.rhinophores-page .rhinophore-fact-box .eyebrow,
.rhinophores-page .rhinophore-note .eyebrow {
  color: var(--teal) !important;
}

.rhinophores-page .rhinophore-table-section th {
  background: rgba(9, 40, 70, 0.92) !important;
}

/* =========================================================
   4. Global layout and component adapters
   =========================================================

   These rules bridge older page families (`.content-section`, `.container`,
   `.academy-grid`) to the shared Phase 2 system without changing page
   structure. New pages should use `.page-section`, `.section-inner`,
   `.content-*`, `.card-grid` and shared card classes directly.
*/
.content-section .container,
.content-section .wrap,
.education-section .wrap,
.academy-preview .container,
.academy-preview .wrap,
.faq-section .container,
.return-link-section .container {
  margin-left: auto;
  margin-right: auto;
}

.content-section .container > h2:first-child,
.content-section .container.narrow > h2:first-child,
.education-section .wrap > h2,
.academy-preview .container > h2,
.academy-preview .wrap > h2,
.faq-section > h2,
.faq-section .container > h2,
.return-link-section h2,
.return-link-section h3,
.rhinophore-type > h2,
.rhinophore-table-section > h2,
.rhinophore-photo-tips > h2,
.order-section > h2,
.category-reference-section > h2,
.sea-slug-cta > h2 {
  text-align: center;
}

.content-section .container > h2:first-child::after,
.content-section .container.narrow > h2:first-child::after,
.education-section .wrap > h2::after,
.academy-preview .container > h2::after,
.academy-preview .wrap > h2::after {
  margin-left: auto;
  margin-right: auto;
}

main section p.lead,
p.lead,
.section-intro,
.section-heading,
.academy-preview .section-heading,
.content-section .container > h2:first-child + p,
.content-section .container.narrow > h2:first-child + p,
.education-section .wrap > h2 + p,
.academy-preview .container > h2:first-child + p,
.academy-preview .wrap > h2:first-child + p {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.grid,
.academy-grid,
.education-grid,
.guide-grid-2,
.guide-grid-3,
.id-guide-grid,
.mistake-grid,
.macro-two-card-grid,
.macro-three-card-grid,
.type-grid,
.photo-needed-grid,
.faq-section .faq-grid,
.home-pathway-grid,
.home-pathways .home-pathway-grid,
.photo-mosaic,
.rhinophore-gallery {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.academy-grid,
.education-grid,
.guide-grid-2,
.guide-grid-3,
.id-guide-grid,
.mistake-grid,
.macro-two-card-grid,
.macro-three-card-grid,
.type-grid,
.photo-needed-grid,
.faq-section .faq-grid,
.home-pathway-grid,
.home-pathways .home-pathway-grid,
.photo-mosaic {
  justify-content: center;
}

.button-row,
.sea-slug-cta .button-row,
.home-cta-row {
  justify-content: center;
}

.academy-card,
.destination-card,
.guide-card,
.comparison-card,
.education-card,
.diagram-card,
.info-card,
.return-link-card,
.academy-crosslink,
.id-guide-card,
.card,
.faq-section .faq-card,
.home-pathway-card,
.home-pathways .home-pathway-card,
.type-card,
.photo-needed-card,
.rhinophore-card {
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease,
    filter 0.22s ease;
}

.academy-card:hover,
.destination-card:hover,
.guide-card:hover,
.comparison-card:hover,
.education-card:hover,
.diagram-card:hover,
.info-card:hover,
.return-link-card:hover,
.academy-crosslink:hover,
.id-guide-card:hover,
.card:hover,
.faq-section .faq-card:hover,
.home-pathway-card:hover,
.home-pathways .home-pathway-card:hover,
.type-card:hover,
.photo-needed-card:hover,
.rhinophore-card:hover {
  transform: translateY(-3px);
  border-color: rgba(52, 198, 211, 0.56);
  background: linear-gradient(180deg, rgba(52, 198, 211, 0.105), rgba(255, 255, 255, 0.045));
  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(52, 198, 211, 0.10),
    0 0 28px rgba(52, 198, 211, 0.09);
}

.academy-card:focus-within,
.destination-card:focus-within,
.guide-card:focus-within,
.comparison-card:focus-within,
.education-card:focus-within,
.diagram-card:focus-within,
.info-card:focus-within,
.return-link-card:focus-within,
.academy-crosslink:focus-within,
.id-guide-card:focus-within,
.card:focus-within,
.faq-section .faq-card:focus-within,
.home-pathway-card:focus-visible,
.home-pathways .home-pathway-card:focus-visible,
.type-card:focus-within,
.photo-needed-card:focus-within,
.rhinophore-card:focus-within {
  outline: 2px solid rgba(52, 198, 211, 0.78);
  outline-offset: 4px;
}

@media (max-width: 800px) {
  .academy-card:hover,
  .destination-card:hover,
  .guide-card:hover,
  .comparison-card:hover,
  .education-card:hover,
  .diagram-card:hover,
  .info-card:hover,
  .return-link-card:hover,
  .academy-crosslink:hover,
  .id-guide-card:hover,
  .card:hover,
  .faq-section .faq-card:hover,
  .home-pathway-card:hover,
  .home-pathways .home-pathway-card:hover,
  .type-card:hover,
  .photo-needed-card:hover,
  .rhinophore-card:hover {
    transform: none;
  }
}

/* Container-first alignment fixes for screenshot regressions.
   These center the visible block/grid/card, while long copy remains readable. */
.container {
  width: min(100%, 1180px);
  margin-left: auto;
  margin-right: auto;
}

.container.narrow {
  width: min(100%, 900px);
}

.personal-stay-review {
  text-align: center;
}

.personal-stay-review .container {
  width: min(100%, var(--md-content-medium));
  margin-left: auto;
  margin-right: auto;
}

.personal-stay-review .section-heading {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.personal-stay-review-card {
  width: min(100%, 840px);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.personal-stay-review-card p {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.return-link-section .container,
.return-link-section .container.narrow {
  width: min(100%, var(--md-content-medium));
  margin-left: auto;
  margin-right: auto;
}

.return-link-card {
  width: min(100%, 860px);
  margin-left: auto;
  margin-right: auto;
}

.species-database-public .species-database-public-inner {
  width: min(100%, var(--md-content-wide));
  max-width: var(--md-content-wide);
  margin-left: auto;
  margin-right: auto;
}

.species-database-public .species-database-header {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.species-database-public .species-database-header p,
.species-database-public .species-database-support {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.species-database-public .academy-grid {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.species-database-public .species-teaser {
  width: min(100%, 860px);
  margin: 2.25rem auto 0;
}

.species-database-public .species-teaser h2 {
  text-align: center;
}

.species-database-public .species-teaser p {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.species-database-public > .container > p:last-child {
  max-width: 820px;
  margin: 2rem auto 0;
  text-align: center;
}

.personal-stay-review-card,
.species-database-public .species-teaser {
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

.personal-stay-review-card:hover,
.personal-stay-review-card:focus-within,
.species-database-public .species-teaser:hover,
.species-database-public .species-teaser:focus-within {
  transform: translateY(-3px);
  border-color: rgba(52, 198, 211, 0.62);
  background: linear-gradient(180deg, rgba(52, 198, 211, 0.11), rgba(255, 255, 255, 0.045));
  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(52, 198, 211, 0.10),
    0 0 28px rgba(52, 198, 211, 0.10);
}

/* FAQ alignment hardening: center the whole FAQ block and grid on every public page. */
.faq-section {
  text-align: center;
}

.faq-section > .container,
.faq-section > .container.narrow,
.content-section.faq-section > .container,
.content-section.faq-section > .container.narrow {
  width: min(100%, var(--md-content-wide));
  max-width: var(--md-content-wide);
  margin-left: auto;
  margin-right: auto;
}

.faq-section > h2,
.faq-section .container > h2,
.content-section.faq-section .container > h2 {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.faq-section > h2::after,
.faq-section .container > h2::after,
.content-section.faq-section .container > h2::after {
  margin-left: auto;
  margin-right: auto;
}

.faq-section .faq-grid {
  width: min(100%, var(--md-content-wide));
  max-width: var(--md-content-wide);
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.faq-section .faq-card {
  text-align: left;
}

/* Shared page layout system
   Use these classes for new public pages instead of page-specific alignment fixes. */
.page-section {
  width: 100%;
  padding: clamp(3.5rem, 7vw, 5.75rem) var(--md-page-gutter);
}

.section-inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.content-narrow {
  max-width: var(--md-content-narrow);
}

.content-medium {
  max-width: var(--md-content-medium);
}

.content-wide {
  max-width: var(--md-content-wide);
}

.content-full {
  max-width: none;
}

.section-header {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-label {
  margin: 0 0 0.55rem;
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.section-title {
  text-align: center;
}

.section-intro {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.feature-card,
.blue-card,
.cta-card,
.review-card,
.database-card,
.resource-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(52, 198, 211, 0.22);
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
}

.feature-card:hover,
.blue-card:hover,
.cta-card:hover,
.review-card:hover,
.database-card:hover,
.resource-card:hover,
.feature-card:focus-within,
.blue-card:focus-within,
.cta-card:focus-within,
.review-card:focus-within,
.database-card:focus-within,
.resource-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(52, 198, 211, 0.56);
  background: linear-gradient(180deg, rgba(52, 198, 211, 0.105), rgba(255, 255, 255, 0.045));
  box-shadow: var(--shadow-card-hover);
}

.feature-card:focus-within,
.blue-card:focus-within,
.cta-card:focus-within,
.review-card:focus-within,
.database-card:focus-within,
.resource-card:focus-within {
  outline: 2px solid rgba(52, 198, 211, 0.78);
  outline-offset: 4px;
}

.cta-section,
.review-section,
.related-links {
  text-align: center;
}

.cta-card,
.review-card {
  width: min(100%, 860px);
  margin-left: auto;
  margin-right: auto;
}

.review-card {
  text-align: left;
}

@media (max-width: 800px) {
  .feature-card:hover,
  .blue-card:hover,
  .cta-card:hover,
  .review-card:hover,
  .database-card:hover,
  .resource-card:hover {
    transform: none;
  }
}

.page-section,
.content-section.faq-section,
.personal-stay-review,
.return-link-section {
  box-sizing: border-box;
  width: 100%;
  padding-left: var(--md-page-gutter);
  padding-right: var(--md-page-gutter);
}

.section-inner,
.content-section.faq-section > .container,
.content-section.faq-section > .container.narrow,
.faq-section > .container,
.faq-section > .container.narrow,
.personal-stay-review > .container,
.return-link-section > .container,
.return-link-section > .container.narrow {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--md-content-wide);
  margin-left: auto;
  margin-right: auto;
}

.content-narrow {
  max-width: var(--md-content-narrow);
}

.content-medium,
.personal-stay-review > .container,
.return-link-section > .container,
.return-link-section > .container.narrow {
  max-width: var(--md-content-medium);
}

.content-wide,
.content-section.faq-section > .container,
.content-section.faq-section > .container.narrow,
.faq-section > .container,
.faq-section > .container.narrow {
  max-width: var(--md-content-wide);
}

.section-header,
.section-heading,
.personal-stay-review .section-heading,
.faq-section > h2,
.faq-section .container > h2,
.content-section.faq-section .container > h2 {
  box-sizing: border-box;
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-intro,
.personal-stay-review-intro {
  box-sizing: border-box;
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.faq-section .faq-card,
.card-grid > *,
.feature-card,
.blue-card,
.cta-card,
.review-card,
.database-card {
  box-sizing: border-box;
  min-width: 0;
}

.personal-stay-review-card,
.review-card,
.cta-card,
.return-link-card,
.academy-crosslink.return-link-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.personal-stay-review-card,
.review-card {
  text-align: left;
}

.personal-stay-review-card p,
.review-card p {
  text-align: left;
}

.return-link-card,
.academy-crosslink.return-link-card {
  text-align: center;
}

.related-learning-card {
  text-align: center;
}

.related-learning-card p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.related-learning-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.35rem;
}

.related-learning-button {
  white-space: normal;
}

@media (max-width: 520px) {
  :root {
    --md-page-gutter: clamp(1rem, 5vw, 1.25rem);
  }
}

/* =========================================================
   Shared balanced card layout system
   =========================================================

   Current classes:
   - .card-grid: base flex-wrapped card group.
   - .card-grid-balanced: standard editorial cards.
   - .card-grid-compact: smaller route/link cards.
   - .card-grid-wide: wider FAQ/explainer cards.
   - .card-grid-featured: allows a wider lead card when content needs it.

   Legacy grid classes are kept only as compatibility aliases. They should not
   grow new page-specific layout logic; new pages should use the shared classes.
*/
.card-grid,
.card-grid-balanced,
.card-grid-compact,
.card-grid-wide,
.card-grid-featured,
.academy-grid,
.education-grid,
.guide-grid-2,
.guide-grid-3,
.id-guide-grid,
.mistake-grid,
.macro-pick-grid,
.macro-two-card-grid,
.macro-three-card-grid,
.type-grid,
.photo-needed-grid,
.faq-section .faq-grid,
.home-pathway-grid,
.home-pathways .home-pathway-grid,
.ct-card-grid,
.grid {
  --card-grid-min: 250px;
  --card-grid-max: 300px;
  box-sizing: border-box;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.5rem);
  width: 100%;
  max-width: var(--md-content-wide);
  margin-left: auto;
  margin-right: auto;
}

.card-grid > *,
.card-grid-balanced > *,
.card-grid-compact > *,
.card-grid-wide > *,
.card-grid-featured > *,
.academy-grid > *,
.education-grid > *,
.guide-grid-2 > *,
.guide-grid-3 > *,
.id-guide-grid > *,
.mistake-grid > *,
.macro-pick-grid > *,
.macro-two-card-grid > *,
.macro-three-card-grid > *,
.type-grid > *,
.photo-needed-grid > *,
.faq-section .faq-grid > *,
.home-pathway-grid > *,
.home-pathways .home-pathway-grid > *,
.ct-card-grid > *,
.grid > * {
  box-sizing: border-box;
  flex: 1 1 var(--card-grid-min);
  max-width: var(--card-grid-max);
  min-width: min(100%, var(--card-grid-min));
}

.card-grid-compact,
.home-pathway-grid,
.home-pathways .home-pathway-grid {
  --card-grid-min: 220px;
  --card-grid-max: 280px;
}

.card-grid-wide,
.card-grid-2,
.guide-grid-2,
.macro-two-card-grid,
.faq-section .faq-grid {
  --card-grid-min: 360px;
  --card-grid-max: 540px;
}

.card-grid-featured {
  --card-grid-min: 300px;
  --card-grid-max: 620px;
}

.card-grid-3,
.guide-grid-3,
.macro-three-card-grid {
  --card-grid-min: 250px;
  --card-grid-max: 320px;
}

@media (max-width: 900px) {
  .card-grid,
  .card-grid-balanced,
  .card-grid-compact,
  .card-grid-wide,
  .card-grid-featured,
  .academy-grid,
  .education-grid,
  .guide-grid-2,
  .guide-grid-3,
  .id-guide-grid,
  .mistake-grid,
  .macro-pick-grid,
  .macro-two-card-grid,
  .macro-three-card-grid,
  .type-grid,
  .photo-needed-grid,
  .faq-section .faq-grid,
  .home-pathway-grid,
  .home-pathways .home-pathway-grid,
  .ct-card-grid,
  .grid {
    --card-grid-min: 300px;
    --card-grid-max: 420px;
  }
}

@media (max-width: 620px) {
  .card-grid,
  .card-grid-balanced,
  .card-grid-compact,
  .card-grid-wide,
  .card-grid-featured,
  .academy-grid,
  .education-grid,
  .guide-grid-2,
  .guide-grid-3,
  .id-guide-grid,
  .mistake-grid,
  .macro-pick-grid,
  .macro-two-card-grid,
  .macro-three-card-grid,
  .type-grid,
  .photo-needed-grid,
  .faq-section .faq-grid,
  .home-pathway-grid,
  .home-pathways .home-pathway-grid,
  .ct-card-grid,
  .grid {
    --card-grid-min: 100%;
    --card-grid-max: 100%;
  }
}

/* Current contact/social component.
   Keep this as one centred component: two independent cards, social links, then trust note. */
.contact-social-section {
  text-align: center !important;
}

.contact-social-inner {
  max-width: var(--md-content-wide) !important;
  margin-inline: auto !important;
}

.contact-social-header {
  max-width: 760px !important;
  margin-inline: auto !important;
}

.contact-card-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: var(--space-lg) !important;
  width: min(100%, 980px) !important;
  margin: var(--space-lg) auto 0 !important;
}

.contact-card-grid > .contact-card {
  flex: 1 1 320px !important;
  width: auto !important;
  min-width: 280px !important;
  max-width: 460px !important;
}

.contact-card {
  text-align: left !important;
  padding: var(--space-lg) !important;
  border-radius: var(--radius-card) !important;
  background: linear-gradient(180deg, rgba(11, 35, 51, 0.96), rgba(8, 27, 40, 0.96)) !important;
  border: 1px solid rgba(52, 198, 211, 0.24) !important;
  box-shadow: var(--shadow-card) !important;
}

.contact-card-label {
  display: block !important;
  margin: 0 0 var(--space-sm) !important;
  color: var(--teal) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
}

.contact-card h3 {
  margin: 0 0 var(--space-sm) !important;
}

.contact-role {
  margin: 0 0 var(--space-md) !important;
  color: var(--md-muted) !important;
  line-height: 1.65 !important;
}

.contact-link-list {
  display: grid !important;
  gap: var(--space-sm) !important;
}

.contact-link-list p {
  display: block !important;
  margin: 0 !important;
}

.contact-link-list span {
  display: block !important;
  margin: 0 0 0.15rem !important;
  color: var(--muted) !important;
  font-size: 0.85rem !important;
}

.contact-link-list a {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

.social-follow-block {
  width: min(100%, 760px) !important;
  margin: var(--space-xl) auto 0 !important;
  text-align: center !important;
}

.social-follow-title {
  margin: 0 0 var(--space-sm) !important;
  font-weight: 700 !important;
}

.social-link-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: var(--space-sm) !important;
}

.social-link-row a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.45rem 0.9rem !important;
  border: 1px solid rgba(43, 224, 230, 0.45) !important;
  border-radius: 999px !important;
  text-decoration: none !important;
}

.contact-trust-note {
  max-width: 760px !important;
  margin: var(--space-md) auto 0 !important;
  color: var(--muted) !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  .contact-card-grid {
    flex-direction: column !important;
    align-items: center !important;
  }

  .contact-card-grid > .contact-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 520px !important;
  }
}