/* Bin Omairah Future theme — homepage.
   Uses the site's real brand tokens (public/assets/css/brand.css),
   already loaded globally: --boh-gold, --boh-gold-2, --boh-slate,
   --boh-slate-dark, --boh-charcoal, --boh-charcoal-dark. */

/* Licensed Optima webfont, self-hosted (matching how mgc.com.sa itself
   serves Optima — a real embedded .woff2, not a system-font reference).
   Optima has no Arabic glyphs, so `--font-display` always lists 'Cairo'
   second — the browser resolves each character against the first font
   that contains it, so Latin text renders in Optima and Arabic
   automatically falls through to Cairo with no separate per-locale rule
   needed. Applied site-wide as the global Display/H1/H2/H3 typeface —
   see the typography tokens below. */
@font-face {
    font-family: 'Optima';
    src: url('/assets/fonts/optima/Optima-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Optima';
    src: url('/assets/fonts/optima/Optima-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Optima';
    src: url('/assets/fonts/optima/Optima-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Optima';
    src: url('/assets/fonts/optima/Optima-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
/* Global typography tokens — MGC-reference study, approved 2026-09.
   Two type families carry the whole site: --font-display (Optima for
   Latin glyphs, falling through per-character to Cairo for Arabic —
   one declaration, no per-locale rule needed) for Hero/H1/H2/H3 and
   large standalone numerals; --font-functional (Tajawal) for
   everything else — body copy, eyebrows/labels, navigation and CTAs.
   Weight is part of the hierarchy, not a constant: MGC lets Optima run
   at Regular/Medium at large sizes rather than defaulting every
   heading to Bold, so the scale below tapers from Hero down to H3
   instead of holding one heavy weight throughout. Arabic line-height
   tokens run looser than their Latin counterparts at matching levels —
   measured directly off mgc.com.sa/ar, where Arabic script needs more
   vertical room at the same point size. */
:root {
    --font-display: 'Optima', 'Cairo', sans-serif;
    --font-functional: 'Tajawal', 'Roboto', sans-serif;

    --fw-hero: 700;
    --fw-h1: 700;
    --fw-h2: 500;
    --fw-h3: 500;
    --fw-stat-strong: 700;
    --fw-stat-quiet: 600;

    --fw-body: 400;
    --fw-label: 600;
    --fw-nav: 500;
    --fw-cta: 600;

    --lh-h1: 1.08;
    --lh-h1-ar: 1.22;
    --lh-h2: 1.15;
    --lh-h2-ar: 1.3;
    --lh-h3: 1.2;
    --lh-h3-ar: 1.35;

    /* Global spacing scale — every section/component gap below should
       resolve to one of these instead of a one-off px value. Four rhythm
       tiers in practice: --space-xs/sm/md are COMPACT (component-internal
       gaps); --space-lg is the STANDARD tier for a section that sits
       directly against another (an intro directly under its hero, a
       compact identity band); --space-section is EDITORIAL — the default
       rhythm between one fsd-section and the next down a Service/Company
       page; --space-section-hero is CINEMATIC, reserved for full-scale
       storytelling moments like the Businesses landing chapters. Applying
       editorial or cinematic spacing to a section that isn't carrying
       that much visual weight is exactly how "premium whitespace" turns
       into dead space — pick the tier the content actually earns. */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 64px;
    --space-section: 88px;
    --space-section-hero: 120px;

    /* Content-width system — every measure of running text or layout
       width on the site should come from one of these five roles. */
    --w-narrow: 620px;    /* short captions, tight labels */
    --w-editorial: 720px; /* editorial statements — the Service/Company intro */
    --w-standard: 860px;  /* general content, prose columns */
    --w-wide: 1180px;     /* visual layouts, grids, capability rows */
    /* full-bleed photography uses no max-width at all */

    --surface-charcoal: var(--boh-primary-deep);
    --surface-cream: var(--boh-surface);
    --surface-cream-alt: var(--boh-surface-alt);
    --surface-white: #ffffff;

    --text-on-dark: #ffffff;
    --text-on-dark-muted: #b7c0c4;    /* WCAG AA on --surface-charcoal */
    --text-on-light: var(--boh-charcoal);
    --text-on-light-muted: var(--boh-slate-dark); /* WCAG AA on cream/white */

    --accent-gold: var(--boh-gold);
}

.future-theme {
    font-family: var(--font-functional);
    font-weight: var(--fw-body);
    background: #faf8f3;
    color: var(--boh-charcoal);
}

.future-theme .num {
    font-variant-numeric: tabular-nums;
}

/* Batch 5A: skip-to-content link — first focusable element on every page
   (added once in layouts/app.blade.php). Off-screen until focused, then a
   high-contrast gold-on-charcoal bar pinned to the top of the viewport. */
.future-theme .future-skip-link {
    /* .future-theme .future-skip-link (not just .future-skip-link) is needed
       to outrank .future-theme a's color rule below (0,1,1 specificity) —
       without it this link silently rendered charcoal-on-charcoal-dark
       (~1.3:1) the moment it became visible on focus. */
    position: absolute;
    top: -100px;
    inset-inline-start: 12px;
    z-index: 100;
    padding: 12px 20px;
    background: var(--boh-charcoal-dark);
    color: #fff;
    border: 2px solid var(--boh-gold);
    border-radius: 4px;
    font-family: var(--font-functional);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: top 0.15s ease;
}

.future-theme .future-skip-link:focus {
    top: 12px;
}

/* Batch 5A: locks background scroll while the mobile nav overlay is open
   (toggled by partials/nav.blade.php's script). */
html.future-nav-lock,
html.future-nav-lock body {
    overflow: hidden;
}

/* Small reusable classes replacing inline one-off font styles previously
   written directly in philosophy.blade.php and facts/index.blade.php. */
.future-philosophy-num {
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: 22px;
    color: var(--boh-gold);
}

.future-philosophy-title {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: 18px;
    color: #fff;
    margin: 12px 0 10px;
}

.future-fact-num {
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: 26px;
    color: var(--boh-charcoal);
}

.future-theme a {
    color: inherit;
    text-decoration: none;
}

/* Eyebrow label with a short gold rule anchor */
.future-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.future-eyebrow-row .rule {
    width: 28px;
    height: 2px;
    background: var(--boh-gold);
    display: inline-block;
    flex-shrink: 0;
}

.future-eyebrow {
    font-family: var(--font-functional);
    font-weight: var(--fw-label);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--boh-charcoal);
}

.future-eyebrow.on-dark {
    color: #fff;
}

/* CTAs */
.future-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--boh-charcoal);
    color: var(--boh-charcoal);
    padding: 16px 32px;
    font-family: var(--font-functional);
    font-size: 13px;
    font-weight: var(--fw-cta);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.future-cta.solid {
    background: var(--boh-gold);
    border-color: var(--boh-gold);
    color: var(--boh-charcoal-dark);
}

.future-cta.on-dark {
    border-color: #ffffff66;
    color: #fff;
}

/* "More" links: charcoal text + gold arrow chip, never gold text on white */
.future-more-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--boh-charcoal);
}

.future-more-link .arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--boh-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.future-play-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
}

.future-play-chip .ring {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #ffffff77;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.future-texture {
    position: relative;
    overflow: hidden;
}

.future-texture::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 88% 8%, var(--boh-gold) 0%, transparent 34%),
                radial-gradient(circle at 4% 96%, var(--boh-slate) 0%, transparent 30%);
    opacity: 0.05;
}

.future-texture > * {
    position: relative;
}

.future-nav {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 5%;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.future-nav .brand {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-weight: var(--fw-hero);
    font-size: 20px;
    letter-spacing: 0.02em;
    color: var(--text-on-dark);
}

.future-nav .brand img {
    max-height: 42px;
}

.future-nav .links {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    font-family: var(--font-functional);
    font-weight: var(--fw-nav);
    font-size: 15px;
    letter-spacing: 0.01em;
    color: var(--text-on-dark);
    flex-wrap: wrap;
}

.future-nav .links a {
    position: relative;
    padding: 6px 0;
    color: var(--text-on-dark-muted);
    transition: color 0.2s ease;
}

.future-nav .links a::after {
    content: "";
    position: absolute;
    /* Batch 5A: was left/right (physical), which always grew left-to-right
       even in RTL. inset-inline-start/-end mirror automatically with the
       page direction, so this needs no separate [dir="rtl"] rule. */
    inset-inline-start: 0;
    inset-inline-end: 100%;
    bottom: 0;
    height: 2px;
    background: var(--accent-gold);
    transition: inset-inline-end 0.25s ease;
}

.future-nav .links a:hover,
.future-nav .links a:focus-visible {
    color: var(--text-on-dark);
}

.future-nav .links a:hover::after,
.future-nav .links a:focus-visible::after {
    inset-inline-end: 0;
}

.future-nav .links a.is-active {
    color: var(--text-on-dark);
}

.future-nav .links a.is-active::after {
    inset-inline-end: 0;
}

.future-nav-noop {
    /* Batch 5A: an unresolved CMS nav item — plain inert label, same rhythm
       as a real link, but never a fake javascript:/# href. */
    padding: 6px 0;
    color: var(--text-on-dark-muted);
    opacity: 0.6;
}

.future-lang-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: var(--space-md, 16px);
    padding-inline-start: var(--space-md, 16px);
    border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
    font-family: var(--font-functional);
    font-weight: var(--fw-nav);
    font-size: 13px;
    letter-spacing: 0.04em;
}

.future-lang-switch a {
    color: var(--text-on-dark-muted);
    padding: 4px 2px;
    transition: color 0.2s ease;
}

.future-lang-switch a:hover,
.future-lang-switch a:focus-visible {
    color: var(--text-on-dark);
}

.future-lang-switch a.is-current {
    color: var(--boh-gold);
    font-weight: 700;
    pointer-events: none;
}

.future-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 4;
}

.future-nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.future-nav.is-open .future-nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.future-nav.is-open .future-nav-toggle span:nth-child(2) {
    opacity: 0;
}

.future-nav.is-open .future-nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* HERO */
.future-hero {
    position: relative;
    min-height: 780px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(155deg, #34424a 0%, var(--boh-charcoal) 45%, var(--boh-primary-deep) 100%);
}

.future-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 82% 14%, var(--boh-slate) 0%, transparent 44%);
    opacity: 0.28;
}

/* Slide-driven background (image or self-hosted video) — sits behind
   the ::before tint and the charcoal gradient base already on
   .future-hero, so any slide/media works without changing the text
   legibility treatment. */
.future-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.future-hero-overlay {
    position: absolute;
    inset: 0;
    /* Light enough that the slide's own video/image actually reads —
       the previous 82-90% tint was hiding it almost entirely. Kept
       asymmetric (darker toward the text side) so the headline stays
       legible without flattening the whole frame. */
    background: linear-gradient(155deg, rgba(30, 38, 43, 0.25) 0%, rgba(30, 38, 43, 0.4) 45%, rgba(20, 26, 30, 0.58) 100%);
    z-index: 1;
}

.future-hero-copy {
    z-index: 2;
}

.future-hero-copy {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    padding: 20px 5% 0;
}

.future-hero-copy .inner {
    max-width: 640px;
}

.future-hero h1 {
    font-family: var(--font-display);
    font-weight: var(--fw-hero);
    font-size: 58px;
    line-height: 1.16;
    margin: 26px 0 26px;
    color: #fff;
    text-wrap: balance;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.future-hero h1 .accent {
    color: var(--boh-gold);
}

[dir="rtl"] .future-hero h1 {
    line-height: var(--lh-h1-ar);
}

.future-hero p {
    font-size: 18px;
    line-height: 1.9;
    color: #cfd6d9;
    margin: 0 0 40px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.future-hero-actions {
    display: flex;
    gap: 28px;
    align-items: center;
    flex-wrap: wrap;
}

/* Floating stat strip — overlaps the hero/light boundary */
.future-stats-wrap {
    padding: 0 5%;
    margin-top: -78px;
    position: relative;
    z-index: 2;
}

.future-stats {
    background: #fff;
    box-shadow: 0 24px 60px rgba(30, 38, 43, 0.18);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.future-stats .stat {
    padding: 34px 28px;
    border-inline-end: 1px solid #2c373e14;
}

.future-stats .stat:last-child {
    border-inline-end: 0;
}

.future-stats .stat.dark {
    background: var(--boh-charcoal);
}

.future-stats .stat .num {
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: 36px;
    color: var(--boh-charcoal);
}

.future-stats .stat.dark .num {
    color: var(--boh-gold);
}

.future-stats .stat .label {
    font-size: 13px;
    color: var(--boh-slate-dark);
    margin-top: 8px;
    font-weight: 500;
}

.future-stats .stat.dark .label {
    color: #cfd6d9;
}

/* SECTORS */
.future-sectors {
    padding: 130px 5% 90px;
}

.future-sectors-head {
    max-width: 620px;
    margin-bottom: 56px;
}

.future-sectors-head h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: 34px;
    margin: 18px 0 0;
    color: var(--boh-charcoal);
    line-height: 1.3;
}

.future-sector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

/* Businesses page grid: cards carry very different amounts of content
   (a sector with several companies vs. one with none), so — unlike the
   homepage's grid, where every card's content is the same short length
   and stretching to a tidy row is desirable — cards here size to their
   own content instead of being stretched to match the tallest sibling. */
.future-sector-grid.is-cinematic {
    align-items: start;
}

.future-sector-card {
    background: #fff;
    border-top: 4px solid var(--boh-gold);
    box-shadow: 0 10px 34px rgba(44, 55, 62, 0.08);
    padding: 38px 32px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.future-sector-card .idx {
    font-family: var(--font-functional);
    font-weight: var(--fw-label);
    font-size: 13px;
    color: var(--boh-slate-dark);
}

.future-sector-card h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: 21px;
    margin: 14px 0 12px;
    color: var(--boh-charcoal);
}

.future-sector-card p {
    font-size: 14px;
    color: rgba(44, 55, 62, 0.62);
    line-height: 1.9;
    margin: 0;
}

/* Photo variant — the sector's real photo leads the card, cinematic-style,
   with the existing children/companies list and "More" link below on the
   usual white ground. The image itself carries a floating pill CTA (circular
   arrow + title, see .cover .pill below) rather than text laid directly
   over a gradient — reuse that structure for any other image tile. */
.future-sector-card.has-cover {
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
    /* This variant's content length varies a lot (a sector with several
       companies vs. one with none) — growing to fill the row's tallest
       card via space-between left a large dead gap before "More" on the
       shorter ones, so each card here sizes to its own content instead. */
    justify-content: flex-start;
}

.future-sector-card .cover,
.future-chapter .media .cover {
    position: relative;
    display: block;
    height: 260px;
    overflow: hidden;
}

.future-sector-card .cover img,
.future-chapter .media .cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.future-sector-card.has-cover .body {
    padding: 30px 32px 32px;
}

.future-sector-card.has-cover .future-more-link {
    margin: 4px 32px 28px;
}

.future-sector-card .cover:hover img,
.future-chapter .media .cover:hover img {
    transform: scale(1.07);
}

/* Floating pill CTA (circular arrow + title) on the image's bottom-start
   corner instead of text over a gradient — reuse this .cover/.pill/
   .pill-arrow/.pill-title structure for any other cinematic image tile. */
.future-sector-card .cover .pill,
.future-chapter .media .cover .pill {
    position: absolute;
    inset-inline-start: 18px;
    bottom: 18px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    border-radius: 999px;
    padding: 6px 22px 6px 6px;
    box-shadow: 0 14px 30px rgba(20, 26, 30, 0.28);
    transition: padding 0.3s ease, box-shadow 0.3s ease;
}

[dir="rtl"] .future-sector-card .cover .pill,
[dir="rtl"] .future-chapter .media .cover .pill {
    padding: 6px 6px 6px 22px;
}

.future-sector-card .cover:hover .pill,
.future-chapter .media .cover:hover .pill {
    box-shadow: 0 18px 36px rgba(20, 26, 30, 0.34);
}

.future-sector-card .cover .pill-arrow,
.future-chapter .media .cover .pill-arrow {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--boh-charcoal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
}

.future-sector-card .cover .pill-arrow svg,
.future-chapter .media .cover .pill-arrow svg {
    transform: scaleX(-1);
}

[dir="rtl"] .future-sector-card .cover .pill-arrow svg,
[dir="rtl"] .future-chapter .media .cover .pill-arrow svg {
    transform: none;
}

.future-sector-card .cover:hover .pill-arrow,
.future-chapter .media .cover:hover .pill-arrow {
    background: var(--boh-gold);
    transform: translateX(-3px);
}

[dir="rtl"] .future-sector-card .cover:hover .pill-arrow,
[dir="rtl"] .future-chapter .media .cover:hover .pill-arrow {
    transform: translateX(3px);
}

.future-sector-card .cover .pill-title,
.future-chapter .media .cover .pill-title {
    font-family: var(--font-functional);
    font-weight: var(--fw-label);
    font-size: 15px;
    color: var(--boh-charcoal);
    white-space: nowrap;
}

.future-company-logos {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(44, 55, 62, 0.1);
}

.future-company-logos .label {
    display: block;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--boh-slate-dark);
    margin-bottom: 10px;
}

.future-company-logos .logos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.future-company-logos .logo-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 46px;
    background: #fff;
    border: 1px solid rgba(44, 55, 62, 0.12);
    border-radius: 6px;
    padding: 6px 8px;
}

.future-company-logos .logo-chip img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.future-company-logos .logo-chip span {
    font-size: 10px;
    font-weight: 700;
    color: var(--boh-charcoal);
    text-align: center;
    line-height: 1.2;
}

/* HOME — BUSINESSES GATEWAY: the whole card is the link (Wave 3E), a
   compact index into /services rather than a reproduction of it — no
   child-service list, so the card is intentionally shorter than the
   Businesses landing's own richer .is-cinematic/.has-cover variants
   (neither of which any page currently uses — reserved for when real
   sector photography exists). */
.future-sector-card.is-gateway {
    min-height: 190px;
    justify-content: flex-start;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.future-sector-card.is-gateway .future-more-link {
    margin-top: auto;
    padding-top: 18px;
}

.future-sector-card.is-gateway:hover,
.future-sector-card.is-gateway:focus-visible {
    border-top-color: var(--accent-gold);
    box-shadow: 0 14px 40px rgba(44, 55, 62, 0.14);
    transform: translateY(-2px);
}

/* HOME — FEATURED PROJECT: a single real .future-showcase-panel (the
   same expanding-filmstrip component Portfolio's own landing uses for
   its featured projects, Wave 2) shown at full width. The hover-reveal
   behavior built for a multi-panel filmstrip doesn't suit a single,
   prominent story — .is-single keeps the excerpt/CTA visible by
   default, matching the always-on mobile state that already exists. */
.future-showcase.is-single {
    height: 620px;
    position: relative;
}

.future-showcase.is-single .future-showcase-panel {
    flex: 1;
}

.future-showcase.is-single .future-showcase-panel:hover,
.future-showcase.is-single .future-showcase-panel:focus-within {
    flex: 1;
}

.future-showcase.is-single .future-showcase-panel .copy {
    max-width: 620px;
    padding: 64px 64px 56px;
}

.future-showcase.is-single .future-showcase-panel .desc,
.future-showcase.is-single .future-showcase-panel .discover {
    max-height: none;
    opacity: 1;
    transform: none;
}

.future-showcase.is-single .future-showcase-panel h2 {
    font-size: 30px;
    white-space: normal;
}

.future-showcase-portfolio-link {
    position: absolute;
    top: 28px;
    inset-inline-end: 5%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(20, 26, 30, 0.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-functional);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.future-showcase-portfolio-link svg {
    transform: scaleX(-1);
}

[dir="rtl"] .future-showcase-portfolio-link svg {
    transform: none;
}

.future-showcase-portfolio-link:hover {
    background: var(--boh-gold);
    border-color: var(--boh-gold);
    color: var(--boh-charcoal-dark);
}

@media (max-width: 900px) {
    .future-showcase.is-single {
        height: auto;
    }

    .future-showcase.is-single .future-showcase-panel .copy {
        max-width: none;
        padding: 32px 24px;
    }

    .future-showcase-portfolio-link {
        position: static;
        margin: 14px 5% 0;
        align-self: flex-start;
    }
}

/* CLOSING */
.future-closing {
    padding: 100px 5%;
    text-align: center;
}

.future-closing h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: 32px;
    color: var(--boh-charcoal);
    max-width: 700px;
    margin: 18px auto 32px;
    line-height: 1.4;
}

/* FOOTER TEASER */
.future-footer {
    background: var(--boh-primary-deep);
    padding: 34px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.future-footer .brand {
    font-family: var(--font-display);
    font-weight: var(--fw-hero);
    font-size: 16px;
    color: #fff;
}

.future-footer .brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.future-footer .brand img {
    display: block;
    max-height: 44px;
    width: auto;
}

.future-footer .copyright {
    font-size: 13px;
    color: #ffffff88;
}

.future-footer .links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.future-footer .links a {
    font-size: 13px;
    color: #ffffffcc;
}

.future-footer .links a:hover,
.future-footer .links a:focus-visible {
    color: var(--boh-gold);
}

.future-footer .socials {
    display: flex;
    gap: 14px;
}

.future-footer .socials a {
    /* Batch 5A: 34px -> 44px as UX polish (comfortable tap size), not a WCAG
       2.5.8 fix — 2.5.8's minimum is 24x24, which this already cleared. */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #ffffff33;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
}

/* PAGE HEADER — shared dark banner for inner pages */
.future-page-header {
    position: relative;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(155deg, #34424a 0%, var(--boh-charcoal) 45%, var(--boh-primary-deep) 100%);
}

.future-page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 82% 14%, var(--boh-slate) 0%, transparent 44%);
    opacity: 0.28;
}

/* Optional real-photo variant (e.g. a Businesses sector page) — the image
   sits behind the existing gradient/tint, which becomes a darkening
   overlay instead of the whole background, so title/breadcrumb legibility
   is unaffected whether or not a page passes an image. */
.future-page-header.has-cover {
    min-height: 420px;
}

.future-page-header.has-cover::before {
    opacity: 0.5;
}

.future-page-header .cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Focal point from the CMS (Page Heroes / Page → hero focal point); centre when unset. */
    object-position: var(--hero-pos, 50% 50%);
    z-index: -1;
}

@media (max-width: 700px) {
    .future-page-header .cover-img {
        object-position: var(--hero-pos-m, var(--hero-pos, 50% 50%));
    }
}

.future-page-header.has-cover {
    /* Brand blue-grey overlay (--boh-charcoal, 44/55/62) rather than the
       near-black charcoal-dark — the photograph stays recognizable and
       the tint reads as Bin Omairah's own steel blue-grey. */
    background: linear-gradient(155deg, rgba(52, 66, 74, 0.7) 0%, rgba(44, 55, 62, 0.76) 45%, rgba(44, 55, 62, 0.86) 100%);
}

.future-page-header-inner {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5% 40px;
}

.future-page-header-inner h1 {
    font-family: var(--font-display);
    font-weight: var(--fw-h1);
    font-size: 42px;
    color: #fff;
    margin: 18px 0 16px;
}

.future-breadcrumb {
    font-size: 14px;
    color: #cfd6d9;
}

.future-breadcrumb a {
    color: #cfd6d9;
}

.future-breadcrumb a:hover {
    color: var(--boh-gold);
}

/* Oversized hero variant — establishes scale before asking the visitor to
   choose a sector (Businesses landing page). Additive: every other page
   using .future-page-header is untouched unless it opts in via 'xl'. */
.future-page-header.is-xl {
    min-height: 640px;
}

.future-page-header.is-xl .future-page-header-inner h1 {
    font-size: clamp(48px, 7vw, 92px);
    line-height: 0.98;
    margin-top: 22px;
}

[dir="rtl"] .future-page-header.is-xl .future-page-header-inner h1 {
    line-height: 1.12;
}

[dir="rtl"] .future-page-header-inner h1 {
    line-height: var(--lh-h1-ar);
}

/* Standard corporate INNER hero (the About Us treatment) — the one size for
   every corporate page (About Us, History, CEO Message, Philosophy, Quality,
   Sustainability, Projects, News, Careers, Contact ...). Same height and the
   same bottom-anchored title block whether the page has a photograph (added
   via is-photo/is-scrim) or shows the standard charcoal hero. The landing
   variant is is-xl (Businesses); compact is for record detail pages. */
.future-page-header.is-inner {
    min-height: var(--hero-h-inner, 500px);
}

.future-page-header.is-inner .future-page-header-inner {
    justify-content: flex-end;
    padding-bottom: 56px;
}

@media (max-width: 700px) {
    /* Charcoal-only phone hero: a modest, bottom-anchored block. A photo hero
       keeps its own phone layout (see is-photo). */
    .future-page-header.is-inner:not(.has-cover) {
        min-height: 320px;
    }

    .future-page-header.is-inner:not(.has-cover) .future-page-header-inner {
        padding-bottom: 32px;
    }
}
/* Compact hero variant — leaf Service pages (Energy, Telecom, ...) don't
   need the Businesses landing's cinematic scale, nor even the sector-level
   default; the title block is short (eyebrow + H1 + breadcrumb), so it's
   bottom-anchored instead of vertically centered in a tall box, which was
   the real source of the empty band above/below the title. Additive, like
   .is-xl: every other .future-page-header usage (sector pages, Company
   pages — both stay at the current/medium scale) is untouched. */
.future-page-header.is-compact {
    min-height: 240px;
}

.future-page-header.is-compact.has-cover {
    min-height: 300px;
}

.future-page-header.is-compact .future-page-header-inner {
    justify-content: flex-end;
    padding-bottom: 28px;
}

.future-page-header-intro {
    max-width: 640px;
    font-size: 17px;
    line-height: 1.7;
    color: #dfe4e6;
    margin: 4px 0 28px;
}

/* Company hero logo — a restrained, controlled surface for the company's
   real logo (usually a flat-background raster with no transparency), never
   the photo's dominant element. Modest fixed height, never stretched or
   distorted (height set, width auto). Opt-in via page-header's `logo`
   param — every other caller of this shared partial is unaffected. */
.future-page-header-logo {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: fit-content;
    background: var(--surface-white);
    padding: 10px 18px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin: 20px 0 6px;
}

.future-page-header-logo img {
    height: 32px;
    width: auto;
    display: block;
}

.future-page-header-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 36px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.future-page-header-stats span {
    font-size: 13px;
    color: #cfd6d9;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.future-page-header-stats b {
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: 26px;
    color: var(--boh-gold);
}

.future-breadcrumb .sep {
    margin: 0 10px;
    color: #ffffff55;
}

/* Generic content section wrapper on light ground */
.future-section {
    padding: 90px 5%;
}

.future-section-head {
    max-width: 680px;
    margin-bottom: 48px;
}

.future-section-head h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: 32px;
    margin: 18px 0 0;
    color: var(--boh-charcoal);
    line-height: 1.3;
}

.future-section-head p {
    font-size: 16px;
    color: rgba(44, 55, 62, 0.65);
    line-height: 1.8;
    margin-top: 14px;
}

/* Filter pills */
.future-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}

.future-filters a {
    display: inline-block;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #2c373e22;
    color: var(--boh-charcoal);
}

.future-filters a.active {
    background: var(--boh-charcoal);
    border-color: var(--boh-charcoal);
    color: #fff;
}

/* Primary Ongoing/Completed segmented control — the main way this page
   is organized, so it's visually heavier than the secondary sector/
   company filters below it. */
.future-status-tabs {
    display: flex;
    border: 1px solid #2c373e1c;
    background: #fff;
    box-shadow: 0 10px 34px rgba(44, 55, 62, 0.06);
}

.future-status-tabs a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 26px 20px;
    text-align: center;
    border-inline-end: 1px solid #2c373e1c;
    transition: background 0.15s ease;
}

.future-status-tabs a:last-child {
    border-inline-end: 0;
}

.future-status-tabs a .count {
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: 30px;
    color: var(--boh-charcoal);
}

.future-status-tabs a .label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--boh-slate-dark);
}

.future-status-tabs a:hover {
    background: #faf8f3;
}

.future-status-tabs a.active {
    background: var(--boh-charcoal);
    box-shadow: inset 0 -4px 0 var(--boh-gold);
}

.future-status-tabs a.active .count {
    color: var(--boh-gold);
}

.future-status-tabs a.active .label {
    color: #fff;
}

@media (max-width: 640px) {
    .future-status-tabs {
        flex-direction: column;
    }

    .future-status-tabs a {
        border-inline-end: 0;
        border-bottom: 1px solid #2c373e1c;
        flex-direction: row;
        justify-content: center;
        padding: 16px;
    }

    .future-status-tabs a:last-child {
        border-bottom: 0;
    }
}

.future-filters .group-label {
    width: 100%;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--boh-slate-dark);
    margin: 14px 0 2px;
}

.future-filters .group-label:first-child {
    margin-top: 0;
}

/* Card grid (projects / companies / businesses) */
.future-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 26px;
}

.future-card {
    background: #fff;
    box-shadow: 0 10px 34px rgba(44, 55, 62, 0.08);
    display: flex;
    flex-direction: column;
}

.future-card .thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--boh-charcoal);
    overflow: hidden;
}

.future-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.future-card .thumb .tag {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    background: var(--boh-gold);
    color: var(--boh-charcoal-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 5px 12px;
}

.future-card .thumb .status-badge {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(4px);
}

.future-card .thumb .status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.future-card .thumb .status-badge.is-ongoing {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.future-card .thumb .status-badge.is-ongoing::before {
    background: var(--boh-gold);
}

.future-card .thumb .status-badge.is-completed {
    background: rgba(255, 255, 255, 0.9);
    color: var(--boh-charcoal);
}

.future-card .thumb .status-badge.is-completed::before {
    background: var(--boh-slate-dark);
}

.future-card .body {
    padding: 26px 24px;
    border-top: 3px solid var(--boh-gold);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.future-card h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: 18px;
    color: var(--boh-charcoal);
    margin: 0;
    line-height: 1.4;
}

.future-card .meta {
    font-size: 12px;
    color: var(--boh-slate-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.future-card .excerpt {
    font-size: 14px;
    color: rgba(44, 55, 62, 0.62);
    line-height: 1.8;
    margin: 0;
}

.future-card .future-more-link {
    margin-top: auto;
}

.future-empty {
    padding: 60px 0;
    text-align: center;
    color: var(--boh-slate-dark);
    font-size: 15px;
}

/* ---------------------------------------------------------------------
   Split-panel portfolio showcase — full-bleed vertical panels, one per
   featured project, that widen on hover to reveal a summary and a
   "Discover" link. Inspired by a destination-portfolio pattern the user
   referenced; built entirely from this theme's own tokens/typography.
   ------------------------------------------------------------------- */
.future-showcase {
    display: flex;
    width: 100%;
    height: 560px;
    overflow: hidden;
}

.future-showcase-panel {
    position: relative;
    flex: 1;
    min-width: 60px;
    overflow: hidden;
    transition: flex 0.5s ease;
    display: flex;
    align-items: flex-end;
}

.future-showcase-panel:hover,
.future-showcase-panel:focus-within {
    flex: 3.2;
}

.future-showcase-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.future-showcase-panel .veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(30, 38, 43, 0.88) 0%, rgba(30, 38, 43, 0.15) 55%, rgba(30, 38, 43, 0.35) 100%);
}

.future-showcase-panel .copy {
    position: relative;
    padding: 32px 24px;
    width: 100%;
    color: #fff;
}

.future-showcase-panel .eyebrow {
    font-family: var(--font-functional);
    font-weight: var(--fw-label);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--boh-gold);
    white-space: nowrap;
    overflow: hidden;
}

.future-showcase-panel h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: 22px;
    margin: 8px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.future-showcase-panel .desc {
    font-size: 13px;
    line-height: 1.8;
    color: #d8dee0;
    max-width: 340px;
    margin: 12px 0 16px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

.future-showcase-panel:hover .desc,
.future-showcase-panel:focus-within .desc {
    max-height: 120px;
    opacity: 1;
}

.future-showcase-panel .discover {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.future-showcase-panel:hover .discover,
.future-showcase-panel:focus-within .discover {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {
    .future-showcase {
        flex-direction: column;
        height: auto;
    }

    .future-showcase-panel {
        height: 220px;
        flex: none !important;
    }

    .future-showcase-panel .desc,
    .future-showcase-panel .discover {
        max-height: none;
        opacity: 1;
        transform: none;
    }
}

/* Compact primary status control — small pill row instead of the large
   card grid, so it (plus the secondary filters) doesn't dominate the
   page's vertical space. */
.future-status-tabs.is-compact {
    display: inline-flex;
    border-radius: 999px;
    box-shadow: none;
    border-color: #2c373e22;
}

.future-status-tabs.is-compact a {
    flex-direction: row;
    padding: 10px 18px;
    gap: 8px;
}

.future-status-tabs.is-compact a .count {
    font-size: 14px;
}

.future-status-tabs.is-compact a .label {
    font-size: 12px;
}

.future-status-tabs.is-compact a.active {
    box-shadow: none;
}

.future-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

/* Pagination */
.future-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 56px;
    flex-wrap: wrap;
}

.future-pagination a,
.future-pagination span {
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--boh-charcoal);
    border: 1px solid #2c373e22;
}

.future-pagination .active {
    background: var(--boh-charcoal);
    border-color: var(--boh-charcoal);
    color: #fff;
}

.future-pagination .disabled {
    color: #2c373e55;
}

/* Contact */
.future-contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: start;
}

@media (max-width: 900px) {
    .future-contact-grid {
        grid-template-columns: 1fr;
    }
}

.future-contact-info {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.future-contact-info .row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.future-contact-info .row .ico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--boh-charcoal);
    color: var(--boh-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.future-contact-info .row .label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--boh-slate-dark);
    margin-bottom: 4px;
}

.future-contact-info .row .value {
    font-size: 15px;
    color: var(--boh-charcoal);
}

.future-form {
    background: #fff;
    box-shadow: 0 10px 34px rgba(44, 55, 62, 0.08);
    border-top: 4px solid var(--boh-gold);
    padding: 34px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.future-form label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--boh-charcoal);
    margin-bottom: 8px;
    display: block;
}

.future-form input,
.future-form textarea {
    width: 100%;
    border: 1px solid #2c373e22;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--boh-charcoal);
    background: #faf8f3;
}

.future-form input:focus,
.future-form textarea:focus {
    outline: 2px solid var(--boh-gold);
    outline-offset: -1px;
}

.future-form button {
    align-self: flex-start;
    border: none;
    cursor: pointer;
}

.future-form .error {
    color: #b3261e;
    font-size: 12px;
    margin-top: 6px;
}

.future-form-status {
    background: var(--boh-charcoal);
    color: #fff;
    padding: 16px 20px;
    font-size: 14px;
    margin-bottom: 18px;
}

.future-branch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.future-branch-card {
    background: #fff;
    border-inline-start: 3px solid var(--boh-gold);
    padding: 20px 22px;
    box-shadow: 0 6px 20px rgba(44, 55, 62, 0.06);
}

.future-branch-card h4 {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: 15px;
    margin: 0 0 8px;
    color: var(--boh-charcoal);
}

.future-branch-card p {
    font-size: 13px;
    color: rgba(44, 55, 62, 0.62);
    margin: 0;
    line-height: 1.7;
}

/* DETAIL PAGES (project / company / business) */
.future-detail-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
    align-items: start;
}

@media (max-width: 900px) {
    .future-detail-grid {
        grid-template-columns: 1fr;
    }
}

.future-detail-hero-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    box-shadow: 0 10px 34px rgba(44, 55, 62, 0.1);
}

.future-detail-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.future-detail-thumbs img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.future-prose h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: 24px;
    color: var(--boh-charcoal);
    margin: 0 0 16px;
}

.future-prose h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: 20px;
    color: var(--boh-charcoal);
    margin: 40px 0 14px;
    padding-top: 24px;
    border-top: 1px solid #2c373e14;
}

.future-prose h3:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.future-prose h4 {
    font-family: var(--font-functional);
    font-weight: var(--fw-label);
    font-size: 15px;
    letter-spacing: 0.02em;
    color: var(--boh-gold);
    text-transform: uppercase;
    margin: 24px 0 10px;
}

.future-prose ul {
    margin: 0 0 16px;
    padding-inline-start: 20px;
}

.future-prose li {
    font-size: 14px;
    line-height: 1.9;
    color: rgba(44, 55, 62, 0.72);
    margin-bottom: 4px;
}

.future-prose li::marker {
    color: var(--boh-gold);
}

.future-prose p {
    font-size: 15px;
    line-height: 1.9;
    color: rgba(44, 55, 62, 0.75);
}

.future-award {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--boh-gold);
    color: var(--boh-charcoal);
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 30px;
}

/* Spec / fact tiles */
.future-spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
    margin: 40px 0;
}

.future-spec-tile {
    background: #fff;
    box-shadow: 0 6px 20px rgba(44, 55, 62, 0.06);
    padding: 22px;
}

.future-spec-tile .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--boh-slate-dark);
    margin-bottom: 8px;
}

.future-spec-tile .value {
    font-size: 15px;
    font-weight: 700;
    color: var(--boh-charcoal);
}

.future-spec-tile .value a {
    color: var(--boh-charcoal);
    text-decoration: underline;
    text-decoration-color: var(--boh-gold);
}

/* Challenge / impact split */
.future-challenge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 40px 0;
}

.future-challenge-card {
    background: #fff;
    border-inline-start: 4px solid var(--boh-gold);
    padding: 26px 28px;
    box-shadow: 0 6px 20px rgba(44, 55, 62, 0.06);
}

.future-challenge-card h4 {
    font-family: var(--font-functional);
    font-weight: var(--fw-label);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--boh-charcoal);
    margin: 0 0 12px;
}

.future-challenge-card p {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(44, 55, 62, 0.7);
    margin: 0;
}

/* Feature icon tiles (business children on a company/sector page) */
.future-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    margin: 30px 0;
}

.future-feature-tile {
    background: #fff;
    box-shadow: 0 6px 20px rgba(44, 55, 62, 0.06);
    padding: 24px;
    text-align: center;
}

.future-feature-tile h5 {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: 15px;
    color: var(--boh-charcoal);
    margin: 0 0 8px;
}

.future-feature-tile p {
    font-size: 13px;
    color: rgba(44, 55, 62, 0.62);
    margin: 0;
    line-height: 1.7;
}

/* TIMELINE (History / Milestones) */
.future-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-inline-start: 2px solid #2c373e18;
    margin-inline-start: 10px;
}

.future-timeline-item {
    position: relative;
    padding: 0 0 44px 36px;
}

[dir="rtl"] .future-timeline-item {
    padding: 0 36px 44px 0;
}

.future-timeline-item::before {
    content: "";
    position: absolute;
    inset-inline-start: -7px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--boh-gold);
}

.future-timeline-item .year {
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: 22px;
    color: var(--boh-charcoal);
    margin-bottom: 10px;
}

.future-timeline-item .card {
    background: #fff;
    box-shadow: 0 6px 20px rgba(44, 55, 62, 0.06);
    padding: 22px 26px;
}

