/* ================================================================
   DESIGN TOKENS - dark mode (default)
   ================================================================ */
:root,
[data-theme="dark"] {
    --bg:            #080808;
    --surface:       #111111;
    --surface-hover: #161616;
    --border:        #1e1e1e;
    --border-hover:  #2e2e2e;

    --text:          #ffffff;
    --text-muted:    #888888;
    --text-subtle:   #444444;

    /* Warm pink, matches the design reference */
    --accent:        #f472b6;
    --accent-rgb:    244, 114, 182;
    --accent-dim:    rgba(244, 114, 182, 0.15);
    --accent-hover:  #ec4899;

    /* Nav */
    --nav-bg:        rgba(8, 8, 8, 0.88);
    --nav-btn-hover: rgba(255, 255, 255, 0.06);

    /* Typography */
    --font-serif:    'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-sans:     'Inter', system-ui, -apple-system, sans-serif;

    /* Spacing */
    --section-gap:   120px;
    --container:     1200px;
    --gutter:        48px;

    /* Motion */
    --ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --duration:      0.25s;
}

/* ================================================================
   DESIGN TOKENS - light mode
   ================================================================ */
[data-theme="light"] {
    --bg:            #f4f4f2;
    --surface:       #ffffff;
    --surface-hover: #f8f8f7;
    --border:        #e4e4e0;
    --border-hover:  #cecece;

    --text:          #0c0c0c;
    --text-muted:    #5c5c5c;
    --text-subtle:   #b0b0b0;

    /* Deeper warm pink for contrast on white */
    --accent:        #db2777;
    --accent-rgb:    219, 39, 119;
    --accent-dim:    rgba(219, 39, 119, 0.10);
    --accent-hover:  #be185d;

    --nav-bg:        rgba(244, 244, 242, 0.92);
    --nav-btn-hover: rgba(0, 0, 0, 0.05);
}

/* Smooth theme transitions on key containers */
body,
.nav,
.about-card,
.about-bio,
.process-step,
.process-grid,
.project-card,
.card-body,
.card-footer,
.footer {
    transition:
        background-color 0.3s ease,
        border-color     0.3s ease,
        color            0.3s ease,
        box-shadow       0.3s ease;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px; /* offset for fixed nav */
}

body {
    background:  var(--bg);
    color:       var(--text);
    font-family: var(--font-sans);
    font-size:   16px;
    line-height: 1.6;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul  { list-style: none; }

/* Pink italic style - used inside headings and body copy */
em {
    font-style:  italic;
    color:       var(--accent);
    font-family: var(--font-serif);
}

/* Uppercase spaced label - e.g. "SELECTED WORK", "PRODUCT DESIGNER" */
.label {
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 0.18em;
    color:          var(--accent);
    text-transform: uppercase;
    font-family:    var(--font-sans);
}

/* Centred max-width wrapper */
.container {
    max-width: var(--container);
    margin:    0 auto;
    padding:   0 var(--gutter);
}


/* ================================================================
   NAVIGATION
   ================================================================ */
.nav {
    position:   fixed;
    inset-inline: 0;
    top:        0;
    z-index:    200;
    padding:    0;
    transition: background var(--duration) var(--ease),
                border-color var(--duration) var(--ease);
    border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
    background:    var(--nav-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color:  var(--border);
}

.nav-inner {
    max-width: 1380px;
    margin:    0 auto;
    padding:   0 16px;
    height:    72px;
    display:   flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.nav-logo {
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 0.14em;
    color:          var(--text);
    transition:     opacity var(--duration) var(--ease);
    flex-shrink: 0;
}
.nav-logo:hover { opacity: 0.6; }

.nav-links {
    display:     flex;
    align-items: center;
    gap:         36px;
}

.nav-link {
    font-size:   14px;
    font-weight: 400;
    color:       var(--text-muted);
    position:    relative;
    transition:  color var(--duration) var(--ease);
}
.nav-link::after {
    content:       '';
    position:      absolute;
    bottom:        -6px;
    left:          50%;
    transform:     translateX(-50%);
    width:         4px;
    height:        4px;
    border-radius: 50%;
    background:    var(--accent);
    opacity:       0;
    transition:    opacity var(--duration) var(--ease);
}
.nav-link:hover         { color: var(--text); }
.nav-link.is-active::after { opacity: 1; }
.nav-link.is-active     { color: var(--text); }

.btn-cv {
    font-size:     13px;
    font-weight:   500;
    padding:       8px 20px;
    border-radius: 100px;
    border:        1px solid var(--border-hover);
    color:         var(--text);
    transition:    border-color var(--duration) var(--ease),
                   background   var(--duration) var(--ease);
}
.btn-cv:hover {
    border-color: #555;
    background:   var(--nav-btn-hover);
}

/* ================================================================
   THEME TOGGLE - sun / moon button
   ================================================================ */
.theme-toggle {
    width:         36px;
    height:        36px;
    border-radius: 50%;
    border:        1px solid var(--border-hover);
    background:    transparent;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--text-muted);
    position:      relative;
    overflow:      hidden;
    flex-shrink:   0;
    transition:    border-color var(--duration) var(--ease),
                   background   var(--duration) var(--ease),
                   color        var(--duration) var(--ease);
}
.theme-toggle:hover {
    background: var(--nav-btn-hover);
    color:      var(--text);
}

/* Both icons sit on top of each other; CSS moves them in/out */
.icon-sun,
.icon-moon {
    position:   absolute;
    transition: transform 0.45s var(--ease), opacity 0.35s var(--ease);
}

/* Dark mode: sun is visible (= "switch to light"), moon is hidden */
[data-theme="dark"]  .icon-sun  { transform: rotate(0deg)   scale(1); opacity: 1; }
[data-theme="dark"]  .icon-moon { transform: rotate(-90deg) scale(0); opacity: 0; }

/* Light mode: moon is visible (= "switch to dark"), sun is hidden */
[data-theme="light"] .icon-sun  { transform: rotate(90deg) scale(0); opacity: 0; }
[data-theme="light"] .icon-moon { transform: rotate(0deg)  scale(1); opacity: 1; }

/* Fallback if no attribute yet (matches :root default = dark) */
:root:not([data-theme]) .icon-sun  { transform: rotate(0deg)   scale(1); opacity: 1; }
:root:not([data-theme]) .icon-moon { transform: rotate(-90deg) scale(0); opacity: 0; }

/* Mobile hamburger (hidden on desktop) */
.nav-toggle {
    display:    none;
    flex-direction: column;
    gap:        5px;
    background: none;
    border:     none;
    cursor:     pointer;
    padding:    4px;
}
.nav-toggle span {
    display:    block;
    width:      22px;
    height:     1.5px;
    background: var(--text);
    border-radius: 2px;
    transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-6.5px) rotate(-45deg); }


/* ================================================================
   HERO - editorial two-column split (light + dark)
   ================================================================ */
.hero {
    position:    relative;
    min-height:  100vh;
    display:     flex;
    align-items: center;
    overflow:    hidden;
    background:  var(--bg);
    transition:  background-color 0.3s ease;
}

/* Full-bleed canvas particle flow */
#hero-canvas {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    display:  block;
    z-index:  0;
}

/* Particles are very subtle in light mode - gradient glow dominates */
[data-theme="light"] #hero-canvas { opacity: 0.08; }

/* Left-edge gradient: keeps heading column readable */
.hero-canvas-fade {
    position:    absolute;
    inset-block: 0;
    left:        0;
    width:       58%;
    background:  linear-gradient(to right, var(--bg) 42%, transparent);
    z-index:     1;
    pointer-events: none;
}

/* ── Animated gradient glow - the pink/lavender cloud ── */
.hero-glow {
    position:    absolute;
    top:         -20%;
    right:       -8%;
    width:       72%;
    height:      115%;
    pointer-events: none;
    z-index:     0;
    will-change: transform, opacity;
    animation:   heroGlowFloat 9s ease-in-out infinite;
}
[data-theme="light"] .hero-glow {
    background: radial-gradient(ellipse at 55% 28%,
        rgba(244, 114, 182, 0.34) 0%,
        rgba(196, 132, 252, 0.20) 34%,
        rgba(167, 139, 250, 0.10) 54%,
        transparent 70%);
}
[data-theme="dark"] .hero-glow {
    background: radial-gradient(ellipse at 55% 28%,
        rgba(244, 114, 182, 0.42) 0%,
        rgba(196, 132, 252, 0.22) 32%,
        rgba(139, 92, 246, 0.10) 56%,
        transparent 72%);
}
@keyframes heroGlowFloat {
    0%   { transform: translate(0,    0)    scale(1);    opacity: 0.90; }
    20%  { transform: translate(-3%,  5%)   scale(1.10); opacity: 1;    }
    50%  { transform: translate(4%,  -2%)   scale(0.92); opacity: 0.76; }
    75%  { transform: translate(-2%, -4%)   scale(1.07); opacity: 0.94; }
    100% { transform: translate(0,    0)    scale(1);    opacity: 0.90; }
}

/* Sparkle-lines canvas - above blobs (z:0), below text (z:2) */
#hero-bg-canvas {
    position:       absolute;
    inset:          0;
    width:          100%;
    height:         100%;
    display:        block;
    z-index:        1;
    pointer-events: none;
}

