/* ============== ABOUT PAGE STYLES ============== */
:root{
  --red:#e34d4d; --red-dark:#c63b3b; --hl:#2f9b6a;
}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark)}

/* HERO */
.about-hero{
  position:relative;
  min-height:560px;
  display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(rgba(20,40,55,.35),rgba(20,40,55,.35)),
    url('../img/banner.jpg') center/cover no-repeat;
  text-align:center;color:#fff;padding:90px 20px;
}
.about-hero-inner{max-width:780px;margin:0 auto}
.about-hero h1{font-family:'Lora',serif;font-size:54px;font-weight:600;margin-bottom:22px;line-height:1.25}
.about-hero h1 span{color:var(--green)}
.about-hero p{font-size:14.5px;line-height:1.85;margin-bottom:18px;opacity:.95}
.hero-tagline{font-weight:600!important;letter-spacing:.5px;margin-bottom:30px!important}

/* INTRO TEXT */
.about-intro{padding:90px 0 70px;background:#fff}
.about-intro .wrap{max-width:880px}
.about-intro p{color:var(--muted);font-size:15px;line-height:2;margin-bottom:22px;text-align:center}
.about-intro .cta-line{font-weight:600;color:var(--ink);margin-top:14px}
.about-intro .btn{display:block;width:max-content;margin:30px auto 0}
.hl{color:var(--green);font-weight:600;background:linear-gradient(transparent 60%,rgba(47,155,106,.18) 60%);padding:0 3px}

/* SOCIAL */
.about-social{background:#2c2c2c;color:#fff;padding:55px 0;text-align:center}
.about-social h2{font-family:'Lora',serif;font-size:30px;margin-bottom:24px;font-weight:600}
.about-social h2 span{color:var(--green)}
.social-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.social-row a{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.1);
  color:#fff;font-size:18px;font-weight:700;
  transition:.25s;
}
.social-row a:hover{background:var(--green);transform:translateY(-3px)}

/* FOUNDER */
.founder{padding:90px 0;background:#fff;text-align:center}
.founder h2{font-family:'Lora',serif;font-size:38px;margin-bottom:55px;font-weight:600}
.founder h2 span{color:var(--green)}
.founder-card{max-width:760px;margin:0 auto}
.founder-photo{
  width:180px;height:180px;border-radius:50%;margin:0 auto 18px;
  background:url('../img/founder.svg') center/cover no-repeat,#f4dada;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.founder-card h4{font-family:'Lora',serif;font-size:22px;margin-bottom:4px}
.founder-card .role{color:var(--green);font-size:13px;font-weight:600;margin-bottom:24px}
.founder-card .message{color:var(--muted);font-size:14.5px;line-height:1.95;margin-bottom:18px;text-align:left}
.founder-card .signature{font-style:italic;color:var(--ink);font-size:13px;margin:14px 0 24px}

/* JOIN */
.join{background:var(--coral);color:#fff;padding:80px 0;text-align:center}
.join h2{font-family:'Lora',serif;font-size:36px;margin-bottom:14px;font-weight:600}
.join h2 span{color:#fff;font-weight:400;font-style:italic;opacity:.95}
.join p{max-width:640px;margin:0 auto 28px;font-size:14.5px;opacity:.95}

/* RESPONSIVE */
@media(max-width:720px){
  .about-hero h1{font-size:38px}
  .founder h2,.about-social h2{font-size:26px}
  .founder-card .message{font-size:14px}
  .about-hero{min-height:480px;padding:70px 16px}
}