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

:root {
    --bg: #01000d;
    --fg:#ffffff ;
    --muted: #F5F5F7;                          /* ↑ from #888888 — WCAG AA compliant */
    --dim: rgba(245, 245, 247, .40);           /* ↑ from .18 — readable */
    --border: rgba(245, 245, 247, .08);
    --border-h: rgba(245, 245, 247, .22);
    --accent: #A29BFE;
    --accent-dim: rgba(162, 155, 254, .12);
    --accent-dynamic: #E63946;
    --fd: 'Syne', sans-serif;
    --fb: 'DM Sans', sans-serif;
    --mono: 'Space Mono', monospace;
    --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --pad: 7%;

    /* ── PROJECT COLORS ── */
    --project-1: #E63946;   /* Vibrant Red     — Family of Eateries */
    --project-2: #F77F00;   /* Bright Orange   — Gemini Product Promo */
    --project-3: #FCBF49;   /* Golden Yellow   — Atlas Travels Japan */
    --project-4: #D9D617;   /* Trail Yellow    — Retail Installation */
    --project-5: #0077B6;   /* Ocean Blue      — Trailmark Branding */
    --project-6: #5B5CE2;   /* Electric Indigo — Velox Dashboard */
    --project-7: #E8A020;   /* Amber Gold      — DC Web Dev Program */
    --project-8: #00D9FF;   /* Teal/Cyan       — Durham College Signage */
}

html {
    scroll-behavior: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--fb);
    overflow-x: hidden
}

::-webkit-scrollbar {
    width: 2px
}

::-webkit-scrollbar-track {
    background: var(--bg)
}

::-webkit-scrollbar-thumb {
    background: var(--accent-dynamic);
    opacity: .7
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-dynamic) var(--bg)
}

/* ─────────────────────────────────────
   SKIP LINK
───────────────────────────────────── */
.skip-link {
    position: fixed;
    top: -100%;
    left: 16px;
    z-index: 10000;
    background: var(--fg);
    color: var(--bg);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 12px 20px;
    text-decoration: none;
    transition: top .2s
}

.skip-link:focus {
    top: 16px
}

/* ─────────────────────────────────────
   FOCUS VISIBLE — universal ring
───────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px
}

/* ─────────────────────────────────────
   CURSOR — fine pointer devices only
───────────────────────────────────── */
#cur,
#cur-ring {
    display: none
}

@media(hover:hover) and (pointer:fine) {
    body {
        cursor: none
    }

    #cur {
        display: block;
        position: fixed;
        width: 6px;
        height: 6px;
        background: var(--fg);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        mix-blend-mode: difference;
        transition: width .3s var(--ease), height .3s var(--ease)
    }

    #cur-ring {
        display: block;
        position: fixed;
        width: 36px;
        height: 36px;
        border: 1px solid rgba(245, 245, 247, .35);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9998;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: width .3s var(--ease), height .3s var(--ease), opacity .3s
    }

    #cur-ring.show {
        opacity: 1
    }

    #cur.active {
        width: 44px;
        height: 44px
    }

    #cur-ring.active {
        width: 48px;
        height: 48px;
        opacity: .45
    }

    a,
    button,
    [role="button"],
    .pc,
    .sk {
        cursor: none
    }
}



/* ---------------  */
/* HERO - GRADIENT  */
/* --------------   */
.gradient-glow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Covers the whole panel */
    z-index: 1;
    /* Black at top, transparent/colored at bottom */
    background: linear-gradient(to bottom,
            rgba(5, 5, 5, 1) 30%,
            rgba(5, 5, 5, 0.6) 80%,
            rgba(0, 122, 255) 100%);
    pointer-events: none;
    filter: blur(100px);
    /* Softens the light */
}



.word-rotator {
    display: inline-block;
    position: relative;
    vertical-align: top;
    overflow: hidden;
    height: 1.1em;
    /* Ensures only one word shows at a time */
}

.rotating-word {
    display: inline-block;
}

.letter {
    display: inline-block;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}


/* ---------------  */
/* HERO - GRID      */
/* --------------   */
#grid-container {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 6%;
    pointer-events: none;
}

.dynamic-line {
    width: 1px;
    height: 100%;
    background: var(--line);
    position: relative;
}

