/* ═══════════════════════════════════════════
   BAMEK STUDIO — style.css
═══════════════════════════════════════════ */

:root {
   --bg: #0A0A0B;
   --surface: #131316;
   --border: rgba(255, 255, 255, 0.08);
   --text: #EDEDF0;
   --muted: #6B6B73;
   --accent: #C0C0C8;
   --ease: cubic-bezier(0.16, 1, 0.3, 1);
   --wrap: 1400px;
   --pad: 140px 6vw;
}

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

html {
   font-size: 16px;
   scroll-behavior: auto;
   overflow-x: hidden;
}

body {
   margin: 0;
   padding: 0;
   background: var(--bg);
   color: var(--text);
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
   cursor: none;
}

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

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

ul,
ol {
   list-style: none
}

button {
   cursor: none;
   background: none;
   border: none;
   font: inherit
}

::selection {
   background: var(--accent);
   color: var(--bg)
}

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

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

::-webkit-scrollbar-thumb {
   background: var(--accent);
   border-radius: 2px
}

/* ── Particles Canvas ── */
#particles-canvas {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 0;
   opacity: 0.6;
}

/* ── Loader ── */
#loader {
   position: fixed;
   inset: 0;
   background: var(--bg);
   z-index: 999999;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: opacity .8s ease, visibility .8s
}

.loader__content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 24px
}

.loader__text {
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 700;
   font-size: 2rem;
   letter-spacing: .4em;
   color: var(--text);
   text-transform: uppercase
}

.loader__bar-wrap {
   width: 200px;
   height: 1px;
   background: rgba(255, 255, 255, .08);
   position: relative;
   overflow: hidden
}

.loader__bar {
   height: 100%;
   width: 0%;
   background: linear-gradient(90deg, #8A8A96, #C8C8D4, #FFFFFF, #C8C8D4, #8A8A96);
   background-size: 200% 100%;
   animation: shimmer 1.5s ease infinite;
   box-shadow: 0 0 20px rgba(240,240,248,0.9),
               0 0 40px rgba(200,200,210,0.5);
   transition: width .1s ease
}

.loader__percent {
   font-family: 'JetBrains Mono', monospace;
   font-size: 11px;
   letter-spacing: .2em;
   color: var(--accent)
}

/* ── Global cursor override ── */
* {
   cursor: none !important;
}
@media (hover: none) {
   * { cursor: auto !important; }
}

/* ── Custom Cursor ── */
.cursor-dot {
   position: fixed;
   top: 0;
   left: 0;
   width: 8px;
   height: 8px;
   background: #D0D0DC;
   border-radius: 50%;
   pointer-events: none;
   z-index: 999999;
   opacity: 0;
   transition: opacity .3s;
   transform: translate(-50%, -50%);
   will-change: transform, top, left;
   box-shadow: 0 0 8px rgba(220,220,232,0.9),
               0 0 16px rgba(200,200,215,0.5);
}

.cursor-dot.cursor-hover {
   width: 12px;
   height: 12px;
   background: #C8C8D4;
   transform: translate(-50%, -50%);
}

@media(hover:none) {

   .cursor-dot {
      display: none
   }

   body,
   button {
      cursor: auto
   }
}

/* ── Layout ── */
.wrap {
   width: 100%;
   max-width: 1400px;
   margin-left: auto;
   margin-right: auto;
   padding-left: 6vw;
   padding-right: 6vw;
}

.section {
   padding: var(--pad)
}

.section-line {
   width: 100%;
   height: 1px;
   background: var(--border);
   margin-top: 80px
}

.fade-up {
   opacity: 0;
   transform: translateY(50px)
}

/* ── Eyebrow ── */
.eyebrow {
   display: flex;
   align-items: center;
   gap: 12px;
   font-family: 'JetBrains Mono', monospace;
   font-size: 10px;
   letter-spacing: .25em;
   color: var(--accent);
   text-transform: uppercase;
   margin-bottom: 24px
}

.eyebrow::before {
   content: '';
   width: 20px;
   height: 1px;
   background: linear-gradient(90deg, #C8C8D4, #FFFFFF, #C8C8D4);
   box-shadow: 0 0 6px rgba(220,220,232,0.6), 0 0 12px rgba(200,200,215,0.3);
   display: block;
   flex-shrink: 0
}

.section-title {
   font-weight: 700;
   font-size: clamp(2.8rem, 5vw, 6rem);
   letter-spacing: -.02em;
   line-height: 1;
   margin-top: 16px;
   color: var(--text);
   text-align: left;
   position: relative;
}

.section-title::before {
   content: '';
   position: absolute;
   top: 50%;
   left: -5%;
   width: 60%;
   height: 120%;
   transform: translateY(-50%);
   background: radial-gradient(
      ellipse at left center,
      rgba(210,210,220,0.07) 0%,
      rgba(190,190,205,0.03) 40%,
      transparent 70%
   );
   pointer-events: none;
   z-index: -1;
   filter: blur(20px);
}

.section-header {
   margin-bottom: 72px;
   text-align: left;
}

/* ── Navigation ── */
.nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 500;
   padding: 24px 6vw;
   transition: background .4s, border-color .4s, padding .4s;
   border-bottom: 1px solid transparent;
   display: flex;
   align-items: center;
   justify-content: space-between
}

.nav.scrolled {
   background: rgba(10, 10, 11, .85);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-bottom-color: rgba(255, 255, 255, .06);
   padding: 16px 6vw
}

.nav__inner {
   display: contents
}

.nav__logo {
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 700;
   font-size: 15px;
   letter-spacing: .05em;
   color: #EDEDF0 !important;
   display: flex;
   align-items: center;
   gap: 4px;
   z-index: 2;
   text-shadow: 0 1px 8px rgba(0, 0, 0, .8)
}

.nav__logo-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #C8C8D4;
   display: inline-block;
   box-shadow: 0 0 8px rgba(220,220,232,0.8),
               0 0 16px rgba(200,200,215,0.4);
}

