@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  /* Earth Power Capital brand palette (from the original design system) */
  --navy: #0B1F2E;
  --navy-2: #12283B;
  --charcoal: #1C1E1F;
  --white: #FFFFFF;
  --warm-white: #FAF8F4;
  --grey-50: #F3F1EC;
  --grey-200: #E4E1DA;
  --grey-400: #A9A59C;
  --grey-600: #6B6862;
  --green: #3F5E4A;
  --green-soft: #E7EDE8;
  --ember: #045C43;
  --ember-onlight: #013C2C;
  --ember-ondark: #4FAE8A;
  --danger: #C1592E;
  --danger-onlight: #A04623;
  --danger-ondark: #E08356;

  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;

  --border: var(--grey-200);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Every page has a sticky 58px header; jumping to an in-page anchor
   (e.g. index.html#news, about-who-we-are.html#leadership) would
   otherwise land with that header covering the first ~58px of the
   target. This offsets every anchor jump site-wide by that much. */
html { scroll-padding-top: 58px; }

body {
  font-family: var(--sans);
  color: var(--charcoal);
  background: var(--warm-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.tag, .main-nav button, .header-utils a {
  font-family: var(--mono);
  letter-spacing: 0.3px;
}

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

/* Header */
.site-header {
  background: var(--navy);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo img { height: 34px; width: auto; }
.logo-wordmark {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--white);
}
.logo-wordmark span { font-family: inherit; font-weight: inherit; color: inherit; opacity: 1; }

.main-nav ul {
  display: flex;
  list-style: none;
  gap: 28px;
}

.main-nav button {
  background: none;
  border: none;
  color: var(--white);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
}

.caret { font-size: 10px; }

.main-nav a.nav-link {
  color: var(--white);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  padding: 8px 0;
  display: inline-block;
  text-decoration: none;
}

.pill-item { display: flex; align-items: center; }
.pill-btn {
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  padding: 7px 18px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--white);
  transition: all 0.15s ease;
}
.pill-btn:hover {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

.has-dropdown { position: relative; }

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  color: var(--charcoal);
  min-width: 220px;
  padding: 12px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  border-radius: 2px;
}

.has-dropdown:hover .dropdown { display: block; }

.dropdown a {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  font-family: var(--sans);
  white-space: nowrap;
}
.dropdown a:hover { background: var(--grey-50); color: var(--green); }

.header-utils {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

/* EN/ES language switch — two pills, the active language lit, each with
   its flag. */
.lang-switch {
  display: flex;
  gap: 3px;
  background: rgba(250,248,244,0.08);
  border: 1px solid rgba(250,248,244,0.16);
  border-radius: 999px;
  padding: 3px;
}
.lang-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(250,248,244,0.55);
  transition: background 0.2s ease, color 0.2s ease;
}
.lang-pill span { display: flex; align-items: center; line-height: 1; }
.lang-pill svg { width: 16px; height: 11px; border-radius: 2px; display: block; }
.lang-pill:hover { color: var(--warm-white); }
.lang-pill.is-active { background: var(--warm-white); color: var(--navy); }
.lang-pill.is-active:hover { color: var(--navy); }

/* Hamburger toggle — hidden on desktop, shown once .main-nav collapses
   below 900px (see the matching media query further down). */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--white);
  transition: transform 0.25s ease, opacity 0.2s ease, width 0.25s ease;
}
.nav-toggle span:nth-child(2) { width: 70%; }
.nav-toggle.is-open span { width: 100%; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero — cinematic: navy statement bar, then one full-width video */
.hero-cinematic {
  background: var(--navy);
}

.hero-top {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 56px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  color: var(--white);
}
.hero-top h1 {
  font-style: italic;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 400;
  max-width: 600px;
}
.hero-top p {
  font-size: 15px;
  line-height: 1.65;
  max-width: 280px;
  flex-shrink: 0;
  opacity: 0.75;
  text-align: left;
  padding-top: 14px;
}

.hero-video-wrap { width: 100%; line-height: 0; }
.hero-video-wrap video {
  width: 100%;
  max-height: 640px;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .hero-top { flex-direction: column; align-items: flex-start; }
  .hero-top p { text-align: left; }
}

.stats-bar {
  background: var(--navy-2);
  color: var(--white);
  padding: 0;
}
.stats {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 30px;
}
.stat { text-align: center; }
.stat strong { display: block; font-family: var(--serif); font-size: 32px; color: var(--ember-ondark); font-weight: 600; }
.stat span { font-size: 13px; opacity: 0.8; font-family: var(--mono); }

/* Generic sections */
main section:not(.hero-cinematic):not(.stats-bar):not(.thesis-carousel):not(.advantage):not(.where-globe):not(.what-tech):not(.criteria-experience):not(.solution-contact):not(.solution-hero) {
  max-width: 1200px;
  margin: 0 auto;
  padding: 70px 24px;
}

.hero-cinematic { width: 100%; }
.stats-bar { width: 100%; }

section h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  margin-bottom: 30px;
  color: var(--navy);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  display: block;
  margin-bottom: 20px;
}

/* Short manifesto-style statement between two full-bleed photos — left-
   pinned with a fixed-width paragraph left a wide empty band to its
   right on anything but a narrow viewport. Centering it reads as a
   deliberate statement instead of a stray, oddly-placed text block. */
.intro-block { text-align: center; }
.intro-block p { max-width: 700px; margin: 0 auto; font-size: 17px; color: var(--grey-600); }

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}


/* Thesis carousel — Brookfield-style full-bleed slider */
.thesis-carousel {
  position: relative;
  width: 100%;
  height: 640px;
  overflow: hidden;
  background: var(--navy);
}

.carousel-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.carousel-slides {
  display: flex;
  height: 100%;
  width: max-content;
  transition: transform 0.7s cubic-bezier(.22,.61,.36,1);
}
.carousel-slide {
  flex: none; /* width set in px by JS, matching the viewport exactly */
  height: 100%;
  background-size: cover;
  background-position: center;
}

.carousel-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 0% 0%, rgba(11,31,46,0.5) 0%, rgba(11,31,46,0) 60%),
    radial-gradient(ellipse 55% 60% at 100% 100%, rgba(11,31,46,0.55) 0%, rgba(11,31,46,0) 60%);
  pointer-events: none;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(11,31,46,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.carousel-arrow svg { width: 18px; height: 18px; }
.carousel-arrow:hover { background: rgba(11,31,46,0.6); border-color: rgba(255,255,255,0.55); }
.carousel-arrow:active { transform: translateY(-50%) scale(0.94); }
.carousel-arrow--prev { left: 24px; }
.carousel-arrow--next { right: 24px; }

@media (max-width: 900px) {
  .carousel-arrow { display: none; }
}

.carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
  width: min(420px, 60%);
}
.carousel-dot {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.carousel-dot-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--white);
}
.carousel-dot.is-complete .carousel-dot-fill {
  width: 100%;
}
.carousel-dot.is-active .carousel-dot-fill {
  width: 100%;
  transition: width 6s linear;
}

/* Left — permanent section narrative, fixed across all slides */
.carousel-title {
  position: absolute;
  left: 6.5%;
  top: 18%;
  z-index: 2;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.25);
}
.carousel-title-eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.8;
}
.carousel-title-main {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  line-height: 1.1;
}

/* Right — changing investment thesis */
.carousel-detail {
  position: absolute;
  right: 6.5%;
  bottom: 12%;
  z-index: 2;
  max-width: 380px;
  color: var(--white);
  text-align: left;
  transition: opacity 0.25s ease;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.25);
}
.carousel-detail.is-fading { opacity: 0; }
.carousel-detail-heading {
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 10px;
}
.carousel-detail-body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.88;
  margin-bottom: 18px;
}
.carousel-detail-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--white);
}
.carousel-detail-cta-label {
  padding-bottom: 2px;
  background-image: linear-gradient(var(--white), var(--white));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.25s ease;
}
.carousel-detail-cta:hover .carousel-detail-cta-label { background-size: 100% 1px; }

