/* ==========================================================================
   MCA / Malachi Care Agency
   Colors and fonts come from the brand guidelines. Change them here and the
   whole site follows.
   ========================================================================== */

:root {
  /* Brand palette */
  --green: #1F4D43;
  --sage: #8DA58B;
  --sand: #D6C4A7;
  --cream: #F8F6EF;
  --charcoal: #2E2E2E;
  --white: #FFFFFF;

  /* Flat tints of the palette, for panels and rings */
  --sage-tint: #EDF0EA;
  --sand-tint: #F2ECDF;
  --sage-dark: #5F7A5E;
  --ring-outer: #2A5A4F;
  --ring-inner: #3A6B5E;
  --muted: #55605B;
  --line: #DEDBCF;

  --display: "Manrope", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --radius-lg: 32px;
  --radius-md: 20px;
  --radius-sm: 10px;
  --band: clamp(88px, 12vw, 176px);

  /* One easing for all movement, so it feels like one calm hand */
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--cream);
  color: var(--charcoal);
  font: 400 1.0625rem/1.7 var(--body);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  margin: 0;
  color: var(--green);
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 7vw, 6.25rem); line-height: 1.02; }
h2 { font-size: clamp(2.125rem, 4.4vw, 4rem); line-height: 1.08; }
h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.22; }
p { margin: 0; text-wrap: pretty; }

a { color: var(--green); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-green :focus-visible { outline-color: var(--cream); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 20;
  padding: 10px 16px;
  background: var(--green);
  color: var(--cream);
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band); }
.band--white { background: var(--white); }
.band--tight { padding-block: clamp(28px, 4vw, 56px); }

.lead {
  font-size: clamp(1.1875rem, 1.7vw, 1.4375rem);
  line-height: 1.55;
}
.stack > * + * { margin-top: 1.5rem; }

/* Small tracked label, in the same voice as the logo's tagline */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75em;
  color: var(--sage-dark);
  font: 500 0.8125rem/1.4 var(--body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sand);
}

/* --------------------------------------------------------------------------
   Movement between pages and as things come into view
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out 0.28s ease both; }
::view-transition-new(root) { animation: page-in 0.6s var(--ease) both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(14px); } }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s var(--ease) var(--d, 0ms), transform 1.2s var(--ease) var(--d, 0ms);
}
.js [data-reveal].in { opacity: 1; transform: none; }

/* A soft unveil for pictures */
.js [data-reveal="unveil"] {
  transform: none;
  clip-path: inset(10% 6% 10% 6% round var(--radius-md));
  transition: opacity 0.8s ease var(--d, 0ms), clip-path 1.4s var(--ease) var(--d, 0ms);
}
.js [data-reveal="unveil"].in { clip-path: inset(0 0 0 0 round var(--radius-md)); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  min-height: 56px;
  padding: 0.75em 1.6em;
  border: 1.5px solid var(--green);
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font: 500 1rem/1.25 var(--body);
  text-decoration: none;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, gap 0.45s var(--ease);
}
.btn:not([disabled])::after {
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.45s var(--ease);
}
.btn:hover::after { transform: translateX(4px); }
.btn:hover { background: var(--ring-outer); border-color: var(--ring-outer); }

.btn--light { background: var(--cream); border-color: var(--cream); color: var(--green); }
.btn--light:hover { background: var(--sand); border-color: var(--sand); color: var(--green); }

.btn--ghost { background: transparent; border-color: rgba(248, 246, 239, 0.55); color: var(--cream); }
.btn--ghost:hover { background: var(--cream); border-color: var(--cream); color: var(--green); }

.btn--outline { background: transparent; color: var(--green); }
.btn--outline:hover { background: var(--green); border-color: var(--green); color: var(--white); }