.future-timeline-item .card img {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    margin-bottom: 14px;
}

.future-timeline-item .card h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: 17px;
    color: var(--boh-charcoal);
    margin: 0 0 8px;
}

.future-timeline-item .card p {
    font-size: 14px;
    color: rgba(44, 55, 62, 0.65);
    line-height: 1.8;
    margin: 0;
}

/* News / events / publications listing card (extends .future-card) */
.future-card .thumb.no-img {
    background: linear-gradient(155deg, #34424a 0%, var(--boh-charcoal) 100%);
}

.future-card .body .date {
    font-size: 12px;
    color: var(--boh-slate-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Two-column article layout with a sidebar */
.future-article-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 48px;
    align-items: start;
}

@media (max-width: 900px) {
    .future-article-grid {
        grid-template-columns: 1fr;
    }
}

.future-tag {
    display: inline-block;
    background: #2c373e0f;
    color: var(--boh-charcoal);
    font-size: 12px;
    padding: 6px 14px;
    margin: 0 6px 6px 0;
}

.future-sidebar-widget {
    background: #fff;
    box-shadow: 0 6px 20px rgba(44, 55, 62, 0.06);
    padding: 24px;
}

.future-sidebar-widget h4 {
    font-family: var(--font-functional);
    font-weight: var(--fw-label);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--boh-charcoal);
    margin: 0 0 18px;
}

.future-sidebar-post {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: flex-start;
}

.future-sidebar-post img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    flex-shrink: 0;
}

.future-sidebar-post h6 {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 4px;
    color: var(--boh-charcoal);
}

.future-sidebar-post .date {
    font-size: 11px;
    color: var(--boh-slate-dark);
}

/* Publications table */
.future-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 6px 20px rgba(44, 55, 62, 0.06);
}

.future-table th {
    text-align: start;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--boh-slate-dark);
    padding: 16px 20px;
    border-bottom: 1px solid #2c373e14;
}

.future-table td {
    padding: 16px 20px;
    border-bottom: 1px solid #2c373e0f;
    font-size: 14px;
}

.future-table td a {
    color: var(--boh-charcoal);
    font-weight: 600;
}

.future-table td a:hover {
    color: var(--boh-gold);
}

/* Social icon row (reused outside the footer) */
.future-social-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.future-social-row a {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--boh-charcoal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.future-social-row a:hover {
    background: var(--boh-gold);
    color: var(--boh-charcoal-dark);
}

/* honeypot — hidden from real visitors, catches bots */
.future-form .hp-field {
    /* Still in the DOM for bots to fill, but never off-canvas: a -9999px offset
       made the Arabic (RTL) page scroll sideways. */
    position: absolute;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

@media (max-width: 900px) {
    .future-nav-toggle {
        display: flex;
    }

    .future-nav .links {
        display: none;
        position: absolute;
        inset-inline: 0;
        top: 100%;
        flex-direction: column;
        gap: 0;
        padding: 10px 5%;
        background: var(--boh-primary-deep);
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25);
    }

    .future-nav.is-open .links {
        display: flex;
    }

    .future-nav .links a {
        padding: 14px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .future-nav .links a::after {
        display: none;
    }

    .future-nav .links a:last-child {
        border-bottom: 0;
    }

    .future-hero h1 {
        font-size: 38px;
    }

    .future-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------
   Legacy rich-text compatibility layer — several generic content Pages
   (Site Content > Pages) were authored with the default theme's
   Bootstrap grid + component classes baked directly into their HTML
   (e.g. Sustainability, How We Work, Quality & Safety). That markup
   renders through {!! $page->detail !!} in page.blade.php regardless of
   theme, so without this it falls back to unstyled/uncollapsed blocks
   under this theme (no Bootstrap loaded here). Scoped to .future-prose
   so it can never affect the rest of the theme's own markup.
   ------------------------------------------------------------------- */
.future-prose .row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
}

.future-prose .row > [class*="col-"] {
    flex: 1 1 260px;
    min-width: 0;
}

.future-prose .wt-icon-box-wraper {
    background: #fff;
    box-shadow: 0 6px 20px rgba(44, 55, 62, 0.06);
    padding: 28px 24px;
    height: 100%;
}

.future-prose .wt-icon-box-wraper.center {
    text-align: center;
}

.future-prose .icon-sm .icon-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--boh-charcoal);
    color: var(--boh-gold);
    font-size: 20px;
    margin-bottom: 16px;
}

.future-prose .wt-tilte {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: 16px;
    color: var(--boh-charcoal);
    margin: 0 0 10px;
}

.future-prose .site-text-primary {
    color: var(--boh-gold);
}

.future-prose .site-text-slate {
    color: var(--boh-slate-dark);
}

.future-prose .text-black {
    color: var(--boh-charcoal);
}

.future-prose .text-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.future-prose .text-center {
    text-align: center;
}

.future-prose .font-12 {
    font-size: 12px;
}

.future-prose .font-14 {
    font-size: 14px;
}

.future-prose .font-weight-700 {
    font-weight: 700;
}

.future-prose .wt-box {
    background: #fff;
    box-shadow: 0 6px 20px rgba(44, 55, 62, 0.06);
    padding: 24px;
}

/* Pill/badge chips (e.g. "ISO 14001:2015 Certified") */
.future-prose .quality-strip,
.future-prose .quality-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--boh-gold);
    color: var(--boh-charcoal);
    padding: 10px 18px;
    margin: 6px;
    font-size: 13px;
    font-weight: 600;
}

.future-prose .quality-strip .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.future-prose .quality-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
}

.future-prose .quality-badge .std {
    font-weight: 700;
}

.future-prose .quality-badge .label {
    color: var(--boh-slate-dark);
    font-size: 12px;
}

.future-prose .news-card-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--boh-charcoal);
    font-weight: 700;
    font-size: 13px;
}

.future-prose .news-card-more:hover {
    color: var(--boh-gold);
}

.future-prose .stat-card-slate {
    background: var(--boh-charcoal);
    color: #fff;
    padding: 16px 20px;
    text-align: center;
}

/* Section dividers ("wt-separator") reduced to a simple gold rule */
.future-prose .section-head {
    text-align: center;
}

.future-prose .wt-separator-outer {
    display: flex;
    justify-content: center;
    margin: 10px 0 20px;
}

.future-prose .wt-separator {
    width: 60px;
    height: 2px;
    background: var(--boh-gold);
}

.future-prose .wt-separator .separator-left,
.future-prose .wt-separator .separator-right,
.future-prose .site-bg-primary {
    display: none;
}

/* Legacy spacing utilities used inside authored page content */
.future-prose .p-a30 { padding: 30px; }
.future-prose .m-t5 { margin-top: 5px; }
.future-prose .m-t10 { margin-top: 10px; }
.future-prose .m-t20 { margin-top: 20px; }
.future-prose .m-t40 { margin-top: 40px; }
.future-prose .m-b10 { margin-bottom: 10px; }
.future-prose .m-b20 { margin-bottom: 20px; }
.future-prose .m-b30 { margin-bottom: 30px; }

/* =========================================================================
   SECTOR CHAPTERS — /en/services — consolidated system (one design family)

   One image frame (same aspect ratio, same column proportion) for every
   chapter — only the image's side alternates (.is-reversed). One anatomy,
   one type scale, one number treatment, one CTA. Every size below is
   either content-driven (no forced min-height anywhere) or a deliberate,
   shared token — nothing here is per-sector improvisation.
   ========================================================================= */

.future-chapters {
    background: var(--boh-primary-deep);
}

/* One image frame system for every chapter — same aspect ratio, same
   height, same column proportion (60% image / 40% content). The ONLY
   thing that varies chapter-to-chapter is which side the image sits on
   (.is-reversed swaps both the column widths and the visual order), so
   01→05 reads as one continuous editorial sequence, not five
   independently composed blocks. */
.future-chapter {
    display: grid;
    grid-template-columns: 60% 1fr;
    align-items: end;
    gap: 48px;
    padding: 72px 5%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.future-chapter.is-reversed {
    grid-template-columns: 1fr 60%;
}

.future-chapter.is-reversed .media {
    order: 2;
}

.future-chapter.is-reversed .content {
    order: 1;
}

/* Media: sized purely by aspect-ratio + a safety cap, never by a forced
   viewport/min-height. This is the whole fix for the dead-space problem —
   a chapter's total height is the image's intrinsic height (or the
   content's, whichever is taller), full stop. One ratio for every
   chapter — chosen to sit close to the real photography's native ratios
   (see audit note below) so cover-cropping stays gentle everywhere. */
.future-chapter .media {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--boh-charcoal);
    aspect-ratio: 3 / 2;
    max-height: 560px;
}

.future-chapter .media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.future-chapter .media:hover img {
    transform: scale(1.04);
}

/* Content column — one disciplined secondary area, never stretched to
   fill the row; its own max-width keeps every chapter's text block the
   same measure regardless of which side the wider column falls on. */
.future-chapter .content {
    max-width: 480px;
}

/* Number + title: ONE treatment, used identically in both compositions —
   an outline numeral sitting inline with the title, sharing its baseline,
   not a separate oversized graphic element with its own footprint. */
.future-chapter .chapter-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-bottom: 20px;
}

.future-chapter-num {
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: clamp(32px, 3.4vw, 56px);
    /* text-stroke paints outside the glyph outline without affecting the
       line box — a tight line-height of 1 let that painted edge exceed
       .content's measured scrollHeight by a few px. 1.15 gives it room. */
    line-height: 1.15;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4);
}

.future-chapter .content h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(30px, 3.6vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    margin: 0;
    text-wrap: balance;
}

[dir="rtl"] .future-chapter .content h2 {
    line-height: var(--lh-h2-ar);
}

.future-chapter .content h2 a {
    color: #fff;
}

.future-chapter .content h2 a:hover {
    color: var(--boh-gold);
}

.future-chapter .statement {
    font-size: 15px;
    line-height: 1.75;
    color: #b7c0c4;
    margin: 0 0 18px;
}

/* Child services as compact editorial tags. */
.future-chapter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 24px;
}

.future-chapter-tags a {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #cfd6d9;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}

.future-chapter-tags a:hover {
    color: var(--boh-charcoal);
    background: var(--boh-gold);
    border-color: var(--boh-gold);
}

/* Foot: the ONE Explore CTA for the chapter, plus quiet company
   attribution — never a second competing action. */
.future-chapter-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 32px;
}

/* Base CTA typography for every .explore-link on the site, including the
   Sector Detail page's capability/project links, which previously carried
   no font styling of their own beyond color. Layout (display/gap/etc.)
   stays per-context below — this rule is type only. */
.explore-link {
    font-family: var(--font-functional);
    font-weight: var(--fw-cta);
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.future-chapter .explore-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

.future-chapter .explore-link .a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.future-chapter .explore-link .a svg {
    transform: scaleX(-1);
}

[dir="rtl"] .future-chapter .explore-link .a svg {
    transform: none;
}

.future-chapter .explore-link:hover .a {
    background: var(--boh-gold);
    border-color: var(--boh-gold);
    color: var(--boh-charcoal);
    transform: translateX(-3px);
}

[dir="rtl"] .future-chapter .explore-link:hover .a {
    transform: translateX(3px);
}

.delivered-by {
    display: flex;
    align-items: center;
    gap: 12px;
}

.delivered-by .label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--boh-slate);
    white-space: nowrap;
}

.delivered-by .logos {
    display: flex;
    gap: 8px;
}

.delivered-by .logos a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 28px;
    opacity: 0.85;
    transition: opacity 0.25s ease;
}

.delivered-by .logos a:hover {
    opacity: 1;
}

.delivered-by .logos img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.75;
}

.delivered-by .logos a:hover img {
    opacity: 1;
}

.delivered-by .logos span {
    font-size: 10px;
    font-weight: 700;
    color: #cfd6d9;
}

/* Identity-band variant — Service/Company detail pages show the company
   NAME alongside its mark (not logo-only), since a single relationship
   sitting in its own section needs to read on its own, unlike the
   Businesses index chapters where several logos already sit under a
   fully-titled sector. Opt-in via .has-names; the plain .delivered-by
   above (index.blade.php's chapter footer) is untouched. */
.delivered-by.has-names .logos {
    gap: 28px;
}

.delivered-by.has-names .logos a {
    width: auto;
    height: 34px;
    gap: 10px;
}

.delivered-by.has-names .logos .mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 100%;
    flex-shrink: 0;
}

.delivered-by.has-names .logos .name {
    font-family: var(--font-functional);
    font-size: 13px;
    font-weight: var(--fw-nav);
    white-space: nowrap;
}

/* Sticky chapter index — quiet outline numerals, the same visual language
   as the in-chapter numbers, not a separate UI control. */
.future-chapter-nav {
    position: fixed;
    top: 50%;
    inset-inline-start: 28px;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.future-chapter-nav a {
    font-family: var(--font-display);
    font-weight: var(--fw-stat-quiet);
    font-size: 15px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
    transition: -webkit-text-stroke-color 0.3s ease;
}

.future-chapter-nav a.is-active {
    color: var(--boh-gold);
    -webkit-text-stroke: 1px var(--boh-gold);
}

@media (max-width: 1180px) {
    .future-chapter-nav {
        display: none;
    }
}

/* ---------------------------------------------------------------------
   MOBILE — one structure for every chapter:
   IMAGE → number+title → short line → tags → foot (CTA + company).
   No forced heights, no unique per-sector mobile treatment, and the
   left/right alternation collapses back to plain document order.
   ------------------------------------------------------------------- */
@media (max-width: 900px) {
    .future-chapter,
    .future-chapter.is-reversed {
        display: block;
        padding: 0 0 48px;
    }

    .future-chapter.is-reversed .media,
    .future-chapter.is-reversed .content {
        order: initial;
    }

    .future-chapter .media {
        aspect-ratio: 4 / 3;
        max-height: none;
    }

    .future-chapter .content {
        max-width: none;
        padding: 32px 6% 0;
    }

    .future-chapter-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .delivered-by .logos img {
        filter: none;
        opacity: 1;
    }
}

/* Reveal-on-scroll — progressive enhancement only, and opacity is
   deliberately never part of it. An earlier version set `.reveal` to
   opacity:0 until individually scrolled past a 15% intersection
   threshold — real content with real height, but invisible until a user
   scrolled slowly past that exact point. A full-page capture, a fast
   scroll, or any non-interactive render of the page never triggered that
   threshold for below-the-fold sections, which is exactly what read as
   "large empty areas" despite correct DOM height. Content must be
   visible in every case — JS may only animate its ENTRANCE (a subtle
   slide/scale into place), never its visibility. Opacity therefore stays
   1 in every state below. */
html.motion-ready .reveal {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

html.motion-ready .reveal-media:not(.is-in) {
    transform: scale(1.03);
}

html.motion-ready .reveal-text:not(.is-in) {
    transform: translateY(18px);
}

html.motion-ready .reveal.is-in {
    transform: none;
}

/* =========================================================================
   SECTOR DETAIL — e.g. /en/services/construction (Infrastructure
   Solutions). Rendered by the single unified services.show template
   (ServiceController::show()) that every sector and leaf service uses —
   there is no per-slug branching or prototype flag.

   Continues the Businesses page's dark editorial environment (same tokens,
   same outline-number/circular-arrow/"Delivered by" components) but with
   its own, more compact composition — not a scaled-down copy of the
   alternating Businesses chapters.
   ========================================================================= */

.future-sector-detail {
    background: var(--surface-charcoal);
}

.fsd-section {
    padding: var(--space-section) 5%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fsd-section:last-child {
    border-bottom: none;
}

/* Light-surface sections — the controlled light/dark rhythm: warm-white
   Introduction and Selected Projects, pale blue-grey Delivered By,
   bracketing the deep Capabilities section, instead of one continuous
   dark environment end to end. Every on-dark component reused here
   (numeral, circular-arrow CTA, "Delivered by" logos, eyebrow) gets an
   explicit on-light re-tint — never left at low contrast on the new
   light ground. */
.fsd-section.is-light {
    background: var(--surface-cream);
    border-bottom-color: var(--boh-border);
}

.fsd-delivered.is-light {
    background: var(--surface-cream-alt);
}

.fsd-section.is-light .future-eyebrow {
    color: var(--boh-text);
}

.fsd-section.is-light .future-chapter-num {
    -webkit-text-stroke-color: rgba(44, 55, 62, 0.35);
}

.fsd-section.is-light .explore-link {
    color: var(--boh-text);
}

.fsd-section.is-light .explore-link .a {
    border-color: rgba(44, 55, 62, 0.3);
    color: var(--boh-text);
}

.fsd-section.is-light .delivered-by .label {
    color: var(--boh-text-muted);
}

.fsd-section.is-light .delivered-by .logos img {
    filter: none;
    opacity: 1;
}

.fsd-section.is-light .delivered-by .logos .name {
    color: var(--boh-text);
}

/* B. Introduction — the pivot from "what this service is" to "what we
   can do": an eyebrow anchoring it as a real section, then a larger
   editorial statement at a controlled reading width, instead of one
   small paragraph floating alone in the light strip. Sits directly under
   the hero — top padding is intentionally lighter than the standard
   section rhythm (--space-lg, not --space-section) so the intro reads as
   belonging to the page the visitor just entered, not a separate block
   floating below an empty band. */
.fsd-intro {
    padding-top: var(--space-lg);
}

.fsd-intro .future-eyebrow-row {
    margin-bottom: var(--space-md);
}

.fsd-intro-statement {
    max-width: var(--w-editorial);
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--text-on-light);
    margin: 0;
}

[dir="rtl"] .fsd-intro-statement {
    font-family: var(--font-display);
    line-height: 1.6;
}

/* Company "About" text — real, often long-form company copy (paragraphs,
   not a single editorial statement), so it takes body-scale typography at
   the wider --w-standard measure instead of the Service intro's big
   display-weight treatment, which was legible for a short punchy line but
   read as an oversized headline dropped into a narrow column once the
   content ran to several sentences. */
.fsd-about-text {
    max-width: var(--w-standard);
    font-family: var(--font-functional);
    font-weight: var(--fw-body);
    font-size: 18px;
    line-height: 1.85;
    color: var(--text-on-light);
    margin: 0;
}

[dir="rtl"] .fsd-about-text {
    line-height: 2;
}

/* C. Capabilities — major chapters of the service story, not database
   cards. Photography carries real visual weight (55% of the row, no
   height cap — it's sized by the row's own content, not clipped to a
   thumbnail), and each row's height comes purely from that content, so
   the surrounding charcoal never reads as unexplained empty space. */
.fsd-capability-list {
    margin-top: var(--space-xl);
    display: flex;
    flex-direction: column;
}

.fsd-capability {
    display: grid;
    grid-template-columns: 55% 1fr;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-xl) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* No-image state — a real, deliberate composition (not a missing-asset
   gap). Without a photograph to carry 55% of the row, the row collapses
   to a single, more compact editorial column instead of leaving the
   photography column empty at full cinematic row height. Automatic,
   data-driven: whichever capabilities have no image get this treatment,
   whichever have one keep the image-led row — no slug/index logic. */
.fsd-capability.is-textonly {
    grid-template-columns: 1fr;
    padding: var(--space-lg) 0;
}

.fsd-capability.is-textonly .fsd-capability-body {
    max-width: var(--w-standard);
}

.fsd-capability:first-child {
    border-top: none;
    padding-top: 0;
}

.fsd-capability.is-reversed {
    grid-template-columns: 1fr 55%;
}

.fsd-capability.is-reversed .fsd-capability-media {
    order: 2;
}

.fsd-capability.is-reversed .fsd-capability-body {
    order: 1;
}

.fsd-capability-media {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    background: var(--boh-charcoal);
}

.fsd-capability-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.fsd-capability-media:hover img {
    transform: scale(1.045);
}

.fsd-capability-body .future-chapter-num {
    font-size: clamp(28px, 3vw, 44px);
    -webkit-text-stroke-width: 1.25px;
    display: inline-block;
    margin-bottom: var(--space-sm);
}

.fsd-capability-body h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.12;
    margin: 0 0 var(--space-sm);
    color: var(--text-on-dark);
}

.fsd-capability-body h3 a {
    color: var(--text-on-dark);
}

.fsd-capability-body h3 a:hover {
    color: var(--accent-gold);
}

.fsd-capability-body p {
    max-width: 480px;
    font-family: var(--font-functional);
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-on-dark-muted);
    margin: 0 0 var(--space-md);
}

/* An explore-link inside a dark capability chapter (e.g. Governance
   pillars, a Value item's link) otherwise falls back to the page's
   light default text color, near-invisible on the charcoal background —
   same class of bug as the h3-on-dark fix above. */
.fsd-capability-body .explore-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-on-dark);
}

.fsd-capability-body .explore-link .a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.fsd-capability-body .explore-link .a svg {
    transform: scaleX(-1);
}

[dir="rtl"] .fsd-capability-body .explore-link .a svg {
    transform: none;
}

.fsd-capability-body .explore-link:hover .a {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: var(--boh-charcoal);
    transform: translateX(-3px);
}

[dir="rtl"] .fsd-capability-body .explore-link:hover .a {
    transform: translateX(3px);
}

/* D. Related Projects — an editorial mosaic, not a conventional equal-card
   CMS grid: the first project reads as a lead (2x2), the rest as smaller
   supporting cards, `dense` auto-flow so any count (1, 2, 4, 6, more)
   fills in without visible holes. A single project spans full width
   instead of sitting at 2/3 width beside empty space. */
.fsd-project-grid {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
    gap: 28px 24px;
}

.fsd-project:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.fsd-project-grid:has(.fsd-project:only-child) .fsd-project:only-child {
    grid-column: 1 / -1;
    grid-row: span 1;
}

.fsd-project {
    display: block;
}

.fsd-project-media {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    background: var(--boh-charcoal);
}

.fsd-project:first-child .fsd-project-media {
    aspect-ratio: 5 / 4;
}

.fsd-project-grid:has(.fsd-project:only-child) .fsd-project:only-child .fsd-project-media {
    aspect-ratio: 21 / 9;
}

.fsd-project-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.fsd-project:hover .fsd-project-media img {
    transform: scale(1.03);
}

.fsd-project-body {
    display: block;
    margin-top: 14px;
}

.fsd-project-cat {
    display: block;
    font-family: var(--font-functional);
    font-size: 12px;
    font-weight: var(--fw-label);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--boh-gold);
    margin-bottom: 6px;
}

.fsd-project-title {
    display: block;
    font-family: var(--font-functional);
    font-size: 16px;
    font-weight: var(--fw-label);
    line-height: 1.4;
    color: var(--text-on-dark);
}

.fsd-project:first-child .fsd-project-title {
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.3;
}

.is-light .fsd-project-title {
    color: var(--text-on-light);
}

.fsd-project:hover .fsd-project-title {
    color: var(--boh-gold);
}

.fsd-view-all {
    margin-top: 32px;
}

/* E. Delivered by — quiet, compact; on the dark ground here the logos are
   already inverted-to-white by the shared .delivered-by rules. */
/* Compact identity band, not a full-scale editorial section — a single
   (or a few) real company relationship doesn't need 88px of section
   padding around it to read clearly. */
.fsd-delivered {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

.fsd-delivered .delivered-by {
    gap: 24px;
    flex-wrap: wrap;
}

.fsd-delivered .delivered-by .logos {
    gap: 28px;
}

/* Proof — real derived counts only (see controller), styled as a quiet
   inline strip rather than a decorative stat block. */
.fsd-proof-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
}

.fsd-proof-stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-functional);
    font-size: 13px;
    font-weight: var(--fw-label);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-on-light-muted);
}

.fsd-proof-stat .num {
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: clamp(24px, 2.4vw, 32px);
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-on-light);
}

/* Related capabilities — a compact sibling-navigation row, distinct from
   the single strong "next" CTA that follows it. */
.fsd-related-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.fsd-related-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: 1px solid var(--boh-border);
    border-radius: 999px;
    font-family: var(--font-functional);
    font-weight: var(--fw-nav);
    font-size: 14px;
    color: var(--text-on-light);
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.fsd-related-chip .a {
    display: flex;
    color: var(--accent-gold);
    transform: scaleX(-1);
}

[dir="rtl"] .fsd-related-chip .a {
    transform: none;
}

.fsd-related-chip:hover {
    border-color: var(--accent-gold);
    background: var(--surface-white);
}

.fsd-related-chip.is-active {
    background: var(--surface-charcoal);
    border-color: var(--surface-charcoal);
    color: var(--text-on-dark);
    font-weight: var(--fw-cta);
}

.fsd-related-chip.is-active .a {
    color: var(--text-on-dark);
}

/* G. Next sector — a strong, deliberate closing transition. */
.fsd-next-sector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-xl) 5%;
    background: var(--surface-charcoal);
}

.fsd-next-label {
    font-family: var(--font-functional);
    font-size: 11px;
    font-weight: var(--fw-label);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--boh-slate);
    flex-shrink: 0;
}

.fsd-next-title {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(24px, 3vw, 38px);
    color: #fff;
}

.fsd-next-title .future-chapter-num {
    font-size: clamp(28px, 3vw, 42px);
}

.fsd-next-sector .a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.fsd-next-sector .a svg {
    transform: scaleX(-1);
}

[dir="rtl"] .fsd-next-sector .a svg {
    transform: none;
}

.fsd-next-sector:hover .a {
    background: var(--boh-gold);
    border-color: var(--boh-gold);
    color: var(--boh-charcoal);
    transform: translateX(-4px);
}

[dir="rtl"] .fsd-next-sector:hover .a {
    transform: translateX(4px);
}

/* =========================================================================
   PROJECT DETAIL — /en/portfolio/{project}
   Same visual system as Service/Company (fsd-section, fsd-intro, the
   Delivered By identity band, the Related Projects mosaic, the next-item
   closer). Three genuinely new pieces below: a compact hero fact strip
   (Essentials), an editorial stat grid built for the real 42/42-populated
   `counters` field (Facts & Figures), and an adaptive photography
   sequence (Gallery) — none of the three existed anywhere else on the
   site to reuse.
   ========================================================================= */

/* Essentials — 1 to N short label/value facts (Client, Status, Business),
   never a fixed-column dashboard. Sits directly under the hero at the
   STANDARD tier, not EDITORIAL, since it's a quiet strip, not a section
   carrying its own story. */
.fsd-essentials {
    padding: var(--space-lg) 5%;
    background: var(--surface-cream);
    border-bottom: 1px solid var(--boh-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
}

.fsd-essential dt {
    font-family: var(--font-functional);
    font-size: 11px;
    font-weight: var(--fw-label);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-on-light-muted);
    margin: 0 0 4px;
}

.fsd-essential dd {
    font-family: var(--font-functional);
    font-size: 16px;
    font-weight: var(--fw-nav);
    color: var(--text-on-light);
    margin: 0;
}

/* Facts & Figures — the real `counters` data, tested against a 12-row
   project. Architectural stat grid, not a dashboard: quiet uppercase
   label, one strong Optima/Cairo number per tile, unit folded into the
   number in a lighter weight rather than as a separate row. */
.fsd-facts-grid {
    margin-top: var(--space-xl);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-lg) var(--space-md);
}

.fsd-fact {
    padding-inline-start: var(--space-md);
    border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
}

.fsd-fact .num {
    display: block;
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: clamp(22px, 2vw, 30px);
    color: var(--text-on-dark);
    line-height: 1.2;
    /* A stored value like "1,000,000 م²" (number, then unit — same order
       as the English) was rendering as "م² 1,000,000": a trailing Latin/
       mixed-script run with nothing after it to anchor the paragraph gets
       reordered by the bidi algorithm inside an RTL ancestor. Values that
       already end in a real Arabic word (e.g. "30 كم و700 غرفة") are not
       affected either way — this only pins number+unit sequences. */
    direction: ltr;
}

/* GENERIC glyph-coverage fix for any project fact whose unit uses a
   superscript character (m², m³, م², م³, …). Neither Optima nor Cairo
   (this rule's display face) has these glyphs, and Cairo specifically
   maps them to a genuinely BLANK outline rather than leaving them
   unmapped — confirmed by rendering to an offscreen canvas — so normal
   font-stack fallback never triggers regardless of order. The fix is
   applied per-character in the Blade template (ProjectController's
   $facts are plain arrays; nothing here is specific to any one project
   or value): only ².³ are rewrapped in this class, pinning JUST those
   characters to the functional face, which renders them correctly at
   every weight tested. Every other character in the same number stays
   in the approved Optima/Cairo display face, unchanged. */
.fsd-fact-glyph-fix {
    font-family: var(--font-functional);
}

.fsd-fact .num .unit {
    font-family: var(--font-functional);
    font-weight: var(--fw-body);
    font-size: 0.5em;
    color: var(--text-on-dark-muted);
    margin-inline-start: 4px;
}

.fsd-fact .label {
    display: block;
    margin-top: 6px;
    font-family: var(--font-functional);
    font-size: 13px;
    color: var(--text-on-dark-muted);
    line-height: 1.4;
}

/* Gallery — adaptive editorial sequence: every 3rd image runs full-bleed
   (large), the two between it are paired. Works unmodified for 1 image
   (just the large frame), 2 (large + one solo), 3 (large + pair), and
   repeats the rhythm for many — no JS, no per-count branching. */
.fsd-gallery {
    margin-top: var(--space-xl);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.fsd-gallery-item {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    background: var(--boh-charcoal);
}

.fsd-gallery-item:nth-child(3n+1) {
    grid-column: 1 / -1;
    aspect-ratio: 21 / 9;
}

.fsd-gallery-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   PROJECT DETAIL V2 — Overview, Key Figures, Album + Lightbox.
   ============================================================ */

/* ============================================================
   A. PROJECT OVERVIEW — editorial two-column composition. EN: story
   (~60%) left, essentials (~40%) right, RTL mirrors automatically via
   CSS Grid + the page's own dir="rtl" (no separate RTL markup/CSS).
   No boxed dashboard cards — a hairline divider + typography carry
   the essentials column instead.
   ============================================================ */

.fsd-overview-wrap {
    padding: var(--space-lg) 5% var(--space-xl);
    background: var(--surface-cream);
}

.fsd-overview {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-xl);
    align-items: start;
    margin-top: var(--space-lg);
}

.fsd-overview.is-story-only,
.fsd-overview.is-essentials-only {
    grid-template-columns: 1fr;
}

.fsd-overview-main {
    min-width: 0;
}

.fsd-overview.is-story-only .fsd-overview-main {
    max-width: var(--w-standard);
}

.fsd-overview-essentials {
    margin: 0;
    padding-inline-start: var(--space-lg);
    border-inline-start: 1px solid var(--boh-border);
}

.fsd-overview-essentials-item + .fsd-overview-essentials-item {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--boh-border);
}

.fsd-overview-essentials-item dt {
    font-family: var(--font-functional);
    font-size: 10.5px;
    font-weight: var(--fw-label);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--boh-gold);
    margin: 0 0 6px;
}

.fsd-overview-essentials-item dd {
    font-family: var(--font-functional);
    font-size: 16px;
    font-weight: var(--fw-nav);
    line-height: 1.4;
    color: var(--text-on-light);
    margin: 0;
}

.fsd-overview-story {
    max-width: var(--w-standard);
    font-family: var(--font-functional);
    font-size: 18px;
    line-height: 1.85;
    color: var(--text-on-light);
    margin: 0;
}

[dir="rtl"] .fsd-overview-story {
    line-height: 2;
}

/* Optional Challenge/Impact — shown only when the CMS record actually has
   the content; side-by-side when both exist, single column otherwise. */
.fsd-overview-extra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--boh-border);
}

.fsd-overview-extra.is-single {
    grid-template-columns: 1fr;
    max-width: var(--w-standard);
}

.fsd-overview-extra-block h4 {
    font-family: var(--font-functional);
    font-size: 11px;
    font-weight: var(--fw-label);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--boh-gold);
    margin: 0 0 8px;
}

.fsd-overview-extra-block p {
    font-family: var(--font-functional);
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-on-light);
    margin: 0;
}

.fsd-overview-award {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-md);
    padding: 8px 16px;
    border: 1px solid var(--boh-gold);
    border-radius: 999px;
    font-family: var(--font-functional);
    font-size: 12.5px;
    font-weight: var(--fw-label);
    color: var(--boh-charcoal);
}

.fsd-overview-award svg {
    flex: 0 0 auto;
    color: var(--boh-gold);
}

@media (max-width: 900px) {
    .fsd-overview {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
    }
    .fsd-overview-main,
    .fsd-overview.is-story-only .fsd-overview-main {
        max-width: none;
    }
    .fsd-overview-essentials {
        order: -1;
        padding-inline-start: 0;
        padding-bottom: var(--space-md);
        border-inline-start: none;
        border-bottom: 1px solid var(--boh-border);
    }
}

@media (max-width: 760px) {
    .fsd-overview-extra {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   B. PROJECT KEY FIGURES — scalable (1 to 15+), manual navigation.
   One active figure + a five-row windowed index (Our Scale's interaction
   language, dedicated classes) on desktop; current/total, prev/next, swipe
   and a position marker on mobile. Two typographic modes per figure: numeric (a real statistic)
   and note (descriptive/compound text) — neither is forced into the
   other's treatment.
   ============================================================ */

.fsd-keyfig {
    background: var(--boh-charcoal);
    color: var(--text-on-dark);
    padding: var(--space-lg) 5%;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-xl);
    align-items: center;
}

.fsd-keyfig.is-single {
    grid-template-columns: 1fr;
}

/* A lone figure never changes, so there is no height to reserve. */
.fsd-keyfig.is-single .fsd-keyfig-figures {
    min-height: 0;
}

.fsd-keyfig-stage {
    min-width: 0;
}

.fsd-keyfig-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.fsd-keyfig-counter {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-functional);
    font-size: 12.5px;
    letter-spacing: 0.1em;
    color: var(--text-on-dark-muted);
    font-variant-numeric: tabular-nums;
    direction: ltr; /* "02 / 09" must never bidi-reorder inside an RTL page */
}

.fsd-keyfig-counter .sep {
    opacity: 0.5;
}

.fsd-keyfig-counter b {
    color: #fff;
    font-weight: var(--fw-label);
}

/* The stage reserves the tallest figure's height so nothing shifts on a change,
   and bottom-aligns its content (as Our Scale does) so the active figure always
   sits directly on the position marker that measures it. */
.fsd-keyfig-figures {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 176px;
}

.fsd-keyfig-figure {
    width: 100%;
}

.fsd-keyfig-figure[hidden] {
    display: none;
}

/* Numeric mode — a real statistic: big Optima value + label. */
.fsd-keyfig-value {
    display: block;
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: clamp(40px, 6vw, 76px);
    line-height: 1.05;
    color: #fff;
    direction: ltr;
    unicode-bidi: isolate;
}

[dir="rtl"] .fsd-keyfig-value {
    text-align: right;
}

.fsd-keyfig-unit {
    font-family: var(--font-functional);
    font-weight: var(--fw-body);
    font-size: 0.36em;
    color: var(--text-on-dark-muted);
    /* The parent's forced `direction: ltr` is inherited here by default,
       which breaks an Arabic unit ("م2"): a single embedded RTL character
       ("م") followed by a number inside a forced-LTR run visually swaps
       to read "2م" instead of "م2" (found in this session's AR pass).
       `unicode-bidi: plaintext` makes the browser resolve THIS span's own
       direction from its own first strong character (P2/P3), ignoring the
       inherited `direction` value — so "م2" reads م-then-2 and "km"/"m2"
       are unaffected either way. */
    unicode-bidi: plaintext;
    margin-inline-start: 6px;
}

.fsd-keyfig-label {
    display: block;
    margin-top: var(--space-sm);
    font-family: var(--font-functional);
    font-size: 15px;
    color: var(--text-on-dark-muted);
}

.fsd-keyfig-figure.is-emphasis .fsd-keyfig-value {
    color: var(--boh-gold);
}

/* Note mode — descriptive/compound content ("30 km & 700 manholes",
   "Includes full furnishing"): editorial text, never forced into a giant
   digit. The label (when present) reads as a small eyebrow above it. */
.fsd-keyfig-note-label {
    display: block;
    font-family: var(--font-functional);
    font-size: 11px;
    font-weight: var(--fw-label);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--boh-gold);
    margin-bottom: 10px;
}

.fsd-keyfig-note-text {
    display: block;
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.35;
    color: #fff;
    max-width: 20ch;
}

/* Purely descriptive ("Includes full furnishing") — no numbers exist to
   emphasize; identical to the base treatment above. */

/* Descriptive-engineering with ONE embedded number ("Basement + ground +
   mezzanine + 2 floors") — the sentence stays editorial-sized; the single
   number gets a restrained gold accent, not an oversized digit. */
.fsd-keyfig-note-text--descriptive-numeric .fsd-keyfig-note-num {
    font-weight: var(--fw-stat-strong);
    color: var(--boh-gold);
}

/* Compound numeric ("30 km & 700 manholes") — TWO real engineering
   quantities. Base text drops to a secondary, functional-font size so the
   connecting words/units read as supporting copy, while each number is
   promoted back to a large display-font figure — mirroring the emphasis
   the simple-numeric mode gives a single statistic. */
.fsd-keyfig-note-text--compound {
    max-width: 26ch;
    font-family: var(--font-functional);
    font-weight: var(--fw-body);
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-on-dark-muted);
}

.fsd-keyfig-note-text--compound .fsd-keyfig-note-num {
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: 1.85em;
    color: #fff;
    line-height: 1;
}

[dir="rtl"] .fsd-keyfig-note-text--compound .fsd-keyfig-note-num {
    margin-inline-end: 2px;
}

/* ---------- Windowed index (desktop) ----------
   The same interaction language as Our Scale, with its own dedicated
   classes: a fixed five-row window onto the COMPLETE list. Every figure
   stays in the DOM and reachable; the list scrolls to keep the active row
   centred, so the band's height never depends on how many figures exist.
   No panel, no frame, no scrollbar — hierarchy is tone and one gold rule. */
.fsd-keyfig-index-window {
    position: relative;
    --kf-row: 46px;
    --kf-rows: 5;
    align-self: center;
    max-height: calc(var(--kf-row) * var(--kf-rows));
    overflow: hidden;
}

