/* ==========================================================================
   BALI TO FLORES — "Meridian" design system
   --------------------------------------------------------------------------
   A minimal, luxury editorial language built around one idea: the site is a
   passage west to east. Everything is a line with points on it — the route
   rail, the hairline rules, the /01 indices in the gutter.

   Restraint is the brief. Almost no shadows, almost no fills; hierarchy is
   carried by type size, hairline rules and generous air. One accent —
   volcanic clay — earns its place by being rare.

   1.  Tokens
   2.  Reset & base
   3.  Typography scale
   4.  Layout: container, bands, heading blocks
   5.  Buttons & links
   6.  Wordmark, header, navigation, drawer
   7.  Hero
   8.  Route rail
   9.  Sections: answer, cards, highlights, itinerary, steps, tiers,
       compare, split, stats, directory, related, contact, notice, cta
   10. FAQ (flat + grouped)
   11. Footer, floating actions
   12. Editorial prose, blog, utility pages
   13. Motion & reduced motion
   14. Responsive
   ========================================================================== */

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

:root {
    /* Ground */
    --deep:        #07161A;
    --ink:         #0B1D22;
    --ink-soft:    #112E36;
    --shell:       #FBF8F3;
    --sand:        #F2EBE1;
    --paper:       #FFFDFA;

    /* Type */
    --text:        #14262B;
    --text-soft:   #4A5F65;
    --text-mute:   #7A8B8F;
    --on-deep:     #EFEAE2;
    --on-deep-soft:rgba(239, 234, 226, 0.68);
    --on-deep-mute:rgba(239, 234, 226, 0.44);

    /* Accents */
    --clay:        #BC5B38;
    --clay-deep:   #9C4526;
    --clay-tint:   rgba(188, 91, 56, 0.10);
    --sea:         #7FB0A7;
    --sea-deep:    #4F817A;

    /* Lines */
    --line:        rgba(20, 38, 43, 0.13);
    --line-strong: rgba(20, 38, 43, 0.26);
    --line-deep:   rgba(239, 234, 226, 0.16);
    --line-deep-s: rgba(239, 234, 226, 0.34);

    /* Type families */
    --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
    --font-sans:    "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Rhythm */
    --gutter:      clamp(20px, 5vw, 48px);
    --measure:     1280px;
    --band-y:      clamp(72px, 9vw, 136px);
    --radius:      3px;
    --radius-lg:   6px;

    /* Motion */
    --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
}

html {
    color-scheme: light;
}

/* 2. RESET & BASE ========================================================== */

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

* { margin: 0; }

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

body {
    background: var(--shell);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16.5px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.003em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
}

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

a {
    color: inherit;
    text-decoration: none;
    text-underline-offset: 0.22em;
    text-decoration-thickness: from-font;
}

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

button { background: none; border: 0; cursor: pointer; }

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

:focus-visible {
    outline: 2px solid var(--clay);
    outline-offset: 3px;
    border-radius: 2px;
}

.btf-band--deep :focus-visible,
.btf-footer :focus-visible,
.btf-hero :focus-visible {
    outline-color: var(--sea);
}

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 14px 22px;
    background: var(--ink);
    color: var(--on-deep);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

[id] { scroll-margin-top: 108px; }

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

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

.btf-display,
.btf-h1,
.btf-h2,
.btf-h3 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.04;
    text-wrap: balance;
}

.btf-h1 {
    font-size: clamp(2.6rem, 6.4vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.028em;
}

.btf-h2 {
    font-size: clamp(2rem, 4.1vw, 3.3rem);
    line-height: 1.02;
    letter-spacing: -0.024em;
}

.btf-h3 {
    font-size: clamp(1.35rem, 2.1vw, 1.75rem);
    line-height: 1.14;
    letter-spacing: -0.016em;
}

.btf-h1 em,
.btf-h2 em,
.btf-h3 em {
    font-style: italic;
    color: var(--clay);
}

.btf-band--deep .btf-h1 em,
.btf-band--deep .btf-h2 em,
.btf-band--deep .btf-h3 em,
.btf-hero em {
    color: var(--sea);
}

/* Mono eyebrow — the recurring label voice of the site. */
.btf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--clay);
}

.btf-eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
    flex: none;
}

.btf-band--deep .btf-eyebrow,
.btf-hero .btf-eyebrow { color: var(--sea); }

/* Section index (/01) — sits in the gutter above the heading. */
.btf-idx {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.12em;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}

.btf-band--deep .btf-idx { color: var(--on-deep-mute); }

.btf-lede {
    font-size: clamp(1.08rem, 1.55vw, 1.3rem);
    line-height: 1.55;
    color: var(--text-soft);
    max-width: 62ch;
    text-wrap: pretty;
}

.btf-intro {
    font-size: 1.04rem;
    line-height: 1.68;
    color: var(--text-soft);
    max-width: 68ch;
    text-wrap: pretty;
}

/* The hero sits on deep ground but is not a .btf-band--deep, so without it
   listed here its lede kept --text-soft (a dark slate) on a dark ground:
   1.01:1, effectively invisible. It was wrong before any photo was added. */
.btf-hero .btf-lede,
.btf-hero .btf-intro,
.btf-band--deep .btf-lede,
.btf-band--deep .btf-intro { color: var(--on-deep-soft); }

.btf-data {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* 4. LAYOUT ================================================================ */

.btf-container {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.btf-band {
    position: relative;
    padding-block: var(--band-y);
    background: var(--shell);
    color: var(--text);
}

.btf-band--sand  { background: var(--sand); }
.btf-band--shell { background: var(--shell); }

.btf-band--deep {
    background: var(--deep);
    color: var(--on-deep);
}

/* A hairline between two same-toned bands keeps the rhythm legible. */
.btf-band + .btf-band:not(.btf-band--deep)::before {
    content: "";
    position: absolute;
    inset: 0 var(--gutter) auto;
    height: 1px;
    background: var(--line);
}

.btf-band--sand + .btf-band--shell::before,
.btf-band--shell + .btf-band--sand::before { display: none; }

/* Two deep bands in a row need the rule even more than two light ones. */
.btf-band--deep + .btf-band--deep::before {
    content: "";
    position: absolute;
    inset: 0 var(--gutter) auto;
    height: 1px;
    background: var(--line-deep);
    z-index: 2;
}

/* Faint contour texture on the deep bands — depth without imagery. */
.btf-band--deep::after,
.btf-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 84% 6%, rgba(127, 176, 167, 0.09), transparent 58%),
        radial-gradient(90% 70% at 4% 96%, rgba(188, 91, 56, 0.10), transparent 60%);
}

.btf-band--deep > *,
.btf-hero > * { position: relative; z-index: 1; }

/* Heading block: index + eyebrow in a narrow rail, heading and intro in the
   wide column. The asymmetry is the layout's signature. */
.btf-head {
    display: grid;
    grid-template-columns: minmax(96px, 12%) 1fr;
    gap: clamp(18px, 3vw, 56px);
    align-items: start;
    padding-bottom: clamp(36px, 4.5vw, 64px);
}

.btf-head__rail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 10px;
}

.btf-head__rail::after {
    content: "";
    height: 1px;
    background: var(--line-strong);
    width: 100%;
}

.btf-band--deep .btf-head__rail::after { background: var(--line-deep-s); }

