/*
 * Bali Digital Agency — design system.
 *
 * Aesthetic: "the measured studio". An agency that sells restraint cannot
 * shout in its own typography, so the page is built like a well-set annual
 * report: warm bone paper, near-black ink with a green cast, one clay
 * accent, and hairline rules doing the work that boxes and shadows usually
 * do. Section numerals (01 — 09) and an asymmetric heading rail carry the
 * rhythm; nothing is centred except where centring is the point.
 *
 * Hand-authored, no build step. Layer order below is load-bearing:
 * tokens → reset → typography → primitives → layout → sections → responsive.
 */

/* ========================================================================
   1. TOKENS
   ===================================================================== */

:root {
    /* Grounds — warm bone, never pure white */
    --paper: #f7f4ef;
    --paper-2: #f0ebe3;
    --paper-3: #e7e0d5;
    --card: #fffdf9;

    /* Ink — near-black with a green cast, used for dark bands */
    --ink: #121715;
    --ink-2: #1b211e;
    --ink-3: #2a322e;

    /* Text */
    --text: #1c2220;
    --text-soft: #4a524e;
    /* Dark enough to clear 4.5:1 on the deeper paper band too, since the
       numerals and captions that use it are set small. */
    --muted: #5e6661;

    /* Accent — burnt clay. One accent, used sparingly. */
    --clay: #a24e33;
    --clay-h: #b85b3d;
    --clay-d: #833d27;
    --clay-light: #d9825f;
    --clay-soft: #e8d6ce;
    --clay-wash: rgba(162, 78, 51, 0.07);

    /* On-ink equivalents */
    --bone: #efeae1;
    --bone-soft: rgba(239, 234, 225, 0.72);
    --bone-muted: rgba(239, 234, 225, 0.55);

    /* Rules — the primary decorative device */
    --line: rgba(28, 34, 32, 0.12);
    --line-soft: rgba(28, 34, 32, 0.07);
    --line-strong: rgba(28, 34, 32, 0.22);
    --line-ink: rgba(239, 234, 225, 0.14);
    --line-ink-strong: rgba(239, 234, 225, 0.26);

    /* Type */
    --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
    --font-sans: "Plus Jakarta Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;

    /* Space */
    --container: 1240px;
    --gutter: 1.5rem;
    --band-y: clamp(4.5rem, 9vw, 8rem);

    /* Motion */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur: 0.45s;

    /* Elevation — barely there, by design */
    --shadow-sm: 0 1px 2px rgba(28, 34, 32, 0.04);
    --shadow: 0 12px 40px -18px rgba(28, 34, 32, 0.28);
    --shadow-lg: 0 28px 70px -30px rgba(28, 34, 32, 0.4);

    color-scheme: light;
}

/* ========================================================================
   2. RESET
   ===================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    background: var(--paper);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.75;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

ul,
ol {
    list-style: none;
    padding: 0;
}

table {
    border-collapse: collapse;
    width: 100%;
}

:target {
    scroll-margin-top: 7rem;
}

/* Focus — one visible treatment, everywhere, never removed */
:focus-visible {
    outline: 2px solid var(--clay);
    outline-offset: 3px;
    border-radius: 2px;
}

.bda-band--ink :focus-visible,
.bda-footer :focus-visible,
.bda-drawer__panel :focus-visible {
    outline-color: var(--clay-light);
}

::selection {
    background: var(--clay);
    color: var(--paper);
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 999;
    background: var(--ink);
    color: var(--bone);
    padding: 0.85rem 1.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.skip-link:focus {
    top: 1rem;
}

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

/* ========================================================================
   3. TYPOGRAPHY
   ===================================================================== */

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--text);
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.bda-h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.03;
    letter-spacing: -0.025em;
}

.bda-h2 {
    font-size: clamp(1.85rem, 3.6vw, 3rem);
    line-height: 1.1;
}

.bda-h3 {
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.bda-h4 {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.005em;
}

/* The clay phrase inside a heading. <em> is the accent, not an italic. */
h1 em,
h2 em,
h3 em {
    font-style: italic;
    color: var(--clay);
}

.bda-band--ink h1 em,
.bda-band--ink h2 em,
.bda-band--ink h3 em {
    color: var(--clay-light);
}

.bda-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--clay);
    line-height: 1.4;
}

.bda-band--ink .bda-eyebrow {
    color: var(--clay-light);
}

/* Eyebrow with a leading rule — the signature mark */
.bda-eyebrow--rule::before {
    content: "";
    width: clamp(1.5rem, 4vw, 3rem);
    height: 1px;
    background: currentColor;
    flex: none;
    opacity: 0.7;
}

.bda-lede {
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.75;
    color: var(--text-soft);
    text-wrap: pretty;
}

.bda-intro {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--text-soft);
    text-wrap: pretty;
}

.bda-band--ink .bda-lede,
.bda-band--ink .bda-intro {
    color: var(--bone-soft);
}

.bda-body p + p {
    margin-top: 1.15em;
}

.bda-body {
    color: var(--text-soft);
    text-wrap: pretty;
}

.bda-band--ink .bda-body {
    color: var(--bone-soft);
}

/* Section numeral — tabular so 01 and 11 align on the rail */
.bda-numeral {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.bda-band--ink .bda-numeral {
    color: var(--bone-muted);
}

/* ========================================================================
   4. PRIMITIVES
   ===================================================================== */

.bda-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right));
}

