/* ============================================
   ATLANTIC OCEAN — STYLES
   --------------------------------------------
   Structure:
   1. CSS variables (theme tokens)
   2. Base / reset
   3. Typography
   4. Buttons
   5. Navigation
   6. Hero (homepage)
   7. Naturally Majestic section
   8. Destinations carousel
   9. Marine Life grid
   10. CTA banner
   11. Page hero (subpages)
   12. Content blocks
   13. Pillars (conservation)
   14. Facts strip (about)
   15. Contact form
   16. Footer
   17. Responsive
   ============================================ */


/* 1. CSS VARIABLES
   ============================================ */
:root {
    /* Colors */
    --color-navy: #0a1535;
    --color-navy-deep: #050d24;
    --color-cream: #f5f1e8;
    --color-white: #ffffff;
    --color-aqua: #9fd8e0;
    --color-aqua-pale: #c8e8ed;
    --color-coral: #e8927c;
    --color-text: #f5f1e8;
    --color-text-muted: rgba(245, 241, 232, 0.75);
    --color-border: rgba(245, 241, 232, 0.2);

    /* Typography */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Lora', Georgia, serif;

    /* Spacing */
    --section-padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 5rem);
    --max-width: 1280px;

    /* Transitions */
    --transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


/* 2. BASE / RESET
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* offset for sticky nav */
}

body {
    font-family: var(--font-body);
    background-color: var(--color-navy);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}


/* 3. TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.section__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--color-cream);
}

.section__title--left {
    text-align: left;
}

.section__subtitle {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    margin-bottom: 3rem;
    font-style: italic;
}


/* 4. BUTTONS
   ============================================ */
.btn {
    display: inline-block;
    padding: 0.85rem 2.25rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}

.btn--ghost {
    background: transparent;
    border-color: var(--color-cream);
    color: var(--color-cream);
}

.btn--ghost:hover {
    background: var(--color-cream);
    color: var(--color-navy);
}

.btn--solid {
    background: var(--color-cream);
    color: var(--color-navy);
    border-color: var(--color-cream);
}

.btn--solid:hover {
    background: transparent;
    color: var(--color-cream);
}


/* 5. NAVIGATION
   --------------------------------------------
   Default state (hero, top of page): transparent bar, only the hamburger
   visible top-left. .nav--scrolled (added by JS once the user scrolls past
   the hero) and .nav--solid (set on sub-pages) flip on the frosted-glass
   bar and reveal the logo + menu links. */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 2rem;
    background: transparent;
    transition: background var(--transition), backdrop-filter var(--transition), border-color var(--transition);
    border-bottom: 1px solid transparent;
}

/* Frosted-glass bar — applied either when JS adds .nav--scrolled or as the
   default on sub-pages via .nav--solid */
.nav--scrolled,
.nav--solid {
    background: rgba(10, 21, 53, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: rgba(245, 241, 232, 0.08);
}

.nav__toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex: 0 0 auto;
}

.nav__toggle span {
    width: 28px;
    height: 2px;
    background: var(--color-cream);
    transition: var(--transition);
}

.nav__logo {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-cream);
    letter-spacing: 0.02em;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

.nav__menu {
    display: flex;
    gap: 2rem;
    align-items: center;
    margin-left: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

.nav__menu a {
    display: inline-block;
    font-size: 0.95rem;
    color: var(--color-cream);
    transition: opacity var(--transition);
    position: relative;
    /* Bigger click hitbox: the text alone is too thin to hit reliably,
       especially on the bar's vertical edges. Padding pushes the
       clickable area out without changing the visible spacing because
       the menu uses `gap: 2rem` instead of margins. */
    padding: 0.6rem 0.4rem;
    margin: -0.6rem -0.4rem;
}

.nav__menu a:hover,
.nav__menu a.active {
    opacity: 0.7;
}

/* Reveal logo + menu once the bar is in its visible state. .is-open lets the
   hamburger pop the menu open in any state. The mobile media query overrides
   .nav__menu to a slide-down panel so the desktop opacity rule doesn't make
   it visible there until the user actually taps the hamburger. */
.nav--scrolled .nav__logo,
.nav--solid .nav__logo,
.nav--scrolled .nav__menu,
.nav--solid .nav__menu,
.nav__menu.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* On desktop, once the bar is visible the hamburger is redundant — hide it. */
.nav--scrolled .nav__toggle,
.nav--solid .nav__toggle {
    display: none;
}


/* 6. HERO (HOMEPAGE)
   --------------------------------------------
   Replace background-image URL with your final HD ocean/turtle image.
   ============================================ */
/* HERO is now a 250vh tall scroll-driven section. Its sticky inner viewport
   pins to the user's screen for the entire scroll. Inside, layered z-stack:
     0  hero video (plays at scroll = 0)
     1  scroll-frame canvas (fades in once scroll > 0; overlays the video)
     2  Naturally Majestic reveal (fades in during last ~30 frames)
     3  hero content (AO logo + Explore; fades out as the reveal begins) */
.hero {
    position: relative;
    height: 250vh;
    background: var(--color-navy-deep) url('../Media/Herobackground.png') center/cover no-repeat;
}

.hero__viewport {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-navy-deep) url('../Media/Herobackground.png') center/cover no-repeat;
}

.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.hero__video.is-active {
    opacity: 1;
}

/* Scroll-frame canvas. Sits above the video and below the content. Hidden
   until the user scrolls — class .is-active flips it on. */
.hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease-out;
    pointer-events: none;
}