.btf-head__body > * + * { margin-top: 20px; }

.btf-head--center {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    max-width: 780px;
    margin-inline: auto;
}

.btf-head--center .btf-head__rail { display: none; }
.btf-head--center .btf-lede,
.btf-head--center .btf-intro { margin-inline: auto; }

/* Hairline rule used to close a section. */
.btf-rule {
    height: 1px;
    background: var(--line);
    border: 0;
}

.btf-band--deep .btf-rule { background: var(--line-deep); }

.btf-note {
    margin-top: clamp(24px, 3vw, 40px);
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-mute);
    max-width: 78ch;
}

.btf-band--deep .btf-note {
    border-top-color: var(--line-deep);
    color: var(--on-deep-mute);
}

/* 5. BUTTONS & LINKS ======================================================= */

.btf-btn {
    --btn-bg: var(--clay);
    --btn-fg: #FFF7F2;
    --btn-bd: var(--clay);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 24px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-bd);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.012em;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.28s var(--ease),
                border-color 0.28s var(--ease),
                color 0.28s var(--ease),
                transform 0.28s var(--ease);
}

.btf-btn i { font-size: 1.05em; }

.btf-btn:hover {
    --btn-bg: var(--clay-deep);
    --btn-bd: var(--clay-deep);
    transform: translateY(-1px);
}

.btf-btn:active { transform: translateY(0); }

.btf-btn--line {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    --btn-bd: var(--line-strong);
}

.btf-btn--line:hover {
    --btn-bg: var(--ink);
    --btn-fg: var(--on-deep);
    --btn-bd: var(--ink);
}

.btf-btn--on-deep {
    --btn-bg: transparent;
    --btn-fg: var(--on-deep);
    --btn-bd: var(--line-deep-s);
}

.btf-btn--on-deep:hover {
    --btn-bg: var(--on-deep);
    --btn-fg: var(--ink);
    --btn-bd: var(--on-deep);
}

.btf-btn--sm { padding: 10px 18px; font-size: 0.8125rem; }
.btf-btn--lg { padding: 17px 32px; font-size: 0.9375rem; }

.btf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* Quiet text link with a sliding arrow — used inside cards and rows. */
.btf-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clay);
}

.btf-link i {
    font-size: 14px;
    transition: transform 0.3s var(--ease-out);
}

.btf-link:hover { color: var(--clay-deep); }
.btf-link:hover i { transform: translateX(4px); }

.btf-band--deep .btf-link { color: var(--sea); }
.btf-band--deep .btf-link:hover { color: var(--on-deep); }

/* 6. WORDMARK, HEADER, NAV ================================================= */

.btf-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}

.btf-wordmark__a { font-size: 1.28rem; }

.btf-wordmark__b {
    font-size: 1.28rem;
    font-style: italic;
    color: var(--clay);
}

.btf-wordmark__arrow {
    position: relative;
    width: 30px;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
    align-self: center;
}

.btf-wordmark__arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

.btf-wordmark--lg .btf-wordmark__a,
.btf-wordmark--lg .btf-wordmark__b { font-size: 1.7rem; }
.btf-wordmark--lg .btf-wordmark__arrow { width: 38px; }

.btf-footer .btf-wordmark__b,
.btf-drawer .btf-wordmark__b { color: var(--sea); }

/* An uploaded logo (Theme Wording -> Site Wide) stands in for the wordmark.
   btf_logo_img() sets the height inline from the wording field, so these are
   only the floor; the max-width stops an over-wide file crowding the nav. */
.btf-logo-img {
    display: block;
    width: auto;
    height: 40px;
    max-width: min(240px, 46vw);
    object-fit: contain;
}

.btf-logo-img--lg {
    height: 56px;
    max-width: min(300px, 60vw);
}

/* Footer and mobile menu: a colour logo is knocked out to white rather than
   left to sink into the navy. brightness(0) flattens every colour to black
   while leaving the alpha channel alone, invert(1) then lifts it to white --
   so a transparent PNG or SVG comes out as a clean white mark. */
.btf-logo-img--invert {
    filter: brightness(0) invert(1);
}

/* Utility strip ---------------------------------------------------------- */

.btf-utility {
    background: var(--deep);
    color: var(--on-deep-soft);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.055em;
}

.btf-utility__inner {
    max-width: var(--measure);
    margin-inline: auto;
    padding: 9px var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.btf-utility__group {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}

.btf-utility__group > * {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    transition: color 0.25s var(--ease);
}

.btf-utility a:hover { color: var(--sea); }
.btf-utility i { font-size: 13px; opacity: 0.7; }

/* Header ------------------------------------------------------------------ */

#btf-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(251, 248, 243, 0.86);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}

#btf-header.is-stuck {
    box-shadow: 0 1px 24px rgba(7, 22, 26, 0.07);
}

.btf-header__inner {
    max-width: var(--measure);
    margin-inline: auto;
    padding: 16px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
}

.btf-nav-primary { margin-inline: auto; }

.btf-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btf-nav__item { position: relative; }

.btf-nav a,
.btf-nav > li > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 13px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-soft);
    border-radius: 999px;
    transition: color 0.22s var(--ease), background-color 0.22s var(--ease);
}

.btf-nav > li > a:hover,
.btf-nav > li.current-menu-item > a,
.btf-nav > li.current_page_item > a {
    color: var(--text);
    background: rgba(20, 38, 43, 0.05);
}

.btf-nav i { font-size: 13px; opacity: 0.6; }

.btf-nav__dropdown,
.btf-nav .sub-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 286px;
    padding: 10px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 48px -18px rgba(7, 22, 26, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.btf-nav__item:hover > .btf-nav__dropdown,
.btf-nav__item:focus-within > .btf-nav__dropdown,
.btf-nav li:hover > .sub-menu,
.btf-nav li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.btf-nav__dropdown a,
.btf-nav .sub-menu a {
    display: block;
    padding: 9px 13px;
    font-size: 0.875rem;
    color: var(--text-soft);
    border-radius: var(--radius);
    white-space: normal;
}

.btf-nav__dropdown a:hover,
.btf-nav .sub-menu a:hover {
    background: var(--sand);
    color: var(--clay);
}

.btf-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btf-burger {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--text);
    transition: background-color 0.22s var(--ease), color 0.22s var(--ease);
}

.btf-burger:hover { background: var(--ink); color: var(--on-deep); }
.btf-burger i { font-size: 19px; }

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

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

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

.btf-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 22, 26, 0.6);
    opacity: 0;
    transition: opacity 0.35s var(--ease);
}

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

.btf-drawer__panel {
    position: absolute;
    inset-block: 0;
    right: 0;
    width: min(420px, 90vw);
    padding: 24px var(--gutter) calc(28px + env(safe-area-inset-bottom));
    background: var(--deep);
    color: var(--on-deep);
    display: flex;
    flex-direction: column;
    gap: 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 0.42s var(--ease-out);
}

#btf-drawer.is-open .btf-drawer__panel { transform: translateX(0); }

.btf-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line-deep);
}

.btf-drawer__close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-deep-s);
    border-radius: 999px;
    color: var(--on-deep);
    transition: background-color 0.22s var(--ease), color 0.22s var(--ease);
}

.btf-drawer__close:hover { background: var(--on-deep); color: var(--ink); }

.btf-mnav { display: flex; flex-direction: column; }

