/* ==========================================================================
   MONEY KINA PGK — "Pacific Ledger" design system
   Editorial finance identity: ivory paper, jungle-green ink, gold hairlines
   and a tapa-cloth chevron motif. Hand-built, no CSS framework.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
    /* Surfaces */
    --paper:        #f6f2e9;
    --paper-2:      #efe9dc;
    --surface:      #fffdf8;
    --surface-2:    #faf7f0;

    /* Ink */
    --ink:          #12211a;
    --ink-soft:     #55655c;
    --ink-faint:    #8b978f;

    /* Brand green */
    --green-950:    #031c12;
    --green-900:    #04281a;
    --green-800:    #063e24;
    --green:        #0a5c36;
    --green-600:    #12784a;
    --green-100:    #dfeae3;

    /* Brand gold */
    --gold:         #c8a951;
    --gold-400:     #d7bd76;
    --gold-300:     #e4d19a;
    --gold-100:     #f2e8cd;
    --gold-50:      #faf4e4;

    /* Signal */
    --ok:           #2f8f5b;
    --ok-bg:        #e8f4ec;
    --warn:         #a9781a;
    --warn-bg:      #fbf2dd;
    --alert:        #b8452f;
    --alert-bg:     #fbeae6;

    /* Lines */
    --line:         rgba(18, 33, 26, .13);
    --line-soft:    rgba(18, 33, 26, .07);
    --line-strong:  rgba(18, 33, 26, .24);
    --line-gold:    rgba(200, 169, 81, .38);
    --line-light:   rgba(255, 253, 248, .16);

    /* Radii — restrained and deliberate */
    --r-xs: 3px;
    --r-sm: 6px;
    --r:    10px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-pill: 999px;

    /* Elevation — green-tinted, never grey mush */
    --sh-1: 0 1px 2px rgba(4, 40, 26, .05);
    --sh-2: 0 2px 6px rgba(4, 40, 26, .06), 0 10px 24px -12px rgba(4, 40, 26, .14);
    --sh-3: 0 4px 12px rgba(4, 40, 26, .07), 0 24px 48px -20px rgba(4, 40, 26, .22);
    --sh-gold: 0 8px 24px -10px rgba(200, 169, 81, .55);

    /* Type */
    --display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --body:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Rhythm */
    --gut:      clamp(1.25rem, 4vw, 2rem);
    --section:  clamp(4.5rem, 9vw, 7.5rem);
    --wrap:     1200px;

    /* Motion */
    --ease:     cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    /* Tapa-cloth chevron — the signature texture of the brand */
    --tapa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%23c8a951' stroke-width='1' stroke-opacity='.55'%3E%3Cpath d='M0 24 12 0 24 24 36 0 48 24'/%3E%3Cpath d='M0 12 12 -12 24 12 36 -12 48 12'/%3E%3Cpath d='M0 36 12 12 24 36 36 12 48 36'/%3E%3C/g%3E%3C/svg%3E");
    --tapa-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='.55'%3E%3Cpath d='M0 24 12 0 24 24 36 0 48 24'/%3E%3Cpath d='M0 12 12 -12 24 12 36 -12 48 12'/%3E%3Cpath d='M0 36 12 12 24 36 36 12 48 36'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; }

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}
::selection { background: var(--gold-300); color: var(--green-900); }

.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: 200;
    background: var(--green-900);
    color: #fff;
    padding: .7rem 1.2rem;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform .25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

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

/* ---------- 3. Typography ------------------------------------------------ */
.display, h1, h2 {
    font-family: var(--display);
    font-weight: 400;
    font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 96;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--green-900);
    text-wrap: balance;
}

h1, .d-1 { font-size: clamp(2.4rem, 6vw, 4.25rem); }
h2, .d-2 { font-size: clamp(1.95rem, 4.4vw, 3.15rem); }
.d-3     { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }

h3, h4, h5 {
    font-family: var(--body);
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -.01em;
    color: var(--green-900);
}
h3 { font-size: 1.16rem; }
h4 { font-size: 1rem; }

.serif  { font-family: var(--display); font-weight: 400; font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 96; }
.italic { font-style: italic; font-variation-settings: 'SOFT' 10, 'WONK' 1, 'opsz' 96; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    line-height: 1;
}
.eyebrow::before,
.eyebrow--center::after {
    content: '';
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: .7;
    flex: 0 0 auto;
}

