/* ============================================================
   MILANITY — ABOUT PAGE (layout for this page only)
   Loads after style.css. Nav and footer are NOT styled here:
   they come from style.css so every page matches exactly.
   ============================================================ */

.about-page{ overflow-x:hidden; }

/* ---------- HERO ---------- */
.legal-crumb{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-4);
}
.legal-crumb a{ color:var(--ink-3); text-decoration:none; }
.legal-crumb a:hover{ color:var(--flame); }
.nodash{
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--flame);
  display:flex; align-items:center; gap:11px;
  margin-bottom: 22px;
}
.eyebrow{
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--flame);
  display:flex; align-items:center; gap:11px;
  margin-bottom: 22px;
}
.about-page .about-hero{ min-height:510px; }
.about-page .about-hero .hero-in{
  display:grid; grid-template-columns:1fr; align-items:center;
  min-height:510px; padding-block:clamp(76px,10vw,130px);
}
.about-hero-content{ max-width:850px; }
.about-page .about-hero h1{ max-width:17ch; font-size:clamp(38px,5.8vw,72px); }
.about-page .about-hero .hero-sub{ max-width:58ch; }

/* ---------- COMMON ---------- */
.about-section, .about-mission, .about-team, .about-approach{ position:relative; }
.about-page .about-copy{ display:flex; flex-direction:column; gap:18px; }
.about-page .about-copy > p:not(.lede){ color:var(--ink-3); font-size:15.5px; line-height:1.75; max-width:66ch; }
.about-intro-grid{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(40px,8vw,110px); align-items:start;
}
.about-section-heading{ max-width:520px; }
.about-section-heading .h-sec{ max-width:13ch; }

/* ---------- STATS ---------- */
.about-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:76px;
  background:var(--rule-soft); border:1px solid var(--rule-soft);
}
.about-stat{
  min-height:150px; padding:28px; display:flex; flex-direction:column;
  justify-content:center; gap:9px; background:var(--ground-2);
}
.about-stat-number{
  font-family:var(--display); font-size:clamp(25px,3vw,37px); font-weight:900;
  font-stretch:110%; letter-spacing:-.035em; color:var(--flame); line-height:1.1;
}
.about-stat-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ---------- MISSION and APPROACH (shared two-column layout) ---------- */
.about-mission{ background:var(--ground-2); }
.about-mission-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,8vw,110px); align-items:start;
}
.about-mission-grid h2{ max-width:14ch; }
.about-index{
  display:block; font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.13em; color:var(--flame); text-transform:uppercase; margin-bottom:25px;
}

/* ---------- TEAM ---------- */
.about-team-heading{
  display:grid; grid-template-columns:1fr .8fr;
  gap:clamp(36px,7vw,90px); align-items:end; margin-bottom:52px;
}
.about-team-heading h2{ max-width:16ch; }
.about-team-content{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:1px;
  background:var(--rule-soft); border:1px solid var(--rule-soft);
}
.about-team-main{
  padding:clamp(28px,4vw,48px);
  background:radial-gradient(100% 100% at 100% 0%, rgba(232,120,58,.10), transparent 65%), var(--ground-2);
}
.about-team-label{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); }
.about-team-number{
  margin-top:30px; font-family:var(--display); font-size:clamp(66px,9vw,112px);
  font-weight:900; font-stretch:115%; line-height:.95; letter-spacing:-.055em; color:var(--flame);
}
.about-team-number span{ font-size:.55em; }
.about-team-main h3{ margin-top:22px; font-size:21px; }
.about-team-main p{ margin-top:14px; max-width:46ch; color:var(--ink-3); font-size:14.5px; line-height:1.7; }
.about-team-side{ padding:12px 30px; background:var(--ground); display:flex; flex-direction:column; justify-content:center; }
.about-team-point{
  display:grid; grid-template-columns:72px 1fr; gap:20px; padding:25px 0;
}
.about-team-point .about-index{ margin:5px 0 0; }
.about-team-point h3{ font-size:19px; font-stretch:106%; margin-bottom:12px; }
.about-team-point p{ color:var(--ink-3); font-size:14.5px; line-height:1.7; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .about-intro-grid, .about-mission-grid, .about-team-heading{ grid-template-columns:1fr; gap:30px; }
  .about-section-heading .h-sec, .about-mission-grid h2{ max-width:18ch; }
  .about-team-heading{ align-items:start; }
  .about-stats{ margin-top:48px; }
}
@media (max-width:600px){
  .about-page .about-hero{ min-height:auto; }
  .about-page .about-hero .hero-in{ min-height:auto; padding-block:76px 66px; }
  .about-page .about-hero h1{ font-size:clamp(36px,10.5vw,56px); }
  .about-page .about-hero .hero-sub{ margin-top:20px; font-size:16.5px; }
  .about-stats{ grid-template-columns:1fr; }
  .about-stat{ min-height:115px; padding:22px; }
  .about-team-content{ grid-template-columns:1fr; }
  .about-team-side{ padding-inline:22px; }
  .about-team-point{ grid-template-columns:48px 1fr; gap:12px; }
}