@media (max-width: 900px) {
  .thesis-carousel { height: auto; min-height: 620px; }
  .carousel-title { top: 88px; left: 24px; }
  .carousel-title-main { font-size: 2rem; }
  .carousel-detail { position: static; max-width: 100%; padding: 220px 24px 40px; }
  .carousel-dots { top: 24px; left: 24px; }
}

.careers-cta {
  background: var(--grey-50);
  text-align: center;
  max-width: 100%;
}
.careers-cta p { max-width: 700px; margin: 0 auto 24px; color: var(--grey-600); }
.careers-cta a {
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  padding: 14px 30px;
  border-radius: 2px;
  font-weight: 500;
  font-size: 14px;
}
.careers-cta a:hover { background: var(--navy-2); }

.news .news-item {
  border-left: 3px solid var(--green);
  padding: 10px 16px;
}
.news .tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--green);
  font-weight: 600;
  font-family: var(--sans);
}
.news h4 { margin-top: 8px; font-size: 15px; color: var(--navy); font-weight: 500; }

.highlights > a, .insights > a {
  display: inline-block;
  margin-top: 24px;
  font-weight: 600;
  color: var(--navy);
  border-bottom: 2px solid var(--ember);
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
}

.section-empty-note {
  font-size: 15px;
  line-height: 1.65;
  color: var(--grey-600);
  border-left: 3px solid var(--grey-200);
  padding: 12px 16px;
  max-width: 560px;
}

/* News — hero-style empty state (image + honest message), no fabricated headlines */
.news-hero { position: relative; min-height: 320px; overflow: hidden; margin-top: 28px; border-radius: 2px; }
.news-hero-media { position: absolute; inset: 0; }
.news-hero-media img {
  width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.03) blur(1.5px);
  animation: newsKenBurns 20s ease-in-out infinite alternate;
}
@keyframes newsKenBurns { from { transform: scale(1); } to { transform: scale(1.08); } }
.news-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,31,46,0.92) 0%, rgba(11,31,46,0.58) 55%, rgba(11,31,46,0.25) 100%);
}
.news-hero-content { position: relative; z-index: 2; padding: 40px 32px; color: var(--white); max-width: 520px; }
.news-hero-eyebrow {
  display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grey-200); border: 1px solid rgba(250,248,244,0.35); padding: 5px 12px; border-radius: 2px; margin-bottom: 18px;
}
.news-hero-headline { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.3; margin: 0 0 10px; }
.news-hero-sub { font-size: 14.5px; line-height: 1.6; opacity: 0.85; margin: 0; }

.news-ticker { background: var(--navy-2); overflow: hidden; border-radius: 0 0 2px 2px; }
.news-ticker-track { display: flex; width: max-content; animation: newsTickerScroll 20s linear infinite; }
.news-ticker:hover .news-ticker-track { animation-play-state: paused; }
.news-ticker-track span {
  flex: none; padding: 12px 40px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(250,248,244,0.72); white-space: nowrap;
}
@keyframes newsTickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .news-hero-media img { animation: none; }
  .news-ticker-track { animation: none; flex-wrap: wrap; width: auto; }
}

/* Featured insights — real, named upcoming research (LP-only once
   published), moving continuously like the news ticker above; the set is
   duplicated once for a seamless loop and pauses on hover so a visitor
   can actually click through. */
.insights-marquee {
  margin-top: 32px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.insights-track {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: insightsScroll 32s linear infinite;
}
.insights-marquee:hover .insights-track { animation-play-state: paused; }
@keyframes insightsScroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 16px)); }
}
.insight-card { flex: 0 0 300px; display: block; color: inherit; text-decoration: none; }
.insight-card-media { position: relative; overflow: hidden; border-radius: 2px; }
.insight-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  filter: grayscale(0.35) brightness(0.85);
  transition: transform 0.4s ease, filter 0.4s ease;
}
.insight-card:hover img { transform: scale(1.03); filter: grayscale(0.1) brightness(0.8); }
.insight-card:hover h4 { color: var(--ember-onlight, var(--ember)); }
.insight-card h4 { transition: color 0.2s ease; }
.insight-card-status {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-white);
  background: rgba(11,31,46,0.72);
  border: 1px solid rgba(250,248,244,0.3);
  padding: 5px 10px;
  border-radius: 2px;
}
.insight-card-body { padding-top: 14px; }
.insight-card .tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--green);
  font-weight: 600;
  font-family: var(--sans);
}
.insight-card h4 { margin-top: 8px; font-size: 15px; color: var(--navy); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .insights-track { animation: none; }
  .insights-track [aria-hidden="true"] { display: none; }
}

/* The marquee moves a fixed pixel distance per second, so on a narrow
   phone viewport that same speed crosses the screen 3x+ faster than on
   desktop — cards blur past before anyone can register the image. Smaller
   cards plus a much longer duration keep the same visual rhythm at any
   width. */
@media (max-width: 640px) {
  .insight-card { flex-basis: 220px; }
  .insights-track { animation-duration: 70s; }
}

.site-footer { background: var(--navy); color: var(--white); padding: 64px 24px 0; }
.footer-inner {
  max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand { max-width: 280px; }
.footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; text-decoration: none; }
.footer-logo img { width: 26px; height: 26px; }
.footer-logo span { font-family: var(--serif); font-size: 15px; letter-spacing: 0.02em; color: var(--white); }
.footer-logo span span { color: inherit; opacity: 1; font-weight: inherit; }
.footer-tagline { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; }
.footer-address { margin-top: 12px; font-family: var(--sans); font-size: 12.5px; line-height: 1.6; opacity: 0.55; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 150px; }
.footer-col-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.5; margin-bottom: 4px; }
.footer-col a { color: var(--white); opacity: 0.85; font-size: 13.5px; text-decoration: none; }
.footer-col a:hover { opacity: 1; text-decoration: underline; }
.footer-bottom {
  max-width: 1200px; margin: 0 auto; padding: 24px 0 28px; display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-end; gap: 12px;
}
.footer-bottom p { font-size: 11px; opacity: 0.5; margin: 0; }
.footer-bottom .footer-legal { max-width: 640px; line-height: 1.5; }

/* Leadership — photos are small source files (~120-140px), so they're
   shown near-native size as an avatar next to the name rather than
   stretched to fill the card, which was pixelating them. */
.leadership-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px; max-width: 980px; margin-top: 36px; }

/* On About Us, the sections above Leadership (Our approach / How we
   started) use the page's standard 680px prose width by default, which
   ends well short of where the Leadership grid's right-hand card does
   (980px). Widening just these two sections' paragraphs to match keeps
   every block on the page ending at the same right edge. */
.solution-section.leadership-align p,
.solution-hero.leadership-align p { max-width: 980px; }

/* Same idea on Sustainability — the prose sections default to the
   680px reading width, well short of the SDG icon grid (the page's
   widest block, ~1152px). Widen just those paragraphs to match. */
.solution-section.sustain-align p,
.solution-hero.sustain-align p { max-width: 1152px; }
.leadership-card-head { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.leadership-card img { width: 128px; height: 128px; flex: none; border-radius: 50%; object-fit: cover; filter: grayscale(0.2); }
.leadership-card h3 { font-size: 1.15rem; color: var(--navy); font-weight: 500; margin-bottom: 2px; }
.leadership-role { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); display: block; }
.leadership-focus { font-family: var(--sans); font-size: 12.5px; color: var(--grey-600); display: block; margin-top: 3px; }
.leadership-bio p { font-size: 14px; line-height: 1.7; color: var(--grey-600); margin-bottom: 14px; }
.leadership-bio p:last-child { margin-bottom: 0; }
.leadership-linkedin {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 16px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy);
}
.leadership-linkedin:hover { color: var(--green); }

