/* ==========================================================================
   About Us page (Figma: QF - BilAraby - WebsiteDesign-Concept-2,
   node 40000567:26179 "WHO WE ARE"). Uses the --hr-* tokens declared
   globally in layout-revamp.css.

   NOTE: .abt-hero below reproduces the same "Innerpage-hero" component used
   by Contact Us (.cta-hero in contact-revamp.css) and the Speakers listing
   (.spk-hero in speakers-revamp.css), differing only in the banner asset.
   ========================================================================== */
.about-revamp {
    --hr-green-400: #338a81;
    --hr-green-500: #006d62;
    --hr-yellow-400: #e19d33;
    --hr-yellow-500: #d98500;
    --hr-cream-50: #fefefd;
    --hr-cream-400: #faf9ed;
    --hr-cream-500: #f9f7e9;
    --hr-brown-300: #66655c;
    --hr-brown-400: #49473d;
    --hr-brown-500: #1b190c;
    --hr-brown-900: #0b0b05;
    --hr-blue-300: #548aaf;
    --hr-blue-400: #33739f;
    --hr-blue-500: #005087;
    font-family: 'Almarai', 'Helvetica Neue', Arial, sans-serif;
}
.about-revamp .hr-accent { color: var(--hr-yellow-500); }

footer {
    border-top: 0 !important;
}

/* Teal banner spanning the breadcrumb hero and fading out below it, from
   Figma's own "Gathering Detail Page" Innerpage-hero fill (frame 2147239110)
   checked in as hero-banner.svg — the same var(--*-hero-bg) pattern the other
   inner pages use (contact-revamp.css, bilaraby-talks-revamp.css).

   The SVG export rather than the earlier raster: the PNG has a transparent
   background, so flattening it composites the teal onto black and the banner
   reads far darker than the design. The vector keeps its alpha, so the teal
   (#006d62 at 89%, fading to 0 by ~347px of its 424px box) composites over
   the cream page colour below exactly as Figma does, and it also carries
   Figma's dark radial vignette and fine white grain, which the hand-sampled
   CSS ramp this replaces could not. preserveAspectRatio="none" is set on the
   asset so it stretches to the viewport width. */
.about-revamp {
    position: relative;
    background: var(--hr-cream-500) var(--abt-hero-bg) no-repeat top center;
    background-size: 100% 424px;
}

/* Reused primitive for the testimonials prev/next buttons — same translucent
   white circle as Figma's spec, kept on top of the cream section here (no
   invert filter, unlike the home page's dark-band version). */
.about-revamp .hr-icon-btn {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Figma node 40001286:68347/68348. Fill and shadows are the design's own
       values; the ring is on ::before because it is a GRADIENT stroke, which
       the CSS `border` property cannot express.

       Figma's CSS panel reports the stroke as a flat
       rgba(255,255,255,0.20) — that is lossy, it emits only the gradient's
       first stop, which is why this disc read as invisible against the cream
       page. The SVG export of the same node (Button left/right.svg) carries
       the real paint, a linearGradient running bottom-to-top. Its middle stop
       is #65686F at 39%, and that grey is what actually draws the rim:
       0.39 * 101 + 0.61 * 249 = 191, matching the rendered pixels.

       Shadow layers are the node's filter chain converted one-for-one
       (feOffset dy + 2 * stdDeviation as the blur radius). The panel also
       lists two wider layers, 7px 63px 18px and 4px 40px 16px, both at zero
       alpha; the SVG has no such filters, confirming they are inert, so they
       are left out. */
    position: relative;
    border-radius: 61px;
    border: 0;
    background: rgba(255, 255, 255, 0.20);
    box-shadow:
        0 4px 6.1px 0 rgba(255, 255, 255, 0.23) inset,
        2px 23px 14px 0 rgba(0, 0, 0, 0.02),
        1px 10px 10px 0 rgba(0, 0, 0, 0.03),
        0 3px 6px 0 rgba(0, 0, 0, 0.03);
    flex-shrink: 0;
}
/* The 1.5px gradient rim. Standard gradient-border recipe: paint the
   gradient over the whole box, then mask out everything inside the 1.5px
   padding so only the edge survives. Matches the export's stroke geometry,
   which is centred on a 54.5px rect and so occupies the outermost 1.5px of
   the 56px circle. */
.about-revamp .hr-icon-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* Stated rather than inherited from Bootstrap's reset: the mask trick
       depends on the padding staying inside the 56px box. */
    box-sizing: border-box;
    padding: 1.5px;
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, .2) 0%,
        rgba(101, 104, 111, .39) 74.04%,
        rgba(255, 255, 255, .75) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
/* Figma (node 40001286:68346) exports these arrows pre-coloured blue-500
   (#005087) rather than the home page's dark-band black/white pair, so no
   colour filter is needed here — the asset's own stroke is already correct. */
.about-revamp .hr-icon-btn img { width: 24px; height: 24px; }
/* No hover treatment, per the design. The node's only hover machinery is a
   100px white/50% blurred ellipse, clipped to the circle and set to
   mix-blend-mode: plus-lighter, and it is specced at opacity 0 — so there is
   no second state to match. The rgba(255,255,255,.35) lift that used to be
   here was invented, and on this cream page it only washed the disc out. */

/* Shared diamond primitive: a square turned 45deg.

   Figma draws this the same way everywhere it appears — a 20px square centred
   in its own 28.284px (20 * sqrt(2)) slot, so adjacent diamonds' rotated tips
   meet exactly on the slot boundary. The margin reproduces that slot without
   an extra wrapper per diamond.

   Both geometry rules live here rather than on one caller: the section
   divider already measured itself off Figma and used 20px, while the hero
   divider fell through to a 14px base, so the two runs of the same component
   rendered at different sizes. Callers now vary only by colour. */
.abt-diamond {
    width: 20px;
    height: 20px;
    margin-inline: 4.142px;
    transform: rotate(45deg);
    background: var(--hr-cream-500);
    flex-shrink: 0;
}

/* Figma's angular corner wedges inside the Innerpage-hero instance: two
   DISTINCT vectors, "Pattern-01" (left, 305.329x160.658) and "Pattern-02"
   (right, 305.29x204.731, mix-blend-mode: overlay), each carrying its own
   cream(#f9f7ea)-to-transparent gradient at 10% fill-opacity baked into the
   asset. Previously this rendered one shared flourish mirrored across both
   sides, which is a different shape entirely.

   Both are anchored to the hero's bottom edge — Pattern-01's own y=95.03 +
   160.658 lands on 255.69, i.e. flush with the 256px band — so they stay
   correctly placed when the band shortens at the tablet/mobile breakpoints
   and get clipped from the top rather than drifting off the baseline.

   The slight blur softens the vector edges to match how the wedges read in
   Figma's own render, where the 10% gradient dissolves into the teal rather
   than showing a hard diagonal. */