.btn[disabled] {
  background: var(--sage-tint);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--green);
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left 100% / 100% 1px no-repeat;
  transition: background-size 0.5s var(--ease);
}
.text-link:hover { background-size: 0% 1px; background-position: right 100%; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--cream);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
  view-transition-name: site-header;
}
.site-header.is-scrolled {
  background: rgba(248, 246, 239, 0.88);
  box-shadow: 0 1px 0 var(--line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 36px;
  max-width: none;
  min-height: 92px;
  padding-inline: clamp(20px, 3vw, 44px);
  transition: min-height 0.5s var(--ease);
}
.is-scrolled .site-header__inner { min-height: 70px; }
.site-logo { flex: none; }
.site-logo img { width: 142px; height: auto; transition: width 0.5s var(--ease); }
.is-scrolled .site-logo img { width: 112px; }

.site-nav { margin-left: auto; }
.site-nav ul {
  display: flex;
  gap: clamp(18px, 2.6vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  color: var(--charcoal);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.3s ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 2px;
  height: 1.5px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.site-nav a:hover { color: var(--green); }
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.site-nav a[aria-current="page"] { color: var(--green); }

.site-header .btn { min-height: 46px; padding-block: 0.5em; }

@media (max-width: 860px) {
  /* The header scrolls away, leaving the whole screen for content */
  html { scroll-padding-top: 16px; }
  .site-header { position: static; }
  .site-header__inner { flex-wrap: wrap; gap: 0; min-height: 0; padding-block: 12px; }
  .is-scrolled .site-header__inner { min-height: 0; }
  .site-logo img, .is-scrolled .site-logo img { width: 112px; }
  .site-nav { margin: 6px 0 0; width: 100%; }
  .site-nav ul { justify-content: space-between; gap: 8px; }
  .site-nav a { font-size: 0.9375rem; }
  .site-header .btn { display: none; }
}

/* Phones and touch screens only: plain links with a little more room and a
   thin line below, so the bar is clear and easy to tap. Desktop windows are
   not affected, even when narrow, until phone width. */
@media (max-width: 860px) and (pointer: coarse), (max-width: 600px) {
  .site-header { border-bottom: 1px solid var(--line); }
  .site-header__inner { padding-block: 14px 4px; }
  .site-logo { display: block; }
  .site-logo img, .is-scrolled .site-logo img { display: block; }
  .site-nav { margin-top: 8px; }
  .site-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    white-space: nowrap;
  }
  .hero { margin-top: 10px; }
}

/* --------------------------------------------------------------------------
   Hero: the circle of support
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: clamp(480px, 48vw, 680px);
  margin-inline: clamp(8px, 1.2vw, 16px);
  overflow: hidden;
  overflow: clip;
  border-radius: var(--radius-lg);
  background: var(--green);
  color: var(--cream);
  animation: hero-in 1.2s var(--ease) both;
}
@keyframes hero-in {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* Colorado's Rockies: three ridgelines that rise gently into place */
.hero__mountains {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  height: 90%;
  pointer-events: none;
}
.hero__ridge { animation: ridge-in 1.8s var(--ease) both; }
.hero__ridge--back { fill: #265749; animation-delay: 0.15s; }
.hero__ridge--mid { fill: #2B5E51; animation-delay: 0.28s; }
.hero__ridge--front { fill: #316557; animation-delay: 0.41s; }
@keyframes ridge-in {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: none; }
}

.hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 3.8vw, 56px);
}

.hero__status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.75em;
  padding: 0.5em 1em;
  border: 1px solid rgba(248, 246, 239, 0.28);
  border-radius: 999px;
  color: var(--cream);
  font-size: 0.9375rem;
  line-height: 1.35;
}
.hero__pulse {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sand);
}
.hero__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--sand);
  animation: pulse 2.8s ease-out infinite;
}
@keyframes pulse {
  from { opacity: 0.7; transform: scale(1); }
  to { opacity: 0; transform: scale(3.4); }
}

.hero .hero__status { margin-bottom: 1.25rem; }
.hero h1 { color: var(--white); font-size: clamp(1.625rem, 3.2vw, 2.75rem); line-height: 1.2; }

