/* ============================================================
   Shared eyebrow label, then THE HERO.

   The .bcfc-page-hero skin that used to sit here is GONE as of 2026-08-19. It was the
   second inner-page hero treatment on the site: _PageHero emitted it for its 11-element
   tuple callers (14 pages - Apply, Vision & Mission, CSR, Branches, Fees, IR Policy and
   Shareholders, Support detail, Profile listing, the forms) while every other caller got
   .bcfc-hero below. Two skins meant two type scales, two scrims and two button treatments
   for the same box, which is the thing the unification exists to end - so the tuple path
   now emits .bcfc-hero too and those pages default to its `compact` height.

   .bcfc-eyebrow survives the removal because it is NOT hero-only: ProfileListing,
   VisionMission, _InvestorLandingStitch and _IRBahrainBourse all use it for section heads.
   The hero has its own .bcfc-hero__eyebrow, which carries the comp's treatment.
   ============================================================ */
/* .bcfc-eyebrow now lives in scss/components/_eyebrow.scss (compiled into style.css / style-ar.css). */


/* ============================================================================
   THE UNIFIED HERO  —  .bcfc-hero
   ============================================================================
   The ONE skin Views/Partials/Shared/_PageHero.cshtml emits, for every caller and every
   model shape - node, hero block, dictionary, or the legacy 11-element tuple.

   It lives in this file rather than a new one on purpose: bcfc-page-hero.css is
   already listed in BOTH the bundle-main and bundle-main-rtl lists in Program.cs, and
   adding a stylesheet means editing Program.cs — which is C#, and needs a
   stop-rebuild-restart. This is the shared-hero stylesheet; the shared hero belongs in
   it.

   THE DESIGN IS THE ABOUT PAGE'S, as of 2026-08-19. Every value below that used to be an
   invention of this file — the scrim ramp, the accent, the type scale, the kicker rule,
   the backdrop focal point, the block padding — is now the one from
   docs/design-source/misc/about-us-2026-08-18-final.html, which is the approved comp and
   the look the site standardised on. .bcfc-abt__hero* in AboutRevamp.css and the
   per-section hero partials it stood alongside are retired; this is the only inner-page
   header treatment on the site.

   FOUR VARIANTS, set by heroVariant on bcfcHeroDesignComposition2:
     --banner   full-bleed photograph, copy in a start-aligned column   (the default)
     --split    copy on one side, artwork / device / card stage on the other
     --centred  copy centred in the band, for landing pages
     --minimal  no photograph, a tight title band for utility pages

   TONE is --dark (default) or --light. HEIGHT is --h-compact|standard|tall|full, and it
   is the ONE knob that answers "how big is this hero" — see the block below it.
   ============================================================================ */
.bcfc-hero {
    /* ---- inks ------------------------------------------------------------------
       Local tokens, so a page retints the whole band by setting one of these on
       .bcfc-hero instead of overriding a dozen rules. The three white alphas are the
       comp's --abt-on-navy / --abt-on-navy-dim; --hero-accent is its
       --abt-on-navy-accent, a pale blue rather than the site's yellow --bcfc-accent,
       because the accent here sits on navy and has to stay legible on a photograph. */
    --hero-ink: #fff;
    --hero-ink-muted: rgba(255, 255, 255, .82);
    --hero-ink-dim: rgba(255, 255, 255, .62);
    --hero-accent: #8fbff0;
    --hero-surface: var(--bcfc-primary-dark, #00346a);

    /* The scrim's own colour, SEPARATE from --hero-surface. The comp lifts the scrim off
       the near-black navy the band is painted in onto a lighter, bluer one, so the
       photograph still reads through the fade — two different colours doing two different
       jobs, which is why this is not just var(--hero-surface). heroSurfaceColour from the
       backoffice sets both, so an editor retinting a hero still gets a matching scrim
       without having to know this distinction exists. */
    --hero-scrim: #0a3a73;

    /* ---- measure ---------------------------------------------------------------
       900px / 560px, widened from the comp's 640px/560px on 2026-09-01: a long
       headline (a full sentence, not a short title) wrapped to 7 lines at 640px and
       read as a paragraph rather than a title. px rather than ch on purpose: the
       headline and the lead are set at different sizes, so a ch measure would give them
       different physical widths and the block would not read as one column.
       heroTextMaxWidth overrides the first. */
    --hero-copy-width: 900px;
    --hero-lead-width: 560px;

    /* ---- the type scale, and why it is tokens ----------------------------------
       These step with the HEIGHT class below. A single fixed scale cannot serve one
       partial that draws both a flagship landing band and a 300px utility header: the
       comp's 92px headline overflows a compact band, and the old 52px cap made a
       full-height hero look empty. So "how much size" moves the band AND its type
       together, which is what the choice actually means to whoever picks it.
       Standard's cap dropped 64px -> 48px on 2026-09-01 alongside the width widening
       above — at 64px an unusually long headline wrapped tall enough to dominate the
       band even at the wider measure. */
    --hero-title-size: clamp(32px, 4.4vw, 48px);
    --hero-title-mt: 20px;
    --hero-lead-size: clamp(17px, 1.5vw, 19px);
    --hero-lead-lh: 1.6;
    --hero-support-size: 16px;

    --hero-min-h: 460px;
    /* Asymmetric, per the comp: a tight 44px above the copy because the site header's
       height is already reserved below, and a generous end padding so the CTA row does
       not sit flush on the band's bottom edge (measured 0px before this, ~98px in the
       comp). clamp() rather than a flat 96px so the band does not eat a phone viewport. */
    /* 24px, not the comp's 44px. The comp measured this gap from the top of the band to its COPY,
       but the band now opens with the breadcrumb trail, so 44px pushed the trail well clear of the
       header and the copy further still. The trail's own padding is zeroed inside the hero
       (bcfc-inline-partials.css) for the same reason — the two used to stack. */
    --hero-pad-start: 24px;
    --hero-pad-end: clamp(48px, 6vw, 96px);

    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--hero-min-h);
    overflow: hidden;
    background: var(--hero-surface);
    color: var(--hero-ink);

    /* Full-bleed out of the page's centred column. margin-inline, not margin-left, so
       it behaves the same in Arabic. */
    /* Minus the scrollbar: 100vw counts a classic one, which put the band half a scrollbar
       off-centre (L-7 / R1359 at 1366px). --bcfc-scrollbar-w is set in _RootLayout.cshtml. */
    width: calc(100vw - var(--bcfc-scrollbar-w, 0px));
    margin-inline: calc(50% - 50vw + var(--bcfc-scrollbar-w, 0px) / 2);

    /* The hero is the page header, and _HeroChrome stands the global breadcrumb banner
       down — but that banner was also what pushed content clear of the position:fixed
       site header. Without this the trail lands underneath it (measured at y=49 under a
       104px header on Sahel). The fallback is load-bearing:
       --bcfc-total-header-height reaches the page only via bundle-critical.css, and an
       unresolvable var() inside a calc() invalidates the whole declaration. */
    /* HEADER CLEARANCE IS A MARGIN, NOT PADDING, AS OF 2026-08-23 — changed on request:
       "Template must start after the nav bar."

       It used to be `padding-block-start: max(72px, var(--bcfc-total-header-height, 104px))`. That
       reserved the nav's strip INSIDE the band, so the hero's painted surface still began at y=0 and
       ran underneath the position:fixed glass nav — the nav floated on the hero artwork. Measured on
       /en/about-bcfc/ before this change: .bcfc-hero top=0, height=651, padding-top=104px, painted
       rgb(0,52,106), i.e. 104px of navy sitting behind the header.

       As a margin the reserved strip sits OUTSIDE the band, so the hero now BEGINS below the nav and
       the nav renders against the page background instead of over the artwork. Copy lands in exactly
       the same place relative to the band; the page simply gets that strip back as real flow, so
       everything below shifts down by the header height.

       THE SIZE RULE IS UNCHANGED AND STILL LOAD-BEARING. Never let it reach 0: the nav is
       position:fixed, so this is the only thing keeping the hero out from under it, and every
       "the hero is under the navigation" report traces back to this one declaration being defeated.
       max() holds a hard 72px floor (the mobile header height) in case the variable resolves smaller
       than the real header, and the fallback inside --bcfc-total-header-height stops the calc going
       invalid — that variable reaches the page only via bundle-critical.css, and an unresolvable
       var() inside a calc() kills the whole declaration.

       If a design ever genuinely needs artwork to reach the top edge again, this is the one line to
       revisit — put it back as padding rather than zeroing it. */
    margin-block-start: max(72px, var(--bcfc-total-header-height, 104px));
}

/* AND THE OTHER HALF OF THAT CHANGE: nothing else may reserve the header's height as well.

   Now that the clearance is a margin OUTSIDE the band, any body padding-top stacks with it
   instead of being absorbed by it. bcfc-inline-partials.css sets `body { padding-top:
   var(--bcfc-total-header-height) }` and zeroes it again for `.bcfc-page-has-breadcrumb`, which
   is most pages — but a page that draws a hero and gets NO breadcrumb class kept the padding and
   the hero then started at 2x the header height, with a strip of dead page background above it.
   Measured at 1440px on 2026-08-24: the three /en/support/ form pages sat at y=222 under a 104px
   header. (site.css's own `body:not(...)` rule was the bigger contributor there and now excludes
   hero pages too.)

   :has() rather than a body class, because the class list is computed in _RootLayout before the
   hero has rendered, so the layout cannot know. Specificity is (0,1,1) — `body` plus the
   argument's `.bcfc-hero` — which is what it takes to beat the (0,0,1) base rule.

   This deliberately does NOT match the home page or the other `bcfc-hero-page` templates: those
   draw the multi-slide banner (`.bcfc-home__hero` / `.bcfc-home-hero-slider`), not `.bcfc-hero`,
   and their own offset is what holds THAT clear of the nav. Should a page ever carry both, the
   `body.bcfc-hero-page:not(.bcfc-hero-scrolled)` rule in bcfc-inline-partials.css is (0,2,0) and
   still wins over this — which is the right way round, since that class is an explicit statement
   by the page. */