.glow-streak {
    position: absolute;
    top: -200px;
    left: -1px;
    width: 3px;
    height: 200px;
    background: linear-gradient(to bottom, transparent, #fff);
    filter: blur(1px) drop-shadow(0 0 5px #fff);
    opacity: 0;
}

/* Content Styling */
.hero-content {
    text-align: center;
    z-index: 10;
}

.hero-content h1 {
    font-size: clamp(4rem, 10vw, 4rem);
    line-height: 0.9;
}

.tagline {
    font-size: 4rem;
    letter-spacing: 2%;
    margin-bottom: 20px;
    font-weight: 100;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.8) 60%,
            rgba(255, 255, 255, 0) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* ─────────────────────────────────────
   OVERLAY
───────────────────────────────────── */
#overlay {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 7777;
    transform: translateY(0);
    pointer-events: none;
    will-change: transform
}

/* ─────────────────────────────────────
   LOADER
───────────────────────────────────── */
#loader {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 8888;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 40px var(--pad);
    pointer-events: all
}

#lnum {
    font-family: var(--fd);
    font-size: clamp(80px, 18vw, 220px);
    font-weight: 800;
    line-height: 1;
    color: var(--fg);
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums
}

#llabel {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    align-self: flex-end;
    padding-bottom: 12px
}

#lbar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    background: var(--fg);
    width: 0;
    will-change: width
}

/* ─────────────────────────────────────
   HEADER
───────────────────────────────────── */
#hdr {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px var(--pad);
    z-index: 1000;
    pointer-events: none;
    transition: padding .35s var(--ease)
}

#hdr::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(13, 13, 13, .9) 0%, transparent 100%);
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none;
    z-index: -1
}

#hdr.compact {
    padding: 14px var(--pad)
}

#hdr.compact::before {
    opacity: 1
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    pointer-events: auto;
    flex-shrink: 0
}

.logo svg {
    width: 28px;
    height: 28px;
    display: block
}

.logo model-viewer {
    width: 44px;
    height: 44px;
    background: transparent;
    --poster-color: transparent;
    display: block
}

nav {
    display: flex;
    align-items: center;
    pointer-events: auto
}

.fl {
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
    height: 18px;
    margin-left: 40px;
    position: relative
}

.fw {
    display: block;
    transition: transform .4s cubic-bezier(0.6, 0.01, 0.05, 0.95)
}

.ff,
.fb {
    display: block;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg);
    line-height: 18px;
    font-weight: 400;
    white-space: nowrap;
    transition: color .3s
}

.fb {
    position: absolute;
    top: 100%;
    left: 0;
    font-weight: 700
}

.fl:hover .fw {
    transform: translateY(-100%)
}

.fl:hover .ff,
.fl:hover .fb {
    color: var(--accent-dynamic)
}

/* ─────────────────────────────────────
   MOBILE NAV TOGGLE
───────────────────────────────────── */
#nav-toggle {
    display: none;
    pointer-events: auto;
    background: none;
    border: none;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
    width: 40px;
    height: 40px;
    justify-content: center
}

#nav-toggle span {
    display: block;
    height: 1px;
    background: var(--fg);
    transition: transform .38s var(--ease), opacity .25s, width .38s var(--ease)
}

#nav-toggle span:nth-child(1) {
    width: 22px
}

#nav-toggle span:nth-child(2) {
    width: 14px
}

#nav-toggle.open span:nth-child(1) {
    width: 22px;
    transform: translateY(6px) rotate(45deg)
}

#nav-toggle.open span:nth-child(2) {
    width: 22px;
    transform: translateY(0) rotate(-45deg)
}

/* ─────────────────────────────────────
   MOBILE NAV OVERLAY
───────────────────────────────────── */
#mobile-nav {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px var(--pad);
    pointer-events: none;
    opacity: 0;
    transform: translateX(8%);
    transition: opacity .4s var(--ease), transform .45s var(--ease-out);
    visibility: hidden
}

#mobile-nav.open {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
    visibility: visible
}

.mnav-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 56px
}

.mnav-links a {
    font-family: var(--fd);
    font-size: clamp(40px, 11vw, 72px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--fg);
    text-decoration: none;
    opacity: 0;
    transform: translateX(24px);
    transition: color .25s, opacity .4s var(--ease), transform .45s var(--ease-out)
}

#mobile-nav.open .mnav-links a {
    opacity: 1;
    transform: translateX(0)
}