/* Headline lines rise from behind a mask */
.line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.line > span { display: block; animation: line-up 1.25s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes line-up {
  from { transform: translateY(112%); }
  to { transform: none; }
}

.rise { animation: rise 1.1s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

.hero .btn-row { margin-top: 1.75rem; }

/* The rings sit to the right and run off the edge of the panel */
.hero__rings { position: relative; min-height: 300px; }
.hero__world {
  position: absolute;
  top: 50%;
  left: -2%;
  width: clamp(440px, 46vw, 640px);
  aspect-ratio: 1;
  transform: translate3d(0, calc(-50% + var(--sy, 0px)), 0);
  will-change: transform;
}

.rings__label {
  font: 600 20px var(--display);
  fill: var(--cream);
}

/* Every moving group turns or scales around the center of the circle */
.ring, .spin, .breathe {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.ring { animation: ring-in 1.5s var(--ease) both; animation-delay: 0.15s; }
.ring--2 { animation-delay: 0.3s; }
.ring--3 { animation-delay: 0.45s; }
@keyframes ring-in {
  from { opacity: 0; transform: scale(0.82); }
  to { opacity: 1; transform: none; }
}

.spin { animation: spin 110s linear infinite; }
.spin--reverse { animation: spin 80s linear infinite reverse; }
.spin--arc { animation-duration: 46s; }
.spin--dot-a { animation-duration: 34s; }
.spin--dot-b { animation: spin 58s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.breathe { animation: breathe 7s ease-in-out infinite alternate; }
@keyframes breathe { to { transform: scale(1.035); } }

/* The pause control: motion that keeps going needs a way to stop it */
.motion-toggle {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(248, 246, 239, 0.45);
  border-radius: 50%;
  background: var(--green);
  color: var(--cream);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.motion-toggle:hover { background: var(--cream); color: var(--green); }
.motion-toggle svg { width: 18px; height: 18px; }
.motion-toggle .icon-play { display: none; }
.motion-paused .motion-toggle .icon-play { display: block; }
.motion-paused .motion-toggle .icon-pause { display: none; }
.motion-paused .loop,
.motion-paused .hero__pulse::after { animation-play-state: paused; }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { padding-bottom: 8px; }
  /* Smaller rings leave room for the mountains to show underneath */
  .hero__rings { min-height: 400px; }
  .hero__world {
    top: 8px;
    left: 50%;
    width: 310px;
    transform: translate3d(-50%, var(--sy, 0px), 0);
  }
  .hero__mountains { height: 62%; }
  .rings__label { font-size: 24px; }
}

/* --------------------------------------------------------------------------
   Welcome: the main section after the hero. A short introduction and photos
   that lead straight into the two big buttons
   -------------------------------------------------------------------------- */
.welcome {
  margin: clamp(12px, 2vw, 24px) clamp(8px, 1.2vw, 16px);
  padding: clamp(32px, 5vw, 72px);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.welcome__intro {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.welcome__logo { width: clamp(112px, 11vw, 150px); height: auto; margin-bottom: clamp(14px, 1.6vw, 20px); }
.welcome__text h2 { font-size: clamp(1.125rem, 1.7vw, 1.5rem); line-height: 1.3; }
.welcome__copy { max-width: 34em; margin-top: 0.75rem; }
.btn--small {
  min-height: 44px;
  margin-top: 1.25rem;
  padding: 0.4em 1.1em;
  font-size: 0.9375rem;
}
.welcome__photos-wrap { position: relative; }
.welcome__rings {
  position: absolute;
  top: -9%;
  right: -7%;
  width: 62%;
  height: auto;
  pointer-events: none;
}
/* Two photos: one large, with a smaller one overlapping its corner */
.welcome__photos { position: relative; padding-bottom: 13%; }
.welcome__photo { display: block; object-fit: cover; border-radius: var(--radius-md); }
.welcome__photo--main { width: 86%; height: auto; margin-left: auto; aspect-ratio: 4 / 3; }
.welcome__photo--second {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 46%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 6px solid var(--white);
  border-radius: calc(var(--radius-md) + 6px);
}
.welcome__invite {
  max-width: 24em;
  margin: clamp(32px, 4.5vw, 64px) auto clamp(18px, 2.2vw, 28px);
  font-size: clamp(1.375rem, 2.6vw, 2.25rem);
  line-height: 1.18;
  text-align: center;
}
@media (max-width: 860px) {
  .welcome__intro { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Ridge line: a thin mountain line that draws itself as you scroll, with the
   same sage as the lines in the logo
   -------------------------------------------------------------------------- */
.ridge-line {
  position: relative;
  height: clamp(52px, 6.5vw, 96px);
  margin-block: clamp(28px, 4vw, 56px);
}
.ridge-line svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.ridge-line path { stroke: var(--sage); stroke-width: 1.5; stroke-linejoin: round; }
.ridge-line__dot { display: none; }
.js .ridge-line__dot {
  position: absolute;
  display: block;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--sand);
}
/* The dot and line sit inside the page margins */
.ridge-line { box-sizing: content-box; width: calc(100% - 2 * var(--gutter)); max-width: calc(1320px - 2 * var(--gutter)); padding-inline: 0; }

/* --------------------------------------------------------------------------
   Compact heroes for the About and Get Connected pages
   -------------------------------------------------------------------------- */
.hero.hero--page { min-height: clamp(360px, 33vw, 470px); }
.hero--page h1 { font-size: clamp(2.125rem, 4.3vw, 3.75rem); line-height: 1.08; }
.hero__tag {
  margin-top: 0.75rem;
  color: var(--cream);
  font: 600 clamp(1.0625rem, 1.7vw, 1.5rem)/1.35 var(--display);
}
@media (min-width: 761px) {
  .hero--page .hero__world { left: 8%; width: clamp(330px, 31vw, 430px); }
  .hero--page .hero__mountains { height: 82%; }
}
@media (max-width: 760px) {
  .hero--page .hero__rings { min-height: 318px; }
  .hero--page .hero__world { width: 290px; }
}

/* Get Connected: the rings rise like a sun behind the ridgelines, and the two
   choices overlap the bottom of the panel */
.hero.hero--connect { grid-template-columns: 1fr; min-height: clamp(280px, 25vw, 350px); }
.hero--connect .hero__copy { padding-bottom: clamp(72px, 7vw, 96px); }
.hero--connect .hero__mountains { height: 74%; }
/* Sits in the valley between two peaks of the back ridgeline */
.hero__sun {
  --sun: clamp(190px, 19vw, 270px);
  position: absolute;
  top: 5%;
  left: 76.4%;
  width: var(--sun);
  margin-left: calc(var(--sun) / -2);
  aspect-ratio: 1;
  will-change: transform;
}
@media (max-width: 760px) {
  /* Below the words on phones, so the sun's center never sits behind text */
  .hero__sun { --sun: 140px; top: 114px; }
  .hero.hero--connect .hero__mountains { height: 54%; }
}
.hero--connect .motion-toggle { top: 16px; bottom: auto; }
.hero--connect + .wrap .choose { z-index: 1; margin-top: clamp(-52px, -4vw, -36px); }

/* --------------------------------------------------------------------------
   The two main paths
   -------------------------------------------------------------------------- */
.paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 20px);
}
.path {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: clamp(28px, 3.4vw, 48px);
  overflow: hidden;
  overflow: clip;
  border-radius: var(--radius-lg);
}
.path--team { background: var(--green); color: var(--cream); }
.path--team h3 { color: var(--white); }
.path--partners { background: var(--sand-tint); }

.path > * { position: relative; }
.path h3 { max-width: 11em; font-size: clamp(1.5rem, 2.3vw, 2.125rem); line-height: 1.14; }
.path p { max-width: 26em; margin-top: 0.75rem; margin-bottom: clamp(22px, 2.6vw, 32px); }

/* The main action of the page: a big bar that fills the panel */
.btn--big {
  justify-content: space-between;
  gap: 16px;
  min-height: clamp(70px, 6.4vw, 88px);
  margin-top: auto;
  padding: 0.6em 0.75em 0.6em 1.3em;
  font: 600 clamp(1.1875rem, 1.9vw, 1.5625rem)/1.2 var(--display);
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.5s var(--ease);
}
.btn--big::after {
  width: clamp(44px, 3.8vw, 56px);
  height: clamp(44px, 3.8vw, 56px);
  -webkit-mask-size: 52%;
  mask-size: 52%;
}
.btn--big:hover { transform: translateY(-3px); }
.btn--big:hover::after { transform: translateX(5px); }

/* Quiet ridgelines along the bottom, with the rings tucked into the corner */
.path__ridges {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  height: 62%;
  pointer-events: none;
}
.path--team .path__ridge--back { fill: #245449; }
.path--team .path__ridge--front { fill: #2A5A4F; }
.path--partners .path__ridge--back { fill: #EEE6D6; }
.path--partners .path__ridge--front { fill: #E9DFCC; }
.path__rings {
  position: absolute;
  top: clamp(-96px, -5vw, -64px);
  right: clamp(-96px, -5vw, -64px);
  width: clamp(190px, 17vw, 240px);
  height: clamp(190px, 17vw, 240px);
  transition: transform 1.3s var(--ease);
}
.path:hover .path__rings { transform: scale(1.1); }
@media (max-width: 860px) {
  .paths { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */
.services {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(40px, 7vw, 112px);
}
.services__intro { align-self: start; position: sticky; top: 112px; }

.service-list { margin: 0; padding: 0; list-style: none; }
.service {
  position: relative;
  display: grid;
  grid-template-columns: clamp(96px, 10vw, 132px) 1fr;
  gap: 8px clamp(18px, 2.4vw, 32px);
  padding-block: clamp(30px, 3.6vw, 48px);
  border-top: 1px solid var(--line);
}
.service:last-child { border-bottom: 1px solid var(--line); }
/* A green line draws across the row when you point at it */
.service::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 1.5px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease);
}
.service:hover::before { transform: scaleX(1); }

.service__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  transition: transform 0.9s var(--ease);
}
.service:hover .service__photo { transform: scale(1.03); }
.services__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.service__body { min-width: 0; }
.service__body > p { max-width: 38em; margin-top: 0.875rem; }
.service__waiver.service__waiver {
  margin-top: 0.5rem;
  color: var(--sage-dark);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Keeps opened text evenly spaced under the paragraph above it */
.stack > div:has(> .more) { margin-top: 0; }

/* See more: without JavaScript the full description simply shows */
.more > div > p { max-width: 38em; padding-top: 0.875rem; }
.js .more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s var(--ease);
}
.js .more > div {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease, visibility 0s linear 0.7s;
}
.js .more.open { grid-template-rows: 1fr; }
.js .more.open > div {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.7s ease 0.1s, visibility 0s;
}

.more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 1rem;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--green);
  font: 500 1rem/1.3 var(--body);
  cursor: pointer;
}
.more-toggle[hidden] { display: none; }
.more-toggle__icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid var(--green);
  border-radius: 50%;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.6s var(--ease);
}
.more-toggle__icon::before,
.more-toggle__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  margin: -0.75px 0 0 -5px;
  background: currentColor;
  transition: transform 0.6s var(--ease);
}
.more-toggle__icon::after { transform: rotate(90deg); }
.more-toggle:hover .more-toggle__icon { background: var(--green); color: var(--cream); }
.more-toggle[aria-expanded="true"] .more-toggle__icon { transform: rotate(180deg); }
.more-toggle[aria-expanded="true"] .more-toggle__icon::after { transform: rotate(0deg); }

@media (max-width: 960px) {
  .services { grid-template-columns: 1fr; }
  .services__intro { position: static; }
}

/* --------------------------------------------------------------------------
   Closing line: a quiet reminder, since the page has already made the offer
   -------------------------------------------------------------------------- */
.closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 40px;
  padding-block: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
}
.closing h2 { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.3; }
.closing__links { display: flex; flex-wrap: wrap; gap: 8px 28px; }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 6vw, 96px);
  padding-block: clamp(40px, 6vw, 80px) clamp(4px, 1vw, 12px);
}
.pull {
  color: var(--green);
  font: 600 clamp(1.25rem, 1.9vw, 1.625rem)/1.35 var(--display);
}
@media (max-width: 860px) { .about-intro { grid-template-columns: 1fr; } }

.director.director--story { align-items: start; }
.director--story .director__photo { position: sticky; top: 104px; }
.story__eyebrow { margin-bottom: 0.75rem; }
.story__signature { font-weight: 500; line-height: 1.5; }
.story__signature strong { display: block; color: var(--green); font: 600 1.25rem/1.4 var(--display); }
@media (max-width: 760px) { .director--story .director__photo { position: static; } }

.values-head { max-width: 46em; }
.values-head .eyebrow { margin-bottom: 0.75rem; }
.values-head p:last-child { margin-top: 1.25rem; }
.values { margin: clamp(32px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.value {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(150px, 0.6fr) 1.5fr;
  gap: 8px clamp(16px, 3vw, 40px);
  padding-block: clamp(24px, 3vw, 36px);
}
.value::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--line);
  transform-origin: left;
}
.js .value::before { transform: scaleX(0); transition: transform 1.4s var(--ease) var(--d, 0ms); }
.js .value.in::before { transform: scaleX(1); }
.value__number { color: var(--sage-dark); font: 600 0.9375rem/1.9 var(--display); }
.value__lead { color: var(--green); font-weight: 500; }
.value__lead + p { margin-top: 0.5rem; }
@media (max-width: 760px) {
  .value { grid-template-columns: 40px 1fr; }
  .value > div { grid-column: 2; }
}

.belong {
  position: relative;
  overflow: hidden;
  overflow: clip;
  margin-inline: clamp(8px, 1.2vw, 16px);
  padding: clamp(48px, 7vw, 104px) clamp(28px, 6vw, 96px);
  border-radius: var(--radius-lg);
  background: var(--green);
  color: var(--cream);
}
.belong > * { position: relative; }
.belong__layout {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.belong__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
}
@media (max-width: 860px) { .belong__layout { grid-template-columns: 1fr; } }
.belong__mountains {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 85%;
  max-width: none;
  object-fit: cover;
  object-position: bottom;
}
.belong h2 { color: var(--white); }
.belong__body { max-width: 38em; margin-top: 1.5rem; }
.belong__body > * + * { margin-top: 1rem; }
.belong .pull { color: var(--white); margin-top: 1.75rem; }

.about-photo {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  aspect-ratio: 21 / 9;
  margin: clamp(28px, 4vw, 48px) auto 0;
  object-fit: cover;
  object-position: center 35%;
  border-radius: var(--radius-lg);
}
.values-top {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 6vw, 88px);
  align-items: center;
}
.values-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 22%;
  border-radius: var(--radius-lg);
}
@media (max-width: 760px) { .values-top { grid-template-columns: 1fr; } }

