/* =============================================
   ROWAN SEXTON — PORTFOLIO
   style.css
   ============================================= */

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

:root {
  --bg:        #000000;
  --bg-card:   rgb(20,20,26);
  --bg-card2:  rgba(26,26,32,0.86);
  --border:    rgba(110,130,255,0.12);
  --text:      #E8EBF5;
  --text-muted:#8A95B8;
  --accent:    #7C72FF;
  --accent2:   #00C9F5;
  --accent3:   #4DE38A;
  --nav-h:     72px;
  --skills-header-h: 100px; /* synced with JS getSkillsBase() */
  --radius:    20px;
  --radius-sm: 12px;
  --transition:0.25s cubic-bezier(0.2,0,0,1);
  --spring:    0.6s cubic-bezier(0.16,1,0.3,1);
}

html { scroll-behavior: smooth; font-size: 16px; }

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

/* Unicorn Studio scene — hero section background only */
.unicorn-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: all;
}

/* On touch devices the canvas would swallow all touch events, preventing
   scroll. Disable pointer-events on hover:none (touch-only) devices. */
@media (hover: none) {
  .unicorn-bg {
    pointer-events: none;
  }
}

/* Hide Unicorn Studio badge */
.unicorn-bg a[href*="unicorn"],
[data-us-project] > *:not(canvas) {
  display: none !important;
}

.page-content {
  position: relative;
  z-index: 1;
  background: var(--bg);
}

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

/* --- CURSOR GLOW --- */
.cursor-glow {
  pointer-events: none;
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,114,255,0.08) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: left 0.08s, top 0.08s;
  z-index: 0;
}

/* --- STAR CURSOR --- */
body.has-star-cursor,
body.has-star-cursor * { cursor: none !important; }

.star-cursor {
  pointer-events: none;
  position: fixed;
  top: 0; left: 0;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
  z-index: 99999;
  animation: star-twinkle 3s ease-in-out infinite;
}

@keyframes star-twinkle {
  0%,  100% { opacity: 1;    filter: brightness(1);    }
  35%        { opacity: 0.78; filter: brightness(0.85); }
  65%        { opacity: 0.96; filter: brightness(1.12); }
}

/* Never show on touch devices */
@media (hover: none) { .star-cursor { display: none; } }

/* --- NAV --- */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: box-shadow var(--transition);
}

/* Gradient background on pseudo-element so nav content stays 100% opaque.
   More transparent so page content scrolling underneath shows through. */
#nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 100%);
  backdrop-filter: blur(60px) saturate(200%);
  -webkit-backdrop-filter: blur(60px) saturate(200%);
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  z-index: -1;
  pointer-events: none;
  transition: opacity var(--transition);
}

/* Scroll progress bar — fills along the bottom edge of the nav */
#navProgress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(to right, var(--accent), var(--accent2), var(--accent3));
  pointer-events: none;
  z-index: 1;
}

#nav.scrolled {}

.nav-inner {
  padding: 0 5vw;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-logo {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  transition: color var(--transition);
}
.nav-logo:hover { color: var(--accent); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.nav-link {
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  border-radius: 8px;
  transition: color var(--transition), background var(--transition);
  display: flex;
  align-items: center;
  gap: 5px;
}
.nav-link:hover,
.nav-link.active { color: var(--text); background: rgba(255,255,255,0.06); }

/* Dropdown chevron */
.dropdown-chevron {
  transition: transform var(--transition);
  flex-shrink: 0;
}

/* Dropdown wrapper */
.nav-dropdown-wrapper {
  position: relative;
}
.nav-dropdown-wrapper:hover .dropdown-chevron {
  transform: rotate(180deg);
}
.nav-dropdown-wrapper:hover .nav-dropdown {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
  visibility: visible;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  /* Bridge the gap with padding so mouse-move doesn't dismiss the dropdown */
  padding-top: 14px;
  transform: translateX(-50%) translateY(-8px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition);
  min-width: 240px;
}

/* Arrow — sits inside the padding gap */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(0,0,0,0.96);
}

.dropdown-inner {
  background: rgba(12,12,14,0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background var(--transition);
}
.dropdown-item:hover { background: rgba(255,255,255,0.06); }

.dropdown-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dropdown-item-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
}
.dropdown-item-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.dropdown-item-lock {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0.6;
}

/* Resume CTA */
.btn-resume {
  margin-left: 4px;
  padding: 8px 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.10) 100%);
  backdrop-filter: blur(20px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.08);
  color: rgba(255,255,255,0.92);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.28);
  border-bottom-color: rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.12);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  letter-spacing: 0.01em;
}
.btn-resume:hover {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.08) 60%, rgba(255,255,255,0.16) 100%);
  border-color: rgba(255,255,255,0.38);
  border-bottom-color: rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 4px 16px rgba(0,0,0,0.22),
    0 1px 3px rgba(0,0,0,0.14);
  transform: translateY(-1px);
}

/* Burger */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  display: none;
  flex-direction: column;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--border);
  gap: 2px;
}
.mobile-menu.open { display: flex; }

.mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  border-radius: 8px;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background var(--transition), color var(--transition);
}
.mobile-link:hover { background: rgba(255,255,255,0.05); color: var(--text); }

.mobile-dropdown-list {
  display: none;
  flex-direction: column;
  padding: 4px 0 4px 28px;
  gap: 2px;
}
.mobile-dropdown-list.open { display: flex; }

.mobile-sub-link {
  padding: 9px 14px;
  font-size: 0.85rem;
  color: var(--text);
  border-radius: 6px;
  transition: background var(--transition), color var(--transition);
}
.mobile-sub-link:hover { background: rgba(255,255,255,0.04); color: var(--text); }

