/* RecycleOn — design system
   Layout, type and motion language follow the depoly.fiftyseven.co reference:
   cream canvas, hairline grid, mono tags, oversized light grotesk display type,
   stat rows, 01–04 accordion, draggable strip, hairline card grid, tinted footer.
   Brand colours: Blue #0083CA (PMS 2195), Green #00A649 (PMS 2426).
   State colours: California #FDB515, Colorado #002868, Oregon #325025. */

/* Brand fonts, self-hosted: Montserrat Black for display headings, Circular XX Medium for everything else */
@font-face {
  font-family: "Circular XX";
  src: url("../fonts/CircularXX-Medium.woff2") format("woff2"), url("../fonts/CircularXX-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Black.woff2") format("woff2"), url("../fonts/Montserrat-Black.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  --bg: #EEF0E9;
  --bg-2: #F6F7F2;
  --ghost: #F8F9F4;
  --line: #D5D9CF;
  --line-strong: rgba(11, 34, 48, .2);
  --ink: #0B2230;
  --ink-70: rgba(11, 34, 48, .7);
  --ink-50: rgba(11, 34, 48, .5);
  --ink-10: rgba(11, 34, 48, .1);
  --blue: #0083CA;
  --blue-deep: #006BA6;
  --blue-pale: #D7EBF7;
  --green: #00A649;
  --green-deep: #008A3D;
  --green-pale: #DCF3E3;
  --ca: #FDB515;
  --co: #002868;
  --or: #325025;
  --foot: #CCDCE6;
  --font: "Circular XX", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Montserrat", "Circular XX", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Circular XX", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-2: cubic-bezier(.71, 0, 0, 1);
  --gutter: 5.3333vw;
  --restrict: 89.3333vw;
  --nav-h: 18vw;
  --body: 4.2667vw;
  --small: 3.4667vw;
}

@media (min-width: 1024px) {
  :root {
    --gutter: 2.0833vw;
    --restrict: 95.8333vw;
    --nav-h: 5.2vw;
    --body: clamp(15px, 1.1458vw, 22px);
    --small: clamp(12px, .8333vw, 15px);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  font-feature-settings: normal; /* no stylistic sets: keep Montserrat and Circular in their default letterforms */
  scrollbar-width: none;
  overscroll-behavior: none;
}
html::-webkit-scrollbar { display: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--body);
  line-height: 1.5;
  font-weight: 500;
  font-synthesis: none; /* Circular ships in one weight; never fake bold/italic */
  min-height: 100vh;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--green-pale); color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Utilities */
.restrict { width: var(--restrict); margin: 0 auto; }
.mono { font-family: var(--mono); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.border-top { border-top: 1px solid var(--line-strong); }
.border-bottom { border-bottom: 1px solid var(--line-strong); }
.d-hide { display: none !important; }
@media (min-width: 1024px) {
  .d-hide { display: revert !important; }
  .m-hide { display: none !important; }
}
.grid-bg {
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 0), linear-gradient(180deg, var(--line) 1px, transparent 0);
  background-size: 12.8vw 10.4vw;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 1024px) { .grid-bg { background-size: 3.854vw 2.52vw; } }

/* Tag with dot (section label) */
.tag {
  position: relative;
  display: inline-block;
  font-size: 3.4667vw;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.1;
  text-transform: uppercase;
  padding-left: 6.1333vw;
  padding-top: 1.5px;
  white-space: nowrap;
}
.tag::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 4.5333vw; height: 4.5333vw;
  border-radius: 50%;
  background: var(--green);
}
.tag.tag-blue::before { background: var(--blue); }
.tag.tag-ink::before { background: var(--ink); }
@media (min-width: 1024px) {
  .tag { font-size: clamp(11px, .9375vw, 16px); padding-left: 1.71875vw; }
  .tag::before { width: 1.0417vw; height: 1.0417vw; }
}