.abt-hero-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 256px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.abt-hero-decor img {
    position: absolute;
    bottom: 0;
    max-width: none;
    filter: blur(1.5px);
}
.abt-hero-decor-left {
    left: 0;
    width: 305.329px;
    height: 160.658px;
}
.abt-hero-decor-right {
    right: 0;
    width: 305.29px;
    height: 204.731px;
    mix-blend-mode: overlay;
}
/* RTL keeps each pattern on its own visual side by flipping the pair, so the
   composition mirrors with the text direction instead of the taller wedge
   always sitting on the right. */
[dir="rtl"] .abt-hero-decor-left { left: auto; right: 0; transform: scaleX(-1); }
[dir="rtl"] .abt-hero-decor-right { right: auto; left: 0; transform: scaleX(-1); }
@media (max-width: 1199.98px) { .abt-hero-decor { height: 200px; } }
@media (max-width: 767.98px) {
    .abt-hero-decor { height: 160px; }
    /* Scaled down with the band so the wedges keep their proportion of the
       hero width rather than swallowing a phone-width viewport. */
    .abt-hero-decor-left { width: 190px; height: 100px; }
    .abt-hero-decor-right { width: 190px; height: 128px; }
}

/* ---------- Hero / breadcrumb ---------- */
.abt-hero {
    position: relative;
    height: 256px;
    display: flex;
    align-items: flex-end;
    padding: 0 160px 24px;
}
.abt-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1600px;
    width: 100%;
    margin-inline: auto;
}
.abt-breadcrumb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
/* Typography is Figma's two named breadcrumb styles verbatim:
   "Navigation/Nav Item/Regular" (Almarai 400, 20/28, letter-spacing 0) for
   the trail and "Navigation/Nav Item Active/Bold" (the same at 700) for the
   current crumb. line-height and font-weight were both left to inherit
   before, so the row picked up the ambient body leading and whatever weight
   the anchor reset applied rather than the 28px/400 the style specifies.

   The design also paints all three crumbs at FULL #f9f7ea and separates them
   by weight alone — the .8 opacity that used to dim the trail is not in the
   spec, so hover now shifts the underline only. */
.abt-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0;
    color: #f9f7ea;
    text-transform: uppercase;
}
.abt-breadcrumb a {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}
.abt-breadcrumb a:hover { color: inherit; text-decoration: underline; }
.abt-breadcrumb-current { font-weight: 700; }
.abt-breadcrumb-sep {
    width: 1px;
    height: 16px;
    background: rgba(249, 247, 234, .5);
}
.abt-hero-divider { display: none; }
@media (min-width: 1200px) {
    .abt-hero-divider {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        width: 300px;
        margin-inline-end: calc(-160px - max(0px, (100vw - 1920px) / 2));
    }
    .abt-hero-divider-line {
        flex: 1 1 auto;
        height: 1px;
        background: rgba(249, 247, 234, .5);
        /* The last diamond's own 4.142px slot margin supplies the gap now, so
           the extra 4px offset here would double it. */
        margin-inline-start: 0;
    }
}
.abt-hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: rgba(249, 247, 234, .35);
}

/* ---------- Intro: title + description ---------- */
.abt-intro {
    padding: 120px 160px 0;
}
.abt-intro-inner {
    max-width: 1600px;
    margin-inline: auto;
}
.abt-title-row {
    display: grid;
    grid-template-columns: minmax(0, 695fr) minmax(0, 695fr);
    gap: 210px;
    align-items: center;
    margin-bottom: 100px;
}
.abt-title-row h1 {
    /* Figma Headings/H1/Bold: Almarai 700, 64/72 on the 1922 frame — and fluid
       from there, using home-revamp.css .hr-hero-heading's own clamp so the two
       pages' biggest heading ramps identically: 64px at 1922, 44px by ~995px.
       (This was flat 64px for a while; the page now follows the home page's
       clamped sizing throughout.) The 991.98 and 767.98 blocks below pick it up
       from the clamp's floor and step it to 36px and 32px.

       line-height as the 72/64 ratio, not a flat 72px — a fixed line box would
       double-space the heading as soon as the clamp shrank the type. */
    font-size: clamp(44px, 2.16vw + 22.5px, 64px);
    line-height: 1.125;
    font-weight: 700;
    color: var(--hr-brown-900);
    margin: 0;
}
.abt-title-row h1 .hr-accent { color: var(--hr-yellow-500); }
.abt-intro-desc {
    /* Figma Body/Body Medium 24/32 on the 1922 frame, ramping to the phone
       board's 16/24 at 768 rather than snapping there — the desktop and phone
       values are unchanged, only the range between them is now continuous.
       The 767.98 block below restates 16/24 for the centring that comes with
       it. Leading as the 32/24 ratio so the line box tracks the size. */
    font-size: clamp(16px, 0.6933vw + 10.67px, 24px);
    line-height: 1.3333;
    color: var(--hr-brown-300);
    margin: 0;
}
.abt-intro-desc p { margin: 0 0 12px; }
.abt-intro-desc p:last-child { margin-bottom: 0; }

/* ---------- Vision / Mission glass cards ---------- */
/* Wraps the decorative background shape + the two cards so the shape can be
   absolutely positioned relative to this box and sit behind them (Figma: a
   folded-paper green vector, node 40000567:26180, bleeding past the cards on
   every side). */
.abt-cards-wrap {
    position: relative;
    margin-bottom: 100px;
}
/* Full-viewport-bleed trick: centers a 100vw-wide layer regardless of the
   1600px-max parent. */
