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

    :root {
      --ink: #0f0f0f;
      --ink-2: #3a3a3a;
      --ink-3: #6b6b6b;
      --line: #e4e4e4;
      --bg: #fafaf8;
      --accent: #FFD123;
      --accent-light: #f5ede0;
      --white: #ffffff;
    }

    #work,
    #about,
    #career,
    #contact,
    footer {
      --accent: #BD9000;
    }

    html {
      scroll-behavior: smooth;
      cursor: crosshair;
    }

    body {
      font-family: 'Lexend Deca', sans-serif;
      background: var(--bg);
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    p, h4, h5, h6, li, span, div, a {
      text-wrap: pretty;
    }

    h1, h2, h3 {
      text-wrap: balance;
    }

    /* ── NAV ── */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 56px;
      background: rgba(250, 250, 248, 0.88);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--line);
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: 'Lexend Deca', sans-serif;
      font-size: 18px;
      font-weight: 600;
      color: var(--ink);
      text-decoration: none;
    }

    .nav-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }

    .nav-links {
      display: flex;
      gap: 36px;
      list-style: none;
    }

    .nav-links a {
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.01em;
      text-transform: lowercase;
      color: var(--ink-2);
      text-decoration: none;
    }

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

    /* ── NAV scroll state ── */
    nav {
      transition: background 0.3s, border-color 0.3s;
    }

    nav.at-top {
      background: rgba(0, 0, 0, 0.2);
      border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    nav.at-top .nav-links a {
      color: rgba(255, 255, 255, 0.75);
    }

    nav.at-top .nav-links a:hover {
      color: var(--accent);
    }

    nav.at-top .nav-logo a {
      color: #fff !important;
    }

    /* ── HERO ── */
    .hero {
      position: relative;
      overflow: hidden;
      padding: clamp(100px, 12vh, 160px) 56px clamp(60px, 10vh, 100px);
      display: grid;
      grid-template-columns: 1fr clamp(320px, 30vw, 420px);
      gap: clamp(40px, 6vh, 80px);
      align-items: center;
      border-bottom: none;
      background: #000;
      margin-bottom: -2px;
      min-height: 96vh;
      box-sizing: border-box;
    }

    /* 3D layer */
    .hero-video-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: auto;
      will-change: transform;
    }

    #heroSpline {
      width: 100%;
      height: 100%;
      display: block;
    }

    #heroYoutube {
      display: none;
      width: 300vh;
      height: 168.75vh; /* Strict 16:9 ratio to prevent internal letterboxing */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: none;
      pointer-events: none;
      z-index: -1;
      opacity: 0;
      transition: opacity 1.5s ease-in-out;
      filter: saturate(1.2) contrast(1.1);
    }

    #heroYoutube.is-playing {
      opacity: 0.6;
    }

    /* Triggered via JS for physical mobile devices only */
    body.is-mobile-device #heroSpline {
      display: none !important;
    }

    body.is-mobile-device #heroYoutube {
      display: block !important;
    }

    spline-viewer::part(logo) {
      display: none !important;
    }

    /* dither grain overlay */
    .hero-grain {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      pointer-events: none;
      opacity: 0.22;
      mix-blend-mode: overlay;
      image-rendering: pixelated;
    }

    /* gradient overlay */
    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(to bottom,
          rgba(5, 6, 10, 0.72) 0%,
          rgba(5, 6, 10, 0.45) 45%,
          rgba(5, 6, 10, 0.82) 85%,
          rgba(5, 6, 10, 1.0) 100%);
    }

    /* content sits above video + overlay */
    
    /* ── CURSOR MASK ── */
    .hero:hover .hero-cursor-mask {
      opacity: 0.5;
    }
    .hero-cursor-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 176px;
      height: 176px;
      pointer-events: none;
      z-index: 1; /* Behind text (z-index: 2) but above background */
      opacity: 0;
      transition: opacity 0.3s ease;
      will-change: transform;
      /* offset so the mouse is in the center */
      margin-top: -88px;
      margin-left: -88px;
    }

    @keyframes blobMorph {
      0% { border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%; }
      25% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
      50% { border-radius: 30% 70% 50% 50% / 30% 70% 30% 70%; }
      75% { border-radius: 70% 30% 60% 40% / 50% 60% 40% 50%; }
      100% { border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%; }
    }

    .hero-cursor-expander {
      width: 100%;
      height: 100%;
      border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transform: scale(0.8);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      will-change: transform;
      animation: blobMorph 5s ease-in-out infinite alternate;
    }

    .hero:hover .hero-cursor-expander {
      transform: scale(1);
    }
    
    /* When cycling, the mask expands rapidly */
    .hero-cursor-expander.is-expanding {
      transform: scale(25) !important; /* expand to cover screen */
      transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.8s ease;
      opacity: 0;
    }

    .hero-cursor-bg {
      position: absolute;
      inset: 0;
      z-index: -1;
      background: #000;
      transition: filter 1s ease, background 1s ease;
    }

    /* Keep pointer cursor for interactive elements like the CTA */
    .hero-cta {
      cursor: pointer;
    }

    .hero-content {
      position: relative;
      z-index: 2;
    }

    .hero-label {
      font-size: clamp(14px, 2.5vh, 20px);
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: lowercase;
      color: var(--accent);
      white-space: nowrap;
      margin-bottom: clamp(12px, 3.5vh, 24px);
    }

    .hero h1 {
      font-family: 'Lexend Deca', sans-serif;
      font-size: clamp(36px, min(5.5vw, 8vh), 80px);
      font-weight: 400;
      line-height: 1.08;
      letter-spacing: -0.02em;
      color: #fff;
      margin-bottom: clamp(16px, 4vh, 28px);
    }

    /* kinetic typography */
    .h1-line {
      display: inline-block;
      overflow: hidden;
      padding-bottom: 0.4em;
      margin-bottom: -0.4em;
      padding-left: 0.15em;
      padding-right: 0.5em;
      margin-left: -0.15em;
    }

    .h1-line-inner {
      display: inline-block;
      padding-bottom: 0.4em;
      margin-bottom: -0.4em;
      padding-right: 0.5em;
      margin-right: -0.5em;
      opacity: 0;
      transform: translateY(150%);
      animation: revealLine 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      will-change: transform;
    }



    @keyframes revealLine {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* shimmer sweep on "watch video." */
    .hero-title-em {
      display: inline-block;
      padding-bottom: 0.4em;
      margin-bottom: -0.4em;
      font-style: italic;
      background: linear-gradient(90deg,
          var(--accent) 0%,
          #f5c97a 38%,
          #fff0c0 50%,
          #f5c97a 62%,
          var(--accent) 100%);
      background-size: 280% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      padding-right: 0.5em;
      margin-right: -0.5em;
      background-clip: text;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      animation: shimmerGold 4s linear infinite;
      animation-delay: 1.4s;
    }

    @keyframes shimmerGold {
      0% {
        background-position: 200% center;
      }

      100% {
        background-position: -200% center;
      }
    }

    .hero-sub {
      font-size: 18px;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.82);
      max-width: 560px;
      text-wrap: pretty;
    }

    .hero-meta {
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding-bottom: 8px;
    }

    .hero-stat {
      border-top: 1px solid rgba(255, 255, 255, 0.18);
      padding-top: 16px;
    }

    .hero-stat-num {
      font-family: 'Lexend Deca', sans-serif;
      font-size: clamp(24px, min(3.5vw, 4vh), 30px);
      font-weight: 600;
      color: #fff;
      font-variant-numeric: tabular-nums;
    }

    .hero-stat-label {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: lowercase;
      color: rgba(255, 255, 255, 0.5);
      margin-top: 4px;
    }

    .hero-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: clamp(20px, 5vh, 40px);
      margin-left: -8px;
      padding: 23px 32px;
      padding-right: 28px; /* Optical alignment for the trailing icon */
      background: transparent;
      color: #fff;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: lowercase;
      text-decoration: none;
      border-radius: 9999px;
      position: relative;
      overflow: visible;
      cursor: pointer;
    }

    /* text + icon float above the gooey bg layer */
    .hero-cta-text,
    .hero-cta svg {
      position: relative;
      z-index: 1;
    }

    .hero-cta svg {
      width: 16px;
      height: 16px;
      transition: transform 0.4s ease;
    }

    .hero-cta:hover svg {
      transform: translateX(10px) rotate(30deg);
      transition: transform 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .hero-cta-text {
      font-size: clamp(13px, 1.5vw, 18px);
      font-weight: 500;
      letter-spacing: 0.06em;
      white-space: nowrap !important;
      transition: font-size 0.4s ease;
    }

    .hero-cta:hover .hero-cta-text {
      font-size: clamp(15px, 1.8vw, 22px);
      transition: font-size 1.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* gooey bg wrapper: filter isolated here, extends beyond button for blobs */
    .hero-cta-glow {
      position: absolute;
      inset: 0;
      animation: ctaGlow 8s linear infinite;
    }

    @keyframes ctaGlow {
      0% {
        filter: drop-shadow(0 0 6px rgba(216, 152, 62, 0.2)) drop-shadow(0 0 18px rgba(216, 152, 62, 0.08));
      }

      50% {
        filter: drop-shadow(0 0 18px rgba(216, 152, 62, 0.65)) drop-shadow(0 0 44px rgba(216, 152, 62, 0.3)) drop-shadow(0 0 64px rgba(245, 180, 80, 0.15));
      }

      100% {
        filter: drop-shadow(0 0 6px rgba(216, 152, 62, 0.2)) drop-shadow(0 0 18px rgba(216, 152, 62, 0.08));
      }
    }

    .hero-cta-bg {
      position: absolute;
      inset: -18px;
      filter: url('#hero-goo');
      opacity: 0.5;
    }

    .hero-cta-stroke {
      position: absolute;
      inset: -18px;
      filter: url('#hero-goo-stroke');
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.6s ease;
    }

    .hero-cta:hover .hero-cta-stroke {
      opacity: 0.3;
    }

    .hero-cta-stroke::before {
      content: '';
      position: absolute;
      top: 18px;
      bottom: 18px;
      left: 18px;
      right: 18px;
      border-radius: 9999px;
      background: white;
    }

    .hero-cta-stroke .hero-cta-blob {
      background: white;
    }

    /* frosted glass pill — outside gooey filter so backdrop-filter works */
    /* pill inside gooey layer — blobs merge into this */
    .hero-cta-bg::before {
      content: '';
      position: absolute;
      top: 18px;
      bottom: 18px;
      left: 18px;
      right: 18px;
      border-radius: 9999px;
      background: linear-gradient(90deg, var(--accent) 0%, #f5c97a 38%, #fff0c0 50%, #f5c97a 62%, var(--accent) 100%);
      background-size: 280% auto;
      animation: shimmerGold 20s linear infinite;
    }

    /* blob spans inside .hero-cta-bg */
    .hero-cta-blob {
      position: absolute;
      border-radius: 50%;
      background: var(--accent);
      transform: scale(0);
      transition: transform 0.4s ease;
      transition-delay: 0s;
    }

    /* top-left bump */
    .hero-cta-blob:nth-child(1) {
      width: 200px;
      height: 200px;
      top: -20px;
      left: calc(22% - 20px);
    }

    /* right-center bump — slightly below center */
    .hero-cta-blob:nth-child(2) {
      width: 42px;
      height: 42px;
      top: 50%;
      right: 6px;
      margin-top: -12px;
    }

    /* bottom bump */
    .hero-cta-blob:nth-child(3) {
      width: 152px;
      height: 152px;
      bottom: 4px;
      left: 55%;
    }

    .hero-cta:hover .hero-cta-blob {
      transform: scale(1);
    }

    .hero-cta:hover .hero-cta-blob:nth-child(1) {
      transition: transform 3.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      transition-delay: 0s;
    }

    .hero-cta:hover .hero-cta-blob:nth-child(2) {
      transition: transform 3.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      transition-delay: 0.45s;
    }

    .hero-cta:hover .hero-cta-blob:nth-child(3) {
      transition: transform 3.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      transition-delay: 0.9s;
    }

    /* Safari-only hack: Disable gooey blobs in Safari since WebKit drops feColorMatrix filters on HTML elements */
    @supports (background: -webkit-named-image(i)) {
      .hero-cta-blob {
        display: none !important;
      }
    }

    /* ── SECTION BASE ── */
    section {
      padding: 96px 56px;
      border-bottom: 1px solid var(--line);
    }

    .section-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: lowercase;
      color: var(--accent);
      margin-bottom: 48px;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .section-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--line);
    }

    h2 {
      font-family: 'Lexend Deca', sans-serif;
      font-size: clamp(32px, 3.5vw, 48px);
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -0.02em;
      margin-bottom: 24px;
      text-wrap: balance;
    }

    /* ── ABOUT ── */
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }

    .about-text p {
      font-size: 16px;
      line-height: 1.8;
      color: var(--ink-2);
      margin-bottom: 20px;
    }

    .about-text p:last-child {
      margin-bottom: 0;
    }

    .about-text>p {
      border-left: 3px solid var(--accent);
      padding-left: 28px;
    }

    .about-tools h3 {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: lowercase;
      color: var(--ink-3);
      margin-bottom: 20px;
    }

    .tools-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 40px;
    }

    .tool-tag {
      padding: 10px 16px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 2px;
      font-size: 13px;
      font-weight: 500;
      color: var(--ink-2);
    }

    .strength-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .strength-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 14px;
      line-height: 1.6;
      color: var(--ink-2);
    }

    .strength-list li::before {
      content: '→';
      color: var(--accent);
      flex-shrink: 0;
      font-weight: 600;
    }

    /* ── CAREER ── */
    .career-intro {
      font-size: 18px;
      line-height: 1.75;
      color: var(--ink-2);
      max-width: 720px;
      margin-bottom: 72px;
      text-wrap: pretty;
    }

    .timeline {
      position: relative;
      padding-left: 44px;
    }

    .timeline::before {
      content: '';
      position: absolute;
      left: 7px;
      top: 22px;
      bottom: 0;
      width: 0;
      border-left: 3px dashed var(--accent);
      opacity: 0.5;
    }

    .timeline-item {
      position: relative;
      padding-bottom: 64px;
    }

    .timeline-item:last-child {
      padding-bottom: 0;
    }

    .timeline-header {
      display: flex;
      align-items: center;
      gap: 28px;
      margin-left: -44px;
      margin-bottom: 12px;
    }

    .timeline-dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--accent);
      border: 3px solid var(--bg);
      box-shadow: 0 0 0 2px var(--accent);
      flex-shrink: 0;
    }

    .timeline-period {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: none;
      color: var(--accent);
      margin-bottom: 0;
    }

    .timeline-company {
      font-family: 'Lexend Deca', sans-serif;
      font-size: 36px;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: 6px;
      line-height: 1.1;
    }

    .timeline-role {
      font-size: 14px;
      font-weight: 500;
      color: var(--ink-3);
      margin-bottom: 20px;
    }

    .timeline-desc {
      font-size: 16px;
      line-height: 1.75;
      color: var(--ink-2);
      max-width: 680px;
      margin-bottom: 20px;
    }

    .timeline-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .tag {
      padding: 5px 12px;
      background: var(--accent-light);
      border-radius: 2px;
      font-size: 12px;
      font-weight: 500;
      color: var(--accent);
    }

    /* ── CONTRACT TIMELINE ITEMS ── */
    .timeline-item--contract {
      padding-bottom: 20px;
    }

    .timeline-item--contract.is-open {
      padding-bottom: 48px;
    }

    .timeline-item--contract .timeline-header {
      margin-left: -41px;
      gap: 31px;
    }

    .timeline-dot--contract {
      width: 10px;
      height: 10px;
      background: #888;
      border: 2px solid var(--bg);
      box-shadow: 0 0 0 2px #888;
      cursor: pointer;
      transition: background 0.2s, box-shadow 0.2s;
      position: relative;
    }

    .timeline-dot--contract:hover,
    .timeline-item--contract.is-open .timeline-dot--contract {
      background: var(--accent);
      box-shadow: 0 0 0 2px var(--accent);
    }

    .timeline-dot--contract::after {
      content: attr(data-tooltip);
      position: absolute;
      left: 22px;
      top: 50%;
      transform: translateY(-50%);
      background: #2a2520;
      color: #f5f0e8;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.05em;
      padding: 5px 9px;
      border-radius: 3px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s;
      z-index: 20;
    }

    .timeline-dot--contract:hover::after {
      opacity: 1;
    }

    .timeline-item--contract .timeline-period {
      color: #888;
      opacity: 0.7;
    }

    .timeline-contract-body {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transition: max-height 0.35s ease, opacity 0.25s ease;
    }

    .timeline-item--contract.is-open .timeline-contract-body {
      max-height: 300px;
      opacity: 1;
    }

    .timeline-contract-company {
      font-family: 'Lexend Deca', sans-serif;
      font-size: 22px;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: 4px;
      margin-top: 8px;
    }

    .timeline-contract-role {
      font-size: 13px;
      color: var(--ink-3);
      margin-bottom: 12px;
    }

    .timeline-contract-desc {
      font-size: 14px;
      line-height: 1.7;
      color: var(--ink-2);
      max-width: 560px;
    }

    /* ── WORK ── */
    .work-intro {
      font-size: 18px;
      line-height: 1.75;
      color: var(--ink-2);
      max-width: 680px;
      margin-bottom: 64px;
      text-wrap: pretty;
    }

    .work-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .work-card {
      position: relative;
      overflow: hidden;
      background: var(--white);
      border: 0;
      box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 2px 8px -2px rgba(0, 0, 0, 0.06), 0px 8px 24px -4px rgba(0, 0, 0, 0.04);
      text-decoration: none;
      color: inherit;
      display: block;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    /* Dark bg via opacity (GPU-composited) instead of background-color transition */
    .work-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: #0f1115;
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
      z-index: 0;
    }

    .work-card:hover::before {
      opacity: 1;
    }

    .work-card:hover {
      box-shadow: inset 0 0 0 1px #17D5FF, 0 4px 32px rgba(23, 213, 255, 0.12);
    }

    .work-card.tag-highlight {
      animation: cardHighlight 2.5s ease-out;
      box-shadow: inset 0 0 0 1px var(--accent);
    }

    @keyframes cardHighlight {
      0% {
        box-shadow: 0 0 0 6px var(--accent-light), 0 0 60px rgba(216, 152, 62, 0.6);
        transform: scale(1.02);
        z-index: 10;
      }

      20% {
        box-shadow: 0 0 0 4px var(--accent-light), 0 0 40px rgba(216, 152, 62, 0.4);
        transform: scale(1.02);
        z-index: 10;
      }

      100% {
        box-shadow: 0 0 0 0 transparent, 0 0 0 transparent;
        transform: scale(1);
        z-index: 10;
      }
    }

    .work-card:hover .work-card-type {
      color: #17D5FF;
    }

    .work-card:hover .work-card-title {
      color: #ffffff;
    }

    .work-card:hover .work-card-desc {
      color: rgba(255, 255, 255, 0.6);
    }

    .work-card:hover .work-card-stat strong {
      color: #ffffff;
    }

    .work-card:hover .work-card-stat span {
      color: rgba(255, 255, 255, 0.45);
    }

    /* Per-card accent colors on hover */
    a.work-card[href="case-study-looking-glass.html"]:hover,
    #card-lookingglass:hover {
      box-shadow: inset 0 0 0 1px #8B5CF6, 0 4px 32px rgba(139, 92, 246, 0.15) !important;
    }

    a.work-card[href="case-study-looking-glass.html"]:hover .work-card-type,
    #card-lookingglass:hover .work-card-type {
      color: #8B5CF6 !important;
    }

    .work-grid .work-card:nth-child(3):hover {
      box-shadow: inset 0 0 0 1px #4ade80, 0 4px 32px rgba(74, 222, 128, 0.12);
    }

    .work-grid .work-card:nth-child(3):hover .work-card-type {
      color: #4ade80;
    }

    .work-grid .work-card:nth-child(4):hover {
      box-shadow: inset 0 0 0 1px #facc15, 0 4px 32px rgba(250, 204, 21, 0.12);
    }

    .work-grid .work-card:nth-child(4):hover .work-card-type {
      color: #facc15;
    }

    .work-grid .work-card:nth-child(5):hover {
      box-shadow: inset 0 0 0 1px #f87171, 0 4px 32px rgba(248, 113, 113, 0.12);
    }

    .work-grid .work-card:nth-child(5):hover .work-card-type {
      color: #f87171;
    }

    .work-card-img {
      width: 100%;
      aspect-ratio: 16/10;
      background: linear-gradient(135deg, var(--accent-light) 0%, #e8e0f0 50%, #d4e8f0 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Lexend Deca', sans-serif;
      font-size: 40px;
      color: rgba(0, 0, 0, 0.12);
      overflow: hidden;
      position: relative;
      z-index: 1;
    }

    .work-card-img img {
      outline: 1px solid rgba(0, 0, 0, 0.06);
      outline-offset: -1px;
      transition: transform 0.35s ease, opacity 0.2s;
      will-change: transform;
    }

    .work-card:hover .work-card-img img {
      transform: scale(1.04);
      opacity: 0.88;
    }

    .work-card:nth-child(2) .work-card-img {
      background: linear-gradient(135deg, #d4e8f0 0%, var(--accent-light) 100%);
    }

    .work-card:nth-child(3) .work-card-img {
      background: linear-gradient(135deg, #e0f0e4 0%, #f0e8d4 100%);
    }

    .work-card:nth-child(4) .work-card-img {
      background: linear-gradient(135deg, #f0d4e8 0%, #d4e0f0 100%);
    }

    .work-card-body {
      padding: 28px 32px 32px;
      position: relative;
      z-index: 1;
    }

    .work-card-type {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: lowercase;
      color: var(--accent);
      margin-bottom: 10px;
      transition: color 0.2s;
    }

    .work-card-title {
      font-family: 'Lexend Deca', sans-serif;
      font-size: 22px;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: 10px;
      transition: color 0.2s;
    }

    .work-card-desc {
      font-size: 14px;
      line-height: 1.7;
      color: var(--ink-3);
      margin-bottom: 20px;
      transition: color 0.2s;
    }

    .work-card-meta {
      display: flex;
      gap: 20px;
    }

    .work-card-stat strong {
      display: block;
      font-size: 18px;
      font-family: 'Lexend Deca', sans-serif;
      color: var(--ink);
      transition: color 0.2s;
    }

    .work-card-stat span {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: lowercase;
      color: var(--ink-3);
      transition: color 0.2s;
    }

    /* ── PHILOSOPHY ── */
    .philosophy {
      background: var(--ink);
      color: var(--white);
    }

    .philosophy .section-label {
      color: var(--accent);
    }

    .philosophy .section-label::after {
      background: rgba(255, 255, 255, 0.12);
    }

    .philosophy h2 {
      color: var(--white);
    }

    .philosophy-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      margin-top: 64px;
    }

    .philosophy-card {
      padding: 40px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .philosophy-num {
      font-family: 'Lexend Deca', sans-serif;
      font-size: 48px;
      font-style: italic;
      color: var(--accent);
      line-height: 1;
      margin-bottom: 20px;
    }

    .philosophy-card h3 {
      font-family: 'Lexend Deca', sans-serif;
      font-size: 22px;
      font-weight: 400;
      color: var(--white);
      margin-bottom: 14px;
    }

    .philosophy-card p {
      font-size: 14px;
      line-height: 1.75;
      color: rgba(255, 255, 255, 0.55);
    }

    /* ── CONTACT ── */
    .contact-inner {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 80px;
      align-items: center;
    }

    .contact h2 {
      margin-bottom: 16px;
    }

    .contact-sub {
      font-size: 16px;
      line-height: 1.7;
      color: var(--ink-2);
      max-width: 480px;
      text-wrap: pretty;
    }

    .contact-links {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 240px;
    }

    .contact-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 2px;
      text-decoration: none;
      color: var(--ink);
      font-size: 14px;
      font-weight: 500;
      transition: border-color 0.2s, background 0.2s;
    }

    .contact-link:hover {
      border-color: var(--accent);
      background: var(--accent-light);
    }

    .contact-icon {
      font-size: 18px;
      margin-left: auto;
    }

    /* ── FOOTER ── */
    footer {
      padding: 32px 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: var(--ink-3);
    }

    footer a {
      color: var(--ink-3);
      text-decoration: none;
    }

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

    /* ── dither grain on hover ── */

    /* Buttons/links: background-position shift with overlay blend */
    @keyframes dither-roll {
      0% {
        background-position: 0px 0px
      }

      17% {
        background-position: -67px 43px
      }

      33% {
        background-position: 89px -57px
      }

      50% {
        background-position: -43px -97px
      }

      67% {
        background-position: 113px 71px
      }

      83% {
        background-position: -89px 113px
      }
    }

    .nav-links a {
      position: relative;
    }

    .contact-link {
      position: relative;
      overflow: hidden;
    }

    .contact-link::after,
    .nav-links a::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 300px 300px;
      mix-blend-mode: overlay;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s;
      z-index: 10;
    }

    .contact-link:hover::after,
    .nav-links a:hover::after {
      opacity: 0.35;
      animation: dither-roll 0.5s steps(6) infinite;
    }

    /* Work cards: GPU-composited transform shift, no mix-blend-mode */
    @keyframes dither-move {
      0% {
        transform: translate(0px, 0px)
      }

      17% {
        transform: translate(-67px, 43px)
      }

      33% {
        transform: translate(89px, -57px)
      }

      50% {
        transform: translate(-43px, -97px)
      }

      67% {
        transform: translate(113px, 71px)
      }

      83% {
        transform: translate(-89px, 113px)
      }
    }

    .work-card::after {
      content: '';
      position: absolute;
      inset: -120px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 300px 300px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s;
      will-change: transform;
      z-index: 2;
    }

    .work-card:hover::after {
      opacity: 0.08;
      animation: dither-move 0.5s steps(6) infinite;
    }

    /* ── HAMBURGER ── */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: crosshair;
      background: none;
      border: none;
      padding: 4px;
    }

    .nav-hamburger span {
      display: block;
      width: 22px;
      height: 1.5px;
      background: var(--ink);
      transition: transform 0.25s, opacity 0.25s;
    }

    nav.at-top .nav-hamburger span {
      background: #fff;
    }

    .nav-hamburger.open span:nth-child(1) {
      transform: translateY(6.5px) rotate(45deg);
    }

    .nav-hamburger.open span:nth-child(2) {
      opacity: 0;
    }

    .nav-hamburger.open span:nth-child(3) {
      transform: translateY(-6.5px) rotate(-45deg);
    }

    /* ── MOBILE MENU OVERLAY ── */
    .mobile-menu {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 99;
      background: rgba(250, 250, 248, 0.97);
      backdrop-filter: blur(12px);
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 120px 24px 60px;
      overflow-y: auto;
      gap: 40px;
    }

    .mobile-menu.open {
      display: flex;
    }

    /* Keep nav white to contrast against the light overlay menu */
    nav.menu-open {
      background: rgba(11, 17, 32, 0.9) !important;
      backdrop-filter: blur(12px) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    nav.menu-open a {
      color: #fff !important;
    }
    nav.menu-open .nav-hamburger span {
      background: #fff !important;
    }

    .mobile-menu a {
      font-family: 'Lexend Deca', sans-serif;
      font-size: 36px;
      font-weight: 400;
      color: var(--ink);
      text-decoration: none;
      letter-spacing: -0.01em;
      text-transform: lowercase;
      transition: color 0.2s;
    }

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

    /* ── RESPONSIVE ── */
    @media (max-width: 768px) {
      nav {
        padding: 0 24px;
        height: 56px;
      }

      .nav-avatar {
        width: 32px;
        height: 32px;
      }

      .nav-hamburger {
        display: flex;
      }

      .nav-links {
        display: none;
      }

      .hero {
        padding: 80px 24px 80px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 48px;
        min-height: 75dvh;
        max-height: none;
        box-sizing: border-box;
      }

      .hero .hero-meta {
        margin-top: auto;
      }

      .hide-mobile {
        display: none;
      }

      .hero h1 {
        font-size: clamp(32px, 9vw, 50px);
      }

      .hero-label {
        font-size: 12px;
        white-space: normal;
        line-height: 1.4;
      }

      .hero-cta {
        padding: 16px 20px;
      }

      .hero-cta-text {
        font-size: clamp(11px, 3vw, 14px);
      }

      .hero-cta:hover .hero-cta-text {
        font-size: clamp(12px, 3.2vw, 15px);
      }

      .hero-sub {
        font-size: 16px;
        max-width: 100%;
      }

      .hero-meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 16px;
        padding-bottom: 24px;
      }

      .hero-stat {
        padding: 12px 0;
      }

      .hero-stat-num {
        font-size: 24px;
      }

      .hero-stat-label {
        font-size: 11px;
        letter-spacing: 0.04em;
      }

      section {
        padding: 64px 24px;
      }

      .about-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }

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

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

      .work-intro,
      .career-intro,
      .about-intro {
        font-size: 15px;
      }

      .timeline-desc {
        font-size: 14px;
      }

      .timeline-contract-desc {
        font-size: 13px;
      }

      .timeline-dot--contract::after {
        display: none !important;
      }

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

      .philosophy-card {
        padding: 32px 24px;
      }

      .contact-inner {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .contact-links {
        min-width: auto;
      }

      footer {
        padding: 28px 24px;
        flex-direction: column;
        gap: 8px;
        font-size: 12px;
        text-align: center;
      }

      .h1-line-inner {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
    }

    @media (max-width: 360px) {
      span.hide-mobile-sm {
        display: none !important;
      }
    }

    @media (max-width: 480px) {
      .hero {
        padding: 100px 20px 0;
      }

      .hero-label {
        font-size: 13px;
        white-space: normal;
      }

      .hero-cta {
        padding: 12px 14px;
        gap: 8px;
        width: 100%;
        max-width: 320px;
        justify-content: center;
      }

      .hero-cta-text {
        font-size: clamp(9px, 3vw, 11px);
        white-space: nowrap;
      }

      .hero-cta:hover .hero-cta-text {
        font-size: clamp(9px, 3vw, 11px);
      }

      .hero-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .hero-stat-num {
        font-size: 20px;
      }

      .hero-stat-label {
        font-size: 11px;
        letter-spacing: 0.04em;
      }

      .hero-stat {
        padding-top: 16px;
      }

      section {
        padding: 56px 20px;
      }

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

      .work-card-body {
        padding: 20px 24px 24px;
      }

      .philosophy-card {
        padding: 28px 20px;
      }
    }
  </style>
          <style>
            @keyframes don-shimmer {
              0%   { background-position: -200% center; }
              100% { background-position:  200% center; }
            }
            .don-unlock-label {
              font-size: 11px;
              font-weight: 600;
              letter-spacing: 0.18em;
              text-transform: uppercase;
              color: rgba(255,255,255,0.3);
              margin-bottom: 20px;
            }
            .don-unlock-heading {
              font-size: clamp(36px, 6vw, 64px);
              font-style: italic;
              font-weight: 600;
              background: linear-gradient(90deg,#D8983E 0%,#f5d98a 40%,#D8983E 60%,#c07a1a 100%);
              background-size: 200% auto;
              -webkit-background-clip: text;
              background-clip: text;
              -webkit-text-fill-color: transparent;
              animation: don-shimmer 2s linear infinite;
            }