/* Pill label (uppercase chip) */
.chip {
  display: inline-block;
  background: var(--line);
  border-radius: 2.1333vw;
  font-size: 3.2vw;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.9;
  text-transform: uppercase;
  padding: .6vw 2.1333vw .4vw;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.chip-blue { background: var(--blue-pale); color: var(--blue-deep); }
.chip-green { background: var(--green-pale); color: var(--green-deep); }
.chip-outline { background: transparent; border: 1px solid var(--line); }
@media (min-width: 1024px) {
  .chip { font-size: clamp(10px, .7292vw, 13px); border-radius: .5208vw; padding: .2vw .625vw .1vw; }
}

/* Buttons — pill with vertical text swap on hover */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  height: 12.8vw;
  padding: 0 6.4vw;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 3.7333vw;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
  border: 1px solid transparent;
}
.btn-inner { position: relative; display: block; overflow: hidden; line-height: 1.15; }
.btn-txt { position: relative; display: block; transition: transform 1.125s var(--ease); }
.btn-txt::after {
  content: attr(data-content);
  position: absolute; left: 0; top: 120%; white-space: nowrap;
  transition: transform 1.125s var(--ease);
}
.btn:hover .btn-txt { transform: translateY(-120%); }
.btn:hover { background: var(--blue); }
.btn-blue { background: var(--blue); }
.btn-blue:hover { background: var(--green); }
.btn-ink { background: var(--ink); }
.btn-ink:hover { background: var(--green); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-pale { background: var(--green-pale); color: var(--ink); }
.btn-pale:hover { background: var(--green); color: #fff; }
.btn-sm { height: 9.6vw; padding: 0 4.8vw; font-size: 3.2vw; }
.btn svg { width: 1em; height: 1em; }
@media (min-width: 1024px) {
  .btn { height: 3.125vw; padding: 0 1.9792vw; font-size: clamp(12px, .8854vw, 16px); }
  .btn-sm { height: 2.5vw; padding: 0 1.3vw; font-size: clamp(11px, .78vw, 14px); }
}
.text-link {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 600; font-size: var(--small);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: .15em;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.text-link:hover { border-color: var(--blue); color: var(--blue-deep); }
.inline-link { color: var(--blue-deep); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.inline-link:hover { color: var(--green-deep); }

/* Loader */
#loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 4vw;
}
#loader .loader-mark { width: 22vw; max-width: 120px; opacity: 0; transform: scale(.85); }
#loader .loader-bar { width: 26vw; max-width: 160px; height: 1px; background: var(--line-strong); position: relative; overflow: hidden; }
#loader .loader-bar::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
#loader .loader-count { font-family: var(--mono); font-size: var(--small); letter-spacing: .08em; color: var(--ink-50); }
body.is-loaded #loader { pointer-events: none; }

/* Page wipe for route transitions */
#wipe {
  position: fixed; inset: 0; z-index: 99; pointer-events: none;
  display: grid; grid-template-rows: 1fr 1fr;
}
#wipe span { display: block; transform: scaleY(0); transform-origin: top; }
#wipe span:first-child { background: var(--blue); }
#wipe span:last-child { background: var(--green); transform-origin: bottom; }

/* Nav */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: var(--bg);
  transition: transform 1.5s var(--ease);
  backface-visibility: hidden;
}
#nav.hidden { transform: translate3d(0, -100%, 0); }
#nav.active { transform: none; }
#nav-inner {
  position: relative;
  width: var(--restrict); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 5.3333vw 0;
}
#nav-inner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--line); opacity: 0; transition: opacity .75s;
}
#nav.has-line #nav-inner::after { opacity: 1; }
#nav-left { display: flex; align-items: center; gap: 4vw; }
#nav-logo { display: block; height: 7.4vw; width: auto; }
#nav-logo img { height: 100%; width: auto; }
#nav-sep { width: 0; height: 4.8vw; border-right: 1px solid var(--ink); opacity: .2; }
.dropdown { position: relative; }
.dropdown-btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: 3.2vw; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: .6em 0;
}
.dropdown-btn svg { width: .9em; height: .9em; transition: transform .5s var(--ease); }
.dropdown.open .dropdown-btn svg { transform: rotate(180deg); }
.dropdown-menu {
  position: absolute; top: calc(100% + .4vw); left: 0; min-width: 44vw;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 1.6vw;
  padding: 1.6vw 0; z-index: 5;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .4s var(--ease), transform .6s var(--ease);
  max-height: 70vh; overflow: auto;
}
.dropdown.open .dropdown-menu { opacity: 1; transform: none; pointer-events: all; }
.dropdown-menu a, .dropdown-menu span {
  display: block; padding: 2vw 4vw; font-size: 3.4667vw; line-height: 1.3; white-space: nowrap;
  transition: background-color .3s;
}
.dropdown-menu a:hover { background: var(--green-pale); }
.dropdown-menu .current { color: var(--ink-50); }
.lang-code { display: inline-block; min-width: 1.6em; }
.dropdown-menu.right { left: auto; right: 0; }
#nav-right { display: flex; align-items: center; gap: 3vw; }
#nav-links { display: none; }
.nav-link {
  position: relative; display: block; padding: 1.0417vw;
  font-size: clamp(11px, .8333vw, 15px); font-weight: 600; letter-spacing: .01em; line-height: 1.1; white-space: nowrap;
}
.nav-link::after {
  content: ""; position: absolute; left: 50%; bottom: -.1vw;
  width: .2604vw; height: .2604vw; min-width: 4px; min-height: 4px; border-radius: 50%;
  background: var(--ink); opacity: 0; transform: translateX(-50%) scale(0);
  transition: opacity .6s var(--ease), transform 1s var(--ease);
}
.nav-link:hover::after, .nav-item.active .nav-link::after { opacity: 1; transform: translateX(-50%) scale(1); }
.nav-item.active .nav-link::after { background: var(--green); }
#nav-cta { display: none; }
#nav-trigger {
  position: relative; width: 8.5333vw; height: 8.5333vw;
}
#nav-trigger::before, #nav-trigger::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6.4vw; height: 2px; background: var(--ink);
  transition: transform .7s var(--ease);
}
#nav-trigger::before { transform: translate3d(-50%, -150%, 0); }
#nav-trigger::after { transform: translate3d(-50%, 150%, 0); }
#nav.active #nav-trigger::before { transform: translate3d(-50%, -50%, 0) rotate(45deg); }
#nav.active #nav-trigger::after { transform: translate3d(-50%, -50%, 0) rotate(-45deg); }
#m-menu {
  position: fixed; inset: 0; top: 0; z-index: 85; background: var(--bg);
  padding: 24vw var(--gutter) 8vw; display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transition: opacity .5s var(--ease);
  overflow: auto;
}
#m-menu .grid-bg { position: absolute; inset: auto var(--gutter) 8vw; height: 46vw; opacity: .7; pointer-events: none; }
#nav.active ~ #m-menu, #m-menu.open { opacity: 1; pointer-events: all; }
#m-menu ul { display: flex; flex-direction: column; gap: 5vw; margin-top: 4vw; }
#m-menu li { opacity: .3; transform: translateY(12px); transition: opacity .8s var(--ease), transform 1s var(--ease); }
#m-menu.open li { opacity: 1; transform: none; }
#m-menu li.active { opacity: 1; }
#m-menu li:nth-child(2) { transition-delay: .05s; } #m-menu li:nth-child(3) { transition-delay: .1s; }
#m-menu li:nth-child(4) { transition-delay: .15s; } #m-menu li:nth-child(5) { transition-delay: .2s; } #m-menu li:nth-child(6) { transition-delay: .25s; }
#m-menu a.m-link { display: flex; align-items: center; justify-content: space-between; font-size: 8.5vw; font-weight: 600; letter-spacing: -.01em; line-height: 1; }
#m-menu li.active a.m-link::after { content: ""; width: 2.4vw; height: 2.4vw; border-radius: 50%; background: var(--green); }
#m-menu .m-states { margin-top: auto; position: relative; display: flex; gap: 2vw; flex-wrap: wrap; padding-top: 8vw; }
@media (min-width: 1024px) {
  #nav-inner { padding: 2.0833vw 0; }
  #nav-left { gap: 2.6vw; }
  #nav-logo { height: 2.3vw; }
  #nav-sep { height: .9375vw; }
  .dropdown-btn { font-size: clamp(10px, .7292vw, 13px); }
  .dropdown-menu { min-width: 12vw; border-radius: .5vw; padding: .5vw 0; }
  .dropdown-menu a, .dropdown-menu span { padding: .5vw 1.1vw; font-size: clamp(12px, .8333vw, 15px); }
  #nav-right { gap: 1.5vw; }
  #nav-links { display: flex; align-items: center; gap: 1.2vw; }
  #nav-cta { display: inline-flex; }
  #nav-trigger, #m-menu { display: none; }
}

/* Main / sections */
main { display: block; }
.section { padding: 16vw 0; }
.section-sm { padding: 10.6667vw 0; }
@media (min-width: 1024px) {
  .section { padding: 6.5vw 0; }
  .section-sm { padding: 4.4vw 0; }
}

