/* GGF homepage design system — Plan International brand (Sep 2023), elevated to an
   agency standard: confident fluid type, considered motion, Plan's highlight + doodle
   devices. Every choice stays inside the brand (Plan Blue led, Poppins-Bold sentence
   case, Arial body, Georgia captions, square corners, max-3 palette, WCAG AA). */
/* Poppins is self-hosted: the 600 and 700 faces are embedded as data URIs in site.css,
   inside SHARED-WITH-HOME. This @import was still fetching the font from Google on every page
   view, before consent, which is the configuration LG Munich I ruled unlawful. Removed 3 Sep 2026. */

:root{
  --plan-blue:#0072CE; --plan-blue-dk:#005AA6; --plan-blue-deep:#0A2A43;
  --light-blue:#58CAE7; --yellow:#FFD500; --orange:#ED632F;
  --ink:#1b2b36; --grey:#5b6b76; --line:#e4e8eb; --paper:#ffffff; --paper-2:#f5f8fa;
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0;}
/* scroll-behavior:smooth was removed 3 Sep 2026. Combined with overflow-x:clip on body
   (next rule down) it silently broke EVERY in-page anchor on the site: the click set the
   hash and nothing scrolled. That killed the exact links a major donor follows before a
   large gift, the board, the accounts, safeguarding and the FAQ, and it was invisible in
   analytics because the click still registered. Proved by the studio panel in a browser:
   with scroll-behavior forced to auto the same link jumped correctly. A working anchor
   beats a smooth broken one. */
html{-webkit-text-size-adjust:100%;}
/* Anchor targets clear the fixed header rather than landing underneath it. */
section[id]{scroll-margin-top:104px}
body{font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);
  font-size:17px;line-height:1.6;text-align:left;-webkit-font-smoothing:antialiased;overflow-x:clip;}
h1,h2,h3,.display{font-family:'Poppins',Arial,sans-serif;font-weight:700;letter-spacing:-.015em;line-height:1.05;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,40px);}
.note{font-size:13.5px;color:var(--grey);} /* captions: Georgia */

/* Buttons: SQUARE corners (brand p95), with a considered hover lift. */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Poppins',Arial,sans-serif;font-weight:700;
  font-size:16.5px;text-decoration:none;padding:15px 28px;border:2px solid var(--plan-blue);border-radius:0;
  cursor:pointer;transition:transform .18s var(--ease),background .18s,box-shadow .18s,border-color .18s;}
