/*
 * Bali Investment Guide — "Quiet Capital" design system.
 *
 * Hand-authored CSS, no build step.
 *
 * The brief: an independent, broker-operated guide to a high-stakes purchase.
 * So the surface reads like an institutional research note rather than a
 * property listing — basalt and limestone, hairline rules, one warm clay
 * accent used sparingly, and a lot of air. Nothing shouts, because a page
 * that shouts about property returns is exactly what this brand refuses
 * to be.
 *
 * Deliberately unlike the sibling VOA Extension Bali theme in the same
 * install: cool stone instead of warm parchment, clay instead of brass,
 * Playfair Display + Jost instead of Fraunces + Manrope, full-bleed
 * photography instead of document motifs.
 *
 * Contents
 *   1. Tokens
 *   2. Base & utilities
 *   3. Layout: container, bands, grid
 *   4. Typography
 *   5. Buttons, pills, rules
 *   6. Header, nav, drawer
 *   7. Hero
 *   8. Sections: answer, prose, cards, routes, tiers, steps, checklist,
 *      stats, compare, directory, related, faq, faq-grouped, contact,
 *      disclosure, cta
 *   9. Blog, page header, prose content, search, 404
 *  10. Footer, FAB, back-to-top
 *  11. Motion
 */

/* ============================================================== 1. tokens */
:root {
    /* Ground: volcanic basalt through to limestone */
    --basalt:      #11211d;
    --basalt-2:    #17302a;
    --basalt-3:    #1f3d35;
    --jade:        #2a5349;
    --jade-soft:   #3c6b5e;

    /* The single warm accent — Bali terracotta */
    --clay:        #b4603c;
    --clay-light:  #d08a63;
    --clay-deep:   #8f4729;

    /* Light grounds */
    --limestone:   #f5f2ec;
    --limestone-2: #ebe6dc;
    --porcelain:   #fcfbf8;

    /* Ink on light */
    --text:        #16241f;
    --text-soft:   #4a5a53;
    --text-muted:  #7b8b83;

    /* Ink on dark */
    --on-dark:       #eef2ee;
    --on-dark-soft:  #b9c6bf;
    --on-dark-muted: #8a9a92;

    /* Hairlines — this design is built out of them */
    --line:        rgba(22, 36, 31, .14);
    --line-soft:   rgba(22, 36, 31, .08);
    --line-strong: rgba(22, 36, 31, .26);
    --line-dark:       rgba(238, 242, 238, .16);
    --line-dark-soft:  rgba(238, 242, 238, .09);

    --shadow-sm: 0 1px 2px rgba(17, 33, 29, .04);
    --shadow:    0 2px 4px rgba(17, 33, 29, .03), 0 18px 40px -24px rgba(17, 33, 29, .22);
    --shadow-lg: 0 32px 70px -34px rgba(17, 33, 29, .42);

    --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --font-body: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

    --r-xs: 2px;
    --r-sm: 4px;
    --r:    8px;
    --r-lg: 16px;
    --r-pill: 999px;

    --container: 1280px;
    --measure: 68ch;
    --gutter: 20px;
    --header-h: 72px;

    /* Fixed furniture (the WhatsApp button, back-to-top) has to clear the
       home indicator and the rounded corners on a notched phone. */
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);

    /* Faint film grain, so large flat areas are never quite flat */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
}

@media (min-width: 640px)  { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; --header-h: 84px; } }

/* ====================================================== 2. base & utils */
*, *::before, *::after { box-sizing: border-box; }

html {
    /* The dark bands are a design choice, not a dark theme — telling the UA
       the scheme is light keeps form controls and scrollbars consistent. */
    color-scheme: light;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 24px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--limestone);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16.5px;
    font-weight: 400;
    line-height: 1.72;
    letter-spacing: .004em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; padding: 0; }

a, button, summary, [role="tab"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(180, 96, 60, .14);
}
h1, h2, h3, h4, h5, p, figure, dl, dd { margin: 0; }
table { border-collapse: collapse; width: 100%; }

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

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

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

.skip-link {
    position: fixed; left: 1rem; top: -5rem; z-index: 300;
    background: var(--clay); color: #fff;
    padding: .8rem 1.4rem; border-radius: var(--r-pill);
    font-weight: 600; font-size: .85rem; letter-spacing: .04em;
    transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

/* ========================================================= 3. layout */
.big-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: calc(var(--gutter) + var(--safe-l)) calc(var(--gutter) + var(--safe-r));
}
.big-container--narrow { max-width: 900px; }

.big-band { padding: 72px 0; position: relative; }
@media (min-width: 768px)  { .big-band { padding: 104px 0; } }
@media (min-width: 1200px) { .big-band { padding: 128px 0; } }

.big-band--limestone { background: var(--limestone); color: var(--text); }
.big-band--porcelain { background: var(--porcelain); color: var(--text); }
.big-band--stone     { background: var(--limestone-2); color: var(--text); }
.big-band--basalt    { background: var(--basalt); color: var(--on-dark); }
.big-band--jade      { background: var(--jade); color: var(--on-dark); }

/* A hairline at the top of every light band knits the page into one sheet. */
.big-band--limestone + .big-band--limestone,
.big-band--porcelain + .big-band--porcelain { border-top: 1px solid var(--line-soft); }

/* Editorial 12-column grid, used by the asymmetric sections. */
.big-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 28px;
}
@media (max-width: 899px) { .big-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ===================================================== 4. typography */
.big-eyebrow {
    display: flex; align-items: center; gap: .8em;
    font-family: var(--font-body);
    font-size: 11px; font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--clay-deep);
    margin: 0;
}
.big-eyebrow::before {
    content: ''; flex: none;
    width: 26px; height: 1px;
    background: currentColor; opacity: .55;
}
.big-eyebrow--center { justify-content: center; }
.big-band--basalt .big-eyebrow,
.big-band--jade .big-eyebrow { color: var(--clay-light); }

.big-h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.1rem, 5.6vw, 4rem);
    line-height: 1.06;
    letter-spacing: -.022em;
    text-wrap: balance;
}
.big-h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.65rem, 3.4vw, 2.6rem);
    line-height: 1.14;
    letter-spacing: -.018em;
    text-wrap: balance;
}
.big-h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.15rem, 1.7vw, 1.4rem);
    line-height: 1.26;
    letter-spacing: -.012em;
}

/* The accent: one italic phrase per heading, in clay. Used sparingly. */
.big-h1 em, .big-h2 em, .big-wordmark em {
    font-style: italic;
    font-weight: 400;
    color: var(--clay);
}
.big-band--basalt .big-h1 em,
.big-band--basalt .big-h2 em,
.big-band--jade .big-h2 em { color: var(--clay-light); }

.big-lede {
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
    line-height: 1.66;
    color: var(--text-soft);
    max-width: 58ch;
    font-weight: 300;
}
.big-band--basalt .big-lede,
.big-band--jade .big-lede { color: var(--on-dark-soft); }

.big-intro {
    font-size: 1.02rem;
    line-height: 1.74;
    color: var(--text-soft);
    max-width: 62ch;
    margin-top: 18px;
}
.big-band--basalt .big-intro { color: var(--on-dark-soft); }

/* Standard section heading block. Left-aligned by default: this is an
   editorial page, not a landing page, and centred headings read as marketing. */
.big-head { max-width: 64ch; }
.big-head .big-h2 { margin-top: 18px; }
.big-head__note {
    margin-top: 20px;
    font-size: .88rem;
    color: var(--text-muted);
}

/* Small caps meta line (bylines, date stamps, qualifiers). */
.big-meta {
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
}
.big-band--basalt .big-meta { color: var(--on-dark-muted); }

/* A qualifier that sits under a table or figure. */
.big-note {
    margin-top: 24px;
    padding-left: 18px;
    border-left: 2px solid var(--clay);
    font-size: .88rem;
    line-height: 1.66;
    color: var(--text-muted);
    max-width: 72ch;
}
.big-band--basalt .big-note { color: var(--on-dark-muted); border-left-color: var(--clay-light); }

