/**
 * HBI Capital — presentation layer over the Elementor build.
 *
 * The homepage structure and its repeatable styling live in Elementor (atomic
 * elements + Global Classes, whose labels are the literal class names used
 * below: .sec, .inner, .row, .col, .grid-3, .card, .eyebrow, …).
 *
 * What lives HERE is everything Elementor 4's atomic toolset cannot express:
 * pseudo-element decoration, the section backgrounds and rhythm, the marquee,
 * the FAQ accordion's collapsed state, the reveal transitions, and the
 * hello-elementor header/footer restyle. Section-level hooks are the css_ids
 * set on the Elementor elements (#hero, #ticker, #stats, #faq-item-1, …).
 *
 * Editing note: colours come from the Elementor Global Variables (--Gold,
 * --Cream, --Charcoal, …) defined on the kit, so they stay in one place. The
 * --hbi-* tokens in style.css mirror them for anything outside Elementor.
 */

/* ==========================================================================
   Headline accents

   The design sets the closing phrase of three headings in gold. Elementor's
   html-v3 title prop runs through wp_kses, which permits inline <span> and
   <br> but strips class — id is the one attribute it keeps, so the accents are
   targeted by id.
   ========================================================================== */

#accent-hero,
#accent-why,
#accent-cta {
    color: var(--Gold, #b08d4f);
}

/* ==========================================================================
   Section numbers

   Oversized ghost numerals, one per section (the ticker band has none). Pure
   decoration, so they're pseudo-elements rather than elements in the build.
   #hero's own ::before/::after already carry the photo and its wash, so the
   hero numeral hangs off its .inner instead — which still positions against
   the section, since .inner is not itself positioned.
   ========================================================================== */

.elementor .sec {
    position: relative;
}

/* Elementor's .e-flexbox-base sets `padding: 10px` on every atomic flexbox.
   None of the layout classes declare their own padding, so each nesting level
   silently added 10px — pushing the CTA's heading 10px below where its 130px
   section padding should put it, and inflating the gap above every button row.
   The design has no such padding; only .sec and .card set one deliberately.

   Cards are excluded: they carry .col too, and this file loads after the
   global-class stylesheet, so an unqualified reset would strip their 32px. */
.elementor .inner:not(.card),
.elementor .row:not(.card),
.elementor .col:not(.card),
.elementor .grid-3:not(.card),
.elementor .ticket-row:not(.card) {
    padding: 0;
}

#hero::after,
#products::after,
#why::after,
#how::after,
#cases::after,
#quotes::after,
#faq::after,
#news::after,
#cta::after {
    position: absolute;
    top: 20px;
    left: 16px;
    font-family: var(--Heading, sans-serif);
    font-size: clamp(120px, 13vw, 210px);
    font-weight: 700;
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: var(--Gold, #b08d4f);
    opacity: 0.08;
    font-variant-numeric: tabular-nums;
    user-select: none;
    pointer-events: none;
}

#hero::after { content: "01"; }
#products::after { content: "02"; }
#why::after { content: "03"; }
#how::after { content: "04"; }
#cases::after { content: "05"; }
#quotes::after { content: "06"; }
#faq::after { content: "07"; }
#news::after { content: "08"; }
#cta::after { content: "09"; }

/* ==========================================================================
   Section rhythm
   ========================================================================== */

/* ==========================================================================
   Hero — values from the decoded design export

   The backdrop is three stacked layers behind the content: the photograph, a
   left-to-right charcoal wash so cream type holds contrast, and the section
   numeral. They are pseudo-elements rather than elements because the photo is
   decorative and must bleed edge to edge.
   ========================================================================== */

#hero {
    position: relative;
    background-color: var(--Charcoal-Hero, #101012);
    isolation: isolate;
    /* The design puts 110px/120px on the inner, and the .sec Global Class already
       supplies 120px top and bottom — leaving both gave the hero 470px of vertical
       padding instead of 230. The inline 32px gutter still comes from .sec. */
    padding-block: 0;
}

/* Photograph and wash are ONE layer (gradient listed first paints on top), which
   leaves ::after free for the section numeral. That matters: Elementor gives every
   container `position: relative`, so a numeral hung on .inner anchors to the 1280px
   column instead of the section's left edge — where the other eight sit. */
#hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(
            90deg,
            rgba(18, 18, 20, 0.95) 0%,
            rgba(18, 18, 20, 0.85) 45%,
            rgba(18, 18, 20, 0.55) 100%
        ),
        /* Set by the wp_head vars from the Media Library attachment, so the WebP
           upload is used and the image stays editable in WP. */
        var(--hbi-img-hero);
    background-size: cover, cover;
    background-position: center, 65% 50%;
    background-repeat: no-repeat, no-repeat;
}

/* Text column beside the deal ticket, 1.15 / 0.85 as in the design. */
#hero > .inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 64px;
    align-items: center;
    padding: 110px 0 120px;
    max-width: var(--hbi-max, 1280px);
}

#hero > .inner > .col:first-child {
    display: block;
}

#hero .h-hero {
    font-size: clamp(56px, 8vw, 104px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    margin: 24px 0 0;
}

#hero .lead {
    font-size: 18px;
    line-height: 1.65;
    color: rgba(245, 242, 236, 0.72);
    max-width: 520px;
    margin: 28px 0 0;
}

#hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 40px;
    width: auto;
}

/* --- deal ticket ---------------------------------------------------------- */

/* Top-aligned (level with the eyebrow) and right-aligned in its column, so the
   whole card is in view on arrival. It was bottom-aligned against the headline,
   which left it below the fold on laptop screens once it grew to ten rows. */
#deal-ticket {
    justify-self: end;
    align-self: start;
    width: 100%;
    max-width: 380px;
    background: var(--Charcoal-Panel, #1b1b1f);
    border: 1px solid rgba(245, 242, 236, 0.09);
    /* The gold rule across the top is what makes it read as a docket. */
    border-top: 2px solid var(--Gold, #b08d4f);
    border-radius: 6px;
    /* Monospace throughout — the design sets it on the card. */
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    padding: 0;
    gap: 0;
    flex: none;
}

/* Every row is padded inline; the vertical rhythm is set per group below,
   because the header, the five data rows and the footer are one flat list of
   siblings here rather than three wrapped blocks as in the design. */
#deal-ticket .ticket-row {
    padding-inline: 22px;
}

/* Header: label (+ optional reference), with a hairline under it. */
#deal-ticket .ticket-row:first-child {
    padding-block: 14px;
    border-bottom: 1px solid rgba(245, 242, 236, 0.08);
}

#deal-ticket .ticket-row:first-child .eyebrow {
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.22em;
    color: var(--Gold, #b08d4f);
}

#deal-ticket .ticket-row:first-child .micro {
    font-family: inherit;
    font-size: 11px;
    letter-spacing: normal;
    color: rgba(245, 242, 236, 0.4);
    font-variant-numeric: tabular-nums;
    text-transform: none;
}

/* The data rows: every row after the header, however many there are (it was a
   fixed five plus a footer). Labels stay on one line; long values wrap,
   right-aligned and balanced across their lines. Spacing is a little tighter
   than the Bridging Finance card (9px rows, 16px ends) so all ten rows fit
   above the fold on a 1366x768 laptop. */
#deal-ticket .ticket-row:nth-child(2) {
    padding-top: 16px;
}

#deal-ticket .ticket-row:nth-child(n + 3) {
    margin-top: 9px;
}

#deal-ticket .ticket-row:last-child:not(:first-child) {
    padding-bottom: 16px;
}

#deal-ticket .ticket-row:nth-child(n + 2) {
    align-items: flex-start;
}

#deal-ticket .ticket-row:nth-child(n + 2) > :last-child {
    text-align: right;
    text-wrap: balance;
}

#deal-ticket .ticket-row:nth-child(n + 2) .micro {
    font-family: inherit;
    font-size: 13px;
    letter-spacing: normal;
    text-transform: none;
    color: rgba(245, 242, 236, 0.45);
    flex-shrink: 0;
    white-space: nowrap;
}

#deal-ticket .ticket-row:nth-child(n + 2) .card-title {
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--Cream, #f5f2ec);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

/* The last value is picked out in gold, and is a .link-gold in the build.
   (The card's dashed-rule footer was removed with the Lending at a Glance
   content, so its styles are gone too.) */
#deal-ticket .ticket-row .link-gold {
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    background-image: none;
    padding: 0;
    width: auto;
}

@media (max-width: 900px) {
    #hero > .inner {
        grid-template-columns: 1fr;
        gap: 48px;
        padding-block: 88px 96px;
    }

    #deal-ticket {
        justify-self: start;
        max-width: 100%;
    }
}

/* Ticker: a slim band between hero and products. */
#ticker {
    /* Match the About ticker: slim full-bleed band (13px 0), not 22px + .sec's 32 inline. */
    padding: 13px 0;
    overflow: hidden;
    border-block: 1px solid var(--Line-Dark, rgba(245, 242, 236, 0.08));
    background-color: var(--Charcoal-Hero, #101012);
    /* .sec centres its children; the marquee has to start at the left edge,
       otherwise it shows its middle before the JS runs and for anyone on
       reduced motion. */
    align-items: flex-start;
}

/* The track also carries .inner, whose max-width would clamp the duplicated
   row that the marquee needs in order to loop. */
#ticker-track {
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
    gap: 40px;
    align-items: center;
    will-change: transform;
}

/* CSS-driven marquee (site.js duplicates the track into two identical halves).
   Reuses @keyframes hbiTickerAbout (translateX 0 -> -50%) like the inner pages —
   no per-frame JS, so it can't drift or overprint. Hover pauses; motion-safe. */
#ticker-track.is-marquee { animation: hbiTickerAbout 50s linear infinite; }
#ticker:hover #ticker-track.is-marquee { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { #ticker-track.is-marquee { animation: none; } }

/* Every ticker track (homepage + inner pages): the track must stay max-content
   and its items must NOT shrink — otherwise Elementor's max-width clamps the
   track to the viewport, the flex items shrink below their nowrap content, and
   the text overprints. (Inner tickers lacked the homepage's max-width:none.)
   Real IDs used so these win over Elementor's container max-width. */
#ticker-track, #ct-ticker-track, #bl-ticker-track, #bfh-ticker-track, #dxf-ticker-track,
#scb-ticker-track, #fbf-ticker-track, #fb-ticker-track, #nr-ticker-track, #about-ticker-track { max-width: none; flex-shrink: 0; }
#ticker-track > *, #ct-ticker-track > *, #bl-ticker-track > *, #bfh-ticker-track > *, #dxf-ticker-track > *,
#scb-ticker-track > *, #fbf-ticker-track > *, #fb-ticker-track > *, #nr-ticker-track > *, #about-ticker-track > * { flex-shrink: 0; }

/* ==========================================================================
   Products — header row plus four staggered cards

   Values from the decoded design export. Structural notes:
   - The heading and the section link are siblings in our tree, so the inner
     becomes a 2-column grid to get the design's "heading left, link bottom
     right" header.
   - Each card's media/body split is done with padding and a border on the
     children: there is no body wrapper element to style.
   - The stagger is a margin, not a transform, because the card tilt owns the
     transform (they would otherwise overwrite each other).
   ========================================================================== */

#products > .inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0;
    align-items: start;
}

#products > .inner > .eyebrow {
    grid-column: 1;
    grid-row: 1;
}

#products > .inner > .h-sec {
    grid-column: 1;
    grid-row: 2;
    max-width: 640px;
    margin: 18px 0 0;
}

/* Bottom-aligned with the heading, as in the design's flex-end header row. */
#products > .inner > .link-gold {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
}

#products .grid-3 {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 56px;
    /* Room for the staggered cards to hang past the row. */
    padding-bottom: 24px;
}

/* --- the cards ------------------------------------------------------------ */

#products .grid-3 > .card {
    background: #17171a;
    border: 1px solid rgba(245, 242, 236, 0.08);
    border-radius: 14px;
    overflow: hidden;
    /* Media is flush to the card edges; the body supplies its own padding. */
    padding: 0;
    gap: 0;
    flex: none;
    transition: transform 150ms ease-out, border-color 0.3s ease;
}

#products .grid-3 > .card:hover {
    border-color: rgba(176, 141, 79, 0.6);
}

/* Alternate cards sit 24px lower. A margin rather than translateY: the tilt
   handler writes to `transform`, so a transform here would be overwritten on
   first hover and never come back. */
#products .grid-3 > .card:nth-child(even) {
    margin-top: 24px;
    /* The negative bottom margin keeps the card the same HEIGHT as its unstaggered
       neighbours: a stretched grid item is sized to the row minus its margins, so
       margin-top alone made these two 24px shorter. It now hangs 24px past the row
       instead, which is what the grid's padding-bottom: 24px is there to absorb. */
    margin-bottom: -24px;
}

/* object-fit: contain — these are line illustrations, shown whole, not cropped. */
#products .grid-3 > .card > img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    background: #17171a;
    border-radius: 0;
    display: block;
    margin: 0;
    aspect-ratio: auto;
}

/* The gold hairline that separates media from body rides on the title, which is
   the first body element — there is no body wrapper to put it on. */
#products .grid-3 > .card > .card-title {
    border-top: 1px solid rgba(176, 141, 79, 0.3);
    padding: 24px 24px 0;
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--Cream, #f5f2ec);
}

#products .grid-3 > .card > .card-text {
    padding: 0 24px;
    margin: 10px 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(245, 242, 236, 0.65);
    max-width: none;
}

/* MARGIN, not padding. The underline is a background on this element, painted
   over the padding box — horizontal padding made it 48px wider than the text and
   the bottom padding pushed it 29px below it, down at the card edge. Margin keeps
   the background tight to the text, and padding-bottom:4px (the underline offset)
   comes from the shared .link-gold rule. */
#products .grid-3 > .card > .link-gold {
    margin: 0 24px 26px;
    font-size: 14px;
}

/* The whole card is the hover target for its link's underline. */
#products .grid-3 > .card:hover > .link-gold {
    background-size: 100% 1px;
}

@media (max-width: 900px) {
    #products > .inner {
        grid-template-columns: 1fr;
    }

    #products > .inner > .link-gold {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
        margin-top: 28px;
    }

    #products .grid-3 {
        grid-row: 4;
    }

    /* The stagger only reads as intentional across a row. Both margins: the
       -24px bottom one left alone made Heavy Refurbishment and Refinance
       overlap the card below by 4px on phones. */
    #products .grid-3 > .card:nth-child(even) {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* ==========================================================================
   Why brokers choose us — intro beside a 2x2 icon grid, then the stats band

   Values from the decoded design export. Two structural notes:
   - The card icons are data-URI backgrounds on each card's ::before rather than
     Elementor elements: they are decorative line art, and add-atomic-svg wants a
     media attachment per icon.
   - The stats band is a 170vh track containing a 100vh sticky inner, so the
     figures pin while the page scrolls past them. #stats-track / #stats /
     #stat-hero / #stat-pair were added to the build to provide those boxes.

   #why is the only remaining dark-ground section in the alternating rhythm;
   #cases, #how, #faq and #news are all light.
   ========================================================================== */

#why {
    position: relative;
    background: linear-gradient(180deg, #1a191c 0%, #121214 100%);
    border-top: 1px solid rgba(245, 242, 236, 0.06);
    /* No bottom padding — the stats band runs to the section edge. */
    padding-block: 110px 0;
}

/* Intro on the left, the 2x2 card grid on the right. */
#why > .inner > .row > .col:first-child {
    flex: 1 1 420px;
}

#why > .inner > .row > .col:last-child {
    flex: 1 1 600px;
}

#why .grid-3 > * {
    flex: 1 1 240px;
}

/* --- the four cards ------------------------------------------------------- */

#why .grid-3 > .card {
    background: #202024;
    border: 1px solid rgba(245, 242, 236, 0.08);
    border-radius: 12px;
    padding: 26px;
    gap: 0;
    transition: border-color 0.3s ease;
}

#why .grid-3 > .card:hover {
    border-color: rgba(176, 141, 79, 0.35);
    transform: none;
}

/* Icon. position:static keeps it in flow as the card's first box — a container
   pseudo-element is otherwise given an inset-0 absolute treatment here. */
#why .grid-3 > .card::before {
    content: "";
    position: static;
    display: block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 30px 30px;
}

#why .grid-3 > .card > .card-title {
    font-size: 17px;
    font-weight: 600;
    margin: 16px 0 8px;
}

#why .grid-3 > .card > .card-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(245, 242, 236, 0.6);
    margin: 0;
    max-width: none;
}

/* --- stats band ----------------------------------------------------------- */

/* The band. NOT a scroll-pinned track: the design export wraps this in 170vh
   with a 100vh sticky inner, but that pin was removed by request earlier in the
   build because it read as the page getting stuck — see the same note in the old
   theme's .hbi-stats. Kept full-bleed out of the 1280px content column.

   overflow-anchor: none because the counters re-render mid-scroll; without it
   scroll anchoring chases the changing text. */
#stats-track {
    position: relative;
    overflow-anchor: none;
    /* width:auto, NOT 100%. With the negative inline margins below, `auto` lets
       the box expand to the viewport; `100%` pins it to the 1280px column and
       the margins merely shift it left. */
    width: auto;
    max-width: none;
    padding: 0;
    gap: 0;
    border-top: 1px solid rgba(176, 141, 79, 0.3);
    background:
        repeating-linear-gradient(90deg, rgba(176, 141, 79, 0.05) 0 1px, transparent 1px 90px),
        repeating-linear-gradient(0deg, rgba(176, 141, 79, 0.05) 0 1px, transparent 1px 90px),
        #0e0e10;
    margin-inline: calc(50% - 50vw);
    /* Excluded from the reveal: this is a full-viewport band, so fading it in as
       one block is heavy-handed, and the reveal's transform would also make it a
       containing block for anything positioned inside. */
    opacity: 1;
    transform: none;
    animation: none;
}

#stats {
    /* min-height, not a sticky 100vh box — the band scrolls with the page. */
    min-height: 100vh;
    width: 100%;
    max-width: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7vh;
    padding: 0 32px;
    overflow: hidden;
    border: 0;
}

/* Warm texture under a charcoal veil, as the design layers them. */
#stats::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--hbi-img-tex-b, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.25;
    pointer-events: none;
}

#stats::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(18, 18, 20, 0.5);
    pointer-events: none;
}

/* Hero figure with its label on the same baseline.
   A 1fr/auto/1fr grid rather than a centred flex row: centring the two as one
   group put the figure ~65px left of the band's centre, because the label sits
   to its right. Here the figure holds the auto track — centred by the equal fr
   tracks — and the label sits in the right track, where its width cannot pull
   the figure off centre. Both remain in flow so baseline alignment still
   applies. */
#stat-hero {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    gap: 0;
    width: 100%;
    max-width: none;
    padding: 0;
}

#stat-hero > .stat-num {
    grid-column: 2;
}

#stat-hero > .micro {
    grid-column: 3;
    justify-self: start;
    /* was the flex gap */
    margin-left: 32px;
}

#stat-hero > .stat-num {
    font-weight: 300;
    font-size: clamp(110px, 24vh, 260px);
    line-height: 1;
    letter-spacing: -0.04em;
    color: #c9a55e;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

#stat-hero > .micro {
    font-family: var(--Body, sans-serif);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--Cream, #f5f2ec);
    max-width: 130px;
    text-transform: none;
}

/* The two secondary figures, each with a gold rule at its left. */
/* width:100% so the two figures centre against the band. Left at `auto` the
   wrapping flex container shrink-wrapped to a single column and they stacked. */
#stat-pair {
    position: relative;
    z-index: 2;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(40px, 6vw, 96px);
    width: 100%;
    max-width: none;
    padding: 0;
}

/* width:auto is required, not implied: Elementor s .e-con sets `width: var(--width)`
   which defaults to 100%, so every atomic container fills its parent unless told
   otherwise. Without this the two figures each filled a row and stacked. */
#stat-pair > .col {
    flex: none;
    width: auto;
    min-width: 180px;
    gap: 0;
    border-left: 1px solid rgba(176, 141, 79, 0.4);
    padding-left: 24px;
}

#stat-pair .stat-num {
    font-size: clamp(36px, 3vw, 48px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--Cream, #f5f2ec);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

#stat-pair .micro {
    font-family: var(--Body, sans-serif);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--Cream, #f5f2ec);
    margin-top: 10px;
    text-transform: none;
}

/* Footnote, inside the pinned area. */
#stats > .micro {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 620px;
}

/* A full viewport of band is a lot on a phone; let it size to its content. */
@media (max-width: 900px) {
    #stats {
        min-height: 0;
        padding-block: 96px;
        gap: 56px;
    }

    /* The side tracks have no room at this width — the label would overflow the
       right one — so it sits under the figure instead. */
    #stat-hero {
        grid-template-columns: auto;
        justify-items: center;
        row-gap: 8px;
    }

    #stat-hero > .stat-num,
    #stat-hero > .micro {
        grid-column: 1;
    }

    #stat-hero > .micro {
        /* justify-self must be reset — the desktop rule pins it to the start of its
           track, which left the label hanging off to the left here. */
        justify-self: center;
        margin-left: 0;
        text-align: center;
        max-width: none;
    }

    /* The design (and the old theme) size this by viewport HEIGHT only, so on a
       narrow phone "£40m+" is ~3x the font size wide and overflows — clipped by
       the band's overflow:hidden. Cap it by width here so it fits instead. */
    #stat-hero > .stat-num {
        font-size: min(24vh, 26vw);
    }
}

#why .grid-3 > .card:nth-child(1):before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20stroke%3D%22%23B08D4F%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.2%2011.8%20A11.4%2011.4%200%200%201%2024.6%209.6%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M25.8%2018.2%20A11.4%2011.4%200%200%201%205.4%2020.4%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M20.4%204.6%20L25%209.9%20L19.4%2011.2%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M9.6%2025.4%20L5%2020.1%20L10.6%2018.8%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M12.9%2019.1%20H17.7%20M12.9%2015.5%20H16.3%20M17.4%2012.2%20C16.8%2011.3%2015.8%2010.9%2014.9%2011.2%20C13.7%2011.6%2013.3%2012.8%2013.6%2014.1%20C14%2016%2014.3%2017.7%2012.9%2019.1%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

#why .grid-3 > .card:nth-child(2):before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20stroke%3D%22%23B08D4F%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M4%2013%20L12%206%20L20%2013%20V24%20H4%20Z%22%3E%3C%2Fpath%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2219%22%20r%3D%225.5%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M24%2023%20L28%2027%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

#why .grid-3 > .card:nth-child(3):before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20stroke%3D%22%23B08D4F%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M15%204%20V26%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M6%208%20H24%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M6%208%20L3%2016%20H9%20Z%20M24%208%20L21%2016%20H27%20Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M10%2026%20H20%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

#why .grid-3 > .card:nth-child(4):before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20stroke%3D%22%23B08D4F%22%20stroke-width%3D%221.5%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%229%22%20r%3D%224%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M3%2025%20C3%2019.5%206%2017%2010%2017%20C14%2017%2017%2019.5%2017%2025%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M19%2012%20H28%20M24%208%20L28%2012%20L24%2016%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}


/* ==========================================================================
   How it works — light section, three numbered steps on a connector line

   Values read out of the decoded design export (not the old theme). The steps
   are our standard card grid restyled: the eyebrow becomes the 56px circle, the
   card chrome is stripped, and the connector is a pseudo-element on the grid.

   The circles are filled with the section's own background colour, which is what
   makes the line appear to stop either side of each one rather than run through.
   ========================================================================== */

#how {
    background-color: #f5f2ec;
    color: var(--hbi-ink, #121214);
    padding-block: 110px;
}

/* Spacing comes from the design's explicit margins, not a flex gap. */
#how > .inner {
    gap: 0;
}

#how > .inner > .h-sec {
    color: var(--hbi-ink, #121214);
    max-width: 620px;
    margin: 18px 0 0;
}

#how > .inner > .link-gold {
    margin-top: 56px;
}

/* --- the step row ---------------------------------------------------------- */

#how .grid-3 {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 64px;
}

/* Connector line, level with the circles' centres (half of 56px). Offsets are
   all stated explicitly: a container's pseudo-element here inherits an inset-0
   absolute treatment, so leaving `bottom`/`width` unset would stretch it. */
#how .grid-3::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 8%;
    right: 8%;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--Gold, #b08d4f) 12%,
        var(--Gold, #b08d4f) 88%,
        transparent
    );
    transform-origin: left center;
    pointer-events: none;
}

/* Drawn in when the section reveals, as the design does with its data-draw. */
.hbi-js #how > .inner .grid-3::before {
    transform: scaleX(0);
}

.hbi-js #how > .inner.is-inview .grid-3::before {
    animation: hbi-draw 0.6s ease-out 0.15s both;
}

@keyframes hbi-draw {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* --- each step ------------------------------------------------------------- */

#how .grid-3 > .card {
    position: relative;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    gap: 0;
    flex: none;
}

/* The step number: an .eyebrow repurposed as the circle, so its gold rule and
   wide tracking both have to be undone. */
#how .grid-3 > .card > .eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: none;
    border: 1px solid var(--Gold, #b08d4f);
    border-radius: 50%;
    background: #f5f2ec;
    font-family: var(--Heading, sans-serif);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: normal;
    color: var(--Gold, #b08d4f);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

#how .grid-3 > .card > .eyebrow::before {
    content: none;
}

#how .grid-3 > .card > .card-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--hbi-ink, #121214);
    margin: 22px 0 10px;
}

#how .grid-3 > .card > .card-text {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(18, 18, 20, 0.65);
    max-width: 320px;
    margin: 0;
}

/* No hover treatment on these — the inherited card hover must be cancelled. */
#how .grid-3 > .card:hover {
    transform: none;
    border-color: transparent;
}

@media (max-width: 900px) {
    #how .grid-3 {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* The line only makes sense across a row. */
    #how .grid-3::before {
        display: none;
    }
}


/* ==========================================================================
   Case studies — light section, numbered editorial rows

   Values from the design's .home-cases / .case-row rules. Two structural
   problems, both solved with grid placement rather than new markup, since the
   atomic toolset has no move operation:

   1. The header puts the eyebrow and heading on the left with a dark button
      pushed right and baseline-aligned to the heading. Our children are a flat
      column, so the inner becomes a 2-column grid with explicit placement.
   2. Each row is media | number | body, but our card's four children are flat
      siblings. The card becomes a 3-column grid; the number is a pseudo-element
      (it has no counterpart in the build) and the badge is positioned over the
      image.
   ========================================================================== */

#cases {
    background-color: #fcfaf6;
    color: var(--hbi-ink, #121214);
    border-top: 1px solid #e8e2d4;
    padding-block: 110px;
}

/* --- header ---------------------------------------------------------------- */

#cases > .inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0;
    align-items: start;
}

#cases > .inner > .eyebrow {
    grid-column: 1;
    grid-row: 1;
}

#cases > .inner > .h-sec {
    grid-column: 1;
    grid-row: 2;
    color: var(--hbi-ink, #121214);
    max-width: 640px;
    margin: 20px 0 0;
}

/* The button sits in the second column, bottom-aligned with the heading. */
#cases > .inner > .btn-ghost {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    background-color: var(--hbi-ink, #121214);
    border: 0;
    color: var(--Cream, #f5f2ec);
    font-size: 14px;
    padding: 14px 26px;
    white-space: nowrap;
}

#cases > .inner > .btn-ghost:hover {
    background-color: #2d2d2d;
    border-color: transparent;
}

/* --- list ------------------------------------------------------------------ */

#cases .grid-3 {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    margin-top: 56px;
    border-bottom: 1px solid #e8e2d4;
}

/* Each card becomes a row: media | number | body. Column gaps differ (media to
   body is fluid, number to body is a fixed 28px), so the gap is carried by the
   numeral's own margins rather than column-gap, which would apply to both. */
/* The 444px cap reproduces the design's proportions exactly: at the 1280px
   grid, the numeral (~106px) plus its 64px and 28px margins leaves 638px of
   media beside a 444px body — which is also why the titles wrap onto two lines
   as they do in the reference.

   The 1fr rows top and bottom are what keep the body compact. The media spans
   every row, and a spanning item's height is distributed into the intrinsic
   rows it crosses — so the title, text and link were being pushed apart to the
   image's full height. align-content can't fix that (there is no leftover space
   to distribute); flexible spacer rows absorb the surplus instead, and having
   one at each end centres the body against the image. */
#cases .grid-3 > .card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 435px);
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: 0;
    row-gap: 0;
    align-items: center;
    padding: 48px 0;
    /* border: 0 first — the `card` Global Class sets a 1px border on all four
       sides, so overriding only border-top left faint left/right/bottom edges
       on every row. */
    border: 0;
    border-top: 1px solid #e8e2d4;
    background: none;
    border-radius: 0;
    box-shadow: none;
    flex: none;
}

/* position:static again — as an absolutely-positioned pseudo it contributed no
   width, so the auto column collapsed to zero and the numeral overflowed on top
   of the title. */
#cases .grid-3 > .card::before {
    grid-column: 2;
    grid-row: 2 / -2;
    align-self: start;
    position: static;
    width: auto;
    height: auto;
    /* The two gaps differ (media→numeral is fluid, numeral→title fixed), so
       they ride on the numeral's margins rather than a shared column-gap. */
    margin-inline: clamp(32px, 4vw, 64px) 28px;
    font-family: var(--Heading, sans-serif);
    font-weight: 200;
    font-size: clamp(56px, 6vw, 96px);
    font-variant-numeric: tabular-nums;
    line-height: 0.9;
    color: var(--Gold, #b08d4f);
    opacity: 0.4;
}

#cases .grid-3 > .card:nth-child(1)::before { content: "01"; }
#cases .grid-3 > .card:nth-child(2)::before { content: "02"; }
#cases .grid-3 > .card:nth-child(3)::before { content: "03"; }

/* Media wrapper spans the row's full height in column 1. It exists purely to
   clip the hover zoom: overflow:hidden plus the radius here, transform on the
   image inside. clip-path on a bare image can't do this — a transform scales
   the clip along with the element. */
#cases .grid-3 > .card > [id^="case-media-"] {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 14px;
    padding: 0;
    gap: 0;
}

#cases .grid-3 > .card [id^="case-media-"] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
    margin: 0;
    transition: transform 0.6s ease;
}

#cases .grid-3 > .card:hover [id^="case-media-"] img {
    transform: scale(1.05);
}

/* Badge pill over the media. It is a sibling of the wrapper, not inside it, so
   it still positions against the card — 48px row padding plus the design's 14px
   inset. It paints above the image because it follows the wrapper in the DOM. */
#cases .grid-3 > .card > .eyebrow {
    position: absolute;
    top: 62px;
    left: 14px;
    display: inline-block;
    background: rgba(18, 18, 20, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(176, 141, 79, 0.6);
    border-radius: 999px;
    color: var(--Gold, #b08d4f);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 12px;
    margin: 0;
}

/* The badge is an .eyebrow, whose leading gold rule would sit inside the pill. */
#cases .grid-3 > .card > .eyebrow::before {
    content: none;
}

#cases .grid-3 > .card > .card-title {
    grid-column: 3;
    grid-row: 2;
    font-size: clamp(24px, 2.2vw, 34px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--hbi-ink, #121214);
    margin: 0;
}

/* Title underline on hover — the one hover the rows keep. Matched to the
   design export, which puts it on an inline span inside the heading and does
   NOT set box-decoration-break.

   That default (`slice`) is the whole trick: the line fragments are painted as
   one continuous box laid end to end, so `background-size` animates across
   their COMBINED width. The wipe starts on line 1 and flows into line 2 as a
   single stroke, and both lines end up underlined. `clone` would give each
   fragment its own box, making them wipe simultaneously at different speeds. */
#cases [id^="case-title-"] {
    background-image: linear-gradient(var(--Gold, #b08d4f), var(--Gold, #b08d4f));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    padding-bottom: 4px;
    transition: background-size 0.5s ease;
}

#cases .grid-3 > .card:hover [id^="case-title-"] {
    background-size: 100% 2px;
}

#cases .grid-3 > .card > .card-text {
    grid-column: 3;
    grid-row: 3;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(18, 18, 20, 0.6);
    max-width: 440px;
    margin: 14px 0 20px;
}

#cases .grid-3 > .card > .link-gold {
    grid-column: 3;
    grid-row: 4;
    font-size: 14px;
}

/* The row itself has no hover treatment — no lift, no border tint; hovering a
   row only reveals the title underline above. This rule is required because the
   `card` Global Class carries its own hover that tints the border gold. */
#cases .grid-3 > .card:hover {
    transform: none;
    border-color: #e8e2d4;
}

@media (max-width: 900px) {
    #cases > .inner {
        grid-template-columns: 1fr;
    }

    #cases > .inner > .btn-ghost {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
        margin-top: 28px;
    }

    #cases .grid-3 {
        grid-row: 4;
    }

    /* Explicit auto rows: the desktop's 1fr spacer rows (which centre the body
       against the image beside it) would otherwise survive here, and with the
       image now in row 1 the trailing 1fr grows to the image's height, leaving
       a ~200px gap under every card. */
    #cases .grid-3 > .card {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        row-gap: 0;
    }

    #cases .grid-3 > .card > [id^="case-media-"] {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 24px;
    }

    #cases .grid-3 > .card::before {
        grid-column: 1;
        grid-row: 2 / -1;
        margin-inline: 0 20px;
    }

    #cases .grid-3 > .card > .card-title {
        grid-column: 2;
        grid-row: 2;
    }

    #cases .grid-3 > .card > .card-text {
        grid-column: 2;
        grid-row: 3;
    }

    #cases .grid-3 > .card > .link-gold {
        grid-column: 2;
        grid-row: 4;
    }
}

/* Phones: the numeral sits beside the title only; the description and link
   use the full width instead of a ~240px column beside it. */
@media (max-width: 600px) {
    #cases .grid-3 > .card::before {
        grid-row: 2;
    }

    #cases .grid-3 > .card > .card-text,
    #cases .grid-3 > .card > .link-gold {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   Broker FAQs — light section, text beside the accordion

   Values from the design's .home-faq / .faq-item rules. The design's markup has
   the intro and the list as two grid children; our Elementor tree is a flat
   column (eyebrow, heading, lead, list, link), and the atomic toolset has no
   move operation — so the two columns are produced by turning the inner into a
   grid and placing the children explicitly.
   ========================================================================== */

#faq {
    background-color: #f5f2ec;
    color: var(--hbi-ink, #121214);
    padding-block: 110px;
}

/* The trailing 1fr row absorbs the slack. Without it the accordion — which is
   taller than the intro and spans the intro's four rows — stretches those rows
   to fit, spreading the eyebrow, heading, lead and link far apart. */
#faq > .inner {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-rows: auto auto auto auto 1fr;
    gap: 0 72px;
    align-items: start;
}

#faq > .inner > .eyebrow {
    grid-column: 1;
    grid-row: 1;
}

#faq > .inner > .h-sec {
    grid-column: 1;
    grid-row: 2;
    color: var(--hbi-ink, #121214);
    margin: 20px 0 0;
}

#faq > .inner > .lead {
    grid-column: 1;
    grid-row: 3;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(18, 18, 20, 0.62);
    max-width: 400px;
    margin: 22px 0 0;
}

/* justify-self, not align-self: as a grid item the link stretches across the
   column and Elementor's button base centres its text, so it read as indented.
   align-self only governs the block axis here. */
#faq > .inner > .link-gold {
    grid-column: 1;
    grid-row: 4;
    margin-top: 28px;
    justify-self: start;
    text-align: left;
}

/* The list occupies the second column across every row. */
#faq-list {
    grid-column: 2;
    grid-row: 1 / -1;
    max-width: none;
    gap: 14px;
}

/* --- accordion items ------------------------------------------------------- */

#faq [id^="faq-item-"] {
    cursor: pointer;
    background: #ffffff;
    border: 1px solid #e5dfd2;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    gap: 0;
}

#faq [id^="faq-q-"] {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    font-family: var(--Heading, sans-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--hbi-ink, #121214);
    transition: color 0.25s ease;
}

/* The open question is picked out in gold. */
#faq [id^="faq-item-"].is-open [id^="faq-q-"] {
    color: var(--Gold, #b08d4f);
}

#faq [id^="faq-q-"]::after {
    content: "+";
    font-family: var(--Heading, sans-serif);
    font-weight: 400;
    font-size: 22px;
    line-height: 1;
    color: var(--Gold, #b08d4f);
    flex: none;
}

