:root {
  --navy: #062741;
  --navy-deep: #031b2d;
  --heading: #0b4b73;
  --green: #176a52;
  --text: #202428;
  --muted: #48535d;
  --white: #fff;
  --content-side: 110px;
  --font-brand: 30px;
  --font-hero-title-max: 68px;
  --font-hero-copy-max: 27px;
  --font-why-heading-max: 46px;
  --font-body-max: 25px;
  --font-approach-heading-max: 44px;
  --font-priority-heading-max: 48px;
  --font-mineral-heading-max: 32px;
  --font-cta-heading-max: 41px;
  --font-cta-copy-max: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* Header proportions are calibrated to the supplied 2048 px desktop reference. */
.site-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  height: 82px;
  display: flex;
  align-items: center;
  padding: 0 52px;
  background: transparent;
  transition: background .28s ease, box-shadow .28s ease, height .28s ease;
}
.site-header.scrolled {
  height: 68px;
  background: rgba(3, 27, 45, .94);
  box-shadow: 0 1px 12px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 19px;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
}
.brand-logo {
  width: 44px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.brand-name {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: var(--font-brand);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.45px;
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
}

.hero {
  position: relative;
  height: min(676px, 33vw);
  min-height: 560px;
  max-height: 676px;
  background-color: #082640;
  background-image: url('../images/hero-background.png');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: grid;
  align-items: center;
  overflow: hidden;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,26,48,.72) 0%, rgba(0,31,53,.50) 35%, rgba(2,23,39,.17) 76%, rgba(2,22,36,.08) 100%),
    linear-gradient(180deg, rgba(0,18,33,.25), rgba(0,18,33,.14) 72%, rgba(0,14,24,.18));
}
.hero-content {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 140px), 1860px);
  margin: 56px auto 0;
  text-align: center;
  color: #fff;
}
.hero h1 {
  margin: 0 auto 48px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(45px, 3.32vw, var(--font-hero-title-max));
  line-height: 1.06;
  letter-spacing: -.7px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}
.hero p {
  max-width: 1710px;
  margin: 0 auto;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(19px, 1.32vw, var(--font-hero-copy-max));
  line-height: 1.42;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}

.visual-strip {
  padding: 64px 0 48px;
  background: #fff;
}
.wide-frame {
  margin: 0 auto;
}
.platform-frame {
  width: min(calc(100% - 300px), 1540px);
}
.platform-frame img,
.responsibility-frame img {
  width: 100%;
  height: auto;
}

.text-section {
  background: #fff;
  padding: 48px 0 58px;
}
.text-wrap {
  width: calc(100% - (2 * var(--content-side)));
  max-width: none;
  margin: 0 auto;
}
.kicker {
  margin: 0 0 50px;
  color: #0e496e;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 700;
}
.text-section .text-wrap {
  text-align: left;
}
.text-section .text-wrap h2,
.section-title h2,
.approach-intro h2,
.approach-intro p,
.cta h2 {
  font-family: Georgia, 'Times New Roman', serif;
}
.text-section .text-wrap h2 {
  margin: 0 0 46px;
  max-width: 1760px;
  color: #4b4b4b;
  font-size: clamp(36px, 2.25vw, var(--font-why-heading-max));
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.2px;
}
.body-copy {
  margin: 0;
  color: #44484d;
  font-size: clamp(20px, 1.22vw, var(--font-body-max));
  line-height: 1.48;
}
.text-section .body-copy {
  max-width: 1800px;
}

.approach-section {
  padding: 54px 0 0;
  background: #f3f3f3;
}
.approach-intro {
  width: calc(100% - 180px);
  margin: 0 auto 44px;
  text-align: center;
}
.approach-intro h2 {
  margin: 0 0 26px;
  color: #0b4b73;
  font-size: clamp(35px, 2.15vw, var(--font-approach-heading-max));
  line-height: 1.16;
  font-weight: 700;
}
.approach-intro .body-copy {
  margin: 0 auto;
  max-width: 1600px;
  font-family: Georgia, 'Times New Roman', serif;
  color: #252525;
  font-size: clamp(21px, 1.32vw, 27px);
  line-height: 1.42;
}
.full-bleed-image {
  width: 100%;
  overflow: hidden;
}
.full-bleed-image img {
  width: 100%;
  height: auto;
}

