/* ══════════════════════════════════════════════════════════════════
   GTK KEPRI BEDELAU — LANDING PAGE — SECTION STYLES
   "Geometric Editorial"

   Design language taken from the logo itself: a bold letterform built
   from quarter- and half-circles on a strict grid, in flat blue /
   orange / green / red. So the page is built the same way —
   modular geometry, colour used as structural blocks rather than
   gradients, strict typographic grid, generous white space.

   Everything is scoped under `body.bd-landing`, so this redesign
   cannot affect the other public pages that still use site.css.
   ══════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────
   3. LAYOUT PRIMITIVES
   ───────────────────────────────────────────────────────────────── */
.bd-shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.bd-section {
    position: relative;
    padding-block: var(--band);
    /* NOT overflow:hidden — clipping here is exactly what made the page read
       as a stack of rectangles. Sideways bleed is clipped once, further up,
       by .bd-world { overflow-x: clip }. */
    overflow: visible;
}

/* Sections are transparent by design: the page's colour comes from the
   single continuous canvas behind them (geometric-background.css), which
   is what lets shapes cross section boundaries for real. */
.bd-section--paper,
.bd-section--alt,
.bd-section--warm { background: transparent; }

/* Only the dark band still carries colour, and it is drawn as an inset
   rounded island by geometric-background.css rather than a full-bleed
   rectangle. */
.bd-section--ink { color: #fff; }

.bd-section--ink .bd-h2,
.bd-section--ink h3 { color: #fff; }
.bd-section--ink .bd-lead,
.bd-section--ink .bd-body { color: rgba(255,255,255,.66); }
.bd-section--ink .bd-eyebrow { color: rgba(255,255,255,.5); }

/* Section masthead: number · rule · label, then title.
   This repeating editorial rhythm is the page's signature. */
.bd-masthead { margin-bottom: clamp(40px, 5vw, 72px); }

.bd-masthead__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.bd-masthead__num {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--accent, var(--blue));
    font-variant-numeric: tabular-nums;
}

.bd-masthead__rule {
    height: 2px;
    width: clamp(28px, 6vw, 72px);
    background: var(--accent, var(--blue));
    flex-shrink: 0;
}

.bd-masthead__title { max-width: 20ch; }
.bd-masthead__lead  { margin-top: 20px; max-width: 56ch; }

.bd-masthead--center {
    text-align: center;
}
.bd-masthead--center .bd-masthead__meta { justify-content: center; }
.bd-masthead--center .bd-masthead__title,
.bd-masthead--center .bd-masthead__lead { margin-inline: auto; }
/* ─────────────────────────────────────────────────────────────────
   6. HERO — white, asymmetric, type-led
   ───────────────────────────────────────────────────────────────── */
.bd-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    /* Transparent: the hero sits on the page-wide canvas like every other
       section, so the opening geometry can continue past its bottom edge. */
    background: transparent;
    overflow: visible;
    /* The navbar is position:fixed, so it no longer occupies flow — this
       only needs to clear the floating bar (~78px), not stack beneath it.
       Kept near-symmetric so the centred content sits optically centred. */
    padding-block: clamp(92px, 10vh, 112px) clamp(60px, 7vh, 84px);
}

.bd-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(32px, 6vw, 80px);
    /* Top-aligned, not centred: the composition should start on the same
       line as the headline. Centring pushed it below, because the left
       column is much taller (lead + buttons + stats). */
    align-items: start;
    width: 100%;
}

.bd-hero__content { position: relative; z-index: 3; }

.bd-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border: 1.5px solid var(--line);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    /* Height + this margin is what the art column offsets itself by, so the
       composition's top edge lands level with the headline. */
    margin-bottom: var(--hero-tag-gap, 30px);
}
.bd-hero__tag::before {
    content: '';
    width: 7px; height: 7px;
    background: var(--green);
    border-radius: 50%;
}

/* Each line of the headline sits in its own overflow-clipped row so the
   entrance can slide them up from behind a hard edge. */
.bd-hero__line { display: block; overflow: hidden; }
.bd-hero__line > span { display: block; }

.bd-hero__accent { color: var(--blue); }

.bd-hero__lead {
    margin-top: 28px;
    max-width: 46ch;
    font-size: clamp(1rem, 1.3vw, 1.16rem);
    line-height: 1.72;
    color: var(--ink-soft);
}