/* ============================================= 5. buttons, pills, rules */
.big-btn {
    display: inline-flex; align-items: center; gap: .6em;
    padding: 15px 28px;
    font-family: var(--font-body);
    font-size: .88rem; font-weight: 500;
    letter-spacing: .06em; text-transform: uppercase;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
    will-change: transform;
    cursor: pointer;
    text-align: center;
}
.big-btn:hover { transform: translateY(-1px); }
.big-btn i { font-size: 1.1em; }

.big-btn--clay { background: var(--clay); color: #fff; }
.big-btn--clay:hover { background: var(--clay-deep); }

.big-btn--ink { background: var(--basalt); color: var(--on-dark); }
.big-btn--ink:hover { background: var(--basalt-3); }

.big-btn--line { border-color: var(--line-strong); color: var(--text); }
.big-btn--line:hover { border-color: var(--text); background: rgba(22, 36, 31, .04); }

.big-btn--line-dark { border-color: var(--line-dark); color: var(--on-dark); }
.big-btn--line-dark:hover { border-color: var(--on-dark); background: rgba(238, 242, 238, .07); }

.big-btn--sm { padding: 11px 20px; font-size: .78rem; }

.big-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Quiet text link with an arrow that slides. */
.big-link {
    display: inline-flex; align-items: center; gap: .5em;
    font-size: .84rem; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--clay-deep);
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
}
.big-link i { transition: transform .22s ease; }
.big-link:hover i { transform: translateX(4px); }
.big-band--basalt .big-link { color: var(--clay-light); }

.big-pill {
    display: inline-flex; align-items: center; gap: .45em;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: .74rem; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-soft);
    background: var(--porcelain);
}

/* Breadcrumb */
.big-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.big-crumbs li { font-size: .76rem; letter-spacing: .05em; color: var(--text-muted); }
.big-crumbs a { color: var(--text-muted); border-bottom: 1px solid transparent; }
.big-crumbs a:hover { color: var(--text); border-bottom-color: var(--line-strong); }
.big-crumbs [aria-current] { color: var(--text-soft); }
.big-hero .big-crumbs li,
.big-hero .big-crumbs a { color: var(--on-dark-muted); }
.big-hero .big-crumbs a:hover { color: var(--on-dark); }

/* ================================================ 6. header & nav */
.big-topbar {
    background: var(--basalt);
    color: var(--on-dark-soft);
    font-size: .76rem;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--line-dark-soft);
}
.big-topbar__inner {
    max-width: var(--container); margin: 0 auto; padding: 9px var(--gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.big-topbar__group { display: flex; align-items: center; gap: 22px; }
.big-topbar a { display: inline-flex; align-items: center; gap: .5em; }
.big-topbar a:hover { color: var(--clay-light); }
.big-topbar span { display: inline-flex; align-items: center; gap: .5em; }
@media (max-width: 899px) { .big-hide-mobile { display: none !important; } }
@media (max-width: 639px) { .big-topbar { display: none; } }

#big-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(252, 251, 248, .88);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line-soft);
    transition: box-shadow .25s ease, background-color .25s ease;
}
#big-header.is-stuck { box-shadow: var(--shadow-sm); background: rgba(252, 251, 248, .96); }

.big-header__inner {
    max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
    min-height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.big-logo { height: 40px; width: auto; object-fit: contain; }
.big-logo--footer { height: 46px; }
/* Footer sits on basalt: a dark logo file is inverted so it reads white. */
.big-logo.is-inverted { filter: brightness(0) invert(1); opacity: .96; }

.big-wordmark {
    font-family: var(--font-display);
    font-size: 1.32rem; font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1;
    white-space: nowrap;
    display: inline-block;
}
.big-wordmark--footer { font-size: 1.6rem; color: var(--on-dark); }
.big-wordmark--footer em { color: var(--clay-light); }
.big-wordmark--drawer { color: var(--on-dark); }
.big-wordmark--drawer em { color: var(--clay-light); }

/* Desktop nav with drop panels */
.big-nav-primary { display: none; }
@media (min-width: 1100px) { .big-nav-primary { display: block; } }

.big-nav { display: flex; align-items: center; gap: 4px; }
.big-nav__item { position: relative; }
.big-nav > li > a,
.big-nav__item > a {
    display: inline-flex; align-items: center; gap: .4em;
    padding: 10px 13px;
    font-size: .83rem; font-weight: 500;
    letter-spacing: .04em;
    color: var(--text-soft);
    border-radius: var(--r-sm);
    transition: color .18s ease, background-color .18s ease;
}
.big-nav__item > a:hover,
.big-nav__item:focus-within > a { color: var(--text); background: rgba(22, 36, 31, .045); }
.big-nav__item > a i { font-size: .8em; opacity: .55; transition: transform .2s ease; }
.big-nav__item:hover > a i { transform: rotate(180deg); }

.big-nav__panel {
    position: absolute; top: calc(100% + 10px); left: 0;
    min-width: 330px;
    background: var(--porcelain);
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.big-nav__item:hover > .big-nav__panel,
.big-nav__item:focus-within > .big-nav__panel { opacity: 1; visibility: visible; transform: none; }
.big-nav__panel a {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 11px 14px;
    font-size: .86rem; line-height: 1.4;
    color: var(--text-soft);
    border-radius: var(--r-sm);
    border-bottom: 1px solid var(--line-soft);
}
.big-nav__panel li:last-child a { border-bottom: 0; }
.big-nav__panel a i { font-size: .85em; opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; color: var(--clay); }
.big-nav__panel a:hover { background: var(--limestone); color: var(--text); }
.big-nav__panel a:hover i { opacity: 1; transform: none; }

/* WP-menu fallback markup gets the same treatment. */
.big-nav .sub-menu {
    position: absolute; top: calc(100% + 10px); left: 0; min-width: 300px;
    background: var(--porcelain); border: 1px solid var(--line-soft);
    border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 10px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.big-nav li:hover > .sub-menu, .big-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.big-nav .sub-menu a { display: block; padding: 10px 14px; font-size: .86rem; border-radius: var(--r-sm); color: var(--text-soft); }
.big-nav .sub-menu a:hover { background: var(--limestone); color: var(--text); }
.big-nav .menu-item-has-children > a::after { content: '\ea5f'; font-family: 'tabler-icons'; font-size: .75em; opacity: .5; margin-left: .4em; }

.big-header__actions { display: flex; align-items: center; gap: 12px; }

.big-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    color: var(--text); font-size: 1.25rem;
}
.big-burger:hover { background: rgba(22, 36, 31, .045); }
@media (min-width: 1100px) { .big-burger { display: none; } }
@media (max-width: 479px) { .big-header__actions .big-btn { display: none; } }

/* Drawer */
#big-drawer { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
#big-drawer.is-open { pointer-events: auto; }
.big-drawer__backdrop {
    position: absolute; inset: 0;
    background: rgba(17, 33, 29, .6);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .3s ease;
}
#big-drawer.is-open .big-drawer__backdrop { opacity: 1; }
.big-drawer__panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(420px, 90vw);
    background: var(--basalt);
    color: var(--on-dark);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .34s cubic-bezier(.32, .72, 0, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: var(--safe-b);
}
#big-drawer.is-open .big-drawer__panel { transform: none; }
.big-drawer__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line-dark-soft);
}
.big-drawer__close {
    width: 40px; height: 40px; font-size: 1.3rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-dark); border-radius: var(--r-sm);
    color: var(--on-dark);
}
.big-drawer__foot { margin-top: auto; padding: 24px; border-top: 1px solid var(--line-dark-soft); display: grid; gap: 12px; }
.big-drawer__foot .big-btn { width: 100%; justify-content: center; }