.bda-container--narrow {
    max-width: 880px;
}

.bda-band {
    padding-block: var(--band-y);
    position: relative;
}

.bda-band--paper {
    background: var(--paper);
}

.bda-band--paper-2 {
    background: var(--paper-2);
}

.bda-band--ink {
    background: var(--ink);
    color: var(--bone);
}

.bda-band--ink h1,
.bda-band--ink h2,
.bda-band--ink h3,
.bda-band--ink h4 {
    color: var(--bone);
}

/* Hairline between consecutive same-tone bands, so the rhythm never blurs */
.bda-band--paper + .bda-band--paper,
.bda-band--paper-2 + .bda-band--paper-2 {
    border-top: 1px solid var(--line-soft);
}

/* --- Buttons ------------------------------------------------------- */

.bda-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem 2rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    text-align: center;
    border: 1px solid transparent;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
        border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.bda-btn i {
    font-size: 1.05em;
    line-height: 1;
}

.bda-btn--clay {
    background: var(--clay);
    color: #fff;
    box-shadow: 0 10px 26px -14px rgba(162, 78, 51, 0.9);
}

.bda-btn--clay:hover {
    background: var(--clay-h);
    transform: translateY(-2px);
    box-shadow: 0 18px 38px -16px rgba(162, 78, 51, 0.95);
}

.bda-btn--ink {
    background: var(--ink);
    color: var(--bone);
}

.bda-btn--ink:hover {
    background: var(--ink-3);
    transform: translateY(-2px);
}

.bda-btn--outline {
    border-color: var(--line-strong);
    color: var(--text);
}

.bda-btn--outline:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--bone);
    transform: translateY(-2px);
}

.bda-band--ink .bda-btn--outline,
.bda-footer .bda-btn--outline,
.bda-drawer__panel .bda-btn--outline {
    border-color: var(--line-ink-strong);
    color: var(--bone);
}

.bda-band--ink .bda-btn--outline:hover,
.bda-footer .bda-btn--outline:hover,
.bda-drawer__panel .bda-btn--outline:hover {
    background: var(--bone);
    color: var(--ink);
    border-color: var(--bone);
}

.bda-btn--sm {
    padding: 0.7rem 1.4rem;
    font-size: 0.78rem;
}

.bda-btn--lg {
    padding: 1.15rem 2.4rem;
    font-size: 0.9rem;
}

/* Text link with a rule that draws in on hover */
.bda-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clay);
    padding-block: 0.25rem;
    border-bottom: 1px solid var(--clay-soft);
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
        gap var(--dur) var(--ease);
}

.bda-link:hover {
    color: var(--clay-d);
    border-color: var(--clay);
    gap: 0.8rem;
}

.bda-band--ink .bda-link {
    color: var(--clay-light);
    border-color: rgba(217, 130, 95, 0.35);
}

.bda-band--ink .bda-link:hover {
    color: var(--bone);
    border-color: var(--bone);
}

/* --- Heading block: asymmetric rail + heading + intro --------------- */

.bda-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.bda-band--ink .bda-head {
    border-top-color: var(--line-ink);
}

.bda-head__label {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.bda-head__title {
    max-width: 22ch;
}

.bda-head__intro {
    max-width: 62ch;
}

.bda-head--center {
    justify-items: center;
    text-align: center;
}

.bda-head--center .bda-head__title,
.bda-head--center .bda-head__intro {
    max-width: 58ch;
}

/* --- Cards ---------------------------------------------------------- */

.bda-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: clamp(1.6rem, 2.4vw, 2.1rem);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 3px;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.bda-card:hover {
    border-color: var(--line-strong);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.bda-band--ink .bda-card {
    background: var(--ink-2);
    border-color: var(--line-ink);
}

.bda-band--ink .bda-card:hover {
    border-color: var(--line-ink-strong);
    box-shadow: none;
}

.bda-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    background: var(--clay-wash);
    color: var(--clay);
    font-size: 1.15rem;
    flex: none;
}

.bda-band--ink .bda-card__icon {
    background: rgba(217, 130, 95, 0.14);
    color: var(--clay-light);
}

.bda-card__text {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-soft);
    text-wrap: pretty;
}

.bda-band--ink .bda-card__text {
    color: var(--bone-soft);
}

.bda-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.bda-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

/* --- Ledger rows: cards as ruled lines, the house alternative to boxes */

.bda-ledger {
    border-top: 1px solid var(--line);
}

.bda-band--ink .bda-ledger {
    border-top-color: var(--line-ink);
}

.bda-ledger__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem 2.5rem;
    padding-block: clamp(1.5rem, 2.6vw, 2.2rem);
    border-bottom: 1px solid var(--line);
    transition: background-color var(--dur) var(--ease);
}

.bda-band--ink .bda-ledger__row {
    border-bottom-color: var(--line-ink);
}

a.bda-ledger__row:hover {
    background: var(--clay-wash);
}

.bda-ledger__num {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    font-variant-numeric: tabular-nums;
    color: var(--clay);
    padding-top: 0.45rem;
}

.bda-band--ink .bda-ledger__num {
    color: var(--clay-light);
}

.bda-ledger__body {
    font-size: 0.97rem;
    line-height: 1.8;
    color: var(--text-soft);
    text-wrap: pretty;
}

.bda-band--ink .bda-ledger__body {
    color: var(--bone-soft);
}