.hero__canvas.is-active {
    opacity: 1;
}

/* Hero title block (AO logo + Explore). Visible at scroll=0; fades out as
   the Naturally Majestic reveal begins so the two don't visually clash. */
.hero__content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: var(--color-cream);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.hero__content.is-fading-out {
    opacity: 0;
    transform: translateY(-1.5rem);
    pointer-events: none;
}

.hero__title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 500;
    font-style: italic;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* The stage wraps the img + canvas so the canvas can absolutely overlay the
   img at the same size. inline-block so the stage shrinks to fit the img. */
.hero__title-stage {
    position: relative;
    display: inline-block;
    margin: 0 auto 1.5rem;
    line-height: 0;
    cursor: pointer;
}

.hero__title-image {
    display: block;
    width: clamp(18rem, 60vw, 42rem);
    height: auto;
    filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.45));
}

/* Canvas overlays the img pixel-for-pixel. Hidden until JS marks it ready;
   when ready, fades in and the underlying img is hidden. */
.hero__title-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.2s ease;
    filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

.hero__title-stage.is-liquid-active .hero__title-canvas {
    opacity: 1;
}

.hero__title-stage.is-liquid-active .hero__title-image {
    visibility: hidden;
}

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

/* Naturally Majestic reveal. Mirrors the original .majestic__container grid
   but lives inside the hero's sticky viewport. Each child starts hidden
   and offset to its respective side; reveal classes (toggled by JS based on
   scroll progress) animate them in one at a time. */
.hero__reveal {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--section-padding);
    pointer-events: none;
}

.hero__reveal .majestic__container {
    width: 100%;
}

