/* Home: the initiative's front door.
   References: Mobbin "Canva for Nonprofits" (inset photo hero, copy over a scrim), "Until" (staggered documentary
   photo row under a statement), "Front Page" video band (large 16:9 feature beside the episode list),
   "Dropbox nonprofit story" (split copy panel against a portrait photo).
   Design library: Kindsight (nonprofit annual-report rhythm: paper, a deep hero panel, 24px card radii, spacious 80-120px sections).
   Motion: transitions.dev (texts reveal, tabs sliding, text swap, learn-more hover), Arc enter easing, emil-design-eng gating. */

.section-home main { overflow-x: clip; }
.section-home .footer { margin-top: 0; }

/* Shared bits */
.h-label { font: 600 var(--h4)/1.3 var(--f-display); letter-spacing: -.01em; color: var(--text); }
.h-statement { margin: 0; max-width: 34ch; font: 500 clamp(1.5rem, 1.05rem + 1.55vw, 2.375rem)/1.22 var(--f-display); letter-spacing: -.022em; color: var(--text); text-wrap: pretty; }
.h-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 600; text-decoration: none; color: var(--ink); }

/* ---------- Hero: inset documentary frame (Canva nonprofits), copy on a scrim ---------- */
.h-hero { padding: 12px 12px 0; }
.h-hero-frame {
  position: relative; isolation: isolate; overflow: hidden; margin-inline: auto; width: min(100%, 1520px);
  height: clamp(600px, calc(100svh - 92px), 880px); border-radius: var(--radius-surface); background: var(--ink);
  /* Frame opens from a slightly smaller inset: clip-path reveal, Arc enter easing */
  animation: h-frame 760ms var(--ease-enter) 60ms backwards;
}
.h-hero-img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%;
  scale: 1.08; translate: 0 var(--py, 0px);
  animation: h-settle 1100ms var(--ease-enter) backwards;
}
.h-hero-frame::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgb(4 16 33 / .92) 0%, rgb(4 16 33 / .62) 32%, rgb(4 16 33 / .08) 62%, transparent 75%),
    linear-gradient(to right, rgb(4 16 33 / .55), transparent 55%);
}
.h-hero-copy {
  position: absolute; left: max(24px, calc((100% - var(--max)) / 2)); right: 24px; bottom: calc(96px + clamp(32px, 4vw, 56px));
  max-width: 760px; color: #fff;
}
.h-hero-title { font-size: clamp(2.375rem, 1.45rem + 3.3vw, 4.25rem); line-height: 1.04; letter-spacing: -.03em; max-width: none; }
/* Line masks: each line rises out of its own clip (text splitting by line, masks per brief) */
.h-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.h-line > span { display: inline-block; animation: h-rise 820ms var(--ease-enter) backwards; animation-delay: calc(180ms + var(--i) * 90ms); }
.h-hero-lead { margin: 22px 0 28px; max-width: 44ch; text-wrap: balance; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; color: rgb(255 255 255 / .86); animation: h-blur-in 600ms var(--ease-enter) 520ms backwards; }
.h-hero-you { display: flex; align-items: flex-start; gap: 10px; width: fit-content; max-width: 52ch; margin: -8px 0 28px; padding: 10px 14px 10px 10px; border-radius: 14px; background: rgb(4 16 33 / .55); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); color: #fff; font-size: var(--text-sm); font-weight: 500; line-height: 1.5; text-wrap: pretty; animation: h-blur-in 400ms var(--ease-enter) both; }
.h-hero-you[hidden] { display: none; }
.h-hero-you img { flex: none; margin-top: 1px; border-radius: 6px; }
.h-hero-cta { animation: h-blur-in 600ms var(--ease-enter) 620ms backwards; }
.h-hero-cta .btn-outline-light { border-color: rgb(255 255 255 / .45); }

/* Everything above waits for the page loader to lift */
.is-loading .h-hero-frame, .is-loading .h-hero-img, .is-loading .h-line > span, .is-loading .h-hero-lead,
.is-loading .h-hero-cta, .is-loading .h-dock { animation-play-state: paused; }

@keyframes h-frame { from { clip-path: inset(3% 2.5% round 32px); } to { clip-path: inset(0 round 20px); } }
@keyframes h-settle { from { scale: 1.16; } }
@keyframes h-rise { from { transform: translateY(108%); } }
/* transitions.dev "texts reveal": 12px rise, 3px blur */
@keyframes h-blur-in { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } }

/* Help dock: overlaps the hero's bottom edge */
.h-dock {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1.35fr repeat(5, 1fr);
  width: min(100% - 2 * var(--gutter), var(--max)); margin: -96px auto 0; overflow: hidden;
  background: #fff; border-radius: var(--radius-surface); box-shadow: var(--shadow-floating), 0 0 0 1px rgb(7 29 58 / .06);
  animation: h-blur-in 600ms var(--ease-enter) 760ms backwards;
}
.h-dock-head { padding: 24px; display: grid; align-content: start; gap: 8px; }
.h-dock-head h2 { font-size: var(--h4); }
.h-dock-head p { margin: 0; font-size: var(--text-sm); color: var(--text-3); line-height: 1.5; }
.h-dock-link {
  position: relative; display: grid; align-content: start; gap: 14px; padding: 24px 20px; min-height: 168px;
  border-left: 1px solid var(--border); text-decoration: none; color: var(--ink);
  transition-property: background-color; transition-duration: var(--d-fast); transition-timing-function: var(--ease-standard);
}
.h-dock-link > i:first-child { font-size: 1.5rem; color: var(--ink-3); }
.h-dock-link span { display: grid; gap: 4px; }
.h-dock-link b { font-weight: 600; line-height: 1.3; }
.h-dock-link small { color: var(--text-3); font-size: var(--text-sm); line-height: 1.45; }
.h-dock-go { position: absolute; top: 22px; right: 18px; font-size: 1rem; color: var(--text-3); opacity: .5; transition-property: transform, opacity, color; transition-duration: 250ms; transition-timing-function: var(--ease-standard); }
.h-dock-link:active { background: var(--surface-muted); }
@media (hover: hover) and (pointer: fine) {
  .h-dock-link:hover { background: #f8f9f8; }
  .h-dock-link:hover .h-dock-go { opacity: 1; color: var(--ink); transform: translate(2px, -2px); }
}

/* ---------- Vision: statement + staggered documentary row (Mobbin "Until") ---------- */
.h-vision { padding: clamp(72px, 10vw, 136px) 0 var(--section); }
.h-vision-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 5vw, 72px); }
.h-vision-lead { margin: 28px 0 0; max-width: 58ch; }
.h-faces { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: clamp(16px, 2.4vw, 32px); align-items: start; margin-top: clamp(56px, 7vw, 104px); }
.h-face { display: grid; gap: 6px; text-decoration: none; color: var(--ink); }
.h-face:nth-child(1) { margin-top: clamp(40px, 7vw, 120px); }
.h-face:nth-child(3) { margin-top: clamp(24px, 4vw, 64px); }
.h-face-photo { display: block; overflow: hidden; margin-bottom: 12px; border-radius: var(--radius-surface); background: var(--surface-muted); aspect-ratio: 4 / 5; }
.h-face:nth-child(1) .h-face-photo { aspect-ratio: 4 / 3; }
.h-face:nth-child(3) .h-face-photo { aspect-ratio: 3 / 4; }
.h-face-photo img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid rgb(0 0 0 / .1); outline-offset: -1px; transition: scale 700ms var(--ease-standard); }
.h-face-line { font: 600 clamp(1.125rem, 1rem + .4vw, 1.3125rem)/1.3 var(--f-display); letter-spacing: -.015em; text-wrap: balance; }
.h-face-name { font-size: var(--text-sm); color: var(--text-3); }
@media (hover: hover) and (pointer: fine) { .h-face:hover .h-face-photo img { scale: 1.035; } }

