/* ============================================================
   style.css — Nuclear Vision Design System
   Warm beige / teal palette — LIGHT ONLY, no dark mode
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300..700&display=swap');

/* ── Design Tokens ───────────────────────────────────────── */
:root {
  /* --- Type Scale --- */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.9rem  + 0.5vw,  1.125rem);
  --text-lg:   clamp(1.125rem, 0.95rem + 0.85vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1rem    + 1.5vw,  2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    8rem);

  /* --- Spacing --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Fonts --- */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;

  /* --- Brand Colors (warm beige / teal palette) --- */
  /* Backgrounds */
  --color-bg:              #F9F8F2;   /* warm beige — primary page bg */
  --color-surface:         #F5F7F8;   /* ice white — cards, alt sections */
  --color-surface-2:       #FFFFFF;   /* white — card interiors */
  --color-surface-offset:  #EDF4F6;   /* light teal wash */
  --color-divider:         #D8E6EB;   /* teal-tinted divider */
  --color-border:          #BFD8E0;   /* teal border */

  /* Text */
  --color-text:            #2D4A53;   /* dark teal-gray — body */
  --color-text-muted:      #5A7A85;   /* muted teal — secondary */
  --color-text-faint:      #9BB5BF;   /* faint teal — placeholders */
  --color-text-inverse:    #FFFFFF;   /* white — on dark teal */
  --color-heading:         #075D72;   /* deep teal — headings */

  /* Brand Teals */
  --color-primary:         #075D72;   /* deep teal — nav, headings, brand */
  --color-primary-hover:   #054D5F;   /* darker deep teal */
  --color-primary-active:  #033A47;
  --color-primary-highlight: #C8E4ED;

  --color-accent:          #1F9EBF;   /* cyan/bright teal — CTAs, buttons */
  --color-accent-hover:    #1789A6;   /* darker cyan */
  --color-accent-active:   #075D72;   /* deep teal on press */

  --color-mid-teal:        #73B8CD;   /* medium teal — secondary accents */
  --color-light-teal:      #74C5D6;   /* light teal — hover, subtle */

  /* Status */
  --color-success:         #2A8C52;
  --color-warning:         #A0622A;
  --color-error:           #B03060;

  /* Radius */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast:        120ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth:      300ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows — tone-matched to warm teal surfaces */
  --shadow-sm: 0 1px 3px oklch(0.35 0.04 210 / 0.08),
               0 1px 2px oklch(0.35 0.04 210 / 0.04);
  --shadow-md: 0 4px 12px oklch(0.35 0.04 210 / 0.10),
               0 2px 4px oklch(0.35 0.04 210 / 0.06);
  --shadow-lg: 0 12px 32px oklch(0.35 0.04 210 / 0.14),
               0 4px 8px oklch(0.35 0.04 210 / 0.06);

  /* Content widths */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;
}

/* ── Typography Base ─────────────────────────────────────── */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.65;
}

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

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); font-weight: 600; font-family: var(--font-body); }

p { color: var(--color-text); }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-interactive);
}
a:hover { color: var(--color-accent-hover); }

/* ── Overline Label ──────────────────────────────────────── */
.label-overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-mid-teal);
}

/* ── Navigation ──────────────────────────────────────────── */
.ticker-bar {
  background: #054D5F;
  padding: var(--space-2) 0;
  overflow: hidden;
}
.ticker-bar__inner {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding-inline: var(--space-6);
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.ticker-bar a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  transition: color var(--transition-fast);
  flex-shrink: 0;
}
.ticker-bar a:hover { color: #fff; }
.ticker-bar__dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-light-teal);
  opacity: 0.6;
  flex-shrink: 0;
}
.ticker-bar__slogan {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .ticker-bar__inner {
    justify-content: center;
    gap: var(--space-4);
    font-size: 11px;
  }
  .ticker-bar__slogan {
    display: none;
  }
  .ticker-bar__slogan-dot {
    display: none;
  }
}

.site-nav {
  background: #F9F8F2;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(0,0,0,0.08);
}
.site-nav__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.site-nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}
.site-nav__logo-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: white;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.site-nav__logo-img {
  height: 40px;
  width: auto;
  display: block;
}
@media (max-width: 640px) {
  .site-nav__logo-img {
    height: 32px;
  }
}
.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin-left: auto;
}
.site-nav__links a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.site-nav__links a:hover,
.site-nav__links a.active {
  color: var(--color-primary);
  background: rgba(7,93,114,0.08);
}
.site-nav__links a.active {
  border-bottom: 2px solid var(--color-primary);
}
.site-nav__cta {
  background: var(--color-accent) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  padding: var(--space-2) var(--space-5) !important;
  font-family: inherit !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background var(--transition-interactive), transform var(--transition-interactive) !important;
}
.site-nav__cta:hover {
  background: var(--color-accent-hover) !important;
  transform: translateY(-1px);
}

