/* 2.4.6 — literal sweep: a literal whose value IS a token became it; the rest is a value this
   file paints by hand and is counted in the report. The names are global-2026.css's own aliases (2.4.2); a value only the system holds is written --pui-*. */
    /* =========================================================================
       PAGE: ABOUT US — page-specific CSS.
       Design tokens, body resets, .nav-bar-wrap / .main-nav* / .mobile-nav*,
       .footer-2026 and the global overflow-x / min-width rules all live in
       /css/new/global-2026.css. This file only contains about-page component
       CSS, all scoped under .page-aboutus so it can't leak into other pages.
       ========================================================================= */

    /* ---------- Anti-cascade overrides (defeat layout.min.css + bootstrap.min.css) ---------- */
/* 2.4.2 — guard: the page's anti-cascade resets (`button`, `a:link…`) outrank a one-class component (0,1,1 / 0,2,1 over
   0,1,0); they now skip any element carrying a pui- class (inside :where(), so their specificity is unchanged — D60) and the package paints its own. */
    .page-aboutus a:where(:not([class*="pui-"])):link,
    .page-aboutus a:where(:not([class*="pui-"])):visited,
    .page-aboutus a:where(:not([class*="pui-"])):hover,
    .page-aboutus a:where(:not([class*="pui-"])):focus,
    .page-aboutus a:where(:not([class*="pui-"])):active { color: inherit; text-decoration: none; }

    .page-aboutus button:where(:not([class*="pui-"])) {
      font-family: inherit;
      border: 0;
      background: transparent;
      padding: 0;
      cursor: pointer;
    }

    .page-aboutus img { display: block; max-width: 100%; }

    .page-aboutus .container {
      width: 1320px;
      max-width: 1320px;
      padding-left: var(--pui-space-12);
      padding-right: var(--pui-space-12);
      margin-left: auto;
      margin-right: auto;
      position: relative;
    }

    
    /* ---------- Page shell / sticky footer ---------- */
    .page-aboutus {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .page-aboutus .au-main {
      flex: 1 0 auto;
      display: flex;
      flex-direction: column;
      padding-top: var(--page-top);   /* the eyebrow's line — --page-top in global-2026.css (132 / 116 / 96), no per-breakpoint line */
    }
    /* Footer is the shared blocks/footer-2026 partial (.footer-2026), not the
       prototype's .footer-wrap. Its place (space/128 above, space/24 below) is the footer's own,
       in global-2026.css — this page sets nothing around it. */

    /* ===========================================================
       HERO HEADER — eyebrow + centered title.
       The eyebrow uses the global .page-eyebrow class (global-2026.css) — no
       local eyebrow rule here; that one class is the single source for the
       eyebrow on every 2026 page. It keeps the global left alignment; the
       :where(.au-hero) .pui-text--headline-large centers itself.
       =========================================================== */
    .page-aboutus :where(.au-hero) .pui-text--headline-large {
      margin: 0;
      color: var(--pui-text-default);
      text-align: center;
    }

    /* ===========================================================
       HERO COVER — team photo banner (radius 32)
       =========================================================== */
    .page-aboutus .au-cover-wrap { margin-top: var(--pui-space-32); }
    .page-aboutus .au-cover {
      width: 100%;
      height: auto;
      border-radius: var(--pui-radius-32);
      display: block;
    }

    /* ===========================================================
       ABOUT MOBUPPS — intro + highlighted leadership card
       =========================================================== */
    .page-aboutus .au-about {
      margin-top: var(--pui-space-32);
      display: flex;
      align-items: center;
      gap: 0;
    }
    .page-aboutus .au-about__intro { flex: 0 0 638px; max-width: 638px; }
    .page-aboutus :where(.au-about__intro) > .pui-text--headline-small {
      margin: 0 0 var(--pui-space-16);
    }
    .page-aboutus :where(.au-about__intro) > .pui-text--body-large {
      margin: 0 0 var(--pui-space-16);
      color: var(--pui-text-subtle);
    }
    .page-aboutus :where(.au-about__intro) > .pui-text--body-large:last-child { margin-bottom: 0; }
    .page-aboutus .au-about__lead {
      flex: 1 1 auto;
      display: flex;
      justify-content: center;
    }

    /* ===========================================================
       TEAM CARD (shared between leadership card + grid)
       =========================================================== */
    .page-aboutus :where(.au-about__lead, .au-team__grid) > .pui-card {
      width: 100%;
      text-align: left;
      /* the inset is the block's (preview-card, global-2026.css) — 2026-10-05 */
      /* Card hover is the SHARED 2026 card interaction — identical to the
         .case-card on /casestudies (cases.css) and the .blog-card on /blog
         (blog.css): Figma shadow_XL + a 4px lift, with the arrow sliding
         top-right (see .team-card__arrow below). Keep the three in sync. */
  /* B — the white box, the 1 px border/default line and radius 16 are .pui-card--border (the blog card's mapping); `padding: 20px 20px 0` stays — the site's card grid is built on 20 (stated); the card's own gap (layout/card/gap, 12) now separates photo and foot */
}
    .page-aboutus :where(.au-about__lead) > .pui-card { width: 328px; }

    /* Photo height derives from the card's inner width via aspect-ratio, so the
       same rule yields the exact Figma photo size at every breakpoint
       (desktop 266×300 / tablet 219×247 / mobile 157×177). */
    .page-aboutus :where(.au-about__lead, .au-team__grid) .pui-card__media {
      position: relative;
      display: block;
      aspect-ratio: 266 / 300;
  /* B — the 8 radius and the crop are .pui-card__media; the site's 266/300 aspect, the position for the glow and the glow itself stay */
}
    .page-aboutus .au-about__lead > .pui-card > .pui-card__media { aspect-ratio: 288 / 300; }
    .page-aboutus :where(.au-about__lead, .au-team__grid) .pui-card__media img {
      object-position: center top;
  /* B — the kit's media image (block, 100 %, cover); `object-position: center top` stays the site's */
}

    /* Red→pink glow laid over the (black & white) photo via CSS. Adding a new
       member is just a B&W image swap — the gradient is never baked into the file.
       Matches the Figma radial gradient (focal ~82% / 106%, ~44% strength). */
    .page-aboutus :where(.au-about__lead, .au-team__grid) .pui-card__media::after,
    .page-aboutus .team-popup__photo::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      background: radial-gradient(135% 120% at 82% 106%,
        color-mix(in srgb, var(--pui-color-red-400) 44%, transparent) 0%,
        rgba(229, 44, 56, 0.41) 6%,
        rgba(229, 52, 79, 0.38) 12%,
        rgba(230, 66, 125, 0.32) 23%,
        rgba(232, 96, 216, 0.20) 46%,
        rgba(244, 175, 236, 0.10) 73%,
        color-mix(in srgb, var(--pui-color-neutral-0) 0%, transparent) 100%);
    }
    /* C2 — Fedor's find: the arrow is the kit's arrow-up-right at the Icon button's 16, the same as the case cards'; the site's 13 px rotated arrow-right went */

    /* Grid team cards (not the featured lead card): body text 16px, 4px gap
       between name/role, and arrows aligned across each row — space-between
       bottom-anchors the foot so every (flex-end) arrow lands on one line. */
    .page-aboutus .au-team__grid > .pui-card { justify-content: space-between; }
    
    .page-aboutus .au-team__grid .pui-card__title,
    .page-aboutus .au-team__grid .pui-card__description { font-size: var(--pui-font-size-16); }

    /* ===========================================================
       TEAM GRID
       =========================================================== */
    .page-aboutus .au-team { margin-top: var(--pui-space-64); }
    .page-aboutus .au-team__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px 24px;
    }

    /* ===========================================================
       SECTION TITLE (Key facts / Our story / Locations)
       =========================================================== */
    .page-aboutus :where(section) > .pui-text--headline-small {
      margin: 0 0 var(--pui-space-32);
    }

    /* ===========================================================
       KEY FACTS — 4 colored stat cards
       =========================================================== */
    .page-aboutus .au-facts { margin-top: var(--pui-layout-page-section-gap); }
    .page-aboutus .au-facts__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--pui-space-40) var(--pui-space-32);
    }
    .page-aboutus .pui-kpi-tile {
      height: 172px;
  /* A2 — the tile (radius 16, padding 20, the two blocks pushed apart) is .pui-kpi-tile — kpi-tile.css names the site's stat cards; the fixed height and width stay the site's grid (the kit hugs); the frost stays (stated) */
}
/* A2 — the tint is the tile's tone (kpi/tone/{tone}/bg — the same 100 tints) */

    .page-aboutus .pui-kpi-tile__value {
      margin: 0;
      white-space: nowrap;
  /* A2 — the value (title/large: 36 SemiBold on a 1.2 line, text/default for the site's neutral/800 — stated) is .pui-kpi-tile__value */
}
    
