/* 2DATO landing — W6 Hybrid design tokens + base helpers */

:root {
    /* Brand palette */
    --navy: #0e1c32;
    --navy-75: #465164;
    --navy-55: #5e6b7a;
    --navy-35: #a3abb5;
    --navy-15: #d5d9de;
    --green: #06aa78;

    /* R10 contrast fix: --green-dark is a deeper shade used where --green as
       foreground on white fails WCAG AA (3.0:1). #057a56 yields ~5.3:1 on white,
       passing AA for normal text. Used in .cap-num. */
    --green-dark: #057a56;
    --green-75: #44bf9a;
    --green-55: #6ecfb3;
    --green-35: #a3e0ce;
    --green-15: #d5f2e9;
    --paper: #fafaf7;
    --paper-2: #f3f1ea;
    --ink: #0e1c32;

    /* Type */
    --display: 'Space Grotesk', 'Helvetica Neue', 'Arial', sans-serif;
    --body: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
    --mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

    /* Scale */
    --maxw: 1240px;

    /* Navigation */
    --nav-h: 64px;
}

/* Reset & base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-h);
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--body);
    color: var(--ink);
    background: var(--paper);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
}

img {
    max-width: 100%;
    display: block;
}

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

:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* Section utilities */
section {
    padding: 96px 32px;
}

.container {
    max-width: var(--maxw);
    margin: 0 auto;
}

/* Wordmark — original 2DATO logo image */
.wordmark {
    display: inline-flex;
    align-items: center;
}

.wordmark img {
    display: block;
    height: 36px;
    width: auto;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.1px;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
    cursor: pointer;
    border: 1.5px solid transparent;
    font-family: var(--body);
    -webkit-appearance: none;
    appearance: none;
}

/* R10 contrast fix: white (#fff) on --green is ~3.0:1, fails WCAG AA.
   Navy on --green is ~5.8:1, passes AA for normal text.
   Decision: navy text preserves the green brand surface and is closer to
   brand-guide intent than switching to a white button on dark background. */
.btn-primary {
    background: var(--green);
    color: var(--navy);
    border-color: var(--green);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(6, 170, 120, 0.25);
}

.btn-ghost {
    background: transparent;
    color: var(--navy);
    border-color: var(--navy-15);
}

.btn-ghost:hover {
    border-color: var(--navy);
}

.btn-dark {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.btn-dark:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(6, 170, 120, 0.25);
}

/* Eyebrow / section tag */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--navy-55);
}

.eyebrow::before {
    content: '';
    width: 16px;
    height: 1.5px;
    background: var(--green);
}

/* Punto — decorative dot, inline anywhere */
.punto {
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    background: var(--green);
    vertical-align: baseline;
    margin-left: 0.1em;
}

/* Grid texture (Grilla de Datos, brand guide) */
.grid-bg {
    background-image:
        linear-gradient(var(--navy-15) 1px, transparent 1px),
        linear-gradient(90deg, var(--navy-15) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: -1px -1px;
}

/* ========================================================================
   Section: Navigation (R2)
   ======================================================================== */

/* Skip-to-content (a11y; visible only on keyboard focus) */
.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 100;
    padding: 8px 16px;
    background: var(--navy);
    color: #fff;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transform: translateY(-200%);
    transition: transform 0.2s ease;
}

.skip-link:focus-visible {
    transform: translateY(0);
}

/* Sticky nav with translucent paper + blur */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 250, 247, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--navy-15);
}

.nav-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav .wordmark img {
    height: 36px;
}

.nav-links {
    display: flex;
    gap: 28px;
    align-items: center;
}

.nav-links .nlink {
    font-size: 14px;
    color: var(--navy-75);
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-links .nlink:hover {
    color: var(--navy);
}

.nav-cta {
    padding: 8px 16px;
    font-size: 13px;
}

/* Language toggle (segmented; visual only — applyLang lands in R7) */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--navy-15);
    border-radius: 999px;
    padding: 3px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1px;
    position: relative;
}

.lang-toggle button {
    background: transparent;
    border: 0;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--navy-55);
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    font-weight: 600;
    border-radius: 999px;
    transition: color 0.2s ease;
    position: relative;
    z-index: 1;
}