body:has(.bcfc-hero) { padding-top: 0; }

/* THE TAB STRIP IS NOT A CLAIMANT. It renders INSIDE the band (Shared/_HeroChrome.cshtml, per
   Bahaa 2026-08-16: "if the hero is there put inside"), so it is behind this margin, not beside it.

   Two rules briefly lived here on 2026-08-24, while the strip was being trialled in the chrome
   ahead of the hero — `body:has(.bcfc-page-tabs__list) .bcfc-hero { margin-block-start: 0 }` and a
   companion zeroing the strip's bottom margin. Both are DELETED and must not come back while the
   strip is in-hero: the first would zero the hero's nav clearance on every page that has a tab set,
   which is precisely the failure the block above exists to prevent. */

/* ============================================================================
   HEIGHT — the size knob (heroHeight)
   ============================================================================
   Set TOKENS, never the height property, so heroMinHeight (an inline custom property)
   still composes over the preset instead of fighting a declaration.

   Each step moves the band's floor AND its type scale together, so the four presets are
   four real sizes rather than four crop heights on one design:

     compact   300px     utility headers — a title band, no photograph worth reading
     standard  460px     the default. Section and detail pages.
     tall      620px     the comp's own size. Flagship pages (About, hubs, landings).
     full      viewport  a hero that IS the first screen.

   tall and full share a type scale deliberately: `full` is a statement about the BAND's
   height, not about the headline, and stepping the type again at full would give a
   1200px-tall band a headline that overflows a laptop viewport.
   ============================================================================ */
.bcfc-hero--h-compact {
    --hero-min-h: 300px;
    /* Trimmed 28-42px -> 24-36px on 2026-09-01 alongside standard and tall/full, per
       Bahaa: headings read too big across the hero pages generally. */
    --hero-title-size: clamp(24px, 3.6vw, 36px);
    --hero-title-mt: 14px;
    --hero-lead-size: 16px;
    --hero-support-size: 15px;
    --hero-pad-start: 28px;
    --hero-pad-end: clamp(32px, 4vw, 56px);
}
.bcfc-hero--h-standard {
    --hero-min-h: 460px;
}
.bcfc-hero--h-tall,
.bcfc-hero--h-full {
    /* Was the comp's values exactly (52-92px). Trimmed to 44-72px on 2026-09-01 alongside
       compact and standard, per Bahaa: headings read too big across the hero pages
       generally, flagship pages included. */
    --hero-title-size: clamp(44px, 5.6vw, 72px);
    --hero-title-mt: 26px;
    --hero-lead-size: 21px;
    --hero-lead-lh: 1.55;
    --hero-support-size: 16.5px;
}
.bcfc-hero--h-tall { --hero-min-h: 620px; }
.bcfc-hero--h-full { --hero-min-h: calc(100vh - var(--bcfc-total-header-height, 104px)); }
/* dvh only where it parses. Custom property values are NOT parse-validated, so a bare
   --hero-min-h: calc(100dvh - …) would be ACCEPTED and then collapse the band to nothing
   on a browser without dvh support. */
@supports (height: 100dvh) {
    .bcfc-hero--h-full { --hero-min-h: calc(100dvh - var(--bcfc-total-header-height, 104px)); }
}

/* TONE. Light means dark ink on a pale band — the minimal variant, and any hero over
   pale artwork. --hero-scrim moves with it, or a light hero keeps a navy fade. */