.fsd-keyfig-index {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: calc(var(--kf-row) * var(--kf-rows));
    overflow-y: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.fsd-keyfig-index::-webkit-scrollbar {
    display: none;
}

/* The leading gutter is reserved for the active row's gold rule, so nothing
   shifts sideways when the active row changes. */
.fsd-keyfig-index-item {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 16px;
    width: 100%;
    min-height: var(--kf-row);
    padding: 11px 0;
    padding-inline-start: 40px;
    background: none;
    border: 0;
    text-align: start;
    cursor: pointer;
    transition: color 0.25s ease;
}

.fsd-keyfig-index-item::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 0;
    height: 1px;
    background: var(--boh-gold);
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.fsd-keyfig-index-num {
    flex: 0 0 auto;
    min-width: 1.6em;
    font-family: var(--font-functional);
    font-size: 12px;
    font-weight: var(--fw-label);
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    color: rgba(233, 237, 238, 0.38);
    direction: ltr;
    transition: color 0.25s ease;
}

.fsd-keyfig-index-label {
    font-family: var(--font-functional);
    font-size: clamp(13.5px, 1.1vw, 16px);
    line-height: 1.3;
    color: rgba(233, 237, 238, 0.58);
    transition: color 0.25s ease;
}

[dir="rtl"] .fsd-keyfig-index-label {
    letter-spacing: 0;
}

.fsd-keyfig-index-item:hover .fsd-keyfig-index-label {
    color: rgba(255, 255, 255, 0.92);
}

.fsd-keyfig-index-item.is-active::before {
    width: 26px;
}

.fsd-keyfig-index-item.is-active .fsd-keyfig-index-num {
    color: var(--boh-gold);
}

.fsd-keyfig-index-item.is-active .fsd-keyfig-index-label {
    color: #fff;
    font-weight: var(--fw-label);
}

.fsd-keyfig-index-item:focus-visible {
    outline: 2px solid var(--boh-gold);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------- Position marker ----------
   A thin rule under the figure whose fill is the active position
   (n / total). It is a marker, never a countdown — Key Figures do not
   advance on their own. */
.fsd-keyfig-progress {
    position: relative;
    height: 3px;
    max-width: 420px;
    margin-top: clamp(18px, 2vw, 26px);
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
    border-radius: 2px;
}

.fsd-keyfig-progress-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 0;
    background: var(--boh-gold);
    box-shadow: 0 0 10px rgba(224, 184, 36, 0.45);
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Phone controls ---------- hidden on desktop, where the index is the navigation. */
.fsd-keyfig-mobile-nav {
    display: none;
}

@media (max-width: 900px) {
    .fsd-keyfig {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .fsd-keyfig-index-window,
    .fsd-keyfig-head {
        display: none;
    }

    /* Touch-first: horizontal swipes change the figure (handled in JS, RTL-aware);
       vertical panning and pinch-zoom stay with the browser. */
    .fsd-keyfig-stage {
        touch-action: pan-y pinch-zoom;
    }

    .fsd-keyfig-figures {
        min-height: 168px;
    }

    .fsd-keyfig-progress {
        max-width: none;
    }

    .fsd-keyfig-mobile-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: var(--space-md);
    }

    .fsd-keyfig-mobile-nav .fsd-keyfig-counter {
        font-size: 14px;
    }

    .fsd-keyfig-mobile-nav button {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.22);
        background: transparent;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: border-color 0.2s ease, background 0.2s ease;
    }

    .fsd-keyfig-mobile-nav button:hover {
        border-color: var(--boh-gold);
        background: rgba(224, 184, 36, 0.12);
    }

    .fsd-keyfig-mobile-nav button:focus-visible {
        outline: 2px solid var(--boh-gold);
        outline-offset: 3px;
    }

    [dir="rtl"] .fsd-keyfig-mobile-nav button svg {
        transform: scaleX(-1);
    }
}

/* ---------- Figure change ----------
   One restrained entrance for the whole figure (value, unit, label, compound
   / descriptive expression move together), a small tick on the counter, and
   the index / rule / marker transitions above. Transition only, with NO
   fill-mode on purpose (same reasoning as Our Scale): a throttled renderer
   can then never leave the active figure stuck at opacity 0. */
.fsd-keyfig-figure.is-entering {
    animation: fsd-keyfig-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fsd-keyfig-enter {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.fsd-keyfig-counter b.is-ticking {
    animation: fsd-keyfig-tick 0.3s ease-out;
}

@keyframes fsd-keyfig-tick {
    from { opacity: 0.35; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fsd-keyfig-figure.is-entering,
    .fsd-keyfig-counter b.is-ticking {
        animation: none;
    }

    .fsd-keyfig-index {
        scroll-behavior: auto;
    }

    .fsd-keyfig-index-item,
    .fsd-keyfig-index-item::before,
    .fsd-keyfig-index-num,
    .fsd-keyfig-index-label,
    .fsd-keyfig-progress-fill,
    .fsd-keyfig-mobile-nav button {
        transition: none;
    }
}

/* ============================================================
   C. PROJECT ALBUM — editorial mosaic + "+N Photos" + lightbox. Tiles sit
   on a light neutral surface (never the charcoal used elsewhere on the
   page) so photos and technical drawings alike read as content on the
   page, not as file attachments in dark boxes. The leading tile gets a
   larger frame via CSS Grid span — never an upscaled image, since
   object-fit: scale-down below refuses to enlarge past native resolution.
   ============================================================ */

.fsd-album-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 168px;
    grid-auto-flow: dense;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.fsd-album-tile {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background: var(--surface-cream-alt);
    border: 1px solid var(--boh-border);
    cursor: pointer;
    padding: 0;
    display: block;
}

/* The leading photo earns a larger frame — but only ever at its own
   native resolution or smaller (see object-fit below), never stretched
   or upscaled past what the source file actually supports. */
.fsd-album-tile:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

/* Preserve the real photo's proportions — scale-down never crops AND
   never enlarges past the image's native pixel size (unlike `contain`,
   which will happily upscale a small source to fill a larger frame); a
   photo smaller than its tile simply sits centered at true size instead
   of being stretched, sliced, or blown up. */
.fsd-album-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.fsd-album-tile:hover img {
    transform: scale(1.03);
}

.fsd-album-tile:focus-visible {
    outline: 2px solid var(--boh-gold);
    outline-offset: 2px;
}

.fsd-album-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 20, 23, 0.72);
    color: #fff;
    font-family: var(--font-functional);
    font-weight: var(--fw-label);
    font-size: 16px;
    letter-spacing: 0.02em;
}

@media (max-width: 760px) {
    .fsd-album-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 140px;
    }
    .fsd-album-tile:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }
}

/* Lightbox — all images, opened from any album tile. */
.fsd-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(10, 14, 17, 0.94);
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.fsd-lightbox[hidden] {
    display: none;
}

.fsd-lightbox-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    color: #fff;
    margin-bottom: 12px;
}

.fsd-lightbox-count {
    font-family: var(--font-functional);
    font-size: 13px;
    direction: ltr;
}

.fsd-lightbox-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fsd-lightbox-close:hover,
.fsd-lightbox-close:focus-visible {
    border-color: var(--boh-gold);
}

.fsd-lightbox-stage {
    position: relative;
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fsd-lightbox-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.fsd-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(17, 22, 26, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.fsd-lightbox-nav:hover,
.fsd-lightbox-nav:focus-visible {
    background: var(--boh-charcoal);
    border-color: var(--boh-gold);
}

.fsd-lightbox-nav.prev {
    inset-inline-start: 8px;
}

.fsd-lightbox-nav.next {
    inset-inline-end: 8px;
}

[dir="rtl"] .fsd-lightbox-nav svg {
    transform: scaleX(-1);
}

.fsd-lightbox-thumbs {
    flex: none;
    display: flex;
    gap: 6px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.fsd-lightbox-thumb {
    flex: none;
    width: 64px;
    aspect-ratio: 4 / 3;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    border: 1px solid transparent;
    padding: 0;
    background: none;
}

.fsd-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fsd-lightbox-thumb.is-active {
    opacity: 1;
    border-color: var(--boh-gold);
}

@media (max-width: 760px) {
    .fsd-lightbox-nav {
        width: 38px;
        height: 38px;
    }
    .fsd-lightbox-thumbs {
        display: none; /* touch/swipe is the navigation on phone; counter still shown */
    }
}

/* ============================================================
   PROJECT DETAIL — mobile Hero title. The shared hero h1 is a fixed 42px
   with no responsive scaling, which wraps a long project title into many
   lines on a phone. Scoped to the hero that directly precedes
   .fsd-project-detail, so no other page's hero (and no desktop hero) changes.
   ============================================================ */
@media (max-width: 700px) {
    .future-page-header:has(+ .fsd-project-detail) .future-page-header-inner h1 {
        font-size: clamp(26px, 7.2vw, 34px);
        line-height: 1.28;
        margin: 12px 0 10px;
    }
    [dir="rtl"] .future-page-header:has(+ .fsd-project-detail) .future-page-header-inner h1 {
        line-height: 1.4;
    }
}

/* Package children — reuses the exact .fsd-capability chapter markup
   (see Service Capabilities), so a project package inherits the same
   number/image/title/description/Explore composition automatically. */

/* =========================================================================
   PORTFOLIO LANDING — /en/portfolio
   Discovery, not storytelling: a scalable ProjectCard/ProjectIndex system
   (distinct from the Related Projects mosaic, which stays reserved for
   "a handful of projects inside someone else's story") plus a restyled
   version of the already-correct server-side filter mechanism.
   ========================================================================= */

/* Filters — the existing query-string/server-side filtering, restyled as
   the same chip language used for Related Capabilities/Services
   elsewhere. Active state is a filled shape (outline → solid), never
   color alone, and carries aria-current in the markup. */
.fsd-filter-group {
    margin-bottom: var(--space-lg);
}

.fsd-filter-group:last-child {
    margin-bottom: 0;
}

.fsd-filter-label {
    display: block;
    font-family: var(--font-functional);
    font-size: 11px;
    font-weight: var(--fw-label);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-on-light-muted);
    margin-bottom: var(--space-sm);
}

.fsd-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.fsd-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--boh-border);
    border-radius: 999px;
    font-family: var(--font-functional);
    font-weight: var(--fw-nav);
    font-size: 14px;
    color: var(--text-on-light);
    background: transparent;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.fsd-filter-chip:hover {
    border-color: var(--accent-gold);
}

.fsd-filter-chip .count {
    font-family: var(--font-display);
    font-size: 12px;
    opacity: 0.6;
}

.fsd-filter-chip.is-active {
    background: var(--surface-charcoal);
    border-color: var(--surface-charcoal);
    color: var(--text-on-dark);
    font-weight: var(--fw-cta);
}

.fsd-filter-chip.is-active .count {
    opacity: 0.75;
}

/* Project Index — a calm, scalable grid. Uniform image ratio and a
   2-line title clamp keep every card the same visual weight regardless
   of title length — no card is allowed to read as "more important" than
   another; that hierarchy belongs to Signature Projects only. */
.fsd-project-index {
    margin-top: var(--space-xl);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl) var(--space-lg);
}

.fsd-project-card {
    display: block;
}

.fsd-project-card-media {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    background: var(--boh-charcoal);
}

.fsd-project-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.fsd-project-card:hover .fsd-project-card-media img {
    transform: scale(1.04);
}

/* STATUS PILL — a solid charcoal plate with a hairline, not a translucent tint.
   The tint inherited its contrast from whatever photograph sat behind it and
   measured as low as 4.61:1 on a pale sky; this holds ~13:1 over any image.
   `inset-inline-end` keeps it on the trailing corner in both directions. */
.fsd-project-card-status {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(24, 31, 36, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 4px 14px rgba(15, 20, 23, 0.3);
    backdrop-filter: none;
    font-family: var(--font-functional);
    font-size: 11.5px;
    font-weight: var(--fw-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
}

.fsd-project-card-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-gold);
}

.fsd-project-card-status.is-completed::before {
    background: #8ab08a;
}

/* NO-PHOTOGRAPH CARD STATE — a project can be published before its photography
   exists. The frame keeps its 4:3 ratio and charcoal ground and is finished with
   a faint corner wash plus a short gold rule, so the card reads as composed
   rather than as a failed image load. Markup/CSS only: no placeholder file. */
.fsd-project-card-media.is-empty {
    background: var(--boh-charcoal-dark, #1e262b);
}

.fsd-project-card-placeholder {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 88% 8%, var(--boh-gold) 0%, transparent 38%),
                radial-gradient(circle at 4% 96%, var(--boh-slate) 0%, transparent 34%);
    opacity: 0.12;
}

.fsd-project-card-placeholder::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 2px;
    background: var(--boh-gold);
    opacity: 0.55;
}

[dir="rtl"] .fsd-project-card-placeholder::after {
    transform: translate(50%, -50%);
}

/* The translucent badge relies on a photograph behind it; on the plain charcoal
   plate it needs its own ground to stay legible. */
.fsd-project-card-media.is-empty .fsd-project-card-status {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: none;
}

/* CARD v2 — integrated image-overlay composition (approved, supersedes the
   earlier "photo, then a separate cream text block below" layout). Adapted
   from the Signature Projects card (.future-showcase-card) down to the
   smaller 3-column grid: the photograph fills the whole card; sector,
   title, location and the CTA sit directly on it inside a restrained
   charcoal gradient, always visible with no hover required. Signature
   Projects itself (.future-showcase-card*) is untouched by this section —
   the two systems now share the same visual idea at two different scales,
   not the same CSS rules. */
.fsd-project-card-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
        rgba(15, 20, 23, 0.94) 0%,
        rgba(15, 20, 23, 0.8) 20%,
        rgba(15, 20, 23, 0.32) 48%,
        rgba(15, 20, 23, 0.05) 68%,
        rgba(15, 20, 23, 0.14) 100%);
    transition: opacity 0.3s ease;
}

.fsd-project-card:hover .fsd-project-card-veil,
.fsd-project-card:focus-within .fsd-project-card-veil {
    opacity: 1.06;
}

/* The no-photograph state already sits on a charcoal placeholder plate
   (.fsd-project-card-placeholder, shared with Signature Projects), so the
   veil is mostly redundant there but kept for one uniform DOM shape and a
   consistent bottom read. */
.fsd-project-card-media.is-empty .fsd-project-card-veil {
    background: linear-gradient(0deg, rgba(15, 20, 23, 0.55) 0%, rgba(15, 20, 23, 0) 55%);
}

.fsd-project-card-body {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 18px 16px;
    color: #fff;
}

.fsd-project-card-cat {
    display: block;
    font-family: var(--font-functional);
    font-size: 11px;
    font-weight: var(--fw-label);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-gold);
    margin-bottom: 6px;
}

/* Long titles wrap to as many lines as they need rather than clipping
   mid-word — capped at 3 lines so one outlier can't dominate the grid;
   still comfortably inside the 4:3 frame (verified against the longest
   real title on file). */
.fsd-project-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: clamp(16.5px, 1.35vw, 19px);
    line-height: 1.35;
    text-wrap: balance;
    color: #fff;
}

.fsd-project-card-place {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-family: var(--font-functional);
    font-size: 12.5px;
    line-height: 1.45;
    color: #cfd6d9;
}

.fsd-project-card-place svg {
    flex: 0 0 auto;
    opacity: 0.75;
}

/* Hover/keyboard-focus only: Client + a short scope line. Height/opacity
   transition only, anchored by the card's own bottom edge — it can never
   cover the title, status pill or CTA above/beside it (see the comment on
   .fsd-project-card-body), and is capped short enough that even a 3-line
   title still leaves it room. Never forced onto a card with neither field. */
.fsd-project-card-extra {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.32s ease, opacity 0.28s ease, margin-top 0.32s ease;
}

@media (hover: hover) and (pointer: fine) {
    .fsd-project-card:hover .fsd-project-card-extra,
    .fsd-project-card:focus-within .fsd-project-card-extra {
        max-height: 90px;
        opacity: 1;
        margin-top: 8px;
    }
}

/* Touch/no fine pointer: never offered. Nothing inside it is essential —
   status/sector/title/location/CTA already cover that — and forcing it
   open on tap would fight the tap-to-navigate gesture the whole card is. */
@media not all and (hover: hover) {
    .fsd-project-card-extra {
        display: none;
    }
}

.fsd-project-card-extra-field {
    font-family: var(--font-functional);
    font-size: 12px;
    line-height: 1.55;
    color: #d5dbde;
}

.fsd-project-card-extra-field b {
    font-weight: var(--fw-label);
    color: #fff;
}

.fsd-project-card-extra-summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fsd-project-card-explore {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-family: var(--font-functional);
    font-weight: var(--fw-cta);
    font-size: 11.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.85;
    transition: opacity 0.25s ease, color 0.25s ease;
}

/* "becomes more prominent" on hover/focus — gold, full opacity, weight and
   tracking stay fixed so nothing reflows. */
.fsd-project-card:hover .fsd-project-card-explore,
.fsd-project-card:focus-within .fsd-project-card-explore {
    color: var(--accent-gold);
    opacity: 1;
}

.fsd-project-card-explore svg {
    transition: transform 0.2s ease;
}

.fsd-project-card:hover .fsd-project-card-explore svg {
    transform: translateX(3px);
}

[dir="rtl"] .fsd-project-card-explore svg {
    transform: scaleX(-1);
}

[dir="rtl"] .fsd-project-card:hover .fsd-project-card-explore svg {
    transform: scaleX(-1) translateX(3px);
}

.fsd-project-card:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 3px;
}

@media (max-width: 760px) {
    .fsd-project-card-body {
        padding: 14px 14px 14px;
    }

    .fsd-project-card-title {
        font-size: 15.5px;
    }
}

.fsd-portfolio-empty {
    padding: var(--space-xl) 0;
    text-align: center;
    font-family: var(--font-functional);
    color: var(--text-on-light-muted);
}

/* Pagination — same mechanism, tokenized and given a visible focus state. */
.future-pagination {
    margin-top: var(--space-xl);
}

.future-pagination a,
.future-pagination span {
    border-radius: 4px;
    border-color: var(--boh-border);
}

.future-pagination .active {
    background: var(--surface-charcoal);
    border-color: var(--surface-charcoal);
}

.future-pagination a:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

/* Closing CTA — restrained, no invented tagline. */
.fsd-portfolio-cta {
    display: block;
    padding: var(--space-section) 5%;
    background: var(--surface-charcoal);
    text-align: center;
}

@media (max-width: 900px) {
    .fsd-section {
        padding: 40px 6%;
    }

    .fsd-capability,
    .fsd-capability.is-reversed {
        display: block;
        padding: var(--space-lg) 0;
    }

    .fsd-capability.is-reversed .fsd-capability-media,
    .fsd-capability.is-reversed .fsd-capability-body {
        order: initial;
    }

    .fsd-capability-media {
        max-height: none;
        aspect-ratio: 16 / 10;
        margin-bottom: 18px;
    }

    .fsd-project-grid {
        grid-template-columns: 1fr;
    }

    .fsd-project:first-child {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .fsd-project:first-child .fsd-project-media {
        aspect-ratio: 4 / 3;
    }

    .fsd-project:first-child .fsd-project-title {
        font-size: 17px;
    }

    .fsd-next-sector {
        flex-wrap: wrap;
        padding: 36px 6%;
    }

    .fsd-essentials {
        gap: var(--space-md) var(--space-xl);
    }

    .fsd-facts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fsd-gallery {
        grid-template-columns: 1fr;
    }

    .fsd-gallery-item:nth-child(3n+1) {
        grid-column: 1;
        aspect-ratio: 4 / 3;
    }

    .fsd-filter-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .fsd-filter-row::-webkit-scrollbar {
        display: none;
    }

    .fsd-filter-chip {
        flex-shrink: 0;
    }

    .fsd-project-index {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}

/* =========================================================================
   NEWS — /en/news, /en/news/{slug}
   Discovery (Index) vs. reading (Detail), same discipline as Portfolio vs.
   Project Detail: NewsCard is its own component (date + excerpt, not a
   status pill), and the Article Body is a real long-form reading system,
   not the short-statement Editorial Intro reused at the wrong scale. The
   Wave 3A media audit found every one of the 35 real cover images at a
   uniform 830×470 source — real, usable for cards and a contained article
   image, but not native-resolution enough for a full-bleed cinematic
   hero, so the article header stays text-led (see .fsd-article-media). */

/* Latest Story — the one real "featured" mechanism News has: publish-date
   ordering, not a curated flag. Large but honest: image only as large as
   its own container, never upscaled past what a 55%-width column needs. */
.fsd-news-lead {
    display: grid;
    grid-template-columns: 55% 1fr;
    align-items: center;
    gap: var(--space-xl);
}

.fsd-news-lead.is-textonly {
    grid-template-columns: 1fr;
}

.fsd-news-lead-media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 4px;
    background: var(--boh-charcoal);
}

.fsd-news-lead-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fsd-news-lead-date {
    display: block;
    font-family: var(--font-functional);
    font-size: 12px;
    font-weight: var(--fw-label);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-gold);
    margin-bottom: var(--space-sm);
}

.fsd-news-lead h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.15;
    margin: 0 0 var(--space-sm);
}

.fsd-news-lead h2 a {
    color: var(--text-on-light);
}

.fsd-news-lead h2 a:hover {
    color: var(--accent-gold);
}

.fsd-news-lead p {
    max-width: 480px;
    font-family: var(--font-functional);
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-on-light-muted);
    margin: 0 0 var(--space-md);
}

/* NewsCard / News Index — equal-weight cards, no arbitrary hierarchy
   beyond the Latest Story above. Own metadata shape (date + excerpt),
   not ProjectCard's status pill. */
.fsd-news-index {
    margin-top: var(--space-xl);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl) var(--space-lg);
}

.fsd-news-card {
    display: block;
}

.fsd-news-card-media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 4px;
    background: var(--boh-charcoal);
}

.fsd-news-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.fsd-news-card:hover .fsd-news-card-media img {
    transform: scale(1.04);
}

.fsd-news-card-body {
    margin-top: 14px;
}

.fsd-news-card.is-textonly .fsd-news-card-body {
    margin-top: 0;
}

.fsd-news-card-date {
    display: block;
    font-family: var(--font-functional);
    font-size: 12px;
    font-weight: var(--fw-label);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-gold);
    margin-bottom: 6px;
}

.fsd-news-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-functional);
    font-weight: var(--fw-label);
    font-size: 16px;
    line-height: 1.4;
    color: var(--text-on-light);
}

.fsd-news-card:hover .fsd-news-card-title {
    color: var(--accent-gold);
}

.fsd-news-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 8px 0 0;
    font-family: var(--font-functional);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-on-light-muted);
}

.fsd-news-card-explore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-family: var(--font-functional);
    font-weight: var(--fw-cta);
    font-size: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-on-light-muted);
}

.fsd-news-card-explore svg {
    transition: transform 0.2s ease;
}

.fsd-news-card:hover .fsd-news-card-explore svg {
    transform: translateX(3px);
}

[dir="rtl"] .fsd-news-card:hover .fsd-news-card-explore svg {
    transform: translateX(-3px);
}

/* Article Metadata — reuses the Project Essentials strip verbatim (see
   .fsd-essentials), just with the one real field News has (publish date). */

/* Article Media — a contained, width-capped editorial image, deliberately
   NOT the full-bleed page-header cover treatment: the audit's uniform
   830×470 source would visibly upscale-blur across a full 1920px+
   viewport. Capping at --w-wide keeps it comfortably within native
   resolution on real screens while still reading as a strong photograph,
   not a thumbnail. */
.fsd-article-media {
    max-width: calc(var(--w-wide) + 10%);
    margin: 0 auto var(--space-xl);
    padding: var(--space-lg) 5% 0;
    box-sizing: border-box;
}

.fsd-article-media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 4px;
}

/* Article Body — real long-form reading, not the short Editorial Intro
   statement. Standard content width, body-scale typography, and real
   support for the actual HTML the CMS stores (headings, lists, links,
   blockquote, strong/em, tables) rather than a single <p>. */
.fsd-article-body {
    max-width: var(--w-standard);
    margin: 0 auto;
    font-family: var(--font-functional);
    font-size: 17px;
    line-height: 1.85;
    color: var(--text-on-light);
}

.fsd-article-body :where(p) {
    margin: 0 0 var(--space-md);
}

.fsd-article-body :where(h2) {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.25;
    margin: var(--space-xl) 0 var(--space-sm);
}

.fsd-article-body :where(h3) {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.3;
    margin: var(--space-lg) 0 var(--space-sm);
}

.fsd-article-body :where(ul, ol) {
    margin: 0 0 var(--space-md);
    padding-inline-start: 1.4em;
}

.fsd-article-body :where(li) {
    margin-bottom: 8px;
}

.fsd-article-body :where(a) {
    color: var(--accent-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fsd-article-body :where(strong) {
    font-weight: var(--fw-label);
}

.fsd-article-body :where(blockquote) {
    margin: var(--space-lg) 0;
    padding-inline-start: var(--space-md);
    border-inline-start: 3px solid var(--accent-gold);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 19px;
    color: var(--text-on-light-muted);
}

.fsd-article-body :where(img) {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: var(--space-md) 0;
}

.fsd-article-body :where(table) {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-md) 0;
    font-size: 15px;
}

.fsd-article-body :where(th, td) {
    padding: 8px 12px;
    border: 1px solid var(--boh-border);
    text-align: start;
}

@media (max-width: 900px) {
    .fsd-news-lead {
        grid-template-columns: 1fr;
    }

    .fsd-news-index {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .fsd-article-body {
        font-size: 16px;
    }
}

/* =========================================================================
   CORPORATE / ABOUT — /en/about-us, /en/philosophy, /en/milestones,
   /en/facts-figures, /en/quality-safety, and the content-ready generic
   CMS pages (CEO Message, How We Work, Sustainable Development Strategy,
   Our Slogan). One institutional/editorial family, reusing the Wave 3A
   Article Body and the existing fsd-capability/proof/related-chip
   components wherever the shape genuinely matches — Timeline and the
   light About-intro grid are the only two truly new pieces this wave.
   ========================================================================= */

/* Corporate portrait — a small, contained, dignified image (e.g. the CEO
   Message photo, a real 277×340 source) — never stretched to a wide
   cinematic frame. Shown only when the record actually has an image;
   orientation (portrait vs landscape) is measured server-side, not
   guessed, so a future landscape corporate photo gets the wide treatment
   automatically instead. */
.fsd-corporate-portrait {
    max-width: 220px;
    margin: 0 auto var(--space-lg);
}

.fsd-corporate-portrait img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--boh-border);
}

/* A landscape corporate image reuses the Article Media treatment
   (.fsd-article-media) directly — no separate class needed. */

.future-page-header.has-cover.is-photo {
    min-height: 500px;
    background:
        linear-gradient(to bottom, rgba(24, 32, 38, 0.66) 0%, rgba(24, 32, 38, 0) 150px),
        linear-gradient(to right, rgba(24, 32, 38, 0.72) 0%, rgba(24, 32, 38, 0.5) 30%, rgba(24, 32, 38, 0) 62%);
}

[dir="rtl"] .future-page-header.has-cover.is-photo {
    background:
        linear-gradient(to bottom, rgba(24, 32, 38, 0.66) 0%, rgba(24, 32, 38, 0) 150px),
        linear-gradient(to left, rgba(24, 32, 38, 0.72) 0%, rgba(24, 32, 38, 0.5) 30%, rgba(24, 32, 38, 0) 62%);
}

.future-page-header.has-cover.is-photo::before {
    opacity: 0;
}

/* Very pale picture (see Hero::params 'light'): a stronger, taller top scrim so the white
   navigation keeps its contrast. Only the top edge; the photo itself is untouched. */
.future-page-header.has-cover.is-photo.is-light::before {
    opacity: 1;
    inset: 0 0 auto 0;
    height: 230px;
    background: linear-gradient(to bottom, rgba(24, 32, 38, 0.8) 0%, rgba(24, 32, 38, 0.55) 90px, rgba(24, 32, 38, 0) 100%);
}

.future-page-header.is-photo .future-page-header-inner {
    justify-content: flex-end;
    padding-bottom: 56px;
}

.future-page-header.is-photo .future-page-header-inner h1,
.future-page-header.is-photo .future-breadcrumb,
.future-page-header.is-photo .future-eyebrow {
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

/* Mobile: the writing hand sits in the lower half of the photograph, so the
   title block moves to the top (over the softly blurred plant/monitor) and
   the gradient fades out downward — title stays readable and the hand,
   pen and notebook stay clear. */
@media (max-width: 700px) {
    .future-page-header.has-cover.is-photo,
    [dir="rtl"] .future-page-header.has-cover.is-photo {
        min-height: 540px;
        background: linear-gradient(to bottom, rgba(24, 32, 38, 0.8) 0%, rgba(24, 32, 38, 0.7) 38%, rgba(24, 32, 38, 0.25) 58%, rgba(24, 32, 38, 0) 70%);
    }

    .future-page-header.is-photo .future-page-header-inner {
        justify-content: flex-start;
        padding-top: 8px;
        padding-bottom: 24px;
    }

    .future-page-header.is-photo .future-page-header-inner h1 {
        font-size: 36px;
        margin: 14px 0 12px;
    }

}

/* Sibling Corporate Navigation — the real siblingGroupFor() menu group,
   restyled as the same chip row used everywhere else (Related
   Capabilities, Related Service). */
.fsd-corporate-siblings {
    margin-top: var(--space-xl);
}

.fsd-capability-body .headline {
    display: block;
    font-family: var(--font-functional);
    font-weight: var(--fw-label);
    font-size: 16px;
    color: var(--text-on-dark);
    margin: 0 0 8px;
}

.fsd-capability-body ul.points {
    margin: 0 0 var(--space-md);
    padding-inline-start: 1.2em;
    font-family: var(--font-functional);
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-on-dark-muted);
}

.fsd-capability-body ul.points li {
    margin-bottom: 6px;
}

/* ============================================================
   Wave 3D — Contact form system, primary info & office cards
   ============================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keeps a phone number/email/URL reading in the correct order inside an
   RTL page, without affecting anything on the LTR site. */
.fsd-ltr {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

.fsd-contact-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-xl);
    align-items: start;
}

@media (max-width: 900px) {
    .fsd-contact-grid {
        grid-template-columns: 1fr;
    }
}

.fsd-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    background: var(--surface-white);
    border-top: 4px solid var(--boh-gold);
    padding: var(--space-lg);
    box-shadow: 0 10px 34px rgba(44, 55, 62, 0.08);
    margin-top: var(--space-md);
}

.fsd-form .hp-field {
    /* Still in the DOM for bots to fill, but never off-canvas: a -9999px offset
       made the Arabic (RTL) page scroll sideways. */
    position: absolute;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.fsd-field {
    display: flex;
    flex-direction: column;
}

.fsd-field-label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--font-functional);
    font-size: 12px;
    font-weight: var(--fw-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-on-light);
    margin-bottom: 8px;
}

.fsd-field-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    font-size: 11px;
    color: var(--text-on-light-muted);
}

.fsd-field-required {
    color: #b3261e;
}

.fsd-form-required-note {
    margin: 0 0 var(--space-sm);
    font-size: 12px;
    color: var(--text-on-light-muted);
}

.fsd-field-input {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--boh-border);
    background: var(--surface-cream);
    padding: 13px 16px;
    font-family: var(--font-functional);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-on-light);
}

textarea.fsd-field-input {
    min-height: 150px;
    resize: vertical;
}

.fsd-field-input:focus-visible {
    outline: 2px solid var(--boh-gold);
    outline-offset: 1px;
}

.fsd-field-input[aria-invalid="true"] {
    border-color: #b3261e;
}

.fsd-field-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: var(--fw-label);
    color: #b3261e;
}

.fsd-form-errors {
    background: #fdecea;
    border: 1px solid #b3261e;
    padding: var(--space-sm) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--space-sm);
}

.fsd-form-errors:focus {
    outline: 2px solid var(--boh-gold);
    outline-offset: 2px;
}

.fsd-form-errors p {
    margin: 0;
    font-family: var(--font-functional);
    font-weight: var(--fw-label);
    font-size: 14px;
    color: #7a1c14;
}

.fsd-form-errors-heading {
    font-weight: 700;
}

.fsd-form-errors ul {
    margin: 0;
    padding-inline-start: 1.2em;
    font-family: var(--font-functional);
    font-size: 13px;
    color: #7a1c14;
}

.fsd-form-status {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--boh-charcoal);
    color: #fff;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-functional);
    font-size: 14px;
    margin-top: var(--space-sm);
}

.fsd-form-status svg {
    flex-shrink: 0;
}

.fsd-form-actions {
    margin-top: var(--space-xs);
}

.fsd-form-actions .future-cta {
    min-height: 48px;
    cursor: pointer;
    border: none;
    font-family: var(--font-functional);
}

.fsd-contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.fsd-contact-info .fsd-contact-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.fsd-contact-info .fsd-contact-row .ico {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--boh-charcoal);
    color: var(--boh-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fsd-contact-info .fsd-contact-row .label {
    font-family: var(--font-functional);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-on-light-muted);
    margin-bottom: 4px;
}

.fsd-contact-info .fsd-contact-row .value {
    font-family: var(--font-functional);
    font-size: 15px;
    color: var(--text-on-light);
}

.fsd-contact-info .fsd-contact-row .value a {
    color: inherit;
}

.fsd-contact-info .fsd-contact-row .value a:hover {
    color: var(--accent-gold);
}

.fsd-contact-map {
    margin-top: var(--space-md);
    box-shadow: 0 10px 34px rgba(44, 55, 62, 0.08);
    line-height: 0;
}

.fsd-contact-map iframe {
    width: 100%;
    display: block;
    border: 0;
}

.fsd-office-grid {
    margin-top: var(--space-lg);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-lg);
}

.fsd-office-card {
    padding: var(--space-sm) 0 0;
    border-top: 2px solid var(--boh-gold);
}

.fsd-office-card h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: 18px;
    color: var(--text-on-light);
    margin: 0 0 8px;
}

.fsd-office-card a.email {
    display: inline-flex;
    font-family: var(--font-functional);
    font-size: 13px;
    color: var(--text-on-light-muted);
    word-break: break-all;
}

.fsd-office-card a.email:hover {
    color: var(--accent-gold);
}

@media (max-width: 600px) {
    .fsd-form {
        padding: var(--space-md);
    }
}

/* ============================================================
   EXPLORE MORE — shared visual related-page component, replacing
   .fsd-related-chip everywhere a corporate/ESG page links to its
   real siblings (page.blade.php, philosophy, history, quality,
   facts/index). Reuses the same card language as .fsd-news-card:
   a real cover image where the destination has one, an honest
   numbered typographic card everywhere else — never a borrowed or
   invented image.
   ============================================================ */
.fsd-explore-more {
    padding-top: var(--space-lg);
}

.fsd-explore-grid {
    margin-top: var(--space-lg);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-lg);
}

.fsd-explore-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-white);
    box-shadow: 0 10px 34px rgba(44, 55, 62, 0.08);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.fsd-explore-card:hover,
.fsd-explore-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(44, 55, 62, 0.14);
}

.fsd-explore-card {
    height: 100%;
    padding-bottom: var(--space-md);
}

.fsd-explore-card:hover .fsd-explore-card-title,
.fsd-explore-card:focus-visible .fsd-explore-card-title {
    color: var(--accent-gold);
}

.fsd-explore-card-media.is-typographic {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: var(--space-md);
    background:
        radial-gradient(circle at 88% 12%, rgba(199, 161, 74, 0.22) 0%, transparent 46%),
        linear-gradient(155deg, #3b4a53 0%, var(--boh-charcoal) 55%, var(--boh-charcoal-dark) 100%);
    box-sizing: border-box;
}

.fsd-explore-card-media.is-typographic::after {
    content: "";
    position: absolute;
    top: var(--space-md);
    inset-inline-start: var(--space-md);
    width: 36px;
    height: 3px;
    background: var(--boh-gold);
}

.fsd-explore-card-media.is-typographic .future-chapter-num {
    font-size: clamp(56px, 6vw, 84px);
    line-height: 1;
    margin: 0;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.55);
    transition: -webkit-text-stroke-color 0.25s ease;
}

.fsd-explore-card:hover .fsd-explore-card-media.is-typographic .future-chapter-num {
    -webkit-text-stroke-color: var(--boh-gold);
}

.fsd-explore-card-media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--boh-charcoal);
}

.fsd-explore-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.fsd-explore-card:hover .fsd-explore-card-media img {
    transform: scale(1.04);
}

.fsd-explore-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-md) var(--space-md) 0;
}

.fsd-explore-card-title {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: 19px;
    line-height: 1.3;
    color: var(--text-on-light);
    transition: color 0.2s ease;
}

.fsd-explore-card-excerpt {
    margin-top: 8px;
    font-family: var(--font-functional);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-on-light-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fsd-explore-card .explore-link {
    margin-top: auto;
    padding-top: var(--space-sm);
    color: var(--text-on-light);
}

.fsd-explore-viewall {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--space-lg);
    font-family: var(--font-functional);
    font-weight: var(--fw-cta);
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-on-light);
}

.fsd-explore-viewall svg {
    transform: scaleX(-1);
    transition: transform 0.2s ease;
}

[dir="rtl"] .fsd-explore-viewall svg {
    transform: none;
}

.fsd-explore-viewall:hover {
    color: var(--accent-gold);
}

.fsd-explore-viewall:hover svg {
    transform: scaleX(-1) translateX(3px);
}

[dir="rtl"] .fsd-explore-viewall:hover svg {
    transform: translateX(-3px);
}

/* ============================================================
   ABOUT US — rebuilt landing page. Hero (CMS photo, with an
   optional phone crop) → Who We Are → Saudi identity band →
   Our Story (balanced chapter cards, reusing the Explore More
   card architecture) → Facts at scale → Businesses bridge →
   closing contact card. Light sections dominate; a single dark
   band carries the Facts.
   ============================================================ */
.fsd-gold-rule {
    display: block;
    width: 44px;
    height: 3px;
    background: var(--boh-gold);
    margin-bottom: 20px;
}

/* Hero — wider text-side scrim for a busy architectural photograph. The
   photograph is never mirrored (it carries real signage); only the
   gradient direction follows the reading direction. */
.future-page-header.has-cover.is-photo.is-scrim {
    background:
        linear-gradient(to bottom, rgba(24, 32, 38, 0.66) 0%, rgba(24, 32, 38, 0) 150px),
        linear-gradient(to right, rgba(24, 32, 38, 0.8) 0%, rgba(24, 32, 38, 0.58) 17%, rgba(24, 32, 38, 0.1) 31%, rgba(24, 32, 38, 0) 42%);
}

[dir="rtl"] .future-page-header.has-cover.is-photo.is-scrim {
    background:
        linear-gradient(to bottom, rgba(24, 32, 38, 0.66) 0%, rgba(24, 32, 38, 0) 150px),
        linear-gradient(to left, rgba(24, 32, 38, 0.8) 0%, rgba(24, 32, 38, 0.58) 17%, rgba(24, 32, 38, 0.1) 31%, rgba(24, 32, 38, 0) 42%);
}

@media (max-width: 700px) {
    .future-page-header.has-cover.is-photo.is-scrim,
    [dir="rtl"] .future-page-header.has-cover.is-photo.is-scrim {
        background: linear-gradient(to bottom, rgba(24, 32, 38, 0.74) 0%, rgba(24, 32, 38, 0.55) 34%, rgba(24, 32, 38, 0.14) 56%, rgba(24, 32, 38, 0) 68%);
    }
}

/* Shared wide measure for every About Us section body. */
.fsd-story > .future-eyebrow-row,
.fsd-story > .fsd-story-grid,
.fsd-facts > *,
.fsd-close > * {
    width: 100%;
    max-width: var(--w-wide);
    margin-inline: auto;
    box-sizing: border-box;
}

/* Who We Are */
.fsd-who-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-xl);
    align-items: center;
    max-width: var(--w-wide);
    margin: 0 auto;
}

