:root {
  --ink: #313030;
  --muted: #757070;
  --lime: #ff3131;
  --paper: #f7f6f6;
  --line: #e5e2e0;
  --orange: #ff3131;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
body {
  margin: 0;
  color: var(--ink);
  background: white;
  font:
    16px/1.65 "Plus Jakarta Sans",
    sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}
a,
button {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 5px;
}
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: "Plus Jakarta Sans", sans-serif;
}
h1 {
  font-size: clamp(2.8rem, 4.35vw, 4.65rem);
  line-height: 1.16;
  letter-spacing: -2.8px;
  font-weight: 600;
}
h2 {
  font-size: clamp(2rem, 3.25vw, 3.35rem);
  line-height: 1.17;
  letter-spacing: -1.9px;
  font-weight: 600;
}
h1 em,
h2 em {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
}
h1 em {
  color: var(--orange);
}
h3 {
  font-size: 1.3rem;
  line-height: 1.4;
  letter-spacing: -0.5px;
}
p {
  color: var(--muted);
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 1.6px;
  font-weight: 700;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.announcement {
  background: var(--ink);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 5%;
  font-size: 11px;
  letter-spacing: 0.7px;
}
.announcement a {
  color: #ebe8e7;
}
.header {
  height: 91px;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 30;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  line-height: 1.05;
}
.brand strong {
  display: block;
  font-size: 26px;
  letter-spacing: 1px;
}
.brand strong span {
  color: var(--orange);
}
.brand-mark {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -5px;
  padding-right: 16px;
  position: relative;
}
.brand-mark > span {
  position: absolute;
  right: 0;
  top: -9px;
  font-size: 26px;
  color: var(--orange);
}
nav {
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}
nav button:not(.button) {
  padding: 28px 0;
}
nav button > span {
  margin-left: 5px;
}
.home-link {
  color: var(--orange);
}
.button {
  background: var(--ink);
  color: #ffffff;
  padding: 15px 22px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 3px;
  transition:
    background 0.2s,
    transform 0.2s;
}
.button:hover {
  background: #4b4949;
  transform: translateY(-2px);
}
.button span {
  font-size: 23px;
  line-height: 1;
}
.button.small {
  padding: 12px 19px;
  gap: 20px;
}
.button.yellow {
  background: var(--lime);
  color: var(--ink);
}
.button.yellow:hover {
  background: #ff6b6b;
}
.text-link {
  display: inline-flex;
  gap: 20px;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid currentColor;
  padding: 0 0 7px;
  align-items: center;
}
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 580px;
  background: #f3f2f2;
}
.hero-copy {
  padding: 68px 5vw 55px;
}
.hero-copy > p {
  font-size: 17px;
  max-width: 460px;
  margin: 25px 0 29px;
}
.hero-actions {
  display: flex;
  gap: 23px;
  align-items: center;
  flex-wrap: wrap;
}
.hero-actions .text-link {
  font-size: 12px;
}
.hero-footnote {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 13px;
}
.hero-footnote p {
  font-size: 12px;
  line-height: 1.5;
}
.hero-footnote strong {
  color: var(--ink);
}
.asterisk {
  font-size: 44px;
  line-height: 1;
  color: var(--orange);
}
.hero-visual {
  position: relative;
  min-height: 580px;
  overflow: hidden;
}
.hero-main-photo {
  position: absolute;
  inset: 0;
  object-position: 62% center;
}
.hero-visual:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #2b292980, transparent 50%);
  pointer-events: none;
}
.hero-inset {
  position: absolute;
  right: 26px;
  bottom: 43px;
  width: 190px;
  height: 220px;
  background: white;
  padding: 8px 8px 36px;
  transform: rotate(5deg);
  z-index: 2;
  box-shadow: 0 5px 25px #00000033;
}
.hero-inset span {
  display: block;
  font-size: 10px;
  text-align: center;
  margin-top: 8px;
}
.vertical-caption {
  position: absolute;
  top: 30px;
  right: 20px;
  writing-mode: vertical-rl;
  font-size: 9px;
  letter-spacing: 2px;
  color: #ffffff;
  z-index: 2;
}
.destination-label {
  position: absolute;
  bottom: 42px;
  left: 30px;
  color: white;
  z-index: 2;
}
.destination-label span {
  display: block;
  font-size: 10px;
  letter-spacing: 1px;
}
.destination-label strong {
  font:
    italic 25px "Plus Jakarta Sans",
    sans-serif;
}
.finder {
  position: relative;
  margin: -1px 0 0;
  background: var(--lime);
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr auto;
  gap: 25px;
  align-items: center;
  padding: 28px 5%;
}
.finder-intro > span {
  font-size: 10px;
  letter-spacing: 1.4px;
  font-weight: 700;
  display: block;
}
.finder-intro strong {
  font-size: 20px;
  line-height: 1.3;
  display: block;
  max-width: 240px;
  margin-top: 5px;
}
.finder label {
  font-size: 12px;
  font-weight: 600;
  border-left: 1px solid #ff3131;
  padding-left: 24px;
}
.finder select {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 14px;
  padding: 8px 18px 4px 0;
  cursor: pointer;
  min-width: 0;
}
.finder label {
  min-width: 0;
}
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  padding: 28px 5%;
  border-bottom: 1px solid var(--line);
}
.trust-strip > div {
  display: flex;
  gap: 12px;
  align-items: start;
}
.trust-strip > div > span {
  font-size: 11px;
  color: var(--orange);
  padding-top: 2px;
}
.trust-strip p {
  font-size: 11px;
  line-height: 1.6;
}
.trust-strip strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
}
.section {
  padding: 85px 6%;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 50px;
  margin-bottom: 37px;
}
.section-heading > p {
  max-width: 345px;
  font-size: 15px;
}
.pathway-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line);
}
.pathway-grid > button {
  text-align: left;
  padding: 25px 21px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: background 0.2s;
}
.pathway-grid > button:last-child {
  border: 0;
}
.pathway-grid > button:hover {
  background: var(--lime);
}
.path-number {
  font-size: 10px;
  letter-spacing: 1px;
  color: #858080;
}
.pathway-grid h3 {
  margin: 24px 0 13px;
  font-size: 21px;
}
.pathway-grid p {
  font-size: 14px;
  margin-bottom: 26px;
  flex: 1;
}
.path-bottom {
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.path-bottom b {
  font-size: 24px;
  font-weight: 400;
}
.programs {
  background: var(--paper);
}
.category-tabs {
  display: flex;
  gap: 26px;
  border-bottom: 1px solid #d8d4d2;
  overflow: auto;
  margin-bottom: 28px;
}
.category-tabs button {
  font-size: 14px;
  white-space: nowrap;
  padding: 12px 0 16px;
  position: relative;
  color: #7a7676;
}
.category-tabs button[aria-selected="true"] {
  color: var(--ink);
  font-weight: 700;
  border-bottom: 3px solid var(--ink);
}
.program-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.program-card {
  text-align: left;
  background: white;
  border: 1px solid #e7e4e2;
  border-radius: 5px;
  overflow: hidden;
  padding: 0;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.program-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px #31303012;
}
.program-card > img {
  height: 220px;
}
.program-card > div {
  padding: 23px;
  position: relative;
}
.program-card .tag {
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 700;
  color: #b31616;
}
.program-card h3 {
  font-size: 23px;
  margin: 12px 0;
  min-height: 64px;
}
.program-card p {
  font-size: 14px;
  min-height: 46px;
}
.card-meta {
  display: block;
  padding-top: 15px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: #757070;
}
.card-arrow {
  position: absolute;
  right: 23px;
  bottom: 15px;
  font-size: 23px;
}
.program-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
  font-size: 14px;
  color: var(--muted);
}
.field-section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 70px;
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 36px;
}
.field-grid > button {
  text-align: left;
  display: flex;
  gap: 15px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 21px 0;
  font-size: 15px;
}
.field-grid > button:hover {
  color: var(--orange);
}
.field-grid > button span {
  font-size: 10px;
  color: #a09c9c;
}
.field-grid > button b {
  margin-left: auto;
  font-size: 21px;
  font-weight: 400;
}
.featured {
  background: #efedec;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7%;
  align-items: center;
}
.featured-image {
  height: 540px;
  position: relative;
}
.featured-image > img {
  border-radius: 4px;
  object-position: 50% center;
}
.featured-image > span {
  position: absolute;
  top: 22px;
  left: 22px;
  background: var(--lime);
  padding: 8px 12px;
  font-size: 10px;
  letter-spacing: 1px;
}
.featured-copy h3 {
  font-size: 19px;
  margin: 22px 0 12px;
}
.featured-copy > p {
  font-size: 15px;
}
.feature-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 27px 0;
  padding: 20px 0;
  border-top: 1px solid #cfc9c6;
  border-bottom: 1px solid #cfc9c6;
}
.feature-facts span {
  font-size: 11px;
  color: var(--muted);
}
.feature-facts strong {
  display: block;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 5px;
}
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%;
}
.about .text-link {
  margin-top: 33px;
}
.about-content p {
  margin-bottom: 20px;
  font-size: 16px;
}
.about-content .lead {
  color: var(--ink);
  font-size: 23px;
}
.about-stat {
  display: flex;
  gap: 25px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 17px;
}
.about-stat strong {
  font:
    600 60px "Plus Jakarta Sans",
    sans-serif;
  letter-spacing: -3px;
}
.about-stat > span {
  font-size: 13px;
  color: var(--muted);
}
.mission {
  background: var(--ink);
  color: #ffffff;
}
.mission .eyebrow {
  color: var(--lime);
}
.mission-top {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  align-items: end;
}
.mission-top > p {
  max-width: 370px;
  color: #cbc5c2;
  font-size: 15px;
}
.mission h2 em {
  color: var(--lime);
}
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 55px;
  margin: 48px 0 32px;
}
.values article {
  border-top: 1px solid #777373;
  padding-top: 20px;
}
.values article > span {
  font-size: 10px;
  letter-spacing: 1.2px;
  color: #c9c2bf;
}
.values h3 {
  margin: 20px 0 13px;
}
.values p {
  color: #cbc5c2;
  font-size: 15px;
}
.mission .text-link {
  color: var(--lime);
}
.support-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.support-grid article {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.support-symbol {
  font-size: 34px;
  width: 57px;
  height: 57px;
  display: grid;
  place-items: center;
  border: 1px solid #cec8c5;
  border-radius: 50%;
  margin-bottom: 24px;
}
.support-grid h3 {
  font-size: 18px;
  margin-bottom: 14px;
}
.support-grid p {
  font-size: 14px;
  flex: 1;
  margin-bottom: 20px;
}
.support-grid .text-link {
  font-size: 12px;
}
.steps-section {
  background: var(--paper);
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px;
}
.steps article {
  border-top: 1px solid #c9c3c0;
  padding-top: 20px;
}
.steps article > span {
  font:
    500 39px "Plus Jakarta Sans",
    sans-serif;
  color: #888484;
}
.steps h3 {
  font-size: 18px;
  margin: 20px 0 10px;
}
.steps p {
  font-size: 14px;
}
.groups {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 6%;
  align-items: center;
}
.group-intro > p {
  max-width: 390px;
  margin-top: 24px;
}
.group-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.group-cards > button {
  text-align: left;
  background: #f2f1f0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: start;
}
.group-cards > button:nth-child(2) {
  background: #ffdddd;
}
.group-cards > button:hover {
  outline: 1px solid var(--ink);
}
.group-cards button > span {
  font-size: 10px;
  letter-spacing: 1px;
}
.group-cards h3 {
  font-size: 25px;
  margin: 26px 0 16px;
}
.group-cards p {
  font-size: 14px;
  flex: 1;
}
.group-cards b {
  font-size: 12px;
  margin-top: 25px;
}
.fees {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%;
  border-top: 1px solid var(--line);
}
.fees > div > p {
  max-width: 420px;
  margin: 23px 0;
}
.fee-panel {
  background: #f0eeed;
  padding: 30px;
}
.panel-label {
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 700;
}
.fee-panel ul {
  padding: 0;
  list-style: none;
  font-size: 14px;
  margin: 20px 0;
}
.fee-panel li {
  padding: 8px 0;
}
.fee-panel li:before {
  content: "✓";
  margin-right: 10px;
}
.fee-panel > p {
  font-size: 13px;
  border-top: 1px solid #cbc5c2;
  padding-top: 18px;
  margin-bottom: 0 !important;
}
.explore {
  min-height: 570px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 70px 6% 35px;
  color: #ffffff;
  overflow: hidden;
  background: var(--ink);
}
.explore > img {
  position: absolute;
  inset: 0;
  object-position: center 62%;
}
.explore-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #262525cf, #26252533),
    linear-gradient(0deg, #262525bb, transparent);
}
.explore-content,
.explore-links {
  position: relative;
}
.explore-content p {
  color: #eae7e6;
  margin: 23px 0;
}
.explore-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 50px;
}
.explore-links > button {
  text-align: left;
  color: white;
  border-top: 1px solid #ffffff70;
  padding: 18px 0 0;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.explore-links > button span {
  font-size: 22px;
}
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.guide-grid > button {
  text-align: left;
  padding: 30px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--orange);
  display: flex;
  flex-direction: column;
}
.guide-grid > button:nth-child(2) {
  border-top-color: #b0adad;
}
.guide-grid > button:nth-child(3) {
  border-top-color: #ff3131;
}
.guide-grid > button:hover {
  background: var(--paper);
}
.guide-grid > button > span {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
}
.guide-grid h3 {
  font-size: 22px;
  margin: 25px 0 18px;
}
.guide-grid p {
  font-size: 14px;
  flex: 1;
}
.guide-grid b {
  margin-top: 28px;
  font-size: 13px;
}
.partners {
  background: var(--paper);
  text-align: center;
}
.partners .eyebrow {
  justify-content: center;
}
.partners > p {
  max-width: 650px;
  margin: 24px auto 35px;
}
.partner-types {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.partner-types span {
  border: 1px solid #ddd9d7;
  padding: 12px 20px;
  font-size: 13px;
}
.faq {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 8%;
}
.faq .text-link {
  margin-top: 30px;
}
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 19px 0;
}
.faq summary {
  display: flex;
  justify-content: space-between;
  list-style: none;
  gap: 25px;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
}
.faq summary:after {
  content: "+";
  font-size: 23px;
}
.faq details[open] summary:after {
  content: "−";
}
.faq details p {
  margin: 14px 0;
  font-size: 14px;
}
.contact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  background: var(--ink);
  color: #ffffff;
}
.contact h2 em {
  color: var(--lime);
}
.contact p {
  color: #d1ccc9;
  margin-top: 23px;
}
.contact .eyebrow {
  color: var(--lime);
}
footer {
  padding: 60px 6% 25px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 45px;
}
footer > div:not(.footer-bottom) {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 8px;
}
footer h3 {
  font-size: 14px;
  margin-bottom: 10px;
}
footer a:not(.brand),
footer button {
  font-size: 13px;
  padding: 0;
  color: var(--muted);
  text-align: left;
}
footer a:hover,
footer button:hover {
  color: var(--orange);
}
footer p {
  font-size: 14px;
  margin: 17px 0 8px;
}
.footer-brand > span {
  font-size: 12px;
}
.footer-bottom {
  grid-column: 1/-1;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 11px;
  color: var(--muted);
}
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  padding: 30px 5%;
  box-shadow: 0 20px 40px #31303026;
  border-top: 1px solid var(--line);
  max-height: calc(100dvh - 100px);
  overflow: auto;
}
.mega-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 35px;
}
.mega-side {
  border-right: 1px solid var(--line);
  padding-right: 22px;
}
.mega-side h2 {
  font-size: 25px;
  letter-spacing: -1px;
  margin-bottom: 20px;
}
.mega-side button {
  display: block;
  width: 100%;
  padding: 12px;
  text-align: left;
  font-size: 14px;
  border-radius: 3px;
}
.mega-side button.active {
  background: var(--lime);
  font-weight: 600;
}
.mega-intro {
  font-size: 13px;
  margin-bottom: 20px;
}
.mega-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 24px;
  align-content: start;
}
.mega-links button {
  font-size: 14px;
  text-align: left;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.mega-links button:hover {
  color: var(--orange);
}
.mobile-toggle {
  display: none;
}
.skip {
  position: fixed;
  top: -100px;
  left: 15px;
  background: white;
  padding: 10px;
  z-index: 100;
}
.skip:focus {
  top: 10px;
}
[hidden] {
  display: none !important;
}
dialog {
  border: 0;
  border-radius: 8px;
  padding: 42px;
  width: min(750px, 92vw);
  max-height: 85dvh;
  color: var(--ink);
  box-shadow: 0 20px 80px #00000033;
}
dialog::backdrop {
  background: #232222bb;
  backdrop-filter: blur(4px);
}
.close-dialog {
  position: absolute;
  right: 13px;
  top: 6px;
  font-size: 30px;
}
dialog h2 {
  font-size: 32px;
  letter-spacing: -1px;
  margin: 10px 0 22px;
}
dialog h3 {
  margin: 25px 0 12px;
}
dialog p {
  margin: 12px 0;
}
dialog ul {
  padding-left: 20px;
  color: var(--muted);
}
dialog .facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  background: var(--paper);
  padding: 20px;
  font-size: 13px;
}
dialog .facts strong {
  display: block;
}
dialog label {
  display: block;
  margin: 16px 0 5px;
  font-size: 14px;
  font-weight: 600;
}
dialog input,
dialog select,
dialog textarea {
  width: 100%;
  padding: 11px;
  border: 1px solid #d3cecc;
  border-radius: 3px;
  background: white;
  color: var(--ink);
}
dialog textarea {
  min-height: 90px;
}
dialog .button {
  margin-top: 20px;
}
.request-note {
  font-size: 13px;
}
.program-list {
  list-style: none !important;
  padding: 0 !important;
  columns: 2;
  column-gap: 25px;
}
.program-list li {
  break-inside: avoid;
}
.program-list button {
  text-align: left;
  width: 100%;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.program-list small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.modal-open {
  overflow: hidden;
}
.search-summary {
  font-size: 14px;
}
.empty-result {
  padding: 24px;
  background: var(--paper);
  margin: 20px 0;
}
.empty-result .button {
  margin-top: 12px;
}
.guide-body p {
  line-height: 1.8;
}
@media (min-width: 1600px) {
  .hero {
    min-height: 680px;
  }
  .hero-copy {
    padding-top: 90px;
  }
  .hero-visual {
    min-height: 680px;
  }
  .hero-inset {
    width: 240px;
    height: 270px;
  }
  /* Shared 1600px content container; sections with their own spacing follow it at the end of this file. */
  .section {
    padding-left: max(6%, calc((100vw - 1600px) / 2));
    padding-right: max(6%, calc((100vw - 1600px) / 2));
  }
}
@media (max-width: 1150px) {
  nav {
    gap: 15px;
    font-size: 12px;
  }
  .header {
    padding: 0 3%;
  }
  .hero-copy {
    padding: 55px 4vw;
  }
  .hero-actions {
    gap: 17px;
  }
  .hero-actions .button {
    padding: 14px 17px;
  }
  .hero-inset {
    width: 155px;
    height: 185px;
    right: 20px;
  }
  .destination-label {
    left: 20px;
  }
  .finder {
    gap: 17px;
  }
  .finder-intro strong {
    font-size: 17px;
  }
  .finder label {
    padding-left: 16px;
  }
  .finder .button {
    gap: 16px;
    padding: 14px 17px;
  }
  .pathway-grid > button {
    padding: 22px 15px;
  }
  .pathway-grid h3 {
    font-size: 18px;
  }
  .pathway-grid p {
    font-size: 13px;
  }
  .path-bottom {
    font-size: 10px;
  }
  .field-section {
    gap: 35px;
  }
  .group-cards > button {
    padding: 22px;
  }
  .group-cards h3 {
    font-size: 22px;
  }
  .support-grid {
    gap: 23px;
  }
}
@media (max-width: 900px) {
  .header {
    height: 78px;
    padding: 0 5%;
  }
  .mobile-toggle {
    display: block;
    font-size: 26px;
  }
  nav {
    display: none;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    padding: 20px 5%;
    background: white;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    font-size: 15px;
    max-height: 80dvh;
    overflow: auto;
  }
  nav.open {
    display: flex;
  }
  nav button:not(.button),
  nav a {
    padding: 10px 0;
    text-align: left;
  }
  .mega {
    position: fixed;
    top: 150px;
    bottom: 15px;
    left: 4%;
    right: 4%;
    z-index: 35;
    border: 1px solid var(--line);
    padding: 20px;
    max-height: none;
  }
  .mega-layout {
    grid-template-columns: 190px 1fr;
    gap: 20px;
  }
  .mega-links {
    grid-template-columns: 1fr 1fr;
  }
  .hero-copy {
    padding: 50px 5vw;
  }
  .hero {
    grid-template-columns: 1.1fr 1fr;
    min-height: 560px;
  }
  h1 {
    font-size: 42px;
    letter-spacing: -2px;
  }
  .hero-visual {
    min-height: 560px;
  }
  .hero-copy > p {
    font-size: 15px;
  }
  .hero-inset {
    bottom: 90px;
    right: 23px;
  }
  .destination-label {
    bottom: 28px;
  }
  .hero-footnote {
    margin-top: 25px;
  }
  .finder {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
  }
  .finder-intro {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .finder-intro strong {
    max-width: none;
    margin: 0;
    font-size: 18px;
  }
  .finder label {
    border: 0;
    padding: 0;
  }
  .trust-strip {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .section {
    padding: 65px 6%;
  }
  .pathway-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .pathway-grid > button {
    border-bottom: 1px solid var(--line);
  }
  .pathway-grid > button:nth-child(3) {
    border-right: 0;
  }
  .pathway-grid > button:nth-child(n + 4) {
    border-bottom: 0;
  }
  .pathway-grid > button:last-child {
    border-right: 1px solid var(--line);
  }
  .program-grid {
    gap: 16px;
  }
  .program-card > img {
    height: 175px;
  }
  .program-card > div {
    padding: 18px;
  }
  .program-card h3 {
    font-size: 19px;
    min-height: 54px;
  }
  .program-card p {
    font-size: 13px;
    min-height: 64px;
  }
  .field-section {
    grid-template-columns: 1fr;
  }
  .featured {
    gap: 5%;
  }
  .featured-image {
    height: 510px;
  }
  .feature-facts {
    grid-template-columns: 1fr 1fr;
  }
  .feature-facts span:last-child {
    grid-column: 1/-1;
  }
  .about {
    gap: 5%;
  }
  .values {
    gap: 25px;
  }
  .support-grid {
    grid-template-columns: 1fr 1fr;
    gap: 35px;
  }
  .steps {
    grid-template-columns: 1fr 1fr;
  }
  .groups {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .group-intro > p {
    max-width: 570px;
  }
  .group-cards > button {
    padding: 30px;
  }
  .fees {
    gap: 5%;
  }
  .guide-grid {
    gap: 16px;
  }
  .guide-grid > button {
    padding: 23px;
  }
  .guide-grid h3 {
    font-size: 19px;
  }
  .faq {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  footer {
    grid-template-columns: 1fr 1fr;
    gap: 35px;
  }
  .contact {
    align-items: start;
  }
  .contact .button {
    white-space: nowrap;
  }
}
@media (max-width: 600px) {
  .announcement {
    font-size: 9px;
    justify-content: center;
  }
  .announcement > a {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    padding: 38px 6% 30px;
  }
  .hero-copy .eyebrow {
    margin-bottom: 18px;
  }
  h1 {
    font-size: 43px;
    line-height: 1.15;
    letter-spacing: -2px;
  }
  .hero-copy > p {
    font-size: 16px;
    max-width: 100%;
    margin: 20px 0 23px;
  }
  .hero-actions .button {
    font-size: 13px;
  }
  .hero-actions {
    gap: 18px;
  }
  .hero-footnote {
    display: none;
  }
  .hero-visual {
    min-height: 330px;
  }
  .hero-main-photo {
    object-position: 50% 40%;
  }
  .hero-inset {
    width: 125px;
    height: 150px;
    bottom: 25px;
    right: 26px;
  }
  .hero-inset span {
    font-size: 8px;
  }
  .destination-label {
    left: 6%;
    bottom: 25px;
  }
  .vertical-caption {
    font-size: 8px;
    right: 12px;
  }
  .finder {
    grid-template-columns: 1fr 1fr;
    padding: 23px 6%;
    gap: 20px;
  }
  .finder-intro {
    display: block;
  }
  .finder-intro strong {
    margin-top: 6px;
    font-size: 20px;
  }
  .finder select {
    font-size: 13px;
  }
  .finder .button {
    grid-column: 1/-1;
    justify-content: center;
    gap: 35px;
  }
  .trust-strip {
    padding: 24px 6%;
    gap: 20px 12px;
  }
  .trust-strip strong {
    font-size: 11px;
  }
  .trust-strip p {
    font-size: 10px;
  }
  .trust-strip > div {
    gap: 8px;
  }
  .eyebrow {
    font-size: 10px;
    letter-spacing: 1.2px;
    margin-bottom: 17px;
  }
  .section {
    padding: 50px 6%;
  }
  h2 {
    font-size: 34px;
    letter-spacing: -1.4px;
  }
  .section-heading {
    display: block;
    margin-bottom: 28px;
  }
  .section-heading > p {
    margin-top: 20px;
    max-width: none;
    font-size: 14px;
  }
  .section-heading > .button,
  .section-heading > .text-link {
    margin-top: 25px;
  }
  .pathway-grid {
    grid-template-columns: 1fr;
  }
  .pathway-grid > button {
    padding: 23px;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .pathway-grid > button:last-child {
    border-bottom: 0 !important;
  }
  .pathway-grid h3 {
    font-size: 24px;
    margin: 13px 0 10px;
  }
  .pathway-grid p {
    font-size: 14px;
    margin-bottom: 18px;
  }
  .path-bottom {
    font-size: 12px;
  }
  .category-tabs {
    gap: 23px;
  }
  .category-tabs button {
    font-size: 13px;
  }
  .program-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .program-card > img {
    height: 235px;
  }
  .program-card > div {
    padding: 24px;
  }
  .program-card h3 {
    font-size: 25px;
    min-height: 0;
  }
  .program-card p {
    font-size: 14px;
    min-height: 0;
  }
  .card-meta {
    margin-top: 20px;
  }
  .program-footer {
    flex-direction: column;
    align-items: start;
    font-size: 13px;
  }
  .field-grid {
    grid-template-columns: 1fr;
  }
  .field-grid > button {
    padding: 19px 0;
    font-size: 15px;
  }
  .featured {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .featured-image {
    height: 355px;
  }
  .feature-facts {
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
  }
  .feature-facts span:last-child {
    grid-column: auto;
  }
  .feature-facts strong {
    font-size: 12px;
  }
  .feature-facts span {
    font-size: 10px;
  }
  .about {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-content .lead {
    font-size: 21px;
  }
  .about-content p {
    font-size: 15px;
  }
  .about-stat strong {
    font-size: 54px;
  }
  .mission-top {
    display: block;
  }
  .mission-top > p {
    margin-top: 23px;
  }
  .values {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 34px;
  }
  .values h3 {
    margin-top: 15px;
  }
  .support-grid {
    gap: 30px 20px;
  }
  .support-grid h3 {
    font-size: 17px;
  }
  .support-grid p {
    font-size: 13px;
  }
  .support-grid .text-link {
    font-size: 11px;
  }
  .support-symbol {
    margin-bottom: 18px;
  }
  .steps {
    gap: 28px 20px;
  }
  .steps h3 {
    font-size: 17px;
  }
  .steps p {
    font-size: 13px;
  }
  .group-cards {
    grid-template-columns: 1fr;
  }
  .group-cards h3 {
    font-size: 26px;
  }
  .fees {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .fee-panel {
    padding: 23px;
  }
  .explore {
    padding: 50px 6% 25px;
    min-height: 580px;
  }
  .explore-content p {
    font-size: 14px;
  }
  .explore-links {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .explore-links > button {
    font-size: 12px;
  }
  .guide-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .guide-grid h3 {
    font-size: 23px;
  }
  .guide-grid > button {
    padding: 25px;
  }
  .partner-types {
    gap: 8px;
  }
  .partner-types span {
    font-size: 11px;
    padding: 9px 12px;
  }
  .partners > p {
    font-size: 14px;
  }
  .faq summary {
    font-size: 14px;
  }
  .contact {
    flex-direction: column;
    gap: 28px;
  }
  .contact h2 {
    font-size: 35px;
  }
  .contact p {
    font-size: 14px;
  }
  footer {
    padding: 45px 6% 20px;
    gap: 28px 18px;
  }
  footer .footer-brand {
    grid-column: 1/-1;
  }
  footer h3 {
    font-size: 13px;
  }
  footer a:not(.brand),
  footer button {
    font-size: 12px;
  }
  .footer-bottom {
    flex-direction: column;
    font-size: 10px;
  }
  .mega-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .mega-side {
    border: 0;
    padding: 0;
  }
  .mega-side button {
    display: inline-block;
    width: auto;
    padding: 8px;
    font-size: 12px;
  }
  .mega-side h2 {
    font-size: 22px;
    margin-bottom: 12px;
  }
  .mega-intro {
    display: none;
  }
  .mega-links {
    gap: 0 15px;
  }
  .mega-links button {
    font-size: 12px;
  }
  .mega {
    top: 130px;
  }
  .program-list {
    columns: 1;
  }
  dialog {
    padding: 32px 23px;
  }
  dialog .facts {
    grid-template-columns: 1fr 1fr;
  }
  dialog h2 {
    font-size: 27px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    transition: none !important;
  }
}

/* Homepage refinement: immersive travel photography, clear discovery, generous surfaces. */
/* Brand palette, taken from the Internship Support logo: red mark #FF3131, charcoal wordmark #2B2B2B.
   --red is for marks, fills and large type; --red-strong keeps white or body-size text readable (4.9:1).
   --orange and --lime keep their old names because many rules use them; they now hold brand reds. */
:root {
  --red: #ff3131;
  --red-strong: #d91e1e;
  --red-deep: #b31616;
  --red-soft: #ff6b6b;
  --red-tint: #ffe8e8;
  --charcoal: #2b2b2b;
  --ink: var(--charcoal);
  --muted: #6b6666;
  --lime: var(--red-soft);
  --paper: #f5f4f4;
  --line: #e3e0de;
  --orange: var(--red-strong);
}
body {
  background: #fffefa;
}
h1,
h2 {
  text-wrap: balance;
}
h2 {
  font-size: clamp(2.15rem, 3.6vw, 3.6rem);
  letter-spacing: -0.055em;
}
h2 em {
  color: var(--red-strong);
}
p {
  line-height: 1.8;
}
.announcement {
  padding: 8px 5%;
  font-size: 12px;
  background: #2a2929;
}
.announcement a {
  color: #eeedec;
}
.header {
  height: 94px;
  background: #fffefaf5;
  backdrop-filter: blur(16px);
}
.brand {
  gap: 14px;
}
.brand-mark {
  color: #2a2929;
}
nav {
  gap: 22px;
}
nav > a:not(.button),
nav > button:not(.button) {
  transition: color 0.2s;
}
nav > a:hover,
nav > button:not(.button):hover {
  color: var(--orange);
}
.button {
  border-radius: 8px;
  padding: 16px 23px;
  min-height: 50px;
  box-shadow: 0 4px 10px #2a292909;
}
.button:hover {
  background: #3f3c3c;
  box-shadow: 0 8px 20px #2a292917;
}
.button.small {
  border-radius: 7px;
}
/* The former lime button is now the brand's primary red call to action. */
.button.yellow {
  background: var(--red-strong);
  color: #fff;
}
.button.yellow:hover {
  background: var(--red-deep);
}
.text-link {
  border-bottom-color: #a6a2a2;
  transition: color 0.2s;
  min-height: 35px;
}
.text-link:hover {
  color: var(--orange);
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #646060;
}
.hero {
  position: relative;
  display: block;
  min-height: 710px;
  margin: 0 22px;
  border-radius: 16px;
  overflow: hidden;
  background: #2a2929;
  isolation: isolate;
}
.hero-visual {
  position: absolute;
  inset: 0;
  min-height: 0;
  z-index: -1;
}
.hero-main-photo {
  object-position: center 43%;
}
.hero-visual:after {
  background:
    linear-gradient(90deg, #1c1a1ae8 0%, #292828b8 38%, #29282836 77%),
    linear-gradient(0deg, #2220209c, transparent 42%);
}
.hero-copy {
  position: relative;
  width: 68%;
  padding: 68px 5vw 126px;
  color: #fffefa;
}
.hero-copy .eyebrow {
  color: #ffe8e8;
  font-size: 12px;
}
.hero-copy .dot {
  background: var(--lime);
  box-shadow: 0 0 0 5px #ff6b6b1c;
  margin-right: 5px;
}
.hero h1 {
  font-size: clamp(3.35rem, 5.55vw, 5.75rem);
  line-height: 1.045;
  letter-spacing: -0.052em;
}
.hero h1 em {
  color: #ff6b6b;
}
.hero-copy > p {
  color: #e8e5e4;
  max-width: 440px;
  font-size: 17px;
  margin: 26px 0 28px;
}
.hero-actions {
  gap: 25px;
}
.hero-actions .button {
  background: var(--lime);
  color: #2a2929;
}
.hero-actions .button:hover {
  background: #ff6b6b;
}
.hero-actions .text-link {
  color: #fffefa;
  border-color: #ffffff77;
  font-size: 14px;
}
.hero-footnote {
  margin-top: 28px;
  gap: 12px;
}
.hero-footnote .asterisk {
  color: #ff6b6b;
  font-size: 32px;
}
.hero-footnote p {
  color: #dddad8;
  font-size: 12px;
}
.hero-footnote strong {
  color: #fffefa;
}
.hero-inset {
  right: 5%;
  bottom: 135px;
  width: 210px;
  height: 250px;
  border-radius: 5px;
  padding: 9px 9px 38px;
  transform: rotate(5deg);
  box-shadow: 0 18px 48px #1c1a1a48;
}
.hero-inset img {
  border-radius: 2px;
}
.hero-inset span {
  color: #2a2929;
  font-size: 11px;
}
.destination-label {
  left: auto;
  right: 5%;
  bottom: 83px;
  text-align: right;
}
.destination-label span {
  font-size: 10px;
  color: #e8e5e4;
}
.destination-label strong {
  font-size: 25px;
}
.vertical-caption {
  right: 20px;
  top: 40px;
  font-size: 10px;
}
.finder {
  z-index: 2;
  margin: -55px 6% 0;
  padding: 28px 30px;
  grid-template-columns: 1.1fr 1fr 1fr auto;
  border: 1px solid #e7e4e2;
  border-radius: 14px;
  background: #fffefa;
  box-shadow: 0 18px 55px #2a292912;
}
.finder-intro > span {
  color: #7b7676;
  font-size: 11px;
}
.finder-intro strong {
  font-size: 20px;
  letter-spacing: -0.5px;
}
.finder label {
  border-color: #e3e0de;
  font-size: 13px;
  color: #726d6d;
}
.finder select {
  color: #2a2929;
  font-weight: 600;
  padding-top: 8px;
  font-size: 14px;
}
.finder .button {
  background: #2a2929;
  min-height: 56px;
}
.trust-strip {
  margin: 0 6%;
  padding: 32px 0 30px;
  gap: 25px;
}
.trust-strip > div > span {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: #eeeceb;
  border-radius: 50%;
  padding: 0;
  color: #605c5c;
  font-size: 11px;
}
.trust-strip strong {
  font-size: 14px;
}
.trust-strip p {
  font-size: 12px;
}
.section {
  padding-top: 96px;
  padding-bottom: 96px;
}
.section-heading {
  margin-bottom: 42px;
}
.section-heading > p {
  font-size: 16px;
  max-width: 355px;
}
.pathway-grid {
  border: 0;
  gap: 14px;
}
.pathway-grid > button {
  border: 1px solid #e5e2e0 !important;
  border-radius: 12px;
  padding: 25px 20px;
  background: #fffefa;
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
}
.pathway-grid > button:hover {
  background: #f3f2f1;
  border-color: #9b9696 !important;
  transform: translateY(-6px);
  box-shadow: 0 14px 30px #2a29290b;
}
.path-number {
  font-size: 11px;
  color: #757070;
  letter-spacing: 0.035em;
}
.pathway-icon {
  width: 43px;
  height: 43px;
  margin: 23px 0 0;
  color: #575454;
}
.pathway-icon svg {
  width: 100%;
  height: 100%;
}
.pathway-grid h3 {
  margin: 19px 0 12px;
  font-size: 22px;
}
.pathway-grid p {
  font-size: 15px;
}
.path-bottom {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  width: 100%;
}
.path-bottom b {
  border-radius: 50%;
  background: #efeeed;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 20px;
}
.programs {
  background: #f3f2f2;
}
.category-tabs {
  gap: 9px;
  border: 0;
  margin-bottom: 32px;
  padding-bottom: 4px;
}
.category-tabs button {
  border: 1px solid #e0dcda;
  border-radius: 30px;
  padding: 11px 19px;
  background: #fffefa;
  color: #686464;
}
.category-tabs button[aria-selected="true"] {
  border: 1px solid #2a2929;
  background: #2a2929;
  color: #fffefa;
}
.program-grid {
  gap: 26px;
  align-items: stretch;
}
.program-card {
  border-radius: 14px;
  border: 1px solid #e3e0de;
  background: #fffefa;
  box-shadow: 0 5px 17px #2a292905;
  display: flex;
  flex-direction: column;
}
.program-card:hover {
  box-shadow: 0 18px 36px #2a292914;
}
.program-card > img {
  height: 255px;
}
.program-card > div {
  padding: 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: start;
}
.program-card .tag {
  background: #edeae9;
  color: #585454;
  padding: 4px 9px;
  border-radius: 4px;
  font-size: 11px;
}
.program-card h3 {
  font-size: 24px;
  letter-spacing: -0.7px;
}
.program-card p {
  font-size: 16px;
  min-height: 58px;
  flex: 1;
}
.card-meta {
  width: 100%;
  padding-right: 36px;
  color: #636060;
  font-size: 13px;
  margin-top: 24px;
}
.card-arrow {
  right: 23px;
  bottom: 20px;
  border: 1px solid #dcd8d6;
  border-radius: 50%;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  font-size: 20px;
}
.program-footer {
  padding-top: 8px;
}
.field-grid {
  gap: 12px;
}
.field-grid > button {
  background: #f4f3f3;
  border: 1px solid #e6e3e1;
  border-radius: 9px;
  padding: 19px;
  font-size: 15px;
  transition: background 0.2s;
}
.field-grid > button:hover {
  background: #e9e7e6;
  color: #2a2929;
}
.field-grid > button span {
  font-size: 12px;
  color: #7b7777;
}
.featured {
  margin: 0 22px;
  border-radius: 18px;
  background: #eceae9;
  gap: 7%;
  padding-top: 68px;
  padding-bottom: 68px;
}
.featured-image {
  height: 565px;
}
.featured-image > img {
  border-radius: 160px 160px 14px 14px;
}
.featured-image > span {
  left: 50%;
  transform: translateX(-50%);
  top: auto;
  bottom: 22px;
  white-space: nowrap;
  border-radius: 30px;
  background: #fffefa;
  padding: 10px 17px;
  font-size: 11px;
}
.featured-copy h3 {
  font-size: 20px;
}
.featured-copy > p {
  font-size: 16px;
}
.feature-facts strong {
  font-size: 15px;
}
.feature-facts span {
  font-size: 12px;
}
.about-content .lead {
  font-size: 25px;
}
.about-stat {
  border: 0;
  background: #f2f0ef;
  border-radius: 12px;
  padding: 22px 28px;
  margin-top: 26px;
}
.about-stat strong {
  color: #555252;
}
.about-stat > span {
  font-size: 14px;
}
.mission {
  position: relative;
  background: #2a2929;
}
.mission h2 em,
.contact h2 em {
  color: #ff6b6b;
}
.mission .eyebrow,
.contact .eyebrow {
  color: #ff6b6b;
}
.mission-top > p,
.values p {
  color: #d3cecb;
  font-size: 16px;
}
.values {
  gap: 24px;
}
.values article {
  background: #ffffff06;
  border: 1px solid #ffffff26;
  border-radius: 12px;
  padding: 28px;
}
.values article > span {
  color: #ffe8e8;
  font-size: 12px;
}
.values h3 {
  font-size: 22px;
}
.support-grid {
  gap: 22px;
}
.support-grid article {
  padding: 27px 24px;
  border: 1px solid #e5e2e0;
  border-radius: 13px;
  background: #fffefa;
}
.support-symbol {
  background: #efedec;
  border: 0;
  width: 56px;
  height: 56px;
  font-size: 30px;
  color: #5d5959;
}
.support-grid h3 {
  font-size: 20px;
}
.support-grid p {
  font-size: 15px;
}
.support-grid .text-link {
  font-size: 13px;
}
.steps-section {
  background: #f3f2f2;
}
.steps article {
  border-color: #d4cfcd;
}
.steps article > span {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  background: #e6e3e2;
  border-radius: 50%;
  color: #555252;
  font-size: 23px;
}
.steps h3 {
  font-size: 20px;
}
.steps p {
  font-size: 16px;
}
.group-cards > button {
  border-radius: 14px;
  padding: 32px;
  background: #eceae9;
  transition: transform 0.2s;
}
.group-cards > button:nth-child(2) {
  background: #ffd8d8;
}
.group-cards > button:hover {
  outline: 0;
  transform: translateY(-5px);
  box-shadow: 0 12px 25px #2a29290d;
}
.group-cards h3 {
  font-size: 27px;
}
.group-cards p {
  font-size: 16px;
}
.group-cards b,
.group-cards button > span {
  font-size: 12px;
}
.fee-panel {
  border: 1px solid #ddd9d7;
  background: #efeeed;
  border-radius: 16px;
  padding: 34px;
}
.panel-label {
  font-size: 12px;
}
.fee-panel ul {
  font-size: 16px;
}
.fee-panel > p {
  font-size: 14px;
}
.explore {
  margin: 0 22px;
  border-radius: 18px;
  min-height: 590px;
}
.explore .eyebrow {
  color: #ff6b6b;
}
.explore h2 em {
  color: #ffe8e8;
}
.explore > img {
  object-position: center 67%;
}
.explore-overlay {
  background:
    linear-gradient(90deg, #1e1d1ddf, #29282826),
    linear-gradient(0deg, #1e1d1dbd, transparent);
}
.explore-links {
  gap: 16px;
}
.explore-links > button {
  padding: 15px 18px;
  background: #ffffff12;
  border: 1px solid #ffffff45;
  border-radius: 8px;
  backdrop-filter: blur(8px);
  align-items: center;
}
.explore-links > button:hover {
  background: #ffffff25;
}
.guide-grid > button {
  border-radius: 12px;
  border-top-width: 1px;
  background: #fffefa;
  position: relative;
  overflow: hidden;
}
.guide-grid > button:before {
  content: "";
  height: 5px;
  width: 52px;
  background: #d91e1e;
  border-radius: 4px;
  margin-bottom: 22px;
}
.guide-grid > button:nth-child(2):before {
  background: #8b8787;
}
.guide-grid > button:nth-child(3):before {
  background: #ff3131;
}
.guide-grid > button:nth-child(n) {
  border-color: #e3e0de;
}
.guide-grid > button > span {
  font-size: 12px;
}
.guide-grid h3 {
  font-size: 24px;
}
.guide-grid p {
  font-size: 16px;
}
.guide-grid b {
  font-size: 14px;
}
.partners {
  background: #f3f2f2;
}
.partner-types span {
  border-radius: 30px;
  background: #fffefa;
  border-color: #dfdbd9;
  font-size: 14px;
}
.faq details {
  border: 1px solid #e2dfde;
  margin-bottom: 12px;
  padding: 20px 24px;
  border-radius: 9px;
}
.faq details[open] {
  background: #f2f1f0;
}
.faq summary {
  font-size: 16px;
  align-items: center;
}
.faq summary:after {
  color: #635f5f;
}
.faq details p {
  font-size: 16px;
}
.contact {
  margin: 0 22px;
  border-radius: 18px;
  padding-top: 72px;
  padding-bottom: 72px;
  background: #2a2929;
}
.contact p {
  color: #d6d1ce;
}
.contact .button {
  min-width: 215px;
}
footer {
  padding-top: 65px;
}
footer h3 {
  font-size: 15px;
}
footer a:not(.brand),
footer button {
  font-size: 14px;
  line-height: 1.9;
}
.footer-bottom {
  font-size: 12px;
}
.mega {
  border-radius: 0 0 14px 14px;
  box-shadow: 0 22px 40px #2a292920;
}
.mega-side button.active {
  background: #ff6b6b;
}
.mega-links button {
  border-color: #e8e6e5;
}
dialog {
  background: #fffefa;
  border-radius: 16px;
}
dialog::backdrop {
  background: #1f1d1db8;
}
dialog input,
dialog textarea {
  border-radius: 7px;
  border-color: #d1cbc8;
}
dialog .facts {
  border-radius: 10px;
  background: #efedec;
}
.program-list small {
  font-size: 12px;
  color: #716d6d;
}
@media (min-width: 1600px) {
  .hero {
    min-height: 820px;
  }
  .hero-copy {
    padding-top: 92px;
  }
  .hero-inset {
    width: 255px;
    height: 295px;
  }
}
@media (max-width: 1150px) {
  nav {
    gap: 14px;
  }
  .hero-copy {
    width: 72%;
    padding-left: 4vw;
  }
  .hero-inset {
    width: 175px;
    height: 215px;
    right: 4%;
  }
  .finder {
    gap: 16px;
    padding: 25px;
  }
  .finder-intro strong {
    font-size: 18px;
  }
  .pathway-grid {
    gap: 10px;
  }
  .pathway-grid > button {
    padding: 22px 15px;
  }
  .pathway-grid h3 {
    font-size: 20px;
  }
  .pathway-grid p {
    font-size: 14px;
  }
  .path-bottom {
    font-size: 11px;
  }
  .support-grid article {
    padding: 24px 18px;
  }
}
@media (max-width: 900px) {
  .header {
    height: 78px;
  }
  .hero {
    min-height: 670px;
    margin: 0 14px;
  }
  .hero-copy {
    width: 77%;
    padding: 52px 5vw 118px;
  }
  .hero h1 {
    font-size: clamp(3rem, 6.5vw, 4rem);
  }
  .hero-inset {
    width: 150px;
    height: 185px;
    bottom: 123px;
    right: 3%;
    opacity: 0.9;
  }
  .hero-visual:after {
    background: linear-gradient(90deg, #1c1a1ae8, #29282877);
  }
  .finder {
    grid-template-columns: 1fr 1fr auto;
    margin: -44px 5% 0;
    gap: 18px;
  }
  .finder-intro {
    grid-column: 1/-1;
  }
  .finder label {
    padding: 0;
    border: 0;
  }
  .finder-intro strong {
    font-size: 20px;
  }
  .section {
    padding-top: 70px;
    padding-bottom: 70px;
  }
  .trust-strip {
    margin: 0 5%;
  }
  .pathway-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .pathway-grid > button {
    padding: 24px;
  }
  .program-card > img {
    height: 190px;
  }
  .program-card > div {
    padding: 21px;
  }
  .program-card h3 {
    font-size: 21px;
  }
  .program-card p {
    font-size: 15px;
  }
  .card-meta {
    font-size: 12px;
    padding-right: 22px;
  }
  .card-arrow {
    right: 16px;
    width: 26px;
    height: 26px;
  }
  .featured {
    margin: 0 14px;
  }
  .featured-image {
    height: 515px;
  }
  .featured-image > span {
    font-size: 10px;
    padding: 9px 12px;
  }
  .values {
    gap: 16px;
  }
  .values article {
    padding: 23px;
  }
  .values h3 {
    font-size: 20px;
  }
  .support-grid article {
    padding: 27px;
  }
  .explore,
  .contact {
    margin: 0 14px;
  }
  .contact .button {
    min-width: auto;
  }
}
@media (max-width: 600px) {
  .announcement {
    font-size: 10px;
    padding: 7px 4%;
  }
  .hero {
    margin: 0 10px;
    min-height: 645px;
    border-radius: 12px;
  }
  .hero-copy {
    width: 100%;
    padding: 39px 6% 113px;
  }
  .hero h1 {
    font-size: clamp(2.6rem, 10.8vw, 3.75rem);
    line-height: 1.08;
  }
  .hero-copy .eyebrow {
    font-size: 10px;
  }
  .hero-copy > p {
    font-size: 16px;
    max-width: 100%;
  }
  .hero-actions {
    gap: 18px;
    align-items: start;
    flex-direction: column;
  }
  .hero-actions .button {
    font-size: 14px;
  }
  .hero-actions .text-link {
    font-size: 13px;
  }
  .hero-inset {
    display: none;
  }
  .hero-main-photo {
    object-position: 62% center;
  }
  .hero-visual:after {
    background:
      linear-gradient(90deg, #201f1fe8, #29282880),
      linear-gradient(0deg, #29282877, transparent);
  }
  .vertical-caption {
    display: none;
  }
  .destination-label {
    bottom: 64px;
    right: 6%;
  }
  .destination-label strong {
    font-size: 21px;
  }
  .finder {
    margin: -35px 5% 0;
    padding: 23px;
    grid-template-columns: 1fr;
    gap: 18px;
    border-radius: 12px;
  }
  .finder-intro {
    grid-column: auto;
  }
  .finder label {
    border: 1px solid #dedbd9;
    border-radius: 8px;
    padding: 10px 13px;
    font-size: 12px;
  }
  .finder select {
    font-size: 15px;
  }
  .finder .button {
    grid-column: auto;
  }
  .trust-strip {
    padding-top: 27px;
    gap: 22px 14px;
  }
  .trust-strip > div {
    flex-direction: column;
    gap: 9px;
  }
  .trust-strip strong {
    font-size: 13px;
  }
  .trust-strip p {
    font-size: 12px;
  }
  .section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .section-heading {
    margin-bottom: 28px;
  }
  .section-heading > p {
    font-size: 16px;
  }
  h2 {
    font-size: clamp(2rem, 8.8vw, 2.65rem);
  }
  .eyebrow {
    font-size: 11px;
  }
  .pathway-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .pathway-grid > button {
    padding: 25px;
    display: grid;
    grid-template-columns: 1fr 46px;
    column-gap: 15px;
  }
  .pathway-icon {
    grid-column: 2;
    grid-row: 1/3;
    margin: 0;
    width: 40px;
    height: 40px;
  }
  .pathway-grid h3 {
    font-size: 25px;
    margin: 12px 0;
  }
  .pathway-grid p,
  .path-bottom {
    grid-column: 1/-1;
  }
  .pathway-grid p {
    font-size: 16px;
    margin-bottom: 14px;
  }
  .path-bottom {
    font-size: 13px;
  }
  .category-tabs {
    gap: 8px;
  }
  .category-tabs button {
    font-size: 14px;
    padding: 10px 17px;
  }
  .program-card > img {
    height: 235px;
  }
  .program-card > div {
    padding: 25px;
  }
  .program-card h3 {
    font-size: 25px;
  }
  .program-card p {
    font-size: 16px;
    min-height: 0;
  }
  .card-meta {
    font-size: 13px;
  }
  .card-arrow {
    width: 32px;
    height: 32px;
    right: 23px;
    bottom: 18px;
  }
  .field-grid > button {
    padding: 18px;
  }
  .featured {
    margin: 0 10px;
    padding: 35px 6% 45px;
  }
  .featured-image {
    height: 370px;
  }
  .featured-image > img {
    border-radius: 120px 120px 12px 12px;
  }
  .featured-image > span {
    font-size: 11px;
  }
  .feature-facts {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .feature-facts span {
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
  }
  .feature-facts strong {
    font-size: 14px;
  }
  .about-stat {
    padding: 20px;
    gap: 18px;
  }
  .about-stat > span {
    font-size: 13px;
  }
  .values article {
    padding: 25px;
  }
  .support-grid {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .support-grid article {
    padding: 26px;
  }
  .support-grid p {
    font-size: 16px;
  }
  .support-grid .text-link {
    font-size: 14px;
  }
  .steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .steps article {
    display: grid;
    grid-template-columns: 47px 1fr;
    column-gap: 17px;
  }
  .steps article > span {
    width: 43px;
    height: 43px;
    font-size: 19px;
    grid-row: 1/3;
  }
  .steps h3 {
    margin: 0 0 8px;
  }
  .steps p {
    grid-column: 2;
    font-size: 16px;
  }
  .fee-panel {
    padding: 25px;
  }
  .fee-panel ul {
    font-size: 15px;
  }
  .explore {
    margin: 0 10px;
    min-height: 640px;
    padding-top: 45px;
  }
  .explore-links {
    gap: 10px;
  }
  .explore-links > button {
    font-size: 13px;
    padding: 13px;
  }
  .guide-grid h3 {
    font-size: 24px;
  }
  .partner-types span {
    font-size: 13px;
  }
  .faq details {
    padding: 18px;
  }
  .faq summary {
    font-size: 16px;
  }
  .contact {
    margin: 0 10px;
    padding: 46px 6%;
  }
  .contact h2 {
    font-size: 34px;
  }
  footer a:not(.brand),
  footer button {
    font-size: 13px;
  }
  .footer-bottom {
    font-size: 12px;
  }
  .mega {
    border-radius: 12px;
  }
  .mega-links button {
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    transition: none !important;
  }
}

/* Screenshot replica: 1904 x 893 reference, with responsive stacking below 1000px. */
.header.reference-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 30;
  height: 82px;
  padding: 0 5.93%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.reference-brand {
  display: block;
  width: 179px;
  height: auto;
}
.reference-brand img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.reference-header nav {
  display: flex;
  gap: 35px;
  font-size: 16px;
  font-weight: 600;
  color: white;
}
.reference-header nav > button {
  font: inherit;
}
.reference-header nav > button:not(.button) {
  padding: 20px 0;
}
.reference-header nav > a:hover,
.reference-header nav > button:hover {
  color: #ffe8e8;
}
.reference-header nav > button > span {
  margin-left: 4px;
  font-size: 15px;
}
.reference-header-actions {
  display: flex;
  gap: 42px;
  align-items: center;
  justify-self: end;
}
.reference-pill {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 26px;
  min-width: 180px;
  height: 54px;
  padding: 0 26px;
  border-radius: 40px;
  background: #ffffff;
  color: #111111;
  font:
    500 16px/1 "Plus Jakarta Sans",
    sans-serif;
  border: 0;
  white-space: nowrap;
  box-shadow: none;
  transition: background 0.2s;
}
.reference-pill:hover {
  background: #ffe8e8;
}
.reference-pill > span {
  font-size: 17px;
}
.reference-cart {
  position: relative;
  padding: 0;
  width: 41px;
  height: 41px;
  color: #ffffff;
}
.reference-cart svg {
  width: 40px;
  height: 40px;
}
.reference-cart > span {
  position: absolute;
  right: -1px;
  top: -1px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  background: #ffffff;
  border-radius: 50%;
  color: #111111;
  font-size: 12px;
  font-weight: 600;
}
.hero.reference-hero {
  isolation: isolate;
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100svh;
  min-height: 760px;
  border-radius: 0;
  overflow: hidden;
  background: #141414;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.reference-hero-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
}
.reference-hero-copy {
  position: absolute;
  left: 5.93%;
  top: 29.6%;
  width: 615px;
}
.hero.reference-hero h1 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 60px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -2.4px;
  color: #ffffff;
  text-wrap: initial;
  margin: 0;
}
.reference-hero-copy > p {
  color: #f2f2f2;
  font:
    500 16px/28px "Plus Jakarta Sans",
    sans-serif;
  letter-spacing: -0.32px;
  margin: 20px 0 37px;
  max-width: 600px;
}
.reference-volunteer-card {
  position: absolute;
  right: 5.83%;
  bottom: 11.62%;
  width: 750px;
  height: 240px;
  padding: 15px;
  display: flex;
  gap: 40px;
  align-items: center;
  background: #ffe8e8;
  border: 0;
  border-radius: 15px;
  color: #080808;
  text-align: left;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.reference-card-photos {
  display: flex;
  gap: 15px;
  height: 210px;
  flex: 0 0 355px;
}
.reference-card-photos img {
  border-radius: 10px;
  height: 210px;
  object-fit: cover;
}
.reference-card-photos img:first-child {
  width: 200px;
}
.reference-card-photos img:last-child {
  width: 210px;
}
.reference-card-copy {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: start;
}
.reference-card-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.reference-card-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reference-card-text strong {
  font:
    500 20px/1.25 "Plus Jakarta Sans",
    sans-serif;
  letter-spacing: -0.7px;
}
.reference-card-text > span {
  font:
    400 16px/28px "Plus Jakarta Sans",
    sans-serif;
  color: #606060;
}
.reference-header .mega {
  color: var(--ink);
  font-family: "Plus Jakarta Sans", sans-serif;
}
.reference-hero + .finder {
  margin-top: 35px;
}
@media (min-width: 2000px) {
  .reference-hero-copy {
    top: 30%;
  }
  .hero.reference-hero h1 {
    font-size: 3.15vw;
  }
}
@media (min-width: 1001px) and (max-width: 1500px) {
  .reference-header nav {
    gap: 23px;
    font-size: 14px;
  }
  .reference-header-actions {
    gap: 23px;
  }
  .reference-brand {
    width: 160px;
  }
  .reference-header .reference-pill {
    min-width: 155px;
    font-size: 14px;
    padding: 0 22px;
  }
  .hero.reference-hero h1 {
    font-size: clamp(44px, 3.8vw, 57px);
  }
  .reference-hero-copy {
    width: 48%;
    top: 28%;
  }
  .reference-hero-copy > p {
    font-size: 15px;
    max-width: 490px;
  }
  .reference-desktop-break {
    display: none;
  }
  .reference-volunteer-card {
    width: 570px;
    height: 205px;
    gap: 23px;
    bottom: 6%;
  }
  .reference-card-photos {
    flex-basis: 255px;
    height: 175px;
    gap: 12px;
  }
  .reference-card-photos img {
    height: 175px;
  }
  .reference-card-photos img:first-child {
    width: 95px;
  }
  .reference-card-photos img:last-child {
    width: 148px;
  }
  .reference-card-copy {
    gap: 22px;
  }
  .reference-card-text strong {
    font-size: 18px;
  }
  .reference-card-text > span {
    font-size: 14px;
    line-height: 24px;
  }
}
@media (max-width: 1000px) {
  .header.reference-header {
    height: 80px;
    display: flex;
    justify-content: space-between;
    padding: 0 6%;
  }
  .reference-header .mobile-toggle {
    display: block;
    color: white;
    order: 3;
    font-size: 26px;
  }
  .reference-header-actions {
    margin-left: auto;
    margin-right: 24px;
    gap: 20px;
  }
  .reference-header nav {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background: #1d1c1c;
    padding: 20px 6%;
    gap: 8px;
    flex-direction: column;
    align-items: stretch;
  }
  .reference-header nav.open {
    display: flex;
  }
  .reference-header nav > button:not(.button),
  .reference-header nav > a {
    padding: 10px 0;
  }
  .hero.reference-hero {
    height: auto;
    min-height: 950px;
    padding: 155px 6% 45px;
  }
  .reference-hero-background {
    object-position: 65% center;
    filter: brightness(0.7);
  }
  .reference-hero-copy {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 620px;
  }
  .hero.reference-hero h1 {
    font-size: 54px;
  }
  .reference-hero-copy > p {
    max-width: 560px;
  }
  .reference-volunteer-card {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 85px 0 0 auto;
    width: min(750px, 100%);
    height: auto;
    min-height: 225px;
    gap: 25px;
  }
  .reference-card-photos {
    flex-basis: 45%;
    height: 195px;
    gap: 12px;
  }
  .reference-card-photos img {
    height: 195px;
    min-width: 0;
  }
  .reference-card-photos img:first-child {
    width: 50%;
  }
  .reference-card-photos img:last-child {
    width: calc(63% - 12px);
  }
  .reference-card-copy {
    gap: 25px;
  }
  .reference-card-text > span {
    font-size: 15px;
    line-height: 25px;
  }
  .reference-desktop-break {
    display: none;
  }
}
@media (max-width: 600px) {
  .reference-brand {
    width: 155px;
  }
  .reference-header-actions {
    display: none;
  }
  .hero.reference-hero {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    min-height: 100dvh;
    padding: 135px 6% max(64px, env(safe-area-inset-bottom) + 48px);
  }
  .hero.reference-hero h1 {
    font-size: clamp(33px, 8.7vw, 48px);
    line-height: 1.16;
    letter-spacing: -1.4px;
  }
  .reference-hero-copy > p {
    font-size: 15px;
    line-height: 26px;
    margin-top: 22px;
    margin-bottom: 28px;
  }
  .reference-pill {
    min-width: 165px;
    height: 52px;
    font-size: 15px;
  }
  .reference-volunteer-card {
    margin-top: 32px;
    margin-bottom: 0;
    padding: 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }
  .reference-card-photos {
    height: 170px;
    flex-basis: auto;
  }
  .reference-card-photos img {
    height: 170px;
  }
  .reference-card-copy {
    flex-direction: row;
    align-items: start;
    gap: 15px;
    padding: 0 5px 10px;
  }
  .reference-card-icon {
    flex-shrink: 0;
  }
  .reference-card-text {
    gap: 10px;
  }
  .reference-card-text strong {
    font-size: 19px;
  }
  .reference-card-text > span {
    font-size: 15px;
    line-height: 25px;
  }
}

/* Logo-inspired dropdowns: white surfaces, dark text, and red accents. */
.header .mega {
  --dropdown-notch-left: 0px;
  --dropdown-notch-width: 80px;
  top: calc(100% - 1px);
  right: auto;
  left: 24px;
  width: min(1120px, calc(100vw - 48px));
  padding: 0;
  max-height: min(660px, calc(100dvh - 112px));
  overflow: visible;
  background: #ffffff;
  border: 1px solid #eeeceb;
  border-radius: 0;
  box-shadow: 0 20px 45px #1b191914;
  color: #222020;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.header .mega::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: var(--dropdown-notch-left);
  width: var(--dropdown-notch-width);
  height: 12px;
  background: #ffffff;
}
.dropdown-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  max-height: min(620px, calc(100dvh - 152px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dropdown-column {
  padding: 24px 21px 22px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 246px;
}
.dropdown-column + .dropdown-column,
.dropdown-category > .dropdown-column {
  border-left: 1px solid #eeeceb;
}
/* Groups one category's two columns in the Programs panel without adding a grid level. */
.dropdown-category {
  display: contents;
}
.dropdown-column h2 {
  margin: 0 0 15px;
  color: #d91e1e;
  font:
    400 10px/1.5 "Plus Jakarta Sans",
    sans-serif;
  letter-spacing: 0.015em;
  text-wrap: initial;
}
.dropdown-item {
  padding: 9px 14px;
  min-height: 39px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  width: 100%;
  text-align: left;
  color: #454343;
  font:
    400 15px/1.35 "Plus Jakarta Sans",
    sans-serif;
  transition:
    color 0.16s ease,
    background-color 0.16s ease;
}
.dropdown-item.featured-item {
  color: #222020;
  font-size: 17px;
  padding: 12px 14px;
  border-bottom: 1px solid #eeeceb;
}
.dropdown-arrow {
  flex-shrink: 0;
  font-size: 17px;
  color: #d91e1e;
}
.dropdown-column:not(.dropdown-primary) .dropdown-arrow {
  opacity: 0;
}
.dropdown-item:hover,
.dropdown-item:focus-visible {
  color: #d91e1e;
}
.dropdown-item:hover .dropdown-arrow,
.dropdown-item:focus-visible .dropdown-arrow,
.dropdown-item.selected-category .dropdown-arrow {
  color: #d91e1e;
  opacity: 1;
}
.dropdown-overview {
  margin-top: auto;
  padding: 29px 14px 0;
  align-self: start;
  font:
    400 14px/1.4 "Plus Jakarta Sans",
    sans-serif;
  text-align: left;
  color: #222020;
  display: inline-flex;
  gap: 10px;
}
.dropdown-overview span {
  color: #d91e1e;
  font-size: 18px;
}
.dropdown-overview:hover {
  color: #d91e1e;
}
.reference-header.dropdown-open nav > a,
.reference-header.dropdown-open nav > button {
  color: #222020;
}
.reference-header.dropdown-open nav > button[aria-expanded="true"],
.reference-header.dropdown-open nav > a:hover,
.reference-header.dropdown-open nav > button:hover {
  color: #d91e1e;
}
.reference-header nav > button[aria-expanded="true"] > span {
  display: inline-block;
  transform: rotate(180deg);
}

@media (max-width: 1000px) {
  .header .mega {
    position: fixed;
    inset: 140px 4% 45px;
    width: auto;
    max-height: none;
    overflow: visible;
  }
  .header .mega::before {
    display: none;
  }
  .dropdown-grid {
    max-height: 100%;
    grid-template-columns: 1.15fr 1fr 1fr;
  }
  .dropdown-column {
    padding: 20px 16px;
  }
  .dropdown-item {
    font-size: 14px;
  }
  .dropdown-item.featured-item {
    font-size: 15px;
  }
}
@media (max-width: 600px) {
  .header .mega {
    top: 130px;
  }
  .dropdown-grid {
    grid-template-columns: 1fr;
  }
  .dropdown-column {
    min-height: 0;
    padding: 22px;
  }
  .dropdown-column + .dropdown-column,
  .dropdown-category > .dropdown-column {
    border-left: 0;
    border-top: 1px solid #eeeceb;
  }
  .dropdown-column h2 {
    font-size: 11px;
  }
  .dropdown-item,
  .dropdown-item.featured-item {
    font-size: 16px;
    min-height: 44px;
  }
  .dropdown-column:not(.dropdown-primary) .dropdown-arrow {
    opacity: 1;
  }
  .dropdown-overview {
    padding-top: 22px;
  }
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
  background-color: #fff1f1;
}
.dropdown-item.selected-category {
  color: #d91e1e;
}

/* Requested Internship Nepal navigation; preserve the dropdown layout. */
.header.internship-header {
  display: flex;
  justify-content: space-between;
  gap: 28px;
}
.internship-header > .brand {
  color: #ffffff;
  flex-shrink: 0;
}
.internship-header > .brand .brand-mark {
  color: #ffffff;
}
.internship-header > .brand .brand-mark > span,
.internship-header > .brand strong > span {
  color: #ffe8e8;
}
.internship-header nav {
  gap: 26px;
  align-items: center;
}
.internship-header nav > .reference-pill {
  color: #111111;
  padding: 0 24px;
  min-width: 154px;
  height: 50px;
  font-weight: 500;
  font-size: 15px;
}
.internship-header.dropdown-open nav > .reference-pill,
.internship-header nav > .reference-pill:hover {
  color: #111111;
}
@media (min-width: 1001px) and (max-width: 1250px) {
  .header.internship-header {
    padding-left: 4%;
    padding-right: 4%;
    gap: 20px;
  }
  .internship-header nav {
    gap: 17px;
    font-size: 13px;
  }
  .internship-header nav > .reference-pill {
    min-width: 130px;
    padding: 0 18px;
    font-size: 13px;
  }
}
@media (max-width: 1000px) {
  .internship-header nav {
    align-items: stretch;
    gap: 8px;
  }
  .internship-header nav > .reference-pill {
    width: fit-content;
    margin: 6px 0;
  }
  .internship-header .mobile-toggle {
    margin-left: auto;
  }
}

/* Supplied header logo, preserving its original artwork and aspect ratio. */
.internship-header > .header-logo {
  display: block;
  width: 180px;
  flex: 0 0 215px;
}
.internship-header > .header-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 1000px) {
  .internship-header > .header-logo {
    width: 160px;
    flex-basis: 160px;
  }
}

/* White header with readable navigation and consistently padded controls. */
.header.reference-header.internship-header {
  position: relative;
  inset: auto;
  height: auto;
  min-height: 88px;
  padding-top: 8px;
  padding-bottom: 8px;
  align-items: center;
  background: #ffffff;
  color: #222020;
  border-bottom: 1px solid #eeeceb;
  box-shadow: 0 4px 18px rgb(0 0 0 / 5%);
}
.header.internship-header nav {
  color: #222020;
}
.header.internship-header nav > a,
.header.internship-header nav > button:not(.reference-pill) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #222020;
  white-space: nowrap;
}
.header.internship-header nav > a:hover,
.header.internship-header nav > button:not(.reference-pill):hover,
.header.internship-header nav > button[aria-expanded="true"] {
  color: #d91e1e;
}
.header.internship-header nav > button > span {
  margin-left: 0;
}
.header.internship-header nav > button.reference-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 24px;
  background: #d91e1e;
  color: #ffffff;
  border-radius: 999px;
}
.header.internship-header nav > button.reference-pill:hover {
  background: #d91e1e;
  color: #ffffff;
}
.header.internship-header .mobile-toggle {
  color: #222020;
}
.header.internship-header a:focus-visible,
.header.internship-header button:focus-visible {
  outline: 2px solid #d91e1e;
  outline-offset: 4px;
}
@media (max-width: 1000px) {
  .header.reference-header.internship-header {
    min-height: 80px;
  }
  .header.internship-header nav {
    top: 100%;
    background: #ffffff;
    border-top: 1px solid #eeeceb;
    box-shadow: 0 12px 18px rgb(0 0 0 / 8%);
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
  }
  .header.internship-header nav > a,
  .header.internship-header nav > button:not(.reference-pill) {
    justify-content: space-between;
    padding: 12px 0;
  }
  .header.internship-header nav > button.reference-pill {
    flex-shrink: 0;
  }
}

/* Consistent chevrons for dropdown triggers, aligned independently of the font. */
.header.internship-header nav > button[data-menu] > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  font-size: 0;
  line-height: 1;
  transform: none;
}
.header.internship-header nav > button[data-menu] > span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}
.header.internship-header
  nav
  > button[data-menu][aria-expanded="true"]
  > span::before {
  transform: translateY(2px) rotate(225deg);
}
@media (prefers-reduced-motion: reduce) {
  .header.internship-header nav > button[data-menu] > span::before {
    transition: none;
  }
}

/* Impact: centered statement plus three summary cards, below the hero. */
.impact {
  font-family: "Plus Jakarta Sans", sans-serif;
  background: #ffffff;
}
.impact-intro {
  max-width: 1040px;
  margin: 0 auto 54px;
  text-align: center;
}
.impact-intro .eyebrow {
  justify-content: center;
  color: var(--orange);
  margin-bottom: 18px;
}
.impact-intro > p {
  color: #1b1b1b;
  font-size: clamp(24px, 2.3vw, 35px);
  line-height: 1.38;
  font-weight: 500;
  letter-spacing: -0.9px;
}
.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.impact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 400px;
  padding: 28px;
  border-radius: 20px;
  overflow: hidden;
}
.impact-card-blue {
  background: #ffe8e8;
}
.impact-card-green {
  background: #f0efee;
}
.impact-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.impact-icon {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  display: grid;
  place-items: center;
  background: #ffffff;
  border-radius: 50%;
  color: var(--ink);
}
.impact-icon svg {
  width: 32px;
  height: 32px;
}
.impact-card-blue .impact-icon {
  color: #ff3131;
}
.impact-card-green .impact-icon {
  color: #d91e1e;
}
.impact-figure {
  font:
    400 clamp(38px, 3.4vw, 48px)/1.05 "Plus Jakarta Sans",
    sans-serif;
  letter-spacing: -1.6px;
  color: #1b1b1b;
}
.impact-card-bottom {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: start;
}
.impact-note {
  font-size: 14px;
  font-weight: 500;
  color: #5d6763;
}
.impact-statement {
  font-size: 21px;
  line-height: 1.45;
  letter-spacing: -0.5px;
  color: #5d6763;
}
.impact-statement strong {
  color: #1b1b1b;
  font-weight: 600;
}
.impact-photo-label {
  font-size: 15px;
  font-weight: 600;
  color: #1b1b1b;
}
.impact-card-photo {
  padding: 0;
  background: var(--ink);
}
.impact-card-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Deep scrim so the white text stays readable over a bright, busy photo. */
.impact-card-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #0d0c0cf7 0%, #0d0c0ce0 30%, #0d0c0c9e 52%, #0d0c0c4d 70%, #0d0c0c00 88%);
}
.impact-photo-copy {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 12px #0d0c0c8c;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: start;
  padding: 28px;
  color: #ffffff;
}
.impact-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
}
.impact-badge b {
  color: var(--lime);
  font-size: 16px;
}
.impact-card-photo .impact-figure {
  color: #ffffff;
}
.impact-photo-copy .impact-photo-label {
  color: #ffffff;
}
.impact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.impact-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid #c6bfbc;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: #1b1b1b;
  background: transparent;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.impact-pill:hover {
  background: #ffffff;
  border-color: #ffffff;
}
@media (max-width: 1000px) {
  .impact-intro {
    margin-bottom: 40px;
  }
  .impact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .impact-card {
    min-height: 340px;
    padding: 24px;
  }
  .impact-photo-copy {
    padding: 24px;
  }
  .impact-card-photo {
    grid-column: 1 / -1;
    min-height: 300px;
    order: -1;
  }
}
@media (max-width: 600px) {
  .impact-intro {
    margin-bottom: 28px;
  }
  .impact-intro > p {
    letter-spacing: -0.4px;
    line-height: 1.34;
  }
  .impact-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .impact-card {
    min-height: 0;
    padding: 22px;
    gap: 40px;
  }
  .impact-card-photo {
    min-height: 320px;
    gap: 0;
  }
  .impact-photo-copy {
    padding: 22px;
  }
  .impact-statement {
    font-size: 19px;
  }
}

/* Featured Programs: editorial cards that rise in on scroll, over an optional map of Nepal. */
.featured-programs {
  --fp-accent: var(--red-deep);
  --fp-lead: var(--red-strong);
  --fp-dark: var(--charcoal);
  --fp-tint: #f6f5f4;
  --fp-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--fp-tint);
}
.fp-map {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  /* Sized so the whole country stays recognisable around the card row. */
  width: min(1400px, 100%);
  max-width: none;
  height: auto;
  transform: translate(-50%, -48%);
  pointer-events: none;
  user-select: none;
}
/* Heading row: title on the left, slider arrows on the right. */
.fp-top {
  margin: 0 0 22px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
.fp-heading {
  text-align: left;
}
.featured-programs h2 {
  letter-spacing: -1.4px;
}
.fp-heading > p {
  margin-top: 10px;
  font-size: 17px;
}
.fp-nav {
  display: flex;
  gap: 10px;
  flex: none;
}
.fp-arrow {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 20px;
  box-shadow: 0 4px 14px #2b2b2b0f;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.25s var(--fp-ease),
    opacity 0.2s;
}
.fp-arrow .fp-icon {
  stroke-width: 2.2;
}
.fp-arrow:hover:not(:disabled) {
  background: var(--fp-lead);
  border-color: var(--fp-lead);
  color: #fff;
  transform: scale(1.06);
}
.fp-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}
.fp-arrow:focus-visible {
  outline: 2px solid var(--fp-lead);
  outline-offset: 3px;
}

/* Slider track: native horizontal scrolling with snap points, so swipe, trackpad and wheel all work. */
.fp-grid {
  --fp-gap: 20px;
  --fp-per-view: 4;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - (var(--fp-per-view) - 1) * var(--fp-gap)) / var(--fp-per-view)
  );
  gap: var(--fp-gap);
  /* Full section width like the other sections. The 16px side padding gives shadows room and is
     cancelled by the negative margin, so the cards line up with the section content edges. */
  margin: 0 -16px;
  /* Vertical room so hover lifts and shadows are not clipped by the scroll container. */
  padding: 14px 16px 36px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.fp-grid::-webkit-scrollbar {
  display: none;
}
.fp-grid:focus-visible {
  outline: 2px solid var(--fp-lead);
  outline-offset: -2px;
  border-radius: 16px;
}
.fp-grid > .fp-card {
  scroll-snap-align: start;
}

/* Card shell */
.fp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 1px 2px #2b2b2b0f,
    0 10px 28px #2b2b2b14;
  transition:
    transform 0.45s var(--fp-ease),
    box-shadow 0.45s var(--fp-ease);
}
.fp-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 2px 4px #2b2b2b14,
    0 26px 50px #2b2b2b24;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.fp-card:focus-within {
  /* outline: 2px solid var(--fp-lead);
  outline-offset: 3px; */
}

/* Photo with category, wishlist and location overlaid */
.fp-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper);
}
.fp-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--fp-ease);
}
.fp-card:hover .fp-media img {
  transform: scale(1.07);
}
.fp-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, #1a1a1acc 0%, #1a1a1a33 34%, #1a1a1a00 58%);
}
.fp-chip {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  padding: 6px 11px 5px;
  border-radius: 999px;
  background: var(--fp-lead);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
/* Inline line icons; size follows font-size, colour follows currentColor. */
.fp-icon {
  flex: none;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fp-wish {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffffe6;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: 17px;
  box-shadow: 0 4px 14px #1a1a1a26;
  /* Colour and fill change instantly; the pop animation gives the feedback. */
  transition: transform 0.25s var(--fp-ease);
}
.fp-wish:hover {
  transform: scale(1.1);
  color: var(--fp-lead);
}
.fp-wish[aria-pressed="true"] {
  color: var(--fp-lead);
}
.fp-wish[aria-pressed="true"] .fp-icon {
  fill: currentColor;
}
.fp-wish.is-popping .fp-icon {
  animation: fp-pop 0.45s var(--fp-ease);
}
.fp-wish:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.fp-place {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.fp-place .fp-icon {
  font-size: 15px;
  color: var(--red-soft);
}

/* Body */
.fp-body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 20px 0;
}
/* Red rule that draws across the top of the body on hover. */
/* .fp-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--fp-lead);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--fp-ease);
} */
.fp-card:hover .fp-body::before {
  transform: scaleX(1);
}
.fp-card h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.3px;
}
.fp-title {
  padding: 0;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: color 0.2s;
}
/* Stretches the title so the whole card opens the program. */
.fp-title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.fp-title:focus-visible {
  outline: none;
}
.fp-card:hover .fp-title {
  color: var(--fp-lead);
}
.fp-desc {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.fp-meta {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.fp-meta li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.fp-meta .fp-icon {
  width: 18px;
  height: 18px;
  padding: 4px;
  border-radius: 50%;
  background: var(--red-tint);
  color: var(--fp-lead);
  stroke-width: 3.2;
  transform: translateY(4px);
}
.fp-meta strong {
  font-weight: 700;
}
.fp-info {
  position: relative;
  z-index: 2;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 2px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.2s;
}
.fp-info .fp-icon {
  font-size: 15px;
}
.fp-info:hover {
  color: var(--fp-lead);
}

/* Actions */
.fp-actions {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 18px 20px 20px;
  margin-top: auto;
}
.fp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 10px;
  white-space: nowrap;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.2s;
}
.fp-btn--ghost {
  border: 1px solid var(--line);
  color: var(--ink);
}
.fp-btn--ghost .fp-icon {
  font-size: 15px;
  transition: transform 0.3s var(--fp-ease);
}
.fp-btn--ghost:hover {
  border-color: var(--ink);
}
.fp-btn--ghost:hover .fp-icon {
  transform: translateX(4px);
}
.fp-btn--primary {
  background: var(--fp-lead);
  color: #fff;
}
.fp-btn--primary:hover {
  background: var(--fp-accent);
  transform: translateY(-2px);
}
.fp-btn:focus-visible {
  outline: 2px solid var(--fp-lead);
  outline-offset: 2px;
}

/* Below the track: position dots and the link to the full program list. */
.fp-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.fp-dots {
  display: flex;
  align-items: center;
  gap: 2px;
}
.fp-dot {
  height: 24px;
  padding: 0 5px;
  display: grid;
  place-items: center;
}
.fp-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d6d0cd;
  transition:
    width 0.4s var(--fp-ease),
    background-color 0.3s;
}
.fp-dot:hover::before {
  background: #aaa3a0;
}
.fp-dot[aria-current="true"]::before {
  width: 30px;
  background: var(--fp-lead);
}
.fp-dot:focus-visible {
  outline: 2px solid var(--fp-lead);
  outline-offset: 1px;
  border-radius: 999px;
}

/* Scroll reveal: main.js adds .fp-reveal, then .is-visible (and a stagger delay --d) per card
   as it comes into view, including cards slid in later. A backwards-fill animation, not a
   transition, so hover transforms stay instant afterwards. */
.fp-reveal .fp-card:not(.is-visible) {
  opacity: 0;
}
.fp-reveal .fp-card.is-visible {
  animation: fp-rise 0.8s var(--fp-ease) var(--d, 0ms) backwards;
}
.fp-reveal .fp-card.is-visible .fp-media img {
  animation: fp-settle 1.4s var(--fp-ease) var(--d, 0ms) backwards;
}
@keyframes fp-rise {
  from {
    opacity: 0;
    transform: translateY(36px);
  }
}
@keyframes fp-settle {
  from {
    transform: scale(1.18);
  }
}
@keyframes fp-pop {
  40% {
    transform: scale(1.45);
  }
  70% {
    transform: scale(0.9);
  }
}

@media (max-width: 1200px) {
  .fp-grid {
    --fp-per-view: 3;
  }
}
@media (max-width: 1000px) {
  .fp-grid {
    --fp-gap: 20px;
    --fp-per-view: 2;
  }
  .fp-actions {
    grid-template-columns: 1fr 1fr;
  }
  .fp-map {
    width: 150%;
  }
}
@media (max-width: 600px) {
  /* One card with a peek of the next, so it is obvious the row scrolls. */
  .fp-grid {
    --fp-gap: 14px;
    --fp-per-view: 1.12;
    margin: 0;
    padding: 4px 0 12px;
  }
  .fp-top {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 16px;
  }
  .fp-heading {
    min-width: 0;
  }
  .fp-nav {
    align-self: flex-end;
  }
  .fp-heading > p {
    font-size: 15px;
  }
  .fp-arrow {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  .fp-body {
    padding: 20px 20px 0;
  }
  .fp-actions {
    padding: 18px 20px 20px;
  }
  .fp-bottom {
    flex-direction: column;
    gap: 14px;
  }
  .fp-map {
    top: 18%;
    width: 220%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fp-grid {
    scroll-behavior: auto;
  }
  .fp-card,
  .fp-media img,
  .fp-body::before,
  .fp-wish,
  .fp-btn,
  .fp-icon,
  .fp-arrow,
  .fp-dot::before {
    transition: none;
  }
  .fp-card:hover,
  .fp-card:hover .fp-media img,
  .fp-btn--primary:hover,
  .fp-arrow:hover:not(:disabled) {
    transform: none;
  }
  .fp-reveal .fp-card:not(.is-visible) {
    opacity: 1;
  }
  .fp-reveal .fp-card.is-visible,
  .fp-reveal .fp-card.is-visible .fp-media img,
  .fp-wish.is-popping .fp-icon {
    animation: none;
  }
}

/* Pathways: dark photo stage fading into a band of evenly aligned cards. */
.pathways {
  --pw-band: #2a2929;
  --pw-deep: #161616;
  --pw-accent: var(--red-strong);
  position: relative;
  padding: 0;
  background: var(--pw-band);
  overflow: hidden;
}
.pw-stage {
  position: relative;
  min-height: 600px;
  padding: 104px 6% 230px;
  display: flex;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  background: var(--pw-deep);
  /* Clips the drifting (scaled-up) photo so it can't spill below the fade into the card band. */
  overflow: hidden;
}
.pw-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  opacity: 0.5;
  animation: pw-drift 24s ease-out forwards;
}
@keyframes pw-drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.07);
  }
}
/* Fades the photo straight into the band so there is no hard seam. */
.pw-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      #161616b3 0%,
      #16161633 36%,
      #2a2929e6 80%,
      var(--pw-band) 100%
    ),
    radial-gradient(90% 70% at 50% 38%, #16161600, #16161699 80%);
}
.pw-stage-copy {
  position: relative;
  z-index: 1;
  max-width: 660px;
}
.pw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #ffcccc;
}
.pw-eyebrow::before,
.pw-eyebrow::after {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.pathways h2 {
  margin: 18px 0 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.04;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 2px 26px #16161673;
}
.pw-light {
  font-weight: 300;
  color: #ebe9e8;
}
.pw-stage-copy > p {
  margin: 20px auto 0;
  max-width: 480px;
  color: #e2dedc;
  font-size: 16px;
  line-height: 1.7;
}
.pw-cta {
  margin-top: 32px;
  padding: 15px 34px;
  background: var(--pw-accent);
  color: #ffffff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  clip-path: polygon(13px 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
  transition:
    background 0.2s,
    transform 0.2s;
}
.pw-cta:hover {
  background: #d91e1e;
  transform: translateY(-2px);
}
.pw-cta::after {
  content: "→";
  margin-left: 12px;
  display: inline-block;
  transition: transform 0.2s;
}
.pw-cta:hover::after {
  transform: translateX(4px);
}
.pw-grid {
  position: relative;
  z-index: 2;
  margin-top: -160px;
  padding: 0 5% 110px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.pw-grid > button {
  position: relative;
  aspect-ratio: 3 / 4.1;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--pw-deep);
  text-align: left;
  color: #ffffff;
  box-shadow: 0 18px 40px #0b0b0b47;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
.pw-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.pw-grid > button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      0deg,
      #0d0c0cf2 0%,
      #0d0c0cb3 32%,
      #0d0c0c1f 62%,
      #0d0c0c00 78%
    ),
    linear-gradient(180deg, #0d0c0c59 0%, #0d0c0c00 22%);
}
/* Accent rule that draws across the base of the active card. */
.pw-grid > button::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--pw-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.pw-grid > button:hover,
.pw-grid > button:focus-visible {
  transform: translateY(-10px);
  box-shadow: 0 30px 56px #0b0b0b73;
}
.pw-grid > button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}
.pw-grid > button:hover::before,
.pw-grid > button:focus-visible::before {
  transform: scaleX(1);
}
.pw-grid > button:hover .pw-card-photo {
  transform: scale(1.07);
}
.pw-meta {
  position: absolute;
  z-index: 1;
  top: 16px;
  left: 16px;
  padding: 7px 12px;
  border: 1px solid #ffffff38;
  border-radius: 999px;
  background: #16161673;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2px;
  color: #ffffff;
}
.pw-arrow {
  position: absolute;
  z-index: 1;
  top: 11px;
  right: 11px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff38;
  border-radius: 50%;
  background: #16161673;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.3s;
}
.pw-arrow::before {
  content: "↗";
  font-size: 17px;
  line-height: 1;
  color: #ffffff;
}
.pw-grid > button:hover .pw-arrow,
.pw-grid > button:focus-visible .pw-arrow {
  background: var(--pw-accent);
  border-color: var(--pw-accent);
  transform: rotate(45deg);
}
.pw-card-copy {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 22px 20px 24px;
}
.pathways .pw-grid h3 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 1.75vw, 27px);
  line-height: 1.15;
  letter-spacing: 0.3px;
  color: #ffffff;
}
.pw-grid p {
  margin: 8px 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.55;
  color: #dcd8d6;
}
.pw-more {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #ffcccc;
  transition:
    max-height 0.35s ease,
    opacity 0.3s ease,
    margin-top 0.35s ease;
}
.pw-more::after {
  content: "→";
  margin-left: 8px;
}
.pw-grid > button:hover .pw-more,
.pw-grid > button:focus-visible .pw-more {
  max-height: 30px;
  opacity: 1;
  margin-top: 14px;
}
@media (hover: none) {
  .pw-more {
    max-height: 30px;
    opacity: 1;
    margin-top: 14px;
  }
}
/* Single angled edge into the white section below, echoing the slanted CTA. */
.pathways::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 72px;
  /* Matches the Featured Programs tint that follows. */
  background: #f6f5f4;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