#faq [id^="faq-item-"].is-open [id^="faq-q-"]::after {
    content: "−";
}

/* Collapsed only once JS is running, so the answers stay readable without it.
   Padding is animated alongside max-height: the answer paragraph carries its
   own padding (there is no inner wrapper as in the design), so leaving it in
   place would keep 22px visible on a closed item. */
.hbi-js #faq [id^="faq-a-"] {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding: 0 24px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--hbi-ink-65, rgba(18, 18, 20, 0.65));
    transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.25s ease;
}

.hbi-js #faq [id^="faq-item-"].is-open [id^="faq-a-"] {
    max-height: 320px;
    padding-bottom: 22px;
    opacity: 1;
}

/* Without JS the answers are simply always visible. */
#faq [id^="faq-a-"] {
    font-size: 15px;
    line-height: 1.7;
    color: var(--hbi-ink-65, rgba(18, 18, 20, 0.65));
    padding: 0 24px 22px;
    margin: 0;
}

@media (max-width: 900px) {
    /* No row gap: it stacked on the items' own design margins (eyebrow ->
       heading 20, heading -> lead 22), doubling them to ~70px. The list and
       link get explicit top margins instead. */
    #faq > .inner {
        grid-template-columns: 1fr;
        gap: 0;
    }

    #faq > .inner > .eyebrow,
    #faq > .inner > .h-sec,
    #faq > .inner > .lead,
    #faq > .inner > .link-gold,
    #faq-list {
        grid-column: 1;
        grid-row: auto;
    }

    #faq-list {
        margin-top: 36px;
    }

    #faq > .inner > .link-gold {
        margin-top: 32px;
    }
}

/* ==========================================================================
   Newsroom — the one light section

   Values from the design's .home-news / .news-card rules. Two white article
   cards with full-bleed 16:9 media, plus a dark panel card. The section
   inverts the page's palette, so the heading, card titles and grounds are all
   overridden off the dark defaults the Global Classes supply.
   ========================================================================== */

#news {
    background-color: #fcfaf6;
    color: var(--hbi-ink, #121214);
    border-top: 1px solid #e8e2d4;
    padding-block: 110px;
}

/* The design spaces these with explicit margins rather than a flex gap. */
#news > .inner {
    gap: 0;
}

#news .h-sec {
    color: var(--hbi-ink, #121214);
    max-width: 620px;
    margin: 20px 0 0;
}

#news .grid-3 {
    margin-top: 56px;
    gap: 24px;
}

/* --- white article cards --------------------------------------------------- */

#news .card:not(#news-panel) {
    background: #ffffff;
    border: 1px solid #e8e2d4;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(18, 18, 20, 0.05);
    padding: 24px 24px 26px;
    gap: 0;
}

/* Media bleeds to the card edges. The image is a direct child of the card, so
   it is pulled out by the body padding rather than wrapped in its own box. */
#news .card > img {
    margin: -24px -24px 24px;
    width: calc(100% + 48px);
    max-width: none;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    background: #17171a;
    object-fit: cover;
    display: block;
}

#news .card .micro {
    font-family: var(--Heading, sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--Gold, #b08d4f);
}

#news .card:not(#news-panel) .card-title {
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--hbi-ink, #121214);
    margin: 12px 0 18px;
}

#news .card:not(#news-panel) .link-gold {
    font-size: 14px;
}

/* --- dark panel card ------------------------------------------------------- */

/* The design groups the eyebrow and title together at the top with the link at
   the bottom. It can use space-between because its markup wraps the first two
   in a div; ours has three flat children, which space-between would spread —
   stranding the title in the middle. Pushing the link down with auto margin
   gives the same result without the wrapper. */
#news-panel {
    background: var(--Charcoal-Panel, #1b1b1f);
    border: 1px solid rgba(176, 141, 79, 0.35);
    border-radius: 14px;
    padding: 28px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
}

#news-panel .card-title {
    font-size: 24px;
    color: var(--Cream, #f5f2ec);
    margin: 14px 0 0;
    max-width: 280px;
}

#news-panel .link-gold {
    font-size: 16px;
    margin-top: auto;
    padding-top: 32px;
}

/* Both card kinds lift on hover. */
#news .card:hover {
    transform: translateY(-6px);
    border-color: rgba(176, 141, 79, 0.6);
}

#news-panel:hover {
    border-color: rgba(176, 141, 79, 0.8);
}

/* CTA band. Values taken from the design's .home-cta rules rather than
   estimated: a warm radial ground, the inverted texture under a charcoal
   shade, a gold hairline on top, and three concentric rings anchored below the
   section so only their upper arcs show. */
#cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding-block: 130px;
    border-top: 1px solid rgba(176, 141, 79, 0.25);
    /* The design also layers texture-A here, but inverted (scaleY(-1)) so the
       smoke sits at the bottom under a charcoal shade — a background-image
       can't be flipped, and unflipped it reads as obvious smoke in the top
       corner, which the reference doesn't show. Gradient only. */
    background-image: radial-gradient(900px 500px at 50% 120%, #201d18 0%, #121214 65%);
    background-repeat: no-repeat;
}

/* Deliberately NOT position:relative — the ring pseudo-elements hanging off
   this element must resolve against the section, as they do in the design
   where the rings are siblings of the inner. */
#cta > .inner {
    align-items: center;
    text-align: center;
    max-width: 760px;
    /* The design spaces these with explicit margins, not a flex gap. */
    gap: 0;
}

/* The closing statement is set larger than a standard section heading. */
#cta .h-sec {
    font-size: clamp(44px, 5vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin: 0;
}

#cta .lead {
    max-width: 520px;
    margin: 24px auto 0;
}

/* .row only centres on the cross axis; the CTA pair needs centring along the
   main axis too. */
#cta .row {
    justify-content: center;
    width: auto;
    margin-top: 44px;
    gap: 16px;
}

/* "Prefer to talk? Call …" microcopy sits under the button row — give it air. */
#cta .micro {
    margin-top: 16px;
}

#cta .btn {
    padding-inline: 34px;
}

#cta .btn-ghost {
    padding-inline: 34px;
}

/* Rings — three concentric circles of radius 450 / 530 / 610px, centred 30px
   below the section's bottom edge, fading outward. The design draws them as
   three sibling divs; spreading them across ::before/::after of different
   elements instead made each resolve its offsets against a different box, so
   the radii came out wrong and the arcs crossed rather than nested. Painting
   all three as radial-gradient stops on a single layer keeps one unambiguous
   coordinate space — the section itself. */
#cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 449px, rgba(176, 141, 79, 0.25) 449px, rgba(176, 141, 79, 0.25) 450px, transparent 450px),
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 529px, rgba(176, 141, 79, 0.15) 529px, rgba(176, 141, 79, 0.15) 530px, transparent 530px),
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 609px, rgba(176, 141, 79, 0.08) 609px, rgba(176, 141, 79, 0.08) 610px, transparent 610px);
}

/* ==========================================================================
   Components Elementor can't express
   ========================================================================== */

/* Eyebrow's leading gold rule — a pseudo-element, so it cannot live in a
   Global Class. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.eyebrow::before {
    content: "";
    inline-size: 24px;
    block-size: 1px;
    background: var(--Gold, #b08d4f);
    flex: none;
}

/* The ticker's items are eyebrow-styled but must not each carry a rule. */
#ticker-track .eyebrow::before {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
}

/* Inline contextual links inside body copy (lead/micro paragraphs) — gold +
   underline so they read as links, and distinct from the .link-gold buttons. */
.elementor .lead a,
.elementor .micro a {
    color: var(--Gold, #b08d4f);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.25s ease;
}
.elementor .lead a:hover,
.elementor .micro a:hover {
    color: var(--Gold-Bright, #c9a56a);
}

/* Buttons: Elementor sets colour/padding/radius; hover and the inline-block
   behaviour are ours. */
.btn,
.btn-ghost {
    display: inline-block;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 120ms ease-out, background-color 0.3s ease,
        border-color 0.3s ease;
    will-change: transform;
}

/* Elementor writes its global classes as `.elementor .btn` (0,2,0), so any rule
   here that overrides a property a global class also sets must match or beat
   that — hence the .elementor prefix on the hover states below. Without it the
   rule loses on specificity no matter how late this file loads. */
.elementor .btn:hover {
    background-color: var(--Gold-Bright, #c9a56a);
}

/* The design tints border AND text gold, not cream. */
.elementor .btn-ghost:hover {
    border-color: var(--Gold, #b08d4f);
    color: var(--Gold, #b08d4f);
}

/* Elementor's button base centres its text and the surrounding flex column
   stretches it, so an inline text link reads as a centred full-width block.
   These links are always left-aligned in the design, wherever they sit. */
.link-gold {
    text-decoration: none;
    align-self: flex-start;
    text-align: left;
}

/* .inner is a column flex container, so a button child would otherwise stretch
   to the full 1280px. Buttons sitting inside a .row (the hero and CTA pairs)
   are unaffected. */
.elementor .inner > .btn,
.elementor .inner > .btn-ghost,
.elementor .inner > .link-gold {
    align-self: flex-start;
}

/* Hover: a gold underline wipes in from the left over 0.4s — the design's
   .hbi-underline-link. It is drawn as a background-image gradient sized from
   0% to 100%, because a real border or text-decoration can't be animated
   directionally. background-image only, never the `background` shorthand: the
   link-gold Global Class sets background-color and the shorthand would reset
   it. The text colour deliberately stays put; the underline is the affordance.

   width: fit-content keeps the rule tight to the text — if the link ever sits
   in a container that stretches it, the underline would otherwise run the full
   column width. */
.elementor .link-gold {
    display: inline-block;
    width: fit-content;
    padding-bottom: 4px;
    background-image: linear-gradient(var(--Gold, #b08d4f), var(--Gold, #b08d4f));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.4s ease;
}

.elementor .link-gold:hover {
    background-size: 100% 1px;
}

/* The newsroom cards opt out: there the whole card is the anchor and it lifts
   on hover, so the design uses a plain span for the label. */
#news .link-gold {
    background-image: none;
}

/* Cards: images crop to a consistent ratio and clip to the card radius. */
.card img {
    border-radius: 6px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
    display: block;
}

.card {
    transition: transform 0.35s ease, border-color 0.35s ease;
}

.elementor .card:hover {
    border-color: rgba(176, 141, 79, 0.35);
}

/* ==========================================================================
   Testimonials — a one-at-a-time slider

   Values from the design's .home-quotes rules. The Elementor tree is a 3-across
   card grid (there is no move operation in the atomic toolset), so the cards
   are stripped of their panel chrome and re-purposed as full-width slides in a
   clipped viewport. The dots do not exist as elements — site.js builds them.
   ========================================================================== */

#quotes {
    padding-block: 110px;
    overflow: hidden;
}

/* Ring bleeding off the lower-left. ::after is already the "06" numeral.

   top/right are reset to auto deliberately. The same inset-0 rule that affects
   container pseudo-elements here sets top:0, and a box with top, bottom AND a
   definite height is over-constrained — top wins, bottom is ignored. That put
   the ring's centre at y=360 instead of y=622, so its arc bulged out to the
   right around mid-section instead of grazing the bottom-left corner. */
#quotes::before {
    content: "";
    position: absolute;
    top: auto;
    right: auto;
    bottom: -360px;
    left: -280px;
    width: 720px;
    height: 720px;
    border: 1px solid rgba(176, 141, 79, 0.14);
    border-radius: 50%;
    pointer-events: none;
}

/* The inner doubles as the slider viewport — the design's dedicated viewport
   element has no counterpart in our tree. `order` places the quote mark
   between the eyebrow and the track: as a pseudo-element it would otherwise be
   the flex container's first child and sit above the eyebrow. */
#quotes > .inner {
    max-width: 900px;
    overflow: hidden;
    text-align: center;
    align-items: center;
    gap: 0;
}

#quotes > .inner > .eyebrow {
    order: 1;
}

/* position/width/height are reset explicitly: something in the loaded CSS
   styles a container's ::before as an absolutely-positioned, inset-0 overlay
   (it computed to position:absolute at 900x298 filling the inner), which took
   the mark out of flow entirely — the section came out 100px short with the
   glyph sitting on top of the quote. Every other pseudo-element here wants to
   be absolute, so this is the one that has to opt out. */
#quotes > .inner::before {
    content: "\201C";
    order: 2;
    position: static;
    width: auto;
    height: auto;
    font-family: var(--Quote, Georgia), Georgia, serif;
    font-style: italic;
    font-size: 120px;
    line-height: 0.4;
    color: var(--Gold, #b08d4f);
    margin-top: 56px;
}

#quotes-track {
    order: 3;
    margin-top: 8px;
}

/* align-self overrides the global left-alignment: this section is centred. */
#quotes > .inner > .link-gold {
    order: 5;
    margin-top: 40px;
    align-self: center;
}

/* The eyebrow is centred here, so it takes a rule on both sides. */
#quotes .eyebrow::after {
    content: "";
    inline-size: 24px;
    block-size: 1px;
    background: var(--Gold, #b08d4f);
    flex: none;
}

/* --- track and slides ------------------------------------------------------ */

/* Excluded from the reveal: that animation ends on `transform: none` with
   `both` fill, and an animation outranks declarative CSS — it would pin the
   track and the slider simply would not move. The ID beats the reveal rule. */
#quotes-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    max-width: none;
    align-items: flex-start;
    opacity: 1;
    animation: none;
    transform: translateX(0);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Cards become bare slides — in the design the quote sits on the section
   ground, with no panel, border or radius. */
#quotes-track > .card {
    flex: 0 0 100%;
    display: block;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 24px;
    text-align: center;
}

#quotes .card-text {
    font-family: var(--Quote, Georgia), Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.4;
    color: var(--Cream, #f5f2ec);
    text-wrap: balance;
    max-width: none;
    margin: 0 0 28px;
}

/* Attribution is two separate elements in our tree; inline-ing them puts the
   name and firm on one line, with the separator supplied by CSS. */
#quotes .card-title,
#quotes .micro {
    display: inline;
    font-family: var(--Heading, sans-serif);
    font-size: 13px;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#quotes .card-title {
    color: var(--Gold, #b08d4f);
}

#quotes .card-title::after {
    content: " · ";
    color: rgba(245, 242, 236, 0.6);
}

#quotes .micro {
    color: rgba(245, 242, 236, 0.6);
}

/* --- dots (built by site.js) ----------------------------------------------- */

/* Each button is a 24x24 tap area (WCAG 2.5.8 minimum) with the 10px dot drawn
   in its centre, so the dots look as before (24px apart vs 22) but are easier
   to hit on a phone. */
.hbi-dots {
    order: 4;
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 37px;
}

.hbi-dot {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.hbi-dot::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: rgba(245, 242, 236, 0.25);
    transition: background 0.3s ease;
}