.lede {
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    line-height: 1.7;
    color: var(--ink-soft);
    text-wrap: pretty;
}
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.gold  { color: var(--gold); }
.num   { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tiny  { font-size: .78rem; line-height: 1.6; }
.small { font-size: .875rem; line-height: 1.62; }
.strong { font-weight: 600; }

/* ---------- 4. Layout ---------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gut);
}
.wrap--mid    { max-width: 1000px; }
.wrap--narrow { max-width: 820px; }
.wrap--tight  { max-width: 640px; }

.section { padding-block: var(--section); }
.section--sm { padding-block: clamp(3rem, 6vw, 4.5rem); }
.section--tint  { background: var(--paper-2); }
.section--paper { background: var(--surface); }

/* Photographic section ground — image sits far behind the paper wash so
   body copy keeps its contrast. Put the content in a .section__body. */
.section--photo { position: relative; isolation: isolate; overflow: hidden; }
.section--photo > .section__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.section--photo > .section__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .16;
}
.section--photo > .section__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, var(--paper) 0%, rgba(246, 242, 233, .84) 35%, rgba(246, 242, 233, .84) 65%, var(--paper) 100%);
}
.section--photo.section--tint > .section__bg::after {
    background: linear-gradient(180deg, var(--paper-2) 0%, rgba(239, 233, 220, .86) 35%, rgba(239, 233, 220, .86) 65%, var(--paper-2) 100%);
}
.section--photo.section--ink > .section__bg img { opacity: .2; }
.section--photo.section--ink > .section__bg::after {
    background: linear-gradient(180deg, var(--green-900) 0%, rgba(4, 40, 26, .9) 40%, rgba(4, 40, 26, .92) 60%, var(--green-900) 100%);
}
.section--photo > .section__texture {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: var(--tapa);
    background-size: 48px 24px;
    opacity: .05;
    pointer-events: none;
}
.section--photo.section--ink > .section__texture { background-image: var(--tapa-light); opacity: .06; }
.section--photo > .wrap { position: relative; z-index: 2; }
.section--ink { background: var(--green-900); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink .lede, .section--ink p { color: rgba(255, 253, 248, .74); }

.section-head {
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head--left {
    text-align: left;
    align-items: flex-start;
    margin-inline: 0;
    max-width: 34rem;
}

.stack { display: flex; flex-direction: column; gap: var(--sg, 1rem); }
.row   { display: flex; align-items: center; gap: var(--sg, 1rem); flex-wrap: wrap; }
.row--center  { justify-content: center; }
.row--between { justify-content: space-between; }
.row--top     { align-items: flex-start; }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.full   { grid-column: 1 / -1; }

.center-x { margin-inline: auto; }
.t-center { text-align: center; }

.page { min-height: 100vh; display: flex; flex-direction: column; }
.page > main { flex: 1 1 auto; }
.page-top { padding-top: clamp(6.5rem, 8.5vw, 7.5rem); }

/* Ornamental rule with a centred diamond */
.rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    width: 100%;
}
.rule::before, .rule::after {
    content: '';
    height: 1px;
    flex: 1 1 auto;
    background: linear-gradient(90deg, transparent, var(--line-gold), transparent);
}
.rule i {
    width: 6px;
    height: 6px;
    background: var(--gold);
    transform: rotate(45deg);
    flex: 0 0 auto;
}

/* ---------- 5. Header / navigation --------------------------------------- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    background: rgba(246, 242, 233, .84);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-scrolled {
    background: rgba(246, 242, 233, .96);
    border-bottom-color: var(--line);
    box-shadow: var(--sh-1);
}

.nav {
    position: relative;
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gut);
    height: 5.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    flex: 0 0 auto;
}
/* The logo file is the full wordmark — never set type next to it. */
.brand__logo {
    height: 3.35rem;
    width: auto;
    object-fit: contain;
    transition: opacity .25s var(--ease);
}
.brand:hover .brand__logo { opacity: .85; }

.nav__links {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
    margin-inline: auto;
}
.nav__link {
    position: relative;
    font-size: .93rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--ink);
    padding-block: .4rem;
    white-space: nowrap;
    transition: color .25s var(--ease);
}
.nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1.5px;
    width: 0;
    background: var(--gold);
    transition: width .32s var(--ease);
}
.nav__link:hover { color: var(--green); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { width: 100%; }
.nav__link[aria-current="page"] { color: var(--green); font-weight: 600; }

/* The drawer CTA is for the mobile menu only — never show it beside the header CTA. */
.nav__links .btn { display: none; }

.nav__actions { display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; }

.nav__toggle {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.nav__toggle span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--green-900);
    transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- 6. Buttons --------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .85rem 1.6rem;
    border-radius: var(--r-sm);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    text-align: center;
    border: 1px solid transparent;
    transition: transform .25s var(--ease), background-color .25s var(--ease),
                color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .lucide-icon { transition: transform .3s var(--ease); }
.btn:hover .i-arrow { transform: translateX(3px); }

.btn--primary { background: var(--green); color: var(--surface); box-shadow: var(--sh-2); }
.btn--primary:hover { background: var(--green-800); box-shadow: var(--sh-3); }

.btn--gold { background: var(--gold); color: var(--green-950); box-shadow: var(--sh-gold); }
.btn--gold:hover { background: var(--gold-400); }

.btn--ghost { background: transparent; color: var(--green-900); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--green); background: var(--surface); }

