/* ═══════════════════════════════════════════════════════════════
   Processly, site 1. The system from the final home (Matti, 2026-10-19).
   One typeface for the site (Schibsted Grotesk). Brand navy for heroes and
   dark bands, white and cool gray between them, teal only as an accent.
   One moving idea per screen; motion plays once and settles; reduced
   motion shows every end state. Every value comes from :root.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* color */
  --navy-950: #162e3d;   /* nav when scrolled, footer, text on teal */
  --navy-900: #1e3a4c;   /* heroes and navy bands: the brand navy */
  --navy-800: #24465a;
  --navy-700: #2b5269;
  --teal: #2dbfaa;       /* accent: buttons, ticks, lines, small marks */
  --teal-lift: #45cdb9;
  --teal-300: #74ddcd;   /* teal text on navy */
  --teal-ink: #0b7568;   /* teal text and links on light */
  --teal-wash: #e7f6f3;
  --ink: #0f2230;
  --text: #2e4350;
  --muted: #566b78;
  --line: #dde5e9;
  --line-strong: #c5d1d7;
  --field: #7a8f9a;
  --surface: #f3f6f7;
  --white: #ffffff;
  --on-dark: rgba(255, 255, 255, .92);
  --on-dark-muted: rgba(255, 255, 255, .74);
  --line-dark: rgba(255, 255, 255, .15);
  --error: #b3261e;

  /* type */
  --font: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-lead: clamp(1.125rem, 1.35vw, 1.25rem);
  --fs-h3: clamp(1.3125rem, 1.7vw, 1.5rem);
  --fs-h2: clamp(2.125rem, 4vw, 3.375rem);
  --fs-h1: clamp(2.625rem, 5.4vw, 4.5rem);

  /* space */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
  --section: clamp(4rem, 8vw, 7rem);
  --max: 1200px;
  --gutter: clamp(1rem, 3.4vw, 2.25rem);

  /* shape */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --pill: 999px;
  --shadow-1: 0 1px 2px rgba(10, 27, 37, .06), 0 5px 12px -6px rgba(10, 27, 37, .14);
  --shadow-2: 0 2px 4px rgba(10, 27, 37, .05), 0 20px 44px -14px rgba(10, 27, 37, .22);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --move: cubic-bezier(.65, 0, .35, 1);
  --nav-h: 72px;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-strong) transparent; }
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-base); line-height: 1.6;
  color: var(--text); background: var(--white);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, blockquote, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 650; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1; letter-spacing: -.045em; font-weight: 680; }
h2 { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.035em; }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.02em; font-weight: 640; }
h4 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.01em; font-weight: 640; }
p { text-wrap: pretty; }
strong { color: var(--ink); font-weight: 650; }
::selection { background: var(--teal); color: var(--navy-950); }
:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible, .nav :focus-visible, .footer :focus-visible, .section--navy :focus-visible { outline-color: var(--teal-300); }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--teal); color: var(--navy-950); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-weight: 600; }
.skip:focus { left: var(--s-4); top: var(--s-4); }
[hidden] { display: none !important; }

/* ── Layout ── */
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section--surface { background: var(--surface); }
.section--navy { background: var(--navy-900); color: var(--on-dark-muted); }
.section--navy h2, .section--navy h3, .section--navy h4, .section--navy strong { color: var(--white); }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.head { max-width: 760px; }
.head > p { margin-top: var(--s-5); font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); max-width: 52ch; }
.section--navy .head > p { color: var(--on-dark-muted); }
.head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-5) var(--s-8); align-items: start; }
.head--split > p, .head--split > .lead { margin-top: 0; }
/* a two-column list or grid under a split heading shares its columns: the right column starts where the lead does,
   and the list (and a question under it) runs to the same right edge */
@media (min-width: 961px) {
  .head--split ~ .checks, .head--split ~ .anno, .head--split ~ .fees { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--s-8); max-width: none; }
  .head--split ~ .faq { max-width: none; }
}
.head--center { margin-inline: auto; text-align: center; }
.head--center > p { margin-inline: auto; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); max-width: 52ch; }

/* ── Buttons and links ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 50px; padding: 0 1.35rem; border-radius: var(--pill); border: 1px solid transparent;
  font: 600 1rem/1.1 var(--font); letter-spacing: -.005em; white-space: nowrap;
  text-decoration: none; cursor: pointer; background: none; color: inherit;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .16s var(--ease), box-shadow .2s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease); }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--teal); color: var(--navy-950); box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 6px 14px -8px rgba(0, 0, 0, .45); }
.btn--ghost { background: var(--white); color: var(--ink); border-color: var(--line-strong); box-shadow: 0 1px 2px rgba(15, 34, 48, .05); }
.on-dark .btn--ghost, .section--navy .btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.36); box-shadow: none; }
.btn--sm { min-height: 40px; padding: 0 1.05rem; font-size: .9375rem; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn.js-film svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--teal-lift); }
  .btn--ghost:hover { border-color: var(--ink); }
  .on-dark .btn--ghost:hover, .section--navy .btn--ghost:hover { border-color: var(--white); background: rgba(255,255,255,.06); }
  .btn:hover svg { transform: translateX(3px); }
  .btn.js-film:hover svg { transform: none; }
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.link { display: inline-flex; align-items: center; gap: .4rem; color: var(--teal-ink); font-weight: 600; text-decoration: none; }
.link::after { content: ""; flex: none; width: 1.05em; height: 1.05em; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .25s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
  a:hover > .link::after, .link:hover::after { transform: translateX(3px); }
}
.on-dark .link, .section--navy .link { color: var(--teal-300); }
.prose a, .inline-link { color: var(--teal-ink); text-underline-offset: .2em; text-decoration-thickness: 1px; }

.replay { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .35rem; border: 0; background: none; font-size: var(--fs-sm); font-weight: 600; color: var(--teal-ink); cursor: pointer; transition: transform .16s var(--ease); }
.replay svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.replay:hover svg { transform: rotate(-60deg); }
.replay:active { transform: scale(.97); }
.on-dark .replay { color: var(--teal-300); }

/* ── Navigation: the brand navy, a step deeper once the page moves ── */
.nav { position: sticky; top: 0; z-index: 50; background: var(--navy-900); color: var(--on-dark); border-bottom: 1px solid transparent; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.nav.is-stuck { background: var(--navy-950); border-bottom-color: var(--line-dark); }
.nav__in { height: var(--nav-h); display: flex; align-items: center; gap: var(--s-5); }
.nav__logo { display: flex; flex: none; }
.nav__logo img { width: 137px; height: auto; }
.nav__links { display: flex; gap: .15rem; margin-left: auto; }
.nav__links a { padding: .45rem .75rem; border-radius: var(--pill); text-decoration: none; font-size: .9375rem; font-weight: 500; color: var(--on-dark); transition: background-color .2s var(--ease), color .2s var(--ease); }
.nav__links a[aria-current] { color: var(--white); background: rgba(255,255,255,.1); }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { background: rgba(255,255,255,.08); color: var(--white); } }
.nav__cta { flex: none; }
.nav__toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--white); cursor: pointer; position: relative; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { position: absolute; left: 12px; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease), background-color .2s; content: ""; }
.nav__toggle span { top: 21px; }
.nav__toggle span::before { left: 0; top: -6px; }
.nav__toggle span::after { left: 0; top: 6px; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__toggle span::after { transform: translateY(-6px) rotate(-45deg); }
.nav__panel { display: none; }

/* a breadcrumb at the top of a hero */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-bottom: var(--s-5); font-size: var(--fs-sm); color: var(--on-dark-muted); }
.crumbs a { color: var(--white); font-weight: 600; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: .2em; }
.crumbs span[aria-hidden] { color: rgba(255,255,255,.45); }

/* ── Footer ── */
.footer { background: var(--navy-950); color: var(--on-dark-muted); padding: clamp(3.5rem, 6vw, 5rem) 0 2rem; font-size: var(--fs-sm); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.footer img { width: 132px; }
.footer__grid > div > p { margin-top: 1.25rem; max-width: 38ch; line-height: 1.6; }
.footer h2 { font-size: var(--fs-sm); line-height: 1.3; letter-spacing: 0; color: var(--white); font-weight: 600; margin-bottom: 1rem; }
.footer li + li { margin-top: .55rem; }
.footer a { text-decoration: none; color: var(--on-dark-muted); transition: color .2s var(--ease); }
.footer a:hover { color: var(--white); }
.footer__base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.footer__base a { display: inline-block; padding-block: .3rem; }

/* ── Home hero: the headline very large across the navy, one real figure beside the actions ── */
.hero { position: relative; overflow: clip; background: radial-gradient(42% 60% at 86% 80%, rgba(45, 191, 170, .14), transparent 70%), var(--navy-900); color: var(--on-dark-muted); padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(3.5rem, 6.5vw, 5.5rem); }
.hero h1 { color: var(--white); font-size: clamp(3rem, 8.2vw, 7.5rem); line-height: .94; letter-spacing: -.05em; font-weight: 680; max-width: 10.5em; }
.hero__row { margin-top: clamp(2.25rem, 4.5vw, 4rem); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: end; }
.hero__lead { font-size: var(--fs-lead); line-height: 1.55; max-width: 40ch; color: rgba(255,255,255,.8); }
.hero .btn-row { margin-top: 2rem; }
.figure { display: block; padding-top: 1.25rem; border-top: 2px solid var(--teal); color: inherit; text-decoration: none; }
.figure__num { font-weight: 650; color: var(--white); font-size: clamp(3.75rem, 7.6vw, 7rem); line-height: 1; letter-spacing: -.05em; font-variant-numeric: lining-nums; white-space: nowrap; }
.figure__cap { margin-top: .9rem; font-size: 1rem; line-height: 1.5; color: var(--on-dark-muted); max-width: 28ch; }
.figure__cap b { color: var(--white); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .figure:hover .figure__cap b { text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: .2em; } }
.odo { display: inline-flex; align-items: flex-start; transition: opacity .5s var(--ease); }
.odo.is-waiting { opacity: 0; }
.odo__col { display: inline-block; height: 1em; overflow: hidden; }
.odo__strip { display: flex; flex-direction: column; align-items: center; }
.odo__strip span { display: block; height: 1em; line-height: 1; }
.odo__plus { color: var(--teal); }

/* ── Page hero (inner pages) ── */
.phero { position: relative; overflow: hidden; background: var(--navy-900); color: var(--on-dark-muted); padding: clamp(3rem, 6vw, 5.25rem) 0 clamp(3rem, 6vw, 5rem); isolation: isolate; }
.phero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(42% 60% at 86% 80%, rgba(45, 191, 170, .14), transparent 70%); }
.phero h1 { color: var(--white); max-width: 16ch; }
.phero p.lead { margin-top: var(--s-5); color: rgba(255,255,255,.8); max-width: 44ch; }
.phero .btn-row { margin-top: var(--s-6); }
.phero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.phero__grid h1 { max-width: none; }
.phero--404 { min-height: min(68vh, 720px); display: grid; align-content: center; }
.phero--404 h1 { font-size: clamp(3rem, 7vw, 6rem); max-width: 12ch; }

