/* ============================================
   Self-hosted Space Grotesk font
   ============================================ */

/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================
   CSS Custom Properties — Brand Tokens
   (accent color & font to be confirmed with user)
   ============================================ */
:root {
    --color-bg:        #0c0d09;
    --color-bg-soft:   #14160e;
    --color-text:      #edf0e8;
    --color-text-muted:#b8c4a8;
    --color-accent:    #8fa83a;
    --color-accent-gold: #E8C547;
    --color-cream:     #F5F0E8;
    --color-border:    rgba(232, 197, 71, 0.2);

    --font-primary:    'Space Grotesk', sans-serif; /* to be confirmed */
    --font-size-base:  18px;

    --spacing-xs:  0.5rem;
    --spacing-sm:  1rem;
    --spacing-md:  2rem;
    --spacing-lg:  4rem;
    --spacing-xl:  8rem;

    --transition-base: 0.3s ease;
    --transition-slow: 0.6s ease;
}

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

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

/* ============================================
   Layout Utilities
   ============================================ */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.section {
    padding: var(--spacing-xl) 0;
}

/* ============================================
   Custom Cursor
   ============================================ */


/* ============================================
   Scroll Progress Bar
   ============================================ */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0%;
    background: var(--color-accent);
    z-index: 200;
    transition: width 0.05s linear;
}

/* ============================================
   Page Transition Overlay
   ============================================ */
.page-transition {
    position: fixed;
    inset: 0;
    background: var(--color-bg);
    z-index: 9990;
    pointer-events: none;
    opacity: 0;
}

/* ============================================
   Preloader
   ============================================ */
.preloader {
    position: fixed;
    inset: 0;
    background: #0c0d09;
    z-index: 9995;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader__logo {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    animation: preloaderPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               preloaderPulse 1.6s ease-in-out 0.5s infinite;
    opacity: 0;
}

@keyframes preloaderPop {
    0%   { opacity: 0; transform: scale(0.6); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes preloaderPulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.08); opacity: 0.75; }
}

/* ============================================
   Navigation
   ============================================ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0.45rem 3%;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
    background-color: rgba(143, 168, 58, 0.08);
}

.site-header.scrolled {
    background-color: rgba(143, 168, 58, 0.12);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border-bottom: 1px solid rgba(143, 168, 58, 0.15);
}

.nav {
    display: flex;
    align-items: center;
    width: 100%;
}

.nav__logo {
    display: flex;
    align-items: center;
    line-height: 1;
}

.nav__logo-img {
    height: 1.8rem;
    width: auto;
    display: block;
}

.nav__links {
    display: flex;
    gap: var(--spacing-md);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.nav__links a {
    font-size: 0.97rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
    transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease;
    position: relative;
    display: inline-block;
}

.nav__links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0%;
    height: 1px;
    background: var(--color-accent);
    transition: width 0.3s ease, left 0.3s ease;
}

.nav__links a:hover {
    opacity: 1;
    color: var(--color-accent);
    transform: translateY(-2px);
}

.nav__links a:hover::after {
    width: 100%;
    left: 0;
}


.nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
}

.nav__toggle span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--color-text);
    transition: var(--transition-base);
}

/* ============================================
   Mobile Full-Screen Menu
   ============================================ */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(12, 13, 9, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    padding: 1.5rem 2rem 2.5rem;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    overflow-y: auto;
}

.mobile-menu.is-open {
    transform: translateX(0);
}

.mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--color-border);
}

.mobile-menu__logo {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text);
}

.mobile-menu__close {
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.mobile-menu__nav {
    flex: 1;
    padding-top: 1rem;
}

.mobile-menu__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu__nav li {
    border-bottom: 1px solid var(--color-border);
}

.mobile-menu__nav a {
    display: block;
    font-size: clamp(1rem, 4vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-text);
    padding: 1rem 0;
    transition: color var(--transition-base);
}

.mobile-menu__nav a:hover {
    color: var(--color-accent);
}

.mobile-menu__footer {
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mobile-menu__email {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    transition: color var(--transition-base);
}

.mobile-menu__email:hover {
    color: var(--color-accent);
}

.mobile-menu__meta {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 0.6;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-block;
    position: relative;
    overflow: hidden;
    padding: 0.96rem 2.2rem;
    font-family: var(--font-primary);
    font-size: 0.94rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 50px;
    background-color: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-accent);
    transition: transform 0.3s ease, box-shadow 0.35s ease, border-color 0.3s ease, color 0.3s ease;
    transform: translateY(0);
}

/* Shine sweep — same as skill cards */
.btn::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -80%;
    width: 55%;
    height: 220%;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.18) 50%, transparent 65%);
    transform: skewX(-18deg);
    pointer-events: none;
    transition: left 0s;
}

.btn:hover::after {
    left: 130%;
    transition: left 0.5s ease;
}

.btn:hover {
    transform: translateY(-3px);
    border-color: var(--color-accent);
    color: var(--color-accent);
    box-shadow:
        0 0 18px rgba(143,168,58,0.4),
        0 0 50px rgba(143,168,58,0.15),
        inset 0 0 18px rgba(143,168,58,0.05);
}

.btn--primary {
    border-color: var(--color-accent);
    color: var(--color-text);
}

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

.btn--ghost {
    border-color: var(--color-accent);
    color: var(--color-text);
}

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

/* ============================================
   Section Title
   ============================================ */
.section-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--spacing-lg);
}

/* ============================================
   Hero Section — Character Layout
   ============================================ */
.hero {
    position: relative;
    width: 100%;
    aspect-ratio: 2042 / 756;
    max-height: 85vh;
    min-height: 280px;
    background-color: #0c0d09;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 5rem;
}

/* Soft purple radial glow */
.hero__bg-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(
        ellipse 70% 55% at 50% 52%,
        rgba(143, 168, 58, 0.18) 0%,
        rgba(143, 168, 58, 0.06) 45%,
        transparent 70%
    );
    pointer-events: none;
}

/* Big centered name */
.hero__title-wrap {
    position: relative;
    z-index: 2;
    text-align: center;
    pointer-events: none;
    user-select: none;
}

.hero__name {
    font-size: clamp(2.8rem, 8.5vw, 11rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    text-transform: lowercase;
    color: var(--color-text);
    white-space: nowrap;
}

.hero__name-line {
    display: block;
    overflow: hidden;
    transform: translateY(110%);
}

/* Hero artwork — stacked transparent PNG layers */
@keyframes artworkFloat {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-7px); }
}

@keyframes artworkShimmer {
    0%, 100% {
        filter: drop-shadow(0 0 20px rgba(143, 168, 58, 0.9))
                drop-shadow(0 0 50px rgba(143, 168, 58, 0.55))
                drop-shadow(0 0 80px rgba(143, 168, 58, 0.25));
    }
    50% {
        filter: drop-shadow(0 0 38px rgba(143, 168, 58, 1))
                drop-shadow(0 0 75px rgba(143, 168, 58, 0.8))
                drop-shadow(0 0 130px rgba(143, 168, 58, 0.5));
    }
}

.hero__artwork {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.hero__artwork__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    /* cubic-bezier(0.37, 0, 0.63, 1) = easeInOutSine — smoothest natural float */
    animation: artworkFloat 8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    will-change: transform;
}

/* Stagger layers independently — artwork-2 (child 1) & artwork-5 (child 4) share
   identical timing so they always move as one combined piece */
.hero__artwork__layer:nth-child(1) { animation-duration: 8.0s; animation-delay: 0.0s; }
.hero__artwork__layer:nth-child(2) { animation-duration: 9.2s; animation-delay: 0.6s; }
.hero__artwork__layer:nth-child(3) { animation-duration: 7.8s; animation-delay: 1.2s; }
.hero__artwork__layer:nth-child(4) { animation-duration: 8.0s; animation-delay: 0.0s; } /* same as child 1 — combined with artwork-2 */
.hero__artwork__layer:nth-child(5) { animation-duration: 9.0s; animation-delay: 1.5s; }
.hero__artwork__layer:nth-child(6) { animation-duration: 8.4s; animation-delay: 0.4s; }
.hero__artwork__layer:nth-child(7) { animation-duration: 7.6s; animation-delay: 1.8s; }
.hero__artwork__layer:nth-child(8) { animation-duration: 8.8s; animation-delay: 0.9s; }


