:root {
  --maroon:        #7d1f2e;
  --maroon-mid:    #9e3047;
  --maroon-light:  #b84d63;
  --maroon-border: rgba(125,31,46,0.12);
  --gold:          #a0733a;
  --gold-light:    #c9a96e;
  --cream:         #faf7f2;
  --cream2:        #f2ede4;
  --white:         #ffffff;
  --text:          #2c1a1e;
  --text-mid:      #5a3a42;
  --text-muted:    #8a6a72;
  --bg:            #f5f0e8;
  --card-bg:       #ffffff;
  --radius:        14px;
  --shadow:        0 2px 16px rgba(125,31,46,0.07);
  --shadow-md:     0 4px 24px rgba(125,31,46,0.10);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  
}

/* -- HERO ── */
.hero{
  min-height:58svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:6rem 1.25rem 2.5rem;
  position:relative;overflow:hidden;
  background:var(--maroon);
}
.hero-glow{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 80% 10%,rgba(200,150,100,0.18) 0%,transparent 60%),
    radial-gradient(ellipse 60% 60% at 0% 100%,rgba(100,10,20,0.4) 0%,transparent 55%);
}
.hero-pattern{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);
  background-size:40px 40px;
}
.hero-content{position:relative}
.hero-badge{
  display:inline-flex;align-items:center;gap:0.45rem;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:20px;padding:0.3rem 0.85rem;
  font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.85);margin-bottom:1.1rem;
}
.hero-badge::before{content:'●';font-size:0.35rem;color:var(--gold-light)}
.hero-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.4rem,10vw,3.6rem);
  font-weight:300;line-height:1.08;
  color:#fff;margin-bottom:0.85rem;
}
.hero-title em{font-style:italic;color:var(--gold-light)}
.hero-sub{
  font-size:0.875rem;font-weight:300;line-height:1.75;
  color:rgba(255,255,255,0.68);max-width:360px;
}

/* ── SECTION BASE ── */
.section{padding:2.5rem 1.25rem}
.section-tag{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--maroon);margin-bottom:0.65rem;
}
.section-tag::before{content:'';width:18px;height:1px;background:var(--maroon)}
.section-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.7rem,7vw,2.3rem);
  font-weight:300;line-height:1.15;color:var(--text);
}
.section-title em{font-style:italic;color:var(--maroon)}
.divider{width:36px;height:2px;background:var(--maroon-border);margin:1.25rem 0;border-radius:2px}

/* ── STORY BODY ── */
.story-body{font-size:0.875rem;line-height:1.95;color:var(--text-mid)}
.story-body p+p{margin-top:1rem}
.story-body strong{color:var(--text);font-weight:600}

/* ── PULL QUOTE ── */
.pull-quote{
  background:var(--white);
  border-left:3px solid var(--maroon);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:1.25rem 1.25rem 1.25rem 1.4rem;
  margin:1.75rem 0;
  box-shadow:var(--shadow);
}
.pull-quote p{
  font-family:'Cormorant Garamond',serif;
  font-size:1.2rem;font-weight:300;font-style:italic;
  line-height:1.6;color:var(--text);
}
.pull-quote p::before{content:'\201C';color:var(--maroon);font-size:1.8rem;line-height:0;vertical-align:-0.28em;margin-right:0.05em}
.pull-quote p::after{content:'\201D';color:var(--maroon);font-size:1.8rem;line-height:0;vertical-align:-0.28em;margin-left:0.05em}

/* ── ALTERNATING SECTION BG ── */
.section-alt{background:var(--cream2)}

/* ── VALUES CARDS ── */
.values-grid{display:flex;flex-direction:column;gap:0.85rem;margin-top:1.5rem}
.value-card{
  background:var(--card-bg);
  border:1px solid var(--maroon-border);
  border-radius:var(--radius);
  padding:1.25rem 1.15rem;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow);
}
.value-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--maroon),transparent);
}
.value-num{
  font-family:'Cormorant Garamond',serif;
  font-size:2.2rem;font-weight:300;
  color:rgba(125,31,46,0.06);
  position:absolute;top:0.6rem;right:1rem;
  line-height:1;
}
.value-icon{font-size:1.4rem;margin-bottom:0.65rem;display:block}
.value-title{
  font-family:'Cinzel',serif;
  font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--maroon);margin-bottom:0.45rem;
}
.value-text{font-size:0.78rem;line-height:1.7;color:var(--text-muted)}

/* ── FOUNDER CARD ── */
.founder-section{padding:2.5rem 1.25rem;background:var(--bg)}
.founder-card{
  background:var(--card-bg);
  border:1px solid var(--maroon-border);
  border-radius:var(--radius);
  padding:1.5rem 1.25rem;
  box-shadow:var(--shadow-md);
}
.founder-avatar{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--maroon),var(--maroon-mid));
  display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-size:1.1rem;
  color:#fff;font-weight:600;
  margin-bottom:1rem;
}
.founder-name{
  font-family:'Cormorant Garamond',serif;
  font-size:1.35rem;font-weight:400;color:var(--text);
  margin-bottom:0.2rem;
}
.founder-title{
  font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--maroon);margin-bottom:1rem;
}
.founder-bio{font-size:0.82rem;line-height:1.8;color:var(--text-mid)}
.founder-creds{
  display:flex;flex-wrap:wrap;gap:0.45rem;
  margin-top:1.1rem;padding-top:1rem;
  border-top:1px solid var(--maroon-border);
}
.cred-pill{
  font-size:0.6rem;letter-spacing:0.08em;text-transform:uppercase;
  background:var(--cream);
  border:1px solid var(--maroon-border);
  border-radius:20px;padding:0.25rem 0.7rem;
  color:var(--maroon);
}

/* ── AFIYAH CTA ── */
.afiyah-cta{
  background:var(--maroon);
  padding:2.75rem 1.25rem;
  text-align:center;
  position:relative;overflow:hidden;
}
.afiyah-cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(200,150,100,0.12) 0%,transparent 70%);
}
.afiyah-inner{position:relative}
.afiyah-symbol{
  font-size:2.2rem;margin-bottom:1rem;display:block;
  animation:breathe 3.5s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.afiyah-label{
  font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:0.65rem;
  display:flex;align-items:center;justify-content:center;gap:0.5rem;
}
.afiyah-label::before,.afiyah-label::after{content:'';width:18px;height:1px;background:var(--gold-light)}
.afiyah-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.8rem,7vw,2.5rem);
  font-weight:300;line-height:1.15;
  color:#fff;margin-bottom:0.75rem;
}
.afiyah-title em{font-style:italic;color:var(--gold-light)}
.afiyah-desc{
  font-size:0.85rem;line-height:1.75;
  color:rgba(255,255,255,0.68);margin-bottom:1.75rem;
  max-width:320px;margin-left:auto;margin-right:auto;
}
.btn-primary{
  display:inline-block;text-align:center;text-decoration:none;
  font-size:0.78rem;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;
  color:var(--maroon);background:#fff;
  padding:0.9rem 2rem;border-radius:8px;
  transition:all 0.2s;
}
.btn-primary:hover{background:var(--cream);transform:translateY(-1px)}

/* ── PROFESSIONAL NOTE ── */
.pro-note{
  background:var(--white);border:1px solid var(--maroon-border);
  border-radius:var(--radius);padding:1.25rem;
  box-shadow:var(--shadow);
}