:root {
    --paper: #f5fbff;
    --paper-deep: #e6f5ff;
    --card: #ffffff;
    --ink: #12324d;
    --ink-soft: #45627d;
    --muted: #7b95ad;
    --rule: rgba(18, 50, 77, .12);
    --rule-soft: rgba(18, 50, 77, .07);

    --purple: #38bdf8;         /* Primary Sky Blue */
    --purple-deep: #0284c7;    /* Deep Sky Blue */
    --purple-soft: rgba(56, 189, 248, .10);

    --brass: #7dd3fc;          /* Light Sky Blue */
    --brass-deep: #0ea5e9;     /* Bright Sky Blue */
    --brass-soft: rgba(125, 211, 252, .20);

    --rose: #cfefff;
    --mint: #d8f3ff;
    --sky: #e0f2fe;

    --shadow: 0 30px 60px rgba(2, 132, 199, .14);
    --shadow-sm: 0 12px 26px rgba(2, 132, 199, .09);

    --r: 16px;
    --rl: 22px;
    --rx: 30px;

    --display: 'Fraunces', serif;
    --body-f: 'Public Sans', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
}

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        html {
            scroll-behavior: smooth
        }

        body {
            min-width: 320px;
            overflow-x: hidden;
            background: var(--paper);
            color: var(--ink);
            font-family: var(--body-f);
            font-size: 16px;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased
        }

        body.lock {
            overflow: hidden
        }

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

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

        ul {
            list-style: none
        }

        button {
            font: inherit;
            cursor: pointer;
            background: none;
            border: none;
            color: inherit
        }

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

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 28px
        }

        em {
            font-family: var(--display);
            font-style: italic;
            font-weight: 500;
            color: var(--purple)
        }

        .title {
            font-family: var(--display);
            font-weight: 500;
            font-size: clamp(2rem, 3.4vw, 2.9rem);
            line-height: 1.14;
            letter-spacing: -.01em;
            color: var(--ink)
        }

        .copy {
            color: var(--ink-soft);
            font-size: 1.03rem;
            max-width: 46ch;
            margin-top: 16px
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--mono);
            font-size: .72rem;
            letter-spacing: .06em;
            text-transform: uppercase;
            font-weight: 600;
            color: var(--purple);
            background: var(--purple-soft);
            border: 1px solid rgba(75, 50, 195, .16);
            padding: 8px 16px;
            border-radius: 999px
        }

        .eyebrow::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--brass)
        }

        .eyebrow.brass {
            color: var(--purple-deep);
            background: var(--brass-soft);
            border-color: rgba(255, 201, 74, .35)
        }

        .eyebrow.brass::before {
            background: var(--purple)
        }

        /* Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            font-size: .95rem;
            padding: 14px 26px;
            border-radius: 999px;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
            white-space: nowrap
        }

        .btn i {
            font-size: .82em
        }

        .btn-primary {
            background: var(--ink);
            color: #fff;
            box-shadow: var(--shadow-sm)
        }

        .btn-primary:hover {
            background: var(--purple);
            transform: translateY(-2px)
        }

        .btn-outline {
            background: transparent;
            color: var(--ink);
            border: 1.5px solid var(--rule)
        }

        .btn-outline:hover {
            border-color: var(--ink);
            transform: translateY(-2px)
        }

        .btn-brass {
            background: var(--brass);
            color: var(--purple-deep);
            box-shadow: 0 14px 28px rgba(255, 201, 74, .35)
        }

        .btn-brass:hover {
            background: var(--brass-deep);
            transform: translateY(-2px)
        }

        /* Header */
        .header {
            position: sticky;
            top: 0;
            z-index: 60;
            padding: 18px 0;
            transition: all .25s ease
        }

        .header .nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(255, 255, 255, .0);
            border-radius: 999px;
            padding: 10px 10px 10px 22px;
            transition: all .25s ease
        }

        .header.scrolled .nav {
            background: #fff;
            box-shadow: var(--shadow-sm);
        }

        .header.scrolled {
            padding: 12px 0
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: var(--display);
            font-weight: 600;
            font-size: 1.2rem
        }

        .seal {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: var(--purple);
            color: #fff;
            display: grid;
            place-items: center;
            font-size: .85rem
        }

        nav {
            display: flex;
            align-items: center;
            gap: 30px
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 26px;
            font-size: .93rem;
            font-weight: 500;
            color: var(--ink-soft)
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--purple)
        }

        .nav-actions {
            display: none
        }

        .menu-btn {
            width: 42px;
            height: 42px;
            border-radius: 999px;
            background: #fff;
            box-shadow: var(--shadow-sm);
            display: grid;
            place-items: center
        }

        .mobile {
            position: fixed;
            inset: 0;
            background: rgba(28, 26, 43, .35);
            backdrop-filter: blur(4px);
            z-index: 90;
            display: none
        }

        .mobile.show {
            display: block
        }

        .mobile-box {
            position: absolute;
            top: 14px;
            right: 14px;
            left: 14px;
            background: #fff;
            border-radius: var(--rl);
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            box-shadow: var(--shadow)
        }

        .mobile-box a {
            display: flex;
            justify-content: space-between;
            padding: 14px 10px;
            border-bottom: 1px solid var(--rule-soft);
            font-weight: 500
        }

        .mobile-box a.btn {
            justify-content: center;
            margin-top: 10px;
            border-bottom: none
        }

        /* Hero */
        .hero {
            padding: 50px 0 70px;
            position: relative;
            overflow: hidden
        }

        .hero::before {
            content: "";
            position: absolute;
            top: -120px;
            right: -160px;
            width: 480px;
            height: 480px;
            background: radial-gradient(circle, var(--brass-soft), transparent 70%);
            z-index: 0
        }

        .hero-layout {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 60px;
            align-items: center;
            position: relative;
            z-index: 1
        }

        .hero-title {
            font-family: var(--display);
            font-weight: 500;
            font-size: clamp(2.4rem, 4.4vw, 3.6rem);
            line-height: 1.08;
            letter-spacing: -.01em;
            margin: 22px 0 20px
        }

        .hero-copy {
            color: var(--ink-soft);
            max-width: 48ch;
            font-size: 1.05rem
        }

        .hero-actions {
            display: flex;
            gap: 14px;
            margin: 30px 0 40px;
            flex-wrap: wrap
        }

        .hero-summary {
            display: flex;
            gap: 34px;
            flex-wrap: wrap
        }

        .hero-summary div {
            display: flex;
            flex-direction: column
        }

        .hero-summary b {
            font-family: var(--display);
            font-size: 1.8rem;
            color: var(--purple)
        }

        .hero-summary span {
            font-size: .82rem;
            color: var(--muted)
        }

        /* Hero statement card (illustrated stack) */
        .statement {
            background: var(--card);
            border-radius: var(--rx);
            padding: 28px;
            box-shadow: var(--shadow);
            border: 1px solid var(--rule-soft);
            transform: rotate(1.4deg);
            position: relative
        }

        .statement::after {
            content: "";
            position: absolute;
            inset: 14px -14px auto auto;
            width: 92px;
            height: 92px;
            background: var(--purple);
            border-radius: 20px;
            z-index: -1;
            transform: rotate(-8deg)
        }

        .statement-head h3 {
            font-family: var(--display);
            font-size: 1.3rem;
            font-weight: 500;
            margin-bottom: 18px
        }

        .statement-rows {
            display: flex;
            flex-direction: column;
            gap: 10px
        }

        .statement-row {
            display: flex;
            align-items: center;
            gap: 14px;
            background: var(--paper);
            border-radius: 16px;
            padding: 12px 14px;
            transition: transform .2s ease
        }

        .statement-row:hover {
            transform: translateX(4px)
        }

        .statement-row:nth-child(1) .row-icon {
            background: var(--purple);
            color: #fff
        }

        .statement-row:nth-child(2) .row-icon {
            background: var(--rose);
            color: var(--purple-deep)
        }

        .statement-row:nth-child(3) .row-icon {
            background: var(--brass);
            color: var(--purple-deep)
        }

        .statement-row:nth-child(4) .row-icon {
            background: var(--mint);
            color: var(--purple-deep)
        }

        .row-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            font-size: .9rem
        }

        .row-body {
            flex: 1;
            min-width: 0
        }

        .row-body b {
            display: block;
            font-size: .95rem
        }

        .row-body p {
            font-size: .78rem;
            color: var(--muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .row-tag {
            font-family: var(--mono);
            font-size: .68rem;
            color: var(--muted);
            background: #fff;
            border: 1px solid var(--rule);
            padding: 5px 10px;
            border-radius: 999px;
            flex-shrink: 0
        }

        /* Ticker */
        .ticker {
            border-top: 1px solid var(--rule);
            border-bottom: 1px solid var(--rule);
            overflow: hidden;
            padding: 16px 0;
            background: var(--paper-deep)
        }

        .ticker-track {
            display: flex;
            gap: 42px;
            width: max-content;
            animation: scroll 34s linear infinite;
            font-family: var(--mono);
            font-size: .8rem;
            color: var(--ink-soft);
            text-transform: uppercase;
            letter-spacing: .05em
        }

        .ticker-track span {
            display: flex;
            align-items: center;
            gap: 10px
        }

        .ticker-track i {
            font-size: .4rem;
            color: var(--brass)
        }

        @keyframes scroll {
            to {
                transform: translateX(-50%)
            }
        }

        /* Sections */
        .section {
            padding: 90px 0
        }

        .rule-top {
            border-top: 1px solid var(--rule)
        }

        .section-head {
            display: grid;
            grid-template-columns: 1.4fr 1fr;
            gap: 40px;
            align-items: end;
            margin-bottom: 50px
        }

        /* About */
        .about-layout {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 50px
        }

        .about-card {
            background: var(--purple);
            color: #fff;
            border-radius: var(--rx);
            padding: 36px;
            height: fit-content;
            position: sticky;
            top: 110px
        }

        .about-card .eyebrow.brass {
            background: rgba(255, 255, 255, .16);
            color: #fff;
            border-color: rgba(255, 255, 255, .25)
        }

        .about-card .eyebrow.brass::before {
            background: var(--brass)
        }

        .about-card h3 {
            font-family: var(--display);
            font-weight: 500;
            font-size: 1.7rem;
            margin: 18px 0 14px;
            line-height: 1.2
        }

        .about-card h3 em {
            color: var(--brass)
        }

        .about-card p {
            color: rgba(255, 255, 255, .8);
            font-size: .96rem
        }

        .metrics {
            display: flex;
            gap: 30px;
            margin: 30px 0 40px;
            flex-wrap: wrap
        }

        .metric b {
            font-family: var(--display);
            font-size: 2rem;
            color: var(--purple);
            display: block
        }

        .metric span {
            font-size: .82rem;
            color: var(--muted)
        }

        .about-lines {
            display: flex;
            flex-direction: column;
            gap: 26px
        }

        .about-line {
            display: flex;
            gap: 20px;
            padding-top: 24px;
            border-top: 1px solid var(--rule)
        }

        .about-line:first-child {
            border-top: none;
            padding-top: 0
        }

        .num {
            font-family: var(--mono);
            font-size: .85rem;
            color: var(--brass-deep);
            font-weight: 600;
            flex-shrink: 0;
            width: 34px
        }

        .about-line h3 {
            font-family: var(--display);
            font-weight: 500;
            font-size: 1.15rem;
            margin-bottom: 6px
        }

        .about-line p {
            color: var(--ink-soft);
            font-size: .93rem
        }

        /* Services */
        .service-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px
        }

        .service-card {
            text-align: left;
            background: var(--card);
            border: 1px solid var(--rule-soft);
            border-radius: var(--rl);
            padding: 26px;
            position: relative;
            box-shadow: var(--shadow-sm);
            transition: transform .2s ease, border-color .2s ease
        }

        .service-card:hover {
            transform: translateY(-4px)
        }

        .service-card.active {
            border-color: var(--purple);
            background: var(--purple-soft)
        }

        .service-open {
            position: absolute;
            top: 22px;
            right: 22px;
            width: 30px;
            height: 30px;
            border-radius: 999px;
            background: var(--paper);
            display: grid;
            place-items: center;
            font-size: .7rem;
            color: var(--purple)
        }

        .service-index {
            font-family: var(--mono);
            font-size: .72rem;
            color: var(--muted)
        }

        .service-icon {
            width: 46px;
            height: 46px;
            border-radius: 13px;
            background: var(--brass-soft);
            color: var(--purple-deep);
            display: grid;
            place-items: center;
            font-size: 1.05rem;
            margin: 16px 0 14px
        }

        .service-card h3 {
            font-family: var(--display);
            font-weight: 500;
            font-size: 1.15rem;
            margin-bottom: 8px
        }

        .service-card p {
            font-size: .88rem;
            color: var(--muted)
        }

        .service-drawer {
            display: none;
            margin-top: 24px;
            background: var(--paper-deep);
            border-radius: var(--rx);
            padding: 34px;
            grid-template-columns: .8fr 1.2fr;
            gap: 34px
        }

        .service-drawer.show {
            display: grid
        }

        .drawer-side .eyebrow {
            margin-bottom: 14px
        }

        .drawer-side h3 {
            font-family: var(--display);
            font-weight: 500;
            font-size: 1.5rem;
            margin-bottom: 10px
        }

        .drawer-side p {
            color: var(--ink-soft);
            font-size: .93rem;
            margin-bottom: 20px
        }

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

        .subservice {
            text-align: left;
            background: #fff;
            border-radius: 14px;
            padding: 18px;
            border: 1px solid var(--rule-soft);
            transition: transform .2s ease
        }

        .subservice:hover {
            transform: translateY(-3px);
            border-color: var(--purple)
        }

        .subservice i {
            color: var(--purple);
            font-size: 1rem;
            margin-bottom: 10px;
            display: block
        }

        .subservice h4 {
            font-family: var(--display);
            font-weight: 500;
            font-size: 1rem;
            margin-bottom: 5px
        }

        .subservice p {
            font-size: .82rem;
            color: var(--muted)
        }

        /* Process */
        .process-layout {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 50px
        }

        .timeline {
            display: flex;
            flex-direction: column;
            gap: 16px
        }

        .step {
            display: grid;
            grid-template-columns: 46px 1fr 40px;
            gap: 20px;
            align-items: flex-start;
            background: var(--card);
            border: 1px solid var(--rule-soft);
            border-radius: var(--rl);
            padding: 24px;
            box-shadow: var(--shadow-sm)
        }

        .step-num {
            font-family: var(--mono);
            font-weight: 600;
            color: var(--brass-deep);
            font-size: .95rem
        }

        .step h3 {
            font-family: var(--display);
            font-weight: 500;
            font-size: 1.1rem;
            margin-bottom: 6px
        }

        .step p {
            font-size: .9rem;
            color: var(--ink-soft)
        }

        .step>i {
            color: var(--purple);
            font-size: 1.1rem;
            justify-self: center;
            margin-top: 4px
        }

        /* Why */
        .why-grid {
            display: grid;
            grid-template-columns: 1.3fr 1fr 1fr;
            gap: 20px
        }

        .why-card {
            background: var(--card);
            border: 1px solid var(--rule-soft);
            border-radius: var(--rx);
            padding: 30px;
            box-shadow: var(--shadow-sm)
        }

        .why-card.primary {
            background: var(--purple);
            color: #fff;
            border: none
        }

        .why-card.primary p {
            color: rgba(255, 255, 255, .78)
        }

        .why-icon {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            background: var(--brass-soft);
            color: var(--purple-deep);
            display: grid;
            place-items: center;
            font-size: 1.1rem;
            margin-bottom: 20px
        }

        .why-card.primary .why-icon {
            background: rgba(255, 255, 255, .18);
            color: var(--brass)
        }

        .why-card h3 {
            font-family: var(--display);
            font-weight: 500;
            font-size: 1.25rem;
            margin-bottom: 12px;
            line-height: 1.25
        }

        .why-card p {
            color: var(--ink-soft);
            font-size: .92rem
        }

        /* FAQ */
        .faq-layout {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 50px
        }

        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 12px
        }

        .faq-item {
            background: var(--card);
            border: 1px solid var(--rule-soft);
            border-radius: var(--rl);
            overflow: hidden
        }

        .faq-q {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 22px 24px;
            font-weight: 600;
            font-size: .98rem;
            text-align: left
        }

        .faq-q i {
            color: var(--purple);
            transition: transform .2s ease;
            flex-shrink: 0;
            margin-left: 14px
        }

        .faq-item.open .faq-q i {
            transform: rotate(45deg)
        }

        .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height .3s ease
        }

        .faq-item.open .faq-a {
            max-height: 260px
        }

        .faq-a div {
            padding: 0 24px 22px;
            color: var(--ink-soft);
            font-size: .92rem
        }

        /* Contact */
        .contact-shell {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 50px
        }

        .contact-list {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-top: 28px;
            font-size: .93rem
        }

        .contact-list a,
        .contact-list div {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--ink-soft)
        }

        .contact-list i {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: var(--purple-soft);
            color: var(--purple);
            display: grid;
            place-items: center;
            flex-shrink: 0
        }

        .contact-form,
        .newsletter-form {
            background: var(--card);
            border-radius: var(--rx);
            padding: 34px;
            box-shadow: var(--shadow);
            border: 1px solid var(--rule-soft)
        }

        .contact-form h3,
        .newsletter-form h3 {
            font-family: var(--display);
            font-weight: 500;
            font-size: 1.4rem;
            margin-bottom: 6px
        }

        .contact-form>p,
        .newsletter-form>p {
            color: var(--muted);
            font-size: .85rem;
            margin-bottom: 22px
        }

        .newsletter-form input,
        .newsletter-form option,
        .newsletter-form select {
            color: #333;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px
        }

        .field {
            display: flex;
            flex-direction: column;
            gap: 7px;
            margin-bottom: 16px
        }

        .field label {
            font-size: .8rem;
            font-weight: 600;
            color: var(--ink-soft)
        }

        .field input,
        .field select,
        .field textarea {
            background: var(--paper);
            border: 1px solid var(--rule);
            border-radius: 12px;
            padding: 13px 15px;
            font-size: .93rem
        }

        .field input:focus,
        .field select:focus,
        .field textarea:focus {
            outline: 2px solid var(--purple);
            outline-offset: 1px
        }

        .field textarea {
            min-height: 100px;
            resize: vertical
        }

        .consent {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            font-size: .8rem;
            color: var(--muted);
            margin-bottom: 20px
        }

        .consent input {
            margin-top: 3px
        }

        .unsub-btn {
            display: block;
            text-align: center;
            font-size: .82rem;
            color: var(--muted);
            text-decoration: underline;
            margin-top: 14px
        }

        /* Newsletter */
        .newsletter-box {
            background: var(--purple);
            border-radius: var(--rx);
            padding: 50px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            color: #fff
        }

        .newsletter-copy .eyebrow.brass {
            background: rgba(255, 255, 255, .16);
            color: #fff;
            border-color: rgba(255, 255, 255, .25)
        }

        .newsletter-copy .eyebrow.brass::before {
            background: var(--brass)
        }

        .newsletter-box .title {
            color: #fff
        }

        .newsletter-box .copy {
            color: rgba(255, 255, 255, .78)
        }

        .newsletter-points {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 24px
        }

        .newsletter-points span {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: .92rem;
            color: rgba(255, 255, 255, .85)
        }

        .newsletter-points i {
            color: var(--brass)
        }

        .newsletter-form {
            box-shadow: none
        }

        /* Footer */
        footer {
            background: var(--ink);
            color: rgba(255, 255, 255, .7);
            padding: 70px 0 30px
        }

        footer .brand {
            color: #fff
        }

        .footer-copy {
            margin-top: 16px;
            max-width: 38ch;
            font-size: .9rem
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1fr;
            gap: 40px;
            padding-bottom: 40px;
            border-bottom: 1px solid rgba(255, 255, 255, .12)
        }

        .footer-title {
            font-family: var(--display);
            font-weight: 500;
            color: #fff;
            font-size: 1rem;
            margin-bottom: 18px
        }

        .footer-grid ul {
            display: flex;
            flex-direction: column;
            gap: 12px;
            font-size: .9rem
        }

        .footer-grid a:hover {
            color: var(--brass)
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
            padding-top: 26px;
            font-size: .82rem
        }

        .footer-bottom a:hover {
            color: var(--brass)
        }

        /* Overlays / Modals */
        .overlay {
            position: fixed;
            inset: 0;
            background: rgba(28, 26, 43, .5);
            backdrop-filter: blur(4px);
            z-index: 100;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 24px
        }

        .overlay.show {
            display: flex
        }

        .modal {
            background: #fff;
            border-radius: var(--rx);
            padding: 36px;
            max-width: 480px;
            width: 100%;
            max-height: 84vh;
            overflow-y: auto;
            position: relative;
            box-shadow: var(--shadow)
        }

        .modal.wide {
            max-width: 720px
        }

        .modal-close {
            position: absolute;
            top: 18px;
            right: 18px;
            width: 34px;
            height: 34px;
            border-radius: 999px;
            background: var(--paper);
            display: grid;
            place-items: center
        }

        .modal h3 {
            font-family: var(--display);
            font-weight: 500;
            font-size: 1.4rem;
            margin-bottom: 12px;
            padding-right: 30px
        }

        .modal-intro {
            color: var(--ink-soft);
            font-size: .95rem;
            margin-bottom: 22px
        }

        .legal h4 {
            font-family: var(--display);
            font-weight: 500;
            font-size: 1rem;
            margin: 20px 0 8px
        }

        .legal p {
            font-size: .88rem;
            color: var(--ink-soft);
            margin-bottom: 4px
        }

        .legal-meta {
            font-size: .82rem;
            color: var(--muted);
            margin-bottom: 16px
        }

        /* Toasts */
        .toasts {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 200;
            display: flex;
            flex-direction: column;
            gap: 10px
        }

        .toast {
            background: var(--ink);
            color: #fff;
            padding: 14px 20px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: .9rem;
            box-shadow: var(--shadow);
            animation: rise .25s ease
        }

        .toast i {
            color: var(--brass)
        }

        @keyframes rise {
            from {
                opacity: 0;
                transform: translateY(10px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        /* Reveal animation */
        .reveal {
            opacity: 0;
            transform: translateY(18px);
            transition: opacity .6s ease, transform .6s ease
        }

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

        /* Responsive */
        @media (max-width: 980px) {

            .hero-layout,
            .about-layout,
            .process-layout,
            .why-grid,
            .faq-layout,
            .contact-shell,
            .newsletter-box,
            .section-head {
                grid-template-columns: 1fr
            }

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

            .about-card {
                position: static
            }

            nav .nav-links {
                display: none
            }

            .nav-actions {
                display: block
            }

            .header .btn-primary {
                display: none
            }
        }

        @media (max-width: 640px) {

            .service-grid,
            .subservices,
            .form-row {
                grid-template-columns: 1fr
            }

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

            .service-drawer {
                grid-template-columns: 1fr;
                padding: 24px
            }

            .newsletter-box {
                padding: 30px
            }
        }

        @media (prefers-reduced-motion: reduce) {
            * {
                animation: none !important;
                transition: none !important
            }
        }
    
/* ===== multi-page additions ===== */
:focus-visible{outline:2px solid var(--purple-deep);outline-offset:3px}
.phero{padding:40px 0 20px}
.phero .crumb{display:block;margin-bottom:18px;font:500 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.phero .crumb a:hover{color:var(--purple-deep)}
.phero .title{margin-top:14px;font-size:clamp(2.4rem,5vw,3.8rem);max-width:880px}
.phero .copy{max-width:640px;margin-top:16px}
.phero+.section{padding-top:50px}
.phero+.rule-top{border-top:0}
a.service-card{display:block;text-decoration:none;color:inherit}
.cta-sec{padding:0 0 96px}
.cta-band{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;padding:52px;border-radius:var(--rx);color:#fff;background:linear-gradient(135deg,var(--purple-deep),#0b4f7c);box-shadow:var(--shadow)}
.cta-band .title{margin-top:14px;color:#fff;font-size:clamp(1.9rem,3.4vw,2.8rem)}
.cta-band .title em{color:#bae6fd}
.cta-band .copy{margin-top:12px;max-width:460px;color:rgba(255,255,255,.82)}
.cta-band .eyebrow{color:#e0f2fe}
.cta-band .acts{display:flex;gap:12px;flex-wrap:wrap}
.cta-band .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.legal-page{max-width:880px;margin:0 auto;padding:46px;background:var(--card);border:1px solid var(--rule-soft);border-radius:var(--rx);box-shadow:var(--shadow-sm)}
.card-page{max-width:540px;margin:0 auto;padding:40px;background:var(--card);border:1px solid var(--rule-soft);border-radius:var(--rx);box-shadow:var(--shadow-sm)}
.card-page .consent{margin:6px 0 18px}
.card-page .alt{display:block;margin-top:18px;font-size:.85rem;color:var(--ink-soft)}
.card-page .alt a,.consent a{color:var(--purple-deep);font-weight:700;text-decoration:underline}
a.unsub-btn{display:block;width:100%;margin-top:12px;text-align:center;color:var(--ink-soft);font-size:.8rem;text-decoration:underline}
@media(max-width:767px){.legal-page,.card-page,.cta-band{padding:26px}}