/* Hero */
.hero { position: relative; padding-top: var(--nav-h); }
.hero-head { position: relative; padding-top: 14vw; }
.hero-grid { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.hero-tag { position: relative; text-align: right; font-size: 3.7333vw; letter-spacing: .05em; line-height: 1; margin-bottom: 4vw; color: var(--ink-70); }
.hero-title {
  position: relative;
  font-size: 12.8vw; font-weight: 400; letter-spacing: -.05em; line-height: 1;
  width: 100%;
  margin-bottom: 6.9333vw;
}
.hero-title .l-line { padding-bottom: .04em; margin-top: -.03em; }
.hero-lead {
  position: relative;
  display: grid; gap: 4vw;
  font-size: 4.2667vw; line-height: 1.45;
  max-width: 60ch;
  margin-bottom: 6.4vw;
}
.hero-lead .lead-big { font-size: 5.3vw; letter-spacing: -.01em; line-height: 1.3; }
.hero-actions { position: relative; display: flex; flex-wrap: wrap; gap: 2.4vw; margin-bottom: 10.6667vw; }
.hero-panel {
  position: relative; width: 100%; height: 86vw; overflow: hidden;
  border-radius: 1.2vw;
  background: linear-gradient(135deg, var(--blue-pale) 0%, #E9F1EC 48%, var(--green-pale) 100%);
  margin-bottom: 16vw;
  opacity: 0; transform: scale(1.06);
}
.hero-panel .panel-grid { position: absolute; inset: 0; opacity: .55; }
.hero-panel .panel-caption {
  position: absolute; left: 4vw; bottom: 4vw; z-index: 3;
  font-family: var(--mono); font-size: 2.9vw; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-70);
  background: rgba(246, 247, 242, .8); padding: 1.6vw 2.4vw; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.hero-panel .panel-pill {
  position: absolute; left: 4vw; top: 4vw; z-index: 3;
}
.hero-panel .panel-pill .btn { height: auto; max-width: calc(100vw - 20vw); white-space: normal; text-align: left; line-height: 1.3; padding: 2.4vw 4.5vw; }
.hero-panel .panel-pill .btn-txt::after { display: none; }
.hero-panel .panel-pill .btn:hover .btn-txt { transform: none; }
.hero-panel .orb { position: absolute; border-radius: 50%; will-change: transform; }
.hero-panel .orb-blue { width: 48vw; height: 48vw; right: -12vw; top: -8vw; background: var(--blue); }
.hero-panel .orb-green { width: 42vw; height: 42vw; right: 10vw; bottom: -14vw; background: var(--green); }
.hero-panel .orb-ring { width: 30vw; height: 30vw; left: 10vw; top: 22vw; border: 1px solid var(--ink); opacity: .25; background: transparent; }
.hero-panel .orb-badge { width: 32vw; height: 32vw; left: 18vw; top: 20vw; background: url("../img/on-green-badge.png") center / contain no-repeat; }
.hero-panel .panel-state { position: absolute; right: 6vw; top: 8vw; width: 46vw; height: 70vw; z-index: 2; }
.hero-panel .panel-state svg { width: 100%; height: 100%; }
@media (min-width: 1024px) {
  .hero-head { padding-top: 9.8vw; }
  .hero-tag { font-size: clamp(11px, 1.0417vw, 18px); margin-bottom: 1.25vw; }
  .hero-title { font-size: 6.25vw; margin-bottom: 2.2396vw; }
  .hero-lead { font-size: clamp(15px, 1.25vw, 24px); gap: 1.2vw; margin-bottom: 2vw; }
  .hero-lead .lead-big { font-size: clamp(20px, 1.875vw, 36px); }
  .hero-actions { gap: .625vw; margin-bottom: 4vw; }
  .hero-panel { height: 36.4583vw; border-radius: .5vw; margin-bottom: 6.5104vw; }
  .hero-panel .panel-caption { left: 1.5vw; bottom: 1.5vw; font-size: clamp(10px, .7292vw, 13px); padding: .55vw 1vw; }
  .hero-panel .panel-pill { left: 1.5vw; top: 1.5vw; }
  .hero-panel .panel-pill .btn { height: 2.5vw; max-width: none; white-space: nowrap; line-height: 1; padding: 0 1.3vw; }
  .hero-panel .panel-pill .btn-txt::after { display: block; }
  .hero-panel .panel-pill .btn:hover .btn-txt { transform: translateY(-120%); }
  .hero-panel .orb-blue { width: 24vw; height: 24vw; right: -4vw; top: -5vw; }
  .hero-panel .orb-green { width: 19vw; height: 19vw; right: 12vw; bottom: -6vw; }
  .hero-panel .orb-ring { width: 14vw; height: 14vw; left: 8vw; top: 8vw; }
  .hero-panel .orb-badge { width: 15vw; height: 15vw; left: 11vw; top: 9vw; }
  .hero-panel .panel-state { right: 4vw; top: 3vw; width: 26vw; height: 30vw; }
}

/* Hero photo: organic cut-out. Phones: full width under the buttons. Desktop: top-right behind the copy,
   with a cream fade over the band the headline crosses so the type stays legible. */
.hero-photo {
  position: relative; z-index: 0; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  margin: -2vw 0 10.6667vw;
  border-radius: 54% 46% 48% 52% / 58% 44% 56% 42%;
  animation: hero-blob 16s ease-in-out infinite alternate;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; display: block; }
.hero-head.has-photo > .hero-tag, .hero-head.has-photo > .hero-title, .hero-head.has-photo > .hero-lead, .hero-head.has-photo > .hero-actions { z-index: 1; }
@keyframes hero-blob {
  0% { border-radius: 54% 46% 48% 52% / 58% 44% 56% 42%; }
  50% { border-radius: 46% 54% 56% 44% / 48% 56% 44% 52%; }
  100% { border-radius: 52% 48% 42% 58% / 52% 48% 60% 40%; }
}
@media (min-width: 1024px) {
  .hero-photo { position: absolute; right: 0; top: 7.5vw; bottom: 2.5vw; width: 47%; margin: 0; aspect-ratio: auto; }
  .hero-photo img { object-position: 62% 45%; }
  .hero-photo::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 52%, rgba(238, 240, 233, .72) 70%, rgba(238, 240, 233, 0) 90%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, .55) 50%, transparent 62%);
    mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, .55) 50%, transparent 62%);
  }
}
@media (prefers-reduced-motion: reduce) { .hero-photo { animation: none; } }