.hbi-dot.is-active::before {
    background: var(--Gold, #b08d4f);
}

.hbi-dot:focus-visible {
    outline: 2px solid var(--Gold, #b08d4f);
    outline-offset: 0;
}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */

/* An animation, not a transition. `transition` is a single property, so a
   declaration here would REPLACE the transition on any reveal child that has
   its own — which silently killed the underline wipe on the section links and
   the hover ease on the "All case studies" button, both direct children of a
   section's inner. An animation runs alongside element transitions instead of
   clobbering them; `both` holds the end state after it finishes. */
.hbi-js .hbi-reveal > * {
    opacity: 0;
    transform: translateY(18px);
}

.hbi-js .hbi-reveal.is-inview > * {
    animation: hbi-reveal 0.6s ease-out var(--hbi-stagger, 0ms) both;
}

@keyframes hbi-reveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   Header / footer — hello-elementor's own markup, restyled to the design
   ========================================================================== */

/* Nav bar — values from the decoded design export. Markup comes from the child
   theme's template-parts/dynamic-header.php, which keeps hello-elementor's menu,
   toggle and dropdown class names so its responsive behaviour still applies. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    /* Opaque so the sticky header stays the hero/banner colour (#101012) in
       every scroll state. It was rgba(18,18,20,0.88)+blur, which composited to
       grey when it scrolled over the cream article body on case-study singles.
       The homepage looked fine only because its sections behind the header are
       dark; making it opaque fixes it everywhere without changing the dark look. */
    background: #101012;
    border-bottom: 1px solid rgba(245, 242, 236, 0.08);
    /* Horizontal gutter matches the sections' 32px so the logo/nav/CTA line up
       with the page content and never touch the screen edges below the 1280 cap.
       (Was padding:0 -> header sat flush + 32px misaligned with sections at
       601-1279px, e.g. 1024. Gutter belongs on the outer .site-header, not the
       inner: the inner is capped at 1280 and centred, so padding there would
       misalign at >=1280.) */
    padding: 0 32px;
}

.site-header .header-inner {
    max-width: var(--hbi-max, 1280px);
    width: 100%;
    margin-inline: auto;
    padding: 0;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

/* Logo. Same inversion as the footer — the supplied lockup is the
   light-background variant, so on charcoal only "CAPITAL" would show. */
.hbi-header__logo {
    display: flex;
    align-items: center;
    flex: none;
    text-decoration: none;
    font-family: var(--Heading, sans-serif);
    font-size: 20px;
    font-weight: 700;
    color: var(--Cream, #f5f2ec);
}

.hbi-header__logo img {
    height: 56px;
    width: auto;
    display: block;
    filter: invert(1);
}

/* --- menu ----------------------------------------------------------------- */

.site-navigation ul.menu {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-navigation ul.menu li a {
    display: block;
    padding: 0;
    font-family: var(--Heading, sans-serif);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--Cream, #f5f2ec);
    text-decoration: none;
    transition: color 0.25s ease;
}

/* Hover only — NOT .current-menu-item. Every item is a fragment link to this
   one page, so WordPress marks all six as current-menu-item (plus menu-item-home),
   which turned the entire nav gold. A current-item highlight is meaningless on a
   one-pager anyway. */
.site-navigation ul.menu li a:hover {
    color: var(--Gold, #b08d4f);
}

/* --- dropdown (e.g. Bridging Finance > the four products) -------------------
   Sub-items are ordinary WordPress menu children (Appearance > Menus). The
   panel hangs from the bottom edge of the header bar; an invisible bridge over
   the gap keeps it open while the pointer travels down. Opens on hover and on
   keyboard focus (:focus-within). */
.site-navigation ul.menu > li {
    position: relative;
}

/* hello adds its own grey "▾" (and 15px room for it) to every parent item;
   ours below replaces it. */
.site-navigation ul.menu > li.menu-item-has-children {
    padding-inline-end: 0;
}

.site-navigation ul.menu > li.menu-item-has-children::after {
    content: none;
}

.site-navigation ul.menu > li.menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.site-navigation ul.menu > li.menu-item-has-children > a::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.25s ease;
}

.site-navigation ul.menu > li.menu-item-has-children:hover > a::after,
.site-navigation ul.menu > li.menu-item-has-children:focus-within > a::after {
    transform: translateY(1px) rotate(-135deg);
}

.site-navigation ul.menu .sub-menu {
    position: absolute;
    top: calc(100% + 27px);
    left: -20px;
    z-index: 70;
    min-width: 250px;
    margin: 0;
    padding: 10px 0;
    list-style: none;
    background: var(--Charcoal-Panel, #1b1b1f);
    border: 1px solid rgba(245, 242, 236, 0.09);
    border-top: 2px solid var(--Gold, #b08d4f);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.site-navigation ul.menu .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 29px;
}

.site-navigation ul.menu li:hover > .sub-menu,
.site-navigation ul.menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

/* hello separates sub-items with a 1px #eee line (built for its white panel). */
.site-navigation ul.menu .sub-menu li {
    border-block-end: 1px solid rgba(245, 242, 236, 0.06);
}

.site-navigation ul.menu .sub-menu li:last-child {
    border-block-end: 0;
}

/* hello makes each li a flex row, so the link must grow to fill it or the
   hover highlight only covers the word. */
.site-navigation ul.menu .sub-menu li a {
    position: relative;
    flex-grow: 1;
    padding: 11px 24px;
    font-size: 14px;
    white-space: nowrap;
    color: rgba(245, 242, 236, 0.85);
    transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease;
}

/* Hover / keyboard focus / the page you're on: a gold bar grows on the left
   edge, the label turns gold and steps in, and the row picks up a faint gold
   wash. */
.site-navigation ul.menu .sub-menu li a::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 2px;
    background: var(--Gold, #b08d4f);
    transform: scaleY(0);
    transition: transform 0.2s ease;
}

.site-navigation ul.menu .sub-menu li a:hover,
.site-navigation ul.menu .sub-menu li a:focus-visible,
.site-navigation ul.menu .sub-menu li.current-menu-item > a {
    color: var(--Gold, #b08d4f);
    padding-left: 30px;
}

.site-navigation ul.menu .sub-menu li a:hover,
.site-navigation ul.menu .sub-menu li a:focus-visible {
    background-color: rgba(176, 141, 79, 0.08);
}

.site-navigation ul.menu .sub-menu li a:hover::before,
.site-navigation ul.menu .sub-menu li a:focus-visible::before,
.site-navigation ul.menu .sub-menu li.current-menu-item > a::before {
    transform: scaleY(1);
}

.site-navigation ul.menu .sub-menu li a:focus-visible {
    outline: 1px solid rgba(176, 141, 79, 0.5);
    outline-offset: -1px;
}

@media (prefers-reduced-motion: reduce) {
    .site-navigation ul.menu .sub-menu li a,
    .site-navigation ul.menu .sub-menu li a::before {
        transition: none;
    }
}

/* --- CTA ------------------------------------------------------------------ */

.hbi-header__cta {
    flex: none;
    background: var(--Gold, #b08d4f);
    color: var(--Charcoal, #121214);
    font-family: var(--Heading, sans-serif);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 4px;
    white-space: nowrap;
    text-decoration: none;
    transition: transform 120ms ease-out, background 0.3s ease;
    will-change: transform;
}

.hbi-header__cta:hover {
    background: var(--Gold-Bright, #c9a56a);
    color: var(--Charcoal, #121214);
}

/* --- responsive ----------------------------------------------------------- */

/* hello styles the toggle #494c4f on a light chip, which is invisible on the
   charcoal bar. Its selector is `.site-navigation-toggle-holder .site-navigation-toggle`,
   so this has to be at least as specific to win. The bars are drawn from
   currentColor. */
.site-header .site-navigation-toggle-holder .site-navigation-toggle {
    color: var(--Cream, #f5f2ec);
    background-color: transparent;
}

/* The dropdown panel is white in hello. Note the item rule also has to cover
   .current-menu-item: every fragment link counts as current on this one-pager,
   so hello's grey "current" background would otherwise fill the whole panel. */
.site-navigation-dropdown ul.menu,
.site-navigation-dropdown ul.menu li a,
.site-navigation-dropdown ul.menu li.current-menu-item a {
    background: var(--Charcoal, #121214);
    color: var(--Cream, #f5f2ec);
}

.site-navigation-dropdown ul.menu li a {
    box-shadow: inset 0 -1px 0 rgba(245, 242, 236, 0.08);
    font-family: var(--Heading, sans-serif);
    font-size: 15px;
    font-weight: 500;
}

.site-navigation-dropdown ul.menu li a:hover {
    color: var(--Gold, #b08d4f);
}

/* Mobile menu: sub-items (e.g. the four products) listed indented under their
   parent rather than in a hover panel. Always shown: hello collapses them
   (max-height:0) until the parent is tapped, but that tap also follows the
   parent's link, so they would never be seen. */
.site-navigation-dropdown ul.menu .sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-navigation-dropdown ul.menu > li.menu-item-has-children li {
    max-height: none;
    transform: none;
}

/* With the sub-items the open menu is taller than a small phone, and the
   header is sticky, so the list scrolls inside the space below the header
   (77px) instead of running off-screen. */
.site-navigation-dropdown ul.menu {
    max-height: calc(100vh - 77px);
    max-height: calc(100dvh - 77px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.site-navigation-dropdown ul.menu .sub-menu li a {
    padding-block: 14px;
    padding-left: 40px;
    font-size: 14px;
    color: rgba(245, 242, 236, 0.75);
}

/* hello hides the inline menu itself below 992px via .menu-dropdown-tablet; our
   header has no layout class, so the swap is declared here. */
@media (max-width: 991px) {
    .site-header .site-navigation {
        display: none;
    }
}

@media (min-width: 992px) {
    .site-header .site-navigation-toggle-holder,
    .site-header .site-navigation-dropdown {
        display: none;
    }
}

@media (max-width: 600px) {
    /* Tighter gutter on phones (gutter now lives on .site-header, not the inner). */
    .site-header {
        padding-inline: 20px;
    }

    .site-header .header-inner {
        gap: 16px;
    }

    .hbi-header__logo img {
        height: 44px;
    }

    /* The CTA would crowd the toggle at this width. */
    .hbi-header__cta {
        display: none;
    }
}

/* Footer — markup from template-parts/dynamic-footer.php, which replaces
   hello-elementor's menu-only footer. */
.hbi-footer {
    background: #0d0d0f;
    color: var(--Cream, #f5f2ec);
    border-top: 1px solid rgba(245, 242, 236, 0.08);
    padding: 80px 32px 0;
    overflow: hidden;
    /* Override hello-elementor's 1140px cap so the band spans the viewport and
       its inner blocks can align to the 1280px page grid. */
    max-width: none;
}

/* Oversized ghost wordmark with the gold full stop. Design: clamp(52,9.2vw,124),
   colour #2D2D2D, and an 80px gap to the grid below. clamp + overflow:hidden
   keep it from forcing horizontal overflow on small screens. */
.hbi-footer__ghost {
    font-family: var(--Heading, sans-serif);
    font-weight: 700;
    font-size: clamp(52px, 9.2vw, 124px);
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: #2d2d2d;
    max-width: var(--hbi-max, 1280px);
    margin: 0 auto 80px;
    overflow: hidden;
    user-select: none;
    white-space: nowrap;
}

/* The design's full stop is simply the gold accent at the wordmark's own size. */
.hbi-footer__ghost-dot {
    color: var(--Gold, #b08d4f);
}

/* Proportions taken off the design: the brand column is ~1.6x a link column
   and contact ~1.3x. (An earlier narrower split was compensating for the
   1140px container clamp; with the grid at its proper 1280px the postcode line
   fits without it.) */
.hbi-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: 48px;
    max-width: var(--hbi-max, 1280px);
    margin-inline: auto;
}

/* The logo asset is the light-background lockup: the "HBI" glyphs and the
   "CAPITAL" plate are both #1B1A19, so on charcoal only the white "CAPITAL"
   letters survive. Inverting flips it to the reversed treatment the design
   shows — white HBI, white plate, dark CAPITAL. A proper reversed asset from
   the client would be preferable to a filter. */
.hbi-footer__logo {
    display: block;
    height: 72px;
    width: auto;
    margin: 0;
    filter: invert(1);
}

.hbi-footer__blurb {
    margin: 20px 0 0;
    max-width: 280px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(245, 242, 236, 0.55);
}

/* LinkedIn button from the design's brand column: bordered 38px square with a
   gold glyph, gold border on hover. */
.hbi-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-top: 24px;
    border: 1px solid rgba(245, 242, 236, 0.2);
    border-radius: 6px;
    color: var(--Gold, #b08d4f);
    transition: border-color 0.25s ease, color 0.25s ease;
}

.hbi-footer__social:hover {
    border-color: var(--Gold, #b08d4f);
    color: var(--Gold-Bright, #c9a56a);
}

.hbi-footer__coltitle {
    margin: 0 0 22px;
    font-family: var(--Heading, sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--Gold, #b08d4f);
}

.hbi-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hbi-footer__links a,
.hbi-footer__addr {
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(245, 242, 236, 0.75);
    text-decoration: none;
    font-style: normal;
}

.hbi-footer__links a {
    transition: color 0.25s ease;
}

.hbi-footer__links a:hover {
    color: var(--Gold, #b08d4f);
}

.hbi-footer__addr {
    margin: 0 0 14px;
    line-height: 1.8;
}

.hbi-footer__email {
    font-size: 14.5px;
    color: var(--Gold, #b08d4f);
    text-decoration: none;
}

.hbi-footer__email:hover {
    color: var(--Gold-Bright, #c9a56a);
}

.hbi-footer__phone {
    display: block;
    margin-top: 6px;
    font-size: 14.5px;
    color: var(--Gold, #b08d4f);
    text-decoration: none;
}

.hbi-footer__phone:hover {
    color: var(--Gold-Bright, #c9a56a);
}

.hbi-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    align-items: center;
    justify-content: space-between;
    max-width: var(--hbi-max, 1280px);
    margin: 64px auto 0;
    padding: 24px 0 28px;
    border-block-start: 1px solid var(--Line-Dark, rgba(245, 242, 236, 0.08));
    font-size: 13px;
    color: var(--Cream-45, rgba(245, 242, 236, 0.4));
}

.hbi-footer__legal-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin: 0;
    padding: 0;
}

.hbi-footer__legal-links a {
    font-size: 13px;
    color: var(--Cream-45, rgba(245, 242, 236, 0.45));
    text-decoration: none;
    transition: color 0.25s ease;
}

.hbi-footer__legal-links a:hover {
    color: var(--Cream, #f5f2ec);
}

@media (max-width: 1024px) {
    .hbi-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 600px) {
    .hbi-footer {
        padding-inline: 20px;
    }

    .hbi-footer__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .hbi-footer__legal {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Every override below must carry the .elementor prefix: the desktop values
   come from Global Classes written as `.elementor .h-hero`, and a bare
   `.h-hero` in a media query loses the specificity contest even though it
   loads later. */
@media (max-width: 1024px) {
    .elementor .h-hero {
        font-size: 64px;
    }

    .elementor .h-sec {
        font-size: 40px;
    }

    .elementor .sec {
        padding-block: 88px;
    }

}

/* Small phones (under 375px): the inner-page heroes' clamp(44-46px, …) floor
   is too big for long words; at 320px "refurbishment," (Heavy/Light Refurb)
   was 299px in a 288px column and got cut off. 40px fits every hero there.
   body:not(.home) outranks the per-page `.page-id-N .elementor .h-hero`. */
@media (max-width: 374px) {
    body:not(.home) .elementor .h-hero {
        font-size: 40px;
    }
}

@media (max-width: 767px) {
    .elementor .h-hero {
        font-size: 44px;
    }

    .elementor .h-sec {
        font-size: 32px;
    }

    .elementor .stat-num {
        font-size: 42px;
    }

    .elementor .sec {
        padding-block: 64px;
        padding-inline: 20px;
    }

    .elementor .row {
        gap: 40px;
    }

    /* The hero is a grid now, handled in its own block; only the ticket needs
       to fill the width here. */
    #deal-ticket {
        width: 100%;
        max-width: 100%;
    }

    #hero-ctas,
    #cta .row {
        width: 100%;
    }

    #hero-ctas .btn,
    #hero-ctas .btn-ghost,
    #cta .btn,
    #cta .btn-ghost {
        width: 100%;
        text-align: center;
    }

    #stats {
        gap: 32px;
    }

    /* The rings are fixed-radius, so on a phone the outer two are almost
       entirely off-canvas and only add noise near the edges. Keep the innermost
       only — the rings are one layered background now, so this restates it
       rather than hiding a separate element. */
    #cta::before {
        background-image:
            radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 449px, rgba(176, 141, 79, 0.25) 449px, rgba(176, 141, 79, 0.25) 450px, transparent 450px);
    }

    #quotes > .inner::before {
        font-size: 84px;
        margin-top: 40px;
    }
}

/* Motion is decoration — drop all of it when the user asks. */
@media (prefers-reduced-motion: reduce) {
    /* animation, not transition — matching the reveal implementation above.
       Element hover transitions are left alone deliberately: they are opt-in
       feedback, not motion the page plays at the reader. */
    .hbi-js .hbi-reveal > * {
        opacity: 1;
        transform: none;
        animation: none;
    }

    #ticker-track {
        animation: none !important;
    }

    /* The connector is simply present, not drawn. */
    .hbi-js #how > .inner .grid-3::before,
    .hbi-js #how > .inner.is-inview .grid-3::before {
        transform: none;
        animation: none;
    }

    .btn,
    .btn-ghost,
    .card {
        transition: none;
    }
}

/* ==========================================================================
   ABOUT US PAGE (page-id-73) — inner-page build 2026-08-19
   Section ids are UNIQUE (#top, #about-*) so the homepage's bare #why/#cta
   rules don't leak onto this page. Values from the decoded export
   "1. about-us.html".
   ========================================================================== */

/* Hero (#top) — numeral, photo+wash backdrop (reuses --hbi-img-hero) */
#top::after {
    position: absolute; top: 20px; left: 16px;
    content: "01";
    font-family: var(--Heading, sans-serif);
    font-size: clamp(120px, 13vw, 210px); font-weight: 700; line-height: 0.8;
    letter-spacing: -0.04em; color: var(--Gold, #b08d4f); opacity: 0.08;
    font-variant-numeric: tabular-nums; user-select: none; pointer-events: none;
}
#top {
    position: relative; background-color: var(--Charcoal-Hero, #101012);
    isolation: isolate; padding-block: 0; overflow: hidden;
}
#top::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image:
        linear-gradient(90deg, rgba(18,18,20,0.96) 0%, rgba(18,18,20,0.88) 50%, rgba(18,18,20,0.6) 100%),
        var(--hbi-img-hero);
    background-size: cover, cover;
    background-position: center, 40% 40%;
    background-repeat: no-repeat, no-repeat;
}
#top > .inner { padding: 96px 0 104px; max-width: var(--hbi-max, 1280px); gap: 0; }

/* breadcrumb */
#breadcrumb {
    font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,236,0.45);
}
#breadcrumb #crumb-current { color: var(--Gold, #b08d4f); }

/* hero row: text 1.15 / stat card 0.85, bottom-aligned */
#top .row {
    display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px;
    align-items: end; margin-top: 44px; width: 100%;
}
#top .h-hero {
    font-size: clamp(52px, 7.4vw, 96px); line-height: 0.98; letter-spacing: -0.025em;
    margin: 24px 0 0;
}
#accent-about { color: var(--Gold, #b08d4f); }
#top .lead { font-size: 18px; line-height: 1.65; color: rgba(245,242,236,0.72); max-width: 540px; margin: 28px 0 0; }

/* 2x2 stat card (right column) */
#hero-stats {
    justify-self: end; align-self: end; width: 100%; max-width: 360px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: rgba(245,242,236,0.1);
    border: 1px solid rgba(245,242,236,0.1); border-top: 2px solid var(--Gold, #b08d4f);
    border-radius: 6px; overflow: hidden; padding: 0;
}
#hero-stats > * { background: var(--Charcoal-Panel, #1b1b1f); padding: 22px; gap: 8px; width: auto; flex-direction: column; align-items: flex-start; }
#hero-stats > * > :first-child {
    font-family: var(--Heading, sans-serif); font-size: 30px; font-weight: 700;
    letter-spacing: -0.02em; color: var(--Cream, #f5f2ec);
}
#hero-stats > * > :last-child {
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,242,236,0.5);
}

@media (max-width: 900px) {
    #top .row { grid-template-columns: 1fr; gap: 40px; }
    #hero-stats { justify-self: stretch; max-width: none; }
}

/* --- About: numerals 02-06 (unique ids) + CTA numeral override --- */
#about-why::after, #about-ambition::after, #about-people::after, #about-thinking::after {
    position: absolute; top: 20px; left: 16px; font-family: var(--Heading, sans-serif);
    font-size: clamp(120px, 13vw, 210px); font-weight: 700; line-height: 0.8; letter-spacing: -0.04em;
    color: var(--Gold, #b08d4f); opacity: 0.08; font-variant-numeric: tabular-nums; user-select: none; pointer-events: none;
}
#about-why::after { content: "02"; }
#about-ambition::after { content: "03"; }
#about-people::after { content: "04"; }
#about-thinking::after { content: "05"; }
.page-id-73 #cta::after { content: "06"; }

/* --- About ticker (pure-CSS marquee, two groups) --- */
#about-ticker {
    width: 100%; padding: 13px 0; overflow: hidden; background: #17161a;
    border-top: 1px solid rgba(176,141,79,0.35); border-bottom: 1px solid rgba(176,141,79,0.35);
}
#about-ticker-track { display: flex; width: max-content; gap: 0; padding: 0; animation: hbiTickerAbout 50s linear infinite; }
#about-ticker:hover #about-ticker-track { animation-play-state: paused; }
#about-ticker-track > * {
    display: flex; align-items: center; gap: 40px; padding: 0 40px 0 0; width: auto;
    font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.26em;
    text-transform: uppercase; color: rgba(245,242,236,0.75); white-space: nowrap;
}
#about-ticker-track > * > * { width: auto; margin: 0; }
#about-ticker-track > * > :nth-child(even) { color: var(--Gold, #b08d4f); font-size: 8px; letter-spacing: normal; }
@keyframes hbiTickerAbout { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { #about-ticker-track { animation: none; } }

/* --- Why (#about-why, dark) --- */
#about-why { position: relative; isolation: isolate; background: linear-gradient(180deg, #1a191c 0%, #121214 100%); }
#about-why::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image: linear-gradient(rgba(26,25,28,0.72), rgba(18,18,20,0.86)), var(--hbi-img-tex-a);
    background-size: cover, cover; background-position: center top, center top; background-repeat: no-repeat;
}
#about-why .row { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
#about-why .h-sec { max-width: 520px; }
#about-why .lead { font-size: 17px; line-height: 1.75; color: rgba(245,242,236,0.7); max-width: 520px; }
#about-why .row > .col:last-child { gap: 16px; }
#about-why .row > .col:first-child .link-gold { margin-top: 6px; }
#about-why .card { background: #202024; padding: 28px; gap: 0; }
#about-why .card > :first-child {
    font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--Gold, #b08d4f);
}
#about-why .card .card-title { font-size: 20px; margin: 14px 0 8px; }

/* --- Ambition (#about-ambition, light) --- */
#about-ambition { position: relative; background: #f5f2ec; color: #121214; }
#about-ambition > .inner { gap: 20px; } /* eyebrow -> heading/card row = 20 (design), not the 40 inner default */

/* Classless container flexboxes keep Elementor's .e-flexbox-base 10px padding — zero it. */
#about-portrait, #bio-stats, #thinking-head, #thinking-grid { padding: 0; }
/* The inner global gap (40) stacks with the per-section margins below, so zero it and
   let the explicit margins set the design's eyebrow->heading->content rhythm. */
#about-people > .inner { gap: 0; }
#about-people > .inner > .h-sec { margin-top: 20px; }   /* eyebrow -> h2 (h2 -> row stays 60 via .row margin) */
#about-thinking > .inner { gap: 0; }                     /* head -> grid stays 56 via #thinking-grid margin */
#about-quote > .inner { gap: 0; }                        /* mark->quote 32 / quote->cite 30 via their margins */
#about-ambition .h-sec { color: #121214; max-width: 560px; }
#about-ambition .lead { color: rgba(18,18,20,0.68); font-size: 17px; line-height: 1.75; max-width: 520px; }
/* Single column: the £30m–£50m card was removed, so the copy is centred
   (eyebrow, heading and lead), like the homepage #quotes section. */
#about-ambition .row { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; justify-items: center; }
#about-ambition > .inner { align-items: center; text-align: center; }
#about-ambition .eyebrow { justify-content: center; }
#about-ambition .eyebrow::after { content: ""; inline-size: 24px; block-size: 1px; background: var(--Gold, #b08d4f); flex: none; } /* rule on both sides when centred */
/* Phones: the eyebrow wraps to two lines, which strands the rules at the screen
   edges, so it is plain centred text there. */
@media (max-width: 600px) {
    #about-ambition .eyebrow::before, #about-ambition .eyebrow::after { content: none; }
}
#about-ambition .row > .col { align-items: center; }
#about-ambition .h-sec { margin-inline: auto; }
#about-ambition .lead { margin-inline: auto; max-width: 600px; }
#ambition-card {
    background: #fff; border: 1px solid #e5dfd2; border-radius: 14px; padding: 34px 32px 30px;
    box-shadow: 0 2px 10px rgba(18,18,20,0.05); width: auto; gap: 0; align-self: start; flex-direction: column;
}
/* Zero Elementor's .e-flexbox-base 10px padding on the classless card rows,
   or the progress track renders 20px tall instead of the design's 8px. */
#ambition-card > * { padding: 0; }
#ambition-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 100%; }
#ambition-card-head > * { font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
#ambition-card-head > :first-child { color: rgba(18,18,20,0.5); }
#ambition-card-head > :last-child { color: var(--Gold, #b08d4f); }
#ambition-figure { font-family: var(--Heading, sans-serif); font-size: clamp(44px, 4.4vw, 68px); font-weight: 300; letter-spacing: -0.03em; line-height: 1; margin-top: 22px; color: #121214; font-variant-numeric: tabular-nums; }
#ambition-dash { color: var(--Gold, #b08d4f); }
#ambition-track { position: relative; height: 8px; border-radius: 999px; background: #efe9dc; overflow: hidden; margin-top: 30px; width: 100%; }
#ambition-fill { position: absolute; left: 12%; width: 46%; top: 0; bottom: 0; padding: 0; background: linear-gradient(90deg, #b08d4f, #c9a56a); border-radius: 999px; }
#ambition-scale { display: flex; justify-content: space-between; margin-top: 12px; width: 100%; font-size: 12px; letter-spacing: 0.08em; color: rgba(18,18,20,0.45); }
#ambition-scale > * { width: auto; }
#ambition-note { font-size: 14px; line-height: 1.7; color: rgba(18,18,20,0.6); margin-top: 26px; padding-top: 22px; border-top: 1px solid #efe9dc; }

/* --- People (#about-people, dark) --- */
#about-people { position: relative; background: #121214; color: #f5f2ec; }
#about-people .row { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 5vw, 80px); align-items: center; margin-top: 60px; }
#about-portrait {
    position: relative; aspect-ratio: 4 / 5; width: 100%; overflow: hidden;
    border: 1px solid rgba(245,242,236,0.1); border-top: 2px solid var(--Gold, #b08d4f); border-radius: 10px;
    background: #17171a; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#about-portrait::before { content: ""; position: absolute; inset: 0; background: var(--hbi-img-tex-b) center/cover no-repeat; opacity: 0.22; }
#portrait-mono { position: relative; font-family: var(--Heading, sans-serif); font-size: clamp(56px, 6vw, 84px); font-weight: 200; letter-spacing: -0.03em; color: rgba(176,141,79,0.85); line-height: 1; text-align: center; }
#portrait-note { position: relative; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(245,242,236,0.4); margin-top: 18px; text-align: center; }
/* Taller, darker fade than the placeholder needed: over a bright photo the gold
   role text lost contrast against a plain transparent -> 0.92 ramp. */
#portrait-name {
    position: absolute; left: 0; right: 0; bottom: 0; width: auto; padding: 56px 22px 20px;
    background: linear-gradient(180deg, rgba(13,13,15,0) 0%, rgba(13,13,15,0.78) 55%, rgba(13,13,15,0.95) 100%);
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
/* Founder photo (an Elementor image, swappable in the editor) fills the frame;
   the #portrait-name caption bar, a later sibling, stays on top of it. */
#portrait-photo { position: absolute; inset: 0; padding: 0; }
#portrait-photo > *, #portrait-photo img { display: block; width: 100%; height: 100%; }
#portrait-photo img { object-fit: cover; object-position: center 20%; }
#portrait-name > :first-child { font-family: var(--Heading, sans-serif); font-size: 17px; font-weight: 600; color: #f5f2ec; }
#portrait-name > :last-child { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
/* Phones: name above role (side by side, each wrapped onto two lines). */
@media (max-width: 600px) {
    #portrait-name { flex-direction: column; align-items: flex-start; gap: 4px; }
}
#about-people .lead { font-size: 18px; line-height: 1.75; color: rgba(245,242,236,0.75); max-width: 560px; }
#about-people .lead strong { color: #f5f2ec; font-weight: 600; }
#bio-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 38px; width: 100%; }
#bio-stats > * { border-left: 1px solid rgba(176,141,79,0.4); padding: 4px 0 4px 20px; width: auto; gap: 8px; flex-direction: column; }
#bio-stats > * > :first-child { font-family: var(--Heading, sans-serif); font-size: 16px; font-weight: 600; color: #f5f2ec; }
#bio-stats > * > :last-child { font-size: 14px; line-height: 1.65; color: rgba(245,242,236,0.6); }

/* --- How we think (#about-thinking, light) --- */
#about-thinking { position: relative; background: #fcfaf6; color: #121214; border-top: 1px solid #e8e2d4; }
#thinking-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; width: 100%; }
/* the e-button link defaults to align-self:flex-start, which ignores the row's
   flex-end and floats it up by the eyebrow — pin it back to the heading baseline. */
#thinking-head > :last-child { align-self: flex-end; }
#thinking-head .h-sec { color: #121214; max-width: 640px; }
#thinking-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; margin-top: 56px;
    background: #e8e2d4; border: 1px solid #e8e2d4; border-radius: 14px; overflow: hidden; width: 100%;
}
#thinking-grid > * { background: #fff; padding: 34px 30px 36px; width: auto; gap: 0; flex-direction: column; align-items: flex-start; transition: background 0.3s ease; }
#thinking-grid > *:hover { background: #fffdf8; }
#thinking-grid > * > :first-child { font-family: var(--Heading, sans-serif); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: var(--Gold, #b08d4f); font-variant-numeric: tabular-nums; }
#thinking-grid > * h3 { font-family: var(--Heading, sans-serif); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 20px 0 10px; color: #121214; }
#thinking-grid > * > :last-child { font-size: 14.5px; line-height: 1.7; color: rgba(18,18,20,0.62); }

/* --- Quote (#about-quote, dark) --- */
#about-quote { position: relative; background: #121214; color: #f5f2ec; overflow: hidden; padding-block: 100px; }
#about-quote::before { content: ""; position: absolute; top: auto; left: auto; bottom: -360px; right: -280px; width: 720px; height: 720px; border: 1px solid rgba(176,141,79,0.14); border-radius: 50%; pointer-events: none; }
#about-quote > .inner { max-width: 860px; text-align: center; align-items: center; }
#quote-mark { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 120px; line-height: 0.4; color: var(--Gold, #b08d4f); }
#quote-body { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.4; margin-top: 32px; text-wrap: balance; color: #f5f2ec; }
#quote-cite { margin-top: 30px; font-family: var(--Heading, sans-serif); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,242,236,0.6); }
#quote-name { color: var(--Gold, #b08d4f); }

/* --- About CTA (reuses homepage #cta rings/gradient; page-scoped tweaks) --- */
.page-id-73 #cta > .inner { max-width: 780px; text-align: center; align-items: center; }
#about-cta-h2 { font-size: clamp(40px, 4.6vw, 66px); }
#accent-about-cta { color: var(--Gold, #b08d4f); }
#about-cta-lead { margin: 24px auto 0; }
#about-cta-ctas { justify-content: center; margin-top: 44px; }

@media (max-width: 900px) {
    #about-why .row, #about-ambition .row, #about-people .row { grid-template-columns: 1fr; gap: 40px; }
}

/* ==========================================================================
   Bridging Finance Hub (post 88, #bfh-*) — from 2. bridging-finance-hub.html
   Unique ids so the global sheet does not collide with the homepage / About.
   ========================================================================== */

/* Page-scoped type + the eyebrow dash the design puts before each label. */
.page-id-88 .elementor .h-hero { font-size: clamp(46px, 6.2vw, 84px); line-height: 1.0; letter-spacing: -0.025em; }
.page-id-88 .elementor .h-sec { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; }
.page-id-88 .elementor .inner { position: relative; z-index: 1; }
.page-id-88 .elementor .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; }
.page-id-88 .elementor .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--Gold, #b08d4f); flex: none; }

/* --- Section numerals 01–06 --- */
#bfh-top::after, #bfh-when::after, #bfh-products::after, #bfh-diff::after, #bfh-how::after, #bfh-cta::after {
    position: absolute; top: 20px; left: 16px; font-family: var(--Heading, sans-serif);
    font-size: clamp(120px, 13vw, 210px); font-weight: 700; line-height: 0.8; letter-spacing: -0.04em;
    color: var(--Gold, #b08d4f); opacity: 0.08; font-variant-numeric: tabular-nums; user-select: none; pointer-events: none;
}
#bfh-top::after { content: "01"; }
#bfh-when::after { content: "02"; }
#bfh-products::after { content: "03"; }
#bfh-diff::after { content: "04"; }
#bfh-how::after { content: "05"; }
#bfh-cta::after { content: "06"; }

/* --- 1. Hero #bfh-top --- */
#bfh-top { background: #101012; padding: 96px 32px 104px; overflow: hidden; position: relative; }
#bfh-top::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(90deg, rgba(18,18,20,0.96) 0%, rgba(18,18,20,0.88) 50%, rgba(18,18,20,0.6) 100%), var(--hbi-img-hero);
    background-size: cover, cover; background-position: center, 55% 45%; background-repeat: no-repeat, no-repeat;
}
#bfh-hero-inner { gap: 0; }
#bfh-breadcrumb { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,236,0.45); }
#bfh-breadcrumb a { color: rgba(245,242,236,0.45); text-decoration: none; transition: color 0.25s ease; }
#bfh-breadcrumb a:hover { color: var(--Gold, #b08d4f); }
#bfh-crumb { color: var(--Gold, #b08d4f); }
#bfh-hero-row { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: end; margin-top: 44px; }
#bfh-hero-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#bfh-h1 { margin: 24px 0 0; max-width: 15ch; }
#bfh-accent { color: var(--Gold, #b08d4f); }
#bfh-hero-lead { margin: 28px 0 0; max-width: 560px; color: rgba(245,242,236,0.72); }
#bfh-hero-ctas { padding: 0; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
/* Summary card */
#bfh-summary { padding: 0; flex-direction: column; width: 100%; max-width: 380px; margin-left: auto; background: #1B1B1F; border: 1px solid rgba(245,242,236,0.09); border-top: 2px solid var(--Gold, #b08d4f); border-radius: 6px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
#bfh-sum-head { padding: 16px 22px; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(245,242,236,0.08); }
#bfh-sum-head > :first-child { margin: 0; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
/* :not(:first-child) — the right-hand tag is optional; with only a title the
   title is also :last-child and must keep the gold style above. */
#bfh-sum-head > :last-child:not(:first-child) { margin: 0; font-size: 11px; color: rgba(245,242,236,0.4); font-variant-numeric: tabular-nums; }
#bfh-sum-body { padding: 20px 22px; flex-direction: column; gap: 13px; }
#bfh-sum-body > * { padding: 0; flex-direction: row; justify-content: space-between; gap: 16px; }
/* Labels never wrap; long values wrap instead, balanced across their lines. */
#bfh-sum-body > * > :first-child { margin: 0; font-size: 13px; color: rgba(245,242,236,0.45); flex-shrink: 0; white-space: nowrap; }
#bfh-sum-body > * > :last-child { margin: 0; font-size: 13px; color: #f5f2ec; text-align: right; text-wrap: balance; }
#bfh-sum-body > :last-child > :last-child { color: var(--Gold, #b08d4f); }
#bfh-sum-foot { padding: 14px 22px; flex-direction: row; justify-content: space-between; align-items: center; border-top: 1px dashed rgba(245,242,236,0.14); }
#bfh-sum-foot > * { margin: 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
#bfh-sum-foot > :first-child { color: rgba(245,242,236,0.4); }
#bfh-sum-foot > :last-child { color: var(--Gold, #b08d4f); }

/* --- 2. Ticker #bfh-ticker (reuses @keyframes hbiTickerAbout) --- */
#bfh-ticker { width: 100%; padding: 13px 0; overflow: hidden; background: #17161a; border-top: 1px solid rgba(176,141,79,0.35); border-bottom: 1px solid rgba(176,141,79,0.35); }
#bfh-ticker-track { display: flex; width: max-content; gap: 0; padding: 0; animation: hbiTickerAbout 50s linear infinite; }
#bfh-ticker:hover #bfh-ticker-track { animation-play-state: paused; }
#bfh-ticker-track > * { display: flex; align-items: center; gap: 40px; padding: 0 40px 0 0; width: auto; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(245,242,236,0.75); white-space: nowrap; }
#bfh-ticker-track > * > * { width: auto; margin: 0; }
#bfh-ticker-track > * > :nth-child(even) { color: var(--Gold, #b08d4f); font-size: 8px; letter-spacing: normal; }

/* --- 3. When bridging is the right call #bfh-when (light) --- */
#bfh-when { background: #F5F2EC; color: #121214; padding: 110px 32px; position: relative; }
#bfh-when-inner { gap: 0; }
#bfh-when-row { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
#bfh-when-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#bfh-when-left .h-sec { margin: 20px 0 0; max-width: 560px; color: #121214; }
#bfh-when-left .lead { margin: 22px 0 0; max-width: 540px; font-size: 17px; line-height: 1.75; color: rgba(18,18,20,0.68); }
#bfh-when-list { padding: 0; flex-direction: column; margin-top: 36px; border-top: 1px solid #E5DFD2; width: 100%; }
#bfh-when-list > * { padding: 20px 0; flex-direction: row; gap: 22px; align-items: baseline; border-bottom: 1px solid #E5DFD2; }
#bfh-when-list > * > :first-child { margin: 0; flex: none; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--Gold, #b08d4f); font-variant-numeric: tabular-nums; }
#bfh-when-list > * > :last-child { margin: 0; font-size: 16.5px; line-height: 1.6; color: rgba(18,18,20,0.78); }
#bfh-when-photo { padding: 0; position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; border: 1px solid #E5DFD2; width: 100%; }
#bfh-when-photo > * { width: 100%; height: 100%; padding: 0; }
#bfh-when-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- 4. Products #bfh-products (dark) --- */
#bfh-products { background: #121214; padding: 110px 32px; position: relative; }
#bfh-products-inner { gap: 0; }
#bfh-products-inner .h-sec { margin: 18px 0 0; max-width: 620px; }
#bfh-prod-grid { padding: 0 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 56px; width: 100%; }
#bfh-prod-grid > :nth-child(even) { margin-top: 24px; margin-bottom: -24px; }
/* Single column (phones): no stagger, or the cards alternate 44px gaps with a
   4px overlap. Same reset as the homepage product cards. */
@media (max-width: 640px) { #bfh-prod-grid > :nth-child(even) { margin-top: 0; margin-bottom: 0; } }
#bfh-prod-grid > * { padding: 0; flex-direction: column; background: #17171A; border: 1px solid rgba(245,242,236,0.08); border-radius: 14px; overflow: hidden; color: #f5f2ec; transition: transform 0.3s ease, border-color 0.3s ease; }
#bfh-prod-grid > *:hover { transform: translateY(-6px); border-color: rgba(176,141,79,0.6); }
#bfh-prod-grid > * > :first-child { padding: 0; height: 220px; flex: none; background: #17171A; align-items: center; justify-content: center; overflow: hidden; }
#bfh-prod-grid > * > :first-child > * { width: 100%; height: 100%; padding: 0; }
#bfh-prod-grid > * > :first-child img { width: 100%; height: 100%; object-fit: contain; display: block; }
#bfh-prod-grid > * > :last-child { padding: 24px 24px 26px; flex-direction: column; align-items: flex-start; gap: 0; border-top: 1px solid rgba(176,141,79,0.3); }
#bfh-prod-grid > * > :last-child > :nth-child(1) { margin: 0; font-family: var(--Heading, sans-serif); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: #f5f2ec; }
#bfh-prod-grid > * > :last-child > :nth-child(2) { margin: 10px 0 18px; font-size: 14px; line-height: 1.6; color: rgba(245,242,236,0.65); }
#bfh-prod-grid > * > :last-child > :last-child { align-self: flex-start; font-size: 14px; padding-bottom: 4px; color: var(--Gold, #b08d4f); background-image: linear-gradient(var(--Gold, #b08d4f), var(--Gold, #b08d4f)); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.4s ease; }
#bfh-prod-grid > *:hover > :last-child > :last-child { background-size: 100% 1px; }

/* --- 5. What makes HBI different #bfh-diff (gradient + tex-a) --- */
#bfh-diff { background: linear-gradient(180deg, #1A191C 0%, #121214 100%); padding: 110px 32px; position: relative; isolation: isolate; }
#bfh-diff::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(18,18,20,0.55), rgba(18,18,20,0.72)), var(--hbi-img-tex-a);
    background-size: cover, cover; background-position: center top, center top; background-repeat: no-repeat, no-repeat;
}
#bfh-diff-inner { gap: 0; }
#bfh-diff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
#bfh-diff-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#bfh-diff-left .h-sec { margin: 20px 0 0; max-width: 520px; }
#bfh-diff-left .lead { margin: 24px 0 0; max-width: 520px; font-size: 17px; line-height: 1.75; color: rgba(245,242,236,0.7); }
#bfh-diff-cards { padding: 0; flex-direction: column; gap: 16px; }
#bfh-diff-cards > * { padding: 28px; flex-direction: column; align-items: flex-start; gap: 0; background: #202024; border: 1px solid rgba(245,242,236,0.08); border-radius: 12px; transition: border-color 0.3s ease; }
#bfh-diff-cards > *:hover { border-color: rgba(176,141,79,0.55); }
#bfh-diff-cards > * > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#bfh-diff-cards > * h3 { margin: 14px 0 8px; font-family: var(--Heading, sans-serif); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: #f5f2ec; }
#bfh-diff-cards > * > :last-child { margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(245,242,236,0.62); }

/* --- 6. How a deal moves #bfh-how (light) --- */
#bfh-how { background: #FCFAF6; color: #121214; border-top: 1px solid #E8E2D4; padding: 110px 32px; position: relative; }
#bfh-how-inner { gap: 0; }
#bfh-how-inner .h-sec { margin: 18px 0 0; max-width: 620px; color: #121214; }
#bfh-how-grid { padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 64px; position: relative; width: 100%; }
#bfh-how-grid::before { content: ""; position: absolute; top: 28px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, #B08D4F 12%, #B08D4F 88%, transparent); }
#bfh-how-grid > * { padding: 0; flex-direction: column; align-items: flex-start; position: relative; gap: 0; }
#bfh-how-grid > * > :first-child { margin: 0; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--Gold, #b08d4f); background: #FCFAF6; display: flex; align-items: center; justify-content: center; font-family: var(--Heading, sans-serif); font-weight: 700; font-size: 18px; color: var(--Gold, #b08d4f); font-variant-numeric: tabular-nums; }
#bfh-how-grid > * h3 { margin: 22px 0 10px; font-family: var(--Heading, sans-serif); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #121214; }
#bfh-how-grid > * > :last-child { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(18,18,20,0.65); max-width: 320px; }

/* --- 7. Related #bfh-related (light) --- */
#bfh-related { background: #FCFAF6; color: #121214; border-top: 1px solid #E8E2D4; padding: 80px 32px; }
#bfh-related-inner { gap: 0; }
#bfh-rel-grid { padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 32px; width: 100%; }
#bfh-rel-grid > * { padding: 26px; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; background: #fff; border: 1px solid #E8E2D4; border-radius: 14px; color: #121214; box-shadow: 0 2px 8px rgba(18,18,20,0.05); transition: transform 0.3s ease, border-color 0.3s ease; }
#bfh-rel-grid > *:hover { transform: translateY(-6px); border-color: rgba(176,141,79,0.6); }
#bfh-rel-grid > * > :first-child { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#bfh-rel-grid > * > :first-child > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#bfh-rel-grid > * h3 { margin: 12px 0 0; font-family: var(--Heading, sans-serif); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: #121214; }
#bfh-rel-grid > * .link-gold { font-size: 14px; }

/* --- 8. CTA #bfh-cta (radial + tex-a + rings) --- */
#bfh-cta { background: radial-gradient(900px 500px at 50% 120%, #201D18 0%, #121214 65%); color: #f5f2ec; padding: 130px 32px; position: relative; overflow: hidden; border-top: 1px solid rgba(176,141,79,0.25); isolation: isolate; }
/* Texture behind the rings (z-index -2 so the ring layer above it paints at
   full opacity — with the tex between two separate ring divs, one ring got
   dimmed and they looked uneven/broken). */
#bfh-cta-tex { padding: 0; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: var(--hbi-img-tex-a); background-size: cover; background-position: center bottom; background-repeat: no-repeat; opacity: 0.3; transform: scaleY(-1); }
/* Two concentric rings (design radii 450 / 530, centred 30px below the bottom
   edge) painted as radial-gradient stops on ONE layer — same fix as #cta:
   separate positioned circle elements resolved offsets against different boxes
   and the arcs came out wrong. */
#bfh-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 449px, rgba(176, 141, 79, 0.25) 449px, rgba(176, 141, 79, 0.25) 450px, transparent 450px),
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 529px, rgba(176, 141, 79, 0.15) 529px, rgba(176, 141, 79, 0.15) 530px, transparent 530px);
}
#bfh-cta-ring2 { display: none; }
#bfh-cta-inner { max-width: 780px; text-align: center; align-items: center; gap: 0; position: relative; z-index: 1; }
#bfh-cta-h2 { margin: 0; font-size: clamp(38px, 4.4vw, 62px); letter-spacing: -0.03em; line-height: 1.06; }
#bfh-cta-lead { margin: 24px auto 0; max-width: 520px; color: rgba(245,242,236,0.72); text-align: center; }
#bfh-cta-ctas { padding: 0; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 44px; }

/* --- Responsive --- */
@media (max-width: 900px) {
    #bfh-hero-row, #bfh-when-row, #bfh-diff-row { grid-template-columns: 1fr; gap: 40px; }
    #bfh-how-grid { grid-template-columns: 1fr; gap: 40px; }
    #bfh-how-grid::before { display: none; }
    #bfh-summary { margin-left: 0; }
}

/* ==========================================================================
   Bridging Loans (post 98, #bl-*) — from 2a. bridging-loans.html
   Six sections reuse the #bfh-* archetypes; #bl-proof is the new one.
   ========================================================================== */

.page-id-98 .elementor .h-hero { font-size: clamp(46px, 6.2vw, 84px); line-height: 1.0; letter-spacing: -0.025em; }
.page-id-98 .elementor .h-sec { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; }
.page-id-98 .elementor .inner { position: relative; z-index: 1; }
.page-id-98 .elementor .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; }
.page-id-98 .elementor .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--Gold, #b08d4f); flex: none; }

/* Numerals 01–06 */
#bl-top::after, #bl-situation::after, #bl-offer::after, #bl-how::after, #bl-proof::after, #bl-cta::after {
    position: absolute; top: 20px; left: 16px; font-family: var(--Heading, sans-serif);
    font-size: clamp(120px, 13vw, 210px); font-weight: 700; line-height: 0.8; letter-spacing: -0.04em;
    color: var(--Gold, #b08d4f); opacity: 0.08; font-variant-numeric: tabular-nums; user-select: none; pointer-events: none;
}
#bl-top::after { content: "01"; }
#bl-situation::after { content: "02"; }
#bl-offer::after { content: "03"; }
#bl-how::after { content: "04"; }
#bl-proof::after { content: "05"; }
#bl-cta::after { content: "06"; }

/* --- 1. Hero #bl-top --- */
#bl-top { background: #101012; padding: 96px 32px 104px; overflow: hidden; position: relative; }
#bl-top::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(90deg, rgba(18,18,20,0.96) 0%, rgba(18,18,20,0.88) 50%, rgba(18,18,20,0.6) 100%), var(--hbi-img-hero);
    background-size: cover, cover; background-position: center, 35% 50%; background-repeat: no-repeat, no-repeat;
}
#bl-hero-inner { gap: 0; }
#bl-breadcrumb { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,236,0.45); }
#bl-breadcrumb a { color: rgba(245,242,236,0.45); text-decoration: none; transition: color 0.25s ease; }
#bl-breadcrumb a:hover { color: var(--Gold, #b08d4f); }
#bl-crumb { color: var(--Gold, #b08d4f); }
#bl-hero-row { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: end; margin-top: 44px; }
#bl-hero-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#bl-h1 { margin: 24px 0 0; max-width: 15ch; }
#bl-accent { color: var(--Gold, #b08d4f); }
#bl-hero-lead { margin: 28px 0 0; max-width: 560px; color: rgba(245,242,236,0.72); }
#bl-hero-ctas { padding: 0; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
#bl-summary { padding: 0; flex-direction: column; width: 100%; max-width: 380px; margin-left: auto; background: #1B1B1F; border: 1px solid rgba(245,242,236,0.09); border-top: 2px solid var(--Gold, #b08d4f); border-radius: 6px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
#bl-sum-head { padding: 16px 22px; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(245,242,236,0.08); }
#bl-sum-head > :first-child { margin: 0; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#bl-sum-head > :last-child { margin: 0; font-size: 11px; color: rgba(245,242,236,0.4); font-variant-numeric: tabular-nums; }
#bl-sum-body { padding: 20px 22px; flex-direction: column; gap: 13px; }
#bl-sum-body > * { padding: 0; flex-direction: row; justify-content: space-between; gap: 16px; }
#bl-sum-body > * > :first-child { margin: 0; font-size: 13px; color: rgba(245,242,236,0.45); }
#bl-sum-body > * > :last-child { margin: 0; font-size: 13px; color: #f5f2ec; text-align: right; }
#bl-sum-body > :last-child > :last-child { color: var(--Gold, #b08d4f); }
#bl-sum-foot { padding: 14px 22px; flex-direction: row; justify-content: space-between; align-items: center; border-top: 1px dashed rgba(245,242,236,0.14); }
#bl-sum-foot > * { margin: 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
#bl-sum-foot > :first-child { color: rgba(245,242,236,0.4); }
#bl-sum-foot > :last-child { color: var(--Gold, #b08d4f); }

/* --- 2. Ticker #bl-ticker --- */
#bl-ticker { width: 100%; padding: 13px 0; overflow: hidden; background: #17161a; border-top: 1px solid rgba(176,141,79,0.35); border-bottom: 1px solid rgba(176,141,79,0.35); }
#bl-ticker-track { display: flex; width: max-content; gap: 0; padding: 0; animation: hbiTickerAbout 50s linear infinite; }
#bl-ticker:hover #bl-ticker-track { animation-play-state: paused; }
#bl-ticker-track > * { display: flex; align-items: center; gap: 40px; padding: 0 40px 0 0; width: auto; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(245,242,236,0.75); white-space: nowrap; }
#bl-ticker-track > * > * { width: auto; margin: 0; }
#bl-ticker-track > * > :nth-child(even) { color: var(--Gold, #b08d4f); font-size: 8px; letter-spacing: normal; }

/* --- 3. The situation #bl-situation (dark gradient + tex-a) --- */
#bl-situation { background: linear-gradient(180deg, #1A191C 0%, #121214 100%); padding: 110px 32px; position: relative; isolation: isolate; }
#bl-situation::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(18,18,20,0.55), rgba(18,18,20,0.72)), var(--hbi-img-tex-a);
    background-size: cover, cover; background-position: center top, center top; background-repeat: no-repeat, no-repeat;
}
#bl-situation-inner { gap: 0; }
#bl-situation-row { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
#bl-situation-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#bl-situation-left .h-sec { margin: 20px 0 0; max-width: 520px; }
#bl-situation-left .lead { margin: 24px 0 0; max-width: 520px; font-size: 17px; line-height: 1.75; color: rgba(245,242,236,0.7); }
#bl-situation-cards { padding: 0; flex-direction: column; gap: 16px; }
#bl-situation-cards > * { padding: 28px; flex-direction: column; align-items: flex-start; gap: 0; background: #202024; border: 1px solid rgba(245,242,236,0.08); border-radius: 12px; transition: border-color 0.3s ease; }
#bl-situation-cards > *:hover { border-color: rgba(176,141,79,0.55); }
#bl-situation-cards > * > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#bl-situation-cards > * h3 { margin: 14px 0 8px; font-family: var(--Heading, sans-serif); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: #f5f2ec; }
#bl-situation-cards > * > :last-child { margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(245,242,236,0.62); }

/* --- 4. What we offer #bl-offer (light) --- */
#bl-offer { background: #F5F2EC; color: #121214; padding: 110px 32px; position: relative; }
#bl-offer-inner { gap: 0; }
#bl-offer-row { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
#bl-offer-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#bl-offer-left .h-sec { margin: 20px 0 0; max-width: 560px; color: #121214; }
#bl-offer-list { padding: 0; flex-direction: column; margin-top: 36px; border-top: 1px solid #E5DFD2; width: 100%; }
#bl-offer-list > * { padding: 20px 0; flex-direction: row; gap: 22px; align-items: baseline; border-bottom: 1px solid #E5DFD2; }
#bl-offer-list > * > :first-child { margin: 0; flex: none; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--Gold, #b08d4f); font-variant-numeric: tabular-nums; }
#bl-offer-list > * > :last-child { margin: 0; font-size: 16.5px; line-height: 1.6; color: rgba(18,18,20,0.78); }
#bl-offer-photo { padding: 0; position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; border: 1px solid #E5DFD2; width: 100%; }
#bl-offer-photo > * { width: 100%; height: 100%; padding: 0; }
#bl-offer-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- 5. How it works #bl-how (light) --- */
#bl-how { background: #FCFAF6; color: #121214; border-top: 1px solid #E8E2D4; padding: 110px 32px; position: relative; }
#bl-how-inner { gap: 0; }
#bl-how-inner .h-sec { margin: 18px 0 0; max-width: 620px; color: #121214; }
#bl-how-grid { padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 64px; position: relative; width: 100%; }
#bl-how-grid::before { content: ""; position: absolute; top: 28px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, #B08D4F 12%, #B08D4F 88%, transparent); }
#bl-how-grid > * { padding: 0; flex-direction: column; align-items: flex-start; position: relative; gap: 0; }
#bl-how-grid > * > :first-child { margin: 0; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--Gold, #b08d4f); background: #FCFAF6; display: flex; align-items: center; justify-content: center; font-family: var(--Heading, sans-serif); font-weight: 700; font-size: 18px; color: var(--Gold, #b08d4f); font-variant-numeric: tabular-nums; }
#bl-how-grid > * h3 { margin: 22px 0 10px; font-family: var(--Heading, sans-serif); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #121214; }
#bl-how-grid > * > :last-child { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(18,18,20,0.65); max-width: 320px; }

/* --- 6. Proof #bl-proof (dark) — NEW --- */
#bl-proof { background: #121214; color: #f5f2ec; padding: 110px 32px; position: relative; }
#bl-proof-inner { gap: 0; }
#bl-proof-row { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 4.5vw, 72px); align-items: center; }
#bl-proof-photo { padding: 0; position: relative; aspect-ratio: 16 / 11; border-radius: 14px; overflow: hidden; width: 100%; }
#bl-proof-photo > :first-child { width: 100%; height: 100%; padding: 0; }
#bl-proof-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#bl-proof-badge { position: absolute; top: 14px; left: 14px; margin: 0; width: auto; background: rgba(18,18,20,0.75); backdrop-filter: blur(6px); border: 1px solid rgba(176,141,79,0.6); color: var(--Gold, #b08d4f); font-family: var(--Heading, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
#bl-proof-content { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#bl-proof-h2 { margin: 20px 0 0; max-width: 520px; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.15; }
#bl-proof-lead { margin: 20px 0 0; max-width: 520px; font-size: 16.5px; line-height: 1.75; color: rgba(245,242,236,0.7); }
#bl-proof-stats { padding: 0; flex-direction: row; gap: 40px; flex-wrap: wrap; margin-top: 32px; width: 100%; }
#bl-proof-stats > * { padding: 0 0 0 20px; flex-direction: column; align-items: flex-start; gap: 0; width: auto; border-left: 1px solid rgba(176,141,79,0.4); }
#bl-proof-stats > * > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; color: #f5f2ec; }
#bl-proof-stats > * > :last-child { margin: 10px 0 0; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,242,236,0.55); }
#bl-proof-quote { margin: 36px 0 0; padding-left: 22px; border-left: 2px solid rgba(176,141,79,0.5); max-width: 520px; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.45; color: #f5f2ec; }
#bl-proof-cite { margin: 16px 0 0; padding-left: 22px; font-family: var(--Heading, sans-serif); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,242,236,0.55); }
#bl-proof-caselink { align-self: flex-start; margin-top: 30px; font-size: 15px; padding-bottom: 4px; color: var(--Gold, #b08d4f); background-image: linear-gradient(var(--Gold, #b08d4f), var(--Gold, #b08d4f)); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.4s ease; }
#bl-proof-caselink:hover { background-size: 100% 1px; }

/* --- 7. Related #bl-related (light) --- */
#bl-related { background: #FCFAF6; color: #121214; border-top: 1px solid #E8E2D4; padding: 80px 32px; }
#bl-related-inner { gap: 0; }
#bl-rel-grid { padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 32px; width: 100%; }
#bl-rel-grid > * { padding: 26px; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; background: #fff; border: 1px solid #E8E2D4; border-radius: 14px; color: #121214; box-shadow: 0 2px 8px rgba(18,18,20,0.05); transition: transform 0.3s ease, border-color 0.3s ease; }
#bl-rel-grid > *:hover { transform: translateY(-6px); border-color: rgba(176,141,79,0.6); }
#bl-rel-grid > * > :first-child { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#bl-rel-grid > * > :first-child > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#bl-rel-grid > * h3 { margin: 12px 0 0; font-family: var(--Heading, sans-serif); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: #121214; }
#bl-rel-grid > * .link-gold { font-size: 14px; }

/* --- 8. CTA #bl-cta (radial + tex-a + rings, radial-gradient technique) --- */
#bl-cta { background: radial-gradient(900px 500px at 50% 120%, #201D18 0%, #121214 65%); color: #f5f2ec; padding: 130px 32px; position: relative; overflow: hidden; border-top: 1px solid rgba(176,141,79,0.25); isolation: isolate; }
#bl-cta-tex { padding: 0; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: var(--hbi-img-tex-a); background-size: cover; background-position: center bottom; background-repeat: no-repeat; opacity: 0.3; transform: scaleY(-1); }
#bl-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 449px, rgba(176, 141, 79, 0.25) 449px, rgba(176, 141, 79, 0.25) 450px, transparent 450px),
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 529px, rgba(176, 141, 79, 0.15) 529px, rgba(176, 141, 79, 0.15) 530px, transparent 530px);
}
#bl-cta-inner { max-width: 780px; text-align: center; align-items: center; gap: 0; position: relative; z-index: 1; }
#bl-cta-h2 { margin: 0; font-size: clamp(38px, 4.4vw, 62px); letter-spacing: -0.03em; line-height: 1.06; }
#bl-cta-lead { margin: 24px auto 0; max-width: 520px; color: rgba(245,242,236,0.72); text-align: center; }
#bl-cta-ctas { padding: 0; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 44px; }