.minerals-section {
  padding: 0 0 94px;
  background: #fff;
}
.section-title {
  width: 100%;
  margin: 0 0 32px;
  padding: 56px 40px 58px;
  text-align: center;
  background: #f3f3f3;
}
.section-title h2 {
  margin: 0;
  color: #0b4b73;
  font-size: clamp(38px, 2.35vw, var(--font-priority-heading-max));
  line-height: 1.12;
  font-weight: 700;
}
.mineral-grid {
  width: calc(100% - 220px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px 96px;
}
.mineral-item {
  min-width: 0;
  text-align: center;
}
.mineral-photo {
  width: 100%;
  aspect-ratio: 1.86 / 1;
  overflow: hidden;
  background: #fff;
}
.mineral-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.mineral-item h3 {
  margin: 25px 0 19px;
  font-family: Georgia, 'Times New Roman', serif;
  color: #3f3f3f;
  font-size: clamp(26px, 1.55vw, var(--font-mineral-heading-max));
  line-height: 1.14;
  font-weight: 700;
}
.mineral-item p {
  margin: 0 auto;
  max-width: 760px;
  color: #3f3f3f;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(17px, 1.08vw, 22px);
  line-height: 1.45;
}
.mineral-item .mineral-detail {
  max-width: 790px;
  font-size: clamp(14px, .83vw, 17px);
}

.responsibility {
  padding: 0;
  background: #fff;
}
.responsibility-frame {
  width: 100%;
  max-width: none;
}

.cta {
  position: relative;
  min-height: 590px;
  background-color: #031d34;
  background-image: url('../images/cta-minerals-background.png');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
}
.cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(1,26,47,.13) 0%, rgba(1,26,47,.08) 48%, rgba(1,20,38,.01) 100%);
}
.cta-inner {
  position: relative;
  z-index: 2;
  min-height: 590px;
  width: calc(100% - 220px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 49% 51%;
  align-items: center;
}
.cta-copy {
  align-self: center;
  padding: 28px 24px 22px 0;
}
.cta h2 {
  max-width: 810px;
  margin: 0 0 38px;
  color: #fff;
  font-size: clamp(33px, 2vw, var(--font-cta-heading-max));
  line-height: 1.52;
  font-weight: 700;
}
.cta-copy p {
  max-width: 810px;
  margin: 0;
  font-size: clamp(20px, 1.27vw, var(--font-cta-copy-max));
  line-height: 1.46;
  color: rgba(255,255,255,.97);
}
.cta-logo {
  position: absolute;
  width: 166px;
  max-height: 175px;
  object-fit: contain;
  left: 57.4%;
  top: 78px;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
}

.contact-strip {
  padding: 66px 0 58px;
  background: #fff;
}
.contact-inner {
  width: min(calc(100% - 100px), 1240px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  text-align: center;
}
.contact-inner h3 {
  margin: 0 0 12px;
  font-family: Georgia, 'Times New Roman', serif;
  color: #0b4b73;
  font-size: 24px;
}
.contact-inner p,
.contact-inner a {
  margin: 0;
  color: #444d54;
  font-size: 17px;
  text-decoration: none;
}
.contact-inner a:hover { text-decoration: underline; }
.legal-footer {
  min-height: 52px;
  padding: 16px 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f7f7f7;
  color: #71787e;
  font-size: 12px;
}

/* Keep all content visible at all times; interaction is handled by the sticky header and subtle hero parallax. */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header { transition: none; }
}

@media (max-width: 1500px) {
  :root { --content-side: 84px; }
  .platform-frame { width: min(calc(100% - 170px), 1420px); }
  .mineral-grid, .cta-inner { width: calc(100% - 168px); }
}

@media (max-width: 1100px) {
  :root { --content-side: 52px; }
  .site-header { padding: 0 28px; }
  .brand-name { font-size: 24px; }
  .brand-logo { width: 40px; height: 38px; }
  .hero { min-height: 560px; height: 560px; }
  .hero-content { width: min(calc(100% - 60px), 1600px); }
  .hero h1 { margin-bottom: 35px; }
  .platform-frame { width: calc(100% - 80px); }
  .mineral-grid, .cta-inner { width: calc(100% - 90px); }
  .cta-logo { left: 59%; width: 140px; }
}

@media (max-width: 800px) {
  :root { --content-side: 18px; }
  .site-header { height: 68px; padding: 0 18px; }
  .site-header.scrolled { height: 62px; }
  .brand { gap: 12px; }
  .brand-logo { width: 35px; height: 34px; }
  .brand-name { font-size: 18px; letter-spacing: -.2px; }
  .hero {
    min-height: 520px;
    height: 520px;
    max-height: none;
    background-position: 60% center;
  }
  .hero-content { width: calc(100% - 36px); margin-top: 42px; }
  .hero h1 { font-size: 42px; line-height: 1.08; margin-bottom: 28px; }
  .hero p { font-size: 18px; line-height: 1.45; }
  .platform-frame { width: calc(100% - 30px); }
  .visual-strip { padding: 42px 0 36px; }
  .text-section { padding: 48px 0 46px; }
  .kicker { margin-bottom: 28px; font-size: 14px; }
  .text-section .text-wrap h2 { font-size: 34px; margin-bottom: 24px; }
  .body-copy { font-size: 18px; }
  .approach-section { padding: 36px 0 0; }
  .approach-intro { width: calc(100% - 34px); margin-bottom: 26px; }
  .approach-intro h2 { font-size: 33px; }
  .approach-intro .body-copy { font-size: 18px; }
  .minerals-section { padding-bottom: 70px; }
  .section-title { padding: 42px 18px 44px; margin-bottom: 26px; }
  .section-title h2 { font-size: 36px; }
  .mineral-grid { width: calc(100% - 34px); grid-template-columns: 1fr; gap: 48px; }
  .mineral-photo { aspect-ratio: 1.5 / 1; }
  .mineral-item h3 { font-size: 29px; margin-top: 18px; }
  .mineral-item p { font-size: 17px; }
  .cta {
    min-height: 620px;
    background-position: 63% center;
  }
  .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(1,24,43,.42);
    z-index: 1;
  }
  .cta-inner {
    z-index: 2;
    width: calc(100% - 40px);
    min-height: 620px;
    grid-template-columns: 1fr;
    align-items: end;
    padding: 160px 0 48px;
  }
  .cta-copy { padding: 0; }
  .cta h2 { font-size: 34px; line-height: 1.32; margin-bottom: 25px; }
  .cta-copy p { font-size: 18px; }
  .cta-logo {
    left: 20px;
    top: 48px;
    transform: none;
    width: 115px;
  }
  .contact-inner { width: calc(100% - 36px); grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 480px) {
  .brand-name { font-size: 16px; }
  .hero { min-height: 500px; height: 500px; }
  .hero h1 { font-size: 36px; }
  .hero p { font-size: 16px; }
  .text-section .text-wrap h2 { font-size: 30px; }
  .body-copy { font-size: 16px; }
  .approach-intro h2 { font-size: 30px; }
  .section-title h2 { font-size: 31px; }
  .mineral-photo { aspect-ratio: 1.35 / 1; }
  .cta h2 { font-size: 30px; }
}