/* ---------- Five parts: interactive list paired with changing media ---------- */
.h-parts { padding-block: var(--section); background: #fff; border-block: 1px solid var(--border); }
.h-parts-head, .h-belong-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(24px, 5vw, 72px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.h-parts-head p, .h-belong-head p { margin: 0; max-width: 52ch; color: var(--text-2); justify-self: end; }
.h-parts-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.h-parts-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; }
.h-part {
  position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  padding: 18px 20px 18px 24px; border-radius: var(--radius-panel); text-decoration: none; color: var(--text-3);
  transition-property: color, background-color; transition-duration: 200ms; transition-timing-function: var(--ease-standard);
}
.h-part-thumb { display: none; }
.h-part-text { display: grid; gap: 6px; min-width: 0; grid-column: 1 / -1; }
.h-part-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.h-part-top b { font: 600 clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem)/1.25 var(--f-display); letter-spacing: -.015em; color: var(--ink); }
.h-part-top small { flex: none; font: 500 var(--text-xs)/1.2 var(--f-figures); color: var(--text-3); text-align: right; }
.h-part-line { font-size: .9375rem; line-height: 1.5; max-width: 46ch; }
.h-part-fact { font-size: var(--text-sm); color: var(--text-2); }
.h-part-fact .fig { color: var(--ink); font-weight: 500; }
/* learn-more hover (transitions.dev 24): arrow slides in beside the name */
.h-part-go { display: inline-block; font-size: .8em; vertical-align: .05em; opacity: 0; transform: translateX(-6px); transition-property: opacity, transform; transition-duration: 250ms; transition-timing-function: cubic-bezier(.22, 1, .36, 1); }
.h-part.is-active { color: var(--text-2); background: var(--paper); }
.h-part.is-active .h-part-go { opacity: 1; transform: none; }
.h-part.is-active::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px; border-radius: 3px; background: var(--gold); }
/* With JS the active background becomes one sliding indicator (transitions.dev 16 "tabs sliding", vertical) */
.h-parts-list.has-ind .h-part.is-active { background: transparent; }
.h-parts-list.has-ind .h-part.is-active::before { display: none; }
.h-parts-ind {
  position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: var(--h, 0); transform: translateY(var(--y, 0));
  border-radius: var(--radius-panel); background: var(--paper); pointer-events: none;
  transition: transform 250ms cubic-bezier(.22, 1, .36, 1), height 250ms cubic-bezier(.22, 1, .36, 1);
}
.h-parts-ind::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px; border-radius: 3px; background: var(--gold); }
.h-parts-ind.is-instant { transition: none; }

.h-stage { position: relative; overflow: hidden; min-height: 480px; border-radius: var(--radius-surface); background: var(--ink); }
.h-stage-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  clip-path: inset(0 0 0 100%); scale: 1.06;
  transition: clip-path 560ms var(--ease-enter), scale 900ms var(--ease-enter);
}
.h-stage-img.is-active { z-index: 2; clip-path: inset(0); scale: 1; }
.h-stage-img.is-prev { z-index: 1; clip-path: inset(0); scale: 1; transition: none; }
.h-stage::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.h-stage-cap {
  position: absolute; z-index: 4; left: 16px; bottom: 16px; margin: 0; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px; background: #fff; color: var(--ink); font-weight: 600; font-size: var(--text-sm);
  box-shadow: 0 6px 18px rgb(7 29 58 / .16);
}
/* transitions.dev 04 "text states swap": 4px, 2px blur, 150ms */
[data-stage-cap] { display: inline-block; transition: opacity 150ms ease-in-out, transform 150ms ease-in-out, filter 150ms ease-in-out; }
[data-stage-cap].is-swapping { opacity: 0; transform: translateY(4px); filter: blur(2px); }

/* ---------- Beyond the Tears: dark show band (Mobbin "Front Page" videos) ---------- */
.h-show { padding-block: var(--section); }
.h-show-head { display: grid; grid-template-columns: 5fr 7fr; gap: 20px clamp(28px, 5vw, 72px); align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.h-show-head h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); }
.h-show-meta { margin: 10px 0 0; font: 500 var(--text-sm)/1.4 var(--f-figures); color: var(--text-3); }
.h-show-head .lead { margin: 0; color: var(--text-2); justify-self: end; max-width: 54ch; }
.h-show-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 3.4vw, 48px); align-items: stretch; }
.h-show-side { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.h-show-feature { display: block; text-decoration: none; color: #fff; }
.h-show-frame { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-surface); background: var(--ink-2); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
.h-show-frame img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid rgb(255 255 255 / .1); outline-offset: -1px; transition: scale 700ms var(--ease-standard); }
.h-show-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(4 16 33 / .85), rgb(4 16 33 / .2) 45%, transparent 65%); pointer-events: none; }
.h-show-cap { position: absolute; z-index: 1; left: clamp(18px, 2.4vw, 28px); right: 96px; bottom: clamp(16px, 2.2vw, 26px); display: grid; gap: 4px; }
.h-show-cap small { font: 500 var(--text-xs)/1.3 var(--f-figures); color: rgb(255 255 255 / .75); }
.h-show-cap b { font: 600 clamp(1.25rem, 1rem + 1vw, 1.875rem)/1.15 var(--f-display); letter-spacing: -.02em; }
.h-play {
  position: absolute; z-index: 2; right: clamp(18px, 2.4vw, 28px); bottom: clamp(16px, 2.2vw, 26px); width: 64px; height: 64px;
  display: grid; place-items: center; border-radius: 999px; background: #fff; color: var(--ink); font-size: 1.375rem;
  box-shadow: 0 10px 30px rgb(0 0 0 / .35); transition-property: scale; transition-duration: 250ms; transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}
