/*!***********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/about.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   About Us page
   -------------------------------------------------------------------------
   Sections, top to bottom:
     .aboutIntro   navy band — page title, legacy card, lead copy, stats
     .philosophy   Inspirational Creation — arc photo + copy
     .why          cream band — RADIANCE acronym + Why Choose ring
     .vm           Vision / Mission around the tower on the gold disc
     .director     Managing Director profile (navy panel)
     .leaders      Leaders of Craft card rail (deep navy)
     .companies    Group of Companies tab panels
   Testimonials, Memories and Footer are the shared homepage components.
   ========================================================================= */

/* --- The navy intro band ------------------------------------------------- */

.aboutIntro {
  position: relative;
  background: #051b41;
  color: #fff;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5.5rem));
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  /* `clip` (not `hidden`) — hidden would make this a scroll container, which
     would break any sticky descendant and change how the banner measures
     itself against the viewport. */
  overflow-x: clip; /* the hero mark bleeds off the right edge */
}

/* Content rides above the traced mark. */
.aboutIntro > .shell {
  position: relative;
  z-index: 1;
}

.aboutHero {
  text-align: center;
  margin-bottom:60px;
}

.aboutHero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;

}

.aboutHero__title > span {
  display: block;
}

.aboutHero__title em {
  font-style: normal;
  color: var(--gold-500);
}

.aboutHero__label {
  display: inline-block;
  margin-top: clamp(1rem, 2.4vw, 1.8rem);
  padding: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.5em;
  text-indent: 0.5em; /* balances the trailing tracking space */
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* Legacy photo banner ------------------------------------------------------ */
/* Uses the shared .bannerOpen primitive — see "Banner opening" in globals.css
   for the mechanics and for why the height is set here rather than derived
   from an aspect-ratio. This block only carries what is specific to the About
   page: the banner's height, its scrim, and the caption and badge on top. */

/* The comp's 9:4 crop measured at the resting width, so the banner matches
   the design when it arrives and simply widens from there. Held constant
   through the opening, so the page below stays put. */
.legacyCard {
  height: clamp(320px, 42.5vw, 730px);
}

/* Scrim along the bottom edge, so the caption holds against any photograph. */
.legacyCard::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent 55%);
  opacity: 0.75;
}

.legacyCard > img {
  object-position: center 30%;
}

@media (max-width: 700px) {
  .legacyCard {
    height: clamp(280px, 62vw, 420px);
  }
}

/* Above the scrim. */
.legacyCard__caption,
.legacyCard__badge {
  z-index: 2;
}

.legacyCard__caption {
  position: absolute;
  left: clamp(1.25rem, 3vw, 2.75rem);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 65px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.legacyCard__accent {
  display: block;
  color: var(--gold-500);
}

.legacyCard__badge {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.9rem;
  padding: clamp(1rem, 2.2vw, 1.9rem) clamp(1.25rem, 2.6vw, 2.4rem);
   border-top-left-radius: var(--radius);
}

.legacyCard__badgeValue {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 140px;
  line-height: 0.85;
  color: var(--gold-500);
}

.legacyCard__badgeValue sup {
  font-size: 35px;
    vertical-align: 0.7em;
    position: absolute;
    top: 10px;
    color: #ffffff;
    font-weight: 500;
}

.legacyCard__badgeLines {
 display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #bbb9b9;
    line-height: 1.2;
    padding-bottom: 8px;
}

/* Building Beyond Homes ---------------------------------------------------- */

.aboutLead {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  grid-gap: clamp(1.5rem, 4vw, 4rem);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(2.75rem, 6vw, 5.5rem);
      color: #b5c3d0;
}

.aboutLead h2.display{ color: #fff; font-size: 85px !important;}

 
.aboutLead__heading > span {
  display: block;
}

.aboutLead__copy p {
  max-width: 62ch;
  font-size: var(--fs-body);
  line-height: 1.65;
      text-align: justify;
    text-align-last: left;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: normal;
  color: rgba(255, 255, 255, 0.82);
}

.aboutLead__copy p + p {
  margin-top: 1.1em;
}

/* Stat strip ---------------------------------------------------------------- */

.aboutStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: clamp(1.5rem, 3vw, 2.5rem);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line-light);
   border-bottom: 1px solid var(--line-light);
  list-style: none;
  padding: 15px 0;
}

.aboutStat {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.8rem;
}

.aboutStat__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 140px;
  line-height: 0.85;
  color: var(--gold-500);
  position: relative;
}

/* The K / M unit — same gold, roughly half the numeral height. */
.aboutStat__unit {
  font-style: normal;
  font-size: 90px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
}

.aboutStat__value sup {
font-size: 30px;
    vertical-align: 0.8em;
    position: absolute;
    top: 0;
    color: #fff;
    font-weight: 400;
}

.aboutStat__label {
 display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #c8d2dc;
    line-height: 1.2;
    padding-bottom: 5px;
}

/* --- Inspirational Creation ---------------------------------------------- */