.hero__reveal .majestic__visual,
.hero__reveal .majestic__text {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Square (turtle frame) and turtle image both live inside .majestic__visual;
   we reveal them in two beats by using nested classes. */
.hero__reveal .majestic__turtle-frame {
    opacity: 0;
    transform: translateX(-3rem);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.hero__reveal.is-revealed-square .majestic__turtle-frame {
    opacity: 1;
    transform: translateX(0);
}

.hero__reveal .majestic__turtle-img {
    opacity: 0;
    transition: opacity 0.6s ease-out;
    transition-delay: 0.05s;
}
.hero__reveal.is-revealed-turtle .majestic__turtle-img {
    opacity: 1;
}

/* Title block: eyebrow + headline slide in from the right together. */
.hero__reveal .majestic__eyebrow,
.hero__reveal .majestic__title {
    opacity: 0;
    transform: translateX(3rem);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.hero__reveal.is-revealed-title .majestic__eyebrow,
.hero__reveal.is-revealed-title .majestic__title {
    opacity: 1;
    transform: translateX(0);
}

/* Body paragraph + Learn more button reveal last. */
.hero__reveal .majestic__body,
.hero__reveal .majestic__text .btn {
    opacity: 0;
    transform: translateX(3rem);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.hero__reveal.is-revealed-paragraph .majestic__body,
.hero__reveal.is-revealed-paragraph .majestic__text .btn {
    opacity: 1;
    transform: translateX(0);
}

.hero__reveal.is-revealed-paragraph {
    pointer-events: auto;
}

/* Bottom info line that frames the section. Pinned to the bottom of the
   reveal layer; reveals on the same beat as the body paragraph. */
.hero__reveal-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2.5rem;
    padding: 0 clamp(1.5rem, 5vw, 5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.hero__reveal.is-revealed-paragraph .hero__reveal-footer {
    opacity: 1;
    transform: translateY(0);
}

.hero__reveal-footer-label {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    color: var(--color-cream);
    flex: 0 0 auto;
}

.hero__reveal-footer-seas {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    flex: 0 0 auto;
}


/* 7. NATURALLY MAJESTIC
   --------------------------------------------
   Turtle img and coral graphics are placeholders.
   Swap background-image URLs with your HD overlays.
   ============================================ */
.majestic {
    /* deepblue.png is the final frame of the scroll-stage animation, so the
       canvas hands off seamlessly into this section's background. */
    background: var(--color-navy-deep) url('../Media/hero-scroll-frames/Frames/deepblue.png') center/cover no-repeat;
    padding: var(--section-padding);
    position: relative;
    overflow: hidden;
}

.majestic__container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.majestic__visual {
    display: flex;
    justify-content: center;
}

.majestic__turtle-frame {
    width: 200px;
    height: 200px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.majestic__turtle-img {
    position: absolute;
    inset: -75%;
    width: 250%;
    height: 250%;
    background-image: url('../images/Turtle%20alone.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35));
    pointer-events: none;
}

.majestic__text {
    max-width: 480px;
}

.majestic__eyebrow {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-cream);
    margin-bottom: 0.25rem;
}

.majestic__title {
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 5.5vw, 4.25rem);
    font-style: italic;
    color: var(--color-aqua-pale);
    margin-bottom: 1.25rem;
    font-weight: 500;
}

.majestic__body {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text);
    margin-bottom: 1.5rem;
    text-indent: 2rem;
}

/* Coral row at bottom — placeholders */
.majestic__coral-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 4rem;
    padding: 0 2rem;
    height: 80px;
}

.coral {
    width: 80px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    opacity: 0.85;
}

/* Each coral is a placeholder — swap with your HD coral PNGs */
.coral--1 { background-image: url('../images/coral-1.png'); }
.coral--2 { background-image: url('../images/coral-2.png'); }
.coral--3 { background-image: url('../images/coral-3.png'); }
.coral--4 { background-image: url('../images/coral-4.png'); }
.coral--5 { background-image: url('../images/coral-5.png'); }


/* 8. DESTINATIONS CAROUSEL
   ============================================ */
.destinations {
    background: var(--color-navy);
    padding: var(--section-padding);
    text-align: center;
}

.destinations .section__title {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    margin-bottom: 0;
}

.carousel {
    position: relative;
    max-width: var(--max-width);
    margin: 6rem auto 0;
    padding: 0 2rem;
}

.carousel__track {
    position: relative;
    height: 320px;
}

.carousel__slide {
    position: absolute;
    top: 0;
    left: 50%;
    text-align: center;
    transition: transform var(--transition), opacity var(--transition);
    cursor: pointer;
    transform: translate(-50%, 0) scale(0.85);
    opacity: 0;
    pointer-events: none;
}

.carousel__slide:focus-visible {
    outline: 2px solid var(--color-aqua);
    outline-offset: 8px;
    border-radius: 4px;
}

.carousel__slide--prev {
    transform: translate(calc(-50% - 400px), 0) scale(0.85);
    opacity: 0.5;
    pointer-events: auto;
}

.carousel__slide--active {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.carousel__slide--next {
    transform: translate(calc(-50% + 400px), 0) scale(0.85);
    opacity: 0.5;
    pointer-events: auto;
}

/* Active slide's inline caption is hidden on desktop — the controls row below
   shows the active city instead. visibility (not display) preserves layout
   space so the track height stays stable as the active slide rotates. */
.carousel__slide--active .carousel__caption {
    visibility: hidden;
}

.image-stack {
    position: relative;
    width: 300px;
    height: 200px;
}

.image-stack--large {
    width: 460px;
    height: 300px;
}

/* The "back" image creates the layered/stacked look — shows the city's
   2nd photo behind the front image, faded and tilted. */
.image-stack__back {
    position: absolute;
    top: -12px;
    left: 12px;
    width: 100%;
    height: 100%;
    background-color: var(--color-navy-deep);
    background-size: cover;
    background-position: center;
    opacity: 0.55;
    border-radius: 2px;
    transform: rotate(-2deg);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.image-stack__front {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: var(--color-aqua-pale);
    border-radius: 2px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.carousel__caption {
    margin-top: 1.5rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-cream);
    letter-spacing: 0.02em;
}

/* Controls row: prev arrow | active city label | next arrow.
   Sits in flow under .carousel__track, so its position adapts to card size. */
.carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 5vw, 4rem);
    margin-top: 1.5rem;
}

.carousel__active-label {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--color-cream);
    letter-spacing: 0.02em;
    min-width: 14ch;
    text-align: center;
}

.carousel__btn {
    background: transparent;
    border: 1.5px solid var(--color-cream);
    color: var(--color-cream);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background var(--transition), color var(--transition);
}

.carousel__btn:hover {
    background: var(--color-cream);
    color: var(--color-navy);
}

/* Mobile-only swipe indicator — hidden on desktop, visible <640px */
.carousel__dots {
    display: none;
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    gap: 8px;
    z-index: 4;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(245, 241, 232, 0.06);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-cream);
    opacity: 0.35;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width var(--transition), opacity var(--transition), background var(--transition);
}

.carousel__dot--active {
    width: 24px;
    border-radius: 4px;
    opacity: 1;
    background: var(--color-aqua);
}


/* 9. MARINE LIFE GRID + CONSERVATION BRIDGE
   --------------------------------------------
   Mirrors the homepage hero. Section is 250vh tall; the inner viewport
   sticky-pins for the full scroll. Layered z-stack inside the viewport:
     0  marine background video (always visible)
     1  bridge canvas (fades in once scroll > 0; overlays the video)
     2  marine content (cards visible at start; fades out as scroll > ~21%)
     3  conservation reveal teaser (fades in as scroll > ~71%)
   ============================================ */
.marine-life {
    position: relative;
    /* 350vh = 100vh sticky viewport + 250vh of scroll runway. Of that
       runway, the first 80% drives the bridge frame scrub and the last
       20% (~50vh) is the "dwell zone" where the canvas holds the final
       frame and the conservation reveal stays at full opacity, so the
       user can't accidentally scroll past the moment the animation ends. */
    height: 350vh;
    background: var(--color-navy-deep);
}

.marine-life__viewport {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    isolation: isolate;
    background: var(--color-navy-deep);
}

/* Two stacked full-bleed videos. Both preload; .is-active fades the
   currently-playing clip in while the other fades out. */
.marine-life__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2.5s cubic-bezier(0.4, 0, 0.2, 1);
    filter: blur(3px);
}

.marine-life__bg.is-active {
    opacity: 1;
}

.marine-life__overlay {
    display: none;
}

/* Bridge canvas — overlays the videos once the user starts scrolling
   the section. JS toggles .is-active. */
.marine-life__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.marine-life__canvas.is-active {
    opacity: 1;
}

/* Content layer (title + subtitle + cards). Fills the viewport, centered. */
.marine-life__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: clamp(2rem, 4vh, 3.5rem) clamp(1.5rem, 5vw, 5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: opacity 0.7s ease;
}

.marine-life__content.is-fading-out {
    opacity: 0;
    pointer-events: none;
}