.btf-mnav a,
.btf-mnav__link {
    display: block;
    padding: 13px 0;
    font-family: var(--font-display);
    font-size: 1.32rem;
    letter-spacing: -0.015em;
    color: var(--on-deep);
    border-bottom: 1px solid var(--line-deep);
    transition: color 0.22s var(--ease), padding-left 0.22s var(--ease);
}

.btf-mnav a:hover { color: var(--sea); padding-left: 8px; }

.btf-mnav__group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 0;
    font-family: var(--font-display);
    font-size: 1.32rem;
    letter-spacing: -0.015em;
    cursor: pointer;
    list-style: none;
    border-bottom: 1px solid var(--line-deep);
}

.btf-mnav__group > summary::-webkit-details-marker { display: none; }
.btf-mnav__group > summary i { font-size: 16px; transition: transform 0.3s var(--ease); }
.btf-mnav__group[open] > summary i { transform: rotate(45deg); }

.btf-mnav__group ul { padding: 4px 0 10px 14px; }

.btf-mnav__group ul a {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    padding: 9px 0;
    color: var(--on-deep-soft);
    border-bottom: 0;
}

.btf-drawer__foot { margin-top: auto; padding-top: 14px; }
.btf-drawer__foot .btf-btn { width: 100%; }

/* Breadcrumb -------------------------------------------------------------- */

.btf-crumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--text-mute);
}

.btf-crumb a { transition: color 0.22s var(--ease); }
.btf-crumb a:hover { color: var(--clay); }
.btf-crumb li[aria-current] { color: var(--text-soft); }

.btf-hero .btf-crumb,
.btf-band--deep .btf-crumb { color: var(--on-deep-mute); }

.btf-hero .btf-crumb a:hover { color: var(--sea); }
.btf-hero .btf-crumb li[aria-current] { color: var(--on-deep-soft); }

/* 7. HERO ================================================================== */

.btf-hero {
    position: relative;
    background: var(--deep);
    color: var(--on-deep);
    padding-block: clamp(48px, 7vw, 80px) clamp(64px, 8vw, 104px);
    overflow: hidden;
}

/* Meridian grid: the faint longitude lines behind the hero. */
.btf-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        to right,
        rgba(239, 234, 226, 0.05) 0 1px,
        transparent 1px 12.5%
    );
}

/* Optional hero photograph.
   Order of layers: photo (0) -> scrim (1) -> meridian grid (2) -> copy (3).
   The deep ground stays underneath, so a slow-loading or broken photo
   degrades to exactly the hero the photo-less pages already use. */
.btf-hero__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.btf-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.btf-hero--photo .btf-hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Tuned against all 17 hero photographs, then checked by compositing the
       real scrim over each one rather than by eye. A two-stop wash left a
       dead black slab under the copy and a visible seam where the slope
       changed; this ramp keeps the worst pixel behind the headline at
       5.4:1 against --on-deep -- clear of AA -- while roughly 40% of the
       photograph still reads across the band. */
    background:
        linear-gradient(to right,
            rgba(7, 22, 26, 0.82) 0%,
            rgba(7, 22, 26, 0.76) 15%,
            rgba(7, 22, 26, 0.58) 40%,
            rgba(7, 22, 26, 0.32) 70%,
            rgba(7, 22, 26, 0.14) 100%),
        linear-gradient(to bottom,
            rgba(7, 22, 26, 0.24) 0%,
            rgba(7, 22, 26, 0.04) 40%,
            rgba(7, 22, 26, 0.50) 100%);
}

/* Insurance for the few frames with a bright horizon exactly behind the
   headline. Shadows earn no WCAG credit, so the scrim above already carries
   the ratio on its own; this only sharpens the edge of the glyphs. */
.btf-hero--photo .btf-hero__title,
.btf-hero--photo .btf-hero__lede,
.btf-hero--photo .btf-eyebrow {
    text-shadow: 0 1px 14px rgba(7, 22, 26, 0.55);
}

.btf-hero > .btf-container {
    position: relative;
    z-index: 3;
}

/* A photograph is a far busier ground than flat --deep, and the muted tokens
   were mixed for flat ground: at 0.44 alpha the breadcrumb, fact labels, aside
   note and leg meta all landed near 2.5:1. Raising the tokens here lifts every
   element that uses them at once, and --sea goes to a tint that still reads as
   the same accent. Solved against all 17 hero photographs; the lowest result
   is the eyebrow at 4.8:1. */
.btf-hero--photo {
    --on-deep-soft: rgba(239, 234, 226, 0.90);
    --on-deep-mute: rgba(239, 234, 226, 0.80);
    --line-deep-s:  rgba(239, 234, 226, 0.46);
    --sea:          #A8CFC8;
}

/* The lede carries the promise of the page, so over a photo it goes to full
   strength rather than the 0.90 soft tone. */
.btf-hero--photo .btf-hero__lede { color: var(--on-deep); }

/* On a photo hero the aside needs its own ground or the legs sit on sky.
   Only the ground changes — radius, border and padding stay as set above. */
.btf-hero--photo .btf-hero__aside {
    background: rgba(7, 22, 26, 0.74);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 860px) {
    /* Stacked layout puts copy across the full width, so the horizontal
       falloff is dropped and the vertical scrim carries the contrast on its
       own: 5.6:1 worst case, matching the desktop band. */
    .btf-hero--photo .btf-hero__photo::after {
        background:
            linear-gradient(to bottom,
                rgba(7, 22, 26, 0.80) 0%,
                rgba(7, 22, 26, 0.67) 40%,
                rgba(7, 22, 26, 0.90) 100%);
    }
}

.btf-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.88fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: end;
    padding-top: clamp(28px, 4vw, 48px);
}

.btf-hero__title { margin-top: 20px; }
.btf-hero__lede { margin-top: 24px; max-width: 54ch; }
.btf-hero__cta { margin-top: 34px; }

/* Quick facts — a ledger of four, divided by hairlines. */
.btf-hero__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    margin-top: clamp(40px, 5vw, 60px);
    border-top: 1px solid var(--line-deep-s);
}

.btf-hero__fact {
    padding: 20px 20px 4px 0;
    border-right: 1px solid var(--line-deep);
}

.btf-hero__fact:last-child { border-right: 0; }

.btf-hero__fact-value {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.3vw, 1.9rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--on-deep);
}

.btf-hero__fact-label {
    display: block;
    margin-top: 7px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-deep-mute);
}

/* Hero aside: the passage card — a typographic boarding-pass, not an image. */
.btf-hero__aside {
    border: 1px solid var(--line-deep-s);
    border-radius: var(--radius-lg);
    background: rgba(239, 234, 226, 0.035);
    padding: clamp(22px, 2.6vw, 30px);
    backdrop-filter: blur(2px);
}

.btf-hero__aside-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line-deep);
}

.btf-hero__aside-title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sea);
}

.btf-hero__aside-note {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--on-deep-mute);
}

.btf-hero__leg {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: baseline;
    padding: 15px 0;
    border-bottom: 1px solid var(--line-deep);
}

.btf-hero__leg:last-of-type { border-bottom: 0; }

.btf-hero__leg-n {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--on-deep-mute);
    font-variant-numeric: tabular-nums;
}

.btf-hero__leg > span { min-width: 0; }

.btf-hero__leg-name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--on-deep);
}