.nav__links {
   display: flex;
   gap: 36px;
   align-items: center;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}

.nav__link {
   font-family: 'JetBrains Mono', monospace;
   font-size: 11px;
   letter-spacing: .1em;
   color: #EDEDF0 !important;
   transition: color .2s;
   text-transform: uppercase;
   text-shadow: 0 1px 8px rgba(0, 0, 0, .8)
}

.nav__link:hover {
   color: var(--accent)
}

.nav__cta {
   font-family: 'JetBrains Mono', monospace;
   font-size: 11px;
   letter-spacing: .1em;
   color: var(--text);
   border: 1px solid rgba(255, 255, 255, .2);
   padding: 10px 24px;
   border-radius: 2px;
   transition: border-color .3s, color .3s;
   text-transform: uppercase;
   display: inline-block
}

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

.nav__burger {
   display: none;
   flex-direction: column;
   gap: 5px;
   padding: 4px
}

.nav__burger span {
   display: block;
   width: 22px;
   height: 1px;
   background: var(--text);
   transition: transform .3s var(--ease), opacity .3s
}

.nav__burger.open span:first-child {
   transform: translateY(6px) rotate(45deg)
}

.nav__burger.open span:last-child {
   transform: translateY(-6px) rotate(-45deg)
}

.nav-mobile {
   position: fixed;
   inset: 0;
   background: var(--bg);
   z-index: 999;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity .4s var(--ease)
}

.nav-mobile.open {
   opacity: 1;
   pointer-events: all
}

.nav-mobile ul {
   display: flex;
   flex-direction: column;
   gap: 32px;
   text-align: center
}

.nav-mobile__link {
   font-family: 'Space Grotesk', sans-serif;
   font-size: 2.5rem;
   font-weight: 700;
   color: var(--text);
   transition: color .3s
}

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

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero {
   position: relative;
   width: 100%;
   min-height: 100vh;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 0;
   background: #0A0A0B;
}

/* Video */
.hero__video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 0;
   filter: brightness(.38) contrast(1.1) saturate(.7);
   transform: scale(1.08);
   transition: transform 0s;
}

/* Scanlines */
.hero__scanlines {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, .03) 2px, rgba(0, 0, 0, .03) 4px)
}

/* Cyan radial glow */
.hero__glow {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   background: radial-gradient(ellipse at center, rgba(192,192,200,.04) 0%, transparent 70%)
}

/* Dark gradient overlay */
.hero__overlay {
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(
      180deg,
      rgba(10,10,11,.85) 0%,
      rgba(10,10,11,.30) 35%,
      rgba(10,10,11,.50) 65%,
      rgba(10,10,11,.96) 100%
   );
}