/* --- Responsive --- */
@media (max-width: 900px) {
    #bl-hero-row, #bl-situation-row, #bl-offer-row, #bl-proof-row { grid-template-columns: 1fr; gap: 40px; }
    #bl-how-grid { grid-template-columns: 1fr; gap: 40px; }
    #bl-how-grid::before { display: none; }
    #bl-summary { margin-left: 0; }
}

/* ==========================================================================
   Development Exit Finance (post 108, #dxf-*) — from 2b. …-exit-finance.html
   Product-page template, same archetypes as Bridging Loans (#bl-*); the
   "Where it fits" block (#dxf-fits) keeps a lead paragraph.
   ========================================================================== */

.page-id-108 .elementor .h-hero { font-size: clamp(46px, 6.2vw, 84px); line-height: 1.0; letter-spacing: -0.025em; }
.page-id-108 .elementor .h-sec { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; }
.page-id-108 .elementor .inner { position: relative; z-index: 1; }
.page-id-108 .elementor .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; }
.page-id-108 .elementor .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--Gold, #b08d4f); flex: none; }

/* Numerals 01–06 */
#dxf-top::after, #dxf-situation::after, #dxf-fits::after, #dxf-how::after, #dxf-proof::after, #dxf-cta::after {
    position: absolute; top: 20px; left: 16px; font-family: var(--Heading, sans-serif);
    font-size: clamp(120px, 13vw, 210px); font-weight: 700; line-height: 0.8; letter-spacing: -0.04em;
    color: var(--Gold, #b08d4f); opacity: 0.08; font-variant-numeric: tabular-nums; user-select: none; pointer-events: none;
}
#dxf-top::after { content: "01"; }
#dxf-situation::after { content: "02"; }
#dxf-fits::after { content: "03"; }
#dxf-how::after { content: "04"; }
#dxf-proof::after { content: "05"; }
#dxf-cta::after { content: "06"; }

/* --- 1. Hero #dxf-top --- */
#dxf-top { background: #101012; padding: 96px 32px 104px; overflow: hidden; position: relative; }
#dxf-top::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(90deg, rgba(18,18,20,0.96) 0%, rgba(18,18,20,0.88) 50%, rgba(18,18,20,0.6) 100%), var(--hbi-img-hero);
    background-size: cover, cover; background-position: center, 60% 40%; background-repeat: no-repeat, no-repeat;
}
#dxf-hero-inner { gap: 0; }
#dxf-breadcrumb { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,236,0.45); }
#dxf-breadcrumb a { color: rgba(245,242,236,0.45); text-decoration: none; transition: color 0.25s ease; }
#dxf-breadcrumb a:hover { color: var(--Gold, #b08d4f); }
#dxf-crumb { color: var(--Gold, #b08d4f); }
#dxf-hero-row { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: end; margin-top: 44px; }
#dxf-hero-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#dxf-h1 { margin: 24px 0 0; max-width: 15ch; }
#dxf-accent { color: var(--Gold, #b08d4f); }
#dxf-hero-lead { margin: 28px 0 0; max-width: 560px; color: rgba(245,242,236,0.72); }
#dxf-hero-ctas { padding: 0; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
#dxf-summary { padding: 0; flex-direction: column; width: 100%; max-width: 380px; margin-left: auto; background: #1B1B1F; border: 1px solid rgba(245,242,236,0.09); border-top: 2px solid var(--Gold, #b08d4f); border-radius: 6px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
#dxf-sum-head { padding: 16px 22px; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(245,242,236,0.08); }
#dxf-sum-head > :first-child { margin: 0; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#dxf-sum-head > :last-child { margin: 0; font-size: 11px; color: rgba(245,242,236,0.4); font-variant-numeric: tabular-nums; }
#dxf-sum-body { padding: 20px 22px; flex-direction: column; gap: 13px; }
#dxf-sum-body > * { padding: 0; flex-direction: row; justify-content: space-between; gap: 16px; }
#dxf-sum-body > * > :first-child { margin: 0; font-size: 13px; color: rgba(245,242,236,0.45); }
#dxf-sum-body > * > :last-child { margin: 0; font-size: 13px; color: #f5f2ec; text-align: right; }
#dxf-sum-body > :last-child > :last-child { color: var(--Gold, #b08d4f); }
#dxf-sum-foot { padding: 14px 22px; flex-direction: row; justify-content: space-between; align-items: center; border-top: 1px dashed rgba(245,242,236,0.14); }
#dxf-sum-foot > * { margin: 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
#dxf-sum-foot > :first-child { color: rgba(245,242,236,0.4); }
#dxf-sum-foot > :last-child { color: var(--Gold, #b08d4f); }

/* --- 2. Ticker #dxf-ticker --- */
#dxf-ticker { width: 100%; padding: 13px 0; overflow: hidden; background: #17161a; border-top: 1px solid rgba(176,141,79,0.35); border-bottom: 1px solid rgba(176,141,79,0.35); }
#dxf-ticker-track { display: flex; width: max-content; gap: 0; padding: 0; animation: hbiTickerAbout 50s linear infinite; }
#dxf-ticker:hover #dxf-ticker-track { animation-play-state: paused; }
#dxf-ticker-track > * { display: flex; align-items: center; gap: 40px; padding: 0 40px 0 0; width: auto; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(245,242,236,0.75); white-space: nowrap; }
#dxf-ticker-track > * > * { width: auto; margin: 0; }
#dxf-ticker-track > * > :nth-child(even) { color: var(--Gold, #b08d4f); font-size: 8px; letter-spacing: normal; }

/* --- 3. The situation #dxf-situation (dark gradient + tex-a) --- */
#dxf-situation { background: linear-gradient(180deg, #1A191C 0%, #121214 100%); padding: 110px 32px; position: relative; isolation: isolate; }
#dxf-situation::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(18,18,20,0.55), rgba(18,18,20,0.72)), var(--hbi-img-tex-a);
    background-size: cover, cover; background-position: center top, center top; background-repeat: no-repeat, no-repeat;
}
#dxf-situation-inner { gap: 0; }
#dxf-situation-row { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
#dxf-situation-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#dxf-situation-left .h-sec { margin: 20px 0 0; max-width: 520px; }
#dxf-situation-left .lead { margin: 24px 0 0; max-width: 520px; font-size: 17px; line-height: 1.75; color: rgba(245,242,236,0.7); }
#dxf-situation-cards { padding: 0; flex-direction: column; gap: 16px; }
#dxf-situation-cards > * { padding: 28px; flex-direction: column; align-items: flex-start; gap: 0; background: #202024; border: 1px solid rgba(245,242,236,0.08); border-radius: 12px; transition: border-color 0.3s ease; }
#dxf-situation-cards > *:hover { border-color: rgba(176,141,79,0.55); }
#dxf-situation-cards > * > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#dxf-situation-cards > * h3 { margin: 14px 0 8px; font-family: var(--Heading, sans-serif); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: #f5f2ec; }
#dxf-situation-cards > * > :last-child { margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(245,242,236,0.62); }

/* --- 4. Where it fits #dxf-fits (light, lead + list) --- */
#dxf-fits { background: #F5F2EC; color: #121214; padding: 110px 32px; position: relative; }
#dxf-fits-inner { gap: 0; }
#dxf-fits-row { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
#dxf-fits-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#dxf-fits-left .h-sec { margin: 20px 0 0; max-width: 560px; color: #121214; }
#dxf-fits-left .lead { margin: 22px 0 0; max-width: 540px; font-size: 17px; line-height: 1.75; color: rgba(18,18,20,0.68); }
#dxf-fits-list { padding: 0; flex-direction: column; margin-top: 36px; border-top: 1px solid #E5DFD2; width: 100%; }
#dxf-fits-list > * { padding: 20px 0; flex-direction: row; gap: 22px; align-items: baseline; border-bottom: 1px solid #E5DFD2; }
#dxf-fits-list > * > :first-child { margin: 0; flex: none; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--Gold, #b08d4f); font-variant-numeric: tabular-nums; }
#dxf-fits-list > * > :last-child { margin: 0; font-size: 16.5px; line-height: 1.6; color: rgba(18,18,20,0.78); }
#dxf-fits-photo { padding: 0; position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; border: 1px solid #E5DFD2; width: 100%; }
#dxf-fits-photo > * { width: 100%; height: 100%; padding: 0; }
#dxf-fits-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- 5. How it works #dxf-how (light) --- */
#dxf-how { background: #FCFAF6; color: #121214; border-top: 1px solid #E8E2D4; padding: 110px 32px; position: relative; }
#dxf-how-inner { gap: 0; }
#dxf-how-inner .h-sec { margin: 18px 0 0; max-width: 620px; color: #121214; }
#dxf-how-grid { padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 64px; position: relative; width: 100%; }
#dxf-how-grid::before { content: ""; position: absolute; top: 28px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, #B08D4F 12%, #B08D4F 88%, transparent); }
#dxf-how-grid > * { padding: 0; flex-direction: column; align-items: flex-start; position: relative; gap: 0; }
#dxf-how-grid > * > :first-child { margin: 0; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--Gold, #b08d4f); background: #FCFAF6; display: flex; align-items: center; justify-content: center; font-family: var(--Heading, sans-serif); font-weight: 700; font-size: 18px; color: var(--Gold, #b08d4f); font-variant-numeric: tabular-nums; }
#dxf-how-grid > * h3 { margin: 22px 0 10px; font-family: var(--Heading, sans-serif); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #121214; }
#dxf-how-grid > * > :last-child { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(18,18,20,0.65); max-width: 320px; }

/* --- 6. Proof #dxf-proof (dark) --- */
#dxf-proof { background: #121214; color: #f5f2ec; padding: 110px 32px; position: relative; }
#dxf-proof-inner { gap: 0; }
#dxf-proof-row { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 4.5vw, 72px); align-items: center; }
#dxf-proof-photo { padding: 0; position: relative; aspect-ratio: 16 / 11; border-radius: 14px; overflow: hidden; width: 100%; }
#dxf-proof-photo > :first-child { width: 100%; height: 100%; padding: 0; }
#dxf-proof-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#dxf-proof-badge { position: absolute; top: 14px; left: 14px; margin: 0; width: auto; background: rgba(18,18,20,0.75); backdrop-filter: blur(6px); border: 1px solid rgba(176,141,79,0.6); color: var(--Gold, #b08d4f); font-family: var(--Heading, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
#dxf-proof-content { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#dxf-proof-h2 { margin: 20px 0 0; max-width: 520px; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.15; }
#dxf-proof-lead { margin: 20px 0 0; max-width: 520px; font-size: 16.5px; line-height: 1.75; color: rgba(245,242,236,0.7); }
#dxf-proof-stats { padding: 0; flex-direction: row; gap: 40px; flex-wrap: wrap; margin-top: 32px; width: 100%; }
#dxf-proof-stats > * { padding: 0 0 0 20px; flex-direction: column; align-items: flex-start; gap: 0; width: auto; border-left: 1px solid rgba(176,141,79,0.4); }
#dxf-proof-stats > * > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; color: #f5f2ec; }
#dxf-proof-stats > * > :last-child { margin: 10px 0 0; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,242,236,0.55); }
#dxf-proof-quote { margin: 36px 0 0; padding-left: 22px; border-left: 2px solid rgba(176,141,79,0.5); max-width: 520px; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.45; color: #f5f2ec; }
#dxf-proof-cite { margin: 16px 0 0; padding-left: 22px; font-family: var(--Heading, sans-serif); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,242,236,0.55); }
#dxf-proof-caselink { align-self: flex-start; margin-top: 30px; font-size: 15px; padding-bottom: 4px; color: var(--Gold, #b08d4f); background-image: linear-gradient(var(--Gold, #b08d4f), var(--Gold, #b08d4f)); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.4s ease; }
#dxf-proof-caselink:hover { background-size: 100% 1px; }

/* --- 7. Related #dxf-related (light) --- */
#dxf-related { background: #FCFAF6; color: #121214; border-top: 1px solid #E8E2D4; padding: 80px 32px; }
#dxf-related-inner { gap: 0; }
#dxf-rel-grid { padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 32px; width: 100%; }
#dxf-rel-grid > * { padding: 26px; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; background: #fff; border: 1px solid #E8E2D4; border-radius: 14px; color: #121214; box-shadow: 0 2px 8px rgba(18,18,20,0.05); transition: transform 0.3s ease, border-color 0.3s ease; }
#dxf-rel-grid > *:hover { transform: translateY(-6px); border-color: rgba(176,141,79,0.6); }
#dxf-rel-grid > * > :first-child { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#dxf-rel-grid > * > :first-child > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#dxf-rel-grid > * h3 { margin: 12px 0 0; font-family: var(--Heading, sans-serif); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: #121214; }
#dxf-rel-grid > * .link-gold { font-size: 14px; }

/* --- 8. CTA #dxf-cta (radial + tex-a + rings) --- */
#dxf-cta { background: radial-gradient(900px 500px at 50% 120%, #201D18 0%, #121214 65%); color: #f5f2ec; padding: 130px 32px; position: relative; overflow: hidden; border-top: 1px solid rgba(176,141,79,0.25); isolation: isolate; }
#dxf-cta-tex { padding: 0; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: var(--hbi-img-tex-a); background-size: cover; background-position: center bottom; background-repeat: no-repeat; opacity: 0.3; transform: scaleY(-1); }
#dxf-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 449px, rgba(176, 141, 79, 0.25) 449px, rgba(176, 141, 79, 0.25) 450px, transparent 450px),
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 529px, rgba(176, 141, 79, 0.15) 529px, rgba(176, 141, 79, 0.15) 530px, transparent 530px);
}
#dxf-cta-inner { max-width: 780px; text-align: center; align-items: center; gap: 0; position: relative; z-index: 1; }
#dxf-cta-h2 { margin: 0; font-size: clamp(38px, 4.4vw, 62px); letter-spacing: -0.03em; line-height: 1.06; }
#dxf-cta-lead { margin: 24px auto 0; max-width: 520px; color: rgba(245,242,236,0.72); text-align: center; }
#dxf-cta-ctas { padding: 0; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 44px; }

/* --- Responsive --- */
@media (max-width: 900px) {
    #dxf-hero-row, #dxf-situation-row, #dxf-fits-row, #dxf-proof-row { grid-template-columns: 1fr; gap: 40px; }
    #dxf-how-grid { grid-template-columns: 1fr; gap: 40px; }
    #dxf-how-grid::before { display: none; }
    #dxf-summary { margin-left: 0; }
}

/* ==========================================================================
   Second Charge Bridging (post 127, #scb-*) — from 2c. second-charge-bridging
   Product-page template. "Where it fits" has NO lead; the summary card's gold
   value is on row 4 (First charge / Left in place), not the last row.
   ========================================================================== */

.page-id-127 .elementor .h-hero { font-size: clamp(46px, 6.2vw, 84px); line-height: 1.0; letter-spacing: -0.025em; }
.page-id-127 .elementor .h-sec { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; }
.page-id-127 .elementor .inner { position: relative; z-index: 1; }
.page-id-127 .elementor .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; }
.page-id-127 .elementor .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--Gold, #b08d4f); flex: none; }

/* Numerals 01–06 */
#scb-top::after, #scb-situation::after, #scb-fits::after, #scb-how::after, #scb-proof::after, #scb-cta::after {
    position: absolute; top: 20px; left: 16px; font-family: var(--Heading, sans-serif);
    font-size: clamp(120px, 13vw, 210px); font-weight: 700; line-height: 0.8; letter-spacing: -0.04em;
    color: var(--Gold, #b08d4f); opacity: 0.08; font-variant-numeric: tabular-nums; user-select: none; pointer-events: none;
}
#scb-top::after { content: "01"; }
#scb-situation::after { content: "02"; }
#scb-fits::after { content: "03"; }
#scb-how::after { content: "04"; }
#scb-proof::after { content: "05"; }
#scb-cta::after { content: "06"; }

/* --- 1. Hero #scb-top --- */
#scb-top { background: #101012; padding: 96px 32px 104px; overflow: hidden; position: relative; }
#scb-top::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(90deg, rgba(18,18,20,0.96) 0%, rgba(18,18,20,0.88) 50%, rgba(18,18,20,0.6) 100%), var(--hbi-img-hero);
    background-size: cover, cover; background-position: center, 50% 45%; background-repeat: no-repeat, no-repeat;
}
#scb-hero-inner { gap: 0; }
#scb-breadcrumb { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,236,0.45); }
#scb-breadcrumb a { color: rgba(245,242,236,0.45); text-decoration: none; transition: color 0.25s ease; }
#scb-breadcrumb a:hover { color: var(--Gold, #b08d4f); }
#scb-crumb { color: var(--Gold, #b08d4f); }
#scb-hero-row { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: end; margin-top: 44px; }
#scb-hero-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#scb-h1 { margin: 24px 0 0; max-width: 15ch; }
#scb-accent { color: var(--Gold, #b08d4f); }
#scb-hero-lead { margin: 28px 0 0; max-width: 560px; color: rgba(245,242,236,0.72); }
#scb-hero-ctas { padding: 0; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
#scb-summary { padding: 0; flex-direction: column; width: 100%; max-width: 380px; margin-left: auto; background: #1B1B1F; border: 1px solid rgba(245,242,236,0.09); border-top: 2px solid var(--Gold, #b08d4f); border-radius: 6px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
#scb-sum-head { padding: 16px 22px; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(245,242,236,0.08); }
#scb-sum-head > :first-child { margin: 0; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#scb-sum-head > :last-child { margin: 0; font-size: 11px; color: rgba(245,242,236,0.4); font-variant-numeric: tabular-nums; }
#scb-sum-body { padding: 20px 22px; flex-direction: column; gap: 13px; }
#scb-sum-body > * { padding: 0; flex-direction: row; justify-content: space-between; gap: 16px; }
#scb-sum-body > * > :first-child { margin: 0; font-size: 13px; color: rgba(245,242,236,0.45); }
#scb-sum-body > * > :last-child { margin: 0; font-size: 13px; color: #f5f2ec; text-align: right; }
#scb-sum-body > :nth-child(4) > :last-child { color: var(--Gold, #b08d4f); }
#scb-sum-foot { padding: 14px 22px; flex-direction: row; justify-content: space-between; align-items: center; border-top: 1px dashed rgba(245,242,236,0.14); }
#scb-sum-foot > * { margin: 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
#scb-sum-foot > :first-child { color: rgba(245,242,236,0.4); }
#scb-sum-foot > :last-child { color: var(--Gold, #b08d4f); }

/* --- 2. Ticker #scb-ticker --- */
#scb-ticker { width: 100%; padding: 13px 0; overflow: hidden; background: #17161a; border-top: 1px solid rgba(176,141,79,0.35); border-bottom: 1px solid rgba(176,141,79,0.35); }
#scb-ticker-track { display: flex; width: max-content; gap: 0; padding: 0; animation: hbiTickerAbout 50s linear infinite; }
#scb-ticker:hover #scb-ticker-track { animation-play-state: paused; }
#scb-ticker-track > * { display: flex; align-items: center; gap: 40px; padding: 0 40px 0 0; width: auto; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(245,242,236,0.75); white-space: nowrap; }
#scb-ticker-track > * > * { width: auto; margin: 0; }
#scb-ticker-track > * > :nth-child(even) { color: var(--Gold, #b08d4f); font-size: 8px; letter-spacing: normal; }

/* --- 3. The situation #scb-situation (dark gradient + tex-a) --- */
#scb-situation { background: linear-gradient(180deg, #1A191C 0%, #121214 100%); padding: 110px 32px; position: relative; isolation: isolate; }
#scb-situation::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(18,18,20,0.55), rgba(18,18,20,0.72)), var(--hbi-img-tex-a);
    background-size: cover, cover; background-position: center top, center top; background-repeat: no-repeat, no-repeat;
}
#scb-situation-inner { gap: 0; }
#scb-situation-row { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
#scb-situation-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#scb-situation-left .h-sec { margin: 20px 0 0; max-width: 520px; }
#scb-situation-left .lead { margin: 24px 0 0; max-width: 520px; font-size: 17px; line-height: 1.75; color: rgba(245,242,236,0.7); }
#scb-situation-cards { padding: 0; flex-direction: column; gap: 16px; }
#scb-situation-cards > * { padding: 28px; flex-direction: column; align-items: flex-start; gap: 0; background: #202024; border: 1px solid rgba(245,242,236,0.08); border-radius: 12px; transition: border-color 0.3s ease; }
#scb-situation-cards > *:hover { border-color: rgba(176,141,79,0.55); }
#scb-situation-cards > * > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#scb-situation-cards > * h3 { margin: 14px 0 8px; font-family: var(--Heading, sans-serif); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: #f5f2ec; }
#scb-situation-cards > * > :last-child { margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(245,242,236,0.62); }

/* --- 4. Where it fits #scb-fits (light, NO lead) --- */
#scb-fits { background: #F5F2EC; color: #121214; padding: 110px 32px; position: relative; }
#scb-fits-inner { gap: 0; }
#scb-fits-row { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
#scb-fits-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#scb-fits-left .h-sec { margin: 20px 0 0; max-width: 560px; color: #121214; }
#scb-fits-list { padding: 0; flex-direction: column; margin-top: 36px; border-top: 1px solid #E5DFD2; width: 100%; }
#scb-fits-list > * { padding: 20px 0; flex-direction: row; gap: 22px; align-items: baseline; border-bottom: 1px solid #E5DFD2; }
#scb-fits-list > * > :first-child { margin: 0; flex: none; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--Gold, #b08d4f); font-variant-numeric: tabular-nums; }
#scb-fits-list > * > :last-child { margin: 0; font-size: 16.5px; line-height: 1.6; color: rgba(18,18,20,0.78); }
#scb-fits-photo { padding: 0; position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; border: 1px solid #E5DFD2; width: 100%; }
#scb-fits-photo > * { width: 100%; height: 100%; padding: 0; }
#scb-fits-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- 5. How it works #scb-how (light) --- */
#scb-how { background: #FCFAF6; color: #121214; border-top: 1px solid #E8E2D4; padding: 110px 32px; position: relative; }
#scb-how-inner { gap: 0; }
#scb-how-inner .h-sec { margin: 18px 0 0; max-width: 620px; color: #121214; }
#scb-how-grid { padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 64px; position: relative; width: 100%; }
#scb-how-grid::before { content: ""; position: absolute; top: 28px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, #B08D4F 12%, #B08D4F 88%, transparent); }
#scb-how-grid > * { padding: 0; flex-direction: column; align-items: flex-start; position: relative; gap: 0; }
#scb-how-grid > * > :first-child { margin: 0; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--Gold, #b08d4f); background: #FCFAF6; display: flex; align-items: center; justify-content: center; font-family: var(--Heading, sans-serif); font-weight: 700; font-size: 18px; color: var(--Gold, #b08d4f); font-variant-numeric: tabular-nums; }
#scb-how-grid > * h3 { margin: 22px 0 10px; font-family: var(--Heading, sans-serif); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #121214; }
#scb-how-grid > * > :last-child { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(18,18,20,0.65); max-width: 320px; }

/* --- 6. Proof #scb-proof (dark) --- */
#scb-proof { background: #121214; color: #f5f2ec; padding: 110px 32px; position: relative; }
#scb-proof-inner { gap: 0; }
#scb-proof-row { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 4.5vw, 72px); align-items: center; }
#scb-proof-photo { padding: 0; position: relative; aspect-ratio: 16 / 11; border-radius: 14px; overflow: hidden; width: 100%; }
#scb-proof-photo > :first-child { width: 100%; height: 100%; padding: 0; }
#scb-proof-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#scb-proof-badge { position: absolute; top: 14px; left: 14px; margin: 0; width: auto; background: rgba(18,18,20,0.75); backdrop-filter: blur(6px); border: 1px solid rgba(176,141,79,0.6); color: var(--Gold, #b08d4f); font-family: var(--Heading, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
#scb-proof-content { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#scb-proof-h2 { margin: 20px 0 0; max-width: 520px; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.15; }
#scb-proof-lead { margin: 20px 0 0; max-width: 520px; font-size: 16.5px; line-height: 1.75; color: rgba(245,242,236,0.7); }
#scb-proof-stats { padding: 0; flex-direction: row; gap: 40px; flex-wrap: wrap; margin-top: 32px; width: 100%; }
#scb-proof-stats > * { padding: 0 0 0 20px; flex-direction: column; align-items: flex-start; gap: 0; width: auto; border-left: 1px solid rgba(176,141,79,0.4); }
#scb-proof-stats > * > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; color: #f5f2ec; }
#scb-proof-stats > * > :last-child { margin: 10px 0 0; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,242,236,0.55); }
#scb-proof-quote { margin: 36px 0 0; padding-left: 22px; border-left: 2px solid rgba(176,141,79,0.5); max-width: 520px; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.45; color: #f5f2ec; }
#scb-proof-cite { margin: 16px 0 0; padding-left: 22px; font-family: var(--Heading, sans-serif); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,242,236,0.55); }
#scb-proof-caselink { align-self: flex-start; margin-top: 30px; font-size: 15px; padding-bottom: 4px; color: var(--Gold, #b08d4f); background-image: linear-gradient(var(--Gold, #b08d4f), var(--Gold, #b08d4f)); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.4s ease; }
#scb-proof-caselink:hover { background-size: 100% 1px; }

/* --- 7. Related #scb-related (light) --- */
#scb-related { background: #FCFAF6; color: #121214; border-top: 1px solid #E8E2D4; padding: 80px 32px; }
#scb-related-inner { gap: 0; }
#scb-rel-grid { padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 32px; width: 100%; }
#scb-rel-grid > * { padding: 26px; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; background: #fff; border: 1px solid #E8E2D4; border-radius: 14px; color: #121214; box-shadow: 0 2px 8px rgba(18,18,20,0.05); transition: transform 0.3s ease, border-color 0.3s ease; }
#scb-rel-grid > *:hover { transform: translateY(-6px); border-color: rgba(176,141,79,0.6); }
#scb-rel-grid > * > :first-child { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#scb-rel-grid > * > :first-child > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#scb-rel-grid > * h3 { margin: 12px 0 0; font-family: var(--Heading, sans-serif); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: #121214; }
#scb-rel-grid > * .link-gold { font-size: 14px; }

/* --- 8. CTA #scb-cta (radial + tex-a + rings) --- */
#scb-cta { background: radial-gradient(900px 500px at 50% 120%, #201D18 0%, #121214 65%); color: #f5f2ec; padding: 130px 32px; position: relative; overflow: hidden; border-top: 1px solid rgba(176,141,79,0.25); isolation: isolate; }
#scb-cta-tex { padding: 0; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: var(--hbi-img-tex-a); background-size: cover; background-position: center bottom; background-repeat: no-repeat; opacity: 0.3; transform: scaleY(-1); }
#scb-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 449px, rgba(176, 141, 79, 0.25) 449px, rgba(176, 141, 79, 0.25) 450px, transparent 450px),
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 529px, rgba(176, 141, 79, 0.15) 529px, rgba(176, 141, 79, 0.15) 530px, transparent 530px);
}
#scb-cta-inner { max-width: 780px; text-align: center; align-items: center; gap: 0; position: relative; z-index: 1; }
#scb-cta-h2 { margin: 0; font-size: clamp(38px, 4.4vw, 62px); letter-spacing: -0.03em; line-height: 1.06; }
#scb-cta-lead { margin: 24px auto 0; max-width: 520px; color: rgba(245,242,236,0.72); text-align: center; }
#scb-cta-ctas { padding: 0; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 44px; }

/* --- Responsive --- */
@media (max-width: 900px) {
    #scb-hero-row, #scb-situation-row, #scb-fits-row, #scb-proof-row { grid-template-columns: 1fr; gap: 40px; }
    #scb-how-grid { grid-template-columns: 1fr; gap: 40px; }
    #scb-how-grid::before { display: none; }
    #scb-summary { margin-left: 0; }
}

/* ==========================================================================
   Short-Term & Fast Bridging (post 137, #fbf-*) — from 2d. fast-bridging
   Product-page template + one extra section. Numerals 01-07. "How we move
   fast" (#fbf-move) is a dark 4-card bordered grid on tex-B; "What we need
   from you" (#fbf-need) is the light 3-step connector. "Where it fits" has
   no lead. Summary gold value on the last row (Funds).
   ========================================================================== */

.page-id-137 .elementor .h-hero { font-size: clamp(46px, 6.2vw, 84px); line-height: 1.0; letter-spacing: -0.025em; }
.page-id-137 .elementor .h-sec { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; }
.page-id-137 .elementor .inner { position: relative; z-index: 1; }
.page-id-137 .elementor .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; }
.page-id-137 .elementor .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--Gold, #b08d4f); flex: none; }

/* Numerals 01–07 */
#fbf-top::after, #fbf-situation::after, #fbf-fits::after, #fbf-move::after, #fbf-need::after, #fbf-proof::after, #fbf-cta::after {
    position: absolute; top: 20px; left: 16px; font-family: var(--Heading, sans-serif);
    font-size: clamp(120px, 13vw, 210px); font-weight: 700; line-height: 0.8; letter-spacing: -0.04em;
    color: var(--Gold, #b08d4f); opacity: 0.08; font-variant-numeric: tabular-nums; user-select: none; pointer-events: none;
}
#fbf-top::after { content: "01"; }
#fbf-situation::after { content: "02"; }
#fbf-fits::after { content: "03"; }
#fbf-move::after { content: "04"; }
#fbf-need::after { content: "05"; }
#fbf-proof::after { content: "06"; }
#fbf-cta::after { content: "07"; }

/* --- 1. Hero #fbf-top --- */
#fbf-top { background: #101012; padding: 96px 32px 104px; overflow: hidden; position: relative; }
#fbf-top::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(90deg, rgba(18,18,20,0.96) 0%, rgba(18,18,20,0.88) 50%, rgba(18,18,20,0.6) 100%), var(--hbi-img-hero);
    background-size: cover, cover; background-position: center, 30% 45%; background-repeat: no-repeat, no-repeat;
}
#fbf-hero-inner { gap: 0; }
#fbf-breadcrumb { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,236,0.45); }
#fbf-breadcrumb a { color: rgba(245,242,236,0.45); text-decoration: none; transition: color 0.25s ease; }
#fbf-breadcrumb a:hover { color: var(--Gold, #b08d4f); }
#fbf-crumb { color: var(--Gold, #b08d4f); }
#fbf-hero-row { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: end; margin-top: 44px; }
#fbf-hero-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#fbf-h1 { margin: 24px 0 0; max-width: 15ch; }
#fbf-accent { color: var(--Gold, #b08d4f); }
#fbf-hero-lead { margin: 28px 0 0; max-width: 560px; color: rgba(245,242,236,0.72); }
#fbf-hero-ctas { padding: 0; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
#fbf-summary { padding: 0; flex-direction: column; width: 100%; max-width: 380px; margin-left: auto; background: #1B1B1F; border: 1px solid rgba(245,242,236,0.09); border-top: 2px solid var(--Gold, #b08d4f); border-radius: 6px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
#fbf-sum-head { padding: 16px 22px; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(245,242,236,0.08); }
#fbf-sum-head > :first-child { margin: 0; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#fbf-sum-head > :last-child { margin: 0; font-size: 11px; color: rgba(245,242,236,0.4); font-variant-numeric: tabular-nums; }
#fbf-sum-body { padding: 20px 22px; flex-direction: column; gap: 13px; }
#fbf-sum-body > * { padding: 0; flex-direction: row; justify-content: space-between; gap: 16px; }
#fbf-sum-body > * > :first-child { margin: 0; font-size: 13px; color: rgba(245,242,236,0.45); }
#fbf-sum-body > * > :last-child { margin: 0; font-size: 13px; color: #f5f2ec; text-align: right; }
#fbf-sum-body > :last-child > :last-child { color: var(--Gold, #b08d4f); }
#fbf-sum-foot { padding: 14px 22px; flex-direction: row; justify-content: space-between; align-items: center; border-top: 1px dashed rgba(245,242,236,0.14); }
#fbf-sum-foot > * { margin: 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
#fbf-sum-foot > :first-child { color: rgba(245,242,236,0.4); }
#fbf-sum-foot > :last-child { color: var(--Gold, #b08d4f); }

/* --- 2. Ticker #fbf-ticker --- */
#fbf-ticker { width: 100%; padding: 13px 0; overflow: hidden; background: #17161a; border-top: 1px solid rgba(176,141,79,0.35); border-bottom: 1px solid rgba(176,141,79,0.35); }
#fbf-ticker-track { display: flex; width: max-content; gap: 0; padding: 0; animation: hbiTickerAbout 50s linear infinite; }
#fbf-ticker:hover #fbf-ticker-track { animation-play-state: paused; }
#fbf-ticker-track > * { display: flex; align-items: center; gap: 40px; padding: 0 40px 0 0; width: auto; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(245,242,236,0.75); white-space: nowrap; }
#fbf-ticker-track > * > * { width: auto; margin: 0; }
#fbf-ticker-track > * > :nth-child(even) { color: var(--Gold, #b08d4f); font-size: 8px; letter-spacing: normal; }

/* --- 3. The situation #fbf-situation (dark gradient + tex-a) --- */
#fbf-situation { background: linear-gradient(180deg, #1A191C 0%, #121214 100%); padding: 110px 32px; position: relative; isolation: isolate; }
#fbf-situation::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(18,18,20,0.55), rgba(18,18,20,0.72)), var(--hbi-img-tex-a);
    background-size: cover, cover; background-position: center top, center top; background-repeat: no-repeat, no-repeat;
}
#fbf-situation-inner { gap: 0; }
#fbf-situation-row { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
#fbf-situation-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#fbf-situation-left .h-sec { margin: 20px 0 0; max-width: 520px; }
#fbf-situation-left .lead { margin: 24px 0 0; max-width: 520px; font-size: 17px; line-height: 1.75; color: rgba(245,242,236,0.7); }
#fbf-situation-cards { padding: 0; flex-direction: column; gap: 16px; }
#fbf-situation-cards > * { padding: 28px; flex-direction: column; align-items: flex-start; gap: 0; background: #202024; border: 1px solid rgba(245,242,236,0.08); border-radius: 12px; transition: border-color 0.3s ease; }
#fbf-situation-cards > *:hover { border-color: rgba(176,141,79,0.55); }
#fbf-situation-cards > * > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#fbf-situation-cards > * h3 { margin: 14px 0 8px; font-family: var(--Heading, sans-serif); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: #f5f2ec; }
#fbf-situation-cards > * > :last-child { margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(245,242,236,0.62); }

