/* ==========================================================================
   About Us — about-us.php
   Figma: YmLzL45Qaw4FJRduYrQQM1 "brihaspatitech-figma-implementation"
          node 108:3228 "About" (one 1520x11009 desktop frame)

   Every selector is scoped under body.page-template-about-us on purpose:
   content.css loads on EVERY page and defines its own unscoped .hero / .faq__*
   / .container rules that would otherwise collide. Same reasoning as
   css/ai-in-business.css and css/ai-automation-agency.css.

   Values come from per-section Figma MCP get_design_context pulls; the derived
   value table is checked in at e2e-tests/figma-reference/about/digest-108-3228.md
   next to the 1:1 frame export (full.png) and its per-section slices.

   The `font:` shorthand is never used in this file: it resets
   font-optical-sizing to `auto`, which would silently undo the `none` set on
   .abt-page and re-introduce the ~8% Inter Display glyph-width error every
   other Figma page here had to diagnose.

   RESPONSIVE: node 108:3228 is the ONLY frame for this design — there is no
   tablet frame and no mobile frame anywhere in it. Everything below 1520px is
   therefore this build's own interpretation and is NOT Figma-verified. Those
   blocks are marked INTERPRETED.
   ========================================================================== */

body.page-template-about-us {
  /* Figma frame 108:3228 base fill, sampled off the 1:1 export. */
  background: #020010;
}

body.page-template-about-us .abt-page {
  --abt-gutter: var(--container-padding-inline, 40px);
  background: #020010;
  overflow-x: clip;

  /* Inter is loaded as a variable font WITH an optical-size axis (opsz 14..32).
     CSS defaults to font-optical-sizing:auto, which renders the Display cut at
     large sizes — an ~8% glyph-width error on every large Inter element that a
     computed-style check cannot see. Set once here so it inherits. Scoped to
     .abt-page, so the sitewide header and footer are untouched. */
  font-optical-sizing: none;
}

body.page-template-about-us .abt-container {
  max-width: var(--container-max-width, 1520px);
  margin: 0 auto;
  padding: 0 var(--abt-gutter);
  box-sizing: border-box;
}

/* Shared eyebrow — Figma 108:3264 / 3296 / 3320 / 3398 / 3434 / 3478 / 3503 /
   3916: Inter Bold 12px, lh 1.19, 2.86px tracking, uppercase, #cab5ff. */
body.page-template-about-us .abt-eyebrow {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.19;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: #cab5ff;
}

/* Figma 108:3331 / 3489 / 3549 / 3562 — the eyebrow on the light bands (and,
   in Figma, the Life-at-TBI band) is #9a60fb. */
body.page-template-about-us .abt-eyebrow--light {
  color: #9a60fb;
}

/* Shared section head. Figma builds every left-aligned section heading as a
   10.797px-tall "Container" holding the eyebrow absolutely at (1, 0), followed
   by a "Heading 2:margin" frame with 20px top padding — so the eyebrow's line
   box overhangs into the heading's padding by ~3.5px. Reproduced structurally
   rather than as a rounded margin. */
body.page-template-about-us .abt-head {
  position: relative;
  padding-top: 10.797px;
}

body.page-template-about-us .abt-head__eyebrow {
  position: absolute;
  top: 0;
  left: 1px;
  white-space: nowrap;
}

/* Figma 108:3298 / 3480 / 3491 / 3505 / 3551 — Gelasio 76 / 78.3, -5px. */
body.page-template-about-us .abt-head__title {
  margin: 0;
  padding-top: 20px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 78.3px;
  letter-spacing: -5px;
  color: #fff;
}

/* ==========================================================================
   1. HERO — Figma 108:3229 (band y 77..792, 715 tall)
   BG group 108:3230 ships as one flattened 1520x715 export; copy block
   108:3237 at x=40, y=244 (167 below the band top), 736 wide, 291 tall.
   ========================================================================== */
body.page-template-about-us .abt-hero {
  position: relative;
  min-height: 715px;
  background: #020010;
}

body.page-template-about-us .abt-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body.page-template-about-us .abt-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

body.page-template-about-us .abt-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 167px;
  padding-bottom: 257px; /* 715 - 167 - 291 */
}

body.page-template-about-us .abt-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 736px;
}

/* Figma 108:3238 — the only eyebrow on the page set in Inter Semi Bold (600)
   with `normal` line-height; every other eyebrow is Bold / 1.19. */
body.page-template-about-us .abt-hero__eyebrow {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: #cab5ff;
}

body.page-template-about-us .abt-hero__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.page-template-about-us .abt-hero__text p {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 40px;
  color: rgba(255, 255, 255, .82);
}

/* ==========================================================================
   2. BY THE NUMBERS — Figma 108:3261 (band y 792..1008, fixed 216, #100C19)
   ========================================================================== */
body.page-template-about-us .abt-stats {
  min-height: 216px;
  padding-top: 55px;
  box-sizing: border-box;
  background: #100c19;
}

body.page-template-about-us .abt-stats__row {
  display: flex;
  align-items: center;
  gap: 112px;
}

