/* ==========================================================================
   adaptiveX public website (index.html)
   Standalone stylesheet: the landing page does not load the dashboard's
   compiled Nexus CSS. Values follow docs/DESIGN.md and the approved
   "AdaptiveX Homepage" design.
   ========================================================================== */

/* Averta is the logo face and a commercial font. It is used only if the
   organisation self-hosts a licensed copy at this path; Poppins is the fallback. */
@font-face {
    font-family: Averta;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/Averta-Regular.woff2") format("woff2");
}

:root {
    --purple: #403d8d;
    --purple-hover: #332f76;
    --indigo: #7669c0;
    --gold: #f8c21a;
    --gold-hover: #e5b017;
    --lavender: #e8e5f8;
    --lavender-line: #d6d2ec;
    --light: #f1effa;
    --page: #fafafd;
    --line: #e1e1ed;
    --ink: #212022;
    --ink-2: #4a4860;
    --deep: #25295f;
    --pale-yellow: #fff4d3;
    --pastel-yellow: #fae193;
    --pascal: #afacd3;
    --font: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-alt: Lato, Poppins, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --shadow-md: 0 4px 12px rgb(37 41 95 / 8%), 0 2px 4px rgb(37 41 95 / 4%);
    --shadow-lg: 0 16px 40px rgb(37 41 95 / 14%), 0 4px 8px rgb(37 41 95 / 6%);
    --shadow-gold: 0 8px 24px rgb(248 194 26 / 32%);
    --gutter: clamp(20px, 5vw, 48px);
    --section-y: clamp(64px, 9vw, 120px);
}

html {
    scroll-behavior: smooth;
}

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

    * {
        transition: none !important;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    color: var(--purple);
}

a:hover {
    color: var(--indigo);
}

:focus-visible {
    outline: 3px solid var(--purple);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--gold);
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd {
    margin: 0;
}

img {
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */
.wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.section {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
    scroll-margin-top: 72px;
}

.eyebrow {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--purple);
    line-height: 1.5;
}

.eyebrow--gold {
    color: var(--gold);
}

.h2 {
    margin-top: 16px;
    font-weight: 500;
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.2;
    color: var(--ink);
    text-wrap: balance;
}

.lede {
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-2);
    text-wrap: pretty;
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 9999px;
    background: var(--pale-yellow);
    color: var(--purple);
    font-weight: 600;
    font-size: 12px;
}

/* Buttons: pills, three variants, 160ms background transition. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 30px;
    border-radius: 9999px;
    border: none;
    font: 600 16px var(--font);
    text-decoration: none;
    cursor: pointer;
    transition: background 160ms ease;
}

.btn--sm {
    min-height: 44px;
    padding: 0 22px;
    font-size: 15px;
}

.btn--md {
    min-height: 48px;
    padding: 0 26px;
    font-size: 15px;
}

.btn--purple {
    background: var(--purple);
    color: #fff;
}

.btn--purple:hover {
    background: var(--purple-hover);
    color: #fff;
}

.btn--gold {
    background: var(--gold);
    color: var(--purple);
}

.btn--gold:hover {
    background: var(--gold-hover);
    color: var(--purple);
}

.btn--gold.btn--glow {
    box-shadow: var(--shadow-gold);
}

.btn--ghost {
    background: transparent;
    border: 1.5px solid var(--purple);
    color: var(--purple);
}

.btn--ghost:hover {
    background: var(--lavender);
    color: var(--purple);
}

.btn--ghost-deep {
    background: transparent;
    border: 1.5px solid var(--deep);
    color: var(--deep);
}

.btn--ghost-deep:hover {
    background: rgb(255 255 255 / 35%);
    color: var(--deep);
}

/* The two-tone X of the wordmark, drawn with clip-paths. */
.xmark {
    position: relative;
    display: inline-block;
}

.xmark > span {
    position: absolute;
    inset: 0;
    clip-path: polygon(0 0, 38% 0, 100% 50%, 38% 100%, 0 100%, 60% 50%);
}

.xmark > span:first-child {
    background: var(--gold);
}

.xmark > span:last-child {
    left: 24%;
    background: var(--purple);
    transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 100;
    background: var(--purple);
    color: #fff;
    padding: 12px 20px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}