.marine-life__content > .section__title,
.marine-life__content > .section__subtitle {
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

.marine-life__content > .section__subtitle {
    margin-bottom: 2rem;
}

/* Conservation reveal — full conservation page nested inside the bridge.
   Wrapper just handles positioning + the fade trigger; .conservation-hero
   inside it does the actual layout. */
.marine-life__reveal {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
    overflow: hidden;
}

.marine-life__reveal.is-revealed {
    opacity: 1;
    pointer-events: auto;
}

/* Override .conservation-hero's standalone-section sizing so it fills the
   reveal wrapper (which is already 100vh in the sticky viewport). */
.marine-life__reveal .conservation-hero {
    height: 100%;
    min-height: 0;
}

.marine-grid {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.marine-card {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
}

.marine-card__image {
    position: relative;
    width: 100%;
    height: clamp(160px, 26vh, 280px);
    background-color: transparent;
    overflow: visible;
}

.marine-card__creature {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55));
    transition: transform var(--transition);
}

.marine-card:hover .marine-card__creature,
.marine-card:focus-visible .marine-card__creature {
    transform: scale(1.05);
}

/* Hover label — small rounded rectangle that pops up under the animal */
.marine-card__info {
    position: absolute;
    left: 50%;
    bottom: -1rem;
    transform: translate(-50%, 8px);
    background: rgba(10, 21, 53, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0.65rem 1.1rem;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
    z-index: 3;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

.marine-card:hover .marine-card__info,
.marine-card:focus-visible .marine-card__info {
    opacity: 1;
    transform: translate(-50%, 0);
}

.marine-card__title {
    font-size: 1.05rem;
    color: var(--color-cream);
    margin-bottom: 0.15rem;
    line-height: 1.2;
}

.marine-card__desc {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    line-height: 1.3;
    margin: 0;
}


/* 10. CTA BANNER
   ============================================ */
.cta-banner {
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
    padding: var(--section-padding);
    text-align: center;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.cta-banner__content {
    max-width: 640px;
    margin: 0 auto;
}

.cta-banner__title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1rem;
    color: var(--color-cream);
    font-style: italic;
}

.cta-banner__text {
    color: var(--color-text-muted);
    margin-bottom: 2rem;
    font-size: 1.05rem;
}


/* 11. PAGE HERO (subpages)
   ============================================ */
.page-hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    margin-top: 0;
    padding-top: 80px;
}

.page-hero--conservation {
    background-image: url('../Media/CnversionImage.png');
    background-color: #1a3a5c;
}

.page-hero--about {
    background-image: url('../images/about-hero.jpg');
    background-color: #0e2547;
}

.page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 21, 53, 0.5) 0%, rgba(10, 21, 53, 0.7) 100%);
}

.page-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem;
}

.page-hero__title {
    font-size: clamp(3rem, 7vw, 5rem);
    font-style: italic;
    color: var(--color-cream);
    margin-bottom: 1rem;
}

.page-hero__subtitle {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    max-width: 540px;
    margin: 0 auto;
}


/* 12. CONTENT BLOCKS
   ============================================ */
.content-block {
    padding: var(--section-padding);
}

.content-block__inner {
    max-width: 760px;
    margin: 0 auto;
}

.content-block__lead {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--color-cream);
    margin-bottom: 1.5rem;
}

.content-block__body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-muted);
}


/* 13. PILLARS
   ============================================ */
.pillars {
    padding: var(--section-padding);
    background: var(--color-navy-deep);
}

.pillars__grid {
    max-width: var(--max-width);
    margin: 3rem auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.pillar-card {
    padding: 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-navy);
    transition: all var(--transition);
}

.pillar-card:hover {
    border-color: var(--color-aqua);
    transform: translateY(-4px);
}

.pillar-card__number {
    font-family: var(--font-display);
    font-size: 3rem;
    font-style: italic;
    color: var(--color-aqua);
    margin-bottom: 1rem;
    line-height: 1;
}

.pillar-card__title {
    font-size: 1.6rem;
    color: var(--color-cream);
    margin-bottom: 0.75rem;
}

.pillar-card__text {
    color: var(--color-text-muted);
    font-size: 0.98rem;
    line-height: 1.7;
}

/* Conservation page — split hero with intro on left and 2x2 pillar grid on right */
.conservation-hero {
    min-height: 100vh;
    /* Left-to-right gradient: opaque navy on the left so the white
       "Conservation" headline + body copy stay readable, fading to fully
       transparent by ~75% so the photo shows clean behind the pillar grid. */
    background:
        linear-gradient(
            to right,
            rgba(5, 13, 36, 0.85) 0%,
            rgba(5, 13, 36, 0.7)  35%,
            rgba(5, 13, 36, 0)    75%,
            rgba(5, 13, 36, 0)    100%
        ),
        url('../Media/CNSPage') center/cover no-repeat,
        var(--color-navy);
    padding: clamp(6rem, 12vh, 9rem) clamp(1.5rem, 5vw, 5rem) clamp(3rem, 6vh, 5rem);
    display: flex;
    align-items: center;
}

.conservation-hero__container {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

.conservation-hero__intro {
    max-width: 480px;
}

.conservation-hero__title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 5rem);
    font-style: italic;
    font-weight: 500;
    color: var(--color-cream);
    margin-bottom: 1.5rem;
    line-height: 1.05;
}