.mobile-resume-link {
  margin-top: 8px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.10) 100%);
  backdrop-filter: blur(20px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.08);
  border: 1px solid rgba(255,255,255,0.28);
  border-bottom-color: rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.12);
  color: rgba(255,255,255,0.92) !important;
  border-radius: 12px;
  justify-content: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.mobile-resume-link:hover {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.08) 60%, rgba(255,255,255,0.16) 100%);
  border-color: rgba(255,255,255,0.38);
  border-bottom-color: rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 4px 16px rgba(0,0,0,0.22),
    0 1px 3px rgba(0,0,0,0.14);
  transform: translateY(-1px);
}

/* --- HERO --- */
#hero {
  position: relative;
  height: 100vh;   /* fallback for browsers without svh support */
  height: 100svh;
  background: var(--bg);
  overflow: hidden;
}

/* Gradient at bottom of hero fades Unicorn scene into page background */
#hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 280px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(24px, 6vw, 96px);
  pointer-events: none;
}

/* Re-enable pointer events on interactive elements within hero content */
.hero-content a,
.hero-content button {
  pointer-events: all;
}

/* Hero scroll indicator sits above the Unicorn background */
.hero-scroll-indicator {
  z-index: 1;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(0,201,245,0.1);
  border: 1px solid rgba(0,201,245,0.25);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent2);
  margin-bottom: 40px;
}
.hero-tag-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent2);
  box-shadow: 0 0 8px var(--accent2);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.8); }
}

/* Hide original hero elements replaced by the new animated headline + card */
#hero .hero-heading,
#hero .hero-bio,
#hero .hero-stats {
  display: none !important;
}

.hero-heading {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* ─── Animated headline ─── */
#hero .hero-new-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

#hero .hero-prefix {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 64px);
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

#hero .hero-word-wrap {
  display: block;
  min-width: 0;
  width: auto;
}

#hero .hero-word {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(48px, 8vw, 108px);
  color: var(--accent2);
  letter-spacing: -0.03em;
  line-height: 1;
  min-width: 0;
  width: auto;
  overflow: visible;
}

#hero .hero-word.word-exit {
  animation: heroWordExit 300ms ease-in forwards;
}

#hero .hero-word.word-hidden {
  opacity: 0;
  transform: translateY(16px);
  animation: none;
}

#hero .hero-word.word-enter {
  animation: heroWordEnter 400ms ease-out forwards;
}

@keyframes heroWordExit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-16px); }
}

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

/* ─── Credential block — bottom-anchored plain text ─── */
#hero .hero-cred-card {
  position: absolute;
  bottom: clamp(32px, 5vh, 56px);
  left: clamp(24px, 6vw, 96px);
  background: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 560px;
  pointer-events: all;
}

#hero .hero-cred-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: 0;
}

#hero .hero-cred-role,
#hero .hero-cred-project {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ─── Stat strip — inline row below credential text ─── */
#hero .hero-stat-strip {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  /* row-gap gives breathing room when stats wrap to a second line */
  gap: 6px 0;
  margin-top: 10px;
  padding: 0;
  border: none;
}

#hero .hero-stat-strip .hero-stat {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
}

/* Dot separator — placed before non-first stats so it lives outside the
   preceding stat's flex layout, giving symmetric spacing on both sides */
#hero .hero-stat-strip .hero-stat:not(:first-child)::before {
  content: '·';
  display: inline-block;
  color: var(--text-muted);
  margin: 0 9px;
  font-size: 13px;
  line-height: 1;
  vertical-align: middle;
}

#hero .hero-stat-strip .hero-stat-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent2);
  letter-spacing: 0;
  line-height: 1.4;
  margin-right: 0;
}

#hero .hero-stat-strip .hero-stat-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.4;
  white-space: nowrap;
}

/* Cyan accent on the Concord USA / Roche chips — scoped to the cred block */
#hero .hero-cred-card .highlight-pill {
  background: rgba(0, 201, 245, 0.12);
  border-color: rgba(0, 201, 245, 0.3);
  color: var(--accent2);
}
#hero .hero-cred-card a.highlight-pill:hover {
  background: rgba(0, 201, 245, 0.22);
  border-color: rgba(0, 201, 245, 0.55);
}

.cred-project-full { display: inline; }
.cred-project-short { display: none; }

@media (max-width: 768px) {
  /* Fix 3 — contain headline within viewport width on mobile */
  #hero .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  #hero .hero-new-headline {
    max-width: 100% !important;
    overflow: hidden !important;
    width: 100% !important;
  }
  #hero .hero-word {
    font-size: clamp(38px, 10vw, 64px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    width: 100% !important;
    white-space: nowrap !important;
  }
  #hero .hero-prefix {
    font-size: clamp(26px, 6.5vw, 40px) !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  #hero .hero-cred-card {
    left: clamp(20px, 5vw, 40px);
    bottom: clamp(24px, 4vh, 40px);
    max-width: calc(100vw - 40px);
  }
  #hero .hero-cred-name { font-size: 15px; }
  .cred-project-full { display: none !important; }
  .cred-project-short { display: inline !important; }
  /* Bug 1 — prevent pill wrapping/orphaning on narrow viewports */
  #hero .hero-cred-role {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    line-height: 1.6;
    font-size: 13px;
  }
  #hero .hero-cred-project {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    line-height: 1.6;
    font-size: 13px;
  }
  #hero .hero-stat-strip .hero-stat-value,
  #hero .hero-stat-strip .hero-stat-label { font-size: 12px; }
  /* Bug 2 — stack stats vertically; override unscoped .hero-stat padding leak */
  #hero .hero-stat-strip { flex-direction: column; align-items: flex-start; gap: 4px; }
  #hero .hero-stat-strip .hero-stat:not(:first-child)::before { display: none; }
  #hero .hero-stat-strip .hero-stat {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 5px;
    padding: 0 !important;
  }
  #hero .hero-stat-strip .hero-stat + .hero-stat { padding-left: 0 !important; }
  #hero .hero-stat-strip .hero-stat-value { margin-right: 0; }
}