.bd-hero__actions {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

/* Stats rail under the hero copy */
.bd-hero__stats {
    margin-top: 56px;
    display: flex;
    gap: clamp(24px, 4vw, 56px);
    padding-top: 28px;
    border-top: 1px solid var(--line);
}
.bd-stat__num {
    font-size: clamp(1.9rem, 3vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.bd-stat__num--blue   { color: var(--blue); }
.bd-stat__num--orange { color: var(--orange); }
.bd-stat__num--green  { color: var(--green); }
.bd-stat__label {
    margin-top: 8px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
}

/* ── Hero composition: the logo's construction, rebuilt at scale ──
   A 3×3 grid of quarter/half circles echoing how the "B" is drawn. */
.bd-hero__art {
    position: relative;
    aspect-ratio: 1;
    max-width: 520px;
    margin-inline: auto;
    width: 100%;
    /* Clears the eyebrow tag (≈32px tall) plus its bottom margin, so the
       composition's first row starts level with "Praktik Baik". */
    margin-top: calc(32px + var(--hero-tag-gap, 30px));
}

.bd-artgrid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
}

.bd-cell {
    position: relative;
    overflow: hidden;
}
.bd-cell__fill {
    position: absolute;
    inset: 0;
    background: var(--cell, var(--blue));
}
/* Shape variants — the vocabulary of the logo */
.bd-cell--q1 .bd-cell__fill { border-radius: 100% 0 0 0; }
.bd-cell--q2 .bd-cell__fill { border-radius: 0 100% 0 0; }
.bd-cell--q3 .bd-cell__fill { border-radius: 0 0 100% 0; }
.bd-cell--q4 .bd-cell__fill { border-radius: 0 0 0 100%; }
.bd-cell--half-t .bd-cell__fill { border-radius: 100% 100% 0 0; }
.bd-cell--half-b .bd-cell__fill { border-radius: 0 0 100% 100%; }
.bd-cell--circle .bd-cell__fill { border-radius: 50%; }
.bd-cell--lens .bd-cell__fill { border-radius: 100% 0 100% 0; }
.bd-cell--full .bd-cell__fill { border-radius: 0; }

/* Floating logo chip pinned over the composition */
.bd-hero__chip {
    position: absolute;
    right: -6%;
    bottom: -6%;
    width: clamp(96px, 13vw, 132px);
    aspect-ratio: 1;
    background: #fff;
    padding: 12px;
    box-shadow: 0 24px 60px rgba(11,26,43,.16);
    z-index: 4;
}
.bd-hero__chip img { width: 100%; height: 100%; object-fit: contain; }

.bd-hero__scroll {
    position: absolute;
    left: var(--gutter);
    bottom: 34px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-faint);
    z-index: 3;
}
.bd-hero__scroll-bar {
    width: 46px; height: 2px;
    background: var(--line);
    position: relative;
    overflow: hidden;
}
.bd-hero__scroll-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform-origin: left center;
    animation: bd-scrollcue 2.1s ease-in-out infinite;
}
@keyframes bd-scrollcue {
    0%   { transform: scaleX(0); transform-origin: left center; }
    50%  { transform: scaleX(1); transform-origin: left center; }
    51%  { transform: scaleX(1); transform-origin: right center; }
    100% { transform: scaleX(0); transform-origin: right center; }
}

/* ─────────────────────────────────────────────────────────────────
   7. MARQUEE — connective tissue between sections
   ───────────────────────────────────────────────────────────────── */
/* The hero → section 01 boundary. Deliberately the one hard edge on the
   page: a solid dark band that closes the hero and opens the body of the
   site. Everything else stays continuous. */
.bd-marquee {
    background: var(--ink);
    color: #fff;
    padding: 22px 0;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
    box-shadow: 0 -18px 40px rgba(11, 26, 43, .10);
}
.bd-marquee__track {
    display: flex;
    align-items: center;
    gap: 34px;
    padding-right: 34px;
    animation: bd-marquee 34s linear infinite;
    flex-shrink: 0;
    min-width: 100%;
}
.bd-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 34px;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.bd-marquee__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--orange);
    flex-shrink: 0;
}
@keyframes bd-marquee {
    to { transform: translateX(-100%); }
}
.bd-marquee:hover .bd-marquee__track { animation-play-state: paused; }

/* ─────────────────────────────────────────────────────────────────
   8. ABOUT — editorial split
   ───────────────────────────────────────────────────────────────── */
.bd-about__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(32px, 6vw, 90px);
    align-items: start;
}
.bd-about__body p + p { margin-top: 18px; }

.bd-pillars {
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.bd-pillar {
    background: var(--paper);
    padding: 26px 24px;
    transition: background .25s ease;
}
.bd-pillar:hover { background: var(--paper-alt); }
.bd-pillar__mark {
    width: 34px; height: 34px;
    margin-bottom: 16px;
    background: var(--accent, var(--blue));
    border-radius: 100% 0 100% 0;
}
.bd-pillar__title { font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; }
.bd-pillar__text { font-size: 0.85rem; line-height: 1.65; color: var(--ink-soft); margin: 0; }

/* ─────────────────────────────────────────────────────────────────
   9. CATEGORIES — two large editorial cards
   ───────────────────────────────────────────────────────────────── */
.bd-cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(20px, 2.6vw, 32px);
}

.bd-cat {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(32px, 4vw, 48px);
    background: var(--paper);
    border: 1.5px solid var(--line);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    min-height: 340px;
    transition: border-color .3s ease, transform .3s var(--ease-out-soft);
}
.bd-cat:hover {
    border-color: var(--accent, var(--blue));
    transform: translateY(-6px);
    color: inherit;
}