.skip-link:focus {
    left: 16px;
    color: #fff;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(255 255 255 / 90%);
    backdrop-filter: blur(12px);
    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari still needs the prefix */
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

.site-header__bar {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.wordmark {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: 3px;
    font-family: Averta, Poppins, sans-serif;
    font-weight: 400;
    font-size: 28px;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
}

.wordmark:hover {
    color: var(--ink);
}

.wordmark .xmark {
    width: 26px;
    height: 24px;
    margin-top: 4px;
}

.nav-desktop {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-desktop__link {
    font-weight: 500;
    font-size: 15px;
    color: var(--ink);
    text-decoration: none;
    padding: 12px 0;
}

.nav-desktop__link:hover {
    color: var(--purple);
}

.nav-desktop__link--signin {
    color: var(--purple);
}

.nav-desktop .btn {
    min-height: 44px;
    padding: 0 24px;
    font-size: 15px;
}

.menu-toggle {
    display: none;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 9999px;
    border: 1.5px solid var(--purple);
    background: transparent;
    color: var(--purple);
    font: 600 15px var(--font);
    cursor: pointer;
}

.nav-mobile {
    display: flex;
    flex-direction: column;
    padding: 8px var(--gutter) 24px;
    border-top: 1px solid var(--line);
    background: #fff;
}

.nav-mobile__link {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-weight: 500;
    font-size: 17px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}

.nav-mobile__link--signin {
    color: var(--purple);
}

.nav-mobile .btn {
    min-height: 48px;
    margin-top: 16px;
}

@media (max-width: 899px) {
    .nav-desktop {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
        align-items: center;
    }
}

@media (min-width: 900px) {
    .nav-mobile {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f1effa 100%);
    scroll-margin-top: 88px;
}

.hero__inner {
    padding-top: clamp(48px, 7vw, 104px);
    padding-bottom: clamp(56px, 8vw, 120px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(40px, 6vw, 88px);
}

.hero__copy {
    flex: 1 1 440px;
    min-width: 0;
}

.hero__title {
    margin-top: 20px;
    font-weight: 700;
    font-size: clamp(40px, 5.4vw, 68px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: balance;
}

.hero__lede {
    margin-top: 24px;
    max-width: 580px;
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.65;
    color: var(--ink-2);
    text-wrap: pretty;
}

.hero__actions {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hero__note {
    margin-top: 24px;
    font-family: var(--font-alt);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
}

.hero__visual {
    flex: 1 1 420px;
    min-width: 0;
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

.hero__mark {
    position: absolute;
    right: -70px;
    top: -90px;
    width: 220px;
    height: 220px;
    opacity: 0.9;
}

/* Stacked layout: keep the mark inside the gap above the card, off the copy. */
@media (max-width: 899px) {
    .hero__mark {
        width: 140px;
        height: 140px;
        right: -36px;
        top: -28px;
    }
}

.hero__plate {
    position: absolute;
    inset: 18px -14px -14px 18px;
    background: var(--lavender);
    border: 1px solid var(--line);
    border-radius: 20px;
}

.preview-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    padding: clamp(24px, 3vw, 36px);
}

.preview-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.preview-card__kicker {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--purple);
}

.preview-card__title {
    margin-top: 22px;
    font-weight: 600;
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.25;
    color: var(--ink);
    text-wrap: balance;
}

.preview-card__text {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-2);
}

.steps-compact {
    margin-top: 22px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--font-alt);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-2);
}

.steps-compact li {
    display: flex;
    gap: 12px;
}

.steps-compact__n {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--lavender);
    color: var(--purple);
    font: 600 12px/22px var(--font);
    text-align: center;
}

.preview-card__output {
    margin-top: 24px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--pale-yellow);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
}

.preview-card__output strong {
    font-weight: 600;
    color: var(--purple);
}

/* --------------------------------------------------------------------------
   Two routes to value
   -------------------------------------------------------------------------- */
.value {
    background: #fff;
    scroll-margin-top: 88px;
}

.value__inner {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(32px, 6vw, 96px);
}

.value__intro {
    flex: 1 1 380px;
    min-width: 0;
}

.value__intro .lede {
    max-width: 520px;
}