/* Top gradient for nav text readability */
.hero__top-grad {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 160px;
   background: linear-gradient(to bottom, rgba(10, 10, 11, .85) 0%, transparent 100%);
   z-index: 1;
   pointer-events: none
}

/* Content — centered, always visible */
.hero__content {
   position: relative;
   z-index: 10;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 36px;
   padding: 100px 20px;
   max-width: 1200px;
   width: 100%;
   margin: 0 auto;
}
.hero__content::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 120%;
   height: 120%;
   background: radial-gradient(ellipse at center, rgba(192,192,200,.04) 0%, transparent 65%);
   pointer-events: none;
   z-index: -1;
}

/* Eyebrow — visible by default; GSAP animates from below */
.hero__eyebrow {
   font-family: 'JetBrains Mono', monospace;
   font-size: 10px;
   letter-spacing: .25em;
   color: var(--accent);
   text-transform: uppercase;
   text-shadow: none;
}

/* Headline — hero-line visible by default; GSAP animates from below */
.hero__headline {
   font-family: 'Syne', sans-serif;
   font-weight: 800;
   font-size: clamp(2.4rem, 4.5vw, 6rem);
   line-height: 0.95;
   letter-spacing: -0.02em;
   color: var(--text);
   text-shadow: none;
   width: 100%;
   max-width: 1000px;
   position: relative;
}

.hero__headline::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 110%;
   height: 150%;
   background: radial-gradient(
      ellipse at center,
      rgba(210,210,225,0.06) 0%,
      rgba(190,190,210,0.02) 50%,
      transparent 75%
   );
   pointer-events: none;
   z-index: -1;
   filter: blur(30px);
}

.hero-line-wrap {
   display: block;
   overflow: hidden;
   line-height: 1.05;
   padding-bottom: 0.02em;
}

.hero-line {
   display: block;
}

.hero-line--dim {
   color: rgba(237,237,240,.65);
}

.hero-line--accent {
   color: #EDEDF0;
   position: relative;
}

.hero-line--accent::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 0;
   width: 100%;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(200,200,210,0.35), transparent);
}

.italic-light {
   font-weight: 300;
   font-style: italic
}

/* Subline — visible by default */
.hero__subline {
   font-family: 'JetBrains Mono', monospace;
   font-size: 13px;
   letter-spacing: .15em;
   color: var(--muted);
   text-transform: uppercase;
   text-shadow: none;
}


/* ══════════════════════════════════════
   HERO SCROLL ARROW
══════════════════════════════════════ */
.hero__scroll-arrow {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   margin-top: 20px;
   animation: scrollBounce 2.4s ease-in-out infinite;
   cursor: pointer;
}

.hero__scroll-line {
   display: block;
   width: 1px;
   height: 40px;
   background: linear-gradient(
      to bottom,
      transparent,
      rgba(200,200,215,0.6),
      rgba(220,220,232,0.9)
   );
   box-shadow: 0 0 8px rgba(210,210,225,0.4);
}

.hero__scroll-chevron {
   font-size: 14px;
   color: rgba(200,200,215,0.7);
   text-shadow: 0 0 12px rgba(210,210,225,0.6),
                0 0 24px rgba(190,190,210,0.3);
   line-height: 1;
   font-family: 'Space Grotesk', sans-serif;
}

@keyframes scrollBounce {
   0%, 100% { transform: translateY(0); opacity: 0.6; }
   50%       { transform: translateY(8px); opacity: 1; }
}

/* ══════════════════════════════════════
   SERVICES
══════════════════════════════════════ */
.services__list {
   display: flex;
   flex-direction: column
}

.service-row {
   display: grid;
   grid-template-columns: 80px 1fr 280px 40px;
   align-items: center;
   gap: 24px;
   padding: 28px 0;
   border-top: 1px solid var(--border);
   cursor: default;
   transition: background .3s;
   border-radius: 2px
}

.service-row:last-child {
   border-bottom: 1px solid var(--border)
}

.service-row:hover {
   background: rgba(255,255,255,0.02);
}

.service-row__num {
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 700;
   font-size: 5rem;
   color: rgba(255, 255, 255, .06);
   line-height: 1;
   transition: color .3s
}

.service-row__name {
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 700;
   font-size: clamp(1.8rem, 3vw, 2.8rem);
   color: var(--text);
   letter-spacing: -.02em;
   transition: color .3s
}