/* Geometric corner block — the card's identity, drawn not decorated */
.bd-cat__corner {
    position: absolute;
    top: 0; right: 0;
    width: 128px; height: 128px;
    background: var(--accent, var(--blue));
    border-radius: 0 0 0 100%;
    opacity: .12;
    transition: opacity .3s ease, transform .45s var(--ease-out-soft);
}
.bd-cat:hover .bd-cat__corner { opacity: .2; transform: scale(1.18); }

.bd-cat__num {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--accent, var(--blue));
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}
.bd-cat__title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 14px; position: relative; z-index: 1; }
.bd-cat__desc {
    font-size: 0.93rem;
    line-height: 1.72;
    color: var(--ink-soft);
    margin: 0 0 26px;
    position: relative; z-index: 1;
}
.bd-cat__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    position: relative; z-index: 1;
}
.bd-cat__count {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.bd-cat__go {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 1.5px solid var(--line);
    color: var(--ink);
    transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.bd-cat:hover .bd-cat__go {
    background: var(--accent, var(--blue));
    border-color: var(--accent, var(--blue));
    color: #fff;
    transform: translateX(4px);
}

/* ─────────────────────────────────────────────────────────────────
   10. TIMELINE — editorial spine
   ───────────────────────────────────────────────────────────────── */
.bd-timeline {
    position: relative;
    margin-top: 8px;
    padding-left: 0;
}

/* Static track + scroll-driven fill */
.bd-timeline__track,
.bd-timeline__fill {
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
}
.bd-timeline__track { background: var(--line); }
.bd-timeline__fill {
    background: linear-gradient(to bottom, var(--blue), var(--green) 45%, var(--orange));
    transform: scaleY(0);
    transform-origin: top center;
}
@media (min-width: 768px) {
    .bd-timeline__track,
    .bd-timeline__fill { left: 143px; }
}

.bd-tl-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px 40px;
    padding: 0 0 46px 40px;
}
@media (min-width: 768px) {
    .bd-tl-item {
        grid-template-columns: 120px 1fr;
        padding-left: 0;
    }
}
.bd-tl-item:last-child { padding-bottom: 0; }

.bd-tl-item__date {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-top: 2px;
    transition: color .35s ease;
}
.bd-tl-item.is-active .bd-tl-item__date { color: var(--accent, var(--blue)); }

.bd-tl-item__body { position: relative; padding-left: 40px; }
@media (max-width: 767px) { .bd-tl-item__body { padding-left: 0; } }

/* Node sits on the spine */
.bd-tl-item__node {
    position: absolute;
    left: -40px;
    top: 4px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--line);
    transition: background .35s ease, border-color .35s ease, transform .35s var(--ease-spring);
    z-index: 1;
}
@media (max-width: 767px) {
    .bd-tl-item__node { left: -40px; }
}
@media (min-width: 768px) {
    .bd-tl-item__node { left: 15px; }
}
.bd-tl-item.is-active .bd-tl-item__node {
    background: var(--accent, var(--blue));
    border-color: var(--accent, var(--blue));
    transform: scale(1.25);
}

.bd-tl-item__title { font-size: 1.12rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.02em; }
.bd-tl-item__text { font-size: 0.92rem; line-height: 1.7; color: var(--ink-soft); margin: 0; max-width: 62ch; }

/* ─────────────────────────────────────────────────────────────────
   11. AWARDS — dark band, the page's tonal contrast
   ───────────────────────────────────────────────────────────────── */
.bd-awards { position: relative; }

.bd-awards__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
    gap: 1px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.12);
}

.bd-award {
    position: relative;
    background: var(--ink);
    padding: 38px 30px 34px;
    overflow: hidden;
    transition: background .3s ease;
}
.bd-award:hover { background: #10233a; }

.bd-award__num {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--accent, var(--blue));
    margin-bottom: 26px;
}
/* Quarter circle — the logo's own unit. Previously a dome
   (100% 100% 0 0), which at this size just read as a headstone. */
.bd-award__mark {
    width: 40px; height: 40px;
    margin-bottom: 22px;
    background: var(--accent, var(--blue));
    border-radius: 100% 0 0 0;
    transition: transform .4s var(--ease-spring);
}
.bd-award:hover .bd-award__mark { transform: rotate(-90deg); }
.bd-award__title { font-size: 1.02rem; font-weight: 700; color: #fff; margin-bottom: 12px; }
.bd-award__text { font-size: 0.87rem; line-height: 1.72; color: rgba(255,255,255,.6); margin: 0; }

.bd-award--feature { background: #10233a; }
.bd-award--feature::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--orange);
    pointer-events: none;
}

.bd-awards__quote {
    margin-top: 56px;
    max-width: 62ch;
    margin-inline: auto;
    text-align: center;
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    line-height: 1.62;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: rgba(255,255,255,.82);
}

/* ─────────────────────────────────────────────────────────────────
   12. JUDGES — calm, restrained
   ───────────────────────────────────────────────────────────────── */
.bd-judges__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.bd-judge {
    background: var(--paper);
    padding: 34px 26px;
    transition: background .28s ease;
}
.bd-judge:hover { background: var(--paper-alt); }

