/* ==========================================================================
   BFA THEME — ARTISTIC TOUCHES
   --------------------------------------------------------------------------
   Optional decorative layer that adds editorial polish to every page:
     1. Section rhythm   — hairlines, index numerals, corner flourishes
     2. Hero treatments  — word-mask reveal, parallax, refined scroll line
     3. Image treatments — duotone hover, clip-path reveal, KenBurns
     4. Editorial type   — watermark numerals, numbered cards, drop-cap
     5. Microinteractions — magnetic CTAs, cursor follower, link sweep
     6. Scroll-driven    — header ramp, progress bar, section reveals
     7. Decorative motifs — animated SVG dividers, corner triangles, diamonds

   File is enqueued AFTER main.css and is deferred. Kill switch:
     wp_dequeue_style('bfa-artistic');
     wp_dequeue_script('bfa-artistic');

   All rules respect prefers-reduced-motion. RTL handled via logical
   properties + explicit [dir="rtl"] overrides where needed.

   Tokens consumed from main.css :root:
     --bfa-hairline, --bfa-ink, --bfa-mask-ease, --bfa-watermark-color,
     --bfa-cursor-size, --bfa-parallax-y, --bfa-scroll-progress
   ========================================================================== */


/* ==========================================================================
   GLOBAL: reduced-motion master switch
   --------------------------------------------------------------------------
   Any rule below that produces motion should also be gated inside this
   block (or use vars that are zeroed here) so the user's OS preference
   always wins.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --bfa-parallax-y: 0px !important;
    }
}


/* ==========================================================================
   AREA 1 — SECTION RHYTHM
   Hairlines + editorial index numerals + corner triangle flourishes
   ========================================================================== */

.bfa-section-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    padding-block: clamp(0.5rem, 1.2vw, 1rem);
}

.bfa-section-frame__index {
    flex-shrink: 0;
    font-family: var(--bfa-font-en);
    font-size: 0.875rem;
    font-weight: var(--bfa-fw-regular);
    letter-spacing: 0.18em;
    color: var(--bfa-gold);
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
}

.bfa-section-frame__hairline {
    flex: 1;
    height: 1px;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        var(--bfa-hairline) 20%,
        var(--bfa-hairline) 80%,
        transparent 100%
    );
    max-width: 360px;
}

/* Decorative corner triangles, scoped to the section element when added */
.bfa-section--framed {
    position: relative;
}

.bfa-section-frame__corner {
    position: absolute;
    width: 14px;
    height: 14px;
    fill: var(--bfa-gold);
    opacity: 0.45;
    pointer-events: none;
}

.bfa-section-frame__corner--tl {
    inset-block-start: 1.5rem;
    inset-inline-start: 1.5rem;
}

.bfa-section-frame__corner--tr {
    inset-block-start: 1.5rem;
    inset-inline-end: 1.5rem;
    transform: rotate(90deg);
}

.bfa-section-frame__corner--bl {
    inset-block-end: 1.5rem;
    inset-inline-start: 1.5rem;
    transform: rotate(-90deg);
}

.bfa-section-frame__corner--br {
    inset-block-end: 1.5rem;
    inset-inline-end: 1.5rem;
    transform: rotate(180deg);
}


/* ==========================================================================
   AREA 2 — HERO TREATMENTS (word-mask reveal, parallax, scroll rail)
   ========================================================================== */

/* --- Word-mask reveal --- */
.bfa-word {
    display: inline-block;
    overflow: hidden;
    line-height: inherit;
    vertical-align: baseline;
}

.bfa-word__inner {
    display: inline-block;
    transform: translateY(105%);
    transition: transform 900ms var(--bfa-mask-ease);
    transition-delay: calc(var(--word-i, 0) * 60ms);
    will-change: transform;
}

.bfa-word.is-revealed .bfa-word__inner,
.is-revealed .bfa-word .bfa-word__inner {
    transform: translateY(0);
}

/* --- Parallax background container --- */
[data-bfa-parallax] {
    --bfa-parallax-y: 0px;
}

[data-bfa-parallax] > .bfa-hero-overlay,
[data-bfa-parallax] .bfa-hero-bg-layer {
    transform: translate3d(0, var(--bfa-parallax-y), 0);
    will-change: transform;
}

/* --- Grain overlay (atmospheric noise) --- */
.bfa-hero-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 200px 200px;
}