.h-play i { transform: translateX(2px); } /* optical centring of the play triangle (better-ui) */
.h-show-feature:active .h-play { scale: .96; }
@media (hover: hover) and (pointer: fine) {
  .h-show-feature:hover .h-play { scale: 1.08; }
  .h-show-feature:hover .h-show-frame img { scale: 1.03; }
}
.h-soon { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--line-dark); border-radius: var(--radius-panel); background: rgb(255 255 255 / .04); }
.h-soon p { margin: 0; color: var(--text-2); font-size: .9375rem; }
.h-soon b { color: #fff; }
.h-soon-dot { position: relative; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 999px; background: var(--gold); }
/* A single quiet "in production" pulse: ambient, low frequency */
.h-soon-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--gold); animation: h-pulse 2400ms cubic-bezier(.22, 1, .36, 1) infinite; }
@keyframes h-pulse { from { opacity: .6; transform: scale(1); } 70%, to { opacity: 0; transform: scale(3); } }
.h-eps { display: grid; border-top: 1px solid var(--line-dark); }
.h-ep { display: grid; grid-template-columns: 136px 1fr; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-dark); text-decoration: none; }
.h-ep-thumb { display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 8px; background: var(--ink-3); color: rgb(255 255 255 / .6); }
.h-ep-thumb img { width: 100%; height: 100%; object-fit: cover; }
.h-ep b { display: block; font-weight: 600; }
.h-ep small { color: var(--text-3); font-size: var(--text-sm); }
.h-ep-thumb img { transition: scale 600ms var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .h-ep:hover .h-ep-thumb img { scale: 1.05; } .h-ep:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } }

/* ---------- Why join (persona picker partial) ---------- */
.h-belong { padding-block: var(--section); }

/* ---------- John 3:16 ---------- */
.h-verse { background: #fff; border-block: 1px solid var(--border); }
.h-verse-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 5vw, 72px); align-items: start; }
.h-verse h2 { font-size: var(--h4); max-width: 18ch; }
.h-verse blockquote { max-width: 24ch; font-size: clamp(1.75rem, 1.15rem + 2.3vw, 3.125rem); line-height: 1.2; letter-spacing: -.025em; }