.big-mnav { padding: 12px 0 24px; }
.big-mnav__link, .big-mnav__group > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 24px;
    font-size: .98rem; font-weight: 500;
    color: var(--on-dark-soft);
    border-bottom: 1px solid var(--line-dark-soft);
    cursor: pointer;
    list-style: none;
}
.big-mnav__group > summary::-webkit-details-marker { display: none; }
.big-mnav__link:hover, .big-mnav__group > summary:hover { color: var(--on-dark); }
.big-mnav__group > summary i { font-size: .9rem; color: var(--clay-light); transition: transform .22s ease; }
.big-mnav__group[open] > summary i { transform: rotate(45deg); }
.big-mnav__group ul { padding: 6px 0 14px; background: rgba(238, 242, 238, .035); }
.big-mnav__group li a {
    display: block; padding: 11px 24px 11px 38px;
    font-size: .88rem; line-height: 1.45; color: var(--on-dark-muted);
}
.big-mnav__group li a:hover { color: var(--clay-light); }
/* WP-menu markup inside the drawer */
.big-mnav .big-nav { display: block; }
.big-mnav .big-nav > li > a { display: block; padding: 15px 24px; color: var(--on-dark-soft); border-bottom: 1px solid var(--line-dark-soft); }
.big-mnav .big-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; background: rgba(238,242,238,.035); border: 0; box-shadow: none; padding: 4px 0 12px; border-radius: 0; }
.big-mnav .big-nav .sub-menu a { padding: 10px 24px 10px 38px; color: var(--on-dark-muted); font-size: .86rem; }

/* ====================================================== 7. hero */
.big-hero {
    position: relative;
    background: var(--basalt);
    color: var(--on-dark);
    isolation: isolate;
    overflow: hidden;
}
.big-hero__bg { position: absolute; inset: 0; z-index: -2; }
.big-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
/* A deliberately heavy scrim: the photograph is atmosphere, the words are
   the product. Graded from the bottom-left so the headline always sits on
   the darkest part of the frame. */
.big-hero__scrim {
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(to top, rgba(17, 33, 29, .96) 0%, rgba(17, 33, 29, .78) 38%, rgba(17, 33, 29, .52) 70%, rgba(17, 33, 29, .62) 100%),
        linear-gradient(to right, rgba(17, 33, 29, .75) 0%, rgba(17, 33, 29, .28) 62%, rgba(17, 33, 29, .45) 100%);
}
.big-hero__grain {
    position: absolute; inset: 0; z-index: -1;
    background-image: var(--grain);
    opacity: .05; mix-blend-mode: overlay; pointer-events: none;
}
/* No photograph? The scrim alone is a usable ground, lifted with a jade wash. */
.big-hero--plain .big-hero__scrim {
    background:
        radial-gradient(120% 90% at 8% 100%, rgba(42, 83, 73, .8) 0%, transparent 62%),
        radial-gradient(90% 80% at 92% 0%, rgba(180, 96, 60, .2) 0%, transparent 60%),
        var(--basalt);
}

.big-hero__inner {
    position: relative;
    padding-top: 68px;
    padding-bottom: 76px;
    display: flex; flex-direction: column;
}
@media (min-width: 768px)  { .big-hero__inner { padding-top: 92px; padding-bottom: 104px; min-height: 70vh; justify-content: flex-end; } }
@media (min-width: 1024px) { .big-hero__inner { padding-top: 112px; padding-bottom: 124px; min-height: 76vh; } }
@media (min-width: 1280px) { .big-hero__inner { min-height: 80vh; } }

.big-hero__body { max-width: 62ch; margin-top: 40px; }
@media (min-width: 900px) { .big-hero__body { max-width: 68%; margin-top: 56px; } }

.big-hero__title { color: var(--on-dark); margin-top: 22px; }
.big-hero__lede { margin-top: 24px; color: var(--on-dark-soft); max-width: 56ch; }
.big-hero__cta { margin-top: 36px; }

/* The standfirst: the source site's honesty line, set small and wide. */
.big-hero__stand {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--line-dark-soft);
    font-size: .82rem;
    line-height: 1.6;
    letter-spacing: .03em;
    color: var(--on-dark-muted);
    max-width: 62ch;
}

/* The overlapping fact bar. Straddles the hero's bottom edge and the band
   below it — the one place in the design where a card breaks the grid. */
.big-facts {
    position: relative;
    z-index: 5;
    margin-top: -46px;
    margin-bottom: 0;
}
.big-facts__inner {
    background: var(--porcelain);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}
@media (min-width: 900px) { .big-facts__inner { grid-template-columns: repeat(4, 1fr); } }
.big-fact {
    padding: 26px 24px;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 900px) { .big-fact { padding: 32px 28px; border-bottom: 0; } }
.big-fact:nth-child(2n) { border-right: 0; }
@media (min-width: 900px) {
    .big-fact:nth-child(2n) { border-right: 1px solid var(--line-soft); }
    .big-fact:last-child { border-right: 0; }
}
.big-fact:nth-last-child(-n+2) { border-bottom: 0; }
.big-fact__value {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2.05rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--basalt);
}
.big-fact__label {
    display: block;
    margin-top: 10px;
    font-size: .76rem;
    line-height: 1.5;
    letter-spacing: .05em;
    color: var(--text-muted);
}

/* Scroll cue, desktop only — a line that breathes. */
.big-hero__cue {
    display: none;
    position: absolute;
    right: calc(var(--gutter) + var(--safe-r));
    bottom: 96px;
    align-items: center; flex-direction: column; gap: 10px;
    font-size: .66rem; letter-spacing: .3em; text-transform: uppercase;
    color: var(--on-dark-muted);
    writing-mode: vertical-rl;
}
@media (min-width: 1200px) { .big-hero__cue { display: flex; } }
.big-hero__cue span::after {
    content: ''; display: block;
    width: 1px; height: 52px; margin: 14px auto 0;
    background: linear-gradient(to bottom, var(--clay-light), transparent);
    animation: big-cue 2.4s ease-in-out infinite;
}
@keyframes big-cue { 0%, 100% { opacity: .3; transform: scaleY(.55); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); transform-origin: top; } }

/* Page header for non-sectioned pages / blog / archive */
.big-pagehead { background: var(--basalt); color: var(--on-dark); padding: 56px 0 60px; }
@media (min-width: 768px) { .big-pagehead { padding: 84px 0 92px; } }
.big-pagehead .big-h1 { color: var(--on-dark); margin-top: 20px; }

/* ============================================= 8a. answer (quick answer) */
.big-answer__grid {
    display: grid; gap: 40px;
    grid-template-columns: 1fr;
}
@media (min-width: 960px) { .big-answer__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 72px; } }

.big-answer__text {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.3vw, 1.78rem);
    font-weight: 400;
    line-height: 1.38;
    letter-spacing: -.012em;
    color: var(--text);
    margin-top: 22px;
    padding-left: 24px;
    border-left: 2px solid var(--clay);
    text-wrap: pretty;
}
.big-band--basalt .big-answer__text { color: var(--on-dark); border-left-color: var(--clay-light); }

.big-answer__after { margin-top: 24px; padding-left: 26px; font-size: .98rem; color: var(--text-soft); max-width: 60ch; }
.big-band--basalt .big-answer__after { color: var(--on-dark-soft); }

.big-answer__points { display: grid; gap: 0; align-content: start; }
.big-answer__point {
    display: flex; gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .94rem; line-height: 1.6;
    color: var(--text-soft);
}
.big-answer__point:first-child { border-top: 1px solid var(--line-soft); }
.big-answer__point i { color: var(--clay); font-size: 1rem; margin-top: .28em; flex: none; }
.big-band--basalt .big-answer__point { color: var(--on-dark-soft); border-color: var(--line-dark-soft); }
.big-band--basalt .big-answer__point:first-child { border-top-color: var(--line-dark-soft); }
.big-band--basalt .big-answer__point i { color: var(--clay-light); }

