/* H4H Step 4B Fix 9 — About Hero + bilingual Human Resilience Pathway. Scoped to About only. */
.h4h-about-page-step1{--h4h-about-orange:#f28a16;--h4h-about-ink:#111;--h4h-about-muted:#686868}
.h4h-about-page-step1 .h4h-header{position:absolute;inset:0 0 auto 0;z-index:80;background:transparent;border:0;box-shadow:none}
.h4h-about-page-step1 .h4h-header:before{content:"";position:absolute;inset:0 0 -36px 0;background:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.26) 58%,rgba(0,0,0,0) 100%);pointer-events:none;z-index:0}
.h4h-about-page-step1 .h4h-header .h4h-header-inner{position:relative;z-index:1}
.h4h-about-page-step1 .h4h-header .h4h-nav{font-size:16px;font-weight:600;gap:24px}
.h4h-about-page-step1 .h4h-header .h4h-nav>a,.h4h-about-page-step1 .h4h-header .h4h-nav-dropdown-toggle,.h4h-about-page-step1 .h4h-header .h4h-language,.h4h-about-page-step1 .h4h-header .h4h-donate-link{color:#fff;text-shadow:0 2px 7px rgba(0,0,0,.78)}
.h4h-about-page-step1 .h4h-header .h4h-nav a:hover,.h4h-about-page-step1 .h4h-header .h4h-nav .is-active>a,.h4h-about-page-step1 .h4h-header .h4h-nav-dropdown.is-active>.h4h-nav-dropdown-toggle{color:var(--h4h-about-orange)}
.h4h-about-page-step1 .h4h-brand img{filter:drop-shadow(0 2px 5px rgba(0,0,0,.32))}
.h4h-about-hero-step1{height:560px;min-height:560px;position:relative;overflow:hidden;background:#111;isolation:isolate}
.h4h-about-hero-step1 .h4h-about-hero-image-step1{position:absolute;inset:0;width:100%;height:100%;object-fit:contain!important;object-position:center;background:#111;z-index:0}
.h4h-about-hero-step1 .h4h-about-hero-overlay-step1{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.32),rgba(0,0,0,.10) 45%,rgba(0,0,0,.18));z-index:1}
.h4h-about-hero-content-step1{height:560px;min-height:560px;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;color:#fff}
.h4h-about-hero-center-step1{text-align:center;text-shadow:0 3px 12px rgba(0,0,0,.75)}
.h4h-about-hero-center-step1>span{display:block;font-size:14px;line-height:1.4;font-weight:700;margin-bottom:10px}
.h4h-about-hero-center-step1>i{display:block;width:54px;height:3px;margin:0 auto 16px;background:var(--h4h-about-orange);font-style:normal}
.h4h-about-hero-center-step1 h1{font-family:"Cairo",sans-serif;font-size:52px!important;line-height:1.1;margin:0;font-weight:800;letter-spacing:-.5px}
.h4h-about-hero-intro-step1{position:absolute;inset-inline-start:0;bottom:38px;width:min(430px,38vw);margin:0;color:#fff;font-size:15px;line-height:1.9;text-align:start;text-shadow:0 2px 8px rgba(0,0,0,.9)}
.h4h-about-intro-step1{padding:76px 0 72px;background:#fff}
.h4h-about-intro-grid-step1{display:grid;grid-template-columns:minmax(320px,.82fr) minmax(440px,1.18fr);gap:72px;align-items:start}
.h4h-about-approach-step1{padding-top:26px}
.h4h-about-approach-step1 h2{font-size:clamp(34px,3vw,48px);line-height:1.16;margin:8px 0 20px;max-width:560px}
.h4h-about-approach-step1 .h4h-about-approach-summary{font-size:15px;line-height:1.95;color:var(--h4h-about-muted);max-width:580px;margin:0}
.h4h-about-pathway-step1{padding:0;border:0;background:#fff;display:flex;align-items:flex-start;justify-content:center;min-width:0}
.h4h-about-pathway-step1>img{display:block;width:min(100%,590px);max-height:760px;height:auto;object-fit:contain;object-position:top center;margin:0 auto}
@media(max-width:1100px){.h4h-about-page-step1 .h4h-header .h4h-nav{font-size:15px;gap:16px}.h4h-about-intro-grid-step1{grid-template-columns:1fr;gap:38px}.h4h-about-approach-step1{padding-top:0}.h4h-about-pathway-step1>img{width:min(100%,620px);max-height:none}}
@media(max-width:980px){.h4h-about-page-step1 .h4h-header{position:relative;background:#fff}.h4h-about-page-step1 .h4h-header:before{display:none}.h4h-about-page-step1 .h4h-header .h4h-nav>a,.h4h-about-page-step1 .h4h-header .h4h-nav-dropdown-toggle,.h4h-about-page-step1 .h4h-header .h4h-language,.h4h-about-page-step1 .h4h-header .h4h-donate-link{color:#111;text-shadow:none}.h4h-about-page-step1 .h4h-mobile-toggle span{background:#111;box-shadow:none}}
@media(max-width:680px){.h4h-about-hero-step1,.h4h-about-hero-content-step1{height:360px;min-height:360px}.h4h-about-hero-center-step1 h1{font-size:38px!important}.h4h-about-hero-intro-step1{display:none}.h4h-about-intro-step1{padding:50px 0}.h4h-about-intro-grid-step1{grid-template-columns:1fr;gap:26px}.h4h-about-pathway-step1>img{width:100%;max-height:none}}

/* H4H Step 4B Fix 9B — About navbar/hero parity with Strategy.
   Deliberately appended last so accumulated legacy About-header overrides cannot win. */
.h4h-about-page-step1 .h4h-header{
    height:76px!important;
    position:relative!important;
    inset:auto!important;
    z-index:80!important;
    background:#fff!important;
    border-bottom:1px solid #f4f4f4!important;
    box-shadow:none!important;
    color:#111!important;
}
.h4h-about-page-step1 .h4h-header:before{display:none!important;content:none!important}
.h4h-about-page-step1 .h4h-header .h4h-header-inner{height:100%;position:relative;z-index:1}
.h4h-about-page-step1 .h4h-header .h4h-nav{font-size:17px!important;font-weight:600!important;gap:30px!important}
.h4h-about-page-step1 .h4h-header .h4h-nav>a,
.h4h-about-page-step1 .h4h-header .h4h-nav-dropdown-toggle,
.h4h-about-page-step1 .h4h-header .h4h-language,
.h4h-about-page-step1 .h4h-header .h4h-donate-link{
    color:#111!important;
    text-shadow:none!important;
}
.h4h-about-page-step1 .h4h-header .h4h-donate-link{color:var(--h4h-about-orange)!important}
.h4h-about-page-step1 .h4h-header .h4h-nav a:hover,
.h4h-about-page-step1 .h4h-header .h4h-nav .is-active>a,
.h4h-about-page-step1 .h4h-header .h4h-nav-dropdown.is-active>.h4h-nav-dropdown-toggle{
    color:var(--h4h-about-orange)!important;
}
.h4h-about-page-step1 .h4h-brand img{filter:none!important;max-height:52px}
.h4h-about-page-step1 .h4h-mobile-toggle span{background:#111!important;box-shadow:none!important}

/* Hero remains 560px; artwork is never cropped. A 1920x560 image fills this frame exactly. */
.h4h-about-page-step1 .h4h-about-hero-step1{
    height:560px!important;
    min-height:560px!important;
    margin:0!important;
    background:#111!important;
    position:relative;
    overflow:hidden;
}
.h4h-about-page-step1 .h4h-about-hero-step1 .h4h-about-hero-image-step1{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain!important;
    object-position:center center!important;
    background:#111!important;
}
.h4h-about-page-step1 .h4h-about-hero-step1 .h4h-about-hero-overlay-step1{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.27)!important;
}
.h4h-about-page-step1 .h4h-about-hero-content-step1{
    height:560px!important;
    min-height:560px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    text-align:center;
}
.h4h-about-page-step1 .h4h-about-hero-center-step1{max-width:820px;margin:0 auto;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.62)}
.h4h-about-page-step1 .h4h-about-hero-center-step1>span{
    color:#f5a020;
    font-size:13px!important;
    line-height:1.5;
    font-weight:700;
    margin-bottom:8px!important;
    text-shadow:0 2px 7px rgba(0,0,0,.65);
}
.h4h-about-page-step1 .h4h-about-hero-center-step1>i{display:none!important}
.h4h-about-page-step1 .h4h-about-hero-center-step1 h1{
    color:#fff;
    font-family:"Cairo",sans-serif;
    font-size:52px!important;
    line-height:1.12!important;
    font-weight:800!important;
    letter-spacing:0!important;
    margin:0!important;
    text-shadow:0 2px 9px rgba(0,0,0,.62);
}
/* Strategy-parity: About hero contains a concise kicker + title only. */
.h4h-about-page-step1 .h4h-about-hero-intro-step1{display:none!important}

@media(max-width:1100px){
    .h4h-about-page-step1 .h4h-header .h4h-nav{font-size:15px!important;gap:16px!important}
}
@media(max-width:980px){
    .h4h-about-page-step1 .h4h-header{height:72px!important;background:#fff!important}
}
@media(max-width:680px){
    .h4h-about-page-step1 .h4h-about-hero-step1,
    .h4h-about-page-step1 .h4h-about-hero-content-step1{height:360px!important;min-height:360px!important}
    .h4h-about-page-step1 .h4h-about-hero-center-step1 h1{font-size:36px!important}
    .h4h-about-page-step1 .h4h-about-hero-center-step1>span{font-size:12px!important}
}

/* H4H Step 4B Fix 9C — About hero content + dropdown parity.
   This block is appended last and intentionally scoped to About only. */

/* 1) Dropdown readability: identical white surface/readability contract to the other inner pages. */
.h4h-about-page-step1 .h4h-header .h4h-nav-dropdown-menu{
    background:#fff!important;
    border-top:3px solid var(--h4h-about-orange)!important;
    box-shadow:0 18px 45px rgba(0,0,0,.14)!important;
    color:#222!important;
}
.h4h-about-page-step1 .h4h-header .h4h-nav-dropdown-menu a{
    color:#252525!important;
    text-shadow:none!important;
    background:transparent!important;
    font-family:"Cairo",sans-serif!important;
    font-size:14px!important;
    font-weight:700!important;
}
.h4h-about-page-step1 .h4h-header .h4h-nav-dropdown-menu a:hover,
.h4h-about-page-step1 .h4h-header .h4h-nav-dropdown-menu a.active{
    color:var(--h4h-about-orange)!important;
    background:#fcf8f3!important;
}

/* 2) Hero: keep 560px and keep the foreground image uncropped.
      A soft cover copy fills the frame behind it so non-1920x560 legacy art does not leave black bars. */
.h4h-about-page-step1 .h4h-about-hero-step1{
    height:560px!important;
    min-height:560px!important;
    background:#111!important;
    position:relative!important;
    overflow:hidden!important;
    isolation:isolate!important;
}
.h4h-about-page-step1 .h4h-about-hero-bgfill-step1{
    position:absolute!important;
    inset:-18px!important;
    width:calc(100% + 36px)!important;
    height:calc(100% + 36px)!important;
    object-fit:cover!important;
    object-position:center center!important;
    filter:blur(13px) saturate(.88) brightness(.72)!important;
    transform:scale(1.035)!important;
    opacity:.70!important;
    z-index:0!important;
    pointer-events:none!important;
}
.h4h-about-page-step1 .h4h-about-hero-step1 .h4h-about-hero-image-step1{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    background:transparent!important;
    z-index:1!important;
}
.h4h-about-page-step1 .h4h-about-hero-step1 .h4h-about-hero-overlay-step1{
    position:absolute!important;
    inset:0!important;
    background:rgba(0,0,0,.30)!important;
    z-index:2!important;
    pointer-events:none!important;
}

/* 3) Hero typography follows the inner-page hierarchy: kicker → title → concise description. */
.h4h-about-page-step1 .h4h-about-hero-content-step1{
    height:560px!important;
    min-height:560px!important;
    position:relative!important;
    z-index:3!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    padding:44px 24px!important;
    text-align:center!important;
    color:#fff!important;
}
.h4h-about-page-step1 .h4h-about-hero-center-step1{
    width:min(100%,860px)!important;
    max-width:860px!important;
    margin:0 auto!important;
    text-align:center!important;
    text-shadow:0 2px 9px rgba(0,0,0,.68)!important;
}
.h4h-about-page-step1 .h4h-about-hero-center-step1>span{
    display:block!important;
    margin:0 0 9px!important;
    color:#f5a020!important;
    font-size:14px!important;
    line-height:1.5!important;
    font-weight:700!important;
    text-shadow:0 2px 7px rgba(0,0,0,.72)!important;
}
.h4h-about-page-step1 .h4h-about-hero-center-step1>i{
    display:block!important;
    width:42px!important;
    height:3px!important;
    margin:0 auto 14px!important;
    background:var(--h4h-about-orange)!important;
    font-style:normal!important;
}
.h4h-about-page-step1 .h4h-about-hero-center-step1 h1{
    margin:0!important;
    color:#fff!important;
    font-family:"Cairo",sans-serif!important;
    font-size:50px!important;
    line-height:1.14!important;
    font-weight:800!important;
    letter-spacing:0!important;
    text-shadow:0 2px 10px rgba(0,0,0,.72)!important;
}
.h4h-about-page-step1 .h4h-about-hero-intro-step1{
    display:block!important;
    position:static!important;
    inset:auto!important;
    width:min(100%,720px)!important;
    max-width:720px!important;
    margin:17px auto 0!important;
    color:#fff!important;
    font-family:"Cairo",sans-serif!important;
    font-size:16px!important;
    line-height:1.85!important;
    font-weight:500!important;
    text-align:center!important;
    text-shadow:0 2px 8px rgba(0,0,0,.86)!important;
}

@media(max-width:980px){
    .h4h-about-page-step1 .h4h-header .h4h-nav-dropdown-menu a{font-size:13px!important}
}
@media(max-width:680px){
    .h4h-about-page-step1 .h4h-about-hero-step1,
    .h4h-about-page-step1 .h4h-about-hero-content-step1{height:360px!important;min-height:360px!important}
    .h4h-about-page-step1 .h4h-about-hero-content-step1{padding:30px 20px!important}
    .h4h-about-page-step1 .h4h-about-hero-center-step1 h1{font-size:36px!important}
    .h4h-about-page-step1 .h4h-about-hero-center-step1>span{font-size:12px!important}
    .h4h-about-page-step1 .h4h-about-hero-intro-step1{font-size:14px!important;line-height:1.75!important;margin-top:13px!important;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}

/* H4H Step 4B Fix 9D — shared internal hero system + About/Strategy visual parity.
   This block is intentionally last so legacy About-specific header rules cannot override it. */
:root{
    --h4h-internal-hero-overlay:rgba(0,0,0,.32);
    --h4h-internal-hero-title-shadow:0 2px 9px rgba(0,0,0,.58);
    --h4h-internal-hero-copy-shadow:0 2px 7px rgba(0,0,0,.62);
}

/* Shared inner-page image Hero primitives. Strategy keeps its approved geometry; About adopts the same visual language. */
.h4h-internal-hero-system{position:relative;overflow:hidden;color:#fff;isolation:isolate}
.h4h-internal-hero-system-overlay{position:absolute!important;inset:0!important;background:var(--h4h-internal-hero-overlay)!important;z-index:2!important;pointer-events:none!important}
.h4h-internal-hero-system-content{position:relative!important;z-index:3!important;color:#fff!important;text-align:center!important;text-shadow:var(--h4h-internal-hero-title-shadow)!important}

/* About header must be the same clear white public header used by Strategy and other inner pages. */
.h4h-about-page-step1 .h4h-header,
.h4h-about-page-v7 .h4h-header,
.h4h-page-about .h4h-header{
    position:relative!important;
    inset:auto!important;
    z-index:90!important;
    background:#fff!important;
    color:#181818!important;
    border-bottom:1px solid #ece9e3!important;
    box-shadow:0 1px 0 rgba(0,0,0,.02)!important;
}
.h4h-about-page-step1 .h4h-header .h4h-nav>a,
.h4h-about-page-step1 .h4h-header .h4h-nav-dropdown-toggle,
.h4h-about-page-step1 .h4h-header .h4h-language{
    color:#1d1d1d!important;
    text-shadow:none!important;
    font-family:"Cairo",sans-serif!important;
    font-size:17px!important;
    font-weight:600!important;
}
.h4h-about-page-step1 .h4h-header .h4h-donate-link{
    color:var(--h4h-about-orange)!important;
    text-shadow:none!important;
    font-family:"Cairo",sans-serif!important;
    font-weight:700!important;
}
.h4h-about-page-step1 .h4h-header .h4h-nav>a:hover,
.h4h-about-page-step1 .h4h-header .h4h-nav>a.active,
.h4h-about-page-step1 .h4h-header .h4h-nav-dropdown.is-active>.h4h-nav-dropdown-toggle,
.h4h-about-page-step1 .h4h-header .h4h-nav-dropdown.is-open>.h4h-nav-dropdown-toggle{
    color:var(--h4h-about-orange)!important;
}

/* Dropdown: force a readable white surface regardless of any Hero/page legacy color rule. */
.h4h-about-page-step1 .h4h-header .h4h-nav .h4h-nav-dropdown-menu,
.h4h-about-page-step1 .h4h-header .h4h-nav-dropdown-menu{
    background:#fff!important;
    color:#1d1d1d!important;
    border-top:3px solid var(--h4h-about-orange)!important;
    box-shadow:0 18px 45px rgba(0,0,0,.14)!important;
    text-shadow:none!important;
    z-index:120!important;
}
.h4h-about-page-step1 .h4h-header .h4h-nav .h4h-nav-dropdown-menu>a,
.h4h-about-page-step1 .h4h-header .h4h-nav-dropdown-menu>a{
    color:#222!important;
    background:#fff!important;
    text-shadow:none!important;
    font-family:"Cairo",sans-serif!important;
    font-size:14px!important;
    line-height:1.55!important;
    font-weight:700!important;
}
.h4h-about-page-step1 .h4h-header .h4h-nav .h4h-nav-dropdown-menu>a:hover,
.h4h-about-page-step1 .h4h-header .h4h-nav .h4h-nav-dropdown-menu>a.active,
.h4h-about-page-step1 .h4h-header .h4h-nav-dropdown-menu>a:hover,
.h4h-about-page-step1 .h4h-header .h4h-nav-dropdown-menu>a.active{
    color:var(--h4h-about-orange)!important;
    background:#fcf8f3!important;
}

/* About Hero: preserve 560px and uncropped foreground; match Strategy's concise hierarchy and simple dark shadow. */
.h4h-about-page-step1 .h4h-about-hero-step1{
    height:560px!important;
    min-height:560px!important;
    background:#161616!important;
    position:relative!important;
    overflow:hidden!important;
    isolation:isolate!important;
}
.h4h-about-page-step1 .h4h-about-hero-bgfill-step1{
    position:absolute!important;
    inset:-20px!important;
    width:calc(100% + 40px)!important;
    height:calc(100% + 40px)!important;
    object-fit:cover!important;
    object-position:center!important;
    filter:blur(14px) saturate(.86) brightness(.70)!important;
    transform:scale(1.04)!important;
    opacity:.62!important;
    z-index:0!important;
    pointer-events:none!important;
}
.h4h-about-page-step1 .h4h-about-hero-step1 .h4h-about-hero-image-step1{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    background:transparent!important;
    z-index:1!important;
}
.h4h-about-page-step1 .h4h-about-hero-step1 .h4h-about-hero-overlay-step1{
    background:var(--h4h-internal-hero-overlay)!important;
}
.h4h-about-page-step1 .h4h-about-hero-content-step1{
    height:560px!important;
    min-height:560px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    padding:42px 28px!important;
    color:#fff!important;
    text-align:center!important;
}
.h4h-about-page-step1 .h4h-about-hero-center-step1{
    width:min(100%,860px)!important;
    max-width:860px!important;
    margin:0 auto!important;
    text-align:center!important;
    text-shadow:var(--h4h-internal-hero-title-shadow)!important;
}
.h4h-about-page-step1 .h4h-about-hero-center-step1>span{
    display:block!important;
    margin:0 0 8px!important;
    color:#f5a020!important;
    font-size:13px!important;
    line-height:1.5!important;
    font-weight:700!important;
    text-shadow:var(--h4h-internal-hero-copy-shadow)!important;
}
.h4h-about-page-step1 .h4h-about-hero-center-step1>i{
    display:block!important;
    width:38px!important;
    height:2px!important;
    margin:0 auto 13px!important;
    background:var(--h4h-about-orange)!important;
}
.h4h-about-page-step1 .h4h-about-hero-center-step1 h1{
    margin:0!important;
    color:#fff!important;
    font-family:"Cairo",sans-serif!important;
    font-size:clamp(44px,4vw,54px)!important;
    line-height:1.10!important;
    font-weight:800!important;
    letter-spacing:0!important;
    text-shadow:var(--h4h-internal-hero-title-shadow)!important;
}
.h4h-about-page-step1 .h4h-about-hero-intro-step1{
    display:block!important;
    position:static!important;
    inset:auto!important;
    width:min(100%,700px)!important;
    max-width:700px!important;
    margin:16px auto 0!important;
    color:rgba(255,255,255,.96)!important;
    font-family:"Cairo",sans-serif!important;
    font-size:16px!important;
    line-height:1.85!important;
    font-weight:500!important;
    text-align:center!important;
    text-shadow:var(--h4h-internal-hero-copy-shadow)!important;
}

/* Keep Strategy on the same shared readability variables without changing its approved 480px composition. */
.h4h-strategy-hero-v7.h4h-internal-hero-system .h4h-strategy-hero-overlay-v7{background:var(--h4h-internal-hero-overlay)!important}
.h4h-strategy-hero-v7.h4h-internal-hero-system .h4h-strategy-hero-content-v7{text-shadow:var(--h4h-internal-hero-title-shadow)!important}

@media(max-width:980px){
    .h4h-about-page-step1 .h4h-header .h4h-nav>a,
    .h4h-about-page-step1 .h4h-header .h4h-nav-dropdown-toggle,
    .h4h-about-page-step1 .h4h-header .h4h-language{font-size:15px!important}
    .h4h-about-page-step1 .h4h-header .h4h-nav .h4h-nav-dropdown-menu>a{font-size:13px!important}
}
@media(max-width:680px){
    .h4h-about-page-step1 .h4h-about-hero-step1,
    .h4h-about-page-step1 .h4h-about-hero-content-step1{height:360px!important;min-height:360px!important}
    .h4h-about-page-step1 .h4h-about-hero-content-step1{padding:28px 20px!important}
    .h4h-about-page-step1 .h4h-about-hero-center-step1 h1{font-size:36px!important}
    .h4h-about-page-step1 .h4h-about-hero-center-step1>span{font-size:12px!important}
    .h4h-about-page-step1 .h4h-about-hero-intro-step1{font-size:14px!important;line-height:1.72!important;margin-top:12px!important;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}