.service-row:hover .service-row__name {
   color: var(--accent);
   text-shadow: 0 0 30px rgba(210,210,225,0.3),
                0 0 60px rgba(190,190,210,0.15);
}

.service-row__desc {
   font-family: 'JetBrains Mono', monospace;
   font-size: 12px;
   color: var(--muted);
   line-height: 1.6;
   max-width: 280px
}

.service-row__arrow {
   font-size: 1.5rem;
   color: var(--accent);
   opacity: 0;
   transform: translateX(-8px);
   transition: opacity .3s, transform .3s
}

.service-row:hover .service-row__arrow {
   opacity: 1;
   transform: translateX(0)
}

/* ──────────────────────────────────────
   WORK GRID
────────────────────────────────────── */
.work {
  border-top: 1px solid rgba(255,255,255,.06);
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.work::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(ellipse at center, rgba(180,180,190,0.015) 0%, rgba(180,180,190,0.008) 40%, transparent 70%);
  pointer-events: none;
  animation: workGlow 6s ease-in-out infinite alternate;
}
@keyframes workGlow {
  from { opacity: .6; transform: translateX(-50%) scale(1); }
  to   { opacity: 1; transform: translateX(-50%) scale(1.15); }
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  margin-top: 16px;
  position: relative;
  z-index: 2;
}

/* ROW 1 — Nike 9:16 tall + two portrait images */
.wi-video-nike { grid-column: 1 / 4;  grid-row: 1; aspect-ratio: 9/16; }
.wi-1          { grid-column: 4 / 9;  grid-row: 1; aspect-ratio: 4/5; }
.wi-2          { grid-column: 9 / 13; grid-row: 1; aspect-ratio: 4/5; }

/* ROW 2 — Chrome dominant + Fragrance + Energy */
.wi-3 { grid-column: 1 / 7;   grid-row: 2; aspect-ratio: 4/3; }
.wi-4 { grid-column: 7 / 10;  grid-row: 2; aspect-ratio: 4/5; }
.wi-5 { grid-column: 10 / 13; grid-row: 2; aspect-ratio: 4/5; }

/* ROW 3 — Headphones square + BAMEK Chain wide */
.wi-6 { grid-column: 1 / 5;  grid-row: 3; aspect-ratio: 1/1; }
.wi-7 { grid-column: 5 / 13; grid-row: 3; aspect-ratio: 16/7; }

/* ROW 4 — TNF cinematic full width */
.wi-video-tnf { grid-column: 1 / 13; grid-row: 4; aspect-ratio: 21/9; }

/* Work item base */
.work-item {
  overflow: hidden;
  border-radius: 2px;
  position: relative;
  z-index: 2;
  cursor: pointer;
  background: var(--surface);
}

.work-item__inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.work-item__inner img,
.work-item__inner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .7s cubic-bezier(0.16,1,0.3,1);
  display: block;
}

/* Special object-position overrides */
.wi-2 .work-item__inner img { object-position: center 20%; }
.wi-7 .work-item__inner img { object-position: center center; }
.wi-video-tnf .work-item__inner video { object-position: center 30%; }


.work-item:hover .work-item__inner img,
.work-item:hover .work-item__inner video {
  transform: scale(1.05);
}

/* Overlay — gradient always visible at bottom */
.work-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,10,11,.85) 0%,
    rgba(10,10,11,.3)  40%,
    transparent        70%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  opacity: 1;
  transition: opacity .35s;
}

.work-item__cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .25em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
  transform: translateY(4px);
  transition: transform .35s cubic-bezier(0.16,1,0.3,1);
}

.work-item__label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
  display: block;
  transform: translateY(4px);
  transition: transform .35s cubic-bezier(0.16,1,0.3,1) .04s;
}

.work-item:hover .work-item__cat,
.work-item:hover .work-item__label {
  transform: translateY(0);
}

.work-item:hover .work-item__label {
  text-shadow: 0 0 20px rgba(220,220,232,0.4);
}

/* Glow border on hover */
.work-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: border-color .4s ease, box-shadow .4s ease;
  pointer-events: none;
  z-index: 2;
}
.work-item:hover::after {
  border-color: rgba(200,200,210,0.3);
  box-shadow:
    inset 0 0 30px rgba(200,200,215,0.05),
    0 0 30px rgba(200,200,215,0.12);
}

