:root {
        --accent: #0b8f89;
        --accent-dark: #066a62;
        --muted: #567070;
        --nav-height: 76px
    }

    /* prevent unexpected horizontal overflow and ensure consistent sizing */
    *,
    *::before,
    *::after {
        box-sizing: border-box
    }

    html,
    body {
        height: 100%;
        overflow-x: hidden;
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Inter', 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
        background: #eef6f5;
        color: #072022;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin: 0;
        padding-top: var(--nav-height);

        /* Slightly smaller typewriter heading on mobile */
        #hero h1 {
            font-size: clamp(1.55rem, 7vw, 2.2rem) !important;
            line-height: 1.15;
        }

        #hero #type-text {
            font-size: inherit;
        }

        #hero .type-caret {
            height: 1em;
        }

        /* improve overall readability */
        line-height: 1.6;
        font-size: 16px;
    }

    /* Navbar */
    .navbar {
        background: rgba(255, 255, 255, 0.35);
        /* slightly more transparent */
        backdrop-filter: blur(10px);
        transition: background .35s, box-shadow .35s, backdrop-filter .35s;
        z-index: 1100;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: var(--nav-height);
        box-shadow: 0 6px 24px -10px rgba(2, 25, 32, 0.08)
    }

    .navbar.scrolled {
        background: rgba(255, 255, 255, 0.88);
        /* maintain readability while more transparent */
        box-shadow: 0 10px 38px -14px rgba(2, 25, 32, 0.12)
    }

    .navbar-brand {
        font-weight: 700;
        letter-spacing: 0.6px
    }

    /* Larger logo sizing (desktop) and responsive fallback */
    .navbar-brand {
        display: flex;
        align-items: center
    }

    .navbar-brand img {
        height: 72px;
        width: auto
    }

    @media(max-width:576px) {
        .navbar-brand img {
            height: 48px
        }
    }

    .nav-link {
        color: #345253;
        font-family: 'Poppins', system-ui, Arial, sans-serif;
        font-weight: 600;
        font-size: .94rem;
        padding: .9rem 1rem;
        position: relative;
        transition: color .35s
    }

    .nav-link::after {
        content: "";
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 8px;
        height: 2px;
        background: linear-gradient(90deg, #0b8f89, #0dcaf0);
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .5s cubic-bezier(.2, .9, .2, 1)
    }

    .nav-link:hover {
        color: #0b8f89
    }

    .nav-link:hover::after {
        transform: scaleX(1)
    }

    .nav-link.active {
        color: #0b8f89
    }

    .nav-link.active::after {
        transform: scaleX(1)
    }

    @media(max-width:576px) {
        .nav-link {
            font-size: .95rem;
            padding: .4rem .6rem
        }
    }

    .nav-link {
        color: #345253
    }

    .nav-link.active {
        color: #0b8f89;
        font-weight: 600
    }

    /* Decorative floating SVGs */
    .floating-shape {
        position: absolute;
        z-index: 10;
        opacity: 0.12;
        filter: blur(6px);
        transform-origin: center;
        pointer-events: none;
    }

    .floating-shape.large {
        width: 260px;
        height: 260px;
        opacity: 0.08
    }

    .decorative-blob {
        position: absolute;
        right: -6%;
        top: 6%;
        width: 420px;
        height: 420px;
        z-index: 6;
        opacity: 0.06;
        filter: blur(14px);
        pointer-events: none;
    }

    /* animated drift */
    @keyframes floaty {
        0% {
            transform: translateY(0) rotate(0deg)
        }

        50% {
            transform: translateY(-10px) rotate(2deg)
        }

        100% {
            transform: translateY(0) rotate(0deg)
        }
    }

    .floating-shape,
    .decorative-blob {
        animation: floaty 9s ease-in-out infinite
    }

    .floating-shape.small {
        width: 72px;
        height: 72px
    }

    .floating-shape.medium {
        width: 120px;
        height: 120px
    }

    /* Hero (banner) - fixed and full viewport height (below navbar) */
    .hero {
        position: relative;
        /* allow normal document flow so sections stack below */
        min-height: calc(70vh - var(--nav-height));
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        padding: 3.25rem 1.25rem;
        background-image: url('assets/hero-desk.png');
        background-size: cover;
        background-position: center bottom;
        overflow: hidden;
        color: #fff;
        z-index: 0;
    }

    /* add a subtle dark overlay so foreground text remains legible */
    .hero::before {
        display: none !important
    }

    .hero::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.44));
    }

    /* keep other decorative helpers hidden to reduce clutter */
    .hero .color-overlay,
    .hero .noise,
    .hero .grid-lines,
    .hero .streaks {
        display: none !important
    }

    /* ensure content sits above overlay */
    .hero .hero-content {
        z-index: 3
    }

    /* Allow wrapping of dynamic typing text on narrow screens */
    #type-text {
        white-space: normal !important;
        display: inline;
        word-break: break-word;
    }

    /* animated color overlay to add depth */
    .hero .color-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: radial-gradient(ellipse at 20% 30%, rgba(13, 202, 240, 0.16) 0%, transparent 25%), radial-gradient(ellipse at 80% 70%, rgba(6, 106, 98, 0.12) 0%, transparent 20%);
        mix-blend-mode: overlay;
        opacity: 0.95;
        animation: shiftHue 14s linear infinite
    }

    @keyframes shiftHue {
        0% {
            filter: hue-rotate(0deg) saturate(1)
        }

        50% {
            filter: hue-rotate(18deg) saturate(1.08)
        }

        100% {
            filter: hue-rotate(0deg) saturate(1)
        }
    }

    /* subtle paper/noise texture via data URI SVG */
    .hero .noise {
        position: absolute;
        inset: 0;
        z-index: 2;
        opacity: 0.06;
        pointer-events: none;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600"><filter id="n"><feTurbulence baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23n)" fill="white"/></svg>');
        background-size: cover
    }

    /* soft radial glows for depth */
    .hero .bg-glow {
        position: absolute;
        z-index: 3;
        pointer-events: none;
        border-radius: 50%;
        filter: blur(48px);
        opacity: .18
    }

    .hero .bg-glow.s1 {
        width: 420px;
        height: 420px;
        left: 6%;
        top: 6%;
        background: radial-gradient(circle at 30% 30%, rgba(13, 202, 240, 0.9), rgba(13, 202, 240, 0.08) 40%, transparent 60%)
    }

    .hero .bg-glow.s2 {
        width: 320px;
        height: 320px;
        right: 8%;
        bottom: 12%;
        background: radial-gradient(circle at 70% 70%, rgba(6, 106, 98, 0.9), rgba(6, 106, 98, 0.06) 40%, transparent 60%)
    }

    .hero .bg-glow.s3 {
        width: 220px;
        height: 220px;
        left: 18%;
        bottom: 6%;
        background: radial-gradient(circle at 40% 60%, rgba(11, 143, 137, 0.85), rgba(11, 143, 137, 0.06) 45%, transparent 70%)
    }

    /* subtle grid overlay (SVG background) */
    .hero .grid-lines {
        position: absolute;
        inset: 0;
        z-index: 4;
        opacity: 0.06;
        pointer-events: none;
        background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
        background-size: 60px 60px
    }

    /* animated diagonal streaks */
    .hero .streaks {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        opacity: 0.065
    }

    .hero .streaks svg {
        width: 120%;
        height: 120%;
        transform: translate(-6%, -6%)
    }

    .hero .streaks .st {
        fill: none;
        stroke: rgba(255, 255, 255, 0.08);
        stroke-width: 2;
        filter: blur(6px);
        animation: streakMove 14s linear infinite
    }

    @keyframes streakMove {
        0% {
            transform: translateX(-10%)
        }

        50% {
            transform: translateX(6%)
        }

        100% {
            transform: translateX(-10%)
        }
    }

    /* decorative clip-art icons in background (huge on desktop) */
    .hero .bg-icons {
        position: absolute;
        inset: 0;
        z-index: 6;
        pointer-events: none
    }

    .hero .bg-icons svg {
        position: absolute;
        opacity: 0.14;
        filter: drop-shadow(0 12px 40px rgba(2, 6, 23, 0.08));
        transform-origin: center;
        will-change: transform
    }

    /* responsive scaling so icons don't overpower smaller screens */
    @media(max-width:1400px) {
        .hero .bg-icons svg {
            width: 200px !important;
            height: 200px !important
        }
    }

    @media(max-width:1024px) {
        .hero .bg-icons svg {
            width: 160px !important;
            height: 160px !important;
            opacity: 0.12
        }
    }

    @media(max-width:768px) {
        .hero .bg-icons svg {
            width: 100px !important;
            height: 100px !important;
            opacity: 0.06
        }
    }

    .hero .hero-content {
        z-index: 2;
        width: 100%;
        max-width: 920px
    }

    .hero .hero-content {
        z-index: 2;
        width: 100%;
        max-width: 1100px
    }

    /* Ensure interactive elements sit above decorative layers */
    .hero .hero-ctas {
        position: relative;
        z-index: 20;
        pointer-events: auto;
    }

    .hero a.btn {
        position: relative;
        z-index: 20;
    }

    .hero .hero-content h1 {
        font-size: clamp(2rem, 3.6vw, 2.8rem);
        font-weight: 600;
        margin: 0;
        color: #fff;
        text-shadow: 0 6px 22px rgba(2, 6, 10, 0.6);
        white-space: nowrap;
        overflow-wrap: normal
    }

    /* Improve readability of lead paragraph on darker backdrop */
    .hero .lead {
        color: rgba(255, 255, 255, 0.82);
        text-shadow: 0 6px 18px rgba(2, 6, 10, 0.48)
    }

    /* widen the typing area so phrases wrap later */
    #type-text {
        display: inline-block;
        max-width: 880px;
        white-space: normal
    }

    .hero .breadcrumb {
        background: transparent;
        padding: 0;
        margin-top: .6rem
    }

    .breadcrumb {
        --bs-breadcrumb-divider: '›';
    }

    .breadcrumb a {
        color: rgba(255, 255, 255, 0.9)
    }

    .breadcrumb .active {
        color: rgba(255, 255, 255, 0.95)
    }

    /* page subtle container spacing like reference */
    .about-features .card {
        border-radius: .75rem
    }

    /* client logos strip */
    .client-logos {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 2rem 0
    }

    .client-logos img {
        opacity: .6;
        filter: grayscale(40%);
        max-height: 36px
    }

    /* testimonial layout */
    .testimonial-row {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 1.5rem
    }

    /* team section background */
    .team-band {
        background: linear-gradient(180deg, #e8f2f1, #e6efee);
        padding: 3.25rem;
        border-radius: .6rem
    }

    /* CTA band */
    .cta-band {
        background: var(--accent);
        color: #fff;
        padding: 2.25rem;
        border-radius: .6rem;
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .cta-band .btn {
        background: #fff;
        color: var(--accent);
        border: none
    }

    /* Services patterned background */
    .services {
        position: relative
    }

    /* Allow long emails / addresses to wrap gracefully */
    .wrap-email {
        word-break: break-word;
        overflow-wrap: anywhere
    }

    .services .pattern-overlay {
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.04;
        background-image: linear-gradient(135deg, rgba(13, 202, 240, 0.08) 25%, transparent 25%, transparent 50%, rgba(13, 202, 240, 0.08) 50%, rgba(13, 202, 240, 0.08) 75%, transparent 75%, transparent);
        background-size: 28px 28px;
        z-index: 0
    }

    .services .container {
        position: relative;
        z-index: 2
    }

    /* Unified Section Headings */
    .section-head {
        text-align: center;
        position: relative;
        padding: 0 0 1rem 0;
        margin-bottom: 2.25rem
    }

    .section-head::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 1px;
        background: linear-gradient(90deg, rgba(11, 143, 137, 0.35), rgba(11, 143, 137, 0));
        max-width: 460px;
        margin: 0 auto;
        pointer-events: none
    }

    .section-head .eyebrow {
        display: inline-block;
        color: var(--accent);
        font-weight: 700;
        letter-spacing: 0.6px;
        margin-bottom: .4rem;
        font-size: .75rem;
        text-transform: uppercase
    }

    .section-head h2 {
        font-size: clamp(1.25rem, 2.6vw, 1.75rem);
        margin: .25rem 0 0 0;
        font-weight: 700;
        letter-spacing: .4px
    }

    .section-head h2.gradient-text {
        background: linear-gradient(90deg, #07323a, #0b8f89, #066a62);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-weight: 700;
        letter-spacing: .5px
    }

    .section-head .headline-decor {
        width: 72px;
        height: 4px;
        background: linear-gradient(90deg, var(--accent), var(--accent-dark));
        border-radius: 6px;
        margin: .75rem auto 0 auto;
        box-shadow: 0 4px 14px -2px rgba(11, 143, 137, 0.45)
    }

    .section-head p {
        max-width: 760px;
        margin: 1rem auto 0;
        color: #3d5859;
        font-size: .95rem
    }

    @media(min-width:992px) {
        .section-head {
            text-align: center
        }
    }

    @media(prefers-reduced-motion:no-preference) {
        .section-head h2.gradient-text {
            animation: gradShift 10s linear infinite
        }

        @keyframes gradShift {
            0% {
                filter: hue-rotate(0deg)
            }

            50% {
                filter: hue-rotate(14deg)
            }

            100% {
                filter: hue-rotate(0deg)
            }
        }
    }

    /* Service card — enhanced visual style */
    .services .service-card {
        --svc-grad: linear-gradient(135deg, #0b8f89, #066a62);
        --svc-bg: linear-gradient(180deg, #ffffff, #f7feff);
        border-radius: 1rem;
        border: none;
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
        align-items: stretch;
        transition: transform .5s cubic-bezier(.2, .9, .2, 1), box-shadow .5s ease, background .5s ease;
        color: inherit;
        text-decoration: none;
        position: relative;
        overflow: hidden;
        min-height: 140px;
        background: var(--svc-bg);
        box-shadow: 0 4px 20px -6px rgba(2, 25, 32, 0.10)
    }

    .services .service-card::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(11, 143, 137, 0.55), rgba(6, 106, 98, 0.15));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: .55;
        pointer-events: none;
        transition: opacity .6s ease, filter .6s ease
    }

    .services .service-card .card-glow {
        position: absolute;
        top: -25%;
        left: -15%;
        width: 60%;
        height: 60%;
        background: radial-gradient(circle at 30% 40%, rgba(11, 143, 137, 0.35), rgba(11, 143, 137, 0));
        filter: blur(32px);
        opacity: .35;
        pointer-events: none;
        transition: transform 1.4s ease, opacity .8s ease
    }

    .services .service-card:hover .card-glow {
        transform: scale(1.4) translate(10%, 6%);
        opacity: .55
    }

    .services .service-badge {
        display: block;
        width: 100%;
        text-align: center;
        background: var(--svc-grad);
        color: #fff;
        padding: .34rem .7rem;
        border-radius: .7rem;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: 0.55px;
        opacity: 0.95;
        margin-bottom: .85rem;
        margin-top: .1rem;
        box-shadow: 0 4px 14px -4px rgba(2, 25, 32, 0.25);
        text-transform: uppercase
    }

    .services .service-card::after {
        content: '→';
        position: absolute;
        right: 14px;
        bottom: 14px;
        font-size: 1.05rem;
        color: var(--accent);
        transform: translateX(10px);
        opacity: 0;
        transition: opacity .35s ease, transform .35s ease;
        z-index: 4
    }

    .services .service-card:hover::after {
        opacity: 1;
        transform: translateX(0)
    }

    .services .service-card:hover {
        transform: translateY(-10px) scale(1.018);
        box-shadow: 0 34px 74px -18px rgba(2, 25, 32, 0.30);
        background: linear-gradient(180deg, #ffffff, #f0fbfa)
    }

    /* Preserve dark gradient on accent (dark) service cards when hovered */
    .services .service-card.accent:hover,
    .services-grid .service-card.accent:hover {
        background: linear-gradient(135deg, #07323a, #0b8f89) !important;
        color: #fff;
        box-shadow: 0 42px 110px -28px rgba(5, 52, 56, 0.65), 0 18px 46px -18px rgba(0, 0, 0, 0.5);
    }

    .services .service-card.accent:hover p,
    .services-grid .service-card.accent:hover p,
    .services .service-card.accent:hover ul li,
    .services-grid .service-card.accent:hover ul li {
        color: rgba(255, 255, 255, 0.85);
    }

    .services .service-card:hover {
        cursor: pointer
    }

    .services .service-icon {
        position: relative;
        width: 64px;
        height: 64px;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(11, 143, 137, 0.12), rgba(11, 143, 137, 0.02));
        color: var(--accent);
        font-size: 1.35rem;
        flex-shrink: 0;
        transition: transform .5s ease, box-shadow .5s ease, background .6s ease
    }

    .services .service-icon::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        background: var(--svc-grad);
        opacity: 0;
        filter: blur(3px);
        transition: opacity .6s ease, filter .6s ease
    }

    .services .service-card:hover .service-icon::after {
        opacity: .22;
        filter: blur(6px)
    }

    .services .service-card:hover .service-icon {
        transform: translateY(-8px) rotate(-8deg);
        box-shadow: 0 18px 44px -12px rgba(11, 143, 137, 0.25);
        background: linear-gradient(135deg, rgba(11, 143, 137, 0.18), rgba(11, 143, 137, 0.03))
    }

    .services .service-card.accent-2 {
        --svc-grad: linear-gradient(135deg, #0068b5, #0dcaf0)
    }

    .services .service-card.accent-3 {
        --svc-grad: linear-gradient(135deg, #7b2ff7, #6143e0)
    }

    .services .service-card.accent-4 {
        --svc-grad: linear-gradient(135deg, #ff8a05, #ff5f45)
    }

    .services .service-card.accent-5 {
        --svc-grad: linear-gradient(135deg, #0891b2, #06b6d4)
    }

    .services .service-card.accent-6 {
        --svc-grad: linear-gradient(135deg, #16a34a, #15803d)
    }

    .services .service-main {
        display: flex;
        gap: 1rem;
        align-items: flex-start
    }

    @media(max-width:576px) {
        .services .service-main {
            flex-direction: column;
            align-items: flex-start
        }
    }

    /* swap outline vs filled icons on hover (outline default, filled on hover) */
    .services .service-icon .service-ico-fill {
        display: none
    }

    .services .service-card:hover .service-icon .service-ico-fill {
        display: inline-block
    }

    .services .service-card:hover .service-icon .service-ico-outline {
        display: none
    }

    .services .service-card:focus {
        outline: none
    }

    .services .service-card:focus-visible {
        box-shadow: 0 34px 70px rgba(2, 6, 23, 0.12);
        transform: translateY(-6px);
        outline: 3px solid rgba(11, 143, 137, 0.16);
        outline-offset: 4px
    }

    /* subtle accent line on the left when focused/hovered */
    .services .service-card:focus-visible .service-badge,
    .services .service-card:hover .service-badge {
        box-shadow: 0 6px 28px rgba(6, 106, 98, 0.08)
    }

    .services .service-body h5 {
        margin: 0 0 .35rem 0
    }

    .services .service-body p {
        margin: 0
    }

    /* Service list styling */
    .services ul.service-points {
        list-style: none;
        margin: .6rem 0 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: .3rem
    }

    @media(min-width:1200px) {
        .services ul.service-points {
            grid-template-columns: 1fr
        }
    }

    .services ul.service-points li {
        position: relative;
        padding-left: 1.05rem;
        font-size: .78rem;
        line-height: 1.4;
        color: #355053
    }

    .services ul.service-points li::before {
        content: "";
        position: absolute;
        left: 0;
        top: .55em;
        width: .5rem;
        height: .5rem;
        border-radius: 3px;
        background: var(--svc-grad);
        box-shadow: 0 0 0 2px rgba(11, 143, 137, 0.18)
    }

    @media(min-width:1100px) {
        .services ul.service-points.large-list {
            column-count: 2;
            column-gap: 2rem;
            display: block
        }

        .services ul.service-points.large-list li {
            break-inside: avoid;
            margin-bottom: .3rem
        }
    }

    /* Scroll reveal */
    .services .service-card.reveal {
        opacity: 0;
        transform: translateY(18px) scale(.98)
    }

    .services .service-card.reveal.visible {
        opacity: 1;
        transform: none;
        transition: opacity .7s ease, transform .7s cubic-bezier(.2, .9, .2, 1)
    }

    .services .service-card.reveal.visible:nth-child(1) {
        transition-delay: .05s
    }

    .services .service-card.reveal.visible:nth-child(2) {
        transition-delay: .1s
    }

    .services .service-card.reveal.visible:nth-child(3) {
        transition-delay: .15s
    }

    .services .service-card.reveal.visible:nth-child(4) {
        transition-delay: .2s
    }

    .services .service-card.reveal.visible:nth-child(5) {
        transition-delay: .25s
    }

    .services .service-card.reveal.visible:nth-child(6) {
        transition-delay: .3s
    }

    /* .service-more was removed from markup; rule kept commented for potential future use */
    /* .services .service-more{margin-top:.6rem;font-size:.92rem;color:var(--accent);font-weight:600} */
    /* New expanded services grid (about-style cards) */
    .services-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1.35rem;
        margin-top: 1rem
    }

    .services-grid .service-card {
        cursor: default;
        text-decoration: none
    }

    .services-grid .service-card.span-6 {
        grid-column: span 6
    }

    .services-grid .service-card.span-4 {
        grid-column: span 4
    }

    .services-grid .service-card.span-8 {
        grid-column: span 8
    }

    .services-grid .service-card.span-12 {
        grid-column: span 12
    }

    .services-grid .service-card h3 .bi {
        font-size: 1.05rem
    }

    .services-grid .service-card ul {
        grid-template-columns: 1fr
    }

    .services-grid .service-card.accent {
        color: #fff
    }

    .services-grid .service-card.accent p,
    .services-grid .service-card.accent ul li {
        color: rgba(255, 255, 255, 0.85)
    }

    .services-grid .service-card a.btn-outline-light {
        border: 1px solid rgba(255, 255, 255, 0.4)
    }

    @media(max-width:992px) {
        .services-grid {
            grid-template-columns: repeat(6, 1fr)
        }

        .services-grid .service-card.span-6,
        .services-grid .service-card.span-4,
        .services-grid .service-card.span-8,
        .services-grid .service-card.span-12 {

            /* Stack hero action buttons vertically on mobile */
            .hero-ctas {
                flex-direction: column;
                align-items: stretch;
                width: 100%;
                gap: .85rem !important;
            }

            .hero-ctas .btn {
                width: 100%;
                justify-content: center;
                font-size: .95rem;
            }

            grid-column: span 6
        }
    }

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

        .services-grid .service-card.span-6,
        .services-grid .service-card.span-4,
        .services-grid .service-card.span-8,
        .services-grid .service-card.span-12 {
            grid-column: span 1
        }
    }

    /* About grid */
    .about-hero {
        display: grid;
        grid-template-columns: 1fr 560px;
        gap: 3.75rem;
        align-items: start
    }

    .about-hero .about-lead {
        background: linear-gradient(180deg, #071827, #04101a);
        color: #fff;
        padding: 3rem;
        border-radius: 1rem;
        box-shadow: 0 18px 56px rgba(2, 6, 23, 0.16);
        text-align: left
    }

    .about-hero .about-lead h3 {
        color: #fff
    }

    /* subtle texture for about lead */
    .about-hero .about-lead {
        background-image: radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(180deg, #071827, #04101a);
        background-size: 14px 14px, cover
    }

    .stat-tile {
        min-width: 96px;
        box-shadow: 0 8px 20px rgba(2, 6, 23, 0.06)
    }

    .stat-tile .bi {
        font-size: 1.15rem
    }

    .stat-tile {
        transition: transform .22s ease, box-shadow .22s ease
    }

    .stat-tile:hover {
        transform: translateY(-6px);
        box-shadow: 0 24px 48px rgba(2, 6, 23, 0.12)
    }

    @media(max-width:520px) {
        .about-stats .stat-tile {
            min-width: 80px;
            padding: .5rem
        }
    }

    /* About - feature cards */
    .feature-card {
        border-radius: .85rem;
        border: none;
        background: #fff;
        box-shadow: 0 10px 36px rgba(2, 6, 23, 0.06)
    }

    .feature-card .bi {
        color: var(--accent);
        font-size: 1.6rem
    }

    /* Large teal block */
    .about-hero-large-block {
        background: linear-gradient(180deg, #e9f5f5, #e3f0f0)
    }

    .about-hero-large-block .p-5 {
        padding: 3.25rem
    }

    .about-hero-large-block .stats-overlay {
        min-width: 140px
    }

    .about-hero-large-block h3 {
        color: #07323a
    }

    .about-hero-large-block p {
        color: #2b4b4d
    }

    @media(max-width:992px) {
        .about-hero-large-block .p-5 {
            padding: 2rem
        }
    }

    /* Align about heading left on wide screens */
    @media(min-width:992px) {
        #about h2 {
            text-align: left
        }
    }

    .about-stats .badge {
        border-radius: .6rem;
        padding: .45rem .6rem;
        font-weight: 600;
        opacity: 0.95
    }

    /* divider between lead and cards */
    .about-hero>div+div {
        position: relative
    }

    .about-hero>div+div::before {
        content: '';
        position: absolute;
        left: -18px;
        top: 8px;
        height: calc(100% - 16px);
        width: 1px;
        background: linear-gradient(#e6eef1, #f8fafc);
        opacity: 0.45;
        border-radius: 2px
    }

    @media(max-width:992px) {
        .about-hero>div+div::before {
            display: none
        }
    }

    .about-lead .btn {
        min-width: 160px
    }

    /* Improve readability for muted/small text on dark panels */
    .about-hero .about-lead .text-muted {
        color: rgba(255, 255, 255, 0.88) !important
    }

    .about-hero .about-lead .small {
        color: rgba(255, 255, 255, 0.78) !important
    }

    /* Hero outline button contrast on dark background */
    .hero .btn-outline-secondary {
        color: rgba(255, 255, 255, 0.95);
        border-color: rgba(255, 255, 255, 0.18)
    }

    .hero .btn-outline-secondary:hover {
        background: rgba(255, 255, 255, 0.04);
        color: #fff
    }

    /* Hero CTA buttons enhanced */
    .hero-ctas .btn {
        position: relative;
        overflow: hidden;
        font-weight: 600;
        box-shadow: none;
        transition: transform .45s cubic-bezier(.2, .9, .2, 1), box-shadow .45s, background .35s, color .35s;
        transform-origin: center;
        border-radius: 48px
    }

    .hero-ctas .btn-outline-secondary {
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.32);
        box-shadow: none;
        background: rgba(255, 255, 255, 0.06)
    }

    .hero-ctas .btn:hover {
        transform: translateY(-5px) scale(1.035);
        box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.55), 0 6px 16px -6px rgba(0, 0, 0, 0.35)
    }

    .hero-ctas .btn:active {
        transform: translateY(-2px) scale(.985);
        box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.55), 0 4px 10px -4px rgba(0, 0, 0, 0.35);
        transition-duration: .18s
    }

    .hero-ctas .btn:focus-visible {
        outline: 3px solid rgba(255, 255, 255, 0.6);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.25)
    }

    /* Sheen effect */
    .hero-ctas .btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100%);
        opacity: 0;
        transform: skewX(-20deg);
        pointer-events: none
    }

    .hero-ctas .btn:hover::after {
        animation: btnSheen 1s ease forwards
    }

    @keyframes btnSheen {
        0% {
            left: -60%;
            opacity: 0
        }

        15% {
            opacity: .9
        }

        50% {
            left: 110%;
            opacity: .4
        }

        80% {
            opacity: 0
        }

        100% {
            left: 130%;
            opacity: 0
        }
    }

    /* Subtle pulsing ring for primary button */
    .hero-ctas .btn-primary::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow: 0 0 0 0 rgba(11, 143, 137, 0.55);
        opacity: .0;
        pointer-events: none
    }

    @keyframes pulseRing {
        0% {
            box-shadow: 0 0 0 0 rgba(11, 143, 137, 0.55);
            opacity: .55
        }

        70% {
            box-shadow: 0 0 0 14px rgba(11, 143, 137, 0);
            opacity: 0
        }

        100% {
            box-shadow: 0 0 0 0 rgba(11, 143, 137, 0);
            opacity: 0
        }
    }

    .hero-ctas .btn-primary:hover::before {
        animation: pulseRing 1.4s ease-out
    }

    /* Entrance animation sequence */
    .hero-ctas .btn {
        opacity: 0;
        transform: translateY(16px) scale(.94)
    }

    @keyframes heroBtnIn {
        0% {
            opacity: 0;
            transform: translateY(22px) scale(.92)
        }

        60% {
            opacity: 1;
            transform: translateY(-4px) scale(1.02)
        }

        100% {
            opacity: 1;
            transform: translateY(0) scale(1)
        }
    }

    .hero-ctas .btn.hero-in {
        animation: heroBtnIn .9s cubic-bezier(.2, .9, .2, 1) forwards
    }

    .hero-ctas .btn.hero-in:nth-child(2) {
        animation-delay: .1s
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .hero-ctas .btn {
            animation: none !important;
            transform: none !important;
            opacity: 1 !important
        }

        .hero-ctas .btn::after,
        .hero-ctas .btn-primary::before {
            display: none !important
        }

        .hero-ctas .btn:hover {
            transform: none
        }
    }

    .about-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem
    }

    .about-card {
        background: #fff;
        border-radius: 1rem;
        padding: 1.5rem;
        box-shadow: 0 14px 44px rgba(2, 6, 23, 0.07);
        display: flex;
        gap: 16px;
        align-items: flex-start;
        transition: transform .36s cubic-bezier(.2, .9, .2, 1), box-shadow .36s;
        min-height: 120px
    }

    .about-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 34px 70px rgba(2, 6, 23, 0.14)
    }

    /* Disable touch highlight on mobile devices */
    .about-card {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        user-select: none
    }

    .about-card img {
        width: 84px;
        height: 84px;
        border-radius: 14px;
        flex-shrink: 0
    }

    /* staggered reveal support */
    .about-card.reveal {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .6s ease, transform .6s ease
    }

    .about-card.reveal.visible {
        opacity: 1;
        transform: none
    }

    .about-card.reveal:nth-child(1) {
        transition-delay: .06s
    }

    .about-card.reveal:nth-child(2) {
        transition-delay: .12s
    }

    .about-card.reveal:nth-child(3) {
        transition-delay: .18s
    }

    .about-card.reveal:nth-child(4) {
        transition-delay: .24s
    }

    @media(max-width:992px) {
        .about-hero {
            grid-template-columns: 1fr
        }

        .about-cards {
            grid-template-columns: 1fr
        }
    }

    /* CTA styling for hero */
    .hero .btn-lg {
        border-radius: 48px;
        padding: 14px 24px
    }

    /* icon inside hero buttons: white circular background, icon colored to match accent */
    .hero .btn .bi {
        font-size: 1.05em;
        vertical-align: middle;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        background: #fff;
        color: var(--accent);
        border-radius: 50%;
        padding: 0.05rem;
        box-shadow: 0 8px 22px rgba(2, 6, 10, 0.08);
        flex-shrink: 0;
    }

    /* Sections - more vertical rhythm */
    section.py-5 {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem
    }

    section.py-6,
    section.py-7 {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem
    }

    /* Services grid breathing room */
    .services .row.g-4 {
        gap: 1.5rem
    }

    /* Wider content containers on large screens */
    @media(min-width:1200px) {
        .container {
            max-width: 1180px
        }
    }

    .hero .btn-outline-secondary.btn-lg {
        background: transparent
    }

    .hero .cta-group {
        justify-content: flex-start
    }

    /* Responsive hero alignment: center on small screens */
    @media(max-width:768px) {
        .hero {
            justify-content: center;
            text-align: center;
            padding: 2.25rem 1rem;
            /* Make hero full-height on mobile (account for sticky nav). Use 100vh fallback then 100dvh for iOS dynamic bars */
            min-height: calc(100vh - var(--nav-height));
            min-height: calc(100dvh - var(--nav-height));
        }

        .hero .hero-content {
            max-width: 100%
        }

        .hero .col-lg-7 {
            margin: 0 auto
        }

        .hero .btn-lg {
            display: inline-block
        }

        /* Further reduce hero heading & typing text size on small screens */
        #hero h1 {
            font-size: clamp(.85rem, 4.4vw, 1.25rem) !important;
            line-height: 1.14;
        }

        /* Keep type text to a single line on very small screens if possible */
        @media (max-width:480px) {
            #hero h1 {
                font-size: clamp(.8rem, 4.2vw, 1.1rem) !important;
            }
        }

        /* Force typing text span size on mobile */
        #hero #type-text {
            font-size: 20px !important;
            line-height: 1.2;
            white-space: nowrap;
        }

        #hero #type-text {
            font-size: inherit;
            white-space: normal !important;
            word-break: break-word;
        }

        #hero .type-caret {
            height: .9em;
        }

        /* Stack CTAs vertically */
        .hero-ctas {
            flex-direction: column;
            align-items: stretch;
            width: 100%;
            gap: .85rem !important;
        }

        .hero-ctas .btn {
            width: 100%;
            justify-content: center;
        }
    }

    /* Typewriter caret */
    #type-text {
        display: inline-block;
        white-space: nowrap;
        max-width: none
    }

    .type-caret {
        display: inline-block;
        width: 2px;
        height: 1.05em;
        background: var(--accent);
        margin-left: 8px;
        vertical-align: middle;
        animation: blink .9s steps(2, end) infinite
    }

    @keyframes blink {
        50% {
            opacity: 0
        }
    }

    .btn-primary {
        background: var(--accent);
        border-color: transparent
    }

    .btn-primary:hover {
        background: var(--accent-dark)
    }

    /* make hero primary CTA slightly transparent so background shows through */
    .hero .btn-primary {
        background: rgba(11, 143, 137, 0.86);
        border-color: transparent;
        color: #fff;
    }

    .hero .btn-primary:hover {
        background: rgba(6, 106, 98, 0.98);
    }

    /* Services */
    .services .card {
        border: none;
        border-radius: 1rem;
        background: linear-gradient(180deg, #ffffff, #f7feff);
        box-shadow: 0 8px 36px rgba(13, 202, 240, 0.08);
        transition: transform .28s ease, box-shadow .28s ease;
        padding: 1.5rem
    }

    /* Icon background inside card */
    .icon-wrap {
        position: relative;
        min-width: 44px
    }

    .icon-bg {
        position: absolute;
        left: -8px;
        top: -10px;
        opacity: .10;
        transform-origin: center
    }

    .card .learn-more {
        font-size: .9rem
    }

    /* subtle entrance */
    .reveal {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity .6s ease, transform .6s ease
    }

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

    /* Founder */
    .founder-img {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        object-fit: cover;
        border: 8px solid #fff;
        box-shadow: 0 12px 48px rgba(2, 6, 23, 0.14)
    }

    /* Testimonials */
    .testimonial-card {
        border-radius: .9rem;
        border: none;
        box-shadow: 0 8px 30px rgba(2, 6, 23, 0.06)
    }

    /* Contact */
    .contact-card {
        background: #fff;
        border-radius: 1rem;
        box-shadow: 0 8px 40px rgba(2, 6, 23, 0.04);
        padding: 1.25rem
    }

    /* Footer */
    footer {
        background: #0f1724;
        color: #d1d5db;
        padding: 2.25rem 0
    }

    /* Utilities */
    @media(min-width:992px) {
        .hero {
            padding: 6rem 1.5rem
        }
    }

    /* reset: sections will stack normally under the hero when hero is in document flow */
    #services {
        position: relative
    }

    /* Smooth scrolling for in-page navigation and offset targets for fixed navbar */
    html {
        scroll-behavior: smooth
    }

    /* ensure sections are not hidden behind the fixed navbar when linked */
    #hero,
    #services,
    #about,
    #founders,
    #testimonials,
    #contact,
    #cta-growth,
    #cta-strategy,
    #cta-experience,
    #contact-form {
        scroll-margin-top: calc(var(--nav-height) + 12px)
    }

    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0s !important;
            transition-duration: 0s !important;
            scroll-behavior: auto !important
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .reveal {
            transition: none
        }
    }

    /* Make SVGs and images respect container width to avoid overflow */
    img,
    svg {
        max-width: 100%;
        height: auto;
        display: block
    }

    /* ================= About Section (New) ================= */
    #about {
        position: relative
    }

    #about .about-intro {
        max-width: 840px;
        margin: 0 auto 2.25rem auto;
        text-align: center
    }

    #about .about-intro h2 {
        font-size: clamp(1.6rem, 3vw, 2.25rem);
        font-weight: 700;
        margin: 0 0 .75rem
    }

    #about .about-intro p.lead {
        color: #345253;
        font-size: 1.05rem;
        margin: 0 auto
    }

    /* Mobile-first About grid */
    .about-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.35rem;
        grid-auto-flow: dense
    }

    .about-grid .about-card {
        grid-column: 1 / -1
    }

    /* Medium screens: introduce 6-column layout */
    @media (min-width:640px) {
        .about-grid {
            grid-template-columns: repeat(6, 1fr)
        }

        .about-grid .about-card {
            grid-column: span 6
        }
    }

    /* Large screens: full 12-column asymmetric layout */
    @media (min-width:1100px) {
        .about-grid {
            grid-template-columns: repeat(12, 1fr)
        }

        .about-grid .about-card {
            grid-column: auto
        }

        .about-card.area-vision {
            grid-column: span 6;
            grid-row: span 2
        }

        .about-card.area-mission {
            grid-column: span 6;
            grid-row: span 1
        }

        .about-card.area-story {
            grid-column: span 6;
            grid-row: span 2
        }

        .about-card.area-art {
            grid-column: span 6;
            grid-row: span 1
        }

        .about-card.area-values {
            grid-column: span 4;
            grid-row: span 1
        }

        .about-card.area-approach {
            grid-column: span 4;
            grid-row: span 1
        }

        .about-card.area-differentiators {
            grid-column: span 4;
            grid-row: span 2
        }

        .about-card.area-metrics {
            grid-column: span 8;
            grid-row: span 1
        }
    }

    .about-card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: .65rem;
        background: #fff;
        border-radius: 1rem;
        padding: 1.4rem 1.4rem 1.55rem;
        border: 1px solid rgba(11, 143, 137, 0.06);
        box-shadow: 0 8px 28px -8px rgba(2, 25, 32, 0.08);
        transition: transform .55s cubic-bezier(.2, .9, .2, 1), box-shadow .55s, background .55s
    }

    .about-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 26px 60px -18px rgba(2, 25, 32, 0.22)
    }

    .about-card.compact {
        padding: 1.05rem 1.1rem 1.2rem
    }

    .about-card.accent {
        background: linear-gradient(135deg, #07323a, #0b8f89);
        color: #fff;
        box-shadow: 0 26px 60px -18px rgba(5, 52, 56, 0.5)
    }

    .about-card.accent p,
    .about-card.accent li,
    .about-card.accent small {
        color: rgba(255, 255, 255, 0.82)
    }

    .about-card.gradient-soft {
        background: linear-gradient(135deg, #ffffff 0%, #eef8f7 85%)
    }

    .about-card h3 {
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: .4px;
        margin: 0 0 .35rem;
        color: #07323a;
        display: flex;
        align-items: center;
        gap: .55rem
    }

    .about-card.accent h3 {
        color: #fff
    }

    .about-card p {
        margin: 0;
        font-size: .9rem;
        line-height: 1.45;
        color: #345253
    }

    .about-card ul {
        margin: .25rem 0 0 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: .35rem;
        font-size: .8rem
    }

    .about-card ul li {
        position: relative;
        padding-left: 1rem;
        color: #345253;
        line-height: 1.35
    }

    .about-card ul li::before {
        content: "";
        position: absolute;
        left: 0;
        top: .45em;
        width: .55rem;
        height: .55rem;
        border-radius: 3px;
        background: linear-gradient(135deg, var(--accent), var(--accent-dark));
        box-shadow: 0 0 0 2px rgba(11, 143, 137, 0.15)
    }

    .about-card.accent ul li::before {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18)
    }

    .about-badge {
        font-size: .62rem;
        letter-spacing: .7px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--accent);
        background: linear-gradient(90deg, #d4efed, #e3f7f5);
        padding: .35rem .55rem;
        border-radius: .45rem;
        display: inline-flex;
        align-self: flex-start;
        box-shadow: 0 4px 10px -4px rgba(11, 143, 137, 0.28)
    }

    .about-card.accent .about-badge {
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
        box-shadow: none
    }

    .about-metrics {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin: .35rem 0 0 0
    }

    .about-metric {
        flex: 1 1 110px;
        min-width: 110px;
        background: #fff;
        border: 1px solid #e3efef;
        border-radius: .8rem;
        padding: .75rem .85rem;
        text-align: left;
        box-shadow: 0 4px 14px -6px rgba(2, 25, 32, 0.08);
        transition: transform .4s, box-shadow .4s
    }

    .about-metric:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 32px -10px rgba(2, 25, 32, 0.25)
    }

    .about-metric strong {
        display: block;
        font-size: 1.15rem;
        color: #07323a;
        line-height: 1.1
    }

    .about-metric span {
        font-size: .65rem;
        letter-spacing: .5px;
        font-weight: 600;
        color: #345253;
        text-transform: uppercase
    }

    /* Art card base styling (positioning applied in large screen media query) */
    .about-card.area-art {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #07323a, #0b8f89);
        color: #fff
    }

    .about-card.area-art .art-inner {
        position: relative;
        z-index: 2;
        text-align: center;
        max-width: 340px
    }

    .about-card.area-art h3 {
        color: #fff;
        font-size: 1.15rem;
        margin: 0 0 .5rem
    }

    .about-card.area-art p {
        color: rgba(255, 255, 255, 0.85);
        font-size: .85rem;
        margin: 0
    }

    .about-card.area-art svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: .28;
        mix-blend-mode: overlay
    }

    .about-card.area-metrics {
        display: flex;
        flex-direction: column
    }

    /* Icon styling inside heading */
    .about-card h3 .bi {
        font-size: 1.15rem;
        color: var(--accent);
        background: linear-gradient(135deg, rgba(11, 143, 137, 0.12), rgba(11, 143, 137, 0));
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center
    }

    .about-card.accent h3 .bi {
        color: #fff;
        background: rgba(255, 255, 255, 0.18)
    }

    /* Reveal adaptation */
    #about .about-card.reveal {
        opacity: 0;
        transform: translateY(20px) scale(.97)
    }

    #about .about-card.reveal.visible {
        opacity: 1;
        transform: none;
        transition: opacity .75s ease, transform .75s cubic-bezier(.2, .9, .2, 1)
    }

    #about .about-card.reveal.visible:nth-child(1) {
        transition-delay: .05s
    }

    #about .about-card.reveal.visible:nth-child(2) {
        transition-delay: .1s
    }

    #about .about-card.reveal.visible:nth-child(3) {
        transition-delay: .15s
    }

    #about .about-card.reveal.visible:nth-child(4) {
        transition-delay: .2s
    }

    #about .about-card.reveal.visible:nth-child(5) {
        transition-delay: .25s
    }

    #about .about-card.reveal.visible:nth-child(6) {
        transition-delay: .3s
    }

    @media (prefers-reduced-motion: reduce) {
        #about .about-card.reveal {
            opacity: 1 !important;
            transform: none !important
        }
    }

    /* Dark mode disabled - light mode only */

    /* ================= Founders Section ================= */
    #founders {
        position: relative
    }

    #founders .founders-intro {
        max-width: 760px;
        margin: 0 auto 2.25rem;
        text-align: center
    }

    .founders-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: 1.35rem
    }

    .founder-card {
        position: relative;
        background: #fff;
        border-radius: 1.1rem;
        padding: 1.5rem 1.25rem 1.65rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .65rem;
        box-shadow: 0 10px 42px -10px rgba(2, 25, 32, 0.14);
        border: 1px solid rgba(11, 143, 137, 0.06);
        overflow: hidden;
        transition: transform .55s cubic-bezier(.2, .9, .2, 1), box-shadow .55s, background .55s
    }

    .founder-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 0%, rgba(11, 143, 137, 0.15), transparent 70%);
        opacity: .4;
        pointer-events: none;
        transition: opacity .6s
    }

    .founder-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 34px 72px -18px rgba(2, 25, 32, 0.32)
    }

    .founder-card:hover::before {
        opacity: .55
    }

    .founder-photo-wrap {
        position: relative;
        width: 132px;
        height: 132px;
        margin-top: .35rem;
        margin-bottom: .35rem
    }

    .founder-photo-ring {
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        background: linear-gradient(135deg, #0b8f89, #066a62, #0dcaf0);
        padding: 3px;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: .85
    }

    .founder-photo {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        display: block;
        box-shadow: 0 10px 42px -8px rgba(2, 25, 32, 0.35)
    }

    .founder-card h3 {
        font-size: 1rem;
        font-weight: 700;
        margin: 0;
        color: #07323a;
        letter-spacing: .3px
    }

    .founder-role {
        font-size: .65rem;
        letter-spacing: .6px;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--accent);
        background: linear-gradient(90deg, #d4efed, #e3f7f5);
        padding: .3rem .55rem;
        border-radius: .5rem;
        display: inline-block;
        margin-top: -.15rem
    }

    .founder-bio {
        font-size: .78rem;
        line-height: 1.4;
        margin: 0;
        color: #345253
    }

    .founder-social {
        display: flex;
        gap: .65rem;
        margin-top: auto
    }

    .founder-social a {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        background: linear-gradient(135deg, #f0fbfa, #e4f6f4);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--accent);
        font-size: .95rem;
        box-shadow: 0 4px 14px -4px rgba(2, 25, 32, 0.18);
        transition: background .4s, transform .4s, box-shadow .4s;
        text-decoration: none
    }

    .founder-social a:hover {
        transform: translateY(-4px);
        background: linear-gradient(135deg, #0b8f89, #066a62);
        color: #fff;
        box-shadow: 0 18px 44px -14px rgba(2, 25, 32, 0.35)
    }

    /* reveal for founders */
    #founders .reveal {
        opacity: 0;
        transform: translateY(18px) scale(.97);
        transition: opacity .65s ease, transform .65s cubic-bezier(.2, .9, .2, 1)
    }

    #founders .reveal.visible {
        opacity: 1;
        transform: none
    }

    /* Dark mode disabled - light mode only */

    /* ================= Contact Section ================= */
    #contact {
        position: relative
    }

    #contact::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 18% 22%, rgba(11, 143, 137, 0.18), transparent 60%), radial-gradient(circle at 82% 78%, rgba(6, 106, 98, 0.18), transparent 65%);
        opacity: .55;
        pointer-events: none
    }

    .contact-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1.5rem;
        position: relative;
        z-index: 2
    }

    .contact-left {
        grid-column: span 5;
        display: flex;
        flex-direction: column;
        gap: 1.15rem;
        position: relative
    }

    .contact-left .hero-panel {
        background: linear-gradient(135deg, #07323a, #0b8f89);
        color: #fff;
        border-radius: 1.2rem;
        padding: 2.1rem 2.1rem 2.25rem;
        box-shadow: 0 28px 80px -20px rgba(2, 25, 32, 0.45);
        position: relative;
        overflow: hidden
    }

    .contact-left .hero-panel::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.16), transparent 60%);
        mix-blend-mode: overlay;
        opacity: .65
    }

    .contact-left .hero-panel h3 {
        margin: 0 0 .85rem;
        font-size: 1.45rem;
        font-weight: 700;
        letter-spacing: .4px;
        color: #fff
    }

    .contact-bullets {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: .6rem;
        font-size: .85rem
    }

    .contact-bullets li {
        position: relative;
        padding-left: 1.15rem;
        color: rgba(255, 255, 255, 0.85);
        line-height: 1.35
    }

    .contact-bullets li::before {
        content: "";
        position: absolute;
        left: 0;
        top: .45em;
        width: .6rem;
        height: .6rem;
        border-radius: 3px;
        background: linear-gradient(135deg, #0dcaf0, #0b8f89);
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22)
    }

    .contact-quick {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 1rem
    }

    .contact-mini {
        background: #fff;
        border: 1px solid rgba(11, 143, 137, 0.08);
        border-radius: .9rem;
        padding: .9rem 1rem;
        display: flex;
        align-items: flex-start;
        gap: .65rem;
        box-shadow: 0 14px 38px -14px rgba(2, 25, 32, 0.15);
        position: relative;
        overflow: hidden;
        transition: transform .5s cubic-bezier(.2, .9, .2, 1), box-shadow .5s
    }

    .contact-mini::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 0 0, rgba(11, 143, 137, 0.18), transparent 70%);
        opacity: .35;
        pointer-events: none;
        transition: opacity .6s
    }

    .contact-mini:hover {
        transform: translateY(-6px);
        box-shadow: 0 30px 72px -24px rgba(2, 25, 32, 0.30)
    }

    .contact-mini:hover::before {
        opacity: .55
    }

    .contact-mini .bi {
        font-size: 1.15rem;
        color: var(--accent);
        background: linear-gradient(135deg, rgba(11, 143, 137, 0.16), rgba(11, 143, 137, 0));
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0
    }

    .contact-mini h4 {
        margin: 0;
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: #07323a
    }

    .contact-mini p {
        margin: .2rem 0 0;
        font-size: .72rem;
        line-height: 1.25;
        color: #355053
    }

    .contact-form-card {
        grid-column: span 7;
        background: #fff;
        border-radius: 1.2rem;
        padding: 2rem 2rem 2.25rem;
        border: 1px solid rgba(11, 143, 137, 0.08);
        box-shadow: 0 26px 70px -20px rgba(2, 25, 32, 0.18);
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
        position: relative;
        overflow: hidden
    }

    .contact-form-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 90% 10%, rgba(11, 143, 137, 0.22), transparent 70%);
        opacity: .35;
        pointer-events: none
    }

    .contact-form-card h3 {
        margin: 0 0 .25rem;
        font-size: 1.2rem;
        font-weight: 700;
        color: #07323a;
        letter-spacing: .4px
    }

    .form-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1rem
    }

    .form-grid .col-span-6 {
        grid-column: span 6
    }

    .form-grid .col-span-12 {
        grid-column: span 12
    }

    @media(max-width:992px) {
        .contact-left {
            grid-column: span 12
        }

        .contact-form-card {
            grid-column: span 12
        }

        .form-grid .col-span-6 {
            grid-column: span 12
        }
    }

    .form-floating>label {
        font-size: .75rem;
        letter-spacing: .4px
    }

    .form-control,
    .form-select {
        background: linear-gradient(180deg, #ffffff, #f5fafa);
        border: 1px solid #d5e8e7;
        border-radius: .75rem;
        padding: .75rem .9rem;
        font-size: .82rem;
        box-shadow: 0 4px 18px -6px rgba(2, 25, 32, 0.08);
        transition: border-color .35s, box-shadow .35s, background .35s
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(11, 143, 137, 0.25);
        background: #fff
    }

    textarea.form-control {
        min-height: 120px;
        resize: vertical
    }

    .contact-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        margin-top: .25rem
    }

    .contact-actions .btn {
        border-radius: 48px;
        font-weight: 600;
        padding: .75rem 1.4rem;
        position: relative;
        overflow: hidden;
        transition: transform .5s cubic-bezier(.2, .9, .2, 1), box-shadow .5s;
        background: var(--accent);
        border: none
    }

    .contact-actions .btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 44px -14px rgba(2, 25, 32, 0.55)
    }

    .contact-actions .btn:active {
        transform: translateY(-1px)
    }

    .contact-actions small {
        font-size: .65rem;
        color: #355053
    }

    .contact-trust {
        display: flex;
        gap: 1.25rem;
        flex-wrap: wrap;
        margin: .25rem 0 0 0
    }

    .contact-trust .trust-item {
        display: flex;
        align-items: center;
        gap: .5rem;
        font-size: .65rem;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: .6px;
        color: #355053;
        background: #f0f9f8;
        border: 1px solid #d5ecea;
        border-radius: 40px;
        padding: .45rem .85rem
    }

    .contact-trust .trust-item .bi {
        font-size: .9rem;
        color: var(--accent)
    }

    /* reveal */
    #contact .reveal {
        opacity: 0;
        transform: translateY(24px) scale(.97);
        transition: opacity .75s ease, transform .75s cubic-bezier(.2, .9, .2, 1)
    }

    #contact .reveal.visible {
        opacity: 1;
        transform: none
    }

    /* Dark mode disabled - light mode only */

    .form-control,
    .form-select {
        background: linear-gradient(180deg, #f8f9fa, #ffffff);
        border-color: #264547;
        color: #e7f5f3
    }

    .form-control:focus,
    .form-select:focus {
        background: #1d3538;
        border-color: var(--accent)
    }

    .contact-actions small {
        color: #9bb9b8
    }

    .contact-trust .trust-item {
        background: #182f32;
        border-color: #264547;
        color: #9bb9b8
    }


    /* ================= Testimonials Section ================= */
    #testimonials {
        position: relative
    }

    #testimonials::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(11, 143, 137, 0.07), rgba(6, 106, 98, 0));
        pointer-events: none;
        opacity: .7
    }

    .testimonials-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1.35rem;
        position: relative;
        z-index: 2
    }

    .tm-card {
        grid-column: span 4;
        position: relative;
        background: #fff;
        border-radius: 1.1rem;
        padding: 1.5rem 1.4rem 1.6rem;
        border: 1px solid rgba(11, 143, 137, 0.08);
        box-shadow: 0 18px 56px -22px rgba(2, 25, 32, 0.28);
        display: flex;
        flex-direction: column;
        gap: .85rem;
        overflow: hidden;
        transition: transform .6s cubic-bezier(.2, .9, .2, 1), box-shadow .6s, background .6s
    }

    .tm-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 85% 15%, rgba(11, 143, 137, 0.25), transparent 70%);
        opacity: .35;
        pointer-events: none;
        transition: opacity .6s
    }

    .tm-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 40px 86px -30px rgba(2, 25, 32, 0.50)
    }

    .tm-card:hover::before {
        opacity: .55
    }

    .tm-head {
        display: flex;
        align-items: center;
        gap: .85rem
    }

    .tm-avatar {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 8px 28px -10px rgba(2, 25, 32, 0.35);
        border: 4px solid #fff;
        position: relative
    }

    .tm-meta {
        display: flex;
        flex-direction: column;
        gap: .15rem
    }

    .tm-name {
        font-size: .9rem;
        font-weight: 700;
        letter-spacing: .4px;
        color: #07323a;
        margin: 0
    }

    .tm-role {
        font-size: .6rem;
        letter-spacing: .6px;
        font-weight: 600;
        text-transform: uppercase;
        background: linear-gradient(90deg, #d4efed, #e3f7f5);
        color: var(--accent);
        padding: .3rem .55rem;
        border-radius: .5rem;
        display: inline-block
    }

    .tm-quote {
        font-size: .8rem;
        line-height: 1.45;
        color: #345253;
        margin: 0;
        position: relative;
        padding-left: 1.2rem
    }

    .tm-quote::before {
        content: '“';
        position: absolute;
        left: 0;
        top: -.2rem;
        font-size: 1.8rem;
        line-height: 1;
        color: var(--accent);
        opacity: .4;
        font-family: serif
    }

    .tm-rating {
        display: flex;
        gap: .25rem;
        font-size: .85rem;
        color: #ffb545
    }

    .tm-pulse {
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0
    }

    .tm-card:hover .tm-pulse {
        animation: tmPulse 1.6s ease-out
    }

    @keyframes tmPulse {
        0% {
            box-shadow: 0 0 0 0 rgba(11, 143, 137, 0.55);
            opacity: .7
        }

        100% {
            box-shadow: 0 0 0 34px rgba(11, 143, 137, 0);
            opacity: 0
        }
    }

    .tm-card.featured {
        grid-column: span 8;
        background: linear-gradient(135deg, #07323a, #0b8f89);
        color: #fff;
        box-shadow: 0 46px 90px -24px rgba(5, 52, 56, 0.55);
        border-color: rgba(255, 255, 255, 0.12)
    }

    .tm-card.featured .tm-name {
        color: #fff
    }

    .tm-card.featured .tm-quote {
        color: rgba(255, 255, 255, 0.88)
    }

    .tm-card.featured .tm-quote::before {
        color: #fff;
        opacity: .35
    }

    .tm-card.featured .tm-role {
        background: rgba(255, 255, 255, 0.18);
        color: #fff
    }

    @media(max-width:1200px) {
        .tm-card {
            grid-column: span 6
        }

        .tm-card.featured {
            grid-column: span 12
        }
    }

    @media(max-width:768px) {

        .tm-card,
        .tm-card.featured {
            grid-column: span 12
        }
    }

    #testimonials .reveal {
        opacity: 0;
        transform: translateY(22px) scale(.97);
        transition: opacity .75s ease, transform .75s cubic-bezier(.2, .9, .2, 1)
    }

    #testimonials .reveal.visible {
        opacity: 1;
        transform: none
    }

    /* Dark mode disabled - light mode only */

    /* ================= Footer ================= */
    footer.site-footer {
        position: relative;
        background: linear-gradient(180deg, #062125, #07323a);
        color: #d8efed;
        margin-top: 4rem;
        padding: 4.5rem 0 2.25rem;
        overflow: hidden
    }

    footer.site-footer::before,
    footer.site-footer::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        opacity: .4;
        pointer-events: none
    }

    footer.site-footer::before {
        width: 520px;
        height: 520px;
        left: -160px;
        top: -200px;
        background: radial-gradient(circle at 30% 30%, rgba(13, 202, 240, 0.9), rgba(13, 202, 240, 0))
    }

    footer.site-footer::after {
        width: 480px;
        height: 480px;
        right: -180px;
        bottom: -220px;
        background: radial-gradient(circle at 70% 70%, rgba(6, 106, 98, 0.9), rgba(6, 106, 98, 0))
    }

    .footer-top {
        position: relative;
        z-index: 2
    }

    .footer-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 2.25rem;
        align-items: start
    }

    .footer-brand {
        grid-column: span 3;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        min-width: 0
    }

    .footer-brand img {
        width: 160px;
        height: auto;
        filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.35))
    }

    .footer-logo-tile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border-radius: 26px;
        padding: 14px 18px 12px;
        box-shadow: 0 20px 60px -18px rgba(0, 0, 0, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(6px);
        transition: transform .55s cubic-bezier(.2, .9, .2, 1), box-shadow .55s
    }

    .footer-logo-tile:hover {
        transform: translateY(-6px);
        box-shadow: 0 36px 92px -26px rgba(0, 0, 0, 0.65)
    }

    .footer-logo-img {
        height: 64px;
        width: auto;
        display: block;
        filter: drop-shadow(0 10px 26px -8px rgba(0, 0, 0, 0.35))
    }

    @media(max-width:560px) {
        .footer-logo-tile {
            border-radius: 20px;
            padding: 12px 16px 10px
        }

        .footer-logo-img {
            height: 58px
        }
    }

    .footer-brand p {
        font-size: .8rem;
        line-height: 1.5;
        color: #b7d7d5;
        margin: 0;
        max-width: 400px
    }

    .footer-col {
        grid-column: span 2;
        display: flex;
        flex-direction: column;
        gap: .65rem
    }

    .footer-col h5 {
        font-size: .7rem;
        letter-spacing: .7px;
        text-transform: uppercase;
        font-weight: 700;
        color: #0dcaf0;
        margin: 0 0 .3rem
    }

    .footer-col a {
        font-size: .72rem;
        text-decoration: none;
        color: #cbe6e4;
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        position: relative;
        transition: color .35s, transform .35s
    }

    .footer-col a::before {
        content: "";
        position: absolute;
        left: -10px;
        width: 4px;
        height: 4px;
        background: linear-gradient(135deg, #0dcaf0, #0b8f89);
        border-radius: 2px;
        opacity: 0;
        transform: translateX(-4px);
        transition: opacity .35s, transform .35s
    }

    .footer-col a:hover {
        color: #fff;
        transform: translateX(4px)
    }

    .footer-col a:hover::before {
        opacity: 1;
        transform: translateX(0)
    }

    .footer-map {
        grid-column: span 3;
        display: flex;
        flex-direction: column;
        gap: .75rem
    }

    /* ensure total columns wrap cleanly on wide screens */
    @media(min-width:1400px) {
        .footer-brand {
            grid-column: span 3
        }

        .footer-col {
            grid-column: span 2
        }

        .footer-map {
            grid-column: span 3
        }
    }

    .map-embed {
        position: relative;
        padding-top: 62%;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 20px 60px -18px rgba(0, 0, 0, 0.5);
        background: linear-gradient(135deg, #0b8f89, #066a62)
    }

    .map-embed iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        filter: grayscale(.15) saturate(1.1) contrast(1.05)
    }

    .footer-social {
        display: flex;
        gap: .65rem;
        margin-top: .5rem;
        flex-wrap: wrap
    }

    .footer-social a {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: linear-gradient(135deg, #0dcaf0, #0b8f89);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1rem;
        box-shadow: 0 12px 34px -12px rgba(0, 0, 0, 0.6);
        text-decoration: none;
        transition: transform .5s, box-shadow .5s, filter .5s
    }

    .footer-social a:hover {
        transform: translateY(-6px) rotate(-6deg);
        box-shadow: 0 26px 70px -20px rgba(0, 0, 0, 0.75);
        filter: brightness(1.1)
    }

    .footer-divider {
        height: 1px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
        margin: 3rem 0 1.5rem
    }

    .footer-bottom {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 1.5rem 0;
    }

    .footer-bottom small {
        font-size: 0.85rem;
        letter-spacing: 0.5px;
        color: #ffffff !important;
        font-weight: 600;
        opacity: 1 !important;
        display: block;
        line-height: 1.6;
    }

    .footer-inline-links {
        display: flex;
        gap: 1.25rem;
        flex-wrap: wrap
    }

    .footer-inline-links a {
        font-size: .6rem;
        text-decoration: none;
        color: #b7d7d5;
        letter-spacing: .5px
    }

    .footer-inline-links a:hover {
        color: #fff
    }

    .office-block {
        font-size: .68rem;
        line-height: 1.45;
        color: #c0dfdd
    }

    .office-block strong {
        display: block;
        font-size: .62rem;
        letter-spacing: .6px;
        color: #0dcaf0;
        text-transform: uppercase;
        margin-bottom: .15rem
    }

    @media(max-width:1100px) {
        .footer-brand {
            grid-column: span 6
        }

        .footer-map {
            grid-column: span 6
        }

        .footer-col {
            grid-column: span 3
        }
    }

    @media(max-width:820px) {
        .footer-brand {
            grid-column: span 12
        }

        .footer-map {
            grid-column: span 12
        }

        .footer-col {
            grid-column: span 4
        }

        .footer-grid {
            gap: 1.75rem
        }
    }

    @media(max-width:560px) {
        .footer-col {
            grid-column: span 6
        }

        .footer-col a {
            font-size: .7rem
        }

        .footer-brand p {
            font-size: .75rem
        }
    }

    footer.site-footer .reveal {
        opacity: 0;
        transform: translateY(24px) scale(.97);
        transition: opacity .8s ease, transform .8s cubic-bezier(.2, .9, .2, 1)
    }

    footer.site-footer .reveal.visible {
        opacity: 1;
        transform: none
    }

    .footer-bottom.reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Make footer full-bleed */
    footer.site-footer .container.footer-top {
        max-width: 100%;
        width: 100%;
        padding-left: clamp(1rem, 4vw, 3.5rem);
        padding-right: clamp(1rem, 4vw, 3.5rem);
        margin-left: 0;
        margin-right: 0
    }

    footer.site-footer .footer-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr))
    }

    /* Dark mode disabled - light mode only */

    /* Pre-Footer Experience CTA */
    .experience-strip {
        position: relative;
        margin: 0 0 -2rem;
        z-index: 10
    }

    .experience-panel {
        position: relative;
        background: linear-gradient(135deg, #07323a, #0b8f89);
        color: #fff;
        border-radius: 1.6rem;
        padding: 3.4rem 2.6rem;
        overflow: hidden;
        box-shadow: 0 48px 120px -28px rgba(5, 52, 56, 0.65);
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 2.5rem;
        align-items: center
    }

    .experience-panel::before,
    .experience-panel::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        opacity: .32;
        pointer-events: none
    }

    .experience-panel::before {
        width: 520px;
        height: 520px;
        left: -160px;
        top: -180px;
        background: radial-gradient(circle at 30% 30%, rgba(13, 202, 240, 0.9), rgba(13, 202, 240, 0))
    }

    .experience-panel::after {
        width: 480px;
        height: 480px;
        right: -180px;
        bottom: -200px;
        background: radial-gradient(circle at 70% 70%, rgba(6, 106, 98, 0.9), rgba(6, 106, 98, 0))
    }

    .experience-copy h3 {
        margin: 0 0 .85rem;
        font-size: clamp(1.5rem, 3vw, 2.05rem);
        font-weight: 700;
        letter-spacing: .5px;
        line-height: 1.15;
        background: linear-gradient(90deg, #fff, #d4ffff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
    }

    .experience-copy p {
        margin: 0 0 1.25rem;
        font-size: .98rem;
        max-width: 760px;
        color: rgba(255, 255, 255, 0.88);
        line-height: 1.55
    }

    .xp-badge {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        font-size: .62rem;
        font-weight: 700;
        letter-spacing: .75px;
        text-transform: uppercase;
        background: linear-gradient(90deg, #d4efed, #e3f7f5);
        color: var(--accent);
        padding: .45rem .75rem;
        border-radius: .65rem;
        margin: 0 0 1rem;
        box-shadow: 0 4px 14px -4px rgba(11, 143, 137, 0.35)
    }

    .experience-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .9rem
    }

    .experience-actions .btn {
        border-radius: 48px;
        font-weight: 600;
        padding: .95rem 1.75rem;
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        position: relative;
        overflow: hidden
    }

    .experience-actions .btn-primary {
        background: #fff;
        color: var(--accent);
        border: none;
        box-shadow: 0 12px 36px -12px rgba(0, 0, 0, 0.55);
        transition: transform .55s cubic-bezier(.2, .9, .2, 1), box-shadow .55s
    }

    .experience-actions .btn-primary:hover {
        transform: translateY(-6px);
        box-shadow: 0 30px 68px -20px rgba(0, 0, 0, 0.7)
    }

    .experience-actions .btn-outline-light {
        border: 1px solid rgba(255, 255, 255, 0.5);
        color: #fff;
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(4px);
        transition: transform .55s, background .45s, box-shadow .55s
    }

    .experience-actions .btn-outline-light:hover {
        background: rgba(255, 255, 255, 0.16);
        transform: translateY(-4px);
        box-shadow: 0 26px 60px -20px rgba(0, 0, 0, 0.6)
    }

    .experience-art {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .experience-art svg {
        width: 260px;
        height: 260px;
        opacity: .9
    }

    @media(max-width:980px) {
        .experience-panel {
            grid-template-columns: 1fr;
            gap: 2rem;
            padding: 2.8rem 2rem
        }

        .experience-art {
            order: -1
        }

        .experience-art svg {
            width: 200px;
            height: 200px;
            opacity: .75
        }
    }

    @media(max-width:600px) {
        .experience-panel {
            padding: 2.3rem 1.6rem
        }

        .experience-copy h3 {
            font-size: 1.6rem
        }
    }

    .experience-panel.reveal {
        opacity: 0;
        transform: translateY(28px) scale(.96);
        transition: opacity .8s ease, transform .8s cubic-bezier(.2, .9, .2, 1)
    }

    .experience-panel.reveal.visible {
        opacity: 1;
        transform: none
    }

    /* Dark mode disabled - light mode only */

    /* ================= Inline CTA Sections ================= */
    .cta-section {
        position: relative;
        overflow: hidden
    }

    .cta-panel {
        position: relative;
        background: linear-gradient(135deg, #07323a, #0b8f89);
        color: #fff;
        border-radius: 1.4rem;
        padding: 3rem 2.4rem;
        box-shadow: 0 42px 110px -28px rgba(5, 52, 56, 0.65);
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 2.25rem;
        align-items: center;
        isolation: isolate
    }

    .cta-panel::before,
    .cta-panel::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(70px);
        opacity: .35;
        mix-blend-mode: overlay;
        pointer-events: none
    }

    .cta-panel::before {
        width: 420px;
        height: 420px;
        left: -120px;
        top: -140px;
        background: radial-gradient(circle at 30% 30%, rgba(13, 202, 240, 0.9), rgba(13, 202, 240, 0))
    }

    .cta-panel::after {
        width: 360px;
        height: 360px;
        right: -120px;
        bottom: -140px;
        background: radial-gradient(circle at 70% 70%, rgba(6, 106, 98, 0.9), rgba(6, 106, 98, 0))
    }

    .cta-content h3 {
        margin: 0 0 .65rem;
        font-size: clamp(1.35rem, 2.6vw, 1.85rem);
        font-weight: 700;
        letter-spacing: .5px
    }

    .cta-content p {
        margin: 0 0 1.1rem;
        font-size: .95rem;
        max-width: 660px;
        color: rgba(255, 255, 255, 0.86);
        line-height: 1.5
    }

    .cta-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .85rem
    }

    .cta-actions .btn {
        border-radius: 48px;
        font-weight: 600;
        padding: .9rem 1.6rem;
        position: relative;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        gap: .55rem
    }

    .cta-actions .btn-primary {
        background: #fff;
        color: var(--accent);
        border: none;
        box-shadow: 0 10px 34px -10px rgba(0, 0, 0, 0.55);
        transition: transform .55s cubic-bezier(.2, .9, .2, 1), box-shadow .55s
    }

    .cta-actions .btn-primary:hover {
        transform: translateY(-6px);
        box-shadow: 0 26px 60px -18px rgba(0, 0, 0, 0.65)
    }

    .cta-actions .btn-outline-light {
        border: 1px solid rgba(255, 255, 255, 0.5);
        color: #fff;
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(4px);
        transition: transform .55s, background .45s, box-shadow .55s
    }

    .cta-actions .btn-outline-light:hover {
        background: rgba(255, 255, 255, 0.14);
        transform: translateY(-4px)
    }

    .cta-badge {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        font-size: .6rem;
        font-weight: 700;
        letter-spacing: .7px;
        text-transform: uppercase;
        background: linear-gradient(90deg, #d4efed, #e3f7f5);
        color: var(--accent);
        padding: .4rem .65rem;
        border-radius: .65rem;
        margin: 0 0 1rem;
        box-shadow: 0 4px 14px -4px rgba(11, 143, 137, 0.35)
    }

    .cta-panel.alt {
        background: linear-gradient(135deg, #ffffff, #eef8f7);
        color: #07323a;
        box-shadow: 0 38px 90px -28px rgba(2, 25, 32, 0.25);
        border: 1px solid rgba(11, 143, 137, 0.08)
    }

    .cta-panel.alt .cta-content p {
        color: #355053
    }

    .cta-panel.alt .cta-actions .btn-primary {
        background: var(--accent);
        color: #fff
    }

    .cta-panel.alt .cta-actions .btn-primary:hover {
        box-shadow: 0 30px 70px -18px rgba(2, 25, 32, 0.45)
    }

    .cta-panel.alt .cta-actions .btn-outline-light {
        border: 1px solid rgba(11, 143, 137, 0.35);
        color: var(--accent);
        background: linear-gradient(135deg, #f0fbfa, #e4f6f4)
    }

    .cta-panel.alt .cta-actions .btn-outline-light:hover {
        background: linear-gradient(135deg, #0b8f89, #066a62);
        color: #fff;
        box-shadow: 0 24px 58px -18px rgba(2, 25, 32, 0.45)
    }

    @media(max-width:880px) {
        .cta-panel {
            grid-template-columns: 1fr;
            gap: 1.75rem;
            padding: 2.4rem 1.85rem
        }

        .cta-content h3 {
            font-size: 1.55rem
        }
    }

    .cta-section .reveal {
        opacity: 0;
        transform: translateY(26px) scale(.97);
        transition: opacity .75s ease, transform .75s cubic-bezier(.2, .9, .2, 1)
    }

    .cta-section .reveal.visible {
        opacity: 1;
        transform: none
    }

    /* Dark mode disabled - light mode only */

    /* Mobile navbar collapse panel styling */
    @media(max-width:991.98px) {
        .navbar .collapse {
            transition: opacity .4s ease, transform .45s cubic-bezier(.2, .9, .2, 1);
            transform-origin: top right
        }

        .navbar .collapse:not(.show) {
            opacity: 0;
            transform: scale(.97);
        }

        .navbar .collapse.show {
            opacity: 1;
            transform: scale(1);
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(14px);
            border: 1px solid rgba(0, 0, 0, 0.06);
            border-radius: 20px;
            padding: 1rem 1.1rem;
            box-shadow: 0 18px 60px -20px rgba(0, 0, 0, 0.35);
            position: absolute;
            top: 100%;
            right: 0;
            left: 0;
            margin-top: .65rem;
            z-index: 1000
        }

        .navbar .collapse.show .navbar-nav {
            flex-direction: column;
            align-items: stretch;
            gap: .15rem
        }

        .navbar .collapse.show .nav-link {
            padding: .55rem .85rem;
            border-radius: .7rem;
            font-weight: 600;
            color: #07323a
        }

        .navbar .collapse.show .nav-link.active,
        .navbar .collapse.show .nav-link:focus,
        .navbar .collapse.show .nav-link:hover {
            background: linear-gradient(135deg, #0dcaf0, #0b8f89);
            color: #fff !important;
            box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.35)
        }
    }

    /* Dark mode disabled - light mode only */

    /* Back to Top Floating Button */
    #back-to-top {
        position: fixed;
        right: 18px;
        bottom: 20px;
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: linear-gradient(135deg, #0dcaf0, #0b8f89);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-decoration: none;
        font-size: 1.9rem;
        box-shadow: 0 14px 36px -10px rgba(11, 143, 137, 0.55), 0 4px 14px -4px rgba(0, 0, 0, 0.35);
        z-index: 1200;
        opacity: 0;
        transform: translateY(14px) scale(.9);
        pointer-events: none;
        transition: opacity .5s ease, transform .55s cubic-bezier(.2, .9, .2, 1), box-shadow .5s ease;
        --scroll: 0%;
        isolation: isolate;
    }

    #back-to-top::before {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: inherit;
        background: conic-gradient(#ffffff var(--scroll), rgba(255, 255, 255, 0.12) 0);
        -webkit-mask: radial-gradient(circle at 50% 50%, transparent 62%, #000 63%);
        mask: radial-gradient(circle at 50% 50%, transparent 62%, #000 63%);
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
        opacity: .9;
        pointer-events: none;
        transition: opacity .4s ease;
    }

    #back-to-top.show {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    #back-to-top.lift {
        bottom: 110px;
    }

    #back-to-top:hover {
        box-shadow: 0 22px 52px -16px rgba(11, 143, 137, 0.65), 0 10px 28px -12px rgba(0, 0, 0, 0.4);
        transform: translateY(-4px) scale(1.04);
    }

    #back-to-top:active {
        transform: translateY(0) scale(.96);
    }

    @media (max-width: 640px) {
        #back-to-top {
            width: 44px;
            height: 44px;
            font-size: 1.7rem;
            right: 14px;
            bottom: 16px;
            border-radius: 12px;
        }

        #back-to-top.lift {
            bottom: 96px;
        }
    }

    /* Dark mode disabled - light mode only */