/* ── Language Switcher (EN / DE) ─────────────────────────── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  background: rgba(7, 93, 114, 0.08);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  user-select: none;
}
.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  padding: 5px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background var(--transition-interactive), color var(--transition-interactive);
  line-height: 1;
}
.lang-switch__btn:hover {
  color: var(--color-primary);
}
.lang-switch__btn.is-active {
  background: var(--color-primary);
  color: white;
}
.lang-switch__btn.is-active:hover {
  color: white;
}
.lang-switch__flag {
  font-size: 13px;
  line-height: 1;
}
.site-nav__lang-wrap {
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-3);
}

/* Mobile-only lang switch — sits in the top header bar next to the hamburger.
   Hidden on desktop; the desktop switch lives inside the nav menu. */
.site-nav__lang-mobile {
  display: none;
}

@media (max-width: 768px) {
  /* Tighten the nav bar so logo + lang-mobile + hamburger all fit on a 375px viewport.
     The desktop layout uses gap:32px, padding:24px which is too generous for mobile
     once we add the always-visible language switch. */
  .site-nav__inner {
    gap: var(--space-2);
    padding-inline: var(--space-4);
  }

  /* Hide the in-menu (desktop) switch on mobile */
  .site-nav__lang-wrap { display: none; }

  /* Show the always-visible mobile switch in the top bar */
  .site-nav__lang-mobile {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
  }
  .site-nav__lang-mobile .lang-switch { padding: 3px; }
  .site-nav__lang-mobile .lang-switch__btn {
    padding: 5px 10px;
    font-size: 12px;
  }
  .site-nav__lang-mobile .lang-switch__flag { font-size: 13px; }

  /* When the mobile switch is in the bar, the hamburger no longer needs auto-margin */
  .site-nav__lang-mobile + .nav-hamburger { margin-left: 0; }
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--space-2);
  margin-left: auto;
  background: none;
  border: none;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: all var(--transition-interactive);
}

/* ── Nav Dropdown Menus ─────────────────────────────────── */
.nav-dropdown {
  position: relative;
}
.nav-dropdown > a {
  cursor: pointer;
}
.nav-dropdown__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  padding: var(--space-2) 0;
  z-index: 100;
  list-style: none;
  margin-top: var(--space-1);
  border: 1px solid rgba(255,255,255,0.1);
}
.nav-dropdown:hover .nav-dropdown__menu {
  display: block;
}
.nav-dropdown__menu li a {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 400;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
  border-radius: 0;
}
.nav-dropdown__menu li a:hover {
  background: rgba(255,255,255,0.12);
  color: white;
}
.nav-dropdown__menu li.nav-dropdown__sub a {
  padding-left: var(--space-8);
  font-size: calc(var(--text-sm) * 0.95);
  color: rgba(255,255,255,0.65);
}
.nav-dropdown__menu li.nav-dropdown__sub a::before {
  content: "└ ";
  opacity: 0.5;
  margin-right: 2px;
}

@media (max-width: 768px) {
  .nav-hamburger { display: flex; }
  .nav-dropdown__menu {
    display: none !important;
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    margin-top: 0;
    padding: 0;
  }
  .nav-dropdown.open .nav-dropdown__menu {
    display: block !important;
  }
  .nav-dropdown__menu li a {
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-6) var(--space-3) var(--space-8);
    color: rgba(255,255,255,0.65);
    display: block;
    width: 100%;
    box-sizing: border-box;  /* FIX: prevent overflow */
  }
  .nav-dropdown__menu li a:hover {
    color: white;
    background: rgba(255,255,255,0.08);
  }
  /* Chevron affordance on mobile dropdowns — indicates expandable */
  .nav-dropdown > a::after {
    content: " ⌄";
    display: inline-block;
    margin-left: auto;
    transition: transform var(--transition-fast);
    opacity: 0.6;
    font-size: 0.8em;
  }
  .nav-dropdown.open > a::after {
    transform: rotate(180deg);
    opacity: 1;
  }
  .site-nav__links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-primary);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    z-index: 200;
    margin-left: 0;
    padding: 72px var(--space-4) var(--space-6);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav__links.open { display: flex; }
  .site-nav__links > li {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .site-nav__links > li:last-child {
    border-bottom: none;
    margin-top: var(--space-4);
  }
  .site-nav__links > li > a {
    font-size: var(--text-lg);
    padding: var(--space-4) var(--space-4);
    color: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    box-sizing: border-box;  /* FIX: prevent overflow that clips chevron arrows */
    min-height: 52px;
  }
  .site-nav__links > li > a:hover,
  .site-nav__links > li > a.active {
    color: white;
    background: rgba(255,255,255,0.10);
  }
  /* X close button (shown inside mobile overlay only) */
  .nav-close {
    display: none;
    position: fixed;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.14);
    border: none;
    border-radius: 50%;
    color: white;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 210;
    padding: 0;
    transition: background var(--transition-fast), transform var(--transition-fast);
  }
  .nav-close svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.4; fill: none; }
  .nav-close:hover,
  .nav-close:active {
    background: rgba(255,255,255,0.24);
    transform: scale(0.95);
  }
  body:has(.site-nav__links.open) .nav-close { display: flex; }
  body:has(.site-nav__links.open) .nav-hamburger { visibility: hidden; }
}
/* Desktop: never show the close button */
@media (min-width: 769px) {
  .nav-close { display: none !important; }
}

