/* ============================================================
   style.css — The Gas We Breathe
   Shared stylesheet for all pages on the site.
   Updated with blue color palette for improved accessibility.
   All accent colours are defined as CSS custom properties
   in :root so pages never hardcode hex values.
   
   MODIFICATION: Explore section changed from carousel to grid
   ============================================================ */

/* ── 1. RESET & BOX MODEL ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── 2. CSS CUSTOM PROPERTIES (design tokens) ── 
   
   BLUE PALETTE (from lightest to darkest):
   #D7E4FF — Lightest blue (backgrounds, tints)
   #93BEFF — Light blue (subtle highlights)
   #1A99FE — Medium blue (primary accent)
   #0474C4 — Dark blue (interactive elements)
   #02518B — Darker blue (headings, emphasis)
   #013056 — Very dark blue (dark backgrounds)
   #001225 — Darkest blue (hero, footer)
*/
:root {
  /* ── Blue Palette Tokens ── */
  --blue-50:   #D7E4FF;  /* Lightest — backgrounds, tints */
  --blue-100:  #93BEFF;  /* Light — subtle highlights, hover states */
  --blue-400:  #1A99FE;  /* Medium — primary accent, links */
  --blue-600:  #0474C4;  /* Dark — interactive elements, buttons */
  --blue-700:  #02518B;  /* Darker — headings, strong emphasis */
  --blue-800:  #013056;  /* Very dark — dark mode backgrounds */
  --blue-900:  #001225;  /* Darkest — hero, footer, deepest surfaces */

  /* ── Page Backgrounds ── */
  --page-bg:        #ffffff;        /* Pure white for light sections */
  --surface:        #ffffff;        /* Card backgrounds */
  --surface-2:      var(--blue-50); /* Light blue tint for card image areas */
  --surface-3:      #f0f4ff;        /* Slightly deeper light blue surface */
  --dark-bg:        var(--blue-900);/* Hero, footer, dark interlude strips */
  --dark-surface:   var(--blue-800);/* Dropdowns, dark cards */

  /* ── Text Colors (ensuring WCAG AA+ contrast) ── */
  --text-primary:   var(--blue-900);/* Main body text — darkest blue on white (21:1 contrast) */
  --text-secondary: var(--blue-700);/* Slightly muted text — dark blue (9:1 contrast) */
  --text-muted:     var(--blue-600);/* Labels, meta, captions — medium-dark blue (5:1 contrast) */
  --text-dark-muted: rgba(147, 190, 255, 0.75); /* Muted text on dark backgrounds (blue-100 with opacity) */
 t 
  /* ── Borders ── */
  --border-light:   rgba(87, 165, 228, 0.15); /* Light blue border with transparency */
  --border-med:     rgba(6, 56, 98, 0.3);  /* Medium blue border */
  --border-dark:    rgba(147, 190, 255, 0.15);/* Borders on dark backgrounds */

  /* ── Primary Accent (replaces gold) ── */
  --accent:         var(--blue-400); /* Primary accent — bright blue */
  --accent-dark:    var(--blue-600); /* Darker accent for hover states */
  --accent-light:   var(--blue-100); /* Light accent for backgrounds */

  /* ── Section Accent Colors (blue palette variations) ── 
     Each section uses a different shade of blue for visual variety
     while maintaining the cohesive blue theme. */
  --col-equipment:  #0474C4;  /* Blue-600 — Equipment */
  --col-sites:      #1A99FE;  /* Blue-400 — Dive Sites */
  --col-agencies:   #02518B;  /* Blue-700 — Training Agencies */
  --col-education:  #0474C4;  /* Blue-600 — Education */
  --col-planning:   #1A99FE;  /* Blue-400 — Planning Tools */
  --col-research:   #02518B;  /* Blue-700 — Research */
  --col-marine:     #0474C4;  /* Blue-600 — Marine Life */
  --col-history:    #02518B;  /* Blue-700 — History */

  /* ── Section Card Image Tint Colors (light blue backgrounds) ── */
  --tint-equipment: #D7E4FF;  /* Blue-50 */
  --tint-sites:     #e3f0ff;  /* Slightly varied blue tint */
  --tint-agencies:  #D7E4FF;  /* Blue-50 */
  --tint-education: #e3f0ff;  /* Slightly varied blue tint */
  --tint-planning:  #D7E4FF;  /* Blue-50 */
  --tint-research:  #e3f0ff;  /* Slightly varied blue tint */
  --tint-marine:    #D7E4FF;  /* Blue-50 */
  --tint-history:   #e3f0ff;  /* Slightly varied blue tint */

  /* ── Typography ── */
  --font-sans:  'IBM Plex Sans', sans-serif;
  --font-serif: 'Playfair Display', serif;
  --font-mono:  'IBM Plex Mono', monospace;

  /* ── Spacing Scale ── */
  --sp-xs:  8px;
  --sp-sm:  16px;
  --sp-md:  24px;
  --sp-lg:  40px;
  --sp-xl:  60px;

  /* ── Nav Height ── */
  --nav-h: 56px;
}

