@font-face {
  font-family: 'Apparel';
  src: url('../assets/fonts/apparel-regularit.otf') format('opentype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SuisseIntl';
  src: url('../assets/fonts/SuisseIntl-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* ── Brand palette — full dark theme ── */
  --cream:       #0a0a0a;               /* page background (black)     */
  --cream-2:     #111111;               /* alternate section bg        */
  --ink:         #eeece7;               /* primary text (light)        */
  --ink-60:      rgba(238,236,231,.60);
  --ink-40:      rgba(238,236,231,.40);
  --ink-12:      rgba(238,236,231,.12);
  --ink-07:      rgba(238,236,231,.07);
  --accent:      #3d3ab8;       /* blue/indigo – banner accent */
  --accent-soft: rgba(61,58,184,.12);

  /* ── Hero-only dark palette ── */
  --hero-bg:     #12091e;
  --hero-text:   rgba(242,240,236,.88);
  --hero-accent: #3d3ab8;       /* same brand blue in the dark hero */
  --hero-gold:   #cca940;

  /* ── Cards stay dark (portfolio) ── */
  --card-bg:     #111118;
  --card-text:   rgba(242,240,236,.88);
  --card-muted:  rgba(242,240,236,.42);

  --radius:    14px;
  --radius-lg: 20px;
}

html { scroll-behavior: auto; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  cursor: none;
}

a      { text-decoration: none; color: inherit; cursor: none; }
img, svg { display: block; max-width: 100%; }
button { cursor: none; background: none; border: none; }

::-webkit-scrollbar { display: none; }
html { scrollbar-width: none; -ms-overflow-style: none; }

/* ════════════════════════════════════════════
   CURSOR (accent colour — visible on both themes)
════════════════════════════════════════════ */
.cursor {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
}
.cursor__dot {
  position: absolute;
  width: 5px; height: 5px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(1);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity .2s;
  box-shadow:
    0 0  3px rgba(255,255,255,1.00),
    0 0  8px rgba(255,255,255,0.55),
    0 0 18px rgba(255,255,255,0.22),
    0 0 38px rgba(255,255,255,0.08),
    0 0 72px rgba(255,255,255,0.03);
}
.cursor__ring {
  display: block;
  position: absolute;
  width: 32px; height: 32px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  pointer-events: none;
}
.cursor__orbit-dot {
  position: absolute;
  width: 3px; height: 3px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    0 0 3px rgba(255,255,255,1.00),
    0 0 7px rgba(255,255,255,0.55),
    0 0 14px rgba(255,255,255,0.20);
}
.cursor--text .cursor__dot { opacity: 0; }

/* Trail canvas sits behind the dot */
#cursorTrail {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9998;
}

@media (hover: none) { .cursor { display: none; } body, a, button { cursor: auto; } }

/* ════════════════════════════════════════════
   LOADER — iOS FROSTED GLASS
════════════════════════════════════════════ */
.loader { position: fixed; inset: 0; z-index: 9000; pointer-events: all; }

/* ── Layer 1: frosted glass (backdrop-blur) ── */
.loader__glass {
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(32px) saturate(220%) brightness(1.06);
  -webkit-backdrop-filter: blur(32px) saturate(220%) brightness(1.06);
  will-change: opacity;
}

/* ── Layer 2: iridescent specular sheen ── */
.loader__ripple {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 35% at 72% 78%, rgba(180,210,255,0.10) 0%, transparent 55%),
    linear-gradient(135deg, rgba(255,240,255,0.05) 0%, rgba(210,235,255,0.03) 50%, rgba(255,255,255,0.06) 100%);
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.40);
  will-change: opacity;
  pointer-events: none;
}

.loader__logo-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 10; will-change: opacity, transform;
}
/* Glow on the SVG paths themselves */
@keyframes logoGlowFade {
  0% {
    filter:
      drop-shadow(0 0 6px rgba(255,255,255,1.00))
      drop-shadow(0 0 16px rgba(255,255,255,0.55));
  }
  100% {
    filter:
      drop-shadow(0 0 2px rgba(255,255,255,0.50))
      drop-shadow(0 0 6px rgba(255,255,255,0.15));
  }
}
.loader__logo .logo-svg {
  animation: logoGlowFade 1.6s ease-out forwards;
}
.loader__logo {
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  font-weight: 800; letter-spacing: -.04em;
  position: relative;
  color: #eeece7; white-space: nowrap;
  will-change: filter, opacity;
  filter: blur(30px); opacity: 0;
}
.loader__logo span { color: var(--accent); }

/* ════════════════════════════════════════════
   MOBILE MENU
════════════════════════════════════════════ */
.mmenu {
  position: fixed; inset: 0;
  background: rgba(15,13,30,.97);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  z-index: 800; display: flex; align-items: center;
  padding: 100px 32px 48px;
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
.mmenu.open { opacity: 1; pointer-events: all; }
.mmenu__inner { display: flex; flex-direction: column; justify-content: space-between; height: 100%; width: 100%; }
.mmenu__nav   { display: flex; flex-direction: column; gap: .3rem; }
.mmenu__link  {
  font-size: clamp(2.6rem, 10vw, 5.5rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -.04em;
  color: rgba(242,240,236,.35); transition: color .2s; display: block;
}
.mmenu__link:hover { color: var(--cream); }
.mmenu__foot { display: flex; gap: 2rem; }
.mmenu__foot a { font-size: .85rem; font-weight: 500; color: rgba(242,240,236,.35); transition: color .2s; }
.mmenu__foot a:hover { color: var(--cream); }

/* ════════════════════════════════════════════
   NAV
════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: 70px; z-index: 900;
  display: flex; align-items: center;
  padding: 0 clamp(16px,2.8vw,44px);
  transition: background .4s, border-color .4s, color .4s;
  border-bottom: 1px solid transparent;
}
/* Default — on hero: only logo visible, links + time hidden */
.nav { color: rgba(242,240,236,.8); }
.nav__links a { color: rgba(242,240,236,.55); }
.nav__time { color: rgba(242,240,236,.4); }
.menu-btn__line { background: var(--ink); }

/* Scrolled — fully transparent */
.nav.scrolled {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-color: transparent;
  color: var(--ink);
}
.nav.scrolled .nav__links a { color: var(--ink-60); }
.nav.scrolled .nav__links a:hover { color: var(--ink); }
.nav.scrolled .nav__time { color: var(--ink-40); }
.nav.scrolled .menu-btn__line { background: var(--ink); }

.nav__logo {
  margin-right: auto;
  display: flex; align-items: center;
  color: #fff;
  opacity: 0.55;
  transition: opacity .3s, color .3s, filter .3s;
  line-height: 1;
  padding: 0.5rem 0.6rem;
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  margin-left: -0.6rem;
}
.nav__logo:hover {
  opacity: 1;
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,0.80))
    drop-shadow(0 0 18px rgba(255,255,255,0.45))
    drop-shadow(0 0 38px rgba(255,255,255,0.20));
}
.nav__logo:active {
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,1.00))
    drop-shadow(0 0 24px rgba(255,255,255,0.75))
    drop-shadow(0 0 55px rgba(255,255,255,0.45))
    drop-shadow(0 0 90px rgba(255,255,255,0.20));
}
.nav.scrolled .nav__logo { color: var(--ink); opacity: 0.75; }
.nav.scrolled .nav__logo:hover { opacity: 1; }

