/* =====================================================================
   About Us — inside page (about-us.html)
   ---------------------------------------------------------------------
   Loaded AFTER main.css, which owns the design tokens, the shared nav and
   footer styling, the #site-waves background rule and the [data-reveal]
   entrance system. Only what's unique to this page lives here.

   This page is content from the printed report (PDF p.06-09) rebuilt for
   the web, so it deliberately borrows the report's existing vocabulary
   rather than inventing a second one:
     * full-bleed photo section opening the page, title sitting directly
       on the image (same pattern as .about / .trust on the homepage)
     * the gradient pill on the section label, exactly as the print
       "ABOUT US" chip is set
     * flat corners on everything box-like (explicit client correction),
       the one exception being the Journey block, which is a rounded
       gradient panel in the printed spread
     * the blue/green/yellow accent trio used for section rules
     * [data-reveal] on section blocks so entrance animation matches the
       rest of the site for free

   TYPE SCALE — fixed px, set by the client against the print spread:
     20px  section headings  ("Who We Are", "Our Purpose, Vision, and Values")
     30px  block headings    (Purpose / Vision / Values / Promise, stat numbers)
     16px  body copy and stat labels
   The hero and the Key Highlights headline are the two "banner" sizes and
   stay fluid. Only the <=760px breakpoint steps the fixed sizes down.
   ===================================================================== */

:root {
  --abt-hair: rgba(37, 64, 143, 0.14);
  --abt-ink: #1b2733;
  --abt-muted: #5b6a78;
  --abt-faint: #8c98a4;
  --abt-cyan: #45b6e0;
}

/* the nav is position:fixed, so every page needs its own top offset --
   there is no shared spacer element to inherit */
.abt-page { padding-top: 0; }

/* ---- container / row / col ------------------------------------------
   A deliberately small Bootstrap-shaped grid (client asked for the
   familiar `container > row > col-xl-*` flow). It lives here rather than
   in main.css because this is the only page using it; main.css defines no
   .container/.row/.col-* so there is nothing to collide with.
   `col-xl-6` is full width until the xl breakpoint, then splits — that's
   what makes Purpose and Vision sit two-in-a-row on desktop and stack on
   anything narrower. */
.container {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 6vw;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -14px;
}
[class*="col-"] {
  width: 100%;
  padding: 0 14px;
}
.col-xl-12 { flex: 0 0 100%; max-width: 100%; }
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 1000px) {
  .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
  .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
}

/* ---- shared section furniture --------------------------------------- */

/* The label is the print chip: a yellow-to-cyan gradient pill with dark
   type inside. The trailing rule this used to carry is gone — the client
   asked for the pill on its own (a chip plus a rule reads as two separate
   devices fighting for the same slot). */
.abt-label {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--abt-ink);
  background: linear-gradient(90deg, #f6e372 0%, #d9e88a 42%, #8fd9e4 100%);
  border-radius: 999px;
  padding: 8px 25px;
  margin: 0 0 1.4rem;
}
.abt-label--light { color: var(--abt-ink); }

/* 20px section heading — "Who We Are", "Our Purpose, Vision, and Values" */
.abt-eyebrow {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--brand-blue);
  margin: 0 0 1.2rem;
}

/* 30px block heading — Purpose / Vision / Values / Promise */
.abt-block__title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--brand-blue);
  margin: 0 0 10px;
}

/* short rule closing a block, same accent as the homepage dividers */
.abt-rule {
  display: block;
  width: 72px;
  height: 2px;
  background: #44c8f5;
  margin-top: 5px;
}
/* full-width hairline above the Promise statement, as in the print block */
.abt-promise__divider {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--abt-hair);
  margin: 1.8rem 0 1.4rem;
}

.abt-section { padding: 0 0 30px;}

/* ---- 1. page hero ----------------------------------------------------
   Full-bleed photograph with the title on it, matching how .about and
   .trust open on the homepage. Not 100vh: this is an inside page and the
   reader arrived wanting content, so the hero states the subject and gets
   out of the way. */