/* Floating social icons — unique drift per icon */
@keyframes float-fb {
    0%   { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(4px, -5px) rotate(1deg); }
    50%  { transform: translate(-3px, -8px) rotate(-1deg); }
    75%  { transform: translate(-5px, -3px) rotate(0.5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes float-ig {
    0%   { transform: translate(0, 0) rotate(0deg); }
    30%  { transform: translate(-4px, -6px) rotate(-1deg); }
    60%  { transform: translate(3px, -9px) rotate(1deg); }
    80%  { transform: translate(5px, -4px) rotate(-0.5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes float-yt {
    0%   { transform: translate(0, 0) rotate(0deg); }
    20%  { transform: translate(-5px, -4px) rotate(1deg); }
    50%  { transform: translate(4px, -7px) rotate(-1deg); }
    75%  { transform: translate(3px, -3px) rotate(0.5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes float-wa {
    0%   { transform: translate(0, 0) rotate(0deg); }
    35%  { transform: translate(5px, -6px) rotate(-0.5deg); }
    65%  { transform: translate(-3px, -9px) rotate(1deg); }
    85%  { transform: translate(-4px, -2px) rotate(-1deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes float-em {
    0%   { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(-3px, -7px) rotate(1deg); }
    55%  { transform: translate(5px, -5px) rotate(-0.5deg); }
    80%  { transform: translate(2px, -3px) rotate(0.5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes float-li {
    0%   { transform: translate(0, 0) rotate(0deg); }
    30%  { transform: translate(4px, -5px) rotate(-1deg); }
    60%  { transform: translate(-4px, -8px) rotate(1deg); }
    80%  { transform: translate(-2px, -4px) rotate(-0.5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.hero__socials {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.hero__social-icon {
    position: absolute;
    width: clamp(64px, 7.5vw, 110px);
    height: clamp(64px, 7.5vw, 110px);
    opacity: 0;
    will-change: transform;
    pointer-events: auto;
    cursor: grab;
    user-select: none;
    text-decoration: none;
    display: block;
}

.hero__social-icon.is-dragging {
    cursor: grabbing;
    z-index: 10;
}

.hero__social-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 22%;
    background: rgba(10, 12, 6, 0.75) !important;
    border: 1.5px solid rgba(143, 168, 58, 0.7);
    box-shadow: 0 0 14px rgba(143, 168, 58, 0.35), inset 0 0 8px rgba(143, 168, 58, 0.08);
    backdrop-filter: blur(8px);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hero__social-icon:hover .hero__social-bg {
    transform: scale(1.12);
    box-shadow: 0 0 28px rgba(143, 168, 58, 0.6), inset 0 0 12px rgba(143, 168, 58, 0.12);
    border-color: rgba(143, 168, 58, 1);
}

.hero__social-icon svg {
    width: 72%;
    height: 72%;
}

.hero__social-icon--fb { top: 28%; left: 8%;     animation: float-fb 6.2s ease-in-out infinite;        animation-delay: 0s;   }
.hero__social-icon--ig { top: 22%; right: 4%;    animation: float-ig 7.1s ease-in-out infinite;        animation-delay: 0.8s; }
.hero__social-icon--yt { bottom: 28%; right: 7%; animation: float-yt 5.8s ease-in-out infinite;        animation-delay: 1.4s; }
.hero__social-icon--wa { bottom: 30%; left: 6%;  animation: float-wa 6.7s ease-in-out infinite;        animation-delay: 0.4s; }
.hero__social-icon--em { bottom: 20%; right: 3%; animation: float-em 7.4s ease-in-out infinite;        animation-delay: 1.1s; }
.hero__social-icon--li { bottom: 22%; left: 1%;  animation: float-li 6.0s ease-in-out infinite;        animation-delay: 0.6s; }

/* Tagline + CTA + scroll cue — single column, one anchor, no overlap */
.hero__footer {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    opacity: 0; /* animated in by GSAP */
}


.hero__cta {
    opacity: 1;
    padding: 1.1rem 3rem;
    font-size: 1rem;
    letter-spacing: 0.12em;
}

.hero__eyebrow {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
    opacity: 0; /* animated in by GSAP */
}



.hero__content .btn {
    margin-top: var(--spacing-lg);
    opacity: 0; /* animated in by GSAP */
}

.hero__hint {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    transform: none;
    background: rgba(10, 12, 6, 0.75);
    border: 1px solid rgba(143, 168, 58, 0.5);
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(143, 168, 58, 0.9);
    text-transform: lowercase;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 20px rgba(143, 168, 58, 0.2);
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hero__hint.is-visible {
    opacity: 1;
}

.hero__hint-icon {
    margin-right: 0.4rem;
    font-size: 0.7rem;
}

@media (max-width: 1024px) {
    .hero__hint { display: none; }
}

.hero__scroll-cue {
    position: static; /* flows inside .hero__footer flex column */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 0; /* animated in by GSAP */
}

.hero__scroll-cue {
    text-decoration: none;
    transition: color 0.3s ease;
}

.hero__scroll-cue .scroll-mouse {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.hero__scroll-cue:hover {
    color: var(--color-accent);
}

.hero__scroll-cue:hover .scroll-mouse {
    opacity: 1;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50%       { opacity: 1;   transform: scaleY(1.2); }
}

/* ============================================
   Section-by-section pastel tones
   ============================================ */
.hero                { background-color: #0c0d09; }
.about-preview       { background-color: #0f1009; padding: 0 !important; }
.featured-work       { background-color: #0d0f08; }
.art-carousel-section { background-color: #0d0f08; }
.shop-preview        { background-color: #11120a; }
.skills-section      { background-color: #0e0f09; padding-top: 9%; }
.about-page          { background-color: #000000; overflow: visible; }
.portfolio-hero      { background-color: #0f1009; }
.portfolio-section   { background-color: #0d0f08; }
.contact-hero        { background-color: #0e0f09; }
.contact-section     { background-color: #0c0d09; }

/* ============================================
   About Preview
   ============================================ */
.about-preview .container,
.skills-section .container {
    max-width: none;
}

.about-preview__inner {
    display: grid;
    grid-template-columns: 520px 1fr;
    gap: var(--spacing-lg);
    align-items: center;
    max-width: 100%;
}

.about-preview__text {
    max-width: 100%;
}

.about-preview__bio {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}

/* ── Pikachu widget ── */
.about-preview__pikachu {
    position: relative;
    width: min(100%, 1280px);
    aspect-ratio: 4 / 3;
    cursor: pointer;
    justify-self: center;
}

.pikachu__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.pikachu__body {
    pointer-events: auto; /* clickable */
    z-index: 3;
}

.pikachu__thunder {
    opacity: 0;
    mix-blend-mode: screen;
    z-index: 4;
}

@keyframes electricBlink {
    0%   { opacity: 1;    filter: brightness(1.2); }
    12%  { opacity: 0.3;  filter: brightness(2);   }
    20%  { opacity: 1;    filter: brightness(1);   }
    35%  { opacity: 0.15; filter: brightness(2.5); }
    42%  { opacity: 1;    filter: brightness(1.3); }
    58%  { opacity: 0.5;  filter: brightness(1.8); }
    65%  { opacity: 1;    filter: brightness(1);   }
    80%  { opacity: 0.2;  filter: brightness(2.2); }
    90%  { opacity: 1;    filter: brightness(1.4); }
    100% { opacity: 0.8;  filter: brightness(1);   }
}

@keyframes pikachuGlowPulse {
    0%, 100% { opacity: 0.45; }
    50%       { opacity: 1;    }
}

/* Glow pulses continuously — GSAP float is added via JS */
.pikachu__glow {
    animation: pikachuGlowPulse 2.4s ease-in-out infinite;
    z-index: 1;
}

/* Speech bubble — comic SVG, scales with Pikachu container */
.pikachu__speech {
    position: absolute;
    top: 15%;
    left: 20%;
    width: 28%;
    aspect-ratio: 2 / 1;
    pointer-events: none;
    z-index: 2;
    background: rgba(10, 12, 6, 0.88);
    border: 2px solid rgba(143, 168, 58, 0.65);
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(143, 168, 58, 0.3), inset 0 0 16px rgba(143, 168, 58, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

/* outer tail — long narrow point */
.pikachu__speech::after {
    content: '';
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 36px solid rgba(143, 168, 58, 0.65);
    z-index: 0;
}

/* inner tail fill */
.pikachu__speech::before {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 30px solid rgba(10, 12, 6, 0.88);
    z-index: 1;
}

.pikachu__speech-text {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(0.9rem, 2.4vw, 1.35rem);
    font-weight: 800;
    font-style: italic;
    color: #8fa83a;
    text-shadow: 0 0 10px rgba(143, 168, 58, 0.7);
    text-align: center;
    line-height: 1.4;
    padding: 0 10%;
}

@media (max-width: 768px) {
    .about-preview {
        padding-top: 20vw !important;
    }

    .about-preview__inner {
        grid-template-columns: 1fr;
        padding-left: 0;
        text-align: center;
    }
    .about-preview .section-title,
    .about-preview .page-eyebrow,
    .about-preview .about-preview__bio {
        padding-left: 0;
        text-align: center;
    }
    .about-preview__cta {
        padding-left: 0;
        text-align: center;
        margin-top: 5%;
        padding-bottom: 2rem;
    }
    .about-preview__pikachu {
        max-width: 420px;
        margin: 0 auto;
    }
    .pikachu__speech {
        width: 52%;
        left: 6%;
        top: 6%;
    }
}

/* ============================================
   Work Grid
   ============================================ */

/* Featured work text */
.featured-work .section-title,
.featured-work .page-eyebrow {
    color: var(--color-text);
}

.featured-work > .container:first-child {
    text-align: center;
}

/* About section title — centred on mobile, indented on desktop */
.about-preview .section-title,
.about-preview .page-eyebrow {
    text-align: center;
}

@media (min-width: 769px) {
    .about-preview .section-title,
    .about-preview .page-eyebrow,
    .about-preview .about-preview__bio {
        text-align: left;
        padding-left: 2rem;
    }
}

/* Button — default: below Pikachu for all sizes */
.about-preview__cta {
    text-align: center;
    margin-top: 5%;
    padding-bottom: 2rem;
    position: relative;
    z-index: 5;
}

/* Large desktop only — pull button up into the section */
@media (min-width: 1400px) {
    .about-preview__cta {
        margin-top: -6rem;
    }
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

/* ============================================
   Art Carousel
   ============================================ */
.art-carousel-section {
    padding-bottom: 0;
    background-color: #0d0f08;
    overflow: hidden;
}

.art-carousel-section .container {
    margin-bottom: var(--spacing-lg);
}

.art-carousel-section__cta {
    text-align: center;
    margin-top: var(--spacing-lg);
}

.art-carousel {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.art-carousel__row {
    overflow: hidden;
    height: 260px;
}

.art-carousel__track {
    display: flex;
    gap: 10px;
    width: max-content;
    will-change: transform;
}

.art-carousel__row--left .art-carousel__track {
    animation: carouselLeft 38s linear infinite;
}

.art-carousel__row--right .art-carousel__track {
    animation: carouselRight 44s linear infinite;
}


.art-carousel__item {
    flex-shrink: 0;
    width: 320px;
    height: 260px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(143,168,58,0.06);
}

.art-carousel__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transition: transform 0.6s ease;
}

.art-carousel__item:hover img {
    transform: scale(1.06);
}

@keyframes carouselLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes carouselRight {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* ============================================
   Shop Preview
   ============================================ */
.shop-preview {
    text-align: center;
    background-color: #11120a;
}

.shop-preview .section-title {
    color: var(--color-text);
}

.shop-preview__sub {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-lg);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   Portfolio Page
   ============================================ */
.portfolio-hero {
    padding-top: calc(var(--spacing-xl) + 80px);
    padding-bottom: 2rem;
}

.portfolio-hero__title {
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

/* ── Category filters ── */
.work-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 2rem;
}

.work-filter {
    padding: 0.5rem 1.25rem;
    border-radius: 100px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.work-filter:hover {
    border-color: rgba(143, 168, 58, 0.5);
    color: var(--color-text);
}

.work-filter.is-active {
    border-color: var(--color-accent);
    background: rgba(143, 168, 58, 0.12);
    color: var(--color-accent);
}

/* Hidden panels */
.work-panel.is-hidden {
    display: none;
}

/* ── Horizontal scroll gallery ── */
.work-horizontal {
    position: relative;
    height: 500px;
    overflow-x: scroll;
    overflow-y: hidden;
    background: #0c0d09;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.work-horizontal::-webkit-scrollbar {
    display: none;
}

.work-horizontal.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

/* Drag hint */
.work-hint {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.75;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.work-hint.is-hidden { opacity: 0; }

.work-hint__arrow {
    display: inline-block;
    animation: hintSlide 1.4s ease-in-out infinite;
}

@keyframes hintSlide {
    0%, 100% { transform: translateX(0); }
    50%       { transform: translateX(6px); }
}

/* Progress counter */
.work-progress {
    position: absolute;
    top: 2rem;
    right: 2.5rem;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    z-index: 10;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

/* Track */
.work-track {
    display: flex;
    height: 100%;
    will-change: transform;
}

/* Individual panel */
.work-panel {
    position: relative;
    height: 100%;
    width: 400px;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
}

/* Vary widths for rhythm */
.work-panel:nth-child(3n+1) { width: 360px; }
.work-panel:nth-child(3n+2) { width: 440px; }
.work-panel:nth-child(3n)   { width: 340px; }

.work-panel__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

.work-panel:hover .work-panel__img {
    transform: scale(1.04);
}

/* Dark gradient overlay at bottom */
.work-panel__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,11,7,0.85) 0%, transparent 55%);
    pointer-events: none;
}

/* Info block */
.work-panel__info {
    position: absolute;
    bottom: 3rem;
    left: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.work-panel__num {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    color: var(--color-text-muted);
}

.work-panel__cat {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.work-panel__title {
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-text);
    max-width: 20ch;
    transform: translateY(6px);
    transition: transform 0.4s ease;
}

.work-panel:hover .work-panel__title {
    transform: translateY(0);
}

/* Mobile: vertical stack, native touch scroll still works */
@media (max-width: 768px) {
    .work-horizontal {
        height: auto;
        overflow-x: hidden;
        overflow-y: visible;
        cursor: default;
    }

    .work-track {
        flex-direction: column;
        height: auto;
    }

    .work-panel,
    .work-panel:nth-child(3n+1),
    .work-panel:nth-child(3n+2),
    .work-panel:nth-child(3n) {
        width: 100%;
        height: 100vw;
    }

    .work-hint,
    .work-progress {
        display: none;
    }
}

/* ============================================
   Page Eyebrow
   ============================================ */
.page-eyebrow {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
}

/* ============================================
   About Page
   ============================================ */

/* Hero */
.about-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    height: 100vh;
    padding-left: 7%;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    background-color: #000000;
    position: relative;
    overflow: hidden;
}

.about-hero__text {
    padding-right: 4%;
    padding-top: calc(var(--spacing-xl) + 20px);
}

.about-hero__eyebrow {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeUp 0.8s ease 0.2s forwards;
}

.about-hero__title {
    font-size: clamp(3.5rem, 7vw, 6.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeUp 0.8s ease 0.4s forwards;
}

.about-hero__sub {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 2.5rem;
    opacity: 0;
    animation: fadeUp 0.8s ease 0.6s forwards;
}

.about-hero .btn {
    opacity: 0;
    animation: fadeUp 0.8s ease 0.8s forwards;
}

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

/* Character art column */
.about-hero__art {
    align-self: stretch;
    overflow: hidden;
}

.about-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* ── Marquee strip ── */
.about-marquee {
    background: #000000;
    border-top: 1px solid rgba(143, 168, 58, 0.15);
    border-bottom: 1px solid rgba(143, 168, 58, 0.15);
    overflow: hidden;
    padding: 1.2rem 0;
    margin-bottom: 0;
}

.about-marquee__track {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    animation: marqueeScroll 30s linear infinite;
}

.about-marquee__item {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 1;
    padding: 0 1.5rem;
    white-space: nowrap;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.about-marquee__item:hover {
    opacity: 1;
    color: var(--color-accent);
}

.about-marquee__dot {
    color: var(--color-accent);
    opacity: 0.4;
    font-size: 0.5rem;
    flex-shrink: 0;
}

@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-33.333%); }
}

/* Stats row */
.about-stats {
    background-color: #000000;
    padding: 5rem 5%;
}

.about-stats__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.about-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem 2.5rem;
    gap: 0.8rem;
    position: relative;
    cursor: default;
    background: rgba(10, 12, 6, 0.6);
    border: 1px solid rgba(143, 168, 58, 0.15);
    transition: border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
    overflow: hidden;
}

/* Accent top sweep line */
.about-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s ease;
}

.about-stat:hover::before {
    transform: scaleX(1);
}

.about-stat:hover {
    border-color: rgba(143, 168, 58, 0.5);
    background: rgba(10, 12, 6, 0.88);
    box-shadow:
        0 0 24px rgba(143, 168, 58, 0.18),
        0 0 60px rgba(143, 168, 58, 0.07),
        inset 0 0 28px rgba(143, 168, 58, 0.04);
}

.about-stat__num {
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--color-text);
    transition: color 0.35s ease;
    line-height: 1;
    position: relative;
}

.about-stat:hover .about-stat__num {
    color: var(--color-accent);
}

.about-stat__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Bio rows */
.about-bio {
    padding: 6rem 7%;
    background-color: #000000;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.about-bio__row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 3rem;
    align-items: start;
    padding: 2.5rem 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    position: relative;
    cursor: default;
    transition: background 0.3s ease;
}

.about-bio__row::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 0;
    background: var(--color-accent);
    transition: width 0.5s ease;
}

.about-bio__row:hover::before {
    width: 100%;
}

.about-bio__row:last-child {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.about-bio__label {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding-top: 0.3rem;
    transition: color 0.3s ease;
}

.about-bio__row:hover .about-bio__label {
    color: var(--color-accent);
}

.about-bio__text {
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--color-text-muted);
    max-width: 55ch;
    transition: color 0.3s ease;
}

.about-bio__row:hover .about-bio__text {
    color: var(--color-text);
}

/* Dragon wrap */
.dragon__wrap {
    position: relative;
    width: clamp(260px, 42vw, 580px);
    user-select: none;
    pointer-events: none;
    will-change: transform;
}

/* Aspect-ratio spacer */
.dragon__wrap::before {
    content: '';
    display: block;
    padding-top: 130%;
}

/* Dragon stage (used inside hero) */
.dragon-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Mobile */
@media (max-width: 900px) {
    .about-hero {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
        padding-right: 0;
    }

    .about-hero__text {
        padding-right: 7%;
        padding-top: calc(var(--spacing-xl) + 20px);
        order: 1;
    }

    .about-hero__art {
        order: 2;
        align-self: auto;
    }

    .about-hero__img {
        height: auto;
        object-fit: contain;
    }

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

    .about-stats {
        padding: 3rem 5%;
    }

    .about-bio__row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* Fire-breath glow — behind all layers */
.dragon__glow {
    position: absolute;
    inset: 10% 8%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 60%,
        rgba(80,200,60,0.55) 0%,
        rgba(30,160,20,0.28) 40%,
        transparent 70%);
    filter: blur(36px);
    animation: dragonBreath 2.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    will-change: opacity, transform;
}

@keyframes dragonBreath {
    0%, 100% { opacity: 0.35; transform: scale(1);    }
    50%       { opacity: 0.85; transform: scale(1.18); }
}

/* All layers stack exactly on top of each other */
.dragon__body {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    will-change: opacity, filter;
}

/* Shift red body to green using hue-rotate */
.dragon__red     { z-index: 1; filter: hue-rotate(120deg) saturate(1.4); animation: greenPulse 2.6s ease-in-out infinite; }
.dragon__gold    { z-index: 2; filter: hue-rotate(60deg) saturate(1.2); }
.dragon__texture { z-index: 3; opacity: 0.6; filter: hue-rotate(120deg); }
.dragon__eyes    { z-index: 4; animation: eyeGlowGreen 2.4s ease-in-out infinite; }
.dragon__sparkle { z-index: 5; opacity: 0; filter: hue-rotate(120deg); }

/* Green body pulse */
@keyframes greenPulse {
    0%, 100% { filter: hue-rotate(120deg) saturate(1.4) drop-shadow(0 0 12px rgba(60,220,60,0.5)); }
    50%       { filter: hue-rotate(120deg) saturate(1.8) drop-shadow(0 0 38px rgba(80,255,80,0.95)) drop-shadow(0 0 70px rgba(30,180,30,0.5)); }
}

/* Eyes glow green */
@keyframes eyeGlowGreen {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(80,255,80,0.6)); opacity: 0.85; }
    50%       { filter: drop-shadow(0 0 22px rgba(100,255,100,1)) drop-shadow(0 0 50px rgba(60,200,60,0.7)); opacity: 1; }
}

/* ── Mobile ── */
@media (max-width: 900px) {
    .about-timeline-wrap {
        grid-template-columns: 1fr;
    }

    .about-dragon-sticky {
        display: none;
    }

    .about-chapter {
        min-height: 70vh;
        padding: 5rem 6% 4rem;
    }

    .chapter-num {
        font-size: clamp(4rem, 20vw, 8rem);
    }

    .chapter-title {
        font-size: clamp(2rem, 7vw, 3rem);
    }
}

/* ============================================
   Skills Section
   ============================================ */
.skills-section { background-color: #0e0f09; padding-top: 0.5rem; padding-bottom: 1rem; }

.skills-section .section-title,
.skills-section .page-eyebrow {
    padding-left: 2rem;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
}

.skill-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.25rem 1.75rem;
    border: 1px solid rgba(143, 168, 58, 0.18);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(143,168,58,0.08) 0%, rgba(12,13,9,0.95) 100%);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
    cursor: default;
}

/* Glowing box-shadow on hover */
.skill-card:hover {
    border-color: rgba(143, 168, 58, 0.65);
    box-shadow:
        0 0 24px rgba(143,168,58,0.22),
        0 0 60px rgba(143,168,58,0.09),
        inset 0 0 28px rgba(143,168,58,0.05);
}

/* Shine sweep across card on hover */
.skill-card::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -80%;
    width: 55%;
    height: 220%;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.07) 50%, transparent 65%);
    transform: skewX(-18deg);
    pointer-events: none;
    transition: left 0s;
}
.skill-card:hover::after {
    left: 130%;
    transition: left 0.55s ease;
}

/* Icon wrapper — circular glow ring */
.skill-card__icon {
    position: relative;
    width: 68px;
    height: 68px;
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pulsing ring behind the icon */
.skill-card__icon::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(143,168,58,0.25) 0%, transparent 70%);
    animation: iconRingPulse 2.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes iconRingPulse {
    0%, 100% { transform: scale(0.9);  opacity: 0.5; }
    50%       { transform: scale(1.15); opacity: 1;   }
}

.skill-card__icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 6px rgba(143,168,58,0.5));
    transition: transform 0.4s ease;
}

.skill-card:hover .skill-card__icon svg {
    transform: rotate(-12deg) scale(1.15);
    filter: drop-shadow(0 0 14px rgba(143,168,58,0.9));
}

.skill-card__name {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text);
    transition: color 0.3s ease;
}

.skill-card:hover .skill-card__name {
    color: var(--color-accent);
}

@media (max-width: 1024px) {
    .skills-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .skills-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   About — Lightbox
   ============================================ */
.about-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(12, 13, 9, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.about-lightbox.is-open {
    opacity: 1;
    pointer-events: all;
}

.about-lightbox__img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
}

.about-lightbox__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    padding: 0.25rem 0.5rem;
}

.about-lightbox__close:hover {
    opacity: 1;
}

/* ============================================
   Contact Page
   ============================================ */
.contact-hero {
    padding-top: calc(var(--spacing-xl) + 80px);
    padding-bottom: 2rem;
}

.contact-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.contact-hero__title {
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

/* ── Scroll down indicator ── */
.scroll-down-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-text-muted);
    text-decoration: none;
    margin: 2rem auto 0;
    width: fit-content;
    transition: color 0.3s ease;
}

.scroll-down-indicator:hover {
    color: var(--color-accent);
}

.scroll-mouse {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.scroll-down-indicator:hover .scroll-mouse {
    opacity: 1;
}

.scroll-mouse__dot {
    animation: scrollDot 1.8s ease-in-out infinite;
}

.scroll-down-indicator__label {
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.5;
}

@keyframes scrollDot {
    0%   { transform: translateY(0);    opacity: 1; }
    60%  { transform: translateY(16px); opacity: 0.2; }
    100% { transform: translateY(0);    opacity: 1; }
}

/* ── Layla widget ── */

/* ── Layla hint ── */
.layla__hint {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: rgba(10, 12, 6, 0.75);
    border: 1px solid rgba(143, 168, 58, 0.5);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    padding: 0.4rem 0.75rem;
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.layla__hint.is-visible {
    opacity: 1;
}

.layla__hint-icon {
    margin-right: 0.3rem;
    font-size: 0.65rem;
}

/* ── Layla widget ── */
.layla-widget {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    cursor: pointer;
}

.layla__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.layla__color {
    z-index: 2;
}

.layla__hair {
    z-index: 3;
    mix-blend-mode: multiply;
}

.layla__body {
    pointer-events: auto;
    z-index: 4;
}

.layla__face {
    z-index: 4;
    mix-blend-mode: multiply;
}

.layla__light {
    z-index: 5;
    mix-blend-mode: screen;
}

.layla__light--closed {
    opacity: 0.85;
}

.layla__light--open {
    opacity: 0;
    z-index: 6;
}

.layla__light--glow {
    opacity: 0;
    z-index: 7;
    mix-blend-mode: screen;
}

.layla__sparkle-glow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    opacity: 0;
    z-index: 8;
    mix-blend-mode: screen;
}

.layla__crystal {
    z-index: 9;
}

.layla__sparkle {
    z-index: 10;
    mix-blend-mode: screen;
}

@keyframes laylaStaticFlicker {
    0%   { opacity: 1;    filter: brightness(2.5); }
    6%   { opacity: 0.5;  filter: brightness(1.2); }
    9%   { opacity: 1;    filter: brightness(3.2); }
    18%  { opacity: 0.7;  filter: brightness(1.8); }
    22%  { opacity: 1;    filter: brightness(3);   }
    38%  { opacity: 0.55; filter: brightness(1.4); }
    42%  { opacity: 1;    filter: brightness(2.8); }
    60%  { opacity: 0.8;  filter: brightness(2);   }
    65%  { opacity: 1;    filter: brightness(3);   }
    80%  { opacity: 0.65; filter: brightness(1.6); }
    88%  { opacity: 1;    filter: brightness(2.5); }
    100% { opacity: 1;    filter: brightness(2.5); }
}

@keyframes laylaSparkleFloat {
    0%, 100% { opacity: 0.6; transform: translateY(0) scale(1); }
    50%       { opacity: 1;   transform: translateY(-6px) scale(1.05); }
}

.layla__sparkle {
    animation: laylaSparkleFloat 2.2s ease-in-out infinite;
}

.layla__glow {
    animation: laylaGlowPulse 2.8s ease-in-out infinite;
    z-index: 1;
}

@keyframes laylaGlowPulse {
    0%, 100% { opacity: 0.2; }
    50%       { opacity: 0.45; }
}

.layla__speech {
    position: absolute;
    top: 8%;
    left: 10%;
    width: 55%;
    aspect-ratio: 2.5 / 1;
    pointer-events: none;
    z-index: 5;
    background: rgba(10, 12, 6, 0.88);
    border: 2px solid rgba(143, 168, 58, 0.65);
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(143, 168, 58, 0.3), inset 0 0 16px rgba(143, 168, 58, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.layla__speech::after {
    content: '';
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 36px solid rgba(143, 168, 58, 0.65);
    z-index: 0;
}

.layla__speech::before {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 30px solid rgba(10, 12, 6, 0.88);
    z-index: 1;
}

.layla__speech-text {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(0.75rem, 1.8vw, 1.1rem);
    font-weight: 800;
    font-style: italic;
    color: #8fa83a;
    text-shadow: 0 0 10px rgba(143, 168, 58, 0.7);
    text-align: center;
    line-height: 1.4;
    padding: 0 10%;
}

@media (max-width: 900px) {
    .contact-hero {
        padding-top: calc(var(--spacing-xl) + 20px);
    }
    .contact-hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .layla-widget {
        max-width: 320px;
        margin: 0 auto;
    }
    .layla__speech {
        width: 60%;
        left: 50%;
        transform: translateX(-50%);
    }
}

.contact-section {
    padding: var(--spacing-xl) 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--spacing-xl);
    align-items: start;
}

/* Form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.form-group input,
.form-group textarea {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1rem;
    padding: 0.875rem 1rem;
    outline: none;
    transition: border-color var(--transition-base);
    resize: none;
    width: 100%;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-text-muted);
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--color-accent);
}

.form-status {
    font-size: 0.9rem;
    min-height: 1.4em;
}

.form-status.success { color: #6ab87a; }
.form-status.error   { color: var(--color-accent); }

/* Info Panel */
.contact-info {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.contact-info__block {
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-md);
}

.contact-info__heading {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.contact-info__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.4rem;
}

.contact-info__text {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.7;
}

.contact-info__link {
    font-size: 1rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    transition: border-color var(--transition-base), color var(--transition-base);
}

.contact-info__link:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
    .contact-info {
        position: static;
    }
}


/* ============================================
   Shop — Archive (Product Grid)
   ============================================ */
.shop-hero {
    padding-top: calc(var(--spacing-xl) + 80px);
    padding-bottom: 0;
}

.shop-hero__title {
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.shop-hero__sub {
    margin-top: var(--spacing-sm);
    font-size: 1.05rem;
    color: var(--color-text-muted);
}

.shop-section {
    padding: var(--spacing-xl) 0;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.shop-empty {
    color: var(--color-text-muted);
    font-size: 1rem;
    padding: var(--spacing-xl) 0;
}

/* Product Card */
.shop-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.shop-card__thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-bg-soft);
}

.shop-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.shop-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1e14 0%, #202618 100%);
}

.shop-card:hover .shop-card__image {
    transform: scale(1.04);
}

.shop-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(143, 168, 58, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.shop-card:hover .shop-card__overlay {
    opacity: 1;
}

.shop-card__cta {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid var(--color-text);
    padding: 0.6rem 1.4rem;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.shop-card:hover .shop-card__cta {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.shop-card__meta {
    padding: var(--spacing-sm) 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.shop-card__title {
    font-size: 0.95rem;
    font-weight: 500;
}

.shop-card__price {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.shop-card__price .woocommerce-Price-amount {
    color: var(--color-text);
    font-weight: 600;
}

/* WooCommerce pagination */
.woocommerce-pagination {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xl);
}

.woocommerce-pagination .page-numbers {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    font-size: 0.85rem;
    transition: all var(--transition-base);
}

.woocommerce-pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers.current {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ============================================
   Shop — Single Product
   ============================================ */
.single-product-section {
    padding-top: calc(var(--spacing-xl) + 80px);
    padding-bottom: var(--spacing-xl);
}

.woocommerce-product-gallery,
.woocommerce div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.product-gallery__main img,
.product-gallery__img {
    width: 100%;
    object-fit: cover;
}

.product-gallery__thumbs {
    display: flex;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

.product-gallery__thumb {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: border-color var(--transition-base);
}

.product-gallery__thumb:hover {
    border-color: var(--color-accent);
}

.product-gallery__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product summary */
.woocommerce-product-details__short-description,
.product_title,
.woocommerce-Price-amount,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--color-text);
    font-family: var(--font-primary);
}

.product_title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: var(--spacing-sm);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    display: block;
}

.woocommerce-product-details__short-description {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
}

/* Add to cart button */
.single_add_to_cart_button,
button.single_add_to_cart_button {
    background: var(--color-text) !important;
    color: var(--color-bg) !important;
    font-family: var(--font-primary) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    border: none !important;
    padding: 1rem 2.5rem !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    width: 100%;
}

.single_add_to_cart_button:hover {
    background: var(--color-accent) !important;
    color: var(--color-text) !important;
}

/* Quantity input */
.quantity .qty {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 1rem;
    padding: 0.75rem 1rem;
    width: 80px;
    text-align: center;
}

/* ============================================
   Shop — Cart & Checkout (base styles)
   ============================================ */
.woocommerce-cart-form,
.woocommerce-checkout,
.woocommerce-account {
    padding-top: calc(var(--spacing-xl) + 80px);
    padding-bottom: var(--spacing-xl);
    max-width: 1280px;
    margin: 0 auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.woocommerce table.shop_table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-primary);
    color: var(--color-text);
}

.woocommerce table.shop_table th {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-sm);
    text-align: left;
}

.woocommerce table.shop_table td {
    padding: var(--spacing-md) var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.woocommerce table.shop_table .product-name a {
    font-weight: 500;
    transition: color var(--transition-base);
}

.woocommerce table.shop_table .product-name a:hover {
    color: var(--color-accent);
}

/* WC form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    background: var(--color-bg-soft) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
    font-family: var(--font-primary) !important;
    font-size: 1rem !important;
    padding: 0.875rem 1rem !important;
    width: 100%;
    outline: none;
    transition: border-color var(--transition-base);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--color-accent) !important;
}

.woocommerce form .form-row label {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--color-text-muted) !important;
    font-family: var(--font-primary) !important;
}

/* WC buttons */
.woocommerce #payment #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background: var(--color-text) !important;
    color: var(--color-bg) !important;
    font-family: var(--font-primary) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    border: none !important;
    padding: 1rem 2.5rem !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    display: inline-block;
    width: 100%;
    text-align: center;
}

.woocommerce #payment #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background: var(--color-accent) !important;
    color: var(--color-text) !important;
}

/* WC notices */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
    background: var(--color-bg-soft);
    border-top: 2px solid var(--color-accent);
    color: var(--color-text);
    font-family: var(--font-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    list-style: none;
}

@media (max-width: 768px) {
    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .woocommerce div.product {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .shop-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Footer — Option A: minimal centred
   ============================================ */
.site-footer {
    background-color: #0a0b07;
    border-top: 1px solid rgba(143, 168, 58, 0.12);
}

/* ── Nav Buddy — Brand Mascot "Lumi" ─────────────────────────────────────── */
.nav-buddy {
    margin-left: auto;
    margin-right: 0.75rem;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    outline: none;
    width: 82px;
    height: 76px;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
}

/* ── Wrap — GSAP 3D tracking, isolated from CSS float ── */
.buddy__wrap {
    position: absolute;
    bottom: 6px;
    left: 12px;          /* (82 - 58) / 2 = 12px */
    width: 58px;
    height: 64px;
    overflow: visible;
    will-change: transform;
    transform-origin: center center;
    transform-style: preserve-3d;
}

/* ── Body — Aang bald head, warm skin with flat plane shading ── */
.buddy__body {
    position: absolute;
    inset: 0;
    width: 58px;
    height: 64px;
    /* Rounder dome at top, slightly tapered jaw — closer to Aang's round head */
    border-radius: 50% 50% 46% 46% / 58% 58% 40% 40%;
    /* Warm peachy skin tone with light-source gradient */
    background: linear-gradient(160deg, #F5D9B0 0%, #EAC080 48%, #D4A070 100%);
    border: 1.5px solid rgba(150,95,45,0.3);
    box-shadow:
        0 6px 20px rgba(0,0,0,0.42),
        inset 0 1px 4px rgba(255,235,190,0.35),
        inset 0 -4px 10px rgba(130,70,15,0.22);
    animation: buddyFloat 3.6s ease-in-out infinite;
    will-change: transform;
    isolation: isolate;
    z-index: 1;
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.nav-buddy:hover .buddy__body {
    border-color: rgba(180,130,70,0.6);
    box-shadow:
        0 6px 20px rgba(0,0,0,0.42),
        0 0 14px rgba(200,160,80,0.22),
        inset 0 1px 4px rgba(255,230,180,0.3),
        inset 0 -4px 10px rgba(140,80,20,0.22);
}

/* ── Eyes — white sclera, anime style, overflow:hidden for clip-path moods ── */
.buddy__eye {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #F5F2ED;
    box-shadow: 0 1px 3px rgba(0,0,0,0.22);
    overflow: hidden;
    animation: buddyBlink 5.5s ease-in-out infinite;
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.3s ease, clip-path 0.32s ease;
}
/* Eyes sit below brows */
.buddy__eye--l { top: 30px; left: 8px;  animation-delay: 0s;    }
.buddy__eye--r { top: 30px; right: 8px; animation-delay: 0.16s; }
.nav-buddy:hover .buddy__eye {
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ── Pupil — grey anime iris + dark center, GSAP x/y tracking ── */
.buddy__pupil {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 33% 28%, #5A5E6A 0%, #1A1A2E 72%, #0A0A14 100%);
    will-change: transform;
}

/* ── Pupil highlight ── */
.buddy__hl {
    position: absolute;
    width: 2.5px;
    height: 2.5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.72);
    top: 1px;
    right: 0.5px;
    pointer-events: none;
}

/* ── Mouth — subtle confident smile ── */
.buddy__mouth {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 5px;
    border-bottom: 2px solid rgba(100,60,20,0.65);
    border-left:  1.5px solid rgba(100,60,20,0.38);
    border-right: 1.5px solid rgba(100,60,20,0.38);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: transparent;
    transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

/* ── Ears — peek out from behind the face ── */
.buddy__ear {
    position: absolute;
    width: 11px;
    height: 15px;
    background: linear-gradient(160deg, #F0D0A0 0%, #D4A070 100%);
    border-radius: 50%;
    border: 1.5px solid rgba(130,75,20,0.25);
    top: 23px;
    z-index: 0; /* sits behind .buddy__body (z-index: 1) */
}
.buddy__ear--l { left:  -3px; }
.buddy__ear--r { right: -3px; }

/* ── Forehead arrow — Aang's signature arrow: thin stem + wide chevron head ── */
.buddy__arrow {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 40px;
    background: #9DC8E8;
    /* Thin stem (42–58%) runs from crown, opens into wide chevron arrowhead at 50% */
    clip-path: polygon(
        42%   0%,   /* stem top-left  — thin */
        58%   0%,   /* stem top-right — thin */
        58%  50%,   /* right shoulder */
        100% 50%,   /* right wing tip */
        50% 100%,   /* arrow bottom tip */
        0%   50%,   /* left wing tip */
        42%  50%    /* left shoulder */
    );
    pointer-events: none;
    transition: filter 0.3s ease, background 0.3s ease;
}

/* ── Eyebrows — bold dark bars, Aang's distinctive brows ── */
.buddy__brow {
    position: absolute;
    width: 13px;
    height: 2.5px;
    border-radius: 2px;
    background: #2B1A08;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.buddy__brow--l { top: 24px; left:  6px; transform: rotate(-8deg); }
.buddy__brow--r { top: 24px; right: 6px; transform: rotate(8deg);  }

/* ── Sparkles — gold 4-pt stars, drift around body ── */
.buddy__spark {
    position: absolute;
    width: 5px;
    height: 5px;
    background: #E8C547;
    clip-path: polygon(50% 0%,55% 45%,100% 50%,55% 55%,50% 100%,45% 55%,0% 50%,45% 45%);
    opacity: 0.55;
    pointer-events: none;
}
.buddy__spark--1 { top: -5px;   right: -3px;  animation: sparkDrift1 3.9s ease-in-out infinite; }
.buddy__spark--2 { top: 24px;   left: -7px;   animation: sparkDrift2 4.7s ease-in-out infinite 0.9s; }
.buddy__spark--3 { bottom: 0px; right: -5px;  animation: sparkDrift3 3.4s ease-in-out infinite 1.6s; }

/* ── Speech bubble — olive palette ── */
.nav-buddy__speech {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: rgba(10,12,7,0.97);
    border: 1px solid rgba(143,168,58,0.32);
    color: #8fa83a;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 10;
}
.nav-buddy__speech::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: rgba(143,168,58,0.32);
}
.nav-buddy:hover .nav-buddy__speech {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ── Keyframes ── */
@keyframes buddyFloat {
    0%, 100% { transform: translateY(0)    rotate(0deg);   }
    30%       { transform: translateY(-5px) rotate(-2deg);  }
    70%       { transform: translateY(-3px) rotate(1.5deg); }
}
@keyframes buddyBlink {
    0%, 86%, 100% { transform: scaleY(1);    }
    90%           { transform: scaleY(0.05); }
}
@keyframes sparkDrift1 {
    0%, 100% { transform: translate(0,0)      scale(1);   opacity: 0.55; }
    45%       { transform: translate(3px,-5px) scale(1.3); opacity: 0.9;  }
    75%       { transform: translate(1px,-2px) scale(0.8); opacity: 0.45; }
}
@keyframes sparkDrift2 {
    0%, 100% { transform: translate(0,0)       scale(1);   opacity: 0.45; }
    50%       { transform: translate(-4px,3px)  scale(1.25);opacity: 0.85; }
}
@keyframes sparkDrift3 {
    0%, 100% { transform: translate(0,0)     rotate(0deg);   opacity: 0.5; }
    48%       { transform: translate(3px,-4px) rotate(45deg); opacity: 0.9; }
    80%       { transform: translate(1px,-2px) rotate(20deg); opacity: 0.6; }
}
@keyframes buddyClick {
    0%   { transform: scale(1)    rotate(0deg);  }
    18%  { transform: scale(1.18) rotate(5deg);  }
    48%  { transform: scale(0.9)  rotate(-3deg); }
    74%  { transform: scale(1.06) rotate(1.5deg);}
    100% { transform: scale(1)    rotate(0deg);  }
}
.nav-buddy.pika--clicking .buddy__body {
    animation: buddyClick 0.48s ease-out !important;
}

/* ── MOODS ── */

/* EXCITED — squint eyes, wide smile, brows raised */
.buddy__body[data-mood="excited"] .buddy__eye {
    clip-path: inset(50% 0 0 0 round 50%);
    transform: translateY(3px);
    animation: none;
}
.buddy__body[data-mood="excited"] .buddy__mouth {
    width: 18px;
    height: 9px;
    border-radius: 0 0 12px 12px;
    border-bottom-width: 2.5px;
    border-color: rgba(100,60,20,0.8);
}
.buddy__body[data-mood="excited"] .buddy__brow { transform: translateY(-2px) rotate(-8deg); }
.buddy__body[data-mood="excited"] .buddy__brow--r { transform: translateY(-2px) rotate(8deg); }
.buddy__body[data-mood="excited"] .buddy__spark { opacity: 0.95; animation-duration: 1.6s; }

/* CURIOUS — left brow raised, right eye slightly larger */
.buddy__body[data-mood="curious"] .buddy__eye--r { transform: scale(1.1); }
.buddy__body[data-mood="curious"] .buddy__mouth  { width: 10px; height: 4px; }
.buddy__body[data-mood="curious"] .buddy__brow--l { transform: translateY(-2px) rotate(-8deg); }

/* HAPPY — full squint, big smile, brows raised */
.buddy__body[data-mood="happy"] .buddy__eye {
    clip-path: inset(48% 0 0 0 round 50%);
    transform: translateY(3px);
    animation: none;
}
.buddy__body[data-mood="happy"] .buddy__mouth {
    width: 18px;
    height: 8px;
    border-radius: 0 0 12px 12px;
    border-bottom-width: 2.5px;
    border-color: rgba(100,60,20,0.85);
}
.buddy__body[data-mood="happy"] .buddy__brow { transform: translateY(-2px) rotate(-8deg); }
.buddy__body[data-mood="happy"] .buddy__brow--r { transform: translateY(-2px) rotate(8deg); }

/* WINK — right eye + right brow */
.buddy__body[data-mood="wink"] .buddy__eye--r {
    clip-path: inset(48% 0 0 0 round 50%);
    transform: translateY(3px);
    animation: none;
}
.buddy__body[data-mood="wink"] .buddy__brow--r { transform: translateY(2px) rotate(12deg); }

/* THINKING — eyes narrowed, brows furrowed inward, flat mouth */
.buddy__body[data-mood="thinking"] .buddy__eye {
    clip-path: inset(0 0 22% 0 round 50%);
    animation: none;
}
.buddy__body[data-mood="thinking"] .buddy__mouth {
    width: 10px;
    height: 3px;
    border-left: none;
    border-right: none;
    border-radius: 0;
}
.buddy__body[data-mood="thinking"] .buddy__brow--l { transform: translateY(2px) rotate(-12deg) translateX(3px); }
.buddy__body[data-mood="thinking"] .buddy__brow--r { transform: translateY(2px) rotate(12deg)  translateX(-3px); }

/* AVATAR STATE — white glowing eyes + arrow (triggered by 3 rapid taps) */

/* White aura radiating around the whole head */
.buddy__body[data-mood="avatar"] {
    box-shadow:
        0 0 0   3px  rgba(255,255,255,0.55),
        0 0 12px 6px rgba(255,255,255,0.35),
        0 0 28px 10px rgba(255,255,255,0.2),
        0 0 52px 16px rgba(255,255,255,0.1);
    animation: buddyFloat 3.6s ease-in-out infinite, avatarAuraPulse 0.85s ease-in-out infinite alternate;
    border-color: rgba(255,255,255,0.7);
}

.buddy__body[data-mood="avatar"] .buddy__eye {
    background: #ffffff;
    clip-path: none !important;
    transform: none !important;
    animation: avatarEyePulse 0.75s ease-in-out infinite alternate;
    box-shadow:
        0 0 6px  rgba(255,255,255,0.95),
        0 0 18px rgba(255,255,255,0.75),
        0 0 38px rgba(255,255,255,0.45);
}
.buddy__body[data-mood="avatar"] .buddy__pupil {
    opacity: 0;
}
.buddy__body[data-mood="avatar"] .buddy__hl {
    opacity: 0;
}
.buddy__body[data-mood="avatar"] .buddy__arrow {
    background: #ffffff;
    animation: avatarArrowPulse 0.75s ease-in-out infinite alternate;
    /* filter:drop-shadow works with clip-path, box-shadow does not */
    filter:
        drop-shadow(0 0 5px rgba(255,255,255,1))
        drop-shadow(0 0 14px rgba(255,255,255,0.85))
        drop-shadow(0 0 30px rgba(255,255,255,0.5));
}
/* Stern brows in avatar state */
/* Stern brows in avatar state */
.buddy__body[data-mood="avatar"] .buddy__brow--l { transform: translateY(1px) rotate(-14deg) translateX(2px); }
.buddy__body[data-mood="avatar"] .buddy__brow--r { transform: translateY(1px) rotate(14deg)  translateX(-2px); }
/* Flat neutral mouth */
.buddy__body[data-mood="avatar"] .buddy__mouth {
    width: 10px;
    border-left: none;
    border-right: none;
    border-radius: 0;
    border-color: rgba(80,45,10,0.7);
}

/* Charge hint on second tap — brief arrow brightening */
.buddy--charging .buddy__arrow {
    filter:
        drop-shadow(0 0 3px rgba(255,255,255,0.9))
        drop-shadow(0 0 8px rgba(255,255,255,0.6));
    transition: filter 0.1s ease;
}

@keyframes avatarAuraPulse {
    from {
        box-shadow:
            0 0 0   3px  rgba(255,255,255,0.55),
            0 0 12px 6px  rgba(255,255,255,0.35),
            0 0 28px 10px rgba(255,255,255,0.2),
            0 0 52px 16px rgba(255,255,255,0.1);
    }
    to {
        box-shadow:
            0 0 0   4px  rgba(255,255,255,0.75),
            0 0 18px 9px  rgba(255,255,255,0.5),
            0 0 40px 16px rgba(255,255,255,0.3),
            0 0 72px 24px rgba(255,255,255,0.15);
    }
}
@keyframes avatarEyePulse {
    from {
        box-shadow:
            0 0 6px  rgba(255,255,255,0.95),
            0 0 18px rgba(255,255,255,0.75),
            0 0 38px rgba(255,255,255,0.45);
    }
    to {
        box-shadow:
            0 0 10px rgba(255,255,255,1),
            0 0 28px rgba(255,255,255,0.9),
            0 0 58px rgba(255,255,255,0.65);
    }
}
@keyframes avatarArrowPulse {
    from {
        filter:
            drop-shadow(0 0 5px  rgba(255,255,255,1))
            drop-shadow(0 0 14px rgba(255,255,255,0.85))
            drop-shadow(0 0 30px rgba(255,255,255,0.5));
    }
    to {
        filter:
            drop-shadow(0 0 9px  rgba(255,255,255,1))
            drop-shadow(0 0 22px rgba(255,255,255,0.95))
            drop-shadow(0 0 50px rgba(255,255,255,0.7));
    }
}

/* Hide on mobile */
@media (max-width: 768px) {
    .nav-buddy { display: none; }
}

/* Back to top button */
.back-to-top-wrap {
    display: flex;
    justify-content: center;
    padding: 1rem 0 5px;
    margin-bottom: 0 !important;
}

.back-to-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.back-to-top .scroll-mouse {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.back-to-top:hover {
    color: var(--color-accent);
}

.back-to-top:hover .scroll-mouse {
    opacity: 1;
}

.scroll-mouse__dot--up {
    animation: scrollDotUp 1.8s ease-in-out infinite;
}

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

/* Centred column */
.footer__body {
    width: 100%;
    padding: 4.5rem 6vw 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    box-sizing: border-box;
    text-align: center;
}

/* Logo: favicon + wordmark */
.footer__logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    margin-bottom: 0.25rem;
}

.footer__favicon {
    height: 1.8rem;
    width: 1.8rem;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.footer__wordmark {
    font-size: 1.27rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    transition: color 0.25s ease;
}

.footer__logo-link:hover .footer__wordmark {
    color: var(--color-accent);
}

/* Tagline */
.footer__tagline {
    font-size: 1.01rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* Email */
.footer__email {
    display: inline-block;
    font-size: 1.04rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    position: relative;
    transition: color 0.25s ease;
}

.footer__email::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--color-accent);
    transform: translateX(-50%);
    transition: width 0.35s ease;
}

.footer__email:hover { color: var(--color-accent); }
.footer__email:hover::after { width: 100%; }

/* Social icons */
.footer__socials {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.footer__social-link {
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.footer__social-link:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateY(-3px);
}

/* Nav — single horizontal row */
.footer__nav {
    margin-top: 0.5rem;
}

.footer__nav-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.15rem;
}

/* Dot separator between items */
.footer__nav-list li + li::before {
    content: '·';
    color: var(--color-text-muted);
    opacity: 0.3;
    margin-right: 0.15rem;
}

.footer__nav-list a {
    font-size: 1.01rem;
    color: var(--color-text-muted);
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.2s ease, color 0.2s ease;
    padding: 0.1rem 0.2rem;
}

.footer__nav-list a:hover {
    opacity: 1;
    color: var(--color-accent);
}

/* Rule */
.footer__rule {
    margin: 0 6vw;
    width: calc(100% - 12vw);
    height: 1px;
    background: rgba(255,255,255,0.06);
}

/* Bottom bar */
.footer__bar {
    width: 100%;
    padding: 1.1rem 6vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.footer__copy {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.footer__copy a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-base);
}

.footer__copy a:hover {
    color: var(--color-accent);
}

@media (max-width: 600px) {
    .footer__body {
        padding: 3.5rem 5vw 2.5rem;
        gap: 1rem;
    }

    .footer__wordmark  { font-size: 1rem; }
    .footer__tagline   { font-size: 0.8rem; }
    .footer__email     { font-size: 0.82rem; }
    .footer__nav-list a { font-size: 0.78rem; }
    .footer__copy      { font-size: 0.72rem; }

    .footer__bar {
        flex-direction: column;
        gap: 0.35rem;
        text-align: center;
        padding: 1rem 5vw;
    }

    .footer__rule {
        margin: 0 5vw;
        width: calc(100% - 10vw);
    }
}

/* ============================================
   Responsive
   ============================================ */

/* ---- Large tablet / small laptop (≤1280px) ---- */
@media (max-width: 1280px) {
    .nav {
        justify-content: space-between;
    }

    .nav__links {
        display: none;
        position: fixed;
        inset: 0;
        background-color: var(--color-bg);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-lg);
        transform: none;
        left: auto;
    }

    .nav__links.is-open {
        display: flex;
    }

    .nav__links a {
        font-size: 1.72rem;
    }

    .nav__toggle {
        display: flex;
        z-index: 101;
        margin-left: auto;
        margin-right: 0;
    }

    .hero {
        margin-top: 6.2rem;
        aspect-ratio: unset;
        height: calc(37vw + 240px);
    }

    .hero__footer {
        bottom: 0rem;
    }

    /* Social icons — push to far edges, away from artwork */
    .hero__social-icon--fb { top: 18%; left: 2%; }
    .hero__social-icon--wa { top: 35%; left: 2%; }
    .hero__social-icon--li { top: 52%; left: 2%; }
    .hero__social-icon--ig { top: 12%; right: 2%; }
    .hero__social-icon--em { top: 32%; right: 2%; }
    .hero__social-icon--yt { bottom: 18%; right: 2%; }
}

/* ---- iPad and below (≤1024px) — hamburger nav ---- */
@media (max-width: 1024px) {
    .hero__socials {
        display: none;
    }

    .nav {
        justify-content: space-between;
    }

    .nav__links {
        display: none;
        position: fixed;
        inset: 0;
        background-color: var(--color-bg);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-lg);
        transform: none;
        left: auto;
    }

    .nav__links.is-open {
        display: flex;
    }

    .nav__links a {
        font-size: 1.72rem;
    }

    .nav__toggle {
        display: flex;
        z-index: 101;
        margin-left: auto;
        margin-right: 0;
    }

    .hero {
        margin-top: 6.2rem;
        aspect-ratio: unset;
        height: calc(37vw + 240px);
    }

    .hero__footer {
        bottom: 0rem;
    }

    /* Social icons — iPad layout */
    .hero__social-icon--fb { top: 18%; left: 3%; }
    .hero__social-icon--wa { top: 38%; left: 3%; }
    .hero__social-icon--ig { top: 12%; right: 3%; }
    .hero__social-icon--em { top: 32%; right: 3%; }
    .hero__social-icon--yt { bottom: 18%; right: 3%; }
}

/* ---- Mobile (≤768px) ---- */
@media (max-width: 768px) {
    .hero {
        margin-top: 3.8rem;
        aspect-ratio: unset;
        height: calc(37vw + 240px);
    }

    .section {
        padding: var(--spacing-lg) 0;
    }

    /* Hero sections — restore nav-offset padding-top after .section override */
    .portfolio-hero,
    .commissions-hero,
    .contact-hero {
        padding-top: calc(var(--spacing-xl) + 20px);
    }

    .footer__inner {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }

    .hero__footer {
        bottom: 0rem;
    }

    /* CTA button — smaller on mobile */
    .hero__cta {
        padding: 0.7rem 1.75rem;
        font-size: 0.85rem;
    }

    /* Social icons — smaller on mobile */
    .hero__social-icon {
        width: clamp(36px, 6vw, 48px);
        height: clamp(36px, 6vw, 48px);
    }

    /* Social icons — mobile layout */
    .hero__social-icon--fb { top: 18%; left: 3%; }
    .hero__social-icon--wa { top: 36%; left: 3%; }
    .hero__social-icon--ig { top: 12%; right: 3%; }
    .hero__social-icon--em { top: 32%; right: 3%; }
    .hero__social-icon--yt { bottom: 20%; right: 3%; }
}

/* ---- Small phones (≤480px) ---- */
@media (max-width: 480px) {
    .hero {
        margin-top: 3.5rem;
        height: 34vh;
        min-height: 380px;
    }

    .hero__footer {
        bottom: 0rem;
    }

    /* CTA button — smallest size */
    .hero__cta {
        padding: 0.6rem 1.4rem;
        font-size: 0.8rem;
    }

    /* Social icons — smallest size */
    .hero__social-icon {
        width: 32px;
        height: 32px;
    }

    /* Social icons — small phone layout */
    .hero__social-icon--fb { top: 16%; left: 2%; }
    .hero__social-icon--wa { top: 34%; left: 2%; }
    .hero__social-icon--ig { top: 10%; right: 2%; }
    .hero__social-icon--em { top: 30%; right: 2%; }
    .hero__social-icon--yt { bottom: 18%; right: 2%; }
}

/* =============================================================
   404 Page
   ============================================================= */

.error-404 {
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.error-404__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: var(--spacing-xl);
}

.error-404__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(143, 168, 58, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.error-404__content {
    position: relative;
    z-index: 1;
}

.error-404__number {
    font-size: clamp(7rem, 20vw, 14rem);
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
    letter-spacing: -0.04em;
    opacity: 0.18;
    user-select: none;
    margin-bottom: -1rem;
}

.error-404__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.error-404__desc {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    max-width: 480px;
    margin: 0 auto var(--spacing-md);
    line-height: 1.7;
}

.error-404__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* =============================================================
   Legal Pages (Privacy Policy, Terms & Conditions)
   ============================================================= */

.legal-hero {
    padding-bottom: var(--spacing-md);
}

.legal-hero__meta {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.legal-body {
    padding-top: 0;
}

.legal-container {
    max-width: 760px;
}

.legal-block {
    margin-bottom: var(--spacing-lg);
}

.legal-block h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.legal-block p {
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: 0.75rem;
}

.legal-block p:last-child {
    margin-bottom: 0;
}

.legal-block ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0.75rem;
}

.legal-block ul li {
    color: var(--color-text-muted);
    line-height: 1.7;
    padding-left: 1.25rem;
    position: relative;
    margin-bottom: 0.4rem;
}

.legal-block ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: 600;
}

.legal-block a {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-base);
}

.legal-block a:hover {
    border-color: var(--color-accent);
}

.legal-block strong {
    color: var(--color-text);
    font-weight: 600;
}

/* =============================================================
   Commissions Page
   ============================================================= */

/* Hero */
.commissions-hero {
    padding-bottom: var(--spacing-md);
}

.commissions-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

.commissions-hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.commissions-hero__title {
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.commissions-hero__sub {
    font-size: 1.3rem;
    color: var(--color-text-muted);
    max-width: 520px;
    line-height: 1.7;
}

/* YouTube Short embed — portrait 9:16 */
.commissions-hero__video {
    display: flex;
    justify-content: center;
}

.commissions-hero__video-wrap {
    position: relative;
    width: min(100%, 320px);
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(143, 168, 58, 0.15);
}

.commissions-hero__video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 768px) {
    .commissions-hero__inner {
        grid-template-columns: 1fr;
    }
    .commissions-hero__video-wrap {
        width: min(100%, 260px);
        margin: 0 auto;
    }
}

/* Commission Types grid */
.commission-types-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.commission-type-card {
    position: relative;
    background: var(--color-bg-soft);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 2rem 2rem 2rem;
    overflow: hidden;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.commission-type-card:hover {
    border-color: rgba(143, 168, 58, 0.5);
    box-shadow:
        0 0 24px rgba(143,168,58,0.15),
        0 0 60px rgba(143,168,58,0.06);
}

.commission-type-card::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -80%;
    width: 50%;
    height: 220%;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.04) 50%, transparent 60%);
    transform: skewX(-18deg);
    pointer-events: none;
    transition: left 0s;
}
.commission-type-card:hover::after {
    left: 130%;
    transition: left 0.55s ease;
}

.commission-type-card__icon {
    width: 44px;
    height: 44px;
    color: var(--color-accent);
    margin-bottom: 1.25rem;
}

.commission-type-card__icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 5px rgba(143,168,58,0.4));
    transition: transform 0.35s ease, filter 0.35s ease;
}

.commission-type-card:hover .commission-type-card__icon svg {
    transform: scale(1.12);
    filter: drop-shadow(0 0 10px rgba(143,168,58,0.8));
}

.commission-type-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.5rem;
    transition: color var(--transition-base);
}

.commission-type-card:hover .commission-type-card__title {
    color: var(--color-accent);
}

.commission-type-card__desc {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    line-height: 1.7;
}

/* ── Process — fullscreen horizontal sticky scroll ────── */

.commissions-process {
    padding-top: 0;
    padding-bottom: 0;
}

.process-header {
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 0;
}

/* Outer container — 4 panels × 100vh gives scroll distance */
.process-scroll-wrap {
    position: relative;
    height: 400vh;
}

/* Pinned viewport — CSS sticky, no GSAP pin needed */
.process-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: var(--color-bg);
}

/* ── Progress bar ── */
.process-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255,255,255,0.05);
    z-index: 20;
}

.process-progress__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, var(--color-accent), rgba(143,168,58,0.6));
    box-shadow: 0 0 10px rgba(143,168,58,0.5);
    transition: width 0.08s linear;
}

/* ── Step counter ── */
.process-counter {
    position: absolute;
    top: 1.75rem;
    right: 2.5rem;
    z-index: 20;
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-weight: 500;
    letter-spacing: 0.06em;
}

.process-counter__current {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
    min-width: 2ch;
    display: inline-block;
}

.process-counter__sep,
.process-counter__total {
    opacity: 0.35;
}

/* ── Left nav ── */
.process-nav {
    display: none;
}

.process-nav__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.25rem 0;
    cursor: default;
}

.process-nav__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.4s ease;
}

.process-nav__dot-inner {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transition: background 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.process-nav__label {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.2);
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    transition: max-width 0.4s ease, opacity 0.4s ease, color 0.4s ease;
}

.process-nav__connector {
    width: 1px;
    height: 1.25rem;
    background: rgba(255,255,255,0.07);
    margin-left: 6px; /* visually centres under dot */
    transition: background 0.4s ease;
}

/* Active nav item */
.process-nav__item.is-active .process-nav__dot {
    border-color: var(--color-accent);
}

.process-nav__item.is-active .process-nav__dot-inner {
    background: var(--color-accent);
    transform: scale(1.4);
    box-shadow: 0 0 0 3px rgba(143,168,58,0.2), 0 0 10px rgba(143,168,58,0.6);
}

.process-nav__item.is-active .process-nav__label {
    max-width: 160px;
    opacity: 1;
    color: var(--color-accent);
}

/* Past nav item */
.process-nav__item.is-past .process-nav__dot {
    border-color: rgba(143,168,58,0.4);
}

.process-nav__item.is-past .process-nav__dot-inner {
    background: rgba(143,168,58,0.4);
}

.process-nav__item.is-past .process-nav__label {
    max-width: 160px;
    opacity: 0.5;
    color: rgba(143,168,58,0.7);
}

.process-nav__item.is-past + .process-nav__connector {
    background: rgba(143,168,58,0.25);
}

/* ── Arrow navigation buttons ── */
.process-arrows {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 30;
}

.process-arrow {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid rgba(143, 168, 58, 0.45);
    background: rgba(143, 168, 58, 0.1);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.process-arrow:hover {
    background: rgba(143, 168, 58, 0.25);
    border-color: rgba(143, 168, 58, 0.8);
}

.process-arrow:disabled {
    opacity: 0.25;
    pointer-events: none;
}

/* ── Panel track ── */
.process-panels {
    display: flex;
    width: 400vw;
    height: 100%;
    will-change: transform;
}

/* Individual panel */
.process-panel {
    width: 100vw;
    flex-shrink: 0;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: clamp(5rem, 10vw, 12rem);
    padding-right: clamp(5rem, 10vw, 12rem);
    box-sizing: border-box;
    overflow: hidden;
}

/* Huge ghost icon in background */
.process-panel__bg-num {
    position: absolute;
    right: 4vw;
    top: calc(50% - clamp(14vw, 19vw, 23vw));  /* no CSS transform — keeps GSAP x-parallax clean */
    width: clamp(28vw, 38vw, 46vw);
    height: clamp(28vw, 38vw, 46vw);
    overflow: hidden;
    user-select: none;
    pointer-events: none;
}

/* SVG icon inside the ghost container — filled illustrative style */
.process-panel__bg-icon {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ── Per-icon keyframes ── */
@keyframes bgIconFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

@keyframes bgIconSpin {
    to { transform: rotate(360deg); }
}

@keyframes bgIconSparkle {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.6); }
}

/* Step 1 — letter floats up/down */
.process-panel:nth-child(1) .bg-icon-paper {
    animation: bgIconFloat 3s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: bottom center;
}

/* Step 2 — pencil rocks gently */
.process-panel:nth-child(2) .bg-icon-pencil {
    animation: bgIconFloat 2.5s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: bottom left;
}

/* Step 3 — only the arrows group spins (not the whole SVG, avoids overflow bleed) */
.bg-icon-spin-group {
    animation: bgIconSpin 10s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
}

/* Step 4 — sparkles pulse at staggered offsets */
.bg-icon-sparkle-a {
    animation: bgIconSparkle 2s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
.bg-icon-sparkle-b {
    animation: bgIconSparkle 2s ease-in-out infinite 0.65s;
    transform-box: fill-box;
    transform-origin: center;
}
.bg-icon-sparkle-c {
    animation: bgIconSparkle 2s ease-in-out infinite 1.3s;
    transform-box: fill-box;
    transform-origin: center;
}

/* Hover: panel hover brightens the icon */
.process-panel:hover .process-panel__bg-icon {
    filter: brightness(1.4);
    transition: filter 0.4s ease;
}

/* Panel content */
.process-panel__inner {
    position: relative;
    z-index: 2;
    max-width: 540px;
}

.process-panel__tag {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 1.25rem;
}

.process-panel__title {
    font-size: clamp(3rem, 5.5vw, 5.5rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.0;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
}

.process-panel__rule {
    width: 44px;
    height: 2px;
    background: var(--color-accent);
    border-radius: 2px;
    margin-bottom: 1.5rem;
    box-shadow: 0 0 8px rgba(143,168,58,0.4);
}

.process-panel__desc {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    line-height: 1.8;
    max-width: 420px;
}

/* ── CTA ── */
.commissions-cta__inner {
    text-align: center;
    padding: var(--spacing-xl) 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.commissions-cta__title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.commissions-cta__sub {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
    line-height: 1.7;
}

/* ── Responsive: mobile ── */
@media (max-width: 768px) {
    /* Disable horizontal scroll on mobile — stack panels vertically */
    .process-scroll-wrap {
        height: auto;
    }

    .process-sticky {
        height: auto;
        overflow: visible;
    }

    .process-progress,
    .process-counter,
    .process-nav,
    .process-arrows {
        display: none;
    }

    .process-panels {
        flex-direction: column;
        width: 100%;
        transform: none !important; /* override GSAP */
    }

    .process-panel {
        width: 100%;
        min-height: auto;
        padding: 4rem 1.5rem 5rem;
        align-items: flex-start;
    }

    .process-panel__bg-num {
        width: 55vw;
        height: 55vw;
        right: -4vw;
        left: auto;
        top: auto;
        bottom: 1rem;
        transform: none;
        opacity: 0.35;
    }

    .process-panel__title {
        font-size: clamp(2.2rem, 8vw, 3.5rem);
    }
}

@media (max-width: 480px) {
    .process-panel {
        padding: 3rem 1.25rem 4rem;
    }
}

/* ── Types grid mobile ── */
@media (max-width: 640px) {
    .commission-types-grid {
        grid-template-columns: 1fr;
    }
}

/* Vertical rail */
.process-timeline__rail {
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
}

.process-timeline__rail-bg {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
}

.process-timeline__rail-fill {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0%;
    background: linear-gradient(to bottom, var(--color-accent), rgba(143,168,58,0.4));
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(143,168,58,0.5), 0 0 30px rgba(143,168,58,0.2);
    transition: height 0.05s linear;
}

/* Steps list */
.process-timeline__steps {
    display: flex;
    flex-direction: column;
}

/* Individual step — simple block, node is absolutely positioned */
.process-tl-step {
    position: relative;
    padding: 3rem 0;
}

/* Node: centred over the rail at left:20px (from .process-timeline).
   Step is 88px from left, so node at -(88-20)px = -68px, then nudge left by half node (12px) → -68-12 = -80px
   Using left:-68px positions the node's left edge at 20px from timeline → centre at 20+12 = 32px. Close enough. */
.process-tl-step__node {
    position: absolute;
    left: -68px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.process-tl-step__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.25);
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
    position: relative;
    z-index: 1;
}

.process-tl-step__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid transparent;
    transition: border-color 0.4s ease, transform 0.6s ease;
}

/* Step body — GSAP handles opacity/transform. CSS handles border/shadow only. */
.process-tl-step__body {
    position: relative;
    padding: 2rem 2.5rem;
    background: var(--color-bg-soft);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Ghosted big number in background */
.process-tl-step__num {
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    font-size: 7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--color-accent);
    opacity: 0.06;
    user-select: none;
    pointer-events: none;
    transition: opacity 0.5s ease, color 0.5s ease;
}

.process-tl-step__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.6rem;
    transition: color 0.4s ease;
}

.process-tl-step__desc {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.75;
    max-width: 480px;
}

/* ── Active state — glow effects on the current step ── */
.process-tl-step.is-active .process-tl-step__body {
    border-color: rgba(143, 168, 58, 0.35);
    box-shadow: 0 0 32px rgba(143,168,58,0.1), 0 8px 40px rgba(0,0,0,0.3);
}

.process-tl-step.is-active .process-tl-step__num {
    opacity: 0.15;
}

.process-tl-step.is-active .process-tl-step__dot {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(143,168,58,0.2), 0 0 16px rgba(143,168,58,0.6);
    transform: scale(1.3);
}

.process-tl-step.is-active .process-tl-step__ring {
    border-color: rgba(143,168,58,0.4);
    transform: scale(1.8);
    animation: ring-pulse 2s ease-in-out infinite;
}

@keyframes ring-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1.8); }
    50%       { opacity: 1;   transform: scale(2.2); }
}

/* Past steps — slightly dimmed (GSAP overrides opacity on scroll) */
.process-tl-step.is-past .process-tl-step__body {
    border-color: rgba(255,255,255,0.04);
}

.process-tl-step.is-past .process-tl-step__dot {
    background: rgba(143,168,58,0.4);
    border-color: rgba(143,168,58,0.4);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .process-timeline {
        padding: 0 1rem 0 3.5rem;
    }

    .process-timeline__rail {
        left: 1rem;
    }

    .process-tl-step__node {
        left: -3rem;
    }

    .process-tl-step__body {
        padding: 1.5rem;
    }

    .process-tl-step__num {
        font-size: 4.5rem;
    }

    .process-tl-step {
        padding: 2.5rem 0;
    }
}

/* CTA */
.commissions-cta__inner {
    text-align: center;
    padding: var(--spacing-xl) 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.commissions-cta__title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.commissions-cta__sub {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
    line-height: 1.7;
}

/* ---- Responsive: mobile (≤640px) ---- */
@media (max-width: 640px) {
    .commission-types-grid {
        grid-template-columns: 1fr;
    }

    .process-timeline {
        padding-left: 56px;
    }

    .process-timeline__rail {
        left: 12px;
    }

    .process-tl-step__node {
        left: -44px;
    }

    .process-tl-step__body {
        padding: 1.5rem;
    }

    .process-tl-step__num {
        font-size: 4rem;
    }
}