.director {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) 1.2fr;
  gap: clamp(32px, 7vw, 112px);
  align-items: center;
}
.director__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-md);
}
.director__role { margin-top: 0.25rem; line-height: 1.5; color: var(--muted); font-weight: 500; }
@media (max-width: 760px) {
  .director { grid-template-columns: 1fr; }
  .director__photo { max-width: 340px; }
}

/* --------------------------------------------------------------------------
   Get Connected: two paths with a sliding highlight
   -------------------------------------------------------------------------- */
.choose {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.choose a {
  position: relative;
  z-index: 1;
  display: block;
  padding: clamp(18px, 2.4vw, 30px) clamp(16px, 2.6vw, 36px);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--charcoal);
  text-decoration: none;
  transition: color 0.45s ease, background-color 0.45s ease;
}
.choose b {
  display: block;
  color: var(--green);
  font: 600 clamp(1.125rem, 2.1vw, 1.75rem)/1.2 var(--display);
  transition: color 0.45s ease;
}
.choose small {
  display: block;
  margin-top: 6px;
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  line-height: 1.4;
}
/* The green highlight glides between the two choices */
.js .choose { isolation: isolate; }
.js .choose::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  width: calc(50% - 4px);
  border-radius: var(--radius-md);
  background: var(--green);
  transform: translateX(calc(var(--i, 0) * (100% + 8px)));
  transition: transform 0.75s var(--ease);
}
.js .choose a { z-index: auto; }
.js .choose a b, .js .choose a small { position: relative; z-index: 3; }
.choose a[aria-selected="true"] { color: var(--cream); }
.choose a[aria-selected="true"] b { color: var(--white); }
.choose a[aria-selected="true"]:focus-visible { outline-color: var(--green); }