.abt-hero {
  position: relative;
  min-height: min(78vh, 720px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.abt-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}
/* scrim reads as a graded wash from the bottom-left, so the title has
   contrast without flattening the whole photograph */
.abt-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(75deg, rgba(12, 32, 24, 0.82) 0%, rgba(12, 32, 24, 0.45) 42%, rgba(12, 32, 24, 0.05) 72%),
    linear-gradient(0deg, rgba(12, 32, 24, 0.6) 0%, rgba(12, 32, 24, 0) 55%);
}
.abt-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 6vw clamp(2.6rem, 6vw, 5rem);
  max-width: 1500px;
  margin: 0 auto;
}
.abt-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 57px;
  line-height: 1.08;
  color: #fff;
  margin: 0;
  max-width: 25ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

/* ---- 2. who we are ---------------------------------------------------
   SINGLE COLUMN, FULL WIDTH — both are explicit client instructions, and
   together they rule out the two usual ways of controlling line length.

   History, so this isn't "fixed" back: pass 1 set this copy in two columns
   (column-count: 2); the client asked for single column. Pass 2 kept one
   column but capped the measure at 78ch; the client asked for the content
   to run all the way left to right. So there is deliberately NO max-width
   and NO column-count on any text block here.

   The long measure that results is compensated with a generous
   line-height (1.8) — the main thing that keeps a long line trackable is
   vertical separation between lines, not width. */
.abt-who {
  background: #fff;
  position: relative;
  z-index: 1;
  padding-top: 40px;
}
.abt-prose p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--abt-muted);
  margin: 0 0 1.3rem;
}
.abt-prose p:last-child { margin-bottom: 0; }

/* wide photo band closing the section. Placeholder art for now — the
   final plate is swapped in later, so this is a plain <img> and not a
   background-image, to keep the swap a one-line change. */
.abt-figure {
  margin: clamp(2rem, 4vw, 3.2rem) 0 0;
  overflow: hidden;
}
.abt-figure img {
  display: block;
  width: 100%;
  height: clamp(240px, 34vw, 460px);
  object-fit: cover;
}

/* ---- 3. purpose / vision / values / promise -------------------------
   Print sets these in two tall columns; on the web the client asked for
   Purpose + Vision side by side, then Values full width, then Promise
   full width — which also lets the five Values run as a horizontal icon
   row instead of the print's vertical stack.

   NOTE ON THE VALUES ICONS: assets/img/ holds inspire / challenge /
   excel / collaborate, but innovate.svg has never been supplied (a gap
   this project's handoff has tracked since Round 8). The Innovate slot
   below therefore points at a stand-in icon and is flagged in the markup;
   swap the src when the real file lands. */
.abt-pvv {
  position: relative;
  background: #fff;
}
.abt-block {
  height: 100%;
  padding-bottom: 20px;
}
.abt-block__text {
  font-size: 16px;
  line-height: 1.8;
  color: var(--abt-muted);
  margin: 0;
}

/* Values — five items across, each an icon over an uppercase label */
.abt-values {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* cells are ruled, not gapped — the hairlines are what tie the five
     values together as one band (same device as the stats grid below) */
  gap: 0;
}
/* left-aligned, not centred: the first value has to start on the page's
   left edge, in line with the "Values" heading above it. Centring the
   contents of each cell pushed it inwards by half a column. */