/* Scan line sweep on hover */
.work-item__inner::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(192,192,200,.03) 50%,
    transparent 100%
  );
  z-index: 3;
  pointer-events: none;
  transition: top 0s;
}
.work-item:hover .work-item__inner::before {
  top: 100%;
  transition: top 1.2s ease;
}


.work-header__title {
   display: flex;
   align-items: baseline;
   gap: 20px;
   margin-bottom: 20px;
   justify-content: flex-start;
   position: relative;
}

.work-header__title::before {
   content: '';
   position: absolute;
   top: 50%;
   left: -3%;
   width: 55%;
   height: 180%;
   transform: translateY(-50%);
   background: radial-gradient(
      ellipse at left center,
      rgba(210,210,225,0.05) 0%,
      transparent 65%
   );
   pointer-events: none;
   z-index: -1;
   filter: blur(28px);
}

.work-title-light {
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 300;
   font-style: italic;
   font-size: clamp(3rem, 5vw, 6rem);
   color: var(--text)
}

.work-title-bold {
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 700;
   font-size: clamp(3rem, 5vw, 6rem);
   color: var(--text)
}

.work-header__line {
   width: 100%;
   height: 1px;
   background: var(--border)
}


.work-ig {
   margin-top: 60px;
   display: flex;
   justify-content: center
}

.work-ig__link {
   display: inline-flex;
   align-items: center;
   gap: 16px;
   padding: 20px 48px;
   border: 1px solid rgba(192,192,200,.3);
   border-radius: 2px;
   transition: border-color .3s, box-shadow .3s;
   position: relative;
   overflow: hidden
}

.work-ig__link::before {
   content: '';
   position: absolute;
   inset: 0;
   background: rgba(192,192,200,.04);
   transform: translateX(-100%);
   transition: transform .4s ease
}

.work-ig__link:hover::before {
   transform: translateX(0)
}

.work-ig__link:hover {
   border-color: var(--accent);
   box-shadow: 0 0 30px rgba(192,192,200,0.1)
}

.work-ig__label {
   font-family: 'JetBrains Mono', monospace;
   font-size: 11px;
   letter-spacing: .2em;
   color: var(--muted);
   text-transform: uppercase;
   position: relative
}

.work-ig__handle {
   font-family: 'Space Grotesk', sans-serif;
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--accent);
   letter-spacing: .02em;
   position: relative;
   text-shadow: 0 0 16px rgba(200,200,215,0.5);
}

.work-ig__arrow {
   font-size: 1.2rem;
   color: var(--accent);
   transition: transform .3s ease;
   position: relative
}

.work-ig__link:hover .work-ig__arrow {
   transform: translateX(6px)
}

/* ══════════════════════════════════════
   ABOUT
══════════════════════════════════════ */
.about {
   position: relative;
   overflow: hidden
}

.about__grid {
   display: grid;
   grid-template-columns: 60fr 40fr;
   gap: 80px;
   align-items: center
}

.about__name {
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 700;
   font-size: clamp(3rem, 6vw, 7rem);
   letter-spacing: -.03em;
   line-height: 1;
   color: var(--text);
   margin-bottom: 32px;
   text-align: left;
   position: relative;
}

.about__name::before {
   content: '';
   position: absolute;
   top: 50%;
   left: -5%;
   width: 70%;
   height: 160%;
   transform: translateY(-50%);
   background: radial-gradient(
      ellipse at left center,
      rgba(210,210,220,0.06) 0%,
      transparent 65%
   );
   pointer-events: none;
   z-index: -1;
   filter: blur(24px);
}

.about__location {
   font-family: 'JetBrains Mono', monospace;
   font-size: 11px;
   letter-spacing: 0.2em;
   color: var(--accent);
   text-transform: uppercase;
   margin-top: -24px;
   margin-bottom: 28px;
   opacity: 0.7;
}

.about__bio {
   font-size: 1rem;
   line-height: 1.75;
   color: var(--muted);
   margin-bottom: 20px;
   max-width: 600px
}

.about__note {
   font-style: italic;
   font-size: .875rem;
   color: var(--muted);
   opacity: .5;
   line-height: 1.6
}

/* Avatar — transparent background, PNG-safe drop-shadow only */
.avatar-wrap {
   position: relative;
   width: 100%;
   max-width: 380px;
   aspect-ratio: 1;
   filter: drop-shadow(0 0 40px rgba(192,192,200,.08));
   transition: filter .4s ease;
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
   border-radius: 0 !important
}