/* --- Bullet list: clay dash, never a disc ---------------------------- */

.bda-list {
    display: grid;
    gap: 0.85rem;
}

.bda-list li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 0.97rem;
    line-height: 1.8;
    color: var(--text-soft);
    text-wrap: pretty;
}

.bda-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 0.7rem;
    height: 1px;
    background: var(--clay);
}

.bda-band--ink .bda-list li {
    color: var(--bone-soft);
}

.bda-band--ink .bda-list li::before {
    background: var(--clay-light);
}

/* --- Data table ------------------------------------------------------ */

.bda-table-wrap {
    overflow-x: auto;
    border-top: 1px solid var(--line-strong);
    -webkit-overflow-scrolling: touch;
}

.bda-band--ink .bda-table-wrap {
    border-top-color: var(--line-ink-strong);
}

.bda-table {
    min-width: 560px;
    font-size: 0.93rem;
}

.bda-table th,
.bda-table td {
    text-align: left;
    padding: 1.1rem 1.5rem 1.1rem 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    line-height: 1.7;
}

.bda-band--ink .bda-table th,
.bda-band--ink .bda-table td {
    border-bottom-color: var(--line-ink);
}

.bda-table th {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    padding-block: 1rem;
    white-space: nowrap;
}

.bda-band--ink .bda-table th {
    color: var(--bone-muted);
}

.bda-table td:first-child {
    color: var(--text);
    font-weight: 600;
}

.bda-band--ink .bda-table td:first-child {
    color: var(--bone);
}

.bda-table td {
    color: var(--text-soft);
}

.bda-band--ink .bda-table td {
    color: var(--bone-soft);
}

/* --- Reveal-on-scroll ------------------------------------------------ */

.bda-reveal {
    opacity: 0;
    transform: translateY(18px);
}

.bda-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
}

/* ========================================================================
   5. HEADER / NAV
   ===================================================================== */

.bda-utility {
    background: var(--ink);
    color: var(--bone-soft);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--line-ink);
}

.bda-utility__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: 0.6rem max(var(--gutter), env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.bda-utility__group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.bda-utility__group span,
.bda-utility__group a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.bda-utility a {
    transition: color var(--dur) var(--ease);
}

.bda-utility a:hover {
    color: var(--clay-light);
}

#bda-header {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(247, 244, 239, 0.9);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line-soft);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

#bda-header.is-stuck {
    border-bottom-color: var(--line);
    box-shadow: 0 10px 30px -22px rgba(28, 34, 32, 0.5);
}

.bda-header__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: 0.9rem max(var(--gutter), env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

/* Wordmark: a clay rule, then the name in the display face */
.bda-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-display);
    line-height: 1;
    white-space: nowrap;
}

.bda-wordmark__mark {
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid var(--clay);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--clay);
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex: none;
}

.bda-wordmark__text {
    font-size: 1.28rem;
    letter-spacing: -0.015em;
    color: var(--text);
}

.bda-wordmark__text em {
    font-style: italic;
    color: var(--clay);
}

.bda-wordmark--lg .bda-wordmark__text {
    font-size: 1.55rem;
}

.bda-wordmark--light .bda-wordmark__text {
    color: var(--bone);
}

.bda-wordmark--light .bda-wordmark__mark {
    border-color: var(--clay-light);
    color: var(--clay-light);
}

.bda-wordmark--light .bda-wordmark__text em {
    color: var(--clay-light);
}

.bda-logo-img {
    height: 42px;
    width: auto;
}

/* Desktop nav */
.bda-nav-primary {
    display: none;
}

.bda-nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.bda-nav li {
    position: relative;
}

.bda-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-soft);
    border-radius: 2px;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.bda-nav a:hover,
.bda-nav .current-menu-item > a,
.bda-nav .current_page_item > a {
    color: var(--clay);
    background: var(--clay-wash);
}

/* Dropdowns — desktop bar only. The drawer reuses this same markup, and
   there the submenus must stay in flow. */
.bda-nav-primary .menu-item-has-children > a::after,
.bda-nav-primary .bda-has-children > a::after {
    content: "\ea5f";
    font-family: "tabler-icons";
    font-size: 0.85em;
    opacity: 0.6;
}

.bda-nav-primary .sub-menu,
.bda-nav-primary .bda-submenu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 270px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 3px;
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
    display: grid;
    gap: 1px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
    z-index: 5;
}

.bda-nav-primary li:hover > .sub-menu,
.bda-nav-primary li:hover > .bda-submenu,
.bda-nav-primary li:focus-within > .sub-menu,
.bda-nav-primary li:focus-within > .bda-submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.bda-nav-primary .sub-menu a,
.bda-nav-primary .bda-submenu a {
    display: block;
    padding: 0.6rem 0.85rem;
    font-size: 0.83rem;
    line-height: 1.5;
    white-space: normal;
}

.bda-header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bda-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 1.15rem;
    color: var(--text);
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.bda-burger:hover {
    border-color: var(--ink);
    color: var(--clay);
}

/* --- Drawer ---------------------------------------------------------- */

#bda-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    visibility: hidden;
    pointer-events: none;
}

#bda-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

.bda-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 23, 21, 0.55);
    opacity: 0;
    transition: opacity 0.35s var(--ease);
}

#bda-drawer.is-open .bda-drawer__backdrop {
    opacity: 1;
}