body.page-template-about-us .abt-stats__intro {
  flex: none;
  width: 357px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.page-template-about-us .abt-stats__lede {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 15px;
  line-height: 28px;
  color: #aaa5b3;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-about-us .abt-stats__list {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 35px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-template-about-us .abt-stats__stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-left: 24px;
  border-left: 1px solid rgba(160, 100, 255, .3);
}

/* Figma 108:3270 centres this 57.6px line box on y=19 of its 65.6px slot
   (not on the slot's own middle), so the numeral's box starts 9.8px ABOVE the
   slot. Applied as paint-only offset so the caption below is not dragged. */
body.page-template-about-us .abt-stats__num {
  display: block;
  position: relative;
  top: -9.8px;
  padding-bottom: 8px; /* Figma "Margin" is 65.6 tall with an 8px bottom pad */
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 57.6px;
  line-height: 57.6px;
  color: #fff;
  white-space: nowrap;
}

/* Figma gives each caption a 42px slot and a different vertical seat inside
   it: cell 1 at top 0.2, cells 2 & 4 centred (top 10.5), cell 3 at top 5.4. */
body.page-template-about-us .abt-stats__caption-box {
  display: block;
  height: 42px;
  padding-top: 10.5px;
  box-sizing: border-box;
}

body.page-template-about-us .abt-stats__stat:nth-child(1) .abt-stats__caption-box {
  padding-top: .2px;
}

body.page-template-about-us .abt-stats__stat:nth-child(3) .abt-stats__caption-box {
  padding-top: 5.4px;
}

body.page-template-about-us .abt-stats__caption {
  display: block;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #aaa5b3;
}

/* Figma measures: 108:3272 = 199, 108:3284 = 170 (which is what breaks the
   third caption onto two lines). */
body.page-template-about-us .abt-stats__stat:nth-child(1) .abt-stats__caption {
  max-width: 199px;
}

body.page-template-about-us .abt-stats__stat:nth-child(3) .abt-stats__caption {
  max-width: 170px;
}

/* ==========================================================================
   3. WHO WE ARE + ENGINEERING FIRST — Figma 108:3291 (band y 1008..1728, white)
   Left column 108:3293 at x=40, y=120, 746 wide; card 108:3319 at x=999,
   y=168, 481 wide. 746 + 481 = 1227 of 1440 → 213px between them.
   ========================================================================== */
body.page-template-about-us .abt-who {
  padding: 120px 0;
  background: #fff;
}

body.page-template-about-us .abt-who__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

body.page-template-about-us .abt-who__main {
  flex: none;
  width: 746px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Figma 108:3298 is a fixed 540px measure — "We build what we / recommend." */
body.page-template-about-us .abt-who__heading {
  max-width: 540px;
  color: #171717;
}

/* Figma 108:3300 is a FIXED 262px container over three 88px rows — the
   last row is clipped by 2px in the design. */
body.page-template-about-us .abt-who__list {
  height: 262px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-template-about-us .abt-who__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  min-height: 88px;
}

body.page-template-about-us .abt-who__arrow {
  flex: none;
  width: 24px;
  height: 30px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 26.4px;
  line-height: 30.36px;
  color: #cab5ff;
  white-space: nowrap;
}

body.page-template-about-us .abt-who__text {
  flex: 1 1 0;
  min-width: 0;
  max-width: 799.425px;
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 19.2px;
  line-height: 33.024px;
  color: rgba(23, 23, 23, .78);
}

/* Figma 108:3306 — the lead-in is Inter at weight 650 (variable axis). */
body.page-template-about-us .abt-who__text strong {
  font-weight: 650;
  color: #171717;
}

body.page-template-about-us .abt-who__card {
  position: relative;
  flex: none;
  width: 481px;
  margin-top: 48px; /* card y 168 minus the column's y 120 */
  padding: 48px 48px 64px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid rgba(167, 139, 250, .28);
  border-radius: 24px;
  background: linear-gradient(147.835deg, #181124 6.1733%, #100b18 93.827%);
  overflow: clip;
}

/* Figma 108:3324 "Text" — a 253x255 radial glow parked at (321, 280) inside
   the clipped card, so only its top-left quarter shows in the bottom-right
   corner. Radii/centre from the node's own radialGradient transform. */
body.page-template-about-us .abt-who__card::after {
  content: "";
  position: absolute;
  left: 321px;
  top: 280px;
  width: 253px;
  height: 255px;
  border-radius: 110px;
  background: radial-gradient(178.9px 180.31px at 126.5px 127.5px, rgba(123, 92, 240, .5) 0, rgba(123, 92, 240, 0) 68%);
  pointer-events: none;
}

body.page-template-about-us .abt-who__card-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.page-template-about-us .abt-who__card-lead {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 20px;
  line-height: 34px;
  color: #fff;
}

body.page-template-about-us .abt-who__card-body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 34px;
  color: #b9b5c0;
}

/* ==========================================================================
   4. HOW WE GOT HERE — TIMELINE — Figma 108:3326 (band y 1728..2550, #FAF9FD)
   Inner frame 108:3327 is a FIXED 582 tall (content 514 + 68 slack).
   ========================================================================== */
body.page-template-about-us .abt-timeline {
  padding: 120px 0;
  background: #faf9fd;
}

body.page-template-about-us .abt-timeline__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  min-height: 582px;
}

body.page-template-about-us .abt-timeline__head {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

body.page-template-about-us .abt-timeline__head-left {
  flex: none;
  width: 486px;
}

body.page-template-about-us .abt-timeline__lede {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.page-template-about-us .abt-timeline__lede p {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 33px;
  color: #625f67;
}

body.page-template-about-us .abt-timeline__lede strong {
  font-weight: 600;
  color: #28262d;
}

body.page-template-about-us .abt-timeline__row {
  display: flex;
  align-items: stretch;
  gap: 80px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-template-about-us .abt-timeline__col {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Figma 108:3355 is the one column that is fixed (309) rather than fill. */
body.page-template-about-us .abt-timeline__col--2 {
  flex: none;
  width: 309px;
}

/* Figma vectors 108:3338..3341 — a 1px rgba(38,31,78,.2) rule at y 28 (the
   icon's vertical centre) from each icon's right edge across the 80px gap to
   the next icon; the last one runs to the container edge. */
body.page-template-about-us .abt-timeline__col::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 55px;
  right: -80px;
  height: 1px;
  background: rgba(38, 31, 78, .2);
}

body.page-template-about-us .abt-timeline__col--4::after {
  right: 0;
}

body.page-template-about-us .abt-timeline__node {
  position: relative;
  z-index: 1;
  display: block;
  width: 56px;
  height: 56px;
}

body.page-template-about-us .abt-timeline__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

body.page-template-about-us .abt-timeline__year {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: #9a60fa;
}

body.page-template-about-us .abt-timeline__block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.page-template-about-us .abt-timeline__title {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: 22px;
  line-height: 31.6px;
  color: #28262d;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-about-us .abt-timeline__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

body.page-template-about-us .abt-timeline__body p {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  color: rgba(104, 100, 109, .8);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Per-node measures from Figma — these are what set each column's line breaks. */
body.page-template-about-us .abt-timeline__col--1 .abt-timeline__body p:first-child {
  min-height: 40px; /* 108:3353 is an explicit 40px box */
}

body.page-template-about-us .abt-timeline__col--2 .abt-timeline__body p:first-child {
  max-width: 309px;
}

body.page-template-about-us .abt-timeline__col--3 .abt-timeline__title,
body.page-template-about-us .abt-timeline__col--3 .abt-timeline__body p:last-child {
  max-width: 304px;
}

body.page-template-about-us .abt-timeline__col--4 .abt-timeline__body p {
  max-width: 277px;
}

/* ==========================================================================
   5. OUR CREDENTIALS — Figma 108:3391 (band y 2550..3533, 983 tall)
   Group export 108:3392 (credentials-bg.svg) is the band's own top-right
   glow: a 269x309.8 ellipse, 87px blur, 20% #885FF2→#4F378C, clipped.
   Content 108:3395 at y=120, 1440 wide with 112px side padding → 1216.
   ========================================================================== */
body.page-template-about-us .abt-creds {
  padding: 120px 0 128px;
  background: #020010 url("../assets/images/about-us/credentials-bg.svg") no-repeat center top / 1520px 983px;
}

body.page-template-about-us .abt-creds__inner {
  padding-left: calc(var(--abt-gutter) + 112px);
  padding-right: calc(var(--abt-gutter) + 112px);
}

body.page-template-about-us .abt-creds__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

/* Figma 108:3399 — the centred headings use -3.46px, not the -5px of the
   left-aligned ones. */
body.page-template-about-us .abt-creds__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 78.34px;
  letter-spacing: -3.46px;
  color: #fff;
}

body.page-template-about-us .abt-creds__grid {
  display: flex;
  align-items: stretch;
  gap: 40px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

body.page-template-about-us .abt-creds__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 48px 40px 56px;
  box-sizing: border-box;
  background: #0f0821;
  border: 1px solid rgba(185, 108, 255, .32);
  border-radius: 25px;
  text-align: center;
}

body.page-template-about-us .abt-creds__logo {
  display: block;
  height: 56px;
  width: auto;
}

body.page-template-about-us .abt-creds__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

body.page-template-about-us .abt-creds__title {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: 22px;
  line-height: 31.6px;
  color: #fff;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-about-us .abt-creds__body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  color: rgba(255, 255, 255, .7);
}

body.page-template-about-us .abt-creds__band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 84px;
  margin-top: 64px;
  padding: 40px;
  box-sizing: border-box;
  background: #0f0821;
  border: 1px solid rgba(185, 108, 255, .32);
  border-radius: 16px;
}

body.page-template-about-us .abt-creds__band-title {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 34px;
  line-height: normal;
  letter-spacing: -2.46px;
  color: #fff;
}

body.page-template-about-us .abt-creds__band-body {
  flex: none;
  width: 658px;
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  color: rgba(255, 255, 255, .6);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* ==========================================================================
   6. OUR AI WORK — Figma 108:3430 (band y 3533..4691, 1158 tall)
   aiwork-bg.svg is the band's own 40%-opacity black→#26072B diagonal
   gradient over the #020010 base. Tabs + panel are component 108:2865.
   ========================================================================== */
body.page-template-about-us .abt-work {
  padding: 120px 0;
  background: #020010 url("../assets/images/about-us/aiwork-bg.svg") no-repeat center top / 100% 100%;
}

body.page-template-about-us .abt-work__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

body.page-template-about-us .abt-work__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

body.page-template-about-us .abt-work__heading {
  margin: 0;
  max-width: 1052px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 78.34px;
  letter-spacing: -3.46px;
  color: #fff;
}

body.page-template-about-us .abt-work__tabs-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

body.page-template-about-us .abt-work__tabs {
  display: flex;
  gap: 16px;
  width: 100%;
}

/* Figma 108:2867 declares pt 16 / gap 12 / pb 20 around two text-box-trimmed
   labels, but its own 1:1 render puts the title cap at y 375, the sub at 400
   and the 4px underline at 424..428 — a 69px tab. With Chromium's trimmed cap
   boxes (11.6 + 8.7) those measured edges are reproduced by gap 13.4 and
   pb 15.3; the declared 12 / 20 would make the tab 72.4 and push the panel
   3px down. Measured off the export, not eyeballed. */
body.page-template-about-us .abt-work__tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13.4px;
  margin: 0;
  padding: 16px 12px 15.3px 10px;
  background: none;
  border: 0;
  border-bottom: 4px solid rgba(230, 230, 230, .24);
  border-radius: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
}

body.page-template-about-us .abt-work__tab.is-active {
  border-bottom-color: #9a60fa;
}

/* Figma wires each tab ON_CLICK -> CHANGE_TO its variant with NO transition,
   so the panel swap is an instant show/hide. js/main.js toggles `hidden` on
   the aria-controls panel; the [hidden] rule must beat the display:grid. */
body.page-template-about-us .abt-work__panel[hidden] {
  display: none;
}

body.page-template-about-us .abt-work__tab:focus-visible {
  outline: 2px solid #cab5ff;
  outline-offset: 2px;
}

body.page-template-about-us .abt-work__tab-title {
  display: block;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 16px;
  line-height: 31.6px;
  color: #fff;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-about-us .abt-work__tab-sub {
  display: block;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 12px;
  line-height: 31.6px;
  color: rgba(255, 255, 255, .7);
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Figma 108:2884 "Tab Panel": 1440 x 570.201 border-box (567.785 content +
   1.208 borders), grid 1006.31 / 431.28. */
body.page-template-about-us .abt-work__panel {
  display: grid;
  grid-template-columns: 1006.31fr 431.28fr;
  width: 100%;
  min-height: 570.201px;
  box-sizing: border-box;
  background: #0f0821;
  border: 1.208px solid rgba(255, 255, 255, .09);
  border-radius: 24.161px;
  box-shadow: 0 28.993px 84.564px rgba(0, 0, 0, .2);
  overflow: clip;
}

body.page-template-about-us .abt-work__video {
  position: relative;
  min-height: 567.785px;
  background: #05050a;
  overflow: hidden;
}

body.page-template-about-us .abt-work__video-fill {
  position: absolute;
  inset: 0;
}

body.page-template-about-us .abt-work__video-fill img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The real tab video sits on top of the glow fill, which stays visible as the
   backdrop until the first frame decodes and in the letterbox bars.

   `contain`, not `cover`: the frame is 1006.31 x 567.785 (1.772:1, i.e. 16:9)
   ONLY at the 1520px design width. Below that the grid column narrows while
   min-height stays 567.785, so the box gets squarer and `cover` would crop the
   sides off every video — and these are title cards and screen recordings
   where the cropped-off edges carry text. Letterboxing against the glow keeps
   all four readable at every viewport. */
body.page-template-about-us .abt-work__video-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  opacity: 0;
  transition: opacity .4s ease;
}

body.page-template-about-us .abt-work__video-media.is-ready {
  opacity: 1;
}

/* Once the pill hands over to native controls, drop the glow behind the video
   so the control bar reads against a flat backdrop. */
body.page-template-about-us .abt-work__video.is-playing .abt-work__video-media {
  background: #05050a;
}

/* Figma 108:2887 — 26.58 from the left and (483.22 + 58 = 541.2 → 26.58) from
   the bottom of the 567.785 video frame. */
body.page-template-about-us .abt-work__play {
  position: absolute;
  left: 26.58px;
  bottom: 26.58px;
  display: inline-flex;
  align-items: center;
  gap: 12.081px;
  padding: 10.872px 14.497px 10.872px 10.872px;
  margin: 0;
  background: rgba(8, 6, 12, .68);
  border: 1.208px solid rgba(255, 255, 255, .13);
  border-radius: 1206.846px;
  -webkit-backdrop-filter: blur(14.497px);
  backdrop-filter: blur(14.497px);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

body.page-template-about-us .abt-work__play:hover,
body.page-template-about-us .abt-work__play:focus-visible {
  background: rgba(8, 6, 12, .86);
  border-color: rgba(255, 255, 255, .28);
  transform: translateY(-1px);
}

body.page-template-about-us .abt-work__play:focus-visible {
  outline: 2px solid #cab5ff;
  outline-offset: 3px;
}

/* Same convention as .testimonial-card__media.is-playing / the Shopify and
   Ecommerce testimonial videos: once real playback starts the pill gets out
   of the way and the native controls take over. */
body.page-template-about-us .abt-work__video.is-playing .abt-work__play {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  body.page-template-about-us .abt-work__play {
    transition: none;
  }

  body.page-template-about-us .abt-work__play:hover,
  body.page-template-about-us .abt-work__play:focus-visible {
    transform: none;
  }

  body.page-template-about-us .abt-work__video-media {
    transition: none;
  }
}

body.page-template-about-us .abt-work__play-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33.826px;
  height: 33.826px;
  padding-left: 2.416px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 16.913px;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 12.95px;
  line-height: 20.721px;
  color: #0d0912;
}

body.page-template-about-us .abt-work__play-label {
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 14px;
  line-height: 18.2px;
  color: #fff;
  white-space: nowrap;
}

body.page-template-about-us .abt-work__detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 55.57px 40px;
  box-sizing: border-box;
}

body.page-template-about-us .abt-work__detail-top {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.page-template-about-us .abt-work__chips {
  display: flex;
  gap: 9.664px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-template-about-us .abt-work__chip {
  display: inline-flex;
  padding: 7.248px 10.872px;
  background: rgba(202, 181, 255, .07);
  border: 1.208px solid rgba(202, 181, 255, .19);
  border-radius: 1206.846px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 11.597px;
  line-height: 18.556px;
  letter-spacing: .9278px;
  text-transform: uppercase;
  color: rgba(202, 181, 255, .78);
  white-space: nowrap;
}

body.page-template-about-us .abt-work__detail-copy {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Figma: the Jovian title (108:2901) declares lh 31.6 on one line, the other
   three variants' titles (108:2951 / 3001 / 3055) declare lh 49 and wrap to
   two and three lines. With text-box-trim a single line measures its cap
   height whatever the lh, so 49px is exact for all four. */
body.page-template-about-us .abt-work__title {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 46px;
  line-height: 49px;
  color: #fff;
  max-width: 320.134px; /* Figma 108:2951 / 3001 / 3055: the title box is the 320.13 column, wrapping to 3 / 1 / 2 lines */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-about-us .abt-work__body {
  margin: 0;
  max-width: 320.134px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: rgba(255, 255, 255, .72);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-about-us .abt-work__steps {
  display: flex;
  align-items: center;
  gap: 10.872px;
  margin: 32px 0 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1.208px solid rgba(255, 255, 255, .08);
}

body.page-template-about-us .abt-work__steps li {
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 12px;
  line-height: 20.721px;
  letter-spacing: .777px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .57);
  white-space: nowrap;
}

body.page-template-about-us .abt-work__steps .abt-work__step-arrow {
  font-size: 12.95px;
  color: #a78bfa;
}

/* ==========================================================================
   7. TESTIMONIALS — Figma 108:3437 (band y 4691..5857, 1166 tall)
   Container 1270 wide at x=125 (centred); cards 615 + 40 + 615.
   ========================================================================== */
body.page-template-about-us .abt-testi {
  padding: 120px 0;
  background: #020010;
}

body.page-template-about-us .abt-testi__inner {
  max-width: 1270px;
  margin: 0 auto;
  padding: 0 var(--abt-gutter);
  box-sizing: content-box;
}

body.page-template-about-us .abt-testi__head {
  display: flex;
  align-items: flex-end;
  gap: 80px;
}

body.page-template-about-us .abt-testi__head-left {
  flex: none;
  width: 486px;
}

body.page-template-about-us .abt-testi__lede {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 33px;
  color: #b9b5c0;
}

body.page-template-about-us .abt-testi__grid {
  display: flex;
  align-items: stretch;
  gap: 40px;
  margin-top: 48px;
}

body.page-template-about-us .abt-testi__card {
  flex: 1 1 0;
  min-width: 0;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  background: #15111d;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 20px;
  overflow: clip;
}

body.page-template-about-us .abt-testi__media {
  position: relative;
  flex: none;
  height: 289.125px;
  background: #21172f;
  overflow: hidden;
}

body.page-template-about-us .abt-testi__media picture,
body.page-template-about-us .abt-testi__media img {
  display: block;
  width: 100%;
  height: 100%;
}

body.page-template-about-us .abt-testi__media img {
  object-fit: cover;
  object-position: center;
}

/* Figma 108:3444 — 48px disc at (22, 221.125), rgba(255,255,255,.94),
   0 8px 28px rgba(0,0,0,.22). Decorative: there is no video source. */
body.page-template-about-us .abt-testi__play {
  position: absolute;
  left: 22px;
  top: 221.125px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, .94);
  border-radius: 24px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  color: #111;
}

body.page-template-about-us .abt-testi__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 40px;
}

body.page-template-about-us .abt-testi__title {
  margin: 0;
  padding-bottom: 18.4px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 20.48px;
  line-height: 27.648px;
  color: #fff;
}

body.page-template-about-us .abt-testi__title--1 {
  max-width: 434px;
}

body.page-template-about-us .abt-testi__title--2 {
  max-width: 405px;
}

body.page-template-about-us .abt-testi__quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 40.6px;
  color: #fff;
}

body.page-template-about-us .abt-testi__quote p {
  margin: 0;
}

/* Figma 108:3451 / 108:3467 — the highlight rectangles behind two phrases.
   Negative horizontal margin cancels the padding so the words do not move. */
body.page-template-about-us .abt-testi__hl {
  display: inline-block;
  line-height: 34px; /* Figma 108:3451 is 34 tall; Gelasio's own content area is 38 */
  margin: 0 -3px;
  padding: 0 3px;
  background: rgba(155, 102, 255, .24);
  border: 1px solid rgba(155, 102, 255, .32);
  border-radius: 6px;
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Figma "Cite:align" — card 1's cite is pushed to the bottom of its content
   box (flex-1, justify-end), which is what makes both cards the same height. */
body.page-template-about-us .abt-testi__cite {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding-top: 32px;
}

body.page-template-about-us .abt-testi__name {
  display: block;
  height: 29px;
  padding-bottom: 4px;
  box-sizing: border-box;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 15.04px;
  line-height: 24.064px;
  color: #fff;
  white-space: nowrap;
}

body.page-template-about-us .abt-testi__role {
  display: block;
  height: 21px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 13px;
  line-height: 20.992px;
  color: rgba(255, 255, 255, .6);
  white-space: nowrap;
}

/* ==========================================================================
   8. OUR CORE TEAM — Figma 108:3482 (band y 5857..6878, 1021 tall, white)
   Head row 1270 wide (left 743); three 480px cards; the frame's content ends
   77.5px above the band's bottom edge, not 120.
   ========================================================================== */
body.page-template-about-us .abt-team {
  padding: 120px 0 77.5px;
  background: #fff;
}

body.page-template-about-us .abt-team__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

body.page-template-about-us .abt-team__head {
  display: flex;
  align-items: flex-end;
  width: 1270px;
  max-width: 100%;
  min-height: 187.797px;
}

body.page-template-about-us .abt-team__head-left {
  width: 743px;
  max-width: 100%;
}

body.page-template-about-us .abt-team__heading {
  color: #171717;
}

body.page-template-about-us .abt-team__grid {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-template-about-us .abt-team__card {
  flex: none;
  width: 480px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

body.page-template-about-us .abt-team__card--1 {
  padding-right: 34.47px;
}

body.page-template-about-us .abt-team__card--2 {
  padding: 0 34.47px;
}

body.page-template-about-us .abt-team__card--3 {
  padding-left: 34.47px;
}

body.page-template-about-us .abt-team__tile {
  position: relative;
  height: 513.609px;
  background: #e4e4e4;
  overflow: hidden;
}

body.page-template-about-us .abt-team__tile picture {
  display: contents;
}

/* The portrait lives in its own clipped box so the hover state (below) can
   morph it into a circle without touching the tile. Default: the box IS the
   tile, so the percentages on the img are unchanged from Figma's Default. */
body.page-template-about-us .abt-team__photo-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  transition: left .3s ease-out, top .3s ease-out, width .3s ease-out, height .3s ease-out, border-radius .3s ease-out;
}

body.page-template-about-us .abt-team__photo {
  position: absolute;
  display: block;
  max-width: none;
  transition: left .3s ease-out, top .3s ease-out, width .3s ease-out, height .3s ease-out;
}

/* Figma Variant2 (108:3087 / 3115 / 3143): Inter Medium 24/36 #000 at
   (34.47, 179.25), revealed as the portrait shrinks away from it. */
body.page-template-about-us .abt-team__bio {
  position: absolute;
  left: 34.47px;
  right: 34.47px;
  top: 179.25px;
  margin: 0;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  color: #000;
  opacity: 0;
  transition: opacity .3s ease-out;
}

body.page-template-about-us .abt-team__tile:focus-visible {
  outline: 2px solid #9a60fa;
  outline-offset: 2px;
}

/* Hover / focus state = Figma Variant2: 128px circle at (34, 34.28). */
body.page-template-about-us .abt-team__card:hover .abt-team__photo-box,
body.page-template-about-us .abt-team__tile:focus-within .abt-team__photo-box,
body.page-template-about-us .abt-team__tile:focus .abt-team__photo-box {
  left: 34px;
  top: 34.28px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
}

body.page-template-about-us .abt-team__card:hover .abt-team__bio,
body.page-template-about-us .abt-team__tile:focus-within .abt-team__bio,
body.page-template-about-us .abt-team__tile:focus .abt-team__bio {
  opacity: 1;
}

/* Each circle's crop, from the variant's imageTransform (CROP mode): the
   visible window is 1/scale of the image, offset by -translate/scale. */
body.page-template-about-us .abt-team__card--1:hover .abt-team__photo,
body.page-template-about-us .abt-team__card--1 .abt-team__tile:focus-within .abt-team__photo,
body.page-template-about-us .abt-team__card--1 .abt-team__tile:focus .abt-team__photo {
  left: -9.11%;
  top: -5.47%;
  width: 118.23%;
  height: 126.56%;
}

body.page-template-about-us .abt-team__card--2:hover .abt-team__photo,
body.page-template-about-us .abt-team__card--2 .abt-team__tile:focus-within .abt-team__photo,
body.page-template-about-us .abt-team__card--2 .abt-team__tile:focus .abt-team__photo {
  left: -8.73%;
  top: -1.78%;
  width: 124.94%;
  height: 137.84%;
}

body.page-template-about-us .abt-team__card--3:hover .abt-team__photo,
body.page-template-about-us .abt-team__card--3 .abt-team__tile:focus-within .abt-team__photo,
body.page-template-about-us .abt-team__card--3 .abt-team__tile:focus .abt-team__photo {
  left: -4.04%;
  top: -4.3%;
  width: 109.87%;
  height: 152.69%;
}

/* Figma's own placement of each portrait, as % of its tile (see about-us.php). */
body.page-template-about-us .abt-team__card--1 .abt-team__photo {
  left: -17.24%;
  top: -6.39%;
  width: 127.22%;
  height: 118.14%;
}

body.page-template-about-us .abt-team__card--2 .abt-team__photo {
  left: -8.86%;
  top: -1.55%;
  width: 125.23%;
  height: 110.04%;
}

body.page-template-about-us .abt-team__card--3 .abt-team__photo {
  left: -4.15%;
  top: -3.66%;
  width: 109.98%;
  height: 132.2%;
}

body.page-template-about-us .abt-team__meta {
  padding-top: 20px;
}

body.page-template-about-us .abt-team__name {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 20px;
  line-height: 27.576px;
  color: #000;
  white-space: nowrap;
}

body.page-template-about-us .abt-team__role {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.853px;
  color: rgba(0, 0, 0, .87);
  white-space: nowrap;
}

body.page-template-about-us .abt-team__meta--with-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 0;
  padding-right: 8px;
}

body.page-template-about-us .abt-team__meta-text {
  flex: 1 1 0;
  min-width: 0;
  padding-top: 20px;
}

body.page-template-about-us .abt-team__linkedin {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 10px 12px;
  box-sizing: border-box;
  background: #0a66c2;
  border-radius: 8px;
}

body.page-template-about-us .abt-team__linkedin img {
  display: block;
  width: 16px;
  height: 17px;
}

/* ==========================================================================
   9. THE VALUES WE LIVE BY — Figma 108:3497 (band y 6878..7773, 895 tall)
   ========================================================================== */
body.page-template-about-us .abt-values {
  padding: 120px 0;
  background: #020010;
}

body.page-template-about-us .abt-values__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  min-height: 655px;
}

body.page-template-about-us .abt-values__head {
  display: flex;
  align-items: flex-end;
  gap: 80px;
}

body.page-template-about-us .abt-values__head-left {
  flex: none;
  width: 486px;
}

body.page-template-about-us .abt-values__lede {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 33px;
  color: #b9b5c0;
}

/* Figma 108:3507 — a 420-tall row with items-center; card 4 is 426 tall, so
   it sits 3px above and below its siblings, exactly as in the frame. */
body.page-template-about-us .abt-values__grid {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 420px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Figma 108:3151 fill: the two purple gradient layers are fully transparent
   at every stop, leaving rgba(15,8,33,.24) over the #020010 band. */
body.page-template-about-us .abt-values__card {
  flex: none;
  width: 336px;
  height: 420px;
  padding: 32px 32px 64px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 40px;
  background: rgba(15, 8, 33, .24);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 25px;
}

body.page-template-about-us .abt-values__card--4 {
  height: 426px;
}

/* Hover state = Figma Variant2 (108:3159 / 3178 / 3200 / 3220): the card's
   second fill is a vertical #b96cff gradient (alpha 0 @17.42%, .13 @38.96%,
   .27 @51.42%, 1 @100%) at 32% paint opacity; Default has it at opacity 0.
   Smart Animate 0.3s ease-out -> an opacity transition on an overlay with
   the alphas pre-multiplied by .32. */
body.page-template-about-us .abt-values__card {
  position: relative;
  overflow: hidden;
}

body.page-template-about-us .abt-values__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(185, 108, 255, 0) 17.42%, rgba(185, 108, 255, .0416) 38.96%, rgba(185, 108, 255, .0864) 51.42%, rgba(185, 108, 255, .32) 100%);
  opacity: 0;
  transition: opacity .3s ease-out;
  pointer-events: none;
}

body.page-template-about-us .abt-values__card:hover::before,
body.page-template-about-us .abt-values__card:focus-within::before {
  opacity: 1;
}

body.page-template-about-us .abt-values__icon,
body.page-template-about-us .abt-values__text {
  position: relative;
  z-index: 1;
}

body.page-template-about-us .abt-values__card:hover .abt-values__icon,
body.page-template-about-us .abt-values__card:focus-within .abt-values__icon,
body.page-template-about-us .abt-values__card:hover .abt-values__title,
body.page-template-about-us .abt-values__card:focus-within .abt-values__title {
  color: #b96cff;
}

/* Icons are the Figma exports inlined with #EDE6FF -> currentColor, so the
   hover recolour to #b96cff can transition. */
body.page-template-about-us .abt-values__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #ede6ff;
  transition: color .3s ease-out;
}

body.page-template-about-us .abt-values__icon svg {
  display: block;
  width: 32px;
  height: 32px;
}

/* charm:compass sits at inset 10.94% of its 32 box (+4% stroke overflow) =
   a 27px glyph; glyphs:layer-group is 21.34 x 19.66. Both are centred. */
body.page-template-about-us .abt-values__card--2 .abt-values__icon svg {
  width: 27px;
  height: 27px;
}

body.page-template-about-us .abt-values__card--3 .abt-values__icon svg {
  width: 21.338px;
  height: 19.659px;
}

body.page-template-about-us .abt-values__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.page-template-about-us .abt-values__title {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 800;
  font-size: 22px;
  line-height: 28px;
  color: #fff;
  transition: color .3s ease-out;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-about-us .abt-values__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.page-template-about-us .abt-values__body p {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: #fff;
  opacity: .72;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-about-us .abt-values__card--1 .abt-values__body p:first-child {
  max-width: 266px;
}

/* ==========================================================================
   10. LIFE AT TBI — Figma 108:3512 (band y 7773..8673, 900 tall)
   Left column 395 at x=40; collage 997 wide at x=483; glow 108:3514 is a
   538px circle at (19.88, -442.41), so only its lower edge shows top-left.
   ========================================================================== */
body.page-template-about-us .abt-life {
  position: relative;
  padding: 120px 0;
  background: #020010;
  overflow: hidden;
}

body.page-template-about-us .abt-life__glow {
  position: absolute;
  left: -154.12px;  /* 19.88 - 174 (the 886 export's blur padding) */
  top: -616.41px;   /* -442.41 - 174 */
  width: 886px;
  height: 886px;
  pointer-events: none;
}

body.page-template-about-us .abt-life__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

body.page-template-about-us .abt-life__copy {
  flex: none;
  width: 395px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

body.page-template-about-us .abt-life__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.page-template-about-us .abt-life__body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 27.52px;
  color: rgba(255, 255, 255, .7);
}

body.page-template-about-us .abt-life__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 268px;
}

/* Figma "Component 219/220": 268 x 56, label Inter Bold 16 text-box-trimmed
   and seated at y=22 in both. text-box-trim does not apply to a flex
   container, so the anchor is a block with the seat expressed as padding. */
body.page-template-about-us .abt-life__btn {
  display: block;
  height: 56px;
  padding: 22px 32px 0;
  box-sizing: border-box;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  text-align: center;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-about-us .abt-life__btn--solid {
  background: #7605f5;
}

body.page-template-about-us .abt-life__btn--ghost {
  padding-top: 20.5px; /* 22 minus the 1.5px border, so the label stays at y=22 */
  border: 1.5px solid #fff;
}

body.page-template-about-us .abt-life__btn:hover,
body.page-template-about-us .abt-life__btn:focus-visible {
  color: #fff;
  text-decoration: none;
}

body.page-template-about-us .abt-life__collage {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: 364fr 300.5fr 300.5fr;
  grid-template-rows: 322px 322px;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-template-about-us .abt-life__tile {
  position: relative;
  background: #21172f;
  border-radius: 12px;
  overflow: hidden;
}

body.page-template-about-us .abt-life__tile--a {
  grid-column: 1;
  grid-row: 1 / 3;
}

body.page-template-about-us .abt-life__tile--b {
  grid-column: 2 / 4;
  grid-row: 1;
}

body.page-template-about-us .abt-life__tile--c {
  grid-column: 2;
  grid-row: 2;
}

body.page-template-about-us .abt-life__tile--d {
  grid-column: 3;
  grid-row: 2;
}

body.page-template-about-us .abt-life__tile picture {
  display: block;
  position: absolute;
  inset: 0;
}

body.page-template-about-us .abt-life__tile > picture img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Figma 108:3519 — the building photo laid out 880 x 660 at left -250 inside
   the 364-wide tile (880/364, -250/364). */
body.page-template-about-us .abt-life__tile--a > picture img {
  position: absolute;
  left: -68.681%;
  top: 0;
  width: 241.758%;
  height: 100%;
}

/* Figma 108:3532's image: 250.08% x 140.03% at (-83.09%, -15.27%). */
body.page-template-about-us .abt-life__tile--c > picture img {
  position: absolute;
  left: -83.09%;
  top: -15.27%;
  width: 250.08%;
  height: 140.03%;
}

/* Figma's dark bottom gradient + 20% scrim on tiles B, C and D. */
body.page-template-about-us .abt-life__tile--b::after,
body.page-template-about-us .abt-life__tile--c::after,
body.page-template-about-us .abt-life__tile--d::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 74.869%, rgba(0, 0, 0, .64) 100%), rgba(0, 0, 0, .2);
  pointer-events: none;
}

body.page-template-about-us .abt-life__caption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, .7);
  border-radius: 12px;
}

body.page-template-about-us .abt-life__caption img {
  display: block;
  width: 19px;
  height: 19px;
}

body.page-template-about-us .abt-life__caption span {
  display: block;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 15px;
  line-height: 33px;
  color: #fff;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* ==========================================================================
   11. TECHNOLOGY MARQUEE — Figma 108:3559 (band y 8673..9239, 566 tall, white)
   Heading block 952 wide at y 120 (ends 209); pill band 108:3564 at y 247 is
   234 tall but its three 41px rows ink at 269 / 338 / 407 → gaps measured
   ink-to-ink: 60 above the first row, 28 between rows, 118 below the last.
   ========================================================================== */
body.page-template-about-us .abt-tech {
  padding: 120px 0 118px;
  background: #fff;
  overflow: hidden;
}

body.page-template-about-us .abt-tech__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 952px;
  margin: 0 auto;
  text-align: center;
}

/* Figma 108:3563 — this heading is Inter Bold, not the Gelasio used elsewhere. */
body.page-template-about-us .abt-tech__heading {
  margin: 0;
  max-width: 932px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 76px;
  line-height: 78px;
  letter-spacing: -3.46px;
  color: #171717;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-about-us .abt-tech__band {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 60px;
  /* Edge fade — exact stops read off Figma's own mask (tech-marquee-mask.svg):
     transparent at 0, opaque 4%..96%, transparent at 100%. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

/* Figma starts rows 1 and 3 at x 22.54 and row 2 at x -7.46 — the offsets
   live on the ROW so the track's -50% loop maths stays exact. */
body.page-template-about-us .abt-tech__row {
  overflow: hidden;
  padding-left: 22.54px;
}

body.page-template-about-us .abt-tech__row--2 {
  margin-left: -7.46px;
  padding-left: 0;
}

body.page-template-about-us .abt-tech__track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: abt-marquee 46s linear infinite;
}

body.page-template-about-us .abt-tech__row--2 .abt-tech__track {
  animation-direction: reverse;
}

body.page-template-about-us .abt-tech__row--3 .abt-tech__track {
  animation-duration: 54s;
}

@keyframes abt-marquee {
  from { transform: translateX(0); }
  /* Each track holds its 8 pills twice, so half a track is one seamless loop;
     the 10px covers the trailing gap of the first set. */
  to   { transform: translateX(calc(-50% - 10px)); }
}

@media (prefers-reduced-motion: reduce) {
  body.page-template-about-us .abt-tech__track {
    animation: none;
  }

  body.page-template-about-us .abt-team__photo-box,
  body.page-template-about-us .abt-team__photo,
  body.page-template-about-us .abt-team__bio,
  body.page-template-about-us .abt-values__card::before,
  body.page-template-about-us .abt-values__icon,
  body.page-template-about-us .abt-values__title {
    transition: none;
  }

  body.page-template-about-us .abt-tech__row {
    overflow-x: auto;
  }
}

/* Figma's pills are py-14 around 16/24 text marked text-box-trim, so they
   measure 41px tall in the export, not 54. Set explicitly. */
body.page-template-about-us .abt-tech__pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 41px;
  padding: 0 16px;
  box-sizing: border-box;
  background: rgba(245, 243, 248, .16);
  border: 1px solid #dadada;
  border-radius: 12px;
  white-space: nowrap;
}

