/* ============================================================
   About page. No mockup exists in the handoff - built from the
   sitewide design tokens and the patterns of the other pages.
   ============================================================ */

/* "инженерството" is longer than the h1 content box at 320px, so let it break
   rather than push the page sideways. */
.about-hero h1{overflow-wrap:break-word}
.about-hero h1 span{color:var(--orange)}

/* Intro: copy on the left, photo with a founding-year badge on the right */
.about-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:40px max(56px,calc((100% - var(--content-w))/2)) 0;animation:sm-rise .85s ease .46s both}
.about-copy p{font:400 15.5px/1.75 var(--font);color:var(--ink-2)}
.about-copy p+p{margin-top:18px}
.about-copy .hl{color:var(--ink);font-weight:600}
.about-copy .btn{margin-top:28px}
.about-visual{position:relative;margin:0}
.about-img{height:420px;border-radius:var(--r-hero);overflow:hidden;box-shadow:0 30px 60px rgba(34,29,68,.22)}
.about-img img{width:100%;height:100%;object-fit:cover}
.about-badge{position:absolute;left:-24px;bottom:32px;background:#fff;border-radius:16px;padding:16px 22px;box-shadow:0 14px 34px rgba(34,29,68,.18)}
.about-badge strong{display:block;font:800 26px/1 var(--font);color:var(--indigo)}
.about-badge span{display:block;margin-top:5px;font:400 12.5px var(--font);color:var(--ink-2)}

/* Team */
.team{margin-top:56px}
.team-title{margin:10px 0 0;font:700 34px var(--font);letter-spacing:-.02em}
.team-lead{margin-top:14px;max-width:640px;font:400 15.5px/1.7 var(--font);color:var(--ink-2)}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.team-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:28px;transition:transform .35s,box-shadow .35s}
.team-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
.team-icon{width:48px;height:48px;border-radius:12px;background:var(--indigo-tint);display:grid;place-items:center}
.team-icon svg{width:24px;height:24px}
/* Pushes the label + title to the bottom so the icon-only cards fill the
   height of the text-heavy dark card instead of trailing off into blank space */
.team-eyebrow{display:block;margin-top:auto;padding-top:20px;font:600 12px var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.team-card h3{margin:8px 0 0;font:700 19px/1.35 var(--font)}
.team-card-dark{background:var(--indigo-dark);border-color:var(--indigo-dark);color:#fff}
.team-card-dark h3{margin:0}
.team-card-dark p{margin-top:12px;font:400 14.5px/1.65 var(--font);color:rgba(255,255,255,.7)}

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  .about-intro{padding:32px 32px 0;gap:36px}
  .team{margin-top:40px}
}
@media (max-width:1100px){
  .about-intro{grid-template-columns:1fr}
  .about-img{height:360px}
  .about-badge{left:0}
  .team-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  /* Without this the hero paragraph and the first body paragraph read as one
     continuous block once the intro collapses to a single column. */
  .about-intro{padding:36px 20px 0;gap:24px}
  .about-copy p{font-size:15px}
  .about-img{height:250px}
  .about-badge{left:0;bottom:16px;padding:12px 18px}
  .about-copy .btn{display:inline-block;margin-top:24px;padding:14px 26px}
  .team{margin-top:32px}
  .team-title{font-size:26px}
  .team-lead{font-size:15px}
  .team-grid{grid-template-columns:1fr;gap:16px;margin-top:24px}
  .team-card{padding:22px}
}
@media (max-width:560px){
  /* The badge covered the middle of the photo once the image went full width,
     so it becomes a caption strip under it instead of an overlay. */
  .about-visual{display:flex;flex-direction:column}
  .about-badge{position:static;display:flex;align-items:baseline;gap:12px;margin-top:12px;
               padding:14px 18px;border:1px solid var(--border);box-shadow:none;border-radius:var(--r-card)}
  .about-badge strong{font-size:24px}
  .about-badge span{margin-top:0}
  .about-img{height:230px}
}
@media (max-width:430px){
  /* 36px is wider than the content box for the longest word at 320px */
  .about-hero h1{font-size:30px}
}