:root {
  --ink: #10282e;
  --deep: #082e39;
  --sea: #087d82;
  --aqua: #4dd0c8;
  --sand: #f5f0e6;
  --mist: #e5f0ed;
  --sun: #ffb454;
  --white: #fffdf9;
  --line: rgba(16, 40, 46, .13);
  --shadow: 0 18px 45px rgba(8, 46, 57, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--sand); font-family: "Avenir Next", Avenir, system-ui, sans-serif; font-size: 16px; line-height: 1.6; }
a { color: inherit; }
.shell { width: min(960px, calc(100% - 40px)); margin: 0 auto; }
.eyebrow { margin: 0 0 .7rem; color: var(--sea); font-size: .76rem; font-weight: 650; letter-spacing: .15em; text-transform: uppercase; }
h1, h2 { margin: 0; line-height: 1.05; letter-spacing: -.035em; }
h1, h2 { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; }
h1 { max-width: 840px; font-size: clamp(3.1rem, 7vw, 5.9rem); }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
p { margin: 0; }

.topbar { position: relative; z-index: 2; padding: 18px 0; color: var(--white); background: var(--deep); }
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.home-link { color: var(--white); font-weight: 700; text-decoration: none; }
.back-link { color: #b7e9e4; font-size: .94rem; text-decoration: none; }
.back-link:hover, .back-link:focus-visible { color: var(--white); }

.hero { min-height: min(72vh, 690px); display: grid; align-items: end; position: relative; overflow: hidden; color: var(--white); background: var(--deep); }
.hero::before { position: absolute; inset: 0; content: ""; background: var(--hero-image) center / cover no-repeat; }
.hero::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(2, 31, 38, .9), rgba(2, 31, 38, .36)), linear-gradient(0deg, rgba(2, 31, 38, .82), transparent 65%); }
.hero-copy { position: relative; z-index: 1; padding: clamp(8rem, 20vw, 15rem) 0 4.25rem; }
.hero .eyebrow { color: #aee7e1; }
.hero-intro { max-width: 620px; margin-top: 1.35rem; color: rgba(255,255,255,.9); font-size: clamp(1.07rem, 2vw, 1.24rem); }

.content { padding: clamp(4rem, 9vw, 7rem) 0; }
.story { display: grid; gap: clamp(3.5rem, 8vw, 6rem); }
.story-section { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr); align-items: stretch; gap: clamp(2rem, 6vw, 5rem); }
.story-section:nth-child(even) .story-copy { order: 2; }
.story-section:nth-child(even) .story-media { order: 1; }
.story-copy { display: grid; gap: 1rem; }
.story-copy p { color: #466168; font-size: 1.05rem; }
.story-media { min-height: 290px; overflow: hidden; border-radius: 22px; background: var(--mist); box-shadow: var(--shadow); }
.story-media img { display: block; width: 100%; height: 100%; min-height: 290px; object-fit: cover; }
.video-card { display: grid; gap: .8rem; padding: 1.15rem; color: var(--white); background: var(--deep); border-radius: 22px; text-decoration: none; box-shadow: var(--shadow); }
.video-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
.video-card span { color: #b7e9e4; font-size: .96rem; }
.video-card strong { font-size: 1.1rem; }

.plan { padding: clamp(3.5rem, 8vw, 6rem) 0; color: var(--white); background: var(--deep); }
.plan-inner { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 2rem; }
.plan h2 { color: #eff6f4; }
.plan p { max-width: 620px; margin-top: 1rem; color: rgba(255,255,255,.76); font-size: 1.08rem; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: .8rem 1.2rem; border-radius: 99px; color: #082e39; background: var(--aqua); font-weight: 700; text-decoration: none; }

footer { padding: 24px 0; color: rgba(255,255,255,.72); background: #06272f; font-size: .88rem; }

@media (max-width: 700px) {
  .shell { width: min(100% - 32px, 600px); }
  .story-section, .plan-inner { grid-template-columns: 1fr; }
  .story-section:nth-child(even) .story-copy, .story-section:nth-child(even) .story-media { order: initial; }
  .story-media, .story-media img { min-height: 235px; }
  .plan .button { width: 100%; }
}