.philosophy {
 background-image: url('/images/about-Inspirational-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden; /* the arc bleeds past the shell */
}

.philosophy__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
  grid-gap: clamp(2rem, 5vw, 5rem);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.philosophy__media {
  position: relative;
}

/* ---- merged media: C mark behind, people photo in front ----------------
   The section carries data-progress, so --sp runs 0 → 1 as it travels the
   viewport (0.5 = centred). Both layers read it: the mark drifts up and
   turns, the photo eases the other way, so the stack shears apart in depth
   as you scroll. Below 900px / reduced motion --sp is never set and the
   var() fallbacks freeze everything at its resting pose. */

.philosophyMedia {
  /* The generic [data-reveal] fade would slide the whole stack — the child
     layers own the entrance instead. */
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
      padding: 231px 0 0 118px;
}

/* -- back layer: the C mark -- */
.philosophyMedia__mark {
    position: absolute;
    top: 43%;
    left: 9%;
    width: 68%;
  transform: translateY(-50%)
    translateY(calc((var(--sp, 0.5) - 0.5) * -70px))
    rotate(calc((var(--sp, 0.5) - 0.5) * 12deg));
  will-change: transform;
  z-index: 0;
}

.philosophyMedia__mark img {
  display: block;
  width: 100%;
  animation: philosophyFloat 7s ease-in-out infinite alternate;
  /* Entrance: blooms in once the stack is visible. */
  opacity: 0;
  scale: 0.6;
  transition: opacity 1s var(--ease), scale 1.2s var(--ease);
}

.philosophyMedia.is-visible .philosophyMedia__mark img {
  opacity: 1;
  scale: 1;
}

@keyframes philosophyFloat {
  from { translate: 0 -10px; }
  to   { translate: 0 12px; }
}

/* -- front layer: the people photo -- */
.philosophyMedia__photo {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  transform: translateY(calc((var(--sp, 0.5) - 0.5) * 46px));
  will-change: transform, clip-path;
  /* Entrance: wipe up from the baseline. */
  -webkit-clip-path: inset(100% 0 0 0 round var(--radius-lg));
          clip-path: inset(100% 0 0 0 round var(--radius-lg));
  transition: -webkit-clip-path 1.1s var(--ease) 0.12s;
  transition: clip-path 1.1s var(--ease) 0.12s;
  transition: clip-path 1.1s var(--ease) 0.12s, -webkit-clip-path 1.1s var(--ease) 0.12s;
}

.philosophyMedia.is-visible .philosophyMedia__photo {
  -webkit-clip-path: inset(0 0 0 0 round 0px);
          clip-path: inset(0 0 0 0 round 0px);
}

.philosophyMedia__photo img {
  display: block;
  width: 80%;
  /* Ken Burns settle: arrives zoomed and eases out to rest. */
  scale: 1;
  transition: scale 1.6s var(--ease) 0.12s;
}

.philosophyMedia.is-visible .philosophyMedia__photo img {
  scale: 1;
}

/* Rearm instantly when scrolled fully out, matching the site's
   repeat-on-return reveals — no half-played transition on the way back. */
.philosophyMedia:not(.is-visible) .philosophyMedia__photo,
.philosophyMedia:not(.is-visible) .philosophyMedia__photo img,
.philosophyMedia:not(.is-visible) .philosophyMedia__mark img {
  transition-duration: 0s;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .philosophyMedia__photo,
  .philosophyMedia__mark {
    transform: none;
    -webkit-clip-path: none;
            clip-path: none;
    transition: none;
  }
  .philosophyMedia__mark { transform: translateY(-50%); }
  .philosophyMedia__mark img {
    animation: none;
    opacity: 1;
    scale: 1;
    transition: none;
  }
  .philosophyMedia__photo img {
    scale: 1;
    transition: none;
  }
}

.philosophy__title {
  margin-bottom: clamp(1rem, 2vw, 1.6rem);
}

.philosophy__title > span {
  display: block;
}

.philosophy__lead {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 1.1em;
}

.philosophy__body {
  max-width: 64ch;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-500);
  text-align: justify;
    text-align-last: left;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: normal;
   
}

.philosophy__body + .philosophy__body {
  margin-top: 1.1em;
}

.philosophy__body strong {
  font-weight: 700;
  color: var(--ink-900);
}

/* --- Cream band: acronym + Why Choose ------------------------------------ */

.why {
  background: url(/images/why-bg.jpg) no-repeat center 0;
background-size: cover;
  /* The ring is wider and taller than the column it is centred in. The band
     had `overflow: hidden` and zero bottom padding, which sliced the bottom of
     the arcs clean off at the section edge — `clip` on the x-axis alone keeps
     the horizontal bleed contained without cutting vertically, and the bottom
     padding gives the arcs somewhere to land. */
  padding-block: clamp(3.5rem, 7vw, 7rem) clamp(2rem, 5vw, 4rem);
  overflow-x: clip;
}

/* RADIANCE, letter by letter */

.acronym {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-gap: 0;
  gap: 0;
  list-style: none;
  text-align: left;
}

/* Each letter is an <img>; the type rules below are the fallback for when a
   letter has no artwork. --acronym-cap is the cap height both paths share, so
   swapping one for the other does not move the captions. */
.acronym {
  --acronym-cap: 180px;
}

/* Optical kerning. The grid gives every letter an equal track, but the glyphs
   are not equal widths — the narrow I leaves a hole, so its neighbour is
   nudged back. `translate` rather than a negative margin: a margin would also
   widen the item's box by the same amount and change where its caption wraps. */
.acronym__item:nth-child(5) {
  translate: -20px 0;
}

.acronym__letter {
  display: block;
  font-weight: 1000;
  font-size: var(--acronym-cap);
  line-height: 1;
  color: #0f457f;
  text-shadow: 0.04em 0.06em 0.02em rgba(6, 34, 74, 0.16);
}

/* The SVGs are trimmed to the glyph box, so height *is* the cap height and
   the letters sit on a shared baseline whatever their width. */
.acronym__letterImg {
  display: block;
  height: var(--acronym-cap);
  width: auto;
 
}