/* --- Refined scroll-down indicator --- */
.bfa-hero-scroll {
    position: absolute;
    inset-block-end: 2.5rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--bfa-white);
    opacity: 0.6;
    z-index: 3;
    pointer-events: none;
}

.bfa-hero-scroll__rail {
    width: 1px;
    height: 56px;
    background-color: rgba(255, 255, 255, 0.25);
    overflow: hidden;
    position: relative;
}

.bfa-hero-scroll__bead {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: -20%;
    width: 100%;
    height: 30%;
    background-color: var(--bfa-gold);
    animation: bfa-bead-fall 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes bfa-bead-fall {
    0%   { transform: translateY(0);    opacity: 0;   }
    20%  {                              opacity: 1;   }
    80%  {                              opacity: 1;   }
    100% { transform: translateY(220%); opacity: 0;   }
}

.bfa-hero-scroll__label {
    font-family: var(--bfa-font-en);
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

@media (max-width: 575px) {
    .bfa-hero-scroll { inset-block-end: 1.5rem; }
    .bfa-hero-scroll__rail { height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .bfa-word__inner { transform: none !important; transition: none !important; }
    .bfa-hero-scroll__bead { animation: none; opacity: 1; }
}


/* ==========================================================================
   AREA 3 — IMAGE TREATMENTS (duotone, clip-path reveal, KenBurns)
   ========================================================================== */

.bfa-media {
    position: relative;
    overflow: hidden;
    margin: 0;
    isolation: isolate;
}

.bfa-media__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms var(--bfa-mask-ease), filter 600ms ease;
}

/* --- Duotone overlay on hover --- */
.bfa-media--duotone::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--bfa-gold) 0%, var(--bfa-black) 100%);
    mix-blend-mode: color;
    opacity: 0.55;
    transition: opacity 600ms var(--bfa-mask-ease);
    pointer-events: none;
    z-index: 1;
}

.bfa-media--duotone:hover::after,
.bfa-media--duotone:focus-within::after {
    opacity: 0;
}

/* --- Clip-path reveal mask --- */
.bfa-media--reveal {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 900ms var(--bfa-mask-ease);
}

.bfa-media--reveal.is-visible {
    clip-path: inset(0 0 0 0);
}

[dir="rtl"] .bfa-media--reveal {
    clip-path: inset(0 0 0 100%);
}

[dir="rtl"] .bfa-media--reveal.is-visible {
    clip-path: inset(0 0 0 0);
}

/* --- KenBurns subtle infinite zoom --- */
.bfa-media--kenburns .bfa-media__img {
    animation: bfa-kenburns 14s ease-in-out infinite alternate;
}

@keyframes bfa-kenburns {
    0%   { transform: scale(1)    translate(0, 0); }
    100% { transform: scale(1.08) translate(-1.5%, -1%); }
}

@media (prefers-reduced-motion: reduce) {
    .bfa-media--reveal { clip-path: none !important; transition: none !important; }
    .bfa-media--kenburns .bfa-media__img { animation: none; }
    .bfa-media--duotone::after { opacity: 0; }
}


/* ==========================================================================
   AREA 4 — EDITORIAL TYPOGRAPHY (watermark numerals, numbered cards, drop-cap)
   ========================================================================== */

/* --- Watermark numerals behind stats --- */
.bfa-stat {
    position: relative;
    z-index: 1;
}

.bfa-stat__watermark {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--bfa-font-en);
    font-size: clamp(7rem, 16vw, 14rem);
    font-weight: var(--bfa-fw-bold);
    line-height: 1;
    color: var(--bfa-watermark-color);
    pointer-events: none;
    user-select: none;
    z-index: -1;
    letter-spacing: -0.04em;
}

/* --- Numbered service / why-us cards --- */
.service-card[data-bfa-card-index],
.whyus-item[data-bfa-card-index] {
    position: relative;
}

.service-card[data-bfa-card-index]::before,
.whyus-item[data-bfa-card-index]::before {
    content: attr(data-bfa-card-index);
    position: absolute;
    inset-block-start: clamp(1rem, 2vw, 1.5rem);
    inset-inline-end: clamp(1rem, 2vw, 1.5rem);
    font-family: var(--bfa-font-en);
    font-size: 1.25rem;
    font-weight: var(--bfa-fw-regular);
    letter-spacing: 0.04em;
    color: var(--bfa-gold);
    opacity: 0.65;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    transition: opacity 300ms ease, transform 300ms ease;
    z-index: 2;
}

