/* ==========================================================================
   MECAS Techsolutions - About page
   --------------------------------------------------------------------------
   Read off a 100px ruler overlay on design/reference/07-about-us.jpg at a
   matched 1440 canvas (source is 1024 wide, so x1.406).

   HERO
     navy right edge      x 714               ->  49.6%
     navy block height    535px
     title                "ABOUT" 295 wide, 85px pitch  ->  80px, larger than
                          the other inner heroes
     rule                 63 x 5
     subtitle             451 wide, light blue           ->  30px
     intro                3 lines, 540 wide, 40px pitch   ->  26px
     image panel          x 714-1436 on white, 13px navy showing above

   OUR APPROACH
     heading              294 wide  ->  36px, centred, 40px rule under it
     intro                4 lines, 698 wide, 31px pitch   ->  25px
     value strip          5 columns of 267 from x 38, 1px dividers
     icon disc            150px, icon ~100px
     title                2 lines, 184 wide for "COLLABORATIVE" ->  21px
     text                 5 lines, 30px pitch             ->  20px

   WHAT DEFINES US
     panel                x 42-1398, bordered, ~14px radius
     heading              258 wide  ->  28px
     columns              5 across, images ~190 tall on white
     title                173 wide for "Specialised Focus" ->  20px, with a
                          35px rule at the start of its first line
     text                 4 lines, 29px pitch             ->  19px

   CTA PANEL
     x 52-1393, 155 tall, navy, ~10px radius
     icon ring            x 105-208   ->  103px
     title                379 wide    ->  26px
     text                 3 lines, 28px pitch  ->  20.5px
     button               x 866-1316 (450 x 68), 18px label

   TRUST STRIP
     x 52-1393, 102 tall, pale blue, dividers at x 417, 741, 1055
     icons                50px, text 2 lines at 30px pitch  ->  20.5px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.page-hero--about {
  grid-template-columns: minmax(0, 49.6fr) minmax(0, 50.4fr);
  min-height: 535px;
}

.page-hero--about .page-hero__panel { padding-inline-end: var(--space-5); }

/* The one inner hero drawn larger than the shared title size. Still capped to
   the panel so "ABOUT" and "MECAS" never break (see layout.css). */
.page-hero--about .page-hero__title {
  font-size: clamp(2.5rem, 1.2rem + 4.3vw, 5rem);
  font-size: min(clamp(2.5rem, 1.2rem + 4.3vw, 5rem), 13.2cqi);
  line-height: 1.06;
}

.page-hero--about .page-hero__rule {
  width: 63px;
  height: 5px;
  margin-top: 30px;
}

.page-hero--about .page-hero__subtitle {
  margin-top: 30px;
  font-size: clamp(1.25rem, 0.65rem + 1.35vw, 1.875rem);   /* 20 -> 30 */
  line-height: 1.25;
}

.page-hero--about .page-hero__intro {
  margin-top: 20px;
  max-width: 560px;
  font-size: clamp(1.0625rem, 0.5rem + 1.25vw, 1.625rem);  /* 17 -> 26 */
  line-height: 1.54;
  color: var(--ink-inverse);
}

.page-hero--about .page-hero__media { background-color: var(--navy-800); }

/* The render sits on its own white panel, inset from the band as drawn. It is
   positioned rather than in flow so its tall natural size cannot stretch the
   band past 535px. */
.page-hero--about .page-hero__media picture {
  position: absolute;
  inset: 13px 4px 10px 0;
  display: block;
  background-color: var(--white);
}

.page-hero--about .page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Section headings - centred, with a short rule
   -------------------------------------------------------------------------- */

.about-heading {
  font-size: clamp(1.625rem, 1rem + 1.4vw, 2.25rem);       /* 26 -> 36 */
  font-weight: var(--fw-bold);
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink-heading);
}

.about-heading::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: 10px auto 0;
  background-color: var(--color-rule);
}

.about-heading--sm { font-size: clamp(1.375rem, 0.95rem + 0.95vw, 1.75rem); }   /* 22 -> 28 */
.about-heading--sm::after { display: none; }

/* --------------------------------------------------------------------------
   Our approach
   -------------------------------------------------------------------------- */

.about-approach { padding-block: 40px 44px; }

.about-approach__head {
  max-width: calc(708px + 2 * var(--gutter));   /* the 698px first line, plus slack */
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}