/* ── Tools: a short navy band that continues the hero; the label left, one row drifting beside it ── */
.tools { position: relative; background: var(--navy-900); border-top: 1px solid rgba(255, 255, 255, .1); padding: clamp(1.5rem, 2.6vw, 1.85rem) 0; overflow: clip; }
.tools__in { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; align-items: center; gap: .75rem clamp(1.5rem, 3vw, 2.5rem); }
.tools__h { font-size: var(--fs-sm); line-height: 1.4; letter-spacing: 0; font-weight: 500; color: var(--on-dark-muted); }
.tools__pause { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .85); cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease); }
.js .tools__pause { display: inline-flex; }
.tools__pause svg { width: 12px; height: 12px; }
.tools__icon-play, .tools.is-paused .tools__icon-pause { display: none; }
.tools.is-paused .tools__icon-play { display: block; }
.tools__view { min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.tools__track { display: flex; width: max-content; animation: toolsDrift var(--tools-dur, 150s) linear 3s infinite; }
.tools__view:hover .tools__track, .tools.is-held .tools__track, .tools.is-paused .tools__track, .tools.is-waiting .tools__track { animation-play-state: paused; }
.tools__list { display: flex; align-items: center; gap: 2.25rem; padding-right: 2.25rem; }
.tools__list li { display: inline-flex; align-items: center; gap: .5rem; height: 28px; font-size: 1rem; font-weight: 500; letter-spacing: -.01em; color: rgba(255, 255, 255, .85); white-space: nowrap; transition: color .2s var(--ease); }
.tools__list li svg { width: 18px; height: 18px; flex: none; }
.tools__list li .tools__mark--monday { width: 21px; height: 13px; }
.tools__list li .tools__mark--pipedrive { width: 60px; height: 14px; }
.tools__list li.is-word { font-weight: 600; letter-spacing: -.015em; }
@keyframes toolsDrift { to { transform: translateX(-50%); } }
@media (hover: hover) and (pointer: fine) {
  .tools__list li:hover, .tools__pause:hover { color: var(--white); }
  .tools__pause:hover { border-color: rgba(255, 255, 255, .8); }
}

/* ── Recent work: big numbers, what was built, and the case ── */
.results__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem 2rem; }
.results__grid { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(2rem, 4vw, 3.5rem); }
.results__grid li { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.results__card { flex: 1; display: flex; flex-direction: column; padding-top: 1.5rem; color: inherit; text-decoration: none; }
.results__card .bignum { transition: color .2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .results__card:hover .bignum { color: var(--teal-ink); }
  .results__card:hover .link { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
}
.results__card:focus-visible { outline-offset: 6px; }
.results__card:focus-visible .bignum { color: var(--teal-ink); }
.results__card:focus-visible > .link::after { transform: translateX(3px); }
.bignum { font-size: clamp(3.25rem, 6vw, 5.25rem); line-height: .95; font-weight: 650; letter-spacing: -.05em; color: var(--ink); white-space: nowrap; }
.bignum > span[aria-hidden] { display: inline-flex; align-items: center; }
.bignum__was { color: var(--field); }
.bignum__arrow { width: .5em; height: .5em; margin: 0 .1em; color: var(--teal-ink); }
.results__cap { margin-top: 1rem; font-size: 1rem; line-height: 1.5; color: var(--muted); max-width: 28ch; }
.results__cap b { color: var(--ink); font-weight: 600; }
.results__built { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.45; font-weight: 560; color: var(--ink); max-width: 30ch; }
.results__grid .link { margin-top: auto; padding-top: .9rem; font-size: var(--fs-sm); }

/* ── One idea, said large, on the navy ── */
.statement { background: var(--navy-900); padding: clamp(5rem, 11vw, 9rem) 0; text-align: center; }
.statement__h { margin-inline: auto; color: var(--white); font-size: clamp(2.5rem, 6.4vw, 5.75rem); line-height: 1; letter-spacing: -.05em; font-weight: 680; max-width: 11em; }
.statement__cta { margin-top: clamp(2rem, 4vw, 3rem); display: flex; justify-content: center; }
.statement__p { margin: var(--s-6) auto 0; max-width: 44ch; font-size: var(--fs-lead); color: var(--on-dark-muted); }

/* ── A service and its example, one open row on the shared 6fr/5fr grid (round 17): a hairline above
   each row. When the row is reached, a teal line draws along the text column, then the example
   fills in beside it, so the words and the example read as one. Once each. ── */
.pairs { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; }
.pair { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-6) var(--s-8); align-items: center; padding: clamp(2rem, 4vw, 3rem) 0; border-top: 1px solid var(--line); }
.pair::before { content: ""; position: absolute; left: 0; top: -1px; width: calc((100% - var(--s-8)) * 6 / 11); height: 2px; background: var(--teal); transform-origin: left center; transition: transform 1s var(--ease); }
.js .pair:not(.is-on)::before { transform: scaleX(0); }
.pair__text h3 { font-size: clamp(1.75rem, 2.8vw, 2.375rem); line-height: 1.1; letter-spacing: -.03em; }
.pair__text p { margin-top: .85rem; color: var(--muted); max-width: 38ch; }
.pair__text .link { margin-top: 1.25rem; }
.pair__ex { display: grid; }
.pair .ui { max-width: none; }
/* wide screens: three rows of one height, and three cards of one size, each centred on its words */
@media (min-width: 961px) {
  .pairs { grid-auto-rows: 1fr; }
  .pair__ex { align-self: stretch; }
  .pair .ui { display: flex; flex-direction: column; height: 100%; }
  .pair .ui > .ui__list, .pair .ui > .ui__bars, .pair .ui > .ui__map { flex: 1; display: flex; flex-direction: column; justify-content: center; }
}

/* ── Examples of the work (example data, always labelled "Example") ── */
.ui { display: block; width: 100%; max-width: 440px; background: var(--white); color: var(--text); font-size: 15px; line-height: 1.35; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: 0 1px 2px rgba(15, 34, 48, .05), 0 22px 44px -28px rgba(15, 34, 48, .32); text-align: left; }
.ui time, .ui em, .ui b { font-variant-numeric: normal; }
.ui__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 18px 12px; background: #f7f9fa; border-bottom: 1px solid #e4eaed; font-size: 13.5px; color: var(--muted); }
.ui__bar b { color: var(--ink); font-weight: 600; font-size: 15px; letter-spacing: -.005em; }
.ui__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 18px 13px; border-top: 1px solid #e4eaed; font-size: 13.5px; color: var(--muted); }
.ui__ex { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); border: 1px solid var(--line-strong); border-radius: var(--pill); padding: 1px 8px; }
.ui__list li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid #e4eaed; }
.ui__list li:first-child { border-top: 0; }
.ui__list span { color: var(--ink); }
.ui__list time { color: var(--muted); font-size: 13.5px; }
.ui__ok { width: 18px; height: 18px; border-radius: 50%; background: var(--teal); position: relative; display: block; }
.ui__ok::after { content: ""; position: absolute; left: 6.5px; top: 3.5px; width: 4.5px; height: 8.5px; border: solid var(--navy-950); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ui__bars { padding: 10px 18px 8px; }
.ui__bars li { display: grid; grid-template-columns: 102px minmax(0, 1fr) 26px; align-items: center; gap: 12px; padding: 9px 0; font-size: 14px; color: var(--text); }
.ui__bars b { text-align: right; font-weight: 600; color: var(--ink); }
.ui__track { height: 12px; background: #edf1f3; border-radius: 4px; overflow: hidden; }
.ui__track i { display: block; height: 100%; width: calc(var(--v) * 100%); background: #9aaeba; border-radius: 4px; transform-origin: left center; }
.ui__bars li:first-child span:first-child { color: var(--ink); font-weight: 600; }
.ui__bars li:first-child .ui__track i { background: var(--teal); }
.ui__map { padding: 16px 18px 18px; }
.ui__step { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 13px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--white); font-size: 14px; color: var(--ink); }
.ui__step em { flex: none; font-style: normal; font-size: 13px; color: var(--muted); }
.ui__step.is-hand { border-style: dashed; }
.ui__group { position: relative; margin-top: 18px; padding: 7px; border-radius: 10px; }
.ui__group::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--teal); border-radius: inherit; pointer-events: none; }
.ui__group + .ui__step, .ui__group > .ui__step + .ui__step { margin-top: 14px; }
.ui__group > .ui__step::before, .ui__map > .ui__group + .ui__step::before { content: ""; position: absolute; width: 1px; background: var(--line-strong); }
.ui__group > .ui__step:first-of-type::before { left: 22px; top: -26px; height: 25px; }
.ui__group > .ui__step + .ui__step::before { left: 22px; top: -15px; height: 14px; }
.ui__map > .ui__group + .ui__step::before { left: 29px; top: -22px; height: 21px; }
.ui__tab { position: absolute; right: 12px; top: 0; transform: translateY(-50%); z-index: 1; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 9px; border-radius: var(--pill); background: var(--teal); color: var(--navy-950); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .js .ui .ui__list li, .js .ui .ui__bars li, .js .ui .ui__map > .ui__step, .js .ui .ui__group .ui__step { opacity: .25; transform: translateY(5px); transition: opacity .55s var(--ease), transform .7s var(--ease); }
  .js .ui.is-in .ui__list li, .js .ui.is-in .ui__bars li, .js .ui.is-in .ui__map > .ui__step, .js .ui.is-in .ui__group .ui__step { opacity: 1; transform: none; }
  .js .ui.is-in li:nth-child(2) { transition-delay: 70ms; }
  .js .ui.is-in li:nth-child(3) { transition-delay: 140ms; }
  .js .ui.is-in li:nth-child(4) { transition-delay: 210ms; }
  .js .ui.is-in li:nth-child(5) { transition-delay: 280ms; }
  .js .ui.is-in .ui__group .ui__step:first-of-type { transition-delay: 90ms; }
  .js .ui.is-in .ui__group .ui__step:last-child { transition-delay: 180ms; }
  .js .ui.is-in .ui__group + .ui__step { transition-delay: 270ms; }
  .js .ui .ui__track i { transform: scaleX(0); transition: transform 1s var(--ease) .3s; }
  .js .ui.is-in .ui__track i { transform: none; }
  .js .ui .ui__group::before { clip-path: inset(0 100% 0 0 round 10px); transition: clip-path .9s var(--move) .55s; }
  .js .ui.is-in .ui__group::before { clip-path: inset(0 0 0 0 round 0); }
  .js .ui .ui__tab { opacity: 0; transform: translateY(-50%) scale(.94); transition: opacity .35s var(--ease) 1.35s, transform .45s var(--ease) 1.35s; }
  .js .ui.is-in .ui__tab { opacity: 1; transform: translateY(-50%); }
}

