/* Green Finance Access webinar landing page.
   Palette and type come from the spark-design skill: Green Forward material is
   green-led (#006D41 primary, #1A2F80 secondary), text on dark grounds is pure
   white, green is the button and banner colour, and there is exactly one orange
   dot on the page. Fonts are inherited: --body-font-family is already defined
   globally in the Hub's custom CSS, so nothing is loaded here. */

#gf-web {
  --green: #006D41;
  --green-dark: #00512F;
  --blue: #1A2F80;
  --ink: #001B2C;
  --muted: #667080;
  --mint: #C5DFE0;
  --paper: #F2EBE8;
  --rule: #DCE3E6;
  color: var(--ink);
  font-family: var(--body-font-family);
}
#gf-web .gfw-wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }
#gf-web section { padding: 54px 0; }
#gf-web h2 { color: var(--blue); font-size: 30px; line-height: 1.2; margin: 0 0 8px; font-weight: 700; }
#gf-web h3 { color: var(--ink); font-size: 18px; line-height: 1.3; margin: 0 0 6px; font-weight: 700; }
#gf-web p  { font-size: 16px; line-height: 1.65; }
#gf-web .gfw-lede { color: var(--muted); font-size: 17px; max-width: 62ch; margin: 0 0 26px; }

/* The one orange dot on the page, the "spark". Sized at half the cap height
   with a dot of space after it, per the brand manual. */
#gf-web .gfw-eyebrow {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; margin: 0 0 14px; display: flex; align-items: center;
}
#gf-web .gfw-eyebrow::before {
  content: ""; width: .5em; height: .5em; border-radius: 50%;
  background: #FF4F00; margin-inline-end: .5em; flex: none;
}

/* ---- hero ------------------------------------------------------------- */
/* Full bleed photograph under a solid green scrim. The scrim is one flat
   colour, not a gradient: the brand manual allows an even scrim over a photo
   and nothing softer, and it is the only thing keeping white text legible over
   a bright field. 0.78 measured against the lightest part of this photograph;
   lower it and the sky eats the eyebrow. */
#gf-web .gfw-hero {
  position: relative; background: var(--green); color: #fff;
  padding: 92px 0 84px; overflow: hidden; isolation: isolate;
}
#gf-web .gfw-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%; z-index: -2; display: block;
}
#gf-web .gfw-hero::before,
#gf-web .gfw-close::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(0, 109, 65, .78);
}
#gf-web .gfw-hero-copy { position: relative; max-width: 760px; }
#gf-web .gfw-hero .gfw-eyebrow { color: #fff; }
#gf-web .gfw-hero h1 {
  color: #fff; font-size: 62px; line-height: 1.02; margin: 0 0 16px; font-weight: 700;
  letter-spacing: -.015em;
}
#gf-web .gfw-hero .gfw-sub { color: #fff; font-size: 21px; line-height: 1.35; margin: 0 0 24px; opacity: .95; }
/* The hook is the one line that has to land before anyone scrolls, so it is
   sized between the standfirst and the body rather than set as body copy. */
#gf-web .gfw-hero .gfw-hook {
  color: #fff; font-size: 25px; line-height: 1.3; font-weight: 500;
  max-width: 34ch; margin: 0 0 30px;
}

#gf-web .gfw-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
#gf-web .gfw-fact {
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
  color: #fff; border-radius: 4px; padding: 9px 14px; font-size: 14px; font-weight: 600;
}

/* Local times across the six programme countries. Computed, never typed: see
   SPARK_EVENTS_OTHER_ZONES in spark-tools/events/lib.php. */
#gf-web .gfw-zones { color: #fff; opacity: .82; font-size: 14px; margin: 0 0 26px; }

/* ---- the register button ---------------------------------------------- */
#gf-web .gfw-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
#gf-web .gfw-btn {
  display: inline-block; background: #fff; color: var(--green);
  border: 0; border-radius: 4px; padding: 16px 34px;
  font-family: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
  text-decoration: none; line-height: 1.2;
}
#gf-web .gfw-btn:hover { background: var(--paper); color: var(--green-dark); text-decoration: none; }
#gf-web .gfw-btn[disabled] { opacity: .55; cursor: default; }
#gf-web .gfw-cta-note { color: #fff; font-size: 14px; opacity: .9; }
/* The alternative route. A link, not a button: two buttons of equal weight make
   people choose instead of act, and the Hub route is the one we want chosen. */