@media (max-width: 1200px) {
  .pw-grid {
    gap: 14px;
    padding: 0 4% 100px;
  }
  .pw-card-copy {
    padding: 18px 16px 20px;
  }
  .pw-grid p {
    -webkit-line-clamp: 2;
  }
}
@media (max-width: 1000px) {
  .pw-stage {
    min-height: 500px;
    padding: 80px 6% 180px;
  }
  /* Tall tiles scroll sideways rather than wrapping into short rows. */
  .pw-grid {
    margin-top: -120px;
    padding: 12px 6% 90px;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 6%;
    scrollbar-width: none;
  }
  .pw-grid::-webkit-scrollbar {
    display: none;
  }
  .pw-grid > button {
    flex: 0 0 clamp(230px, 40vw, 290px);
    scroll-snap-align: start;
  }
  .pw-grid > button:hover,
  .pw-grid > button:focus-visible {
    transform: none;
  }
  .pw-grid p {
    -webkit-line-clamp: 3;
  }
  .pathways::after {
    height: 48px;
  }
}
@media (max-width: 600px) {
  .pw-stage {
    min-height: 0;
    padding: 48px 6% 120px;
  }
  .pw-stage-copy > p {
    font-size: 14.5px;
  }
  .pw-cta {
    margin-top: 26px;
    padding: 14px 28px;
  }
  .pw-grid {
    margin-top: -90px;
    padding: 12px 6% 56px;
    scroll-padding: 0 6%;
  }
  .pw-grid > button {
    flex-basis: 72vw;
  }
  .pw-grid p {
    font-size: 14px;
  }
  .pathways::after {
    height: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pw-photo {
    animation: none;
  }
  .pw-grid > button,
  .pw-grid > button::before,
  .pw-card-photo,
  .pw-arrow,
  .pw-more,
  .pw-cta,
  .pw-cta::after {
    transition: none;
  }
  .pw-grid > button:hover,
  .pw-grid > button:hover .pw-card-photo,
  .pw-grid > button:hover .pw-arrow {
    transform: none;
  }
}

/* Shared 1600px content container for sections that don't use .section, matching the .section rule
   above so every section's content starts and ends on the same edges on large screens. */
@media (min-width: 1600px) {
  .impact,
  .explore {
    padding-left: max(6%, calc((100vw - 1600px) / 2));
    padding-right: max(6%, calc((100vw - 1600px) / 2));
  }
  .pw-grid {
    padding-left: max(6%, calc((100vw - 1600px) / 2));
    padding-right: max(6%, calc((100vw - 1600px) / 2));
  }
  .reference-hero-copy {
    left: max(5.93%, calc((100vw - 1600px) / 2));
  }
  .reference-volunteer-card {
    right: max(5.83%, calc((100vw - 1600px) / 2));
  }
}

/* Charity Tours & Treks: intro and Nepal atlas beside travel-ticket cards. */
.charity-treks {
  --ct-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.6fr;
  gap: 64px;
  align-items: start;
  color: var(--ink);
  background: #fff;
}

/* A contained atlas keeps the complete Nepal silhouette visible at every size. */
.ct-atlas {
  margin: 30px 0 0;
  padding: 20px 22px 16px;
  border: 1px solid #e2e5db;
  border-radius: 20px;
  background: linear-gradient(145deg, #fafbf6, #f3f2e9);
  box-shadow: 0 12px 32px #35453208;
  overflow: hidden;
}
.ct-atlas-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: #657160;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.ct-atlas-country {
  color: #394b3b;
  font-size: 12px;
  letter-spacing: 0.22em;
}
.ct-atlas-stage {
  position: relative;
  margin: 14px -8px 12px;
  background-image: radial-gradient(#83927826 0.7px, transparent 0.7px);
  background-size: 13px 13px;
  border-radius: 12px;
}
.ct-map {
  display: block;
  width: 100%;
  height: auto;
  padding: 12px 0;
  overflow: visible;
  filter: drop-shadow(0 7px 4px #45553d15);
}
.ct-map-land {
  fill: url(#ct-terrain);
}
.ct-map-texture {
  fill: url(#ct-dots);
  opacity: 0.32;
}
.ct-map-provinces {
  fill: none;
  stroke: #7d8d73;
  stroke-opacity: 0.5;
  stroke-width: 0.7;
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
}
.ct-map-outline {
  fill: none;
  stroke: #718369;
  stroke-width: 1.1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ct-compass {
  position: absolute;
  right: 9px;
  top: 5px;
  display: grid;
  justify-items: center;
  color: #718369;
  font-size: 9px;
  font-weight: 700;
}
.ct-compass span {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 400;
}
.ct-atlas figcaption {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 13px;
  border-top: 1px solid #dce1d4;
  color: #596452;
  font-size: 11px;
  line-height: 1.6;
}
.ct-atlas-dot {
  flex: 0 0 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-strong);
  box-shadow: 0 0 0 3px #d91e1e0d;
}
/* Intro column */
.ct-intro {
  position: sticky;
  top: 120px;
}
.ct-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-strong);
}
.ct-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.charity-treks h2 {
  margin-top: 16px;
  color: var(--ink);
  letter-spacing: -1.4px;
}
.charity-treks h2 em {
  color: var(--red-strong);
}
.ct-intro > p {
  margin-top: 18px;
  max-width: 440px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
}
.ct-points {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.ct-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  color: var(--ink);
}
.ct-points li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E")
      center / 12px no-repeat,
    var(--red-strong);
}
.ct-all {
  margin-top: 34px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  transition:
    background-color 0.25s,
    border-color 0.25s;
}
.ct-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ct-ease);
}
.ct-all:hover {
  background: var(--red-strong);
  border-color: var(--red-strong);
  color: #fff;
}
.ct-all:hover .ct-icon {
  transform: translateX(4px);
}