.abt-cards-bg {
    position: absolute;
    /* 85.94px above the cards row. .abt-cards-wrap's top edge IS the cards'
       top edge (.abt-cards is its first in-flow child and the Vision card
       carries no margin-top — only Mission does, for the stagger), so this
       offset is measured straight off it.

       That splits .abt-title-row's 100px margin-bottom as 14.06px of clear
       space under the heading, then the shape, then 85.94px down to the
       cards — so the two numbers are one measurement and have to stay in
       sync if either is changed.

       Was -114px, which carried the same 14px figure with the sign flipped:
       it started the vector 14px INSIDE the title row's box rather than
       14.06px below it. */
    top: -14.06px;
    left: 50%;
    width: 100vw;
    max-width: none;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
}
.abt-cards {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
/* Vertical stagger between the two cards (Figma: the Mission card sits
   lower, bottom-aligned within a taller shared row than Vision's). */
.abt-card-mission { margin-top: 171px; }
.abt-card {
    position: relative;
    /* Figma clips the card (overflow-clip), which is what keeps the corner
       glow below inside the rounded edge and trims the divider — that vector
       is 353px wide inside a 314px column, so it is meant to run off. Safe to
       clip because the .abt-card-pin ornament that used to hang outside the
       corner is commented out of the markup. */
    overflow: hidden;
    border-radius: 30px;
    padding: 42px 39px;
    backdrop-filter: blur(80px);
    background: rgba(253, 253, 248, .6);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .03), inset 0 4px 6px rgba(255, 255, 255, .23);
    display: flex;
    flex-direction: column;
    gap: 32px;
}
/* Soft glow in the card's top-left corner — Figma's "Ellipse 263", present on
   BOTH cards at every width (selected node 40002817:93213 on the phone board,
   40001286:68194/68214 on desktop). It never rendered before: this rule had no
   background at all, because the only two that set one were the commented-out
   pair below it, and those assumed a blue/green tint.

   The export shows it is neither — a plain WHITE circle at 90%, r=245.26,
   blurred with stdDeviation 108.55. Hence no opacity fade either; the 90%
   white and the blur radius are the whole effect.

   z-index is gone too. At -1 the glow sat behind the card's own translucent
   fill, so even with a colour it would have been muted to nothing. Figma
   layers the ellipse directly after the frosted background and before the
   content, which is exactly where an unpositioned ::before lands. */
.abt-card::before {
    content: "";
    position: absolute;
    top: -194.52px;
    inset-inline-start: -193.58px;
    width: 490.52px;
    height: 490.52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    filter: blur(108.55px);
    pointer-events: none;
}

/* "Pin" ornament hanging off the card's top-right corner: a downward
   triangle, a thin vertical line, then two small stacked diamonds
   (Figma: a rotated square + 2 rotated squares + a line, node 40000567:26193). */
.abt-card-pin {
    position: absolute;
    top: -0px;
    /* Figma has the pin's diamond ending ~39px from the card's right edge
       (788px card width minus the pin's own ~749px right-most extent),
       not 48px. */
    inset-inline-end: 39px;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
/* Sized off Figma node 40000567:26221 (the "pin" hanging off Our
   Vision/Our Mission): a 100px square rotated into a diamond — half of it
   clipped by the card above, so only the bottom point shows as a large
   triangle — then a ~73px connecting line, then two 21px diamonds nearly
   touching. This was previously built at roughly half that scale, which is
   why it read as an insignificant sliver rather than the intended pin. */
.abt-card-pin-triangle {
    width: 0;
    height: 0;
    border-inline-start: 70px solid transparent;
    border-inline-end: 70px solid transparent;
    border-top: 70px solid var(--hr-blue-500);
}
.abt-card-mission .abt-card-pin-triangle { border-top-color: var(--hr-green-500); }
.abt-card-pin-line { width: 1px; height: 72px; background: currentColor; }
.abt-card-vision .abt-card-pin-line { color: var(--hr-blue-500); }
.abt-card-mission .abt-card-pin-line { color: var(--hr-green-500); }
.abt-card-pin-diamond {
    width: 21px;
    height: 21px;
    transform: rotate(45deg);
    margin-top: -2px;
}
.abt-card-vision .abt-card-pin-diamond { background: var(--hr-blue-500); }
.abt-card-mission .abt-card-pin-diamond { background: var(--hr-green-500); }
[dir="rtl"] .abt-card-pin { inset-inline-end: auto; inset-inline-start: 39px; }

.abt-card-mark {
    position: relative;
    width: 58px;
    height: 61px;
    flex-shrink: 0;
}
.abt-card-mark::before,
.abt-card-mark::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.abt-card-mark::before { width: 21px; height: 21px; }
.abt-card-mark::after { width: 41px; height: 41px; border: 1px solid; border-radius: 2px; }
.abt-card-vision .abt-card-mark::before,
.abt-card-vision .abt-card-mark::after { background: var(--hr-blue-500); }
.abt-card-vision .abt-card-mark::after { background: transparent; border-color: var(--hr-blue-500); }
.abt-card-mission .abt-card-mark::before,
.abt-card-mission .abt-card-mark::after { background: var(--hr-green-500); }
.abt-card-mission .abt-card-mark::after { background: transparent; border-color: var(--hr-green-500); }
.abt-card-label {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0;
    position: relative;
}
.abt-card-vision .abt-card-label { color: var(--hr-blue-500); }
.abt-card-mission .abt-card-label { color: var(--hr-green-500); }
.abt-card-body { position: relative; display: flex; flex-direction: column; gap: 24px; }
.abt-card-body h3 {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--hr-brown-500);
    margin: 0;
}
.abt-card-body p {
    font-size: 20px;
    line-height: 1.4;
    color: var(--hr-brown-400);
    opacity: .7;
    margin: 0;
}
/* Figma: a 353x2px rule in the card's own accent colour, not a neutral hairline. */
.abt-card-divider {
    position: relative;
    width: 100%;
    max-width: 353px;
    height: 2px;
}
.abt-card-vision .abt-card-divider { background: var(--hr-blue-500); }
.abt-card-mission .abt-card-divider { background: var(--hr-green-500); }

/* ---------- Stats ---------- */
/* Per request, these mirror the home page's "Voices That Translate Worlds"
   stat panels (.hr-voices-grid .hr-voice-stat in home-revamp.css) rather than
   this page's own Figma spec. Values are copied verbatim from that rule set —
   duplicated rather than shared because home-revamp.css is only loaded on the
   home page, matching how summit-revamp.css re-declares the .hr-btn
   primitives. Keep the two in sync if either is restyled. */
.abt-stats { display: flex; gap: 0; flex-wrap: wrap; margin-bottom: 100px; }
.abt-stat {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    text-align: center;
    /* 40px + 17px top and bottom: the 34px the even panels used to gain as a
       margin-top stagger is folded into every panel's height instead, so the
       run is taller but still sits on one baseline. Split symmetrically so the
       centred content stays centred. */
    padding: 57px 24px;
    border-radius: 40px;
    border: 0;
    /* Only the angle varies between the alternating panels, so it is the one
       part held in a custom property — the stop list is declared once here
       instead of being repeated per variant and per breakpoint. Declared
       explicitly rather than as a var() fallback so the breakpoint below can
       reset every panel with a single .abt-stat rule. */
    --abt-stat-wash-angle: 0deg;
    background: linear-gradient(var(--abt-stat-wash-angle), rgba(84, 138, 175, .18) 0%, rgba(51, 115, 159, 0) 61.523%);
    /* Frost from the spec. The gradient above is deliberately NOT the spec's
       own (rgba(51,115,159,0) -> .08) — the existing alternating wash is kept,
       and only the blur is adopted. */
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    box-shadow: 0 4px 16px rgba(27, 25, 12, -0.96);
}
/* Panels alternate the wash direction only — odd shade from the bottom
   (0deg), even from the top. Both directions are the reverse of what they
   were, flipped deliberately, so don't read the pairing as arbitrary.
   The 34px vertical stagger that used to come with it is gone: the run sits
   on one baseline at every width now. */