/* ── Numbered steps: circles on one line that draws to the end; each lights as it is reached ── */
.steps { position: relative; margin-top: clamp(2.5rem, 5vw, 3.75rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; counter-reset: step; }
.steps::before, .steps::after { content: ""; position: absolute; top: 21px; left: 22px; right: 0; height: 2px; border-radius: 2px; z-index: 0; }
.steps::before { background: var(--line-dark); }
.steps::after { background: var(--teal); transform-origin: left center; transition: transform 2.2s linear; }
.steps li { position: relative; padding-top: 4.25rem; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-900); border: 2px solid var(--teal); color: var(--white); font-weight: 650; font-size: 1rem; transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease); }
.steps li:last-child::before { background: var(--teal); color: var(--navy-950); }
.steps h3 { color: var(--white); font-size: clamp(1.5rem, 2.2vw, 1.75rem); letter-spacing: -.03em; }
.steps p { margin-top: .6rem; color: var(--on-dark-muted); font-size: 1rem; max-width: 30ch; }
.steps li > * { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.steps li:nth-child(2)::before, .steps li:nth-child(2) > * { transition-delay: .55s; }
.steps li:nth-child(3)::before, .steps li:nth-child(3) > * { transition-delay: 1.1s; }
.steps li:nth-child(4)::before, .steps li:nth-child(4) > * { transition-delay: 1.65s; }
.js .steps:not(.is-drawn)::after { transform: scaleX(0); }
.js .steps:not(.is-drawn) li::before { border-color: rgba(255,255,255,.22); background: var(--navy-900); color: rgba(255,255,255,.6); }
.js .steps:not(.is-drawn) li > * { opacity: .3; transform: translateY(8px); }
/* on a light ground */
.steps__foot { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: .8rem 2.25rem; font-size: var(--fs-sm); color: var(--on-dark-muted); }
.steps__foot span { display: inline-flex; align-items: center; gap: .55rem; }
.steps__foot svg { width: 16px; height: 16px; color: var(--teal-300); }

/* ── Client quotes: open on an ink rule, a teal mark, who said it and what we built for them ── */
.quotes { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem clamp(2.5rem, 6vw, 6rem); }
.quote { display: flex; flex-direction: column; padding-top: 1.5rem; border-top: 2px solid var(--ink); }
.quote blockquote { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.62; color: var(--text); }
.quote blockquote::before { content: "\201C"; display: block; height: .5em; font-size: 4.5rem; line-height: 1; font-weight: 800; color: var(--teal); }
.quote figcaption { margin-top: auto; padding-top: 1.75rem; display: grid; justify-items: start; gap: .1rem; font-size: 1rem; line-height: 1.4; }
.quote figcaption strong { color: var(--ink); font-weight: 650; }
.quote figcaption > span { color: var(--muted); font-size: var(--fs-sm); }
.quote__case { display: inline; margin-top: .85rem; font-size: var(--fs-sm); }
.quote__case::after { display: inline-block; vertical-align: -.2em; margin-left: .35rem; }
.quote figcaption .quote__case { display: block; }
.quote--solo blockquote { max-width: 940px; }
.quote--solo blockquote { font-size: clamp(1.375rem, 2.3vw, 1.875rem); line-height: 1.42; letter-spacing: -.018em; color: var(--ink); }
.section--navy .quote, .caseband .quote { border-top-color: rgba(255,255,255,.24); }
.section--navy .quote blockquote, .caseband .quote blockquote { color: var(--on-dark); }
.section--navy .quote figcaption strong, .caseband .quote figcaption strong { color: var(--white); }
.section--navy .quote figcaption > span, .caseband .quote figcaption > span { color: var(--on-dark-muted); }

/* ── Nonprofit band: an open row under a hairline (round 17), words in the wide column, buttons from the second column's edge ── */
.np { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 1.5rem var(--s-8); align-items: center; padding-top: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 1px solid var(--line); }
.np h2 { font-size: clamp(1.75rem, 2.8vw, 2.375rem); }
.np p { margin-top: .5rem; color: var(--muted); }
.np > div:first-child { max-width: 58ch; }

/* ── Close ── */
.close { background: var(--navy-900); color: var(--on-dark-muted); padding: clamp(5rem, 10vw, 8.5rem) 0; text-align: center; }
.close h2 { color: var(--white); font-size: clamp(2.375rem, 5vw, 4.5rem); letter-spacing: -.045em; max-width: 13em; margin: 0 auto; }
.close p { margin: 1.5rem auto 0; max-width: 50ch; font-size: var(--fs-lead); }
.close .btn-row { justify-content: center; margin-top: 2.25rem; }

/* ── Statements in rows, and lists said as one line ── */
.words { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 3vw, 3rem); }
.words--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.words li { padding-top: 1.5rem; border-top: 2px solid var(--ink); }
.words h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.15; letter-spacing: -.025em; }
.words p { margin-top: .8rem; line-height: 1.55; color: var(--muted); max-width: 40ch; }

/* ── A heading beside a short list of commitments (nonprofits) ── */
.promise { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: start; }
.promise__head .lead { margin-top: var(--s-5); max-width: 40ch; }
.promise__quote { margin-top: clamp(2rem, 4vw, 2.75rem); }
.promise__quote blockquote { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }
.promise__list { border-top: 2px solid var(--ink); }
.promise__list li { padding: clamp(1.25rem, 2.2vw, 1.6rem) 0; border-bottom: 1px solid var(--line); }
.promise__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.promise__list h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.15; letter-spacing: -.025em; }
.promise__list p { margin-top: .45rem; line-height: 1.55; color: var(--muted); max-width: 46ch; }
/* wide screens: the quote a step smaller and the full column wide; both columns end on one line, and the four
   rows share the height evenly, each ending on its hairline */
@media (min-width: 961px) {
  .promise__quote { margin-top: 1.75rem; padding-top: 1.25rem; max-width: none; }
  .promise__quote blockquote { font-size: 1.0625rem; line-height: 1.6; }
  .promise__quote blockquote::before { font-size: 3.75rem; }
  .promise__quote figcaption { padding-top: 1.1rem; }
  .promise { align-items: stretch; }
  .promise__list { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .promise__list li, .promise__list li:last-child { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.1rem, 2vw, 1.5rem) 0; border-bottom: 1px solid var(--line); }
}
.runin { margin-top: var(--s-6); max-width: 32em; font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 560; line-height: 1.4; letter-spacing: -.02em; color: var(--ink); text-wrap: pretty; }
.runin li { display: inline-block; }
.runin li:not(:last-child)::after { content: "\00a0\00b7"; margin: 0 .2em; color: var(--muted); font-weight: 400; }
.runin li.is-eol::after { visibility: hidden; }

/* ── Services: a service's words and its example, side by side; what is in the work below ── */
.svc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: center; }
.svc__head .lead { margin-top: var(--s-5); max-width: 40ch; }
.svc__head .link { margin-top: var(--s-5); }
.svc__ex { display: grid; justify-items: end; }
.svc__list { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 2px solid var(--ink); }
/* what is in each service: a short checklist, two columns, quiet ticks */
.checks { margin-top: clamp(2rem, 4vw, 2.75rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.05rem clamp(2rem, 5vw, 4.5rem); max-width: 62rem; }
.svc__list .checks { margin-top: 0; }
.checks__h { margin-top: clamp(2rem, 4vw, 2.75rem); font-size: var(--fs-sm); font-weight: 650; color: var(--ink); }
.checks__h + .checks { margin-top: 1rem; }
.faq--one { margin-top: clamp(2rem, 4vw, 2.75rem); }
.checks--1 { grid-template-columns: minmax(0, 1fr); }
.checks b { font-weight: 650; }
.case__foot .checks { margin-top: 0; gap: .65rem 1.5rem; }
.case__foot .checks li { font-size: 1rem; }
.section--navy .checks li { color: var(--white); }
.section--navy .checks li::before { background: var(--teal-300); }
.checks li { position: relative; padding-left: 2rem; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.45; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.checks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.05em; height: 1.05em; background: var(--teal-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.8 4.8L19.5 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.8 4.8L19.5 7'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ── Giving forms on the nonprofits page: the pitch beside one example form ── */
.npgive { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: center; }
.npgive .lead { margin-top: var(--s-5); }
.npgive__note { margin-top: var(--s-4); color: var(--muted); }
.npgive .btn-row { margin-top: var(--s-6); }
.npgive__form { display: grid; justify-items: center; }

/* ── One thing, traced through the system (marketing and nonprofits heroes) ── */
.trace { --tr-gap: clamp(1.5rem, 2.6vw, 2.25rem); --tr-node: 14px; --tr-fs: clamp(1.375rem, 2.2vw, 1.875rem); --tr-y: calc(var(--tr-fs) * .575); justify-self: end; width: min(100%, 470px); }
.trace__cap { font-size: var(--fs-sm); font-weight: 560; color: var(--on-dark-muted); }
.trace__list { margin-top: var(--s-6); display: grid; gap: var(--tr-gap); }
.trace__list li { position: relative; padding-left: 2.75rem; }
.trace__list li::before { content: ""; position: absolute; left: 0; top: calc(var(--tr-y) - var(--tr-node) / 2); width: var(--tr-node); height: var(--tr-node); border-radius: 50%; border: 2px solid rgba(255,255,255,.28); background: var(--navy-900); transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.trace__list li:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--tr-node) / 2 - 1px); width: 2px; top: calc(var(--tr-y) + var(--tr-node) / 2 + 4px); bottom: calc(-1 * var(--tr-gap) - var(--tr-y) + var(--tr-node) / 2 + 4px); background: linear-gradient(var(--teal), var(--teal)) top / 100% 0% no-repeat, rgba(255,255,255,.16); transition: background-size .45s var(--ease); }
.trace__list b { display: block; font-size: var(--tr-fs); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; color: var(--white); }
.trace__list span { display: block; margin-top: .3rem; font-size: var(--fs-sm); color: var(--on-dark-muted); }
.trace.is-seen li::before { border-color: var(--teal); background: var(--teal); }
.trace.is-seen li:not(:last-child)::after { background-size: 100% 100%, auto; }
.trace li:nth-child(2)::before { transition-delay: .6s; }
.trace li:nth-child(3)::before { transition-delay: 1.2s; }
.trace li:nth-child(4)::before { transition-delay: 1.8s; }
.trace li:nth-child(1)::after { transition-delay: .2s; }
.trace li:nth-child(2)::after { transition-delay: .8s; }
.trace li:nth-child(3)::after { transition-delay: 1.4s; }
.trace__foot { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; color: var(--on-dark-muted); }
.trace__foot strong { color: var(--white); font-weight: 600; }

/* ── Jump links in a hero (services, case studies) ── */
.jump { margin-top: var(--s-7); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5) clamp(1.5rem, 3vw, 3rem); }
.jump a { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .55rem; padding: var(--s-4) 0 0; border-top: 1px solid rgba(255,255,255,.22); color: var(--white); text-decoration: none; font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 600; letter-spacing: -.015em; transition: border-color .2s var(--ease); }
.jump a:hover { border-top-color: var(--teal); }
.jump b { font-size: clamp(2rem, 3.7vw, 3.375rem); font-weight: 650; line-height: 1; letter-spacing: -.045em; color: var(--white); white-space: nowrap; }
.jump a:has(b) { color: var(--on-dark-muted); font-size: var(--fs-sm); font-weight: 560; letter-spacing: 0; }