/* Shared SVG logo mark — fill inherits from parent color */
.logo-svg {
  fill: currentColor;
  display: block;
}

/* Size per context */
.nav__logo   .logo-svg { height: 36px; width: auto; }
.loader__logo .logo-svg { height: clamp(80px, 14vw, 160px); width: auto; }
.footer__logo .logo-svg { height: 50px; width: auto; }

.nav__links { display: flex; list-style: none; gap: 1.5rem; }
.nav__links a {
  font-size: .78rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  transition: color .2s, filter .3s;
  padding: 1rem 1rem;
}
.nav__links li:first-child a { padding-left: 0; }
.nav__links li:last-child a  { padding-right: 0; }
.nav__links a:hover {
  color: #fff;
  filter:
    drop-shadow(0 0  6px rgba(255,255,255,.90))
    drop-shadow(0 0 18px rgba(255,255,255,.60))
    drop-shadow(0 0 38px rgba(255,255,255,.25));
}
.nav__links a:active {
  color: #fff;
  filter:
    drop-shadow(0 0  8px rgba(255,255,255,1.00))
    drop-shadow(0 0 24px rgba(255,255,255,.80))
    drop-shadow(0 0 55px rgba(255,255,255,.50))
    drop-shadow(0 0 90px rgba(255,255,255,.22));
}

.nav__right { display: flex; align-items: center; gap: 1.6rem; margin-left: 0; }
.nav__time  { font-size: .75rem; font-weight: 400; font-variant-numeric: tabular-nums; color: rgba(242,240,236,.45); transition: color .4s; }

.nav__menu-btn { display: none; flex-direction: column; gap: 6px; padding: 4px; }
.menu-btn__line { display: block; width: 24px; height: 1.5px; background: var(--cream); transition: all .3s, background .4s; transform-origin: center; }
.nav__menu-btn.open .menu-btn__line:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav__menu-btn.open .menu-btn__line:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

/* ════════════════════════════════════════════
   HERO — FULL SCREEN DARK
════════════════════════════════════════════ */
@keyframes blink    { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes meshDrift{
  0%   { transform: translate(0,0)    scale(1)    rotate(0deg); }
  33%  { transform: translate(4%,-6%) scale(1.08) rotate(4deg); }
  66%  { transform: translate(-5%,4%) scale(1.05) rotate(-3deg); }
  100% { transform: translate(3%,-3%) scale(1.1)  rotate(2deg); }
}

.hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; background: var(--hero-bg); z-index: 1; }

/* ── Background — oversized vertically so parallax never exposes a gap ── */
.hero__bg { position: absolute; inset: -12% 0; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

.hero__bg-mesh {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(0,0,0,0.48); /* dark overlay dims video */
}
.hero__bg-mesh::before { display: none; }

.hero__bg-lines { display: none; }

/* Dark vignette — top and bottom */
.hero__bg-vignette {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.5)  0%, transparent 28%),
    linear-gradient(to top,    rgba(0,0,0,.65) 0%, transparent 35%);
}