/* R10 contrast fix: white (#fff) on --green is ~3.0:1, fails WCAG AA.
   Navy on --green is ~5.8:1, passes AA.
   The active pill stays green; text flips to navy for legibility. */
.lang-toggle button.on {
    color: var(--navy);
}

/* Override the global green :focus-visible so the ring stays visible
   against the green pill when the active button receives keyboard focus. */
.lang-toggle button:focus-visible {
    outline-color: var(--navy);
}

.lang-toggle .pill {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    background: var(--green);
    border-radius: 999px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-toggle[data-lang='es'] .pill {
    transform: translateX(100%);
}

@media (max-width: 960px) {
    .nav-links {
        gap: 16px;
    }

    .nav-links .nlink {
        display: none;
    }
}

@media (max-width: 640px) {
    .nav-inner {
        padding: 14px 16px;
    }

    .nav-links {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .nav-cta {
        padding: 7px 14px;
        font-size: 12px;
    }
}

/* ========================================================================
   Section: Hero (R3)
   ======================================================================== */

.hero {
    padding: 100px 32px 80px;
    position: relative;
    overflow: hidden;
}

.hero-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 80px;
    align-items: center;
}

.hero-eyebrow {
    margin-bottom: 28px;
}

.hero-title {
    font-family: var(--display);
    font-size: 72px;
    line-height: 1.02;
    letter-spacing: -2.5px;
    font-weight: 600;
    color: var(--navy);
    margin: 0 0 24px;
}

.hero-title .green {
    color: var(--green-dark);
}

.hero-lede {
    font-size: 19px;
    line-height: 1.55;
    color: var(--navy-75);
    max-width: 540px;
    margin: 0 0 36px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.hero-trust {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 24px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--navy-55);
}

.hero-trust .sep {
    width: 1px;
    height: 16px;
    background: var(--navy-15);
}

/* Punto Mark — three rings + green core with pulse + ripple.
   Inner `.punto-mark-graphic` carries `aria-hidden="true"` so the rings/core
   are decorative-only; sibling `.label` stays exposed to AT for translation. */
.punto-mark {
    position: relative;
    width: 320px;
    height: 320px;
}

.punto-mark .punto-mark-graphic {
    position: absolute;
    inset: 0;
}

.punto-mark .ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px dashed var(--navy-15);
}

.punto-mark .r1 {
    inset: 0;
}

.punto-mark .r2 {
    inset: 36px;
    border-color: var(--navy-35);
}

.punto-mark .r3 {
    inset: 72px;
    border-color: var(--navy-55);
    border-style: solid;
    opacity: 0.3;
}

.punto-mark .core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 110px;
    height: 110px;
    margin: -55px 0 0 -55px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 14px 50px rgb(6 170 120 / 42%);
    animation: punto-pulse 4s ease-in-out infinite;
}

.punto-mark .core::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid var(--green);
    opacity: 0.4;
    animation: punto-ripple 4s ease-out infinite;
}

@keyframes punto-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes punto-ripple {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.65);
        opacity: 0;
    }
}

.punto-mark .label {
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--navy-55);
    text-transform: uppercase;
    white-space: nowrap;
}

/* Reduced motion: drop the pulse on the core (it stays at scale 1) and
   suppress the ripple ring entirely. `animation-play-state: paused` would
   freeze the ripple at frame 0 (opacity 0.5) leaving a permanent halo,
   which is louder than the active motion — `animation: none` + `opacity: 0`
   is the cleaner reduced-motion outcome. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .btn-primary:hover,
    .btn-dark:hover,
    .ind:hover {
        transform: none;
    }

    .punto-mark .core,
    .punto-mark .core::after {
        animation: none;
    }

    .punto-mark .core::after {
        opacity: 0;
    }

    [data-animate] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ========================================================================
   Section: Outcomes strip (R3)
   ======================================================================== */

.outcomes {
    background: #fff;
    border-top: 1px solid var(--navy-15);
    border-bottom: 1px solid var(--navy-15);
    padding: 48px 32px;
}

.outcomes-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
}

.outcome {
    border-left: 2px solid var(--green);
    padding-left: 18px;
}

.outcome .num {
    font-family: var(--display);
    font-size: 38px;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -1.5px;
    line-height: 1;
}

.outcome .num .pct {
    color: var(--green);
    font-size: 26px;
    margin-left: 2px;
    vertical-align: top;
}