@media (max-width: 900px) {
  .header-inner { position: relative; }
  .nav-toggle { display: flex; }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    background: var(--navy-2);
    border-top: 1px solid rgba(250,248,244,0.08);
    box-shadow: 0 12px 24px rgba(0,0,0,0.25);
    transition: max-height 0.35s ease;
  }
  .main-nav.is-open { max-height: calc(100vh - 60px); overflow-y: auto; }

  .main-nav ul { flex-direction: column; gap: 0; padding: 8px 24px 24px; }
  .main-nav li { border-bottom: 1px solid rgba(250,248,244,0.1); }
  .main-nav li:last-child { border-bottom: none; }

  .main-nav button, .main-nav a.nav-link {
    width: 100%;
    padding: 16px 0;
    font-size: 14px;
    justify-content: space-between;
  }
  .main-nav a.nav-link { display: flex; align-items: center; }

  .has-dropdown:hover .dropdown { display: none; }
  .dropdown {
    position: static;
    display: none;
    background: none;
    box-shadow: none;
    min-width: 0;
    padding: 0 0 12px 12px;
  }
  .has-dropdown.is-open .dropdown { display: block; }
  .has-dropdown.is-open > button .caret { transform: rotate(180deg); }
  .caret { transition: transform 0.2s ease; }
  .dropdown a { color: rgba(250,248,244,0.7); padding: 10px 0; }
  .dropdown a:hover { background: none; color: var(--white); }

  .pill-item { padding: 18px 0 6px; }
  .pill-btn { display: block; text-align: center; }

  .grid-4, .grid-3 { grid-template-columns: 1fr; }
  .leadership-grid { grid-template-columns: 1fr; max-width: 100%; gap: 40px; }
}

/* LP Login page */
.login-page { background: var(--navy); }

.login-hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
}

.login-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(11,31,46,0.88) 0%, rgba(11,31,46,0.55) 55%, rgba(11,31,46,0.82) 100%);
}

.login-logo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 32px 40px;
}
.login-logo img { height: 34px; width: auto; }

.login-lang-switch {
  position: absolute;
  top: 32px;
  right: 40px;
  z-index: 2;
}

.login-card {
  position: relative;
  z-index: 2;
  margin: 40px auto auto 8%;
  width: min(420px, 88%);
  background: rgba(18, 40, 59, 0.72);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
}

.login-card-header {
  background: rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  color: var(--white);
  font-family: var(--serif);
  font-size: 22px;
  padding: 18px 28px;
}

.login-form, .support-form {
  padding: 28px 28px 22px;
  display: flex;
  flex-direction: column;
}
.login-form.is-hidden { display: none; }
.support-form { display: none; }
.support-form.is-visible { display: flex; }

.login-form label, .support-form label {
  color: var(--white);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.login-form input, .support-form input, .support-form textarea {
  background: var(--white);
  border: none;
  border-radius: 2px;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--charcoal);
  margin-bottom: 20px;
  resize: vertical;
}
.login-form input:focus, .support-form input:focus, .support-form textarea:focus {
  outline: 2px solid var(--ember-ondark);
  outline-offset: 1px;
}

.support-form-intro {
  color: rgba(255,255,255,0.85);
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 22px;
}

.login-error, .support-form-confirm {
  display: none;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 14px;
  margin-bottom: 18px;
  border-radius: 2px;
}
.login-error {
  color: var(--danger-ondark);
  background: rgba(193, 89, 46, 0.12);
  border: 1px solid rgba(224, 131, 86, 0.4);
}
.login-error.is-visible { display: block; }
.support-form-confirm {
  color: #9FC0AA;
  background: rgba(63, 94, 74, 0.2);
  border: 1px solid rgba(159, 192, 170, 0.35);
}
.support-form-confirm.is-visible { display: block; }
.support-form-confirm.is-error { color: var(--danger-ondark); background: rgba(193, 89, 46, 0.18); border-color: rgba(224, 131, 86, 0.4); }

.login-submit {
  align-self: flex-start;
  background: var(--ember-onlight);
  color: var(--white);
  border: none;
  padding: 12px 32px;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.login-submit:hover { background: var(--ember); }

.login-links {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-family: var(--sans);
  font-size: 12.5px;
  color: rgba(255,255,255,0.75);
  line-height: 2;
}
.login-links a { color: rgba(255,255,255,0.9); }
.login-links a:hover { color: var(--white); text-decoration: underline; }
.login-links span { opacity: 0.4; margin: 0 6px; }

.login-footer {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 40px;
  background: rgba(6, 15, 22, 0.6);
  border-top: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  font-size: 12.5px;
}
.login-footer-links { display: flex; gap: 24px; }
.login-footer-links a { color: rgba(255,255,255,0.85); }
.login-footer-links a:hover { color: var(--white); }

@media (max-width: 640px) {
  .login-card { margin-left: auto; margin-right: auto; }
  .login-footer { flex-direction: column; align-items: flex-start; }
  .login-lang-switch { top: 16px; right: 16px; }
  .login-logo { padding: 20px 16px; }
}

/* ============================================================
   Investment solution pages (/invest/*) + contact page
   ============================================================ */

.solution-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.solution-cta-label {
  padding-bottom: 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.25s ease;
}
.solution-cta:hover .solution-cta-label { background-size: 100% 1px; }
.solution-cta-arrow { transition: transform 0.25s ease; }
.solution-cta:hover .solution-cta-arrow { transform: translateX(4px); }

.solution-cta.on-dark { color: var(--white); }
.solution-cta.on-dark .solution-cta-label { background-image: linear-gradient(var(--white), var(--white)); }
.solution-cta.on-light { color: var(--green); }
.solution-cta.on-light .solution-cta-label { background-image: linear-gradient(var(--green), var(--green)); }

/* Hero */
.solution-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) brightness(0.97) contrast(1.05);
}
.solution-hero-frame {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
}
.solution-hero-tint {
  position: absolute;
  inset: 0;
  background: var(--navy);
  mix-blend-mode: color;
  opacity: 0.55;
}
/* Photo-free hero, used where there's no real photo worth forcing in
   (e.g. About Us, absent an actual team/office photo) — solid navy
   reads as a deliberate choice, not a placeholder. */
.solution-hero--plain { background: var(--navy); filter: none; }

/* Video hero — same tint/scrim/content layers as the photo version, a
   <video> takes the place of the background-image underneath them. */
.solution-hero--video { background: var(--navy); }
.solution-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.solution-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11,31,46,0.92) 0%, rgba(11,31,46,0.35) 55%, rgba(11,31,46,0.15) 100%);
}
.solution-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 64px 24px 56px;
  color: var(--white);
}
.solution-hero-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.solution-hero-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 16px;
}
.solution-hero-meta .solution-hero-label { margin-bottom: 0; }
.solution-hero-location {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,0.35);
}
.solution-hero-content h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  font-weight: 500;
  max-width: 780px;
  margin-bottom: 20px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.solution-hero-content p {
  font-size: 17px;
  line-height: 1.6;
  max-width: 680px;
  opacity: 0.92;
  margin-bottom: 28px;
}

/* Generic content section */
.solution-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 76px 24px;
}
.solution-section h2 {
  font-size: clamp(1.7rem, 2.9vw, 2.4rem);
  color: var(--navy);
  margin-bottom: 24px;
}
.solution-section p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--grey-600);
  max-width: 680px;
}
.solution-section p + p { margin-top: 16px; }
.solution-section--wide { max-width: 1100px; }

/* Editorial list (characteristics) — no cards */
.solution-list { border-top: 1px solid var(--grey-200); max-width: 900px; margin: 40px auto 0; }
.solution-list-item {
  padding: 28px 0;
  border-bottom: 1px solid var(--grey-200);
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
}
.solution-list-item h3 { font-size: 1.15rem; color: var(--navy); font-weight: 500; }
/* No max-width here — the grid's own 1fr column already sizes this
   correctly at every breakpoint (a proportionate column next to the
   label on desktop, the item's full width once stacked below 900px). A
   fixed cap left it needlessly narrower than the page's other
   paragraphs, most noticeably once stacked. */
.solution-list-item p { font-size: 15px; line-height: 1.65; color: var(--grey-600); }

/* SDG alignment — official UN goal icons (public domain communications
   assets from sdgs.un.org), all seven goals shown at equal weight.
   Tiles rise in one by one once the grid actually scrolls into view
   (see js/sdg-reveal.js) rather than sitting there static. */