/* Stack stats vertically on phones where the strip would otherwise wrap mid-item */
@media (max-width: 480px) {
  #hero .hero-stat-strip { flex-direction: column; align-items: flex-start; gap: 3px; }
  #hero .hero-stat-strip .hero-stat:not(:first-child)::before { display: none; }
  #hero .hero-stat-strip .hero-stat { display: flex; flex-direction: row; align-items: baseline; gap: 5px; }
  #hero .hero-stat-strip .hero-stat-value { margin-right: 0; }
}

.text-gradient {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-bio {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  color: var(--text);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
  max-width: none;
  margin: 0 0 20px;
}
.hero-bio strong { color: var(--text); font-weight: 700; }

.highlight-pill {
  display: inline-block;
  padding: 1px 10px;
  background: rgba(124,114,255,0.15);
  border: 1px solid rgba(124,114,255,0.32);
  border-radius: 100px;
  color: #B0AAFF;
  font-weight: 500;
  pointer-events: all;
  transition: background var(--transition), border-color var(--transition);
}
a.highlight-pill:hover {
  background: rgba(124,114,255,0.28);
  border-color: rgba(124,114,255,0.55);
}

.hero-stats {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 40px;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  padding: 16px 0;
}
.hero-stats .hero-stat + .hero-stat {
  padding-left: 32px;
}
.hero-stat-value {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 800;
  color: var(--accent2);
  letter-spacing: -0.03em;
  line-height: 1;
}
.hero-stat-label {
  font-size: clamp(0.78rem, 1.1vw, 0.95rem);
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.3;
}

.hero-cta {
  display: none; /* hidden on desktop; shown on mobile via media query */
  align-items: center;
  gap: 16px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.btn-primary {
  padding: 14px 32px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.10) 100%);
  backdrop-filter: blur(20px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.08);
  color: rgba(255,255,255,0.92);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.28);
  border-bottom-color: rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.12);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  letter-spacing: 0.01em;
}
.btn-primary:hover {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.08) 60%, rgba(255,255,255,0.16) 100%);
  border-color: rgba(255,255,255,0.38);
  border-bottom-color: rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 4px 16px rgba(0,0,0,0.22),
    0 1px 3px rgba(0,0,0,0.14);
  transform: translateY(-2px);
}

.btn-ghost {
  padding: 14px 32px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.10) 100%);
  backdrop-filter: blur(20px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.08);
  color: rgba(255,255,255,0.92);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.28);
  border-bottom-color: rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.12);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  letter-spacing: 0.01em;
}
.btn-ghost:hover {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.08) 60%, rgba(255,255,255,0.16) 100%);
  border-color: rgba(255,255,255,0.38);
  border-bottom-color: rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 4px 16px rgba(0,0,0,0.22),
    0 1px 3px rgba(0,0,0,0.14);
  transform: translateY(-2px);
}

/* Scroll indicator */
.hero-scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.4;
  animation: fadeInUp 1s 1.5s both;
}
.hero-scroll-indicator span {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.scroll-mouse {
  width: 22px; height: 36px;
  border: 1.5px solid var(--text-muted);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.scroll-wheel {
  width: 3px; height: 7px;
  background: var(--text-muted);
  border-radius: 2px;
  animation: scrollWheel 1.8s ease-in-out infinite;
}
@keyframes scrollWheel {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}

/* --- SECTION SHARED --- */
section { position: relative; z-index: 1; }

.section-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.section-sub {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 12px auto 0;
}

.section-header {
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
}

.skills-header,
.section-header {
  text-align: left;
  padding: 12px 0 40px;
  margin-bottom: 40px;
}
.skills-header h2,
.section-header h2 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

/* --- SKILLS --- */
#skills {
  padding: 120px 5vw;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.skill-category {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.25);
  transition: border-color var(--spring), box-shadow var(--spring), transform var(--spring);
}
.skill-category:hover {
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 16px 64px rgba(0,0,0,0.45), 0 0 0 1px rgba(124,114,255,0.15);
  transform: translateY(-6px);
}

.skill-cat-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.skill-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.skill-cat-header h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.skill-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skill-list li {
  font-size: 0.875rem;
  color: var(--text-muted);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  transition: color var(--transition);
}
.skill-list li:last-child { border-bottom: none; }
.skill-category:hover .skill-list li { color: rgba(232,234,240,0.85); }

/* --- CASE STUDIES — sticky stacking cards --- */
:root {
  --cs-header-h: 120px; /* synced with CS_HEADER_H in main.js */
}

#case-studies {
  padding: 120px 0 0;
}

.cs-header {
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
  margin: 0 0 40px;
  padding: 12px 5vw 40px;
}
.cs-header h2 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-top: 8px;
}

/* Stack container */
.cs-stack {
  width: 80vw;
  margin: 0 auto;
  padding: 0 0 40px;
}

/* Each card sticks at a progressively lower top, creating the stack.
   All cards — including the last — keep margin-bottom so every card
   has its own sticky zone and correctly slides over the one below it. */