/* ── Tagline (top-center) ── */
.hero__tagline {
  position: absolute; top: clamp(88px,11vh,130px); left: 50%;
  transform: translateX(-50%); text-align: center;
  mix-blend-mode: difference;
  z-index: 10; white-space: nowrap; pointer-events: none;
}
/* Each line starts hidden — GSAP fromTo handles the reveal */
.hero__tag-line { opacity: 0; }
.hero__tag-line {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.1rem,1.9vw,2.2rem);
  font-weight: 300; line-height: 1.2;
  color: #fff; letter-spacing: -.005em;
}
.hero__tag-line em {
  font-family: 'Apparel', 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 400; font-size: 1.1em;
  color: #fff;
  text-shadow:
    0 0  5px rgba(255,255,255,.95),
    0 0 14px rgba(255,255,255,.75),
    0 0 30px rgba(255,255,255,.45),
    0 0 60px rgba(255,255,255,.20);
  animation: tubeFlicker 7s linear infinite;
}
.tag-accent { color: #fff; font-style: normal; }

/* ── Left initial — hidden ── */
.hero__initial { display: none; }

/* ── Available badge (bottom bar right) ── */
.badge-dot {
  width: 6px; height: 6px; background: #22c55e;
  border-radius: 50%; box-shadow: 0 0 7px #22c55e;
  animation: blink 2.4s ease infinite; flex-shrink: 0;
}

/* ── Massive name ── */
.hero__name-wrap {
  position: absolute; bottom: 54px; left: 0; right: 0;
  z-index: 10; text-align: center;
  mix-blend-mode: difference;   /* text inverts against background → always visible */
}
.hero__name-clip { line-height: .9; }
.hero__name-text {
  display: flex; align-items: baseline; justify-content: center;
  opacity: 0;
}
.hero__name-up,
.hero__name-it {
  font-size: clamp(2rem, 17vw, 22rem);
  font-weight: 400; line-height: .9; letter-spacing: -.03em;
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: none;
}
.hero__name-up {
  font-family: 'SuisseIntl', sans-serif;
  font-style: normal;
}
.hero__name-it {
  font-family: 'Apparel', 'Cormorant Garamond', serif;
  font-style: italic;
  padding-right: 0.12em;
}

/* ── Tubelight flicker ──
   Glow-only flicker — text never disappears, just the halo dims/surges.
   Three flicker events per 7 s cycle:
     1. quick double-dip  ~5–10 %
     2. single sag        ~57 %
     3. rapid stutter     ~83–92 %
──────────────────────────────────────────────── */
@keyframes tubeFlicker {
  /* full glow */
  0%,4%,9%,12%,56%,59%,82%,88%,92%,100% {
    text-shadow:
      0 0  5px rgba(255,255,255,.95),
      0 0 14px rgba(255,255,255,.75),
      0 0 30px rgba(255,255,255,.45),
      0 0 60px rgba(255,255,255,.20);
  }

  /* — double-dip — */
  5%  { text-shadow: 0 0 3px rgba(255,255,255,.35), 0 0  7px rgba(255,255,255,.20); }
  7%  { text-shadow: 0 0 2px rgba(255,255,255,.25), 0 0  5px rgba(255,255,255,.12); }
  10% { text-shadow: 0 0 3px rgba(255,255,255,.30), 0 0  6px rgba(255,255,255,.15); }

  /* — single sag — */
  57% { text-shadow: 0 0 3px rgba(255,255,255,.30), 0 0  8px rgba(255,255,255,.18); }
  58% { text-shadow: 0 0 5px rgba(255,255,255,.70), 0 0 16px rgba(255,255,255,.45), 0 0 28px rgba(255,255,255,.22); }

  /* — rapid stutter — */
  83% { text-shadow: 0 0 2px rgba(255,255,255,.22), 0 0  5px rgba(255,255,255,.10); }
  85% { text-shadow: 0 0 5px rgba(255,255,255,.80), 0 0 14px rgba(255,255,255,.50), 0 0 26px rgba(255,255,255,.25); }
  86% { text-shadow: 0 0 2px rgba(255,255,255,.20), 0 0  4px rgba(255,255,255,.10); }
  87% { text-shadow: 0 0 4px rgba(255,255,255,.55), 0 0 10px rgba(255,255,255,.30); }
  89% { text-shadow: 0 0 2px rgba(255,255,255,.18), 0 0  4px rgba(255,255,255,.08); }
  90% { text-shadow: 0 0 5px rgba(255,255,255,.88), 0 0 14px rgba(255,255,255,.60), 0 0 30px rgba(255,255,255,.30); }
}

/* ── Bottom bar ── */
.hero__bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 48px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px,2.8vw,44px);
  border-top: 1px solid rgba(255,255,255,.12);
  z-index: 20;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; /* GSAP fromTo owns the reveal — prevents flash on load */
}
.hero__bar-l, .hero__bar-c, .hero__bar-r { display: flex; align-items: center; gap: .9rem; }
.hero__bar-l span {
  font-size: .62rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .13em; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums;
}
.hero__bar-c a {
  font-size: .62rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; color: rgba(255,255,255,.75);
  transition: color .2s, filter .2s;
  padding: 0.75rem 0.5rem;
}
.hero__bar-c a:hover {
  color: #fff;
  filter:
    drop-shadow(0 0  6px rgba(255,255,255,.90))
    drop-shadow(0 0 18px rgba(255,255,255,.60))
    drop-shadow(0 0 38px rgba(255,255,255,.25));
}
.hero__bar-sep { font-size: .55rem; color: rgba(255,255,255,.3); }
.hero__bar-r {
  font-size: .62rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; color: rgba(255,255,255,.75);
}
.hero__bar-r a:hover { color: #fff; }

/* ════════════════════════════════════════════
   SECTION SHARED
════════════════════════════════════════════ */
.section { padding: clamp(70px,8vw,130px) clamp(20px,4vw,56px); }
.section.work { min-height: 100vh; display: flex; flex-direction: column; overflow: visible; }
.section__head {
  display: flex; align-items: baseline; gap: 1.4rem;
  margin-bottom: clamp(3rem,6vw,6rem);
  padding-bottom: 1.4rem; border-bottom: 1px solid var(--ink-12);
}
.section__num {
  font-size: .7rem; font-weight: 600; color: var(--ink-40);
  text-transform: uppercase; letter-spacing: .14em; flex-shrink: 0;
}
.section__h2 {
  font-size: clamp(2.4rem,5.5vw,5.8rem);
  font-weight: 400; letter-spacing: -.03em; line-height: 1.02;
  color: var(--ink);
}
.section__h2 .h2-up {
  font-family: 'SuisseIntl', sans-serif;
  font-style: normal;
  font-weight: 400;
}
.section__h2 .h2-it {
  font-family: 'SuisseIntl', sans-serif;
  font-style: normal;
  font-weight: 400;
}

/* ════════════════════════════════════════════
   PORTFOLIO GRID — dark cards on light page
════════════════════════════════════════════ */
.work { background: transparent; position: relative; z-index: 1; padding-bottom: clamp(180px,16vw,260px); }

.pgrid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(10px,1.2vw,18px);
}
.pcard--large { grid-column: span 2; }
.pcard--tall  { grid-column: span 1; grid-row: span 2; }
.pcard--med   { grid-column: span 1; }
.pcard--wide  { grid-column: span 3; }
.pcard--sm    { grid-column: span 1; }

.pcard {
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  position: relative;
  /* 3D tilt: NO overflow:hidden here — clip is on inner link */
  transform-style: preserve-3d;
  will-change: transform;
  --mx: 50%; --my: 50%;
  transition: box-shadow .4s;
}
/* Shine highlight */
.pcard::after {
  content: ''; position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.1) 0%, transparent 60%);
  pointer-events: none; z-index: 20; opacity: 0; transition: opacity .35s;
}
.pcard:hover::after { opacity: 1; }

.pcard__link {
  display: block; position: relative;
  overflow: hidden; /* clip is here, not on .pcard */
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* match outer radius top only */
}
.pcard--large .pcard__link,
.pcard--med   .pcard__link { aspect-ratio: 16/10; }
.pcard--tall  .pcard__link { aspect-ratio: 3/4; height: 100%; }
.pcard--wide  .pcard__link { aspect-ratio: 21/8; }
.pcard--sm    .pcard__link { aspect-ratio: 4/3; }

.pcard__visual {
  width: 100%; height: 100%; position: relative; overflow: hidden;
  will-change: transform; transform-origin: center center;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}

.pcard__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  display: flex; align-items: flex-end; padding: 1.4rem;
  transition: background .35s; pointer-events: none;
}
.pcard:hover .pcard__overlay { background: rgba(0,0,0,.38); }

.pcard__view {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: #fff;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50px; padding: .38rem .95rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity .28s, transform .28s;
}
.pcard:hover .pcard__view { opacity: 1; transform: translateY(0); }

.pcard__meta {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: .9rem 1.1rem 1.1rem; gap: .8rem;
}
.pcard__name { font-size: .92rem; font-weight: 700; letter-spacing: -.015em; margin-bottom: .18rem; color: var(--card-text); }
.pcard__cat  { font-size: .68rem; color: var(--card-muted); text-transform: uppercase; letter-spacing: .09em; font-weight: 500; }
.pcard__year { font-size: .68rem; color: var(--card-muted); font-weight: 400; white-space: nowrap; padding-top: .18rem; }

