/* ════════════════════════════════════════════════════════════════════════
   WEBIFYY — SUB-PAGES STYLESHEET  (about.php, contact.php)
   ──────────────────────────────────────────────────────────────────────
   Loaded AFTER styles.css. Inherits all design tokens (--fs-*, --side-gap),
   the blue/navy palette, Plus Jakarta Sans, and the .reveal / .reveal-dN
   animation classes from the main stylesheet.
   Namespacing:  .pg-*  shared page chrome   .ab-*  about   .ct-*  contact
   ════════════════════════════════════════════════════════════════════ */

/* ── SHARED PAGE HERO ── */
.pg-hero {
  position: relative;
  background:
    radial-gradient(900px 380px at 78% -10%, rgba(147, 197, 253, 0.32), transparent 60%),
    radial-gradient(700px 340px at 8% 120%, rgba(37, 99, 235, 0.16), transparent 60%),
    linear-gradient(180deg, #eef4ff 0%, #f6f9ff 60%, #ffffff 100%);
  padding: 60px 0 64px;
  overflow: hidden;
}
/* subtle dot texture so the hero isn't a flat empty band */
.pg-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(30, 64, 175, 0.06) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 75%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 75%);
}
.pg-hero-inner {
  width: calc(100% - var(--side-gap));
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
}
.pg-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.pg-hero-blob-1 { width: 300px; height: 300px; background: rgba(147,197,253,0.30); top: -120px; right: -60px; }
.pg-hero-blob-2 { width: 260px; height: 260px; background: rgba(37,99,235,0.12); bottom: -130px; left: -50px; }