/* ── 3. BASE TYPOGRAPHY ── */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

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

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

/* ── 4. NAVIGATION ── */

/* The nav starts transparent when positioned over the video hero,
   then transitions to solid dark blue once the hero scrolls out of view.
   The .solid class is toggled by nav.js via IntersectionObserver. */
.site-nav {
  position: fixed;           /* Stays at top of viewport at all times */
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-xl);
  gap: 0;
  background: transparent;   /* Transparent over hero */
  transition: background 0.4s ease, border-bottom 0.4s ease;
}

/* Applied by nav.js when the hero scrolls out of view */
.site-nav.solid {
  background: rgba(0, 18, 37, 0.97);  /* Dark blue (blue-900) with slight transparency */
  border-bottom: 0.5px solid var(--border-dark);
  backdrop-filter: blur(8px);
}

/* Site name / logo text */
.nav-logo {
  font-size: 16px;
  font-weight: 500;
  color: var(--accent);  /* Bright blue accent */
  letter-spacing: 0.5px;
  white-space: nowrap;
  margin-right: 28px;
  flex-shrink: 0;
}

/* Container for all nav items */
.nav-items {
  display: flex;
  gap: 2px;
  flex: 1;
  list-style: none;
}

/* Individual nav item */
.nav-item {
  position: relative;  /* Allows dropdown to be absolutely positioned beneath it */
}

/* Nav link text */
.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 16px;
  color: rgba(147, 190, 255, 0.7);  /* Light blue (blue-100) with opacity */
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
  font-family: var(--font-sans);
  border: none;
  background: none;
}

.nav-link:hover,
.nav-link.active {
  color: #ffffff;
  background: rgba(26, 153, 254, 0.15);  /* Blue-400 with transparency */
}

/* Small chevron arrow on items that have dropdowns */
.nav-chev {
  font-size: 8px;
  opacity: 0.45;
  margin-top: 1px;
}

/* CTA button on the far right (The Book) */
.nav-cta {
  margin-left: auto;
  flex-shrink: 0;
  background: rgba(26, 153, 254, 0.12);  /* Light blue background */
  border: 0.5px solid rgba(26, 153, 254, 0.35);
  color: var(--blue-100);  /* Light blue text */
  font-size: 16px;
  font-family: var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.nav-cta:hover {
  background: rgba(26, 153, 254, 0.2);
}

/* ── 5. DROPDOWN MENUS ── */

/* Dropdown panel — hidden by default, shown when .open is added by nav.js */
.nav-dropdown {
  position: absolute;
  top: calc(var(--nav-h) - 6px);   /* Slight overlap with nav bar */
  left: 0;
  background: var(--dark-surface);  /* Dark blue surface */
  border: 0.5px solid rgba(147, 190, 255, 0.15);
  border-radius: 8px;
  padding: 6px;
  min-width: 220px;
  display: none;                    /* Hidden until .open */
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0, 18, 37, 0.4);
}