/* Full-image hero: the photo fills the block, copy sits on a dark scrim in white */
.hero-full .hero-head {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: calc(100svh - var(--nav-h)); padding: 22vw 5vw 7vw; margin-bottom: 16vw;
  border-radius: 1.2vw; overflow: hidden; color: #fff;
}
.hero-full .hero-grid { display: none; }
.hero-full .hero-photo { position: absolute; inset: 0; z-index: 0; margin: 0; width: auto; aspect-ratio: auto; border-radius: 0; animation: none; }
.hero-full .hero-photo img { object-position: 62% 50%; }
.hero-full .hero-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: none; mask-image: none;
  background:
    linear-gradient(180deg, rgba(11, 34, 48, .28) 0%, rgba(11, 34, 48, .08) 28%, rgba(11, 34, 48, .62) 58%, rgba(11, 34, 48, .9) 100%),
    linear-gradient(90deg, rgba(11, 34, 48, .45) 0%, rgba(11, 34, 48, .15) 55%, rgba(11, 34, 48, 0) 100%);
}
.hero-full .hero-pill { position: absolute; left: 5vw; top: 5vw; z-index: 2; }
.hero-full .hero-pill .btn { height: auto; max-width: calc(100vw - 24vw); white-space: normal; text-align: left; line-height: 1.3; padding: 2.4vw 4.5vw; }
.hero-full .hero-pill .btn-txt::after { display: none; }
.hero-full .hero-pill .btn:hover .btn-txt { transform: none; }
.hero-full .hero-tag { position: absolute; right: 5vw; top: 5.6vw; margin: 0; color: rgba(255, 255, 255, .8); }
.hero-full .hero-title { color: #fff; margin-bottom: 5vw; text-shadow: 0 1px 2px rgba(11, 34, 48, .25); }
.hero-full .hero-lead { color: rgba(255, 255, 255, .92); max-width: 52ch; margin-bottom: 5.5vw; }
.hero-full .hero-actions { margin-bottom: 0; }
.hero-full .hero-actions .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .7); }
.hero-full .hero-actions .btn-outline:hover { background: #fff; color: var(--ink); border-color: #fff; }
@media (min-width: 1024px) {
  .hero-full .hero-head { min-height: calc(100vh - var(--nav-h) - 1.5vw); padding: 7vw 3.5vw 3vw; margin-bottom: 6.5104vw; border-radius: .5vw; }
  .hero-full .hero-pill { left: 1.5vw; top: 1.5vw; }
  .hero-full .hero-pill .btn { height: 2.5vw; max-width: none; white-space: nowrap; line-height: 1; padding: 0 1.3vw; }
  .hero-full .hero-pill .btn-txt::after { display: block; }
  .hero-full .hero-pill .btn:hover .btn-txt { transform: translateY(-120%); }
  .hero-full .hero-tag { right: 2vw; top: 2vw; }
  .hero-full .hero-title { font-size: 6vw; max-width: 26ch; margin-bottom: 1.8vw; }
  .hero-full .hero-lead { margin-bottom: 2vw; }
}

/* Line-split reveal */
[data-split] .l-line { overflow: hidden; display: block; }
[data-split] .l-inner { display: block; transform: translateY(110%); will-change: transform; }
[data-split].is-split .l-inner { transition: transform 1.4s var(--ease); }
[data-split].is-in .l-inner { transform: none; }

/* Big statement */
.big-title {
  position: relative;
  font-size: 14.9333vw; font-weight: 300; letter-spacing: -.05em; line-height: 1; text-transform: uppercase;
  color: var(--ghost);
  padding: 12vw 0 6vw;
}
.big-title .l-line { color: var(--ghost); transition: color 1.2s var(--ease); white-space: nowrap; }
.big-title .l-line.is-on { color: var(--ink); }
.big-title .l-line.accent-blue.is-on { color: var(--blue); }
.big-title .l-line.accent-green.is-on { color: var(--green); }
.big-title.title-sm { font-size: 10.6vw; }
.floaters { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.floater { position: absolute; width: 22vw; height: 22vw; will-change: transform; filter: drop-shadow(0 10px 30px rgba(11, 34, 48, .18)); }
.floater svg { width: 100%; height: 100%; }
.floater.round { border-radius: 50%; overflow: hidden; }
@media (min-width: 1024px) {
  .big-title { padding: 6vw 0 3vw; font-size: 14vw; }
  .big-title.title-sm { font-size: 9.5vw; }
  .floater { width: 10vw; height: 10vw; }
}

/* Stat rows */
.stat-section {
  display: flex; flex-direction: column; gap: 8vw;
  padding: 10.6667vw 0 18.6667vw;
}
.stat-section .tag { margin-bottom: 0; }
.stat-title { font-size: 12.8vw; font-weight: 400; letter-spacing: -.06em; line-height: .9; margin-bottom: 3.2vw; }
.stat-title.sm { font-size: 9.6vw; }
.stat-title--tag { opacity: 0; transition: opacity 1.25s var(--ease) .5s; }
.stat-title--tag.fx-on { opacity: 1; }
.stat-visual { position: relative; height: 90vw; width: 100vw; left: calc(var(--gutter) * -1); display: grid; place-items: center; }
.stat-visual svg { width: 70%; height: 70%; filter: drop-shadow(0 20px 40px rgba(11, 34, 48, .16)); }
.stat-visual .visual-ring { position: absolute; width: 60vw; height: 60vw; border-radius: 50%; border: 1px solid var(--line-strong); }
.stat-visual .visual-dot { position: absolute; width: 10vw; height: 10vw; border-radius: 50%; }
.stat-side { display: flex; flex-direction: column; }
.stat-desc--title { font-size: 7.4667vw; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 4vw; }
.stat-desc--content { font-size: 4.2667vw; line-height: 1.5; display: grid; gap: 3vw; }
.stat-actions { margin-top: 6vw; display: flex; flex-wrap: wrap; gap: 2vw; }
.stat-mini { display: grid; gap: 1.2vw; }
.stat-mini .num { font-size: 10.6vw; letter-spacing: -.05em; line-height: .95; }
@media (min-width: 1024px) {
  .stat-section {
    display: grid; grid-template-columns: 14vw 1fr 1px 22vw; gap: 0 3.5vw;
    padding: 4vw 0 5.2vw; align-items: start;
  }
  .stat-section .stat-rule { width: 1px; background: var(--line-strong); align-self: stretch; }
  .stat-title { font-size: 5vw; margin-bottom: .9vw; }
  .stat-title.sm { font-size: 3.6vw; }
  .stat-visual { height: 28vw; width: 100%; left: 0; margin-top: 2vw; }
  .stat-visual .visual-ring { width: 24vw; height: 24vw; }
  .stat-visual .visual-dot { width: 3.5vw; height: 3.5vw; }
  .stat-side { padding-top: 0; min-height: 100%; }
  .stat-side .stat-num { font-size: 3.6vw; letter-spacing: -.05em; line-height: .95; margin-bottom: 1vw; }
  .stat-desc { margin-top: auto; }
  .stat-desc--title { font-size: clamp(20px, 1.9792vw, 38px); margin-bottom: 1vw; }
  .stat-desc--content { font-size: clamp(13px, .9375vw, 17px); gap: .8vw; }
  .stat-actions { margin-top: 1.6vw; gap: .5vw; }
  .stat-mini .num { font-size: 3.4vw; }
}

/* Text block / two column */
.text-block { display: grid; gap: 6vw; padding: 12vw 0; }
.text-block--title { font-size: 8.5vw; letter-spacing: -.03em; line-height: 1.05; font-weight: 400; }
.text-block--title.xl { font-size: 10.6vw; }
.text-block--lead { font-size: 5.3vw; letter-spacing: -.01em; line-height: 1.3; }
.text-block--text { display: grid; gap: 3.2vw; font-size: 4.2667vw; line-height: 1.5; max-width: 62ch; }
.text-block--actions { display: flex; flex-wrap: wrap; gap: 2.4vw; margin-top: 2vw; }
.two-col { display: grid; gap: 6vw; padding: 12vw 0; }
@media (min-width: 1024px) {
  .text-block { grid-template-columns: 14vw 1fr; gap: 0 3.5vw; padding: 5.2vw 0; }
  .text-block > .tag { grid-column: 1; }
  .text-block > .text-block--body { grid-column: 2; max-width: 64vw; display: grid; gap: 1.8vw; }
  .text-block--title { font-size: clamp(28px, 3.3vw, 64px); }
  .text-block--title.xl { font-size: clamp(32px, 4.2vw, 80px); }
  .text-block--lead { font-size: clamp(22px, 2.3vw, 44px); max-width: 60vw; }
  .text-block--text { font-size: clamp(14px, 1.0417vw, 19px); gap: 1vw; }
  .text-block--actions { gap: .625vw; }
  .two-col { grid-template-columns: 14vw 1fr 1fr; gap: 0 3.5vw; padding: 5.2vw 0; }
  .two-col > .tag { grid-column: 1; }
}

/* 01–04 accordion */
.enhanced { padding: 8vw 0 12vw; }
.enhanced-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 6vw; gap: 4vw; }
.enhanced-slides { display: flex; width: 100%; }
.enhanced-slide {
  position: relative;
  border-left: 1px solid var(--line-strong);
  height: 31.25vw; min-width: 46.875vw; width: 46.875vw;
  padding-left: 1.71875vw; overflow: clip;
  transition: all 1.33s var(--ease-2);
  cursor: pointer;
}
.enhanced-slide:not(.active) { min-width: 8.177vw; width: 8.177vw; padding-left: 1.25vw; }
.enhanced-slide:not(.active):hover { background: rgba(11, 34, 48, .03); }
.enhanced-sno { font-size: .8333vw; font-weight: 800; line-height: 1.1; margin-bottom: .1vw; transition: all 1.33s var(--ease-2); }
.enhanced-title { font-size: 2.6vw; font-weight: 400; letter-spacing: -.02em; line-height: 1; transition: all 1.33s var(--ease-2); max-width: 30vw; }
.enhanced-slide:not(.active) .enhanced-sno { font-size: .7292vw; }
.enhanced-slide:not(.active) .enhanced-title { font-size: .7292vw; font-weight: 700; opacity: 0; }
.enhanced-slide--content { position: absolute; left: 1.71875vw; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: .8854vw; }
.enhanced-desc {
  width: 20.57vw; font-size: clamp(13px, 1.1458vw, 20px); letter-spacing: .01em; line-height: 1.5; max-height: 20.83vw;
  transition: opacity .5s var(--ease-2) .5s, width 1.33s var(--ease-2);
}
.enhanced-slide:not(.active) .enhanced-desc { width: 0; opacity: 0; }
.enhanced-picture {
  position: relative; width: 20vw; height: 18vw; min-width: 20vw; display: grid; place-items: center;
  transition: transform 1.33s var(--ease-2), opacity .6s var(--ease-2);
}
.enhanced-slide:not(.active) .enhanced-picture { opacity: 0; transform: scale(.3) translate3d(-30vw, 18vw, 0); }
.enhanced-picture .glyph { width: 11vw; height: 11vw; }
.enhanced-title--vert {
  position: absolute; left: 1.25vw; bottom: 9vw; opacity: 0; pointer-events: none; transition: opacity .5s var(--ease-2);
}
.enhanced-slide:not(.active) .enhanced-title--vert { opacity: 1; }
.enhanced-title--vert > div {
  font-size: .7292vw; font-weight: 700; letter-spacing: .07em; line-height: 1.1; text-transform: uppercase;
  transform: rotate(-90deg); transform-origin: 0 0; white-space: nowrap; position: absolute; left: 0; bottom: -1.2vw;
}
/* mobile list version */
.enhanced-m--list { display: grid; }
.enhanced-m--item { border-bottom: 1px solid var(--ink-10); padding: 8vw 0; display: grid; gap: 2.1333vw; }
.enhanced-m--sno { font-size: 3.2vw; font-weight: 700; letter-spacing: .07em; }
.enhanced-m--title { font-size: 7.4667vw; letter-spacing: -.02em; line-height: 1.2; }
.enhanced-m--desc { font-size: 4.2667vw; line-height: 1.45; }
.enhanced-m--item .glyph { width: 20vw; height: 20vw; margin: 2vw 0; }
@media (min-width: 1024px) { .enhanced-m--list { display: none; } }
@media (max-width: 1023px) { .enhanced-slides { display: none; } .enhanced-head { margin-bottom: 0; } }

/* Draggable strip (process) */
.drag-wrap { position: relative; padding: 8vw 0 12vw; }
.drag-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 5vw; gap: 3vw; }
.drag-handle {
  position: absolute; z-index: 3; pointer-events: none;
  left: 50%; top: 55%; transform: translate(-50%, -50%);
  width: 20vw; height: 20vw; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 3vw; letter-spacing: .12em; text-transform: uppercase;
  transition: opacity .4s var(--ease), transform .6s var(--ease);
}
.drag-strip { position: relative; left: calc(var(--gutter) * -1); width: 100vw; overflow: hidden; cursor: grab; user-select: none; }
.drag-strip.is-dragging { cursor: grabbing; }
.drag-strip.is-dragging ~ .drag-handle, .drag-wrap:hover .drag-handle { opacity: 0; }
.drag-track { display: flex; gap: 0; padding: 0 var(--gutter); width: max-content; will-change: transform; }
.drag-item {
  position: relative; width: 64vw; min-width: 64vw; height: 72vw;
  border-left: 1px solid var(--line-strong); padding: 0 4vw 0 4vw;
  display: flex; flex-direction: column;
}
.drag-item .drag-sno { font-size: 3.2vw; font-weight: 700; letter-spacing: .07em; margin-bottom: 1vw; }
.drag-item .drag-title { font-size: 6.4vw; letter-spacing: -.02em; line-height: 1.1; }
.drag-item .drag-visual { margin-top: auto; height: 36vw; display: grid; place-items: center; }
.drag-item .drag-visual .glyph { width: 26vw; height: 26vw; }
.drag-item .drag-desc { margin-top: 4vw; font-size: 3.7333vw; line-height: 1.45; color: var(--ink-70); }
@media (min-width: 1024px) {
  .drag-wrap { padding: 3vw 0 5vw; }
  .drag-head { margin-bottom: 2vw; }
  .drag-handle { width: 6vw; height: 6vw; font-size: clamp(9px, .6771vw, 12px); }
  .drag-item { width: 24vw; min-width: 24vw; height: 26vw; padding: 0 1.5vw; }
  .drag-item .drag-sno { font-size: clamp(10px, .7292vw, 13px); margin-bottom: .3vw; }
  .drag-item .drag-title { font-size: clamp(18px, 1.875vw, 36px); }
  .drag-item .drag-visual { height: 13vw; }
  .drag-item .drag-visual .glyph { width: 9vw; height: 9vw; }
  .drag-item .drag-desc { margin-top: 1.2vw; font-size: clamp(12px, .8854vw, 16px); }
}

