/* EDGE Worldwide · Initiatives page
   Scoped to #page-initiatives and limited to the existing palette. */

#page-initiatives{overflow:clip}
#page-initiatives>.rd>section:first-child{padding-top:clamp(68px,7vw,96px)!important;padding-bottom:clamp(54px,5.5vw,76px)}
#page-initiatives>.rd>section:first-child .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(360px,7fr);gap:22px clamp(48px,7vw,96px);align-items:start}
#page-initiatives>.rd>section:first-child .eyrow{grid-column:1;margin:0}
#page-initiatives>.rd>section:first-child .statement{grid-column:1;max-width:10ch;font-size:clamp(46px,6vw,76px);line-height:.98;letter-spacing:-.036em;margin:0}
#page-initiatives>.rd>section:first-child .two{grid-column:2;grid-row:1/span 2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);margin-top:0!important;padding-left:clamp(28px,3.4vw,48px);border-left:1px solid var(--f-line-d)}
#page-initiatives>.rd>section:first-child .two .stack{min-width:0}

#page-initiatives>.rd>section:nth-child(2){padding-top:clamp(52px,5.5vw,76px);padding-bottom:clamp(68px,7vw,96px);background:var(--f-parch)}
#page-initiatives .paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
#page-initiatives .path{min-width:0;padding:clamp(26px,3vw,42px);border:1px solid var(--f-line-d);border-top:1px solid var(--f-line-d);background:transparent;box-shadow:none;transition:transform .25s ease,border-color .25s ease}
#page-initiatives .path::before{content:none}
#page-initiatives .path:hover,#page-initiatives .path:focus-within{transform:translateY(-3px);border-color:var(--f-terra);background:transparent;box-shadow:none}
#page-initiatives .path:hover .path-h,#page-initiatives .path:focus-within .path-h{color:var(--f-forest)}
#page-initiatives .path:hover p,#page-initiatives .path:focus-within p{color:var(--f-body)}
#page-initiatives .path:hover .tlink,#page-initiatives .path:focus-within .tlink{color:var(--f-forest);border-color:var(--f-forest)}
#page-initiatives .path .path-h{max-width:18ch;font-size:clamp(25px,2.6vw,36px);line-height:1.08;margin-bottom:18px}
#page-initiatives .path p{font-family:var(--rsans);font-size:14.5px;line-height:1.75;color:var(--f-body)}
#page-initiatives .path p+p{margin-top:12px}
#page-initiatives .path .tlink{margin-top:auto;padding-top:24px;align-self:flex-start}
#page-initiatives .path .imgslot{width:100%;min-height:300px;margin:28px 0 0!important;overflow:hidden;border:0;background:var(--f-sage)}
#page-initiatives .path .imgslot img{width:100%;height:100%;min-height:inherit;object-fit:cover;display:block}
#page-initiatives .path:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,6fr) minmax(340px,6fr);gap:20px clamp(40px,6vw,82px);align-items:start}
#page-initiatives .path:first-child .path-h,#page-initiatives .path:first-child>p,#page-initiatives .path:first-child>.tlink{grid-column:1}
#page-initiatives .path:first-child .imgslot{grid-column:2;grid-row:1/span 4;height:100%;min-height:340px;margin:0!important}
#page-initiatives .path:first-child>.tlink{margin-top:0;padding-top:12px}
#page-initiatives .news-note{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:clamp(42px,5vw,64px);padding:clamp(28px,3vw,40px) 0;border:0;border-top:1px solid var(--f-line-d);border-bottom:1px solid var(--f-line-d);background:transparent}
#page-initiatives .news-note p:first-child{max-width:68ch}

@media(max-width:900px){
  #page-initiatives>.rd>section:first-child .wrap{grid-template-columns:1fr;gap:30px}
  #page-initiatives>.rd>section:first-child .eyrow,#page-initiatives>.rd>section:first-child .statement,#page-initiatives>.rd>section:first-child .two{grid-column:1;grid-row:auto}
  #page-initiatives>.rd>section:first-child .two{padding:26px 0 0;border-left:0;border-top:1px solid var(--f-line-d)}
  #page-initiatives .path:first-child{grid-template-columns:1fr;gap:30px}
  #page-initiatives .path:first-child .path-h,#page-initiatives .path:first-child>p,#page-initiatives .path:first-child>.tlink,#page-initiatives .path:first-child .imgslot{grid-column:1;grid-row:auto}
  #page-initiatives .path:first-child .imgslot{min-height:clamp(340px,62vw,520px)}
}
@media(max-width:680px){
  #page-initiatives>.rd>section:first-child .two,#page-initiatives .paths{grid-template-columns:1fr}
  #page-initiatives .path:first-child{grid-column:1}
  #page-initiatives .news-note{display:block}
  #page-initiatives .news-note p+p{margin-top:20px}
}
@media(max-width:560px){
  #page-initiatives>.rd>section:first-child .statement{font-size:clamp(40px,13vw,56px)}
  #page-initiatives .path{padding:24px 22px}
  #page-initiatives .path .imgslot,#page-initiatives .path:first-child .imgslot{min-height:300px}
}
@media(prefers-reduced-motion:reduce){
  #page-initiatives .path{transition:none}
  #page-initiatives .path:hover,#page-initiatives .path:focus-within{transform:none}
}