.abt-values li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  text-align: left;
  padding-left: 1.6rem;
  border-right: 1px solid var(--abt-hair);
}
.abt-values li:first-child { padding-left: 0; }
.abt-values li:last-child{
  border-right: none;
}
.abt-values img {
  width: 46px;
  height: 46px;
  display: block;
}
.abt-values span {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Promise: the three supplied icons sit inline with their captions, as
   in the print spread. The icons ship with #034ea2 baked into their own
   <style> tag rather than as currentColor, so a CSS `color` on the <img>
   does nothing — and the client has said the icons' own colour must not
   change, so they are used as-is. */
/* inline-flex so the row is only as wide as Caring/Sharing/Growing
   actually reach — the rule under it is this element's own bottom border,
   which is what keeps it from running the full width of the section. */
.abt-promise {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2.6rem;
  margin: 1.4rem 0 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--abt-hair);
}
.abt-promise__item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.abt-promise__item img { width: 46px; height: 46px; display: block; }
.abt-promise__caption {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--abt-ink);
  margin: 0;
}
.abt-promise__statement {
  font-size: 16px;
  line-height: 1.8;
  color: var(--abt-muted);
  margin: 0;
}

/* ---- 4. journey and legacy ------------------------------------------
   The printed spread runs this as one rounded gradient panel (yellow ->
   green -> teal) with the four phases zig-zagging down it and hand-drawn
   arrows linking them. Rebuilt here as a 2-column grid with the phases
   placed into a serpentine order and SVG arrows in the empty cells:
   1978-1990 (top right) -> 1990-2000s (left) -> 2011-2023 (below it) ->
   2023 Onwards (right). Below 1000px the grid collapses to one column and
   the arrows are dropped — a vertical stack already reads in order. */
.abt-journey { background: #fff; }
.abt-journey__stage {
  position: relative;
  background: linear-gradient(115deg, #f7ef8f 0%, #e6ef9c 20%, #c6e7ac 44%, #a9e1cf 66%, #a6dfe9 86%, #cfeff6 100%);
  padding: 40px 55px;
}
.abt-journey__intro {
  background: #fff;
  border-radius: 22px;
  padding: 1.5rem 1.9rem;
  max-width: 560px;
  box-shadow: 0 18px 40px rgba(16, 51, 34, 0.08);
}
.abt-journey__intro-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--brand-blue);
  margin: 0 0 0.5rem;
}
.abt-journey__intro p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--abt-muted);
  margin: 0;
}

/* Serpentine, as a card | arrow | card grid: the top line runs left to
   right, the connector drops down the right-hand column, and the bottom
   line runs back right to left. The middle column is only as wide as a
   connector, so the phases either side still share the space evenly.

   DOM order stays chronological (1978-1990 -> 1990-2000s -> 2011-2023 ->
   2023 Onwards) and the visual reversal of the bottom line is done with
   grid placement alone — so the reading order a screen reader or a
   keyboard user gets is still the order of the journey, and the single
   column under 767px falls out correctly with no reordering. */
.abt-journey__grid {
  margin-top: clamp(2rem, 4vw, 3.4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: clamp(1.2rem, 2.5vw, 2.4rem);
  row-gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}
.abt-phase { position: relative; }
.abt-phase--origin      { grid-column: 1; grid-row: 1; }
.abt-phase--expansion   { grid-column: 3; grid-row: 1; }
.abt-phase--integration { grid-column: 3; grid-row: 3; }
.abt-phase--specialty   { grid-column: 1; grid-row: 3; }

/* era chip — the print's rounded blue tag */
.abt-phase__era {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #3aa9dd, #6fc9e8);
  border-radius: 999px;
  padding: 0.42rem 1.25rem;
  margin: 0 0 1.1rem;
  font-variant-numeric: tabular-nums;
}
.abt-phase--specialty .abt-phase__era { background: linear-gradient(90deg, #2f9ed6, #8ad3e6); }
.abt-phase__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--abt-ink);
  margin: 0 0 0.9rem;
  text-transform: uppercase;
}
.abt-phase ul { list-style: none; margin: 0; padding: 0; }
.abt-phase li {
  position: relative;
  font-size: 16px;
  line-height: 1.6;
  color: #33424f;
  padding-left: 1.1rem;
  margin-bottom: 0.6rem;
}
.abt-phase li:last-child { margin-bottom: 0; }
.abt-phase li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-blue);
}