.btf-hero__leg-meta {
    display: block;
    margin-top: 3px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--on-deep-mute);
}

.btf-hero__leg-val {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--sea);
    white-space: nowrap;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

/* 8. ROUTE RAIL ============================================================ */

.btf-rail {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    margin-top: clamp(8px, 2vw, 20px);
}

.btf-rail::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line-deep-s);
}

.btf-rail__stop {
    position: relative;
    padding: 30px 22px 0 0;
}

.btf-rail__stop::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid var(--sea);
    background: var(--deep);
    transition: background-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.btf-rail__stop:hover::before,
.btf-rail__stop:first-child::before,
.btf-rail__stop:last-child::before {
    background: var(--sea);
}

.btf-rail__stop:last-child::after {
    content: "";
    position: absolute;
    top: 3.5px;
    right: 0;
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--line-deep-s);
    border-right: 1px solid var(--line-deep-s);
    transform: rotate(45deg);
}

.btf-rail__n {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--on-deep-mute);
    font-variant-numeric: tabular-nums;
}

.btf-rail__name {
    margin-top: 10px;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    line-height: 1.12;
    letter-spacing: -0.016em;
    color: var(--on-deep);
}

.btf-rail__meta {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--sea);
}

.btf-rail__text {
    margin-top: 12px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--on-deep-soft);
    max-width: 34ch;
}

/* 9. SECTIONS ============================================================== */

/* --- Answer (AEO block) -------------------------------------------------- */

.btf-answer {
    display: grid;
    grid-template-columns: minmax(96px, 12%) minmax(0, 1fr) minmax(0, 0.72fr);
    gap: clamp(18px, 3vw, 56px);
    align-items: start;
}

.btf-answer__text {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.7vw, 2.15rem);
    line-height: 1.24;
    letter-spacing: -0.018em;
    color: var(--text);
    text-wrap: pretty;
}

.btf-band--deep .btf-answer__text { color: var(--on-deep); }

.btf-answer__points {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: 8px;
}

.btf-answer__point {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-soft);
}

.btf-answer__point:first-child { border-top: 1px solid var(--line); }
.btf-answer__point i { color: var(--clay); font-size: 9px; margin-top: 7px; }

.btf-band--deep .btf-answer__point {
    border-color: var(--line-deep);
    color: var(--on-deep-soft);
}

.btf-band--deep .btf-answer__point:first-child { border-top-color: var(--line-deep); }
.btf-band--deep .btf-answer__point i { color: var(--sea); }

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

.btf-grid {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.btf-band--deep .btf-grid {
    background: var(--line-deep);
    border-color: var(--line-deep);
}

.btf-grid--2 { grid-template-columns: repeat(2, 1fr); }
.btf-grid--3 { grid-template-columns: repeat(3, 1fr); }
.btf-grid--4 { grid-template-columns: repeat(4, 1fr); }

.btf-card {
    --card-pad: clamp(24px, 2.8vw, 36px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: var(--card-pad);
    background: var(--shell);
    transition: background-color 0.35s var(--ease);
}

/* Optional card photograph. Full-bleed across the top of the card: the
   negative margin cancels the card's own padding so the image meets the
   hairline grid, the way the icon never does. */
.btf-card__media {
    display: block;
    margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 3px;
    overflow: hidden;
    background: var(--sand);
}

.btf-card__media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease);
}

.btf-card:hover .btf-card__media img { transform: scale(1.04); }

.btf-band--deep .btf-card__media { background: var(--ink-soft); }

.btf-band--sand .btf-card { background: var(--sand); }
.btf-band--deep .btf-card { background: var(--deep); }

.btf-card:hover { background: var(--paper); }
.btf-band--deep .btf-card:hover { background: var(--ink-soft); }

.btf-card__n {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}

.btf-band--deep .btf-card__n { color: var(--on-deep-mute); }

.btf-card__icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--clay);
    font-size: 18px;
    transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.btf-card:hover .btf-card__icon {
    background: var(--clay);
    border-color: var(--clay);
    color: #FFF7F2;
}

.btf-band--deep .btf-card__icon { border-color: var(--line-deep-s); color: var(--sea); }

.btf-band--deep .btf-card:hover .btf-card__icon {
    background: var(--sea);
    border-color: var(--sea);
    color: var(--deep);
}

.btf-card__title {
    font-family: var(--font-display);
    font-size: 1.28rem;
    line-height: 1.16;
    letter-spacing: -0.016em;
    text-wrap: balance;
}

.btf-card__text {
    font-size: 0.9375rem;
    line-height: 1.62;
    color: var(--text-soft);
    text-wrap: pretty;
}

.btf-band--deep .btf-card__text { color: var(--on-deep-soft); }

.btf-card__link { margin-top: auto; padding-top: 6px; }

a.btf-card::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* --- Highlights (destinations) ------------------------------------------- */

.btf-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: clamp(20px, 2.4vw, 32px);
}

.btf-hl {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 22px;
    border-top: 1px solid var(--line-deep-s);
}

.btf-band--shell .btf-hl,
.btf-band--sand .btf-hl { border-top-color: var(--line-strong); }

.btf-hl__n {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--sea);
    font-variant-numeric: tabular-nums;
}

.btf-band--shell .btf-hl__n,
.btf-band--sand .btf-hl__n { color: var(--clay); }

.btf-hl__name {
    margin-top: 16px;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2vw, 1.62rem);
    line-height: 1.12;
    letter-spacing: -0.018em;
    text-wrap: balance;
}

.btf-hl__meta {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.07em;
    color: var(--on-deep-mute);
}

.btf-band--shell .btf-hl__meta,
.btf-band--sand .btf-hl__meta { color: var(--text-mute); }

.btf-hl__text {
    margin-top: 14px;
    font-size: 0.9375rem;
    line-height: 1.62;
    color: var(--on-deep-soft);
    text-wrap: pretty;
}

.btf-band--shell .btf-hl__text,
.btf-band--sand .btf-hl__text { color: var(--text-soft); }

/* --- Itinerary table ----------------------------------------------------- */

.btf-itin {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.btf-itin__row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(14px, 2vw, 32px);
    align-items: baseline;
    padding: clamp(18px, 2vw, 24px) clamp(18px, 2.4vw, 30px);
    border-bottom: 1px solid var(--line);
    background: var(--shell);
    transition: background-color 0.3s var(--ease);
}

.btf-band--sand .btf-itin__row { background: var(--sand); }
.btf-itin__row:last-child { border-bottom: 0; }
.btf-itin__row:hover { background: var(--paper); }

.btf-itin__head {
    background: var(--ink);
    color: var(--on-deep);
}

.btf-itin__head:hover { background: var(--ink); }

.btf-itin__head > * {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--on-deep-mute);
}

.btf-itin__day {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clay);
    font-variant-numeric: tabular-nums;
}

.btf-itin__what {
    font-family: var(--font-display);
    font-size: 1.16rem;
    line-height: 1.22;
    letter-spacing: -0.014em;
}

.btf-itin__where {
    font-size: 0.9rem;
    color: var(--text-soft);
}

.btf-itin__head .btf-itin__what,
.btf-itin__head .btf-itin__where,
.btf-itin__head .btf-itin__day {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--on-deep-mute);
}

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

.btf-steps {
    display: grid;
    gap: 0;
}