.bda-drawer__panel {
    position: absolute;
    inset-block: 0;
    right: 0;
    width: min(420px, 92vw);
    background: var(--ink);
    color: var(--bone);
    display: flex;
    flex-direction: column;
    padding: 1.25rem max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
}

#bda-drawer.is-open .bda-drawer__panel {
    transform: none;
}

.bda-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--line-ink);
}

.bda-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--line-ink-strong);
    border-radius: 999px;
    color: var(--bone);
    font-size: 1.15rem;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.bda-drawer__close:hover {
    background: var(--bone);
    color: var(--ink);
}

.bda-mnav {
    flex: 1;
    padding-block: 1.25rem;
}

.bda-mnav ul {
    display: grid;
}

.bda-mnav .sub-menu,
.bda-mnav .bda-submenu {
    display: grid;
    padding-left: 1rem;
    margin-bottom: 0.5rem;
    border-left: 1px solid var(--line-ink);
}

.bda-mnav a {
    display: block;
    padding: 0.8rem 0;
    font-size: 0.95rem;
    color: var(--bone-soft);
    border-bottom: 1px solid var(--line-ink);
    transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}

.bda-mnav a:hover {
    color: var(--clay-light);
    padding-left: 0.5rem;
}

.bda-mnav .sub-menu a,
.bda-mnav .bda-submenu a {
    font-size: 0.87rem;
    color: var(--bone-muted);
}

/* Top-level items in the drawer are section labels, not links to hover. */
.bda-mnav > ul > li > a {
    font-weight: 600;
    color: var(--bone);
}

.bda-drawer__foot {
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-ink);
    display: grid;
    gap: 0.75rem;
}

/* ========================================================================
   6. HERO
   ===================================================================== */

.bda-hero {
    position: relative;
    background: var(--paper);
    padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3.5rem, 7vw, 6rem);
    overflow: hidden;
}

/* Faint ruled grid — paper texture without an image */
.bda-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--line-soft) 1px, transparent 1px);
    background-size: 100% 2.5rem;
    opacity: 0.55;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, #000, transparent 75%);
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%);
}

.bda-hero__inner {
    position: relative;
    display: grid;
    gap: clamp(2.5rem, 5vw, 4.5rem);
}

.bda-hero__main {
    max-width: 64ch;
}

.bda-hero__title {
    margin-top: 1.5rem;
}

.bda-hero__lede {
    margin-top: 1.6rem;
    max-width: 58ch;
}

.bda-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2.25rem;
}

/* Facts strip: hairline-divided, tabular figures */
.bda-hero__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 1px;
    background: var(--line);
    border-block: 1px solid var(--line);
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.bda-fact {
    background: var(--paper);
    padding: 1.35rem 1.25rem 1.35rem 0;
    display: grid;
    gap: 0.3rem;
}

.bda-fact:not(:first-child) {
    padding-left: 1.25rem;
}

.bda-fact__value {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.bda-fact__label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.5;
}

.bda-band--ink .bda-fact,
.bda-hero--ink .bda-fact {
    background: var(--ink);
}

/* The figure and its caption set their own colour, so inheriting from the
   dark band is not enough — without this they stay near-black on near-black. */
.bda-band--ink .bda-fact__value,
.bda-hero--ink .bda-fact__value,
.bda-hero--image .bda-fact__value {
    color: var(--bone);
}

.bda-band--ink .bda-fact__label,
.bda-hero--ink .bda-fact__label,
.bda-hero--image .bda-fact__label {
    color: var(--bone-soft);
}

/* --- Hero carrying a photograph -------------------------------------- */

/* The section also takes .bda-band--ink, so every child already has its
   dark treatment. Only the picture, the scrim and the breadcrumb are new. */
.bda-hero--image {
    --hero-scrim: 0.82;
    display: flex;
    align-items: center;
    min-height: min(78vh, 46rem);
}

/* The ruled paper texture is wrong over a photograph */
.bda-hero--image::before {
    display: none;
}

.bda-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Darkest where the copy sits, so the headline clears AA whatever the
   photograph underneath happens to be. */
.bda-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: var(--hero-scrim);
    /* Horizontal, not angled: the darkening then depends only on how far
       across the copy runs, which is the thing that has to stay readable.
       Held high to 64% — the width of the lede — before it falls away. */
    background:
        linear-gradient(to right,
            var(--ink) 0%,
            rgba(18, 23, 21, 0.92) 46%,
            rgba(18, 23, 21, 0.86) 64%,
            rgba(18, 23, 21, 0.5) 100%),
        linear-gradient(to top, rgba(18, 23, 21, 0.55), transparent 70%);
}

/* Translucent body text is fragile over a photograph: bone-soft composites
   against whatever is underneath and loses contrast exactly where the
   picture is brightest. On the image hero the copy is opaque. */
.bda-hero--image .bda-hero__lede,
.bda-hero--image .bda-breadcrumb ol {
    color: var(--bone);
}

.bda-hero--image .bda-hero__inner {
    position: relative;
    z-index: 2;
}

/* The breadcrumb is the one element the ink band does not already cover */
.bda-hero--image .bda-breadcrumb ol {
    color: var(--bone-muted);
}

.bda-hero--image .bda-breadcrumb [aria-current="page"] {
    color: var(--bone-soft);
}

.bda-hero--image .bda-breadcrumb a:hover {
    color: var(--clay-light);
}