/* ── INITIATIVE ROWS ──
   Full-width stacked rows, so each initiative carries equal weight. All three are now full-width rows on the same
   two-column model the first card already used, alternating image side
   down the page. Layout only — no copy, markup or image was changed. */
#page-initiatives .paths{grid-template-columns:1fr;gap:clamp(34px,4vw,58px)}
#page-initiatives .path,
#page-initiatives .path:first-child{grid-column:1;display:grid;grid-template-columns:minmax(0,6fr) minmax(340px,6fr);gap:18px clamp(40px,6vw,82px);align-items:start;
  padding:clamp(30px,3.4vw,48px) 0;border:0;border-top:1px solid var(--f-line-d)}
#page-initiatives .path:hover,#page-initiatives .path:focus-within{transform:none;border-color:var(--f-line-d)}
#page-initiatives .path .path-h,#page-initiatives .path>p,#page-initiatives .path>.tlink{grid-column:1}
#page-initiatives .path .path-h{max-width:22ch}
#page-initiatives .path>p{max-width:52ch}
#page-initiatives .path .imgslot,
#page-initiatives .path:first-child .imgslot{grid-column:2;grid-row:1/span 6;height:100%;min-height:clamp(340px,30vw,430px);margin:0!important;align-self:stretch}
#page-initiatives .path>.tlink{margin-top:14px;padding-top:0;align-self:start}

/* Alternate: even rows put the photograph on the left. Source order is
   unchanged, so reading order and tab order still follow the markup. */
#page-initiatives .path:nth-child(even){grid-template-columns:minmax(340px,6fr) minmax(0,6fr)}
#page-initiatives .path:nth-child(even) .path-h,
#page-initiatives .path:nth-child(even)>p,
#page-initiatives .path:nth-child(even)>.tlink{grid-column:2}
#page-initiatives .path:nth-child(even) .imgslot{grid-column:1}

/* Hover moves to the photograph rather than the whole card, now that the
   card is a full-width row and a lift would shift the page. */
#page-initiatives .path .imgslot img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
#page-initiatives .path:hover .imgslot img,#page-initiatives .path:focus-within .imgslot img{transform:scale(1.03)}

@media(max-width:900px){
  #page-initiatives .path,
  #page-initiatives .path:first-child,
  #page-initiatives .path:nth-child(even){grid-template-columns:1fr;gap:26px}
  #page-initiatives .path .path-h,#page-initiatives .path>p,#page-initiatives .path>.tlink,
  #page-initiatives .path:nth-child(even) .path-h,#page-initiatives .path:nth-child(even)>p,
  #page-initiatives .path:nth-child(even)>.tlink,
  #page-initiatives .path .imgslot,#page-initiatives .path:nth-child(even) .imgslot{grid-column:1;grid-row:auto}
  #page-initiatives .path .imgslot{min-height:clamp(320px,58vw,480px)}
}
@media(prefers-reduced-motion:reduce){
  #page-initiatives .path .imgslot img{transition:none}
  #page-initiatives .path:hover .imgslot img,#page-initiatives .path:focus-within .imgslot img{transform:none}
}

/* Rows whose copy is a single short paragraph: centre the heading and text as
   a group against the photograph, so they sit in the middle of a 430px image
   instead of against its top edge. align-items alone cannot do this — each
   text element is its own grid item in its own auto row, so it would only
   centre within its own track. Explicit 1fr spacer rows above and below the
   text absorb the leftover height equally, which centres the pair. The Hub
   row keeps top alignment: it has a heading, two paragraphs and a link. */
#page-initiatives .path:nth-child(2),#page-initiatives .path:nth-child(3){align-items:start;grid-template-rows:1fr auto auto 1fr}
#page-initiatives .path:nth-child(2) .path-h,#page-initiatives .path:nth-child(3) .path-h{grid-row:2}
#page-initiatives .path:nth-child(2)>p,#page-initiatives .path:nth-child(3)>p{grid-row:3}
#page-initiatives .path:nth-child(2) .imgslot,#page-initiatives .path:nth-child(3) .imgslot{grid-row:1/-1}
@media(max-width:900px){
  #page-initiatives .path:nth-child(2),#page-initiatives .path:nth-child(3){grid-template-rows:auto}
  #page-initiatives .path:nth-child(2) .path-h,#page-initiatives .path:nth-child(3) .path-h,
  #page-initiatives .path:nth-child(2)>p,#page-initiatives .path:nth-child(3)>p,
  #page-initiatives .path:nth-child(2) .imgslot,#page-initiatives .path:nth-child(3) .imgslot{grid-row:auto}
}

/* ── INITIATIVES HERO ──────────────────────────────────────────────────
   Two columns: statement left, one continuous 58ch measure right, so the
   copy reads straight down without the eye jumping columns mid-thought. */