/* A2 — the tag's tint and ink are tint/{tone} (the same 200-on-300 pairs; neutral's ink neutral/600 for the site's 400 — stated, R5) */

    .page-aboutus .pui-kpi-tile__label {
      margin: 0;
  /* A2 — the label (body/small on a 1.4 line) is .pui-kpi-tile__label; its 12 px inset goes — the tile's padding is the box (stated) */
}

    /* ===========================================================
       OUR STORY — centered timeline slider
       =========================================================== */
    .page-aboutus .au-story { margin-top: var(--pui-layout-page-section-gap); }
    /* The timeline's axis is the dots' centre: the panel's top padding + the year's line box (the kit's
       title/large role) + the dot's gap + half the dot. It is computed from the type token, so the line
       and the arrows follow the year at every width and through any kit release (2026-10-16: it was a
       typed 118 px, and the dots left the line when the year took the kit's 1.2 line height).
       --story-arrow-x = the panel's centre to an arrow's outer edge. */
    .page-aboutus .story-panel {
      --story-top: var(--pui-space-48);
      --story-dot: 12px;
      --story-dot-gap: 10px;
      --story-axis: calc(var(--story-top) + var(--pui-type-title-large-font-size) * var(--pui-type-title-large-line-height) + var(--story-dot-gap) + var(--story-dot) / 2);
      --story-arrow-x: 210px;
      position: relative;
      height: 259px;
      padding-top: var(--story-top);
      overflow: hidden;
      background: var(--pui-color-light-blue-100);
      border-radius: var(--pui-radius-16);
      box-shadow: var(--pui-shadow-xxl-soft);
    }
    /* Horizontal timeline line — 3px dashed, centred on the axis (the stroke is
       offset up 1.5px). Where the arrows stand it is cut away (a mask on the
       site's own line), so the kit's arrow — a ring on transparent — needs no
       fill of its own; each window is the arrow's box (the kit's space/40). */
    .page-aboutus .story-line {
      position: absolute;
      left: 32px;
      right: 32px;
      top: calc(var(--story-axis) - 1.5px);
      height: 0;
      border-top: 3px dashed var(--pui-color-neutral-200);
      z-index: 0;
      --story-line-mask: linear-gradient(to right,
        var(--pui-color-neutral-1000) calc(50% - var(--story-arrow-x)),
        transparent 0 calc(50% - var(--story-arrow-x) + var(--pui-space-40)),
        var(--pui-color-neutral-1000) 0 calc(50% + var(--story-arrow-x) - var(--pui-space-40)),
        transparent 0 calc(50% + var(--story-arrow-x)),
        var(--pui-color-neutral-1000) 0);
      -webkit-mask-image: var(--story-line-mask);
              mask-image: var(--story-line-mask);
    }
    .page-aboutus .story-swiper {
      position: relative;
      z-index: 1;
      width: 100%;
      overflow: hidden;
    }
    .page-aboutus .story-swiper .swiper-slide { height: auto; }

    .page-aboutus .story-item {
      width: 242px;             /* max slide width per design (Swiper slidesPerView:auto) */
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      filter: blur(2.75px);
      transition: filter 0.3s ease, color 0.3s ease;
      color: var(--pui-color-neutral-300);
    }
    .page-aboutus .story-item.swiper-slide-active { filter: none; color: var(--pui-color-neutral-1000); }
    .page-aboutus :where(.story-item) > .pui-text--title-large {
      margin: 0;
      color: inherit;
    }
    /* Hollow ring dot (Figma Ellipse 3): white fill, 2px neutral-600 stroke.
       Same for active + inactive — the side items only differ by blur. */
    .page-aboutus .story-item__dot {
      width: var(--story-dot);
      height: var(--story-dot);
      margin-top: var(--story-dot-gap);
      border-radius: 50%;
      background: var(--pui-color-neutral-0);
      border: 2px solid var(--pui-color-neutral-600);
      flex: 0 0 var(--story-dot);
    }
    .page-aboutus :where(.story-item) > .pui-text--body-small {
      margin: 15px 0 0;
      color: inherit;
    }

    /* Slider nav buttons — the kit's Carousel arrow, the same component as the
       home reviews: its look and every state (rest, hover, focus, disabled) are
       pepper-ui.css's. This file only places the two arrows on the axis. */
    .page-aboutus :where(.story-panel) > .pui-carousel-arrow {
      position: absolute;
      top: var(--story-axis);
      transform: translateY(-50%);
      z-index: 3;
    }
    .page-aboutus :where(.story-panel) > .pui-carousel-arrow:first-of-type { left: calc(50% - var(--story-arrow-x)); }
    .page-aboutus :where(.story-panel) > .pui-carousel-arrow:last-of-type { right: calc(50% - var(--story-arrow-x)); }

    /* ===========================================================
       LOCATIONS — dotted world map + floating flags bar
       =========================================================== */
    .page-aboutus .au-locations { margin-top: var(--pui-layout-page-section-gap); }
    /* The map SVG is taller than the design card; crop it to the Figma desktop
       card ratio (1296×640). The SVG bakes its own rounded bg, but cropping cuts
       those corners — so the container re-rounds + clips to keep clean corners. */
    .page-aboutus .locations-stage {
      position: relative;
      aspect-ratio: 1296 / 640;
      border-radius: var(--pui-radius-32);
      overflow: hidden;
    }
    .page-aboutus .locations-map {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }
    .page-aboutus .locations-flags {
      position: absolute;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      width: 772px;
      max-width: calc(100% - 64px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--pui-space-8);
      padding: var(--pui-space-12);
      background: color-mix(in srgb, var(--pui-color-neutral-0) 68%, transparent);
      backdrop-filter: blur(3.8px);
      -webkit-backdrop-filter: blur(3.8px);
      border-radius: var(--pui-radius-8);
      box-shadow: var(--pui-elevation-card);
    }
    .page-aboutus .locations-flags img {
      width: 49px;
      height: 27.43px;
      border-radius: var(--pui-radius-4);
      object-fit: cover;
      flex: 0 0 auto;
    }

    /* ===========================================================
       TEAM MEMBER POPUP — scrim + centered modal.
       Scrim + close cross are the shared site treatment (unchanged).
       Card content matches the Figma concept (Card/Basic/Main):
       photo + name/role beside it, then bio. Appearance: ease-in on
       open, ease-out on close (opacity + subtle scale).
       =========================================================== */
    .page-aboutus .pui-scrim {
      z-index: 9999;
      overflow-y: auto;
      opacity: 0;
      transition: opacity 0.22s ease-out;          /* close = ease-out */
  /* A3 — the scrim (fixed, centred, padding 16 — the site's 24; overlay/scrim at 50 % — the site's 66 %; no blur — the site's 9.75, stated) is .pui-scrim; `z-index` 9999 stays — the kit's 50 sits under the site's fixed bar (100); the open/close fade stays the site's */
}
    .page-aboutus .pui-scrim.is-hidden { display: none; }
    .page-aboutus .pui-scrim.is-open {
      opacity: 1;
      transition: opacity 0.3s ease-in;            /* open = ease-in */
    }
    body.popup-open { overflow: hidden; }

    .page-aboutus .pui-dialog {
      opacity: 0;
      transform: translateY(10px) scale(0.97);
      transform-origin: center;
      transition: opacity 0.22s ease-out, transform 0.22s ease-out;   /* close */
  /* A3 — the card (480 — the site's 582, stated; padding 24 — the site's 10 / 20 / 20; surface/card — the site's light-blue/100 is the same #f2f2f7; radius 16; elevation/modal — the site's 0 16 48 at 14 %, stated; column at gap 16) is .pui-dialog--medium; the rise stays the site's */
}
    .page-aboutus .pui-scrim.is-open .pui-dialog {
      opacity: 1;
      transform: none;
      transition: opacity 0.3s ease-in, transform 0.34s ease-in;      /* open */
    }
    /* 2026-10-05 — the header is the kit's row (texts + close, tops aligned); the site's flex-end went with the photo block moving into it */
