/* ==========================================================================
   Giving page — page-specific polish (loaded after main.css)
   Everything here is scoped to the Giving page's own section classes.
   ========================================================================== */

/* ---------- Hero: the key number reads first ---------- */
/* a deeper mid-scrim + soft shadow keeps the headline legible where it crosses
   the pale horizon and the lit tower; the 10% takes the brand's bright teal
   instead of fading into the sky in pale mist */
.gv-hero::after{background:linear-gradient(180deg,rgba(13,47,45,.52) 0%,rgba(13,47,45,.38) 45%,rgba(13,47,45,.66) 100%)}
.gv-hero h1{text-shadow:0 2px 30px rgba(13,47,45,.45)}
.gv-hero h1 em{color:var(--pop)}

/* scroll cue: a hairline ring (a true circle) + shadow so it reads as a deliberate
   control over the busy aerial footage; main.css keeps the reduced-motion stop */
.gv-hero .gv-cue{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(247,245,240,.5);opacity:1;
  filter:drop-shadow(0 1px 8px rgba(13,47,45,.5));
}
.gv-hero .gv-cue svg{width:26px;height:26px;margin-top:-3px}

/* ---------- Organizations we support: logo tiles ---------- */
/* every row the same height: the (hidden) hover copy sized the rows unevenly —
   UrbanPromise's longer description made row one ~45px taller than row two */
.gv-orgs .logo-tiles{grid-auto-rows:1fr}
/* the tile is a one-column grid; its implicit auto column sized itself to the
   percentage-width logo and pushed the white box 18px past the tile on touch
   layouts (390 phone, 1024 tablet) — pin the column to the tile's own width */
.gv-orgs .logo-tile{grid-template-columns:minmax(0,1fr)}
.gv-orgs .logo-tile__desc{text-wrap:pretty}

/* optical balance: size each mark by its visual weight, not its file's box.
   --lw is the image width as a % of the tile, tuned at the 4-up desktop tile
   (~311px); the px cap stops marks ballooning in the wider 2-up tablet tiles.
   Heavy, solid marks (Highlands' red shield, UrbanPromise's skyline) sit smaller;
   light script / thin wordmarks sit larger. */
.gv-orgs .logo-tile__logo img{
  --lw:62;
  width:min(calc(var(--lw) * 1%), calc(var(--lw) * 3.3px));
  height:auto;max-width:none;max-height:none;
}
.gv-orgs img[src*="ministry-love-one"]{--lw:66}
.gv-orgs img[src*="ministry-compassion"]{--lw:57}
.gv-orgs img[src*="ministry-equip"]{--lw:58}
.gv-orgs img[src*="ministry-urban-promise"]{--lw:28}
.gv-orgs img[src*="ministry-highlands"]{--lw:27}
.gv-orgs img[src*="ministry-illuminations"]{--lw:66}
.gv-orgs img[src*="ministry-new-story"]{--lw:63}
.gv-orgs img[src*="logo-forothers"]{--lw:61}

/* ==========================================================================
   Our charitable foundation — rebuilt 2026-09-23 (client: "complete makeover,
   make it more like the home page"). Two bands between the pinned city photo
   and the closing CTA:
   · .gv-found  a pine sheet that slides up over the photo: the three steps as one
                sequence of big italic numerals joined by a line that draws as you
                scroll (giving.js writes --p), each numeral lighting as it's reached.
                The numerals themselves never fade in or out: their opaque pine
                knockouts are always there, so the line only ever shows between them.
   · .gv-ways   paper: "How we show up for each other." as three garden beds. Each group name stands on
                its own ground line with a real engraving (the homepage garden's
                Besler / Curtis plates, in pine ink) growing from it as the beds
                scroll in; every item and its description is plain, visible text.
   No JS, or reduced motion: --p stays 1 — line drawn, numerals lit, plants grown, still.
   ========================================================================== */

/* ---------- the pine band ---------- */
/* main.css paints every section after the city band paper; this one is the pine sheet */
/* the Charlotte band scrolls with the page like any other section (client, 2026-10-01): only the page's
   top hero pins. main.css pins it (position:sticky); this undoes that. */