.abt-stat:nth-child(even) {
    --abt-stat-wash-angle: 180deg;
}
.abt-stat-label {
    font-size: 24px;
    font-weight: 700;
    line-height: 16px;
    color: var(--hr-brown-300);
    margin: 0;
}
/* An inline-flex ROW holding the digits and the +, mirroring how Figma builds
   it (and .hr-voices-grid .hr-voice-stat strong on the home page). Two reasons
   it is a flex row rather than plain inline text:

     - a flex container ignores whitespace-only text nodes between its items,
       which removes the word space the markup's newline between the counter
       span and the + used to render;
     - align-items:center gives the + a fixed starting point to be offset
       from. As inline text it sat on the digits' baseline, so its placement
       was tied to font metrics and every size step moved it. */
.abt-stat-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    font-weight: 800;
    /* 100px, matching the home page's .hr-voice-stat strong. Figma's
       Statistics/Stat XLarge/ExtraBold (node 40001286:67925) specs the line
       box at 100px, not the font's own 80px — home documents the tighter box
       clipping the glyph's descender against the card edge. */
    line-height: 100px;
    color: var(--hr-blue-400);
    margin: 0;
}
.abt-stat-value .hr-counter { font-size: inherit; line-height: inherit; }
/* The + is its own type style in Figma — Headings/H1/Bold at 64px/72px weight
   700 (node 40001286:68261), against the digits' Statistics/Stat XLarge at
   80px/100px ExtraBold. Held as a ratio of the digits rather than a literal
   64px so it tracks them through the responsive size steps.

   It rides above the digits rather than level with them. Now that both boxes
   are centred in the flex row, one proportional transform does that at every
   size — same mechanism and same value as the home page's +, where it is
   derived from Figma's own text box (a 38.266px box on a 72px line, bottom
   aligned, lifts the glyph by half the difference: (72 - 38.266) / 2 =
   16.87px, or .264em of the +'s 64px). Raise it to push the + higher. */
.abt-stat-value .abt-plus {
    font-size: .8em;
    font-weight: 700;
    line-height: 1.125;
    transform: translateY(-.264em);
    color: var(--hr-yellow-500);
}

/* ---------- Diamond divider between bands ---------- */
/* Figma (node 40000567:26260): a hairline spanning the FULL page width with a
   cluster of 5 touching diamonds resting on it at each end. The line is drawn
   as a ::before on THIS box - the full-bleed outer one - so it reaches the
   viewport edges while the clusters stay pinned to the 1600px-capped inner
   row, and so it paints behind them. It used to hang off the inner box and
   bleed past the cap with 100vw; see the ::before rule for why that had to
   change. */
