/* ====================================================================
     NVC SINGAPORE · BUSINESS — Ease Health spatial language, NVC brand
     Primary Navy #26395b · Gold #c9a24b · Mist Blue #B7CED5 · NO greens
     Titles: Libre Baskerville · Body: Poppins
     Big type · big whitespace · scroll reveals · parallax
     ==================================================================== */
            :root {
                --navy: #26395b;
                --navy-700: #1c2c47;
                --navy-900: #131f33;
                --gold: #c9a24b;
                --bg: #f5f6f8;
                --surface: #ffffff;
                --panel: #eef1f6;
                --mist-blue: #B7CED5;
                --border: #e2e6ee;
                --text: #1a2230;
                --text-muted: #5a647a;

                --serif: "Libre Baskerville", Georgia, serif;
                --sans:
                    "Poppins", system-ui, -apple-system, "Segoe UI", Roboto,
                    sans-serif;

                --page-max: 1180px;
                --radius-nav: 7px;
                --radius-card: 14px;
                --radius-pill: 999px;

                /* big, airy rhythm (Ease Health uses very tall sections) */
                --section-pad: clamp(110px, 15vh, 200px);
            }

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            html {
                scroll-behavior: smooth;
            }
            body {
                font-family: var(--sans);
                color: var(--text);
                background: var(--bg);
                line-height: 1.65;
                -webkit-font-smoothing: antialiased;
                overflow-x: hidden;
            }

            h1,
            h2,
            h3,
            h4 {
                font-family: var(--serif);
                color: var(--navy);
                font-weight: 400;
                line-height: 1.08;
                letter-spacing: -0.02em;
                text-wrap: balance;
            }
            p {
                text-wrap: pretty;
            }
            a {
                color: inherit;
                text-decoration: none;
            }

            /* ---- Keyboard focus (brand-tinted, only for keyboard nav) ---- */
            :focus-visible {
                outline: 2px solid var(--gold);
                outline-offset: 3px;
                border-radius: 3px;
            }
            .btn:focus-visible,
            .nav-links a:focus-visible {
                outline-offset: 4px;
            }
            /* offset sticky header (84px) when jumping to in-page anchors */
            section[id],
            footer[id] {
                scroll-margin-top: 100px;
            }

            .wrap {
                max-width: var(--page-max);
                margin: 0 auto;
                padding: 0 32px;
            }

            /* ---- Motion: GSAP ScrollTrigger ----
               Section content is revealed by scrubbed GSAP tweens (movement that reverses on
               scroll up); the method section is a pinned, scrubbed composition. GSAP sets the
               initial state only after loading; content remains readable if motion fails. */
            .reveal,
            .reveal-fade,
            .reveal-card {
                opacity: 1;
                will-change: transform, opacity;
            }

            /* ---- Lenis smooth scroll ---- */
            html.lenis,
            html.lenis body {
                height: auto;
            }
            .lenis.lenis-smooth {
                scroll-behavior: auto !important;
            }
            .lenis.lenis-smooth [data-lenis-prevent] {
                overscroll-behavior: contain;
            }
            .lenis.lenis-stopped {
                overflow: hidden;
            }

            /* ---- Pinned, scrubbed method composition ---- */
            .method-pin {
                height: 340vh;
                position: relative;
                background:
                    radial-gradient(
                        1100px 560px at 78% 26%,
                        rgba(182, 206, 213, 0.1),
                        transparent 62%
                    ),
                    radial-gradient(
                        900px 520px at 20% 82%,
                        rgba(201, 162, 75, 0.1),
                        transparent 60%
                    ),
                    var(--navy-900);
            }
            .method-stage {
                height: 100vh;
                display: grid;
                place-items: center;
                overflow: hidden;
                padding: 0 24px;
            }
            .method-inner {
                width: 100%;
                max-width: 1120px;
                display: grid;
                justify-items: center;
                gap: clamp(20px, 3vh, 40px);
                text-align: center;
            }
            .method-kicker {
                font-family: var(--sans);
                font-size: 13px;
                font-weight: 600;
                letter-spacing: 0.16em;
                text-transform: uppercase;
                color: var(--gold);
            }
            .method-inner h2 {
                color: #fff;
                font-size: clamp(30px, 4.4vw, 56px);
                max-width: 16em;
                line-height: 1.1;
            }
            .method-caption {
                position: relative;
                height: 1.6em;
                width: 100%;
                max-width: 40em;
            }
            .method-caption span {
                position: absolute;
                inset: 0;
                font-size: clamp(15px, 1.5vw, 18px);
                color: var(--mist-blue);
                opacity: 0;
            }
            .method-svg {
                width: min(94vw, 1040px);
                height: auto;
                max-height: 56vh;
                transform: translateZ(0);
            }
            .method-svg [stroke] {
                vector-effect: non-scaling-stroke;
            }
            /* pre-JS hidden state for animated layers (avoids flash) */
            .m-node,
            .m-step,
            #m-tension,
            #m-panel,
            .m-bar,
            .m-barlabel,
            #m-graph {
                opacity: 0;
            }
            .m-label {
                font-family: var(--sans);
                fill: var(--mist-blue);
                font-size: 17px;
                font-weight: 600;
            }
            .m-sub {
                font-family: var(--sans);
                fill: rgba(255, 255, 255, 0.55);
                font-size: 13px;
            }
            .m-panel-title {
                font-family: var(--serif);
                fill: #fff;
                font-size: 22px;
            }

            /* ---- Reduced motion / no-GSAP fallback: show everything, static ---- */
            .no-gsap .reveal,
            .no-gsap .reveal-fade,
            .no-gsap .reveal-card,
            .no-gsap .m-node,
            .no-gsap .m-step,
            .no-gsap #m-tension,
            .no-gsap #m-panel,
            .no-gsap .m-bar,
            .no-gsap .m-barlabel,
            .no-gsap #m-graph {
                opacity: 1 !important;
                transform: none !important;
            }
            .no-gsap .method-pin {
                height: auto;
            }
            .no-gsap .method-stage {
                height: auto;
                padding: var(--section-pad) 24px;
            }
            @media (prefers-reduced-motion: reduce) {
                .reveal,
                .reveal-fade,
                .reveal-card {
                    opacity: 1 !important;
                    transform: none !important;
                }
                html {
                    scroll-behavior: auto;
                }
            }

            /* ---- Eyebrow / pill ---- */
            .eyebrow {
                display: inline-block;
                font-family: var(--sans);
                font-size: 13px;
                font-weight: 600;
                letter-spacing: 0.14em;
                text-transform: uppercase;
                color: var(--navy);
                background: var(--panel);
                border-radius: var(--radius-pill);
                padding: 9px 18px;
            }
            .gold-rule {
                width: 56px;
                height: 2px;
                background: var(--gold);
                border: 0;
                margin: 0 0 28px;
            }
            .gold-rule.center {
                margin-left: auto;
                margin-right: auto;
            }

            /* ---- Buttons ---- */
            .btn {
                display: inline-flex;
                align-items: center;
                gap: 12px;
                font-family: var(--sans);
                font-weight: 600;
                font-size: 16px;
                border-radius: var(--radius-card);
                padding: 17px 30px;
                cursor: pointer;
                transition:
                    background 0.2s,
                    color 0.2s,
                    border-color 0.2s,
                    transform 0.2s;
                border: 1px solid transparent;
            }
            .btn:hover {
                transform: translateY(-2px);
            }
            .btn-primary {
                background: var(--navy);
                color: #fff;
            }
            .btn-primary:hover {
                background: var(--navy-700);
            }
            .btn .arrow {
                display: inline-grid;
                place-items: center;
                width: 24px;
                height: 24px;
                border: 1px solid currentColor;
                border-radius: 6px;
                font-size: 14px;
                opacity: 0.75;
            }
            .btn-secondary {
                background: transparent;
                color: var(--navy);
                border-color: var(--navy);
            }
            .btn-secondary:hover {
                background: var(--panel);
            }
            .btn-ghost {
                background: transparent;
                color: var(--navy);
                padding-left: 4px;
                padding-right: 4px;
            }
            .btn-ghost:hover {
                color: var(--gold);
            }

            /* ---- Header ---- */
            header.site {
                position: sticky;
                top: 0;
                z-index: 50;
                background: rgba(245, 246, 248, 0.82);
                backdrop-filter: blur(12px);
                border-bottom: 1px solid transparent;
                transition:
                    border-color 0.3s,
                    background 0.3s;
            }
            header.site.scrolled {
                border-bottom-color: var(--border);
            }
            .nav {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 84px;
            }
            .brand {
                display: flex;
                align-items: center;
                gap: 11px;
            }
            .brand .mark {
                display: inline-flex;
                align-items: center;
                color: var(--navy);
            }
            .brand .mark svg {
                height: 34px;
                width: auto;
                display: block;
            }
            .brand .word {
                font-family: var(--serif);
                font-weight: 700;
                font-size: 20px;
                color: var(--navy);
                line-height: 1;
            }
            .brand .word small {
                display: block;
                font-family: var(--sans);
                font-weight: 500;
                font-size: 11px;
                letter-spacing: 0.14em;
                text-transform: uppercase;
                color: var(--text-muted);
                margin-top: 2px;
            }
            .nav-links {
                display: flex;
                align-items: center;
                gap: 4px;
            }
            .nav-links a {
                font-size: 15px;
                color: var(--text-muted);
                padding: 9px 14px;
                border-radius: var(--radius-nav);
                transition:
                    color 0.15s,
                    background 0.15s;
            }
            .nav-links a:hover {
                color: var(--navy);
                background: var(--panel);
            }
            .nav-cta {
                margin-left: 12px;
            }
            @media (max-width: 900px) {
                .nav-links a:not(.nav-cta) {
                    display: none;
                }
            }

            /* ---- Section scaffolding (big whitespace) ---- */
            section {
                padding: var(--section-pad) 0;
            }
            .surface {
                background: var(--surface);
            }
            .panel {
                background: var(--panel);
            }
            .mist {
                background: var(--mist-blue);
            }

            .section-head {
                max-width: 860px;
            }
            .section-head.center {
                margin: 0 auto;
                text-align: center;
            }
            .section-head h2 {
                font-size: clamp(38px, 4.8vw, 60px);
                margin-top: 22px;
            }
            .section-head p.sub {
                color: var(--text-muted);
                font-size: clamp(18px, 1.6vw, 21px);
                margin-top: 26px;
                line-height: 1.65;
            }

            /* ---- Hero bento (Ease pattern: headline tile + dark CTA tile + showcase tile) ---- */
            .hero {
                padding: 0;
            }
            .hero-bento {
                display: grid;
                grid-template-columns: 0.92fr 1.08fr;
                grid-template-rows: auto auto;
                gap: 18px;
                padding: 18px;
                width: 100%;
                max-width: none;
                align-items: stretch;
            }
            .hb-tile {
                border-radius: 24px;
                padding: clamp(34px, 3.4vw, 54px);
            }
            .hb-headline {
                grid-column: 1;
                grid-row: 1;
                background: var(--panel);
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            .hb-headline .eyebrow {
                background: var(--surface);
                align-self: flex-start;
            }
            .hb-cta {
                grid-column: 1;
                grid-row: 2;
                background: var(--navy);
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 22px;
            }
            .hb-cta h3 {
                color: #fff;
                font-size: clamp(22px, 2vw, 30px);
                line-height: 1.15;
            }
            .hb-cta .cta-row {
                display: flex;
                flex-wrap: wrap;
                gap: 14px;
                align-items: center;
            }
            .hb-showcase {
                grid-column: 2;
                grid-row: 1 / span 2;
                background: var(--mist-blue);
                padding: clamp(24px, 2.2vw, 34px);
                display: grid;
                align-content: center;
                overflow: hidden;
            }
            .hb-cards {
                display: grid;
                gap: 16px;
            }
            .btn-white {
                background: #fff;
                color: var(--navy);
            }
            .btn-white:hover {
                background: #eef1f6;
            }
            .btn-lightghost {
                background: transparent;
                color: #fff;
                border-color: rgba(255, 255, 255, 0.4);
            }
            .btn-lightghost:hover {
                background: rgba(255, 255, 255, 0.1);
            }
            .hero h1 {
                font-size: clamp(38px, 4.6vw, 66px);
                line-height: 1.05;
                letter-spacing: -0.03em;
            }
            .hero p.lead {
                color: var(--text-muted);
                font-size: clamp(16px, 1.3vw, 19px);
                margin-top: 22px;
                max-width: 24em;
                line-height: 1.6;
            }
            .offer-card {
                background: var(--surface);
                border: 0;
                border-radius: 16px;
                padding: 22px 24px;
            }
            .offer-card .tag {
                display: inline-block;
                font-size: 11px;
                font-weight: 600;
                letter-spacing: 0.1em;
                text-transform: uppercase;
                color: var(--navy);
                background: var(--panel);
                border-radius: var(--radius-pill);
                padding: 5px 13px;
                margin-bottom: 12px;
            }
            .offer-card h4 {
                font-size: 21px;
                margin-bottom: 8px;
                line-height: 1.2;
            }
            .offer-card p {
                font-size: 14px;
                color: var(--text-muted);
                line-height: 1.55;
            }
            @media (max-width: 900px) {
                .hero-bento {
                    grid-template-columns: 1fr;
                }
                .hb-headline,
                .hb-cta,
                .hb-showcase {
                    grid-column: 1 !important;
                    grid-row: auto !important;
                }
            }

            /* ---- Trust strip ---- */
            .trust {
                padding: 52px 0;
                background: var(--surface);
                border-top: 1px solid var(--border);
                border-bottom: 1px solid var(--border);
            }
            .trust p {
                text-align: center;
                font-size: 12px;
                letter-spacing: 0.18em;
                text-transform: uppercase;
                color: var(--text-muted);
                margin-bottom: 26px;
            }
            .trust-logos {
                display: flex;
                justify-content: center;
                gap: 64px;
                flex-wrap: wrap;
                align-items: center;
            }
            .trust-logos span {
                font-family: var(--serif);
                font-weight: 700;
                font-size: 22px;
                color: var(--navy);
                opacity: 0.55;
            }

            /* ---- Big statement (sparse, bold) ---- */
            .statement {
                text-align: center;
            }
            .statement h2 {
                font-size: clamp(30px, 5.5vw, 72px);
                max-width: 16em;
                margin: 26px auto 0;
                line-height: 1.1;
            }

            /* ---- Stats ---- */
            .stats {
                display: flex;
                justify-content: center;
                gap: clamp(40px, 7vw, 96px);
                flex-wrap: wrap;
                margin-top: 72px;
            }
            .stat {
                text-align: center;
                max-width: 230px;
            }
            .stat .num {
                font-family: var(--serif);
                font-weight: 400;
                font-size: clamp(30px, 3vw, 40px);
                color: var(--navy);
                line-height: 1.05;
            }
            .stat .label {
                font-size: 14px;
                color: var(--text-muted);
                margin-top: 12px;
            }

            /* ---- Problem / Solution ---- */
            .ps-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 32px;
            }
            .ps-card {
                border-radius: 18px;
                padding: clamp(36px, 4vw, 60px);
            }
            .ps-card.problem {
                background: var(--surface);
                border: 1px solid var(--border);
            }
            .ps-card.solution {
                background: var(--navy);
            }
            .ps-card.solution * {
                color: #fff;
            }
            .ps-card .label {
                font-size: 13px;
                font-weight: 600;
                letter-spacing: 0.14em;
                text-transform: uppercase;
                color: var(--text-muted);
                margin-bottom: 18px;
            }
            .ps-card.solution .label {
                color: var(--mist-blue);
            }
            .ps-card h3 {
                font-size: clamp(24px, 2.4vw, 32px);
                line-height: 1.32;
            }
            @media (max-width: 900px) {
                .ps-grid {
                    grid-template-columns: 1fr;
                }
            }

            /* ---- Why card grid ---- */
            .why-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 26px;
                margin-top: 64px;
            }
            .why-card {
                background: var(--panel);
                border: 0;
                border-radius: 20px;
                padding: 42px 36px;
            }
            .why-icon {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 48px;
                height: 48px;
                color: var(--navy);
                margin-bottom: 26px;
            }
            .why-icon svg {
                width: 48px;
                height: 48px;
                display: block;
            }
            .why-card .tag {
                display: inline-block;
                font-size: 11px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.1em;
                color: var(--navy);
                background: var(--surface);
                border-radius: var(--radius-pill);
                padding: 5px 13px;
                margin-bottom: 16px;
            }
            .why-card h4 {
                font-size: 24px;
                margin-bottom: 12px;
                line-height: 1.2;
            }
            .why-card p {
                font-size: 15.5px;
                color: var(--text-muted);
                line-height: 1.6;
            }
            .capability-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
                justify-content: center;
                margin-top: 56px;
            }
            .capability-tags span {
                font-size: 14px;
                font-weight: 500;
                color: var(--navy);
                background: var(--surface);
                border: 1px solid var(--border);
                border-radius: var(--radius-pill);
                padding: 10px 20px;
            }
            @media (max-width: 900px) {
                .why-grid {
                    grid-template-columns: 1fr;
                }
            }

            /* ---- Offer detail rows ---- */
            .detail-row {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: clamp(48px, 7vw, 96px);
                align-items: center;
            }
            .detail-row + .detail-row {
                margin-top: clamp(110px, 14vh, 180px);
            }
            .detail-row.flip .detail-visual {
                order: -1;
            }
            .detail-text .tag {
                display: inline-block;
                font-size: 11px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.1em;
                color: var(--navy);
                background: var(--panel);
                border-radius: var(--radius-pill);
                padding: 6px 15px;
                margin-bottom: 22px;
            }
            .detail-text h3 {
                font-size: clamp(30px, 3.4vw, 44px);
                margin-bottom: 22px;
                line-height: 1.15;
            }
            .detail-text p.lede {
                color: var(--text-muted);
                font-size: 18px;
                margin-bottom: 28px;
                line-height: 1.6;
            }
            .checklist {
                list-style: none;
                display: grid;
                gap: 18px;
            }
            .checklist li {
                display: flex;
                gap: 16px;
                align-items: flex-start;
                font-size: 16.5px;
            }
            .checklist .check {
                flex: none;
                width: 30px;
                height: 30px;
                border-radius: 7px;
                background: var(--navy);
                color: #fff;
                display: grid;
                place-items: center;
                font-size: 14px;
            }
            .detail-text .btn {
                margin-top: 34px;
            }
            .detail-visual {
                background: var(--mist-blue);
                border-radius: 20px;
                padding: clamp(34px, 4vw, 56px);
                min-height: 360px;
                display: grid;
                align-content: center;
                gap: 18px;
            }
            .detail-visual.panel-tint {
                background: var(--panel);
            }
            .mini-card {
                background: var(--surface);
                border-radius: 12px;
                padding: 22px 24px;
                border: 1px solid var(--border);
            }
            .mini-card .mc-h {
                font-family: var(--serif);
                font-weight: 700;
                color: var(--navy);
                font-size: 18px;
            }
            .mini-card .mc-row {
                display: flex;
                justify-content: space-between;
                font-size: 13.5px;
                color: var(--text-muted);
                margin-top: 12px;
            }
            @media (max-width: 900px) {
                .detail-row,
                .detail-row.flip .detail-visual {
                    grid-template-columns: 1fr;
                    order: 0;
                }
            }

            /* ---- Scenario (navy band, big) ---- */
            .scenario {
                background: var(--navy-700);
            }
            .scenario * {
                color: #fff;
            }
            .scenario .eyebrow {
                background: rgba(255, 255, 255, 0.12);
                color: #fff;
            }
            .scenario h3 {
                color: #fff;
                font-size: clamp(36px, 4.8vw, 60px);
                margin: 24px 0 56px;
                max-width: 14em;
                line-height: 1.12;
            }
            .scenario-flow {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 22px;
            }
            .flow-step {
                position: relative;
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.14);
                border-radius: var(--radius-card);
                padding: 30px 26px;
            }
            .flow-step .n {
                font-family: var(--serif);
                font-style: italic;
                font-weight: 400;
                color: var(--gold);
                font-size: 23px;
                letter-spacing: -0.01em;
            }
            /* gold chevron connector — reads the steps as one flow (desktop) */
            .scenario-flow .flow-step:not(:last-child)::after {
                content: "";
                position: absolute;
                top: 50%;
                right: -15px;
                width: 13px;
                height: 13px;
                border-top: 2px solid var(--gold);
                border-right: 2px solid var(--gold);
                transform: translateY(-50%) rotate(45deg);
                opacity: 0.8;
            }
            @media (max-width: 900px) {
                .scenario-flow .flow-step:not(:last-child)::after {
                    display: none;
                }
            }
            .flow-step p {
                font-size: 15.5px;
                color: rgba(255, 255, 255, 0.85);
                margin-top: 16px;
                line-height: 1.55;
            }
            @media (max-width: 900px) {
                .scenario-flow {
                    grid-template-columns: 1fr 1fr;
                }
            }

            /* ---- Bento: mixed-size tiles (Ease "at work" pattern) ---- */
            .bento {
                display: grid;
                grid-template-columns: 1.15fr 1fr 1fr;
                grid-template-rows: auto auto;
                gap: 22px;
                margin-top: 64px;
            }
            .bento-tile {
                border-radius: 20px;
                padding: 36px;
                background: var(--surface);
                border: 1px solid var(--border);
            }
            .tile-a {
                grid-column: 1;
                grid-row: 1 / span 2;
                background: var(--panel);
                border: 0;
            }
            .tile-b {
                grid-column: 2 / span 2;
                grid-row: 1;
                min-height: 248px;
                border: 0;
                background: linear-gradient(
                    150deg,
                    #c7dbe1 0%,
                    var(--mist-blue) 100%
                );
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                overflow: hidden;
            }
            .tile-c {
                grid-column: 2;
                grid-row: 2;
                background: var(--surface);
            }
            .tile-d {
                grid-column: 3;
                grid-row: 2;
                background: var(--navy);
                border: 0;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                gap: 28px;
            }
            .tile-d *,
            .tile-d h4 {
                color: #fff;
            }
            .tile-a h4 {
                font-size: 24px;
            }
            .process {
                list-style: none;
                display: grid;
                gap: 24px;
                margin-top: 26px;
            }
            .process li {
                display: flex;
                gap: 16px;
                align-items: flex-start;
            }
            .process .pn {
                flex: none;
                width: 36px;
                height: 36px;
                border-radius: 999px;
                background: var(--surface);
                color: var(--navy);
                font-family: var(--serif);
                font-weight: 700;
                display: grid;
                place-items: center;
            }
            .process strong {
                display: block;
                font-size: 17px;
                color: var(--text);
                margin-bottom: 4px;
            }
            .process p {
                font-size: 14px;
                color: var(--text-muted);
                line-height: 1.5;
            }
            .tile-b .tile-icon {
                display: inline-flex;
                width: 42px;
                height: 42px;
                color: var(--navy);
                opacity: 0.5;
            }
            .tile-b .tile-icon svg {
                width: 42px;
                height: 42px;
                display: block;
            }
            .tile-b .img-label {
                font-size: 13px;
                font-weight: 600;
                letter-spacing: 0.03em;
                color: var(--navy);
                background: rgba(255, 255, 255, 0.6);
                border-radius: 999px;
                padding: 9px 17px;
            }
            .tile-quote .bq {
                font-family: var(--serif);
                font-style: italic;
                color: var(--navy);
                font-size: 21px;
                line-height: 1.42;
            }
            .tile-quote .bq-by {
                display: block;
                margin-top: 18px;
                font-family: var(--sans);
                font-style: normal;
                font-size: 13px;
                letter-spacing: 0.04em;
                text-transform: uppercase;
                color: var(--text-muted);
            }
            .tile-d h4 {
                font-size: 25px;
                line-height: 1.2;
            }
            .tile-cta-btn {
                display: inline-flex;
                align-items: center;
                gap: 12px;
                align-self: flex-start;
                font-family: var(--sans);
                font-weight: 600;
                font-size: 15px;
                color: #fff;
                border: 1px solid rgba(255, 255, 255, 0.4);
                border-radius: var(--radius-card);
                padding: 13px 22px;
                transition: background 0.2s;
            }
            .tile-cta-btn:hover {
                background: rgba(255, 255, 255, 0.1);
            }
            @media (max-width: 900px) {
                .bento {
                    grid-template-columns: 1fr;
                }
                .tile-a,
                .tile-b,
                .tile-c,
                .tile-d {
                    grid-column: 1 !important;
                    grid-row: auto !important;
                }
            }

            /* ---- Standards grid ---- */
            .std-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                column-gap: 72px;
                row-gap: 34px;
                margin-top: 64px;
            }
            .std-item {
                display: flex;
                gap: 16px;
                align-items: flex-start;
            }
            .std-item .check {
                flex: none;
                width: 32px;
                height: 32px;
                border-radius: 7px;
                background: var(--navy);
                color: #fff;
                display: grid;
                place-items: center;
                font-size: 15px;
            }
            .std-item strong {
                font-weight: 600;
                color: var(--text);
            }
            .std-item p {
                font-size: 16px;
                color: var(--text-muted);
                line-height: 1.6;
            }
            @media (max-width: 900px) {
                .std-grid {
                    grid-template-columns: 1fr;
                }
            }

            /* ---- About ---- */
            .about-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: clamp(48px, 7vw, 88px);
                align-items: center;
            }
            .about-text h2 {
                font-size: clamp(34px, 4vw, 52px);
                margin-top: 22px;
                line-height: 1.12;
            }
            .about-text p {
                color: var(--text-muted);
                font-size: 18px;
                margin: 26px 0 34px;
                line-height: 1.65;
            }
            .about-visual {
                background: var(--panel);
                border-radius: 20px;
                min-height: 340px;
                display: grid;
                place-items: center;
            }
            .about-visual .quote {
                font-family: var(--serif);
                font-style: italic;
                color: var(--navy);
                font-size: clamp(22px, 2.2vw, 28px);
                max-width: 15em;
                text-align: center;
                padding: 48px;
                line-height: 1.4;
            }
            @media (max-width: 900px) {
                .about-grid {
                    grid-template-columns: 1fr;
                }
            }

            /* ---- Footer CTA + footer ---- */
            .footer-cta {
                background: var(--mist-blue);
                border-radius: 24px;
                padding: clamp(64px, 9vw, 120px) 48px;
                text-align: center;
            }
            .footer-cta h3 {
                font-size: clamp(30px, 5.5vw, 72px);
                margin-bottom: 20px;
                line-height: 1.08;
            }
            .footer-cta p {
                color: var(--navy-700);
                font-size: clamp(18px, 1.6vw, 21px);
                margin-bottom: 40px;
                max-width: 32em;
                margin-left: auto;
                margin-right: auto;
            }

            footer.site {
                background: var(--navy-900);
                color: rgba(255, 255, 255, 0.7);
                padding: 88px 0 48px;
            }
            .footer-grid {
                display: grid;
                grid-template-columns: 1.6fr 1fr 1fr 1fr;
                gap: 40px;
            }
            footer.site .brand .word,
            footer.site .brand .mark {
                color: #fff;
            }
            footer.site .brand .mark {
                color: #fff;
            }
            footer.site .brand .word small {
                color: rgba(255, 255, 255, 0.55);
            }
            footer.site .tagline {
                font-size: 15px;
                color: rgba(255, 255, 255, 0.6);
                margin-top: 20px;
                max-width: 26em;
                line-height: 1.6;
            }
            footer.site .fcol h5 {
                font-family: var(--sans);
                font-weight: 600;
                font-size: 13px;
                letter-spacing: 0.1em;
                text-transform: uppercase;
                color: #fff;
                margin-bottom: 20px;
            }
            footer.site .fcol a {
                display: block;
                font-size: 15px;
                color: rgba(255, 255, 255, 0.7);
                padding: 6px 0;
                transition: color 0.15s;
            }
            footer.site .fcol a:hover {
                color: #fff;
            }
            .footer-base {
                border-top: 1px solid rgba(255, 255, 255, 0.12);
                margin-top: 64px;
                padding-top: 28px;
                display: flex;
                justify-content: space-between;
                font-size: 13px;
                color: rgba(255, 255, 255, 0.5);
                flex-wrap: wrap;
                gap: 12px;
            }
            @media (max-width: 900px) {
                .footer-grid {
                    grid-template-columns: 1fr 1fr;
                }
            }

/* Larger OFNR waypoints without changing the diagram or animation scale. */
.m-step .m-label{font-size:34px}

.hb-headline .professional-hero-subtitle{font-size:clamp(18px,2.2vw,26px);line-height:1.5;max-width:65ch;margin:20px 0 28px;color:var(--navy)}

/* Match the Personal hero's plain-text eyebrow. */
.professional .hb-headline .eyebrow{display:block;background:transparent;border:0;border-radius:0;padding:0;margin:0 0 28px;font-family:Poppins,sans-serif;font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase}
@media(max-width:620px){.professional .hb-headline .eyebrow{font-size:10px}}