.sdg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 36px; }
.sdg-tile {
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.sdg-grid.is-visible .sdg-tile { opacity: 1; transform: translateY(0); }
.sdg-grid.is-visible .sdg-tile:nth-child(1) { transition-delay: 0s; }
.sdg-grid.is-visible .sdg-tile:nth-child(2) { transition-delay: 0.08s; }
.sdg-grid.is-visible .sdg-tile:nth-child(3) { transition-delay: 0.16s; }
.sdg-grid.is-visible .sdg-tile:nth-child(4) { transition-delay: 0.24s; }
.sdg-grid.is-visible .sdg-tile:nth-child(5) { transition-delay: 0.32s; }
.sdg-grid.is-visible .sdg-tile:nth-child(6) { transition-delay: 0.4s; }
.sdg-grid.is-visible .sdg-tile:nth-child(7) { transition-delay: 0.48s; }
.sdg-icon {
  width: 100%; aspect-ratio: 1; border-radius: 2px; display: block;
  transition: transform 0.3s ease;
}
.sdg-tile:hover .sdg-icon { transform: translateY(-4px); }
.sdg-tile p { font-size: 13px; line-height: 1.6; color: var(--grey-600); max-width: none; }

@media (max-width: 900px) {
  .sdg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sdg-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* Process — subtle horizontal progression */
.solution-process {
  max-width: 1100px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  border-top: 1px solid var(--grey-200);
  padding-top: 32px;
}
.solution-process-number {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ember-onlight);
  margin-bottom: 14px;
}
.solution-process-step h3 { font-size: 1.05rem; color: var(--navy); font-weight: 500; margin-bottom: 8px; }
.solution-process-step p { font-size: 13.5px; line-height: 1.6; color: var(--grey-600); }

/* Final contact section */
.solution-contact {
  background: var(--navy);
  color: var(--white);
  text-align: left;
}
.solution-contact-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 52px 24px;
}
.solution-contact h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 500;
  margin-bottom: 18px;
}
.solution-contact p {
  font-size: 16px;
  line-height: 1.65;
  max-width: 620px;
  opacity: 0.85;
  margin-bottom: 12px;
}
.solution-contact .solution-cta { margin-top: 18px; font-size: 13px; }

/* Cross-navigation between the three pages */
.solution-related {
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 24px 0;
  border-top: 1px solid var(--grey-200);
}
.solution-related-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 18px;
}
.solution-related-links { display: flex; flex-wrap: wrap; gap: 32px; }
.solution-related-links a {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--navy);
}
.solution-related-links a:hover { color: var(--green); }

/* Disclaimer */
.solution-disclaimer {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 24px 44px;
}
.solution-disclaimer p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--grey-400);
}

/* Careers — CTA row under "Current opportunities" */
.careers-links { display: flex; flex-wrap: wrap; gap: 16px 36px; margin-top: 28px; }

/* Careers hero — abstract brand artwork instead of a photo */
.careers-hero { background: var(--navy); filter: none; }
.careers-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (max-width: 900px) {
  .solution-hero, .solution-hero-frame { min-height: 460px; }
  .solution-list-item { grid-template-columns: 1fr; gap: 8px; }
  .solution-process { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .solution-process { grid-template-columns: 1fr; }
}

/* Contact page */
.contact-hero {
  background: var(--navy);
  color: var(--white);
  padding: 72px 24px 56px;
  text-align: left;
}
.contact-hero-inner { max-width: 900px; margin: 0 auto; }
.contact-hero h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 500; margin-bottom: 14px; }
.contact-hero p { font-size: 16px; opacity: 0.85; max-width: 560px; }
.contact-office {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.16);
  max-width: 560px;
  font-size: 14px;
  opacity: 0.85;
}
.contact-office-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  opacity: 1;
}

.contact-section { max-width: 700px; margin: 0 auto; padding: 64px 24px 90px; }
.contact-form { display: flex; flex-direction: column; }
.contact-form .contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.contact-form label {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--navy);
  margin-bottom: 8px;
  display: block;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: 2px;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--charcoal);
  margin-bottom: 20px;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--ember-ondark);
  outline-offset: 1px;
  border-color: transparent;
}
.contact-submit {
  align-self: flex-start;
  background: var(--navy);
  color: var(--white);
  border: none;
  padding: 13px 34px;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.contact-submit:hover { background: var(--navy-2); }
.contact-confirm {
  display: none;
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 13.5px;
  border-radius: 2px;
}
.contact-confirm.is-visible { display: block; }
.contact-confirm.is-error { background: #F5E4DC; color: var(--danger-onlight); }

@media (max-width: 640px) {
  .contact-form .contact-row { grid-template-columns: 1fr; }
}

/* ============================================================
   The Earth Power Advantage (ecosystem story) — photography/video-led,
   inspired by brookfield.com/about-us/ecosystem
   ============================================================ */

.eco-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 0.9s ease; }
.eco-reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   The Earth Power Advantage — click-to-center interactive diagram.
   Four capabilities arranged on a ring around the Earth Power mark;
   clicking a node (or its arc) centers that capability's statement,
   supporting image and description. See js/advantage-interactive.js.
   ============================================================ */

.advantage { position: relative; width: 100%; background: var(--warm-white); }

.advantage-hero { max-width: 900px; margin: 0 auto; padding: 110px 24px 20px; text-align: center; }
.advantage-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 26px;
}
.advantage-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.advantage-hero-sub {
  max-width: 640px;
  margin: 26px auto 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--grey-600);
}

.advantage-diagram { padding: 40px 4vw 40px; display: flex; align-items: center; justify-content: center; }
.advantage-canvas { position: relative; width: min(1260px, 94vw); height: min(880px, 80vw); min-height: 640px; }