.value__routes {
    flex: 1.2 1 420px;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: clamp(28px, 4vw, 48px);
    align-content: start;
}

.route {
    border-top: 3px solid var(--purple);
    padding-top: 24px;
}

.route--gold {
    border-top-color: var(--gold);
}

.route h3 {
    font-weight: 600;
    font-size: 22px;
    line-height: 1.3;
    color: var(--ink);
}

.route p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2);
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Playbooks
   -------------------------------------------------------------------------- */
.playbooks {
    background: var(--page);
    border-top: 1px solid var(--line);
}

.playbooks__intro {
    max-width: 760px;
}

.playbooks__grid {
    margin-top: clamp(36px, 5vw, 64px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 24px;
    align-items: start;
}

.playbook {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    padding: clamp(24px, 2.6vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.playbook h3 {
    font-weight: 600;
    font-size: 24px;
    line-height: 1.25;
    color: var(--ink);
    text-wrap: balance;
}

.playbook__text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-2);
    text-wrap: pretty;
}

.playbook__preview {
    margin-top: 8px;
    padding: 20px;
    border-radius: 12px;
    background: var(--light);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.playbook__tag {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 9999px;
    background: #fff;
    color: var(--purple);
    font-weight: 600;
    font-size: 12px;
}

.playbook__preview h4 {
    font-weight: 600;
    font-size: 17px;
    line-height: 1.35;
    color: var(--ink);
}

.playbook__output {
    font-family: var(--font-alt);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
}

.playbook__output strong {
    color: var(--ink);
}

.playbook__preview .btn {
    align-self: flex-start;
    margin-top: 6px;
}

.playbook__details {
    margin-top: 6px;
    border-top: 1px solid var(--lavender-line);
}

.playbook__details summary {
    cursor: pointer;
    padding: 13px 0;
    min-height: 44px;
    font-weight: 600;
    font-size: 15px;
    color: var(--purple);
}

.playbook__details dl {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 4px;
    font-family: var(--font-alt);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
}

.playbook__details dt {
    font-weight: 700;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   For leaders
   -------------------------------------------------------------------------- */
.leaders {
    background: var(--deep);
    color: #fff;
}

.leaders__inner {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(36px, 6vw, 96px);
}

.leaders__intro,
.leaders__list {
    flex: 1 1 400px;
    min-width: 0;
}

.leaders .h2 {
    color: #fff;
}

.leaders .lede {
    max-width: 540px;
    color: var(--lavender);
}

.numbered {
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.numbered li {
    display: flex;
    gap: 18px;
    align-items: baseline;
    padding: 20px 0;
    border-top: 1px solid rgb(255 255 255 / 18%);
    font-size: 17px;
    line-height: 1.55;
    color: #fff;
}

.numbered li:last-child {
    border-bottom: 1px solid rgb(255 255 255 / 18%);
}

.numbered__n {
    flex: none;
    font-weight: 700;
    font-size: 14px;
    color: var(--gold);
}

.leaders__note {
    margin-top: 28px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--pastel-yellow);
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Sample playbook
   -------------------------------------------------------------------------- */
.sample {
    background: var(--light);
}

.sample__intro {
    max-width: 760px;
}

.sample__card {
    margin-top: clamp(32px, 5vw, 56px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.sample__top {
    padding: clamp(24px, 4vw, 56px);
    display: flex;
    flex-wrap: wrap;
    gap: clamp(28px, 5vw, 72px);
}

.sample__copy {
    flex: 1 1 360px;
    min-width: 0;
}

.sample__title {
    margin-top: 18px;
    font-weight: 600;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.2;
    color: var(--ink);
    text-wrap: balance;
}

.sample__copy p {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2);
    text-wrap: pretty;
}

.sample__actions {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sample__status {
    margin-top: 12px;
    min-height: 22px;
    font-family: var(--font-alt);
    font-size: 14px;
    line-height: 1.55;
    color: var(--purple);
    font-weight: 700;
}

.steps-large {
    flex: 1 1 360px;
    min-width: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.steps-large li {
    display: flex;
    gap: 20px;
    align-items: baseline;
    padding: 18px 0;
    border-top: 1px solid var(--line);
}

.steps-large li:last-child {
    border-bottom: 1px solid var(--line);
}

.steps-large__n {
    flex: none;
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    color: var(--pascal);
    width: 28px;
}

.steps-large__text {
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink);
}

.sample__more {
    padding: 0 clamp(24px, 4vw, 56px) clamp(16px, 3vw, 32px);
    background: var(--page);
    border-top: 1px solid var(--line);
}

.sample__more > details {
    border-bottom: 1px solid var(--line);
}

.sample__more > details:last-child {
    border-bottom: none;
}

.sample__more summary {
    cursor: pointer;
    padding: 20px 0;
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
}

.sample__body {
    padding: 0 0 28px;
}

.sample__body--prose {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2);
}

.sample__body--prose strong {
    font-weight: 600;
    color: var(--ink);
}

.prompt {
    margin: 0;
    padding: clamp(16px, 2.5vw, 28px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    user-select: text;
}

.sample__body .btn {
    margin-top: 16px;
}

.worksheet-title {
    font-weight: 600;
    font-size: 17px;
    color: var(--ink);
}

.worksheet {
    margin-top: 16px;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 12px;
}

.worksheet li {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.worksheet__title {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ink);
}

.worksheet__body {
    margin-top: 6px;
    font-family: var(--font-alt);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
}

.example {
    margin-top: 18px;
    max-width: 820px;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2);
}

.example > div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

.example dt {
    flex: 0 0 220px;
    font-weight: 600;
    color: var(--ink);
}

.example dd {
    flex: 1 1 300px;
}

/* --------------------------------------------------------------------------
   Membership
   -------------------------------------------------------------------------- */
.membership {
    background: #fff;
}

.membership__inner {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(36px, 6vw, 96px);
}

.membership__intro {
    flex: 1 1 360px;
    min-width: 0;
}

.membership__intro .lede {
    max-width: 480px;
}

.membership__intro .btn {
    margin-top: 32px;
}

.membership__team {
    margin-top: 24px;
    max-width: 480px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-2);
}

.membership__team a {
    font-weight: 600;
}

.membership__grid {
    flex: 1.3 1 440px;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 0 clamp(28px, 4vw, 56px);
}

.membership__item {
    padding: 28px 0;
    border-top: 1px solid var(--line);
}

.membership__item h3 {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    color: var(--ink);
}

.membership__item p {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-2);
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq {
    background: var(--page);
    border-top: 1px solid var(--line);
}

.faq .wrap {
    max-width: 880px;
}

.faq__list {
    margin-top: clamp(28px, 4vw, 48px);
    border-top: 1px solid var(--line);
}

.faq__list details {
    border-bottom: 1px solid var(--line);
}

.faq__list summary {
    cursor: pointer;
    padding: 22px 0;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    color: var(--ink);
}

.faq__list p {
    padding: 0 0 24px 18px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Closing band
   -------------------------------------------------------------------------- */
.next-step {
    background: var(--gold);
}

.next-step .wrap {
    max-width: 960px;
    padding-top: clamp(64px, 9vw, 112px);
    padding-bottom: clamp(64px, 9vw, 112px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.next-step__title {
    font-weight: 700;
    font-size: clamp(32px, 4.4vw, 56px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--deep);
    text-wrap: balance;
}

.next-step__text {
    margin-top: 20px;
    max-width: 680px;
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.65;
    color: var(--deep);
    text-wrap: pretty;
}

.next-step__actions {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--deep);
    color: #fff;
}

.site-footer .wrap {
    padding-top: clamp(48px, 6vw, 72px);
    padding-bottom: 32px;
}

.site-footer__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
}

.site-footer__brand {
    flex: 1 1 320px;
    min-width: 0;
    max-width: 440px;
}

.site-footer__logo {
    display: block;
    height: 36px;
    width: auto;
}

.site-footer__text {
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--lavender);
}

.site-footer__areas {
    margin-top: 20px;
    font-family: var(--font-alt);
    font-size: 14px;
    color: var(--pascal);
}

.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    align-items: flex-start;
}

.site-footer__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 500;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
}

.site-footer__nav a:hover {
    color: var(--gold);
}

.site-footer__tagline {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgb(255 255 255 / 18%);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}

.h2--flush {
    margin-top: 0;
}