.btn svg{width:18px;height:18px;transition:transform .18s var(--ease);}
.btn:hover svg{transform:translateX(4px);}
.btn-primary{background:var(--plan-blue);color:#fff;}
.btn-primary:hover{background:var(--plan-blue-dk);border-color:var(--plan-blue-dk);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,90,166,.28);}
.btn-yellow{background:var(--yellow);border-color:var(--yellow);color:var(--ink);}
.btn-yellow:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.18);}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.85);}
.btn-ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);}
.btn-line{background:#fff;color:var(--plan-blue);}
.btn-line:hover{background:#eef6fc;transform:translateY(-2px);}

/* Plan's HIGHLIGHT device — a marker rectangle behind 1-3 Poppins-Bold words.
   The painted box is the em-box height; adequate line-height on the heading gives
   the leading (gap) so the marker NEVER overlaps the lines above/below it. */
.hl{background:var(--yellow);color:var(--ink);padding:.04em .2em;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
/* Plan's DOODLE device (a hand-drawn underline under 1-3 key words) is retired 8 September
   2026. Matthew: "remove all the doodles you put in, all those scribbles... make it plain. I
   will have Claude Design put in everything for me." .doodle is deliberately left as a real,
   empty rule rather than deleted outright: build.py and every generated page still wrap key
   phrases in <span class="doodle">, and stripping the class from markup site-wide is a bigger,
   riskier change than this moment calls for. Left plain, the span is inert: normal inline text,
   no mark, nothing to remove from the HTML for whatever goes in here next. */
.doodle{}

/* Header — fixed Plan blue (brand p92; we design within it). */
header.plan{background:var(--plan-blue);color:#fff;position:sticky;top:0;z-index:40;box-shadow:0 1px 0 rgba(255,255,255,.12);}
header.plan .wrap{display:flex;align-items:center;gap:22px;height:80px;}
/* Brand lockup per Global Brand Manual p60: Plan International logo PRIMARY (left),
   a keyline, then the campaign name to its right in Poppins Bold, sentence case.
   No global strapline in the lockup. */
.brandlock{display:flex;align-items:center;gap:16px;text-decoration:none;white-space:nowrap;}
.brandlock .plan-logo{height:42px;width:auto;display:block;}
.brandlock .klh{width:1.5px;height:38px;background:rgba(255,255,255,.55);display:block;}
.brandlock .ggf-name{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:18px;color:#fff;letter-spacing:-.01em;line-height:1.05;}
/* legacy text logo (kept as fallback if used) */
.logo{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:19px;color:#fff;text-decoration:none;white-space:nowrap;letter-spacing:-.01em;}
.logo small{display:block;font-family:Arial,sans-serif;font-weight:normal;font-size:10.5px;opacity:.9;letter-spacing:.01em;margin-top:1px;}
nav.main{margin-left:auto;display:flex;gap:24px;align-items:center;}
nav.main a{color:#fff;text-decoration:none;font-size:14.5px;font-weight:bold;position:relative;padding:4px 0;}
nav.main a:not(.donate)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--yellow);transition:right .25s var(--ease);}
nav.main a:not(.donate):hover::after{right:0;}
nav.main .donate{background:var(--yellow);color:var(--ink);padding:9px 18px;font-family:'Poppins',Arial,sans-serif;font-size:14px;transition:transform .16s var(--ease);}
nav.main .donate:hover{transform:translateY(-1px);}

/* ---- HERO SYSTEM ---- three treatments share these primitives ---- */
.eyebrow{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--yellow);margin-bottom:20px;display:inline-flex;align-items:center;gap:10px;}
.eyebrow::before{content:"";width:28px;height:3px;background:var(--yellow);}
.hero h1{font-size:clamp(38px,6.2vw,78px);color:#fff;letter-spacing:-.02em;line-height:1.22;}
.hero .lead{font-size:clamp(18px,1.7vw,23px);color:rgba(255,255,255,.92);max-width:34em;margin:26px 0 34px;line-height:1.5;}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}

/* V1 — editorial full-bleed image hero. Use a LANDSCAPE photo here so faces stay
   visible with minimal zoom; object-position tuned to the faces (~58% down). */
.hero-editorial{position:relative;min-height:clamp(540px,78vh,760px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--plan-blue-deep);}
.hero-editorial .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;}
.hero-editorial .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,26,42,.92) 0%,rgba(6,26,42,.78) 45%,rgba(6,26,42,.5) 100%);}
.hero-editorial .wrap{position:relative;z-index:2;padding-top:clamp(80px,12vh,150px);padding-bottom:clamp(48px,7vh,88px);}
.hero-editorial .kicker-fig{margin-top:30px;display:flex;align-items:baseline;gap:16px;border-top:2px solid rgba(255,255,255,.28);padding-top:20px;max-width:30em;}
.hero-editorial .kicker-fig .n{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:clamp(40px,5vw,64px);color:var(--yellow);line-height:1;letter-spacing:-.02em;white-space:nowrap;}
.hero-editorial .kicker-fig p{font-size:15px;color:#fff;}
/* Notes over dark photo/navy must stay legible — never dim grey on dark. */
.hero .note,.give .note{color:rgba(255,255,255,.72);}

/* V2 — split hero: statement + framed photograph. */
.hero-split{background:var(--plan-blue);color:#fff;overflow:hidden;}
.hero-split .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center;min-height:clamp(520px,80vh,760px);padding-top:56px;padding-bottom:56px;}
.hero-split .frame{position:relative;align-self:stretch;min-height:340px;}
.hero-split .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;}
.hero-split .frame::before{content:"";position:absolute;left:-14px;top:-14px;width:96px;height:96px;background:var(--yellow);z-index:0;}
.hero-split .frame::after{content:"";position:absolute;right:-14px;bottom:-14px;width:70px;height:70px;border:4px solid var(--plan-blue);z-index:0;}
.hero-split .frame .img-wrap{position:absolute;inset:0;z-index:1;overflow:hidden;}