.avatar-wrap:hover {
   filter: drop-shadow(0 0 60px rgba(192,192,200,.18))
}

.avatar-img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   border-radius: 0 !important;
   background: transparent !important;
   border: none !important;
   transform-origin: center center;
   transition: transform .1s ease;
   will-change: transform;
   display: block
}

/* Placeholder label when image not loaded */

/* ══════════════════════════════════════
   CONTACT
══════════════════════════════════════ */
.contact {
   padding: 160px 6vw;
   text-align: center;
   position: relative;
}

.contact::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 600px;
   height: 600px;
   background: radial-gradient(circle, rgba(192,192,200,.04) 0%, transparent 70%);
   pointer-events: none
}

.contact__inner {
   position: relative;
   z-index: 1;
   max-width: 900px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 48px
}

.contact__headline {
   text-align: center;
   overflow: visible;
}

.contact__pre {
   font-family: 'JetBrains Mono', monospace;
   font-size: 11px;
   letter-spacing: .25em;
   color: var(--accent);
   text-transform: uppercase;
   margin-bottom: 16px
}

.contact__title {
   font-family: 'Space Grotesk', sans-serif;
   font-size: clamp(2.5rem, 6vw, 6rem);
   line-height: 1.0;
   letter-spacing: -.03em;
   overflow: visible;
   position: relative;
}

.contact__title::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   height: 180%;
   background: radial-gradient(
      ellipse at center,
      rgba(210,210,225,0.06) 0%,
      transparent 65%
   );
   pointer-events: none;
   z-index: -1;
   filter: blur(24px);
}

.contact__title-light {
   display: block;
   font-weight: 300;
   font-style: italic;
   color: var(--muted);
   opacity: 1;
   visibility: visible;
}

.contact__title-bold {
   display: block;
   font-weight: 700;
   color: var(--text);
}

.contact__line {
   width: 100%;
   height: 1px;
   background: rgba(255, 255, 255, .08)
}

.contact__main-cta {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
   padding: 40px 80px;
   border: 1px solid rgba(200,200,210,0.2);
   text-decoration: none;
   position: relative;
   overflow: hidden;
   transition: border-color 0.4s ease, box-shadow 0.4s ease;
   border-radius: 4px;
}

.contact__main-cta::before {
   display: none;
}

.contact__main-cta:hover {
   border-color: rgba(200,200,215,0.3);
   box-shadow: 0 0 60px rgba(200,200,215,0.06),
               0 20px 60px rgba(0,0,0,0.2);
}

.contact__main-cta:hover .contact__main-cta-text,
.contact__main-cta:hover .contact__main-cta-sub,
.contact__main-cta:hover .contact__main-cta-arrow {
   color: inherit;
}

.contact__main-cta-text {
   position: relative;
   z-index: 1;
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 700;
   font-size: clamp(1.5rem, 3vw, 2.5rem);
   color: var(--accent);
   letter-spacing: -0.01em;
   transition: color .3s;
}

.contact__cta-divider {
   display: block;
   width: 40px;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(200,200,215,0.4), transparent);
   box-shadow: 0 0 8px rgba(210,210,225,0.3);
}

.contact__main-cta-sub {
   position: relative;
   z-index: 1;
   font-family: 'JetBrains Mono', monospace;
   font-size: 14px;
   color: rgba(237,237,240,0.5);
   letter-spacing: 0.05em;
   transition: none;
}

.contact__main-cta-arrow {
   position: absolute;
   top: 20px;
   right: 24px;
   font-size: 1.5rem;
   color: var(--accent);
   transition: color .3s, transform .3s ease;
   z-index: 1
}

.contact__main-cta:hover .contact__main-cta-arrow {
   transform: translate(4px, -4px)
}

.contact__secondary {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 32px;
   width: 100%;
}

.contact__avail {
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: 'JetBrains Mono', monospace;
   font-size: 11px;
   letter-spacing: .1em;
   color: var(--muted);
}

.contact__avail-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #00E5A0;
   box-shadow: 0 0 8px rgba(0, 229, 160, .6);
   animation: pulse-dot 2s ease infinite;
   flex-shrink: 0;
}

@keyframes pulse-dot {
   0%, 100% { box-shadow: 0 0 8px rgba(0, 229, 160, .6); }
   50%       { box-shadow: 0 0 16px rgba(0, 229, 160, 1); }
}