/* Visible state — toggled by nav.js */
.nav-dropdown.open {
  display: block;
}

/* Individual item inside a dropdown */
.dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 16px;
  color: rgba(236, 238, 241, 0.6);  /* Light blue with opacity */
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.dd-item:hover {
  background: rgba(26, 153, 254, 0.1);
  color: rgba(147, 190, 255, 0.95);
}

/* Small blue dot before each dropdown item */
.dd-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);  /* Bright blue */
  opacity: 0.6;
  flex-shrink: 0;
}

/* ── 6. HERO SECTION ── */

/* Outer wrapper — sets fixed height so video fills it */
.hero-wrap {
  position: relative;
  min-height: 100vh;           /* Full viewport height */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* Content sits at bottom of hero */
  overflow: hidden;
  padding-top: var(--nav-h);   /* Prevent content going under fixed nav */
}

/* The <video> element — fills the hero completely */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;    /* Cover the container, crop if needed */
  object-position: center;
  z-index: 0;
}

/* Fallback for when video hasn't loaded yet — dark blue gradient background */
.hero-video-fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--blue-800) 0%, var(--blue-900) 50%, #000a14 100%);
  z-index: 0;
}

/* Dark gradient overlay that fades the video to dark blue at the bottom —
   this makes the text readable against the video */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--blue-900)  0%,           /* Fully opaque dark blue at bottom */
    rgba(0, 18, 37, 0.6) 45%,      /* Semi-transparent in middle */
    rgba(0, 18, 37, 0.2) 100%      /* Mostly transparent at top */
  );
  z-index: 1;
}

/* The text content inside the hero */
.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 var(--sp-xl) 52px;
  max-width: 660px;
}

/* Small uppercase label above the main title */
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--blue-100);  /* Light blue */
  margin-bottom: 14px;
  opacity: 0.85;
}

/* Main hero heading */
.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(48px, 8vw, 100px);
  font-weight: 700;
  line-height: 0.95;
  color: #ffffff;
  letter-spacing: -2px;
  margin-bottom: 16px;
}

/* The italic emphasised part of the title */
.hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--blue-100);  /* Light blue accent */
}

/* Subtitle text below the main title */
.hero-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(15px, 1.8vw, 20px);
  color: rgba(147, 190, 255, 0.65);  /* Muted light blue */
  margin-bottom: 14px;
}

/* Descriptive paragraph */
.hero-desc {
  font-size: 13.5px;
  font-weight: 300;
  color: rgba(147, 190, 255, 0.55);  /* Muted light blue */
  line-height: 1.85;
  max-width: 520px;
  margin-bottom: 28px;
}

/* Container for hero CTA buttons */
.hero-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Shared hero button styles */
.hero-btn {
  padding: 11px 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, background 0.15s;
}

.hero-btn:hover { opacity: 0.9; }

/* Primary CTA — bright blue fill */
.hero-btn.primary {
  background: var(--blue-400);  /* Bright blue */
  color: #ffffff;
}

/* Secondary CTA — transparent with border */
.hero-btn.secondary {
  background: transparent;
  border: 0.5px solid rgba(147, 190, 255, 0.3);
  color: rgba(147, 190, 255, 0.85);
}

/* Stats cluster — positioned bottom-right of hero */
.hero-stats {
  position: absolute;
  bottom: 52px;
  right: var(--sp-xl);
  z-index: 2;
  display: flex;
  gap: 28px;
}

.hero-stat .n {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--blue-100);  /* Light blue */
  line-height: 1;
  display: block;
}

.hero-stat .l {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(147, 190, 255, 0.35);
  margin-top: 4px;
  display: block;
}

