:root {
            color-scheme: light;
            --forest: #17675d;
            --forest-deep: #123e3a;
            --leaf: #278c79;
            --lime: #bcead6;
            --gold: #d6a75b;
            --paper: #f1f8f5;
            --ink: #193d38;
            --muted: #607a73;
            --white: #fff;
            --line: rgba(23, 103, 93, .14);
            --serif: Georgia, "Times New Roman", serif;
            --sans: "DM Sans", "Segoe UI", sans-serif;
            --display: "Manrope", "Segoe UI", sans-serif;
        }

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

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 92px;
        }

        body {
            margin: 0;
            background: var(--paper);
            color: var(--ink);
            font-family: var(--sans);
            -webkit-font-smoothing: antialiased;
        }

        ::selection {
            background: var(--lime);
            color: var(--forest-deep);
        }

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

        button,
        a {
            -webkit-tap-highlight-color: transparent;
        }

        button {
            font: inherit;
        }

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

        .site-header {
            position: absolute;
            z-index: 20;
            inset: 0 0 auto;
            padding: 17px 5.3vw;
            transition: padding .3s ease, background .3s ease, box-shadow .3s ease;
        }

        .site-header.scrolled {
            padding-top: 10px;
            padding-bottom: 10px;
            background: rgba(248, 249, 242, .88);
            box-shadow: 0 1px 0 var(--line);
            backdrop-filter: blur(16px);
        }

        .nav-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: min(1320px, 100%);
            margin: 0 auto;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            flex: 0 0 auto;
        }

        .brand-logo {
            display: block;
            width: 140px;
        }

        .brand-logo img {
            width: 100%;
            height: auto;
        }

        .site-header:not(.scrolled) .brand-logo img {
            filter: invert(1) hue-rotate(180deg) brightness(1.12);
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: clamp(20px, 3vw, 44px);
            margin-left: auto;
            color: #44594a;
            font-size: 13px;
            font-weight: 600;
        }

        .nav-links a:not(.nav-cta) {
            transition: color .2s ease;
        }

        .nav-links a:not(.nav-cta):hover {
            color: var(--leaf);
        }

        .nav-cta,
        .button {
            display: inline-flex;
            min-height: 48px;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 0 21px;
            border: 1px solid transparent;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 700;
            transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
        }

        .nav-cta {
            min-height: 42px;
            padding: 0 18px;
            background: var(--forest);
            color: #fff;
        }

        .theme-toggle {
            display: inline-grid;
            width: 42px;
            height: 42px;
            flex: 0 0 auto;
            place-items: center;
            border: 1px solid rgba(255, 255, 255, .3);
            border-radius: 50%;
            background: rgba(255, 255, 255, .12);
            color: #fff;
            cursor: pointer;
            transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
        }

        .theme-toggle:hover {
            transform: translateY(-1px);
            background: rgba(255, 255, 255, .2);
        }

        .theme-toggle .theme-icon {
            width: 19px;
            height: 19px;
        }

        .theme-icon-moon {
            display: none;
        }

        .button:hover,
        .nav-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(17, 55, 32, .17);
        }

        .button svg,
        .nav-cta svg {
            width: 17px;
            height: 17px;
            flex: 0 0 auto;
        }

        .button-primary {
            background: var(--forest);
            color: #fff;
        }

        .button-light {
            border-color: rgba(23, 63, 42, .18);
            background: rgba(255, 255, 255, .5);
            color: var(--forest);
        }

        .menu-toggle {
            display: none;
            width: 44px;
            height: 44px;
            place-items: center;
            border: 1px solid var(--line);
            border-radius: 50%;
            background: #fff;
            color: var(--forest);
        }

        .menu-toggle svg {
            width: 20px;
            height: 20px;
        }

        .hero {
            position: relative;
            display: grid;
            min-height: 790px;
            grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr);
            align-items: center;
            gap: clamp(30px, 5vw, 80px);
            overflow: hidden;
            padding: 145px 8vw 90px;
            background:
                radial-gradient(ellipse at 79% 49%, rgba(208, 224, 177, .53), transparent 39%),
                linear-gradient(120deg, #f8f8f0 0%, #f1f3e7 58%, #e8eddd 100%);
        }

        .hero::before,
        .hero::after {
            position: absolute;
            z-index: 0;
            border: 1px solid rgba(60, 111, 62, .12);
            border-radius: 50%;
            content: "";
            pointer-events: none;
        }

        .hero::before {
            top: 8%;
            right: -200px;
            width: 650px;
            aspect-ratio: 1;
        }

        .hero::after {
            top: 16%;
            right: -115px;
            width: 480px;
            aspect-ratio: 1;
        }

        .hero-copy,
        .hero-art {
            position: relative;
            z-index: 1;
        }

        .hero-copy {
            width: min(600px, 100%);
            justify-self: end;
            padding-bottom: 26px;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 23px;
            color: #547b4a;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 1.8px;
            text-transform: uppercase;
        }

        .eyebrow::before {
            width: 25px;
            height: 1px;
            background: var(--gold);
            content: "";
        }

        .hero h1 {
            max-width: 660px;
            margin: 0;
            color: var(--forest-deep);
            font-family: var(--display);
            font-size: clamp(48px, 6.2vw, 88px);
            font-weight: 600;
            letter-spacing: -.075em;
            line-height: .99;
        }

        .hero h1 em {
            color: #477d43;
            font-family: var(--serif);
            font-weight: 400;
            letter-spacing: -.065em;
        }

        .hero-lead {
            max-width: 490px;
            margin: 27px 0 0;
            color: #617266;
            font-size: 16px;
            line-height: 1.8;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 33px;
        }

        .hero-note {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 33px;
            color: #718073;
            font-size: 11px;
            letter-spacing: .2px;
        }

        .note-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #72a15b;
            box-shadow: 0 0 0 5px rgba(114, 161, 91, .13);
        }

        .hero-art {
            width: min(650px, 100%);
            justify-self: start;
            perspective: 1000px;
        }

        .art-orbit {
            position: absolute;
            top: 50%;
            left: 50%;
            width: min(112%, 700px);
            aspect-ratio: 1;
            border: 1px solid rgba(66, 110, 60, .18);
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }

        .art-orbit::before,
        .art-orbit::after {
            position: absolute;
            border: 1px solid rgba(66, 110, 60, .12);
            border-radius: 50%;
            content: "";
        }

        .art-orbit::before {
            inset: 8%;
        }

        .art-orbit::after {
            inset: 17%;
        }

        .art-image-wrap {
            position: relative;
            z-index: 1;
            overflow: hidden;
            border: 9px solid rgba(255, 255, 255, .72);
            border-radius: 28px;
            background: #fff;
            box-shadow: 0 35px 90px rgba(31, 68, 39, .19), 0 5px 16px rgba(31, 68, 39, .08);
            transform: rotateY(-7deg) rotateX(2deg);
            transition: transform .2s ease-out;
            will-change: transform;
        }

        .art-image-wrap img {
            width: 100%;
            aspect-ratio: 1.62;
            object-fit: cover;
        }

        .float-card {
            position: absolute;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 13px 17px;
            border: 1px solid rgba(255, 255, 255, .8);
            border-radius: 15px;
            background: rgba(255, 255, 255, .88);
            box-shadow: 0 15px 35px rgba(31, 68, 39, .13);
            backdrop-filter: blur(12px);
            animation: float 5s ease-in-out infinite;
        }

        .float-card.top {
            top: -26px;
            right: -19px;
        }

        .float-card.bottom {
            bottom: 28px;
            left: -34px;
            animation-delay: -2.2s;
        }

        .float-icon {
            display: grid;
            width: 38px;
            height: 38px;
            flex: 0 0 auto;
            place-items: center;
            border-radius: 12px;
            background: #e8f0dc;
            color: #477d43;
        }

        .float-icon svg {
            width: 21px;
            height: 21px;
        }

        .float-card strong,
        .float-card small {
            display: block;
        }

        .float-card strong {
            color: #253c2b;
            font-size: 12px;
        }

        .float-card small {
            margin-top: 3px;
            color: #7a897d;
            font-size: 10px;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-9px); }
        }

        .scroll-cue {
            position: absolute;
            bottom: 28px;
            left: 50%;
            display: flex;
            align-items: center;
            gap: 9px;
            color: #718073;
            font-size: 10px;
            letter-spacing: 1.1px;
            text-transform: uppercase;
            transform: translateX(-50%);
        }

        .scroll-cue svg {
            width: 15px;
            height: 15px;
            animation: nudge 1.6s ease-in-out infinite;
        }

        @keyframes nudge {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(4px); }
        }

        .section {
            padding: 116px 7vw;
        }

        .section-inner {
            width: min(1180px, 100%);
            margin: 0 auto;
        }

        .section-heading {
            max-width: 700px;
            margin-bottom: 45px;
        }

        .section-heading.center {
            margin-right: auto;
            margin-left: auto;
            text-align: center;
        }

        .section-heading.center .eyebrow {
            justify-content: center;
        }

        .section-heading h2 {
            margin: 0;
            color: var(--forest-deep);
            font-family: var(--display);
            font-size: clamp(34px, 4.2vw, 58px);
            font-weight: 600;
            letter-spacing: -.065em;
            line-height: 1.08;
        }

        .section-heading h2 em {
            color: #56844c;
            font-family: var(--serif);
            font-weight: 400;
        }

        .section-heading > p {
            max-width: 560px;
            margin: 17px 0 0;
            color: var(--muted);
            font-size: 15px;
            line-height: 1.8;
        }

        .intro-section {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(ellipse at 12% 0%, rgba(255, 255, 255, .72), transparent 54%),
                linear-gradient(180deg, #e8f0eb 0%, #f0f5f1 100%);
        }

        .intro-section::after {
            position: absolute;
            right: -120px;
            bottom: -230px;
            width: 500px;
            aspect-ratio: 1;
            border: 1px solid rgba(65, 117, 65, .12);
            border-radius: 50%;
            content: "";
            pointer-events: none;
        }

        .intro-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: .85fr 1.15fr;
            align-items: end;
            gap: 80px;
        }

        .intro-aside {
            padding-bottom: 8px;
            color: var(--muted);
            font-size: 15px;
            line-height: 1.9;
        }

        .intro-aside p {
            margin: 0 0 22px;
        }

        .text-link {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: #386b3e;
            font-size: 13px;
            font-weight: 800;
        }

        .text-link svg {
            width: 17px;
            height: 17px;
            transition: transform .2s ease;
        }

        .text-link:hover svg {
            transform: translateX(4px);
        }

        .values-section {
            background: #e9efe7;
        }

        .value-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 17px;
        }

        .value-card {
            position: relative;
            min-height: 265px;
            overflow: hidden;
            padding: 29px;
            border: 1px solid rgba(23, 63, 42, .1);
            border-radius: 19px;
            background: rgba(255, 255, 255, .68);
            transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
        }

        .value-card:hover {
            transform: translateY(-6px);
            background: #fff;
            box-shadow: 0 20px 45px rgba(35, 65, 41, .09);
        }

        .value-number {
            color: #91a587;
            font-family: var(--serif);
            font-size: 18px;
            font-style: italic;
        }

        .value-icon {
            display: grid;
            width: 48px;
            height: 48px;
            margin: 22px 0 20px;
            place-items: center;
            border-radius: 15px;
            background: #e4edd9;
            color: #3f7142;
        }

        .value-icon svg {
            width: 24px;
            height: 24px;
        }

        .value-card h3 {
            margin: 0 0 9px;
            color: #213c29;
            font-family: var(--display);
            font-size: 17px;
            letter-spacing: -.03em;
        }

        .value-card p {
            margin: 0;
            color: #738075;
            font-size: 13px;
            line-height: 1.75;
        }

        .guide-section {
            overflow: hidden;
            background: var(--forest-deep);
            color: #fff;
        }

        .guide-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            gap: clamp(40px, 8vw, 110px);
        }

        .guide-copy .eyebrow {
            color: var(--lime);
        }

        .guide-copy h2 {
            margin: 0;
            color: #f5f6ed;
            font-family: var(--display);
            font-size: clamp(36px, 4.4vw, 60px);
            font-weight: 600;
            letter-spacing: -.07em;
            line-height: 1.06;
        }

        .guide-copy h2 em {
            color: #cde69a;
            font-family: var(--serif);
            font-weight: 400;
        }

        .guide-copy > p {
            max-width: 470px;
            margin: 21px 0 0;
            color: rgba(244, 248, 238, .7);
            font-size: 14px;
            line-height: 1.85;
        }

        .guide-points {
            display: grid;
            gap: 13px;
            margin: 27px 0 30px;
            padding: 0;
            list-style: none;
        }

        .guide-points li {
            display: flex;
            align-items: center;
            gap: 11px;
            color: rgba(244, 248, 238, .83);
            font-size: 13px;
        }

        .guide-points svg {
            width: 18px;
            height: 18px;
            flex: 0 0 auto;
            color: var(--lime);
        }

        .guide-copy .button-primary {
            background: var(--lime);
            color: var(--forest-deep);
        }

        .guide-visual {
            position: relative;
            padding: 14px;
            border: 1px solid rgba(255, 255, 255, .13);
            border-radius: 25px;
            background: rgba(255, 255, 255, .06);
            transform: rotate(2deg);
            transition: transform .3s ease;
        }

        .guide-visual:hover {
            transform: rotate(0);
        }

        .guide-visual img {
            width: 100%;
            border-radius: 15px;
        }

        .guide-tag {
            position: absolute;
            right: -19px;
            bottom: 31px;
            padding: 13px 17px;
            border: 1px solid rgba(255, 255, 255, .8);
            border-radius: 13px;
            background: #fff;
            box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
            color: #315d38;
            font-size: 11px;
            font-weight: 800;
        }

        .guide-tag span {
            display: block;
            margin-top: 3px;
            color: #778579;
            font-size: 9px;
            font-weight: 500;
        }

        .steps-section {
            background: #f0f5f1;
        }

        .steps-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            counter-reset: steps;
        }

        .step-card {
            position: relative;
            padding: 4px 24px 0 0;
            counter-increment: steps;
        }

        .step-card::before {
            display: block;
            margin-bottom: 20px;
            color: #8aa17b;
            content: "0" counter(steps);
            font-family: var(--serif);
            font-size: 38px;
            font-style: italic;
        }

        .step-card::after {
            position: absolute;
            top: 22px;
            right: 18px;
            left: 75px;
            height: 1px;
            background: var(--line);
            content: "";
        }

        .step-card h3 {
            margin: 0 0 11px;
            color: var(--forest);
            font-family: var(--display);
            font-size: 18px;
            letter-spacing: -.03em;
        }

        .step-card p {
            max-width: 310px;
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.8;
        }

        .closing {
            position: relative;
            overflow: hidden;
            padding: 95px 7vw;
            background:
                radial-gradient(ellipse at 85% 25%, rgba(205, 230, 154, .24), transparent 38%),
                linear-gradient(125deg, #28583a, #173f2a 72%);
            color: #fff;
            text-align: center;
        }

        .closing::before,
        .closing::after {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 420px;
            aspect-ratio: 1;
            border: 1px solid rgba(219, 238, 193, .16);
            border-radius: 50%;
            content: "";
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .closing::after {
            width: 570px;
        }

        .closing-inner {
            position: relative;
            z-index: 1;
            width: min(760px, 100%);
            margin: 0 auto;
        }

        .closing .eyebrow {
            color: var(--lime);
        }

        .closing h2 {
            margin: 0;
            font-family: var(--display);
            font-size: clamp(36px, 5.4vw, 70px);
            font-weight: 600;
            letter-spacing: -.07em;
            line-height: 1.04;
        }

        .closing h2 em {
            color: var(--lime);
            font-family: var(--serif);
            font-weight: 400;
        }

        .closing p {
            max-width: 560px;
            margin: 19px auto 27px;
            color: rgba(255, 255, 255, .72);
            font-size: 14px;
            line-height: 1.8;
        }

        .closing .button {
            background: var(--lime);
            color: var(--forest-deep);
        }

        .site-footer {
            padding: 34px 7vw;
            background: #10281f;
            color: rgba(244, 248, 238, .7);
        }

        .footer-inner {
            display: flex;
            width: min(1180px, 100%);
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            margin: 0 auto;
        }

        .footer-brand {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .footer-brand img {
            width: 114px;
            filter: invert(1) hue-rotate(180deg) brightness(1.12);
        }

        .footer-meta {
            font-size: 11px;
        }

        .footer-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 20px;
        }

        .footer-meta a:hover {
            color: var(--lime);
        }

        .reveal {
            opacity: 0;
            transform: translateY(25px);
            transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .delay-1 { transition-delay: .1s; }
        .delay-2 { transition-delay: .2s; }

        .marquee {
            overflow: hidden;
            padding: 21px 0;
            background: linear-gradient(105deg, #07100e 0%, #123e3a 42%, #17675d 100%);
            color: #e8f7ee;
        }

        .marquee-track {
            display: flex;
            width: max-content;
            align-items: center;
            animation: marquee-slide 32s linear infinite;
        }

        .marquee-track span {
            padding: 0 22px;
            font-family: var(--display);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .marquee-track i {
            color: #9cddc8;
            font-size: 17px;
            font-style: normal;
        }

        @keyframes marquee-slide {
            to { transform: translateX(-50%); }
        }

        @media (min-width: 1600px) {
            .hero {
                min-height: 0;
            }
        }

        @media (max-width: 1050px) {
            .site-header {
                padding-right: 4vw;
                padding-left: 4vw;
            }

            .hero {
                min-height: 0;
            }

            .intro-grid {
                gap: 45px;
            }

            .hero-education {
                position: relative;
                top: auto;
                left: auto;
                width: 100%;
                padding: 11px 14px;
                transform: none;
                text-align: center;
            }

            .hero-education::before {
                top: -13px;
                left: 50%;
                width: 1px;
                height: 12px;
                background: linear-gradient(180deg, rgba(39, 140, 121, .25), #278c79);
            }

            .hero-education::after {
                top: -18px;
                left: calc(50% - 3px);
            }

            .hero-education.is-updating {
                transform: translateY(3px);
            }
        }

        @media (max-width: 760px) {
            html {
                scroll-padding-top: 76px;
            }

            .site-header,
            .site-header.scrolled {
                padding: 10px 5vw;
                background: rgba(236, 248, 244, .94);
                box-shadow: 0 1px 0 var(--line);
                backdrop-filter: blur(16px);
            }

            .brand-logo {
                width: 116px;
            }

            .site-header .brand-logo img,
            .site-header:not(.scrolled) .brand-logo img {
                filter: none;
            }

            .theme-toggle {
                width: 40px;
                height: 40px;
                margin-left: 9px;
                border-color: var(--line);
                background: var(--paper);
                color: var(--forest);
            }

            .menu-toggle {
                display: grid;
                margin-left: auto;
            }

            .nav-links {
                position: absolute;
                top: calc(100% + 8px);
                right: 5vw;
                left: 5vw;
                display: none;
                align-items: stretch;
                gap: 0;
                padding: 9px;
                border: 1px solid var(--line);
                border-radius: 18px;
                background: rgba(255, 255, 255, .97);
                box-shadow: 0 18px 45px rgba(22, 54, 31, .15);
            }

            .nav-links.open {
                display: flex;
                flex-direction: column;
            }

            .nav-links > a:not(.nav-cta) {
                padding: 14px 12px;
                border-bottom: 1px solid rgba(23, 63, 42, .08);
            }

            .nav-cta {
                margin-top: 8px;
            }

            .hero {
                min-height: 0;
                height: 320svh;
                padding: 0;
            }

            .hero-copy {
                justify-self: auto;
                padding: 0;
            }

            .hero-lead {
                max-width: none;
                font-size: 13px;
            }

            .hero-stage {
                min-height: 0;
            }

            .hero-stage .eyebrow {
                top: 15%;
                font-size: 9px;
            }

            .hero .hero-title {
                top: 21%;
                width: 94vw;
                font-size: clamp(34px, 9vw, 60px);
            }

            .hero .hero-title span {
                display: block;
                margin: 5px 0 0;
                font-size: .72em;
            }

            .growth-scene {
                top: 47%;
                width: min(92vw, 860px);
                max-height: 46svh;
            }

            .hero-chapter {
                gap: 9px;
                font-size: 9px;
                letter-spacing: 1.2px;
            }

            .hero-chapter-count::after {
                width: 20px;
                margin-left: 9px;
            }

            .hero-stage .hero-lead {
                font-size: 11px;
            }

            .scroll-prompt {
                font-size: 9px;
            }

            .hero-stage .hero-actions {
                gap: 7px;
            }

            .scroll-cue {
                bottom: 22px;
            }

            .section {
                padding: 82px 7vw;
            }

            .intro-grid,
            .guide-grid {
                grid-template-columns: 1fr;
                gap: 32px;
            }

            .intro-grid {
                align-items: start;
            }

            .value-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .value-card {
                min-height: 0;
                padding: 23px;
            }

            .value-icon {
                margin: 16px 0;
            }

            .guide-grid {
                gap: 48px;
            }

            .guide-visual {
                width: min(600px, 94%);
                margin: 0 auto;
            }

            .steps-grid {
                grid-template-columns: 1fr;
                gap: 31px;
            }

            .step-card {
                padding-right: 0;
            }

            .step-card::after {
                right: 0;
            }

            .closing {
                padding: 78px 7vw;
            }

            .footer-inner {
                align-items: flex-start;
                flex-direction: column;
            }
        }

        @media (max-width: 420px) {
            .hero-stage {
                min-height: 0;
            }

            .hero-stage .eyebrow {
                top: 15%;
            }

            .hero-stage .hero-lead {
                font-size: 12px;
            }

            .hero .hero-title {
                top: 21%;
                font-size: clamp(32px, 8.8vw, 38px);
            }

            .growth-scene {
                top: 47%;
                width: min(92vw, 860px);
            }

            .hero-chapter {
                gap: 7px;
            }

            .hero-stage .hero-lead {
                gap: 5px;
                font-size: 11px;
            }

            .scroll-prompt {
                gap: 7px;
                font-size: 8px;
                letter-spacing: 1.25px;
            }

            .scroll-prompt svg {
                width: 15px;
                height: 19px;
            }

            .scroll-prompt i {
                width: 20px;
            }

            .hero-stage .hero-actions .button {
                min-height: 42px;
                padding: 0 12px;
                font-size: 10px;
            }

            .hero-scroll-label {
                right: 3%;
                font-size: 8px;
            }
        }

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

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

            .brand-glow,
            .brand-orbit,
            .brand-spark,
            .scene-brand-float,
            .scroll-prompt svg {
                animation: none !important;
            }

        }

        @media (min-width: 761px) {
            .site-header:not(.scrolled) .nav-links {
                color: rgba(255, 255, 255, .9);
            }

            .site-header:not(.scrolled) .nav-links a:not(.nav-cta):hover {
                color: #bcead6;
            }
        }

        .scroll-story {
            position: relative;
            height: 600vh;
            height: 600svh;
            background: #07100e;
        }

        .story-stage {
            position: sticky;
            top: 0;
            height: 100vh;
            height: 100svh;
            min-height: 580px;
            overflow: hidden;
            isolation: isolate;
            background: #07100e;
            color: #fff;
        }

        .story-visual,
        .story-overlay,
        .story-shell {
            position: absolute;
            inset: 0;
        }

        .story-visual {
            z-index: -2;
            overflow: hidden;
            background: #07100e;
        }

        .story-image {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity .9s cubic-bezier(.2, .7, .2, 1);
        }

        .story-image.is-active {
            opacity: 1;
        }

        .story-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .story-image.is-active img {
            animation: story-image-arrive 1.3s cubic-bezier(.2, .7, .2, 1) both;
        }

        @keyframes story-image-arrive {
            from { transform: scale(1.06); }
            to { transform: scale(1); }
        }

        .story-overlay {
            z-index: -1;
            background:
                linear-gradient(90deg, rgba(3, 14, 11, .77) 0%, rgba(3, 14, 11, .46) 39%, rgba(3, 14, 11, .08) 74%),
                linear-gradient(0deg, rgba(3, 14, 11, .78) 0%, rgba(3, 14, 11, .12) 36%, rgba(3, 14, 11, .18) 100%);
        }

        .story-shell {
            display: grid;
            width: min(1600px, 100%);
            grid-template-rows: auto minmax(0, 1fr) auto;
            margin: 0 auto;
            padding: clamp(92px, 11vh, 124px) clamp(26px, 7.2vw, 112px) clamp(24px, 4vh, 42px);
        }

        .story-topline {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            color: rgba(255, 255, 255, .78);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 1.7px;
            text-transform: uppercase;
        }

        .story-top-controls {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 14px;
        }

        .story-topic-picker {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        .story-topic-picker select {
            max-width: 180px;
            min-height: 36px;
            padding: 0 30px 0 13px;
            border: 1px solid rgba(255, 255, 255, .36);
            border-radius: 999px;
            appearance: none;
            background: rgba(255, 255, 255, .1);
            color: #fff;
            cursor: pointer;
            font: inherit;
            letter-spacing: .8px;
            text-overflow: ellipsis;
            backdrop-filter: blur(12px);
        }

        .story-topic-picker::after {
            position: absolute;
            right: 13px;
            width: 7px;
            height: 7px;
            border-right: 1px solid rgba(255, 255, 255, .8);
            border-bottom: 1px solid rgba(255, 255, 255, .8);
            content: "";
            pointer-events: none;
            transform: translateY(-2px) rotate(45deg);
        }

        .story-topic-picker select option {
            background: #123e3a;
            color: #fff;
        }

        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            clip-path: inset(50%);
        }

        .story-edition {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .story-edition-mark {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #a7e2c7;
            box-shadow: 0 0 18px rgba(167, 226, 199, .8);
        }

        .story-coordinate {
            color: rgba(255, 255, 255, .62);
            font-variant-numeric: tabular-nums;
        }

        .story-coordinate i {
            margin: 0 8px;
            color: #bcead6;
            font-style: normal;
        }

        .story-intro {
            width: min(560px, 42%);
            align-self: center;
            margin: 0;
        }

        .story-kicker {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
            color: #c0ead8;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .story-kicker::before {
            width: 26px;
            height: 1px;
            background: #bcead6;
            content: "";
        }

        .story-intro h1 {
            max-width: 560px;
            margin: 0;
            font-family: var(--display);
            font-size: clamp(44px, 4vw, 60px);
            font-weight: 700;
            letter-spacing: -.075em;
            line-height: .98;
            text-wrap: balance;
        }

        .story-intro h1 em {
            color: #bcead6;
            font-family: var(--serif);
            font-weight: 400;
            letter-spacing: -.065em;
        }

        .story-footer {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(180px, 300px) auto;
            align-items: end;
            gap: clamp(24px, 4vw, 60px);
        }

        .story-copy {
            display: grid;
            grid-template-columns: 58px minmax(0, 430px);
            align-items: start;
            gap: 18px;
            max-width: 560px;
        }

        .story-index {
            padding-top: 6px;
            color: #bcead6;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.3px;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        .story-copy h2 {
            margin: 0 0 8px;
            font-family: var(--display);
            font-size: clamp(20px, 2vw, 26px);
            font-weight: 600;
            letter-spacing: -.04em;
            line-height: 1.2;
        }

        .story-copy p {
            max-width: 410px;
            margin: 0;
            color: rgba(255, 255, 255, .76);
            font-size: 13px;
            line-height: 1.7;
        }

        .story-stage.is-updating .story-copy > div {
            animation: story-copy-arrive .35s ease both;
        }

        @keyframes story-copy-arrive {
            from { opacity: .35; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .story-progress {
            display: flex;
            align-items: center;
            gap: 7px;
            padding-bottom: 5px;
        }

        .story-progress span {
            display: block;
            width: 24px;
            height: 2px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .35);
            transition: width .4s ease, background .4s ease;
        }

        .story-progress span.is-active {
            width: 52px;
            background: #bcead6;
        }

        .story-actions {
            display: flex;
            align-items: center;
            gap: 26px;
            padding-bottom: 1px;
        }

        .story-scroll-hint {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: rgba(255, 255, 255, .73);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .7px;
            white-space: nowrap;
        }

        .story-scroll-icon {
            display: grid;
            width: 20px;
            height: 29px;
            place-items: start center;
            padding-top: 5px;
            border: 1px solid rgba(255, 255, 255, .68);
            border-radius: 12px;
        }

        .story-scroll-icon i {
            width: 2px;
            height: 6px;
            border-radius: 2px;
            background: #bcead6;
            animation: story-scroll-dot 1.5s ease-in-out infinite;
        }

        @keyframes story-scroll-dot {
            50% { transform: translateY(7px); opacity: .4; }
        }

        .story-link {
            display: inline-flex;
            min-height: 48px;
            align-items: center;
            justify-content: center;
            gap: 11px;
            padding: 0 19px;
            border: 1px solid rgba(255, 255, 255, .42);
            border-radius: 999px;
            background: rgba(255, 255, 255, .1);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            white-space: nowrap;
            backdrop-filter: blur(12px);
            transition: border-color .2s ease, background .2s ease, transform .2s ease;
        }

        .story-link:hover {
            transform: translateY(-2px);
            border-color: #bcead6;
            background: rgba(188, 234, 214, .18);
        }

        .story-link svg {
            width: 16px;
            height: 16px;
        }

        .story-index-label {
            position: absolute;
            top: 50%;
            right: 24px;
            color: rgba(255, 255, 255, .5);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 2px;
            writing-mode: vertical-rl;
            transform: translateY(-50%);
        }

        @media (max-width: 1050px) {
            .story-shell {
                display: grid;
                grid-template-rows: auto minmax(0, 1fr) auto;
                justify-content: initial;
                padding-top: 104px;
                padding-bottom: 36px;
            }

            .story-intro {
                width: min(440px, 48%);
                align-self: center;
                margin: 0;
            }

            .story-intro h1 {
                font-size: clamp(38px, 4.5vw, 48px);
            }

            .story-footer {
                grid-template-columns: minmax(0, 1fr) auto;
                gap: 16px 22px;
            }

            .story-progress {
                grid-column: 1;
                grid-row: 2;
            }

            .story-actions {
                grid-column: 2;
                grid-row: 1 / span 2;
                flex-direction: column;
                align-items: flex-end;
                gap: 16px;
            }
        }

        @media (max-width: 760px) {
            .scroll-story {
                height: 600vh;
                height: 600svh;
            }

            .story-stage {
                min-height: 560px;
            }

            .story-overlay {
                background:
                    linear-gradient(90deg, rgba(3, 14, 11, .78), rgba(3, 14, 11, .32) 76%, rgba(3, 14, 11, .1)),
                    linear-gradient(0deg, rgba(3, 14, 11, .92) 0%, rgba(3, 14, 11, .4) 47%, rgba(3, 14, 11, .2) 100%);
            }

            .story-image img {
                object-position: center center;
            }

            .story-shell {
                padding: 92px 24px 24px;
            }

            .story-topline {
                font-size: 8px;
                letter-spacing: 1.1px;
            }

            .story-top-controls {
                gap: 7px;
            }

            .story-topic-picker select {
                max-width: 112px;
                min-height: 30px;
                padding-right: 23px;
                padding-left: 9px;
                font-size: 8px;
            }

            .story-topic-picker::after {
                right: 10px;
                width: 6px;
                height: 6px;
            }

            .story-edition {
                gap: 7px;
            }

            .story-coordinate {
                font-size: 8px;
                letter-spacing: .6px;
            }

            .story-coordinate i {
                margin: 0 3px;
            }

            .story-intro {
                width: min(78%, 430px);
                margin: 0;
            }

            .story-kicker {
                margin-bottom: 16px;
                font-size: 9px;
                letter-spacing: 1.5px;
            }

            .story-intro h1 {
                font-size: clamp(36px, 8vw, 50px);
            }

            .story-footer {
                grid-template-columns: minmax(0, 1fr);
                gap: 14px;
            }

            .story-copy {
                grid-template-columns: 48px minmax(0, 1fr);
                gap: 12px;
            }

            .story-copy h2 {
                font-size: 20px;
            }

            .story-copy p {
                max-width: 360px;
                font-size: 12px;
            }

            .story-progress {
                grid-column: 1;
                grid-row: auto;
                gap: 6px;
                padding: 0;
            }

            .story-progress span {
                width: 18px;
            }

            .story-progress span.is-active {
                width: 42px;
            }

            .story-actions {
                grid-column: 1;
                grid-row: auto;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
            }

            .story-scroll-hint {
                gap: 8px;
                font-size: 9px;
            }

            .story-scroll-icon {
                width: 18px;
                height: 26px;
            }

            .story-link {
                min-height: 42px;
                gap: 7px;
                padding: 0 13px;
                font-size: 10px;
            }

            .story-index-label {
                display: none;
            }
        }

        @media (max-width: 390px) {
            .story-shell {
                padding-right: 19px;
                padding-left: 19px;
            }

            .story-intro h1 {
                font-size: 36px;
            }

            .story-scroll-hint {
                font-size: 8px;
            }
        }

        @media (max-height: 700px) and (max-width: 1050px) {
            .story-shell {
                padding-top: 82px;
                padding-bottom: 18px;
            }

            .story-intro h1 {
                font-size: clamp(36px, 4.4vw, 54px);
            }

            .story-kicker {
                margin-bottom: 12px;
            }

            .story-footer {
                gap: 10px 18px;
            }

            .story-copy h2 {
                margin-bottom: 5px;
                font-size: 19px;
            }

            .story-copy p {
                font-size: 11px;
                line-height: 1.5;
            }
        }

        :root[data-theme="dark"] {
            color-scheme: dark;
            --forest: #8ecfba;
            --forest-deep: #dcebe3;
            --leaf: #78c4aa;
            --lime: #bcead6;
            --paper: #111a17;
            --ink: #e2ece6;
            --muted: #a4b8ad;
            --white: #18231f;
            --line: rgba(184, 218, 198, .14);
        }

        :root[data-theme="dark"] body {
            background: var(--paper);
            color: var(--ink);
        }

        :root[data-theme="dark"] .site-header.scrolled {
            background: rgba(17, 26, 23, .92);
        }

        :root[data-theme="dark"] .site-header .brand-logo img {
            filter: invert(1) hue-rotate(180deg) brightness(1.12);
        }

        :root[data-theme="dark"] .site-header.scrolled .nav-links {
            color: #d4e4dc;
        }

        :root[data-theme="dark"] .site-header.scrolled .nav-links a:not(.nav-cta):hover {
            color: var(--lime);
        }

        :root[data-theme="dark"] .site-header.scrolled .theme-toggle {
            border-color: rgba(188, 234, 214, .2);
            background: rgba(188, 234, 214, .08);
            color: #d9eee3;
        }

        :root[data-theme="dark"] .theme-icon-sun {
            display: none;
        }

        :root[data-theme="dark"] .theme-icon-moon {
            display: block;
        }

        :root[data-theme="dark"] .intro-section {
            background:
                radial-gradient(ellipse at 12% 0%, rgba(120, 166, 142, .12), transparent 54%),
                linear-gradient(180deg, #18231f 0%, #131c19 100%);
        }

        :root[data-theme="dark"] .intro-section::after {
            border-color: rgba(156, 205, 176, .1);
        }

        :root[data-theme="dark"] .section-heading h2 em {
            color: #9cc9a0;
        }

        :root[data-theme="dark"] .text-link {
            color: #a5d7b1;
        }

        :root[data-theme="dark"] .values-section {
            background: #19241f;
        }

        :root[data-theme="dark"] .value-card {
            border-color: rgba(184, 218, 198, .12);
            background: rgba(31, 45, 38, .82);
        }

        :root[data-theme="dark"] .value-card:hover {
            background: #26372e;
            box-shadow: 0 20px 45px rgba(0, 0, 0, .2);
        }

        :root[data-theme="dark"] .value-number,
        :root[data-theme="dark"] .step-card::before {
            color: #9eb79f;
        }

        :root[data-theme="dark"] .value-icon {
            background: #2b4135;
            color: #a7d8b0;
        }

        :root[data-theme="dark"] .value-card h3 {
            color: #e2ece4;
        }

        :root[data-theme="dark"] .value-card p {
            color: #a9b9ae;
        }

        :root[data-theme="dark"] .guide-visual {
            border-color: rgba(255, 255, 255, .1);
            background: rgba(255, 255, 255, .035);
        }

        :root[data-theme="dark"] .guide-tag {
            border-color: rgba(188, 234, 214, .16);
            background: #26372e;
            color: #c5e7cc;
        }

        :root[data-theme="dark"] .guide-tag span {
            color: #a9b9ae;
        }

        :root[data-theme="dark"] .steps-section {
            background: #121b18;
        }

        :root[data-theme="dark"] .step-card h3 {
            color: #b8dfc9;
        }

        :root[data-theme="dark"] .step-card p {
            color: #a4b8ad;
        }

        :root[data-theme="dark"] .step-card::after {
            background: rgba(184, 218, 198, .16);
        }

        :root[data-theme="dark"] .closing {
            background:
                radial-gradient(ellipse at 85% 25%, rgba(130, 174, 130, .14), transparent 38%),
                linear-gradient(125deg, #203e32, #142d25 72%);
        }

        :root[data-theme="dark"] .site-footer {
            background: #0c1411;
        }


        @media (max-width: 760px) {
            :root[data-theme="dark"] .site-header,
            :root[data-theme="dark"] .site-header.scrolled {
                background: rgba(17, 26, 23, .95);
            }

            :root[data-theme="dark"] .site-header .brand-logo img {
                filter: invert(1) hue-rotate(180deg) brightness(1.12);
            }

            :root[data-theme="dark"] .theme-toggle {
                border-color: rgba(188, 234, 214, .2);
                background: rgba(188, 234, 214, .08);
                color: #d9eee3;
            }

            :root[data-theme="dark"] .nav-links {
                border-color: rgba(184, 218, 198, .16);
                background: rgba(24, 35, 31, .98);
                box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
                color: #dcebe3;
            }

            :root[data-theme="dark"] .nav-links > a:not(.nav-cta) {
                border-bottom-color: rgba(184, 218, 198, .1);
            }

            :root[data-theme="dark"] .menu-toggle {
                border-color: rgba(188, 234, 214, .2);
                background: #1d2b25;
                color: #d9eee3;
            }
        }