/* Secondary gradient blob - drifts on a different phase */
.hero-glow-b {
    position:    absolute;
    bottom:      -15%;
    right:       8%;
    width:       52%;
    height:      72%;
    pointer-events: none;
    z-index:     0;
    will-change: transform, opacity;
    animation:   heroGlowFloatB 11s ease-in-out infinite;
    animation-delay: -4.5s;
}
[data-theme="light"] .hero-glow-b {
    background: radial-gradient(ellipse at 50% 55%,
        rgba(196, 132, 252, 0.18) 0%,
        rgba(244, 114, 182, 0.09) 42%,
        transparent 68%);
}
[data-theme="dark"] .hero-glow-b {
    background: radial-gradient(ellipse at 50% 55%,
        rgba(167, 139, 250, 0.28) 0%,
        rgba(244, 114, 182, 0.12) 40%,
        transparent 65%);
}
@keyframes heroGlowFloatB {
    0%   { transform: translate(0,   0)    scale(1);    opacity: 0.85; }
    35%  { transform: translate(-4%, -5%)  scale(1.12); opacity: 1;    }
    65%  { transform: translate(3%,   2%)  scale(0.91); opacity: 0.75; }
    100% { transform: translate(0,   0)    scale(1);    opacity: 0.85; }
}

/* Wrapper aligns hero content to the page grid */
.hero-container {
    position:  relative;
    z-index:   2;
    width:     100%;
    max-width: var(--container);
    margin:    0 auto;
    padding:   0 var(--gutter);
}

/* ── Two-column split: heading | divider | body ── */
.hero-split {
    display:     grid;
    grid-template-columns: 1fr 1px minmax(0, 400px);
    gap:         0 72px;
    align-items: center;
    padding:     160px 0 110px;
}

/* Left column */
.hero-left .label {
    display:       block;
    margin-bottom: 28px;
}

.hero-heading {
    font-family:    var(--font-serif);
    font-size:      clamp(28px, 3.2vw, 44px);
    font-weight:    400;
    line-height:    1.18;
    letter-spacing: -0.01em;
    color:          var(--text);
}

/* Centre: vertical line draws itself in on entrance */
.hero-divider {
    position:         relative;
    width:            1px;
    height:           290px;
    background:       linear-gradient(
                          to bottom,
                          transparent,
                          var(--border-hover) 18%,
                          var(--border-hover) 82%,
                          transparent
                      );
    transform-origin: top center;
    transform:        scaleY(0);
    transition:       transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0s;
}
.hero-entered .hero-divider {
    transform:        scaleY(1);
    transition-delay: 0.6s;
}

/* Pink orb sits at the midpoint of the line */
.hero-divider::after {
    content:       '';
    position:      absolute;
    left:          50%;
    top:           50%;
    transform:     translate(-50%, -50%);
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--accent);
    box-shadow:    0 0 10px rgba(244, 114, 182, 0.70),
                   0 0 24px rgba(244, 114, 182, 0.35);
}

/* Right column */
.hero-right {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            32px;
}

.hero-subtext {
    font-size:   15px;
    color:       var(--text-muted);
    line-height: 1.78;
    max-width:   340px;
}

/* Text-link CTA */
.hero-cta {
    display:        inline-flex;
    align-items:    center;
    gap:            10px;
    font-size:      12px;
    font-weight:    500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color:          var(--text);
    position:       relative;
    padding-bottom: 5px;
    transition:     color 0.35s ease;
}
.hero-cta::after {
    content:          '';
    position:         absolute;
    left:             0;
    bottom:           0;
    width:            100%;
    height:           1px;
    background:       currentColor;
    transform-origin: left center;
    transition:       transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-cta:hover               { color: var(--accent); }
.hero-cta:hover::after        { transform: scaleX(0.7); }
.hero-cta-icon                { font-size: 14px; transition: transform 0.35s ease; }
.hero-cta:hover .hero-cta-icon { transform: translate(3px, -3px); }

/* Keep .btn-primary for potential use elsewhere */
.btn-primary {
    display:       inline-flex;
    align-items:   center;
    gap:           10px;
    padding:       15px 30px;
    border-radius: 100px;
    background:    var(--accent);
    color:         #fff;
    font-size:     14px;
    font-weight:   500;
    transition:    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                   box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                   background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-primary:hover {
    background:  var(--accent-hover);
    transform:   translateY(-2px);
    box-shadow:  0 10px 36px rgba(244, 114, 182, 0.45);
}
.btn-arrow { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.btn-primary:hover .btn-arrow { transform: translateX(4px); }


/* ================================================================
   SELECTED WORK
   ================================================================ */
.work {
    padding: var(--section-gap) 0;
}

.section-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   40px;
}

.view-all {
    font-size:  13px;
    color:      var(--text-muted);
    transition: color var(--duration) var(--ease);
}
.view-all:hover { color: var(--text); }

.work-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   20px;
}

/* Project card */
.project-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 14px;
    overflow:      hidden;
    cursor:        default;
    display:       flex;
    flex-direction: column;
    transition:    transform var(--duration) var(--ease),
                   border-color var(--duration) var(--ease);
}
/* When a real link is set (not '#'), main.js adds this class */
.project-card.is-linked { cursor: pointer; }
.project-card:hover {
    transform:    translateY(-5px);
    border-color: var(--border-hover);
}

/* Thumbnail area */
.card-image {
    aspect-ratio: 4/3;
    overflow:     hidden;
    background:   var(--bg);
    flex-shrink:  0;
}
.card-image img,
.card-image video {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}
.project-card:hover .card-image img,
.project-card:hover .card-image video { transform: scale(1.04); }

/* Placeholder shown while no image is set */
.card-image.is-placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.card-body {
    padding: 22px 22px 16px;
    flex:    1;
}
.card-title {
    font-family:   var(--font-serif);
    font-size:     22px;
    font-weight:   400;
    line-height:   1.28;
    margin-bottom: 10px;
}
.card-tags {
    font-size:     13px;
    color:         var(--text-muted);
    margin-bottom: 12px;
    display:       flex;
    flex-wrap:     wrap;
    align-items:   center;
    gap:           5px;
}
.tag-sep { opacity: 0.4; }
.card-desc {
    font-size:   15px;
    color:       var(--text-muted);
    line-height: 1.68;
}

.card-footer {
    padding:         14px 22px;
    border-top:      1px solid var(--border);
    display:         flex;
    justify-content: flex-end;
}
.card-arrow {
    width:         34px;
    height:        34px;
    border-radius: 50%;
    border:        1px solid var(--border-hover);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     14px;
    color:         var(--text-muted);
    transition:    background var(--duration) var(--ease),
                   border-color var(--duration) var(--ease),
                   color var(--duration) var(--ease);
}
.project-card:hover .card-arrow {
    background:   var(--accent);
    border-color: var(--accent);
    color:        #fff;
}


/* ================================================================
   ABOUT
   ================================================================ */
.about {
    padding: var(--section-gap) 0;
}

/* Top row: name intro + bio + photo */
.about-card {
    display:       grid;
    grid-template-columns: auto 1fr auto;
    align-items:   center;
    gap:           64px;
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 16px;
    padding:       52px 60px;
    margin-bottom: 16px;
}

.about-intro {
    display:     flex;
    align-items: center;
    gap:         14px;
    flex-shrink: 0;
}

.sparkle {
    color:     var(--accent);
    font-size: 22px;
    line-height: 1;
}

.about-name {
    font-family: var(--font-serif);
    font-size:   clamp(26px, 3vw, 42px);
    font-weight: 400;
    white-space: nowrap;
}

.about-bio {
    font-size:   15px;
    color:       var(--text-muted);
    line-height: 1.75;
}

.about-photo {
    width:         90px;
    height:        90px;
    border-radius: 50%;
    overflow:      hidden;
    border:        2px solid var(--border-hover);
    flex-shrink:   0;
    background:    var(--surface-hover);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-photo.no-photo::after {
    content:    '';
    display:    block;
    width:      100%;
    height:     100%;
    background: radial-gradient(circle, #2a2a3a, #111);
}

/* Process steps row */
.process-grid {
    display:      grid;
    grid-template-columns: repeat(3, 1fr);
    border:       1px solid var(--border);
    border-radius: 16px;
    overflow:     hidden;
}

.process-step {
    display:       grid;
    grid-template-columns: 44px 1fr auto;
    align-items:   start;
    gap:           20px;
    padding:       36px 32px;
    background:    var(--surface);
    border-right:  1px solid var(--border);
    transition:    background var(--duration) var(--ease);
}
.process-step:last-child { border-right: none; }
.process-step:hover { background: var(--surface-hover); }

.process-icon {
    color:      var(--accent);
    flex-shrink: 0;
    padding-top: 2px;
}

.process-text h3 {
    font-size:     15px;
    font-weight:   500;
    margin-bottom: 8px;
}
.process-text p {
    font-size:   13px;
    color:       var(--text-muted);
    line-height: 1.65;
}

.process-chevron {
    font-size:   20px;
    color:       var(--text-subtle);
    padding-top: 2px;
}


/* ================================================================
   FOOTER / CONTACT
   ================================================================ */
.footer {
    border-top: 1px solid var(--border);
    padding:    72px 0 52px;
}

.footer-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             60px;
}

.footer-headline {
    font-family: var(--font-serif);
    font-size:   clamp(24px, 2.8vw, 36px);
    font-weight: 400;
    line-height: 1.3;
    max-width:   420px;
}

.footer-links {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    flex-shrink:    0;
}

.footer-link {
    display:     flex;
    align-items: center;
    gap:         12px;
    font-size:   13px;
    color:       var(--text-muted);
    transition:  color var(--duration) var(--ease);
}
.footer-link:hover { color: var(--text); }
.footer-link svg   { opacity: 0.6; flex-shrink: 0; }


/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    :root { --gutter: 32px; }

    .work-grid { grid-template-columns: repeat(2, 1fr); }

    .about-card {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 32px;
        padding: 40px 40px;
    }
    .about-intro { justify-content: center; }
    .about-photo { margin: 0 auto; }
    .about-bio   { max-width: 480px; margin: 0 auto; }
}