/* --- 4. Where it fits #fbf-fits (light, NO lead) --- */
#fbf-fits { background: #F5F2EC; color: #121214; padding: 110px 32px; position: relative; }
#fbf-fits-inner { gap: 0; }
#fbf-fits-row { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
#fbf-fits-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#fbf-fits-left .h-sec { margin: 20px 0 0; max-width: 560px; color: #121214; }
#fbf-fits-list { padding: 0; flex-direction: column; margin-top: 36px; border-top: 1px solid #E5DFD2; width: 100%; }
#fbf-fits-list > * { padding: 20px 0; flex-direction: row; gap: 22px; align-items: baseline; border-bottom: 1px solid #E5DFD2; }
#fbf-fits-list > * > :first-child { margin: 0; flex: none; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--Gold, #b08d4f); font-variant-numeric: tabular-nums; }
#fbf-fits-list > * > :last-child { margin: 0; font-size: 16.5px; line-height: 1.6; color: rgba(18,18,20,0.78); }
#fbf-fits-photo { padding: 0; position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; border: 1px solid #E5DFD2; width: 100%; }
#fbf-fits-photo > * { width: 100%; height: 100%; padding: 0; }
#fbf-fits-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- 5. How we move fast #fbf-move (dark + tex-b, lead + 4-card bordered grid) --- */
#fbf-move { background: #121214; color: #f5f2ec; padding: 110px 32px; position: relative; isolation: isolate; }
#fbf-move::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(18,18,20,0.6), rgba(18,18,20,0.6)), var(--hbi-img-tex-b);
    background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}
#fbf-move-inner { gap: 0; }
#fbf-move-inner .h-sec { margin: 18px 0 0; max-width: 620px; }
#fbf-move-lead { margin: 22px 0 0; max-width: 620px; font-size: 17px; line-height: 1.75; color: rgba(245,242,236,0.7); }
#fbf-move-grid { padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; margin-top: 52px; background: rgba(245,242,236,0.1); border: 1px solid rgba(245,242,236,0.1); border-radius: 14px; overflow: hidden; width: 100%; }
#fbf-move-grid > * { padding: 30px 28px 32px; flex-direction: column; align-items: flex-start; gap: 0; background: #1B1B1F; }
#fbf-move-grid > * > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: var(--Gold, #b08d4f); font-variant-numeric: tabular-nums; }
#fbf-move-grid > * h3 { margin: 18px 0 10px; font-family: var(--Heading, sans-serif); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: #f5f2ec; }
#fbf-move-grid > * > :last-child { margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(245,242,236,0.62); }

/* --- 6. What we need from you #fbf-need (light 3-step connector) --- */
#fbf-need { background: #FCFAF6; color: #121214; border-top: 1px solid #E8E2D4; padding: 110px 32px; position: relative; }
#fbf-need-inner { gap: 0; }
#fbf-need-inner .h-sec { margin: 18px 0 0; max-width: 620px; color: #121214; }
#fbf-need-grid { padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 64px; position: relative; width: 100%; }
#fbf-need-grid::before { content: ""; position: absolute; top: 28px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, #B08D4F 12%, #B08D4F 88%, transparent); }
#fbf-need-grid > * { padding: 0; flex-direction: column; align-items: flex-start; position: relative; gap: 0; }
#fbf-need-grid > * > :first-child { margin: 0; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--Gold, #b08d4f); background: #FCFAF6; display: flex; align-items: center; justify-content: center; font-family: var(--Heading, sans-serif); font-weight: 700; font-size: 18px; color: var(--Gold, #b08d4f); font-variant-numeric: tabular-nums; }
#fbf-need-grid > * h3 { margin: 22px 0 10px; font-family: var(--Heading, sans-serif); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #121214; }
#fbf-need-grid > * > :last-child { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(18,18,20,0.65); max-width: 320px; }

/* --- 7. Proof #fbf-proof (dark) --- */
#fbf-proof { background: #121214; color: #f5f2ec; padding: 110px 32px; position: relative; }
#fbf-proof-inner { gap: 0; }
#fbf-proof-row { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 4.5vw, 72px); align-items: center; }
#fbf-proof-photo { padding: 0; position: relative; aspect-ratio: 16 / 11; border-radius: 14px; overflow: hidden; width: 100%; }
#fbf-proof-photo > :first-child { width: 100%; height: 100%; padding: 0; }
#fbf-proof-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#fbf-proof-badge { position: absolute; top: 14px; left: 14px; margin: 0; width: auto; background: rgba(18,18,20,0.75); backdrop-filter: blur(6px); border: 1px solid rgba(176,141,79,0.6); color: var(--Gold, #b08d4f); font-family: var(--Heading, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
#fbf-proof-content { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#fbf-proof-h2 { margin: 20px 0 0; max-width: 520px; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.15; }
#fbf-proof-lead { margin: 20px 0 0; max-width: 520px; font-size: 16.5px; line-height: 1.75; color: rgba(245,242,236,0.7); }
#fbf-proof-stats { padding: 0; flex-direction: row; gap: 40px; flex-wrap: wrap; margin-top: 32px; width: 100%; }
#fbf-proof-stats > * { padding: 0 0 0 20px; flex-direction: column; align-items: flex-start; gap: 0; width: auto; border-left: 1px solid rgba(176,141,79,0.4); }
#fbf-proof-stats > * > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; color: #f5f2ec; }
#fbf-proof-stats > * > :last-child { margin: 10px 0 0; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,242,236,0.55); }
#fbf-proof-quote { margin: 36px 0 0; padding-left: 22px; border-left: 2px solid rgba(176,141,79,0.5); max-width: 520px; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.45; color: #f5f2ec; }
#fbf-proof-cite { margin: 16px 0 0; padding-left: 22px; font-family: var(--Heading, sans-serif); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,242,236,0.55); }
#fbf-proof-caselink { align-self: flex-start; margin-top: 30px; font-size: 15px; padding-bottom: 4px; color: var(--Gold, #b08d4f); background-image: linear-gradient(var(--Gold, #b08d4f), var(--Gold, #b08d4f)); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.4s ease; }
#fbf-proof-caselink:hover { background-size: 100% 1px; }

/* --- 8. Related #fbf-related (light) --- */
#fbf-related { background: #FCFAF6; color: #121214; border-top: 1px solid #E8E2D4; padding: 80px 32px; }
#fbf-related-inner { gap: 0; }
#fbf-rel-grid { padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 32px; width: 100%; }
#fbf-rel-grid > * { padding: 26px; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; background: #fff; border: 1px solid #E8E2D4; border-radius: 14px; color: #121214; box-shadow: 0 2px 8px rgba(18,18,20,0.05); transition: transform 0.3s ease, border-color 0.3s ease; }
#fbf-rel-grid > *:hover { transform: translateY(-6px); border-color: rgba(176,141,79,0.6); }
#fbf-rel-grid > * > :first-child { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#fbf-rel-grid > * > :first-child > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#fbf-rel-grid > * h3 { margin: 12px 0 0; font-family: var(--Heading, sans-serif); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: #121214; }
#fbf-rel-grid > * .link-gold { font-size: 14px; }

/* --- 9. CTA #fbf-cta (radial + tex-a + rings) --- */
#fbf-cta { background: radial-gradient(900px 500px at 50% 120%, #201D18 0%, #121214 65%); color: #f5f2ec; padding: 130px 32px; position: relative; overflow: hidden; border-top: 1px solid rgba(176,141,79,0.25); isolation: isolate; }
#fbf-cta-tex { padding: 0; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: var(--hbi-img-tex-a); background-size: cover; background-position: center bottom; background-repeat: no-repeat; opacity: 0.3; transform: scaleY(-1); }
#fbf-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 449px, rgba(176, 141, 79, 0.25) 449px, rgba(176, 141, 79, 0.25) 450px, transparent 450px),
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 529px, rgba(176, 141, 79, 0.15) 529px, rgba(176, 141, 79, 0.15) 530px, transparent 530px);
}
#fbf-cta-inner { max-width: 780px; text-align: center; align-items: center; gap: 0; position: relative; z-index: 1; }
#fbf-cta-h2 { margin: 0; font-size: clamp(38px, 4.4vw, 62px); letter-spacing: -0.03em; line-height: 1.06; }
#fbf-cta-lead { margin: 24px auto 0; max-width: 520px; color: rgba(245,242,236,0.72); text-align: center; }
#fbf-cta-ctas { padding: 0; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 44px; }

/* --- Responsive --- */
@media (max-width: 900px) {
    #fbf-hero-row, #fbf-situation-row, #fbf-fits-row, #fbf-proof-row { grid-template-columns: 1fr; gap: 40px; }
    #fbf-need-grid { grid-template-columns: 1fr; gap: 40px; }
    #fbf-need-grid::before { display: none; }
    #fbf-summary { margin-left: 0; }
}

/* ==========================================================================
   For Brokers (post 148, #fb-*) — from 3. for-brokers.html
   Reuses archetypes + a new Register section (#fb-register) whose right column
   holds the broker form, injected by site.js into #fb-register-mount.
   ========================================================================== */

.page-id-148 .elementor .h-hero { font-size: clamp(44px, 5.8vw, 80px); line-height: 1.02; letter-spacing: -0.025em; }
.page-id-148 .elementor .h-sec { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; }
.page-id-148 .elementor .inner { position: relative; z-index: 1; }
.page-id-148 .elementor .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; }
.page-id-148 .elementor .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--Gold, #b08d4f); flex: none; }

/* Numerals 01–06 */
#fb-top::after, #fb-get::after, #fb-look::after, #fb-place::after, #fb-register::after, #fb-cta::after {
    position: absolute; top: 20px; left: 16px; font-family: var(--Heading, sans-serif);
    font-size: clamp(120px, 13vw, 210px); font-weight: 700; line-height: 0.8; letter-spacing: -0.04em;
    color: var(--Gold, #b08d4f); opacity: 0.08; font-variant-numeric: tabular-nums; user-select: none; pointer-events: none;
}
#fb-top::after { content: "01"; }
#fb-get::after { content: "02"; }
#fb-look::after { content: "03"; }
#fb-place::after { content: "04"; }
#fb-register::after { content: "05"; }
#fb-cta::after { content: "06"; }

/* --- 1. Hero #fb-top --- */
#fb-top { background: #101012; padding: 96px 32px 104px; overflow: hidden; position: relative; }
#fb-top::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(90deg, rgba(18,18,20,0.96) 0%, rgba(18,18,20,0.88) 50%, rgba(18,18,20,0.6) 100%), var(--hbi-img-hero);
    background-size: cover, cover; background-position: center, 55% 40%; background-repeat: no-repeat, no-repeat;
}
#fb-hero-inner { gap: 0; }
#fb-breadcrumb { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,236,0.45); }
#fb-breadcrumb a { color: rgba(245,242,236,0.45); text-decoration: none; transition: color 0.25s ease; }
#fb-breadcrumb a:hover { color: var(--Gold, #b08d4f); }
#fb-crumb { color: var(--Gold, #b08d4f); }
#fb-hero-row { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: end; margin-top: 44px; }
#fb-hero-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#fb-h1 { margin: 24px 0 0; max-width: 16ch; }
#fb-accent { color: var(--Gold, #b08d4f); }
#fb-hero-lead { margin: 28px 0 0; max-width: 620px; color: rgba(245,242,236,0.72); }
#fb-hero-ctas { padding: 0; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
#fb-summary { padding: 0; flex-direction: column; width: 100%; max-width: 380px; margin-left: auto; background: #1B1B1F; border: 1px solid rgba(245,242,236,0.09); border-top: 2px solid var(--Gold, #b08d4f); border-radius: 6px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
#fb-sum-head { padding: 16px 22px; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(245,242,236,0.08); }
#fb-sum-head > :first-child { margin: 0; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#fb-sum-head > :last-child { margin: 0; font-size: 11px; color: rgba(245,242,236,0.4); font-variant-numeric: tabular-nums; }
#fb-sum-body { padding: 20px 22px; flex-direction: column; gap: 13px; }
#fb-sum-body > * { padding: 0; flex-direction: row; justify-content: space-between; gap: 16px; }
#fb-sum-body > * > :first-child { margin: 0; font-size: 13px; color: rgba(245,242,236,0.45); }
#fb-sum-body > * > :last-child { margin: 0; font-size: 13px; color: #f5f2ec; text-align: right; }
#fb-sum-body > :last-child > :last-child { color: var(--Gold, #b08d4f); }
#fb-sum-foot { padding: 14px 22px; flex-direction: row; justify-content: space-between; align-items: center; border-top: 1px dashed rgba(245,242,236,0.14); }
#fb-sum-foot > * { margin: 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
#fb-sum-foot > :first-child { color: rgba(245,242,236,0.4); }
#fb-sum-foot > :last-child { color: var(--Gold, #b08d4f); }

/* --- 2. Ticker #fb-ticker --- */
#fb-ticker { width: 100%; padding: 13px 0; overflow: hidden; background: #17161a; border-top: 1px solid rgba(176,141,79,0.35); border-bottom: 1px solid rgba(176,141,79,0.35); }
#fb-ticker-track { display: flex; width: max-content; gap: 0; padding: 0; animation: hbiTickerAbout 50s linear infinite; }
#fb-ticker:hover #fb-ticker-track { animation-play-state: paused; }
#fb-ticker-track > * { display: flex; align-items: center; gap: 40px; padding: 0 40px 0 0; width: auto; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(245,242,236,0.75); white-space: nowrap; }
#fb-ticker-track > * > * { width: auto; margin: 0; }
#fb-ticker-track > * > :nth-child(even) { color: var(--Gold, #b08d4f); font-size: 8px; letter-spacing: normal; }

/* --- 3. What you get #fb-get (dark + tex-a, 5-card bordered grid) --- */
#fb-get { background: linear-gradient(180deg, #1A191C 0%, #121214 100%); padding: 110px 32px; position: relative; isolation: isolate; }
#fb-get::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(18,18,20,0.55), rgba(18,18,20,0.7)), var(--hbi-img-tex-a);
    background-size: cover, cover; background-position: center top, center top; background-repeat: no-repeat, no-repeat;
}
#fb-get-inner { gap: 0; }
#fb-get-inner .h-sec { margin: 18px 0 0; max-width: 620px; }
#fb-get-grid { padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; margin-top: 52px; background: rgba(245,242,236,0.1); border: 1px solid rgba(245,242,236,0.1); border-radius: 14px; overflow: hidden; width: 100%; }
#fb-get-grid > * { padding: 30px 28px 32px; flex-direction: column; align-items: flex-start; gap: 0; background: #1B1B1F; }
#fb-get-grid > * > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: var(--Gold, #b08d4f); font-variant-numeric: tabular-nums; }
#fb-get-grid > * h3 { margin: 18px 0 10px; font-family: var(--Heading, sans-serif); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: #f5f2ec; }
#fb-get-grid > * > :last-child { margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(245,242,236,0.62); }

/* --- 4. What we look for #fb-look (light, lead + list + photo) --- */
#fb-look { background: #F5F2EC; color: #121214; padding: 110px 32px; position: relative; }
#fb-look-inner { gap: 0; }
#fb-look-row { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
#fb-look-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#fb-look-left .h-sec { margin: 20px 0 0; max-width: 560px; color: #121214; }
#fb-look-left .lead { margin: 22px 0 0; max-width: 540px; font-size: 17px; line-height: 1.75; color: rgba(18,18,20,0.68); }
#fb-look-list { padding: 0; flex-direction: column; margin-top: 36px; border-top: 1px solid #E5DFD2; width: 100%; }
#fb-look-list > * { padding: 20px 0; flex-direction: row; gap: 22px; align-items: baseline; border-bottom: 1px solid #E5DFD2; }
#fb-look-list > * > :first-child { margin: 0; flex: none; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--Gold, #b08d4f); font-variant-numeric: tabular-nums; }
#fb-look-list > * > :last-child { margin: 0; font-size: 16.5px; line-height: 1.6; color: rgba(18,18,20,0.78); }
#fb-look-photo { padding: 0; position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; border: 1px solid #E5DFD2; width: 100%; }
#fb-look-photo > * { width: 100%; height: 100%; padding: 0; }
#fb-look-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- 5. How to place a deal #fb-place (light 3-step connector) --- */
#fb-place { background: #FCFAF6; color: #121214; border-top: 1px solid #E8E2D4; padding: 110px 32px; position: relative; }
#fb-place-inner { gap: 0; }
#fb-place-inner .h-sec { margin: 18px 0 0; max-width: 620px; color: #121214; }
#fb-place-grid { padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 64px; position: relative; width: 100%; }
#fb-place-grid::before { content: ""; position: absolute; top: 28px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, #B08D4F 12%, #B08D4F 88%, transparent); }
#fb-place-grid > * { padding: 0; flex-direction: column; align-items: flex-start; position: relative; gap: 0; }
#fb-place-grid > * > :first-child { margin: 0; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--Gold, #b08d4f); background: #FCFAF6; display: flex; align-items: center; justify-content: center; font-family: var(--Heading, sans-serif); font-weight: 700; font-size: 18px; color: var(--Gold, #b08d4f); font-variant-numeric: tabular-nums; }
#fb-place-grid > * h3 { margin: 22px 0 10px; font-family: var(--Heading, sans-serif); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #121214; }
#fb-place-grid > * > :last-child { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(18,18,20,0.65); max-width: 320px; }

/* --- 6. Register #fb-register (dark; left copy + right form mount) --- */
#fb-register { background: #121214; color: #f5f2ec; padding: 110px 32px; position: relative; }
#fb-register-inner { gap: 0; }
#fb-register-row { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
#fb-register-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#fb-register-left .h-sec { margin: 20px 0 0; max-width: 480px; }
#fb-register-left .lead { margin: 22px 0 0; max-width: 480px; font-size: 17px; line-height: 1.75; color: rgba(245,242,236,0.7); }
#fb-register-items { padding: 0; flex-direction: column; gap: 14px; margin-top: 32px; width: 100%; }
#fb-register-items > * { padding: 4px 0 4px 20px; flex-direction: row; gap: 18px; align-items: baseline; border-left: 1px solid rgba(176,141,79,0.4); width: auto; }
#fb-register-items > * > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 16px; font-weight: 600; min-width: 130px; color: #f5f2ec; }
#fb-register-items > * > :last-child { margin: 0; font-size: 14.5px; line-height: 1.65; color: rgba(245,242,236,0.62); }
#fb-register-mount { padding: 36px 34px 34px; flex-direction: column; align-items: stretch; gap: 0; width: 100%; background: #1B1B1F; border: 1px solid rgba(245,242,236,0.09); border-top: 2px solid var(--Gold, #b08d4f); border-radius: 10px; }
#fb-form-title { margin: 0; font-family: var(--Heading, sans-serif); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: #f5f2ec; }
#fb-form-sub { margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: rgba(245,242,236,0.62); }
#fb-form-note { margin: 18px 0 0; font-size: 12.5px; line-height: 1.7; color: rgba(245,242,236,0.45); }

/* Broker Registration — a Gravity Form (Orbital theme) embedded via the
   [hbi_broker_form] marker, restyled to the dark card design. Scoped to the
   mount; !important because Orbital ships scoped stylesheets that outrank
   plain selectors. */
#fb-register-mount .gform_wrapper { margin-top: 28px; }
#fb-register-mount .gform_required_legend { display: none !important; }
#fb-register-mount .gform_fields { gap: 18px !important; }
#fb-register-mount .gfield_label { font-family: var(--Heading, sans-serif) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(245,242,236,0.55) !important; margin: 0 0 8px !important; }
#fb-register-mount .gfield_required { display: none !important; }
#fb-register-mount input[type="text"], #fb-register-mount input[type="email"], #fb-register-mount input[type="tel"], #fb-register-mount textarea {
    background: #17171A !important; border: 1px solid rgba(245,242,236,0.14) !important; border-radius: 6px !important; color: #f5f2ec !important; font-family: inherit !important; font-size: 15px !important; padding: 14px 16px !important; width: 100% !important; box-shadow: none !important;
}
#fb-register-mount textarea { resize: vertical !important; }
#fb-register-mount input::placeholder, #fb-register-mount textarea::placeholder { color: rgba(245,242,236,0.35) !important; }
#fb-register-mount input:focus, #fb-register-mount textarea:focus { border-color: var(--Gold, #b08d4f) !important; outline: none !important; box-shadow: none !important; }
/* Consent is a checkbox field: hide its legend, lay checkbox + text inline. */
#fb-register-mount .gfield--type-checkbox .gfield_label,
#fb-register-mount .gfield--type-checkbox legend { display: none !important; }
#fb-register-mount .gfield--type-checkbox .gchoice { display: flex !important; gap: 12px !important; align-items: flex-start !important; }
#fb-register-mount .gfield--type-checkbox .gchoice input[type="checkbox"] { flex: none !important; margin-top: 3px !important; width: 16px !important; height: 16px !important; accent-color: var(--Gold, #b08d4f); }
#fb-register-mount .gfield--type-checkbox .gchoice label { font-family: inherit !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.6 !important; letter-spacing: 0 !important; text-transform: none !important; color: rgba(245,242,236,0.62) !important; margin: 0 !important; }
#fb-register-mount .gform_footer { margin: 24px 0 0 !important; padding: 0 !important; }
#fb-register-mount .gform_button { background: var(--Gold, #b08d4f) !important; color: #121214 !important; border: none !important; border-radius: 4px !important; font-family: var(--Heading, sans-serif) !important; font-weight: 600 !important; font-size: 16px !important; padding: 17px 32px !important; width: 100% !important; cursor: pointer !important; transition: background 0.3s ease !important; }
#fb-register-mount .gform_button:hover { background: var(--Gold-Bright, #c9a56a) !important; }
#fb-register-mount .gform_validation_errors, #fb-register-mount .gfield_description, #fb-register-mount .validation_message { background: transparent !important; border: none !important; color: rgba(245,242,236,0.6) !important; font-size: 12.5px !important; }
#fb-register-mount .gform_confirmation_message { color: rgba(245,242,236,0.82); font-size: 16px; line-height: 1.7; }

/* --- 7. Related #fb-related (light) --- */
#fb-related { background: #FCFAF6; color: #121214; border-top: 1px solid #E8E2D4; padding: 80px 32px; }
#fb-related-inner { gap: 0; }
#fb-rel-grid { padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 32px; width: 100%; }
#fb-rel-grid > * { padding: 26px; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; background: #fff; border: 1px solid #E8E2D4; border-radius: 14px; color: #121214; box-shadow: 0 2px 8px rgba(18,18,20,0.05); transition: transform 0.3s ease, border-color 0.3s ease; }
#fb-rel-grid > *:hover { transform: translateY(-6px); border-color: rgba(176,141,79,0.6); }
#fb-rel-grid > * > :first-child { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#fb-rel-grid > * > :first-child > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#fb-rel-grid > * h3 { margin: 12px 0 0; font-family: var(--Heading, sans-serif); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: #121214; }
#fb-rel-grid > * .link-gold { font-size: 14px; }

/* --- 8. CTA #fb-cta (radial + tex-a + rings) --- */
#fb-cta { background: radial-gradient(900px 500px at 50% 120%, #201D18 0%, #121214 65%); color: #f5f2ec; padding: 130px 32px; position: relative; overflow: hidden; border-top: 1px solid rgba(176,141,79,0.25); isolation: isolate; }
#fb-cta-tex { padding: 0; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: var(--hbi-img-tex-a); background-size: cover; background-position: center bottom; background-repeat: no-repeat; opacity: 0.3; transform: scaleY(-1); }
#fb-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 449px, rgba(176, 141, 79, 0.25) 449px, rgba(176, 141, 79, 0.25) 450px, transparent 450px),
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 529px, rgba(176, 141, 79, 0.15) 529px, rgba(176, 141, 79, 0.15) 530px, transparent 530px);
}
#fb-cta-inner { max-width: 780px; text-align: center; align-items: center; gap: 0; position: relative; z-index: 1; }
#fb-cta-h2 { margin: 0; font-size: clamp(38px, 4.4vw, 62px); letter-spacing: -0.03em; line-height: 1.06; }
#fb-cta-lead { margin: 24px auto 0; max-width: 520px; color: rgba(245,242,236,0.72); text-align: center; }
#fb-cta-ctas { padding: 0; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 44px; }

/* --- Responsive --- */
@media (max-width: 900px) {
    #fb-hero-row, #fb-look-row, #fb-register-row { grid-template-columns: 1fr; gap: 40px; }
    #fb-place-grid { grid-template-columns: 1fr; gap: 40px; }
    #fb-place-grid::before { display: none; }
    #fb-summary { margin-left: 0; }
    .fb-form { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Newsroom (post 176, #nr-*) — from 4. newsroom.html
   Hero, featured article, article grid + filter pills + coming-soon card,
   Subscribe (inline Newsletter Gravity Form via [hbi_subscribe_form]), CTA.
   ========================================================================== */

.page-id-176 .elementor .h-hero { font-size: clamp(44px, 5.8vw, 80px); line-height: 1.02; letter-spacing: -0.025em; }
.page-id-176 .elementor .h-sec { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; }
.page-id-176 .elementor .inner { position: relative; z-index: 1; }
.page-id-176 .elementor .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; }
.page-id-176 .elementor .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--Gold, #b08d4f); flex: none; }

/* Numerals 01–05 */
#nr-top::after, #nr-featured::after, #nr-grid::after, #nr-subscribe::after, #nr-cta::after {
    position: absolute; top: 20px; left: 16px; font-family: var(--Heading, sans-serif);
    font-size: clamp(120px, 13vw, 210px); font-weight: 700; line-height: 0.8; letter-spacing: -0.04em;
    color: var(--Gold, #b08d4f); opacity: 0.08; font-variant-numeric: tabular-nums; user-select: none; pointer-events: none;
}
#nr-top::after { content: "01"; }
#nr-featured::after { content: "02"; }
#nr-grid::after { content: "03"; }
#nr-subscribe::after { content: "04"; }
#nr-cta::after { content: "05"; }

/* --- 1. Hero #nr-top --- */
#nr-top { background: #101012; padding: 96px 32px 88px; overflow: hidden; position: relative; }
#nr-top::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(90deg, rgba(18,18,20,0.96) 0%, rgba(18,18,20,0.88) 50%, rgba(18,18,20,0.6) 100%), var(--hbi-img-hero);
    background-size: cover, cover; background-position: center, 45% 50%; background-repeat: no-repeat, no-repeat;
}
#nr-hero-inner { gap: 0; }
#nr-breadcrumb { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,236,0.45); }
#nr-breadcrumb a { color: rgba(245,242,236,0.45); text-decoration: none; transition: color 0.25s ease; }
#nr-breadcrumb a:hover { color: var(--Gold, #b08d4f); }
#nr-crumb { color: var(--Gold, #b08d4f); }
#nr-hero-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; margin-top: 44px; }
#nr-h1 { margin: 24px 0 0; max-width: 20ch; color: var(--Gold, #b08d4f); }
#nr-hero-lead { margin: 28px 0 0; max-width: 620px; color: rgba(245,242,236,0.72); }

/* --- 2. Ticker #nr-ticker --- */
#nr-ticker { width: 100%; padding: 13px 0; overflow: hidden; background: #17161a; border-top: 1px solid rgba(176,141,79,0.35); border-bottom: 1px solid rgba(176,141,79,0.35); }
#nr-ticker-track { display: flex; width: max-content; gap: 0; padding: 0; animation: hbiTickerAbout 50s linear infinite; }
#nr-ticker:hover #nr-ticker-track { animation-play-state: paused; }
#nr-ticker-track > * { display: flex; align-items: center; gap: 40px; padding: 0 40px 0 0; width: auto; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(245,242,236,0.75); white-space: nowrap; }
#nr-ticker-track > * > * { width: auto; margin: 0; }
#nr-ticker-track > * > :nth-child(even) { color: var(--Gold, #b08d4f); font-size: 8px; letter-spacing: normal; }

/* --- 3. Featured #nr-featured (light) --- */
#nr-featured { background: #F5F2EC; color: #121214; padding: 100px 32px; position: relative; }
#nr-featured-inner { gap: 0; }
#nr-featured-card { padding: 0; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 4vw, 64px); align-items: center; margin-top: 32px; width: 100%; }
#nr-featured-img { padding: 0; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; border: 1px solid #E5DFD2; width: 100%; }
#nr-featured-img > * { width: 100%; height: 100%; padding: 0; }
#nr-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
#nr-featured-content { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#nr-featured-kicker { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#nr-featured-title { margin: 16px 0 0; font-family: var(--Heading, sans-serif); font-size: clamp(28px, 2.9vw, 42px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: #121214; max-width: 20ch; }
#nr-featured-excerpt { margin: 18px 0 0; font-size: 16.5px; line-height: 1.75; color: rgba(18,18,20,0.65); max-width: 480px; }
#nr-featured-author { padding: 0; flex-direction: row; align-items: center; gap: 14px; margin-top: 26px; width: auto; }
#nr-featured-avatar { margin: 0; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(176,141,79,0.6); display: flex; align-items: center; justify-content: center; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; color: var(--Gold, #b08d4f); }
#nr-featured-author-name { margin: 0; font-size: 13.5px; color: rgba(18,18,20,0.6); }
#nr-featured-link { align-self: flex-start; margin-top: 26px; font-size: 15px; }

/* --- 4. Article grid #nr-grid (light) --- */
#nr-grid { background: #FCFAF6; color: #121214; border-top: 1px solid #E8E2D4; padding: 100px 32px; position: relative; }
#nr-grid-inner { gap: 0; }
#nr-grid-head { padding: 0; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; width: 100%; }
#nr-grid-head-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; width: auto; flex: 1 1 320px; }
#nr-pills { flex: 0 0 auto; }
#nr-grid-h2 { margin: 18px 0 0; font-size: clamp(30px, 3.2vw, 44px); color: #121214; }
#nr-pills { padding: 0; flex-direction: row; gap: 10px; flex-wrap: wrap; width: auto; }
#nr-pills > * { margin: 0; font-family: var(--Heading, sans-serif); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; padding: 9px 18px; border-radius: 999px; border: 1px solid #E0D9C9; background: transparent; color: rgba(18,18,20,0.6); width: auto; }
/* Filter pills (site.js sets aria-pressed; before it runs, "All" shows as selected). */
#nr-pills > [aria-pressed="true"],
#nr-pill-all:not([aria-pressed]) { border-color: var(--Gold, #b08d4f); background: var(--Gold, #b08d4f); color: #121214; }
#nr-pills > * { cursor: pointer; user-select: none; transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease; }
#nr-pills > [aria-pressed="false"]:hover { border-color: var(--Gold, #b08d4f); color: #121214; }
#nr-pills > [aria-pressed="true"]:hover { background: var(--Gold-Bright, #c9a56a); border-color: var(--Gold-Bright, #c9a56a); }
#nr-pills > :focus-visible { outline: 2px solid var(--Gold, #b08d4f); outline-offset: 3px; }
#nr-grid-cards > .nr-hidden { display: none; }
#nr-grid-cards > .nr-shown { animation: nr-card-in 0.35s ease backwards; } /* not "both": a held end state would cancel the card hover lift */
@keyframes nr-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #nr-grid-cards > .nr-shown { animation: none; } }
/* At most 3 columns, each at least 300px, and empty tracks kept (auto-fill), so
   cards stay the same size when the filter pills hide some of them. min(100%, …)
   lets a card shrink below 300px on small phones (320px screen = 256px column). */
#nr-grid-cards { padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(300px, calc((100% - 48px) / 3))), 1fr)); gap: 24px; margin-top: 48px; width: 100%; align-items: stretch; }
#nr-grid-cards > * { padding: 0; background: #fff; border: 1px solid #E8E2D4; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(18,18,20,0.05); flex-direction: column; align-items: stretch; }
#nr-art-1, #nr-art-2 { transition: transform 0.3s ease, border-color 0.3s ease; }
#nr-art-1:hover, #nr-art-2:hover { transform: translateY(-6px); border-color: rgba(176,141,79,0.6); }
#nr-art-1 > :first-child, #nr-art-2 > :first-child { padding: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #17171A; }
#nr-art-1 > :first-child > *, #nr-art-2 > :first-child > * { width: 100%; height: 100%; padding: 0; }
#nr-art-1 img, #nr-art-2 img { width: 100%; height: 100%; object-fit: cover; display: block; }
#nr-art-1 > :last-child, #nr-art-2 > :last-child { padding: 24px 24px 26px; flex-direction: column; align-items: flex-start; gap: 0; }
#nr-art-1-kicker, #nr-art-2-kicker { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#nr-art-1 h3, #nr-art-2 h3 { margin: 12px 0 12px; font-family: var(--Heading, sans-serif); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: #121214; }
#nr-art-1 > :last-child > :nth-child(3), #nr-art-2 > :last-child > :nth-child(3) { margin: 0 0 18px; font-size: 14.5px; line-height: 1.7; color: rgba(18,18,20,0.62); }
#nr-art-1 .link-gold, #nr-art-2 .link-gold { align-self: flex-start; font-size: 14px; }
#nr-art-soon { padding: 32px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; border: 1px dashed #DCD4C2; background: #fff; box-shadow: none; }
#nr-art-soon-kicker { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(18,18,20,0.4); }
#nr-art-soon h3 { margin: 0; font-family: var(--Heading, sans-serif); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: rgba(18,18,20,0.7); }
#nr-art-soon > :last-child { margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(18,18,20,0.55); }

/* --- 5. Subscribe #nr-subscribe (dark + tex-b, inline Newsletter GF) --- */
#nr-subscribe { background: #121214; color: #f5f2ec; padding: 100px 32px; position: relative; overflow: hidden; isolation: isolate; }
#nr-subscribe-tex { padding: 0; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(18,18,20,0.6), rgba(18,18,20,0.6)), var(--hbi-img-tex-b); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; }
#nr-subscribe-inner { max-width: 880px; margin-inline: auto; text-align: center; align-items: center; gap: 0; }
#nr-sub-h2 { margin: 0; }
#nr-sub-lead { margin: 20px auto 0; max-width: 520px; color: rgba(245,242,236,0.7); text-align: center; }
#nr-subscribe-mount { padding: 0; width: 100%; margin-top: 34px; align-items: center; }
#nr-sub-note { margin: 16px 0 0; font-size: 12.5px; color: rgba(245,242,236,0.45); }
#nr-subscribe-mount .gform_wrapper { width: 100%; }
#nr-subscribe-mount .gform_wrapper form { display: flex !important; gap: 12px !important; justify-content: center !important; flex-wrap: wrap !important; }
#nr-subscribe-mount .gform_body { flex: 0 1 auto !important; margin: 0 !important; }
#nr-subscribe-mount .gform_fields { display: block !important; }
#nr-subscribe-mount .gfield_label, #nr-subscribe-mount .gform_required_legend { display: none !important; }
#nr-subscribe-mount input[type="email"] { background: #17171A !important; border: 1px solid rgba(245,242,236,0.14) !important; border-radius: 4px !important; color: #f5f2ec !important; font-family: inherit !important; font-size: 15px !important; padding: 0 18px !important; min-width: 300px !important; height: 48px !important; line-height: normal !important; } /* GF fixes inputs at 38px; match the button */
#nr-subscribe-mount input::placeholder { color: rgba(245,242,236,0.35) !important; }
#nr-subscribe-mount input:focus { border-color: var(--Gold, #b08d4f) !important; outline: none !important; box-shadow: none !important; }
#nr-subscribe-mount .gform_footer { margin: 0 !important; padding: 0 !important; }
#nr-subscribe-mount .gform_button { background: var(--Gold, #b08d4f) !important; color: #121214 !important; border: none !important; border-radius: 4px !important; font-family: var(--Heading, sans-serif) !important; font-weight: 600 !important; font-size: 15px !important; padding: 0 28px !important; height: 48px !important; min-height: 0 !important; line-height: normal !important; cursor: pointer !important; transition: background 0.3s ease !important; }
#nr-subscribe-mount .gform_button:hover { background: var(--Gold-Bright, #c9a56a) !important; }
#nr-subscribe-mount .gform_confirmation_message { color: rgba(245,242,236,0.82); font-size: 16px; }

/* --- 6. CTA #nr-cta (radial + tex-a + rings) --- */
#nr-cta { background: radial-gradient(900px 500px at 50% 120%, #201D18 0%, #121214 65%); color: #f5f2ec; padding: 130px 32px; position: relative; overflow: hidden; border-top: 1px solid rgba(176,141,79,0.25); isolation: isolate; }
#nr-cta-tex { padding: 0; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: var(--hbi-img-tex-a); background-size: cover; background-position: center bottom; background-repeat: no-repeat; opacity: 0.3; transform: scaleY(-1); }
#nr-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 449px, rgba(176, 141, 79, 0.25) 449px, rgba(176, 141, 79, 0.25) 450px, transparent 450px),
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 529px, rgba(176, 141, 79, 0.15) 529px, rgba(176, 141, 79, 0.15) 530px, transparent 530px);
}
#nr-cta-inner { max-width: 780px; text-align: center; align-items: center; gap: 0; position: relative; z-index: 1; }
#nr-cta-h2 { margin: 0; font-size: clamp(38px, 4.4vw, 62px); letter-spacing: -0.03em; line-height: 1.06; }
#nr-cta-lead { margin: 24px auto 0; max-width: 520px; color: rgba(245,242,236,0.72); text-align: center; }
#nr-cta-ctas { padding: 0; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 44px; }