/* Card grid with hairlines (goals) */
.cards-grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line-strong); }
.card {
  position: relative; display: flex; flex-direction: column; gap: 4vw;
  padding: 8vw 4vw 8vw 0; border-bottom: 1px solid var(--line-strong);
  transition: background-color .5s var(--ease);
}
.card-icon { width: 12vw; height: 12vw; color: var(--ink); }
.card-icon svg { width: 100%; height: 100%; }
.card-kicker { font-size: 3.2vw; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-70); }
.card-title { font-size: 5.3vw; letter-spacing: -.02em; line-height: 1.2; font-weight: 500; }
.card-text { font-size: 3.7333vw; line-height: 1.45; color: var(--ink-70); }
.card-meta { display: flex; gap: 2vw; align-items: center; font-size: 3.2vw; color: var(--ink-50); }
a.card:hover { background: rgba(255, 255, 255, .45); }
a.card .card-arrow { position: absolute; right: 2vw; top: 8vw; width: 6vw; height: 6vw; transition: transform .8s var(--ease); }
a.card:hover .card-arrow { transform: translate(4px, -4px); }
@media (min-width: 1024px) {
  .cards-grid { grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-strong); }
  .cards-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .cards-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .card { padding: 2.2vw 1.5vw 2.6vw 1.5vw; gap: 1.2vw; border-right: 1px solid var(--line-strong); min-height: 15vw; }
  .card:first-child, .cards-grid.cols-3 .card:nth-child(3n+1) { padding-left: 0; }
  .cards-grid:not(.cols-2):not(.cols-4) .card:nth-child(3n) { border-right: 0; }
  .cards-grid.cols-2 .card:nth-child(2n) { border-right: 0; }
  .cards-grid.cols-4 .card:nth-child(4n) { border-right: 0; }
  .card-icon { width: 3.2vw; height: 3.2vw; }
  .card-kicker { font-size: clamp(10px, .7292vw, 13px); }
  .card-title { font-size: clamp(16px, 1.4vw, 26px); }
  .card-text { font-size: clamp(12px, .8854vw, 16px); }
  .card-meta { font-size: clamp(11px, .78vw, 14px); gap: .6vw; }
  a.card .card-arrow { right: 1.2vw; top: 2vw; width: 1.4vw; height: 1.4vw; }
}

