/* ============================================================
   Fahavi — About page  (fahavi-about.css)
   Loaded only on /about/; depends on tokens in fahavi.css.
   ============================================================ */

.fahavi-about .ct-container,
.fahavi-about .ct-container-full { width: 100%; max-width: none; }
/* Core applies the constrained-layout margins with !important — match it. */
.fahavi-about .entry-content > * { width: 100%; max-width: none !important; margin-inline: 0 !important; }
.fahavi-about .entry-content { margin-top: 0; }

.fh-ab__wrap { width: min(100% - clamp(32px, 4vw, 64px), var(--fh-maxw)); margin-inline: auto; }

.fh-ab h2 { margin: 0 0 14px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; color: var(--fh-ink); }

/* ---- hero ---- */
.fh-ab__hero { background: var(--fh-surface); border-bottom: 1px solid var(--fh-border); padding: 34px 0 38px; }
.fh-ab__crumb { display: flex; gap: 8px; font-size: 13px; color: var(--fh-muted); }
.fh-ab__crumb a { color: var(--fh-muted); text-decoration: none; }
.fh-ab__crumb a:hover { color: var(--fh-navy); }
.fh-ab__hero h1 { margin: 8px 0 10px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; color: var(--fh-ink); }
.fh-ab__lede { margin: 0; max-width: 760px; font-size: clamp(15px, 1.4vw, 17.5px); line-height: 1.65; color: var(--fh-muted); }

/* ---- story + stats ---- */
.fh-ab__story { padding: 48px 0; }
.fh-ab__storygrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.fh-ab__prose p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.7; color: var(--fh-ink); }
.fh-ab__prose strong { color: var(--fh-navy); }
.fh-ab__storycta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

.fh-ab__stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fh-ab__stats li {
  background: #fff; border: 1px solid var(--fh-border); border-radius: var(--fh-radius-card);
  padding: 22px 20px; display: flex; flex-direction: column; gap: 6px;
}
.fh-ab__num { font-size: clamp(20px, 2vw, 26px); font-weight: 800; color: var(--fh-navy); }
.fh-ab__lbl { font-size: 13.5px; color: var(--fh-muted); }

/* ---- why cards ---- */
.fh-ab__why { background: var(--fh-surface); padding: 48px 0 54px; border-block: 1px solid var(--fh-border); }
.fh-ab__whygrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.fh-ab__card { background: #fff; border: 1px solid var(--fh-border); border-radius: var(--fh-radius-card); padding: 22px 20px; }
.fh-ab__ico {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: rgba(23, 41, 130, .08); color: var(--fh-navy);
}
.fh-ab__ico svg { width: 22px; height: 22px; }
.fh-ab__card h3 { margin: 12px 0 6px; font-size: 15.5px; font-weight: 700; color: var(--fh-ink); }
.fh-ab__card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--fh-muted); }

/* ---- contact ---- */
.fh-ab__contact { padding: 48px 0 60px; }
.fh-ab__congrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.fh-ab__con { background: #fff; border: 1px solid var(--fh-border); border-radius: var(--fh-radius-card); padding: 22px 20px; }
.fh-ab__con h3 { margin: 12px 0 6px; font-size: 15px; font-weight: 700; color: var(--fh-ink); }
.fh-ab__con p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--fh-muted); }
.fh-ab__con a { color: var(--fh-navy); font-weight: 600; text-decoration: none; }
.fh-ab__con a:hover { text-decoration: underline; }
.fh-ab__conactions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* ---- buttons ---- */
.fh-ab__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 22px; border-radius: var(--fh-radius-btn);
  font-size: 14.5px; font-weight: 700; text-decoration: none;
}
.fh-ab__btn svg { width: 17px; height: 17px; }
.fh-ab__btn--navy { background: var(--fh-navy); color: #fff !important; }
.fh-ab__btn--navy:hover { background: var(--fh-navy-dark); }
.fh-ab__btn--wa { background: #22C55E; color: #fff !important; }
.fh-ab__btn--wa:hover { background: var(--fh-green-deep); }
.fh-ab__btn--ghost { border: 1.5px solid var(--fh-navy); color: var(--fh-navy); }
.fh-ab__btn--ghost:hover { background: var(--fh-navy); color: #fff; }

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .fh-ab__whygrid, .fh-ab__congrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .fh-ab__storygrid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .fh-ab__whygrid, .fh-ab__congrid, .fh-ab__stats { grid-template-columns: 1fr; }
  .fh-ab__btn { width: 100%; }
}