.abt-diamond-divider {
    position: relative;
    display: flex;
    align-items: center;
    padding: 20px 160px 0 160px;
}
.abt-diamond-divider-inner {
    position: relative;
    max-width: 1600px;
    width: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* The hairline hangs off the OUTER box rather than the 1600px-capped inner
   one. The outer already spans the viewport's client width, so left/right: 0
   reaches both edges with no vw involved. 100vw counted the vertical scrollbar
   on top of that - 6px wider than the box it was centred in - and since
   nothing clips this divider by design, those 3px per side landed in the
   document's scrollable overflow and pushed scrollWidth past clientWidth.
   The `top` calc is the inner row's centre: 100% is the outer's padding-box
   height (its 20px padding-top plus the row), so (100% + 20px) / 2 comes out
   at 20px + row/2 whatever height the clusters give the row. Painting order is
   unchanged - this pseudo precedes .abt-diamond-divider-inner in tree order,
   so the clusters still sit on top of the line. */
.abt-diamond-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc((100% + 20px) / 2);
    height: 1px;
    transform: translateY(-50%);
    background: var(--hr-yellow-400);
    opacity: .35;
}
.abt-diamond-divider-cluster {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.abt-diamond-divider .abt-diamond {
    /* Geometry (20px square in a 28.284px slot) now comes from .abt-diamond,
       which every run of this component shares. */
    border-radius: 0px;
    /* Solid, not translucent - same #f3d9b0 diamond used by this divider on
       Events/Summit/Partnership. Opacity let the hairline behind it show
       through as a seam across every diamond. */
    background: #f3d9b0;
}
/* All five diamonds stay in each cluster at every width — the design keeps
   the full run on mobile. A rule here used to hide the 4th and 5th below
   768px, leaving three a side. */

/* ---------- What We Do ---------- */
.abt-what {
    background: var(--hr-cream-500);
    padding: 120px 160px;
}
.abt-what-inner { max-width: 1600px; margin-inline: auto; }
.abt-what-head { margin-bottom: 80px; }
.abt-what-head h2 {
    /* Figma Headings/H3/Bold: Almarai 700, 48/56 at 1922, ramping to the
       tablet block's 32px by 992 — same endpoints as before, continuous
       between them. Kept identical to .abt-testimonials-head h2 so the page's
       two section headings stay the same size at every width. */
    font-size: clamp(32px, 1.72vw + 14.93px, 48px);
    line-height: 1.1667;
    font-weight: 700;
    color: var(--hr-brown-900);
    margin: 0 0 16px;
}
.abt-what-head p {
    /* 24px at 1922 down to the phone board's 20px at 768. */
    font-size: clamp(20px, 0.3466vw + 17.34px, 24px);
    line-height: 1.35;
    color: var(--hr-brown-300);
    margin: 0;
    max-width: 933px;
}
/* The row carries Swiper's markup at every width, but Swiper is only
   initialised below 1200px. Above that its stylesheet still applies to the
   .swiper/.swiper-wrapper/.swiper-slide classes, so the desktop rules below
   undo the parts that would otherwise change this layout: the wrapper's
   flex box becomes the 3-across row it always was, and .swiper's
   overflow:hidden is released so nothing clips.

   Kept as one DOM tree rather than a desktop row plus a separate mobile
   slider: duplicating the markup would double the three pillar images in the
   page source and in the accessibility tree. */
.abt-pillars {
    display: flex;
    align-items: center;
    gap: 32px;
    overflow: visible;
}
/* Desktop-only, in a min-width query rather than as a base rule: the
   transform reset below needs !important to beat the inline transform Swiper
   leaves on the wrapper when the viewport is resized up past the breakpoint,
   and an unscoped !important would also override the slider's own transform
   on mobile — freezing it on slide 1. */
@media (min-width: 1200px) {
    .abt-pillars .swiper-wrapper {
        display: flex;
        align-items: center;
        gap: 32px;
        width: 100%;
        transform: none !important;
    }
    .abt-pillars .swiper-slide { height: auto; }
}
/* Nav belongs to the slider only. */
.abt-pillars-actions { display: none; }
.abt-pillar {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
}
/* Tell/Translate: photo on top, copy below (DOM order: image, copy).
   Gather: copy on top, photo below (DOM order: copy, image) — same
   column direction for all three, just a different child order in the
   markup, matching the Figma "zigzag" rhythm across the three pillars. */
.abt-pillar { justify-content: flex-start; }
.abt-pillar-image {
    width: 100%;
    max-width: 456px;
    display: flex;
    justify-content: center;
}
.abt-pillar-image img { width: 100%; height: auto; display: block; }
.abt-pillar-gather .abt-pillar-image { max-width: 521px; }
.abt-pillar-translate .abt-pillar-image { max-width: 332px; }
.abt-pillar-copy {
    width: 100%;
    border-inline-start: 5px solid;
    padding-inline-start: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.abt-pillar-tell .abt-pillar-copy { border-color: var(--hr-yellow-500); }
.abt-pillar-gather .abt-pillar-copy { border-color: var(--hr-green-500); }
.abt-pillar-translate .abt-pillar-copy { border-color: var(--hr-blue-500); }
.abt-pillar-copy h3 {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--hr-brown-900);
    margin: 0;
}
.abt-pillar-copy p {
    font-size: 20px;
    line-height: 1.4;
    color: var(--hr-brown-300);
    margin: 0;
}
/* Arabic reverses the flex row's main axis, which runs the pillars
   Translate/Gather/Tell and mirrors the zigzag — the tall Gather photo ends up
   stepping the wrong way against its neighbours. Pin the ROW to ltr so the
   composition keeps its order, then hand direction back to the copy blocks so
   the text itself still reads rtl (and .abt-pillar-copy's logical
   border-inline-start/padding-inline-start still resolve to the right, which
   is the leading edge in Arabic).

   direction rather than flex-direction: row-reverse deliberately — this
   selector outranks the plain .abt-pillars rule that switches the row to a
   column under 1200px, so touching flex-direction here would leak into the
   stacked mobile layout and break it. direction is inert on a column. */
[dir="rtl"] .abt-pillars { direction: ltr; }
[dir="rtl"] .abt-pillars .abt-pillar-copy { direction: rtl; }

/* ---------- Testimonials ("What Our Community Says") ---------- */
.abt-testimonials {
    background: var(--hr-cream-500);
    /* No bottom padding - per Figma the cards' flat bottom edge (only the
       top corners are rounded) sits flush against the footer, with zero
       gap between this section and the next. */
    padding: 60px 160px 0;
}
.abt-testimonials-inner { position: relative; max-width: 1600px; margin-inline: auto; }
/* Decorative paper-fold accent behind the cards row (Figma node
   40001286:68339/68340/68341), bleeding past the 1600px column into the
   viewport's side margins and slightly below the cards into the footer.
   Full-viewport-bleed sizing, same trick as .abt-cards-bg.

   Anchored from the BOTTOM, not the top. Figma puts the shape at y=349.45 in
   a section whose content starts at y=120, which is where the old top:229px
   came from — but that pins it to the section's top edge, so anything that
   changes the section's height (zoom, a longer testimonial, wrapped text)
   slides the bottom edge away from it and the overhang into the footer is
   lost. The same position expressed from the bottom holds instead: the shape
   ends at 1036.87 against a section bottom of 810, so it hangs 227px below.
   At the design's own height the two are equivalent (690 + 227 - 687.42 =
   229.6); at any other height only this one stays put. */
.abt-testimonials-bg {
    position: absolute;
    bottom: -227px;
    left: 50%;
    width: 116vw;
    max-width: none;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
}
.abt-testimonials-head,
.abt-testimonials-track { position: relative; z-index: 1; }
/* Faint hairline + diamond hanging off the trailing edge (Figma node
   40001286:68353) - 10% opacity, so it's meant to be barely-there.

   The diamond hangs off the BOTTOM of the hairline. Figma's isolated export
   of this node renders it at the top — the frame carries a flip that the
   export drops — so the checked-in asset had it upside down. It is drawn the
   right way up in testimonials-edge-accent.svg rather than corrected with a
   scaleY here, so the RTL scaleX below stays readable.

   Measured off a render of the parent section rather than the node's own
   reported x/y: because the node is flipped, get_metadata reports its
   max-corner (1874.6, 221.4) instead of its top-left. Its real box is x
   1800->1874.6 and y -404->221.4, so the RIGHT edge sits 45.38px inside the
   1920 frame, and the hairline runs UP out of this section into the band
   above with only the diamond landing inside it. The earlier -29px/top:101px
   pair read that max-corner as a top-left and put the whole thing a column
   width inboard and 600px too low.

   Both offsets are therefore anchored to the diamond, the only part that
   belongs to this section: its bottom edge is 161.4px below the content top
   (Figma y=221.4 against the content frame's y=60), and the negative top
   backs the 625.4px asset up from there.

   The calc crosses the gutter: 100% is the inner column's width, so
   (100vw - 100%) / 2 is the distance from its edge out to the viewport,
   whether the column is capped at 1600 or still filling the 160px-padded
   content box. Same idiom as .abt-hero-divider's negative margin. */
.abt-testimonials-edge {
    position: absolute;
    top: -464px;
    right: calc(45.38px - (100vw - 100%) / 2);
    z-index: 0;
    pointer-events: none;
}
[dir="rtl"] .abt-testimonials-edge {
    right: auto;
    left: calc(45.38px - (100vw - 100%) / 2);
    transform: scaleX(-1);
}
@media (max-width: 1199.98px) {
    .abt-testimonials-bg, .abt-testimonials-edge { display: none; }
}
.abt-testimonials-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 80px;
    flex-wrap: wrap;
}
/* Sized to match .abt-what-head h2 rather than its own 50px/1.2, so the two
   section headings on this page are the same size — which now means sharing
   its clamp, not just its top value. Leading comes with it: matching the size
   but not the line box would show up as soon as either wrapped. Note the
   boxes are near but not equal — 1.15 here against 1.1667 there, so this one
   runs ~1.4% tighter at any given size. */