/* Facts read as glass over the photograph, not as a solid black bar */
.bda-hero--image .bda-hero__facts {
    background: var(--line-ink);
    border-block-color: var(--line-ink);
}

.bda-hero--image .bda-fact {
    background: rgba(18, 23, 21, 0.72);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    padding-inline: 1.25rem;
}

@media (prefers-reduced-motion: no-preference) {
    .bda-hero--image .bda-hero__bg {
        animation: bda-hero-settle 1.2s var(--ease) both;
    }
}

@keyframes bda-hero-settle {
    from { transform: scale(1.04); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* Breadcrumb */
.bda-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.bda-breadcrumb a {
    transition: color var(--dur) var(--ease);
}

.bda-breadcrumb a:hover {
    color: var(--clay);
}

.bda-breadcrumb [aria-current="page"] {
    color: var(--text-soft);
}

/* ========================================================================
   7. SECTIONS
   ===================================================================== */

/* --- Answer block: the AEO quotable ---------------------------------- */

.bda-answer {
    display: grid;
    gap: 2rem;
    padding: clamp(2rem, 4vw, 3rem);
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--clay);
    border-radius: 3px;
}

.bda-band--ink .bda-answer {
    background: var(--ink-2);
    border-color: var(--line-ink);
    border-left-color: var(--clay-light);
}

.bda-answer__text {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.3vw, 1.85rem);
    line-height: 1.45;
    color: var(--text);
    text-wrap: pretty;
}

.bda-band--ink .bda-answer__text {
    color: var(--bone);
}

.bda-answer__points {
    display: grid;
    gap: 0.85rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
}

.bda-band--ink .bda-answer__points {
    border-top-color: var(--line-ink);
}

/* --- Narrative: prose with an asymmetric rail ------------------------ */

.bda-narrative {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
}

.bda-narrative__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
}

.bda-band--ink .bda-narrative__item {
    border-top-color: var(--line-ink);
}

.bda-narrative__rail {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
}

.bda-narrative__title {
    max-width: 24ch;
}

.bda-narrative__body {
    font-size: 1.0125rem;
    line-height: 1.85;
}

.bda-narrative__body .bda-list {
    margin-top: 1.35rem;
}

/* --- Steps ----------------------------------------------------------- */

.bda-steps {
    display: grid;
    gap: 0;
    counter-reset: bda-step;
}

.bda-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem 2.5rem;
    padding-block: clamp(1.6rem, 3vw, 2.4rem);
    border-top: 1px solid var(--line);
}

.bda-step:last-child {
    border-bottom: 1px solid var(--line);
}

.bda-band--ink .bda-step {
    border-top-color: var(--line-ink);
}

.bda-band--ink .bda-step:last-child {
    border-bottom-color: var(--line-ink);
}

.bda-step__meta {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.bda-step__num {
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--clay);
    font-variant-numeric: tabular-nums;
}

.bda-band--ink .bda-step__num {
    color: var(--clay-light);
}

.bda-step__window {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.bda-band--ink .bda-step__window {
    color: var(--bone-muted);
}

.bda-step__body {
    font-size: 0.99rem;
    line-height: 1.8;
    color: var(--text-soft);
    text-wrap: pretty;
}

.bda-band--ink .bda-step__body {
    color: var(--bone-soft);
}

/* --- Split ----------------------------------------------------------- */

.bda-split {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
}

.bda-split__panel {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--paper-2);
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.bda-split__panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Imageless panel: a ruled field with a clay seal, never a grey box */
.bda-split__panel--blank {
    display: grid;
    place-items: center;
    background-image: linear-gradient(var(--line-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: 2.25rem 2.25rem;
}

.bda-split__seal {
    width: 5.5rem;
    height: 5.5rem;
    border: 1px solid var(--clay);
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: var(--clay);
    font-size: 1.8rem;
    background: var(--paper);
}

/* --- Tiers / packages ------------------------------------------------ */

.bda-tier {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem 2.5rem;
    align-items: start;
    padding-block: clamp(1.75rem, 3vw, 2.5rem);
    border-top: 1px solid var(--line);
}

.bda-tiers > .bda-tier:last-child {
    border-bottom: 1px solid var(--line);
}

.bda-band--ink .bda-tier {
    border-top-color: var(--line-ink);
}

.bda-band--ink .bda-tiers > .bda-tier:last-child {
    border-bottom-color: var(--line-ink);
}

.bda-tier__name {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bda-tier__code {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clay);
}

.bda-tier__badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--clay-soft);
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clay);
    background: var(--clay-wash);
}

.bda-tier__price {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.4vw, 1.95rem);
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bda-band--ink .bda-tier__price {
    color: var(--bone);
}

.bda-tier__price span {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 0.45rem;
    white-space: normal;
}

.bda-band--ink .bda-tier__price span {
    color: var(--bone-muted);
}

.bda-note {
    margin-top: 1.75rem;
    font-size: 0.85rem;
    line-height: 1.75;
    color: var(--muted);
    max-width: 70ch;
    text-wrap: pretty;
}

.bda-band--ink .bda-note {
    color: var(--bone-muted);
}

/* --- FAQ ------------------------------------------------------------- */

.bda-faq {
    border-top: 1px solid var(--line);
}

.bda-band--ink .bda-faq {
    border-top-color: var(--line-ink);
}

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