/* Circular ring + nodes */
.advantage-circular { position: absolute; left: 50%; top: 50%; width: min(44vw, 540px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.advantage-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* HUD instrument dial — a soft, restrained nod to a futuristic scanner:
   a static bezel of tick marks plus a very slow, low-opacity radar sweep,
   both masked to a thin band around the base ring. */
.advantage-hud { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 0; }
.advantage-ticks {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(rgba(11,31,46,0.16) 0deg 0.55deg, transparent 0.55deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 36%, #000 37%, #000 43%, transparent 44%);
  mask: radial-gradient(circle, transparent 36%, #000 37%, #000 43%, transparent 44%);
}
.advantage-sweep {
  position: absolute; inset: 0; border-radius: 50%;
  /* wedge built symmetric around the "from" angle (0deg = top), so it sits
     centered on whichever node it points to instead of leaning right */
  background: conic-gradient(from -20deg, transparent 0deg, rgba(63,94,74,0.3) 20deg, transparent 40deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 34%, #000 35%, #000 45%, transparent 46%);
  mask: radial-gradient(circle, transparent 34%, #000 35%, #000 45%, transparent 46%);
}
.advantage-base-ring { fill: none; stroke: rgba(11,31,46,0.11); stroke-width: 1; }
.advantage-inner-ring { fill: none; stroke: rgba(11,31,46,0.07); stroke-width: 1; }
.advantage-segment { fill: none; stroke: rgba(11,31,46,0.14); stroke-width: 2.2; stroke-linecap: round; transition: 0.35s ease; cursor: pointer; }
.advantage-segment.active { stroke: var(--navy); stroke-width: 4.2; filter: drop-shadow(0 0 4px rgba(11,31,46,0.16)); }
.advantage-segment.dim { opacity: 0.22; }
.advantage-spoke { stroke: rgba(11,31,46,0.12); stroke-width: 1; transition: 0.35s ease; }
.advantage-spoke.active { stroke: rgba(11,31,46,0.45); stroke-width: 1.5; }
.advantage-spoke.dim { opacity: 0.16; }

.advantage-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 176px; height: 176px; border-radius: 50%; display: grid; place-items: center; text-align: center; z-index: 20; }
.advantage-center-disc {
  width: 138px; height: 138px; border-radius: 50%; display: grid; place-items: center; position: relative;
  border: 1px solid rgba(11,31,46,0.16);
  background: radial-gradient(circle, rgba(250,248,244,0.9), rgba(250,248,244,0.25) 68%, transparent 69%);
  transition: 0.45s ease;
}
.advantage-center-disc::before, .advantage-center-disc::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(11,31,46,0.1); }
.advantage-center-disc::before { inset: 10px; }
.advantage-center-disc::after { inset: 22px; }
.advantage-center-logo { display: flex; flex-direction: column; align-items: center; }
.advantage-center-mark { width: 52px; height: 52px; }

.advantage-node { position: absolute; z-index: 30; width: 160px; text-align: center; transform: translate(-50%, -50%); }
.advantage-node button { all: unset; cursor: pointer; display: inline-block; padding: 10px 12px; border-radius: 999px; transition: 0.35s ease; }
.advantage-node-label { font-family: var(--serif); font-size: 28px; letter-spacing: -0.02em; line-height: 1; color: var(--navy); transition: 0.35s ease; }
.advantage-node.dim { opacity: 0.28; }
.advantage-node.selected button { opacity: 0; transform: scale(0.82); pointer-events: none; }
.node-insight { left: 50%; top: 4%; }
.node-access { left: 96%; top: 50%; }
.node-capital { left: 50%; top: 96%; }
.node-execution { left: 4%; top: 50%; }

/* Description panels */
.advantage-desc { position: absolute; opacity: 0; pointer-events: none; transition: opacity 0.9s ease, transform 1s cubic-bezier(.2,.75,.2,1); width: 320px; }
.advantage-desc.active { opacity: 1; pointer-events: auto; }
.advantage-desc-eyebrow { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
.advantage-desc p { margin: 0; font-family: var(--sans); color: var(--grey-600); font-size: 13px; line-height: 1.6; }
.advantage-desc ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 7px 9px; }
.advantage-desc li { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-600); border-top: 1px solid var(--grey-200); padding-top: 6px; min-width: 100px; }
.advantage-desc-statement { margin-bottom: 14px; font-family: var(--serif); font-size: clamp(22px, 2vw, 32px); line-height: 1.05; letter-spacing: -0.02em; color: var(--navy); }
.advantage-desc-highlight {
  font-weight: 700;
  background: linear-gradient(90deg, var(--navy) 0%, var(--green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--navy);
}

.desc-insight { left: 50%; top: 0; transform: translate(-50%, -16px); }
.desc-insight.active { transform: translate(-50%, 0); }
.desc-access { right: 0; top: 50%; transform: translate(16px, -50%); }
.desc-access.active { transform: translate(0, -50%); }
.desc-capital { left: 50%; bottom: 0; transform: translate(-50%, 16px); }
.desc-capital.active { transform: translate(-50%, 0); }
.desc-execution { left: 0; top: 50%; transform: translate(-16px, -50%); text-align: right; }
.desc-execution.active { transform: translate(0, -50%); }
.desc-execution ul { justify-content: flex-end; }


/* Closing statement — quiet return to the cream background */
.advantage-closing { background: var(--warm-white); color: var(--navy); text-align: center; padding: 70px 24px; }
.advantage-closing-line {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.35;
  color: var(--navy);
}
.advantage-closing-tag {
  display: block;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green);
}

@media (max-width: 900px) {
  .advantage-hero { padding: 90px 20px 10px; }
  .advantage-diagram { padding: 30px 12px 40px; }
  .advantage-canvas { height: auto; min-height: 620px; width: 100%; }
  .advantage-circular { top: 32%; width: 92vw; }
  .advantage-center { width: 122px; height: 122px; }
  .advantage-center-disc { width: 92px; height: 92px; }
  .advantage-center-mark { width: 38px; height: 38px; }
  .advantage-selected-word { font-size: 26px; }
  .advantage-node { width: 110px; }
  .advantage-node-label { font-size: 20px; }
  .node-access { left: 92%; }
  .node-execution { left: 8%; }
  .advantage-desc, .desc-insight, .desc-access, .desc-capital, .desc-execution {
    left: 50%; right: auto; top: auto; bottom: 0; width: min(92vw, 460px); text-align: center;
    transform: translate(-50%, 18px);
  }
  .advantage-desc.active { transform: translate(-50%, 0); }
  .advantage-desc ul, .desc-execution ul { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .eco-reveal { opacity: 1; transform: none; transition: none; }
  .advantage-segment, .advantage-spoke, .advantage-node button, .advantage-desc, .advantage-center-disc { transition: none; }
  .advantage-center-mark, .advantage-sweep { transition: none; }
  .criteria-media { transition: opacity 0.3s ease; transform: none; }
  .criteria-item-progress-fill.is-filling { transition: none; }
  .criteria-data-row dd { transition: none; }
}

/* ============================================================
   Where we invest — 3D globe (invest-with-us.html)
   globe.gl/Three.js scene that opens on the whole Earth, tilts in to
   frame Europe, then drops the sphere so Europe is left standing as a
   tilted extruded "paper" map. Tags below let a visitor raise each
   Core/Secondary/Opportunistic tier individually.
   ============================================================ */
.where-globe {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--navy);
  overflow: hidden;
}
.where-globe .globe-viz { position: absolute; inset: 0; }
.where-globe .globe-viz svg { width: 100%; height: 100%; display: block; }
.where-globe .globe-viz path {
  transition: fill 0.9s ease;
  cursor: default;
}
/* Resting "paper" tone once the map lands, before any tier is raised —
   same idea as the old extruded map, adapted to jsvectormap's flat fill. */
.where-globe .globe-viz path.where-map-resting { fill: rgba(250,248,244,0.4) !important; }
.where-globe .globe-viz path.where-map-core { fill: #2E8F6B !important; }
.where-globe .globe-viz path.where-map-secondary { fill: #7FA6C2 !important; }
.where-globe .globe-viz path.where-map-tertiary { fill: #A9A59C !important; }

/* Capital markers — quiet dots at rest; a tier's markers pulse like a
   radar once that tier is clicked active. */
.where-globe .globe-viz circle.jvm-marker { pointer-events: none; }
.where-globe .globe-viz circle.where-marker-core.is-active { animation: whereRadarPulse 1.8s ease-out infinite; stroke: #2E8F6B; }
.where-globe .globe-viz circle.where-marker-secondary.is-active { animation: whereRadarPulse 1.8s ease-out infinite; stroke: #7FA6C2; }
.where-globe .globe-viz circle.where-marker-tertiary.is-active { animation: whereRadarPulse 1.8s ease-out infinite; stroke: #A9A59C; }

@keyframes whereRadarPulse {
  0%   { r: 3;  fill-opacity: 0.9; stroke-width: 1;   stroke-opacity: 0.9; }
  65%  { r: 10; fill-opacity: 0.1; stroke-width: 0.4; stroke-opacity: 0.15; }
  100% { r: 3;  fill-opacity: 0.9; stroke-width: 1;   stroke-opacity: 0.9; }
}

.where-globe .where-label {
  position: absolute; top: 40px; left: 40px; z-index: 2;
  color: var(--warm-white); pointer-events: none;
}
.where-globe .where-label .eyebrow { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember-ondark, var(--ember)); margin-bottom: 12px; }
.where-globe .where-label h2 { font-family: var(--serif); font-size: clamp(1.7rem, 2.9vw, 2.3rem); margin: 0 0 8px; color: var(--warm-white); }
.where-globe .where-label p { font-family: var(--sans); font-size: 14px; margin: 0; opacity: 0.65; max-width: 460px; }

.where-globe .where-controls {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; align-items: center; gap: 18px;
}

.where-globe .tiers {
  display: flex; gap: 10px;
}
.where-globe .tier-tag {
  font-family: var(--sans);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(250,248,244,0.18);
  background: transparent;
  color: var(--warm-white); opacity: 0; transform: translateY(6px);
  display: inline-flex; align-items: center; gap: 8px;
  transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.6s ease, background 0.6s ease;
}
.where-globe .tier-tag.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; cursor: pointer; }
.where-globe .tier-tag.is-on:hover { background: rgba(250,248,244,0.12); }
/* Always-on colour swatch — shows which tier maps to which map colour
   from the moment the tags appear, not only once a tier is clicked. */
.where-globe .tier-tag-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.where-globe .tier-tag[data-tier="core"] .tier-tag-dot { background: #2E8F6B; }
.where-globe .tier-tag[data-tier="secondary"] .tier-tag-dot { background: #7FA6C2; }
.where-globe .tier-tag[data-tier="tertiary"] .tier-tag-dot { background: #A9A59C; }
/* "Active" (radar switched on for that tier) carries the tier colour —
   the base .is-on state stays neutral until clicked. */
.where-globe .tier-tag[data-tier="tertiary"].is-raised { border-color: rgba(169,165,156,0.9); background: rgba(169,165,156,0.18); color: #C7C2B7; }
.where-globe .tier-tag[data-tier="secondary"].is-raised { border-color: rgba(127,166,194,0.9); background: rgba(127,166,194,0.18); color: #9AC0DA; }
.where-globe .tier-tag[data-tier="core"].is-raised { border-color: rgba(46,143,107,0.9); background: rgba(46,143,107,0.18); color: #4FAE8A; }
/* PENDING: user asked for a permanent solid fill per tier (matching the
   map colour) instead of only tinting on .is-raised — tried it, didn't
   read well against the rest of the control bar, reverted. Revisit with
   a different treatment (e.g. a small colour swatch/dot next to the
   label instead of filling the whole pill) rather than this exact idea. */

/* Where 1 (globe.gl) only — the flat map (Where 2) has no camera to reset. */
.where-globe .where-reset {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--sans);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(250,248,244,0.18);
  background: transparent;
  color: var(--warm-white);
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 0.6s ease, background 0.2s ease;
}
.where-globe .where-reset.is-on { opacity: 0.75; pointer-events: auto; }
.where-globe .where-reset.is-on:hover { opacity: 1; background: rgba(250,248,244,0.1); }
.where-globe .where-reset-icon { font-size: 14px; line-height: 1; }

@media (max-width: 720px) {
  .where-globe .where-label { top: 28px; left: 24px; }
  .where-globe .where-label p { display: none; }
  .where-globe .where-controls { bottom: 20px; width: 100%; padding: 0 16px; }
  .where-globe .tiers { flex-wrap: wrap; justify-content: center; }
  .where-globe .where-reset { padding: 8px 12px; }
  .where-globe .where-reset-label { display: none; }
}

/* ============================================================
   What we invest in — three-column conviction selector (invest-with-us.html)
   Continues straight on from the Where globe (same navy ground). Left:
   large plain-type category list (no cards). Centre: cinematic media.
   Right: the investment thesis for whichever category is selected —
   why Earth Power invests, not a technology description.
   ============================================================ */
.what-tech {
  width: 100%;
  max-width: none;
  min-height: 100%;
  background: var(--navy);
  color: var(--warm-white);
  padding: 80px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.what-tech .what-head {
  max-width: 1360px;
  margin: 0 auto 52px;
}
.what-tech .eyebrow { color: var(--ember-ondark, var(--ember)); }
.what-tech .what-head h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  color: var(--warm-white);
  margin: 0;
  max-width: 780px;
  text-wrap: balance;
}

.what-grid {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 56px;
  align-items: stretch;
}

/* Left — plain typographic list, no boxes */
/* Spread the 5 sectors across the full height of the video beside it —
   Solar sits level with the top of the frame, Hydro level with its foot,
   rather than the list clustering at the top. */
.what-categories {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  border-left: 1px solid rgba(250,248,244,0.14);
}
.what-cat {
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 500;
  color: rgba(250,248,244,0.4);
  padding: 12px 0 12px 22px;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.what-cat:hover { color: rgba(250,248,244,0.75); }
.what-cat.is-active {
  color: var(--ember-ondark, var(--ember));
  border-left-color: var(--ember-ondark, var(--ember));
}
.what-cat:focus-visible { outline: 2px solid var(--ember-ondark, var(--ember)); outline-offset: 2px; }

/* Right — one large cinematic media area. This is now the dominant
   element of the section; the investment conviction lives inside it
   rather than in a separate text column. */
.what-media {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
  max-height: 74vh;
  overflow: hidden;
  background: var(--navy-2);
}
.what-media-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: grayscale(0.25) brightness(0.92) contrast(1.05);
  transition: opacity 0.9s ease;
}
.what-media-el.is-active { opacity: 1; }
.what-media-scrim {
  position: absolute;
  inset: 0;
  /* Soft gradient anchored bottom-right, where the copy sits — enough to
     keep the text legible without masking the footage as a visible panel. */
  background:
    radial-gradient(ellipse 70% 60% at 100% 100%, rgba(6,15,22,0.72) 0%, rgba(6,15,22,0) 62%),
    linear-gradient(180deg, rgba(11,31,46,0) 60%, rgba(11,31,46,0.32) 100%);
  pointer-events: none;
}

/* The investment conviction, set directly into the frame, lower-right. */
.what-media-copy {
  position: absolute;
  right: 5%;
  bottom: 7%;
  left: 5%;
  max-width: 460px;
  margin-left: auto;
  text-align: left;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.what-media-copy.is-hidden { opacity: 0; }

.what-thesis-headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  line-height: 1.26;
  color: rgba(250,248,244,0.97);
  margin: 0 0 12px;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}

/* One editorial paragraph — no bullets, no numbering, no cards. Kept
   small relative to the visual, per the brief. */
.what-thesis-para {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(250,248,244,0.72);
  margin: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,0.3);
}

@media (max-width: 1024px) {
  .what-grid { grid-template-columns: 160px 1fr; }
  .what-media-copy { max-width: 360px; }
}

@media (max-width: 640px) {
  .what-tech { padding: 56px 24px; }
  .what-grid { grid-template-columns: 1fr; gap: 24px; }
  .what-categories { flex-direction: row; flex-wrap: wrap; border-left: none; border-bottom: 1px solid rgba(250,248,244,0.14); padding-bottom: 8px; }
  .what-cat { border-left: none; border-bottom: 2px solid transparent; padding: 6px 14px 6px 0; font-size: 1.05rem; }
  .what-cat.is-active { border-bottom-color: var(--ember-ondark, var(--ember)); }
  .what-media { aspect-ratio: 4 / 3; max-height: none; }
  .what-media-copy { right: 6%; bottom: 6%; left: 6%; max-width: none; }
}

/* ============================================================
   Investment criteria experience — 4-slide deck (invest-with-us.html)
   Where / What / How / Route sit behind a tab bar as full slides. Only
   one is ever visible: switching tabs sends the outgoing slide off to
   the right and brings the next one in from the left, like a rotating
   drum rather than a scrollable list.
   ============================================================ */
.criteria-experience {
  width: 100%;
  max-width: none;
  padding: 0;
  background: var(--navy);
}
/* On top of the sticky site header (handled globally via
   scroll-padding-top), this section has its own sticky tab bar
   directly under it — #where needs to clear both when jumped to. */
#where, #access { scroll-margin-top: 64px; }

.criteria-tabs {
  position: sticky;
  top: 58px; /* sits right under the sticky site header */
  z-index: 20;
  display: flex;
  justify-content: center;
  gap: 8px;
  background: var(--navy-2);
  border-bottom: 1px solid rgba(250,248,244,0.1);
  padding: 0 24px;
}
.criteria-tab {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(250,248,244,0.55);
  background: none;
  border: none;
  cursor: pointer;
  padding: 22px 34px;
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.criteria-tab:hover { color: rgba(250,248,244,0.9); background: rgba(250,248,244,0.04); }
.criteria-tab.is-active { color: var(--warm-white); border-bottom-color: var(--ember-ondark, var(--ember)); }
.criteria-tab:focus-visible { outline: 2px solid var(--ember-ondark, var(--ember)); outline-offset: -2px; }

@media (max-width: 640px) {
  .criteria-tabs { top: 58px; gap: 2px; }
  .criteria-tab { font-size: 12px; padding: 16px 14px; }
}

.criteria-slides {
  position: relative;
  height: 92vh;
  min-height: 560px;
  overflow: hidden;
}
.criteria-slide {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.65s cubic-bezier(.22,.61,.36,1);
}
.criteria-slide.is-active { transform: translateX(0); }

.slide-placeholder {
  height: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--warm-white);
}
.slide-placeholder .eyebrow { color: var(--ember-ondark, var(--ember)); }
.slide-placeholder h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 2.9vw, 2.3rem); margin: 0 0 12px; }
.slide-placeholder p { font-size: 15px; color: rgba(250,248,244,0.6); margin: 0; }

@media (max-width: 720px) {
  .criteria-slides { height: 78vh; min-height: 460px; }
  .criteria-tab { padding: 14px 16px; font-size: 11px; }
}

/* ============================================================
   How — return/correlation positioning (invest-with-us.html)
   Not a "process" section: a single institutional-style chart showing
   where value-add energy infrastructure sits relative to traditional
   asset classes, plus one plain-text value-creation sequence. Comparison
   asset classes stay muted blue-grey; ember is reserved for Earth Power's
   own zone only.
   ============================================================ */
.how-section {
  min-height: 100%;
  color: var(--warm-white);
  padding: 72px 40px 56px;
}
.how-body {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 0 72px;
  align-items: start;
}
.how-chart-wrap { min-width: 0; }

/* Spans both columns so the chart and the value-build column below it
   start at the same height, instead of the value column racing ahead
   next to the (much taller) headline block. */
.how-head {
  grid-column: 1 / -1;
  max-width: 620px;
  margin: 0 0 40px;
}
.how-head .eyebrow { color: var(--ember-ondark, var(--ember)); margin-bottom: 10px; }
.how-position {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250,248,244,0.45);
  margin-bottom: 16px;
}
.how-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.9vw, 2.4rem);
  line-height: 1.22;
  margin: 0 0 18px;
  color: var(--warm-white);
}
.how-intro {
  max-width: 640px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(250,248,244,0.58);
  margin: 0;
}

.how-chart-wrap { margin: 0; }
.how-chart { width: 100%; height: auto; display: block; overflow: visible; }

.how-axis-line { stroke: rgba(250,248,244,0.32); stroke-width: 1; }
.how-axis-arrow { fill: rgba(250,248,244,0.32); }
.how-gridline { stroke: rgba(250,248,244,0.08); stroke-width: 1; stroke-dasharray: 2 5; }
.how-axis-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; fill: rgba(250,248,244,0.4); }
.how-tick { font-family: var(--sans); font-size: 12px; fill: rgba(250,248,244,0.5); }

.how-point circle { fill: #8CA0B3; }
.how-point text {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  fill: rgba(250,248,244,0.58);
}

/* Flat, subtle fill rather than a radial "glow" — reads as a marked
   range, not a heat map or a calculated confidence interval. */
.how-ep-ellipse {
  fill: rgba(46,143,107,0.12);
  stroke: var(--ember-ondark, var(--ember));
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
}
.how-ep-label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  fill: var(--ember-ondark, var(--ember));
}
.how-ep-sublabel {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  fill: rgba(250,248,244,0.8);
}

/* Restrained scroll build: axes first, comparison classes next, Earth
   Power's zone last — plain fades, no motion flourish. */
.how-axis-group, .how-comparison-group, .how-earthpower-group {
  opacity: 0;
  transition: opacity 0.9s ease;
}
.how-chart-wrap.is-visible .how-axis-group { opacity: 1; }
.how-chart-wrap.is-visible .how-comparison-group { opacity: 1; transition-delay: 0.3s; }
.how-chart-wrap.is-visible .how-earthpower-group { opacity: 1; transition-delay: 0.65s; }

/* Sits directly under the chart it describes — the only text allowed to
   read as "attached" to the ellipse's position. Sources/disclaimer only,
   left-aligned with the rest of the main column. */
.how-chart-source {
  max-width: 620px;
  margin: 20px 0 0;
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1.6;
  color: rgba(250,248,244,0.32);
}
.how-chart-source em { font-style: italic; }

/* Right column — supports the matrix, doesn't compete with it. Plain
   vertical sequence, no cards, no numbering; a thin line is the only
   connective device between the three stages. */
.how-value {
  padding-top: 4px; /* small optical nudge to sit level with the chart's axis line */
}
.how-value-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember-ondark, var(--ember));
  margin-bottom: 28px;
}
.how-value-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.how-value-steps li { padding-bottom: 30px; }
.how-value-steps li:last-child { padding-bottom: 0; }
.how-value-steps h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--warm-white);
  margin: 0 0 8px;
}
.how-value-steps p {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(250,248,244,0.55);
  margin: 0;
}
.how-value-line {
  margin: 30px 0 0;
  font-family: var(--sans);
  font-style: italic;
  font-size: 13px;
  color: rgba(250,248,244,0.4);
}

@media (max-width: 900px) {
  .how-body { grid-template-columns: 1fr; gap: 48px; }
  .how-value { padding-top: 0; border-top: 1px solid rgba(250,248,244,0.1); padding-top: 40px; }
}

@media (max-width: 640px) {
  .how-section { padding: 56px 22px 40px; }
  /* The chart's text/labels live inside its SVG viewBox, so shrinking it
     to the full width of a phone screen (width:100%) shrinks the text
     along with it, past legible. Give it a real minimum size instead,
     with horizontal scroll to reach the rest. */
  .how-chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .how-chart { width: 640px; max-width: none; }
}

/* ============================================================
   Access — expandable route bands (invest-with-us.html)
   Three large horizontal bands, one expanded at a time. Not a table, not
   cards: a single wide strip per route that grows on click, with a subtle
   image + left-to-right navy scrim behind the expanded copy.
   ============================================================ */
.access-section {
  min-height: 100%;
  color: var(--warm-white);
  padding: 72px 40px 56px;
}
.access-section .how-head { max-width: 640px; margin: 0 auto 44px; }

.access-bands {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.access-band {
  position: relative;
  overflow: hidden;
  flex: 0 0 108px;
  border: 1px solid rgba(250,248,244,0.12);
  background: var(--navy-2);
  cursor: pointer;
  transition: flex-basis 0.45s cubic-bezier(.22,.61,.36,1), border-color 0.3s ease;
}
.access-band.is-active {
  flex-basis: 448px;
  border-color: rgba(46,143,107,0.5);
  cursor: default;
}

.access-band-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: grayscale(0.2) brightness(0.85);
  transition: opacity 0.6s ease;
}
.access-band.is-active .access-band-media { opacity: 1; }
.access-band-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy) 34%, rgba(11,31,46,0.55) 62%, rgba(11,31,46,0.2) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.access-band.is-active .access-band-scrim { opacity: 1; }