.abt-testimonials-head h2 {
    /* Same clamp as .abt-what-head h2 — see the note there. */
    font-size: clamp(32px, 1.72vw + 14.93px, 48px);
    line-height: 1.15;
    font-weight: 700;
    color: var(--hr-brown-500);
    text-transform: capitalize;
    margin: 0;
}
/* Heading column: the h2 and its optional subtitle, so the arrows sit opposite
   the pair rather than being pushed down beside the subtitle. flex:1 with
   min-width:0 lets it take the row's spare width and wrap its own text instead
   of forcing the actions onto a second line. */
.abt-testimonials-heading { flex: 1 1 auto; min-width: 0; }
/* Matches .abt-what-head p - the page's other section subtitle - including the
   16px it sits below its heading, which over there is the h2's own
   margin-bottom. */
.abt-testimonials-heading p {
    font-size: clamp(20px, 0.3466vw + 17.34px, 24px);
    line-height: 1.35;
    color: var(--hr-brown-300);
    margin: 16px 0 0;
    max-width: 933px;
}
.abt-testimonials-actions { display: flex; gap: 8px; }
.abt-testimonials-track { overflow: hidden; }
/* height:100% (not auto) so every visible slide stretches to the tallest
   one in its row (Swiper's default), keeping card height consistent
   regardless of how much text a given testimonial has. */
/* Equal-height slides. height:auto + the wrapper's align-items:stretch is the
   mechanism — NOT height:100%, which is what this used to say. The wrapper's
   own height is auto, so a percentage height on the slide has nothing to
   resolve against and collapses back to auto: every slide then sized to its
   own text, and whichever card ended up shortest after a reflow (zooming out,
   a narrower column) stopped short of the row's bottom edge. */
.abt-testimonials-track .swiper-wrapper { align-items: stretch; }
.abt-testimonials-track .swiper-slide { height: auto; display: flex; }
.abt-testimonials-track .swiper-slide > * { width: 100%; }

/* Card itself (Figma node 40001286:68350). Own treatment rather than the
   home page's .hr-testimonial-card (home-revamp.css isn't loaded on this
   page — each page's revamp stylesheet is self-contained), rebuilt to match
   the design exactly: flex column with a shared 54px gap between the header
   row, the dashed rule and the quote, instead of per-element margins.

   Every size in the card is now derived from ONE number — the quote's font
   size, --hr-tc-fs — exactly as the home page's card does it (BIL-742,
   home-revamp.css .hr-testimonial-card). Each multiplier below is this
   element's Figma value over the quote's 24px, so at --hr-tc-fs: 24px every
   calc() resolves to the design figure it replaced (54 = 24 * 2.25,
   56/40/100 = 24 * 2.3333/1.6667/4.1667, 540 = 24 * 22.5, and so on).

   Why fluid at all: the band holds its 160px gutters down to the tablet
   breakpoint, so the card narrows far faster than the viewport — 3-up it is
   514px at 1922 but only 374px at 1500. At a flat 24px the quote wrapped to
   ~15 lines there and ran the card several hundred px taller than the design.
   Scaling the one ratio with the viewport holds the card's proportions, and
   so its height, at every width. */
.hr-testimonial-card {
    /* Ported verbatim from the home page. Fitted to the 3-UP formula —
       (min(1600, 100vw - 320) - 58) / 3 — which on this page is the
       >=1500px range (about.js). 24px at 1922, floored at 16px.
       The two-card range below gets its own ramps. */
    --hr-tc-fs: clamp(16px, 1.108vw + 2.7px, 24px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--hr-tc-fs) * 2.25);
    padding: calc(var(--hr-tc-fs) * 2.3333) calc(var(--hr-tc-fs) * 1.6667) calc(var(--hr-tc-fs) * 4.1667);
    border-radius: 40px 40px 0 0;
    background: linear-gradient(180deg, #1e6096 0%, #104f83 62.019%, #104f83 100%);
    color: var(--hr-cream-50);
    height: 100%;
    /* Figma's own instance height for a typical 4-line quote — a floor for
       when JS/Swiper isn't equalising slide heights, not the mechanism that
       keeps cards level (that's the swiper-slide stretch below). Held as a
       ratio so the floor tracks the type instead of stranding a 540px box
       around 16px text. */
    min-height: calc(var(--hr-tc-fs) * 22.5);
    overflow: hidden;
    box-shadow: 0 13px 14.7px rgba(0, 0, 0, .02);
}
/* Two-card range. about.js goes 3-up only from 1500px, so from 768 to 1499.98
   the carousel shows TWO cards — much wider than the 3-up formula the base
   clamp is fitted to (578px at 1499 against 374px at 1500), and that ramp
   would under-size the type across the whole laptop range. These follow the
   2-up width instead, at the same 514/24 = 21.4 card-to-type ratio the design
   uses, so each hits the full 24px once its card reaches the design's own
   width and holds there.

   Two blocks because the section's gutters step from 160px to 40px at 1200,
   which is a jump in card width (428px at 1200 against 548px at 1199.98) that
   no single formula covers:
     1200-1499.98  card = (min(1600, 100vw - 320) - 24) / 2
     768-1199.98   card = (100vw - 80 - 24) / 2 */
@media (min-width: 1200px) and (max-width: 1499.98px) {
    .hr-testimonial-card { --hr-tc-fs: clamp(16px, 2.33vw - 8px, 24px); }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .hr-testimonial-card { --hr-tc-fs: clamp(16px, 2.33vw - 2.4px, 24px); }
}
/* Two copies of the same low-opacity starburst vector, bleeding from the
   top-right and bottom-left corners and clipped by the card's own rounded
   corners (Figma: "Vector 4", positioned off-canvas so only a sliver shows). */