/* Accent cycles through the brand palette across the row */
.bd-judge:nth-child(4n+1) { --accent: var(--blue); }
.bd-judge:nth-child(4n+2) { --accent: var(--orange); }
.bd-judge:nth-child(4n+3) { --accent: var(--green); }
.bd-judge:nth-child(4n+4) { --accent: var(--red); }

.bd-judge__mark {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    background: var(--accent, var(--blue));
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    border-radius: 100% 0 100% 0;
    margin-bottom: 22px;
}
.bd-judge__role {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent, var(--blue));
    margin-bottom: 10px;
}
.bd-judge__name { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.bd-judge__org { font-size: 0.85rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.bd-judge__badge {
    display: inline-block;
    margin-top: 16px;
    padding: 5px 11px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #92400e;
    background: #fef3c7;
    border: 1px dashed #f59e0b;
}
.bd-judges__note {
    margin-top: 30px;
    font-size: 0.85rem;
    color: var(--ink-faint);
}

/* ─────────────────────────────────────────────────────────────────
   13. TERMS — numbered list, no card chrome
   ───────────────────────────────────────────────────────────────── */
.bd-terms__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(32px, 6vw, 90px);
    align-items: start;
}
.bd-terms__list { border-top: 1px solid var(--line); }

.bd-term {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 20px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
    transition: padding-left .28s var(--ease-out-soft);
}
.bd-term:hover { padding-left: 10px; }
.bd-term__num {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--accent, var(--blue));
    padding-top: 3px;
    font-variant-numeric: tabular-nums;
}
.bd-term__title { font-size: 1rem; font-weight: 700; margin-bottom: 7px; }
.bd-term__text { font-size: 0.9rem; line-height: 1.7; color: var(--ink-soft); margin: 0; }

/* ─────────────────────────────────────────────────────────────────
   14. STEPS — horizontal numbered flow
   ───────────────────────────────────────────────────────────────── */
.bd-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.bd-step {
    background: var(--paper);
    padding: 32px 26px 30px;
    position: relative;
    transition: background .25s ease;
}
.bd-step:hover { background: var(--paper-alt); }
.bd-step__num {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--line);
    margin-bottom: 18px;
    transition: color .3s ease;
    font-variant-numeric: tabular-nums;
}
.bd-step:hover .bd-step__num { color: var(--accent, var(--blue)); }
.bd-step__title { font-size: 0.98rem; font-weight: 700; margin-bottom: 9px; }
.bd-step__text { font-size: 0.86rem; line-height: 1.68; color: var(--ink-soft); margin: 0; }

/* ─────────────────────────────────────────────────────────────────
   15. FAQ
   ───────────────────────────────────────────────────────────────── */
.bd-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(32px, 6vw, 90px);
    align-items: start;
}
.bd-faq__list { border-top: 1.5px solid var(--ink); }

.bd-faq-item { border-bottom: 1px solid var(--line); }

.bd-faq-item__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    background: none;
    border: 0;
    text-align: left;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    cursor: pointer;
    transition: color .2s ease;
}
.bd-faq-item__q:hover { color: var(--blue); }
.bd-faq-item__q:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.bd-faq-item__sign {
    position: relative;
    flex-shrink: 0;
    width: 22px; height: 22px;
}
.bd-faq-item__sign::before,
.bd-faq-item__sign::after {
    content: '';
    position: absolute;
    background: currentColor;
    transition: transform .3s var(--ease-out-soft), opacity .3s ease;
}
.bd-faq-item__sign::before { left: 0; right: 0; top: 10px; height: 2px; }
.bd-faq-item__sign::after  { top: 0; bottom: 0; left: 10px; width: 2px; }
.bd-faq-item.is-open .bd-faq-item__sign::after { transform: scaleY(0); opacity: 0; }
.bd-faq-item.is-open .bd-faq-item__q { color: var(--blue); }

.bd-faq-item__a { padding: 0 0 26px; }
.bd-faq-item__a p {
    margin: 0;
    max-width: 64ch;
    font-size: 0.94rem;
    line-height: 1.78;
    color: var(--ink-soft);
}
.js-motion .bd-faq-item__a { height: 0; overflow: hidden; }

.bd-note {
    margin-top: 26px;
    padding: 13px 18px;
    border-left: 3px solid var(--orange);
    background: #fffbeb;
    color: #92400e;
    font-size: 0.8rem;
    line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────────
   16. FINAL CTA — full-bleed colour block
   ───────────────────────────────────────────────────────────────── */
.bd-cta {
    position: relative;
    /* Colour comes from the ::before block in geometric-background.css,
       which carries the curved top edge. */
    background: transparent;
    color: #fff;
    padding-block: clamp(88px, 12vh, 150px);
    overflow: hidden;
    text-align: center;
}
.bd-cta__inner { position: relative; z-index: 2; }

.bd-cta__eyebrow {
    display: inline-block;
    padding: 7px 18px;
    border: 1.5px solid rgba(255,255,255,.4);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.9);
    margin-bottom: 28px;
}

