/* =====================================================================
   Our Businesses (/subsidiaries/, /ar/subsidiaries/) — "Three sectors. One group."
   AS Group opens the page (hero index) and closes it (Ink closing band that runs into the footer).
   Each sector is an editorial chapter on its own ground: Soft Stone → Deep Ink → Warm Ivory.
   ===================================================================== */
.bh-eyebrow { display: block; margin: 0 0 14px; font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); }

/* ---------- hero: compact statement + the Group's three-sector index ---------- */
.bh-hero { padding: 56px 0 52px; background: var(--ivory); }
.bh-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 32px 80px; }
.bh-hero__title { max-width: 18ch; margin: 0 0 16px; font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-heading); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.bh-hero__intro { max-width: 60ch; margin: 0; font-size: var(--fs-body); line-height: 1.7; color: var(--grey); }
.bh-map { padding-inline-start: 28px; border-inline-start: 1px solid var(--border); }
.bh-map__root { display: block; width: 116px; height: auto; margin-bottom: 14px; }
.bh-map__list { margin: 0; padding: 0; list-style: none; }
.bh-map__list a {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px; align-items: center; padding: 11px 0;
    border-top: 1px solid var(--border); color: var(--ink); text-decoration: none; font-size: var(--fs-small); font-weight: 500;
}
.bh-map__arrow { font-size: .75rem; color: var(--bronze); transition: transform .3s var(--ease); }
.bh-map__list a:hover .bh-map__arrow { transform: translateY(3px); }
.bh-map__num { font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; color: var(--bronze); font-variant-numeric: tabular-nums; }

/* ---------- chapters ---------- */
.bh-chapter { padding: 88px 0 96px; scroll-margin-top: 80px; }
.bh-chapter--stone { background: var(--stone); }
.bh-chapter--ivory { background: var(--ivory); }
.bh-chapter--ink { background: var(--ink); color: var(--ivory); }
.bh-chapter__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 16px 80px; margin-bottom: 36px; }
.bh-chapter__id { display: grid; gap: 14px; }
.bh-chapter__num { display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; color: var(--bronze); font-variant-numeric: tabular-nums; }
.bh-chapter__num::after { content: ""; width: 32px; height: 1px; background: var(--bronze); }
.bh-chapter__title { margin: 0; font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-heading); letter-spacing: -0.02em; color: inherit; text-wrap: balance; }
.bh-chapter--stone .bh-chapter__title, .bh-chapter--ivory .bh-chapter__title { color: var(--ink); }
.bh-chapter__text { max-width: 44ch; margin: 0; font-size: var(--fs-small); line-height: 1.7; color: var(--grey); }
.bh-chapter--ink .bh-chapter__text { color: rgba(246, 245, 241, .66); }

/* ---------- shared tile type ---------- */
.bh-tile, .bh-tricore, .bh-brand, .bh-africana__parent { color: inherit; text-decoration: none; }
.bh-tile__name { margin: 0 0 8px; font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.bh-tile__text { display: block; max-width: 46ch; font-size: var(--fs-small); line-height: 1.6; }
.bh-tile__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: var(--fs-small); font-weight: 600; }
.bh-tile__cta i { color: var(--bronze); transition: transform .3s var(--ease); }
a:hover .bh-tile__cta i, a:focus-visible .bh-tile__cta i { transform: translateX(4px); }
[dir="rtl"] a:hover .bh-tile__cta i, [dir="rtl"] a:focus-visible .bh-tile__cta i { transform: translateX(-4px); }
.bh-tile:focus-visible, .bh-tricore:focus-visible, .bh-brand:focus-visible, .bh-africana__parent:focus-visible, .bh-map__list a:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }

/* ---------- 01 · Real Estate: one featured destination + two supporting businesses ---------- */
.bh-re { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; height: clamp(540px, 42vw, 640px); }
.bh-tile { position: relative; display: flex; overflow: hidden; border-radius: 12px; isolation: isolate; }
.bh-tile--feature { grid-row: 1 / span 2; }
.bh-tile__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.bh-tile:hover .bh-tile__img { transform: scale(1.035); }
.bh-tile__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21, 23, 22, 0) 30%, rgba(21, 23, 22, .55) 62%, rgba(21, 23, 22, .9) 100%); }
.bh-tile__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; width: 100%; padding: 32px 36px; color: var(--ivory); }
.bh-tile--feature .bh-tile__content { padding: 40px 44px; }
.bh-tile__content .bh-tile__text { color: rgba(246, 245, 241, .78); }
.bh-tile__logo { display: block; width: auto; height: auto; margin-bottom: 18px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); }
.bh-tile__logo--alwahda { height: 104px; }
.bh-tile__logo--vl { height: 58px; }
/* Rowdhat: no photography in the approved set, so the official logo carries the tile on a clean white field */
.bh-tile--field { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--ivory); }
.bh-tile__logofield { display: flex; align-items: center; justify-content: center; padding: 20px; background: #fff; }
.bh-tile__logofield img { display: block; width: 100%; max-width: 190px; height: auto; transition: transform .8s var(--ease); }
.bh-tile--field:hover .bh-tile__logofield img { transform: scale(1.03); }
.bh-tile--field .bh-tile__content { justify-content: center; padding: 28px 32px; color: var(--ink); }
.bh-tile--field .bh-tile__text { color: var(--grey); }

/* ---------- 02 · Technical Services: one wide feature on Deep Ink ---------- */
.bh-tricore { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); min-height: 380px; overflow: hidden; border-radius: 12px; background: var(--graphite); }
.bh-tricore__visual { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #0E0E0E; color: rgba(246, 245, 241, .5); }
.bh-tricore__plan { position: absolute; inset: 0; width: 100%; height: 100%; }
.bh-tricore__runs { color: var(--bronze); opacity: .55; }
.bh-tricore__mark { position: relative; display: block; width: min(46%, 230px); height: auto; transition: transform .9s var(--ease); }
.bh-tricore:hover .bh-tricore__mark { transform: scale(1.03); }
.bh-tricore__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 44px 48px; }
.bh-tricore__body .bh-tile__text { color: rgba(246, 245, 241, .72); }
.bh-tricore__disciplines { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 0 32px; margin-top: 22px; }
.bh-tricore__disciplines span { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(246, 245, 241, .12); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .02em; color: var(--ivory); }
.bh-tricore__disciplines span::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); border: 1px solid var(--bronze); }