/* the three connectors: two straight ones in the middle column, and the
   turn that carries the eye from the end of the first line back to the
   start of the second. */
.abt-journey__arrow {
  display: block;
  color: #3aa9dd;
  pointer-events: none;
}
.abt-journey__arrow svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* sits in the auto-width middle column, level with the era chips so it
   points between the two cards rather than at their body copy */
.abt-journey__arrow--across {
  grid-column: 2;
  grid-row: 1;
  width: clamp(48px, 6vw, 92px);
  height: 34px;
  margin-top: 0.4rem;
}
/* same artwork, flipped: the bottom line reads right to left */
.abt-journey__arrow--back {
  grid-row: 3;
  transform: scaleX(-1);
}

/* the drop down the right-hand column, between the two lines */
.abt-journey__arrow--down {
  grid-column: 3;
  grid-row: 2;
  justify-self: center;
  width: 34px;
  height: clamp(56px, 7vw, 96px);
}

/* ---- 5. key highlights ----------------------------------------------
   The printed page is a night shot of the plant with the numbers laid
   over it, so this uses the photograph as the section background with a
   dark wash for legibility. Numbers 30px / labels 16px, and every cell
   carries a hairline on all four sides so the block reads as one ruled
   table rather than 17 loose figures. */
.abt-highlights {
  position: relative;
  color: #fff;
  background: #06131c;
  isolation: isolate;
  padding-top: 40px;
  
}
.abt-highlights__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.abt-highlights__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(4, 12, 18, 0.92) 0%, rgba(4, 12, 18, 0.72) 45%, rgba(4, 12, 18, 0) 100%),
    linear-gradient(180deg, rgba(4, 12, 18, 0.85) 0%, rgba(4, 12, 18, 0) 40%, rgba(4, 12, 18, 0.8) 100%);
}
/* banner-scale headline, same fluid ramp as the hero title */
.abt-highlights__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
/* Fixed column counts rather than auto-fit: the rules below are switched
   off per column position with :nth-child, which needs a column count the
   stylesheet knows. auto-fit would make it depend on the viewport width
   and the wrong cells would lose their rules. 17 figures don't divide
   evenly, so the last row runs short — that's intended, there are no
   filler cells padding it out. */
.abt-highlights__grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Rules are drawn as inset segments rather than real borders, so they stop
   short of every corner and you get the open gap where four cells meet —
   a plain `border` can't do this because its edges always run corner to
   corner.

   Each cell draws only the rule on its LEFT (::before) and the one ABOVE
   it (::after), so the rules only ever land BETWEEN cells: the grid has no
   outer frame on the left, on the right, or under the last row. Which
   cells sit on those outer edges depends on the column count, so the two
   colours are custom properties and each breakpoint switches off the ones
   in its first column / first row. `:nth-child(n)` is used for the reset
   so it matches the specificity of the rules it has to override. */
.abt-stat {
  position: relative;
  padding: 1.7rem 1.5rem;
  --abt-stat-v: rgba(255, 255, 255, 0.28);
  --abt-stat-h: rgba(255, 255, 255, 0.28);
}
.abt-stat::before,
.abt-stat::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.abt-stat::before {
  top: 18px;
  bottom: 18px;
  left: 0;
  border-left: 1px solid var(--abt-stat-v);
}
.abt-stat::after {
  left: 18px;
  right: 18px;
  top: 0;
  border-top: 1px solid var(--abt-stat-h);
}
/* four columns */
.abt-stat:nth-child(4n + 1) { --abt-stat-v: transparent; }
.abt-stat:nth-child(-n + 4) { --abt-stat-h: transparent; }
.abt-stat__value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.45rem;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.abt-stat__value small {
  font-size: 0.6em;
  font-weight: 500;
}
.abt-stat__label {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}
.abt-stat__note {
  display: block;
  font-size: 16px;
}
/* the four headline figures carry the accent so the grid has a focal
   point instead of 17 equally-weighted cells */