.gv-band--city{position:relative}
/* its headline keeps the two lines it is written in from 700px (Safari was balancing it into four) */
@media (min-width:700px){.gv-band--city .d2{max-width:none;text-wrap:wrap;white-space:nowrap}}
.gv-found{padding-block:clamp(5rem,8.5vw,8.75rem)}
.gv-found::before,.gv-ways::before{display:none}           /* the change of ground is the divider */
.gv-found .container--wide{display:grid;justify-items:center;gap:clamp(3.4rem,6.2vw,6rem)}
.gv-found__title{text-align:center}

/* the sequence: three centred columns, numeral over title, one line running 1 → 2 → 3 */
.gv-flow{
  --p:1;
  --nf:clamp(6rem,13vw,13.5rem);                            /* numeral size */
  --gap:clamp(1.6rem,3.4vw,3.6rem);
  --cw:calc((100% - 2 * var(--gap)) / 3);                    /* one column */
  position:relative;width:100%;max-width:1480px;margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--gap);
}
/* the track (faint, always there) and the drawn line on top of it, from the middle of 1 to the middle of 3,
   through the figures' middle */
.gv-flow::before,.gv-flow::after{
  content:'';position:absolute;top:calc(var(--nf) * .5);height:1px;
  left:calc(var(--cw) / 2);width:calc(2 * (var(--cw) + var(--gap)));
  pointer-events:none;
}
.gv-flow::before{background:var(--line-dark)}
.gv-flow::after{background:rgba(143,217,203,.62);transform-origin:0 50%;transform:scaleX(var(--p))}   /* --pop, softened */
.gv-flow__step{position:relative;display:grid;align-content:start;justify-items:center;text-align:center;gap:clamp(1.1rem,2vw,1.9rem)}
.gv-flow .n{
  position:relative;z-index:1;display:block;
  font-family:var(--f-serif);font-optical-sizing:auto;font-style:italic;font-weight:300;
  font-size:var(--nf);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--pop);
  /* a knockout of the band's own pine, so the line reads as running between the figures */
  background:var(--pine);padding-inline:.3em;
  transition:color .7s var(--ease);
}
.gv-flow h3{
  margin:0;max-width:12em;
  font-family:var(--f-serif);font-optical-sizing:auto;font-weight:460;
  font-size:clamp(1.6rem,2.6vw,2.6rem);line-height:1.12;letter-spacing:-.02em;
  color:var(--paper);text-wrap:balance;
}
/* the titles rise in left to right, the way the line will run */
@media (min-width:701px){
  .js .gv-flow__step:nth-child(2) h3.reveal{transition-delay:.12s}
  .js .gv-flow__step:nth-child(3) h3.reveal{transition-delay:.24s}
}
/* while giving.js scrubs the line, a figure is dim until the line reaches it — dimmed by colour
   only, so its knockout stays opaque and the line never shows through the figure */
