/* ============================================================================
   TAAMSI TECHNOLOGY — ABOUT PAGE DESIGN SYSTEM
   ============================================================================
   Self-contained. about.html loads base.css + this file and no longer loads
   inner.css, because contact.html depends on 33 classes there. Isolating the
   page this way means nothing here can reach any other page.

   WHY THIS EXISTS — the audit found the page was twelve sections built as
   twelve designs:
     · 41 distinct font-size declarations
     · 3 different section paddings (3.5 / 4.5 / 6rem)
     · 7 different border-radius values
     · 10 distinct card/box components
   The result read as a stack of individually attractive blocks rather than
   one art-directed page.

   THE SYSTEM
     Container   Bootstrap .container (unchanged, so the grid matches the
                 header and footer)
     Rhythm      ONE section padding token, everywhere
     Type        6 roles, nothing outside them
     Radius      3 values: 10 / 14 / 20px, plus 50% for portraits and markers
     Shadow      2 values: resting and lifted
     Icons       one 44px tile, one weight, navy on light navy
     Motion      the site's existing .reveal + .delay-n, so the page shares
                 the homepage's animation language and needs no new JS
   ========================================================================= */


/* ----------------------------------------------------------------------------
   1. PAGE TOKENS
   Aliases onto the global brand tokens rather than restating hex values, so
   the page follows any future change to the site palette automatically.
   ------------------------------------------------------------------------- */
/* Scoped to BOTH inner pages. Contact inherits this identical token block
   rather than declaring its own copy — one system, two pages, no drift.
   Adding the selector changes nothing about how About renders. */