.bda-band--ink .bda-faq-item {
    border-bottom-color: var(--line-ink);
}

.bda-faq-item__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.35rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--text);
    transition: color var(--dur) var(--ease);
}

.bda-faq-item__q::-webkit-details-marker {
    display: none;
}

.bda-faq-item__q:hover {
    color: var(--clay);
}

.bda-band--ink .bda-faq-item__q {
    color: var(--bone);
}

.bda-band--ink .bda-faq-item__q:hover {
    color: var(--clay-light);
}

.bda-faq-item__q i {
    flex: none;
    margin-top: 0.2rem;
    font-size: 1.05rem;
    color: var(--clay);
    transition: transform 0.35s var(--ease);
}

.bda-band--ink .bda-faq-item__q i {
    color: var(--clay-light);
}

.bda-faq-item[open] .bda-faq-item__q i {
    transform: rotate(45deg);
}

.bda-faq-item__a {
    padding-bottom: 1.5rem;
    padding-right: 2.5rem;
    max-width: 78ch;
    font-size: 0.97rem;
    line-height: 1.85;
    color: var(--text-soft);
    text-wrap: pretty;
}

.bda-band--ink .bda-faq-item__a {
    color: var(--bone-soft);
}

/* --- Categorised FAQ hub --------------------------------------------- */

.bda-faqg {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

.bda-faqg__nav {
    display: grid;
    gap: 1px;
    background: var(--line);
    border-block: 1px solid var(--line);
}

.bda-faqg__nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    background: var(--paper);
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-soft);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.bda-faqg__nav a:hover,
.bda-faqg__nav a.is-active {
    background: var(--card);
    color: var(--clay);
}

.bda-faqg__nav a.is-active {
    box-shadow: inset 2px 0 0 var(--clay);
}

.bda-faqg__nav i {
    font-size: 1.05rem;
    color: var(--clay);
    flex: none;
}

.bda-faqg__nav span:first-of-type {
    flex: 1;
    min-width: 0;
}

.bda-faqg__nav-count {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    flex: none;
}

.bda-faqg__group + .bda-faqg__group {
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.bda-faqg__group-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1.25rem;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2vw, 1.65rem);
    line-height: 1.25;
    color: var(--text);
}

.bda-faqg__group-title i {
    color: var(--clay);
    font-size: 1.15rem;
}

/* --- Directory / related --------------------------------------------- */

.bda-dir-card {
    display: grid;
    gap: 0.7rem;
    align-content: start;
    padding: clamp(1.5rem, 2.4vw, 1.9rem);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 3px;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.bda-dir-card:hover {
    border-color: var(--clay);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.bda-dir-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--clay);
    font-size: 1.2rem;
}

.bda-dir-card__top .bda-dir-card__go {
    font-size: 0.95rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.bda-dir-card:hover .bda-dir-card__go {
    opacity: 1;
    transform: none;
}

.bda-band--ink .bda-dir-card {
    background: var(--ink-2);
    border-color: var(--line-ink);
}

.bda-band--ink .bda-dir-card__top {
    color: var(--clay-light);
}

/* --- Stats ------------------------------------------------------------ */

.bda-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 1px;
    background: var(--line);
    border-block: 1px solid var(--line);
}

.bda-band--ink .bda-stats {
    background: var(--line-ink);
    border-block-color: var(--line-ink);
}

.bda-stat {
    background: var(--paper);
    padding: clamp(1.75rem, 3vw, 2.5rem) 1.5rem;
    display: grid;
    gap: 0.5rem;
    align-content: start;
}

.bda-band--paper-2 .bda-stat {
    background: var(--paper-2);
}

.bda-band--ink .bda-stat {
    background: var(--ink);
}

.bda-stat__value {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4vw, 3.1rem);
    line-height: 1;
    color: var(--clay);
    font-variant-numeric: tabular-nums;
}

.bda-band--ink .bda-stat__value {
    color: var(--clay-light);
}

.bda-stat__value sup {
    font-size: 0.42em;
    vertical-align: super;
    letter-spacing: 0.04em;
}

.bda-stat__label {
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--text-soft);
    text-wrap: pretty;
}

.bda-band--ink .bda-stat__label {
    color: var(--bone-soft);
}

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

.bda-cta {
    position: relative;
    /* Carries .bda-band--ink for the descendant styling context, but sets
       its own vertical rhythm rather than inheriting the band default. */
    background: var(--ink);
    color: var(--bone);
    padding-block: clamp(4rem, 8vw, 7rem);
    overflow: hidden;
}

.bda-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, var(--line-ink) 1px, transparent 1px);
    background-size: 3.5rem 100%;
    opacity: 0.6;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 72%);
}

.bda-cta__inner {
    position: relative;
    display: grid;
    gap: 2rem;
    justify-items: center;
    text-align: center;
}

.bda-cta__heading {
    color: var(--bone);
    max-width: 20ch;
}

.bda-cta__body {
    max-width: 58ch;
    color: var(--bone-soft);
    font-size: 1.05rem;
    line-height: 1.8;
    text-wrap: pretty;
}

.bda-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
}

/* --- Contact ---------------------------------------------------------- */

.bda-contact {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
}

.bda-contact__method {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.35rem 1.25rem;
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--line);
}

.bda-contact__method:first-child {
    border-top: 1px solid var(--line);
}

