:root{
  --ink:#17202b;
  --navy:#10263f;
  --blue:#2f6fb3;
  --blue-deep:#1f4f82;
  --gold:#c99a4b;
  --cream:#f7f4ee;
  --paper:#ffffff;
  --mist:#eef3f7;
  --line:#dbe3ea;
  --muted:#5c6773;
  --shadow:0 18px 50px rgba(16,38,63,.12);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:hidden;
  color:var(--ink);
  background:var(--paper);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.65;
}
a{color:inherit}
img{max-width:100%;display:block}
.container{width:min(1160px,calc(100% - 40px));margin:0 auto}
.eyebrow{
  margin:0 0 10px;
  color:var(--blue-deep);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
h1,h2,h3{
  margin:0;
  color:var(--navy);
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.08;
  letter-spacing:-.02em;
}
h1{font-size:clamp(2.8rem,6vw,5.9rem)}
h2{font-size:clamp(2.1rem,4vw,3.5rem)}
h3{font-size:1.45rem}
p{margin:0 0 1rem}
.lead{font-size:clamp(1.05rem,2vw,1.3rem);color:#344454;max-width:760px}
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(219,227,234,.9);
  backdrop-filter:blur(14px);
}
.header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;color:var(--navy)}
.brand-mark{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  color:white;background:linear-gradient(145deg,var(--navy),var(--blue));
  border:2px solid rgba(201,154,75,.75);
  font-family:Georgia,serif;font-size:1.05rem;
}
.brand-text{font-size:.92rem;line-height:1.05;max-width:190px;letter-spacing:.02em}
.main-nav{display:flex;align-items:center;gap:8px}
.main-nav a{
  text-decoration:none;
  padding:10px 12px;
  border-radius:999px;
  font-size:.91rem;
  font-weight:700;
  color:#38495a;
}
.main-nav a:hover,.main-nav a.active{background:var(--mist);color:var(--blue-deep)}
.mobile-menu{display:none;position:relative}
.mobile-menu summary{cursor:pointer;font-weight:800;color:var(--navy);list-style:none}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu nav{
  position:absolute;right:0;top:36px;width:240px;
  padding:12px;background:white;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow)
}
.mobile-menu nav a{display:block;padding:10px 12px;text-decoration:none;border-radius:10px;font-weight:700}
.mobile-menu nav a:hover{background:var(--mist)}
.hero{
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 20%,rgba(47,111,179,.16),transparent 26%),
    linear-gradient(180deg,#fbfcfd 0%,#f5f8fb 100%);
}
.hero-grid{
  min-height:720px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  gap:70px;
  padding:72px 0;
}
.hero-copy .tagline{
  margin:22px 0 30px;
  font-family:Georgia,serif;
  font-size:clamp(1.25rem,2.1vw,1.85rem);
  color:#354a5e;
  max-width:760px;
}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 21px;border-radius:999px;
  text-decoration:none;font-weight:800;border:1px solid transparent;
}
.btn-primary{background:var(--navy);color:white;box-shadow:0 10px 24px rgba(16,38,63,.18)}
.btn-primary:hover{background:var(--blue-deep)}
.btn-secondary{background:white;border-color:var(--line);color:var(--navy)}
.hero-art{
  position:relative;
  min-height:520px;
  border-radius:32px;
  background:linear-gradient(145deg,var(--navy),var(--blue-deep) 62%,var(--blue));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-art:before,.hero-art:after{
  content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.18)
}
.hero-art:before{width:420px;height:420px;right:-125px;top:-75px}
.hero-art:after{width:290px;height:290px;left:-80px;bottom:-60px}
.art-card{
  position:absolute;left:42px;right:42px;bottom:42px;
  padding:34px;border-radius:24px;
  background:rgba(255,255,255,.94);
  box-shadow:0 18px 45px rgba(0,0,0,.2)
}
.art-card strong{display:block;font-family:Georgia,serif;color:var(--navy);font-size:2rem;line-height:1.08}
.art-card span{display:block;margin-top:10px;color:var(--muted)}
.art-word{
  position:absolute;top:58px;left:44px;
  color:rgba(255,255,255,.92);
  font:800 clamp(3.5rem,8vw,7rem)/.9 Georgia,serif;
  letter-spacing:-.06em
}
section{padding:94px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:42px}
.section-head .lead{max-width:620px}
.about{background:var(--navy);color:white}
.about h2,.about .eyebrow{color:white}
.about .lead{color:#dbe7f2}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}
.about-statement{
  font-family:Georgia,serif;
  font-size:clamp(1.65rem,3vw,2.65rem);
  line-height:1.25;
  color:white;
}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.pill{padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);font-size:.9rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  padding:30px;border:1px solid var(--line);border-radius:var(--radius);
  background:white;box-shadow:0 10px 32px rgba(16,38,63,.05)
}
.card-icon{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  margin-bottom:24px;background:var(--mist);color:var(--blue-deep);
  font-weight:900
}
.card h3{margin-bottom:12px}
.card p{color:var(--muted)}
.card a{display:inline-block;margin-top:8px;color:var(--blue-deep);font-weight:800;text-decoration:none}
.card a:hover{text-decoration:underline}
.band{background:var(--cream)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.feature-panel{
  min-height:390px;border-radius:30px;padding:44px;
  background:linear-gradient(135deg,#173454,#2f6fb3);
  color:white;display:flex;flex-direction:column;justify-content:end;
  position:relative;overflow:hidden
}
.feature-panel:after{
  content:"";position:absolute;width:260px;height:260px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);right:-80px;top:-80px
}
.feature-panel h2,.feature-panel h3{color:white}
.feature-panel p{color:#dce8f2;max-width:540px}
.feature-panel .eyebrow{color:#f1d7a5}
.spotlight{
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px
}
.spotlight-card{
  padding:34px;border-radius:24px;
  background:white;border:1px solid var(--line)
}
.spotlight-card .label{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:var(--gold)}
.callout{
  padding:48px;border-radius:30px;
  background:linear-gradient(135deg,#eef4f9,#fff);
  border:1px solid var(--line)
}
.page-hero{padding:84px 0 70px;background:linear-gradient(180deg,#f7fafc,#fff)}
.page-hero .lead{margin-top:20px}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:54px}
.prose h2{font-size:2.25rem;margin:48px 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:30px 0 10px}
.prose p,.prose li{color:#445361}
.prose ul{padding-left:20px}
.sidebar-card{position:sticky;top:110px;padding:28px;border-radius:22px;background:var(--mist)}
.sidebar-card h3{margin-bottom:12px}
.sidebar-card a{display:block;margin-top:9px;color:var(--blue-deep);font-weight:800;text-decoration:none}
.book-card{
  display:grid;grid-template-columns:220px 1fr;gap:36px;align-items:center;
  padding:32px;border:1px solid var(--line);border-radius:26px;background:white
}
.book-cover{
  aspect-ratio:3/4;border-radius:16px;padding:24px;
  background:linear-gradient(150deg,var(--navy),var(--blue));
  color:white;display:flex;align-items:end;font:700 1.45rem/1.1 Georgia,serif
}
.criteria{counter-reset:item;display:grid;gap:18px}
.criterion{display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start}
.criterion:before{
  counter-increment:item;content:counter(item);
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:white;font-weight:900
}
.contact{background:var(--navy);color:white}
.contact h2,.contact .eyebrow{color:white}
.contact .lead{color:#dce7f2}
.contact-box{
  padding:34px;border-radius:24px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13)
}
.footer{padding:30px 0;background:#0b1a2b;color:#b9c8d5;font-size:.9rem}
.footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:center}
.footer a{color:white;text-decoration:none}
.note{font-size:.9rem;color:var(--muted);font-style:italic}
@media (max-width:900px){
  .main-nav{display:none}.mobile-menu{display:block}
  .hero-grid,.about-grid,.split,.content-grid{grid-template-columns:1fr}
  .hero-grid{min-height:auto;gap:44px;padding:54px 0}
  .hero-art{min-height:430px}
  .cards{grid-template-columns:1fr}
  .spotlight{grid-template-columns:1fr}
  .sidebar-card{position:static}
  .book-card{grid-template-columns:160px 1fr}
  .section-head{display:block}
  .section-head .lead{margin-top:16px}
}
@media (max-width:620px){
  .container{width:min(100% - 28px,1160px)}
  .header-inner{min-height:68px}
  .brand-text{font-size:.82rem;max-width:155px}
  .hero-grid{padding:42px 0;overflow:hidden}
  .hero-copy,.hero-art{min-width:0}
  h1{font-size:2.55rem;overflow-wrap:break-word}
  h2{font-size:2.15rem}
  section{padding:68px 0}
  .hero-art{min-height:360px}
  .art-word{left:26px;top:34px}
  .art-card{left:22px;right:22px;bottom:22px;padding:25px}
  .about-statement{font-size:1.7rem}
  .card,.spotlight-card,.callout{padding:24px}
  .book-card{grid-template-columns:1fr}
  .book-cover{max-width:220px}
  .footer-inner{display:block}
  .footer-inner div+div{margin-top:8px}
}

/* Hope Through Change brand imagery */
.brand-logo{
  width:48px;height:48px;flex:0 0 48px;display:block;
  filter:drop-shadow(0 4px 8px rgba(16,38,63,.14));
}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-logo{width:34px;height:34px;display:block}
.globe-art{
  min-height:520px;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 45%,rgba(47,111,179,.13),transparent 58%),
    linear-gradient(145deg,#ffffff,#eef4f9);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.globe-art:before,.globe-art:after{display:none}
.hero-globe{
  width:min(100%,520px);
  max-height:520px;
  object-fit:contain;
  filter:drop-shadow(0 16px 24px rgba(16,38,63,.18));
}
@media (max-width:620px){
  .brand-logo{width:42px;height:42px;flex-basis:42px}
  .globe-art{min-height:350px;padding:12px}
  .hero-globe{max-height:330px}
  .footer-logo{width:30px;height:30px}
}


/* Mobile viewport hardening */
@media (max-width:620px){
  html,body,main,.site-header,.footer{max-width:100%;overflow-x:hidden}
  .container{width:calc(100% - 28px);max-width:1160px}
  .header-inner,.hero-grid,.hero-copy,.hero-art{max-width:100%;min-width:0}
  .hero-copy h1,.hero-copy p{max-width:100%}
}


/* Final realistic values globe */
.globe-art{
  min-height:520px;
  display:grid;
  place-items:center;
  padding:28px;
  background:linear-gradient(145deg,#ffffff,#edf3f8);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.globe-wrap{
  position:relative;
  width:min(100%,520px);
  aspect-ratio:1;
  overflow:hidden;
  border-radius:50%;
  background:#061d3c;
  border:3px solid rgba(201,154,75,.72);
  box-shadow:
    0 22px 42px rgba(16,38,63,.24),
    inset -28px -24px 44px rgba(2,15,34,.42),
    inset 14px 12px 28px rgba(255,255,255,.12);
}
.globe-wrap:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:50%;
  background:
    radial-gradient(circle at 31% 25%,rgba(255,255,255,.18),transparent 24%),
    radial-gradient(circle at 44% 40%,transparent 48%,rgba(2,16,35,.16) 76%,rgba(2,16,35,.34) 100%);
}
.hero-globe{
  width:100%;
  height:100%;
  max-height:none;
  object-fit:cover;
  transform:scale(1.06);
  filter:saturate(1.1) contrast(1.04);
}
.globe-label{
  position:absolute;
  z-index:2;
  transform:translate(-50%,-50%);
  color:#111820;
  font:700 clamp(.72rem,1.15vw,.98rem)/.98 Georgia,"Times New Roman",serif;
  letter-spacing:-.02em;
  text-align:center;
  text-transform:uppercase;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    1px 0 0 rgba(255,255,255,.8),
    -1px 0 0 rgba(255,255,255,.8),
    0 -1px 0 rgba(255,255,255,.8);
}
.globe-label.justice{left:24%;top:34%}
.globe-label.equality{left:69%;top:33%}
.globe-label.forgiveness{left:56%;top:53%}
.globe-label.liberation{left:30%;top:63%}
.globe-label.empathy{left:82%;top:72%}

@media (max-width:620px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .container{width:calc(100vw - 28px);max-width:1160px}
  .header-inner,.hero-grid,.hero-copy,.hero-art,.actions{min-width:0;max-width:100%}
  .hero-grid{padding:38px 0;gap:34px;overflow:visible}
  .hero-copy h1{
    max-width:100%;
    font-size:clamp(2.15rem,10.5vw,3rem);
    line-height:1.02;
    letter-spacing:-.035em;
    overflow-wrap:normal;
    word-break:normal;
  }
  .hero-copy .tagline,.hero-copy .lead{max-width:100%;overflow-wrap:break-word}
  .actions .btn{max-width:100%;white-space:normal;text-align:center}
  .globe-art{min-height:0;padding:14px}
  .globe-wrap{width:min(100%,360px)}
  .globe-label{font-size:clamp(.58rem,2.55vw,.76rem)}
}


/* Realistic values globe */
.globe-art{
  position:relative;
  min-height:540px;
  display:grid;
  place-items:center;
  padding:28px;
  background:
    radial-gradient(circle at 50% 42%,rgba(47,111,179,.12),transparent 55%),
    linear-gradient(145deg,#ffffff,#eef4f9);
}
.globe-wrap{
  position:relative;
  width:min(100%,500px);
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  background:#0b1f44;
  box-shadow:
    0 24px 44px rgba(16,38,63,.24),
    inset -34px -20px 58px rgba(0,0,0,.28),
    inset 24px 12px 42px rgba(255,255,255,.13);
  border:2px solid rgba(201,154,75,.75);
  isolation:isolate;
}
.globe-wrap:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:50%;
  background:
    radial-gradient(circle at 26% 20%,rgba(255,255,255,.28),transparent 28%),
    linear-gradient(102deg,rgba(255,255,255,.04) 35%,transparent 58%,rgba(0,0,0,.28) 100%);
}
.hero-globe{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  max-height:none;
  object-fit:cover;
  object-position:center;
  transform:scale(1.07);
  filter:saturate(1.15) contrast(1.04);
}
.globe-label{
  position:absolute;
  z-index:3;
  transform:translate(-50%,-50%);
  color:#0a2038;
  font:900 clamp(.72rem,1.1vw,.98rem)/1.02 Georgia,"Times New Roman",serif;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:-.02em;
  text-shadow:
    0 1px 1px rgba(255,255,255,.95),
    0 0 7px rgba(255,255,255,.9),
    1px 0 0 rgba(255,255,255,.65),
    -1px 0 0 rgba(255,255,255,.65);
}
.globe-label.justice{left:21%;top:28%}
.globe-label.equality{left:69%;top:28%}
.globe-label.forgiveness{left:54%;top:48%}
.globe-label.liberation{left:28%;top:66%}
.globe-label.empathy{left:79%;top:72%}
.earth-credit{
  position:absolute;
  right:22px;
  bottom:14px;
  color:#7b8793;
  font-size:.68rem;
  letter-spacing:.02em;
}

/* Mobile layout verification hardening */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-copy{min-width:0;max-width:100%}
}
@media (max-width:620px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .container{width:calc(100% - 28px);max-width:100%;margin-left:auto;margin-right:auto}
  .hero,.hero-grid,.hero-copy,.hero-art,.about,.band,section{max-width:100%;min-width:0}
  .hero-grid{padding:38px 0;gap:30px}
  .hero-copy h1{
    max-width:100%;
    font-size:clamp(2.25rem,11vw,2.85rem);
    line-height:1.02;
    overflow-wrap:anywhere;
  }
  .hero-copy .tagline,.hero-copy .lead{max-width:100%;overflow-wrap:anywhere}
  .actions{align-items:stretch}
  .actions .btn{max-width:100%;white-space:normal;text-align:center}
  .globe-art{min-height:auto;padding:18px 14px 34px}
  .globe-wrap{width:min(100%,360px)}
  .globe-label{font-size:clamp(.62rem,2.8vw,.78rem)}
  .earth-credit{right:16px;bottom:10px}
}


/* iPhone-safe mobile navigation */
.mobile-menu{display:none;position:relative;z-index:10002}
.mobile-menu-toggle{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--navy);
  font:800 1rem/1 inherit;
  padding:12px 6px;
  cursor:pointer;
}
.mobile-nav{
  display:none;
  position:fixed;
  top:68px;
  left:14px;
  right:14px;
  z-index:10001;
  padding:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 20px 50px rgba(16,38,63,.22);
}
.mobile-menu.open .mobile-nav{display:block}
.mobile-nav a{
  display:block;
  padding:14px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  color:var(--navy);
}
.mobile-nav a + a{margin-top:4px}
.mobile-nav a:hover,.mobile-nav a:focus{background:var(--mist)}
@media (max-width:900px){
  .main-nav{display:none}
  .mobile-menu{display:block}
  .site-header{z-index:10000}
}


/* Override legacy mobile-menu nav geometry */
.mobile-menu .mobile-nav{
  display:none;
  position:fixed;
  top:68px;
  left:14px;
  right:14px;
  width:auto;
  z-index:10001;
}
.mobile-menu.open .mobile-nav{display:block}


/* Final mobile menu stacking fix: dropdown is outside sticky header */
.mobile-nav{
  display:none !important;
  position:fixed !important;
  top:68px !important;
  left:14px !important;
  right:14px !important;
  width:auto !important;
  z-index:20000 !important;
  padding:10px !important;
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
  box-shadow:0 20px 50px rgba(16,38,63,.22) !important;
}
.mobile-nav.open{display:block !important}