.about-page,
.contact-page {
  /* colour roles */
  --ab-navy:        var(--color-primary, #063A78);
  --ab-navy-mid:    var(--color-primary-light, #2C6FC4);
  --ab-navy-hover:  var(--color-primary-hover, #003A82);
  --ab-accent:      var(--color-accent, #A71501);
  --ab-white:       var(--color-white, #FFFFFF);
  --ab-tint:        var(--color-light-blue, #F4F7FB);
  --ab-tint-2:      var(--color-sky, #EAF1F9);
  --ab-ink:         var(--color-text, #172033);
  --ab-ink-2:       var(--color-text-muted, #5B6B82);
  --ab-line:        var(--color-border, #DCE5F0);

  /* vertical rhythm — one value drives every section on the page */
  --ab-section:     clamp(4.5rem, 7.5vw, 7.5rem);
  --ab-section-sm:  clamp(3rem, 5vw, 4.5rem);
  --ab-head-gap:    clamp(2.25rem, 4vw, 3.25rem);
  --ab-block-gap:   clamp(1.75rem, 3vw, 2.75rem);

  /* geometry */
  --ab-r-sm: 10px;
  --ab-r:    14px;
  --ab-r-lg: 20px;

  /* elevation — two steps, deliberately shallow */
  --ab-shadow:      0 2px 14px rgba(6, 58, 120, .05);
  --ab-shadow-lift: 0 10px 30px rgba(6, 58, 120, .09);

  --ab-ease: cubic-bezier(.22, .61, .36, 1);
}


/* ----------------------------------------------------------------------------
   2. SECTION SHELL — the page's vertical rhythm
   ------------------------------------------------------------------------- */
.ab-section {
  padding: var(--ab-section) 0;
  position: relative;
  /* The header is position:fixed (see header.css), so a plain #id jump would
     land a section flush against the top of the viewport with ~92px of it
     hidden behind the header. Applied to the shared rule rather than one
     section, since any of this page's ids (#story, #leadership, etc.) could
     reasonably be linked to directly. */
  scroll-margin-top: 100px;
}

.ab-section--sm { padding: var(--ab-section-sm) 0; }

/* Alternating ground. Deliberately a wash, not a colour block. */
.ab-section--tint {
  background: var(--ab-tint);
  border-block: 1px solid var(--ab-line);
}

/* The only dark grounds on the page: the founder statement and the closing
   outlook. Two navy bands across twelve sections keeps the page light. */
.ab-section--navy {
  background: linear-gradient(160deg, var(--ab-navy) 0%, var(--ab-navy) 52%, var(--ab-navy-mid) 130%);
  color: var(--ab-white);
}


/* ----------------------------------------------------------------------------
   3. TYPOGRAPHY — six roles, nothing else
   ------------------------------------------------------------------------- */

/* 3.1 eyebrow */
.ab-eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.1rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ab-navy);
}

.ab-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  flex: none;
  background: var(--ab-accent);
}

.ab-section--navy .ab-eyebrow { color: var(--ab-tint-2); }

/* 3.2 section title */
.ab-title {
  font-size: clamp(1.85rem, 3.4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.035em;
  color: var(--ab-navy);
  margin: 0 0 1rem;
  max-width: 20ch;
}

.ab-title--wide { max-width: 28ch; }
.ab-section--navy .ab-title { color: var(--ab-white); }
.ab-title em { font-style: normal; color: var(--ab-accent); }
.ab-section--navy .ab-title em { color: var(--ab-tint-2); }

/* 3.3 large statement — used where a sentence carries a whole section */
.ab-statement {
  font-size: clamp(1.35rem, 2.5vw, 2.05rem);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -.025em;
  color: var(--ab-navy);
  margin: 0;
  max-width: 24ch;
}

.ab-section--navy .ab-statement { color: var(--ab-white); max-width: 26ch; }
.ab-statement em { font-style: normal; color: var(--ab-accent); }
.ab-section--navy .ab-statement em { color: var(--ab-tint-2); }

/* 3.4 lede */
.ab-lede {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.75;
  color: var(--ab-ink-2);
  margin: 0 0 1.1rem;
  max-width: 58ch;
}

.ab-lede:last-child { margin-bottom: 0; }
.ab-lede strong { color: var(--ab-ink); font-weight: 700; }
.ab-section--navy .ab-lede { color: rgba(255, 255, 255, .78); }
.ab-section--navy .ab-lede strong { color: var(--ab-white); }

/* 3.5 body */
.ab-body {
  font-size: .97rem;
  line-height: 1.8;
  color: var(--ab-ink-2);
  margin: 0 0 1rem;
  max-width: 62ch;
}

.ab-body:last-child { margin-bottom: 0; }
.ab-body strong { color: var(--ab-ink); font-weight: 700; }
.ab-section--navy .ab-body { color: rgba(255, 255, 255, .74); }

/* 3.6 meta / caption */
.ab-meta {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ab-ink-2);
  margin: 0;
}

.ab-section--navy .ab-meta { color: rgba(255, 255, 255, .62); }

/* Section head block — the same construction on every section */
.ab-head { margin-bottom: var(--ab-head-gap); }
.ab-head .ab-lede { margin-bottom: 0; }


/* ----------------------------------------------------------------------------
   4. SHARED PIECES
   ------------------------------------------------------------------------- */

/* 4.1 icon tile — one size, one weight, everywhere on the page */
.ab-ico {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--ab-r-sm);
  background: var(--ab-tint-2);
  color: var(--ab-navy);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}

.ab-section--navy .ab-ico {
  background: rgba(255, 255, 255, .12);
  color: var(--ab-white);
}

/* 4.2 rule */
.ab-divider {
  height: 1px;
  background: var(--ab-line);
  border: 0;
  margin: var(--ab-block-gap) 0;
}

/* Secondary head inside a section that carries two related blocks */
.ab-head--sub { margin-bottom: var(--ab-block-gap); }

/* A statement followed by supporting copy */
.ab-statement + .ab-body { margin-top: .9rem; }

.ab-rule {
  height: 1px;
  background: var(--ab-line);
  border: 0;
  margin: 0;
}

.ab-section--navy .ab-rule { background: rgba(255, 255, 255, .18); }

/* 4.3 index numeral — the page's counting device */
.ab-index {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--ab-accent);
}

.ab-section--navy .ab-index { color: var(--ab-tint-2); }

/* 4.4 inline link */
.ab-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .92rem;
  font-weight: 700;
  color: var(--ab-navy);
  text-decoration: none;
}

.ab-link i { transition: transform .3s var(--ab-ease); }
.ab-link:hover { color: var(--ab-navy-hover); }
.ab-link:hover i { transform: translateX(4px); }


/* ----------------------------------------------------------------------------
   5. HERO
   ------------------------------------------------------------------------- */
.ab-hero {
  position: relative;
  padding: clamp(2.75rem, 5vw, 4.25rem) 0 var(--ab-section);
  /* Starts on the body background, not pure white. With the header now
     transparent, the strip behind it shows the body ground — beginning the
     hero on #FFFFFF would have reinstated the same seam on this page. */
  background: linear-gradient(180deg, var(--color-bg, #F8FAFD) 0%, var(--ab-tint) 100%);
  overflow: hidden;
}

/* A single quiet device: a fine navy dot grid, masked away from the type. */
.ab-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(6, 58, 120, .13) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(115% 85% at 88% 0%, #000 0%, transparent 62%);
  mask-image: radial-gradient(115% 85% at 88% 0%, #000 0%, transparent 62%);
  pointer-events: none;
}

.ab-hero > .container { position: relative; z-index: 1; }

/* .ab-crumb rules removed — the breadcrumbs were taken off both the About
   and Contact pages, and no page uses these selectors any more. */

.ab-hero-title {
  font-size: clamp(2.4rem, 5.4vw, 4.35rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.045em;
  color: var(--ab-navy);
  margin: 0 0 1.5rem;
  max-width: 15ch;
}

.ab-hero-title em { font-style: normal; color: var(--ab-accent); }

.ab-hero-lede {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.7;
  color: var(--ab-ink-2);
  margin: 0;
  max-width: 46ch;
}

/* Hero footer strip — the page's one-line answer to "what is TAAMSI". */
.ab-hero-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
  border-top: 1px solid var(--ab-line);
}

.ab-hero-strip > div {
  padding: 1.35rem 1.75rem 0 0;
  border-right: 1px solid var(--ab-line);
}

.ab-hero-strip > div:last-child { border-right: 0; padding-right: 0; }
.ab-hero-strip > div:not(:first-child) { padding-left: 1.75rem; }

.ab-strip-k {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ab-navy);
  line-height: 1.1;
}

.ab-strip-v {
  display: block;
  margin-top: .35rem;
  font-size: .84rem;
  color: var(--ab-ink-2);
}

@media (max-width: 767.98px) {
  .ab-hero-title { max-width: none; }
  .ab-hero-strip { grid-template-columns: 1fr; }
  .ab-hero-strip > div {
    padding: 1rem 0 !important;
    border-right: 0;
    border-bottom: 1px solid var(--ab-line);
  }
  .ab-hero-strip > div:last-child { border-bottom: 0; }
}


/* ----------------------------------------------------------------------------
   6. WHO WE ARE — the definition block
   ------------------------------------------------------------------------- */
.ab-define {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.ab-define-term {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--ab-navy);
}

.ab-define-term h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--ab-navy);
  margin: 0;
}

.ab-define-term span {
  font-size: .84rem;
  font-weight: 600;
  font-style: italic;
  color: var(--ab-ink-2);
}

/* Fact rail — the quick answer, scannable in seconds */
.ab-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ab-line);
}

.ab-facts li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--ab-line);
  font-size: .92rem;
}