.btn--light { background: var(--surface); color: var(--green-900); }
.btn--light:hover { background: var(--gold-50); }

.btn--outline-light {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: rgba(255, 255, 255, .3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.btn--outline-light:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .55); }

.btn--lg    { padding: 1.05rem 2.1rem; font-size: .98rem; }
.btn--sm    { padding: .58rem 1.05rem; font-size: .82rem; }
.btn--block { width: 100%; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--green);
    text-decoration: none;
    transition: gap .25s var(--ease), color .25s var(--ease);
}
.link-arrow:hover { gap: .8rem; color: var(--gold); }

/* ---------- 7. Icons ----------------------------------------------------- */
.lucide-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    vertical-align: -.14em;
}
iconify-icon:not(:defined) { display: inline-block; width: 1em; height: 1em; }
.i-lg  { font-size: 1.3rem; }
.i-xl  { font-size: 1.7rem; }
.i-2xl { font-size: 2.2rem; }

/* ---------- 8. Hero ------------------------------------------------------ */
.hero {
    position: relative;
    background: var(--green-950);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(3, 28, 18, .88) 0%, rgba(3, 28, 18, .78) 45%, rgba(3, 28, 18, .95) 100%),
        radial-gradient(80% 60% at 50% 6%, rgba(200, 169, 81, .24), transparent 62%);
}
.hero__texture {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: var(--tapa-light);
    background-size: 48px 24px;
    opacity: .07;
    pointer-events: none;
}
.hero__inner {
    position: relative;
    z-index: 2;
    padding-block: clamp(8.5rem, 12vw, 10.5rem) 0;
}
.hero__copy {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
}
.hero h1 { color: #fff; width: 100%; }
.hero h1 .italic { color: var(--gold-300); }
.hero .lede { color: rgba(255, 253, 248, .78); max-width: 46rem; margin-inline: auto; }

.hero__tag {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem 1rem;
    border: 1px solid rgba(200, 169, 81, .45);
    background: rgba(200, 169, 81, .12);
    border-radius: var(--r-pill);
    color: var(--gold-300);
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Arch strip — the signature shape, rising from the bottom edge of the hero */
.hero__arches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.75rem, 1.8vw, 1.5rem);
    margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
    align-items: end;
}
.arch {
    --arch-h: clamp(9.5rem, 17vw, 13.5rem);
    position: relative;
    display: block;
    height: var(--arch-h);
    width: min(100%, calc(var(--arch-h) * 0.78));
    margin-inline: auto;
    overflow: hidden;
    border-radius: 999px 999px 0 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 0;
    background: var(--green-800);
}
.arch:nth-child(2) { --arch-h: clamp(11.5rem, 20vw, 16rem); }
.arch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--ease);
}
.arch:hover img { transform: scale(1.05); }
.arch::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 60%;
    background: linear-gradient(180deg, transparent, rgba(3, 28, 18, .9));
    pointer-events: none;
}
.arch__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.1rem;
    z-index: 2;
    text-align: center;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-300);
}