.service-card[data-bfa-card-index]:hover::before,
.whyus-item[data-bfa-card-index]:hover::before {
    opacity: 1;
    transform: translateY(-2px);
}

/* --- Drop-cap for first paragraph in Arabic singles --- */
.has-dropcap p:first-of-type::first-letter {
    font-family: var(--bfa-font-en);
    font-size: 4.5em;
    font-weight: var(--bfa-fw-bold);
    line-height: 0.85;
    float: left;
    margin-inline-end: 0.5rem;
    margin-block-start: 0.1em;
    color: var(--bfa-gold);
    padding-inline-end: 0.05em;
}

[dir="rtl"] .has-dropcap p:first-of-type::first-letter {
    float: right;
    margin-inline-end: 0;
    margin-inline-start: 0.5rem;
}


/* ==========================================================================
   AREA 5 — MICROINTERACTIONS (magnetic CTAs, cursor follower, link sweep)
   ========================================================================== */

/* --- Magnetic CTA preparation --- */
[data-bfa-magnetic] {
    display: inline-flex;
    will-change: transform;
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- Custom cursor follower (JS injects .bfa-cursor) --- */
.bfa-cursor {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: var(--bfa-cursor-size);
    height: var(--bfa-cursor-size);
    border: 1px solid var(--bfa-gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate3d(-50%, -50%, 0);
    transition: width 220ms ease, height 220ms ease, background-color 220ms ease, opacity 220ms ease;
    mix-blend-mode: difference;
    opacity: 0;
}

.bfa-cursor.is-visible {
    opacity: 1;
}

.bfa-cursor--active {
    width: calc(var(--bfa-cursor-size) * 1.8);
    height: calc(var(--bfa-cursor-size) * 1.8);
    background-color: rgba(201, 168, 76, 0.15);
}

/* --- Link underline sweep --- */
.bfa-link-sweep {
    position: relative;
    display: inline;
}

.bfa-link-sweep::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: -2px;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: inset-inline-start;
    transition: transform 280ms var(--bfa-mask-ease);
}

[dir="rtl"] .bfa-link-sweep::after {
    transform-origin: right;
}

.bfa-link-sweep:hover::after,
.bfa-link-sweep:focus-visible::after {
    transform: scaleX(1);
}

@media (hover: none), (pointer: coarse) {
    .bfa-cursor { display: none !important; }
    [data-bfa-magnetic] { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    [data-bfa-magnetic] { transform: none !important; transition: none !important; }
    .bfa-cursor { display: none !important; }
    .bfa-link-sweep::after { transition: none !important; }
}


/* ==========================================================================
   AREA 6 — SCROLL-DRIVEN EFFECTS
   Header opacity ramp, top progress bar, section clip-reveals
   ========================================================================== */

/* --- Header ramp (extends, doesn't replace, the existing .is-sticky rule) --- */
.bfa-header.bfa-header--scrolled:not(.is-sticky) {
    background-color: rgba(10, 10, 10, 0.55);
    backdrop-filter: saturate(160%) blur(8px);
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    background-image: none;
}

/* --- Top scroll progress bar --- */
.bfa-progress-bar {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 2px;
    background-color: var(--bfa-gold);
    transform: scaleX(var(--bfa-scroll-progress, 0));
    transform-origin: inset-inline-start;
    z-index: 10000;
    pointer-events: none;
    transition: opacity 300ms ease;
}

[dir="rtl"] .bfa-progress-bar {
    transform-origin: right;
}

body.admin-bar .bfa-progress-bar {
    inset-block-start: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .bfa-progress-bar { inset-block-start: 46px; }
}

/* --- Section clip-reveal --- */
.bfa-section-reveal {
    clip-path: inset(2rem 0 0 0);
    opacity: 0.6;
    transition: clip-path 700ms var(--bfa-mask-ease), opacity 700ms var(--bfa-mask-ease);
}

.bfa-section-reveal.is-revealed {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .bfa-section-reveal { clip-path: none !important; opacity: 1 !important; transition: none !important; }
    .bfa-progress-bar { display: none !important; }
}


/* ==========================================================================
   AREA 7 — DECORATIVE MOTIFS (ornament dividers, corner triangles, diamond grid)
   ========================================================================== */

/* --- Ornament: thin SVG line that draws in on reveal --- */
.bfa-ornament {
    display: block;
    width: 140px;
    height: 16px;
    margin: clamp(2rem, 4vw, 3rem) auto;
    overflow: visible;
}

.bfa-ornament__path {
    stroke: var(--bfa-gold);
    stroke-width: 1;
    fill: none;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1.4s var(--bfa-mask-ease);
}

.bfa-ornament.is-visible .bfa-ornament__path,
.is-visible .bfa-ornament__path {
    stroke-dashoffset: 0;
}

.bfa-ornament__dot {
    fill: var(--bfa-gold);
    opacity: 0;
    transition: opacity 0.6s 1.2s ease;
}

.bfa-ornament.is-visible .bfa-ornament__dot,
.is-visible .bfa-ornament__dot {
    opacity: 1;
}

/* --- Standalone corner triangle utility (Area 1 minimal version) --- */
.bfa-corner-triangle {
    position: absolute;
    width: 12px;
    height: 12px;
    pointer-events: none;
    z-index: 2;
}

.bfa-corner-triangle svg {
    width: 100%;
    height: 100%;
    fill: var(--bfa-gold);
    opacity: 0.5;
}

.bfa-corner-triangle--tl { inset-block-start: 0.75rem; inset-inline-start: 0.75rem; }
.bfa-corner-triangle--tr { inset-block-start: 0.75rem; inset-inline-end:   0.75rem; transform: rotate(90deg); }
.bfa-corner-triangle--bl { inset-block-end:   0.75rem; inset-inline-start: 0.75rem; transform: rotate(-90deg); }
.bfa-corner-triangle--br { inset-block-end:   0.75rem; inset-inline-end:   0.75rem; transform: rotate(180deg); }

/* --- Reusable diamond grid backdrop --- */
.bfa-diamond-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.06;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><rect x='9' y='9' width='2' height='2' transform='rotate(45 10 10)' fill='%23C9A84C'/></svg>");
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
}


/* ==========================================================================
   ELEMENTOR INTEGRATION
   --------------------------------------------------------------------------
   Pages built with Elementor own their entire body. Suppress decorative
   overlays/wrappers so they don't compete with Elementor widgets. The
   progress bar + cursor + link-sweep are still useful and stay active.
   ========================================================================== */
body.elementor-page .bfa-section-frame,
body.elementor-page .bfa-section-reveal,
body.elementor-page .bfa-stat__watermark,
body.elementor-page .bfa-ornament {
    /* Let Elementor templates render as designed, no theme overlays. */
}

body.elementor-template-canvas .bfa-progress-bar,
body.elementor-template-canvas .bfa-cursor,
body.elementor-template-canvas .bfa-corner-triangle {
    display: none !important;
}


/* ==========================================================================
   HEADER — CENTERED EDITORIAL VARIANT (.bfa-header--centered)
   --------------------------------------------------------------------------
   Two-row layout:
     Row 1: mobile-toggle | centered logo | CTA
     Row 2: centered nav menu with wide letter-spacing
     Row 3: gold hairline divider
   Aesop / Hermès / Kinfolk inspiration — restrained, premium, breathing.
   ========================================================================== */

/* Make the centered variant override the default flex sizing. */
.bfa-header--centered {
    padding-block: clamp(1rem, 2vw, 1.5rem);
}

.bfa-header-centered-inner {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* Row 1 — branding row */
.bfa-header-centered-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

.bfa-header--centered .bfa-mobile-toggle {
    justify-self: start;
    display: none; /* shown on mobile breakpoint below */
}

.bfa-header-branding--centered {
    grid-column: 2;
    justify-self: center;
    text-align: center;
}

.bfa-header-branding--centered .custom-logo,
.bfa-header-branding--centered .bfa-logo svg {
    max-height: 56px;
    width: auto;
    transition: max-height var(--bfa-transition);
}

.bfa-header-branding--centered .bfa-logo--text {
    font-family: var(--bfa-font-en);
    font-size: 1.75rem;
    font-weight: var(--bfa-fw-bold);
    letter-spacing: 0.08em;
    color: var(--bfa-white);
    text-decoration: none;
    text-transform: uppercase;
}

.bfa-header-cta--editorial {
    justify-self: end;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.75rem;
    padding: 0.625rem 1.25rem;
    border-width: 1px;
}

/* Row 2 — centered menu with wide letter-spacing */
.bfa-header-nav--centered {
    display: flex;
    justify-content: center;
}

.bfa-menu--centered {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.bfa-menu--centered > li {
    position: relative;
}

.bfa-menu--centered > li > a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.5rem 0;
    font-family: var(--bfa-font-ar);
    font-size: 0.8125rem;
    font-weight: var(--bfa-fw-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bfa-white);
    text-decoration: none;
    position: relative;
    transition: color var(--bfa-transition-fast);
}

/* Underline hairline (replaces the default scaleX bar from main.css for this variant) */
.bfa-menu--centered > li > a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 1px;
    background-color: var(--bfa-gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 280ms var(--bfa-mask-ease);
}

.bfa-menu--centered > li > a:hover,
.bfa-menu--centered > li > a:focus-visible,
.bfa-menu--centered > li.current-menu-item > a {
    color: var(--bfa-gold);
}

.bfa-menu--centered > li > a:hover::after,
.bfa-menu--centered > li > a:focus-visible::after,
.bfa-menu--centered > li.current-menu-item > a::after {
    transform: scaleX(1);
}

/* Row 3 — gold hairline divider */
.bfa-header-centered-hairline {
    height: 1px;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        var(--bfa-hairline) 20%,
        var(--bfa-hairline) 80%,
        transparent 100%
    );
    margin-block-start: 0.25rem;
}

/* Topbar editorial variant — thinner, more refined */
.bfa-topbar--editorial {
    height: 36px;
    font-size: 12px;
    letter-spacing: 0.08em;
}

.bfa-topbar--editorial .bfa-topbar-inner {
    height: 100%;
}

/* Adjust header offset for the centered variant (taller — 2 rows + hairline) */
body:not(.elementor-page):has(.bfa-header--centered) {
    --bfa-header-offset: calc(36px + 132px);
}

/* Sticky behavior — collapse to a single compact row */
.bfa-header--centered.is-sticky {
    padding-block: 0.625rem;
}

.bfa-header--centered.is-sticky .bfa-header-centered-top {
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
}

.bfa-header--centered.is-sticky .bfa-header-branding--centered .custom-logo,
.bfa-header--centered.is-sticky .bfa-header-branding--centered .bfa-logo svg {
    max-height: 36px;
}

.bfa-header--centered.is-sticky .bfa-header-branding--centered .bfa-logo--text {
    font-size: 1.25rem;
}

.bfa-header--centered.is-sticky .bfa-header-nav--centered {
    display: none;
}

.bfa-header--centered.is-sticky .bfa-header-centered-hairline {
    display: none;
}

/* Mobile: hide centered menu row, show hamburger */
@media (max-width: 991px) {
    .bfa-header--centered .bfa-mobile-toggle {
        display: inline-flex;
    }
    .bfa-header-nav--centered {
        display: none;
    }
    .bfa-header-cta--editorial {
        display: none;
    }
    body:not(.elementor-page):has(.bfa-header--centered) {
        --bfa-header-offset: calc(36px + 62px);
    }
}

@media (max-width: 575px) {
    .bfa-header-branding--centered .bfa-logo--text {
        font-size: 1.25rem;
    }
    .bfa-header-branding--centered .custom-logo,
    .bfa-header-branding--centered .bfa-logo svg {
        max-height: 36px;
    }
}


/* ==========================================================================
   FOOTER — EDITORIAL STATEMENT VARIANT (.bfa-footer--editorial)
   --------------------------------------------------------------------------
   Multi-row composition:
     Row 1 — big sentence + CTA (Moore Global style)
     Row 2 — hairline divider
     Row 3 — 4-column grid (about / links / services / contact)
     Row 4 — huge faded BFA wordmark
     Row 5 — bottom bar (copyright + legal + social)
   ========================================================================== */

.bfa-footer--editorial {
    background-color: var(--bfa-black);
    color: var(--bfa-gray-400);
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
    position: relative;
    overflow: hidden;
}

/* Row 1 — statement */
.bfa-footer-statement {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: clamp(2rem, 4vw, 4rem);
    padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.bfa-footer-statement__text {
    font-family: var(--bfa-font-ar);
    font-size: clamp(1.5rem, 3.5vw, 2.75rem);
    font-weight: var(--bfa-fw-regular);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--bfa-white);
    max-width: 28ch;
    margin: 0;
    text-wrap: balance;
}

.bfa-footer-statement__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: 0.875rem 0;
    color: var(--bfa-gold);
    font-family: var(--bfa-font-ar);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    font-weight: var(--bfa-fw-medium);
    letter-spacing: 0.06em;
    text-decoration: none;
    border-block-end: 1px solid rgba(201, 168, 76, 0.4);
    transition: gap var(--bfa-transition), border-color var(--bfa-transition);
}