/* ===================================================== 8b. prose */
.big-prose-grid { display: grid; gap: 44px; grid-template-columns: 1fr; }
@media (min-width: 1000px) {
    .big-prose-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 80px; }
}
.big-prose-body { max-width: var(--measure); }
.big-prose-body > * + * { margin-top: 1.3em; }
.big-prose-body p { font-size: 1.02rem; line-height: 1.78; color: var(--text-soft); }
.big-band--basalt .big-prose-body p { color: var(--on-dark-soft); }
.big-prose-body h3 { margin-top: 2em; color: var(--text); }
.big-band--basalt .big-prose-body h3 { color: var(--on-dark); }
.big-prose-body strong { color: var(--text); font-weight: 600; }
.big-band--basalt .big-prose-body strong { color: var(--on-dark); }

/* Drop cap on the opening paragraph only. Restrained: one accent, no colour
   block, sized to exactly three lines of body text. */
.big-prose-body--cap > p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-display);
    font-size: 3.5em;
    line-height: .82;
    font-weight: 500;
    color: var(--clay);
    padding: .06em .12em 0 0;
}

.big-prose-body ul { margin-top: 1.3em; display: grid; gap: 12px; }
.big-prose-body ul li {
    display: flex; gap: 13px;
    font-size: .98rem; line-height: 1.66; color: var(--text-soft);
}
.big-prose-body ul li::before {
    content: ''; flex: none;
    width: 6px; height: 6px; margin-top: .62em;
    border-radius: 50%; background: var(--clay);
}
.big-band--basalt .big-prose-body ul li { color: var(--on-dark-soft); }

/* Marginalia: the date stamp / source note, sticky beside the prose. */
.big-margin { align-self: start; }
@media (min-width: 1000px) { .big-margin { position: sticky; top: calc(var(--header-h) + 40px); } }
.big-margin__card {
    border-top: 2px solid var(--clay);
    padding-top: 20px;
}
.big-margin__title {
    font-size: .74rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--text);
}
.big-band--basalt .big-margin__title { color: var(--on-dark); }
.big-margin__row { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.big-margin__row dt { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.big-margin__row dd { margin-top: 5px; font-size: .9rem; line-height: 1.5; color: var(--text-soft); }
.big-band--basalt .big-margin__row { border-color: var(--line-dark-soft); }
.big-band--basalt .big-margin__row dd { color: var(--on-dark-soft); }
.big-band--basalt .big-margin__row dt { color: var(--on-dark-muted); }

/* ============================================= 8c. cards (bento mosaic) */
.big-cards { display: grid; gap: 1px; background: var(--line-soft); margin-top: 48px; border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; counter-reset: big-card; }
@media (min-width: 640px) { .big-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .big-cards { grid-template-columns: repeat(3, 1fr); } }
.big-band--basalt .big-cards { background: var(--line-dark-soft); border-color: var(--line-dark-soft); }

.big-card {
    background: var(--porcelain);
    padding: 30px 28px 34px;
    display: flex; flex-direction: column;
    position: relative;
    transition: background-color .24s ease;
    counter-increment: big-card;
}
@media (min-width: 1000px) { .big-card { padding: 38px 34px 42px; } }
.big-card:hover { background: #fff; }
.big-band--basalt .big-card { background: var(--basalt-2); }
.big-band--basalt .big-card:hover { background: var(--basalt-3); }

/* The mosaic: the first tile is given twice the room, so the grid reads as
   an editorial layout rather than a row of equal boxes. */
@media (min-width: 1000px) {
    .big-cards--mosaic > .big-card:first-child { grid-column: span 2; grid-row: span 2; justify-content: space-between; }
    .big-cards--mosaic > .big-card:first-child .big-card__title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
    .big-cards--mosaic > .big-card:first-child .big-card__text { font-size: 1.02rem; max-width: 44ch; }
}
@media (min-width: 640px) and (max-width: 999px) {
    .big-cards--mosaic > .big-card:first-child { grid-column: span 2; }
}

/* Closing the grid. The feature tile takes four cells out of three columns, so
   most card counts would otherwise strand one or two dead cells next to the
   last tile. The last tile is widened by exactly what the row has left instead,
   and is laid out across rather than stacked so the extra width carries copy
   instead of air. Spans are chosen in cards.php, which knows the count.
   .big-card__body stays a plain block everywhere else: making it a flex or grid
   container would stop its children's margins collapsing and loosen the stack
   on all 117 cards. */

@media (min-width: 1000px) {
    .big-cards--d2 > .big-card:last-child { grid-column: span 2; }
    .big-cards--d3 > .big-card:last-child { grid-column: span 3; }
}
@media (min-width: 640px) and (max-width: 999px) {
    .big-cards--t2 > .big-card:last-child { grid-column: span 2; }
}

@media (min-width: 1000px) {
    .big-cards--d2 > .big-card:last-child > .big-card__body,
    .big-cards--d3 > .big-card:last-child > .big-card__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
        column-gap: 56px;
        align-content: start;
    }
    .big-cards--d2 > .big-card:last-child > .big-card__body > :not(.big-card__text),
    .big-cards--d3 > .big-card:last-child > .big-card__body > :not(.big-card__text) {
        grid-column: 1;
    }
    .big-cards--d2 > .big-card:last-child > .big-card__body > .big-card__text,
    .big-cards--d3 > .big-card:last-child > .big-card__body > .big-card__text {
        grid-column: 2;
        grid-row: 1 / span 9;
        margin-top: 0;
        align-self: center;
        max-width: 56ch;
        font-size: 1rem;
    }
    .big-cards--d3 > .big-card:last-child .big-card__title { font-size: clamp(1.25rem, 1.7vw, 1.55rem); }
    /* Grid stops margins collapsing, so restate the gap the icon already owns.
       Without an icon the title keeps its own top margin. */
    .big-cards--d2 > .big-card:last-child .big-card__icon + .big-card__title,
    .big-cards--d3 > .big-card:last-child .big-card__icon + .big-card__title { margin-top: 0; }
}

.big-card__index {
    font-family: var(--font-display);
    font-size: .92rem; font-weight: 500;
    color: var(--clay);
    letter-spacing: .02em;
}
.big-card__index::before { content: '/' counter(big-card, decimal-leading-zero); }
.big-card__icon {
    width: 42px; height: 42px; margin-top: 18px; margin-bottom: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 50%;
    font-size: 1.15rem; color: var(--clay-deep);
}
.big-band--basalt .big-card__icon { border-color: var(--line-dark); color: var(--clay-light); }
.big-card__title { margin-top: 16px; color: var(--text); }
.big-band--basalt .big-card__title { color: var(--on-dark); }
.big-card__text { margin-top: 12px; font-size: .94rem; line-height: 1.66; color: var(--text-soft); }
.big-band--basalt .big-card__text { color: var(--on-dark-soft); }
.big-card__link { margin-top: 20px; }

/* ============================================ 8d. routes (editorial table) */
.big-table-wrap { margin-top: 48px; }
.big-table {
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
}
.big-table thead th {
    text-align: left;
    padding: 0 20px 14px 0;
    font-size: .72rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
}
.big-table tbody td {
    padding: 20px 20px 20px 0;
    vertical-align: top;
    line-height: 1.6;
    color: var(--text-soft);
    border-bottom: 1px solid var(--line-soft);
}
.big-table tbody td:first-child {
    font-weight: 500;
    color: var(--text);
    font-size: .96rem;
}
.big-table tbody tr:hover td { background: rgba(180, 96, 60, .035); }
.big-table thead th:last-child, .big-table tbody td:last-child { padding-right: 0; }
.big-band--basalt .big-table thead th { color: var(--on-dark-muted); border-bottom-color: var(--line-dark); }
.big-band--basalt .big-table tbody td { color: var(--on-dark-soft); border-bottom-color: var(--line-dark-soft); }
.big-band--basalt .big-table tbody td:first-child { color: var(--on-dark); }
.big-band--basalt .big-table tbody tr:hover td { background: rgba(238, 242, 238, .035); }

/* A highlighted column, for "what we recommend" style tables. */
.big-table .is-good { color: var(--jade); font-weight: 500; }
.big-band--basalt .big-table .is-good { color: #8fd0ba; }
.big-table .is-warn { color: var(--clay-deep); font-weight: 500; }
.big-band--basalt .big-table .is-warn { color: var(--clay-light); }

/* Below 760px the table becomes a stack of labelled cards — no horizontal
   scroll, because a reader comparing legal structures should not have to
   swipe to see the column they are reading. */
@media (max-width: 759px) {
    .big-table thead { display: none; }
    .big-table, .big-table tbody, .big-table tr, .big-table td { display: block; width: 100%; }
    .big-table tbody tr {
        border: 1px solid var(--line-soft);
        border-radius: var(--r);
        background: var(--porcelain);
        padding: 6px 18px 12px;
        margin-bottom: 14px;
    }
    .big-table tbody td { border-bottom: 1px solid var(--line-soft); padding: 12px 0; }
    .big-table tbody td:last-child { border-bottom: 0; }
    .big-table tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: .68rem; font-weight: 600;
        letter-spacing: .14em; text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 5px;
    }
    .big-table tbody td:first-child::before { content: attr(data-label); }
    .big-table tbody tr:hover td { background: none; }
    .big-band--basalt .big-table tbody tr { background: var(--basalt-2); border-color: var(--line-dark-soft); }
}

/* ============================================= 8e. tiers (ledger rows) */
.big-tiers { margin-top: 48px; border-top: 1px solid var(--line-strong); }
.big-band--basalt .big-tiers { border-top-color: var(--line-dark); }
.big-tier {
    display: grid;
    gap: 6px 28px;
    grid-template-columns: 1fr;
    padding: 26px 0;
    border-bottom: 1px solid var(--line-soft);
    align-items: baseline;
}
@media (min-width: 860px) {
    .big-tier { grid-template-columns: minmax(0, 3.1fr) minmax(0, 2.2fr) minmax(0, 4fr); padding: 30px 0; }
}
.big-band--basalt .big-tier { border-bottom-color: var(--line-dark-soft); }
.big-tier:hover { background: rgba(180, 96, 60, .03); }

.big-tier__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.big-tier__name-text {
    font-family: var(--font-display);
    font-size: 1.14rem; font-weight: 500;
    letter-spacing: -.01em;
    color: var(--text);
}
.big-band--basalt .big-tier__name-text { color: var(--on-dark); }
.big-tier__code {
    font-size: .68rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--line); border-radius: var(--r-xs);
    padding: 3px 7px;
}
.big-tier__badge {
    font-size: .66rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    background: var(--clay); color: #fff;
    border-radius: var(--r-xs); padding: 4px 8px;
}
.big-tier__figure {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.1vw, 1.7rem);
    font-weight: 500; line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--clay-deep);
    font-variant-numeric: tabular-nums;
}
.big-band--basalt .big-tier__figure { color: var(--clay-light); }
.big-tier__figure small {
    display: block; margin-top: 5px;
    font-family: var(--font-body);
    font-size: .74rem; font-weight: 400;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-muted);
}
.big-band--basalt .big-tier__figure small { color: var(--on-dark-muted); }
.big-tier__text { font-size: .94rem; line-height: 1.64; color: var(--text-soft); }
.big-band--basalt .big-tier__text { color: var(--on-dark-soft); }

