@import url("./header-footer.css");
:root {
  --navy: #061d56;
  --deep-navy: #03143d;
  --cyan: #22a7d4;
  --cyan-bright: #28b8e4;
  --ice: #eaf8fc;
  --ink: #121a2b;
  --muted: #637083;
  --line: #dce4ea;
  --paper: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.site-header {
  align-items: center;
  background: #fff;
  display: grid;
  grid-template-columns: 180px 1fr auto;
  min-height: 88px;
  padding: 0 clamp(24px, 5vw, 80px);
  position: relative;
  z-index: 10;
}
.brand { align-items: center; display: flex; height: 70px; overflow: hidden; width: 150px; }
.brand img { height: 92px; margin-left: -1px; object-fit: contain; width: 150px; }
.desktop-nav { align-items: stretch; display: flex; gap: clamp(22px, 3vw, 46px); height: 88px; justify-content: center; }
.desktop-nav a { align-items: center; color: #384355; display: flex; font-size: 14px; font-weight: 700; position: relative; }
.desktop-nav a::after { background: var(--cyan); bottom: 0; content: ""; height: 3px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; width: 100%; }
.desktop-nav a:hover::after, .desktop-nav a.active::after { transform: scaleX(1); }
.desktop-nav a.active { color: var(--navy); }
.contact-link { background: var(--navy); color: #fff; font-size: 13px; font-weight: 800; padding: 14px 18px; text-transform: uppercase; }
.contact-link span, .primary-button span { margin-left: 8px; }

.hero {
  background: linear-gradient(118deg, var(--deep-navy) 0%, var(--navy) 57%, #0a3474 100%);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 430px;
  overflow: hidden;
  padding: 128px clamp(24px, 7vw, 110px) 72px;
  position: relative;
}
.hero::after {
  background: var(--cyan);
  bottom: -250px;
  content: "";
  height: 440px;
  opacity: .96;
  position: absolute;
  right: -100px;
  transform: rotate(-13deg);
  width: 58%;
}
.hero-grid {
  background-size: 48px 48px;
  inset: 0;
  mask-image: linear-gradient(90deg, transparent 0, black 40%, black 100%);
  position: absolute;
}
.hero-copy, .hero-meta { position: relative; z-index: 2; }
.eyebrow { color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .22em; margin: 0 0 20px; text-transform: uppercase; }
.eyebrow.light { color: #75ddf7; }
.hero h1 { font-size: clamp(55px, 7.8vw, 104px); letter-spacing: -.055em; line-height: .92; margin: 0; max-width: 800px; }
.hero-intro { color: #cfdaea; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.55; margin: 32px 0 0; max-width: 700px; }
.hero-meta { align-self: end; border-left: 1px solid rgba(255,255,255,.35); display: flex; flex-direction: column; padding-left: 26px; width: 230px; }
.hero-meta span { color: #9edff2; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.hero-meta strong { font-size: 32px; letter-spacing: -.04em; margin: 8px 0 6px; }
.hero-meta small { color: #b9c8d9; font-size: 12px; }

.latest { margin: 0 auto; max-width: 1240px; padding: 86px 28px 110px; }
.section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 34px; }
.section-heading .eyebrow { margin-bottom: 12px; }
.section-heading h2 { color: var(--navy); font-size: clamp(34px, 4vw, 54px); letter-spacing: -.045em; line-height: 1; margin: 0; }
.section-note { color: var(--muted); font-size: 14px; margin: 0 0 4px; }
.featured-card { border: 1px solid var(--line); display: grid; grid-template-columns: minmax(300px, .72fr) 1.28fr; min-height: 470px; }
.release-art { background: var(--ice); color: var(--navy); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 38px; position: relative; }
.release-art::before { border: 64px solid rgba(34,167,212,.12); border-radius: 50%; content: ""; height: 450px; left: 38%; position: absolute; top: -105px; width: 450px; }
.release-art::after { background: var(--cyan); bottom: -54px; content: ""; height: 150px; left: -20px; position: absolute; transform: rotate(-8deg); width: 120%; }
.release-art > span { font-size: 14px; font-weight: 800; letter-spacing: .18em; line-height: 1.45; position: relative; text-transform: uppercase; z-index: 1; }
.release-date { font-size: 54px; font-weight: 800; letter-spacing: -.06em; line-height: .76; position: relative; z-index: 1; }
.featured-content { display: flex; flex-direction: column; justify-content: center; padding: clamp(38px, 6vw, 78px); }
.content-meta { color: var(--cyan); display: flex; font-size: 11px; font-weight: 800; gap: 20px; letter-spacing: .12em; margin-bottom: 22px; text-transform: uppercase; }
.content-meta span + span { color: #7c8795; }
.featured-content h3 { color: var(--navy); font-size: clamp(29px, 3.3vw, 48px); letter-spacing: -.045em; line-height: 1.06; margin: 0; max-width: 760px; }
.featured-content p { color: #566274; font-size: 16px; line-height: 1.7; margin: 26px 0 32px; max-width: 710px; }
.card-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 24px; }
.primary-button { background: var(--navy); color: #fff; display: inline-flex; font-size: 12px; font-weight: 800; letter-spacing: .06em; padding: 17px 21px; text-transform: uppercase; }
.primary-button:hover, .contact-link:hover { background: var(--cyan); }
.text-link { border-bottom: 1px solid var(--navy); color: var(--navy); font-size: 13px; font-weight: 800; padding: 4px 0; }

.statement { background: #f6f8fa; border-top: 1px solid var(--line); padding: 110px clamp(24px, 7vw, 110px) 120px; scroll-margin-top: 24px; }
.statement-header { margin: 0 auto 72px; max-width: 1180px; }
.back-link { color: var(--cyan); display: inline-flex; font-size: 12px; font-weight: 800; gap: 10px; letter-spacing: .08em; margin-bottom: 68px; text-transform: uppercase; }
.statement-kicker { align-items: center; color: var(--muted); display: flex; font-size: 11px; font-weight: 800; gap: 22px; letter-spacing: .13em; margin-bottom: 22px; text-transform: uppercase; }
.statement-kicker span { color: var(--cyan); }
.statement-kicker span::after { background: #aeb8c4; content: ""; display: inline-block; height: 1px; margin-left: 22px; vertical-align: middle; width: 34px; }
.statement-header h1, .statement-header h2 { color: var(--navy); font-size: clamp(43px, 6.3vw, 86px); letter-spacing: -.06em; line-height: .98; margin: 0; max-width: 1100px; }
.statement-deck { color: #5b6879; font-size: clamp(18px, 2vw, 24px); line-height: 1.55; margin: 34px 0 0; max-width: 880px; }
.statement-layout { align-items: start; display: grid; gap: clamp(55px, 8vw, 130px); grid-template-columns: 270px minmax(0, 740px); margin: 0 auto; max-width: 1180px; }
.statement-aside { position: sticky; top: 28px; }
.key-fact { background: var(--navy); color: #fff; padding: 28px 26px 30px; }
.fact-number { color: #76dff7; display: block; font-size: 76px; font-weight: 800; letter-spacing: -.08em; line-height: .8; }
.key-fact p { font-size: 13px; font-weight: 700; line-height: 1.45; margin: 18px 0 0; }
.aside-block { border-bottom: 1px solid #d6dee5; display: flex; flex-direction: column; gap: 7px; padding: 25px 2px; }
.aside-title { color: #8792a0; font-size: 10px; font-weight: 800; letter-spacing: .15em; margin: 0 0 4px; text-transform: uppercase; }
.aside-block strong, .aside-block a { color: var(--navy); font-size: 14px; }
.aside-block span { color: var(--muted); font-size: 12px; }
.download-card { background: var(--cyan); color: var(--deep-navy); display: flex; flex-direction: column; gap: 7px; margin-top: 26px; padding: 20px 22px; }
.download-card span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.download-card strong { font-size: 14px; }
.statement-body { color: #303b4b; font-family: Georgia, 'Times New Roman', serif; font-size: 18px; line-height: 1.85; }
.statement-body p { margin: 0 0 27px; }
.statement-body .dateline { font-size: 20px; }
.statement-body .emphasis { border-left: 4px solid var(--cyan); color: var(--navy); font-family: Arial, Helvetica, sans-serif; font-size: 21px; font-weight: 800; line-height: 1.55; margin: 42px 0; padding: 8px 0 8px 28px; }
blockquote { background: var(--navy); color: #fff; margin: 52px -42px; padding: 48px 50px; position: relative; }
blockquote::before { color: var(--cyan); content: "“"; font-family: Georgia, serif; font-size: 110px; left: 30px; line-height: 1; opacity: .6; position: absolute; top: 15px; }
blockquote p { font-size: 24px; line-height: 1.55; margin: 20px 0 30px !important; position: relative; }
blockquote cite { color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-style: normal; font-weight: 800; }
blockquote cite span { color: #a9bad0; font-size: 11px; font-weight: 500; }
.statement-end { color: var(--navy); font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 900; letter-spacing: .22em; margin-top: 48px; text-transform: uppercase; }

.media-cta { align-items: center; background: var(--deep-navy); color: #fff; display: flex; justify-content: space-between; padding: 70px clamp(24px, 7vw, 110px); }
.media-cta .eyebrow { margin-bottom: 13px; }
.media-cta h2 { font-size: clamp(35px, 4.5vw, 58px); letter-spacing: -.05em; line-height: 1; margin: 0; }
.media-cta p:not(.eyebrow) { color: #b5c3d3; line-height: 1.55; margin: 20px 0 0; max-width: 620px; }
.media-cta > a { background: var(--cyan); color: var(--deep-navy); flex: 0 0 auto; font-size: 12px; font-weight: 900; letter-spacing: .06em; margin-left: 36px; padding: 19px 22px; text-transform: uppercase; }
.site-footer { background: #fff; display: grid; gap: 50px; grid-template-columns: 1fr auto; padding: 70px clamp(24px, 7vw, 110px) 34px; }
.footer-brand img { height: 100px; margin: -22px 0 -2px; object-fit: contain; width: 170px; }
.footer-brand p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; max-width: 380px; }
.footer-links { display: flex; gap: clamp(60px, 8vw, 120px); }
.footer-links div { display: flex; flex-direction: column; gap: 10px; min-width: 110px; }
.footer-links span { color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .16em; margin-bottom: 6px; text-transform: uppercase; }
.footer-links a { color: var(--navy); font-size: 13px; font-weight: 700; }
.copyright { border-top: 1px solid var(--line); color: #8a94a1; font-size: 11px; grid-column: 1 / -1; margin: 10px 0 0; padding-top: 24px; }

@media (max-width: 850px) {
  .site-header { grid-template-columns: 1fr auto; min-height: 76px; }
  .desktop-nav { display: none; }
  .brand { height: 62px; }
  .hero { grid-template-columns: 1fr; min-height: 500px; }
  .hero-meta { align-self: auto; margin-top: 48px; }
  .featured-card { grid-template-columns: 1fr; }
  .release-art { min-height: 310px; }
  .statement-layout { grid-template-columns: 1fr; }
  .statement-aside { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; position: static; }
  .key-fact { grid-row: span 2; }
  .aside-block { padding: 8px 2px 18px; }
  .download-card { margin-top: 0; }
  .media-cta { align-items: flex-start; flex-direction: column; gap: 34px; }
  .media-cta > a { margin-left: 0; }
}
@media (max-width: 580px) {
  .site-header { padding: 0 18px; }
  .brand { width: 123px; }
  .brand img { height: 78px; width: 125px; }
  .contact-link { font-size: 10px; padding: 12px 14px; }
  .hero { min-height: 520px;  }
  .hero h1 { font-size: 58px; }
  .latest { padding: 66px 18px 80px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
  .featured-content { padding: 35px 26px 42px; }
  .release-art { min-height: 270px; padding: 28px; }
  .release-date { font-size: 46px; }
  .statement { padding: 80px 20px 90px; }
  .back-link { margin-bottom: 45px; }
  .statement-header { margin-bottom: 48px; }
  .statement-header h1, .statement-header h2 { font-size: 43px; }
  .statement-aside { display: flex; flex-direction: column; }
  .statement-body { font-size: 17px; line-height: 1.75; }
  .statement-body .dateline { font-size: 18px; }
  .statement-body .emphasis { font-size: 18px; margin: 35px 0; padding-left: 20px; }
  blockquote { margin: 42px -20px; padding: 42px 28px; }
  blockquote p { font-size: 20px; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-links { gap: 45px; }
}