@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Libre+Caslon+Display&display=swap');

:root{
  --cream:#ffffff;
  --soft-cream:#f5f4f1;
  --stone:#e9e7e2;
  --mushroom:#c9c5be;
  --taupe:#716a62;
  --ink:#151412;
  --white:#ffffff;
  --max:1240px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.7 "DM Sans",Arial,sans-serif}
a{color:inherit}.skip{position:fixed;left:8px;top:8px;transform:translateY(-160%);background:#111;color:#fff;padding:8px;z-index:999}.skip:focus{transform:none}
header{position:sticky;top:0;z-index:50;display:flex;align-items:center;width:100%;min-height:82px;padding:8px max(24px,calc((100% - var(--max))/2));background:rgba(255,255,255,.96);border-bottom:1px solid rgba(21,20,18,.10);backdrop-filter:blur(12px)}
header>a{display:flex;align-items:center;flex:0 0 auto}
header img{width:118px;height:auto;max-height:62px;object-fit:contain;display:block}
nav{margin-left:auto;display:flex;align-items:center;gap:22px}
nav a{text-decoration:none;font-size:14px}#menu{display:none;margin-left:auto;background:none;border:1px solid #777;padding:8px 12px}
h1,h2,h3{font-family:"Libre Caslon Display",Georgia,serif;font-weight:400;line-height:1.04;letter-spacing:-.02em;margin:0 0 18px}
h1{font-size:clamp(54px,7vw,104px)}h2{font-size:clamp(40px,5vw,68px)}h3{font-size:32px}p{margin:0 0 18px}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:600;color:var(--taupe)}
.wide{width:min(calc(100% - 48px),var(--max));margin:auto}.read{width:min(calc(100% - 48px),780px);margin:auto;text-align:center;padding:120px 0}
.hero{min-height:calc(100vh - 82px);display:grid;grid-template-columns:.82fr 1fr;gap:72px;align-items:center;padding:80px 0}
.btn{display:inline-block;background:var(--ink);color:var(--white);border:1px solid var(--ink);border-radius:3px;padding:13px 18px;text-decoration:none;text-transform:uppercase;letter-spacing:.07em;font-size:12px;font-weight:600}
.ph{min-height:590px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:linear-gradient(145deg,#e3e1dd,#c7c3bd);border:1px solid rgba(21,20,18,.12);color:#4d4944}
.ph b{font:30px "Libre Caslon Display",Georgia,serif}.ph small{text-transform:uppercase;letter-spacing:.12em}
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding:120px 0}
.business{background:var(--soft-cream);border-block:1px solid rgba(21,20,18,.08)}
.business .ph{background:linear-gradient(145deg,#dedbd6,#b8b3ac)}
.pathways{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;padding:130px 0}
.paths h3{border-top:1px solid rgba(21,20,18,.25);padding-top:25px}
.return{background:var(--stone)}
footer{background:#0c0c0b;color:#fff;padding:50px max(24px,calc((100% - var(--max))/2));display:grid;grid-template-columns:160px 1fr 2fr;gap:30px;align-items:center}
footer img{width:138px;height:auto;max-height:92px;object-fit:contain;display:block}
footer p{margin:0;font-size:14px}footer a{color:#fff}
@media(max-width:850px){
  #menu{display:block}nav{display:none;position:absolute;top:82px;left:0;right:0;background:var(--cream);padding:24px;flex-direction:column;align-items:stretch}
  nav.open{display:flex}.hero,.split,.pathways{grid-template-columns:1fr;gap:48px}.hero{padding:60px 0}.ph{min-height:450px}
  footer{grid-template-columns:1fr}.read{padding:90px 0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
a:focus-visible,button:focus-visible{outline:3px solid #746d64;outline-offset:4px}


/* Integrated editorial hero */
html,body{max-width:100%;overflow-x:hidden}
.hero{
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:none;
  min-height:calc(100vh - 82px);
  display:block;
  padding:86px max(24px,calc((100% - var(--max))/2));
  overflow:hidden;
}
.hero>div{
  position:relative;
  z-index:2;
  width:min(46%,570px);
}
.hero-photo{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.97) 27%,rgba(255,255,255,.82) 42%,rgba(255,255,255,.30) 61%,rgba(255,255,255,.05) 100%);
  pointer-events:none;
}

/* Clearer section definition */
#about,#community,.business,.pathways,.return{border-top:1px solid rgba(21,20,18,.09)}
#community{
  width:100%;
  max-width:none;
  padding-left:max(24px,calc((100% - var(--max))/2));
  padding-right:max(24px,calc((100% - var(--max))/2));
}
.section-white{background:#fff}
.section-stone{background:var(--soft-cream)}
.section-defined{box-shadow:inset 0 1px 0 rgba(21,20,18,.04)}
.pathways{
  width:100%;
  max-width:none;
  padding-left:max(24px,calc((100% - var(--max))/2));
  padding-right:max(24px,calc((100% - var(--max))/2));
}

@media(max-width:850px){
  .hero{
    min-height:auto;
    padding:64px 24px 420px;
  }
  .hero>div{width:100%;max-width:620px}
  .hero-photo{object-position:62% center}
  .hero::after{
    background:linear-gradient(180deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.96) 47%,rgba(255,255,255,.48) 68%,rgba(255,255,255,.05) 100%);
  }
}


/* Hero composition refinement: keep all three women visible */
@media(min-width:851px){
  .hero{
    min-height:calc(100vh - 82px);
  }

  .hero>div{
    width:min(42%,540px);
  }

  .hero-photo{
    /* Slight zoom-out preserves more of the full three-person composition. */
    width:88%;
    left:12%;
    right:auto;
    object-fit:cover;
    object-position:center center;
  }

  .hero::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    z-index:1;
    width:20%;
    background:#fff;
    pointer-events:none;
  }

  .hero::after{
    background:linear-gradient(
      90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 22%,
      rgba(255,255,255,.97) 32%,
      rgba(255,255,255,.82) 42%,
      rgba(255,255,255,.48) 50%,
      rgba(255,255,255,.16) 60%,
      rgba(255,255,255,0) 72%
    );
  }
}


/* Final hero treatment for edited image with built-in left whitespace */
@media(min-width:851px){
  .hero{
    padding:86px max(24px,calc((100% - var(--max))/2));
  }

  .hero>div{
    width:min(40%,530px);
  }

  .hero-photo{
    inset:0;
    left:0;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center center;
  }

  .hero::before{
    display:none;
  }

  .hero::after{
    background:linear-gradient(
      90deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.24) 24%,
      rgba(255,255,255,.12) 36%,
      rgba(255,255,255,.04) 46%,
      rgba(255,255,255,0) 56%
    );
  }
}

@media(max-width:850px){
  .hero-photo{
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:68% center;
  }

  .hero::after{
    background:linear-gradient(
      180deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.88) 42%,
      rgba(255,255,255,.34) 64%,
      rgba(255,255,255,0) 78%
    );
  }
}


/* Final hero fade refinement */
@media(min-width:851px){
  .hero::after{
    background:linear-gradient(
      90deg,
      rgba(255,255,255,.52) 0%,
      rgba(255,255,255,.44) 24%,
      rgba(255,255,255,.30) 32%,
      rgba(255,255,255,.16) 38%,
      rgba(255,255,255,.06) 43%,
      rgba(255,255,255,0) 48%
    );
  }
}


/* Stronger, intentional RTI-style hero transition */
@media(min-width:851px){
  .hero::after{
    background:linear-gradient(
      90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 27%,
      rgba(255,255,255,.96) 32%,
      rgba(255,255,255,.78) 36%,
      rgba(255,255,255,.48) 40%,
      rgba(255,255,255,.20) 43%,
      rgba(255,255,255,.05) 46%,
      rgba(255,255,255,0) 49%
    );
  }
}


/* Mobile hero optimization: clean text first, friendship image second */
@media(max-width:850px){
  .hero{
    display:flex;
    flex-direction:column;
    min-height:auto;
    padding:56px 24px 0;
    background:#fff;
    overflow:hidden;
  }

  .hero>div{
    position:relative;
    z-index:2;
    width:100%;
    max-width:620px;
    padding-bottom:48px;
  }

  .hero-photo{
    position:relative;
    inset:auto;
    order:2;
    width:calc(100% + 48px);
    max-width:none;
    height:auto;
    margin-left:-24px;
    display:block;
    object-fit:contain;
    object-position:center;
  }

  .hero::before,
  .hero::after{
    display:none;
  }
}

@media(max-width:520px){
  .hero{
    padding-top:48px;
  }

  .hero h1{
    font-size:clamp(52px,14vw,68px);
    line-height:.94;
  }

  .hero>div{
    padding-bottom:40px;
  }
}


/* Mobile-only hero photo crop: reduce built-in left whitespace */
@media(max-width:850px){
  .hero-photo{
    width:calc(100% + 48px);
    height:300px;
    margin-left:-24px;
    object-fit:cover;
    object-position:72% center;
  }
}

@media(max-width:520px){
  .hero-photo{
    height:270px;
    object-position:74% center;
  }
}


/* About section: editorial two-column desktop layout */
@media(min-width:851px){
  #about{
    width:min(calc(100% - 48px),var(--max));
    display:grid;
    grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);
    column-gap:96px;
    align-items:start;
    text-align:left;
    padding:120px 0;
  }

  #about .eyebrow{
    grid-column:1;
    margin-bottom:22px;
  }

  #about h2{
    grid-column:1;
    margin:0;
  }

  #about p:not(.eyebrow),
  #about > a{
    grid-column:2;
  }

  #about p:not(.eyebrow){
    margin-top:0;
    margin-bottom:24px;
  }

  #about > a{
    justify-self:start;
    margin-top:8px;
  }
}

