/* ==========================================================================
   Peak Hire Services — About
   Calmer and more editorial than the FinTech page. Every composition here is
   deliberately different from its homepage / FinTech equivalent:
     two core models  -> converging split (not the horizontal spectrum rail)
     how we work      -> 3x2 philosophy grid (not the drawn 01-06 timeline)
     quality          -> two-column statements (not the three-column register)
     why              -> serif principle pairs (not the three-part ascent)
   ========================================================================== */

/* --- Hero: type only, no CTA. The page closes with the call to action, so the
   opening can stay quiet — the calmest of the three page heroes. ---------- */
.about-hero{
  background:var(--midnight); color:var(--fg-dark);
  position:relative; overflow:hidden;
  padding-block:calc(var(--header-h) + clamp(48px,6.4vw,120px)) clamp(52px,6vw,104px);
}
.about-hero__inner{ position:relative; z-index:1; max-width:900px; }
.about-hero__title{ color:#F3F5F8; margin-top:var(--s5); max-width:18ch; }
.about-hero__lead{ margin-top:var(--s6); max-width:60ch; color:#9FADBB; font-size:var(--t-lead); line-height:1.62; }

/* --- Full-bleed image band between hero and argument -------------------- */
.bleed-figure{ position:relative; background:var(--midnight); aspect-ratio:21/9; overflow:hidden; }
@media (max-width:760px){ .bleed-figure{ aspect-ratio:16/10; } }
.bleed-figure img{ width:100%; height:100%; object-fit:cover; }

/* --- 1 · Two core models: two poles converging on one model ------------- */
.models{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:clamp(28px,4vw,64px); }
.models__spine{ width:1px; background:linear-gradient(180deg,var(--rule),var(--gold),var(--rule)); }
.models__col h3{
  font-family:var(--serif); font-weight:400; font-size:clamp(22px,1.1rem + 1.05vw,30px);
  line-height:1.12; letter-spacing:-.02em; color:var(--fg);
}
.models__col p{ margin-top:var(--s4); font-size:15.5px; color:var(--fg-body); line-height:1.62; }
.models__col ul{ margin-top:var(--s5); display:flex; flex-direction:column; gap:9px; }
.models__col li{ display:flex; gap:10px; font-size:14.5px; color:var(--fg-body); line-height:1.5; }
@media (max-width:820px){
  .models{ grid-template-columns:minmax(0,1fr); gap:var(--s7); }
  .models__spine{ width:auto; height:1px; background:linear-gradient(90deg,var(--rule),var(--gold),var(--rule)); }
}
.models__shared{
  margin-top:clamp(40px,5vw,72px); padding-top:var(--s6);
  border-top:1px solid var(--rule); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:var(--s3);
}
.models__shared .label{ color:var(--accent-ink); }
.models__shared p.claim{
  font-family:var(--serif); font-weight:400; font-size:clamp(20px,1.05rem + .85vw,28px);
  line-height:1.28; letter-spacing:-.015em; color:var(--fg); max-width:26ch;
}

/* --- 2 · We Don't Simply Submit CVs ------------------------------------- */
.beliefs__grid{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(32px,5vw,80px); align-items:start; }
@media (max-width:900px){ .beliefs__grid{ grid-template-columns:minmax(0,1fr); gap:var(--s6); } }
.beliefs{ display:flex; flex-direction:column; gap:var(--s5); }
.beliefs p{ font-size:16px; line-height:1.66; color:var(--fg-body); max-width:56ch; }
.beliefs strong{ color:var(--fg); font-weight:650; }

/* --- 3 · How we work: philosophy, not procedure ------------------------- */
.philosophy{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,3.4vw,56px) clamp(24px,3vw,48px); }
@media (max-width:900px){ .philosophy{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .philosophy{ grid-template-columns:minmax(0,1fr); } }
.stage{ padding-top:var(--s4); border-top:1px solid var(--gold); }
.stage h3{
  font-family:var(--serif); font-weight:400; font-size:clamp(21px,1.05rem + .75vw,26px);
  line-height:1.1; letter-spacing:-.018em; color:var(--fg);
}
.stage p{ margin-top:var(--s3); font-size:14.5px; color:var(--fg-body); line-height:1.6; }

/* --- 4 · Quality: two-column statements, key phrase leading ------------- */
.quality-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(32px,4vw,64px); }
@media (max-width:760px){
  .quality-list{ grid-template-columns:minmax(0,1fr); }
  .quality-list li{ padding-block:13px; }
}
.quality-list li{
  display:flex; gap:12px; align-items:flex-start;
  padding-block:var(--s4); border-bottom:1px solid var(--rule);
  font-size:15.5px; color:var(--fg-body); line-height:1.55;
}
.quality-list li strong{ color:var(--fg); font-weight:650; }

/* --- 5 · Mumbai: editorial split with the second image moment ----------- */
.mumbai__grid{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(32px,5vw,80px); align-items:center; }
@media (max-width:900px){ .mumbai__grid{ grid-template-columns:minmax(0,1fr); gap:var(--s7); } }
.mumbai__markets{ margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--rule); }
.mumbai__markets ul{ display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); margin-top:var(--s4); }
.mumbai__markets li{ display:flex; align-items:baseline; gap:9px; font-size:14.5px; color:var(--fg-body); }
.mumbai__markets li::before{ content:""; width:3px; height:3px; border-radius:50%; background:var(--gold); flex:0 0 3px; }

/* --- 6 · Accountability: a ledger, not a person ------------------------- */
.ledger{ margin-top:clamp(40px,5vw,72px); border-top:1px solid rgba(197,150,55,.34); }
.ledger__row{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:var(--s4) clamp(24px,4vw,64px);
  padding-block:clamp(20px,2.4vw,30px); border-bottom:1px solid var(--rule-dark);
  align-items:baseline;
}
@media (max-width:760px){ .ledger__row{ grid-template-columns:minmax(0,1fr); gap:8px; } }
.ledger__term{
  font-family:var(--serif); font-weight:400; font-size:clamp(20px,1.05rem + .7vw,26px);
  line-height:1.14; letter-spacing:-.018em; color:var(--gold-light);
}
.ledger__def{ font-size:15.5px; color:var(--fg-dark-soft); line-height:1.6; }

/* --- 7 · Why: serif principle pairs ------------------------------------- */
.principles-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,3.4vw,52px) clamp(32px,5vw,88px); }
@media (max-width:760px){ .principles-grid{ grid-template-columns:minmax(0,1fr); gap:var(--s6); } }
.why-principle{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s4); align-items:start; }
.why-principle h3{
  font-family:var(--serif); font-weight:400; font-size:clamp(20px,1.05rem + .62vw,24px);
  line-height:1.16; letter-spacing:-.016em; color:var(--fg);
}
.why-principle p{ margin-top:10px; font-size:14.5px; color:var(--fg-body); line-height:1.6; }

/* --- Placeholder frames ------------------------------------------------- */
.figure{ position:relative; background:var(--midnight); border-radius:var(--radius); overflow:hidden; }
.figure--45{ aspect-ratio:4/5; }
@media (max-width:900px){ .figure--45{ aspect-ratio:16/10; } }
.figure img{ width:100%; height:100%; object-fit:cover; }
.figure__placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--s4);
  background:linear-gradient(145deg,#101C2C,#0A121D 62%);
  border:1px solid rgba(197,150,55,.16);
}
.figure__placeholder .apex{ margin-top:0; opacity:.75; transform:scale(1.5); }
.figure__spec{
  font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#8A98A6; text-align:center; padding-inline:var(--s5); line-height:1.9;
}