/* ======================================== 8f. steps (horizontal stepper) */
.big-steps {
    margin-top: 52px;
    display: grid; gap: 1px;
    background: var(--line-soft);
    border-top: 2px solid var(--clay);
}
@media (min-width: 760px) { .big-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .big-steps { grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; } }
.big-band--basalt .big-steps { background: var(--line-dark-soft); }

.big-step {
    background: var(--limestone);
    padding: 28px 26px 32px;
    counter-increment: big-step;
    display: flex; flex-direction: column;
}
.big-band--basalt .big-step { background: var(--basalt); }
.big-band--porcelain .big-step, .big-band--stone .big-step { background: var(--porcelain); }
.big-step__num {
    font-family: var(--font-display);
    font-size: 1.9rem; font-weight: 500; line-height: 1;
    color: var(--clay);
    letter-spacing: -.02em;
}
.big-step__num::before { content: counter(big-step, decimal-leading-zero); }
.big-step__window {
    display: inline-block; margin-top: 16px;
    font-size: .7rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-muted);
}
.big-band--basalt .big-step__window { color: var(--on-dark-muted); }
.big-step__title { margin-top: 10px; font-size: 1.06rem; color: var(--text); }
.big-band--basalt .big-step__title { color: var(--on-dark); }
.big-step__text { margin-top: 12px; font-size: .92rem; line-height: 1.64; color: var(--text-soft); }
.big-band--basalt .big-step__text { color: var(--on-dark-soft); }
.big-step__lead { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.big-band--basalt .big-step__lead { border-top-color: var(--line-dark-soft); color: var(--on-dark-muted); }

/* ============================================ 8g. checklist (two columns) */
.big-checklist { display: grid; gap: 40px; margin-top: 48px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .big-checklist { grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; } }
.big-band--basalt .big-checklist { background: var(--line-dark-soft); border-color: var(--line-dark-soft); }

.big-checklist__col { background: var(--porcelain); padding: 32px 28px 36px; }
@media (max-width: 899px) { .big-checklist__col { border: 1px solid var(--line-soft); border-radius: var(--r); } }
@media (min-width: 1000px) { .big-checklist__col { padding: 40px 36px 44px; } }
.big-band--basalt .big-checklist__col { background: var(--basalt-2); }

.big-checklist__head { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.big-band--basalt .big-checklist__head { border-bottom-color: var(--line-dark); }
.big-checklist__head i { font-size: 1.15rem; }
.big-checklist__title { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.big-band--basalt .big-checklist__title { color: var(--on-dark); }
.big-checklist__col--yes .big-checklist__head i { color: var(--jade); }
.big-checklist__col--no  .big-checklist__head i { color: var(--clay); }
.big-band--basalt .big-checklist__col--yes .big-checklist__head i { color: #8fd0ba; }

.big-checklist__items { display: grid; }
.big-checklist__item {
    display: flex; gap: 14px;
    padding: 17px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .94rem; line-height: 1.62;
    color: var(--text-soft);
}
.big-checklist__item:last-child { border-bottom: 0; padding-bottom: 0; }
.big-checklist__item i { flex: none; margin-top: .3em; font-size: .95rem; }
.big-checklist__col--yes .big-checklist__item i { color: var(--jade); }
.big-checklist__col--no  .big-checklist__item i { color: var(--clay); }
.big-band--basalt .big-checklist__item { color: var(--on-dark-soft); border-bottom-color: var(--line-dark-soft); }
.big-band--basalt .big-checklist__col--yes .big-checklist__item i { color: #8fd0ba; }
.big-checklist__item strong { color: var(--text); font-weight: 600; }
.big-band--basalt .big-checklist__item strong { color: var(--on-dark); }

/* ============================================ 8h. stats (ticker band) */
.big-stats {
    margin-top: 48px;
    display: grid; gap: 1px;
    background: var(--line-dark-soft);
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--line-dark-soft);
    border-bottom: 1px solid var(--line-dark-soft);
}
@media (min-width: 900px) { .big-stats { grid-template-columns: repeat(4, 1fr); } }
.big-band--limestone .big-stats, .big-band--porcelain .big-stats, .big-band--stone .big-stats { background: var(--line-soft); border-color: var(--line-soft); }

.big-stat { padding: 30px 24px; background: var(--basalt); }
.big-band--limestone .big-stat { background: var(--limestone); }
.big-band--porcelain .big-stat { background: var(--porcelain); }
.big-band--stone .big-stat { background: var(--limestone-2); }
@media (min-width: 900px) { .big-stat { padding: 40px 30px; } }
.big-stat__value {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500; line-height: 1;
    letter-spacing: -.028em;
    color: var(--on-dark);
    font-variant-numeric: tabular-nums;
}
.big-band--limestone .big-stat__value, .big-band--porcelain .big-stat__value, .big-band--stone .big-stat__value { color: var(--basalt); }
.big-stat__value span { color: var(--clay-light); }
.big-band--limestone .big-stat__value span, .big-band--porcelain .big-stat__value span, .big-band--stone .big-stat__value span { color: var(--clay); }
.big-stat__label {
    margin-top: 14px;
    font-size: .8rem; line-height: 1.55;
    letter-spacing: .04em;
    color: var(--on-dark-muted);
}
.big-band--limestone .big-stat__label, .big-band--porcelain .big-stat__label, .big-band--stone .big-stat__label { color: var(--text-muted); }

/* ============================================= 8i. compare (two columns) */
.big-compare { margin-top: 48px; display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 860px) { .big-compare { grid-template-columns: 1fr 1fr; } }
.big-band--basalt .big-compare { background: var(--line-dark-soft); border-color: var(--line-dark-soft); }
.big-compare__col { background: var(--porcelain); padding: 32px 28px 36px; }
.big-band--basalt .big-compare__col { background: var(--basalt-2); }
.big-compare__col--b { background: #fff; }
.big-band--basalt .big-compare__col--b { background: var(--basalt-3); }
.big-compare__title {
    font-family: var(--font-display);
    font-size: 1.2rem; font-weight: 500;
    color: var(--text);
    padding-bottom: 18px; margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
}
.big-band--basalt .big-compare__title { color: var(--on-dark); border-bottom-color: var(--line-dark); }
.big-compare__row {
    display: flex; gap: 13px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: .94rem; line-height: 1.62; color: var(--text-soft);
}
.big-compare__row:last-child { border-bottom: 0; }
.big-compare__row i { flex: none; margin-top: .3em; color: var(--clay); font-size: .92rem; }
.big-compare__col--b .big-compare__row i { color: var(--jade); }
.big-band--basalt .big-compare__row { color: var(--on-dark-soft); border-bottom-color: var(--line-dark-soft); }
.big-band--basalt .big-compare__col--b .big-compare__row i { color: #8fd0ba; }

/* ====================================== 8j. directory & related (index) */
.big-directory { margin-top: 48px; border-top: 1px solid var(--line-strong); }
.big-band--basalt .big-directory { border-top-color: var(--line-dark); }
.big-dir-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line-soft);
    counter-increment: big-dir;
    transition: padding-left .24s ease, background-color .24s ease;
}
.big-band--basalt .big-dir-item { border-bottom-color: var(--line-dark-soft); }
.big-dir-item:hover { padding-left: 14px; background: rgba(180, 96, 60, .035); }
.big-dir-item__num {
    font-family: var(--font-display);
    font-size: .88rem; color: var(--clay); font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.big-dir-item__num::before { content: counter(big-dir, decimal-leading-zero); }
.big-dir-item__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; color: var(--text); line-height: 1.3; }
.big-band--basalt .big-dir-item__title { color: var(--on-dark); }
.big-dir-item__text { display: block; margin-top: 7px; font-family: var(--font-body); font-size: .9rem; line-height: 1.55; color: var(--text-soft); max-width: 76ch; }
.big-band--basalt .big-dir-item__text { color: var(--on-dark-soft); }
.big-dir-item__go { color: var(--text-muted); font-size: 1.05rem; transition: transform .24s ease, color .24s ease; }
.big-dir-item:hover .big-dir-item__go { transform: translateX(4px); color: var(--clay); }
@media (max-width: 639px) {
    .big-dir-item { grid-template-columns: auto 1fr; gap: 14px; }
    .big-dir-item__go { display: none; }
}

.big-related { display: grid; gap: 1px; margin-top: 48px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 640px) { .big-related { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .big-related { grid-template-columns: repeat(3, 1fr); } }
.big-band--basalt .big-related { background: var(--line-dark-soft); border-color: var(--line-dark-soft); }
.big-rel-item { background: var(--porcelain); padding: 28px 26px 30px; display: flex; flex-direction: column; transition: background-color .22s ease; }
.big-rel-item:hover { background: #fff; }
.big-band--basalt .big-rel-item { background: var(--basalt-2); }
.big-band--basalt .big-rel-item:hover { background: var(--basalt-3); }
.big-rel-item > i { font-size: 1.15rem; color: var(--clay-deep); }
.big-band--basalt .big-rel-item > i { color: var(--clay-light); }
.big-rel-item__title { margin-top: 16px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; line-height: 1.32; color: var(--text); }
.big-band--basalt .big-rel-item__title { color: var(--on-dark); }
.big-rel-item__text { margin-top: 10px; font-size: .89rem; line-height: 1.6; color: var(--text-soft); }
.big-band--basalt .big-rel-item__text { color: var(--on-dark-soft); }
.big-rel-item__go { margin-top: auto; padding-top: 18px; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--clay-deep); display: inline-flex; align-items: center; gap: .5em; }
.big-rel-item__go i { transition: transform .22s ease; }
.big-rel-item:hover .big-rel-item__go i { transform: translateX(4px); }
.big-band--basalt .big-rel-item__go { color: var(--clay-light); }

/* ===================================================== 8k. faq */
.big-faq { margin-top: 44px; border-top: 1px solid var(--line-strong); max-width: 920px; }
.big-band--basalt .big-faq { border-top-color: var(--line-dark); }
.big-faq-item { border-bottom: 1px solid var(--line-soft); }
.big-band--basalt .big-faq-item { border-bottom-color: var(--line-dark-soft); }
.big-faq-item__q {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 22px;
    padding: 22px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: 1.06rem; font-weight: 500; line-height: 1.4;
    color: var(--text);
    transition: color .2s ease;
}
.big-faq-item__q::-webkit-details-marker { display: none; }
.big-faq-item__q:hover { color: var(--clay-deep); }
.big-band--basalt .big-faq-item__q { color: var(--on-dark); }
.big-band--basalt .big-faq-item__q:hover { color: var(--clay-light); }
.big-faq-item__q i { flex: none; font-size: 1rem; color: var(--clay); margin-top: .25em; transition: transform .26s ease; }
.big-faq-item[open] .big-faq-item__q i { transform: rotate(45deg); }
.big-faq-item__a {
    padding: 0 60px 26px 0;
    font-size: .98rem; line-height: 1.76;
    color: var(--text-soft);
    max-width: 76ch;
    animation: big-reveal .3s ease;
}
.big-band--basalt .big-faq-item__a { color: var(--on-dark-soft); }
@keyframes big-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .big-faq-item__a { animation: none; } }

/* Grouped FAQ: category pills over panels — the layout reference's pattern,
   which keeps a 60-question hub navigable without a sidebar. */
.big-faqc { margin-top: 44px; }
.big-faqc__nav {
    display: flex; flex-wrap: wrap; gap: 10px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line-soft);
}
.big-band--basalt .big-faqc__nav { border-bottom-color: var(--line-dark-soft); }
.big-faqc__pill {
    display: inline-flex; align-items: center; gap: .55em;
    padding: 11px 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--porcelain);
    font-size: .84rem; font-weight: 500;
    letter-spacing: .03em;
    color: var(--text-soft);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.big-faqc__pill:hover { border-color: var(--text); color: var(--text); }
.big-faqc__pill i { font-size: .95em; opacity: .7; }
.big-faqc__pill-count {
    font-size: .7rem; font-variant-numeric: tabular-nums;
    padding: 1px 7px; border-radius: var(--r-pill);
    background: var(--limestone-2); color: var(--text-muted);
}
.big-faqc__pill.is-active {
    background: var(--basalt); border-color: var(--basalt); color: var(--on-dark);
}
.big-faqc__pill.is-active i { opacity: 1; color: var(--clay-light); }
.big-faqc__pill.is-active .big-faqc__pill-count { background: rgba(238, 242, 238, .16); color: var(--on-dark); }
.big-band--basalt .big-faqc__pill { background: var(--basalt-2); border-color: var(--line-dark); color: var(--on-dark-soft); }
.big-band--basalt .big-faqc__pill.is-active { background: var(--clay); border-color: var(--clay); color: #fff; }

/* Every panel is open by default, so with JavaScript off the whole FAQ is
   still readable. app.js adds .is-tabbed once it has wired the category row
   up as a tablist, and only then do the panels start switching. */
.big-faqc__panel { display: block; padding-top: 10px; }
.big-faqc.is-tabbed .big-faqc__panel { display: none; }
.big-faqc.is-tabbed .big-faqc__panel.is-active { display: block; }
.big-faqc:not(.is-tabbed) .big-faqc__nav { display: none; }
.big-faqc__panel-title {
    display: flex; align-items: center; gap: 12px;
    margin-top: 28px;
    font-size: .76rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--text-muted);
}
.big-faqc__panel-title i { color: var(--clay); font-size: 1rem; }
.big-faqc__panel .big-faq { margin-top: 18px; }

/* ===================================================== 8l. contact */
.big-contact { display: grid; gap: 40px; margin-top: 48px; grid-template-columns: 1fr; }
@media (min-width: 960px) { .big-contact { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; } }

.big-contact__methods { display: grid; border-top: 1px solid var(--line-strong); }
.big-band--basalt .big-contact__methods { border-top-color: var(--line-dark); }
.big-method {
    display: grid; grid-template-columns: auto 1fr; gap: 20px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line-soft);
}
.big-band--basalt .big-method { border-bottom-color: var(--line-dark-soft); }
.big-method__icon {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 50%;
    font-size: 1.15rem; color: var(--clay-deep);
}
.big-band--basalt .big-method__icon { border-color: var(--line-dark); color: var(--clay-light); }
.big-method__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; color: var(--text); }
.big-band--basalt .big-method__title { color: var(--on-dark); }
.big-method__text { margin-top: 8px; font-size: .93rem; line-height: 1.62; color: var(--text-soft); }
.big-band--basalt .big-method__text { color: var(--on-dark-soft); }
.big-method__action { margin-top: 14px; }

.big-contact__panel {
    background: var(--basalt);
    color: var(--on-dark);
    border-radius: var(--r-lg);
    padding: 32px 28px 36px;
    align-self: start;
}
@media (min-width: 1000px) { .big-contact__panel { padding: 40px 36px 44px; } }
.big-contact__panel h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--on-dark); }
.big-contact__hours { margin-top: 20px; }
.big-contact__hours-row { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line-dark-soft); font-size: .9rem; }
.big-contact__hours-row dt { color: var(--on-dark-muted); }
.big-contact__hours-row dd { color: var(--on-dark); font-variant-numeric: tabular-nums; text-align: right; }
.big-contact__address { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line-dark-soft); font-size: .9rem; line-height: 1.66; color: var(--on-dark-soft); }
.big-contact__address a { display: inline-flex; align-items: center; gap: .5em; margin-top: 12px; color: var(--clay-light); font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; }