/* Compact page banner for interior pages */
.banner {
    position: relative;
    background: var(--green-900);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.banner__media { position: absolute; inset: 0; z-index: 0; }
.banner__media img { width: 100%; height: 100%; object-fit: cover; opacity: .26; }
.banner__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(3, 28, 18, .95), rgba(6, 62, 36, .7));
}
.banner__texture {
    position: absolute; inset: 0; z-index: 1;
    background-image: var(--tapa-light);
    background-size: 48px 24px;
    opacity: .07;
}
.banner__inner {
    position: relative;
    z-index: 2;
    padding-block: clamp(7.5rem, 13vw, 9.5rem) clamp(3rem, 6vw, 4.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.15rem;
}
.banner h1 { color: #fff; }
.banner .lede { color: rgba(255, 253, 248, .78); max-width: 38rem; }

/* Short banner for form pages — just enough to clear the fixed header */
.banner--compact .banner__inner {
    padding-block: clamp(6.5rem, 8.5vw, 7.25rem) clamp(2.25rem, 4vw, 2.75rem);
    gap: .85rem;
}
.banner--compact h1 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); }
.banner--compact .lede { font-size: 1rem; }
.banner--compact .banner__media img { opacity: .2; }

/* Section that follows a banner already has the banner's bottom padding */
.section--after-banner { padding-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ---------- 9. Cards ----------------------------------------------------- */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.5rem, 2.6vw, 2rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--line-gold); }
.card__icon {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: var(--green-900);
    color: var(--gold-300);
    font-size: 1.3rem;
    transition: background-color .35s var(--ease), color .35s var(--ease);
}
.card:hover .card__icon { background: var(--gold); color: var(--green-950); }
.card p { color: var(--ink-soft); font-size: .93rem; }

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
}
.panel--pad { padding: clamp(1.5rem, 4vw, 3rem); }
.panel--tight { padding: clamp(1.25rem, 2.5vw, 1.75rem); }

