/* ---------- tokens ---------- */
:root {
    --bg: #F3F4F0;
    --surface: #FFFFFF;
    --surface2: #E5E8E0;

    --ink: #20251F;
    --muted: #697166;
    --line: #D8DDD3;

    --brand: #536B2F;
    --brand-deep: #35471D;
    --on-brand: #FFFFFF;
    --brand-soft: #E7EED8;

    --accent: #7754D9;
    --on-accent: #FFFFFF;
    --accent-soft: #EEE8FF;

    --blue-soft: #E2EAF6;
    --yellow-soft: #F2F2B8;
    --pink-soft: #F4E4F0;

    --shadow: 0 14px 34px rgba(32, 37, 31, .09);
    --shadow-sm: 0 6px 18px rgba(32, 37, 31, .06);

    --r: 20px;
    --r-sm: 14px;
    --wrap: min(1140px, 100% - 40px);
    --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html[data-theme="dark"] {
    --bg: #151713;
    --surface: #20231D;
    --surface2: #191C17;

    --ink: #F1F3EA;
    --muted: #A8B09F;
    --line: #353B30;

    --brand: #B5E65C;
    --brand-deep: #C8F47D;
    --on-brand: #202A12;
    --brand-soft: #2A361D;

    --accent: #B49AFF;
    --on-accent: #211536;
    --accent-soft: #34264D;

    --blue-soft: #202C3C;
    --yellow-soft: #383A20;
    --pink-soft: #382438;

    --shadow: 0 14px 34px rgba(0, 0, 0, .48);
    --shadow-sm: 0 6px 18px rgba(0, 0, 0, .34);
}
        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%
        }

        body {
            margin: 0;
            background: var(--bg);
            color: var(--ink);
            font-family: var(--font);
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
            transition: background .35s ease, color .35s ease
        }

        body.lock {
            overflow: hidden
        }

        ::selection {
            background: var(--brand);
            color: var(--on-brand)
        }

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

        section {
            scroll-margin-top: 86px
        }

        :focus-visible {
            outline: 3px solid var(--accent);
            outline-offset: 2px;
            border-radius: 6px
        }

        .wrap {
            width: var(--wrap);
            margin-inline: auto
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: var(--font);
            font-weight: 800;
            letter-spacing: -.02em;
            line-height: 1.12;
            margin: 0
        }

        h1 {
            font-size: clamp(2.4rem, 5.4vw, 3.9rem)
        }

        h2 {
            font-size: clamp(1.8rem, 3.6vw, 2.6rem)
        }

        h3 {
            font-size: 1.18rem
        }

        .sub {
            color: var(--muted);
            font-size: clamp(1rem, 1.3vw, 1.08rem);
            max-width: 62ch
        }

        .label {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 999px;
            padding: .35rem .85rem;
            font-size: .78rem;
            font-weight: 700;
            color: var(--brand);
            box-shadow: var(--shadow-sm)
        }

        html[data-theme="dark"] .label {
            color: var(--brand)
        }

        .sec {
            padding: clamp(3.2rem, 7vw, 5.5rem) 0
        }

        .sec-alt {
            background: var(--surface);
            border-block: 1px solid var(--line)
        }

        .sec-head {
            max-width: 760px;
            margin-bottom: 2rem
        }

        .sec-head h2 {
            margin: .8rem 0 .6rem
        }

        .sec-head p {
            color: var(--muted);
            margin: 0
        }

        /* ---------- buttons / inputs ---------- */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            border-radius: 999px;
            padding: .85rem 1.5rem;
            font-weight: 700;
            font-size: .92rem;
            border: 1.5px solid transparent;
            cursor: pointer;
            transition: transform .18s ease, box-shadow .18s ease, background .18s ease
        }

        .btn:hover {
            transform: translateY(-2px)
        }

        .btn:active {
            transform: translateY(0)
        }

        .btn-brand {
            background: var(--brand);
            color: var(--on-brand);
            box-shadow: 0 8px 20px rgba(18, 128, 92, .28)
        }

        .btn-brand:hover {
            background: var(--brand-deep)
        }

        .btn-accent {
            background: var(--accent);
            color: var(--on-accent)
        }

        .btn-line {
            background: var(--surface);
            border-color: var(--line);
            color: var(--ink)
        }

        .btn-line:hover {
            border-color: var(--brand)
        }

        .btn-sm {
            padding: .55rem 1rem;
            font-size: .82rem
        }

        .card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--r);
            box-shadow: var(--shadow-sm)
        }

        .fl {
            display: block;
            margin-bottom: .4rem
        }

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

        .req {
            color: var(--accent)
        }

        .fi {
            width: 100%;
            background: var(--bg);
            border: 1.5px solid var(--line);
            border-radius: 12px;
            padding: .75rem .95rem;
            font: inherit;
            font-size: .92rem;
            color: var(--ink);
            transition: border-color .18s, box-shadow .18s
        }

        .fi::placeholder {
            color: var(--muted);
            opacity: .7
        }

        .fi:focus {
            outline: none;
            border-color: var(--brand);
            box-shadow: 0 0 0 4px var(--brand-soft);
            background: var(--surface)
        }

        select.fi {
            appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363736C' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
            background-repeat: no-repeat;
            background-position: right .85rem center;
            background-size: 14px;
            padding-right: 2.4rem
        }

        textarea.fi {
            min-height: 130px;
            resize: vertical
        }

        input[type="date"].fi::-webkit-calendar-picker-indicator {
            cursor: pointer
        }

        .cbx {
            display: flex;
            gap: .7rem;
            align-items: flex-start;
            margin: 1rem 0
        }

        .cbx input {
            width: 20px;
            height: 20px;
            margin-top: 2px;
            accent-color: var(--brand);
            flex-shrink: 0;
            cursor: pointer
        }

        .cbx label {
            font-size: .86rem;
            color: var(--muted);
            cursor: pointer;
            line-height: 1.55
        }

        .note {
            font-size: .86rem;
            font-weight: 600;
            margin-top: .7rem;
            display: none
        }

        .note.show {
            display: block
        }

        /* ---------- reveal ---------- */
        .fade-up {
            opacity: 0;
            transform: translateY(22px);
            transition: opacity .6s ease, transform .65s ease
        }

        .fade-up.in {
            opacity: 1;
            transform: none
        }

        @media (prefers-reduced-motion:reduce) {
            .fade-up {
                opacity: 1 !important;
                transform: none !important
            }

            html {
                scroll-behavior: auto
            }

            .cloud,
            .smoke,
            .sun-rays,
            .float-card {
                animation: none !important
            }
        }

        /* ---------- nav ---------- */
        .topnote {
            background: var(--ink);
            color: var(--bg);
            font-size: .78rem;
            text-align: center;
            padding: .45rem 1rem
        }

        .topnote b {
            font-weight: 700
        }

        .nav {
            position: sticky;
            top: 0;
            z-index: 900;
            background: color-mix(in srgb, var(--surface) 88%, transparent);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--line)
        }

        .nav-in {
            display: flex;
            align-items: center;
            gap: .9rem;
            height: 72px
        }

        .logo {
            display: flex;
            align-items: center;
            gap: .6rem;
            flex-shrink: 0
        }

        .logo-mk {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: var(--brand);
            display: grid;
            place-items: center;
            font-size: 1.3rem
        }

        .logo b {
            display: block;
            font-size: 1.05rem;
            line-height: 1;
            letter-spacing: -.02em
        }

        .logo small {
            font-size: .68rem;
            color: var(--muted);
            font-weight: 600
        }

        .links {
            display: flex;
            gap: .15rem;
            list-style: none;
            margin: 0 auto;
            padding: 0
        }

        .links a {
            padding: .5rem .75rem;
            border-radius: 10px;
            font-size: .86rem;
            font-weight: 600;
            color: var(--muted);
            transition: .18s;
            white-space: nowrap
        }

        .links a:hover {
            color: var(--ink);
            background: var(--surface2)
        }

        .links a.on {
            color: var(--brand);
            background: var(--brand-soft)
        }

        .icon-btn {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            border: 1.5px solid var(--line);
            background: var(--surface);
            display: grid;
            place-items: center;
            font-size: 1.05rem;
            transition: .18s;
            flex-shrink: 0;
            color: var(--ink)
        }

        .icon-btn:hover {
            border-color: var(--brand);
            transform: translateY(-1px)
        }

        .mmenu {
            display: none;
            border-top: 1px solid var(--line);
            background: var(--surface);
            padding: .6rem 0 1rem
        }

        .mmenu.open {
            display: block
        }

        .mmenu a {
            display: block;
            padding: .7rem 0;
            border-bottom: 1px dashed var(--line);
            font-weight: 700
        }

        .mmenu a:last-of-type {
            border-bottom: 0
        }

        /* ---------- hero ---------- */
        .hero {
            position: relative;
            overflow: hidden;
            padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.2rem, 5vw, 3.5rem);
            background:
                radial-gradient(560px 380px at 92% 8%, var(--accent-soft), transparent 65%),
                radial-gradient(620px 420px at 4% 20%, var(--brand-soft), transparent 62%),
                radial-gradient(520px 380px at 50% 110%, var(--blue-soft), transparent 60%), var(--bg)
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: clamp(1.6rem, 3.5vw, 3rem);
            align-items: center
        }

        .hero h1 {
            margin: 1rem 0 .8rem
        }

        .hero h1 .hl {
            color: var(--brand);
            position: relative;
            white-space: nowrap
        }

        .hero h1 .hl svg {
            position: absolute;
            left: 0;
            right: 0;
            bottom: -.18em;
            width: 100%;
            height: .35em
        }

        .trust {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            margin-top: 1.2rem
        }

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

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

        /* art */
        .art {
            position: relative;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 28px;
            box-shadow: var(--shadow);
            padding: clamp(1rem, 2.5vw, 1.6rem);
            overflow: hidden
        }

        .art-blob {
            position: absolute;
            inset: auto -60px -80px -60px;
            height: 230px;
            background: linear-gradient(180deg, var(--brand-soft), transparent);
            border-radius: 50%
        }

        .art svg {
            position: relative;
            width: 100%;
            height: auto;
            display: block
        }

        .float-card {
            position: absolute;
            display: flex;
            align-items: center;
            gap: .6rem;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 14px;
            box-shadow: var(--shadow);
            padding: .6rem .8rem;
            font-size: .8rem;
            font-weight: 700;
            animation: floatY 5.5s ease-in-out infinite;
            max-width: 220px
        }

        .float-card small {
            display: block;
            font-weight: 500;
            color: var(--muted);
            font-size: .72rem
        }

        .float-card .e {
            font-size: 1.35rem
        }

        .fc1 {
            top: 14px;
            left: 14px
        }

        .fc2 {
            bottom: 18px;
            right: 14px;
            animation-delay: -2.5s
        }

        @keyframes floatY {
            50% {
                transform: translateY(-9px)
            }
        }

        .cloud {
            animation: drift 9s ease-in-out infinite
        }

        .cloud2 {
            animation: drift 12s ease-in-out infinite reverse
        }

        @keyframes drift {
            50% {
                transform: translateX(14px)
            }
        }

        .smoke {
            animation: smokeUp 3.4s ease-in-out infinite;
            opacity: 0
        }

        .smoke.s2 {
            animation-delay: -1.1s
        }

        .smoke.s3 {
            animation-delay: -2.2s
        }

        @keyframes smokeUp {
            0% {
                transform: translateY(0);
                opacity: 0
            }

            25% {
                opacity: .85
            }

            100% {
                transform: translateY(-26px);
                opacity: 0
            }
        }

        .sun-rays {
            transform-origin: center;
            transform-box: fill-box;
            animation: spin 26s linear infinite
        }

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

        .win-glow {
            animation: glow 4s ease-in-out infinite
        }

        @keyframes glow {
            50% {
                opacity: .55
            }
        }

        /* availability */
        .avail {
            margin-top: 1.6rem;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--r);
            box-shadow: var(--shadow);
            padding: clamp(1rem, 2.4vw, 1.5rem)
        }

        .avail-grid {
            display: grid;
            grid-template-columns: 1.3fr 1fr 1fr auto;
            gap: .7rem;
            align-items: end
        }

        .avail-res {
            display: none;
            margin-top: .8rem;
            background: var(--brand-soft);
            border: 1px dashed var(--brand);
            border-radius: 12px;
            padding: .7rem .9rem;
            font-size: .88rem;
            font-weight: 600
        }

        .avail-res.show {
            display: block
        }

        .pop-row {
            display: flex;
            flex-wrap: wrap;
            gap: .45rem;
            margin-top: .8rem;
            align-items: center
        }

        .pop-row .t {
            font-size: .76rem;
            font-weight: 700;
            color: var(--muted)
        }

        .pchip {
            border: 1px solid var(--line);
            background: var(--surface2);
            border-radius: 999px;
            padding: .32rem .75rem;
            font-size: .78rem;
            font-weight: 600;
            transition: .18s;
            color: var(--ink)
        }

        .pchip:hover {
            border-color: var(--brand);
            background: var(--brand-soft)
        }

        /* steps */
        .steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: .9rem;
            margin-top: 1.4rem
        }

        .step {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 1rem 1.1rem;
            display: flex;
            gap: .8rem;
            align-items: flex-start
        }

        .step .n {
            width: 34px;
            height: 34px;
            border-radius: 11px;
            background: var(--brand-soft);
            color: var(--brand);
            font-weight: 800;
            display: grid;
            place-items: center;
            flex-shrink: 0
        }

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

        .step small {
            color: var(--muted);
            font-size: .8rem;
            line-height: 1.5
        }

        /* ---------- about ---------- */
        .about-grid {
            display: grid;
            grid-template-columns: .95fr 1.05fr;
            gap: clamp(1.4rem, 3vw, 2.6rem);
            align-items: start
        }

        .about-cards {
            display: grid;
            gap: .9rem
        }

        .mini-card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 1.1rem 1.2rem
        }

        .mini-card h3 {
            display: flex;
            align-items: center;
            gap: .55rem
        }

        .mini-card h3 .e {
            font-size: 1.3rem
        }

        .mini-card p {
            margin: .5rem 0 0;
            color: var(--muted);
            font-size: .93rem
        }

        .pills {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            list-style: none;
            padding: 0;
            margin: .9rem 0 0
        }

        .pills li {
            background: var(--surface2);
            border: 1px solid var(--line);
            border-radius: 999px;
            padding: .38rem .85rem;
            font-size: .8rem;
            font-weight: 600
        }

        .hl4 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: .9rem;
            margin-top: .9rem
        }

        .hl4 .mini-card {
            display: flex;
            gap: .8rem;
            align-items: flex-start;
            transition: .2s
        }

        .hl4 .mini-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow)
        }

        .hl4 .e {
            font-size: 1.6rem
        }

        @media (min-width: 1021px) {
            .about-grid>.sec-head {
                position: sticky;
                top: 120px;
                /* Accounts for the 72px navbar + breathing room */
            }
        }

        /* ---------- services ---------- */
        .svc-tools {
            display: flex;
            flex-wrap: wrap;
            gap: .6rem;
            align-items: center;
            margin: 1.4rem 0 1rem
        }

        .catpill {
            border: 1.5px solid var(--line);
            background: var(--surface);
            border-radius: 999px;
            padding: .42rem .95rem;
            font-size: .82rem;
            font-weight: 700;
            color: var(--muted);
            transition: .18s
        }

        .catpill:hover {
            border-color: var(--brand)
        }

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

        .searchbox {
            position: relative;
            margin-left: auto;
            min-width: min(280px, 100%);
            flex: 1;
            max-width: 340px
        }

        .searchbox i {
            position: absolute;
            left: .85rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--muted)
        }

        .searchbox input {
            padding-left: 2.4rem
        }

        .svc-list {
            display: grid;
            gap: .7rem
        }

        .svc {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 16px;
            overflow: hidden;
            transition: box-shadow .2s, border-color .2s
        }

        .svc.open {
            border-color: var(--brand);
            box-shadow: var(--shadow)
        }

        .svc-head {
            width: 100%;
            display: flex;
            align-items: center;
            gap: .9rem;
            background: transparent;
            border: 0;
            padding: .95rem 1.1rem;
            text-align: left;
            color: var(--ink)
        }

        .svc-ico {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            font-size: 1.5rem;
            flex-shrink: 0;
            background: var(--brand-soft)
        }

        .svc:nth-child(3n+1) .svc-ico {
            background: var(--brand-soft)
        }

        .svc:nth-child(3n+2) .svc-ico {
            background: var(--accent-soft)
        }

        .svc:nth-child(3n) .svc-ico {
            background: var(--blue-soft)
        }

        .svc-head b {
            display: block;
            font-size: 1rem;
            line-height: 1.25
        }

        .svc-head small {
            color: var(--muted);
            font-size: .74rem;
            font-weight: 600
        }

        .svc-head .chev {
            margin-left: auto;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1.5px solid var(--line);
            display: grid;
            place-items: center;
            flex-shrink: 0;
            transition: .25s;
            color: var(--muted)
        }

        .svc.open .chev {
            background: var(--brand);
            border-color: var(--brand);
            color: var(--on-brand);
            transform: rotate(180deg)
        }

        .svc-body {
            height: 0;
            overflow: hidden;
            transition: height .45s ease
        }

        .svc-in {
            padding: 0 1.1rem 1.2rem 4.6rem
        }

        .svc-in p {
            margin: 0 0 .8rem;
            color: var(--muted);
            font-size: .93rem
        }

        .bens {
            display: flex;
            flex-wrap: wrap;
            gap: .45rem;
            list-style: none;
            padding: 0;
            margin: 0 0 1rem
        }

        .bens li {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            background: var(--surface2);
            border: 1px solid var(--line);
            border-radius: 8px;
            padding: .3rem .65rem;
            font-size: .78rem;
            font-weight: 600
        }

        .bens i {
            color: var(--brand)
        }

        .empty {
            display: none;
            text-align: center;
            padding: 1.6rem;
            border: 1.5px dashed var(--line);
            border-radius: 14px;
            color: var(--muted);
            font-weight: 600
        }

        /* ---------- why ---------- */
        .why-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: .9rem
        }

        .why {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 18px;
            padding: 1.3rem;
            transition: .2s;
            position: relative;
            overflow: hidden
        }

        .why::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--brand);
            opacity: 0;
            transition: .25s
        }

        .why:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow)
        }

        .why:hover::before {
            opacity: 1
        }

        .why .e {
            font-size: 2rem
        }

        .why h3 {
            margin: .6rem 0 .4rem
        }

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

        /* ---------- pillars ---------- */
        .split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(1.3rem, 3vw, 2.6rem);
            align-items: center
        }

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

        .plan {
            background: var(--bg);
            border: 1px solid var(--line);
            border-radius: 18px;
            padding: 1.3rem;
            display: flex;
            flex-direction: column;
            transition: .2s
        }

        .plan:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow)
        }

        .plan.best {
            background: var(--ink);
            color: var(--bg);
            border-color: var(--ink)
        }

        .plan.best p,
        .plan.best li {
            color: inherit
        }

        .plan.best ul {
            color: inherit
        }

        .plan.best .btn-line {
            background: transparent;
            color: var(--bg);
            border-color: var(--bg)
        }

        .plan h3 {
            margin: .4rem 0
        }

        .plan p {
            color: var(--muted);
            font-size: .88rem;
            margin: 0 0 .8rem
        }

        .plan.best p {
            color: color-mix(in srgb, var(--bg) 75%, transparent)
        }

        .plan ul {
            list-style: none;
            padding: 0;
            margin: 0 0 1.1rem;
            display: grid;
            gap: .4rem;
            font-size: .86rem
        }

        .plan li {
            display: flex;
            gap: .5rem;
            align-items: flex-start
        }

        .plan li i {
            color: var(--brand);
            flex-shrink: 0;
            margin-top: .15rem
        }

        .plan.best li i {
            color: var(--brand)
        }

        .tgl-row {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem
        }

        .tgl {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            border: 1.5px solid var(--line);
            background: var(--surface);
            border-radius: 999px;
            padding: .45rem .9rem;
            font-size: .82rem;
            font-weight: 600;
            cursor: pointer;
            transition: .18s;
            user-select: none;
            color: var(--ink)
        }

        .tgl input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0
        }

        .tgl.on {
            background: var(--brand-soft);
            border-color: var(--brand);
            color: var(--ink)
        }

        .sumbox {
            margin-top: 1rem;
            background: var(--surface);
            border: 1px dashed var(--brand);
            border-radius: 14px;
            padding: 1rem 1.1rem;
            font-size: .9rem
        }

        .sumbox b {
            font-weight: 800
        }

        .tipbox {
            margin-top: 1rem;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 1.1rem 1.2rem;
            box-shadow: var(--shadow-sm)
        }

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

        .re3 .mini-card {
            text-align: left
        }

        .re3 .e {
            font-size: 2rem
        }

        .calc {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 18px;
            padding: 1.3rem;
            box-shadow: var(--shadow-sm)
        }

        .calc-out {
            background: var(--brand);
            color: var(--on-brand);
            border-radius: 14px;
            text-align: center;
            padding: 1rem;
            margin-top: 1rem
        }

        .calc-out .big {
            font-size: clamp(1.8rem, 4vw, 2.4rem);
            font-weight: 800;
            letter-spacing: -.02em;
            line-height: 1
        }

        input[type=range] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 8px;
            border-radius: 99px;
            background: var(--surface2);
            border: 1px solid var(--line);
            margin: .6rem 0
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--brand);
            border: 3px solid var(--surface);
            box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
            cursor: grab
        }

        input[type=range]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--brand);
            border: 3px solid var(--surface);
            cursor: grab
        }

        /* ---------- testimonials ---------- */
        .t-shell {
            max-width: 760px;
            margin-inline: auto;
            text-align: center
        }

        .t-card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 24px;
            box-shadow: var(--shadow);
            padding: clamp(1.5rem, 4vw, 2.5rem);
            min-height: 340px;
            display: flex;
            flex-direction: column;
            justify-content: center
        }

        .t-card.swap {
            animation: swap .45s ease
        }

        @keyframes swap {
            from {
                opacity: 0;
                transform: translateY(12px)
            }
        }

        .stars {
            color: #E8A100;
            letter-spacing: .2em;
            font-size: .95rem
        }

        html[data-theme="dark"] .stars {
            color: #FFC53D
        }

        .t-quote {
            font-size: clamp(1.05rem, 2vw, 1.3rem);
            line-height: 1.6;
            font-weight: 500;
            margin: 1rem 0 1.3rem
        }

        .t-who {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .8rem
        }

        .t-av {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--brand-soft);
            display: grid;
            place-items: center;
            font-size: 1.4rem;
            flex-shrink: 0
        }

        .t-who b {
            display: block;
            line-height: 1.2
        }

        .t-who small {
            color: var(--muted)
        }

        .t-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .8rem;
            margin-top: 1.3rem
        }

        .t-dots {
            display: flex;
            gap: .4rem
        }

        .t-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 0;
            background: var(--line);
            padding: 0;
            transition: .25s
        }

        .t-dot.on {
            background: var(--brand);
            width: 28px;
            border-radius: 99px
        }

        /* ---------- faq ---------- */
        .faq-bar {
            display: flex;
            gap: .7rem;
            flex-wrap: wrap;
            align-items: center;
            margin: 1.2rem 0
        }

        .qa {
            border: 1px solid var(--line);
            border-radius: 14px;
            background: var(--surface);
            overflow: hidden;
            margin-bottom: .6rem;
            transition: .2s
        }

        .qa.open {
            border-color: var(--brand);
            box-shadow: var(--shadow-sm)
        }

        .qa button {
            width: 100%;
            display: flex;
            gap: .8rem;
            align-items: center;
            text-align: left;
            background: none;
            border: 0;
            padding: 1rem 1.1rem;
            font-weight: 700;
            font-size: .95rem;
            color: var(--ink)
        }

        .qa .qi {
            width: 28px;
            height: 28px;
            border-radius: 9px;
            background: var(--surface2);
            border: 1px solid var(--line);
            display: grid;
            place-items: center;
            flex-shrink: 0;
            transition: .25s;
            font-size: .85rem
        }

        .qa.open .qi {
            background: var(--brand);
            color: var(--on-brand);
            border-color: var(--brand);
            transform: rotate(45deg)
        }

        .qa .ans {
            height: 0;
            overflow: hidden;
            transition: height .4s ease
        }

        .qa .ans p {
            margin: 0;
            padding: 0 1.1rem 1.1rem 3.2rem;
            color: var(--muted);
            font-size: .9rem
        }

        /* ---------- newsletter ---------- */
        .news-box {
            background: linear-gradient(135deg, var(--brand-soft), var(--accent-soft));
            border: 1px solid var(--line);
            border-radius: 28px;
            padding: clamp(1.6rem, 4vw, 2.8rem);
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: clamp(1.4rem, 3vw, 2.6rem);
            align-items: center
        }

        .news-box h2 {
            margin: .7rem 0 .6rem
        }

        .news-box p {
            color: var(--muted);
            margin: 0 0 .4rem
        }

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

        /* ---------- contact ---------- */
        .ct-grid {
            display: grid;
            grid-template-columns: 1.15fr .85fr;
            gap: 1.2rem;
            align-items: start
        }

        .ct-form {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--r);
            box-shadow: var(--shadow);
            padding: clamp(1.2rem, 2.6vw, 1.9rem)
        }

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

        .info-stack {
            display: grid;
            gap: .7rem
        }

        .info {
            display: flex;
            gap: .85rem;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: .9rem 1rem;
            transition: .2s
        }

        .info:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-sm)
        }

        .info .e {
            font-size: 1.4rem
        }

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

        .map {
            border: 1px solid var(--line);
            border-radius: 16px;
            background: var(--surface2);
            height: 200px;
            position: relative;
            overflow: hidden;
            display: grid;
            place-items: center
        }

        .map .grid {
            position: absolute;
            inset: 0;
            background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
            background-size: 36px 36px;
            opacity: .6
        }

        .map .road {
            position: absolute;
            left: 0;
            right: 0;
            top: 54%;
            height: 14px;
            background: var(--surface);
            border-block: 1px solid var(--line)
        }

        .map .pin {
            position: relative;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 12px;
            box-shadow: var(--shadow-sm);
            padding: .55rem .9rem;
            text-align: center;
            font-size: .78rem;
            font-weight: 700
        }

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

        /* ---------- footer ---------- */
        footer {
            background: #10201A;
            color: #E9F2ED;
            border-top: 1px solid #10201A
        }

        html[data-theme="dark"] footer {
            background: #0A120F
        }

        .f-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
            gap: 2rem;
            padding: 3rem 0 2rem
        }

        .f-grid h4 {
            font-size: .75rem;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: #8FD8B6;
            margin-bottom: 1rem
        }

        .f-grid ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: .5rem;
            font-size: .88rem;
            color: #C4D6CD
        }

        .f-grid a:hover {
            color: #fff
        }

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

        .soc a {
            width: 38px;
            height: 38px;
            border-radius: 11px;
            border: 1px solid rgba(255, 255, 255, .25);
            display: grid;
            place-items: center;
            transition: .2s;
            color: #E9F2ED
        }

        .soc a:hover {
            background: var(--brand);
            border-color: var(--brand)
        }

        .f-bot {
            border-top: 1px solid rgba(255, 255, 255, .15);
            padding: 1rem 0;
            display: flex;
            flex-wrap: wrap;
            gap: .7rem;
            justify-content: space-between;
            font-size: .8rem;
            color: #A9C2B7
        }

        .f-bot button {
            background: none;
            border: 0;
            color: inherit;
            text-decoration: underline;
            text-underline-offset: 4px;
            padding: 0
        }

        .f-bot button:hover {
            color: #fff
        }

        /* ---------- modals / toast ---------- */
        .modal-content.nb {
            background: var(--surface);
            color: var(--ink);
            border: 1px solid var(--line);
            border-radius: 18px;
            box-shadow: var(--shadow)
        }

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

        .nb .modal-title {
            font-weight: 800;
            letter-spacing: -.02em
        }

        .nb .modal-body {
            max-height: 64vh;
            overflow: auto
        }

        .nb h6 {
            font-size: .72rem;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--brand);
            margin: 1.4rem 0 .4rem;
            font-weight: 800
        }

        .nb h6:first-child {
            margin-top: 0
        }

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

        .toastx {
            position: fixed;
            left: 50%;
            bottom: 22px;
            transform: translate(-50%, 180%);
            z-index: 2000;
            background: var(--ink);
            color: var(--bg);
            border-radius: 999px;
            padding: .7rem 1.2rem;
            font-size: .86rem;
            font-weight: 600;
            box-shadow: var(--shadow);
            transition: transform .4s ease;
            max-width: 92vw
        }

        .toastx.show {
            transform: translate(-50%, 0)
        }

        .topbtn {
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 900;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            border: 1px solid var(--line);
            background: var(--surface);
            color: var(--ink);
            box-shadow: var(--shadow-sm);
            opacity: 0;
            pointer-events: none;
            transition: .3s
        }

        .topbtn.on {
            opacity: 1;
            pointer-events: auto
        }

        .topbtn:hover {
            background: var(--brand);
            color: var(--on-brand);
            border-color: var(--brand)
        }

        /* ---------- responsive ---------- */
        @media (max-width:1020px) {
            .links {
                display: none
            }

            .hero-grid,
            .about-grid,
            .split,
            .ct-grid,
            .news-box {
                grid-template-columns: 1fr
            }

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

            .plan-grid,
            .re3 {
                grid-template-columns: 1fr
            }

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

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

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

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

            .f2,
            .nf2 {
                grid-template-columns: 1fr
            }

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

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

            .svc-in {
                padding-left: 1.1rem
            }

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

            .float-card {
                position: static;
                margin-top: .6rem;
                max-width: none;
                animation: none
            }

            .art {
                display: flex;
                flex-direction: column
            }
        }
   

        /* =========================================================
   1. PASTE YOUR ENTIRE EXISTING <style> CSS FROM index.html
   ========================================================= */

/* Example:
:root {
  --bg: #FAF5EE;
  ...
}
*/

/* =========================================================
   2. ADD THESE EXTRA PAGE HELPER STYLES
   ========================================================= */

.form-shell {
  max-width: 560px;
  margin-inline: auto;
}

.legal-shell {
  max-width: 900px;
  margin-inline: auto;
}

.page-note {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.f-bot a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.f-bot a:hover {
  color: #fff;
}

.static-content {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.2rem, 2.6vw, 1.9rem);
}

.static-content h6 {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 1.4rem 0 0.4rem;
  font-weight: 800;
}

.static-content h6:first-child {
  margin-top: 0;
}

.static-content p,
.static-content li {
  font-size: 0.9rem;
  color: var(--muted);
}