.acronym__letter--gold {
  color: var(--gold-500);
  text-shadow: 0.04em 0.06em 0.02em rgba(224, 144, 12, 0.22);
}

 

.acronym__caption {
       margin-top: 0;
    font-size: 18px;
    line-height: 1.4;
    color: var(--ink-700);
    padding-right: 12px;
    font-weight: 600;
    padding-left: 15px;
}

.acronym__caption strong {
      font-weight: 800;
    color: #064477;
}

.why__rule {
  border: 0;
  height: 1px;
  background: rgba(6, 34, 74, 0.14);
  margin-block: clamp(2.5rem, 5vw, 4.5rem) 0;
}

/* The ring ------------------------------------------------------------------ */

.why__ring {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 680px) minmax(0, 1fr);
  grid-gap: clamp(1.5rem, 3.5vw, 3.5rem);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: flex-start;
  padding-top: 80px;
}

/* The two columns share a wrapper in the markup so phones can run all six
   features as ONE swipe row. Above the phone breakpoint the wrapper is
   transparent to the grid, and each block is placed by column rather than by
   DOM order — which is what keeps the centre between the two columns even
   though it comes last in the markup. */
.why__rails {
  display: contents;
}

.why__col--left {
  grid-column: 1;
  grid-row: 1;
}

.why__center {
  grid-column: 2;
  grid-row: 1;
}

.why__col--right {
  grid-column: 3;
  grid-row: 1;
}

.why__col {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4.5vw, 4rem);
  list-style: none;
}

.whyFeature__title {
    font-family: var(--font-display);
    font-size: 27px;
    font-weight: 500;
    line-height: 1;
    color: #0f2c5f;
}

.whyFeature__title > span {
  display: block;
}

.whyFeature__body {
  margin-top: 0.55rem;
    max-width: 20ch;
    font-size: 18px;
    line-height: 1.5;
    color: #3c3120;
    font-weight: 600;
}

.whyFeature--left {
  text-align: right;
}

.whyFeature--left .whyFeature__body {
  margin-left: auto;
}

/*
  The six features sit on an arc, so each row is offset by hand.

  All of these use the standalone `translate` property rather than `transform`:
  the items carry [data-reveal], whose fade-up animates `transform`, and a
  transform declared here would be overwritten the moment the reveal fires.

  Offsets are clamped so they collapse on narrow screens instead of pushing the
  copy out of the column.
*/

/* Top row sits furthest out along the arc. */
.why__col--left .whyFeature:nth-child(1) { translate: clamp(0px, 12vw, 173px) 0; }
.why__col--right .whyFeature:nth-child(1) { translate: clamp(-173px, 12vw, 0px) 0; left: -135px;
    position: relative;
    top: 8px; }

/* Middle features push toward the ring's centre line */
.why__col--left .whyFeature:nth-child(2) {     translate: clamp clamp(16px, 134.4px, 16px) 0;
    position: relative;  top: 10px;}
    .why__col--left .whyFeature:nth-child(3) {   
    position: relative;  top: 45px;}
.why__col--right .whyFeature:nth-child(2) {     translate: clamp(1rem, 3vw, 4rem) 0;
    top: 44px;  position: relative;  left: -42px;}
.why__col--right .whyFeature:nth-child(3) { position: relative;  top: 90px;}

.why__center {
  position: relative;
  text-align: center;
  padding:350px 0 0;
}

/* The old closed halo is gone — the mark here is the traced LegacyMark C,
   styled under .why__arc below. */

.why__heading {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--navy-500);
}

.why__heading > span {
  display: block;
  font-size: 50px;
}

.why__heading > .why__headingBig {
  font-size: 100px;
}

/* The traced C mark — the same LegacyMark SVG as the homepage Legacy band —
   sitting behind the heading and photo.

   The draw loop itself — @keyframes legacyArcTrace and the .arcMark__line dash
   setup — lives in components.css with the homepage Legacy band. Only the
   placement and timing are set here; the animation is re-declared against this
   wrapper because the homepage rules are scoped to .legacy__arc. */
.why__arc {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: min(620px, 128%);
  aspect-ratio: 985 / 1058; /* matches the LegacyMark viewBox */
  z-index: 0;
  pointer-events: none;
  overflow: visible;

  --arc-draw: 1.8s;
  --arc-hold: 1.6s;
  --arc-step: 0.15s;
}

/* The generic [data-reveal] fade would slide the mark — the draw is the
   animation here, so the svg stays put and fully opaque. */