/* News */
.news-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 4vw; margin-bottom: 6vw; }
.news-head .news-title { font-size: 7.4667vw; letter-spacing: -.02em; line-height: 1.1; font-weight: 400; }
.filters { display: flex; gap: 1.6vw; flex-wrap: wrap; }
.filter-pill {
  height: 9.6vw; padding: 0 4.2vw; border-radius: 999px; border: 1px solid var(--line-strong);
  font-size: 3.2vw; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.filter-pill.active, .filter-pill:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.news-card { display: flex; flex-direction: column; }
.news-card .card-meta { order: -1; }
.news-card.is-hidden { display: none; }
.news-more { display: flex; justify-content: center; padding: 8vw 0 0; }
.news-empty { padding: 8vw 0; color: var(--ink-50); display: none; }
@media (min-width: 1024px) {
  .news-head { margin-bottom: 2vw; }
  .news-head .news-title { font-size: clamp(22px, 2.3vw, 44px); }
  .filters { gap: .4vw; }
  .filter-pill { height: 2.3vw; padding: 0 1.1vw; font-size: clamp(10px, .7292vw, 13px); }
  .news-more { padding-top: 2.5vw; }
}

/* Article */
.article { padding-top: 0; }
.article-body { max-width: 72ch; display: grid; gap: 4.8vw; font-size: 4.2667vw; line-height: 1.6; }
.article-body h2, .article-body h3, .article-body h4, .article-body h5 { font-weight: 500; letter-spacing: -.02em; line-height: 1.2; margin-top: 4vw; }
.article-body h2 { font-size: 7vw; }
.article-body h3 { font-size: 5.8vw; }
.article-body h4, .article-body h5 { font-size: 4.8vw; }
.article-body ul { list-style: disc; padding-left: 1.2em; display: grid; gap: 1.6vw; }
.article-body ol { list-style: decimal; padding-left: 1.2em; display: grid; gap: 1.6vw; }
.article-body a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.article-body a:hover { color: var(--green-deep); }
.article-body blockquote { border-left: 2px solid var(--green); padding-left: 1.2em; color: var(--ink-70); margin: 0; }
.article-body hr { border: 0; border-top: 1px solid var(--line-strong); }
.article-body table { border-collapse: collapse; width: 100%; font-size: .9em; }
.article-body td, .article-body th { border-bottom: 1px solid var(--line-strong); padding: .6em .4em; text-align: left; vertical-align: top; }
.article-body strong { font-weight: 600; }
.article-body .video-link { display: inline-flex; }
.article-layout { display: grid; gap: 8vw; padding: 0 0 12vw; }
.article-aside { display: grid; gap: 3vw; align-content: start; font-size: 3.4667vw; color: var(--ink-70); }
.article-aside .aside-block { border-top: 1px solid var(--line-strong); padding-top: 3vw; display: grid; gap: 1.5vw; }
.article-aside .aside-label { font-size: 3vw; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
@media (min-width: 1024px) {
  .article-layout { grid-template-columns: 14vw 1fr 22vw; gap: 0 3.5vw; padding: 0 0 5vw; }
  .article-body { font-size: clamp(15px, 1.1458vw, 21px); gap: 1.6vw; }
  .article-body h2, .article-body h3, .article-body h4, .article-body h5 { margin-top: 1.2vw; }
  .article-body h2 { font-size: clamp(24px, 2.3vw, 44px); }
  .article-body h3 { font-size: clamp(20px, 1.8vw, 34px); }
  .article-body h4, .article-body h5 { font-size: clamp(16px, 1.3vw, 24px); }
  .article-body ul, .article-body ol { gap: .5vw; }
  .article-aside { font-size: clamp(12px, .8854vw, 16px); gap: 1vw; position: sticky; top: 7vw; }
  .article-aside .aside-block { padding-top: 1vw; gap: .5vw; }
  .article-aside .aside-label { font-size: clamp(10px, .7292vw, 13px); }
}

/* Materials list */
.item-list { display: grid; border-top: 1px solid var(--line-strong); }
.item { display: grid; gap: 2vw; padding: 6vw 0; border-bottom: 1px solid var(--line-strong); }
.item-cat { font-size: 3.2vw; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--green-deep); }
.item-title { font-size: 5.3vw; letter-spacing: -.02em; line-height: 1.25; font-weight: 500; }
.item-note { font-size: 3.7333vw; color: var(--ink-70); line-height: 1.45; }
.item-note a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: .18em; }
.item.item-no .item-cat { color: #B4231F; }
@media (min-width: 1024px) {
  .item-list.cols { grid-template-columns: repeat(3, 1fr); }
  .item-list.cols .item { border-right: 1px solid var(--line-strong); padding: 1.8vw 1.5vw 2.2vw; }
  .item-list.cols .item:nth-child(3n+1) { padding-left: 0; }
  .item-list.cols .item:nth-child(3n) { border-right: 0; }
  .item { gap: .6vw; padding: 1.8vw 0; }
  .item-cat { font-size: clamp(10px, .7292vw, 13px); }
  .item-title { font-size: clamp(16px, 1.35vw, 26px); }
  .item-note { font-size: clamp(12px, .8854vw, 16px); }
}

/* Timeline */
.timeline { display: grid; border-top: 1px solid var(--line-strong); }
.timeline-item { display: grid; gap: 2vw; padding: 6vw 0; border-bottom: 1px solid var(--line-strong); }
.timeline-date { font-family: var(--mono); font-size: 3.2vw; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep); }
.timeline-title { font-size: 5.8vw; letter-spacing: -.02em; line-height: 1.2; font-weight: 500; }
.timeline-body { display: grid; gap: 2vw; font-size: 3.7333vw; line-height: 1.5; color: var(--ink-70); }
.timeline-body ul { list-style: disc; padding-left: 1.2em; display: grid; gap: 1.5vw; }
.timeline-body a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: .18em; }
@media (min-width: 1024px) {
  .timeline-item { grid-template-columns: 14vw 1fr; gap: 0 3.5vw; padding: 2vw 0; }
  .timeline-date { font-size: clamp(11px, .8333vw, 15px); padding-top: .4vw; }
  .timeline-title { font-size: clamp(18px, 1.6vw, 30px); margin-bottom: .6vw; }
  .timeline-body { font-size: clamp(13px, .9375vw, 17px); max-width: 60vw; }
}