/* ---------- Beauty for Ashes: full-bleed photo band ---------- */
.h-fund { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--ink); }
.h-fund-media { position: absolute; inset: 0; z-index: -2; }
.h-fund-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; scale: 1.1; translate: 0 var(--py, 0px); }
.h-fund::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(4 16 33 / .93) 0%, rgb(4 16 33 / .78) 34%, rgb(4 16 33 / .15) 68%, rgb(4 16 33 / .35) 100%);
}
.h-fund-in { display: grid; grid-template-columns: minmax(0, 560px) 1fr; gap: 32px; align-items: end; min-height: clamp(560px, 78vh, 760px); padding-block: var(--section); }
.h-fund-copy { --text-2: rgb(255 255 255 / .82); }
.h-fund-copy h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); }
.h-fund-meta { text-wrap: balance; margin: 10px 0 20px; font: 500 var(--text-sm)/1.4 var(--f-figures); color: rgb(255 255 255 / .66); }
.h-fund-copy .lead { color: rgb(255 255 255 / .84); }
.h-fund-copy .row { margin-top: 28px; }
.h-ways { justify-self: end; align-self: end; width: min(100%, 380px); background: #fff; color: var(--ink); border-radius: var(--radius-surface); padding: 6px; box-shadow: var(--shadow-floating); }
.h-ways a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 16px 16px 18px; border-radius: 14px; text-decoration: none; transition-property: background-color; transition-duration: var(--d-fast); }
.h-ways a + a { box-shadow: 0 -1px 0 var(--border); }
.h-ways span { display: grid; gap: 3px; }
.h-ways b { font-weight: 600; }
.h-ways small { color: var(--text-3); font-size: var(--text-sm); line-height: 1.45; }
.h-ways i { flex: none; color: #8a96a3; transition-property: transform, color; transition-duration: var(--d-fast); transition-timing-function: var(--ease-standard); }
.h-ways a:active { background: var(--surface-muted); }
@media (hover: hover) and (pointer: fine) {
  .h-ways a:hover { background: #f6f7f6; }
  .h-ways a:hover i { color: var(--ink); transform: translateX(2px); }
}

/* ---------- Close: Today's Word + mission ---------- */
.h-close { padding-block: var(--section); }
.h-close-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.h-word { padding: clamp(24px, 3.4vw, 40px); border-radius: var(--radius-surface); background: #fff; box-shadow: 0 1px 2px rgb(7 29 58 / .05), 0 0 0 1px var(--border); }
.h-word-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.h-word-head h2 { font-size: var(--h4); }
.h-word-head time { font-size: var(--text-sm); color: var(--text-3); }
.h-word h3 { font-size: var(--h2); line-height: 1.12; }
.h-word blockquote { margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--border); font: 500 clamp(1.125rem, 1rem + .4vw, 1.3125rem)/1.5 var(--f-display); letter-spacing: -.01em; color: var(--text); }
.h-word .row { margin-top: 24px; }
.h-mission .h-statement { margin-top: 16px; max-width: 24ch; font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem); line-height: 1.15; }
.h-mission .lead { margin: 22px 0 0; }
.h-sign { margin: 20px 0 0; font-weight: 600; color: var(--ink); }
.h-mission .row { margin-top: 28px; }
.h-mission.is-solo { grid-column: 1 / -1; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .h-dock { grid-template-columns: repeat(5, 1fr); }
  .h-dock-head { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 16px; padding: 20px 20px 16px; border-bottom: 1px solid var(--border); }
  .h-dock-link:nth-child(2) { border-left: 0; }
}
@media (max-width: 900px) {
  .h-vision-grid, .h-verse-grid, .h-parts-head, .h-belong-head, .h-close-grid, .h-show-grid, .h-show-head { grid-template-columns: 1fr; }
  .h-parts-head p, .h-belong-head p, .h-show-head .lead { justify-self: start; }
  .h-parts-grid { grid-template-columns: 1fr; }
  .h-stage { display: none; }
  .h-part { grid-template-columns: 88px 1fr; color: var(--text-2); padding: 14px; }
  .h-part-thumb { display: block; overflow: hidden; aspect-ratio: 1; border-radius: 12px; background: var(--surface-muted); }
  .h-part-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .h-part-text { grid-column: auto; }
  .h-part-top { flex-direction: column; gap: 2px; }
  .h-part-top small { text-align: left; }
  .h-parts-list { margin-inline: -14px; }
  .h-part-go { opacity: 1; transform: none; }
  .h-parts-list.has-ind .h-parts-ind, .h-part.is-active::before { display: none; }
  .h-part.is-active { background: transparent; }
  .h-fund-in { grid-template-columns: 1fr; }
  .h-ways { justify-self: stretch; width: 100%; }
  .h-fund::after { background: linear-gradient(to top, rgb(4 16 33 / .95) 0%, rgb(4 16 33 / .82) 55%, rgb(4 16 33 / .35) 100%); }
}
@media (max-width: 760px) {
  .h-hero { padding: 8px 8px 0; }
  .h-hero-frame { height: auto; min-height: min(calc(100svh - 84px), 720px); display: flex; flex-direction: column; justify-content: flex-end; }
  .h-hero-img { object-position: 20% 30%; }
  .h-hero-frame::after { background: linear-gradient(to top, rgb(4 16 33 / .95) 0%, rgb(4 16 33 / .7) 45%, rgb(4 16 33 / .1) 75%); }
  .h-hero-copy { position: relative; left: auto; right: auto; bottom: auto; padding: 160px 20px 76px; }
  .h-hero-cta .btn { flex: 1 1 100%; }
  .h-dock { grid-template-columns: 1fr; margin-top: -44px; width: calc(100% - 24px); }
  .h-dock-head { grid-template-columns: 1fr; }
  .h-dock-link { grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; min-height: 0; padding: 16px 18px; border-left: 0; border-top: 1px solid var(--border); }
  .h-dock-head + .h-dock-link { border-top: 0; }
  .h-dock-go { position: static; opacity: 1; }
  .h-dock-link > i:first-child { font-size: 1.375rem; }
  .h-faces { grid-template-columns: 1fr 1fr; }
  .h-face:nth-child(1) { grid-column: 1 / -1; margin-top: 0; }
  .h-face:nth-child(3) { margin-top: 40px; }
  .h-face:nth-child(2) .h-face-photo, .h-face:nth-child(3) .h-face-photo { aspect-ratio: 3 / 4; }
  .h-fund-in { min-height: 0; padding-top: 220px; }
}
@media (max-width: 560px) {
  .h-show-side .row .btn, .h-fund-copy .row .btn, .h-word .row .btn, .h-mission .row .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .h-hero-frame, .h-hero-img, .h-line > span, .h-hero-lead, .h-hero-cta, .h-dock, .h-soon-dot::after { animation: none !important; }
  .h-stage-img { transition: none; }
}