.about-approach__intro {
  margin-top: 16px;
  font-size: clamp(1.125rem, 0.62rem + 1.15vw, 1.5625rem); /* 18 -> 25 */
  line-height: 1.26;
  color: var(--ink);
}

.about-values {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 1335px;
  margin: 42px auto 0;
  padding-inline: var(--gutter);
}

.about-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--space-4);
  text-align: center;
}

.about-value + .about-value { border-left: var(--border-w) solid var(--border); }

.about-value__icon {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: var(--radius-round);
  background-image: radial-gradient(circle at 50% 40%, var(--white), var(--blue-050) 70%);
  color: var(--ink-heading);
}

.about-value__icon svg {
  width: 100px;
  height: 100px;
  fill: none;
  stroke: currentColor;
}

.about-value__icon svg * { stroke-width: 1.2; }

.about-value__title {
  margin-top: 27px;
  font-size: clamp(1.0625rem, 0.75rem + 0.62vw, 1.3125rem); /* 17 -> 21 */
  font-weight: var(--fw-bold);
  line-height: 1.36;
  text-transform: uppercase;
  color: var(--ink-heading);
}

.about-value__text {
  margin-top: 14px;
  max-width: 222px;               /* measured: breaks after "network" */
  font-size: clamp(1rem, 0.75rem + 0.55vw, 1.25rem);       /* 16 -> 20 */
  line-height: 1.5;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   What defines us
   -------------------------------------------------------------------------- */

.about-defines-wrap { padding-inline: clamp(var(--gutter), 2.9vw, 42px); }

.about-defines {
  max-width: 1356px;
  margin-inline: auto;
  padding: 25px 18px 22px;
  border: var(--border-w) solid var(--border);
  border-radius: 14px;
  background-color: var(--white);
}

.about-defines__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 var(--space-3);
  margin-top: 14px;
}

.about-define {
  display: flex;
  flex-direction: column;
}

.about-define__media {
  --define-h: 190px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: var(--define-h);
}

.about-define__media picture { display: block; }

/* An explicit height, not a percentage: a percentage max-height inside an
   auto-sized box resolves to nothing, and the tall screw rotor then covered
   the title beneath it. */
.about-define__media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--define-h);
  object-fit: contain;
}

.about-define__body {
  flex: 1;
  margin-top: -2px;
  padding: 18px 20px 20px;         /* text measures ~224 in a 264 column */
  border: var(--border-w) solid var(--border);
  border-radius: 8px;
  text-align: center;
}

/* Titles run one or two lines; both sit in the same two-line box, centred,
   so the texts beneath start level. */
.about-define__title {
  display: grid;
  place-items: center;
  min-height: 2.66em;
  font-size: clamp(1.0625rem, 0.8rem + 0.5vw, 1.25rem);    /* 17 -> 20 */
  font-weight: var(--fw-bold);
  line-height: 1.33;
  color: var(--ink-heading);
}

.about-define__title span { display: inline-block; text-align: center; }

/* The short rule sits at the start of the title, as drawn. */
.about-define__title span::before {
  content: "";
  display: block;
  width: 35px;
  height: 3px;
  margin-bottom: 10px;
  background-color: var(--color-rule);
}

.about-define__text {
  margin-top: 14px;
  font-size: clamp(1rem, 0.8rem + 0.45vw, 1.1875rem);      /* 16 -> 19 */
  line-height: 1.52;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Closing CTA and trust strip
   -------------------------------------------------------------------------- */

.about-close {
  padding: 30px clamp(var(--gutter), 3.6vw, 52px) 25px;
}

.about-cta {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1341px;
  min-height: 155px;
  margin-inline: auto;
  padding: var(--space-5) 77px var(--space-5) 53px;
  border-radius: 10px;
  background-image: linear-gradient(100deg, var(--navy-700), var(--navy-800));
  color: var(--ink-inverse);
}

.about-cta__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 103px;
  height: 103px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-round);
}

.about-cta__icon svg {
  width: 52px;
  height: 52px;
  fill: none;
  stroke: currentColor;
}

.about-cta__copy { flex: 1 1 auto; }

.about-cta__title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 0.8rem + 1vw, 1.625rem);       /* 20 -> 26 */
  font-weight: var(--fw-bold);
  line-height: 1.25;
}