.outcome .num .pct--latam {
    margin-left: 4px;
}

.outcome .lab {
    font-size: 13px;
    color: var(--navy-75);
    margin-top: 8px;
    line-height: 1.4;
}

/* Hero + outcomes responsive (matches prototype @media 960) */
@media (max-width: 960px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-title {
        font-size: 44px;
    }

    .punto-mark {
        width: 220px;
        height: 220px;
        margin: 0 auto;
    }

    .punto-mark .core {
        width: 78px;
        height: 78px;
        margin: -39px 0 0 -39px;
    }

    .outcomes-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* ========================================================================
   Section: Capabilities (R4)
   ======================================================================== */

.caps {
    background-color: var(--paper);
}

.caps-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 56px;
}

.caps-title {
    font-family: var(--display);
    font-size: 52px;
    font-weight: 500;
    letter-spacing: -1.5px;
    line-height: 1.05;
    color: var(--navy);
    margin: 16px 0 0;
}

.caps-title .green,
.approach-title .green {
    color: var(--green);
}

.caps-head .pitch {
    font-size: 17px;
    color: var(--navy-75);
    line-height: 1.6;
    margin: 0;
}

/* Hairline dividers via 1px gap on a navy-15 background showing through. */
.caps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--navy-15);
    border: 1px solid var(--navy-15);
    border-radius: 12px;
    overflow: hidden;
}

.cap {
    background: #fff;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: background 0.2s ease;
}

.cap:hover {
    background: var(--paper-2);
}

.cap-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* R10 contrast fix: --green on white is ~3.0:1, fails WCAG AA.
   --green-dark (#057a56) on white is ~5.3:1, passes AA.
   Element is aria-hidden (decorative ordinal) but fixed for completeness. */
.cap-num {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--green-dark);
    font-weight: 600;
}

.cap-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--green-15);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cap h3 {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 600;
    color: var(--navy);
    margin: 0;
    letter-spacing: -0.4px;
}

.cap p {
    font-size: 14px;
    color: var(--navy-75);
    line-height: 1.55;
    margin: 0;
}

.cap-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
}

.cap-stack span {
    font-family: var(--mono);
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--paper-2);
    color: var(--navy-75);
    letter-spacing: 0.5px;
}

/* ========================================================================
   Section: Approach (R4)
   ======================================================================== */

.approach {
    background: var(--navy);
    color: #fff;
}

.approach-container {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: start;
}

.approach-title {
    font-family: var(--display);
    font-size: 52px;
    font-weight: 500;
    letter-spacing: -1.5px;
    line-height: 1.05;
    color: #fff;
    margin: 16px 0 24px;
}

.approach .pitch {
    color: rgb(255 255 255 / 70%);
    font-size: 16px;
    line-height: 1.6;
    max-width: 360px;
    margin: 0;
}

/* Inside .approach the eyebrow flips to white-on-navy. */
.approach .eyebrow {
    color: rgb(255 255 255 / 55%);
}

.approach .eyebrow::before {
    background: var(--green);
}

/* Steps as semantic ordered list — improves AT semantics over the prototype
   which used <div>. Visual layout unchanged. */
.steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.step {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    align-items: start;
}

.step:last-child {
    border-bottom: none;
}

.step-num {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--green);
    font-weight: 600;
    padding-top: 4px;
    letter-spacing: 0.5px;
}

.step-title {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 6px;
    letter-spacing: -0.3px;
    color: #fff;
}

.step .step-body p {
    color: rgb(255 255 255 / 65%);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    max-width: 520px;
}

/* `.when` was rgb(255 255 255 / 45%) in the prototype — that lands at ~4.0:1
   on navy at 11px, below WCAG AA (4.5:1 for normal text). Bumped to 60% to
   reach ~5.5:1. Same family of fix as the contrast debt tracked for R10. */
.step .when {
    font-family: var(--mono);
    font-size: 11px;
    color: rgb(255 255 255 / 60%);
    letter-spacing: 1px;
    padding-top: 6px;
    white-space: nowrap;
}

/* Capabilities + Approach responsive (matches prototype @media 960) */
@media (max-width: 960px) {
    .caps-head,
    .approach-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .caps-grid {
        grid-template-columns: 1fr;
    }

    .caps-title,
    .approach-title {
        font-size: 36px;
    }

    .step {
        grid-template-columns: 80px 1fr;
        gap: 16px;
    }

    .step .when {
        grid-column: 2;
        padding-top: 4px;
    }
}