.btf-step {
    display: grid;
    grid-template-columns: minmax(96px, 12%) minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(18px, 3vw, 56px);
    align-items: start;
    padding: clamp(26px, 3vw, 40px) 0;
    border-top: 1px solid var(--line);
}

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

.btf-band--deep .btf-step { border-top-color: var(--line-deep); }
.btf-band--deep .btf-step:last-child { border-bottom-color: var(--line-deep); }

.btf-step__n {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.12em;
    color: var(--clay);
    font-variant-numeric: tabular-nums;
    padding-top: 6px;
}

.btf-band--deep .btf-step__n { color: var(--sea); }

.btf-step__title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.1vw, 1.68rem);
    line-height: 1.12;
    letter-spacing: -0.018em;
    text-wrap: balance;
}

.btf-step__window {
    display: inline-block;
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.btf-band--deep .btf-step__window { color: var(--on-deep-mute); }

.btf-step__text {
    font-size: 0.9875rem;
    line-height: 1.68;
    color: var(--text-soft);
    padding-top: 5px;
    text-wrap: pretty;
}

.btf-band--deep .btf-step__text { color: var(--on-deep-soft); }

/* --- Tiers (ledger of options / prices) ---------------------------------- */

.btf-tiers { border-top: 1px solid var(--line-strong); }

.btf-band--deep .btf-tiers { border-top-color: var(--line-deep-s); }

.btf-tier {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.62fr) minmax(0, 1.3fr) auto;
    gap: clamp(16px, 2.6vw, 40px);
    align-items: center;
    padding: clamp(20px, 2.4vw, 28px) 0;
    border-bottom: 1px solid var(--line);
    transition: padding-left 0.3s var(--ease);
}

.btf-band--deep .btf-tier { border-bottom-color: var(--line-deep); }

.btf-tier:hover { padding-left: 10px; }

.btf-tier__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.btf-tier__name-text {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    line-height: 1.14;
    letter-spacing: -0.016em;
}

.btf-tier__code,
.btf-tier__badge {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.btf-tier__code {
    border: 1px solid var(--line-strong);
    color: var(--text-mute);
}

.btf-tier__badge {
    background: var(--clay-tint);
    color: var(--clay);
    border: 1px solid transparent;
}

.btf-band--deep .btf-tier__code { border-color: var(--line-deep-s); color: var(--on-deep-mute); }

.btf-band--deep .btf-tier__badge {
    background: rgba(127, 176, 167, 0.14);
    color: var(--sea);
}

.btf-tier__price {
    font-family: var(--font-display);
    font-size: clamp(1.18rem, 1.8vw, 1.5rem);
    letter-spacing: -0.018em;
    color: var(--clay);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.btf-band--deep .btf-tier__price { color: var(--sea); }

.btf-tier__price small {
    display: block;
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.btf-band--deep .btf-tier__price small { color: var(--on-deep-mute); }

.btf-tier__text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-soft);
    text-wrap: pretty;
}

.btf-band--deep .btf-tier__text { color: var(--on-deep-soft); }

/* --- Compare table ------------------------------------------------------- */

.btf-compare {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.btf-compare__row {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(14px, 2vw, 32px);
    padding: clamp(16px, 1.9vw, 22px) clamp(18px, 2.4vw, 30px);
    border-bottom: 1px solid var(--line);
    background: var(--shell);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.btf-band--sand .btf-compare__row { background: var(--sand); }
.btf-compare__row:last-child { border-bottom: 0; }

.btf-compare__row--head {
    background: var(--ink);
    color: var(--on-deep);
}

.btf-compare__row--head > * {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.btf-compare__row--head > :nth-child(3) { color: var(--sea); }

.btf-compare__feature { font-weight: 600; color: var(--text); }
.btf-compare__a { color: var(--text-mute); }
.btf-compare__b { color: var(--text); font-weight: 500; }

.btf-compare__row--head .btf-compare__feature,
.btf-compare__row--head .btf-compare__a,
.btf-compare__row--head .btf-compare__b {
    color: inherit;
    font-weight: 400;
}

.btf-compare__b::before {
    content: "\2713";
    margin-right: 8px;
    color: var(--clay);
    font-size: 0.9em;
}

.btf-compare__row--head .btf-compare__b::before { content: none; }

/* --- Split (text + panel) ------------------------------------------------ */

.btf-split {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.btf-split__body > * + * { margin-top: 18px; }

.btf-split__body p {
    font-size: 1rem;
    line-height: 1.72;
    color: var(--text-soft);
    max-width: 62ch;
    text-wrap: pretty;
}

.btf-band--deep .btf-split__body p { color: var(--on-deep-soft); }

.btf-split__list {
    display: flex;
    flex-direction: column;
    margin-top: clamp(24px, 3vw, 34px);
}

.btf-split__list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 13px;
    align-items: start;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-soft);
}

.btf-split__list li:first-child { border-top: 1px solid var(--line); }
.btf-split__list i { color: var(--clay); font-size: 15px; margin-top: 4px; }

.btf-band--deep .btf-split__list li { border-color: var(--line-deep); color: var(--on-deep-soft); }
.btf-band--deep .btf-split__list li:first-child { border-top-color: var(--line-deep); }
.btf-band--deep .btf-split__list i { color: var(--sea); }

.btf-split__panel {
    position: sticky;
    top: 108px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--paper);
}

.btf-band--deep .btf-split__panel {
    border-color: var(--line-deep-s);
    background: rgba(239, 234, 226, 0.035);
}

.btf-split__panel img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.btf-split__facts { padding: clamp(22px, 2.6vw, 30px); }

.btf-split__fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.btf-split__fact:first-child { padding-top: 0; }
.btf-split__fact:last-child { border-bottom: 0; padding-bottom: 0; }

.btf-split__fact dt {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.btf-split__fact dd {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: -0.014em;
    text-align: right;
    color: var(--text);
}

.btf-band--deep .btf-split__fact { border-bottom-color: var(--line-deep); }
.btf-band--deep .btf-split__fact dt { color: var(--on-deep-mute); }
.btf-band--deep .btf-split__fact dd { color: var(--on-deep); }

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

.btf-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    border-top: 1px solid var(--line-deep-s);
}

.btf-band--shell .btf-stats,
.btf-band--sand .btf-stats { border-top-color: var(--line-strong); }

.btf-stat {
    padding: clamp(26px, 3vw, 36px) 24px clamp(4px, 1vw, 8px) 0;
    border-right: 1px solid var(--line-deep);
}

.btf-band--shell .btf-stat,
.btf-band--sand .btf-stat { border-right-color: var(--line); }

.btf-stat:last-child { border-right: 0; }

.btf-stat__value {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3.1rem);
    line-height: 0.98;
    letter-spacing: -0.028em;
    font-variant-numeric: tabular-nums;
}

.btf-stat__value span {
    color: var(--sea);
    font-size: 0.62em;
    letter-spacing: -0.01em;
}

.btf-band--shell .btf-stat__value span,
.btf-band--sand .btf-stat__value span { color: var(--clay); }

.btf-stat__label {
    display: block;
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-deep-mute);
    max-width: 22ch;
}

.btf-band--shell .btf-stat__label,
.btf-band--sand .btf-stat__label { color: var(--text-mute); }

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