.bfa-footer-statement__cta:hover,
.bfa-footer-statement__cta:focus-visible {
    gap: 1.25rem;
    color: var(--bfa-gold-light);
    border-color: var(--bfa-gold);
}

.bfa-footer-statement__cta svg {
    flex-shrink: 0;
    transition: transform var(--bfa-transition);
}

[dir="rtl"] .bfa-footer-statement__cta svg {
    transform: scaleX(-1);
}

[dir="rtl"] .bfa-footer-statement__cta:hover svg {
    transform: scaleX(-1) translateX(4px);
}

/* Hairline */
.bfa-footer-hairline {
    height: 1px;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        var(--bfa-hairline) 15%,
        var(--bfa-hairline) 85%,
        transparent 100%
    );
    margin-block: clamp(1.5rem, 3vw, 2.5rem);
}

/* Row 3 — columns */
.bfa-footer-columns {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
    gap: clamp(2rem, 3.5vw, 3.5rem);
    padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.bfa-footer-col {
    position: relative;
    padding-block-start: 1.5rem;
}

.bfa-footer-col__index {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    font-family: var(--bfa-font-en);
    font-size: 0.75rem;
    font-weight: var(--bfa-fw-regular);
    letter-spacing: 0.18em;
    color: var(--bfa-gold);
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
}

.bfa-footer-col__title {
    font-family: var(--bfa-font-ar);
    font-size: 0.875rem;
    font-weight: var(--bfa-fw-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bfa-white);
    margin: 0 0 1.25rem;
}

.bfa-footer-col__text {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--bfa-gray-400);
    margin: 0;
}