body.page-template-about-us .abt-tech__pill img {
  display: block;
  flex: none;
  height: 12px;
  width: auto;
}

body.page-template-about-us .abt-tech__pill span {
  display: block;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #171717;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* ==========================================================================
   12. FINAL CTA — Figma 108:3903 (band y 9239..9990, 751 tall, white)
   Card 1265 x 511 at x=128, y=120, radius 10 (finalcta-mask.svg rx=10).
   Copy group 108:3909: eyebrow top 0 → heading top 35.98 (132 box) → body
   top 192.5 (trimmed) → button top 236.5 (56) = 292.5 tall.
   ========================================================================== */
body.page-template-about-us .abt-final {
  padding: 120px 127px 120px 128px; /* card 108:3907 spans x 128..1393 */
  background: #fff;
}

body.page-template-about-us .abt-final__card {
  position: relative;
  max-width: 1265px;
  min-height: 511px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #060014;
  border-radius: 10px;
  overflow: hidden;
}

/* Figma 108:3908 places the art at 1343x549 offset (-34, -27) behind the
   1265x511 mask — deliberately larger than the card and anchored up-left,
   which is what puts the paper plane where it sits. Expressed against the
   card so it scales. */
body.page-template-about-us .abt-final__art {
  position: absolute;
  left: -2.6877%;    /* -34 / 1265 */
  top: -5.2838%;     /* -27 / 511  */
  width: 106.166%;   /* 1343 / 1265 */
  height: 107.4364%; /* 549 / 511 */
  z-index: 0;
}

body.page-template-about-us .abt-final__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

body.page-template-about-us .abt-final__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 40px;
  box-sizing: border-box;
  text-align: center;
}

