/* =====================================================================
   Here & Beyond - Giving Journey | Keystone Church
   Homepage styles. Hand-written, no framework, no build step.
   Author: Jose Torres <jose.torres@keystonechurch.com>

   Type note: headlines, eyebrows, stat numbers and "POWER" are Rocinante
   Titling Variable at Medium (500), as in the campaign artwork, from
   Keystone's Adobe Fonts web project (the idm1iba kit, linked in <head>).
   Tracking follows the design file (headlines -.12em, eyebrows .2em).
   ===================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  /* type */
  --font-display: "rocinante-titling-variable", "Arial Narrow", sans-serif;
  --font-eyebrow: "rocinante-titling-variable", "Arial Narrow", sans-serif;   /* PSD: Rocinante Medium 24px / +0.2em */
  --display-weight: 500;   /* Medium, as the artwork */
  --font-body: "Montserrat", "Helvetica Neue", Helvetica, sans-serif;

  --fs-display-xl: clamp(3.2rem, 8.25vw, 8.25rem);     /* 132px @1600 - hero H1, 10% up from the PSD's 120 (designer, 2026-09-15) */
  --fs-display-lg: clamp(2.9rem, 7.5vw, 7.5rem);       /* 120px @1600 - 83px caps, as the mock */
  --fs-display-md: clamp(2.5rem, 7.5vw,   7.5rem);     /* 120px @1600 - give heading, as the mock */
  --fs-display-sl: clamp(2.6rem, 7.5vw,   7.5rem);     /* 120px @1600 - carousel headline, as the mock */
  --fs-stat:       clamp(3.8rem, 9.19vw,  9.1875rem);  /* 147px @1600 */
  --fs-body:       clamp(0.975rem, 0.9rem + 0.28vw, 1.0625rem);
  --fs-eyebrow:    clamp(1rem, 0.75rem + 1.1vw, 1.875rem);        /* 30px @1600 - pre-header labels, 25% up from the PSD's 24 (designer, 2026-09-15) */
  --fs-small:      0.8125rem;

  /* colour - sampled from HERE-AND-BEYOND_LANDING-PAGE.png + COLOR-PALETTE.png */
  --teal:        #22a6ad;   /* brand teal (palette)                       */
  --teal-bright: #24b7c0;   /* buttons + active gift-type (mock)          */
  --teal-band:   #1d959b;   /* stats band base                            */
  --magenta:     #9b119b;   /* project chip + active carousel bar (mock)  */
  --orange:      #e28722;   /* flame accent (palette)                     */
  --plum:        #3e233e;
  --plum-deep:   #211321;   /* disclosure band                            */
  --ink:         #1c101c;   /* footer                                     */
  --ink-logo:    #240927;
  --cream:       #e7e0d4;
  --lav:         #cdb5c7;   /* give-card lavender field                   */
  --lav-dark:    #c2a6bd;
  --field-plum:  #6c275b;   /* give-card deep field                       */
  --field-line:  #682659;

  --on-dark:      #ffffff;
  --on-dark-soft: rgba(255,255,255,.86);
  --on-dark-mute: rgba(255,255,255,.62);

  /* geometry */
  --wrap: 1334px;                         /* mock content spans x133-1467 @1600 */
  --gutter: clamp(1.25rem, 5vw, 3.75rem);
  --r-card: 28px;
  --r-field: 8px;
  --overlap: clamp(90px, 16.3vw, 261px); /* video frame over the give bg (261px @1600) */

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
h1,h2,h3,p,dl,dd,dt,figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

:where(a,button,select,input,[tabindex]):focus-visible{
  outline:3px solid var(--teal-bright);
  outline-offset:3px;
  border-radius:2px;
}

.visually-hidden{
  position:absolute!important; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:99;
  background:var(--teal-bright); color:#12151a; padding:.65rem 1.1rem;
  border-radius:999px; font-weight:700; text-decoration:none;
  transition:top .18s var(--ease);
}
.skip-link:focus{ top:1rem; }