.access-band-header {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 108px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 36px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.access-title-group { display: flex; flex-direction: column; gap: 6px; }
.access-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--warm-white);
}
.access-descriptor {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250,248,244,0.42);
}
.access-band.is-active .access-descriptor { color: var(--ember-ondark, var(--ember)); }

.access-chevron {
  margin-left: auto;
  font-size: 18px;
  color: rgba(250,248,244,0.4);
  transform: rotate(-90deg);
  transition: transform 0.4s ease;
  flex: none;
}
.access-band.is-active .access-chevron { transform: rotate(0deg); color: var(--warm-white); }

.access-band-body {
  position: relative;
  z-index: 2;
  max-width: 520px;
  padding: 0 36px 36px 36px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.access-band.is-active .access-band-body {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.access-body-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(250,248,244,0.12);
  margin-bottom: 24px;
}
.access-headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--warm-white);
  margin: 0 0 10px;
}
.access-para {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(250,248,244,0.6);
  margin: 0;
}

.access-closing {
  max-width: 1360px;
  margin: 44px auto 0;
  padding-top: 26px;
  border-top: 1px solid rgba(250,248,244,0.1);
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ember-ondark, var(--ember));
}

@media (max-width: 720px) {
  .access-section { padding: 56px 22px 40px; }
  .access-band { flex-basis: 92px; }
  .access-band.is-active { flex-basis: 400px; }
  .access-band-header { height: 92px; padding: 0 20px; gap: 16px; }
  .access-title { font-size: 1.2rem; }
  .access-band-body { padding: 0 20px 24px 20px; max-width: none; }
}

