/* ==========================================================================
   Home page revamp (Figma: QF - BilAraby - WebsiteDesign-Concept-2)
   Scoped under .hr- prefixed classes to avoid clashing with app.css.
   ========================================================================== */
.home-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-500: #1b190c;
    --hr-brown-700: #131209;
    --hr-brown-900: #0b0b05;
    --hr-blue-300: rgba(84, 138, 175, .18);
    --hr-blue-400: #33739f;
    --hr-blue-500: #005087;
    /* Explicit stack rather than var(--primary-font): that variable expands to
       "Almarai", serif, so any weight Almarai lacks falls back to a serif face. */
    font-family: 'Almarai', 'Helvetica Neue', Arial, sans-serif;
}

/* Defensive override: something in the global stylesheet blockifies plain
   spans in this context, which pushes the "+" suffix onto its own line. */
.home-revamp .hr-counter {
    display: inline !important;
}

.home-revamp .hr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* BIL-539: Figma's pill is 56px tall / 24px in from the edge to the text
       (node 40001286:67719 - text at y=16, x=24, in a 136x56 node). Figma's
       stroke sits INSIDE those bounds, but CSS stacks border on top of
       padding, so a flat 16px/24px plus the 1.5px border below rendered a
       59px-tall pill. Subtracting the border gets the box back to 56x136. */
    padding: 14.5px 22.5px;
    border-radius: 61px;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    border: 1.5px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease;
}
.home-revamp .hr-btn:hover { transform: translateY(-2px); text-decoration: none; }
.home-revamp .hr-btn img { width: 20px; height: 20px; }

/* BIL-539's "ellipse from the bottom" hover glow is defined in
   layout-revamp.css alongside the shared glass ring - the footer's
   "Join Now" is the same Figma component and the footer ships on every
   page, so a home-only copy would not reach it. */

/* Solid fill (not a gradient) plus the soft, stacked ambient shadow Figma
   exports as 5 offset shadows for a smoother falloff than a single blur.
   Figma also gives this variant a 3-stop stroke gradient (transparent ->
   #eec78a at 74% -> white), but the shared glass ring is deliberately
   limited to glass buttons, so the flat border stays here. */
.home-revamp .hr-btn-primary {
    border: 2px outset #ffffff9c;
    border-bottom-width: 0px;
    background: var(--hr-yellow-500);
    color: var(--hr-cream-50);
    box-shadow:
        inset 0 4px 6.1px rgba(255,255,255,.23),
        7px 63px 18px rgba(0,0,0,.02),
        2px 23px 14px rgba(0,0,0,.02),
        1px 10px 10px rgba(0,0,0,.03),
        0 3px 6px rgba(0,0,0,.03);
}
/* BIL-539: no fill or shadow swap on hover - Variant2 (1558:35896) keeps the
   Default's #d98500 and the same five-layer shadow, and adds only the bottom
   ellipse. The amber drop-shadow that used to replace the whole stack here
   was invented, and it fought the glow for the same "something lit up" read. */
.home-revamp .hr-btn-primary:hover { color: var(--hr-cream-50); }
/* Glass pill: same translucent fill as .hr-icon-btn, but was missing the
   frosted blur (matching .hr-timer-box right next to it on the countdown
   band) and the border/inset-highlight/ambient-shadow depth .hr-btn-primary
   already got in the BIL-557 fix - without them it read as a flat tint
   instead of actual glass. */
.home-revamp .hr-btn-ghost-light {
    background: rgba(255,255,255,.2);
    color: #fff;
    border-color: transparent;
    backdrop-filter: blur(20px);
    box-shadow:
        inset 0 4px 6.1px rgba(255,255,255,.23),
        7px 63px 18px rgba(0,0,0,.02),
        2px 23px 14px rgba(0,0,0,.02),
        1px 10px 10px rgba(0,0,0,.03),
        0 3px 6px rgba(0,0,0,.03);
}
/* Same as the primary: Variant3 (1563:8859) holds the .2 fill and lights the
   ellipse instead of brightening the tint. */
.home-revamp .hr-btn-ghost-light:hover { color: #fff; }
/* Secondary button on light surfaces: translucent white pill, per the
   exported SVG (nodes 40001286:67789 "Discover More", 40001286:67838
   "View All"). Figma's Dev Mode "border" CSS text flattens the stroke to
   its first gradient stop (rgba(255,255,255,.1)) - the source SVG's
   <linearGradient> shows it's actually a 3-stop gradient (a light-catching
   glass edge, bright at the top, dipping to grey, faint at the bottom).

   BIL-710: that stroke gradient used to be painted as a second background
   layer clipped to border-box, sitting under a padding-box fill layer. A
   background layer paints everywhere its clip allows, not just the ring -
   so the stroke layer also painted *behind* the translucent fill, and its
   middle stop (rgba(101,104,111,.39), 74% up the pill) showed through as a
   grey band across the button's face. That is what made the pill read as
   grey instead of the near-white one in the design. It is drawn as a
   masked ring on ::after now, so it only ever paints the 1.5px edge and
   the fill alone decides the face colour. */
.home-revamp .hr-btn-ghost-dark {
    position: relative;
    color: var(--hr-brown-900);
    border-color: rgba(255, 255, 255, 0.20);
    /* Figma Dev Mode export - the 7px/63px and 4px/40px shadows are 0-alpha
       in Figma (dead layers there too), so only these four actually paint
       anything. Figma's node also carries a blurred, plus-lighter-blended
       glow circle behind the bottom edge (see git history for the
       CSS attempt at it) - sampling Figma's own rendered pixels for this
       node showed it contributes no visible difference against this fill,
       while reproducing it here with mix-blend-mode:plus-lighter rendered
       as a much stronger white band than Figma shows (the two engines
       don't composite that blend mode over translucent fills the same
       way). Dropped rather than kept for spec-parity-on-paper while
       visibly diverging from the actual target. */
    background: rgba(255, 255, 255, 0.20);
    /*background-clip: padding-box, border-box;*/
    /*background-origin: padding-box, border-box;*/
    /*background-image: linear-gradient(rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20)), linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(101, 104, 111, 0.39), rgba(255, 255, 255, 0.10));*/
    box-shadow: 0px 4px 6.1px 0px rgba(0, 0, 0, 0.06);
    /*backdrop-filter: blur(12px);*/
    /*-webkit-backdrop-filter: blur(12px);*/
    transition: all 0.2s ease-in-out;
}
/* BIL-539: hover is the bottom ellipse only - the lifted drop-shadow that
   used to replace the resting shadow here was invented, same as the
   primary's. */
.home-revamp .hr-btn-ghost-dark:hover {
    color: var(--hr-brown-900);
}
/* Figma (node 40001286:67862): same Button treatment as the other pills —
   was missing the inset highlight + ambient shadow, so it read as a flat
   tint instead of a glass circle. */
.home-revamp .hr-icon-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.2);
    border: 1.5px solid transparent;
    box-shadow:
        inset 0 4px 6.1px rgba(255,255,255,.23),
        2px 23px 14px rgba(0,0,0,.02),
        1px 10px 10px rgba(0,0,0,.03),
        0 3px 6px rgba(0,0,0,.03);
    flex-shrink: 0;
}
.home-revamp .hr-icon-btn img { width: 24px; height: 24px; }
/* BIL-539: Variant2 (1563:59195) keeps the .2 fill on hover and lights the
   ellipse; the .35 tint that used to stand in for it was invented. */
/* CTA "forward" arrows (Culture, Register Now): flexbox already mirrors their
   position in RTL (they end up left of the label instead of right), but the
   glyph itself keeps pointing right — pointing away from, not toward, the
   reading direction's forward motion. Mirror the glyph too (BIL-564). */
[dir="rtl"] .hr-icon-flip-rtl { transform: scaleX(-1); }
.home-revamp .hr-diamond {
    width: 16px;
    height: 16px;
    transform: rotate(45deg);
    background: linear-gradient(238deg, var(--hr-green-500) 7%, var(--hr-green-400) 93%);
    flex-shrink: 0;
}

/* ---------- Hero ---------- */
.hr-hero {
    position: relative;
    min-height: 860px;
    display: flex;
    align-items: flex-end;
    /* Top padding clears the transparent header that overlays this section;
       bottom padding keeps the CTAs clear of the countdown card, which is
       pulled up over the hero's lower edge by its negative margin. */
    padding: 220px 160px 190px;
    overflow: hidden;
}
/* Separate layer so the image can crossfade between slides — background-image
   itself isn't animatable. */
.hr-hero-bg {
    position: absolute;
    inset: 0;
    /* Bottom layer of the hero stack: image (0) < overlay scrim (1) < content (2).
       Without an explicit z-index this shares z-index:auto with .hr-hero::before
       and, being later in tree order, painted the image straight over the scrim. */
    z-index: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    transition: opacity .45s ease;
}
.hr-hero-bg.is-fading { opacity: 0; }
/* Top-left accent: diamond + line, positioned per Figma (left:-3.57px,
   top:240px within a 1920x1000 frame — roughly 40px in / 24% down). */
.hr-hero-divider-top {
    display: block;
    position: absolute;
    z-index: 2;
    left: 0px;
    top: 22%;
    width: 300px;
    height: 38px;
    background-image: url("../images/home-revamp/hero-divider-line.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    pointer-events: none;
}
/* Lower-right accent: two diamonds + a line running off the frame's right edge
   (Figma positions it past the 1920px frame width, so it deliberately bleeds).
   BIL-741: the box is cropped to the diamonds and the line is drawn by ::after
   rather than taken from the asset. As a single `auto 100%` background the
   asset was locked to its own aspect ratio — 1051x46 drawn 34px tall is 777px
   wide — while the box it sat in is 40% of the viewport + 80px. Past ~1740px
   of viewport the box outgrew the asset and the line stopped short of the
   screen edge, reading as a break in the middle of the hero. */
.hr-hero-divider-bottom {
    display: block;
    position: absolute;
    z-index: 2;
    left: 60%;
    top: 80%;
    /* 66px = the diamond pair's 89.03 asset units at this height
       (89.03 x 34/46). The asset's own line starts at unit 70.5, i.e. behind
       the second diamond's solid fill, so cropping here leaves the pair and
       nothing else — no stub of line to line up against ::after. */
    width: 66px;
    height: 34px;
    background-image: url("../images/home-revamp/hero-bottom-diamonds.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
    pointer-events: none;
}
/* The line out of the second diamond's tip. 100vw always overshoots the 40% of
   the hero left to cover, and .hr-hero's overflow:hidden crops it — so it
   bleeds off the edge at every viewport width instead of at one. The diamonds
   are centred on the box (asset units 0-46 of 46), so the line's own centre
   lands on 50% less half its 1px. */
.hr-hero-divider-bottom::after {
    content: "";
    position: absolute;
    left: 100%;
    top: calc(50% - .5px);
    width: 100vw;
    height: 1px;
    background: var(--hr-cream-500);
}
[dir="rtl"] .hr-hero-divider-top { left: auto; right: 40px; transform: scaleX(-1); }
/* BIL-744: the Arabic frame mirrors this motif — the line enters from the
   left edge and the diamonds cap its right end, 60% in from the right. The old
   override aimed at that but drew the diamonds off-screen: it right-aligned
   the 777px asset inside a box only 40vw + 80px wide, so under ~1580px of
   viewport the pair fell outside the element's paint box and was cropped away,
   leaving the bare line QA reported as a missing pattern. Mirroring the two
   offsets does it instead, and needs no scaleX: the pair is symmetric about
   its own centre (asset units 0-46 and 43-89), so a flip would be a no-op. */
[dir="rtl"] .hr-hero-divider-bottom { left: auto; right: 60%; }
[dir="rtl"] .hr-hero-divider-bottom::after { left: auto; right: 100%; }
@media (max-width: 991.98px) {
    .hr-hero-divider-top, .hr-hero-divider-bottom { display: none; }
}
/* Diagonal scrim over the hero image — Figma "overlay" (node 40001286:67712).
   Exact stops from the design; dark at the bottom-left (where the heading and
   CTAs sit) and again at the top-right, near-transparent through the middle so
   the photo's subject stays clear. */
.hr-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(70.63deg, rgba(23,19,0,.95) 3.68%, rgba(0,0,0,.009) 25.13%, rgba(5,4,0,.009) 59.09%, rgba(23,19,0,.855) 98.32%);
}
/* Mirrored for RTL, where the heading and CTAs sit bottom-right: the same
   gradient reflected across the vertical axis (360deg - 70.63deg). */
[dir="rtl"] .hr-hero::before {
    background: linear-gradient(289.37deg, rgba(23,19,0,.95) 3.68%, rgba(0,0,0,.009) 25.13%, rgba(5,4,0,.009) 59.09%, rgba(23,19,0,.855) 98.32%);
}
.hr-hero .hr-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    gap: 40px;
}
.hr-hero-heading {
    font-weight: 700;
    font-size: clamp(44px, 2.16vw + 22.5px, 64px);
    line-height: 1.2;
    color: var(--hr-cream-400);
    max-width: 620px;
    margin-bottom: 32px;
}
.hr-hero-heading .hr-accent { color: var(--hr-yellow-400); }
/* The Arabic hero heading is ONE line in the design. It was breaking onto two:
   the 620px cap above is sized for the English copy - eight short words that are
   meant to wrap - while the Arabic is one long line, 771px wide at the desktop
   size. So RTL drops the cap and takes whatever the hero row leaves beside the
   card window (about 912px at 1440), and trims the type only where that budget
   runs out further down.

   The second term is the budget expressed as a font size: the row leaves roughly
   (100vw - 528px), and this heading measures about 14.4x its font-size wide, so
   (100vw - 528px) / 14.4 = 6.94vw - 36.67px. min() means it only bites when the
   clamp above would be too big - above ~1240px it never does. The 40px floor
   stops the trim running away; below it (~1100px) the line wraps, since holding
   one line at 1024px would need ~34px against a 44px design.

   Desktop only. Below 992px the hero stacks and the heading drops to 32px in
   the breakpoint further down; this selector is more specific than that rule, so
   left unscoped it would win and put the phone back up to 40px. */