.hr-testimonial-card::before,
.hr-testimonial-card::after {
    content: "";
    position: absolute;
    width: 578.5px;
    height: 449.432px;
    background: url('../images/about-revamp/testimonial-bg-shape.svg') no-repeat center / contain;
    pointer-events: none;
}
.hr-testimonial-card::before { top: -162px; left: 83px; }
.hr-testimonial-card::after { top: 477px; left: -628px; }
[dir="rtl"] .hr-testimonial-card::before { left: auto; right: 83px; transform: scaleX(-1); }
[dir="rtl"] .hr-testimonial-card::after { left: auto; right: -628px; transform: scaleX(-1); }
.hr-testimonial-card > * { position: relative; z-index: 1; }
.hr-testimonial-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.hr-testimonial-person {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
/* 32/40 and 20/28 at the design's 24px quote, as ratios of it (see the card). */
.hr-testimonial-card h4 { font-size: calc(var(--hr-tc-fs) * 1.3333); line-height: 1.25; font-weight: 700; margin: 0; }
.hr-testimonial-card .hr-designation { opacity: .6; font-size: calc(var(--hr-tc-fs) * 0.8333); line-height: 1.4; margin: 0; }
/* 114px at 24px. The diamond scales with the card's type rather than
   holding its desktop size against a 374px card, where it took a third of
   the header row off the name beside it. */
.hr-quote-mark {
    flex-shrink: 0;
    width: calc(var(--hr-tc-fs) * 4.75);
    height: calc(var(--hr-tc-fs) * 4.75);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hr-quote-mark img { width: 100%; height: 100%; }
/* Figma: a 1px white-60%-opacity rule with a precise 9px-dash/9px-gap
   pattern — `border-style: dashed` doesn't reproduce that spacing, so it's
   drawn as a repeating gradient instead. */
.hr-testimonial-divider {
    display: block;
    height: 1px;
    width: 100%;
    background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, .6) 0 9px, transparent 9px 18px);
}
/* The one number everything above is derived from: 24/32 on the design frame. */
.hr-testimonial-card p { font-size: var(--hr-tc-fs); line-height: 1.3333; font-weight: 400; margin: 0; }
/* The phone board re-specifies the card rather than scaling the desktop
   ratio down, so these stay explicit figures — same call as the home
   page's phone block. Every derived value above is restated here, so
   --hr-tc-fs is inert below 768px. */