.panel {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 6vw, 96px);
  padding: clamp(28px, 5vw, 72px);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.panel + .panel { margin-top: 16px; }
.panel[hidden] { display: none; }
.panel:focus-visible { outline-offset: 4px; border-radius: var(--radius-lg); }
.panel__photo {
  width: 100%;
  max-width: 340px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--radius-md);
}
@media (max-width: 860px) { .panel__photo { display: none; } }
.panel.enter > * { animation: rise 0.9s var(--ease) both; }
.panel.enter > * + * { animation-delay: 0.1s; }
@media (max-width: 860px) { .panel { grid-template-columns: 1fr; } }

.waiver-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.waiver-list li {
  padding: 0.25em 0.85em;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--green);
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Host Home interest form: clickable bubbles for every choice */
.panel--form { display: block; }
.form-scroll-hint { display: none; }
.panel--form.enter > * { animation: rise 0.9s var(--ease) both; }
.interest-intro { max-width: 46em; margin-bottom: clamp(24px, 3vw, 36px); }
.interest-intro p { margin-top: 0.5rem; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }
.panel h2 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.2; }
.req { color: #8A3B2A; font-weight: 600; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.form-trap { position: absolute; left: -9999px; }

.form-section {
  display: grid;
  grid-template-columns: minmax(180px, 0.32fr) 1fr;
  gap: 20px clamp(28px, 5vw, 72px);
  padding-block: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--line);
}
.form-section > h3 {
  align-self: start;
  position: sticky;
  top: 104px;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
}

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  line-height: 1.4;
}
.field input,
.field textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1.5px solid #8C968E;
  border-radius: 14px;
  background: var(--white);
  color: var(--charcoal);
  font: 400 1rem/1.5 var(--body);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.field textarea { resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--green); }