/* ── Card Visuals (unchanged — designed for dark bg) ── */
.pcard__visual--luminary { background: radial-gradient(ellipse at 35% 60%, #2a0050 0%, #0d0010 70%); }
.pv-luminary { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }
.pv-luminary__glow { position:absolute;width:220px;height:220px;background:radial-gradient(circle,rgba(168,85,247,.5) 0%,transparent 70%);animation:pulse-glow 3s ease infinite; }
@keyframes pulse-glow { 0%,100%{opacity:.8;transform:scale(1)} 50%{opacity:.35;transform:scale(1.3)} }
.pv-luminary__ring { position:absolute;border-radius:50%;border:1px solid rgba(168,85,247,.3);animation:expand-ring 3s ease infinite; }
.pv-luminary__ring--1 { width:130px;height:130px; }
.pv-luminary__ring--2 { width:210px;height:210px;animation-delay:.6s;border-color:rgba(99,102,241,.2); }
@keyframes expand-ring { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.1);opacity:.15} }
.pv-luminary__wordmark { font-size:5rem;font-weight:800;position:relative;z-index:1;background:linear-gradient(135deg,rgba(168,85,247,.85),rgba(99,102,241,.65));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.05em; }

.pcard__visual--apex { background:linear-gradient(160deg,#020d1a 0%,#061428 100%); }
.pv-apex { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }
.pv-apex__grid { position:absolute;inset:0;background-image:linear-gradient(rgba(99,102,241,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.07) 1px,transparent 1px);background-size:30px 30px; }
.pv-apex__frame { position:relative;z-index:1;background:rgba(255,255,255,.03);border:1px solid rgba(99,102,241,.22);border-radius:8px;padding:1.4rem 2rem;display:flex;flex-direction:column;gap:.7rem;width:min(280px,70%); }
.pv-apex__bar { height:8px;border-radius:99px;background:linear-gradient(90deg,#6366f1,#a855f7);opacity:.65; }
.pv-apex__bar--short { width:60%; }

.pcard__visual--novare { background:linear-gradient(160deg,#1a0b00 0%,#0d0500 100%); }
.pv-novare { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden; }
.pv-novare__glow { position:absolute;width:320px;height:320px;background:radial-gradient(circle,rgba(251,146,60,.22) 0%,transparent 65%); }
.pv-novare__lines { position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:2rem; }
.pv-novare__lines span { display:block;height:2px;border-radius:99px;background:linear-gradient(90deg,transparent,rgba(251,146,60,.35),transparent); }
.pv-novare__lines span:nth-child(1){width:80%} .pv-novare__lines span:nth-child(2){width:58%;margin-left:20%} .pv-novare__lines span:nth-child(3){width:75%} .pv-novare__lines span:nth-child(4){width:42%;margin-left:12%}

.pcard__visual--drift { background:#090b10; }
.pv-drift { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }
.pv-drift__shape { position:absolute;border-radius:30% 70% 70% 30% / 30% 30% 70% 70%; }
.pv-drift__shape--1 { width:170px;height:170px;background:linear-gradient(135deg,rgba(99,102,241,.32),rgba(168,85,247,.16));animation:morph 6s ease infinite; }
.pv-drift__shape--2 { width:110px;height:110px;background:rgba(168,85,247,.13);animation:morph 8s ease infinite reverse;transform:translate(44px,-32px); }
.pv-drift__shape--3 { width:75px;height:75px;background:rgba(99,102,241,.1);animation:morph 5s ease infinite;transform:translate(-52px,42px); }
@keyframes morph { 0%,100%{border-radius:30% 70% 70% 30% / 30% 30% 70% 70%} 50%{border-radius:70% 30% 30% 70% / 70% 70% 30% 30%} }

.pcard__visual--spectrum { background:#050505; }
.pv-spectrum { position:absolute;inset:0;display:flex;align-items:stretch;overflow:hidden; }
.pv-spectrum__strip { flex:1;height:100%;opacity:.72;transition:opacity .3s; }
.pcard:hover .pv-spectrum__strip { opacity:.92; }
.pv-spectrum__strip--1{background:linear-gradient(180deg,#7c3aed,#4f46e5)} .pv-spectrum__strip--2{background:linear-gradient(180deg,#2563eb,#0891b2)} .pv-spectrum__strip--3{background:linear-gradient(180deg,#059669,#16a34a)} .pv-spectrum__strip--4{background:linear-gradient(180deg,#d97706,#dc2626)} .pv-spectrum__strip--5{background:linear-gradient(180deg,#db2777,#9333ea)}
.pv-spectrum__text { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(1.5rem,5vw,4rem);font-weight:800;letter-spacing:-.04em;color:rgba(255,255,255,.07);mix-blend-mode:overlay; }

.pcard__visual--echo { background:linear-gradient(160deg,#03100a 0%,#010805 100%); }
.pv-echo { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }
.pv-echo__letter { font-size:5rem;font-weight:800;position:absolute; }
.pv-echo__letter--1{color:rgba(16,185,129,.55)} .pv-echo__letter--2{color:rgba(16,185,129,.2);transform:translate(16px,11px)} .pv-echo__letter--3{color:rgba(16,185,129,.07);transform:translate(32px,22px)}

.pcard__visual--forge { background:linear-gradient(160deg,#1a0500 0%,#0d0200 100%); }
.pv-forge { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden; }
.pv-forge__glow { position:absolute;width:220px;height:220px;background:radial-gradient(circle,rgba(249,115,22,.32) 0%,transparent 65%); }
.pv-forge__text { position:relative;z-index:1;font-size:2.4rem;font-weight:800;letter-spacing:.1em;background:linear-gradient(135deg,rgba(249,115,22,.85),rgba(239,68,68,.65));-webkit-background-clip:text;-webkit-text-fill-color:transparent; }

.pcard__visual--arc { background:linear-gradient(160deg,#010a1a 0%,#020514 100%); }
.pv-arc { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }
.pv-arc__phone { width:70px;height:112px;background:rgba(255,255,255,.04);border:1.5px solid rgba(99,102,241,.32);border-radius:14px;padding:10px 8px;display:flex;align-items:center;justify-content:center; }
.pv-arc__screen { display:flex;flex-direction:column;gap:6px;width:100%; }
.pv-arc__row { height:6px;border-radius:99px;background:linear-gradient(90deg,#6366f1,#a855f7);opacity:.65; }
.pv-arc__row--short { width:60%; }

/* Work footer CTA */
.work__cta { margin-top: clamp(2.5rem,4vw,4rem); display: flex; justify-content: center; }

/* ════════════════════════════════════════════
   CINEMATIC POSTER VIEWER – work section
════════════════════════════════════════════ */
.dial-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(60px, 8vh, 100px) 0 clamp(32px, 4vh, 56px);
  overflow: visible;
}

/* Atmospheric colour glow behind the poster */
.dial-atmo {
  position: absolute;
  width: 55%;
  padding-bottom: 32%;
  border-radius: 50%;
  filter: blur(100px);
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  transition: background 1.4s ease;
}

/* Poster stage — height fills the viewport; width follows aspect-ratio */
.dial-stage {
  position: relative;
  z-index: 1;
  height: clamp(360px, calc(100vh - 200px), 860px);
  width: auto;
  aspect-ratio: 3 / 4;
  perspective: 900px;
  overflow: visible;
}

/* All cards stacked; slot transforms move them into fan positions */
.dial-orbit {
  position: relative;
  width: 100%;
  height: 100%;
}

.dial-card {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
  pointer-events: auto;
  cursor: none;
}

.dial-card__face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 40px 100px rgba(0,0,0,.72),
    0 10px 30px  rgba(0,0,0,.5),
    0 0 0 1px    rgba(238,236,231,.06);
  background: #0c0c0c;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.dial-card[data-idx="1"] .dial-card__face { background: #ede9e1; }
.dial-card[data-idx="2"] .dial-card__face { background: #f4f0e9; }

/* Side cards lift slightly to signal they're clickable */
.dial-card:not(.is-active) .dial-card__face:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 50px 120px rgba(0,0,0,.78),
    0 14px 40px  rgba(0,0,0,.52),
    0 0 0 1px    rgba(238,236,231,.10);
}

/* Active card — lift + outer glow */
.dial-card.is-active .dial-card__face:hover {
  transform: translateY(-12px) scale(1.04);
  box-shadow:
    0 70px 160px rgba(0,0,0,.82),
    0 24px 60px  rgba(0,0,0,.58),
    0 0 0 1px    rgba(238,236,231,.15),
    0 0 40px 4px rgba(255,255,255,.06);
}

/* Sheen sweep — diagonal glint on hover */
.dial-card.is-active .dial-card__face::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    108deg,
    transparent  38%,
    rgba(255,255,255,.18) 50%,
    transparent  62%
  );
  transform: translateX(-160%);
}
.dial-card.is-active .dial-card__face:hover::after {
  animation: cardSheen 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes cardSheen {
  to { transform: translateX(160%); }
}

.dial-card__face img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.dial-poster-overlay {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 1;
}

/* Specular gloss layer — follows mouse via CSS vars */
.dial-card__gloss {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,0)   55%
  );
  mix-blend-mode: overlay;
  opacity: 0;
}

/* Caption */
.dial-caption {
  text-align: center;
  margin-top: clamp(22px, 3vh, 36px);
  position: relative;
  z-index: 1;
}
.dial-caption__title {
  font-family: 'Apparel', 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  letter-spacing: .01em;
  color: rgba(238,236,231,.96);
  margin: 0 0 6px;
}
.dial-caption__cat {
  font-size: clamp(.6rem, .88vw, .74rem);
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(238,236,231,.30);
  margin: 0;
}

/* Thumbnail strip */
.dial-thumbs {
  display: flex;
  gap: clamp(10px, 1.4vw, 18px);
  margin-top: clamp(24px, 3.5vh, 40px);
  position: relative;
  z-index: 1;
}
.dial-thumb {
  width: clamp(48px, 5.5vw, 74px);
  aspect-ratio: 3 / 4;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  border: none;
  padding: 0;
  background: #111;
  opacity: .32;
  transform: scale(.94) translateY(0);
  transition: opacity .4s, transform .4s, box-shadow .4s;
}
.dial-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.dial-thumb.is-active {
  opacity: 1;
  transform: scale(1) translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 0 1.5px rgba(238,236,231,.22);
}
.dial-thumb:hover:not(.is-active) {
  opacity: .6;
  transform: scale(.97) translateY(-1px);
}

/* ── Magnifier star ── */
.dial-magnifier {
  position: fixed;
  top: 0; left: 0;
  width: 220px;
  height: 220px;
  /* 5-point star via clip-path polygon */
  clip-path: polygon(
    50%   0%,
    62.3% 33%,
    97.6% 34.5%,
    70%   56.5%,
    79.4% 90.5%,
    50%   71%,
    20.6% 90.5%,
    30%   56.5%,
    2.4%  34.5%,
    37.7% 33%
  );
  pointer-events: none;
  z-index: 9998;
  filter: drop-shadow(0 0 18px rgba(255,255,255,.08));
}
.dial-magnifier__inner {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

/* ════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════ */
.btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1.5px solid var(--ink-12); border-radius: 50px;
  padding: .72rem 1.9rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-60);
  transition: color .25s, border-color .25s, background .25s;
}
.btn-outline:hover { color: var(--ink); border-color: var(--ink-40); background: var(--ink-07); }

.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--accent); color: #fff; border-radius: 50px;
  padding: .82rem 2.2rem; font-size: .84rem; font-weight: 700;
  letter-spacing: -.01em; transition: opacity .2s, transform .2s;
  border: none;
}
.btn-primary:hover { opacity: .88; transform: translateY(-2px); }

/* ════════════════════════════════════════════
   ABOUT  (white section)
════════════════════════════════════════════ */
.about { background: transparent; position: relative; z-index: 1; }
.about__body { display: grid; grid-template-columns: 320px 1fr; gap: clamp(2.5rem,5vw,7rem); align-items: start; }
.about__photo-wrap { position: relative; }
.about__photo {
  border-radius: var(--radius-lg); overflow: hidden; position: relative;
  background: #0d0b1f; aspect-ratio: 4/5;
}
.about__photo::before {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(10,8,25,.82) 0%, rgba(10,8,25,.28) 38%, transparent 62%),
    linear-gradient(135deg, rgba(61,58,184,.28) 0%, transparent 55%);
}
.about__photo::after {
  content: '';
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(10,8,25,.48) 100%);
}
.about__avatar-svg { width: 100%; height: 100%; object-fit: cover; }
.about__avatar-img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 22%;
  display: block;
  filter: contrast(1.08) saturate(0.82) brightness(0.97);
}
.about__photo-badge {
  position: absolute; bottom: 18px; left: 18px; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  background: rgba(10,8,25,.65); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.18); border-radius: 50px;
  padding: .35rem .95rem; font-size: .72rem; font-weight: 700; color: #fff;
  letter-spacing: .04em;
  text-shadow: 0 0 8px rgba(255,255,255,.7), 0 0 18px rgba(255,255,255,.3);
  box-shadow: 0 0 12px rgba(255,255,255,.06), inset 0 0 8px rgba(255,255,255,.03);
  animation: badgeGlow 4s linear infinite;
}
@keyframes badgeGlow {
  0%   { box-shadow: 0 0  8px rgba(255,255,255,.05), inset 0 0  6px rgba(255,255,255,.02); border-color: rgba(255,255,255,.16); text-shadow: 0 0 6px rgba(255,255,255,.55), 0 0 14px rgba(255,255,255,.20); }
  25%  { box-shadow: 0 0 14px rgba(255,255,255,.10), inset 0 0  8px rgba(255,255,255,.04); border-color: rgba(255,255,255,.26); text-shadow: 0 0 8px rgba(255,255,255,.75), 0 0 20px rgba(255,255,255,.32); }
  50%  { box-shadow: 0 0 20px rgba(255,255,255,.16), inset 0 0 12px rgba(255,255,255,.06); border-color: rgba(255,255,255,.38); text-shadow: 0 0 10px rgba(255,255,255,.90), 0 0 26px rgba(255,255,255,.45); }
  75%  { box-shadow: 0 0 14px rgba(255,255,255,.10), inset 0 0  8px rgba(255,255,255,.04); border-color: rgba(255,255,255,.26); text-shadow: 0 0 8px rgba(255,255,255,.75), 0 0 20px rgba(255,255,255,.32); }
  100% { box-shadow: 0 0  8px rgba(255,255,255,.05), inset 0 0  6px rgba(255,255,255,.02); border-color: rgba(255,255,255,.16); text-shadow: 0 0 6px rgba(255,255,255,.55), 0 0 14px rgba(255,255,255,.20); }
}
.about__lead {
  font-size: clamp(1.05rem,2.2vw,1.45rem); font-weight: 600;
  line-height: 1.6; color: var(--ink); margin-bottom: 1.4rem; letter-spacing: -.015em;
}
.about__lead strong { font-weight: 800; }
.about__lead em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 500; font-size: 1.1em; color: var(--ink);
}
.about__body-text { font-size: .97rem; line-height: 1.78; color: var(--ink-60); margin-bottom: 1rem; }
.about__body-text strong { color: var(--ink); font-weight: 700; }
.about__tools { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.8rem 0; }
.about__tools span {
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-40); border: 1.5px solid var(--ink-12); border-radius: 50px;
  padding: .32rem .88rem; transition: color .2s, border-color .2s, text-shadow .2s, box-shadow .2s;
}
.about__tools span:hover {
  color: #fff;
  border-color: rgba(255,255,255,.45);
  text-shadow: 0 0 8px rgba(255,255,255,.8), 0 0 20px rgba(255,255,255,.35);
  box-shadow: 0 0 10px rgba(255,255,255,.08), inset 0 0 8px rgba(255,255,255,.04);
}
.about__socials { display: flex; gap: 1.5rem; }
.about__socials a {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-40); transition: color .2s, text-shadow .2s;
}
.about__socials a:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,.8), 0 0 20px rgba(255,255,255,.35);
}
.social-arrow {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.about__socials a:hover .social-arrow {
  transform: translate(3px, -3px);
}

/* ════════════════════════════════════════════
   SERVICES
════════════════════════════════════════════ */
.services { background: transparent; position: relative; z-index: 1; }
.slist__item {
  display: grid; grid-template-columns: 3rem 1fr auto auto;
  align-items: center; gap: 1.5rem;
  padding: 1.7rem 0; border-bottom: 1px solid var(--ink-07);
  position: relative; cursor: none;
}
.slist__item:first-child { border-top: 1px solid var(--ink-07); }
.slist__item::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to left, var(--ink-12) 0%, transparent 70%); opacity: 0; transition: opacity .3s;
  margin: 0 clamp(-20px,-4vw,-56px);
}
.slist__item:hover::before { opacity: 1; }
.slist__num  { font-size: .68rem; font-weight: 600; color: var(--ink-40); letter-spacing: .07em; }
.slist__name { font-size: clamp(1.05rem,2.4vw,1.85rem); font-weight: 700; letter-spacing: -.025em; color: var(--ink); transition: color .2s, filter .2s; }
.slist__item:hover .slist__name {
  color: #fff;
  filter:
    drop-shadow(0 0  6px rgba(255,255,255,.90))
    drop-shadow(0 0 18px rgba(255,255,255,.60))
    drop-shadow(0 0 38px rgba(255,255,255,.25));
}
.slist__desc { font-size: .8rem; color: var(--ink-40); max-width: 270px; line-height: 1.5; }
.slist__arrow { font-size: 1.1rem; color: var(--ink-40); transition: transform .35s cubic-bezier(.25,.46,.45,.94), color .25s; }
.slist__item:hover .slist__arrow { color: #fff; transform: translate(4px,-4px); }

/* ════════════════════════════════════════════
   SKILLS & CAPABILITIES
════════════════════════════════════════════ */
.skills-section {
  background: transparent;
  position: relative; z-index: 1;
  color: var(--ink);
  padding-top: clamp(60px,8vw,110px);
  padding-bottom: 0;
  overflow: hidden;
  position: relative;
}
/* Subtle indigo glow on right — matches brand */
.skills-section::after {
  content: ''; position: absolute;
  top: 0; right: 0; bottom: 0; width: 55%;
  background: radial-gradient(ellipse at 90% 35%, rgba(61,58,184,.15) 0%, transparent 65%);
  pointer-events: none;
}

.skills__eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(.9rem,1.3vw,1.2rem);
  color: rgba(238,236,231,.4);
  padding: 0 clamp(20px,4vw,56px);
  margin-bottom: clamp(1rem,2vw,1.8rem);
}

.skills__heading-wrap {
  padding: 0 clamp(10px,1.5vw,24px);
  overflow: hidden;
}
.skills__heading {
  font-size: clamp(3.8rem,12.5vw,16rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .92;
  color: var(--ink);
  text-transform: uppercase;
  will-change: opacity, transform;
}
.skills__heading-up {
  font-family: 'SuisseIntl', sans-serif;
  font-style: normal;
  font-weight: 400;
}
.skills__heading-it {
  font-family: 'SuisseIntl', sans-serif;
  font-style: normal;
  font-weight: 400;
}

.skills__body {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(2rem,4vw,6rem);
  padding: clamp(3rem,5vw,6rem) clamp(20px,4vw,56px) clamp(70px,9vw,130px);
  align-items: start;
  position: relative; z-index: 1;
}

/* Image card — sticky as list scrolls */
.skills__img-col { position: sticky; top: 110px; }
.skills__img-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  will-change: opacity, filter;
}
.skills__img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, #1a1830 0%, #0d0c1a 100%);
  border: 1px solid rgba(255,255,255,.07);
}

