@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat/caveat-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* The timeline, lettering, circles, metrics and scenery blends are live vectors/CSS. */
.milestones-section { container-type: inline-size; position: relative; isolation: isolate; overflow: hidden; color: #f4f7ff; background: radial-gradient(ellipse at 65% -15%, #6096b8, #153d61 28%, #00182f 55%, #000e1b 80%); scroll-margin-top: 100px; }
.milestone-main { position: relative; isolation: isolate; min-height: 35.325cqw; }
.milestone-main::before { content: ""; position: absolute; z-index: -2; top: 0; left: 30%; right: 0; height: 19cqw; background: radial-gradient(ellipse at 56% 0, #e4e7eb, #9ebbd0 32%, #345e8080 57%, transparent 77%); mask-image: linear-gradient(90deg, transparent, #000 25%); }
.milestone-backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.milestone-mountains { position: absolute; top: 0; left: 30.896%; width: 19.567%; height: 12.616cqw; overflow: hidden; opacity: .65; mask-image: linear-gradient(90deg, transparent, #000 25%, #000 70%, transparent), linear-gradient(#000 60%, transparent); mask-composite: intersect; }
.milestone-award-scene { position: absolute; top: 0; right: 0; width: 35.737%; height: 13.543cqw; overflow: hidden; mask-image: linear-gradient(#000 75%, transparent), linear-gradient(90deg, transparent, #000 12%); mask-composite: intersect; }
.milestone-heading { position: relative; padding: 3cqw 0 0 4.53cqw; }
.milestone-eyebrow { display: flex; align-items: center; gap: 1.2cqw; font-size: .9cqw; font-weight: 500; line-height: 1.5; letter-spacing: .29cqw; }
.milestone-eyebrow::before { content: ""; flex-shrink: 0; width: 2.75cqw; height: .3cqw; border-radius: 8px; background: #ff7108; }
.milestone-heading h2 { margin: .65cqw 0 .75cqw; font-size: 3.95cqw; font-weight: 800; letter-spacing: -.035em; line-height: .97; }
.milestone-heading h2 span { color: #00baf1; background: linear-gradient(#a8eaff, #00a9ed 85%); background-clip: text; -webkit-text-fill-color: transparent; }
.milestone-description { max-width: 35cqw; font-size: 1.18cqw; line-height: 1.32; color: #d6e2fa; font-weight: 400; }
.milestone-quote { position: absolute; top: 2.5cqw; left: 51.5%; width: 13cqw; color: #0b4a79; font: 500 2.4cqw/.95 "Caveat", cursive; text-align: center; transform: rotate(-10deg); }
.milestone-quote span { display: block; }
.milestone-quote span:first-child { padding-left: 1cqw; }
.milestone-quote span:last-child { padding-left: 3cqw; }
.milestone-quote::after { content: ""; position: absolute; bottom: -.75cqw; left: 4.1cqw; width: 8cqw; height: .15cqw; border-radius: 80%; background: #ff7300; transform: rotate(-5deg); }
.milestone-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.milestone-line path { fill: none; stroke: url(#milestone-line-color); stroke-width: 3; filter: drop-shadow(0 0 6px #00aaff); }
.milestone-hills { position: absolute; z-index: -1; bottom: 0; left: 0; width: 100%; height: 9cqw; pointer-events: none; }
.milestone-events { list-style: none; margin: 0; padding: 0; }
.milestone-event { position: absolute; left: var(--event-x); top: var(--event-y); width: 12.36cqw; transform: translateX(-50%); text-align: center; }
.milestone-photo { display: block; overflow: hidden; width: 6.8cqw; height: 6.8cqw; margin: 0 auto; border: 2px solid #cef4ff; border-radius: 50%; box-shadow: 0 0 0 2px #009dffbb, 0 0 18px #0087dd70; background: #073b60; }
.milestone-connector { display: block; position: relative; height: 1.5cqw; width: 1px; margin: 0 auto; background: linear-gradient(#f2fbff, #00baff); }
.milestone-connector::before, .milestone-connector::after { content: ""; position: absolute; left: 50%; border-radius: 50%; transform: translateX(-50%); }
.milestone-connector::before { top: -.2cqw; width: .58cqw; height: .58cqw; background: #fff; border: 1px solid #00bfff; box-shadow: 0 0 9px #00c9ff; }
.milestone-connector::after { bottom: 0; width: .45cqw; height: .45cqw; background: #00b9f5; box-shadow: 0 0 12px #009dff; }
.milestone-year { display: block; margin: .16cqw 0 .1cqw; color: #00b9f3; font-size: 1.65cqw; line-height: 1.25; font-weight: 800; }
.milestone-event h3 { font-size: 1.02cqw; line-height: 1.3; letter-spacing: -.025em; }
.milestone-event p { margin: .2cqw auto 0; color: #bcd3ee; font-size: .93cqw; line-height: 1.32; font-weight: 400; letter-spacing: -.025em; }
.milestone-metrics { position: relative; display: grid; grid-template-columns: .95fr .98fr 1.05fr 1.12fr 1.14fr; min-height: 6.34cqw; align-items: center; list-style: none; margin: 0; padding: .8cqw 4.5cqw; border-top: 1px solid #08446888; background: #000d1bd9; }
.milestone-metric { display: flex; align-items: center; justify-content: center; gap: 1cqw; padding: .2cqw 1.25cqw; min-height: 4.1cqw; }
.milestone-metric + .milestone-metric { border-left: 1px solid #86a8dc80; }
.milestone-metric .icon { width: 3.5cqw; height: 3.5cqw; color: #00b6f0; }
.milestone-metric p { display: flex; flex-direction: column; font-size: .95cqw; color: #c5daf2; line-height: 1.45; white-space: nowrap; }
.milestone-metric strong { color: #f4f7ff; font-size: 1.65cqw; line-height: 1.2; }
.milestone-metric--exports p { font-size: 1cqw; }

@media (max-width: 1200px) {
  .milestone-main { min-height: 0; padding: 36px 28px; }
  .milestone-heading { padding: 0; max-width: calc(100% - 230px); }
  .milestone-eyebrow { gap: 18px; font-size: 12px; letter-spacing: 4px; }
  .milestone-eyebrow::before { width: 34px; height: 4px; }
  .milestone-heading h2 { font-size: 49px; margin: 14px 0; }
  .milestone-description { font-size: 16px; max-width: 580px; line-height: 1.55; }
  .milestone-quote { top: 55px; left: auto; right: 5%; width: 180px; font-size: 34px; color: #b9e5ff; }
  .milestone-quote::after { height: 2px; width: 100px; bottom: -15px; left: 35%; }
  .milestone-backdrop { opacity: .4; }
  .milestone-award-scene { width: 45%; height: 220px; }
  .milestone-line { display: none; }
  .milestone-events { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 22px; margin-top: 40px; }
  .milestone-event { position: relative; inset: auto; width: auto; transform: none; }
  .milestone-photo { width: 95px; height: 95px; }
  .milestone-connector { height: 24px; }
  .milestone-connector::before { width: 9px; height: 9px; top: -3px; }
  .milestone-connector::after { width: 7px; height: 7px; }
  .milestone-year { font-size: 27px; margin: 5px 0; }
  .milestone-event h3 { font-size: 15px; }
  .milestone-event p { max-width: none; font-size: 13px; margin-top: 6px; line-height: 1.5; }
  .milestone-event p br { display: none; }
  .milestone-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 25px 28px; gap: 22px; }
  .milestone-metric { gap: 14px; padding: 0; min-height: 60px; }
  .milestone-metric + .milestone-metric { border: 0; }
  .milestone-metric .icon { width: 43px; height: 43px; }
  .milestone-metric p, .milestone-metric--exports p { white-space: normal; font-size: 13px; }
  .milestone-metric strong { font-size: 25px; }
}
@media (max-width: 800px) {
  .milestone-events { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 600px) {
  .milestone-main { padding: 32px 20px; }
  .milestone-heading { max-width: none; }
  .milestone-eyebrow { font-size: 10px; letter-spacing: 3px; gap: 14px; }
  .milestone-eyebrow::before { width: 27px; }
  .milestone-heading h2 { font-size: clamp(38px, 10vw, 58px); line-height: 1.02; }
  .milestone-description { font-size: 14px; }
  .milestone-award-scene { width: 65%; height: 180px; opacity: .5; }
  .milestone-quote { position: relative; inset: auto; width: 180px; margin: 30px auto 42px; font-size: 33px; color: #91c9ee; }
  .milestone-events { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 0; }
  .milestone-event { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 20px; align-items: center; text-align: left; }
  .milestone-event::before { content: ""; position: absolute; top: 44px; bottom: -75px; left: 43px; width: 2px; background: linear-gradient(#00c9ff, #008bd0); z-index: -1; }
  .milestone-event:last-child::before { display: none; }
  .milestone-photo { width: 86px; height: 86px; }
  .milestone-connector { display: none; }
  .milestone-year { margin-top: 0; font-size: 28px; }
  .milestone-event h3 { font-size: 15px; }
  .milestone-event p { font-size: 13px; }
  .milestone-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding: 26px 20px; }
  .milestone-metric { gap: 10px; justify-content: flex-start; }
  .milestone-metric .icon { width: 34px; height: 34px; }
  .milestone-metric strong { font-size: 24px; }
  .milestone-metric p, .milestone-metric--exports p { font-size: 11px; }
  .milestone-metric:last-child { grid-column: 1 / -1; justify-content: center; }
}
@media print {
  .milestone-backdrop, .milestone-line, .milestone-hills { display: none; }
}