* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
body, h1, h2, h3, p, figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  translate: 0 -200%;
  background: var(--surface);
  color: var(--ink);
  font-weight: var(--weight-bold);
}
.skip-link:focus { translate: 0; }
.wrap { width: min(100% - (2 * var(--gutter)), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-pad); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.035em;
}
h1 { font-size: var(--step-5); line-height: var(--leading-tight); }
h2 { font-size: var(--step-3); line-height: var(--leading-heading); }
h3 { font-size: var(--step-2); line-height: 1.15; }
.eyebrow {
  margin-bottom: var(--space-4);
  color: var(--brand-navy);
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
}
.eyebrow--on-dark { color: var(--brand-sky); }
.section-heading { max-width: 16ch; }
.lead { max-width: var(--measure); color: var(--ink-muted); font-size: var(--step-1); }

.btn {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.75rem 1.25rem;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition), translate var(--transition);
}
.btn:hover { translate: 0 -2px; }
.btn--primary { background: var(--brand-green); color: var(--brand-navy-dark); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--surface); }
.btn--secondary { border-color: var(--border); background: transparent; color: var(--brand-navy); }
.btn--secondary:hover, .btn--secondary:focus-visible { border-color: var(--brand-navy); background: var(--surface); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: rgb(242 242 242 / 94%);
  backdrop-filter: blur(12px);
}
.site-header .wrap {
  display: flex;
  min-height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.brand { flex: 0 1 13rem; }
.brand img { width: 100%; max-height: 3.25rem; object-fit: contain; object-position: left center; }
.site-nav, .social-links { display: flex; align-items: center; gap: var(--space-4); }
.site-nav a:not(.btn) {
  color: var(--ink-muted);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.site-nav a:not(.btn):hover { color: var(--brand-navy); }

.hero { overflow: hidden; background: var(--surface); }
.hero__layout {
  display: grid;
  min-height: clamp(36rem, calc(100svh - var(--header-height)), 45rem);
  grid-template-columns: minmax(0, 1.08fr) minmax(24rem, 0.92fr);
  align-items: stretch;
}
.hero__content {
  display: flex;
  max-width: 43rem;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(3rem, 6vw, 5rem) max(var(--gutter), calc((100vw - var(--container)) / 2));
}
.hero__title { max-width: 10.5ch; color: var(--brand-navy); }
.hero__title span { color: var(--brand-sky); }
.hero__lead { max-width: 27ch; margin-top: var(--space-6); color: var(--ink-muted); font-size: var(--step-1); }
.hero__lead strong { color: var(--brand-navy); font-weight: var(--weight-bold); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__number { width: min(13rem, 58%); margin-top: var(--space-6); }
.hero__media { position: relative; min-height: 36rem; overflow: hidden; background: var(--brand-sky); }
.hero__media::before {
  position: absolute;
  inset: 7% 7% auto auto;
  z-index: 1;
  width: 7rem;
  aspect-ratio: 1;
  border: 2px solid rgb(25 56 138 / 20%);
  border-radius: 50%;
  content: "+";
  color: var(--brand-navy);
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: var(--weight-bold);
  line-height: 0.92;
  text-align: center;
}
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.hero__quote {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-6);
  left: var(--space-6);
  max-width: 22rem;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 0.25rem;
  padding: var(--space-5);
  background: var(--brand-navy);
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.3vw, 1.75rem);
  font-weight: var(--weight-bold);
  line-height: 1.1;
}

.purpose { background: var(--brand-navy); color: var(--on-dark); }
.purpose__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}
.purpose h2 { max-width: 12ch; }
.purpose__body { max-width: var(--measure); color: var(--on-dark-muted); font-size: var(--step-1); }
.purpose__body p + p { margin-top: var(--space-5); }
.purpose__principle {
  margin-top: var(--space-7);
  border-left: 3px solid var(--brand-green);
  padding-left: var(--space-5);
  color: var(--on-dark);
  font-weight: var(--weight-bold);
}

.territories { background: var(--bg); }
.territories__intro {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-7);
  align-items: end;
}
.territories__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}
.territory-card {
  display: flex;
  min-height: 22rem;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  background: var(--surface);
}
.territory-card:nth-child(2) { background: var(--surface-sky); }
.territory-card:nth-child(3) { background: var(--surface-green); }
.territory-card__index { color: var(--brand-navy); font-size: var(--step--1); font-weight: var(--weight-bold); }
.territory-card h3 { margin-top: auto; color: var(--brand-navy); }
.territory-card p { margin-top: var(--space-4); color: var(--ink-muted); }

.story { background: var(--surface); }
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(3rem, 8vw, 7rem);
  align-items: center;
}
.story__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-xl); background: var(--brand-sky); }
.story__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.story__content h2 { max-width: 13ch; color: var(--brand-navy); }
.story__content .lead { margin-top: var(--space-6); }
.story__points { display: grid; gap: var(--space-5); margin: var(--space-7) 0 0; padding: 0; list-style: none; }
.story__points li { border-top: 1px solid var(--border); padding-top: var(--space-5); }
.story__points strong { display: block; margin-bottom: var(--space-2); color: var(--brand-navy); }