#mobile-nav.open .mnav-links a:nth-child(1) {
    transition-delay: .07s
}

#mobile-nav.open .mnav-links a:nth-child(2) {
    transition-delay: .13s
}

#mobile-nav.open .mnav-links a:nth-child(3) {
    transition-delay: .19s
}

.mnav-links a:hover {
    color: var(--accent)
}

.mnav-foot {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dim)
}

/* ─────────────────────────────────────
   HERO
───────────────────────────────────── */
#hero {
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: clamp(40px, 6vw, 80px);
    overflow: hidden;
    position: relative
}

.h-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 5;
    pointer-events: none;
    opacity: 1;
    padding: 1%
}

.h-golden {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    pointer-events: none;
}

#h-glow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none
}

.h-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(245, 245, 247, .05) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
    z-index: 2;
    will-change: transform
}

.h-fade {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 60%, transparent 20%, var(--bg) 75%);
    pointer-events: none;
    z-index: 3
}

.h-vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--bg) 0%, transparent 18%, transparent 72%, var(--bg) 100%);
    pointer-events: none;
    z-index: 4
}

.h-inner {
    position: relative;
    z-index: 10;
    padding: 0 var(--pad)
}

.h-eye {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 20px;
    opacity: 0;
    display: flex;
    align-items: center;
    gap: 16px
}

.h-eye::before {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: currentColor;
    flex-shrink: 0
}

h1.h-name {
    font-family: var(--fd);
    font-size: clamp(28px, 8vw, 176px);
    font-weight: 800;
    line-height: .92;
    letter-spacing: -0.05em;
    color: var(--fg);
    word-break: keep-all;
    overflow: visible
}

.h-line {
    display: block;
    overflow: hidden
}

.h-line span {
    display: block;
    transform: translateY(110%);
    will-change: transform
}

.h-row2 {
    display: flex;
    align-items: flex-end;
    gap: clamp(10px, 1.5vw, 20px);
    flex-wrap: nowrap
}

.h-tag {
    font-family: var(--mono);
    font-size: clamp(10px, 1vw, 13px);
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--border-h);
    padding: 7px 12px;
    white-space: nowrap;
    align-self: flex-end;
    margin-bottom: clamp(5px, 1vw, 14px);
    opacity: 0;
    flex-shrink: 0
}

.h-bot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-top: clamp(24px, 3.5vw, 48px);
    opacity: 0
}

.h-bio {
    font-size: clamp(14px, 1.2vw, 16px);
    font-weight: 300;
    line-height: 1.8;
    color: var(--muted);
    max-width: 380px
}

.h-bio strong {
    color: var(--fg);
    font-weight: 400
}

.h-ctas {
    display: flex;
    gap: 10px;
    flex-shrink: 0
}

.scrl {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 10;
    opacity: 0;
    pointer-events: none
}

.scrl-txt {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dim)
}

.scrl-ln {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--dim));
    animation: sa 1.9s ease-in-out infinite
}

@keyframes sa {
    0% {
        transform: scaleY(0);
        transform-origin: top
    }

    50% {
        transform: scaleY(1);
        transform-origin: top
    }

    51% {
        transform: scaleY(1);
        transform-origin: bottom
    }

    100% {
        transform: scaleY(0);
        transform-origin: bottom
    }
}

/* ─────────────────────────────────────
   BUTTONS — shared base
───────────────────────────────────── */
.btn-p,
.btn-g,
.btn-sub {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap
}

.btn-p {
    color: var(--bg);
    background: var(--fg);
    padding: 13px 28px;
    border: none;
    transition: opacity .2s, transform .2s var(--ease)
}

.btn-p:hover {
    opacity: .85;
    transform: translateY(-1px)
}

.btn-p:active {
    transform: translateY(0)
}

.btn-g {
    color: var(--fg);
    background: transparent;
    padding: 12px 27px;
    border: 1px solid var(--border-h);
    transition: border-color .25s, color .25s, background .25s
}

.btn-g:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim)
}

.btn-sub {
    align-self: flex-start;
    color: var(--bg);
    background: var(--fg);
    padding: 14px 36px;
    border: none;
    transition: opacity .2s, transform .2s var(--ease);
    margin-top: 6px
}

.btn-sub:hover {
    opacity: .85;
    transform: translateY(-1px)
}

.btn-sub:active {
    transform: translateY(0)
}

