/* ───────── tokens ───────── */
        :root {
            color-scheme: light;
            --bg: #F6F1E8;
            --bg2: #EEE6D8;
            --panel: #FFFDF9;
            --ink: #2B1F19;
            --muted: #7A6A61;
            --line: rgba(43, 31, 25, .14);
            --primary: #5A3E32;
            --primary-ink: #FFF8EF;
            --primary-h: #47302A;
            --sky: #8CC4E8;
            --sky-d: #4F9BCF;
            --sky-t: #E4F1F9;
            --honey: #E9B54A;
            --honey-t: #FBF0D5;
            --ok: #4E9A6F;
            --house: #6B4A3A;
            --wall: #FBF7F0;
            --glass: #D8ECF7;
            --cloud: #FFFFFF;
            --smoke: #C9CED3;
            --sky-spring: #DCEEF8;
            --sky-summer: #BFE3F7;
            --sky-fall: #F7E4CA;
            --sky-winter: #E7EDF3;
            --g-spring: #9CC98A;
            --g-summer: #7FBF6B;
            --g-fall: #D9A867;
            --g-winter: #EEF3F7;
            --l-spring: #8FCB7C;
            --l-summer: #5FAF57;
            --l-fall: #E08A3C;
            --t1: #FBF3E4;
            --t2: #EAF3FA;
            --t3: #F3EFE7;
            --t4: #E8F1EC;
            --t5: #FBF0DA;
            --t6: #F0EAF2;
            --font: 'Figtree', system-ui, -apple-system, sans-serif;
            --e: cubic-bezier(.25, .8, .3, 1);
            --shadow: 0 20px 44px -26px rgba(43, 31, 25, .35);
            --r: 20px
        }

        [data-theme="dark"] {
            color-scheme: dark;
            --bg: #1B1512;
            --bg2: #15100E;
            --panel: #241C18;
            --ink: #F3ECE3;
            --muted: #B3A398;
            --line: rgba(243, 236, 227, .14);
            --primary: #E2C4B0;
            --primary-ink: #2B1F19;
            --primary-h: #EFD6C6;
            --sky: #8CC4E8;
            --sky-d: #A9D5F0;
            --sky-t: #1E2C36;
            --honey: #E9B54A;
            --honey-t: #33291A;
            --ok: #7CC49A;
            --house: #8E6A58;
            --wall: #3B2F2A;
            --glass: #F3D890;
            --cloud: #46586A;
            --smoke: #9AA6B0;
            --sky-spring: #1E3140;
            --sky-summer: #17344A;
            --sky-fall: #3A2A22;
            --sky-winter: #232B34;
            --g-spring: #4F7A47;
            --g-summer: #3F8A44;
            --g-fall: #8A6A3C;
            --g-winter: #C9D3DB;
            --l-spring: #5F9B58;
            --l-summer: #4C9A48;
            --l-fall: #C7752E;
            --t1: #2A211C;
            --t2: #22282E;
            --t3: #2B2522;
            --t4: #212A25;
            --t5: #2B261D;
            --t6: #282230;
            --shadow: 0 22px 50px -26px rgba(0, 0, 0, .6)
        }

        /* ───────── base ───────── */
        * {
            box-sizing: border-box
        }

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

        body {
            margin: 0;
            font-family: var(--font);
            background: var(--bg);
            color: var(--ink);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
            transition: background .45s, color .45s
        }

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

        button,
        input,
        select,
        textarea {
            font: inherit;
            color: inherit
        }

        button {
            cursor: pointer
        }

        h1,
        h2,
        h3,
        h4,
        h5 {
            margin: 0;
            line-height: 1.1;
            letter-spacing: -.025em;
            font-weight: 700
        }

        p {
            margin: 0
        }

        ul {
            margin: 0
        }

        ::selection {
            background: var(--honey);
            color: #2B1F19
        }

        ::-webkit-scrollbar {
            width: 10px
        }

        ::-webkit-scrollbar-track {
            background: var(--bg2)
        }

        ::-webkit-scrollbar-thumb {
            background: var(--sky-d);
            border-radius: 99px
        }

        .skip {
            position: fixed;
            top: -4rem;
            left: 1rem;
            z-index: 3000;
            background: var(--ink);
            color: var(--bg);
            padding: .6rem 1rem;
            border-radius: 10px
        }

        .skip:focus {
            top: 1rem
        }

        /* ───────── buttons ───────── */
        .pb {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            border: 0;
            border-radius: 14px;
            padding: .85rem 1.4rem;
            font-weight: 700;
            font-size: .93rem;
            background: var(--primary);
            color: var(--primary-ink);
            transition: transform .3s var(--e), background .3s, box-shadow .3s
        }

        .pb:hover {
            background: var(--primary-h);
            color: var(--primary-ink);
            transform: translateY(-2px);
            box-shadow: var(--shadow)
        }

        .pb.sky {
            background: var(--sky-d);
            color: #fff
        }

        [data-theme="dark"] .pb.sky {
            color: #0F1A22
        }

        .pb.line {
            background: transparent;
            border: 1.5px solid var(--line);
            color: var(--ink)
        }

        .pb.line:hover {
            border-color: var(--sky-d);
            background: var(--sky-t);
            box-shadow: none;
            color: var(--ink)
        }

        .pb.sm {
            padding: .55rem .95rem;
            font-size: .8rem;
            border-radius: 10px
        }

        /* ───────── top pills + bottom dock ───────── */
        .topbar {
            position: fixed;
            top: 12px;
            left: 12px;
            right: 12px;
            z-index: 1100;
            display: flex;
            justify-content: space-between;
            align-items: center;
            pointer-events: none
        }

        .pill {
            pointer-events: auto;
            display: flex;
            align-items: center;
            gap: .4rem;
            background: color-mix(in srgb, var(--panel) 72%, transparent);
            backdrop-filter: blur(16px) saturate(1.3);
            -webkit-backdrop-filter: blur(16px) saturate(1.3);
            border: 1.5px solid var(--line);
            border-radius: 999px;
            padding: .35rem .45rem;
            transition: box-shadow .35s, background .35s
        }

        .scrolled .pill {
            box-shadow: var(--shadow);
            background: color-mix(in srgb, var(--panel) 92%, transparent)
        }

        .brand {
            padding: .3rem .9rem .3rem .3rem;
            font-weight: 800;
            font-size: 1.12rem;
            letter-spacing: -.03em;
            display: flex;
            align-items: center;
            gap: .55rem
        }

        .brand .mark {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--sky-t);
            display: grid;
            place-items: center;
            font-size: 1.05rem
        }

        .theme {
            width: 40px;
            height: 40px;
            border: 0;
            border-radius: 50%;
            background: transparent;
            display: grid;
            place-items: center;
            font-size: 1rem;
            transition: background .3s, transform .4s var(--e)
        }

        .theme:hover {
            background: var(--sky-t);
            transform: rotate(20deg)
        }

        .pill .pb {
            border-radius: 999px;
            padding: .6rem 1.05rem;
            font-size: .84rem
        }

        .dock {
            position: fixed;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1100;
            display: flex;
            align-items: center;
            gap: 2px;
            padding: 6px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--panel) 80%, transparent);
            backdrop-filter: blur(18px) saturate(1.3);
            -webkit-backdrop-filter: blur(18px) saturate(1.3);
            border: 1.5px solid var(--line);
            box-shadow: var(--shadow);
            max-width: calc(100vw - 20px);
            overflow-x: auto;
            scrollbar-width: none
        }

        .dock::-webkit-scrollbar {
            display: none
        }

        .dock a,
        .dock button {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .05rem;
            padding: .4rem .7rem;
            border-radius: 999px;
            border: 0;
            background: transparent;
            color: var(--muted);
            font-size: .6rem;
            font-weight: 700;
            letter-spacing: .03em;
            white-space: nowrap;
            transition: background .3s, color .3s
        }

        .dock .ic {
            font-size: 1.1rem;
            line-height: 1.25
        }

        .dock a:hover,
        .dock button:hover {
            background: var(--sky-t);
            color: var(--ink)
        }

        .dock a.on {
            background: var(--ink);
            color: var(--bg)
        }

        .dock .sep {
            width: 1.5px;
            height: 26px;
            background: var(--line);
            margin: 0 4px;
            flex: 0 0 auto
        }

        @media(max-width:560px) {

            .dock a:not(.on) .lb,
            .dock button .lb {
                display: none
            }

            .dock a,
            .dock button {
                padding: .45rem .6rem
            }

            .pill .pb .t {
                display: none
            }

            .pill .pb {
                padding: .6rem .8rem
            }
        }

        /* ───────── hero ───────── */
        .hero {
            padding: 104px clamp(1.2rem, 4vw, 3.4rem) clamp(2.4rem, 4vw, 4rem);
            display: grid;
            grid-template-columns: 1fr 1.05fr;
            gap: clamp(1.6rem, 4vw, 3.6rem);
            align-items: center;
            border-bottom: 1.5px solid var(--line);
            background: linear-gradient(180deg, var(--bg2), var(--bg) 60%)
        }

        .kicker {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            font-size: .7rem;
            letter-spacing: .2em;
            text-transform: uppercase;
            font-weight: 800;
            color: var(--muted);
            margin-bottom: 1.1rem
        }

        .kicker::before {
            content: "";
            width: 22px;
            height: 2px;
            background: var(--sky-d);
            border-radius: 2px
        }

        .hero h1 {
            font-size: clamp(2.5rem, 5.6vw, 4.6rem);
            font-weight: 800;
            letter-spacing: -.04em;
            line-height: 1.0
        }

        .hero h1 .hl {
            color: var(--sky-d)
        }

        .hero .sub {
            color: var(--muted);
            font-size: 1.08rem;
            max-width: 44ch;
            margin: 1.2rem 0 1.6rem
        }

        .hero-cta {
            display: flex;
            flex-wrap: wrap;
            gap: .7rem
        }

        .chips {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            margin-top: 1.4rem
        }

        .chips span {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            background: var(--panel);
            border: 1.5px solid var(--line);
            border-radius: 999px;
            padding: .42rem .85rem;
            font-size: .8rem;
            font-weight: 600
        }

        .chips i {
            color: var(--ok)
        }

        /* season planner */
        .planner {
            --skyc: var(--sky-spring);
            --gc: var(--g-spring);
            --lc: var(--l-spring);
            background: var(--panel);
            border: 1.5px solid var(--line);
            border-radius: 28px;
            overflow: hidden;
            box-shadow: var(--shadow)
        }

        .planner[data-season="summer"] {
            --skyc: var(--sky-summer);
            --gc: var(--g-summer);
            --lc: var(--l-summer)
        }

        .planner[data-season="fall"] {
            --skyc: var(--sky-fall);
            --gc: var(--g-fall);
            --lc: var(--l-fall)
        }

        .planner[data-season="winter"] {
            --skyc: var(--sky-winter);
            --gc: var(--g-winter);
            --lc: transparent
        }

        .season-tabs {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border-bottom: 1.5px solid var(--line);
            background: var(--bg2)
        }

        .season-tabs button {
            border: 0;
            background: transparent;
            padding: .8rem .4rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .15rem;
            font-size: .74rem;
            font-weight: 700;
            color: var(--muted);
            border-right: 1.5px solid var(--line);
            transition: background .3s, color .3s
        }

        .season-tabs button:last-child {
            border-right: 0
        }

        .season-tabs .se {
            font-size: 1.3rem
        }

        .season-tabs button[aria-selected="true"] {
            background: var(--panel);
            color: var(--ink);
            box-shadow: inset 0 -3px 0 var(--sky-d)
        }

        .scene {
            position: relative;
            background: var(--skyc);
            transition: background .7s var(--e)
        }

        .scene svg {
            display: block;
            width: 100%;
            height: 300px
        }

        .scene .tag {
            position: absolute;
            top: .8rem;
            left: .9rem;
            background: color-mix(in srgb, var(--panel) 82%, transparent);
            backdrop-filter: blur(8px);
            border: 1px solid var(--line);
            border-radius: 999px;
            padding: .3rem .7rem;
            font-size: .66rem;
            font-weight: 800;
            letter-spacing: .1em;
            text-transform: uppercase
        }

        .plan-foot {
            padding: 1.1rem 1.2rem 1.2rem
        }

        .why-now {
            font-weight: 600;
            font-size: .92rem;
            margin-bottom: .6rem;
            display: flex;
            gap: .55rem;
            align-items: flex-start
        }

        .why-now .lb {
            font-size: .62rem;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--sky-d);
            background: var(--sky-t);
            border-radius: 6px;
            padding: .2rem .45rem;
            flex: 0 0 auto;
            margin-top: .15rem
        }

        .rec {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: .8rem;
            align-items: center;
            padding: .7rem 0;
            border-top: 1px dashed var(--line)
        }

        .rec .rem {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: var(--bg2);
            display: grid;
            place-items: center;
            font-size: 1.2rem
        }

        .rec b {
            display: block;
            font-size: .92rem
        }

        .rec span {
            font-size: .8rem;
            color: var(--muted)
        }

        .ask {
            border: 1.5px solid var(--line);
            background: var(--panel);
            border-radius: 999px;
            padding: .42rem .85rem;
            font-size: .75rem;
            font-weight: 700;
            white-space: nowrap;
            transition: .3s
        }

        .ask:hover {
            background: var(--primary);
            color: var(--primary-ink);
            border-color: var(--primary)
        }

        .all-link {
            display: inline-flex;
            gap: .4rem;
            align-items: center;
            margin-top: .8rem;
            font-size: .82rem;
            font-weight: 700;
            color: var(--sky-d)
        }

        @media(max-width:560px) {
            .rec {
                grid-template-columns: auto 1fr
            }

            .rec .ask {
                grid-column: 2;
                justify-self: start
            }
        }

        /* scene drawing */
        .ground {
            fill: var(--gc);
            transition: fill .7s
        }

        .walk {
            fill: var(--bg2);
            opacity: .9
        }

        .cloud {
            fill: var(--cloud);
            opacity: .85;
            animation: drift 14s ease-in-out infinite alternate
        }

        .cloud.c2 {
            animation-duration: 18s;
            animation-delay: -6s
        }

        @keyframes drift {
            from {
                transform: translateX(-10px)
            }

            to {
                transform: translateX(14px)
            }
        }

        .sun {
            fill: var(--honey);
            transform-box: fill-box;
            transform-origin: center;
            transition: transform .7s var(--e), opacity .7s
        }

        .rays {
            stroke: var(--honey);
            stroke-width: 4;
            stroke-linecap: round;
            transform-box: fill-box;
            transform-origin: center;
            animation: spin 36s linear infinite;
            opacity: 0;
            transition: opacity .5s
        }

        [data-season="summer"] .sun {
            transform: scale(1.28)
        }

        [data-season="summer"] .rays {
            opacity: 1
        }

        [data-season="winter"] .sun {
            transform: scale(.8);
            opacity: .55
        }

        @keyframes spin {
            to {
                transform: rotate(360deg)
            }
        }

        .trunk,
        .awn,
        .post {
            fill: var(--house)
        }

        .canopy circle,
        .bush circle {
            fill: var(--lc);
            transition: fill .7s
        }

        [data-season="winter"] .canopy,
        [data-season="winter"] .bush {
            display: none
        }

        .bare {
            display: none;
            stroke: var(--house);
            stroke-width: 4;
            stroke-linecap: round;
            fill: none
        }

        [data-season="winter"] .bare {
            display: block
        }

        .blossom {
            display: none;
            fill: #F7A8B8
        }

        [data-season="spring"] .blossom {
            display: block
        }

        .wall {
            fill: var(--wall);
            stroke: var(--ink);
            stroke-width: 3
        }

        .roof {
            fill: var(--house);
            stroke: var(--ink);
            stroke-width: 3;
            stroke-linejoin: round
        }

        .chimney {
            fill: var(--house);
            stroke: var(--ink);
            stroke-width: 3
        }

        .gutter {
            stroke: var(--sky-d);
            stroke-width: 5;
            stroke-linecap: round
        }

        .win {
            fill: var(--glass);
            stroke: var(--ink);
            stroke-width: 3;
            transition: fill .5s
        }

        .mull {
            stroke: var(--ink);
            stroke-width: 2.5
        }

        .door {
            fill: var(--sky-d);
            stroke: var(--ink);
            stroke-width: 3
        }

        .knob {
            fill: var(--ink)
        }

        .step {
            fill: var(--line)
        }

        .mail rect {
            fill: var(--house)
        }

        .s {
            display: none
        }

        [data-season="spring"] .spring,
        [data-season="summer"] .summer,
        [data-season="fall"] .fall,
        [data-season="winter"] .winter {
            display: block
        }

        .bird {
            fill: none;
            stroke: var(--ink);
            stroke-width: 2;
            stroke-linecap: round;
            animation: drift 9s ease-in-out infinite alternate
        }

        .rain line {
            stroke: var(--sky-d);
            stroke-width: 2;
            stroke-linecap: round
        }

        .leafp {
            fill: #E08A3C
        }

        .leafp.b {
            fill: #C9683F
        }

        .leafp.c {
            fill: #E9B54A
        }

        .gleaves ellipse {
            fill: #E08A3C
        }

        .pumpkin circle {
            fill: #E9873A
        }

        .pumpkin rect {
            fill: #5F8A4A
        }

        .snowp {
            fill: #fff;
            opacity: .9
        }

        .snowcap {
            fill: none;
            stroke: #fff;
            stroke-width: 9;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .snowc {
            fill: #fff
        }

        .smoke circle {
            fill: var(--smoke);
            animation: puff 4.2s ease-out infinite
        }

        .smoke circle:nth-child(2) {
            animation-delay: -1.4s
        }

        .smoke circle:nth-child(3) {
            animation-delay: -2.8s
        }

        @keyframes puff {
            0% {
                transform: translate(0, 0) scale(.5);
                opacity: 0
            }

            15% {
                opacity: .75
            }

            100% {
                transform: translate(10px, -64px) scale(1.7);
                opacity: 0
            }
        }

        .snowman circle {
            fill: #fff;
            stroke: var(--line);
            stroke-width: 2
        }

        .snowman .eye {
            fill: #2B1F19;
            stroke: none
        }

        .carrot {
            fill: #E9873A
        }

        .sprinkler rect {
            fill: var(--house)
        }

        .drop {
            fill: var(--sky-d);
            animation: dropp 1.6s ease-in-out infinite
        }

        .drop:nth-child(3) {
            animation-delay: .2s
        }

        .drop:nth-child(4) {
            animation-delay: .4s
        }

        .drop:nth-child(5) {
            animation-delay: .6s
        }

        .drop:nth-child(6) {
            animation-delay: .8s
        }

        @keyframes dropp {

            0%,
            100% {
                opacity: .2;
                transform: translateY(0)
            }

            50% {
                opacity: 1;
                transform: translateY(-6px)
            }
        }

        .p {
            animation: fallp var(--dur) linear infinite;
            animation-delay: var(--del)
        }

        .p.leafp {
            animation-name: leafp
        }

        @keyframes fallp {
            0% {
                transform: translate(0, -30px);
                opacity: 0
            }

            6% {
                opacity: 1
            }

            88% {
                opacity: 1
            }

            100% {
                transform: translate(var(--sw), 330px);
                opacity: 0
            }
        }

        @keyframes leafp {
            0% {
                transform: translate(0, -30px) rotate(0);
                opacity: 0
            }

            6% {
                opacity: 1
            }

            88% {
                opacity: 1
            }

            100% {
                transform: translate(var(--sw), 330px) rotate(520deg);
                opacity: 0
            }
        }

        @media(max-width:900px) {
            .hero {
                grid-template-columns: 1fr;
                padding-top: 92px
            }
        }

        /* ───────── sticky-margin sections ───────── */
        .sec {
            display: grid;
            grid-template-columns: minmax(230px, 31%) minmax(0, 1fr);
            border-bottom: 1.5px solid var(--line)
        }

        .aside {
            background: var(--bg2);
            border-right: 1.5px solid var(--line)
        }

        .aside-in {
            position: sticky;
            top: 0;
            padding: calc(clamp(2.6rem, 6vw, 5rem) + .75rem) clamp(1.2rem, 3.4vw, 2.8rem) clamp(2rem, 4vw, 3rem)
        }

        .aside .num {
            font-size: .68rem;
            font-weight: 800;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--muted)
        }

        .aside .aem {
            font-size: 2.4rem;
            display: block;
            margin: .9rem 0 .7rem;
            line-height: 1
        }

        .aside h2 {
            font-size: clamp(1.8rem, 3.2vw, 2.7rem);
            letter-spacing: -.03em;
            line-height: 1.06
        }

        .aside h2 .hl {
            color: var(--sky-d)
        }

        .aside p {
            color: var(--muted);
            margin-top: .8rem;
            max-width: 32ch;
            font-size: .96rem
        }

        .body {
            padding: clamp(2.4rem, 5vw, 4.4rem) clamp(1.2rem, 4vw, 3.4rem);
            max-width: 1120px;
            min-width: 0
        }

        .sub-h {
            font-size: 1.15rem;
            margin-bottom: .6rem
        }

        @media(max-width:900px) {
            .sec {
                grid-template-columns: 1fr
            }

            .aside {
                border-right: 0;
                border-bottom: 1.5px solid var(--line)
            }

            .aside-in {
                position: static;
                padding: 2.2rem clamp(1.2rem, 4vw, 2rem) 1.6rem
            }

            .aside p {
                max-width: none
            }
        }

        /* ───────── about ───────── */
        .story {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 2rem;
            align-items: start
        }

        .story p {
            color: var(--muted);
            font-size: 1rem
        }

        .story p+p {
            margin-top: .8rem
        }

        .mv {
            display: grid;
            gap: .8rem
        }

        .mvc {
            background: var(--panel);
            border: 1.5px solid var(--line);
            border-radius: var(--r);
            padding: 1.1rem 1.2rem;
            display: flex;
            gap: .9rem
        }

        .mvc .e {
            font-size: 1.5rem
        }

        .mvc b {
            display: block;
            font-size: .7rem;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--sky-d)
        }

        .mvc span {
            font-size: .92rem;
            color: var(--muted)
        }

        .vals {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: .8rem;
            margin: 1.8rem 0 1rem
        }

        .val {
            background: var(--panel);
            border: 1.5px solid var(--line);
            border-radius: var(--r);
            padding: 1rem;
            text-align: center;
            transition: .3s var(--e)
        }

        .val:hover {
            border-color: var(--sky-d);
            transform: translateY(-3px)
        }

        .val .e {
            font-size: 1.5rem;
            display: block
        }

        .val b {
            display: block;
            font-size: .9rem;
            margin-top: .3rem
        }

        .val span {
            font-size: .78rem;
            color: var(--muted)
        }

        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: .45rem;
            align-items: center;
            margin-bottom: 1.8rem
        }

        .tags em {
            font-style: normal;
            font-size: .78rem;
            font-weight: 700;
            color: var(--muted);
            margin-right: .2rem
        }

        .tags span {
            font-size: .76rem;
            font-weight: 700;
            background: var(--panel);
            border: 1.5px solid var(--line);
            border-radius: 999px;
            padding: .32rem .75rem
        }

        .steps {
            background: var(--panel);
            border: 1.5px solid var(--line);
            border-radius: 26px;
            padding: 1.4rem
        }

        .steps-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 1.1rem
        }

        .steps-head h3 {
            font-size: 1.15rem
        }

        .steps-head span {
            font-size: .78rem;
            color: var(--muted)
        }

        .track {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            position: relative;
            margin-bottom: 1rem
        }

        .track::before {
            content: "";
            position: absolute;
            left: 10%;
            right: 10%;
            top: 20px;
            height: 2px;
            background: var(--line)
        }

        .stp {
            position: relative;
            border: 0;
            background: transparent;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .4rem;
            font-size: .74rem;
            font-weight: 700;
            color: var(--muted);
            padding: 0 .2rem
        }

        .stp .dot {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid var(--line);
            background: var(--panel);
            display: grid;
            place-items: center;
            font-size: .9rem;
            transition: .3s
        }

        .stp.on .dot,
        .stp.done .dot {
            background: var(--sky-d);
            border-color: var(--sky-d);
            color: #fff
        }

        .stp.on {
            color: var(--ink)
        }

        .stp-body {
            background: var(--bg2);
            border-radius: 16px;
            padding: 1.1rem 1.2rem;
            display: grid;
            grid-template-columns: auto 1fr;
            gap: .9rem;
            align-items: start;
            min-height: 96px
        }

        .stp-body .e {
            font-size: 1.8rem
        }

        .stp-body b {
            display: block;
            font-size: 1rem
        }

        .stp-body p {
            font-size: .9rem;
            color: var(--muted)
        }

        .stp-nav {
            display: flex;
            gap: .5rem;
            justify-content: flex-end;
            margin-top: .8rem
        }

        @media(max-width:900px) {
            .story {
                grid-template-columns: 1fr
            }

            .vals {
                grid-template-columns: 1fr 1fr
            }
        }

        @media(max-width:560px) {
            .stp .lb {
                display: none
            }

            .vals {
                grid-template-columns: 1fr 1fr
            }
        }

        /* ───────── services: scroll-stacking category cards ───────── */
        .stack {
            display: grid;
            gap: 1rem
        }

        .scard {
            position: sticky;
            top: calc(80px + var(--i)*14px);
            background: var(--tint);
            border: 1.5px solid var(--line);
            border-radius: 26px;
            padding: 1.4rem 1.5rem 1.2rem;
            box-shadow: 0 -14px 34px -26px rgba(0, 0, 0, .45)
        }

        .sc-head {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 1rem;
            align-items: center;
            padding-bottom: .9rem
        }

        .sc-head .cem {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            background: var(--panel);
            border: 1.5px solid var(--line);
            display: grid;
            place-items: center;
            font-size: 1.5rem
        }

        .sc-head h3 {
            font-size: 1.25rem
        }

        .sc-head p {
            font-size: .86rem;
            color: var(--muted)
        }

        .sc-head .cnt {
            font-size: .66rem;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--muted);
            border: 1.5px solid var(--line);
            border-radius: 999px;
            padding: .3rem .7rem;
            white-space: nowrap
        }

        .srow {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: .9rem;
            align-items: start;
            padding: 1rem 0;
            border-top: 1.5px dashed var(--line)
        }

        .srow .sem {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: var(--panel);
            border: 1.5px solid var(--line);
            display: grid;
            place-items: center;
            font-size: 1.2rem
        }

        .srow h4 {
            font-size: 1.02rem;
            display: flex;
            gap: .5rem;
            align-items: baseline;
            flex-wrap: wrap
        }

        .srow h4 .n {
            font-size: .66rem;
            font-weight: 800;
            letter-spacing: .12em;
            color: var(--muted)
        }

        .srow p {
            font-size: .88rem;
            color: var(--muted);
            margin-top: .25rem;
            max-width: 64ch
        }

        @media(max-width:640px) {
            .srow {
                grid-template-columns: auto 1fr
            }

            .srow .ask {
                grid-column: 2;
                justify-self: start
            }

            .sc-head .cnt {
                display: none
            }

            .scard {
                top: calc(70px + var(--i)*10px)
            }
        }

        /* ───────── property mini-tools ───────── */
        .pgrid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            align-items: start
        }

        .pgrid .lede {
            color: var(--muted);
            font-size: 1rem
        }

        .bl {
            list-style: none;
            padding: 0;
            margin: 1.1rem 0 1.4rem;
            display: grid;
            gap: .5rem
        }

        .bl li {
            display: flex;
            gap: .6rem;
            font-size: .95rem;
            align-items: flex-start
        }

        .bl i {
            color: var(--ok);
            margin-top: .2rem
        }

        .ptable {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            background: var(--panel);
            border: 1.5px solid var(--line);
            border-radius: var(--r);
            overflow: hidden;
            font-size: .9rem
        }

        .ptable th,
        .ptable td {
            padding: .85rem .9rem;
            border-bottom: 1.5px solid var(--line);
            text-align: center
        }

        .ptable th:first-child,
        .ptable td:first-child {
            text-align: left;
            font-weight: 600
        }

        .ptable thead th {
            background: var(--bg2);
            font-size: .66rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--muted);
            font-weight: 800
        }

        .ptable tr:last-child td {
            border-bottom: 0
        }

        .ptable .y {
            color: var(--ok);
            font-size: 1.05rem
        }

        .ptable .n {
            color: var(--line);
            font-size: 1.05rem
        }

        .note {
            font-size: .82rem;
            color: var(--muted);
            margin-top: .8rem
        }

        .tool {
            background: var(--panel);
            border: 1.5px solid var(--line);
            border-radius: var(--r);
            padding: 1.2rem
        }

        .lbl {
            display: block;
            font-size: .68rem;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: .35rem
        }

        .inp {
            width: 100%;
            padding: .85rem 1rem;
            border: 1.5px solid var(--line);
            border-radius: 12px;
            background: var(--bg);
            color: var(--ink);
            margin-bottom: .9rem;
            transition: border-color .3s
        }

        .inp:focus {
            outline: none;
            border-color: var(--sky-d)
        }

        textarea.inp {
            min-height: 110px;
            resize: vertical
        }

        .jout {
            margin-top: .2rem;
            background: var(--sky-t);
            border-radius: 14px;
            padding: 1rem 1.1rem;
            font-size: .92rem;
            display: flex;
            gap: .7rem;
            align-items: flex-start
        }

        .jout .e {
            font-size: 1.3rem
        }

        .seg {
            display: inline-flex;
            background: var(--bg2);
            border: 1.5px solid var(--line);
            border-radius: 999px;
            padding: 4px;
            margin-bottom: 1rem
        }

        .seg button {
            border: 0;
            background: transparent;
            border-radius: 999px;
            padding: .5rem 1.1rem;
            font-weight: 700;
            font-size: .85rem;
            color: var(--muted);
            transition: .3s
        }

        .seg button.on {
            background: var(--primary);
            color: var(--primary-ink)
        }

        .rel ul {
            list-style: none;
            padding: 0
        }

        .rel li {
            display: flex;
            gap: .6rem;
            padding: .55rem 0;
            border-top: 1px dashed var(--line);
            font-size: .92rem;
            align-items: flex-start
        }

        .rel li:first-child {
            border-top: 0
        }

        .rel i {
            color: var(--ok);
            margin-top: .2rem
        }

        .doc {
            display: flex;
            gap: .7rem;
            align-items: center;
            padding: .55rem 0;
            border-top: 1px dashed var(--line);
            font-size: .92rem;
            cursor: pointer;
            margin: 0
        }

        .doc:first-of-type {
            border-top: 0
        }

        .doc input {
            width: 18px;
            height: 18px;
            accent-color: var(--sky-d);
            flex: 0 0 auto
        }

        .meter {
            height: 10px;
            background: var(--bg2);
            border-radius: 999px;
            overflow: hidden;
            margin-top: 1rem
        }

        .meter i {
            display: block;
            height: 100%;
            width: 0;
            background: var(--sky-d);
            transition: width .5s var(--e)
        }

        .mtxt {
            font-size: .85rem;
            font-weight: 600;
            margin-top: .5rem
        }

        @media(max-width:1000px) {
            .pgrid {
                grid-template-columns: 1fr
            }
        }

        /* ───────── why: crew speech bubbles ───────── */
        .crew {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.1rem
        }

        .cc {
            display: flex;
            flex-direction: column;
            gap: .9rem
        }

        .bub {
            position: relative;
            background: var(--panel);
            border: 1.5px solid var(--line);
            border-radius: 22px;
            padding: 1.2rem 1.3rem;
            font-size: .95rem;
            line-height: 1.55;
            flex: 1;
            transition: .3s var(--e)
        }

        .bub::after {
            content: "";
            position: absolute;
            left: 26px;
            bottom: -11px;
            width: 20px;
            height: 20px;
            background: var(--panel);
            border-right: 1.5px solid var(--line);
            border-bottom: 1.5px solid var(--line);
            transform: rotate(45deg);
            transition: border-color .3s
        }

        .cc:hover .bub {
            border-color: var(--sky-d);
            transform: translateY(-3px)
        }

        .cc:hover .bub::after {
            border-color: var(--sky-d)
        }

        .bub .pr {
            display: inline-block;
            font-size: .64rem;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--sky-d);
            background: var(--sky-t);
            border-radius: 6px;
            padding: .22rem .5rem;
            margin-bottom: .6rem
        }

        .who {
            display: flex;
            align-items: center;
            gap: .7rem;
            padding-left: .4rem
        }

        .who .av {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: var(--honey-t);
            border: 1.5px solid var(--line);
            display: grid;
            place-items: center;
            font-size: 1.3rem;
            flex: 0 0 auto
        }

        .who b {
            display: block;
            font-size: .92rem
        }

        .who span {
            font-size: .78rem;
            color: var(--muted)
        }

        @media(max-width:1100px) {
            .crew {
                grid-template-columns: 1fr 1fr
            }
        }

        @media(max-width:640px) {
            .crew {
                grid-template-columns: 1fr
            }
        }

        /* ───────── stories: neighbourhood map ───────── */
        .stories {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 1.6rem;
            align-items: center
        }

        .nmap {
            background: var(--panel);
            border: 1.5px solid var(--line);
            border-radius: 26px;
            padding: 1rem;
            position: relative
        }

        .nmap svg {
            width: 100%;
            height: auto;
            display: block
        }

        .nmap .hint {
            position: absolute;
            bottom: .9rem;
            left: 1rem;
            font-size: .72rem;
            font-weight: 700;
            color: var(--muted);
            background: var(--bg2);
            border-radius: 999px;
            padding: .3rem .7rem
        }

        .road {
            fill: none;
            stroke: var(--bg2);
            stroke-width: 26;
            stroke-linecap: round
        }

        .road2 {
            fill: none;
            stroke: var(--line);
            stroke-width: 2;
            stroke-dasharray: 10 10
        }

        .lot {
            cursor: pointer;
            outline: none
        }

        .lot .hb {
            fill: var(--bg);
            stroke: var(--ink);
            stroke-width: 2.5;
            transition: fill .3s
        }

        .lot .hr {
            fill: var(--house);
            stroke: var(--ink);
            stroke-width: 2.5;
            stroke-linejoin: round
        }

        .lot .hd {
            fill: var(--sky-d)
        }

        .lot:hover .hb,
        .lot:focus-visible .hb {
            fill: var(--sky-t)
        }

        .lot.on .hb {
            fill: var(--sky)
        }

        .lot text {
            font-size: 11px;
            font-weight: 700;
            fill: var(--muted);
            text-anchor: middle;
            pointer-events: none;
            font-family: var(--font)
        }

        .lot.on text {
            fill: var(--ink)
        }

        .lot .pin {
            display: none;
            font-size: 18px
        }

        .lot.on .pin {
            display: block;
            animation: bounce 1.2s ease-in-out infinite
        }

        @keyframes bounce {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-6px)
            }
        }

        .tre {
            fill: var(--l-summer);
            opacity: .6
        }

        .tcard {
            background: var(--panel);
            border: 1.5px solid var(--line);
            border-radius: 26px;
            padding: 1.6rem;
            box-shadow: var(--shadow)
        }

        .tcard .stars {
            color: var(--honey);
            letter-spacing: .14em;
            margin-bottom: .6rem
        }

        .tcard q {
            font-size: 1.05rem;
            line-height: 1.6;
            quotes: "\201C" "\201D";
            transition: opacity .3s;
            display: block
        }

        .tcard .who {
            margin-top: 1.1rem;
            padding: 0
        }

        .tnav {
            display: flex;
            gap: .5rem;
            margin-top: 1.1rem
        }

        .tnav button {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1.5px solid var(--line);
            background: var(--bg);
            transition: .3s
        }

        .tnav button:hover {
            background: var(--primary);
            color: var(--primary-ink);
            border-color: var(--primary)
        }

        @media(max-width:1000px) {
            .stories {
                grid-template-columns: 1fr
            }
        }

        /* ───────── faq: open answers + topic filter ───────── */
        .fchips {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            margin-bottom: 1.4rem
        }

        .fchips button {
            border: 1.5px solid var(--line);
            background: var(--panel);
            border-radius: 999px;
            padding: .5rem 1rem;
            font-size: .82rem;
            font-weight: 700;
            color: var(--muted);
            transition: .3s
        }

        .fchips button.on {
            background: var(--ink);
            color: var(--bg);
            border-color: var(--ink)
        }

        .flist {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem
        }

        .fi {
            background: var(--panel);
            border: 1.5px solid var(--line);
            border-radius: var(--r);
            padding: 1.2rem 1.3rem;
            transition: .3s var(--e);
            animation: up .4s var(--e)
        }

        .fi:hover {
            border-color: var(--sky-d)
        }

        .fi .tg {
            display: inline-block;
            font-size: .62rem;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--sky-d);
            background: var(--sky-t);
            border-radius: 6px;
            padding: .2rem .5rem;
            margin-bottom: .6rem
        }

        .fi h4 {
            font-size: 1.02rem;
            margin-bottom: .4rem
        }

        .fi p {
            font-size: .9rem;
            color: var(--muted)
        }

        @media(max-width:800px) {
            .flist {
                grid-template-columns: 1fr
            }
        }

        /* ───────── newsletter + contact ───────── */
        .nlgrid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.4rem;
            align-items: start
        }

        .pc {
            background: var(--panel);
            border: 1.5px solid var(--line);
            border-radius: 26px;
            padding: 1.5rem
        }

        .two {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: .9rem
        }

        .chk {
            display: flex;
            gap: .6rem;
            align-items: flex-start;
            font-size: .84rem;
            color: var(--muted);
            margin: .2rem 0 1rem
        }

        .chk input {
            width: 18px;
            height: 18px;
            margin-top: .15rem;
            accent-color: var(--sky-d);
            flex: 0 0 auto
        }

        .ok {
            display: none;
            margin-top: .9rem;
            background: var(--sky-t);
            border: 1.5px solid var(--sky-d);
            border-radius: 12px;
            padding: .8rem 1rem;
            font-weight: 600;
            font-size: .9rem
        }

        .ok.is-on {
            display: block;
            animation: up .4s var(--e)
        }

        @keyframes up {
            from {
                opacity: 0;
                transform: translateY(8px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .unsub {
            font-size: .84rem;
            color: var(--muted);
            margin-top: .9rem
        }

        .unsub button {
            border: 0;
            background: none;
            color: var(--sky-d);
            font-weight: 700;
            text-decoration: underline;
            padding: 0
        }

        .months {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: .5rem;
            margin-top: 1rem
        }

        .mo {
            background: var(--bg2);
            border-radius: 14px;
            padding: .7rem .5rem;
            text-align: center
        }

        .mo b {
            display: block;
            font-size: .66rem;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--muted)
        }

        .mo .e {
            font-size: 1.2rem;
            display: block;
            margin: .15rem 0
        }

        .mo span {
            font-size: .72rem;
            font-weight: 600;
            line-height: 1.3;
            display: block
        }

        .cgrid {
            display: grid;
            grid-template-columns: 1.15fr .85fr;
            gap: 1.4rem;
            align-items: start
        }

        .info .ir {
            display: flex;
            gap: .8rem;
            align-items: flex-start;
            padding: .85rem 0;
            border-top: 1px dashed var(--line)
        }

        .info .ir:first-child {
            border-top: 0;
            padding-top: 0
        }

        .info .ie {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: var(--sky-t);
            display: grid;
            place-items: center;
            font-size: 1.1rem;
            flex: 0 0 auto
        }

        .info b {
            display: block;
            font-size: .66rem;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--muted)
        }

        .info span {
            font-size: .92rem;
            font-weight: 500
        }

        .mapbox {
            margin-top: 1rem;
            border: 1.5px dashed var(--line);
            border-radius: 16px;
            overflow: hidden;
            position: relative;
            background: var(--bg2)
        }

        .mapbox svg {
            display: block;
            width: 100%;
            height: auto
        }

        .mapbox .ml {
            position: absolute;
            bottom: .6rem;
            left: .8rem;
            font-size: .7rem;
            font-weight: 700;
            color: var(--muted);
            background: var(--panel);
            border-radius: 999px;
            padding: .25rem .6rem
        }

        @media(max-width:1000px) {

            .nlgrid,
            .cgrid {
                grid-template-columns: 1fr
            }
        }

        @media(max-width:560px) {
            .two {
                grid-template-columns: 1fr
            }

            .months {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        /* ───────── footer ───────── */
        footer {
            background: var(--primary);
            color: var(--primary-ink);
            border-radius: 30px 30px 0 0;
            padding: clamp(2.6rem, 5vw, 4rem) clamp(1.2rem, 4vw, 3.4rem) 6.5rem
        }

        [data-theme="dark"] footer {
            background: #0F0B09;
            color: #F3ECE3
        }

        .fgrid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
            gap: 2rem
        }

        footer h5 {
            font-size: .7rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--honey);
            margin: 0 0 .9rem;
            font-weight: 800
        }

        footer a {
            display: block;
            opacity: .85;
            font-size: .9rem;
            padding: .2rem 0;
            transition: .3s
        }

        footer a:hover {
            opacity: 1;
            color: var(--sky)
        }

        footer p {
            opacity: .85;
            font-size: .9rem
        }

        .fbrand {
            display: flex;
            align-items: center;
            gap: .6rem;
            font-weight: 800;
            font-size: 1.25rem;
            letter-spacing: -.03em;
            margin-bottom: .8rem
        }

        .fbrand .mark {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .14);
            display: grid;
            place-items: center
        }

        .soc {
            display: flex;
            gap: .5rem;
            margin-top: 1rem
        }

        .soc a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1.5px solid rgba(255, 255, 255, .28);
            display: grid;
            place-items: center;
            padding: 0;
            opacity: 1
        }

        .soc a:hover {
            background: rgba(255, 255, 255, .12)
        }

        .fbot {
            border-top: 1px solid rgba(255, 255, 255, .18);
            margin-top: 2rem;
            padding-top: 1.2rem;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: .8rem;
            font-size: .82rem;
            opacity: .9
        }

        .fbot button {
            border: 0;
            background: none;
            color: inherit;
            text-decoration: underline;
            font-weight: 600;
            padding: 0
        }

        @media(max-width:900px) {
            .fgrid {
                grid-template-columns: 1fr 1fr
            }
        }

        @media(max-width:560px) {
            .fgrid {
                grid-template-columns: 1fr
            }
        }

        /* ───────── modals / toast / reveal ───────── */

        .modal {
            z-index: 100000;
        }

        .modal-content {
            background: var(--panel);
            color: var(--ink);
            border: 1.5px solid var(--line);
            border-radius: 22px
        }

        .modal-header,
        .modal-footer {
            border-color: var(--line)
        }

        .modal-title {
            font-weight: 800;
            font-size: 1.25rem
        }

        [data-theme="dark"] .btn-close {
            filter: invert(1) grayscale(1)
        }

        .leg {
            padding: .9rem 0;
            border-bottom: 1px dashed var(--line)
        }

        .leg:last-child {
            border-bottom: 0
        }

        .leg h6 {
            font-weight: 800;
            color: var(--sky-d);
            margin: 0 0 .3rem;
            font-size: .95rem
        }

        .leg p {
            font-size: .9rem;
            color: var(--muted)
        }

        .toast-x {
            position: fixed;
            left: 50%;
            bottom: 84px;
            transform: translate(-50%, 12px);
            z-index: 1200;
            background: var(--ink);
            color: var(--bg);
            border-radius: 999px;
            padding: .65rem 1.1rem;
            font-size: .84rem;
            font-weight: 700;
            opacity: 0;
            visibility: hidden;
            transition: .3s var(--e);
            white-space: nowrap
        }

        .toast-x.on {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, 0)
        }

        [data-rv] {
            opacity: 0;
            transform: translateY(18px);
            transition: opacity .75s var(--e), transform .75s var(--e);
            transition-delay: var(--d, 0s)
        }

        [data-rv="l"] {
            transform: translateX(-22px)
        }

        [data-rv="r"] {
            transform: translateX(22px)
        }

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

        @media(prefers-reduced-motion:reduce) {
            * {
                animation: none !important;
                transition: none !important
            }

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

/* Standalone legal and unsubscribe page spacing; original components and theme tokens are reused. */
.legal-page .body > .pc { max-width: 980px; }
.legal-page .leg:last-child { border-bottom: 0; }
.unsub-page .body > .pc { max-width: 680px; }
.unsub-page .intro { color: var(--muted); margin-bottom: 1rem; }
.unsub a { color: var(--sky-d); font-weight: 700; text-underline-offset: 3px; }
.fbot a { color: var(--sky-d); font-weight: 700; text-decoration: none; }
.fbot a:hover { text-decoration: underline; }