/* ── Skip Link ───────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--color-primary);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  z-index: 9999;
  font-size: var(--text-sm);
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-2); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.625rem var(--space-6);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-body);
  border-radius: var(--radius-full);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--transition-interactive),
    color var(--transition-interactive),
    transform var(--transition-interactive),
    box-shadow var(--transition-interactive);
  border: 2px solid transparent;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--color-accent);
  color: white;
  box-shadow: 0 2px 8px oklch(from var(--color-accent) l c h / 0.3);
}
.btn-primary:hover {
  background: var(--color-accent-hover);
  box-shadow: 0 4px 14px oklch(from var(--color-accent) l c h / 0.35);
  color: white;
}

.btn-secondary {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-secondary:hover {
  background: var(--color-accent);
  color: white;
}

/* Solid mid-teal button — used on the hero where btn-secondary's transparent
   background doesn't read against the photographic background. Slightly
   lighter than .btn-primary so the visual hierarchy is preserved. */
.btn-mid {
  background: var(--color-mid-teal);
  color: white;
  box-shadow: 0 2px 8px oklch(from var(--color-mid-teal) l c h / 0.28);
}
.btn-mid:hover {
  background: var(--color-light-teal);
  box-shadow: 0 4px 14px oklch(from var(--color-mid-teal) l c h / 0.35);
  color: white;
}

.btn-white {
  background: white;
  color: var(--color-primary);
}
.btn-white:hover {
  background: var(--color-surface-offset);
}

.btn-ghost {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,0.5);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: white;
  color: white;
}

/* ── Containers ──────────────────────────────────────────── */
.container {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.container--default {
  max-width: var(--content-default);
}
.container--narrow {
  max-width: var(--content-narrow);
}

/* ── Inline Section Tracker (pill bar) ──────────────────── */
.section-tracker {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  padding: var(--space-3) 0;
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(8px);
  background: oklch(from var(--color-surface) l c h / 0.92);
}
.section-tracker__inner {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.section-tracker__inner::-webkit-scrollbar { display: none; }
.section-tracker__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  flex-shrink: 0;
  padding-right: var(--space-3);
  border-right: 1px solid var(--color-divider);
}
.section-tracker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-1);
  flex-wrap: nowrap;
}
.section-tracker__list a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.section-tracker__list a:hover {
  color: var(--color-primary);
  background: oklch(from var(--color-primary) l c h / 0.06);
}
.section-tracker__list a.active {
  color: var(--color-accent);
  background: oklch(from var(--color-accent) l c h / 0.10);
  font-weight: 600;
}
.section-tracker__list li.section-tracker__sub a {
  padding-left: var(--space-5);
  font-size: calc(var(--text-sm) * 0.95);
}
.section-tracker__list li.section-tracker__sub a::before {
  content: "└ ";
  opacity: 0.5;
  margin-right: 2px;
}
@media (max-width: 640px) {
  .section-tracker__label { display: none; }
}

/* ── Page Layout with Section Sidebar ───────────────────── */
.page-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-12);
  max-width: var(--content-wide);
  margin-inline: auto;
  padding: var(--space-12) var(--space-6);
  align-items: start;
}
.page-layout__main { min-width: 0; }

.section-nav {
  position: sticky;
  top: 110px;
  padding: var(--space-6) 0;
  border-right: 1px solid var(--color-divider);
}
.section-nav__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 var(--space-4) 0;
  padding-right: var(--space-6);
}
.section-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.section-nav__list a {
  display: block;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  margin-right: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  line-height: 1.4;
}
.section-nav__list a:hover {
  color: var(--color-primary);
  background: oklch(from var(--color-primary) l c h / 0.04);
}
.section-nav__list a.active {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  font-weight: 600;
  background: oklch(from var(--color-accent) l c h / 0.06);
}
.section-nav__list li.section-nav__sub a {
  padding-left: var(--space-6);
  font-size: calc(var(--text-sm) * 0.95);
  color: var(--color-text-faint);
}
.section-nav__list li.section-nav__sub a::before {
  content: "└ ";
  opacity: 0.5;
  margin-right: 2px;
}