/* Footer menus + contact list */
.bfa-footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.bfa-footer-menu a {
    display: inline-flex;
    align-items: center;
    color: var(--bfa-gray-400);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color var(--bfa-transition-fast);
}

.bfa-footer-menu a:hover,
.bfa-footer-menu a:focus-visible {
    color: var(--bfa-gold);
}

.bfa-footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bfa-footer-contact__item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.bfa-footer-contact__label {
    font-family: var(--bfa-font-en);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bfa-gold);
    opacity: 0.7;
}

.bfa-footer-contact__value {
    color: var(--bfa-white);
    text-decoration: none;
    line-height: 1.6;
    transition: color var(--bfa-transition-fast);
}

a.bfa-footer-contact__value:hover {
    color: var(--bfa-gold);
}

/* Row 4 — huge wordmark watermark */
.bfa-footer-wordmark-row {
    text-align: center;
    line-height: 0.85;
    margin-block: clamp(2rem, 4vw, 3.5rem);
    pointer-events: none;
    user-select: none;
    overflow: hidden;
}

.bfa-footer-wordmark {
    display: inline-block;
    font-family: var(--bfa-font-en);
    font-weight: var(--bfa-fw-bold);
    font-size: clamp(6rem, 22vw, 18rem);
    letter-spacing: -0.04em;
    line-height: 0.85;
    background: linear-gradient(
        180deg,
        rgba(201, 168, 76, 0.18) 0%,
        rgba(201, 168, 76, 0.02) 100%
    );
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}