/* ─────────────────────────────────────
   MARQUEE
───────────────────────────────────── */
.mq {
    width: 100%;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    height: 40px;
    display: flex;
    align-items: center
}

.mq + .mq {
    margin-top: 2px;
    border-top: none
}

.mq-inner {
    display: flex;
    white-space: nowrap;
    will-change: transform;
    flex-shrink: 0
}

.mq-inner span {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
    padding: 0 26px;
    flex-shrink: 0
}

.mq-inner span::before {
    content: '✦';
    margin-right: 26px;
    color: var(--accent);
    opacity: .55
}

/* ─────────────────────────────────────
   PROJECTS
───────────────────────────────────── */
#projects {
    padding: clamp(80px, 10vw, 140px) 0 0
}

.sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 32px;
    padding: 0 var(--pad)
}

.sec-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 10px
}

.sec-title {
    font-family: var(--fd);
    font-size: clamp(28px, 5vw, 68px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1
}

.proj-count {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 4px
}

.pgrid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    padding: 0 var(--pad)
}

/* ── ASYMMETRIC 3+2+3 PATTERN ── */
.pc {
    grid-column: span 4
}

/* ROW 1: 3 cards (4 cols each) */
.pc:nth-child(1) {
    grid-column: span 4
}

.pc:nth-child(2) {
    grid-column: span 4
}

.pc:nth-child(3) {
    grid-column: span 4
}

/* ROW 2: 2 cards (6 cols each) */
.pc:nth-child(4) {
    grid-column: span 6
}

.pc:nth-child(5) {
    grid-column: span 6
}

/* ROW 3: 3 cards (4 cols each) */
.pc:nth-child(6) {
    grid-column: span 4
}

.pc:nth-child(7) {
    grid-column: span 4
}

.pc:nth-child(8) {
    grid-column: span 4
}

.pl {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden
}

.pm {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #111
}

.pc:nth-child(2) .pm {
    aspect-ratio: 16/9
}

.pc:nth-child(6) .pm {
    aspect-ratio: 16/9
}

.pm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(.82);
    transition: transform .9s var(--ease-out), filter .5s
}

.pm video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .55s var(--ease);
    z-index: 2;
    pointer-events: none
}

.pc:hover .pm img {
    transform: scale(1.04);
    filter: brightness(.65)
}

.pc:hover .pm video {
    opacity: 1
}

.pm::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .18);
    opacity: 0;
    transition: opacity .4s;
    z-index: 3;
    pointer-events: none
}

/* Idle state for GIF cards — subtle play hint */
.pm.has-gif::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 1px solid rgba(245,245,247,.18);
    border-radius: 50%;
    background: rgba(245,245,247,.06);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolygon fill='rgba(245,245,247,0.5)' points='4,2 10,6 4,10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    z-index: 2;
    pointer-events: none;
    transition: opacity .3s
}

.pc:hover .pm.has-gif::before {
    opacity: 0
}

.pc:hover .pm::after {
    opacity: 1
}

.pi {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: clamp(16px, 2vw, 24px) clamp(14px, 1.5vw, 20px) clamp(14px, 1.5vw, 18px);
    background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, transparent 100%);
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    transform: translateY(5px);
    transition: transform .4s var(--ease)
}

.pc:hover .pi {
    transform: translateY(0)
}

.p-num {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .45);  /* ↑ from .28 */
    display: block;
    margin-bottom: 4px
}

.p-title {
    font-family: var(--fd);
    font-size: clamp(12px, 1.4vw, 18px);
    font-weight: 600;
    color: #fff;
    margin-bottom: 3px;
    line-height: 1.2
}

.p-tags {
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(255, 255, 255, .55);  /* ↑ from .35 */
    letter-spacing: .04em
}

.p-arr {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transform: translate(5px, 5px);
    transition: opacity .35s var(--ease), transform .35s var(--ease), border-color .25s, color .25s
}

/* Arrow color assignments */
.pc:nth-child(1) .p-arr {
    color: var(--project-1)
}

.pc:nth-child(2) .p-arr {
    color: var(--project-2)
}

.pc:nth-child(3) .p-arr {
    color: var(--project-3)
}

.pc:nth-child(4) .p-arr {
    color: var(--project-4)
}

.pc:nth-child(5) .p-arr {
    color: var(--project-5)
}