.pg-crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: #5b6b86;
  margin-bottom: 18px;
}
.pg-crumb a { color: #1e40af; text-decoration: none; font-weight: 700; }
.pg-crumb a:hover { text-decoration: underline; }
.pg-crumb i { font-size: 9px; color: #9aa7bd; }

/* layout only — the animated navy look comes from the shared
   "ANIMATED SECTION TAG STYLE" block in styles.css (same as the landing page) */
.pg-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.pg-tag-star { line-height: 1; }

.pg-hero-title {
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -1.4px;
  color: #0b1220;
  max-width: 18ch;
  margin: 0 auto 18px;
}
.pg-hero-title .hl {
  color: #1e40af;
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}
/* underline sits cleanly BELOW the descenders, not through the text */
.pg-hero-title .hl svg {
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 13px;
  pointer-events: none;
}
.pg-hero-sub {
  font-size: var(--fs-body-lg);
  color: #44506a;
  line-height: 1.7;
  max-width: 60ch;
  margin: 0 auto;
}

/* hero CTAs + trust chips */
.pg-hero-cta {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin-top: 28px;
}
.pg-hero-trust {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 12px 26px; margin-top: 26px;
}
.pg-hero-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: #44506a; font-weight: 600; }
.pg-hero-trust i { color: #1e40af; font-size: var(--fs-body); }

/* ── SHARED SECTION SCAFFOLDING ── */
.pg-section { padding: 52px 0; position: relative; }
.pg-section-alt { background: #f7f9fd; }
.pg-inner { width: calc(100% - var(--side-gap)); margin: 0 auto; position: relative; }
.pg-head { text-align: center; max-width: 64ch; margin: 0 auto 34px; }
.pg-head .pg-tag { margin-bottom: 14px; }
.pg-head-title {
  font-size: var(--fs-h1);
  font-weight: 900;
  letter-spacing: -1px;
  color: #0b1220;
  line-height: 1.15;
  margin-bottom: 12px;
}
.pg-head-title .hl { color: #1e40af; position: relative; display: inline-block; padding-bottom: 6px; }
.pg-head-title .hl svg { position: absolute; bottom: -2px; left: 0; width: 100%; }
.pg-head-sub { font-size: var(--fs-body); color: #5a6580; line-height: 1.7; }

/* ── SHARED STATS BAND ── */
/* overlap variant: cards lift up over the hero's bottom edge for a layered look */
.pg-stats-section { padding-top: 0; margin-top: -52px; position: relative; z-index: 3; }
.pg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pg-stat {
  background: #fff;
  border: 1px solid #e8ebf2;
  border-radius: 18px;
  padding: 26px 22px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pg-stat:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,23,42,0.08); border-color: rgba(147,197,253,0.7); }
.pg-stat-ico {
  width: 46px; height: 46px; margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #1e40af, #091c3c);
  color: #fff; font-size: var(--fs-body-lg);
}
.pg-stat-num { font-size: clamp(26px, 1.2vw + 22px, 34px); font-weight: 900; color: #0b1220; letter-spacing: -1px; line-height: 1; }
.pg-stat-lbl { font-size: var(--fs-small); color: #5a6580; margin-top: 6px; font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════════
   ABOUT PAGE  (.ab-*)
   ════════════════════════════════════════════════════════════════════ */
.ab-story { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.ab-story-copy { position: sticky; top: 100px; }
.ab-story-copy .pg-tag { margin-bottom: 14px; }
.ab-story-title {
  font-size: var(--fs-h1); font-weight: 900; letter-spacing: -1px;
  color: #0b1220; line-height: 1.15; margin-bottom: 16px;
}
.ab-story-title .hl { color: #1e40af; }
.ab-story-copy p { font-size: var(--fs-body); color: #44506a; line-height: 1.75; margin-bottom: 14px; }
.ab-story-copy p:last-of-type { margin-bottom: 0; }
.ab-sign { margin-top: 22px; display: flex; align-items: center; gap: 14px; }
.ab-sign-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: var(--fs-body);
  background: linear-gradient(135deg, #3b82f6, #1e40af);
}
.ab-sign-meta strong { display: block; font-size: var(--fs-body); color: #0b1220; }
.ab-sign-meta span { font-size: var(--fs-small); color: #5a6580; }

/* story timeline (image-free) */
.ab-timeline { position: relative; padding-left: 38px; }
.ab-timeline::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, #1e40af 0%, #93c5fd 100%);
  border-radius: 2px;
}
.ab-tl-item { position: relative; padding-bottom: 30px; }
.ab-tl-item:last-child { padding-bottom: 0; }
.ab-tl-dot {
  position: absolute; left: -38px; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 2px solid #1e40af;
  display: grid; place-items: center;
  box-shadow: 0 0 0 5px #f7f9fd;
}
.ab-section-white .ab-tl-dot { box-shadow: 0 0 0 5px #fff; }
.ab-tl-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1e40af; }
.ab-tl-year {
  display: inline-block; font-size: var(--fs-small); font-weight: 800;
  color: #1e40af; letter-spacing: 0.04em; margin-bottom: 2px;
}
.ab-tl-item h4 { font-size: var(--fs-h3); font-weight: 800; color: #0b1220; letter-spacing: -0.3px; margin-bottom: 6px; }
.ab-tl-item p { font-size: var(--fs-body); color: #5a6580; line-height: 1.65; }

/* founder quote band (image-free centerpiece) */
.ab-quote-wrap {
  background: linear-gradient(150deg, #11254d 0%, #091c3c 100%);
  border-radius: 26px;
  padding: 56px 52px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.ab-quote-wrap::before,
.ab-quote-wrap::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none;
}
.ab-quote-wrap::before { width: 280px; height: 280px; background: rgba(59,130,246,0.28); top: -120px; right: -80px; }
.ab-quote-wrap::after { width: 240px; height: 240px; background: rgba(147,197,253,0.14); bottom: -120px; left: -70px; }
.ab-quote-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.ab-quote-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 96px; line-height: 0.5; color: rgba(147,197,253,0.45);
  display: block; margin-bottom: 14px;
}
.ab-quote-text {
  font-size: clamp(20px, 1.3vw + 15px, 27px);
  font-weight: 800; color: #fff; line-height: 1.45; letter-spacing: -0.5px;
  margin-bottom: 26px;
}
.ab-quote-text em { color: #93c5fd; font-style: normal; }
.ab-quote-by { display: inline-flex; align-items: center; gap: 13px; }
.ab-quote-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: var(--fs-body);
  background: linear-gradient(135deg, #3b82f6, #1e40af);
}
.ab-quote-by-meta { text-align: left; }
.ab-quote-by-meta strong { display: block; font-size: var(--fs-body); color: #fff; }
.ab-quote-by-meta span { font-size: var(--fs-small); color: #9fb6d8; }

/* mission + vision — single navy "manifesto" panel */
.ab-manifesto {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
  background: linear-gradient(155deg, #0c1f44 0%, #091c3c 58%, #07152e 100%);
  border-radius: 28px; color: #fff;
  box-shadow: 0 34px 80px rgba(9, 28, 60, 0.34);
}
.ab-manifesto::before {
  content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%;
  background: rgba(59, 130, 246, 0.26); filter: blur(95px); top: -150px; left: 34%; pointer-events: none;
}
.ab-manifesto::after {
  content: ""; position: absolute; top: 52px; bottom: 52px; left: 50%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(147, 197, 253, 0.45), transparent);
}
.ab-mf-cell { position: relative; z-index: 1; padding: 54px 48px; }
.ab-mf-index {
  position: absolute; top: 30px; right: 36px;
  font-size: 84px; font-weight: 900; line-height: 1; letter-spacing: -3px;
  color: rgba(255, 255, 255, 0.055);
}
.ab-mf-chip {
  display: inline-block; font-size: var(--fs-tiny); font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase; color: #93c5fd;
  background: rgba(147, 197, 253, 0.12); padding: 6px 14px; border-radius: 999px; margin-bottom: 22px;
}
.ab-mf-ico {
  width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center;
  font-size: var(--fs-h2); color: #fff; margin-bottom: 20px;
  background: linear-gradient(135deg, #3b82f6, #1e40af);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.42);
}
.ab-mf-text { font-size: clamp(16px, 0.5vw + 15px, 19px); line-height: 1.62; color: #dbe6f7; font-weight: 500; }
.ab-mf-text em { color: #fff; font-style: normal; font-weight: 800; }

/* values — asymmetric BENTO grid */
.ab-values-deco { position: relative; }
.ab-values-deco::before {
  content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  background: rgba(147, 197, 253, 0.20); filter: blur(95px); top: -50px; right: -70px; pointer-events: none; z-index: 0;
}
.ab-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(196px, 1fr);
  gap: 20px;
  position: relative; z-index: 1;
}
/* bento placement (DOM order fixed) */
.ab-value:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }       /* wide feature */
.ab-value:nth-child(2) { grid-column: 3;     grid-row: 1 / 3; }   /* tall accent  */
.ab-value:nth-child(3) { grid-column: 1;     grid-row: 2; }
.ab-value:nth-child(4) { grid-column: 2;     grid-row: 2; }
.ab-value:nth-child(5) { grid-column: 1 / 3; grid-row: 3; }       /* wide */
.ab-value:nth-child(6) { grid-column: 3;     grid-row: 3; }

.ab-value {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start;
  background: #fff; border: 1px solid #e8ebf2; border-radius: 22px;
  padding: 30px 30px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ab-value::before {
  content: ""; position: absolute; top: 0; left: 0; height: 4px; width: 0;
  background: linear-gradient(90deg, #1e40af, #3b82f6);
  transition: width .4s ease; z-index: 2;
}
.ab-value:hover { transform: translateY(-6px); box-shadow: 0 28px 56px rgba(15, 23, 42, 0.14); border-color: transparent; }
.ab-value:hover::before { width: 100%; }

.ab-value-num {
  position: absolute; top: 16px; right: 24px;
  font-size: 50px; font-weight: 900; line-height: 1; letter-spacing: -2px;
  color: #eef2f9; transition: color .3s ease; z-index: 1;
}
.ab-value:hover .ab-value-num { color: #dbe7fb; }
.ab-value-ico {
  width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(135deg, #1e40af, #091c3c); color: #fff; font-size: var(--fs-h3);
  margin-bottom: 18px; position: relative; z-index: 1;
  transition: transform .3s ease;
}
.ab-value:hover .ab-value-ico { transform: rotate(-6deg) scale(1.06); }
.ab-value h4 { font-size: var(--fs-h3); font-weight: 800; color: #0b1220; margin-bottom: 9px; letter-spacing: -0.3px; position: relative; z-index: 1; }
.ab-value p { font-size: var(--fs-body); color: #5a6580; line-height: 1.7; position: relative; z-index: 1; }

/* tall accent tile (#2) — soft blue tint, content vertically centered */
.ab-value.is-accent {
  background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
  justify-content: center; border-color: #dbe7fb;
}

/* wide navy FEATURE tile (#1) */
.ab-value.is-feature {
  background: linear-gradient(150deg, #0c1f44 0%, #091c3c 100%);
  border-color: transparent; justify-content: flex-end;
}
.ab-value.is-feature::after {
  content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%;
  background: rgba(59, 130, 246, 0.28); filter: blur(80px); top: -120px; left: 30%; pointer-events: none;
}
.ab-value.is-feature .ab-value-watermark {
  position: absolute; right: -8px; bottom: -26px; font-size: 150px; line-height: 1;
  color: rgba(147, 197, 253, 0.07); z-index: 0; pointer-events: none;
}
.ab-value.is-feature .ab-value-chip {
  align-self: flex-start;
  font-size: var(--fs-tiny); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: #93c5fd; background: rgba(147, 197, 253, 0.12);
  padding: 6px 14px; border-radius: 999px; margin-bottom: auto;
}
.ab-value.is-feature .ab-value-ico { background: linear-gradient(135deg, #3b82f6, #1e40af); box-shadow: 0 12px 26px rgba(37, 99, 235, 0.42); margin-top: 22px; }
.ab-value.is-feature .ab-value-num { color: rgba(255, 255, 255, 0.06); }
.ab-value.is-feature h4 { color: #fff; font-size: var(--fs-h2); }
.ab-value.is-feature p { color: #c3d2ea; max-width: 42ch; }

/* team grid */
.ab-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ab-member {
  background: #fff; border: 1px solid #e8ebf2; border-radius: 20px;
  padding: 28px 22px; text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ab-member:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(15,23,42,0.09); }
.ab-member-avatar {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center; color: #fff; font-weight: 800;
  font-size: var(--fs-h2); background: var(--ava, linear-gradient(135deg,#3b82f6,#1e40af));
}
.ab-member h4 { font-size: var(--fs-h3); font-weight: 800; color: #0b1220; letter-spacing: -0.3px; }
.ab-member-role { font-size: var(--fs-small); color: #1e40af; font-weight: 700; margin-top: 2px; }
.ab-member p { font-size: var(--fs-small); color: #5a6580; line-height: 1.6; margin-top: 10px; }
.ab-member-social { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.ab-member-social a {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: #eef2f9; color: #1e40af; font-size: var(--fs-small);
  transition: background .2s ease, color .2s ease;
}
.ab-member-social a:hover { background: #1e40af; color: #fff; }

/* ════════════════════════════════════════════════════════════════════════
   CONTACT PAGE  (.ct-*)
   ════════════════════════════════════════════════════════════════════ */
.ct-methods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ct-method {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid #e8ebf2; border-radius: 18px;
  padding: 26px 24px; text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ct-method:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(15,23,42,0.10); border-color: rgba(147,197,253,0.8); }
.ct-method-ico {
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 16px;
  display: grid; place-items: center; color: #fff; font-size: var(--fs-h3);
  background: linear-gradient(135deg, #1e40af, #091c3c);
}
.ct-method.is-wa .ct-method-ico { background: linear-gradient(135deg, #25d366, #128c4b); }
.ct-method h3 { font-size: var(--fs-h3); font-weight: 800; color: #0b1220; letter-spacing: -0.3px; margin-bottom: 4px; }
.ct-method-val { font-size: var(--fs-body); color: #1e40af; font-weight: 700; word-break: break-word; }
.ct-method-sub { font-size: var(--fs-small); color: #5a6580; margin-top: 4px; }

/* split: form + map */
.ct-split { display: grid; grid-template-columns: 1.25fr 0.85fr; gap: 34px; align-items: stretch; }

/* map as the right column — fills the form's height */
.ct-map-side { height: 100%; }
.ct-map-side iframe { height: 100%; min-height: 480px; }
@media (max-width: 980px) {
  .ct-map-side iframe { min-height: 360px; }
}
@media (max-width: 600px) {
  .ct-map-side iframe { min-height: 300px; }
}

.ct-aside { display: flex; flex-direction: column; gap: 18px; }
.ct-aside-card {
  background: #fff; border: 1px solid #e8ebf2; border-radius: 18px; padding: 26px 24px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}
.ct-aside-card h3 {
  font-size: var(--fs-h3); font-weight: 800; color: #0b1220; letter-spacing: -0.3px;
  margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.ct-aside-card h3 i { color: #1e40af; }
.ct-hours { list-style: none; }
.ct-hours li { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-body); padding: 9px 0; border-bottom: 1px dashed #e6eaf2; }
.ct-hours li:last-child { border-bottom: 0; }
.ct-hours li span:first-child { color: #44506a; font-weight: 600; }
.ct-hours li span:last-child { color: #0b1220; font-weight: 700; }
.ct-hours li.is-closed span:last-child { color: #b91c1c; }

.ct-aside-social { display: flex; gap: 10px; flex-wrap: wrap; }
.ct-aside-social a {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: #eef2f9; color: #1e40af; font-size: var(--fs-body-lg);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.ct-aside-social a:hover { background: #1e40af; color: #fff; transform: translateY(-2px); }

.ct-resp {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(150deg, #11254d, #091c3c); color: #fff;
  border-radius: 18px; padding: 22px 24px;
}
.ct-resp i { font-size: 26px; color: #93c5fd; }
.ct-resp strong { display: block; font-size: var(--fs-body-lg); font-weight: 800; }
.ct-resp span { font-size: var(--fs-small); color: #c3d2ea; }

/* map */
.ct-map { border-radius: 22px; overflow: hidden; border: 1px solid #e8ebf2; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08); line-height: 0; }
.ct-map iframe { width: 100%; height: 420px; border: 0; display: block; filter: grayscale(0.15); }

/* ── SUB-PAGE RESPONSIVE ── */
@media (max-width: 1100px) {
  .pg-stats, .ct-methods { grid-template-columns: repeat(2, 1fr); }
  .ab-team { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .ab-story, .ct-split { grid-template-columns: 1fr; gap: 36px; }
  .ab-story-copy { position: static; top: auto; }
  .ab-quote-wrap { padding: 44px 28px; }
}
/* bento → single column: reset every explicit placement */
@media (max-width: 820px) {
  .ab-values { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .ab-value:nth-child(1), .ab-value:nth-child(2), .ab-value:nth-child(3),
  .ab-value:nth-child(4), .ab-value:nth-child(5), .ab-value:nth-child(6) {
    grid-column: 1 / -1; grid-row: auto;
  }
  .ab-value { padding: 28px 26px; }
  .ab-value.is-accent { justify-content: flex-start; }
}
@media (max-width: 780px) {
  .ab-manifesto { grid-template-columns: 1fr; }
  .ab-manifesto::after { left: 0; right: 0; top: auto; bottom: auto; width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(147,197,253,0.4), transparent); }
  .ab-mf-cell { padding: 44px 32px; }
}
@media (max-width: 600px) {
  .pg-hero { padding: 48px 0 40px; }
  .pg-section { padding: 48px 0; }
  .pg-stats, .ct-methods, .ab-team, .ab-values { grid-template-columns: 1fr; }
  .ct-map iframe { height: 320px; }
}

/* ════════════════════════════════════════════════════════════════════════
   ABOUT PAGE v2 — editorial / asymmetric (.abx-*)
   Modern, compact, distinct from the homepage's centered sections.
   ════════════════════════════════════════════════════════════════════ */
/* asymmetric hero */
.abx-hero {
  position: relative; overflow: hidden;
  padding: 54px 0 50px;
  background: linear-gradient(180deg, #eef4ff 0%, #ffffff 70%);
  border-bottom: 1px solid #eef2f9;
}
.abx-hero-blob {
  position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: rgba(147, 197, 253, 0.30); filter: blur(95px);
  top: -180px; right: -60px; pointer-events: none;
}
.abx-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.5fr 0.85fr; gap: 50px; align-items: center;
}
.abx-hero-title {
  font-size: clamp(34px, 2.3vw + 22px, 54px);
  font-weight: 900; line-height: 1.07; letter-spacing: -1.6px;
  color: #0b1220; margin: 16px 0 16px;
}
.abx-hero-title .hl { color: #1e40af; }
.abx-hero-lead {
  font-size: var(--fs-body-lg); color: #44506a; line-height: 1.72;
  max-width: 54ch; margin-bottom: 26px;
}

/* editorial facts column (replaces stat boxes) */
.abx-facts {
  border-left: 2px solid #dfe7f4; padding-left: 26px;
  display: flex; flex-direction: column; gap: 20px;
}
.abx-fact { display: flex; flex-direction: column; gap: 3px; }
.abx-fact span {
  font-size: var(--fs-tiny); font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: #1e40af;
}
.abx-fact strong { font-size: var(--fs-body-lg); font-weight: 800; color: #0b1220; letter-spacing: -0.3px; }

/* horizontal story timeline — short, modern */
.abx-timeline {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative;
}
.abx-tl-item { position: relative; padding-top: 42px; }
.abx-tl-item::after {
  content: ""; position: absolute; top: 15px; left: 9px;
  width: calc(100% + 28px); height: 2px;
  background: linear-gradient(90deg, #9fc0f5, #dce6f6); z-index: 0;
}
.abx-tl-item:last-child::after { display: none; }
.abx-tl-dot {
  position: absolute; top: 6px; left: 0;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid #1e40af; z-index: 1;
  box-shadow: 0 0 0 4px #eef4ff;
}
.abx-tl-year {
  display: inline-block; font-size: var(--fs-small); font-weight: 800;
  color: #1e40af; letter-spacing: 0.04em; margin-bottom: 4px;
}
.abx-tl-item h4 { font-size: var(--fs-h3); font-weight: 800; color: #0b1220; letter-spacing: -0.3px; margin-bottom: 6px; }
.abx-tl-item p { font-size: var(--fs-small); color: #5a6580; line-height: 1.6; }

/* compact manifesto padding override on the about page */
.abx-page .ab-mf-cell { padding: 44px 42px; }

@media (max-width: 900px) {
  .abx-hero { padding: 40px 0 42px; }
  .abx-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  /* facts become a tidy 2-up card grid instead of an editorial side list */
  .abx-facts {
    border-left: 0; padding-left: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  }
  .abx-fact {
    background: #f4f8ff; border: 1px solid #e2e8f4; border-radius: 14px;
    padding: 14px 16px; gap: 4px;
  }
  .abx-fact strong { font-size: var(--fs-body); }
}
@media (max-width: 820px) {
  .abx-timeline { grid-template-columns: 1fr; gap: 0; }
  .abx-tl-item { padding: 0 0 26px 30px; }
  .abx-tl-item::after { top: 20px; left: 8px; width: 2px; height: calc(100% - 16px);
    background: linear-gradient(180deg, #9fc0f5, #dce6f6); }
  .abx-tl-dot { top: 3px; left: 0; }
}
@media (max-width: 600px) {
  .abx-hero-title { font-size: clamp(30px, 7vw + 6px, 40px); }
  .abx-hero-lead { font-size: var(--fs-body); margin-bottom: 22px; }
}
@media (max-width: 360px) {
  .abx-facts { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   ABOUT PAGE — MOTION  (animations & transitions)
   Builds on the global .reveal / .is-visible system from styles.css.
   ════════════════════════════════════════════════════════════════════ */

/* hero blob — slow continuous drift */
.abx-hero-blob { animation: abx-blob-float 16s ease-in-out infinite; }
@keyframes abx-blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-26px, 22px) scale(1.1); }
}

/* hero title accent — subtle gradient sweep on the highlight word */
.abx-hero-title .hl {
  background: linear-gradient(90deg, #1e40af, #3b82f6, #1e40af);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #1e40af;
  animation: abx-hl-sweep 6s ease-in-out infinite;
}
@keyframes abx-hl-sweep {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}

/* hero facts — staggered slide-in + hover nudge */
.abx-facts.reveal { opacity: 1; transform: none; }   /* container static; children animate */
.abx-fact {
  opacity: 0; transform: translateX(14px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.abx-facts.is-visible .abx-fact { opacity: 1; transform: translateX(0); }
.abx-facts.is-visible .abx-fact:nth-child(1) { transition-delay: .10s; }
.abx-facts.is-visible .abx-fact:nth-child(2) { transition-delay: .22s; }
.abx-facts.is-visible .abx-fact:nth-child(3) { transition-delay: .34s; }
.abx-facts.is-visible .abx-fact:nth-child(4) { transition-delay: .46s; }
.abx-fact strong { transition: color .25s ease, transform .25s ease; }
.abx-fact:hover strong { color: #1e40af; transform: translateX(4px); }

/* horizontal timeline — line draws, dot pops, per-item stagger */
.abx-tl-item.reveal { opacity: 0; transform: translateY(22px); }
.abx-tl-item.reveal.is-visible { opacity: 1; transform: translateY(0); }
.abx-tl-item::after { transform: scaleX(0); transform-origin: left center; transition: transform .65s cubic-bezier(.16,1,.3,1) .18s; }
.abx-tl-item.is-visible::after { transform: scaleX(1); }
.abx-tl-dot { transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1) .12s; }
.abx-tl-item.is-visible .abx-tl-dot { transform: scale(1); }
.abx-tl-dot::before {              /* soft ping ring when the dot lands */
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid rgba(30,64,175,0.5); opacity: 0;
}
.abx-tl-item.is-visible .abx-tl-dot::before { animation: abx-ping 1.1s ease-out .35s; }
@keyframes abx-ping {
  0%   { opacity: .7; transform: scale(.6); }
  100% { opacity: 0;  transform: scale(2.2); }
}

/* manifesto — pulsing glow + cell/icon hover */
.ab-manifesto::before { animation: abx-glow-pulse 7s ease-in-out infinite; }
@keyframes abx-glow-pulse {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.18); }
}
.ab-mf-cell { transition: transform .4s cubic-bezier(.16,1,.3,1); }
.ab-mf-cell:hover { transform: translateY(-5px); }
.ab-mf-ico { transition: transform .4s ease, box-shadow .4s ease; }
.ab-mf-cell:hover .ab-mf-ico { transform: rotate(-6deg) scale(1.08); box-shadow: 0 16px 34px rgba(37,99,235,0.55); }
.ab-mf-cell:hover .ab-mf-index { color: rgba(147,197,253,0.10); transition: color .4s ease; }

/* primary CTA button — gentle hover lift (reuses site buttons) */
.abx-hero .btn-primary, .abx-hero .btn-secondary { transition: transform .25s ease, box-shadow .25s ease; }
.abx-hero .btn-primary:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .abx-hero-blob,
  .abx-hero-title .hl,
  .ab-manifesto::before,
  .abx-tl-item.is-visible .abx-tl-dot::before { animation: none !important; }
  .abx-hero-title .hl { -webkit-text-fill-color: #1e40af; }
  .abx-fact, .abx-tl-item.reveal, .abx-tl-item::after, .abx-tl-dot { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   CONTACT PAGE v2 — editorial hero + quick-contact panel  (.ct-hero-*, .ct-quick-*)
   Reuses .abx-hero / .abx-hero-grid / .abx-hero-title shells from the About page.
   ════════════════════════════════════════════════════════════════════ */
.ct-hero-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 22px; }
.ct-hero-meta span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: #44506a; font-weight: 600; }
.ct-hero-meta i { color: #1e40af; }

/* quick-contact panel (hero right) */
.ct-quick {
  background: #fff; border: 1px solid #e8ebf2; border-radius: 20px;
  padding: 22px; box-shadow: 0 18px 44px rgba(15, 23, 42, 0.09);
  display: flex; flex-direction: column; gap: 10px;
}
.ct-quick-title {
  font-size: var(--fs-tiny); font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: #1e40af; margin-bottom: 4px;
}
.ct-quick-row {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
  background: #f7f9fd; border: 1px solid #eef2f9; border-radius: 14px; padding: 12px 14px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.ct-quick-row:hover { transform: translateX(4px); border-color: rgba(147, 197, 253, 0.85); box-shadow: 0 12px 26px rgba(15, 23, 42, 0.09); background: #fff; }
.ct-quick-ico {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-size: var(--fs-body-lg);
  background: linear-gradient(135deg, #1e40af, #091c3c);
}
.ct-quick-row.is-wa .ct-quick-ico { background: linear-gradient(135deg, #25d366, #128c4b); }
.ct-quick-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ct-quick-text strong { font-size: var(--fs-body); color: #0b1220; font-weight: 800; }
.ct-quick-text span { font-size: var(--fs-small); color: #5a6580; word-break: break-word; }
.ct-quick-arrow { margin-left: auto; color: #9aa7bd; font-size: var(--fs-small); transition: transform .25s ease, color .25s ease; }
.ct-quick-row:hover .ct-quick-arrow { color: #1e40af; transform: translateX(3px); }

@media (max-width: 900px) {
  .ct-quick { padding: 18px; }
}

/* ── Lighter sub-page headings (reduced from 900 → 700) ── */
.pg-hero-title,
.pg-head-title,
.abx-hero-title,
.ab-story-title {
  font-weight: 700;
}