@media (max-width: 768px) {
    :root {
        --section-gap: 80px;
        --gutter:      24px;
    }

    /* Hero: stack split, fade canvas on mobile */
    .hero-split {
        grid-template-columns: 1fr;
        gap:     36px 0;
        padding: 120px 0 80px;
    }
    .hero-divider {
        width:            48px;
        height:           1px;
        background:       linear-gradient(to right, transparent, var(--border-hover) 20%, var(--border-hover) 80%, transparent);
        transform-origin: left center;
    }
    .hero-entered .hero-divider { transform: scaleX(1) scaleY(1); }
    .hero-right { gap: 24px; }
    .hero-canvas-fade { width: 100%; }
    #hero-canvas { opacity: 0.22; }

    /* Show mobile nav toggle */
    .nav-toggle { display: flex; }

    .nav-links {
        position:   absolute;
        top:        72px;
        inset-inline: 0;
        background: var(--nav-bg);
        backdrop-filter: blur(16px);
        flex-direction: column;
        align-items: flex-start;
        gap:        0;
        padding:    16px 0 24px;
        border-bottom: 1px solid var(--border);
        display: none;
    }
    .nav-links.is-open { display: flex; }
    .nav-link, .btn-cv {
        padding: 12px 24px;
        width:   100%;
    }
    .btn-cv {
        border:     none;
        border-top: 1px solid var(--border);
        border-radius: 0;
        margin-top: 8px;
    }

    .work-grid { grid-template-columns: 1fr; }

    .process-grid { grid-template-columns: 1fr; }
    .process-step {
        border-right:  none;
        border-bottom: 1px solid var(--border);
    }
    .process-step:last-child { border-bottom: none; }

    .footer-inner {
        flex-direction: column;
        align-items:    flex-start;
        gap:            40px;
    }
}

@media (max-width: 480px) {
    .hero-heading { font-size: 38px; }
    .hero-split { padding: 110px 0 70px; gap: 28px 0; }
    .about-card   { padding: 32px 24px; }
    .process-step { grid-template-columns: 40px 1fr; }
    .process-chevron { display: none; }
}

/* ================================================================
   LIGHT MODE - overrides for elements with hardcoded dark colours
   ================================================================ */

/* About card shadow pops nicely on light */
[data-theme="light"] .about-card {
    box-shadow: 0 2px 24px rgba(0,0,0,0.07);
}

/* Process grid dividers */
[data-theme="light"] .process-grid {
    box-shadow: 0 2px 16px rgba(0,0,0,0.05);
}

/* Project card subtle shadow */
[data-theme="light"] .project-card {
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
[data-theme="light"] .project-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.10);
}

/* Theme toggle looks better inverted in light */
[data-theme="light"] .theme-toggle {
    border-color: var(--border-hover);
    color:        var(--text-muted);
}


/* ================================================================
   FUTURISTIC GRID OVERLAY - adds subtle depth in dark mode
   ================================================================ */
[data-theme="dark"] body::before {
    content:        '';
    position:       fixed;
    inset:          0;
    background-image:
        linear-gradient(rgba(255,255,255,0.013) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.013) 1px, transparent 1px);
    background-size: 72px 72px;
    pointer-events: none;
    z-index:        0;
}


/* ================================================================
   HERO ENTRANCE - elements start hidden, JS adds .hero-entered
   ================================================================ */
.hero-left .label,
.hero .hero-subtext,
.hero .hero-cta,
.hero .scroll-cue {
    opacity:   0;
    transform: translateY(24px);
    transition:
        opacity   0.85s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-entered .hero-left .label    { opacity: 1; transform: none; transition-delay: 0.20s; }
.hero-entered .hero .hero-subtext   { opacity: 1; transform: none; transition-delay: 0.75s; }
.hero-entered .hero .hero-cta       { opacity: 1; transform: none; transition-delay: 0.98s; }
.hero-entered .hero .scroll-cue     { opacity: 1; transform: none; transition-delay: 1.28s; }

/* While scroll-breakup is active, disable CSS transitions on hero
   elements so the movement tracks the scroll position exactly */
.hero-breaking .hero-left .label,
.hero-breaking .hero .hero-heading span,
.hero-breaking .hero .hero-heading em,
.hero-breaking .hero-divider,
.hero-breaking .hero .hero-subtext,
.hero-breaking .hero .hero-cta,
.hero-breaking .hero .scroll-cue {
    transition: none !important;
}

/* Typewriter cursor */
.tw-cursor {
    display:    inline-block;
    color:      var(--accent);
    font-style: normal;
    animation:  cursorBlink 0.75s step-end infinite;
    margin-left: 1px;
}
@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}


/* ================================================================
   LIGHT BEAM on the word "clarity"
   ================================================================ */
@keyframes clarityBeam {
    0%   { background-position: -260% center; }
    38%  { background-position:  320% center; }
    100% { background-position:  320% center; }
}

.hero-heading em {
    background: linear-gradient(
        105deg,
        var(--accent) 30%,
        rgba(255, 240, 255, 0.94) 50%,
        var(--accent) 70%
    );
    background-size:         290% 100%;
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    color:                   transparent;
    font-style:              italic;
    font-family:             var(--font-serif);
    animation:               clarityBeam 5.5s ease-in-out infinite;
    animation-delay:         2.2s;
}

[data-theme="light"] .hero-heading em {
    background: linear-gradient(
        105deg,
        var(--accent) 28%,
        #ff80b5       50%,
        var(--accent) 72%
    );
    background-size:         290% 100%;
    -webkit-background-clip: text;
    background-clip:         text;
}


/* ================================================================
   SCROLL REVEAL - base state (hidden)
   JS adds .is-visible to trigger transition
   ================================================================ */
.js-reveal .reveal {
    opacity:   0;
    transform: translateY(26px);
    transition:
        opacity   0.65s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.js-reveal .reveal.is-visible {
    opacity:   1;
    transform: none;
}

/* Stagger cards in the work grid */
.js-reveal .work-grid .reveal:nth-child(1) { transition-delay: 0.00s; }
.js-reveal .work-grid .reveal:nth-child(2) { transition-delay: 0.12s; }
.js-reveal .work-grid .reveal:nth-child(3) { transition-delay: 0.24s; }

/* Stagger process steps */
.js-reveal .process-grid .reveal:nth-child(1) { transition-delay: 0.00s; }
.js-reveal .process-grid .reveal:nth-child(2) { transition-delay: 0.13s; }
.js-reveal .process-grid .reveal:nth-child(3) { transition-delay: 0.26s; }

/* Section header: label scans in left-to-right */
@keyframes labelScan {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0%   0 0); }
}

