/* Original styling informed by Exas's local Peace & Love design reference.
   The existing hero styles, shared color variables and slider are preserved. */
:root {
  --exas-forest: #001b17;
  --exas-cyan: #00bdd8;
  --exas-orange: #ff6526;
  --exas-muted: #526e66;
  --exas-paper: #f4f6f2;
  --exas-line: #dce5df;
  --page-width: 1160px;
}

html { scroll-behavior: smooth; scroll-padding-top: 100px; }
.skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 2000;
  padding: 12px 18px;
  transform: translateY(-160%);
  background: white;
  color: var(--exas-forest);
  border: 2px solid var(--exas-forest);
}
.skip-link:focus { transform: translateY(0); }

/* Navigation stays light above the unchanged hero. */
header { background: rgba(249, 252, 250, .96); }
nav { max-width: 1280px; gap: 24px; padding: 18px 32px; flex-wrap: wrap; }
.logo { font-size: 20px; letter-spacing: .08em; }
.logo.brand-lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--primary-green, #2d5a3f); text-decoration: none; }
.brand-name { font: inherit; font-weight: 700; white-space: nowrap; }
.logo.brand-lockup .brand-name span { color: inherit; }
.brand-mark { position: relative; display: block; flex: 0 0 48px; width: 48px; height: 48px; overflow: hidden; border-radius: 50%; background: white; }
.brand-mark img { position: absolute; left: -16px; top: -16px; display: block; width: 80px; height: 80px; max-width: none; }
.nav-links { gap: 24px; align-items: center; margin-left: auto; }
.nav-links a { display: inline-block; font-size: 13px; padding: 10px 0; }
.nav-links a:hover { text-decoration: underline; text-underline-offset: 6px; }
.nav-links li:last-child a {
  padding: 10px 18px;
  border: 1px solid #c6d3c9;
  border-radius: 4px;
}
.nav-links a:focus-visible, .nav-toggle:focus-visible {
  outline: 3px solid #007f90;
  outline-offset: 4px;
}
.nav-toggle {
  display: none;
  min-height: 44px;
  padding: 8px 14px;
  color: var(--exas-forest);
  background: transparent;
  border: 1px solid #c6d3c9;
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}
.nav-toggle[hidden] { display: none !important; }
.nav-toggle span { margin-left: 12px; font-size: 20px; }

.section-kicker {
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1.5 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 20px !important;
  color: var(--exas-muted);
}
.himalaya-content .section-kicker, .ocean-60 .section-kicker,
.mission .section-kicker, .story-copy .section-kicker,
.join-section .section-kicker { color: var(--exas-muted); }
.himalaya-content h2, .ocean-60 h2, .mission h2,
.principles h2, .extended-section h2, .join-section h2 {
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.13;
  letter-spacing: -.045em;
  font-weight: 700;
  text-shadow: none;
}

/* A spacious introduction replaces the heavy mountain panels. */
.himalaya-section {
  background: var(--exas-paper);
  color: var(--exas-forest);
  padding: clamp(64px, 8vw, 110px) 24px;
  border-bottom: 1px solid var(--exas-line);
}
.himalaya-content { max-width: var(--page-width); }
.himalaya-content h2 { max-width: 820px; margin: 0 auto 28px; color: var(--exas-forest); }
.himalaya-content > p:not(.section-kicker) {
  max-width: 800px;
  margin: 0 auto 18px;
  font-size: 17px;
  color: var(--exas-muted);
}
.mountain-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 44px; }
.mountain-card {
  padding: 30px;
  background: white;
  border: 1px solid var(--exas-line);
  border-radius: 6px;
  backdrop-filter: none;
  box-shadow: 0 12px 28px #001b1706;
}
.mountain-card h3 { color: var(--exas-forest); font-size: 18px; line-height: 1.45; margin-bottom: 14px; }
.mountain-card p { font-size: 15px; color: var(--exas-muted); line-height: 1.8; }