#page-initiatives>.rd>section:first-child .wrap{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(26px,3vw,40px) clamp(44px,6vw,88px)}
#page-initiatives>.rd>section:first-child .statement{max-width:14ch}
#page-initiatives>.rd>section:first-child .two{grid-template-columns:1fr;gap:0;max-width:58ch}
#page-initiatives>.rd>section:first-child .two .stack+.stack{margin-top:14px}
#page-initiatives>.rd>section:first-child .two .stack p+p{margin-top:14px}
@media(max-width:900px){
  #page-initiatives>.rd>section:first-child .statement{max-width:18ch}
  #page-initiatives>.rd>section:first-child .two{max-width:none}
}

/* Close the gap between the hero and the first initiative row: the hero's
   padding-bottom, the section's padding-top and the row's own padding-top
   were stacking to roughly 200px of empty ground above the first heading. */
#page-initiatives>.rd>section:first-child{padding-bottom:clamp(30px,3vw,44px)!important}
#page-initiatives>.rd>section:nth-child(2){padding-top:clamp(26px,2.6vw,38px)}
#page-initiatives .paths>.path:first-child{padding-top:clamp(24px,2.6vw,36px)}

/* ── Initiatives hero ───────────────────────────────────────────────────
   Photograph as the hero ground, built like the News, Legacy and Approach
   heroes. The scrim is weighted LEFT, where the copy sits, so the right of
   the frame — the student and the map — stays photographic while white text
   keeps a readable ground. The file is close to square, so object-position
   holds the student in frame as the band gets shorter.
   The section is normally the light bone ground, so its own type colours
   are inverted here. */
#page-initiatives .in-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--deep);padding-top:clamp(104px,12vw,160px);padding-bottom:clamp(56px,7vw,96px)}
#page-initiatives .in-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 42%;z-index:0}
#page-initiatives .in-hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(20,30,14,.95) 0%,rgba(20,30,14,.9) 38%,rgba(20,30,14,.66) 64%,rgba(20,30,14,.32) 88%,rgba(20,30,14,.18) 100%),
  linear-gradient(180deg,rgba(20,30,14,.5) 0%,rgba(20,30,14,.34) 50%,rgba(20,30,14,.24) 100%)}
#page-initiatives .in-hero-in{position:relative;z-index:2}
/* Single copy column held to a readable measure. It sits within the left,
   scrimmed half of the frame so the student and map stay visible beside it. */
#page-initiatives .in-hero-copy{max-width:62ch}
@media(min-width:1100px){#page-initiatives .in-hero-copy{max-width:56ch}}
#page-initiatives .in-hero .kicker{color:var(--f-terra-l,#e0a184)}
#page-initiatives .in-hero .h-sec{color:#fff}
#page-initiatives .in-hero .lead{color:rgba(255,255,255,.97)}
#page-initiatives .in-hero .body{color:rgba(255,255,255,.92)}
@media(max-width:820px){
  /* Stacked, the copy covers most of the band, so the wash is vertical and
     the crop tightens on the student. */
  #page-initiatives .in-hero-img{object-position:68% 40%}
  #page-initiatives .in-hero-scrim{background:
    linear-gradient(180deg,rgba(20,30,14,.9) 0%,rgba(20,30,14,.88) 52%,rgba(20,30,14,.82) 100%)}
}

/* Paragraphs inside a .path are flex children with flex:1 in the shared
   footer-of-card rule, so each one grew to fill the column and opened a
   large gap between them. Pin them to their content height and let the
   image take the slack instead. */
#page-initiatives .path p{flex:0 0 auto;margin-bottom:14px}
#page-initiatives .path p:last-of-type{margin-bottom:clamp(18px,2.2vw,26px)}
#page-initiatives .path .imgslot{margin-top:0}
#page-initiatives .path .tlink{margin-top:auto}

/* Negative space in the initiative rows came from three places: the section
   band's own padding, tall image floors, and the 1fr spacer rows that were
   centring the copy against a taller image. The image still leads the row;
   the copy now sits at the top of it. */
#page-initiatives>.rd>section.sec{padding-block:clamp(44px,5vw,78px)}
#page-initiatives .path:nth-child(2),#page-initiatives .path:nth-child(3){grid-template-rows:auto auto 1fr}
#page-initiatives .path:nth-child(2) .path-h,#page-initiatives .path:nth-child(3) .path-h{grid-row:1}
#page-initiatives .path:nth-child(2)>p,#page-initiatives .path:nth-child(3)>p{grid-row:2}
#page-initiatives .path .imgslot,
#page-initiatives .path:first-child .imgslot{min-height:clamp(260px,24vw,340px)}
#page-initiatives .paths{gap:clamp(26px,3vw,42px)}
@media(max-width:860px){
  #page-initiatives .path .imgslot,
  #page-initiatives .path:first-child .imgslot{min-height:clamp(240px,48vw,360px)}
}

/* Mobile re-assertion, placed last on purpose.
   Several .path rules above were appended without a media query after the
   max-width:900px block, so at mobile widths they were winning on source
   order: the image kept grid-column:2 / grid-row:1-span-6 in a layout with
   only one column, and the 1fr spacer row came back. Same specificity, so
   only order fixes it. */