.neuro { overflow: clip; background: var(--surface-sky); }
.neuro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(19rem, 0.9fr);
  gap: clamp(3rem, 8vw, 7rem);
  align-items: center;
}
.neuro h2 { max-width: 13ch; color: var(--brand-navy); }
.neuro .lead { margin-top: var(--space-6); }
.neuro__media { aspect-ratio: 4 / 5; overflow: hidden; border: 0.75rem solid var(--surface); border-radius: var(--radius-xl); rotate: 2deg; }
.neuro__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }

.social-feed { background: var(--bg); }
.social-feed__intro {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-7);
  align-items: end;
}
.social-feed__title { max-width: 15ch; color: var(--brand-navy); }
.social-feed__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-8); }
.social-embed { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); }
.social-embed__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px solid var(--border);
  padding: var(--space-5);
}
.social-embed__network {
  color: var(--brand-navy);
  font-size: var(--step--1);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.social-embed__header h3 { margin-top: var(--space-1); font-family: var(--font-body); font-size: var(--step-1); letter-spacing: normal; }
.social-embed__header > a { color: var(--brand-navy); font-size: var(--step--1); font-weight: var(--weight-bold); text-underline-offset: 0.2em; }
.social-embed__content { display: grid; min-height: 38.75rem; place-items: start center; overflow: hidden; background: var(--surface); }
.social-embed__content--instagram { padding: var(--space-4); }
.social-embed__content .instagram-media { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
.social-embed__facebook { display: block; width: 100%; max-width: 31.25rem; border: 0; }
.social-embed__placeholder { align-self: center; max-width: 30ch; padding: var(--space-6); color: var(--ink-muted); text-align: center; }
.social-feed__privacy { max-width: 70ch; margin: var(--space-5) auto 0; color: var(--ink-muted); font-size: var(--step--1); text-align: center; }

.vote { background: var(--brand-navy); color: var(--on-dark); }
.vote__grid { display: grid; grid-template-columns: 1fr minmax(18rem, 0.7fr); gap: var(--space-8); align-items: center; }
.vote h2 { max-width: 13ch; }
.vote p:not(.eyebrow) { max-width: 45ch; margin-top: var(--space-5); color: var(--on-dark-muted); font-size: var(--step-1); }
.vote__number { width: 100%; }

.site-footer { padding-block: var(--space-7); background: var(--brand-navy-dark); color: var(--on-dark-muted); }
.site-footer .wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  font-size: var(--step--1);
}
.campaign-info { display: grid; align-content: start; gap: var(--space-1); }
.campaign-info strong { color: var(--on-dark); }
.campaign-info a { text-underline-offset: 0.2em; }
.campaign-info a:hover { color: var(--on-dark); }
.digimax-strip { padding-block: var(--space-3); background: var(--digimax-yellow); color: var(--brand-navy-dark); }
.digimax-strip .wrap { display: flex; justify-content: center; }
.digimax-credit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--step--1);
  font-weight: var(--weight-bold);
  line-height: 1;
  text-decoration: none;
  transition: opacity var(--transition);
}
.digimax-credit img { width: 2.25rem; height: 2.25rem; }
.digimax-credit:hover, .digimax-credit:focus-visible { opacity: 0.72; }

.thank-you {
  display: grid;
  min-height: 100vh;
  place-items: center;
  background: var(--brand-navy);
  color: var(--on-dark);
  text-align: center;
}
.thank-you__card {
  width: min(100% - (2 * var(--gutter)), 46rem);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 7vw, 5rem);
  background: var(--surface);
  color: var(--ink);
}
.thank-you__logo { width: min(16rem, 75%); margin: 0 auto var(--space-7); }
.thank-you h1 { max-width: 15ch; margin-inline: auto; color: var(--brand-navy); }
.thank-you .lead { margin: var(--space-5) auto var(--space-7); }
.thank-you__secondary { display: block; margin-top: var(--space-5); font-size: var(--step--1); }
.thank-you__secondary a { color: var(--brand-navy); text-underline-offset: 0.2em; }

@media (max-width: 64rem) {
  .site-nav > a:not(.btn) { display: none; }
  .hero__layout { grid-template-columns: 1fr 0.9fr; }
  .territories__grid { grid-template-columns: 1fr; }
  .territory-card { min-height: 16rem; }
}

@media (max-width: 48rem) {
  :root { --header-height: 4.5rem; }
  .brand { flex-basis: 10rem; }
  .site-nav .btn { min-height: 2.75rem; padding-inline: var(--space-4); font-size: var(--step--1); }
  .hero__layout, .purpose__grid, .territories__intro, .story__grid, .neuro__grid,
  .social-feed__intro, .social-feed__grid, .vote__grid { grid-template-columns: 1fr; }
  .hero__content { min-height: 0; padding: 2.5rem var(--gutter); }
  .hero__media { min-height: 24rem; }
  .hero__number { width: min(11rem, 54%); margin-top: var(--space-5); }
  .hero__media::before { width: 5rem; font-size: 3.5rem; }
  .hero__quote { right: var(--space-4); bottom: var(--space-4); left: var(--space-4); }
  .story__media { order: 2; }
  .neuro__media { max-width: 26rem; margin-inline: auto; }
  .social-embed__content { min-height: 0; }
  .social-embed__placeholder { min-height: 20rem; }
  .vote__number { max-width: 25rem; }
  .site-footer .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 30rem) {
  .site-nav .btn { display: none; }
  .hero__actions .btn { width: 100%; }
  .site-footer .wrap { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}