.field input:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--green);
  border-radius: 14px;
  box-shadow: 0 0 0 3px rgba(31, 77, 67, 0.25);
}

.question { min-width: 0; margin: 0 0 28px; padding: 0; border: 0; }
.question:last-child { margin-bottom: 0; }
.question legend {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  font-weight: 500;
  line-height: 1.45;
}

.question legend.visually-hidden { width: 1px; margin: 0; }

.bubbles { display: flex; flex-wrap: wrap; gap: 2px 28px; }
.bubbles--stack { flex-direction: column; }
.bubble {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding-block: 6px;
  line-height: 1.4;
  cursor: pointer;
}
.bubble input {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0;
  border: 1.5px solid #8C968E;
  border-radius: 50%;
  background: var(--white);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.35s var(--ease);
}
.bubble:hover input { border-color: var(--green); transform: scale(1.07); }
.bubble input:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 50%; }
.bubble input:checked { border-color: var(--green); }

/* Single choice: a green dot pops in */
.bubble input[type="radio"]::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--green);
  transform: scale(0);
  transition: transform 0.35s var(--ease);
}
.bubble input[type="radio"]:checked::before { transform: scale(1); }

/* Check all that apply: the bubble fills with a check mark */
.bubble input[type="checkbox"]::before {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.500 4.500 4.500L19 7.500'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.500 4.500 4.500L19 7.500'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0);
  transition: transform 0.35s var(--ease);
}
.bubble input[type="checkbox"]:checked { background: var(--green); }
.bubble input[type="checkbox"]:checked::before { transform: scale(1); }
/* Long options wrap, so the bubble stays beside the first line of text */
.bubbles--stack .bubble { align-items: flex-start; padding-block: 9px; }
.bubbles--stack .bubble > span { padding-top: 1px; }

.form-note { margin-bottom: 20px; }
.interest-submit { margin-top: 28px; }