.bda-contact__method i {
    grid-row: span 3;
    font-size: 1.3rem;
    color: var(--clay);
    padding-top: 0.15rem;
}

.bda-contact__panel {
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 3px;
    display: grid;
    gap: 1.5rem;
    align-content: start;
}

.bda-hours {
    display: grid;
    gap: 0.6rem;
}

.bda-hours__row {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    font-size: 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--line-soft);
}

.bda-hours__row span:last-child {
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* --- Support ---------------------------------------------------------- */

.bda-support__item {
    display: grid;
    gap: 0.6rem;
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--line);
}

.bda-support__item:first-child {
    border-top: 1px solid var(--line);
}

.bda-band--ink .bda-support__item {
    border-bottom-color: var(--line-ink);
}

.bda-band--ink .bda-support__item:first-child {
    border-top-color: var(--line-ink);
}

.bda-support__title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.bda-support__title i {
    color: var(--clay);
    font-size: 1.1rem;
}

.bda-band--ink .bda-support__title i {
    color: var(--clay-light);
}

/* ========================================================================
   8. PROSE (editor content) & BLOG
   ===================================================================== */

.bda-prose {
    max-width: 74ch;
    font-size: 1.0125rem;
    line-height: 1.85;
    color: var(--text-soft);
}

.bda-prose > * + * {
    margin-top: 1.3em;
}

.bda-prose h2,
.bda-prose h3 {
    color: var(--text);
    margin-top: 2.2em;
    scroll-margin-top: 7rem;
}

.bda-prose h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.bda-prose h3 {
    font-size: clamp(1.15rem, 1.7vw, 1.4rem);
}

.bda-prose a {
    color: var(--clay);
    border-bottom: 1px solid var(--clay-soft);
    transition: border-color var(--dur) var(--ease);
}

.bda-prose a:hover {
    border-color: var(--clay);
}

.bda-prose ul,
.bda-prose ol {
    display: grid;
    gap: 0.7rem;
    padding-left: 1.4rem;
}

.bda-prose ul {
    list-style: none;
    padding-left: 0;
}

.bda-prose ul li {
    position: relative;
    padding-left: 1.6rem;
}

.bda-prose ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 0.7rem;
    height: 1px;
    background: var(--clay);
}

.bda-prose ol {
    list-style: decimal;
}

.bda-prose blockquote {
    padding-left: 1.5rem;
    border-left: 2px solid var(--clay);
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--text);
}

.bda-prose img {
    border-radius: 3px;
    border: 1px solid var(--line);
}

.bda-prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em;
    background: var(--paper-2);
    padding: 0.15em 0.4em;
    border-radius: 2px;
}

.bda-page-header {
    padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
}

.bda-page-header__inner {
    display: grid;
    gap: 1.25rem;
}

/* Blog */
.bda-post-card {
    display: grid;
    gap: 1rem;
    align-content: start;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.bda-post-card__thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 3px;
    background: var(--paper-2);
    border: 1px solid var(--line);
}

.bda-post-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

.bda-post-card:hover .bda-post-card__thumb img {
    transform: scale(1.04);
}

.bda-post-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.bda-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 3rem;
}

.bda-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding-inline: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
        color var(--dur) var(--ease);
}

.bda-pagination .page-numbers:hover,
.bda-pagination .page-numbers.current {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bone);
}

/* Search form */
.bda-searchform {
    display: flex;
    gap: 0.5rem;
    max-width: 460px;
}

.bda-searchform input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 1.1rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.92rem;
}

.bda-searchform input[type="search"]:focus-visible {
    border-color: var(--clay);
}

/* ========================================================================
   9. FOOTER & FLOATING
   ===================================================================== */

.bda-footer {
    background: var(--ink);
    color: var(--bone-soft);
    padding-top: clamp(3.5rem, 7vw, 5.5rem);
    font-size: 0.9rem;
}

.bda-footer h2 {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bone-muted);
    margin-bottom: 1.35rem;
}

.bda-footer__grid {
    display: grid;
    gap: 2.5rem;
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.bda-footer__brand p {
    margin-top: 1.25rem;
    max-width: 46ch;
    line-height: 1.8;
    color: var(--bone-soft);
    text-wrap: pretty;
}

.bda-footer__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--line-ink-strong);
    border-radius: 999px;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    color: var(--bone);
}

.bda-footer__badge i {
    color: var(--clay-light);
}

.bda-footer__links {
    display: grid;
    gap: 0.7rem;
}

.bda-footer__links a {
    color: var(--bone-soft);
    line-height: 1.6;
    transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}

.bda-footer__links a:hover {
    color: var(--clay-light);
    padding-left: 0.35rem;
}

.bda-footer__contact {
    display: grid;
    gap: 1.25rem;
}

.bda-footer__contact-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
}

.bda-footer__contact-item i {
    color: var(--clay-light);
    font-size: 1.15rem;
    padding-top: 0.1rem;
}

.bda-footer__contact-item strong {
    display: block;
    color: var(--bone);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.bda-footer__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding-block: 1.75rem;
    border-top: 1px solid var(--line-ink);
    font-size: 0.8rem;
}

.bda-footer__group > span {
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.68rem;
    color: var(--bone-muted);
}

.bda-footer__group a {
    color: var(--bone-soft);
    transition: color var(--dur) var(--ease);
}

.bda-footer__group a:hover {
    color: var(--clay-light);
}