/* Numbered band of headline figures */
.stat-band {
    position: relative;
    background: var(--green-900);
    border-radius: var(--r-xl);
    padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
    isolation: isolate;
}
.stat-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--tapa-light);
    background-size: 48px 24px;
    opacity: .07;
    z-index: 0;
}
.stat-band__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2rem);
}
.stat { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.stat + .stat { border-left: 1px solid var(--line-light); }
.stat__value {
    font-family: var(--display);
    font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 96;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    line-height: 1;
    color: var(--gold-300);
    font-variant-numeric: tabular-nums;
}
.stat__label {
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .19em;
    text-transform: uppercase;
    color: rgba(255, 253, 248, .58);
    line-height: 1.5;
}

/* ---------- 10. Call-to-action bands ------------------------------------- */
.cta {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    isolation: isolate;
    background: var(--green-900);
    color: #fff;
    text-align: center;
    padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
}
.cta__media { position: absolute; inset: 0; z-index: 0; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.cta__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(3, 28, 18, .66) 0%, rgba(3, 28, 18, .72) 55%, rgba(3, 28, 18, .8) 100%),
        radial-gradient(85% 70% at 50% 0%, rgba(200, 169, 81, .26), transparent 62%);
}
.cta__texture {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: var(--tapa-light);
    background-size: 48px 24px;
    opacity: .07;
    pointer-events: none;
}
.cta__inner {
    position: relative;
    z-index: 2;
    max-width: 44rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.cta h2 { color: #fff; }
.cta .lede { color: rgba(255, 253, 248, .82); }

.cta--gold { background: var(--gold); color: var(--green-950); }
.cta--gold .cta__media img { opacity: .5; }
.cta--gold .cta__media::after {
    background:
        linear-gradient(180deg, rgba(200, 169, 81, .9) 0%, rgba(200, 169, 81, .84) 50%, rgba(184, 152, 66, .9) 100%);
}
.cta--gold h2 { color: var(--green-950); }
.cta--gold .lede { color: rgba(3, 28, 18, .78); }
.cta--gold .eyebrow { color: var(--green-800); }
.cta--gold .cta__texture { background-image: var(--tapa); opacity: .3; }

/* ---------- 11. Testimonials --------------------------------------------- */
.quote {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    padding: clamp(1.5rem, 2.6vw, 2rem);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line-light);
    border-radius: var(--r-lg);
    transition: background-color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.quote:hover { background: rgba(255, 255, 255, .09); border-color: rgba(200, 169, 81, .4); transform: translateY(-4px); }
.quote__stars { color: var(--gold); letter-spacing: .16em; font-size: .85rem; line-height: 1; }
.quote__text {
    font-family: var(--display);
    font-variation-settings: 'SOFT' 10, 'WONK' 1, 'opsz' 40;
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.62;
    color: rgba(255, 253, 248, .88);
    flex: 1 1 auto;
}
.quote__who { display: flex; align-items: center; gap: .85rem; }
.quote__mono {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: rgba(200, 169, 81, .16);
    border: 1px solid rgba(200, 169, 81, .4);
    color: var(--gold-300);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.quote__name { font-size: .92rem; font-weight: 600; color: #fff; line-height: 1.3; }
.quote__role { font-size: .73rem; color: rgba(255, 253, 248, .55); letter-spacing: .05em; }

/* ---------- 12. FAQ ------------------------------------------------------ */
.faq { display: flex; flex-direction: column; gap: .75rem; }
.faq__item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq__item[open] { border-color: var(--line-gold); box-shadow: var(--sh-2); }
.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.15rem clamp(1.15rem, 2.5vw, 1.6rem);
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 1rem;
    color: var(--green-900);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q .lucide-icon { color: var(--gold); transition: transform .3s var(--ease); }
.faq__item[open] .faq__q .lucide-icon { transform: rotate(180deg); }
.faq__a {
    padding: 0 clamp(1.15rem, 2.5vw, 1.6rem) 1.35rem;
    color: var(--ink-soft);
    font-size: .94rem;
    line-height: 1.72;
    max-width: 62ch;
}

/* ---------- 13. Editorial cards (blog) ----------------------------------- */
.post {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.post:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: var(--line-gold); }
.post__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.post:hover .post__media img { transform: scale(1.06); }
.post__body {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: clamp(1.35rem, 2.4vw, 1.85rem);
    flex: 1 1 auto;
}
.post__meta {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
}
.post__meta span:last-child { color: var(--ink-faint); }
.post__meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); flex: 0 0 auto; }
.post__body h3 { font-size: 1.1rem; line-height: 1.35; }
.post__body p { color: var(--ink-soft); font-size: .9rem; flex: 1 1 auto; }

/* ---------- 14. Forms ---------------------------------------------------- */
.form-section {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding-bottom: .9rem;
    margin-bottom: 1.6rem;
    border-bottom: 1px solid var(--line);
}
.form-section .lucide-icon { color: var(--gold); font-size: 1.15rem; }
.form-section h3 { font-size: 1.05rem; }

.field { display: flex; flex-direction: column; gap: .45rem; }
.field--full { grid-column: 1 / -1; }

.field__label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.input, .select, .textarea {
    width: 100%;
    padding: .85rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: .95rem;
    font-family: inherit;
    color: var(--ink);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(200, 169, 81, .18);
}
.textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }

.select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2355655c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;
}

.input.has-error, .select.has-error, .textarea.has-error {
    border-color: var(--alert);
    background: var(--alert-bg);
}

.check {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    text-align: left;
    transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.check:hover { border-color: var(--gold); background: var(--gold-50); }
.check.has-error { border-color: var(--alert); background: var(--alert-bg); }
.check input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .18rem;
    flex: 0 0 auto;
    accent-color: var(--green);
    cursor: pointer;
}
.check span { font-size: .875rem; line-height: 1.65; color: var(--ink-soft); }
.check a { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.check a:hover { color: var(--gold); }
.req { color: var(--alert); }

.submit-box {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: clamp(1.35rem, 3vw, 2rem);
    background: linear-gradient(150deg, var(--gold-50), var(--surface));
    border: 1px solid var(--line-gold);
    border-radius: var(--r-lg);
    align-items: center;
}
.submit-box > .check { width: 100%; }

/* Drop zone */
.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: clamp(1.75rem, 4vw, 2.5rem) 1.25rem;
    text-align: center;
    background: var(--surface-2);
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--gold); background: var(--gold-50); }
.dropzone.has-file { border-color: var(--ok); background: var(--ok-bg); border-style: solid; }
.dropzone.has-error { border-color: var(--alert); background: var(--alert-bg); }
.dropzone .lucide-icon { font-size: 2rem; color: var(--ink-faint); }
.dropzone.has-file .lucide-icon { color: var(--ok); }
.dropzone__title { font-weight: 600; font-size: .95rem; color: var(--green-900); }
.dropzone__title u { color: var(--gold); text-underline-offset: 3px; }
.dropzone__hint { font-size: .78rem; color: var(--ink-faint); }

