:root{
--navy:#102a43;--navy-900:#0a2033;--navy-700:#173e5f;--green:#006a4e;--green-700:#00533e;
--gold:#c6a15b;--gold-soft:#f4ead3;--teal:#176b6b;--red:#f42a41;--warm:#fafaf7;--soft:#f1f5f8;
--white:#fff;--text:#243b53;--muted:#627d98;--border:#d9e2ec;--success:#2f855a;--warning:#b7791f;
--danger:#c53030;--shadow:0 18px 55px rgba(16,42,67,.10);--shadow-sm:0 8px 26px rgba(16,42,67,.08);
--radius:16px;--radius-sm:10px;--max:1180px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--warm);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.62;-webkit-font-smoothing:antialiased}img{max-width:125%;display:block}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-50px;left:15px;background:#fff;padding:10px 14px;z-index:9999;border-radius:8px}.skip-link:focus{top:15px}.site-header{position:sticky;top:0;z-index:1000;background:rgba(250,250,247,.95);backdrop-filter:blur(14px);border-bottom:1px solid rgba(217,226,236,.8)}.nav-wrap{height:78px;display:flex;align-items:center;gap:28px}.brand{width:216px;flex:0 0 auto}.brand img{height:59px}.nav{display:flex;align-items:center;gap:22px;margin-left:auto;font-size:13px;font-weight:700;color:#334e68}.nav a{position:relative;padding:29px 0}.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:18px;height:2px;background:var(--green);transition:.2s}.nav a:hover:after,.nav a.active:after{right:0}.nav .nav-cta{color:#fff;background:var(--green);padding:11px 16px;border-radius:8px;box-shadow:0 7px 20px rgba(0,106,78,.18)}.nav .nav-cta:after{display:none}.nav .nav-cta:hover{background:var(--green-700)}.mobile-toggle{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--border);background:#fff;border-radius:9px;align-items:center;justify-content:center;cursor:pointer}.mobile-toggle span,.mobile-toggle:before,.mobile-toggle:after{content:"";display:block;width:20px;height:2px;background:var(--navy);position:absolute}.mobile-toggle:before{transform:translateY(-6px)}.mobile-toggle:after{transform:translateY(6px)}
.hero{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--navy-900),var(--navy) 58%,#0c4053);color:#fff;min-height:610px;display:flex;align-items:center}.hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 20%,rgba(255,255,255,.07) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(to right,#000,transparent 75%)}.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:28px;position:relative;z-index:1}.hero-copy{padding:82px 0}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.16em;font-weight:800;color:var(--gold)}.hero h1,.page-hero h1,.display{font-family:Georgia,"Times New Roman",serif;line-height:1.06;letter-spacing:-.025em;margin:.35em 0}.hero h1{font-size:clamp(43px,5vw,69px);max-width:720px}.hero p{font-size:18px;color:#d9e6ee;max-width:690px}.hero-actions,.button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 18px;border:1px solid transparent;border-radius:8px;font-weight:800;font-size:14px;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--green);color:#fff;box-shadow:0 11px 25px rgba(0,106,78,.25)}.btn-primary:hover{background:#057758}.btn-secondary{background:#fff;color:var(--navy);border-color:#fff}.btn-outline-light{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.04)}.btn-outline{color:var(--navy);border-color:#9fb3c8;background:transparent}.btn-gold{background:var(--gold);color:var(--navy-900)}.btn-sm{min-height:38px;padding:8px 13px;font-size:12px}.hero-art{align-self:end;padding-top:45px}.hero-art img{width:100%;max-height:540px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 24px 45px rgba(0,0,0,.28))}.trust-strip{background:#0c3553;color:#d9e6ee;border-top:1px solid rgba(255,255,255,.1)}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}.trust-item{padding:18px 14px;display:flex;gap:10px;align-items:center;justify-content:center;border-right:1px solid rgba(255,255,255,.1);font-size:13px;font-weight:700}.trust-item:last-child{border-right:0}.icon-dot{width:28px;height:28px;border:1px solid rgba(255,255,255,.28);border-radius:50%;display:grid;place-items:center;color:var(--gold)}
.section{padding:82px 0}.section-sm{padding:58px 0}.section-alt{background:var(--soft)}.section-dark{background:var(--navy);color:#fff}.section-green{background:var(--green);color:#fff}.section-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:34px}.section-head.center{text-align:center;display:block}.section-head h2,.content-title{font-family:Georgia,"Times New Roman",serif;color:var(--navy);font-size:clamp(30px,3vw,43px);line-height:1.15;margin:8px 0 10px}.section-dark .section-head h2,.section-green .section-head h2{color:#fff}.section-head p{max-width:680px;color:var(--muted);margin:0}.section-dark .section-head p,.section-green .section-head p{color:#d5e3eb}.text-link{font-weight:800;color:var(--green);white-space:nowrap}.text-link:hover{text-decoration:underline}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}.visual-panel{
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius);
padding:22px;
box-shadow:var(--shadow-sm);
width:calc(100% + 150px);
justify-self:start;
}.visual-panel img{width:150%}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card-grid.two{grid-template-columns:repeat(2,1fr)}.card-grid.four{grid-template-columns:repeat(4,1fr)}.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:24px;box-shadow:0 1px 0 rgba(16,42,67,.02);transition:.2s}.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:#b8cad7}.card h3{font-family:Georgia,"Times New Roman",serif;color:var(--navy);font-size:21px;line-height:1.25;margin:13px 0 7px}.card p{font-size:14px;color:var(--muted);margin:0}.card-icon{width:48px;height:48px;border-radius:50%;background:#e6f2ed;color:var(--green);display:grid;place-items:center;font-size:21px}.card-icon.gold{background:var(--gold-soft);color:#8a651f}.card-icon.navy{background:#e8eef3;color:var(--navy)}.purpose-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.purpose-card{display:grid;grid-template-columns:auto 1fr;gap:18px}.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.work-card{padding:22px;text-align:left}.work-card h3{font-size:19px}.stats{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}.stat{text-align:center;padding:27px 15px;border-right:1px solid var(--border)}.stat:last-child{border-right:0}.stat strong{display:block;font-family:Georgia,serif;color:var(--green);font-size:36px;line-height:1}.stat span{display:block;color:var(--muted);font-size:12px;font-weight:700;margin-top:8px}.member-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.member-card{padding:0;overflow:hidden}.member-card .avatar{height:210px;border-radius:0}.avatar{position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#dce7ed,#eef5f1)}.avatar:before{content:"";position:absolute;width:105px;height:105px;border-radius:50%;background:var(--skin,#d8a67b);top:36px}.avatar:after{content:"";position:absolute;width:150px;height:130px;border-radius:70px 70px 10px 10px;background:var(--suit,#173e5f);top:120px}.avatar .hair{position:absolute;z-index:1;width:116px;height:100px;border-radius:65px 65px 38px 38px;background:var(--hair,#725342);top:25px}.avatar .face{position:absolute;z-index:2;width:82px;height:93px;border-radius:45%;background:var(--skin,#d8a67b);top:45px}.avatar .face:before,.avatar .face:after{content:"";position:absolute;width:5px;height:5px;background:#25364a;border-radius:50%;top:39px}.avatar .face:before{left:23px}.avatar .face:after{right:23px}.avatar .mouth{position:absolute;z-index:3;width:22px;height:9px;border-bottom:2px solid #9f5252;border-radius:50%;top:105px;left:calc(50% - 11px)}.avatar .shirt{position:absolute;z-index:2;width:55px;height:85px;background:#fff;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);top:122px}.member-body{padding:19px}.member-body h3{margin:0 0 4px;font-size:18px}.member-meta{color:var(--muted);font-size:12px;line-height:1.5}.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.045em;background:#e8f3ef;color:var(--green);margin-top:12px}.badge.gold{background:var(--gold-soft);color:#795918}.badge.navy{background:#e8eef3;color:var(--navy)}.badge.grey{background:#eef2f4;color:#536878}.split-feature{display:grid;grid-template-columns:1fr 1fr;gap:20px}.petition-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:25px;box-shadow:var(--shadow-sm)}.petition-card h3{font-family:Georgia,serif;font-size:25px;color:var(--navy);margin:10px 0}.petition-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:12px}.progress{height:10px;background:#e7edf1;border-radius:999px;overflow:hidden;margin:16px 0}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--teal));border-radius:inherit}.petition-numbers{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.petition-numbers strong{color:var(--navy);font-size:18px}.event-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.event-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.event-image{height:150px;background:var(--navy);position:relative;overflow:hidden}.event-image img{width:100%;height:100%;object-fit:cover}.date-chip{position:absolute;top:14px;left:14px;width:52px;background:#fff;border-radius:8px;text-align:center;padding:7px 3px;color:var(--navy);box-shadow:var(--shadow-sm);font-weight:900;line-height:1}.date-chip span{font-size:20px;display:block}.date-chip small{font-size:9px;text-transform:uppercase}.event-body{padding:19px}.event-body h3{font-family:Georgia,serif;color:var(--navy);font-size:19px;line-height:1.28;margin:0 0 9px}.event-body p{font-size:12px;color:var(--muted);margin:4px 0}.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.news-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.news-thumb{height:155px;background:#eef4f2}.news-thumb img{width:100%;height:100%;object-fit:cover}.news-body{padding:20px}.news-body h3{font-family:Georgia,serif;color:var(--navy);font-size:19px;line-height:1.3;margin:8px 0}.news-body p{font-size:13px;color:var(--muted)}.kicker{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:900;color:var(--green)}.cta-band{padding:45px 0;background:linear-gradient(100deg,var(--navy-900),var(--navy));color:#fff}.cta-grid{display:flex;align-items:center;justify-content:space-between;gap:30px}.cta-grid h2{font-family:Georgia,serif;font-size:32px;margin:0}.cta-grid p{color:#d4e2e9;margin:6px 0 0}.newsletter{background:var(--green);color:#fff;padding:29px 0}.newsletter-grid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px}.newsletter h3{font-family:Georgia,serif;font-size:26px;margin:0}.newsletter p{font-size:13px;color:#d8ede6;margin:5px 0 0}.newsletter-form{display:flex;min-width:min(500px,100%)}.newsletter-form input{flex:1;border:0;padding:13px 15px;border-radius:8px 0 0 8px}.newsletter-form button{border-radius:0 8px 8px 0;border:0;background:var(--gold);color:var(--navy);font-weight:900;padding:0 20px;cursor:pointer}
.page-hero{background:linear-gradient(135deg,#eef5f7,#fff);border-bottom:1px solid var(--border);padding:70px 0}.page-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px}.page-hero h1{font-size:clamp(38px,4vw,57px);color:var(--navy)}.page-hero p{font-size:17px;color:var(--muted);max-width:670px}.page-hero-art{background:#fff;border:1px solid var(--border);border-radius:var(--radius);min-height:300px;display:grid;place-items:center;overflow:hidden}.page-hero-art img{width:100%;height:100%;object-fit:cover}.breadcrumb{font-size:12px;color:var(--muted);margin-bottom:15px}.breadcrumb a{color:var(--green)}.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-36px;position:relative;z-index:2}.principle{text-align:center;padding:25px 18px}.principle .card-icon{margin:auto}.vision-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px}.vision-card{padding:29px}.check-list{list-style:none;padding:0;margin:15px 0 0}.check-list li{position:relative;padding-left:26px;margin:9px 0;color:var(--text);font-size:14px}.check-list li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}.notice{background:#fff9e9;border:1px solid #ead9ad;border-radius:10px;padding:16px 18px;color:#6f561d;font-size:13px}.accordion{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:#fff}.accordion-item+ .accordion-item{border-top:1px solid var(--border)}.accordion-button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:17px 19px;border:0;background:#fff;color:var(--navy);font-weight:800;text-align:left;cursor:pointer}.accordion-button:after{content:"+";font-size:20px;color:var(--green)}.accordion-button[aria-expanded="true"]:after{content:"−"}.accordion-panel{display:none;padding:0 19px 18px;color:var(--muted);font-size:14px}.accordion-panel.open{display:block}.filter-bar{display:grid;grid-template-columns:2fr repeat(3,1fr) auto;gap:10px;background:#fff;border:1px solid var(--border);padding:14px;border-radius:var(--radius-sm);margin-bottom:24px;box-shadow:var(--shadow-sm)}.input,.select,.textarea{width:100%;border:1px solid #bcccdc;border-radius:8px;background:#fff;padding:11px 12px;color:var(--text);outline:none;transition:.18s}.input:focus,.select:focus,.textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,106,78,.11)}.textarea{min-height:130px;resize:vertical}.empty-state{grid-column:1/-1;text-align:center;padding:50px;background:#fff;border:1px dashed #9fb3c8;border-radius:var(--radius-sm);color:var(--muted)}.profile-hero{padding:55px 0}.profile-grid{display:grid;grid-template-columns:340px 1fr;gap:38px;align-items:start}.profile-photo{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border)}.profile-photo .avatar{height:430px}.profile-intro h1{font-family:Georgia,serif;font-size:45px;color:var(--navy);margin:0}.profile-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:25px 0}.fact{background:#fff;border:1px solid var(--border);border-radius:9px;padding:14px}.fact small{display:block;color:var(--muted);font-weight:700}.fact strong{display:block;color:var(--navy);margin-top:3px}.tag-list{display:flex;flex-wrap:wrap;gap:7px}.tag{border:1px solid #b9c9d6;background:#fff;border-radius:999px;padding:6px 10px;font-size:11px;color:var(--navy);font-weight:700}.profile-content{display:grid;grid-template-columns:1.5fr .75fr;gap:20px}.map-panel{padding:20px}.map-panel img{width:100%;max-height:460px}.region-tabs,.petition-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 25px}.tab-btn{border:1px solid var(--border);background:#fff;border-radius:999px;padding:9px 15px;color:var(--navy);font-weight:800;font-size:12px;cursor:pointer}.tab-btn.active{background:var(--green);color:#fff;border-color:var(--green)}.country-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.country-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px}.country-top{display:flex;align-items:center;gap:12px}.flag{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--border);display:grid;place-items:center;font-size:20px}.country-card h3{font-size:17px;margin:0;color:var(--navy)}.country-stats{display:flex;gap:18px;font-size:11px;color:var(--muted);margin:14px 0}.country-hero{min-height:380px;background:linear-gradient(90deg,rgba(8,34,53,.92),rgba(8,34,53,.4)),url('../img/conference.svg') center/cover;color:#fff;display:flex;align-items:end}.country-hero .container{padding-bottom:50px}.country-hero h1{font-family:Georgia,serif;font-size:50px;margin:8px 0}.country-tabs{background:#fff;border-bottom:1px solid var(--border)}.country-tabs-inner{display:flex;gap:30px;overflow:auto}.country-tabs a{padding:19px 0;font-size:13px;font-weight:800;color:var(--muted);white-space:nowrap}.country-tabs a.active{color:var(--green);border-bottom:2px solid var(--green)}.timeline{position:relative;padding-left:28px}.timeline:before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--border)}.timeline-item{position:relative;margin-bottom:23px}.timeline-item:before{content:"";position:absolute;left:-27px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--green);border:3px solid #d9eee7}.timeline-item time{font-size:11px;color:var(--green);font-weight:900}.timeline-item h4{margin:2px 0;color:var(--navy)}.programme-hero{background:#fff;border-bottom:1px solid var(--border)}.programme-image{height:410px}.programme-image img{width:100%;height:100%;object-fit:cover}.programme-title{margin-top:-115px;position:relative;background:linear-gradient(90deg,rgba(10,32,51,.98),rgba(10,32,51,.82));color:#fff;border-radius:var(--radius);padding:34px}.programme-title h1{font-family:Georgia,serif;font-size:48px;margin:5px 0}.sidebar-layout{display:grid;grid-template-columns:1fr 330px;gap:30px}.sidebar-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:20px;margin-bottom:16px}.sidebar-card h3{font-family:Georgia,serif;color:var(--navy);margin-top:0}.petition-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.petition-list .petition-card{display:flex;flex-direction:column}.petition-list .petition-card .button-row{margin-top:auto;padding-top:15px}.petition-hero{background:#eef5f2;border-bottom:1px solid var(--border);padding:50px 0}.petition-heading{display:grid;grid-template-columns:1fr 320px;gap:35px}.petition-heading h1{font-family:Georgia,serif;color:var(--navy);font-size:44px;line-height:1.12;margin:12px 0}.petition-summary-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)}.petition-summary-box .big-number{font-family:Georgia,serif;font-size:35px;color:var(--navy);font-weight:700}.sticky{position:sticky;top:110px}.anchor-nav{display:flex;gap:20px;overflow:auto;border-bottom:1px solid var(--border);background:#fff}.anchor-nav a{padding:17px 0;font-size:12px;font-weight:800;color:var(--muted);white-space:nowrap}.anchor-nav a:hover{color:var(--green)}.prose h2{font-family:Georgia,serif;color:var(--navy);font-size:29px;margin-top:38px}.prose p{color:#486581}.signature-form{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)}.signature-form h3{font-family:Georgia,serif;color:var(--navy);font-size:25px;margin-top:0}.field{margin-bottom:14px}.field label{display:block;font-size:12px;font-weight:800;color:var(--navy);margin-bottom:6px}.check{display:flex;gap:9px;align-items:flex-start;font-size:11px;color:var(--muted);margin:12px 0}.check input{margin-top:3px}.supporters{display:flex;align-items:center;margin:14px 0}.supporter-avatar{width:42px;height:42px;border-radius:50%;border:3px solid #fff;background:linear-gradient(145deg,#d9e5eb,#98b6c5);margin-left:-8px;display:grid;place-items:center;color:var(--navy);font-size:11px;font-weight:900}.supporter-avatar:first-child{margin-left:0}.form-shell{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.stepper{display:grid;grid-template-columns:repeat(4,1fr);background:#eef3f5;border-bottom:1px solid var(--border)}.step{padding:17px 12px;text-align:center;font-size:11px;font-weight:800;color:var(--muted);position:relative}.step.active{background:#fff;color:var(--green)}.step span{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#cbd8df;color:#fff;margin-right:6px}.step.active span,.step.done span{background:var(--green)}.form-step{display:none;padding:31px}.form-step.active{display:block}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.form-grid .full{grid-column:1/-1}.form-actions{display:flex;justify-content:space-between;gap:12px;margin-top:25px}.form-note{font-size:12px;color:var(--muted);background:var(--soft);padding:13px;border-radius:8px}.alert{padding:13px 15px;border-radius:8px;margin:15px 0;font-size:13px;display:none}.alert.show{display:block}.alert.success{background:#e4f4eb;color:#246845;border:1px solid #b6dfc7}.alert.error{background:#fde8e8;color:#9b2c2c;border:1px solid #f3baba}.events-feature{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}.featured-event{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.featured-event img{height:310px;width:100%;object-fit:cover}.featured-event .event-body{padding:25px}.mini-events{display:grid;gap:14px}.mini-event{display:grid;grid-template-columns:78px 1fr;gap:15px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:15px}.mini-date{display:grid;place-items:center;background:var(--navy);color:#fff;border-radius:8px;font-weight:900;text-align:center;line-height:1}.mini-date strong{font-size:27px}.mini-date small{font-size:10px}.resource-feature{display:grid;grid-template-columns:1.15fr .85fr;gap:25px}.resource-hero-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.resource-hero-card img{width:100%;height:315px;object-fit:cover}.resource-list{display:grid;gap:12px}.resource-item{display:grid;grid-template-columns:90px 1fr;gap:14px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px}.resource-item img{width:90px;height:78px;object-fit:cover;border-radius:7px}.resource-item h3{font-family:Georgia,serif;font-size:16px;color:var(--navy);margin:3px 0}.contact-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:30px}.contact-cards{display:grid;gap:12px}.contact-card{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px}.contact-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#e5f2ed;color:var(--green)}.contact-card strong{display:block;color:var(--navy)}.contact-card small{color:var(--muted)}.legal-tabs{display:grid;grid-template-columns:230px 1fr;gap:35px}.legal-nav{position:sticky;top:110px;align-self:start;display:grid;background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden}.legal-nav a{padding:13px 15px;border-bottom:1px solid var(--border);font-size:12px;font-weight:800;color:var(--muted)}.legal-nav a:hover{color:var(--green);background:#f6faf8}.legal-content h2{font-family:Georgia,serif;color:var(--navy);margin-top:42px}.site-footer{background:#0a2033;color:#d8e4eb;padding:55px 0 0}.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:45px}.footer-brand img{filter:brightness(0) invert(1);max-width:200px}.footer-brand p{font-size:13px;color:#aebfca;max-width:320px}.footer-col h3{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin:0 0 14px}.footer-col a{display:block;color:#c3d1da;font-size:13px;margin:8px 0}.footer-col a:hover{color:#fff}.footer-bottom{margin-top:40px;border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;gap:25px;color:#91a7b5;font-size:11px}.socials{display:flex;gap:8px;margin-top:16px}.socials a{width:34px;height:34px;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;border-radius:50%;font-size:11px}
@media(max-width:1050px){.nav{gap:14px;font-size:12px}.brand{width:180px}.hero{min-height:560px}.card-grid.four,.member-grid,.country-grid{grid-template-columns:repeat(2,1fr)}.work-grid,.card-grid,.event-list,.news-grid,.petition-list{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1.5fr repeat(2,1fr)}.footer-col:last-child{grid-column:2/4}.filter-bar{grid-template-columns:1fr 1fr 1fr}.filter-bar .btn{grid-column:auto}.profile-grid{grid-template-columns:290px 1fr}}
@media(max-width:860px){.mobile-toggle{display:flex}.nav{display:none;position:absolute;top:78px;left:0;right:0;background:var(--warm);padding:15px 20px 24px;border-bottom:1px solid var(--border);box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:0}.nav.open{display:flex}.nav a{padding:12px 4px}.nav a:after{bottom:5px}.nav .nav-cta{text-align:center;margin-top:8px}.hero-grid,.page-hero-grid,.two-col,.vision-grid,.profile-grid,.profile-content,.sidebar-layout,.petition-heading,.events-feature,.resource-feature,.contact-grid,.legal-tabs{grid-template-columns:1fr}.hero-copy{padding:65px 0 25px}.hero-art{max-width:650px;margin:auto}.principles{grid-template-columns:repeat(2,1fr);margin-top:20px}.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--border)}.purpose-grid,.split-feature{grid-template-columns:1fr}.newsletter-grid{grid-template-columns:1fr}.newsletter-form{min-width:0}.cta-grid{align-items:flex-start;flex-direction:column}.sticky,.legal-nav{position:static}.programme-title{margin-top:-70px}.page-hero-art{min-height:230px}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-col:last-child{grid-column:auto}.country-hero h1{font-size:40px}}
@media(max-width:620px){.container{width:min(100% - 26px,var(--max))}.nav-wrap{height:68px}.brand{width:168px}.brand img{height:52px}.nav{top:68px}.hero h1{font-size:42px}.hero p{font-size:16px}.hero-art{padding-top:0}.trust-grid{grid-template-columns:repeat(2,1fr)}.trust-item:nth-child(2){border-right:0}.trust-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.1)}.section{padding:60px 0}.section-head{align-items:flex-start;flex-direction:column}.principles,.card-grid,.card-grid.two,.card-grid.four,.work-grid,.member-grid,.country-grid,.event-list,.news-grid,.petition-list{grid-template-columns:1fr}.member-card .avatar{height:250px}.stats{grid-template-columns:1fr 1fr}.filter-bar{grid-template-columns:1fr}.profile-photo .avatar{height:360px}.profile-facts{grid-template-columns:1fr}.programme-image{height:300px}.programme-title{margin:0;border-radius:0}.programme-title h1{font-size:37px}.stepper{grid-template-columns:1fr 1fr}.step{border-bottom:1px solid var(--border)}.form-step{padding:22px}.newsletter-form{flex-direction:column;gap:8px}.newsletter-form input,.newsletter-form button{border-radius:8px;min-height:45px}.footer-grid{grid-template-columns:1fr}.footer-brand,.footer-col:last-child{grid-column:auto}.footer-bottom{flex-direction:column}.page-hero{padding:50px 0}.page-hero h1{font-size:39px}.petition-heading h1{font-size:36px}.country-tabs-inner{gap:20px}}
/* GPFB revision 01: simplified navigation, logo-led hero and revised footer */
.hero-logo-art{
align-self:center;
padding:46px 0;
display:grid;
place-items:center;
}
.hero-logo-stage{
position:relative;
width:min(390px,78vw);
aspect-ratio:1;
display:grid;
place-items:center;
isolation:isolate;
}
.hero-logo-stage:before{
content:"";
position:absolute;
inset:5%;
border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 52%,transparent 72%);
box-shadow:0 28px 80px rgba(0,0,0,.24);
z-index:-3;
}
.hero-logo-glow{
position:absolute;
inset:18%;
border-radius:50%;
background:rgba(198,161,91,.15);
filter:blur(34px);
z-index:-2;
}
.hero-logo-ring{
position:absolute;
border-radius:50%;
border:1px solid rgba(198,161,91,.36);
z-index:-1;
}
.hero-logo-ring[data-ring="outer"]{inset:3%}
.hero-logo-ring[data-ring="inner"]{inset:12%;border-color:rgba(255,255,255,.15)}
.hero-logo-stage img{
width:72%;
max-height:none;
object-fit:contain;
filter:drop-shadow(0 25px 34px rgba(0,0,0,.34));
}
.statement-hero-mark{
display:grid;
place-items:center;
}
.statement-hero-mark img{
width:min(230px,70%);
filter:drop-shadow(0 16px 28px rgba(16,42,67,.18));
}
.site-footer{padding-top:55px}
.footer-grid{
grid-template-columns:1.25fr .8fr 1fr 1.35fr;
align-items:start;
}
.footer-brand{min-width:0}
.footer-logo-box{
display:inline-flex;
align-items:center;
justify-content:center;
background:#fff;
padding:12px 15px;
border-radius:12px;
box-shadow:0 10px 28px rgba(0,0,0,.16);
}
.footer-brand .footer-logo-box img{
filter:none;
width:220px;
max-width:100%;
height:auto;
}
.footer-contact strong{
display:block;
color:#fff;
font-family:Georgia,"Times New Roman",serif;
font-size:15px;
line-height:1.45;
margin-bottom:12px;
}
.footer-contact p{
margin:8px 0;
color:#c3d1da;
font-size:13px;
}
.footer-contact p span{color:#91a7b5}
.footer-contact p a{display:inline;margin:0;color:#fff}
.footer-contact p a:hover{text-decoration:underline}
@media(max-width:1050px){
.footer-grid{grid-template-columns:1.2fr 1fr 1fr}
.footer-contact{grid-column:1/-1}
}
@media(max-width:860px){
.hero-logo-art{padding:20px 0 55px}
.hero-logo-stage{width:min(330px,74vw)}
.footer-grid{grid-template-columns:1fr 1fr}
.footer-contact{grid-column:1/-1}
}
@media(max-width:620px){
.footer-grid{grid-template-columns:1fr}
.footer-contact{grid-column:auto}
.footer-logo-box{width:100%;max-width:285px}
}
/* REV 2 updates */
.hero-logo-art{
align-self:end;
padding:25px 0 30px;
display:flex;
justify-content:center;
}
.hero-logo-stage{
position:relative;
width:min(420px, 86vw);
aspect-ratio:1/1;
display:flex;
align-items:center;
justify-content:center;
}
.hero-logo-stage::before{
content:'';
position:absolute;
inset:8%;
border-radius:50%;
background:radial-gradient(circle, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 55%, rgba(255,255,255,0) 72%);
box-shadow:0 22px 60px rgba(0,0,0,.28);
}
.hero-logo-stage::after{
content:'';
position:absolute;
inset:1.5%;
border-radius:50%;
border:1.5px solid rgba(198,161,91,.40);
}
.hero-logo-ring{
position:absolute;
inset:0;
border-radius:50%;
border:2px solid rgba(198,161,91,.22);
}
.hero-logo-core{
position:relative;
width:68%;
aspect-ratio:1/1;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.06);
backdrop-filter: blur(4px);
box-shadow: inset 0 0 0 10px rgba(255,255,255,.03);
}
.hero-logo-core img{
width:100%;
height:100%;
object-fit:contain;
filter: drop-shadow(0 14px 24px rgba(0,0,0,.24));
}
.footer-brand .footer-tagline{
color:#d8e4eb;
margin:0 0 14px;
max-width:360px;
line-height:1.65;
}
.footer-brand .social-icons{
display:flex;
gap:10px;
flex-wrap:wrap;
}
.footer-brand .social-icons a{
width:38px;
height:38px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#fff;
font-size:14px;
font-weight:700;
transition:.2s ease;
}
.footer-brand .social-icons a:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.16);
}
@media(max-width:860px){
.hero-logo-stage{width:min(340px,78vw)}
}
/* REV 3 updates */
.hero-a-visual{
align-self:stretch;
min-height:520px;
position:relative;
border-radius:28px;
overflow:hidden;
background:
linear-gradient(90deg, rgba(6,20,40,.90) 0%, rgba(7,25,49,.80) 32%, rgba(7,25,49,.28) 58%, rgba(7,25,49,.12) 100%),
url('../img/hero-network.svg') center/cover no-repeat;
box-shadow:0 22px 60px rgba(5,17,33,.28);
}
.hero-a-visual::after{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(circle at 76% 48%, rgba(246,197,91,.38), transparent 9%),
radial-gradient(circle at 63% 41%, rgba(255,255,255,.18), transparent 10%),
radial-gradient(circle at 85% 60%, rgba(255,255,255,.15), transparent 8%);
pointer-events:none;
}
.hero-a-overlay{
position:absolute;
inset:0;
padding:44px 44px 40px 56px;
display:flex;
flex-direction:column;
justify-content:center;
max-width:58%;
}
.hero-a-overlay h1{
color:#fff;
font-size:clamp(2.7rem,4vw,4.4rem);
line-height:1.05;
margin-bottom:18px;
}
.hero-a-overlay h1 .accent{
color:var(--gold);
}
.hero-a-overlay .lead{
max-width:520px;
color:rgba(255,255,255,.88);
font-size:1.08rem;
}
.hero-a-line{
width:84px;
height:3px;
border-radius:999px;
background:var(--gold);
margin:18px 0 18px;
}
.hero-a-brand{
position:absolute;
top:28px;
left:28px;
display:flex;
align-items:center;
gap:14px;
color:#fff;
z-index:2;
}
.hero-a-brand .mini-logo{
width:58px;
height:58px;
border-radius:50%;
background:rgba(255,255,255,.10);
display:flex;
align-items:center;
justify-content:center;
backdrop-filter: blur(4px);
border:1px solid rgba(255,255,255,.18);
}
.hero-a-brand .mini-logo img{
width:42px;
height:42px;
object-fit:contain;
}
.hero-a-brand .brand-text{
font-size:.95rem;
line-height:1.3;
font-weight:700;
max-width:250px;
}
.footer-brand{
display:flex;
flex-direction:column;
align-items:flex-start;
}
.footer-brand .footer-tagline{
color:#d8e4eb;
margin:4px 0 16px;
max-width:340px;
line-height:1.7;
text-align:left;
}
.footer-brand .social-icons{
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
}
.footer-brand .social-icons a{
width:40px;
height:40px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.15);
color:#fff;
transition:.2s ease;
}
.footer-brand .social-icons a:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.16);
}
.footer-brand .social-icons img{
width:18px;
height:18px;
object-fit:contain;
filter:none!important;
opacity:1!important;
color-scheme:only light;
forced-color-adjust:none;
}
@media (max-width: 980px){
.hero-a-visual{min-height:500px}
.hero-a-overlay{
max-width:68%;
padding:48px 34px 34px 40px;
}
}
@media (max-width: 760px){
.hero-a-visual{min-height:540px}
.hero-a-overlay{
max-width:100%;
padding:92px 24px 28px 24px;
}
.hero-a-brand{
left:20px;
right:20px;
top:18px;
}
.hero-a-brand .brand-text{max-width:220px;font-size:.88rem}
}
/* =========================================================
REV 8 — Professional vector hero
Live HTML text + independent SVG artwork
========================================================= */
body[data-page="home"] .hero-vector-professional{
position:relative;
min-height:clamp(680px, calc(100svh - 78px), 820px);
display:flex;
align-items:center;
overflow:hidden;
isolation:isolate;
color:#fff;
background:#03172e;
}
body[data-page="home"] .hero-vector-graphic{
position:absolute;
inset:0;
z-index:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
pointer-events:none;
user-select:none;
}
body[data-page="home"] .hero-vector-professional::before{
content:"";
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(
90deg,
rgba(3,20,40,.98) 0%,
rgba(3,20,40,.94) 27%,
rgba(3,20,40,.68) 47%,
rgba(3,20,40,.18) 69%,
rgba(3,20,40,0) 100%
),
linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,11,24,.24));
pointer-events:none;
}
body[data-page="home"] .hero-vector-professional::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
z-index:2;
height:3px;
background:linear-gradient(90deg, #c99b46 0%, #d8ad59 62%, transparent 100%);
}
body[data-page="home"] .hero-vector-inner{
position:relative;
z-index:3;
width:min(var(--max), calc(100% - 40px));
min-height:inherit;
margin-inline:auto;
display:flex;
align-items:center;
}
body[data-page="home"] .hero-vector-copy{
width:min(690px, 53vw);
padding:72px 0 76px;
text-shadow:0 4px 24px rgba(0,0,0,.30);
}
body[data-page="home"] .hero-vector-eyebrow{
margin-bottom:24px;
color:#d8aa52;
font-size:.78rem;
line-height:1.25;
font-weight:800;
letter-spacing:.19em;
text-transform:uppercase;
}
body[data-page="home"] .hero-vector-eyebrow::after{
content:"";
display:block;
width:72px;
height:2px;
margin-top:18px;
border-radius:999px;
background:#d8aa52;
}
body[data-page="home"] .hero-vector-copy h1{
margin:0;
max-width:none;
color:#fff;
font-family:Georgia, "Times New Roman", serif;
font-size:clamp(3.05rem, 4.55vw, 4.75rem);
line-height:1.01;
letter-spacing:-.037em;
font-weight:700;
}
body[data-page="home"] .hero-vector-copy h1 span{
display:block;
}
body[data-page="home"] .hero-vector-copy h1 .accent{
color:#d7a64d;
}
body[data-page="home"] .hero-vector-rule{
width:80px;
height:3px;
margin:29px 0 20px;
border-radius:999px;
background:#d7a64d;
box-shadow:0 0 18px rgba(215,166,77,.24);
}
body[data-page="home"] .hero-vector-copy p{
max-width:515px;
margin:0;
color:rgba(246,249,251,.92);
font-size:clamp(1rem, 1.18vw, 1.14rem);
line-height:1.62;
font-weight:450;
}
body[data-page="home"] .hero-vector-professional + .trust-strip{
margin-top:0;
border-top:0;
}
@media (max-width:1100px){
body[data-page="home"] .hero-vector-professional{
min-height:700px;
}
body[data-page="home"] .hero-vector-graphic{
object-position:58% center;
}
body[data-page="home"] .hero-vector-copy{
width:min(650px, 62vw);
}
body[data-page="home"] .hero-vector-copy h1{
font-size:clamp(2.85rem, 5.8vw, 4.25rem);
}
}
@media (max-width:820px){
body[data-page="home"] .hero-vector-professional{
min-height:700px;
}
body[data-page="home"] .hero-vector-graphic{
object-position:67% center;
}
body[data-page="home"] .hero-vector-professional::before{
background:
linear-gradient(
90deg,
rgba(3,20,40,.99) 0%,
rgba(3,20,40,.96) 44%,
rgba(3,20,40,.70) 71%,
rgba(3,20,40,.32) 100%
),
linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,11,24,.28));
}
body[data-page="home"] .hero-vector-copy{
width:min(620px, 78vw);
padding:60px 0;
}
body[data-page="home"] .hero-vector-copy h1{
font-size:clamp(2.65rem, 8vw, 3.95rem);
}
}
@media (max-width:580px){
body[data-page="home"] .hero-vector-professional{
min-height:680px;
}
body[data-page="home"] .hero-vector-graphic{
object-position:70% center;
}
body[data-page="home"] .hero-vector-professional::before{
background:
linear-gradient(
90deg,
rgba(3,20,40,1) 0%,
rgba(3,20,40,.98) 59%,
rgba(3,20,40,.78) 82%,
rgba(3,20,40,.50) 100%
),
linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,11,24,.32));
}
body[data-page="home"] .hero-vector-copy{
width:100%;
padding:48px 0 54px;
}
body[data-page="home"] .hero-vector-eyebrow{
max-width:290px;
font-size:.68rem;
letter-spacing:.15em;
}
body[data-page="home"] .hero-vector-copy h1{
font-size:clamp(2.35rem, 11.5vw, 3.35rem);
line-height:1.01;
}
body[data-page="home"] .hero-vector-copy p{
max-width:340px;
font-size:.97rem;
line-height:1.55;
}
}
/* =========================================================
REV 9 — About page Bangladesh Parliament hero image
========================================================= */
body[data-page="about"] .about-parliament-art{
position:relative;
min-height:350px;
border:1px solid rgba(16,42,67,.12);
border-radius:20px;
overflow:hidden;
background:#0b3150;
box-shadow:0 20px 46px rgba(16,42,67,.16);
}
body[data-page="about"] .about-parliament-art::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(180deg, rgba(2,20,38,.02), rgba(2,20,38,.12)),
linear-gradient(90deg, rgba(6,34,59,.12), transparent 38%);
}
body[data-page="about"] .about-parliament-art img{
display:block;
width:100%;
height:100%;
min-height:350px;
object-fit:cover;
object-position:center 48%;
transform:scale(1.01);
}
@media(max-width:860px){
body[data-page="about"] .about-parliament-art,
body[data-page="about"] .about-parliament-art img{
min-height:300px;
}
}
@media(max-width:620px){
body[data-page="about"] .about-parliament-art,
body[data-page="about"] .about-parliament-art img{
min-height:250px;
}
}
/* =========================================================
REV 10 — About hero with full-width parliament background block
========================================================= */
body[data-page="about"] .page-hero{
background:linear-gradient(135deg,#eef5f7,#fff);
}
body[data-page="about"] .about-hero-stack{
display:block;
}
body[data-page="about"] .about-hero-copy{
max-width:860px;
margin-bottom:28px;
}
body[data-page="about"] .about-hero-copy h1{
margin-bottom:14px;
}
body[data-page="about"] .about-hero-copy p{
max-width:760px;
}
body[data-page="about"] .about-hero-background-block{
position:relative;
width:100%;
min-height:360px;
border-radius:24px;
overflow:hidden;
border:1px solid rgba(16,42,67,.10);
background:#0b3150;
box-shadow:0 20px 46px rgba(16,42,67,.16);
}
body[data-page="about"] .about-hero-background-block::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(180deg, rgba(2,20,38,.02), rgba(2,20,38,.12)),
linear-gradient(90deg, rgba(6,34,59,.08), transparent 26%);
}
body[data-page="about"] .about-hero-background-block img{
display:block;
width:100%;
height:100%;
min-height:360px;
object-fit:cover;
object-position:center 48%;
}
@media(max-width:860px){
body[data-page="about"] .about-hero-background-block,
body[data-page="about"] .about-hero-background-block img{
min-height:300px;
}
}
@media(max-width:620px){
body[data-page="about"] .about-hero-copy{
margin-bottom:22px;
}
body[data-page="about"] .about-hero-background-block,
body[data-page="about"] .about-hero-background-block img{
min-height:230px;
}
}
/* =========================================================
REV 11 — About page reference layout
========================================================= */
body[data-page="about"]{
background:#f7f9fb;
}
body[data-page="about"]
body[data-page="about"] .about-ref-header{
background:#fff;
border-top:3px solid var(--navy);
border-bottom:1px solid #e4ebf1;
box-shadow:0 2px 12px rgba(16,42,67,.05);
}
body[data-page="about"] .about-ref-header .nav-wrap{
height:76px;
}
body[data-page="about"] .about-ref-header .brand{
width:190px;
}
body[data-page="about"] .about-ref-header .brand img{
height:55px;
width:auto;
}
body[data-page="about"] .about-ref-header .nav{
gap:19px;
font-size:12px;
}
body[data-page="about"] .about-ref-header .nav a:not(.nav-cta):not(.nav-search){
padding:28px 0 24px;
}
body[data-page="about"] .about-ref-header .nav-cta{
padding:10px 15px;
border-radius:6px;
font-size:11px;
}
body[data-page="about"] .about-ref-header .nav-search{
width:34px;
height:34px;
padding:0;
display:grid;
place-items:center;
color:var(--navy);
}
body[data-page="about"] .about-ref-header .nav-search::after{
display:none;
}
body[data-page="about"] .about-ref-header .nav-search svg{
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
}
body[data-page="about"] .about-ref-page{
background:#f7f9fb;
}
body[data-page="about"] .about-ref-hero{
position:relative;
min-height:430px;
overflow:visible;
background:#dfeaf1;
border-bottom:1px solid #d9e2ec;
}
body[data-page="about"] .about-ref-hero-image{
position:absolute;
inset:0;
width:100%;
height:100%;
max-width:none;
object-fit:cover;
object-position:center 47%;
}
body[data-page="about"] .about-ref-hero-shade{
position:absolute;
inset:0;
background:
linear-gradient(90deg, rgba(247,250,252,.98) 0%, rgba(247,250,252,.93) 28%, rgba(247,250,252,.64) 50%, rgba(247,250,252,.15) 72%, rgba(247,250,252,.02) 100%),
linear-gradient(180deg, rgba(255,255,255,.08), rgba(11,49,80,.06));
pointer-events:none;
}
body[data-page="about"] .about-ref-hero-inner{
position:relative;
z-index:2;
padding-top:28px;
}
body[data-page="about"] .about-ref-breadcrumb{
display:flex;
align-items:center;
gap:9px;
margin:0 0 34px;
color:#6b7f91;
font-size:11px;
}
body[data-page="about"] .about-ref-breadcrumb a{
color:#4c6377;
}
body[data-page="about"] .about-ref-copy{
width:min(585px,52%);
}
body[data-page="about"] .about-ref-copy h1{
margin:0 0 6px;
color:var(--navy);
font-family:Georgia,"Times New Roman",serif;
font-size:clamp(42px,4.4vw,58px);
line-height:1.02;
letter-spacing:-.03em;
font-weight:400;
}
body[data-page="about"] .about-ref-subtitle{
margin:0 0 18px;
color:#29445d;
font-family:Georgia,"Times New Roman",serif;
font-size:17px;
line-height:1.35;
}
body[data-page="about"] .about-ref-intro{
max-width:560px;
margin:0;
color:#324e67;
font-size:14px;
line-height:1.65;
}
body[data-page="about"] .about-ref-values-wrap{
position:absolute;
left:50%;
bottom:-90px;
z-index:4;
transform:translateX(-50%);
}
body[data-page="about"] .about-ref-values{
display:grid;
grid-template-columns:repeat(4,1fr);
min-height:180px;
background:#fff;
border:1px solid #dfe6ec;
border-radius:13px;
box-shadow:0 14px 38px rgba(16,42,67,.10);
overflow:hidden;
}
body[data-page="about"] .about-ref-value{
position:relative;
padding:24px 23px 20px;
text-align:center;
}
body[data-page="about"] .about-ref-value + .about-ref-value::before{
content:"";
position:absolute;
left:0;
top:26px;
bottom:26px;
width:1px;
background:#e1e7ec;
}
body[data-page="about"] .about-ref-icon{
width:48px;
height:48px;
margin:0 auto 10px;
border-radius:50%;
display:grid;
place-items:center;
background:#eef7f3;
color:#087052;
}
body[data-page="about"] .about-ref-icon.icon-navy{
background:#eef2f7;
color:#173e5f;
}
body[data-page="about"] .about-ref-icon.icon-gold{
background:#fbf4e6;
color:#b88b37;
}
body[data-page="about"] .about-ref-icon svg{
width:26px;
height:26px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}
body[data-page="about"] .about-ref-value h2{
margin:0 0 6px;
color:var(--navy);
font-family:Georgia,"Times New Roman",serif;
font-size:18px;
font-weight:400;
}
body[data-page="about"] .about-ref-value p{
max-width:185px;
margin:0 auto;
color:#435d73;
font-size:11.5px;
line-height:1.45;
}
body[data-page="about"] .about-ref-vision-section{
padding:124px 0 28px;
background:#f7f9fb;
border-bottom:1px solid #e0e7ed;
}
body[data-page="about"] .about-ref-vision-grid{
display:grid;
grid-template-columns:.85fr 1.15fr;
gap:14px;
}
body[data-page="about"] .about-ref-info-card{
min-height:220px;
padding:20px 22px;
background:#fff;
border:1px solid #dfe6ec;
border-radius:8px;
box-shadow:0 3px 12px rgba(16,42,67,.035);
}
body[data-page="about"] .about-ref-info-card h2,
body[data-page="about"] .about-ref-section-title{
margin:0 0 12px;
color:var(--navy);
font-family:Georgia,"Times New Roman",serif;
font-weight:400;
}
body[data-page="about"] .about-ref-info-card h2{
font-size:23px;
}
body[data-page="about"] .about-ref-info-card p{
margin:0;
color:#425d72;
font-size:12.5px;
line-height:1.7;
}
body[data-page="about"] .about-ref-check-list{
list-style:none;
padding:0;
margin:0;
display:grid;
gap:7px;
}
body[data-page="about"] .about-ref-check-list li{
position:relative;
padding-left:24px;
color:#405c72;
font-size:12px;
line-height:1.45;
}
body[data-page="about"] .about-ref-check-list li::before{
content:"✓";
position:absolute;
left:0;
top:1px;
width:15px;
height:15px;
border-radius:50%;
display:grid;
place-items:center;
background:#0b8a65;
color:#fff;
font-size:9px;
font-weight:900;
}
body[data-page="about"] .about-ref-principles-section{
padding:24px 0 30px;
background:#fff;
border-top:1px solid #edf1f4;
}
body[data-page="about"] .about-ref-section-title{
font-size:23px;
margin-bottom:16px;
}
body[data-page="about"] .about-ref-principles-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
align-items:start;
}
body[data-page="about"] .about-ref-accordion{
border:0;
border-radius:0;
overflow:visible;
background:transparent;
display:grid;
gap:7px;
}
body[data-page="about"] .about-ref-accordion .accordion-item{
border:1px solid #d9e2ec;
border-radius:6px;
overflow:hidden;
background:#fff;
}
body[data-page="about"] .about-ref-accordion .accordion-item + .accordion-item{
border-top:1px solid #d9e2ec;
}
body[data-page="about"] .about-ref-accordion .accordion-button{
min-height:34px;
padding:8px 12px;
color:#183b59;
font-size:11.5px;
line-height:1.25;
font-weight:800;
}
body[data-page="about"] .about-ref-accordion .accordion-button::after{
font-size:15px;
}
body[data-page="about"] .about-ref-accordion .accordion-panel{
padding:0 12px 10px;
color:#506b80;
font-size:10.5px;
line-height:1.5;
}
body[data-page="about"] .about-ref-notice{
margin-top:22px;
padding:12px 18px;
border:1px solid #eadfbe;
border-radius:6px;
background:#fbf6e9;
color:#52677a;
text-align:center;
font-size:11.5px;
}
body[data-page="about"] .about-ref-notice strong{
color:#173e5f;
}
@media(max-width:1050px){
body[data-page="about"] .about-ref-header .nav{gap:12px;font-size:11px}
body[data-page="about"] .about-ref-header .brand{width:165px}
body[data-page="about"] .about-ref-copy{width:min(600px,60%)}
}
@media(max-width:860px){
body[data-page="about"] .about-ref-header .nav-wrap{height:68px}
body[data-page="about"] .about-ref-header .brand{width:165px}
body[data-page="about"] .about-ref-header .brand img{height:49px}
body[data-page="about"] .about-ref-header .nav{top:68px}
body[data-page="about"] .about-ref-header .nav-search{width:100%;height:40px;justify-content:flex-start;padding:0 4px}
body[data-page="about"] .about-ref-hero{min-height:510px}
body[data-page="about"] .about-ref-hero-shade{background:linear-gradient(90deg,rgba(247,250,252,.98) 0%,rgba(247,250,252,.91) 55%,rgba(247,250,252,.55) 100%)}
body[data-page="about"] .about-ref-copy{width:min(600px,78%)}
body[data-page="about"] .about-ref-values-wrap{bottom:-220px}
body[data-page="about"] .about-ref-values{grid-template-columns:repeat(2,1fr)}
body[data-page="about"] .about-ref-value:nth-child(3)::before{display:none}
body[data-page="about"] .about-ref-value:nth-child(-n+2){border-bottom:1px solid #e1e7ec}
body[data-page="about"] .about-ref-vision-section{padding-top:255px}
body[data-page="about"] .about-ref-vision-grid{grid-template-columns:1fr}
body[data-page="about"] .about-ref-info-card{min-height:0}
}
@media(max-width:620px){
body[data-page="about"] .about-ref-hero{min-height:470px}
body[data-page="about"] .about-ref-hero-image{object-position:62% center}
body[data-page="about"] .about-ref-hero-inner{padding-top:20px}
body[data-page="about"] .about-ref-breadcrumb{margin-bottom:24px}
body[data-page="about"] .about-ref-copy{width:100%}
body[data-page="about"] .about-ref-copy h1{font-size:40px}
body[data-page="about"] .about-ref-subtitle{font-size:15px;max-width:330px}
body[data-page="about"] .about-ref-intro{max-width:335px;font-size:13px}
body[data-page="about"] .about-ref-values-wrap{bottom:-275px}
body[data-page="about"] .about-ref-values{grid-template-columns:1fr 1fr}
body[data-page="about"] .about-ref-value{padding:18px 12px}
body[data-page="about"] .about-ref-value p{font-size:10.5px}
body[data-page="about"] .about-ref-value h2{font-size:16px}
body[data-page="about"] .about-ref-vision-section{padding-top:310px}
body[data-page="about"] .about-ref-principles-grid{grid-template-columns:1fr;gap:7px}
body[data-page="about"] .about-ref-notice{text-align:left}
}
/* =========================================================
REV 12 — About page typography aligned with site defaults
Header/footer/layout/image remain unchanged
========================================================= */
body[data-page="about"] .about-ref-breadcrumb{
font-size:12px;
}
body[data-page="about"] .about-ref-copy h1{
font-size:clamp(38px,4vw,57px);
}
body[data-page="about"] .about-ref-subtitle{
font-size:17px;
}
body[data-page="about"] .about-ref-intro{
font-size:17px;
line-height:1.62;
}
body[data-page="about"] .about-ref-value h2{
font-size:21px;
line-height:1.25;
}
body[data-page="about"] .about-ref-value p{
font-size:14px;
line-height:1.62;
}
body[data-page="about"] .about-ref-info-card h2{
font-size:21px;
line-height:1.25;
}
body[data-page="about"] .about-ref-info-card p{
font-size:14px;
line-height:1.62;
}
body[data-page="about"] .about-ref-check-list li{
font-size:14px;
line-height:1.62;
}
body[data-page="about"] .about-ref-section-title{
font-size:clamp(30px,3vw,43px);
line-height:1.15;
}
body[data-page="about"] .about-ref-accordion .accordion-button{
font-size:16px;
line-height:1.35;
}
body[data-page="about"] .about-ref-accordion .accordion-panel{
font-size:14px;
line-height:1.62;
}
body[data-page="about"] .about-ref-notice{
font-size:13px;
line-height:1.62;
}
@media(max-width:620px){
body[data-page="about"] .about-ref-copy h1{font-size:39px}
body[data-page="about"] .about-ref-subtitle{font-size:17px}
body[data-page="about"] .about-ref-intro{font-size:17px}
body[data-page="about"] .about-ref-value h2{font-size:21px}
body[data-page="about"] .about-ref-value p{font-size:14px}
}
/* Members page — reference-matched hero and cards */
body[data-page="members"] .members-hero{
position:relative;
min-height:650px;
padding:0;
overflow:hidden;
border:0;
color:#fff;
background:
radial-gradient(circle at 78% 18%, rgba(255,255,255,.12), transparent 22%),
linear-gradient(105deg,#071f3a 0%,#0b2d52 45%,#173e62 100%);
}
body[data-page="members"] .members-hero::before{
content:"";
position:absolute;
inset:0;
opacity:.2;
background-image:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1px);
background-size:26px 26px;
mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 30%,#000 76%,transparent 100%);
}
body[data-page="members"] .members-hero-inner{
position:relative;
z-index:2;
min-height:650px;
padding-top:52px;
}
body[data-page="members"] .members-hero .breadcrumb{
position:relative;
z-index:4;
margin:0 0 55px;
color:rgba(255,255,255,.78);
font-size:13px;
}
body[data-page="members"] .members-hero .breadcrumb a{color:#e5b65b}
body[data-page="members"] .members-hero-copy{
position:relative;
z-index:4;
width:47%;
max-width:555px;
}
body[data-page="members"] .members-hero .eyebrow{
color:#e3b258;
font-size:12px;
letter-spacing:.16em;
margin-bottom:6px;
}
body[data-page="members"] .members-hero h1{
color:#fff;
font-size:clamp(43px,4.35vw,62px);
line-height:1.03;
letter-spacing:-.03em;
margin:8px 0 22px;
text-shadow:0 3px 18px rgba(0,0,0,.16);
}
body[data-page="members"] .members-hero p{
max-width:520px;
margin:0;
color:#e5edf4;
font-size:17px;
line-height:1.75;
}
body[data-page="members"] .members-hero-visual{
position:absolute;
z-index:2;
right:-62px;
top:80px;
width:64%;
max-width:820px;
pointer-events:none;
}
body[data-page="members"] .members-hero-visual::before{
content:"";
position:absolute;
inset:0 auto 0 -2px;
width:25%;
z-index:2;
background:linear-gradient(90deg,#0b2d52 0%,rgba(11,45,82,.82) 34%,rgba(11,45,82,0) 100%);
}
body[data-page="members"] .members-hero-visual img{
width:100%;
height:auto;
display:block;
max-width:none;
filter:drop-shadow(0 18px 38px rgba(0,0,0,.18));
}
body[data-page="members"] .members-hero-wave{
position:absolute;
left:-5%;
right:-5%;
bottom:-72px;
height:150px;
z-index:3;
background:#fafaf7;
border-radius:50% 50% 0 0 / 38% 38% 0 0;
box-shadow:0 -4px 0 #c6a15b;
}
body[data-page="members"] .members-hero-wave::before{
content:"";
position:absolute;
left:42%;
right:0;
top:-12px;
height:18px;
border-radius:60% 0 0 0;
background:#006a4e;
border-top:3px solid #c6a15b;
transform:rotate(-1deg);
transform-origin:right center;
}
body[data-page="members"] .members-feature-strip-wrap{
position:relative;
z-index:5;
margin-top:-78px;
padding-bottom:12px;
}
body[data-page="members"] .members-feature-strip{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:28px;
}
body[data-page="members"] .members-feature-card{
display:grid;
grid-template-columns:78px minmax(0,1fr);
gap:22px;
align-items:start;
min-height:215px;
padding:26px 25px;
background:#fff;
border:1px solid rgba(16,42,67,.08);
border-radius:17px;
box-shadow:0 18px 42px rgba(16,42,67,.09);
}
body[data-page="members"] .members-feature-icon{
width:72px;
height:72px;
display:grid;
place-items:center;
border-radius:50%;
border:2px solid #c6a15b;
box-shadow:0 7px 18px rgba(16,42,67,.09);
}
body[data-page="members"] .members-feature-icon.navy{background:#0d2b55;color:#d8ad59}
body[data-page="members"] .members-feature-icon.green{background:#08704f;color:#efd28e}
body[data-page="members"] .members-feature-icon svg{
width:39px;
height:39px;
fill:none;
stroke:currentColor;
stroke-width:2.2;
stroke-linecap:round;
stroke-linejoin:round;
}
body[data-page="members"] .members-feature-content{min-width:0}
body[data-page="members"] .members-feature-card h3{
margin:2px 0 0;
color:#102a43;
font-family:Georgia,"Times New Roman",serif;
font-size:21px;
line-height:1.25;
}
body[data-page="members"] .members-feature-line{
display:block;
width:40px;
height:2px;
margin:12px 0 13px;
background:#c6a15b;
}
body[data-page="members"] .members-feature-card p{
margin:0;
color:#486581;
font-size:14px;
line-height:1.72;
}
body[data-page="members"] .members-directory-section{padding-top:42px}
@media(max-width:1050px){
body[data-page="members"] .members-hero-copy{width:50%}
body[data-page="members"] .members-hero-visual{right:-110px;width:68%}
body[data-page="members"] .members-feature-strip{gap:16px}
body[data-page="members"] .members-feature-card{grid-template-columns:64px 1fr;gap:16px;padding:22px 18px}
body[data-page="members"] .members-feature-icon{width:60px;height:60px}
body[data-page="members"] .members-feature-icon svg{width:32px;height:32px}
}
@media(max-width:860px){
body[data-page="members"] .members-hero{min-height:auto;padding-bottom:105px}
body[data-page="members"] .members-hero-inner{min-height:auto;padding-top:40px}
body[data-page="members"] .members-hero .breadcrumb{margin-bottom:30px}
body[data-page="members"] .members-hero-copy{width:100%;max-width:650px}
body[data-page="members"] .members-hero h1{max-width:650px}
body[data-page="members"] .members-hero-visual{position:relative;right:auto;top:auto;width:100%;max-width:760px;margin:28px auto -10px}
body[data-page="members"] .members-hero-visual::before{width:13%}
body[data-page="members"] .members-hero-wave{bottom:-86px}
body[data-page="members"] .members-feature-strip-wrap{margin-top:-48px}
body[data-page="members"] .members-feature-strip{grid-template-columns:1fr}
body[data-page="members"] .members-feature-card{grid-template-columns:72px 1fr;min-height:auto;padding:24px}
body[data-page="members"] .members-feature-icon{width:68px;height:68px}
}
@media(max-width:620px){
body[data-page="members"] .members-hero h1{font-size:39px}
body[data-page="members"] .members-hero p{font-size:16px}
body[data-page="members"] .members-feature-card{grid-template-columns:58px 1fr;gap:15px;padding:20px 18px}
body[data-page="members"] .members-feature-icon{width:56px;height:56px}
body[data-page="members"] .members-feature-icon svg{width:30px;height:30px}
}
/* GPFB SHARED PAGE HERO */
/* =========================================================
SHARED HERO
Statements-style layout used site-wide. The artwork is a
real ![]()
in each page so asset paths resolve reliably.
========================================================= */
.gpfb-page-hero{
position:relative;
isolation:isolate;
min-height:500px;
padding:68px 0 82px;
overflow:hidden;
border-bottom:1px solid var(--border);
background:#eef5f7;
}
.gpfb-page-hero-image{
position:absolute;
inset:0;
z-index:0;
width:100%;
height:100%;
max-width:none;
object-fit:cover;
object-position:center center;
pointer-events:none;
user-select:none;
}
.gpfb-page-hero::before{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:
radial-gradient(circle at 8% 44%,rgba(255,255,255,.44) 0%,rgba(255,255,255,.14) 30%,rgba(255,255,255,0) 55%),
linear-gradient(
90deg,
rgba(247,251,252,.99) 0%,
rgba(247,251,252,.97) 27%,
rgba(247,251,252,.84) 40%,
rgba(247,251,252,.44) 53%,
rgba(247,251,252,.10) 66%,
rgba(247,251,252,0) 78%
);
}
.gpfb-page-hero .container{position:relative;z-index:2}
.gpfb-page-hero-breadcrumb{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:8px;
margin:0 0 42px;
}
.gpfb-page-hero-breadcrumb .breadcrumb-separator{color:#8ca1b1}
.gpfb-page-hero-copy{width:min(650px,54%)}
.gpfb-page-hero .eyebrow{margin-bottom:18px}
.gpfb-page-hero h1{
max-width:650px;
margin:0 0 26px;
color:var(--navy);
font-family:Georgia,"Times New Roman",serif;
font-size:clamp(48px,4.25vw,66px);
line-height:1.02;
letter-spacing:-.035em;
}
.gpfb-page-hero p{
max-width:640px;
margin:0;
color:#55748c;
font-size:17px;
line-height:1.58;
}
/* Artwork positioning for pages whose source images are composed differently. */
body[data-page="join"] .gpfb-page-hero-image{object-position:66% center}
body[data-page="events"] .gpfb-page-hero-image{object-position:62% center}
body[data-page="members"] .gpfb-page-hero-image,
body[data-page="member"] .gpfb-page-hero-image{object-position:62% center}
body[data-page="news"] .gpfb-page-hero-image,
body[data-page="resources"] .gpfb-page-hero-image{object-position:64% center}
body[data-page="about"] .gpfb-page-hero-image{object-position:65% center}
body[data-page="index"] .gpfb-page-hero-image{object-position:64% center}
/* Rich information that used to live inside special heroes is
intentionally kept immediately below the shared hero. */
.about-ref-values-section{padding:0 0 28px;background:#f7f9fb;border-bottom:1px solid #e0e7ed}
body[data-page="about"] .about-ref-values-section .about-ref-values-wrap{
position:static;
left:auto;
bottom:auto;
transform:none;
padding-top:28px;
}
body[data-page="about"] .about-ref-vision-section{padding-top:28px}
.profile-summary-section{background:#f7f9fb;border-bottom:1px solid var(--border)}
.profile-summary-section .profile-intro{align-self:center}
.petition-summary-section{background:#f7f9fb;border-bottom:1px solid var(--border)}
.petition-summary-section .petition-heading{align-items:start}
.components-load-error [data-component="site-header"]::before,
.components-load-error [data-component="site-footer"]::before{
display:block;
padding:12px 20px;
color:#8a1c1c;
background:#fff1f1;
font-size:13px;
text-align:center;
}
.components-load-error [data-component="site-header"]::before{content:"Shared header could not be loaded."}
.components-load-error [data-component="site-footer"]::before{content:"Shared footer could not be loaded."}
@media(max-width:1050px){
.gpfb-page-hero{min-height:470px}
.gpfb-page-hero-image{object-position:60% center}
.gpfb-page-hero-copy{width:min(610px,58%)}
}
@media(max-width:860px){
.gpfb-page-hero{min-height:460px;padding:58px 0 68px}
.gpfb-page-hero-image{object-position:64% center}
.gpfb-page-hero::before{
background:
radial-gradient(circle at 8% 44%,rgba(255,255,255,.46) 0%,rgba(255,255,255,.16) 30%,rgba(255,255,255,0) 56%),
linear-gradient(90deg,rgba(247,251,252,1) 0%,rgba(247,251,252,.97) 35%,rgba(247,251,252,.82) 53%,rgba(247,251,252,.28) 72%,rgba(247,251,252,.04) 100%);
}
.gpfb-page-hero-breadcrumb{margin-bottom:34px}
.gpfb-page-hero-copy{width:68%}
.gpfb-page-hero h1{font-size:clamp(42px,7vw,55px)}
}
@media(max-width:620px){
.gpfb-page-hero{min-height:500px;padding:44px 0 58px}
.gpfb-page-hero-image{object-position:68% center}
.gpfb-page-hero::before{
background:
radial-gradient(circle at 6% 42%,rgba(255,255,255,.48) 0%,rgba(255,255,255,.18) 34%,rgba(255,255,255,0) 60%),
linear-gradient(90deg,rgba(247,251,252,1) 0%,rgba(247,251,252,.98) 44%,rgba(247,251,252,.82) 67%,rgba(247,251,252,.30) 88%,rgba(247,251,252,.12) 100%);
}
.gpfb-page-hero-breadcrumb{margin-bottom:30px}
.gpfb-page-hero-copy{width:92%}
.gpfb-page-hero h1{max-width:520px;margin-bottom:20px;font-size:clamp(38px,11vw,48px);line-height:1.04}
.gpfb-page-hero p{max-width:510px;font-size:15px}
body[data-page="about"] .about-ref-values-section .about-ref-values{grid-template-columns:1fr 1fr}
body[data-page="about"] .about-ref-values-section .about-ref-value{padding:18px 12px}
}
/* =========================================================
STICKY SHARED HEADER
The component slot itself must be sticky because the shared
is injected inside it at runtime. Making only the
injected child sticky would constrain it to the slot height.
========================================================= */
[data-component="site-header"]{
position:sticky;
top:0;
z-index:2000;
}
[data-component="site-header"] .site-header{
position:relative;
top:auto;
z-index:auto;
}
@media(max-width:860px){
[data-component="site-header"] .nav.open{
max-height:calc(100vh - 78px);
overflow-y:auto;
overscroll-behavior:contain;
}
}
@media(max-width:620px){
[data-component="site-header"] .nav.open{
max-height:calc(100vh - 68px);
}
}
/* =========================================================
REV 16 — Consistent hero policy + responsive hardening
Home keeps the approved desktop hero artwork at every size.
Inner pages use a clean, image-free title banner.
========================================================= */
html,body{width:100%;max-width:100%}
body{overflow-x:hidden;overflow-x:clip}
img,svg,video{max-width:100%}
img{height:auto}
.container,.container>*{min-width:0}
.grid,.two-col,.card-grid,.purpose-grid,.work-grid,.stats,.member-grid,.split-feature,
.profile-grid,.profile-content,.sidebar-layout,.petition-heading,.contact-grid,.legal-tabs,
.news-grid,.event-list,.country-grid,.petition-list,.form-grid,.footer-grid,.trust-grid{min-width:0}
.grid>*,.two-col>*,.card-grid>*,.purpose-grid>*,.work-grid>*,.stats>*,.member-grid>*,
.split-feature>*,.profile-grid>*,.profile-content>*,.sidebar-layout>*,.petition-heading>*,
.contact-grid>*,.legal-tabs>*,.news-grid>*,.event-list>*,.country-grid>*,.petition-list>*,
.form-grid>*,.footer-grid>*,.trust-grid>*{min-width:0}
input:not([type="checkbox"]):not([type="radio"]),select,textarea{width:100%;max-width:100%}
textarea{resize:vertical}
.prose,.card,.sidebar-card,.notice,.footer-col{overflow-wrap:anywhere}
.mobile-toggle{position:relative;flex:0 0 auto}
/* Prevent decorative/content images from forcing horizontal overflow. */
.visual-panel{width:100%;max-width:100%;justify-self:stretch;overflow:hidden}
.visual-panel img{width:100%;max-width:100%;height:auto}
/* Inner pages: no hero artwork, only a refined title banner. */
body:not([data-page="home"]) .gpfb-page-hero{
min-height:auto;
padding:52px 0 62px;
overflow:hidden;
background:
radial-gradient(circle at 88% 16%,rgba(198,161,91,.15),transparent 26%),
radial-gradient(circle at 8% 88%,rgba(0,106,78,.08),transparent 30%),
linear-gradient(135deg,#f8fbfc 0%,#edf4f6 58%,#f8f4ea 100%);
border-bottom:1px solid #dbe4e9;
}
body:not([data-page="home"]) .gpfb-page-hero::before{
background:
linear-gradient(90deg,rgba(255,255,255,.66),rgba(255,255,255,.18) 64%,transparent),
repeating-linear-gradient(135deg,rgba(16,42,67,.025) 0 1px,transparent 1px 18px);
}
body:not([data-page="home"]) .gpfb-page-hero::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:3px;
z-index:2;
background:linear-gradient(90deg,var(--green),var(--gold) 58%,transparent 92%);
pointer-events:none;
}
body:not([data-page="home"]) .gpfb-page-hero-image{display:none!important}
body:not([data-page="home"]) .gpfb-page-hero-breadcrumb{margin:0 0 24px}
body:not([data-page="home"]) .gpfb-page-hero-copy{width:min(100%,1000px)}
body:not([data-page="home"]) .gpfb-page-hero .eyebrow{margin-bottom:14px}
body:not([data-page="home"]) .gpfb-page-hero h1{
max-width:1040px;
margin:0 0 18px;
font-size:clamp(50px,5.2vw,72px);
line-height:1.02;
letter-spacing:-.04em;
text-wrap:balance;
}
body:not([data-page="home"]) .gpfb-page-hero p{
max-width:820px;
font-size:18px;
line-height:1.58;
}
/* Home: always use the approved DESKTOP hero source from index.html. */
body[data-page="home"] .gpfb-page-hero-image{
display:block;
width:100%;
max-width:none;
height:100%;
object-fit:cover;
object-position:center center;
}
/* Tablet navigation: collapse before the full menu becomes cramped. */
@media(max-width:960px){
.mobile-toggle{display:flex}
.nav{
display:none;
position:absolute;
top:78px;
left:0;
right:0;
max-height:calc(100vh - 78px);
overflow-y:auto;
overscroll-behavior:contain;
background:var(--warm);
padding:15px 20px 24px;
border-bottom:1px solid var(--border);
box-shadow:var(--shadow);
flex-direction:column;
align-items:stretch;
gap:0;
}
.nav.open{display:flex}
.nav a{padding:12px 4px}
.nav a::after{bottom:5px}
.nav .nav-cta{text-align:center;margin-top:8px}
.brand{width:190px}
body:not([data-page="home"]) .gpfb-page-hero{padding:48px 0 56px}
body:not([data-page="home"]) .gpfb-page-hero-copy{width:100%}
body:not([data-page="home"]) .gpfb-page-hero h1{font-size:clamp(46px,7vw,62px)}
}
@media(max-width:760px){
.section-sm{padding:46px 0}
.two-col,.split-feature,.profile-grid,.profile-content,.sidebar-layout,.petition-heading,
.contact-grid,.legal-tabs,.events-feature,.resource-feature,.newsletter-grid{grid-template-columns:1fr}
.button-row,.hero-actions{gap:10px}
.button-row .btn,.hero-actions .btn{max-width:100%}
body:not([data-page="home"]) .gpfb-page-hero{padding:42px 0 48px}
body:not([data-page="home"]) .gpfb-page-hero-breadcrumb{margin-bottom:20px;font-size:13px}
body:not([data-page="home"]) .gpfb-page-hero h1{font-size:clamp(41px,8.8vw,54px)}
body:not([data-page="home"]) .gpfb-page-hero p{font-size:16px}
}
@media(max-width:620px){
body{font-size:15px}
.container{width:min(var(--max),calc(100% - 28px))}
.nav{top:68px;max-height:calc(100vh - 68px);padding-inline:14px}
.brand{width:168px}
.section{padding:54px 0}
.section-sm{padding:40px 0}
.section-head{margin-bottom:26px}
.card{padding:20px}
.btn{padding-inline:16px}
body:not([data-page="home"]) .gpfb-page-hero{
min-height:auto;
padding:36px 0 42px;
}
body:not([data-page="home"]) .gpfb-page-hero-breadcrumb{margin-bottom:18px;gap:6px}
body:not([data-page="home"]) .gpfb-page-hero .eyebrow{margin-bottom:12px;font-size:11px}
body:not([data-page="home"]) .gpfb-page-hero h1{
max-width:100%;
margin-bottom:16px;
font-size:clamp(36px,10.5vw,48px);
line-height:1.04;
}
body:not([data-page="home"]) .gpfb-page-hero p{max-width:100%;font-size:15px;line-height:1.55}
}
@media(max-width:430px){
.container{width:min(var(--max),calc(100% - 24px))}
.button-row .btn,.hero-actions .btn{width:100%}
.section-head h2,.content-title{font-size:clamp(29px,9vw,38px)}
.trust-item{padding:16px 8px;font-size:12px}
.footer-logo-box{max-width:100%}
body:not([data-page="home"]) .gpfb-page-hero h1{font-size:clamp(34px,10.8vw,43px)}
}
/* =========================================================
REV 17 - Hero behavior refinements
- Home: preserve the complete approved desktop artwork on tablet/mobile.
- Inner pages: uniform desktop banner, content-driven height below desktop.
========================================================= */
@media(min-width:961px){
body:not([data-page="home"]) .gpfb-page-hero{
min-height:360px;
display:flex;
align-items:center;
padding:52px 0 58px;
}
}
@media(max-width:960px){
/* Inner-page title banners grow only as much as their content needs. */
body:not([data-page="home"]) .gpfb-page-hero{
min-height:0;
height:auto;
display:block;
padding:42px 0 48px;
}
/* Home uses the exact same desktop artwork, shown in full rather than
creating a mobile-specific crop with object-fit:cover. */
body[data-page="home"] .gpfb-page-hero{
min-height:0;
height:auto;
display:block;
padding:0 0 48px;
background:#f7fbfc;
}
body[data-page="home"] .gpfb-page-hero::before{display:none}
body[data-page="home"] .gpfb-page-hero-image{
position:relative;
inset:auto;
z-index:0;
display:block;
width:100%;
height:auto;
max-width:none;
object-fit:contain;
object-position:center center;
}
body[data-page="home"] .gpfb-page-hero .container{
position:relative;
z-index:2;
padding-top:34px;
}
body[data-page="home"] .gpfb-page-hero-breadcrumb{margin-bottom:22px}
body[data-page="home"] .gpfb-page-hero-copy{width:100%;max-width:760px}
}
@media(max-width:760px){
body:not([data-page="home"]) .gpfb-page-hero{padding:34px 0 40px}
body:not([data-page="home"]) .gpfb-page-hero-breadcrumb{margin-bottom:18px}
body[data-page="home"] .gpfb-page-hero{padding-bottom:42px}
body[data-page="home"] .gpfb-page-hero .container{padding-top:30px}
}
@media(max-width:430px){
body:not([data-page="home"]) .gpfb-page-hero{padding:30px 0 36px}
body[data-page="home"] .gpfb-page-hero{padding-bottom:36px}
body[data-page="home"] .gpfb-page-hero .container{padding-top:26px}
}
/* =========================================================
REV 18 - Home hero parity fix
The homepage now keeps the SAME light desktop world-map
artwork and the SAME overlaid copy structure at every size.
This block deliberately overrides REV 17's mobile flow,
which had moved the image above the copy and duplicated the
visual impression of the hero.
========================================================= */
body[data-page="home"] .gpfb-page-hero{
position:relative;
isolation:isolate;
overflow:hidden;
background:#eef5f7;
}
body[data-page="home"] .gpfb-page-hero-image{
position:absolute;
inset:0;
z-index:0;
display:block;
width:100%;
height:100%;
max-width:none;
object-fit:cover;
object-position:center center;
}
body[data-page="home"] .gpfb-page-hero::before{
display:block;
z-index:1;
background:
radial-gradient(circle at 8% 44%,rgba(255,255,255,.44) 0%,rgba(255,255,255,.14) 30%,rgba(255,255,255,0) 55%),
linear-gradient(90deg,rgba(247,251,252,.99) 0%,rgba(247,251,252,.97) 27%,rgba(247,251,252,.84) 40%,rgba(247,251,252,.44) 53%,rgba(247,251,252,.10) 66%,rgba(247,251,252,0) 78%);
}
body[data-page="home"] .gpfb-page-hero .container{
position:relative;
z-index:2;
padding-top:0;
}
@media(max-width:960px){
body[data-page="home"] .gpfb-page-hero{
min-height:540px;
height:auto;
display:flex;
align-items:center;
padding:48px 0 54px;
}
body[data-page="home"] .gpfb-page-hero-image{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
/* Keep Bangladesh/network activity visible on the right while
retaining the exact same source artwork as desktop. */
object-position:68% center;
}
body[data-page="home"] .gpfb-page-hero::before{
display:block;
background:
linear-gradient(90deg,rgba(247,251,252,.99) 0%,rgba(247,251,252,.97) 44%,rgba(247,251,252,.83) 65%,rgba(247,251,252,.38) 83%,rgba(247,251,252,.10) 100%);
}
body[data-page="home"] .gpfb-page-hero .container{padding-top:0}
body[data-page="home"] .gpfb-page-hero-breadcrumb{margin-bottom:24px}
body[data-page="home"] .gpfb-page-hero-copy{width:min(78%,650px);max-width:650px}
body[data-page="home"] .gpfb-page-hero h1{
max-width:650px;
margin-bottom:20px;
font-size:clamp(42px,6.8vw,56px);
line-height:1.02;
}
body[data-page="home"] .gpfb-page-hero p{max-width:570px;font-size:16px}
}
@media(max-width:620px){
body[data-page="home"] .gpfb-page-hero{
min-height:500px;
padding:34px 0 40px;
align-items:center;
}
body[data-page="home"] .gpfb-page-hero-image{
object-position:72% center;
}
body[data-page="home"] .gpfb-page-hero::before{
background:
linear-gradient(90deg,rgba(247,251,252,1) 0%,rgba(247,251,252,.98) 54%,rgba(247,251,252,.87) 72%,rgba(247,251,252,.54) 88%,rgba(247,251,252,.28) 100%);
}
body[data-page="home"] .gpfb-page-hero-breadcrumb{margin-bottom:20px;font-size:12px}
body[data-page="home"] .gpfb-page-hero-copy{width:100%;max-width:100%}
body[data-page="home"] .gpfb-page-hero .eyebrow{margin-bottom:12px;font-size:10px;letter-spacing:.13em}
body[data-page="home"] .gpfb-page-hero h1{
max-width:94%;
margin:0 0 18px;
font-size:clamp(36px,10vw,44px);
line-height:1.045;
letter-spacing:-.035em;
}
body[data-page="home"] .gpfb-page-hero p{
max-width:92%;
margin:0;
font-size:15px;
line-height:1.52;
}
}
@media(max-width:430px){
body[data-page="home"] .gpfb-page-hero{
min-height:470px;
padding:30px 0 34px;
}
body[data-page="home"] .gpfb-page-hero-image{object-position:74% center}
body[data-page="home"] .gpfb-page-hero h1{
max-width:100%;
font-size:clamp(34px,10.2vw,40px);
}
body[data-page="home"] .gpfb-page-hero p{max-width:100%;font-size:14px}
}
/* =========================================================
REV 19 - Members separation + contact address refinements
========================================================= */
body[data-page="members"] .members-feature-strip-wrap{
position:relative;
z-index:1;
margin-top:0;
padding:48px 0 14px;
background:var(--warm,#fafaf7);
}
body[data-page="members"] .members-feature-strip{
margin:0;
}
body[data-page="contact"] .contact-card small{
display:block;
margin-top:3px;
line-height:1.55;
}
body[data-page="contact"] .contact-address-card{
align-items:flex-start;
}
body[data-page="contact"] .contact-address-card .contact-icon{
flex:0 0 42px;
}
@media(max-width:860px){
body[data-page="members"] .members-feature-strip-wrap{
margin-top:0;
padding-top:36px;
}
}
@media(max-width:620px){
body[data-page="members"] .members-feature-strip-wrap{
margin-top:0;
padding-top:30px;
}
}