.btf-dir {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.btf-dir--2 { grid-template-columns: repeat(2, 1fr); }
.btf-dir--3 { grid-template-columns: repeat(3, 1fr); }

/* Blank cell that keeps the last row of a hairline grid full, so the
   ruled background never shows through as a bare grey block. */
.btf-fill { background: var(--shell); }
.btf-band--sand .btf-fill { background: var(--sand); }
.btf-band--deep .btf-fill { background: var(--deep); }

.btf-dir__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(22px, 2.5vw, 30px);
    background: var(--shell);
    transition: background-color 0.3s var(--ease);
}

.btf-band--sand .btf-dir__item { background: var(--sand); }
.btf-dir__item:hover { background: var(--paper); }

.btf-dir__top {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--clay);
}

.btf-dir__top i { font-size: 17px; }

.btf-dir__title {
    font-family: var(--font-display);
    font-size: 1.16rem;
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--text);
    text-wrap: balance;
}

.btf-dir__text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-soft);
    text-wrap: pretty;
}

.btf-dir__go {
    margin-top: auto;
    padding-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-mute);
    transition: color 0.25s var(--ease);
}

.btf-dir__item:hover .btf-dir__go { color: var(--clay); }
.btf-dir__go i { transition: transform 0.3s var(--ease-out); }
.btf-dir__item:hover .btf-dir__go i { transform: translateX(4px); }

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

.btf-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.btf-contact__methods {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.btf-method {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: start;
    padding: clamp(20px, 2.4vw, 28px);
    background: var(--shell);
    transition: background-color 0.3s var(--ease);
}

.btf-band--sand .btf-method { background: var(--sand); }
.btf-method:hover { background: var(--paper); }

.btf-method__icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--clay);
    font-size: 18px;
    flex: none;
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.btf-method:hover .btf-method__icon {
    background: var(--clay);
    border-color: var(--clay);
    color: #FFF7F2;
}

.btf-method__title {
    font-family: var(--font-display);
    font-size: 1.16rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.btf-method__text {
    margin-top: 6px;
    font-size: 0.9125rem;
    line-height: 1.58;
    color: var(--text-soft);
}

.btf-method__action { margin-top: 12px; }

.btf-method__action a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.btf-contact__aside {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--paper);
    padding: clamp(24px, 3vw, 34px);
    position: sticky;
    top: 108px;
}

.btf-contact__aside h3 {
    font-family: var(--font-display);
    font-size: 1.32rem;
    letter-spacing: -0.016em;
    line-height: 1.16;
}

.btf-hours { margin-top: 18px; }

.btf-hours__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9125rem;
}

.btf-hours__row:last-child { border-bottom: 0; }
.btf-hours__row dt { color: var(--text-soft); }

.btf-hours__row dd {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.03em;
    color: var(--text);
    text-align: right;
}

.btf-contact__addr {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.btf-contact__addr p {
    font-size: 0.9125rem;
    line-height: 1.62;
    color: var(--text-soft);
}

.btf-contact__addr .btf-link { margin-top: 14px; }

/* --- Notice band --------------------------------------------------------- */

.btf-notice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(22px, 3vw, 48px);
    align-items: center;
    padding: clamp(28px, 3.4vw, 42px) clamp(26px, 3.4vw, 48px);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--paper);
}

.btf-notice__title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    line-height: 1.14;
    letter-spacing: -0.018em;
    text-wrap: balance;
}

.btf-notice__text {
    margin-top: 12px;
    font-size: 0.9625rem;
    line-height: 1.64;
    color: var(--text-soft);
    max-width: 68ch;
    text-wrap: pretty;
}

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

.btf-cta {
    position: relative;
    background: var(--deep);
    color: var(--on-deep);
    padding-block: clamp(76px, 9vw, 128px) clamp(64px, 7vw, 100px);
    overflow: hidden;
}

.btf-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(70% 120% at 50% 130%, rgba(188, 91, 56, 0.20), transparent 62%),
        repeating-linear-gradient(to right, rgba(239, 234, 226, 0.045) 0 1px, transparent 1px 12.5%);
}

.btf-cta__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}

.btf-cta__inner .btf-eyebrow { justify-content: center; }
.btf-cta__inner .btf-eyebrow::after {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

.btf-cta__heading { margin-top: 20px; }
.btf-cta__body { margin-top: 20px; margin-inline: auto; }

.btf-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 34px;
}

.btf-cta__sig {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--line-deep);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-deep-mute);
}

/* 10. FAQ ================================================================== */

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

.btf-band--deep .btf-faq { border-top-color: var(--line-deep-s); }

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

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

.btf-faq-item__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(18px, 2.1vw, 24px) 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: clamp(1.08rem, 1.55vw, 1.32rem);
    line-height: 1.26;
    letter-spacing: -0.014em;
    transition: color 0.25s var(--ease);
    text-wrap: pretty;
}

.btf-faq-item__q::-webkit-details-marker { display: none; }
.btf-faq-item__q:hover { color: var(--clay); }
.btf-band--deep .btf-faq-item__q:hover { color: var(--sea); }

.btf-faq-item__q i {
    flex: none;
    margin-top: 5px;
    font-size: 15px;
    color: var(--text-mute);
    transition: transform 0.32s var(--ease), color 0.25s var(--ease);
}

.btf-band--deep .btf-faq-item__q i { color: var(--on-deep-mute); }
.btf-faq-item[open] .btf-faq-item__q i { transform: rotate(45deg); color: var(--clay); }
.btf-band--deep .btf-faq-item[open] .btf-faq-item__q i { color: var(--sea); }

.btf-faq-item__a {
    padding: 0 clamp(40px, 6vw, 96px) clamp(20px, 2.4vw, 28px) 0;
    font-size: 0.9875rem;
    line-height: 1.7;
    color: var(--text-soft);
    max-width: 82ch;
    text-wrap: pretty;
}

.btf-band--deep .btf-faq-item__a { color: var(--on-deep-soft); }

/* Grouped FAQ hub --------------------------------------------------------- */

.btf-faqg {
    display: grid;
    grid-template-columns: minmax(0, 268px) minmax(0, 1fr);
    gap: clamp(32px, 4.5vw, 72px);
    align-items: start;
}

.btf-faqg__nav {
    position: sticky;
    top: 108px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line-strong);
}

.btf-faqg__nav a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 15px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 0.9125rem;
    font-weight: 500;
    color: var(--text-soft);
    transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}

.btf-faqg__nav a:hover,
.btf-faqg__nav a.is-active {
    color: var(--clay);
    padding-left: 10px;
}

.btf-faqg__nav i { font-size: 16px; opacity: 0.75; }

.btf-faqg__count {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}

.btf-faqg__group + .btf-faqg__group { margin-top: clamp(44px, 5vw, 72px); }

.btf-faqg__group-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clay);
}

.btf-faqg__group-title i { font-size: 16px; }

/* 11. FOOTER =============================================================== */

/* Four stacked bands, each divided by a hairline and each sized by its own
   content — so the tall column never strands the short ones beside a slab
   of empty ground. */

.btf-footer {
    position: relative;
    background: var(--deep);
    color: var(--on-deep-soft);
    border-top: 1px solid var(--line-deep);
    overflow: hidden;
}

.btf-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(to right, rgba(239, 234, 226, 0.04) 0 1px, transparent 1px 12.5%);
}