.why__arc[data-reveal] {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* Cream fill on the C silhouette only — the traced contours stay unfilled
   outlines. Scoped to this mounting so the homepage mark is untouched.

   `fill` is not driven by the dash animation, so it is faded in on a delay
   instead of snapping to full strength while the strokes are still drawing. */
.why__arc .arcMark__fill {
  fill: #eadfce;
  fill-opacity: 0;
  transition: fill-opacity 0.8s var(--ease) 0.6s;
}

.why__arc.is-visible .arcMark__fill {
  fill-opacity: 0.7;
}

.why__arc.is-visible .arcMark__line {
  animation: legacyArcTrace calc(var(--arc-draw) * 2 + var(--arc-hold))
    cubic-bezier(0.22, 0.61, 0.21, 1) infinite;
}

.why__arc.is-visible .arcMark__line:nth-child(3) { animation-delay: calc(var(--arc-step) * 1); }
.why__arc.is-visible .arcMark__line:nth-child(4) { animation-delay: calc(var(--arc-step) * 2); }
.why__arc.is-visible .arcMark__line:nth-child(5) { animation-delay: calc(var(--arc-step) * 3); }
.why__arc.is-visible .arcMark__line:nth-child(6) { animation-delay: calc(var(--arc-step) * 4); }
.why__arc.is-visible .arcMark__line:nth-child(7) { animation-delay: calc(var(--arc-step) * 5); }
.why__arc.is-visible .arcMark__line:nth-child(8) { animation-delay: calc(var(--arc-step) * 6); }

/* Off-screen the loop stops and the mark rearms empty, so re-entering starts a
   clean pass instead of resuming mid-cycle. */
.why__arc:not(.is-visible) .arcMark__line {
  animation: none;
  stroke-dashoffset: 1;
}

/* A looping ambient animation is exactly what this opts out of — draw once and
   leave it at full length. */
@media (prefers-reduced-motion: reduce) {
  .why__arc.is-visible .arcMark__line,
  .why__arc:not(.is-visible) .arcMark__line {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* Heading and photo ride above the mark. */
.why__heading,
.why__media {
  position: relative;
  z-index: 1;
}

.why__media {
  position: relative;
  margin-top: 0;
}
.why__heading{padding: 0 0 0 70px;}

.why__media > img {
  display: block;
  width: min(630px, 98%);
  margin-inline: auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  /* Feathered edges let the photo sit in the cream field like the comp's cutout. */
  -webkit-mask: linear-gradient(#000 78%, transparent 100%);
  mask: linear-gradient(#000 78%, transparent 100%);
}

/* --- Vision / Mission ------------------------------------------------------ */
/*
   Layered back to front: ghost words, three stacked discs, tower.
   --vmp (-1 → 1) is written by VisionMission on scroll; each layer multiplies
   it by a different amount so they drift apart as the section passes.
*/

.vm {
  --vmp: 0;
  /* One token for the tower's width — the ring diameters are all multiples of
     it, so the whole arrangement scales together. */
  --vm-tower-w: clamp(260px, 30vw, 440px);
  position: relative;
  background: #fff;
  overflow: hidden;
  padding-bottom: 0; /* the tower stands on the section edge */
}

/*
   The three discs. Diameters and offsets are multiples of the tower width and
   were read off the comp: each disc is smaller than the one behind it and sits
   lower, so only a crescent of each shows above the next.

   Anchored to the section floor, which is also the tower's base — the negative
   `bottom` values are how much of each disc runs off the bottom edge.
*/
.vm__rings[data-reveal] {
  opacity: 1;
  transform: none;
}

.vm__rings {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--vm-tower-w);

  /*
    The explicit height is load-bearing twice over. Every child here is
    absolutely positioned, so without it this box collapses to zero and:

      1. The discs' `bottom` percentages resolve against it — at zero they all
         flatten to `bottom: 0` and pile up on the same line.
      2. The [data-reveal] observer uses `threshold: 0.08`, which a zero-area
         element can never meet, so `.is-visible` never lands and the gold disc
         stays at `opacity: 0` — invisible.

    Square, so the offsets below read as multiples of the tower width.
  */
  height: var(--vm-tower-w);

  translate: -50% 0;
  pointer-events: none;
}

.vm__ring,
.vm__disc {
  position: absolute;
  left: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.vm__ring--outer {
  width: 204%;
  bottom: -55%;
  background: #f8f9fa;
  translate: -50% calc(var(--vmp) * 26px);
}

.vm__ring--mid {
  width: 172%;
  bottom: -71%;
  background: #f0f2f4;
  translate: -50% calc(var(--vmp) * 12px);
}

.vm__ghost {
  position: absolute;
  bottom: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(6rem, 18vw, 17rem);
  line-height: 0.78;
  text-transform: uppercase;
  color: rgba(6, 34, 74, 0.055);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}

/* Opposing drift — the two words pull apart as the section scrolls through. */
.vm__ghost--left {
    left: 147px;
    translate: calc(var(--vmp) * -70px) 0;
    text-align: right;
     z-index: 100;
}

.vm__ghost--right {
  right: -1.5%;
  translate: calc(var(--vmp) * 70px) 0;
  z-index: 100;
}

.vm__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-gap: clamp(1.75rem, 4vw, 4rem);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}

.vm__block {
  padding-top: clamp(1rem, 4vw, 3.5rem);
}

.vm__block--vision {
  text-align: right;
}

.vm__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4.6rem);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--navy-400);
}

.vm__title > span {
  display: block;
}

.vm__eyebrow {
  font-size: 0.34em;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.vm__body {
  margin-top: 1rem;
  max-width: 38ch;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-500);
}

.vm__block--vision .vm__body {
  margin-left: auto;
}

/* --- Tower and disc --- */

.vm__media {
  position: relative;
  width: var(--vm-tower-w);
  align-self: end;
}

/* Gold disc — the innermost of the three, sitting just behind the tower. */
.vm__disc {
  width: 154%;
  bottom: -87%;
  background: radial-gradient(
    circle at 34% 30%,
    var(--gold-400) 0%,
    var(--gold-500) 55%,
    var(--gold-600) 100%
  );
  translate: -50% calc(var(--vmp) * -34px);

  /* Entrance: swells up from behind the tower. `scale` is the standalone
     property so it composes with the parallax `translate` above instead of
     one overwriting the other. */
  scale: 0.6;
  opacity: 0;
  transition: scale 1.2s cubic-bezier(0.22, 1.2, 0.36, 1),
    opacity 0.7s var(--ease);
}

/* The looping breathe starts after the swell has landed, so it takes over the
   `scale` the transition finished on rather than fighting it. */
.vm__rings.is-visible .vm__disc {
  scale: 1;
  opacity: 1;
  animation: vmDiscBreathe 9s ease-in-out 1.2s infinite;
}

@keyframes vmDiscBreathe {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.035;
  }
}

