/* ==============================
   HERO SECTION
============================== */

        /* //Hero Wrapper// */
        .hero {
            position: sticky;
            top: 0;
            z-index: 1;
            width: 100%;
            height: 100vh;
            min-height: 600px;
            overflow: hidden;
            background: #030712;
        }

        /* //Image Layers// */
        .hero-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
        }

        .hero-slide {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            opacity: 0;
            will-change: opacity, transform, filter, clip-path;
        }

        .hero-slide.h-s1 {
            background-image: url('../hero-1.jpg');
        }

        .hero-slide.h-s2 {
            background-image: url('../hero-2.jpg');
        }

        .hero-slide.h-s3 {
            background-image: url('../hero-3.jpg');
        }

        /* //Slide Transition Keyframes// */
        /* Slide 1: slow Ken Burns drift right */
        @keyframes hKenBurns {
            from {
                transform: scale(1.08) translateX(-2%);
                opacity: 1;
            }

            to {
                transform: scale(1.00) translateX(0%);
                opacity: 1;
            }
        }

        /* Slide 2: vertical curtain reveal from centre */
        @keyframes hCurtainV {
            from {
                clip-path: inset(0 50% 0 50%);
                opacity: 1;
            }

            to {
                clip-path: inset(0 0% 0 0%);
                opacity: 1;
            }
        }

        /* Slide 3: diagonal wipe top-left → bottom-right */
        @keyframes hDiagWipe {
            from {
                clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
                opacity: 1;
            }

            to {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
                opacity: 1;
            }
        }

        @keyframes hFadeOff {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        /* Subtle breathing breathe on idle slide */
        @keyframes hBreath {

            0%,
            100% {
                transform: scale(1.00);
            }

            50% {
                transform: scale(1.03);
            }
        }

        .hero-slide.active-s1 {
            opacity: 1;
            animation: hKenBurns 7s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        }

        .hero-slide.active-s2 {
            opacity: 1;
            animation: hCurtainV 1.1s cubic-bezier(0.77, 0, 0.175, 1) forwards,
                hBreath 9s ease-in-out 1.2s infinite;
        }

        .hero-slide.active-s3 {
            opacity: 1;
            animation: hDiagWipe 1.2s cubic-bezier(0.86, 0, 0.07, 1) forwards,
                hBreath 10s ease-in-out 1.3s infinite;
        }

        .hero-slide.leaving-slide {
            animation: hFadeOff 0.9s ease forwards !important;
        }

        /* //Overlay System// */
        /* Deep vignette – always present */
        .hero-vignette {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            background:
                /* bottom fade – very heavy so text readable */
                linear-gradient(to top,
                    rgba(3, 7, 18, 0.96) 0%,
                    rgba(3, 7, 18, 0.70) 22%,
                    rgba(3, 7, 18, 0.22) 52%,
                    transparent 72%),
                /* left edge for nav readability */
                linear-gradient(to right,
                    rgba(3, 7, 18, 0.82) 0%,
                    rgba(3, 7, 18, 0.38) 18%,
                    transparent 40%),
                /* top fade for logo zone */
                linear-gradient(to bottom,
                    rgba(3, 7, 18, 0.72) 0%,
                    rgba(3, 7, 18, 0.20) 14%,
                    transparent 30%);
        }

        /* //Light Streak// */
        /* An amber horizontal light beam that drifts — echoes studio lighting on timber */
        .hero-streak {
            position: absolute;
            inset: 0;
            z-index: 3;
            pointer-events: none;
            overflow: hidden;
        }

        .hero-streak::after {
            content: '';
            position: absolute;
            top: 38%;
            left: -60%;
            width: 55%;
            height: 1px;
            background: linear-gradient(90deg,
                    transparent 0%,
                    rgba(212, 175, 55, 0.0) 10%,
                    rgba(212, 175, 55, 0.28) 40%,
                    rgba(240, 214, 104, 0.52) 50%,
                    rgba(212, 175, 55, 0.28) 60%,
                    rgba(212, 175, 55, 0.0) 90%,
                    transparent 100%);
            filter: blur(0.5px);
            animation: streakDrift 9s ease-in-out infinite;
        }

        @keyframes streakDrift {
            0% {
                top: 32%;
                left: -60%;
                opacity: 0;
            }

            15% {
                opacity: 1;
            }

            50% {
                top: 40%;
                left: 110%;
                opacity: 1;
            }

            65% {
                opacity: 0;
            }

            100% {
                top: 32%;
                left: -60%;
                opacity: 0;
            }
        }

        /* //Grain Canvas// */
        .hero-grain {
            position: absolute;
            inset: 0;
            z-index: 4;
            pointer-events: none;
            opacity: 0.038;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-size: 256px 256px;
        }

        /* //Floating Dust Particles// */
        .hero-dust {
            position: absolute;
            inset: 0;
            z-index: 5;
            pointer-events: none;
            overflow: hidden;
        }

        .dust-p {
            position: absolute;
            border-radius: 50%;
            background: rgba(212, 175, 55, 0.55);
            animation: dustFloat linear infinite;
        }

        @keyframes dustFloat {
            0% {
                transform: translateY(100vh) translateX(0px);
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            90% {
                opacity: 0.6;
            }

            100% {
                transform: translateY(-12vh) translateX(var(--drift, 18px));
                opacity: 0;
            }
        }

        /* //Logo Zone// */
        .hero-logo-wrap {
            position: absolute;
            top: 36px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            animation: logoEntry 1.4s cubic-bezier(0.34, 1.36, 0.64, 1) 0.2s both;
            background: radial-gradient(circle, rgba(3, 7, 18, 0.6) 0%, rgba(3, 7, 18, 0.3) 50%, transparent 80%);
            padding: 10px 30px;
            border-radius: 50% / 30%;
        }

        @keyframes logoEntry {
            from {
                opacity: 0;
                transform: translateX(-50%) translateY(-24px) scale(0.88);
            }

            to {
                opacity: 1;
                transform: translateX(-50%) translateY(0) scale(1);
            }
        }

        .hero-logo-wrap a {
            display: block;
        }
        .hero-logo {
            height: clamp(120px, 15vw, 180px);
            width: auto;
            object-fit: contain;
            display: block;
            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9)) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6));
        }

        /* thin gold rule under logo */
        .hero-logo-rule {
            width: 1px;
            height: 28px;
            background: linear-gradient(to bottom, rgba(212, 175, 55, 0.72), transparent);
            margin: 0 auto;
        }

        /* //Vertical Nav// */
        .hero-nav {
            position: absolute;
            left: 46px;
            top: 0;
            z-index: 10;
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        /* Each nav link is positioned absolutely from top of hero */
        .h-nav-item {
            position: absolute;
            left: 0;
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            cursor: pointer;
            animation: navSlideIn 0.8s cubic-bezier(0.34, 1.28, 0.64, 1) both;
        }

        /* tick mark */
        .h-nav-item::before {
            content: '';
            display: block;
            width: 18px;
            height: 1px;
            background: rgba(212, 175, 55, 0.50);
            flex-shrink: 0;
            transition: width 0.36s ease, background 0.36s ease;
        }

        .h-nav-item:hover::before {
            width: 30px;
            background: #D4AF37;
        }

        .h-nav-item span {
            font-family: 'Jost', sans-serif;
            font-size: 13px;
            font-weight: 400;
            letter-spacing: 0.26em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.52);
            transition: color 0.32s ease, letter-spacing 0.36s ease;
            white-space: nowrap;
        }

        .h-nav-item:hover span {
            color: rgba(212, 175, 55, 0.95);
            letter-spacing: 0.38em;
        }

        @keyframes navSlideIn {
            from {
                opacity: 0;
                transform: translateX(-28px);
            }

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

        /* Staggered tops & animation delays */
        .h-nav-item:nth-child(1) {
            top: 110px;
            animation-delay: 0.55s;
        }

        .h-nav-item:nth-child(2) {
            top: 162px;
            animation-delay: 0.68s;
        }

        .h-nav-item:nth-child(3) {
            top: 214px;
            animation-delay: 0.81s;
        }

        .h-nav-item:nth-child(4) {
            top: 266px;
            animation-delay: 0.94s;
        }

        .h-nav-item:nth-child(5) {
            top: 318px;
            animation-delay: 1.07s;
        }

        .hero-social-rail {
            position: absolute;
            top: 50%;
            right: 0;
            z-index: 11;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 18px;
            transform: translateY(-50%);
            animation: socialRailEntry 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.95s both;
        }

        @keyframes socialRailEntry {
            from {
                opacity: 0;
                transform: translate(18px, -50%);
            }

            to {
                opacity: 1;
                transform: translate(0, -50%);
            }
        }

        .hero-social-tab {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 58px;
            width: 24px;
            color: #ffffff;
            text-decoration: none;
            clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
            border-radius: 0;
            background: linear-gradient(180deg, rgba(116, 122, 130, 0.78), rgba(90, 96, 104, 0.88));
            box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
            opacity: 0.76;
            filter: saturate(0.48) brightness(0.84);
            transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.28s ease,
                box-shadow 0.34s ease,
                filter 0.34s ease;
            overflow: visible;
        }

        .hero-social-tab::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--social-hover);
            opacity: 0;
            transition: opacity 0.34s ease;
            z-index: 0;
        }

        .hero-social-tab::after {
            content: '';
            position: absolute;
            inset: 1px 0 1px 1px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 54%);
            pointer-events: none;
            opacity: 0.2;
            z-index: 1;
        }

        .hero-social-tab:hover,
        .hero-social-tab:focus-visible {
            transform: translateX(-4px);
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
            opacity: 1;
            filter: saturate(1) brightness(1.03);
        }

        .hero-social-tab:hover::before,
        .hero-social-tab:focus-visible::before {
            opacity: 1;
        }

        .hero-social-tab:focus-visible {
            outline: 2px solid rgba(255, 255, 255, 0.82);
            outline-offset: 4px;
        }

        .hero-social-tab svg {
            width: 13px;
            height: 13px;
            fill: currentColor;
            position: relative;
            z-index: 2;
        }

        .hero-social-tab.is-facebook {
            --social-hover: #1877F2;
        }

        .hero-social-tab.is-facebook svg {
            width: 12px;
            height: 12px;
        }

        .hero-social-tab.is-instagram {
            --social-hover: linear-gradient(135deg,
                    #F58529 0%,
                    #FEDA77 20%,
                    #DD2A7B 52%,
                    #8134AF 76%,
                    #515BD4 100%);
        }

        .hero-social-tab.is-instagram svg {
            width: 11px;
            height: 11px;
        }

        .hero-social-tab.is-linkedin {
            --social-hover: #0A66C2;
        }

        .hero-social-tab.is-linkedin svg {
            width: 10.5px;
            height: 10.5px;
        }

        .hero-mobile-toggle,
        .hero-mobile-nav {
            display: none;
        }

        body.mobile-nav-open {
            overflow: hidden;
        }

        .hero-mobile-toggle {
            position: fixed;
            top: 34px;
            left: 24px;
            z-index: 10001;
            width: 36px;
            height: 28px;
            padding: 0;
            border: 0;
            background: transparent;
            cursor: pointer;
            color: var(--white);
            opacity: 0.84;
            -webkit-tap-highlight-color: transparent;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .hero-mobile-toggle:hover {
            opacity: 1;
            transform: translateY(-1px);
        }

        .hero-mobile-toggle:focus-visible,
        .hero-mobile-link:focus-visible,
        .hero-mobile-nav-backdrop:focus-visible {
            outline: 2px solid rgba(255, 255, 255, 0.74);
            outline-offset: 4px;
        }

        .hero-mobile-toggle-core {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
        }

        .hero-mobile-toggle-core::before {
            content: '';
            position: absolute;
            left: 0;
            top: 2px;
            bottom: 2px;
            width: 1px;
            background: rgba(255, 255, 255, 0.24);
            opacity: 0;
            transform: scaleY(0.35);
            transform-origin: top center;
            transition: opacity 0.24s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .hero-mobile-line {
            position: absolute;
            left: 8px;
            height: 1px;
            background: rgba(255, 255, 255, 0.9);
            transform-origin: left center;
            transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.34s ease,
                opacity 0.22s ease;
        }

        .hero-mobile-line-top {
            top: 3px;
            width: 28px;
        }

        .hero-mobile-line-mid {
            top: 13px;
            width: 16px;
        }

        .hero-mobile-line-bot {
            top: 23px;
            width: 22px;
        }

        .hero-mobile-toggle[aria-expanded="true"] .hero-mobile-toggle-core::before {
            opacity: 1;
            transform: scaleY(1);
        }

        .hero-mobile-toggle[aria-expanded="true"] .hero-mobile-line-top {
            width: 28px;
            transform: translateY(10px) rotate(38deg);
        }

        .hero-mobile-toggle[aria-expanded="true"] .hero-mobile-line-mid {
            opacity: 0;
            transform: translateX(-8px);
        }

        .hero-mobile-toggle[aria-expanded="true"] .hero-mobile-line-bot {
            width: 28px;
            transform: translateY(-10px) rotate(-38deg);
        }

        .hero-mobile-nav[hidden] {
            display: none !important;
        }

        .hero-mobile-nav {
            position: fixed;
            inset: 0;
            z-index: 10000;
            pointer-events: none;
        }

        .hero-mobile-nav-backdrop {
            position: absolute;
            inset: 0;
            border: 0;
            background: linear-gradient(90deg,
                    rgba(3, 7, 18, 0.88) 0%,
                    rgba(3, 7, 18, 0.62) 28%,
                    rgba(3, 7, 18, 0.18) 54%,
                    rgba(3, 7, 18, 0) 76%);
            opacity: 0;
            cursor: pointer;
            transition: opacity 0.28s ease;
        }

        .hero-mobile-nav-panel {
            position: fixed;
            top: 96px;
            left: 24px;
            display: flex;
            flex-direction: column;
            gap: 18px;
            padding-left: 18px;
            max-width: calc(100vw - 48px);
            transform: translateX(-18px);
            opacity: 0;
            transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
        }

        .hero-mobile-nav-panel::before {
            content: '';
            position: absolute;
            left: 0;
            top: 2px;
            bottom: 2px;
            width: 1px;
            background: linear-gradient(to bottom,
                    rgba(212, 175, 55, 0.72) 0%,
                    rgba(212, 175, 55, 0.24) 62%,
                    transparent 100%);
        }

        .hero-mobile-nav.is-open {
            pointer-events: auto;
        }

        .hero-mobile-nav.is-open .hero-mobile-nav-backdrop {
            opacity: 1;
        }

        .hero-mobile-nav.is-open .hero-mobile-nav-panel {
            transform: translateX(0);
            opacity: 1;
        }

        .hero-mobile-nav-links {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .hero-mobile-link {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            width: fit-content;
            text-decoration: none;
            opacity: 0;
            transform: translateX(-10px);
            transition: opacity 0.22s ease,
                transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.32s ease;
        }

        .hero-mobile-link::before {
            content: '';
            display: block;
            width: 18px;
            height: 1px;
            background: rgba(212, 175, 55, 0.50);
            flex-shrink: 0;
            transition: width 0.36s ease, background 0.36s ease;
        }

        .hero-mobile-link span {
            font-family: 'Jost', sans-serif;
            font-size: 13px;
            font-weight: 400;
            letter-spacing: 0.26em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.52);
            white-space: nowrap;
            transition: color 0.32s ease, letter-spacing 0.36s ease;
        }

        .hero-mobile-nav.is-open .hero-mobile-link {
            opacity: 1;
            transform: translateX(0);
        }

        .hero-mobile-nav.is-open .hero-mobile-link:nth-child(1) {
            transition-delay: 0.03s;
        }

        .hero-mobile-nav.is-open .hero-mobile-link:nth-child(2) {
            transition-delay: 0.08s;
        }

        .hero-mobile-nav.is-open .hero-mobile-link:nth-child(3) {
            transition-delay: 0.13s;
        }

        .hero-mobile-nav.is-open .hero-mobile-link:nth-child(4) {
            transition-delay: 0.18s;
        }

        .hero-mobile-nav.is-open .hero-mobile-link:nth-child(5) {
            transition-delay: 0.23s;
        }

        .hero-mobile-link:hover::before,
        .hero-mobile-link:focus-visible::before {
            width: 30px;
            background: #D4AF37;
        }

        .hero-mobile-link:hover span,
        .hero-mobile-link:focus-visible span {
            color: rgba(212, 175, 55, 0.95);
            letter-spacing: 0.38em;
        }

        /* //Slide Counter (bottom left)// */
        .hero-counter {
            position: absolute;
            bottom: 48px;
            left: 46px;
            z-index: 10;
            display: flex;
            align-items: center;
            gap: 12px;
            animation: fadeUpIn 1s ease 1.6s both;
        }

        .h-counter-current {
            font-family: 'Cormorant Garamond', serif;
            font-size: 2.8rem;
            font-weight: 300;
            color: rgba(212, 175, 55, 0.80);
            line-height: 1;
            letter-spacing: -0.02em;
            transition: opacity 0.5s ease;
        }

        .h-counter-sep {
            display: flex;
            flex-direction: column;
            gap: 5px;
            align-items: center;
        }

        .h-csep-line {
            width: 1px;
            height: 32px;
            background: rgba(212, 175, 55, 0.30);
        }

        .h-counter-total {
            font-family: 'Jost', sans-serif;
            font-size: 9px;
            font-weight: 300;
            letter-spacing: 0.28em;
            color: rgba(255, 255, 255, 0.32);
        }

        /* //Progress Rail// */
        .hero-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            z-index: 10;
            background: rgba(255, 255, 255, 0.06);
        }

        .hero-progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, rgba(212, 175, 55, 0.18) 0%, #D4AF37 60%, #F0D668 100%);
            transition: width 0.2s linear;
            box-shadow: 0 0 8px rgba(212, 175, 55, 0.50);
        }

        /* //Slide Dots// */
        .hero-dots {
            position: absolute;
            bottom: 52px;
            right: 52px;
            z-index: 10;
            display: flex;
            gap: 6px;
            align-items: center;
            animation: fadeUpIn 1s ease 1.8s both;
        }

        .h-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.22);
            cursor: pointer;
            transition: all 0.44s cubic-bezier(0.34, 1.28, 0.64, 1);
        }

        .h-dot.active {
            width: 22px;
            border-radius: 3px;
            background: #D4AF37;
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.55);
        }

        /* //Scroll prompt// */
        .hero-scroll {
            position: absolute;
            bottom: 48px;
            right: 52px;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            animation: fadeUpIn 1s ease 2.0s both;
        }

        /* hide when dots are visible, we'll position scroll to far right with margin when both shown */

        .hero-scroll-label {
            font-family: 'Jost', sans-serif;
            font-size: 8.5px;
            font-weight: 400;
            letter-spacing: 0.32em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.28);
            writing-mode: vertical-rl;
            transform: rotate(180deg);
        }

        .hero-scroll-line {
            width: 1px;
            height: 40px;
            background: linear-gradient(to bottom, rgba(212, 175, 55, 0.40), transparent);
            animation: scrollPulse 2.2s ease-in-out infinite;
        }

        @keyframes scrollPulse {

            0%,
            100% {
                transform: scaleY(1);
                opacity: 0.8;
            }

            50% {
                transform: scaleY(0.4);
                opacity: 0.3;
            }
        }

        /* //Title Area// */
        .hero-copy {
            position: absolute;
            bottom: 120px;
            left: 120px;
            right: 340px;
            z-index: 10;
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        /* Eyebrow micro-label */
        .h-eyebrow {
            display: flex;
            align-items: center;
            gap: 12px;
            font-family: 'Jost', sans-serif;
            font-size: 9px;
            font-weight: 500;
            letter-spacing: 0.44em;
            text-transform: uppercase;
            color: var(--cyan);
            opacity: 0;
            transform: translateY(12px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .h-eyebrow::before {
            content: '';
            display: block;
            width: 22px;
            height: 1px;
            background: var(--cyan);
        }

        .hero-copy.vis .h-eyebrow {
            opacity: 1;
            transform: translateY(0);
        }

        /* Two-tier heading: small rider + giant word */
        .h-title {
            display: flex;
            flex-direction: column;
            gap: 0;
            line-height: 1;
        }

        .h-title-rider {
            font-family: 'Jost', sans-serif;
            font-weight: 200;
            font-size: clamp(0.75rem, 1.0vw, 1.05rem);
            letter-spacing: 0.52em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.55);
            padding-left: 0.12em;
            opacity: 0;
            transform: translateX(-18px);
            transition: opacity 0.55s ease 0.15s, transform 0.55s ease 0.15s;
        }

        .hero-copy.vis .h-title-rider {
            opacity: 1;
            transform: translateX(0);
        }

        .h-title-main {
            font-family: 'Cormorant Garamond', serif;
            font-weight: 600;
            font-size: clamp(4.5rem, 8.5vw, 11rem);
            letter-spacing: -0.03em;
            line-height: 0.88;
            background: linear-gradient(148deg,
                    #ffffff 0%,
                    #f5f5f0 20%,
                    #eed99a 48%,
                    #D4AF37 72%,
                    #9a7218 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            opacity: 0;
            transform: translateY(32px);
            transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.28s,
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.28s;
        }

        .hero-copy.vis .h-title-main {
            opacity: 1;
            transform: translateY(0);
        }

        /* Sub-word sits below in muted italic */
        .h-title-sub {
            font-family: 'Cormorant Garamond', serif;
            font-style: italic;
            font-weight: 300;
            font-size: clamp(1.1rem, 1.8vw, 2.0rem);
            letter-spacing: 0.05em;
            color: rgba(255, 255, 255, 0.42);
            padding-left: 0.08em;
            opacity: 0;
            transform: translateY(16px);
            transition: opacity 0.65s ease 0.5s, transform 0.65s ease 0.5s;
        }

        .hero-copy.vis .h-title-sub {
            opacity: 1;
            transform: translateY(0);
        }

        /* Description line */
        .h-desc {
            font-family: 'Jost', sans-serif;
            font-size: 0.82rem;
            font-weight: 300;
            line-height: 1.78;
            color: rgba(255, 255, 255, 0.48);
            max-width: 420px;
            opacity: 0;
            transform: translateY(16px);
            transition: opacity 0.70s ease 0.65s, transform 0.70s ease 0.65s;
        }

        .hero-copy.vis .h-desc {
            opacity: 1;
            transform: translateY(0);
        }

        @keyframes fadeUpIn {
            from {
                opacity: 0;
                transform: translateY(18px);
            }

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

        /* //Scroll-to-services arrow at very bottom-center// */
        .hero-down-arrow {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            animation: fadeUpIn 1s ease 2.2s both;
            cursor: pointer;
            opacity: 0.38;
            transition: opacity 0.3s ease;
        }

        .hero-down-arrow:hover {
            opacity: 0.75;
        }

        .hero-down-arrow svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: rgba(212, 175, 55, 0.70);
            stroke-width: 1.2;
            animation: arrowBob 2s ease-in-out infinite;
        }

        @keyframes arrowBob {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(6px);
            }
        }

        /* ==============================
   HERO RESPONSIVE
============================== */

        @media (max-width: 1140px) {
            .hero-copy {
                left: 60px;
                right: 60px;
                bottom: 120px;
            }

            .hero-nav {
                left: 20px;
            }

            .hero-social-rail {
                transform: translateY(-50%) scale(0.92);
                transform-origin: right center;
            }
        }

        @media (max-width: 700px) {
            .hero-copy {
                left: 24px;
                right: 24px;
                bottom: 100px;
            }

            .h-title-main {
                font-size: clamp(3.5rem, 16vw, 4.8rem);
            }

            .hero-nav {
                display: none;
            }

            .hero-dots {
                bottom: 30px;
                right: 24px;
            }

            .hero-scroll {
                display: none;
            }

            .hero-counter {
                left: 24px;
                bottom: 30px;
            }

            .hero-social-rail {
                top: 47%;
                gap: 12px;
                transform: translateY(-50%);
                animation: socialRailEntry 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both;
            }

            .hero-social-tab {
                height: 46px;
                width: 20px;
                clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
                opacity: 0.8;
                filter: saturate(0.78) brightness(0.86);
            }

            .hero-social-tab svg {
                width: 11px;
                height: 11px;
            }

            .hero-social-tab.is-facebook svg {
                width: 10px;
                height: 10px;
            }

            .hero-social-tab.is-instagram svg {
                width: 9px;
                height: 9px;
            }

            .hero-social-tab.is-linkedin svg {
                width: 8.5px;
                height: 8.5px;
            }

            .hero-mobile-toggle {
                display: inline-flex;
            }

            .hero-mobile-nav {
                display: block;
            }
        }

        /* ==============================
   SERVICES SECTION
============================== */

        /* //Static Wordmark (right, fixed, slide-agnostic)// */
        .svc-wordmark {
            position: absolute;
            right: 60px;
            bottom: 120px;
            z-index: 10;
            display: flex;
            align-items: flex-end;
            animation: logoEntry 1.6s cubic-bezier(0.34, 1.36, 0.64, 1) 0.5s both;
        }

        .svc-wordmark img {
            height: clamp(80px, 13vh, 150px);
            width: auto;
            object-fit: contain;
            display: block;
            opacity: 0.82;
        }

        /* //Section// */
        .svc {
            position: relative;
            z-index: 10;
            background: var(--navy);
            min-height: 100vh;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        /* Smooth transition to the Portfolio section below */
        .svc::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 150px;
            background: linear-gradient(to top, #060d16 0%, transparent 100%);
            z-index: 3;
            pointer-events: none;
        }

        /* //Background Stack// */
        .bg-stack {
            position: absolute;
            inset: 0;
            z-index: 0;
        }

        .bg-slide {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
        }

        /* //Default BG// */
        .bg-default {
            background-image: url('../service.jpg');
            opacity: 1;
            z-index: 1;
            transition: opacity 1.0s ease;
        }

        .bg-default.dimmed {
            opacity: 0.15;
        }

        /* //Service BGs// */
        .bg-kitchens {
            background-image: url('../kitchens.jpg');
            z-index: 2;
            opacity: 0;
        }

        .bg-cabinetry {
            background-image: url('../cabinetry.jpg');
            z-index: 2;
            opacity: 0;
        }

        .bg-offices {
            background-image: url('../offices.jpg');
            z-index: 2;
            opacity: 0;
        }

        .bg-furniture {
            background-image: url('../furniture.jpg');
            z-index: 2;
            opacity: 0;
        }

        .bg-bathrooms {
            background-image: url('../bathrooms.jpg');
            z-index: 2;
            opacity: 0;
        }

        .bg-interiors {
            background-image: url('../interiors.jpg');
            z-index: 2;
            opacity: 0;
        }

        /* //BG Transition Keyframes// */
        @keyframes kfWipeRight {
            from {
                clip-path: inset(0 100% 0 0);
                opacity: 1;
            }

            to {
                clip-path: inset(0 0% 0 0);
                opacity: 1;
            }
        }

        @keyframes kfZoomUnblur {
            from {
                transform: scale(1.20);
                filter: blur(18px) brightness(0.50);
                opacity: 0;
            }

            to {
                transform: scale(1);
                filter: blur(0) brightness(1);
                opacity: 1;
            }
        }

        @keyframes kfSlideLeft {
            from {
                transform: translateX(-110px);
                opacity: 0;
            }

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

        @keyframes kfSlideRight {
            from {
                transform: translateX(110px);
                opacity: 0;
            }

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

        @keyframes kfIris {
            from {
                clip-path: circle(0% at 50% 50%);
                opacity: 1;
            }

            to {
                clip-path: circle(150% at 50% 50%);
                opacity: 1;
            }
        }

        @keyframes kfCurtain {
            from {
                clip-path: inset(50% 0 50% 0);
                opacity: 1;
            }

            to {
                clip-path: inset(0 0 0 0);
                opacity: 1;
            }
        }

        @keyframes kfFadeOut {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        /* //Per-Service Transitions// */
        .bg-kitchens.entering {
            animation: kfWipeRight 0.95s cubic-bezier(0.77, 0, 0.175, 1) forwards;
        }

        .bg-cabinetry.entering {
            animation: kfZoomUnblur 0.92s ease-out forwards;
        }

        .bg-offices.entering {
            animation: kfSlideLeft 0.82s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }

        .bg-furniture.entering {
            animation: kfSlideRight 0.82s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }

        .bg-bathrooms.entering {
            animation: kfIris 0.92s cubic-bezier(0.34, 1.10, 0.64, 1) forwards;
        }

        .bg-interiors.entering {
            animation: kfCurtain 0.92s cubic-bezier(0.77, 0, 0.175, 1) forwards;
        }

        .bg-slide.leaving {
            animation: kfFadeOut 0.72s ease forwards;
        }

        /* //Gradient Overlay// */
        .svc-overlay {
            position: absolute;
            inset: 0;
            z-index: 3;
            pointer-events: none;
            background: linear-gradient(108deg,
                    rgba(3, 7, 24, 0.96) 0%,
                    rgba(3, 7, 24, 0.84) 30%,
                    rgba(3, 7, 24, 0.55) 60%,
                    rgba(3, 7, 24, 0.26) 100%);
        }

        /* //Content Grid// */
        .svc-content {
            position: relative;
            z-index: 4;
            width: 100%;
            max-width: 1500px;
            margin: 0 auto;
            padding: 100px 70px;
            min-height: 100vh;
            display: grid;
            grid-template-columns: 44fr 56fr;
            gap: 20px;
            align-items: center;
        }

        /* ==============================
   LEFT PANEL
============================== */

        /* //Left Panel// */
        .svc-left {
            display: flex;
            flex-direction: column;
            gap: 30px;
            max-width: 500px;
        }

        /* //Eyebrow// */
        .eyebrow {
            display: flex;
            align-items: center;
            gap: 14px;
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.42em;
            text-transform: uppercase;
            color: var(--cyan);
        }

        .eyebrow::before {
            content: '';
            width: 28px;
            height: 1px;
            background: var(--cyan);
            flex-shrink: 0;
            display: block;
        }

        /* //Section Title// */
        .section-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(3.4rem, 4.8vw, 6rem);
            font-weight: 600;
            line-height: 0.90;
            letter-spacing: -0.028em;
            background: linear-gradient(148deg,
                    #ffffff 0%,
                    #f9f9f9 28%,
                    #eed99a 56%,
                    #D4AF37 78%,
                    #a88020 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* //Description Panel// */
        .desc-panel {
            display: flex;
            flex-direction: column;
            gap: 13px;
            min-height: 148px;
        }

        /* //Rule// */
        .desc-rule {
            width: 0;
            height: 1px;
            background: linear-gradient(90deg, var(--gold) 0%, rgba(212, 175, 55, 0.14) 80%, transparent 100%);
            transition: width 0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .desc-panel.vis .desc-rule {
            width: 150px;
        }

        /* //Service Index// */
        .desc-index {
            font-size: 9px;
            font-weight: 600;
            letter-spacing: 0.36em;
            text-transform: uppercase;
            color: var(--gold);
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.44s ease 0.18s, transform 0.44s ease 0.18s;
        }

        .desc-panel.vis .desc-index {
            opacity: 1;
            transform: translateY(0);
        }

        /* //Service Name// */
        .desc-name {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(1.7rem, 2.8vw, 2.5rem);
            font-weight: 600;
            letter-spacing: 0.01em;
            color: var(--white);
            opacity: 0;
            transform: translateY(16px);
            transition: opacity 0.55s ease 0.30s, transform 0.55s ease 0.30s;
        }

        .desc-panel.vis .desc-name {
            opacity: 1;
            transform: translateY(0);
        }

        /* //Description Body// */
        .desc-body {
            font-size: 0.87rem;
            font-weight: 300;
            line-height: 1.82;
            color: var(--dim);
            max-width: 370px;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.70s ease 0.52s, transform 0.70s ease 0.52s;
        }

        .desc-panel.vis .desc-body {
            opacity: 1;
            transform: translateY(0);
        }

        /* ==============================
   HONEYCOMB
============================== */

        /* //Right Panel// */
        .svc-right {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 40px;
        }

        .svc-full-link {
            margin-top: 36px;
        }

        /* //Honeycomb Container// */
        .honeycomb {
            position: relative;
            width: 558px;
            height: 534px;
            flex-shrink: 0;
        }

        /* //Hex Unit// */
        .hex-unit {
            position: absolute;
            width: var(--hex-w);
            height: var(--hex-h);
            cursor: pointer;
            z-index: 1;
            transition:
                transform 0.52s cubic-bezier(0.34, 1.28, 0.64, 1),
                opacity 0.38s ease,
                filter 0.38s ease;
            will-change: transform, opacity, filter;
        }

        .hex-unit:hover {
            z-index: 10;
        }

        /* //Ambient Glow Halo// */
        .hex-unit::before {
            content: '';
            position: absolute;
            inset: -14px;
            border-radius: 50%;
            background: transparent;
            filter: blur(24px);
            transition: background 0.52s ease;
            z-index: 0;
            pointer-events: none;
        }

        .hex-unit:not(.center-tile):hover::before {
            background: rgba(212, 175, 55, 0.26);
        }

        /* //Spotlight: dim siblings on hover// */
        .honeycomb:has(.hex-unit:not(.center-tile):hover) .hex-unit:not(:hover) {
            opacity: 0.46;
            filter: brightness(0.62);
        }

        /* //Hex Positions// */
        .h1 {
            left: 93px;
            top: 0px;
        }

        .h2 {
            left: 279px;
            top: 0px;
        }

        .h3 {
            left: 0px;
            top: 160px;
        }

        .h4 {
            left: 186px;
            top: 160px;
            cursor: default;
        }

        .h5 {
            left: 372px;
            top: 160px;
        }

        .h6 {
            left: 93px;
            top: 320px;
        }

        .h7 {
            left: 279px;
            top: 320px;
        }

        /* //Directional Detachment// */
        .h1:hover {
            transform: translate(-11px, -15px) scale(1.09);
        }

        .h2:hover {
            transform: translate(11px, -15px) scale(1.09);
        }

        .h3:hover {
            transform: translate(-18px, 0px) scale(1.09);
        }

        .h5:hover {
            transform: translate(18px, 0px) scale(1.09);
        }

        .h6:hover {
            transform: translate(-11px, 15px) scale(1.09);
        }

        .h7:hover {
            transform: translate(11px, 15px) scale(1.09);
        }

        .h4:hover {
            transform: scale(1.05);
        }

        /* //Hex Shell (Gold Border Ring)// */
        .hex-shell {
            position: absolute;
            inset: 0;
            z-index: 1;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            background: var(--gold);
            transition: background 0.48s ease, filter 0.48s ease;
        }

        .hex-unit:not(.center-tile):hover .hex-shell {
            background: linear-gradient(148deg, #F6E070, #D4AF37, #A07A1A);
            filter: brightness(1.14);
        }

        .center-tile .hex-shell {
            background: linear-gradient(148deg, #8C6010, #D4AF37, #F6E070, #D4AF37, #7A520C);
        }

        /* //Hex Inner Face// */
        .hex-inner {
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 6px;
            z-index: 2;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            background: var(--tile-bg);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 20px 16px 16px;
            text-align: center;
            transition: background 0.48s ease;
        }

        .hex-unit:not(.center-tile):hover .hex-inner {
            background: rgba(3, 8, 25, 0.94);
        }

        /* //Icon// */
        .hex-inner svg {
            width: 33px;
            height: 33px;
            fill: var(--cyan);
            opacity: 0.88;
            flex-shrink: 0;
            transition:
                fill 0.42s ease,
                transform 0.50s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.42s ease;
        }

        .hex-unit:hover .hex-inner svg {
            fill: var(--gold-lt);
            opacity: 1;
            transform: scale(1.20) translateY(-3px);
        }

        /* //Label// */
        .hex-inner p {
            font-size: 9.5px;
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.80);
            line-height: 1.40;
            transition: color 0.42s ease, letter-spacing 0.48s ease;
        }

        .hex-unit:not(.center-tile):hover .hex-inner p {
            color: var(--gold-lt);
            letter-spacing: 0.24em;
        }

        /* //Center Logo// */
        .center-tile .hex-inner {
            background: rgba(3, 7, 22, 0.94);
            padding: 15px;
        }

        .center-tile .hex-inner a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }
        .center-logo {
            width: 88%;
            max-width: 145px;
            height: auto;
            object-fit: contain;
            filter: brightness(1.08) drop-shadow(0 0 10px rgba(212, 175, 55, 0.32));
            transition: filter 0.48s ease;
        }

        .center-tile:hover .center-logo {
            filter: brightness(1.16) drop-shadow(0 0 18px rgba(212, 175, 55, 0.58));
        }

        /* ==============================
   HEX ENTRY ANIMATIONS
============================== */

        @keyframes entryTL {
            from {
                opacity: 0;
                transform: translate(-80px, -80px) scale(0.58);
            }

            to {
                opacity: 1;
                transform: translate(0, 0) scale(1);
            }
        }

        @keyframes entryTR {
            from {
                opacity: 0;
                transform: translate(80px, -80px) scale(0.58);
            }

            to {
                opacity: 1;
                transform: translate(0, 0) scale(1);
            }
        }

        @keyframes entryL {
            from {
                opacity: 0;
                transform: translateX(-96px) scale(0.58);
            }

            to {
                opacity: 1;
                transform: translateX(0) scale(1);
            }
        }

        @keyframes entryPop {
            0% {
                opacity: 0;
                transform: scale(0.22) rotate(-20deg);
            }

            62% {
                opacity: 1;
                transform: scale(1.12) rotate(3deg);
            }

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

        @keyframes entryR {
            from {
                opacity: 0;
                transform: translateX(96px) scale(0.58);
            }

            to {
                opacity: 1;
                transform: translateX(0) scale(1);
            }
        }

        @keyframes entryBL {
            from {
                opacity: 0;
                transform: translate(-80px, 80px) scale(0.58);
            }

            to {
                opacity: 1;
                transform: translate(0, 0) scale(1);
            }
        }

        @keyframes entryBR {
            from {
                opacity: 0;
                transform: translate(80px, 80px) scale(0.58);
            }

            to {
                opacity: 1;
                transform: translate(0, 0) scale(1);
            }
        }

        @keyframes centerGlow {

            0%,
            100% {
                filter: drop-shadow(0 0 7px rgba(212, 175, 55, 0.25));
            }

            50% {
                filter: drop-shadow(0 0 24px rgba(212, 175, 55, 0.60));
            }
        }

        /* //Entry Sequence// */
        .h1 {
            animation: entryTL 0.82s cubic-bezier(0.34, 1.56, 0.64, 1) 0.10s both;
        }

        .h2 {
            animation: entryTR 0.82s cubic-bezier(0.34, 1.56, 0.64, 1) 0.24s both;
        }

        .h3 {
            animation: entryL 0.82s cubic-bezier(0.34, 1.56, 0.64, 1) 0.38s both;
        }

        .h4 {
            animation: entryPop 1.08s cubic-bezier(0.34, 1.36, 0.64, 1) 0.72s both,
                centerGlow 3.4s ease-in-out 2.10s infinite;
        }

        .h5 {
            animation: entryR 0.82s cubic-bezier(0.34, 1.56, 0.64, 1) 0.38s both;
        }

        .h6 {
            animation: entryBL 0.82s cubic-bezier(0.34, 1.56, 0.64, 1) 0.54s both;
        }

        .h7 {
            animation: entryBR 0.82s cubic-bezier(0.34, 1.56, 0.64, 1) 0.54s both;
        }

        /* //Post-entry state (unlocks hover transforms)// */
        .hex-unit.ready {
            animation: none !important;
            opacity: 1 !important;
        }

        .hex-unit.h4.ready {
            animation: centerGlow 3.4s ease-in-out infinite !important;
        }

        /* ==============================
   RESPONSIVE
============================== */

        @media (max-width: 1140px) {
            .svc-content {
                grid-template-columns: 1fr;
                padding: 72px 44px 160px;
                min-height: auto;
                gap: 44px;
            }

            .svc-left {
                order: 1;
                max-width: 100%;
            }

            .svc-right {
                order: 2;
                height: 540px;
                align-items: flex-start;
                position: relative;
                width: 100%;
            }

            .svc-full-link {
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%) translateY(0);
                margin-top: 0;
            }

            .honeycomb {
                position: absolute;
                left: 50%;
                transform: translateX(-50%) scale(0.80);
                transform-origin: top center;
            }

            .svc-overlay {
                background: linear-gradient(180deg,
                        rgba(3, 7, 24, 0.92) 0%,
                        rgba(3, 7, 24, 0.70) 45%,
                        rgba(3, 7, 24, 0.85) 100%);
            }

            .svc-wordmark {
                right: 50%;
                transform: translateX(50%);
                bottom: 40px;
                opacity: 0.6;
            }
        }

        @media (max-width: 700px) {
            .svc-content {
                padding: 56px 22px 140px;
                gap: 26px;
            }

            .svc-right {
                height: 390px;
            }

            .honeycomb {
                top: 0;
                transform: translateX(-50%) scale(0.56);
                transform-origin: top center;
            }

            .svc-wordmark {
                bottom: 24px;
                width: 100%;
                justify-content: center;
                opacity: 0.4;
            }

            .svc-wordmark img {
                height: clamp(50px, 10vh, 90px);
            }
        }

        @media (max-width: 460px) {
            .svc-content {
                padding-bottom: 120px;
            }

            .svc-right {
                height: 330px;
            }

            .honeycomb {
                transform: translateX(-50%) scale(0.46);
                transform-origin: top center;
            }

            .svc-wordmark img {
                height: clamp(40px, 8vh, 70px);
            }
        }

        @media (max-width: 370px) {
            .svc-right {
                height: 290px;
            }

            .honeycomb {
                transform: translateX(-50%) scale(0.40);
                transform-origin: top center;
            }
        }

        /* ==============================
   STICKY LOGO BUTTON
============================== */

        .sticky-logo-btn {
            position: fixed;
            top: 22px;
            left: 50%;
            transform: translateX(-50%) translateY(-70px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            cursor: pointer;
            background: rgba(8, 21, 42, 0.80);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(212, 175, 55, 0.22);
            border-radius: 50px;
            padding: 7px 10px;
            opacity: 0;
            transition:
                transform 0.55s cubic-bezier(0.34, 1.36, 0.64, 1),
                opacity 0.40s ease,
                border-color 0.36s ease,
                box-shadow 0.36s ease;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.40);
        }

        .sticky-logo-btn.visible {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }

        .sticky-logo-btn:hover {
            border-color: rgba(212, 175, 55, 0.58);
            box-shadow: 0 6px 40px rgba(212, 175, 55, 0.18), 0 4px 28px rgba(0, 0, 0, 0.42);
        }

        .sticky-logo-btn img {
            height: 34px;
            width: auto;
            object-fit: contain;
            display: block;
            filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.28));
            transition: filter 0.36s ease;
        }

        .sticky-logo-btn:hover img {
            filter: drop-shadow(0 0 14px rgba(212, 175, 55, 0.60));
        }

        .sticky-logo-label {
            font-family: 'Jost', sans-serif;
            font-size: 9px;
            font-weight: 500;
            letter-spacing: 0.38em;
            text-transform: uppercase;
            color: rgba(212, 175, 55, 0.72);
            white-space: nowrap;
            transition: color 0.36s ease, letter-spacing 0.36s ease;
        }

        .sticky-logo-btn:hover .sticky-logo-label {
            color: rgba(212, 175, 55, 1);
            letter-spacing: 0.48em;
        }

        /* ==============================
   OUR STORY SECTION
============================== */

        .story {
            position: relative;
            z-index: 10;
            background: #08152A;
            overflow: hidden;
        }

        /* Smooth transition from the Hero section above */
        .story::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 150px;
            background: linear-gradient(to bottom, #030712 0%, transparent 100%);
            z-index: 3;
            pointer-events: none;
        }

        /* Smooth transition to the Services section below */
        .story::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 150px;
            background: linear-gradient(to top, var(--navy) 0%, transparent 100%);
            z-index: 3;
            pointer-events: none;
        }

        /* Gold dust canvas */
        .story-dust-canvas {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .story-dust-p {
            position: absolute;
            border-radius: 50%;
            animation: storyDustFloat linear infinite;
        }

        @keyframes storyDustFloat {
            0% {
                transform: translateY(110%) translateX(0) rotate(0deg);
                opacity: 0;
            }

            8% {
                opacity: 1;
            }

            88% {
                opacity: 0.5;
            }

            100% {
                transform: translateY(-12vh) translateX(var(--sdrift, 0px)) rotate(var(--srot, 60deg));
                opacity: 0;
            }
        }

        /* Subtle noise grain over bg */
        .story-grain {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            opacity: 0.028;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-size: 256px 256px;
        }

        /* Radial ambient glow in top-right corner */
        .story-ambient {
            position: absolute;
            top: -180px;
            right: -180px;
            width: 680px;
            height: 680px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.07) 0%, rgba(212, 175, 55, 0.02) 40%, transparent 70%);
            z-index: 1;
            pointer-events: none;
        }

        .story-ambient-bl {
            position: absolute;
            bottom: -120px;
            left: -120px;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.055) 0%, transparent 65%);
            z-index: 1;
            pointer-events: none;
        }

        /* Main content wrapper */
        .story-content {
            position: relative;
            z-index: 5;
            max-width: 1400px;
            margin: 0 auto;
            padding: 65px 70px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0 60px;
            align-items: center;
        }

        /* --------- LEFT COLUMN --------- */
        .story-left {
            display: flex;
            flex-direction: column;
            gap: 0;
            position: relative;
        }

        /* Decorative dot pattern top-left of left column */
        .story-dot-grid {
            position: absolute;
            top: -48px;
            left: -24px;
            display: grid;
            grid-template-columns: repeat(6, 8px);
            gap: 8px;
            z-index: 0;
            opacity: 0;
            transition: opacity 0.8s ease 0.2s;
        }

        .story-dot-grid.vis {
            opacity: 1;
        }

        .story-dot-grid span {
            width: 2.5px;
            height: 2.5px;
            border-radius: 50%;
            background: rgba(212, 175, 55, 0.35);
            display: block;
        }

        /* Eyebrow */
        .story-eyebrow {
            display: flex;
            align-items: center;
            gap: 14px;
            font-family: 'Jost', sans-serif;
            font-size: 9px;
            font-weight: 500;
            letter-spacing: 0.50em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 22px;
            position: relative;
            z-index: 1;
            opacity: 0;
            transform: translateX(-22px);
            transition: opacity 0.65s ease, transform 0.65s ease;
        }

        .story-eyebrow.vis {
            opacity: 1;
            transform: translateX(0);
        }

        .story-eyebrow::before {
            content: '';
            width: 30px;
            height: 1px;
            background: linear-gradient(90deg, var(--gold), rgba(212, 175, 55, 0.3));
            flex-shrink: 0;
        }

        /* Story title — large cinematic serif */
        .story-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(3rem, 5.2vw, 6.5rem);
            font-weight: 600;
            line-height: 0.88;
            letter-spacing: -0.03em;
            margin-bottom: 26px;
            position: relative;
            z-index: 1;

            /* Fading gradient fill matching site palette */
            background: linear-gradient(148deg,
                    #ffffff 0%,
                    #f7f2e8 18%,
                    #eed99a 44%,
                    #D4AF37 70%,
                    #8C6210 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;

            opacity: 0;
            transform: translateY(36px);
            transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
        }

        .story-title.vis {
            opacity: 1;
            transform: translateY(0);
        }

        /* Italic sub-title */
        .story-title-italic {
            display: block;
            font-style: italic;
            font-weight: 300;
            font-size: 0.55em;
            letter-spacing: 0.04em;
            -webkit-text-fill-color: transparent;
            background: linear-gradient(90deg, rgba(240, 214, 104, 0.70) 0%, rgba(212, 175, 55, 0.40) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            margin-top: 2px;
            padding-left: 2px;
        }

        /* Gold horizontal accent line */
        .story-gold-line {
            width: 0;
            height: 1px;
            background: linear-gradient(90deg,
                    rgba(212, 175, 55, 0.9) 0%,
                    rgba(240, 214, 104, 0.6) 40%,
                    rgba(212, 175, 55, 0.15) 80%,
                    transparent 100%);
            margin-bottom: 24px;
            box-shadow: 0 0 8px rgba(212, 175, 55, 0.25);
            transition: width 0.90s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s;
        }

        .story-gold-line.vis {
            width: 200px;
        }

        /* Tagline — large italic below gold line */
        .story-tagline {
            font-family: 'Cormorant Garamond', serif;
            font-style: italic;
            font-size: clamp(0.95rem, 1.4vw, 1.3rem);
            font-weight: 400;
            color: rgba(255, 255, 255, 0.62);
            line-height: 1.50;
            margin-bottom: 22px;
            letter-spacing: 0.01em;
            max-width: 420px;
            opacity: 0;
            transform: translateY(18px);
            transition: opacity 0.70s ease 0.48s, transform 0.70s ease 0.48s;
        }

        .story-tagline.vis {
            opacity: 1;
            transform: translateY(0);
        }

        /* Body paragraphs */
        .story-body {
            display: flex;
            flex-direction: column;
            gap: 14px;
            max-width: 430px;
        }

        .story-para {
            font-family: 'Jost', sans-serif;
            font-size: 0.80rem;
            font-weight: 300;
            line-height: 1.80;
            color: rgba(255, 255, 255, 0.46);
            opacity: 0;
            transform: translateY(16px);
            transition: opacity 0.65s ease, transform 0.65s ease;
        }

        .story-para.vis {
            opacity: 1;
            transform: translateY(0);
        }

        .story-para:nth-child(1) {
            transition-delay: 0.60s;
        }

        .story-para:nth-child(2) {
            transition-delay: 0.72s;
        }

        .story-para:nth-child(3) {
            transition-delay: 0.84s;
        }

        /* Gold highlight text within para */
        .story-para strong {
            color: rgba(212, 175, 55, 0.85);
            font-weight: 500;
        }

        /* Two stat chips at bottom left */
        .story-stats {
            display: flex;
            gap: 22px;
            margin-top: 28px;
            opacity: 0;
            transform: translateY(14px);
            transition: opacity 0.65s ease 1.0s, transform 0.65s ease 1.0s;
        }

        .story-stats.vis {
            opacity: 1;
            transform: translateY(0);
        }

        .story-stat {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .story-stat-num {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(1.6rem, 2.4vw, 2.2rem);
            font-weight: 600;
            line-height: 1;
            background: linear-gradient(135deg, #F0D668 0%, #D4AF37 60%, #A07818 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .story-stat-label {
            font-family: 'Jost', sans-serif;
            font-size: 8.5px;
            font-weight: 500;
            letter-spacing: 0.38em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.34);
        }

        /* --------- RIGHT COLUMN --------- */
        .story-right {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        /* Blob image container */
        .story-img-wrap {
            position: relative;
            width: clamp(300px, 34vw, 500px);
            height: clamp(300px, 34vw, 500px);
            flex-shrink: 0;
            opacity: 0;
            transform: scale(0.90) translateY(28px);
            transition:
                opacity 0.90s cubic-bezier(0.16, 1, 0.3, 1) 0.30s,
                transform 0.90s cubic-bezier(0.16, 1, 0.3, 1) 0.30s;
        }

        .story-img-wrap.vis {
            opacity: 1;
            transform: scale(1) translateY(0);
        }

        /* Deep shadow layers for depth illusion */
        .story-blob-shadow {
            position: absolute;
            inset: 12px;
            border-radius: 48% 60% 55% 45% / 50% 48% 60% 52%;
            background: transparent;
            box-shadow:
                0 32px 80px rgba(0, 0, 0, 0.70),
                0 16px 48px rgba(0, 0, 0, 0.55),
                0 4px 18px rgba(0, 0, 0, 0.40),
                inset 0 -6px 20px rgba(0, 0, 0, 0.35);
            z-index: 1;
            pointer-events: none;
            transition: box-shadow 0.55s ease;
            animation: storyBlobFloat 8s ease-in-out infinite;
        }

        .story-img-wrap:hover .story-blob-shadow {
            box-shadow:
                0 48px 110px rgba(0, 0, 0, 0.75),
                0 24px 60px rgba(212, 175, 55, 0.12),
                0 6px 24px rgba(0, 0, 0, 0.45),
                inset 0 -8px 28px rgba(0, 0, 0, 0.40);
        }

        /* Animated float */
        @keyframes storyBlobFloat {

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

            33% {
                transform: translateY(-12px) rotate(0.8deg);
            }

            66% {
                transform: translateY(6px) rotate(-0.5deg);
            }
        }

        /* Gold ring halo */
        .story-blob-ring {
            position: absolute;
            inset: -14px;
            border-radius: 50% 42% 58% 44% / 46% 52% 48% 56%;
            border: 1px solid rgba(212, 175, 55, 0.22);
            z-index: 2;
            pointer-events: none;
            animation: storyBlobFloat 10s ease-in-out 1s infinite;
            transition: border-color 0.50s ease;
        }

        .story-img-wrap:hover .story-blob-ring {
            border-color: rgba(212, 175, 55, 0.52);
        }

        /* The actual image, masked to the same organic footprint as the gold ring */
        .story-img-blob {
            position: absolute;
            inset: 4px;
            z-index: 3;
            overflow: hidden;
            border-radius: 50% 42% 58% 44% / 46% 52% 48% 56%;
            animation: storyBlobFloat 8s ease-in-out infinite;
        }

        .story-img-blob img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
            /* Default: desaturated, slightly dark */
            filter: saturate(0.12) brightness(0.70) contrast(1.05);
            transition:
                filter 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            transform: scale(1.03);
        }

        .story-img-wrap:hover .story-img-blob img {
            filter: saturate(1.0) brightness(1.0) contrast(1.0);
            transform: scale(1.01);
        }

        /* Gold glint streak on image */
        .story-img-blob::after {
            content: '';
            position: absolute;
            top: -80%;
            left: -60%;
            width: 50%;
            height: 200%;
            background: linear-gradient(105deg,
                    transparent 0%,
                    rgba(255, 255, 255, 0.00) 35%,
                    rgba(240, 214, 104, 0.12) 50%,
                    rgba(255, 255, 255, 0.00) 65%,
                    transparent 100%);
            pointer-events: none;
            z-index: 4;
            transform: skewX(-12deg);
            opacity: 0;
            transition: opacity 0.3s ease;
            animation: storyGlint 6s ease-in-out 3s infinite;
        }

        @keyframes storyGlint {

            0%,
            80%,
            100% {
                left: -60%;
                opacity: 0;
            }

            15% {
                opacity: 1;
            }

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

        /* Corner gold accent frame lines */
        .story-img-corner {
            position: absolute;
            z-index: 10;
            pointer-events: none;
        }

        .story-img-corner.tl {
            top: -2px;
            left: 28px;
            width: 48px;
            height: 48px;
            border-top: 1px solid rgba(212, 175, 55, 0.55);
            border-left: 1px solid rgba(212, 175, 55, 0.55);
        }

        .story-img-corner.br {
            bottom: -2px;
            right: 28px;
            width: 48px;
            height: 48px;
            border-bottom: 1px solid rgba(212, 175, 55, 0.55);
            border-right: 1px solid rgba(212, 175, 55, 0.55);
        }

        /* Ambient glow behind image */
        .story-img-glow {
            position: absolute;
            inset: -40px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 60%);
            z-index: 0;
            pointer-events: none;
            transition: background 0.6s ease;
        }

        .story-img-wrap:hover .story-img-glow {
            background: radial-gradient(circle, rgba(212, 175, 55, 0.16) 0%, transparent 60%);
        }

        /* Caption / photo label beneath image */
        .story-img-caption {
            margin-top: 24px;
            display: flex;
            align-items: center;
            gap: 12px;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.65s ease 0.70s, transform 0.65s ease 0.70s;
        }

        .story-img-caption.vis {
            opacity: 1;
            transform: translateY(0);
        }

        .story-img-caption::before {
            content: '';
            width: 22px;
            height: 1px;
            background: rgba(212, 175, 55, 0.50);
            flex-shrink: 0;
        }

        .story-img-caption span {
            font-family: 'Jost', sans-serif;
            font-size: 8.5px;
            font-weight: 400;
            letter-spacing: 0.38em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.30);
        }

        /* --------- VERTICAL STORY PATTERN (between columns) --------- */
        .story-divider {
            position: absolute;
            left: 50%;
            top: 15%;
            height: 70%;
            width: 1px;
            background: linear-gradient(to bottom,
                    transparent 0%,
                    rgba(212, 175, 55, 0.18) 20%,
                    rgba(212, 175, 55, 0.28) 50%,
                    rgba(212, 175, 55, 0.18) 80%,
                    transparent 100%);
            z-index: 2;
            pointer-events: none;
        }

        .story-divider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 5px;
            height: 5px;
            border: 1px solid rgba(212, 175, 55, 0.45);
            border-radius: 50%;
        }

        /* --------- RESPONSIVE --------- */
        @media (max-width: 1100px) {
            .story-content {
                grid-template-columns: 1fr;
                padding: 55px 44px 55px;
                gap: 44px 0;
                min-height: auto;
            }

            .story-right {
                order: -1;
            }

            .story-img-wrap {
                width: clamp(260px, 54vw, 400px);
                height: clamp(260px, 54vw, 400px);
            }

            .story-divider {
                display: none;
            }

            .story-gold-line.vis {
                width: 140px;
            }
        }

        @media (max-width: 600px) {
            .story-content {
                padding: 48px 22px 48px;
                gap: 36px;
            }

            .story-img-wrap {
                width: min(78vw, 320px);
                height: min(78vw, 320px);
            }

            .story-title {
                font-size: clamp(2.6rem, 12vw, 3.5rem);
            }

            .story-stats {
                flex-wrap: wrap;
                gap: 16px;
            }
        }

        /* ==============================
       PORTFOLIO SECTION
    ============================== */

        /* Scoped variables for the Portfolio section to maintain its specific aesthetic */
        .pf {
            --navy: #060d16;
            --navy-light: #0f1c29;
            --gold: #d3ad48;
            --gold-lt: #ecc762;
            --white: #ffffff;
            --champagne: #ded1b6;
        }

        /* //Portfolio Section// */
        .pf {
            position: relative;
            z-index: 10;
            background-color: var(--navy);
            background-image:
                radial-gradient(ellipse at center, rgba(6, 13, 22, 0.45) 0%, rgba(6, 13, 22, 0.96) 85%),
                linear-gradient(to bottom, #060d16 0%, transparent 15%, transparent 85%, #060d16 100%),
                url('../portfolio.jpg');
            background-size: cover;
            background-position: center;
            overflow: hidden;
            min-height: 48vh;
            /* Minimal height while preserving offsets */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* //Top Divider Rule// */
        .pf::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg,
                    transparent 0%,
                    rgba(212, 175, 55, 0.08) 12%,
                    rgba(212, 175, 55, 0.82) 38%,
                    rgba(240, 214, 104, 0.95) 50%,
                    rgba(212, 175, 55, 0.82) 62%,
                    rgba(212, 175, 55, 0.08) 88%,
                    transparent 100%);
            z-index: 2;
            pointer-events: none;
        }

        /* //Ghost Watermark// */
        .pf-ghost {
            position: absolute;
            bottom: -0.08em;
            right: -0.04em;
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(7rem, 16vw, 20rem);
            font-weight: 700;
            letter-spacing: -0.04em;
            line-height: 1;
            text-transform: uppercase;
            color: transparent;
            -webkit-text-stroke: 1px rgba(212, 175, 55, 0.055);
            pointer-events: none;
            user-select: none;
            z-index: 1;
            white-space: nowrap;
        }

        /* //Vertical Side Label// */
        .pf-vert {
            position: absolute;
            left: 22px;
            top: 50%;
            transform: translateY(-50%) rotate(-90deg);
            font-family: 'Jost', sans-serif;
            font-size: 7.5px;
            font-weight: 500;
            letter-spacing: 0.50em;
            text-transform: uppercase;
            color: rgba(212, 175, 55, 0.18);
            white-space: nowrap;
            pointer-events: none;
            user-select: none;
            z-index: 3;
        }

        /* //Inner Container// */
        .pf-inner {
            position: relative;
            z-index: 4;
            max-width: 1380px;
            margin: 0 auto;
            width: 100%;
            padding: 15px 80px 20px;
            /* Minimal vertical padding */
        }

        /* ==============================
       HEADER ROW
    ============================== */

        /* //Header Grid// */
        .pf-header {
            display: grid;
            grid-template-columns: 38% 62%;
            align-items: flex-end;
            gap: 40px;
            margin-bottom: 12px;
            /* Absolute minimal margin between header and cards */
        }

        /* //Left: Eyebrow + Title// */
        .pf-hl {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        /* //Eyebrow// */
        .pf-eyebrow {
            display: flex;
            align-items: center;
            gap: 14px;
            font-family: 'Jost', sans-serif;
            font-size: 10.5px;
            font-weight: 500;
            letter-spacing: 0.42em;
            text-transform: uppercase;
            color: var(--champagne, #E4D4B5);
            /* Fixed color */
            opacity: 0;
            transform: translateX(-16px);
            transition: opacity 0.65s ease 0.10s, transform 0.65s ease 0.10s;
        }

        .pf-eyebrow::before {
            content: '';
            width: 28px;
            height: 1px;
            background: var(--champagne, #E4D4B5);
            /* Fixed color */
            flex-shrink: 0;
        }

        .pf-eyebrow.vis {
            opacity: 1;
            transform: translateX(0);
        }

        /* //Section Title// */
        .pf-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(3.6rem, 5.8vw, 7rem);
            font-weight: 600;
            line-height: 0.88;
            letter-spacing: -0.032em;
            background: linear-gradient(148deg,
                    #ffffff 0%,
                    #eae0c5 30%,
                    #d3ad48 80%,
                    #af8b2f 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            opacity: 0;
            transform: translateY(28px);
            transition: opacity 0.90s cubic-bezier(0.16, 1, 0.3, 1) 0.22s,
                transform 0.90s cubic-bezier(0.16, 1, 0.3, 1) 0.22s;
        }

        .pf-title.vis {
            opacity: 1;
            transform: translateY(0);
        }

        /* //Title Italic Append// */
        .pf-title em {
            display: block;
            font-style: italic;
            font-weight: 300;
            font-size: 0.50em;
            -webkit-text-fill-color: transparent;
            background: linear-gradient(90deg, rgba(240, 214, 104, 0.68) 0%, rgba(212, 175, 55, 0.38) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            letter-spacing: 0.04em;
            margin-top: 4px;
            padding-left: 0.1em;
        }

        /* //Right: Intro + Arrow// */
        .pf-hr {
            display: flex;
            flex-direction: column;
            gap: 32px;
            padding-left: 20px;
            border-left: 1px solid rgba(212, 175, 55, 0.12);
        }

        /* //Gold Accent Line// */
        .pf-gold-rule {
            width: 0;
            height: 1px;
            background: linear-gradient(90deg,
                    rgba(212, 175, 55, 0.9) 0%,
                    rgba(240, 214, 104, 0.55) 45%,
                    rgba(212, 175, 55, 0.12) 80%,
                    transparent 100%);
            box-shadow: 0 0 8px rgba(212, 175, 55, 0.22);
            transition: width 0.90s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s;
        }

        .pf-gold-rule.vis {
            width: 160px;
        }

        /* //Intro Text// */
        .pf-intro {
            font-family: 'Jost', sans-serif;
            font-size: 0.88rem;
            font-weight: 300;
            line-height: 1.82;
            color: rgba(255, 255, 255, 0.78);
            /* Increased brightness for text */
            max-width: 550px;
            opacity: 0;
            transform: translateY(18px);
            transition: opacity 0.75s ease 0.30s, transform 0.75s ease 0.30s;
        }

        .pf-intro.vis {
            opacity: 1;
            transform: translateY(0);
        }

        /* //Portfolio Full Link (arrow)// */
        .pf-full-link {
            display: inline-flex;
            align-items: center;
            gap: 18px;
            text-decoration: none;
            width: fit-content;
            opacity: 0;
            transform: translateY(14px);
            transition: opacity 0.65s ease 0.48s, transform 0.65s ease 0.48s;
        }

        .pf-full-link.vis {
            opacity: 1;
            transform: translateY(0);
        }

        /* //Arrow Ring// */
        .pf-ring-wrap {
            position: relative;
            width: 56px;
            height: 56px;
            flex-shrink: 0;
        }

        .pf-ring-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
            overflow: visible;
        }

        .pf-ring-track {
            fill: none;
            stroke: rgba(212, 175, 55, 0.18);
            stroke-width: 1;
        }

        .pf-ring-trace {
            fill: none;
            stroke: var(--gold);
            stroke-width: 1;
            stroke-dasharray: 163;
            stroke-dashoffset: 163;
            stroke-linecap: round;
            transition: stroke-dashoffset 0.72s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.45));
        }

        .pf-full-link:hover .pf-ring-trace {
            stroke-dashoffset: 0;
        }

        .pf-ring-inner {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pf-ring-inner svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: rgba(212, 175, 55, 0.72);
            stroke-width: 1.3;
            transition: transform 0.52s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.36s ease;
        }

        .pf-full-link:hover .pf-ring-inner svg {
            transform: translateX(5px);
            stroke: var(--gold-lt);
        }

        /* //Arrow Label// */
        .pf-link-label {
            font-family: 'Jost', sans-serif;
            font-size: 9.5px;
            font-weight: 500;
            letter-spacing: 0.40em;
            text-transform: uppercase;
            color: rgba(212, 175, 55, 0.55);
            transition: color 0.38s ease, letter-spacing 0.50s ease;
        }

        .pf-full-link:hover .pf-link-label {
            color: var(--gold-lt);
            letter-spacing: 0.52em;
        }

        /* ==============================
       CARDS STAGE
    ============================== */

        /* //Stage Container// */
        .pf-stage {
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            gap: 0;
            position: relative;
            z-index: 2;
        }

        /* ==============================
       INDIVIDUAL CARD
    ============================== */

        /* //Card Base// */
        .pf-card {
            position: relative;
            display: block;
            text-decoration: none;
            cursor: pointer;
            overflow: hidden;
            box-sizing: border-box;

            /* High-end 5px solid white border */
            border: 5px solid #ffffff;
            border-radius: 2px;

            /* Subtle gold hairline inner + Outer hairline separator + Deep shadow with slight branding glow */
            box-shadow:
                inset 0 0 0 1px rgba(211, 173, 72, 0.35),
                0 0 0 1px rgba(2, 6, 12, 0.95),
                -4px 18px 36px rgba(0, 0, 0, 0.85),
                0 0 15px rgba(211, 173, 72, 0.12);
            /* Subtle gold glow aura */

            /* Default: entry off-screen */
            opacity: 0;
            /* Entry + Hover transition bundle */
            transition:
                transform 0.72s cubic-bezier(0.34, 1.28, 0.64, 1),
                opacity 0.80s ease,
                filter 0.44s ease,
                box-shadow 0.44s ease;
        }

        /* //Card Sizes// */
        .pf-c1 {
            flex: 0 0 265px;
            height: 348px;
            z-index: 1;
            margin-right: -18px;
            /* slight overlap with C2 */
            /* Resting: tilted left, pushed down */
            transform: translateY(44px) rotate(-4.5deg);
        }

        .pf-c2 {
            flex: 0 0 318px;
            height: 418px;
            z-index: 3;
            /* always on top */
            /* Resting: slightly elevated — center feature */
            transform: translateY(-12px);
        }

        .pf-c3 {
            flex: 0 0 265px;
            height: 348px;
            z-index: 2;
            margin-left: -18px;
            /* slight overlap with C2 */
            /* Resting: tilted right, pushed further down */
            transform: translateY(60px) rotate(4.5deg);
        }

        /* //VIS: Entry into resting position// */
        .pf-c1.vis {
            opacity: 1;
            transform: translateY(44px) rotate(-4.5deg);
            transition-delay: 0.10s;
        }

        .pf-c2.vis {
            opacity: 1;
            transform: translateY(-12px);
            transition-delay: 0.28s;
        }

        .pf-c3.vis {
            opacity: 1;
            transform: translateY(60px) rotate(4.5deg);
            transition-delay: 0.46s;
        }

        /* //READY: Post-entry hover state (no delays)// */
        .pf-card.pf-ready {
            transition:
                transform 0.62s cubic-bezier(0.34, 1.28, 0.64, 1),
                opacity 0.40s ease,
                filter 0.40s ease,
                box-shadow 0.40s ease;
            transition-delay: 0s !important;
        }

        /* //Spotlight: dim siblings when any card is hovered// */
        .pf-stage:has(.pf-card.pf-ready:hover) .pf-card.pf-ready:not(:hover) {
            opacity: 0.36;
            filter: brightness(0.52) saturate(0.6);
        }

        /* //Hover: C1 — breaks left, rises, straightens// */
        .pf-c1.pf-ready:hover {
            opacity: 1 !important;
            filter: brightness(1.08) saturate(1.0) !important;
            transform: translateY(0) rotate(0deg) scale(1.05) !important;
            box-shadow:
                inset 0 0 0 1px rgba(236, 199, 98, 0.8),
                0 0 0 1px rgba(2, 6, 12, 0.95),
                0 42px 85px rgba(0, 0, 0, 0.9),
                0 0 35px rgba(255, 255, 255, 0.12) !important;
            z-index: 10 !important;
        }

        /* //Hover: C2 — rises further, expands// */
        .pf-c2.pf-ready:hover {
            opacity: 1 !important;
            filter: brightness(1.08) saturate(1.0) !important;
            transform: translateY(-36px) scale(1.05) !important;
            box-shadow:
                inset 0 0 0 1px rgba(236, 199, 98, 0.8),
                0 0 0 1px rgba(2, 6, 12, 0.95),
                0 52px 105px rgba(0, 0, 0, 0.95),
                0 0 45px rgba(255, 255, 255, 0.12) !important;
            z-index: 10 !important;
        }

        /* //Hover: C3 — breaks right, rises, straightens// */
        .pf-c3.pf-ready:hover {
            opacity: 1 !important;
            filter: brightness(1.08) saturate(1.0) !important;
            transform: translateY(0) rotate(0deg) scale(1.05) !important;
            box-shadow:
                inset 0 0 0 1px rgba(236, 199, 98, 0.8),
                0 0 0 1px rgba(2, 6, 12, 0.95),
                0 42px 85px rgba(0, 0, 0, 0.9),
                0 0 35px rgba(255, 255, 255, 0.12) !important;
            z-index: 10 !important;
        }

        /* //Gold Top Edge Trace (::after)// */
        .pf-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg,
                    transparent 0%,
                    rgba(212, 175, 55, 0.5) 20%,
                    rgba(240, 214, 104, 0.95) 50%,
                    rgba(212, 175, 55, 0.5) 80%,
                    transparent 100%);
            z-index: 8;
            transform: scaleX(0);
            transform-origin: center;
            transition: transform 0.62s cubic-bezier(0.34, 1.28, 0.64, 1);
            box-shadow: 0 0 12px rgba(212, 175, 55, 0.45);
        }

        .pf-card.pf-ready:hover::after {
            transform: scaleX(1);
        }

        /* ==============================
       CARD INTERNALS
    ============================== */

        /* //Image Wrapper// */
        .pf-img-wrap {
            position: absolute;
            inset: 0;
            overflow: hidden;
        }

        /* //Image// */
        .pf-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            display: block;
            /* Default: slightly over-zoomed + slightly muted */
            transform: scale(1.09);
            filter: brightness(0.82) saturate(0.88);
            transition:
                transform 0.80s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.62s ease;
        }

        /* On hover: de-zoom (reveal) + full color */
        .pf-card.pf-ready:hover .pf-img {
            transform: scale(1.0);
            filter: brightness(1.0) saturate(1.0);
        }

        /* //Dark Gradient Overlay// */
        .pf-shade {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top,
                    rgba(4, 9, 28, 0.97) 0%,
                    rgba(4, 9, 28, 0.72) 30%,
                    rgba(4, 9, 28, 0.24) 62%,
                    transparent 90%);
            z-index: 2;
            pointer-events: none;
            transition: opacity 0.55s ease;
        }

        .pf-card.pf-ready:hover .pf-shade {
            opacity: 0.85;
        }

        /* //Cinematic Light Sweep// */
        .pf-sweep {
            position: absolute;
            inset: 0;
            z-index: 3;
            pointer-events: none;
            background: linear-gradient(112deg,
                    transparent 10%,
                    rgba(240, 214, 104, 0.10) 42%,
                    rgba(255, 245, 175, 0.05) 50%,
                    transparent 72%);
            transform: translateX(-140%);
            transition: none;
        }

        .pf-card.pf-ready:hover .pf-sweep {
            animation: pfSweepAnim 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }

        @keyframes pfSweepAnim {
            to {
                transform: translateX(140%);
            }
        }

        /* //Card Footer (Number + Label)// */
        .pf-card-foot {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 30px 20px 22px;
            z-index: 5;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            pointer-events: none;
        }

        /* //Index Number// */
        .pf-num {
            font-family: 'Cormorant Garamond', serif;
            font-size: 3.2rem;
            font-weight: 300;
            letter-spacing: -0.05em;
            color: rgba(212, 175, 55, 0.28);
            line-height: 1;
            transition: color 0.44s ease, transform 0.44s ease;
        }

        .pf-card.pf-ready:hover .pf-num {
            color: rgba(212, 175, 55, 0.60);
            transform: translateY(-3px);
        }

        /* //Category + Name// */
        .pf-card-meta {
            text-align: right;
            transform: translateY(8px);
            transition: transform 0.48s cubic-bezier(0.34, 1.28, 0.64, 1);
        }

        .pf-card.pf-ready:hover .pf-card-meta {
            transform: translateY(0);
        }

        .pf-cat {
            display: block;
            font-family: 'Jost', sans-serif;
            font-size: 7.5px;
            font-weight: 500;
            letter-spacing: 0.36em;
            text-transform: uppercase;
            color: var(--champagne, #ded1b6);
            opacity: 0.95;
            /* Brighter category text */
            margin-bottom: 5px;
            transition: opacity 0.38s ease;
        }

        .pf-card.pf-ready:hover .pf-cat {
            opacity: 1;
        }

        .pf-name {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.55rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            line-height: 1;
            color: var(--white);
            transition: color 0.38s ease;
        }

        .pf-card.pf-ready:hover .pf-name {
            color: var(--gold-lt);
        }

        /* //Corner Reveal Details (4 L-shaped corners)// */
        .pf-corner {
            position: absolute;
            width: 14px;
            height: 14px;
            z-index: 6;
            pointer-events: none;
            opacity: 0;
            transform: scale(0.4);
            transition:
                opacity 0.38s ease,
                transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .pf-card.pf-ready:hover .pf-corner {
            opacity: 1;
            transform: scale(1);
        }

        .pf-corner-tl {
            top: 12px;
            left: 12px;
            border-top: 1px solid rgba(212, 175, 55, 0.75);
            border-left: 1px solid rgba(212, 175, 55, 0.75);
            transition-delay: 0.02s;
        }

        .pf-corner-tr {
            top: 12px;
            right: 12px;
            border-top: 1px solid rgba(212, 175, 55, 0.75);
            border-right: 1px solid rgba(212, 175, 55, 0.75);
            transition-delay: 0.05s;
        }

        .pf-corner-bl {
            bottom: 12px;
            left: 12px;
            border-bottom: 1px solid rgba(212, 175, 55, 0.75);
            border-left: 1px solid rgba(212, 175, 55, 0.75);
            transition-delay: 0.08s;
        }

        .pf-corner-br {
            bottom: 12px;
            right: 12px;
            border-bottom: 1px solid rgba(212, 175, 55, 0.75);
            border-right: 1px solid rgba(212, 175, 55, 0.75);
            transition-delay: 0.11s;
        }

        /* ==============================
       COUNT RAIL (below cards)
    ============================== */

        /* //Bottom Index Rail// */
        .pf-rail {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 28px;
            margin-top: 36px;
            padding-right: 2px;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.65s ease 0.72s, transform 0.65s ease 0.72s;
        }

        .pf-rail.vis {
            opacity: 1;
            transform: translateY(0);
        }

        .pf-rail-line {
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.16));
            max-width: 300px;
        }

        .pf-rail-count {
            font-family: 'Jost', sans-serif;
            font-size: 8.5px;
            font-weight: 400;
            letter-spacing: 0.36em;
            text-transform: uppercase;
            color: rgba(212, 175, 55, 0.30);
        }

        /* ==============================
       RESPONSIVE
    ============================== */

        @media (max-width: 1180px) {
            .pf-inner {
                padding: 80px 50px 100px;
            }

            .pf-c1,
            .pf-c3 {
                flex: 0 0 230px;
                height: 302px;
            }

            .pf-c2 {
                flex: 0 0 276px;
                height: 362px;
            }

            .pf-header {
                grid-template-columns: 42% 58%;
            }
        }

        @media (max-width: 960px) {
            .pf-inner {
                padding: 70px 40px 88px;
            }

            .pf-header {
                grid-template-columns: 1fr;
                gap: 28px;
            }

            .pf-hr {
                padding-left: 0;
                border-left: none;
            }

            .pf-title {
                font-size: clamp(3.2rem, 9vw, 5rem);
            }

            .pf-stage {
                justify-content: center;
                gap: 0;
            }

            .pf-c1,
            .pf-c3 {
                flex: 0 0 200px;
                height: 263px;
            }

            .pf-c2 {
                flex: 0 0 240px;
                height: 316px;
            }

            .pf-c1.vis {
                transform: translateY(38px) rotate(-4.5deg);
            }

            .pf-c3.vis {
                transform: translateY(52px) rotate(4.5deg);
            }

            .pf-num {
                font-size: 2.4rem;
            }

            .pf-name {
                font-size: 1.25rem;
            }

            .pf-vert {
                display: none;
            }
        }

        @media (max-width: 700px) {
            .pf-inner {
                padding: 60px 24px 80px;
            }

            .pf-header {
                margin-bottom: 48px;
            }

            .pf-stage {
                flex-direction: column;
                align-items: center;
                gap: 20px;
            }

            .pf-c1,
            .pf-c2,
            .pf-c3 {
                flex: 0 0 auto;
                width: 100%;
                max-width: 340px;
                height: 447px;
                margin: 0 !important;
            }

            /* Mobile: all cards flat, no rotation */
            .pf-c1.vis {
                transform: none;
            }

            .pf-c2.vis {
                transform: none;
            }

            .pf-c3.vis {
                transform: none;
            }

            .pf-c1.pf-ready:hover {
                transform: translateY(-6px) scale(1.02) !important;
            }

            .pf-c2.pf-ready:hover {
                transform: translateY(-6px) scale(1.02) !important;
            }

            .pf-c3.pf-ready:hover {
                transform: translateY(-6px) scale(1.02) !important;
            }

            .pf-ghost {
                font-size: clamp(5rem, 28vw, 9rem);
            }
        }

        @media (max-width: 420px) {
            .pf-inner {
                padding: 50px 18px 70px;
            }

            .pf-c1,
            .pf-c2,
            .pf-c3 {
                max-width: 100%;
                height: 400px;
            }
        }