/* ============================================================
   THE BIRTHING INSTITUTION™ — shared stylesheet
   Tokens
   ------
   Deep purple   #2A0E42   (primary dark ground)
   Royal purple  #4C1C78   (mid, gradients / accents)
   Metallic gold #C7A044   (primary accent)
   Warm gold     #E7CE8A   (highlight / hover, on dark)
   Ink black     #100C14   (near-black, purple-tinted)
   Cream         #F7F1E6   (light ground)
   Cream line    #E6DBC3   (hairlines on cream)
   ============================================================ */

:root{
  --purple-deep:#2A0E42;
  --purple-royal:#4C1C78;
  --purple-royal-soft:#5E2790;
  --gold:#C7A044;
  --gold-warm:#E7CE8A;
  --gold-dim:#8A6E2F;
  --ink:#100C14;
  --cream:#F7F1E6;
  --cream-dim:#EFE6D4;
  --cream-line:#E1D5B8;
  --text-on-dark:#F3ECDD;
  --text-on-dark-soft:#CBBBD9;

  --serif:"Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max:1180px;
  --pad:clamp(20px, 5vw, 64px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  margin:0;
  letter-spacing:-0.01em;
}
p{margin:0;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}

/* ---------- texture helpers ---------- */
.grain-dark{
  background-color:var(--purple-deep);
  background-image:
    radial-gradient(ellipse at 15% -10%, rgba(199,160,68,0.14), transparent 55%),
    radial-gradient(ellipse at 100% 110%, rgba(94,39,144,0.55), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 3px);
}
.colonnade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(
    90deg,
    rgba(231,206,138,0.05) 0,
    rgba(231,206,138,0.05) 1px,
    transparent 1px,
    transparent clamp(60px, 8vw, 120px)
  );
  mix-blend-mode:screen;
  opacity:.6;
}
.veined{
  background-color:var(--cream);
  background-image:
    linear-gradient(128deg, transparent 40%, rgba(199,160,68,0.05) 41%, transparent 42%),
    linear-gradient(64deg, transparent 60%, rgba(76,28,120,0.035) 61%, transparent 63%);
}

/* ---------- top notice / crest bar ---------- */
.crest-bar{
  background:var(--ink);
  color:var(--text-on-dark-soft);
  font-size:.72rem;
  letter-spacing:.14em;
  text-align:center;
  padding:8px var(--pad);
}
.crest-bar b{color:var(--gold-warm); font-weight:600;}

/* ---------- nav ---------- */
.site-nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(16,12,20,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(199,160,68,0.25);
}
.site-nav .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
}
.brand-mark{
  font-family:var(--serif);
  font-size:1.25rem;
  color:var(--text-on-dark);
  display:flex;
  align-items:baseline;
  gap:8px;
}
.brand-mark .tm{font-size:.55em; color:var(--gold);}
.nav-links{
  display:flex;
  align-items:center;
  gap:clamp(16px,3vw,34px);
  font-size:.95rem;
  color:var(--text-on-dark-soft);
}
.nav-links a{
  position:relative;
  padding:6px 0;
  transition:color .2s ease;
}
.nav-links a:hover{color:var(--gold-warm);}
.nav-links a.current{color:var(--text-on-dark);}
.nav-links a.current::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--gold);
}
.nav-cta{
  border:1px solid var(--gold);
  color:var(--gold-warm) !important;
  padding:9px 18px;
  border-radius:2px;
  font-size:.85rem;
  letter-spacing:.04em;
  transition:background .2s ease, color .2s ease;
}
.nav-cta:hover{background:var(--gold); color:var(--ink) !important;}
.nav-toggle{
  display:none;
  background:none;
  border:1px solid rgba(231,206,138,0.4);
  color:var(--text-on-dark);
  width:42px;height:42px;
  border-radius:2px;
  font-size:1.1rem;
  align-items:center;justify-content:center;
}