.cs-card {
  position: sticky;
  top: calc(var(--nav-h) + var(--cs-header-h) + 24px + var(--i) * 18px);
  z-index: calc(1 + var(--i));
  aspect-ratio: 1.39 / 1;
  max-height: calc(100vh - var(--nav-h) - var(--cs-header-h) - 80px);
  max-width: calc((100vh - var(--nav-h) - var(--cs-header-h) - 80px) * 1.39);
  width: 100%;
  margin: 0 auto 3vw;
  border-radius: 24px;
  overflow: hidden;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 24px 80px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.04),
    0 0 60px rgba(var(--glow, 120,120,140), 0.20);
  transform-origin: top center;
  will-change: transform;
  transition:
    border-color var(--spring),
    box-shadow   var(--spring);
}
.cs-card:hover {
  border-color: rgba(255,255,255,0.14);
  box-shadow:
    0 24px 80px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.08),
    0 0 120px rgba(var(--glow, 120,120,140), 0.45);
}

.cs-card-link-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 36px 40px;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

/* Gradient overlay — dark at top for text legibility, fades into image */
.cs-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.45) 35%,
    rgba(0,0,0,0.1)  65%,
    transparent      100%);
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}

/* Meta row: year (left) + company (right) */
.cs-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.cs-year,
.cs-company {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

/* Horizontal rule — white on dark images, black on light images */
.cs-divider {
  height: 1.5px;
  background: var(--divider-color, rgba(255,255,255,0.55));
  margin-bottom: 24px;
}

/* Title row: product name (left) + lock icon (right) */
.cs-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}
.cs-title {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(1.4rem, 2.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #ffffff;
  flex: 1;
}

/* Lock icon circle */
.cs-arrow-wrap {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition:
    border-color var(--transition),
    background   var(--transition),
    box-shadow   var(--transition);
}
.cs-card:hover .cs-arrow-wrap {
  border-color: color-mix(in srgb, var(--c) 70%, transparent);
  background:   color-mix(in srgb, var(--c) 20%, transparent);
  box-shadow:   0 0 20px color-mix(in srgb, var(--c) 28%, transparent);
}
.cs-arrow-icon {
  transform: rotate(-45deg);
}

/* Image fills the full card as background */
.cs-img-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
}
.cs-img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 1;
  transition: transform 0.65s cubic-bezier(0.16,1,0.3,1);
  display: block;
}
.cs-card:hover .cs-img-placeholder img {
  transform: scale(1.04);
}

/* --- TESTIMONIALS — scroll-driven horizontal stack --- */

/* Tall section: vertical scroll range drives horizontal card animation */
#testimonials {
  position: relative;
  height: 350vh;
}

/* Sticky viewport: pins at nav bottom while #testimonials scrolls */
.testi-sticky {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 12px;
  gap: 0;
  overflow: visible;
}

/* Section header inside the sticky viewport */
.testi-header {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 0 5vw 40px;
  box-sizing: border-box;
}
.testi-header h2 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-top: 6px;
}

/* Stage: relative container; JS-positioned cards live here */
.testi-stage {
  flex: none;
  position: relative;
  width: 100%;
  height: 65vh;
  /* clip-x at the stage (direct card parent) so off-screen cards don't
     leak into the document width or appear on pinch-zoom-out.
     overflow-y stays visible so vertical card centering is unaffected.
     clip (unlike hidden) does not create a scroll container, so
     position:sticky on .testi-sticky above is completely unaffected. */
  overflow-x: clip;
  overflow-y: visible;
}

/* Cards: absolutely positioned — JS drives all transforms */
.testi-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80vw;
  height: 100%;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-top: 2px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 52px 56px 40px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  will-change: transform;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.04);
  transition: border-color var(--spring), box-shadow var(--spring);
}

/* Quote mark removed — hidden, quotes added via CSS on body text */
.testi-quote-mark { display: none; }

/* Text body — JS sets font-size dynamically to fill this space exactly */
.testi-body {
  flex: 1;
  min-height: 0;
  overflow: hidden; /* no scroll — binary search guarantees text fits */
  padding-bottom: 16px;
}

.testi-body p {
  font-size: inherit; /* inherits from .testi-body, set by JS */
  color: var(--text-muted);
  line-height: 1.72;
  font-style: italic;
  margin-bottom: 1.25em;
}
.testi-body p:last-child { margin-bottom: 0; }

/* Curly quotes around the full testimonial text */
.testi-body p:first-child::before {
  content: '\201C';
  color: var(--accent);
  font-style: normal;
}
.testi-body p:last-child::after {
  content: '\201D';
  color: var(--accent);
  font-style: normal;
}

/* Attribution row — floated to top via order */
.testi-attribution {
  order: -1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 24px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
/* Avatar removed */
.testi-avatar { display: none; }
.testi-attribution strong {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.testi-attribution span {
  display: block;
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  color: var(--text-muted);
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .testi-card { padding: 28px 28px 22px; }
}
@media (max-width: 480px) {
  .testi-card { padding: 20px 20px 16px; }
}

/* --- RESEARCH PAPERS --- */
#research {
  padding: 120px 5vw;
}

.research-header {
  margin-bottom: 56px;
}

.research-header h2 {
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-top: 6px;
}

.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr));
  gap: 24px;
  width: 100%;
}

.research-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.research-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
  border-color: rgba(124,114,255,0.3);
}

.research-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.research-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.2,0,0,1);
}

.research-card:hover .research-img img {
  transform: scale(1.04);
}

.research-body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.research-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.research-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* --- CONTACT --- */
#contact {
  padding: 120px 5vw 200px;
}

.contact-header {
  padding: 12px 0 20px;
  margin-bottom: 16px;
}
.contact-header h2 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-top: 6px;
}

.contact-sub {
  font-size: 1.15rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 48px;
}