/*
   The tower is a cut-out PNG, so no frame or shadow — it reads as standing in
   the space. It rises a little faster than the disc it stands on, which is
   what sells the depth.
*/
.vm__media > img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  translate: 0 calc(var(--vmp) * 5px);

  /* Entrance: wipes up from the base rather than fading in.

     `inset()` insets are top/right/bottom/left, so a *top* inset of 100% is
     what collapses the visible band onto the bottom edge — animating it to 0
     grows the band upward. Insetting the bottom instead would grow it
     downward from the top, which is the opposite of what this wants. */
  -webkit-clip-path: inset(100% 0 0 0);
          clip-path: inset(100% 0 0 0);
  transition: -webkit-clip-path 1.1s cubic-bezier(0.22, 0.61, 0.21, 1) 0.15s;
  transition: clip-path 1.1s cubic-bezier(0.22, 0.61, 0.21, 1) 0.15s;
  transition: clip-path 1.1s cubic-bezier(0.22, 0.61, 0.21, 1) 0.15s, -webkit-clip-path 1.1s cubic-bezier(0.22, 0.61, 0.21, 1) 0.15s;
}

.vm__media.is-visible > img {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .vm__media > img {
    -webkit-clip-path: none;
            clip-path: none;
    transition: none;
  }

  .vm__disc,
  .vm__rings.is-visible .vm__disc {
    scale: 1;
    opacity: 1;
    animation: none;
    transition: none;
  }
}

/* --- Managing Director ----------------------------------------------------- */

.director {
  position: relative;
  background: url(/images/md-bg.jpg) no-repeat;
  color: #fff;
  padding-top: clamp(3.5rem, 7vw, 7rem);
  overflow: hidden;
  background-size: cover;
}

.director__inner {
  position: relative;
  z-index: 1;
}
.director h2.display {
    color: #fff;
}

/* Director's name renders in sentence case, not the display default uppercase. */
.director h2.display.director__name,
.director__name {
  text-transform: none;
}
.director__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-gap: 0;
  gap: 0;
 
}

 

.director__role {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-500);
}

.director__body {
  margin-top: 1.4em;
  max-width: 50ch;
  font-size: var(--fs-body);
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.78);
}

.director__body strong {
  font-weight: 700;
  color: #fff;
}

.director__media {
  align-self: end;
  margin-left: -100px;
}

.director__media > img {
  display: block;
  width: min(860px, 100%);
  margin-inline: auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* --- Leaders of Craft ------------------------------------------------------ */
/*
   A continuous marquee rather than a scroller: the row loops on its own and can
   also be dragged. useDragMarquee owns the transform; everything here is
   presentation.
*/

.leaders {
  background: var(--navy-900);
  color: #fff;
  padding-block: clamp(3.5rem, 7vw, 7rem);
  overflow: hidden;
  display: none;
}

.leaders__head {
  text-align: center;
  margin-bottom: clamp(2rem, 4.5vw, 3.75rem);
}
.leaders h2{color: #fff;}

.leaders__sub {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 35px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

/*
   The edge cards dissolve into the navy instead of being cut off. A mask is
   used rather than gradient overlays so the fade works whatever is behind it.
*/
.leaders__viewport {
  position: relative;
  overflow: hidden;
  cursor: -webkit-grab;
  cursor: grab;
  /* The row is dragged, so a swipe should move it rather than scroll the page
     horizontally, and text must not select mid-drag. */
  touch-action: pan-y;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 11%,
    #000 89%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 11%,
    #000 89%,
    transparent 100%
  );
}

.leaders__viewport.is-dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.leaders__track {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  width: max-content;
  will-change: transform;
}

.leaders__set {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
}

.leaderCard {
  position: relative;
  flex: 0 0 clamp(240px, 21vw, 400px);
  border-radius: 12px;
  overflow: hidden;
  background: #dfe3e8;
  box-shadow: var(--shadow);
}

.leaderCard > img {
  display: block;
  width: 100%;
  aspect-ratio: 40 / 43;
  object-fit: cover;
  object-position: center top;
  -webkit-user-drag: none;
}

/* Near full-width plate sitting just off the card's bottom edge. */
.leaderCard__plate {
  position: absolute;
  left: 2.5%;
  right: 3%;
  bottom: 3.5%;
  padding: 0.7rem 1.25rem 0.75rem;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.leaderCard__plate strong {
  display: block;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: #0b3059;
}

.leaderCard__plate span {
  display: block;
  margin-top: 0.2rem;
  font-size:14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #313131;
}

/* --- Group of Companies ---------------------------------------------------- */

.companies {
  background: #fff;
}

.companies__head {
  text-align: center;
}

.companies__title {
  color: var(--navy-500);
}

.companies__sub {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 35px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-900);
}

.companies__tabs {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3.25rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.companies__tab {
  position: relative;
  padding: 1.1rem 0.25rem 1.05rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 45px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy-300);
  transition: color 0.3s var(--ease);
}

.companies__tab:hover {
  color: var(--navy-500);
}

.companies__tab.is-active {
  font-weight: 700;
  color: var(--navy-500);
}

.companies__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 4px;
  border-radius: 2px;
  background: var(--navy-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.companies__tab.is-active::after {
  transform: scaleX(1);
}

.companies__panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  grid-gap: clamp(2rem, 4.5vw, 4.5rem);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  animation: companiesIn 0.5s var(--ease) both;
}

@keyframes companiesIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.companies__media > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4;
  object-fit: cover;
 
}

.companies__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.15;
  color: #1b4a88;
}