/* Tickets */
.ct-list {
  display: grid;
  gap: 26px;
}
.ct-ticket {
  position: relative;
  display: grid;
  /* Fixed photo share so every ticket tears at the same place. */
  grid-template-columns: 32% minmax(0, 1fr);
  min-height: 250px;
  border-radius: 18px;
  overflow: hidden;
  color: var(--ink);
  isolation: isolate;
  transition: transform 0.45s var(--ct-ease);
}
.ct-ticket:hover {
  transform: translateY(-6px);
}
/* Ticket outline: one layer above both halves. A plain rounded border, erased where each notch sits,
   plus a 1px arc tracing the notch curve. --tear is where the tear line meets the edge. */
.ct-ticket {
  container-type: inline-size;
  --tear-x: 32cqw;
  --edge: #e3e0de;
}
.ct-ticket::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid var(--edge);
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      circle at var(--tear-x) -1px,
      #0000 11px,
      var(--edge) 11.2px,
      var(--edge) 12px,
      #0000 12.4px
    ),
    radial-gradient(
      circle at var(--tear-x) calc(100% + 1px),
      #0000 11px,
      var(--edge) 11.2px,
      var(--edge) 12px,
      #0000 12.4px
    );
  background-origin: border-box;
  -webkit-mask:
    radial-gradient(circle 11px at var(--tear-x) 0, #0000 98%, #000) top / 100%
      51% no-repeat,
    radial-gradient(circle 11px at var(--tear-x) 100%, #0000 98%, #000) bottom /
      100% 51% no-repeat;
  mask:
    radial-gradient(circle 11px at var(--tear-x) 0, #0000 98%, #000) top / 100%
      51% no-repeat,
    radial-gradient(circle 11px at var(--tear-x) 100%, #0000 98%, #000) bottom /
      100% 51% no-repeat;
}
@media (max-width: 700px) {
  /* Tear line runs across the ticket at the bottom of the 16:9 photo. */
  .ct-ticket::after {
    --tear-y: 56.25cqw;
    background:
      radial-gradient(
        circle at -1px var(--tear-y),
        #0000 11px,
        var(--edge) 11.2px,
        var(--edge) 12px,
        #0000 12.4px
      ),
      radial-gradient(
        circle at calc(100% + 1px) var(--tear-y),
        #0000 11px,
        var(--edge) 11.2px,
        var(--edge) 12px,
        #0000 12.4px
      );
    -webkit-mask:
      radial-gradient(circle 11px at 0 var(--tear-y), #0000 98%, #000) left /
        51% 100% no-repeat,
      radial-gradient(circle 11px at 100% var(--tear-y), #0000 98%, #000)
        right / 51% 100% no-repeat;
    mask:
      radial-gradient(circle 11px at 0 var(--tear-y), #0000 98%, #000) left /
        51% 100% no-repeat,
      radial-gradient(circle 11px at 100% var(--tear-y), #0000 98%, #000)
        right / 51% 100% no-repeat;
  }
}
/* The notches are real cut-outs (masks on both halves), so the scenery shows through them. */
.ct-photo {
  --notch: 12px;
  border-radius: 18px 0 0 18px;
  isolation: isolate;
  clip-path: inset(0 round 18px 0 0 18px);
  position: relative;
  overflow: hidden;
  background: #3a3737;
  -webkit-mask:
    radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top / 100%
      51% no-repeat,
    radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom /
      100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top / 100%
      51% no-repeat,
    radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom /
      100% 51% no-repeat;
}
/* Draw the edge above the image so zooming cannot cover or move it.
   The parent masks also clip this border at the ticket notches. */
/* .ct-photo::after,
.ct-stub::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid #dfdfdf;
  border-radius: inherit;
  pointer-events: none;
} */
.ct-stub::before {
  border-left: 0;
}
.ct-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ct-ease);
}
.ct-ticket:hover .ct-photo img {
  transform: scale(1.08);
}
.ct-kind {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px 5px;
  border-radius: 999px;
  background: #ffffffeb;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Stub: dashed tear line with two punched notches, like a ticket. */
.ct-stub {
  --notch: 12px;
  border-radius: 0 18px 18px 0;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 30px 26px 34px;
  border-left: 2px dashed #e3e0de;
  background: #f3f2f2;
  -webkit-mask:
    radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top / 100% 51%
      no-repeat,
    radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) bottom /
      100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top / 100% 51%
      no-repeat,
    radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) bottom /
      100% 51% no-repeat;
}
.ct-route {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.ct-route > span:not(.ct-line) {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Dotted route segment with a red marker that travels along it on hover. */
.ct-line {
  position: relative;
  flex: 1 1 24px;
  min-width: 24px;
  height: 2px;
  background: radial-gradient(circle, #cfc9c6 1px, transparent 1.4px) 0 50% /
    7px 2px repeat-x;
}
.ct-line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--red-strong);
  box-shadow: 0 0 0 4px #d91e1e2e;
  opacity: 0;
}
.ct-ticket:hover .ct-line::after {
  opacity: 1;
  animation: ct-travel 1.6s var(--ct-ease) infinite;
}
@keyframes ct-travel {
  from {
    left: 0;
  }
  to {
    left: calc(100% - 8px);
  }
}
.ct-stub h3 {
  margin: 12px 0 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.4px;
}
.ct-title {
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: color 0.2s;
}
.ct-ticket:hover .ct-title {
  color: var(--red-strong);
}
/* .ct-ticket:focus-within {
  outline: 3px solid var(--red-strong);
  outline-offset: 3px;
} */
/* Identical three-column tracks align statistics across all tickets. */
.ct-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin: 18px 0 0;
}
.ct-stats > div {
  min-width: 0;
  padding: 0 12px;
  border-left: 1px solid var(--line);
}
.ct-stats > div:first-child {
  padding-left: 0;
  border-left: 0;
}
.ct-stats dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.ct-stats dd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  white-space: normal;
  overflow-wrap: anywhere;
}
.ct-difficulty-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 18px;
  object-fit: contain;
}
.ct-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: auto;
  padding-top: 22px;
}
.ct-read-more {
  /* margin-left: auto; */
  min-height: 44px;
  padding: 0 22px;
  border-radius: 8px;
  background: var(--red-strong);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  transition:
    background-color 0.2s,
    transform 0.2s;
}
.ct-read-more:hover {
  background: var(--red-deep);
  transform: translateY(-2px);
}
.ct-read-more:focus-visible,
.ct-all:focus-visible {
  outline: 2px solid var(--red-strong);
  outline-offset: 3px;
}

/* Scroll reveal: main.js adds .ct-reveal, then .is-visible; tickets slide in one after another. */
.ct-reveal .ct-ticket:not(.is-visible) {
  opacity: 0;
}
.ct-reveal .ct-ticket.is-visible {
  animation: ct-slide 0.8s var(--ct-ease) var(--d, 0ms) backwards;
}
@keyframes ct-slide {
  from {
    opacity: 0;
    transform: translateX(48px);
  }
}

/* Side-by-side layout on smaller laptops: give the ticket text more of the width. */
@media (min-width: 1101px) and (max-width: 1360px) {
  .charity-treks {
    gap: 44px;
  }
  .ct-ticket {
    grid-template-columns: 30% minmax(0, 1fr);
    --tear-x: 30cqw;
  }
  .ct-stub {
    padding: 24px 24px 24px 28px;
  }
  .ct-stub h3 {
    font-size: 22px;
  }
  .ct-stats > div {
    padding: 0 14px;
  }
  .ct-stats dd {
    font-size: 15px;
  }
}
@media (max-width: 1100px) {
  .charity-treks {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .ct-atlas {
    max-width: 480px;
  }
  .ct-intro {
    position: static;
  }
  .ct-intro > p {
    max-width: 640px;
  }
}
@media (max-width: 700px) {
  .charity-treks {
    gap: 28px;
  }
  .ct-ticket {
    grid-template-columns: 1fr;
  }
  .ct-photo {
    aspect-ratio: 16 / 9;
    border-radius: 18px 18px 0 0;
    clip-path: inset(0 round 18px 18px 0 0);
  }
  .ct-stub {
    border-radius: 0 0 18px 18px;
  }
  .ct-stub::before {
    border-left: 1px solid #d5d1ce;
    border-top: 0;
  }
  /* Tear line runs across the ticket on narrow screens. */
  .ct-stub {
    padding: 24px 22px 22px;
    border-left: 0;
    border-top: 2px dashed #e3e0de;
  }
  /* Notches move to the ends of the horizontal tear line. */
  .ct-photo {
    -webkit-mask:
      radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) left / 51%
        100% no-repeat,
      radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) right /
        51% 100% no-repeat;
    mask:
      radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) left / 51%
        100% no-repeat,
      radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) right /
        51% 100% no-repeat;
  }
  .ct-stub {
    -webkit-mask:
      radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) left / 51%
        100% no-repeat,
      radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) right /
        51% 100% no-repeat;
    mask:
      radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) left / 51%
        100% no-repeat,
      radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) right /
        51% 100% no-repeat;
  }
  .ct-stub h3 {
    font-size: 21px;
  }
  .ct-stats {
    flex-wrap: nowrap;
  }
  .ct-stats > div {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 12px;
  }
  .ct-stats dd {
    font-size: 14.5px;
    white-space: normal;
  }
  .ct-read-more {
    margin-left: 0;
  }
  .ct-atlas {
    padding: 18px 18px 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ct-ticket,
  .ct-photo img,
  .ct-icon,
  .ct-all,
  .ct-read-more {
    transition: none;
  }
  .ct-ticket:hover,
  .ct-ticket:hover .ct-photo img,
  .ct-read-more:hover {
    transform: none;
  }
  .ct-ticket:hover .ct-line::after {
    animation: none;
    opacity: 0;
  }
  .ct-reveal .ct-ticket:not(.is-visible) {
    opacity: 1;
  }
  .ct-reveal .ct-ticket.is-visible {
    animation: none;
  }
}