.contact-links {
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.10) 100%);
  backdrop-filter: blur(20px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.08);
  color: rgba(255,255,255,0.92);
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.28);
  border-bottom-color: rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.12);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  letter-spacing: 0.01em;
}
.contact-btn:hover {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.08) 60%, rgba(255,255,255,0.16) 100%);
  border-color: rgba(255,255,255,0.38);
  border-bottom-color: rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 4px 16px rgba(0,0,0,0.22),
    0 1px 3px rgba(0,0,0,0.14);
  transform: translateY(-2px);
}

.contact-btn--ghost {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.10) 100%);
  backdrop-filter: blur(20px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.08);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.28);
  border-bottom-color: rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.12);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.contact-btn--ghost:hover {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.08) 60%, rgba(255,255,255,0.16) 100%);
  border-color: rgba(255,255,255,0.38);
  border-bottom-color: rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 4px 16px rgba(0,0,0,0.22),
    0 1px 3px rgba(0,0,0,0.14);
  color: rgba(255,255,255,0.92);
}

/* --- FOOTER --- */
#footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  padding: 32px 5vw;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-logo {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}
.footer-copy {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.footer-top {
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: color var(--transition);
}
.footer-top:hover { color: var(--accent); }

.footer-links { display: flex; gap: 16px; }
.footer-social {
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: color var(--transition);
}
.footer-social:hover { color: var(--accent); }

/* --- SCROLL REVEAL --- */
.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.skills-grid .reveal:nth-child(1) { transition-delay: 0.05s; }
.skills-grid .reveal:nth-child(2) { transition-delay: 0.12s; }
.skills-grid .reveal:nth-child(3) { transition-delay: 0.19s; }
.skills-grid .reveal:nth-child(4) { transition-delay: 0.26s; }

/* Section header for case studies */
#case-studies .cs-header.reveal {
  /* uses standard .reveal styles */
}

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

/* --- BACK TO TOP BUTTON --- */
.sticky-cta {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 90;
  padding: 12px 24px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 100%),
    rgba(255,255,255,0.08);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 24px rgba(0,0,0,0.2);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition:
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    transform 0.5s cubic-bezier(0.16,1,0.3,1),
    opacity 0.4s ease;
  white-space: nowrap;
}
.sticky-cta.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.sticky-cta:hover {
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 100%),
    rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 8px 32px rgba(0,0,0,0.25);
  transform: translateX(-50%) translateY(-3px);
}

/* Fixed LinkedIn button */
.linkedin-fab {
  position: fixed;
  bottom: clamp(32px, 5vh, 56px);
  right: 5vw;
  z-index: 90;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.10) 100%);
  backdrop-filter: blur(20px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.08);
  border: 1px solid rgba(255,255,255,0.28);
  border-bottom-color: rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 4px 16px rgba(0,0,0,0.22),
    0 1px 3px rgba(0,0,0,0.14);
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.linkedin-fab:hover {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.08) 60%, rgba(255,255,255,0.16) 100%);
  border-color: rgba(255,255,255,0.38);
  border-bottom-color: rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 8px 24px rgba(0,0,0,0.28),
    0 1px 3px rgba(0,0,0,0.14);
  transform: translateY(-3px);
}

/* --- RESPONSIVE --- */
/* Mobile — 768px and below */
@media (max-width: 768px) {
  .nav-links, .btn-resume { display: none; }
  .nav-burger { display: flex; }

  #hero { padding: calc(var(--nav-h) + 40px) 5vw 60px; }
  .hero-heading { font-size: 1.5rem; }
  .hero-bio { font-size: 1.5rem; }

  #skills { padding: 70px 0 0; }
  .skills-header { position: sticky; top: var(--nav-h); z-index: 50; padding: 8px 5vw 16px; margin-bottom: 0; }
  :root { --cs-header-h: 80px; --skills-header-h: 80px; }
  .skills-grid { display: flex; flex-direction: column; gap: 0; width: 90vw; margin: 0 auto; padding-bottom: 40px; }
  .skill-category {
    position: sticky;
    top: calc(var(--nav-h) + var(--skills-header-h) + 24px + var(--i) * 18px);
    z-index: calc(1 + var(--i));
    margin-bottom: 6vh;
    transform-origin: top center;
    will-change: transform;
    /* remove transform from transition — JS drives it directly */
    transition: border-color var(--spring), box-shadow var(--spring);
  }

  #case-studies { padding: 70px 0 0; }
  .cs-header { padding: 8px 5vw 16px; margin-bottom: 24px; }
  .cs-stack { width: 90vw; }
  .cs-card { margin-bottom: 4vw; }
  .cs-card-link-wrap { padding: 24px 24px; }
  .cs-title { font-size: 1.3rem; }
  .cs-arrow-wrap { width: 38px; height: 38px; }

  /* Cap body at viewport width so the Unicorn SDK measures the canvas
     container correctly (off-screen testimonial cards would otherwise
     expand body's offsetWidth before the SDK initialises) */
  body { max-width: 100vw; }

  #testimonials { height: 300vh; }
  .testi-stage { height: 60vh; }
  .testi-card { width: 90vw; padding: 28px 28px 22px; backdrop-filter: none; -webkit-backdrop-filter: none; }

  #research { padding: 70px 5vw; }
  #contact { padding: 70px 5vw; }
  #footer { padding: 32px 5vw; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 480px) {
  .hero-heading { font-size: 1.2rem; }
  .hero-bio { font-size: 1.3rem; }
  .hero-stats { gap: 0; }
  .hero-stat { padding: 12px 0; }
  .hero-stats .hero-stat + .hero-stat { padding-left: 20px; }
  .hero-stat-value { font-size: 1.5rem; }
  .hero-stat-label { font-size: 0.72rem; }
  .cs-card { margin-bottom: 5vw; }
  .cs-card-link-wrap { padding: 20px 20px; }
  .cs-title { font-size: 1.15rem; }
  .cs-arrow-wrap { width: 34px; height: 34px; }
  #testimonials { height: 280vh; }
  .testi-stage { height: 55vh; }
  .testi-card { width: 92vw; padding: 20px 20px 16px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .cs-process-steps { grid-template-columns: 1fr; }
}

/* =============================================
   CASE STUDY DETAIL PAGES
   ============================================= */

.cs-detail-hero {
  padding: calc(var(--nav-h) + 80px) 5vw 72px;
  border-bottom: 1px solid var(--border);
}
.cs-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 56px;
  transition: color var(--transition);
}
.cs-detail-back:hover { color: var(--text); }
.cs-detail-back svg { transition: transform var(--transition); }
.cs-detail-back:hover svg { transform: translateX(-3px); }