/* ── A result beside the client's words, on the navy ── */
.caseband { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.caseband__num { white-space: nowrap; font-size: clamp(3rem, 6.4vw, 5.5rem); line-height: .95; font-weight: 650; letter-spacing: -.05em; color: var(--white); }
.caseband__num span { color: var(--teal-300); }
.caseband__num s { text-decoration: none; color: rgba(255,255,255,.5); }
.caseband p { margin-top: var(--s-5); color: var(--on-dark-muted); max-width: 44ch; }
.caseband__more { margin-top: var(--s-5); }

/* ── The fee math: a platform fee elsewhere beside a form we build ── */
.math__h { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.section--navy .math__h { color: var(--white); }
.mathcmp { padding-top: var(--s-5); border-top: 2px solid rgba(255, 255, 255, .24); }
.mathcmp__row { margin: var(--s-6) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem clamp(2rem, 5vw, 5rem); }
.mathcmp__row dt { font-size: var(--fs-lead); color: var(--on-dark-muted); }
.mathcmp__row dd { margin: .5rem 0 0; font-size: clamp(3.5rem, 8vw, 7rem); font-weight: 650; line-height: 1; letter-spacing: -.05em; color: var(--white); font-variant-numeric: normal; }
.mathcmp__row .is-us dd { color: var(--teal-300); }
.mathcmp__note { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line-dark); font-size: var(--fs-lead); color: var(--white); }
/* played once: the line draws, the fee elsewhere counts up from $0, ours stays at $0 and settles, the note comes last */
.mathcmp { position: relative; }
.mathcmp__num { display: inline-block; }
.mathcmp.is-ready { border-top-color: transparent; }
.mathcmp.is-ready::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: rgba(255, 255, 255, .24); transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--ease); }
.mathcmp.is-playing::before { transform: scaleX(1); }
.mathcmp.is-ready .mathcmp__note { opacity: 0; transition: opacity .7s var(--ease); }
.mathcmp.is-landed .mathcmp__note { opacity: 1; transition-delay: .45s; }
.mathcmp.is-landed .is-us dd { animation: mcSettle .9s var(--ease); }
@keyframes mcSettle { 0% { filter: brightness(1); } 35% { filter: brightness(1.4); } 100% { filter: brightness(1); } }

/* ── Giving forms: the fee chart and its controls ── */
.fees { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.fees__ctrl { margin-top: var(--s-6); }
.head--split ~ .fees { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.head--split ~ .fees .fees__ctrl { margin-top: 0; }
/* wide screens (round 20): the $100K / $500K / $1M switch sits above both columns' rules, so the panel's
   rule and the chart's rule start on one line; the panel takes a little air so both columns end together */
@media (min-width: 961px) {
  .head--split ~ .fees { row-gap: var(--s-6); }
  .head--split ~ .fees > div:first-child { display: contents; }
  .head--split ~ .fees .fees__ctrl { grid-column: 1; grid-row: 1; }
  .head--split ~ .fees .fees__save { grid-column: 1; grid-row: 2; align-self: stretch; display: flex; flex-direction: column; margin-top: 0; padding-top: var(--s-6); }
  .head--split ~ .fees .chart { grid-column: 2; grid-row: 2; }
  .head--split ~ .fees .fees__save strong { margin: 1rem 0 .9rem; }
  .head--split ~ .fees .fees__save > .gf-save-note { margin-top: auto; padding-top: .85rem; }
  .head--split ~ .fees .chart__cap { margin-bottom: 1rem; }
  .head--split ~ .fees .chart__zeffy { margin-top: 1rem; padding-top: .85rem; }
}
.fees__ctrl #fees-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); margin-bottom: .6rem; }
.seg { position: relative; isolation: isolate; display: inline-flex; flex-wrap: wrap; gap: .3rem; padding: .3rem; border-radius: var(--pill); background: var(--white); border: 1px solid var(--line); }
.seg button { position: relative; min-height: 40px; padding: 0 1rem; border: 0; border-radius: var(--pill); background: transparent; font-size: .9375rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: color .2s var(--ease), transform .16s var(--ease); }
.seg button:active { transform: scale(.97); }
.seg button[aria-pressed="true"] { background: var(--navy-900); color: var(--white); }
.seg__ind { position: absolute; z-index: -1; top: 0; left: 0; width: 0; height: 0; border-radius: var(--pill); background: var(--navy-900); pointer-events: none; transition: transform .3s var(--ease), width .3s var(--ease), height .3s var(--ease); }
.seg.has-ind button[aria-pressed="true"] { background: transparent; }
.seg.no-anim .seg__ind { transition: none; }
.seg--dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.seg--dark button { color: var(--on-dark-muted); }
.seg--dark button:hover { color: var(--white); }
.seg--dark button[aria-pressed="true"], .seg--dark button[aria-pressed="true"]:hover { color: var(--navy-950); }
.seg--dark .seg__ind { background: var(--teal); }
.chart { padding: var(--s-5) 0 0; border-top: 2px solid var(--ink); }
.chart__cap { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 1.25rem; }
.bars { display: grid; gap: 1rem; }
.bar { display: grid; grid-template-columns: 112px minmax(0, 1fr) 156px; gap: 1rem; align-items: center; }
.bar__name { font-weight: 600; color: var(--ink); font-size: 1rem; }
.bar__track { position: relative; height: 42px; }
.bar__fill { display: block; height: 100%; border-radius: 8px; background: #cdd6db; width: var(--w, 0%); min-width: 6px; clip-path: inset(0 100% 0 0 round 8px); transition: clip-path .9s var(--ease); }
.chart.is-drawn .bar__fill { clip-path: inset(0 0 0 0 round 8px); }
.bar__val { white-space: nowrap; font-size: .96875rem; font-weight: 600; color: var(--ink); font-variant-numeric: normal; }
.bar__val small { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.bar--us .bar__fill { background: var(--teal); }
.bar--us .bar__name { color: var(--teal-ink); }
.chart__rate { margin-top: 1rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink); max-width: 60ch; }
.chart__zeffy { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--line); font-size: var(--fs-sm); color: var(--muted); }
.fees__save { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 2px solid var(--ink); color: var(--muted); }
.fees__save strong { display: block; margin: .6rem 0 .5rem; color: var(--ink); font-size: clamp(2.25rem, 4.2vw, 3.5rem); font-weight: 650; letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
.fees__save > span { display: block; font-size: var(--fs-sm); }
.fees__save > .gf-save-note { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); color: var(--text); }
.gf-fees .bar { grid-template-columns: 112px minmax(0, 1fr) 184px; }
.gf-fees .bar__val small { white-space: normal; line-height: 1.35; }
.fineprint { margin-top: var(--s-6); font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; max-width: 100ch; }
.fineprint p + p { margin-top: .5rem; }
.fineprint--more { margin-top: var(--s-3); }
.fineprint--more summary { cursor: pointer; width: fit-content; color: var(--ink); font-weight: 560; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.fineprint--more summary:hover { text-decoration-color: var(--teal-ink); }
.fineprint--more p { margin-top: .5rem; }

/* ── Giving forms: which version fits which website ── */
.lanes { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); gap: 0 clamp(2rem, 5vw, 4.5rem); }
.lane { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; padding: var(--s-5) 0 0; border-top: 2px solid var(--ink); }
.lane__title { font-size: 1.375rem; letter-spacing: -.02em; }
.lane__best { margin-top: .5rem; color: var(--muted); font-size: 1rem; }
.lane .checks { margin-top: var(--s-5); gap: .75rem; }
.lane .checks li { font-size: 1rem; }
.gf-paymarks { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: 1.0625rem; line-height: 1.6; color: var(--muted); }
.gf-paymarks strong { color: var(--ink); font-weight: 600; }
.gf-more { margin-top: var(--s-6); }

/* ── The work around the form: one gift, followed through (example pieces) ── */
.gflow { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: flex; align-items: stretch; }
.gflow__piece { flex: 1 1 0; min-width: 0; display: grid; align-content: start; gap: .3rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: 0 1px 2px rgba(15, 34, 48, .05), 0 18px 36px -26px rgba(15, 34, 48, .35); font-size: .8125rem; color: var(--text); }
.gflow__h { font-size: .75rem; font-weight: 650; color: var(--muted); }
.gflow__big { font-size: 1.125rem; font-weight: 680; letter-spacing: -.02em; color: var(--ink); }
.gflow__sub { color: var(--muted); }
.gflow dl { margin: 0; display: grid; gap: .2rem; }
.gflow dl > div { display: flex; justify-content: space-between; gap: .75rem; }
.gflow dt { color: var(--muted); }
.gflow dd { margin: 0; font-weight: 600; color: var(--ink); }
.gflow__link { flex: 0 0 clamp(1rem, 3vw, 2.5rem); align-self: center; position: relative; height: 2px; background: var(--line-strong); }
@media (prefers-reduced-motion: no-preference) {
  .js .gflow:not(.is-played) .gflow__piece { opacity: .4; }
  .js .gflow:not(.is-played) .gflow__link { transform: scaleX(0); }
  .gflow.is-playing .gflow__piece { animation: gfLight 1.1s var(--ease) both; }
  .gflow.is-playing .gflow__link { transform-origin: left center; animation: gfDraw .55s var(--ease) both; }
  .gflow.is-playing > :nth-child(1) { animation-delay: 0s; }
  .gflow.is-playing > :nth-child(2) { animation-delay: .6s; }
  .gflow.is-playing > :nth-child(3) { animation-delay: 1.15s; }
  .gflow.is-playing > :nth-child(4) { animation-delay: 1.75s; }
  .gflow.is-playing > :nth-child(5) { animation-delay: 2.3s; }
  .gflow.is-playing > :nth-child(6) { animation-delay: 2.9s; }
  .gflow.is-playing > :nth-child(7) { animation-delay: 3.45s; }
}
@keyframes gfLight { 0% { opacity: .4; border-color: var(--line); } 35% { opacity: 1; border-color: var(--teal-ink); } 100% { opacity: 1; border-color: var(--line); } }
@keyframes gfDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gfDrawDown { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.gflow__link::after { content: ""; position: absolute; right: -1px; top: 50%; width: 7px; height: 7px; border-top: 2px solid var(--teal-ink); border-right: 2px solid var(--teal-ink); transform: translateY(-50%) rotate(45deg); }

/* ── What the giving form does: one example form beside its parts ── */
.anno { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem clamp(2.5rem, 5vw, 5rem); align-items: center; }
.anno__form { position: relative; }
.anno__form .gform { margin: 0; max-width: none; }
.anno__form .gform__card { overflow: visible; }
.anno__form .gform__card > .gform__ex { z-index: 3; }
.anno__form button, .anno__form input, .anno__form label { cursor: default; }
.anno__form [data-part] { border-radius: 10px; outline: 2px solid transparent; outline-offset: 4px; transition: outline-color .25s var(--ease); }
.anno__form [data-part].is-lit { outline-color: var(--teal-ink); }
.anno__form .gfm-legend small[data-part] { padding: 1px 6px; border-radius: 6px; }
.gfm-upsell { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 9px 12px; border: 1.5px dashed var(--gd-line); border-radius: var(--gd-r); font-size: .875rem; color: var(--gd-ink); }
.gfm-upsell b { padding: 5px 12px; border-radius: 99px; background: var(--gd-title); color: #fff; font-size: .8125rem; white-space: nowrap; }
.gfm-updates { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .875rem; color: var(--gd-ink); }
.gfm-yn { display: inline-flex; gap: 6px; }
.gfm-yn b { min-width: 52px; padding: 6px 10px; border: 1.5px solid var(--gd-line); border-radius: 10px; background: var(--gd-tile); text-align: center; font-weight: 600; }
.anno__try { justify-self: start; display: inline-flex; align-items: center; gap: .55rem; min-height: 36px; margin-top: .35rem; padding: 0; border: 0; background: transparent; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); cursor: pointer; }
.anno__try-track { position: relative; width: 36px; height: 22px; flex: none; border-radius: 99px; background: #7a8f9a; transition: background-color .25s var(--ease); }
.anno__try-track i { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(15, 34, 48, .3); transition: transform .3s var(--ease); }
.anno__try[aria-checked="true"] .anno__try-track { background: var(--teal-ink); }
.anno__try[aria-checked="true"] .anno__try-track i { transform: translateX(14px); }
.anno__try:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 3px; border-radius: 6px; }
/* the floating Donate button the switch turns on, in the missions example's look */
.gfloat { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: .5rem; min-height: 52px; padding: 0 1.35rem; border: 0; border-radius: 99px; background: #7a1c1a; color: #fff; font: inherit; font-weight: 700; font-size: 1rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 14px 28px -12px rgba(16, 24, 40, .5); cursor: pointer; transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s; }
.gfloat svg { width: 18px; height: 18px; }
.gfloat[hidden] { display: none; }
.gfloat.is-out, .gfloat.is-tucked { opacity: 0; transform: translateY(14px); visibility: hidden; transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s .35s; }
.gfloat:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 3px; }
.gpop { width: min(780px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 22px; background: transparent; overflow: visible; }
.gpop::backdrop { background: rgba(10, 27, 37, .62); }
.gpop__box { position: relative; max-height: calc(100vh - 32px); overflow: auto; padding: 3.25rem clamp(.75rem, 2vw, 1.25rem) 1.25rem; border-radius: 22px; background: var(--surface); }
.gpop__close { position: absolute; top: .75rem; right: .75rem; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--white); color: var(--ink); cursor: pointer; }
.gpop__close svg { width: 18px; height: 18px; }
.gpop__close:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 2px; }
.gpop .gform { margin: 0 auto; }
html.gpop-lock { overflow: hidden; }
.anno__cue { margin-bottom: .9rem; font-size: var(--fs-sm); color: var(--muted); }
.anno__list { border-top: 2px solid var(--ink); }
.anno__list li { position: relative; display: grid; gap: .15rem; padding: .7rem 0 .7rem 1.4rem; border-bottom: 1px solid var(--line); font-size: clamp(1rem, 1.2vw, 1.0625rem); font-weight: 560; line-height: 1.35; color: var(--ink); outline: none; transition: color .2s var(--ease); }
.anno__list li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: background-color .25s var(--ease), transform .25s var(--ease); }
.anno__list li.is-on::before { background: var(--teal-ink); transform: scale(1.3); }
.anno__list li:focus-visible { box-shadow: inset 0 0 0 2px var(--teal-ink); border-radius: 6px; }
.anno__group { margin: 1.75rem 0 .65rem; font-size: var(--fs-sm); font-weight: 650; color: var(--ink); }

/* the icon, then the rule, then the heading */
.words--icons li { padding-top: 0; border-top: 0; }
.words--icons .wicon { display: block; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--ink); color: var(--teal-ink); }
.words--icons .wicon svg { display: block; width: 40px; height: 40px; }