/* V3 — typographic mission hero, no photo, brand graphic language. */
.hero-type{background:var(--plan-blue);color:#fff;position:relative;overflow:hidden;}
/* Deliberate brand geometry filling the right of the typographic hero (not empty space). */
.hero-type::after{content:"";position:absolute;right:-140px;top:50%;width:560px;height:560px;border:52px solid rgba(255,255,255,.11);border-radius:0;transform:translateY(-50%) rotate(-12deg);}
.hero-type::before{content:"";position:absolute;right:6%;bottom:14%;width:118px;height:118px;background:var(--yellow);transform:rotate(8deg);z-index:1;}
.hero-type .wrap{position:relative;z-index:2;padding-top:clamp(72px,10vh,124px);padding-bottom:clamp(52px,8vh,96px);}
.hero-type h1{max-width:15em;}
.hero-type .flagline{margin-top:34px;display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.10);padding:12px 20px;font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:15px;}
.hero-type .flagline .dot{width:10px;height:10px;background:var(--yellow);}
/* Proof strip fills the lower hero band with substance instead of dead space. */
.hero-proof{margin-top:clamp(40px,6vh,72px);display:grid;grid-template-columns:repeat(3,auto);gap:clamp(24px,5vw,72px);justify-content:start;border-top:1px solid rgba(255,255,255,.22);padding-top:26px;max-width:760px;}
.hero-proof .n{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:clamp(30px,3.4vw,44px);color:var(--yellow);line-height:1;letter-spacing:-.02em;}
.hero-proof p{font-size:13.5px;color:rgba(255,255,255,.9);margin-top:8px;max-width:15em;}

/* Section rhythm + eyebrows. */
section{padding:clamp(56px,7vw,104px) 0;}
section.alt{background:var(--paper-2);}
.sec-eyebrow{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--plan-blue);margin-bottom:14px;display:flex;align-items:center;gap:10px;}
.sec-eyebrow::before{content:"";width:26px;height:3px;background:var(--yellow);display:inline-block;}
h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:16px;max-width:16em;}
.sec-intro{font-size:clamp(17px,1.4vw,20px);max-width:40em;color:var(--ink);margin-bottom:34px;line-height:1.55;}

/* Two-column editorial feature: proportionate photo + persuasive copy.
   This is how we show a PORTRAIT photo (faces visible, no blow-up) AND give
   high-net-worth donors the fuller case. Media column carries brand corner devices. */
.feature{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4.5vw,64px);align-items:center;}
.feature.media-right .feature-media{order:2;}
.feature-media{position:relative;aspect-ratio:4/5;min-height:360px;}
.feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;z-index:1;}
.feature-media::before{content:"";position:absolute;left:-16px;top:-16px;width:92px;height:92px;background:var(--yellow);z-index:0;}
.feature-media::after{content:"";position:absolute;right:-16px;bottom:-16px;width:64px;height:64px;border:4px solid var(--plan-blue);z-index:0;}
.feature-media .photo-caption{z-index:2;}
.feature-body h2{margin-bottom:14px;}
.feature-body p{font-size:clamp(16px,1.15vw,18px);color:var(--ink);margin-bottom:16px;line-height:1.62;}
.feature-body .lede{font-size:clamp(18px,1.4vw,21px);color:var(--ink);}
.feature-points{list-style:none;margin:8px 0 0;padding:0;}
.feature-points li{position:relative;padding:10px 0 10px 30px;border-top:1px solid var(--line);font-size:15.5px;color:var(--ink);}
.feature-points li::before{content:"";position:absolute;left:0;top:16px;width:14px;height:3px;background:var(--yellow);}
.feature-points li strong{color:var(--plan-blue);}

/* Illustrative figure tag — real-looking numbers, clearly labelled so clients get the feel. */
.figtag{display:inline-block;font-size:11.5px;color:var(--grey);margin-top:6px;letter-spacing:.01em;}
.figtag::before{content:"";display:inline-block;width:7px;height:7px;background:var(--yellow);margin-right:6px;vertical-align:middle;}

