/* ==========================================================================
   SITE FINISH — the art-direction layer for the internal pages
   ==========================================================================
   Applied 2026-09-02, after the Google Ads page was approved and applied.
   The same treatment, page by page: one heading ladder (that part lives in
   site/ds.css, which every page here already loads), one editorial section
   header, a ground rhythm that makes every section boundary a change of
   ground, and per-page composition work inside each section.

   Load order on every page: the page's own stylesheets, then site/ds.css,
   then THIS FILE. It is last so it settles the cascade at matching
   specificity and needs no !important.

   Scope: our-management.html, legal-documents.html, contact-us.html,
   about-us.html. google-ads.html is NOT in here — it carries its
   own approved layer, gads-vm-v1/vm.css, and nothing below may reach it.

   Layout:
     0 · shared tokens          3 · legal-documents
     1 · the editorial header   4 · contact-us
     2 · our-management         5 · about-us
   ========================================================================== */


/* ==========================================================================
   0 · SHARED TOKENS — the same two grounds the Google Ads page uses
   ========================================================================== */
:root{
  --fx-band:      #F1F5FC;   /* the alternating band */
  --fx-band-edge: #DEE7F5;   /* the hairline that goes with it */
  --fx-pt: clamp(46px, 4.6vw, 82px);
  --fx-pb: clamp(48px, 4.8vw, 86px);
}


/* ==========================================================================
   1 · THE EDITORIAL SECTION HEADER
   --------------------------------------------------------------------------
   Every page opened its sections the same way — eyebrow, headline and a
   standing paragraph, all in one narrow left column with the other half of
   the lane empty, or all centred in a column that ran a third of the screen
   deep before any content appeared.

   One composition now, on all four pages: the eyebrow on its own line behind
   a short accent rule, the headline left and held to a readable measure, and
   the paragraph pushed to the right and set on the headline's last baseline.
   Where a header has no paragraph the headline simply keeps the row.

   It is applied through each page's OWN wrapper class, the way ds.css's
   section 4 bridges the same three parts — no markup is re-tagged.
   ========================================================================== */
.fs-who .fs-h,                 /* our-management */
.pg .hp-head{                  /* legal-documents */
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 10px clamp(28px, 3.4vw, 64px);
  max-width: none; margin-inline: 0; text-align: left;
}
/* `flex-start`, not `flex-end` as on the Google Ads page. There the standing
   paragraph was always the SHORTER of the pair, so setting it on the
   headline's last baseline read as one block. Here every paragraph is four
   or five lines against a one- or two-line headline, and bottom-alignment
   pushed the headline down to meet it — 174px below its own eyebrow on
   legal-documents, which read as a missing heading. Where the paragraph is
   the taller of the two, the pair starts together. */

.fs-who .fs-h > .k-eyebrow,
.pg .hp-head > .kick,
.pg .hp-head > .hp-eyebrow{
  flex: 1 0 100%;
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 clamp(12px, 1.2vw, 18px);
}

/* contact-us has no header wrapper at all — its eyebrow and headline are
   direct children of the section's lane, and one section (#enquiry) uses
   that lane as a two-column form layout where a two-column header would be
   wrong. So this page keeps its stacked header and takes only the accent
   rule, which is what makes the four pages read as one set. */
.px-sec > .w > .px-eye{
  display: flex; align-items: center; gap: 12px;
  margin-bottom: clamp(10px, 1vw, 14px);
}

.fs-who .fs-h > .k-eyebrow::before,
.pg .hp-head > .kick::before,
.pg .hp-head > .hp-eyebrow::before,
.px-sec > .w > .px-eye::before{
  content: ""; flex: none; width: 26px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .55;
}

.fs-who .fs-h > .k-h2,
.pg .hp-head > .hp-h{
  flex: 1 1 auto; min-width: 0; max-width: 21ch;
  margin: 0; margin-inline: 0;
}

.fs-who .fs-h > .k-sub,
.pg .hp-head > .hp-sub,
.pg .hp-head > .lede{
  flex: 0 1 42ch; min-width: 0; max-width: 42ch;
  margin: 0 0 0 auto;
  /* the paragraph starts on the headline's own cap-height, not above it */
  padding-top: .25em;
}

@media (max-width: 860px){
  .fs-who .fs-h,
  .pg .hp-head{ display: block; }

  .fs-who .fs-h > .k-eyebrow,
  .pg .hp-head > .kick,
  .pg .hp-head > .hp-eyebrow{ display: flex; margin-bottom: 11px; }

  .fs-who .fs-h > .k-h2,
  .pg .hp-head > .hp-h{ max-width: none; }

  .fs-who .fs-h > .k-sub,
  .pg .hp-head > .hp-sub,
  .pg .hp-head > .lede{
    margin: 13px 0 0; max-width: none; padding-top: 0; }
}


/* ==========================================================================
   2 · MANAGEMENT TEAM
   --------------------------------------------------------------------------
   PROBLEM  The page led with five 300px placeholder silhouettes — the
            loudest thing on a page about named, accountable people was a
            grey outline of nobody. Both section headers ran down the left
            45% of the lane with the right 55% empty, because `.lv-h` keeps
            a second column for prev/next arrows that were removed
            site-wide and never render.

   FIX      The names lead. The plate comes down from 4:5 to 1:1, which is
            about 60px off every card and puts the name and the designation
            on the first screen with it. Both headers use the second column
            they already have, so the description sits beside the heading
            instead of under it, and the void closes.
   ========================================================================== */