@media (max-width: 900px) {
  .page-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-8) var(--space-4);
  }
  .section-nav {
    /* Pin below the main site nav so it's always visible while scrolling */
    position: sticky;
    top: 56px;
    z-index: 80;
    background: oklch(from var(--color-surface) l c h / 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: none;
    border-bottom: 1px solid var(--color-divider);
    border-top: 1px solid var(--color-divider);
    padding: var(--space-3) 0;
    margin: 0 calc(var(--space-4) * -1);
    padding-inline: 0;
    min-width: 0;
    max-width: none;
    width: calc(100% + var(--space-8));
    box-sizing: border-box;
    overflow: hidden;
  }
  /* Right-edge fade gradient — strong visual cue that content is swipeable */
  .section-nav::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 42px;
    background: linear-gradient(
      to right,
      oklch(from var(--color-surface) l c h / 0) 0%,
      oklch(from var(--color-surface) l c h / 0.92) 70%,
      oklch(from var(--color-surface) l c h / 1) 100%
    );
    pointer-events: none;
    z-index: 2;
  }
  /* "Swipe →" affordance pill — shows above the nav strip on first paint */
  .section-nav::before {
    content: "Swipe to explore →";
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    padding: 0 var(--space-4) var(--space-2);
    opacity: 0.75;
  }
  .section-nav__title { display: none; }
  .section-nav__list {
    flex-direction: row;
    overflow-x: auto;
    gap: var(--space-2);
    scrollbar-width: none; /* Firefox */
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    max-width: none;
    padding: 2px var(--space-4) 4px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--space-4);
  }
  .section-nav__list::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  .section-nav__list a {
    margin-right: 0;
    padding: 10px 16px;
    border-left: none;
    border-bottom: none;
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    border: 1.5px solid var(--color-divider);
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--text-sm);
    white-space: nowrap;
    flex-shrink: 0;
    scroll-snap-align: start;
    box-shadow: 0 1px 3px rgba(7,93,114,0.06);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    min-height: 40px;
  }
  .section-nav__list a:active {
    transform: scale(0.97);
  }
  .section-nav__list a.active {
    border: none;
    background: var(--color-accent);
    color: white;
    box-shadow: 0 2px 8px oklch(from var(--color-accent) l c h / 0.35);
  }
  .section-nav__list li.section-nav__sub a {
    /* Override the desktop indent + chevron on mobile pills */
    padding-left: 16px;
    font-size: var(--text-sm);
    color: var(--color-primary);
  }
  .section-nav__list li.section-nav__sub a::before {
    content: "↳ ";
    opacity: 0.6;
  }
  .section-nav__list li.section-nav__sub a.active {
    color: white;
  }
  .page-layout__main {
    min-width: 0;
    max-width: 100%;
    /* NOTE: overflow-x: hidden removed — caused vertical scroll trap on mobile.
       Body-level overflow-x: hidden (below) already prevents page-level horizontal overflow. */
  }
  /* Safety net: prevent media children from blowing out viewport width on mobile.
     Tables intentionally excluded — they may be wrapped in a horizontal-scroll container. */
  .page-layout__main img,
  .page-layout__main iframe,
  .page-layout__main video {
    max-width: 100%;
  }
}

/* Global mobile horizontal-overflow guard — applied site-wide.
   IMPORTANT: use `overflow-x: clip` (not `hidden`) on html/body so that
   `position: sticky` on .site-nav still binds to the viewport. `hidden`
   creates a scroll container which would re-anchor sticky to body and
   make the nav scroll away on mobile. `clip` clips overflow without
   creating a scroll container, preserving sticky behavior.
   Browser support: Chrome 90+, Firefox 81+, Safari 16+. */
@media (max-width: 768px) {
  html, body { overflow-x: clip; max-width: 100vw; }
  img, iframe, video { max-width: 100%; height: auto; }
  .container { max-width: 100%; padding-inline: var(--space-4); }
  /* Any raw .section block constrained to viewport */
  .section { max-width: 100%; overflow-x: clip; }
  /* Data tables stay scrollable within their wrapper */
  .table-scroll { max-width: 100%; overflow-x: auto; }
}

/* ── Section Helpers ─────────────────────────────────────── */
.section {
  padding-block: clamp(var(--space-12), 8vw, var(--space-24));
}
.section--cream { background: var(--color-bg); }
.section--ice   { background: var(--color-surface); }
.section--white { background: var(--color-surface-2); }
.section--teal  {
  background: var(--color-primary);
  color: white;
}
.section--teal h2,
.section--teal h3,
.section--teal p { color: white; }
.section--teal .label-overline {
  color: var(--color-light-teal);
  opacity: 0.9;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}
.section-header h2 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}
.section-header p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 62ch;
  margin-inline: auto;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--color-surface-2);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  border: 1px solid oklch(from var(--color-primary) l c h / 0.10);
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.card:hover { box-shadow: var(--shadow-md); }

.card--accent-border {
  border-top: 3px solid var(--color-accent);
}
.card--teal-border {
  border-left: 3px solid var(--color-mid-teal);
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative;
  /* Tie the minimum height to the hero image's aspect ratio (2400:1309 ≈ 1.833)
     so on wider viewports the hero grows to match — preventing object-fit:cover
     from clipping the battery cell's cap or base on 16:9 monitors that are wider
     than 85vh × 1.833. The 85vh keeps a baseline minimum on shorter viewports. */
  min-height: max(85vh, 54.55vw);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-bg) 0%, #EEF6F9 100%);
}
.hero__bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 1; /* Desktop hero is the combined battery+landscape image, shown at full opacity */
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(249,248,242,0.92) 0%,
    rgba(249,248,242,0.78) 38%,
    rgba(249,248,242,0.32) 62%,
    rgba(249,248,242,0) 100%
  );
}
/* Battery-cell product photo overlay — hidden on desktop since the cell is
   part of the new bg image. Used only on mobile (see media query below). */