/* ===================================================== 8m. disclosure */
/* The YMYL band. Quiet by design — it has to be legible and findable, but it
   is not a selling point, so it gets no colour, no card and no shadow. */
.big-disclosure { background: var(--limestone-2); color: var(--text-soft); padding: 48px 0; }
@media (min-width: 768px) { .big-disclosure { padding: 60px 0; } }
.big-disclosure__inner { display: grid; gap: 24px; grid-template-columns: 1fr; max-width: 1000px; }
@media (min-width: 860px) { .big-disclosure__inner { grid-template-columns: auto 1fr; gap: 32px; } }
.big-disclosure__mark { font-size: 1.5rem; color: var(--clay-deep); line-height: 1; }
.big-disclosure__title { font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.big-disclosure__body { margin-top: 14px; font-size: .9rem; line-height: 1.72; max-width: 82ch; }
.big-disclosure__body + .big-disclosure__body { margin-top: 12px; }
.big-disclosure__stamp { margin-top: 18px; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }

/* ===================================================== 8n. cta (image rail) */
.big-cta { background: var(--basalt); color: var(--on-dark); position: relative; overflow: hidden; }
.big-cta__grid { display: grid; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 960px) { .big-cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); } }
.big-cta__body { padding: 72px var(--gutter) 76px; max-width: var(--container); margin-left: auto; width: 100%; }
@media (min-width: 960px) { .big-cta__body { padding: 104px 72px 108px var(--gutter); } }
@media (min-width: 1500px) { .big-cta__body { padding-left: calc((100vw - var(--container)) / 2 + var(--gutter)); } }
.big-cta__heading { color: var(--on-dark); margin-top: 20px; max-width: 24ch; }
.big-cta__body > p { margin-top: 22px; }
.big-cta__actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; }
.big-cta__fine { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line-dark-soft); font-size: .8rem; line-height: 1.6; color: var(--on-dark-muted); max-width: 54ch; }