.js-reveal .reveal.is-visible .label {
    animation: labelScan 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Footer headline gets a slightly longer reveal */
.js-reveal .footer-headline.reveal {
    transition-duration: 0.85s;
}


/* ================================================================
   CARD MOUSE-GLOW - radial highlight follows cursor in dark mode
   ================================================================ */
[data-theme="dark"] .project-card,
[data-theme="dark"] .spotlight-card {
    position: relative;
}
[data-theme="dark"] .project-card::before,
[data-theme="dark"] .spotlight-card::before {
    content:        '';
    position:       absolute;
    inset:          0;
    border-radius:  inherit;
    background:     radial-gradient(
                        circle at var(--mx, 50%) var(--my, 50%),
                        rgba(244,114,182,0.07) 0%,
                        transparent 65%
                    );
    opacity:        0;
    transition:     opacity 0.35s ease;
    pointer-events: none;
    z-index:        0;
}
[data-theme="dark"] .project-card:hover::before,
[data-theme="dark"] .spotlight-card:hover::before { opacity: 1; }

/* Ensure card content sits above the glow layer */
[data-theme="dark"] .project-card .card-image,
[data-theme="dark"] .project-card .card-body,
[data-theme="dark"] .project-card .card-footer,
[data-theme="dark"] .spotlight-card .spotlight-media,
[data-theme="dark"] .spotlight-card .spotlight-body {
    position: relative;
    z-index:  1;
}
/* Overlay text sits above both the glow layer and the media */
[data-theme="dark"] .project-card .card-overlay {
    z-index: 2;
}


/* ================================================================
   REDUCED MOTION - respect user preference
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .hero-left .label,
    .hero .hero-subtext,
    .hero .hero-cta,
    .hero .scroll-cue,
    .hero-divider {
        opacity:    1;
        transform:  none;
        transition: none;
    }
    .hero-glow, .hero-glow-b { animation: none; }
    .tw-cursor { animation: none; }
    .hero-heading em {
        animation:               none;
        background:              none;
        -webkit-text-fill-color: var(--accent);
        color:                   var(--accent);
    }
    .js-reveal .reveal {
        opacity:    1;
        transform:  none;
        transition: none;
    }
}


/* ================================================================
   HERO - scroll-to-explore cue
   ================================================================ */
.scroll-cue {
    display:        flex;
    width:          fit-content;
    align-items:    center;
    gap:            12px;
    color:          var(--text-muted);
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 0.18em;
    transition:     color var(--duration) var(--ease);
}
.scroll-cue:hover { color: var(--text); }

.scroll-mouse {
    width:          22px;
    height:         34px;
    border:         1.5px solid currentColor;
    border-radius:  11px;
    display:        inline-flex;
    justify-content: center;
    padding-top:    6px;
    opacity:        0.75;
    flex-shrink:    0;
}
.scroll-wheel {
    width:          3px;
    height:         6px;
    border-radius:  2px;
    background:     currentColor;
    animation:      scrollWheel 1.8s var(--ease) infinite;
}
@keyframes scrollWheel {
    0%   { opacity: 0; transform: translateY(0); }
    30%  { opacity: 1; }
    60%  { opacity: 1; transform: translateY(7px); }
    100% { opacity: 0; transform: translateY(7px); }
}


/* ================================================================
   SHARED SECTION HEADINGS
   ================================================================ */
.section-title {
    font-family:    var(--font-serif);
    font-size:      clamp(26px, 3.4vw, 44px);
    font-weight:    400;
    line-height:    1.16;
    letter-spacing: -0.01em;
    color:          var(--text);
    margin-top:     14px;
}

.section-head {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             24px;
    margin-bottom:   48px;
}
.section-head .view-all { flex-shrink: 0; margin-bottom: 8px; }


/* ================================================================
   WORK CARDS - number badge + client eyebrow
   ================================================================ */
.card-image { position: relative; }

.card-num {
    position:       absolute;
    top:            14px;
    left:           14px;
    z-index:        2;
    width:          30px;
    height:         30px;
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      11px;
    font-weight:    500;
    color:          #fff;
    background:     rgba(8, 8, 8, 0.5);
    border:         1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.card-client {
    font-size:      12px;
    font-weight:    500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--accent);
    margin-bottom:  10px;
}


/* ================================================================
   HOW I WORK
   ================================================================ */
.how { padding: var(--section-gap) 0; }

.how-head { max-width: 640px; margin-bottom: 56px; }
.how-lead {
    margin-top:  18px;
    font-size:   15px;
    color:       var(--text-muted);
    line-height: 1.75;
    max-width:   560px;
}

.how-body {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   64px;
    align-items:           center;
    margin-bottom:         52px;
}

.how-graph {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 16px;
    padding:       28px;
}
.how-graph svg { display: block; width: 100%; height: auto; }

/* Constellation - themed via classes so it adapts to light/dark */
.g-edge       { stroke: var(--accent); stroke-width: 1; opacity: 0.22; }
.g-node       { fill: var(--text-muted); }
.g-focal      { fill: var(--accent); }
.g-focal-glow { fill: var(--accent); opacity: 0.16; animation: focalPulse 3.2s ease-in-out infinite; }
.g-label      { fill: var(--text-muted); font-family: var(--font-sans); font-size: 9px; font-weight: 500; letter-spacing: 0.06em; }
.g-focal-label{ fill: var(--accent); font-weight: 600; }
@keyframes focalPulse { 0%, 100% { opacity: 0.10; } 50% { opacity: 0.26; } }

.how-steps {
    list-style:     none;
    display:        flex;
    flex-direction: column;
    gap:            28px;
}
.how-step {
    display:               grid;
    grid-template-columns: 44px 1fr;
    gap:                   18px;
    align-items:           start;
}
.how-step-icon {
    width:          44px;
    height:         44px;
    border-radius:  50%;
    border:         1px solid var(--border-hover);
    color:          var(--accent);
    display:        flex;
    align-items:    center;
    justify-content: center;
    flex-shrink:    0;
}
.how-step-text h3 { font-size: 16px; font-weight: 500; margin-bottom: 6px; }
.how-step-text p  { font-size: 13px; color: var(--text-muted); line-height: 1.65; }

.core-strengths {
    border-top:  1px solid var(--border);
    padding-top: 30px;
    display:     flex;
    align-items: center;
    gap:         28px;
    flex-wrap:   wrap;
}
.strengths-list {
    list-style: none;
    display:    flex;
    flex-wrap:  wrap;
    gap:        12px 24px;
}
.strengths-list li {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   13px;
    color:       var(--text-muted);
}
.strengths-list li::before {
    content:       '';
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--accent);
    flex-shrink:   0;
}


/* ================================================================
   EXPERIENCE SNAPSHOT
   ================================================================ */
.experience { padding: var(--section-gap) 0; }
.exp-head { margin-bottom: 48px; }

.exp-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   20px;
}
.exp-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 14px;
    padding:       32px 28px;
    transition:    transform var(--duration) var(--ease),
                   border-color var(--duration) var(--ease);
}
.exp-card:hover { transform: translateY(-4px); border-color: var(--border-hover); }

.exp-icon {
    width:          44px;
    height:         44px;
    border-radius:  12px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    background:     var(--accent-dim);
    color:          var(--accent);
    margin-bottom:  20px;
}
.exp-title { font-family: var(--font-serif); font-size: 19px; font-weight: 400; margin-bottom: 10px; }
.exp-desc  { font-size: 13px; color: var(--text-muted); line-height: 1.65; margin-bottom: 18px; }
.exp-tags  { display: flex; flex-wrap: wrap; gap: 8px; }
.exp-tags span {
    font-size:     11px;
    color:         var(--text-muted);
    border:        1px solid var(--border-hover);
    border-radius: 100px;
    padding:       4px 12px;
}

[data-theme="light"] .exp-card { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }


/* ================================================================
   ABOUT - redesigned two-column (text + photo)
   ================================================================ */
.about-card {
    grid-template-columns: 1fr 0.85fr;
    gap:     56px;
    padding: 56px 60px;
}
.about-text .label { display: block; margin-bottom: 18px; }
.about-name {
    font-size:   clamp(26px, 3vw, 40px);
    line-height: 1.2;
    white-space: normal;
    margin-bottom: 20px;
}
.about-card .about-bio {
    font-size:   15px;
    line-height: 1.75;
    max-width:   none;
    margin-bottom: 28px;
}
.about-photo {
    width:         100%;
    height:        auto;
    min-height:    0;
    aspect-ratio:  4 / 5;
    max-width:     420px;
    margin-left:   auto;
    border-radius: 16px;
}