.bcfc-hero--light {
    /* RE-ANCHOR THE AMBIENT SURFACE INK. bcfc-surface-map.css claims `.bcfc-hero` as a DARK
       surface unconditionally, so --bcfc-ink-link resolves to #fff for everything inside the band —
       including on THIS variant, where the band is light. Measured on /en/about-bcfc/careers/: the
       breadcrumb trail is `color: inherit` from `.bcfc-breadcrumbs ol`, which reads
       var(--bcfc-ink-link, …), so "About BCFC" rendered WHITE on a near-white hero at 1.08:1.

       Fixing the tokens here rather than the breadcrumb fixes every descendant that reads them at
       once — the trail, the page tabs, any prose link a template drops in the band — instead of one
       component at a time. Values are the light-surface set from bcfc-surface-map.css, so a light
       hero now matches any other light container on the site. */
    --bcfc-ink: var(--bcfc-navy, #071b33);
    --bcfc-ink-strong: var(--bcfc-navy, #071b33);
    --bcfc-ink-muted: var(--bcfc-gray-600, #475467);
    --bcfc-ink-link: var(--bcfc-primary, #004a98);
    --bcfc-ink-link-hover: var(--bcfc-primary-dark, #00346a);

    --hero-ink: var(--bcfc-text-dark, #071b33);
    --hero-ink-muted: var(--bcfc-dark-ink-muted, var(--bcfc-text-muted, #5c6670));
    --hero-ink-dim: var(--bcfc-dark-ink-muted, var(--bcfc-text-muted, #5c6670));
    --hero-accent: var(--bcfc-blue, #004a98);
    --hero-surface: var(--bcfc-surface-sunken, var(--bcfc-nav-hover-bg, #f3f7fb));
    --hero-scrim: var(--bcfc-nav-hover-bg, #f3f7fb);
}

/* DARK THEME. A light hero is "dark ink on a pale band"; on the dark canvas the band must go dark and
   the ink light together, or the lead renders pale-on-pale (measured 2.0:1 on /en/imtiaz-cards/points-to-a-trip/).
   The band colour can be an editor's inline --hero-surface (heroSurfaceColour), which outranks any
   stylesheet, hence !important: a pale fill has no meaning on a dark page. Theme-scoped, light mode untouched. */
[data-bcfc-theme="dark"] .bcfc-hero--light {
    --bcfc-ink: var(--bcfc-dark-ink);
    --bcfc-ink-strong: var(--bcfc-dark-ink);
    --bcfc-ink-muted: var(--bcfc-dark-ink-muted);
    --bcfc-ink-link: var(--bcfc-dark-ink-brand);
    --bcfc-ink-link-hover: var(--bcfc-dark-ink-brand);
    --hero-ink: var(--bcfc-dark-ink);
    --hero-ink-muted: var(--bcfc-dark-ink-muted);
    --hero-ink-dim: var(--bcfc-dark-ink-muted);
    --hero-accent: var(--bcfc-dark-ink-brand);
    --hero-surface: var(--bcfc-surface-sunken) !important;
    --hero-scrim: var(--bcfc-surface-sunken) !important;
}

.bcfc-hero--minimal {
    --hero-min-h: 260px;
    --hero-pad-start: 28px;
    --hero-pad-end: clamp(28px, 3vw, 52px);
}

/* ---- backdrop ---------------------------------------------------------------------- */
.bcfc-hero__bg {
    position: absolute;
    inset: 0;
    /* The gradient fallback sits on the WRAPPER, so it covers both failure modes: no
       image picked, and an image that 404s (its onerror removes the <img> and this shows
       through). */
    background: var(--hero-surface);
}
.bcfc-hero__bg-img,
.bcfc-hero__bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}
/* The backdrop's own caption chip — a date pill plus a bold line, e.g. "February 2026 —
   Newest" over "King Hamad Youth Empowerment Award…". Pinned to the backdrop layer, not the
   copy column, because it describes the PHOTOGRAPH rather than the page — a hero with a photo
   collage or a rotating gallery would want a caption per image, not one caption for the whole
   band. Both lines are optional and independent, so the flex column collapses to whichever is
   present. */
.bcfc-hero__bg-caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 64px 24px 22px;
    /* Its own scrim, distinct from .bcfc-hero__scrim: that one buys contrast for the COPY
       column and stops well short of the image's own edge; this one only has to darken the
       strip the caption sits on. */
    background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
    color: #fff;
    pointer-events: none;
}
.bcfc-hero__bg-caption-date {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hero-accent);
}
.bcfc-hero__bg-caption-title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
}

/* A YouTube backdrop is an iframe, which object-fit cannot touch — it has to be scaled
   to cover by hand. pointer-events:none so it cannot swallow a click meant for a CTA. */

/* A DIAGONAL scrim, not a flat one: a flat overlay cannot promise legibility over
   whatever photograph an editor picks, and it dims the entire image to buy contrast in
   the one corner that needs it. Solid behind the copy, clear at the far edge.

   RAMP RE-CUT 2026-08-30, and it is STRICTLY MORE legible than the version it replaces,
   not a trade. The old stops were 1 / 1 / .85 / .50 / .12 at 0 / 24 / 42 / 64 / 100%.
   The fully-opaque plateau ran to 24% of the band, but the copy column starts at ~20%
   and runs to ~51% (measured on /en/.../vehicle-finance/ at 1900px: h1 x=374..962 of
   1900). So the plateau sat almost entirely where NO TEXT IS - it bought nothing for
   contrast and read as a hard vertical edge with the photograph "cropped" behind it,
   which is how it was reported. The budget is now spent where the text actually sits:
   the plateau is halved to 12% and the MID stops are raised (.94@30 / .82@48 / .56@66
   against .85@42 / .50@64).
   Measured over the real backdrop (3915x1641 JPEG, object-fit:cover, WCAG AA, worst
   pixel per element): h1 6.01 -> 7.13, lead 5.88 -> 6.44, strip 7.57 -> 8.41, eyebrow
   5.54 -> 5.42 (needs 4.5). Against worst-case WHITE artwork the OLD ramp FAILED - lead
   4.21 and strip 4.47 against a 4.5 threshold - so the comment's promise below was not
   actually being kept; the new ramp passes that case at 5.00 and 5.49.
   Two extra stops exist to kill the slope discontinuity at the end of the plateau, which
   is what made the boundary read as a seam rather than a fade.

   Built from --hero-scrim with color-mix() per stop rather than from five hardcoded
   rgba() values. That is what makes heroSurfaceColour actually work: the old version
   ramped literal rgba(0,52,106,…) stops, so an editor who retinted a hero got their
   colour on the band and the old navy on the scrim over it. */
.bcfc-hero__scrim {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(100deg,
        var(--hero-scrim) 0%,
        var(--hero-scrim) 12%,
        color-mix(in srgb, var(--hero-scrim) 94%, transparent) 30%,
        color-mix(in srgb, var(--hero-scrim) 82%, transparent) 48%,
        color-mix(in srgb, var(--hero-scrim) 56%, transparent) 66%,
        color-mix(in srgb, var(--hero-scrim) 26%, transparent) 84%,
        color-mix(in srgb, var(--hero-scrim) 8%, transparent) 100%);
}
/* The RTL angle is the LTR one mirrored across the vertical axis (360 - 100), so the
   solid end stays behind the copy when the copy moves to the right. */
[dir="rtl"] .bcfc-hero__scrim {
    background-image: linear-gradient(260deg,
        var(--hero-scrim) 0%,
        var(--hero-scrim) 12%,
        color-mix(in srgb, var(--hero-scrim) 94%, transparent) 30%,
        color-mix(in srgb, var(--hero-scrim) 82%, transparent) 48%,
        color-mix(in srgb, var(--hero-scrim) 56%, transparent) 66%,
        color-mix(in srgb, var(--hero-scrim) 26%, transparent) 84%,
        color-mix(in srgb, var(--hero-scrim) 8%, transparent) 100%);
}
/* A pale band needs a shorter, gentler ramp — the same five stops at these alphas would
   wash the photograph out completely rather than fading off it. */
.bcfc-hero--light .bcfc-hero__scrim {
    background-image: linear-gradient(100deg,
        var(--hero-scrim) 0%,
        var(--hero-scrim) 30%,
        color-mix(in srgb, var(--hero-scrim) 60%, transparent) 68%,
        color-mix(in srgb, var(--hero-scrim) 5%, transparent) 100%);
}

/* ---- the ornament layer ------------------------------------------------------------
   Shared/_HeroRings.cshtml, selected by heroOrnament or ViewData["Hero:OrnamentPartial"].
   These names were .bcfc-abt__* in AboutRevamp.css, which is a PAGE sheet — so the
   ornament rendered as invisible markup on every page but About. They live here now, with
   the hero they decorate.

   Purely decorative, hence aria-hidden in the markup and no layout role here: the
   container is a 0x0 anchor point so the rings can be centred on it with
   translate(-50%,-50%) without ever affecting the hero's own box.

   inset-inline-end (not right) so the cluster mirrors to the other side in Arabic and
   stays opposite the copy rather than behind it.

   Sizes and per-ring durations live on the elements in the partial, because they are six
   different values on six siblings; only what is SHARED is here.
   ----------------------------------------------------------------------------------- */
.bcfc-hero__rings {
    position: absolute;
    top: 50%;
    inset-inline-end: 8%;
    width: 0;
    height: 0;
    pointer-events: none;
}
.bcfc-hero__ring,
.bcfc-hero__orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation-name: bcfc-hero-spin;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
/* 2px, not the comp's 1.5px: Chrome floors a 1.5px border to a 1px hairline, and at 50%
   alpha that vanished entirely over a busy photograph — the comp was drawn over a bright
   low-detail lounge wall. Same hue, enough weight to survive whatever image an editor
   picks, which is the same reasoning the diagonal scrim above already applies to the
   headline.

   WEIGHT WAS NOT ENOUGH ON ITS OWN — 2026-09-09. The inks here are pale on purpose (the
   accent is a light blue at 62%, the dashed ring white at 52%) because the About comp puts
   them on dark navy. Put the same cluster on artwork that is BRIGHT where the cluster sits
   and it vanishes. Measured off the RENDERED PIXELS of all ten ring pages on beta, scanning
   a radial window across each stroke and taking its contrast against its own immediate
   surround — the fraction of each ring's visible arc coming out below 1.15:1, i.e. not
   there:

                                      inner ring        with the hairline
     /en/commercial-sme/              66% of its arc          2%
     /en/finance/conventional-services/  66%                  2%
     /en/bcfc-group/                     63%                  6%
     /en/investor-relations/              61%                  2%
     /en/services/                        60%                  2%
     /en/news/sahel-ai/                   41%                  2%
     /en/about-bcfc/  (the comp's own)     2%                  1%

   Those five are the same white-building-under-pale-sky artwork, and the inner ring's
   median contrast on them was 1.11:1 — the stroke the same colour as the sky behind it.
   So this was never a CSME bug; CSME is just the one that got looked at.

   The fix is a dark hairline just inside and just outside each stroke. Same trick as the
   2px above: buy legibility in the ornament rather than ask every editor to pick artwork
   that suits it, or retint one hero at a time from the backoffice and still leave the next
   bright photograph broken. It costs the dark pages nothing — black at 20% over navy moves
   About's inner ring 1.41 -> 1.47:1 and no page's numbers go backwards. */
.bcfc-hero__ring {
    border: 2px solid color-mix(in srgb, var(--hero-accent) 62%, transparent);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(0, 0, 0, .2);
}
/* The middle ring is dashed and in the ink colour so the three do not read as one
   gradient. A modifier, not the comp's :nth-of-type(2) — that selector counts SPANS and
   would follow the markup order. */
.bcfc-hero__ring--dashed {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--hero-ink) 52%, transparent);
}
/* THE TRAVELLING DOT, AND WHY ITS RESTING POINT IS NOT 12 O'CLOCK — 2026-09-09.
   It used to sit at `top: -6px; left: 50%`, i.e. the top of its orbit. That is only ever
   seen for an instant while the orbit spins, so it looked arbitrary and harmless — until
   the freeze below stopped the spin. Then all three dots parked on that one point, which
   sits R px ABOVE the cluster's centre; the cluster's centre is the band's vertical middle,
   so for R=260 and R=360 the parked dot is 260px / 360px above a band that is only 230px
   from middle to top, and `overflow: hidden` on .bcfc-hero clipped both away. Measured on
   beta, /en/about-bcfc/: inner dot 100% visible, middle 34%, outer 0% — two of the three
   dots the comp draws were simply not on the page, on every hero carrying a photograph and
   for every reduced-motion visitor.

   So each orbit now rests at its OWN point, all three inside the band at every height preset
   and on the arc facing the band's CENTRE, so they read as a cluster rather than a stack and
   never sit off the edge:

     --outer  9 o'clock                    0 px above/below the middle
     --mid    13.5deg below horizontal   +61 px
     --inner  21deg above horizontal     -61 px

   The angles are shallow, which is deliberate: it is the DISTANCE FROM THE MIDDLE that has to
   survive a short band, and the three radii already spread the dots 160/253/360px apart
   horizontally, so the cluster reads as an arc without needing much vertical travel. At +/-61px
   the dots stay inside any band down to ~135px tall — which covers the 300px compact preset with
   room to spare, and covers `--no-overlay`, where pre-composed artwork sets the height and there
   is no floor at all.

   The percentages are exact points on each circle: inline 50%(1 - cos a), block
   50%(1 -/+ sin a) of the orbit's own 2R box. LOGICAL properties, not top/left, so the
   cluster mirrors with the rest of the hero on /ar — `inset-inline-end: 8%` already puts it
   on the left there, and a physical `left` would have parked every dot OUTSIDE the band on
   the wrong side (measured: outer dot 0% visible on /ar/about-bcfc/ too).

   Nothing about the animation changes: the spin is a full 360deg loop, so a different start
   angle is the same journey with a different phase. */
.bcfc-hero__orbit i {
    position: absolute;
    inset-block-start: var(--hero-orbit-dot-block, 50%);
    inset-inline-start: var(--hero-orbit-dot-inline, 0%);
    width: 13px;
    height: 13px;
    /* Centre the dot ON its point rather than hanging it off the corner. Both are logical:
       a negative margin-inline-start shifts toward inline-start, which is left in LTR and
       right in RTL — the same mirroring the inset above relies on. */
    margin-block-start: -6.5px;
    margin-inline-start: -6.5px;
    border-radius: 50%;
    /* The glow first, then the same dark hairline the ring above carries and for the same
       reason — a 13px pale dot on a white building is invisible without it. Later shadows
       paint behind earlier ones, so the hairline sits under the glow at the dot's edge. */
    box-shadow: 0 0 22px var(--hero-accent), 0 0 0 1px rgba(0, 0, 0, .28);
}
.bcfc-hero__orbit--inner { --hero-orbit-dot-inline: 3.321%; --hero-orbit-dot-block: 32.082%; }
.bcfc-hero__orbit--mid { --hero-orbit-dot-inline: 1.381%; --hero-orbit-dot-block: 61.673%; }
.bcfc-hero__orbit--outer { --hero-orbit-dot-inline: 0%; --hero-orbit-dot-block: 50%; }
.bcfc-hero__pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 340px;
    height: 340px;
    margin: -170px 0 0 -170px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--hero-accent) 34%, transparent) 0%,
        color-mix(in srgb, var(--hero-accent) 0%, transparent) 70%);
    /* THE RESTING STATE IS THE QUIET END OF THE CYCLE, not the peak — 2026-09-09.
       bcfc-hero-breathe carries both the scale and the opacity in its keyframes, so with the
       animation off the element fell back to its OWN values: full size, full opacity, i.e.
       bigger and brighter than it ever looked while moving. The freeze below had restated
       these two lines for itself; the reduced-motion query had not, so a reduced-motion
       visitor got the peak on every hero. Stating them here fixes both at once and lets the
       freeze rule below drop its copy. Centring is done by the negative margin above, so a
       transform here is free to carry the scale alone. */
    transform: scale(.9);
    opacity: .55;
    animation: bcfc-hero-breathe 7s ease-in-out infinite;
}
@keyframes bcfc-hero-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes bcfc-hero-breathe {
    0%, 100% { transform: scale(.9); opacity: .55; }
    50% { transform: scale(1.12); opacity: 1; }
}
/* The comp drops the cluster entirely below 820px: at that width it would sit under the
   copy rather than beside it, and a 720px circle on a 400px viewport is just noise.

   900px, not the comp's 820px — 2026-09-09. 900px is where the hero itself changes shape:
   the responsive query below sets `.bcfc-hero__copy { max-width: none }` AND
   `.bcfc-hero { --hero-min-h: auto }` at exactly that width. The first is the comp's own
   reason for hiding the cluster arriving 80px earlier than the comp's number — from 900px down
   the copy is already full-bleed, so the cluster is already behind it rather than beside it.
   The second is why the 80px window mattered: with no height floor the band is whatever the
   copy makes it, so a short headline there could leave a band too shallow to hold the parked
   dots, and the ornament went back to looking half-drawn in that one strip. Hiding it on the
   same breakpoint the layout uses removes both at once. */
@media (max-width: 900px) {
    .bcfc-hero__rings { display: none; }
}

/* ---- NO ORNAMENT MOTION OVER A PHOTOGRAPH — 2026-09-03, REVERSED 2026-09-13 ------
   Bahaa, 2026-09-13: "never make the rings stop." The freeze this note used to justify is
   removed below (kept as history, not as a rule) — the rings and orbit dots now spin
   unconditionally whenever a hero carries the ornament, photograph or not. Only
   `prefers-reduced-motion` still stops them, which is an accessibility setting, not a
   design choice, and is left alone.

   Bahaa, on the converted pages: "the images in the banner have a zoom movement."
   Measured in headless Chrome on /en/loyalty-programme/: seven animations running on top of the
   hero photo — three `bcfc-hero__ring` and three `bcfc-hero__orbit` spinning (16s/22s/30s and
   14s/20s/26s), plus `bcfc-hero__pulse` on `bcfc-hero-breathe`, a 340px radial glow scaling
   .9 -> 1.12 every 7 seconds. That last one IS the reported zoom: it sits at the centre of the
   band with the photo behind it, so what moves reads as the PICTURE breathing, not as a decoration.

   The ornament is not deleted — it is the approved decoration on a FLAT band, where there is no
   image for it to be mistaken for. It is frozen only when the hero actually carries a photograph,
   which `:has(.bcfc-hero__bg-img)` states directly rather than inferring from a variant class.
   (`bcfc-hero--banner` looks like it would work and does NOT: `heroVariant` defaults to "banner"
   for every hero, with or without an image — see _PageHero.cshtml line 748.)

   `animation: none`, not `display: none`: the rings, the orbit dots and the glow all still paint,
   so the band keeps the depth the design gives it and only the movement stops.

   THAT LAST CLAIM WAS FALSE FOR TWO OF THE THREE DOTS UNTIL 2026-09-09, and it is worth spelling
   out because the failure is invisible from here. Freezing an animation drops the element back to
   its own resting values, and every orbit's dot rested at 12 o'clock — R px above the cluster's
   centre, which is the band's vertical middle. For the 520px and 720px orbits that point is above
   the band's own top edge, so `overflow: hidden` clipped those two dots away entirely. The
   ornament looked half-drawn on every hero with a photograph, which is all ten of them. Fixed
   where it belongs — each orbit now RESTS at a point inside the band (see the dot rule above) —
   rather than here, so the reduced-motion query gets the same repair for free.

   A VIDEO backdrop is in the selector too. It was not, and it is the stronger case of the two:
   moving footage under a scaling glow reads as the footage zooming even more readily than a still
   photograph does.

   Not keyed on a variant class: `bcfc-hero--banner` looks like it would work and does NOT —
   `heroVariant` defaults to "banner" for every hero, with or without an image (_PageHero.cshtml
   line 748). And note the corollary of keying on the ELEMENT: `_PageHero` gives the backdrop
   `onerror="this.remove()"`, so an image that 404s takes the `<img>` with it and the ornament
   starts moving again. That is correct — there is no photograph left to mistake it for — but it
   means LOCAL is not a place to verify this rule: media 404s on a dev machine, so all ten pages
   measure as spinning there and as frozen on beta.
   ----------------------------------------------------------------------------------- */
/* Freeze rule removed 2026-09-13 — "never make the rings stop" (Bahaa). The rings and
   orbit dots now keep spinning over a photograph or video backdrop as well. */

/* ---- the pattern ornament ----------------------------------------------------------
   Shared/_HeroPattern.cshtml. Was .bcfc-islamic-{landing,product}__hero-pattern — the same
   single rule duplicated in two page sheets, with a mint stroke baked into the SVG data URI.

   Drawn as a MASK, not a background-image, so the colour is a token: a data URI cannot read a
   CSS variable, which is exactly why the original could not be reused on a hero with a
   different accent. --hero-pattern-ink falls back to --hero-accent, so one knob retints the
   eyebrow rule, the accent clause and this together.
   ----------------------------------------------------------------------------------- */
.bcfc-hero__pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .5;
    background-color: var(--hero-pattern-ink, var(--hero-accent));
    -webkit-mask-image: var(--hero-pattern-tile);
    mask-image: var(--hero-pattern-tile);
    -webkit-mask-size: 88px 88px;
    mask-size: 88px 88px;
}
.bcfc-hero {
    /* The tile: a 44px square, the same square rotated 45deg, and a centred circle. Stroke is
       black at 10% because a MASK reads ALPHA only — the colour comes from background-color
       above, so this value is opacity, not ink. 0.10 x the .5 element opacity reproduces the
       original .bcfc-islamic-*__hero-pattern exactly (it painted a 10%-alpha stroke at .5). */
    --hero-pattern-tile: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2788%27%20height%3D%2788%27%20viewBox%3D%270%200%2088%2088%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271%27%20stroke-opacity%3D%270.10%27%3E%3Crect%20x%3D%2722%27%20y%3D%2722%27%20width%3D%2744%27%20height%3D%2744%27/%3E%3Crect%20x%3D%2722%27%20y%3D%2722%27%20width%3D%2744%27%20height%3D%2744%27%20transform%3D%27rotate%2845%2044%2044%29%27/%3E%3Ccircle%20cx%3D%2744%27%20cy%3D%2744%27%20r%3D%277%27/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- inner ------------------------------------------------------------------------- */
.bcfc-hero__inner {
    position: relative;
    /* Above the ornament slot. Ornaments are emitted BEFORE this box so the copy paints
       over them; the alternative — emitting them last for paint order — makes a screen
       reader and a keyboard user reach the decoration before the headline. */
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 24px;
    padding-block: var(--hero-pad-start) var(--hero-pad-end);
}

/* Guaranteed breathing room BELOW the hero band. Padding inside the band only makes the
   band taller - the next block still touches its edge (measured on the Bourse
   Announcements page: card top == hero bottom). The gap has to be outside it.
   OPT-IN, default 0: many pages pull their first band UP over the hero with a negative margin
   (Real Estate hub path cards, home finance card, ...) and a default gap pushed those down.
   A page whose first block sits flush against the hero sets --bcfc-hero-gap on its own
   wrapper, e.g. .bcfc-ir-ann-page { --bcfc-hero-gap: clamp(1rem, 2vw, 1.75rem); }. */
.bcfc-hero {
    margin-block-end: var(--bcfc-hero-gap, 0);
}
.bcfc-hero--split .bcfc-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
}
/* The chrome row spans both columns and stays at the top: the breadcrumb belongs on the
   site grid, not indented into the copy column.

   THE TAB STRIP IS PART OF THAT ROW. _HeroChrome emits `.bcfc-hero-chrome__trail` and then a BARE
   `.bcfc-page-tabs` nav as siblings inside .bcfc-hero__inner, so in `split` the nav is a THIRD grid
   item. Without this it took cell (2,1), pushed .bcfc-hero__copy into column 2 and shoved the
   visual slot down to row 3 — measured on /en/sahel-islamic/: the strip sat alone mid-left, the
   copy rendered in the right column and the arch photo fell below the fold. Any split hero on a
   page with two or more "Tab Pages" had the same layout, so this is fixed here rather than on the
   page. Both selectors, so the two chrome boxes stack as one column each spanning the full width. */
.bcfc-hero--split .bcfc-hero-chrome__trail,
.bcfc-hero--split .bcfc-hero__inner > .bcfc-page-tabs { grid-column: 1 / -1; }

/* image-left: the visual takes the first column and the narrower track moves with it. The chrome
   row is pulled ahead with `order` so auto-placement still gives it row 1 across both columns.
   It is the COPY that moves back, not the visual: a page can hand the hero its own visual
   partial (Sahel's `.arch`), which carries no `.bcfc-hero__visual` class to hang an order on.
   Source order is untouched, so screen readers and the phone stack keep copy first. */
.bcfc-hero--split-left .bcfc-hero__inner { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
.bcfc-hero--split-left .bcfc-hero-chrome__trail,
.bcfc-hero--split-left .bcfc-hero__inner > .bcfc-page-tabs { order: -2; }
.bcfc-hero--split-left .bcfc-hero__copy { order: 1; }

.bcfc-hero__copy { max-width: var(--hero-copy-width); }
.bcfc-hero--centred .bcfc-hero__inner { text-align: center; }
.bcfc-hero--centred .bcfc-hero__copy { margin-inline: auto; }
.bcfc-hero--centred .bcfc-hero__cta-row,
.bcfc-hero--centred .bcfc-hero__strip { justify-content: center; }

/* ---- copy -------------------------------------------------------------------------- */
/* THE LOGO LOCKUP SITS ON A PLATE, AS OF 2026-08-24 — changed on request: "Logo need for BG
   and to be bigger."

   It used to be a bare 190x46 <img> straight onto the band. Every hero logo this partial ever
   renders is a full-colour mark drawn for white paper — the Tas'heelat Real Estate Services
   lockup is navy type plus the red diamond, and the ~103 IMTIAZ merchant marks are every format
   under the sun — while the band underneath is a navy photograph. So the mark read at about a
   third of the headline's weight and its reds died into the scrim. `.lofd-brand__logo` in
   LoyaltyOfferDetailV2.css already reached the same conclusion for the in-page partner lockup
   ("Sits on a white plate because partner logos arrive in every possible format"); this is that
   treatment, in the hero, for all 105 pages that draw a hero logo.

   TWO ELEMENTS, AND THE SPLIT IS LOAD-BEARING. The plate is the wrapper's background, never
   padding on the <img>. Padding-on-the-img was tried first and page sheets defeat it: measured
   with CSS.getMatchedStylesForNode on /en/real-estate/evaluation-services/, RealEstateV2.css's
   `.re-v2 * { box-sizing: border-box }` (0,1,0, and later in the cascade) and `.re-v2 img
   { max-width: 100% }` (0,1,1) both out-rank a bare `.bcfc-hero__logo` (0,1,0) — so the img
   computed border-box and max-width:100%, the padding ate the artwork from the inside and the
   mark came out SMALLER than before. A wrapper sizes from its content, so nothing a page sheet
   says about `img` or `*` can reach it.

   The sizing rule below is deliberately `.bcfc-hero img.bcfc-hero__logo` (0,2,1) for the same
   reason — it has to survive `.<page-prefix> img { max-width: 100% }`, which is in at least
   RealEstateV2.css and is a common page-sheet reset.

   The hairline ring, not just the shadow, because heroTone=light paints the band in a pale
   surface and a white plate on it would otherwise have no edge at all.

   Every value is a token so a page whose logo is ALREADY a reversed/white-out mark can switch
   the plate off with `--hero-logo-plate: transparent` on the band instead of out-specifying
   these rules. No live page needs that today: all 105 hero logos measured on 2026-08-24 are
   full-colour marks. SahelIslamic.css sets --hero-logo-max-h through the same door. */
.bcfc-hero__logo-plate {
    /* flex + fit-content, NOT inline-flex: the eyebrow directly below is itself an inline-flex
       <span>, so an inline plate and the kicker would share a line. This is a block-level box
       that still hugs the mark rather than stretching to the copy column's 640px. */
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    padding: var(--hero-logo-pad, clamp(10px, 1.1vw, 15px));
    background: var(--hero-logo-plate, var(--bcfc-surface-raised, var(--bcfc-white, #fff)));
    border: 1px solid var(--hero-logo-ring, rgba(7, 27, 51, .08));
    border-radius: var(--hero-logo-radius, var(--bcfc-radius-md, 12px));
    box-shadow: var(--hero-logo-shadow, 0 10px 28px rgba(3, 22, 47, .22));
    /* The old site's .offer-inner-white-layer: .9 on the WHOLE plate, so a hint of the photo shows
       through and the logo softens with its backing (there they were one layer). On the element,
       not an rgba background, precisely so the <img> fades too. */
    opacity: var(--hero-logo-plate-opacity, .9);
    margin-block: 2px 24px;
}
.bcfc-hero--centred .bcfc-hero__logo-plate { margin-inline: auto; }

.bcfc-hero img.bcfc-hero__logo {
    display: block;
    width: auto;
    max-width: var(--hero-logo-max-w, clamp(196px, 21vw, 268px));
    max-height: var(--hero-logo-max-h, clamp(54px, 5.4vw, 74px));
    object-fit: contain;
    margin: 0;
}
/* LOGO ASIDE — heroLogoPlacement = "aside" (template-only; the IMTIAZ offer hero, 2026-10-12).
   The plate leaves the copy column for its own end column, larger, and comes back FIRST once the
   row stacks. A flex row rather than a grid track so the inline direction mirrors it: /ar puts the
   logo on the left with no RTL rule. order -1 below 900px is what keeps it on top — in source it
   follows the copy so a screen reader meets the headline first. 900px is the hero's own collapse
   point (see the visual-column rule above). */
.bcfc-hero__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
}
.bcfc-hero__layout > .bcfc-hero__copy {
    flex: 1 1 420px;
    min-width: 0;
}
.bcfc-hero__logo-col {
    flex: 0 0 auto;
    /* to the band's end edge, into the empty column, not hard against the copy */
    margin-inline-start: auto;
    /* min() so the row still fits beside the copy between 900px and ~1300px instead of
       wrapping the logo underneath it. */
    --hero-logo-max-w: min(440px, 32vw);
    --hero-logo-max-h: 160px;
}
.bcfc-hero__logo-col > .bcfc-hero__logo-plate { margin-block: 0; }

@media (max-width: 900px) {
    .bcfc-hero__layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .bcfc-hero__layout > .bcfc-hero__copy { flex: 0 1 auto; width: 100%; }
    .bcfc-hero__logo-col {
        order: -1;
        margin-inline-start: 0;
        --hero-logo-max-w: 220px;
        --hero-logo-max-h: 78px;
    }
}

/* The plate is a physical object in the band, so it does not want to be the full 268px on a
   phone — at 390px that is two thirds of the viewport width and it competes with the headline. */
/* THE TAS'HEELAT REAL ESTATE MARK, MIRRORED FOR RTL — reported live 2026-09-23 on
   /ar/bcfc-group/real-estate/evaluation-services: "the logo is not RTL".

   This one hero logo (used by every real-estate hero: V2 detail, V3 hub, V4 Properties for
   Sale — all three feed heroLogoUrl into this same plate) is not a simple mark: it is ONE
   flattened PNG with the Arabic label, the English label and the "Real Estate" ribbon icon
   all baked into fixed pixels, [text-block][icon] left to right. .bcfc-hero__logo-plate
   already mirrors POSITION correctly via logical properties (it sits top-left on /en,
   top-right on /ar) — the bug is that the pixels INSIDE the image never reorder with it, so
   the icon stays stuck on the same physical side regardless of direction.

   Flipping the whole bitmap (`transform: scaleX(-1)`) is not a fix: it would reposition the
   icon but also mirror the Arabic AND English glyphs into backwards, unreadable text. There
   is no per-culture override uploaded in the CMS either (heroLogo supports one; nothing has
   been picked yet — see the bcfc-tresco-logo-rtl-mirror-needs-new-artwork task).

   So this slices the ONE existing asset into its two zones with two background-image
   pseudo-elements — pure CSS, no new artwork, no Razor change — and reorders THOSE, leaving
   every pixel of text sitting exactly as drawn. Source PNG is 2000x432; measured its
   fully-transparent columns to find the boundary: opaque content runs 70-1494 (the text
   block) then a 1494-1579 gap then 1580-1974 (the icon). :has() with a `src*=` match keys
   this to the exact file, so it stays silently inert (falls back to the plain unmirrored
   image) if that media item is ever replaced by a properly-drawn RTL asset - remove this
   block once bcfc-tresco-logo-rtl-mirror-needs-new-artwork ships that asset. Scoped to
   [dir="rtl"] only; /en is untouched. */
.bcfc-hero__logo-plate:has(> img[src*="5f00121833834588888d46c1937463ff"]) {
    --tresco-logo-h: var(--hero-logo-max-h, clamp(54px, 5.4vw, 74px));
}
[dir="rtl"] .bcfc-hero__logo-plate:has(> img[src*="5f00121833834588888d46c1937463ff"]) {
    gap: calc(var(--tresco-logo-h) * 30 / 432);
}
[dir="rtl"] .bcfc-hero__logo-plate:has(> img[src*="5f00121833834588888d46c1937463ff"]) > img.bcfc-hero__logo {
    display: none;
}
[dir="rtl"] .bcfc-hero__logo-plate:has(> img[src*="5f00121833834588888d46c1937463ff"])::before,
[dir="rtl"] .bcfc-hero__logo-plate:has(> img[src*="5f00121833834588888d46c1937463ff"])::after {
    content: "";
    display: block;
    flex-shrink: 0;
    height: var(--tresco-logo-h);
    background-image: url("/media/5f00121833834588888d46c1937463ff/b646ca8fe4694fc2a48ad4dc1aa64a53/file.png");
    background-repeat: no-repeat;
    background-size: calc(var(--tresco-logo-h) * 2000 / 432) var(--tresco-logo-h);
}
/* ::before renders first, so it is the plate's first flex item — the flex row's main-start
   edge, which under dir="rtl" is the RIGHT. That is the text block: same edge it already
   occupies relative to the icon in the source artwork, just now the box it sits in is on the
   opposite physical side of the page from /en. ::after (the icon) lands at the far end, the
   LEFT — mirrored from the source's right-hand placement, exactly the flip this fixes. */
[dir="rtl"] .bcfc-hero__logo-plate:has(> img[src*="5f00121833834588888d46c1937463ff"])::before {
    width: calc(var(--tresco-logo-h) * 1424 / 432);
    background-position: calc(-1 * var(--tresco-logo-h) * 70 / 432) 0;
}
[dir="rtl"] .bcfc-hero__logo-plate:has(> img[src*="5f00121833834588888d46c1937463ff"])::after {
    width: calc(var(--tresco-logo-h) * 394 / 432);
    background-position: calc(-1 * var(--tresco-logo-h) * 1580 / 432) 0;
}

@media (max-width: 520px) {
    .bcfc-hero__logo-plate { padding: var(--hero-logo-pad, 9px); }
    .bcfc-hero__logo-plate:has(> img[src*="5f00121833834588888d46c1937463ff"]) {
        --tresco-logo-h: var(--hero-logo-max-h, 50px);
    }
    .bcfc-hero img.bcfc-hero__logo {
        max-width: var(--hero-logo-max-w, 176px);
        max-height: var(--hero-logo-max-h, 50px);
    }
}
/* THE KICKER. The comp replaced the older smoked-glass pill badge (and its verified_user
   icon) with a bare 36x2 accent rule plus a letterspaced label. The rule is a ::before
   rather than a <span> so the markup carries only the words; because the flex row follows
   dir, it lands on the right automatically in RTL with no separate rule. currentcolor, so
   the rule and the label can never drift apart when a hero is retinted. */
.bcfc-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--hero-accent);
    font-size: 0.84375rem;
    font-weight: var(--bcfc-fw-bold, 700);
    letter-spacing: .18em;
    text-transform: uppercase;
}
.bcfc-hero__eyebrow::before {
    content: "";
    flex: none;
    width: 36px;
    height: 2px;
    background: currentcolor;
}
/* Arabic is cursive: letter-spacing pulls the glyphs apart at the joins, and uppercase is
   a no-op on it. Both are dropped rather than tuned. */
[dir="rtl"] .bcfc-hero__eyebrow { letter-spacing: normal; text-transform: none; }

/* Both the class and a bare-tag selector, deliberately: rte.css ships the only unscoped
   heading scale on the site and index.css is Bootstrap, so a descendant .bcfc-hero h1
   at (0,1,1) was losing to them. Naming the class raises it to (0,2,1) and gives the
   element a hook no global tag rule can capture. */
.bcfc-hero h1,
.bcfc-hero__title {
    font-family: 'Almarai', system-ui, -apple-system, sans-serif;
    color: var(--hero-ink);
    font-size: var(--hero-title-size);
    font-weight: var(--bcfc-fw-extrabold, 800);
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-block: var(--hero-title-mt) 0;
    text-wrap: balance;
}
/* The accent clause. font-style:normal because <em> is the correct ELEMENT for a stressed
   clause, but italics are not the design. */
/* Both the class and a BARE <em> inside the headline. The class is what _PageHero emits for its
   *emphasis* markers and its accent clause; the bare tag is what a caller's own markup contains when
   the headline comes through heroTitleHtml — the designs that let marketing tint part of the line
   write plain <em>. Without the tag selector every such page had to re-tag the element in its view
   just to pick up the treatment, which is the kind of per-page workaround the shared hero exists to
   remove. font-style:normal because <em> is the right ELEMENT for a stressed clause but italics are
   not the design. */
.bcfc-hero__accent,
.bcfc-hero h1 em,
.bcfc-hero__title em {
    font-style: normal;
    color: var(--hero-accent);
}
.bcfc-hero__lead {
    max-width: var(--hero-lead-width);
    color: var(--bcfc-dark-ink-muted, var(--hero-ink-muted));
    font-size: var(--hero-lead-size);
    line-height: var(--hero-lead-lh);
    margin-block: 22px 0;
    text-wrap: pretty;
}
/* News/media article headlines carry the full quoted press-release sentence as the h1 (there is
   no separate lead field — see Views/MediaCentreDetail.cshtml), so on long articles it can run to
   5-6 lines and push the CTAs/date out of the band. Scoped to heroCssClass="bcfc-media-hero--*"
   (MediaCentreDetail's own hero) rather than the shared .bcfc-hero__title, which every other hero
   on the site also uses. */
[class*="bcfc-media-hero--"] .bcfc-hero__title {
    /* Smaller ceiling than the old 2.75rem, and a 3rd line, so a full press-release
       sentence has room to fit without hitting the ellipsis below on ordinary titles —
       the line-clamp stays only as a safety net for the rare title long enough to
       overrun even 3 lines at this size. */
    font-size: clamp(1.15rem, 2.6vw, 2.25rem);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bcfc-hero__support {
    max-width: var(--hero-lead-width);
    color: var(--bcfc-dark-ink-muted, var(--hero-ink-dim));
    font-size: var(--hero-support-size);
    line-height: 1.65;
    margin-block: 18px 0;
    text-wrap: pretty;
}

/* ---- --byline: a SIGNED hero ---------------------------------------------------------
   Opt in per page with the `heroCssClass` field set to `bcfc-hero--byline`, and put the two
   lines in `heroSupport` separated by a newline: name first, role second.

   WHY A MODIFIER AND NOT TWO NEW FIELDS. This is the CEO's Message signature — a bold name over
   a smaller role, against a vertical brand rule (`.ceo-sign` / `.nm` / `.rl` / `.bar` in the
   approved design). Of the five About baselines it appears on exactly ONE page, and
   `bcfcHeroCopyComposition` is shared by every hero on 62 doctypes: adding `heroBylineName` +
   `heroBylineRole` there would put two permanently-empty fields in front of every editor on the
   site, plus a schema write on a live element type and a preview regeneration, to serve one page.
   A modifier costs nothing anywhere else.

   The two tiers come from `::first-line`, which is why no extra markup is needed — font-weight,
   colour and font-size are all properties it accepts. `white-space: pre-line` is what makes the
   authored newline a real line break, and it changes nothing for the other 8 nodes that use
   `heroSupport`, because none of them contains one.

   The rule is painted as a background rather than a `::before`, deliberately: a `::before` box
   joins the first formatted line and would drag `::first-line` onto it instead of the name. */
.bcfc-hero--byline .bcfc-hero__support {
    white-space: pre-line;
    color: var(--bcfc-dark-ink-muted, var(--hero-ink-muted));
    margin-block-start: 28px;
    padding-inline-start: 17px;
    background-image: linear-gradient(var(--bcfc-yellow), var(--bcfc-green));
    background-repeat: no-repeat;
    background-size: 3px 46px;
    background-position-y: top;
}

/* The rule sits on the READING edge, and background-position-x has no logical form, so the two
   directions are spelled out rather than left at a physical `left`. */
[dir="ltr"] .bcfc-hero--byline .bcfc-hero__support {
    background-position-x: left;
}

[dir="rtl"] .bcfc-hero--byline .bcfc-hero__support {
    background-position-x: right;
}

.bcfc-hero--byline .bcfc-hero__support::first-line {
    color: var(--hero-ink);
    font-size: 1.1rem;
    font-weight: 800;
}

/* ---- CTAs -------------------------------------------------------------------------- */
.bcfc-hero__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-block-start: 38px;
}
.bcfc-hero__cta-primary,
.bcfc-hero__cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: .95rem 1.7rem;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1rem;
    /* THE HERO CANNOT RELY ON A PAGE SCOPE. Bootstrap (/css/index.css) sets
       a { text-decoration: underline } site-wide, and the page sheets that cancel it do so
       under their own scope class — .bcfc-comp a for the comp pages, and so on. The hero used
       to sit INSIDE that wrapper because each template drew its own; rendered from
       Navigation/Breadcrumbs.cshtml it is emitted BEFORE the page body and is therefore inside
       no page scope at all, so both CTAs came out underlined. Declared here, and restated on
       :hover below, because the global a:hover rules are the ones that have to be beaten. */
    text-decoration: none;
    /* A matching-width transparent border is reserved in the base state, so the hover
       border does not change the button's size. */
    border: 1.5px solid transparent;
    /* These two exist for a <button> in a slot. The row normally renders <a> elements, and a
       button inherits neither the page font nor a pointer cursor from its ancestors — a dialog
       trigger that cannot be a link (RealEstate's specialist popup, Financing's apply dialog)
       otherwise renders in the UA's default form font. */
    font-family: inherit;
    cursor: pointer;
    transition: transform .25s, box-shadow .25s, background .25s, border-color .25s, color .25s;
}
.bcfc-hero__cta-primary .material-icons-outlined,
.bcfc-hero__cta-secondary .material-icons-outlined { font-size: 1.1875rem; }

.bcfc-hero__cta-primary {
    background: var(--hero-ink);
    color: var(--hero-scrim);
}

/* THE INK IS PINNED AT (0,2,0), AND THIS IS A READABILITY FIX, NOT A TIDY-UP.
   The rule above is (0,1,0). Page sheets reset their anchors with a PAGE-SCOPED, zero-weight
   selector — CareersTemplate.css has `.bcfc-careers-template :where(a) { color: inherit }` — and
   because :where() contributes NO specificity that selector is also (0,1,0). It TIES, and the page
   sheet loads after the bundle, so source order hands it the win. The CTA then inherits the page's
   body colour.
   Measured on /en/about-bcfc/careers/: ink rgb(7,27,51) on fill rgb(7,27,51) — the button is a
   solid navy slab and "Submit your application" is invisible. Contrast 1.00, and it is the REST
   state, not hover.

   Fixing it here rather than exempting each page is the point: the same reset pattern exists in
   several page sheets (bcfc-app-band.css documents the identical trap for its own button and
   solves it the same way), so a per-page fix would be a list that grows every time a template is
   added. Adding the .bcfc-hero ancestor makes these (0,2,0) — above every page-scoped anchor reset
   and still below anything a page deliberately aims at the CTA itself.

   The CTA is always inside .bcfc-hero (.bcfc-hero__inner > __copy > __cta-row > a) on both the
   partial path and the block path, so the ancestor is always there to match. */
.bcfc-hero .bcfc-hero__cta-primary {
    color: var(--hero-scrim);
}

.bcfc-hero .bcfc-hero__cta-secondary {
    color: var(--hero-ink);
}
/* Hover restates BOTH the fill and the ink. A hover rule that recolours only one of the
   two is how this site ended up with dark ink on a dark fill in 40 places — and the
   global a:hover it has to beat is exactly that kind of rule. */
.bcfc-hero__cta-primary:hover,
.bcfc-hero__cta-primary:focus-visible {
    text-decoration: none;
    transform: translateY(-2px);
    /* The `box-shadow: 0 12px 28px rgba(0,0,0,.25)` that used to sit here was overridden by the
       `box-shadow: none` at the END of this same block - added when the CTA became an outline on
       hover (2026-09-06, see below) - so it has not rendered since. Removed, no visual change. */
    /* THE FILL HAS TO ACTUALLY MOVE. This used to restate `background: var(--hero-ink)` — the
       SAME value as rest — so the button had no colour change whatsoever: measured on /en/finance/
       and /en/islamic-finance/, rest and hover both rgb(10,58,115) on rgb(255,255,255), and the
       shadow is near-invisible against a dark band. The lift was the only feedback.

       Mixing 12% of --hero-scrim INTO --hero-ink, rather than naming a hover colour, is what makes
       this safe on every tone at once. The two tokens are always the button's fill and its ink, so
       the mix always moves the fill 12% TOWARD its own text and never past it:
         dark hero  — ink #fff + 12% navy  -> a faint blue-grey tint, navy label, ~9:1
         light hero — ink #071b33 + 12% #f3f7fb -> a touch lighter, near-white label, still high
       A named colour (or --hero-accent, the obvious choice) would have inverted on the light tone:
       a pale accent under the light hero's near-white ink is white-on-pale.

       The INK is deliberately unchanged — "neither recolours the text" in the both-or-neither
       rule. Contrast can only fall by the 12% mix, never invert. */

    /* SUPERSEDED 2026-09-06: THE HERO CTA NOW INVERTS TO AN OUTLINE, on the owner's ruling that
       every body call-to-action is solid at rest and an outline on hover.

       The 12% color-mix above was solving the right problem the hard way. It existed because a
       NAMED hover colour is unsafe here: the hero flips tone, so any fixed colour is wrong on one
       of the two. The inversion has that property for free, and more cleanly — because
       --hero-ink IS the button's own fill and --hero-scrim IS its own label, dropping the fill and
       promoting --hero-ink to the border AND the label works on both tones without naming a
       colour at all:
         dark hero  — --hero-ink #fff    -> transparent face, white border, white label on a dark band
         light hero — --hero-ink #071b33 -> transparent face, navy border, navy label on a light band
       It can never invert to low contrast, because the ink it adopts is the colour that was
       already legible against that band as the fill.

       The shadow goes with the fill: `0 12px 28px rgba(0,0,0,.25)` under a transparent face casts
       from nothing. The lift stays — that is motion, not colour. */
    background: transparent;
    border-color: var(--hero-ink);
    box-shadow: none;
}
/* Same pin for the hover states — a page anchor reset written `:where(a):hover` would be (0,2,0)
   and tie the single-class hover rules above in exactly the same way. */
/* THE INVERTED LABEL HAS TO BE DECLARED HERE, not only in the (0,1,0) hover rule above.
   This pin is (0,2,0) and exists to outrank page-scoped `:where(a):hover` resets — which means it
   also outranks the hover rule above. Left saying `--hero-scrim`, it would have pinned the RESTING
   label colour onto the inverted face: --hero-scrim is the fill's counterpart, so on a dark hero
   that is navy-on-transparent over a dark band, i.e. an invisible label. The ink and the fill are
   one decision and both halves live at the specificity that actually wins. */
.bcfc-hero .bcfc-hero__cta-primary:hover,
.bcfc-hero .bcfc-hero__cta-primary:focus-visible {
    color: var(--hero-ink);
}
.bcfc-hero .bcfc-hero__cta-secondary:hover,
.bcfc-hero .bcfc-hero__cta-secondary:focus-visible {
    color: var(--hero-ink);
}

/* THE LIGHT-TONE "KEEP A FILL" EXCEPTION IS REMOVED, owner's reversal 2026-10-01. It existed
   because the 2026-09-07 ruling ("if background is not white the text cannot be black so it
   should be white") read the inversion's navy-on-pale-band result as a violation — correctly, by
   that ruling's letter, even though it measured 16:1 and was fully legible. The owner now wants
   every primary CTA, light hero or dark, to invert the same way (matching .bcfc-btn--primary's
   own 2026-10-01 reversal in bcfc-button.css), so this override is gone and the base
   `.bcfc-hero__cta-primary:hover` rule above — transparent face, --hero-ink border, --hero-ink
   label — now applies on BOTH tones:
     DARK hero  — --hero-ink #fff    -> transparent face, white border, white label. UNCHANGED.
     LIGHT hero — --hero-ink #071b33 -> transparent face, navy border, navy label. Was overridden
                  to a deepened fill before this change; now matches the dark-hero pattern. */
/* The comp's ghost button: a 30% rule, not 60% — at 60% it reads as a second filled
   button next to the primary rather than as the quieter of the pair. */
.bcfc-hero__cta-secondary {
    border-color: color-mix(in srgb, var(--hero-ink) 30%, transparent);
    color: var(--hero-ink);
    background: transparent;
}
.bcfc-hero__cta-secondary:hover,
.bcfc-hero__cta-secondary:focus-visible {
    text-decoration: none;
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--hero-ink) 55%, transparent);
    background: color-mix(in srgb, var(--hero-ink) 10%, transparent);
    color: var(--hero-ink);
}

/* ---- the stat / credential strip --------------------------------------------------- */
.bcfc-hero__strip {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 48px);
    margin-block: 34px 0;
    padding-block-start: 26px;
    border-block-start: 1px solid color-mix(in srgb, var(--hero-ink) 22%, transparent);
}
.bcfc-hero__strip-value {
    font-family: 'Almarai', system-ui, sans-serif;
    font-size: clamp(1.375rem, 2.4vw, 1.875rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--hero-ink);
}
/* statValue standing in for a phrase with no statLabel: drop to pill-sized type instead of the
   big hero-stat digits, so a workaround entry doesn't read as a giant misplaced number. */