.gv-flow.is-scrub .n{color:#496F6E;color:color-mix(in srgb,var(--sage) 50%,var(--pine))}
.gv-flow.is-scrub[data-at="1"] .gv-flow__step:nth-child(-n+1) .n,
.gv-flow.is-scrub[data-at="2"] .gv-flow__step:nth-child(-n+2) .n,
.gv-flow.is-scrub[data-at="3"] .n{color:var(--pop)}

/* phones: the sequence turns and runs down the page */
@media (max-width:700px){
  /* smaller figures with no knockout padding, and room between the rows, so each connector
     runs a good 60–70px and the drawing line reads on a phone too */
  .gv-flow{
    --nf:clamp(3.4rem,15vw,3.9rem);--col:calc(var(--nf) * .64);
    grid-template-columns:minmax(0,1fr);gap:clamp(3.8rem,17vw,4.4rem) 0;
  }
  .gv-found .container--wide{justify-items:start;gap:clamp(2.6rem,11vw,3.4rem)}
  .gv-found__title{text-align:left}
  .gv-flow::before,.gv-flow::after{
    left:calc(var(--col) / 2);top:calc(var(--nf) * .5);bottom:calc(var(--nf) * .5);
    width:1px;height:auto;
  }
  .gv-flow::after{transform-origin:50% 0;transform:scaleY(var(--p))}
  .gv-flow__step{grid-template-columns:var(--col) minmax(0,1fr);align-items:center;column-gap:clamp(1rem,4.5vw,1.5rem);justify-items:stretch;text-align:left}
  .gv-flow .n{padding:0;text-align:center}
  .gv-flow h3{font-size:clamp(1.45rem,6.4vw,1.8rem);max-width:none}
}

/* ---------- our purpose (client, 2026-10-07): the page's opening statement, before the beds ----------
   The lead in the homepage mission statement's cut; the two supporting lines beneath it as a pair, split by a hairline. */
.gv-purpose{padding-block:clamp(5rem,9vw,8.5rem) clamp(4.5rem,8vw,7.5rem)}
.gv-purpose__lead{
  margin:0 auto;max-width:min(1180px,100%);text-align:center;text-wrap:balance;color:var(--ink);
  font-family:var(--f-serif);font-optical-sizing:auto;font-weight:420;
  font-size:clamp(1.55rem,2.75vw,2.75rem);line-height:1.24;letter-spacing:-.016em;
}
.gv-purpose__lead em{font-style:italic;color:var(--teal);letter-spacing:-.008em}
.gv-purpose__more{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:min(1040px,100%);margin:clamp(2.6rem,4.6vw,4rem) auto 0;
}
.gv-purpose__more p{
  margin:0;padding-inline:clamp(1.4rem,3.4vw,3.2rem);text-align:center;text-wrap:balance;
  font-size:clamp(1.05rem,.95rem + .35vw,1.25rem);line-height:1.55;color:var(--ink-soft);
}
.gv-purpose__more p+p{border-left:1px solid var(--line)}
@media (max-width:700px){
  .gv-purpose__more{grid-template-columns:minmax(0,1fr);row-gap:1.4rem}
  .gv-purpose__more p{padding-inline:0}
  .gv-purpose__more p+p{border-left:0;border-top:1px solid var(--line);padding-top:1.4rem}
}
@media (prefers-reduced-motion:no-preference){.js .gv-purpose__more p+p.reveal{transition-delay:.12s}}

/* ---------- the paper band: four garden beds ---------- */
.gv-ways{padding-block:clamp(5.5rem,9.5vw,9rem)}
.gv-ways__title{margin-bottom:clamp(3.4rem,6.6vw,6rem);font-size:clamp(2rem,3.85vw,4.2rem);line-height:1.05}   /* the page's first headline: one line from 701px, a step above .d2 */
@media (min-width:701px){.gv-ways__title{white-space:nowrap}}
@media (min-width:701px){.gv-ways__title{text-align:center}}   /* agrees with the centred pine band above it */
.gv-ways__grid{
  --ph:clamp(170px,16vw,270px);                             /* plant height */
  --rg:clamp(1.55rem,2.3vw,2.1rem);                          /* between the needs */
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 clamp(2.2rem,4.6vw,5rem);
}
.gv-bed{
  --p:1;                                                     /* written by giving.js from this bed's own position */
  /* its growth, a little behind the bed to its left when they stand in a row */
  --t:clamp(0,(var(--p) - var(--i,0) * .1) / .6,1);
  --g:calc(var(--t) * var(--t) * (3 - 2 * var(--t)));
  min-width:0;
  /* head + two needs; subgrid lines the needs up in rows across the beds (01 · 03 · 05, 02 · 04 · 06) */
  display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:var(--rg);
}
/* the group name and its plant stand on one ground line (pine, the engravings' ink): the name at the
   left, the plant at the right end. The plant takes what width the name leaves (never under a third
   of the bed) and scales down inside it rather than ever running into the name. */
.gv-bed__head{
  position:relative;min-height:var(--ph);
  display:flex;align-items:flex-end;gap:clamp(.6rem,1vw,1rem);
}
.gv-bed__head::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--pine);
  transform-origin:0 50%;transform:scaleX(clamp(0,var(--t) * 2.2,1));
}
.gv-bed__name{
  position:relative;z-index:1;flex:0 1 auto;margin:0;padding-bottom:clamp(.7rem,1vw,.95rem);
  font-family:var(--f-serif);font-optical-sizing:auto;font-style:italic;font-weight:440;
  font-size:clamp(1.55rem,2vw,2rem);line-height:1.1;letter-spacing:-.014em;color:var(--teal);
  text-wrap:balance;
}
.gv-bed__plant{
  flex:1 1 0;min-width:34%;align-self:stretch;
  display:flex;justify-content:flex-end;align-items:flex-end;
  margin-bottom:1px;
  /* cut at the ground line: each plate's baked-in soft base is sunk below it (--sink) and clipped,
     so the stems stand on the line instead of dissolving just above it */
  clip-path:inset(-32px -32px 0 -32px);
  transform-origin:70% 100%;
  transform:scale(calc(.3 + .7 * var(--g)),calc(.12 + .88 * var(--g)));  /* the stem leads, then it fills out */
  opacity:clamp(0,var(--t) * 4,1);
  pointer-events:none;user-select:none;
}
.gv-bed__plant img{
  display:block;flex:none;width:auto;height:auto;max-width:100%;max-height:var(--ph);transform-origin:50% 100%;
  translate:0 var(--sink,0%);
  animation:gv-sway var(--sd,6.5s) ease-in-out calc(var(--i,0) * -1.7s) infinite alternate paused;
}
.gv-ways.is-live .gv-bed__plant img{animation-play-state:running}
@keyframes gv-sway{from{rotate:-1.1deg}to{rotate:1.1deg}}
.gv-bed:nth-child(1){--i:0;--sd:7.2s}                    /* --i: place in its row (the growth stagger) */
.gv-bed:nth-child(2){--i:1;--sd:8s}
.gv-bed:nth-child(3){--i:2;--sd:5.6s}
/* how deep each plate's faded base runs (to ~80% ink), as a share of its height; the oat grass
   has a solid tuft at its foot and needs none */