/* --- Responsive --- */
@media (max-width: 900px) {
    #nr-featured-card { grid-template-columns: 1fr; gap: 32px; }
    #nr-grid-head { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Single article template (single.php, #ar-* / .hbi-article-body) — from
   4a. article.html. Plain theme markup (not Elementor), so no atomic resets.
   ========================================================================== */

/* Hero */
#ar-hero { position: relative; background: #101012; color: var(--Cream); overflow: hidden; }
#ar-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(180deg, rgba(18,18,20,0.9), rgba(18,18,20,0.93)), var(--hbi-img-hero);
    background-size: cover, cover; background-position: center, 50% 40%; background-repeat: no-repeat, no-repeat;
}
#ar-hero-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; padding: 88px 32px 80px; }
#ar-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0; font-family: var(--Heading); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,236,0.45); }
#ar-breadcrumb a { color: rgba(245,242,236,0.45); text-decoration: none; transition: color .25s ease; }
#ar-breadcrumb a:hover { color: var(--Gold); }
#ar-crumb { color: var(--Gold); }
#ar-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 36px 0 0; font-family: var(--Heading); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
#ar-meta .ar-meta-cat { color: var(--Gold); }
#ar-meta > span:not(.ar-meta-cat):not(.ar-dot) { color: rgba(245,242,236,0.55); }
#ar-meta .ar-dot { color: rgba(245,242,236,0.3); }
#ar-title { font-family: var(--Heading); font-weight: 700; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.08; letter-spacing: -0.025em; margin: 22px 0 0; color: var(--Cream); }
#ar-excerpt { font-size: 19px; line-height: 1.7; color: rgba(245,242,236,0.72); margin: 26px 0 0; }
#ar-author { display: flex; align-items: center; gap: 16px; margin: 36px 0 0; padding-top: 28px; border-top: 1px solid rgba(245,242,236,0.12); }
#ar-author .ar-avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid rgba(176,141,79,0.6); font-family: var(--Heading); font-size: 14px; font-weight: 600; color: var(--Gold); }
#ar-author .ar-author-meta { font-size: 14px; line-height: 1.5; }
#ar-author .ar-author-name { font-family: var(--Heading); font-weight: 600; color: var(--Cream); }
#ar-author .ar-author-role { color: rgba(245,242,236,0.55); }

/* Body */
/* padding-top here (not margin-top on the figure) keeps the gap inside the light
   section — a figure margin-top collapses out through this section and shows the
   dark page background as a big black gap under the hero. */
#ar-body { background: #F5F2EC; color: #121214; padding: 80px 32px 100px; position: relative; }
#ar-body-inner { max-width: 1160px; margin: 0 auto; }
#ar-figure { aspect-ratio: 16 / 8; border-radius: 14px; overflow: hidden; margin-top: 0; border: 1px solid #E5DFD2; box-shadow: 0 18px 50px rgba(18,18,20,0.25); }
#ar-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
#ar-body-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); margin-top: 64px; align-items: start; }

/* TOC sidebar */
#ar-toc { position: sticky; top: 108px; }
#ar-toc .ar-toc-title { font-family: var(--Heading); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(18,18,20,0.45); }
#ar-toc .ar-toc-links { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; font-size: 14px; line-height: 1.5; }
#ar-toc .ar-toc-links a { color: rgba(18,18,20,0.7); text-decoration: none; transition: color .2s ease; }
#ar-toc .ar-toc-links a:hover, #ar-toc .ar-toc-links a.is-active { color: var(--Gold); }
#ar-toc .ar-share { margin-top: 32px; padding-top: 24px; border-top: 1px solid #E0D9C9; font-size: 13px; color: rgba(18,18,20,0.5); }
#ar-toc .ar-share-links { display: flex; gap: 10px; margin-top: 12px; }
#ar-toc .ar-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #E0D9C9; border-radius: 6px; color: var(--Gold); text-decoration: none; transition: border-color .25s ease; }
#ar-toc .ar-share-btn:hover { border-color: var(--Gold); }

/* Article body (post content) */
.hbi-article-body { max-width: 68ch; }
.hbi-article-body > :first-child { margin-top: 0; }
.hbi-article-body p { font-size: 17.5px; line-height: 1.8; color: rgba(18,18,20,0.78); margin: 0 0 24px; }
.hbi-article-body h2 { font-family: var(--Heading); font-weight: 700; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.02em; line-height: 1.2; margin: 48px 0 18px; color: #121214; scroll-margin-top: 96px; }
.hbi-article-body ul, .hbi-article-body ol { margin: 0 0 24px; padding-left: 22px; font-size: 17.5px; line-height: 1.85; color: rgba(18,18,20,0.78); }
.hbi-article-body li { margin-bottom: 8px; }
.hbi-article-body blockquote { margin: 40px 0; padding: 28px 32px; background: #fff; border: 1px solid #E5DFD2; border-left: 2px solid var(--Gold); border-radius: 10px; font-family: var(--hbi-font-quote); font-style: italic; font-size: clamp(21px, 2vw, 27px); line-height: 1.45; color: #121214; }
/* wpautop wraps the quote text in a <p>; without this the .hbi-article-body p
   rule (17.5px) shrinks it. Inherit the blockquote's Cormorant size/style. */
.hbi-article-body blockquote p { margin: 0; font: inherit; color: inherit; }
.hbi-article-body blockquote p + p { margin-top: 16px; }
.hbi-article-body a { color: var(--Gold); }

/* Promo box + author bio (static, in the article column) */
.ar-promo { margin-top: 48px; padding: 32px; background: #fff; border: 1px solid #E5DFD2; border-radius: 14px; }
.ar-promo-kicker { font-family: var(--Heading); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--Gold); }
.ar-promo-text { font-size: 16.5px; line-height: 1.7; color: rgba(18,18,20,0.7); margin: 14px 0 22px; }
.ar-promo-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
/* scoped under .ar-promo so the button colors beat .hbi-article-body a (0,1,1) */
.ar-promo .ar-promo-btn { background: #121214; color: var(--Cream); font-family: var(--Heading); font-weight: 600; font-size: 14.5px; padding: 14px 26px; border-radius: 4px; text-decoration: none; transition: background .3s ease; }
.ar-promo .ar-promo-btn:hover { background: #2D2D2D; color: var(--Cream); }
.ar-promo .ar-promo-btn-ghost { border: 1px solid rgba(18,18,20,0.2); color: #121214; font-family: var(--Heading); font-weight: 600; font-size: 14.5px; padding: 13px 26px; border-radius: 4px; text-decoration: none; transition: border-color .3s ease, color .3s ease; }
.ar-promo .ar-promo-btn-ghost:hover { border-color: var(--Gold); color: var(--Gold); }
.ar-bio { display: flex; gap: 18px; align-items: flex-start; margin-top: 40px; padding-top: 32px; border-top: 1px solid #E0D9C9; }
.ar-bio-avatar { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex: none; border-radius: 50%; border: 1px solid rgba(176,141,79,0.6); font-family: var(--Heading); font-size: 15px; font-weight: 600; color: var(--Gold); }
.ar-bio-name { font-family: var(--Heading); font-size: 16px; font-weight: 600; color: #121214; }
.ar-bio-role { font-size: 13.5px; color: rgba(18,18,20,0.55); margin-top: 4px; }
.ar-bio-text { font-size: 15px; line-height: 1.7; color: rgba(18,18,20,0.65); margin: 12px 0 0; max-width: 52ch; }

/* Related */
#ar-related { background: #FCFAF6; color: #121214; border-top: 1px solid #E8E2D4; padding: 80px 32px; }
#ar-related-inner { max-width: 1280px; margin: 0 auto; }
.ar-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--Heading); font-size: 12px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--Gold); }
.ar-eyebrow-dash { width: 24px; height: 1px; background: var(--Gold); flex: none; }
#ar-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 32px; }
.ar-rel-card { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; background: #fff; border: 1px solid #E8E2D4; border-radius: 14px; padding: 26px; color: #121214; text-decoration: none; box-shadow: 0 2px 8px rgba(18,18,20,0.05); transition: transform .3s ease, border-color .3s ease; }
.ar-rel-card:hover { transform: translateY(-6px); border-color: rgba(176,141,79,0.6); }
.ar-rel-kicker { font-family: var(--Heading); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--Gold); }
.ar-rel-card h3 { font-family: var(--Heading); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; margin: 12px 0 0; color: #121214; }
.ar-rel-link { font-family: var(--Heading); font-size: 14px; font-weight: 600; color: var(--Gold); }

/* CTA */
#ar-cta { position: relative; overflow: hidden; background: radial-gradient(900px 500px at 50% 120%, #201D18 0%, #121214 65%); color: var(--Cream); padding: 130px 32px; border-top: 1px solid rgba(176,141,79,0.25); isolation: isolate; }
#ar-cta-tex { position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: var(--hbi-img-tex-a); background-size: cover; background-position: center bottom; background-repeat: no-repeat; opacity: 0.3; transform: scaleY(-1); }
#ar-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 449px, rgba(176,141,79,0.25) 449px, rgba(176,141,79,0.25) 450px, transparent 450px),
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 529px, rgba(176,141,79,0.15) 529px, rgba(176,141,79,0.15) 530px, transparent 530px);
}
#ar-cta-inner { max-width: 780px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
#ar-cta-h2 { font-family: var(--Heading); font-weight: 700; font-size: clamp(38px, 4.4vw, 62px); letter-spacing: -0.03em; line-height: 1.06; margin: 0; }
#ar-cta-lead { font-size: 18px; line-height: 1.65; color: rgba(245,242,236,0.72); margin: 24px auto 0; max-width: 520px; }
#ar-cta-ctas { display: flex; justify-content: center; gap: 16px; margin-top: 44px; flex-wrap: wrap; }
.ar-btn { background: var(--Gold); color: #121214; font-family: var(--Heading); font-weight: 600; font-size: 16px; padding: 17px 34px; border-radius: 4px; text-decoration: none; transition: background .3s ease; }
.ar-btn:hover { background: var(--Gold-Bright); color: #121214; }
.ar-btn-ghost { border: 1px solid rgba(245,242,236,0.3); color: var(--Cream); font-family: var(--Heading); font-weight: 500; font-size: 16px; padding: 16px 34px; border-radius: 4px; text-decoration: none; transition: border-color .3s ease, color .3s ease; }
.ar-btn-ghost:hover { border-color: var(--Gold); color: var(--Gold); }

/* Responsive */
@media (max-width: 860px) {
    #ar-body-grid { grid-template-columns: 1fr; }
    #ar-toc { position: static; }
    #ar-body { padding-top: 56px; }
}

/* ==========================================================================
   Contact (post 192, #ct-*) — from 5. contact.html
   Hero (01) + ticker + enquiry form (02, dark: Gravity Form mount + info cards)
   + full-bleed Map (styled placeholder) + Related (3 cards) + CTA band (03).
   ========================================================================== */

.page-id-192 .elementor .h-hero { font-size: clamp(44px, 5.8vw, 80px); line-height: 1.02; letter-spacing: -0.025em; }
.page-id-192 .elementor .h-sec { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; }
.page-id-192 .elementor .inner { position: relative; z-index: 1; }
.page-id-192 .elementor .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; }
.page-id-192 .elementor .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--Gold, #b08d4f); flex: none; }

/* Numerals 01 / 02 / 03 (hero, form, cta) */
#ct-top::after, #ct-form::after, #ct-cta::after {
    position: absolute; top: 20px; left: 16px; font-family: var(--Heading, sans-serif);
    font-size: clamp(120px, 13vw, 210px); font-weight: 700; line-height: 0.8; letter-spacing: -0.04em;
    color: var(--Gold, #b08d4f); opacity: 0.08; font-variant-numeric: tabular-nums; user-select: none; pointer-events: none;
}
#ct-top::after { content: "01"; }
#ct-form::after { content: "02"; }
#ct-cta::after { content: "03"; }

/* --- 1. Hero #ct-top --- */
#ct-top { background: #101012; padding: 96px 32px 88px; overflow: hidden; position: relative; }
#ct-top::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(90deg, rgba(18,18,20,0.96) 0%, rgba(18,18,20,0.88) 50%, rgba(18,18,20,0.6) 100%), var(--hbi-img-hero);
    background-size: cover, cover; background-position: center, 50% 50%; background-repeat: no-repeat, no-repeat;
}
#ct-hero-inner { gap: 0; }
#ct-breadcrumb { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,236,0.45); }
#ct-breadcrumb a { color: rgba(245,242,236,0.45); text-decoration: none; transition: color 0.25s ease; }
#ct-breadcrumb a:hover { color: var(--Gold, #b08d4f); }
#ct-crumb { color: var(--Gold, #b08d4f); }
#ct-hero-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; margin-top: 44px; }
#ct-h1 { margin: 24px 0 0; max-width: 16ch; }
#ct-accent { color: var(--Gold, #b08d4f); }
#ct-hero-lead { margin: 28px 0 0; max-width: 620px; color: rgba(245,242,236,0.72); }

/* --- 2. Ticker #ct-ticker --- */
#ct-ticker { width: 100%; padding: 13px 0; overflow: hidden; background: #17161a; border-top: 1px solid rgba(176,141,79,0.35); border-bottom: 1px solid rgba(176,141,79,0.35); }
#ct-ticker-track { display: flex; width: max-content; gap: 0; padding: 0; animation: hbiTickerAbout 50s linear infinite; }
#ct-ticker:hover #ct-ticker-track { animation-play-state: paused; }
#ct-ticker-track > * { display: flex; align-items: center; gap: 40px; padding: 0 40px 0 0; width: auto; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(245,242,236,0.75); white-space: nowrap; }
#ct-ticker-track > * > * { width: auto; margin: 0; }
#ct-ticker-track > * > :nth-child(even) { color: var(--Gold, #b08d4f); font-size: 8px; letter-spacing: normal; }

/* --- 3. Contact form #ct-form (dark; left form mount + right info cards) --- */
#ct-form { background: #121214; color: #f5f2ec; padding: 100px 32px; position: relative; }
#ct-form-inner { gap: 0; }
#ct-form-grid { padding: 0; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 5vw, 80px); align-items: start; width: 100%; }
#ct-form-mount { padding: 36px 34px 34px; flex-direction: column; align-items: stretch; gap: 0; width: 100%; background: #1B1B1F; border: 1px solid rgba(245,242,236,0.09); border-top: 2px solid var(--Gold, #b08d4f); border-radius: 10px; }
#ct-form-title { margin: 0; font-family: var(--Heading, sans-serif); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: #f5f2ec; }
#ct-form-sub { margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: rgba(245,242,236,0.62); }
#ct-form-note { margin: 18px 0 0; font-size: 12.5px; line-height: 1.7; color: rgba(245,242,236,0.45); }
#ct-form-note a { color: rgba(245,242,236,0.7); text-decoration: underline; }
#ct-form-note a:hover { color: var(--Gold, #b08d4f); }

/* Contact Enquiry — a Gravity Form embedded via [hbi_contact_form], restyled to
   the dark card design. Scoped to the mount; !important because Orbital ships
   scoped stylesheets that outrank plain selectors. Two-column layout comes from
   the fields' layoutGridColumnSpan (6/6 pairs, 12 for full width). */
#ct-form-mount .gform_wrapper { margin-top: 28px; }
#ct-form-mount .gform_required_legend { display: none !important; }
#ct-form-mount .gform_fields { gap: 18px !important; }
#ct-form-mount .gfield_label { font-family: var(--Heading, sans-serif) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(245,242,236,0.55) !important; margin: 0 0 8px !important; }
#ct-form-mount .gfield_required { display: none !important; }
#ct-form-mount input[type="text"], #ct-form-mount input[type="email"], #ct-form-mount input[type="tel"], #ct-form-mount textarea {
    background: #17171A !important; border: 1px solid rgba(245,242,236,0.14) !important; border-radius: 6px !important; color: #f5f2ec !important; font-family: inherit !important; font-size: 15px !important; padding: 14px 16px !important; width: 100% !important; box-shadow: none !important;
}
#ct-form-mount textarea { resize: vertical !important; }
#ct-form-mount input::placeholder, #ct-form-mount textarea::placeholder { color: rgba(245,242,236,0.35) !important; }
#ct-form-mount input:focus, #ct-form-mount textarea:focus { border-color: var(--Gold, #b08d4f) !important; outline: none !important; box-shadow: none !important; }
#ct-form-mount .gfield--type-checkbox .gfield_label,
#ct-form-mount .gfield--type-checkbox legend { display: none !important; }
#ct-form-mount .gfield--type-checkbox .gchoice { display: flex !important; gap: 12px !important; align-items: flex-start !important; }
#ct-form-mount .gfield--type-checkbox .gchoice input[type="checkbox"] { flex: none !important; margin-top: 3px !important; width: 16px !important; height: 16px !important; accent-color: var(--Gold, #b08d4f); }
#ct-form-mount .gfield--type-checkbox .gchoice label { font-family: inherit !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.6 !important; letter-spacing: 0 !important; text-transform: none !important; color: rgba(245,242,236,0.62) !important; margin: 0 !important; }
#ct-form-mount .gform_footer { margin: 24px 0 0 !important; padding: 0 !important; }
#ct-form-mount .gform_button { background: var(--Gold, #b08d4f) !important; color: #121214 !important; border: none !important; border-radius: 4px !important; font-family: var(--Heading, sans-serif) !important; font-weight: 600 !important; font-size: 16px !important; padding: 17px 32px !important; width: 100% !important; cursor: pointer !important; transition: background 0.3s ease !important; }
#ct-form-mount .gform_button:hover { background: var(--Gold-Bright, #c9a56a) !important; }
#ct-form-mount .gform_validation_errors, #ct-form-mount .gfield_description, #ct-form-mount .validation_message { background: transparent !important; border: none !important; color: rgba(245,242,236,0.6) !important; font-size: 12.5px !important; }
#ct-form-mount .gform_confirmation_message { color: rgba(245,242,236,0.82); font-size: 16px; line-height: 1.7; }

/* Info card stack (right column) */
#ct-info { padding: 0; flex-direction: column; gap: 16px; width: 100%; }
#ct-info > * { padding: 24px 26px; flex-direction: column; align-items: flex-start; gap: 0; background: #1B1B1F; border: 1px solid rgba(245,242,236,0.09); border-radius: 10px; transition: border-color 0.3s ease; }
#ct-info > *:not(#ct-info-note):hover { border-color: rgba(176,141,79,0.5); }
#ct-info > * > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#ct-info > * > :nth-child(2) { margin: 12px 0 0; font-size: 16px; line-height: 1.7; color: #f5f2ec; }
#ct-info > * > :nth-child(3) { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: rgba(245,242,236,0.55); }
#ct-info a { color: inherit; text-decoration: none; transition: color 0.25s ease; }
#ct-info a:hover { color: var(--Gold, #b08d4f); }
#ct-info-email > :nth-child(2), #ct-info-linkedin > :nth-child(2) { font-family: var(--Heading, sans-serif); font-size: 18px; font-weight: 600; }
#ct-info-note { background: #17171A; border: 1px solid rgba(176,141,79,0.3); }
#ct-info-note > :nth-child(2) { font-size: 14.5px; line-height: 1.75; color: rgba(245,242,236,0.7); }

/* --- 4. Map #ct-map (full-bleed 2-col: text + styled placeholder) --- */
#ct-map { background: #F5F2EC; color: #121214; padding: 0; position: relative; }
#ct-map-grid { padding: 0; display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: stretch; width: 100%; }
#ct-map-text { padding: clamp(56px, 6vw, 96px) clamp(32px, 4vw, 64px); flex-direction: column; align-items: flex-start; gap: 0; }
#ct-map-h2 { margin: 18px 0 0; font-size: clamp(28px, 2.9vw, 40px); line-height: 1.12; color: #121214; }
#ct-map-lead { margin: 20px 0 0; font-size: 16.5px; line-height: 1.75; color: rgba(18,18,20,0.68); max-width: 420px; }
#ct-map-addr { margin: 26px 0 0; font-size: 15px; line-height: 1.9; color: rgba(18,18,20,0.7); }
#ct-map-link { margin-top: 24px; font-size: 15px; }
#ct-map-embed { padding: 0; position: relative; min-height: 420px; background: #E8E2D4; display: flex; align-items: center; justify-content: center; border-left: 1px solid #E0D9C9; }
#ct-map-embed::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: repeating-linear-gradient(0deg, rgba(18,18,20,0.06) 0 1px, transparent 1px 56px), repeating-linear-gradient(90deg, rgba(18,18,20,0.06) 0 1px, transparent 1px 56px);
}
/* When the live Google Map is injected (site.js), fill the box and drop the placeholder. */
#ct-map-embed.has-map::before { display: none; }
#ct-map-embed.has-map > :not(iframe) { display: none; }
#ct-map-embed.has-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
#ct-map-marker { padding: 0; position: relative; flex-direction: column; align-items: center; gap: 0; text-align: center; }
#ct-map-dot { padding: 0; margin: 0 auto; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--Gold, #b08d4f); box-shadow: 0 0 0 8px rgba(176,141,79,0.25); }
#ct-map-cap { margin: 16px 0 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(18,18,20,0.5); }

/* --- 5. Related #ct-related (light, 3 cards) --- */
#ct-related { background: #FCFAF6; color: #121214; border-top: 1px solid #E8E2D4; padding: 80px 32px; }
#ct-related-inner { gap: 0; }
#ct-rel-grid { padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 32px; width: 100%; }
#ct-rel-grid > * { padding: 26px; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; background: #fff; border: 1px solid #E8E2D4; border-radius: 14px; color: #121214; box-shadow: 0 2px 8px rgba(18,18,20,0.05); transition: transform 0.3s ease, border-color 0.3s ease; }
#ct-rel-grid > *:hover { transform: translateY(-6px); border-color: rgba(176,141,79,0.6); }
#ct-rel-grid > * > :first-child { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#ct-rel-grid > * > :first-child > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#ct-rel-grid > * h3 { margin: 12px 0 0; font-family: var(--Heading, sans-serif); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: #121214; }
#ct-rel-grid > * .link-gold { font-size: 14px; }

/* --- 6. CTA #ct-cta (radial + tex-a + rings) --- */
#ct-cta { background: radial-gradient(900px 500px at 50% 120%, #201D18 0%, #121214 65%); color: #f5f2ec; padding: 130px 32px; position: relative; overflow: hidden; border-top: 1px solid rgba(176,141,79,0.25); isolation: isolate; }
#ct-cta-tex { padding: 0; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: var(--hbi-img-tex-a); background-size: cover; background-position: center bottom; background-repeat: no-repeat; opacity: 0.3; transform: scaleY(-1); }
#ct-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 449px, rgba(176, 141, 79, 0.25) 449px, rgba(176, 141, 79, 0.25) 450px, transparent 450px),
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 529px, rgba(176, 141, 79, 0.15) 529px, rgba(176, 141, 79, 0.15) 530px, transparent 530px);
}
#ct-cta-inner { max-width: 780px; text-align: center; align-items: center; gap: 0; position: relative; z-index: 1; }
#ct-cta-h2 { margin: 0; font-size: clamp(38px, 4.4vw, 62px); letter-spacing: -0.03em; line-height: 1.06; }
#ct-cta-lead { margin: 24px auto 0; max-width: 520px; color: rgba(245,242,236,0.72); text-align: center; }
#ct-cta-ctas { padding: 0; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 44px; }

/* --- Responsive --- */
@media (max-width: 900px) {
    #ct-form-grid { grid-template-columns: 1fr; gap: 40px; }
    #ct-map-grid { grid-template-columns: 1fr; }
    #ct-map-embed { border-left: 0; border-top: 1px solid #E0D9C9; min-height: 320px; }
}

/* ==========================================================================
   Legal (post 200, #lg-*) — from 6a. legal.html
   Hero (01) + "Policies & procedures" index of 4 link cards + FCA notice (02)
   + ringed CTA band (03). The legal hub; card links resolve to the sub-pages.
   ========================================================================== */

.page-id-200 .elementor .h-hero { font-size: clamp(44px, 5.8vw, 80px); line-height: 1.02; letter-spacing: -0.025em; }
.page-id-200 .elementor .h-sec { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; }
.page-id-200 .elementor .inner { position: relative; z-index: 1; }
.page-id-200 .elementor .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; }
.page-id-200 .elementor .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--Gold, #b08d4f); flex: none; }

/* Numerals 01 / 02 / 03 */
#lg-top::after, #lg-index::after, #lg-cta::after {
    position: absolute; top: 20px; left: 16px; font-family: var(--Heading, sans-serif);
    font-size: clamp(120px, 13vw, 210px); font-weight: 700; line-height: 0.8; letter-spacing: -0.04em;
    color: var(--Gold, #b08d4f); opacity: 0.08; font-variant-numeric: tabular-nums; user-select: none; pointer-events: none;
}
#lg-top::after { content: "01"; }
#lg-index::after { content: "02"; }
#lg-cta::after { content: "03"; }

/* --- 1. Hero #lg-top --- */
#lg-top { background: #101012; padding: 88px 32px 80px; overflow: hidden; position: relative; }
#lg-top::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(90deg, rgba(18,18,20,0.96) 0%, rgba(18,18,20,0.88) 50%, rgba(18,18,20,0.6) 100%), var(--hbi-img-hero);
    background-size: cover, cover; background-position: center, 50% 50%; background-repeat: no-repeat, no-repeat;
}
#lg-hero-inner { gap: 0; }
#lg-breadcrumb { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,236,0.45); }
#lg-breadcrumb a { color: rgba(245,242,236,0.45); text-decoration: none; transition: color 0.25s ease; }
#lg-breadcrumb a:hover { color: var(--Gold, #b08d4f); }
#lg-crumb { color: var(--Gold, #b08d4f); }
#lg-hero-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; margin-top: 44px; }
#lg-h1 { margin: 24px 0 0; max-width: 20ch; }
#lg-accent { color: var(--Gold, #b08d4f); }
#lg-hero-lead { margin: 28px 0 0; max-width: 620px; color: rgba(245,242,236,0.72); }

/* --- 2. Legal index #lg-index (light: 4 link cards + notice) --- */
#lg-index { background: #F5F2EC; color: #121214; padding: 100px 32px; position: relative; }
#lg-index-inner { gap: 0; }
#lg-cards { padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 36px; width: 100%; }
#lg-cards > * { padding: 30px 28px; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 28px; background: #fff; border: 1px solid #E8E2D4; border-radius: 14px; color: #121214; box-shadow: 0 2px 8px rgba(18,18,20,0.05); transition: transform 0.3s ease, border-color 0.3s ease; }
#lg-cards > *:hover { transform: translateY(-6px); border-color: rgba(176,141,79,0.6); }
#lg-cards > * > :first-child { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
#lg-cards > * > :first-child > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: var(--Gold, #b08d4f); font-variant-numeric: tabular-nums; }
#lg-cards > * h2 { margin: 18px 0 10px; font-family: var(--Heading, sans-serif); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: #121214; }
#lg-cards > * > :first-child > :last-child { margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(18,18,20,0.62); }
#lg-cards > * .link-gold { font-size: 14px; }
#lg-notice { margin: 40px 0 0; padding: 26px 28px; max-width: 780px; background: #fff; border: 1px solid #E5DFD2; border-left: 2px solid var(--Gold, #b08d4f); border-radius: 10px; font-size: 15px; line-height: 1.75; color: rgba(18,18,20,0.7); }

/* --- 3. CTA #lg-cta (radial + tex-a + rings) --- */
#lg-cta { background: radial-gradient(900px 500px at 50% 120%, #201D18 0%, #121214 65%); color: #f5f2ec; padding: 130px 32px; position: relative; overflow: hidden; border-top: 1px solid rgba(176,141,79,0.25); isolation: isolate; }
#lg-cta-tex { padding: 0; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: var(--hbi-img-tex-a); background-size: cover; background-position: center bottom; background-repeat: no-repeat; opacity: 0.3; transform: scaleY(-1); }
#lg-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 449px, rgba(176, 141, 79, 0.25) 449px, rgba(176, 141, 79, 0.25) 450px, transparent 450px),
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 529px, rgba(176, 141, 79, 0.15) 529px, rgba(176, 141, 79, 0.15) 530px, transparent 530px);
}
#lg-cta-inner { max-width: 780px; text-align: center; align-items: center; gap: 0; position: relative; z-index: 1; }
#lg-cta-h2 { margin: 0; font-size: clamp(38px, 4.4vw, 62px); letter-spacing: -0.03em; line-height: 1.06; }
#lg-cta-lead { margin: 24px auto 0; max-width: 520px; color: rgba(245,242,236,0.72); text-align: center; }
#lg-cta-ctas { padding: 0; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 44px; }

/* ==========================================================================
   Legal Document template (page-legal.php, #lgl-* / .hbi-legal-*)
   — from 6b. privacy-policy.html. Reused by all four legal documents.
   Plain theme markup (NOT Elementor), so no .elementor prefix / global-class
   resets — styled directly like the article template. Body h2s are
   auto-numbered 01, 02, … with a CSS counter.
   ========================================================================== */

/* --- Hero #lgl-hero (dark, 3-level breadcrumb, no numeral) --- */
#lgl-hero { position: relative; overflow: hidden; background: #101012; color: var(--Cream, #f5f2ec); padding: 80px 32px 72px; }
#lgl-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(180deg, rgba(18,18,20,0.92) 0%, rgba(18,18,20,0.95) 100%), var(--hbi-img-hero);
    background-size: cover, cover; background-position: center, 50% 45%; background-repeat: no-repeat, no-repeat;
}
#lgl-hero-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; }
#lgl-breadcrumb { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,236,0.45); }
#lgl-breadcrumb a { color: rgba(245,242,236,0.45); text-decoration: none; transition: color 0.25s ease; }
#lgl-breadcrumb a:hover { color: var(--Gold, #b08d4f); }
#lgl-crumb { color: var(--Gold, #b08d4f); }
#lgl-title { font-family: var(--Heading, sans-serif); font-weight: 700; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -0.025em; margin: 32px 0 0; color: var(--Cream, #f5f2ec); }
#lgl-lead { font-size: 17.5px; line-height: 1.7; color: rgba(245,242,236,0.72); margin: 22px 0 0; max-width: 640px; }
#lgl-meta { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 30px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,242,236,0.45); }