.bcfc-hero__strip-value--no-label {
    font-size: clamp(0.875rem, 1.3vw, 1rem);
    font-weight: 700;
    line-height: 1.35;
}
/* The optional icon chip on a strip value. Sits INSIDE the dt (a dl permits only dt/dd), so it is
   an inline-grid rather than a block. */
.bcfc-hero__strip-icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-inline-end: 10px;
    border-radius: 10px;
    vertical-align: middle;
    background: color-mix(in srgb, var(--hero-ink) 12%, transparent);
    color: var(--hero-accent);
}
.bcfc-hero__strip-icon .material-icons-outlined { font-size: 1.1875rem; }
.bcfc-hero__strip-label {
    margin: 6px 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--bcfc-dark-ink-muted, var(--hero-ink-dim));
    max-width: 22ch;
}

/* ---- the visual column ------------------------------------------------------------- */
.bcfc-hero__visual { position: relative; }
.bcfc-hero__visual-img {
    display: block;
    width: 100%;
    height: auto;
    /* NOT object-fit:cover by default. Card artwork here is 2000x3091 PORTRAIT (ratio
       .647), and a cover fit inside a landscape box crops it to a black strip. */
    object-fit: contain;
}

/* ---- image slides: the backdrop stack and the image-column carousel --------------------
   Driven by wwwroot/js/bcfc-hero-slides.js, which only toggles `.on`. The first slide is `.on`
   in the server markup, so with scripts off the hero is one finished picture.

   BACKDROP: the stack fills the .bcfc-hero__bg wrapper and the slides are stacked absolutely,
   so the band keeps the height its preset gives it whatever the pictures' own ratios are.
   COLUMN: the slides share ONE grid cell, so the column is as tall as the tallest picture and
   nothing jumps when they cross-fade. */