/* White editorial copy beside a vivid, compact ocean panel. */
.ocean-split-section { min-height: 0; }
.ocean-60 { padding: 88px clamp(32px, 5vw, 80px) 88px max(32px, calc((100vw - 1160px) / 2)); }
.ocean-60 h2 { color: var(--exas-forest); margin-bottom: 26px; }
.ocean-60 p:not(.section-kicker) { font-size: 17px; color: var(--exas-muted); }
.ocean-40 {
  position: relative;
  isolation: isolate;
  padding: 70px clamp(28px, 4vw, 70px);
  background: var(--exas-cyan);
  color: var(--exas-forest);
  border: 0;
}
.ocean-40.has-ocean-art {
  min-height: 560px;
  background-color: #063844;
  background-image: linear-gradient(180deg, #00242bcc, #00242b80), url('assets/exas-beneath-surface.png');
  background-size: cover;
  background-position: center;
  color: white;
}
.ocean-40.has-ocean-art h3 { color: white; text-shadow: 0 2px 12px #001b1766; }
.ocean-40.has-ocean-art p { color: #e7f7f5; text-shadow: 0 1px 8px #001b1780; }
.ocean-40.has-ocean-art .ocean-mark { color: #9ae8ee; }
.ocean-40 h3 { font-size: 34px; line-height: 1.2; letter-spacing: -.03em; color: var(--exas-forest); }
.ocean-40 p { font-size: 17px; color: #00352e; }
.ocean-mark { display: block; font-size: 100px; font-weight: 300; line-height: .9; margin-bottom: 28px; }

.mission { max-width: 900px; margin: 0 auto; padding: 100px 28px; }
.mission h2 { color: var(--exas-forest); margin-bottom: 28px; }
.mission p:not(.section-kicker) { color: var(--exas-muted); font-size: 18px; }

.principles { padding: 90px 24px; background: var(--exas-forest); color: white; }
.principles-container { max-width: var(--page-width); }
.principles .section-kicker { text-align: center; color: #9cbfb4; }
.principles h2 { color: white; margin-bottom: 46px; }
.principles .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.principles .card {
  padding: 12px 28px 20px;
  background: none;
  border: 0;
  border-right: 1px solid #31524a;
  border-radius: 0;
  box-shadow: none;
}
.principles .card:last-child { border-right: 0; }
.principles .card:hover { transform: none; }
.principles .card-icon { font-size: 34px; margin-bottom: 20px; }
.principles .card h3 { color: white; font-size: 18px; }
.principles .card p { color: #b9cec7; font-size: 15px; line-height: 1.8; }

/* Original artwork generated locally in Exas, copied into this workspace. */
.nature-section, .life-section { padding: 88px 28px; text-align: left; }
.nature-section { background: var(--exas-paper); }
.life-section { background: white; }
.story-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 7vw, 90px);
  align-items: center;
  max-width: var(--page-width);
  margin: 0 auto;
}
.story-copy { min-width: 0; }
.story-copy h2 { max-width: 500px; color: var(--exas-forest); }
.story-copy p:not(.section-kicker) { color: var(--exas-muted); font-size: 17px; margin: 24px 0 0; }
.story-art { min-width: 0; }
.story-art img { display: block; width: 100%; height: auto; border-radius: 7px; }
.story-art figcaption { font-size: 12px; color: var(--exas-muted); margin-top: 14px; }
.life-section .story-art { order: -1; }

.space-section { padding: 100px 28px; background: var(--exas-forest); }
.space-section .glass-overlay { background: none; border: 0; border-radius: 0; backdrop-filter: none; padding: 0; max-width: 840px; }
.space-section .section-kicker { color: #9cbfb4; }
.space-section h2 { color: white; }
.space-section p:not(.section-kicker) { font-size: 18px; color: #b9cec7; margin: 28px 0 0; }
.cosmic-laser { background: linear-gradient(to bottom, transparent, #00bdd840, #00bdd8); opacity: .5; }

.join-section {
  max-width: 760px;
  margin: 80px auto;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--exas-line);
  border-top: 4px solid var(--exas-orange);
  border-radius: 6px;
  box-shadow: 0 18px 45px #001b1708;
}
.join-section h2 { color: var(--exas-forest); font-size: clamp(30px, 3.5vw, 44px); }
.join-section > p:not(.section-kicker) { color: var(--exas-muted); }
.join-form { gap: 20px; margin-top: 30px; }
.form-group label { color: var(--exas-forest); font-size: 13px; }
.form-group input, .form-group textarea { background: #fafcf9; border: 1px solid #cbd8cf; border-radius: 4px; font: inherit; }
.form-group input:focus, .form-group textarea:focus { border-color: #007f90; outline: 2px solid #007f9033; outline-offset: 2px; }
.submit-btn {
  min-height: 52px;
  padding: 14px 22px;
  background: var(--exas-orange);
  color: var(--exas-forest);
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.submit-btn:hover { background: #e9a17e; }
.submit-btn:focus-visible { outline: 3px solid #007f90; outline-offset: 4px; }
footer { margin-top: 0; padding: 40px 24px; background: var(--exas-forest); }
footer p { color: #c8ddd5; font-size: 12px; letter-spacing: .035em; opacity: 1; }

.community-updates { padding: 72px 28px 0; background: var(--soft-cream); }
.community-updates__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: var(--page-width);
  margin: 0 auto;
}
.community-updates article {
  padding: 30px;
  background: white;
  border: 1px solid var(--exas-line);
  border-radius: 6px;
  scroll-margin-top: 100px;
}
.community-updates h2 { color: var(--exas-forest); font-size: 28px; letter-spacing: -.035em; margin-bottom: 16px; }
.community-updates article p { color: var(--exas-muted); font-size: 15px; }
.journal-home-link { display: inline-block; margin-top: 18px; color: #007f90; font-size: 14px; font-weight: 600; text-underline-offset: 5px; }
.journal-home-link:focus-visible { outline: 2px solid #007f90; outline-offset: 5px; }
.coming-soon {
  display: inline-block;
  margin-bottom: 18px;
  padding: 4px 10px;
  background: #e9f2ec;
  color: #345b4d;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.contact-footer { max-width: var(--page-width); margin: 0 auto 32px; padding-bottom: 32px; border-bottom: 1px solid #31524a; }
.contact-footer h2 { font-size: 28px; color: white; margin-bottom: 10px; }
.contact-footer p { font-size: 14px; color: #b9cec7; letter-spacing: 0; margin-bottom: 12px; }
.contact-footer a { color: #9ee9dc; font-size: 16px; text-underline-offset: 5px; overflow-wrap: anywhere; }
.contact-footer a:focus-visible { outline: 2px solid #9ee9dc; outline-offset: 5px; }

@media (max-width: 1000px) {
  .principles .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .principles .card:nth-child(2) { border-right: 0; }
}
@media (max-width: 900px) {
  .ocean-60, .ocean-40 { width: 100%; padding: 60px 28px; }
  .ocean-40 { border: 0; }
  .ocean-mark { font-size: 72px; margin-bottom: 22px; }
  .story-layout { gap: 32px; }
  .mountain-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  nav { padding: 14px 20px; gap: 12px; }
  .logo { font-size: 18px; }
  .nav-links { display: flex; flex-wrap: wrap; gap: 6px 20px; width: 100%; }
  nav[data-enhanced] .nav-toggle { display: inline-flex; align-items: center; margin-left: auto; }
  nav[data-enhanced] .nav-links { display: none; }
  nav[data-enhanced].nav-open .nav-links { display: flex; padding: 10px 0; }
  .himalaya-section, .principles, .nature-section, .life-section, .space-section { padding: 64px 22px; }
  .story-layout { grid-template-columns: 1fr; }
  .life-section .story-art { order: 0; }
  .mission { padding: 70px 24px; }
  .principles .card { padding: 8px 18px 16px; }
  .join-section { margin: 56px 18px; }
  .ocean-40.has-ocean-art { min-height: 500px; }
  .community-updates { padding: 56px 22px 0; }
  .community-updates__grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 420px) {
  .principles .grid { grid-template-columns: 1fr; gap: 24px; }
  .principles .card { border-right: 0; border-bottom: 1px solid #31524a; padding: 0 0 24px; }
  .principles .card:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cosmic-laser { animation: none; display: none; }
}

/* Exas's mountain illustration connects the ocean to Himalayan monsoon weather. */
.ocean-40.has-himalaya-art {
  min-height: 560px;
  background-color: #164b6d;
  background-image: linear-gradient(180deg, rgba(6, 49, 78, .58), rgba(13, 67, 97, .82)), url('assets/exas-himalaya-ocean-panel-v1.png');
  background-size: cover;
  background-position: center;
  color: white;
}
.ocean-40.has-himalaya-art .ocean-mark { color: #bee8f5; }
.ocean-40.has-himalaya-art .section-kicker { color: #c8e5f0; font-size: 10px; letter-spacing: .1em; }
.ocean-40.has-himalaya-art h3 { color: white; }
.ocean-40.has-himalaya-art p:not(.section-kicker) { color: #f1f7fc; }
.ocean-40.has-himalaya-art p + p { margin-top: 20px; }
.ocean-story-link { display: inline-block; padding-block: 12px; margin-top: 18px; color: white; font-size: 13px; font-weight: 600; text-underline-offset: 5px; }
.ocean-story-link:focus-visible { outline: 3px solid white; outline-offset: 4px; }
@media (max-width: 768px) { .ocean-40.has-himalaya-art { min-height: 500px; } }

.principles .card-icon { color: #c8d1ce; }
.principles .card-icon svg { display: block; margin-inline: auto; }

/* Exas proposed blue; deepen it for a readable white label. */
.hero-cta-btn { background-color: #236c9b; color: #fff; box-shadow: 0 4px 18px #113b5750; }
.hero-cta-btn:hover { background-color: #1a5279; color: #fff; box-shadow: 0 6px 20px #113b5750; }


/* First reviewed realistic Exas banner; six-scene controls follow the full batch. */
.slide-1::before { background-image: url('assets/exas-index-hero-1-earth-realistic-v2.png'); }

/* Six realistic Exas images with accents matched to each scene. */
.realistic-hero .slide { animation: none; opacity: 0; z-index: 0; transition: opacity 1s ease; pointer-events: none; }
.realistic-hero .slide.is-active { opacity: 1; z-index: 1; pointer-events: auto; }
.realistic-hero .slide::before { content: none; animation: none; background-image: none; }
.hero-illustration { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.realistic-hero .slide::after { background: linear-gradient(90deg,#062a3080,#062a30a8 50%,#062a3060); }
.realistic-hero .slide-6::after { background: #052b3c70; }
.realistic-hero .hero-content { max-width: 920px; padding: 40px 32px 100px; }
.realistic-hero .hero-content h1, .realistic-hero .hero-content h2 { font-size: clamp(36px,5vw,70px); font-weight: 750; line-height: 1.05; color: white; margin-bottom: 22px; text-shadow: 0 2px 20px #002c3980; letter-spacing: .025em; }
.realistic-hero .hero-content .subtitle { color: var(--hero-accent, #d4e7ee); font-size: clamp(11px,1.3vw,17px); letter-spacing: .15em; }
.realistic-hero .hero-content .description { max-width: 650px; margin-inline: auto; font-size: clamp(15px,1.4vw,19px); line-height: 1.8; }
.realistic-hero .hero-cta-btn { background-color: var(--hero-button, #24576b); color: white; }
.realistic-hero .hero-cta-btn:hover { background-color: var(--hero-button, #24576b); filter: brightness(.88); }
.hero-story-link { display: inline-block; color: white; text-underline-offset: 6px; font-size: 13px; padding: 12px; margin-top: -10px; }
.hero-story-link:focus-visible { outline: 3px solid white; outline-offset: 4px; }
.hero-art-credit { position: absolute; right: 24px; top: 20px; z-index: 12; color: #eaf4f0; font-size: 10px; letter-spacing: .03em; background: #073039a0; padding: 6px 9px; border-radius: 3px; }
.hero-controls { position: absolute; z-index: 12; left: 32px; bottom: 28px; display: flex; align-items: center; gap: 16px; }
.hero-controls[hidden] { display: none; }
.hero-transport, .hero-selector { display: flex; gap: 4px; }
.hero-controls button { min-width: 38px; min-height: 44px; background: #06342d85; border: 1px solid #c4e6db70; color: white; font: 12px/1.2 'Segoe UI',sans-serif; border-radius: 4px; cursor: pointer; }
.hero-transport button { min-width: 44px; }
#hero-pause { padding-inline: 13px; min-width: 65px; }
.hero-selector button[aria-pressed="true"] { background: var(--hero-accent, #d4e7ee); border-color: var(--hero-accent, #d4e7ee); color: #153c32; font-weight: 700; }
.hero-controls button:hover { border-color: white; }
.hero-controls button:focus-visible { outline: 3px solid white; outline-offset: 4px; }
.realistic-hero .slide-3 .hero-illustration { object-position: 70% center; }
.realistic-hero .slide-5 .hero-illustration { object-position: 70% center; }
.realistic-hero .slide-6 .hero-illustration { object-position: 85% center; }
.hero-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media(max-width:768px) { .realistic-hero { min-height: 740px; } .realistic-hero .hero-content { padding: 28px 24px 180px; } .realistic-hero .hero-content h1,.realistic-hero .hero-content h2 { font-size: clamp(34px,8.5vw,54px); } .hero-controls { left: 20px; right: 20px; bottom: 82px; flex-direction: column-reverse; gap: 9px; } .hero-selector { justify-content: center; gap: 6px; } .hero-selector button { min-width: 38px; } .realistic-hero .hero-cta-btn { left: 0; right: 0; bottom: 0; justify-content: center; font-size: 15px; padding-block: 18px; } }
@media(prefers-reduced-motion:reduce) { .realistic-hero .slide { transition: none; } }

/* Public launch notice, kept in normal document flow. */
.construction-banner { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 18px; padding:12px 24px; background:#173f35; color:#f3faf6; font:14px/1.5 'Segoe UI',sans-serif; text-align:center; }
.construction-banner strong { color:#f3faf6; font-size:12px; letter-spacing:.09em; text-transform:uppercase; }
.construction-banner span { color:#e2eee8; }
@media(max-width:600px) { .construction-banner { padding:12px 20px; gap:4px; } .construction-banner span { flex-basis:100%; font-size:13px; } }