.fsd-who-grid.is-no-media {
    grid-template-columns: minmax(0, var(--w-standard));
    justify-content: center;
}

.fsd-who-media {
    margin: 0;
}

.fsd-who-media img {
    display: block;
    width: 100%;
    /* The team photograph is natively 3:2, so it is shown whole (4:3 cropped it). */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 16px 40px rgba(44, 55, 62, 0.14);
}

.fsd-who-copy h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.15;
    margin: 0 0 var(--space-md);
    color: var(--text-on-light);
}

.fsd-who-text,
.fsd-who-text p {
    font-family: var(--font-functional);
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.75;
    color: var(--boh-charcoal-dark);
    margin: 0;
}

/* Tighter section rhythm than the generic 88px so the photo and copy read as one block. */
.fsd-who.fsd-section {
    padding-block: var(--space-xl);
}

.fsd-who-text p + p {
    margin-top: 1.2em;
}

[dir="rtl"] .fsd-who-text,
[dir="rtl"] .fsd-who-text p {
    line-height: 1.95;
}

/* Our Story */
.fsd-story.alt,
.fsd-close.alt {
    background: var(--surface-cream-alt);
}

.fsd-story-grid {
    margin-top: var(--space-lg);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.fsd-story-card.span-2 {
    grid-column: span 2;
}

.fsd-story-card.span-3 {
    grid-column: span 3;
}

.fsd-story-card.span-2,
.fsd-story-card.span-3 {
    flex-direction: row;
    padding-bottom: 0;
}

.fsd-story-card.span-2 .fsd-explore-card-media,
.fsd-story-card.span-3 .fsd-explore-card-media {
    flex: 0 0 42%;
    aspect-ratio: auto;
    min-height: 280px;
}

.fsd-story-card.span-2 .fsd-explore-card-body,
.fsd-story-card.span-3 .fsd-explore-card-body {
    justify-content: center;
    padding: var(--space-lg);
}

.fsd-story-card.span-2 .explore-link,
.fsd-story-card.span-3 .explore-link {
    margin-top: var(--space-md);
}

/* Single cards share one visual area (16:10) and a two-line title slot, so titles,
   excerpts and the Explore link line up across a row whatever the image, title
   length or excerpt. (Cards used to stretch their image to the tallest neighbour,
   which pushed titles to different heights.) */
.fsd-story-card:not(.span-2):not(.span-3) .fsd-explore-card-media {
    flex: 0 0 auto;
}

.fsd-story-card:not(.span-2):not(.span-3) .fsd-explore-card-title {
    min-height: 2.6em;
}

.fsd-story-card.is-lead .fsd-explore-card-title {
    font-size: clamp(24px, 2.4vw, 32px);
}

.fsd-story-card .fsd-explore-card-excerpt {
    font-size: 15px;
}

.fsd-story-card.is-lead .fsd-explore-card-excerpt {
    -webkit-line-clamp: 4;
    font-size: 16px;
}

.fsd-story-num {
    position: absolute;
    top: var(--space-sm);
    inset-inline-start: var(--space-sm);
    padding: 5px 11px;
    background: rgba(24, 32, 38, 0.72);
    color: #fff;
    font-family: var(--font-functional);
    font-weight: var(--fw-label);
    font-size: 13px;
    letter-spacing: 0.12em;
}

/* Facts & Figures — architectural scale, real CMS values only. */
.fsd-facts {
    background: linear-gradient(155deg, #34424a 0%, var(--boh-charcoal) 55%, var(--boh-charcoal-dark) 100%);
    color: var(--text-on-dark);
    border-bottom: 0;
}

.fsd-facts-grid {
    margin-top: var(--space-lg);
    display: grid;
    grid-template-columns: repeat(var(--facts-count, 3), minmax(0, 1fr));
}

.fsd-fact {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-md);
    border-inline-start: 1px solid rgba(255, 255, 255, 0.16);
}

.fsd-fact:first-child {
    border-inline-start: 0;
    padding-inline-start: 0;
}

.fsd-fact-num {
    display: flex;
    align-items: baseline;
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: clamp(72px, 9.5vw, 140px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
}

.fsd-fact-num .unit {
    font-size: 0.42em;
    color: var(--boh-gold);
    margin-inline-start: 4px;
}

.fsd-fact-label::before {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    background: var(--boh-gold);
    margin-bottom: var(--space-sm);
}

.fsd-fact-label b {
    display: block;
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.2;
    color: #fff;
}

.fsd-fact-label span {
    display: block;
    margin-top: 8px;
    font-family: var(--font-functional);
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-on-dark-muted);
}

/* Arabic joins its letters: no tracking, no case transform, a touch larger to match the Latin caps. */
[dir="rtl"] .fsd-fact-label span {
    letter-spacing: 0;
    text-transform: none;
    font-size: 17px;
}

[dir="rtl"] .fsd-fact-num {
    letter-spacing: 0;
}

.fsd-facts .explore-link {
    display: inline-flex;
    margin-top: var(--space-lg);
    color: #fff;
}

.fsd-facts .explore-link .a {
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

/* Businesses bridge */
.fsd-biz-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-xl);
    align-items: center;
    max-width: var(--w-wide);
    margin: 0 auto;
}

.fsd-biz-grid.is-no-media {
    grid-template-columns: minmax(0, var(--w-standard));
    justify-content: center;
}

.fsd-biz-media {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 16px 40px rgba(44, 55, 62, 0.16);
    background: var(--surface-cream-alt);
}

.fsd-biz-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fsd-biz-copy h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.15;
    margin: var(--space-sm) 0 var(--space-md);
    color: var(--text-on-light);
}

.fsd-biz-sectors {
    list-style: none;
    margin: 0 0 var(--space-lg);
    padding: 0;
    border-top: 1px solid var(--boh-border);
}

.fsd-biz-sectors li {
    border-bottom: 1px solid var(--boh-border);
}

.fsd-biz-sectors a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-on-light);
    transition: color 0.2s ease, padding 0.2s ease;
}

.fsd-biz-sectors a::after {
    content: "\2192";
    font-family: var(--font-functional);
    color: var(--boh-gold);
}

[dir="rtl"] .fsd-biz-sectors a::after {
    content: "\2190";
}

.fsd-biz-sectors a:hover {
    color: var(--accent-gold);
    padding-inline-start: 6px;
}

/* Closing contact section — a self-contained gold card on a light ground,
   with its own breathing room above the footer. */
.fsd-close.fsd-section {
    padding-block: var(--space-section);
    border-bottom: 0;
}

.fsd-close-card {
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
    background: linear-gradient(135deg, var(--boh-gold) 0%, var(--boh-gold) 60%, rgba(255, 255, 255, 0.35) 200%);
    color: var(--boh-charcoal-dark);
    box-shadow: 0 18px 44px rgba(44, 55, 62, 0.16);
}

.fsd-close-card .future-eyebrow {
    color: var(--boh-charcoal-dark);
}

.fsd-close-card h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.15;
    margin: var(--space-sm) 0 var(--space-sm);
}

.fsd-close-card p {
    max-width: 560px;
    margin: 0 auto var(--space-lg);
    font-family: var(--font-functional);
    font-size: 18px;
    line-height: 1.7;
}

.fsd-close-card .fsd-close-cta {
    display: inline-block;
    padding: 15px 34px;
    background: var(--boh-charcoal-dark);
    color: #fff;
    font-family: var(--font-functional);
    font-weight: var(--fw-cta);
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background 0.2s ease, transform 0.2s ease;
}

.fsd-close-card .fsd-close-cta:hover {
    background: #000;
    color: #fff;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1000px) {
    .fsd-who-grid,
    .fsd-biz-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }
}

@media (min-width: 701px) and (max-width: 1000px) {
    .fsd-story-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fsd-story-card.is-lead,
    .fsd-story-card.span-3,
    .fsd-story-card.is-tablet-wide {
        grid-column: 1 / -1;
    }

    .fsd-story-card.is-tablet-wide:not(.span-2):not(.span-3),
    .fsd-story-card.is-lead {
        flex-direction: row;
        padding-bottom: 0;
    }

    .fsd-story-card.is-tablet-wide:not(.span-2):not(.span-3) .fsd-explore-card-media,
    .fsd-story-card.is-lead .fsd-explore-card-media {
        flex: 0 0 50%;
        aspect-ratio: auto;
        min-height: 240px;
    }

    .fsd-story-card.is-tablet-wide:not(.span-2):not(.span-3) .fsd-explore-card-body,
    .fsd-story-card.is-lead .fsd-explore-card-body {
        justify-content: center;
        padding: var(--space-lg);
    }

}

@media (max-width: 700px) {
    .fsd-story-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fsd-story-card,
    .fsd-story-card.is-lead,
    .fsd-story-card.span-2,
    .fsd-story-card.span-3,
    .fsd-story-card.is-tablet-wide {
        grid-column: auto;
        flex-direction: column;
        padding-bottom: var(--space-md);
    }

    .fsd-story-card .fsd-explore-card-media,
    .fsd-story-card.is-lead .fsd-explore-card-media,
    .fsd-story-card.span-2 .fsd-explore-card-media,
    .fsd-story-card.span-3 .fsd-explore-card-media,
    .fsd-story-card.is-tablet-wide .fsd-explore-card-media {
        flex: 0 0 auto;
        aspect-ratio: 16 / 10;
        min-height: 0;
    }

    .fsd-story-card .fsd-explore-card-body,
    .fsd-story-card.span-2 .fsd-explore-card-body,
    .fsd-story-card.span-3 .fsd-explore-card-body,
    .fsd-story-card.is-tablet-wide .fsd-explore-card-body,
    .fsd-story-card.is-lead .fsd-explore-card-body {
        padding: var(--space-md) var(--space-md) 0;
    }

    .fsd-facts-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fsd-fact,
    .fsd-fact:first-child {
        border-inline-start: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
        padding: var(--space-lg) 0;
    }

    .fsd-fact:first-child {
        border-top: 0;
        padding-top: var(--space-sm);
    }

    .fsd-close-card {
        padding: var(--space-lg) var(--space-md);
    }
}

/* Story cards: anchor cover photos toward the top so a portrait shown in a
   landscape frame keeps the face in view. */
.fsd-story-card .fsd-explore-card-media img {
    object-position: center 18%;
}

/* ============================================================
   OUR HISTORY — unified History + Milestones page. Dark editorial
   header (shared page-header), panoramic artwork band, "Our Roots"
   with the founding year as a large marker, then "Our Journey": a
   chronological timeline with a central spine and alternating
   entries on desktop, a single left-spine column on mobile.
   ============================================================ */
/* Our Roots */
.fsd-roots.fsd-section {
    padding-top: var(--space-lg);
}

.fsd-roots-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-xl);
    align-items: center;
    max-width: var(--w-wide);
    margin: 0 auto;
}

.fsd-roots-grid.is-no-marker {
    grid-template-columns: minmax(0, var(--w-standard));
    justify-content: center;
}

.fsd-roots-num {
    display: block;
    margin-top: var(--space-sm);
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: clamp(110px, 16vw, 230px);
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--boh-charcoal);
}

.fsd-roots-num::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin-top: var(--space-md);
    background: var(--boh-gold);
}

.fsd-roots-text,
.fsd-roots-text p {
    font-family: var(--font-functional);
    font-size: clamp(20px, 1.9vw, 26px);
    line-height: 1.75;
    color: var(--boh-charcoal-dark);
    margin: 0;
}

.fsd-roots-text p + p {
    margin-top: 1.1em;
}

[dir="rtl"] .fsd-roots-text,
[dir="rtl"] .fsd-roots-text p {
    line-height: 2;
}

/* Our Journey — timeline */
.fsd-journey.alt {
    background: var(--surface-cream-alt);
}

.fsd-journey > .future-eyebrow-row {
    max-width: var(--w-wide);
    margin-inline: auto;
}

/* Alternating two-column timeline. A grid (not stacked cards pulled up by hand-tuned
   negative margins) so an entry can never collide with, or float far from, its
   neighbours whatever its image or text length: entries alternate columns in
   chronological order, each right-hand entry sits a fixed step lower than its
   left-hand partner, and rows are only as tall as their taller card. */
.fsd-tl {
    --tl-gap: 56px;
    --tl-stagger: 72px;
    list-style: none;
    margin: var(--space-xl) auto 0;
    padding: 0;
    max-width: var(--w-wide);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: calc(var(--tl-gap) * 2);
    row-gap: var(--space-lg);
    align-items: start;
}

.fsd-tl::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    inset-inline-start: 50%;
    width: 2px;
    margin-inline-start: -1px;
    background: linear-gradient(to bottom, rgba(199, 161, 74, 0), var(--boh-gold) 4%, var(--boh-gold) 96%, rgba(199, 161, 74, 0));
}

.fsd-tl-item {
    position: relative;
    min-width: 0;
}

.fsd-tl-item.is-start {
    grid-column: 1;
}

.fsd-tl-item.is-end {
    grid-column: 2;
    margin-top: var(--tl-stagger);
}

.fsd-tl-dot {
    position: absolute;
    top: 30px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--boh-gold);
    border: 4px solid var(--surface-cream-alt);
    box-shadow: 0 0 0 2px var(--boh-gold);
    box-sizing: border-box;
}

.fsd-tl-item.is-start .fsd-tl-dot {
    inset-inline-end: calc(-1 * var(--tl-gap) - 8px);
}

.fsd-tl-item.is-end .fsd-tl-dot {
    inset-inline-start: calc(-1 * var(--tl-gap) - 8px);
}

/* Connector from card edge to the spine */
.fsd-tl-item::after {
    content: "";
    position: absolute;
    top: 37px;
    width: calc(var(--tl-gap) - 8px);
    height: 2px;
    background: var(--boh-gold);
    opacity: 0.55;
}

.fsd-tl-item.is-start::after {
    inset-inline-end: calc(-1 * var(--tl-gap) + 8px);
}

.fsd-tl-item.is-end::after {
    inset-inline-start: calc(-1 * var(--tl-gap) + 8px);
}

.fsd-tl-card {
    background: var(--surface-white);
    box-shadow: 0 10px 34px rgba(44, 55, 62, 0.08);
    overflow: hidden;
}

/* State A — image card: the assigned photograph fills a 16:9 frame (cover, never
   stretched), with a pale placeholder so a not-yet-loaded picture never reads as
   a black block. Source images that carry their own black ground are not shown
   this way: an editor switches them to state B (Show image on History page). */
.fsd-tl-media {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface-cream-alt);
}

.fsd-tl-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

/* A wide diagram (2:1 or wider) is shown whole, never cropped, on the white it was drawn on. */
.fsd-tl-media.is-whole {
    background: #fff;
}

.fsd-tl-media.is-whole img {
    object-fit: contain;
    object-position: center;
}
.fsd-tl-body {
    padding: var(--space-md) var(--space-md) var(--space-md);
}

.fsd-tl-year {
    display: block;
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: clamp(44px, 4.6vw, 64px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--boh-charcoal-dark);
}

.fsd-tl-year::after {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin: 12px 0 var(--space-sm);
    background: var(--boh-gold);
}

.fsd-tl-body h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: clamp(21px, 1.9vw, 26px);
    line-height: 1.25;
    margin: 0 0 10px;
    color: var(--text-on-light);
}

.fsd-tl-body p {
    font-family: var(--font-functional);
    font-size: 17px;
    line-height: 1.75;
    color: var(--boh-charcoal-dark);
    margin: 0;
}

[dir="rtl"] .fsd-tl-body p {
    line-height: 1.95;
}

/* State B — typographic card (no image, or image switched off): the year is the
   visual. Same white card, title and text as state A; a gold top edge and a larger
   year in the brand charcoal replace the picture — no empty plate. */
.fsd-tl-item.is-typographic .fsd-tl-card {
    border-top: 3px solid var(--boh-gold);
}

.fsd-tl-item.is-typographic .fsd-tl-year {
    font-size: clamp(56px, 6vw, 88px);
}

@media (max-width: 900px) {
    .fsd-roots-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }

    .fsd-roots-num {
        font-size: clamp(96px, 30vw, 160px);
    }
}

@media (max-width: 800px) {
    .fsd-tl {
        --tl-gap: 0px;
        display: flex;
        flex-direction: column;
        row-gap: 0;
        margin-top: var(--space-lg);
    }

    .fsd-tl::before {
        inset-inline-start: 11px;
    }

    .fsd-tl-item,
    .fsd-tl-item.is-start,
    .fsd-tl-item.is-end {
        width: auto;
        align-self: stretch;
        margin-inline-start: 40px;
        margin-top: var(--space-md);
    }

    .fsd-tl-item:first-child {
        margin-top: 0;
    }

    .fsd-tl-item.is-start .fsd-tl-dot,
    .fsd-tl-item.is-end .fsd-tl-dot {
        inset-inline-start: -37px;
        inset-inline-end: auto;
    }

    .fsd-tl-item.is-start::after,
    .fsd-tl-item.is-end::after {
        inset-inline-start: -21px;
        inset-inline-end: auto;
        width: 21px;
    }

    .fsd-tl-item.is-typographic .fsd-tl-year {
        font-size: clamp(48px, 14vw, 64px);
    }
}

/* Card media for a panoramic image (chosen from the real aspect ratio by
   App\Support\CardImage — never by page name): shown whole on the same
   charcoal plate as the typographic panel instead of being cropped by the
   card frame. The artwork additionally gets the hero's soft vignette so its
   pale paper ground melts into the plate. */
.fsd-explore-card-media.is-contain {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 88% 12%, rgba(199, 161, 74, 0.22) 0%, transparent 46%),
        linear-gradient(155deg, #3b4a53 0%, var(--boh-charcoal) 55%, var(--boh-charcoal-dark) 100%);
}

.fsd-explore-card-media.is-contain img {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

/* Illustration card (Page.artwork used as a card image): the drawing is shown whole on
   the warm paper it was painted on, so the plate and the image ground are one colour —
   no charcoal rectangle, no glow, no visible image edge (a whisper of edge fade only). */
.fsd-explore-card-media.is-art {
    background: #fdf4d5;
}

.fsd-explore-card-media.is-art img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-composite: intersect;
}

/* ============================================================
   PHILOSOPHY — Our Philosophy (cream), Vision / Mission / Values
   (one charcoal band) and Our Values (pale-blue card grid). Sits
   under the shared inner hero; all content is CMS-driven.
   ============================================================ */
.fsd-phi {
    padding: var(--space-section) 5%;
}

.fsd-phi-inner {
    max-width: var(--w-wide);
    margin-inline: auto;
}

.fsd-phi-philosophy {
    background: var(--surface-cream);
}

/* One large editorial statement, set off by a gold rule. */
.fsd-phi-statement {
    max-width: var(--w-standard);
    margin-top: var(--space-lg);
    padding-inline-start: var(--space-lg);
    border-inline-start: 3px solid var(--boh-gold);
}

.fsd-phi-statement p {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.45;
    color: var(--boh-charcoal-dark);
}

[dir="rtl"] .fsd-phi-statement p {
    line-height: 1.8;
}

/* The charcoal band is as tall as its content: compact padding, no fixed or
   minimum height. Three columns split by hairlines (the Facts & Figures
   rhythm); the columns carry no padding of their own above or below. */
.fsd-phi-band {
    padding-block: var(--space-xl);
    background: linear-gradient(155deg, #34424a 0%, var(--boh-charcoal) 55%, var(--boh-charcoal-dark) 100%);
    color: var(--text-on-dark);
}

.fsd-phi-cols {
    margin-top: var(--space-lg);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fsd-phi-col {
    padding-inline: var(--space-lg);
    border-inline-start: 1px solid rgba(255, 255, 255, 0.16);
}

.fsd-phi-col:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
}

.fsd-phi-col:last-child {
    padding-inline-end: 0;
}

.fsd-phi-num {
    display: block;
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: clamp(56px, 6vw, 84px);
    line-height: 1.1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4);
}

.fsd-phi-col h3 {
    margin: var(--space-sm) 0;
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(26px, 2.4vw, 34px);
    line-height: 1.2;
    color: #fff;
}

.fsd-phi-col h3::before {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin-bottom: var(--space-sm);
    background: var(--boh-gold);
}

.fsd-phi-col p {
    margin: 0;
    font-family: var(--font-functional);
    font-size: 17px;
    line-height: 1.75;
    color: #dfe5e8;
}

[dir="rtl"] .fsd-phi-col p {
    line-height: 1.95;
}

/* Values: every card the same width. Three per row on desktop; a shorter
   last row (the 3 + 2 of the five current values) is centred, never
   stretched, whatever the CMS count. */
.fsd-phi-values {
    background: var(--surface-cream-alt);
}

.fsd-phi-value-grid {
    --phi-gap: var(--space-md);
    margin-top: var(--space-lg);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--phi-gap);
}

.fsd-phi-value {
    flex: 0 0 calc((100% - 2 * var(--phi-gap)) / 3);
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    background: var(--surface-white);
    border-top: 3px solid var(--boh-gold);
    box-shadow: 0 10px 34px rgba(44, 55, 62, 0.06);
}

.fsd-phi-value-num {
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: clamp(44px, 4.4vw, 64px);
    line-height: 1.1;
    color: var(--boh-charcoal);
}

.fsd-phi-value h3 {
    margin: var(--space-xs) 0 var(--space-sm);
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(24px, 2.1vw, 30px);
    line-height: 1.2;
    color: var(--text-on-light);
}

.fsd-phi-value .headline {
    display: block;
    margin-bottom: var(--space-sm);
    font-family: var(--font-functional);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.5;
    color: var(--boh-charcoal-dark);
}

.fsd-phi-value .points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fsd-phi-value .points li {
    position: relative;
    padding-inline-start: 20px;
    font-family: var(--font-functional);
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-on-light-muted);
}

.fsd-phi-value .points li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.7em;
    width: 7px;
    height: 7px;
    background: var(--boh-gold);
}

.fsd-phi-value p {
    margin: 0;
    font-family: var(--font-functional);
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-on-light-muted);
}

.fsd-phi-value .explore-link {
    margin-top: var(--space-sm);
}

@media (max-width: 1000px) {
    .fsd-phi-cols {
        grid-template-columns: minmax(0, 1fr);
    }

    .fsd-phi-col,
    .fsd-phi-col:first-child,
    .fsd-phi-col:last-child {
        padding: var(--space-lg) 0;
        border-inline-start: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
    }

    .fsd-phi-col:first-child {
        border-top: 0;
        padding-top: var(--space-sm);
    }

    .fsd-phi-col:last-child {
        padding-bottom: 0;
    }

    /* Tablet: two per row, an odd last card centred. */
    .fsd-phi-value {
        flex-basis: calc((100% - var(--phi-gap)) / 2);
    }
}

@media (max-width: 640px) {
    .fsd-phi {
        padding-block: var(--space-xl);
    }

    .fsd-phi-band {
        padding-block: var(--space-xl);
    }

    .fsd-phi-statement {
        padding-inline-start: var(--space-md);
    }

    /* Phone: a single clean column. */
    .fsd-phi-value {
        flex-basis: 100%;
        padding: var(--space-md);
    }
}

/* ============================================================
   CEO MESSAGE — editorial two-column body under the shared inner
   hero (page-cinematic.blade.php). Portrait + identity on the
   reading-start side (the grid mirrors itself under dir="rtl"),
   the letter on the other. All text is CMS-driven.
   ============================================================ */
.fsd-ceo {
    padding: var(--space-section) 5% var(--space-lg);
    background: var(--surface-cream);
}

.fsd-ceo-layout {
    max-width: var(--w-wide);
    margin-inline: auto;
    display: grid;
    /* The supplied portrait is 215px wide, so it is capped at 260px (~1.2x). */
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
}

.fsd-ceo-layout.is-no-portrait {
    grid-template-columns: minmax(0, 1fr);
}

/* Identity block: stays in view beside the long letter on desktop. */
.fsd-ceo-side {
    position: sticky;
    top: var(--space-lg);
}

.fsd-ceo-side img {
    display: block;
    width: 100%;
    aspect-ratio: 215 / 312;
    object-fit: cover;
    box-shadow: 0 14px 36px rgba(44, 55, 62, 0.16);
}

.fsd-ceo-id {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 3px solid var(--boh-gold);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fsd-ceo-id .name {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: 24px;
    line-height: 1.25;
    color: var(--boh-charcoal-dark);
}

.fsd-ceo-id .title {
    font-family: var(--font-functional);
    font-size: 12px;
    font-weight: var(--fw-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-on-light-muted);
}

[dir="rtl"] .fsd-ceo-id .title {
    letter-spacing: 0;
    text-transform: none;
    font-size: 15px;
}

/* Message: a gold rule level with the top of the portrait, an opening
   paragraph in the display face (a touch larger than the letter, regular
   weight — an opening, not a heading), then the letter at a ~75-character
   measure. */
.fsd-ceo-message {
    max-width: 740px;
}

.fsd-ceo-message::before {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-bottom: var(--space-md);
    background: var(--boh-gold);
}

.fsd-ceo-message p {
    margin: 0 0 1.5em;
    font-family: var(--font-functional);
    font-size: 19px;
    line-height: 1.9;
    color: var(--boh-charcoal-dark);
}

.fsd-ceo-message p.fsd-ceo-lead {
    margin-bottom: var(--space-lg);
    font-family: var(--font-display);
    font-weight: var(--fw-body);
    font-size: clamp(20px, 1.7vw, 22px);
    line-height: 1.7;
}

[dir="rtl"] .fsd-ceo-message p {
    line-height: 2.05;
}

[dir="rtl"] .fsd-ceo-message p.fsd-ceo-lead {
    line-height: 2;
}

/* Closing: a hairline, then the CEO's name in type — the job title is shown once, under the portrait. */
.fsd-ceo-sign {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--boh-border);
}

.fsd-ceo-sign::before {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin-bottom: 10px;
    background: var(--boh-gold);
}

.fsd-ceo-sign .name {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: 26px;
    line-height: 1.25;
    color: var(--boh-charcoal-dark);
}

@media (max-width: 900px) {
    .fsd-ceo {
        padding-block: var(--space-xl) var(--space-lg);
    }

    .fsd-ceo-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }

    .fsd-ceo-side {
        position: static;
        max-width: 220px;
        margin-inline: auto;
    }

    .fsd-ceo-id {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .fsd-ceo {
        padding-top: var(--space-lg);
    }

    .fsd-ceo-message p {
        font-size: 18px;
        line-height: 1.85;
    }

    [dir="rtl"] .fsd-ceo-message p {
        line-height: 2;
    }

    .fsd-ceo-message p.fsd-ceo-lead {
        font-size: 19px;
        line-height: 1.7;
    }

    [dir="rtl"] .fsd-ceo-message p.fsd-ceo-lead {
        line-height: 1.95;
    }
}

/* ============================================================
   QUALITY & SAFETY — intro statement (cream), ISO standard cards
   (pale-blue surface, white cards, the standard's number as the
   anchor) and the How We Work line. All CMS-driven.
   ============================================================ */
.fsd-q-inner {
    max-width: var(--w-wide);
    margin-inline: auto;
}

.fsd-q-intro {
    padding: var(--space-xl) 5%;
    background: var(--surface-cream);
}

.fsd-q-statement {
    max-width: var(--w-standard);
    margin: var(--space-md) 0 0;
    padding-inline-start: var(--space-lg);
    border-inline-start: 3px solid var(--boh-gold);
    font-family: var(--font-display);
    font-weight: var(--fw-body);
    font-size: clamp(21px, 2.1vw, 27px);
    line-height: 1.6;
    color: var(--boh-charcoal-dark);
}

[dir="rtl"] .fsd-q-statement {
    line-height: 1.95;
}

.fsd-q-standards {
    padding: var(--space-xl) 5% var(--space-section);
    background: var(--surface-cream-alt);
}

.fsd-q-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
}

.fsd-q-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    background: var(--surface-white);
    border-top: 3px solid var(--boh-gold);
    box-shadow: 0 10px 34px rgba(44, 55, 62, 0.06);
}

.fsd-q-iso {
    font-family: var(--font-functional);
    font-size: 13px;
    font-weight: var(--fw-label);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-on-light-muted);
}

/* The number keeps its own left-to-right order in Arabic ("9001:2015"), aligned to the card's reading start. */
.fsd-q-num {
    display: block;
    margin-top: 4px;
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: clamp(34px, 3.7vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--boh-charcoal);
    white-space: nowrap;
    direction: ltr;
    text-align: start;
}

[dir="rtl"] .fsd-q-num {
    text-align: right;
}

.fsd-q-card h3 {
    margin: var(--space-md) 0 var(--space-sm);
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(21px, 1.8vw, 24px);
    line-height: 1.25;
    color: var(--text-on-light);
}

.fsd-q-card h3::after {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin-top: var(--space-sm);
    background: var(--boh-gold);
}

.fsd-q-card p {
    margin: 0;
    font-family: var(--font-functional);
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-on-light-muted);
}

[dir="rtl"] .fsd-q-card p {
    line-height: 1.95;
}

/* Optional issuer / certificate number / expiry / file link: pinned to the card bottom. */
.fsd-q-foot {
    margin-top: auto;
    padding-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.fsd-q-meta {
    font-family: var(--font-functional);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-on-light-muted);
}

.fsd-q-foot .explore-link {
    color: var(--text-on-light);
}

/* How We Work: the contextual sentence as an editorial closing line under the standards. */
.fsd-q-context {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--boh-border);
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.fsd-q-context::before {
    content: "";
    flex: 0 0 36px;
    height: 3px;
    margin-top: 0.85em;
    background: var(--boh-gold);
}

.fsd-q-context p {
    margin: 0;
    max-width: var(--w-standard);
    font-family: var(--font-display);
    font-weight: var(--fw-body);
    font-size: clamp(18px, 1.6vw, 21px);
    line-height: 1.7;
    color: var(--boh-charcoal-dark);
}

[dir="rtl"] .fsd-q-context p {
    line-height: 1.95;
}

.fsd-q-context a {
    color: var(--text-on-light);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--boh-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.fsd-q-context a:hover,
.fsd-q-context a:focus-visible {
    color: var(--boh-gold);
}

/* Desktop: a two-line title slot keeps every description starting level across the row. */
@media (min-width: 901px) {
    .fsd-q-card h3 {
        min-height: calc(2.5em + var(--space-sm) + 3px);
    }
}

@media (max-width: 900px) {
    .fsd-q-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fsd-q-card {
        padding: var(--space-md) var(--space-lg);
    }
}

@media (max-width: 640px) {
    .fsd-q-intro {
        padding-block: var(--space-lg);
    }

    .fsd-q-statement {
        padding-inline-start: var(--space-md);
    }

    .fsd-q-standards {
        padding-block: var(--space-lg) var(--space-xl);
    }

    .fsd-q-card {
        padding: var(--space-md);
    }
}

/* ============================================================
   APPROACH LAYOUT — How We Work: intro statement (cream), the
   numbered pillars in one charcoal band, and the headline figure
   on the pale-blue surface. All CMS-driven (Page.detail,
   Page.approach_items, Page.highlight_value/highlight_text).
   ============================================================ */
.fsd-hww-inner {
    max-width: var(--w-wide);
    margin-inline: auto;
}

.fsd-hww-intro {
    padding: var(--space-xl) 5%;
    background: var(--surface-cream);
}

.fsd-hww-statement {
    max-width: var(--w-standard);
    margin-top: var(--space-md);
    padding-inline-start: var(--space-lg);
    border-inline-start: 3px solid var(--boh-gold);
}

.fsd-hww-statement p {
    margin: 0 0 0.8em;
    font-family: var(--font-display);
    font-weight: var(--fw-body);
    font-size: clamp(21px, 2.1vw, 27px);
    line-height: 1.6;
    color: var(--boh-charcoal-dark);
}

.fsd-hww-statement p:last-child {
    margin-bottom: 0;
}

[dir="rtl"] .fsd-hww-statement p {
    line-height: 1.95;
}

/* The pillars share one charcoal band, split by hairlines — the Philosophy rhythm. */
.fsd-hww-band {
    padding: var(--space-xl) 5%;
    background: linear-gradient(155deg, #34424a 0%, var(--boh-charcoal) 55%, var(--boh-charcoal-dark) 100%);
    color: var(--text-on-dark);
}

.fsd-hww-cols {
    margin-top: var(--space-lg);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fsd-hww-col {
    padding: var(--space-lg);
    border-inline-start: 1px solid rgba(255, 255, 255, 0.16);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.fsd-hww-col:nth-child(odd) {
    padding-inline-start: 0;
    border-inline-start: 0;
}

.fsd-hww-col:nth-child(even) {
    padding-inline-end: 0;
}

/* The first row carries no top rule. */
.fsd-hww-col:nth-child(-n + 2) {
    border-top: 0;
    padding-top: 0;
}

.fsd-hww-num {
    display: block;
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: clamp(40px, 4.2vw, 60px);
    line-height: 1.1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4);
}

.fsd-hww-col h3 {
    margin: var(--space-sm) 0;
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.25;
    color: #fff;
}

.fsd-hww-col h3::before {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin-bottom: var(--space-sm);
    background: var(--boh-gold);
}

.fsd-hww-text p {
    margin: 0 0 0.8em;
    font-family: var(--font-functional);
    font-size: 17px;
    line-height: 1.75;
    color: #dfe5e8;
}

.fsd-hww-text p:last-child {
    margin-bottom: 0;
}

[dir="rtl"] .fsd-hww-text p {
    line-height: 1.95;
}

.fsd-hww-text a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--boh-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.fsd-hww-text a:hover,
.fsd-hww-text a:focus-visible {
    color: var(--boh-gold);
}

/* Headline figure: the Our Roots marker rhythm on the pale-blue surface. */
.fsd-hww-reach {
    padding: var(--space-xl) 5%;
    background: var(--surface-cream-alt);
}

.fsd-hww-reach-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-xl);
    align-items: center;
}

/* A figure keeps its own left-to-right order in Arabic ("25+"), aligned to the reading start. */
.fsd-hww-figure {
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: clamp(80px, 10vw, 150px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--boh-charcoal);
    direction: ltr;
    text-align: start;
}

[dir="rtl"] .fsd-hww-figure {
    text-align: right;
}

.fsd-hww-figure::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: var(--space-md);
    background: var(--boh-gold);
}

.fsd-hww-reach p {
    margin: 0;
    font-family: var(--font-functional);
    font-size: clamp(18px, 1.6vw, 21px);
    line-height: 1.8;
    color: var(--boh-charcoal-dark);
}

[dir="rtl"] .fsd-hww-reach p {
    line-height: 2;
}

@media (max-width: 900px) {
    .fsd-hww-cols {
        grid-template-columns: minmax(0, 1fr);
    }

    .fsd-hww-col,
    .fsd-hww-col:nth-child(odd),
    .fsd-hww-col:nth-child(even) {
        padding: var(--space-lg) 0;
        border-inline-start: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
    }

    .fsd-hww-col:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .fsd-hww-col:last-child {
        padding-bottom: 0;
    }

    .fsd-hww-reach-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-md);
    }
}

@media (max-width: 640px) {
    .fsd-hww-intro {
        padding-block: var(--space-lg);
    }

    .fsd-hww-statement {
        padding-inline-start: var(--space-md);
    }

    .fsd-hww-band,
    .fsd-hww-reach {
        padding-block: var(--space-lg);
    }
}

/* ============================================================
   FACTS & FIGURES — the headline figures in one charcoal band,
   then the delivered works as an editorial ledger on cream.
   Both tiers are CMS records (Fact.featured splits them).
   ============================================================ */
.fsd-ff-inner {
    max-width: var(--w-wide);
    margin-inline: auto;
}

.fsd-ff-band {
    padding: var(--space-xl) 5%;
    background: linear-gradient(155deg, #34424a 0%, var(--boh-charcoal) 55%, var(--boh-charcoal-dark) 100%);
    color: var(--text-on-dark);
}

.fsd-ff-band-grid {
    margin-top: var(--space-lg);
    display: grid;
    grid-template-columns: repeat(var(--ff-count, 3), minmax(0, 1fr));
}

.fsd-ff-band-item {
    padding-inline: var(--space-lg);
    border-inline-start: 1px solid rgba(255, 255, 255, 0.16);
}

.fsd-ff-band-item:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
}

.fsd-ff-band-item:last-child {
    padding-inline-end: 0;
}

/* A figure keeps its own left-to-right order in Arabic, aligned to the reading start. */
.fsd-ff-big,
.fsd-ff-num {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    letter-spacing: -0.03em;
    direction: ltr;
}

[dir="rtl"] .fsd-ff-big,
[dir="rtl"] .fsd-ff-num {
    justify-content: flex-end;
}

.fsd-ff-big {
    font-size: clamp(64px, 8.5vw, 128px);
    line-height: 1;
    color: #fff;
}

.fsd-ff-big .unit,
.fsd-ff-num .unit {
    font-weight: var(--fw-stat-quiet);
    letter-spacing: 0;
    color: var(--boh-gold);
}

.fsd-ff-big .unit {
    font-size: 0.32em;
}

/* A superscript must not stretch the figure's line box. */
.fsd-ff-big .unit sup,
.fsd-ff-num .unit sup {
    font-size: 0.62em;
    line-height: 0;
    vertical-align: super;
}

.fsd-ff-label {
    display: block;
    margin-top: var(--space-md);
}

.fsd-ff-label::before {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin-bottom: var(--space-sm);
    background: var(--boh-gold);
}

.fsd-ff-label b {
    display: block;
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.2;
    color: #fff;
}

.fsd-ff-label span {
    display: block;
    margin-top: 8px;
    font-family: var(--font-functional);
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-on-dark-muted);
}

/* Arabic joins its letters: no tracking, no case transform. */
[dir="rtl"] .fsd-ff-label span {
    letter-spacing: 0;
    text-transform: none;
    font-size: 16px;
}

/* Delivered works: hairline rows, no cards. */
.fsd-ff-ledger {
    padding: var(--space-xl) 5% var(--space-section);
    background: var(--surface-cream);
}

.fsd-ff-rows {
    margin-top: var(--space-lg);
    display: flex;
    flex-direction: column;
}

.fsd-ff-row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-lg);
    align-items: baseline;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--boh-border);
}

.fsd-ff-row:last-child {
    border-bottom: 1px solid var(--boh-border);
}

.fsd-ff-num {
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: 1.05;
    color: var(--boh-charcoal);
}

.fsd-ff-num .unit {
    font-size: 0.4em;
}

.fsd-ff-title {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: clamp(19px, 1.8vw, 24px);
    line-height: 1.3;
    color: var(--text-on-light);
}

.fsd-ff-title small {
    display: block;
    margin-top: 6px;
    font-family: var(--font-functional);
    font-weight: var(--fw-body);
    font-size: 15px;
    color: var(--text-on-light-muted);
}

@media (max-width: 900px) {
    .fsd-ff-band-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fsd-ff-band-item,
    .fsd-ff-band-item:first-child,
    .fsd-ff-band-item:last-child {
        padding: var(--space-lg) 0;
        border-inline-start: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
    }

    .fsd-ff-band-item:first-child {
        border-top: 0;
        padding-top: var(--space-sm);
    }

    .fsd-ff-band-item:last-child {
        padding-bottom: 0;
    }

    .fsd-ff-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xs);
    }
}