/* About Us scrolls over the hero; the wrapper releases it after these sections. */
.hero-about-scroll {
  position: relative;
  isolation: isolate;
}
.hero-about-scroll > .hero.reference-hero {
  position: sticky;
  top: min(0px, calc(100svh - var(--overlap-hero-height, 100svh)));
  z-index: 0;
}
.hero-about-scroll > .impact {
  position: relative;
  z-index: 1;
  display: flow-root;
  background: #fff;
}
@media (max-width: 1000px) {
  /* Keep the first screen in document flow so hero padding-bottom stays visible. */
  .hero-about-scroll > .hero.reference-hero {
    position: relative;
    top: auto;
    height: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-about-scroll > .hero.reference-hero {
    position: relative;
    top: auto;
  }
}

/* Why volunteer with us: a bento grid — photo tile, four reason cards and a wide red card. */
.volunteer-reasons {
  --vr-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  --vr-edge: #e3e0de;
  background: #f6f5f4;
}
.volunteer-reasons h2 {
  margin: 0 auto 48px;
  text-align: center;
  letter-spacing: -1.4px;
}
/* Short red rule under the heading. */
/* .volunteer-reasons h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 18px auto 0;
  border-radius: 3px;
  background: var(--red-strong);
} */
.vr-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Photo tile: spans two rows on the left. */
.vr-photo {
  position: relative;
  grid-row: span 2;
  min-height: 420px;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #3a3737;
}
.vr-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--vr-ease);
}
.vr-photo:hover img {
  transform: scale(1.06);
}
.vr-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #2b2b2b00 55%, #2b2b2b59);
  pointer-events: none;
}