.ab-facts dt, .ab-facts .k {
  color: var(--ab-ink-2);
  font-weight: 600;
}

.ab-facts dd, .ab-facts .v {
  margin: 0;
  color: var(--ab-navy);
  font-weight: 700;
}

@media (max-width: 991.98px) {
  .ab-define { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .ab-facts li { grid-template-columns: 1fr; gap: .15rem; }
}


/* ----------------------------------------------------------------------------
   7. ABOUT US — the purpose ladder
   ------------------------------------------------------------------------- */
.ab-ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: rung;
}

.ab-rung {
  display: grid;
  grid-template-columns: minmax(0, 88px) minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-top: 1px solid var(--ab-line);
}

.ab-rung:last-child { border-bottom: 1px solid var(--ab-line); }

.ab-rung-n {
  font-size: 2.35rem;
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--ab-line);
  transition: -webkit-text-stroke-color .35s var(--ab-ease);
}

.ab-rung:hover .ab-rung-n { -webkit-text-stroke-color: var(--ab-navy); }

.ab-rung h3 {
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ab-navy);
  margin: 0 0 .4rem;
}

.ab-rung .ab-meta { margin-bottom: .55rem; }

@media (max-width: 991.98px) {
  .ab-rung { grid-template-columns: 64px minmax(0, 1fr); }
  .ab-rung > *:nth-child(3) { grid-column: 2; margin-top: .5rem; }
  .ab-rung-n { font-size: 1.8rem; }
}

@media (max-width: 575.98px) {
  .ab-rung { grid-template-columns: 1fr; gap: .5rem; }
  .ab-rung > *:nth-child(3) { grid-column: 1; }
}


/* ----------------------------------------------------------------------------
   8. STATEMENT — the founder's note
   ----------------------------------------------------------------------------
   The attribution now sits beneath the quote, as a signature does.

   That only works if the quote itself fills the width, otherwise the void
   simply moves. So the quote runs the full container AND scales up with it:
   at 1320px a 32px quote would run 82 characters per line, which stops being
   display type. Held at ~48px, lines land near 55 characters.

   BACKGROUND — four layers instead of one flat fill:
     1. base      navy gradient, deep at the top left
     2. glow      a wide soft light, off to the right
     3. grid      the hero's dot texture, masked to the upper right
     4. watermark an oversized quotation glyph at 4% white

   Each is a large soft shape, so the depth reads as atmosphere rather than
   decoration and nothing competes with the type.
   ------------------------------------------------------------------------- */
.ab-note-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
  /* 1. base */
  background:
    linear-gradient(152deg,
      #001B44 0%,
      var(--color-navy-deep, #063A78) 42%,
      #0A3D80 88%,
      var(--ab-navy-mid) 125%);
}

/* 2. glow — a single wide light source, low and to the right */
.ab-note-band::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -55%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(88, 150, 224, .30) 0%,
    rgba(88, 150, 224, .10) 42%,
    transparent 68%);
  pointer-events: none;
  z-index: -1;
}

/* 3. dot grid — same texture as the hero, so the two belong together */
.ab-note-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(75% 110% at 96% 6%, #000 0%, transparent 62%);
  mask-image: radial-gradient(75% 110% at 96% 6%, #000 0%, transparent 62%);
  pointer-events: none;
  z-index: -1;
}

.ab-note-band > .container { position: relative; z-index: 1; }

.ab-note {
  position: relative;
  margin: 0;
  padding: 0;
}

/* 4. watermark — oversized, cropped by the band, barely there */
.ab-note::before {
  content: "\201D";
  position: absolute;
  top: -.28em;
  right: -.06em;
  font-size: clamp(9rem, 22vw, 19rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.06em;
  /* Lifted from .045 now that the quote is smaller: the right side of the
     band needs it to carry weight rather than sit empty. */
  color: rgba(255, 255, 255, .06);
  pointer-events: none;
  user-select: none;
  z-index: -1;
}

.ab-note .ab-eyebrow {
  margin-bottom: 1.4rem;
  color: var(--ab-tint-2);
}

.ab-note .ab-eyebrow::before { background: var(--ab-tint-2); }

/* Was 48px at weight 700 with -.035em tracking — display settings, which on a
   personal remark read as a marketing headline rather than someone speaking.

   Reset to editorial: smaller, lighter, with the leading and tracking opened
   up to suit. Weight 500 is already in the loaded font, so this costs nothing.

     size     48px -> 30px
     weight   700  -> 500
     leading  1.26 -> 1.5    lighter weight needs more air between lines
     tracking -.035em -> -.006em   tight tracking exists to hold heavy display
                                   type together; at 500 it just cramps

   Emphasis now comes from a weight step as well as colour, so the clause
   still reads if the colour is ever changed. */
.ab-note-quote {
  font-size: clamp(1.1rem, 2.3vw, 1.875rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.006em;
  color: var(--ab-white);
  margin: 0;
  max-width: 46ch;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  /* Hangs the opening quotation mark into the margin so the text block aligns
     optically with the eyebrow and the signature below it, rather than being
     pushed right by a punctuation mark. */
  text-indent: -.42em;
}

.ab-note-quote em {
  font-style: normal;
  font-weight: 600;
  color: var(--ab-tint-2);
}

/* The signature line */
.ab-note-by {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: clamp(2rem, 3.6vw, 3rem);
  padding-top: clamp(1.35rem, 2.4vw, 1.85rem);
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-size: .88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .74);
}

/* Same monogram plate as the leadership grid, dark-surface variant.
   Swap for a headshot with: <img src="images/team-mohideen.jpg" alt=""> */
.ab-note-avatar {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .26);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--ab-white);
  overflow: hidden;
}

