/* =========================================================
   Red Horizon Cyber Group - About page
   (loads after main.css)
   ========================================================= */

/* ---------- Hero ---------- */
.about-hero{
  min-height:560px;
  display:flex;
  align-items:center;
  color:#fff;
  background:
    linear-gradient(90deg, rgba(5,6,7,.82) 0%, rgba(5,6,7,.5) 45%, rgba(5,6,7,.12) 100%),
    linear-gradient(180deg, rgba(5,6,7,.15), rgba(5,6,7,.45)),
    url('../images/about/hero-bg.png') center / cover no-repeat,
    radial-gradient(900px 500px at 80% 40%, #3a1218 0%, #0a0c10 70%),
    var(--black);
}
.about-hero .container{padding-top:64px;padding-bottom:64px}
.about-hero .eyebrow{margin-bottom:28px;font-size:20px}
.about-hero h1{font-size:clamp(44px,5.2vw,68px);line-height:1;font-weight:900;letter-spacing:-.045em}
.about-hero-lead{margin-top:26px;max-width:640px;font-size:17px;line-height:1.6;color:#e8eaee}
.about-hero .hero-actions{display:flex;gap:14px;margin-top:30px}
.about-hero .hero-tagline{margin-top:34px;font-size:15px;font-weight:800;letter-spacing:.09em;font-family:'Courier New',monospace}

/* ---------- Who we are ---------- */
.who-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:72px;align-items:center}
.who-copy .eyebrow{margin-bottom:22px}
.who-copy h2{font-size:clamp(30px,3.4vw,42px);line-height:1.1;font-weight:800;letter-spacing:-.035em;max-width:740px}
.who-copy p:not(.eyebrow){margin-top:22px;font-size:15.5px;line-height:1.7;color:var(--muted);max-width:640px}
.who-copy h2 + p{margin-top:24px}

.purpose-card{background:#0a0c10;border:1px solid #1c212c;border-radius:var(--radius);padding:38px 36px 40px;color:#fff;box-shadow:0 18px 40px rgba(10,12,16,.18)}
.purpose-card .eyebrow{font-size:11px;margin-bottom:24px}
.purpose-card h3{font-size:clamp(22px,2.2vw,26px);line-height:1.3;font-weight:700;letter-spacing:-.02em}
.purpose-card p:not(.eyebrow){margin-top:18px;font-size:14.5px;line-height:1.7;color:var(--muted-dark)}

/* ---------- Drivers ---------- */
.driver-card{background:#0d1017;border:1px solid #1c212c;border-radius:var(--radius);padding:26px 26px 30px;transition:border-color .25s,transform .25s}
.driver-card:hover{border-color:#3a1a21;transform:translateY(-3px)}
.driver-label{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:20px}
.driver-card h3{font-size:18px;font-weight:700;line-height:1.35;letter-spacing:-.015em}
.driver-card p:not(.driver-label){margin-top:14px;font-size:13.5px;line-height:1.7;color:var(--muted-dark)}

/* ---------- Founders ---------- */
.founder-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 26px rgba(15,20,30,.05);transition:transform .25s,box-shadow .25s}
.founder-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(15,20,30,.12)}
.headshot{
  position:relative;
  aspect-ratio:1 / .88;
  background:radial-gradient(circle at 50% 45%, rgba(240,31,53,.28) 0%, rgba(240,31,53,.08) 35%, #07080b 75%), #07080b;
  display:flex;align-items:center;justify-content:center;
}
.headshot::before{content:"HEADSHOT";position:absolute;font-size:17px;letter-spacing:.14em;color:#fff;font-weight:500}   /* placeholder, hidden once a photo loads */
.headshot.has-photo::before{display:none}
.headshot img{position:relative;width:100%;height:100%;object-fit:cover;object-position:center top}
.founder-info{padding:18px 18px 20px; text-align: center;}
.founder-info h3{font-size:16px;font-weight:700;letter-spacing:-.01em}
.founder-info p{margin-top:6px;font-size:12px;color:var(--muted)}
.founder-info .btn{margin-top: 16px;}

/* ---------- How we work ---------- */
.section-head.single{grid-template-columns:1fr}
.section-head.single h2{max-width:760px}
#how .value-card{background:#fff}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .who-grid{gap:40px}
}
@media (max-width:960px){
  .about-hero{min-height:0}
  .who-grid{grid-template-columns:1fr}
  .card-grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .about-hero-lead{font-size:16px}
  .about-hero .hero-actions .btn{width:100%}
  .card-grid-4{grid-template-columns:1fr}
  .purpose-card{padding:30px 24px 32px}
}