/* A3 — the cross is an inline glyph in the button's ink */

    .page-aboutus .team-popup__slot { display: flex; flex-direction: column; gap: var(--pui-space-24); flex: 1 1 auto; min-height: 0; }   /* B2 — Fedor: the photo, name and role sit on the tint; only the bio is the Dialog's white content slot (.pui-dialog__content moved onto .team-popup__bio); the column can shrink so the bio scrolls in a short viewport */
    .page-aboutus .team-popup__head { flex: 1 1 auto; min-width: 0; display: flex; gap: var(--pui-space-12); align-items: flex-end; }   /* the header's texts: fills the row, the close keeps the right */
    .page-aboutus .team-popup__photo {
      position: relative;
      flex: 0 0 184px;
      width: 184px;
      height: 207px;
      border-radius: var(--pui-radius-8);
      overflow: hidden;
    }
    .page-aboutus .team-popup__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
    .page-aboutus .team-popup__meta { flex: 1 1 0; min-width: 0; }
    .page-aboutus .team-popup__name {
      margin: 0;
      font-family: var(--pui-font-family-poppins);
      font-weight: var(--pui-font-weight-700);   /* B2 — Fedor: the popup's name is Bold like the card's, the role Regular — font/weight/700 by name (request 17) */
      font-size: var(--pui-type-body-medium-font-size);
      line-height: var(--pui-font-line-height-relaxed);
      color: var(--pui-text-default);
    }
    .page-aboutus .team-popup__role {
      margin: 0;
      font-family: var(--pui-font-family-poppins);
      font-weight: var(--pui-font-weight-400);
      font-size: var(--pui-type-body-medium-font-size);
      line-height: var(--pui-font-line-height-relaxed);
      color: var(--pui-text-default);
    }
    .page-aboutus .pui-dialog__content { margin: 0; }   /* B2 — the Dialog's white content slot (surface/slot, radius 8, padding 16, scrolls) — only the text, per Fedor */
    .page-aboutus .pui-dialog__content p {
      margin: 0;
      font-family: var(--pui-font-family-poppins);
      font-weight: var(--pui-font-weight-400);
      font-size: var(--pui-type-body-medium-font-size);
      line-height: var(--pui-font-line-height-relaxed);
      color: var(--pui-text-default);
    }
    .page-aboutus .pui-dialog__content p + p { margin-top: var(--pui-space-16); }   /* A3 — on the scale (was 18) */

    @media (prefers-reduced-motion: reduce) {
      .page-aboutus .pui-scrim,
      .page-aboutus .pui-dialog { transition: none; }
    }

    /* =========================================================================
       TABLET (768–1023) — also sets the compact card sizing shared with mobile.
       ========================================================================= */
    @media (max-width: 1023px) {
      .page-aboutus .container {
        width: 100%;
        max-width: 100%;
        padding-left: var(--pui-space-32);
        padding-right: var(--pui-space-32);
      }

      /* About: two equal halves; the lead card is centered in its half (the
         visual gap comes from that centering, like the design — no flex gap). */
      .page-aboutus .au-about { gap: 0; }
      .page-aboutus .au-about__intro { flex: 0 0 50%; max-width: 50%; }

      /* Team grid → 3 columns, compact card padding (photo auto-sizes). */
      .page-aboutus .au-team { margin-top: var(--pui-space-32); }
      .page-aboutus .au-team__grid { grid-template-columns: repeat(3, 1fr); gap: 22px 20px; }
      .page-aboutus .au-about__lead > .preview-card { padding: var(--pui-space-20) var(--pui-space-20) var(--pui-space-12); }   /* the lead card is 328 wide at every width and keeps the desktop inset; the grids' cards go compact below the desktop width (the block's rule, global-2026.css) */

      /* Key facts → 4 across × 2 rows on tablet. Cards narrow, so the badge
         drops BELOW the number (num + chip stacked vertically), matching MAFO. */
      .page-aboutus .au-facts__grid { gap: var(--pui-space-32) var(--pui-space-16); }
      .page-aboutus .pui-kpi-tile { height: 149px; }
/* A2 — the tablet inset goes with the desktop one */

      /* Tablet design barely clips the map — show it (near) full height. */
      .page-aboutus .locations-stage { aspect-ratio: auto; }
      .page-aboutus .locations-map { height: auto; }
    }

    /* =========================================================================
       MOBILE (<768)
       ========================================================================= */
    @media (max-width: 767px) {
      .page-aboutus .container {
        padding-left: var(--pui-space-16);
        padding-right: var(--pui-space-16);
      }

      .page-aboutus :where(.au-hero) .pui-text--headline-large {
        text-align: left;
      }
      .page-aboutus .au-cover { border-radius: var(--pui-radius-16); }
      .page-aboutus :where(section) > .pui-text--headline-small { margin-bottom: var(--pui-space-16); }

      /* About → stacked, lead card centered */
      .page-aboutus .au-about {
        flex-direction: column;
        align-items: stretch;
        gap: var(--pui-space-32);
      }
      .page-aboutus .au-about__intro { flex: 1 1 auto; max-width: 100%; }
      .page-aboutus .au-about__lead { justify-content: center; }
      .page-aboutus :where(.au-about__lead) > .pui-card { width: 328px; max-width: 100%; }

      /* Team grid → 2 columns, tight gutter, smaller arrow */
      .page-aboutus .au-team { margin-top: var(--pui-space-24); }
      .page-aboutus .au-team__grid { grid-template-columns: repeat(2, 1fr); gap: 22px 8px; }
/* B — the Icon button's small is 28 at every width (the site's 20 at mobile had no kit size) */

      /* Key facts → 2 columns */
      .page-aboutus .au-facts__grid { grid-template-columns: repeat(2, 1fr); gap: 16px 13px; }

      /* Our story → compact 259px panel, arrows centered below the timeline */
      .page-aboutus .story-panel { --story-top: 21px; height: 259px; }
      .page-aboutus .story-line { -webkit-mask-image: none; mask-image: none; }   /* the arrows sit under the timeline here */
      .page-aboutus :where(.story-panel) > .pui-carousel-arrow {
        top: auto;
        bottom: 22px;
        transform: none;
      }
      .page-aboutus :where(.story-panel) > .pui-carousel-arrow:first-of-type { left: calc(50% - 56px); }
      .page-aboutus :where(.story-panel) > .pui-carousel-arrow:last-of-type { right: calc(50% - 56px); }

      /* Locations → no world map on mobile; flags become a full-width 5+4 grid.
         Keep the same white card + shadow as desktop/tablet. */
      .page-aboutus .locations-map { display: none; }
      /* The stage's overflow:hidden (crops the map corners on desktop) would clip
         the card's shadow now that the map is gone and the stage shrinks to the
         card. Let the shadow render. */
      .page-aboutus .locations-stage { overflow: visible; }
      .page-aboutus .locations-flags {
        position: static;
        transform: none;
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 18px 24px;
        padding: var(--pui-space-12);
        background: color-mix(in srgb, var(--pui-color-neutral-0) 68%, transparent);
        backdrop-filter: blur(3.8px);
        -webkit-backdrop-filter: blur(3.8px);
        box-shadow: var(--pui-elevation-card);
      }

      /* Team popup → photo on top, name/role stacked below (Figma mobile concept) */
/* A3 — the scrim pads 16 at every width (the kit's) */
      .page-aboutus .team-popup__head { flex-direction: column; align-items: flex-start; }
    }
  

/* STEP 12 (2026-09-28) — a design-system part carries the design system's classes only; this page reaches a part through the block that holds it
   and states only what is the page's (a width in a row, a place in a grid, a picture's ratio). */
/* the name on a team card is Bold — Fedor's hierarchy (request 17) */
.page-aboutus .au-team__grid > .pui-card .pui-card__texts { gap: var(--pui-space-4); }
/* STEP 12 · TOKENS — the site's alias names became the design system's; a typed value that equals a token is the token */