.contact__socials {
   display: flex;
   gap: 12px;
}

.contact__social-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   padding: 20px 28px;
   border: 1px solid rgba(255,255,255,.08);
   border-radius: 2px;
   text-decoration: none;
   transition: border-color .3s, background .3s, box-shadow .3s;
   min-width: 90px;
   position: relative;
   overflow: hidden;
}

.contact__social-btn::before {
   content: '';
   position: absolute;
   inset: 0;
   background: rgba(192,192,200,.04);
   transform: translateY(100%);
   transition: transform .3s ease;
}

.contact__social-btn:hover::before {
   transform: translateY(0);
}

.contact__social-btn:hover {
   border-color: var(--accent);
   box-shadow: 0 0 20px rgba(192,192,200,0.12);
}

.contact__social-icon {
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 700;
   font-size: 1.1rem;
   color: var(--accent);
   letter-spacing: .05em;
   position: relative;
   z-index: 1;
}

.contact__social-name {
   font-family: 'JetBrains Mono', monospace;
   font-size: 9px;
   letter-spacing: .2em;
   color: var(--muted);
   text-transform: uppercase;
   position: relative;
   z-index: 1;
   transition: color .3s;
}

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

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer {
   background: var(--bg);
   border-top: 1px solid rgba(255,255,255,.06);
   padding: 40px 6vw
}

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

.footer__copy,
.footer__tagline {
   font-family: 'JetBrains Mono', monospace;
   font-size: 10px;
   color: var(--muted);
   letter-spacing: .05em
}

/* ─────────────────────────────────────
   GRAIN OVERLAY
───────────────────────────────────── */
#grain {
  position: fixed;
  inset: -10%;
  width: 120%;
  height: 120%;
  pointer-events: none;
  z-index: 9998;
  opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 220px 220px;
  animation: grain .4s steps(1) infinite;
  will-change: transform;
}
@keyframes grain {
  0%   { transform: translate(0,0); }
  10%  { transform: translate(-2%,-3%); }
  20%  { transform: translate(3%,1%); }
  30%  { transform: translate(-1%,4%); }
  40%  { transform: translate(4%,-2%); }
  50%  { transform: translate(-3%,2%); }
  60%  { transform: translate(1%,-4%); }
  70%  { transform: translate(-4%,3%); }
  80%  { transform: translate(2%,-1%); }
  90%  { transform: translate(-2%,4%); }
  100% { transform: translate(3%,-3%); }
}

/* ─────────────────────────────────────
   SCROLL PROGRESS BAR
───────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 1px;
  width: 0%;
  background: linear-gradient(90deg, transparent, #D4D4DC, #FFFFFF);
  box-shadow: 0 0 16px rgba(255,255,255,0.8),
              0 0 32px rgba(210,210,220,0.5);
  z-index: 999998;
  pointer-events: none;
  transition: width .1s linear;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─────────────────────────────────────
   GRID MESH
───────────────────────────────────── */
#grid-mesh {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: center center;
  mask-image: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.6) 0%,
    rgba(0,0,0,0.2) 50%,
    transparent 80%
  );
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.6) 0%,
    rgba(0,0,0,0.2) 50%,
    transparent 80%
  );
}

/* ─────────────────────────────────────
   MARQUEE
───────────────────────────────────── */
.marquee-wrap {
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 16px 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 18s linear infinite;
}
.marquee-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .25em;
  color: rgba(255,255,255,.1);
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 60px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─────────────────────────────────────
   RESPONSIVE — TABLET
───────────────────────────────────── */
@media(max-width:1024px) {
  :root { --pad: 100px 5vw }
  .service-row { grid-template-columns: 60px 1fr 200px 32px; gap: 16px }
  .service-row__num { font-size: 3.5rem }
  .about__grid { grid-template-columns: 1fr; gap: 48px }
  .avatar-wrap { max-width: 360px; margin: 0 auto }
  .contact__main-cta { padding: 32px 48px }
}