@media (min-width: 992px) {
    [dir="rtl"] .hr-hero-heading {
        max-width: none;
        font-size: min(clamp(44px, 2.16vw + 22.5px, 64px), max(40px, 6.94vw - 36.67px));
    }
}
.hr-hero-heading .word {
    display: inline-block;
    margin-inline-end: 10px;
    opacity: 0;
    transform: translate(-30px, 30px);
    animation: hrSlideFadeUp .6s ease-out forwards;
}
@keyframes hrSlideFadeUp { to { opacity: 1; transform: translate(0, 0); } }
.hr-hero-heading .word:nth-child(1) { animation-delay: .1s; }
.hr-hero-heading .word:nth-child(2) { animation-delay: .3s; }
.hr-hero-heading .word:nth-child(3) { animation-delay: .5s; }
.hr-hero-heading .word:nth-child(4) { animation-delay: .7s; }
.hr-hero-heading .word:nth-child(5) { animation-delay: .9s; }
.hr-hero-heading .word:nth-child(6) { animation-delay: 1.1s; }
.hr-hero-heading .word:nth-child(7) { animation-delay: 1.3s; }
.hr-hero-heading .word:nth-child(8) { animation-delay: 1.5s; }
.hr-hero-ctas { display: flex; gap: 24px; flex-wrap: wrap; }
/* A three-slot window onto every banner. .hr-hero-cards is the window;
   .hr-hero-cards-track holds all of them and is shifted one slot per step,
   after which the leading card moves to the far end - so the scroll loops for
   any number of banners instead of stopping at the first three. The slots have
   to be a uniform size for that shift to land on the next card, which is why
   the active card is enlarged with a scale transform (no layout effect) rather
   than the larger width/height it used to carry; 125x76 at 1.2 comes out at
   150x91.2, matching the 150x92 it was before. */
.hr-hero-cards {
    --hr-card-w: 125px;
    --hr-card-h: 76px;
    --hr-card-gap: 16px;
    --hr-card-scale: 1.2;
    /* Room for the scaled middle card, so overflow:hidden cannot clip it into a
       hard-edged rectangle and shave off its rounded corners. Only the cross
       axis needs it: the enlarged card is always the middle one, so along the
       scroll axis it grows into the gaps between its neighbours, never towards
       the clip edge. Keeping the scroll axis unpadded also keeps exactly three
       slots in view - any padding there would start revealing the next card. */
    --hr-card-bleed: calc(var(--hr-card-w) * (var(--hr-card-scale) - 1) / 2 + 6px);
    flex-shrink: 0;
    overflow: hidden;
    height: calc(var(--hr-card-h) * 3 + var(--hr-card-gap) * 2);
    padding: 0 var(--hr-card-bleed);
    /* Keeps the cards' outer edge where it sat before the padding was added. */
    margin-inline-end: calc(var(--hr-card-bleed) * -1);
}
.hr-hero-cards-track {
    display: flex;
    flex-direction: column;
    gap: var(--hr-card-gap);
    align-items: flex-end;
    will-change: transform;
}
.hr-hero-cards-track.is-sliding { transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) {
    .hr-hero-cards-track.is-sliding { transition: none; }
}
.hr-hero-card {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    padding: 0;
    background: none;
    width: var(--hr-card-w);
    height: var(--hr-card-h);
    flex: 0 0 auto;
    opacity: .7;
    filter: blur(1px);
    cursor: pointer;
    transition: opacity .3s ease, filter .3s ease, transform .3s ease;
}
.hr-hero-card:hover { opacity: .9; filter: none; }
/* The active card is the one currently shown as the hero background. It used to
   carry a drop shadow, but the window now clips to three slots and the shadow's
   20px blur reached past the clip edge - so instead of a soft shadow it drew a
   hard-edged grey slab around the thumbnail. Dropped, so the card is exactly
   the image; the scale and the loss of the blur already set it apart. */
.hr-hero-card-active {
    transform: scale(var(--hr-card-scale));
    opacity: 1;
    filter: none;
}
.hr-hero-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 991.98px) {
    .hr-hero { padding: 140px 24px 40px; min-height: 560px; }
    .hr-hero .hr-hero-inner { flex-direction: column; align-items: flex-start; }
    /* The window turns on its side here: three slots across instead of down.
       Must not exceed the column, or the row pushes the page wider than the
       viewport and horizontal overflow breaks touch scrolling. */
    .hr-hero-cards {
        /* Axes swap with the direction: the cushion for the scaled card moves to
           the block axis, and the inline axis becomes the tight one. */
        --hr-card-bleed-y: calc(var(--hr-card-h) * (var(--hr-card-scale) - 1) / 2 + 6px);
        width: calc(var(--hr-card-w) * 3 + var(--hr-card-gap) * 2);
        height: auto;
        max-width: 100%;
        padding: var(--hr-card-bleed-y) 0;
        margin-inline-end: 0;
    }
    .hr-hero-cards-track {
        flex-direction: row;
        align-items: center;
    }
    .hr-hero-heading { font-size: 32px; }
}
/* Scale the three cards down so they fit a phone's width (3 cards + gaps must
   stay under ~340px). They were 125/150/125 + gaps = 432px on a 390px screen. */
@media (max-width: 575.98px) {
    .hr-hero-cards {
        --hr-card-w: 92px;
        --hr-card-h: 58px;
        --hr-card-gap: 8px;
        --hr-card-scale: 1.17; /* 92x58 -> 107.6x67.9, matching the old 108x68 */
    }
}
/* Phones: 560px (the tablet figure above) left the banner reading as a short
   strip - once the 140px of header clearance and the bottom padding are taken
   out, the heading, CTAs and card row had barely any room and almost none of
   the background image showed. 700px is close to a phone viewport's full
   height, which is how the hero reads on desktop. */