.conservation-hero__lead {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.conservation-hero__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.conservation-hero__grid .pillar-card {
    padding: 1.25rem 1.5rem;
}

.conservation-hero__grid .pillar-card__number {
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
}

.conservation-hero__grid .pillar-card__title {
    font-size: 1.2rem;
    margin-bottom: 0.4rem;
}

.conservation-hero__grid .pillar-card__text {
    font-size: 0.9rem;
    line-height: 1.55;
}


/* 14. FACTS STRIP
   ============================================ */
.facts {
    display: flex;
    justify-content: center;
    gap: 4rem;
    padding: 4rem 2rem;
    background: var(--color-navy-deep);
    flex-wrap: wrap;
}

.fact {
    text-align: center;
}

.fact__number {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 600;
    font-style: italic;
    color: var(--color-aqua);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.fact__label {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* 15. CONTACT FORM
   ============================================ */
.contact {
    padding: var(--section-padding);
}

.contact__inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.contact__form {
    margin-top: 3rem;
    text-align: left;
}

.form-row {
    margin-bottom: 1.5rem;
}

.form-row label {
    display: block;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.form-row input,
.form-row textarea {
    width: 100%;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-cream);
    padding: 0.85rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    border-radius: 2px;
    transition: border-color var(--transition);
}

.form-row input:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--color-aqua);
}

.contact__form .btn {
    margin-top: 1rem;
}


/* 15b. MODAL (info popup for destinations & marine life)
   ============================================ */
/* Modal is permanently in the layout (display: flex) — `.is-open` fades the
   whole thing (backdrop + panel) in via opacity. Using display: none → flex
   caused the navy backdrop to pop in at 100% opacity while the panel was
   still mid-animation, producing a navy flash before the popup appeared. */
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    /* Visibility (not opacity) gates the whole modal so each child layer
       can run its own opacity transition. The 0.5s delay on close keeps
       the modal interactive long enough for the children's fade-out to
       finish before visibility:hidden cuts them off. */
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.5s;
}

.modal.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s linear 0s;
}

/* Backdrop fades in IMMEDIATELY on open (no delay) so its blur lands
   first; on close it lingers briefly so the panel + watercolors fade
   away before the blur dissipates. */
.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 13, 36, 0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    transition: opacity 0.3s ease 0.18s;
}

.modal.is-open .modal__backdrop {
    opacity: 1;
    transition: opacity 0.3s ease 0s;
}