/* Skills list */
.skills__list-col { display: flex; flex-direction: column; gap: clamp(2.5rem,4vw,4rem); }
.skills__group { display: grid; grid-template-columns: 160px 1fr; gap: 1rem; align-items: start; }
.skills__label {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1rem,1.5vw,1.5rem);
  font-weight: 400;
  color: rgba(238,236,231,.4);
  padding-top: .2rem;
  will-change: opacity, filter;
}
.skills__items { list-style: none; }
.skills__items li {
  font-family: 'SuisseIntl', sans-serif;
  font-size: clamp(1.1rem,2.2vw,2.1rem);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.45;
  color: var(--ink);
  transition: color .2s;
  will-change: opacity, transform;
}
.skills__items li:hover { color: rgba(238,236,231,.4); }

/* ════════════════════════════════════════════
   FOOTER / CONTACT — redesigned
════════════════════════════════════════════ */
.footer {
  background: transparent;
  padding: clamp(60px,8vw,120px) clamp(20px,4vw,56px) 2.5rem;
  position: relative; z-index: 1;
  overflow: hidden;
}

/* Decorative watermark monogram */
.footer__mono {
  position: absolute;
  left: clamp(20px,4vw,56px);
  bottom: 44px;
  pointer-events: none;
  line-height: 1;
  user-select: none;
}
.footer__mono-h {
  font-size: clamp(10rem,26vw,32rem);
  font-weight: 800;
  letter-spacing: -.06em;
  color: rgba(238,236,231,.028);
  line-height: .85;
}
.footer__mono-year {
  font-size: clamp(3rem,8vw,10rem);
  font-weight: 700;
  letter-spacing: -.04em;
  color: rgba(238,236,231,.035);
  line-height: 1;
}