/* ------------------------------------------------------------ primitives */
.wrap{
  width:100%;
  max-width:calc(var(--wrap) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.measure-sm{ max-width:52ch; }
.measure-md{ max-width:62ch; }
.measure-lg{ max-width:74ch; }

.display{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  text-transform:uppercase;
  line-height:.83;                             /* mock: 98-100px line pitch at 120px */
  letter-spacing:-.12em;                       /* the PSD's tracking */
  text-wrap:balance;
}
.display--xl{ font-size:var(--fs-display-xl); }
.display--lg{ font-size:var(--fs-display-lg); }
.display--md{ font-size:var(--fs-display-md); }

.eyebrow{
  font-family:var(--font-eyebrow);
  font-size:var(--fs-eyebrow);
  font-weight:var(--display-weight);
  text-transform:uppercase;
  letter-spacing:.2em;                         /* the PSD's tracking */
  line-height:1.3;
  color:var(--on-dark);
  margin-bottom:.7em;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:2.5rem;
  padding:.55rem 1.65rem;
  border:0; border-radius:999px;
  text-decoration:none; cursor:pointer;
  font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.btn--teal{ background:var(--teal-bright); color:#fff; }
.btn--teal:hover{ background:#1fa1a9; }
.btn--teal:active{ transform:translateY(1px); }
/* the hero CTA (Pablo, 2026-09-14): 14px label, 50px tall - was 12px / 40px */
.btn--lg{
  min-height:3.125rem;
  padding:.85rem 2.3rem;
  font-size:.875rem; letter-spacing:.14em;
}
.btn--display{
  font-family:var(--font-display);
  font-size:1.5rem; font-weight:var(--display-weight); letter-spacing:-.05em;
  color:#22131f; padding-block:.3rem; min-height:2.75rem;
}

/* ============================================================== header */
.site-header{
  position:absolute; inset:0 0 auto; z-index:6;
  padding-top:clamp(1.5rem, 3.19vw, 51px);   /* logo top at 51px @1600 (PSD) */
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.site-header__logo{ display:block; line-height:0; }
.site-header__logo img{
  width:clamp(180px, 21.7vw, 347px);   /* PSD: 347px wide @1600 */
  height:auto;
}
.tagline{
  font-family:var(--font-body);
  font-size:clamp(.55rem, .4rem + .3vw, .7rem);    /* 11px @1600, per the PSD */
  font-weight:600; text-transform:uppercase;
  letter-spacing:.8em;
  color:#fff;
  text-align:right;
  line-height:1.4;
}
.tagline em{
  font-family:var(--font-display);
  font-style:normal; font-weight:var(--display-weight);
  font-size:2.35em; letter-spacing:-.06em;   /* ~26px cap-matched to the mock's POWER */
  vertical-align:-.12em;
}
.tagline__dot{ padding-inline:.2em; }
.site-header__sub, .tagline--hero{ display:none; }

/* Tagline at the right, level with the Here & Beyond logo. The Keystone wordmark that sat
   beside it now lives only in the sticky bar (Jose, 2026-09-16). */
.site-header__aside{ display:flex; flex-direction:row; align-items:center; }

/* ========================================================== sticky bar */
/* Logo + SEE THE PROGRESS + GIVE ONLINE, pinned to the top once the logo row has scrolled
   away (Jose, 2026-09-16). Phones show the logo and GIVE ONLINE only. */
:root{ --stickybar-h:72px; }
.stickybar{
  position:fixed; inset:0 0 auto; z-index:40;
  background:rgba(28,16,28,.93);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.28);
  transform:translateY(-110%);
  transition:transform .35s var(--ease);
}
.stickybar.is-visible{ transform:none; }
/* WordPress admin bar (only for logged-in editors): keep the sticky bar under it.
   Below 601px the admin bar scrolls away, so the sticky bar stays at the top. */
.admin-bar .stickybar{ top:32px; }
@media (max-width:782px){ .admin-bar .stickybar{ top:46px; } }
@media (max-width:600px){ .admin-bar .stickybar{ top:0; } }
.stickybar__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.25rem; min-height:var(--stickybar-h); }
/* the Keystone Church wordmark (the only place it appears), linking to the main church site */
.stickybar__logo{ display:block; line-height:0; transition:opacity .2s var(--ease); }
.stickybar__logo:hover{ opacity:.8; }
.stickybar__logo img{ width:clamp(140px, 11vw, 170px); height:auto; }
.stickybar__actions{ display:flex; align-items:center; gap:.75rem; }
.btn--outline{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8); }
.btn--outline:hover{ background:rgba(255,255,255,.12); }
/* in-page links stop below the bar instead of under it */
#twenty-years, #progress, #projects, #story, #give{ scroll-margin-top:var(--stickybar-h); }
/* GIVE ONLINE lands on the Give content itself: the section's top edge sits behind the video
   frame that hangs into it, with a large gap before the heading and form (Jose, 2026-09-16) */
#give-now{ scroll-margin-top:calc(var(--stickybar-h) + 1.5rem); }
@media (max-width:560px){
  :root{ --stickybar-h:60px; }
  .stickybar__logo img{ width:128px; }
  .stickybar__progress{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .stickybar{ transition:none; }
}

/* ================================================================ hero */
/* The full-bleed sections (hero, 20 Years, carousel slides) keep their design
   proportions but are never taller than the browser window (2026-09-14):
   the design heights only fit a window 1000px+ tall, so on a laptop each one
   ran past the bottom of the screen. The `vh` line is the fallback for
   browsers without `svh` (small viewport height, stable on phones). */
.hero{
  position:relative;
  min-height:clamp(600px, min(63.9vw, 100vh), 1022px);       /* 1022px @1600 = HERO export + header */
  min-height:clamp(600px, min(63.9vw, 100svh), 1022px);
  display:flex; align-items:flex-start;
  padding-block:clamp(9rem, 16.9vw, 271px) clamp(3rem, 6vw, 5rem);   /* eyebrow lands at 274px @1600 */
  padding-top:clamp(9rem, min(16.9vw, calc(26.8svh - 1.9rem)), 271px);   /* ...and moves up with a shorter window (the -1.9rem makes room for the larger H1 + labels) */
  padding-bottom:clamp(3rem, min(6vw, 9svh), 5rem);
  background:#3d2036;
  overflow:hidden;
  isolation:isolate;
}
/* Every layer shares one box - identical size, identical background-size:cover
   scale, identical origin - so at rest (no transform at all) they register
   exactly as the artwork was composited. hero-base is the flattened export and
   never moves: it backs the two cut-out layers, whose anti-aliased ridge edges
   only add up to ~60% coverage where they meet and would otherwise let the
   section colour through as a hairline. */
.hero__art{ position:absolute; inset:0; z-index:-1; overflow:hidden; background:#3d2036; }
.hero__layer{
  position:absolute; inset:0;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  transform-origin:50% 100%;   /* growth goes upward, so downward travel never opens the top edge */
  backface-visibility:hidden;
}
.hero__layer--base{ background-image:url("../img/hero-base.webp"); }
.hero__layer--sky { background-image:url("../img/parallax-upper.webp"); will-change:transform; }
.hero__layer--land{ background-image:url("../img/parallax-lower.webp"); will-change:transform; }
.hero__arrow{
  position:absolute;
  left:46.8%; top:8%;
  width:28.25%; height:auto;
  transform-origin:50% 0;      /* zoom pushes the pole down, never lifts its end into view */
  backface-visibility:hidden;
  will-change:transform;
}
/* darkens the copy side just enough for AA contrast without flattening the sky */
.hero__scrim{ position:absolute; inset:0; background:none; }   /* desktop: the PSD composite already carries the mock's tone; mobile adds its own scrim below */
.hero__inner{ position:relative; z-index:1; will-change:transform; }
.hero h1{ margin-bottom:.4em; max-width:5.08em; }   /* = the old 12ch of the Light cut; em, so the line breaks don't move with the font's zero width */
/* Larger, a touch heavier and full white for legibility over the sky (Pablo, 2026-09-14):
   18px @1600 (was 15px), 16px on phones. No text shadows anywhere on the page (Jose, 2026-09-16). */
.hero__lede{
  max-width:34rem;
  font-size:clamp(1rem, .85rem + .3vw, 1.125rem); font-weight:500; line-height:1.62;
  color:#fff;
  margin-bottom:2.4rem;
}

/* one coordinated page-load reveal, hero only */
.reveal{ opacity:0; transform:translateY(14px); animation:rise .7s var(--ease) forwards; animation-delay:var(--d,0ms); }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ====================================================== 20 years of yes */
.twenty{
  position:relative;
  min-height:clamp(620px, min(79.9vw, 100vh), 1279px);       /* 1279px @1600, capped at the window */
  min-height:clamp(620px, min(79.9vw, 100svh), 1279px);
  padding-block:clamp(4.5rem, 7.2vw, 7.2rem) clamp(3rem, 6vw, 5rem);
  background:#150610;
  text-align:center;
  isolation:isolate;
}
/* Three stacked photos, full bleed. Without motion.js only the first shows;
   motion.js cross-fades them in order (see "20 Years photos" there). */
.twenty__photos{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.twenty__photo{
  position:absolute; inset:0;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:50% var(--y, 100%);   /* per-photo vertical focus, set in the markup */
  opacity:0;
}
.twenty__photo:first-child{ opacity:1; }
.twenty__veil{
  position:absolute; inset:0 0 auto; z-index:-1;
  /* sized off the width, not the section, so it stays behind the heading when the
     section is capped at the window height (34.6vw = the old 43.3% @1600) */
  height:clamp(340px, 34.6vw, 692px);
  background:url("../img/twenty-overlay.webp") top center / 100% 100% no-repeat;
}
.twenty__inner{ position:relative; }
.twenty h2{ margin-bottom:.55em; }
.twenty .measure-md{ margin-inline:auto; color:var(--on-dark-soft); }

/* ========================================================== stats band */
.progress{
  background:var(--teal-band) url("../img/stats-bg.webp") center / cover no-repeat;
  padding-block:clamp(3.4rem, 9.3vw, 149px) clamp(3.6rem, 11.7vw, 187px);   /* 712px band @1600 */
  text-align:center;
}
.progress__lede{ margin-inline:auto; max-width:55.6rem; color:#fff; }
.stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(2rem, 3vw, 3rem);
  margin-top:clamp(3rem, 5.75vw, 92px);
}
.stat{ display:flex; flex-direction:column-reverse; align-items:center; }
.stat__num{
  font-size:var(--fs-stat);
  line-height:.82;
  letter-spacing:-.12em;   /* the PSD's tracking */
  font-variant-numeric:lining-nums;
}
.stat__label{
  font-size:clamp(1rem, .8rem + .45vw, 1.25rem);   /* 20px @1600, 16px on phones (Jose, 2026-09-15; was 16px / 13px) */
  font-weight:400;
  margin-top:1.3rem;
  color:#fff;
}

/* =========================================================== carousel */
.projects{ background:#0c060e; }
.carousel{ position:relative; }
.carousel__viewport{ overflow:hidden; }
.carousel__track{
  display:flex;
  transition:transform .62s var(--ease);
  will-change:transform;
}
.slide{
  position:relative;
  flex:0 0 100%;
  min-height:clamp(520px, min(59.1vw, 100vh), 945px);        /* 945px @1600 = carousel export, capped at the window */
  min-height:clamp(520px, min(59.1vw, 100svh), 945px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(4.5rem, 10.2vw, 163px);
  overflow:hidden;
  isolation:isolate;
}
.slide__media{
  position:absolute; inset:0; z-index:-1;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
/* The scrim lives inside the photo element (not on .slide) so photo and
   gradient are always painted and composited as one unit — a slide change
   can never show the photo a frame before its gradient. */
/* Lighter scrim (Jose, 2026-09-15): darkens only the low band behind the copy so the
   photos read brighter. Was .92 / .62 at 34% / .05 at 66%. The text shadow and the dark
   pool behind the copy were removed 2026-09-16 (Jose: no shadows behind text). */
.slide__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,4,12,.72) 0%, rgba(10,4,12,.3) 26%, rgba(10,4,12,0) 48%);
}
.slide__body{ color:#fff; }
/* top margin = the breathing room under the category pill (Pablo, 2026-09-14): 24px @1600, was ~9px */
.slide__body h3{ font-size:var(--fs-display-sl); margin:clamp(.8rem, 1.5vw, 1.5rem) 0 .28em; max-width:6.77em; }   /* = the old 16ch of the Light cut */
.slide__body p{ color:var(--on-dark-soft); font-size:.9rem; line-height:1.6; }
.slide__body .measure-sm{ max-width:50rem; }
.chip{
  display:inline-block;
  background:var(--magenta);
  color:#fff;
  font-size:.75rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.62em 1.7em .52em;
  border-radius:999px;
}
.carousel__bars{
  position:absolute; left:50%; bottom:clamp(1.6rem, 3.15vw, 50px);
  transform:translateX(-50%);
  display:flex; gap:18px; z-index:3;
}
.carousel__bars button{
  width:80px; height:7px;
  padding:0; border:0; border-radius:4px;
  background:#fff; cursor:pointer;
  transition:background-color .3s var(--ease), transform .3s var(--ease);
}
.carousel__bars button:hover{ transform:scaleY(1.5); }
.carousel__bars button[aria-current="true"]{ background:var(--magenta); }

/* ============================================================== video */
.video{
  position:relative;
  isolation:isolate;
  padding-top:clamp(4.5rem, 10.7vw, 171px);
  text-align:center;
}
/* the section box includes the frame that hangs into the give section; its own
   backdrop must stop at the true section bottom so the give sky shows beside the frame */
.video::before{
  content:""; position:absolute; inset:0 0 var(--overlap) 0; z-index:-1;
  background:#1f0d1f url("../img/video-bg.webp") center top / cover no-repeat;
}
.video__head h2{ margin-bottom:.5em; }
.video__head .measure-md{ margin-inline:auto; max-width:51.5rem; color:var(--on-dark-soft); }
.video__frame-wrap{
  margin-top:clamp(2.4rem, 5.1vw, 81px);
  margin-bottom:calc(var(--overlap) * -1);
  position:relative; z-index:4;
}
.video__frame{
  position:relative;
  max-width:1075px; margin-inline:auto;
  aspect-ratio:1075/616;
  border-radius:clamp(10px, 1.75vw, 28px);
  overflow:hidden;
  background:#100710;
  box-shadow:0 18px 48px rgba(12,4,14,.28);
}
.video__poster{ width:100%; height:100%; object-fit:cover; object-position:center; }
.video__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video__play{
  position:absolute; left:50.8%; top:51.8%; translate:-50% -50%;
  width:clamp(56px, 5.69vw, 91px); aspect-ratio:1;
  display:grid; place-items:center;
  border:clamp(5px, .5vw, 8px) solid #fff; border-radius:999px;
  background:transparent; color:#fff;
  /* the daytime campus thumbnail is bright: a soft shadow keeps the white ring off the building */
  box-shadow:0 2px 18px rgba(21,6,16,.32), inset 0 0 14px rgba(21,6,16,.18);
  filter:drop-shadow(0 1px 3px rgba(21,6,16,.35));
  cursor:pointer;
  transition:transform .25s var(--ease), background-color .25s var(--ease);
}
.video__play svg{ width:48%; height:48%; margin-left:9%; }
.video__play:hover{ transform:scale(1.06); background:rgba(255,255,255,.14); }
.video__frame.is-playing .video__play,
.video__frame.is-playing .video__poster{ display:none; }

/* =============================================================== give */
.give{
  background:#2b1626 url("../img/form-bg.webp") center / cover no-repeat;
  padding-block:calc(var(--overlap) + clamp(2.5rem, 17.4vw, 279px)) clamp(1.125rem, 1.2vw, 1.25rem);   /* card top at 540px, section = form-bg export (1362px) @1600 */
}
.give__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,585px);
  gap:clamp(2rem, 8.5vw, 137px);
  align-items:start;
  max-width:calc(1127px + var(--gutter) * 2);
}
.give__copy{ padding-top:clamp(0rem, 5.4vw, 87px); }
.give__copy h2{ margin-bottom:.67em; max-width:none; margin-right:-2rem; }   /* as in the mock, "WHAT'S NEXT." may run a little into the gap */
.give__copy p{ color:var(--on-dark-soft); max-width:25.3rem; }

/* Section paragraphs match the hero paragraph: Montserrat Medium, full white
   (designer, 2026-09-16 - the others read thinner). */
.twenty .measure-md, .progress__lede, .slide__body p, .video__head .measure-md, .give__copy p{
  font-weight:500; color:#fff;
}

/* -------------------------------------------------- give card (Pushpay) */
.gc{
  background:#fff;
  color:var(--field-plum);
  border-radius:var(--r-card);
  --gc-pad-x:clamp(1.4rem, 3vw, 48px);
  padding:clamp(1.6rem, 2.6vw, 42px) var(--gc-pad-x) clamp(1.2rem, 1.25vw, 20px);
  box-shadow:0 30px 70px rgba(10,3,12,.42);
}
.gc__label{
  display:block;
  font-size:1.0625rem; font-weight:500;
  color:var(--field-plum);
  line-height:1.4;
  margin:0 0 1.1rem;
}
.gc__label + *{ margin-bottom:1.4rem; }

.gc__field{ position:relative; border-radius:var(--r-field); }
.gc__field--lav{ background:var(--lav); }
.gc__field--plum{ background:var(--field-plum); }
.gc__select,
.gc__input{
  -webkit-appearance:none; appearance:none;
  width:100%; height:3.5rem;
  padding:0 3rem 0 1.4rem;
  border:0; border-radius:var(--r-field);
  background:transparent;
  font-family:var(--font-body); font-size:1.0625rem; font-weight:500;
  cursor:pointer;
}
.gc__field--lav .gc__select{ color:var(--field-plum); }
.gc__field--plum .gc__select,
.gc__field--plum .gc__input{ color:#fff; }
.gc__field--plum .gc__select option{ color:#1c101c; }
.gc__chevron{
  position:absolute; right:1rem; top:50%; translate:0 -50%;
  width:22px; height:22px; pointer-events:none;
}
.gc__field--lav .gc__chevron{ color:var(--field-plum); }
.gc__field--plum .gc__chevron{ color:#fff; }

.gc__toggle{
  display:grid; grid-template-columns:1fr 1fr;
  gap:2px;
  margin-bottom:1.4rem;
}
.gc__toggle button{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:3.4rem;
  border:0; border-radius:4px;
  background:var(--lav); color:#fff;
  font-size:1.0625rem; font-weight:500;
  cursor:pointer;
  transition:background-color .2s var(--ease);
}
.gc__toggle button:first-child{ border-radius:var(--r-field) 4px 4px var(--r-field); }
.gc__toggle button:last-child { border-radius:4px var(--r-field) var(--r-field) 4px; }
.gc__toggle button svg{ width:22px; height:22px; flex:none; }
.gc__toggle button:hover{ background:var(--lav-dark); }
.gc__toggle button[aria-checked="true"]{ background:var(--teal-bright); }
.gc__toggle button[aria-checked="true"]:hover{ background:#1fa8b1; }

.gc__chips{
  display:grid; grid-template-columns:repeat(4, auto);
  gap:2px;
  margin-bottom:1.4rem;
}
.gc__chips button{
  min-height:3.5rem;
  padding:.4rem .5rem;
  border:0; border-radius:3px;
  background:var(--lav); color:#fff;
  font-size:.8rem; font-weight:500; line-height:1.25;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .2s var(--ease);
}
.gc__chips button:first-child{ border-radius:var(--r-field) 3px 3px var(--r-field); }
.gc__chips button:last-child { border-radius:3px var(--r-field) var(--r-field) 3px; }
.gc__chips button:hover{ background:var(--lav-dark); }
.gc__chips button[aria-checked="true"]{ background:var(--field-plum); }

.gc__row{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:1.4rem; }
.gc__row .gc__label{ margin-bottom:1.1rem; }
.gc__row .gc__input,
.gc__row .gc__select{ font-size:.95rem; padding-right:2.6rem; }
.gc__row .gc__chevron{ right:.8rem; }
.gc__row > div > .gc__field{ margin-bottom:0; }

.gc__recurring[hidden]{ display:none; }

.gc__addfund-row{ text-align:center; margin:1.4rem 0 0; }
.gc__addfund{
  display:inline-block;
  background:transparent;
  border:2px solid var(--field-line);
  color:var(--field-line);
  border-radius:999px;
  min-width:189px; min-height:47px;
  padding:.5rem 1.7rem .35rem;
  font-family:var(--font-display);
  font-size:1.25rem; letter-spacing:.07em; text-transform:uppercase;
  cursor:pointer;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.gc__addfund:hover{ background:var(--field-line); color:#fff; }
.gc__rule{ border:0; border-top:2px solid #e8dde5; margin:1.25rem calc(var(--gc-pad-x) * -1) 0; }   /* full-bleed, edge to edge of the card */
.gc__next-row{ text-align:center; margin:1.45rem 0 0; }
.gc__next{ min-width:189px; }

/* ---------------------------------------------- give card: Pushpay widget */
/* The designed card is replaced by Pushpay's Embedded Giving form. It lives inside the same
   white frame; the widget caps its own width (~410px) so it is centred. min-height keeps the
   section from jumping while Pushpay loads. */
.gc--pushpay{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:clamp(560px, 50.5vw, 808px);
  padding:clamp(1rem, 1.5vw, 24px);
}
.gc--pushpay > div{ width:100%; display:flex; justify-content:center; }
.gc--pushpay iframe{ max-width:100%; }
.gc__fallback{ margin:auto; text-align:center; }

/* ============================================================== legal */
.legal{
  background:var(--plum-deep);
  padding-block:clamp(3rem, 5.3vw, 85px) clamp(3.5rem, 6.5vw, 104px);   /* 255px block @1600 */
  text-align:center;
}
.legal p{
  max-width:54rem; margin-inline:auto;
  font-size:.75rem;
  line-height:1.75;
  color:rgba(255,255,255,.5);
}

/* ============================================================= footer */
.site-footer{
  background:var(--ink);
  padding-block:clamp(3rem, 4.1vw, 66px) clamp(2.6rem, 3.2vw, 51px);   /* 277px footer @1600 */
  text-align:center;
}
/* Keystone logo above the socials (Carmen, 2026-09-16) — same size it had before 09-16. */
.site-footer__wordmark{
  display:block; width:clamp(170px, 16vw, 256px);
  margin:0 auto clamp(1.2rem, 1.3vw, 20px);
  line-height:0; transition:opacity .2s var(--ease);
}
.site-footer__wordmark:hover{ opacity:.8; }
.site-footer__wordmark img{ width:100%; height:auto; }
.socials{
  display:flex; justify-content:center; align-items:center;
  gap:clamp(1.4rem, 2.9vw, 46px);
  margin-bottom:clamp(1.6rem, 2.7vw, 2.6rem);
}
.socials a{
  display:grid; place-items:center;
  width:34px; height:34px;
  color:#fff;
}
.socials svg{ width:36px; height:36px; }
.socials a{
  transition:color .2s var(--ease);
}
.socials a:hover{ color:var(--teal-bright); }
.site-footer__legal{
  font-size:.8125rem;
  color:rgba(255,255,255,.8);
}
.site-footer__legal a{ text-decoration:none; }
.site-footer__legal a:hover{ text-decoration:underline; }

/* ========================================================== responsive */
/* Desktop body copy = 20px (Jose, 2026-09-15; first a 17px floor, then raised
   to 20). Labels, pills, buttons and the fine print keep their own sizes.
   Phones are unchanged. */
@media (min-width:861px){
  :root{ --fs-body:1.25rem; }                                    /* 20px */
  .hero__lede{ font-size:1.25rem; margin-bottom:min(2.4rem, 4svh); }   /* 20px (was 18px @1600); gap tightens on short windows so the hero still fits */
  .slide__body .measure-sm{ font-size:1.25rem; }                 /* carousel copy: 20px (was 14.4px) */
  .stat__label{ font-size:clamp(1.0625rem, .8rem + .45vw, 1.25rem); }   /* 17px floor, 20px @1600 */
}

@media (max-width:1100px){
  .give__grid{ grid-template-columns:1fr; }
  .give__copy{ padding-top:0; }
  .give__copy h2{ margin-right:0; }
  .gc{ max-width:530px; }
}

@media (max-width:860px){
  /* ~15% up from the stand-in sizes: Rocinante is narrower, so the same widths allow larger caps */
  :root{ --fs-display-xl:clamp(3.5rem, 14.85vw, 5.7rem);   /* hero H1 +10%, as desktop */
         --fs-display-lg:clamp(3.1rem, 13.5vw, 5.4rem);   /* section headings ~12% up (designer's mobile mock, 2026-09-16) */
         --fs-display-md:clamp(2.8rem, 11.5vw, 4.6rem);
         --fs-display-sl:clamp(2.8rem, 11.5vw, 4.6rem);
         --fs-stat:clamp(3.8rem, 17vw, 6.4rem); }

  .site-header{ padding-top:1.5rem; }
  .site-header__inner{ flex-direction:column; align-items:flex-start; gap:.85rem; }
  .site-header .tagline{ display:none; }
  .site-header__inner{ position:relative; }
  .site-header__aside{ display:none; }   /* tagline moves into the hero on phones; nothing else lives here */
  .site-header__logo{ display:inline-block; text-align:center; }
  .tagline--hero{
    display:block; position:absolute; left:0; right:0; bottom:1.4rem; z-index:2;
    text-align:center;
    letter-spacing:.42em; font-size:clamp(.625rem, 2.6vw, .8rem);   /* 10px @390 (was 8.8px), bigger per the designer's mock */
  }

  /* hero: copy sits over the art, arrow pushed right and cropped */
  /* copy starts high and the lit path shows below it (designer's mock, 2026-09-16; was anchored to the bottom) */
  .hero{ min-height:min(760px, 152vw, 100vh); min-height:min(760px, 152vw, 100svh); padding-block:clamp(8.5rem, 30vw, 11rem) 4.5rem; align-items:flex-start; }
  .hero__arrow{
    left:56%; top:3%; width:54%;
    /* Here the pole ends right at the hero's bottom edge, so the scroll parallax
       would lift its cut end into view. Fade the last stretch of the pole instead;
       it sits in the scrim's darkest band at rest. */
    -webkit-mask-image:linear-gradient(to bottom, #000 82%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 82%, transparent 100%);
  }
  /* much lighter than before so the sunset and path lights read (designer: "faded out");
     the copy's own shadows carry legibility. Was .9/.6 from the bottom + .72 from the left. */
  .hero__scrim{
    background:
      linear-gradient(to top, rgba(44,12,38,.55) 0%, rgba(44,12,38,.18) 22%, rgba(44,12,38,0) 40%),
      linear-gradient(to right, rgba(44,12,38,.42) 0%, rgba(44,12,38,.14) 60%, rgba(44,12,38,0) 85%);
  }
  .hero h1{ max-width:none; text-wrap:pretty; }
  .hero__lede{ max-width:17.5rem; }

  .twenty{ min-height:0; padding-bottom:min(90vw, 470px); }   /* room for the photo below the copy (was 78vw / 420px) */
  .twenty__photo{ background-position:var(--x, 50%) 100%; }
  .twenty__veil{
    height:auto; inset:0;
    /* solid behind the heading, then clears right under the paragraph so the photo shows
       (designer's mock, 2026-09-16; was near-solid to 70%) */
    background:linear-gradient(to bottom,
      rgba(48,5,53,.96) 0%, rgba(42,6,46,.9) 38%, rgba(30,5,32,.55) 52%,
      rgba(20,4,22,.15) 66%, rgba(20,4,22,0) 78%);
  }

  .stats{ grid-template-columns:1fr; gap:2.6rem; }
  .stat{ gap:0; }
  .stat__label{ margin-top:.55rem; }

  /* the video frame overlap is a desktop move only */
  :root{ --overlap:0px; }
  .video{ padding-bottom:clamp(2.5rem, 8vw, 4rem); }

  .slide{ min-height:min(720px, 118vw, 100vh); min-height:min(720px, 118vw, 100svh); padding-bottom:6rem; }
  .slide__body h3{ max-width:none; }
  .carousel__bars button{ width:44px; }

  .video{ padding-top:4rem; }
  .give__grid{ max-width:none; }
  .gc{ max-width:none; }
  .gc__chips{ grid-template-columns:1fr 1fr; }
  .gc__chips button:nth-child(1){ border-radius:var(--r-field) 3px 3px 3px; }
  .gc__chips button:nth-child(2){ border-radius:3px var(--r-field) 3px 3px; }
  .gc__chips button:nth-child(3){ border-radius:3px 3px 3px var(--r-field); }
  .gc__chips button:nth-child(4){ border-radius:3px 3px var(--r-field) 3px; }

  .socials{ gap:1.35rem; }
}

/* =====================================================================
   PHONE / TABLET = the designer's mobile artboard (design/HERE-AND-BEYOND_MOBILE.png,
   1080px wide), matched to its measured pixels (2026-09-16). Every value below is
   "artboard px x --u" (1u = 1/1080 of the screen width), so at any width the
   header, hero and 20 Years sit exactly where the artboard puts them.
   Text uses --t instead: identical to --u from 576px up, but it stops shrinking
   below 576px so phone copy never drops under 16px (the artboard at a 390px phone
   would put the paragraph at 11px). KEYSTONE isn't in the artboard; its size and
   position come from the designer's Slack mock (2026-09-15).
   Portrait only: a landscape phone keeps the earlier layout, whose sections never
   run taller than the window.
   ===================================================================== */
@media (max-width:860px) and (orientation:portrait){
  :root{
    --u: calc(100vw / 1080);
    --t: max(calc(100vw / 1080), calc(576px / 1080));
  }

  /* header */
  .site-header{ padding-top:calc(82 * var(--u)); }
  .site-header .site-header__inner{ padding-inline:calc(96 * var(--u)); }
  .site-header .site-header__logo .site-header__mark{ width:calc(502 * var(--u)); }

  /* hero */
  /* copy block centred vertically in the full-screen hero (Jose, 2026-09-16), clear of the
     logo row above (260u) and the tagline below (200t) */
  .hero{
    min-height:calc(1373 * var(--u));
    padding-block:calc(260 * var(--u)) calc(200 * var(--t));   /* bottom uses --t so the tagline keeps its room on small phones */
    align-items:center;
  }
  .hero .hero__inner{ padding-inline:calc(90 * var(--u)); }
  .hero .eyebrow{ font-size:calc(31.7 * var(--t)); letter-spacing:.218em; margin-bottom:calc(26 * var(--u)); margin-left:calc(-3 * var(--u)); }
  .hero h1{ font-size:calc(150 * var(--u)); line-height:.846; letter-spacing:-.11em; margin:0 0 calc(36 * var(--u)) calc(-18 * var(--u)); }
  .hero .hero__lede{ font-size:calc(32.8 * var(--t)); line-height:1.472; max-width:min(calc(660 * var(--t)), calc(710 * var(--u))); margin-bottom:calc(50 * var(--u)); }   /* 660: breaks the lines where the designer's mock does; 710u keeps small-phone text off the arrow's pole */
  .hero .btn--lg{ min-height:calc(85 * var(--t)); padding:0 calc(64 * var(--t)) 0 calc(74 * var(--t)); font-size:calc(25.8 * var(--t)); letter-spacing:.14em; margin-left:calc(-2 * var(--u)); }
  .hero .tagline--hero{ font-size:calc(18.6 * var(--t)); letter-spacing:.8em; bottom:calc(55 * var(--u)); padding-left:calc(49 * var(--u)); }
  .hero .tagline--hero em{ font-size:2.05em; }
  /* arrow moved down so its head sits beside the headline (Jose, 2026-09-16): the head's widest
     row (image row 383 = 412.7u) lands at the headline's vertical middle, which sits 142t above
     the hero's centre (230t on phones under 576px, where the text floor makes the block taller) */
  .hero .hero__art{ --arrow-top:calc(50cqh - 142 * var(--t) - 412.7 * var(--u)); }
  .hero .hero__arrow{ left:55.06%; top:var(--arrow-top); width:51.89%; -webkit-mask-image:none; mask-image:none; }
  /* a full-screen hero is taller than the arrow image, so its pole continues to the bottom:
     a seamless 80px slice of the pole (arrow-pole.webp = arrow-v2.webp x 215-290, rows 1194-1274)
     repeated from row 1274 down, at the arrow's own scale (0.5189 x 100cqw / 520 per image px).
     brightness .87 = the scrim's .13 darkening in that band, which the pseudo-element sits above. */
  .hero .hero__art::after{
    content:""; position:absolute; bottom:0;
    left:76.514cqw; width:7.4841cqw;
    top:calc(var(--arrow-top) + 127.13cqw);
    background:url("../img/arrow-pole.webp") repeat-y 0 0 / 100% auto;
    filter:brightness(.87);
    pointer-events:none;
  }

  /* hero artwork at the artboard's exact placement (feature-matched: scale 1.1539 at -240,-40).
     Phones use a taller export of the same PSD layers (1600x1241 instead of 1600x1022): the
     artboard shows the path-light band below the desktop crop, down to the tagline. */
  .hero .hero__art{ background:rgb(27,25,36); }
  /* top/bottom insets = the artboard placement when the hero is 1373u tall (1846.3 x 1432u).
     When the hero is taller (full-screen sections, bigger phone text) the art grows to keep
     filling it, centred on the arrow's pole (x 866u) so the pole stays on the lit path.
     .hero__art is a size container so 100cqh = the hero's height. */
  .hero .hero__art{ container-type:size; }
  .hero .hero__layer{
    inset:auto; top:calc(-40.4 * var(--u)); bottom:calc(-18.6 * var(--u));
    left:calc(-239.8 * var(--u));
    left:calc(866 * var(--u) - .77221 * (100cqh + 59 * var(--u)));
    width:auto; height:auto; aspect-ratio:1600 / 1241;
  }
  .hero .hero__layer--base,
  .hero .hero__layer--sky { background-image:url("../img/hero-base-tall.webp"); }
  .hero .hero__layer--land{ background-image:url("../img/parallax-lower-tall.webp"); }
  /* the artboard's only shading: an oval darkening behind the copy block plus a light fade
     toward the art's bottom edge (measured mock/art brightness ratios: none at the top and
     right, down to .58 at the left edge level with the paragraph) */
  .hero .hero__scrim{
    background:
      radial-gradient(ellipse calc(700 * var(--u)) calc(620 * var(--u)) at calc(60 * var(--u)) calc(830 * var(--u)), rgba(10,6,16,.45), rgba(10,6,16,0)),
      linear-gradient(to bottom, rgba(10,6,16,0) calc(880 * var(--u)), rgba(10,6,16,.1) calc(1100 * var(--u)), rgba(10,6,16,.13) calc(1139 * var(--u)), rgba(10,6,16,.13) 100%);
  }

  /* 20 years of yes */
  /* photo area below the copy: taller than the artboard's on phones (Jose, 2026-09-16) - 60% of
     the screen height (svh; vh fallback), never less than the artboard's 818u */
  .twenty{ padding-top:calc(68 * var(--u)); padding-bottom:max(calc(818 * var(--u)), 60vh); padding-bottom:max(calc(818 * var(--u)), 60svh); }
  .twenty .eyebrow{ font-size:calc(31.7 * var(--t)); letter-spacing:.2em; margin-bottom:calc(32 * var(--u)); padding-left:calc(16 * var(--u)); }
  .twenty h2{ font-size:calc(150 * var(--u)); line-height:.846; letter-spacing:-.125em; margin-bottom:calc(43.5 * var(--u)); }
  .twenty .measure-md{ font-size:calc(32.8 * var(--t)); line-height:1.472; max-width:calc(760 * var(--t)); padding-left:calc(22 * var(--u)); }
  /* photo A at the artboard's exact scale and horizontal position (feature-matched), held to the
     section bottom: this a.jpg is cropped ~200u shorter at the bottom than the photo in the
     design file, so matching its top would leave an empty band above the stats. */
  /* photo A fills the taller area (reaching 90px up under the fade), framed on the hand, card and box */
  .twenty .twenty__photo:first-child{ background-size:auto max(calc(958.4 * var(--u)), calc(60svh + 90px)); background-position:62% bottom; }
  /* veil = the artboard's measured opacity curve (colour 39,4,43), measured from the section bottom */
  /* the fade tracks the photo area (60svh) so the extra height shows photo, not purple */
  .twenty .twenty__veil{
    height:auto; inset:0;
    background:linear-gradient(to bottom,
      rgb(39,4,43) 0,
      rgba(39,4,43,.98) calc(100% - 66svh),
      rgba(39,4,43,.85) calc(100% - 60svh),
      rgba(39,4,43,.6) calc(100% - 52svh),
      rgba(39,4,43,.35) calc(100% - 44svh),
      rgba(39,4,43,.15) calc(100% - 34svh),
      rgba(39,4,43,0) calc(100% - 22svh));
  }
  .twenty{ background:rgb(39,4,43); }
}
/* below 576px text stops shrinking, so the wide-tracked tagline tightens to stay on one line */
/* Phones/tablets: the hero is at least one screen tall (Jose, 2026-09-16; hero only).
   svh = the screen with the browser bars showing, so the height doesn't jump while the
   address bar hides and shows. The extra room falls below the copy (more art). */
@media (max-width:860px){
  .hero{ min-height:100vh; min-height:100svh; }
}
@media (max-width:575px) and (orientation:portrait){
  .hero .tagline--hero{ letter-spacing:.42em; padding-left:0; }
  .hero .hero__art{ --arrow-top:calc(50cqh - 230 * var(--t) - 412.7 * var(--u)); }
}
@media (max-width:359px) and (orientation:portrait){
  .hero .tagline--hero{ letter-spacing:.28em; }
}

@media (max-width:560px){
  .gc__toggle button{ font-size:.78rem; gap:.3rem; white-space:nowrap; }
  .gc__toggle button svg{ width:16px; height:16px; }
  .gc__row{ gap:.6rem; }
  .gc__row .gc__input, .gc__row .gc__select{ font-size:.72rem; padding-left:.7rem; padding-right:1.8rem; }
  .gc__row .gc__chevron{ right:.45rem; width:18px; height:18px; }
  .site-header__logo img{ width:min(255px, 66vw); }
}

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{ opacity:1; transform:none; }
  .carousel__track{ transition:none; }
}