/* ==========================================================================
   About Us page — extends assets/css/style.css and documentation.css.
   ========================================================================== */

/* ---------- HERO WITH IMAGE ---------- */
.about-hero{
  position:relative; min-height:56vh; display:flex; align-items:flex-end;
  padding:0 6vw 64px; padding-top:150px; overflow:hidden;
}
.about-hero-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center 42%;
  filter:saturate(1.05);
}
.about-hero-fade{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(10,14,20,0.55) 0%, rgba(10,14,20,0.35) 35%, var(--bg) 96%),
    linear-gradient(90deg, rgba(10,14,20,0.75) 0%, rgba(10,14,20,0.15) 55%);
}
.about-hero-content{ position:relative; z-index:2; max-width:680px; }
.about-hero-content h1{
  font-family:'Space Grotesk'; font-weight:600; font-size:clamp(32px,4.8vw,50px);
  margin-top:14px; letter-spacing:-0.5px; line-height:1.08;
}
.about-hero-lede{
  color:var(--text); opacity:0.9; font-size:17px; line-height:1.65; margin-top:18px; max-width:560px;
}

/* ---------- CENTERED INTRO COPY ---------- */
.about-copy-center{ max-width:720px; margin:0 auto; text-align:center; }
.about-copy-center p{ color:var(--muted); font-size:16px; line-height:1.8; margin-top:16px; }
.about-copy-center p:first-child{ margin-top:0; }

.about-copy-wide{ max-width:820px; }
.about-copy-wide p{ color:var(--muted); font-size:15px; line-height:1.8; margin-top:14px; max-width:none; }
.about-copy-wide p:first-child{ margin-top:0; }

/* ---------- OFFER SECTION LAYOUT ---------- */
.offer-grid{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:center;
}
@media(max-width:900px){ .offer-grid{ grid-template-columns:1fr; gap:36px; } }
.offer-grid .check-list li{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; transition:border-color 0.2s, transform 0.2s;
}
.offer-grid .check-list li:hover{ border-color:var(--beam); transform:translateY(-2px); }
.offer-grid .check-list li svg{ color:var(--beam); }

@media(max-width:640px){
  .about-hero{ padding-top:120px; align-items:flex-end; min-height:46vh; }
}