.fade {
  opacity: 0;
  transition: all 3s cubic-bezier(.23,1,.32,1);
  will-change: transform, opacity;
}

/* Directions */

.fade-left {
  transform: translateX(-150px);
}

.fade-right {
  transform: translateX(150px);
}

.fade-top {
  transform: translateY(-150px);
}

.fade-bottom {
  transform: translateY(150px);
}

/* When visible */

.fade.show {
  opacity: 1;
  transform: translate(0,0);
}


.gold-gradient {
            background: linear-gradient(135deg, #C8A44B 0%, #E2C275 50%, #C8A44B 100%);
        }

        .hero-overlay {
            background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 100%);
        }

        .transition-standard {
            transition: all 0.3s ease;
        }

        .nav-link::after {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background: #C8A44B;
            transition: width .3s;
        }

        .nav-link:hover::after {
            width: 100%;
        }

        html,
        body {
            max-width: 100%;
            overflow-x: hidden;
        }

        html {
            scroll-behavior: smooth;
        }

        /* Mobile Drawer Utilities */
        #mobile-drawer {
            transform: translateX(100%);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #mobile-drawer.open {
            transform: translateX(0);
        }

        #drawer-overlay {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        #drawer-overlay.open {
            opacity: 1;
            pointer-events: auto;
        }

        /* Individual & Family section - signature gold layout */
        .real-life-section {
            position: relative;
            background:
                radial-gradient(1100px 520px at -10% -15%, rgba(255, 255, 255, 0.75), transparent 62%),
                radial-gradient(850px 460px at 115% 8%, rgba(165, 121, 39, 0.24), transparent 66%),
                linear-gradient(135deg, #f7eccc 0%, #ebd19a 48%, #f4e3bf 100%);
            color: #18130a;
        }

        .real-life-pattern {
            opacity: 0.3;
            background-image:
                linear-gradient(rgba(42, 31, 10, 0.06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(42, 31, 10, 0.06) 1px, transparent 1px);
            background-size: 48px 48px;
            mask-image: radial-gradient(circle at center, black 35%, transparent 88%);
            -webkit-mask-image: radial-gradient(circle at center, black 35%, transparent 88%);
        }

        .section-lead {
            color: #665b45;
        }

        .audience-chip {
            display: inline-flex;
            align-items: center;
            padding: 0.38rem 0.78rem;
            border-radius: 999px;
            border: 1px solid rgba(82, 59, 17, 0.16);
            background: rgba(255, 255, 255, 0.5);
            color: #3b2d14;
            font-size: 0.78rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            font-weight: 700;
        }

        .solution-card {
            position: relative;
            --base-shift: 0px;
            transform: translateY(var(--base-shift));
            /* border: 1px solid rgba(62, 46, 16, 0.14); */
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 248, 231, 0.78));
            border-radius: 1rem;
            padding: 1.35rem 1.35rem 1.45rem;
            min-height: 15rem;
            box-shadow: 0 14px 28px -24px rgba(45, 31, 7, 0.65);
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
            border-top: 3px solid #caa751;
        }

        .solution-card:nth-child(1) {
            --base-shift: 12px;
        }

        .solution-card:nth-child(2) {
            --base-shift: -4px;
        }

        .solution-card:nth-child(3) {
            --base-shift: 8px;
        }

        .solution-card:nth-child(4) {
            --base-shift: 0px;
        }

        .solution-card:nth-child(5) {
            --base-shift: 10px;
        }
/* 
        .solution-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #c8a44b 0%, rgba(200, 164, 75, 0) 78%);
            border-top-left-radius: 1rem;
            border-top-right-radius: 1rem;
        } */

        .solution-card:hover {
            transform: translateY(calc(var(--base-shift) - 8px));
            box-shadow: 0 22px 34px -26px rgba(39, 25, 3, 0.7);
            border-color: rgba(88, 63, 20, 0.28);
        }

        .solution-index {
            position: absolute;
            top: 0.9rem;
            right: 1rem;
            display: block;
            font-size: 2.7rem;
            line-height: 1;
            font-weight: 800;
            color: rgba(103, 73, 21, 0.14);
            letter-spacing: -0.04em;
            margin-bottom: 0;
        }

        .solution-icon-wrap {
            width: 2.15rem;
            height: 2.15rem;
            border-radius: 999px;
            border: 1px solid rgba(200, 164, 75, 0.5);
            background: rgba(255, 255, 255, 0.78);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.1rem;
        }

        .solution-description {
            color: #6f6451;
        }

        .solution-meta {
            margin-top: 0.8rem;
            font-size: 0.68rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: #6d541f;
            font-weight: 700;
        }

        @media (max-width: 1279px) {
            .solution-card {
                --base-shift: 0px !important;
            }
        }

        @media (max-width: 1024px) {
            .audience-chip {
                font-size: 0.68rem;
            }

            .solution-meta {
                font-size: 0.62rem;
                letter-spacing: 0.16em;
            }
        }

        /* Contact page motion and media styles */
        .contact-glow-orb {
            position: absolute;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(200, 164, 75, 0.35) 0%, rgba(200, 164, 75, 0) 70%);
            filter: blur(1px);
            animation: contactFloat 8s ease-in-out infinite;
            pointer-events: none;
        }

        .contact-glow-orb.delay {
            animation-delay: -3.5s;
        }

        .contact-hero-content {
            animation: contactFadeIn 0.8s ease-out both;
        }

        .contact-info-card {
            transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
        }

        .contact-info-card:hover {
            transform: translateY(-6px);
            border-color: rgba(200, 164, 75, 0.55);
            box-shadow: 0 20px 36px -24px rgba(0, 0, 0, 0.35);
        }

        .contact-image-card {
            border: 1px solid rgba(17, 17, 17, 0.08);
        }

        .contact-image-card img {
            transition: transform 1s ease;
        }

        .contact-image-card:hover img {
            transform: scale(1.06);
        }

        .contact-form-shell input,
        .contact-form-shell select,
        .contact-form-shell textarea {
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }

        .contact-form-shell input:focus,
        .contact-form-shell select:focus,
        .contact-form-shell textarea:focus {
            box-shadow: 0 0 0 3px rgba(200, 164, 75, 0.18);
        }

        .contact-aside-image img {
            transition: transform 1.1s ease;
        }

        .contact-aside-image:hover img {
            transform: scale(1.07);
        }

        .contact-map-wrap {
            border: 1px solid rgba(17, 17, 17, 0.12);
            overflow: hidden;
            box-shadow: 0 22px 42px -28px rgba(0, 0, 0, 0.35);
            background: #fff;
        }

        .contact-map-wrap iframe {
            filter: saturate(0.95) contrast(1.04);
        }

        @keyframes contactFloat {
            0%,
            100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-14px);
            }
        }

        @keyframes contactFadeIn {
            from {
                opacity: 0;
                transform: translateY(18px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .contact-glow-orb,
            .contact-hero-content,
            .contact-info-card,
            .contact-image-card img,
            .contact-aside-image img {
                animation: none !important;
                transition: none !important;
            }
        }