/* Lookup / notice boxes */
.lookup {
  display: grid; gap: 3vw; padding: 6vw; border-radius: 1.6vw;
  background: var(--bg-2); border: 1px solid var(--line);
}
.lookup-title { font-size: 4.8vw; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.lookup-row { display: flex; flex-wrap: wrap; gap: 2vw; }
.lookup-note { font-size: 3.2vw; color: var(--ink-50); }
.field-input, .lookup input {
  height: 12.8vw; padding: 0 4vw; border-radius: 999px; border: 1px solid var(--line-strong);
  background: #fff; font-size: 3.7333vw; width: 100%; min-width: 0;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.field-input:focus, .lookup input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-pale); }
.lookup input { flex: 1 1 60%; }
@media (min-width: 1024px) {
  .lookup { padding: 2vw; gap: 1vw; border-radius: .6vw; }
  .lookup-title { font-size: clamp(16px, 1.3vw, 24px); }
  .lookup-row { gap: .6vw; }
  .lookup-note { font-size: clamp(11px, .78vw, 14px); }
  .field-input, .lookup input { height: 3.125vw; padding: 0 1.2vw; font-size: clamp(13px, .9375vw, 17px); }
}

/* Forms */
.form { display: grid; gap: 4vw; }
.form-grid { display: grid; gap: 4vw; }
.field { display: grid; gap: 1.6vw; }
.field-label { font-size: 3.2vw; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-70); }
.field-label .req { color: var(--green-deep); }
textarea.field-input { height: auto; min-height: 36vw; padding: 3vw 4vw; border-radius: 3vw; resize: vertical; }
select.field-input { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B2230' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 4vw center; padding-right: 10vw; }
.field.is-invalid .field-input { border-color: #B4231F; }
.field-error { font-size: 3vw; color: #B4231F; display: none; }
.field.is-invalid .field-error { display: block; }
.form-status { display: none; padding: 4vw 5vw; border-radius: 1.6vw; background: var(--green-pale); font-weight: 500; }
.form-status.show { display: block; }
.form-note { font-size: 3.2vw; color: var(--ink-50); }
.form-row { display: flex; flex-wrap: wrap; gap: 2vw; align-items: center; }
.check { display: flex; gap: 2.4vw; align-items: flex-start; font-size: 3.4667vw; line-height: 1.4; }
.check input { width: 5.3vw; height: 5.3vw; margin: .3vw 0 0; accent-color: var(--green); }
@media (min-width: 1024px) {
  .form { gap: 1.4vw; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: 1.2vw; }
  .form-grid .span-2 { grid-column: span 2; }
  .field { gap: .5vw; }
  .field-label { font-size: clamp(10px, .7292vw, 13px); }
  textarea.field-input { min-height: 10vw; padding: 1vw 1.2vw; border-radius: 1vw; }
  select.field-input { background-position: right 1.2vw center; padding-right: 3vw; }
  .field-error { font-size: clamp(11px, .78vw, 13px); }
  .form-status { padding: 1.2vw 1.5vw; border-radius: .6vw; }
  .form-note { font-size: clamp(11px, .78vw, 14px); }
  .form-row { gap: .6vw; }
  .check { font-size: clamp(12px, .8854vw, 15px); gap: .8vw; }
  .check input { width: 1.1vw; height: 1.1vw; }
}

/* Map */
.map-wrap { position: relative; }
#us-map { width: 100%; height: auto; }
#us-map path {
  fill: var(--bg-2); stroke: var(--line-strong); stroke-width: .6; vector-effect: non-scaling-stroke;
  transition: fill .5s var(--ease), stroke .5s var(--ease), opacity .8s var(--ease), transform .9s var(--ease);
  transform-box: fill-box; transform-origin: center;
}
#us-map path.epr { fill: var(--blue-pale); stroke: var(--blue-deep); }
#us-map path.epr:hover { fill: var(--blue); }
#us-map path.live { fill: var(--green-pale); stroke: var(--green-deep); cursor: pointer; }
#us-map path.live:hover { fill: var(--green); }
#us-map path.pop { opacity: 0; transform: scale(.85); }
#us-map.is-in path.pop { opacity: 1; transform: none; }
#us-map path:focus { outline: none; stroke: var(--ink); stroke-width: 1.4; }
.map-tooltip {
  position: absolute; z-index: 4; pointer-events: none;
  background: var(--ink); color: #fff; border-radius: 999px;
  padding: 1.6vw 3vw; font-size: 3.2vw; font-weight: 500; white-space: nowrap;
  opacity: 0; transform: translate(-50%, -140%) scale(.9); transition: opacity .25s, transform .4s var(--ease);
}
.map-tooltip.show { opacity: 1; transform: translate(-50%, -140%) scale(1); }
.map-tooltip small { display: block; font-weight: 400; opacity: .7; }
.map-legend { display: flex; flex-wrap: wrap; gap: 4vw; margin-top: 4vw; font-size: 3.4667vw; }
.map-legend span { display: inline-flex; align-items: center; gap: 1.6vw; }
.map-legend i { width: 3.2vw; height: 3.2vw; border-radius: 50%; display: inline-block; }
.state-chips { display: flex; flex-wrap: wrap; gap: 1.6vw; margin-top: 3vw; }
@media (min-width: 1024px) {
  .map-tooltip { padding: .5vw 1vw; font-size: clamp(11px, .8333vw, 15px); }
  .map-legend { gap: 1.5vw; margin-top: 1.2vw; font-size: clamp(12px, .8854vw, 16px); }
  .map-legend span { gap: .5vw; }
  .map-legend i { width: .8vw; height: .8vw; }
  .state-chips { gap: .4vw; margin-top: 1vw; }
}

/* Team list */
.team { display: grid; border-top: 1px solid var(--line-strong); }
.team-member { display: flex; justify-content: space-between; align-items: baseline; gap: 4vw; padding: 4.5vw 0; border-bottom: 1px solid var(--line-strong); }
.team-name { font-size: 5.3vw; letter-spacing: -.02em; font-weight: 500; }
.team-role { font-size: 3.4667vw; color: var(--ink-70); text-align: right; }
@media (min-width: 1024px) {
  .team-member { padding: 1.4vw 0; }
  .team-name { font-size: clamp(18px, 1.6vw, 30px); }
  .team-role { font-size: clamp(12px, .9375vw, 17px); }
}

/* Simple prose (generated pages) */
.prose { display: grid; gap: 4vw; font-size: 4.2667vw; line-height: 1.6; max-width: 72ch; }
.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { font-weight: 500; letter-spacing: -.02em; line-height: 1.2; margin-top: 3vw; }
.prose h2 { font-size: 7vw; } .prose h3 { font-size: 5.8vw; } .prose h4 { font-size: 5vw; } .prose h5, .prose h6 { font-size: 4.5vw; }
.prose ul { list-style: disc; padding-left: 1.2em; display: grid; gap: 1.2vw; }
.prose ol { list-style: decimal; padding-left: 1.2em; display: grid; gap: 1.2vw; }
.prose a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--green-deep); }
.prose .pill-links { display: flex; flex-wrap: wrap; gap: 1.6vw; list-style: none; padding: 0; }
.prose .pill-links a { text-decoration: none; }
@media (min-width: 1024px) {
  .prose { font-size: clamp(14px, 1.0417vw, 19px); gap: 1.2vw; }
  .prose h2 { font-size: clamp(22px, 2vw, 40px); } .prose h3 { font-size: clamp(18px, 1.6vw, 30px); } .prose h4 { font-size: clamp(16px, 1.3vw, 24px); } .prose h5, .prose h6 { font-size: clamp(14px, 1.1vw, 20px); }
  .prose ul, .prose ol { gap: .4vw; }
  .prose .pill-links { gap: .5vw; }
}
.directory { display: grid; gap: 6vw; }
.directory-county { border-top: 1px solid var(--line-strong); padding-top: 4vw; display: grid; gap: 3vw; }
.directory-county h4 { font-size: 6.4vw; letter-spacing: -.02em; font-weight: 500; }
.directory-places { display: grid; gap: 0; }
.directory-place { display: grid; gap: 1.2vw; padding: 3vw 0; border-bottom: 1px solid var(--ink-10); }
.directory-place h5 { font-size: 4.5vw; font-weight: 500; }
.directory-place p { font-size: 3.4667vw; color: var(--ink-70); }
.directory-place .links { display: flex; flex-wrap: wrap; gap: 1.6vw; }
@media (min-width: 1024px) {
  .directory { gap: 2vw; }
  .directory-county { grid-template-columns: 22vw 1fr; gap: 0 3.5vw; padding-top: 1.5vw; }
  .directory-county h4 { font-size: clamp(20px, 1.9vw, 36px); position: sticky; top: 7vw; align-self: start; }
  .directory-places { grid-template-columns: repeat(2, 1fr); gap: 0 2vw; }
  .directory-place { padding: 1vw 0; gap: .3vw; }
  .directory-place h5 { font-size: clamp(14px, 1.1vw, 20px); }
  .directory-place p { font-size: clamp(12px, .8333vw, 15px); }
  .directory-place .links { gap: .4vw; }
}

/* Raw directory (generated from the live directory markup) */
.dir-raw { display: grid; gap: 0; }
.dir-raw h2, .dir-raw h3 { font-weight: 500; letter-spacing: -.02em; line-height: 1.2; font-size: 6.4vw; margin: 8vw 0 3vw; }
.dir-raw h4 { font-size: 6vw; font-weight: 500; letter-spacing: -.02em; border-top: 1px solid var(--line-strong); padding: 5vw 0 2vw; margin-top: 4vw; }
.dir-raw p { font-size: 3.7333vw; line-height: 1.5; color: var(--ink-70); margin: 1vw 0 3vw; max-width: 70ch; }
.dir-raw ul { display: grid; }
.dir-raw li { display: grid; gap: 1vw; padding: 3vw 0; border-bottom: 1px solid var(--ink-10); }
.dir-raw li h5 { font-size: 4.5vw; font-weight: 500; }
.dir-raw li p { margin: 0; font-size: 3.4667vw; }
.dir-raw a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.dir-raw li a { display: inline-block; text-decoration: none; font-size: 3.2vw; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--line-strong); border-radius: 999px; padding: 1.2vw 3vw; margin: 1vw 1vw 0 0; color: var(--ink); transition: background-color .4s var(--ease), color .4s var(--ease); }
.dir-raw li a:hover { background: var(--ink); color: #fff; }
.dir-raw li p a { display: inline; border: 0; padding: 0; margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--blue-deep); text-decoration: underline; font-size: inherit; }
.dir-raw li p a:hover { background: none; color: var(--green-deep); }
@media (min-width: 1024px) {
  .dir-raw h2, .dir-raw h3 { font-size: clamp(22px, 2vw, 40px); margin: 2.5vw 0 1vw; }
  .dir-raw h4 { font-size: clamp(18px, 1.6vw, 30px); padding: 1.6vw 0 .6vw; margin-top: 1vw; }
  .dir-raw p { font-size: clamp(13px, .9375vw, 17px); margin: .3vw 0 1vw; }
  .dir-raw ul { grid-template-columns: repeat(2, 1fr); gap: 0 2vw; }
  .dir-raw li { padding: 1vw 0; gap: .3vw; }
  .dir-raw li h5 { font-size: clamp(14px, 1.1vw, 20px); }
  .dir-raw li p { font-size: clamp(12px, .8333vw, 15px); }
  .dir-raw li a { font-size: clamp(10px, .7292vw, 13px); padding: .35vw .9vw; margin: .3vw .3vw 0 0; }
}

/* CTA panel */
.cta-panel {
  position: relative; overflow: hidden;
  border-radius: 2vw; padding: 10vw 6vw;
  background: var(--ink); color: #fff;
  display: grid; gap: 6vw;
}
.cta-panel .cta-title { font-size: 9.6vw; letter-spacing: -.04em; line-height: 1; font-weight: 300; }
.cta-panel .cta-text { font-size: 4.2667vw; line-height: 1.5; opacity: .8; max-width: 50ch; }
.cta-panel .cta-actions { display: flex; flex-wrap: wrap; gap: 2.4vw; }
.cta-panel .orb { position: absolute; border-radius: 50%; }
.cta-panel .orb-1 { width: 60vw; height: 60vw; right: -20vw; top: -20vw; background: var(--blue); opacity: .9; }
.cta-panel .orb-2 { width: 40vw; height: 40vw; right: 10vw; bottom: -24vw; background: var(--green); }
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel .orb { z-index: 0; }
@media (min-width: 1024px) {
  .cta-panel { border-radius: .8vw; padding: 4.5vw 4vw; grid-template-columns: 1fr 1fr; align-items: center; gap: 2vw; }
  .cta-panel .cta-title { font-size: clamp(36px, 4.2vw, 84px); }
  .cta-panel .cta-text { font-size: clamp(14px, 1.0417vw, 19px); }
  .cta-panel .cta-actions { gap: .625vw; }
  .cta-panel .orb-1 { width: 30vw; height: 30vw; right: -8vw; top: -12vw; }
  .cta-panel .orb-2 { width: 20vw; height: 20vw; right: 10vw; bottom: -12vw; }
}