.bcfc-hero__slides { position: relative; }
.bcfc-hero__bg > .bcfc-hero__slides {
    position: absolute;
    inset: 0;
}
.bcfc-hero__slide {
    opacity: 0;
    transition: opacity 1.2s ease;
}
.bcfc-hero__slide.on { opacity: 1; }
.bcfc-hero__bg .bcfc-hero__slide {
    position: absolute;
    inset: 0;
}
.bcfc-hero__slide-dots {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0.75rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    z-index: 1;
}
.bcfc-hero__slide-dot {
    inline-size: 0.625rem;
    block-size: 0.625rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--hero-ink-dim);
    cursor: pointer;
}
.bcfc-hero__slide-dot[aria-current="true"] { background: var(--hero-ink); }
.bcfc-hero__slide-dot:focus-visible {
    outline: 2px solid var(--hero-ink);
    outline-offset: 2px;
}

/* ---- responsive -------------------------------------------------------------------- */
@media (max-width: 900px) {
    .bcfc-hero { --hero-min-h: auto; }
    .bcfc-hero--split .bcfc-hero__inner { grid-template-columns: minmax(0, 1fr); }
    /* Copy first on a phone, whatever the source order says. */
    .bcfc-hero--split .bcfc-hero__visual { order: 2; }
    .bcfc-hero--split-left .bcfc-hero__inner { grid-template-columns: minmax(0, 1fr); }
    .bcfc-hero--split-left .bcfc-hero__copy { order: 0; }
    .bcfc-hero--split-left .bcfc-hero__inner > :not(.bcfc-hero__copy):not(.bcfc-hero-chrome__trail):not(.bcfc-page-tabs) { order: 2; }
    .bcfc-hero__copy { max-width: none; }
}
/* The comp's phone step: the headline gets PROPORTIONALLY larger on a narrow viewport
   (9vw against 6.4vw) because it is the only thing on the screen, and the lead grows with
   it. Only the two large presets — a compact utility header has no room for it. */