/* Reason cards */
.vr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 28px 32px;
  overflow: hidden;
  border: 1px solid var(--vr-edge);
  border-radius: 22px;
  background: #fff;
  transition:
    transform 0.45s var(--vr-ease),
    border-color 0.3s;
}
.vr-card:hover {
  transform: translateY(-6px);
  border-color: #d3cdca;
}
.vr-icon {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--red-tint);
  color: var(--red-strong);
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.45s var(--vr-ease);
}
.vr-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vr-card:hover .vr-icon {
  background: var(--red-strong);
  color: #fff;
  transform: rotate(-8deg) scale(1.06);
}
.vr-copy {
  position: relative;
  z-index: 1;
}
.vr-card h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.3px;
}
.vr-card p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}
/* Large faint number in the corner. */
.vr-num {
  position: absolute;
  top: 18px;
  right: 22px;
  font:
    700 54px/1 "Plus Jakarta Sans",
    sans-serif;
  color: #f1eeed;
  transition: color 0.3s;
  pointer-events: none;
}
.vr-card:hover .vr-num {
  color: #fde3e3;
}

/* Wide card across the full grid, in brand red. */
.vr-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 28px;
  padding: 34px 40px;
  border-color: var(--red-strong);
  background:
    radial-gradient(60% 140% at 100% 0, #ffffff26, #ffffff00 60%),
    var(--red-strong);
  color: #fff;
}
.vr-card--wide:hover {
  border-color: var(--red-deep);
}
.vr-card--wide .vr-icon {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #ffffff26;
  color: #fff;
}
.vr-card--wide:hover .vr-icon {
  background: #fff;
  color: var(--red-strong);
}
/* Leaves room on the right so the large "05" never sits under the text. */
.vr-card--wide .vr-copy {
  max-width: 760px;
  padding-right: 130px;
}
.vr-card--wide h3 {
  font-size: 24px;
}
.vr-card--wide p {
  color: #ffe4e4;
}
.vr-card--wide .vr-num {
  top: 50%;
  right: 40px;
  font-size: 96px;
  color: #ffffff1f;
  transform: translateY(-50%);
}
.vr-card--wide:hover .vr-num {
  color: #ffffff33;
}