.modal__panel {
    position: relative;
    width: 100%;
    max-width: 880px;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    background: var(--color-navy-deep);
    border: none;
    border-radius: 6px;
    padding: 3rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Destination panel: no box, no border, no fill — image dominates and the
   text below floats freely against the heavily-blurred page behind. */
.modal__panel--destination {
    max-width: 1100px;
    /* Lock to full viewport height so the image always sits at the same
       Y position when clicking through cities — short content (less text)
       no longer makes the panel re-center vertically. Flex column lets
       us vertically center the image + info via auto margins below. */
    height: calc(100vh - 4rem);
    max-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Auto margins on the first and last children center the content block
   within the panel. When content fits, equal space appears above and below.
   When it overflows, autos collapse and the panel scrolls naturally. */
.modal__panel--destination .modal__visual {
    margin-top: auto;
}

.modal__panel--destination .modal__nav {
    margin-bottom: auto;
}

.modal__panel--destination::-webkit-scrollbar {
    display: none;
}

/* Close button fixed to the viewport corner so it stays reachable while
   the panel scrolls. The panel has no visible chrome anyway, so the
   button reads as floating on the blurred page. */
.modal__panel--destination .modal__close {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
}

.modal__panel--destination .modal__visual {
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5);
}

/* Title + description + lists float freely below the image (no panel bg). */
.modal__panel--destination .modal__info {
    text-align: center;
    padding: 0 1rem;
}

.modal__panel--destination .modal__title {
    text-align: center;
    margin-top: 0.25rem;
}

.modal__panel--destination .modal__description {
    text-indent: 0;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* Destinations: drop the Marine Life subhead + species list so the image
   gets more vertical breathing room. Hidden, not removed, since the JS
   still populates them — easy to bring back by deleting these two rules. */
.modal__panel--destination .modal__subhead,
.modal__panel--destination .modal__lists {
    display: none;
}

/* Move prev/next chevrons out of the nav row and float them at the left
   and right viewport edges, vertically centered. The dots row stays in
   .modal__nav (centered below the info). */
.modal__panel--destination .modal__nav-btn--prev,
.modal__panel--destination .modal__nav-btn--next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    z-index: 5;
}

/* Position chevrons just outside the centered 1100px image — close enough
   to feel paired with the content, not floating at the viewport edges.
   max() clamps to a safe minimum on narrow screens. */
.modal__panel--destination .modal__nav-btn--prev {
    left: max(1rem, calc(50% - 550px - 64px));
}
.modal__panel--destination .modal__nav-btn--next {
    right: max(1rem, calc(50% - 550px - 64px));
}

/* Panel animation re-runs each time .is-open is added (the rule only
   applies while open, so the browser restarts the animation). */
.modal.is-open .modal__panel {
    animation: modalIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(10, 21, 53, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(245, 241, 232, 0.45);
    color: var(--color-cream);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    z-index: 5;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.modal__close:hover,
.modal__close:focus-visible {
    background: var(--color-cream);
    color: var(--color-navy);
    border-color: var(--color-cream);
    transform: rotate(90deg) scale(1.05);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    outline: none;
}

/* Image-focused single-column layout: visual dominates, info stacks below.
   Tap/click the visual to cycle the city's images; swipe or chevrons to
   walk between cities. */
.modal__visual {
    position: relative;
    width: 100%;
    background-color: var(--color-navy);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;
    cursor: pointer;
    transition: background-image 0.25s ease;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

.modal__visual:focus-visible {
    outline: 2px solid var(--color-aqua);
    outline-offset: 2px;
}

/* Hover hint on the destination image — slight dark wash + "Click for next"
   text, fades in on hover. Pseudo-element so no extra HTML required. */
.modal__panel--destination .modal__visual::before {
    content: 'Click for next';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 13, 36, 0.4);
    color: var(--color-cream);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    font-style: italic;
    letter-spacing: 0.04em;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.modal__panel--destination .modal__visual:hover::before,
.modal__panel--destination .modal__visual:focus-visible::before {
    opacity: 1;
}

/* Touch devices: replace the hover overlay with a small always-visible
   "Tap for next" pill in the bottom-left corner so users discover the
   tap-to-cycle interaction. Mirrors the counter pill in the opposite corner. */
@media (hover: none) {
    .modal__panel--destination .modal__visual::before {
        content: 'Tap for next';
        inset: auto auto 0.75rem 0.75rem;
        background: rgba(10, 21, 53, 0.7);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        font-family: var(--font-body);
        font-size: 0.78rem;
        font-style: normal;
        letter-spacing: 0.05em;
        padding: 0.3rem 0.65rem;
        border-radius: 999px;
        opacity: 0.95;
        display: inline-flex;
    }
}

/* Counter pill in the bottom-right corner of the image — "1 / 2" */
.modal__visual-counter {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    background: rgba(10, 21, 53, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-cream);
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    pointer-events: none;
    z-index: 2;
}

.modal__info {
    margin-top: 1.75rem;
}

/* Destination desktop: big image at top, info column below. */
.modal__panel--destination .modal__visual {
    aspect-ratio: 16 / 9;
    border-radius: 6px;
}

/* Marine desktop: small circle top-left, content flows below. */
.modal__panel--marine .modal__visual {
    display: none;
}

.modal__panel--marine .modal__visual-counter {
    display: none;
}

.modal__panel--marine .modal__info {
    margin-top: 0;
    /* Lift text above the watercolor decorations so it stays readable. */
    position: relative;
    z-index: 2;
}

/* Watercolor decoration layer — sibling of .modal__panel, anchored to the
   viewport itself (position: fixed) so creature faces are guaranteed to
   stay on-screen at any width. By default the watercolors sit IN FRONT
   of the panel for a layered "art on top of the box" composition. When
   the user hovers the panel, the panel lifts above the watercolors so
   the text + close button are unobstructed (rule below). pointer-events
   stay none so hovers and clicks pass straight through to the panel. */
.modal__watercolors {
    display: none;
}

.modal__watercolors:not(:empty) {
    display: block;
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    /* Default state = closing path: fade out fast with no delay so
       panel + watercolors leave together, before the backdrop blur. */
    opacity: 0;
    transition: opacity 0.3s ease 0s;
}

.modal__panel {
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease 0s;
}

/* On open: panel + watercolors wait for the backdrop blur to land,
   then fade in together. Reverses on close (rules above kick in). */
.modal.is-open .modal__panel,
.modal.is-open .modal__watercolors:not(:empty) {
    opacity: 1;
    transition: opacity 0.3s ease 0.2s;
}

/* Hover the panel → panel jumps in front of the watercolors so the
   text + close button are unobstructed. Watercolors keep full opacity
   — only the z-index swap happens. Reverses on mouse-out. */
.modal:has(.modal__panel:hover) .modal__panel {
    z-index: 4;
}

.modal__watercolor {
    position: absolute;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.5));
}

/* Three viewport-anchored positions. Image A grows from the left edge,
   B from the top-right, C from the bottom-right. Sized in vw so they
   scale with the viewport. A and B sit BEHIND the panel (z-index 1 vs.
   panel's 2) so their bodies are clipped by the navy fill where they
   cross the panel — keeps the text uncluttered while still letting the
   silhouettes crowd the box edges. C is lifted ABOVE the panel so the
   bottom-right creature (orca / nurse shark / mahi / blue whale)
   visibly drapes over the navy box's bottom-right corner. */
.modal__watercolor--a {
    top: 6vh;
    left: 0;
    width: 48vw;
    max-width: 800px;
    transform: rotate(-6deg);
}

/* B and C are flipped horizontally so the creature face (originally on
   the left of the PNG) ends up on the right side of the rendered image —
   which is the side closest to the viewport edge, guaranteeing the face
   sits in the visible empty area outside the panel. */
.modal__watercolor--b {
    top: 0;
    right: 0;
    width: 36vw;
    max-width: 600px;
    transform: rotate(-14deg) scaleX(-1);
}

.modal__watercolor--c {
    bottom: -2vh;
    right: 0;
    width: 64vw;
    max-width: 1100px;
    transform: rotate(4deg) scaleX(-1);
    z-index: 3;
}

/* Below either breakpoint the panel fills most of the viewport, leaving
   no meaningful empty space for the watercolors — they end up as tiny
   slivers clipped at the panel edges (narrow widths) or tower beyond the
   visible viewport and crowd the panel (short heights, e.g. landscape
   phones / short browser windows). Hide them; the modal already
   scrolls internally when content overflows, so the user just scrolls. */
@media (max-width: 900px), (max-height: 720px) {
    .modal__watercolors:not(:empty) {
        display: none;
    }
}

.modal__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 1.25rem;
}

.modal__title-main {
    color: var(--color-cream);
}

.modal__title-accent {
    color: var(--color-aqua);
    font-style: italic;
}

.modal__description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
    margin-bottom: 1.75rem;
    text-indent: 2rem;
}

.modal__subhead {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    font-weight: 500;
}

.modal__lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    color: var(--color-text);
    font-size: 0.95rem;
}