@media (max-width: 767.98px) {
    .hr-hero { min-height: 700px; }
    /* Phones: stack the two pills instead of waiting for flex-wrap to break
       the row - side by side they nearly fill a 390px viewport and the labels
       crowd the edges. align-items:flex-start keeps each pill at its own
       label's width rather than stretching to the column, and being the
       inline-start edge it mirrors on its own in RTL. */
    .hr-hero-ctas {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* ---------- Countdown / venue strip ----------
 * Per Figma the green card straddles the hero/cream boundary: the strip's own
 * band is transparent over the hero for its top portion, then cream below. */
.hr-countdown-band {
    /*position: relative;*/
    /* Solid cream — no transparent window. A transparent band would expose
       main's green background (app.css sets main{background:#0e6057}) in the
       gap below the hero. The card straddles the hero edge via its negative
       top margin instead. */
    background: var(--hr-cream-500);
    padding: 0 160px;
}
.hr-countdown {
    /* -96px of the card is lifted over the dark hero, the rest sits on the
       cream below (Figma). This was exactly half back when the card was
       ~193px tall; BIL-745 took it to Figma's 260px, so it now straddles the
       hero edge 96/164 rather than evenly - keeping the lift unchanged rather
       than deepening it to -130px, since Figma's hero frame is what decides
       where that edge should fall and this card alone doesn't say. */
    margin: -96px auto 0;
    max-width: 1600px;
    position: relative;
    z-index: 2;
    border-radius: 20px;
    /* Extra inline-end padding reserves room for the orange motif so the venue
       text never runs underneath it. */
    padding: 60px 172px 60px 60px;
    background: linear-gradient(81deg, var(--hr-green-400) 49%, var(--hr-green-500) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    color: #fff;
    overflow: hidden;
}
/* Orange motif at the card's right edge — rendered straight from Figma as a
   transparent PNG (183x252), already in the correct orientation. The earlier
   SVG export was landscape with an oversized clipped path, which distorted
   once rotated and scaled. */
.hr-countdown::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    bottom: 0;
    /* BIL-714: in Figma the motif runs the card's full height, corner to
       corner (the card's own overflow:hidden + 20px radius trims it). The
       fixed `width: 140px` + `contain` fitted it to the box's *width*
       instead, so inside the 260px card it drew only 140x193 and left a band
       of green above and below it.

       Height now comes from top/bottom and the width follows it through the
       PNG's own 183:252 ratio, which keeps the earlier fix intact too: the
       box grows with the card, so nothing clips when the timer wraps to a
       second row at in-between widths, and `contain` on a box of the image's
       own ratio can neither crop nor stretch the shape. */
    width: auto;
    aspect-ratio: 183 / 252;
    background-image: url("../images/home-revamp/countdown-motif.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    pointer-events: none;
}
.hr-countdown-title { display: flex; flex-direction: column; gap: 16px; }
/* A width floor on the countdown band's Register pill, so it does not shrink to
   its label.

   .hr-btn is content-sized, and "Register Now" (148px) is a much longer string
   than "سجل الآن" (119px) - so the Arabic band rendered a pill 29px narrower
   than the English one for the same control, which read as undersized next to
   the timer boxes. Heights already matched at 56.

   148px is the English pill's own width, so the two locales now render the same
   size and EN is untouched. Worth recording that Figma's node for this button is
   136x56 (see the padding note on .home-revamp .hr-btn) - the design's sample
   label is shorter than the real "Register Now", which is why the live English
   pill sits 12px over it. The floor follows the live reference rather than the
   node, since matching EN is the point.

   min-width, not width: a longer label in either locale still grows the pill
   instead of overflowing it. */
.hr-countdown-title .hr-btn { min-width: 148px; }
.hr-countdown-title h2 { font-size: 32px; font-weight: 700; color: var(--hr-cream-50); margin: 0; }
.hr-countdown-timer { display: flex; gap: 8px; text-align: center; }
/* BIL-745: Figma nodes 40001286:67738-67747 - a 24px inset around 48px/56px
   digits and a 20px/28px label 8px below them, which is what makes the box
   Figma's 140px tall (24 + 56 + 8 + 28 + 24). This used to render 32px/13px
   inside 16px/10px of padding, at 99px tall. The line-heights are explicit
   because Almarai's default 1.5 would set the two lines further apart than
   the design's box allows, and letter-spacing is 0 in Figma - it used to
   carry .5px, which widened every box past the design.

   Boxes hug their content as Figma's do - 127/120/138/146 wide, growing with
   the label - floored at 120px. That floor is both Figma's narrowest box
   (HOURS) and what 3-digit days need ("208" sets ~72px at 48px, and a summit
   can be 100+ days out). The Arabic labels are far shorter than the English
   ones, so in Arabic every box sits on that floor and the row keeps an even
   rhythm instead of stepping through four different widths. */
.hr-countdown-timer .hr-timer-box {
    background: rgba(230,240,239,.1);
    border: none;
    border-radius: 16px;
    /* Figma stacks the two lines with an 8px gap rather than letting the line
       boxes sit flush, so the box is a column in its own right. */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    min-width: 120px;
    box-sizing: border-box;
    flex: 0 0 auto;
    backdrop-filter: blur(20px);
}
.hr-countdown-timer .hr-timer-box strong { display: block; font-size: 48px; line-height: 56px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hr-countdown-timer .hr-timer-box span { display: block; font-size: 20px; line-height: 28px; font-weight: 700; }
/* Figma authors this card at a 1920 frame, where it is 1600px wide with
   1368px of content. At the full box size above, the title + timer + venue
   only fit on one line from ~1616px of viewport up, and .hr-countdown wraps
   rather than overflowing - so below that the venue drops to its own line and
   the card grows from 260px to ~358px tall. Scale every box figure to 3/4
   through the laptop range instead (140 -> 105 tall), which keeps the card's
   single-row shape down to the ~1460px where it already wrapped before this
   ticket. Same approach .hr-gathering takes between 768px and 1800px.

   No min-width bound: the tablet range needs the same 3/4 figures, otherwise
   the digits would step back UP to 48px below 992px, where the timer gets a
   full-width row of its own. This block sits above the two max-width blocks
   below so their narrower overrides (the 68px flex basis, then the phone
   sizes) still win inside their own ranges. */
@media (max-width: 1699.98px) {
    .hr-countdown-timer .hr-timer-box { padding: 18px; gap: 6px; min-width: 90px; }
    .hr-countdown-timer .hr-timer-box strong { font-size: 36px; line-height: 42px; }
    .hr-countdown-timer .hr-timer-box span { font-size: 15px; line-height: 21px; }
}
/* Card sets color:#fff for everything (.hr-countdown), but the venue text is
   cream in Figma — a touch softer than the pure-white "Hurry Up!" title. */
/* Row, not column: the pin belongs on the address's first line, not stacked
   above it. flex-start rather than center so it stays on that first line when
   the address wraps, instead of drifting to the vertical middle of two lines.

   352px = the 320px measure the text had as a column, plus the 24px pin and
   the 8px gap - so the address still breaks at exactly the same word it did
   before, only with the pin beside it now. The phone block below restates the
   old 320px cap, where the venue shares a row with the Register pill and the
   extra 32px would push that pill onto its own line sooner. */
.hr-countdown-venue { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; max-width: 352px; font-size: 18px; color: var(--hr-cream-500); }
/* No shrink on the pin, and min-width:0 on the text so a long address wraps
   inside its own box rather than forcing the row wider. */
.hr-countdown-venue img { width: 24px; height: 24px; flex: 0 0 auto; }
.hr-countdown-venue span { min-width: 0; }
@media (max-width: 991.98px) {
    .hr-countdown-band { padding: 0 16px; background: var(--hr-cream-500); }
    /* row + wrap, not column: the timer is width:100% so it still takes a line
       of its own, and the venue and the Register pill then share the next one -
       which is what puts the pill beside a short address instead of under it.
       Wrapping is what makes that conditional for free: when the address is too
       long to leave room (the Arabic value, or a narrow phone), the pill drops
       to its own line rather than squeezing or overflowing. */
    .hr-countdown {
        margin: 20px 0 0;
        padding: 24px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        /* Split gap: 24px still separates the timer row from the one below it,
           but only 12px sits between the address and the pill. The card's inner
           width is 360px on a 440px phone and the pair needs 195 + gap + 148 -
           367 at the inherited 24px, which wrapped the pill onto its own line;
           12px brings it to 355 and they share the row. Below ~430px the pair
           cannot fit either way and wrapping takes over, which is the intended
           "only when the address is small" behaviour. */
        column-gap: 12px;
        row-gap: 24px;
    }
    .hr-countdown::after { display: none; }
    /* Once the card stacks, the title block gets the card's full width. The
       Register pill stays end-aligned on its own row (the "Hurry Up!" heading
       this block used to pair it with is commented out in
       home/countdown-venue.blade.php, so the row holds only the pill).

       order:3 moves that row to the FOOT of the stacked card, below the timer
       and the venue, instead of sitting above them. .hr-countdown is a flex
       column here and its other children keep the default order:0, so 3 is
       enough to put this last; the card's own 24px gap spaces it. Desktop is
       untouched - the order only applies inside this breakpoint. */
    .hr-countdown-title {
        /* order:3 puts the pill after the venue, so the row reads address then
           button. flex:1 1 0 - a ZERO basis, not auto - is what splits the row
           evenly with the venue: with an auto basis each item starts from its
           own content width and the wider one keeps more of the row, which is
           what used to drop the pill onto a line of its own once the address
           got long. At a zero basis neither can overflow, so the pair always
           shares one row at half and half. */
        order: 3;
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    /* Fills its half rather than hugging its label, so the two halves read as
       equal. margin-inline-start:auto is dropped with it - that was what
       end-aligned the pill when this block was the card's full width. */
    .hr-countdown-title .hr-btn { margin-inline-start: 0; width: 100%; justify-content: center; }
    /* Pin icon reads inline before the venue name here rather than stacked
       above it. Column direction is Figma's desktop treatment, where the venue
       is a narrow 320px block in the card's last column; in the stacked card
       there's a full row to run along. */
    .hr-countdown-venue {
        flex-direction: row;
        /* flex-start, not center: the pin belongs on the address's FIRST line
           however many lines the address runs to. Centring put it beside the
           middle line as soon as the address wrapped past two - and in a half
           share of the row it wraps to three. The 24px pin and the 24px line
           box are the same height here, so the two align exactly. */
        align-items: flex-start;
        /* No cap here: the column is a half share of the row now, and a 320px
           max-width would stop it reaching that half on a wider phone. */
        max-width: none;
        /* Half the row, the pill takes the other half. Zero basis for the same
           reason as .hr-countdown-title above; min-width:0 lets the address
           wrap inside its half instead of forcing the row wider than the card. */
        flex: 1 1 0;
        min-width: 0;
    }
    .hr-countdown-venue img { flex: 0 0 auto; }
    /* Timer must stay inside the card — four fixed 76px boxes plus gaps ran
       387px wide and pushed past a 390px viewport. */
    .hr-countdown-timer { width: 100%; flex-wrap: wrap; }
    /* A 68px floor stops the boxes collapsing around their content: with
       flex-basis:0 / min-width:0 they shrank to ~40px and crushed the labels
       (especially in Arabic). 4 x 68px + 3 x 6px gap = 290px, which still fits
       the ~326px of usable width on a 390px screen. */
    .hr-countdown-timer .hr-timer-box { flex: 1 1 68px; min-width: 68px; }
}
@media (max-width: 575.98px) {
    .hr-countdown { padding: 20px 16px; }
    .hr-countdown-timer { gap: 6px; }
    /* gap:0 keeps this tight mobile stack exactly as it was - the 8px column
       gap above is Figma's desktop figure and reads too loose against 20px
       digits. */
    .hr-countdown-timer .hr-timer-box { padding: 12px 4px; gap: 0; text-align: center; }
    .hr-countdown-timer .hr-timer-box strong { font-size: 20px; line-height: 1.2; }
    .hr-countdown-timer .hr-timer-box span {
        font-size: 10px;
        /* Explicit now that the rules above set a fixed line-height rather
           than leaving it `normal` - without this the phone box inherited the
           21px laptop line and grew 6px taller than it used to be. */
        line-height: 15px;
        letter-spacing: 0;
        white-space: nowrap;
    }
    .hr-countdown-venue { max-width: 100%; font-size: 16px; }
}

/* ---------- Gathering card + stats ---------- */
.hr-gathering {
    /* Soft warm wash over the cream rather than a flat fill — Figma has a light
       radial glow behind the content and a faint tint at the edges. */
    /* The glow is kept high and tight so it fades out well before the section's
       bottom edge — otherwise it meets the flat cream of the Partners section
       below and reads as two different background colours. */
    background:
        radial-gradient(ellipse 55% 42% at 66% 34%, rgba(255,255,255,.6), rgba(255,255,255,0) 72%),
        var(--hr-cream-500);
    /* No top padding: the countdown band above already supplies the cream and
       its own spacing, so the two read as one continuous surface. */
    padding: 100px 160px 0px;
    position: relative;
    overflow: hidden;
}
/* Figma authors this section at 1922x794 (node 40001286:67757) and its
   spacing is not a set of gaps: the row is 1269 wide - a 694px media and a
   623px content column that OVERLAPS it by 48px - and the stats sit 98px
   further on, ending 160px from the section edge, the same inset the row
   starts at. Each of those figures is set on the column that owns it below,
   so the row itself carries no gap.

   Reproducing that is what keeps the panel at its designed 623px. The old
   `space-between` + 48px gap + 24px stats margin spent 120px where Figma
   spends 50 (-48 + 98), which left the column 79px short at 1920 - crushing
   the Date/Place row to 141px so "Multaqa, Education City" broke onto three
   lines - and dumped what it took into the panel-to-stats gap: 120px against
   the design's 98px at 1920, and ~394px in the laptop range, where the column
   grew to 933px while the panel stayed 623. */
.hr-gathering-row {
    display: flex;
    /* Figma: the content column (heading+description+panel) is taller than
       the photo, so centering it made it spill out equally above AND below
       the photo. Top-aligning keeps it inside the photo's own vertical
       span instead of poking out above it. */
    align-items: flex-start;
    gap: 0;
    flex-wrap: wrap;
    /* Capped at Figma's content width and centred, the same way .hr-countdown
       is capped at 1600. Without it the row keeps stretching past the design
       and the surplus has nowhere to go but that gap. The section keeps its
       own full-bleed background and padding. */
    max-width: 1602px;
    margin-inline: auto;
}

/* --- Media column: exact Figma composition (node 40001286:67761), a
       694x554 reference frame reproduced as independent, precisely
       positioned/sized layers rather than one flattened raster export.
       Every child below is positioned as a percentage of this frame so the
       whole thing scales together at any width; the frame's own aspect
       ratio (694:554) is fixed so those percentages stay correct. */
.hr-gathering-media {
    /* Figma (node 40001286:67761): z-index 2, above the content column (1) -
       the main figure cut-out is deliberately wider than this frame and
       needs to overlap/paint in front of the panel's leading edge (the
       hand reaching over the card), not get covered by it. */
    z-index: 2;
    position: relative;
    /* Flexes rather than sitting rigid at 694, and shrinks at twice the
       content column's rate: the photo can afford to give, whereas the column
       carries the panel, whose Date | separator | Place row runs out of room
       and starts breaking lines as soon as it drops much under Figma's 623px.
       The aspect-ratio keeps the composition proportional as it gives, and the
       row's max-width caps its growth. */
    flex: 1 2 694px;
    aspect-ratio: 694 / 554;
}
/* Green-to-yellow gradient card (67762): only the top corners are rounded -
   the bottom is square, tucked behind the figures. */
.hr-gathering-backdrop {
    position: absolute;
    left: 14.913%;
    top: 13.903%;
    width: 58.443%;
    height: 78.729%;
    border-radius: 37px 37px 0 0;
    background: linear-gradient(202.94deg, var(--hr-green-500) 18.649%, var(--hr-yellow-500) 82.952%);
}
/* Corner bracket + solid diamond (67763) - one exported asset (Figma
   combines both into a single "Frame 1618873965" vector) instead of two
   hand-drawn CSS primitives. */
.hr-gathering-bracket {
    position: absolute;
    left: 2.568%;
    top: 10.028%;
    width: 31.788%;
    height: 43.968%;
    z-index: 0;
}
/* Main figure cut-out (67766, "image 63") - deliberately wider/taller than
   the frame itself, overflowing past the green card on every side. */
.hr-gathering-figure-main {
    position: absolute;
    left: 13.116%;
    top: -3.314%;
    width: 101.744%;
    height: 96.191%;
    z-index: 1;
    display: block;
    pointer-events: none;
}
/* Second, smaller figure (67768, "image 61") - painted last in Figma, so it
   sits above the main figure and the badge where they're close. */
.hr-gathering-figure-second {
    position: absolute;
    left: -0.039%;
    top: 38.610%;
    width: 40.197%;
    height: 61.322%;
    z-index: 3;
    display: block;
    pointer-events: none;
    object-fit: cover;
}
/* Play badge (node 40001286:67767, "Defautl"), positioned as a percentage of
   the .hr-gathering-media frame so it scales and tracks the layered figures
   at any width. Figma: top-left (424.98, 123.61), size 174.837, against the
   694x554 frame - converted to a centre point since the badge is centred via
   translate(-50%,-50%): centre = (512.4, 211.03) = (73.83%, 38.09%) of the
   frame; diameter = 174.837 / 694 = 25.19% of the frame's width. */
.hr-gathering-badge {
    position: absolute;
    left: 73.83%;
    top: 38.09%;
    width: 25.192%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: none;
    border: 0;
    padding: 0;
    z-index: 2;
    cursor: pointer;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.18));
    transition: transform .3s ease;
}
.hr-gathering-badge:hover { transform: translate(-50%, -50%) scale(1.05); }
/* White backing behind the rotating text — without it, the ring sat directly
   on the transparent hole and read as illegible against the busy photo/green
   backdrop showing through the gaps between letters (Figma has this same
   solid white disc under the ring). */
.hr-gathering-badge .hr-badge-backing {
    position: absolute;
    inset: 0;
    background: var(--hr-cream-50);
    border-radius: 50%;
}
.hr-gathering-badge .hr-badge-ring {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    animation: hr-badge-spin 16s linear infinite;
}
@keyframes hr-badge-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* Thumbnail sliver: Figma shows a thin ring of the event photo peeking out
   between the rotating text ring and the dark center divider. Node
   40001286:67767 measures this at 104.5px of a 174.837px badge (~60%) —
   larger than the green centre (~46%) so a sliver shows around its edge.
   Must be absolutely positioned + clipped — as a plain unstyled <img> it
   rendered at its natural 700x467px size and blew up the whole badge's
   height (the button has no explicit height, only aspect-ratio). */
.hr-gathering-badge .hr-badge-thumbnail {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    overflow: hidden;
    display: block;
}
.hr-gathering-badge .hr-badge-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Thin dark ring separating the white text backing from the green center,
   matching Figma's divider between the two. Center circle itself stays
   static — only the ring text (the image above) rotates underneath it. */
.hr-gathering-badge .hr-badge-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46%;
    height: 46%;
    transform: translate(-50%, -50%);
    /*background: var(--hr-brown-900);*/
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hr-gathering-badge .hr-badge-center::before {
    content: "";
    position: absolute;
    inset: 0%;
    background: var(--hr-green-500);
    border-radius: 50%;
}
.hr-gathering-badge .hr-badge-center img {
    position: relative;
    z-index: 1;
    /* A right-pointing triangle centred on its own bounding box reads as
       shifted left to the eye — the flat edge is on the left, so there's
       "more shape" on that side. Nudge it right to optically balance it in
       the circle (this is true in Figma's own render too, at this icon's
       size the offset is imperceptible there but shows up more at this
       larger scale). */
    left: 6%;
}
.hr-gathering-badge .hr-badge-center img {
    /* Width auto (not a matching 50%): the icon's own viewBox isn't square,
       so forcing both dimensions stretched the triangle. Figma: the triangle
       glyph is ~33% of the green circle's diameter, with generous green
       showing around it — this was 46%, crowding the circle almost edge to
       edge. */
    width: auto;
    height: 33%;
    display: block;
}

/* --- Content column: heading/description sit on the cream, only the meta +
       CTAs live inside the white panel (Figma). --- */
.hr-gathering-content {
    /* Figma (node 40001286:67769): z-index 1, below the media column (2) so
       the photo's overlapping edge paints in front of this column's panel,
       not behind it. */
    z-index: 1;
    position: relative;
    /* Figma's 623px, and the 48px overlap onto the media that the row's
       removed gap used to stand in for. min-width:0 overrides the flex item's
       automatic min-content floor so the panel's non-wrapping rows can't
       force the column wider than this. */
    flex: 0 1 623px;
    min-width: 0;
    margin-inline-start: -48px;
}
.hr-gathering-content h2 {
    /* Figma (node 40001286:67772): 48px/56px bold. */
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
    /* Figma (node 40001286:67771): the heading is 543 wide and inset 80px
       inside the 623 column, not 460 wide flush to it. The 80px is also what
       keeps the column's 48px overlap from dragging this text over the photo
       - only the panel's fill is meant to reach under it. */
    max-width: 543px;
    margin-inline-start: 80px;
    background: linear-gradient(90deg, #d09a38, #ac853a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 24px;
}
.hr-gathering-desc {
    /* Figma (node 40001286:67773): 24px/32px regular. */
    font-size: 24px;
    line-height: 32px;
    color: var(--hr-brown-300);
    /* Same 543px and same 80px inset as the heading above it (Figma node
       40001286:67773). */
    max-width: 543px;
    margin-inline-start: 80px;
    margin-bottom: 42px;
}
/* The CMS rich-text field already wraps its own content in <p> tags -
   reset the browser's default paragraph margin so it doesn't add extra
   spacing on top of this wrapper's own margin-bottom. */
.hr-gathering-desc p { margin: 0; }
.hr-gathering-panel {
    /* Fills the content column, which is itself Figma's 623px (node
       40001286:67774 spans its parent edge to edge). */
    width: 100%;
    /* Exact Figma fill (node 40001286:67774): a subtle 2-stop gradient,
       #fdfdf9 -> cream-500, not a flat solid. */
    background: linear-gradient(-90deg, #fdfdf9 0%, var(--hr-cream-500) 100%);
    /* Figma: only the trailing corners are rounded - the leading edge sits
       flush against the photo (which overlaps it), so a fully-rounded card
       here left a visible gap the photo's hand should be reaching into. */
    border-radius: 0 28px 28px 0;
    /* Figma: asymmetric - 80px on the leading (flush-against-photo) edge,
       32px everywhere else. Logical properties so it flips with the
       border-radius above in RTL. */
    padding-block: 32px;
    padding-inline-start: 80px;
    padding-inline-end: 32px;
    box-shadow: 0 10px 40px rgba(27,25,12,-0.95);
    /* No pull-back of its own any more: the 48px overlap onto the photo is
       Figma's, and it belongs to the whole content column (see
       .hr-gathering-content). The heading and description step back off it
       with their own 80px inset, which is why only this panel's fill reaches
       under the hand cut-out. */
}
/* The panel's content mirrors in Arabic (text alignment, button order), so
   the shade and squared-off edge should mirror with it rather than stay
   pinned to the same physical side. */
[dir="rtl"] .hr-gathering-panel {
    background: linear-gradient(90deg, #fdfdf9 0%, var(--hr-cream-500) 100%);
    border-radius: 28px 0 0 28px;
}
.hr-gathering-meta {
    display: flex;
    /* Figma (node 40001286:67775): the row is centre-aligned, so the taller
       separator graphic centres on the Date/Place text rather than hanging
       from a shared top edge. */
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    /* Keep Date | ◆ | Place on one row as in Figma; the place value wraps
       internally rather than pushing the columns onto separate lines. */
    flex-wrap: nowrap;
}
/* Figma (node 40001286:67778/67785 label, 67779/67786 value): 20px/28px
   regular #4d4d4d labels, 24px/32px bold #1b190e values. */
.hr-gathering-meta .hr-meta-item span { display: block; font-size: 20px; line-height: 28px; color: #4d4d4d; margin-bottom: 8px; }
.hr-gathering-meta .hr-meta-item strong { display: block; font-size: 24px; line-height: 32px; font-weight: 700; color: #1b190e; }
.hr-gathering-meta .hr-meta-item:first-child strong { white-space: nowrap; }
/* Exact exported asset (node 40001286:67780, "Frame 1618873955") - a
   gradient line with a solid diamond threaded through its centre - rather
   than a hand-built line + pseudo-element diamond. */
.hr-meta-separator {
    width: 28.32px;
    height: 83px;
    flex-shrink: 0;
    display: block;
}
/* Date | ◆ | Place only fits across one row while the panel is near Figma's
   623px, and how much room it needs is CMS data, not a layout constant: this
   summit's "19 - 20 September 2026" sets 247px against the design's 167px
   sample. Once the panel is narrower than the row's content needs, Date's
   white-space:nowrap means the row can neither shrink nor wrap, so
   .hr-gathering's overflow:hidden clips the tail of Place - it did so at 1200
   before this query, by 31px.
   Queried on the panel rather than the viewport because the panel arrives at
   a given width through several different breakpoint tiers, and a viewport
   threshold would have to be re-tuned for each of them (and re-tuned again
   for a longer date or place string). Same stacking the phone layout uses. */
.hr-gathering-panel { container-type: inline-size; }
/* 450px is the panel's CONTENT box, not its 623px border box - a size query
   resolves against the content box, so this is measured after the panel's
   80px/32px padding. The row needs ~438px of it here (247 Date + 24 + 28
   separator + 24 + 115 for Place's longest word); 450 leaves a little head
   room for a longer string before it would clip. */
@container (max-width: 450px) {
    .hr-gathering-meta { flex-wrap: wrap; row-gap: 16px; }
    .hr-gathering-meta .hr-meta-item { min-width: 0; flex: 1 1 100%; }
    .hr-meta-separator { align-self: center; }
}
.hr-gathering-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* This Register Now instance (Figma node 40001286:67788) has a transparent
   border, unlike the hero/partners hr-btn-primary instances which use an
   opaque white one — presumably because an opaque ring would be redundant
   against this panel's near-white background. Scoped so it doesn't affect
   those other instances. */
.hr-gathering-ctas .hr-btn-primary { border-color: rgba(255,255,255,0); }

/* Horizontal rule with a diamond cluster at each end (Figma), same technique
   as .abt-diamond-divider / .smt-diamond-divider: a 100vw ::before centered
   on the viewport reaches both edges regardless of the section's own
   padding, so this only works as a plain sibling between sections — not
   nested inside a <section>, which app.css defaults to overflow:hidden. */
.hr-diamond-border {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 64px;
    /* BIL-714: the clusters are NOT flush at the page edges - Figma insets
       them by the page's usual 160px gutter and runs the hairline out past
       them to the true viewport edges, so a length of line shows on the
       outer side of each cluster. Same arrangement as .abt-diamond-divider.
       (The old comment here claimed flush-to-edge "per design"; it was not,
       and it also clipped the outermost diamond's point.) */
    padding: 5px 160px;
}
/* BIL: sized by its own edges, not 100vw. This element is already full-bleed
   (a plain sibling between sections, so its box spans the viewport's client
   width), while 100vw counts the vertical scrollbar on top of that - 6px wider
   than the box it was centred in, i.e. 3px of overhang at each edge. Nothing
   clips it here by design, so those 3px landed in the document's scrollable
   overflow and pushed scrollWidth past clientWidth. Anchoring to left/right
   reaches both edges with no vw involved. */
.hr-diamond-border::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    transform: translateY(-50%);
    background: #f3d9b0;
}
.hr-diamond-border-cluster {
    position: relative;
    display: flex;
    align-items: center;
    /* gap = 20 * (sqrt(2) - 1) ≈ 8.284px separates the layout boxes by exactly
       the amount each rotated point overhangs its own box, so the five points
       meet edge-to-edge instead of overlapping into one blob. Same formula as
       .smt-diamond-divider-cluster / .evtd-hero-divider. */
    gap: 8.284px;
    flex-shrink: 0;
}
/* BIL-714: matched to the same divider on Summit/About/Events/Partnership,
   which take it from Figma node 40001286:68074 - 20px squares in solid
   yellow/yellow-100 (#f3d9b0). Home was the last instance still drawing 14px
   squares in a hand-blended #e9be75 (hr-yellow-500 at 50% over the cream),
   so it read both smaller and darker than the same divider everywhere else.
   Solid rather than a faded --hr-yellow-400: opacity flattens the element as
   a group, so a translucent diamond lets the line behind it show through. */
.hr-diamond-border .hr-diamond-sm {
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    background: #f3d9b0;
    flex-shrink: 0;
}
@media (max-width: 991.98px) {
    .hr-diamond-border .hr-diamond-sm {
        width: 10px;
        height: 10px;
    }
    .hr-diamond-border { padding-inline: 16px;margin-top:10px }
    /* All five diamonds per cluster, as on the board - the 4th and 5th used
       to be dropped here. The gap has to follow the halved square: the base
       rule's 8.284px is s * (sqrt(2) - 1) for a 20px diamond, i.e. exactly
       the overhang of one rotated point, and against the 10px square above it
       left 4.14px of daylight between every point instead of letting them
       meet. 4.142px is the same formula at s = 10. */
    .hr-diamond-border-cluster { gap: 4.142px; }
}
.hr-stats-sidebar {
    display: flex;
    flex-direction: column;
    /* Figma (node 40001286:67790): gap-48 between stat rows. */
    gap: 48px;
    flex-shrink: 0;
    position: relative;
    padding-inline-start: 56px;
    /* Figma's 98px from the content column (node 40001286:67790 starts at
       1527, the row ends at 1429). Flat rather than an `auto` leftover: as a
       leftover it collapsed to 0 at ~1800px, where the row's design widths
       exactly fill the section, and the first diamond overlapped the panel. */
    margin-inline-start: 98px;
}
.hr-stats-sidebar .hr-stat { display: flex; align-items: flex-start; gap: 20px; min-width: 180px; position: relative; }
/* One connector per gap, not one line for the whole column: a single
   container-wide line sized with a hardcoded "last row height" offset drifted
   out of sync whenever a row's content changed height, overshooting past the
   4th diamond. Anchoring each segment to its OWN stat's top (its diamond) and
   its own bottom (-gap reaches exactly the next stat's top) tracks any row
   height automatically, and skipping :last-child means there's simply nothing
   left to draw past the last diamond.
   The extra 2.69px below the gap itself reaches past the next stat's own
   top edge and into its diamond's rotated tip: a 16px square rotated 45°
   has a 22.627px bounding box, so its tip sits 8*(√2-1) ≈ 3.31px above the
   unrotated box's top (6px) — i.e. 2.69px down from the stat's own top —
   not at the stat's top edge itself. Without this the line fell 2.69px
   short of the diamond above it, leaving a visible gap. */
.hr-stats-sidebar .hr-stat:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: -50px;
    top: 6px;
    bottom: -50.69px;
    width: 1px;
    background: rgba(11,11,5,.15);
}
/* z-index above the connector line (its sibling ::after, painted later in
   tree order and so on top by default) — the line's left:-50px sits right
   under the diamond's own centre, so without this the line visibly bisected
   every diamond instead of appearing to run behind it. */
.hr-stats-sidebar .hr-stat .hr-diamond { position: absolute; z-index: 1; left: -57px; top: 6px; }
/* Figma has both the number and the label in Brown/brown-900 at 70% group
   opacity, not two different flat colors — rgba(11,11,5,.7) reproduces that
   composite (verified by sampling the rendered Figma export) against this
   section's cream backdrop. */
.hr-stats-sidebar .hr-stat strong { display: block; font-size: 40px; line-height: 48px; font-weight: 800; color: rgba(11,11,5,.7); margin-bottom: 4px; }
/* :not(.hr-counter) — the counter is also a <span>, and must inherit the 40px
   from its parent <strong> rather than take the label size. */
.hr-stats-sidebar .hr-stat span:not(.hr-counter) { display: block; font-size: 20px; line-height: 28px; color: rgba(11,11,5,.7); }
.hr-stats-sidebar .hr-stat strong .hr-counter { font-size: inherit; line-height: inherit; color: inherit; }
/* Below 1200px the sidebar becomes a wrapping row, so the single vertical rule
   that threads the diamonds no longer applies. Each stat carries its own short
   connector instead, keeping the line+diamond motif present on tablet/mobile
   (it was simply dropped before). */
@media (max-width: 1199.98px) {
    .hr-stats-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        margin-inline-start: 0;
        padding-inline-start: 0;
        width: 100%;
        margin-top: 24px;
        gap: 20px 16px;
    }
    .hr-stats-sidebar .hr-stat:not(:last-child)::after { display: none; }
    /* The connector is a border on the stat itself and the diamond is pulled
       back by half its width to straddle it. Positioning the line and the
       diamond as two independent elements left them side by side rather than
       the diamond sitting ON the line. */
    .hr-stats-sidebar .hr-stat {
        flex: 1 1 44%;
        min-width: 0;
        align-items: center;
        gap: 12px;
        border-inline-start: 1px solid rgba(0,109,98,.35);
    }
    .hr-stats-sidebar .hr-stat .hr-diamond {
        position: static;
        /* Half of the 16px diamond, so its centre lands on the border. */
        margin-inline-start: -8px;
    }
}
/* Laptop range: Figma's row is 1603px wide all in, which is more than a
   1200-1800px viewport has left after the section's 160px side padding - so
   .hr-gathering-row (flex-wrap: wrap) would drop the media onto its own line
   above content+stats, pushing the stats far down the page instead of the
   compact single row the design intends. Narrow the side padding and the
   media's flex-basis so all three keep sharing one line; the column widths
   and the spacing between them stay on Figma's figures. */
@media (min-width: 768px) and (max-width: 1799.98px) {
    .hr-gathering { padding-inline: 48px; }
    /* A smaller BASIS, not a smaller media. flex-wrap decides on hypothetical
       basis widths before it shrinks anything, so a 694px basis tips the row
       onto two lines the moment Figma's 1603px is a hair wider than the
       section leaves. At 440 the row always fits one line, and the media's
       flex-grow then takes it back up to whatever is genuinely spare - 693px
       by the top of this range. The content column, the 48px overlap and the
       98px stats gap keep Figma's figures throughout; this block used to
       shrink the media AND let the content column grow into the remainder,
       which is what opened the ~394px panel-to-stats gap up here. */
    .hr-gathering-media { flex-basis: 440px; }
}

/* Figma authors this section at 1922x794 (node 40001286:67757) and its
   spacing is not a set of gaps: the row is 1269 wide - a 694px media and a
   623px content column that OVERLAPS it by 48px - and the stats sit 98px
   further on, ending 160px from the section edge, the same inset the row
   starts at.

   Reproducing that is what keeps the panel at its designed 623px. The old
   `space-between` + 48px row gap + 24px stats margin spent 120px where Figma
   spends 50 (-48 + 98), which squeezed the column to 544px, crushed the
   Date/Place row to 141px so "Multaqa, Education City" broke onto three
   lines, and dumped the 79px it took back into the panel-to-stats gap - 120px
   against the design's 98px. */
/* 1110px is where the media's 440px basis and the content column's 623px stop
   sharing a line (440 - 48 + 623 = 1015, plus the section's 2x48 padding), so
   the column wraps under the photo - the stats are already on their own line
   by here. Once it does, its 48px overlap has no photo edge to reach into and
   just hangs it 48px outside the section, and the 80px inset that steps the
   heading and description back off that overlap has nothing to step back
   from. The photo still fills the line on its own through flex-grow. */
@media (max-width: 1109.98px) {
    .hr-gathering-content { margin-inline-start: 0; }
    .hr-gathering-content h2,
    .hr-gathering-desc { margin-inline-start: 0; }
}

/* Hold the three columns on one line for as long as all three exist - below
   1200px the stats become a full-width wrapping row of their own (see the
   max-width:1199.98px block above) and the row is meant to break.
   Shrinking beats wrapping here for two reasons: flex-wrap acts on basis
   widths before it shrinks anything, so the row would break well before it
   actually ran out of room; and on a wrapped line the content column's -48px
   overlap has no photo to reach into, so it just hangs 48px outside the
   section, where overflow:hidden quietly clips it. */
@media (min-width: 1200px) {
    .hr-gathering-row { flex-wrap: nowrap; }
}
@media (max-width: 767.98px) {
    .hr-gathering { padding: 48px 16px; }
    /* No min-height: the cut-out image (aspect ~0.72) only renders ~293px tall
       at mobile container widths, so a 380px floor left a dead cream gap below
       it before the heading. Let the container size to the image instead. */
    /* Every layer in .hr-gathering-media (backdrop, bracket, figures, badge)
       is positioned as a percentage of the frame, so the whole composition
       - including the bracket accent - scales down as one unit here with no
       per-element overrides needed, matching the desktop layout exactly. */
    .hr-gathering-media { flex-basis: 100%; }
    /* Media stacks above the content here, so there is no photo edge left to
       overlap - drop the column's 48px pull-back, and the 80px inset that
       stepped the heading and description back off it, or both would just eat
       into a ~343px column. */
    .hr-gathering-content { flex-basis: 100%; margin-top: 24px; min-width: 0; margin-inline-start: 0; }
    .hr-gathering-content h2,
    .hr-gathering-desc { margin-inline-start: 0; }
    /* The panel was never made responsive: flex-wrap:nowrap on the meta row,
       combined with every flex item's default min-width:auto floor (plus
       Date's own forced white-space:nowrap), meant the row — and the panel
       around it — couldn't shrink below ~419px of content+padding, wider
       than the ~343px a mobile section actually has. Overflow got silently
       clipped by .hr-gathering's overflow:hidden instead of showing. Let
       Date/Place stack instead of forcing them onto one doomed row. */
    /* Media stacks above content here instead of sitting beside it, so
       there's no photo edge left for the panel to stay flush against -
       drop the desktop pull-back and let it sit centred in its column. */
    .hr-gathering-panel { padding: 24px; margin-inline-start: 0; }
    .hr-gathering-meta { flex-wrap: wrap; row-gap: 24px; }
    .hr-meta-item { min-width: 0; flex: 1 1 100%; }

    /* --- Mobile reading order: title, description, image, then the
           Date/Place panel. Those four are not siblings - the heading,
           description and panel all live inside .hr-gathering-content, which
           is itself the photo's sibling - so `order` alone can't interleave
           them. Dissolving the wrapper with display:contents promotes its
           three children to row items in their own right, which order can
           then sequence around the photo. --- */
    .hr-gathering-content { display: contents; }
    .hr-gathering-content h2 { order: 1; }
    .hr-gathering-desc { order: 2; }
    /* Centred, but at the full column measure rather than the 200px the other
       section headings take (see the shared phone-board block near the end of
       this file) - this board wraps the title across the whole column and
       centres the standfirst under it. */
    .hr-gathering-content h2,
    .hr-gathering-desc { text-align: center; }
    /* Figma's phone board measures 32px between each of the four stacked
       blocks - standfirst to photo, photo to panel, panel to stats. The 42px
       here is the desktop figure. */
    .hr-gathering-desc { margin-bottom: 32px; }
    .hr-gathering-media { order: 3; }
    .hr-gathering-panel { order: 4; }
    .hr-stats-sidebar { order: 5; }

    /* --- Stats, per the phone board: a centred single column with no diamond
           and no connector line. Both are desktop furniture - there the column
           runs down the page's leading edge with the line threading the
           diamonds beside it - and the 2x2 wrapping row in the
           max-width:1199.98px block above belongs to the tablet range, which
           has room for two columns. A phone has neither. The type steps down
           with the board too: 30/36 values and 16/24 labels, against the
           desktop 40/48 and 20/28. --- */
    .hr-stats-sidebar {
        flex-direction: column;
        gap: 24px;
        padding-inline-start: 0;
        text-align: center;
        /* 32px from the panel, as with the blocks above - the tablet row's
           24px is what applies otherwise. */
        margin-top: 32px;
    }
    .hr-stats-sidebar .hr-stat {
        /* The tablet row's `flex: 1 1 44%` resolves against the main axis,
           which is vertical here - each stat sizes to its own content. */
        flex: 0 0 auto;
        justify-content: center;
        border-inline-start: 0;
    }
    /* span.hr-diamond rather than .hr-diamond: the base rule that lays these
       out (`.hr-stat span:not(.hr-counter)`) carries a class inside :not(), so
       it outranks a plain .hr-diamond selector and would keep display:block. */
    .hr-stats-sidebar .hr-stat span.hr-diamond { display: none; }
    .hr-stats-sidebar .hr-stat:not(:last-child)::after { display: none; }
    .hr-stats-sidebar .hr-stat strong { font-size: 30px; line-height: 36px; }
    .hr-stats-sidebar .hr-stat span:not(.hr-counter) { font-size: 16px; line-height: 24px; }
    /* Each promoted child needs a full-width basis of its own: as flex items
       on a wrapping row with basis auto they would size to their own text and
       the heading and description would share a line. */
    .hr-gathering-content h2,
    .hr-gathering-desc,
    .hr-gathering-panel { flex: 0 0 100%; max-width: 100%; min-width: 0; }
    /* Stands in for .hr-gathering-content's own margin-top, which went with
       the dissolved box - this is now the photo-to-panel gap (32px, per the
       board). */
    .hr-gathering-panel { margin-top: 32px; }

    /* Flat near-white card rather than the desktop gradient, which fades to
       cream at its leading edge: that fade exists to blend the panel into the
       photo it sits flush against, and once the panel is a stacked full-width
       card with no photo beside it, it just read as an uneven wash. Restated
       for [dir="rtl"] as well - that selector is (0,2,0) against this one's
       (0,1,0) and a media query adds no specificity of its own, so the
       Arabic gradient would otherwise still win here. */
    .hr-gathering-panel,
    [dir="rtl"] .hr-gathering-panel { background: #fdfdf9; }
    /* Rounded on all four corners for the same reason: the squared leading
       edge is there to sit flush under the photo's overlapping hand, and with
       the photo above it instead of beside it that corner just reads as a
       clipped card against the cream. */
    .hr-gathering-panel,
    [dir="rtl"] .hr-gathering-panel { border-radius: 28px; }

    /* Date and Place stack into their own full-width rows here, centred, with
       the divider running horizontally between them. The 28x83 asset can't be
       re-oriented in CSS - its SVG is preserveAspectRatio="none", so a wide
       box stretches the vertical line and the diamond instead of turning
       them - so the row draws the same gradient hairline and centred diamond
       itself, in the asset's own colours (#2f897f line, #006e62 diamond). */
    .hr-gathering-meta { text-align: center; }
    /* Date/Place step down to a 12/18 label over a 16/24 value, from the
       desktop 20/28 and 24/32. Same selectors as the base rules (0,2,1) since
       this block sits later in the file. */
    .hr-gathering-meta .hr-meta-item span { font-size: 12px; line-height: 18px; }
    .hr-gathering-meta .hr-meta-item strong { font-size: 16px; line-height: 24px; }
    .hr-meta-separator { display: none; }
    .hr-gathering-meta .hr-meta-separator + .hr-meta-item { position: relative; padding-top: 24px; }
    .hr-gathering-meta .hr-meta-separator + .hr-meta-item::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        top: 0;
        height: 1px;
        background: linear-gradient(90deg, #fff, #2f897f 49%, #fff);
    }
    .hr-gathering-meta .hr-meta-separator + .hr-meta-item::after {
        content: "";
        position: absolute;
        /* Half the 14px square, so the rotated diamond's centre lands on the
           hairline rather than hanging below it. */
        top: -7px;
        left: 50%;
        width: 14px;
        height: 14px;
        transform: translateX(-50%) rotate(45deg);
        background: #006e62;
    }
}

/* ---------- Partners ---------- */
.hr-partners {
    background: var(--hr-cream-500);
    /* 160px inline padding keeps the heading and logo row on the same left
       edge as every other section, rather than starting near the viewport. */
    padding: 80px 160px;
    position: relative;
    overflow: hidden;
}
/* Teal motif in the bottom-left corner — the exported Figma asset itself.
   In the design it is flipped vertically, hence the scaleY(-1). */
.hr-partners-motif {
    position: absolute;
    left: -117px;
    bottom: -46px;
    width: 578px;
    height: 198px;
    background-image: url("../images/home-revamp/partners-wave.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: scaleY(-1);
    pointer-events: none;
}
.hr-partners-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 64px; position: relative; z-index: 1; }
.hr-partners-head h2 { font-size: 36px; font-weight: 700; color: var(--hr-brown-900); margin-bottom: 8px; }
.hr-partners-head h2 .hr-accent { color: #8e3b78; }
.hr-partners-head p { font-size: 18px; color: var(--hr-brown-300); max-width: 780px; margin: 0; }
.hr-partners-actions { display: flex; gap: 12px; }
/* Continuous loop marquee — no arrows, no pagination. */
.hr-partners-marquee {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-bottom: 84px;
    /* Soften both ends so logos fade in/out rather than clipping abruptly. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.hr-partners-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: hrPartnersLoop 34s linear infinite;
}
.hr-partners-marquee:hover .hr-partners-track { animation-play-state: paused; }
/* Travels left -> right. Because the set is duplicated, -50% is visually
   identical to 0 (the second copy sits exactly where the first began), so
   starting there and sliding to 0 loops with no seam. */
@keyframes hrPartnersLoop { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* RTL follows its own reading direction: right -> left. The offsets are the
   MIRROR of the LTR pair, not a reversal of them. Under direction:rtl the flex
   track is laid out from the right edge, so the duplicate set sits to the LEFT
   of the original and the whole track's spare content hangs off that side. A
   negative translate therefore slides the only content there is further left
   and drags an empty band in from the right - the logos ended up bunched in
   the left half of the container, and the wrap was not seamless. Translating
   positively pulls the off-screen duplicate rightwards into view instead, and
   at +50% it lands exactly where the original started. */
[dir="rtl"] .hr-partners-track { animation-name: hrPartnersLoopRtl; }
@keyframes hrPartnersLoopRtl { from { transform: translateX(50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
    .hr-partners-track { animation: none; }
}
.hr-partner-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 320px;
    height: 140px;
}
.hr-partner-logo img { max-height: 100px; max-width: 100%; object-fit: contain; }
@media (max-width: 991.98px) {
    .hr-partners { padding: 48px 16px; }
    /* The motif is on the phone board too, at ~25% of the desktop artwork -
       it used to be display:none here. Every figure is the desktop one scaled
       by the same 0.25 (578x198 at left:-117/bottom:-46), so the shape keeps
       its proportions and the same share of itself hangs off the corner.
       .hr-partners' overflow:hidden clips the overhang, as on desktop. */
    .hr-partners-motif {
        width: 145px;
        height: 50px;
        left: -30px;
        bottom: -12px;
    }
    /* The motif no longer needs the 84px that clears its peak on desktop -
       at 50px tall it sits well below the logo row. */
    .hr-partners-marquee { margin-bottom: 0; }
    .hr-partner-logo { width: 220px; height: 110px; }
    .hr-partner-logo img { max-height: 80px; }
}
/* Phone board: "View All" moves out of the heading row to a full-width button
   BELOW the marquee. Rather than move it in the blade (which would then need
   absolute positioning to rebuild the desktop heading row), the head is
   collapsed with display:contents so its text block and its actions become
   flex children of the section itself, and order sequences them around the
   marquee - the same technique .hr-testimonials-head uses for its prev/next
   row. display:contents discards the head's own box, so the 64px it carried
   below the heading moves onto the text block. */
@media (max-width: 767.98px) {
    .hr-partners { display: flex; flex-direction: column; }
    .hr-partners-head { display: contents; }
    .hr-partners-head > div:first-child { order: 1; margin-bottom: 64px; }
    .hr-partners-head p { text-align: center; }
    .hr-partners-marquee { order: 2; }
    .hr-partners-actions {
        order: 3;
        width: 100%;
        margin-top: 32px;
    }
    /* flex rather than a flat width:100% so the row still divides evenly if
       the commented-out "Become a Partner" button is ever restored. */
    .hr-partners-actions .hr-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Testimonials ----------
 * Per Figma the cards are only rounded at the TOP and run off the bottom of the
 * dark band, so they appear cut by the boundary with the cream section below.
 * The band therefore has no bottom padding and does not clip its children. */
.hr-testimonials {
    background: var(--hr-brown-500);
    padding: 100px 160px 0;
    position: relative;
    overflow: hidden;
}
/* Faint hairline-and-diamond accents at the band's left and right edges (Figma
   nodes 40001286:67853 and 40001286:67869, both 10% opacity — meant to be
   barely-there).

   These were previously approximated with two 74px CSS squares rotated 45deg,
   and the vertical hairline that runs off each cluster was missing entirely.
   Both were also pushed off-canvas (left:-30px / right:-26px) and then clipped
   away by this band's own overflow:hidden, so neither actually landed where the
   design puts it.

   Offsets are each node's real box measured against the 1922-wide band. Figma
   reports x/y as the post-flip origin — the max corner, not the top-left — for
   both of these, so the boxes are:
     left   x  39 -> 113,    y  574 -> 881    (band is 810 tall, so the
                                               hairline's last 71px is clipped)
     right  x 1800 -> 1874.6, y -404 -> 221.4 (hairline runs up out of the band;
                                               only the diamond lands inside) */
.hr-testimonials::before,
.hr-testimonials::after {
    content: "";
    position: absolute;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.hr-testimonials::before {
    left: 39px;
    /* Anchored to the band's bottom rather than Figma's y=574: the band has no
       fixed height in CSS (it grows with the cards), so a top offset would
       drift. Either way the accent ends 71px past the bottom edge. */
    bottom: -71px;
    width: 74.62px;
    height: 306.05px;
    background-image: url("../images/home-revamp/testimonials-edge-accent-left.svg");
}
.hr-testimonials::after {
    /* Same Figma node — and so the same asset and the same 45.38px inset — as
       .abt-testimonials-edge on the About page, which shares this band. */
    right: 45.38px;
    top: -404px;
    width: 74.62px;
    height: 625.44px;
    background-image: url("../images/about-revamp/testimonials-edge-accent.svg");
}
[dir="rtl"] .hr-testimonials::before { left: auto; right: 39px; transform: scaleX(-1); }
[dir="rtl"] .hr-testimonials::after { right: auto; left: 45.38px; transform: scaleX(-1); }
/* Below 1200px the content column closes on the 39px/45px insets and the
   accents start crossing the cards. Dropped, matching the About page. */
@media (max-width: 1199.98px) {
    .hr-testimonials::before, .hr-testimonials::after { display: none; }
}
.hr-testimonials-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 56px; flex-wrap: wrap; position: relative; z-index: 1; }
.hr-testimonials-head h2 { font-size: 40px; font-weight: 700; color: var(--hr-cream-50); margin: 0; }
/* justify-content:space-between only spaces items apart on a shared row —
   once the heading forces this onto its own wrapped line (narrow viewports),
   a solo flex item defaults to the line's start (left in LTR), so the arrows
   drifted left instead of staying on the trailing edge. The auto margin pins
   it there regardless of wrap. */
.hr-testimonials-actions { display: flex; gap: 10px; margin-inline-start: auto; }
/* Inverse of the filmstrip case: force both arrows white on these dark buttons
   (the exported left arrow has a near-black stroke). */
.hr-testimonials-actions .hr-icon-btn img { filter: brightness(0) invert(1); }
/* BIL-742: every size inside the card is derived from one number — the
   quote's font size, 24px on Figma's 1922-wide frame — and each multiplier
   below is that element's Figma value over 24.

   The band holds its 160px gutters all the way down to the tablet
   breakpoint, so the card narrows much faster than the viewport does: 518px
   at 1922, 381px at 1512, 277px at 1200. The type used to stay at full
   desktop size the whole way, so by 1512 a normal-length quote wrapped to
   ~15 lines and ran the card to ~790px tall. Scaling the ratio with the
   viewport holds the card's proportions — and so its height — at every
   width; at 1922 every calc() below still resolves to its Figma value. */
.hr-testimonial-card {
    --hr-tc-fs: clamp(16px, 1.108vw + 2.7px, 24px);
    background: linear-gradient(180deg, #1e6096 0%, #104f83 62%, #104f83 100%);
    /* Top corners only — the bottom is intentionally squared off and clipped. */
    border-radius: 40px 40px 0 0;
    padding: calc(var(--hr-tc-fs) * 2.3333) calc(var(--hr-tc-fs) * 1.6667) calc(var(--hr-tc-fs) * 4.1667);
    color: var(--hr-cream-50);
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: calc(var(--hr-tc-fs) * 2.25);
    box-shadow: 0 13px 14.7px rgba(0,0,0,.02);
}
/* The carousel drops to two slides below 1200px (home-revamp.js), so through
   that range the card runs 324-428px wide instead of following the 3-up
   formula the clamp above is fitted to — a flat ratio suits it better. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hr-testimonial-card { --hr-tc-fs: 18px; }
}
/* Faint accent shape bleeding out of the card's top corners, exported from
   Figma (Vector 4) — the exact decorative asset rather than a hand-rolled
   pattern.

   The shape keeps its exported 578.5x449.4 size on every board; what stays
   constant between them is how far it overhangs the card's TRAILING edge
   (143px) and how far it sits above the top (162px). On the 1922 frame's
   518px card that put its leading edge at +83px, which is how this rule used
   to be written — but as an absolute `left` it stopped tracking anything
   once the card was no longer 518px wide.

   BIL-742: that is the "BG pattern is not correct" symptom. A 379px card at
   1512 still held the shape at left:83px, so instead of bleeding out of the
   corners it slid inward and sat squarely on top of the quote mark. Pinning
   the trailing overhang instead reproduces every board: the 1922 card is
   unchanged (518 - 578.5 + 143 = 83), and the 358px phone card lands the
   shape at -78px, matching its own board. inset-inline-end (not right) so
   the overhang follows the card's trailing edge into RTL, which is the side
   the Arabic board bleeds it off. */
.hr-testimonial-card::after {
    content: "";
    position: absolute;
    inset-inline-end: -143px;
    top: -162px;
    width: 578.5px;
    height: 449.432px;
    background: url("../images/home-revamp/testimonial-pattern.svg") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.hr-testimonial-card > * { position: relative; z-index: 1; }
/* Text column vs. quote-mark share the row via space-between (not absolute
   positioning) so the quote-mark can never overlap the title/description,
   at any card width or text length. */
.hr-testimonial-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; width: 100%; }
.hr-testimonial-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1 1 auto; }
.hr-testimonial-info h3 { font-size: calc(var(--hr-tc-fs) * 1.3333); font-weight: 700; line-height: 1.25; margin: 0; }
.hr-testimonial-info .hr-designation { opacity: .6; font-size: calc(var(--hr-tc-fs) * 0.8333); line-height: 1.4; margin: 0; }
.hr-testimonial-card .hr-quote-mark {
    flex: 0 0 calc(var(--hr-tc-fs) * 4.75);
    width: calc(var(--hr-tc-fs) * 4.75);
    height: calc(var(--hr-tc-fs) * 4.75);
    position: relative;
}
/* The exported asset's canvas (133px) includes its drop-shadow bleed, so it's
   centered slightly larger than the 114px layout box instead of clipped to it. */
.hr-testimonial-card .hr-quote-mark img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--hr-tc-fs) * 5.5417);
    height: calc(var(--hr-tc-fs) * 5.5417);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
/* Figma exports this divider as an SVG stroke-dasharray of "9 9" — a plain
   `border-top: dashed` renders a browser-dependent dash length, so the exact
   9px-on/9px-off rhythm is reproduced with a repeating gradient instead. */
.hr-testimonial-card hr {
    border: 0;
    height: 1px;
    margin: 0;
    background-image: repeating-linear-gradient(to right, rgba(255,255,255,.6) 0 9px, transparent 9px 18px);
}
.hr-testimonial-card p { font-size: var(--hr-tc-fs); line-height: 1.3333; margin: 0; }
/* Equal-height slides so every card reaches the band's bottom edge and gets
   clipped there, rather than each ending at its own content height. */
.hr-testimonials-track { overflow: hidden; }
.hr-testimonials-track .swiper-slide { height: auto; display: flex; }
.hr-testimonials-track .swiper-slide > * { width: 100%; }
.hr-testimonial-card { min-height: calc(var(--hr-tc-fs) * 22.5); }
/* The phone board re-specifies the card's type rather than scaling the
   desktop ratio down, so these stay explicit figures. */
@media (max-width: 991.98px) {
    .hr-testimonials { padding: 64px 16px 0; }
    .hr-testimonials-head h2 { font-size: 30px; }
    .hr-testimonial-card { padding: 40px 28px 20px; min-height: 0; gap: 36px; }
    /* BIL-742: no `::after { display: none }` here any more. The Vector 4
       accent used to be dropped outright at this width, which is why the
       phone card was flat blue where the board shows the same faint shape
       behind the header; now that it hangs off the card's trailing edge it
       crops correctly on a 358px card, so there is nothing to hide.

       The diamond does shrink: the board draws it at ~17% of the card width,
       62px against that same 358px card, so it reads as an accent beside the
       name rather than competing with it. The asset's own canvas keeps its
       133/114 shadow bleed. */
    .hr-testimonial-card .hr-quote-mark { flex-basis: 62px; width: 62px; height: 62px; }
    .hr-testimonial-card .hr-quote-mark img { width: 72px; height: 72px; }
    .hr-testimonial-info h3 { font-size: 24px; line-height: 30px; }
    .hr-testimonial-info .hr-designation { font-size: 16px; line-height: 24px; }
    .hr-testimonial-card p { font-size: 16px; line-height: 26px; }
}
/* BIL-742 / Figma phone board: the heading centres and the prev/next buttons
   move from the header's trailing edge to a centred row UNDER the slider,
   with the band closing below them — so the card ends on its own squared-off
   bottom here instead of running off the band into the cream section.

   Same approach as .abt-testimonials on the About page: rather than move the
   buttons in the blade (which would then need absolute positioning to
   rebuild the desktop header row), the head is collapsed with
   display:contents so its h2 and actions become flex children of the section
   itself, and order sequences them around the track. display:contents
   discards the head's own box, so the 56px gap it carried moves onto the h2. */
@media (max-width: 767.98px) {
    .hr-testimonials {
        display: flex;
        flex-direction: column;
        padding-bottom: 64px;
    }
    .hr-testimonials-head { display: contents; }
    .hr-testimonials-head h2 {
        order: 1;
        text-align: center;
        margin-bottom: 32px;
    }
    /* min-width:0 is load-bearing. As a flex item the track would take 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. width:100% pins it to the column instead. */
    .hr-testimonials-track {
        order: 2;
        min-width: 0;
        width: 100%;
    }
    /* margin-inline overrides the desktop rule's margin-inline-start:auto,
       which would otherwise still push this to the trailing edge. */
    .hr-testimonials-actions {
        order: 3;
        justify-content: center;
        margin: 32px auto 0;
    }
    /* 4px of the previous and next card show at the track's edges. With
       slidesPerView:'auto' + centeredSlides + loop in home-revamp.js, the
       slide takes this width and Swiper centres it: 4 + 24 + slide + 24 + 4
       fills the track, so 56px comes off the full width - the two 24px
       spaceBetween gaps plus the two 4px slivers. */
    .hr-testimonials-track .swiper-slide { width: calc(100% - 56px); }
    /* All four corners rounded on the phone board. The squared bottom is a
       desktop-only device: there the card deliberately runs off the band's
       bottom edge and is clipped by it, so there is no bottom corner to
       round. Here the band closes under the buttons (padding-bottom above),
       the card's own bottom edge is what you see, and the design rounds it
       to match the top. */
    .hr-testimonial-card { border-radius: 40px; }
}

/* ---------- Memories & Stories ---------- */
.hr-memories { background: var(--hr-cream-500); padding: 120px 160px; position: relative; }
/* Blue triangle + line + diamonds hanging from the top-left (Figma export). */
.hr-memories-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 138px;
    height: 194px;
    background-image: url("../images/home-revamp/memories-marker.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
    pointer-events: none;
}
@media (max-width: 991.98px) {
    /* The hanging marker is on the phone board too - it used to be
       display:none here. 40% of the desktop 138x194, which keeps the asset's
       own ratio (background-size:contain scales the whole triangle + line +
       diamonds into the box) and leaves the centred heading clear: the
       heading starts 87.5px in on a 375px screen, the marker ends at 56. */
    .hr-memories-marker { width: 56px; height: 79px; }
    /* The stacking rule that used to sit here moved BELOW the 32/55 base
       rules - see the note on it. */
}
/* BIL-714: Figma (1960 frame) gives the copy column 514px and the gallery
   901px, with the ~220px left over as the gutter. The old `1 1` bases split
   the row almost evenly instead, which stretched the copy column - and with
   it the dashed rule under the heading - to nearly twice the design width.
   Percentages so the ratio holds on wider screens instead of the gutter
   absorbing everything. */
.hr-memories-row { display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.hr-memories-content { flex: 0 1 32%; }
.hr-memories-content h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--hr-brown-900);
    padding-bottom: 24px;
    margin-bottom: 24px;
    /* BIL-714: Figma's stroke is Cream/cream-700, not the near-black
       brown-300 this used to draw - that is what made the rule read as a
       hard dotted line rather than a soft divider. Same token spelling as
       .evtd-programme-decor-line / .nom-* use (it has no :root entry yet,
       so the literal carries it). */
    border-bottom: 1px dashed var(--hr-cream-700, #b1afa5);
}
.hr-memories-content h2 .hr-accent { color: var(--hr-blue-500); }
.hr-memories-content h3 { font-size: 22px; font-weight: 700; color: var(--hr-brown-700); margin-bottom: 12px; }
.hr-memories-content p { font-size: 17px; color: var(--hr-brown-300); margin-bottom: 24px; }
.hr-memories-media { flex: 0 1 55%; }
/* Below 992px the 160px side padding leaves too little room to hold the 32/55
   split - stack instead of squeezing both columns.

   This has to sit AFTER the two base rules, not in the max-width:991.98px
   block further up where it was written: every one of these selectors is a
   single class, so at equal specificity the later declaration wins and the
   unqualified 32/55 pair was overriding the stack inside its own range. The
   copy column rendered 184px wide at a 900px viewport - 32% of the row - with
   the gallery wrapping under it at 688px, i.e. exactly the squeeze this rule
   exists to prevent. Same ordering trap the shared phone-board type block
   near the end of this file calls out. */
@media (max-width: 991.98px) {
    .hr-memories-content,
    .hr-memories-media { flex: 1 1 100%; }
    /* A full-width basis alone doesn't fit the gallery: the filmstrip's fixed
       496px window plus its two 44px arrows and their 40px gaps set a
       min-content floor of ~664px, and a flex item's default min-width:auto
       refuses to go below it - so the gallery drew 688px against a 574px row
       at 900px and spilled into the section's side padding. min-width:0 lets
       the column obey the row, and the track needs the same release or it
       just moves the overflow one level in (it already carries
       max-width:100%). The phone block below repeats these for its own range,
       where the arrows shrink as well. */
    .hr-memories-media { max-width: 100%; min-width: 0; }
    .hr-memories-filmstrip { max-width: 100%; }
    .hr-memories-filmstrip .hr-film-track { min-width: 0; }
}
/* Image-only gallery (no video player): large frame + thumbnail strip. */
.hr-memories-stage {
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 16px 30px rgba(0,0,0,.13);
    background: var(--hr-cream-400);
}
.hr-memories-stage img {
    width: 100%;
    /* Figma: 901x514. A ratio rather than a fixed height so the frame keeps
       its proportions as the column scales. */
    aspect-ratio: 7 / 4;
    height: auto;
    display: block;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform .4s ease;
}
.hr-memories-stage img:hover { transform: scale(1.02); }
.hr-memories-filmstrip { display: flex; align-items: center; justify-content: center; gap: 40px; margin-top: 44px; }
/* Figma: thumbnails sit flush (no gaps, no radius); inactive are 62x80 and
   dimmed, the active one widens to exactly double that (124x80) at full
   brightness. Measured off the Figma frame at 1:1 - its 7-thumb strip is
   493px wide, which is 6*62 + 124. */
.hr-memories-filmstrip .hr-film-track {
    display: flex;
    gap: 0;
    /* BIL-714: the strip is a fixed window at Figma's width rather than being
       sized by its contents, so the strip - and the two arrows either side of
       it - hold the design's geometry whatever number of images a summit
       happens to carry. A content-sized track drew 310px against the design's
       493px here, purely because this summit has four images where the mock
       has seven. max-width keeps it inside narrow screens. */
    width: 496px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.hr-memories-filmstrip .hr-film-track::-webkit-scrollbar { display: none; }
.hr-memories-filmstrip .hr-film-thumb {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: hidden;
    line-height: 0;
    cursor: pointer;
    /* The thumbs divide that fixed track between them, the active one taking
       a double share: at the mock's seven images this lands exactly on Figma's
       62px and 124px, and with fewer they stretch to keep the strip full.
       The min-widths are those same Figma sizes, so a summit carrying more
       images than the mock scrolls the track rather than shaving every thumb
       down to a sliver. */
    flex: 1 1 0;
    min-width: 62px;
    height: 80px;
    filter: brightness(.45);
    /* flex-grow, not width - the sizing comes from the flex share now. */
    transition: flex-grow .35s ease, filter .35s ease;
}
.hr-memories-filmstrip .hr-film-thumb:hover { filter: brightness(.7); }
.hr-memories-filmstrip .hr-film-thumb.is-active {
    flex-grow: 2;
    min-width: 124px;
    filter: none;
}
.hr-memories-filmstrip .hr-film-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-memories-filmstrip .hr-icon-btn {
    background: rgba(225,255,255,0.20);
    border-color: rgba(27,25,12,.08);
    box-shadow: 0 4px 14px rgba(27,25,12,.06);
}
/* The exported arrow SVGs carry baked-in strokes from their Figma context —
   left is near-black, right is near-white. Normalise both to dark here so the
   right arrow isn't invisible on these white buttons. */
.hr-memories-filmstrip .hr-icon-btn img { filter: brightness(0); }
/* The section already carries Figma's 120px bottom padding, so the divider's
   shared 64px margin-top would double-count the gap. Scoped to this instance
   - the one after .hr-gathering still needs its own spacing. */
.hr-memories + .hr-diamond-border { margin-top: 0; }
/* Lightbox */
.hr-lightbox { background: transparent; border: 0; position: relative; }
.hr-lightbox img { width: 100%; border-radius: 20px; display: block; }
.hr-lightbox-close { position: absolute; top: -18px; inset-inline-end: -10px; z-index: 2; }
@media (max-width: 767.98px) {
    .hr-memories { padding: 48px 16px; }
    /* Keep the gallery inside the viewport: the flex-basis of 480px on the media
       column forced it wider than a phone screen. */
    .hr-memories-media { flex: 1 1 100%; max-width: 100%; min-width: 0; }
    .hr-memories-content { flex: 1 1 100%; min-width: 0;text-align: center; }
    /* The dashed rule runs the full column width while the heading keeps its
       narrow centred measure, so it can't stay on the h2's border-bottom -
       that ends where the 200px heading does. It moves to the h3's border-top
       instead: the h3 IS a full-width row item, so the rule spans the column
       with no positioning tricks, and 24px either side of it preserves the
       heading / rule / subhead rhythm the h2's own padding+margin gave it. */
    .hr-memories-content h2 { border-bottom: 0; padding-bottom: 0; }
    .hr-memories-content h3 {
        border-top: 1px dashed var(--hr-cream-700, #b1afa5);
        padding-top: 24px;
    }

    .hr-memories-row { flex-direction: column; align-items: stretch; gap: 0; }
    .hr-memories-content { display: contents; }
    .hr-memories-content > * { order: 1; }
    .hr-memories-media { order: 2; margin-block: 24px; }
    /* No align-self: the column's stretch takes the pill to the full width
       (a flex item's inline-flex display is blockified), and .hr-btn's own
       justify-content:center keeps the label centred in it - the same
       full-width treatment as the Partners "View All". */
    .hr-memories-content > .hr-btn { order: 3; margin-top: 24px; }
    .hr-memories-stage img { height: 220px; }
    .hr-memories-filmstrip { max-width: 100%; gap: 8px; }
    .hr-memories-filmstrip .hr-film-track { min-width: 0; }
    .hr-memories-filmstrip .hr-icon-btn { width: 44px; height: 44px; flex-shrink: 0; }
    .hr-memories-filmstrip .hr-icon-btn img { width: 18px; height: 18px; }
}

/* ---------- Voices stats ---------- */
.hr-voices { background: var(--hr-cream-500); padding: 80px 160px; }
.hr-voices-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.hr-voices-head h2 { font-size: 40px; font-weight: 700; color: var(--hr-brown-900); margin-bottom: 10px; }
.hr-voices-head h2 .hr-accent { color: var(--hr-yellow-500); }
.hr-voices-head p { font-size: 18px; color: var(--hr-brown-300); max-width: 900px; margin: 0; }
/* Figma places the four panels edge to edge (400px each, no gutter). */
.hr-voices-grid { display: flex; gap: 0; flex-wrap: wrap; }
/* Values below are taken verbatim from the Figma node spec (40000190:48336):
   1px #33739f border, 40px radius, 32px backdrop blur, a blue wash fading to
   transparent at 61.5%, and a tight 4px shadow. */
.hr-voices-grid .hr-voice-stat {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    text-align: center;
    padding: 40px 24px;
    border-radius: 40px;
    /* Figma's node spec lists `border: 1px solid #33739f`, but the design's own
       render shows no stroke — the card edge is defined purely by the gradient
       fading into the cream. A literal 1px line reads far heavier, so no border.
       Gradient values are verbatim from the spec. */
    border: 0;
    background: linear-gradient(180deg, rgba(84,138,175,.18) 0%, rgba(51,115,159,0) 61.523%);
    box-shadow: 0 4px 16px rgba(27,25,12,-0.96);
}
/* Figma gives the row a heartbeat rhythm: the panels alternate up/down AND
   dark/light, so the run of cards reads as a zig-zag rather than a flat strip.
   Odd panels sit high and carry the full-strength wash; even panels drop and
   fade back. */
.hr-voices-grid .hr-voice-stat:nth-child(even) {
    margin-top: 34px;
    /* 0deg = wash anchored to the BOTTOM edge. The odd panels shade from the
       top, so the shading zig-zags down the row along with the offsets. */
    background: linear-gradient(0deg, rgba(84,138,175,.18) 0%, rgba(51,115,159,0) 61.523%);
}
/* Scoped to direct children so the counter/plus spans inside <strong> keep the
   large stat size instead of picking up the small label size. */
.hr-voices-grid .hr-voice-stat > span { display: block; font-size: 24px; font-weight: 700; line-height: 16px; color: var(--hr-brown-300); margin: 0; }
/* Figma spec (node 40001286:67925, Statistics/Stat XLarge/ExtraBold) sets
   line-height to 100px, not 1 (80px) — the tighter box was clipping the
   glyph's descender against the card edge on mobile. */
.hr-voices-grid .hr-voice-stat strong {
    /* Figma wraps the digits and the "+" in a `flex items-center` row (node
       40001286:67929). Reproducing that row is what makes the "+" placement
       below predictable now that it is a smaller type size than the digits:
       centring the two boxes gives it a fixed starting point to be offset
       from, where inline baseline alignment would tie it to font metrics. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    font-weight: 800;
    line-height: 100px;
    color: var(--hr-blue-400);
}
.hr-voices-grid .hr-voice-stat strong .hr-counter { font-size: inherit; line-height: inherit; }
/* The "+" does not share the number's type style: Figma gives it
   Headings/H1/Bold (node 40001286:67933) at 64px/72px weight 700, against the
   number's 80px/100px ExtraBold. Held in em so the ratio carries through the
   mobile font-size step-downs below without a value per breakpoint. */
.hr-voices-grid .hr-voice-stat strong .hr-plus {
    font-size: .8em;
    font-weight: 700;
    line-height: 1.125;
    /* The "+" rides high against the digits rather than sitting on their
       baseline. In Figma that comes out of the text box being shorter than the
       line it holds (38.266px box, 72px line-height, bottom-aligned), which
       lifts the glyph by half the difference: (72 - 38.266) / 2 = 16.87px, or
       .264em of the "+"'s own 64px. Kept in em so it tracks the font-size. */
    transform: translateY(-.264em);
    color: var(--hr-yellow-500);
}
@media (max-width: 991.98px) {
    .hr-voices { padding: 48px 16px; }
    .hr-voices-head h2 { font-size: 30px; }
    .hr-voices-grid .hr-voice-stat { padding: 28px 16px; gap: 24px; }
    .hr-voices-grid .hr-voice-stat > span { font-size: 18px; }
    .hr-voices-grid .hr-voice-stat strong { font-size: 44px; }
    /* Stagger would just look like broken alignment once the row wraps. */
    .hr-voices-grid .hr-voice-stat:nth-child(even) { margin-top: 0; }
}
@media (max-width: 767.98px) {
    /* BIL-758: mobile rebuilt against Figma node 40003003:109018, applying the
       same corrections already made to the about/gathering page's
       .smt-stats-grid (summit-revamp.css). This supersedes the earlier
       "keep the exact desktop card look on phones" pass — the design steps the
       padding and type DOWN on mobile rather than holding desktop's 80px
       numbers, and runs the cards edge to edge instead of gapped. */
    .hr-voices { padding: 60px 20px; }

    /* The head stacks and centres here, where desktop runs the copy and the CTA
       as a space-between row. Figma centres the h2, the paragraph and the button
       on the 402px artboard (node 40003003:109019): 24px between the text block
       and the button, 16px inside it. */
    .hr-voices-head {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        text-align: center;
        margin-bottom: 32px;
    }
    /* The blade wraps the h2 + paragraph in a bare <div>; making it a column
       lets the 16px gap own that spacing instead of the h2's own margin. */
    .hr-voices-head > div { display: flex; flex-direction: column; gap: 16px; }
    /* Type comes from the shared phone-board heading rule below. */
    .hr-voices-head h2 { margin-bottom: 0; }
    /* Body/Body XSmall/Regular. */
    .hr-voices-head p { font-size: 16px; line-height: 24px; }

    /* Figma stacks the four cards at y 0/194/388/582, each exactly 194 tall —
       so they are contiguous. What reads as space between them is each card's
       own wash fading out at 61.5%, leaving its lower third transparent against
       the cream; it is not a gap, and adding one double-counts it. Same
       reasoning as .smt-stats-grid on the about page. */
    .hr-voices-grid { flex-wrap: wrap; gap: 0; }
    /* 194px = 48px padding x2 + 28px label + 24px gap + 46px number. Setting the
       padding/gap rather than a fixed height keeps it correct if a label wraps
       to two lines on a narrow phone — so no min-height here. */
    .hr-voices-grid .hr-voice-stat {
        flex: 1 1 100%;
        padding: 48px 32px;
        gap: 24px;
    }
    .hr-voices-grid .hr-voice-stat > span { font-size: 18px; line-height: 28px; }
    /* 46px line box, not the font's own ~56px: Figma draws these digits in a
       46px-tall frame at 56.62px, and that difference per card is what would put
       the card over the artboard's 194px. Digits have no descender, so the
       tighter box clips nothing. The "+" takes its .8em off this size. */
    .hr-voices-grid .hr-voice-stat strong { font-size: 56px; line-height: 46px; }
    /* Pin the "+" to the same 46px box as the digits. <strong> is an
       inline-flex row, so its height is the TALLEST child: the plus's own
       1.125 ratio (44.8px x 1.125 = 50.4px) was outgrowing the 46px number
       box and pushing every card to 198px against the artboard's 194px.
       Desktop is unaffected - there the number's 100px box already wins.
       The lift desktop puts on the "+" is dropped with it: mobile draws the
       "+" as an outlined vector sitting dead centre of the 46px row (node
       40003003:109031, y 9.112 + 27.776 tall = centre 23 of 46), not raised
       the way the desktop text node is. */
    .hr-voices-grid .hr-voice-stat strong .hr-plus { line-height: 46px; transform: none; }
    /* Stacked in one column, so desktop's zig-zag has nothing to zig-zag
       against — drop both halves of it: the 34px stagger AND the flipped,
       bottom-anchored wash. Figma gives all four cards the same top-anchored
       gradient here. */
    .hr-voices-grid .hr-voice-stat:nth-child(even) {
        margin-top: 0;
        background: linear-gradient(180deg, rgba(84,138,175,.18) 0%, rgba(51,115,159,0) 61.523%);
    }
}

/* ---------- Reveal-on-scroll (shared) ---------- */
.home-revamp .hr-reveal { opacity: 0; }
.home-revamp .hr-reveal.animate__animated { opacity: 1; }
/* Parity with .summit-revamp .hr-reveal, which already had this: with Reduce
   Motion on there is no fade to wait for, so the content should not depend on
   the observer running at all. */
@media (prefers-reduced-motion: reduce) {
    .home-revamp .hr-reveal { opacity: 1; }
}

/* ---------- Phone board: section type ----------
 * Section headings are Headings/H6/Bold - 24/32 - on the phone board, against
 * desktop sizes that range from 32px (countdown) to 48px (gathering); the
 * standfirst under them is Body/Body XSmall/Regular, 16/24, against 17-24px.
 * Two rules rather than a per-section override each, so the boards can't
 * drift apart; the tablet steps in the max-width:991.98px blocks above (the
 * 30px testimonials/voices headings) are deliberately left alone. Placed
 * after every section block because these all sit at the same specificity,
 * so order is what decides. */
@media (max-width: 767.98px) {
    .hr-countdown-title h2,
    .hr-gathering-content h2,
    .hr-memories-content h2,
    .hr-voices-head h2,
    .hr-testimonials-head h2,
    .hr-partners-head h2 { font-size: 24px; line-height: 32px; }
    /* .hr-gathering-desc is CMS rich text, so the size has to reach the <p>
       tags the editor emits as well as the wrapper itself. */
    .hr-gathering-desc,
    .hr-gathering-desc p,
    .hr-partners-head p,
    .hr-memories-content p { font-size: 16px; line-height: 24px; }
    /* Headings centre in a 200px measure. margin-inline (not margin) so the
       sections' own margin-bottom survives, and it also clears the
       margin-inline-start each of these carries on wider boards.
       Two headings are deliberately out of this list:
       - .hr-countdown-title h2 shares a flex row with the Register pill at
         the row's trailing edge, and an auto inline margin there pulls "Hurry
         Up!" off the leading edge (200px of heading plus the 148px pill also
         exceeds the card's 295px of content width, so the row would break).
       - .hr-gathering-content h2 gets the full column measure to wrap across,
         centred by the gathering block above. */
    .hr-memories-content h2,
    .hr-voices-head h2,
    .hr-testimonials-head h2,
    .hr-partners-head h2 {
        max-width: 200px;
        margin-inline: auto;
        text-align: center;
    }
}

/* ---------- Watch story modal ---------- */
#watchStoryModal .modal-content { background: #000; border-radius: 20px; overflow: hidden; }
#watchStoryModal video { width: 100%; display: block; }

/* ==========================================================================
   RTL (Arabic)
   The decorative layers above are positioned with physical left/right values
   and directional background images, so they don't mirror on their own. These
   rules flip them and stop the artwork colliding with the text.
   ========================================================================== */
[dir="rtl"] .hr-hero { text-align: right; }

/* --- Countdown: orange motif moves to the left edge, padding mirrors ---
   Desktop only. `[dir="rtl"] .hr-countdown` (0,2,0) outranks the mobile
   `.hr-countdown` rule (0,1,0), so leaving this unscoped kept the 190px motif
   reserve on phones — that left just ~108px of content width and forced the
   timer boxes to stack, making Arabic mobile look nothing like English. */
@media (min-width: 992px) {
    /* Mirrors the LTR 60px/172px/60px/60px exactly (Figma node 40001286:67732
       is a 1600x260 card with a 1368x140 content frame at 60,60). This used to
       carry 40px/190px, left over from before the LTR side was corrected, so
       the Arabic card rendered 220px tall against English's 260px. */
    [dir="rtl"] .hr-countdown { padding: 60px 60px 60px 172px; }
}
[dir="rtl"] .hr-countdown::after { transform: scaleX(-1); }

/* --- Gathering: the whole photo composition (backdrop, bracket, figures,
   badge) stays exactly as in LTR for Arabic - same image, same direction.
   Every layer is positioned with physical left/top percentages of the
   694x554 frame, which never swap for dir="rtl" on their own, so no
   override is needed to keep them in place. Fixed-pixel overrides used to
   exist here and fought the base rule's percentages at every viewport but
   the one they were tuned against (BIL-564 follow-up on the badge below
   applies equally to the rest of this composition). */
/* Badge stays on the same side as LTR in Arabic — mirroring it put the play
   button over the subject's head instead of clear of it. `left`/`right` are
   physical properties (unlike `inset-inline-*`), so they never swap for
   `dir="rtl"` on their own — no override is needed to keep it in place; a
   previous fixed-pixel override actually broke this by fighting the base
   rule's percentage positioning at every viewport but the one it was tuned
   against, pushing the badge to the wrong spot (BIL-564 follow-up). */
/* Keep "25+" reading as number-then-plus rather than bidi reordering it. */
[dir="rtl"] .hr-stats-sidebar .hr-stat strong,
[dir="rtl"] .hr-voices-grid .hr-voice-stat strong {
    direction: ltr;
    unicode-bidi: isolate;
    /* The "+" leads the figure in Arabic - "+15", not "15+".

       direction:ltr above is what kept it on the right: it is here to hold the
       DIGITS in logical order (and the isolate to stop the number being reordered
       against the Arabic label beside it), but it also fixes the flex main axis
       left-to-right, so the two boxes laid out counter-then-plus. row-reverse
       flips just that pair, which is all that needs to move - the digits stay
       inside .hr-counter as their own LTR run and are untouched. */
    flex-direction: row-reverse;
}
/* `display` is set per section rather than shared: the voices stat is an
   inline-flex row (see above) and a blanket inline-block here would undo the
   centring of its "+". */
[dir="rtl"] .hr-stats-sidebar .hr-stat strong { display: inline-block; }
/* The diamonds are absolutely positioned (left:-57px), not flex items, so no
   amount of flex-direction moves them — mirror their offset and the vertical
   line they thread through. */
[dir="rtl"] .hr-stats-sidebar .hr-stat { text-align: right; }
[dir="rtl"] .hr-stats-sidebar .hr-stat .hr-diamond { left: auto; right: -57px; }
[dir="rtl"] .hr-stats-sidebar .hr-stat:not(:last-child)::after { left: auto; right: -50px; }

/* --- Partners: teal corner motif mirrors to the right ---
   Must restate scaleY(-1) from the base rule: `transform` is a single property,
   so declaring scaleX(-1) alone silently dropped the vertical flip and the
   motif rendered upside-down at full size over the logos. */
[dir="rtl"] .hr-partners-motif {
    left: auto;
    right: -117px;
    transform: scale(-1, -1);
}
/* The mirrored offset is the desktop figure, so it needs the scaled one for
   the smaller motif below 992px - otherwise the Arabic side hangs 117px of a
   145px-wide shape off the corner and only a sliver shows. */
@media (max-width: 991.98px) {
    [dir="rtl"] .hr-partners-motif { right: -30px; }
}

/* --- Memories: hanging marker mirrors --- */
[dir="rtl"] .hr-memories-marker { left: auto; right: 0; transform: scaleX(-1); }

@media (max-width: 767.98px) {
    /* No align-items override here. In a COLUMN flex container the cross axis
       runs horizontally, and under direction:rtl `flex-end` resolves to the
       LEFT — so forcing flex-end pushed the title and Register button to the
       left in Arabic. The base rule's `flex-start` already means right in RTL,
       which is what we want. */
    [dir="rtl"] .hr-countdown-venue { text-align: right; }
    /* The stats column centres on the phone board (see the gathering block
       above). Restated for Arabic because the unscoped
       `[dir="rtl"] .hr-stats-sidebar .hr-stat { text-align: right }` rule
       further up this section sits LATER in the file than that block, so it
       would otherwise win on order at equal specificity. */
    [dir="rtl"] .hr-stats-sidebar .hr-stat { text-align: center; }
}

/* ---------- "Join BilAraby" popup (Figma node 40002531:25453) ----------
   A photo-backed card, not the flat panel the pre-revamp popup used: the
   artboard fills the whole 30px-radius box with a stage photo, lays a blurred
   dark gradient over its lower half so the copy stays legible, and stacks the
   heading, the line of body copy, the CTA and a row of diamonds up the middle.

   Scoped under .home-revamp because that is where the markup sits, which is
   also what lets the CTA reuse .hr-btn-primary verbatim - see the note in
   join-popup.blade.php. */
.home-revamp .hr-join-modal .modal-dialog { max-width: 735px; }
.home-revamp .hr-join-modal .modal-content {
    position: relative;
    /* 30px and overflow:hidden together: the photo, the gradient and the
       diamond row all run to the box's edge and must be clipped by the same
       curve. */
    border-radius: 30px;
    overflow: hidden;
    border: 0;
    padding: 40px;
    /* The artboard's own 735x633. Held as a min-height so the percentage-sized
       layers below keep their proportions, while a longer translation can still
       grow the card. */
    min-height: 633px;
    display: flex;
    flex-direction: column;
    /* justify-end, per the artboard - the content sits on the lower half of the
       photo rather than centred in the box. */
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    /* Cream only. The photo is its own layer (.hr-join-media) because it does
       not fill the card - see the note in the partial. */
    background: var(--hr-cream-100, #fdfdf8);
}
/* Figma node 40002531:25454: 759x506 at (-12, 0) on a 735x633 card. Expressed
   as percentages of the card so the crop survives the responsive widths -
   103.27% wide starting -1.63% out, and only 79.94% tall, which is what leaves
   the lower fifth to the cream and the blur band. */
.home-revamp .hr-join-media {
    position: absolute;
    top: 0;
    left: -1.63%;
    width: 103.27%;
    height: 79.94%;
    background: url("../images/home-revamp/join-popup-bg.webp") center / cover no-repeat;
    pointer-events: none;
}
/* Figma node 40002531:25455, the blurred band that makes the copy legible.
   1115.086x362.099 at left -190.04 / bottom -30.27 on the 735x633 card, i.e.
   half again as wide as the card and hanging off its foot - so the sides and
   the bottom are clipped away and only the top edge is ever seen.

   It both DARKENS and BLURS: a transparent-to-black-50% ramp over a 54.9px
   backdrop blur. The blur is the half that matters - a gradient alone left the
   48px heading sitting on the bright shapes in the photo and barely readable.

   Figma also puts a 65.05px layer blur on the group, which softens where the
   band begins. That is reproduced with a mask rather than `filter: blur()`,
   because a filter on this element would blur its own backdrop-filter result
   too and fight it. */
.home-revamp .hr-join-scrim {
    position: absolute;
    left: -25.86%;
    width: 151.71%;
    height: 57.20%;
    bottom: -4.78%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 100%);
    -webkit-backdrop-filter: blur(54.9px);
    backdrop-filter: blur(54.9px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
    pointer-events: none;
}
.home-revamp .hr-join-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 40px between the copy block and the CTA, 24px inside the copy block. */
    gap: 40px;
    width: 100%;
}
/* Headings/H3/Bold - 48/56. #f8f6e6 rather than a cream token: the artboard
   uses this one value here and it is not in the palette. */
.home-revamp .hr-join-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 24px inside the copy block, against the column's own 40px. */
    gap: 24px;
    width: 100%;
}
.home-revamp .hr-join-title {
    margin: 0;
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
    color: #f8f6e6;
    text-align: center;
}
.home-revamp .hr-join-title .hr-accent { color: var(--hr-yellow-400); }
/* Body/Body Small/Regular - 18/28 - at the artboard's own .8 opacity, capped so
   it breaks onto two lines the way the design does rather than running the full
   width of the card. */
.home-revamp .hr-join-text {
    margin: 0;
    max-width: 507px;
    font-size: 18px;
    line-height: 28px;
    color: var(--hr-cream-200, #fcfbf5);
    opacity: .8;
    text-align: center;
}
/* Only the things .hr-btn-primary does not already carry. Everything that makes
   the button glass - the outset rim, the inset highlight, the ambient stack -
   comes from that shared rule. */
.home-revamp .hr-join-cta { align-self: center; }
/* The diamond row that closes the card, bled to the full width of the box past
   its 40px padding so it meets both edges as it does in the artboard. */
/* The rule closes the content column and is its LAST child, so the card's own
   40px bottom padding stays underneath it - the artboard leaves that space and
   pulling the rule onto the card's edge (which an earlier pass did with a
   negative bottom margin) closed it up. Horizontally it does bleed: Figma draws
   the graphic 753.41 wide inside a 647 box, so it runs past the 40px padding on
   both sides and meets the card's edges. */
.home-revamp .hr-join-diamonds {
    position: relative;
    z-index: 1;
    display: block;
    width: calc(100% + 80px);
    max-width: none;
    margin: 0 -40px;
    pointer-events: none;
}
/* The artwork is directional: two diamonds at the start of a rule that runs the
   rest of the way. Flipped in Arabic so the diamonds sit at the reading start
   there too - same scaleX(-1) treatment the other directional decor on this
   page gets (.hr-hero-divider-top, .hr-icon-flip-rtl). Mirroring the whole
   image rather than swapping the asset keeps the diamond-to-line join exact. */
[dir="rtl"] .home-revamp .hr-join-diamonds { transform: scaleX(-1); }
/* Glass circle, the artboard's own (node 40002531:25470): a .2 white fill under
   a white rim, with the same inset highlight the other glass controls carry. */
.home-revamp .hr-join-close {
    position: absolute;
    top: 32px;
    inset-inline-end: 32px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 48, up from 40. Padding follows it so the box stays exactly
       padding + icon + padding (14 + 20 + 14), the way it did at 40 (12 + 16 +
       12). 48 is also the size the card play/like circles take, and it clears
       the 44px minimum touch target the 40px box was under. */
    width: 48px;
    height: 48px;
    padding: 14px;
    border-radius: 50%;
    /* Transparent, so layout-revamp.css's shared masked rim (the ::after this
       button is now in) lands exactly on this band - that rule is inset:-1.5px
       against the padding box, which is where a 1.5px transparent border sits.
       Was a flat .924px solid #fff. */
    border: 1.5px solid transparent;
    background: rgba(255, 255, 255, .2);
    cursor: pointer;
    /* For the shared bottom bloom (BIL-539) in layout-revamp.css: that glow is a
       ::before at z-index:-1 blended plus-lighter, and it needs a stacking
       context on the button to composite against the button's own fill rather
       than the photo behind it. `isolation` is set here rather than joining the
       shared position:relative list, which would undo the corner placement
       above - the same exception the play circles take. */
    isolation: isolate;
    box-shadow:
        inset 0 2.463px 3.756px rgba(255, 255, 255, .23),
        1.231px 14.161px 8.62px rgba(0, 0, 0, .02),
        0.616px 6.157px 6.157px rgba(0, 0, 0, .03),
        0 1.847px 3.694px rgba(0, 0, 0, .03);
    transition: background-color .2s ease, transform .2s ease;
}
.home-revamp .hr-join-close:hover { background: rgba(255, 255, 255, .35); }
.home-revamp .hr-join-close img { width: 20px; height: 20px; display: block; }

@media (max-width: 767.98px) {
    .home-revamp .hr-join-modal .modal-dialog { max-width: none; margin: 16px; }
    .home-revamp .hr-join-modal .modal-content { padding: 24px; min-height: 420px; border-radius: 24px; }
    .home-revamp .hr-join-copy { gap: 16px; }
    .home-revamp .hr-join-title { font-size: 32px; line-height: 40px; }
    .home-revamp .hr-join-text { font-size: 16px; line-height: 24px; }
    .home-revamp .hr-join-body { gap: 28px; }
    .home-revamp .hr-join-diamonds { width: calc(100% + 48px); margin: 0 -24px; }
    .home-revamp .hr-join-close { top: 16px; inset-inline-end: 16px; }
}