.companies__name > span {
  display: block;
}

.companies__tag {
  font-family: var(--font-display);
  margin-top: 0.5rem;
  font-size:30px;
  font-weight: 500;
  color: var(--ink-700);
}

.companies__body {
  margin-top: 1.2em;
  max-width: 48ch;
  font-size: 20px;
  line-height: 1.65;
  
}

.companies__link {
  margin-top: 1.4em;
    font-size: 20px;
    color: #0f2c5f;
}

.companies__link a {
  font-weight: 700;
  color: var(--navy-500);
}

.companies__link a:hover {
  text-decoration: underline;
}

/* =========================================================================
   Responsive
   ========================================================================= */

   @media (max-width: 1680px) {
 .whyFeature__title { font-size: 27px; }
   .aboutHero__title {  font-size: 70px;}
   .aboutLead h2.display{ color: #fff; font-size: 75px !important;}
   .acronym__letterImg { height: 120px;}
   .acronym__caption { font-size: 16px;}
   .vm__ghost { font-size: 204px;}
   .vm__ghost--right {  right: 3.5%;}
   .leaderCard__plate strong{font-size: 24px;}
   .companies__tab {  font-size: 35px;}
   
  }


     @media (max-width: 1480px) {
         .aboutLead h2.display{ color: #fff; font-size: 70px !important;}
 .whyFeature__title { font-size: 27px; }
   .aboutHero__title {  font-size: 65px;}
   .legacyCard__caption {  font-size: 55px;}
   .aboutLead__heading { font-size: 70px;}
   .aboutStat__value { font-size: 125px;}
   .philosophy__body { font-size: 16px;}
   .acronym__caption {  font-size : 15px;}
.whyFeature__body {  font-size: 15px;}
.director__body {  font-size: 15px;}
.leaderCard__plate strong {  font-size: 22px;}
.companies__tab {  font-size : 35px;}
.companies__body{  font-size: 16px;}
.vm__ghost{    font-size: 140px;}
.vm__ghost--right { right: 6.5%;}
.acronym__letterImg {  height: 110px;}
.acronym__caption {
    padding-right: 23px;  padding-left : 9px; }
.vm__body {  max-width: 27ch;}

  }

  @media (max-width: 1150px) {
  .philosophy .philosophy__copy{padding: 0 50px; order: 1;}
  .acronym__caption {     font-size: 12px; }
  .why__col--left .whyFeature:nth-child(1) {  translate: 0; }
   .why__center {   order: 2;     padding : 40px 0 0;}
   .why__col--left .whyFeature:nth-child(3) {  top: 0; }
   .why__col {  flex-direction: inherit;}
   .philosophyMedia__mark img {  width: 76%;}
   .aboutStat__value {   font-size: 110px; }
   .philosophyMedia__photo img {  width: 50%;}
    .philosophy .philosophyMedia {order: 2;}
    .aboutStat__unit {  font-size: 75px;} 
    .aboutStat__label {  font-size: 13px;}
    .philosophy__body {  max-width: 85ch;}
        .why__col {   justify-content: space-around; }
        .why__col--right .whyFeature:nth-child(1) {  left: auto;}
        .philosophy {  background-size: 100%;  background-position: 0 bottom;  background-color: #fbfbfb;}
        .why__col--left .whyFeature:nth-child(2) {  top: 0; }
        .why__col--right .whyFeature:nth-child(2) {  top: auto;}
        .why__col--right .whyFeature:nth-child(3) {   top: auto; }
        .why__heading > span {  font-size: 30px; }
        .why__heading > .why__headingBig {   font-size: 70px; }
        .why__heading {  padding: 89px 0 0 70px; }
            .why__arc {  width: min(520px, 82vw);   top: 40%; }
            .vm__media { order: 3; }
            .director__body  {  max-width: 100%;}
                .aboutLead__heading  {   font-size: 65px;  }
              .director__media > img {  width: min(600px, 100%);}
            h2.display {   font-size: 65px !important;  }
                .leaderCard { flex: 0 0 clamp(280px, 21vw, 400px);}
                .companies__tab {   font-size: 28px; }
               .story__quote {  font-size: 18px; }
               .stars svg{width: 35px; height: 35px;}
               .googleG {  width: 70px;   height: 70px;} 
               .companies__media > img {  aspect-ratio: 3 / 2;}
               .leaderCard__plate strong{font-size: 18px;}
               .leaderCard__plate span {font-size: 12px;}
               .acronym__letterImg {  height: 96px;}
  }

@media (max-width: 1200px) {
  .companies__body {   max-width: 80%;}
  .aboutLead {
    grid-template-columns: 1fr;
  }

  .aboutLead__heading {
    text-align: left;
  }

  .philosophy__inner {
    grid-template-columns: 1fr;
  }

  .why__ring {
    grid-template-columns: 1fr;
  }

  /* One column — the blocks stack in flow order again. */
  .why__col--left,
  .why__center,
  .why__col--right {
    grid-column: 1;
    grid-row: auto;
  }

  
  /* Single column — the arc offsets would only break the left edge. */
  .why__col--left .whyFeature,
  .why__col--right .whyFeature { translate: none; }
  .whyFeature--left { text-align: left; }
  .whyFeature--left .whyFeature__body { margin-left: 0; }
  .why__col { gap: 1.75rem; padding-block: 1.5rem; }
 
  .vm__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .vm__block--vision { text-align: center; }
  .vm__block--vision .vm__body { margin-inline: auto; }
  .vm__block--mission .vm__body { margin-inline: auto; }
  .vm__media { margin-inline: auto; }
  .vm__ghost { display: none; }
  /* Only the gold disc survives the single-column layout — the pale greys have
     nothing to sit behind once the copy stacks. */
  .vm__ring { display: none; }

  /* Single column — the parallax offsets have no depth to sell and just push
     layers out of alignment. */
  .vm__disc { translate: -50% 0; }
  .vm__media > img { translate: 0 0; }

  .director__inner {
    grid-template-columns: 1fr;
  }

  .director__copy {
    padding-bottom: 0;
  }

  .companies__panel {
    grid-template-columns: 1fr;
  }
  .leaderCard__plate strong{font-size: 18px;}
}

@media (max-width: 900px) {
  .aboutStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2rem;
  }
.legacyCard__badgeValue {  font-size: 125px;}
  .aboutStat {
    justify-content: flex-start;
  }

  .legacyCard__badgeLines {  font-size: 13px;}


  .legacyCard__badge {
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
  }

  /* Phones read the acronym as a plain vertical list — one row per letter,
     mark beside its caption (see .acronym__item below). It used to be a
     sideways swipe rail, and the leftovers of that rail were what killed
     touch scrolling here: the rows stacked inside a box with
     `overflow-y: hidden`, so the list was clipped, and `touch-action: pan-x`
     told the browser a vertical drag started in this section was not the
     page's to scroll. Nothing here may set overflow or touch-action. */
  .acronym {
    --acronym-cap: clamp(72px, 20vw, 120px);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-gap: 1.25rem;
    gap: 1.25rem;
    margin-left: 2px;
  }

  .why {
    background: url(/images/why-bg-m.jpg) no-repeat center 0;}

  .acronym__caption {
    padding-left: 0;
    padding-right: 0;
  }


  .acronym__letterImg {
    display: block;
    height: auto;
    width: auto;
}

.acronym__item {
  display: flex;
        align-items: center;
        gap: 20px;
        width: 100%;
    }
    .acronym__letter {
      width: 20%;
}

    .acronym__caption {
        font-size: 16px;
    }

  /* Both feature columns become ONE swipe row. `display: contents` on the
     columns hands their six <li> straight to the rail, so all six share a
     single scroller and the reader swipes once through them. The rail bleeds
     to both screen edges, so a card can scroll clear of the gutter and show
     there is more beside it.

     Both overflow axes are declared: with only overflow-x set the browser
     computes overflow-y to `auto` too, and a vertical drag inside the rail
     would go nowhere instead of scrolling the page.

     The arc offsets (translate / top / left) that place the features around
     the ring on desktop are cleared here — in a row they would only push
     cards out of their own scroller. */
  .why__ring {
    padding-top: clamp(1.5rem, 6vw, 3rem);
  }

  .why__rails {
    display: flex;
    gap: 1rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block: 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .why__rails::-webkit-scrollbar {
    display: none;
  }

  /* The columns themselves disappear; their cards are the rail's children. */
  .why__col {
    display: contents;
  }

  .why__col .whyFeature {
    position: static;
    top: auto;
    left: auto;
    translate: none;
    flex: 0 0 auto;
    width: clamp(224px, 64vw, 320px);
    scroll-snap-align: start;
    /* A card, so each feature reads as its own slide over the band's photo. */
    padding: 1.1rem 1.15rem;
    border-radius: var(--radius);
   
  }

  .why__col .whyFeature__body {
    max-width: none;
  }



      .aboutHero__title {
        font-size: 55px;
    }

  /* At four columns the 5th letter leads the second row, so the optical nudge
     would just break the left edge. */
  .acronym__item:nth-child(5) {
    translate: none;
  }

  .companies__tabs {
    flex-direction: column;
    gap: 0;
    align-items: center;
  }

  .companies__tab {
    width: 100%;
    text-align: center;
  }

  .companies__tab::after {
    right: 25%;
    left: 25%;
  }
      .legacyCard__caption {
        font-size: 45px;
    }
    .aboutLead__heading > span { display: inline-block; padding-right: 5px;}
    .aboutLead__heading {   font-size: 51px;  }
     .companies__tabs {
    justify-content: flex-start;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
    .companies__tab {  text-align: left;         width: auto; }
  .companies__tabs > * {
    flex: 0 0 auto;
  }
  .legacyCard__badge {
    position: absolute;  right: 0;  top: auto; bottom: 0;}
    .legacyCard__badgeLines {  color: #fff;}
    .legacyCard__badgeLines {  text-shadow: 0 0px 5px black;  }
        .aboutStat__value {  font-size: 85px;  }
       .aboutStat__unit {  font-size: 55px;  }
       .aboutStat__value sup { font-size: 22px;  top: 0px;}
           .philosophy__body {  font-size: 14px;  }
           .why__col--right .whyFeature:nth-child(1) { top: 0; }
           .why__col--right .whyFeature:nth-child(2) {  translate: 0;  left: 0; }
           .leaders__sub {  font-size: 28px;}
           .leaderCard__plate span{font-size: 13px;}
           .companies__sub {  font-size: 28px;}
              .aboutLead h2.display{ color: #fff; font-size: 55px !important;}

}

@media (max-width: 680px) {
     .aboutLead h2.display{ color: #fff; font-size: 30px !important;}
  .philosophyMedia.is-visible .philosophyMedia__photo {
    margin-left: -49px;
}
  .whyFeature__title {  font-size: 25px;  }
  .companies__sub {  font-size: 25px;}
      .whyFeature__body {    font-size: 14px;  }
.aboutHero__title {
        font-size: 40px;
    }
    .legacyCard__badgeValue {
        font-size: 85px;
    }
        .legacyCard__caption {
        font-size: 37px;
    }
        .legacyCard__badgeLines {
        font-size: 12px;
    }
    h2.display {
        font-size:40px !important;
    }
        .philosophyMedia__photo img {
        width: 86%;
    }
.philosophyMedia__mark {   top: 46%;   left: 20%;    width: 86%;}
    .philosophy {
        background-size: 188%;
        background-position: 0 bottom;   background-color: #fbfbfb;  }
    .companies__tab {    font-size: 23px;  }
    .companies__tag{  font-size: 25px; line-height: 1;}
    .stars svg{width: 25px; height: 25px;}
    .stories__head{margin: 0 0 60px; padding:0;}
   .leaderCard__plate strong{font-size: 18px;}
   .legacyCard__badge {  right: 0;}
     .director__media {
     margin-left: 0; }
         .aboutStat__value {  font-size: 70px; }
             .aboutStat__unit { font-size: 38px;   }
             .acronym{gap: 10px;}
    .why {
        background: url(/images/why-bg-m.jpg) no-repeat center bottom;
        background-size: 150%;  background-color: #f0ece3;
    }
     .companies__body {  max-width: 100%;  text-align: justify;  }
     .director {
    position: relative;
    background: url(/images/md-bg.jpg) no-repeat;
    color: #fff;
    padding-top: clamp(3.5rem, 7vw, 7rem);
    overflow: hidden;
    background-size: 150%;
    background-position: center bottom;
    background-color: #041d46;
}
.director__body {    text-align: justify; }
  }


  @media (max-width: 480px) {
.philosophy .philosophy__copy {  padding: 0 40px 60px;}
  .philosophy {  background-size: 297%;}
   .legacyCard__badge {  gap: 20px;}
       .legacyCard__badgeValue {   font-size: 50px;  }
       .legacyCard__badgeValue sup {  font-size: 27px;  top: 0;}
           .legacyCard__badgeLines {  font-size: 9px;  }
               .aboutStat__label {   font-size: 9px;  }
               .acronym__item {   opacity: 1;   transform: none; }
                   .why__heading > span {   font-size: 25px;  }
                   .why__heading > .why__headingBig {   font-size: 57px;  }
                     .philosophy .philosophy__copy {   padding: 0 30px 60px;  } 
                         .philosophy__body {   max-width: 100%;  text-align: justify; }
            .philosophy {  background-image : url(/images/about-Inspirational-bg-m.jpg); background-position: 0 bottom; background-size: 100%;} 

  }

/* ---- Group of Companies: prev/next arrows on phones ----------------------
   Above 680px the wrapper is transparent to layout and the arrows are off, so
   the tab bar is untouched. Below it the wrapper becomes the row: arrow, the
   scrolling tab strip, arrow. */
.companies__nav {
  display: contents;
}

.companies__arrow {
  display: none;
}

@media (max-width: 680px) {
  .companies__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: clamp(1.5rem, 5vw, 2rem);
  }

  /* The bar's own top margin moved to the wrapper, so the arrows sit level
     with the rules rather than below them. */
  .companies__nav .companies__tabs {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
  }

  .companies__arrow {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: none;
    color: var(--navy-500);
    cursor: pointer;
    transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease);
  }

  /* Chevron drawn from two borders on the inner span — no icon file. */
  .companies__arrow span {
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
  }

  .companies__arrow--prev span {
    transform: rotate(135deg);
    margin-left: 2px;
  }

  .companies__arrow--next span {
    transform: rotate(-45deg);
    margin-right: 2px;
  }

  .companies__arrow:disabled {
    opacity: 0.3;
    cursor: default;
  }

  /* The strip scrolls to the selected tab; the bar itself stays clean. */
  .companies__tabs {
    scrollbar-width: none;
  }

  .companies__tabs::-webkit-scrollbar {
    display: none;
  }
  .leaderCard{flex:0 0 clamp(210px, 21vw, 400px);}
  .leaderCard__plate strong{font-size: 13px;}
  .leaderCard__plate span{font-size: 10px;}
  .companies__body {    font-size : 14px;  }
  .companies__link {   font-size: 15px;}
      .leaders__sub {    margin: 0; }
}

/* ---- Group of Companies tabs on phones: one full label at a time ---------
   The labels are long ("Facility Management Services"), so a sideways strip
   always cut the text off at the edges. On phones only the selected tab is
   shown, full width and allowed to wrap, and the prev/next arrows either
   side switch company. Last in the file so it wins over the strip rules. */
@media (max-width: 680px) {
  .companies__nav .companies__tabs {
    justify-content: center;
    overflow: visible;
    white-space: normal;
  }

  .companies__nav .companies__tab {
    display: none;
  }

  .companies__nav .companies__tab.is-active {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    padding-inline: 0.25rem;
    font-size: clamp(18px, 5.6vw, 23px);
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .companies__nav .companies__tab::after {
    left: 20%;
    right: 20%;
  }
  .philosophyMedia {
    padding: 110px 0 0 118px;
}
.why__rails {  touch-action: inherit;}
.acronym__letter {  width: 17%;  }
}