.btf-footer > * { position: relative; z-index: 1; }

.btf-footer__band { padding-block: clamp(34px, 3.6vw, 52px); }

.btf-footer__band + .btf-footer__band { border-top: 1px solid var(--line-deep); }

.btf-footer__band:first-child { padding-top: clamp(48px, 5vw, 72px); }

.btf-footer__band--last {
    padding-block: 22px calc(26px + env(safe-area-inset-bottom));
}

/* --- Band 1: brand + link columns ---------------------------------------- */

/* One directory row: brand, three link columns, reach us. The gap is
   tighter than a content band's because five columns share 1184px; at the
   old 64px the link labels started wrapping mid-phrase. */
.btf-footer__main {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        repeat(3, minmax(0, 1.08fr))
        minmax(0, 1.05fr);
    column-gap: clamp(24px, 2.6vw, 40px);
    row-gap: 0;
    align-items: start;
}

.btf-footer__brand p {
    margin-top: 20px;
    font-size: 0.9125rem;
    line-height: 1.7;
    color: var(--on-deep-soft);
    max-width: 46ch;
    text-wrap: pretty;
}

/* Trust signals -- a short, honest list, not badges. Its own centred strip
   now: inside the directory grid it had to span every column, which left a
   full-width rule and a band of empty ground above it. */
.btf-footer__band--trust { padding-block: clamp(20px, 2.2vw, 28px); }

.btf-footer__trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px clamp(22px, 3vw, 44px);
}

.btf-footer__trust li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--on-deep-mute);
    transition: color 0.25s var(--ease);
}

.btf-footer__trust li:hover { color: var(--on-deep-soft); }

.btf-footer__trust i { font-size: 15px; color: var(--sea); }

.btf-footer h2 {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--on-deep-mute);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-deep);
    margin-bottom: 12px;
}

.btf-footer__links li a {
    display: block;
    padding: 7px 0;
    font-size: 0.9125rem;
    color: var(--on-deep-soft);
    transition: color 0.22s var(--ease), padding-left 0.22s var(--ease);
}

.btf-footer__links li a:hover { color: var(--sea); padding-left: 6px; }

/* --- Reach us (a column of the directory grid, not a band) --------------
   Four short facts never earned a full-width row with vertical rules and
   38px ringed icons. As a column they read as a list: a small accent icon,
   the value, and the caption underneath it in mono. ---------------------- */

.btf-footer__reach { display: grid; gap: 15px; }

.btf-reach {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    align-items: start;
}

.btf-reach__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 17px;
    margin-top: 2px;
    color: var(--sea);
    font-size: 16px;
    transition: transform 0.28s var(--ease-out);
}

.btf-reach:hover .btf-reach__icon { transform: translateY(-1px); }

.btf-reach__body { min-width: 0; display: block; }

.btf-reach__value {
    display: block;
    font-size: 0.9125rem;
    line-height: 1.45;
    color: var(--on-deep);
    overflow-wrap: anywhere;
    transition: color 0.22s var(--ease);
}

a.btf-reach__value:hover { color: var(--sea); }

.btf-reach__label {
    display: block;
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--on-deep-mute);
}

/* --- Band 2: the sister-desk network -------------------------------------
   Centred rather than a two-column head-and-cards split: the intro is one
   sentence and three desks, which read as a set when they sit under a
   shared heading instead of beside it. ----------------------------------- */

.btf-footer__network {
    display: grid;
    justify-items: center;
    gap: clamp(20px, 2.4vw, 30px);
    text-align: center;
}

.btf-footer__network-head { max-width: 62ch; }

/* Scoped past `.btf-footer h2`, which is the column-heading rule and would
   otherwise win on specificity and put a rule under this centred title. */
.btf-footer .btf-footer__network-title {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sea);
    margin-bottom: 10px;
    padding-bottom: 0;
    border-bottom: 0;
}

.btf-footer__network-head p {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--on-deep-mute);
    text-wrap: pretty;
}

.btf-footer__network-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px clamp(10px, 1.4vw, 16px);
}

.btf-footer__network-list a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border: 1px solid var(--line-deep);
    border-radius: 999px;
    font-size: 0.875rem;
    color: var(--on-deep-soft);
    transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.btf-footer__network-list a:hover {
    border-color: var(--line-deep-s);
    background: rgba(239, 234, 226, 0.04);
    color: var(--on-deep);
}

.btf-footer__network-list i {
    font-size: 14px;
    color: var(--on-deep-mute);
    transition: transform 0.3s var(--ease-out), color 0.25s var(--ease);
}

.btf-footer__network-list a:hover i {
    color: var(--sea);
    transform: translate(2px, -2px);
}

/* --- Band 4: the bottom bar ----------------------------------------------- */

.btf-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--on-deep-mute);
}

.btf-footer__copy p + p { margin-top: 6px; }

.btf-footer__updated { color: rgba(239, 234, 226, 0.32); }

.btf-footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.btf-footer__legal a { transition: color 0.22s var(--ease); }
.btf-footer__legal a:hover { color: var(--sea); }

/* Floating WhatsApp + back-to-top ----------------------------------------- */

.btf-fab {
    position: fixed;
    right: clamp(16px, 2.5vw, 28px);
    bottom: calc(clamp(16px, 2.5vw, 28px) + env(safe-area-inset-bottom));
    z-index: 300;
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1FA855;
    color: #fff;
    font-size: 26px;
    box-shadow: 0 10px 30px -8px rgba(31, 168, 85, 0.55);
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease);
}

.btf-fab:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 16px 38px -8px rgba(31, 168, 85, 0.6);
}

#btf-top {
    position: fixed;
    right: clamp(16px, 2.5vw, 28px);
    bottom: calc(clamp(16px, 2.5vw, 28px) + 64px + env(safe-area-inset-bottom));
    z-index: 300;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ink);
    color: var(--on-deep);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, background-color 0.25s var(--ease);
}

#btf-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
#btf-top:hover { background: var(--clay); }

/* 12. PROSE, BLOG, UTILITY ================================================= */

.btf-prose {
    max-width: 74ch;
    font-size: 1.04rem;
    line-height: 1.78;
    color: var(--text-soft);
}

.btf-prose > * + * { margin-top: 1.2em; }

.btf-prose h2,
.btf-prose h3 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--text);
    margin-top: 1.9em;
    text-wrap: balance;
}

.btf-prose h2 { font-size: clamp(1.6rem, 2.7vw, 2.15rem); }
.btf-prose h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); }

.btf-prose a { color: var(--clay); text-decoration: underline; }
.btf-prose a:hover { color: var(--clay-deep); }

.btf-prose ul, .btf-prose ol { padding-left: 1.2em; }
.btf-prose ul li { list-style: disc; margin-bottom: 0.5em; }
.btf-prose ol li { list-style: decimal; margin-bottom: 0.5em; }

.btf-prose blockquote {
    padding-left: 24px;
    border-left: 2px solid var(--clay);
    font-family: var(--font-display);
    font-size: 1.28rem;
    line-height: 1.4;
    color: var(--text);
}

.btf-prose img { border-radius: var(--radius-lg); margin-block: 1.8em; }

.btf-prose code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: var(--sand);
    padding: 2px 6px;
    border-radius: var(--radius);
}