.cs-detail-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.cs-detail-tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c, var(--accent));
  background: color-mix(in srgb, var(--c, var(--accent)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 28%, transparent);
  border-radius: 100px;
  padding: 4px 14px;
}
.cs-detail-title {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(2.8rem, 6vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 28px;
}
.cs-detail-summary {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 680px;
  margin-bottom: 48px;
}
.cs-detail-stats {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  padding: 28px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 64px;
}
.cs-detail-stat { display: flex; flex-direction: column; gap: 5px; }
.cs-detail-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cs-detail-stat-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.cs-detail-hero-img {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.cs-detail-hero-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Body */
.cs-detail-body {
  padding: 80px 5vw 40px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.cs-body-section {}
.cs-body-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c, var(--accent));
  margin-bottom: 18px;
}
.cs-body-label--hidden { display: none; }

/* Act label color modifiers */
.cs-label-problem  { color: #FF6B6B; }
.cs-label-solution { color: var(--accent2); }
.cs-label-impact   { color: var(--accent3); }

.cs-body-title {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 20px;
  max-width: 800px;
}
.cs-body-text {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.85;
  max-width: 720px;
}
.cs-body-text p + p { margin-top: 16px; }

/* ─── Three-act structure ─── */

/* Act-opening sections: ghost number + act dividers */
.cs-act-01-start,
.cs-act-02-start,
.cs-act-03-start {
  position: relative;
  overflow: hidden;
}

/* Divider between acts */
.cs-act-02-start,
.cs-act-03-start {
  border-top: 1px solid var(--border);
  padding-top: 96px;
}

/* Ghost chapter numbers via ::before */
.cs-act-01-start::before,
.cs-act-02-start::before,
.cs-act-03-start::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 120px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.cs-act-01-start::before { content: '01'; color: rgba(255, 107, 107, 0.06); }
.cs-act-02-start::before { content: '02'; color: rgba(0, 201, 245, 0.05); }
.cs-act-03-start::before { content: '03'; color: rgba(77, 227, 138, 0.05); }

/* Content sits above ghost number */
.cs-act-01-start > *,
.cs-act-02-start > *,
.cs-act-03-start > * {
  position: relative;
  z-index: 1;
}

/* ─── Business Challenge callout block ─── */
.cs-callout-block {
  border-left: 3px solid var(--accent);
  background: rgba(124, 114, 255, 0.04);
  border-radius: 0 8px 8px 0;
  padding: 24px 28px;
  margin: 8px 0 0;
}
.cs-callout-block .cs-body-title {
  font-size: 22px;
  margin-bottom: 14px;
}

.cs-body-list {
  list-style: none;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cs-body-list li {
  padding-left: 18px;
  position: relative;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.cs-body-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c, var(--accent));
}

.cs-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.cs-outcomes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}
.cs-outcome-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(20, 20, 26, 0.5);
  border: 1px solid rgba(0, 201, 245, 0.18);
  border-left: 3px solid var(--accent2);
  border-radius: 0 6px 6px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}
.cs-outcome-dot { display: none; }

/* Problem pills — inside Act 01 sections */
.cs-problem-pill {
  background: rgba(255, 107, 107, 0.06);
  border: 1px solid rgba(255, 107, 107, 0.18);
  border-left: 3px solid #FF6B6B;
  border-radius: 0 6px 6px 0;
}

.cs-detail-img-block {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.cs-detail-img-block img {
  width: 100%;
  height: auto;
  display: block;
}

/* Next CS */
.cs-next {
  padding: 64px 5vw 80px;
  border-top: 1px solid var(--border);
}
.cs-next-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.cs-next-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  transition: gap var(--transition);
}
.cs-next-link:hover { gap: 24px; }
.cs-next-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cs-process-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: none;
  margin-bottom: 40px;
  border-top: 1px solid rgba(110, 130, 255, 0.10);
}
.cs-process-step {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 20px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(110, 130, 255, 0.08);
  padding: 14px 0;
  border-radius: 0;
}
.cs-process-step:last-child { border-bottom: none; }
.cs-process-num {
  font-family: 'Manrope', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--accent2);
  min-width: 22px;
}
.cs-process-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  min-width: 96px;
}
.cs-process-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 768px) {
  .cs-two-col { grid-template-columns: 1fr; gap: 32px; }
  .cs-detail-stats { gap: 28px; }
  .cs-detail-body { padding: 48px 5vw 32px; gap: 56px; }
  .cs-act-02-start,
  .cs-act-03-start { padding-top: 64px; }
  .cs-process-step { flex-wrap: wrap; gap: 8px 20px; }
  .cs-process-name { min-width: auto; }
}