.modal__lists ul {
    list-style: disc;
    padding-left: 1.25rem;
    color: var(--color-text);
}

.modal__lists li {
    margin-bottom: 0.4rem;
    line-height: 1.5;
}

/* Navigation row: prev city / dots / next city.
   Visible on all viewports. For marine modals it's hidden via panel scope. */
.modal__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.modal__panel--marine .modal__nav {
    display: none;
}

.modal__nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(245, 241, 232, 0.08);
    border: 1px solid var(--color-border);
    color: var(--color-cream);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    padding: 0;
    flex: 0 0 auto;
}

.modal__nav-btn:hover:not([disabled]),
.modal__nav-btn:focus-visible {
    background: var(--color-cream);
    color: var(--color-navy);
    border-color: var(--color-cream);
    outline: none;
}

.modal__nav-btn[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
}

.modal__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.modal__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-border);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.modal__dot:hover {
    background: var(--color-text-muted);
    transform: scale(1.15);
}

.modal__dot--active {
    background: var(--color-aqua);
    transform: scale(1.2);
}

body.modal-open {
    overflow: hidden;
}


/* 16. FOOTER
   ============================================ */
.footer {
    background: var(--color-navy-deep);
    padding: 4rem 2rem 2rem;
    border-top: 1px solid var(--color-border);
}

.footer__container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
}

.footer__heading {
    font-size: 1.1rem;
    color: var(--color-cream);
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
}

.footer__col--brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.footer__logo {
    width: 80px;
    height: auto;
    display: block;
}

.footer__text {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    max-width: 320px;
}

.footer__col ul li {
    margin-bottom: 0.5rem;
}

.footer__col ul a {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    transition: color var(--transition);
}

.footer__col ul a:hover {
    color: var(--color-cream);
}

.footer__bottom {
    max-width: var(--max-width);
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}