@media (max-width: 600px) {
    .fsd-ff-band {
        padding-block: var(--space-lg);
    }

    .fsd-ff-ledger {
        padding-block: var(--space-lg) var(--space-xl);
    }
}

/* ============================================================
   SLOGAN LAYOUT — Our Slogan: the brand statement on its own
   charcoal plate under the shared hero, then the supporting
   paragraph on cream. Every word comes from the page's single
   rich-text field (Page::sloganParts).
   ============================================================ */

/* The plate must not read as a second hero. The hero is a 155deg gradient that ends on
   --boh-charcoal; this is FLAT and one step deeper, and a gold rule across the junction
   opens it deliberately. Different surface treatment + an explicit delimiter. */
.fsd-slogan {
    position: relative;
    padding: var(--space-section) 5%;
    background: var(--boh-charcoal-dark);
    color: var(--text-on-dark);
}

.fsd-slogan::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--boh-gold);
}

.fsd-slogan-inner {
    max-width: var(--w-wide);
    margin-inline: auto;
}

.fsd-slogan-eyebrow {
    display: block;
    font-family: var(--font-functional);
    font-size: 13px;
    font-weight: var(--fw-label);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--boh-gold);
}

/* Arabic joins its letters: no tracking, no case transform, a touch larger to match. */
[dir="rtl"] .fsd-slogan-eyebrow {
    letter-spacing: 0;
    text-transform: none;
    font-size: 16px;
}

/* The slogan itself — the loudest type on the page. White on the plate is 15.4:1. */
.fsd-slogan-main {
    margin: var(--space-md) 0 0;
    max-width: 14ch;
    font-family: var(--font-display);
    font-weight: var(--fw-hero);
    font-size: clamp(40px, 7vw, 104px);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: #fff;
}

/* Arabic needs its own measure and leading, and never negative tracking. */
[dir="rtl"] .fsd-slogan-main {
    max-width: 18ch;
    line-height: 1.28;
    letter-spacing: 0;
}

.fsd-slogan-sub {
    display: block;
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 3px solid var(--boh-gold);
    max-width: var(--w-editorial);
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: clamp(19px, 2vw, 26px);
    line-height: 1.4;
    color: #dfe5e8;
}

[dir="rtl"] .fsd-slogan-sub {
    line-height: 1.7;
}

.fsd-slogan-body-section {
    padding: var(--space-xl) 5% var(--space-section);
    background: var(--surface-cream);
}

.fsd-slogan-body {
    max-width: var(--w-standard);
    margin-inline: auto;
    padding-inline-start: var(--space-lg);
    border-inline-start: 3px solid var(--boh-gold);
    font-family: var(--font-functional);
    font-size: clamp(18px, 1.6vw, 21px);
    line-height: 1.9;
    color: var(--boh-charcoal-dark);
}

[dir="rtl"] .fsd-slogan-body {
    line-height: 2.05;
}

@media (max-width: 640px) {
    .fsd-slogan {
        padding-block: var(--space-xl);
    }

    .fsd-slogan-main {
        max-width: none;
    }

    [dir="rtl"] .fsd-slogan-main {
        max-width: none;
    }

    .fsd-slogan-body-section {
        padding-block: var(--space-lg) var(--space-xl);
    }

    .fsd-slogan-body {
        padding-inline-start: var(--space-md);
    }
}

/* ===================================================================
   PROJECTS — FACTS STRIP, SIGNATURE GRID, SECTOR FILTER, CARD DETAIL
   =================================================================== */

.fsd-signature {
    padding: var(--space-section) 5%;
    background: var(--surface-cream);
}

.future-showcase-grid {
    margin-top: var(--space-lg);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.future-showcase-card {
    position: relative;
    display: block;
    border-radius: 4px;
    overflow: hidden;
    background: var(--boh-charcoal);
    isolation: isolate;
}

.future-showcase-card-media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.future-showcase-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.future-showcase-card:hover .future-showcase-card-media img,
.future-showcase-card:focus-visible .future-showcase-card-media img {
    transform: scale(1.04);
}

/* A deeper, taller veil than the old filmstrip: the copy block below needs a
   reliably dark ground for white text whatever the photograph is doing. */
/* Deep enough at the bottom for white type, but lifted off the upper two
   thirds so the photograph itself still reads. The extra stop keeps the
   transition from banding across a flat sky. */
.future-showcase-card-media .veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
        rgba(18, 24, 28, 0.96) 0%,
        rgba(18, 24, 28, 0.88) 22%,
        rgba(18, 24, 28, 0.45) 52%,
        rgba(18, 24, 28, 0.10) 78%,
        rgba(18, 24, 28, 0.22) 100%);
}

.future-showcase-card-copy {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px 30px 26px;
    color: #fff;
}

.future-showcase-card-copy .eyebrow {
    font-family: var(--font-functional);
    font-weight: var(--fw-label);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--boh-gold);
}

.future-showcase-card-copy .title {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: clamp(19px, 1.7vw, 25px);
    line-height: 1.28;
    text-wrap: balance;
    /* Two generous lines, then an ellipsis — never a cut mid-word. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.future-showcase-card-copy .place {
    font-family: var(--font-functional);
    font-size: 12.5px;
    letter-spacing: 0.02em;
    color: #cfd6d9;
}

.future-showcase-card-copy .discover {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--font-functional);
    font-size: 12px;
    font-weight: var(--fw-cta);
    letter-spacing: 0.04em;
    color: #fff;
}

.future-showcase-card-copy .discover svg {
    transition: transform 0.3s ease;
}

[dir="rtl"] .future-showcase-card-copy .discover svg {
    transform: scaleX(-1);
}

.future-showcase-card:hover .discover svg {
    transform: translateX(4px);
}

[dir="rtl"] .future-showcase-card:hover .discover svg {
    transform: scaleX(-1) translateX(4px);
}

@media (max-width: 900px) {
    .future-showcase-grid {
        grid-template-columns: 1fr;
    }

    .future-showcase-card-media {
        aspect-ratio: 3 / 2;
    }

    .future-showcase-card-copy {
        padding: 22px 22px 20px;
    }
}

/* SECTOR FILTER — a single row, with a visible edge when it overflows.
   The scroller is the positioning context for the fade so the fade sits
   over the chips rather than scrolling away with them. */
.fsd-filter-scroller {
    position: relative;
}

.fsd-filter-row:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 4px;
    border-radius: 8px;
}

.fsd-filter-hint {
    display: none;
    margin-top: 10px;
    font-family: var(--font-functional);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-on-light-muted);
}

@media (max-width: 860px) {
    /* The row already scrolls; these make that legible. A fade on the
       trailing edge plus a one-line hint, and chips that never shrink so a
       partial chip always peeks past the fade as a second cue. */
    .fsd-filter-scroller::after {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0;
        width: 56px;
        pointer-events: none;
        background: linear-gradient(to left, var(--surface-cream) 12%, rgba(250, 248, 243, 0) 100%);
    }

    [dir="rtl"] .fsd-filter-scroller::after {
        background: linear-gradient(to right, var(--surface-cream) 12%, rgba(250, 248, 243, 0) 100%);
    }

    .fsd-filter-row {
        scroll-padding-inline: 16px;
        scroll-snap-type: x proximity;
        padding-inline-end: 40px;
    }

    .fsd-filter-chip {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .fsd-filter-hint {
        display: block;
    }
}

/* Long Arabic titles with a trailing Latin fragment (e.g. EPC1) used to
   leave that fragment orphaned on its own line. Balancing distributes the
   lines instead. Scoped to the hero heading, so body copy is unaffected. */
.future-page-header h1 {
    text-wrap: balance;
    overflow-wrap: break-word;
}

/* ===================================================================
   OUR SCALE — Projects hero statistics
   ===================================================================
   One sequence, no fixed tier. The index is a fixed five-row window, so
   the hero's height is the same with six Facts or thirty. */

.future-page-header:has(.future-our-scale) .future-page-header-inner {
    padding-top: clamp(64px, 7.2vw, 104px);
    padding-bottom: clamp(32px, 3.4vw, 46px);
}

.future-our-scale {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    gap: clamp(32px, 5.2vw, 96px);
    align-items: stretch;
    margin-top: clamp(24px, 2.8vw, 38px);
    padding-top: clamp(20px, 2.2vw, 30px);
    border-top: 1px solid rgba(224, 184, 36, 0.4);
}

.osc-head {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: clamp(10px, 1.2vw, 16px);
}

.osc-eyebrow {
    font-family: var(--font-functional);
    font-weight: var(--fw-label);
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--boh-gold);
}

/* 02 / 09 — the position in the sequence, stated plainly. The total comes
   from the record count, so it becomes 02 / 15 on its own. */
.osc-counter {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-functional);
    font-size: 14px;
    font-weight: var(--fw-label);
    letter-spacing: 0.1em;
    color: rgba(233, 237, 238, 0.68);
}

.osc-counter b {
    font-weight: var(--fw-label);
    color: #fff;
}

.osc-counter .sep {
    opacity: 0.5;
}

/* The stage reserves the tallest figure's height so nothing shifts on a change,
   and bottom-aligns its content so the value and its label always sit directly
   on the progress rule — the figure and the thing measuring it stay joined. */
.osc-figures {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(148px, 12.9vw, 186px);
}

.osc-figure {
    width: 100%;
}

/* Value and unit share a baseline: "100M m³" is one quantity, not a number
   with something stacked under it. */
.osc-headline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 14px;
}

.osc-figure[hidden] {
    display: none;
}

/* Transition only, with NO fill-mode on purpose.
   `both`/`forwards` apply the from-state whenever the animation is not actively
   running — a throttled or background renderer then leaves the figure sitting at
   opacity 0, which is exactly why the active value read as disabled text. With no
   fill-mode the element keeps its own style (fully opaque) unless the animation is
   genuinely mid-flight, so the resting state can never be faint. */
.osc-figure.is-entering {
    /* 0.45s before; 0.34s (~25% quicker) with the same easing, so each figure lands promptly without feeling abrupt. */
    animation: osc-enter 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes osc-enter {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* THE VALUE. "100M" is one token — same face, same colour, tight. */
/* THE NUMERIC TOKEN.
   Set in the functional family (Tajawal) rather than the display serif: Optima's
   flared, calligraphic M always read as a separate mark beside lining figures,
   while Tajawal's geometric M shares the digits' stroke weight and terminals, so
   "100M" resolves into one solid block. This exception is scoped to the statistic
   VALUE only — the hero title, labels and everything else keep Optima. */
.osc-value {
    display: flex;
    align-items: baseline;
    font-family: var(--font-functional);
    font-weight: 700;
    font-size: clamp(62px, 7.7vw, 114px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    font-variant-numeric: lining-nums tabular-nums;
    color: #fff;
    /* No opacity at rest, and a touch of weight against the charcoal. */
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
}

/* <b> carries a UA default of `bolder`, which against a 700 parent resolves to
   900 — leaving the digits heavier than the magnitude letter. Pin both to the
   same weight explicitly. */
.osc-value b {
    font-weight: inherit;
}

/* The magnitude letter is part of the number, not a suffix: same family, same
   weight, same baseline, upright, ~80% of the digit height, and optically tight
   with no word space. */
.osc-value em {
    font-style: normal;
    font-weight: inherit;
    font-family: inherit;
    font-size: 0.8em;
    letter-spacing: -0.03em;
    margin-inline-start: -0.01em;
    color: inherit;
}

.osc-value .osc-plus {
    font-style: normal;
    font-size: 0.42em;
    color: var(--boh-gold);
}

/* Arabic sets the magnitude as a WORD, so it cannot take the Latin letter's
   proportions — "مليون" at 80% would outweigh the digits. It stays subordinate but
   joined: same family and weight, one real space, no letter-spacing. */
[dir="rtl"] .osc-value em {
    font-size: 0.42em;
    margin-inline-start: 0.16em;
    letter-spacing: 0;
    font-weight: inherit;
}

.osc-unit {
    font-family: var(--font-functional);
    font-weight: var(--fw-label);
    font-size: clamp(17px, 1.7vw, 26px);
    letter-spacing: 0.02em;
    color: var(--boh-gold);
    transform: translateY(-0.18em);
}

.osc-unit sup {
    font-size: 0.68em;
}

.osc-label {
    display: block;
    margin-top: clamp(8px, 0.9vw, 13px);
    font-family: var(--font-functional);
    font-weight: var(--fw-label);
    font-size: clamp(19px, 1.85vw, 27px);
    line-height: 1.25;
    color: #fff;
    max-width: 18ch;
}

/* The values carry dir="ltr" for digit order, which would otherwise start
   them at the left edge of a right-aligned column. */
[dir="rtl"] .osc-value {
    justify-content: flex-end;
}

[dir="rtl"] .osc-unit {
    text-align: right;
}

[dir="rtl"] .osc-label,
[dir="rtl"] .osc-index-label,
[dir="rtl"] .osc-eyebrow {
    letter-spacing: 0;
}

/* The progress line — a thin architectural rule that fills, so the pending
   transition is visible rather than a surprise. */
/* Sits directly under the statistic it belongs to, at the width of the value
   column, so the filling rule reads as "this figure is about to change". */
.osc-progress {
    position: relative;
    height: 3px;
    max-width: 420px;
    margin-top: clamp(18px, 2vw, 26px);
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
    border-radius: 2px;
}

.osc-progress-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 0;
    background: var(--boh-gold);
    box-shadow: 0 0 10px rgba(224, 184, 36, 0.45);
}

.osc-progress-fill.is-running {
    animation: osc-progress var(--osc-duration, 6000ms) linear forwards;
}

.future-our-scale.is-paused .osc-progress-fill.is-running {
    animation-play-state: paused;
}

@keyframes osc-progress {
    from { width: 0; }
    to   { width: 100%; }
}

/* ---------- THE INDEX ----------
   A contents list printed straight onto the hero, not a panel placed on top of
   one. No background, no frame, no edge masks. The window shows exactly FIVE
   COMPLETE rows — the "more exists" signal is the 04/09 counter, the progress
   rule and the auto-advance, not a deliberately truncated row. When the active
   item would fall outside these five, the list scrolls smoothly to bring it
   back into view. Centred against the statistic so the two sides read as one
   composition. */
.osc-index-window {
    position: relative;
    --osc-row: 46px;
    --osc-rows: 5;
    align-self: center;
    max-height: calc(var(--osc-row) * var(--osc-rows));
    overflow: hidden;
}

.osc-index {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: calc(var(--osc-row) * var(--osc-rows));
    overflow-y: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.osc-index::-webkit-scrollbar {
    display: none;
}

/* A row is a numeral and a title on the hero surface. Hierarchy comes from
   spacing and tone; there are no separators and no button chrome. The leading
   gutter is reserved for the active row's gold rule, so nothing shifts
   horizontally when the active row changes. */
.osc-index-item {
    display: flex;
    align-items: baseline;
    gap: 16px;
    width: 100%;
    min-height: var(--osc-row);
    padding: 11px 0 11px 40px;
    border: 0;
    background: transparent;
    text-align: start;
    cursor: pointer;
    transition: color 0.25s ease;
}

.osc-index-num {
    flex: 0 0 auto;
    min-width: 1.6em;
    font-family: var(--font-functional);
    font-size: 12px;
    font-weight: var(--fw-label);
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    color: rgba(233, 237, 238, 0.38);
    transition: color 0.25s ease;
}

.osc-index-label {
    font-family: var(--font-functional);
    font-size: clamp(13.5px, 1.1vw, 16px);
    line-height: 1.3;
    color: rgba(233, 237, 238, 0.58);
    transition: color 0.25s ease;
}

.osc-index-item:hover .osc-index-label {
    color: rgba(255, 255, 255, 0.92);
}

/* Active: a short gold rule in the reserved gutter, a gold numeral and a
   full-strength title. No fill, no tint, no card. */
.osc-index-item.is-active {
    position: relative;
}

.osc-index-item.is-active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 26px;
    height: 1px;
    background: var(--boh-gold);
}

.osc-index-item.is-active .osc-index-num {
    color: var(--boh-gold);
}

.osc-index-item.is-active .osc-index-label {
    color: #fff;
    font-weight: var(--fw-label);
}

.osc-index-item:focus-visible {
    outline: 2px solid var(--boh-gold);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------- Phone controls ---------- */
.osc-controls {
    display: none;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
}

.osc-control {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.osc-control:hover {
    border-color: var(--boh-gold);
    background: rgba(224, 184, 36, 0.12);
}

.osc-control:focus-visible {
    outline: 2px solid var(--boh-gold);
    outline-offset: 3px;
}

[dir="rtl"] .osc-control svg {
    transform: scaleX(-1);
}

.osc-next-cue {
    flex: 1 1 auto;
    font-family: var(--font-functional);
    font-size: 12.5px;
    line-height: 1.3;
    color: rgba(233, 237, 238, 0.55);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .osc-figure.is-entering {
        animation: none;
    }

    .osc-index {
        scroll-behavior: auto;
    }

    /* No auto-advance: the bar becomes a position marker instead of a
       countdown — still "there is more", but it never moves on its own. */
    .osc-progress-fill.is-running {
        animation: none;
        width: var(--osc-static, 11%);
    }
}

@media (max-width: 900px) {
    /* The index is not squeezed beside the value: the figure takes the full
       width and the controls carry the navigation. Height is independent of
       how many Facts exist. */
    .future-our-scale {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .osc-index-window {
        display: none;
    }

    .osc-figures {
        min-height: 0;
    }

    .osc-value {
        font-size: 62px;
    }

    .osc-label {
        font-size: 20px;
        max-width: none;
    }

    .osc-progress {
        max-width: none;
    }

    .osc-controls {
        display: flex;
    }
}

/* ==========================================================================
   About Us single page + Sustainability's Quality & Safety section.
   One editorial page instead of several: a compact anchor navigation, a quiet
   section heading per former child page, and the same content bands those
   pages already used (shared partials). Logical properties throughout, so RTL
   mirrors with no separate rules.
   ========================================================================== */

/* In-page anchor navigation. Plain #links (no JS needed); sticky under the hero on desktop, a horizontally
   scrollable strip on small screens. Deliberately a single line of text links — not another panel. */
.fsd-about-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--surface-cream);
    border-bottom: 1px solid var(--boh-border);
}

.fsd-about-nav ul {
    display: flex;
    gap: var(--space-lg);
    max-width: var(--w-wide);
    margin: 0 auto;
    padding: 0 5%;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.fsd-about-nav ul::-webkit-scrollbar {
    display: none;
}

.fsd-about-nav a {
    position: relative;
    display: block;
    padding: 18px 0;
    white-space: nowrap;
    font-family: var(--font-functional);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-on-light-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

[dir="rtl"] .fsd-about-nav a {
    letter-spacing: 0;
    font-size: 15px;
}

.fsd-about-nav a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 3px;
    background: var(--boh-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

[dir="rtl"] .fsd-about-nav a::after {
    transform-origin: right;
}

.fsd-about-nav a:hover,
.fsd-about-nav a:focus-visible,
.fsd-about-nav a.is-active {
    color: var(--text-on-light);
}

.fsd-about-nav a:hover::after,
.fsd-about-nav a:focus-visible::after,
.fsd-about-nav a.is-active::after {
    transform: scaleX(1);
}

.fsd-about-nav a:focus-visible {
    outline: 2px solid var(--boh-gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* One section per former child page. The heading sits on the same cream ground as the band that follows, so
   the two read as one continuous chapter — no seam, no repeated hero. */
/* Clear the sticky anchor bar exactly once (About only; Sustainability has none). */
.fsd-about-sec {
    scroll-margin-top: 58px;
}

.fsd-sust-qs {
    scroll-margin-top: 0;
}

.fsd-about-sec-head {
    padding: var(--space-xl) max(5%, calc((100% - var(--w-wide)) / 2)) 0;
    background: var(--surface-cream);
}

.fsd-about-sec-head h2 {
    margin: 0;
    max-width: var(--w-standard);
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.15;
    text-wrap: balance;
    color: var(--text-on-light);
}

/* The band after a heading needs less top padding — the heading already opened the chapter. */
.fsd-about-sec-head + .fsd-ceo,
.fsd-about-sec-head + .fsd-roots.fsd-section,
.fsd-about-sec-head + .fsd-phi-philosophy,
.fsd-about-sec-head + .fsd-hww-intro,
.fsd-about-sec-head + .fsd-brands,
.fsd-about-sec-head + .fsd-q-intro {
    padding-top: var(--space-lg);
}

.fsd-about-sec > .fsd-section:last-child {
    border-bottom: 1px solid var(--boh-border);
}

/* History: the page's own artwork under the founding story — shown at its natural size, never stretched. */
.fsd-roots-artwork {
    max-width: var(--w-wide);
    margin: var(--space-xl) auto 0;
}

.fsd-roots-artwork img {
    display: block;
    width: 100%;
    max-width: 1000px;
    height: auto;
}

/* How We Work / Quality & Safety: an optional photograph beside the opening statement. */
.fsd-hww-inner.has-photo,
.fsd-q-inner.has-photo {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-xl);
    align-items: center;
}

.fsd-hww-photo,
.fsd-q-photo {
    margin: 0;
}

.fsd-hww-photo img,
.fsd-q-photo img {
    display: block;
    width: 100%;
    max-width: 830px;
    height: auto;
    aspect-ratio: 830 / 470;
    object-fit: cover;
}

/* Our Brands — an editorial logo wall: hairline-ruled cells, no card chrome. */
.fsd-brands {
    padding-top: var(--space-lg);
}

.fsd-brands-wall {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: var(--w-wide);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--boh-border);
    border-inline-start: 1px solid var(--boh-border);
}

.fsd-brands-wall li {
    border-bottom: 1px solid var(--boh-border);
    border-inline-end: 1px solid var(--boh-border);
}

.fsd-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    height: 100%;
    min-height: 190px;
    padding: var(--space-lg) var(--space-md);
    background: var(--surface-white);
    color: var(--text-on-light);
    text-decoration: none;
    text-align: center;
    transition: background 0.2s ease;
}

.fsd-brand:hover,
.fsd-brand:focus-visible {
    background: var(--surface-cream-alt);
}

.fsd-brand img {
    width: 100%;
    max-width: 150px;
    height: 72px;
    object-fit: contain;
}

.fsd-brand-name {
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: 20px;
    line-height: 1.25;
}

.fsd-brand-caption {
    font-family: var(--font-functional);
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--text-on-light-muted);
}

/* A logo-less company already shows its name large — don't repeat it as a caption. */
.fsd-brand-name + .fsd-brand-caption {
    display: none;
}

@media (max-width: 1000px) {
    .fsd-brands-wall {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .fsd-brands-wall {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fsd-brand {
        min-height: 150px;
        padding: var(--space-md) var(--space-sm);
    }
}

@media (max-width: 900px) {
    .fsd-hww-inner.has-photo,
    .fsd-q-inner.has-photo {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }

    .fsd-about-sec-head {
        padding-top: var(--space-lg);
    }

    .fsd-about-nav ul {
        gap: var(--space-md);
    }

    .fsd-about-nav a {
        padding: 15px 0;
    }
}

/* ==========================================================================
   About Us — editorial composition (ab-*). One rhythm of light and dark chapters in the approved palette
   (cream / charcoal / gold): large type and photography instead of cards, hairline rules instead of boxes.
   Logical properties throughout, so RTL mirrors without separate rules.
   ========================================================================== */
.ab {
    position: relative;
    padding: clamp(56px, 7vw, 104px) 5%;
}

.ab--light { background: var(--surface-cream); color: var(--text-on-light); }
.ab--alt { background: var(--surface-cream-alt); color: var(--text-on-light); }
.ab--dark { background: var(--surface-charcoal); color: var(--text-on-dark); }

.ab-inner {
    max-width: var(--w-wide);
    margin-inline: auto;
}

/* Alias anchors (#our-legacy, #our-companies) — the stable ids stay #our-history / #our-brands. */
.ab-alias {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    scroll-margin-top: 58px;
}

.ab[id] {
    scroll-margin-top: 58px;
}

.ab-head h2 {
    margin: 18px 0 0;
    max-width: 22ch;
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(32px, 4vw, 54px);
    line-height: var(--lh-h2);
    text-wrap: balance;
}

[dir="rtl"] .ab-head h2 { line-height: var(--lh-h2-ar); max-width: 26ch; }
.ab--dark .ab-head h2 { color: #fff; }
.ab-head { margin-bottom: clamp(28px, 4vw, 52px); }

/* ---- Who We Are ---------------------------------------------------------------------------------------------- */
.ab-who-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(40px, 7vw, 96px);
    align-items: start;
}

.ab-who-grid.is-no-media { grid-template-columns: minmax(0, var(--w-standard)); }

.ab-who-copy .future-eyebrow-row h2 { margin: 0; font-weight: var(--fw-label); }

.ab-lead {
    margin-top: 28px;
    font-family: var(--font-display);
    font-weight: var(--fw-body);
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.32;
    color: var(--boh-charcoal-dark, var(--text-on-light));
    text-wrap: pretty;
}

[dir="rtl"] .ab-lead { line-height: 1.6; }
.ab-lead p { margin: 0; }

.ab-who-body {
    margin-top: clamp(28px, 4vw, 48px);
    columns: 2;
    column-gap: 48px;
    font-family: var(--font-functional);
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-on-light-muted);
}

.ab-who-body p { margin: 0 0 1.1em; break-inside: avoid; }
.ab-who-body strong { color: var(--text-on-light); }

.ab-who-photo { margin: 0; }

.ab-who-photo img {
    display: block;
    width: 100%;
    max-width: 896px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-bottom: 3px solid var(--boh-gold);
}

/* ---- CEO Message --------------------------------------------------------------------------------------------- */
.ab-ceo-grid {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(40px, 7vw, 96px);
    align-items: start;
}

.ab-ceo-grid.is-no-portrait { grid-template-columns: minmax(0, var(--w-standard)); }

.ab-ceo-side { position: sticky; top: 88px; margin: 0; }

.ab-ceo-side img {
    display: block;
    width: 100%;
    max-width: 240px;
    aspect-ratio: 215 / 312;
    object-fit: cover;
    border-bottom: 3px solid var(--boh-gold);
}

.ab-ceo-id { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.ab-ceo-id .name { font-family: var(--font-display); font-size: 21px; color: #fff; }
.ab-ceo-id .title { font-family: var(--font-functional); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--boh-gold); }
[dir="rtl"] .ab-ceo-id .title { letter-spacing: 0; font-size: 14px; }

.ab-ceo-lead {
    margin: 0 0 28px;
    max-width: 30em;
    font-family: var(--font-display);
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.42;
    color: #fff;
    text-wrap: pretty;
}

[dir="rtl"] .ab-ceo-lead { line-height: 1.75; }

.ab-ceo-body p {
    max-width: 64ch;
    margin: 0 0 1.1em;
    font-family: var(--font-functional);
    font-size: 18px;
    line-height: 1.85;
    color: var(--text-on-dark-muted);
}

.ab-ceo-sign {
    margin: 32px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--boh-gold);
}

/* The two arrows mirror in RTL (previous sits on the reading-start side). */

/* ---- Philosophy ---------------------------------------------------------------------------------------------- */
.ab-phi-label {
    display: block;
    font-family: var(--font-functional);
    font-size: 12px;
    font-weight: var(--fw-label);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-on-light-muted);
}

[dir="rtl"] .ab-phi-label { letter-spacing: 0; font-size: 14px; }

.ab-phi-statement {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: clamp(20px, 4vw, 48px);
    align-items: start;
}

.ab-phi-statement .ab-phi-label { padding-top: 16px; }

.ab-phi-statement p {
    margin: 0;
    max-width: 30em;
    font-family: var(--font-display);
    font-size: clamp(26px, 3.1vw, 42px);
    line-height: 1.35;
    text-wrap: pretty;
}

[dir="rtl"] .ab-phi-statement p { line-height: 1.7; }

.ab-phi-row {
    display: grid;
    grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
    margin-top: clamp(44px, 6vw, 72px);
    border-top: 1px solid rgba(38, 50, 56, 0.35);
}

.ab-phi-item { padding: 28px 32px 8px; border-inline-start: 1px solid rgba(38, 50, 56, 0.16); }
.ab-phi-item:first-child { padding-inline-start: 0; border-inline-start: 0; }
.ab-phi-num, .ab-value-num { font-family: var(--font-display); font-size: 18px; color: var(--boh-gold-dark, #a8881f); }
.ab-phi-item h3 { margin: 12px 0 12px; font-family: var(--font-display); font-weight: var(--fw-h3); font-size: 28px; line-height: var(--lh-h3); }
.ab-phi-item p { margin: 0; font-family: var(--font-functional); font-size: 17px; line-height: 1.75; color: var(--text-on-light-muted); }

.ab-values { margin-top: clamp(56px, 7vw, 88px); }
.ab-values ol { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(38, 50, 56, 0.35); }

.ab-value {
    display: grid;
    grid-template-columns: 64px minmax(0, 4fr) minmax(0, 7fr);
    gap: 32px;
    padding: 26px 0;
    border-bottom: 1px solid rgba(38, 50, 56, 0.16);
}

.ab-value h3 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-h3); font-size: 26px; line-height: var(--lh-h3); }
.ab-value-headline { display: block; margin-top: 8px; font-family: var(--font-functional); font-size: 15px; line-height: 1.5; color: var(--text-on-light-muted); }
.ab-value-body p { margin: 0; font-size: 16.5px; line-height: 1.75; color: var(--text-on-light-muted); }
.ab-value-body ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 40px; }

.ab-value-body li {
    position: relative;
    margin: 0 0 8px;
    padding-inline-start: 16px;
    break-inside: avoid;
    font-family: var(--font-functional);
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--text-on-light-muted);
}

.ab-value-body li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--boh-gold);
}

/* ---- How We Work --------------------------------------------------------------------------------------------- */
.ab-app-top { display: grid; gap: clamp(32px, 5vw, 56px); }
.ab-app-top.has-photo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.ab-app-top .ab-head { margin-bottom: 28px; }

.ab-app-statement {
    max-width: 30em;
    padding-inline-start: 28px;
    border-inline-start: 3px solid var(--boh-gold);
    font-family: var(--font-display);
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.5;
    color: #fff;
}

[dir="rtl"] .ab-app-statement { line-height: 1.8; }
.ab-app-statement p { margin: 0 0 0.6em; }
.ab-app-statement p:last-child { margin-bottom: 0; }

.ab-app-photo { margin: 0; }

.ab-app-photo img {
    display: block;
    width: 100%;
    max-width: 830px;
    aspect-ratio: 830 / 470;
    object-fit: cover;
}

/* The pillars as one horizontal sequence hung from a single rule; stacked on small screens. */
.ab-seq {
    display: grid;
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    gap: 0 clamp(24px, 3vw, 44px);
    margin: clamp(48px, 6vw, 72px) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.ab-seq-item { position: relative; padding-top: 30px; }

.ab-seq-item::before {
    content: "";
    position: absolute;
    top: -5px;
    inset-inline-start: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--boh-gold);
}

.ab-seq-num {
    display: block;
    font-family: var(--font-display);
    font-size: 44px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--boh-gold);
}

.ab-seq-item h3 { margin: 18px 0 12px; font-family: var(--font-display); font-weight: var(--fw-h3); font-size: 24px; line-height: var(--lh-h3); color: #fff; }
.ab-seq-text { font-family: var(--font-functional); font-size: 16px; line-height: 1.75; color: var(--text-on-dark-muted); }
.ab-seq-text p { margin: 0 0 0.8em; }
.ab-seq-text a { color: var(--boh-gold); text-decoration: underline; text-underline-offset: 3px; }

.ab-reach {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: end;
    margin-top: clamp(48px, 6vw, 72px);
    padding-top: 36px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.ab-reach-figure { font-family: var(--font-display); font-size: clamp(72px, 10vw, 150px); line-height: 0.9; color: var(--boh-gold); }
.ab-reach p { margin: 0; max-width: 44ch; font-family: var(--font-functional); font-size: 18px; line-height: 1.7; color: var(--text-on-dark-muted); }

/* ---- Our Companies ------------------------------------------------------------------------------------------- */
.ab-co-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(38, 50, 56, 0.35); }
.ab-co { border-bottom: 1px solid rgba(38, 50, 56, 0.16); }

.ab-co-link {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr) 28px;
    gap: clamp(20px, 3vw, 32px);
    align-items: center;
    padding: 26px 0;
    color: inherit;
    text-decoration: none;
}

.ab-co-logo { display: flex; align-items: center; height: 60px; }

.ab-co-logo img {
    width: auto;
    height: auto;
    max-width: 160px;
    max-height: 60px;
    object-fit: contain;
    mix-blend-mode: multiply;   /* white JPEG/PNG logo backgrounds melt into the cream ground */
}