.doc-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
    padding-left: .9rem;
    border-left: 3px solid var(--gold);
}
.doc-head h2 { font-family: var(--body); font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .7rem;
    border-radius: var(--r-pill);
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: var(--gold-100);
    color: var(--warn);
    border: 1px solid var(--line-gold);
    line-height: 1.5;
}
.pill--ok    { background: var(--ok-bg); color: var(--ok); border-color: rgba(47, 143, 91, .3); }
.pill--live  { background: var(--warn-bg); color: var(--warn); border-color: rgba(169, 120, 26, .3); }
.pill--muted { background: var(--paper-2); color: var(--ink-soft); border-color: var(--line); }

/* ---------- 15. Notes / alerts ------------------------------------------- */
.note {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface-2);
    font-size: .9rem;
    line-height: 1.65;
    color: var(--ink-soft);
    text-align: left;
}
.note .lucide-icon { font-size: 1.15rem; margin-top: .15rem; }
.note strong { color: var(--green-900); }
.note--ok    { background: var(--ok-bg);    border-color: rgba(47, 143, 91, .28); color: #1f6b42; }
.note--ok .lucide-icon { color: var(--ok); }
.note--warn  { background: var(--warn-bg);  border-color: rgba(169, 120, 26, .3);  color: #7c5710; }
.note--warn .lucide-icon { color: var(--warn); }
.note--warn strong { color: #7c5710; }
.note--alert { background: var(--alert-bg); border-color: rgba(184, 69, 47, .28); color: #8e3423; }
.note--alert .lucide-icon { color: var(--alert); }
.note--gold  { background: var(--gold-50); border-color: var(--line-gold); }
.note--gold .lucide-icon { color: var(--gold); }
.note--center { justify-content: center; text-align: center; flex-direction: column; align-items: center; gap: .6rem; }

/* Rate table */
.rates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.rates li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem .95rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: .86rem;
}
.rates li span:first-child { font-weight: 500; color: var(--ink); }
.rates li span:last-child { color: var(--green); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- 16. Progress tracker ----------------------------------------- */
.track { position: relative; }
.track__rail {
    position: absolute;
    top: 1.35rem;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--line);
    z-index: 0;
}
.track__fill {
    position: absolute;
    top: 1.35rem;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--green), var(--gold));
    z-index: 1;
    transition: width .8s var(--ease);
}
.track__steps {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: .5rem;
}
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
}
.step__dot {
    width: 2.7rem;
    height: 2.7rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink-faint);
    font-weight: 700;
    font-size: .85rem;
    box-shadow: var(--sh-1);
}
.step--done .step__dot { background: var(--green); border-color: var(--green); color: #fff; }
.step--now  .step__dot { background: var(--gold); border-color: var(--gold); color: var(--green-950); box-shadow: 0 0 0 5px rgba(200, 169, 81, .18); }
.step__name { font-size: .82rem; font-weight: 600; color: var(--green-900); line-height: 1.3; }
.step__when { font-size: .7rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.step--now .step__when { color: var(--gold); font-weight: 600; }
.step--todo { opacity: .5; }

/* Definition rows */
.dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.dl__k {
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: .3rem;
}
.dl__v { font-size: 1.02rem; font-weight: 600; color: var(--green-900); font-variant-numeric: tabular-nums; }

/* Contact rows */
.contact-row { display: flex; align-items: flex-start; gap: 1.1rem; }
.contact-row__icon {
    width: 2.9rem;
    height: 2.9rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: var(--gold-50);
    border: 1px solid var(--line-gold);
    color: var(--gold);
    font-size: 1.15rem;
}
.contact-row h3 { font-size: 1rem; margin-bottom: .2rem; }
.contact-row p { color: var(--ink-soft); font-size: .92rem; }

.contact-link {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem .85rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    text-decoration: none;
    background: var(--surface);
    transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.contact-link:hover { border-color: var(--gold); background: var(--gold-50); }
.contact-link__icon {
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: var(--r-xs);
    background: var(--paper-2);
    color: var(--green);
    transition: background-color .25s var(--ease), color .25s var(--ease);
}
.contact-link:hover .contact-link__icon { background: var(--gold); color: var(--green-950); }
.contact-link__k { font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.contact-link__v { font-size: .86rem; font-weight: 600; color: var(--green-900); word-break: break-word; }

/* Advisor block */
.advisor { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; }
.advisor__photo {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--line-gold);
    margin-bottom: .85rem;
}
.advisor__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.advisor__name { font-size: 1.05rem; font-weight: 600; color: var(--green-900); }
.advisor__role { font-size: .67rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

/* ---------- 17. Success state -------------------------------------------- */
.seal {
    width: 5.5rem;
    height: 5.5rem;
    margin-inline: auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green-900);
    box-shadow: 0 0 0 8px rgba(10, 92, 54, .1), var(--sh-3);
}
.seal svg { width: 3rem; height: 3rem; }
.seal__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2.5;
    stroke: var(--gold);
    fill: none;
    animation: seal-stroke .7s cubic-bezier(.65, 0, .45, 1) forwards;
}
.seal__check {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke: #fff;
    animation: seal-stroke .35s cubic-bezier(.65, 0, .45, 1) .7s forwards;
}
@keyframes seal-stroke { to { stroke-dashoffset: 0; } }

.ref-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    background: var(--green-900);
    border-radius: var(--r);
    color: #fff;
    text-align: left;
}
.ref-box__k { font-size: .63rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 253, 248, .55); }
.ref-box__v {
    font-family: var(--display);
    font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40;
    font-size: 1.3rem;
    color: var(--gold-300);
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}
.ref-box button { color: rgba(255, 253, 248, .6); font-size: 1.15rem; transition: color .25s var(--ease); }
.ref-box button:hover { color: var(--gold); }

