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

        :root {
            --bg: #070709;
            --surface: rgba(255, 255, 255, .04);
            --surface-hover: rgba(255, 255, 255, .07);
            --border: rgba(255, 255, 255, .08);
            --text: #f0ece6;
            --muted: rgba(240, 236, 230, .45);
            --gold: #c9a84c;
            --gold-2: #e2c46f;
            --gold-glow: rgba(201, 168, 76, .18);
            --gold-dim: rgba(201, 168, 76, .08);
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: 'Outfit', sans-serif;
            min-height: 100vh;
            overflow-x: hidden;
            cursor: none;
        }

        body.pt-lock {
            overflow: hidden;
            height: 100vh;
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* ─── PAGE TRANSITION LOADER ─── */
        #pt {
            position: fixed;
            inset: 0;
            z-index: 10000;
            overflow: hidden;
            pointer-events: all;
            isolation: isolate;
        }
        #pt.pt-done {
            pointer-events: none;
            visibility: hidden;
        }
        .pt-layer {
            position: absolute;
            inset: 0;
            transform-origin: top;
            will-change: transform, opacity;
        }
        .pt-1 { background: #070709; z-index: 3; }
        .pt-2 { background: linear-gradient(135deg, #1a1610, #3a2e15); z-index: 2; transform: translateY(6%); }
        .pt-3 { background: linear-gradient(135deg, #c9a84c, #8a6f1f); z-index: 1; transform: translateY(12%); }
        .pt-center {
            position: absolute;
            inset: 0;
            z-index: 5;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 14px;
            text-align: center;
            padding: 0 20px;
        }
        .pt-logo {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(2.2rem, 4vw, 3.2rem);
            letter-spacing: .04em;
            color: #f0ece6;
            opacity: 0;
            transform: translateY(18px);
            animation: ptIn .9s .15s cubic-bezier(.22,1,.36,1) forwards;
        }
        .pt-logo span { color: var(--gold); }
        .pt-cap {
            font-family: 'DM Mono', monospace;
            font-size: .7rem;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: rgba(240, 236, 230, .55);
            opacity: 0;
            animation: ptInSimple .7s .45s ease forwards;
        }
        .pt-bar {
            width: min(240px, 60vw);
            height: 2px;
            background: rgba(240, 236, 230, .08);
            border-radius: 2px;
            overflow: hidden;
            margin-top: 6px;
            opacity: 0;
            animation: ptInSimple .6s .55s ease forwards;
        }
        .pt-bar > span {
            display: block;
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--gold), var(--gold-2));
            transition: width .3s ease;
        }
        .pt-pct {
            font-family: 'DM Mono', monospace;
            font-size: .65rem;
            letter-spacing: .2em;
            color: var(--gold);
            opacity: 0;
            animation: ptInSimple .6s .65s ease forwards;
        }
        #pt.pt-out .pt-1 { animation: ptUp .85s 0s cubic-bezier(.77,0,.18,1) forwards; }
        #pt.pt-out .pt-2 { animation: ptUp .85s .12s cubic-bezier(.77,0,.18,1) forwards; }
        #pt.pt-out .pt-3 { animation: ptUp .85s .24s cubic-bezier(.77,0,.18,1) forwards; }
        #pt.pt-out .pt-center { animation: ptFade .35s ease forwards; }
        @keyframes ptUp { to { transform: translateY(-105%); } }
        @keyframes ptFade { to { opacity: 0; transform: scale(.96); } }
        @keyframes ptIn { to { opacity: 1; transform: translateY(0); } }
        @keyframes ptInSimple { to { opacity: 1; } }

        /* ─── SCROLL PROGRESS ─── */
        #scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            transform-origin: left;
            transform: scaleX(0);
            z-index: 9000;
            background: linear-gradient(90deg, var(--gold), var(--gold-2), var(--gold));
            pointer-events: none;
            transition: transform .15s ease-out;
        }

        /* ─── CURSOR ─── */
        #cur {
            position: fixed;
            top: 0;
            left: 0;
            width: 8px;
            height: 8px;
            background: var(--gold);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            transform: translate3d(-50%, -50%, 0);
            transition: width .2s, height .2s, background .2s;
            box-shadow: 0 0 14px rgba(201, 168, 76, .5);
        }
        #cur-ring {
            position: fixed;
            top: 0;
            left: 0;
            width: 32px;
            height: 32px;
            border: 1.5px solid rgba(201, 168, 76, .45);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9998;
            transform: translate3d(-50%, -50%, 0);
            transition: width .3s, height .3s, border-color .3s, background-color .3s;
        }
        #cur-trail {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 9997;
        }
        .ct-dot {
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 50%;
            background: var(--gold);
            transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
            will-change: transform, opacity;
        }

        /* ─── GLOBAL PARTICLES CANVAS ─── */
        #particles {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
        }

        /* ─── HERO ─── */
        #hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            padding: 2rem clamp(1.5rem, 4vw, 4rem);
        }

        /* aurora orbs */
        .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(90px);
            pointer-events: none;
        }
        .orb-1 {
            width: 520px;
            height: 520px;
            background: radial-gradient(circle, rgba(201, 168, 76, .22) 0%, transparent 70%);
            top: -12%;
            left: -14%;
            animation: d1 13s ease-in-out infinite alternate;
        }
        .orb-2 {
            width: 420px;
            height: 420px;
            background: radial-gradient(circle, rgba(124, 92, 191, .2) 0%, transparent 70%);
            bottom: -8%;
            right: -12%;
            animation: d2 16s ease-in-out infinite alternate;
        }
        .orb-3 {
            width: 280px;
            height: 280px;
            background: radial-gradient(circle, rgba(42, 181, 165, .16) 0%, transparent 70%);
            top: 45%;
            left: 38%;
            animation: d3 11s ease-in-out infinite alternate;
        }
        @keyframes d1 { to { transform: translate(55px, 35px); } }
        @keyframes d2 { to { transform: translate(-45px, -28px); } }
        @keyframes d3 { to { transform: translate(25px, -45px); } }

        /* dot grid */
        .dot-grid {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1px);
            background-size: 34px 34px;
            pointer-events: none;
            mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 100%);
            -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 100%);
        }

        /* ─── 3-COL LAYOUT ─── */
        .hero-grid {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: clamp(2rem, 4vw, 5rem);
            max-width: 1100px;
            width: 100%;
            position: relative;
            z-index: 2;
        }

        /* Entrance items — hidden until JS runs */
        .entrance {
            opacity: 0;
            will-change: transform, opacity;
        }

        .hero-left {
            transform: translateY(24px);
            transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
        }
        .photo-col {
            transform: translateY(24px);
            transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1);
        }
        .hero-right {
            transform: translateY(24px);
            transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
        }
        .entrance.revealed {
            opacity: 1;
            transform: translateY(0);
        }

        /* LEFT */
        .hl-hey {
            font-family: 'DM Mono', monospace;
            font-size: .65rem;
            letter-spacing: .25em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: .9rem;
            display: flex;
            align-items: center;
            gap: .6rem;
        }
        .hl-hey::before {
            content: '';
            width: 28px;
            height: 1px;
            background: var(--gold);
        }

        .hl-greeting {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(2.8rem, 5.5vw, 5.2rem);
            line-height: 1;
            letter-spacing: .02em;
            color: var(--text);
            margin-bottom: .4rem;
        }
        .hl-greeting .hi {
            display: block;
            font-size: clamp(1.4rem, 2.8vw, 2.4rem);
            color: var(--muted);
            letter-spacing: .06em;
        }
        .hl-greeting .name-gold {
            background: linear-gradient(180deg, var(--gold-2) 30%, var(--gold));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .hl-title {
            font-size: clamp(.75rem, 1.4vw, 1rem);
            font-weight: 500;
            color: var(--muted);
            letter-spacing: .08em;
            text-transform: uppercase;
            margin-top: .8rem;
            margin-bottom: 1.6rem;
            line-height: 1.7;
        }

        /* typewriter */
        .hl-type-row {
            display: flex;
            align-items: center;
            gap: .5rem;
            font-family: 'DM Mono', monospace;
            font-size: .72rem;
            color: var(--gold);
            letter-spacing: .05em;
            margin-bottom: 2rem;
        }
        .hl-type-prefix {
            color: var(--muted);
            font-size: .65rem;
        }
        #tw { color: var(--gold); }
        .twc {
            display: inline-block;
            width: 2px;
            height: .85em;
            background: var(--gold);
            margin-left: 2px;
            vertical-align: middle;
            animation: blink 1s step-end infinite;
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        /* tag chips */
        .hl-chips {
            display: flex;
            flex-wrap: wrap;
            gap: .45rem;
        }
        .chip {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            padding: .32rem .8rem;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--surface);
            font-size: .6rem;
            font-weight: 500;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--muted);
            transition: color .25s, border-color .25s, background .25s, transform .25s;
        }
        .chip:hover {
            color: var(--gold);
            border-color: rgba(201, 168, 76, .3);
            background: var(--gold-dim);
            transform: translateY(-2px);
        }
        .chip-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: currentColor;
            flex-shrink: 0;
        }

        /* CENTER: PHOTO */
        .photo-col {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .photo-wrap {
            position: relative;
            width: clamp(200px, 22vw, 280px);
            will-change: transform;
        }
        .photo-frame {
            position: relative;
            width: 100%;
            aspect-ratio: 3/4;
            overflow: hidden;
            border-radius: 6px;
            transition: box-shadow .4s;
        }
        .photo-active .photo-frame {
            box-shadow: 0 12px 60px rgba(201, 168, 76, .25), 0 0 120px rgba(201, 168, 76, .08);
        }
        .photo-frame::before,
        .photo-frame::after,
        .c-tr,
        .c-bl {
            content: '';
            position: absolute;
            width: 18px;
            height: 18px;
            border-color: var(--gold);
            border-style: solid;
            z-index: 10;
            pointer-events: none;
            transition: width .4s, height .4s;
        }
        .photo-frame::before {
            top: -1px;
            left: -1px;
            border-width: 2px 0 0 2px;
            border-radius: 3px 0 0 0;
        }
        .photo-frame::after {
            bottom: -1px;
            right: -1px;
            border-width: 0 2px 2px 0;
            border-radius: 0 0 3px 0;
        }
        .c-tr {
            top: -1px;
            right: -1px;
            border-width: 2px 2px 0 0;
            border-radius: 0 3px 0 0;
        }
        .c-bl {
            bottom: -1px;
            left: -1px;
            border-width: 0 0 2px 2px;
            border-radius: 0 0 0 3px;
        }
        .photo-active .photo-frame::before,
        .photo-active .photo-frame::after,
        .photo-active .c-tr,
        .photo-active .c-bl {
            width: 40px;
            height: 40px;
        }
        .photo-bw,
        .photo-color {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            transition: opacity .6s cubic-bezier(.4, 0, .2, 1);
            user-select: none;
            pointer-events: none;
        }
        .photo-bw { opacity: 1; }
        .photo-color {
            opacity: 0;
            transition: opacity .3s ease;
            -webkit-mask-image: radial-gradient(circle 140px at var(--x, 50%) var(--y, 50%), black 30%, transparent 100%);
            mask-image: radial-gradient(circle 140px at var(--x, 50%) var(--y, 50%), black 30%, transparent 100%);
        }
        .photo-active .photo-color {
            opacity: 1;
            animation: cursor-scan 3s infinite;
        }
        @keyframes cursor-scan {
            0%, 100% { transform: translate(0, 0); filter: hue-rotate(0deg) contrast(100%); }
            5% { transform: translate(-2px, 1px); filter: hue-rotate(30deg) contrast(120%); }
            10% { transform: translate(2px, -1px); filter: hue-rotate(-30deg) contrast(110%); }
            15% { transform: translate(0, 0); filter: hue-rotate(0deg) contrast(100%); }
            50% { transform: translate(0, 0); filter: hue-rotate(0deg) contrast(100%); }
            52% { transform: translate(-1px, 2px); filter: hue-rotate(40deg) contrast(130%); }
            54% { transform: translate(1px, -2px); filter: hue-rotate(-40deg) contrast(110%); }
            56% { transform: translate(0, 0); filter: hue-rotate(0deg) contrast(100%); }
        }
        .photo-frame .scan {
            position: absolute;
            inset: 0;
            z-index: 6;
            pointer-events: none;
            background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0, 0, 0, .04) 3px, rgba(0, 0, 0, .04) 4px);
        }

        .photo-hint {
            margin-top: 1rem;
            font-family: 'DM Mono', monospace;
            font-size: .55rem;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: rgba(201, 168, 76, .5);
            display: flex;
            align-items: center;
            gap: .4rem;
            opacity: 0;
            animation: riseIn .7s 1.3s forwards;
        }
        .hint-icon { animation: wiggle 2.5s ease-in-out infinite; }
        @keyframes wiggle {
            0%, 100% { transform: rotate(0); }
            25% { transform: rotate(-12deg); }
            75% { transform: rotate(12deg); }
        }

        .avail-badge {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            background: var(--gold-dim);
            border: 1px solid rgba(201, 168, 76, .2);
            border-radius: 999px;
            padding: .28rem .8rem;
            font-size: .58rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 1rem;
            opacity: 0;
            animation: riseIn .7s 1s forwards;
        }
        .badge-dot {
            width: 5px;
            height: 5px;
            background: var(--gold);
            border-radius: 50%;
            position: relative;
        }
        .badge-dot::after {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 1px solid var(--gold);
            opacity: 0;
            animation: ringPulse 1.8s ease-out infinite;
        }
        @keyframes ringPulse {
            0% { transform: scale(.8); opacity: .8; }
            100% { transform: scale(2.4); opacity: 0; }
        }

        /* RIGHT */
        .hr-label {
            font-family: 'DM Mono', monospace;
            font-size: .6rem;
            letter-spacing: .25em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 1.2rem;
            display: flex;
            align-items: center;
            gap: .5rem;
        }
        .hr-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(201, 168, 76, .2);
        }

        .hr-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(1.6rem, 2.8vw, 2.6rem);
            letter-spacing: .04em;
            line-height: 1.1;
            margin-bottom: 1.2rem;
            color: var(--text);
        }

        .hr-bio {
            font-size: clamp(.78rem, 1.2vw, .9rem);
            color: var(--muted);
            line-height: 1.8;
            margin-bottom: 1.6rem;
        }
        .hr-bio strong { color: var(--text); font-weight: 600; }

        .hr-stats {
            display: flex;
            gap: 1.4rem;
            padding: 1.1rem 0;
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            margin-bottom: 1.6rem;
        }
        .hr-stat-num {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1.8rem;
            letter-spacing: .04em;
            color: var(--gold);
            display: block;
            line-height: 1;
        }
        .hr-stat-lbl {
            font-size: .58rem;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--muted);
            margin-top: .2rem;
        }

        .scroll-cta {
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            font-size: .66rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--muted);
            text-decoration: none;
            transition: color .3s;
            cursor: none;
        }
        .scroll-cta:hover { color: var(--gold); }
        .arr { animation: bob 2s ease-in-out infinite; display: inline-block; }
        @keyframes bob {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(5px); }
        }
        @keyframes riseIn {
            from { opacity: 0; transform: translateY(24px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ─── LINKS SECTION ─── */
        #links {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: clamp(5rem, 10vh, 9rem) 1.5rem clamp(3rem, 6vh, 5rem);
            position: relative;
        }
        #links::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 1px;
            height: 100px;
            background: linear-gradient(to bottom, transparent, var(--border));
        }

        .rev {
            opacity: 0;
            transform: translateY(18px) scale(.98);
            transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
        }
        .rev.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .links-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 2px solid rgba(201, 168, 76, .35);
            object-fit: cover;
            object-position: top;
            display: block;
            margin-bottom: 1rem;
            box-shadow: 0 0 24px var(--gold-glow);
        }

        .links-name {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(1.8rem, 4vw, 2.6rem);
            letter-spacing: .04em;
            text-align: center;
            margin-bottom: .4rem;
        }

        .links-handle {
            font-size: .68rem;
            letter-spacing: .12em;
            color: var(--gold);
            text-align: center;
            margin-bottom: .6rem;
        }

        .links-bio-short {
            font-size: .75rem;
            color: var(--muted);
            text-align: center;
            max-width: 320px;
            line-height: 1.65;
            margin-bottom: 2.5rem;
        }

        .link-list {
            display: flex;
            flex-direction: column;
            gap: .7rem;
            width: 100%;
            max-width: 480px;
        }

        .lk {
            position: relative;
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.2rem;
            border-radius: 16px;
            background: var(--surface);
            border: 1px solid var(--border);
            text-decoration: none;
            color: var(--text);
            font-size: .9rem;
            font-weight: 500;
            letter-spacing: .01em;
            overflow: hidden;
            cursor: none;
            transition: background .25s, border-color .25s, transform .2s, box-shadow .25s;
        }
        .lk:hover {
            background: var(--surface-hover);
            transform: translateY(-2px) scale(1.01);
            box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
            border-color: rgba(255, 255, 255, .13);
        }
        .lk:active { transform: scale(.98); }
        .lk::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .05) 50%, transparent 60%);
            background-size: 200% 100%;
            background-position: -100% 0;
            transition: background-position .5s;
        }
        .lk:hover::before { background-position: 100% 0; }
        .lk::after {
            content: '';
            position: absolute;
            left: 0;
            top: 12px;
            bottom: 12px;
            width: 3px;
            border-radius: 0 3px 3px 0;
            background: var(--lk-color, var(--gold));
            opacity: 0;
            transition: opacity .25s;
        }
        .lk:hover::after { opacity: 1; }

        .lk-icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: var(--lk-color, var(--gold));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
            box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
            transition: transform .25s;
        }
        .lk:hover .lk-icon { transform: scale(1.08) rotate(-4deg); }

        .lk-text { flex: 1; }
        .lk-title {
            font-size: .9rem;
            font-weight: 600;
            line-height: 1.2;
        }
        .lk-sub {
            font-size: .68rem;
            color: var(--muted);
            margin-top: .15rem;
            font-weight: 400;
        }
        .lk-arr {
            font-size: .8rem;
            color: var(--muted);
            transition: transform .25s, color .25s;
        }
        .lk:hover .lk-arr {
            transform: translateX(3px);
            color: var(--text);
        }

        .lk-section-label {
            font-size: .58rem;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: var(--muted);
            align-self: flex-start;
            margin-top: .5rem;
            margin-bottom: -.1rem;
            padding-left: .2rem;
        }

        .social-row {
            display: flex;
            gap: .6rem;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 2rem;
            max-width: 480px;
            width: 100%;
        }

        .soc {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            padding: .45rem 1rem;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--surface);
            font-size: .67rem;
            font-weight: 500;
            letter-spacing: .06em;
            text-decoration: none;
            color: var(--muted);
            transition: color .25s, border-color .25s, background .25s, transform .2s;
            cursor: none;
        }
        .soc:hover {
            color: var(--text);
            border-color: rgba(255, 255, 255, .18);
            background: var(--surface-hover);
            transform: translateY(-2px);
        }

        footer {
            text-align: center;
            padding: 2.5rem 2rem;
            font-size: .6rem;
            letter-spacing: .16em;
            color: rgba(240, 236, 230, .18);
            text-transform: uppercase;
        }

        /* ─── RESPONSIVE ─── */
        @media(max-width:900px) {
            #cur,
            #cur-ring,
            #cur-trail { display: none; }
            body { cursor: auto; }

            #hero {
                padding: 5rem 1.4rem 3.5rem;
                align-items: flex-start;
            }
            .hero-grid {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto;
                gap: 0;
                text-align: center;
            }
            .hero-left { order: 1; margin-bottom: 2rem; }
            .photo-col { order: 2; margin-bottom: 2rem; }
            .hero-right { order: 3; }

            .hl-hey {
                justify-content: center;
                font-size: .6rem;
                margin-bottom: .65rem;
            }
            .hl-hey::before { display: none; }

            .hl-greeting {
                font-size: clamp(3.4rem, 14vw, 5rem);
                line-height: .95;
                margin-bottom: .5rem;
            }
            .hl-greeting .hi {
                font-size: clamp(1.2rem, 5.5vw, 1.8rem);
                letter-spacing: .06em;
                margin-bottom: .15rem;
            }
            .hl-title {
                font-size: clamp(.85rem, 3.8vw, 1.05rem);
                letter-spacing: .03em;
                margin-top: .6rem;
                margin-bottom: 1.2rem;
                line-height: 1.55;
            }
            .hl-type-row {
                justify-content: center;
                font-size: .78rem;
                margin-bottom: 1.4rem;
            }
            .hl-chips {
                justify-content: center;
                gap: .4rem;
            }
            .chip { font-size: .58rem; padding: .28rem .7rem; }

            .photo-col { display: flex; flex-direction: column; align-items: center; }
            .photo-wrap { width: clamp(210px, 68vw, 290px); }
            .avail-badge { font-size: .56rem; margin-bottom: .9rem; }
            .photo-hint { font-size: .52rem; margin-top: .9rem; }

            .hr-label {
                justify-content: center;
                font-size: .58rem;
                margin-bottom: .9rem;
            }
            .hr-label::after { display: none; }
            .hr-title {
                font-size: clamp(1.7rem, 7.5vw, 2.3rem);
                margin-bottom: .9rem;
            }
            .hr-bio {
                font-size: clamp(.8rem, 3.4vw, .9rem);
                line-height: 1.78;
                max-width: 420px;
                margin: 0 auto 1.4rem;
            }
            .hr-stats {
                justify-content: center;
                gap: 1.8rem;
                padding: .9rem 0;
                margin-bottom: 1.4rem;
            }
            .hr-stat-num { font-size: 2rem; }
            .scroll-cta { display: flex; justify-content: center; font-size: .62rem; }

            .pt-logo { font-size: 2rem; }
        }

        @media(max-width:390px) {
            .hl-greeting { font-size: clamp(2.9rem, 13vw, 3.7rem); }
            .photo-wrap { width: clamp(185px, 72vw, 240px); }
            .hr-bio { font-size: .77rem; }
        }

        /* ─── SITE PREVIEW ─── */
        #site-preview {
            position: fixed;
            width: 320px;
            aspect-ratio: 16/10;
            border-radius: 12px;
            overflow: hidden;
            z-index: 10000;
            pointer-events: none;
            opacity: 0;
            transform: scale(0.8) translateY(20px);
            transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
            background: var(--bg);
        }
        #site-preview.active {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
        #site-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        #site-preview .preview-glow {
            position: absolute;
            inset: 0;
            box-shadow: inset 0 0 40px rgba(201, 168, 76, 0.1);
            pointer-events: none;
        }
        @media(max-width:900px) {
            #site-preview { display: none; }
        }