.ab-co-name { display: block; font-family: var(--font-display); font-weight: var(--fw-h3); font-size: clamp(22px, 2.3vw, 30px); line-height: 1.2; transition: color 0.2s ease; }
.ab-co-meta { display: block; margin-top: 8px; font-family: var(--font-functional); font-size: 12.5px; font-weight: var(--fw-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-light-muted); }
[dir="rtl"] .ab-co-meta { letter-spacing: 0; font-size: 14px; }
.ab-co-line { display: block; max-width: 62ch; margin-top: 8px; font-family: var(--font-functional); font-size: 16px; line-height: 1.6; color: var(--text-on-light-muted); }
.ab-co-arrow { color: var(--boh-gold); transition: transform 0.25s ease; }
.ab-co-arrow svg { transform: scaleX(-1); display: block; }
[dir="rtl"] .ab-co-arrow svg { transform: none; }
.ab-co-link:hover .ab-co-arrow, .ab-co-link:focus-visible .ab-co-arrow { transform: translateX(6px); }
[dir="rtl"] .ab-co-link:hover .ab-co-arrow, [dir="rtl"] .ab-co-link:focus-visible .ab-co-arrow { transform: translateX(-6px); }
.ab-co-link:hover .ab-co-name, .ab-co-link:focus-visible .ab-co-name { color: var(--boh-gold-dark, #8a6d10); }
.ab-co-link:focus-visible { outline: 2px solid var(--boh-gold); outline-offset: 2px; }

/* Subsidiaries sit beneath their parent, set in by a gold rule. */
.ab-co.is-sub .ab-co-link { padding-block: 18px; padding-inline-start: 36px; border-inline-start: 2px solid var(--boh-gold); }
.ab-co.is-sub .ab-co-logo { height: 44px; }
.ab-co.is-sub .ab-co-logo img { max-height: 44px; }
.ab-co.is-sub .ab-co-name { font-size: clamp(19px, 1.9vw, 24px); }

/* ---- Businesses transition ----------------------------------------------------------------------------------- */
.ab-bridge { padding-block: clamp(36px, 5vw, 56px); }

.ab-bridge-row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto;
    gap: clamp(20px, 4vw, 40px);
    align-items: center;
}

.ab-bridge h2 { margin: 12px 0 0; font-family: var(--font-display); font-weight: var(--fw-h2); font-size: clamp(24px, 2.6vw, 34px); line-height: var(--lh-h2); color: #fff; }
.ab-bridge-sectors { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.ab-bridge-sectors a { font-family: var(--font-functional); font-size: 15px; color: var(--text-on-dark-muted); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); transition: color 0.2s ease, border-color 0.2s ease; }
.ab-bridge-sectors a:hover, .ab-bridge-sectors a:focus-visible { color: #fff; border-color: var(--boh-gold); }

/* ---- Responsive ---------------------------------------------------------------------------------------------- */
@media (max-width: 1000px) {
    .ab-who-grid { grid-template-columns: minmax(0, 1fr); }
    .ab-who-photo { max-width: 560px; }
    
    .ab-phi-row { grid-template-columns: minmax(0, 1fr); }
    .ab-phi-item, .ab-phi-item:first-child { padding: 24px 0 8px; border-inline-start: 0; border-top: 1px solid rgba(38, 50, 56, 0.16); }
    .ab-phi-item:first-child { border-top: 0; }
    .ab-seq { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
    .ab-app-top.has-photo { grid-template-columns: minmax(0, 1fr); }
    .ab-bridge-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .ab-who-body { columns: 1; }
    .ab-ceo-grid { grid-template-columns: minmax(0, 1fr); }
    .ab-ceo-side { position: static; display: flex; align-items: flex-end; gap: 18px; }
    .ab-ceo-side img { width: 112px; flex: 0 0 auto; }
    .ab-ceo-id { margin-top: 0; }
    .ab-phi-statement { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .ab-phi-statement .ab-phi-label { padding-top: 0; }
    .ab-value { grid-template-columns: 44px minmax(0, 1fr); gap: 8px 16px; }
    .ab-value-body { grid-column: 2; }
    .ab-value-body ul { columns: 1; }
    .ab-seq { grid-template-columns: minmax(0, 1fr); row-gap: 0; border-top: 0; border-inline-start: 1px solid rgba(255, 255, 255, 0.22); }
    .ab-seq-item { padding: 0 0 32px 0; padding-inline-start: 26px; }
    .ab-seq-item::before { top: 6px; inset-inline-start: -5px; }
    .ab-seq-num { font-size: 34px; }
    .ab-reach { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; }
    .ab-co-link { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px 0; }
    .ab-co-arrow { display: none; }
    .ab-co.is-sub .ab-co-link { padding-inline-start: 20px; }

    }

.ab { padding-block: var(--space-section); }
.ab-head h2 { font-size: clamp(30px, 3.6vw, 52px); }
.ab-head { margin-bottom: clamp(24px, 3vw, 40px); }

@media (max-width: 900px) {
    .ab { padding: 40px 6%; }
}

/* ---- Our Companies ------------------------------------------------------------------------------------------- */
.ab-co-meta { margin-top: 6px; }
.ab-co-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.ab-co-tag {
    padding: 3px 12px;
    border: 1px solid rgba(38, 50, 56, 0.28);
    border-radius: 999px;
    font-family: var(--font-functional);
    font-size: 12px;
    font-weight: var(--fw-label);
    line-height: 1.6;
    color: var(--text-on-light-muted);
}

.ab-co-arrow {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(38, 50, 56, 0.28);
    border-radius: 50%;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.25s ease;
}

.ab-co-link:hover .ab-co-arrow,
.ab-co-link:focus-visible .ab-co-arrow {
    background: var(--surface-charcoal);
    border-color: var(--surface-charcoal);
    color: #fff;
    transform: none;
}

[dir="rtl"] .ab-co-link:hover .ab-co-arrow, [dir="rtl"] .ab-co-link:focus-visible .ab-co-arrow { transform: none; }
.ab-co-link { grid-template-columns: 176px minmax(0, 1fr) 36px; }

/* ---- Philosophy: statement, then a typographic row (fine rules, gold on the rule), no boxes -------------------------- */
.ab-phi-statement p { font-size: clamp(24px, 2.6vw, 36px); max-width: 32em; }
.ab-phi-statement .ab-phi-label { padding-top: 12px; }

.ab-phi-row {
    display: flex;
    gap: clamp(24px, 3.2vw, 52px);
    margin-top: clamp(32px, 4vw, 48px);
    border-top: 0;
}

.ab-phi-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 20px 0 0;
    border-inline-start: 0;
    border-top: 1px solid rgba(38, 50, 56, 0.28);
}

.ab-phi-item:first-child { padding-inline-start: 0; border-inline-start: 0; }
.ab-phi-item:last-child { flex-grow: 1.4; }

.ab-phi-item::before {
    content: "";
    position: absolute;
    top: -2px;
    inset-inline-start: 0;
    width: 32px;
    height: 3px;
    background: var(--boh-gold);
}

.ab-phi-item .ab-phi-num { display: none; }
.ab-phi-item h3 { margin: 0 0 10px; font-size: 26px; }
.ab-phi-item p { font-size: 16.5px; line-height: 1.7; }

/* ---- Values: baseline (no JavaScript) = a compact list, every value and every point visible ------------------------- */
.ab-vals { margin-top: clamp(40px, 5vw, 60px); }
.ab-vals-list { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid rgba(38, 50, 56, 0.28); }
.ab-val { padding: 18px 0; border-bottom: 1px solid rgba(38, 50, 56, 0.16); }

.ab-val-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: default;
}

.ab-val-num { font-family: var(--font-display); font-size: 15px; color: var(--boh-gold-dark, #a8881f); }
.ab-val-name { font-family: var(--font-display); font-weight: var(--fw-h3); font-size: 26px; line-height: var(--lh-h3); }
.ab-val-chevron { display: none; }
.ab-val-panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 8px 40px; margin-top: 8px; }
.ab-val-kicker { display: none; }
.ab-val-headline { margin: 0; font-family: var(--font-functional); font-size: 15px; line-height: 1.5; color: var(--text-on-light-muted); }
.ab-val-points { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 32px; }

.ab-val-points li {
    position: relative;
    margin: 0 0 6px;
    padding-inline-start: 16px;
    break-inside: avoid;
    font-family: var(--font-functional);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-on-light-muted);
}

.ab-val-points li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--boh-gold);
}

.ab-val-detail { margin: 0; font-size: 16px; line-height: 1.7; color: var(--text-on-light-muted); }

/* ---- Values: wide screens — a horizontal selector, one active value, panels crossfading in one cell ------------------- */
@media (min-width: 761px) {
    .ab-vals.is-enhanced .ab-vals-list {
        display: grid;
        grid-template-columns: repeat(var(--n), max-content) minmax(0, 1fr);
        grid-template-rows: auto auto;
        margin-top: 12px;
        border-top: 0;
    }

    .ab-vals.is-enhanced .ab-vals-list::after {
        content: "";
        grid-row: 1;
        grid-column: -2 / -1;
        border-bottom: 1px solid rgba(38, 50, 56, 0.28);
    }

    .ab-vals.is-enhanced .ab-val { display: contents; }

    .ab-vals.is-enhanced .ab-val-head {
        position: relative;
        grid-row: 1;
        width: auto;
        padding: 14px clamp(16px, 2.2vw, 32px) 18px;
        border-bottom: 1px solid rgba(38, 50, 56, 0.28);
        cursor: pointer;
        color: var(--text-on-light-muted);
        transition: color 0.25s ease;
    }

    .ab-vals.is-enhanced .ab-val:first-child .ab-val-head { padding-inline-start: 0; }
    .ab-vals.is-enhanced .ab-val-name { font-size: clamp(20px, 2vw, 27px); }

    .ab-vals.is-enhanced .ab-val-head::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: -1px;
        height: 3px;
        background: var(--boh-gold);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    [dir="rtl"] .ab-vals.is-enhanced .ab-val-head::after { transform-origin: right; }
    .ab-vals.is-enhanced .ab-val:first-child .ab-val-head::after { inset-inline-start: 0; }
    .ab-vals.is-enhanced .ab-val-head:hover,
    .ab-vals.is-enhanced .ab-val.is-active .ab-val-head { color: var(--text-on-light); }
    .ab-vals.is-enhanced .ab-val.is-active .ab-val-head::after { transform: scaleX(1); }
    .ab-vals.is-enhanced .ab-val-head:focus-visible { outline: 2px solid var(--boh-gold); outline-offset: 2px; }

    .ab-vals.is-enhanced .ab-val-panel {
        grid-area: 2 / 1 / 3 / -1;
        margin-top: 0;
        padding-top: 28px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
    }

    .ab-vals.is-enhanced .ab-val.is-active .ab-val-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

    .ab-vals.is-enhanced .ab-val-lead { display: flex; flex-direction: column; gap: 12px; }

    .ab-vals.is-enhanced .ab-val-kicker {
        display: block;
        font-family: var(--font-functional);
        font-size: 12px;
        font-weight: var(--fw-label);
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--boh-gold-dark, #a8881f);
    }

    [dir="rtl"] .ab-vals.is-enhanced .ab-val-kicker { letter-spacing: 0; font-size: 14px; }

    .ab-vals.is-enhanced .ab-val-headline {
        font-family: var(--font-display);
        font-size: clamp(22px, 2.2vw, 30px);
        line-height: 1.3;
        color: var(--text-on-light);
        text-wrap: balance;
    }

    [dir="rtl"] .ab-vals.is-enhanced .ab-val-headline { line-height: 1.6; }
    .ab-vals.is-enhanced .ab-val-points { columns: 1; }
    .ab-vals.is-enhanced .ab-val-points li { font-size: 17px; margin-bottom: 8px; }
}

/* ---- Values: phones — a compact accordion, one open at a time ------------------------------------------------------- */
@media (max-width: 760px) {
    .ab-val-panel { grid-template-columns: minmax(0, 1fr); }
    .ab-val-points { columns: 1; }
    .ab-phi-row { flex-direction: column; gap: 22px; }
    .ab-phi-item:last-child { flex-grow: 1; }

    .ab-vals.is-enhanced .ab-val-head { justify-content: space-between; padding: 16px 0; cursor: pointer; }
    .ab-vals.is-enhanced .ab-val { padding: 0; }
    .ab-vals.is-enhanced .ab-val-name { flex: 1 1 auto; font-size: 22px; }

    .ab-vals.is-enhanced .ab-val-chevron {
        display: block;
        flex: 0 0 auto;
        width: 9px;
        height: 9px;
        margin-inline-end: 4px;
        border-inline-end: 2px solid var(--boh-gold);
        border-bottom: 2px solid var(--boh-gold);
        transform: rotate(45deg);
        transition: transform 0.25s ease;
    }

    .ab-vals.is-enhanced .ab-val.is-active .ab-val-chevron { transform: rotate(-135deg); }
    .ab-vals.is-enhanced .ab-val-panel { display: none; padding: 0 0 18px; }
    .ab-vals.is-enhanced .ab-val.is-active .ab-val-panel { display: grid; animation: ab-val-in 0.3s ease; }
    .ab-vals.is-enhanced .ab-val-head:focus-visible { outline: 2px solid var(--boh-gold); outline-offset: 2px; }
}

@keyframes ab-val-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .ab-vals.is-enhanced .ab-val-panel,
    .ab-vals.is-enhanced .ab-val-head::after,
    .ab-vals.is-enhanced .ab-val-chevron,
    .ab-vals.is-enhanced .ab-val-head { transition: none !important; animation: none !important; }
    .ab-vals.is-enhanced .ab-val-panel { transform: none !important; }
}

/* ==========================================================================
   About Us — Our Legacy (lg-*): a typographic chapter on the site's charcoal. The year is the visual asset; the year
   window, gold progress line and counter sit on the same 5 / 7 grid as the event so the index belongs to it. Logical
   properties throughout (RTL mirrors), no new colours.
   ========================================================================== */
.lg-sec { padding-block: clamp(44px, 4.6vw, 64px); }

.lg-head {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(24px, 5vw, 72px);
    align-items: end;
    margin-bottom: clamp(20px, 2.6vw, 32px);
}

.lg-head h2 {
    margin: 14px 0 0;
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: var(--lh-h2);
    color: #fff;
    text-wrap: balance;
}

[dir="rtl"] .lg-head h2 { line-height: var(--lh-h2-ar); }

.lg-intro {
    font-family: var(--font-functional);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-on-dark-muted);
}

.lg-intro p { margin: 0; }