/* ===== R5: Promise + Industries + Team ===== */

/* --- Promise --- */
.promise {
    background: var(--navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.promise::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 8%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: var(--green);
    opacity: 0.1;
    filter: blur(80px);
    transform: translateY(-50%);
    pointer-events: none;
}

.promise-inner {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.promise .eyebrow {
    color: rgb(255 255 255 / 55%);
}

.promise .eyebrow::before {
    background: var(--green);
}

.promise blockquote {
    font-family: var(--display);
    font-size: 44px;
    line-height: 1.18;
    font-weight: 400;
    letter-spacing: -1px;
    color: #fff;
    margin: 28px 0 24px;
}

.promise blockquote .green {
    color: var(--green);
    font-weight: 500;
}

/* `.punto` itself uses the global rule (styles.css:197). The blockquote
   selector below is kept only as a hook for future per-context tuning. */

.promise .attribution {
    margin-top: 36px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 1.5px;
    color: rgb(255 255 255 / 50%);
}

/* --- Industries --- */
.inds {
    background: var(--paper-2);
}

.inds-head {
    text-align: center;
    margin-bottom: 48px;
}

.inds-title {
    font-family: var(--display);
    font-size: 44px;
    font-weight: 500;
    letter-spacing: -1.2px;
    color: var(--navy);
    margin: 16px 0 0;
}

.inds-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ind {
    background: #fff;
    border: 1px solid var(--navy-15);
    border-radius: 10px;
    padding: 24px 16px;
    text-align: center;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease;
}

.ind:hover {
    border-color: var(--green);
    transform: translateY(-2px);
}

/* Checkerboard offset — breaks the perfectly even 6-up grid. */
.ind:nth-child(even) {
    transform: translateY(16px);
}

.ind:nth-child(even):hover {
    transform: translateY(14px);
}

.ind[data-animate].in-view {
    transform: none;
}

.ind:nth-child(even)[data-animate].in-view {
    transform: translateY(16px);
}

.ind-icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 12px;
    color: var(--navy-55);
    display: block;
    transition: color 0.2s ease;
}

.ind:hover .ind-icon {
    color: var(--green);
}

.ind .name {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

/* --- Team --- */
.team-w6 {
    background: var(--paper);
}

.team-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 40px;
    gap: 32px;
}

.team-title {
    font-family: var(--display);
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -1px;
    color: var(--navy);
    margin: 12px 0 0;
}

.team-head .tagline {
    color: var(--navy-75);
    font-size: 14px;
    max-width: 320px;
    text-align: right;
    margin: 0;
}

/* Scoped to `#team` so the legacy `.team-grid` inside `#team-legacy` is
   left alone until R9 deletes that block. */
#team .team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    justify-content: center;
}

#team .team-grid:has(> .tm:nth-child(2):last-child),
#team .team-grid:has(> .tm:only-child) {
    grid-template-columns: repeat(2, minmax(0, 400px));
}