/* =============================================
   CS SCANNABILITY — TL;DR, PROGRESS, PULL QUOTE,
   PROCESS DETAIL, CAPTIONS, OUTCOMES INTRO
   (all scoped to case study pages only)
   ============================================= */

/* --- TL;DR block (Change 1) --- */
.cs-tldr {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 40px 0 48px;
}
.cs-tldr-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.cs-tldr-row:last-child { border-bottom: none; }
.cs-tldr-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent2);
  white-space: nowrap;
}
.cs-tldr-row--problem {
  border-left: 3px solid #FF6B6B;
}
.cs-tldr-row--problem .cs-tldr-label { color: #FF6B6B; }
.cs-tldr-row--solution {
  border-left: 3px solid var(--accent2);
}
.cs-tldr-row--solution .cs-tldr-label { color: var(--accent2); }
.cs-tldr-row--impact {
  border-left: 3px solid var(--accent3);
}
.cs-tldr-row--impact .cs-tldr-label { color: var(--accent3); }
.cs-tldr-value {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.6;
}

/* --- Sticky progress bar (Change 2) --- */
.cs-progress-bar {
  position: fixed;
  top: var(--nav-h, 72px);
  left: 0;
  right: 0;
  height: 36px;
  background: rgba(7, 8, 15, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 68px;
  z-index: 100;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.cs-progress-bar.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cs-progress-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--accent2);
  width: 0%;
  transition: width 0.1s linear, background 0.3s ease;
}
.cs-progress-bar[data-active-act="problem"]  .cs-progress-fill { background: #FF6B6B; }
.cs-progress-bar[data-active-act="solution"] .cs-progress-fill { background: var(--accent2); }
.cs-progress-bar[data-active-act="impact"]   .cs-progress-fill { background: var(--accent3); }
.cs-progress-acts {
  display: flex;
  gap: 32px;
  align-items: center;
}
.cs-progress-act {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(138, 149, 184, 0.4);
  transition: color 0.2s ease;
}
.cs-progress-act.active { color: var(--accent2); }
.cs-progress-act[data-act="problem"].active  { color: #FF6B6B; }
.cs-progress-act[data-act="solution"].active { color: var(--accent2); }
.cs-progress-act[data-act="impact"].active   { color: var(--accent3); }

/* --- Pull quote (Change 3) --- */
.cs-pull-quote {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 400;
  color: var(--text);
  line-height: 1.45;
  max-width: 680px;
  margin: 0 0 64px;
  padding: 0 0 0 28px;
  border-left: 3px solid var(--accent);
  letter-spacing: -0.01em;
}

/* --- Annotated process detail (Change 4) --- */
.cs-process-detail {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 32px;
  border-top: 1px solid rgba(110, 130, 255, 0.10);
}
.cs-process-detail-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid rgba(110, 130, 255, 0.08);
}
.cs-process-detail-row:last-child { border-bottom: none; }
.cs-process-detail-phase {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent2);
  letter-spacing: 0.02em;
}
.cs-process-detail-desc {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 600px;
}

/* --- Image captions (Change 5) --- */
.cs-img-caption {
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 12px;
  line-height: 1.5;
  max-width: 680px;
  opacity: 0.7;
}

/* --- Outcome framing line (Change 6) --- */
.cs-outcomes-intro {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
  opacity: 0.6;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .cs-tldr-row { grid-template-columns: 1fr; gap: 6px; }
  .cs-tldr-label { white-space: normal; }
  .cs-progress-bar { padding: 0 20px; }
  .cs-progress-acts { gap: 16px; }
  .cs-process-detail-row { grid-template-columns: 1fr; gap: 8px; }
}

/* =============================================
   PASSWORD GATE
   ============================================= */

.pw-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pw-gate-inner {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.pw-gate-logo {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  text-decoration: none;
}
.pw-gate-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pw-gate-title {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0;
}
.pw-gate-form {
  display: flex;
  gap: 10px;
  width: 100%;
}
.pw-gate-input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition);
}
.pw-gate-input::placeholder { color: var(--text-muted); }
.pw-gate-input:focus { border-color: rgba(255,255,255,0.25); }
.pw-gate-input.error { border-color: #ff5c5c; }
.pw-gate-btn {
  padding: 12px 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.10) 100%);
  backdrop-filter: blur(20px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.08);
  border: 1px solid rgba(255,255,255,0.28);
  border-bottom-color: rgba(255,255,255,0.10);
  border-radius: 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.12);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.pw-gate-btn:hover {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.08) 60%, rgba(255,255,255,0.16) 100%);
  border-color: rgba(255,255,255,0.38);
  border-bottom-color: rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 4px 16px rgba(0,0,0,0.22),
    0 1px 3px rgba(0,0,0,0.14);
  transform: translateY(-1px);
}
.pw-gate-error {
  font-size: 0.82rem;
  color: #ff5c5c;
  display: none;
}
.pw-gate-error.visible { display: block; }

/* =============================================
   ABOUT PAGE
   ============================================= */

#about-hero {
  position: relative;
  background: var(--bg);
  overflow: hidden;
}
#about-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 280px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
  z-index: 1;
}

.about-hero {
  position: relative;
  z-index: 2;
  min-height: auto;
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 80px;
  align-items: center;
  padding: calc(var(--nav-h) + 64px) 5vw 80px;
  padding-bottom: 80px;
}

.about-photo-wrap {
  position: relative;
  isolation: isolate;
}
.about-photo-wrap::before {
  content: '';
  position: absolute;
  inset: -24px;
  background-image: url('images/image_123650291-fotor-20240908193110-min.png');
  background-size: cover;
  background-position: top center;
  border-radius: 32px;
  filter: blur(32px) saturate(1.6);
  opacity: 0.55;
  z-index: -1;
  transform: scale(1.04);
}
.about-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  border-radius: 20px;
  display: block;
}

