:root{--g:#0b3d2e;--o:#c89b2c;--r:#6b1d1d;--c:#f5f0e6;--ink:#182018;--m:#51605a;--rad:18px;--max:1120px;--sh:0 10px 24px rgba(0,0,0,.12)}
*{box-sizing:border-box}html,body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--c),#fff 30%)}
a{text-decoration:none;color:inherit}img{max-width:100%;height:auto}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}
.card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:var(--rad);box-shadow:var(--sh);overflow:hidden}
.pad{padding:18px}.h1{font-size:clamp(26px,3vw,42px);margin:0 0 10px}.h2{font-size:22px;margin:0 0 8px}.h3{font-size:18px;margin:0 0 6px}.p{margin:0 0 10px;line-height:1.55;color:var(--m)}
.grid{display:grid;gap:16px}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:980px){.two,.three,.four{grid-template-columns:1fr}}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;border:1px solid rgba(0,0,0,.10);background:#fff;cursor:pointer}
.btn.primary{background:var(--g);color:var(--c);border-color:rgba(255,255,255,.12)}
.btn.gold{background:var(--o);color:#1a1407;border-color:rgba(0,0,0,.06)}
.btn.danger{background:#b71c1c;color:#fff;border-color:rgba(0,0,0,.06)}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(11,61,46,.12);color:var(--g);font-weight:800;font-size:12px}
.kenteBar{height:10px;border-radius:999px;background:repeating-linear-gradient(90deg,#c89b2c 0 14px,#0b3d2e 14px 28px,#6b1d1d 28px 42px,#f5f0e6 42px 46px)}
.banner{background:radial-gradient(900px 340px at 15% -40%,rgba(200,155,44,.40),transparent 65%),radial-gradient(700px 320px at 90% -40%,rgba(107,29,29,.35),transparent 60%),linear-gradient(135deg,var(--g),#0f5136);color:var(--c);padding:8px 0 7px;border-bottom:1px solid rgba(255,255,255,.12)}
.brand{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.brandL{display:flex;align-items:center;gap:12px}
.mark{width:384px;height:384px;border-radius:34px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;overflow:hidden}
.mark img{width:384px;height:384px}
.title{font-weight:900;font-size:22px}.tag{opacity:.88;font-size:13px}
.actions{display:flex;gap:10px;flex-wrap:wrap}.actions .btn{background:rgba(255,255,255,.10);color:var(--c);border-color:rgba(255,255,255,.18)}
.navWrap{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(245,240,230,.92),rgba(255,255,255,.92));border-bottom:1px solid rgba(0,0,0,.08);backdrop-filter:blur(8px)}
.navRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.navLinks{display:flex;gap:12px;flex-wrap:wrap}.navLinks a{padding:10px 12px;border-radius:14px;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.85)}
.navLinks a.active,.navLinks a:hover{background:rgba(11,61,46,.10);border-color:rgba(11,61,46,.35);color:var(--g)}
.navToggle{display:none}
@media(max-width:980px){.navToggle{display:inline-flex}.navLinks{display:none;width:100%}.navLinks.open{display:flex;flex-direction:column}.mark{width:96px;height:96px}.mark img{width:384px;height:384px}}
label{font-size:13px;font-weight:900;color:#2b3a33;display:block;margin:10px 0 6px}
input,select,textarea{width:100%;padding:12px;border-radius:14px;border:1px solid rgba(0,0,0,.14);outline:none}
textarea{min-height:110px;resize:vertical}
.formRow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:760px){.formRow{grid-template-columns:1fr}}
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:10px 8px;border-bottom:1px solid rgba(0,0,0,.08);text-align:left;font-size:14px}
.table th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--m)}
.hr{height:1px;background:rgba(0,0,0,.08);border:0;margin:14px 0}
.footer{margin-top:28px;background:linear-gradient(180deg,rgba(11,61,46,.98),#0a2f23);color:rgba(245,240,230,.92);padding:18px 0}
.footer a{color:rgba(245,240,230,.92);text-decoration:underline}
.hero{position:relative;border-radius:var(--rad);overflow:hidden;min-height:420px;background:#111;box-shadow:var(--sh)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.35) 55%,rgba(0,0,0,.55))}
.heroInner{position:relative;z-index:2;padding:40px 26px;max-width:680px}
.heroEyebrow{letter-spacing:.18em;text-transform:uppercase;font-weight:900;color:rgba(200,155,44,.92);font-size:12px}
.heroH{font-family:Georgia,'Times New Roman',serif;font-size:clamp(28px,4vw,50px);line-height:1.06;color:#fff;margin:12px 0}
.heroH em{font-style:italic;font-weight:700}
.heroP{color:rgba(255,255,255,.82);max-width:56ch}
.heroCtas{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.featureCards{margin-top:-54px;position:relative;z-index:3}
.featureIcon{width:44px;height:44px;border-radius:999px;background:rgba(200,155,44,.18);border:1px solid rgba(200,155,44,.35);display:flex;align-items:center;justify-content:center}
.small{font-size:12px;color:var(--m)}


/* --- v5 adjustments --- */
[data-site-title], .brandTitle{ font-size: clamp(40px, 3.0vw, 56px) !important; line-height: 1.05; }
[data-site-sub], .brandSub{ font-size: clamp(20px, 1.6vw, 28px) !important; line-height: 1.2; }
/* Orange subtitle requested */
[data-site-sub], .brandSub{ color: var(--o, #c89b2c) !important; }

/* Center hero CTAs in middle of banner and increase font */
.heroCtasCentered{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  margin-top: 16px !important;
}
.heroCtasCentered .btn{
  font-size: 18px !important;
  padding: 14px 18px !important;
  border-radius: 999px !important;
}
.heroCtasCentered a{
  font-size: 18px !important;
}

/* Ensure hero content is centered vertically */
.hero .container, .heroSection .container{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height: 520px;
}

/* Place feature cards below banner instead of overlapping */
.features, .highlights, .cardsSection{
  margin-top: 18px !important;
}

@media(max-width:680px){
  .heroCtasCentered{ gap:10px !important; }
  .heroCtasCentered .btn, .heroCtasCentered a{ font-size:16px !important; }
  [data-site-title], .brandTitle{ font-size: clamp(32px, 7vw, 44px) !important; }
  [data-site-sub], .brandSub{ font-size: clamp(16px, 4.5vw, 22px) !important; }
}


/* --- v6 layout requests --- */

/* Brand subtitle ("Orlu Atlanta Community") in orange */
.brandSub, [data-site-sub]{
  color: var(--o, #c89b2c) !important;
}

/* Hero image: never crop; show full photo including caps */
.heroImage{
  width:100% !important;
  height:100% !important;
  object-fit: contain !important;
  object-position: top center !important;
}

/* Hero layout: center text and CTA group in the middle of banner */
.hero .container, .heroSection .container{
  min-height: 640px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.heroTextCentered{
  text-align:center !important;
  max-width: 980px;
  margin-left:auto;
  margin-right:auto;
}
.heroTextCentered .p{
  margin-left:auto;
  margin-right:auto;
}

/* CTA group centered */
.heroCtasCentered{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  margin-top: 18px !important;
}
.heroCtasCentered .btn{
  font-size: 18px !important;
  padding: 14px 18px !important;
  border-radius: 999px !important;
}

/* Feature cards should sit below banner (no overlap) */
.features, .highlights, .cardsSection, section.features, section.highlights, section.cardsSection{
  margin-top: 28px !important;
  position: static !important;
  transform: none !important;
  top: auto !important;
}

/* Neutralize any negative margin overlap for feature cards */
.features{ margin-top: 28px !important; }

.headerActions .btn, .headerActions a.btn{ display:none; }

/* --- v7 header logo updates --- */
.mark{display:none !important;}
.logoImg{width:144px;height:144px;border-radius:999px;object-fit:cover;border:2px solid rgba(245,240,230,.45);box-shadow:0 10px 20px rgba(0,0,0,.22)}
@media(max-width:980px){.logoImg{width:96px;height:96px}}

/* --- v7 hero layout: left copy + right vertical feature cards --- */
.hero{position:relative;border-radius:22px;overflow:hidden;min-height:560px}
.heroImage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;filter:brightness(.72) saturate(1.05)}
.heroLayout{position:relative;z-index:2;display:grid;grid-template-columns: 1.25fr .75fr;gap:18px;align-items:center;padding:28px}
.heroInner{max-width:none}
.heroLeft{text-align:left}
.heroEyebrow,.heroH,.heroP{text-align:left}
.heroP{max-width:760px}
.heroCtasCentered{justify-content:flex-start !important;flex-wrap:nowrap !important;gap:12px}
.heroCtasCentered .btn{white-space:nowrap}
.heroFeatures{display:flex;flex-direction:column;gap:14px}
.heroFeatures .card{border-radius:18px}
.heroFeatures .pad{padding:16px}
@media(max-width:980px){
  .heroLayout{grid-template-columns:1fr; padding:22px}
  .heroCtasCentered{flex-wrap:wrap !important;justify-content:center !important}
  .heroLeft{text-align:center}
  .heroEyebrow,.heroH,.heroP{text-align:center}
  .heroFeatures{flex-direction:row;flex-wrap:wrap}
  .heroFeatures .card{flex:1 1 240px}
}

/* v7: if any featureCards section remains below hero, hide it */
.featureCards.grid.three{display:none}

/* v7: tighter header text */
.title{font-size:20px}
.tag{font-size:12px}


/* --- v8 index layout: left CTAs + main content + right feature cards --- */
.homeColumns{
  display:grid;
  grid-template-columns: 220px 1fr 320px;
  gap:18px;
  align-items:start;
  margin-top: 18px;
}
.leftRail{position:sticky; top: 14px;}
.rightRail{position:sticky; top: 14px;}
.sideNav{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.sideNav .btn{
  justify-content:center;
  text-align:center;
  padding: 14px 16px;
  font-size: 16px;
  border-radius: 16px;
}
.featureCardsRight{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.featureCardsRight .card{border-radius:18px}
.featureCardsRight .pad{padding:16px}
.introCopy{margin-top: 0}
.introCopy .h1{font-size: 28px}
@media(max-width:1100px){
  .homeColumns{grid-template-columns: 200px 1fr 300px;}
}
@media(max-width:980px){
  .homeColumns{grid-template-columns:1fr; }
  .leftRail,.rightRail{position:static}
  .sideNav{flex-direction:row; flex-wrap:wrap; justify-content:center}
  .sideNav .btn{flex: 1 1 220px}
}

.heroCtas, .heroCtasCentered{display:none !important;}

.featureCards.grid.three{display:none !important;}


/* --- pdf index layout --- */
.bannerSlim{padding:14px 0 14px !important}
.bannerRow{display:flex;align-items:center;justify-content:flex-start}
.logoSeal{
  width:120px;height:120px;border-radius:999px;object-fit:cover;
  border:3px solid rgba(245,240,230,.55);
  box-shadow:0 14px 26px rgba(0,0,0,.22);
  background:rgba(0,0,0,.08);
}
.brandText .title{font-size:26px;line-height:1.05}
.brandText .tag{opacity:.92;margin-top:6px}

.pillsNav{margin-top:0}
.pillsRow{display:flex;gap:12px;justify-content:center;align-items:center;padding:10px 0}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:120px;
  padding:10px 18px;
  border-radius:12px;
  background: rgba(245,240,230,.24);
  border:1px solid rgba(245,240,230,.22);
  color: #f5f0e6;
  text-decoration:none;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}
.pill:hover{transform:translateY(-1px)}
.pill.active{background: rgba(245,240,230,.34);border-color:rgba(245,240,230,.32)}

.layout3{
  display:grid;
  grid-template-columns: 220px 1fr 220px;
  gap:18px;
  align-items:center;
}
.sideLeft,.sideRight{display:flex;flex-direction:column;gap:14px}
.sideBtn{
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:16px 14px;
  border-radius:16px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 14px 24px rgba(0,0,0,.20);
  border:1px solid rgba(0,0,0,.08);
  letter-spacing:.2px;
}
.sideBtn.green{
  background: linear-gradient(180deg, rgba(45,200,88,.96), rgba(11,61,46,.96));
  color:#ffffff;
}
.sideBtn.orange{
  background: linear-gradient(180deg, rgba(255,145,64,.98), rgba(198,78,22,.98));
  color:#ffffff;
}
.sideBtn:hover{transform:translateY(-1px)}

.centerStage{width:100%}
.heroFrame{
  border-radius:14px;
  background:#f6f4ef;
  padding:10px;
  box-shadow:0 18px 34px rgba(0,0,0,.18);
}
.heroPhotoFull{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
}

.welcomeCopy{
  text-align:center;
  padding:18px 0 10px;
}
.welcomeCopy h1{
  font-size:44px;
  margin:14px 0 4px;
  letter-spacing:.2px;
}
.welcomeCopy h2{
  font-size:30px;
  margin:0 0 10px;
}
.welcomeCopy p{
  margin:8px auto;
  max-width: 980px;
  font-size:16px;
}
.ctaRowWide{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  margin-top:14px;
}
.ctaWide{
  width:min(860px, 100%);
  padding:14px 16px;
  border-radius:14px;
  text-decoration:none;
  font-weight:900;
  text-align:center;
  box-shadow:0 14px 26px rgba(0,0,0,.18);
  border:1px solid rgba(0,0,0,.08);
}
.ctaWide.green{
  background: linear-gradient(180deg, rgba(45,200,88,.96), rgba(11,61,46,.96));
  color:#ffffff;
}
.ctaWide.orange{
  background: linear-gradient(180deg, rgba(255,145,64,.98), rgba(198,78,22,.98));
  color:#ffffff;
}
.ctaWide:hover{transform:translateY(-1px)}

@media(max-width:980px){
  .layout3{grid-template-columns:1fr; align-items:start}
  .sideLeft,.sideRight{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .sideBtn{flex:1 1 180px}
  .welcomeCopy h1{font-size:34px}
  .welcomeCopy h2{font-size:24px}
  .logoSeal{width:92px;height:92px}
  .brandText .title{font-size:22px}
}


/* --- pdf home layout v10 --- */
.layoutPdfHome{background:#ffffff;}
.layoutPdfHome .footer{margin-top:28px}

/* Top banner */
.topBanner{
  background:#0f5a2b;
  border-bottom: 1px solid rgba(0,0,0,.14);
}
.topBannerInner{
  display:grid;
  grid-template-columns: 90px 1fr 90px;
  gap:14px;
  align-items:center;
  padding: 10px 0;
}
.topLogo{
  width:78px;height:78px;border-radius:999px;object-fit:cover;
  border:2px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.12);
  box-shadow: 0 10px 18px rgba(0,0,0,.20);
}
.topBannerText{color:#ffffff;text-align:center}
.topTitle{
  font-weight: 900;
  letter-spacing:.8px;
  font-size: 22px;
}
.topTag{
  margin-top:4px;
  font-weight:700;
  opacity:.95;
  font-size: 14px;
}

/* Pill navigation row */
.pillNav{background:#ffffff;padding:10px 0 12px}
.pillNavRow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.pillBtn{
  background:#ffffff;
  color:#0f5a2b;
  border:2px solid #0f5a2b;
  border-radius: 12px;
  padding: 10px 20px;
  font-weight: 900;
  text-decoration:none;
  box-shadow: 0 10px 16px rgba(0,0,0,.10);
}
.pillBtn:hover{transform:translateY(-1px)}
.pillBtn.active{background:#0f5a2b;color:#ffffff}

/* 3-column photo + buttons */
.homeGridWrap{padding-top: 6px; padding-bottom: 10px;}
.homeGrid{
  display:grid;
  grid-template-columns: 230px 1fr 230px;
  gap: 18px;
  align-items: center;
}
.homeLeft,.homeRight{
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.sidePill{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius: 14px;
  padding: 16px 14px;
  font-weight: 900;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 16px 24px rgba(0,0,0,.14);
}
.sidePill.green{
  background: linear-gradient(180deg, #38d86b, #0f5a2b);
  color:#ffffff;
}
.sidePill.orange{
  background: linear-gradient(180deg, #ff9a4f, #d15a1b);
  color:#ffffff;
}
.sidePill.tall{padding: 22px 14px; border-radius: 18px;}
.sidePill:hover{transform:translateY(-1px)}

/* Photo frame */
.photoFrame{
  background:#ffffff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 18px 32px rgba(0,0,0,.16);
  border:1px solid rgba(0,0,0,.12);
}
.homePhoto{
  width:100%;
  height:auto;
  display:block;
  border-radius: 8px;
  object-fit: contain; /* do not crop; show caps */
  background:#000000;
}

/* Kente strip */
.kenteStrip{
  height: 16px;
  margin: 14px auto 6px;
  width: min(820px, 100%);
  border-radius: 999px;
  box-shadow: 0 10px 16px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.08);
  background:
    repeating-linear-gradient(90deg,
      #0f5a2b 0 18px,
      #ff9a4f 18px 36px,
      #f4c542 36px 54px,
      #ffffff 54px 60px
    );
}

/* Welcome block */
.welcomeBlock{
  text-align:center;
  padding: 10px 0 22px;
}
.welcomeBlock h1{
  margin: 10px 0 0;
  font-size: 44px;
  color:#000;
  font-weight: 900;
}
.welcomeBlock h2{
  margin: 6px 0 10px;
  font-size: 28px;
  font-weight: 900;
  color:#000;
}
.welcomeLead{
  margin: 0 auto 8px;
  font-size: 18px;
  font-weight: 800;
  max-width: 980px;
  color:#111;
}
.welcomeBody{
  margin: 0 auto 14px;
  max-width: 980px;
  color:#222;
  line-height: 1.6;
}

/* CTA Bars */
.ctaBar{
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 12px auto 0;
  text-decoration:none;
  font-weight: 900;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 18px 30px rgba(0,0,0,.14);
  border: 1px solid rgba(0,0,0,.10);
  width: min(920px, 100%);
}
.ctaBar.green{background: linear-gradient(180deg, #38d86b, #0f5a2b); color:#fff;}
.ctaBar.orange{background: linear-gradient(180deg, #ff9a4f, #d15a1b); color:#fff;}
.ctaBar:hover{transform:translateY(-1px)}

/* Responsive */
@media(max-width:980px){
  .topBannerInner{grid-template-columns: 72px 1fr 72px}
  .topLogo{width:60px;height:60px}
  .topTitle{font-size: 18px}
  .homeGrid{grid-template-columns: 1fr; align-items:start}
  .homeLeft,.homeRight{flex-direction:row; flex-wrap:wrap; justify-content:center}
  .sidePill{flex: 1 1 170px}
  .sidePill.tall{flex: 1 1 210px}
  .welcomeBlock h1{font-size:34px}
  .welcomeBlock h2{font-size:22px}
}