/* Scroll reveal: main.js adds .vr-reveal, then .is-visible; tiles rise in one after another. */
.vr-reveal > :not(.is-visible) {
  opacity: 0;
}
.vr-reveal > .is-visible {
  animation: vr-rise 0.8s var(--vr-ease) calc(var(--i, 0) * 110ms) backwards;
}
@keyframes vr-rise {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
}

@media (max-width: 1000px) {
  .vr-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vr-photo {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 0;
    aspect-ratio: 16 / 7;
  }
}
@media (max-width: 600px) {
  .volunteer-reasons h2 {
    margin-bottom: 34px;
  }
  .vr-bento {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .vr-photo {
    aspect-ratio: 4 / 3;
    border-radius: 18px;
  }
  .vr-card {
    padding: 26px 22px 28px;
    border-radius: 18px;
  }
  .vr-card--wide {
    flex-direction: column;
    align-items: start;
    gap: 20px;
    padding: 28px 22px;
  }
  .vr-card--wide .vr-copy {
    padding-right: 0;
  }
  .vr-card--wide .vr-num {
    top: 22px;
    right: 22px;
    font-size: 54px;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vr-photo img,
  .vr-card,
  .vr-icon,
  .vr-num {
    transition: none;
  }
  .vr-photo:hover img,
  .vr-card:hover,
  .vr-card:hover .vr-icon {
    transform: none;
  }
  .vr-reveal > :not(.is-visible) {
    opacity: 1;
  }
  .vr-reveal > .is-visible {
    animation: none;
  }
}

/* Volunteer testimonials: soft neutral palette and stitched card borders. */
.section.meet-volunteer {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  background: #f7f5f1;
  color: #3c2d1e;
}
.meet-volunteer .mv-heading {
  padding-inline: 24px;
}
.meet-volunteer .mv-grid {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
.meet-volunteer .mv-controls {
  padding-inline: 16px;
}
.mv-heading {
  max-width: 900px;
  margin: 0 auto 72px;
  text-align: center;
}
.mv-eyebrow {
  display: block;
  margin-bottom: 26px;
  color: #726454;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mv-heading h2 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(32px, 3.3vw, 54px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -1.8px;
  color: #3c2d1e;
}
.mv-heading h2 em {
  color: inherit;
  font: inherit;
}
.mv-heading > p {
  max-width: 620px;
  margin: 22px auto 0;
  color: #7b7165;
  font-size: 14px;
  line-height: 1.8;
}
.mv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  max-width: 1160px;
  margin: 0 auto;
}
.mv-testimonial {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 360px;
  margin: 0;
  padding: clamp(28px, 3vw, 40px);
  border: 2px dashed #cdc6bb;
  border-radius: 34px;
  background: #fffdfa;
  box-shadow: inset 0 0 0 5px #fdfbf7;
}
.mv-story {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
}
.mv-story blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}
.mv-story blockquote p,
.mv-placeholder-copy {
  margin: 0;
  color: #706353;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.35px;
}
.mv-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 48px;
}
.mv-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #eee5d9;
  color: #826345;
  font-size: 14px;
  font-weight: 600;
}
.mv-avatar-pending {
  background: #e9ede2;
  color: #687455;
  font-size: 25px;
}
.mv-name,
.mv-role {
  display: block;
}
.mv-name {
  color: #4a3826;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
.mv-role {
  margin-top: 4px;
  color: #8a7b6b;
  font-size: 12px;
}
.mv-placeholder-label {
  align-self: flex-start;
  padding: 5px 9px;
  border: 1px solid #ded5c8;
  border-radius: 5px;
  color: #8b7963;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mv-placeholder-copy {
  color: #817667;
}
@media (max-width: 760px) {
  .mv-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .mv-heading {
    margin-bottom: 36px;
  }
  .mv-heading h2 {
    letter-spacing: -1px;
  }
  .mv-testimonial {
    padding: 28px;
    border-radius: 28px;
  }
  .mv-author {
    padding-top: 32px;
  }
}
@media (max-width: 400px) {
  .mv-testimonial {
    padding: 24px;
  }
  .mv-name {
    font-size: 15px;
  }
}

@media (max-width: 600px) {
  .mv-title-break {
    display: none;
  }
  .mv-testimonial {
    min-height: 0;
  }
}

/* Native scroll remains available by swipe, trackpad and keyboard. */
.mv-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #cdc6bb transparent;
  padding-bottom: 12px;
}
.mv-grid > .mv-testimonial {
  flex: 0 0 calc((100% - 26px) / 2);
  scroll-snap-align: start;
}
.mv-grid:focus-visible {
  outline: 2px solid #826345;
  outline-offset: 5px;
  border-radius: 10px;
}
.mv-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}
.mv-controls[hidden] {
  display: none;
}
.mv-controls button {
  display: grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  border: 1px solid #d1c9bd;
  border-radius: 50%;
  color: #4a3826;
  background: #fffdfa;
}
.mv-controls button:hover {
  background: #eee5d9;
}
.mv-controls .mv-play {
  border-radius: 24px;
  padding: 0 18px;
  font-size: 12px;
}
.mv-position {
  min-width: 42px;
  text-align: center;
  color: #726454;
  font-size: 12px;
}
@media (max-width: 760px) {
  .mv-grid > .mv-testimonial {
    flex-basis: 100%;
  }
  .mv-controls {
    gap: 10px;
  }
}

