/* Mind Thrive Institute — homepage
   Built 1:1 from the Figma frame "Landing Page" (1440 × 4788, client update 11/2/26).
   Every measurement is written in design pixels × var(--u), so the page is
   exact at 1440px wide and scales proportionally down to 1101px, with minimum
   text sizes. At 1100px and below the layout reflows to one column (see bottom of file). */

:root {
  --u: min(1px, calc(100vw / 1440));

  --indigo: #242472;        /* Deep Indigo — PMS 2118 C */
  --indigo-hero: #2f3574;
  --indigo-dark: #1d1d5b;
  --periwinkle: #7a92d7;
  --violet: #7b7ce4;        /* eyebrows, labels, buttons */
  --coral: #ff8441;
  --yellow: #fcc447;
  --calm-grey: #e3e3e3;
  --field-border: #d1d5db;
  --rule: #f3f4f6;
  --muted: #98a2b3;

  --font: "mundial", "Lexend", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--indigo);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: none; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
section[id] { scroll-margin-top: calc(134 * var(--u)); }
/* Our Mission lands ~52px below the header instead of flush against it */
#mission { scroll-margin-top: calc(186 * var(--u)); }
#about { scroll-margin-top: calc(109 * var(--u)); }   /* lands 25px further down than the default */

.eyebrow {
  font-size: max(13px, calc(16 * var(--u)));
  line-height: calc(20 * var(--u));
  font-weight: 500;
  color: var(--violet);
}
h2 {
  font-size: calc(57 * var(--u));
  line-height: calc(67 * var(--u));
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--indigo);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.12);
}
.header-inner {
  max-width: calc(1440 * var(--u));
  height: calc(134 * var(--u));
  margin: 0 auto;
  padding: 0 calc(123.5 * var(--u)) 0 calc(123 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand img { width: calc(211 * var(--u)); height: auto; }
.nav-links { display: flex; gap: calc(40 * var(--u)); }
.nav-mark, .nav-num, .nav-extra, .logo-rev { display: none; }
.nav-links a {
  font-size: max(14px, calc(15.5 * var(--u)));
  font-weight: 500;
  text-decoration: none;
  color: var(--indigo);
}
.nav-links a:hover { color: var(--violet); }
.nav-toggle { display: none; }

/* ---------- Hero ---------- */
.hero-stage {
  position: relative;
  overflow-x: clip;   /* the composite overhangs the frame by half a pixel */
  max-width: calc(1440 * var(--u));
  height: calc(897 * var(--u));
  margin: 0 auto;
}
.hero-art {
  position: absolute;
  left: calc(38 * var(--u));
  top: calc(56 * var(--u));
  width: calc(1385.6 * var(--u));
  height: auto;
}
.hero-title {
  position: absolute;
  left: calc(78 * var(--u));
  top: calc(107.5 * var(--u));
  width: calc(900 * var(--u));
  font-size: calc(80.5 * var(--u));
  line-height: calc(83 * var(--u));
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #fff;
}
.hero-tagline {
  position: absolute;
  left: calc(1044.5 * var(--u));
  top: calc(683.5 * var(--u));
  width: calc(360 * var(--u));
  font-size: calc(39 * var(--u));
  line-height: calc(41 * var(--u));
  font-weight: 700;
  color: #fff;
}
.hm { display: none; }

/* ---------- Mission ---------- */
.mission {
  position: relative;
  max-width: calc(1440 * var(--u));
  height: calc(865 * var(--u));
  margin: 0 auto;
}
.mission-media {
  position: absolute;
  left: calc(128 * var(--u));
  top: 0;
  width: calc(493 * var(--u));
  height: calc(865 * var(--u));
}
.mission-card {
  position: absolute;
  inset: 0;
  background: var(--periwinkle);
  border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0;
}
.mission-photo {
  position: absolute;
  left: calc(-542.9 * var(--u));
  top: calc(13.15 * var(--u));
  width: calc(1300.6 * var(--u));
  height: auto;
  /* sits on the band: trimmed at the section's bottom edge only — the family spills out of the card to the left */
  clip-path: inset(-200px -400px calc(15.65 * var(--u)) -1000px);
}
.mission-copy {
  position: absolute;
  left: calc(729 * var(--u));
  top: calc(13.5 * var(--u));
  width: calc(600 * var(--u));
}
.mission-copy h2 { margin-top: calc(9.5 * var(--u)); }
/* body copy wraps naturally (no forced breaks: the 14px floor would make them double-wrap on
   1101–1240px screens). Widths are tuned so Lexend breaks where the Figma does at 1440 —
   re-check when the Mundial kit goes in. */
.body { margin-top: calc(43.5 * var(--u)); width: calc(593 * var(--u)); }
.body p,
.contact-body,
.donate-copy p {
  font-size: max(14px, calc(16.9 * var(--u)));
  line-height: max(19px, calc(23 * var(--u)));
}
.body p { line-height: max(20px, calc(25 * var(--u))); }
.body p + p { margin-top: calc(25 * var(--u)); }
.body strong { font-weight: 650; }

/* ---------- Gradient band ---------- */
.band {
  position: relative;   /* paints over the mission photo's trimmed edge */
  height: calc(173 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg,
    #ffd8ba 0%, #fed4b6 8.3%, #ffbfa0 16.7%, #feb091 25%, #fca688 33.3%, #f59d8a 41.7%,
    #dc94a2 50%, #c690ba 58.3%, #b292ce 66.7%, #9597e4 75%, #789bf7 83.3%, #699dfd 91.7%, #659dfe 100%);
}
.band p {
  font-size: calc(42 * var(--u));
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #fff;
}

/* ---------- About ---------- */
.about {
  position: relative;
  max-width: calc(1440 * var(--u));
  min-height: calc(1161 * var(--u));   /* grows if the copy runs long (text floors on narrow desktops) */
  margin: 0 auto;
  padding: calc(104 * var(--u)) 0 calc(64 * var(--u)) calc(121.5 * var(--u));
}
.about-copy { width: calc(1200 * var(--u)); }
.about h2 { margin-top: calc(30 * var(--u)); width: calc(1200 * var(--u)); }
.bio { width: calc(594.5 * var(--u)); }
.bio:first-of-type { margin-top: calc(49 * var(--u)); }
.bio + .bio { margin-top: calc(42 * var(--u)); }
.bio h3 {
  font-size: calc(22.5 * var(--u));
  line-height: calc(28 * var(--u));
  font-weight: 700;
}
.bio-photo { display: none; }   /* phone/tablet only — desktop uses the collage */
.bio .role {
  margin-top: calc(1 * var(--u));
  margin-bottom: calc(24 * var(--u));
}
.bio:last-of-type .role { margin-bottom: calc(26.5 * var(--u)); }
.bio p {
  font-size: max(13px, calc(15.1 * var(--u)));
  line-height: max(17px, calc(20 * var(--u)));
}
.collage { position: absolute; inset: 0; pointer-events: none; }
.tile {
  position: absolute;
  overflow: hidden;
  border-radius: calc(16 * var(--u));
}
.tile img { position: absolute; }
/* positions in design px, measured from the section's top edge (y = 2069 in the frame) */
.t-robin    { left: calc(879 * var(--u));    top: calc(352.5 * var(--u)); width: calc(195 * var(--u)); height: calc(220 * var(--u)); }
.t-robin img    { left: calc(-56 * var(--u)); top: calc(-16.1 * var(--u)); width: calc(341.1 * var(--u)); }
.t-pattern  { left: calc(1096 * var(--u));   top: calc(414.5 * var(--u)); width: calc(217 * var(--u)); height: calc(158 * var(--u)); }
.t-gradient { left: calc(938 * var(--u));    top: calc(597.5 * var(--u)); width: calc(103 * var(--u)); height: calc(215 * var(--u)); }
.t-doug     { left: calc(1064 * var(--u));   top: calc(592.5 * var(--u)); width: calc(195 * var(--u)); height: calc(220 * var(--u)); }
.t-doug img     { left: calc(-0.3 * var(--u)); top: calc(-4.8 * var(--u)); width: calc(195.7 * var(--u)); }
.t-hanne    { left: calc(896.5 * var(--u));  top: calc(832.5 * var(--u)); width: calc(195 * var(--u)); height: calc(220 * var(--u)); }
.t-hanne img    { left: calc(-29.6 * var(--u)); top: calc(-30.3 * var(--u)); width: calc(329 * var(--u)); }
.t-envelope { left: calc(1113.5 * var(--u)); top: calc(832.5 * var(--u)); width: calc(186 * var(--u)); height: calc(170 * var(--u)); }
.t-pattern img, .t-gradient img, .t-envelope img {
  inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* ---------- Donate ---------- */
.donate { background: var(--indigo-dark); color: #fff; }
.donate-inner {
  max-width: calc(1440 * var(--u));
  min-height: calc(278 * var(--u));
  margin: 0 auto;
  position: relative;
}
.donate h2 {
  position: absolute;
  left: calc(170 * var(--u));
  top: calc(56 * var(--u));
  width: calc(440 * var(--u));
  color: #fff;
  line-height: calc(66 * var(--u));
}
.donate h2 span { display: block; margin-top: calc(3.5 * var(--u)); color: var(--coral); }
/* copy column sits in flow so the stock-gift details can push the band taller */
.donate-copy {
  width: max(calc(590 * var(--u)), 470px);   /* floor keeps the first sentence on one line near 1101px */
  margin-left: calc(730 * var(--u));
  padding: calc(56 * var(--u)) 0 calc(52 * var(--u));
}
.donate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--u));
  margin-top: calc(21.5 * var(--u));
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.btn:hover { background: #6a6bd6; }
.btn:active { transform: translateY(1px); }
.btn-donate {
  width: calc(225 * var(--u));
  height: calc(56 * var(--u));
  font-size: calc(19.5 * var(--u));
}

/* ---------- Contact ---------- */
.contact {
  position: relative;
  max-width: calc(1440 * var(--u));
  height: calc(678.5 * var(--u));
  margin: 0 auto;
}
.contact-copy {
  position: absolute;
  left: calc(122 * var(--u));
  top: calc(103 * var(--u));
  width: calc(600 * var(--u));
}
.contact-copy h2 { margin-top: calc(19.5 * var(--u)); }
.contact-body { margin-top: calc(14.5 * var(--u)); width: calc(588 * var(--u)); }
.contact-form {
  position: absolute;
  left: calc(730 * var(--u));
  top: calc(154.5 * var(--u));
  width: calc(588 * var(--u));
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(20 * var(--u));
  row-gap: calc(13 * var(--u));
}
.field { position: relative; display: flex; flex-direction: column; }
.full { grid-column: 1 / -1; }
.field label {
  font-size: max(13px, calc(15.25 * var(--u)));
  line-height: calc(20 * var(--u));
  font-weight: 500;
  color: var(--violet);
  margin-bottom: calc(7 * var(--u));
}
.field input, .field textarea {
  width: 100%;
  height: calc(50.5 * var(--u));
  padding: 0 calc(14 * var(--u));
  border: 1px solid var(--field-border);
  border-radius: calc(7 * var(--u));
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  font: 400 calc(16 * var(--u)) / 1.3 var(--font);
  color: var(--indigo);
}
.field textarea { height: calc(93.5 * var(--u)); padding-top: calc(12 * var(--u)); resize: none; }
.field input::placeholder { color: #a9adc6; opacity: 1; }
.field-hint {
  position: absolute;          /* right end of the label row — doesn't move the Figma layout */
  top: 0;
  right: 0;
  line-height: calc(20 * var(--u));
  font-size: max(12px, calc(13 * var(--u)));
  color: var(--muted);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(123, 124, 228, 0.25);
}
/* Secondary donate option: outline pill that opens the stock-gift details */
.btn-outline {
  gap: calc(10 * var(--u));
  height: calc(56 * var(--u));
  padding: 0 calc(26 * var(--u));
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
  font-size: max(14px, calc(17 * var(--u)));
  font-weight: 600;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn-outline:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px #fff; }
.btn-outline:focus-visible, .btn-donate:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.btn-outline svg {
  width: max(13px, calc(16 * var(--u))); height: auto;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s ease;
}
.btn-outline[aria-expanded="true"] svg { transform: rotate(180deg); }
html:not(.js) .give-toggle { display: none; }   /* no JS: the details are simply shown */
.give-panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .45s cubic-bezier(.2, .8, .2, 1), opacity .35s ease, visibility 0s;
}
.js .give-panel:not(.open) {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .4s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, visibility 0s linear .4s;
}
.give-inner { min-height: 0; overflow: hidden; }
.give-card {
  margin-top: calc(22 * var(--u));
  padding: calc(20 * var(--u)) calc(24 * var(--u));
  border-radius: calc(16 * var(--u));
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 3px 0 0 var(--coral);
}
.donate-copy .give-card p {
  font-size: max(14px, calc(15.5 * var(--u)));
  line-height: max(20px, calc(22 * var(--u)));
  color: rgba(255, 255, 255, .9);
}
.give-card a { color: var(--coral); text-underline-offset: 3px; overflow-wrap: anywhere; }
.give-card a:hover { color: #fff; }

.btn-submit {
  margin-top: calc(22 * var(--u));
  height: calc(57 * var(--u));
  font-size: calc(20.4 * var(--u));
}
.form-status { font-size: calc(15 * var(--u)); min-height: 1em; }
.form-status.error { color: #c0392b; }

/* Netlify honeypot — hidden from people, visible to bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn[disabled] { opacity: .7; cursor: progress; }

/* Form confirmation — replaces the form after a successful send */
.form-success {
  position: absolute;
  left: calc(730 * var(--u));
  top: calc(155.5 * var(--u));
  width: calc(588 * var(--u));
  min-height: calc(471 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(48 * var(--u));
  text-align: center;
  border-radius: calc(24 * var(--u));
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(122, 146, 215, .18), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, rgba(255, 132, 65, .14), transparent 60%),
    #f6f6fb;
  animation: fs-in .6s cubic-bezier(.2, .8, .2, 1) both;
}
.form-success[hidden], .contact-form[hidden] { display: none; }
.fs-mark { position: relative; width: calc(132 * var(--u)); height: calc(132 * var(--u)); }
.fs-mark img {
  width: 100%; height: 100%;
  animation: fs-burst .9s cubic-bezier(.2, .9, .25, 1.15) .1s both;
}
.fs-mark svg {
  position: absolute; right: calc(-6 * var(--u)); bottom: calc(-6 * var(--u));
  width: calc(46 * var(--u)); height: calc(46 * var(--u));
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  animation: fs-pop .45s cubic-bezier(.2, .9, .25, 1.3) .65s both;
}
.fs-mark circle { fill: var(--violet); stroke: #fff; stroke-width: 3; }
.fs-mark path {
  stroke: #fff; stroke-width: 4.5;
  stroke-dasharray: 34; stroke-dashoffset: 34;
  animation: fs-draw .35s ease-out .95s forwards;
}
.fs-title {
  margin-top: calc(30 * var(--u));
  font-size: calc(40 * var(--u));
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
  outline: none;
  animation: fs-rise .6s cubic-bezier(.2, .8, .2, 1) .35s both;
}
.fs-text {
  margin-top: calc(12 * var(--u));
  max-width: calc(380 * var(--u));
  font-size: max(15px, calc(17 * var(--u)));
  line-height: 1.4;
  animation: fs-rise .6s cubic-bezier(.2, .8, .2, 1) .45s both;
}
.fs-bar {
  width: calc(120 * var(--u)); height: 4px; margin-top: calc(28 * var(--u));
  border-radius: 4px;
  background: linear-gradient(90deg, #ffd8ba, #fba083 35%, #c690ba 60%, #669eff);
  transform-origin: left;
  animation: fs-grow .7s cubic-bezier(.2, .8, .2, 1) .6s both;
}
.fs-again {
  margin-top: calc(22 * var(--u));
  border: 0; background: none; padding: 6px 4px;
  font: 500 max(14px, calc(16 * var(--u))) var(--font);
  color: var(--violet); cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
  animation: fs-rise .6s cubic-bezier(.2, .8, .2, 1) .6s both;
}
.fs-again:hover { color: var(--indigo); }
@keyframes fs-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes fs-burst { from { opacity: 0; transform: scale(.4) rotate(-60deg); } }
@keyframes fs-pop { from { opacity: 0; transform: scale(0); } }
@keyframes fs-draw { to { stroke-dashoffset: 0; } }
@keyframes fs-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes fs-grow { from { transform: scaleX(0); } }

/* ---------- Footer ---------- */
.footer-top {
  max-width: calc(1440 * var(--u));
  margin: 0 auto;
  padding: calc(45.5 * var(--u)) calc(124 * var(--u)) calc(35.5 * var(--u)) calc(122.5 * var(--u));
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
}
.footer-logo { grid-column: 1; width: calc(340 * var(--u)); height: auto; }
.footer-contact {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(8 * var(--u));
  margin-top: calc(35 * var(--u));
  font-style: normal;
  font-size: max(14px, calc(16.5 * var(--u)));
  line-height: calc(24 * var(--u));
}
.footer-contact span { margin-top: calc(1.5 * var(--u)); }
.footer-contact a { text-decoration: none; }
.footer-contact a:hover { color: var(--violet); }
.social {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: calc(36 * var(--u));
  margin: calc(38 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.social[hidden], .nav-social[hidden] { display: none !important; }   /* add `hidden` to a list to park it */
.social a { display: block; color: var(--indigo); }
.social a:hover { color: var(--violet); }
.social svg { display: block; width: calc(20 * var(--u)); height: calc(20 * var(--u)); fill: currentColor; }
.copyright {
  padding: calc(40 * var(--u)) 20px calc(169 * var(--u));
  border-top: 1px solid var(--rule);   /* full-bleed rule */
  text-align: center;
  font-family: Roboto, Arial, sans-serif;
  font-size: max(13px, calc(16 * var(--u)));
  color: var(--muted);
}

/* ---------- Scroll reveal ----------
   Only active when <html> has .reveal-on (set in <head> when JS runs and the
   visitor hasn't asked for reduced motion). Uses the individual `translate` /
   `scale` properties so it never fights an element's own `transform`.
   main.js removes data-reveal once an element has landed. */
.reveal-on [data-reveal] {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity .8s cubic-bezier(.2, .7, .2, 1),
    translate .9s cubic-bezier(.2, .8, .2, 1),
    scale .9s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--d, 0s);
}
.reveal-on [data-reveal="tile"] { translate: 0 56px; scale: .94; }
.reveal-on [data-reveal="zoom"] { translate: none; scale: 1.035; transition-duration: 1.1s, 1.1s, 1.4s; }
.reveal-on [data-reveal].is-in { opacity: 1; translate: none; scale: none; }

/* line breaks that match the Figma frame; dropped on phones */
br.d { display: inline; }

/* ---------- Phones & tablets ---------- */
@media (max-width: 1100px) {
  :root { --u: 1px; }
  br.d { display: none; }
  /* reflowed text: no lone last words, balanced headings */
  h1, h2, .band p { text-wrap: balance; }
  .body p, .bio p, .contact-body, .donate-copy p { text-wrap: pretty; }
  h2 { font-size: clamp(34px, 8.6vw, 46px); line-height: 1.12; }
  section[id], #mission, #about { scroll-margin-top: 76px; }

  .header-inner { height: 76px; padding: 0 20px; }
  .brand img { width: 128px; }
  .brand { position: relative; z-index: 2; display: block; }
  .brand .logo-rev {
    display: block; position: absolute; inset: 0;
    opacity: 0; transition: opacity .25s ease;
  }
  .brand .logo { transition: opacity .25s ease; }
  .nav-open .brand .logo-rev { opacity: 1; transition-delay: .12s; }
  .nav-open .brand .logo { opacity: 0; transition-delay: .12s; }

  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin-right: -10px; padding: 10px;
    border: 0; background: none; cursor: pointer;
    position: relative; z-index: 2;   /* above the open menu */
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 8px; }
  .nav-toggle span {
    display: block; height: 2px; background: var(--indigo); border-radius: 2px;
    transition: transform .3s cubic-bezier(.7,0,.2,1), opacity .2s ease, background-color .25s ease;
  }
  .nav-open .nav-toggle span { background: #fff; transition-delay: 0s, 0s, .12s; }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Full-screen menu: grows out of the toggle as a circle */
  html.nav-open { overflow: hidden; }   /* not body: that would re-anchor the sticky header */
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;                /* above the header's white, below the logo + toggle (z 2).
                                  No negative z-index: Safari drops those inside sticky parents. */
    display: flex;
    flex-direction: column;
    padding: 108px 28px calc(28px + env(safe-area-inset-bottom));
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(122, 146, 215, .28), transparent 60%),
      radial-gradient(90% 50% at 0% 100%, rgba(255, 132, 65, .22), transparent 60%),
      var(--indigo);
    overflow: hidden auto;
    visibility: hidden;
    clip-path: circle(0px at calc(100% - 42px) 38px);
    transition: clip-path .5s cubic-bezier(.7,0,.2,1), visibility 0s linear .5s;
  }
  .nav-open .site-nav {
    visibility: visible;
    clip-path: circle(150vmax at calc(100% - 42px) 38px);
    transition: clip-path .65s cubic-bezier(.7,0,.2,1), visibility 0s;
  }
  .nav-mark {
    display: block;
    position: absolute;
    right: -42vw;
    bottom: -34vw;
    width: 118vw;
    max-width: 640px;
    opacity: .2;
    pointer-events: none;
    animation: mark-spin 90s linear infinite;
  }
  @keyframes mark-spin { to { transform: rotate(360deg); } }

  .nav-links, .nav-extra { position: relative; z-index: 1; }   /* above the sunburst */
  .nav-links { flex-direction: column; gap: 0; }
  .nav-links a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
    font-size: clamp(38px, 11vw, 60px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #fff;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .25s ease, transform .3s ease, color .2s ease;
  }
  .nav-links a:hover, .nav-links a:focus-visible { color: var(--coral); outline: none; }
  .nav-num {
    display: inline-block;
    min-width: 22px;
    margin-top: .12em;      /* optical: centre on the letters, not the line box */
    font-size: 13px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--periwinkle);
  }
  .nav-open .nav-links a {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1), color .2s ease;
  }
  .nav-open .nav-links a:nth-child(1) { transition-delay: .22s, .22s, 0s; }
  .nav-open .nav-links a:nth-child(2) { transition-delay: .29s, .29s, 0s; }
  .nav-open .nav-links a:nth-child(3) { transition-delay: .36s, .36s, 0s; }
  .nav-open .nav-links a:nth-child(4) { transition-delay: .43s, .43s, 0s; }

  .nav-extra {
    display: block;
    margin-top: auto;
    padding-top: 28px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .nav-open .nav-extra {
    opacity: 1; transform: none;
    transition: opacity .5s ease .5s, transform .6s cubic-bezier(.2,.8,.2,1) .5s;
  }
  .nav-extra::before {
    content: "";
    display: block;
    height: 4px;
    margin-bottom: 22px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ffd8ba, #fba083 35%, #c690ba 60%, #669eff);
  }
  .nav-tag { font-size: 20px; font-weight: 700; color: var(--yellow); }
  .nav-donate { width: 100%; height: 56px; margin-top: 16px; font-size: 18px; }
  .nav-social { display: flex; gap: 22px; margin: 22px 0 0; padding: 0; list-style: none; }
  .nav-social a { display: block; color: #fff; opacity: .85; }
  .nav-social a:hover { opacity: 1; }
  .nav-social svg { display: block; width: 24px; height: 24px; fill: currentColor; }

  .hero, .mission, .about, .contact, .footer-top, .donate-inner { max-width: 760px; margin-inline: auto; }

  /* Hero: composite becomes a tile grid */
  .hero { padding: 20px 16px 0; }
  .hero-stage {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "title title" "family mom" "tag mom" "boy boy";
    gap: 10px;
  }
  .hero picture { display: none; }
  .hero-title, .hero-tagline { position: static; width: auto; }
  .hero-title {
    grid-area: title;
    background: var(--indigo-hero); border-radius: 16px;
    padding: 26px 22px 30px;
    font-size: clamp(40px, 11vw, 60px); line-height: 1.06;
  }
  /* tiles are cut from the composite with their own rounded corners + transparency */
  .hm { display: block; width: 100%; height: 100%; object-fit: cover; }
  .hm-family { grid-area: family; aspect-ratio: 800 / 833; height: auto; object-position: 50% 100%; }
  .hm-mom { grid-area: mom; object-position: 50% 0; border-radius: 16px; }
  .hm-boy { grid-area: boy; aspect-ratio: 900 / 826; height: auto; }
  .hero-tagline {
    grid-area: tag; align-self: stretch;
    display: flex; align-items: flex-end;
    background: var(--yellow); border-radius: 16px;
    /* sized to the tile so "Every possibility." stays on one line */
    padding: 16px; font-size: clamp(15px, calc((50vw - 53px) / 8.9), 30px); line-height: 1.12;
  }

  /* Mission */
  .mission { height: auto; padding: 56px 20px 0; display: flex; flex-direction: column-reverse; gap: 36px; overflow-x: clip; }
  .mission-copy, .mission-media { position: relative; left: auto; top: auto; width: auto; }
  /* the desktop composition scaled to the phone: card + family spilling out to the left.
     Explicit width (not a % margin): WebKit sizes aspect-ratio boxes from the pre-margin width in flex columns */
  .mission-media {
    --mw: min(69vw, 420px);
    width: var(--mw); height: auto; aspect-ratio: 493 / 865;
    align-self: flex-start; margin-left: calc(var(--mw) * .26 - 20px);
  }
  .mission-photo {
    left: -110.12%; top: 1.52%; width: 263.81%;
    clip-path: inset(-200px -400px 1.8% -1000px);
  }
  .mission-copy h2 { margin-top: 12px; }
  .body { margin-top: 24px; width: auto; }
  .body p, .contact-body, .donate-copy p { font-size: 17px; line-height: 1.4; }
  .body p + p { margin-top: 18px; }

  .band { height: auto; padding: 36px 24px; }
  .band p { transform: none; font-size: clamp(24px, 6.4vw, 34px); line-height: 1.2; text-align: center; }

  /* About */
  .about { min-height: 0; padding: 56px 20px; }
  .about-copy, .about h2, .bio { width: auto; }
  .about h2 { margin-top: 12px; }
  .bio:first-of-type { margin-top: 36px; }
  .bio + .bio { margin-top: 36px; }
  .bio h3 { font-size: 22px; }
  /* each headshot sits with its person instead of in a strip under all three bios */
  .bio-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
  .bio-photo {
    display: block; flex: none; width: 88px; height: auto; aspect-ratio: 195 / 220;
    border-radius: 14px;   /* cropped to match the desktop collage tiles */
  }
  .bio .role, .bio:last-of-type .role { margin: 2px 0 0; }
  .bio p { font-size: 16px; line-height: 1.45; }
  .collage { display: none; }

  /* Donate */
  .donate-inner { height: auto; padding: 52px 20px 56px; }
  .donate h2, .donate-copy { position: static; width: auto; }
  .donate-copy { margin-left: 0; padding: 0; }
  .donate h2 { line-height: 1.12; }
  .donate-copy { margin-top: 20px; }
  .donate-actions { margin-top: 24px; gap: 12px; flex-direction: column; align-items: stretch; max-width: 380px; }
  .btn-donate { width: auto; height: 56px; font-size: 19px; }
  .btn-outline { height: 52px; font-size: 16px; }
  .give-card { margin-top: 18px; padding: 18px 20px; }
  .donate-copy .give-card p { font-size: 15.5px; line-height: 1.45; }

  /* Contact */
  .contact { height: auto; padding: 56px 20px; }
  .contact-copy, .contact-form { position: static; width: auto; }
  .contact-copy h2 { margin-top: 12px; }
  .contact-body { width: auto; margin-top: 16px; }
  .contact-form { margin-top: 36px; column-gap: 14px; row-gap: 14px; }
  .form-success { position: static; width: auto; min-height: 420px; margin-top: 36px; padding: 40px 24px; }
  .fs-mark { width: 112px; height: 112px; }
  .fs-mark svg { width: 42px; height: 42px; }
  .fs-title { font-size: 32px; margin-top: 26px; }
  .fs-bar { width: 100px; }
  .field input, .field textarea { font-size: 16px; }
  .btn-submit { font-size: 17px; }

  /* Footer */
  .footer-top { padding: 16px 20px 24px; align-items: end; }
  .footer-logo { width: 168px; }
  .footer-contact { grid-column: 1 / -1; margin-top: 22px; gap: 6px; font-size: 16px; line-height: 1.45; }
  .social { grid-row: 1; margin: 0 0 8px; gap: 24px; }
  .social svg { width: 22px; height: 22px; }
  .copyright { padding: 24px 20px 32px; font-size: 14px; }
}

/* Tablets: roomier gutters and a comfortable line length (~70 characters) */
@media (min-width: 640px) and (max-width: 1100px) {
  .hero { padding-inline: 44px; }
  .mission, .about, .contact, .donate-inner { padding-inline: 48px; }
  .band { padding-inline: 48px; }
  .footer-top, .copyright { padding-inline: 48px; }
  .body p, .bio p:not(.role), .contact-body, .donate-copy > p, .give-card { max-width: 36em; }
}

@media (max-width: 420px) {
  .contact-form { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-nav, .nav-open .site-nav, .nav-links a, .nav-extra { transition: none !important; }
  .nav-mark { animation: none; }
  .form-success, .form-success * { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* ---------- Thank-you page (no-JS form fallback) ---------- */
.thanks-page { min-height: calc(100vh - 134px); display: flex; align-items: center; justify-content: center; padding: 48px 20px; }
.thanks-page .form-success { position: static; width: min(560px, 100%); min-height: 0; padding: 56px 32px; }
.thanks-page .fs-again { text-decoration: none; }