/* About section: readable stacked mobile layout */
@media(max-width:850px){
  #about{
    width:100%;
    text-align:left;
    padding:84px 24px;
  }

  #about .eyebrow{
    text-align:left;
  }

  #about h2{
    text-align:left;
    margin-bottom:34px;
  }

  #about p{
    text-align:left;
  }

  #about > a{
    display:inline-block;
    margin-top:8px;
  }
}


/* About section final spacing refinements only */
#about p:not(.eyebrow){
  margin-top:0;
  margin-bottom:24px;
}
#about p:not(.eyebrow):last-of-type{
  margin-bottom:0;
}
#about > a{
  margin-top:12px;
}
@media(min-width:851px){
  #about{
    row-gap:0;
    padding-bottom:96px;
  }
}
@media(max-width:850px){
  #about{
    padding-bottom:64px;
  }
}

/* Friendship photo replaces the temporary placeholder */
.friendship-photo{display:block;width:100%;height:590px;object-fit:cover;object-position:center;border:1px solid rgba(21,20,18,.12)}
@media(max-width:850px){.friendship-photo{height:auto;aspect-ratio:4/3;object-fit:cover}}

/* Business and Entrepreneurship image */
.business-photo{display:block;width:100%;height:590px;object-fit:cover;object-position:center;border:1px solid rgba(21,20,18,.12)}
@media(max-width:850px){.business-photo{height:auto;aspect-ratio:4/3;object-fit:cover}}

/* Accessibility: visible focus on both light and dark surfaces. */
a:focus-visible,button:focus-visible{
  outline:3px solid #1a5aa5;
  outline-offset:4px;
}
.btn:focus-visible,footer a:focus-visible{
  outline:3px solid #f7d978;
  outline-offset:4px;
}
@media(max-width:850px){
  #menu{min-height:44px;min-width:44px;cursor:pointer}
  nav a{min-height:44px;display:flex;align-items:center}
}