body.page-template-about-us .abt-final__eyebrow {
  margin: 0 0 21.7px; /* 35.98 - the eyebrow's 14.28 line box */
  text-align: center;
}

/* Figma 108:3910 gives the heading an explicit 132px box; two trimmed 71px
   lines measure ~117 in Chromium, so the box is restored with min-height
   (same finding as the AI pages). */
body.page-template-about-us .abt-final__heading {
  margin: 0;
  max-width: 702px;
  min-height: 132px;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: 63px;
  line-height: 71px;
  color: #fff;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-about-us .abt-final__body {
  margin: 24.5px 0 0;
  max-width: 827px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: #fff;
  opacity: .8;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-about-us .abt-final__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 56px;
  margin-top: 32.4px; /* 236.5 - 192.5 - the trimmed 11.6px body line */
  padding: 0 32px;
  box-sizing: border-box;
  background: var(--color-cta-bg, #f7e934);
  color: var(--color-cta-text, #151515);
  text-decoration: none;
}

body.page-template-about-us .abt-final__btn:hover,
body.page-template-about-us .abt-final__btn:focus-visible {
  color: var(--color-cta-text, #151515);
  text-decoration: none;
}

body.page-template-about-us .abt-final__btn span {
  display: block;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  color: var(--color-cta-text, #151515);
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-about-us .abt-final__btn img {
  display: block;
  flex: none;
  width: 13.5px;
  height: 9.863px;
}

/* ==========================================================================
   RESPONSIVE — INTERPRETED
   Node 108:3228 is the only frame in the file: there is no tablet or mobile
   frame anywhere in it, so everything below is this build's own
   interpretation and is NOT Figma-verified.
   ========================================================================== */

/* ---- <= 1519px: the 1440 content box stops fitting; relax the fixed
        column widths that were measured against it. ---- */
@media (max-width: 1519px) {
  body.page-template-about-us .abt-stats__row {
    gap: 64px;
  }

  body.page-template-about-us .abt-stats__list {
    gap: 24px;
  }

  body.page-template-about-us .abt-who__row {
    gap: 48px;
  }

  body.page-template-about-us .abt-who__main {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  body.page-template-about-us .abt-who__list {
    height: auto;
  }

  body.page-template-about-us .abt-timeline__head,
  body.page-template-about-us .abt-timeline__row {
    gap: 48px;
  }

  body.page-template-about-us .abt-timeline__col::after {
    right: -48px;
  }

  body.page-template-about-us .abt-timeline__col--4::after {
    right: 0;
  }

  body.page-template-about-us .abt-timeline__col--2 {
    flex: 1 1 0;
    width: auto;
  }

  body.page-template-about-us .abt-creds__inner {
    padding-left: var(--abt-gutter);
    padding-right: var(--abt-gutter);
  }

  body.page-template-about-us .abt-creds__band-body {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  body.page-template-about-us .abt-team__head {
    width: 100%;
  }

  body.page-template-about-us .abt-team__grid {
    align-items: flex-start;
  }

  body.page-template-about-us .abt-team__card {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  body.page-template-about-us .abt-team__tile {
    height: auto;
    aspect-ratio: 445.53 / 513.609;
  }

  body.page-template-about-us .abt-values__grid {
    height: auto;
    align-items: stretch;
  }

  body.page-template-about-us .abt-values__card,
  body.page-template-about-us .abt-values__card--4 {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;
    min-height: 420px;
  }

  body.page-template-about-us .abt-life__collage {
    grid-template-rows: auto auto;
  }

  body.page-template-about-us .abt-life__tile--a {
    min-height: 100%;
  }

  body.page-template-about-us .abt-life__tile--b,
  body.page-template-about-us .abt-life__tile--c,
  body.page-template-about-us .abt-life__tile--d {
    aspect-ratio: 300.5 / 322;
  }

  body.page-template-about-us .abt-life__tile--b {
    aspect-ratio: 617 / 322;
  }

  body.page-template-about-us .abt-final {
    padding: 120px var(--abt-gutter);
  }
}

/* ---- <= 1279px ---- */
@media (max-width: 1279px) {
  body.page-template-about-us .abt-head__title,
  body.page-template-about-us .abt-creds__heading,
  body.page-template-about-us .abt-work__heading,
  body.page-template-about-us .abt-tech__heading {
    font-size: 58px;
    line-height: 62px;
    letter-spacing: -2.4px;
  }

  body.page-template-about-us .abt-final__heading {
    min-height: 0;
    font-size: 48px;
    line-height: 54px;
  }

  body.page-template-about-us .abt-stats__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  body.page-template-about-us .abt-stats {
    padding-bottom: 55px;
  }

  body.page-template-about-us .abt-stats__intro,
  body.page-template-about-us .abt-stats__list {
    width: 100%;
  }

  body.page-template-about-us .abt-stats__stat:nth-child(1) .abt-stats__caption,
  body.page-template-about-us .abt-stats__stat:nth-child(3) .abt-stats__caption {
    max-width: none;
  }

  body.page-template-about-us .abt-stats__caption-box,
  body.page-template-about-us .abt-stats__stat:nth-child(1) .abt-stats__caption-box,
  body.page-template-about-us .abt-stats__stat:nth-child(3) .abt-stats__caption-box {
    height: auto;
    padding-top: 0;
  }

  body.page-template-about-us .abt-who__card {
    width: 420px;
    padding: 40px 40px 56px;
  }

  body.page-template-about-us .abt-who__card::after {
    left: auto;
    right: -126px;
    top: auto;
    bottom: -128px;
  }

  body.page-template-about-us .abt-timeline__head-left,
  body.page-template-about-us .abt-testi__head-left,
  body.page-template-about-us .abt-values__head-left {
    width: 400px;
  }

  body.page-template-about-us .abt-timeline__row {
    flex-wrap: wrap;
    row-gap: 48px;
  }

  body.page-template-about-us .abt-timeline__col,
  body.page-template-about-us .abt-timeline__col--2 {
    flex: 0 0 calc(50% - 24px);
    width: auto;
  }

  body.page-template-about-us .abt-timeline__col--2::after,
  body.page-template-about-us .abt-timeline__col--4::after {
    right: 0;
  }

  body.page-template-about-us .abt-timeline__col--2 .abt-timeline__body p:first-child,
  body.page-template-about-us .abt-timeline__col--3 .abt-timeline__title,
  body.page-template-about-us .abt-timeline__col--3 .abt-timeline__body p:last-child,
  body.page-template-about-us .abt-timeline__col--4 .abt-timeline__body p {
    max-width: none;
  }

  body.page-template-about-us .abt-creds__band {
    gap: 40px;
  }

  body.page-template-about-us .abt-work__panel {
    grid-template-columns: minmax(0, 1fr) 380px;
  }

  body.page-template-about-us .abt-values__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-template-about-us .abt-values__card--1 .abt-values__body p:first-child {
    max-width: none;
  }

  body.page-template-about-us .abt-life__inner {
    flex-direction: column;
    gap: 48px;
  }

  body.page-template-about-us .abt-life__copy {
    width: 100%;
    max-width: 640px;
  }

  body.page-template-about-us .abt-life__collage {
    width: 100%;
  }
}

/* ---- <= 1023px: two-column bands become one column. ---- */
@media (max-width: 1023px) {
  body.page-template-about-us .abt-hero {
    min-height: 0;
  }

  body.page-template-about-us .abt-hero__inner {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  body.page-template-about-us .abt-stats__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }

  body.page-template-about-us .abt-who__row {
    flex-direction: column;
    gap: 48px;
  }

  body.page-template-about-us .abt-who__main {
    width: 100%;
  }

  body.page-template-about-us .abt-who__card {
    width: 100%;
    max-width: 481px;
    margin-top: 0;
  }

  body.page-template-about-us .abt-timeline__head,
  body.page-template-about-us .abt-testi__head,
  body.page-template-about-us .abt-values__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  body.page-template-about-us .abt-timeline__head-left,
  body.page-template-about-us .abt-testi__head-left,
  body.page-template-about-us .abt-values__head-left {
    width: 100%;
  }

  body.page-template-about-us .abt-timeline__inner {
    min-height: 0;
  }

  body.page-template-about-us .abt-creds__grid {
    flex-direction: column;
  }

  body.page-template-about-us .abt-creds__card {
    flex: none;
  }

  body.page-template-about-us .abt-creds__band {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  body.page-template-about-us .abt-creds__band-title {
    flex: none;
  }

  body.page-template-about-us .abt-work__tabs {
    flex-wrap: wrap;
  }

  body.page-template-about-us .abt-work__tab {
    flex: 0 0 calc(50% - 8px);
  }

  body.page-template-about-us .abt-work__panel {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  body.page-template-about-us .abt-work__video {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  body.page-template-about-us .abt-work__detail {
    padding: 40px;
  }

  body.page-template-about-us .abt-work__body {
    max-width: none;
  }

  body.page-template-about-us .abt-testi__grid {
    flex-direction: column;
  }

  body.page-template-about-us .abt-testi__card {
    flex: none;
  }

  body.page-template-about-us .abt-testi__title--1,
  body.page-template-about-us .abt-testi__title--2 {
    max-width: none;
  }

  body.page-template-about-us .abt-team__head {
    min-height: 0;
  }

  body.page-template-about-us .abt-team__head-left {
    width: 100%;
  }

  body.page-template-about-us .abt-team__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }

  body.page-template-about-us .abt-team__card--1,
  body.page-template-about-us .abt-team__card--2,
  body.page-template-about-us .abt-team__card--3 {
    padding: 0;
  }

  body.page-template-about-us .abt-team__name,
  body.page-template-about-us .abt-team__role {
    white-space: normal;
  }

  body.page-template-about-us .abt-life__collage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
  }

  body.page-template-about-us .abt-life__tile--a {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  body.page-template-about-us .abt-life__tile--b {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: 300.5 / 322;
  }

  body.page-template-about-us .abt-life__tile--c {
    grid-column: 2;
    grid-row: 2;
  }

  body.page-template-about-us .abt-life__tile--d {
    grid-column: 1 / 3;
    grid-row: 3;
    aspect-ratio: 617 / 322;
  }

  body.page-template-about-us .abt-life__tile--a > picture img {
    left: 0;
    width: 100%;
  }

  body.page-template-about-us .abt-life__tile--c > picture img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  body.page-template-about-us .abt-creds__title,
  body.page-template-about-us .abt-work__title,
  body.page-template-about-us .abt-testi__name,
  body.page-template-about-us .abt-testi__role {
    white-space: normal;
  }

  body.page-template-about-us .abt-testi__name,
  body.page-template-about-us .abt-testi__role {
    height: auto;
  }
}

/* ---- <= 767px ---- */
@media (max-width: 767px) {
  body.page-template-about-us .abt-head__title,
  body.page-template-about-us .abt-creds__heading,
  body.page-template-about-us .abt-work__heading,
  body.page-template-about-us .abt-tech__heading {
    font-size: 44px;
    line-height: 48px;
    letter-spacing: -1.8px;
  }

  body.page-template-about-us .abt-final__heading {
    font-size: 36px;
    line-height: 42px;
  }

  body.page-template-about-us .abt-hero__inner {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  body.page-template-about-us .abt-hero__text p {
    font-size: 20px;
    line-height: 32px;
  }

  body.page-template-about-us .abt-stats__stat {
    padding-left: 16px;
  }

  body.page-template-about-us .abt-stats__num {
    font-size: 44px;
    line-height: 44px;
    top: 0;
  }

  body.page-template-about-us .abt-who,
  body.page-template-about-us .abt-timeline,
  body.page-template-about-us .abt-creds,
  body.page-template-about-us .abt-work,
  body.page-template-about-us .abt-testi,
  body.page-template-about-us .abt-team,
  body.page-template-about-us .abt-values,
  body.page-template-about-us .abt-life,
  body.page-template-about-us .abt-tech,
  body.page-template-about-us .abt-final {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  body.page-template-about-us .abt-who__item {
    min-height: 0;
    padding-bottom: 20px;
  }

  body.page-template-about-us .abt-who__text {
    font-size: 17px;
    line-height: 28px;
  }

  body.page-template-about-us .abt-who__card {
    padding: 32px 28px 40px;
  }

  body.page-template-about-us .abt-who__card-lead,
  body.page-template-about-us .abt-who__card-body,
  body.page-template-about-us .abt-timeline__lede p,
  body.page-template-about-us .abt-testi__lede,
  body.page-template-about-us .abt-values__lede {
    font-size: 17px;
    line-height: 28px;
  }

  body.page-template-about-us .abt-timeline__col,
  body.page-template-about-us .abt-timeline__col--2 {
    flex: 0 0 100%;
  }

  body.page-template-about-us .abt-timeline__col::after {
    display: none;
  }

  body.page-template-about-us .abt-creds__card {
    padding: 40px 24px 40px;
  }

  body.page-template-about-us .abt-creds__band {
    padding: 28px 24px;
  }

  body.page-template-about-us .abt-creds__band-title {
    font-size: 26px;
    letter-spacing: -1.4px;
  }

  body.page-template-about-us .abt-work__tab {
    flex: 0 0 100%;
  }

  body.page-template-about-us .abt-work__detail {
    padding: 32px 24px;
  }

  body.page-template-about-us .abt-work__title {
    font-size: 36px;
  }

  body.page-template-about-us .abt-work__play {
    left: 16px;
    bottom: 16px;
  }

  body.page-template-about-us .abt-testi__media {
    height: auto;
    aspect-ratio: 613 / 289.125;
  }

  body.page-template-about-us .abt-testi__play {
    top: auto;
    bottom: 20px;
  }

  body.page-template-about-us .abt-testi__content {
    padding: 28px 24px;
  }

  body.page-template-about-us .abt-testi__quote {
    font-size: 22px;
    line-height: 32px;
  }

  body.page-template-about-us .abt-team__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-template-about-us .abt-values__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-template-about-us .abt-values__card,
  body.page-template-about-us .abt-values__card--4 {
    min-height: 0;
    padding: 28px 24px 40px;
    gap: 28px;
  }

  body.page-template-about-us .abt-life__actions {
    width: 100%;
    max-width: 268px;
  }

  body.page-template-about-us .abt-tech__band {
    margin-top: 40px;
  }

  body.page-template-about-us .abt-final__card {
    min-height: 0;
  }

  body.page-template-about-us .abt-final__inner {
    padding: 56px 24px;
  }

  body.page-template-about-us .abt-final__body {
    margin-top: 20px;
  }

  body.page-template-about-us .abt-final__btn {
    margin-top: 28px;
  }
}

/* ---- <= 479px ---- */
@media (max-width: 479px) {
  body.page-template-about-us .abt-head__title,
  body.page-template-about-us .abt-creds__heading,
  body.page-template-about-us .abt-work__heading,
  body.page-template-about-us .abt-tech__heading {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -1.2px;
  }

  body.page-template-about-us .abt-stats__list {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-template-about-us .abt-life__collage {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-template-about-us .abt-life__tile--a,
  body.page-template-about-us .abt-life__tile--b,
  body.page-template-about-us .abt-life__tile--c,
  body.page-template-about-us .abt-life__tile--d {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }

  body.page-template-about-us .abt-life__tile--a {
    min-height: 0;
  }

  body.page-template-about-us .abt-creds__band-title {
    font-size: 24px;
  }

  body.page-template-about-us .abt-work__chips {
    flex-wrap: wrap;
  }

  body.page-template-about-us .abt-work__steps {
    flex-wrap: wrap;
  }

  body.page-template-about-us .abt-final__heading {
    font-size: 30px;
    line-height: 36px;
  }
}