/* Scroll cue at bottom centre of hero */
.hero-scroll {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hero-scroll-line {
  width: 1px;
  height: 30px;
  background: linear-gradient(to bottom, rgba(147, 190, 255, 0.4), transparent);
}

.hero-scroll-text {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 2px;
  color: rgba(147, 190, 255, 0.3);
  text-transform: uppercase;
}

/* ── 7. SECTION STRUCTURE ── */

/* Light content section — white background used between dark strips */
.section-light {
  background: var(--page-bg);
}

/* Dark interlude strip (map feature, about section etc.) */
.section-dark {
  background: var(--dark-bg);
  position: relative;
  overflow: hidden;
}

/* Subtle radial gradient overlay on dark sections */
.section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 80% at 90% 20%,
    rgba(26, 153, 254, 0.08) 0%,  /* Blue accent glow */
    transparent 65%
  );
  pointer-events: none;
}

/* Section header used above carousels and grids */
.section-head {
  padding: var(--sp-lg) var(--sp-xl) var(--sp-sm);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-sm);
  max-width: 1600px;
  margin: 0 auto;
}

.section-head h2 {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--text-primary);  /* Darkest blue */
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}

.section-head p {
  font-size: 12.5px;
  color: var(--text-muted);  /* Medium blue */
}

/* Thin label line used as a section divider */
.section-label {
  padding: var(--sp-lg) var(--sp-xl) var(--sp-sm);
  max-width: 1600px;
  margin: 0 auto;
}

.section-label-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}

.section-label-text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.section-label-line {
  flex: 1;
  height: 0.5px;
  background: var(--border-light);
}

/* ── 8. CAROUSEL SYSTEM ── */
/* NOTE: These carousel styles are still used by the VIDEO section,
   but NOT by the explore section which now uses a grid layout */

/* Controls row — dots + arrow buttons, aligned with section-head */
.carousel-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Navigation arrow button */
.carousel-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border-med);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  user-select: none;
  line-height: 1;
}

.carousel-btn:hover {
  background: var(--blue-600);  /* Dark blue */
  color: #ffffff;
  border-color: var(--blue-600);
}

/* Dot indicators showing current carousel position */
.carousel-dots {
  display: flex;
  gap: 5px;
}

.carousel-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-med);
  transition: background 0.2s;
  cursor: pointer;
}

.carousel-dot.active {
  background: var(--blue-400);  /* Bright blue */
}

/* Outer wrapper — overflow hidden so cards outside viewport are clipped */
.carousel-outer {
  overflow: hidden;
  padding: 0 var(--sp-xl) var(--sp-lg);
}

/* The scrolling track — all cards sit inline here */
.carousel-track {
  display: flex;
  gap: 14px;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* ── 9. SECTION CARDS ── */
/* MODIFIED: These cards are now displayed in a GRID layout in the explore section,
   but the card structure itself remains the same */

/* Base card — applies to all section cards in the "Explore the platform" section */
.sec-card {
  /* REMOVED: flex-basis calculation for carousel layout */
  /* NOW: Cards will be sized by the grid container */
  background: var(--surface);
  border: 0.5px solid var(--border-light);
  border-top: 3px solid var(--border-med);  /* Accent colour overrides this per-section */
  border-radius: 0;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.sec-card:hover {
  box-shadow: 0 6px 24px rgba(26, 153, 254, 0.15);  /* Blue shadow */
  transform: translateY(-2px);
}

/* Greyed-out style for "coming soon" cards */
.sec-card.soon {
  opacity: 0.6;
  cursor: default;
}

.sec-card.soon:hover {
  box-shadow: none;
  transform: none;
}

/* Card image / icon area */
.sec-card-img {
  width: 100%;
  aspect-ratio: 16 / 16;
  background: var(--surface-2);  /* Light blue tint */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.sec-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder text when no image is available */
.sec-card-img-placeholder {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(26, 153, 254, 0.2);  /* Very light blue */
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* "Coming soon" badge overlaid on card image */
.sec-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--surface);
  border: 0.5px solid var(--border-med);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
}

/* Card text body */
.sec-card-body {
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Small category label */
.sec-card-cat {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Card title */
.sec-card-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.2px;
  margin-bottom: 8px;
  /* Colour set inline via JS from sections.json accentColour */
}

/* Card description */
.sec-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.75;
  flex: 1;
  margin-bottom: 12px;
}

/* Card footer — tags + CTA link */
.sec-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 0.5px solid var(--border-light);
  gap: 8px;
}

/* Tags container */
.sec-card-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
}