/* ── Questions ── */
.faq { margin-top: var(--s-6); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.35rem 0; font-size: 1.1875rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2230' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 3rem 1.5rem 0; color: var(--muted); }
.faq details > div p { max-width: 72ch; }
.faq details > div p + p { margin-top: .6rem; }

/* ── Case studies ── */
.case__top { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; padding-bottom: var(--s-7); border-bottom: 1px solid var(--line); }
.case__top > div > p { margin-top: var(--s-4); font-size: var(--fs-lead); color: var(--muted); }
.case__res { text-align: right; }
.case__res:not(:has(.result__num)) { text-align: left; }
.case__top:has(> .case__res > .result__cap:only-child) { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.case__top:has(> .case__res > .result__cap:only-child) > div:first-child { max-width: 46rem; }
.case__res:not(:has(.result__num)) .result__cap { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); max-width: 30ch; }
.section--navy .case__res:not(:has(.result__num)) .result__cap { color: var(--white); }
.result__num { font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 650; line-height: 1; letter-spacing: -.05em; color: var(--ink); white-space: nowrap; }
.result__num span { color: var(--teal-ink); }
.result__num b, .caseband__num b { font-weight: inherit; }
.result__cap { margin-top: .6rem; color: var(--muted); font-size: 1rem; }
/* ── Case studies: the body as a numbered 1-2-3 flow ── */
.flow { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3rem); padding: var(--s-7) 0; counter-reset: flow; }
.flow::before, .flow::after { content: ""; position: absolute; top: calc(var(--s-7) + 17px); left: 18px; right: 0; height: 2px; border-radius: 2px; }
.flow::before { background: var(--line); }
.flow::after { background: var(--teal); transform-origin: left center; transition: transform 1.6s linear; }
.flow li { position: relative; padding-top: 3.5rem; }
.flow li::before { counter-increment: flow; content: counter(flow); position: absolute; top: 0; left: 0; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--white); border: 2px solid var(--teal); color: var(--ink); font-size: .875rem; font-weight: 700; transition: border-color .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease); }
.section--surface .flow li::before { background: var(--surface); }
.flow li:last-child::before { background: var(--teal); color: var(--navy-950); }
.flow__label { font-size: var(--fs-sm); font-weight: 650; color: var(--teal-ink); }
.flow h3 { margin-top: .35rem; font-size: clamp(1.25rem, 1.8vw, 1.5rem); letter-spacing: -.02em; }
.flow h3 + p { margin-top: .6rem; color: var(--muted); max-width: 38ch; }
.flow li:nth-child(2)::before { transition-delay: .8s; }
.flow li:nth-child(3)::before { transition-delay: 1.6s; }
.js .flow:not(.is-drawn)::after { transform: scaleX(0); }
.js .flow:not(.is-drawn) li::before { border-color: var(--line-strong); color: var(--muted); }
.js .flow:not(.is-drawn) li:last-child::before { background: var(--white); }
.js .section--surface .flow:not(.is-drawn) li:last-child::before { background: var(--surface); }
/* the case on navy */
.section--navy .flow::before { background: var(--line-dark); }
.section--navy .flow li::before { background: var(--navy-900); color: var(--white); }
.section--navy .flow li:last-child::before { background: var(--teal); color: var(--navy-950); }
.js .section--navy .flow:not(.is-drawn) li::before { border-color: rgba(255, 255, 255, .22); background: var(--navy-900); color: rgba(255, 255, 255, .6); }
.section--navy .flow__label { color: var(--teal-300); }
.section--navy .flow h3 { color: var(--white); }
.section--navy .flow h3 + p { color: var(--on-dark-muted); }
.case__foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) clamp(2rem, 5vw, 4.5rem); align-items: start; }
.case__built { font-size: var(--fs-sm); font-weight: 650; color: var(--ink); margin-bottom: .75rem; }
.case__foot .link { margin-top: var(--s-5); }
.case__foot .quote figcaption { padding-top: 1.25rem; }
/* wide screens: the foot shares the flow's three columns. With a quote, the list stacks under step 1 and the
   quote spans steps 2 and 3; without one, the list runs across all three as a three-column checklist. */
@media (min-width: 961px) {
  .case__foot { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .case__foot > .quote { grid-column: 2 / 4; }
  .case__foot .checks { grid-template-columns: minmax(0, 1fr); }
  .phero__grid > .trace { justify-self: start; }
  /* rows that line up across siblings: each item's parts share the grid's row tracks (subgrid) */
  .lanes { grid-template-rows: repeat(6, auto); }
  .lane { grid-row: span 6; }
  .lane .checks { grid-row: span 4; grid-template-rows: subgrid; row-gap: .75rem; }
  .words li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .words--icons li { grid-row: span 3; }
  .results__grid { row-gap: 0; }
  .results__grid li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .results__card { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .founder__photo { max-width: 32rem; }
  .case__foot:not(:has(> .quote)) > div { grid-column: 1 / -1; }
  .case__foot:not(:has(> .quote)) .checks { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); max-width: none; }
}
.section--navy .case__top { border-bottom-color: var(--line-dark); }
.section--navy .case__top > div > p, .section--navy .result__cap { color: var(--on-dark-muted); }
.section--navy .result__num { color: var(--white); }
.section--navy .case__built { color: var(--white); }

/* ── Contact ── */
/* the calendar is capped at 860px: wide enough for Cal.com's month, days and times side by side (it needs
   about 770px or it stacks them), with the call notes beside it. Its height is reserved so nothing below
   moves when it loads: Cal.com's scheduler is 554 to 559px tall on wide screens, about 940px on phones. */
.book { display: grid; grid-template-columns: minmax(0, 860px) minmax(0, 1fr); gap: var(--s-6) clamp(2rem, 4vw, 3.5rem); align-items: start; }
.cal { min-height: 560px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden; position: relative; transition: background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
/* once Cal.com draws its own bordered scheduler, our card steps back: one frame, not two */
.cal.is-ready { background: transparent; border-color: transparent; box-shadow: none; }
.cal #cal-inline { position: relative; z-index: 1; min-height: 560px; }
/* Cal.com's wrapper is a wrapping flex box; packed to the top, spare height no longer opens a gap above it */
.cal cal-inline { align-content: flex-start; }
/* between tablet and wide desktop the notes go under the calendar, in two columns */
@media (min-width: 961px) and (max-width: 1239px) {
  .book { grid-template-columns: minmax(0, 1fr); }
  .book > :first-child { max-width: 860px; }
  .side { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
  .side > * { break-inside: avoid; }
  .side > .contactlist { break-before: column; margin-top: 0; padding-top: 0; border-top: 0; }
}
/* below about 825px the calendar is narrower than 770px and Cal.com stacks its parts, so the reserve is taller */
@media (max-width: 825px) { .cal, .cal #cal-inline { min-height: 940px; } }
.cal__alt { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--muted); }
.side h2 { font-size: 1.5rem; letter-spacing: -.02em; }
.side .quote { margin-top: var(--s-6); }
.side .quote blockquote { font-size: 1.0625rem; }
.nextsteps { position: relative; margin-top: var(--s-5); display: grid; gap: 1.25rem; counter-reset: ns; }
.nextsteps::before, .nextsteps::after { content: ""; position: absolute; left: 14px; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; }
.nextsteps::before { background: var(--line); }
.nextsteps::after { background: var(--teal); transform-origin: center top; transition: transform 1.4s linear; }
.js .nextsteps:not(.is-drawn)::after { transform: scaleY(0); }
.nextsteps li { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: .9rem; }
.nextsteps li::before { counter-increment: ns; content: counter(ns); position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--teal); background: var(--white); color: var(--ink); display: grid; place-items: center; font-weight: 650; font-size: .875rem; transition: border-color .4s var(--ease); }
.section--surface .nextsteps li::before { background: var(--surface); }
.js .nextsteps:not(.is-drawn) li::before { border-color: var(--line-strong); }
.nextsteps li:nth-child(2)::before { transition-delay: .6s; }
.nextsteps li:nth-child(3)::before { transition-delay: 1.2s; }
.nextsteps h3 { font-size: 1.0625rem; letter-spacing: -.005em; }
.nextsteps p { color: var(--muted); font-size: .96875rem; margin-top: .1rem; }
.contactlist { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); display: grid; gap: .8rem; font-size: 1rem; }
.contactlist dt { font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
.contactlist a { color: var(--ink); font-weight: 560; text-decoration: none; }
.contactlist a:hover { color: var(--teal-ink); text-decoration: underline; text-underline-offset: .2em; }
.writebox { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.writebox .lead { margin-top: var(--s-4); }
.writebox .nextsteps { margin-top: var(--s-6); }
.topic-only { display: none; }
[data-topic="giving-forms"] .topic-only[data-for="giving-forms"] { display: grid; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.field { display: grid; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.field label small { font-weight: 500; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: .7rem .9rem; border: 1.5px solid var(--field); border-radius: 10px; background: var(--white); font: inherit; font-size: 1rem; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2230' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .8rem center / 18px no-repeat; padding-right: 2.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal-ink); box-shadow: 0 0 0 4px rgba(45,191,170,.22); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 2px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field .err { display: none; font-size: var(--fs-sm); color: var(--error); font-weight: 560; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: var(--error); }
.field.is-invalid .err { display: block; }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-top: .25rem; }
.form__foot p { font-size: var(--fs-sm); color: var(--muted); }
.form__fail { grid-column: 1 / -1; font-weight: 600; color: var(--error); }
.form__done { display: none; padding: 2.5rem; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-1); text-align: center; }
.form__done h3 { display: inline-flex; align-items: center; gap: .6rem; }
.form__done .ico { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--teal); color: var(--navy-950); }
.form__done .ico svg { width: 16px; height: 16px; }
.form__done p { margin-top: .5rem; color: var(--muted); }
.is-sent .form { display: none; }
.is-sent .form__done { display: block; }

/* ── About: the founder ── */
.founder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.founder__photo { margin: 0; }
.founder__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 33%; border-radius: var(--r-lg); background: var(--surface); }
.founder__photo figcaption { padding-top: .75rem; font-size: var(--fs-sm); color: var(--muted); }
.founder h2 { font-size: clamp(2.25rem, 4.2vw, 3.5rem); }
.founder p { margin-top: var(--s-5); font-size: var(--fs-lead); color: var(--muted); max-width: 46ch; }
.founder .fact { font-size: var(--fs-sm); }

/* ── Blog ── */
.posts { display: grid; gap: var(--s-7); }
.post { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; text-decoration: none; color: inherit; }
.post img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); }
.post__tag { display: block; margin-top: .75rem; font-size: var(--fs-sm); font-weight: 560; color: var(--muted); }
.post h2 { font-size: clamp(1.875rem, 3.4vw, 2.75rem); line-height: 1.08; letter-spacing: -.035em; transition: color .2s var(--ease); }
.post:hover h2 { color: var(--teal-ink); }
.post p { margin-top: var(--s-4); color: var(--muted); font-size: var(--fs-lead); }
.post .link { margin-top: var(--s-5); }

