*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    * { cursor: none !important; }

    html { scroll-behavior: smooth; scroll-padding-top: 80px; }

    body {
      background-color: #edeae4;
      background-image:
        linear-gradient(
          158deg,
          #f2efe9 0%,
          #e8e4dd 25%,
          #ede9e2 50%,
          #e6e2db 75%,
          #edeae3 100%
        );
      color: #0c0b09;
      font-family: 'Space Mono', 'Courier New', monospace;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* ─── Liquid Glass panel ──────────────────────────────── */
    .glass {
      /* More transparent so the background shows through (refraction, not frosted) */
      background: rgba(255,255,255,0.28);
      /* Lower blur + high saturation/brightness = refractive lens feel */
      backdrop-filter: blur(18px) saturate(200%) brightness(1.07);
      -webkit-backdrop-filter: blur(18px) saturate(200%) brightness(1.07);
      /* Bright white border = glass edge thickness */
      border: 1.5px solid rgba(255,255,255,0.8);
      border-radius: 28px;
      box-shadow:
        /* Deep layered drop shadow for real depth */
        0 60px 140px rgba(0,0,0,0.16),
        0 16px 40px rgba(0,0,0,0.10),
        0 4px 10px rgba(0,0,0,0.07),
        /* TOP BEVEL — bright white specular highlight */
        inset 0 2px 0 rgba(255,255,255,1),
        /* BOTTOM BEVEL */
        inset 0 -1.5px 0 rgba(255,255,255,0.65),
        /* LEFT BEVEL — light catches left edge */
        inset 2.5px 0 0 rgba(255,255,255,0.5),
        /* RIGHT BEVEL */
        inset -2.5px 0 0 rgba(255,255,255,0.3),
        /* INNER GLOW — diffuse interior brightness */
        inset 0 0 60px rgba(255,255,255,0.07);
      overflow: hidden;
    }

    /* ─── Fixed hero name ────────────────────────────────── */
    :root {
      --hero-pad: 7.5vw;        /* content margin — wordmark aligns to it */
      --hero-w:  85vw;
      --hero-h:  25.92vw;       /* Logo-text.png is 2007 × 612 */
      /* The asset carries 3.438% transparent bearing before the "H", so text
         that should line up with the letterform is inset by this much. */
      --hero-ink: 2.92vw;
    }
    #hero-name-fixed {
      position: absolute;
      top: 0; left: 0; right: 0;
      z-index: 1;
      pointer-events: none;
      padding: 0 var(--hero-pad);
      will-change: transform;
      opacity: 0;
      isolation: isolate;
      contain: paint;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      transition: opacity 0.85s ease;
      transform-origin: 50% 100%;
    }
    #hero-name-fixed .hero-logo-img {
      background: transparent;
      transform: translateZ(0);
      transform-origin: 50% 0%;
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    #hero-name-fixed .hero-logo-mask {
      position: absolute;
      left: 0;
      right: 0;
      top: -16px;
      bottom: -16px;
      -webkit-mask-image: url('../Brand_Assets/Logo-text.png');
      mask-image: url('../Brand_Assets/Logo-text.png');
      -webkit-mask-size: 100% calc(100% - 32px);
      mask-size: 100% calc(100% - 32px);
      -webkit-mask-position: 0 16px;
      mask-position: 0 16px;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    #hero-name-fixed video {
      transform-origin: 50% 0%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    #hero-name-ghost {
      visibility: hidden;
      width: var(--hero-w);
      height: var(--hero-h);
      position: relative;
    }
    .hero-logo-img {
      display: block;
      width: var(--hero-w);
      height: var(--hero-h);
      background: #8a8880;
    }
    #page { position: relative; z-index: 2; }

    /* ─── Custom cursor ───────────────────────────────────── */
    #c-dot {
      position: fixed;
      width: 6px; height: 6px;
      background: #0c0b09;
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%,-50%);
      transition: width .25s cubic-bezier(.22,1,.36,1),
                  height .25s cubic-bezier(.22,1,.36,1),
                  background .25s ease;
    }
    #c-ring {
      position: fixed;
      width: 30px; height: 30px;
      border: 1.5px solid rgba(12,11,9,0.5);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9998;
      transform: translate(-50%,-50%);
      transition: width .35s cubic-bezier(.22,1,.36,1),
                  height .35s cubic-bezier(.22,1,.36,1),
                  border-color .35s ease;
    }
    body.cur-hover #c-dot  { width: 10px; height: 10px; background: #4a4844; }
    body.cur-hover #c-ring { width: 46px; height: 46px; border-color: rgba(12,11,9,0.18); }

    /* ─── Grain ───────────────────────────────────────────── */
    #grain-layer {
      position: fixed; inset: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      z-index: 500;
      opacity: 0.030;
      transition: opacity 0.18s ease;
    }
    body.is-scrolling #grain-layer { opacity: 0; }

    /* ─── Corner marks: wordmark left, hamburger right ─────── */
    #navbar {
      position: fixed;
      top: 1.5rem;
      right: 1.5rem;
      z-index: 200;
      display: flex;
      align-items: center;
    }
    #n-ham {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      min-height: 44px;
      padding: 0 0.2rem;
      background: none;
      border: 0;
    }
    .n-menu-label {
      font-family: 'Space Mono', monospace;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #D4213A;
      transition: color .25s ease;
    }
    .ham-box {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      gap: 4px;
      width: 22px;
      height: 22px;
    }
    .ham-line {
      display: block;
      width: 22px; height: 2px;
      flex-shrink: 0;
      background: #D4213A;
      transform: translateZ(0);
      transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease, width .25s ease;
      transform-origin: center;
    }
    .ham-line:nth-child(2) { width: 15px; }
    #n-ham:hover .ham-line:nth-child(2) { width: 22px; }
    #n-ham:focus-visible { outline: 2px solid #D4213A; outline-offset: 4px; }
    #navbar.nav-open .ham-line { width: 22px; }
    #navbar.nav-open .ham-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    #navbar.nav-open .ham-line:nth-child(2) { opacity: 0; }
    #navbar.nav-open .ham-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* ─── Right-side drawer ────────────────────────────────── */
    #nav-scrim {
      position: fixed;
      inset: 0;
      z-index: 197;
      background: rgba(12,11,9,0.34);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s ease;
    }
    #nav-scrim.open { opacity: 1; pointer-events: all; }

    #mobile-menu {
      position: fixed;
      top: 0; right: 0; bottom: 0;
      z-index: 198;
      width: min(390px, 88vw);
      display: flex;
      flex-direction: column;
      padding: 6rem 2.25rem 2.25rem;
      background: #f2efe9;
      border-left: 1px solid rgba(12,11,9,0.08);
      box-shadow: -24px 0 60px rgba(12,11,9,0.16);
      transform: translateX(100%);
      transition: transform .46s cubic-bezier(.22,1,.36,1);
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    #mobile-menu.open { transform: translateX(0); }

    .drawer-eyebrow { font-size: 0.55rem; letter-spacing: 0.26em; }
    .drawer-links {
      display: flex;
      flex-direction: column;
      margin-top: 1.6rem;
      border-top: 1px solid rgba(12,11,9,0.09);
    }
    .mob-link {
      display: flex;
      align-items: center;
      gap: 0.9rem;
      padding: 1.05rem 0.35rem;
      border-bottom: 1px solid rgba(12,11,9,0.09);
      text-decoration: none;
      transition: padding-left .3s cubic-bezier(.22,1,.36,1);
    }
    .mob-idx {
      font-family: 'Space Mono', monospace;
      font-size: 0.52rem; font-weight: 700; letter-spacing: 0.18em;
      color: rgba(12,11,9,0.28);
      transition: color .25s ease;
    }
    .mob-label {
      flex: 1;
      font-family: 'Space Mono', monospace;
      font-size: 1.05rem; font-weight: 700;
      letter-spacing: -0.015em;
      color: #0c0b09;
      transition: color .25s ease;
    }
    .mob-link svg { color: rgba(12,11,9,0.22); transition: color .25s ease, transform .3s cubic-bezier(.22,1,.36,1); }
    .mob-link:hover { padding-left: 0.85rem; }
    .mob-link:hover .mob-label, .mob-link:hover .mob-idx { color: #D4213A; }
    .mob-link:hover svg { color: #D4213A; transform: translate(2px,-2px); }
    .mob-link:focus-visible { outline: 2px solid #D4213A; outline-offset: -2px; }
    .mob-link[aria-current="page"] .mob-label,
    .mob-link[aria-current="page"] .mob-idx { color: #D4213A; }

    .mob-link-contact {
      justify-content: center;
      margin-top: 1.75rem;
      padding: 1rem 1.25rem;
      border: 0;
      border-radius: 100px;
      background: #0c0b09;
      color: #f8f7f4;
      font-family: 'Space Mono', monospace;
      font-size: 0.62rem; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase;
      transition: background .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
    }
    .mob-link-contact:hover { background: #D4213A; transform: translateY(-2px); padding-left: 1.25rem; }
    .mob-link-contact:active { transform: translateY(0); }

    .drawer-foot {
      margin-top: auto;
      padding-top: 2rem;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.06em;
      color: rgba(12,11,9,0.42);
    }
    .drawer-foot a { color: rgba(12,11,9,0.6); text-decoration: none; transition: color .2s ease; }
    .drawer-foot a:hover { color: #D4213A; }

    @media (max-width: 640px) {
      #navbar { top: 0.9rem; right: 0.9rem; }
      #mobile-menu { padding: 5.25rem 1.75rem 1.75rem; }
    }

    /* ─── Hero name ───────────────────────────────────────── */
    .hero-name {
      display: block;
      font-family: 'Poppins', sans-serif;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -0.01em;
      font-size: 16vw;
      color: #2d2d2b;
      white-space: nowrap;
      text-align: center;
    }

    /* ─── Section label ───────────────────────────────────── */
    .lbl {
      font-family: 'Space Mono', monospace;
      font-size: 0.78rem; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: #D4213A;
    }

    /* ─── Scroll-reveal ───────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(44px);
      transition: opacity .68s cubic-bezier(.22,1,.36,1),
                  transform .68s cubic-bezier(.22,1,.36,1);
    }
    .reveal.in { opacity: 1; transform: translateY(0); }
    .d1 { transition-delay: .08s; }
    .d2 { transition-delay: .16s; }
    .d3 { transition-delay: .24s; }
    .d4 { transition-delay: .32s; }

    /* ─── Pill exit (scroll up) ────────────────────────────── */
    section.glass {
      transition: opacity .55s cubic-bezier(.22,1,.36,1),
                  transform .55s cubic-bezier(.22,1,.36,1);
      content-visibility: auto;
      contain-intrinsic-size: 760px;
    }

    /* ─── Ambient glow overlay (inside the pill, z-index:-1 sits above
           glass background but below all content in backdrop-filter stacking ctx) */
    .glass-glow {
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: 0;
      border-radius: 27px;
      transition: opacity 1.6s ease;
    }
    section.glass.pill-exit {
      opacity: 0;
      transform: translateY(-36px) scale(0.972);
      pointer-events: none;
    }

    /* ─── Pulse dot ───────────────────────────────────────── */
    @keyframes pulse-dot {
      0%,100% { opacity: 1; }
      50%      { opacity: 0.25; }
    }
    .pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

    /* ─── Scroll arrow bounce ─────────────────────────────── */
    @keyframes arrow-bounce {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(7px); }
    }
    .bounce { animation: arrow-bounce 2.2s ease-in-out infinite; }

    /* ─── Marquee ─────────────────────────────────────────── */
    .mq-wrap { overflow: hidden; }
    .mq-track {
      display: flex;
      width: max-content;
      animation: mq-run 30s linear infinite;
    }
    @keyframes mq-run {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* ─── Project cards ───────────────────────────────────── */
    .proj-card {
      position: relative;
      overflow: hidden;
      background: rgba(15,22,42,0.7);
      display: block;
      text-decoration: none;
      border-radius: 16px;
    }
    .proj-card > img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
      transition: transform .65s cubic-bezier(.22,1,.36,1);
    }
    .proj-card:hover > img { transform: scale(1.05); }

    /* Photo + video hover */
    .photo-wrap:hover img { transform: scale(1.04); }
    .photo-wrap:hover .photo-overlay { opacity: 1 !important; }
    #artwork .photo-item { cursor: pointer; }
    #photography .photo-item:hover img, #artwork .photo-item:hover img { will-change: transform; }
    #photography .photo-item:hover img, #artwork .photo-item:hover img { transform: scale(1.04); }
    #photography .photo-item:hover .photo-overlay, #artwork .photo-item:hover .photo-overlay { opacity: 1 !important; }

    /* Video modal */
    #vid-overlay {
      position: fixed; inset: 0; z-index: 9998;
      background: rgba(0,0,0,0.96);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none;
      transition: opacity 0.28s ease;
    }
    #vid-overlay.open { opacity: 1; pointer-events: all; cursor: none; }
    #vid-player {
      max-width: 92vw; max-height: 88vh;
      width: auto; height: auto;
      border-radius: 8px; outline: none;
      cursor: auto !important;
    }
    #vid-close {
      position: absolute; top: 1.25rem; right: 1.25rem;
      width: 2.25rem; height: 2.25rem;
      background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 50%; cursor: pointer !important; color: rgba(255,255,255,0.6); padding: 0;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.2s ease, color 0.2s ease;
    }
    #vid-close:hover { background: rgba(255,255,255,0.16); color: #fff; }
    #vid-title {
      position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%);
      font-family: 'Space Mono', monospace; font-size: 0.65rem; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.4);
      pointer-events: none; white-space: nowrap;
    }

    /* Lightbox */
    #lb-overlay {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(8,7,5,0.97);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 4rem 5rem 2.5rem; box-sizing: border-box;
      gap: 1.25rem;
      opacity: 0; pointer-events: none;
      transition: opacity 0.28s ease;
    }
    #lb-overlay.open { opacity: 1; pointer-events: all; }
    #lb-img {
      flex: 1 1 auto; min-height: 0;
      max-height: 100%; max-width: min(72vw, 700px);
      width: auto; height: auto; object-fit: contain;
      border-radius: 6px;
      transform-origin: center center;
      transition: opacity 0.18s ease;
      user-select: none; -webkit-user-drag: none;
    }
    #lb-img.fading { opacity: 0; }
    /* Custom cursor — native cursors are OS-tinted, invisible on dark bg */
    #lb-overlay.open { cursor: none; }
    #lb-close, #lb-prev, #lb-next { cursor: pointer !important; }
    /* No custom cursor on touch devices */
    @media (pointer: coarse) {
      #lb-overlay.open { cursor: auto; }
      #lb-cursor { display: none !important; }
    }

    #lb-cursor {
      position: fixed; pointer-events: none; z-index: 10001;
      width: 12px; height: 12px; border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,0.9);
      box-shadow: 0 0 0 1.5px rgba(0,0,0,0.45);
      background: transparent;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: width 0.14s ease, height 0.14s ease, opacity 0.14s ease,
                  background 0.14s ease, border-color 0.14s ease;
    }
    #lb-cursor.vis { opacity: 1; }
    /* Crosshair bars — shown when zoom-in, hidden when grab/grabbing */
    #lb-cursor-bar-h, #lb-cursor-bar-v {
      position: absolute; inset: 0; margin: auto; border-radius: 1px;
      background: rgba(255,255,255,0.9);
      box-shadow: 0 0 0 0.5px rgba(0,0,0,0.4);
      transition: opacity 0.12s ease;
    }
    #lb-cursor-bar-h { width: 12px; height: 1.5px; }
    #lb-cursor-bar-v { width: 1.5px; height: 12px; }
    /* Grab: smaller ring, no crosshair */
    #lb-cursor.cur-grab {
      width: 22px; height: 22px;
    }
    #lb-cursor.cur-grab #lb-cursor-bar-h,
    #lb-cursor.cur-grab #lb-cursor-bar-v { opacity: 0; }
    /* Grabbing: small filled dot */
    #lb-cursor.cur-grabbing {
      width: 12px; height: 12px;
      background: rgba(255,255,255,0.9);
      border-color: transparent;
    }
    #lb-cursor.cur-grabbing #lb-cursor-bar-h,
    #lb-cursor.cur-grabbing #lb-cursor-bar-v { opacity: 0; }
    #lb-close {
      position: absolute; top: 1.25rem; right: 1.25rem;
      width: 2.25rem; height: 2.25rem;
      background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 50%; cursor: pointer;
      color: rgba(255,255,255,0.6); padding: 0;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.2s ease, color 0.2s ease;
    }
    #lb-close:hover { background: rgba(255,255,255,0.16); color: #fff; }
    #lb-prev, #lb-next {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 50%; width: 2.75rem; height: 2.75rem;
      cursor: pointer; color: rgba(255,255,255,0.65); padding: 0;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    }
    #lb-prev { left: 1.25rem; }
    #lb-next { right: 1.25rem; }
    #lb-prev:hover, #lb-next:hover { background: rgba(255,255,255,0.15); color: #fff; }
    #lb-prev.lb-hidden, #lb-next.lb-hidden { opacity: 0; pointer-events: none; }
    #lb-info {
      flex-shrink: 0;
      text-align: center; white-space: nowrap; pointer-events: none;
    }
    #lb-collection {
      font-family: 'Space Mono', monospace; font-size: 0.58rem;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(255,255,255,0.35); margin-bottom: 0.3rem;
    }
    #lb-title {
      font-family: 'Space Mono', monospace; font-size: 0.72rem;
      font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
      color: rgba(255,255,255,0.82);
    }
    #lb-counter {
      font-family: 'Space Mono', monospace; font-size: 0.52rem;
      letter-spacing: 0.1em; color: rgba(255,255,255,0.28); margin-top: 0.35rem;
    }
    .video-card img { transition: transform 0.6s cubic-bezier(.22,1,.36,1); }
    .video-card:hover img { transform: scale(1.03); transition: transform 0.6s cubic-bezier(.22,1,.36,1); }
    .video-featured-panel {
      background: #111;
      width: 100%;
      aspect-ratio: 16 / 9;
      height: auto;
      min-height: 0;
      contain: layout paint;
    }
    .video-featured-panel > img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
      transition: opacity 0.22s ease, transform 0.6s cubic-bezier(.22,1,.36,1);
    }
    .video-featured-panel > .card-preview {
      object-position: center center;
    }
    .video-featured-panel.is-vertical > img,
    .video-featured-panel.is-vertical > .card-preview {
      object-fit: cover;
      object-position: center center;
    }
    .video-featured-overlay {
      position: absolute; inset: 0;
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: 1rem;
      padding: 1.25rem;
      background: linear-gradient(to top, rgba(0,0,0,0.66) 0%, transparent 58%);
      color: rgba(255,255,255,0.9);
      z-index: 2;
    }
    .video-featured-caption {
      display: flex;
      flex-direction: column;
      gap: 0.28rem;
      min-width: 0;
      font-family: 'Space Mono', monospace;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }
    .video-featured-caption span:first-child {
      font-size: clamp(0.82rem, 1vw, 0.98rem);
      line-height: 1.25;
      overflow-wrap: anywhere;
    }
    .video-featured-caption span:last-child {
      font-size: 0.64rem;
      color: rgba(255,255,255,0.55);
    }
    .video-play-button {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.25);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: background 0.2s ease, transform 0.2s cubic-bezier(.22,1,.36,1);
    }
    .video-featured-panel:hover .video-play-button {
      background: rgba(212,33,58,0.9);
      transform: scale(1.04);
    }
    .video-thumbs .video-thumb-row {
      min-height: 56px;
      padding: 0.36rem 0.5rem;
      gap: 0.6rem;
    }
    .video-thumbs .video-thumb-row img {
      width: 48px;
      height: 48px;
      object-position: center;
    }
    .video-thumbs .video-thumb-row .art-thumb-label {
      font-size: 0.64rem;
      letter-spacing: 0.12em;
      line-height: 1.35;
    }
    .video-spotlight { align-items: start; }
    .video-thumbs {
      justify-content: flex-start;
      max-height: var(--video-preview-height, 407px);
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 0.35rem;
      border-right: 1.5px solid rgba(12,11,9,0.16);
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: rgba(212,33,58,0.9) rgba(12,11,9,0.14);
    }
    .video-thumbs::-webkit-scrollbar { width: 10px; }
    .video-thumbs::-webkit-scrollbar-track {
      background: rgba(12,11,9,0.14);
      border-radius: 999px;
    }
    .video-thumbs::-webkit-scrollbar-thumb {
      background: rgba(212,33,58,0.9);
      border-radius: 999px;
      border: 2px solid rgba(248,247,244,0.9);
    }
    @media (max-width: 700px) {
      .video-featured-panel {
        aspect-ratio: 16 / 9;
        height: auto;
        min-height: 0;
      }
      .video-thumbs {
        max-height: none;
        overflow: visible;
        padding-right: 0;
        border-right: 0;
        scrollbar-gutter: auto;
      }
    }

    /* ── Video card hover preview ───────────────────────────── */
    .card-preview {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover;
      opacity: 0; pointer-events: none;
      transition: opacity 0.55s ease;
    }
    .video-card.previewing .card-preview { opacity: 1; }
    /* When previewing, freeze the poster scale */
    .video-card.previewing img { transform: none !important; }

    /* ── Photography filmstrip ──────────────────────────────── */
    .photo-strip {
      display: flex; gap: 0.55rem;
      overflow-x: auto; overflow-y: visible;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      cursor: grab;
      padding-bottom: 0.5rem;
      user-select: none;
      -webkit-user-select: none;
    }
    .photo-strip::-webkit-scrollbar { display: none; }
    .photo-strip.strip-dragging { cursor: grabbing; }
    .photo-strip .photo-item {
      flex: 0 0 auto;
      width: clamp(260px, 38vw, 420px);
      scroll-snap-align: start;
      border-radius: 10px; overflow: hidden;
      position: relative; cursor: pointer;
    }
    .photo-strip .photo-item img {
      width: 100%; display: block;
      aspect-ratio: 3/4; object-fit: cover;
      transition: transform 0.6s cubic-bezier(.22,1,.36,1);
    }
    /* strip hint arrow — fades once scrolled */
    .strip-hint {
      display: flex; align-items: center; gap: 0.4rem;
      margin-top: 0.6rem;
      font-family: 'Space Mono', monospace; font-size: 0.68rem;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: #8a8880; opacity: 0.55;
      pointer-events: none;
      transition: opacity 0.4s ease;
    }
    .strip-hint.hidden { opacity: 0; }

    /* ── Project showcase card ──────────────────────────────── */
    .project-showcase {
      background: rgba(0,0,0,0.03);
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 16px;
      overflow: hidden;
    }
    .showcase-header {
      display: flex; align-items: flex-start; justify-content: space-between;
      flex-wrap: wrap; gap: 0.75rem;
      padding: 1.1rem 1.4rem;
      border-bottom: 1px solid rgba(0,0,0,0.07);
    }
    .showcase-client {
      font-family: 'Space Mono', monospace; font-size: 0.65rem;
      font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
      color: #7a7875; margin-bottom: 0.3rem;
    }
    .showcase-title {
      font-family: 'Space Mono', monospace; font-size: 1.1rem;
      font-weight: 700; letter-spacing: -0.01em; color: #0c0b09; margin: 0;
    }
    .showcase-tags {
      display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center;
    }
    .showcase-tag {
      font-family: 'Space Mono', monospace; font-size: 0.62rem;
      font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 4px 11px; border-radius: 100px;
      background: rgba(12,11,9,0.07); color: rgba(12,11,9,0.6);
      border: 1px solid rgba(12,11,9,0.1);
    }
    .showcase-body {
      padding: 1.1rem 1.4rem; display: flex; flex-direction: column; gap: 1.1rem;
    }
    .showcase-zone-label {
      display: block; font-family: 'Space Mono', monospace; font-size: 0.65rem;
      font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
      color: #9a9893; margin-bottom: 0.6rem;
    }
    .showcase-creative-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem;
    }
    .showcase-four-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem;
    }
    .showcase-four-grid .showcase-img img { aspect-ratio: 3/4; }
    .showcase-usecase-row {
      display: grid; grid-template-columns: 1fr; gap: 0.6rem;
    }
    @media (min-width: 640px) {
      .showcase-usecase-row { grid-template-columns: 1fr 1fr 0.85fr; align-items: center; gap: 0.75rem; }
    }
    .showcase-stall-grid { display: contents; }
    .showcase-writeup {
      font-family: 'Space Mono', monospace; font-size: 0.85rem;
      line-height: 1.8; color: #3d3b38;
    }
    .showcase-img {
      border-radius: 8px; overflow: hidden; position: relative;
    }
    .showcase-img img {
      width: 100%; display: block; object-fit: cover;
      transition: transform 0.55s cubic-bezier(.22,1,.36,1);
    }
    .showcase-img:hover img { transform: scale(1.04); }
    .showcase-creative-grid .showcase-img img { aspect-ratio: 1/1; }
    .showcase-usecase-row .showcase-img img { aspect-ratio: 4/3; }

    /* ── Artwork spotlight ──────────────────────────────────── */
    .artwork-spotlight {
      display: grid;
      grid-template-columns: 56% 1fr;
      gap: 0.85rem;
      align-items: start;
    }
    #artwork .artwork-spotlight {
      grid-template-columns: minmax(260px, 42%) 1fr;
      gap: 0.75rem;
      align-items: start;
    }
    @media (max-width: 700px) {
      .artwork-spotlight { grid-template-columns: 1fr; }
      #artwork .artwork-spotlight { grid-template-columns: 1fr; }
      #artwork .art-featured-panel {
        max-width: 100%;
        max-height: 360px;
      }
    }
    .art-featured-panel {
      position: relative; border-radius: 14px; overflow: hidden;
      cursor: pointer;
      transform-style: preserve-3d;
      transition: transform 0.55s cubic-bezier(.22,1,.36,1),
                  box-shadow 0.4s ease,
                  height 0.42s cubic-bezier(.22,1,.36,1);
      will-change: transform;
      box-shadow: 0 8px 28px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.07);
    }
    .art-featured-panel:hover {
      box-shadow: 0 16px 48px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.1);
    }
    .art-featured-panel img {
      width: 100%; display: block;
      transition: opacity 0.22s ease;
    }
    #artwork .art-featured-panel {
      width: 100%;
      height: 460px;
      max-width: min(100%, 520px);
      max-height: 460px;
      justify-self: start;
      background: rgba(12,11,9,0.04);
    }
    #artwork .art-featured-panel img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    @media (max-width: 700px) {
      #artwork .art-featured-panel {
        max-width: 100%;
        height: 360px;
        max-height: 360px;
      }
      #artwork .art-featured-panel img { max-height: 360px; }
    }
    .art-featured-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
      opacity: 0; transition: opacity 0.3s ease;
      display: flex; align-items: flex-end; justify-content: space-between; padding: 1.25rem; gap: 0.5rem;
    }
    .art-featured-panel:hover .art-featured-overlay { opacity: 1; }
    .art-featured-open-hint {
      font-family: 'Space Mono', monospace; font-size: 0.68rem; font-weight: 700;
      letter-spacing: 0.15em; text-transform: uppercase;
      color: rgba(255,255,255,0.75);
      display: flex; align-items: center; gap: 0.4rem;
    }
    .artwork-thumbs { display: flex; flex-direction: column; gap: 0.45rem; }
    .art-thumb-row {
      display: flex; align-items: center; gap: 0.7rem;
      padding: 0.55rem 0.6rem; border-radius: 9px; cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease;
      border: 1.5px solid transparent;
      position: relative;
    }
    .art-thumb-row:hover { background: rgba(0,0,0,0.04); }
    .art-thumb-row.active {
      background: rgba(0,0,0,0.055);
      border-color: rgba(0,0,0,0.09);
    }
    .art-thumb-row img {
      width: 58px; height: 58px; object-fit: cover;
      border-radius: 7px; flex-shrink: 0;
      transition: transform 0.35s cubic-bezier(.22,1,.36,1);
    }
    .art-thumb-row:hover img { transform: scale(1.06); }
    .art-thumb-row.active img { transform: scale(1.04); }
    #artwork .artwork-thumbs { gap: 0.35rem; }
    #artwork .art-thumb-row {
      padding: 0.4rem 0.5rem;
      gap: 0.6rem;
    }
    #artwork .art-thumb-row img {
      width: 48px;
      height: 48px;
    }
    .art-thumb-label {
      font-family: 'Space Mono', monospace; font-size: 0.72rem; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: #0c0b09; opacity: 0.65; line-height: 1.5;
    }
    .art-thumb-row.active .art-thumb-label { opacity: 0.9; }
    .art-thumb-row .art-thumb-dot {
      width: 4px; height: 4px; border-radius: 50%;
      background: #D4213A; margin-left: auto; flex-shrink: 0;
      opacity: 0; transition: opacity 0.2s ease;
    }
    .art-thumb-row.active .art-thumb-dot { opacity: 1; }
    .art-thumb-info { display: flex; flex-direction: column; gap: 0.05rem; flex: 1; min-width: 0; }
    .art-thumb-tool {
      font-family: 'Space Mono', monospace; font-size: 0.55rem; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: #D4213A; opacity: 0.55; line-height: 1.4;
      transition: opacity 0.2s ease;
    }
    .art-thumb-row.active .art-thumb-tool { opacity: 0.8; }
    .art-featured-tool {
      font-family: 'Space Mono', monospace; font-size: 0.58rem; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
      padding: 3px 9px; border-radius: 100px;
      background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.82);
      border: 1px solid rgba(255,255,255,0.18);
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }

    /* ── Education & NS ────────────────────────────────────── */
    .edu-timeline { position: relative; padding-left: 2rem; }
    .edu-timeline::before {
      content: ''; position: absolute; left: 0; top: 16px; bottom: 16px;
      width: 1.5px; background: rgba(0,0,0,0.08);
    }
    .edu-entry {
      position: relative; padding: 1rem 1.1rem 1.1rem;
      border-radius: 12px; border: 1.5px solid transparent;
      transition: background 0.25s ease, border-color 0.25s ease;
      cursor: default;
    }
    .edu-entry:hover {
      background: rgba(255,255,255,0.55);
      border-color: rgba(255,255,255,0.85);
    }
    .edu-dot {
      position: absolute; left: calc(-2rem - 4.5px); top: 1.25rem;
      width: 9px; height: 9px; border-radius: 50%;
      background: #f5f4f1; border: 1.5px solid rgba(0,0,0,0.2);
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .edu-entry:hover .edu-dot {
      background: #D4213A; border-color: #D4213A;
      box-shadow: 0 0 0 4px rgba(212,33,58,0.18);
    }
    .edu-entry > div:first-of-type p {
      font-size: 0.95rem !important;
      line-height: 1.45 !important;
    }
    .edu-entry > p.lbl {
      font-size: 0.82rem !important;
      line-height: 1.6 !important;
    }
    .edu-chip {
      display: inline-flex; align-items: center;
      padding: 2px 8px; border-radius: 100px;
      font-family: 'Space Mono', monospace; font-size: 0.62rem; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
    }
    .edu-chip-red  { background: rgba(212,33,58,0.09); color: #D4213A; }
    .edu-chip-mono { background: rgba(12,11,9,0.06);   color: rgba(12,11,9,0.5); }
    .ns-card {
      background: #0c0b09; border-radius: 14px; padding: 1.5rem 1.75rem;
      border: 1.5px solid rgba(255,255,255,0.07);
      box-shadow: 0 4px 24px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.1);
    }
    .ns-row {
      display: flex; align-items: flex-start; gap: 0.65rem;
    }
    .ns-row span.lbl {
      font-size: 0.78rem !important;
      line-height: 1.7 !important;
    }
    .ns-card p[style*="font-size:1.35rem"] {
      line-height: 1.35 !important;
    }
    .ns-bullet {
      flex-shrink: 0; width: 4px; height: 4px; border-radius: 50%;
      background: #D4213A; margin-top: 0.42rem;
    }

    .img-cycler {
      position: absolute; inset: 0;
      transition: transform .65s cubic-bezier(.22,1,.36,1);
    }
    .proj-card:hover .img-cycler { transform: scale(1.05); }
    .cycle-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: center;
      opacity: 0;
      transition: opacity 1s ease;
    }
    .cycle-img.active { opacity: 1; }

    /* Glass overlay variant (McDonald's) */
    .proj-card--glass .proj-overlay {
      background: rgba(4,8,15,0.82);
      transform: translateY(0);
      opacity: 0;
      transition: opacity .45s ease;
    }
    .proj-card--glass:hover .proj-overlay { opacity: 1; }
    .proj-card--glass .proj-info { justify-content: center; padding: 2.5rem 3rem; }

    .proj-overlay {
      position: absolute; inset: 0;
      background: rgba(4,8,15,0.88);
      transform: translateY(101%);
      transition: transform .52s cubic-bezier(.22,1,.36,1);
    }
    .proj-card:hover .proj-overlay { transform: translateY(0); }
    .proj-info {
      position: absolute; inset: 0;
      padding: 1.75rem 2rem;
      display: flex; flex-direction: column; justify-content: flex-end;
      color: rgba(255,255,255,0.95);
      opacity: 0; transform: translateY(14px);
      transition: opacity .32s ease .2s, transform .32s ease .2s;
    }
    .proj-card:hover .proj-info { opacity: 1; transform: translateY(0); }
    .proj-num {
      font-family: 'Space Mono', monospace;
      font-size: 0.75rem; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      margin-bottom: 0.4rem;
    }
    .proj-title {
      font-family: 'Space Mono', monospace;
      font-weight: 700; letter-spacing: -0.025em;
      color: rgba(255,255,255,0.95); line-height: 1.1;
    }
    .proj-desc {
      font-family: 'Space Mono', monospace;
      font-size: 1rem; color: rgba(255,255,255,0.58);
      margin-top: 0.45rem; line-height: 1.65;
    }
    .proj-card { cursor: pointer; }

    /* ─── Modal ──────────────────────────────────────────────── */
    #modal-overlay {
      position: fixed; inset: 0; z-index: 900;
      display: flex; align-items: center; justify-content: center;
      padding: 1.5rem;
      background: rgba(12,11,9,0.48);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity: 0; pointer-events: none;
      transition: opacity .32s ease;
    }
    #modal-overlay.open { opacity: 1; pointer-events: all; }
    #modal-panel {
      position: relative;
      width: 100%; max-width: 760px; max-height: 92vh;
      overflow-y: auto;
      background: rgba(248,247,244,0.98);
      backdrop-filter: blur(28px) saturate(180%) brightness(1.02);
      -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.02);
      border: 1.5px solid rgba(255,255,255,0.9);
      border-radius: 20px;
      box-shadow:
        0 60px 140px rgba(0,0,0,0.18),
        0 16px 40px rgba(0,0,0,0.10),
        0 4px 10px rgba(0,0,0,0.06),
        inset 0 2px 0 rgba(255,255,255,1),
        inset 0 -1.5px 0 rgba(255,255,255,0.65),
        inset 2.5px 0 0 rgba(255,255,255,0.5),
        inset -2.5px 0 0 rgba(255,255,255,0.3);
      transform: translateY(18px) scale(0.98);
      transition: transform .38s cubic-bezier(.22,1,.36,1);
    }
    #modal-panel::before {
      content: "";
      position: sticky; top: 0; z-index: 1;
      display: block; height: 0.35rem;
      background: linear-gradient(90deg, #D4213A 0%, rgba(212,33,58,0.46) 48%, rgba(12,11,9,0.12) 100%);
    }
    #modal-overlay.open #modal-panel { transform: translateY(0) scale(1); }
    #modal-close {
      position: sticky; top: 1rem; right: 1rem; z-index: 2;
      width: 2.2rem; height: 2.2rem;
      margin: 1rem 1rem 0 auto;
      border: none; border-radius: 50%; cursor: pointer;
      background: rgba(255,255,255,0.72);
      color: #D4213A; font-size: 1.1rem; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 8px 24px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(0,0,0,0.06);
      transition: background .2s ease, color .2s ease, transform .2s ease;
    }
    #modal-close:hover { background: rgba(255,255,255,0.96); color: #0c0b09; transform: translateY(-1px); }
    #modal-body { padding: 0.25rem 2.6rem 2.25rem; }
    .modal-kicker {
      display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center;
      margin-bottom: 0.9rem;
    }
    .modal-cat {
      font-family: 'Space Mono', monospace;
      font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
      color: #D4213A;
      border: 1px solid rgba(212,33,58,0.18);
      background: rgba(212,33,58,0.07);
      border-radius: 999px;
      padding: 0.36rem 0.62rem;
    }
    .modal-focus {
      font-family: 'Space Mono', monospace;
      font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: rgba(12,11,9,0.5);
    }
    .modal-title {
      font-family: 'Space Mono', monospace;
      font-size: clamp(1.55rem, 3vw, 2.35rem); font-weight: 700;
      letter-spacing: -0.025em; line-height: 1.15;
      color: #0c0b09; margin-bottom: 1.05rem;
    }
    .modal-meta-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr 1fr;
      gap: 0;
      border-top: 1px solid rgba(12,11,9,0.1);
      border-bottom: 1px solid rgba(12,11,9,0.1);
      margin-bottom: 1.35rem;
    }
    .modal-meta-item {
      padding: 0.9rem 1rem 0.85rem 0;
      border-right: 1px solid rgba(12,11,9,0.08);
    }
    .modal-meta-item:last-child { border-right: 0; padding-left: 1rem; }
    .modal-meta-item + .modal-meta-item { padding-left: 1rem; }
    .modal-meta-label {
      display: block;
      font-family: 'Space Mono', monospace;
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
      color: rgba(12,11,9,0.42);
      margin-bottom: 0.32rem;
    }
    .modal-meta-value {
      display: block;
      font-family: 'Space Mono', monospace;
      font-size: 0.92rem; font-weight: 700; line-height: 1.45;
      color: #0c0b09;
    }
    .modal-desc {
      font-family: 'Space Mono', monospace;
      font-size: 1.02rem; line-height: 1.72;
      color: #3d3b38; margin-bottom: 1.15rem;
    }
    .modal-bullets {
      list-style: none;
      display: grid;
      gap: 0.58rem;
      margin: 0 0 1.25rem;
      padding: 0;
    }
    .modal-bullets li {
      position: relative;
      padding-left: 1.15rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.96rem; line-height: 1.62;
      color: rgba(12,11,9,0.78);
    }
    .modal-bullets li::before {
      content: "";
      position: absolute; left: 0; top: 0.78em;
      width: 0.38rem; height: 0.38rem;
      border-radius: 50%;
      background: #D4213A;
    }
    .modal-skills {
      display: flex; flex-wrap: wrap; gap: 0.55rem;
    }
    .modal-skill {
      font-family: 'Space Mono', monospace;
      font-size: 0.78rem; color: #D4213A; letter-spacing: 0.04em;
      border: 1px solid rgba(212,33,58,0.16);
      background: rgba(255,255,255,0.55);
      border-radius: 999px;
      padding: 0.38rem 0.56rem;
    }
    @media (max-width: 640px) {
      #modal-overlay { padding: 0.75rem; align-items: flex-end; }
      #modal-panel { max-height: 92vh; border-radius: 18px; }
      #modal-body { padding: 0.25rem 1.25rem 1.6rem; }
      #modal-close { top: 0.75rem; right: 0.75rem; margin: 0.75rem 0.75rem 0 auto; }
      .modal-meta-grid { grid-template-columns: 1fr; }
      .modal-meta-item,
      .modal-meta-item + .modal-meta-item,
      .modal-meta-item:last-child {
        border-right: 0;
        border-bottom: 1px solid rgba(12,11,9,0.08);
        padding: 0.8rem 0;
      }
      .modal-meta-item:last-child { border-bottom: 0; }
    }
    /* ─── Card cursor tooltip ────────────────────────────── */

    /* ─── About bento layout ────────────────────────────── */
    .about-bento-top {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
      align-items: start;
    }
    .about-bento-skills {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }
    @media (min-width: 768px) {
      .about-bento-top    { grid-template-columns: 0.72fr 1.4fr; gap: 2rem; align-items: stretch; }
      .about-bento-skills { grid-template-columns: 1fr 1fr; }
      .about-bento-bio    { justify-content: flex-start; height: 100%; }
      .about-photo-col    { height: 100%; }
      #about-photo-panel  { flex: 1; }
      .about-location-card { flex: 1; display: flex; flex-direction: column; margin-bottom: 0; }
      #sg-map { flex: 1; height: auto; min-height: 80px; }
    }
    .about-photo-col { display: flex; flex-direction: column; }
    .about-bento-bio { display: flex; flex-direction: column; justify-content: center; }
    .about-name-display {
      font-family: 'Space Mono', monospace;
      font-size: clamp(1.55rem, 3vw, 2.5rem);
      font-weight: 700; letter-spacing: -0.025em; line-height: 1.05;
      color: #0c0b09; margin: 0 0 0.4rem;
    }
    .about-role-tag {
      font-family: 'Space Mono', monospace;
      font-size: 0.68rem; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: #9a9893; margin: 0 0 1.1rem;
      padding-bottom: 1rem; border-bottom: 1px solid rgba(0,0,0,0.07);
    }
    .about-bio-text {
      font-family: 'Space Mono', monospace;
      font-size: 1rem; line-height: 1.75;
      color: #3d3b38; margin-bottom: 0.75rem;
    }
    .about-inner-card {
      background: rgba(255,255,255,0.32);
      border: 1.5px solid rgba(255,255,255,0.72);
      border-radius: 16px; padding: 1.25rem 1.5rem;
    }

    /* ─── About photo panel ─────────────────────────────── */
    #about-photo-panel {
      position: relative; border-radius: 16px; overflow: hidden;
      aspect-ratio: 1/1; background: rgba(15,22,42,0.6);
      transform-style: preserve-3d;
      transition: box-shadow 0.4s ease;
      will-change: transform; cursor: default;
      box-shadow: 0 8px 12px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
      width: 100%;
    }
    .about-badge {
      position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2;
      display: flex; align-items: center; gap: 0.4rem;
      background: rgba(255,255,255,0.88);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.95);
      border-radius: 100px; padding: 0.3rem 0.65rem 0.3rem 0.5rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.52rem; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase; color: #0c0b09;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .about-badge-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #22c55e; flex-shrink: 0;
      box-shadow: 0 0 0 2.5px rgba(34,197,94,0.22);
      animation: pulse-green 2.4s ease-in-out infinite;
    }
    @keyframes pulse-green {
      0%, 100% { box-shadow: 0 0 0 2.5px rgba(34,197,94,0.22); }
      50%       { box-shadow: 0 0 0 4px   rgba(34,197,94,0.1);  }
    }
    .about-hover-card {
      position: absolute; inset: 0; z-index: 1;
      display: flex; flex-direction: column;
      align-items: flex-start; justify-content: flex-end; padding: 1.4rem;
      background: linear-gradient(to top, rgba(12,11,9,0.68) 0%, transparent 52%);
      opacity: 0; transition: opacity 0.3s ease;
    }
    #about-photo-panel:hover .about-hover-card { opacity: 1; }
    .about-location-card {
      padding: 0.75rem 0.85rem 0.85rem;
      background: rgba(0,0,0,0.055);
      border: 1px solid rgba(0,0,0,0.07);
      border-radius: 12px;
      box-shadow: inset 0 2px 6px rgba(0,0,0,0.08), inset 0 1px 2px rgba(0,0,0,0.05);
      margin-bottom: 0.75rem;
    }
    #sg-map { height: 130px; border-radius: 9px; overflow: hidden; }
    .sg-pin {
      width: 12px; height: 12px; border-radius: 50%;
      background: #D4213A; position: relative;
      box-shadow: 0 0 0 3px rgba(212,33,58,0.18);
    }
    .sg-pin::after {
      content: ''; position: absolute;
      top: 50%; left: 50%;
      width: 12px; height: 12px; border-radius: 50%;
      border: 1.5px solid #D4213A;
      transform: translate(-50%,-50%) scale(1);
      opacity: 0; animation: sg-pulse 2s ease-out infinite;
    }
    @keyframes sg-pulse {
      0%   { transform: translate(-50%,-50%) scale(1);   opacity: 0.8; }
      100% { transform: translate(-50%,-50%) scale(3);   opacity: 0;   }
    }
    .about-stats {
      display: flex; align-items: center;
      padding: 1rem 0; margin-bottom: 1.75rem;
      border-top: 1px solid rgba(0,0,0,0.07);
      border-bottom: 1px solid rgba(0,0,0,0.07);
    }
    .about-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.18rem; }
    .about-stat-num {
      font-family: 'Space Mono', monospace; font-size: 1.25rem; font-weight: 700;
      color: #0c0b09; letter-spacing: -0.02em; line-height: 1;
    }
    .about-stat-lbl {
      font-family: 'Space Mono', monospace; font-size: 0.58rem; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase; color: #9a9893;
    }
    .about-stat-div { width: 1px; height: 1.75rem; background: rgba(0,0,0,0.1); flex-shrink: 0; }

    /* ─── Tool marquee ──────────────────────────────────── */
    .tool-marquee-wrap {
      margin: 1.25rem -1.5rem;
      padding: 0.9rem 0;
      overflow: hidden;
      border-top: 1px solid rgba(0,0,0,0.06);
      border-bottom: 1px solid rgba(0,0,0,0.06);
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    }
    @media (min-width: 768px) {
      .tool-marquee-wrap { margin: 1.25rem -2rem; }
    }
    .tool-marquee-wrap { contain: paint; }
    .tool-marquee-track {
      /* Compositor-driven: the duplicated half of the strip means a
         -50% translation loops seamlessly, with no per-frame JavaScript. */
      animation: mq-run 45s linear infinite;
      will-change: transform;
      display: flex;
      align-items: center;
      width: max-content;
    }
    .tool-marquee-item {
      display: flex;
      align-items: center;
      padding: 0 1.75rem;
      flex-shrink: 0;
    }
    .tool-marquee-item img {
      height: 34px;
      width: auto;
      max-width: 130px;
      object-fit: contain;
      opacity: 0.58;
      filter: drop-shadow(0 1px 3px rgba(0,0,0,0.07));
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .tool-marquee-item img:hover {
      opacity: 1;
      transform: scale(1.1);
    }

    /* ─── Skill chips ────────────────────────────────────── */
    .skill-chip {
      display: inline-flex; align-items: center;
      padding: 5px 11px; border-radius: 100px;
      font-family: 'Space Mono', monospace; font-size: 0.68rem; font-weight: 700;
      letter-spacing: 0.11em; text-transform: uppercase; white-space: nowrap;
      background: rgba(12,11,9,0.06); color: rgba(12,11,9,0.55);
      border: 1px solid rgba(12,11,9,0.07);
      cursor: default;
      transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }
    .skill-chip:hover {
      background: rgba(12,11,9,0.11); color: rgba(12,11,9,0.8);
      border-color: rgba(12,11,9,0.14);
    }
    .skill-chip-cat {
      font-family: 'Space Mono', monospace; font-size: 0.64rem; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: #D4213A; display: block; margin-bottom: 0.45rem;
    }

    /* ─── Work Timeline ─────────────────────────────────────── */
    .work-timeline { position: relative; }

    .wt-entry {
      display: flex;
      gap: 1.5rem;
      cursor: pointer;
    }
    .wt-entry:focus-visible { outline: 2px solid #D4213A; outline-offset: 4px; border-radius: 4px; }

    .wt-spine {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
      padding-top: 1.15rem;
    }
    .wt-node {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: rgba(0,0,0,0.18);
      border: 2px solid rgba(255,255,255,0.9);
      flex-shrink: 0;
      position: relative;
      transition: background 0.3s ease;
    }
    .wt-node--active {
      background: #D4213A;
      box-shadow: 0 0 0 3px rgba(212,33,58,0.15);
    }
    .wt-node-ring {
      position: absolute;
      inset: -5px;
      border-radius: 50%;
      border: 1.5px solid rgba(212,33,58,0.45);
      animation: wt-pulse 2.4s ease-in-out infinite;
    }
    @keyframes wt-pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      65% { transform: scale(1.8); opacity: 0; }
    }
    .wt-line {
      width: 1px;
      flex: 1;
      min-height: 1.5rem;
      margin-top: 5px;
      background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.04));
    }
    .wt-content { flex: 1; padding-bottom: 1.75rem; }
    .wt-entry--last .wt-content { padding-bottom: 0; }

    .wt-date {
      display: block;
      font-family: 'Space Mono', monospace;
      font-size: 0.54rem; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: rgba(12,11,9,0.38);
      margin-bottom: 0.6rem;
    }
    .wt-date--active { color: #D4213A; }

    .wt-card {
      background: rgba(255,255,255,0.38);
      border: 1.5px solid rgba(255,255,255,0.8);
      border-radius: 16px;
      padding: 1.25rem 1.4rem;
      display: flex;
      gap: 1.25rem;
      align-items: flex-start;
      transition: background 0.25s ease,
                  box-shadow 0.25s ease,
                  transform .28s cubic-bezier(.22,1,.36,1);
    }
    .wt-entry:hover .wt-card {
      background: rgba(255,255,255,0.62);
      box-shadow: 0 6px 28px rgba(0,0,0,0.08);
      transform: translateY(-2px);
    }
    .wt-entry:hover .wt-node { background: rgba(0,0,0,0.35); }
    .wt-entry:hover .wt-node--active { background: #D4213A; }

    .wt-card-body { flex: 1; min-width: 0; }
    .wt-role {
      font-family: 'Space Mono', monospace;
      font-size: 1.05rem; font-weight: 700;
      color: #0c0b09; letter-spacing: -0.02em; line-height: 1.25;
      margin: 0 0 0.3rem;
    }
    .wt-company {
      font-family: 'Space Mono', monospace;
      font-size: 0.84rem; color: rgba(12,11,9,0.52);
      letter-spacing: 0.02em; line-height: 1.55; margin: 0 0 0.9rem;
    }
    .wt-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }

    .wt-thumb {
      width: 112px; height: 84px;
      border-radius: 9px; overflow: hidden;
      flex-shrink: 0; display: none;
      align-self: flex-end;
    }
    @media (min-width: 640px) { .wt-thumb { display: block; } }
    .wt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

    .wt-arrow {
      width: 26px; height: 26px;
      border-radius: 50%;
      background: rgba(0,0,0,0.05);
      border: 1px solid rgba(0,0,0,0.07);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; align-self: flex-end;
      color: rgba(12,11,9,0.3);
      transition: background 0.2s ease, color 0.2s ease;
    }
    .wt-entry:hover .wt-arrow {
      background: rgba(0,0,0,0.09);
      color: rgba(12,11,9,0.65);
    }

    /* ─── Glass pill button ───────────────────────────────── */
    .cta-btn {
      display: inline-flex; align-items: center; gap: 0.625rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.78rem; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      text-decoration: none;
      color: #0c0b09;
      background: rgba(255,255,255,0.35);
      border: 1.5px solid rgba(255,255,255,0.85);
      border-radius: 100px;
      padding: 0.75rem 1.5rem;
      backdrop-filter: blur(18px) saturate(200%);
      -webkit-backdrop-filter: blur(18px) saturate(200%);
      box-shadow:
        0 6px 20px rgba(0,0,0,0.08),
        inset 0 1.5px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(255,255,255,0.5),
        inset 2px 0 0 rgba(255,255,255,0.4),
        inset -2px 0 0 rgba(255,255,255,0.2);
      transition: background .28s ease, box-shadow .28s ease;
    }
    .cta-btn:hover {
      background: rgba(255,255,255,0.55);
      box-shadow:
        0 8px 28px rgba(0,0,0,0.1),
        inset 0 1.5px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(255,255,255,0.55),
        inset 2px 0 0 rgba(255,255,255,0.45),
        inset -2px 0 0 rgba(255,255,255,0.25);
    }

    /* ─── Contact form ───────────────────────────────────── */
    .cf-input {
      width: 100%;
      background: rgba(255,255,255,0.55);
      border: 1.5px solid rgba(0,0,0,0.1);
      border-radius: 10px;
      padding: 0.85rem 1rem;
      font-family: 'Space Mono', monospace;
      font-size: 1rem;
      color: #0c0b09;
      outline: none;
      transition: border-color 0.2s ease, background 0.2s ease;
      box-sizing: border-box;
    }
    .cf-input::placeholder { color: rgba(12,11,9,0.28); }
    .cf-input:focus {
      border-color: #D4213A;
      background: rgba(255,255,255,0.85);
    }
    textarea.cf-input { resize: vertical; min-height: 130px; }
    .cf-submit {
      font-family: 'Space Mono', monospace;
      font-size: 0.82rem; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: #fff; background: #0c0b09;
      border: none; border-radius: 100px;
      padding: 0.85rem 2rem;
      cursor: pointer; align-self: flex-start;
      transition: background 0.22s ease, transform 0.18s cubic-bezier(.22,1,.36,1);
    }
    .cf-submit:hover  { background: #D4213A; transform: translateY(-2px); }
    .cf-submit:active { transform: translateY(0); }
    #cf-success {
      font-family: 'Space Mono', monospace;
      font-size: 0.86rem; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: #0c0b09; opacity: 0;
      transition: opacity 0.4s ease;
    }
    #cf-success.visible { opacity: 1; }

    /* ─── Contact email ───────────────────────────────────── */
    .c-email {
      font-family: 'Space Mono', monospace;
      font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
      color: #0c0b09; text-decoration: none;
      font-size: clamp(1.75rem, 5vw, 4rem);
      position: relative; display: inline-block;
    }
    .c-email::after {
      content: '';
      position: absolute; left: 0; bottom: -2px;
      width: 100%; height: 2px;
      background: #0c0b09;
      transform: scaleX(0); transform-origin: left;
      transition: transform .45s cubic-bezier(.22,1,.36,1);
    }
    .c-email:hover::after { transform: scaleX(1); }

    /* ─── Social links ────────────────────────────────────── */
    .soc-link {
      font-family: 'Space Mono', monospace;
      font-size: 0.72rem; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: #D4213A; text-decoration: none;
      transition: color .2s ease;
    }
    .soc-link:hover { color: #0c0b09; }

    /* ─── Contact chips ───────────────────────────────────── */
    .contact-chips { display: flex; flex-direction: column; gap: 0.5rem; }
    .contact-chip {
      display: flex; align-items: center; gap: 0.9rem;
      padding: 0.65rem 0.9rem;
      background: rgba(255,255,255,0.4);
      border: 1.5px solid rgba(255,255,255,0.75);
      border-radius: 12px;
      text-decoration: none;
      transition: background 0.22s ease,
                  transform 0.22s cubic-bezier(.22,1,.36,1),
                  box-shadow 0.22s ease;
    }
    .contact-chip:hover {
      background: rgba(255,255,255,0.68);
      transform: translateX(4px);
      box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    }
    .contact-chip:hover .cc-icon { background: #D4213A; color: #fff; }
    .cc-icon {
      width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
      background: rgba(0,0,0,0.06);
      display: flex; align-items: center; justify-content: center;
      color: #D4213A;
      transition: background 0.22s ease, color 0.22s ease;
    }
    .cc-label {
      display: block;
      font-family: 'Space Mono', monospace; font-size: 0.56rem;
      font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
      color: rgba(12,11,9,0.36); margin-bottom: 0.15rem;
    }
    .cc-value {
      display: block;
      font-family: 'Space Mono', monospace; font-size: 0.92rem;
      font-weight: 700; color: #0c0b09; letter-spacing: -0.01em;
    }


    /* ─── Mobile optimisations ───────────────────────────────── */
    @media (max-width: 640px) {
      /* Hide desktop cursor on touch screens */
      #c-dot, #c-ring { display: none !important; }
      #grain-layer { display: none; }
      .glass,
      #navbar,
      #mobile-menu,
      #modal-panel,
      #meow-modal {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
      section.glass { contain-intrinsic-size: 620px; }



      /* Typing cursor bar height matches mobile logo */
      #hero-cursor-bar { height: var(--hero-h); }

      /* Project cards: shorter on mobile */
      .proj-card[style*="height:480px"] { height: 300px !important; }
      .proj-card[style*="height:360px"] { height: 260px !important; }

      /* Proj title smaller on mobile */
      .proj-title { font-size: 1.1rem !important; }

      /* Work section: less padding */
      #work { padding: 2rem 1.5rem !important; }
      #work .space-y-5 { gap: 0.75rem; }

      /* About section */
      #about { padding: 2rem 1.5rem !important; }
      /* Creative skills: 2-col on mobile */
      .creative-grid { grid-template-columns: repeat(2, 1fr) !important; }

      /* Contact: scale email down to prevent overflow */
      .c-email { font-size: clamp(1.4rem, 8vw, 2.5rem) !important; }

      /* Contact section: less padding */
      #contact { padding: 2rem 1.5rem !important; }

      /* Glass sections: tighter horizontal margin on small screens */
      .glass.mx-6 { margin-left: 0.75rem; margin-right: 0.75rem; }

      /* Marquee: hide on mobile to save space */
      #marquee-wrap { display: none; }

      /* Hover overlay tooltip: hide on touch (no hover) */
      .proj-overlay { display: none; }

      /* About text size */
      #about p { font-size: 0.95rem !important; }

      /* Footer bar */
      #footer-bar { padding-left: 1rem !important; padding-right: 1rem !important; }
    }

    /* Pointer-coarse = touch device, regardless of screen size */
    @media (hover: none) and (pointer: coarse) {
      #c-dot, #c-ring { display: none !important; }
      #grain-layer { display: none; }
      .glass,
      #navbar,
      #mobile-menu,
      #modal-panel,
      #meow-modal {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
      .proj-overlay { display: none; }
      .proj-card:hover .img-cycler { transform: none; }
      .proj-card:hover > img { transform: none; }
    }

    /* ─── Home section previews (rotating reels) ───────────── */
    .home-preview { overflow: hidden; }
    .hp-grid {
      display: grid;
      grid-template-columns: var(--hp-tpl, minmax(0, 0.92fr) minmax(0, 1.08fr));
      gap: 3.5rem;
      align-items: center;
    }
    .hp-grid.hp--flip .hp-media { order: 2; }
    .hp-grid.hp--flip .hp-text  { order: 1; }

    .hp-media { width: 100%; max-width: var(--hp-max, none); }
    .hp-frame {
      position: relative;
      width: 100%;
      aspect-ratio: var(--hp-ratio, 4 / 3);
      border-radius: 20px;
      overflow: hidden;
      background: rgba(12,11,9,0.07);
      box-shadow: 0 22px 48px rgba(12,11,9,0.16),
                  0 5px 12px rgba(12,11,9,0.08),
                  inset 0 0 0 1px rgba(255,255,255,0.5);
    }
    .reel-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      opacity: 0;
      transform: scale(1.015);
      transition: opacity .9s cubic-bezier(.22,1,.36,1),
                  transform 1.4s cubic-bezier(.22,1,.36,1);
    }
    .reel-img.active { opacity: 1; transform: scale(1); }

    .hp-reel-bar {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      margin-top: 0.9rem;
      padding-bottom: 0.7rem;
      border-bottom: 1px solid rgba(12,11,9,0.1);
    }
    .hp-caption {
      font-family: 'Space Mono', monospace;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #0c0b09;
    }
    .hp-count {
      font-family: 'Space Mono', monospace;
      font-size: 0.56rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      color: rgba(12,11,9,0.32);
      flex-shrink: 0;
    }

    /* Section contents — doubles as the reel's index and its controls */
    .hp-index { margin-top: 1.9rem; border-top: 1px solid rgba(12,11,9,0.12); }
    .hp-index-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      padding: 0.7rem 0 0.45rem;
    }
    .hp-rows {
      list-style: none;
      column-count: var(--hp-cols, 1);
      column-gap: 1.75rem;
    }
    .hp-rows li { break-inside: avoid; }
    .hp-row {
      display: flex;
      align-items: baseline;
      gap: 0.65rem;
      width: 100%;
      padding: 0.4rem 0.55rem;
      border: 0;
      border-radius: 8px;
      background: transparent;
      text-align: left;
      font-family: 'Space Mono', monospace;
      transition: background .25s ease, box-shadow .25s ease;
    }
    .hp-row-n {
      font-size: 0.5rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      color: rgba(12,11,9,0.26);
      flex-shrink: 0;
      transition: color .25s ease;
    }
    .hp-row-label {
      flex: 1;
      min-width: 0;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      line-height: 1.4;
      color: rgba(12,11,9,0.6);
      transition: color .25s ease;
    }
    .hp-row-meta {
      font-size: 0.5rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(12,11,9,0.26);
      flex-shrink: 0;
      transition: color .25s ease;
    }
    .hp-row:hover { background: rgba(12,11,9,0.05); }
    .hp-row:hover .hp-row-label { color: #0c0b09; }
    .hp-row.active {
      background: rgba(212,33,58,0.07);
      box-shadow: inset 2px 0 0 #D4213A;
    }
    .hp-row.active .hp-row-label { color: #0c0b09; }
    .hp-row.active .hp-row-n,
    .hp-row.active .hp-row-meta { color: #D4213A; }
    .hp-row:focus-visible { outline: 2px solid #D4213A; outline-offset: 2px; }

    .hp-eyebrow { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
    .hp-title {
      font-family: 'Space Mono', monospace;
      font-weight: 700;
      font-size: clamp(1.9rem, 3.6vw, 2.9rem);
      letter-spacing: -0.04em;
      line-height: 1;
      color: #0c0b09;
    }
    .hp-summary {
      margin-top: 1.2rem;
      max-width: 52ch;
      font-family: 'Space Mono', monospace;
      font-size: clamp(0.86rem, 1.05vw, 0.95rem);
      line-height: 1.78;
      color: rgba(12,11,9,0.66);
    }
    .hp-summary em { font-style: italic; color: rgba(12,11,9,0.78); }

    .hp-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      margin-top: 1.7rem;
      padding: 0.7rem 1.3rem;
      border-radius: 100px;
      background: rgba(12,11,9,0.06);
      border: 1px solid rgba(12,11,9,0.1);
      font-family: 'Space Mono', monospace;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #0c0b09;
      text-decoration: none;
      transition: background .25s ease, color .25s ease,
                  border-color .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
    }
    .hp-cta svg { color: #D4213A; transition: transform .3s cubic-bezier(.22,1,.36,1), color .25s ease; }
    .hp-cta:hover,
    .hp-cta:focus-visible {
      background: #D4213A;
      border-color: #D4213A;
      color: #f8f7f4;
      transform: translateY(-2px);
    }
    .hp-cta:hover svg, .hp-cta:focus-visible svg { color: #f8f7f4; transform: translate(2px,-2px); }
    .hp-cta:active { transform: translateY(0); }
    .hp-cta:focus-visible { outline: 2px solid #D4213A; outline-offset: 3px; }

    @media (max-width: 900px) {
      .hp-grid { grid-template-columns: 1fr; gap: 2rem; }
      .hp-grid.hp--flip .hp-media { order: 1; }
      .hp-grid.hp--flip .hp-text  { order: 2; }
      .hp-media { --hp-ratio: 4 / 3 !important; max-width: none; }
      .hp-summary { max-width: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
      #grain-layer { display: none; }
    }

    /* ─── Welcome overlay ────────────────────────────────── */

    #hero-vid-credit { opacity: 0.55; color: #c2bdb7; transition: color 0.3s ease, opacity 0.3s ease; }
    #hero-vid-credit:hover { opacity: 0.9 !important; color: #D4213A !important; }
    #hero-vid-credit a { color: inherit; text-decoration: underline; }

    /* ─── Hero typing intro cursor ──────────────────────────── */
    #hero-cursor-bar {
      position: fixed;
      width: 3px;
      height: var(--hero-h);
      background: #D4213A;
      opacity: 0;
      z-index: 4;
      pointer-events: none;
      transition: opacity 0.25s ease;
      animation: cursor-blink 0.55s step-end infinite;
    }
    @keyframes cursor-blink { 50% { opacity: 0; } }

    /* ── Mr Meow ───────────────────────────────────────────────── */
    #mr-meow-wrap {
      position: fixed;
      bottom: 0;
      right: 11rem;
      width: 160px;
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: center;
      transform: translateY(110%);
      pointer-events: none;
    }
    #mr-meow-wrap.meow-show {
      animation: meow-popup 4.4s cubic-bezier(.22,1,.36,1) forwards;
      pointer-events: all;
      cursor: pointer;
    }

    @media (max-width: 768px) {
      #mr-meow-wrap {
        right: 0;
        left: auto;
      }
      #mr-meow-img { transform: scaleX(-1); }
    }

    /* ── Mr Meow Modal ─────────────────────────────────────────── */
    #meow-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1100;
      background: rgba(0,0,0,0.4);
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    #meow-modal-overlay.open { display: flex; }
    #meow-modal {
      background: rgba(255,255,255,0.72);
      backdrop-filter: blur(24px) saturate(140%) brightness(1.18);
      -webkit-backdrop-filter: blur(24px) saturate(140%) brightness(1.18);
      border: 1.5px solid rgba(255,255,255,0.9);
      border-radius: 28px;
      width: 460px;
      max-width: 92vw;
      overflow: hidden;
      box-shadow:
        0 60px 140px rgba(0,0,0,0.16),
        0 16px 40px rgba(0,0,0,0.10),
        0 4px 10px rgba(0,0,0,0.07),
        inset 0 2px 0 rgba(255,255,255,1),
        inset 0 -1.5px 0 rgba(255,255,255,0.65),
        inset 2.5px 0 0 rgba(255,255,255,0.5),
        inset -2.5px 0 0 rgba(255,255,255,0.3),
        inset 0 0 60px rgba(255,255,255,0.12);
      animation: meow-modal-in 0.35s cubic-bezier(.22,1,.36,1);
    }
    @keyframes meow-modal-in {
      from { transform: scale(0.88) translateY(16px); opacity: 0; }
      to   { transform: scale(1) translateY(0); opacity: 1; }
    }
    @keyframes meow-modal-out {
      from { transform: scale(1) translateY(0); opacity: 1; }
      to   { transform: scale(0.88) translateY(12px); opacity: 0; }
    }
    @keyframes meow-overlay-out {
      from { opacity: 1; }
      to   { opacity: 0; }
    }
    #meow-modal-overlay.closing {
      animation: meow-overlay-out 0.32s cubic-bezier(.22,1,.36,1) forwards;
      pointer-events: none;
    }
    #meow-modal-overlay.closing #meow-modal {
      animation: meow-modal-out 0.32s cubic-bezier(.22,1,.36,1) forwards;
    }
    #meow-modal-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.75rem 1.1rem;
    }
    #meow-modal-close {
      font-family: 'Space Mono',monospace; font-size: 0.78rem; font-weight: 700;
      background: none; border: none; cursor: pointer;
      color: #8a8880; padding: 0.2rem 0.4rem; line-height: 1;
      transition: color 0.15s ease;
    }
    #meow-modal-close:hover { color: #D4213A; }
    #meow-modal-scene {
      position: relative; height: 210px; overflow: hidden;
      background: transparent; cursor: pointer;
    }
    #meow-modal.fish-cursor,
    #meow-modal.fish-cursor * {
      cursor: url('../Brand_Assets/Mr%20Meow/Fish-cursor.png') 20 20, crosshair !important;
    }
    /* Wrapper moves cat horizontally; img handles vertical bob — keeps transforms separate */
    #meow-cat-wrap {
      position: absolute; bottom: 27px; left: 0;
      transform: translateX(-210px);
    }
    #meow-modal-cat {
      width: 150px; image-rendering: pixelated; display: block;
    }
    #meow-modal-cat.cat-bobbing {
      animation: cat-run-bob 0.22s ease-in-out infinite alternate;
    }
    @keyframes cat-run-bob {
      from { transform: translateY(0px); }
      to   { transform: translateY(-4px); }
    }
    .meow-fish-thrown {
      position: absolute; width: 54px; image-rendering: pixelated;
      transform-origin: center; pointer-events: none;
    }
    #meow-modal-footer {
      padding: 0.9rem 1.25rem; min-height: 50px;
      display: flex; align-items: center;
    }
    #meow-modal-dialogue {
      font-family: 'Space Mono',monospace; font-size: 0.75rem; font-weight: 700;
      letter-spacing: 0.1em; color: #0c0b09;
      opacity: 0; transition: opacity 0.5s ease;
    }
    #meow-modal-dialogue.visible { opacity: 1; }
    @keyframes meow-popup {
      0%   { transform: translateY(110%); }
      18%  { transform: translateY(0); }
      72%  { transform: translateY(0); }
      100% { transform: translateY(110%); }
    }
    #mr-meow-bubble {
      background: #484848;
      border: none;
      border-radius: 0;
      padding: 4px 8px;
      font-family: 'Space Mono', monospace;
      font-size: 0.65rem;
      font-weight: 700;
      color: #f8f7f4;
      white-space: nowrap;
      margin-bottom: 7px;
      position: relative;
      opacity: 0;
      transform: scale(0.7);
      image-rendering: pixelated;
    }
    /* Pixel-art tail: two stepped blocks below the bubble */
    #mr-meow-bubble::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      margin-left: -4px;
      width: 8px;
      height: 4px;
      background: #484848;
    }
    #mr-meow-bubble::before {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 50%;
      margin-left: -2px;
      width: 4px;
      height: 4px;
      background: #484848;
      z-index: 1;
    }
    #mr-meow-wrap.meow-show #mr-meow-bubble {
      animation: bubble-pop 4.4s ease forwards;
    }
    @keyframes bubble-pop {
      0%, 22%  { opacity: 0; transform: scale(0.7); }
      32%      { opacity: 1; transform: scale(1); }
      65%      { opacity: 1; transform: scale(1); }
      78%, 100%{ opacity: 0; transform: scale(0.7); }
    }
    /* Clip to show head + face */
    #mr-meow-clip {
      width: 160px;
      height: 38px;
      overflow: hidden;
    }
    #mr-meow-img {
      width: 160px;
      margin-top: -42px; /* skip transparent top of PNG — cat ears start here */
      image-rendering: pixelated;
      display: block;
    }


    /* ═══ Multi-page chrome ═══════════════════════════════════
       Added when the single-page site was split into one page per
       navigation destination. Everything below is shared by
       index / about / videography / photography / artwork. */

    .home-nav-card:focus-visible {
      outline: 2px solid #D4213A;
      outline-offset: 3px;
    }

    /* ─── Sub-page header (stands in for the hero) ─────────── */
    .page-head {
      margin: 0 1.5rem;
      padding: 7.5rem 0 2rem;
    }
    .page-head-eyebrow {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.25rem;
    }
    .page-head-rule { width: 2rem; height: 1px; background: rgba(0,0,0,0.18); }
    .page-title {
      font-family: 'Space Mono', monospace;
      font-weight: 700;
      font-size: clamp(2.5rem, 7.5vw, 5rem);
      letter-spacing: -0.045em;
      line-height: 0.94;
      color: #0c0b09;
    }
    .page-lede {
      max-width: 52ch;
      margin-top: 1.15rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.78rem;
      line-height: 1.85;
      color: rgba(12,11,9,0.58);
    }
    @media (max-width: 768px) {
      .page-head { margin: 0 0.75rem; padding: 6rem 0 1.5rem; }
    }

    /* ═══ Home hero ═══════════════════════════════════════════ */
    #home {
      position: relative;
      min-height: 100vh;
      padding: 1.5rem var(--hero-pad) 2.25rem;
      display: flex;
      flex-direction: column;
    }
    .top-mark {
      /* In the flow, so it scrolls away with the hero */
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      margin-left: var(--hero-ink);
      height: 44px;              /* matches the menu button opposite it */
      position: relative;
      font-size: clamp(0.95rem, 1.35vw, 1.2rem);
      letter-spacing: 0.06em;
      line-height: 1;
    }
    .top-mark::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0.15rem;
      width: 3.25rem;
      height: 2px;
      background: #D4213A;
    }
    #hero-ghost-wrapper {
      position: relative;
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      margin-top: 0.75rem;
    }
    /* Dot-matrix texture flanking the wordmark */
    .hero-dots {
      position: absolute;
      bottom: calc(50% + var(--hero-h) / 2 + 0.75rem);
      height: 3.25rem;
      background-image: radial-gradient(circle, rgba(12,11,9,0.24) 1px, transparent 1px);
      background-size: 13px 13px;
      pointer-events: none;
    }
    .hero-dots--l { left: 0; width: 5rem; }
    .hero-dots--r { right: 0; width: 16rem; }

    /* Film credit, set vertically in the right margin */
    .film-credit {
      position: absolute;
      top: 22%;
      right: calc(var(--hero-pad) / 2);
      transform: translateX(50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.85rem;
      text-decoration: none;
      color: rgba(12,11,9,0.55);
      transition: color .25s ease;
    }
    .film-credit-text {
      writing-mode: vertical-rl;
      display: flex;
      align-items: center;
      gap: 0.55rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }
    /* Who shot the footage — the attribution, not just a label */
    .film-credit-name {
      position: relative;
      color: rgba(12,11,9,0.78);
      letter-spacing: 0.16em;
    }
    .film-credit-name:empty { display: none; }
    .film-credit:hover .film-credit-name { color: #D4213A; }
    .film-credit-rule { width: 1px; height: 4.5rem; background: currentColor; opacity: 0.45; }
    .film-credit:hover, .film-credit:focus-visible { color: #D4213A; }
    .film-credit:focus-visible { outline: 2px solid #D4213A; outline-offset: 6px; }

    /* Footer block: rule, statement + copy, scroll arrow */
    .hero-foot {
      display: flex;
      flex-direction: column;
      margin: 0 var(--hero-ink);
      padding-top: 1.5rem;
    }
    .hero-rule { height: 1px; background: rgba(12,11,9,0.14); }
    .hero-foot-row {
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      gap: 3rem;
      align-items: start;
      padding: 1.6rem 0 2rem;
    }

    /* Bottom row: centred scroll arrow */
    .hero-bottom {
      display: flex;
      justify-content: center;
      margin-top: 1.75rem;
    }

    .hero-statement {
      font-family: 'Space Mono', monospace;
      font-size: clamp(0.95rem, 1.35vw, 1.2rem);
      font-weight: 700;
      letter-spacing: 0.06em;
      line-height: 1.5;
      text-transform: uppercase;
      color: #D4213A;
    }
    .hero-copy {
      position: relative;
      padding-left: 3rem;
      max-width: 62ch;
      font-family: 'Space Mono', monospace;
      font-size: clamp(0.78rem, 0.95vw, 0.88rem);
      line-height: 1.85;
      color: rgba(12,11,9,0.62);
    }
    .hero-copy::before {
      content: '';
      position: absolute;
      left: 0; top: 0.25rem; bottom: 0.25rem;
      width: 1px;
      background: rgba(12,11,9,0.14);
    }
    .hero-explore {
      justify-self: center;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid #D4213A;
      color: #D4213A;
      text-decoration: none;
      transition: background .25s ease, color .25s ease,
                  transform .3s cubic-bezier(.22,1,.36,1);
    }
    .hero-explore:hover,
    .hero-explore:focus-visible {
      background: #D4213A;
      color: #f8f7f4;
      transform: translateY(3px);
    }
    .hero-explore:active { transform: translateY(0); }
    .hero-explore:focus-visible { outline: 2px solid #D4213A; outline-offset: 4px; }

    @media (max-width: 900px) {
      .hero-foot-row { grid-template-columns: 1fr; gap: 1.25rem; }
      .hero-copy { padding-left: 0; }
      .hero-copy::before { display: none; }
    }
    @media (max-width: 767px) {
      :root { --hero-pad: 6vw; --hero-w: 88vw; --hero-h: 26.83vw; --hero-ink: 3.03vw; }
      #home { padding: 1.35rem var(--hero-pad) 2rem; min-height: auto; }
      .hero-dots { display: none; }
      .film-credit {
        position: static;
        transform: none;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.6rem;
        margin-top: 1.5rem;
        order: 2;
      }
      .film-credit-text { writing-mode: horizontal-tb; gap: 0.75rem; }
      .film-credit-rule { display: none; }
      #navbar { top: 1.35rem; }
      #navbar { right: 1rem; }
      .top-mark { font-size: 0.95rem; }
    }

    /* ─── Section kit ──────────────────────────────────────── */
    .sec-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1.5rem;
      margin-bottom: 1.35rem;
    }
    .sec-title {
      font-family: 'Space Mono', monospace;
      font-size: clamp(1.5rem, 2.6vw, 2.1rem);
      font-weight: 700;
      letter-spacing: -0.035em;
      line-height: 1;
      color: #0c0b09;
    }
    .sec-link {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      flex-shrink: 0;
      font-family: 'Space Mono', monospace;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(12,11,9,0.5);
      text-decoration: none;
      transition: color .25s ease;
    }
    .sec-link svg { color: #D4213A; transition: transform .3s cubic-bezier(.22,1,.36,1); }
    .sec-link:hover { color: #0c0b09; }
    .sec-link:hover svg { transform: translate(2px,-2px); }
    .sec-link:focus-visible { outline: 2px solid #D4213A; outline-offset: 3px; }
    .sec-cta { display: flex; justify-content: center; margin-top: 1.35rem; }

    .btn-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
      padding: 0.8rem 1.5rem;
      border-radius: 100px;
      background: rgba(12,11,9,0.05);
      border: 1px solid rgba(12,11,9,0.12);
      font-family: 'Space Mono', monospace;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #0c0b09;
      text-decoration: none;
      transition: background .25s ease, border-color .25s ease,
                  color .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
    }
    .btn-pill svg { color: #D4213A; transition: transform .3s cubic-bezier(.22,1,.36,1), color .25s ease; }
    .btn-pill:hover, .btn-pill:focus-visible {
      background: #D4213A; border-color: #D4213A; color: #f8f7f4; transform: translateY(-2px);
    }
    .btn-pill:hover svg, .btn-pill:focus-visible svg { color: #f8f7f4; transform: translateX(3px); }
    .btn-pill:active { transform: translateY(0); }
    .btn-pill--solid { background: #0c0b09; border-color: #0c0b09; color: #f8f7f4; }
    .btn-pill--solid svg { color: #ff5b6e; }
    .btn-pill:focus-visible { outline: 2px solid #D4213A; outline-offset: 3px; }

    /* ─── 2 · Project spotlight ────────────────────────────── */
    .cs-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.25rem; align-items: center; }
    .cs-stage {
      display: block;
      position: relative;
      aspect-ratio: 16 / 9;
      border-radius: 16px;
      overflow: hidden;
      background: #12110f;
      box-shadow: 0 22px 48px rgba(12,11,9,0.16), inset 0 0 0 1px rgba(255,255,255,0.4);
    }
    .cs-stage img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      opacity: 0.92;
      transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .3s ease;
    }
    .cs-stage:hover img { transform: scale(1.04); opacity: 1; }
    .cs-open {
      position: absolute; bottom: 1rem; right: 1rem;
      width: 42px; height: 42px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(248,247,244,0.92);
      color: #0c0b09;
      transition: background .25s ease, color .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
    }
    .cs-stage:hover .cs-open { background: #D4213A; color: #f8f7f4; transform: translate(2px,-2px); }
    .cs-stage.is-portrait img { object-fit: contain; background: #12110f; }
    .cs-thumb.is-portrait img { object-fit: contain; }
    .cs-stage:focus-visible { outline: 2px solid #D4213A; outline-offset: 3px; }

    .cs-strip-wrap { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; }
    .cs-strip { display: flex; gap: 0.5rem; overflow: hidden; flex: 1; }
    .cs-thumb {
      position: relative;
      flex: 1 1 0;
      min-width: 0;
      aspect-ratio: 16 / 10;
      border-radius: 8px;
      overflow: hidden;
      border: 0; padding: 0;
      background: #12110f;
      opacity: 0.5;
      transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
    }
    .cs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .cs-thumb:hover { opacity: 0.85; transform: translateY(-2px); }
    .cs-thumb.active { opacity: 1; box-shadow: 0 0 0 2px #D4213A; }
    .cs-thumb:focus-visible { outline: 2px solid #D4213A; outline-offset: 2px; }
    .cs-arrow {
      flex-shrink: 0;
      width: 30px; height: 30px;
      border-radius: 50%;
      border: 1px solid rgba(12,11,9,0.16);
      background: transparent;
      color: #0c0b09;
      display: flex; align-items: center; justify-content: center;
      transition: background .25s ease, border-color .25s ease, color .25s ease;
    }
    .cs-arrow:hover { background: #D4213A; border-color: #D4213A; color: #f8f7f4; }
    .cs-arrow:focus-visible { outline: 2px solid #D4213A; outline-offset: 2px; }

    .cs-eyebrow { font-size: 0.58rem; letter-spacing: 0.22em; }
    .cs-title {
      margin-top: 0.7rem;
      font-family: 'Space Mono', monospace;
      font-size: clamp(1.7rem, 3vw, 2.4rem);
      font-weight: 700; letter-spacing: -0.04em; line-height: 1;
      color: #0c0b09;
    }
    .cs-desc {
      margin-top: 0.8rem; max-width: 46ch;
      font-family: 'Space Mono', monospace;
      font-size: 0.78rem; line-height: 1.8;
      color: rgba(12,11,9,0.6);
    }
    .cs-meta { margin: 1.2rem 0 1.4rem; border-top: 1px solid rgba(12,11,9,0.1); }
    .cs-meta-row {
      display: flex; align-items: center; gap: 0.8rem;
      padding: 0.5rem 0;
      border-bottom: 1px solid rgba(12,11,9,0.07);
    }
    .cs-meta-icon { color: #D4213A; display: flex; flex-shrink: 0; }
    .cs-meta dt {
      flex-shrink: 0; width: 5.5rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.5rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(12,11,9,0.34);
    }
    .cs-meta dd {
      font-family: 'Space Mono', monospace;
      font-size: 0.68rem; line-height: 1.5;
      color: rgba(12,11,9,0.72);
    }

    /* ─── 3 · About / what I do ────────────────────────────── */
    .ab-grid { display: grid; grid-template-columns: 1.15fr 1fr 0.6fr; gap: 2.25rem; align-items: stretch; }
    .ab-col > .lbl { display: block; margin-bottom: 0.9rem; font-size: 0.58rem; letter-spacing: 0.22em; }
    .ab-headline {
      font-family: 'Space Mono', monospace;
      font-size: clamp(1.45rem, 2.5vw, 2rem);
      font-weight: 700; letter-spacing: -0.04em; line-height: 1.18;
      color: #0c0b09;
    }
    .ab-copy {
      margin-top: 0.9rem; max-width: 44ch;
      font-family: 'Space Mono', monospace;
      font-size: 0.78rem; line-height: 1.85;
      color: rgba(12,11,9,0.6);
    }
    .ab-based {
      margin-top: 1rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(12,11,9,0.38);
    }
    .ab-more {
      display: inline-flex; align-items: center; gap: 0.5rem;
      margin-top: 1.1rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
      color: #0c0b09; text-decoration: none;
      border-bottom: 1px solid rgba(12,11,9,0.2);
      padding-bottom: 0.3rem;
      transition: color .25s ease, border-color .25s ease;
    }
    .ab-more svg { color: #D4213A; transition: transform .3s cubic-bezier(.22,1,.36,1); }
    .ab-more:hover { color: #D4213A; border-color: #D4213A; }
    .ab-more:hover svg { transform: translate(2px,-2px); }
    .ab-more:focus-visible { outline: 2px solid #D4213A; outline-offset: 3px; }
    .ab-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
    .ab-portrait {
      position: relative;
      border-radius: 16px; overflow: hidden; min-height: 300px;
      box-shadow: 0 18px 40px rgba(12,11,9,0.14), inset 0 0 0 1px rgba(255,255,255,0.5);
    }
    .ab-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

    /* ─── 4 · Visual categories ────────────────────────────── */
    .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
    .cat-card {
      position: relative;
      display: block;
      aspect-ratio: 16 / 9;
      border-radius: 16px;
      overflow: hidden;
      text-decoration: none;
      background: #12110f;
      box-shadow: 0 14px 32px rgba(12,11,9,0.12);
      transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
    }
    .cat-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(212,33,58,0.14); }
    .cat-card:focus-visible { outline: 2px solid #D4213A; outline-offset: 3px; }
    .cat-card img {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover;
      transition: transform .7s cubic-bezier(.22,1,.36,1);
    }
    .cat-card:hover img { transform: scale(1.06); }
    .cat-shade {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(12,11,9,0.86) 0%, rgba(12,11,9,0.34) 45%, rgba(12,11,9,0.22) 100%);
    }
    .cat-kind {
      position: absolute; top: 1rem; left: 1.15rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(255,255,255,0.92);
      text-shadow: 0 1px 6px rgba(12,11,9,0.7);
    }
    .cat-go {
      position: absolute; left: 1.15rem; right: 1.15rem; bottom: 1rem;
      display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
      color: #f8f7f4;
    }
    .cat-go svg { color: #ff5b6e; transition: transform .3s cubic-bezier(.22,1,.36,1); }
    .cat-card:hover .cat-go svg { transform: translate(2px,-2px); }

    /* ─── 5 · Contact CTA ──────────────────────────────────── */
    .cta-bar { display: flex; align-items: center; gap: 1.75rem; }
    .cta-icon {
      flex-shrink: 0;
      width: 56px; height: 56px;
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(12,11,9,0.05);
      border: 1px solid rgba(12,11,9,0.1);
      color: #D4213A;
    }
    .cta-copy { flex: 1; min-width: 0; }
    .cta-copy .lbl { font-size: 0.55rem; letter-spacing: 0.2em; }
    .cta-title {
      margin-top: 0.5rem;
      font-family: 'Space Mono', monospace;
      font-size: clamp(1.25rem, 2.2vw, 1.75rem);
      font-weight: 700; letter-spacing: -0.035em; line-height: 1.1;
      color: #0c0b09;
    }
    .cta-sub {
      margin-top: 0.4rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.72rem; line-height: 1.7;
      color: rgba(12,11,9,0.55);
    }

    /* ─── 6 · Footer ───────────────────────────────────────── */
    .site-footer { border-radius: 28px; }
    .sf-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
    .sf-logo {
      font-family: 'Space Mono', monospace;
      font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase;
      color: #0c0b09;
    }
    .sf-tag {
      margin-top: 0.65rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.7rem; line-height: 1.8;
      color: rgba(12,11,9,0.5);
    }
    .sf-col { display: flex; flex-direction: column; gap: 0.55rem; }
    .sf-col > .lbl { margin-bottom: 0.55rem; font-size: 0.55rem; letter-spacing: 0.2em; }
    .sf-col a, .sf-item {
      font-family: 'Space Mono', monospace;
      font-size: 0.68rem; letter-spacing: 0.02em;
      color: rgba(12,11,9,0.55);
      text-decoration: none;
      transition: color .2s ease;
    }
    .sf-col a:hover, .sf-col a:focus-visible { color: #D4213A; }
    .sf-col a:focus-visible { outline: 2px solid #D4213A; outline-offset: 2px; }
    .sf-social { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
    .sf-social a {
      width: 32px; height: 32px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      border: 1px solid rgba(12,11,9,0.12);
      color: rgba(12,11,9,0.55);
      transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
    }
    .sf-social a:hover { background: #D4213A; border-color: #D4213A; color: #f8f7f4; transform: translateY(-2px); }
    .sf-bottom {
      display: flex; align-items: center; justify-content: flex-start; gap: 1.5rem;
      margin-top: 1.7rem; padding-top: 1.1rem;
      border-top: 1px solid rgba(12,11,9,0.08);
      font-family: 'Space Mono', monospace;
      font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(12,11,9,0.35);
    }

    @media (max-width: 1000px) {
      .fg { grid-template-columns: 1fr 1fr; }
      .fg-card--hero { grid-column: span 2; grid-row: auto; }
      .fg-card--wide { grid-column: span 2; }
      .fg-card--hero .fg-frame, .fg-card--wide .fg-frame { aspect-ratio: 16 / 9; }
      .cs-grid, .ab-grid { grid-template-columns: 1fr; gap: 2rem; }
      .ab-portrait { max-width: 320px; }
      .cat-grid { grid-template-columns: 1fr; }
      .sf-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    }
    @media (max-width: 700px) {
      .sec-head { flex-direction: column; align-items: flex-start; gap: 0.85rem; }
      .cta-bar { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
      .sf-grid { grid-template-columns: 1fr; }
      .sf-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
      .cs-meta dt { width: 4.5rem; }
      .fg { grid-template-columns: 1fr; }
      .fg-card--hero, .fg-card--wide { grid-column: auto; }
    }

    /* ─── Pressed panel — recessed into the page surface ───── */
    .glass.inset {
      /* The ::before below is absolutely positioned; without this it resolves
         against the nearest positioned ancestor and covers the whole page,
         swallowing clicks on everything beneath it. */
      position: relative;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: 0;
      box-shadow: none;
      isolation: isolate;
    }
    .glass.inset::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -2;
      border-radius: inherit;
      background: rgba(12,11,9,0.038);
      box-shadow:
        /* light falls from above, so the top edge casts into the recess */
        inset 0 2px 3px rgba(12,11,9,0.12),
        inset 0 12px 28px rgba(12,11,9,0.055),
        inset 0 -1px 0 rgba(255,255,255,0.8),
        /* the lip of the cut-out catches light on the way out */
        0 1px 0 rgba(255,255,255,0.9);
    }
    .glass.inset.pill-exit::before { box-shadow: none; }

    /* ═══ Projects & case studies ═════════════════════════════
       Shared components: .ph (image placeholder), .pj-* (projects index),
       .study-* (case-study layout), .insight-card, .stat-card. */

    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }

    /* ─── Image placeholder ────────────────────────────────── */
    .ph { display: block; width: 100%; margin: 1.6rem 0; }
    .ph-frame,
    .ph-img {
      display: block;
      width: 100%;
      aspect-ratio: var(--ph-ratio, 16 / 9);
      border-radius: 14px;
    }
    .ph-frame {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 1.5rem;
      text-align: center;
      background:
        repeating-linear-gradient(135deg,
          rgba(12,11,9,0.028) 0 10px, transparent 10px 20px),
        rgba(12,11,9,0.035);
      border: 1px dashed rgba(12,11,9,0.22);
    }
    .ph-img { object-fit: cover; border: 1px solid rgba(12,11,9,0.1); }
    .ph-tag {
      font-family: 'Space Mono', monospace;
      font-size: 0.5rem; font-weight: 700;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: #D4213A;
    }
    .ph-label {
      font-family: 'Space Mono', monospace;
      font-size: 0.85rem; font-weight: 700;
      letter-spacing: -0.01em;
      color: rgba(12,11,9,0.72);
      max-width: 34ch;
    }
    .ph-rec {
      font-family: 'Space Mono', monospace;
      font-size: 0.62rem; line-height: 1.7;
      color: rgba(12,11,9,0.45);
      max-width: 46ch;
    }
    .ph-cap {
      display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem;
      margin-top: 0.6rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(12,11,9,0.42);
    }
    .ph-alt { color: rgba(12,11,9,0.3); text-transform: none; letter-spacing: 0.04em; }
    .ph-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .ph-row .ph { margin: 1.6rem 0 0; }

    /* ─── Projects index ───────────────────────────────────── */
    .pj-filters {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
      margin-bottom: 1.75rem;
    }
    .pj-filters-label { margin-right: 0.5rem; font-size: 0.55rem; letter-spacing: 0.2em; }
    .pj-filter {
      min-height: 44px;
      padding: 0.6rem 1.15rem;
      border-radius: 100px;
      border: 1px solid rgba(12,11,9,0.14);
      background: transparent;
      font-family: 'Space Mono', monospace;
      font-size: 0.6rem; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(12,11,9,0.55);
      transition: background .25s ease, color .25s ease, border-color .25s ease;
    }
    .pj-filter:hover { color: #0c0b09; border-color: rgba(12,11,9,0.3); }
    .pj-filter.is-active { background: #0c0b09; border-color: #0c0b09; color: #f8f7f4; }
    .pj-filter:focus-visible { outline: 2px solid #D4213A; outline-offset: 3px; }
    .pj-count, .pj-empty {
      font-family: 'Space Mono', monospace;
      font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(12,11,9,0.4);
      margin-bottom: 1.25rem;
    }
    .pj-empty { margin-top: 1.5rem; }

    .pj-grid { display: flex; flex-direction: column; gap: 1.25rem; }
    .pj-card {
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 2.25rem;
      align-items: center;
      padding: 1.5rem;
      border-radius: 20px;
      background: rgba(255,255,255,0.4);
      border: 1px solid rgba(255,255,255,0.75);
      box-shadow: 0 10px 26px rgba(12,11,9,0.06);
      transition: transform .3s cubic-bezier(.22,1,.36,1),
                  box-shadow .3s cubic-bezier(.22,1,.36,1),
                  border-color .3s ease;
    }
    .pj-card:nth-child(even) .pj-card-media { order: 2; }
    .pj-card:hover,
    .pj-card:focus-within {
      transform: translateY(-3px);
      border-color: rgba(212,33,58,0.3);
      box-shadow: 0 20px 42px rgba(212,33,58,0.09), 0 6px 14px rgba(12,11,9,0.07);
    }
    .pj-card-media .ph { margin: 0; }
    .pj-num {
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem; font-weight: 700; letter-spacing: 0.2em;
      color: rgba(12,11,9,0.3);
    }
    .pj-title {
      margin-top: 0.5rem;
      font-family: 'Space Mono', monospace;
      font-size: clamp(1.25rem, 2.1vw, 1.7rem);
      font-weight: 700; letter-spacing: -0.035em; line-height: 1.15;
    }
    .pj-link { color: #0c0b09; text-decoration: none; }
    .pj-link::after { content: ''; position: absolute; inset: 0; border-radius: 20px; }
    .pj-link:hover { color: #D4213A; }
    .pj-link:focus-visible { outline: 2px solid #D4213A; outline-offset: 4px; }
    .pj-card { position: relative; }
    .pj-type {
      margin-top: 0.5rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
      color: #D4213A;
    }
    .pj-summary {
      margin-top: 0.85rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.78rem; line-height: 1.8;
      color: rgba(12,11,9,0.62);
    }
    .tag-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1rem; list-style: none; }
    .tag {
      padding: 0.32rem 0.7rem;
      border-radius: 100px;
      background: rgba(12,11,9,0.05);
      border: 1px solid rgba(12,11,9,0.08);
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem; letter-spacing: 0.1em;
      color: rgba(12,11,9,0.55);
    }
    .pj-meta { display: flex; flex-wrap: wrap; gap: 0.85rem 2rem; margin-top: 1.2rem; }
    .pj-meta dt, .study-facts dt, .study-hero-meta dt {
      font-family: 'Space Mono', monospace;
      font-size: 0.5rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(12,11,9,0.32);
      margin-bottom: 0.25rem;
    }
    .pj-meta dd, .study-facts dd, .study-hero-meta dd {
      font-family: 'Space Mono', monospace;
      font-size: 0.66rem; line-height: 1.6;
      color: rgba(12,11,9,0.72);
      max-width: 32ch;
    }
    .pj-go {
      display: inline-flex; align-items: center; gap: 0.45rem;
      margin-top: 1.3rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
      color: #0c0b09;
    }
    .pj-go svg { color: #D4213A; transition: transform .3s cubic-bezier(.22,1,.36,1); }
    .pj-card:hover .pj-go svg { transform: translate(2px,-2px); }

    /* ─── Phone frames for social posts ────────────────────── */
    .phone-row {
      display: flex;
      gap: 0.75rem;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      padding-bottom: 0.35rem;
      margin: 1.5rem 0;
    }
    .phone-row .phone { flex: 0 0 clamp(120px, 19vw, 190px); }
    .phone-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 1rem;
      margin: 1.5rem 0;
    }
    .phone {
      margin: 0;
      border-radius: 20px;
      overflow: hidden;
      background: #12110f;
      border: 3px solid #12110f;
      box-shadow: 0 14px 32px rgba(12,11,9,0.18), 0 3px 8px rgba(12,11,9,0.1);
      transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
    }
    .phone img {
      display: block;
      width: 100%;
      aspect-ratio: 590 / 1280;
      object-fit: cover;
      border-radius: 17px;
    }
    .phone-grid .phone:hover,
    .phone-row .phone:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(12,11,9,0.22); }
    .phone-cap {
      padding: 0.5rem 0.6rem 0.35rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.52rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      text-align: center;
    }
    .pj-card-media .phone-row { margin: 0; }

    /* Social posts inside the work-experience modal */
    .modal-social { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(12,11,9,0.1); }
    .modal-social-label {
      display: block; margin-bottom: 0.9rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
      color: #D4213A;
    }
    .modal-social .phone-row { margin: 0; }
    .modal-social .phone-row .phone { flex: 0 0 130px; }
    .modal-social-link {
      display: inline-flex; align-items: center; gap: 0.45rem;
      margin-top: 1rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
      color: #0c0b09; text-decoration: none;
      border-bottom: 1px solid rgba(12,11,9,0.2); padding-bottom: 0.25rem;
    }
    .modal-social-link:hover { color: #D4213A; border-color: #D4213A; }
    .modal-social-link:focus-visible { outline: 2px solid #D4213A; outline-offset: 3px; }

    /* ─── Case-study layout ────────────────────────────────── */
    .study-hero .tag-row { margin-top: 1.5rem; }
    .study-back { text-decoration: none; color: rgba(12,11,9,0.35); }
    .study-back:hover { color: #D4213A; }
    .study-hero-meta {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1.5rem;
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(12,11,9,0.1);
    }

    .study-shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 2rem; }
    .study-toc { position: sticky; top: 6rem; align-self: start; max-height: calc(100vh - 8rem); overflow-y: auto; }
    .toc-heading { display: block; margin-bottom: 0.9rem; font-size: 0.52rem; letter-spacing: 0.22em; }
    .toc-list { list-style: none; display: flex; flex-direction: column; gap: 0.1rem; }
    .toc-link {
      display: flex; gap: 0.6rem; align-items: baseline;
      padding: 0.45rem 0.5rem;
      border-left: 2px solid transparent;
      font-family: 'Space Mono', monospace;
      font-size: 0.62rem; line-height: 1.45;
      color: rgba(12,11,9,0.45);
      text-decoration: none;
      transition: color .2s ease, border-color .2s ease, background .2s ease;
    }
    .toc-num { font-size: 0.5rem; color: rgba(12,11,9,0.28); }
    .toc-link:hover { color: #0c0b09; background: rgba(12,11,9,0.04); }
    .toc-link:focus-visible { outline: 2px solid #D4213A; outline-offset: 2px; }
    .toc-link.is-current { color: #D4213A; border-left-color: #D4213A; }
    .toc-link.is-current .toc-num { color: #D4213A; }

    .study-section { padding: 2.5rem 0; border-top: 1px solid rgba(12,11,9,0.09); }
    .study-section:first-child { padding-top: 0; border-top: 0; }
    .study-section:last-child { padding-bottom: 0; }
    .study-section-head { display: flex; gap: 1rem; align-items: baseline; margin-bottom: 1.1rem; }
    .study-num {
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem; font-weight: 700; letter-spacing: 0.2em;
      color: #D4213A; flex-shrink: 0;
    }
    .study-h2 {
      font-family: 'Space Mono', monospace;
      font-size: clamp(1.2rem, 2vw, 1.6rem);
      font-weight: 700; letter-spacing: -0.03em; line-height: 1.2;
      color: #0c0b09;
    }
    .study-h3 {
      margin: 1.75rem 0 0.75rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.72rem; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(12,11,9,0.55);
    }
    .study-p {
      margin-bottom: 1rem;
      max-width: 68ch;
      font-family: 'Space Mono', monospace;
      font-size: 0.8rem; line-height: 1.9;
      color: rgba(12,11,9,0.68);
    }
    .study-list { list-style: none; max-width: 68ch; display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.35rem; }
    .study-list li {
      position: relative;
      padding-left: 1.1rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.78rem; line-height: 1.8;
      color: rgba(12,11,9,0.66);
    }
    .study-list li::before {
      content: ''; position: absolute; left: 0; top: 0.72em;
      width: 4px; height: 4px; border-radius: 50%; background: #D4213A;
    }
    .theme-list li::before { background: rgba(12,11,9,0.25); }
    .study-note {
      margin: 1.25rem 0;
      padding: 0.9rem 1.1rem;
      max-width: 68ch;
      border-left: 2px solid rgba(12,11,9,0.2);
      background: rgba(12,11,9,0.03);
      border-radius: 0 10px 10px 0;
      font-family: 'Space Mono', monospace;
      font-size: 0.68rem; line-height: 1.8;
      color: rgba(12,11,9,0.5);
    }
    .study-callout {
      margin: 1.75rem 0;
      padding: 1.5rem 1.75rem;
      max-width: 60ch;
      border-radius: 14px;
      background: rgba(212,33,58,0.05);
      border: 1px solid rgba(212,33,58,0.16);
    }
    .study-callout p {
      font-family: 'Space Mono', monospace;
      font-size: 0.95rem; font-weight: 700; line-height: 1.6;
      letter-spacing: -0.015em;
      color: #0c0b09;
    }
    .study-facts {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.75rem;
      margin: 1.5rem 0;
      padding: 1.35rem 1.5rem;
      border-radius: 14px;
      background: rgba(12,11,9,0.035);
      border: 1px solid rgba(12,11,9,0.07);
    }

    .insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin: 1.5rem 0; }
    .insight-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .insight-card {
      padding: 1.25rem 1.4rem;
      border-radius: 14px;
      background: rgba(255,255,255,0.45);
      border: 1px solid rgba(255,255,255,0.7);
      box-shadow: 0 6px 18px rgba(12,11,9,0.05);
    }
    .insight-title {
      font-family: 'Space Mono', monospace;
      font-size: 0.8rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35;
      color: #0c0b09;
    }
    .insight-body {
      margin-top: 0.6rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.72rem; line-height: 1.8;
      color: rgba(12,11,9,0.6);
    }

    .stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 1.25rem 0 1.75rem; }
    .stat-card {
      display: flex; flex-direction: column; gap: 0.35rem;
      padding: 1.1rem 1.25rem;
      border-radius: 14px;
      background: rgba(12,11,9,0.035);
      border: 1px solid rgba(12,11,9,0.07);
    }
    .stat-value {
      font-family: 'Space Mono', monospace;
      font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em;
      color: #0c0b09;
    }
    .stat-label {
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(12,11,9,0.42);
    }

    .next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
    .next-card {
      display: flex; flex-direction: column; gap: 0.4rem;
      padding: 1.4rem 1.5rem;
      border-radius: 16px;
      background: rgba(255,255,255,0.42);
      border: 1px solid rgba(255,255,255,0.72);
      text-decoration: none;
      transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
    }
    .next-card:hover { transform: translateY(-3px); border-color: rgba(212,33,58,0.3); box-shadow: 0 16px 34px rgba(212,33,58,0.08); }
    .next-card:focus-visible { outline: 2px solid #D4213A; outline-offset: 3px; }
    .next-card .lbl { font-size: 0.52rem; letter-spacing: 0.2em; }
    .next-title {
      font-family: 'Space Mono', monospace;
      font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3;
      color: #0c0b09;
    }
    .next-type {
      font-family: 'Space Mono', monospace;
      font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(12,11,9,0.42);
    }
    .next-go {
      display: inline-flex; align-items: center; gap: 0.45rem;
      margin-top: 0.6rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
      color: #0c0b09;
    }
    .next-go svg { color: #D4213A; transition: transform .3s cubic-bezier(.22,1,.36,1); }
    .next-card:hover .next-go svg { transform: translate(2px,-2px); }

    @media (max-width: 1000px) {
      .study-shell { grid-template-columns: 1fr; gap: 1.25rem; }
      .study-toc {
        position: static; max-height: none;
        padding: 1.15rem 1.35rem;
        border-radius: 16px;
        background: rgba(12,11,9,0.035);
        border: 1px solid rgba(12,11,9,0.07);
      }
      .toc-list { flex-direction: row; flex-wrap: wrap; gap: 0.35rem; }
      .toc-link { border-left: 0; border-bottom: 2px solid transparent; padding: 0.4rem 0.7rem; min-height: 44px; align-items: center; }
      .toc-link.is-current { border-left-color: transparent; border-bottom-color: #D4213A; }
      .pj-card { grid-template-columns: 1fr; gap: 1.25rem; }
      .pj-card:nth-child(even) .pj-card-media { order: 0; }
      .study-hero-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 700px) {
      .ph-row, .insight-grid, .insight-grid--two, .study-facts, .next-grid { grid-template-columns: 1fr; }
      .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .study-hero-meta { grid-template-columns: 1fr; gap: 1rem; }
      .study-section { padding: 1.9rem 0; }
      .pj-filters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 0.35rem; }
      .pj-filter { flex-shrink: 0; }
      .ph-label { font-size: 0.75rem; }
    }

    /* ═══ Projects & case studies ═════════════════════════════
       Shared components: .ph (image placeholder), .pj-* (projects index),
       .study-* (case-study layout), .insight-card, .stat-card. */

    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }

    /* ─── Image placeholder ────────────────────────────────── */
    .ph { display: block; width: 100%; margin: 1.6rem 0; }
    .ph-frame,
    .ph-img {
      display: block;
      width: 100%;
      aspect-ratio: var(--ph-ratio, 16 / 9);
      border-radius: 14px;
    }
    .ph-frame {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 1.5rem;
      text-align: center;
      background:
        repeating-linear-gradient(135deg,
          rgba(12,11,9,0.028) 0 10px, transparent 10px 20px),
        rgba(12,11,9,0.035);
      border: 1px dashed rgba(12,11,9,0.22);
    }
    .ph-img { object-fit: cover; border: 1px solid rgba(12,11,9,0.1); }
    .ph-tag {
      font-family: 'Space Mono', monospace;
      font-size: 0.5rem; font-weight: 700;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: #D4213A;
    }
    .ph-label {
      font-family: 'Space Mono', monospace;
      font-size: 0.85rem; font-weight: 700;
      letter-spacing: -0.01em;
      color: rgba(12,11,9,0.72);
      max-width: 34ch;
    }
    .ph-rec {
      font-family: 'Space Mono', monospace;
      font-size: 0.62rem; line-height: 1.7;
      color: rgba(12,11,9,0.45);
      max-width: 46ch;
    }
    .ph-cap {
      display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem;
      margin-top: 0.6rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(12,11,9,0.42);
    }
    .ph-alt { color: rgba(12,11,9,0.3); text-transform: none; letter-spacing: 0.04em; }
    .ph-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .ph-row .ph { margin: 1.6rem 0 0; }

    /* ─── Projects index ───────────────────────────────────── */
    .pj-filters {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
      margin-bottom: 1.75rem;
    }
    .pj-filters-label { margin-right: 0.5rem; font-size: 0.55rem; letter-spacing: 0.2em; }
    .pj-filter {
      min-height: 44px;
      padding: 0.6rem 1.15rem;
      border-radius: 100px;
      border: 1px solid rgba(12,11,9,0.14);
      background: transparent;
      font-family: 'Space Mono', monospace;
      font-size: 0.6rem; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(12,11,9,0.55);
      transition: background .25s ease, color .25s ease, border-color .25s ease;
    }
    .pj-filter:hover { color: #0c0b09; border-color: rgba(12,11,9,0.3); }
    .pj-filter.is-active { background: #0c0b09; border-color: #0c0b09; color: #f8f7f4; }
    .pj-filter:focus-visible { outline: 2px solid #D4213A; outline-offset: 3px; }
    .pj-count, .pj-empty {
      font-family: 'Space Mono', monospace;
      font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(12,11,9,0.4);
      margin-bottom: 1.25rem;
    }
    .pj-empty { margin-top: 1.5rem; }

    .pj-grid { display: flex; flex-direction: column; gap: 1.25rem; }
    .pj-card {
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 2.25rem;
      align-items: center;
      padding: 1.5rem;
      border-radius: 20px;
      background: rgba(255,255,255,0.4);
      border: 1px solid rgba(255,255,255,0.75);
      box-shadow: 0 10px 26px rgba(12,11,9,0.06);
      transition: transform .3s cubic-bezier(.22,1,.36,1),
                  box-shadow .3s cubic-bezier(.22,1,.36,1),
                  border-color .3s ease;
    }
    .pj-card:nth-child(even) .pj-card-media { order: 2; }
    .pj-card:hover,
    .pj-card:focus-within {
      transform: translateY(-3px);
      border-color: rgba(212,33,58,0.3);
      box-shadow: 0 20px 42px rgba(212,33,58,0.09), 0 6px 14px rgba(12,11,9,0.07);
    }
    .pj-card-media .ph { margin: 0; }
    .pj-num {
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem; font-weight: 700; letter-spacing: 0.2em;
      color: rgba(12,11,9,0.3);
    }
    .pj-title {
      margin-top: 0.5rem;
      font-family: 'Space Mono', monospace;
      font-size: clamp(1.25rem, 2.1vw, 1.7rem);
      font-weight: 700; letter-spacing: -0.035em; line-height: 1.15;
    }
    .pj-link { color: #0c0b09; text-decoration: none; }
    .pj-link::after { content: ''; position: absolute; inset: 0; border-radius: 20px; }
    .pj-link:hover { color: #D4213A; }
    .pj-link:focus-visible { outline: 2px solid #D4213A; outline-offset: 4px; }
    .pj-card { position: relative; }
    .pj-type {
      margin-top: 0.5rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
      color: #D4213A;
    }
    .pj-summary {
      margin-top: 0.85rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.78rem; line-height: 1.8;
      color: rgba(12,11,9,0.62);
    }
    .tag-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1rem; list-style: none; }
    .tag {
      padding: 0.32rem 0.7rem;
      border-radius: 100px;
      background: rgba(12,11,9,0.05);
      border: 1px solid rgba(12,11,9,0.08);
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem; letter-spacing: 0.1em;
      color: rgba(12,11,9,0.55);
    }
    .pj-meta { display: flex; flex-wrap: wrap; gap: 0.85rem 2rem; margin-top: 1.2rem; }
    .pj-meta dt, .study-facts dt, .study-hero-meta dt {
      font-family: 'Space Mono', monospace;
      font-size: 0.5rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(12,11,9,0.32);
      margin-bottom: 0.25rem;
    }
    .pj-meta dd, .study-facts dd, .study-hero-meta dd {
      font-family: 'Space Mono', monospace;
      font-size: 0.66rem; line-height: 1.6;
      color: rgba(12,11,9,0.72);
      max-width: 32ch;
    }
    .pj-go {
      display: inline-flex; align-items: center; gap: 0.45rem;
      margin-top: 1.3rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
      color: #0c0b09;
    }
    .pj-go svg { color: #D4213A; transition: transform .3s cubic-bezier(.22,1,.36,1); }
    .pj-card:hover .pj-go svg { transform: translate(2px,-2px); }

    /* ─── Case-study layout ────────────────────────────────── */
    .study-hero .tag-row { margin-top: 1.5rem; }
    .study-back { text-decoration: none; color: rgba(12,11,9,0.35); }
    .study-back:hover { color: #D4213A; }
    .study-hero-meta {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1.5rem;
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(12,11,9,0.1);
    }

    .study-shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 2rem; }
    .study-toc { position: sticky; top: 6rem; align-self: start; max-height: calc(100vh - 8rem); overflow-y: auto; }
    .toc-heading { display: block; margin-bottom: 0.9rem; font-size: 0.52rem; letter-spacing: 0.22em; }
    .toc-list { list-style: none; display: flex; flex-direction: column; gap: 0.1rem; }
    .toc-link {
      display: flex; gap: 0.6rem; align-items: baseline;
      padding: 0.45rem 0.5rem;
      border-left: 2px solid transparent;
      font-family: 'Space Mono', monospace;
      font-size: 0.62rem; line-height: 1.45;
      color: rgba(12,11,9,0.45);
      text-decoration: none;
      transition: color .2s ease, border-color .2s ease, background .2s ease;
    }
    .toc-num { font-size: 0.5rem; color: rgba(12,11,9,0.28); }
    .toc-link:hover { color: #0c0b09; background: rgba(12,11,9,0.04); }
    .toc-link:focus-visible { outline: 2px solid #D4213A; outline-offset: 2px; }
    .toc-link.is-current { color: #D4213A; border-left-color: #D4213A; }
    .toc-link.is-current .toc-num { color: #D4213A; }

    .study-section { padding: 2.5rem 0; border-top: 1px solid rgba(12,11,9,0.09); }
    .study-section:first-child { padding-top: 0; border-top: 0; }
    .study-section:last-child { padding-bottom: 0; }
    .study-section-head { display: flex; gap: 1rem; align-items: baseline; margin-bottom: 1.1rem; }
    .study-num {
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem; font-weight: 700; letter-spacing: 0.2em;
      color: #D4213A; flex-shrink: 0;
    }
    .study-h2 {
      font-family: 'Space Mono', monospace;
      font-size: clamp(1.2rem, 2vw, 1.6rem);
      font-weight: 700; letter-spacing: -0.03em; line-height: 1.2;
      color: #0c0b09;
    }
    .study-h3 {
      margin: 1.75rem 0 0.75rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.72rem; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(12,11,9,0.55);
    }
    .study-p {
      margin-bottom: 1rem;
      max-width: 68ch;
      font-family: 'Space Mono', monospace;
      font-size: 0.8rem; line-height: 1.9;
      color: rgba(12,11,9,0.68);
    }
    .study-list { list-style: none; max-width: 68ch; display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.35rem; }
    .study-list li {
      position: relative;
      padding-left: 1.1rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.78rem; line-height: 1.8;
      color: rgba(12,11,9,0.66);
    }
    .study-list li::before {
      content: ''; position: absolute; left: 0; top: 0.72em;
      width: 4px; height: 4px; border-radius: 50%; background: #D4213A;
    }
    .theme-list li::before { background: rgba(12,11,9,0.25); }
    .study-note {
      margin: 1.25rem 0;
      padding: 0.9rem 1.1rem;
      max-width: 68ch;
      border-left: 2px solid rgba(12,11,9,0.2);
      background: rgba(12,11,9,0.03);
      border-radius: 0 10px 10px 0;
      font-family: 'Space Mono', monospace;
      font-size: 0.68rem; line-height: 1.8;
      color: rgba(12,11,9,0.5);
    }
    .study-callout {
      margin: 1.75rem 0;
      padding: 1.5rem 1.75rem;
      max-width: 60ch;
      border-radius: 14px;
      background: rgba(212,33,58,0.05);
      border: 1px solid rgba(212,33,58,0.16);
    }
    .study-callout p {
      font-family: 'Space Mono', monospace;
      font-size: 0.95rem; font-weight: 700; line-height: 1.6;
      letter-spacing: -0.015em;
      color: #0c0b09;
    }
    .study-facts {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.75rem;
      margin: 1.5rem 0;
      padding: 1.35rem 1.5rem;
      border-radius: 14px;
      background: rgba(12,11,9,0.035);
      border: 1px solid rgba(12,11,9,0.07);
    }

    .insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin: 1.5rem 0; }
    .insight-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .insight-card {
      padding: 1.25rem 1.4rem;
      border-radius: 14px;
      background: rgba(255,255,255,0.45);
      border: 1px solid rgba(255,255,255,0.7);
      box-shadow: 0 6px 18px rgba(12,11,9,0.05);
    }
    .insight-title {
      font-family: 'Space Mono', monospace;
      font-size: 0.8rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35;
      color: #0c0b09;
    }
    .insight-body {
      margin-top: 0.6rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.72rem; line-height: 1.8;
      color: rgba(12,11,9,0.6);
    }

    .stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 1.25rem 0 1.75rem; }
    .stat-card {
      display: flex; flex-direction: column; gap: 0.35rem;
      padding: 1.1rem 1.25rem;
      border-radius: 14px;
      background: rgba(12,11,9,0.035);
      border: 1px solid rgba(12,11,9,0.07);
    }
    .stat-value {
      font-family: 'Space Mono', monospace;
      font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em;
      color: #0c0b09;
    }
    .stat-label {
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(12,11,9,0.42);
    }

    .next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
    .next-card {
      display: flex; flex-direction: column; gap: 0.4rem;
      padding: 1.4rem 1.5rem;
      border-radius: 16px;
      background: rgba(255,255,255,0.42);
      border: 1px solid rgba(255,255,255,0.72);
      text-decoration: none;
      transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
    }
    .next-card:hover { transform: translateY(-3px); border-color: rgba(212,33,58,0.3); box-shadow: 0 16px 34px rgba(212,33,58,0.08); }
    .next-card:focus-visible { outline: 2px solid #D4213A; outline-offset: 3px; }
    .next-card .lbl { font-size: 0.52rem; letter-spacing: 0.2em; }
    .next-title {
      font-family: 'Space Mono', monospace;
      font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3;
      color: #0c0b09;
    }
    .next-type {
      font-family: 'Space Mono', monospace;
      font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(12,11,9,0.42);
    }
    .next-go {
      display: inline-flex; align-items: center; gap: 0.45rem;
      margin-top: 0.6rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
      color: #0c0b09;
    }
    .next-go svg { color: #D4213A; transition: transform .3s cubic-bezier(.22,1,.36,1); }
    .next-card:hover .next-go svg { transform: translate(2px,-2px); }

    @media (max-width: 1000px) {
      .study-shell { grid-template-columns: 1fr; gap: 1.25rem; }
      .study-toc {
        position: static; max-height: none;
        padding: 1.15rem 1.35rem;
        border-radius: 16px;
        background: rgba(12,11,9,0.035);
        border: 1px solid rgba(12,11,9,0.07);
      }
      .toc-list { flex-direction: row; flex-wrap: wrap; gap: 0.35rem; }
      .toc-link { border-left: 0; border-bottom: 2px solid transparent; padding: 0.4rem 0.7rem; min-height: 44px; align-items: center; }
      .toc-link.is-current { border-left-color: transparent; border-bottom-color: #D4213A; }
      .pj-card { grid-template-columns: 1fr; gap: 1.25rem; }
      .pj-card:nth-child(even) .pj-card-media { order: 0; }
      .study-hero-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 700px) {
      .ph-row, .insight-grid, .insight-grid--two, .study-facts, .next-grid { grid-template-columns: 1fr; }
      .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .study-hero-meta { grid-template-columns: 1fr; gap: 1rem; }
      .study-section { padding: 1.9rem 0; }
      .pj-filters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 0.35rem; }
      .pj-filter { flex-shrink: 0; }
      .ph-label { font-size: 0.75rem; }
    }

    /* ─── Home intro + work directory ──────────────────────── */
    .home-intro-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
      gap: 2rem 3rem;
      align-items: start;
    }
    .home-statement {
      font-family: 'Space Mono', monospace;
      font-size: clamp(1.3rem, 2.1vw, 1.85rem);
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: -0.025em;
      color: #0c0b09;
      max-width: 32ch;
    }
    .home-statement strong { font-weight: 700; }

    .home-meta { border-top: 1px solid rgba(12,11,9,0.14); }
    .home-meta-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.7rem 0;
      border-bottom: 1px solid rgba(12,11,9,0.07);
    }
    .home-meta dt {
      font-family: 'Space Mono', monospace;
      font-size: 0.52rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(12,11,9,0.32);
      flex-shrink: 0;
    }
    .home-meta dd {
      font-family: 'Space Mono', monospace;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      color: #0c0b09;
      text-align: right;
    }

    .home-work-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.85rem;
      margin-top: 3rem;
    }
    .home-work-card {
      position: relative;
      display: block;
      aspect-ratio: 4 / 5;
      border-radius: 20px;
      overflow: hidden;
      text-decoration: none;
      background: rgba(12,11,9,0.06);
      box-shadow: 0 18px 40px rgba(12,11,9,0.14),
                  0 4px 10px rgba(12,11,9,0.08),
                  inset 0 0 0 1px rgba(255,255,255,0.5);
      transform: translateZ(0);
      transition: transform .5s cubic-bezier(.22,1,.36,1),
                  box-shadow .5s cubic-bezier(.22,1,.36,1);
    }
    .home-work-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 30px 60px rgba(212,33,58,0.16),
                  0 8px 18px rgba(12,11,9,0.12),
                  inset 0 0 0 1px rgba(255,255,255,0.65);
    }
    .home-work-card:active { transform: translateY(-2px); }
    .home-work-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transform: scale(1.01);
      transition: transform .8s cubic-bezier(.22,1,.36,1);
    }
    .home-work-card:hover img { transform: scale(1.07); }

    /* Brand-red treatment layer + legibility shade */
    .hw-tint {
      position: absolute; inset: 0;
      background: #D4213A;
      mix-blend-mode: multiply;
      opacity: 0;
      transition: opacity .5s ease;
      pointer-events: none;
    }
    .home-work-card:hover .hw-tint { opacity: 0.1; }
    .hw-shade {
      position: absolute; inset: 0;
      background: linear-gradient(to top,
        rgba(12,11,9,0.82) 0%,
        rgba(12,11,9,0.34) 38%,
        rgba(12,11,9,0.04) 68%,
        transparent 100%);
      pointer-events: none;
    }
    .hw-idx {
      position: absolute;
      top: 0.9rem; left: 1rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.52rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      color: rgba(255,255,255,0.85);
      text-shadow: 0 1px 5px rgba(12,11,9,0.55);
    }
    .hw-body {
      position: absolute;
      left: 1rem; right: 1rem; bottom: 0.95rem;
      display: block;
    }
    .hw-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: #f8f7f4;
    }
    .hw-title svg { color: #ff5b6e; flex-shrink: 0; transition: transform .4s cubic-bezier(.22,1,.36,1); }
    .home-work-card:hover .hw-title svg { transform: translate(2px,-2px); }
    .hw-note {
      display: block;
      margin-top: 0.3rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.06em;
      line-height: 1.55;
      color: rgba(255,255,255,0.62);
    }
    .home-work-card:focus-visible { outline: 2px solid #D4213A; outline-offset: 3px; }

    @media (max-width: 1100px) {
      .home-work-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    }
    @media (max-width: 900px) {
      .home-intro-grid { grid-template-columns: 1fr; gap: 2rem; }
      .home-statement { max-width: 34ch; }
    }
    @media (max-width: 560px) {
      .hp-rows { column-count: 1; }
      .home-work-grid { grid-template-columns: 1fr; margin-top: 2.25rem; }
      .home-work-card { aspect-ratio: 16 / 10; }
    }

    @media (prefers-reduced-motion: reduce) {
      .home-work-card, .home-work-card img, .hw-title svg,
      .reel-img, .hp-cta, .hp-cta svg, .hp-row { transition: none; }
      .home-work-card:hover { transform: none; }
      .home-work-card:hover img { transform: scale(1.01); }
      .reel-img { transform: none; }
      .hp-cta:hover { transform: none; }
    }

    /* ═══ Mobile refinements ══════════════════════════════════
       Raises small labels to a readable floor and brings every
       control up to a ~44px touch target. */
    @media (max-width: 767px) {
      /* Legibility — many meta labels sat between 8 and 10px */
      .lbl:not(.top-mark) { font-size: 0.72rem !important; letter-spacing: 0.16em !important; }
      .n-menu-label { font-size: 0.7rem; }
      .mob-idx { font-size: 0.66rem; }
      .mob-link-contact { font-size: 0.7rem; }
      .tag,
      .pj-meta dd, .study-facts dd, .cs-meta dd, .study-hero-meta dd,
      .pj-type, .fw-year, .next-type { font-size: 0.74rem; }
      .pj-meta dt, .study-facts dt, .cs-meta dt, .study-hero-meta dt { font-size: 0.62rem; }
      .study-p { font-size: 0.86rem; }
      .study-list li, .insight-body, .study-note { font-size: 0.82rem; }
      .ph-rec, .ph-cap, .ph-alt { font-size: 0.68rem; }
      .stat-label, .toc-link, .toc-num { font-size: 0.68rem; }
      .art-thumb-label, .art-thumb-tool, .art-featured-tool,
      .showcase-client, .showcase-tag, .showcase-zone-label { font-size: 0.72rem; }
      .hero-copy { font-size: 0.85rem; }
      .sf-col a, .sf-item, .drawer-foot { font-size: 0.76rem; }

      /* Touch targets */
      .drawer-foot a,
      .ab-more, .study-back, .sec-link, .modal-social-link, .fw-all {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
      }
      .sf-col a { display: inline-flex; align-items: center; min-height: 40px; }
      .film-credit { min-height: 44px; align-items: center; }
      .cs-arrow { width: 44px; height: 44px; flex-shrink: 0; }
      /* the strip scrolls, so it must be allowed to shrink below its
         content width — otherwise 7 fixed thumbs force the column wide */
      .cs-grid, .cs-media, .cs-strip-wrap { min-width: 0; }
      .cs-strip {
        min-width: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        gap: 0.5rem;
        scrollbar-width: none;
      }
      .cs-strip::-webkit-scrollbar { display: none; }
      .cs-thumb { flex: 0 0 72px; aspect-ratio: 16 / 11; }

      /* Second legibility pass — anything still under ~10.5px */
      .film-credit-text, .film-credit-label, .film-credit-name { font-size: 0.7rem; }
      .btn-pill, .pj-go, .next-go, .fw-all, .sec-link { font-size: 0.68rem; }
      .skill-chip, .edu-chip, .modal-skill { font-size: 0.72rem; }
      .skill-chip-cat, .wt-date, .cc-label { font-size: 0.68rem; }
      .pj-num, .study-num, .fg-idx, .hw-idx, .fw-idx { font-size: 0.66rem; }
      .pj-count, .pj-empty, .pj-filter { font-size: 0.68rem; }
      .modal-cat, .modal-focus, .modal-meta-label { font-size: 0.68rem; }
      .cta-sub, .sf-tag, .hp-caption, .hp-count { font-size: 0.76rem; }
      #modal-close, #vid-close, #lb-close { width: 44px; height: 44px; }
      #lb-prev, #lb-next { width: 44px; height: 44px; }

      /* Chips are nowrap by default; at a larger mobile size a long one
         pushes its grid column past the viewport, so let them wrap. */
      .edu-chip, .skill-chip, .modal-skill, .tag {
        white-space: normal;
        max-width: 100%;
      }
      #education .grid, #education .grid > *,
      .about-bento-skills, .about-bento-skills > * { min-width: 0; }

      /* Remaining small type */
      .pj-meta dt, .study-facts dt, .cs-meta dt, .study-hero-meta dt { font-size: 0.66rem; }
      .ab-based, .ab-more, .hp-note { font-size: 0.7rem; }
      .cat-kind, .cat-go { font-size: 0.7rem; }
      .sf-bottom { font-size: 0.68rem; }
      .sf-social a { width: 44px; height: 44px; }

      /* Breathing room on long case studies */
      .ph { margin: 1.15rem 0; }
      .study-section { padding: 1.6rem 0; }
    }