.pc:nth-child(6) .p-arr {
    color: var(--project-6)
}

.pc:nth-child(7) .p-arr {
    color: var(--project-7)
}

.pc:nth-child(8) .p-arr {
    color: var(--project-8)
}


.pc:hover .p-arr {
    opacity: 1;
    transform: translate(0, 0)
}

.p-arr svg {
    width: 10px;
    height: 10px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.p-stroke {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--project-1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 6
}

/* Project color assignments */
.pc:nth-child(1) .p-stroke {
    background: var(--project-1)
}

.pc:nth-child(2) .p-stroke {
    background: var(--project-2)
}

.pc:nth-child(3) .p-stroke {
    background: var(--project-3)
}

.pc:nth-child(4) .p-stroke {
    background: var(--project-4)
}

.pc:nth-child(5) .p-stroke {
    background: var(--project-5)
}

.pc:nth-child(6) .p-stroke {
    background: var(--project-6)
}

.pc:nth-child(7) .p-stroke {
    background: var(--project-7)
}

.pc:nth-child(8) .p-stroke {
    background: var(--project-8)
}


.pc:hover .p-stroke {
    transform: scaleX(1)
}

.vbadge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 9px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(0, 0, 0, .35);
    color: rgba(255, 255, 255, .5);
    z-index: 6;
    opacity: 0;
    transition: opacity .3s
}

.pc:hover .vbadge.has-video {
    opacity: 1
}

/* ─────────────────────────────────────
   ABOUT
───────────────────────────────────── */
#about {
    padding: clamp(80px, 10vw, 140px) var(--pad)
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
    margin-bottom: clamp(60px, 8vw, 100px)
}

.ab-manifesto {
    font-family: var(--fd);
    font-size: clamp(22px, 3.2vw, 48px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 28px
}

.ab-manifesto em {
    font-style: italic;
    font-family: var(--fb);
    font-weight: 300;
    color: var(--muted);
    font-size: .88em
}

.ab-bio {
    font-size: clamp(14px, 1.2vw, 15px);
    font-weight: 300;
    line-height: 1.82;
    color: var(--muted);
    margin-bottom: 32px
}

.ab-bio strong {
    color: var(--fg);
    font-weight: 400
}

.ab-right {
    display: flex;
    flex-direction: column
}

.sk-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 24px
}

.sk-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.sk-sep {
    width: 100%;
    height: 1px;
    background: var(--border);
    margin: 18px 0
}

.sk {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--border);
    padding: 6px 11px;
    transition: color .22s, border-color .22s
}

.sk:hover {
    color: var(--fg);
    border-color: var(--accent-dynamic)
}

/* ─────────────────────────────────────
   CONTACT
───────────────────────────────────── */
#contact {
    padding: clamp(80px, 10vw, 140px) var(--pad);
    border-top: 1px solid var(--border)
}

.ct-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 88px);
    align-items: start
}

.ct-headline {
    font-family: var(--fd);
    font-size: clamp(32px, 5.5vw, 84px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: .92;
    margin-bottom: 26px
}

.ct-sub {
    font-size: clamp(13px, 1.1vw, 15px);
    font-weight: 300;
    line-height: 1.8;
    color: var(--muted);
    max-width: 340px;
    margin-bottom: 40px
}

.ct-email {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fd);
    font-size: clamp(13px, 1.6vw, 21px);
    font-weight: 700;
    color: var(--fg);
    text-decoration: none;
    border-bottom: 1px solid var(--border-h);
    padding-bottom: 14px;
    margin-bottom: 28px;
    transition: border-color .25s, color .25s;
    word-break: break-all
}

.ct-email:hover {
    border-color: var(--accent);
    color: var(--accent)
}

.ea {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-h);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .3s var(--ease)
}

.ct-email:hover .ea {
    transform: translate(3px, -3px)
}

.ea svg {
    width: 9px;
    height: 9px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.ct-socials {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.soc {
    font-family: var(--mono);
    width: 44px;    /* ↑ from 38px — meets 44px tap target */
    height: 44px;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .04em;
    transition: border-color .2s, color .2s, background .2s
}

.soc:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim)
}

.cf {
    display: flex;
    flex-direction: column;
    gap: 26px
}

.ff2 {
    position: relative
}

.ff2 label {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px
}