/* Volunteer reviews: large photo + quote slides; the next slide peeks in from the right edge of the screen. */
.volunteer-reviews {
  --vrs-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  --vrs-gap: 40px;
  overflow: hidden;
  background: #fff;
}
.vrs-inner {
  container-type: inline-size;
}
.vrs-heading {
     max-width: 720px;
    margin-bottom: 30px;
    gap: 10px;
    display: flex;
    flex-direction: column;
}
.vrs-heading h2 {
  margin: 0;
  letter-spacing: -1.4px;
}
.vrs-heading p {
  margin-top: 12px;
  font-size: 16px;
  color: var(--muted);
}

/* Track: native scrolling with snap points. It extends past the right edge of the screen
   (clipped by the section) so the next slide shows as a peek. */
.vrs-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86cqw;
  gap: var(--vrs-gap);
  margin-right: -50vw;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.vrs-track::-webkit-scrollbar {
  display: none;
}
/* Empty column after the last slide, so it can scroll to the same left edge as the others. */
.vrs-track::after {
  content: "";
}
.vrs-track:focus-visible {
  outline: 2px solid var(--red-strong);
  outline-offset: 4px;
  border-radius: 14px;
}
.vrs-slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 500px;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  scroll-snap-align: start;
  transition: opacity 0.5s var(--vrs-ease);
}
/* Slides that are only peeking are softened a little. */
.vrs-slide:not(.is-current) {
  opacity: 0.85;
}
.vrs-photo {
  position: relative;
  overflow: hidden;
  background: #e9e6e4;
}
.vrs-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--vrs-ease);
}
.vrs-slide.is-current .vrs-photo img {
  animation: vrs-settle 1.4s var(--vrs-ease);
}
@keyframes vrs-settle {
  from {
    transform: scale(1.08);
  }
}
.vrs-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px clamp(32px, 4.5cqw, 64px);
  background: var(--vrs-tint, #fdecea);
}
.vrs-mark {
  width: 34px;
  height: 28px;
  fill: var(--red-strong);
}
.vrs-panel blockquote {
  margin: 20px 0 0;
}
.vrs-panel blockquote p {
  margin: 0;
  font-size: clamp(22px, 2.2cqw, 30px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.vrs-panel figcaption {
  display: grid;
  gap: 6px;
  margin-top: 40px;
  font-size: 15px;
  line-height: 1.4;
}
.vrs-who {
  color: var(--ink);
}
.vrs-who strong {
  font-weight: 700;
}
.vrs-where {
  color: var(--muted);
}
.vrs-slide.is-current .vrs-panel > * {
  animation: vrs-rise 0.7s var(--vrs-ease) backwards;
}
.vrs-slide.is-current blockquote {
  animation-delay: 80ms;
}
.vrs-slide.is-current figcaption {
  animation-delay: 160ms;
}
@keyframes vrs-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* Controls row: arrows and dash indicators on the left, call to action on the right. */
.vrs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 34px;
}
.vrs-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vrs-arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #d6d1ce;
  border-radius: 50%;
  color: var(--ink);
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s,
    opacity 0.2s;
}
.vrs-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vrs-arrow:hover:not(:disabled) {
  background: var(--red-strong);
  border-color: var(--red-strong);
  color: #fff;
}
.vrs-arrow:disabled {
  opacity: 0.4;
  cursor: default;
}
.vrs-arrow:focus-visible {
  outline: 3px solid #d91e1e59;
  outline-offset: 2px;
}
.vrs-dashes {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.vrs-dash {
  height: 20px;
  padding: 0 4px;
  display: grid;
  place-items: center;
}
.vrs-dash::before {
  content: "";
  width: 18px;
  height: 4px;
  border-radius: 4px;
  background: #e3e0de;
  transition:
    width 0.35s var(--vrs-ease),
    background-color 0.3s;
}
.vrs-dash:hover::before {
  background: #c9c3c0;
}
.vrs-dash {
  position: relative;
}
.vrs-dash[aria-current="true"]::before {
  width: 30px;
  background: var(--red-strong);
}
/* Autoplay countdown: while playing, the active dash starts pale and fills with red over the delay. */
.vrs-playing .vrs-dash[aria-current="true"]::before {
  background: linear-gradient(90deg, var(--red-strong) 50%, #f3c9c9 50%) right /
    200% 100%;
  animation: vrs-countdown var(--vrs-delay, 6000ms) linear forwards;
}
@keyframes vrs-countdown {
  to {
    background-position: left;
  }
}
.vrs-dash:focus-visible {
  outline: 2px solid var(--red-strong);
  outline-offset: 1px;
  border-radius: 6px;
}
.vrs-cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 6px;
  background: var(--red-strong);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color 0.2s,
    transform 0.2s;
}
.vrs-cta:hover {
  background: var(--red-deep);
  transform: translateY(-2px);
}
.vrs-cta:focus-visible {
  outline: 3px solid #d91e1e59;
  outline-offset: 3px;
}

@media (max-width: 1000px) {
  .volunteer-reviews {
    --vrs-gap: 24px;
  }
  .vrs-slide {
    min-height: 440px;
  }
  .vrs-panel {
    padding: 40px 32px;
  }
  .vrs-panel blockquote p {
    font-size: 21px;
  }
}
@media (max-width: 700px) {
  .volunteer-reviews {
    --vrs-gap: 14px;
  }
  .vrs-heading {
    margin-bottom: 28px;
  }
  .vrs-track {
    grid-auto-columns: 90cqw;
  }
  /* Photo on top, quote below. */
  .vrs-slide {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 0;
  }
  .vrs-photo {
    aspect-ratio: 4 / 3;
  }
  .vrs-panel {
    justify-content: start;
    padding: 28px 24px 32px;
  }
  .vrs-panel blockquote p {
    font-size: 19px;
  }
  .vrs-panel figcaption {
    margin-top: 24px;
    font-size: 14px;
  }
  .vrs-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .vrs-cta {
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vrs-track {
    scroll-behavior: auto;
  }
  .vrs-slide,
  .vrs-photo img,
  .vrs-arrow,
  .vrs-dash::before,
  .vrs-cta {
    transition: none;
  }
  .vrs-slide.is-current .vrs-photo img,
  .vrs-slide.is-current .vrs-panel > * {
    animation: none;
  }
  .vrs-cta:hover {
    transform: none;
  }
}

/* Volunteer hands overlay: the illustration (hands, hearts, leaves) runs down one side of
   Charity Tours & Treks and Why volunteer with us. Its off-white background is multiplied away. */
.charity-treks,
.volunteer-reasons {
  position: relative;
  isolation: isolate;
}
.charity-treks::before,
.volunteer-reasons::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  width: min(820px, 58%);
  background: url("../images/volunteer-hands.png") left bottom / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: var(--hands-opacity, 1);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, #0000 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 45%, #0000 100%);
}
/* Charity Tours & Treks: hands reach in from the left, behind the intro. */
.charity-treks::before {
  left: 0;
}
/* Why volunteer: mirrored so the hands reach in from the right. */
.volunteer-reasons::before {
  right: 0;
  transform: scaleX(-1);
}
@media (max-width: 700px) {
  .charity-treks::before,
  .volunteer-reasons::before {
    width: 100%;
    --hands-opacity: 0.8;
  }
}

/* FAQ: sticky intro with a help card beside a numbered accordion (one question open at a time). */
.faqs {
  --fq-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) 1.5fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  background: #f6f5f4;
}
.fq-intro {
  position: sticky;
  top: 120px;
}
.fq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-strong);
}
.fq-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.faqs h2 {
  margin: 16px 0 0;
  letter-spacing: -1.4px;
}
.fq-intro > p {
  margin-top: 16px;
  max-width: 420px;
  font-size: 16px;
  color: var(--muted);
}

/* Photo with the help card overlapping its lower edge. */
.fq-visual {
  position: relative;
  margin-top: 32px;
  max-width: 525px;
}
.fq-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: 20px;
  background: #e9e6e4;
}
.fq-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--fq-ease);
}
.fq-visual:hover .fq-photo img {
  transform: scale(1.05);
}
.fq-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #2b2b2b00 45%, #2b2b2b66);
  pointer-events: none;
}
/* Charcoal help card with a red glow. */
.fq-help {
  position: relative;
  z-index: 1;
  margin: -84px 0 0 28px;
  max-width: 420px;
  box-shadow: 0 18px 40px #2b2b2b2e;
  padding: 28px;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(80% 90% at 100% 0, #d91e1e40, #d91e1e00 65%),
    var(--charcoal);
  color: #fff;
}
.fq-help-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--red-strong);
}
.fq-help-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fq-help h3 {
  margin: 18px 0 0;
  font-size: 20px;
  color: #fff;
}
.fq-help p {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #d8d2cf;
}
.fq-help-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color 0.2s,
    color 0.2s;
}
.fq-help-link span {
  transition: transform 0.3s var(--fq-ease);
}
.fq-help-link:hover {
  background: var(--red-strong);
  color: #fff;
}
.fq-help-link:hover span {
  transform: translateX(4px);
}
.fq-help-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Accordion */
.fq-list {
  display: grid;
  gap: 12px;
}
.fq-item {
  border: 1px solid #e3e0de;
  border-radius: 16px;
  background: #fff;
  transition:
    border-color 0.3s,
    box-shadow 0.4s var(--fq-ease);
}
.fq-item:hover {
  border-color: #d3cdca;
}
.fq-item[open] {
  border-color: #f0c4c4;
  box-shadow: 0 14px 36px #2b2b2b12;
}
.fq-item summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  cursor: pointer;
  list-style: none;
}
.fq-item summary::-webkit-details-marker {
  display: none;
}
.fq-item summary:focus-visible {
  outline: 2px solid var(--red-strong);
  outline-offset: 3px;
  border-radius: 16px;
}
.fq-q {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  transition: color 0.2s;
}
.fq-item summary:hover .fq-q,
.fq-item[open] .fq-q {
  color: var(--red-strong);
}
/* Round plus that rotates into a red × when the answer is open. */
.fq-toggle {
  position: relative;
  width: 38px;
  height: 38px;
  border: 1px solid #e3e0de;
  border-radius: 50%;
  transition:
    background-color 0.3s,
    border-color 0.3s,
    transform 0.4s var(--fq-ease);
}
.fq-toggle::before,
.fq-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 2px;
  background: var(--ink);
  transition: background-color 0.3s;
}
.fq-toggle::after {
  transform: rotate(90deg);
}
.fq-item[open] .fq-toggle {
  background: var(--red-strong);
  border-color: var(--red-strong);
  transform: rotate(135deg);
}
.fq-item[open] .fq-toggle::before,
.fq-item[open] .fq-toggle::after {
  background: #fff;
}
/* Answer lines up with the question text, and eases in when opened. */
.fq-answer {
  padding: 0 80px 24px 24px;
}
.fq-answer p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--muted);
}
.fq-item[open] .fq-answer {
  animation: fq-open 0.45s var(--fq-ease);
}
@keyframes fq-open {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@media (max-width: 1000px) {
  .faqs {
    grid-template-columns: 1fr;
  }
  .fq-intro {
    position: static;
  }
  .fq-intro > p {
    max-width: 640px;
  }
  .fq-visual {
    max-width: 640px;
  }
  .fq-photo {
    aspect-ratio: 16 / 9;
  }
}
@media (max-width: 600px) {
  .faqs {
    gap: 24px;
  }
  .fq-item summary {
    gap: 12px;
    padding: 18px 16px;
  }
  .fq-q {
    font-size: 16px;
  }
  .fq-toggle {
    width: 32px;
    height: 32px;
  }
  .fq-answer {
    padding: 0 16px 20px 16px;
  }
  .fq-answer p {
    font-size: 15px;
  }
  .fq-help {
    margin: -56px 14px 0;
    padding: 24px 22px;
  }
  .fq-photo {
    aspect-ratio: 4 / 3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fq-item,
  .fq-toggle,
  .fq-help-link,
  .fq-help-link span,
  .fq-photo img {
    transition: none;
  }
  .fq-visual:hover .fq-photo img {
    transform: none;
  }
  .fq-item[open] .fq-answer {
    animation: none;
  }
}

/* News & Events: three article cards — rounded photo, tag pill + meta, title; a red arrow tile slides in on hover. */
.news-events {
  --ne-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  background: #fff;
}
.ne-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 44px;
}
.ne-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-strong);
}
.ne-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.news-events h2 {
  margin: 14px 0 0;
  letter-spacing: -1.4px;
}
.ne-heading > p {
  max-width: 420px;
  margin: 0;
  font-size: 16px;
  color: var(--muted);
}
.ne-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.ne-card {
  position: relative;
}
.ne-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 20px;
  background: #e9e6e4;
}
.ne-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ne-ease);
}
.ne-card:hover .ne-media img {
  transform: scale(1.06);
}
.ne-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0009, #0000 60%);
  pointer-events: none;
}
.ne-media .ne-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 1;
  border-color: #ffffff66;
  background: #0006;
  color: #fff;
}
.ne-description {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
/* Arrow tile in the bottom-left corner, tucked into the photo's rounded edge. */
.ne-arrow {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 0 20px 0 20px;
  background: var(--red-strong);
  color: #fff;
  opacity: 0;
  transform: translate(-12px, 12px);
  transition:
    opacity 0.35s var(--ne-ease),
    transform 0.45s var(--ne-ease);
}
.ne-arrow svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ne-card:hover .ne-arrow,
.ne-card:focus-within .ne-arrow {
  opacity: 1;
  transform: none;
}
.ne-tag {
  padding: 6px 12px;
  border: 1px solid #f0c4c4;
  border-radius: 999px;
  background: var(--red-tint);
  color: var(--red-deep);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}
.ne-card h3 {
  margin: 18px 0 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.2px;
}
.ne-title {
  padding: 0;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: color 0.2s;
}
/* The whole card opens the article. */
.ne-title::after {
  content: "";
  position: absolute;
  inset: 0;
}
.ne-card:hover .ne-title {
  color: var(--red-strong);
}
.ne-title:focus-visible {
  outline: none;
}
.ne-card:focus-within .ne-media {
  /* outline: 3px solid var(--red-strong);
  outline-offset: 3px; */
}

@media (max-width: 1000px) {
  .ne-heading {
    flex-direction: column;
    align-items: start;
    gap: 14px;
  }
  .ne-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }
  .ne-card h3 {
    font-size: 20px;
  }
}
@media (max-width: 600px) {
  .ne-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .ne-heading {
    margin-bottom: 32px;
  }
  .ne-card h3 {
    margin-top: 14px;
    font-size: 19px;
  }
  /* Touch screens have no hover, so the arrow stays visible. */
  .ne-arrow {
    width: 64px;
    height: 64px;
    opacity: 1;
    transform: none;
  }
  .ne-arrow svg {
    width: 26px;
    height: 26px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ne-media img,
  .ne-arrow,
  .ne-title {
    transition: none;
  }
  .ne-card:hover .ne-media img {
    transform: none;
  }
}

/* Closing CTA uses the shared .section spacing and content width. */
.journey-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-radius: 18px;
  background: #f6f5f4;
}
.journey-copy h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.04em;
}
.journey-copy p {
  max-width: 580px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}