.ab-note-avatar img { width: 100%; height: 100%; object-fit: cover; }

.ab-note-by strong {
  display: block;
  color: var(--ab-white);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

@media (max-width: 991.98px) {
  /* Not "none": released to full width the line ran to 82 characters at
     768px. 58ch holds it in the readable band on tablet as well. */
  .ab-note-quote { max-width: 58ch; text-indent: 0; }
  .ab-note-band::before {
    -webkit-mask-image: radial-gradient(120% 70% at 50% 0%, #000 0%, transparent 70%);
    mask-image: radial-gradient(120% 70% at 50% 0%, #000 0%, transparent 70%);
  }
  .ab-note-band::after { right: -30%; bottom: -60%; width: 110%; }
}

@media (max-width: 575.98px) {
  .ab-note::before { font-size: 7rem; top: -.2em; }
  .ab-note-by { gap: .8rem; }
  .ab-note-avatar { width: 48px; height: 48px; font-size: .88rem; }
}


/* ----------------------------------------------------------------------------
   9. TIMELINE
   ------------------------------------------------------------------------- */
.ab-time { list-style: none; margin: 0; padding: 0; }

.ab-time-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 130px) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: 0 0 clamp(2rem, 3.5vw, 2.75rem) 0;
}

.ab-time-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2.1rem;
  bottom: 0;
  width: 1px;
  background: var(--ab-line);
}

.ab-time-item:last-child { padding-bottom: 0; }
.ab-time-item:last-child::before { display: none; }

.ab-time-year {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ab-navy);
  line-height: 1.6;
}

.ab-time-year::before {
  content: "";
  position: absolute;
  left: -4px;
  top: .55rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ab-white);
  border: 2px solid var(--ab-line);
  transition: border-color .35s var(--ab-ease);
}

.ab-time-item:hover .ab-time-year::before { border-color: var(--ab-accent); }

.ab-time-item h3 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ab-navy);
  margin: 0 0 .5rem;
  line-height: 1.4;
}

@media (max-width: 767.98px) {
  .ab-time-item { grid-template-columns: 1fr; gap: .6rem; padding-left: 1.5rem; }
  .ab-time-item::before { left: 4px; top: 1.4rem; }
  .ab-time-year { padding-left: 0; }
  .ab-time-year::before { left: -1.5rem; top: .45rem; }
}


/* ----------------------------------------------------------------------------
   10. TWO-UP — mission / vision
   ------------------------------------------------------------------------- */
.ab-twoup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-r-lg);
  background: var(--ab-white);
  overflow: hidden;
}

.ab-pane {
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border-right: 1px solid var(--ab-line);
}

.ab-pane:last-child { border-right: 0; background: var(--ab-tint); }
.ab-pane .ab-ico { margin-bottom: 1.25rem; }

.ab-pane h3 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--ab-navy);
  margin: 0 0 .75rem;
}

@media (max-width: 767.98px) {
  .ab-twoup { grid-template-columns: 1fr; }
  .ab-pane { border-right: 0; border-bottom: 1px solid var(--ab-line); }
  .ab-pane:last-child { border-bottom: 0; }
}


/* ----------------------------------------------------------------------------
   11. CHECK LIST
   ------------------------------------------------------------------------- */
.ab-checks { list-style: none; margin: 0; padding: 0; }

.ab-checks li {
  display: flex;
  gap: .75rem;
  padding: .55rem 0;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--ab-ink-2);
}

.ab-checks i {
  flex: none;
  margin-top: .22rem;
  font-size: 1rem;
  color: var(--ab-navy);
}

.ab-section--navy .ab-checks li { color: rgba(255, 255, 255, .78); }
.ab-section--navy .ab-checks i { color: var(--ab-tint-2); }


/* ----------------------------------------------------------------------------
   12. PRINCIPLES — horizontal band
   ------------------------------------------------------------------------- */
.ab-principles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--ab-line);
}

.ab-principle {
  padding: 1.75rem 1.5rem 0 0;
  border-right: 1px solid var(--ab-line);
}

.ab-principle:last-child { border-right: 0; padding-right: 0; }
.ab-principle:not(:first-child) { padding-left: 1.5rem; }

.ab-principle h3 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ab-navy);
  margin: .75rem 0 .45rem;
}

@media (max-width: 1199.98px) {
  .ab-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-principle { padding-bottom: 1.5rem; border-bottom: 1px solid var(--ab-line); }
  .ab-principle:nth-child(3n) { border-right: 0; }
  .ab-principle:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 767.98px) {
  .ab-principles { grid-template-columns: 1fr; }
  .ab-principle {
    padding: 1.25rem 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ab-line);
  }
  .ab-principle:last-child { border-bottom: 0; }
}


/* ----------------------------------------------------------------------------
   13. CONTRAST — the difference
   ------------------------------------------------------------------------- */
.ab-contrast {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-r-lg);
  overflow: hidden;
  background: var(--ab-white);
}

.ab-col {
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border-right: 1px solid var(--ab-line);
}

.ab-col:last-child { border-right: 0; background: var(--ab-tint); }

.ab-col-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-bottom: 1rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--ab-line);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ab-ink-2);
}

.ab-col:last-child .ab-col-head { color: var(--ab-navy); }

.ab-col ul { list-style: none; margin: 0; padding: 0; }