@media (max-width: 767.98px) {
    .hr-testimonial-card { padding: 32px 24px 48px; gap: 32px; min-height: 0; }
    .hr-testimonial-card h4 { font-size: 24px; line-height: 30px; }
    .hr-testimonial-card .hr-designation { font-size: 16px; line-height: 22px; }
    .hr-testimonial-card p { font-size: 18px; line-height: 28px; }
    .hr-quote-mark { width: 72px; height: 72px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .abt-hero, .abt-intro, .abt-diamond-divider, .abt-what, .abt-testimonials { padding-inline: 40px; }
    .abt-hero { height: 200px; }
    .abt-title-row { grid-template-columns: 1fr; gap: 32px; margin-bottom: 60px; }
    .abt-cards-wrap { margin-bottom: 60px; }
    .abt-stats { margin-bottom: 60px; }
    .abt-cards { grid-template-columns: 1fr; gap: 60px; }
    /* Figma's phone frame runs Mission before Vision (nodes 40002817:93213
       then :93225), the reverse of the desktop pair. Done with order rather
       than by moving the markup so the DOM keeps reading Vision-then-Mission
       for the desktop two-column layout, where Vision must stay on the left.
       Every card treatment is keyed to .abt-card-vision/.abt-card-mission
       rather than nth-child, so the blue/green accents follow the swap. */
    .abt-card-mission { margin-top: 0; order: 1; }
    .abt-card-vision { order: 2; }
    /* Hidden rather than repositioned: it is a 100vw decorative bleed sized
       against the desktop cards grid, so once the grid stacks it just streaks
       across the column. Matches .abt-testimonials-bg, already hidden at this
       same breakpoint. */
    .abt-cards-bg { display: none; }
    /* Below 1200px this becomes a one-slide-at-a-time Swiper (initialised in
       about.js), so the stacked column the old rule produced is replaced by
       the track's own layout. */
    /* The track is capped and centred here, rather than each slide, so slides
       can stay a plain 100% and Swiper's translate math lines up with them. */
    .abt-pillars {
        display: block;
        overflow: hidden;
        max-width: 520px;
        margin-inline: auto;
    }
    /* gap must be 0 here — Swiper measures slide offsets itself and adds
       spaceBetween as margin, so a CSS gap would desync the translate. */
    .abt-pillars .swiper-wrapper {
        display: flex;
        align-items: stretch;
        gap: 0;
    }
    /* flex, not width: .abt-pillar sets `flex: 1 1 0`, and on a flex item
       flex-basis beats width — so `width: 100%` was ignored, all three slides
       shrank to their content and sat in view together. */
    .abt-pillars .swiper-slide {
        flex: 0 0 100%;
        width: 100%;
    }
    /* Every slide reads image-then-copy. Only Gather needs this — its markup
       is copy-then-image so the desktop row can zigzag — but ordering all
       three keeps the rule independent of which pillar happens to be flipped.
       order (not a markup change) so the desktop stagger is untouched. */
    .abt-pillars .abt-pillar-image { order: 1; }
    .abt-pillars .abt-pillar-copy { order: 2; }
    .abt-pillars-actions {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 40px;
    }
}
@media (max-width: 991.98px) {
    .abt-intro { padding-top: 60px; }
    /* Figma has no tablet frame between its 1920 and 402 boards, so this
       reuses the desktop ratio (72/64 = 1.125) rather than inventing a
       leading: 36 * 1.125 = 40.5px, sitting between the desktop line box and
       the 40px the phone block sets below. Restated rather than inherited so
       it survives if the desktop rule's leading ever changes.

       This picks the heading up 8px below the desktop clamp's 44px floor
       (reached at ~995px), which is the deliberate tablet step. */
    .abt-title-row h1 { font-size: 36px; line-height: 1.125; }
    .abt-what { padding-top: 60px; padding-bottom: 60px; }
    .abt-what-head { margin-bottom: 48px; }
    .abt-what-head h2 { font-size: 32px; line-height: 40px; }
    /* 60px top, per Figma's phone section (40002817:93758 — heading sits at
       y=60). This was 0, which butted the heading straight up against the
       diamond divider above it. */
    .abt-testimonials { padding-top: 60px; padding-bottom: 60px; }
    .abt-testimonials-head h2 { font-size: 32px; }
    /* Fully rounded from here down. The desktop 40px 40px 0 0 exists only
       because the cards sit flush against the footer there; this is the same
       breakpoint that introduces padding-bottom, so they are no longer flush
       and the square bottom edge just read as a bug. */
    .hr-testimonial-card { border-radius: 40px; }
    /* Panels keep the desktop box at every width — no padding, gap or type
       override here, so their height is identical to the non-responsive
       layout, and no border or drop shadow is added either.

       The one responsive difference is the wash direction: desktop alternates
       per panel, here all of them shade top-down. Set on .abt-stat rather than
       the even variant so it covers every panel regardless of the desktop
       flip. */
    .abt-stat { --abt-stat-wash-angle: 180deg; }
    /* Type sizing AND box copied from the home page's equivalent component,
       .hr-voices-grid .hr-voice-stat in home-revamp.css — same two-step ramp,
       so the two pages' stat panels come out the same height at a given
       width. */
    .abt-stat { padding: 28px 16px; gap: 24px; }
    .abt-stat-label { font-size: 18px; }
    .abt-stat-value { font-size: 44px; }
}
@media (max-width: 767.98px) {
    .abt-hero, .abt-intro, .abt-diamond-divider, .abt-what, .abt-testimonials { padding-inline: 16px; }
    .abt-hero { height: 160px; }
    /* One breadcrumb size site-wide on the phone, taken from the Events
       listing (.evt-breadcrumb in events-revamp.css): 12px type, 8px gaps, a
       12px separator. Replaces the fluid 13-20px clamp this page carried. */
    .abt-breadcrumb { font-size: 12px; gap: 8px; }
    .abt-breadcrumb-sep { height: 12px; }
    /* Figma's phone frame for this band (402px wide, 20px gutters — title
       node 40002817:93165, description 40002817:93167). Both drop a step down
       the type ramp and centre, where the desktop pair is left-aligned in a
       two-column grid:

         title        Headings/H5/Bold      32/40  (desktop 64/72)
         description  Body/Body XSmall/Reg  16/24  (desktop 24/32)

       Colours are unchanged from desktop — brown-900 and brown-300 — so only
       size, leading and alignment are restated. */
    .abt-title-row h1 {
        font-size: 32px;
        line-height: 40px;
        text-align: center;
    }
    .abt-intro-desc {
        font-size: 16px;
        line-height: 24px;
        text-align: center;
    }
    /* "What We Do" head — centred, matching Figma's phone frame (heading
       40002817:93659, description 40002817:93660 in board 40002817:93656).

       Sizes are a DELIBERATE step up from that board, which specs the heading
       at Headings/H6/Bold 24/32 and the description at Body XSmall 16/24. At
       those values the section read as subordinate to the page title above it,
       so both are lifted one step to sit level with the intro pair (32/40 and
       20/28). Same call as the 56px nav buttons below: page-level consistency
       over the board's own number. Don't "fix" these back to 24/16 from Figma
       without checking.

       The 8px gap between them IS from the board — it stacks the heading at
       y=0..32 and the description at y=40 — against the desktop rule's 16px. */
    .abt-what-head { text-align: center; }
    .abt-what-head h2 {
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 8px;
    }
    .abt-what-head p {
        font-size: 20px;
        line-height: 28px;
    }
    /* Testimonials head, from Figma's phone frame (heading 40002817:93761 in
       section 40002817:93758): Headings/H6/Bold 24/32, centred, against the
       desktop 50px/1.2 left-aligned row.

       The gap below it drops to 32px — Figma puts the heading at y=60..92 and
       the cards row at y=124 — where the desktop rule reserves 80px for the
       prev/next buttons sitting inline beside the heading.

       Those buttons move BELOW the cards here (Figma 40002817:93798, centred
       at y=523 with the cards ending at y=491, so 32px under them). The markup
       nests them inside .abt-testimonials-head, above the track, so rather
       than move them in the blade — which would then need absolute
       positioning to rebuild the desktop header row — the head is collapsed
       with display:contents. Its h2 and actions become flex children of
       .abt-testimonials-inner alongside the track, and order sequences them.

       display:contents discards the head's own box, so the 32px gap it used
       to carry moves onto the h2. */
    .abt-testimonials-inner {
        display: flex;
        flex-direction: column;
    }
    .abt-testimonials-head { display: contents; }
    .abt-testimonials-head h2 {
        order: 1;
        /* Same 32/40 as .abt-what-head h2 at this width, not the 24/32 the
           phone board gives this heading — the two section headings stay
           matched, as they are on desktop. */
        font-size: 32px;
        line-height: 40px;
        text-align: center;
        margin-bottom: 32px;
    }
    /* min-width:0 is load-bearing. As a flex item the track gets the default
       min-width:auto, which refuses to shrink below its content's intrinsic
       width — and its content is Swiper's wrapper, i.e. the sum of every
       slide. That blew the track out to ~33.5 million px. width:100% pins it
       to the column instead. */
    .abt-testimonials-track {
        order: 2;
        min-width: 0;
        width: 100%;
    }
    /* Position moves, size does not: these stay the 56px circles with 24px
       arrows used everywhere else on the page. Figma's phone board draws them
       at 40x40 with a 16x16 icon, but shrinking them here made them read as a
       different, weaker control than the pillar slider's buttons directly
       above — so the shared size wins over the board's value. */
    .abt-testimonials-actions {
        order: 3;
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 32px;
    }
    /* One full-width panel per row, keeping the desktop card look. */
    .abt-stats { flex-wrap: wrap; gap: 20px; }
    .abt-stat { flex: 1 1 100%; }
    /* Second step of the home page's ramp (.hr-voices-grid .hr-voice-stat in
       home-revamp.css): the digits go UP from 44px here, not down, because
       they get a tighter 46px line box at the same time — Figma draws them at
       56.62px inside a 46px frame. Digits have no descender, so the short box
       clips nothing. The + inherits that 46px leading through its
       line-height:inherit, and keeps the lift set on the base rule. */
    .abt-stat { padding: 48px 32px; }
    .abt-stat-label { font-size: 18px; line-height: 28px; }
    .abt-stat-value { font-size: 56px; line-height: 46px; }
    /* Pin the + to the same 46px box as the digits. .abt-stat-value is an
       inline-flex row, so its height is its TALLEST child, and the +'s own
       1.125 ratio (44.8 x 1.125 = 50.4px) would outgrow the 46px number box
       and make the panel taller than the home page's. The lift stays — unlike
       home, which drops it here — since the + should read raised at this size
       too; it is proportional, so it needs no separate value. */
    .abt-stat-value .abt-plus { line-height: 46px; }
}
@media (max-width: 575.98px) {
    .abt-card { padding: 32px 24px; }
    /* The actions used to be hidden outright below 576px, which is why the
       slider had no controls on a phone. The design does show them — they just
       belong under the cards at this size (handled in the 768px block). */
}

/* ---------- RTL ---------- */
[dir="rtl"] .abt-card-mark::before,
[dir="rtl"] .abt-card-mark::after { transform: translate(50%, -50%) rotate(45deg); }
[dir="rtl"] .hr-icon-flip-rtl { transform: scaleX(-1); }