#gf-web .gfw-alt {
  color: #fff; font-size: 14px; font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; opacity: .9;
}
#gf-web .gfw-alt:hover { color: #fff; opacity: 1; }
#gf-web .gfw-alt-dark { color: var(--green); }
#gf-web .gfw-alt-dark:hover { color: var(--green-dark); }
/* Second CTA, on a light ground, so it has to be green rather than white. */
#gf-web .gfw-btn-solid { background: var(--green); color: #fff; }
#gf-web .gfw-btn-solid:hover { background: var(--green-dark); color: #fff; }

/* ---- the band under the hero, and every photo + copy split -------------- */
#gf-web .gfw-intro-band { background: #fff; padding: 46px 0; }
#gf-web .gfw-intro-band .gfw-sub {
  color: var(--blue); font-size: 23px; font-weight: 700; line-height: 1.25; margin: 0 0 12px;
}
#gf-web .gfw-intro-band p { color: var(--muted); margin: 0 0 14px; }
#gf-web .gfw-intro-band .gfw-for {
  color: var(--ink); font-size: 15px; font-weight: 600; margin: 0;
  border-inline-start: 3px solid var(--green); padding-inline-start: 13px;
}
#gf-web .gfw-split {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 40px; align-items: center;
}
#gf-web .gfw-shot img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 6px; display: block;
}
/* A wide strip, not a hero: it sets the room the panel is speaking in and then
   gets out of the way of the cards. */
#gf-web .gfw-band { margin: 0 0 26px; }
#gf-web .gfw-band img {
  width: 100%; aspect-ratio: 32 / 9; object-fit: cover; object-position: 50% 42%;
  border-radius: 6px; display: block;
}

/* ---- takeaways --------------------------------------------------------- */
#gf-web .gfw-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 34px; }
#gf-web .gfw-take { border-top: 3px solid var(--green); padding-top: 14px; }
#gf-web .gfw-take p { color: var(--muted); margin: 0; font-size: 15px; }

/* ---- speakers ---------------------------------------------------------- */
#gf-web .gfw-speakers { background: var(--paper); }
#gf-web .gfw-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
#gf-web .gfw-sp { background: #fff; border-radius: 5px; padding: 22px; display: flex; flex-direction: column; }
/* The ring matters: these portraits are shot on white, and on a white card a
   circular crop of a white background has no edge at all. It reads as a small
   rectangle of hair and shirt until something draws the circle. */
#gf-web .gfw-sp-photo {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  object-position: 50% 32%; display: block; margin: 0 0 13px; flex: none;
  background: var(--mint); box-shadow: 0 0 0 1px var(--rule);
}
/* The stand-in. Brand blue on the soft blue fill, so a card without a
   photograph still reads as finished rather than as a loading failure. */
#gf-web .gfw-sp-initials {
  background: var(--mint); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; font-weight: 700; letter-spacing: .02em;
}
#gf-web .gfw-sp .gfw-sp-name { color: var(--blue); font-size: 18px; font-weight: 700; margin: 0 0 3px; }
#gf-web .gfw-sp .gfw-sp-role { color: var(--ink); font-size: 14px; font-weight: 600; margin: 0 0 2px; }
#gf-web .gfw-sp .gfw-sp-country { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
#gf-web .gfw-sp .gfw-sp-bio { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
#gf-web .gfw-sp .gfw-sp-brings {
  margin-top: auto; border-top: 1px solid var(--rule); padding-top: 11px;
  font-size: 13px; font-weight: 600; color: var(--green);
}

#gf-web .gfw-pending { color: var(--muted); font-size: 14px; margin: 18px 0 0; font-weight: 600; }

/* ---- agenda ------------------------------------------------------------ */
#gf-web .gfw-agenda ol { list-style: none; margin: 0; padding: 0; counter-reset: gfw; }
#gf-web .gfw-agenda li {
  counter-increment: gfw; display: grid;
  grid-template-columns: 44px 1fr 78px; gap: 18px;
  padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: start;
}
#gf-web .gfw-agenda li::before {
  content: counter(gfw); color: var(--green); font-size: 20px; font-weight: 700; line-height: 1.3;
}
#gf-web .gfw-agenda .gfw-ag-time { color: var(--muted); font-size: 14px; font-weight: 600; text-align: end; }
#gf-web .gfw-agenda p { color: var(--muted); font-size: 15px; margin: 0; }

/* ---- programme --------------------------------------------------------- */
#gf-web .gfw-prog { background: var(--mint); }
#gf-web .gfw-countries { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
#gf-web .gfw-country {
  background: #fff; color: var(--blue); border-radius: 3px;
  padding: 7px 13px; font-size: 14px; font-weight: 600;
}