@media (max-width: 860px){
  .nav-links{
    position:fixed;
    top:76px; left:0; right:0;
    background:var(--ink);
    flex-direction:column;
    align-items:flex-start;
    padding:22px var(--pad) 30px;
    gap:20px;
    border-bottom:1px solid rgba(199,160,68,0.25);
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav-links.open{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .nav-toggle{display:flex;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 30px;
  font-size:.92rem;
  letter-spacing:.03em;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
  min-height:48px;
}
.btn:active{transform:translateY(1px);}
.btn-gold{
  background:linear-gradient(180deg, var(--gold-warm), var(--gold));
  color:var(--ink);
  font-weight:600;
}
.btn-gold:hover{filter:brightness(1.06);}
.btn-outline-dark{
  border-color:rgba(231,206,138,0.55);
  color:var(--text-on-dark);
  background:transparent;
}
.btn-outline-dark:hover{border-color:var(--gold); color:var(--gold-warm);}
.btn-outline-ink{
  border-color:var(--ink);
  color:var(--ink);
  background:transparent;
}
.btn-outline-ink:hover{background:var(--ink); color:var(--cream);}
.btn-black{
  background:#0A0A0A;
  color:var(--gold-warm);
  border-color:#0A0A0A;
}
.btn-black:hover{background:#000;}
.btn-full{width:100%;}

/* ---------- eyebrow / kicker (used sparingly, only where content is a formal motto) ---------- */
.kicker{
  font-size:.78rem;
  letter-spacing:.32em;
  color:var(--gold-warm);
  font-weight:600;
}
.kicker.on-cream{color:var(--gold-dim);}

/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  color:var(--text-on-dark);
  padding:clamp(56px,9vw,96px) 0 clamp(64px,10vw,104px);
}
.hero .wrap{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.hero-eyebrow{
  font-family:var(--serif);
  font-style:italic;
  color:var(--text-on-dark-soft);
  font-size:1.05rem;
  margin-bottom:18px;
}
.hero h1{
  font-size:clamp(2.5rem, 4.6vw, 3.6rem);
  line-height:1.08;
  color:var(--text-on-dark);
}
.hero h1 em{
  font-style:italic;
  color:var(--gold-warm);
}
.hero p.lede{
  margin-top:22px;
  max-width:46ch;
  font-size:1.08rem;
  color:var(--text-on-dark-soft);
}
.hero-actions{
  margin-top:34px;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.hero-motto{
  margin-top:44px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  font-size:.78rem;
  letter-spacing:.28em;
  color:var(--gold-warm);
  border-top:1px solid rgba(231,206,138,0.25);
  padding-top:22px;
}

.hero-portrait{
  position:relative;
}
.portrait-frame{
  position:relative;
  border:1px solid rgba(231,206,138,0.5);
  padding:14px;
  background:linear-gradient(180deg, rgba(231,206,138,0.06), transparent 40%);
}
.portrait-frame::before{
  content:"";
  position:absolute; inset:5px;
  border:1px solid rgba(231,206,138,0.25);
  pointer-events:none;
}
.portrait-frame img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:top center;
  filter:saturate(0.96) contrast(1.03);
}
.portrait-caption{
  margin-top:16px;
  text-align:center;
  font-family:var(--serif);
  font-style:italic;
  color:var(--text-on-dark-soft);
  font-size:.95rem;
}

/* ---------- generic sections ---------- */
section{padding:clamp(64px,9vw,112px) 0;}
.section-cream{background:var(--cream);}
.section-dark{background:var(--purple-deep); color:var(--text-on-dark); position:relative;}
.section-ink{background:var(--ink); color:var(--text-on-dark);}
.section-head{
  max-width:640px;
  margin-bottom:clamp(36px,5vw,56px);
}
.section-head h2{
  font-size:clamp(1.9rem, 3.2vw, 2.5rem);
  line-height:1.15;
  margin-top:10px;
}
.section-head p{
  margin-top:16px;
  color:var(--ink);
  opacity:.75;
  font-size:1.02rem;
}
.section-dark .section-head p, .section-ink .section-head p{
  color:var(--text-on-dark-soft);
  opacity:1;
}

.divider{
  width:64px;height:1px;
  background:var(--gold);
  margin:18px 0 0;
}
.divider.center{margin-left:auto;margin-right:auto;}

/* ---------- pillars (sequence: numbered rail) ---------- */
.pillars{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:rgba(231,206,138,0.22);
  border:1px solid rgba(231,206,138,0.22);
}
.pillar{
  background:var(--purple-deep);
  padding:34px 26px 30px;
  position:relative;
}
.pillar .num{
  font-family:var(--serif);
  font-style:italic;
  color:var(--gold-dim);
  font-size:.95rem;
}
.pillar h3{
  margin-top:14px;
  font-size:1.25rem;
  color:var(--text-on-dark);
}
.pillar p{
  margin-top:12px;
  font-size:.92rem;
  color:var(--text-on-dark-soft);
}
@media (max-width:820px){
  .pillars{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .pillars{grid-template-columns:1fr;}
}

/* ---------- narrative block ---------- */
.narrative{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(32px,6vw,80px);
  align-items:start;
}
.narrative .lead-line{
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.4vw,1.85rem);
  line-height:1.35;
}
.narrative .body-copy p + p{margin-top:16px;}
.narrative .body-copy{font-size:1.02rem; opacity:.85;}
@media (max-width:780px){
  .narrative{grid-template-columns:1fr;}
}

/* ---------- cards (used only where content is not sequential) ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;
}
.card{
  background:var(--cream);
  border:1px solid var(--cream-line);
  padding:30px 28px;
  position:relative;
}
.card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--gold), transparent 80%);
}
.card h3{font-size:1.2rem;}
.card p{margin-top:10px; font-size:.95rem; opacity:.78;}
.card .tag{
  display:inline-block;
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--gold-dim);
  margin-bottom:10px;
}

/* ---------- founder / about ---------- */
.founder{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(32px,6vw,72px);
  align-items:center;
}
.founder-photo{
  border:1px solid var(--cream-line);
  padding:12px;
  background:var(--cream);
}
.founder-photo img{
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:top center;
}
.founder-name{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.5rem;
  margin-top:22px;
}
.founder-title{
  margin-top:4px;
  font-size:.85rem;
  letter-spacing:.08em;
  color:var(--gold-dim);
}
@media (max-width:780px){
  .founder{grid-template-columns:1fr;}
}

/* ---------- footer ---------- */
footer{
  background:var(--ink);
  color:var(--text-on-dark-soft);
  padding:clamp(52px,7vw,72px) 0 28px;
}
.footer-top{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:32px;
  padding-bottom:36px;
  border-bottom:1px solid rgba(231,206,138,0.18);
}
.footer-brand{
  font-family:var(--serif);
  font-size:1.35rem;
  color:var(--text-on-dark);
}
.footer-motto{
  margin-top:10px;
  font-size:.74rem;
  letter-spacing:.24em;
  color:var(--gold-warm);
}
.footer-tagline{
  margin-top:8px;
  font-size:.85rem;
  color:var(--text-on-dark-soft);
}
.footer-cols{
  display:flex;
  gap:clamp(32px,6vw,88px);
  flex-wrap:wrap;
}
.footer-col h4{
  font-family:var(--sans);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.08em;
  color:var(--text-on-dark);
  margin-bottom:14px;
}
.footer-col a, .footer-col span{
  display:block;
  font-size:.9rem;
  color:var(--text-on-dark-soft);
  margin-bottom:9px;
}
.footer-col a:hover{color:var(--gold-warm);}
.footer-bottom{
  margin-top:26px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:.78rem;
  color:rgba(203,187,217,0.6);
}

/* ---------- one orchestrated hero reveal (load only) ---------- */
[data-hero-reveal] .reveal-item{
  opacity:0;
  transform:translateY(14px);
}
[data-hero-reveal].reveal-in .reveal-item{
  opacity:1;
  transform:translateY(0);
  transition:opacity .7s ease, transform .7s ease;
}
[data-hero-reveal].reveal-in .reveal-item:nth-child(1){transition-delay:.05s;}
[data-hero-reveal].reveal-in .reveal-item:nth-child(2){transition-delay:.15s;}
[data-hero-reveal].reveal-in .reveal-item:nth-child(3){transition-delay:.25s;}
[data-hero-reveal].reveal-in .reveal-item:nth-child(4){transition-delay:.35s;}
[data-hero-reveal].reveal-in .reveal-item:nth-child(5){transition-delay:.45s;}

/* ---------- misc page hero (interior pages) ---------- */
.page-hero{
  padding:clamp(64px,9vw,96px) 0 clamp(40px,6vw,56px);
  color:var(--text-on-dark);
  position:relative;
  overflow:hidden;
}
.page-hero .wrap{position:relative; z-index:2; max-width:760px;}
.page-hero h1{
  font-size:clamp(2.1rem,4vw,2.9rem);
  margin-top:12px;
}
.page-hero p{
  margin-top:18px;
  color:var(--text-on-dark-soft);
  font-size:1.05rem;
  max-width:56ch;
}

/* ---------- utility ---------- */
.center{text-align:center;}
.mt-lg{margin-top:56px;}
.small-note{font-size:.82rem; opacity:.65;}