.journey-cta > .button {
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .section.journey-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-inline: 6%;
    margin-bottom: 8px;
    padding: 32px 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .journey-cta > .button {
    transition: none;
  }
  .journey-cta > .button:hover {
    transform: none;
  }
}

/* Footer: shared section gutters, menu groups, and a contact column. */
footer.site-footer {
  display: block;
  background: #fff;
  color: var(--ink);
  padding-bottom: 28px;
  /* border-top: 1px solid var(--line); */
}
/* Footer-scoped 12-column layout; lg begins at 992px. */
.site-footer > .sf-main.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px 0;
  margin-inline: -12px;
}
.site-footer .sf-main.row > * {
  flex: 0 0 auto;
  min-width: 0;
  padding-inline: 12px;
}
.site-footer .row > .col-12 {
  width: 100%;
}
.site-footer .row > .col-6 {
  width: 50%;
}
@media (min-width: 768px) {
  .site-footer .row > .col-md-4 {
    width: 33.333333%;
  }
  .site-footer .row > .col-md-8 {
    width: 66.666667%;
  }
}
@media (min-width: 992px) {
  .site-footer .row > .col-lg-2 {
    width: 16.666667%;
  }
  .site-footer .row > .col-lg-3 {
    width: 25%;
  }
}
.sf-brand {
  min-width: 0;
}
.site-footer .sf-logo {
  display: inline-block;
  max-width: 210px;
}
.sf-logo img {
  display: block;
  width: 100%;
  height: auto;
}
.site-footer .sf-brand p {
  max-width: 290px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
}
.sf-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.site-footer h3 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
}
.site-footer .sf-links a,
.site-footer .sf-links button {
  padding: 3px 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  transition: color 0.2s;
}
.site-footer .sf-links a:hover,
.site-footer .sf-links button:hover {
  color: var(--red-strong);
}
.sf-contact {
  min-width: 0;
}
.sf-contact-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  font-style: normal;
  padding-top: 8px;
}
.site-footer .sf-contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: var(--ink);
  text-align: left;
}
.sf-contact-item > span:last-child {
  min-width: 0;
}
.sf-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--red-strong);
  background: #ffe8e8;
}
.sf-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sf-contact-item small {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.sf-contact-item strong {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.site-footer a.sf-contact-item:hover strong {
  color: var(--red-strong);
}
.site-footer > .sf-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.site-footer .sf-bottom a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 14px;
}
.site-footer .sf-bottom a:hover {
  color: var(--red-strong);
}
.site-footer a:focus-visible,
.site-footer button:focus-visible {
  outline: 2px solid var(--red-strong);
  outline-offset: 4px;
  border-radius: 3px;
}
@media (max-width: 1100px) {
  .site-footer .sf-brand p {
    max-width: 400px;
  }
}
@media (max-width: 600px) {
  .site-footer .sf-logo {
    max-width: 180px;
  }
  .sf-contact-details {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .site-footer .sf-links a,
  .site-footer .sf-links button {
    padding: 7px 0;
  }
  .site-footer > .sf-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer .sf-links a,
  .site-footer .sf-links button {
    transition: none;
  }
}
.site-footer .sf-credit a {
  color: var(--red-strong);
  font-weight: 600;
}
/* .site-footer .sf-credit a:hover { text-decoration: underline; } */
.back-to-top {
  position: fixed;
  right: 40px;
  bottom: max(30px, env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid #ffffff55;
  border-radius: 10px;
  background: var(--red-strong);
  color: #fff;
  box-shadow: 0 6px 20px #2b2b2b26;
  transition:
    background-color 0.2s,
    transform 0.2s;
}
.back-to-top svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.back-to-top:hover {
  background: var(--red-deep);
  transform: translateY(-3px);
}
.back-to-top:focus-visible {
  outline: 3px solid var(--charcoal);
  outline-offset: 3px;
}
@media (max-width: 600px) {
  footer.site-footer {
    padding-top: 40px;
    padding-bottom: 28px;
  }
  .back-to-top {
    right: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .back-to-top {
    transition: none;
  }
  .back-to-top:hover {
    transform: none;
  }
}
.back-to-top[hidden] {
  display: none;
}
.pb-70 {
  padding-bottom: 70px !important;
}
.pt-70 {
  padding-top: 70px !important;
}

/* Sliding arrow CTA, adapted from Uiverse.io by Creatlydev in the logo palette. */
body .brand-button,
.header.internship-header nav > button.brand-button {
  --clr: var(--red-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 49px;
  max-width: 100%;
  padding: 12px 24px 12px 20px;
  overflow: hidden;
  border: none;
  border-radius: 10rem;
  clip-path: none;
  background: var(--clr);
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.3s;
}
body .brand-button::before,
body .brand-button::after {
  content: none;
}
body .brand-button:hover,
body .brand-button:focus-visible,
.header.internship-header nav > button.brand-button:hover,
.header.internship-header nav > button.brand-button:focus-visible {
  background: var(--charcoal);
  color: #fff;
  transform: none;
  box-shadow: none;
}
body .brand-button > .brand-button-label {
  min-width: 0;
  margin: 0;
  font: inherit;
  line-height: inherit;
  transform: none;
}
body .brand-button > .button__icon-wrapper {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  margin: 0;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  color: var(--clr);
  transform: none;
  transition: color 0.3s;
}
body .brand-button .button__icon-svg {
  width: 10px;
  height: 11px;
  transition: transform 0.3s ease-in-out;
}
body .brand-button .button__icon-svg--copy {
  position: absolute;
  transform: translate(-150%, 150%);
}
body .brand-button:hover .button__icon-wrapper,
body .brand-button:focus-visible .button__icon-wrapper {
  color: #ffffff;
  background: var(--clr);
}
body .brand-button:hover .button__icon-svg:first-child,
body .brand-button:focus-visible .button__icon-svg:first-child {
  transform: translate(150%, -150%);
}
body .brand-button:hover .button__icon-svg--copy,
body .brand-button:focus-visible .button__icon-svg--copy {
  transform: translate(0);
  transition-delay: 0.1s;
}
body .brand-button:focus-visible {
  outline: 2px solid var(--red-strong);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  body .brand-button,
  body .brand-button > .button__icon-wrapper,
  body .brand-button .button__icon-svg {
    transition: none;
  }
}

/* From Uiverse.io by Creatlydev */
.button {
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  border: none;
  cursor: pointer;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--clr);
  color: #fff;
  border-radius: 10rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  padding-left: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.3s;
}

.button__icon-wrapper {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  position: relative;
  color: var(--clr);
  background-color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.button:hover {
  background-color: #000;
}

.button:hover .button__icon-wrapper {
  color: #000;
}

.button__icon-svg--copy {
  position: absolute;
  transform: translate(-150%, 150%);
}

.button:hover .button__icon-svg:first-child {
  transition: transform 0.3s ease-in-out;
  transform: translate(150%, -150%);
}

.button:hover .button__icon-svg--copy {
  transition: transform 0.3s ease-in-out 0.1s;
  transform: translate(0);
}

/* Compact shared CTA buttons fit the placement card action rows. */
body .fp-btn.brand-button {
  min-width: 0;
  gap: 8px;
  padding: 10px 12px;
  font-size: 14px;
  white-space: normal;
}
.fp-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Placement cards: outlined details action beside the primary application CTA. */
body .fp-btn--ghost.brand-button {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}
/* body .fp-btn--ghost.brand-button > .button__icon-wrapper {
  display: none;
} */
body .fp-btn--ghost.brand-button:hover,
body .fp-btn--ghost.brand-button:focus-visible {
  background: var(--red-tint);
  border-color: var(--red-strong);
  color: var(--red-strong);
  box-shadow: none;
}

/* body .fp-btn--ghost.brand-button > .button__icon-wrapper {
  display: none;
} */
/* Animated text link, adapted from Uiverse.io by satyamchaudharydev. */
body .text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  min-height: 30px;
  padding: 0 0 7px;
  border: none;
  background: none;
  color: var(--charcoal);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}
body .text-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--red-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-out;
}
.text-link-label {
  background: linear-gradient(90deg, var(--red-strong) 50%, var(--charcoal) 50%)
    100% 0 / 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: background-position 0.3s ease-out;
}
.text-link-arrow {
  flex: 0 0 18px;
  width: 14px;
  height: 14px;
  transition:
    transform 0.2s 0.2s,
    color 0.2s 0.2s;
}
body .text-link:hover::after,
body .text-link:focus-visible::after {
  transform: scaleX(1);
}
.text-link:hover .text-link-label,
.text-link:focus-visible .text-link-label {
  background-position: 0 0;
}
.text-link:hover .text-link-arrow,
.text-link:focus-visible .text-link-arrow {
  transform: translateX(4px);
  color: var(--red-strong);
}
body .text-link:focus-visible {
  outline: 2px solid var(--red-strong);
  outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  body .text-link::after,
  .text-link-label,
  .text-link-arrow {
    transition: none;
  }
}
@media (forced-colors: active) {
  .text-link-label {
    background: none;
    color: LinkText;
  }
}
/* Header: rolling text from the video plus the extending arrow reference. */
.header.internship-header nav > button.header-apply {
  --arrow-width: 12px;
  --arrow-stroke: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 13px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--red-strong);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  overflow: hidden;
  box-shadow: 0 4px 10px #2b2b2b15;
  transition: background-color 0.2s;
}
.header-apply-label {
  position: relative;
  display: block;
  height: 1.4em;
  overflow: hidden;
}
.header-apply-label > span {
  display: block;
  line-height: 1.4;
  transition: transform 0.35s ease;
}
.header-apply-label > span + span {
  position: absolute;
  top: 100%;
  left: 0;
}
.header-apply .arrow-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--arrow-width);
  height: 18px;
}
.header-apply .arrow {
  position: relative;
  width: var(--arrow-width);
  height: var(--arrow-stroke);
  margin-top: 1px;
  background: transparent;
  transition: background-color 0.2s;
}
.header-apply .arrow::before {
  content: "";
  position: absolute;
  top: -3px;
  right: 3px;
  padding: 3px;
  border: solid currentColor;
  border-width: 0 var(--arrow-stroke) var(--arrow-stroke) 0;
  transform: rotate(-45deg);
  transition: right 0.2s;
}
.header.internship-header nav > button.header-apply:hover,
.header.internship-header nav > button.header-apply:focus-visible {
  background: #c11313;
  color: #fff;
}
.header-apply:is(:hover, :focus-visible) .header-apply-label > span {
  transform: translateY(-100%);
}
.header-apply:is(:hover, :focus-visible) .arrow {
  background: currentColor;
}
.header-apply:is(:hover, :focus-visible) .arrow::before {
  right: 0;
}
.header.internship-header nav > button.header-apply:focus-visible {
  outline: 2px solid var(--red-strong);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .header.internship-header nav > button.header-apply,
  .header-apply-label > span,
  .header-apply .arrow,
  .header-apply .arrow::before {
    transition: none;
  }
  .header-apply:is(:hover, :focus-visible) .header-apply-label > span {
    transform: none;
  }
}
/* Shared box CTAs use the header's rolling label and extending arrow. */
body .brand-button {
  --arrow-width: 12px;
  --arrow-stroke: 2px;
  gap: 12px;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--red-strong);
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
  box-shadow: 0 4px 10px #2b2b2b15;
}
body .brand-button:is(:hover, :focus-visible) {
  background: #c11313;
  color: #fff;
}
body .brand-button > .brand-button-label {
  display: block;
  overflow: hidden;
  height: 1.4em;
  line-height: 1.4;
}
.cta-roll {
  display: block;
  line-height: 1.4;
  white-space: nowrap;
  text-shadow: 0 1.4em currentColor;
  transition: transform 0.35s ease;
}
body .brand-button > .arrow-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--arrow-width);
  height: 18px;
  margin: 0;
  transform: none;
}
.brand-button .arrow {
  position: relative;
  width: var(--arrow-width);
  height: var(--arrow-stroke);
  margin-top: 1px;
  background: transparent;
  transition: background-color 0.2s;
}
.brand-button .arrow::before {
  content: "";
  position: absolute;
  top: -3px;
  right: 3px;
  padding: 3px;
  border: solid currentColor;
  border-width: 0 var(--arrow-stroke) var(--arrow-stroke) 0;
  transform: rotate(-45deg);
  transition: right 0.2s;
}
.brand-button:is(:hover, :focus-visible) .cta-roll {
  transform: translateY(-1.4em);
}
.brand-button:is(:hover, :focus-visible) .arrow {
  background: currentColor;
}
.brand-button:is(:hover, :focus-visible) .arrow::before {
  right: 0;
}
body .fp-btn.brand-button {
  padding: 10px 12px;
  gap: 8px;
  font-size: 14px;
}
body .fp-btn--ghost.brand-button {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}
body .fp-btn--ghost.brand-button:is(:hover, :focus-visible) {
  background: transparent;
  color: var(--red-strong);
  border-color: var(--red-strong);
}
@media (prefers-reduced-motion: reduce) {
  .cta-roll,
  .brand-button .arrow,
  .brand-button .arrow::before {
    transition: none;
  }
  .brand-button:is(:hover, :focus-visible) .cta-roll {
    transform: none;
  }
}

/* Shared section eyebrow; retain the pale treatment over the pathways photo. */
main .pw-eyebrow {
  color: var(--red-strong);
}
main .pathways .pw-eyebrow {
  color: #ffcccc;
}
.pw-eyebrow::before,
.pw-eyebrow::after {
  flex-shrink: 0;
}
.featured-programs .pw-eyebrow,
.volunteer-reviews .pw-eyebrow,
.journey-cta .pw-eyebrow {
  margin-bottom: 16px;
}
.volunteer-reasons > .pw-eyebrow {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
@media (max-width: 600px) {
  main .pw-eyebrow {
    gap: 10px;
    font-size: 11px;
    letter-spacing: 1.5px;
  }
  main .pw-eyebrow::before,
  main .pw-eyebrow::after {
    width: 20px;
  }
}

/* Mobile section spacing: keep every homepage block on the shared 6% gutter
   and a tighter vertical rhythm than the desktop .section padding. */
@media (max-width: 700px) {
  .section {
    padding: 56px 6%;
  }
  .fp-top {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 16px;
  }
  .fp-heading {
    min-width: 0;
  }
  .fp-nav {
    align-self: flex-end;
  }
}
@media (max-width: 600px) {
  .section {
    padding: 48px 6%;
  }
  .section.impact {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .section.journey-cta {
    margin-inline: 6%;
    margin-bottom: 20px;
    padding: 28px 22px;
  }
  footer.site-footer.section {
    padding: 40px 6% 28px;
  }
  .volunteer-reasons h2 {
    margin-bottom: 28px;
  }
  .vrs-heading {
    margin-bottom: 24px;
  }
  .vrs-panel {
    padding: 24px 20px 28px;
  }
  .ne-heading {
    margin-bottom: 24px;
  }
  .ct-stub {
    padding: 22px 20px 20px;
  }
}



.pb-10{
  padding-bottom: 10px !important;
}
.mw-1600{
  max-width: 1600px !important;
}

.mx-0{
  margin-left: 0 !important;
  margin-right: 0 !important;
}