.ab-col li {
  display: flex;
  gap: .75rem;
  padding: .95rem 0;
  border-bottom: 1px dashed var(--ab-line);
  font-size: .94rem;
  line-height: 1.6;
  color: var(--ab-ink-2);
}

.ab-col li:last-child { border-bottom: 0; }
.ab-col:last-child li { color: var(--ab-ink); font-weight: 500; }
.ab-col li i { flex: none; margin-top: .18rem; color: var(--ab-line); }
.ab-col:last-child li i { color: var(--ab-navy); }

@media (max-width: 767.98px) {
  .ab-contrast { grid-template-columns: 1fr; }
  .ab-col { border-right: 0; border-bottom: 1px solid var(--ab-line); }
  .ab-col:last-child { border-bottom: 0; }
}


/* ----------------------------------------------------------------------------
   14. MATRIX — capabilities and industries share one component
   ------------------------------------------------------------------------- */
.ab-matrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--ab-line);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-r-lg);
  overflow: hidden;
}

.ab-matrix--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ab-cell {
  background: var(--ab-white);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  transition: background .3s var(--ab-ease);
}

.ab-cell:hover { background: var(--ab-tint); }

.ab-cell i {
  display: block;
  font-size: 1.2rem;
  color: var(--ab-navy);
  margin-bottom: .85rem;
}

.ab-cell h3 {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--ab-navy);
  margin: 0 0 .35rem;
}

.ab-cell p {
  margin: 0;
  font-size: .87rem;
  line-height: 1.6;
  color: var(--ab-ink-2);
}

@media (max-width: 991.98px) {
  .ab-matrix, .ab-matrix--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479.98px) {
  .ab-matrix, .ab-matrix--4 { grid-template-columns: 1fr; }
}


/* ----------------------------------------------------------------------------
   15. PEOPLE
   ------------------------------------------------------------------------- */
.ab-people {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
}

/* ---- interaction -------------------------------------------------------
   Card lift, portrait zoom, a small mouse-follow parallax, and a lift in the
   name/role/social states. Everything animates transform, opacity, colour or
   box-shadow only — no width, height, margin or position changes, so the grid
   never reflows and the work stays on the compositor.

   --px / --py are written by js/about.js on pointer move and composed into
   the same transform as the zoom, so the two never fight.                  */
.ab-person {
  background: var(--ab-white);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-r-lg);
  overflow: hidden;
  transition:
    box-shadow 420ms cubic-bezier(.22, 1, .36, 1),
    transform 420ms cubic-bezier(.22, 1, .36, 1),
    border-color 420ms cubic-bezier(.22, 1, .36, 1);
}

.ab-person:hover,
.ab-person:focus-within {
  transform: translateY(-5px);
  border-color: rgba(13, 74, 150, .22);
  box-shadow:
    0 2px 6px rgba(6, 58, 120, .04),
    0 18px 44px -20px rgba(6, 58, 120, .30);
}

.ab-portrait {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(150deg, var(--ab-tint-2), var(--ab-tint));
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--ab-line);
  /* Keeps the zoomed portrait inside its container. */
  overflow: hidden;
}

/* Targets the artwork only — a photograph now, the monogram until the
   photographs exist. Explicitly NOT `> *`, because the social rail also lives
   in this container and must stay still while the image moves. */
.ab-portrait > .ab-photo,
.ab-portrait > .ab-initials {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1);
  transition: transform 500ms cubic-bezier(.22, 1, .36, 1);
}

.ab-person:hover .ab-portrait > .ab-photo,
.ab-person:hover .ab-portrait > .ab-initials,
.ab-person:focus-within .ab-portrait > .ab-photo,
.ab-person:focus-within .ab-portrait > .ab-initials {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.05);
}

/* While the pointer is moving the transform is driven frame by frame, so the
   transition is dropped to avoid fighting it. Restored on leave for the
   settle back to centre. */
.ab-person.is-tracking .ab-portrait > .ab-photo,
.ab-person.is-tracking .ab-portrait > .ab-initials { transition: none; }

/* The monogram and the photograph occupy the SAME grid cell, with the photo
   painted over the top. If an image ever fails to load or is deleted, the
   monogram is already sitting underneath — no broken-image icon, no empty
   square, no code change needed. */
.ab-initials,
.ab-photo { grid-area: 1 / 1; }

.ab-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;   /* biases the crop toward the face */
  display: block;
}

.ab-initials {
  font-size: clamp(1.7rem, 3.5vw, 2.2rem);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--ab-navy);
  opacity: .4;
}

/* ---- social rail --------------------------------------------------------
   Sits on the left edge of the portrait, parked just outside it and sliding
   in on hover. The portrait already clips overflow, so the parked state is
   genuinely off-stage rather than merely transparent.

   Revealed by :focus-within as well as :hover — a keyboard user tabbing into
   a link brings the rail out, so the links are never unreachable.          */
.ab-social {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ab-social li {
  transform: translateX(-110%);
  opacity: 0;
  transition:
    transform 420ms cubic-bezier(.22, 1, .36, 1),
    opacity 420ms cubic-bezier(.22, 1, .36, 1);
}

/* Staggered so the rail unrolls rather than appearing as one block. */
.ab-social li:nth-child(1) { transition-delay: 0ms; }
.ab-social li:nth-child(2) { transition-delay: 45ms; }
.ab-social li:nth-child(3) { transition-delay: 90ms; }
.ab-social li:nth-child(4) { transition-delay: 135ms; }
.ab-social li:nth-child(5) { transition-delay: 180ms; }

.ab-person:hover .ab-social li,
.ab-person:focus-within .ab-social li {
  transform: translateX(0);
  opacity: 1;
}

.ab-social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--ab-white);
  /* Square against the card edge, softened on the side that stands free. */
  border-radius: 0 8px 8px 0;
  color: var(--ab-navy);
  font-size: .88rem;
  text-decoration: none;
  box-shadow: 2px 0 10px -4px rgba(6, 58, 120, .22);
  transition:
    background 260ms cubic-bezier(.22, 1, .36, 1),
    color 260ms cubic-bezier(.22, 1, .36, 1);
}