#who.fs-who{ padding: var(--fx-pt) 0 clamp(34px, 3.4vw, 54px); }


/* the level header already declares `minmax(0,1fr) auto` for a nav that is
   not there — give the second column the description and it becomes a real
   two-column header */
@media (min-width: 861px){
  .fs-who .lv-h{
    grid-template-columns: minmax(0, 1fr) minmax(0, 40ch);
    column-gap: clamp(28px, 3.4vw, 64px);
    align-items: end;
  }
  .fs-who .lv-h .lv-d{
    grid-column: 2; grid-row: 1 / span 3;
    align-self: end; margin: 0 0 .3em; max-width: none;
  }
}

.fs-who .lv-t{ font-size: clamp(20px, 2vw, 29px); letter-spacing: -.04em; }
.fs-who .lv-h{ padding-bottom: clamp(14px, 1.4vw, 20px);
  border-bottom: 1px solid var(--line-2); }
.fs-who .lv-body{ margin-top: clamp(18px, 2vw, 26px); }

/* the plate: square, not portrait. The silhouettes are placeholders and
   were the tallest element on the page. */
.fs-who .pr-img{ aspect-ratio: 1 / 1; }
.fs-who .pr-fig{ border-radius: 12px; }
.fs-who .pr-n{ margin-top: 12px; font-size: clamp(14.5px, 1.05vw, 16.5px); }
.fs-who .pr-d{ margin-top: 4px; font-size: clamp(11.8px, .86vw, 13px); }

/* the hero's own five, one step smaller again — they sit under a headline
   and four proof marks and must not push them off the first screen */
.fs-people .pr-img{ aspect-ratio: 1 / 1; }

/* the search row is the rule under the header, so it carries the divider */
.fs-who .fs-tools{ margin-top: clamp(20px, 2.2vw, 28px);
  padding-bottom: 16px; }

@media (max-width: 860px){
  #who.fs-who{ padding: 40px 0 34px; }
  .fs-who .lv-t{ font-size: 20px; }
  .fs-who .lv-h{ padding-bottom: 13px; }
}


/* ==========================================================================
   5 · ABOUT US
   --------------------------------------------------------------------------
   PROBLEM  This page never used --ds-h2, so the shared ladder did not reach
            it: it kept its own --ab3-h2 at 4.3vw (62px at 1440) and an 83px
            hero headline, and it ran 8238px deep — the longest page on the
            site by 2500px. Seven chapters at 62px each, every one of them a
            near-hero.

   FIX      Its own tokens are brought onto the same ladder as every other
            page, and the hero headline onto the same scale as the Google Ads
            hero, so the two hero pages of the site now speak at one volume.
            Its chapters STAY centred: this page is a narrative, the centred
            chapter head is its format, and the homepage centres too. What
            makes it part of the set is the scale, not the alignment.
   ========================================================================== */
.tc,
.tc-hero, .tc-chap, .tc-journey, .c1-reach, .c1-people, .tc-sys, .tc-who, .tc-close{
  --ab3-h2:  clamp(26px, 3.05vw, 44px);
  --ab3-h3:  clamp(19px, 1.95vw, 28px);
  --ab3-sub: clamp(15px, 1.05vw, 16.5px);
}

/* the hero, on the Google Ads hero's own scale */
.tc-h1{
  font-size: clamp(32px, min(4.55vw, 7.3vh), 64px);
  line-height: 1.0; letter-spacing: -.05em; max-width: 19ch;
}
.tc-lede{ max-width: 62ch; }

.tc-head h2{ line-height: 1.02; letter-spacing: -.042em; max-width: 20ch; }
.tc-chap .tc-head h2{ max-width: 26ch; }

/* two of the seven do not read --ab3-h2 at all — they were written with a
   literal clamp(28px, 4vw, 60px), so changing the token left them 14px
   above every other heading on the page. Same ladder, stated twice. */
.tc-who-say h2,
.tc-close h2{
  font-size: var(--ab3-h2);
  line-height: 1.02; letter-spacing: -.042em; max-width: 20ch;
}

/* seven chapters at 88px in and 88px out is 1232px of padding on one page */
.tc-chap{ padding-block: clamp(40px, 4.4vw, 72px); }

@media (max-width: 860px){
  .tc,
  .tc-hero, .tc-chap, .tc-journey, .c1-reach, .c1-people,
  .tc-sys, .tc-who, .tc-close{
    --ab3-h2:  clamp(25px, 7.1vw, 32px);
    --ab3-h3:  clamp(18px, 5vw, 22px);
    --ab3-sub: 15px;
  }
  /* on a phone this page's own media queries set literal font sizes —
     clamp(30px,10.4vw,42px) and clamp(28px,9.6vw,40px) — so changing the
     token reaches none of them. Every one is restated on the ladder. */
  /* the phone twin. This sheet is loaded last, so its BASE `letter-spacing`
     was beating about/_about.css's own phone value at equal specificity —
     a media query adds no weight (polish-layer-needs-phone-twins). Restated
     here at the page's own phone tracking. */
  .tc-h1{ font-size: clamp(28px, 8vw, 35px); max-width: none;
    letter-spacing: -.048em; }
  .tc-lede{ max-width: none; }
  .tc-head h2,
  .tc-chap .tc-head h2,
  .tc-lhead h2,
  .tc-who-say h2,
  .tc-close h2{ font-size: var(--ab3-h2); max-width: none; margin-inline: 0; }
  .tc-chap{ padding-block: 40px; }
}