/* Impact stats — an editorial band, not bland cards. */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,34px);}
.stat{border-top:4px solid var(--plan-blue);padding:22px 4px 0;}
.stat .n{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:clamp(38px,4.6vw,60px);color:var(--plan-blue);line-height:.98;letter-spacing:-.02em;}
.stat p{font-size:15.5px;margin-top:12px;color:var(--ink);}
.ph{background:#fff4c2;outline:1px dashed #c9ab1a;color:#7a6a10;font-family:Georgia,serif;font-style:italic;font-size:12.5px;padding:1px 6px;}

/* Mission themes — flagship spine + sub-themes, with hover. */
.themes{display:grid;grid-template-columns:1.25fr 1fr 1fr;border:1px solid var(--line);}
.themes .cell{padding:30px 26px;border-right:1px solid var(--line);transition:background .2s;}
.themes .cell:last-child{border-right:none;}
.themes .cell:hover{background:var(--paper-2);}
.themes .flag{background:var(--plan-blue);color:#fff;}
.themes .flag:hover{background:var(--plan-blue-dk);}
.themes h3{font-size:21px;margin-bottom:10px;}
.themes .flag h3{color:#fff;}
.themes p{font-size:15px;color:var(--grey);}
.themes .flag p{color:rgba(255,255,255,.92);}

/* Trust strip. */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:28px;}
.trust-grid .item{border-left:3px solid var(--yellow);padding:2px 0 2px 16px;}
.trust-grid h3{font-size:17px;margin-bottom:7px;color:var(--plan-blue);}
.trust-grid p{font-size:14.5px;color:var(--grey);}

/* Give band. */
.give{background:var(--plan-blue-deep);color:#fff;}
.give h2{color:#fff;}
.give p{color:rgba(255,255,255,.88);}

footer.plan{background:var(--plan-blue);color:#fff;padding:clamp(40px,5vw,60px) 0;font-size:14px;}
footer.plan .wrap{display:block;}
footer.plan a{color:#fff;text-decoration:none;}
footer.plan a:hover{text-decoration:underline;}
footer.plan p{max-width:60em;color:rgba(255,255,255,.9);line-height:1.7;}
.strapline{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:clamp(22px,2.4vw,30px);margin-bottom:16px;letter-spacing:-.01em;}

/* Photography treatment. */
.photo-caption{font-family:Georgia,serif;font-style:italic;font-size:12px;color:#fff;background:rgba(10,42,67,.62);padding:5px 11px;position:absolute;left:14px;bottom:14px;}

/* MOTION — reveal on scroll (paired with motion.js). Respects reduced-motion. */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} }

.concept-tag{position:fixed;bottom:0;left:0;background:var(--ink);color:#fff;font-family:Georgia,serif;font-style:italic;font-size:12px;padding:5px 13px;z-index:60;box-shadow:0 -1px 8px rgba(0,0,0,.25);}

/* THE MENU BUTTON. Below 860px the nav used to be simply hidden with nothing to replace it, so on
   a phone there was NO navigation on any concept, including the one the client is looking at. A
   design that cannot be navigated on a phone is not a design. Progressive: the button is only
   shown at narrow widths, and it needs no JavaScript to exist, only to open. */
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:#fff;}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;transition:transform .2s var(--ease),opacity .2s var(--ease);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media(max-width:860px){
  .nav-toggle{display:block;margin-left:auto;}
  /* Hidden by default, revealed when the button is pressed. Square corners, Plan Blue, per brand. */
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--plan-blue,#0072CE);
           flex-direction:column;gap:0;padding:6px 0;align-items:stretch;box-shadow:0 8px 22px rgba(0,0,0,.28);z-index:70;}
  nav.main.open{display:flex;}
  nav.main a{padding:13px 18px;font-size:16px;border-bottom:1px solid rgba(255,255,255,.16);}
  nav.main a:last-child{border-bottom:0;}
  /* The tap target must be a real one. 44px is the accessible minimum. */
  nav.main a,.nav-toggle{min-height:44px;}
  header.site,.site-header{position:relative;}
  .stats,.trust-grid{grid-template-columns:1fr 1fr;}
  .themes{grid-template-columns:1fr;}
  .themes .cell{border-right:none;border-bottom:1px solid var(--line);}
  .hero-split .wrap{grid-template-columns:1fr;min-height:0;}
  .hero-split .frame{min-height:300px;order:2;margin:8px 14px 0;}
  .hero-editorial .scrim{background:linear-gradient(180deg,rgba(6,26,42,.55) 0%,rgba(6,26,42,.88) 70%);}
  .feature{grid-template-columns:1fr;gap:28px;}
  .feature.media-right .feature-media,.feature-media{order:0;}
  .feature-media{max-width:440px;margin:0 auto;}
}
@media(max-width:520px){ .stats,.trust-grid{grid-template-columns:1fr;} .hero-proof{grid-template-columns:1fr;gap:18px;}
  .brandlock{gap:11px;} .brandlock .plan-logo{height:34px;} .brandlock .ggf-name{font-size:15px;} .brandlock .klh{height:30px;} }