.ab-social a:hover {
  background: var(--ab-navy);
  color: var(--ab-white);
}

.ab-social a:focus-visible {
  outline: 2px solid var(--ab-navy);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

.ab-person-body { padding: 1.25rem 1.4rem 1.5rem; }

.ab-person h3 {
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ab-navy);
  margin: 0 0 .2rem;
}

.ab-role {
  display: block;
  opacity: .82;
  transition: opacity 420ms cubic-bezier(.22, 1, .36, 1);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ab-accent);
  margin-bottom: .7rem;
}

.ab-person p {
  margin: 0;
  font-size: .87rem;
  line-height: 1.65;
  color: var(--ab-ink-2);
}

/* Text response on hover. These sat beside the social block and were removed
   with it; restored here, where they belong with the card's own type. */
.ab-person:hover h3,
.ab-person:focus-within h3 { transform: translateY(-2px); }

.ab-person:hover .ab-role,
.ab-person:focus-within .ab-role { opacity: 1; }

/* Tablet and below: hover only, no tracking. Any parallax offset left behind
   by a resize is zeroed so a card cannot stay nudged off-centre. */
@media (hover: none), (pointer: coarse), (max-width: 991.98px) {
  .ab-portrait > .ab-photo,
  .ab-portrait > .ab-initials { --px: 0px; --py: 0px; }
}

@media (max-width: 991.98px) { .ab-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .ab-people { grid-template-columns: 1fr; } }


/* ----------------------------------------------------------------------------
   16. OUTLOOK — closing navy band, three columns
   ------------------------------------------------------------------------- */
.ab-outlook {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.ab-outlook > div {
  padding: 1.75rem 1.75rem 0 0;
  border-right: 1px solid rgba(255, 255, 255, .18);
}

.ab-outlook > div:last-child { border-right: 0; padding-right: 0; }
.ab-outlook > div:not(:first-child) { padding-left: 1.75rem; }

.ab-outlook h3 {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ab-white);
  margin: .7rem 0 .5rem;
}

@media (max-width: 767.98px) {
  .ab-outlook { grid-template-columns: 1fr; }
  .ab-outlook > div {
    padding: 1.5rem 0 !important;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
  }
  .ab-outlook > div:last-child { border-bottom: 0; }
}


/* ----------------------------------------------------------------------------
   17. CTA
   ------------------------------------------------------------------------- */
.ab-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3.25rem);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-r-lg);
  background: var(--ab-white);
  box-shadow: var(--ab-shadow);
}

.ab-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  justify-content: flex-end;
}

.ab-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border-radius: var(--ab-r-sm);
  font-size: .93rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .3s var(--ab-ease), color .3s var(--ab-ease), border-color .3s var(--ab-ease);
}

.ab-btn--primary { background: var(--ab-navy); color: var(--ab-white); }
.ab-btn--primary:hover { background: var(--ab-navy-hover); color: var(--ab-white); }

.ab-btn--ghost {
  background: transparent;
  color: var(--ab-navy);
  border-color: var(--ab-line);
}

.ab-btn--ghost:hover { border-color: var(--ab-navy); color: var(--ab-navy); }

@media (max-width: 767.98px) {
  .ab-cta { grid-template-columns: 1fr; }
  .ab-cta-actions { justify-content: flex-start; }
  .ab-btn { flex: 1 1 auto; justify-content: center; }
}


/* ----------------------------------------------------------------------------
   18. MOTION SAFETY
   The page reuses the site's existing .reveal / .delay-n language, so no new
   animation system is introduced. Only hover affordances are handled here.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* No lift, no zoom, no parallax. The colour and opacity states remain, so
     hover is still legible without any movement at all. */
  .ab-person:hover,
  .ab-person:focus-within { transform: none; }

  .ab-portrait > .ab-photo,
  .ab-portrait > .ab-initials,
  .ab-person:hover .ab-portrait > .ab-photo,
  .ab-person:focus-within .ab-portrait > .ab-photo {
    transform: none !important;
    transition: none;
  }

  .ab-social { transition: none; }
  .ab-social li { transition: none; }

  .ab-person:hover h3,
  .ab-person:focus-within h3 { transform: none; }

  .ab-person,
  .ab-person:hover,
  .ab-link i,
  .ab-link:hover i,
  .ab-rung-n,
  .ab-time-item:hover .ab-time-year::before,
  .ab-cell {
    transition: none !important;
    transform: none !important;
  }
}

/* ----------------------------------------------------------------------------
   HERO — the Index page's About section, reused
   ----------------------------------------------------------------------------
   Ported verbatim from index.html so both pages render from the same rules
   and cannot drift apart visually. Nothing here was redesigned.

   ONE override, below the ported block: the background.

   The navbar is `background: transparent` at rest (see .navbar-premium in
   header.css) and only becomes frosted glass on scroll. So "match the navbar
   colour" means matching what shows THROUGH it — the body ground, #F8FAFD
   (--color-bg in base.css). On index.html this section sits mid-page on
   #FFFFFF, which is correct there but would put a hard white edge directly
   under the transparent navbar here. The override below fixes exactly that
   and changes nothing else.
   ------------------------------------------------------------------------- */