.hero__product {
  display: none;
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding: var(--space-20) var(--space-6);
  width: 100%;
}
.hero__eyebrow { margin-bottom: var(--space-4); }
.hero__title {
  font-size: var(--text-3xl);
  color: var(--color-primary);
  line-height: 1.08;
  margin-bottom: var(--space-6);
  max-width: 13ch;
}
.hero__title em {
  font-style: italic;
  color: var(--color-accent);
}
.hero__subtitle {
  font-size: var(--text-base);
  color: var(--color-text);
  max-width: 52ch;
  margin-bottom: var(--space-8);
  line-height: 1.7;
}
.hero__ctas {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 640px) {
  .hero { min-height: 70vh; }
  .hero__title { max-width: none; }
  .hero__ctas { flex-direction: column; align-items: flex-start; }
}

/* ── Stats Banner ────────────────────────────────────────── */
.stats-banner {
  background: var(--color-primary);
  padding: var(--space-10) var(--space-6);
}
.stats-banner__grid {
  max-width: var(--content-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-8);
  text-align: center;
}
.stats-banner__item {}
.stats-banner__number {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: white;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.stats-banner__label {
  font-size: var(--text-xs);
  color: var(--color-light-teal);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Grid Layouts ────────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: var(--space-8);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-6);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-6);
}

/* ── Feature List ────────────────────────────────────────── */
.feature-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-offset);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
}
.feature-icon svg { color: var(--color-accent); }

/* ── Timeline ────────────────────────────────────────────── */
.timeline {
  position: relative;
  padding-left: var(--space-8);
}
.timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 8px;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}
.timeline-item {
  position: relative;
  margin-bottom: var(--space-8);
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-8) + 6px);
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-surface-2);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}
.timeline-item__date {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.timeline-item__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: var(--space-1);
}
.timeline-item__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── Tables ──────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-divider);
}
.data-table th {
  background: var(--color-primary);
  color: white;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
}
.data-table td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:nth-child(even) td { background: var(--color-surface); }
.data-table td:first-child { font-weight: 500; color: var(--color-heading); }

/* ── Team Cards ──────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--space-6);
}
.team-card {
  background: var(--color-surface-2);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-divider);
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.team-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.team-card__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  background: var(--color-surface-offset);
}
.team-card__photo-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: white;
  letter-spacing: -0.02em;
}
.team-card__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
}
.team-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-heading);
  margin-bottom: var(--space-1);
  font-weight: 400;
}
.team-card__title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.team-card__bio {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ── Maps ────────────────────────────────────────────────── */
.map-container {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-divider);
  height: 480px;
}
.map-container .leaflet-container {
  border-radius: var(--radius-xl);
}

/* ── Disclaimer Box ──────────────────────────────────────── */
.disclaimer-box {
  background: #FDF8EE;
  border: 1px solid #E8D5A3;
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-sm);
  color: #5A4A2A;
  line-height: 1.65;
}
.disclaimer-box strong { color: #7A5A18; }

/* ── CTA Strip ───────────────────────────────────────────── */
.cta-strip {
  text-align: center;
  padding: clamp(var(--space-12), 6vw, var(--space-20)) var(--space-6);
}
.cta-strip h2 { margin-bottom: var(--space-4); }
.cta-strip p {
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--space-8);
  font-size: var(--text-base);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}