@media(max-width:900px){
  #page-initiatives .path,
  #page-initiatives .path:first-child,
  #page-initiatives .path:nth-child(even),
  #page-initiatives .path:nth-child(2),
  #page-initiatives .path:nth-child(3){grid-template-columns:1fr;grid-template-rows:auto;gap:22px}
  #page-initiatives .path .path-h,
  #page-initiatives .path>p,
  #page-initiatives .path>.tlink,
  #page-initiatives .path .imgslot,
  #page-initiatives .path:first-child .imgslot,
  #page-initiatives .path:nth-child(even) .path-h,
  #page-initiatives .path:nth-child(even)>p,
  #page-initiatives .path:nth-child(even)>.tlink,
  #page-initiatives .path:nth-child(even) .imgslot{grid-column:1;grid-row:auto}
  /* Image after the copy, before the link. */
  /* The image carries its own bottom gap rather than relying on the link's
     margin-top. Measured at 600px, the link's top sat 2px above the image's
     box bottom: the slot's rendered box runs slightly past its min-height,
     so a 4px margin on the following element was not enough to clear it. */
  /* The :first-child selector is repeated deliberately. An unconditional
     rule above reads
       `.path .imgslot, .path:first-child .imgslot { margin:0!important;
         grid-row:1/span 6; height:100% }`
     and a media query adds no specificity — so on card 1 that (1,3,0)
     selector beat this block's (1,2,0) one, keeping margin:0 and a
     six-row span in a single-column layout. Card 1's image therefore
     stretched and its link collided with it. Matching the selector, and
     releasing the span and height that only make sense in two columns. */
  #page-initiatives .path .imgslot,
  #page-initiatives .path:first-child .imgslot{
    order:2;min-height:clamp(230px,46vw,340px);height:auto;
    grid-row:auto;align-self:auto;margin:0 0 18px!important}
  #page-initiatives .path>.tlink{order:3;margin-top:0;padding-top:0}
  #page-initiatives .path .path-h{max-width:none}
  #page-initiatives .path>p{max-width:none}
}

/* The client-supplied subhead sits between the heading and the body copy,
   so it needs to read as a bridge: display face, larger than body, but
   clearly subordinate to the h2 above it. */
#page-initiatives .path .path-lede{font-family:var(--disp,var(--serif));font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--f-ink,var(--ink));margin-bottom:16px;max-width:52ch}

/* ── Card copy row placement ────────────────────────────────────────────
   Cards 2 and 3 pinned every child paragraph to one explicit grid row.
   That held while each card carried a single line, but the client copy
   expanded these cards to a subhead plus two paragraphs — three elements
   assigned the same cell, drawn on top of each other.

   Copy now auto-places, so each paragraph takes its own row, and the image
   spans the full column beside it however many rows the copy needs. Placed
   last: the rules being corrected share this specificity, so source order
   is what decides. */
#page-initiatives .path:nth-child(2)>p,
#page-initiatives .path:nth-child(3)>p,
#page-initiatives .path:nth-child(2)>.tlink,
#page-initiatives .path:nth-child(3)>.tlink{grid-row:auto}
/* span 20, not 1/-1: -1 resolves against the EXPLICIT grid, and these
   cards declare a single explicit row, so 1/-1 confined the image to row 1
   and inflated that row to the image's full height — leaving the heading
   stranded at the top of a 292px cell. The copy rows are implicit, so the
   image has to span them by count. */
#page-initiatives .path:nth-child(2),
#page-initiatives .path:nth-child(3){grid-template-rows:auto}
#page-initiatives .path:nth-child(2) .imgslot,
#page-initiatives .path:nth-child(3) .imgslot{
  /* span 4 = exactly the four copy rows (heading, subhead, two paragraphs).
     A generous span such as 20 looks safer but is not: grid creates every
     row in the span, and each empty row still contributes an 18px row gap,
     which added ~340px of dead ground below the copy. If a card gains a
     fifth copy element, raise this to match — it must equal the count, not
     exceed it. */
  grid-row:1/span 4;
  /* Spanning every row would stretch the photograph to the full height of
     the copy beside it — ~1100px on the longest card. It spans so the copy
     rows size themselves, then holds its own size.

     Sticky, not pinned to the top: the copy on these cards is now much
     taller than the image, so a static image would scroll away and leave
     its column empty for most of the card. Sticky keeps the photograph
     travelling alongside the paragraphs it belongs to. The offset clears
     the compact sticky nav (72px) plus breathing room. */
  align-self:start;height:clamp(340px,30vw,430px);min-height:0;
  position:sticky;top:clamp(96px,12vh,132px)}
#page-initiatives .path:nth-child(2) .imgslot img,
#page-initiatives .path:nth-child(3) .imgslot img{height:100%;object-fit:cover}
/* The stacked layout owns its own order below 900px — do not re-pin there. */
@media(max-width:900px){
  #page-initiatives .path:nth-child(2)>p,
  #page-initiatives .path:nth-child(3)>p,
  #page-initiatives .path:nth-child(2) .imgslot,
  #page-initiatives .path:nth-child(3) .imgslot{grid-row:auto}
}

/* Sticky is a two-column device — once the card stacks there is nothing
   for the image to travel beside. */
@media(max-width:900px){
  #page-initiatives .path:nth-child(2) .imgslot,
  #page-initiatives .path:nth-child(3) .imgslot{position:static;height:auto}
}