/* ---- responsive ------------------------------------------------------ */
@media (max-width: 1100px) {
  .abt-values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the grid is four columns from the start now, so this breakpoint no
     longer steps it down (or re-maps which cells drop their rules) -- it
     only narrows .abt-values above. The 900px step below still applies. */
}

@media (max-width: 900px) {
  .abt-highlights__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .abt-stat:nth-child(n) {
    --abt-stat-v: rgba(255, 255, 255, 0.28);
    --abt-stat-h: rgba(255, 255, 255, 0.28);
  }
  .abt-stat:nth-child(3n + 1) { --abt-stat-v: transparent; }
  .abt-stat:nth-child(-n + 3) { --abt-stat-h: transparent; }
}

/* ---- phone (<=767) --------------------------------------------------
   One block, not two overlapping ones. There used to be a 767 rule and a
   760 rule doing related work, which left a 7px band where the journey
   had collapsed but the type hadn't stepped down yet. */
@media (max-width: 767px) {
  .abt-highlights__title{
    font-size: 26px;
  }
  .abt-journey__stage {
    padding: 20px;
  }
  .abt-section { padding: 0 0 30px; }
  .abt-who,
  .abt-highlights { padding-top: 30px; }

  .abt-hero { min-height: 62vh; }
  .abt-hero__title { max-width: none; font-size: 36px; line-height: 1.12; }
  /* 70% horizontal anchor is tuned for a wide desktop crop; on a phone
     the aggressive cover-crop pushes the subject out of frame, same fix
     as .about__image on the homepage */
  .abt-hero__media { object-position: 47% 30%; }

  .abt-block__title { font-size: 24px; }
  .abt-eyebrow,
  .abt-journey__intro-title { font-size: 18px; }

  /* VALUES — two up, every item aligned to the same left edge. On desktop
     each cell is padded off its divider and only the first is flush; that
     rule can't survive a re-flow (the item starting each row changes), so
     on a phone the dividers go and all five items share one left edge. */
  .abt-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: none;
    border-left: none;
    column-gap: 1.2rem;
  }
  .abt-values li,
  .abt-values li:first-child {
    padding: 1.1rem 0;
    border-right: none;
    border-bottom: 1px solid var(--abt-hair);
  }
  .abt-values img { width: 40px; height: 40px; }

  .abt-promise { gap: 1.2rem 1.8rem; }

  /* JOURNEY — one phase per line, oldest first. The explicit grid
     placement that builds the desktop serpentine has to be undone or the
     phases keep asking for column 3 of a one-column grid, which spawns
     implicit columns and breaks the stack. The connectors are horizontal
     devices, so they go: the order carries the sequence instead. */
  .abt-journey__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.8rem;
  }
  .abt-phase--origin,
  .abt-phase--expansion,
  .abt-phase--integration,
  .abt-phase--specialty {
    grid-column: 1;
    grid-row: auto;
  }
  .abt-journey__arrow { display: none; }
  .abt-journey__intro { max-width: none; padding: 1.2rem 1.3rem; }
  .abt-phase__era { margin-bottom: 0.7rem; }

  /* KEY HIGHLIGHTS — two up. Same segmented rules, but the first column
     and first row are now cells 1,3,5... and 1-2. */
  .abt-highlights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abt-stat { padding: 1.3rem 1.1rem; }
  .abt-stat__value { font-size: 26px; }
  .abt-stat:nth-child(n) {
    --abt-stat-v: rgba(255, 255, 255, 0.28);
    --abt-stat-h: rgba(255, 255, 255, 0.28);
  }
  .abt-stat:nth-child(odd) { --abt-stat-v: transparent; }
  .abt-stat:nth-child(-n + 2) { --abt-stat-h: transparent; }
  /* the inset that opens the corners has to shrink with the cells, or on a
     narrow column the segments are nearly all gap */
  .abt-stat::before { top: 12px; bottom: 12px; }
  .abt-stat::after { left: 12px; right: 12px; }
}