@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Oswald:wght@400;500;600&display=swap');

:root {
  --ink: #15130f;
  --paper: #b18a54;
  --paper-deep: #7b5c35;
  --cream: #f1eadc;
  --line: rgba(31, 25, 17, .22);
  --electric: #f4b83f;
  --night: #08101d;
  --rust: #a63d26;
  --shell: min(1160px, calc(100vw - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body { margin: 0; color: var(--ink); font-family: "DM Sans", Arial, sans-serif; line-height: 1.6; overflow-x: hidden; }
a { color: inherit; }
.shell { width: var(--shell); margin: 0 auto; position: relative; z-index: 2; }
.eyebrow, .kicker { margin: 0 0 14px; font: 600 .78rem/1.1 "DM Sans", sans-serif; letter-spacing: .17em; text-transform: uppercase; }
h1, h2, h3 { font-family: "Oswald", Impact, sans-serif; text-transform: uppercase; line-height: .98; letter-spacing: -.025em; margin: 0; }
.tm { display: inline-block; margin-left: .1em; font-family: "DM Sans", sans-serif; font-size: .22em; font-weight: 700; line-height: 1; vertical-align: top; transform: translateY(.18em); letter-spacing: 0; }
.tm-prominent { font-size: .34em; transform: translateY(.04em); }
.tm-inline { font-size: .62em; transform: translateY(-.08em); }
.tm-callout { font-size: .34em; transform: translateY(.04em); }
p { margin: 0; }

.heritage { position: relative; background-color: var(--paper); background-image: linear-gradient(rgba(34,27,17,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(34,27,17,.09) 1px, transparent 1px); background-size: 22px 22px; }
.heritage::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }

.hero { min-height: 92vh; display: grid; align-items: end; padding: 96px 0 84px; border-bottom: 1px solid rgba(20,16,10,.4); }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(177,138,84,.96) 0 47%, rgba(177,138,84,.74) 66%, rgba(177,138,84,.93)), url('images/ship-channel.png') center/cover; filter: sepia(.25); }
.hero .shell { max-width: 920px; margin-left: max(24px, calc((100vw - 1160px)/2)); }
.hero h1 { max-width: 860px; font-size: clamp(4rem, 9vw, 8.7rem); }
.hero .lede { max-width: 750px; margin-top: 30px; font-size: clamp(1.05rem, 1.6vw, 1.32rem); font-weight: 500; }
.scroll-cue { display: inline-flex; gap: 12px; margin-top: 46px; text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; border-bottom: 2px solid var(--ink); padding-bottom: 7px; }

.timeline { padding: 120px 0 140px; }
.section-intro { display: grid; grid-template-columns: .7fr 1.45fr 1fr; gap: 40px; align-items: start; padding-bottom: 70px; border-bottom: 2px solid var(--ink); }
.section-intro h2 { font-size: clamp(3.3rem, 6vw, 6.2rem); }
.section-intro > p:last-child { font-size: 1.05rem; font-weight: 500; }
.track { position: relative; }
.track::before { content: ""; position: absolute; top: 0; bottom: 0; left: 112px; width: 2px; background: var(--ink); }
.milestone { position: relative; display: grid; grid-template-columns: 160px 1fr; gap: 40px; min-height: 300px; padding: 70px 0; border-bottom: 1px solid var(--line); }
.milestone::before { content: ""; position: absolute; left: 105px; top: 84px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 4px solid var(--paper); box-shadow: 0 0 0 2px var(--ink); }
.year { font-family: "Oswald", sans-serif; font-size: 1.1rem; font-weight: 600; letter-spacing: .05em; }
.year-long { width: 90px; max-width: 90px; text-align: right; line-height: 1.12; }
.year-long span { display: block; white-space: nowrap; }
.milestone-copy { max-width: 780px; }
.milestone h3 { font-size: clamp(2.3rem, 4vw, 4.6rem); max-width: 900px; }
.milestone-copy > p:not(.kicker):not(.note) { margin-top: 24px; max-width: 720px; font-size: 1.05rem; }
.pwr-ai-callout { margin-top: 36px; padding: 30px; border: 2px solid var(--ink); background: rgba(241,234,220,.18); }
.pwr-ai-callout h4 { max-width: 760px; margin: 0; font: 600 clamp(2rem, 3.5vw, 3.7rem)/1 "Oswald", Impact, sans-serif; letter-spacing: -.02em; text-transform: uppercase; }
.pwr-ai-callout > p:not(.kicker):not(.note) { max-width: 720px; margin: 20px 0 0; font-size: 1.02rem; }
.pwr-ai-callout .stats { margin-top: 30px; }
.featured { grid-template-columns: 160px minmax(300px, .9fr) minmax(320px, 1.1fr); }
.visual { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; border: 2px solid var(--ink); background: rgba(240,229,207,.28); text-align: center; text-transform: uppercase; font-weight: 700; letter-spacing: .08em; }
.industrial-visual { background: linear-gradient(rgba(25,20,14,.2), rgba(25,20,14,.55)), url('images/ship-channel.png') center/cover; color: white; text-shadow: 0 2px 16px rgba(0,0,0,.55); }
.visual small { max-width: 260px; margin-top: 8px; font-size: .72rem; }
.process { display: flex; flex-wrap: wrap; padding: 0; margin: 35px 0 0; list-style: none; }
.process li { padding: 9px 16px; border: 1px solid var(--ink); margin: -1px 0 0 -1px; font: 600 .75rem/1.2 "DM Sans"; text-transform: uppercase; letter-spacing: .1em; }
.stats { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 38px; border: 2px solid var(--ink); }
.stats div { padding: 24px 16px; border-right: 1px solid var(--ink); }
.stats div:last-child { border: 0; }
.stats strong { display: block; font: 500 3rem/.9 "Oswald", sans-serif; }
.stats span { display: block; margin-top: 9px; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.note { max-width: 700px; margin-top: 22px; font-size: .82rem; font-style: italic; opacity: .75; }
.source-note a { text-underline-offset: 3px; }
.renewables-milestone { grid-template-columns: 160px minmax(0, 1fr) 220px; align-items: center; }
.renewables-milestone .milestone-copy > p:not(.kicker):not(.note) + p { margin-top: 16px; }
.renewables-art { display: grid; place-items: center; align-self: stretch; min-height: 260px; border-left: 1px solid var(--line); padding-left: 30px; }
.renewables-art img { display: block; width: min(100%, 190px); height: auto; mix-blend-mode: multiply; filter: contrast(1.08); }

.future { position: relative; overflow: hidden; min-height: 1200px; padding: 140px 0; color: white; background: var(--night); }
.future::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,16,29,.08), rgba(8,16,29,.9) 68%, #080d16), url('images/launch-grid.png') center top/cover no-repeat; }
.future::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 440px; background: linear-gradient(180deg, var(--paper) 0%, rgba(177,138,84,.94) 18%, rgba(126,93,55,.72) 39%, rgba(54,48,44,.38) 63%, rgba(8,16,29,0) 100%); box-shadow: inset 0 70px 110px rgba(117,83,43,.18); }
.future-bridge { position: relative; z-index: 1; max-width: 900px; padding-left: 28px; border-left: 2px solid rgba(255,244,223,.7); color: #fff7e8; text-shadow: 0 2px 18px rgba(31,20,11,.48); }
.bridge-kicker { font: 600 .78rem/1 "Oswald"; letter-spacing: .2em; text-transform: uppercase; color: #ffe1b2; }
.bridge-line { margin-top: 14px; font: 500 clamp(1.55rem, 2.8vw, 2.7rem)/1.16 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .015em; }
.bridge-statement { margin-top: 16px; font-size: 1.1rem; }
.bridge-statement strong { font-weight: 700; }
.future .eyebrow { color: var(--electric); margin-top: 150px; }
.future h2 { font-size: clamp(4.2rem, 10vw, 10rem); max-width: 1050px; }
.future-lede { max-width: 720px; margin-top: 30px; font-size: 1.25rem; color: #dbe2ee; }
.future-sequence { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 320px; align-items: start; }
.future-card { display: grid; grid-template-columns: 65px 1fr; gap: 20px; padding: 34px; background: rgba(8,16,29,.68); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(14px); }
.future-card h3 { font-size: clamp(2rem, 3vw, 3.2rem); }
.future-card p { margin-top: 16px; color: #c9d2df; }
.future-card .kicker { margin-top: 0; color: var(--electric); }
.future-card .source-note { font-size: .76rem; color: #9facbd; }
.future-card .source-note a { color: #cbd8ea; }
.future-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 26px 0 8px; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.22); }
.future-stats div { padding: 16px 12px; background: rgba(8,16,29,.86); }
.future-stats strong { display: block; font: 500 clamp(1.45rem, 2.3vw, 2.35rem)/1 "Oswald"; color: white; }
.future-stats span { display: block; margin-top: 7px; font-size: .68rem; line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; color: #aebbd0; }
.card-number { font: 500 1rem/1 "Oswald"; color: var(--electric); }

.mars { position: relative; min-height: 100vh; display: grid; align-items: center; overflow: hidden; padding: 130px 0; color: white; background: #020306; }
.mars::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,3,6,.84) 0 32%, rgba(2,3,6,.08) 72%), url('images/mars.png') 80% center/cover no-repeat; }
.stars { position: absolute; inset: 0; background-image: radial-gradient(circle at 13% 20%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 32% 67%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 65% 18%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 84% 60%, #fff 0 1px, transparent 1.5px); background-size: 180px 180px, 240px 240px, 300px 300px, 210px 210px; opacity: .45; }
.mars-layout { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; min-height: 680px; }
.mars-copy { max-width: 700px; }
.mars .eyebrow { color: #ff7958; }
.mars h2 { font-size: clamp(5.7rem, 11vw, 11rem); }
.mars-copy > p:not(.eyebrow) { max-width: 610px; margin-top: 28px; font-size: 1.16rem; color: #ced1d9; }
.mars-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 30px; border-top: 1px solid rgba(255,255,255,.24); border-bottom: 1px solid rgba(255,255,255,.24); }
.mars-stats div { padding: 22px 14px 22px 0; }
.mars-stats strong { display: block; font: 500 clamp(1.6rem, 2.4vw, 2.5rem)/1 "Oswald"; color: #fff; }
.mars-stats span { display: block; margin-top: 8px; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #aab4c3; }
.mars-copy .frontier-close { color: #fff; font: 500 clamp(1.35rem, 2.1vw, 2rem)/1.3 "Oswald", sans-serif; }
.mars-copy .mars-source { font-size: .76rem; color: #8995a7; }
.mars-source a { color: #c0cada; }
.throughline { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 38px; }
.throughline span { padding: 8px 12px; border: 1px solid rgba(255,255,255,.32); font-size: .72rem; text-transform: uppercase; letter-spacing: .11em; }
.service-link { display: inline-flex; gap: 10px; margin-top: 34px; padding-bottom: 7px; border-bottom: 2px solid #ff7958; color: white; text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.mars-orbit { min-height: 500px; }

footer { background: #020306; color: #8f98a7; border-top: 1px solid #232732; padding: 34px 0; }
.footer-inner { display: flex; justify-content: space-between; gap: 40px; font-size: .78rem; }
.disclaimer { max-width: 650px; text-align: right; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 860px) {
  :root { --shell: min(100% - 32px, 680px); }
  .hero { min-height: 84vh; }
  .hero .shell { margin: 0 auto; }
  .section-intro { grid-template-columns: 1fr; gap: 24px; }
  .track::before { left: 18px; }
  .milestone, .featured { grid-template-columns: 56px 1fr; gap: 20px; }
  .milestone::before { left: 11px; }
  .year-long { width: 52px; max-width: 52px; font-size: .78rem; text-align: left; }
  .year { writing-mode: vertical-rl; transform: rotate(180deg); }
  .year.year-long { writing-mode: horizontal-tb; transform: none; }
  .featured .visual { grid-column: 2; min-height: 280px; margin-top: 24px; }
  .renewables-milestone { grid-template-columns: 56px 1fr; }
  .renewables-art { grid-column: 2; min-height: 180px; justify-items: start; border-left: 0; border-top: 1px solid var(--line); padding: 28px 0 0; }
  .renewables-art img { width: 160px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats div:nth-child(2) { border-right: 0; }
  .stats div:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
  .future { min-height: 1100px; }
  .future-bridge { padding-left: 20px; }
  .future .eyebrow { margin-top: 110px; }
  .future-sequence { grid-template-columns: 1fr; margin-top: 300px; }
  .mars-layout { grid-template-columns: 1fr; }
  .mars::before { background: linear-gradient(180deg, rgba(2,3,6,.88) 0 32%, rgba(2,3,6,.08) 68%, rgba(2,3,6,.82)), url('images/mars.png') 65% 70%/cover no-repeat; }
  .mars-copy { padding-top: 40px; }
  .mars-orbit { min-height: 420px; }
  .footer-inner { display: block; }
  .disclaimer { text-align: left; margin-top: 14px; }
}

@media (max-width: 520px) {
  .hero h1 { font-size: 3.55rem; }
  .timeline { padding-top: 90px; }
  .milestone h3 { font-size: 2.45rem; }
  .stats strong { font-size: 2.3rem; }
  .future h2 { font-size: 4.8rem; }
  .future-card { grid-template-columns: 1fr; }
  .mars h2 { font-size: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}