/* Row 5 — bottom bar */
.bfa-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
    border-block-start: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}

.bfa-footer-bottom__copyright {
    font-size: 0.8125rem;
    color: var(--bfa-gray-600);
    letter-spacing: 0.04em;
}

.bfa-footer-bottom__end {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.bfa-footer-legal {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bfa-footer-legal a {
    font-size: 0.8125rem;
    color: #858582;
    text-decoration: none;
    transition: color var(--bfa-transition-fast);
}

.bfa-footer-legal a:hover,
.bfa-footer-legal a:focus-visible {
    color: var(--bfa-gold);
}

/* Editorial-variant social icons — minimal, thin border */
.bfa-social--footer-editorial {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bfa-social--footer-editorial a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 50%;
    color: var(--bfa-gold);
    transition: all var(--bfa-transition);
}

.bfa-social--footer-editorial a:hover,
.bfa-social--footer-editorial a:focus-visible {
    background-color: var(--bfa-gold);
    color: var(--bfa-black);
    transform: translateY(-2px);
}

.bfa-social--footer-editorial svg {
    width: 14px;
    height: 14px;
}

/* Responsive collapse for the editorial footer */
@media (max-width: 991px) {
    .bfa-footer-columns {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    .bfa-footer-statement {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 1.5rem;
    }
}

@media (max-width: 575px) {
    .bfa-footer-columns {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .bfa-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}