/* Individual tag pill */
.sec-tag {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--surface-2);  /* Light blue background */
  border: 0.5px solid var(--border-light);
  color: var(--text-muted);
  border-radius: 2px;
  white-space: nowrap;
}

/* "Explore →" link */
.sec-card-cta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  transition: letter-spacing 0.15s;
  /* Colour set inline from accentColour */
}

.sec-card:hover .sec-card-cta {
  letter-spacing: 2.5px;
}

/* ── 9b. EXPLORE SECTION GRID LAYOUT ── */
/* NEW: Grid container specifically for the explore section
   This replaces the carousel layout for this section only */

/* Grid container wrapper - replaces carousel-outer for explore section */
.explore-grid-container {
  /* Constrain the grid to a maximum width and center it */
  max-width: 1600px;
  margin: 0 auto;
  /* Add padding on the sides for breathing room */
  padding: 0 var(--sp-xl) var(--sp-lg);
}

/* The actual grid that holds all the section cards */
.explore-grid {
  /* Create a responsive grid with 3 columns on desktop */
  display: grid;
  /* Each column takes equal space, with a minimum of 280px to prevent cards getting too narrow */
  grid-template-columns: repeat(3, 1fr);
  /* Gap between cards - horizontal and vertical */
  gap: 20px;
}

/* Loading state indicator (shown while cards are being fetched) */
.grid-loading {
  /* Center the loading text within the grid container */
  padding: 40px var(--sp-xl);
  /* Monospace font for a technical look */
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  /* Muted blue color */
  color: var(--text-muted);
  /* Center align the text */
  text-align: center;
  /* Span across all columns if grid is already created */
  grid-column: 1 / -1;
}

/* ── 10. VIDEO CAROUSEL ── */
/* NOTE: Video carousel remains unchanged and still uses carousel layout */

/* Video card in the video carousel */
.vid-card {
  flex: 0 0 calc((100% - 42px) / 4); /* 4 visible */
  background: var(--surface);
  border: 0.5px solid var(--border-light);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
}

.vid-card:hover {
  box-shadow: 0 4px 16px rgba(26, 153, 254, 0.12);  /* Blue shadow */
  transform: translateY(-2px);
}

/* Video thumbnail area */
.vid-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}

.vid-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Play button overlay on video thumbnail */
.vid-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 18, 37, 0.5);
  opacity: 0;
  transition: opacity 0.2s;
}

.vid-card:hover .vid-play {
  opacity: 1;
}

.vid-play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blue-400);
  border: none;
  color: #ffffff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s;
}

.vid-card:hover .vid-play-btn {
  transform: scale(1.08);
}

/* Video card text */
.vid-body {
  padding: 14px 16px;
}

.vid-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 5px;
}

.vid-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── 11. FEATURE STRIPS ── */

/* Two-column layout for feature sections (dark background) */
.feature-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 56px var(--sp-xl) 64px;
  max-width: 1600px;
  margin: 0 auto;
  align-items: center;
}

/* Text column */
.feature-text {
  position: relative;
  z-index: 2;
}

.feature-text .lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--blue-100);
  opacity: 0.65;
  margin-bottom: 12px;
}