.cta-strip .btn-cta-row {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Broker Cards ────────────────────────────────────────── */
.broker-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.broker-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.broker-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}
.broker-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* ── Form ────────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.form-group label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-heading);
}
.form-group input,
.form-group textarea,
.form-group select {
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  background: var(--color-surface-2);
  color: var(--color-text);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
  width: 100%;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px oklch(from var(--color-accent) l c h / 0.15);
}
.form-group textarea { min-height: 140px; resize: vertical; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  background: var(--color-primary);
  color: rgba(255,255,255,0.8);
  padding: var(--space-16) var(--space-6) var(--space-8);
}
.site-footer__grid {
  max-width: var(--content-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}
.site-footer__brand {}
.site-footer__brand .logo-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: white;
  margin-bottom: var(--space-3);
  display: block;
}
.site-footer__brand p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  max-width: 36ch;
}
.site-footer__col h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-light-teal);
  margin-bottom: var(--space-4);
}
.site-footer__col ul { list-style: none; }
.site-footer__col li { margin-bottom: var(--space-2); }
.site-footer__col a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.site-footer__col a:hover { color: white; }
.site-footer__bottom {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
}
.site-footer__bottom a {
  color: var(--color-light-teal);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.site-footer__bottom a:hover { color: white; }

@media (max-width: 900px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
  .site-footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ── Scroll Animations ───────────────────────────────────── */
.fade-in {
  opacity: 1;
}

@supports (animation-timeline: scroll()) {
  .fade-in {
    opacity: 0;
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
  }
}

@keyframes reveal-fade {
  to { opacity: 1; }
}

/* ── Badge / Tag ─────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.badge-teal {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}
.badge-accent {
  background: oklch(from var(--color-accent) l c h / 0.12);
  color: var(--color-accent-hover);
}

/* ── Divider ─────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--color-divider);
  margin-block: var(--space-8);
}

/* ── PDF Embed Card (memo / deck preview) ───────────────────
   Mobile browsers (especially iOS Safari) don't render PDFs inline in
   <iframe>, leaving a blank rectangle. Desktop shows the iframe; mobile
   gets a tappable card that opens the PDF natively. */
.pdf-embed-card__mobile { display: none; }
/* Open-Full-Screen button variants — desktop sees the HTML deck button,
   mobile sees the PDF button (HTML deck is 24MB, too heavy for mobile data). */
.pdf-embed-card__open-pdf { display: none; }

@media (max-width: 768px) {
  .pdf-embed-card__iframe { display: none !important; }
  .pdf-embed-card__open-html { display: none; }
  .pdf-embed-card__open-pdf { display: inline-flex; }
  .pdf-embed-card__mobile {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-5);
    background: linear-gradient(135deg, var(--color-surface-offset) 0%, #FFFFFF 100%);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    text-decoration: none;
    color: var(--color-text);
    transition: background var(--transition-interactive);
    border-bottom: 1px solid var(--color-divider);
  }
  .pdf-embed-card__mobile:active {
    background: linear-gradient(135deg, #DDEEF3 0%, var(--color-surface-offset) 100%);
  }
  .pdf-embed-card__mobile-icon {
    flex-shrink: 0;
    width: 56px; height: 56px;
    border-radius: var(--radius-lg);
    background: var(--color-accent);
    color: white;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px oklch(from var(--color-accent) l c h / 0.25);
  }
  .pdf-embed-card__mobile-icon svg { width: 28px; height: 28px; }
  .pdf-embed-card__mobile-text { flex: 1; min-width: 0; }
  .pdf-embed-card__mobile-title {
    font-weight: 700;
    color: var(--color-heading);
    font-size: var(--text-base);
    margin-bottom: 2px;
  }
  .pdf-embed-card__mobile-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .pdf-embed-card__mobile-arrow {
    flex-shrink: 0;
    color: var(--color-accent);
    font-size: var(--text-lg);
    font-weight: 700;
  }
}

/* ── Page Header ─────────────────────────────────────────── */
/* Soft cream→ice gradient layered over the battery-cell + Slovak landscape
   photo. The gradient is mostly opaque (~85%) so the image reads as a faint
   atmospheric backdrop while headings stay crisp. */
.page-header {
  background:
    linear-gradient(135deg, rgba(249,248,242,0.88) 0%, rgba(232,243,247,0.80) 100%),
    url('assets/page-header-bg.webp') center/cover no-repeat;
  padding: clamp(var(--space-12), 6vw, var(--space-20)) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
  position: relative;
}
.page-header__inner {
  max-width: var(--content-wide);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.page-header__label { margin-bottom: var(--space-3); }
.page-header h1 {
  font-size: var(--text-2xl);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.page-header p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* ── Share Structure Table ───────────────────────────────── */
.share-table-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-divider);
}

/* ── Media Cards ─────────────────────────────────────────── */
.media-card {
  background: var(--color-surface-2);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-sm);
}
.media-card__thumbnail {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--color-surface-offset);
  position: relative;
  overflow: hidden;
}
.media-card__body {
  padding: var(--space-5);
}
.media-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}
.media-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-heading);
  margin-bottom: var(--space-2);
  font-weight: 400;
}

/* ── Two-Col Section ─────────────────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.two-col--flip { direction: rtl; }
.two-col--flip > * { direction: ltr; }

@media (max-width: 768px) {
  .two-col { grid-template-columns: 1fr; }
  .two-col--flip { direction: ltr; }
}

/* ── Ore Comparison Table ────────────────────────────────── */
.comparison-table th:first-child { min-width: 200px; }
.comparison-positive {
  color: var(--color-success);
  font-weight: 600;
}

/* ── News / Press Releases ───────────────────────────────── */
.press-item {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-divider);
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}
.press-item:last-child { border-bottom: none; }
.press-item__date {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-width: 100px;
  margin-top: 3px;
  flex-shrink: 0;
}
.press-item__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-heading);
  margin-bottom: var(--space-2);
  font-weight: 400;
}
.press-item__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 540px) {
  .press-item { flex-direction: column; gap: var(--space-2); }
}

/* ── Contact Info ────────────────────────────────────────── */
.contact-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-divider);
}
.contact-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: oklch(from var(--color-accent) l c h / 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
}
.contact-card__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-1);
}
.contact-card__value {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-heading);
}
.contact-card__value a {
  color: var(--color-accent);
  text-decoration: none;
}
.contact-card__value a:hover {
  text-decoration: underline;
}