.big-cta__rail { position: relative; min-height: 280px; }
@media (max-width: 959px) { .big-cta__rail { min-height: 240px; order: -1; } }
.big-cta__rail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.big-cta__rail::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(17, 33, 29, .8), rgba(17, 33, 29, .1));
}
@media (max-width: 959px) { .big-cta__rail::after { background: linear-gradient(to bottom, rgba(17, 33, 29, .35), rgba(17, 33, 29, .85)); } }
/* Without a photograph the rail becomes a jade field with a quiet mark. */
.big-cta__rail--plain {
    background:
        radial-gradient(90% 80% at 20% 20%, rgba(42, 83, 73, .95) 0%, transparent 70%),
        var(--basalt-2);
    display: flex; align-items: center; justify-content: center;
}
.big-cta__rail--plain::after { display: none; }
.big-cta__rail-mark { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 500; color: rgba(238, 242, 238, .09); letter-spacing: -.03em; line-height: 1; text-align: center; padding: 24px; }

/* ================================================ 9. blog & prose content */
.big-posts { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 640px) { .big-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .big-posts { grid-template-columns: repeat(3, 1fr); } }
.big-post { background: var(--porcelain); display: flex; flex-direction: column; transition: background-color .22s ease; }
.big-post:hover { background: #fff; }
.big-post__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--limestone-2); }
.big-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.big-post:hover .big-post__media img { transform: scale(1.04); }
.big-post__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.big-post__date { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.big-post__title { margin-top: 12px; font-family: var(--font-display); font-size: 1.14rem; font-weight: 500; line-height: 1.32; color: var(--text); }
.big-post__text { margin-top: 11px; font-size: .9rem; line-height: 1.62; color: var(--text-soft); }
.big-post__go { margin-top: auto; padding-top: 20px; }

.big-pagination { margin-top: 52px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.big-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    font-size: .88rem; color: var(--text-soft);
}
.big-pagination .page-numbers:hover { border-color: var(--text); color: var(--text); }
.big-pagination .page-numbers.current { background: var(--basalt); border-color: var(--basalt); color: var(--on-dark); }

/* WordPress editor content */
.big-content { max-width: var(--measure); }
.big-content > * + * { margin-top: 1.3em; }
.big-content p, .big-content li { font-size: 1.02rem; line-height: 1.78; color: var(--text-soft); }
.big-content h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.45rem, 2.6vw, 1.95rem); line-height: 1.2; letter-spacing: -.016em; color: var(--text); margin-top: 2.2em; }
.big-content h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.28rem; line-height: 1.28; color: var(--text); margin-top: 1.9em; }
.big-content h4 { font-size: 1.06rem; font-weight: 600; color: var(--text); margin-top: 1.7em; }
.big-content a { color: var(--clay-deep); border-bottom: 1px solid rgba(180, 96, 60, .35); }
.big-content a:hover { border-bottom-color: var(--clay); }
.big-content strong { color: var(--text); font-weight: 600; }
.big-content ul, .big-content ol { display: grid; gap: 11px; padding-left: 0; }
.big-content ul li { display: flex; gap: 13px; }
.big-content ul li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: .62em; border-radius: 50%; background: var(--clay); }
.big-content ol { counter-reset: big-ol; }
.big-content ol li { display: flex; gap: 14px; counter-increment: big-ol; }
.big-content ol li::before { content: counter(big-ol) '.'; flex: none; font-family: var(--font-display); color: var(--clay); font-weight: 500; }
.big-content blockquote {
    margin: 2em 0; padding: 4px 0 4px 26px;
    border-left: 2px solid var(--clay);
    font-family: var(--font-display); font-size: 1.22rem; font-style: italic;
    line-height: 1.5; color: var(--text);
}
.big-content blockquote p { font-size: inherit; color: inherit; line-height: inherit; }
.big-content img, .big-content figure { border-radius: var(--r); margin-top: 2em; }
.big-content figcaption { margin-top: 10px; font-size: .82rem; color: var(--text-muted); }
.big-content table { margin-top: 2em; font-size: .92rem; }
.big-content th { text-align: left; padding: 0 16px 12px 0; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--line-strong); }
.big-content td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.big-content hr { border: 0; border-top: 1px solid var(--line); margin: 3em 0; }