.about-cta__text {
  margin-top: 8px;
  max-width: 460px;
  font-size: clamp(1rem, 0.75rem + 0.6vw, 1.28125rem);     /* 16 -> 20.5 */
  line-height: 1.36;
  color: var(--ink-inverse-muted);
}

.about-cta__btn {
  flex: none;
  justify-content: space-between;
  gap: var(--space-6);
  min-width: 450px;
  min-height: 68px;
  padding-inline: 34px 30px;
  font-size: 1.125rem;             /* 18px, measured */
  border-radius: 6px;
}

.about-cta__btn .btn__arrow { width: 26px; height: 26px; }

.about-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1341px;
  min-height: 102px;
  margin: 26px auto 0;
  padding: var(--space-4) 0;
  list-style: none;
  border-radius: 10px;
  background-color: var(--blue-050);
}

.about-trust__item {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-inline: 61px var(--space-2);   /* "Technology Company" needs 187 of the 194 left */
  font-size: clamp(1rem, 0.75rem + 0.6vw, 1.28125rem);     /* 16 -> 20.5 */
  line-height: 1.45;
  color: var(--ink-heading);
}

.about-trust__item + .about-trust__item { border-left: var(--border-w) solid var(--border-strong); }

.about-trust__icon {
  flex: none;
  width: 50px;
  height: 50px;
  fill: none;
  stroke: currentColor;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  .about-value__icon { width: 120px; height: 120px; }
  .about-value__icon svg { width: 76px; height: 76px; }
  .about-value { padding-inline: var(--space-3); }

  .about-define__media { --define-h: 150px; }

  .about-cta { flex-wrap: wrap; padding: var(--space-6) 40px; }
  .about-cta__copy { flex-basis: calc(100% - 103px - 40px); }
  .about-cta__btn { margin-left: calc(103px + 40px); min-width: 0; }

  .about-trust__item { padding-inline: var(--space-5) var(--space-3); gap: var(--space-4); }
  .about-trust__icon { width: 40px; height: 40px; }
}

/* Tablet: five across no longer reads, so the strips reflow and the column
   dividers give way to spacing. */
@media (max-width: 991.98px) {
  .page-hero--about .page-hero__media picture { inset: var(--space-4); }

  .about-values {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-7) var(--space-5);
  }

  /* Three over two, the pair centred beneath. */
  .about-value { grid-column: span 2; }
  .about-value:nth-child(4) { grid-column: 2 / span 2; }
  .about-value + .about-value { border-left: none; }

  .about-defines__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-6) var(--space-4);
  }

  .about-define { grid-column: span 2; }
  .about-define:nth-child(4) { grid-column: 2 / span 2; }

  .about-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) 0; padding-block: var(--space-5); }
  .about-trust__item:nth-child(3) { border-left: none; }
}

@media (max-width: 767.98px) {
  .page-hero--about { grid-template-columns: minmax(0, 1fr); min-height: 0; }

  /* Stacked, the image returns to flow and sets its own height. */
  .page-hero--about .page-hero__media { padding: var(--space-4); }
  .page-hero--about .page-hero__media picture { position: static; }

  .about-values,
  .about-defines__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .about-value,
  .about-value:nth-child(4),
  .about-define,
  .about-define:nth-child(4) { grid-column: auto; }

  /* The fifth sits centred on its own row. */
  .about-value:last-child,
  .about-define:last-child { grid-column: 1 / -1; justify-self: center; max-width: calc(50% - var(--space-3)); }

  .about-cta { flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-6) var(--space-5); }
  .about-cta__icon { width: 72px; height: 72px; }
  .about-cta__icon svg { width: 36px; height: 36px; }
  .about-cta__copy { flex-basis: auto; }
  .about-cta__btn { margin-left: 0; }
}

@media (max-width: 575.98px) {
  .about-values,
  .about-defines__grid,
  .about-trust { grid-template-columns: minmax(0, 1fr); }

  .about-value:last-child,
  .about-define:last-child { max-width: none; justify-self: stretch; }

  .about-trust__item + .about-trust__item { border-left: none; }

  .about-value__icon { width: 96px; height: 96px; }
  .about-value__icon svg { width: 60px; height: 60px; }
  .about-value__title { margin-top: var(--space-4); }

  .about-cta__btn {
    gap: var(--space-3);
    min-height: 56px;
    padding-inline: 16px;
    font-size: 0.9375rem;
    white-space: normal;
  }

  .about-cta__btn .btn__arrow { width: 18px; height: 18px; }
}