/* Baseline (no JavaScript): a compact chronological list — every event readable, none oversized, no images. */
.lg-stage { padding-top: 8px; }
.lg-events { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.lg-ev { display: block; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.lg-year { display: block; margin-bottom: 4px; font-family: var(--font-display); font-size: 30px; line-height: 1.1; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.lg-title { margin: 0 0 4px; font-family: var(--font-display); font-weight: var(--fw-h3); font-size: 18px; line-height: 1.3; color: #fff; }
.lg-text { margin: 0; font-family: var(--font-functional); font-size: 15px; line-height: 1.55; color: var(--text-on-dark-muted); }
.lg-nav { display: none; }

@media (max-width: 1000px) {
    .lg-events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .lg-events { grid-template-columns: minmax(0, 1fr); }
    .lg-ev { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 2px 14px; align-items: baseline; padding: 12px 0; }
    .lg-year { margin: 0; font-size: 24px; }
    .lg-story { min-width: 0; }
}

/* Enhanced (JavaScript on): the stage — one event, the very large year on the reading-start side. */
.lg.is-enhanced .lg-stage { padding-top: clamp(20px, 2.6vw, 32px); border-top: 1px solid rgba(255, 255, 255, 0.18); touch-action: pan-y; cursor: grab; }
.lg.is-enhanced .lg-stage.is-dragging { cursor: grabbing; user-select: none; }
.lg.is-enhanced .lg-events { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }

.lg.is-enhanced .lg-ev {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(24px, 5vw, 72px);
    align-items: center;
    padding: 0;
    border-top: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.lg.is-enhanced .lg-ev.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }

.lg.is-enhanced .lg-year {
    margin: 0;
    font-size: clamp(84px, 12.5vw, 184px);
    line-height: 0.9;
    letter-spacing: -0.02em;
    transform: translateY(12px);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.lg.is-enhanced .lg-story {
    padding-inline-start: clamp(24px, 3.6vw, 52px);
    border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
    transform: translateY(12px);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

.lg.is-enhanced .lg-ev.is-active .lg-year,
.lg.is-enhanced .lg-ev.is-active .lg-story { transform: none; }

.lg.is-enhanced .lg-title { margin: 0 0 12px; font-size: clamp(24px, 2.8vw, 38px); line-height: var(--lh-h3); text-wrap: balance; max-width: 22ch; }
[dir="rtl"] .lg.is-enhanced .lg-title { line-height: var(--lh-h3-ar); }
.lg.is-enhanced .lg-text { max-width: 48ch; font-size: 18px; line-height: 1.7; }

/* The index — gold progress line, then the counter + previous/next (under the year) and the year window (under the story). */
.lg.is-enhanced .lg-nav { display: block; margin-top: clamp(18px, 2.4vw, 28px); }
.lg-progress { position: relative; height: 2px; background: rgba(255, 255, 255, 0.18); }

.lg-progress span {
    position: relative;
    display: block;
    height: 100%;
    background: var(--boh-gold);
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.lg-progress span::after {
    content: "";
    position: absolute;
    top: -3px;
    inset-inline-end: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--boh-gold);
}

.lg-controls {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(24px, 5vw, 72px);
    align-items: center;
    padding-top: 10px;
}

.lg-side { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 12px; }
.lg-rail { grid-column: 2; grid-row: 1; --lg-visible: 5; min-width: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }

.lg-count {
    min-width: 76px;
    margin-inline-end: 4px;
    font-family: var(--font-functional);
    font-size: 15px;
    font-weight: var(--fw-label);
    letter-spacing: 0.14em;
    color: var(--boh-gold);
}

.lg-btn {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

[dir="rtl"] .lg-btn svg { transform: scaleX(-1) !important; }
[dir="rtl"] .lg-btn[data-legacy-next] svg { transform: none !important; }
.lg-btn:hover:not(:disabled), .lg-btn:focus-visible { background: #fff; border-color: #fff; color: var(--boh-charcoal); }
.lg-btn:disabled { opacity: 0.3; cursor: default; }
.lg-btn:focus-visible, .lg-year-btn:focus-visible { outline: 2px solid var(--boh-gold); outline-offset: 3px; }

.lg-track {
    display: flex;
    width: calc(var(--n) * 100% / var(--lg-visible));
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.lg-track li { flex: 0 0 calc(100% / var(--n)); }

.lg-year-btn {
    position: relative;
    width: 100%;
    padding: 8px 0 12px;
    border: 0;
    background: none;
    font-family: var(--font-display);
    font-size: 18px;
    font-variant-numeric: lining-nums tabular-nums;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: color 0.3s ease, font-size 0.3s ease;
}

.lg-year-btn::after {
    content: "";
    position: absolute;
    inset-inline: 38%;
    bottom: 0;
    height: 3px;
    background: var(--boh-gold);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.lg-year-btn:hover { color: rgba(255, 255, 255, 0.85); }
.lg-year-btn.is-active { color: #fff; font-size: 24px; }
.lg-year-btn.is-active::after { transform: scaleX(1); }

@media (max-width: 1000px) {
    .lg-rail { --lg-visible: 3; }
    .lg-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; }
}

/* Phone: heading, large year, title, description, then previous / position / next and the progress line. No year window. */
@media (max-width: 760px) {
    .lg.is-enhanced .lg-ev { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .lg.is-enhanced .lg-year { font-size: clamp(76px, 24vw, 116px); }
    .lg.is-enhanced .lg-story { padding-inline-start: 0; border-inline-start: 0; }
    .lg.is-enhanced .lg-title { max-width: none; font-size: clamp(22px, 6vw, 28px); }
    .lg.is-enhanced .lg-text { max-width: none; font-size: 17px; }
    .lg-controls { grid-template-columns: minmax(0, 1fr); }
    .lg-rail { display: none; }
    .lg-side { grid-column: 1; justify-content: space-between; }
    .lg-count { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .lg.is-enhanced .lg-ev,
    .lg.is-enhanced .lg-year,
    .lg.is-enhanced .lg-story,
    .lg-progress span,
    .lg-track,
    .lg-year-btn,
    .lg-year-btn::after { transition: none !important; }
    .lg.is-enhanced .lg-year, .lg.is-enhanced .lg-story { transform: none !important; }
}

/* Legacy → Scale read as one dark chapter: a single shared surface (the Our Scale strip's own gradient), with a fine
   divider between the two. Our Scale's markup, data and interaction are untouched. */
.ab-chapter { background: linear-gradient(155deg, #34424a 0%, var(--boh-charcoal) 55%, var(--boh-charcoal-dark) 100%); }
.ab-chapter .lg-sec,
.ab-chapter .fsd-facts { background: transparent; }
.ab-chapter .lg-sec { padding-bottom: clamp(32px, 3.6vw, 48px); }
.ab-chapter .fsd-facts { padding-top: 0; }

.ab-chapter .fsd-facts::before {
    content: "";
    display: block;
    width: 100%;
    max-width: var(--w-wide);
    margin: 0 auto var(--space-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

@media (max-width: 900px) {
    .ab-chapter .fsd-facts::before { margin-bottom: var(--space-lg); }
}

/* ==========================================================================
   Our Legacy — visual-hierarchy refinement; Legacy → Scale transition; Values selector clarity.
   ========================================================================== */
/* Header: the title is a small eyebrow and shares a baseline with the intro — one composition above the year. */
.lg-head { align-items: first baseline; margin-bottom: clamp(14px, 1.8vw, 22px); }
.lg-head .lg-head-title { margin: 0; }

.lg-head .lg-head-title h2 {
    margin: 0;
    font-family: var(--font-functional);
    font-weight: var(--fw-label);
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
}

[dir="rtl"] .lg-head .lg-head-title h2 { font-size: 15px; letter-spacing: 0; }
.lg-intro { max-width: 62ch; }

/* Year + story read as one record: a gold architectural rule the height of the record. */
.lg.is-enhanced .lg-stage { padding-top: clamp(14px, 1.8vw, 22px); }
.lg.is-enhanced .lg-ev { align-items: stretch; }

.lg.is-enhanced .lg-year { align-self: center; }

.lg.is-enhanced .lg-story {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline-start: clamp(24px, 3.2vw, 44px);
    border-inline-start: 3px solid var(--boh-gold);
}

/* Year index: more authority, still compact. */
.lg-progress { height: 3px; background: rgba(255, 255, 255, 0.22); }
.lg-progress span::after { top: -3.5px; inset-inline-end: -5px; width: 10px; height: 10px; }
.lg-controls { padding-top: 12px; }
.lg-year-btn { padding: 10px 0 15px; font-size: 20px; color: rgba(255, 255, 255, 0.4); }
.lg-year-btn:hover { color: rgba(255, 255, 255, 0.8); }
.lg-year-btn.is-active { font-size: 30px; color: #fff; }
.lg-year-btn::after { height: 4px; inset-inline: 30%; }

.lg-count {
    min-width: 0;
    margin-inline-end: 8px;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.5);
}

.lg-count b { font-weight: 600; color: var(--boh-gold); }
.lg-count i { margin: 0 0.35em; font-style: normal; opacity: 0.6; }

/* Legacy → Scale: three distinct dark surfaces from the existing tokens (CEO charcoal → Legacy deep charcoal → the
   Our Scale strip's own gradient), with a fine rule and a short gold marker at the join. */
.ab-chapter { background: none; }
.ab-chapter .lg-sec { background: var(--boh-charcoal-dark); padding-bottom: clamp(28px, 3.2vw, 44px); }

.ab-chapter .fsd-facts {
    position: relative;
    background: linear-gradient(155deg, #34424a 0%, var(--boh-charcoal) 55%, var(--boh-charcoal-dark) 100%);
    padding-top: clamp(52px, 5vw, 72px);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.ab-chapter .fsd-facts::before {
    content: "";
    position: absolute;
    top: -1px;
    inset-inline-start: max(5%, calc((100% - var(--w-wide)) / 2));
    display: block;
    width: 56px;
    max-width: none;
    height: 3px;
    margin: 0;
    border: 0;
    background: var(--boh-gold);
}

@media (max-width: 760px) {
    .lg-year-btn { font-size: 18px; }
    .lg-count { font-size: 20px; }
}

/* Values selector: clearer labels, stronger active state. */
@media (min-width: 761px) {
    .ab-vals.is-enhanced .ab-vals-list::after { border-bottom-color: rgba(38, 50, 56, 0.42); }
    .ab-vals.is-enhanced .ab-val-head { padding: 16px clamp(20px, 2.6vw, 40px) 20px; border-bottom-color: rgba(38, 50, 56, 0.42); color: rgba(38, 50, 56, 0.6); }
    .ab-vals.is-enhanced .ab-val:first-child .ab-val-head { padding-inline-start: 0; }
    .ab-vals.is-enhanced .ab-val-name { font-size: clamp(22px, 2.3vw, 31px); }
    .ab-vals.is-enhanced .ab-val-num { font-size: 15px; }
    .ab-vals.is-enhanced .ab-val-head:hover { color: var(--boh-charcoal); }
    .ab-vals.is-enhanced .ab-val.is-active .ab-val-head { color: var(--boh-charcoal-dark); }
    .ab-vals.is-enhanced .ab-val.is-active .ab-val-num { color: var(--boh-gold-dark, #8a6d10); font-weight: 600; }
    .ab-vals.is-enhanced .ab-val-head::after { height: 4px; }
}

/* Legacy: tighter rhythm; the intro's left edge lines up with the story text beneath it (same column, same inset). */
.lg-sec { padding-block: clamp(36px, 3.8vw, 52px); }
.ab-chapter .lg-sec { padding-bottom: clamp(24px, 2.8vw, 38px); }
.lg-intro { max-width: none; }
.lg-year-btn { padding: 8px 0 13px; }
.lg-year-btn.is-active { font-size: 28px; }
.lg.is-enhanced .lg-nav { margin-top: clamp(14px, 1.8vw, 22px); }

@media (min-width: 1001px) {
    .lg-intro { padding-inline-start: calc(3px + clamp(24px, 3.2vw, 44px)); }
}

/* ==========================================================================
   About Us — iteration 4: Who We Are, CEO Message (excerpt + disclosure), Our Companies (group structure),
   Businesses bridge and the closing CTA.
   ========================================================================== */

/* ---- Who We Are: statement + a photograph with real presence; supporting copy across the full width ---------------- */
.ab-who-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.ab-who-top.is-no-media { grid-template-columns: minmax(0, var(--w-standard)); }
.ab-who-photo { margin: 0; }

.ab-who-photo img {
    display: block;
    width: 100%;
    max-width: 896px;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-bottom: 3px solid var(--boh-gold);
}

.ab-who-body {
    position: relative;
    margin-top: clamp(32px, 4vw, 52px);
    padding-top: 28px;
    columns: 2;
    column-gap: clamp(40px, 6vw, 88px);
    border-top: 1px solid rgba(38, 50, 56, 0.28);
}

.ab-who-body::before { content: ""; position: absolute; top: -2px; inset-inline-start: 0; width: 32px; height: 3px; background: var(--boh-gold); }

@media (max-width: 1000px) {
    .ab-who-top { grid-template-columns: minmax(0, 1fr); }
    .ab-who-photo { max-width: 620px; }
}

@media (max-width: 760px) {
    .ab-who-body { columns: 1; }
}

/* ---- CEO Message: portrait at its true size, excerpt + inline disclosure -------------------------------------------- */
.ab-ceo-grid { grid-template-columns: 216px minmax(0, 1fr); }
.ab-ceo-side img { max-width: 216px; }
.ab-ceo-body p:last-child { margin-bottom: 0; }

.ab-disc-toggle { display: none; }
.ab-disc-inner { min-height: 0; }
.ab-disc-inner > .ab-ceo-body { padding-top: 1.1em; }

.ab-disc.is-enhanced .ab-disc-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.ab-disc.is-enhanced.is-open .ab-disc-panel { grid-template-rows: 1fr; opacity: 1; }
.ab-disc.is-enhanced .ab-disc-inner { overflow: hidden; }

.ab-disc.is-enhanced .ab-disc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    padding: 6px 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-functional);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
}

[dir="rtl"] .ab-disc.is-enhanced .ab-disc-toggle { letter-spacing: 0; font-size: 15px; }
.ab-disc-label--close { display: none; }
.ab-disc.is-open .ab-disc-label--open { display: none; }
.ab-disc.is-open .ab-disc-label--close { display: inline; }

.ab-disc-icon { position: relative; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; transition: border-color 0.2s ease, background 0.2s ease; }

.ab-disc-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    border-inline-end: 2px solid var(--boh-gold);
    border-bottom: 2px solid var(--boh-gold);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.3s ease;
}

.ab-disc.is-open .ab-disc-icon::after { transform: translateY(2px) rotate(-135deg); }
.ab-disc-toggle:hover .ab-disc-icon, .ab-disc-toggle:focus-visible .ab-disc-icon { border-color: var(--boh-gold); }
.ab-disc-toggle:focus-visible { outline: 2px solid var(--boh-gold); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
    .ab-disc.is-enhanced .ab-disc-panel, .ab-disc-icon, .ab-disc-icon::after { transition: none !important; }
}

/* ---- Our Companies: the group structure — quiet rows, a consistent logo area, a gold connector for the hierarchy --- */
.ab-co-link { grid-template-columns: 168px minmax(0, 1fr) 36px; gap: clamp(20px, 3vw, 40px); padding: 26px 0; transition: background 0.2s ease; }
.ab-co-link:hover, .ab-co-link:focus-visible { background: rgba(38, 50, 56, 0.035); }
.ab-co-logo { justify-content: flex-start; width: 168px; height: 64px; }
.ab-co-logo img { max-width: 148px; max-height: 56px; }
.ab-co-name { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; }

.ab-co-sectors {
    display: block;
    margin-top: 8px;
    font-family: var(--font-functional);
    font-size: 12.5px;
    font-weight: var(--fw-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-on-light-muted);
}

[dir="rtl"] .ab-co-sectors { letter-spacing: 0; font-size: 14px; }

/* Secondary CMS text: revealed on hover / focus (always shown where there is no hover), only where it exists. */
.ab-co-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.3s ease, opacity 0.3s ease; }
.ab-co-line { display: block; min-height: 0; margin: 0; overflow: hidden; padding-top: 0; }
.ab-co-link:hover .ab-co-more, .ab-co-link:focus-visible .ab-co-more { grid-template-rows: 1fr; opacity: 1; }
.ab-co-link:hover .ab-co-line, .ab-co-link:focus-visible .ab-co-line { padding-top: 10px; }
@media (hover: none) { .ab-co-more { grid-template-rows: 1fr; opacity: 1; } .ab-co-line { padding-top: 10px; } }

.ab-co-arrow { opacity: 0.5; transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.ab-co-link:hover .ab-co-arrow, .ab-co-link:focus-visible .ab-co-arrow { opacity: 1; }

/* Subsidiaries / arms beneath their parent (the Structure tree): a nested list on a fine gold connector. */
.ab-co-subs { position: relative; margin: 0 0 18px; margin-inline-start: 56px; padding: 0; list-style: none; }
.ab-co.is-sub { position: relative; border-bottom: 0; padding-inline-start: 34px; }
.ab-co.is-sub::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 1px; background: rgba(224, 184, 36, 0.75); }
.ab-co.is-sub:last-child::before { bottom: 50%; }
.ab-co.is-sub::after { content: ""; position: absolute; top: 50%; inset-inline-start: 0; width: 22px; height: 1px; background: rgba(224, 184, 36, 0.75); }
.ab-co.is-sub .ab-co-link { grid-template-columns: 120px minmax(0, 1fr) 32px; padding: 14px 0; border-inline-start: 0; padding-inline-start: 0; }
.ab-co.is-sub .ab-co-logo { width: 120px; height: 44px; }
.ab-co.is-sub .ab-co-logo img { max-width: 108px; max-height: 40px; }
.ab-co.is-sub .ab-co-name { font-size: clamp(19px, 1.9vw, 24px); }

@media (max-width: 760px) {
    .ab-co-link { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px 0; }
    .ab-co-logo { width: auto; height: 52px; }
    .ab-co-subs { margin-inline-start: 8px; }
    .ab-co.is-sub .ab-co-link { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Buttons ------------------------------------------------------------------------------------------------------- */
.ab-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 28px;
    font-family: var(--font-functional);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

[dir="rtl"] .ab-cta { letter-spacing: 0; font-size: 15px; }
.ab-cta-arrow { transform: scaleX(-1); transition: transform 0.2s ease; }
[dir="rtl"] .ab-cta-arrow { transform: none; }
.ab-cta:hover .ab-cta-arrow { transform: scaleX(-1) translateX(-4px); }
[dir="rtl"] .ab-cta:hover .ab-cta-arrow { transform: translateX(-4px); }
.ab-cta:focus-visible { outline: 2px solid var(--boh-gold); outline-offset: 3px; }
.ab-cta--gold { background: var(--boh-gold); color: var(--boh-charcoal-dark); }
.ab-cta--gold:hover, .ab-cta--gold:focus-visible { background: #fff; }
.ab-cta--charcoal { background: var(--boh-charcoal); color: #fff; }
.ab-cta--charcoal:hover, .ab-cta--charcoal:focus-visible { background: var(--boh-gold); color: var(--boh-charcoal-dark); }

/* ---- Businesses bridge: slim; the button is the point, the sectors are secondary ---------------------------------- */
.ab-bridge { padding-block: clamp(36px, 4vw, 52px); }
.ab-bridge-row { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 5vw, 72px); }
.ab-bridge-sectors { margin-top: 14px; gap: 6px 20px; }
.ab-bridge-sectors a { font-size: 14px; color: rgba(255, 255, 255, 0.6); }

@media (max-width: 760px) {
    .ab-bridge-row { grid-template-columns: minmax(0, 1fr); }
    .ab-bridge .ab-cta { justify-self: start; }
}

/* ---- Closing: charcoal on cream, gold as the accent; one action ---------------------------------------------------- */
.ab-close { padding-block: clamp(56px, 7vw, 96px); }
.ab-close-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 88px); align-items: end; }

.ab-close h2 {
    margin: 16px 0 0;
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(36px, 5vw, 72px);
    line-height: 1.05;
    color: var(--text-on-light);
    text-wrap: balance;
}

[dir="rtl"] .ab-close h2 { line-height: 1.3; }

.ab-close-side { padding-inline-start: clamp(24px, 3vw, 40px); border-inline-start: 3px solid var(--boh-gold); }
.ab-close-side p { max-width: 38ch; margin: 0 0 24px; font-family: var(--font-functional); font-size: 18px; line-height: 1.7; color: var(--text-on-light-muted); }

@media (max-width: 900px) {
    .ab-close-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 760px) {
    .ab-ceo-grid { grid-template-columns: minmax(0, 1fr); }
    .ab-ceo-side img { width: 112px; }
}

/* Buttons: beat the theme's anchor colour rule (.future-theme a). */
.future-theme .ab-cta--gold { background: var(--boh-gold); color: var(--boh-charcoal-dark); }
.future-theme .ab-cta--gold:hover, .future-theme .ab-cta--gold:focus-visible { background: #fff; color: var(--boh-charcoal-dark); }
.future-theme .ab-cta--charcoal { background: var(--boh-charcoal); color: #fff; }
.future-theme .ab-cta--charcoal:hover, .future-theme .ab-cta--charcoal:focus-visible { background: var(--boh-gold); color: var(--boh-charcoal-dark); }

/* Who We Are: the photograph sits on the statement's last line; Companies: consistent arrow column in nested rows. */
.ab-who-top { grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr); }
.ab-who-photo { align-self: end; }
.ab-co.is-sub .ab-co-link { grid-template-columns: 120px minmax(0, 1fr) 36px; }
@media (max-width: 1000px) { .ab-who-top { grid-template-columns: minmax(0, 1fr); } .ab-who-photo { align-self: start; } }
@media (max-width: 760px) { .ab-co.is-sub .ab-co-link { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   About Us — iteration 5: shorter CEO excerpt, Group Companies structure, How We Work closing metric.
   ========================================================================== */

/* ---- CEO: the excerpt is the lead statement only ---------------------------------------------------------------------- */
.ab-ceo-lead { margin-bottom: 0; }
.ab-disc-inner > .ab-ceo-body { padding-top: 1.4em; }

/* ---- Group Companies: a ledger with a readable hierarchy ----------------------------------------------------------- */
.ab-co-list { border-top: 2px solid var(--boh-charcoal); }
.ab-co { border-bottom: 1px solid rgba(38, 50, 56, 0.28); }
.ab-co-link { padding-block: 30px; }
.ab-co-name { font-weight: var(--fw-h2, 700); font-size: clamp(26px, 3vw, 38px); color: var(--text-on-light); }
.ab-co.has-subs > .ab-co-link { padding-bottom: 22px; }
.ab-co.has-subs > .ab-co-link .ab-co-name { font-size: clamp(28px, 3.3vw, 42px); }

.ab-co-sectors { margin-top: 8px; font-size: 11.5px; letter-spacing: 0.12em; opacity: 0.75; }
[dir="rtl"] .ab-co-sectors { font-size: 13px; letter-spacing: 0; }
.ab-co-line { font-size: 15px; line-height: 1.6; max-width: 60ch; color: var(--text-on-light-muted); opacity: 0.85; }

.ab-co-arrow { display: flex; align-items: center; justify-content: flex-end; align-self: center; }

/* Children: same right edge as their parent (arrows line up); a 2px gold trunk hangs from the parent, one tick per child. */
.ab-co-subs { margin: 0 0 22px; margin-inline-start: 0; }
.ab-co.is-sub { border-bottom: 0; padding-inline-start: 0; }
.ab-co.is-sub::before { inset-inline-start: 56px; width: 2px; background: var(--boh-gold); top: 0; bottom: 0; }
.ab-co.is-sub:last-child::before { bottom: 50%; }
.ab-co.is-sub::after { inset-inline-start: 56px; width: 28px; height: 2px; background: var(--boh-gold); }
.ab-co.is-sub .ab-co-link { grid-template-columns: 120px minmax(0, 1fr) 36px; padding: 16px 0; padding-inline-start: 100px; }
.ab-co.is-sub .ab-co-name { font-size: clamp(20px, 2vw, 25px); font-weight: var(--fw-h3); }
.ab-co.is-sub .ab-co-sectors { font-size: 11px; }

.ab-co-link:hover, .ab-co-link:focus-visible { background: rgba(38, 50, 56, 0.045); }
.ab-co-link:hover .ab-co-name, .ab-co-link:focus-visible .ab-co-name { color: var(--text-on-light); }

@media (max-width: 760px) {
    .ab-co-link { padding-block: 22px; }
    .ab-co-arrow { display: none; }
    .ab-co.is-sub::before, .ab-co.is-sub::after { inset-inline-start: 10px; }
    .ab-co.is-sub::after { width: 18px; }
    .ab-co.is-sub .ab-co-link { grid-template-columns: minmax(0, 1fr); padding-inline-start: 40px; }
}

/* ---- How We Work: the closing metric ends the same rule as the four steps --------------------------------------------- */
.ab-seqwrap { margin-top: clamp(48px, 6vw, 72px); }
.ab-seqwrap .ab-seq { margin-top: 0; }
.ab-seqwrap.has-reach { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 1.15fr); gap: 0 clamp(24px, 3vw, 44px); border-top: 1px solid rgba(255, 255, 255, 0.22); }
.ab-seqwrap.has-reach .ab-seq { border-top: 0; }

.ab-seqwrap .ab-reach {
    position: relative;
    display: block;
    margin: 0;
    padding: 30px 0 0;
    padding-inline-start: clamp(20px, 2.4vw, 36px);
    border-top: 0;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.22);
}

.ab-seqwrap .ab-reach::before {
    content: "";
    position: absolute;
    top: -5px;
    inset-inline-start: -5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--boh-gold);
    box-sizing: border-box;
    background: var(--boh-charcoal-dark, #1d262a);
}

.ab-seqwrap .ab-reach-figure { display: block; font-size: clamp(38px, 3.6vw, 48px); line-height: 1; }
.ab-seqwrap .ab-reach p { margin: 18px 0 0; font-size: 16px; line-height: 1.75; max-width: 24ch; }

@media (max-width: 1000px) {
    .ab-seqwrap.has-reach { grid-template-columns: minmax(0, 1fr); border-top: 0; }
    .ab-seqwrap.has-reach .ab-seq { border-top: 1px solid rgba(255, 255, 255, 0.22); }
    .ab-seqwrap .ab-reach { margin-top: 36px; padding-top: 22px; padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }
    .ab-seqwrap .ab-reach::before { display: none; }
    .ab-seqwrap .ab-reach p { max-width: 44ch; }
}

@media (max-width: 760px) {
    .ab-seqwrap.has-reach .ab-seq { border-top: 0; }
    .ab-seqwrap .ab-reach { margin-top: 0; padding-top: 0; padding-inline-start: 26px; border-top: 0; border-inline-start: 1px solid rgba(255, 255, 255, 0.22); }
    .ab-seqwrap .ab-reach::before { display: block; top: 6px; }
}

/* ==========================================================================
   Sustainability (su-*) and Governance (gv-*) — two chapters of the About Us system.
   Sustainability: human, asymmetric, light/dark rhythm. Governance: ruled, numbered, institutional.
   Shared: sg-topic (a CMS topic: heading + bullets).
   ========================================================================== */

/* ---- shared topic ---------------------------------------------------------------------------------------------------- */
.sg-topic h3 { margin: 0 0 12px; font-family: var(--font-display); font-weight: var(--fw-h3); font-size: clamp(19px, 1.7vw, 23px); line-height: var(--lh-h3); text-wrap: balance; }
[dir="rtl"] .sg-topic h3 { line-height: var(--lh-h3-ar); }
.sg-topic-body p { margin: 0 0 0.7em; font-family: var(--font-functional); font-size: 15.5px; line-height: 1.7; }
.sg-topic-body ul { margin: 0; padding: 0; list-style: none; }
.sg-topic-body li { position: relative; padding-inline-start: 18px; margin: 0 0 6px; font-family: var(--font-functional); font-size: 15.5px; line-height: 1.65; }
.sg-topic-body li::before { content: ""; position: absolute; top: 0.78em; inset-inline-start: 0; width: 8px; height: 2px; background: var(--boh-gold); }
.sg-topic-body a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Sustainability: strategy --------------------------------------------------------------------------------------- */
.su-strategy-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 88px); align-items: end; }
.su-practices { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(38, 50, 56, 0.28); position: relative; }
.su-practices::before { content: ""; position: absolute; top: -2px; inset-inline-start: 0; width: 32px; height: 3px; background: var(--boh-gold); }
.su-practices li { display: block; padding: 20px 0; border-bottom: 1px solid rgba(38, 50, 56, 0.16); }
.su-practices strong { display: block; margin-bottom: 6px; font-family: var(--font-display); font-weight: var(--fw-h3); font-size: 21px; line-height: 1.25; color: var(--text-on-light); }
.su-practices span { display: block; font-family: var(--font-functional); font-size: 15.5px; line-height: 1.7; color: var(--text-on-light-muted); }
.su-strategy-links { margin: clamp(28px, 4vw, 44px) 0 0; font-family: var(--font-functional); font-size: 14px; letter-spacing: 0.04em; color: var(--text-on-light-muted); }
.su-strategy-links a { color: var(--text-on-light); text-decoration: none; border-bottom: 1px solid var(--boh-gold); padding-bottom: 2px; }
.su-strategy-links a:hover, .su-strategy-links a:focus-visible { border-bottom-width: 2px; }

/* ---- Sustainability: environmental (dark) --------------------------------------------------------------------------- */
.su-env-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.su-env-lead { position: sticky; top: 96px; }
.su-statement { margin: 0 0 22px; font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.4; color: #fff; }
[dir="rtl"] .su-statement { line-height: 1.7; }
.su-support { margin: 0; font-family: var(--font-functional); font-size: 16px; line-height: 1.75; color: var(--text-on-dark-muted); }
.su-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 44px); }
.su-topic-grid .sg-topic { padding: 22px 0 26px; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.su-env .sg-topic h3 { color: #fff; }
.su-env .sg-topic-body p, .su-env .sg-topic-body li { color: var(--text-on-dark-muted); }
.su-subchapter { margin-top: clamp(40px, 5vw, 64px); }
.su-subchapter > h3 { margin: 0 0 14px; padding-top: 22px; border-top: 3px solid var(--boh-gold); font-family: var(--font-display); font-weight: var(--fw-h2); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; color: #fff; }
.su-subchapter > p { max-width: 62ch; margin: 0 0 22px; font-family: var(--font-functional); font-size: 16px; line-height: 1.75; color: var(--text-on-dark-muted); }

/* ---- Sustainability: social (light-alt) ----------------------------------------------------------------------------- */
.su-social-lead { margin-top: 0; max-width: 34ch; margin-bottom: clamp(36px, 5vw, 60px); }
.su-topic-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.su-topic-grid--3 .sg-topic { border-top-color: rgba(38, 50, 56, 0.28); }
.su-social .sg-topic h3 { color: var(--text-on-light); }
.su-social .sg-topic-body p, .su-social .sg-topic-body li { color: var(--text-on-light-muted); }
.su-pull { position: relative; margin: clamp(40px, 5vw, 64px) 0 0; padding: 8px 0; padding-inline-start: clamp(24px, 3vw, 40px); border-inline-start: 3px solid var(--boh-gold); }
.su-pull-label { display: block; margin-bottom: 12px; font-family: var(--font-functional); font-size: 12.5px; font-weight: var(--fw-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-on-light-muted); }
[dir="rtl"] .su-pull-label { letter-spacing: 0; font-size: 14px; }
.su-pull p { margin: 0; max-width: 40ch; font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.35; color: var(--boh-charcoal-dark, var(--text-on-light)); }
[dir="rtl"] .su-pull p { line-height: 1.65; }
.su-pull em { font-style: normal; }

/* ---- Sustainability: community impact ------------------------------------------------------------------------------- */
.su-impact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.su-impact-grid.is-no-media { grid-template-columns: minmax(0, var(--w-standard)); }
.su-impact-photo { margin: 0; }
.su-impact-photo img { display: block; width: 100%; height: auto; border-bottom: 3px solid var(--boh-gold); }
.su-impact-date { margin: 26px 0 0; font-family: var(--font-functional); font-size: 13px; font-weight: var(--fw-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-on-light-muted); }
[dir="rtl"] .su-impact-date { letter-spacing: 0; font-size: 15px; }
.su-impact-headline { margin: 10px 0 18px; font-family: var(--font-display); font-weight: var(--fw-h2); font-size: clamp(26px, 2.8vw, 38px); line-height: 1.22; text-wrap: balance; }
[dir="rtl"] .su-impact-headline { line-height: 1.5; }
.su-impact-headline a { color: var(--text-on-light); text-decoration: none; }
.su-impact-headline a:hover, .su-impact-headline a:focus-visible { text-decoration: underline; text-decoration-color: var(--boh-gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.su-impact-text { max-width: 58ch; margin: 0 0 1em; font-family: var(--font-functional); font-size: 17px; line-height: 1.75; color: var(--text-on-light-muted); }
.su-impact-text a { color: var(--text-on-light); border-bottom: 1px solid var(--boh-gold); text-decoration: none; }

/* ---- Governance ------------------------------------------------------------------------------------------------------ */
.gv-statement-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(28px, 5vw, 72px); padding-top: 28px; border-top: 1px solid rgba(38, 50, 56, 0.28); position: relative; }
.gv-statement-grid::before { content: ""; position: absolute; top: -2px; inset-inline-start: 0; width: 32px; height: 3px; background: var(--boh-gold); }
.gv-statement-grid .future-eyebrow-row { align-self: start; }
.gv-statement-text p { margin: 0; max-width: 32ch; font-family: var(--font-display); font-weight: var(--fw-body); font-size: clamp(26px, 3.2vw, 42px); line-height: 1.3; color: var(--boh-charcoal-dark, var(--text-on-light)); text-wrap: pretty; }
[dir="rtl"] .gv-statement-text p { line-height: 1.6; max-width: 34ch; }

.gv-excellence-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.gv-excellence-top .ab-head { margin-bottom: 0; }
.gv-frame-lead { margin: 0; max-width: 52ch; font-family: var(--font-functional); font-size: 18px; line-height: 1.75; color: var(--text-on-dark-muted); }

.gv-principles { border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.gv-principles .sg-topic { display: grid; grid-template-columns: 84px minmax(0, 4fr) minmax(0, 7fr); gap: 0 clamp(20px, 3vw, 44px); align-items: start; padding: 26px 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.sg-topic-num { font-family: var(--font-display); font-size: 40px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--boh-gold); }
.gv-principles .sg-topic h3 { margin: 0; padding-top: 6px; color: #fff; font-size: clamp(21px, 2vw, 27px); }
.gv-principles .sg-topic-body { padding-top: 4px; columns: 2; column-gap: 32px; }
.gv-principles .sg-topic-body li { break-inside: avoid; color: var(--text-on-dark-muted); }
.gv-principles .sg-topic-body p { color: var(--text-on-dark-muted); }

.gv-policy-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--boh-charcoal); }
.gv-policy { border-bottom: 1px solid rgba(38, 50, 56, 0.28); }
.gv-policy-link { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; text-decoration: none; color: var(--text-on-light); }
.gv-policy-title { font-family: var(--font-display); font-weight: var(--fw-h2); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; }
.gv-policy.is-live .gv-policy-link { padding-block: 34px; transition: background 0.2s ease; }
.gv-policy.is-live .gv-policy-title { font-size: clamp(28px, 3.2vw, 42px); }
.gv-policy.is-live .gv-policy-link:hover, .gv-policy.is-live .gv-policy-link:focus-visible { background: rgba(38, 50, 56, 0.045); }
.gv-policy-go { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid rgba(38, 50, 56, 0.35); border-radius: 50%; color: var(--text-on-light); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.gv-policy-go svg { transform: scaleX(-1); }
[dir="rtl"] .gv-policy-go svg { transform: none; }
.gv-policy.is-live .gv-policy-link:hover .gv-policy-go, .gv-policy.is-live .gv-policy-link:focus-visible .gv-policy-go { background: var(--boh-gold); border-color: var(--boh-gold); }
.gv-policy.is-live .gv-policy-link:focus-visible { outline: 2px solid var(--boh-gold); outline-offset: -2px; }
.gv-policy.is-pending .gv-policy-title { color: var(--text-on-light-muted); font-size: clamp(20px, 2vw, 25px); }
.gv-policy-status { flex: 0 0 auto; font-family: var(--font-functional); font-size: 12.5px; font-weight: var(--fw-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-light-muted); }
[dir="rtl"] .gv-policy-status { letter-spacing: 0; font-size: 14px; }

#strategy, #community-impact, #policies, #governance-statement { scroll-margin-top: 58px; }

@media (max-width: 1000px) {
    .su-strategy-grid, .su-env-grid, .su-impact-grid, .gv-statement-grid, .gv-excellence-top { grid-template-columns: minmax(0, 1fr); }
    .su-env-lead { position: static; }
    .su-topic-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gv-principles .sg-topic { grid-template-columns: 64px minmax(0, 1fr); }
    .gv-principles .sg-topic-body { grid-column: 2; padding-top: 12px; }
    .su-impact-photo { max-width: 560px; }
}

@media (max-width: 640px) {
    .su-topic-grid, .su-topic-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .gv-principles .sg-topic-body { columns: 1; }
    .gv-principles .sg-topic { grid-template-columns: 52px minmax(0, 1fr); padding: 22px 0; }
    .sg-topic-num { font-size: 32px; }
    .gv-policy.is-pending .gv-policy-link { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* Primary nav: nine direct links (Sustainability and Governance are separate). The nav never wraps: the links need
   about 700px plus their gaps (measured EN 546px, AR 541px of link text + 130px brand + gaps, inside 90% of the viewport),
   so (with "Media Center" as the seventh label) the compact menu takes over at 1180px and below, and between 1181px and 1440px the gap tightens
   (never below 22px) so all nine stay on one row at 15px. Above 1240px the spacing is unchanged. */
@media (min-width: 1181px) and (max-width: 1440px) {
    .future-nav { flex-wrap: nowrap; }
    .future-nav .links { flex-wrap: nowrap; gap: clamp(22px, calc((90vw - 753px) / 8 - 8px), 64px); }
}

@media (min-width: 901px) and (max-width: 1180px) {
    .future-nav-toggle { display: flex; }
    .future-nav .links { display: none; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; gap: 0; padding: 10px 5%; background: var(--boh-primary-deep); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25); }
    .future-nav.is-open .links { display: flex; }
    .future-nav .links a { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
    .future-nav .links a::after { display: none; }
    .future-nav .links a:last-child { border-bottom: 0; }
}

/* Compact menu: a page header with a short (or image-free) hero clips the open menu — nine links need about 580px. */
@media (max-width: 1180px) {
    .future-page-header:has(.future-nav.is-open) { min-height: 600px; }
}

/* ==========================================================================
   Sustainability / Governance — polish pass: Environmental ledger + sub-chapter, Social expandable ledger,
   Quality & Safety credentials, Community Impact facts, Governance rows.
   ========================================================================== */

/* ---- Environmental: statement band, full-width ledger, indented Decarbonization sub-chapter -------------------------- */
.su-env-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.su-env-top .ab-head { margin-bottom: 0; }
.su-env-lead { position: static; }
.su-env-lead .su-statement { margin-bottom: 18px; }
.su-env-lead .su-support { max-width: 62ch; }

.su-subchapter { margin-top: clamp(48px, 6vw, 80px); padding-inline-start: clamp(24px, 3.5vw, 56px); border-inline-start: 3px solid var(--boh-gold); }
.su-subchapter-head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 4vw, 64px); align-items: start; margin-bottom: 8px; }
.su-subchapter > .su-subchapter-head > h3 { margin: 0; padding: 0; border: 0; font-family: var(--font-display); font-weight: var(--fw-h2); font-size: clamp(28px, 3vw, 40px); line-height: 1.15; color: #fff; }
.su-subchapter-head p { max-width: 62ch; margin: 0; font-family: var(--font-functional); font-size: 16px; line-height: 1.75; color: var(--text-on-dark-muted); }
.sg-topic-context { display: block; margin-bottom: 8px; font-family: var(--font-functional); font-size: 11.5px; font-weight: var(--fw-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--boh-gold); }
[dir="rtl"] .sg-topic-context { letter-spacing: 0; font-size: 13px; }

/* ---- Social: compact expandable ledger ------------------------------------------------------------------------------ */
.su-acc-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); align-items: start; }
.su-acc-list { border-top: 2px solid var(--boh-charcoal); }
.su-acc { border-bottom: 1px solid rgba(38, 50, 56, 0.28); }
.su-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; }
.su-acc summary::-webkit-details-marker { display: none; }
.su-acc summary h3 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-h3); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.25; color: var(--text-on-light); }
[dir="rtl"] .su-acc summary h3 { line-height: 1.5; }
.su-acc-icon { position: relative; flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid rgba(38, 50, 56, 0.35); border-radius: 50%; transition: background 0.2s ease, border-color 0.2s ease; }
.su-acc-icon::before, .su-acc-icon::after { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 2px; background: var(--boh-charcoal); }
.su-acc-icon::after { transform: rotate(90deg); transition: transform 0.2s ease; }
.su-acc[open] .su-acc-icon { background: var(--boh-gold); border-color: var(--boh-gold); }
.su-acc[open] .su-acc-icon::after { transform: rotate(0deg); }
.su-acc summary:hover .su-acc-icon { border-color: var(--boh-gold); }
.su-acc summary:focus-visible { outline: 2px solid var(--boh-gold); outline-offset: 2px; }
.su-acc .sg-topic-body { padding: 0 0 24px; }
.su-acc .sg-topic-body p, .su-acc .sg-topic-body li { color: var(--text-on-light-muted); }
.su-social-lead { margin-bottom: clamp(28px, 4vw, 48px); }

/* ---- Quality & Safety: credentials ---------------------------------------------------------------------------------- */
.su-quality-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
.su-quality-top.has-photo { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.su-quality-top .ab-head { margin-bottom: 24px; }
.su-quality-statement { max-width: 34ch; margin: 0; }
.su-quality-photo { margin: 0; justify-self: end; width: 100%; max-width: 380px; }
.su-quality-photo img { display: block; width: 100%; height: auto; border-bottom: 3px solid var(--boh-gold); }

.su-creds { margin: clamp(44px, 6vw, 72px) 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.su-cred { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 0 clamp(20px, 3vw, 48px); align-items: start; padding: 30px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.su-cred-std { display: flex; flex-direction: column; gap: 8px; }
.su-cred-prefix { font-family: var(--font-functional); font-size: 12.5px; font-weight: var(--fw-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--boh-gold); }
.su-cred-num { font-family: var(--font-display); font-size: clamp(40px, 4.6vw, 68px); line-height: 1; color: #fff; }
.su-cred-body h3 { margin: 4px 0 10px; font-family: var(--font-display); font-weight: var(--fw-h3); font-size: clamp(20px, 1.9vw, 25px); line-height: 1.25; color: #fff; }
.su-cred-body p { margin: 0; max-width: 52ch; font-family: var(--font-functional); font-size: 15.5px; line-height: 1.7; color: var(--text-on-dark-muted); }
.su-cred-meta { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-functional); font-size: 13px; letter-spacing: 0.04em; color: var(--text-on-dark-muted); }
.su-cred-meta a { color: var(--boh-gold); text-decoration: none; border-bottom: 1px solid var(--boh-gold); align-self: flex-start; }
.su-quality-context { margin: 28px 0 0; font-family: var(--font-functional); font-size: 15px; color: var(--text-on-dark-muted); }
.su-quality-context a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--boh-gold); }

/* ---- Community Impact: the facts lead ------------------------------------------------------------------------------- */
.su-impact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.su-impact-copy .su-impact-headline { margin-top: 26px; }
.su-impact-photo { margin: 32px 0 0; max-width: 240px; }
.su-impact-photo img { border: 1px solid rgba(38, 50, 56, 0.18); border-bottom-width: 1px; }
.su-facts { border-bottom: 1px solid rgba(38, 50, 56, 0.28); }
.su-fact { position: relative; display: grid; grid-template-columns: minmax(200px, auto) minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 56px); align-items: start; padding: 30px 0; border-top: 1px solid rgba(38, 50, 56, 0.28); }
.su-fact:first-child::before { content: ""; position: absolute; top: -2px; inset-inline-start: 0; width: 32px; height: 3px; background: var(--boh-gold); }
.su-fact-num { font-family: var(--font-display); font-size: clamp(64px, 8vw, 116px); line-height: 0.9; color: var(--boh-charcoal-dark, var(--text-on-light)); }
.su-fact-text { display: block; max-width: 46ch; font-family: var(--font-functional); font-size: 17px; line-height: 1.75; color: var(--text-on-light-muted); }
.su-fact-text a { color: var(--text-on-light); border-bottom: 1px solid var(--boh-gold); text-decoration: none; }
.su-fact-label { font-size: 13px; font-weight: var(--fw-label); letter-spacing: 0.16em; text-transform: uppercase; align-self: end; }
[dir="rtl"] .su-fact-label { letter-spacing: 0; font-size: 15px; }

/* ---- Governance rows ------------------------------------------------------------------------------------------------ */
.gv-policy.is-live { position: relative; }
.gv-policy.is-live::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 3px; background: var(--boh-gold); }
.gv-policy.is-live .gv-policy-link { padding-inline-start: clamp(20px, 2.4vw, 32px); }
.gv-policy.is-pending .gv-policy-link { padding-inline-start: clamp(20px, 2.4vw, 32px); }
.gv-policy-status { display: inline-flex; align-items: center; gap: 10px; }
.gv-policy-status::before { content: ""; width: 8px; height: 8px; border: 1.5px solid var(--text-on-light-muted); border-radius: 50%; }
.gv-principles .sg-topic-body { padding-top: 6px; }

@media (max-width: 1000px) {
    .su-env-top, .su-subchapter-head, .su-impact-grid, .su-quality-top.has-photo { grid-template-columns: minmax(0, 1fr); }
    .su-acc-columns { grid-template-columns: minmax(0, 1fr); }
    .su-acc-columns .su-acc-list + .su-acc-list { border-top: 0; }
    .su-cred { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .su-quality-photo { justify-self: start; }
    .su-subchapter { padding-inline-start: 20px; }
}

@media (max-width: 640px) {
    .su-fact { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .su-fact-label { align-self: start; }
}

/* Keyboard focus for the compact-menu toggle (the links already show their hover/focus underline). */
.future-nav-toggle:focus-visible { outline: 2px solid var(--boh-gold); outline-offset: 4px; }

/* ==========================================================================
   Sustainability / Governance — visual refinement: compact imageless header, Environmental hierarchy,
   Decarbonization sub-chapter, Governance principle support text.
   ========================================================================== */

/* Compact institutional header (imageless charcoal): the title block sits on the bottom edge of a shorter band. */
.future-page-header.is-inner.is-compact:not(.has-cover) { min-height: 290px; }
.future-page-header.is-inner.is-compact:not(.has-cover) .future-page-header-inner { padding-bottom: 40px; }

@media (max-width: 700px) {
    .future-page-header.is-inner.is-compact:not(.has-cover) { min-height: 250px; }
    .future-page-header.is-inner.is-compact:not(.has-cover) .future-page-header-inner { padding-bottom: 28px; }
}

/* Environmental Excellence: clearer separation between themes, stronger headings, quieter bullets. */
.su-env .su-topic-grid { gap: 0 clamp(36px, 5vw, 80px); }
.su-env .su-topic-grid .sg-topic { position: relative; padding: 34px 0 38px; border-top: 1px solid rgba(255, 255, 255, 0.26); }
.su-env .su-topic-grid .sg-topic::before { content: ""; position: absolute; top: -2px; inset-inline-start: 0; width: 24px; height: 3px; background: var(--boh-gold); }
.su-env .sg-topic h3 { margin-bottom: 16px; font-weight: var(--fw-h2); font-size: clamp(22px, 2vw, 27px); line-height: 1.22; color: #fff; }
[dir="rtl"] .su-env .sg-topic h3 { line-height: 1.45; }
.su-env .sg-topic-body li { margin-bottom: 9px; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.68); }
.su-env .sg-topic-body li::before { opacity: 0.75; }
.su-env .sg-topic-context { margin-bottom: 10px; }

/* Decarbonization: a second movement inside the chapter — its own lead-in, larger heading, the gold trunk running the whole way. */
.su-subchapter { margin-top: clamp(80px, 9vw, 128px); padding-inline-start: clamp(28px, 4vw, 64px); border-inline-start-width: 4px; }
.su-subchapter-head { position: relative; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); row-gap: 12px; margin-bottom: clamp(24px, 3vw, 40px); }
.su-subchapter-eyebrow { grid-column: 1 / -1; font-family: var(--font-functional); font-size: 12.5px; font-weight: var(--fw-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--boh-gold); }
[dir="rtl"] .su-subchapter-eyebrow { letter-spacing: 0; font-size: 14px; }
.su-subchapter > .su-subchapter-head > h3 { font-size: clamp(34px, 3.8vw, 52px); line-height: 1.08; }
[dir="rtl"] .su-subchapter > .su-subchapter-head > h3 { line-height: 1.3; }
.su-subchapter-head p { font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, 0.82); }
.su-subchapter .su-topic-grid { margin-top: 12px; }

@media (max-width: 1000px) {
    .su-subchapter-head { grid-template-columns: minmax(0, 1fr); }
    .su-subchapter { padding-inline-start: 22px; }
}

/* Governance principles: the support text reads clearly under the numeral and title without competing with them. */
.gv-principles .sg-topic-body { padding-top: 8px; column-gap: 40px; }
.gv-principles .sg-topic-body li { margin-bottom: 12px; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, 0.84); }
.gv-principles .sg-topic-body li::before { top: 0.85em; }
.gv-principles .sg-topic-body p { font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, 0.84); }
.gv-principles .sg-topic { padding: 32px 0; }
@media (max-width: 640px) {
    .gv-principles .sg-topic-body li { font-size: 16px; }
}

/* The open compact menu needs room even inside the shorter imageless header. */
@media (max-width: 1180px) {
    .future-page-header.is-inner.is-compact:not(.has-cover):has(.future-nav.is-open) { min-height: 600px; }
}

/* ==========================================================================
   Social Responsibility: Areas of Focus + Initiatives & Impact (dynamic News ledger)
   ========================================================================== */
.su-acc summary h4 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-h3); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.25; color: var(--text-on-light); }
[dir="rtl"] .su-acc summary h4 { line-height: 1.5; }

.su-block { margin-top: clamp(48px, 6vw, 80px); }
.su-block-label { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-family: var(--font-functional); font-size: 12.5px; font-weight: var(--fw-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-on-light-muted); }
.su-block-label::before { content: ""; width: 24px; height: 3px; background: var(--boh-gold); }
[dir="rtl"] .su-block-label { letter-spacing: 0; font-size: 14px; }

.su-ledger { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--boh-charcoal); }
.su-init { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 0 clamp(24px, 3.5vw, 56px); align-items: start; padding: 32px 0; border-bottom: 1px solid rgba(38, 50, 56, 0.28); }
.su-init.has-media { grid-template-columns: 148px minmax(0, 1fr) minmax(0, 200px); }
.su-init-date { padding-top: 8px; font-family: var(--font-functional); font-size: 13px; font-weight: var(--fw-label); letter-spacing: 0.14em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--text-on-light-muted); }
[dir="rtl"] .su-init-date { letter-spacing: 0; font-size: 15px; }
.su-init-body h4 { margin: 0 0 12px; font-family: var(--font-display); font-weight: var(--fw-h2); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.22; text-wrap: balance; }
[dir="rtl"] .su-init-body h4 { line-height: 1.5; }
.su-init-body h4 a { color: var(--text-on-light); text-decoration: none; }
.su-init-body h4 a:hover, .su-init-body h4 a:focus-visible { text-decoration: underline; text-decoration-color: var(--boh-gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.su-init-body p { max-width: 60ch; margin: 0 0 18px; font-family: var(--font-functional); font-size: 16.5px; line-height: 1.7; color: var(--text-on-light-muted); }
.su-init-more { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-functional); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--text-on-light); border-bottom: 1px solid var(--boh-gold); padding-bottom: 4px; }
[dir="rtl"] .su-init-more { letter-spacing: 0; font-size: 15px; }
.su-init-more:hover .ab-cta-arrow { transform: scaleX(-1) translateX(-4px); }
[dir="rtl"] .su-init-more:hover .ab-cta-arrow { transform: translateX(-4px); }
.su-init-more:focus-visible { outline: 2px solid var(--boh-gold); outline-offset: 4px; }
.su-init-media { display: block; align-self: start; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid rgba(38, 50, 56, 0.16); }
.su-init-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
    .su-init, .su-init.has-media { grid-template-columns: minmax(0, 1fr); gap: 12px 0; }
    .su-init-date { padding-top: 0; }
    .su-init-media { max-width: 260px; }
}

/* ==========================================================================
   Visual refinement — Initiatives & Impact hierarchy, Environmental density, header without an eyebrow
   ========================================================================== */

/* imageless institutional header: gold rule + title + breadcrumb on a shorter band */
.future-page-header.is-inner.is-compact:not(.has-cover) { min-height: 240px; }
@media (max-width: 700px) { .future-page-header.is-inner.is-compact:not(.has-cover) { min-height: 210px; } }

/* Initiatives & Impact: a proper subsection heading; the title dominates each row */
.su-block-title { display: flex; align-items: center; gap: 18px; margin: 0 0 22px; font-family: var(--font-display); font-weight: var(--fw-h2); font-size: clamp(28px, 3vw, 40px); line-height: 1.15; color: var(--text-on-light); }
.su-block-title::before { content: ""; flex: 0 0 auto; width: 32px; height: 3px; background: var(--boh-gold); }
[dir="rtl"] .su-block-title { line-height: 1.4; }
.su-initiatives { margin-top: clamp(64px, 7.5vw, 104px); }
.su-init { grid-template-columns: 132px minmax(0, 1fr); padding: 26px 0 28px; }
.su-init.has-media { grid-template-columns: 132px minmax(0, 1fr) minmax(0, 184px); }
.su-init-date { padding-top: 10px; font-size: 12.5px; }
.su-init-body h4 { margin-bottom: 10px; font-size: clamp(26px, 2.9vw, 38px); line-height: 1.16; }
[dir="rtl"] .su-init-body h4 { line-height: 1.45; }
.su-init-body p { margin-bottom: 14px; font-size: 16px; line-height: 1.65; }
.su-init-more { font-size: 12.5px; }
@media (max-width: 900px) {
    .su-init, .su-init.has-media { grid-template-columns: minmax(0, 1fr); }
    .su-init-body h4 { font-size: clamp(24px, 6vw, 30px); }
}

/* Environmental Excellence: stronger topic headings, more air between rows */
.su-env .su-topic-grid .sg-topic { padding: 40px 0 44px; }
.su-env .sg-topic h3 { font-size: clamp(23px, 2.2vw, 30px); margin-bottom: 18px; }
.su-env .sg-topic-body li { margin-bottom: 10px; }

/* Governance principles: a touch more line height for the support text */
.gv-principles .sg-topic-body li, .gv-principles .sg-topic-body p { line-height: 1.7; }

/* ==========================================================================
   Mobile polish — Governance principle spacing, Environmental rhythm, Initiative image order
   ========================================================================== */

/* Governance principles: a clearer gap between the numeral and the title (numeral size unchanged; LTR and RTL alike) */
@media (max-width: 640px) {
    .gv-principles .sg-topic { grid-template-columns: 58px minmax(0, 1fr); column-gap: 30px; }
}

/* Environmental Excellence on phones: a tighter rhythm; Decarbonization stays a clearly marked sub-chapter */
@media (max-width: 700px) {
    .su-env .su-topic-grid .sg-topic { padding: 28px 0 30px; }
    .su-env .sg-topic h3 { margin-bottom: 12px; }
    .su-env .sg-topic-body li { margin-bottom: 8px; }
    .su-env-top { margin-bottom: 28px; }
    .su-subchapter { margin-top: 52px; padding-inline-start: 18px; }
    .su-subchapter-head { margin-bottom: 8px; row-gap: 8px; }
    /* the sub-chapter (gold trunk + its own heading) already gives the context: the repeated label above every topic is dropped */
    .su-subchapter .sg-topic-context { display: none; }
}

/* Initiatives on phones/tablets: date · title · excerpt · optional thumbnail · Read Article (the action closes the row) */
@media (max-width: 900px) {
    .su-init .su-init-body { display: contents; }
    .su-init > .su-init-date { order: 0; }
    .su-init .su-init-body h4 { order: 1; margin: 0; }
    .su-init .su-init-body p { order: 2; margin: 0; }
    .su-init > .su-init-media { order: 3; justify-self: start; width: 100%; max-width: 240px; margin-top: 6px; }
    .su-init .su-init-body .su-init-more { order: 4; justify-self: start; margin-top: 8px; }
}

/* ==========================================================================
   Media Center (mc-*) and the News archive (nw-*) — the newsroom in the About / Sustainability system.
   ========================================================================== */
.mc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.mc-head h2 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-h2); font-size: clamp(32px, 4vw, 54px); line-height: var(--lh-h2); }
[dir="rtl"] .mc-head h2 { line-height: var(--lh-h2-ar); }
.mc-all, .mc-more, .nw-more { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-functional); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--text-on-light); border-bottom: 1px solid var(--boh-gold); padding-bottom: 4px; white-space: nowrap; }
[dir="rtl"] .mc-all, [dir="rtl"] .mc-more, [dir="rtl"] .nw-more { letter-spacing: 0; font-size: 15px; }
.mc-all:hover .ab-cta-arrow, .mc-more:hover .ab-cta-arrow, .nw-more:hover .ab-cta-arrow { transform: scaleX(-1) translateX(-4px); }
[dir="rtl"] .mc-all:hover .ab-cta-arrow, [dir="rtl"] .mc-more:hover .ab-cta-arrow, [dir="rtl"] .nw-more:hover .ab-cta-arrow { transform: translateX(-4px); }
.mc-all:focus-visible, .mc-more:focus-visible, .nw-more:focus-visible { outline: 2px solid var(--boh-gold); outline-offset: 4px; }
.mc-date, .nw-date { font-family: var(--font-functional); font-size: 12.5px; font-weight: var(--fw-label); letter-spacing: 0.14em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--text-on-light-muted); }
[dir="rtl"] .mc-date, [dir="rtl"] .nw-date { letter-spacing: 0; font-size: 15px; }

/* Latest News */
.mc-lead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px clamp(32px, 5vw, 72px); align-items: center; padding-top: 28px; border-top: 2px solid var(--boh-charcoal); }
.mc-lead.has-media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.mc-lead-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 3px solid var(--boh-gold); }
.mc-lead-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mc-lead-body h3 { margin: 12px 0 16px; font-family: var(--font-display); font-weight: var(--fw-h2); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.16; text-wrap: balance; }
[dir="rtl"] .mc-lead-body h3 { line-height: 1.45; }
.mc-lead-body h3 a, .mc-secondary h3 a { color: var(--text-on-light); text-decoration: none; }
.mc-lead-body h3 a:hover, .mc-lead-body h3 a:focus-visible, .mc-secondary h3 a:hover, .mc-secondary h3 a:focus-visible { text-decoration: underline; text-decoration-color: var(--boh-gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.mc-lead-body p { max-width: 56ch; margin: 0 0 20px; font-family: var(--font-functional); font-size: 17px; line-height: 1.7; color: var(--text-on-light-muted); }
.mc-secondary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(38, 50, 56, 0.28); }
.mc-secondary li { padding: 26px clamp(20px, 2.4vw, 36px) 4px 0; }
.mc-secondary li + li { padding-inline-start: clamp(20px, 2.4vw, 36px); border-inline-start: 1px solid rgba(38, 50, 56, 0.2); }
.mc-secondary h3 { margin: 10px 0 0; font-family: var(--font-display); font-weight: var(--fw-h3); font-size: clamp(20px, 1.9vw, 25px); line-height: 1.25; }
[dir="rtl"] .mc-secondary h3 { line-height: 1.5; }

/* In the Media (dark) / From Our Channels (light): curated external rows */
.mc-items { margin: 0; padding: 0; list-style: none; }
.mc-item { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 0 clamp(24px, 4vw, 64px); align-items: start; padding: 30px 0; border-top: 1px solid rgba(255, 255, 255, 0.24); }
.mc-item.has-media { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 2fr); }
.mc-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.24); }
.mc-item-source { display: block; font-family: var(--font-display); font-weight: var(--fw-h3); font-size: clamp(20px, 1.9vw, 26px); line-height: 1.25; color: #fff; }
.mc-item-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; font-family: var(--font-functional); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-dark-muted); font-variant-numeric: tabular-nums; }
[dir="rtl"] .mc-item-line { letter-spacing: 0; font-size: 14px; }
.mc-item-platform { color: var(--boh-gold); font-weight: 700; }
.mc-item-body h3 { margin: 0 0 12px; font-family: var(--font-display); font-weight: var(--fw-h2); font-size: clamp(22px, 2.3vw, 31px); line-height: 1.22; text-wrap: balance; }
[dir="rtl"] .mc-item-body h3 { line-height: 1.5; }
.mc-item-body h3 a { color: #fff; text-decoration: none; }
.mc-item-body h3 a:hover, .mc-item-body h3 a:focus-visible { text-decoration: underline; text-decoration-color: var(--boh-gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.mc-item-body p { max-width: 58ch; margin: 0 0 16px; font-family: var(--font-functional); font-size: 16px; line-height: 1.7; color: var(--text-on-dark-muted); }
.mc-item-more { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-functional); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--boh-gold); border-bottom: 1px solid var(--boh-gold); padding-bottom: 4px; }
[dir="rtl"] .mc-item-more { letter-spacing: 0; font-size: 15px; }
.mc-item-more:focus-visible, .mc-follow a:focus-visible, .mc-item-body h3 a:focus-visible { outline: 2px solid var(--boh-gold); outline-offset: 4px; }
.mc-item-media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); }
.mc-item-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mc-ext-icon { flex: 0 0 auto; }

.mc-external--owned .mc-item { border-top-color: rgba(38, 50, 56, 0.28); }
.mc-external--owned .mc-item:last-child { border-bottom-color: rgba(38, 50, 56, 0.28); }
.mc-external--owned .mc-item-source, .mc-external--owned .mc-item-body h3 a { color: var(--text-on-light); }
.mc-external--owned .mc-item-line, .mc-external--owned .mc-item-body p { color: var(--text-on-light-muted); }
.mc-external--owned .mc-item-platform { color: var(--boh-gold-dark, #8a6d17); }
.mc-external--owned .mc-item-more { color: var(--text-on-light); }
.mc-external--owned .mc-item-media { border-color: rgba(38, 50, 56, 0.16); }
.mc-external--media .mc-head h2 { color: #fff; }

/* Follow Our Channels */
.mc-follow-inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 18px 40px; padding-top: 28px; border-top: 2px solid var(--boh-charcoal); }
.mc-follow h2 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-h2); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; }
.mc-follow ul { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none; }
.mc-follow a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-functional); font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; color: var(--text-on-light); border-bottom: 1px solid var(--boh-gold); padding-bottom: 3px; }
.mc-follow a:hover { border-bottom-width: 2px; }

/* News archive */
.nw-years { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; margin-bottom: clamp(24px, 3vw, 40px); padding-bottom: 18px; border-bottom: 1px solid rgba(38, 50, 56, 0.28); }
.nw-years-label { font-family: var(--font-functional); font-size: 12.5px; font-weight: var(--fw-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-on-light-muted); }
[dir="rtl"] .nw-years-label { letter-spacing: 0; font-size: 14px; }
.nw-years ul { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.nw-years a { font-family: var(--font-functional); font-size: 16px; font-weight: 600; text-decoration: none; color: var(--text-on-light-muted); padding: 4px 0; border-bottom: 2px solid transparent; font-variant-numeric: tabular-nums; }
.nw-years a:hover, .nw-years a:focus-visible { color: var(--text-on-light); border-bottom-color: rgba(224, 184, 36, 0.6); }
.nw-years a.is-active { color: var(--text-on-light); border-bottom-color: var(--boh-gold); }
.nw-years a:focus-visible { outline: 2px solid var(--boh-gold); outline-offset: 3px; }
.nw-empty { margin: 40px 0; font-family: var(--font-functional); font-size: 18px; color: var(--text-on-light-muted); }
.nw-ledger { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--boh-charcoal); }
.nw-row { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 0 clamp(24px, 3.5vw, 56px); align-items: start; padding: 28px 0; border-bottom: 1px solid rgba(38, 50, 56, 0.28); }
.nw-row.has-media { grid-template-columns: 148px minmax(0, 1fr) minmax(0, 200px); }
.nw-date { padding-top: 10px; }
.nw-body h2 { margin: 0 0 10px; font-family: var(--font-display); font-weight: var(--fw-h2); font-size: clamp(23px, 2.5vw, 33px); line-height: 1.2; text-wrap: balance; }
[dir="rtl"] .nw-body h2 { line-height: 1.5; }
.nw-body h2 a { color: var(--text-on-light); text-decoration: none; }
.nw-body h2 a:hover, .nw-body h2 a:focus-visible { text-decoration: underline; text-decoration-color: var(--boh-gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nw-body p { max-width: 60ch; margin: 0 0 14px; font-family: var(--font-functional); font-size: 16px; line-height: 1.65; color: var(--text-on-light-muted); }
.nw-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid rgba(38, 50, 56, 0.16); }
.nw-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nw-archive .future-pagination { margin-top: clamp(32px, 4vw, 52px); }

@media (max-width: 900px) {
    .mc-lead.has-media { grid-template-columns: minmax(0, 1fr); }
    .mc-secondary { grid-template-columns: minmax(0, 1fr); }
    .mc-secondary li, .mc-secondary li + li { padding: 20px 0; border-inline-start: 0; border-top: 1px solid rgba(38, 50, 56, 0.2); }
    .mc-secondary li:first-child { border-top: 0; }
    .mc-item, .mc-item.has-media { grid-template-columns: minmax(0, 1fr); gap: 14px 0; }
    .mc-item-media { max-width: 240px; }
    .nw-row, .nw-row.has-media { grid-template-columns: minmax(0, 1fr); gap: 12px 0; }
    .nw-date { padding-top: 0; }
    .nw-row .nw-body { display: contents; }
    .nw-row > .nw-date { order: 0; }
    .nw-row .nw-body h2 { order: 1; margin: 0; }
    .nw-row .nw-body p { order: 2; margin: 0; }
    .nw-row > .nw-media { order: 3; justify-self: start; width: 100%; max-width: 240px; margin-top: 6px; }
    .nw-row .nw-body .nw-more { order: 4; justify-self: start; margin-top: 8px; }
    .mc-head { flex-wrap: wrap; align-items: flex-start; }
}

/* Media items: one three-column grid for every row, so headlines align whether or not a row has an image */
@media (min-width: 901px) {
    .mc-item, .mc-item.has-media { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 2fr); }
    .mc-item-body { grid-column: 2; }
    .mc-item-media { grid-column: 3; }
}

/* ==========================================================================
   Media Center / News archive — verification polish: explicit focus-visible outlines on the
   Latest News title links (consistent with the rest of the CTA system), and comfortable mobile
   touch targets for the year filter and pagination (padding, not larger type).
   ========================================================================== */
.mc-lead-body h3 a:focus-visible, .mc-secondary h3 a:focus-visible { outline: 2px solid var(--boh-gold); outline-offset: 4px; border-radius: 1px; }

@media (max-width: 900px) {
    /* ~40px tap height via padding; the visible text/underline stay the same size. Gap is measured between the
       (now larger) tap boxes themselves, so wrapped rows/columns never overlap. */
    .nw-years a { padding: 11px 8px; }
    .nw-years ul { gap: 6px 10px; }
    .nw-years { gap: 6px 12px; }

    .future-pagination a, .future-pagination span { min-width: 44px; height: 44px; }
    .future-pagination { gap: 10px; }
}

/* ==========================================================================
   News Detail refinement (nws-*) — one continuous cream editorial composition below the
   compact charcoal header: no independent dark image stage, a controlled reading width,
   a compact metadata row, and restrained Previous/Next navigation (no giant closing block).
   ========================================================================== */
.future-sector-detail.is-article { background: var(--surface-cream); }

.nws-meta { display: flex; align-items: center; gap: 14px; max-width: var(--w-standard); margin: 0 auto; padding: clamp(28px, 4vw, 44px) 5% 0; font-family: var(--font-functional); font-size: 13px; font-weight: var(--fw-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-on-light-muted); font-variant-numeric: tabular-nums; }
[dir="rtl"] .nws-meta { letter-spacing: 0; font-size: 15px; }
.nws-meta-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--boh-gold); flex: 0 0 auto; }
.nws-meta-topic { color: var(--text-on-light); }

.nws-media { max-width: var(--w-wide); margin: clamp(24px, 3vw, 36px) auto clamp(32px, 4vw, 52px); padding: 0 5%; box-sizing: border-box; }
.nws-media img { display: block; width: 100%; height: auto; border: 1px solid rgba(38, 50, 56, 0.1); }

.nws-body.fsd-article-body { max-width: 700px; }
[dir="rtl"] .nws-body.fsd-article-body { max-width: 740px; }
.fsd-related-list.nws-body { margin-inline: auto; margin-top: var(--space-lg); max-width: 700px; }
[dir="rtl"] .fsd-related-list.nws-body { max-width: 740px; }