.bullet { display: flex; align-items: flex-start; gap: .85rem; text-align: left; }
.bullet__icon {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ok-bg);
    color: var(--ok);
    font-size: .9rem;
}
.bullet__icon--gold { background: var(--gold-50); color: var(--gold); }
.bullet p { font-size: .9rem; color: var(--ink-soft); }

/* ---------- 18. Legal / prose -------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 {
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    margin-top: 2.75rem;
    margin-bottom: .85rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}
.prose h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
    font-family: var(--body);
    font-size: 1.02rem;
    margin-top: 1.75rem;
    margin-bottom: .4rem;
    color: var(--green);
}
.prose p { margin-bottom: 1rem; color: var(--ink-soft); line-height: 1.75; }
.prose ul { margin: 0 0 1.35rem; display: flex; flex-direction: column; gap: .5rem; }
.prose li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--ink-soft);
    line-height: 1.7;
}
.prose li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .68em;
    width: 5px;
    height: 5px;
    background: var(--gold);
    transform: rotate(45deg);
}
.prose strong { color: var(--green-900); font-weight: 600; }
.prose a { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--gold); }
.prose .updated {
    display: inline-block;
    font-size: .73rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 2.5rem;
}

/* ---------- 19. Footer --------------------------------------------------- */
.site-footer {
    position: relative;
    background: var(--green-950);
    color: rgba(255, 253, 248, .68);
    padding-block: clamp(3.5rem, 7vw, 5rem) 2rem;
    margin-top: auto;
    overflow: hidden;
    isolation: isolate;
}
.site-footer::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--green), var(--gold), var(--green));
    z-index: 2;
}
.site-footer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--tapa-light);
    background-size: 48px 24px;
    opacity: .04;
    z-index: 0;
    pointer-events: none;
}
.site-footer > * { position: relative; z-index: 1; }

.foot-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.foot-brand { display: flex; flex-direction: column; gap: 1.15rem; max-width: 24rem; align-items: flex-start; }
/* Dedicated white wordmark asset for the dark footer. */
.foot-brand .brand__logo { height: 3.4rem; }
.foot-brand p { font-size: .875rem; line-height: 1.7; color: rgba(255, 253, 248, .6); }