@media (max-width: 720px) {
    .bcfc-hero--h-tall,
    .bcfc-hero--h-full {
        /* Trimmed 40-60px -> 36-52px on 2026-09-01, in step with the desktop cut above. */
        --hero-title-size: clamp(36px, 8vw, 52px);
        --hero-lead-size: 18px;
    }
}

/* PHONE CTA STEP (2026-10-15, owner: "huge buttons on mobile"). The desktop pill — 16px type,
   .95rem/1.7rem padding, 56px tall — took ~70% of a 360px screen per button and wrapped a
   two-word label onto a second line as soon as the phone's text size was raised. Smaller type
   and padding only; min-height stays at the 44px touch floor, and labels still wrap at spaces
   (never mid-word) if they must. */
@media (width < 576px) {
    .bcfc-hero__cta-row {
        gap: 10px;
        margin-block-start: 26px;
    }
    .bcfc-hero__cta-primary,
    .bcfc-hero__cta-secondary {
        gap: 7px;
        padding: .7rem 1.15rem;
        font-size: .875rem;
        border-radius: 10px;
    }
    .bcfc-hero__cta-primary .material-icons-outlined,
    .bcfc-hero__cta-secondary .material-icons-outlined { font-size: 1.0625rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bcfc-hero * { transition: none !important; }
    /* The rings still SHOW — only the motion stops — because they are part of the
       composition, not an entrance effect. Both halves of "stops correctly" live on the base
       rules rather than here, so this query cannot drift out of step with the over-a-photograph
       freeze: each orbit's dot RESTS at a point inside the band (.bcfc-hero__orbit--*), and the
       glow rests at the quiet end of its cycle (.bcfc-hero__pulse). Before 2026-09-09 neither
       was true here — a reduced-motion visitor lost two of the three dots off the top edge and
       got the glow frozen at its peak. */
    .bcfc-hero__ring,
    .bcfc-hero__orbit,
    .bcfc-hero__pulse { animation: none; }
    .bcfc-hero__cta-primary:hover,
    .bcfc-hero__cta-secondary:hover { transform: none; }
}

/* ============================================================================
   COMPOSITION-DRIVEN KNOBS
   ============================================================================
   Everything an editor can change about a hero from the backoffice lands here, and
   it all lands as a TOKEN or a MODIFIER CLASS — never as a new rule. That is the
   whole reason the layer above is written token-first: a new customisation option
   on bcfcHeroDesignComposition2 should need a field and a line in the partial, not CSS.

   Set by _PageHero.cshtml as inline custom properties on the band, each emitted only
   when the editor actually filled the field in:

     heroSurfaceColour     -> --hero-surface + --hero-scrim   band, scrim, primary CTA ink
     heroAccentColour      -> --hero-accent         accent clause, kicker rule, ornament
     heroInkColour         -> --hero-ink            copy
     heroOverlayStrength   -> --hero-overlay-alpha  0-100, scrim opacity
     heroMinHeight         -> --hero-min-h          overrides heroHeight's floor
     heroBackgroundFocus   -> --hero-bg-pos         object-position of the photograph
     heroTextMaxWidth      -> --hero-copy-width     copy column measure

   An inline custom property beats every rule above without !important and without
   raising specificity anywhere, so none of this fights the cascade.
   ============================================================================ */
.bcfc-hero {
    --hero-overlay-alpha: 1;
    /* THE TWO AXES ARE SEPARATE PROPERTIES, and that is load-bearing. The horizontal one is
       mirrored in Arabic and the vertical one is not, so a page that needs to move the crop
       UP cannot do it by redeclaring `--hero-bg-pos` — that would also freeze the X at one
       direction's value and put the subject back behind the other direction's copy. Only ever
       override the axis you mean. `--hero-bg-pos` is still the single property the editor
       field writes, so a hand-picked heroBackgroundFocus keeps beating both. */
    --hero-bg-pos-x: 72%;
    --hero-bg-pos-y: center;
    /* The comp's focal point: the copy occupies the start edge, so the photograph is
       pulled toward the far one and the subject stays out from behind the text. */
    --hero-bg-pos: var(--hero-bg-pos-x) var(--hero-bg-pos-y);
}
.bcfc-hero__bg-img,
.bcfc-hero__bg-video { object-position: var(--hero-bg-pos); }
/* Mirrored in Arabic, where the copy moves to the other edge — otherwise the subject ends
   up directly behind the headline. Overridden by heroBackgroundFocus when an editor sets
   one, which is correct: a hand-picked focal point is a deliberate answer to this. */
[dir="rtl"] .bcfc-hero { --hero-bg-pos-x: 28%; }

/* A `center` VERTICAL anchor decapitates a wide portrait, and every BCFC people photograph is
   one. Measured on CEO-Banner.jpg (2000×1037, head top at y≈90): a `standard` band is 460px
   tall, so at a 1440px viewport `object-fit: cover` scales the file by 0.72 to 747px and
   discards 287px of it — 143px off the top with `center`, which is source y≈199, i.e. below
   the subject's eyes. The head was cut off in both cultures.

   So the vertical anchor is a MODIFIER, not a new default: heroes whose artwork has its
   subject in the middle (most of the estate) are unchanged, and a hero whose subject stands
   in the upper band opts in. These set Y only, so the Arabic X mirroring above survives. An
   editor who wants a different point still overrides both axes with heroBackgroundFocus. */
.bcfc-hero--focus-top { --hero-bg-pos-y: top; }
.bcfc-hero--focus-upper { --hero-bg-pos-y: 12%; }
.bcfc-hero--focus-lower { --hero-bg-pos-y: 88%; }
.bcfc-hero--focus-bottom { --hero-bg-pos-y: bottom; }

/* The CEO's Message signature carries one, because the byline treatment and the standing
   portrait it is designed around arrive together — the modifier is set on exactly that one
   page (see the note above .bcfc-hero--byline). A second page adopting the byline with a
   centred photograph should drop this by setting heroBackgroundFocus on its own hero. */
.bcfc-hero--byline { --hero-bg-pos-y: 12%; }

/* THE PORTRAIT IS MIRRORED IN ARABIC, and the X anchor above cannot do this job. That anchor
   only bites when the photograph is WIDER than its box: CEO-Banner.jpg is 1.93:1 in a 3.1:1
   band, so `cover` scales it by width and there is no horizontal slack to slide — `28%` and
   `72%` compute to the same pixels at every desktop width. Measured on beta: the subject
   stands in the right third, Arabic copy occupies the right, and he sat behind the headline
   while the left half of the frame showed empty lobby. Approved by the product owner
   2026-09-21 in preference to commissioning a second, left-weighted Arabic artwork.

   Scoped to the byline hero rather than applied to every RTL backdrop: flipping a photograph
   of a real person moves the ghutra and the shoulder drape to the other side, which is a
   decision per image, not a site-wide rule. The scrim, the copy and the ornaments are NOT
   flipped — only the <img> — so nothing legible is reversed. */
[dir="rtl"] .bcfc-hero--byline .bcfc-hero__bg-img { transform: scaleX(-1); }

/* ARABIC, ALL WIDTHS: marketing has since given Arabic its OWN artwork (ceo-banner-02.jpg, the
   CEO already standing on the left, clear of the right-hand Arabic copy), so the mirror above would
   flip it back behind the headline. Dropped everywhere. On a phone the photo is scaled by height,
   so only the X anchor matters: 42% seats his face in the free left side of the one band. */
@media (min-width: 768px) {
  [dir="rtl"] .bcfc-hero--byline .bcfc-hero__bg-img { transform: none; }
}
@media (width < 768px) {
  [dir="rtl"] .bcfc-hero--byline .bcfc-hero__bg-img { transform: none; object-position: 42% 0%; }
}

/* Scrim strength as OPACITY rather than as alpha inside the gradient stops: the
   gradient is a five-stop ramp, so making it editor-adjustable stop-by-stop would need
   five more color-mix() calls and would still not be adjustable as one number. Opacity is
   one value and it composes with the tone variants for free. */
.bcfc-hero__scrim { opacity: var(--hero-overlay-alpha); }

/* COPY ALIGNMENT, independent of the variant — a banner hero can still centre its copy
   without becoming the centred variant (which also centres the visual column). */
.bcfc-hero--align-start .bcfc-hero__copy { margin-inline: 0 auto; text-align: start; }
.bcfc-hero--align-centre .bcfc-hero__copy { margin-inline: auto; text-align: center; }
.bcfc-hero--align-centre .bcfc-hero__cta-row,
.bcfc-hero--align-centre .bcfc-hero__strip { justify-content: center; }
.bcfc-hero--align-end .bcfc-hero__copy { margin-inline: auto 0; text-align: end; }
.bcfc-hero--align-end .bcfc-hero__cta-row,
.bcfc-hero--align-end .bcfc-hero__strip { justify-content: flex-end; }

/* PRE-COMPOSED ARTWORK. The single most important option here, and the one an editor
   will reach for most on this site: BCFC banner artwork ships with the headline already
   baked into the image. A scrim over one of those only dims the designer's work, and a
   copy column on top of it double-prints the headline. heroShowOverlay=false omits the
   scrim in the partial; this rule also drops the band's own colour so the artwork is
   shown exactly as supplied, and lets it set the height instead of being cropped to a
   min-height. */
.bcfc-hero--no-overlay {
    background: transparent;
    --hero-min-h: auto;
}
.bcfc-hero--no-overlay .bcfc-hero__bg { position: relative; background: transparent; }
.bcfc-hero--no-overlay .bcfc-hero__bg-img { height: auto; object-fit: contain; }
/* With the backdrop in flow, the copy has to be lifted back over it. */
.bcfc-hero--no-overlay .bcfc-hero__inner {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* …and when there is no copy at all — the normal case for baked-in artwork — the band is
   just the picture, at its own aspect ratio.

   IT KEEPS ITS HEADER CLEARANCE. This rule used to set `padding-block-start: 0` so the picture ran
   to the very top of the page, and that is precisely the case where it hurts most: BCFC banner
   artwork ships with the headline baked into the image, so the top ~104px of it — the headline —
   ended up behind the position:fixed glass nav. A full-bleed picture is still full-bleed to the
   left, right and bottom; the only thing reserved is the strip the nav occupies. */
.bcfc-hero--no-overlay:not(:has(.bcfc-hero__title)):not(:has(.bcfc-hero__lead)) {
    display: block;
}

/* ----------------------------------------------------------------------------
   CYCLE CHIPS — the optional pill row under the lead, one chip per line of the
   heroChips Textarea. Added 2026-09-09 for the approved Strategic Review hero,
   whose design draws two labelled pills ("2023–2025 · Delivered" /
   "2026–2030 · Next cycle"). Every other page leaves heroChips empty and emits
   nothing, so no existing hero moves.

   Inks come from the hero's own scoped tokens (--hero-ink / --hero-ink-dim /
   --hero-accent), NOT from :root and not from hex literals, so a chip follows
   the hero's tone the same way the eyebrow and support lines already do — and
   it stays legible on the light tone as well as the dark one.

   Logical properties throughout (margin-block, padding-inline, border-inline)
   so the Arabic hero needs no RTL override: this file is bundled into both
   bundle-main and bundle-main-rtl.
   ---------------------------------------------------------------------------- */


/* The approved comp draws a small status dot before each label (its .ct > .dot).
   Emitted as a pseudo-element rather than a nested span so the CMS value stays
   plain text -- one chip per line, no markup for an editor to get wrong.
   The comp tints .ct.past and .ct.next differently; one Textarea cannot express
   which chip is which, so both dots take the hero accent. That is the one
   deliberate simplification against the design here. */

/* A chip mixes Latin year ranges with Arabic words, so it may need to wrap on a
   narrow screen even though the desktop design never does. */