.about-intro { max-width: 580px; }
.about-intro .section-eyebrow { margin-bottom: 12px; }
.about-headline {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 28px;
}
.about-headline-accent {
  font-family: 'Manrope', sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  color: var(--text);
  display: block;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.about-intro p {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 16px;
}
.about-intro p:last-of-type { margin-bottom: 16px; }
.about-philosophy {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--text-muted);
  line-height: 1.65;
  border-left: 3px solid var(--accent);
  padding: 12px 0 12px 20px;
  margin: 8px 0 32px;
  max-width: 480px;
}

.about-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* --- About content sections --- */
.about-content {
  position: relative;
  z-index: 1;
  padding: 0 5vw 100px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.about-block-title {
  font-family: 'Manrope', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.about-block-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Education */
.edu-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.edu-item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 26px;
  transition: border-color var(--transition), transform var(--transition);
}
.edu-item:hover {
  border-color: rgba(255,255,255,0.13);
  transform: translateX(5px);
}
.edu-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.4rem;
}
.edu-degree {
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.edu-school {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.edu-gpa {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent2);
  background: rgba(77,227,138,0.1);
  border: 1px solid rgba(77,227,138,0.2);
  border-radius: 100px;
  padding: 3px 12px;
  flex-shrink: 0;
}

/* Photo gallery */
.about-photos-grid {
  columns: 3;
  column-gap: 10px;
  width: 90vw;
}
.about-photo-item {
  break-inside: avoid;
  margin-bottom: 10px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  display: block;
}
.about-photo-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}
.about-photo-item:hover img {
  transform: scale(1.03);
}
.about-photo-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.72), transparent);
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  pointer-events: none;
}
@media (max-width: 768px) {
  .about-photos-grid { columns: 2; width: 90vw; }
}
@media (max-width: 480px) {
  .about-photos-grid { columns: 1; }
}

/* Interests */
.interests-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.interest-chip {
  padding: 9px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.875rem;
  color: var(--text-muted);
  transition: border-color var(--transition), color var(--transition), background var(--transition), transform var(--transition);
  cursor: default;
}
.interest-chip:hover {
  border-color: rgba(255,255,255,0.15);
  color: var(--text);
  background: rgba(255,255,255,0.05);
  transform: translateY(-2px);
}
.interest-chip[data-cat="creative"] {
  border-color: rgba(124, 114, 255, 0.3);
  color: rgba(175, 169, 236, 0.9);
}
.interest-chip[data-cat="active"] {
  border-color: rgba(0, 201, 245, 0.3);
  color: rgba(0, 201, 245, 0.85);
}
.interest-chip[data-cat="nature"] {
  border-color: rgba(77, 227, 138, 0.3);
  color: rgba(77, 227, 138, 0.85);
}
.interest-chip[data-cat="food"] {
  border-color: rgba(232, 168, 48, 0.3);
  color: rgba(232, 168, 48, 0.85);
}
.interest-chip[data-cat="curious"] {
  border-color: rgba(240, 153, 123, 0.3);
  color: rgba(240, 153, 123, 0.85);
}

/* About block wrapper */
.about-block { width: 100%; }


/* About page responsive */
@media (max-width: 900px) {
  .about-hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: calc(var(--nav-h) + 40px) 5vw 60px;
  }
  .about-photo-wrap { max-width: 280px; }
  .about-content { padding: 0 5vw 80px; }
}
@media (max-width: 768px) {
  .about-hero { padding: calc(var(--nav-h) + 32px) 5vw 48px; }
  .about-content { padding: 0 5vw 60px; gap: 48px; }
}
@media (max-width: 480px) {
  .about-intro h1 { font-size: 1.9rem; }
  .about-photo-wrap { max-width: 220px; }
}

/* ── Hero stat strip fix — appended to win cascade ── */
#hero .hero-stat-strip {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

#hero .hero-stat-strip .hero-stat {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  padding: 0 !important;
  padding-left: 0 !important;
}

#hero .hero-stat-strip .hero-stat + .hero-stat {
  padding-left: 0 !important;
}

#hero .hero-stat-strip .hero-stat:not(:first-child)::before {
  content: '·';
  display: inline;
  color: var(--text-muted);
  margin: 0 8px;
  font-size: 13px;
  line-height: 1;
  align-self: center;
}

#hero .hero-stat-strip .hero-stat-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent2);
  line-height: 1.4;
  margin-right: 0;
  white-space: nowrap;
}

#hero .hero-stat-strip .hero-stat-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.4;
  white-space: nowrap;
}

#hero .hero-content {
  justify-content: center;
  padding-bottom: 0;
}

@media (max-width: 768px) {
  #hero .hero-stat-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  #hero .hero-stat-strip .hero-stat {
    padding: 0 !important;
    padding-left: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 5px !important;
  }

  #hero .hero-stat-strip .hero-stat + .hero-stat {
    padding-left: 0 !important;
  }

  #hero .hero-stat-strip .hero-stat:not(:first-child)::before {
    display: none !important;
  }

  #hero .hero-new-headline {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }

  #hero .hero-word-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #hero .hero-word {
    font-size: clamp(38px, 10vw, 64px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
  }

  #hero .hero-prefix {
    font-size: clamp(26px, 6.5vw, 40px) !important;
    white-space: nowrap !important;
  }

  #hero .hero-cred-role,
  #hero .hero-cred-project {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    line-height: 1.6 !important;
  }

  #hero .hero-cred-card {
    bottom: clamp(28px, 5vh, 48px) !important;
  }
}