/* --- Document #lgl-doc (light: sticky sidebar + prose article) --- */
#lgl-doc { background: #F5F2EC; color: #121214; padding: 80px 32px 100px; }
#lgl-doc-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
#lgl-aside { position: sticky; top: 108px; }
.lgl-aside-label { font-family: var(--Heading, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(18,18,20,0.45); }
.lgl-aside-nav { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; font-size: 14.5px; }
.lgl-aside-nav a { color: rgba(18,18,20,0.7); text-decoration: none; transition: color 0.25s ease; }
.lgl-aside-nav a:hover { color: var(--Gold, #b08d4f); }
.lgl-aside-nav .is-current { color: var(--Gold, #b08d4f); font-weight: 600; }
.lgl-aside-contact { margin-top: 28px; padding-top: 22px; border-top: 1px solid #E0D9C9; font-size: 13.5px; line-height: 1.7; color: rgba(18,18,20,0.55); }
.lgl-aside-contact a { color: var(--Gold, #b08d4f); text-decoration: none; }
.lgl-aside-contact a:hover { text-decoration: underline; }

/* --- Prose body (.hbi-legal-body): CSS-counter-numbered h2s --- */
.hbi-legal-body { max-width: 74ch; counter-reset: lgl; }
.hbi-legal-body h2 { counter-increment: lgl; display: flex; gap: 16px; align-items: baseline; font-family: var(--Heading, sans-serif); font-weight: 700; font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.015em; line-height: 1.25; color: #121214; margin: 44px 0 16px; }
.hbi-legal-body h2:first-child { margin-top: 0; }
.hbi-legal-body h2::before { content: counter(lgl, decimal-leading-zero); flex: none; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--Gold, #b08d4f); font-variant-numeric: tabular-nums; }
.hbi-legal-body p { font-size: 16.5px; line-height: 1.8; color: rgba(18,18,20,0.75); margin: 0 0 18px; text-wrap: pretty; }
.hbi-legal-body ul { margin: 0 0 18px; padding-left: 22px; font-size: 16.5px; line-height: 1.85; color: rgba(18,18,20,0.75); }
.hbi-legal-body li { margin-bottom: 6px; }
.hbi-legal-body a { color: var(--Gold, #b08d4f); }
.hbi-legal-note { margin-top: 48px; padding: 24px 26px; background: #fff; border: 1px solid #E5DFD2; border-left: 2px solid var(--Gold, #b08d4f); border-radius: 10px; }
.hbi-legal-note p { font-size: 14.5px; line-height: 1.75; color: rgba(18,18,20,0.68); margin: 0; }

/* --- CTA #lgl-cta (radial + tex-a + rings) --- */
#lgl-cta { position: relative; overflow: hidden; background: radial-gradient(900px 500px at 50% 120%, #201D18 0%, #121214 65%); color: var(--Cream, #f5f2ec); padding: 130px 32px; border-top: 1px solid rgba(176,141,79,0.25); isolation: isolate; }
#lgl-cta::after {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background-image: var(--hbi-img-tex-a); background-size: cover; background-position: center bottom; background-repeat: no-repeat; opacity: 0.3; transform: scaleY(-1);
}
#lgl-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 449px, rgba(176, 141, 79, 0.25) 449px, rgba(176, 141, 79, 0.25) 450px, transparent 450px),
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 529px, rgba(176, 141, 79, 0.15) 529px, rgba(176, 141, 79, 0.15) 530px, transparent 530px);
}
#lgl-cta-inner { max-width: 780px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
#lgl-cta-h2 { font-family: var(--Heading, sans-serif); font-weight: 700; font-size: clamp(38px, 4.4vw, 62px); letter-spacing: -0.03em; line-height: 1.06; margin: 0; }
#lgl-cta-lead { font-size: 18px; line-height: 1.65; color: rgba(245,242,236,0.72); margin: 24px auto 0; max-width: 520px; }
#lgl-cta-ctas { display: flex; justify-content: center; gap: 16px; margin-top: 44px; flex-wrap: wrap; }
.lgl-btn { background: var(--Gold, #b08d4f); color: #121214; font-family: var(--Heading, sans-serif); font-weight: 600; font-size: 16px; padding: 17px 34px; border-radius: 4px; text-decoration: none; transition: background 0.3s ease; }
.lgl-btn:hover { background: var(--Gold-Bright, #c9a56a); color: #121214; }
.lgl-btn-ghost { border: 1px solid rgba(245,242,236,0.3); color: var(--Cream, #f5f2ec); font-family: var(--Heading, sans-serif); font-weight: 500; font-size: 16px; padding: 16px 34px; border-radius: 4px; text-decoration: none; transition: border-color 0.3s ease, color 0.3s ease; }
.lgl-btn-ghost:hover { border-color: var(--Gold, #b08d4f); color: var(--Gold, #b08d4f); }

/* --- Responsive --- */
@media (max-width: 860px) {
    #lgl-doc-grid { grid-template-columns: 1fr; gap: 40px; }
    #lgl-aside { position: static; }
}

/* ==========================================================================
   Case Studies index (/case-studies/, build-cs.php) — #cs-*  (atomic Elementor)
   ========================================================================== */

/* section numerals */
#cs-top::after, #cs-list::after, #cs-cta::after {
    content: ""; position: absolute; top: 20px; left: 16px; font-family: var(--Heading, sans-serif);
    font-size: clamp(120px, 13vw, 210px); font-weight: 700; line-height: 0.8; letter-spacing: -0.04em;
    color: var(--Gold, #b08d4f); opacity: 0.08; font-variant-numeric: tabular-nums; user-select: none; pointer-events: none;
}
#cs-top::after { content: "01"; }
#cs-list::after { content: "02"; }
#cs-cta::after { content: "03"; }

/* --- 1. Hero #cs-top --- */
#cs-top { background: #101012; color: var(--Cream, #F5F2EC); padding: 96px 32px 88px; overflow: hidden; position: relative; }
#cs-top::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(90deg, rgba(18,18,20,0.96) 0%, rgba(18,18,20,0.88) 50%, rgba(18,18,20,0.6) 100%), var(--hbi-img-hero);
    background-size: cover, cover; background-position: center, 45% 50%; background-repeat: no-repeat, no-repeat;
}
#cs-hero-inner { gap: 0; position: relative; z-index: 1; }
#cs-breadcrumb { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,236,0.45); }
#cs-breadcrumb a { color: rgba(245,242,236,0.45); text-decoration: none; transition: color 0.25s ease; }
#cs-breadcrumb a:hover { color: var(--Gold, #b08d4f); }
#cs-crumb { color: var(--Gold, #b08d4f); }
#cs-hero-grid { padding: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; align-items: end; margin-top: 44px; width: 100%; }
#cs-hero-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; width: auto; }
#cs-h1 { margin: 24px 0 0; max-width: 20ch; color: var(--Gold, #b08d4f); }
#cs-hero-lead { margin: 28px 0 0; max-width: 620px; color: rgba(245,242,236,0.72); }
/* hero stats card */
#cs-stats { padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid rgba(245,242,236,0.12); border-radius: 12px; overflow: hidden; background: rgba(245,242,236,0.03); width: 100%; }
#cs-stats > * { padding: 22px 24px; flex-direction: column; gap: 0; width: auto; }
#cs-stats > :first-child { border-right: 1px solid rgba(245,242,236,0.1); }
#cs-stats > * > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,242,236,0.45); }
#cs-stats > * > :last-child { margin: 8px 0 0; font-family: var(--Heading, sans-serif); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--Cream, #F5F2EC); font-variant-numeric: tabular-nums; }
#cs-stats > :first-child > :last-child { color: var(--Gold, #b08d4f); }

/* --- 2. Case list #cs-list --- */
#cs-list { background: var(--Cream, #F5F2EC); color: var(--Charcoal, #121214); padding: 100px 32px 110px; position: relative; }
#cs-list-inner { gap: 0; }
#cs-list-head { padding: 0; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; width: 100%; }
#cs-list-head-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; width: auto; flex: 1 1 320px; }
#cs-list-h2 { margin: 18px 0 0; font-size: clamp(30px, 3.2vw, 44px); color: var(--Charcoal, #121214); }
#cs-pills { padding: 0; flex-direction: row; gap: 10px; flex-wrap: wrap; width: auto; flex: 0 0 auto; }
#cs-pills > * { margin: 0; font-family: var(--Heading, sans-serif); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; padding: 9px 18px; border-radius: 999px; border: 1px solid #E0D9C9; background: transparent; color: rgba(18,18,20,0.6); width: auto; }
#cs-pill-all { border-color: var(--Gold, #b08d4f); background: var(--Gold, #b08d4f); color: #121214; }

/* card grid — structural selectors from #cs-grid (atomic cards carry no classes) */
#cs-grid { padding: 0; flex-direction: column; gap: 28px; margin-top: 56px; width: 100%; }
#cs-grid > * { padding: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; background: #FFFFFF; border: 1px solid #E8E2D4; border-radius: 16px; overflow: hidden; width: 100%; box-shadow: 0 2px 8px rgba(18,18,20,0.05); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
#cs-grid > *:hover { transform: translateY(-6px); border-color: rgba(176,141,79,0.6); box-shadow: 0 18px 44px rgba(18,18,20,0.12); }
#cs-grid > :nth-child(2) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
/* media */
#cs-grid > * > :first-child { padding: 0; overflow: hidden; min-height: 360px; width: auto; }
#cs-grid > :nth-child(2) > :first-child { order: 2; }
#cs-grid > * > :first-child > * { width: 100%; height: 100%; padding: 0; }
#cs-grid > * > :first-child img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* body */
#cs-grid > * > :last-child { padding: clamp(32px, 3.5vw, 52px); flex-direction: column; justify-content: space-between; gap: 32px; width: auto; }
#cs-grid > * > :last-child > * { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; width: auto; }
/* category · location */
#cs-grid > * > :last-child > :first-child > :nth-child(1) { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#cs-loc-1, #cs-loc-2, #cs-loc-3 { color: rgba(18,18,20,0.5); }
/* title */
#cs-grid > * > :last-child > :first-child > :nth-child(2) { margin: 18px 0 0; font-family: var(--Heading, sans-serif); font-weight: 700; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -0.02em; line-height: 1.12; color: var(--Charcoal, #121214); max-width: 18ch; }
/* excerpt */
#cs-grid > * > :last-child > :first-child > :nth-child(3) { margin: 18px 0 0; font-size: 16px; line-height: 1.75; color: rgba(18,18,20,0.65); max-width: 52ch; }
/* metrics row */
#cs-grid > * > :last-child > :last-child > :first-child { padding: 24px 0 0; border-top: 1px solid #EEE8DB; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; width: 100%; }
#cs-grid > * > :last-child > :last-child > :first-child > * { padding: 0; flex-direction: column; gap: 0; width: auto; }
#cs-grid > * > :last-child > :last-child > :first-child > * > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(18,18,20,0.45); }
#cs-grid > * > :last-child > :last-child > :first-child > * > :last-child { margin: 5px 0 0; font-family: var(--Heading, sans-serif); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--Charcoal, #121214); font-variant-numeric: tabular-nums; }
#cs-grid > * > :last-child > :last-child > :first-child > :first-child > :last-child { color: var(--Gold, #b08d4f); }
/* read-the-deal link */
#cs-grid > * > :last-child > :last-child > :last-child { margin-top: 26px; align-self: flex-start; font-size: 15px; }

/* --- 3. CTA #cs-cta (radial + tex-a + rings) --- */
#cs-cta { background: radial-gradient(900px 500px at 50% 120%, #201D18 0%, #121214 65%); color: #f5f2ec; padding: 130px 32px; position: relative; overflow: hidden; border-top: 1px solid rgba(176,141,79,0.25); isolation: isolate; }
#cs-cta-tex { padding: 0; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: var(--hbi-img-tex-a); background-size: cover; background-position: center bottom; background-repeat: no-repeat; opacity: 0.3; transform: scaleY(-1); }
#cs-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 449px, rgba(176, 141, 79, 0.25) 449px, rgba(176, 141, 79, 0.25) 450px, transparent 450px),
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 529px, rgba(176, 141, 79, 0.15) 529px, rgba(176, 141, 79, 0.15) 530px, transparent 530px);
}
#cs-cta-inner { max-width: 780px; text-align: center; align-items: center; gap: 0; position: relative; z-index: 1; }
#cs-cta-h2 { margin: 0; font-size: clamp(38px, 4.4vw, 62px); letter-spacing: -0.03em; line-height: 1.06; }
#cs-cta-lead { margin: 24px auto 0; max-width: 520px; color: rgba(245,242,236,0.72); text-align: center; }
#cs-cta-ctas { padding: 0; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 44px; }

/* --- Responsive --- */
@media (max-width: 900px) {
    #cs-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    #cs-grid > *, #cs-grid > :nth-child(2) { grid-template-columns: 1fr; }
    #cs-grid > * > :first-child, #cs-grid > :nth-child(2) > :first-child { order: 0; min-height: 240px; }
    #cs-list-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
    #cs-stats { grid-template-columns: 1fr; }
    #cs-stats > :first-child { border-right: 0; border-bottom: 1px solid rgba(245,242,236,0.1); }
    #cs-grid > * > :last-child > :last-child > :first-child { grid-template-columns: 1fr 1fr; gap: 16px; }
    #cs-list { padding: 72px 24px 80px; }
    #cs-cta { padding: 96px 24px; }
}

/* ==========================================================================
   Case Study SINGLE (/case-studies/{slug}/, build-cs-single.php) — #csx-*
   Shared layout for all 3 case pages (one renders at a time → shared ids).
   ========================================================================== */

/* --- Hero #csx-top --- */
#csx-top { background: #101012; color: var(--Cream, #F5F2EC); padding: 88px 32px 96px; overflow: hidden; position: relative; }
#csx-top::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(180deg, rgba(18,18,20,0.9) 0%, rgba(18,18,20,0.93) 100%), var(--hbi-img-hero);
    background-size: cover, cover; background-position: center, 50% 40%; background-repeat: no-repeat, no-repeat;
}
#csx-hero-inner { gap: 0; position: relative; z-index: 1; max-width: 1160px; }
#csx-breadcrumb { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,236,0.45); }
#csx-breadcrumb a { color: rgba(245,242,236,0.45); text-decoration: none; transition: color 0.25s ease; }
#csx-breadcrumb a:hover { color: var(--Gold, #b08d4f); }
#csx-crumb { color: var(--Gold, #b08d4f); }
#csx-hero-grid { padding: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: end; margin-top: 40px; width: 100%; }
#csx-hero-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; width: auto; }
#csx-cat { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#csx-cat-loc { color: rgba(245,242,236,0.55); }
#csx-h1 { margin: 22px 0 0; color: var(--Cream, #F5F2EC); font-size: clamp(36px, 4.6vw, 60px); line-height: 1.08; letter-spacing: -0.025em; }
#csx-lead { margin: 26px 0 0; font-size: 19px; line-height: 1.7; color: rgba(245,242,236,0.72); max-width: 560px; }
/* hero metrics dl */
#csx-metrics { padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid rgba(245,242,236,0.12); border-radius: 12px; overflow: hidden; background: rgba(245,242,236,0.03); width: 100%; }
#csx-metrics > * { padding: 22px 24px; flex-direction: column; gap: 0; width: auto; }
#csx-metrics > :nth-child(1), #csx-metrics > :nth-child(3) { border-right: 1px solid rgba(245,242,236,0.1); }
#csx-metrics > :nth-child(1), #csx-metrics > :nth-child(2) { border-bottom: 1px solid rgba(245,242,236,0.1); }
#csx-metrics > * > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,242,236,0.45); }
#csx-metrics > * > :last-child { margin: 8px 0 0; font-family: var(--Heading, sans-serif); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--Cream, #F5F2EC); font-variant-numeric: tabular-nums; }
#csx-metrics > :nth-child(1) > :last-child, #csx-metrics > :nth-child(2) > :last-child { color: var(--Gold, #b08d4f); }

/* --- Body #csx-body --- */
#csx-body { background: var(--Cream, #F5F2EC); color: var(--Charcoal, #121214); padding: 0 32px 100px; position: relative; }
#csx-body-inner { gap: 0; max-width: 1160px; }
#csx-figure { padding: 120px 0 0; overflow: visible; aspect-ratio: auto; }
#csx-figure > * { width: 100%; height: 100%; padding: 0; }
#csx-figure > * { aspect-ratio: 16 / 8; border-radius: 14px; overflow: hidden; border: 1px solid #E5DFD2; box-shadow: 0 18px 50px rgba(18,18,20,0.25); }
#csx-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
#csx-figcap { margin: 14px 0 0; font-size: 13px; letter-spacing: 0.02em; color: rgba(18,18,20,0.5); }
#csx-body-grid { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 80px); margin-top: 72px; align-items: start; width: 100%; }

/* article */
#csx-article { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; width: auto; max-width: 68ch; }
#csx-article .eyebrow:not(:first-child) { margin-top: 56px; }
#csx-article h2 { margin: 18px 0 18px; font-family: var(--Heading, sans-serif); font-weight: 700; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.02em; line-height: 1.2; color: var(--Charcoal, #121214); }
#csx-article > p { margin: 0 0 24px; font-size: 17.5px; line-height: 1.8; color: rgba(18,18,20,0.78); }
#csx-article #csx-quote { margin: 40px 0; padding: 28px 32px; background: #FFFFFF; border: 1px solid #E5DFD2; border-left: 2px solid var(--Gold, #b08d4f); border-radius: 10px; font-family: var(--Quote, 'Cormorant Garamond', serif); font-style: italic; font-size: clamp(21px, 2vw, 27px); line-height: 1.45; color: var(--Charcoal, #121214); }
#s1, #s2, #s3 { scroll-margin-top: 100px; }
/* why-it-worked numbered cards */
#csx-why-cards { padding: 0; flex-direction: column; gap: 14px; margin: 0 0 24px; width: 100%; }
#csx-why-cards > * { padding: 22px 24px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; background: #FFFFFF; border: 1px solid #E5DFD2; border-radius: 12px; width: 100%; align-items: start; }
#csx-why-cards > * > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--Gold, #b08d4f); line-height: 1; }
#csx-why-cards > * > :last-child { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; width: auto; }
#csx-why-cards > * > :last-child > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--Charcoal, #121214); }
#csx-why-cards > * > :last-child > :last-child { margin: 6px 0 0; font-size: 15.5px; line-height: 1.7; color: rgba(18,18,20,0.68); }
/* inline CTA */
#csx-inline-cta { padding: 32px; flex-direction: column; align-items: flex-start; gap: 0; margin-top: 48px; background: #FFFFFF; border: 1px solid #E5DFD2; border-radius: 14px; width: 100%; }
#csx-inline-label { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#csx-inline-text { margin: 14px 0 22px; font-size: 16.5px; line-height: 1.7; color: rgba(18,18,20,0.7); }
#csx-inline-actions { padding: 0; flex-direction: row; gap: 14px; flex-wrap: wrap; width: auto; }
#csx-inline-btn, #csx-inline-btn2 { font-family: var(--Heading, sans-serif); font-weight: 600; font-size: 14.5px; border-radius: 4px; text-decoration: none; }
#csx-inline-btn { background: var(--Charcoal, #121214); color: var(--Cream, #F5F2EC); padding: 14px 26px; border: 0; }
#csx-inline-btn:hover { background: #2D2D2D; color: var(--Cream, #F5F2EC); }
#csx-inline-btn2 { background: transparent; color: var(--Charcoal, #121214); padding: 13px 26px; border: 1px solid rgba(18,18,20,0.2); }
#csx-inline-btn2:hover { border-color: var(--Gold, #b08d4f); color: var(--Gold, #b08d4f); background: transparent; }

/* aside */
#csx-aside { padding: 0; flex-direction: column; align-items: stretch; gap: 0; width: auto; position: sticky; top: 108px; }
#csx-summary { padding: 28px; flex-direction: column; align-items: stretch; gap: 0; background: #FFFFFF; border: 1px solid #E5DFD2; border-radius: 14px; box-shadow: 0 2px 8px rgba(18,18,20,0.05); width: auto; }
#csx-sum-label { margin: 0; font-family: var(--Heading, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(18,18,20,0.45); }
#csx-sum-list { padding: 0; flex-direction: column; gap: 0; margin-top: 18px; width: 100%; }
#csx-sum-list > * { padding: 12px 0; flex-direction: row; justify-content: space-between; gap: 16px; border-top: 1px solid #EEE8DB; width: 100%; align-items: baseline; }
#csx-sum-list > :last-child { border-bottom: 1px solid #EEE8DB; }
#csx-sum-list > * > :first-child { margin: 0; font-size: 14.5px; color: rgba(18,18,20,0.55); white-space: nowrap; }
#csx-sum-list > * > :last-child { margin: 0; font-size: 14.5px; font-weight: 500; text-align: right; color: var(--Charcoal, #121214); }
#csx-sum-list > :nth-child(4) > :last-child { color: var(--Gold, #b08d4f); font-weight: 600; }
#csx-toc { padding: 0 4px; flex-direction: column; align-items: flex-start; gap: 0; margin-top: 24px; width: auto; }
#csx-toc-label { margin: 0; font-family: var(--Heading, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(18,18,20,0.45); }
#csx-toc .csx-toc-link, #csx-toc-link { margin: 16px 0 0; font-size: 14px; line-height: 1.5; }
.csx-toc-link + .csx-toc-link { margin-top: 12px; }
#csx-toc .csx-toc-link a { color: rgba(18,18,20,0.7); text-decoration: none; transition: color 0.2s ease; }
#csx-toc .csx-toc-link a:hover { color: var(--Gold, #b08d4f); }

/* --- More case studies #csx-related --- */
#csx-related { background: #FCFAF6; color: var(--Charcoal, #121214); border-top: 1px solid #E8E2D4; padding: 80px 32px; position: relative; }
#csx-rel-inner { gap: 0; }
#csx-rel-head { padding: 0; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; width: 100%; }
#csx-rel-head-left { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; width: auto; }
#csx-rel-h2 { margin: 16px 0 0; font-family: var(--Heading, sans-serif); font-weight: 700; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.025em; line-height: 1.1; color: var(--Charcoal, #121214); }
#csx-rel-all { font-size: 14.5px; }
#csx-rel-grid { padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; width: 100%; }
#csx-rel-grid > * { padding: 0; flex-direction: column; align-items: stretch; gap: 0; background: #FFFFFF; border: 1px solid #E8E2D4; border-radius: 14px; overflow: hidden; width: auto; box-shadow: 0 2px 8px rgba(18,18,20,0.05); transition: transform 0.3s ease, border-color 0.3s ease; }
#csx-rel-grid > *:hover { transform: translateY(-6px); border-color: rgba(176,141,79,0.6); }
#csx-rel-grid > * > :first-child { padding: 0; aspect-ratio: 16 / 9; overflow: hidden; width: auto; }
#csx-rel-grid > * > :first-child > * { width: 100%; height: 100%; padding: 0; }
#csx-rel-grid > * > :first-child img { width: 100%; height: 100%; object-fit: cover; display: block; }
#csx-rel-grid > * > :last-child { padding: 24px 26px 26px; flex-direction: column; align-items: flex-start; gap: 0; width: auto; }
#csx-rel-grid > * > :last-child > :first-child { margin: 0; font-family: var(--Heading, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--Gold, #b08d4f); }
#csx-rel-grid > * > :last-child > :nth-child(2) { margin: 12px 0 0; font-family: var(--Heading, sans-serif); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: var(--Charcoal, #121214); }
#csx-rel-grid > * > :last-child > :last-child { margin: 18px 0 0; font-size: 14px; }

/* --- CTA #csx-cta (radial + tex-a + rings) --- */
#csx-cta { background: radial-gradient(900px 500px at 50% 120%, #201D18 0%, #121214 65%); color: #f5f2ec; padding: 130px 32px; position: relative; overflow: hidden; border-top: 1px solid rgba(176,141,79,0.25); isolation: isolate; }
#csx-cta-tex { padding: 0; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: var(--hbi-img-tex-a); background-size: cover; background-position: center bottom; background-repeat: no-repeat; opacity: 0.3; transform: scaleY(-1); }
#csx-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 449px, rgba(176, 141, 79, 0.25) 449px, rgba(176, 141, 79, 0.25) 450px, transparent 450px),
        radial-gradient(circle 900px at 50% calc(100% + 30px), transparent 529px, rgba(176, 141, 79, 0.15) 529px, rgba(176, 141, 79, 0.15) 530px, transparent 530px);
}
#csx-cta-inner { max-width: 780px; text-align: center; align-items: center; gap: 0; position: relative; z-index: 1; }
#csx-cta-h2 { margin: 0; font-size: clamp(38px, 4.4vw, 62px); letter-spacing: -0.03em; line-height: 1.06; }
#csx-cta-lead { margin: 24px auto 0; max-width: 520px; color: rgba(245,242,236,0.72); text-align: center; }
#csx-cta-ctas { padding: 0; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 44px; }

/* --- Responsive --- */
@media (max-width: 900px) {
    #csx-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    #csx-body-grid { grid-template-columns: 1fr; }
    #csx-aside { position: static; margin-top: 8px; }
    #csx-figure { padding-top: 72px; }
}
@media (max-width: 560px) {
    #csx-metrics { grid-template-columns: 1fr 1fr; }
    #csx-body { padding: 0 24px 80px; }
    #csx-related { padding: 64px 24px; }
    #csx-cta { padding: 96px 24px; }
}

/* ==========================================================================
   Case Study SINGLE — Elementor Pro Theme Builder template — #cst-*
   Classic containers/widgets (dynamic tags); one live template for every case.
   ========================================================================== */
#cst-top, #cst-body, #cst-related, #cst-cta { padding: 0; --padding-block-start:0; --padding-block-end:0; --padding-inline-start:0; --padding-inline-end:0; width:100%; max-width:100%; }
#cst-top .e-con, #cst-body .e-con, #cst-related .e-con, #cst-cta .e-con,
#cst-hero-inner, #cst-hero-grid, #cst-hero-left, #cst-cat, #cst-metrics, #cst-m1, #cst-m2, #cst-m3, #cst-m4,
#cst-body-inner, #cst-body-grid, #cst-article-wrap, #cst-aside, #cst-summary, #cst-sum-list, #cst-related-inner, #cst-rel-head, #cst-cta-inner, #cst-inline, #cst-inline-actions, #cst-cta-ctas {
  --padding-block-start:0; --padding-block-end:0; --padding-inline-start:0; --padding-inline-end:0; --gap:0;
}
.hbi-cst .elementor-widget { margin-block-end:0; }

/* ---- HERO ---- */
#cst-top { background:#101012; color:var(--Cream,#F5F2EC); position:relative; overflow:hidden; padding:88px 32px 96px; }
#cst-top::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(180deg,rgba(18,18,20,0.9) 0%,rgba(18,18,20,0.93) 100%),var(--hbi-img-hero);
  background-size:cover,cover; background-position:center,50% 40%; background-repeat:no-repeat,no-repeat; }
#cst-hero-inner { position:relative; z-index:1; max-width:1160px; margin:0 auto; width:100%; align-items:stretch; }
/* Breadcrumb as a flex row (Home / Case Studies / <category>) — each crumb and
   each "/" is its own flex item with a uniform 10px gap, matching the design.
   (Was one text-editor with &nbsp; separators, which spaced the slashes unevenly.) */
#cst-crumb { flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap; width:auto; }
#cst-crumb .elementor-widget-text-editor, #cst-crumb .elementor-widget-text-editor p, #cst-crumb-here .elementor-heading-title { margin:0; font-family:var(--Heading,sans-serif); font-size:12px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; }
#cst-crumb .elementor-widget-text-editor, #cst-crumb .elementor-widget-text-editor p { color:rgba(245,242,236,0.45); }
#cst-crumb a { color:rgba(245,242,236,0.45); text-decoration:none; }
#cst-crumb a:hover { color:var(--Gold,#b08d4f); }
#cst-crumb-here .elementor-heading-title { color:var(--Gold,#b08d4f); }
#cst-hero-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:end; margin-top:15px; }
#cst-hero-left { flex-direction:column; align-items:flex-start; }
#cst-cat { flex-direction:row; align-items:center; gap:8px; }
#cst-cat, #cst-cat .elementor-widget-container, #cst-cat .elementor-heading-title { font-family:var(--Heading,sans-serif); font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--Gold,#b08d4f); margin:0; }
/* "Case study" is the gold accent (the text-editor's own <p> was inheriting the kit grey). */
#cst-cat .elementor-widget-text-editor, #cst-cat .elementor-widget-text-editor p { color:var(--Gold,#b08d4f); margin:0; }
#cst-cat .cst-cat-dot { color:rgba(245,242,236,0.3); }
#cst-cat .elementor-widget-heading .elementor-heading-title { color:rgba(245,242,236,0.55); }
#cst-h1 .elementor-heading-title { font-family:var(--Heading,sans-serif); font-weight:700; font-size:clamp(36px,4.6vw,60px); line-height:1.08; letter-spacing:-0.025em; color:var(--Cream,#F5F2EC); margin:22px 0 0; }
#cst-lead, #cst-lead .elementor-widget-container { margin:26px 0 0; font-size:19px; line-height:1.7; color:rgba(245,242,236,0.72); max-width:560px; }
#cst-lead p { margin:0; }
/* metrics dl */
/* gap:0 set as the real property — Elementor's default gap:20px was ignoring
   the --gap:0 override, adding 20px between cells (should share borders) and
   28px between label/value (should be the 8px value margin only). */
#cst-metrics { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid rgba(245,242,236,0.12); border-radius:12px; overflow:hidden; background:rgba(245,242,236,0.03); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); align-self:end; }
#cst-m1, #cst-m2, #cst-m3, #cst-m4 { padding:22px 24px; gap:0; flex-direction:column; align-items:flex-start; }
#cst-m1, #cst-m3 { border-right:1px solid rgba(245,242,236,0.1); }
#cst-m1, #cst-m2 { border-bottom:1px solid rgba(245,242,236,0.1); }
#cst-metrics h6.elementor-heading-title { margin:0; font-family:var(--Heading,sans-serif); font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:rgba(245,242,236,0.45); }
#cst-metrics h4.elementor-heading-title { margin:8px 0 0; font-family:var(--Heading,sans-serif); font-size:30px; font-weight:700; letter-spacing:-0.02em; color:var(--Cream,#F5F2EC); }
#cst-m1 h4.elementor-heading-title, #cst-m2 h4.elementor-heading-title { color:var(--Gold,#b08d4f); }

/* ---- BODY ---- */
#cst-body { background:var(--Cream,#F5F2EC); color:var(--Charcoal,#121214); padding:0 32px 100px; }
#cst-body-inner { max-width:1160px; margin:0 auto; width:100%; align-items:stretch; }
#cst-figure { padding-top:120px; width:100%; }
/* The <img> is a direct child of the image widget here (no .elementor-widget-container),
   so the 16:8 crop + radius + border + shadow go on the <img> itself. Was targeting
   .elementor-widget-container, which didn't exist -> image showed at its natural ~4:3. */
#cst-figure img { display:block; width:100%; aspect-ratio:16/8; object-fit:cover; border-radius:14px; border:1px solid #E5DFD2; box-shadow:0 18px 50px rgba(18,18,20,0.25); }
#cst-figcap, #cst-figcap .elementor-widget-container { margin:14px 0 0; font-size:13px; letter-spacing:0.02em; color:rgba(18,18,20,0.5); }
#cst-figcap p { margin:0; }
#cst-body-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(32px,5vw,80px); margin-top:72px; align-items:start; }
#cst-article-wrap { flex-direction:column; align-items:flex-start; max-width:68ch; gap:0; }

/* article prose (theme-post-content renders the_content) */
#cst-article .cs-kicker { margin:56px 0 0; font-family:var(--Heading,sans-serif); font-size:12px; font-weight:600; letter-spacing:0.3em; text-transform:uppercase; color:var(--Gold,#b08d4f); display:flex; align-items:center; gap:10px; }
#cst-article .cs-kicker::before { content:""; width:24px; height:1px; background:var(--Gold,#b08d4f); display:inline-block; }
#cst-article > .cs-kicker:first-child { margin-top:0; }
#cst-article h2 { font-family:var(--Heading,sans-serif); font-weight:700; font-size:clamp(26px,2.4vw,34px); letter-spacing:-0.02em; line-height:1.2; margin:18px 0 18px; color:var(--Charcoal,#121214); scroll-margin-top:100px; }
#cst-article p { font-size:17.5px; line-height:1.8; color:rgba(18,18,20,0.78); margin:0 0 24px; }
#cst-article blockquote { margin:40px 0; padding:28px 32px; background:#fff; border:1px solid #E5DFD2; border-left:2px solid var(--Gold,#b08d4f); border-radius:10px; font-family:var(--Quote,'Cormorant Garamond',serif); font-style:italic; font-size:clamp(21px,2vw,27px); line-height:1.45; color:var(--Charcoal,#121214); }
/* the_content() -> wpautop wraps the quote text in its own <p>, which the
   #cst-article p rule (17.5px/1.8/0.78) would hijack. Make it inherit the blockquote. */
#cst-article blockquote p { margin:0; font:inherit; color:inherit; }
#cst-article ol.cs-why { list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:14px; }
#cst-article ol.cs-why li { display:grid; grid-template-columns:44px minmax(0,1fr); gap:18px; padding:22px 24px; background:#fff; border:1px solid #E5DFD2; border-radius:12px; }
#cst-article ol.cs-why .cs-why-n { font-family:var(--Heading,sans-serif); font-size:26px; font-weight:700; letter-spacing:-0.03em; color:var(--Gold,#b08d4f); line-height:1; }
#cst-article ol.cs-why strong { display:block; font-family:var(--Heading,sans-serif); font-size:17px; font-weight:600; color:var(--Charcoal,#121214); }
#cst-article ol.cs-why p { margin:6px 0 0; font-size:15.5px; line-height:1.7; color:rgba(18,18,20,0.68); }

/* inline CTA */
#cst-inline { background:#fff; border:1px solid #E5DFD2; border-radius:14px; padding:32px; margin-top:48px; flex-direction:column; align-items:flex-start; width:100%; }
#cst-inline-label .elementor-heading-title { margin:0; font-family:var(--Heading,sans-serif); font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--Gold,#b08d4f); }
#cst-inline-text, #cst-inline-text .elementor-widget-container { margin:14px 0 22px; font-size:16.5px; line-height:1.7; color:rgba(18,18,20,0.7); }
#cst-inline-text p { margin:0; }
#cst-inline-actions { flex-direction:row; gap:14px; flex-wrap:wrap; }
#cst-inline-btn .elementor-button { background:var(--Charcoal,#121214); color:var(--Cream,#F5F2EC); font-family:var(--Heading,sans-serif); font-weight:600; font-size:14.5px; padding:14px 26px; border-radius:4px; border:0; }
#cst-inline-btn .elementor-button:hover { background:#2D2D2D; }
#cst-inline-btn2 .elementor-button { background:transparent; color:var(--Charcoal,#121214); border:1px solid rgba(18,18,20,0.2); font-family:var(--Heading,sans-serif); font-weight:600; font-size:14.5px; padding:13px 26px; border-radius:4px; }
#cst-inline-btn2 .elementor-button:hover { border-color:var(--Gold,#b08d4f); color:var(--Gold,#b08d4f); }

/* aside — gap:0 set as the real property; Elementor's default gap:20px was
   ignoring --gap:0 and inflating every sidebar gap (rows 20px apart instead of
   contiguous, card->TOC 44px instead of 24px, label->list 38px instead of 18px). */
#cst-aside { position:sticky; top:108px; flex-direction:column; align-items:stretch; gap:0; }
#cst-summary { background:#fff; border:1px solid #E5DFD2; border-radius:14px; padding:28px; box-shadow:0 2px 8px rgba(18,18,20,0.05); flex-direction:column; align-items:stretch; gap:0; }
#cst-sum-label .elementor-heading-title { margin:0; font-family:var(--Heading,sans-serif); font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:rgba(18,18,20,0.45); }
#cst-sum-list { flex-direction:column; margin-top:18px; gap:0; }
#cst-sum-list > .e-con { flex-direction:row; justify-content:space-between; align-items:baseline; gap:16px; padding:12px 0; border-top:1px solid #EEE8DB; }
#cst-sum-list > .e-con:last-child { border-bottom:1px solid #EEE8DB; }
#cst-sum-list .elementor-widget-text-editor, #cst-sum-list .elementor-widget-text-editor p { margin:0; font-size:14.5px; color:rgba(18,18,20,0.55); }
#cst-sum-list .elementor-heading-title { margin:0; font-size:14.5px; font-weight:500; text-align:right; color:var(--Charcoal,#121214); }
#cst-sum-list > .e-con:nth-child(4) .elementor-heading-title { color:var(--Gold,#b08d4f); font-weight:600; }

/* ---- Related (Posts widget) ---- */
#cst-related { background:#FCFAF6; color:var(--Charcoal,#121214); border-top:1px solid #E8E2D4; padding:80px 32px; }
#cst-related-inner { max-width:1280px; margin:0 auto; width:100%; align-items:stretch; }
#cst-rel-head { flex-direction:row; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
#cst-rel-head-left { flex-direction:column; align-items:flex-start; }
#cst-rel-eyebrow .elementor-heading-title { margin:0 0 16px; font-family:var(--Heading,sans-serif); font-size:12px; font-weight:600; letter-spacing:0.3em; text-transform:uppercase; color:var(--Gold,#b08d4f); display:flex; align-items:center; gap:10px; }
#cst-rel-eyebrow .elementor-heading-title::before { content:""; width:24px; height:1px; background:var(--Gold,#b08d4f); display:inline-block; }
#cst-rel-h2 .elementor-heading-title { margin:0; font-family:var(--Heading,sans-serif); font-weight:700; font-size:clamp(28px,3vw,40px); letter-spacing:-0.025em; line-height:1.1; color:var(--Charcoal,#121214); }
#cst-rel-all .elementor-button { background:transparent; color:var(--Gold,#b08d4f); padding:0; border:0; font-family:var(--Heading,sans-serif); font-weight:600; font-size:14.5px; }
#cst-related .elementor-posts { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:40px; }
#cst-related .elementor-post { background:#fff; border:1px solid #E8E2D4; border-radius:14px; overflow:hidden; margin:0; transition:transform .3s ease,border-color .3s ease; }
#cst-related .elementor-post:hover { transform:translateY(-6px); border-color:rgba(176,141,79,0.6); }
#cst-related .elementor-post__thumbnail { padding-bottom:0; aspect-ratio:16/9; }
#cst-related .elementor-post__thumbnail img { width:100%; height:100%; object-fit:cover; }
#cst-related .elementor-post__text { padding:22px 24px 24px; }
#cst-related .elementor-post__meta-data, #cst-related .elementor-post__excerpt { display:none; }
#cst-related .elementor-post__title { margin:0; font-family:var(--Heading,sans-serif); font-size:18px; font-weight:600; line-height:1.35; }
#cst-related .elementor-post__title a { color:var(--Charcoal,#121214); }
#cst-related .elementor-post__read-more { margin-top:16px; color:var(--Gold,#b08d4f); font-weight:600; font-size:14px; text-decoration:none; }

/* ---- CTA ---- */
#cst-cta { position:relative; overflow:hidden; color:#f5f2ec; background:radial-gradient(900px 500px at 50% 120%,#201D18 0%,#121214 65%); padding:130px 32px; border-top:1px solid rgba(176,141,79,0.25); isolation:isolate; }
#cst-cta::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(circle 900px at 50% calc(100% + 30px),transparent 449px,rgba(176,141,79,0.25) 449px,rgba(176,141,79,0.25) 450px,transparent 450px),radial-gradient(circle 900px at 50% calc(100% + 30px),transparent 529px,rgba(176,141,79,0.15) 529px,rgba(176,141,79,0.15) 530px,transparent 530px); }
#cst-cta-inner { max-width:780px; margin:0 auto; text-align:center; align-items:center; position:relative; z-index:1; width:100%; }
#cst-cta-h2 .elementor-heading-title { margin:0; font-family:var(--Heading,sans-serif); font-weight:700; font-size:clamp(38px,4.4vw,62px); letter-spacing:-0.03em; line-height:1.06; color:#f5f2ec; }
#cst-cta-lead, #cst-cta-lead .elementor-widget-container { margin:24px auto 0; max-width:520px; font-size:18px; line-height:1.65; color:rgba(245,242,236,0.72); text-align:center; }
#cst-cta-lead p { margin:0; }
#cst-cta-ctas { flex-direction:row; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:44px; }
#cst-cta-btn .elementor-button { background:var(--Gold,#b08d4f); color:var(--Charcoal,#121214); font-family:var(--Heading,sans-serif); font-weight:600; font-size:16px; padding:17px 34px; border-radius:4px; border:0; }
#cst-cta-btn .elementor-button:hover { background:var(--Gold-Bright,#c9a56a); }
#cst-cta-btn2 .elementor-button { background:transparent; color:#f5f2ec; border:1px solid rgba(245,242,236,0.3); font-family:var(--Heading,sans-serif); font-weight:500; font-size:16px; padding:16px 34px; border-radius:4px; }
#cst-cta-btn2 .elementor-button:hover { border-color:var(--Gold,#b08d4f); color:var(--Gold,#b08d4f); }

/* ---- Responsive ---- */
@media (max-width:900px){
  #cst-hero-grid { grid-template-columns:1fr; gap:36px; }
  #cst-body-grid { grid-template-columns:1fr; }
  #cst-aside { position:static; margin-top:8px; }
  #cst-figure { padding-top:72px; }
}
@media (max-width:560px){
  #cst-body { padding:0 24px 80px; }
  #cst-related, #cst-cta { padding:64px 24px; }
}

/* ==========================================================================
   Case Studies ARCHIVE — Theme Builder (/case-studies/) — #csa-* + Posts cards
   ========================================================================== */
#csa-top, #csa-list, #csa-cta { padding:0; --padding-block-start:0; --padding-block-end:0; --padding-inline-start:0; --padding-inline-end:0; width:100%; max-width:100%; }
#csa-inner, #csa-hero-grid, #csa-hero-left, #csa-stats, #csa-stat1, #csa-stat2, #csa-list-inner, #csa-list-head, #csa-list-head-left, #csa-pills, #csa-cta-inner, #csa-cta-ctas { --padding-block-start:0; --padding-block-end:0; --padding-inline-start:0; --padding-inline-end:0; --gap:0; }

/* hero */
#csa-top { background:#101012; color:var(--Cream,#F5F2EC); position:relative; overflow:hidden; padding:96px 32px 88px; }
#csa-top::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:linear-gradient(90deg,rgba(18,18,20,0.96) 0%,rgba(18,18,20,0.88) 50%,rgba(18,18,20,0.6) 100%),var(--hbi-img-hero); background-size:cover,cover; background-position:center,45% 50%; background-repeat:no-repeat,no-repeat; }
#csa-inner { position:relative; z-index:1; max-width:1280px; margin:0 auto; width:100%; align-items:stretch; }
#csa-crumb, #csa-crumb .elementor-widget-container { margin:0; font-family:var(--Heading,sans-serif); font-size:12px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:rgba(245,242,236,0.45); }
#csa-crumb a { color:rgba(245,242,236,0.45); text-decoration:none; } #csa-crumb a:hover{ color:var(--Gold,#b08d4f); } .csa-crumb-here{ color:var(--Gold,#b08d4f); }
#csa-hero-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:64px; align-items:end; margin-top:44px; }
#csa-hero-left { flex-direction:column; align-items:flex-start; }
#csa-eyebrow .elementor-heading-title { margin:0; font-family:var(--Heading,sans-serif); font-size:12px; font-weight:600; letter-spacing:0.3em; text-transform:uppercase; color:var(--Gold,#b08d4f); display:flex; align-items:center; gap:10px; }
#csa-eyebrow .elementor-heading-title::before { content:""; width:24px; height:1px; background:var(--Gold,#b08d4f); display:inline-block; }
#csa-h1 .elementor-heading-title { margin:24px 0 0; font-family:var(--Heading,sans-serif); font-weight:700; font-size:clamp(44px,5.8vw,80px); line-height:1.02; letter-spacing:-0.025em; color:var(--Gold,#b08d4f); }
#csa-lead, #csa-lead .elementor-widget-container { margin:28px 0 0; font-size:18px; line-height:1.65; color:rgba(245,242,236,0.72); max-width:620px; } #csa-lead p{ margin:0; }
#csa-stats { display:grid; grid-template-columns:1fr 1fr; border:1px solid rgba(245,242,236,0.12); border-radius:12px; overflow:hidden; background:rgba(245,242,236,0.03); align-self:end; }
#csa-stat1, #csa-stat2 { padding:22px 24px; flex-direction:column; align-items:flex-start; } #csa-stat1{ border-right:1px solid rgba(245,242,236,0.1); }
#csa-stat-k, #csa-stat-k .elementor-widget-container { margin:0; font-family:var(--Heading,sans-serif); font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:rgba(245,242,236,0.45); } #csa-stat-k p{ margin:0; }
#csa-stat-v .elementor-heading-title, #csa-stat-v-gold .elementor-heading-title { margin:8px 0 0; font-family:var(--Heading,sans-serif); font-size:30px; font-weight:700; letter-spacing:-0.02em; color:var(--Cream,#F5F2EC); }
#csa-stat-v-gold .elementor-heading-title { color:var(--Gold,#b08d4f); }

/* list header */
#csa-list { background:var(--Cream,#F5F2EC); color:var(--Charcoal,#121214); padding:100px 32px 110px; position:relative; }
#csa-list-inner { max-width:1280px; margin:0 auto; width:100%; align-items:stretch; }
#csa-list-head { flex-direction:row; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }
#csa-list-head-left { flex-direction:column; align-items:flex-start; }
#csa-list-eyebrow .elementor-heading-title { margin:0; font-family:var(--Heading,sans-serif); font-size:12px; font-weight:600; letter-spacing:0.3em; text-transform:uppercase; color:var(--Gold,#b08d4f); display:flex; align-items:center; gap:10px; }
#csa-list-eyebrow .elementor-heading-title::before { content:""; width:24px; height:1px; background:var(--Gold,#b08d4f); display:inline-block; }
#csa-list-h2 .elementor-heading-title { margin:18px 0 0; font-family:var(--Heading,sans-serif); font-weight:700; font-size:clamp(30px,3.2vw,44px); letter-spacing:-0.02em; line-height:1.1; color:var(--Charcoal,#121214); }
#csa-pills { flex-direction:row; gap:10px; flex-wrap:wrap; }
#csa-pills .elementor-widget-text-editor, #csa-pills .elementor-widget-text-editor p { margin:0; }
#csa-pills .elementor-widget { width:auto; }
#csa-pill-all .elementor-widget-container, #csa-pill .elementor-widget-container { font-family:var(--Heading,sans-serif); font-size:13px; font-weight:600; letter-spacing:0.04em; padding:9px 18px; border-radius:999px; border:1px solid #E0D9C9; color:rgba(18,18,20,0.6); }
#csa-pill-all .elementor-widget-container { border-color:var(--Gold,#b08d4f); background:var(--Gold,#b08d4f); color:#121214; }

/* Posts widget cards */
#csa-grid { margin-top:56px; }
#csa-grid .elementor-posts { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }
#csa-grid .elementor-post { background:#fff; border:1px solid #E8E2D4; border-radius:16px; overflow:hidden; margin:0; box-shadow:0 2px 8px rgba(18,18,20,0.05); transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; }
#csa-grid .elementor-post:hover { transform:translateY(-6px); border-color:rgba(176,141,79,0.6); box-shadow:0 18px 44px rgba(18,18,20,0.12); }
#csa-grid .elementor-post__thumbnail { padding-bottom:0; aspect-ratio:16/10; overflow:hidden; }
#csa-grid .elementor-post__thumbnail img { width:100%; height:100%; object-fit:cover; }
#csa-grid .elementor-post__text { padding:26px 28px 28px; }
#csa-grid .elementor-post__meta-data { display:none; }
#csa-grid .elementor-post__badge { display:inline-block; font-family:var(--Heading,sans-serif); font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--Gold,#b08d4f); background:transparent; padding:0; }
#csa-grid .elementor-post__title { margin:12px 0 0; font-family:var(--Heading,sans-serif); font-size:22px; font-weight:700; line-height:1.2; letter-spacing:-0.01em; }
#csa-grid .elementor-post__title a { color:var(--Charcoal,#121214); }
#csa-grid .elementor-post__excerpt { margin:14px 0 0; } #csa-grid .elementor-post__excerpt p { font-size:15.5px; line-height:1.7; color:rgba(18,18,20,0.65); margin:0; }
#csa-grid .elementor-post__read-more { display:inline-block; margin-top:18px; font-family:var(--Heading,sans-serif); font-size:14.5px; font-weight:600; color:var(--Gold,#b08d4f); text-decoration:none; }

/* CTA */
#csa-cta { position:relative; overflow:hidden; color:#f5f2ec; background:radial-gradient(900px 500px at 50% 120%,#201D18 0%,#121214 65%); padding:130px 32px; border-top:1px solid rgba(176,141,79,0.25); isolation:isolate; }
#csa-cta::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(circle 900px at 50% calc(100% + 30px),transparent 449px,rgba(176,141,79,0.25) 449px,rgba(176,141,79,0.25) 450px,transparent 450px),radial-gradient(circle 900px at 50% calc(100% + 30px),transparent 529px,rgba(176,141,79,0.15) 529px,rgba(176,141,79,0.15) 530px,transparent 530px); }
#csa-cta-inner { max-width:780px; margin:0 auto; text-align:center; align-items:center; position:relative; z-index:1; width:100%; }
#csa-cta-h2 .elementor-heading-title { margin:0; font-family:var(--Heading,sans-serif); font-weight:700; font-size:clamp(38px,4.4vw,62px); letter-spacing:-0.03em; line-height:1.06; color:#f5f2ec; }
#csa-cta-lead, #csa-cta-lead .elementor-widget-container { margin:24px auto 0; max-width:520px; font-size:18px; line-height:1.65; color:rgba(245,242,236,0.72); } #csa-cta-lead p{ margin:0; }
#csa-cta-ctas { flex-direction:row; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:44px; }
#csa-cta-btn .elementor-button { background:var(--Gold,#b08d4f); color:var(--Charcoal,#121214); font-family:var(--Heading,sans-serif); font-weight:600; font-size:16px; padding:17px 34px; border-radius:4px; border:0; }
#csa-cta-btn .elementor-button:hover { background:var(--Gold-Bright,#c9a56a); }
#csa-cta-btn2 .elementor-button { background:transparent; color:#f5f2ec; border:1px solid rgba(245,242,236,0.3); font-family:var(--Heading,sans-serif); font-weight:500; font-size:16px; padding:16px 34px; border-radius:4px; }
#csa-cta-btn2 .elementor-button:hover { border-color:var(--Gold,#b08d4f); color:var(--Gold,#b08d4f); }

@media (max-width:900px){ #csa-hero-grid{ grid-template-columns:1fr; gap:40px; } #csa-list-head{ flex-direction:column; align-items:flex-start; } }
@media (max-width:560px){ #csa-stats{ grid-template-columns:1fr; } #csa-stat1{ border-right:0; border-bottom:1px solid rgba(245,242,236,0.1); } #csa-list{ padding:72px 24px 80px; } #csa-cta{ padding:96px 24px; } }

/* Case Studies archive — Loop Grid metric cards (.csl-*) — full-width alternating rows */
#csa-grid .elementor-loop-container { display:grid; grid-template-columns:1fr; gap:28px; }
.csl-card { position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:0; background:#fff; border:1px solid #E8E2D4; border-radius:16px; overflow:hidden; box-shadow:0 2px 8px rgba(18,18,20,0.05); transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; --padding-block-start:0;--padding-block-end:0;--padding-inline-start:0;--padding-inline-end:0; }
.csl-card:hover { transform:translateY(-6px); border-color:rgba(176,141,79,0.6); box-shadow:0 18px 44px rgba(18,18,20,0.12); }
.e-loop-item:nth-child(odd) .csl-card { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
.e-loop-item:nth-child(odd) .csl-media { order:2; }
.csl-media { overflow:hidden; min-height:360px; padding:0; --padding-block-start:0;--padding-block-end:0;--padding-inline-start:0;--padding-inline-end:0; }
.csl-media .elementor-widget, .csl-media .elementor-widget-container, .csl-media .elementor-image { height:100%; }
.csl-img img, .csl-media img { width:100%; height:100%; object-fit:cover; display:block; }
.csl-body { padding:clamp(32px,3.5vw,52px); display:flex; flex-direction:column; justify-content:space-between; gap:32px; --padding-block-start:clamp(32px,3.5vw,52px);--padding-block-end:clamp(32px,3.5vw,52px);--padding-inline-start:clamp(32px,3.5vw,52px);--padding-inline-end:clamp(32px,3.5vw,52px); }
.csl-cat { display:flex; flex-direction:row; align-items:center; gap:8px; --padding-block-start:0;--padding-block-end:0;--padding-inline-start:0;--padding-inline-end:0;--gap:8px; }
.csl-cat .elementor-heading-title { margin:0; font-family:var(--Heading,sans-serif); font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; }
.csl-cat-t .elementor-heading-title { color:var(--Gold,#b08d4f); }
.csl-dot .elementor-heading-title, .csl-loc .elementor-heading-title { color:rgba(18,18,20,0.5); }
.csl-title .elementor-heading-title { margin:18px 0 0; font-family:var(--Heading,sans-serif); font-weight:700; font-size:clamp(26px,2.6vw,36px); letter-spacing:-0.02em; line-height:1.12; color:var(--Charcoal,#121214); max-width:18ch; }
.csl-excerpt, .csl-excerpt .elementor-widget-container { margin:18px 0 0; } .csl-excerpt p { margin:0; font-size:16px; line-height:1.75; color:rgba(18,18,20,0.65); max-width:52ch; }
.csl-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; padding-top:24px; border-top:1px solid #EEE8DB; margin-top:auto; --padding-block-start:24px;--padding-block-end:0;--padding-inline-start:0;--padding-inline-end:0;--gap:20px; }
.csl-metrics > .e-con { flex-direction:column; gap:0; padding:0; --padding-block-start:0;--padding-block-end:0;--padding-inline-start:0;--padding-inline-end:0; }
.csl-mk .elementor-heading-title { margin:0; font-family:var(--Heading,sans-serif); font-size:10.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:rgba(18,18,20,0.45); }
.csl-mv .elementor-heading-title { margin:5px 0 0; font-family:var(--Heading,sans-serif); font-size:19px; font-weight:700; letter-spacing:-0.02em; color:var(--Charcoal,#121214); }
.csl-metrics > .e-con:first-child .csl-mv .elementor-heading-title { color:var(--Gold,#b08d4f); }
.csl-link { margin-top:26px; }
.csl-link .elementor-button { background:transparent; border:0; padding:0; color:var(--Gold,#b08d4f); font-family:var(--Heading,sans-serif); font-weight:600; font-size:15px; }
.csl-link .elementor-button::after { content:""; position:absolute; inset:0; z-index:1; }
/* Stacked on tablet/phone. nth-child(n) (any item) so the reset matches the
   specificity of the alternating rule above: the loop container has a non-item
   first child, so the flipped cards are the odd children, and the old
   even-only reset left card 2 side-by-side and crushed on phones. */
@media (max-width:900px){ .csl-card, .e-loop-item:nth-child(n) .csl-card { grid-template-columns:1fr; } .csl-media, .e-loop-item:nth-child(n) .csl-media { order:0; min-height:240px; } }
@media (max-width:560px){ .csl-metrics { grid-template-columns:1fr 1fr; gap:16px; } }

/* Loop card colour overrides — #csa-grid scope beats Elementor's global heading colour */
#csa-grid .csl-cat-t .elementor-heading-title { color:var(--Gold,#b08d4f); }
#csa-grid .csl-dot .elementor-heading-title, #csa-grid .csl-loc .elementor-heading-title { color:rgba(18,18,20,0.5); }
#csa-grid .csl-title .elementor-heading-title { color:var(--Charcoal,#121214); }
#csa-grid .csl-mk .elementor-heading-title { color:rgba(18,18,20,0.45); }
#csa-grid .csl-mv .elementor-heading-title { color:var(--Charcoal,#121214); }
#csa-grid .csl-metrics > .e-con:first-child .csl-mv .elementor-heading-title { color:var(--Gold,#b08d4f); }
#csa-grid .csl-excerpt p { color:rgba(18,18,20,0.65); }
#csa-grid .csl-link .elementor-button { color:var(--Gold,#b08d4f); }
/* archive hero/list headings also need id-scope to beat the global colour */
#csa-h1 .elementor-heading-title { color:var(--Gold,#b08d4f); }
#csa-list-h2 .elementor-heading-title { color:var(--Charcoal,#121214); }
#csa-list-eyebrow .elementor-heading-title, #csa-eyebrow .elementor-heading-title { color:var(--Gold,#b08d4f); }
#csa-stat-v-gold .elementor-heading-title { color:var(--Gold,#b08d4f); }
#csa-stat-v .elementor-heading-title { color:var(--Cream,#F5F2EC); }
#csa-cta-h2 .elementor-heading-title { color:#f5f2ec; }

/* Loop card read-more: id-scope to beat Elementor's default button bg */
#csa-grid .csl-link .elementor-button, #csa-grid .csl-link .elementor-button:hover, #csa-grid .csl-link .elementor-button:focus { background:transparent; border:0; box-shadow:none; padding:0; color:var(--Gold,#b08d4f); font-family:var(--Heading,sans-serif); font-weight:600; font-size:15px; fill:var(--Gold,#b08d4f); }
#csa-grid .csl-link .elementor-button .elementor-button-content-wrapper { justify-content:flex-start; }

/* Archive filter pills — style the text-editor pills as boxes (target the inner p) */
#csa-pills { display:flex; flex-direction:row; gap:10px; flex-wrap:wrap; align-items:center; }
#csa-pills > .elementor-widget { width:auto; margin:0; }
#csa-pills .elementor-widget-container { padding:0; }
#csa-pills .elementor-widget-container p { margin:0; font-family:var(--Heading,sans-serif); font-size:13px; font-weight:600; letter-spacing:0.04em; padding:9px 18px; border-radius:999px; border:1px solid #E0D9C9; color:rgba(18,18,20,0.6); }
#csa-pill-all .elementor-widget-container p { border-color:var(--Gold,#b08d4f); background:var(--Gold,#b08d4f); color:#121214; }

/* Archive pills — text renders bare in the widget div; style the div directly */
#csa-pills #csa-pill-all, #csa-pills #csa-pill { display:inline-block; margin:0; padding:9px 18px; border-radius:999px; border:1px solid #E0D9C9; background:transparent; color:rgba(18,18,20,0.6); font-family:var(--Heading,sans-serif); font-size:13px; font-weight:600; letter-spacing:0.04em; line-height:1; }
#csa-pills #csa-pill-all { border-color:var(--Gold,#b08d4f); background:var(--Gold,#b08d4f); color:#121214; }

/* Archive design-match: section numerals + inline category + CTA texture */
#csa-top, #csa-list, #csa-cta { position:relative; overflow:hidden; }
#csa-top::after, #csa-list::after, #csa-cta::after { content:""; position:absolute; top:20px; left:16px; font-family:var(--Heading,sans-serif); font-size:clamp(120px,13vw,210px); font-weight:700; line-height:0.8; letter-spacing:-0.04em; color:var(--Gold,#b08d4f); opacity:0.08; font-variant-numeric:tabular-nums; user-select:none; pointer-events:none; z-index:0; }
#csa-top::after { content:"01"; }
#csa-list::after { content:"02"; }
#csa-cta::after { content:"03"; }
#csa-inner, #csa-list-inner, #csa-cta-inner { position:relative; z-index:1; }
/* category → one left-aligned inline row (beats Elementor container column default) */
#csa-grid .csl-cat { flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:8px; justify-content:flex-start; text-align:left; }
#csa-grid .csl-cat .elementor-widget { width:auto; margin:0; }
/* CTA texture overlay (behind the rings) */
#csa-cta-tex { position:absolute; inset:0; z-index:-2; pointer-events:none; background-image:var(--hbi-img-tex-a); background-size:cover; background-position:center bottom; background-repeat:no-repeat; opacity:0.3; transform:scaleY(-1); }

/* Archive list header: let heading + pills size to content so they share one row (heading left, pills right) */
#csa-list-head { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px 32px; }
#csa-list-head-left { width:auto; flex:0 1 auto; }
#csa-pills { width:auto; flex:0 0 auto; }
/* Below 900px the pills take their own full-width line so they can wrap; at
   flex:0 0 auto the row stayed 429px wide and "Hospitality" ran off a phone. */
@media (max-width:900px){ #csa-pills { flex:1 1 100%; max-width:100%; } }

/* Loop card — match design weights, excerpt styling, category gap (id-scoped to win) */
#csa-grid .csl-title .elementor-heading-title { font-weight:700; }
#csa-grid .csl-mv .elementor-heading-title { font-weight:700; }
#csa-grid .csl-mk .elementor-heading-title { font-weight:600; }
#csa-grid .csl-cat .elementor-heading-title { font-weight:600; }
#csa-grid .csl-cat { column-gap:14px; gap:14px; }
/* excerpt renders bare in the widget (no <p>) — style the widget + any children directly */
#csa-grid .csl-excerpt, #csa-grid .csl-excerpt .elementor-widget-container, #csa-grid .csl-excerpt p { font-size:16px; line-height:1.75; color:rgba(18,18,20,0.65); }
#csa-grid .csl-excerpt { max-width:52ch; margin-top:18px; }
#csa-grid .csl-excerpt p { margin:0; }
#csa-grid .csl-link { margin-top:26px; }

/* Loop card — two-group body (top: cat/title/excerpt · bottom: metrics/read) matching the design's space-between */
#csa-grid .csl-body { gap:32px; --gap:32px; row-gap:32px; --row-gap:32px; justify-content:space-between; }
#csa-grid .csl-top, #csa-grid .csl-bot { display:flex; flex-direction:column; gap:0; --gap:0; row-gap:0; width:100%; padding:0; --padding-block-start:0; --padding-block-end:0; --padding-inline-start:0; --padding-inline-end:0; }
#csa-grid .csl-bot .csl-metrics { margin-top:0; }
#csa-grid .csl-cat { align-items:center; }

/* Loop card title: remove the 18ch cap so it wraps like the design (3 lines, "commercial-to-residential" on one line) */
#csa-grid .csl-title .elementor-heading-title { max-width:none; }

/* Archive filter pills — class-based + functional (JS toggles .cs-on; hides non-matching loop items) */
#csa-pills .cs-pill { display:inline-block; margin:0; padding:9px 18px; border-radius:999px; border:1px solid #E0D9C9; background:transparent; color:rgba(18,18,20,0.6); font-family:var(--Heading,sans-serif); font-size:13px; font-weight:600; letter-spacing:0.04em; line-height:1; cursor:pointer; transition:background .2s ease,color .2s ease,border-color .2s ease; }
#csa-pills .cs-pill:hover { border-color:var(--Gold,#b08d4f); color:var(--Charcoal,#121214); }
#csa-pills .cs-pill.cs-on { border-color:var(--Gold,#b08d4f); background:var(--Gold,#b08d4f); color:#121214; }
#csa-grid .e-loop-item[hidden] { display:none !important; }

/* Case Study single — category gap + aside "On this page" TOC + Share (match design) */
#cst-cat { column-gap:14px; gap:14px; }
#cst-toc { padding:0 4px; flex-direction:column; align-items:flex-start; gap:0; margin-top:24px; width:auto; --padding-block-start:0;--padding-block-end:0;--padding-inline-start:4px;--padding-inline-end:4px;--gap:0; }
#cst-toc-label .elementor-heading-title { margin:0; font-family:var(--Heading,sans-serif); font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:rgba(18,18,20,0.45); }
#cst-toc-links { margin-top:16px; }
#cst-toc-links a { display:block; font-size:14px; line-height:1.5; color:rgba(18,18,20,0.7); text-decoration:none; transition:color .2s ease; }
#cst-toc-links a + a { margin-top:12px; }
#cst-toc-links a:hover { color:var(--Gold,#b08d4f); }
#cst-share { margin-top:28px; padding-top:22px; border-top:1px solid #E0D9C9; font-size:13px; color:rgba(18,18,20,0.5); }
#cst-share .cst-share-row { display:flex; gap:10px; margin-top:12px; }
#cst-share .cst-share-ic { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid #E0D9C9; border-radius:6px; color:var(--Gold,#b08d4f); text-decoration:none; font-family:var(--Heading,sans-serif); font-size:13px; font-weight:600; transition:border-color .2s ease; }
#cst-share .cst-share-ic:hover { border-color:var(--Gold,#b08d4f); }

/* ==========================================================================
   Hero animated backdrop (front page / #hero ONLY) — "Banner update" design.
   Four layers injected by site.js as #hero > .hbi-hero-bg, because the pseudo
   slots are taken (::before = static photo+wash fallback, ::after = "01").
   Drift = the photo slowly scales/pans; Glow = gold radial pulse (screen);
   wash + noise are static. No-JS falls back to the static ::before.
   ========================================================================== */
@keyframes hbiHeroDrift {
  0%   { transform: scale(1.18) translate3d(0, 0, 0) rotate(0deg); }
  25%  { transform: scale(1.3)  translate3d(-5%, -3.5%, 0) rotate(-0.8deg); }
  50%  { transform: scale(1.22) translate3d(-7%, 3%, 0) rotate(0.4deg); }
  75%  { transform: scale(1.34) translate3d(3%, 4.5%, 0) rotate(1deg); }
  100% { transform: scale(1.18) translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes hbiHeroGlow {
  0%   { opacity: 0.3;  transform: translate3d(0, 0, 0) scale(1); }
  33%  { opacity: 0.7;  transform: translate3d(-14%, 8%, 0) scale(1.2); }
  66%  { opacity: 0.45; transform: translate3d(-6%, -10%, 0) scale(0.9); }
  100% { opacity: 0.3;  transform: translate3d(0, 0, 0) scale(1); }
}
/* Generic so it applies to EVERY hero (#hero, #top, #bfh-top, #bl-top, #dxf-top,
   #scb-top, #fbf-top, #fb-top, #nr-top, #ct-top, #lg-top, #lgl-hero, #ar-hero,
   #csa-top, #cst-top) — site.js injects .hbi-hero-bg into each + adds the class. */
.hbi-hero-animated { isolation:isolate; overflow:hidden; }
.hbi-hero-animated::before { display:none; }           /* drop the static photo+wash */
.hbi-hero-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.hbi-hero-bg .hbi-hero-drift { position:absolute; inset:0; background-image:var(--hbi-img-hero); background-size:cover; background-position:65% 50%; background-repeat:no-repeat; transform-origin:60% 50%; animation:hbiHeroDrift 40s ease-in-out infinite; will-change:transform; }
.hbi-hero-bg .hbi-hero-glow  { position:absolute; top:-20%; right:-10%; width:70%; height:140%; background:radial-gradient(ellipse at center, rgba(176,141,79,0.28) 0%, rgba(176,141,79,0.08) 40%, rgba(176,141,79,0) 70%); animation:hbiHeroGlow 22s ease-in-out infinite; will-change:transform,opacity; mix-blend-mode:screen; }
.hbi-hero-bg .hbi-hero-wash  { position:absolute; inset:0; background:linear-gradient(90deg, rgba(18,18,20,0.95) 0%, rgba(18,18,20,0.85) 45%, rgba(18,18,20,0.55) 100%); }
.hbi-hero-bg .hbi-hero-noise { position:absolute; inset:0; opacity:0.07; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
/* Background video (site.js, when HBI_HERO_VIDEO is set): over the static
   drift photo, under glow/wash/noise, faded in once it is actually playing.
   The drift animation stops underneath it since the video covers it. */
.hbi-hero-bg .hbi-hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:65% 50%; opacity:0; transition:opacity 0.9s ease; }
.hbi-hero-bg.is-playing .hbi-hero-video { opacity:1; }
.hbi-hero-bg.has-video .hbi-hero-drift { animation:none; }
@media (prefers-reduced-motion: reduce) {
  .hbi-hero-bg .hbi-hero-drift, .hbi-hero-bg .hbi-hero-glow { animation:none; }
}

/* LinkedIn placeholders hidden until HBI has a LinkedIn page (client, 2026-10-05):
   the Contact "Follow HBI Capital" card and the case-study share icon. Delete
   these rules (and set the real links) to bring them back. */
#ct-info-linkedin,
#cst-share a[aria-label="Share on LinkedIn"] { display: none; }

/* Skip-link target (dynamic-header.php): focusable, but no visible outline/box. */
#hbi-main { outline: none; }

/* iOS Safari zooms the page into any form field with text under 16px when it is
   tapped. The three Gravity Forms use 15px, so phones get 16px (desktop keeps
   15px). Same selectors + !important as the forms' own rules, later in the file. */
@media (max-width: 767px) {
    #ct-form-mount input[type="text"], #ct-form-mount input[type="email"], #ct-form-mount input[type="tel"], #ct-form-mount textarea,
    #fb-register-mount input[type="text"], #fb-register-mount input[type="email"], #fb-register-mount input[type="tel"], #fb-register-mount textarea,
    #nr-subscribe-mount input[type="email"] { font-size: 16px !important; }
}

/* ==========================================================================
   Tablet + phone (900px and below): centred section headers and step sections
   --------------------------------------------------------------------------
   Desktop is untouched: everything here sits inside one max-width:900px query
   (where these layouts have stacked to one column).
   - Step sections (number circle, title, short text) are centred whole.
   - Card-grid sections centre only their header (eyebrow, heading, intro,
     standalone link/button); the cards themselves keep their layout.
   - Left as they were: heroes, long reading text, lists, forms, FAQ answers,
     data tables, card contents.
   Centred eyebrows get the gold rule on both sides (as #quotes does).
   ========================================================================== */
@media (max-width: 900px) {

    /* --- shared: the second rule on a centred eyebrow -------------------- */
    #how > .inner > .eyebrow::after,
    #products > .inner > .eyebrow::after,
    #why > .inner > .row > .col:first-child > .eyebrow::after,
    #cases > .inner > .eyebrow::after,
    #news > .inner > .eyebrow::after,
    #bfh-products-inner > .eyebrow::after,
    #fb-get-inner > .eyebrow::after,
    #thinking-head .eyebrow::after,
    #nr-grid-head-left > .eyebrow::after,
    #bfh-how-inner > .eyebrow::after, #bl-how-inner > .eyebrow::after, #dxf-how-inner > .eyebrow::after,
    #scb-how-inner > .eyebrow::after, #fbf-need-inner > .eyebrow::after, #fb-place-inner > .eyebrow::after,
    [id$="-related-inner"] > .eyebrow::after,
    #csa-list-eyebrow .elementor-heading-title::after {
        content: "";
        inline-size: 24px;
        block-size: 1px;
        background: var(--Gold, #b08d4f);
        flex: none;
    }

    /* --- step sections: centred whole ------------------------------------ */
    #how > .inner,
    #bfh-how-inner, #bl-how-inner, #dxf-how-inner, #scb-how-inner, #fbf-need-inner, #fb-place-inner {
        align-items: center;
        text-align: center;
    }
    #how > .inner > .eyebrow,
    #bfh-how-inner > .eyebrow, #bl-how-inner > .eyebrow, #dxf-how-inner > .eyebrow,
    #scb-how-inner > .eyebrow, #fbf-need-inner > .eyebrow, #fb-place-inner > .eyebrow {
        justify-content: center;
    }
    #how > .inner > .h-sec,
    #bfh-how-inner > .h-sec, #bl-how-inner > .h-sec, #dxf-how-inner > .h-sec,
    #scb-how-inner > .h-sec, #fbf-need-inner > .h-sec, #fb-place-inner > .h-sec {
        margin-inline: auto;
    }
    #how .grid-3 { justify-items: center; }
    #how .grid-3 > .card { align-items: center; }
    #how .grid-3 > .card > .card-text { margin-inline: auto; }
    #how > .inner > .link-gold { align-self: center; }
    #bfh-how-grid > *, #bl-how-grid > *, #dxf-how-grid > *,
    #scb-how-grid > *, #fbf-need-grid > *, #fb-place-grid > * {
        align-items: center;
    }
    #bfh-how-grid > * > :last-child, #bl-how-grid > * > :last-child, #dxf-how-grid > * > :last-child,
    #scb-how-grid > * > :last-child, #fbf-need-grid > * > :last-child, #fb-place-grid > * > :last-child {
        margin-inline: auto;
    }

    /* --- card-grid sections: header only --------------------------------- */
    /* Grid parents (#products, #cases): justify-self. */
    #products > .inner > .eyebrow,
    #products > .inner > .h-sec,
    #products > .inner > .link-gold,
    #cases > .inner > .eyebrow,
    #cases > .inner > .h-sec,
    #cases > .inner > .btn-ghost {
        justify-self: center;
        text-align: center;
    }

    /* Flex-column parents: align-self. */
    #news > .inner > .eyebrow, #news > .inner > .h-sec,
    #bfh-products-inner > .eyebrow, #bfh-products-inner > .h-sec,
    #fb-get-inner > .eyebrow, #fb-get-inner > .h-sec,
    [id$="-related-inner"] > .eyebrow {
        align-self: center;
        text-align: center;
    }

    #products > .inner > .eyebrow, #cases > .inner > .eyebrow, #news > .inner > .eyebrow,
    #bfh-products-inner > .eyebrow, #fb-get-inner > .eyebrow, [id$="-related-inner"] > .eyebrow {
        justify-content: center;
    }

    /* Home "Why brokers keep coming back": the intro column. */
    #why > .inner > .row > .col:first-child {
        align-items: center;
        text-align: center;
    }
    #why > .inner > .row > .col:first-child > .eyebrow { justify-content: center; }
    #why > .inner > .row > .col:first-child > .lead { margin-inline: auto; }
    #why > .inner > .row > .col:first-child > .link-gold { align-self: center; }

    /* About "Four principles": heading block and its link stack, centred. */
    #thinking-head {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    /* flex:none — the column's flex basis (meant as a width in the desktop row)
       became a tall empty height once the head stacks. */
    #thinking-head > .col { align-items: center; flex: none; }
    #thinking-head .eyebrow { justify-content: center; }
    #thinking-head > :last-child { align-self: center; }

    /* Case Studies + Newsroom: heading and filter pills. */
    #csa-list-head, #nr-grid-head {
        flex-direction: column;
        align-items: center;
    }
    /* flex:none — #nr-grid-head-left's desktop basis (1 1 320px) turned into a
       ~250px empty gap above the pills once the head stacks. */
    #csa-list-head-left, #nr-grid-head-left {
        align-items: center;
        text-align: center;
        flex: none;
    }
    #csa-list-eyebrow .elementor-heading-title { justify-content: center; }
    #nr-grid-head-left > .eyebrow { justify-content: center; }
    #csa-pills, #nr-pills { justify-content: center; }

    /* Article template "Related" (PHP, not Elementor): dash both sides. */
    #ar-related .ar-eyebrow { justify-content: center; }
    #ar-related .ar-eyebrow::after {
        content: "";
        width: 24px;
        height: 1px;
        background: var(--Gold);
        flex: none;
    }
}

/* Centred eyebrows that wrap onto two lines would strand their side rules at
   the screen edges, so they drop the rules where they wrap (measured): five of
   them below 375px, and "How we think about lending" below 414px. */
@media (max-width: 374px) {
    #how > .inner > .eyebrow::before, #how > .inner > .eyebrow::after,
    #products > .inner > .eyebrow::before, #products > .inner > .eyebrow::after,
    #why > .inner > .row > .col:first-child > .eyebrow::before, #why > .inner > .row > .col:first-child > .eyebrow::after,
    #cases > .inner > .eyebrow::before, #cases > .inner > .eyebrow::after,
    #news > .inner > .eyebrow::before, #news > .inner > .eyebrow::after,
    #bfh-products-inner > .eyebrow::before, #bfh-products-inner > .eyebrow::after,
    #fb-get-inner > .eyebrow::before, #fb-get-inner > .eyebrow::after,
    #nr-grid-head-left > .eyebrow::before, #nr-grid-head-left > .eyebrow::after,
    #bfh-how-inner > .eyebrow::before, #bfh-how-inner > .eyebrow::after,
    #bl-how-inner > .eyebrow::before, #bl-how-inner > .eyebrow::after,
    #dxf-how-inner > .eyebrow::before, #dxf-how-inner > .eyebrow::after,
    #scb-how-inner > .eyebrow::before, #scb-how-inner > .eyebrow::after,
    #fbf-need-inner > .eyebrow::before, #fbf-need-inner > .eyebrow::after,
    #fb-place-inner > .eyebrow::before, #fb-place-inner > .eyebrow::after,
    #csa-list-eyebrow .elementor-heading-title::before, #csa-list-eyebrow .elementor-heading-title::after {
        content: none;
    }
}

@media (max-width: 413px) {
    #thinking-head .eyebrow::before, #thinking-head .eyebrow::after { content: none; }
}

/* Home "Broker FAQs" on tablet + phone: header block (eyebrow, heading, intro,
   link) centred like the other sections; the questions stay left-aligned. */
@media (max-width: 900px) {
    #faq > .inner > .eyebrow,
    #faq > .inner > .h-sec,
    #faq > .inner > .lead,
    #faq > .inner > .link-gold {
        justify-self: center;
        text-align: center;
    }

    #faq > .inner > .eyebrow { justify-content: center; }

    #faq > .inner > .eyebrow::after {
        content: "";
        inline-size: 24px;
        block-size: 1px;
        background: var(--Gold, #b08d4f);
        flex: none;
    }
}