/* ─────────────────────────────────────
   RESPONSIVE — MOBILE
───────────────────────────────────── */
@media(max-width:768px) {
  :root { --pad: 72px 5vw }
  body { cursor: auto }
  .cursor-dot { display: none }
  /* Nav */
  .nav { padding: 18px 5vw }
  .nav__links, .nav__cta { display: none }
  .nav__burger { display: flex }
  /* Hero */
  .hero__headline { font-size: clamp(1.8rem, 6.5vw, 2.8rem); letter-spacing: -0.02em; padding: 0 12px; max-width: 100%; }
  .hero-line-wrap { line-height: 1.1; }
  .hero__eyebrow  { font-size: 9px; letter-spacing: .12em }
  .hero__subline  { font-size: 11px; letter-spacing: .1em }
  .hero__content  { padding: 80px 16px; gap: 28px; }
  /* Services */
  .service-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px 16px; }
  .service-row__num  { font-size: 10px; }
  .service-row__name { font-size: clamp(1.1rem, 4vw, 1.3rem); word-break: break-word; }
  .service-row__desc { display: block; max-width: 100%; font-size: 11px; margin-top: 4px; }
  .service-row__arrow { display: none }
  .hero__scroll-arrow { margin-top: 12px; }
  .hero__scroll-line { height: 28px; }
  /* Work header */
  .work { overflow: hidden; }
  .work-header { overflow: visible; }
  .work-header__title { flex-wrap: wrap; gap: 8px; overflow: visible; }
  .work-title-light,
  .work-title-bold { font-size: clamp(2rem, 8vw, 3rem); line-height: 1.1; }
  /* Work grid */
  .work-grid { grid-template-columns: 1fr; gap: 8px; }
  .work-item { overflow: hidden; min-width: 0; }
  .wi-video-nike, .wi-1, .wi-2, .wi-3, .wi-4, .wi-5, .wi-6, .wi-7, .wi-video-tnf { grid-column: 1 / -1; grid-row: auto; }
  .wi-video-nike { aspect-ratio: 9/16; max-height: 480px; width: 100%; margin-left: auto; margin-right: auto; display: flex; justify-content: center; }
  .wi-video-nike .work-item__inner { width: 100%; max-width: 320px; margin: 0 auto; }
  .wi-1,.wi-2,.wi-4,.wi-5,.wi-6 { aspect-ratio: 4/3; }
  .wi-3 { aspect-ratio: 16/9; }
  .wi-7 { aspect-ratio: 16/9; }
  .wi-video-tnf { aspect-ratio: 16/9; }
  /* Work IG */
  .work-ig__link { padding: 16px 20px; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .work-ig__label { font-size: 9px; }
  /* About */
  .about__grid  { grid-template-columns: 1fr; gap: 40px; }
  .about__right { order: 1; }
  .avatar-wrap  { max-width: 260px; margin: 0 auto; }
  .about__name  { font-size: clamp(2.5rem, 8vw, 3.5rem); }
  /* Contact */
  .contact { padding: 80px 5vw; }
  .contact__title    { font-size: clamp(2rem,8vw,3.5rem); }
  .contact__main-cta { width: 100%; padding: 36px 24px; box-sizing: border-box; }
  .contact__main-cta-text { font-size: clamp(1.6rem, 6vw, 2.5rem); }
  .contact__main-cta-sub  { font-size: 12px; word-break: break-all; }
  .contact__secondary { flex-direction: column; gap: 20px; align-items: center; }
  .contact__socials { flex-wrap: wrap; justify-content: center; gap: 10px; }
  .contact__social-btn { min-width: 80px; padding: 16px 20px; }
  /* Footer */
  .footer__inner { flex-direction: column; text-align: center; gap: 12px; }
  .footer__tagline { display: block; }
}

/* ─── TABLET ─── */
@media(min-width:769px) and (max-width:1024px) {
  .wi-video-nike { grid-column: 1 / 5;  grid-row: auto; aspect-ratio: 9/16; }
  .wi-1          { grid-column: 5 / 13; grid-row: auto; aspect-ratio: 4/3; }
  .wi-2          { grid-column: 1 / 7;  grid-row: auto; aspect-ratio: 4/3; }
  .wi-3          { grid-column: 7 / 13; grid-row: auto; aspect-ratio: 4/3; }
  .wi-4, .wi-5   { grid-column: span 6; grid-row: auto; aspect-ratio: 4/3; }
  .wi-6          { grid-column: 1 / 7;  grid-row: auto; aspect-ratio: 4/3; }
  .wi-7          { grid-column: 7 / 13; grid-row: auto; aspect-ratio: 4/3; }
  .wi-video-tnf  { grid-column: 1 / 13; grid-row: auto; aspect-ratio: 16/9; }
}