/* Contact rows */
.footer__details {
  max-width: 820px;
  margin-left: auto;
  padding-bottom: clamp(60px,9vw,130px);
  position: relative; z-index: 1;
}
.footer__drow {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: start;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(238,236,231,.07);
  will-change: opacity, transform;
}
.footer__drow:first-child { border-top: 1px solid rgba(238,236,231,.07); }
.footer__dlabel {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1rem,1.5vw,1.5rem);
  color: rgba(238,236,231,.38);
  padding-top: .1rem;
}
.footer__dval {
  font-size: clamp(1.15rem,2.2vw,2.1rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  transition: color .2s, filter .2s;
  display: block;
}
.footer__dval:hover {
  color: #fff;
  filter:
    drop-shadow(0 0  6px rgba(255,255,255,.90))
    drop-shadow(0 0 18px rgba(255,255,255,.60))
    drop-shadow(0 0 38px rgba(255,255,255,.25));
}
.footer__socials-list { display: flex; flex-direction: column; }

.footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; padding-top: 2rem;
  border-top: 1px solid rgba(238,236,231,.07);
  position: relative; z-index: 1;
}
.footer__logo { color: var(--cream); display: inline-flex; align-items: center; }
.footer__copy { font-size: .75rem; color: rgba(238,236,231,.3); }
.footer__links { display: flex; gap: 1.5rem; }
.footer__links a { font-size: .75rem; color: rgba(238,236,231,.3); text-transform: uppercase; letter-spacing: .07em; transition: color .2s; }
.footer__links a:hover { color: var(--cream); }