.bd-cta__title {
    font-size: clamp(2.2rem, 5.4vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: #fff;
    max-width: 18ch;
    margin-inline: auto;
}
.bd-cta__lead {
    margin: 26px auto 40px;
    max-width: 50ch;
    font-size: 1.04rem;
    line-height: 1.7;
    color: rgba(255,255,255,.86);
}

.bd-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px 26px;
    flex-wrap: wrap;
}
.bd-cta__secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    font-weight: 700;
    color: rgba(255,255,255,.92);
    text-decoration: none;
    padding-bottom: 3px;
    background-image: linear-gradient(#fff, #fff);
    background-size: 0% 2px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size .32s var(--ease-out-soft), color .2s ease;
}
.bd-cta__secondary:hover { background-size: 100% 2px; color: #fff; }
.bd-cta__secondary i { transition: transform .25s var(--ease-out-soft); }
.bd-cta__secondary:hover i { transform: translate(3px, -3px); }

/* Supporting facts — closes the page on something concrete. */
.bd-cta__facts {
    list-style: none;
    margin: 56px auto 0;
    padding: 30px 0 0;
    max-width: 720px;
    border-top: 1px solid rgba(255,255,255,.26);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 24px;
}
.bd-cta__facts li { text-align: center; }
.bd-cta__facts strong {
    display: block;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.035em;
    color: #fff;
    line-height: 1;
}
.bd-cta__facts span {
    display: block;
    margin-top: 8px;
    font-size: .8rem;
    font-weight: 600;
    color: rgba(255,255,255,.72);
}

/* Four logo units framing the button.
   Outlines, not fills: solid orange/green/red at partial opacity over blue
   mixed into muddy olive and tan. Strokes keep the brand geometry readable
   without ever blending into an off-brand colour. */
.bd-cta__unit {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    border: 2px solid rgba(255, 255, 255, .22);
    background: none;
}
.bd-cta__unit--1 { width: min(200px, 21vw); aspect-ratio: 1; border-radius: 100% 0 0 0; top: 12%;   left: 5%; }
.bd-cta__unit--2 { width: min(150px, 16vw); aspect-ratio: 1; border-radius: 0 100% 0 0; top: 17%;   right: 7%; }
.bd-cta__unit--3 { width: min(170px, 18vw); aspect-ratio: 1; border-radius: 0 0 0 100%; bottom: 13%; left: 10%; }
.bd-cta__unit--4 { width: min(130px, 14vw); aspect-ratio: 1; border-radius: 0 0 100% 0; bottom: 9%;  right: 12%; }

/* ─────────────────────────────────────────────────────────────────
   17. FOOTER (scoped restyle)
   ───────────────────────────────────────────────────────────────── */
/* The global footer in site.css now carries the new design language, so
   the landing page needs no overrides of its own. */


/* ═════════════════════════════════════════════════════════════════
   17b. ORNAMENT LAYER
   Texture, pattern and geometric furniture. All of it is decorative:
   pointer-events:none, z-index 0, aria-hidden in the markup, and
   thinned out or removed entirely on small screens.
   ═════════════════════════════════════════════════════════════════ */

/* Content always sits above the ornament layer. */
.bd-landing .bd-shell { position: relative; z-index: 1; }

/* ── Patterns ─────────────────────────────────────────────────── */
.bd-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Dot grid — the workhorse texture on light sections. */
.bd-pattern--dots {
    background-image: radial-gradient(circle, currentColor 1.15px, transparent 1.15px);
    background-size: 26px 26px;
    color: var(--ink-faint);
    opacity: .22;
}

/* Engineering grid — squared rules, echoes the logo's construction grid. */
.bd-pattern--grid {
    background-image:
        linear-gradient(to right, currentColor 1px, transparent 1px),
        linear-gradient(to bottom, currentColor 1px, transparent 1px);
    background-size: 72px 72px;
    color: var(--ink);
    opacity: .05;
}

/* Diagonal hatch — used sparingly as a block accent. */
.bd-pattern--hatch {
    background-image: repeating-linear-gradient(
        45deg,
        currentColor 0 2px,
        transparent 2px 9px
    );
    color: var(--accent, var(--blue));
    opacity: .14;
}

/* Patterns rarely look good edge-to-edge — these fade them out. */
.bd-fade-b  { -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%); mask-image: linear-gradient(to bottom, #000 30%, transparent 100%); }
.bd-fade-t  { -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 100%);    mask-image: linear-gradient(to top, #000 30%, transparent 100%); }
.bd-fade-r  { -webkit-mask-image: linear-gradient(to right, #000 20%, transparent 90%);   mask-image: linear-gradient(to right, #000 20%, transparent 90%); }
.bd-fade-l  { -webkit-mask-image: linear-gradient(to left, #000 20%, transparent 90%);    mask-image: linear-gradient(to left, #000 20%, transparent 90%); }
.bd-fade-c  {
    -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 78%);
    mask-image: radial-gradient(ellipse at center, #000 25%, transparent 78%);
}

/* Dark sections need light-on-dark patterns. */
.bd-section--ink .bd-pattern--dots { color: #fff; opacity: .12; }
.bd-section--ink .bd-pattern--grid { color: #fff; opacity: .07; }
.bd-cta .bd-pattern--dots { color: #fff; opacity: .18; }
/* ── Soft colour wash, so white sections are never bare ───────── */
.bd-wash {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: var(--wash-alpha, .3);
    pointer-events: none;
    z-index: 0;
    background: var(--accent, var(--blue));
    width: var(--wash-size, 420px);
    aspect-ratio: 1;
}

/* ── Ornament sizing helpers used with geometry.css .geo shapes ── */
.bd-orn { position: absolute; z-index: 0; pointer-events: none; }

/* ── Divider strip: a run of alternating brand blocks ─────────── */
.bd-strip {
    display: flex;
    height: 8px;
    width: 100%;
}
.bd-strip span { flex: 1; }

/* ── Section top/bottom notch, cut with a geometric edge ──────── */
.bd-notch {
    position: absolute;
    left: 0;
    right: 0;
    height: 56px;
    pointer-events: none;
    z-index: 1;
}
.bd-notch--t { top: -1px; }
.bd-notch--b { bottom: -1px; }

/* ── Ornament density: thin out, then remove ─────────────────── */
@media (max-width: 991px) {
    .bd-orn--lg { display: none; }
}
@media (max-width: 767px) {
    .bd-wash { display: none; }
    .bd-pattern--grid,
    .bd-pattern--hatch { display: none; }
    .bd-pattern--dots { background-size: 20px 20px; opacity: .16; }
}

/* ─────────────────────────────────────────────────────────────────
   18. MOTION BASE STATES
   Scoped to .js-motion so the page is fully visible without JS.
   ───────────────────────────────────────────────────────────────── */
.js-motion [data-anim] { opacity: 0; will-change: transform, opacity; }
.js-motion [data-anim="up"]    { transform: translateY(34px); }
.js-motion [data-anim="down"]  { transform: translateY(-26px); }
.js-motion [data-anim="left"]  { transform: translateX(34px); }
.js-motion [data-anim="right"] { transform: translateX(-34px); }
.js-motion [data-anim="zoom"]  { transform: scale(.94); }
.js-motion [data-anim="fade"]  { transform: none; }
.js-motion [data-anim="mask"]  { transform: translateY(100%); opacity: 1; }
[data-anim].anim-done { will-change: auto; }

/* ─────────────────────────────────────────────────────────────────
   19. RESPONSIVE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .bd-hero__grid,
    .bd-about__grid,
    .bd-terms__grid,
    .bd-faq__grid { grid-template-columns: minmax(0, 1fr); }

    .bd-hero { min-height: auto; padding-block: 96px 64px; }
    .bd-hero__art { max-width: 380px; margin-top: 16px; }
    .bd-hero__chip { right: 0; bottom: -4%; }
    .bd-hero__scroll { display: none; }
}

@media (max-width: 767px) {
    .bd-hero__stats { flex-wrap: wrap; gap: 22px 32px; }
    .bd-cat { min-height: 0; }
}

/* ─────────────────────────────────────────────────────────────────
   20. REDUCED MOTION
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bd-landing [data-anim] { opacity: 1 !important; transform: none !important; }
    .bd-marquee__track { animation: none !important; }
    .bd-hero__scroll-bar::after { animation: none !important; transform: scaleX(1); }
    .bd-timeline__fill { transform: scaleY(1) !important; }
    .bd-cat:hover,
    .bd-btn:hover,
    .bd-term:hover { transform: none !important; padding-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO BACKDROP SLIDER

   Crossfading photographs of past GTK events behind the whole hero, under a
   dark scrim. Crossfade rather than horizontal slide: a sideways movement
   fights the page's scroll direction and drags the eye away from the headline.

   The nine-cell geometric composition and every existing ornament layer stay
   exactly where they were — this sits beneath all of them.
   ═══════════════════════════════════════════════════════════════════════════ */
.bd-hero--photo {
    position: relative;
    isolation: isolate;
    background: #08131F;
}

.bd-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    overflow: hidden;
}

.bd-hero__bg .bd-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
}

.bd-hero__bg .bd-slide.is-active { opacity: 1; }

.bd-hero__bg .bd-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
}

/* Heavier down the left, where the headline and lead sit; lighter on the right
   so the photograph still reads behind the geometric composition. */
.bd-hero__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(95deg,
            rgba(6, 17, 29, .93) 0%,
            rgba(6, 17, 29, .84) 42%,
            rgba(6, 17, 29, .62) 100%),
        linear-gradient(180deg,
            rgba(6, 17, 29, .55) 0%,
            transparent 28%,
            rgba(6, 17, 29, .70) 100%);
}

.bd-slider__dots {
    position: absolute;
    right: clamp(20px, 4vw, 56px);
    bottom: 22px;
    z-index: 2;
    display: flex;
    gap: 7px;
}

.bd-slider__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}

.bd-slider__dot.is-active {
    width: 26px;
    border-radius: 5px;
    background: #fff;
}

/* ── Hero type, inverted for the dark backdrop ─────────────────────────── */
.bd-hero--photo .bd-display,
.bd-hero--photo .bd-hero__line > span {
    color: #fff;
    text-shadow: 0 2px 26px rgba(0, 0, 0, .5);
}

.bd-hero--photo .bd-hero__lead {
    color: rgba(255, 255, 255, .88);
    text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}

.bd-hero--photo .bd-hero__tag {
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}

.bd-hero--photo .bd-stat__label { color: rgba(255, 255, 255, .72); }

.bd-hero--photo .bd-hero__stats { border-top-color: rgba(255, 255, 255, .2); }

.bd-hero--photo .bd-hero__scroll,
.bd-hero--photo .bd-hero__scroll span { color: rgba(255, 255, 255, .7); }
.bd-hero--photo .bd-hero__scroll-bar { background: rgba(255, 255, 255, .45); }

/* Primary button keeps its brand fill; the ghost button flips to a light
   outline so it stays visible on the photograph. */
.bd-hero--photo .bd-btn--ghost {
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

.bd-hero--photo .bd-btn--ghost:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
}

/* ── Ornaments over a photograph ───────────────────────────────────────── */
/* The dot and grid patterns were drawn for white paper; over a photo they
   read as dirt on the lens. The outlined geometry survives, restated light. */
.bd-hero--photo .bd-pattern { display: none; }
.bd-hero--photo .bd-wash    { opacity: .35; }
/* Lifted just enough to register on the dark ground. The earlier
   brightness(1.7) turned the orange arc into a glowing band that fought
   everything it crossed. */
.bd-hero--photo .geo--blue,
.bd-hero--photo .geo--green  { filter: brightness(1.25); }
.bd-hero--photo .geo--orange { filter: brightness(1.05); opacity: .4; }

@media (prefers-reduced-motion: reduce) {
    .bd-hero__bg .bd-slide { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO FIT

   The display face topped out at 5.6rem. Three lines of that, plus the lead,
   the buttons and the stats row, overran a 768px-tall laptop viewport — the
   stats were cut off below the fold even though the section is 100vh.

   Scaled down and the vertical rhythm tightened so the whole hero lands in
   one screen. Scoped to the hero: .bd-display is used elsewhere and should
   keep its full size there.
   ═══════════════════════════════════════════════════════════════════════════ */
.bd-hero {
    /* svh tracks the visible viewport on mobile, where browser chrome
       otherwise makes 100vh taller than the screen actually is. */
    min-height: 100svh;
    padding-block: clamp(88px, 9vh, 104px) clamp(44px, 5vh, 64px);
}

.bd-hero .bd-display {
    font-size: clamp(2.1rem, 4.4vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.bd-hero__lead {
    margin-top: 18px;
    max-width: 44ch;
    font-size: clamp(.95rem, 1.05vw, 1.04rem);
    line-height: 1.62;
}

.bd-hero__actions { margin-top: 24px; }

.bd-hero__stats {
    margin-top: 32px;
    padding-top: 20px;
}

.bd-stat__num { font-size: clamp(1.6rem, 2.2vw, 2.1rem); }

/* Short laptop screens (≈720–800px tall) get one more notch down. */
@media (min-width: 992px) and (max-height: 820px) {
    .bd-hero .bd-display { font-size: clamp(1.95rem, 3.4vw, 2.9rem); }
    .bd-hero__lead       { margin-top: 14px; font-size: .95rem; line-height: 1.55; }
    .bd-hero__actions    { margin-top: 20px; }
    .bd-hero__stats      { margin-top: 24px; padding-top: 16px; }
    .bd-stat__num        { font-size: 1.75rem; }
    .bd-hero             { padding-block: 84px 40px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO COLUMN ALIGNMENT

   The art column carried a margin-top sized to clear the eyebrow tag, so its
   first row would start level with the headline. That was tuned against the
   old 5.6rem display face; with the type scaled down the left column is now
   about as tall as the composition, and the offset simply pushed the art
   ~70px below the text — its bottom row ran past the stats row and crowded
   the scroll cue.

   Centring the two columns against each other holds regardless of how the
   copy reflows, which the fixed offset never did.
   ═══════════════════════════════════════════════════════════════════════════ */
.bd-hero__grid {
    align-items: center;
}

.bd-hero__art {
    margin-top: 0;
    max-width: 470px;
}

/* The orange arc sits behind the logo chip; keep it from crowding the mark. */
.bd-hero--photo .geo--arc.geo--orange {
    --geo-alpha: .22;
}

@media (min-width: 992px) and (max-height: 820px) {
    .bd-hero__art { max-width: 420px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FINAL CTA — brought into line with the rest of the page

   Was a flat navy slab with four thin white outlines and a dot pattern. Read
   as a generic banner: nothing about it said GTK Kepri Bedelau, and the hairline
   strokes were too weak to register as the logo's geometry.

   Now it uses the same three devices the page has settled on — a photograph
   under a scrim (hero), glass chips (navbar), and the logo's quarter-circles
   in solid brand colour (hero art grid) — so the page closes on the same
   language it opened with.
   ═══════════════════════════════════════════════════════════════════════════ */
.bd-cta {
    isolation: isolate;
    padding-block: clamp(96px, 13vh, 158px);
}

.bd-cta__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: clamp(32px, 5vw, 72px) clamp(32px, 5vw, 72px) 0 0;
}

.bd-cta__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    display: block;
}

/* Deeper than the hero's scrim: this block carries a button and a facts row,
   and the photograph is a backdrop here rather than the subject. */
.bd-cta__scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(78% 60% at 20% 6%, rgba(41, 182, 246, .22), transparent 64%),
        linear-gradient(165deg,
            rgba(11, 46, 72, .94) 0%,
            rgba(9, 37, 59, .93) 52%,
            rgba(7, 28, 45, .96) 100%);
}

/* Brand rule along the top edge, following the section's curve. */
.bd-cta__strip {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 5px;
    border-radius: clamp(32px, 5vw, 72px) clamp(32px, 5vw, 72px) 0 0;
    overflow: hidden;
}

.bd-cta__strip span { display: block; }

/* ── Logo geometry, solid rather than outlined ─────────────────────────────
   The outlines were introduced because filled shapes at partial opacity over
   a blue field turned muddy. Cropped hard at the corners and fully opaque,
   they no longer overlap the text or each other, so they can carry real
   brand colour again. */
.bd-cta__unit {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    /* Square, so the border-radius reads as a true quarter-circle. The old
       rules set this per-unit; it is the same for all four. */
    aspect-ratio: 1;
    border: 0;
    opacity: .9;
}

.bd-cta__unit--1 {
    width: min(230px, 22vw);
    background: var(--color-blue);
    border-radius: 0 0 100% 0;
    top: 0; left: 0;
}

.bd-cta__unit--2 {
    width: min(150px, 15vw);
    background: var(--color-orange);
    border-radius: 0 0 0 100%;
    top: 0; right: 0;
}

.bd-cta__unit--3 {
    width: min(170px, 17vw);
    background: var(--color-green);
    border-radius: 0 100% 0 0;
    bottom: 0; left: 0;
}

.bd-cta__unit--4 {
    width: min(120px, 12vw);
    background: var(--color-red);
    border-radius: 100% 0 0 0;
    bottom: 0; right: 0;
}

/* The dot pattern fought the photograph, exactly as it did on the hero. */
.bd-cta .bd-pattern { display: none; }

/* ── Eyebrow: glass, matching the navbar and the hero tag ──────────────── */
.bd-cta__eyebrow {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .34);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    color: #fff;
}

.bd-cta__title {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    text-shadow: 0 2px 24px rgba(0, 0, 0, .4);
}

.bd-cta__lead { text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }

/* ── Facts as glass chips, not bare text under a rule ──────────────────── */
.bd-cta__facts {
    border-top: 0;
    padding-top: 0;
    margin-top: 48px;
    max-width: 760px;
    gap: 14px;
}

.bd-cta__facts li {
    padding: 20px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}

@media (max-width: 575.98px) {
    .bd-cta__unit--1 { width: 40vw; }
    .bd-cta__unit--2,
    .bd-cta__unit--4 { display: none; }
    .bd-cta__facts li { padding: 16px 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADING OVERRIDE FIX

   public.css carries a base rule:

       .bd-public h1, .bd-public h2, … { color: var(--ink); margin: 0; }

   Its specificity is (0,1,1) — one class plus one element. Every single-class
   selector here, like .bd-cta__title, is only (0,1,0), so the base rule wins
   no matter which file loads last. Two headings that are meant to be white on
   a dark ground were being painted --ink, and .bd-cta__title also lost its
   `margin-inline: auto`, which is why the CTA headline sat flush left inside
   its 18ch box while everything around it stayed centred.

   Both are heading elements; the sibling *__title rules that are on light
   sections are unaffected, because --ink is what they want anyway.
   ═══════════════════════════════════════════════════════════════════════════ */
.bd-landing .bd-cta__title {
    color: #fff;
    margin-inline: auto;
}

.bd-landing .bd-award__title {
    color: #fff;
}

/* ── CTA weight ────────────────────────────────────────────────────────────
   The scrim was mixed for a backdrop that stays out of the way, but at .94
   over an already dark photograph it buried the image entirely — the block
   read as flat navy with a faint ghost of text in it. Eased back so the
   photograph is present without competing, and the corner geometry pulled in
   so four saturated shapes stop dominating the frame. */
.bd-cta__scrim {
    background:
        radial-gradient(78% 60% at 20% 6%, rgba(41, 182, 246, .18), transparent 64%),
        linear-gradient(165deg,
            rgba(11, 46, 72, .84) 0%,
            rgba(9, 37, 59, .80) 50%,
            rgba(7, 28, 45, .88) 100%);
}

.bd-cta__unit { opacity: .82; }

.bd-cta__unit--1 { width: min(150px, 14vw); }
.bd-cta__unit--2 { width: min(104px, 10vw); }
.bd-cta__unit--3 { width: min(118px, 11vw); }
.bd-cta__unit--4 { width: min(88px, 8.5vw); }