/* 17. RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
    /* Mobile: skip the scroll-driven frame animation entirely.
       The hero stops being a sticky-pinned 250vh stage and becomes two
       stacked blocks — a 100vh title screen (video bg + AO logo + Explore)
       followed by the Naturally Majestic section. The viewport drops its
       flex/overflow/fixed-height so .hero__reveal can flow below
       .hero__content instead of overlapping it inside the same 100vh box. */
    .hero {
        height: auto;
        background: var(--color-navy-deep);
    }
    .hero__viewport {
        position: relative;
        display: block;
        height: auto;
        overflow: visible;
    }
    .hero__canvas { display: none; }

    /* Videos cover only the title screen, not the whole stacked hero —
       without an explicit height they'd grow with the auto-height
       viewport and bleed into the Naturally Majestic section. */
    .hero__video {
        height: 100vh;
    }

    /* Title block becomes the first screen — full viewport tall, centered. */
    .hero__content {
        position: relative;
        z-index: 3;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--section-padding);
    }

    .hero__title-image {
        width: clamp(14rem, 70vw, 22rem);
    }

    .hero__reveal {
        position: static;
        padding: var(--section-padding);
        background: var(--color-navy-deep) url('../Media/hero-scroll-frames/Frames/deepblue.png') center/cover no-repeat;
        /* Desktop is flex-row centred (the footer is absolute-positioned
           so it ignores the flex). On mobile the footer is in flow, so
           stack the container and footer instead of placing them side by
           side, and re-enable pointer events for the now-static layer. */
        flex-direction: column;
        align-items: stretch;
        pointer-events: auto;
    }
    .hero__reveal .majestic__turtle-frame,
    .hero__reveal .majestic__turtle-img,
    .hero__reveal .majestic__eyebrow,
    .hero__reveal .majestic__title,
    .hero__reveal .majestic__body,
    .hero__reveal .majestic__text .btn {
        opacity: 1;
        transform: none;
    }

    .majestic__container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .majestic__text {
        margin: 0 auto;
    }

    /* Desktop turtle artwork is a 200×200 frame holding a 500×500 image
       (250%) that overflows for an artistic bleed. On a narrow phone
       that bleed runs off both edges — shrink it so the turtle reads as
       a contained illustration. */
    .hero__reveal .majestic__turtle-frame {
        width: 180px;
        height: 180px;
    }
    .hero__reveal .majestic__turtle-img {
        inset: -45%;
        width: 190%;
        height: 190%;
    }

    /* Mobile reveal layer is `position: static`, so the footer can't be
       absolute-bottom anymore — let it flow as a regular block. The
       seas list is too long for `space-between` on a phone, so stack
       the label and list and let the seas wrap onto multiple lines. */
    .hero__reveal-footer {
        position: static;
        margin-top: 3rem;
        padding: 0;
        gap: 0.5rem;
        opacity: 1;
        transform: none;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .hero__reveal-footer-label {
        flex: 0 1 auto;
    }
    .hero__reveal-footer-seas {
        font-size: 0.62rem;
        letter-spacing: 0.06em;
        line-height: 1.7;
        flex: 0 1 auto;
        white-space: normal;
    }

    .pillars__grid {
        grid-template-columns: 1fr;
    }

    .conservation-hero {
        min-height: auto;
        padding-top: 7rem;
        /* On mobile the layout stacks (text on top, pillar grid below),
           so flip the gradient to top→bottom: dark covers the top 75%
           (headline + lead + most of the pillar grid stay readable),
           clearing only over the bottom quarter behind the photo. */
        background:
            linear-gradient(
                to bottom,
                rgba(5, 13, 36, 0.85) 0%,
                rgba(5, 13, 36, 0.7)  35%,
                rgba(5, 13, 36, 0)    75%,
                rgba(5, 13, 36, 0)    100%
            ),
            url('../Media/CNSPage') center/cover no-repeat,
            var(--color-navy);
    }

    .conservation-hero__container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Drop the 350vh sticky-viewport scroll bridge on mobile — JS already
       skips the frame scrub and reveal toggling there, but the CSS still
       pinned everything inside a 100vh sticky viewport with conservation
       hidden at opacity:0. Collapse the section back to a normal-flow
       Marine Life block, and let the nested conservation-hero flow as
       its own section right below it. The looping background video stays
       — only the scroll-driven bridge canvas is dropped. The video keeps
       its absolute fill of the section (and is hidden behind conservation
       by conservation's own opaque background). */
    .marine-life {
        height: auto;
    }
    .marine-life__viewport {
        position: relative;
        height: auto;
        overflow: hidden;
    }
    .marine-life__canvas {
        display: none;
    }
    .marine-life__content {
        position: relative;
        inset: auto;
        opacity: 1;
        pointer-events: auto;
        min-height: 100vh;
        justify-content: center;
    }
    .marine-life__reveal {
        position: relative;
        inset: auto;
        opacity: 1;
        pointer-events: auto;
        overflow: visible;
    }
    .marine-life__reveal .conservation-hero {
        height: auto;
        min-height: auto;
    }

    .marine-grid {
        gap: 1.5rem;
    }

    .marine-card__title {
        font-size: 0.95rem;
    }

    .marine-card__desc {
        font-size: 0.75rem;
    }

    /* On touch screens hover doesn't fire — show the label by default
       (slightly muted) so users still see the animal name. */
    @media (hover: none) {
        .marine-card__info {
            opacity: 0.92;
            transform: translate(-50%, 0);
        }
    }

    .footer__container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .image-stack--large {
        width: 360px;
        height: 230px;
    }

    .image-stack {
        width: 220px;
        height: 150px;
    }

    .carousel__track { height: 260px; }
    .carousel__slide--prev { transform: translate(calc(-50% - 290px), 0) scale(0.85); }
    .carousel__slide--next { transform: translate(calc(-50% + 290px), 0) scale(0.85); }

    /* MOBILE MODAL — tall portrait panel.
       Destinations: big image + title only (description / lists hidden).
       Marine: image + title + description + species lists (unchanged). */
    .modal { padding: 1rem; }

    .modal__panel,
    .modal__panel--destination,
    .modal__panel--marine {
        max-width: 440px;
        max-height: calc(100vh - 2rem);
        min-height: 0;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .modal__panel--destination .modal__visual {
        flex: 1 1 auto;
        aspect-ratio: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        border-radius: 6px;
    }

    .modal__panel--marine .modal__visual {
        flex: 0 0 auto;
        align-self: center;
        width: 130px;
        height: 130px;
    }

    .modal__info {
        flex: 0 0 auto;
        margin-top: 1.25rem;
    }

    .modal__title {
        font-size: clamp(1.75rem, 6vw, 2.25rem);
        margin-bottom: 0.5rem;
        text-align: center;
    }

    /* Mobile destinations: only the title remains visible. Hide everything
       else so the image dominates the panel. */
    .modal__panel--destination .modal__description,
    .modal__panel--destination .modal__subhead,
    .modal__panel--destination .modal__lists {
        display: none;
    }

    .modal__description {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .modal__lists {
        display: block;
    }
    .modal__lists ul + ul {
        margin-top: 1.25rem;
    }

    .modal__nav {
        margin-top: 1rem;
        flex: 0 0 auto;
    }
}

@media (max-width: 640px) {
    /* Hamburger stays visible at every state on mobile */
    .nav__toggle,
    .nav--scrolled .nav__toggle,
    .nav--solid .nav__toggle {
        display: flex;
    }

    /* Mobile menu becomes a slide-down panel anchored to the left
       (the hamburger lives top-left now). */
    .nav__menu {
        position: absolute;
        top: 100%;
        left: 1rem;
        right: auto;
        margin-left: 0;
        background: rgba(5, 13, 36, 0.92);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        flex-direction: column;
        padding: 1.5rem 2rem;
        border-radius: 4px;
        gap: 1rem;
        transform: translateY(-10px);
        opacity: 0;
        pointer-events: none;
        transition: all var(--transition);
    }

    /* Override the desktop "scrolled / solid → menu visible" rule on mobile.
       The slide-down panel should only appear when the hamburger toggles it. */
    .nav--scrolled .nav__menu:not(.is-open),
    .nav--solid .nav__menu:not(.is-open) {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
    }

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

    .carousel {
        margin-top: 8rem;
        padding: 0 1rem 5rem;
    }

    /* On mobile, only show the active slide */
    .carousel__slide--prev,
    .carousel__slide--next {
        opacity: 0;
        pointer-events: none;
    }

    /* Bigger active rectangle on mobile */
    .image-stack--large {
        width: min(78vw, 320px);
        height: min(54vw, 220px);
    }

    /* On mobile we hide the entire desktop controls row in favour of swipe + dots */
    .carousel__controls { display: none; }

    /* Restore the active slide's inline caption (hidden on desktop) so the
       mobile layout still shows the city name under the rectangle. */
    .carousel__slide--active .carousel__caption { visibility: visible; }

    .carousel__dots { display: flex; }

    /* Make the slides feel grabbable */
    .carousel__slide--active {
        cursor: grab;
        touch-action: pan-y;
    }

    .facts {
        gap: 2rem;
    }
}