/* ---------- 03 · Restaurant Management: Africana holds its brands ---------- */
.bh-africana { padding: 16px; border-radius: 16px; background: var(--stone); }
.bh-africana__parent { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; overflow: hidden; border-radius: 12px; background: var(--ink); color: var(--ivory); }
.bh-africana__logo { display: flex; align-items: center; justify-content: center; align-self: stretch; padding: 28px 36px; background: #fff; }
.bh-africana__logo img { display: block; width: 100%; max-width: 280px; height: auto; transition: transform .8s var(--ease); }
.bh-africana__parent:hover .bh-africana__logo img { transform: scale(1.03); }
.bh-africana__body { display: flex; flex-direction: column; align-items: flex-start; padding: 36px 44px; }
.bh-africana__name { margin: 0 0 10px; font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-heading); letter-spacing: -0.02em; }
.bh-africana__body .bh-tile__text { color: rgba(246, 245, 241, .74); }
.bh-africana__within { display: flex; align-items: center; gap: 12px; margin: 22px 8px 14px; font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); }
.bh-africana__within::before { content: ""; width: 24px; height: 1px; background: var(--bronze); }
.bh-africana__brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bh-brand { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: var(--ivory); transition: box-shadow .35s var(--ease); }
.bh-brand:hover { box-shadow: 0 18px 36px -24px rgba(21, 23, 22, .4); }
.bh-brand__media { display: block; overflow: hidden; aspect-ratio: 16 / 8; background: var(--graphite); }
.bh-brand__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.bh-brand:hover .bh-brand__media img { transform: scale(1.035); }
.bh-brand__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 0 28px 26px; }
.bh-brand__logo { display: flex; align-items: center; justify-content: center; width: 96px; height: 80px; margin: -44px 0 16px; padding: 8px; border-radius: 8px; background: #fff; box-shadow: 0 10px 24px -14px rgba(21, 23, 22, .5), inset 0 0 0 1px var(--border); }
.bh-brand__logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.bh-brand__name { margin: 0 0 6px; font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }
.bh-brand__text { display: block; max-width: 46ch; font-size: var(--fs-small); line-height: 1.6; color: var(--grey); }
.bh-brand .bh-tile__cta { margin-top: auto; padding-top: 16px; color: var(--ink); }

/* ---------- closing: AS Group, running straight into the footer ---------- */
.bh-close { padding: 80px 0 72px; background: var(--ink); color: var(--ivory); border-bottom: 1px solid rgba(246, 245, 241, .08); }
.bh-close__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px 56px; }
.bh-close__mark { display: block; width: 150px; height: auto; padding-inline-end: 56px; border-inline-end: 1px solid rgba(246, 245, 241, .14); box-sizing: content-box; }
.bh-close__title { margin: 0 0 8px; font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-heading); letter-spacing: -0.02em; color: var(--ivory); text-wrap: balance; }
.bh-close__lead { max-width: 52ch; margin: 0; font-size: var(--fs-small); line-height: 1.7; color: rgba(246, 245, 241, .68); }
.bh-close__btn { white-space: nowrap; }
.bh-close__btn i { margin-inline-start: 6px; }
/* the site footer follows on the same Ink: the band reads as its opening, not as a separate block */
.bh-close + * { margin-top: 0; }

