/* ============================================================
   About Us — built from Figma About Us (1:609).
   Design frame is 1920 wide with the same 1024px content column as every other page (x448–1472).
   Loaded only by about.jade (block page-css), so it never affects other pages.
   Colour tokens come from :root in cm-home.css where they are already declared.
   ============================================================ */

/* same geometry as .container in cm.css and .hm-wrap on HOME — every page lines up on one column */
.ab-wrap { width: 100%; max-width: 1048px; margin-inline: auto; padding-inline: 12px; }

/* red 67x5 divider (1:624, 1:643, 1:647, 1:644, 1:645, 1:672) */
.ab-rule { display: block; width: 67px; height: 5px; margin: 14px 0 0; background: #c71e30; }
.ab-rule-center { margin-inline: auto; }

/* shared type */
.ab-h2 {
  margin: 0; font-size: 30px; font-weight: 700; line-height: 1.25;
  background: linear-gradient(90deg, #000e27, #0b3d73);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 1:642 / 1:646 sit on the navy band — flat white, no gradient clip */
.ab-h2-light { background: none; color: #fefdfd; -webkit-text-fill-color: currentColor; }
.ab-body { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: #363636; }
.ab-center { text-align: center; }
.ab-head { text-align: center; }

/* buttons (1:632/1:635 — 173x44 and 175x44) */
.ab-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; font-size: 14px; font-weight: 700;
  text-decoration: none; border: 1px solid transparent; border-radius: 0;
}
.ab-btn-red { background: #c71e30; color: #fdfdfd; }
.ab-btn-red:hover { background: #a91827; color: #fdfdfd; }
.ab-btn-ghost { border-color: #fefdfd; color: #fefdfd; }
.ab-btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fefdfd; }

/* ---------- HERO (1:621, 1920x455) ---------- */
.ab-hero {
  display: flex; align-items: center; min-height: 455px; padding: 40px 0;
  color: #fefdfd;
  /* NO colour wash. Figma 1:621 (and 1:14 on HOME) is a bare <img> with no fill and no overlay — the
     navy is baked into the photo, which already fades to near-black on the left where the text sits.
     Stacking a gradient on top double-darkened it (user report 2026-09-16). Same trap CLAUDE.md already
     records for the CTA band artwork: the asset IS the treatment, never layer a second one over it. */
  background: url("/front/img/cm/hero-inner.webp") center/cover no-repeat;
}
/* 1:622 Bold 16px #c71e30 */
.ab-hero-eyebrow { margin: 0; font-size: 16px; font-weight: 700; color: #c71e30; }
/* 1:623 ExtraBold 43.939px */
.ab-hero-title { margin: 6px 0 0; font-size: clamp(30px, 3.6vw, 43.939px); font-weight: 800; line-height: 1.15; }
.ab-hero-text { max-width: 480px; margin: 16px 0 0; font-size: 14px; line-height: 1.7; }
.ab-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ---------- COMPANY HISTORY (building photo left, text right) ---------- */
.ab-history { padding: 56px 0 8px; }
.ab-history-grid { display: grid; grid-template-columns: 501fr 502fr; gap: 48px; align-items: start; }
/* wrapper for the photo + its caption (was relying on the parent grid alone) */
.ab-history-media { min-width: 0; }
/* 1:774 — 501x309, radius 20, shadow 0 4px 15px */
.ab-history-photo {
  display: block; width: 100%; height: auto; aspect-ratio: 501 / 309; object-fit: cover;
  border-radius: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, .15);
}
/* 1:673 Regular 16px #011a36, centred under the photo */
.ab-history-caption { margin: 14px 0 0; font-size: 16px; text-align: center; color: #011a36; }
.ab-history-text .ab-body + .ab-body { margin-top: 14px; }

/* ---------- DARK BAND (1:611 — navy gradient, full-bleed) ---------- */
.ab-band {
  margin-top: 48px; padding: 52px 0;
  color: #fefdfd; background: linear-gradient(90deg, #000e27, #0b3d73);
}
.ab-band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
/* the two halves of the band — min-width:0 stops a long value from forcing the column wider */
.ab-outline, .ab-quality { min-width: 0; }
/* 1:649–1:665 — label Bold 16px, value Regular 16px, both #fefdfd */
.ab-outline-list { margin: 26px 0 0; }
.ab-outline-row { display: grid; grid-template-columns: 170px 1fr; gap: 6px 12px; padding: 5px 0; font-size: 16px; }
.ab-outline-row dt { font-weight: 700; }
.ab-outline-row dd { margin: 0; font-weight: 400; }

/* certificates 1:614 / 1:618 — ~240x307 each, label above the card */
.ab-certs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px; }
.ab-cert { margin: 0; }
/* 1:640 / 1:641 Bold 16px #fefdfd */
.ab-cert-label { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #fefdfd; }
.ab-cert-media {
  display: block; overflow: hidden; aspect-ratio: 240 / 307; background: #fff;
  box-shadow: 0 2.226px 8.347px rgba(0, 0, 0, .15);
}
.ab-cert-media img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }

/* ---------- SCOPE OF WORK (8 icons, centred: 5 then 3) ---------- */
.ab-scope { padding: 52px 0 8px; }
.ab-scope-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 34px 40px; margin: 34px 0 0; padding: 0; list-style: none;
}
.ab-scope-item { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 140px; }
.ab-scope-icon { display: block; width: 60px; height: 60px; object-fit: contain; }
/* labels are Bold 16px with the navy gradient (1:695 etc.) */
.ab-scope-label {
  font-size: 16px; font-weight: 700; line-height: 1.3; text-align: center;
  background: linear-gradient(90deg, #000e27, #0b3d73);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* cyan hairline 1:767 — 1024x1 #3CC9FF, full opacity */
.ab-hairline { height: 1px; margin: 44px 0; border: 0; background: #3cc9ff; opacity: 1; }

/* ---------- OUR FACTORY (1:768–1:773 — 328x201, 3 across) ---------- */
.ab-factory { padding: 8px 0 56px; }
.ab-factory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 27px 21px; margin-top: 30px; }
.ab-factory-item { display: block; overflow: hidden; background: #e9edf2; }
.ab-factory-item img { display: block; width: 100%; height: 100%; aspect-ratio: 328 / 201; object-fit: cover; transition: transform .35s ease; }
.ab-factory-item:hover img { transform: scale(1.04); }

/* ---------- responsive (no mobile frame in Figma — derived from the desktop one) ---------- */
@media (max-width: 991.98px) {
  .ab-history-grid { grid-template-columns: 1fr; gap: 28px; }
  .ab-history-photo { max-width: 520px; margin-inline: auto; }
  .ab-band-grid { grid-template-columns: 1fr; gap: 40px; }
  .ab-factory-grid { grid-template-columns: repeat(2, 1fr); }
  .ab-scope-grid { gap: 28px 26px; }
  .ab-scope-item { width: 124px; }
}
@media (max-width: 767.98px) {
  .ab-hero { min-height: 380px; }
  .ab-hero-text { max-width: none; }
  .ab-history { padding: 40px 0 8px; }
  .ab-band { margin-top: 36px; padding: 40px 0; }
  .ab-scope { padding: 40px 0 8px; }
  .ab-outline-row { grid-template-columns: 150px 1fr; font-size: 15px; }
  /* a certificate scan is dense text — one per row so it is actually readable before tapping it open */
  .ab-certs { grid-template-columns: 1fr; gap: 20px; max-width: 320px; }
}
@media (max-width: 575.98px) {
  .ab-hero { min-height: 340px; padding: 32px 0; }
  .ab-hero-btns .ab-btn { width: 100%; }
  .ab-h2 { font-size: 22px; }
  /* the label column cannot hold "Capital (Paid-Up)" at this width — stack each row instead */
  .ab-outline-row { grid-template-columns: 1fr; gap: 2px; padding: 7px 0; font-size: 14px; }
  .ab-certs { max-width: none; }
  .ab-cert-label { font-size: 14px; }
  .ab-factory-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ab-scope-grid { gap: 24px 16px; }
  .ab-scope-item { width: 44%; }
  .ab-scope-label { font-size: 14px; }
  .ab-hairline { margin: 30px 0; }
}
@media (max-width: 379.98px) {
  /* two across is still legible here; one per row would make 8 icons and 6 photos an endless scroll */
  .ab-factory-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ab-scope-grid { gap: 20px 10px; }
  .ab-scope-item { width: 46%; }
  .ab-scope-icon { width: 48px; height: 48px; }
  .ab-scope-label { font-size: 13px; }
}