/* ── SVG Icon Helper ─────────────────────────────────────── */
.icon { display: inline-block; vertical-align: middle; }

/* ── Responsive Tables ───────────────────────────────────── */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
}

/* ── TradingView Widget ──────────────────────────────────── */
.tradingview-widget-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-divider);
  height: 420px;
}

/* ── Highlight Box ───────────────────────────────────────── */
.highlight-box {
  background: oklch(from var(--color-accent) l c h / 0.07);
  border: 1px solid oklch(from var(--color-accent) l c h / 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

/* ── Thesis Pillars ──────────────────────────────────────── */
.thesis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--space-6);
}
.thesis-item {
  padding: var(--space-6);
  background: var(--color-surface-2);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-divider);
  border-top: 3px solid var(--color-accent);
}
.thesis-item__num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-mid-teal);
  line-height: 1;
  margin-bottom: var(--space-3);
  font-style: italic;
}
.thesis-item h3 {
  font-size: var(--text-base);
  font-weight: 700;
  font-family: var(--font-body);
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}
.thesis-item p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── Investment Highlight Callout ───────────────────────── */
.callout-box {
  background: linear-gradient(135deg, var(--color-primary) 0%, #1077A0 100%);
  color: white;
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-12);
  text-align: center;
}
.callout-box h2, .callout-box p { color: white; }
.callout-box h2 { margin-bottom: var(--space-4); }
.callout-box p { color: rgba(255,255,255,0.82); max-width: 56ch; margin-inline: auto; }

/* ── Hero Newsletter Form ─────────────────────────────────── */
.hero-newsletter { width: 100%; max-width: 520px; }
.hero-newsletter__row {
  display: flex;
  gap: var(--space-2);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-full);
  padding: 5px 5px 5px var(--space-4);
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  border: 1.5px solid rgba(7,93,114,0.12);
}
.hero-newsletter__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  color: var(--color-heading);
  outline: none;
  min-width: 0;
  padding: 0.5rem 0;
}
.hero-newsletter__input::placeholder { color: var(--color-text-muted); }
.hero-newsletter__btn {
  border-radius: var(--radius-full) !important;
  white-space: nowrap;
  padding: 0.625rem var(--space-5) !important;
  font-size: var(--text-sm) !important;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.hero-newsletter__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  padding-left: var(--space-4);
}
.hero-newsletter__success {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: 600;
  margin-top: var(--space-3);
  padding-left: var(--space-4);
}

/* ── CTA Newsletter (teal banner) ─────────────────────────── */
.cta-newsletter { width: 100%; max-width: 480px; margin-inline: auto; margin-top: var(--space-6); }
.cta-newsletter__row {
  display: flex;
  gap: var(--space-2);
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius-full);
  padding: 5px 5px 5px var(--space-4);
  border: 1.5px solid rgba(255,255,255,0.25);
}
.cta-newsletter__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  color: white;
  outline: none;
  min-width: 0;
  padding: 0.5rem 0;
}
.cta-newsletter__input::placeholder { color: rgba(255,255,255,0.55); }
.cta-newsletter__btn {
  border-radius: var(--radius-full) !important;
  white-space: nowrap;
  padding: 0.625rem var(--space-5) !important;
  font-size: var(--text-sm) !important;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Mobile responsive ────────────────────────────────────── */
@media (max-width: 520px) {
  .hero-newsletter__row,
  .cta-newsletter__row {
    flex-direction: column;
    border-radius: var(--radius-xl);
    padding: var(--space-3);
  }
  .hero-newsletter__btn,
  .cta-newsletter__btn {
    width: 100%;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE POLISH — touch targets, tighter hero, sticky CTA, etc.
   ══════════════════════════════════════════════════════════════ */

/* Stock chart card — use class instead of inline for responsive height */
.card.chart-card { height: 680px; }
@media (max-width: 768px) {
  .card.chart-card { height: 440px; }
}

/* Touch targets: ensure ≥44px on mobile */
@media (max-width: 768px) {
  .nav-hamburger {
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-2);
  }
  .section-nav__list a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
  }
  .nav-dropdown__menu li a {
    min-height: 44px;
    padding: var(--space-3) var(--space-6) var(--space-3) var(--space-8);
    display: flex;
    align-items: center;
  }
  .site-nav__links > li > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .btn {
    min-height: 44px;
  }
}

/* Team grid: 2 columns on all mobile widths */
@media (max-width: 768px) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .team-card__photo { aspect-ratio: 1 / 1; object-fit: cover; }
}