.feature-text h3 {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.feature-text p {
  font-size: 13.5px;
  color: rgba(147, 190, 255, 0.5);
  line-height: 1.9;
  margin-bottom: 20px;
}

.feature-text a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue-100);
  transition: letter-spacing 0.15s, color 0.15s;
  display: inline-block;
}

.feature-text a:hover {
  letter-spacing: 3px;
  color: #ffffff;
}

/* Map preview area */
.feature-map {
  position: relative;
  aspect-ratio: 16 / 10;
  background: rgba(147, 190, 255, 0.03);
  border: 0.5px solid rgba(147, 190, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  z-index: 2;
}

/* Grid lines on map */
.feature-map-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(147, 190, 255, 0.04) 0.5px, transparent 0.5px),
    linear-gradient(90deg, rgba(147, 190, 255, 0.04) 0.5px, transparent 0.5px);
  background-size: 40px 40px;
}

/* Map label */
.feature-map-label {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(147, 190, 255, 0.3);
  z-index: 2;
}

/* Map pin marker */
.map-pin {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 3;
}

/* Animated ring around pin */
.map-pin-ring {
  position: absolute;
  inset: -4px;
  border: 1.5px solid rgba(26, 153, 254, 0.4);
  border-radius: 50%;
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  75%, 100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* Pin dot */
.map-pin-dot {
  position: absolute;
  inset: 0;
  background: var(--blue-400);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(26, 153, 254, 0.6);
}

/* Dimmed pins in background */
.map-pin.dim {
  opacity: 0.3;
}

.map-pin.dim .map-pin-ring {
  animation: none;
}

/* ── 12. FOOTER ── */

.site-footer {
  background: var(--dark-bg);
  position: relative;
  z-index: 1;
}

/* Top section — four column grid */
.footer-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-xl);
  padding: 48px var(--sp-xl) 44px;
  max-width: 1600px;
  margin: 0 auto;
}

/* Individual footer column */
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--blue-100);
  margin-bottom: 16px;
  opacity: 0.8;
}

.footer-col p {
  font-size: 12px;
  color: rgba(147, 190, 255, 0.4);
  line-height: 1.75;
  margin-bottom: 10px;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 9px;
}

.footer-col a {
  font-size: 12px;
  color: rgba(147, 190, 255, 0.4);
  transition: color 0.15s;
}

.footer-col a:hover {
  color: rgba(147, 190, 255, 0.85);
}

.footer-col a.gold {
  color: rgba(26, 153, 254, 0.7);
}

.footer-col a.gold:hover {
  color: var(--blue-400);
}

/* Thin divider between top and bottom of footer */
.footer-divider {
  border: none;
  border-top: 0.5px solid rgba(147, 190, 255, 0.08);
  margin: 0 var(--sp-xl);
}

/* Bottom bar — copyright + nav links */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--sp-xl) 24px;
  max-width: 1600px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: rgba(147, 190, 255, 0.25);
  letter-spacing: 0.5px;
}

.footer-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-nav a {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(147, 190, 255, 0.25);
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.15s;
}

.footer-nav a:hover {
  color: rgba(147, 190, 255, 0.65);
}

/* ── 13. COOKIE CONSENT BANNER ── */

/* Fixed banner at the bottom of the viewport */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(0, 18, 37, 0.97);  /* Dark blue */
  border-top: 0.5px solid rgba(147, 190, 255, 0.15);
  backdrop-filter: blur(8px);
  padding: 18px var(--sp-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
  transform: translateY(0);
  transition: transform 0.4s ease;
}

/* Hidden state — slides banner down off screen */
.cookie-banner.hidden {
  transform: translateY(110%);
}

/* Cookie banner text */
.cookie-text {
  font-size: 12px;
  color: rgba(147, 190, 255, 0.65);
  line-height: 1.65;
  flex: 1;
  min-width: 260px;
}