/* Search form */
.big-search-form { display: flex; gap: 10px; margin-top: 28px; max-width: 520px; }
.big-search-form input {
    flex: 1; min-width: 0;
    padding: 14px 18px;
    font: inherit; font-size: .95rem;
    background: rgba(238, 242, 238, .08);
    border: 1px solid var(--line-dark);
    border-radius: var(--r-pill);
    color: var(--on-dark);
}
.big-search-form input::placeholder { color: var(--on-dark-muted); }
.big-search-form button {
    width: 50px; height: 50px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--clay); color: #fff;
    border-radius: 50%; font-size: 1.1rem;
}
.big-search-form button:hover { background: var(--clay-deep); }

.big-empty { max-width: 56ch; font-size: 1.02rem; line-height: 1.74; color: var(--text-soft); }

/* 404 */
.big-404 { text-align: center; padding: 110px 0 120px; }
.big-404 .big-eyebrow { justify-content: center; }
.big-404 .big-h1 { margin-top: 20px; }
.big-404 .big-lede { margin: 20px auto 0; }
.big-404 .big-cta-row { justify-content: center; margin-top: 36px; }

/* ===================================================== 10. footer */
.big-footer { background: var(--basalt); color: var(--on-dark-soft); position: relative; }
.big-footer::before {
    content: ''; position: absolute; inset: 0;
    background-image: var(--grain); opacity: .035; pointer-events: none;
}
.big-footer__top { padding: 72px 0 56px; position: relative; }
@media (min-width: 768px) { .big-footer__top { padding: 96px 0 64px; } }
.big-footer__grid { display: grid; gap: 44px; grid-template-columns: 1fr; }
@media (min-width: 760px)  { .big-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; } }
@media (min-width: 1060px) { .big-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 56px 48px; } }

.big-footer__brand p { margin-top: 22px; font-size: .92rem; line-height: 1.72; color: var(--on-dark-soft); max-width: 42ch; }
.big-footer__badge {
    display: inline-flex; align-items: center; gap: .6em;
    margin-top: 24px; padding: 8px 16px;
    border: 1px solid var(--line-dark); border-radius: var(--r-pill);
    font-size: .76rem; letter-spacing: .05em; color: var(--on-dark-muted);
}
.big-footer__badge i { color: var(--clay-light); }

.big-footer h2 {
    font-size: .74rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--on-dark);
    padding-bottom: 18px; margin-bottom: 4px;
    border-bottom: 1px solid var(--line-dark-soft);
}
.big-footer__links li { border-bottom: 1px solid var(--line-dark-soft); }
.big-footer__links li:last-child { border-bottom: 0; }
.big-footer__links a {
    display: block; padding: 11px 0;
    font-size: .88rem; line-height: 1.5;
    color: var(--on-dark-soft);
    transition: color .18s ease, padding-left .18s ease;
}
.big-footer__links a:hover { color: var(--clay-light); padding-left: 6px; }

.big-footer__contact { display: grid; gap: 4px; margin-top: 4px; }
.big-fcontact {
    display: grid; grid-template-columns: auto 1fr; gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line-dark-soft);
}
.big-fcontact:last-child { border-bottom: 0; }
.big-fcontact > i { font-size: 1.05rem; color: var(--clay-light); margin-top: .18em; }
.big-fcontact strong { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 5px; }
.big-fcontact a, .big-fcontact span { font-size: .9rem; line-height: 1.6; color: var(--on-dark); }
.big-fcontact a:hover { color: var(--clay-light); }

/* Sister-brand row */
.big-footer__network { padding: 28px 0; border-top: 1px solid var(--line-dark-soft); position: relative; }
.big-footer__network-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.big-footer__network span {
    font-size: .7rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--on-dark-muted);
    margin-right: 6px;
}
.big-footer__network a { font-size: .84rem; color: var(--on-dark-soft); border-bottom: 1px solid transparent; }
.big-footer__network a:hover { color: var(--clay-light); border-bottom-color: currentColor; }

.big-footer__bottom {
    padding: 24px 0 calc(32px + var(--safe-b));
    border-top: 1px solid var(--line-dark-soft);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
    position: relative;
}
.big-footer__bottom p { font-size: .8rem; line-height: 1.66; color: var(--on-dark-muted); max-width: 86ch; }
.big-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.big-footer__legal a { font-size: .8rem; color: var(--on-dark-muted); }
.big-footer__legal a:hover { color: var(--clay-light); }

.big-footer__refs { padding-bottom: 32px; position: relative; }
.big-footer__refs-inner { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.big-footer__refs span { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.big-footer__refs a { font-size: .78rem; color: var(--on-dark-muted); border-bottom: 1px dotted var(--line-dark); }
.big-footer__refs a:hover { color: var(--on-dark-soft); }

/* Floating WhatsApp + back to top */
.big-fab {
    position: fixed;
    right: calc(18px + var(--safe-r));
    bottom: calc(18px + var(--safe-b));
    z-index: 90;
    display: inline-flex; align-items: center; gap: .6em;
    padding: 14px 20px;
    background: var(--clay); color: #fff;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-lg);
    font-size: .84rem; font-weight: 500; letter-spacing: .04em;
    transition: background-color .22s ease, transform .22s ease;
}
.big-fab:hover { background: var(--clay-deep); transform: translateY(-2px); }
.big-fab i { font-size: 1.25rem; }
@media (max-width: 639px) {
    .big-fab {
        right: calc(14px + var(--safe-r));
        bottom: calc(14px + var(--safe-b));
        padding: 0; width: 54px; height: 54px; justify-content: center;
    }
    .big-fab__label { display: none; }
}

#big-top {
    position: fixed;
    left: calc(18px + var(--safe-l));
    bottom: calc(18px + var(--safe-b));
    z-index: 90;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--basalt); color: var(--on-dark);
    border: 1px solid var(--line-dark);
    border-radius: 50%;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
#big-top.is-visible { opacity: 1; visibility: visible; transform: none; }
#big-top:hover { background: var(--basalt-3); }
@media (max-width: 639px) { #big-top { display: none; } }

/* ===================================================== 11. motion */
/* Scroll reveal is opt-in: the hiding only happens once the inline head
   script has confirmed JavaScript is running, so if app.js fails to load,
   is blocked, or errors, every section is simply visible. Content must never
   depend on JavaScript to be readable. */
.big-reveal { opacity: 1; transform: none; }

.big-js .big-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease-out, transform .6s cubic-bezier(.25, .8, .25, 1);
    will-change: opacity, transform;
}
.big-js .big-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .big-reveal, .big-js .big-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .big-hero__cue span::after { animation: none; }
    .big-btn:hover, .big-fab:hover { transform: none; }
    .big-post:hover .big-post__media img { transform: none; }
}

@media print {
    #big-header, .big-topbar, #big-drawer, .big-fab, #big-top, .big-footer__network { display: none; }
    .big-band { padding: 24px 0; background: #fff !important; color: #000 !important; }
    .big-reveal { opacity: 1 !important; transform: none !important; }
}