/* ---- "Our Story" hover only -------------------------------------------
       Scoped by .abt-cta-row, NOT by editing the shared rule above — that
       shared rule is also used by the CTA band's "Call +91 73736 11500"
       button further down the page, and this request is explicitly for
       "Our Story" only. .abt-cta-row contains exactly two buttons (this one
       and "Know more TAAMSI", which is .btn-primary-premium, a different
       class), so this selector can't reach anything else on the page.

       Modelled on the active nav tab's restraint rather than the button's
       own default hover: no lift, no shadow-driven "floating" feel — a tab
       doesn't elevate when you land on it, it just fills in place. So the
       -3px lift and --shadow-medium from the shared hover above are
       replaced with a soft --color-sky tint (an existing design token, not
       a new colour) and a much quieter shadow. Border and text stay the
       exact same blue they already were on hover — nothing there changes. */
    .abt-cta-row .btn-outline-premium:hover {
      background: var(--color-sky, #EAF1F9);
      border-color: var(--color-primary);
      color: var(--color-primary);
      transform: none;
      box-shadow: 0 4px 14px -9px rgba(0, 42, 97, 0.22);
      transition: background-color 350ms cubic-bezier(0.4, 0, 0.2, 1),
                  border-color 350ms cubic-bezier(0.4, 0, 0.2, 1),
                  box-shadow 350ms cubic-bezier(0.4, 0, 0.2, 1);
    }

@media (prefers-reduced-motion: reduce) {
      .abt-cta-row .btn-outline-premium:hover { transition: none; }
    }

/* ---- 2. ABOUT — chapter 3: purpose, matched to the approved reference --
       Rebuilt from a single-column, no-photo composition into the two-column
       layout the reference targets: eyebrow, headline, description, pillar
       line and a quiet stat row on the left; a tall photo on the right.

       IMAGE — the reference's own photo (a hexagon/technology-icon graphic)
       was rejected on purpose: it doesn't depict people or real-world impact
       and isn't a TAAMSI asset. images/about-visual.png is used instead, per
       direct instruction — it still carries a dreamstime.com watermark
       (unlicensed preview) and must be replaced before publishing, but it is
       at least the project's own designated asset rather than a copy of the
       reference's stock graphic.

       STATISTICS — the reference shows each stat with its own circular icon.
       Kept as plain numerals instead (no icon per stat): three icons that
       just repeat "info/people/support" add visual noise without adding
       meaning, and a numerals-only treatment was already the stronger
       direction for this section. Composition/proportions follow the
       reference; this one micro-decision does not. */

    .abt-section {
      /* Top padding cut from clamp(80px,9vw,128px) — that figure was set when
         About opened cold as its own chapter. It now follows Trust, which
         already provides a settled pause, so a full editorial lead-in on top
         of Trust's bottom padding read as dead space (192px combined).
         HALVED AGAIN here (48-76px -> 24-38px) to close Gap 2 by ~50% as
         requested.

         BOTTOM padding is now ALSO reduced (was 80-128px, this round cut to
         48-72px) as part of closing the About -> EV gap — see the splitter
         comment below for the full before/after measurement. This is
         trailing whitespace after content ends, not the content itself, so
         nothing in About moves or resizes. */
      padding: clamp(24px, 2.75vw, 38px) 0 clamp(48px, 5vw, 72px);
      background: #FFFFFF;
      /* Needed as the anchor for the splitter pseudo-element below. */
      position: relative;
    }

/* ---- About -> EV splitter ---------------------------------------------
       ROOT CAUSE (measured, not guessed): the gap here was TWO stacked
       paddings, same pattern as the earlier Hero/Trust/About fix — About's
       own bottom padding (80-128px) PLUS the EV section's top padding, which
       comes from --sp-section, a token shared by several other sections
       site-wide (Divisions/Figures/etc. all use the same .sec class). At
       1440px that summed to 243px: a real "large empty gap", not a
       perception issue.

       Fixed two ways:
       1. About's bottom padding is reduced below (was 80-128px, now roughly
          half) — this is trailing whitespace AFTER content ends, not part
          of the content itself, so nothing in About moves or resizes.
       2. The EV section's top padding is overridden by ID (#ev, further
          down), NOT by editing --sp-section itself — changing the shared
          token would have silently shrunk spacing on every other section
          that reuses .sec, which the brief explicitly rules out.

       Both sections are already pure white, so there is no colour boundary
       to bridge here (unlike Hero->Trust, which crosses an actual tint).
       The "splitter" is therefore a quiet structural device, not a colour
       wash: a centre-weighted hairline that fades to nothing at both ends
       (no hard line, no full-width rule), plus one very soft radial wash
       for depth. Both sit exactly on the seam via this ::after, clipped to
       .abt-section's own box by construction — they cannot bleed into
       either section's actual content. */
    .abt-section::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: min(88%, 760px);
      height: 72px;
      pointer-events: none;
      background:
        radial-gradient(ellipse 60% 100% at 50% 100%, rgba(0, 42, 97, 0.035) 0%, transparent 72%),
        linear-gradient(90deg, transparent 0%, rgba(0, 42, 97, 0.16) 50%, transparent 100%) bottom / 100% 1px no-repeat;
    }

@media (max-width: 767.98px) {
      .abt-section::after { height: 40px; width: 82%; }
    }

@media (max-width: 767.98px) {
      /* Top halved (40px -> 20px) to match the desktop fix; bottom (60px)
         untouched — About's own closing space on mobile is unchanged. */
      .abt-section { padding: 20px 0 60px; }
    }