.cookie-text a {
  color: var(--blue-100);  /* Light blue */
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Cookie action buttons */
.cookie-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cookie-btn {
  padding: 8px 18px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
}

.cookie-btn:hover { opacity: 0.85; }

/* Accept all — bright blue fill */
.cookie-btn.accept {
  background: var(--blue-400);  /* Bright blue */
  color: #ffffff;
}

/* Decline / essential only — transparent with border */
.cookie-btn.decline {
  background: transparent;
  border: 0.5px solid rgba(147, 190, 255, 0.3);
  color: rgba(147, 190, 255, 0.7);
}

/* ── 14. SECTION PAGE HERO (used on all inner section pages) ── */

/* Smaller hero for section pages — no video, uses a colour gradient */
.page-hero {
  background: var(--dark-bg);
  padding: 80px var(--sp-xl) 72px;
  position: relative;
  overflow: hidden;
}

/* Coloured radial glow — accent colour injected inline via style attr */
.page-hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
}

/* Breadcrumb navigation at top of page hero */
.page-breadcrumb {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--blue-100);  /* Light blue */
  opacity: 0.75;
  margin-bottom: 20px;
}

.page-breadcrumb a {
  color: var(--blue-100);
  opacity: 0.5;
  transition: opacity 0.15s;
}

.page-breadcrumb a:hover { opacity: 1; }

.page-breadcrumb span { opacity: 0.3; margin: 0 6px; }

/* Section page title */
.page-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -1.5px;
  margin-bottom: 14px;
}

/* Coloured bottom accent line */
.page-hero-spectrum {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  /* Background-color injected inline per section */
}

/* ── 15. ABOUT STRIP (on index.html) ── */

/* Two-column dark section about the site and the book */
.about-strip {
  position: relative;
  z-index: 1;
}

.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding: 56px var(--sp-xl) 64px;
  max-width: 1600px;
  margin: 0 auto;
}

.about-col h2 {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 14px;
  line-height: 1.2;
}

.about-col h2 em {
  color: var(--blue-100);  /* Light blue */
  font-style: italic;
}

.about-col p {
  font-size: 12.5px;
  color: rgba(147, 190, 255, 0.5);
  line-height: 1.9;
}

.about-col p + p {
  margin-top: 10px;
}

/* ── 16. UTILITIES ── */

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

/* Max-width container, centred */
.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--sp-xl);
}

/* Section-level horizontal rule / visual divider */
.section-hr {
  border: none;
  border-top: 0.5px solid var(--border-light);
  margin: 0 var(--sp-xl);
}

/* ── 17. RESPONSIVE BREAKPOINTS ── */

/* Tablet (≤1100px) — collapse footer to 2 cols, hide hero stats */
@media (max-width: 1100px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-lg);
  }
  .hero-stats {
    display: none;
  }
  
  /* MODIFIED: Explore grid becomes 2 columns on tablet */
  .explore-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile (≤700px) — single column, reduce padding */
@media (max-width: 700px) {
  :root {
    --sp-xl: 24px;
    --sp-lg: 28px;
  }
  .site-nav {
    padding: 0 var(--sp-md);
  }
  .nav-items {
    display: none; /* Mobile nav handled separately if needed */
  }
  .hero-content {
    padding-bottom: 36px;
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--sp-md);
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .feature-strip {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
  }
  .cookie-banner {
    padding: 16px var(--sp-md);
  }
  
  /* Keep carousel styles for video section */
  .carousel-outer {
    padding-left: var(--sp-md);
    padding-right: var(--sp-md);
  }
  .section-head,
  .section-label {
    padding-left: var(--sp-md);
    padding-right: var(--sp-md);
  }
  .about-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  /* MODIFIED: Explore grid becomes single column on mobile */
  .explore-grid {
    grid-template-columns: 1fr;
  }
  
  /* MODIFIED: Adjust padding for explore grid container on mobile */
  .explore-grid-container {
    padding-left: var(--sp-md);
    padding-right: var(--sp-md);
  }
}