.tm {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.tm-avatar {
    width: 200px;
    max-width: 100%;
    aspect-ratio: 1;
    border-radius: 16px;
    background: var(--paper-2);
    overflow: hidden;
    border: none;
    box-shadow: none;
}

.tm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tm-name {
    font-family: var(--display);
    font-size: 26px;
    font-weight: 600;
    color: var(--navy);
    margin: 0;
}

.tm-role {
    font-size: 15px;
    color: var(--green-dark);
    font-family: var(--mono);
    letter-spacing: 0.5px;
    margin: 4px 0 0;
    text-transform: uppercase;
}

.tm-skills {
    font-size: 13px;
    color: var(--navy-75);
    margin: 10px 0 0;
    line-height: 1.5;
}

/* R5 responsive (matches prototype @media 960) */
@media (max-width: 960px) {
    .promise blockquote {
        font-size: 28px;
    }

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

    .inds-title {
        font-size: 32px;
    }

    .team-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .team-head .tagline {
        text-align: left;
    }

    #team .team-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== R6: CTA + Footer ===== */

/* --- CTA --- */

/* Override the global `section { padding: 96px 32px }` (styles.css:68) to match
   the prototype's 100/32. Visual mass mostly comes from `.cta-card` padding. */
.cta {
    background: #fff;
    padding: 100px 32px;
}

.cta-card {
    max-width: var(--maxw);
    margin: 0 auto;
    background: var(--navy);
    color: #fff;
    border-radius: 20px;
    padding: 80px 64px;
    position: relative;
    overflow: hidden;
}

.cta-card::after {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: var(--green);
    opacity: 0.15;
    filter: blur(40px);
    pointer-events: none;
}

.cta-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Mirror of `.promise .eyebrow` — flips text white-on-navy without overriding
   the green accent bar (the global rule already paints `::before` green). */
.cta .eyebrow {
    color: rgb(255 255 255 / 60%);
}

.cta h2 {
    font-family: var(--display);
    font-size: 56px;
    line-height: 1.02;
    letter-spacing: -1.5px;
    font-weight: 500;
    color: #fff;
    margin: 16px 0 20px;
}

.cta h2 .green {
    color: var(--green);
}

.cta .lede {
    color: rgb(255 255 255 / 75%);
    font-size: 17px;
    line-height: 1.55;
    max-width: 460px;
    margin: 0 0 32px;
}

.cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Ghost button on dark surface — matches the prototype's inline override but
   keeps the rule co-located with the rest of the CTA. Hover lifts the border
   to full white so the affordance reads against the navy card. */
.cta .btn-ghost {
    color: #fff;
    border-color: rgb(255 255 255 / 25%);
}

.cta .btn-ghost:hover {
    border-color: #fff;
}

/* R10 contrast note: .btn-primary inside .cta inherits the global fix
   (navy text on green background, ~5.8:1). No override needed here. */

.cta-side {
    background: rgb(255 255 255 / 6%);
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 14px;
    padding: 28px;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.8;
    list-style: none;
    margin: 0;
}

.cta-side li {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

/* `›` glyph for the addresses, dimmed `#` for the metalines. The class
   `cta-side-meta` flips the leader colour and starts the sibling chain. */
.cta-side .l {
    color: var(--green);
    flex-shrink: 0;
}

.cta-side-meta .l,
.cta-side-meta ~ li .l {
    color: rgb(255 255 255 / 40%);
}

.cta-side .v {
    color: #fff;
}

.cta-side a.v:hover {
    color: var(--green);
}

.cta-side .c {
    color: rgb(255 255 255 / 40%);
}

.cta-side-meta {
    margin-top: 12px;
}

/* --- Footer (W6) --- */

/* Class-scoped to `.foot-w6` so the legacy `<footer class="footer">` stays
   visually unchanged until R9 removes it. */
.foot-w6 {
    padding: 48px 32px 36px;
    border-top: 1px solid var(--navy-15);
    background: var(--paper);
}

.foot-w6 .foot-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.foot-w6 .foot-brand .wordmark img {
    height: 40px;
}

.foot-w6 .foot-brand .tag {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--navy-55);
    letter-spacing: 1px;
    margin-top: 8px;
    text-transform: uppercase;
}

.foot-w6 .foot-links {
    display: flex;
    gap: 24px;
    font-size: 13px;
    color: var(--navy-75);
}

.foot-w6 .foot-links a {
    color: inherit;
}

.foot-w6 .foot-links a:hover {
    color: var(--navy);
}

.foot-w6 .foot-meta {
    font-size: 12px;
    color: var(--navy-55);
    font-family: var(--mono);
}

/* R6 responsive (matches prototype @media 960) */
@media (max-width: 960px) {
    .cta-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cta-card {
        padding: 48px 28px;
    }

    .cta h2 {
        font-size: 36px;
    }
}

/* ===================================================================
   Accessibility utilities
   =================================================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ===================================================================
   Scroll reveal — staggered via inline transition-delay set in main.js.
   [data-animate] base/reduced-motion rules already existed (styles.css
   R3); this just gives the attribute something to animate.
   =================================================================== */
[data-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

[data-animate].in-view {
    opacity: 1;
    transform: none;
}

/* ===================================================================
   Grain overlay — breaks flat paper/navy surfaces. Fixed, non-interactive,
   above the skip-link (z-index: 100) so it never gets clipped by a section.
   =================================================================== */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 150;
    pointer-events: none;
    opacity: 0.03;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}