/* ---- closing ----------------------------------------------------------- */
#gf-web .gfw-close {
  position: relative; text-align: center; color: #fff;
  overflow: hidden; isolation: isolate; padding: 74px 0;
}
#gf-web .gfw-close h2 { color: #fff; }
#gf-web .gfw-close .gfw-lede { color: #fff; opacity: .95; }
#gf-web .gfw-close .gfw-cta { justify-content: center; }
#gf-web .gfw-close .gfw-cta-note { color: #fff; }

@media (max-width: 980px) {
  #gf-web .gfw-split { grid-template-columns: 1fr; gap: 26px; }
  #gf-web .gfw-band img { aspect-ratio: 21 / 9; }
}
@media (max-width: 900px) {
  #gf-web .gfw-grid3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  #gf-web .gfw-hero { padding: 54px 0 48px; }
  #gf-web .gfw-hero h1 { font-size: 38px; }
  #gf-web .gfw-intro-band .gfw-sub { font-size: 19px; }
  #gf-web .gfw-hero .gfw-hook { font-size: 20px; max-width: none; }
  #gf-web .gfw-close { padding: 46px 0; }
  #gf-web .gfw-band img { aspect-ratio: 16 / 9; }
  #gf-web h2 { font-size: 24px; }
  #gf-web section { padding: 38px 0; }
  #gf-web .gfw-grid2, #gf-web .gfw-grid3 { grid-template-columns: 1fr; }
  #gf-web .gfw-agenda li { grid-template-columns: 30px 1fr; }
  #gf-web .gfw-agenda .gfw-ag-time { grid-column: 2; text-align: start; }
  #gf-web .gfw-btn { width: 100%; text-align: center; }
}

/* ---- the facilitator ---------------------------------------------------
   A solid green band between the panel (paper) and the running order (white),
   so the page reads paper, green, white rather than two light bands running
   into each other. Text on it is pure white, per the brand manual, with mint
   for the second rank so the hierarchy does not depend on dimming the white.

   Asymmetric on purpose: the text column is the wider one. A 50/50 split would
   have made the portrait argue with the words instead of supporting them. */
#gf-web .gfw-fac { background: var(--green); }

#gf-web .gfw-fac-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

#gf-web .gfw-fac-text { min-width: 0; }

/* Small caps and a short rule instead of the orange dot, which the hero spends. */
#gf-web .gfw-fac-label {
  color: var(--mint);
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; margin: 0 0 18px;
  display: flex; align-items: center; gap: .75em;
}
#gf-web .gfw-fac-label::after {
  content: ""; height: 1px; flex: 1 1 auto; max-width: 92px;
  background: rgba(255, 255, 255, .38);
}

/* h2 elsewhere on this page is blue. Here the ground is green, so it is white,
   and a shade larger because this is the only name on the page at this size. */
#gf-web .gfw-fac .gfw-fac-name {
  color: #fff;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.1;
  margin: 0 0 6px;
}

#gf-web .gfw-fac-role {
  color: var(--mint);
  font-size: 17px; font-weight: 600;
  margin: 0 0 18px;
}

#gf-web .gfw-fac-lede {
  color: #fff;
  font-size: 17px; line-height: 1.6;
  max-width: 54ch;
  margin: 0 0 26px;
}

/* Hairline rules, not bullets and not cards: four facts that each want their
   own line, with nothing decorative between them. */
#gf-web .gfw-fac-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  max-width: 58ch;
}
#gf-web .gfw-fac-list li {
  color: #fff;
  font-size: 15px; line-height: 1.5;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}

#gf-web .gfw-fac-edu {
  color: var(--mint);
  font-size: 14px; line-height: 1.5;
  margin: 0;
  max-width: 54ch;
}

#gf-web .gfw-fac-figure { margin: 0; min-width: 0; }
#gf-web .gfw-fac-figure img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  /* A hairline in the band's own colour, lightened: the photograph's background
     is foliage almost exactly this green, and without an edge the portrait
     bleeds into the band and looks like a mistake. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}

/* One column under 860px, portrait first: on a phone the face is what earns the
   scroll, and four lines of credentials above it would bury her. */
@media (max-width: 860px) {
  #gf-web .gfw-fac-grid { grid-template-columns: 1fr; gap: 26px; }
  #gf-web .gfw-fac-figure { order: -1; max-width: 300px; }
  #gf-web .gfw-fac-lede,
  #gf-web .gfw-fac-list,
  #gf-web .gfw-fac-edu { max-width: none; }
}