/* Page header for non-routed pages, archives, search. */
.btf-pagehead {
    background: var(--deep);
    color: var(--on-deep);
    padding-block: clamp(44px, 5.5vw, 76px) clamp(48px, 6vw, 84px);
    position: relative;
    overflow: hidden;
}

.btf-pagehead::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to right, rgba(239, 234, 226, 0.045) 0 1px, transparent 1px 12.5%);
}

.btf-pagehead > * { position: relative; z-index: 1; }
.btf-pagehead .btf-h1 { margin-top: 22px; }
.btf-pagehead .btf-lede { margin-top: 20px; color: var(--on-deep-soft); }

/* Post cards */
.btf-posts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.btf-post {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(24px, 2.8vw, 34px);
    background: var(--shell);
    transition: background-color 0.3s var(--ease);
}

.btf-post:hover { background: var(--paper); }

.btf-post__date {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.btf-post__title {
    font-family: var(--font-display);
    font-size: 1.32rem;
    line-height: 1.16;
    letter-spacing: -0.018em;
    text-wrap: balance;
}

.btf-post__text {
    font-size: 0.9375rem;
    line-height: 1.62;
    color: var(--text-soft);
}

.btf-post .btf-link { margin-top: auto; padding-top: 8px; }

.btf-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(36px, 4vw, 56px);
}

.btf-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-soft);
    transition: background-color 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);
}

.btf-pagination .page-numbers:hover,
.btf-pagination .page-numbers.current {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--on-deep);
}

/* Search form */
.btf-searchform {
    display: flex;
    gap: 10px;
    max-width: 480px;
    margin-top: 24px;
}

.btf-searchform input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 13px 18px;
    background: rgba(239, 234, 226, 0.07);
    border: 1px solid var(--line-deep-s);
    border-radius: 999px;
    color: var(--on-deep);
    font-size: 0.9375rem;
}

.btf-searchform input::placeholder { color: var(--on-deep-mute); }

.btf-empty {
    padding: clamp(40px, 5vw, 64px);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--text-soft);
}

/* 13. MOTION =============================================================== */

.btf-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.72s var(--ease-out), transform 0.72s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.btf-reveal.is-in {
    opacity: 1;
    transform: none;
}

@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;
    }

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

/* 14. RESPONSIVE =========================================================== */

@media (max-width: 1100px) {
    .btf-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .btf-hero__grid { grid-template-columns: 1fr; align-items: start; }
    .btf-hero__aside { margin-top: 8px; }
    .btf-rail { grid-auto-flow: row; grid-auto-columns: auto; }
    .btf-rail::before { top: 0; bottom: 0; left: 4px; right: auto; width: 1px; height: auto; }
    .btf-rail__stop { padding: 0 0 28px 30px; }
    .btf-rail__stop::before { top: 4px; left: 0; }
    .btf-rail__stop:last-child { padding-bottom: 0; }
    .btf-rail__stop:last-child::after { display: none; }
    .btf-rail__text { max-width: none; }
}

@media (max-width: 1024px) {
    #btf-header { position: sticky; }
    .btf-nav-primary { display: none; }
    .btf-burger { display: inline-flex; }
    .btf-header__actions .btf-btn { display: none; }

    .btf-head,
    .btf-answer,
    .btf-step {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .btf-head__rail { flex-direction: row; align-items: center; gap: 14px; padding-top: 0; }
    .btf-head__rail::after { flex: 1; }

    .btf-answer__points { padding-top: 0; }
    .btf-step__n { padding-top: 0; }

    .btf-split,
    .btf-contact { grid-template-columns: 1fr; }
    .btf-split__panel,
    .btf-contact__aside,
    .btf-faqg__nav { position: static; }

    .btf-faqg { grid-template-columns: 1fr; }

    .btf-faqg__nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        border-top: 0;
        padding-bottom: 8px;
    }

    .btf-faqg__nav a {
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        padding: 9px 15px;
        font-size: 0.8375rem;
    }

    .btf-faqg__nav a:hover,
    .btf-faqg__nav a.is-active { padding-left: 15px; background: var(--ink); color: var(--on-deep); border-color: var(--ink); }
    .btf-faqg__nav a.is-active .btf-faqg__count { color: var(--on-deep-mute); }

    .btf-notice { grid-template-columns: 1fr; }

    /* Five columns stop fitting here: the brand takes its own row and the
       three link columns plus reach-us share the next one, four across. */
    .btf-footer__main {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: clamp(24px, 3vw, 40px);
        row-gap: clamp(28px, 3vw, 40px);
    }

    .btf-footer__brand { grid-column: 1 / -1; margin-bottom: 8px; }
}

@media (max-width: 860px) {
    .btf-grid--3,
    .btf-grid--4,
    .btf-grid--2,
    .btf-dir,
    .btf-dir--2,
    .btf-dir--3 { grid-template-columns: 1fr; }

    .btf-fill { display: none; }

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


    .btf-tier {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-block: 24px;
    }

    .btf-tier:hover { padding-left: 0; }
    .btf-tier__price { font-size: 1.3rem; }
    .btf-tier__price small { display: inline; margin-left: 8px; }

    .btf-itin__row,
    .btf-compare__row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .btf-itin__head,
    .btf-compare__row--head { display: none; }

    .btf-itin__where::before {
        content: "Location — ";
        font-family: var(--font-mono);
        font-size: 10.5px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-mute);
    }

    .btf-compare__a::before,
    .btf-compare__b::before {
        font-family: var(--font-mono);
        font-size: 10.5px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-mute);
        margin-right: 8px;
    }

    .btf-compare__a::before { content: attr(data-label) " — "; }
    .btf-compare__b::before { content: attr(data-label) " — "; color: var(--clay); }

    .btf-hero__facts { grid-template-columns: repeat(2, 1fr); }
    .btf-hero__fact:nth-child(2n) { border-right: 0; }

    .btf-stats { grid-template-columns: repeat(2, 1fr); }
    .btf-stat:nth-child(2n) { border-right: 0; }

    .btf-utility__group:first-child span:first-child { display: none; }
}

@media (max-width: 600px) {
    body { font-size: 16px; }

    .btf-utility { display: none; }
    .btf-footer__main { grid-template-columns: 1fr; row-gap: 26px; }
    .btf-footer__brand { margin-bottom: 0; }

    .btf-footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
    .btf-hero__facts { grid-template-columns: 1fr; }
    .btf-hero__fact { border-right: 0; border-bottom: 1px solid var(--line-deep); padding-bottom: 16px; }
    .btf-hero__fact:last-child { border-bottom: 0; }
    .btf-stats { grid-template-columns: 1fr; }
    .btf-stat { border-right: 0; border-bottom: 1px solid var(--line-deep); }
    .btf-band--shell .btf-stat,
    .btf-band--sand .btf-stat { border-bottom-color: var(--line); }
    .btf-stat:last-child { border-bottom: 0; }
    .btf-actions .btf-btn,
    .btf-cta__actions .btf-btn { width: 100%; }
    .btf-faq-item__a { padding-right: 0; }

    .btf-hero__leg { grid-template-columns: 18px minmax(0, 1fr); }

    .btf-hero__leg-val {
        grid-column: 2;
        margin-top: 7px;
        white-space: normal;
    }
}

.btf-hide-mobile { display: inline-flex; }

@media (max-width: 1024px) {
    .btf-hide-mobile { display: none; }
}