/* the beds use light, upright line plates (oat grass, columbine) to match the tulips and
   oat grass on the right — the lily and crown imperial were far denser, and the nodding
   fritillary read as wilted (client requests 2026-09-23) */
.gv-bed__plant img[src*="aquil"]{--sink:4.6%}
.gv-bed__plant img[src*="tulC"]{--sink:7%}

/* the needs: a hanging number and the category (CRA HR asked, 2026-09-24, for only the categories the
   program confirms and no wording that suggests any expense is automatically covered) */
.gv-bed__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:var(--rg);
}
@supports not (grid-template-rows:subgrid){
  .gv-bed{display:block}
  .gv-bed__list{margin-top:var(--rg);grid-template-rows:none}
}
.gv-bed__list li{display:grid;grid-template-columns:2.1em minmax(0,1fr);column-gap:.55rem;row-gap:.4rem;align-items:baseline;align-content:start}
.gv-bed__list .n{
  grid-row:1 / span 2;align-self:start;padding-top:.28em;
  font-size:.95rem;line-height:1.2;font-weight:var(--w-ui);color:var(--teal);
  font-variant-numeric:lining-nums tabular-nums;
}
.gv-bed__list h4{
  margin:0;font-family:var(--f-serif);font-optical-sizing:auto;font-weight:460;   /* the site's item-title weight (as in the criteria), not the bold name weight */
  font-size:clamp(1.2rem,1.5vw,1.5rem);line-height:1.25;letter-spacing:-.01em;color:var(--ink);   /* the categories stand alone now, so a size up */
  text-wrap:balance;
}
.gv-bed__list p{margin:0;color:var(--ink-soft);font-size:1.02rem;line-height:1.55;text-wrap:pretty}

/* three beds across down to small tablets, then one per row */
@media (max-width:1100px){.gv-ways__grid{--ph:clamp(150px,19vw,220px)}}
@media (max-width:860px){
  .gv-ways__grid{grid-template-columns:minmax(0,1fr);--ph:clamp(150px,30vw,200px)}
  .gv-bed:nth-child(n+2){margin-top:clamp(3rem,7vw,4rem)}
  .gv-bed{--t:clamp(0,var(--p) / .6,1)}
}
@media (max-width:640px){
  .gv-ways__grid{grid-template-columns:minmax(0,1fr);--ph:min(160px,42vw)}
  .gv-bed:nth-child(n+2){margin-top:3.4rem}
  .gv-bed{--t:clamp(0,var(--p) / .6,1)}                       /* stacked: no stagger, each bed grows as it arrives */
}

@media (prefers-reduced-motion:reduce){
  .gv-flow,.gv-bed{--p:1 !important}
  .gv-bed__plant img{animation:none}
}

/* the program note under the beds (from CRA HR's guidance, 2026-09-24) */
/* the note: small print on two even lines from 1000px (client), wrapping freely below */
.gv-ways__note{max-width:60rem;margin:clamp(2.8rem,5vw,4.2rem) auto 0;text-align:center;color:var(--ink-soft);font-size:.95rem;line-height:1.6;text-wrap:balance}
@media (max-width:700px){.gv-ways__note{text-align:left;margin-inline:0}}