.field-error { margin-top: 6px; color: #8A3B2A; font-size: 0.9375rem; font-weight: 500; }
.field--error input, .field--error textarea { border-color: #8A3B2A; }
.question--error .bubble input { border-color: #8A3B2A; }

.form-status {
  margin-top: 24px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--sand-tint);
  color: var(--charcoal);
}
.form-status a { font-weight: 500; }

.form-success { padding-block: clamp(32px, 4vw, 52px); border-top: 1px solid var(--line); }
.form-success:focus { outline: none; }
.form-success p { margin-top: 0.75rem; }
.form-success[hidden] { display: none; }

@media (max-width: 860px) {
  .form-section { grid-template-columns: 1fr; }
  .form-section > h3 { position: static; }
}
@media (max-width: 520px) {
  .field-grid { grid-template-columns: 1fr; }
}

/* Case manager form: same fields and bubbles, in a shorter layout */
.field--wide { grid-column: 1 / -1; }
.case-form .question { margin-block: 24px 20px; }
.form-hint { margin-top: 8px; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.form-success--plain { padding-block: 0; border-top: 0; }

/* Direct contact: one quiet line, for anyone who'd rather just call or email */
.direct-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 40px;
  margin-block: clamp(32px, 4vw, 48px) 0;
  padding-block: 20px;
  border-block: 1px solid var(--line);
  font-size: 0.9375rem;
}
.direct-contact p { font-weight: 500; }
.direct-contact ul { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { padding-block: clamp(56px, 7vw, 96px) 32px; }
.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1.1fr;
  gap: 40px;
}
.site-footer img { width: 260px; height: auto; margin-left: -8px; }
.site-footer__tagline { margin-top: 14px; color: var(--muted); font-size: 0.9375rem; }
.site-footer h2 {
  margin-bottom: 12px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { padding-block: 3px; }
.site-footer address { font-style: normal; }
.site-footer__legal {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9375rem;
}
@media (max-width: 760px) { .site-footer__top { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Phone layout: its own arrangement, not a shrunk desktop. One clear column,
   tighter spacing, smaller art, and easy-to-tap controls
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  :root { --band: 52px; --gutter: 20px; --radius-lg: 24px; --radius-md: 16px; }
  body { font-size: 1rem; line-height: 1.6; }
  h2 { font-size: 1.625rem; }
  h3 { font-size: 1.125rem; }
  .lead { font-size: 1.0625rem; line-height: 1.55; }
  .stack > * + * { margin-top: 1rem; }

  /* Header */
  .site-header__inner { padding-inline: var(--gutter); }
  .site-logo img, .is-scrolled .site-logo img { width: 100px; }
  .site-nav a { font-size: clamp(0.8125rem, 3.8vw, 0.9375rem); }

  /* Home hero: words first, then the wheel */
  .hero .hero__copy { padding: 26px 24px 4px; }
  .hero .hero__status {
    margin-bottom: 0;
    padding: 0;
    border: 0;
    font-size: 0.875rem;
  }
  /* The tagline is not shown on phones. It stays in the page for screen
     readers, because it is the home page's main heading. */
  .hero:not(.hero--page) h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hero .btn-row { flex-direction: column; margin-top: 20px; gap: 10px; }
  .hero .btn { width: 100%; min-height: 52px; padding-inline: 12px; font-size: 0.9375rem; }
  .hero .btn--ghost::after { display: none; }
  .hero .hero__rings { min-height: 318px; }
  .hero .hero__world { top: 12px; width: 300px; }
  .hero .hero__mountains { height: 56%; }
  .rings__label { font-size: 28px; }
  .ring--2 .rings__label { font-size: 23px; }
  .motion-toggle { right: 12px; bottom: 12px; width: 40px; height: 40px; }

  /* Welcome: centered logo, heading and copy, then photos and the buttons */
  .welcome { margin-block: 10px; padding: 26px 16px 16px; }
  .welcome__intro { gap: 20px; }
  .welcome__text { text-align: center; }
  .welcome__logo { display: block; width: 112px; margin: 0 auto 12px; }
  .welcome__text h2 { max-width: 15em; margin-inline: auto; font-size: 1.125rem; }
  .welcome__copy { margin: 8px auto 0; font-size: 0.9375rem; line-height: 1.6; }
  .btn--small { margin-top: 14px; }
  .welcome__rings { display: none; }
  .welcome__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 0; }
  .welcome__photo--main, .welcome__photo--second {
    position: static;
    width: 100%;
    margin: 0;
    aspect-ratio: 1;
    border: 0;
    border-radius: 14px;
  }
  .welcome__invite { margin: 24px auto 12px; font-size: 1.375rem; }

  /* Work with us and case manager panels */
  .path { padding: 22px; text-align: center; }
  .path h3 { max-width: none; font-size: 1.375rem; }
  .path p { max-width: 24em; margin: 8px auto 18px; }
  .path__rings { top: -44px; right: -44px; width: 124px; height: 124px; }
  .path__ridges { height: 52%; }
  .btn--big { min-height: 62px; padding-left: 1.1em; font-size: 1.0625rem; }
  .btn--big::after { width: 38px; height: 38px; }

  /* Services: icon beside the name, description across the full width */
  .services { gap: 20px; }
  .services__intro .lead { font-size: 1rem; }
  .services__photo { aspect-ratio: 16 / 10; }
  .service { grid-template-columns: 68px 1fr; gap: 2px 14px; align-items: center; padding-block: 22px; }
  .service__photo { grid-row: 1 / 3; align-self: start; width: 68px; border-radius: 14px; }
  .service__body { display: contents; }
  .service__body h3 { grid-column: 2; align-self: end; font-size: 1.0625rem; }
  .service__body > .service__waiver { grid-column: 2; margin-top: 2px; font-size: 0.6875rem; letter-spacing: 0.06em; }
  .service__body > p:not(.service__waiver) { grid-column: 1 / -1; max-width: none; margin-top: 12px; }
  .service__body > .more, .service__body > .more-toggle { grid-column: 1 / -1; }
  .service__body > .more-toggle { justify-self: start; margin-top: 8px; }

  /* Director: small photo beside the name, story underneath */
  .director, .director.director--story { grid-template-columns: 92px 1fr; gap: 0 16px; align-items: center; }
  .director .director__photo, .director--story .director__photo { position: static; width: 92px; max-width: none; border-radius: 14px; }
  .director > .stack { display: contents; }
  .director > .stack > * { grid-column: 1 / -1; }
  .director > .stack > :first-child { grid-column: 2; margin-top: 0; }
  .director > .stack > :nth-child(2) { margin-top: 16px; }
  .director h2 { font-size: 1.375rem; }
  .director__role { font-size: 0.875rem; }

  /* Closing line */
  .closing { flex-direction: column; align-items: flex-start; padding-block: 22px; }

  /* Footer */
  .site-footer { padding-block: 36px 24px; }
  .site-footer__top { gap: 24px; }
  .site-footer img { width: 190px; }
  .site-footer__tagline { display: none; }
  .site-footer ul { columns: 2; }
  .site-footer__legal { margin-top: 28px; }

  /* Get Connected */
  .hero--page h1 { font-size: 2.125rem; }
  .hero__tag { font-size: 1rem; }
  .hero.hero--page:not(.hero--connect) { grid-template-columns: 1fr 140px; min-height: 200px; }
  .hero--page:not(.hero--connect) .hero__copy { justify-content: center; padding: 24px 0 24px 20px; }
  .hero--page:not(.hero--connect) h1 { font-size: 1.75rem; }
  .hero--page:not(.hero--connect) .hero__tag { display: none; }
  .hero--page:not(.hero--connect) .hero__rings { min-height: 0; }
  .hero--page:not(.hero--connect) .hero__world {
    top: 50%;
    left: 0;
    width: 192px;
    transform: translate3d(0, calc(-50% + var(--sy, 0px)), 0);
  }
  .hero--page:not(.hero--connect) .rings__label { display: none; }
  .hero--page:not(.hero--connect) .hero__mountains { height: 78%; }
  .hero--page:not(.hero--connect) .motion-toggle { top: 10px; right: 10px; bottom: auto; width: 40px; height: 40px; }
  .hero--connect .hero__copy { padding: 26px 24px 76px; }
  .choose a { padding: 14px; }
  .choose b { font-size: 1rem; }
  .choose small { font-size: 0.8125rem; }
  .panel { gap: 20px; padding: 22px 20px; }
  .interest-intro { margin-bottom: 16px; }
  .form-section { gap: 12px; padding-block: 24px; }
  .question { margin-bottom: 20px; }
  .question legend { margin-bottom: 4px; font-size: 0.9375rem; }
  .field label { font-size: 0.9375rem; }
  .field-grid { grid-template-columns: 1fr; gap: 14px; }

  /* Forms sit in their own box that scrolls, so the page stays short */
  .panel { padding-inline: 12px; }
  .interest-intro, .panel > .stack { padding-inline: 8px; }
  .form-scroll-hint { display: block; margin: 0 8px 8px; color: var(--muted); font-size: 0.8125rem; }
  .interest-form, .case-form {
    max-height: 66svh;
    padding: 0 14px;
    overflow-y: auto;
    scroll-padding-top: 52px;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    background: var(--white);
  }
  .case-form { padding-top: 14px; }
  /* A soft fade shows there's more below */
  .interest-form::after, .case-form::after {
    content: "";
    position: sticky;
    bottom: 0;
    display: block;
    height: 30px;
    margin-inline: -14px;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--white));
    pointer-events: none;
  }
  .form-section { gap: 10px; padding-block: 0 20px; border-top: 0; }
  /* Each section's name stays in view while its questions scroll */
  .interest-form .form-section > h3 {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-inline: -14px;
    padding: 12px 14px 8px;
    border-bottom: 1px solid var(--line);
    background: var(--white);
  }
  .interest-submit { margin-top: 16px; }

  /* Bubbles line up in tidy columns instead of wrapping unevenly */
  .bubbles { flex-direction: column; gap: 0; }
  .bubbles--row { flex-direction: row; flex-wrap: wrap; gap: 0 22px; }
  .bubbles--count { display: grid; grid-template-columns: repeat(6, 1fr); }
  .bubbles--pairs { display: grid; grid-template-columns: 1fr 1fr; }
  .bubbles--count .bubble { gap: 5px; }
  .interest-submit { width: 100%; }
  .direct-contact { flex-direction: column; margin-top: 24px; }
  .direct-contact ul { flex-direction: column; }

  /* About */
  .about-intro { gap: 16px; padding-block: 28px 0; }
  .about-photo { aspect-ratio: 16 / 10; margin-top: 24px; object-position: center; }
  .values-top { gap: 20px; }
  .values-photo { aspect-ratio: 16 / 11; object-position: center 20%; }
  .belong__layout { gap: 22px; }
  .belong__photo { aspect-ratio: 4 / 3; object-position: center 30%; }
  .pull { font-size: 1.1875rem; }
  .value { grid-template-columns: 30px 1fr; gap: 4px 8px; padding-block: 20px; }
  .value__number { font-size: 0.8125rem; line-height: 1.7; }
  .belong { padding: 34px 24px; }
  .belong h2 { font-size: 1.625rem; }
}

@media (max-width: 350px) {
  .bubbles--count { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   Respect people who ask for less motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  @view-transition { navigation: none; }
  .js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  .motion-toggle { display: none; }
  .js .value::before { transform: none; }
}