/* ════════════════════════════════════════════
   SKILLS + FOOTER INITIAL HIDDEN STATES
════════════════════════════════════════════ */
.skills__heading { opacity: 0; transform: translateY(28px); }
.skills__eyebrow { opacity: 0; filter: blur(8px); }
.skills__label   { opacity: 0; filter: blur(8px); }
.skills__img-card { opacity: 0; filter: blur(8px); }
.skills__items li { opacity: 0; transform: translateX(-18px); }
.footer__drow    { opacity: 0; transform: translateY(14px); }

/* ════════════════════════════════════════════
   SCROLL REVEAL — INITIAL HIDDEN STATES
   GSAP animates these to visible on scroll
════════════════════════════════════════════ */

/* Elements revealed by reveal() helper (opacity + blur) */
.section__num,
.about__photo-wrap,
.about__lead,
.about__body-text,
.about__tools,
.about__socials,
.work__cta,
.footer__eyebrow,
.footer__cta {
  opacity: 0;
  filter: blur(8px);
  will-change: filter, opacity, transform;
}

/* Portfolio cards (opacity + y) */
.pcard {
  opacity: 0;
  transform: translateY(22px);
  will-change: opacity, transform;
}

/* Service list items (opacity + x) */
.slist__item {
  opacity: 0;
  transform: translateX(-20px);
  will-change: opacity, transform;
}

/* Legacy helper classes kept for compatibility */
.bf    { opacity: 0; filter: blur(8px);  transform: translateY(16px); will-change: filter,opacity,transform; }
.bf-x  { opacity: 0; filter: blur(8px);  transform: translateX(-20px); will-change: filter,opacity,transform; }
.bf-card { opacity: 0; transform: translateY(22px); will-change: opacity,transform; }

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media (max-width:1024px) {
  .pgrid { grid-template-columns: repeat(2,1fr); }
  .pcard--large { grid-column: span 2; }
  .pcard--tall  { grid-column: span 1; grid-row: span 1; }
  .pcard--wide  { grid-column: span 2; }
  .about__body  { grid-template-columns: 260px 1fr; }
  .slist__desc  { display: none; }
  .slist__item  { grid-template-columns: 2.5rem 1fr auto; }
  .skills__body { grid-template-columns: 260px 1fr; }
  .skills__group { grid-template-columns: 130px 1fr; }
}
@media (max-width:768px) {
  .nav__links, .nav__time { display: none !important; }
  .nav__menu-btn { display: flex; }
  .hero { height: 100svh; }
  .hero__tagline { white-space: normal; width: 90%; }
  .pgrid { grid-template-columns: 1fr; }
  .pcard--large,.pcard--tall,.pcard--wide,.pcard--med,.pcard--sm { grid-column: span 1; }
  .pcard--large .pcard__link,.pcard--tall .pcard__link { aspect-ratio: 16/10; }
  .pcard--wide  .pcard__link { aspect-ratio: 16/9; }
  .about__body  { grid-template-columns: 1fr; }
  .about__photo { max-width: 290px; }
  .slist__item  { grid-template-columns: 2rem 1fr auto; gap: 1rem; }
  .hero__bar-c  { display: none; }
  .skills__body { grid-template-columns: 1fr; }
  .skills__img-col { position: static; }
  .skills__img-card { max-width: 280px; aspect-ratio: 4/3; }
  .skills__group { grid-template-columns: 110px 1fr; }
  .footer__details { margin-left: 0; }
  .footer__drow { grid-template-columns: 90px 1fr; }
}
@media (max-width:480px) {
  .hero__bar-r  { display: none; }
  .skills__group { grid-template-columns: 1fr; gap: .4rem; }
  .footer__drow { grid-template-columns: 1fr; gap: .3rem; }
}