/* ============================================================
   Investment criteria — interactive sector matrix (invest-with-us.html)
   Left: five sectors to select. Right: video/photo for that sector,
   navy-duotone treated, with a broadcast-style data strip (asset type,
   stage, geography, structure) that updates with the selection.
   ============================================================ */
.criteria { max-width: 1200px; margin: 0 auto; padding: 76px 24px; }
.criteria-head { max-width: 640px; margin-bottom: 44px; }
.criteria-head .eyebrow { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; }
.criteria-head h2 { font-family: var(--serif); font-size: clamp(1.7rem, 2.9vw, 2.3rem); color: var(--navy); margin-bottom: 12px; }
.criteria-head p { font-size: 15.5px; line-height: 1.6; color: var(--grey-600); }

.criteria-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: stretch; }

.criteria-list { display: flex; flex-direction: column; border-top: 1px solid var(--grey-200); }
.criteria-item { border-bottom: 1px solid var(--grey-200); }
.criteria-item-toggle {
  display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 18px 0; transition: padding-left 0.25s ease;
}
.criteria-item-label { font-family: var(--serif); font-size: 1.2rem; color: var(--grey-400); transition: color 0.25s ease; }
.criteria-item.is-active .criteria-item-toggle { padding-left: 14px; }
.criteria-item.is-active .criteria-item-label { color: var(--navy); }
.criteria-item:not(.is-active) .criteria-item-toggle:hover .criteria-item-label { color: var(--green); }