.bda-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.75rem max(1.75rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line-ink);
    font-size: 0.8rem;
    color: var(--bone-muted);
}

.bda-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.bda-footer__legal a {
    transition: color var(--dur) var(--ease);
}

.bda-footer__legal a:hover {
    color: var(--clay-light);
}

/* Floating WhatsApp + back to top */
.bda-fab {
    position: fixed;
    right: max(1.25rem, env(safe-area-inset-right));
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    z-index: 80;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 14px 34px -14px rgba(37, 211, 102, 0.9);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.bda-fab:hover {
    transform: translateY(-3px) scale(1.04);
}

#bda-top {
    position: fixed;
    right: max(1.25rem, env(safe-area-inset-right));
    bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 4.1rem);
    z-index: 80;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bone);
    font-size: 1.1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}

#bda-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* ========================================================================
   10. RESPONSIVE — mobile-first upgrades
   ===================================================================== */

@media (min-width: 720px) {
    body {
        font-size: 1.0625rem;
    }

    .bda-head {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: start;
    }

    /* The intro column is set smaller than the heading, so nudge its first
       line down to sit on roughly the heading's second baseline. */
    .bda-head__intro {
        padding-top: 0.5rem;
    }

    .bda-head__label {
        grid-column: 1 / -1;
    }

    .bda-head--center {
        grid-template-columns: minmax(0, 1fr);
    }

    .bda-narrative__item,
    .bda-step,
    .bda-tier,
    .bda-ledger__row {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    }

    .bda-narrative__rail,
    .bda-step__meta {
        position: sticky;
        top: 7rem;
    }

    .bda-tier {
        grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto;
        align-items: center;
    }

    .bda-split {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    }

    .bda-split--flip .bda-split__panel {
        order: -1;
    }

    .bda-contact {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    }

    .bda-footer__grid {
        grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
        gap: 3rem 2rem;
    }

    .bda-hero__facts .bda-fact:first-child {
        padding-left: 0;
    }
}

@media (min-width: 1024px) {
    .bda-nav-primary {
        display: block;
    }

    .bda-burger {
        display: none;
    }

    .bda-faqg {
        grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    }

    .bda-faqg__nav {
        position: sticky;
        top: 7rem;
    }

    .bda-narrative__item {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
}

@media (max-width: 719px) {
    .bda-hero__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bda-fact,
    .bda-fact:not(:first-child) {
        padding-inline: 1rem 1rem;
    }

    .bda-faq-item__a {
        padding-right: 0;
    }
}

/* ========================================================================
   11. REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .bda-reveal {
        opacity: 1;
        transform: none;
    }

    .bda-narrative__rail,
    .bda-step__meta,
    .bda-faqg__nav {
        position: static;
    }
}

/* ========================================================================
   12. PRINT
   ===================================================================== */

@media print {
    .bda-utility,
    #bda-header,
    #bda-drawer,
    .bda-fab,
    #bda-top,
    .bda-cta,
    .bda-footer {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    .bda-reveal {
        opacity: 1;
        transform: none;
    }

    .bda-faq-item__a {
        display: block !important;
    }
}

/* A support row carrying only a sentence: icon and text on one baseline. */
.bda-support__title--inline {
    align-items: flex-start;
}

.bda-support__title--inline i {
    padding-top: 0.35rem;
}

.bda-support__title--inline p {
    margin: 0;
}

/* ========================================================================
   13. SMALL-SCREEN HEADER
   ===================================================================== */

/* The utility bar is a desktop convenience. On a phone it costs three
   lines of vertical space for information the footer and the floating
   WhatsApp button already carry, so it goes. */
@media (max-width: 639px) {
    .bda-utility {
        display: none;
    }

    /* Header CTA becomes icon-only, so the row can never overflow and
       push the menu button off the edge. The accessible name stays on
       the link's aria-label. */
    .bda-btn--compact .bda-btn__label {
        display: none;
    }

    .bda-btn--compact {
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        flex: none;
    }

    .bda-btn--compact i {
        font-size: 1.2rem;
    }

    .bda-header__inner {
        gap: 0.75rem;
    }

    .bda-wordmark__text {
        font-size: 1.12rem;
    }
}

@media (max-width: 400px) {
    .bda-wordmark__mark {
        display: none;
    }
}

/* Between phone and desktop the bar fits on one line, minus the location. */
.bda-hide-mobile {
    display: none;
}

@media (min-width: 900px) {
    .bda-hide-mobile {
        display: inline-flex;
    }
}

/* ========================================================================
   14. TARGET SIZES & LANDMARK WRAPPERS
   ===================================================================== */

/* The floating actions sit in a labelled landmark so no interactive
   content lives outside a region; the wrapper itself has no box. */
.bda-floating {
    display: contents;
}

/* WCAG 2.2 asks for a 24px minimum target. These are stacked link lists
   rather than links inside a sentence, so the exemption does not apply. */
.bda-footer__links a,
.bda-mnav a,
.bda-breadcrumb a,
.bda-breadcrumb [aria-current],
.bda-utility__group a,
.bda-footer__group a,
.bda-footer__legal a,
.bda-footer__contact-item a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.bda-footer__links a {
    display: flex;
    min-height: 26px;
}

.bda-brand-link,
.bda-header__inner > a:first-child {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.bda-dir-card,
.bda-tier,
.bda-faq-item__q {
    min-height: 44px;
}