/* Footer */
#footer { background: var(--foot); color: var(--ink); margin-top: 8vw; }
.footer-row { display: flex; flex-direction: column; gap: 10.6667vw; padding: 16vw 0 10vw; border-bottom: 1px solid var(--line-strong); }
.footer-cta { display: grid; gap: 3vw; }
#footer-cta--title { font-size: 7.4667vw; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
#footer-cta--desc { font-size: 3.7333vw; line-height: 1.5; color: var(--ink-70); max-width: 44ch; }
.footer-cta--input { display: flex; flex-direction: column; gap: 2.1333vw; }
.footer-cta--input input { height: 12.8vw; padding: 0 4.5vw; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-2); font-size: 3.7333vw; }
.footer-cta--input input:focus { outline: none; border-color: var(--blue); }
.footer-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 10vw 6vw; }
.footer-col { display: grid; gap: 2.4vw; align-content: start; }
.footer-col--title { font-size: 3.4667vw; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 1vw; }
.footer-col a { display: inline-block; font-size: 4.2667vw; line-height: 1.4; transition: color .4s var(--ease); }
.footer-col a:hover { color: var(--blue-deep); }
#footer-logo--wrapper { padding: 12vw 0; overflow: hidden; }
#footer-logo { width: 100%; }
#footer-logo img { width: 100%; height: auto; }
#footer-copy { display: flex; flex-direction: column; gap: 4vw; padding: 6vw 0 8vw; border-top: 1px solid var(--line-strong); font-size: 3.4667vw; }
#footer-copy .footer-terms { display: flex; gap: 3vw; flex-wrap: wrap; }
#footer-copy .footer-terms a:hover { color: var(--blue-deep); }
#footer-copy .initiative { color: var(--ink-70); }
#footer-copy .initiative strong { font-weight: 600; color: var(--ink); }
@media (min-width: 1024px) {
  #footer { margin-top: 3vw; }
  .footer-row { flex-direction: row; justify-content: space-between; gap: 2vw; padding: 4.4vw 0; }
  .footer-cta { width: 42vw; gap: .8vw; }
  #footer-cta--title { font-size: clamp(20px, 1.9271vw, 36px); }
  #footer-cta--desc { font-size: clamp(13px, 1.0vw, 18px); }
  .footer-cta--input { flex-direction: row; gap: .5208vw; margin-top: .8vw; }
  .footer-cta--input input { height: 3.125vw; padding: 0 1.3vw; font-size: clamp(12px, .9375vw, 16px); width: 20vw; }
  .footer-lists { grid-template-columns: repeat(3, 13vw); gap: 2vw; }
  .footer-col { gap: .5vw; }
  .footer-col--title { font-size: clamp(10px, .7292vw, 13px); margin-bottom: .4vw; }
  .footer-col a { font-size: clamp(13px, 1.0417vw, 19px); }
  #footer-logo--wrapper { padding: 4vw 0 3vw; }
  #footer-copy { flex-direction: row; justify-content: space-between; align-items: center; gap: 2vw; padding: 1.6vw 0 2vw; font-size: clamp(11px, .8333vw, 15px); }
  #footer-copy .footer-terms { gap: 1.5vw; }
}

/* Reveal helpers */
[data-reveal] { opacity: 0; transform: translateY(32px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
[data-reveal="fade"] { transform: none; }

/* Glyphs (simple line icons) */
.glyph { color: var(--ink); }
.glyph svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.glyph.glyph-green { color: var(--green); }
.glyph.glyph-blue { color: var(--blue); }

/* Language variants */
html.cjk .hero-title, html.cjk .big-title, html.cjk .stat-title, html.cjk .text-block--title, html.cjk .enhanced-title, html.cjk .cta-title { letter-spacing: 0; }
html.cjk .big-title { font-weight: 400; line-height: 1.1; }
html.cjk .hero-title { line-height: 1.15; }
html.cjk .l-line, html[lang="hi"] .l-line, html[lang="ar"] .l-line { padding-bottom: .08em; }
html[lang="hi"] .hero-title, html[lang="hi"] .big-title, html[lang="ar"] .hero-title, html[lang="ar"] .big-title { letter-spacing: 0; line-height: 1.25; }
html[dir="rtl"] .hero-tag { text-align: left; }
html[dir="rtl"] .dropdown-menu { left: auto; right: 0; }
html[dir="rtl"] .dropdown-menu.right { right: auto; left: 0; }
html[dir="rtl"] .tag { padding-left: 0; padding-right: 6.1333vw; }
html[dir="rtl"] .tag::before { left: auto; right: 0; }
html[dir="rtl"] .team-role { text-align: left; }
html[dir="rtl"] .hero-panel .panel-caption, html[dir="rtl"] .hero-panel .panel-pill { left: auto; right: 4vw; }
html[dir="rtl"] .enhanced-slide { border-left: 0; border-right: 1px solid var(--line-strong); padding-left: 0; padding-right: 1.71875vw; }
html[dir="rtl"] .enhanced-slide--content { left: auto; right: 1.71875vw; }
html[dir="rtl"] .enhanced-title--vert { left: auto; right: 2.6vw; }
html[dir="rtl"] .enhanced-title--vert > div { transform: rotate(90deg); transform-origin: 100% 0; }
html[dir="rtl"] .drag-item { border-left: 0; border-right: 1px solid var(--line-strong); }
html[dir="rtl"] .select.field-input, html[dir="rtl"] select.field-input { background-position: left 4vw center; padding-right: 4vw; padding-left: 10vw; }
@media (min-width: 1024px) {
  html[dir="rtl"] .tag { padding-right: 1.71875vw; }
  html[dir="rtl"] .hero-panel .panel-caption, html[dir="rtl"] .hero-panel .panel-pill { right: 1.5vw; }
  html[dir="rtl"] select.field-input { background-position: left 1.2vw center; padding-left: 3vw; padding-right: 1.2vw; }
}

/* Display type: Montserrat Black (declared last so it wins over the per-component weights above) */
.hero-title, .stat-title, .stat-side .stat-num, .stat-mini .num, .stat-desc--title, .text-block--title, .news-title,
.enhanced-title, .enhanced-m--title, .drag-title, .card-title, .cta-title, .timeline-title, .item-title, .team-name,
#footer-cta--title, .lookup-title, .article-body h2, .article-body h3, .article-body h4, .prose h2, .prose h3, .prose h4,
.dir-raw h2, .dir-raw h3, .dir-raw h4, #m-menu a.m-link {
  font-family: var(--font-display); font-weight: 900;
}
.hero-title { letter-spacing: -.03em; line-height: 1.02; }
/* Big statement titles stay in Circular */
.big-title { font-family: var(--font); font-weight: 500; letter-spacing: -.02em; line-height: .96; }
.stat-title { letter-spacing: -.03em; }
.text-block--title, .stat-desc--title, .news-title, .cta-title { letter-spacing: -.02em; }
.enhanced-title, .drag-title, .card-title, .item-title, .timeline-title, .team-name { letter-spacing: -.01em; }
.mono, .hero-tag { text-transform: uppercase; letter-spacing: .12em; font-weight: 500; }
html.cjk .hero-title, html.cjk .big-title, html[lang="hi"] .big-title, html[lang="ar"] .big-title { letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  [data-reveal], .hero-panel, .hero-grid, #us-map path.pop { opacity: 1 !important; transform: none !important; }
  [data-split] .l-inner { transform: none !important; }
  .big-title .l-line { color: var(--ink); }
}