/* ── Articles and legal pages ── */
.prose { max-width: 68ch; margin: 0 auto; font-size: 1.125rem; line-height: 1.7; color: var(--text); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2.3em; font-size: clamp(1.625rem, 2.6vw, 2.125rem); line-height: 1.15; letter-spacing: -.03em; }
.prose h3 { margin-top: 1.7em; font-size: 1.25rem; }
.prose h2 + *, .prose h3 + * { margin-top: .7em; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .55em; }
.prose li::marker { color: var(--teal-ink); }
.prose strong { font-weight: 650; }
.prose blockquote { padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); }
.prose__meta { font-size: var(--fs-sm); color: var(--muted); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.prose th, .prose td { padding: .75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose th { background: var(--surface); font-weight: 650; color: var(--ink); }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose__cta { margin-top: 2.5em; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--r-lg); background: var(--navy-900); }
.prose__cta p { color: var(--on-dark); }
.prose__cta .btn { margin-top: 1.1rem; max-width: 100%; height: auto; padding-block: .8rem; white-space: normal; text-align: center; }
.prose .btn--primary, .prose .btn--primary:hover { color: var(--navy-950); text-decoration: none; }

/* ═══ The example giving forms: three organizations, three designs of their own ═══
   Each stands for another organization's brand, so its faces and colors are its own
   (Fraunces for the food bank, Secular One for the missions agency); site chrome never uses them. */
.gform { position: relative; width: 100%; text-align: left; color: var(--gd-ink); }
.gform__card { position: relative; overflow: hidden; transition: opacity .2s var(--ease), transform .3s var(--ease); }
.gform.is-swapping .gform__card { opacity: 0; transform: translateY(6px); }
.gform__stage { position: relative; }
.gform__main { transition: opacity .3s var(--ease); }
.gform__ex { flex: none; padding: .2rem .6rem; border-radius: var(--pill); background: var(--gd-ex-bg); color: var(--gd-ex-ink); font-size: .75rem; font-weight: 650; line-height: 1.3; }
.gform__bar { overflow: hidden; }
.gform__bar i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--gd-acc); border-radius: inherit; transition: width 1.4s var(--ease); }
.js .gform:not(.is-seen) .gform__bar i { width: 0; }
.gform :focus-visible { outline: 2px solid var(--gd-focus); outline-offset: 2px; }
.gform button { font: inherit; cursor: pointer; }
.js-g-impact { transition: opacity .15s var(--ease); }
.js-g-impact.is-swap { opacity: 0; }
.gform__fees { position: relative; display: flex; align-items: center; gap: .6rem; font-size: .875rem; line-height: 1.4; color: var(--gd-ink); cursor: pointer; }
.gform__fees input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; }
.gform__tick { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--gd-field); border-radius: 6px; background: var(--gd-tickbg, #fff); transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.gform__tick svg { width: 14px; height: 14px; color: var(--gd-acc-ink); opacity: 0; transform: scale(.6); transition: opacity .2s var(--ease), transform .25s var(--ease); }
.gform__fees input:checked + .gform__tick { background: var(--gd-acc); border-color: var(--gd-acc); }
.gform__fees input:checked + .gform__tick svg { opacity: 1; transform: none; }
.gform__fees input:focus-visible + .gform__tick { outline: 2px solid var(--gd-focus); outline-offset: 2px; }
.gform__fees .js-g-fee { font-variant-numeric: normal; }
.gform__give { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 52px; border: 0; background: var(--gd-acc); color: var(--gd-acc-ink); font-weight: 700; font-size: 1.0625rem; font-variant-numeric: normal; transition: filter .2s var(--ease), transform .16s var(--ease), background-color .3s var(--ease); }
.gform__give svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.gform__give:hover:not(:disabled) svg { transform: translateX(3px); }
.gform__give:hover:not(:disabled) { filter: brightness(1.07); }
.gform__give:active:not(:disabled) { transform: scale(.98); }
.gform__give:disabled { opacity: .55; cursor: not-allowed; }
.gform__give.is-sending { pointer-events: none; filter: saturate(.75) brightness(1.08); }
.gform__express { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.gform__express span { height: 40px; display: flex; align-items: center; justify-content: center; gap: .3rem; border: 1.5px solid var(--gd-line); border-radius: 10px; background: #fff; font-size: .875rem; font-weight: 650; color: #3c4043; }
.gform__express span:first-child { background: #000; border-color: #000; }
.gform__express span:first-child img { height: 34px; width: auto; filter: invert(1); transform: scale(1.35); }
.gform__express img { height: 18px; width: auto; max-width: 100%; }
.gform__express svg { width: 18px; height: 18px; color: #5f6368; }
.gform__done { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: .35rem; padding: 2rem; text-align: center; background: var(--gd-bg); color: var(--gd-ink); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
.gform.is-done .gform__done { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s; }
.gform.is-done .gform__main { opacity: 0; }
.gform__ok { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--gd-acc); color: var(--gd-acc-ink); transform: scale(.6); transition: transform .6s var(--ease); }
.gform.is-done .gform__ok { transform: none; }
.gform__ok svg { width: 30px; height: 30px; stroke-dasharray: 21; stroke-dashoffset: 21; transition: stroke-dashoffset .5s .25s var(--ease); }
.gform.is-done .gform__ok svg { stroke-dashoffset: 0; }
.gform__thanks { margin-top: .75rem; font-family: var(--gd-head); font-weight: var(--gd-head-w, 600); font-size: 1.875rem; line-height: 1.1; color: var(--gd-title, var(--gd-ink)); }
.gform__done p { color: var(--gd-ink); }
.gform__note { font-size: .8125rem; color: var(--gd-muted) !important; }
.gform__again { margin-top: .9rem; min-height: 40px; padding: 0 1.1rem; border: 1.5px solid var(--gd-line); border-radius: var(--gd-r); background: transparent; font-size: .875rem; font-weight: 650; color: var(--gd-ink); }
.gform__again:hover { border-color: var(--gd-acc); }
/* the credit that ships on every form we build: plain text, not a link */
.gform__powered { display: block; width: fit-content; margin: .6rem auto 0; font-family: var(--font); font-size: .75rem; font-weight: 500; letter-spacing: .01em; color: var(--muted); text-decoration: none; }
.on-dark .gform__powered { color: var(--on-dark-muted); }
.gform__powered:hover { text-decoration: underline; text-underline-offset: .2em; }
.on-dark .gform__powered:focus-visible { outline-color: var(--teal-300); }

/* Riverside Food Bank: a warm card, a serif voice, every amount says what it buys */
.gform[data-brand="food"] {
  --gd-bg: #fffaf5; --gd-ink: #2c211b; --gd-muted: #6f5e53; --gd-line: #eadcd1; --gd-field: #8a7466; --gd-acc: #b4432a; --gd-acc-ink: #fff; --gd-soft: #fbefe7;
  --gd-ex-bg: #f3e6dc; --gd-ex-ink: #5a3c2e; --gd-focus: #b4432a; --gd-r: 12px; --gd-head: 'Fraunces', Georgia, serif;
  max-width: 400px;
}
.gform[data-brand="food"] .gform__card { background: var(--gd-bg); border: 1px solid var(--gd-line); border-radius: 18px; box-shadow: var(--shadow-2); }
.gff-top { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem 0; }
.gff-logo { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--gd-acc); color: #fff; font-family: var(--gd-head); font-weight: 600; font-size: .8125rem; }
.gff-top b { min-width: 0; font-family: var(--gd-head); font-weight: 600; font-size: 1rem; color: var(--gd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gff-top .gform__ex { margin-left: auto; }
.gform[data-brand="food"] .gform__main { display: grid; gap: .75rem; padding: .8rem 1.25rem 1.2rem; }
.gff-title { font-family: var(--gd-head); font-weight: 600; font-size: 1.625rem; line-height: 1.1; letter-spacing: -.015em; color: var(--gd-ink); text-wrap: balance; }
.gff-goal { display: grid; gap: .4rem; }
.gff-goal .gform__bar { height: 6px; border-radius: 99px; background: var(--gd-line); }
.gff-goal p { font-size: .8125rem; color: var(--gd-muted); }
.gff-goal strong { color: var(--gd-ink); font-weight: 700; font-variant-numeric: normal; }
.gff-amts { display: grid; gap: .4rem; }
.gff-row { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) 18px; align-items: center; gap: .65rem; min-height: 48px; padding: .4rem .85rem; border: 1.5px solid var(--gd-line); border-radius: var(--gd-r); background: #fff; color: var(--gd-ink); text-align: left; transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .16s var(--ease); }
.gff-row:hover { border-color: #d4b9a6; }
.gff-row:active { transform: scale(.985); }
.gff-row b { font-family: var(--gd-head); font-weight: 600; font-size: 1.25rem; font-variant-numeric: normal; }
.gff-row span { font-size: .875rem; line-height: 1.3; color: var(--gd-muted); }
.gff-row::after { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--gd-field); background: #fff; box-sizing: border-box; transition: border-width .2s var(--ease), border-color .2s var(--ease); }
.gff-row[aria-pressed="true"] { border-color: var(--gd-acc); background: var(--gd-soft); }
.gff-row[aria-pressed="true"] span { color: var(--gd-ink); }
.gff-row[aria-pressed="true"]::after { border: 5px solid var(--gd-acc); }
.gff-switch { display: inline-flex; align-items: center; gap: .7rem; justify-self: start; min-height: 36px; padding: 0; border: 0; background: transparent; font-size: .9375rem; font-weight: 600; color: var(--gd-ink); }
.gff-switch__track { position: relative; width: 40px; height: 24px; flex: none; border-radius: 99px; background: #8a7466; transition: background-color .25s var(--ease); }
.gff-switch__track i { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(44, 33, 27, .3); transition: transform .3s var(--ease); }
.gff-switch[aria-checked="true"] .gff-switch__track { background: var(--gd-acc); }
.gff-switch[aria-checked="true"] .gff-switch__track i { transform: translateX(16px); }
.gform[data-brand="food"] .gform__give { width: 100%; border-radius: var(--gd-r); box-shadow: 0 1px 2px rgba(44, 33, 27, .12), 0 10px 20px -12px rgba(44, 33, 27, .45); }

/* Fieldstone Missions, in the youth ministry's look (restored 2026-10-19): one wide page panel,
   three questions, monthly first; the yearly line sits where the meter bar was */
.gform[data-brand="ministry"] {
  --gd-bg: #ffffff; --gd-ink: #1f2331; --gd-title: #1d2f5f; --gd-muted: #5d6272; --gd-line: #d9d0bf; --gd-field: #8c7f68; --gd-tile: #faf8f3; --gd-track: #eee7da;
  --gd-acc: #7a1c1a; --gd-acc-ink: #fff; --gd-badge: #e3992c; --gd-ex-bg: #eee7da; --gd-ex-ink: #1d2f5f; --gd-focus: #1d2f5f; --gd-r: 14px;
  --gd-head: 'Secular One', var(--font); --gd-head-w: 400;
  max-width: 720px;
}
.gform[data-brand="ministry"] .gform__card { background: #fff; border: 1px solid #e7e0d2; border-radius: 26px; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 14px 34px -14px rgba(16, 24, 40, .22); }
.gform[data-brand="ministry"] .gform__card > .gform__ex { position: absolute; top: 14px; right: 16px; z-index: 2; }
.gform[data-brand="ministry"] .gform__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: clamp(16px, 2vw, 20px); }
.gfm-legend { margin-bottom: 7px; font-family: var(--gd-head); font-weight: 400; font-size: 1.0625rem; line-height: 1.25; color: var(--gd-title); }
.gfm-legend small { margin-left: 6px; font-family: var(--font); font-size: .75rem; font-weight: 600; color: var(--gd-muted); }
.gfm-funds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gform[data-brand="ministry"] { container-type: inline-size; }
@container (max-width: 700px) { .gfm-funds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gfm-funds button { position: relative; display: grid; gap: 2px; align-content: start; min-height: 62px; padding: 10px 12px 9px; border: 2px solid var(--gd-line); border-radius: var(--gd-r); background: var(--gd-tile); text-align: left; transition: border-color .18s var(--ease), background-color .18s var(--ease), transform .3s var(--ease); }
.gfm-funds button:hover { border-color: #b98f87; }
.gfm-funds strong { padding-right: 16px; font-family: var(--gd-head); font-weight: 400; font-size: .9375rem; line-height: 1.2; color: var(--gd-title); }
.gfm-funds span { font-size: .75rem; line-height: 1.3; color: var(--gd-muted); }
.gfm-funds [aria-pressed="true"] { border-color: var(--gd-acc); background: #fff; box-shadow: inset 0 0 0 1px var(--gd-acc); }
.gfm-funds [aria-pressed="true"]::after { content: ""; position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--gd-acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.gfm-freq { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 99px; background: var(--gd-track); }
.gfm-freq button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 6px 18px; border: 0; border-radius: 99px; background: transparent; font-size: .9375rem; font-weight: 700; color: var(--gd-title); white-space: nowrap; transition: background-color .2s var(--ease), color .2s var(--ease); }
.gfm-freq button[aria-pressed="true"] { background: var(--gd-title); color: #fff; }
.gfm-freq em { font-style: normal; padding: 2px 8px; border-radius: 99px; background: var(--gd-badge); color: var(--gd-ink); font-size: .6875rem; font-weight: 700; }
.gfm-amts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.gfm-amts button { min-height: 54px; padding: 6px; border: 2px solid var(--gd-line); border-radius: var(--gd-r); background: var(--gd-tile); font-family: var(--gd-head); font-size: 1.25rem; color: var(--gd-title); font-variant-numeric: normal; transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease), transform .16s var(--ease); }
.gfm-amts button:hover { border-color: var(--gd-acc); }
.gfm-amts button:active { transform: scale(.97); }
.gfm-amts button[aria-pressed="true"] { border-color: var(--gd-acc); background: var(--gd-acc); color: #fff; }
.gfm-other { position: relative; display: grid; min-width: 0; }
.gfm-other span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-family: var(--gd-head); font-size: 1.0625rem; color: var(--gd-muted); pointer-events: none; }
.gfm-other input { width: 100%; min-height: 54px; padding: 0 8px 0 26px; border: 2px solid var(--gd-line); border-radius: var(--gd-r); background: var(--gd-tile); font: inherit; font-family: var(--gd-head); font-size: 1.0625rem; color: var(--gd-title); -moz-appearance: textfield; }
.gfm-other input { border-color: var(--gd-field); }
.gfm-other input::-webkit-outer-spin-button, .gfm-other input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gfm-other input::placeholder { font-family: var(--font); font-size: .875rem; font-weight: 600; color: var(--gd-muted); }
.gfm-other input:focus { outline: none; border-color: var(--gd-acc); background: #fff; }
.gfm-other input:focus-visible { outline: 2px solid var(--gd-focus); outline-offset: 2px; }
.gfm-top { display: flex; align-items: center; gap: .65rem; padding-right: 5.5rem; }
.gfm-logo { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--gd-acc); color: #f3e9d7; box-shadow: inset 0 0 0 2px #f3e9d7, 0 0 0 1.5px var(--gd-acc); font-family: var(--gd-head); font-size: .875rem; letter-spacing: .02em; }
.gfm-org { font-family: var(--gd-head); font-weight: 400; font-size: 1.25rem; line-height: 1.2; color: var(--gd-title); }
.gfm-year { min-height: 1.4em; margin-top: 10px; font-size: .8125rem; line-height: 1.4; color: var(--gd-muted); font-variant-numeric: normal; }
.gfm-impact { display: flex; align-items: flex-start; gap: 10px; min-height: 1.45em; margin-top: 8px; font-size: .9375rem; line-height: 1.4; color: var(--gd-ink); }
.gfm-impact::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: .4em; border-radius: 50%; background: var(--gd-acc); }
.gform[data-brand="ministry"] .gform__fees { padding: 11px 14px; border-radius: var(--gd-r); background: #f6f1ea; font-size: .875rem; color: var(--gd-muted); }
.gform[data-brand="ministry"] .gform__fees b { color: var(--gd-ink); }
.gfm-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.gform[data-brand="ministry"] .gform__give { min-height: 54px; padding: 0 26px; border-radius: 99px; font-size: 1rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 12px 24px -12px rgba(16, 24, 40, .45); }
.gfm-secure { display: flex; align-items: center; gap: 6px; font-size: .78125rem; color: var(--gd-muted); }
.gfm-secure svg { width: 14px; height: 14px; flex: none; }

/* Northside Arts: a night-blue poster, big numerals, underlined choices, square corners */
.gform[data-brand="arts"] {
  --gd-bg: #21184d; --gd-ink: #ffffff; --gd-muted: rgba(255, 255, 255, .74); --gd-line: rgba(255, 255, 255, .24); --gd-field: rgba(255, 255, 255, .6); --gd-tickbg: transparent;
  --gd-acc: #ffcd3c; --gd-acc-ink: #21184d; --gd-ex-bg: #ffcd3c; --gd-ex-ink: #21184d; --gd-focus: #ffcd3c; --gd-r: 2px; --gd-head: var(--font); --gd-head-w: 800;
  max-width: 400px;
}
.gform[data-brand="arts"] .gform__card { background: var(--gd-bg); border-radius: 4px; box-shadow: 0 2px 4px rgba(10, 8, 30, .1), 0 22px 44px -16px rgba(10, 8, 30, .5); }
.gform[data-brand="arts"] .gform__ex { border-radius: 2px; }
.gfa-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1.25rem; border-bottom: 3px solid var(--gd-acc); }
.gfa-top b { font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.gform[data-brand="arts"] .gform__main { display: grid; gap: 1rem; padding: 1.15rem 1.25rem 1.25rem; }
.gfa-title { font-size: 2.125rem; font-weight: 800; line-height: .98; letter-spacing: -.01em; text-transform: uppercase; color: #fff; text-wrap: balance; }
.gfa-goal { display: grid; gap: .45rem; }
.gfa-goal p { font-size: .8125rem; color: var(--gd-muted); }
.gfa-goal strong { color: var(--gd-acc); font-weight: 800; font-variant-numeric: normal; }
.gfa-goal .gform__bar { height: 8px; background: rgba(255, 255, 255, .14); }
.gfa-freq { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--gd-line); }
.gfa-freq button { min-height: 44px; padding: 0; border: 0; background: transparent; font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gd-muted); transition: color .2s var(--ease); }
.gfa-freq button[aria-pressed="true"] { color: #fff; }
.gfa-freq__ind { position: absolute; left: 0; bottom: -2px; width: 50%; height: 3px; background: var(--gd-acc); transition: transform .3s var(--ease); }
.gfa-freq[data-on="monthly"] .gfa-freq__ind { transform: translateX(100%); }
.gfa-amts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--gd-line); }
.gfa-amts button { min-height: 58px; padding: 0; border: 0; border-left: 1px solid var(--gd-line); background: transparent; color: #fff; font-size: 1.125rem; font-weight: 800; font-variant-numeric: normal; transition: background-color .18s var(--ease), color .18s var(--ease); }
.gfa-amts button:first-child { border-left: 0; }
.gfa-amts button:hover { background: rgba(255, 255, 255, .08); }
.gfa-amts button[aria-pressed="true"] { background: var(--gd-acc); color: var(--gd-acc-ink); }
.gfa-impact { min-height: 3.2em; padding-top: .8rem; border-top: 1px dashed var(--gd-line); font-size: .9375rem; line-height: 1.45; color: #fff; }
.gform[data-brand="arts"] .gform__tick { border-radius: 0; }
.gform[data-brand="arts"] .gform__fees { color: var(--gd-muted); }
.gform[data-brand="arts"] .gform__give { justify-content: space-between; width: 100%; padding: 0 1.1rem; border-radius: 0; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.gfa-express { text-align: center; font-size: .78125rem; color: var(--gd-muted); }
.gform[data-brand="arts"] .gform__ok { border-radius: 0; }
.gform[data-brand="arts"] .gform__thanks { text-transform: uppercase; }

.ghero { position: relative; overflow: clip; background: var(--navy-900); color: var(--on-dark-muted); padding: clamp(2.25rem, 4vw, 2.75rem) 0 clamp(2.75rem, 4.5vw, 3.25rem); isolation: isolate; }
.ghero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(42% 60% at 86% 80%, rgba(45, 191, 170, .14), transparent 70%); }
.ghero__grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.ghero h1 { color: var(--white); font-size: clamp(2.625rem, 4.6vw, 4rem); }
.ghero .lead { margin-top: var(--s-5); color: rgba(255,255,255,.8); max-width: 36ch; }
.ghero .btn-row { margin-top: var(--s-6); display: grid; grid-template-columns: minmax(0, 1fr); max-width: 22rem; }
/* the example form on its own, floating on the navy; one height for all three designs */
.ghero__show { width: 100%; max-width: 640px; justify-self: center; }
.ghero__form { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; }
.ghero__form .gform { margin: 0 auto; }
.ghero__examples { margin-bottom: 1.25rem; }
.ghero__examples p { margin-bottom: .65rem; font-size: var(--fs-sm); color: var(--on-dark-muted); text-align: center; }
.ghero__ctl { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.ghero__pause { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .85); cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); }
.ghero__pause[hidden] { display: none; }
.ghero__pause svg { width: 12px; height: 12px; }
.ghero__i-play, .ghero__pause.is-paused .ghero__i-pause { display: none; }
.ghero__pause.is-paused .ghero__i-play { display: block; }
@media (hover: hover) and (pointer: fine) { .ghero__pause:hover { border-color: rgba(255, 255, 255, .7); color: var(--white); } }
.ghero__examples .seg button { min-height: 40px; padding: 0 .95rem; }

/* ── Giving forms: no platform in the middle, film 2 in the page ── */
.gfilm { margin: var(--s-7) 0 0; }
/* the wide film runs edge to edge of the content, like every other full-width block */
.gfilm .fp[data-format="wide"] { max-width: none; }
.gfilm__player:empty { aspect-ratio: 16 / 9; border-radius: 16px; background: var(--navy-900); }
@media (max-width: 640px) { .gfilm__player:empty { aspect-ratio: 4 / 5; } }
/* phones (the upright cut): the play button and its label wait in the empty top right, beside the phone,
   so they cover neither the payment account card nor the title */
.gfilm .fp[data-format="4x5"] .fp__start { justify-items: end; align-content: start; padding: 7% 6% 0 0; }

/* ═══ Responsive ═══ */
@media (max-width: 1100px) {
  .ghero__grid { grid-template-columns: minmax(0, 1fr); }
  .ghero__copy { max-width: 640px; }
}
@media (max-width: 1080px) {
  .nav__links a { padding: .45rem .55rem; }
}
/* ── One second-column edge (round 20). Text with supporting content, and every two-column checklist,
   sits on the shared 6fr/5fr columns with the --s-8 gap, so column 2 starts where a split head's lead
   starts. Sibling pairs of one kind (two quotes, two lanes, two money figures) stay equal halves. ── */
@media (min-width: 961px) {
  .checks:not(.checks--1), .svc, .promise, .founder, .caseband, .words--2, .writebox, .hero__row, .phero__grid, .case__top { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--s-8); }
  .checks { max-width: none; }
  .case__foot .checks { grid-template-columns: minmax(0, 1fr); }
  .svc__ex { justify-items: stretch; }
  .svc .ui { max-width: none; }
  /* the giving-forms hero buttons sit side by side like every other hero; its copy column widens to fit them */
  .ghero__grid { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); }
  .ghero .btn-row { display: flex; flex-wrap: wrap; max-width: none; }
}
@media (max-width: 960px) {
  /* two-up: figures share a row, words share a row; a word that wraps grows upward */
  .jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .nav__panel { position: absolute; left: 0; right: 0; top: var(--nav-h); background: var(--navy-950); border-bottom: 1px solid var(--line-dark); padding: .5rem var(--gutter) 1.5rem; }
  .nav.is-open .nav__panel { display: grid; }
  .nav__panel a:not(.btn) { display: flex; align-items: center; min-height: 54px; border-bottom: 1px solid var(--line-dark); color: var(--white); text-decoration: none; font-size: 1.0625rem; font-weight: 500; }
  .nav__panel a[aria-current] { color: var(--teal-300); }
  .nav__panel .btn { margin-top: 1.25rem; }
  .hero__row, .phero__grid, .founder, .fees, .caseband, .book, .writebox, .case__top, .head--split, .svc, .npgive, .promise, .anno { grid-template-columns: minmax(0, 1fr); }
  .figure { max-width: 520px; }
  .results__grid { grid-template-columns: minmax(0, 1fr); }
  .pair, .np { grid-template-columns: minmax(0, 1fr); }
  .pair::before { width: 100%; }
  .pair__ex, .svc__ex, .npgive__form { justify-items: start; place-items: start; }
  .words { grid-template-columns: minmax(0, 1fr); }
  .quotes, .lanes { grid-template-columns: minmax(0, 1fr); }
  .lane + .lane { margin-top: var(--s-7); }
  .case__res { text-align: left; }
  /* the flow stands up, its line down the left, like the steps */
  .flow { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
  .flow::before, .flow::after { top: calc(var(--s-7) + 18px); bottom: calc(var(--s-7) + 18px); left: 17px; right: auto; width: 2px; height: auto; }
  .flow::after { transform-origin: center top; }
  .js .flow:not(.is-drawn)::after { transform: scaleY(0); }
  .flow li { padding: 0 0 0 3.25rem; min-height: 36px; }
  .case__foot { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > div:first-child { grid-column: 1 / -1; }
  .founder__photo { max-width: 460px; }
  .trace { justify-self: start; }
  /* steps run down the left side */
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
  .steps::before, .steps::after { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; }
  .steps::after { transform-origin: center top; }
  .js .steps:not(.is-drawn)::after { transform: scaleY(0); }
  .steps li { padding: 0 0 0 4rem; min-height: 44px; }
  .steps li > h3 { padding-top: .35rem; }
}
@media (max-width: 640px) {
  .mathcmp__row { grid-template-columns: minmax(0, 1fr); }
  .gflow { flex-direction: column; align-items: stretch; }
  .gflow__link { flex: 0 0 22px; width: 2px; height: 22px; align-self: center; }
  .gflow.is-playing .gflow__link { transform-origin: center top; animation-name: gfDrawDown; }
  .js .gflow:not(.is-played) .gflow__link { transform: scaleY(0); }
  .gflow__link::after { right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
  .checks { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
  :root { --nav-h: 64px; }
  body { font-size: 1rem; }
  .nav__logo img { width: 124px; }
  .btn-row .btn { flex: 1 1 100%; }
  .phero h1, .ghero h1 { text-wrap: pretty; }
  .head--center { text-align: left; }
  .tools__in { grid-template-columns: minmax(0, 1fr) auto; }
  .tools__h { grid-column: 1; grid-row: 1; }
  .tools__pause { grid-column: 2; grid-row: 1; }
  .tools__view { grid-column: 1 / -1; grid-row: 2; }
  .footer__grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .bar { grid-template-columns: minmax(0, 1fr) auto; gap: .4rem .75rem; }
  .bar__track { grid-column: 1 / -1; grid-row: 2; height: 30px; }
  .gf-fees .bar { grid-template-columns: minmax(0, 1fr) auto; }
  .gf-fees .bar__val { text-align: right; }
  .gf-fees .bar__val small { max-width: 22ch; margin-left: auto; }
  .faq details > div { padding-right: 0; }
  .runin li { display: block; }
  .runin li + li { margin-top: .3em; }
  .runin li::after { content: none !important; }
  .ghero__examples .seg { display: flex; flex: 1 1 auto; border-radius: 18px; }
  .ghero__examples .seg button { flex: 1 1 auto; padding: 0 .5rem; font-size: .875rem; }
  .ghero__examples .seg__ind { border-radius: 14px; }
}
@media (max-width: 560px) {
  .gfm-funds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gfm-amts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gfm-other { grid-column: span 2; }
  .gfm-freq { display: grid; grid-auto-columns: minmax(0, 1fr); }
  .gfm-freq button { padding: 6px 10px; }
  .gfm-impact { min-height: 2.9em; }
  .gform[data-brand="ministry"] .gform__give { width: 100%; }
  .gfa-title { font-size: 1.875rem; }
}
@media (max-width: 420px) {
  .ui__bar, .ui__foot { padding-left: 14px; padding-right: 14px; }
  .ui__list li { padding-left: 14px; padding-right: 14px; gap: 10px; }
  .ui__bars { padding-left: 14px; padding-right: 14px; }
  .ui__bars li { grid-template-columns: 92px minmax(0, 1fr) 24px; gap: 10px; }
  .ui__foot { flex-wrap: wrap; }
  .ui__map { padding: 12px 12px 14px; }
  .ui__group { padding: 5px; }
  .ui__step { padding: 9px 10px; font-size: 13.5px; }
  .ui__step em { font-size: 12.5px; }
  .ui__group > .ui__step:first-of-type::before { left: 24px; top: -24px; height: 23px; }
  .ui__group > .ui__step + .ui__step::before { left: 24px; }
  .ui__map > .ui__group + .ui__step::before { left: 29px; top: -20px; height: 19px; }
}
@media (max-width: 400px) {
  .gform[data-brand="food"] .gform__main, .gform[data-brand="arts"] .gform__main { padding-left: 1rem; padding-right: 1rem; }
  .gff-row { grid-template-columns: 3.5rem minmax(0, 1fr) 18px; padding: .45rem .7rem; }
  .gfa-amts button { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* the service rows rest the same way whether or not they were reached: each with its teal line */
  .js .pair:not(.is-on)::before { transform: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .tools__track { animation: none; display: block; width: auto; }
  .tools__view { -webkit-mask-image: none; mask-image: none; }
  .tools__list { flex-wrap: wrap; gap: .5rem 1.75rem; padding-right: 0; }
  .tools__list[aria-hidden="true"], .js .tools__pause { display: none; }
  a:hover > .link::after, .link:hover::after, .results__card:focus-visible > .link::after { transform: none; }
}