/* ── P2 · hero grid consolidation ───────────────────────────────────────
   The rules above that give `> .rd > section:first-child .wrap` two columns
   were written for an older hero built from .eyrow / .statement / .two.
   That markup is gone: this hero is .eyrow + h1 + .in-hero-copy. So the
   two-column grid survived with no placement rules to go with it, and its
   three children auto-placed into the tracks — eyebrow in column 1, the
   heading beside it in column 2, the copy back under the eyebrow. Broken at
   every width, not only on mobile, and the 900px single-column override
   could not help because it is declared BEFORE the unconditional 4fr/7fr
   rule that reinstates the columns.

   The hero is a single editorial column by design — .in-hero-copy already
   carries the measure — so this states that once, unconditionally, instead
   of adding another width-specific patch. The obsolete .two rules are left
   in place deliberately: .two still exists elsewhere on the page, and this
   correction is scoped to the hero only. */
/* The selector mirrors the rule it corrects, plus .in-hero-in. :first-child
   counts in the class column, so `#id > .rd > section:first-child .wrap` is
   (1,3,1); a shorter `#id .in-hero > .wrap.in-hero-in` is only (1,3,0) and
   silently lost. Measured, not assumed — the first attempt did nothing. */
#page-initiatives>.rd>section:first-child .wrap.in-hero-in{display:block;gap:0}
#page-initiatives>.rd>section:first-child .wrap.in-hero-in>.eyrow,
#page-initiatives>.rd>section:first-child .wrap.in-hero-in>.h-sec,
#page-initiatives>.rd>section:first-child .wrap.in-hero-in>.in-hero-copy{grid-column:auto;grid-row:auto}
/* Both introductory paragraphs stay together under the heading, and the
   measure relaxes as the column narrows rather than staying at 62ch. */
@media(max-width:900px){
  #page-initiatives .in-hero-copy{max-width:none}
}