.criteria-item-progress { display: block; height: 2px; background: var(--grey-200); margin-bottom: 14px; overflow: hidden; }
.criteria-item-progress-fill { display: block; height: 100%; width: 0%; background: var(--green); }
.criteria-item-progress-fill.is-filling { transition: width linear; }

.criteria-footnote { margin-top: 24px; font-size: 12.5px; line-height: 1.6; color: var(--grey-600); }
.criteria-footnote a { color: var(--green); font-weight: 600; }

.criteria-visual { position: relative; overflow: hidden; min-height: 460px; border-radius: 2px; }
.criteria-media {
  position: absolute; inset: 0; opacity: 0; transform: scale(1.09);
  transition: opacity 0.7s ease, transform 4.5s cubic-bezier(.16,.7,.3,1);
  background-size: cover; background-position: center;
}
.criteria-media.is-active { opacity: 1; transform: scale(1); }
.criteria-media video { width: 100%; height: 100%; object-fit: cover; }
.criteria-duotone { position: absolute; inset: 0; background: var(--navy); mix-blend-mode: color; opacity: 0.5; pointer-events: none; }
.criteria-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,31,46,0.88) 0%, rgba(11,31,46,0.05) 46%, transparent 70%); pointer-events: none; }

.criteria-data { position: relative; z-index: 2; margin: 0; padding: 22px 26px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; align-self: end; margin-top: auto; }
.criteria-visual { display: flex; flex-direction: column; }
.criteria-data-row dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(250,248,244,0.6); margin: 0 0 4px; }
.criteria-data-row dd {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.4; color: var(--white); margin: 0;
  opacity: 1; transform: translateY(0); transition: opacity 0.3s ease, transform 0.3s ease;
}
.criteria-data-row dd.is-swapping { opacity: 0; transform: translateY(6px); }

@media (max-width: 900px) {
  .criteria-layout { grid-template-columns: 1fr; }
  .criteria-visual { min-height: 340px; }
  .criteria-data { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .criteria-data { grid-template-columns: 1fr; }
}

/* ============================================================
   Where we invest — real animated Europe map (jsvectormap),
   Spain as core, Germany/Italy as secondary, rest as tertiary.
   See js/europe-map.js.
   ============================================================ */
.geo-section { max-width: 1200px; margin: 0 auto; padding: 76px 24px; }
.geo-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.geo-copy .eyebrow { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 16px; }
.geo-copy h2 { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--navy); margin-bottom: 18px; }
.geo-copy p { font-size: 15px; line-height: 1.65; color: var(--grey-600); margin-bottom: 32px; }

.geo-legend { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--grey-200); padding-top: 24px; }
.geo-legend-row { display: flex; align-items: baseline; gap: 14px; }
.geo-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.geo-legend-dot.core { background: var(--ember-onlight); }
.geo-legend-dot.secondary { background: #5B87A6; }
.geo-legend-dot.tertiary { background: var(--grey-200); border: 1px solid var(--grey-400); }
.geo-legend-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-400); width: 80px; flex: none; }
.geo-legend-value { font-size: 14px; color: var(--charcoal); }

.geo-visual { position: relative; }
.europe-map { width: 100%; height: 440px; }
.europe-map svg { width: 100%; height: 100%; }
.europe-map path { transition: fill 0.9s ease; cursor: default; }
.europe-map path.map-core { fill: var(--ember-onlight) !important; }
.europe-map path.map-secondary { fill: #5B87A6 !important; }
.europe-map path.map-tertiary { fill: var(--grey-200) !important; }

@media (max-width: 900px) {
  .geo-layout { grid-template-columns: 1fr; gap: 32px; }
  .europe-map { height: 340px; }
}

/* Body copy justified so both edges of a paragraph line up straight, at
   every viewport width — reading columns here are narrow enough (max
   680-900px) that it doesn't open up the whitespace "rivers" wide
   justified columns can get. Scoped to actual multi-line prose blocks
   (not a blanket `p` rule) — a bare `p` selector would still win over a
   short caption/label's *inherited* centering from an ancestor like
   .advantage-closing or .careers-cta, since an explicit declaration on
   the element always beats an inherited one regardless of specificity. */
.solution-section p,
.solution-hero-content p,
.contact-hero-inner p,
.leadership-bio p,
.how-intro,
.access-para,
.what-thesis-para,
.carousel-detail-body,
.how-chart-source,
.support-form-intro {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}


/* Cookie consent banner + legal pages */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999;
  max-width: 980px; margin: 0 auto; padding: 18px 22px;
  background: var(--warm-white, #FAF8F4); color: var(--navy, #0B1F2E);
  border: 1px solid rgba(11, 31, 46, 0.18); border-radius: 6px;
  box-shadow: 0 8px 28px rgba(11, 31, 46, 0.18);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  font-family: var(--sans); font-size: 13px; line-height: 1.5;
}
.cookie-banner-text { flex: 1 1 420px; }
.cookie-banner-text strong { display: block; font-size: 14px; margin-bottom: 2px; }
.cookie-banner-text p { margin: 0; }
.cookie-banner-text a { color: var(--ember-onlight, #013C2C); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; }
.cookie-btn {
  font: 500 13px var(--sans); padding: 10px 22px; border-radius: 3px; cursor: pointer;
  background: transparent; color: var(--navy, #0B1F2E); border: 1px solid var(--navy, #0B1F2E);
}
.cookie-btn:hover { background: var(--navy, #0B1F2E); color: #fff; }
.footer-bottom .footer-links { opacity: 0.6; }
.footer-bottom .footer-links a, .footer-bottom .footer-links button {
  color: inherit; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
}
.footer-bottom .footer-links a:hover, .footer-bottom .footer-links button:hover { text-decoration: underline; }
.legal-page { max-width: 880px; margin: 0 auto; padding: 150px 24px 90px; font-family: var(--sans); color: var(--charcoal, #1C1E1F); }
.legal-page h1 { font-family: var(--serif); font-weight: 500; font-size: 40px; color: var(--navy, #0B1F2E); margin: 0 0 6px; }
.legal-page .legal-updated { font-size: 13px; opacity: 0.65; margin: 0 0 36px; }
.legal-page h2 { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--navy, #0B1F2E); margin: 38px 0 10px; }
.legal-page p, .legal-page li { font-size: 15px; line-height: 1.7; }
.legal-page ul { padding-left: 20px; }
.legal-page a { color: var(--ember-onlight, #013C2C); }
.legal-page table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
.legal-page th, .legal-page td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(11, 31, 46, 0.15); vertical-align: top; }
.legal-page th { font-weight: 600; background: var(--green-soft, #E7EDE8); }
@media (max-width: 640px) { .legal-page { padding-top: 110px; } .legal-page h1 { font-size: 32px; } .cookie-banner-actions { width: 100%; } .cookie-btn { flex: 1; } }