.btn-outline {
    display:       inline-flex;
    align-items:   center;
    gap:           10px;
    padding:       13px 26px;
    border-radius: 100px;
    border:        1px solid var(--border-hover);
    color:         var(--text);
    font-size:     14px;
    font-weight:   500;
    transition:    border-color var(--duration) var(--ease),
                   background var(--duration) var(--ease);
}
.btn-outline:hover { border-color: #555; background: var(--nav-btn-hover); }
.btn-outline:hover .btn-arrow { transform: translateX(4px); }


/* ================================================================
   FOOTER - label + bottom bar
   ================================================================ */
.footer-headline .label { display: block; margin-bottom: 16px; }
.footer-bottom {
    display:         flex;
    justify-content: space-between;
    gap:             20px;
    margin-top:      56px;
    padding-top:     28px;
    border-top:      1px solid var(--border);
    font-size:       12px;
    color:           var(--text-subtle);
}


/* ================================================================
   REVEAL STAGGER - experience cards
   ================================================================ */
.js-reveal .exp-grid .reveal:nth-child(1) { transition-delay: 0.00s; }
.js-reveal .exp-grid .reveal:nth-child(2) { transition-delay: 0.12s; }
.js-reveal .exp-grid .reveal:nth-child(3) { transition-delay: 0.24s; }


/* ================================================================
   RESPONSIVE - new sections
   ================================================================ */
@media (max-width: 1024px) {
    /* Re-stack the redesigned about card (wins over the base override) */
    .about-card {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 44px 44px;
    }
    .about-photo { max-width: 320px; margin: 0 auto; aspect-ratio: 5 / 4; }
    .about-text  { text-align: center; }
    .about-text .label { margin-left: auto; margin-right: auto; }
}

@media (max-width: 900px) {
    .how-body { grid-template-columns: 1fr; gap: 40px; }
    .exp-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .section-head .view-all { margin-bottom: 0; }
    .core-strengths { gap: 16px; }
    .footer-bottom { flex-direction: column; gap: 8px; margin-top: 40px; }
}


/* Reduced motion - disable looping/entrance effects */
@media (prefers-reduced-motion: reduce) {
    .scroll-wheel { animation: none; }
    .g-focal-glow { animation: none; }
    .hero-glow    { animation: none; }
}

/* ================================================================
   BENTO LAYOUT - page wrapper, rows, cards
   ================================================================ */

/* ── Token additions ── */
:root,
[data-theme="dark"] {
    --bento-bg:      #07070E;
    --bento-card:    #111118;
    --bento-border:  rgba(255,255,255,0.07);
    --bento-gap:     10px;
    --bento-radius:  20px;
}

[data-theme="light"] {
    --bento-bg:      #EDEEF5;
    --bento-card:    #ffffff;
    --bento-border:  rgba(0,0,0,0.06);
}

/* ── Override body bg ── */
body {
    background: var(--bento-bg);
}

/* ── Wrapper - centred, capped width so bento never bleeds full screen ── */
.bento-page {
    max-width: 1380px;
    margin: 0 auto;
    padding: calc(72px + 16px) 16px 16px;
    display: flex;
    flex-direction: column;
    gap: var(--bento-gap);
    min-height: calc(100vh - 72px);
    box-sizing: border-box;
}

/* ── Base card ── */
.bento-card {
    background: var(--bento-card);
    border-radius: var(--bento-radius);
    border: 1px solid var(--bento-border);
    overflow: hidden;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ── Rows ── */
.bento-row {
    display: grid;
    gap: var(--bento-gap);
}

/* ================================================================
   HERO ROW  (2 columns: combined main card | photo card)
   ================================================================ */
.hero-row {
    grid-template-columns: 1fr 0.38fr;
    min-height: 420px;
}

/* ── Combined hero card: text left + graphic right ── */
.hero-main-card {
    display: flex;
    overflow: hidden;
}

/* hero-text-card is now a flex child inside hero-main-card */
.hero-main-card .hero-text-card {
    flex: 1 1 55%;
    min-width: 0;
}

/* ── Graphic side (right half of the combined card) ── */
.hero-graphic-side {
    flex: 1 1 45%;
    position: relative;
    overflow: hidden;
    min-height: 280px;
}

.hero-graphic-side .hero-glow,
.hero-graphic-side .hero-glow-b {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.hero-graphic-side .hero-glow {
    inset: -20%;
    width: 140%;
    height: 140%;
    background: radial-gradient(ellipse at 55% 55%,
        rgba(244,114,182,0.42) 0%,
        rgba(196,132,252,0.22) 45%,
        rgba(139,92,246,0.10) 70%,
        transparent 100%
    );
    animation: heroGlowFloat 9s ease-in-out infinite;
}

[data-theme="light"] .hero-graphic-side .hero-glow {
    background: radial-gradient(ellipse at 55% 55%,
        rgba(244,114,182,0.34) 0%,
        rgba(196,132,252,0.18) 45%,
        rgba(139,92,246,0.08) 70%,
        transparent 100%
    );
}

.hero-graphic-side .hero-glow-b {
    inset: -10%;
    width: 120%;
    height: 120%;
    background: radial-gradient(ellipse at 40% 40%,
        rgba(167,139,250,0.28) 0%,
        rgba(99,102,241,0.12) 50%,
        transparent 100%
    );
    animation: heroGlowFloatB 11s ease-in-out infinite -4.5s;
}

[data-theme="light"] .hero-graphic-side .hero-glow-b {
    background: radial-gradient(ellipse at 40% 40%,
        rgba(196,132,252,0.18) 0%,
        rgba(99,102,241,0.08) 50%,
        transparent 100%
    );
}

/* ── Hero text card ── */
.hero-text-card {
    padding: 48px 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
}

.hero-text-card .label {
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s var(--ease) 0.1s, transform 0.5s var(--ease) 0.1s;
}

body.hero-entered .hero-text-card .label {
    opacity: 1;
    transform: none;
}

.hero-text-card .hero-heading {
    font-family: var(--font-serif);
    font-size: clamp(26px, 3vw, 42px);
    font-weight: 500;
    line-height: 1.18;
    color: var(--text);
    margin: 0;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s var(--ease) 0.25s, transform 0.6s var(--ease) 0.25s;
}

body.hero-entered .hero-text-card .hero-heading {
    opacity: 1;
    transform: none;
}

.hero-text-card .hero-heading em {
    font-style: italic;
    color: var(--accent);
    background: linear-gradient(
        90deg,
        var(--accent) 0%,
        #f9a8d4 40%,
        var(--accent) 60%,
        var(--accent) 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: clarityBeam 3.2s ease-in-out infinite 2s;
}

.hero-sub {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s var(--ease) 0.40s, transform 0.5s var(--ease) 0.40s;
}

body.hero-entered .hero-sub {
    opacity: 1;
    transform: none;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s var(--ease) 0.55s, transform 0.5s var(--ease) 0.55s;
}

body.hero-entered .hero-actions {
    opacity: 1;
    transform: none;
}

/* Primary CTA */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 13px 24px;
    background: var(--text);
    color: var(--bg);
    border-radius: 100px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.btn-primary:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244,114,182,0.35);
}

[data-theme="light"] .btn-primary { background: #0c0c0c; color: #fff; }
[data-theme="light"] .btn-primary:hover { background: var(--accent); }

/* Outline hero CTA */
.btn-outline-hero {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 22px;
    background: transparent;
    color: var(--text);
    border-radius: 100px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    border: 1.5px solid var(--border-hover);
    transition: border-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.btn-outline-hero:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

.btn-dot {
    color: var(--accent);
    font-size: 10px;
    line-height: 1;
}

/* ── Hero graphic card ── */
.hero-graphic-card {
    position: relative;
    overflow: hidden;
}

.hero-graphic-card .hero-glow,
.hero-graphic-card .hero-glow-b {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.hero-graphic-card .hero-glow {
    inset: -20%;
    width: 140%;
    height: 140%;
    background: radial-gradient(ellipse at 55% 55%,
        rgba(244,114,182,0.42) 0%,
        rgba(196,132,252,0.22) 45%,
        rgba(139,92,246,0.10) 70%,
        transparent 100%
    );
    animation: heroGlowFloat 9s ease-in-out infinite;
}

[data-theme="light"] .hero-graphic-card .hero-glow {
    background: radial-gradient(ellipse at 55% 55%,
        rgba(244,114,182,0.34) 0%,
        rgba(196,132,252,0.18) 45%,
        rgba(139,92,246,0.08) 70%,
        transparent 100%
    );
}

.hero-graphic-card .hero-glow-b {
    inset: -10%;
    width: 120%;
    height: 120%;
    background: radial-gradient(ellipse at 40% 40%,
        rgba(167,139,250,0.28) 0%,
        rgba(99,102,241,0.12) 50%,
        transparent 100%
    );
    animation: heroGlowFloatB 11s ease-in-out infinite -4.5s;
}

[data-theme="light"] .hero-graphic-card .hero-glow-b {
    background: radial-gradient(ellipse at 40% 40%,
        rgba(196,132,252,0.18) 0%,
        rgba(99,102,241,0.08) 50%,
        transparent 100%
    );
}

#hero-bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Hero personality card ──
   Small avatar, most of the card goes to voice, not the face. */
.hero-personality-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 26px 24px 24px;
}

.hero-personality-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-avatar {
    width: 190px;
    height: 190px;
    border-radius: 38px;
    object-fit: cover;
    object-position: center 20%;
    border: 2px solid var(--accent-dim);
    display: block;
}

.hero-avatar-star {
    color: var(--accent);
    font-size: 15px;
}

.hero-personality-statement {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(16px, 1.6vw, 18px);
    font-weight: 500;
    color: var(--text);
    line-height: 1.45;
    margin: 0;
    flex: 1;
}

.hero-personality-meta {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    margin: 0;
}

.hero-personality-tags {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 7px 6px;
}

.hero-personality-tags span {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    border: 1px solid var(--border-hover);
    border-radius: 100px;
    padding: 3px 9px;
    text-align: center;
    white-space: nowrap;
}

/* Nav sparkle star */
.nav-star {
    color: var(--accent);
    font-size: 12px;
    margin-left: 3px;
}

/* ================================================================
   WORK + HOW ROW
   ================================================================ */
.work-how-row {
    grid-template-columns: 1fr 0.42fr;
}

/* ── Featured work - label sits directly on the page, cards are the only boxes ── */
.work-row {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.work-bento-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 6px;
}

.work-bento-header .label { margin: 0; }

.work-bento-header .view-all {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.work-bento-header .view-all:hover { color: var(--accent); }

.bento-work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

/* Cards are pure image - body/footer hidden, overlay reveals on hover */
.bento-work-grid .project-card {
    border-radius: 14px;
    border-color: var(--bento-border);
    position: relative;
    overflow: hidden;
    height: 300px;
    cursor: pointer;
    min-width: 0;
}

.bento-work-grid .card-image {
    height: 100%;
    border-radius: 0;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bento-work-grid .project-card:hover .card-image {
    transform: scale(1.05);
}

/* Hide old text layout inside bento work cards */
.bento-work-grid .card-body,
.bento-work-grid .card-footer {
    display: none;
}

/* Always-visible overlay - sits permanently on top of the media, no hover
   needed, so the info reads the same on mobile as it does on desktop. */
.card-overlay {
    position: absolute;
    inset: 0;
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.55) 48%,
        rgba(0,0,0,0.05) 85%
    );
    pointer-events: none;
}
.card-overlay > * { pointer-events: auto; }

.card-overlay .card-client {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin: 0;
}

.card-overlay .card-title {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    margin: 2px 0 0;
    line-height: 1.25;
}

.card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.card-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 100px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.10);
}

.card-overlay .card-desc {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 300;
    color: rgba(255,255,255,0.70);
    margin: 8px 26px 0 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-overlay .card-arrow {
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 16px;
    color: var(--accent);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(244,114,182,0.5);
    background: rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}
.bento-work-grid .project-card:hover .card-overlay .card-arrow {
    background: var(--accent);
    color: #fff;
    transform: translateX(2px);
}

/* card-num stays always visible */
.bento-work-grid .card-num {
    z-index: 2;
    position: absolute;
    top: 14px;
    left: 14px;
}

/* ── Selected work - focused projects with equal visual weight ── */
.selected-work-row {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 32px 28px 28px;
    scroll-margin-top: 88px;
}

.selected-work-header {
    display: block;
}

.selected-work-header > div {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.selected-work-header .label { margin: 0; }

.selected-work-header h2 {
    max-width: none;
    margin: 0;
    color: var(--text);
    font-family: var(--font-serif);
    font-size: clamp(27px, 2.8vw, 40px);
    font-weight: 500;
    line-height: 1.08;
    white-space: nowrap;
}

.selected-work-header h2 em {
    color: var(--accent);
    font-weight: inherit;
}

.selected-work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--bento-border);
}

.selected-project-card {
    position: relative;
    min-height: 275px;
    padding: 24px 24px 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--bento-border);
    background: transparent;
    transition: background 0.25s ease;
}

.selected-project-card.is-linked { cursor: pointer; }
.selected-project-card.is-linked:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.selected-project-card:first-child { padding-left: 0; }
.selected-project-card:last-child {
    padding-right: 0;
    border-right: 0;
}

.selected-project-card:hover {
    background: linear-gradient(180deg, rgba(244, 114, 182, 0.035), transparent 72%);
}

.selected-project-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.selected-project-number {
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.selected-project-status {
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.72;
}

.selected-project-copy { margin-top: 34px; }

.selected-project-client {
    margin: 0 0 8px;
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.selected-project-card h3 {
    margin: 0;
    color: var(--text);
    font-family: var(--font-serif);
    font-size: clamp(21px, 2vw, 27px);
    font-weight: 500;
    line-height: 1.18;
}

.selected-project-description {
    margin: 14px 0 0;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.62;
}

.selected-project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
    padding-top: 24px;
}

.selected-project-tags span {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
}

.selected-project-tags span + span::before {
    content: '·';
    margin-right: 7px;
    color: var(--accent);
}

/* ── How I Work card ── */
.how-bento {
    padding: 32px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.how-bento .label { margin: 0; }

.how-bento-title {
    font-family: var(--font-serif);
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 500;
    color: var(--text);
    line-height: 1.25;
    margin: 0;
}

.how-bento-title em {
    font-style: italic;
    color: var(--accent);
    background: linear-gradient(90deg, var(--accent) 0%, #f9a8d4 40%, var(--accent) 60%, var(--accent) 100%);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: clarityBeam 3.2s ease-in-out infinite 2.5s;
}

.how-bento-desc {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
    margin-top: auto;
}

.process-flow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    flex: 1;
}

.process-node {
    display: flex;
    align-items: center;
    gap: 12px;
}

.process-node span {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.process-icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--bento-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
    background: var(--bento-bg);
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.process-icon-circle--accent {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

.process-connector {
    height: 16px;
    border-left: 1.5px dashed var(--bento-border);
    margin-left: 17px;
}

/* ================================================================
   BOTTOM BENTO ROW
   ================================================================ */
.bottom-bento-row {
    grid-template-columns: 1.4fr 0.8fr 1fr;
}

.exp-bento, .duo-bento, .spotify-bento, .facts-bento, .into-bento {
    padding: 26px 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.exp-bento .label, .duo-bento .label, .spotify-bento .label, .facts-bento .label, .into-bento .label {
    margin: 0;
}

/* Experience */
.exp-bento-logos {
    display: flex;
    gap: 14px;
    flex: 1;
    align-items: flex-end;
}

.exp-bento-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex: 1;
    text-align: center;
}

.exp-bento-badge {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.exp-bento-badge--liberis { background: linear-gradient(135deg, #7C3AED, #6D28D9); }
.exp-bento-badge--hf      { background: linear-gradient(135deg, #EC4899, #DB2777); }
.exp-bento-badge--focus   { background: linear-gradient(135deg, #f472b6, #c084fc); font-size: 20px; }

.exp-bento-role {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    letter-spacing: 0.02em;
}

.exp-bento-co, .exp-bento-tags {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 300;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Duolingo */
.duo-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    flex: 1;
    justify-content: center;
}

.duo-owl  { font-size: 32px; line-height: 1; }
.duo-fire { font-size: 22px; }

.duo-count {
    font-family: var(--font-sans);
    font-size: 30px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}

.duo-unit {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 300;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.duo-bar {
    height: 4px;
    border-radius: 4px;
    background: var(--bento-border);
    overflow: hidden;
}

.duo-bar-fill {
    height: 100%;
    width: 72%;
    border-radius: 4px;
    background: linear-gradient(90deg, #58CC02, #89E219);
}

.duo-caption {
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 300;
    color: var(--text-muted);
    margin: 0;
    font-style: italic;
}

/* Spotify */
.spotify-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.spotify-art {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: #1DB954;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.spotify-info { display: flex; flex-direction: column; gap: 3px; }

.spotify-song {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    margin: 0;
}

.spotify-artist {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 300;
    color: var(--text-muted);
    margin: 0;
}

.spotify-wave {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 24px;
    margin-top: auto;
}

.spotify-wave span {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: #1DB954;
    animation: soundWave 1.2s ease-in-out infinite;
}

.spotify-wave span:nth-child(1)  { height: 8px;  animation-delay: 0s; }
.spotify-wave span:nth-child(2)  { height: 18px; animation-delay: 0.15s; }
.spotify-wave span:nth-child(3)  { height: 12px; animation-delay: 0.3s; }
.spotify-wave span:nth-child(4)  { height: 22px; animation-delay: 0.08s; }
.spotify-wave span:nth-child(5)  { height: 10px; animation-delay: 0.45s; }
.spotify-wave span:nth-child(6)  { height: 16px; animation-delay: 0.22s; }
.spotify-wave span:nth-child(7)  { height: 6px;  animation-delay: 0.35s; }
.spotify-wave span:nth-child(8)  { height: 20px; animation-delay: 0.1s; }
.spotify-wave span:nth-child(9)  { height: 14px; animation-delay: 0.42s; }
.spotify-wave span:nth-child(10) { height: 8px;  animation-delay: 0.18s; }

@keyframes soundWave {
    0%, 100% { transform: scaleY(1); }
    50%       { transform: scaleY(0.35); }
}

/* Quick facts */
.facts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.facts-list li {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
}

.facts-icon { font-size: 15px; flex-shrink: 0; }

/* Currently Into */
.into-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
}

.into-tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 100px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text);
    background: var(--bento-bg);
    border: 1px solid var(--bento-border);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.into-list li:hover .into-tag {
    border-color: var(--accent);
    color: var(--accent);
}

/* ================================================================
   BENTO FOOTER
   ================================================================ */
.bento-footer {
    padding: 0;
    background: var(--bento-bg);
}

.bento-footer-inner {
    max-width: 1380px;
    margin: 0 auto;
    padding: 56px 16px 44px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: center;
    text-align: center;
}

.footer-star-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.footer-star { color: var(--accent); font-size: 20px; }

/* Small circular signature photo, a personal sign-off at the very
   end of the page rather than the first thing anyone sees. */
.footer-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-dim);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.footer-headline {
    font-family: var(--font-serif);
    font-size: clamp(22px, 3.5vw, 38px);
    font-weight: 400;
    color: var(--text);
    margin: 0;
    line-height: 1.3;
}

.footer-links-row {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-links-row .footer-link {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links-row .footer-link:hover { color: var(--text); }

.footer-cv-btn {
    padding: 10px 22px;
    border-radius: 100px;
    border: 1.5px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.22s ease, color 0.22s ease;
}

.footer-cv-btn:hover { background: var(--accent); color: #fff; }

/* ================================================================
   SCROLL BREAKUP - bento selectors
   ================================================================ */
body.hero-breaking .hero-text-card .label,
body.hero-breaking .hero-text-card .hero-heading span,
body.hero-breaking .hero-text-card .hero-heading em,
body.hero-breaking .hero-sub,
body.hero-breaking .hero-actions {
    transition: none !important;
}

/* ================================================================
   RESPONSIVE - bento
   ================================================================ */
@media (max-width: 1100px) {
    .hero-row         { grid-template-columns: 1fr; min-height: auto; }
    .hero-main-card   { min-height: 380px; }
    .hero-personality-card { display: none; }
    .work-how-row     { grid-template-columns: 1fr; }
    .how-bento        { min-height: 260px; }
    .bottom-bento-row { grid-template-columns: 1fr 1fr 1fr; }
    .exp-bento        { grid-column: span 3; }
    .selected-work-grid { grid-template-columns: 1fr; }
    .selected-project-card,
    .selected-project-card:first-child,
    .selected-project-card:last-child {
        min-height: 0;
        padding: 24px 0;
        border-right: 0;
        border-bottom: 1px solid var(--bento-border);
    }
    .selected-project-card:last-child { border-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 860px) {
    .hero-graphic-side { flex: 0 0 42%; }
}

@media (max-width: 780px) {
    .bento-page       { padding: calc(64px + 10px) 10px 10px; }
    .hero-row         { grid-template-columns: 1fr; }
    .hero-graphic-card { min-height: 220px; }
    .hero-text-card   { padding: 36px 28px; }
    .bento-work-grid  { grid-template-columns: minmax(0, 1fr); }
    .work-bento-header .view-all { display: none; }
    .bottom-bento-row { grid-template-columns: 1fr 1fr; }
    .exp-bento        { grid-column: span 2; }
    .bento-footer-inner { padding: 40px 24px 36px; }
    .footer-links-row { gap: 18px; }
    .selected-work-row { padding: 26px 22px; }
    .selected-work-header h2 { white-space: normal; }
}

@media (max-width: 520px) {
    .bottom-bento-row { grid-template-columns: 1fr; }
    .exp-bento        { grid-column: span 1; }
    .hero-text-card   { padding: 28px 22px; }
}

/* ================================================================
   HERO GLASSMORPHIC CARD - full-card gradient background
   ================================================================ */

/* Card base: gradient fills the whole thing */
.hero-main-card {
    position: relative;
    overflow: hidden;
    display: block;     /* no flex split - text panel floats on top */
    min-height: 420px;
}

[data-theme="dark"] .hero-main-card,
:root .hero-main-card {
    background: linear-gradient(145deg, #100720 0%, #1d0b32 40%, #0a0d20 100%);
}

[data-theme="light"] .hero-main-card {
    background: linear-gradient(145deg, #fce9f5 0%, #ede8fd 50%, #e6ecff 100%);
}

/* Glow blobs now fill the entire card */
.hero-main-card .hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    top: -30%;
    left: 10%;
    width: 85%;
    height: 140%;
    background: radial-gradient(ellipse at 50% 48%,
        rgba(244,114,182,0.55) 0%,
        rgba(196,132,252,0.30) 40%,
        rgba(139,92,246,0.12) 65%,
        transparent 100%
    );
    animation: heroGlowFloat 9s ease-in-out infinite;
}

[data-theme="light"] .hero-main-card .hero-glow {
    background: radial-gradient(ellipse at 50% 48%,
        rgba(244,114,182,0.50) 0%,
        rgba(196,132,252,0.28) 40%,
        rgba(139,92,246,0.10) 65%,
        transparent 100%
    );
}

.hero-main-card .hero-glow-b {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    top: 10%;
    right: -10%;
    width: 75%;
    height: 110%;
    background: radial-gradient(ellipse at 45% 42%,
        rgba(167,139,250,0.40) 0%,
        rgba(99,102,241,0.18) 50%,
        transparent 100%
    );
    animation: heroGlowFloatB 11s ease-in-out infinite -4.5s;
}

[data-theme="light"] .hero-main-card .hero-glow-b {
    background: radial-gradient(ellipse at 45% 42%,
        rgba(216,180,254,0.38) 0%,
        rgba(99,102,241,0.12) 50%,
        transparent 100%
    );
}

/* Canvas covers full card for sparkles */
.hero-main-card #hero-bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

/* Glassmorphic text panel - floats over the gradient */
.hero-main-card .hero-text-card {
    position: relative;
    z-index: 2;
    width: 52%;
    min-height: 420px;
    padding: 52px 52px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    /* Frosted glass */
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(28px) saturate(130%);
    -webkit-backdrop-filter: blur(28px) saturate(130%);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
}

[data-theme="light"] .hero-main-card .hero-text-card {
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border-right: 1px solid rgba(255, 255, 255, 0.85);
}

/* Text colour override for dark mode (on colourful bg) */
[data-theme="dark"] .hero-main-card .hero-text-card .label {
    color: rgba(255,255,255,0.55);
}

[data-theme="dark"] .hero-main-card .hero-heading {
    color: #fff;
}

[data-theme="dark"] .hero-main-card .hero-sub {
    color: rgba(255,255,255,0.60);
}

/* Responsive: full-width text panel on small screens */
@media (max-width: 780px) {
    .hero-main-card .hero-text-card {
        width: 100%;
        min-height: auto;
        background: rgba(255,255,255,0.10);
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.12);
    }
    [data-theme="light"] .hero-main-card .hero-text-card {
        background: rgba(255,255,255,0.72);
        border-bottom: 1px solid rgba(255,255,255,0.85);
    }
}

/* ================================================================
   HERO - white card with floating gradient blobs (override)
   ================================================================ */

/* White card base - blobs float on it */
.hero-main-card {
    background: #ffffff !important;
    display: flex !important;
    align-items: stretch;
    min-height: 420px;
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .hero-main-card {
    background: #111118 !important;
}

/* Blob A - large pink, centre-right */
.hero-main-card .hero-glow {
    position: absolute !important;
    border-radius: 50% !important;
    pointer-events: none;
    top: -40% !important;
    right: 0% !important;
    left: auto !important;
    width: 60% !important;
    height: 180% !important;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(244,114,182,0.42) 0%,
        rgba(196,132,252,0.22) 45%,
        transparent 75%
    ) !important;
    animation: heroGlowFloat 9s ease-in-out infinite !important;
}

[data-theme="dark"] .hero-main-card .hero-glow {
    background: radial-gradient(ellipse at 50% 50%,
        rgba(244,114,182,0.50) 0%,
        rgba(196,132,252,0.28) 45%,
        transparent 75%
    ) !important;
}

/* Blob B - purple, lower right */
.hero-main-card .hero-glow-b {
    position: absolute !important;
    border-radius: 50% !important;
    pointer-events: none;
    bottom: -30% !important;
    right: 15% !important;
    top: auto !important;
    left: auto !important;
    width: 50% !important;
    height: 140% !important;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(167,139,250,0.30) 0%,
        rgba(99,102,241,0.14) 50%,
        transparent 80%
    ) !important;
    animation: heroGlowFloatB 11s ease-in-out infinite -4.5s !important;
}

[data-theme="dark"] .hero-main-card .hero-glow-b {
    background: radial-gradient(ellipse at 50% 50%,
        rgba(167,139,250,0.38) 0%,
        rgba(99,102,241,0.18) 50%,
        transparent 80%
    ) !important;
}

/* Blob C - soft lavender, top right corner */
.hero-glow-c {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    top: -20%;
    right: 30%;
    width: 38%;
    height: 100%;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(216,180,254,0.28) 0%,
        rgba(196,132,252,0.10) 55%,
        transparent 80%
    );
    animation: heroGlowFloat 13s ease-in-out infinite -2s;
}

[data-theme="dark"] .hero-glow-c {
    background: radial-gradient(ellipse at 50% 50%,
        rgba(216,180,254,0.32) 0%,
        rgba(196,132,252,0.14) 55%,
        transparent 80%
    );
}

/* Text panel: transparent, normal text rendering */
.hero-main-card .hero-text-card {
    position: relative !important;
    z-index: 2 !important;
    width: 48% !important;
    min-height: unset !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-right: none !important;
    box-shadow: none !important;
    padding: 52px 52px 48px !important;
    flex-shrink: 0;
}

/* Sparkle canvas: full card */
.hero-main-card #hero-bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Dark mode text colours on dark card */
[data-theme="dark"] .hero-main-card .label   { color: rgba(255,255,255,0.50); }
[data-theme="dark"] .hero-main-card .hero-heading { color: #ffffff; }
[data-theme="dark"] .hero-main-card .hero-sub { color: rgba(255,255,255,0.55); }

/* Mobile */
@media (max-width: 780px) {
    .hero-main-card .hero-text-card {
        width: 100% !important;
        padding: 36px 28px !important;
    }
}

/* Restore 2-column hero row (main card + personality card) - desktop only,
   so the mobile single-column collapse above actually takes effect */
@media (min-width: 781px) {
    .hero-row {
        grid-template-columns: 1fr 0.38fr !important;
    }
}

/* ================================================================
   WORK ROW - full-width 3 large cards
   ================================================================ */

/* Taller cards now that they span the full page width */
.bento-work-grid .project-card {
    height: 400px !important;
}

/* Always-visible project name pill at bottom of each card */
.card-name-tag {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 3;
    padding: 6px 14px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.03em;
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: none;
}

/* Slide name tag down and fade it when hover info appears */
.project-card:hover .card-name-tag {
    opacity: 0;
    transform: translateY(6px);
}

/* ================================================================
   HOW I WORK - wide horizontal layout
   ================================================================ */
.how-bento--wide {
    padding: 40px 52px 44px;
    gap: 20px;
}

/* Horizontal process flow */
.how-bento--wide .process-flow {
    flex-direction: row;
    align-items: center;
}

.how-bento--wide .process-node {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    flex: 1;
}

/* Horizontal connector */
.how-bento--wide .process-connector {
    height: 0;
    width: 40px;
    flex-shrink: 0;
    border-left: none;
    border-top: 1.5px dashed var(--bento-border);
    margin-left: 0;
    align-self: center;
}

/* ── Responsive adjustments ── */
@media (max-width: 900px) {
    .bento-work-grid .project-card {
        height: 320px !important;
    }
    .how-bento--wide {
        padding: 32px 28px;
    }
    .how-bento--wide .process-flow {
        flex-direction: column;
    }
    .how-bento--wide .process-connector {
        height: 14px;
        width: 0;
        border-top: none;
        border-left: 1.5px dashed var(--bento-border);
        margin-left: 17px;
        align-self: flex-start;
    }
    .how-bento--wide .process-node {
        flex-direction: row;
        text-align: left;
    }
}

/* ================================================================
   GLASSMORPHIC CARDS - applies to all bento cards
   ================================================================ */

/* Subtle ambient gradients on the page background give the blur
   something to work with, even behind opaque-ish cards           */
body {
    background-image:
        radial-gradient(ellipse 70% 60% at 8%  12%, rgba(196,132,252,0.07) 0%, transparent 65%),
        radial-gradient(ellipse 55% 45% at 92% 78%, rgba(244,114,182,0.06) 0%, transparent 65%),
        radial-gradient(ellipse 45% 38% at 50% 50%, rgba(147,197,253,0.03) 0%, transparent 60%);
}

[data-theme="light"] body {
    background-image:
        radial-gradient(ellipse 70% 60% at 8%  12%, rgba(196,132,252,0.12) 0%, transparent 65%),
        radial-gradient(ellipse 55% 45% at 92% 78%, rgba(244,114,182,0.10) 0%, transparent 65%);
}

/* ── Dark mode glass cards ── */
.bento-card {
    background:            rgba(17, 17, 26, 0.58) !important;
    backdrop-filter:       blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border:                1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.07) inset,
        0 6px 28px 0  rgba(0, 0, 0, 0.30);
}

/* ── Light mode glass cards ── */
[data-theme="light"] .bento-card {
    background:            rgba(255, 255, 255, 0.62) !important;
    backdrop-filter:       blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border:                1px solid rgba(255, 255, 255, 0.80) !important;
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.95) inset,
        0 4px 20px 0  rgba(0, 0, 0, 0.08);
}

/* ── Hero main card keeps its solid white / dark bg ── */
.hero-main-card {
    background: #ffffff !important;
    box-shadow:
        0 1px 0 0 rgba(255,255,255,0.12) inset,
        0 8px 40px 0 rgba(0,0,0,0.28) !important;
}

[data-theme="dark"] .hero-main-card {
    background: #111118 !important;
}

/* ── Project cards - image fills card, glass only on overlay ── */
.bento-work-grid .project-card {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 20px 0 rgba(0,0,0,0.30) !important;
    color: inherit;
    text-decoration: none;
}

.selected-project-card { color: inherit; text-decoration: none; }

/* ================================================================
   PROJECT BENTO - featured case studies + additional work
   ================================================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bento-work-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
}

.bento-work-grid .project-card:nth-child(1),
.bento-work-grid .project-card:nth-child(2),
.bento-work-grid .project-card:nth-child(3) { grid-column: span 4; }
.bento-work-grid .project-card:nth-child(4),
.bento-work-grid .project-card:nth-child(5) {
    grid-column: span 6;
    height: 360px !important;
}

.card-hierarchy-tag {
    position: absolute;
    z-index: 4;
    top: 18px;
    left: 18px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(12, 10, 18, 0.66);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255,255,255,0.8);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1;
    text-transform: uppercase;
}

.project-card.is-featured .card-hierarchy-tag {
    border-color: rgba(244,114,182,0.5);
    background: var(--accent);
    color: #fff;
}

/* Each featured story gets its own brand-colour atmosphere while
   retaining the same dark contrast and card hierarchy. */
.bento-work-grid .project-card:nth-child(1) .card-overlay {
    background: linear-gradient(to top, rgba(42,18,58,0.97) 0%, rgba(69,35,92,0.69) 49%, rgba(69,35,92,0.04) 88%);
}

.bento-work-grid .project-card:nth-child(2) .card-overlay {
    background: linear-gradient(to top, rgba(28,25,72,0.97) 0%, rgba(75,55,132,0.66) 49%, rgba(75,55,132,0.04) 88%);
}

.bento-work-grid .project-card:nth-child(3) .card-overlay {
    background: linear-gradient(to top, rgba(39,24,52,0.97) 0%, rgba(91,55,102,0.62) 49%, rgba(91,55,102,0.04) 88%);
}

.project-card.is-additional .card-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.42) 65%, rgba(0,0,0,0.04));
}

@media (max-width: 980px) {
    .bento-work-grid .project-card:nth-child(1),
    .bento-work-grid .project-card:nth-child(2),
    .bento-work-grid .project-card:nth-child(3) { grid-column: span 12; }
    .bento-work-grid .project-card:nth-child(4),
    .bento-work-grid .project-card:nth-child(5) { grid-column: span 6; }
}

@media (max-width: 780px) {
    .bento-work-grid { grid-template-columns: minmax(0, 1fr); }
    .bento-work-grid .project-card:nth-child(n) {
        grid-column: 1;
        height: 340px !important;
    }
    .bento-work-grid .project-card.is-additional { height: 320px !important; }
}

/* ================================================================
   HOW I WORK - dimensional glass workflow
   ================================================================ */
.how-bento--wide {
    position: relative;
    isolation: isolate;
    min-height: 360px;
    padding: 44px 46px !important;
    display: grid;
    grid-template-columns: minmax(210px, 0.7fr) minmax(0, 2fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 44px;
    row-gap: 18px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.015) 48%, rgba(244,114,182,0.05)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(244,114,182,0.06),
        0 18px 55px rgba(0,0,0,0.28) !important;
}

.how-bento--wide::before,
.how-bento--wide::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(12px);
    pointer-events: none;
}

.how-bento--wide::before {
    width: 360px;
    height: 360px;
    top: -210px;
    left: 9%;
    background: radial-gradient(circle, rgba(168,85,247,0.24), transparent 68%);
}

.how-bento--wide::after {
    width: 420px;
    height: 420px;
    right: -160px;
    bottom: -280px;
    background: radial-gradient(circle, rgba(244,114,182,0.22), transparent 68%);
}

.how-bento--wide > .label {
    grid-column: 1;
    grid-row: 1;
}

.how-bento--wide .how-bento-title {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    font-size: clamp(34px, 3.8vw, 54px);
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.how-bento--wide .how-bento-desc {
    grid-column: 1;
    grid-row: 3;
    max-width: 270px;
    margin: 0;
    font-size: 13px;
}

.how-bento--wide .process-flow {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    counter-reset: process-step;
}

.how-bento--wide .process-node {
    position: relative;
    min-width: 0;
    min-height: 178px;
    padding: 20px 12px 18px;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,0.085), rgba(255,255,255,0.025));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 28px rgba(0,0,0,0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    text-align: center;
    counter-increment: process-step;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.how-bento--wide .process-node::before {
    content: '0' counter(process-step);
    position: absolute;
    top: 12px;
    left: 13px;
    color: rgba(255,255,255,0.34);
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.how-bento--wide .process-node:hover {
    transform: translateY(-7px);
    border-color: rgba(244,114,182,0.42);
    background: linear-gradient(145deg, rgba(244,114,182,0.12), rgba(255,255,255,0.035));
}

.how-bento--wide .process-icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    border-color: rgba(244,114,182,0.28);
    color: #f9a8d4;
    background: linear-gradient(145deg, rgba(244,114,182,0.16), rgba(168,85,247,0.08));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 22px rgba(0,0,0,0.16);
}

.how-bento--wide .process-icon-circle--accent {
    border-color: rgba(244,114,182,0.72);
    color: #fff;
    background: linear-gradient(135deg, #f472b6, #c084fc);
    box-shadow: 0 10px 28px rgba(244,114,182,0.24);
}

.how-bento--wide .process-node span {
    color: rgba(255,255,255,0.72);
    font-size: 10px;
    line-height: 1.35;
}

.how-bento--wide .process-connector {
    width: 16px;
    height: 1px;
    flex: 0 0 16px;
    margin: 0;
    border: 0;
    background: linear-gradient(90deg, rgba(244,114,182,0.18), rgba(244,114,182,0.7));
    box-shadow: 0 0 10px rgba(244,114,182,0.2);
}

[data-theme="light"] .how-bento--wide .process-node {
    border-color: rgba(255,255,255,0.82);
    background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.3));
    box-shadow: inset 0 1px 0 #fff, 0 12px 28px rgba(76,29,149,0.08);
}

[data-theme="light"] .how-bento--wide .process-node::before,
[data-theme="light"] .how-bento--wide .process-node span { color: rgba(31,24,48,0.62); }

@media (max-width: 1050px) {
    .how-bento--wide {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }
    .how-bento--wide > .label,
    .how-bento--wide .how-bento-title,
    .how-bento--wide .how-bento-desc,
    .how-bento--wide .process-flow {
        grid-column: 1;
        grid-row: auto;
    }
    .how-bento--wide .how-bento-title br { display: none; }
    .how-bento--wide .how-bento-desc { max-width: 560px; }
    .how-bento--wide .process-flow { margin-top: 10px; }
}

@media (max-width: 780px) {
    .how-bento--wide { padding: 30px 22px !important; }
    .how-bento--wide .how-bento-title { font-size: 38px; }
    .how-bento--wide .process-flow {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .how-bento--wide .process-node {
        min-height: 92px;
        padding: 16px 18px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 14px;
        text-align: left;
    }
    .how-bento--wide .process-node::before {
        top: 10px;
        right: 12px;
        left: auto;
    }
    .how-bento--wide .process-connector {
        width: 1px;
        height: 10px;
        flex-basis: 10px;
        margin-left: 43px;
        background: linear-gradient(rgba(244,114,182,0.18), rgba(244,114,182,0.7));
    }
}