.ff2 input,
.ff2 textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-h);
    color: var(--fg);
    font-family: var(--fb);
    font-size: 15px;
    font-weight: 300;
    padding: 10px 0;
    outline: none;
    transition: border-color .25s;
    resize: none;
    caret-color: var(--accent)
}

.ff2 input::placeholder,
.ff2 textarea::placeholder {
    color: var(--dim)
}

.ff2 input:focus,
.ff2 textarea:focus {
    border-bottom-color: transparent
}

.ff2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width .4s var(--ease)
}

.ff2:focus-within::after {
    width: 100%
}

.ff2 input[aria-invalid="true"],
.ff2 textarea[aria-invalid="true"] {
    border-bottom-color: rgba(255, 80, 80, .55)
}

/* FORM STATUS */
#form-status {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    min-height: 18px
}

/* ─────────────────────────────────────
   FOOTER
───────────────────────────────────── */
footer {
    border-top: 1px solid var(--border);
    padding: clamp(24px, 3vw, 40px) var(--pad)
}

.ft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap
}

.ft-logo {
    font-family: var(--fd);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em
}

.ft-nav {
    display: flex;
    gap: 24px;
    flex-wrap: wrap
}

.ft-nav a {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color .2s
}

.ft-nav a:hover {
    color: var(--accent)
}

.ft-copy {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--dim);
    letter-spacing: .04em
}

.btn-top {
    background: none;
    border: none;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: color .2s;
    padding: 0
}

.btn-top:hover {
    color: var(--accent)
}

/* ─────────────────────────────────────
   SCROLL REVEAL CLASS
───────────────────────────────────── */
.rv {
    opacity: 0;
    transform: translateY(24px)
}

/* ─────────────────────────────────────
   RESPONSIVE
───────────────────────────────────── */
@media(max-width:1024px) {
    .pgrid {
        grid-template-columns: repeat(2, 1fr)
    }

    .pc,
    .pc:nth-child(n) {
        grid-column: span 1
    }

    .pc:nth-child(odd) {
        grid-column: span 1
    }

    .pc:nth-child(even) {
        grid-column: span 1
    }

    .pc:nth-child(2) .pm,
    .pc:nth-child(6) .pm {
        aspect-ratio: 16/9
    }

    .about-grid,
    .ct-grid {
        grid-template-columns: 1fr;
        gap: clamp(36px, 5vw, 56px)
    }
}

@media(max-width:768px) {
    :root {
        --pad: 5%
    }

    nav {
        display: none
    }

    #nav-toggle {
        display: flex
    }

    h1.h-name {
        white-space: normal;
        word-break: break-word
    }

    .h-tag {
        display: none
    }

    .h-bot {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px
    }

    .h-ctas {
        width: 100%
    }

    .btn-p,
    .btn-g {
        flex: 1;
        text-align: center;
        padding: 13px 16px
    }

    .pgrid {
        grid-template-columns: 1fr
    }

    .pc,
    .pc:nth-child(n) {
        grid-column: span 1
    }

    .pc:nth-child(6) .pm {
        aspect-ratio: 16/9
    }

    .ab-right {
        flex-direction: row;
        flex-wrap: wrap
    }

    .ab-stat {
        flex: 1;
        min-width: 90px;
        border-right: 1px solid var(--border);
        border-top: none;
        padding: 0 12px 20px 0
    }

    .ab-stat:last-child {
        border-right: none;
        border-bottom: none
    }

    .ab-stat:first-child {
        border-top: 1px solid var(--border);
        padding-top: 20px
    }

    .ft {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px
    }

    .ft-nav {
        justify-content: center
    }

    .scrl {
        display: none
    }
}

@media(max-width:640px) {
    .ct-grid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .ab-right {
        flex-direction: column
    }

    .ab-stat {
        border-right: none;
        border-top: 1px solid var(--border);
        border-bottom: none;
        padding: 16px 0
    }

    .ab-stat:last-child {
        border-bottom: 1px solid var(--border)
    }
}

@media(max-width:375px) {
    h1.h-name {
        font-size: clamp(24px, 7vw, 40px)
    }

    .h-ctas {
        flex-direction: column
    }

    .btn-p,
    .btn-g {
        width: 100%;
        text-align: center
    }
}

/* ─────────────────────────────────────
   REDUCED MOTION
───────────────────────────────────── */
@media(prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

    .scrl-ln {
        animation: none
    }
}