.foot-col h4 {
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .19em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.35rem;
}
.foot-col ul { display: flex; flex-direction: column; gap: .8rem; }
.foot-col a, .foot-col li {
    font-size: .875rem;
    color: rgba(255, 253, 248, .62);
    text-decoration: none;
    transition: color .25s var(--ease);
}
.foot-col a:hover { color: var(--gold-300); }
.foot-col .contact-item { display: flex; gap: .75rem; align-items: flex-start; line-height: 1.6; }
.foot-col .contact-item .lucide-icon { color: var(--gold); font-size: 1.05rem; margin-top: .18rem; }

.foot-legal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 253, 248, .1);
}
.foot-legal p {
    font-size: .76rem;
    line-height: 1.75;
    color: rgba(255, 253, 248, .42);
    max-width: 70ch;
}
.foot-legal__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: .75rem;
}
.foot-legal__bar nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.foot-legal__bar a { font-size: .76rem; color: rgba(255, 253, 248, .5); text-decoration: none; }
.foot-legal__bar a:hover { color: var(--gold-300); }

/* ---------- 20. Motion --------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@keyframes rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}
.hero__copy > * { animation: rise .85s var(--ease-out) both; }
.hero__copy > *:nth-child(1) { animation-delay: .05s; }
.hero__copy > *:nth-child(2) { animation-delay: .16s; }
.hero__copy > *:nth-child(3) { animation-delay: .27s; }
.hero__copy > *:nth-child(4) { animation-delay: .38s; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.hero__arches { animation: fade-in .9s var(--ease-out) .45s both; }

.ping {
    position: relative;
    display: inline-flex;
    width: .5rem;
    height: .5rem;
    flex: 0 0 auto;
}
.ping::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: .75;
    animation: ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
}
.ping::after {
    content: '';
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: currentColor;
}
@keyframes ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 21. Responsive ----------------------------------------------- */
@media (max-width: 1024px) {
    .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .nav__toggle { display: flex; }
    .nav { height: 4.75rem; }
    .nav__links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--surface);
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--sh-3);
        padding-inline: var(--gut);
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: max-height .4s var(--ease), padding .4s var(--ease), visibility .4s;
    }
    .nav__links.is-open {
        max-height: 26rem;
        visibility: visible;
        padding-block: 1rem 1.5rem;
    }
    .nav__link {
        padding: .85rem 0;
        border-bottom: 1px solid var(--line-soft);
        font-size: 1rem;
    }
    .nav__link::after { display: none; }
    .nav__links .btn { display: inline-flex; margin-top: 1rem; }
    .nav__actions .btn { display: none; }

    .stat-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
    .stat + .stat { border-left: 1px solid var(--line-light); }
    .stat:nth-child(odd) { border-left: 0; }
}

@media (max-width: 780px) {
    .grid[data-cols="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .track__steps { gap: .25rem; }
    .step__name { font-size: .72rem; }
    .step__when { font-size: .64rem; }
    .step__dot { width: 2.25rem; height: 2.25rem; font-size: .78rem; }
    .track__rail, .track__fill { top: 1.12rem; }
}

@media (max-width: 620px) {
    .grid[data-cols="2"],
    .grid[data-cols="3"],
    .grid[data-cols="4"] { grid-template-columns: minmax(0, 1fr); }
    .span-2 { grid-column: span 1; }
    .foot-grid { grid-template-columns: minmax(0, 1fr); }
    .rates { grid-template-columns: minmax(0, 1fr); }
    .dl { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .stat-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero__inner { padding-block: 7.5rem 0; }
    .hero__arches { gap: .5rem; }
    .arch__label { font-size: .58rem; letter-spacing: .12em; bottom: .7rem; }
    .ref-box { flex-wrap: wrap; }
    .row--stack-sm { flex-direction: column; align-items: stretch; }
    .row--stack-sm .btn { width: 100%; }
}

@media (max-width: 420px) {
    .stat-band__grid { grid-template-columns: minmax(0, 1fr); }
    .stat + .stat { border-left: 0; border-top: 1px solid var(--line-light); padding-top: 1.5rem; }
    .brand__logo { height: 2.1rem; }
}

/* ---------- 22. Print ---------------------------------------------------- */
@media print {
    .site-header, .site-footer, .nav__toggle, .no-print { display: none !important; }
    body { background: #fff; }
    .page-top { padding-top: 1rem; }
    .panel, .card { box-shadow: none; border: 1px solid #ccc; }
}