/* Emergency response shares the Education Pathways column alignment. */
#page-initiatives .emergency-initiative{display:grid;grid-template-columns:minmax(340px,6fr) minmax(0,6fr);gap:18px clamp(40px,6vw,82px);align-items:start;margin-top:clamp(26px,3vw,42px);padding:clamp(30px,3.4vw,48px) 0;border-top:1px solid var(--f-line-d)}
#page-initiatives .emergency-photo{display:block;width:100%;height:clamp(340px,30vw,430px);max-width:none;margin:0;object-fit:cover;object-position:center top}
#page-initiatives .emergency-copy{min-width:0}
#page-initiatives .emergency-copy .path-h{max-width:22ch;font-size:clamp(25px,2.6vw,36px);line-height:1.08;margin:0 0 18px}
#page-initiatives .emergency-copy p{max-width:52ch;font-family:var(--rsans);font-size:14.5px;line-height:1.75;color:var(--f-body);margin:0 0 24px}
#page-initiatives .emergency-copy .tlink{max-width:100%;white-space:normal;overflow-wrap:anywhere}
@media(max-width:900px){#page-initiatives .emergency-initiative{grid-template-columns:minmax(0,1fr);gap:22px}#page-initiatives .emergency-photo{height:auto;max-width:none}#page-initiatives .emergency-copy p{max-width:none}}

/* One reveal owner for the initiative rows; leave the hero unchanged. */
@media(prefers-reduced-motion:no-preference){
 #page-initiatives.ir-ready .paths,#page-initiatives.ir-ready .path,#page-initiatives.ir-ready .path>*,#page-initiatives.ir-ready .emergency-initiative,#page-initiatives.ir-ready .news-note{animation:none!important;transform:none!important;opacity:1!important}
 #page-initiatives.ir-ready .path .imgslot img{animation:none!important}
 #page-initiatives.ir-ready [data-ir]{translate:0 0;opacity:1!important;transition:opacity .8s var(--e-out),translate .8s var(--e-out)!important}
 #page-initiatives.ir-ready [data-ir]:not(.ir-visible){translate:0 24px;opacity:0!important}
 #page-initiatives.ir-ready [data-ir]:focus-within{translate:0 0;opacity:1!important}
}

/* Registration details between the introduction and first initiative. */
#page-initiatives .initiative-credentials{display:flex;align-items:center;gap:24px;padding:0 0 26px}
#page-initiatives .initiative-credentials-badge{display:block;flex:0 0 100px}
#page-initiatives .initiative-credentials-badge img{display:block;width:100px;height:100px;object-fit:contain}
#page-initiatives .initiative-credentials-links{display:flex;flex-wrap:wrap;gap:12px 18px}
#page-initiatives .initiative-credentials-links a{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:9px 16px;border:1px solid var(--f-line-d);color:var(--f-forest);font-family:var(--rsans);font-size:12px;line-height:1.5;text-decoration:none}
#page-initiatives .initiative-credentials-links a:hover{text-decoration:underline;text-underline-offset:3px}
#page-initiatives .initiative-credentials a:focus-visible{outline:2px solid var(--f-forest);outline-offset:4px}
@media(max-width:480px){#page-initiatives .initiative-credentials{gap:16px}#page-initiatives .initiative-credentials-links{flex-direction:column;gap:8px}#page-initiatives .initiative-credentials-links a{padding:8px 12px}}

/* Hero credibility group, beside the introduction on wider screens. */
#page-initiatives .in-hero .initiative-credentials{position:relative;z-index:2;align-self:end;gap:16px;padding:16px;margin-top:24px;background:transparent}
#page-initiatives .in-hero .initiative-credentials-links{gap:10px}
#page-initiatives .in-hero .initiative-credentials-links a{color:#f5f3ec;border-color:rgba(245,243,236,.65)}
#page-initiatives .in-hero .initiative-credentials a:focus-visible{outline-color:#f5f3ec}
#page-initiatives>.rd>section:nth-child(2){padding-top:clamp(18px,2vw,28px)}
@media(min-width:1101px){
 #page-initiatives>.rd>section:first-child .wrap.in-hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 clamp(32px,4vw,60px);align-items:end}
 #page-initiatives>.rd>section:first-child .wrap.in-hero-in>.eyrow,
 #page-initiatives>.rd>section:first-child .wrap.in-hero-in>.h-sec{grid-column:1/-1}
 #page-initiatives>.rd>section:first-child .wrap.in-hero-in>.in-hero-copy{grid-column:1;min-width:0}
 #page-initiatives .in-hero .initiative-credentials{grid-column:2;margin-top:0}
}
@media(max-width:1100px){#page-initiatives .in-hero .initiative-credentials{width:fit-content;max-width:100%}}


/* ── HUB INITIATIVE FEATURE ROW ────────────────────────────────────────
   The lead initiative is rebuilt as a feature band: copy column left
   (eyebrow, headline, lede, solid CTA, four pillars), photograph right
   with an arched edge bleeding off the page. Selectors mirror the
   .path / .path:first-child rules above, which are unconditional and
   (1,3,0), so .path-feature is doubled where needed to win. */
#page-initiatives .paths>.path.path-feature,
#page-initiatives .paths>.path.path-feature:first-child{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);grid-template-rows:auto;gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(34px,4vw,56px) 0;border-top:1px solid var(--f-line-d)}
#page-initiatives .path-feature .hf-copy{grid-column:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
#page-initiatives .path-feature .hf-eyebrow{font-family:var(--rsans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--f-terra);margin:0 0 14px;max-width:none}
#page-initiatives .path-feature .path-h{max-width:20ch;font-size:clamp(28px,3.1vw,42px);line-height:1.1;margin:0 0 18px}
#page-initiatives .path-feature .hf-lede{max-width:46ch;font-family:var(--rsans);font-size:clamp(14.5px,1.15vw,16px);line-height:1.75;color:var(--f-body);margin:0 0 26px}
#page-initiatives .path-feature .hf-cta{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:13px 26px;background:var(--f-terra);color:#fff;font-family:var(--rsans);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid var(--f-terra);transition:background .25s ease,border-color .25s ease}
#page-initiatives .path-feature .hf-cta:hover{background:var(--f-forest);border-color:var(--f-forest)}
#page-initiatives .path-feature .hf-cta:focus-visible{outline:2px solid var(--f-forest);outline-offset:4px}

/* Four pillars, divided by hairlines like the credentials strip. */
#page-initiatives .path-feature .hf-pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;width:100%;margin:clamp(30px,3.4vw,46px) 0 0;padding:0;list-style:none}
#page-initiatives .path-feature .hf-pillars li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;min-width:0;padding:0 clamp(8px,1.2vw,18px);border-left:1px solid var(--f-line-d)}
#page-initiatives .path-feature .hf-pillars li:first-child{border-left:0;padding-left:0}
#page-initiatives .path-feature .hf-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--f-sage);color:var(--f-forest)}
#page-initiatives .path-feature .hf-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#page-initiatives .path-feature .hf-pillars h3{font-family:var(--rsans);font-size:12.5px;font-weight:600;line-height:1.35;color:var(--f-ink);margin:2px 0 0}
#page-initiatives .path-feature .hf-pillars p{max-width:22ch;font-family:var(--rsans);font-size:11.5px;line-height:1.55;color:var(--f-body);margin:0}

/* Photograph: arched left edge, bleeding to the right page edge. */
#page-initiatives .path-feature .hf-photo{grid-column:2;position:relative;margin-right:calc(50% - 50vw);align-self:stretch;min-height:clamp(340px,32vw,460px);overflow:hidden;border-radius:56% 0 0 56% / 100% 0 0 100%;background:var(--f-sage)}
#page-initiatives .path-feature .hf-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;display:block;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
#page-initiatives .path-feature:hover .hf-photo img{transform:scale(1.03)}

@media(max-width:1000px){
  #page-initiatives .path-feature .hf-pillars{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 0}
  #page-initiatives .path-feature .hf-pillars li:nth-child(odd){border-left:0;padding-left:0}
}
@media(max-width:900px){
  #page-initiatives .paths>.path.path-feature,
  #page-initiatives .paths>.path.path-feature:first-child{grid-template-columns:1fr;gap:28px}
  #page-initiatives .path-feature .hf-copy,#page-initiatives .path-feature .hf-photo{grid-column:1}
  #page-initiatives .path-feature .hf-photo{order:2;margin-right:0;border-radius:0;min-height:clamp(260px,52vw,380px)}
  #page-initiatives .path-feature .path-h,#page-initiatives .path-feature .hf-lede{max-width:none}
}
@media(max-width:480px){
  #page-initiatives .path-feature .hf-pillars{grid-template-columns:1fr;gap:20px}
  #page-initiatives .path-feature .hf-pillars li{flex-direction:row;align-items:center;text-align:left;border-left:0;padding-left:0}
  #page-initiatives .path-feature .hf-pillars .hf-ico{flex:0 0 46px}
  #page-initiatives .path-feature .hf-pillars p{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  #page-initiatives .path-feature .hf-photo img{transition:none}
  #page-initiatives .path-feature:hover .hf-photo img{transform:none}
}


/* Pillar cells share one row rhythm: fixed icon row, a two-line title slot
   and the description in the remaining space, so one- and two-line titles
   still line up across the row. */
#page-initiatives .path-feature .hf-pillars{gap:clamp(22px,2.4vw,30px) 0}
#page-initiatives .path-feature .hf-pillars li{display:grid;grid-template-rows:46px auto auto;justify-items:center;gap:10px}
#page-initiatives .path-feature .hf-pillars h3{min-height:2.7em;display:flex;align-items:center;justify-content:center;text-wrap:balance;margin:0}
#page-initiatives .path-feature .hf-pillars p{max-width:20ch;text-wrap:balance}
@media(max-width:480px){
  #page-initiatives .path-feature .hf-pillars li{grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:4px;justify-items:start}
  #page-initiatives .path-feature .hf-pillars .hf-ico{grid-row:1/span 2}
  #page-initiatives .path-feature .hf-pillars h3{min-height:0;justify-content:flex-start;align-self:end}
  #page-initiatives .path-feature .hf-pillars p{align-self:start}
}


/* Two-by-two pillar block at every width: the copy column is narrower than
   the photo, so four abreast left each cell too tight to balance. */
#page-initiatives .path-feature .hf-pillars{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,2.6vw,34px) clamp(18px,2vw,28px);max-width:40ch}
#page-initiatives .path-feature .hf-pillars li:nth-child(odd){border-left:0;padding-left:0}
#page-initiatives .path-feature .hf-pillars li:nth-child(even){border-left:1px solid var(--f-line-d)}
@media(max-width:480px){
  #page-initiatives .path-feature .hf-pillars{grid-template-columns:1fr;max-width:none}
  #page-initiatives .path-feature .hf-pillars li:nth-child(even){border-left:0;padding-left:0}
}


/* The arc was cutting a 380px crescent out of the frame and leaving the
   band's middle empty. Shallow curve, as in the reference, and the photo
   starts closer to the copy. */
#page-initiatives .paths>.path.path-feature,
#page-initiatives .paths>.path.path-feature:first-child{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(20px,2.4vw,36px)}
#page-initiatives .path-feature .hf-photo{border-radius:17% 0 0 17% / 100% 0 0 100%}
#page-initiatives .path-feature .hf-photo img{object-position:56% 42%}
@media(max-width:900px){
  #page-initiatives .path-feature .hf-photo{border-radius:0}
}


/* Pillars as their own full-width row under the band: four across with real
   breathing room, instead of four (or 2x2) squeezed into the copy column. */
#page-initiatives .paths>.path.path-feature,
#page-initiatives .paths>.path.path-feature:first-child{grid-template-rows:auto auto;align-items:start}
#page-initiatives .path-feature .hf-copy{grid-column:1;grid-row:1;align-self:center}
#page-initiatives .path-feature .hf-photo{grid-column:2;grid-row:1}
#page-initiatives .path-feature>.hf-pillars{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);max-width:none;width:100%;margin:clamp(30px,3.6vw,50px) 0 0;padding-top:clamp(26px,3vw,38px);border-top:1px solid var(--f-line-d)}
#page-initiatives .path-feature>.hf-pillars li{padding:0 clamp(10px,1.4vw,22px)}
#page-initiatives .path-feature>.hf-pillars li:nth-child(n){border-left:1px solid var(--f-line-d)}
#page-initiatives .path-feature>.hf-pillars li:first-child{border-left:0;padding-left:0}
#page-initiatives .path-feature>.hf-pillars h3{font-size:13px;min-height:0}
#page-initiatives .path-feature>.hf-pillars p{max-width:24ch;font-size:12px}
@media(max-width:760px){
  #page-initiatives .path-feature>.hf-pillars{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,32px) 0}
  #page-initiatives .path-feature>.hf-pillars li:nth-child(odd){border-left:0;padding-left:0}
}
@media(max-width:480px){
  #page-initiatives .path-feature>.hf-pillars{grid-template-columns:1fr}
  #page-initiatives .path-feature>.hf-pillars li:nth-child(n){border-left:0;padding-left:0}
}


/* The photograph now spans both rows, so the pillar strip sits inside the
   band beside it rather than below it — the reference arrangement. The copy
   column takes the extra width the four pillars need. */
#page-initiatives .paths>.path.path-feature,
#page-initiatives .paths>.path.path-feature:first-child{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto auto;align-items:start}
#page-initiatives .path-feature .hf-copy{grid-row:1;align-self:start}
#page-initiatives .path-feature .hf-photo{grid-row:1/-1;align-self:stretch;min-height:clamp(380px,36vw,520px)}
#page-initiatives .path-feature>.hf-pillars{grid-column:1;grid-row:2;gap:0 clamp(14px,1.6vw,26px);margin-top:clamp(24px,2.8vw,36px);padding-top:clamp(22px,2.4vw,30px)}
#page-initiatives .path-feature>.hf-pillars li{padding:0 clamp(8px,1vw,14px)}
#page-initiatives .path-feature>.hf-pillars .hf-ico{width:42px;height:42px}
#page-initiatives .path-feature>.hf-pillars li{grid-template-rows:42px auto auto;gap:8px}
#page-initiatives .path-feature>.hf-pillars h3{font-size:12px;min-height:2.6em}
#page-initiatives .path-feature>.hf-pillars p{max-width:18ch;font-size:11px;line-height:1.5}
@media(max-width:900px){
  #page-initiatives .path-feature .hf-photo{grid-row:auto}
  #page-initiatives .path-feature>.hf-pillars{grid-column:1;grid-row:auto}
}

#page-initiatives .path-feature>.hf-pillars{border-top:0;padding-top:0}


/* Close the gap under the CTA and let the pillar copy use its full cell
   so the lines stop breaking three ways. */
#page-initiatives .path-feature .hf-cta{margin-bottom:0}
#page-initiatives .path-feature>.hf-pillars{border-top:0;padding-top:0;margin-top:clamp(18px,1.8vw,24px);gap:0 clamp(10px,1.2vw,18px)}
#page-initiatives .path-feature>.hf-pillars li{padding:0 clamp(6px,.8vw,12px)}
#page-initiatives .path-feature>.hf-pillars p{max-width:none;font-size:11.5px;line-height:1.55}
#page-initiatives .path-feature>.hf-pillars h3{min-height:2.5em}


/* Pillars as small outlined cards, matching the core-values card language:
   1.5px brand-colour rule, square corners, soft resting shadow, hover lift.
   The dividers go — the borders do that work now. */
#page-initiatives .path-feature>.hf-pillars{gap:clamp(12px,1.2vw,16px)}
#page-initiatives .path-feature>.hf-pillars li{--pil-line:var(--f-forest);
  border:1.5px solid var(--pil-line);border-left:1.5px solid var(--pil-line);
  padding:clamp(14px,1.4vw,18px) clamp(10px,1vw,14px);background:transparent;
  box-shadow:0 4px 14px -10px rgba(28,42,20,.34);
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease}
#page-initiatives .path-feature>.hf-pillars li:nth-child(even){--pil-line:var(--f-terra)}
#page-initiatives .path-feature>.hf-pillars li:first-child{border-left:1.5px solid var(--pil-line);padding-left:clamp(10px,1vw,14px)}
#page-initiatives .path-feature>.hf-pillars .hf-ico{width:38px;height:38px;background:transparent;color:var(--pil-line)}
#page-initiatives .path-feature>.hf-pillars li{grid-template-rows:38px auto auto;gap:7px}
#page-initiatives .path-feature>.hf-pillars .hf-ico svg{width:22px;height:22px}
@media(hover:hover) and (pointer:fine){
  #page-initiatives .path-feature>.hf-pillars li:hover{transform:translateY(-3px);background:color-mix(in oklab,var(--pil-line) 7%,transparent);box-shadow:0 12px 26px -12px rgba(28,42,20,.42)}
}
@media(max-width:760px){
  #page-initiatives .path-feature>.hf-pillars li:nth-child(odd){border-left:1.5px solid var(--pil-line);padding-left:clamp(10px,1vw,14px)}
}
@media(max-width:480px){
  #page-initiatives .path-feature>.hf-pillars li:nth-child(n){border-left:1.5px solid var(--pil-line);padding-left:clamp(12px,3vw,16px)}
}
@media(prefers-reduced-motion:reduce){
  #page-initiatives .path-feature>.hf-pillars li{transition:none}
  #page-initiatives .path-feature>.hf-pillars li:hover{transform:none}
}


/* Uniform card border on all four sides. An earlier rule sets border-left
   with a :nth-child(n) selector — (1,4,0) — which outranked the card block's
   (1,3,1) selectors and left cards with a mismatched left edge. Matching the
   pseudo-class so the weight is identical on every side, at every width. */
#page-initiatives .path-feature>.hf-pillars li:nth-child(n){
  border:1.5px solid var(--pil-line);padding:clamp(14px,1.4vw,18px) clamp(12px,1.2vw,16px);
  height:100%;align-content:start}
#page-initiatives .path-feature>.hf-pillars{align-items:stretch;margin-top:clamp(12px,1.2vw,16px)}


/* Four across only where each card clears a readable measure (~150px+).
   Below that the strip becomes 2x2 inside the copy column, and the photo
   drops back to its own row so nothing is squeezed. */
@media(max-width:1150px){
  #page-initiatives .path-feature>.hf-pillars{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,16px)}
}
@media(max-width:1150px) and (min-width:901px){
  #page-initiatives .paths>.path.path-feature,
  #page-initiatives .paths>.path.path-feature:first-child{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
}