/* ---------- tablet ---------- */
@media (max-width: 1199px) {
    .bh-re { height: clamp(500px, 52vw, 580px); }
    .bh-tile--field { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
    .bh-tricore__body { padding: 36px 40px; }
    .bh-close__inner { grid-template-columns: minmax(0, 1fr) auto; }
    .bh-close__mark { grid-column: 1 / -1; padding: 0; border: 0; width: 132px; }
}
@media (max-width: 991px) {
    .bh-hero__grid, .bh-chapter__head { grid-template-columns: minmax(0, 1fr); }
    .bh-map { padding-inline-start: 0; border-inline-start: 0; }
    .bh-map__root { display: none; }
    .bh-chapter { padding: 64px 0 72px; }
    .bh-re { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 380px 280px; height: auto; }
    .bh-tile--feature { grid-row: auto; grid-column: 1 / -1; }
    .bh-tile--field { grid-template-columns: minmax(0, 1fr); grid-template-rows: 130px minmax(0, 1fr); }
    .bh-tile--field .bh-tile__content { justify-content: flex-start; padding: 20px 24px; }
    .bh-tricore { grid-template-columns: minmax(0, 1fr); }
    .bh-tricore__visual { min-height: 240px; }
    .bh-africana__parent { grid-template-columns: minmax(0, 1fr); }
    .bh-africana__logo { padding: 24px; }
    .bh-africana__logo img { max-width: 220px; }
}

/* ---------- 390px: composed for the phone, not a stacked desktop ---------- */
@media (max-width: 575px) {
    .bh-hero { padding: 32px 0 28px; }
    .bh-hero__title { margin-bottom: 12px; }
    .bh-hero__grid { gap: 22px; }
    .bh-map__list a { padding: 10px 0; }
    .bh-chapter { padding: 44px 0 48px; }
    .bh-chapter__head { gap: 10px; margin-bottom: 22px; }
    .bh-chapter__id { gap: 10px; }
    .bh-tile__name { font-size: 1.125rem; margin-bottom: 6px; }
    .bh-tile__text, .bh-brand__text { font-size: var(--fs-xs); }
    .bh-tile__cta { margin-top: 12px; }
    /* real estate: feature on top, then a photo tile and a slim logo tile */
    .bh-re { grid-template-columns: minmax(0, 1fr); grid-template-rows: 340px 240px auto; gap: 10px; }
    .bh-tile__content, .bh-tile--feature .bh-tile__content { padding: 22px 20px; }
    .bh-tile__logo--alwahda { height: 76px; margin-bottom: 14px; }
    .bh-tile__logo--vl { height: 44px; margin-bottom: 12px; }
    .bh-tile--field { grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: auto; }
    .bh-tile__logofield { padding: 12px; }
    .bh-tile--field .bh-tile__content { justify-content: center; padding: 18px 18px; }
    /* technical */
    .bh-tricore__visual { min-height: 190px; }
    .bh-tricore__mark { width: 128px; }
    .bh-tricore__body { padding: 24px 20px 24px; }
    .bh-tricore__disciplines { gap: 0 20px; margin-top: 16px; }
    /* restaurants: Africana frame keeps its brands side by side */
    .bh-africana { padding: 10px; border-radius: 14px; }
    .bh-africana__logo { padding: 16px; }
    .bh-africana__logo img { max-width: 170px; }
    .bh-africana__body { padding: 22px 20px 24px; }
    .bh-africana__name { font-size: 1.375rem; }
    .bh-africana__within { margin: 16px 6px 10px; }
    .bh-africana__brands { gap: 10px; }
    .bh-brand__media { aspect-ratio: 4 / 3; }
    .bh-brand__body { padding: 0 14px 16px; }
    .bh-brand__logo { width: 64px; height: 56px; margin: -30px 0 10px; padding: 6px; }
    .bh-brand__name { font-size: 1rem; }
    .bh-brand__text { display: none; }   /* each brand page carries its full description */
    .bh-brand .bh-tile__cta { padding-top: 10px; font-size: var(--fs-xs); }
    /* closing */
    .bh-close { padding: 48px 0 44px; }
    .bh-close__inner { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .bh-close__mark { width: 112px; }
    .bh-close__btn { justify-self: start; }
}

/* ---------- Arabic ---------- */
[dir="rtl"] .bh-eyebrow, [dir="rtl"] .bh-africana__within { letter-spacing: 0; text-transform: none; }
[dir="rtl"] .bh-hero__title, [dir="rtl"] .bh-chapter__title, [dir="rtl"] .bh-close__title, [dir="rtl"] .bh-africana__name { letter-spacing: 0; line-height: 1.45; }
[dir="rtl"] .bh-tile__name, [dir="rtl"] .bh-brand__name { letter-spacing: 0; line-height: 1.5; }
[dir="rtl"] .bh-hero__intro, [dir="rtl"] .bh-chapter__text, [dir="rtl"] .bh-tile__text, [dir="rtl"] .bh-brand__text, [dir="rtl"] .bh-close__lead { line-height: 1.85; }
[dir="rtl"] .bh-tricore__disciplines span { letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
    .bh-tile__img, .bh-tile__logofield img, .bh-tricore__mark, .bh-africana__logo img, .bh-brand__media img, .bh-tile__cta i, .bh-brand, .bh-map__arrow { transition: none; }
    .bh-tile:hover .bh-tile__img, .bh-brand:hover .bh-brand__media img, .bh-tricore:hover .bh-tricore__mark, .bh-africana__parent:hover .bh-africana__logo img, .bh-tile--field:hover .bh-tile__logofield img { transform: none; }
}

/* headings on dark grounds (the global h1–h5 colour is Ink) */
.bh-tile__content .bh-tile__name, .bh-tricore .bh-tile__name, .bh-africana__name { color: var(--ivory); }
.bh-tile--field .bh-tile__name { color: var(--ink); }
/* on Deep Ink the primary button inverts to ivory, as elsewhere on the site */
.bh-close .btn-gold { display: inline-flex; align-items: center; background: var(--ivory); color: var(--ink); }
.bh-close .btn-gold:hover { background: var(--stone); color: var(--ink); }
.bh-tile__logo--vl { height: 76px; }
@media (max-width: 575px) { .bh-tile__logo--vl { height: 52px; } }
/* Vertical Line: a bright daytime facade, so the shade comes in from the text side as well as the bottom */
.bh-tile--photo .bh-tile__shade {
    background: linear-gradient(to right, rgba(21, 23, 22, .9) 0%, rgba(21, 23, 22, .72) 42%, rgba(21, 23, 22, .18) 100%),
                linear-gradient(180deg, rgba(21, 23, 22, 0) 45%, rgba(21, 23, 22, .5) 100%);
}
[dir="rtl"] .bh-tile--photo .bh-tile__shade {
    background: linear-gradient(to left, rgba(21, 23, 22, .9) 0%, rgba(21, 23, 22, .72) 42%, rgba(21, 23, 22, .18) 100%),
                linear-gradient(180deg, rgba(21, 23, 22, 0) 45%, rgba(21, 23, 22, .5) 100%);
}
.bh-tile--photo .bh-tile__content { max-width: 78%; }
.bh-africana__logo { background: #FEFCFB; }   /* the Africana artwork's own ground, so its edges disappear */
@media (max-width: 575px) {
    .bh-tile--photo .bh-tile__content { max-width: none; }
    .bh-tile--photo .bh-tile__shade, [dir="rtl"] .bh-tile--photo .bh-tile__shade { background: linear-gradient(180deg, rgba(21, 23, 22, .35) 0%, rgba(21, 23, 22, .6) 45%, rgba(21, 23, 22, .92) 100%); }
}

/* Tricore: photography-led (MEP plant room); a light shade toward the text panel keeps the join soft */
.bh-tricore__visual { background: var(--graphite); }
.bh-tricore__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform 1.1s var(--ease); }
.bh-tricore:hover .bh-tricore__img { transform: scale(1.035); }
.bh-tricore__shade { position: absolute; inset: 0; background: linear-gradient(to right, rgba(21, 23, 22, .08) 0%, rgba(21, 23, 22, .18) 70%, rgba(36, 39, 37, .55) 100%); }
[dir="rtl"] .bh-tricore__shade { background: linear-gradient(to left, rgba(21, 23, 22, .08) 0%, rgba(21, 23, 22, .18) 70%, rgba(36, 39, 37, .55) 100%); }
.bh-tricore { min-height: 420px; }
@media (max-width: 991px) {
    .bh-tricore__visual { min-height: 300px; }
    .bh-tricore__shade, [dir="rtl"] .bh-tricore__shade { background: linear-gradient(180deg, rgba(21, 23, 22, .05) 0%, rgba(21, 23, 22, .12) 65%, rgba(36, 39, 37, .6) 100%); }
}
@media (max-width: 575px) { .bh-tricore__visual { min-height: 236px; } .bh-tricore { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .bh-tricore__img { transition: none; } .bh-tricore:hover .bh-tricore__img { transform: none; } }
/* official Tricore mark above the name, on the Graphite panel it was drawn for (not on the photograph) */
.bh-tricore__logo { display: block; width: auto; height: 92px; margin-bottom: 20px; }
@media (max-width: 575px) { .bh-tricore__logo { height: 68px; margin-bottom: 14px; } }

/* Africana brand cards — layering fix: the hover scale gives the photo its own stacking context, which used to
   paint it over the (unpositioned) logo badge. Explicit order: photo (1) < card body (2) < logo badge (10).
   The transform stays on the <img> only, clipped by its wrapper. */
.bh-brand { position: relative; isolation: isolate; }
.bh-brand__media { position: relative; z-index: 1; }
.bh-brand__body { position: relative; z-index: 2; }
.bh-brand__logo { position: relative; z-index: 10; }
/* touch screens: no hover zoom, so a tap can never leave a card stuck in its hover state */
@media (hover: none) {
    .bh-brand:hover .bh-brand__media img { transform: none; }
    .bh-brand:hover { box-shadow: none; }
}