:root {
  --ink: #102820;
  --forest: #123f32;
  --green: #b8e14d;
  --sand: #f0e8d5;
  --cream: #faf8f1;
  --line: rgba(16, 40, 32, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1rem clamp(1rem, 4vw, 4.5rem);
  color: white;
  background: linear-gradient(to bottom, rgba(7, 27, 21, .9), transparent);
}
.brand { display: inline-flex; align-items: center; gap: .65rem; letter-spacing: .08em; font-size: .95rem; }
.brand-mark { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border: 1px solid currentColor; border-radius: 50%; font-weight: 700; }
.nav { display: flex; gap: 2rem; font-size: .83rem; }
.nav a { opacity: .82; transition: opacity .2s; }
.nav a:hover { opacity: 1; }
.language-switcher { justify-self: end; display: flex; gap: .2rem; padding: .2rem; background: rgba(10, 32, 25, .55); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; backdrop-filter: blur(10px); }
.lang { padding: .4rem .58rem; border: 0; border-radius: 999px; color: white; background: transparent; font-size: .73rem; cursor: pointer; }
.lang.active { color: var(--ink); background: var(--green); }

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: flex-start;
  padding: 9rem clamp(1.25rem, 7vw, 8rem) clamp(3.5rem, 8vw, 7rem);
  color: white;
  background:
    linear-gradient(90deg, rgba(5, 29, 23, .94) 0%, rgba(5, 29, 23, .64) 48%, rgba(5, 29, 23, .16) 100%),
    url("images/oasis-hero.jpg") center 65% / cover;
}
.eyebrow, .kicker { margin: 0 0 1.1rem; color: var(--green); text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; font-weight: 750; }
.hero h1 { max-width: 1000px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.3rem, 8.5vw, 8.5rem); font-weight: 400; line-height: .88; letter-spacing: -.055em; }
.hero-copy { max-width: 650px; margin: 2rem 0; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.55; color: rgba(255,255,255,.86); }
.primary-link { display: inline-flex; gap: 1.4rem; align-items: center; padding: .9rem 1.15rem; border-bottom: 1px solid var(--green); font-weight: 650; }
.primary-link span:last-child { color: var(--green); }

.answers-section { padding: clamp(5rem, 10vw, 10rem) clamp(1rem, 4vw, 4.5rem); background: var(--sand); }
.section-intro { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: start; margin-bottom: clamp(3rem, 6vw, 6rem); }
.section-intro h2, .flow-title h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(2.6rem, 5vw, 5.2rem); line-height: .98; letter-spacing: -.04em; }
.answer-map { display: grid; grid-template-columns: 1fr 1.13fr 1fr; grid-template-rows: repeat(3, 23rem); gap: 1rem; max-width: 1500px; margin: 0 auto; }
.answer-card, .center-card { position: relative; overflow: hidden; min-height: 0; }
.answer-card { display: flex; align-items: end; color: white; background-position: center; background-size: cover; }
.answer-card .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,22,17,.9), rgba(6,22,17,.05) 66%); }
.card-content { position: relative; z-index: 1; padding: clamp(1.4rem, 3vw, 2.6rem); }
.answer-card h3 { margin: 0 0 .75rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 3.5vw, 3.6rem); font-weight: 400; line-height: .95; }
.answer-card p { max-width: 28rem; margin: 0; color: rgba(255,255,255,.8); line-height: 1.5; }
.answer-card { transition: transform .25s ease, box-shadow .25s ease; }
.answer-card:hover, .answer-card:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(8, 28, 21, .22); }
.answer-card:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.card-arrow { position: absolute; right: 1.5rem; bottom: 1.5rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: var(--green); font-size: 1.15rem; }
.card-content { width: 100%; padding-right: 4.8rem; }
.protein { grid-column: 1; grid-row: 1; background-image: url("images/protein-tilapia.jpg"); }
.climate { grid-column: 3; grid-row: 1; background-image: url("images/climate.jpg"); }
.desert { grid-column: 1; grid-row: 2; background-image: url("images/green-desert.jpg"); }
.minerals { grid-column: 3; grid-row: 2; background-image: url("images/minerals.jpg"); }
.energy { grid-column: 1; grid-row: 3; background-image: url("images/energy.jpg"); }
.livelihoods { grid-column: 3; grid-row: 3; background-image: url("images/livelihoods.jpg"); }
.center-card { grid-column: 2; grid-row: 1 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; color: white; background: var(--forest); }
.center-card::before { content: ""; position: absolute; inset: 0; opacity: .2; background: radial-gradient(circle at 50% 45%, var(--green), transparent 55%); }
.center-ring { position: absolute; width: min(32vw, 26rem); aspect-ratio: 1; border: 1px solid rgba(184,225,77,.52); border-radius: 50%; box-shadow: 0 0 0 3.5rem rgba(184,225,77,.035), 0 0 0 7rem rgba(184,225,77,.025); }
.center-small, .center-card h3, .center-card p { position: relative; }
.center-small { color: var(--green); text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; }
.center-card h3 { margin: 1.8rem 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.5rem, 7vw, 7rem); font-weight: 400; line-height: .76; letter-spacing: -.07em; }
.center-card p { margin: 0; font-size: .77rem; line-height: 1.8; letter-spacing: .16em; }
.center-card b { color: var(--green); }

.flow-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 8vw, 8rem); padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 7vw, 8rem); background: var(--cream); }
.flow-list { border-top: 1px solid var(--line); }
.flow-item { display: grid; grid-template-columns: 3.5rem 1fr 1.35fr; gap: 1.5rem; align-items: baseline; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.flow-item span { color: #6d7b73; font-size: .75rem; }
.flow-item strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.4rem; font-weight: 400; }
.flow-item p { margin: 0; color: #53625b; line-height: 1.55; }

footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 2rem; padding: 3rem clamp(1.25rem, 7vw, 8rem); color: white; background: #09241c; }
footer p { margin: 0; color: rgba(255,255,255,.65); }
.copyright { justify-self: end; font-size: .8rem; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .answer-map { grid-template-columns: 1fr 1fr; grid-template-rows: 32rem repeat(3, 23rem); }
  .center-card { grid-column: 1 / 3; grid-row: 1; }
  .protein, .desert, .energy { grid-column: 1; }
  .climate, .minerals, .livelihoods { grid-column: 2; }
  .protein, .climate { grid-row: 2; }
  .desert, .minerals { grid-row: 3; }
  .energy, .livelihoods { grid-row: 4; }
  .flow-section { grid-template-columns: 1fr; }
  footer { grid-template-columns: 1fr auto; }
  footer > p:nth-child(2) { display: none; }
}

@media (max-width: 620px) {
  .site-header { padding: .75rem 1rem; }
  .brand { font-size: .78rem; }
  .brand-mark { width: 1.8rem; height: 1.8rem; }
  .lang { padding: .35rem .45rem; }
  .hero { min-height: 90svh; }
  .hero h1 { font-size: clamp(3rem, 16vw, 4.8rem); }
  .section-intro { grid-template-columns: 1fr; }
  .answer-map { display: flex; flex-direction: column; }
  .answer-card { min-height: 24rem; }
  .center-card { order: -1; min-height: 31rem; }
  .center-ring { width: 15rem; }
  .flow-item { grid-template-columns: 2.5rem 1fr; }
  .flow-item p { grid-column: 2; }
  footer { grid-template-columns: 1fr; }
  .copyright { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}