/* Tighter hero on mobile */
@media (max-width: 768px) {
  .hero {
    min-height: 88vh;
  }
  .hero__content {
    padding: var(--space-10) var(--space-5) var(--space-8);
  }
  .hero__title {
    font-size: 2.25rem;
    line-height: 1.1;
  }
  .hero__subtitle {
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
  }
  .hero {
    min-height: 88vh;
  }
  /* Hide Slovak landscape on mobile — battery cell carries the visual. */
  .hero__bg {
    display: none;
  }
  /* Mute the overlay since the battery image is acting as the bg. */
  .hero__overlay {
    background: linear-gradient(
      to bottom,
      rgba(249,248,242,0.6) 0%,
      rgba(249,248,242,0.3) 50%,
      rgba(249,248,242,0.6) 100%
    );
  }
  /* Battery-cell on mobile: full hero coverage, object-fit cover preserves
     aspect ratio (no compression), faded so text overlays remain readable. */
  .hero__product {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center;
    opacity: 0.35;
    filter: none;
  }
}

/* Page-header a bit tighter on mobile */
@media (max-width: 768px) {
  .page-header__inner { padding: var(--space-8) var(--space-5); }
  .page-header h1 { font-size: 2rem; }
}

/* Sticky mobile Buy UPPR bar */
.mobile-cta { display: none; }
@media (max-width: 768px) {
  .mobile-cta {
    display: flex;
    position: fixed;
    bottom: 12px;
    left: 12px;
    right: 12px;
    height: 52px;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: white;
    font-weight: 700;
    font-size: var(--text-base);
    border-radius: var(--radius-full);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    z-index: 90;
    text-decoration: none;
    gap: var(--space-2);
    border: none;
  }
  .mobile-cta:hover,
  .mobile-cta:focus { background: var(--color-accent-hover); color: white; }
  .mobile-cta svg { width: 16px; height: 16px; }
  /* Leave room above sticky CTA so footer isn't obscured */
  body { padding-bottom: 76px; }
  /* On mobile nav overlay, hide the sticky CTA */
  .site-nav__links.open ~ * .mobile-cta,
  body:has(.site-nav__links.open) .mobile-cta { display: none; }
}

/* Stock table horizontal scroll hint on mobile */
@media (max-width: 768px) {
  .table-scroll { position: relative; }
  .data-table { font-size: var(--text-sm); }
}

/* ══════════════════════════════════════════════════════════════
   SUBSCRIBE MODAL
   ══════════════════════════════════════════════════════════════ */
.subscribe-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.subscribe-modal.open { display: flex; }
.subscribe-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(7,93,114,0.55);
  backdrop-filter: blur(4px);
}
.subscribe-modal__dialog {
  position: relative;
  background: var(--color-surface-2);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 480px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
  z-index: 1;
  animation: subscribe-modal-in 0.18s ease-out;
}
@keyframes subscribe-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.subscribe-modal__close {
  position: absolute;
  top: 12px; right: 12px;
  background: transparent;
  border: none;
  width: 36px; height: 36px;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast);
}
.subscribe-modal__close:hover { background: oklch(from var(--color-primary) l c h / 0.06); }
.subscribe-modal__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.subscribe-modal__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
  font-weight: 400;
  line-height: 1.2;
}
.subscribe-modal__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  line-height: 1.6;
}
.subscribe-modal__form { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.subscribe-modal__form input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: 0.75rem var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  background: white;
  outline: none;
  transition: border-color var(--transition-fast);
}
.subscribe-modal__form input[type="email"]:focus { border-color: var(--color-accent); }
.subscribe-modal__success {
  display: none;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-align: center;
}
.subscribe-modal__success.show { display: block; }
.subscribe-modal__footnote {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-align: center;
  margin-top: var(--space-4);
}

/* Prevent body scroll when open */
body.modal-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════
   WHY INVEST (simple 4-pillar)
   ══════════════════════════════════════════════════════════════ */
.why-invest-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}
.why-pill {
  text-align: center;
  padding: var(--space-4) var(--space-2);
}
.why-pill__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: oklch(from var(--color-accent) l c h / 0.10);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  transition: background var(--transition-interactive), transform var(--transition-interactive);
}
.why-pill:hover .why-pill__icon {
  background: oklch(from var(--color-accent) l c h / 0.18);
  transform: translateY(-2px);
}
.why-pill__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}
.why-pill__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 32ch;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .why-invest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}
@media (max-width: 480px) {
  .why-invest-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ══════════════════════════════════════════════════════════════
   PROJECT STATUS BADGE
   ══════════════════════════════════════════════════════════════ */
.card-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: oklch(from var(--color-success) l c h / 0.08);
  border: 1px solid oklch(from var(--color-success) l c h / 0.2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.card-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 3px oklch(from var(--color-success) l c h / 0.20);
  animation: card-status-pulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes card-status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px oklch(from var(--color-success) l c h / 0.20); }
  50%      { box-shadow: 0 0 0 6px oklch(from var(--color-success) l c h / 0.08); }
}
.card-status__text {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-success);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
.card-status__date {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-faint);
  margin-left: auto;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Botswana secondary card — collapse to single column on mobile */
@media (max-width: 768px) {
  .botswana-secondary-card {
    grid-template-columns: 1fr !important;
  }
  .botswana-secondary-card > div:nth-child(2) {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--color-divider);
    padding-top: var(--space-5) !important;
  }
}