.abt-row {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: clamp(2.5rem, 5vw, 4.5rem);
      align-items: stretch;
    }

.abt-copy { align-self: center; }

.abt-eyebrow {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--color-accent);
      margin-bottom: 1.5rem;
    }

.abt-eyebrow::before { content: ""; width: 26px; height: 2px; flex: none; background: var(--color-accent); }

.abt-statement {
      font-size: clamp(2rem, 3.6vw, 3.1rem);
      font-weight: 800;
      line-height: 1.18;
      letter-spacing: -0.03em;
      color: var(--color-primary);
      margin: 0 0 1.25rem;
    }

.abt-statement em { font-style: normal; color: var(--color-accent); }

/* Plain flush paragraph, matching the reference's body text — the
       earlier indented pull-quote treatment is gone; this section now
       communicates asymmetry through the two-column split itself, not
       through an internal indent. */
    .abt-story p {
      font-size: 1.05rem;
      line-height: 1.75;
      color: var(--color-text-muted);
      margin: 0 0 1.5rem;
      max-width: 46ch;
    }

.abt-pillars {
      display: block;
      margin: 0 0 clamp(2rem, 4vw, 2.75rem);
      font-size: 0.88rem;
      color: var(--color-text-muted);
    }

.abt-pillars b { color: var(--color-primary); font-weight: 700; }

/* Quiet stat row — numerals only, no icons (see the note above
       .abt-section for why). Sits below the pillar line, above the CTA. */
    .abt-facts {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem clamp(2rem, 4vw, 3rem);
      margin: 0 0 clamp(2rem, 4vw, 2.75rem);
      padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
      border-top: 1px solid var(--color-border);
      list-style: none;
    }

.abt-facts li { display: flex; flex-direction: column; }

.abt-fact-n {
      font-size: 1.6rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.1;
      color: var(--color-primary);
    }

.abt-fact-n sup { font-size: 0.5em; color: var(--color-accent); margin-left: 0.05em; }

.abt-fact-l { margin-top: 0.25rem; font-size: 0.8rem; color: var(--color-text-muted); }

.abt-cta-row { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }

.abt-cta { display: inline-flex; }

/* Menu-style link, echoing the header's own nav links: plain text, no
       fill or border, a thin underline that grows in from the centre on
       hover — the same device .nav-link-custom uses (header.css), so it
       reads as "a link", not as a second, competing button. */
    /* .abt-story-link (the nav-menu-style text link) removed — "Our Story"
       is now .btn-outline-premium, an existing button class reused as-is, so
       there is nothing left here to style. */

    /* ---- right column: photo ---- */
    .abt-media {
      position: relative;
      min-height: 320px;
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: 0 22px 50px -28px rgba(6, 58, 120, 0.4);
    }

.abt-media img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 35%;
      display: block;
      /* Left-to-right reveal: transparent at the container's own left edge,
         fully opaque by ~42% across. A MASK, not a white overlay — masking
         makes the pixels genuinely transparent, so whatever sits behind
         .abt-media (the section's own white ground) shows through correctly
         regardless of exact colour, rather than relying on an overlay's
         white matching the background exactly. -webkit-mask-size/repeat are
         set explicitly rather than left to default, so the gradient always
         covers the image exactly once, edge to edge, with no ambiguity.
         Percentages (not px) keep the reveal proportional to the container
         at every width, per "strictly within the image container". */
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        rgba(0, 0, 0, 0.16) 12%,
        rgba(0, 0, 0, 0.62) 26%,
        #000 42%);
      mask-image: linear-gradient(to right,
        transparent 0%,
        rgba(0, 0, 0, 0.16) 12%,
        rgba(0, 0, 0, 0.62) 26%,
        #000 42%);
    }

@media (max-width: 991.98px) {
      .abt-row { grid-template-columns: 1fr; }
      .abt-media { order: -1; min-height: 320px; aspect-ratio: 16 / 10; }
    }

@media (max-width: 575.98px) {
      .abt-facts { gap: 1.1rem 1.75rem; }
      .abt-media { min-height: 240px; }
    }

/* ---- 4. card hover lift — applied to existing cards, layout unchanged ---- */
    .saas-card, .mart-visual, .ev-card, .abt-media, .ab-person {
      will-change: transform;
    }

/* --r-lg is declared in index.html's own inline :root and does NOT travel
   with the ported rules — it is not in base.css. Without this the hero
   image's border-radius would silently fall back to 0. Same 28px value as
   index, scoped to this page so nothing else is affected. */
.about-page { --r-lg: 28px; }

/* THE COLOUR MATCH. Scoped to .about-page so index.html is untouched.
   Same value as the body ground the transparent navbar reveals — not an
   approximation of it. */
.about-page .abt-section {
  /* The background declaration that was here is gone on purpose. This hero now
     uses the shared index hero background (css/hero-shared.css), which sets
     `background: transparent` so the fixed .mesh-gradient shows through — the
     same way index.html works. Leaving a solid colour here would have relied
     on stylesheet load order to decide which one wins.

     The padding below is unrelated to the background and still needed: the
     breadcrumb strip above this used to supply the clearance below the fixed
     header; with it gone, the hero would sit flush against the navbar. Its own
     top padding (24-38px) was sized for sitting mid-page on index. */
  padding-top: clamp(2rem, 4vw, 3.25rem);
}

/* The section's ::after hairline was a mid-page divider on index, separating
   About from the section below it. As a hero it has the page's own first
   section directly beneath, which already provides that boundary — so the
   extra rule would double it. */
.about-page .abt-section::after { display: none; }