/* Previous / Next — a quiet closing row, not a full-bleed dark block. */
.nws-adjacent { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 40px); padding: clamp(32px, 4vw, 52px) 5%; border-top: 1px solid var(--boh-border); }
.nws-adjacent-link { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text-on-light); min-width: 0; }
.nws-adjacent-link.is-next { grid-column: 2; justify-content: flex-end; text-align: end; flex-direction: row-reverse; }
.nws-adjacent-arrow { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--boh-border); color: var(--text-on-light-muted); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.nws-adjacent-link.is-prev .nws-adjacent-arrow svg { transform: none; }
.nws-adjacent-link.is-next .nws-adjacent-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .nws-adjacent-link.is-prev .nws-adjacent-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .nws-adjacent-link.is-next .nws-adjacent-arrow svg { transform: none; }
.nws-adjacent-link:hover .nws-adjacent-arrow, .nws-adjacent-link:focus-visible .nws-adjacent-arrow { background: var(--boh-gold); border-color: var(--boh-gold); color: var(--boh-charcoal-dark, #1d262a); }
.nws-adjacent-link:focus-visible { outline: 2px solid var(--boh-gold); outline-offset: 4px; border-radius: 2px; }
.nws-adjacent-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nws-adjacent-label { font-family: var(--font-functional); font-size: 11px; font-weight: var(--fw-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-on-light-muted); }
[dir="rtl"] .nws-adjacent-label { letter-spacing: 0; font-size: 13px; }
.nws-adjacent-title { font-family: var(--font-display); font-weight: var(--fw-h3); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.35; color: var(--text-on-light); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

@media (max-width: 700px) {
    .nws-adjacent { grid-template-columns: 1fr; }
    .nws-adjacent-link.is-next { grid-column: 1; flex-direction: row; justify-content: flex-start; text-align: start; }
    .nws-adjacent-link.is-next .nws-adjacent-arrow svg { transform: scaleX(-1); }
    [dir="rtl"] .nws-adjacent-link.is-next .nws-adjacent-arrow svg { transform: none; }
}

/* ==========================================================================
   HOME V2 — Home-scoped component rules only (Home Page V2 spec, §17): every
   selector below is used exclusively by themes/binomairah-future/home.blade.php.
   Nothing here modifies the older .future-stats, .future-sector-card/grid,
   .future-showcase or .future-closing rules — those stay exactly as they were
   for any other page that uses them; Home simply stopped referencing them.
   ========================================================================== */

/* --- Hero shell: copy + scrim only. The Slide/Setting video/image
   architecture behind .home-hero is untouched; this scrim is deliberately
   frame-agnostic (a broad, blurred dark scrim anchored to the text column,
   not tuned to any one moment of the current temporary video) so a future
   replacement video drops into the same shell without a redesign. --*/
.home-hero .home-hero-scrim {
    /* Stronger and more uniform than a single diagonal tint alone (kept
       from the previous 155deg wash) — this median darkness holds up
       against a bright frame as easily as a dark one. */
    background: linear-gradient(155deg, rgba(20, 26, 30, 0.58) 0%, rgba(20, 26, 30, 0.64) 45%, rgba(20, 26, 30, 0.8) 100%);
}

.home-hero .future-hero-copy::before {
    /* A second, wide radial scrim locked to the text column itself (not the
       whole hero) — guarantees contrast for the copy specifically, whatever
       plays behind it, while still leaving most of the frame visible. */
    content: "";
    position: absolute;
    inset-inline-start: -10%;
    bottom: -10%;
    width: 85%;
    height: 90%;
    /* Centered on its own box (50% 50%) and fully transparent by 68% of the ray, so it fades out before every edge
       of the box in BOTH directions — a physically-offset center (e.g. 30%) leaves a visible hard edge in RTL, where
       the box is anchored to the opposite side via inset-inline-start. */
    background: radial-gradient(ellipse at 50% 50%, rgba(15, 20, 23, 0.55) 0%, rgba(15, 20, 23, 0) 68%);
    z-index: 0;
    pointer-events: none;
}

.home-hero .future-hero-copy .inner {
    position: relative;
    z-index: 1;
}

.home-hero-line {
    display: block;
}

.home-hero-businesses {
    font-family: var(--font-functional);
    font-size: 14px;
    font-weight: var(--fw-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-on-dark-muted);
    margin: 0 0 36px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

[dir="rtl"] .home-hero-businesses {
    letter-spacing: 0;
}


/* --- Hero shell additions: stable sizing, wider copy measure, and a fade into the dark Scale section so the two read as
   one continuous composition. Independent of any frame of the (temporary) hero video. --- */
:root {
    --home-deep: #171e22;
}

.home-hero {
    min-height: clamp(620px, 88vh, 820px);
}

.home-hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 34%;
    background: linear-gradient(transparent, var(--home-deep));
    pointer-events: none;
    z-index: 1;
}

/* Caption position: the copy sits in the lower part of the hero (a cinematic caption, letting the footage lead) and keeps
   a safe gap above the hero/Scale transition. It is anchored to the hero edges, never to anything in the footage. */
.home-hero .future-hero-copy {
    align-items: flex-end;
    padding-bottom: clamp(80px, 6.5vw, 100px);
}

@media (max-width: 900px) {
    /* Lower-middle on small screens: clear of the bottom edge and the timeline below. */
    .home-hero .future-hero-copy { padding-bottom: 150px; }
}

/* Accent: brand gold on the eyebrow and the key phrase only. */
.home-hero .future-eyebrow.on-dark,
.home-hero-accent {
    color: var(--boh-gold);
}

.home-hero .future-hero-copy .inner {
    max-width: 900px;
}

/* Hero statement: uppercase Latin H1 as the dominant message, with a tighter measure on small screens so the two lines
   stay two lines. Arabic has no case, so it keeps its own letterforms and line-height. */
.home-hero h1 {
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

[dir="rtl"] .home-hero h1 {
    text-transform: none;
    letter-spacing: 0;
}

.home-hero .future-cta .arr {
    flex: none;
}

[dir="rtl"] .home-hero .future-cta .arr {
    transform: scaleX(-1);
}

@media (max-width: 900px) {
    .home-hero h1 { font-size: clamp(27px, 7.4vw, 40px); }
}

/* --- Shared Home primitives --- */
.home-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 5%;
}

.home-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-family: var(--font-functional);
    font-weight: var(--fw-label);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: inherit;
}

.home-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--boh-gold);
    flex: none;
}

[dir="rtl"] .home-eyebrow {
    letter-spacing: 0;
    font-size: 14px;
}

/* Editorial text action: type + line + arrow — no button chrome. */
.home-act {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    position: relative;
    padding-bottom: 10px;
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(20px, 2vw, 26px);
    color: inherit;
}

.home-act::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: currentColor;
    opacity: 0.25;
}

.home-act::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    height: 2px;
    width: 34%;
    background: var(--boh-gold);
    z-index: 1;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-act:hover::before,
.home-act:focus-visible::before {
    width: 100%;
}

.home-act:focus-visible,
.home-biz-row:focus-visible,
.pick:focus-visible,
.pw .v:focus-visible,
.lrow:focus-visible,
.home-acc-item > h3 > button:focus-visible {
    outline: 2px solid var(--boh-gold);
    outline-offset: 4px;
}

/* Forward arrow: right in LTR, left in RTL; nudges toward its direction on hover. */
.home-act .arr,
.pw .v .arr,
.lrow .arr {
    display: inline-block;
    flex: none;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

[dir="rtl"] .home-act .arr,
[dir="rtl"] .pw .v .arr,
[dir="rtl"] .lrow .arr {
    transform: scaleX(-1);
}

.home-act:hover .arr,
.home-act:focus-visible .arr {
    transform: translateX(6px);
}

[dir="rtl"] .home-act:hover .arr,
[dir="rtl"] .home-act:focus-visible .arr {
    transform: scaleX(-1) translateX(6px);
}

/* --- Scale: dark chainage timeline + large live figures. Default (no JS / reduced motion) is the FINAL state. --- */
.home-scale {
    background: var(--home-deep);
    color: #fff;
    padding: 0 0 clamp(56px, 7vw, 96px);
    margin-top: -1px;
}

.home-ruler {
    position: relative;
    height: 74px;
}

.home-ruler .ticks {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.home-ruler .t {
    width: 1px;
    height: 10px;
    background: var(--boh-gold);
    opacity: 0.75;
    transition: background 0.3s ease;
    transition-delay: calc(var(--i) * 22ms);
}

.home-ruler .t.dec {
    height: 24px;
    background: var(--boh-gold);
    opacity: 1;
}

.home-ruler .base {
    position: absolute;
    inset-inline: 0;
    top: 30px;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
}

.home-ruler .fill {
    position: absolute;
    inset-inline-start: 0;
    top: 30px;
    height: 2px;
    width: 100%;
    background: var(--boh-gold);
    transition: width 1.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-ruler .labels {
    position: absolute;
    inset-inline: 0;
    top: 44px;
    height: 20px;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.63);
    font-variant-numeric: tabular-nums;
}

.home-ruler .labels span {
    position: absolute;
    transform: translateX(-50%);
}

[dir="rtl"] .home-ruler .labels span {
    transform: translateX(50%);
}

.home-ruler .now {
    position: absolute;
    top: 23px;
    inset-inline-end: 0;
    width: 14px;
    height: 14px;
    background: var(--boh-gold);
    transform: translate(50%, 0) rotate(45deg);
    transition: opacity 0.4s ease 1.6s;
}

[dir="rtl"] .home-ruler .now {
    transform: translate(-50%, 0) rotate(45deg);
}

/* Motion is opt-in (html.motion-ready is only added when reduced-motion is NOT requested). */
html.motion-ready .home-ruler:not(.on) .fill { width: 0; }
html.motion-ready .home-ruler:not(.on) .t { background: rgba(255, 255, 255, 0.4); opacity: 1; }
html.motion-ready .home-ruler:not(.on) .t.dec { background: rgba(255, 255, 255, 0.7); }
html.motion-ready .home-ruler:not(.on) .now { opacity: 0; }

.home-figs {
    list-style: none;
    margin: clamp(28px, 4vw, 52px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.home-fig {
    position: relative;
    padding: 0 clamp(12px, 2vw, 28px) 6px;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.13);
}

.home-fig:first-child {
    border-inline-start: 0;
    padding-inline-start: 0;
}

.home-fig::before {
    content: "";
    position: absolute;
    inset-inline-start: -4px;
    top: -14px;
    width: 7px;
    height: 7px;
    background: var(--boh-gold);
    transform: rotate(45deg);
}

.home-fig:first-child::before {
    inset-inline-start: 0;
}

.home-fig .n {
    display: block;
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: clamp(54px, 9.4vw, 138px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.home-fig:first-child .n {
    color: var(--boh-gold);
}

.home-fig .n sup {
    font-size: 0.36em;
    vertical-align: top;
    position: relative;
    top: 0.22em;
    margin-inline-end: 0.06em;
    color: var(--boh-gold);
}

.home-fig .l {
    display: block;
    margin-top: 14px;
    font-size: 13px;
    font-weight: var(--fw-label);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

[dir="rtl"] .home-fig .l {
    letter-spacing: 0;
    font-size: 16px;
}

@media (max-width: 760px) {
    .home-figs { grid-template-columns: 1fr 1fr; row-gap: 34px; }
    .home-fig:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
    .home-fig:nth-child(3)::before { inset-inline-start: 0; }
}

/* --- Businesses: index + one changing dark stage. The technical grid / outline numeral live ONLY inside .home-stage. --- */
.home-biz {
    padding: clamp(72px, 9vw, 128px) 0;
    background: var(--surface-cream);
}

.home-biz-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(24px, 4vw, 64px);
    margin-top: clamp(28px, 4vw, 48px);
}

.home-biz-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--boh-border);
}

.home-biz-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 26px 6px;
    border: 0;
    border-bottom: 1px solid var(--boh-border);
    background: none;
    cursor: pointer;
    text-align: start;
    color: #6f8089;
    position: relative;
    transition: color 0.3s ease, padding 0.3s ease;
}

.home-biz-row::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: -1px;
    bottom: -1px;
    width: 3px;
    background: var(--boh-gold);
    transform: scaleY(0);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-biz-row .i {
    font-size: 13px;
    font-weight: var(--fw-label);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}

.home-biz-row .t {
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(26px, 3.3vw, 44px);
    line-height: 1.1;
}

[dir="rtl"] .home-biz-row .t {
    line-height: 1.3;
}

.home-biz-row .a {
    width: 38px;
    height: 38px;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateX(-8px);
    transition: 0.3s ease;
}

[dir="rtl"] .home-biz-row .a { transform: translateX(8px); }
[dir="rtl"] .home-biz-row .a svg { transform: scaleX(-1); }

.home-biz-row[aria-selected="true"] {
    color: var(--boh-charcoal);
    padding-inline-start: 22px;
}

.home-biz-row[aria-selected="true"]::before { transform: scaleY(1); }

.home-biz-row[aria-selected="true"] .a {
    opacity: 1;
    transform: none;
    background: var(--boh-gold);
    border-color: var(--boh-gold);
    color: var(--boh-charcoal-dark);
}

.home-biz-row:hover:not([aria-selected="true"]) { color: var(--boh-charcoal); }

.home-stage {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    background: var(--boh-charcoal-dark);
    color: #fff;
}

.home-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    background-position: var(--gx, 0) var(--gy, 0);
    transition: background-position 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-pane {
    position: absolute;
    inset: 0;
    padding: clamp(28px, 4vw, 52px);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
}

.home-pane.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.home-pane .big {
    position: absolute;
    inset-inline-end: -0.04em;
    bottom: -0.18em;
    font-family: var(--font-display);
    font-weight: var(--fw-stat-strong);
    font-size: clamp(200px, 26vw, 380px);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.15);
    pointer-events: none;
}

.home-pane .k {
    position: relative;
    font-size: 12px;
    font-weight: var(--fw-label);
    letter-spacing: 0.2em;
    color: var(--boh-gold);
}

[dir="rtl"] .home-pane .k { letter-spacing: 0; font-size: 14px; }

.home-pane h3 {
    position: relative;
    margin: 12px 0 26px;
    max-width: 14em;
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.15;
    color: #fff;
}

[dir="rtl"] .home-pane h3 { line-height: 1.3; }

.home-pane ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 560px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
}

.home-pane li {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    font-size: 16px;
    opacity: 0;
    transform: translateY(8px);
    transition: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--d) * 70ms + 120ms);
}

.home-pane.is-on li { opacity: 1; transform: none; }

.home-pane li::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--boh-gold);
    transform: rotate(45deg);
    flex: none;
    position: relative;
    top: -2px;
}

.home-pane .home-act {
    position: relative;
    margin-top: auto;
    align-self: flex-start;
    color: #fff;
}

.home-acc { display: none; }

@media (max-width: 900px) {
    .home-biz-grid { display: none; }
    .home-acc { display: block; margin-top: 28px; border-top: 1px solid var(--boh-border); }
    .home-acc-item { border-bottom: 1px solid var(--boh-border); }
    .home-acc-item > h3 { margin: 0; }
    .home-acc-item > h3 > button {
        display: grid;
        grid-template-columns: 36px 1fr 32px;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 22px 2px;
        border: 0;
        background: none;
        cursor: pointer;
        text-align: start;
        color: #6f8089;
    }
    .home-acc-item > h3 > button .i { font-size: 13px; font-weight: var(--fw-label); }
    .home-acc-item > h3 > button .t { font-family: var(--font-display); font-size: 26px; font-weight: var(--fw-h2); }
    .home-acc-item > h3 > button .p {
        width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%;
        display: grid; place-items: center; font-size: 16px; transition: transform 0.3s ease;
    }
    .home-acc-item.is-open > h3 > button { color: var(--boh-charcoal); }
    .home-acc-item.is-open > h3 > button .p { transform: rotate(45deg); background: var(--boh-gold); border-color: var(--boh-gold); }
    .home-acc-item .body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; visibility: hidden; }
    .home-acc-item.is-open .body { grid-template-rows: 1fr; visibility: visible; }
    .home-acc-item .body > div { overflow: hidden; }
    .home-acc-item .in { background: var(--boh-charcoal-dark); color: #fff; padding: 22px; margin-bottom: 18px; }
    .home-acc-item .in ul { list-style: none; margin: 0 0 22px; padding: 0; }
    .home-acc-item .in li { display: flex; gap: 10px; align-items: baseline; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.13); }
    .home-acc-item .in li::before { content: ""; width: 6px; height: 6px; background: var(--boh-gold); transform: rotate(45deg); flex: none; }
    .home-acc-item .in .home-act { font-size: 20px; }
}

/* --- Project showcase: ONE compact stage — dominant image + three selectable projects. Crossfade only. --- */
.home-proj {
    background: var(--home-deep);
    color: #fff;
    padding: clamp(56px, 7vw, 96px) 0;
}

.home-viewer {
    display: grid;
    grid-template-columns: 62fr 38fr;
    /* min-height, not a fixed height: the full project title always wraps in view (never clamped or ellipsised), and the
       compact 65-70vh stage only grows for an unusually long title. */
    min-height: clamp(460px, 68vh, 640px);
    margin-top: clamp(24px, 3vw, 40px);
    background: var(--boh-charcoal-dark);
}

.home-viewer .shots {
    position: relative;
    overflow: hidden;
    background: #0f1417;
}

.home-viewer .shots img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.045);
    transition: opacity 0.7s ease, transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-viewer .shots img.is-on { opacity: 1; transform: none; }

.home-viewer .prog {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 2;
}

.home-viewer .prog i {
    display: block;
    height: 100%;
    width: 33.33%;
    background: var(--boh-gold);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-viewer .cnt {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    z-index: 2;
    padding: 12px 22px;
    background: var(--home-deep);
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}

.home-viewer .cnt b { color: var(--boh-gold); font-size: 24px; margin-inline-end: 6px; }

.home-viewer .picks {
    display: flex;
    flex-direction: column;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 0;
}

.home-viewer .pw {
    position: relative;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.35s ease;
}

.home-viewer .pw:last-child { border-bottom: 0; }

.home-viewer .pw::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--boh-gold);
    transform: scaleY(0);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.pick {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: clamp(16px, 2vw, 28px) clamp(20px, 2.4vw, 34px);
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    text-align: start;
    font: inherit;
}

.pick .m {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 12px;
    font-weight: var(--fw-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--boh-slate);
}

[dir="rtl"] .pick .m { letter-spacing: 0; font-size: 13px; }

.pick .m b {
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0;
    color: #fff;
}

.pick .tt {
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(17px, 1.65vw, 22px);
    line-height: 1.3;
    color: #8fa0a8;
    transition: color 0.3s ease;
}

[dir="rtl"] .pick .tt { line-height: 1.55; }

.home-viewer .pw .v {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 0 clamp(20px, 2.4vw, 34px);
    /* Always reserves its own height (only opacity/visibility change), so selecting a project never shifts the layout. */
    padding-bottom: clamp(14px, 1.6vw, 22px);
    opacity: 0;
    visibility: hidden;
    font-size: 13px;
    font-weight: 700;
    color: var(--boh-gold);
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.home-viewer .pw[data-selected="true"] { background: rgba(255, 255, 255, 0.04); }
.home-viewer .pw[data-selected="true"]::before { transform: scaleY(1); }
.home-viewer .pw[data-selected="true"] .tt { color: #fff; }

.home-viewer .pw[data-selected="true"] .v {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.home-viewer .pw:hover:not([data-selected="true"]) .tt { color: #fff; }

@media (max-width: 900px) {
    .home-viewer { grid-template-columns: 1fr; min-height: 0; }
    .home-viewer .shots { aspect-ratio: 16 / 11; }
    .home-viewer .picks { border-inline-start: 0; }
    .home-viewer .pw { flex: none; }
    .home-viewer .pw:not([data-selected="true"]) .v { display: none; }
}

/* --- Responsibility: a deliberately quiet reset after the photography — scale, whitespace, contrast, type. --- */
.home-resp {
    background: #fff;
    text-align: center;
    padding: clamp(110px, 15vw, 220px) 0;
}

.home-resp .mk {
    width: 1px;
    height: 64px;
    margin: 0 auto clamp(30px, 4vw, 52px);
    background: var(--boh-gold);
}

.home-resp h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(40px, 7.4vw, 108px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--boh-charcoal);
}

[dir="rtl"] .home-resp h2 { line-height: 1.3; letter-spacing: 0; }

.home-resp h2 span { display: block; }
.home-resp h2 span + span { color: var(--boh-slate-dark); }

.home-resp .proof {
    list-style: none;
    margin: clamp(36px, 4.5vw, 64px) 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(14px, 3vw, 40px);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--boh-slate-dark);
}

[dir="rtl"] .home-resp .proof { letter-spacing: 0.05em; }

.home-resp .proof li + li {
    display: flex;
    align-items: center;
    gap: clamp(14px, 3vw, 40px);
}

.home-resp .proof li + li::before {
    content: "";
    width: 4px;
    height: 4px;
    background: var(--boh-gold);
    transform: rotate(45deg);
}

.home-resp .paths {
    margin-top: clamp(40px, 5vw, 72px);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(28px, 6vw, 88px);
}

.home-resp .home-act { color: var(--boh-charcoal); }

/* --- Latest Activity: newsroom ledger. --- */
.home-latest {
    background: var(--surface-cream-alt);
    padding: clamp(72px, 9vw, 128px) 0;
}

.home-lat-grid {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: clamp(28px, 5vw, 80px);
    margin-top: clamp(28px, 4vw, 48px);
    align-items: start;
}

.home-lat-grid .side {
    position: sticky;
    top: 28px;
}

.home-lat-grid .lh {
    margin: 0 0 clamp(22px, 3vw, 36px);
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 1.08;
    color: var(--boh-charcoal);
}

[dir="rtl"] .home-lat-grid .lh { line-height: 1.3; }

.home-lat-grid .img {
    position: relative;
    aspect-ratio: 4 / 3;
    margin-bottom: 28px;
    overflow: hidden;
    background: var(--boh-charcoal-dark);
    transition: opacity 0.4s ease;
}

.home-lat-grid .img[data-has="0"] { opacity: 0; }

.home-lat-grid .img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.home-lat-grid .img img.is-on { opacity: 1; }

.home-lat-grid .home-act { color: var(--boh-charcoal); }

.home-lat-grid .list { border-top: 2px solid var(--boh-charcoal); }

.lrow {
    position: relative;
    display: grid;
    grid-template-columns: 118px 1fr 40px;
    gap: clamp(14px, 2vw, 32px);
    align-items: start;
    padding: clamp(24px, 3vw, 40px) 4px;
    border-bottom: 1px solid var(--boh-border);
    color: inherit;
}

.lrow::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: -1px;
    height: 2px;
    width: 0;
    background: var(--boh-gold);
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.lrow[data-selected="true"]::before { width: 100%; }

.lrow time {
    padding-top: 0.55em;
    font-size: 13px;
    font-weight: var(--fw-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--boh-slate-dark);
    font-variant-numeric: tabular-nums;
}

[dir="rtl"] .lrow time { letter-spacing: 0; font-size: 15px; }

.lrow .h {
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(20px, 2.2vw, 30px);
    line-height: 1.25;
    color: #6f8089;
    transition: color 0.3s ease;
}

[dir="rtl"] .lrow .h { line-height: 1.5; }

.lrow .ar {
    width: 40px;
    height: 40px;
    border: 1px solid var(--boh-border);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--boh-charcoal);
    transition: 0.3s ease;
}

.lrow .th { display: none; }

.lrow[data-selected="true"] .h,
.lrow:hover .h { color: var(--boh-charcoal); }

.lrow[data-selected="true"] .ar,
.lrow:hover .ar { background: var(--boh-gold); border-color: var(--boh-gold); }

@media (max-width: 900px) {
    .home-lat-grid { grid-template-columns: 1fr; }
    .home-lat-grid .side { position: static; }
    .home-lat-grid .img { display: none; }
    .lrow { grid-template-columns: 1fr 36px; }
    .lrow time { grid-column: 1 / -1; padding: 0; }
    .lrow .h { color: var(--boh-charcoal); }
    .lrow .th { display: block; grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
}

/* --- Contact Close: one statement, one action, an architectural ending echoing the Scale ruler. --- */
.home-close {
    position: relative;
    background: var(--home-deep);
    color: #fff;
    padding: clamp(90px, 12vw, 170px) 0 0;
}

.home-close h2 {
    margin: 0;
    max-width: 15em;
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(38px, 6.6vw, 96px);
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: #fff;
}

[dir="rtl"] .home-close h2 { line-height: 1.3; letter-spacing: 0; }

.home-close .home-act {
    margin-top: clamp(34px, 4vw, 56px);
    font-size: clamp(24px, 2.6vw, 36px);
}

.home-close .end {
    position: relative;
    height: 34px;
    margin-top: clamp(70px, 9vw, 130px);
    border-bottom: 2px solid var(--boh-gold);
}

.home-close .end::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 14px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0 1px, transparent 1px 22px);
}

.home-close .end::after {
    content: "";
    position: absolute;
    inset-inline-end: 5%;
    bottom: -8px;
    width: 14px;
    height: 14px;
    background: var(--boh-gold);
    transform: rotate(45deg);
}

/* ==========================================================================
   Businesses page — balanced editorial business groups (.bz-*)
   One band per active sector: a framed image on alternating sides (the photograph is never mirrored — only its
   placement changes), the sector name + excerpt, ALL child services as hairline rows, and the linked companies as
   compact cards. Logical properties and grid placement only, so RTL is a true mirror with no separate layout.
   Replaces the old "chapter" styles on /businesses (those rules are now unused there).
   ========================================================================== */
.bz-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(35, 45, 51, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}
@supports (backdrop-filter: blur(6px)) {
    .bz-nav { backdrop-filter: blur(6px); }
}
.bz-nav-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: var(--w-wide);
    margin: 0 auto;
    padding: 10px 5%;
}
.bz-nav-label {
    flex: none;
    font-family: var(--font-functional);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-on-dark-muted);
}
[dir="rtl"] .bz-nav-label { letter-spacing: 0; font-size: 13px; }
.bz-chips {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 2px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.bz-chips::-webkit-scrollbar { display: none; }
.bz-chips li { flex: none; scroll-snap-align: start; }
.bz-nav .bz-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: var(--text-on-dark);
    font-family: var(--font-functional);
    font-size: 13px;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.bz-nav .bz-chip b { font-weight: 700; font-size: 11px; color: var(--boh-gold); }
.bz-nav .bz-chip i { font-style: normal; font-size: 11px; color: var(--text-on-dark-muted); }
.bz-nav .bz-chip:hover, .bz-nav .bz-chip:focus-visible { border-color: var(--boh-gold); }
.bz-nav .bz-chip[aria-current="true"] { background: var(--boh-gold); border-color: var(--boh-gold); color: var(--boh-charcoal); }
.bz-nav .bz-chip[aria-current="true"] b, .bz-nav .bz-chip[aria-current="true"] i { color: var(--boh-charcoal); }

.bz-bands { background: var(--boh-primary-deep); padding: 30px 5% 38px; }
.bz-band {
    max-width: var(--w-wide);
    margin: 0 auto 24px;
    padding: 4px 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    scroll-margin-top: calc(var(--bz-nav-h, 64px) + 12px);
}
.bz-band:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* header row: image + title block; the even sectors swap sides (grid placement, so RTL mirrors automatically) */
.bz-head { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 18px; }
.bz-band.is-flip .bz-head { grid-template-columns: minmax(0, 1fr) 300px; }
.bz-band.is-flip .bz-media { order: 2; }
.bz-media {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    background: #3b4a52;
    overflow: hidden;
}
.bz-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.bz-num {
    position: absolute;
    inset-inline-start: 10px;
    top: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(35, 45, 51, 0.74);
    color: #fff;
    font-family: var(--font-functional);
    font-size: 12px;
    letter-spacing: 0.14em;
}
.bz-media.is-empty { display: grid; place-items: center; background: linear-gradient(160deg, #34444c, #26323a); }
.bz-media.is-empty .bz-num { background: transparent; color: var(--boh-gold); }
.bz-big { font-family: var(--font-display); font-size: 60px; font-weight: 700; color: rgba(224, 184, 36, 0.3); }
.bz-intro { min-width: 0; }
.bz-intro h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--fw-h2);
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.2;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.bz-bands .bz-intro h2 a { color: var(--text-on-dark); text-decoration: none; }
.bz-bands .bz-intro h2 a:hover { color: var(--boh-gold); }
.bz-intro p { margin: 6px 0 0; max-width: 58ch; color: var(--text-on-dark-muted); font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.bz-bands .bz-sector-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 8px 0;
    color: var(--boh-gold);
    font-family: var(--font-functional);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}
.bz-bands .bz-sector-link:hover, .bz-bands .bz-sector-link:focus-visible { text-decoration: underline; }
[dir="rtl"] .bz-sector-link svg, [dir="rtl"] .bz-go svg, [dir="rtl"] .bz-co-go svg, [dir="rtl"] .bz-ext svg { transform: scaleX(-1); }

.bz-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 26px; }
.bz-cols.is-solo { grid-template-columns: minmax(0, 1fr); }
.bz-col { min-width: 0; }
.bz-colh {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-family: var(--font-functional);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-on-dark-muted);
}
[dir="rtl"] .bz-colh { letter-spacing: 0; font-size: 13px; }
.bz-colh::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.13); }
.bz-colh em { font-style: normal; color: var(--boh-gold); }

/* services: lighter hairline rows */
.bz-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; margin: 0; padding: 0; list-style: none; }
.bz-cols.is-solo .bz-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bz-bands .bz-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 11px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    color: var(--text-on-dark);
    text-decoration: none;
}
.bz-row-text { flex: 1; min-width: 0; }
.bz-bands .bz-row b { display: block; font-family: var(--font-functional); font-size: 15.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.bz-bands .bz-row small {
    display: -webkit-box;
    margin-top: 1px;
    color: var(--text-on-dark-muted);
    font-size: 12.5px;
    line-height: 1.4;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}
.bz-go {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--boh-gold);
    border-radius: 50%;
    color: var(--boh-gold);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.bz-bands .bz-row:hover b, .bz-bands .bz-row:focus-visible b { color: var(--boh-gold); }
.bz-bands .bz-row:hover .bz-go, .bz-bands .bz-row:focus-visible .bz-go { background: var(--boh-gold); color: var(--boh-charcoal); }

/* companies: one internal link (logo + name + arrow); the external link is a separate sibling strip */
.bz-cos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bz-cos.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bz-co {
    border: 1px solid rgba(138, 165, 178, 0.4);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(138, 165, 178, 0.13), rgba(138, 165, 178, 0.04));
    overflow: hidden;
}
.bz-co:has(.bz-co-main:hover), .bz-co:has(.bz-co-main:focus-visible) { border-color: var(--boh-gold); }
.bz-bands .bz-co-main {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    padding: 8px 10px;
    color: var(--text-on-dark);
    text-decoration: none;
}
.bz-bands .bz-co-main:hover { background: rgba(138, 165, 178, 0.12); }
.bz-bands .bz-co-main:focus-visible { outline: 3px solid var(--boh-gold); outline-offset: -3px; }
.bz-logo {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 4px;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.bz-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bz-logo.is-mono { background: var(--boh-slate); color: #26323a; font-family: var(--font-display); font-weight: 700; font-size: 17px; padding: 0; }
.bz-co-name { flex: 1; min-width: 0; }
.bz-bands .bz-co-name b { display: block; font-family: var(--font-functional); font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--text-on-dark); overflow-wrap: anywhere; }
.bz-kind { display: block; margin-top: 1px; color: var(--boh-slate); font-family: var(--font-functional); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
[dir="rtl"] .bz-kind { letter-spacing: 0; font-size: 12px; }
.bz-co-go { flex: none; display: grid; place-items: center; color: var(--boh-gold); opacity: 0.85; }
.bz-bands .bz-co-main:hover .bz-co-go, .bz-bands .bz-co-main:focus-visible .bz-co-go { opacity: 1; }
.bz-cos.is-compact .bz-logo { width: 34px; height: 34px; }
.bz-cos.is-compact .bz-co-main { min-height: 48px; padding: 6px 8px; }
.bz-bands .bz-cos.is-compact .bz-co-name b { font-size: 13px; }
.bz-bands .bz-ext {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 7px 12px;
    border-top: 1px dashed rgba(224, 184, 36, 0.55);
    color: var(--boh-gold);
    font-family: var(--font-functional);
    font-size: 12px;
    text-decoration: none;
}
.bz-bands .bz-ext:hover, .bz-bands .bz-ext:focus-visible { background: rgba(224, 184, 36, 0.1); }
.bz-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bz-nav a:focus-visible, .bz-band a:focus-visible { outline: 3px solid var(--boh-gold); outline-offset: 2px; }

@media (max-width: 1000px) {
    .bz-head { grid-template-columns: 210px minmax(0, 1fr); gap: 20px; }
    .bz-band.is-flip .bz-head { grid-template-columns: minmax(0, 1fr) 210px; }
    .bz-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .bz-cols.is-solo .bz-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bz-cos:not(.is-compact) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .bz-nav-inner { padding: 9px 16px; }
    .bz-nav-label { display: none; }
    .bz-bands { padding: 20px 16px 28px; }
    .bz-band { margin-bottom: 18px; padding-bottom: 18px; }
    .bz-head, .bz-band.is-flip .bz-head { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 14px; }
    .bz-band.is-flip .bz-media { order: 0; }
    .bz-media { aspect-ratio: 16 / 7; }
    .bz-big { font-size: 44px; }
    .bz-rows, .bz-cols.is-solo .bz-rows { grid-template-columns: minmax(0, 1fr); }
    .bz-cos:not(.is-compact), .bz-cos.is-compact { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .bz-nav .bz-chip, .bz-go { transition: none; }
}

/* Service detail pages — Related Projects reuse the Projects listing card (partials/project-card) inside the same .fsd-project-index grid.
   Only this modifier adds the tablet step; the Projects listing's own grid rules are untouched. Desktop 3 · tablet 2 · mobile 1. */
.fsd-project-index.is-related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .fsd-project-index.is-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .fsd-project-index.is-related { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   UX review fixes (management 2026-10-19) — focused, no redesign.
   ========================================================================= */

/* M-3 — Service introduction: structured CMS text (paragraphs, bullet lists) at body scale; only the first paragraph keeps a modest lead size. */
.fsd-intro-body {
    max-width: var(--w-standard);
    font-family: var(--font-functional);
    font-weight: var(--fw-body);
    font-size: 18px;
    line-height: 1.75;
    color: var(--text-on-light);
}
.fsd-intro-body > :first-child { margin-top: 0; }
.fsd-intro-body > :last-child { margin-bottom: 0; }
.fsd-intro-body p { margin: 0 0 14px; }
.fsd-intro-body > p:first-child {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: clamp(20px, 2vw, 25px);
    line-height: 1.45;
    letter-spacing: -0.005em;
    margin-bottom: 18px;
}
.fsd-intro-body ul, .fsd-intro-body ol { margin: 0 0 14px; padding-inline-start: 1.25em; }
.fsd-intro-body li { margin: 0 0 8px; padding-inline-start: 4px; }
.fsd-intro-body li > ul, .fsd-intro-body li > ol { margin: 8px 0 4px; }
.fsd-intro-body ul li::marker { color: var(--accent-gold); }
.fsd-intro-body strong, .fsd-intro-body b { font-weight: 700; }
.fsd-intro-body a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
[dir="rtl"] .fsd-intro-body { line-height: 1.9; }

/* M-2 — "View all projects": a real block with its own spacing below the card grid, arrow pointing the reading direction. */
.fsd-projects .fsd-view-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 44px;
    min-height: 44px;
    box-sizing: border-box;
}
.fsd-view-all .a svg { transform: scaleX(-1); }
[dir="rtl"] .fsd-view-all .a svg { transform: none; }

/* Project card category label: readable over bright photographs — a slightly deeper veil behind the text block plus a soft text shadow (same card, same layout). */
.fsd-project-card-media:not(.is-empty) .fsd-project-card-veil {
    background: linear-gradient(0deg,
        rgba(15, 20, 23, 0.95) 0%,
        rgba(15, 20, 23, 0.86) 20%,
        rgba(15, 20, 23, 0.56) 46%,
        rgba(15, 20, 23, 0.12) 70%,
        rgba(15, 20, 23, 0.14) 100%);
}
.fsd-project-card-cat { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 0, 0, 0.5); }

/* Home "50+": the plus follows the number in English (it stays in front in Arabic). */
.home-fig .n sup.is-trailing { margin-inline-end: 0; margin-inline-start: 0.06em; }

@media (max-width: 700px) {
    .fsd-intro-body { font-size: 17px; line-height: 1.7; }

    /* M-1 — company names/logos wrap instead of running off the screen. */
    .delivered-by.has-names .logos,
    .fsd-delivered .delivered-by .logos { flex-wrap: wrap; gap: 12px 22px; max-width: 100%; }
    /* keep the fixed 34 px height the logo tile is measured against; the 44 px minimum only enlarges the touch area */
    .delivered-by.has-names .logos a { min-height: 44px; box-sizing: border-box; }
    .delivered-by.has-names .logos .name { white-space: normal; }

    /* Tap targets: at least 44 px tall on phones. */
    .bz-bands .bz-sector-link,
    .bz-bands .bz-ext { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
    .bz-bands .bz-co-main { min-height: 44px; box-sizing: border-box; }
    .bz-bands .bz-intro h2 a { display: inline-block; min-height: 44px; box-sizing: border-box; padding-top: 6px; }
    .bz-nav .bz-chip { min-height: 44px; box-sizing: border-box; }
    .fsd-related-chip,
    .fsd-capability-body .explore-link { min-height: 44px; box-sizing: border-box; }
}

/* Remediation (2026-10-19): the qualifier under "Active Countries" — current operations, not countries ever served. */
.home-fig .s {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: var(--fw-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

[dir="rtl"] .home-fig .s {
    letter-spacing: 0;
    font-size: 14px;
}

/* Section headings inside a service / company introduction (2026-10-22): editor h1-h3 -> h3, h4-h6 -> h4 (see SafeHtml). */
.fsd-intro-body h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-h3);
    font-size: clamp(21px, 2vw, 26px);
    line-height: 1.3;
    letter-spacing: -0.005em;
    margin: 44px 0 12px;
    padding-top: 22px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    color: var(--text-on-light);
}
.fsd-intro-body h4 {
    font-family: var(--font-functional);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.4;
    margin: 22px 0 8px;
    color: var(--text-on-light);
}
.fsd-intro-body > h3:first-child, .fsd-intro-body > h4:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
[dir="rtl"] .fsd-intro-body h3, [dir="rtl"] .fsd-intro-body h4 { letter-spacing: 0; }

/* Secondary work scopes (2026-10-22): shown as a CLASSIFICATION only — a small tag on a project card and chips on the project page. No scope description is shown. */
.fsd-project-card-tag {
    display: inline-block;
    align-self: flex-start;
    margin-top: 6px;
    padding: 2px 8px;
    font-family: var(--font-functional);
    font-size: 11px;
    font-weight: var(--fw-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(12, 16, 18, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.fsd-project-card-tag b { color: var(--accent-gold); }
[dir="rtl"] .fsd-project-card-tag { letter-spacing: 0; font-size: 12px; }

.fsd-class-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.fsd-class-chips a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 18px;
    font-family: var(--font-functional);
    font-size: 15px;
    color: var(--text-on-light);
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 999px;
}
.fsd-class-chips a:hover, .fsd-class-chips a:focus-visible { border-color: var(--accent-gold); }