/* ════════════════════════════════════════════
   AMBIENT BACKGROUND BLOBS
════════════════════════════════════════════ */
.bg-blobs {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}

.bg-blob--1 {
  width: 55vw; height: 55vw;
  background: radial-gradient(circle, hsla(var(--bh1), 80%, 48%, .22) 0%, transparent 70%);
  top: 5%; left: -8%;
  animation: bblob1 8s ease-in-out infinite alternate;
}
.bg-blob--2 {
  width: 40vw; height: 40vw;
  background: radial-gradient(circle, hsla(var(--bh2), 75%, 45%, .17) 0%, transparent 70%);
  top: 40%; right: -5%;
  animation: bblob2 11s ease-in-out infinite alternate;
}
.bg-blob--3 {
  width: 35vw; height: 35vw;
  background: radial-gradient(circle, hsla(var(--bh3), 85%, 42%, .20) 0%, transparent 70%);
  bottom: 30%; left: 30%;
  animation: bblob3 7s ease-in-out infinite alternate;
}
.bg-blob--4 {
  width: 48vw; height: 48vw;
  background: radial-gradient(circle, hsla(var(--bh4), 70%, 40%, .14) 0%, transparent 70%);
  bottom: 5%; right: 8%;
  animation: bblob4 13s ease-in-out infinite alternate;
}
.bg-blob--5 {
  width: 28vw; height: 28vw;
  background: radial-gradient(circle, hsla(var(--bh5), 78%, 46%, .15) 0%, transparent 70%);
  top: 65%; left: 55%;
  animation: bblob5 9s ease-in-out infinite alternate;
}

@keyframes bblob1 {
  from { transform: translate(0,    0)    scale(1);    }
  to   { transform: translate(18vw, 14vh) scale(1.20); }
}
@keyframes bblob2 {
  from { transform: translate(0,     0)    scale(1.10); }
  to   { transform: translate(-14vw,-18vh) scale(0.85); }
}
@keyframes bblob3 {
  from { transform: translate(0,    0)    scale(1);    }
  to   { transform: translate(-9vw, 22vh) scale(1.15); }
}
@keyframes bblob4 {
  from { transform: translate(0,     0)    scale(0.90); }
  to   { transform: translate(12vw, -14vh) scale(1.10); }
}
@keyframes bblob5 {
  from { transform: translate(0,    0)    scale(1);    }
  to   { transform: translate(-7vw,-12vh) scale(1.30); }
}

/* ════════════════════════════════════════════
   NAME CLOSER SECTION
════════════════════════════════════════════ */
.name-closer {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 1;
}

.name-closer__bg {
  position: absolute;
  inset: -6%;          /* oversize so blur edges stay hidden */
  z-index: 0;
}

.name-closer__vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(55px) brightness(0.6) saturate(1.4);
}
.name-closer__vid--b { opacity: 0; }

/* dark glass tint over the blurred video */
.name-closer__glass {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(8,8,10,.30);
}

.name-closer__content {
  position: relative; z-index: 2;
  padding: 0 clamp(20px,4vw,56px) clamp(20px,3vh,36px);
}

.name-closer__name {
  position: absolute;
  inset: 0;
  z-index: 2;
  mix-blend-mode: difference;
  font-size: clamp(2rem, 17vw, 22rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  padding: 0 0 calc(clamp(20px,3vh,36px) + 3.5rem);
  pointer-events: none;
  opacity: 0;
}

.name-closer__first {
  font-family: 'SuisseIntl', sans-serif;
  font-style: normal;
  font-weight: 400;
}

.name-closer__last {
  font-family: 'Apparel', 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  padding-right: 0.12em;
}

.name-closer__line {
  width: auto;
  height: 1px;
  background: rgba(238,236,231,.12);
  transform-origin: center;
  transform: scaleX(0);
  margin-left: clamp(-20px, -1.2vw, -6px);
  margin-right: clamp(-20px, -1.2vw, -6px);
  margin-bottom: clamp(20px,3vh,36px);
}
.name-closer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(.62rem,.85vw,.82rem);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(238,236,231,.5);
  margin-left: clamp(-20px, -1.2vw, -6px);
  margin-right: clamp(-20px, -1.2vw, -6px);
}

.name-closer__role em {
  font-style: normal;
  font-weight: 600;
  color: rgba(238,236,231,.5);
}
.name-closer__avail {
  color: #fff;
  text-shadow:
    0 0  5px rgba(255,255,255,.95),
    0 0 14px rgba(255,255,255,.75),
    0 0 30px rgba(255,255,255,.45),
    0 0 60px rgba(255,255,255,.20);
  animation: tubeFlicker 7s linear infinite;
}

.name-closer__top {
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
  color: rgba(238,236,231,.5);
  transition: color .2s, filter .2s;
  padding: 0.5rem 0.7rem;
  margin: -0.5rem -0.7rem;
}
.name-closer__top:hover {
  color: #fff;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.8));
}
.name-closer__top-arrow-clip {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  top: -1px;
}
.name-closer__top-arrow-clip::after {
  content: '↑';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 1;
}
.name-closer__top-arrow {
  display: block;
  line-height: 1;
  text-align: center;
}
.name-closer__top:hover .name-closer__top-arrow,
.name-closer__top:hover .name-closer__top-arrow-clip::after {
  animation: arrowSlide 0.28s ease-in-out forwards;
}
@keyframes arrowSlide {
  to { transform: translateY(-100%); }
}