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

  :root {
    --black: #000000;
    --gray: #888;
    --light-gray: #c0c0c0;
    --white: #ffffff;
    --bg: #ffffff;
    --text: #000000;
    --text-muted: #575757;
    --border: #f0f0f0;
    --card-bg: rgba(250,250,250,0.85);
    --work-bg: rgba(250,250,250,0.45);
  }

  html.dark {
    --bg: #0a0a0a;
    --text: #F3F3F3;
    --text-muted: #F3F3F3;
    --border: #222222;
    --card-bg: rgba(20,20,20,0.85);
    --work-bg: rgba(20,20,20,0.45);
    --black: #F3F3F3;
    --gray: #F3F3F3;
    --light-gray: #F3F3F3;
    --white: #0a0a0a;
  }

  html.dark nav { background: transparent; }
  html.dark nav::after { background: transparent; }
  html.dark nav::before {
    background: transparent;
  }
  html.dark body.nav-filled nav {
    background: rgba(10, 10, 10, 0.94);
  }
  html.dark body.nav-filled nav::after {
    background: rgba(255, 255, 255, 0.08);
  }
  html.dark #nav-progress-bar::after { background: #ffffff; }
  html.dark .page-view { background: var(--bg); }
  html.dark .sub-tagline { color: var(--gray); }
  html.dark .stat-label { color: var(--light-gray); }
  html.dark .work-section { background: transparent; }
  html.dark .portfolio-container { background: transparent; }
  html.dark .portfolio-card { background: var(--bg); }
  html.dark .portfolio-image-placeholder { background: #2a2a2a; }
  html.dark .ai-card-image { background: #1e1e1e; }
  html.dark .about-hero-subtitle { color: #F3F3F3; }
  html.dark .about-text p { color: #F3F3F3; }
  html.dark .fun-fact { color: #F3F3F3; }
  html.dark #cursor-ring { border-color: rgba(255,255,255,0.35); }
  html.dark #cursor-dot { background: #ffffff; }
  html.dark #cursor-dot.is-pointer { background: #ffffff; color: #ffffff; }
  html.dark .ps-line { background: #333333; }
  html.dark .ps-line.active { background: #ffffff; }
  html.dark .ps-cs-line { background: #444444; }
  html.dark .ps-cs-line.active { background: #ffffff; }

  html.dark .page-close,
  html.dark .mobile-menu-close {
    color: #F3F3F3;
    background: rgba(20,20,20,0.58);
    border-color: rgba(255,255,255,0.12);
  }
  html.dark .page-title { color: #F3F3F3; }
  html.dark .page-view p { color: #F3F3F3; }
  html.dark .page-view strong { color: #F3F3F3; }
  html.dark .page-view .about-hero-title { color: #F3F3F3; }
  html.dark .page-view .about-hero-subtitle { color: #F3F3F3; }
  html.dark .nav-link { color: #F3F3F3; }
  html.dark .theme-toggle { color: #F3F3F3; }

  /* Big name SVG */
  html.dark #bigNameText { fill: #F3F3F3; }
  html.dark #bigNameText tspan[fill="#000000"] { fill: #F3F3F3; }
  html.dark #footerNameText { fill: #F3F3F3; }
  html.dark #footerNameText tspan[fill="#000000"] { fill: #F3F3F3; }

  /* Section titles */
  html.dark .portfolio-title { color: #F3F3F3; }
  html.dark .portfolio-project-name { color: #F3F3F3; }
  html.dark .portfolio-problem { color: #F3F3F3; }
  html.dark .portfolio-support-line { color: #F3F3F3; }
  html.dark .about-hero-title { color: #F3F3F3; }
  html.dark .site-footer {
    background: #111111;
    border-top-color: rgba(255,255,255,0.08);
  }
  html.dark .footer-eyebrow,
  html.dark .footer-column-title,
  html.dark .footer-name,
  html.dark .footer-link,
  html.dark .footer-link-button {
    color: #F3F3F3;
  }
  html.dark .footer-copy,
  html.dark .footer-meta {
    color: #F3F3F3;
  }
  html.dark .footer-meta-inline {
    color: #F3F3F3;
  }
  html.dark .work-tab {
    color: #666666;
  }
  html.dark .work-tab.is-active {
    background: transparent;
    color: #ffffff;
    border-bottom-color: #ffffff;
  }
  html.dark .work-card {
    background: #171717;
    border-color: rgba(255,255,255,0.08);
  }
  html.dark .work-card-title,
  html.dark .work-card-link,
  html.dark .work-empty-title {
    color: #F3F3F3;
  }
  html.dark .work-card-copy,
  html.dark .work-empty-copy {
    color: #F3F3F3;
  }
  html.dark .work-card-kicker {
    color: #F3F3F3;
  }
  html.dark .contact-lead,
  html.dark .contact-note {
    color: #F3F3F3;
  }
  html.dark .contact-label {
    color: #F3F3F3;
  }
  html.dark .contact-value,
  html.dark .contact-value-static {
    color: #F3F3F3;
  }
  html.dark .resume-download-button {
    background: #ffffff;
    color: #111111;
    border-color: #ffffff;
  }
  html.dark .resume-preview {
    background: #ffffff;
    border-color: rgba(255,255,255,0.08);
  }
  html.dark .contact-block {
    border-color: rgba(255,255,255,0.08);
    background: #171717;
  }
  html.dark .contact-chip {
    border-color: rgba(255,255,255,0.1);
    color: #F3F3F3;
    background: rgba(255,255,255,0.04);
  }
  html.dark .artwork-caption {
    color: #F3F3F3;
  }
  html.dark .artwork-caption-text,
  html.dark .playground-caption,
  html.dark .company-role,
  html.dark .company-period,
  html.dark .work-desc,
  html.dark .work-highlight,
  html.dark .portfolio-cta,
  html.dark .cs-text,
  html.dark .cs-insight-desc,
  html.dark .cs-result-label,
  html.dark .cs-image-placeholder-label,
  html.dark .contact-note,
  html.dark .contact-chip,
  html.dark .footer-copy,
  html.dark .footer-meta-inline,
  html.dark .sub-tagline,
  html.dark .stat-label {
    color: #F3F3F3;
  }
  html.dark .ai-category-title { color: #F3F3F3; }
  html.dark .ai-card-caption { color: #F3F3F3; }
  html.dark #howIAiTitle { color: #F3F3F3; }
  html.dark .work-section * { color: #F3F3F3; }
  html.dark .tagline { color: #F3F3F3; }
  html.dark .sub-tagline { color: #F3F3F3; }
  html.dark .stat-num { color: #F3F3F3; }

  /* THEME TOGGLE */
  .theme-toggle {
    background: none;
    border: none;
    cursor: none;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    transition: color 0.3s;
    position: relative;
    width: 24px;
    height: 24px;
  }

  .theme-toggle svg {
    position: absolute;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  }

  .nav-finder-toggle {
    appearance: none;
    width: 42px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: none;
  }

  .nav-finder-track {
    position: relative;
    width: 42px;
    height: 24px;
    display: block;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.14);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }

  .nav-finder-track span {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    transition: transform 0.2s ease;
  }

  .nav-finder-toggle[aria-pressed="true"] .nav-finder-track {
    background: #17c421;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  }

  .nav-finder-toggle[aria-pressed="true"] .nav-finder-track span {
    transform: translateX(18px);
  }

  html.dark .nav-finder-track {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  }

  .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
  .icon-sun  { opacity: 0; transform: rotate(90deg) scale(0.5); }

  html.dark .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); }
  html.dark .icon-sun  { opacity: 1; transform: rotate(0deg) scale(1); }

  html, body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    overflow-x: clip;
    overscroll-behavior-y: none;
    scrollbar-width: none;
    transition: background 0.4s ease, color 0.4s ease;
  }

  body {
    width: 100%;
    max-width: 100vw;
    position: relative;
  }

  .image-skeleton-host {
    position: relative;
    overflow: hidden;
  }

  picture.image-skeleton-host {
    display: block;
  }

  .image-skeleton-host::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.65) 45%, rgba(255,255,255,0) 70%),
      #efefef;
    background-size: 220px 100%, 100% 100%;
    background-repeat: no-repeat;
    animation: imageSkeletonShimmer 1.2s ease-in-out infinite;
    transition: opacity 0.28s ease;
    z-index: 1;
    pointer-events: none;
  }

  html.dark .image-skeleton-host::before {
    background:
      linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.12) 45%, rgba(255,255,255,0) 70%),
      #1a1a1a;
    background-size: 220px 100%, 100% 100%;
    background-repeat: no-repeat;
  }

  .image-skeleton-host.is-loaded::before {
    opacity: 0;
  }

  .image-skeleton {
    opacity: 0;
    transition: opacity 0.32s ease;
  }

  .image-skeleton.is-loaded {
    opacity: 1;
  }

  @keyframes imageSkeletonShimmer {
    0% { background-position: -220px 0, 0 0; }
    100% { background-position: calc(100% + 220px) 0, 0 0; }
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none;
  }

  body.is-loading {
    overflow: hidden;
  }

  #site-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.65s step-end;
  }

  html.dark #site-loader {
    background: #000000;
  }

  body.is-loaded #site-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .site-loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    padding: 32px;
  }

  .site-loader-kicker {
    font: 500 14px/1 'Inter', sans-serif;
    letter-spacing: 0.04em;
    color: #39ff14;
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.72), 0 0 28px rgba(57, 255, 20, 0.36);
  }

  .site-loader-bar {
    width: min(46vw, 180px);
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(57, 255, 20, 0.18);
    box-shadow: 0 0 18px rgba(57, 255, 20, 0.24);
  }

  .site-loader-bar span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #39ff14;
    box-shadow: 0 0 16px rgba(57, 255, 20, 0.72);
    transform-origin: left center;
    animation: bootLoaderFill 2.5s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  body.is-loading nav,
  body.is-loading #nav-progress-bar,
  body.is-loading .mobile-menu,
  body.is-loading .page-view,
  body.is-loading .hero,
  body.is-loading .work-section,
  body.is-loading .portfolio-section,
  body.is-loading .about-section,
  body.is-loading #progress-slider,
  body.is-loading #cursor-dot,
  body.is-loading #cursor-ring,
  body.is-loading #neonCanvas,
  body.is-loading #bigNameWrapper,
  body.is-loading .mac-transform-toggle,
  body.is-loading .mac-finder-mode {
    visibility: hidden;
  }

  /* NAV */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    padding: 10px 48px;
    z-index: 420;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
    isolation: isolate;
    overflow: hidden;
    transition: background 0.28s ease;
  }

  nav::before {
    content: '';
    position: absolute;
    inset: -30% -10% auto;
    height: 160%;
    background: transparent;
    opacity: 0;
    filter: blur(24px);
    pointer-events: none;
    z-index: -1;
  }

  nav::after {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 1px;
    background: transparent;
    transition: background 0.28s ease;
  }

  body.nav-filled nav {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: none;
  }

  body.nav-filled nav::after {
    background: rgba(0, 0, 0, 0.08);
  }

  body.has-active-page nav {
    justify-content: space-between;
    border-bottom: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  body.has-active-page.nav-filled nav {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  html.dark body.has-active-page.nav-filled nav {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.has-active-page nav::after {
    content: none;
  }

  body.has-active-page nav .nav-mobile-controls {
    gap: 12px;
  }

  body.has-active-page nav .nav-links {
    display: none;
  }

  body.has-active-page nav .nav-mobile-controls {
    display: flex;
  }

  @media (min-width: 769px) {
    nav {
      min-height: 64px;
    }

    body.has-active-page nav .nav-mobile-controls {
      padding: 0;
      border-radius: 0;
      background: transparent;
      border: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      box-shadow: none;
    }

    html.dark body.has-active-page nav .nav-mobile-controls {
      background: transparent;
      box-shadow: none;
    }
  }

  @media (max-width: 768px) {
    nav {
      padding: 12px 24px;
      background: #ffffff;
    }
    body.nav-filled nav {
      background: #ffffff;
    }
    body.has-active-page nav {
      justify-content: space-between;
      background: #ffffff;
      box-shadow: none;
      padding: 12px 20px;
    }
    html.dark body.has-active-page nav {
      background: rgba(10, 10, 10, 0.94);
    }
    body.has-active-page.nav-filled nav {
      background: #ffffff;
      box-shadow: none;
    }
    html.dark body.has-active-page.nav-filled nav {
      background: rgba(10, 10, 10, 0.94);
    }
    body.has-active-page nav .logo {
      display: inline-flex;
    }

    body.finder-launched-page .nav-mobile-controls .nav-finder-toggle {
      display: none;
    }
  }

  body.has-active-page .nav-mobile-controls .nav-finder-toggle {
    display: none;
  }

  #nav-progress-bar {
    display: none;
  }

  @media (max-width: 768px) {
    #nav-progress-bar {
      display: none;
      position: fixed;
      top: 57px;
      left: 0;
      right: 0;
      height: 2px;
      background: transparent;
      z-index: 321;
      pointer-events: none;
    }

    #nav-progress-bar::after {
      content: '';
      display: block;
      width: var(--progress, 0%);
      height: 100%;
      background: var(--text);
      transition: width 0.1s linear;
    }
  }

  /* Mobile controls (hamburger + dark mode) — hidden on desktop */
  .nav-mobile-controls {
    display: none;
    align-items: center;
    gap: 16px;
    opacity: 0;
    animation: fadeUp 0.8s ease 0.1s forwards;
  }

  .nav-overlay-close {
    display: none;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.7);
    color: var(--text);
    border-radius: 999px;
    padding: 10px 16px;
    font: 400 13px/1 'Inter', sans-serif;
    letter-spacing: 0.02em;
    cursor: pointer;
  }

  body.has-active-page .nav-overlay-close {
    display: inline-flex;
  }

  html.dark .nav-overlay-close {
    color: #F3F3F3;
    background: rgba(20,20,20,0.58);
    border-color: rgba(255,255,255,0.12);
  }

  .menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
  }

  .menu-bar {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .menu-toggle.open .menu-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .menu-toggle.open .menu-bar:nth-child(2) { opacity: 0; }
  .menu-toggle.open .menu-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* Mobile slide-down menu — hidden everywhere by default */
  .mobile-menu {
    display: none;
  }

  .drawer-backdrop {
    display: none;
  }

  .drawer-close {
    display: none;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.72);
    color: var(--text);
    border-radius: 999px;
    cursor: pointer;
  }

  html.dark .drawer-close {
    background: rgba(20,20,20,0.72);
    border-color: rgba(255,255,255,0.12);
    color: #F3F3F3;
  }

  @media (min-width: 769px) {
    body.has-active-page .drawer-backdrop {
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0);
      opacity: 0;
      pointer-events: none;
      z-index: 9997;
      transition: opacity 0.35s ease, background 0.35s ease;
    }

    body.has-active-page .drawer-backdrop.is-visible {
      opacity: 1;
      pointer-events: auto;
      background: rgba(0,0,0,0.18);
    }

    body.has-active-page .mobile-menu {
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(420px, 36vw);
      background: var(--bg);
      z-index: 9999;
      padding: 120px 40px 40px;
      gap: 0;
      opacity: 0;
      transform: translateX(100%);
      transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      border-left: 1px solid var(--border);
      box-shadow: -24px 0 60px rgba(0,0,0,0.08);
    }

    body.has-active-page .mobile-menu.open {
      display: flex;
      opacity: 1;
      transform: translateX(0);
    }

    body.has-active-page .mobile-menu .drawer-close {
      display: inline-flex;
    }

    body.has-active-page .mobile-menu .nav-link {
      font-family: 'Inter', sans-serif;
      font-size: 28px;
      font-weight: 400;
      letter-spacing: -0.03em;
      line-height: 1;
      color: var(--text);
      padding: 18px 0;
      border-bottom: 1px solid var(--border);
      width: 100%;
      display: block;
      opacity: 0;
      transform: translateX(18px);
      transition: opacity 0.3s ease, transform 0.3s ease, color 0.2s;
    }

    body.has-active-page .mobile-menu.open .nav-link:nth-of-type(1) { opacity: 1; transform: translateX(0); transition-delay: 0.06s; }
    body.has-active-page .mobile-menu.open .nav-link:nth-of-type(2) { opacity: 1; transform: translateX(0); transition-delay: 0.12s; }
    body.has-active-page .mobile-menu.open .nav-link:nth-of-type(3) { opacity: 1; transform: translateX(0); transition-delay: 0.18s; }
    body.has-active-page .mobile-menu.open .nav-link:nth-of-type(4) { opacity: 1; transform: translateX(0); transition-delay: 0.24s; }
    body.has-active-page .mobile-menu.open .nav-link:nth-of-type(5) { opacity: 1; transform: translateX(0); transition-delay: 0.30s; }
    body.has-active-page .mobile-menu.open .nav-link:nth-of-type(6) { opacity: 1; transform: translateX(0); transition-delay: 0.36s; }

    body.has-active-page .mobile-menu-close {
      display: none;
    }

    #page-work .work-tabs,
    #page-how-i-ai .work-tabs {
      position: relative;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 10px;
      width: fit-content;
      padding: 10px;
      margin: 28px 0 56px;
      border-radius: 999px;
      background: rgba(255,255,255,0.74);
      border: 1px solid rgba(0,0,0,0.08);
      backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      box-shadow: 0 18px 60px rgba(0,0,0,0.1);
      transform: translate3d(var(--tab-dock-x, 0px), var(--tab-dock-y, 0px), 0);
      transition: box-shadow 0.2s ease, background 0.2s ease;
      align-self: auto;
      will-change: transform;
      z-index: 360;
    }

    html.dark #page-work .work-tabs,
    html.dark #page-how-i-ai .work-tabs {
      background: rgba(16,16,16,0.74);
      border-color: rgba(255,255,255,0.12);
      box-shadow: 0 18px 60px rgba(0,0,0,0.28);
    }
  }

  @media (max-width: 768px) {
    html,
    body {
      overflow-x: hidden;
      overflow-y: auto;
      width: 100%;
      max-width: 100vw;
      position: relative;
      overscroll-behavior-y: auto;
      touch-action: pan-y;
      -webkit-overflow-scrolling: touch;
    }

    nav,
    .hero,
    .work-section-wrapper,
    .portfolio-section,
    .page-view,
    .site-footer {
      width: 100%;
      max-width: 100vw;
      overflow-x: hidden;
    }

    .page-view {
      overflow-y: auto;
      touch-action: pan-y;
    }

    .nav-links { display: none !important; }
    .nav-mobile-controls { display: flex; }
    .nav-overlay-close { display: none !important; }
    .drawer-close { display: none !important; }
    .drawer-backdrop { display: none !important; }

    .mobile-menu {
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--bg);
      z-index: 9999;
      padding: 60px 40px 60px;
      gap: 0;
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mobile-menu.open {
      display: flex;
      opacity: 1;
      transform: translateY(0);
    }

    .mobile-menu .nav-link {
      font-family: 'Inter', sans-serif;
      font-size: 36px;
      font-weight: 400;
      letter-spacing: -0.02em;
      line-height: 1;
      color: var(--text);
      padding: 18px 0;
      border-bottom: 1px solid var(--border);
      width: 100%;
      display: block;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.4s ease, transform 0.4s ease, color 0.2s;
    }

    .mobile-menu.open .nav-link:nth-of-type(1) { opacity: 1; transform: translateY(0); transition-delay: 0.08s; }
    .mobile-menu.open .nav-link:nth-of-type(2) { opacity: 1; transform: translateY(0); transition-delay: 0.14s; }
    .mobile-menu.open .nav-link:nth-of-type(3) { opacity: 1; transform: translateY(0); transition-delay: 0.20s; }
    .mobile-menu.open .nav-link:nth-of-type(4) { opacity: 1; transform: translateY(0); transition-delay: 0.26s; }
    .mobile-menu.open .nav-link:nth-of-type(5) { opacity: 1; transform: translateY(0); transition-delay: 0.32s; }
    .mobile-menu.open .nav-link:nth-of-type(6) { opacity: 1; transform: translateY(0); transition-delay: 0.38s; }

    .mobile-menu .nav-link:hover { color: var(--gray); }

    .mobile-menu-close {
      position: absolute;
      bottom: 48px;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
    }

    .mobile-menu.open .mobile-menu-close {
      opacity: 1;
    }

    .mobile-menu-close:hover {
      background: var(--border);
    }
  }

  .nav-links {
    display: flex;
    gap: 32px;
    align-items: center;
    opacity: 0;
    animation: fadeUp 0.8s ease 0.1s forwards;
  }

  .nav-link {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1;
    font-weight: 400;
    color: #000000;
    text-decoration: none;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: opacity 0.2s;
  }

  .nav-link:hover { opacity: 0.5; cursor: pointer; }
  .nav-link.active { font-weight: 500; }

  .mac-mobile-second-copy {
    display: none;
  }

  .mac-transform-toggle,
  .mac-finder-mode,
  .mac-window,
  .mac-safari-window,
  .mac-page-dots,
  .mac-app-splash,
  .mac-second-page-note,
  .mobile-work-topbar {
    display: none;
  }

  @media (min-width: 769px) {
    body.mac-finder-active {
      overflow: hidden;
    }

    .mac-transform-toggle {
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      height: 42px;
      padding: 0 10px 0 12px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.14);
      color: #ffffff;
      font: 400 14px/1 'Inter', sans-serif;
      letter-spacing: -0.01em;
      box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      cursor: none;
      transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
    }

    .mac-transform-toggle:hover {
      transform: translateY(-2px);
      background: rgba(255, 255, 255, 0.2);
      box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
    }

    .mac-transform-toggle[aria-pressed="true"] {
      background: rgba(255, 255, 255, 0.16);
      border-color: rgba(255, 255, 255, 0.14);
    }

    .mac-transform-switch {
      width: 48px;
      height: 28px;
      padding: 3px;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
    }

    .mac-transform-switch span {
      display: block;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.24);
      transition: transform 0.2s ease, background 0.2s ease;
    }

    .mac-transform-toggle[aria-pressed="true"] .mac-transform-switch {
      background: #17c421;
    }

    .mac-transform-toggle[aria-pressed="true"] .mac-transform-switch span {
      transform: translateX(20px);
    }

    .hero-transform-toggle {
      margin-top: 18px;
      color: var(--text);
      background: rgba(255, 255, 255, 0.66);
      border-color: rgba(0, 0, 0, 0.08);
      box-shadow: 0 16px 40px rgba(0,0,0,0.08);
    }

    .floating-transform-toggle {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 80;
      margin-top: 0;
      opacity: 0;
      pointer-events: none;
      transform: translateY(12px);
      box-shadow: 0 18px 48px rgba(0,0,0,0.16);
    }

    body.show-transform-fab:not(.mac-finder-active):not(.has-active-page) .floating-transform-toggle {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    body.show-transform-fab:not(.mac-finder-active):not(.has-active-page) .floating-transform-toggle:hover {
      transform: translateY(-2px);
    }

    html.dark .hero-transform-toggle {
      color: #f3f3f3;
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.12);
    }

    html:not(.dark) .hero-transform-toggle {
      color: #111111 !important;
      background: rgba(255, 255, 255, 0.82);
      border-color: rgba(0, 0, 0, 0.12);
      box-shadow: none;
    }

    html:not(.dark) .hero-transform-toggle .mac-transform-label {
      color: #111111 !important;
    }

    html:not(.dark) .hero-transform-toggle .mac-transform-switch {
      background: rgba(0, 0, 0, 0.16);
    }

    .mac-finder-mode {
      position: fixed;
      inset: 0;
      z-index: 7400;
      display: block;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      overflow: hidden;
      color: #ffffff;
      background: #000000 url('background-1800.jpg') center center / cover no-repeat;
      transition: opacity 0.34s ease, visibility 0.34s ease;
    }

    html:not(.dark) .mac-finder-mode {
      color: #111111;
      background: #f5f5f5 url('lightmode.png') center center / cover no-repeat;
    }

    .mac-finder-mode::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.14), transparent 24%, rgba(0,0,0,0.12));
      opacity: 1;
      pointer-events: none;
    }

    .mac-finder-mode::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
      background-size: 72px 72px;
      opacity: 0.14;
      pointer-events: none;
      mix-blend-mode: screen;
    }

    body.mac-finder-active .mac-finder-mode {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    body.mac-finder-active {
      background: #000000;
    }

    .mac-menu-bar {
      position: relative;
      z-index: 50;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      background: #ffffff;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
      backdrop-filter: blur(22px) saturate(160%);
      -webkit-backdrop-filter: blur(22px) saturate(160%);
      color: #111111;
      font-size: 13px;
      text-shadow: none;
    }

    .mac-menu-left,
    .mac-menu-right {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .mac-menu-right {
      gap: 14px;
      opacity: 0.9;
    }

    .mac-menu-item {
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
    }

    .mac-menu-trigger {
      appearance: none;
      border: 0;
      height: 26px;
      padding: 0 10px;
      border-radius: 6px;
      background: transparent;
      color: #111111;
      font: inherit;
      cursor: none;
    }

    .mac-menu-item:first-of-type .mac-menu-trigger {
      font-weight: 700;
    }

    .mac-menu-item:hover .mac-menu-trigger,
    .mac-menu-item:focus-within .mac-menu-trigger {
      background: rgba(0, 0, 0, 0.08);
    }

    .mac-menu-dropdown {
      position: absolute;
      left: 0;
      top: calc(100% + 4px);
      z-index: 80;
      min-width: 190px;
      padding: 7px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 10px;
      background: rgba(248, 248, 248, 0.86);
      box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22);
      backdrop-filter: blur(22px) saturate(170%);
      -webkit-backdrop-filter: blur(22px) saturate(170%);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-4px) scale(0.98);
      transform-origin: top left;
      transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
      pointer-events: none;
    }

    .mac-menu-item:hover .mac-menu-dropdown,
    .mac-menu-item:focus-within .mac-menu-dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .mac-menu-dropdown button {
      appearance: none;
      width: 100%;
      min-height: 28px;
      display: flex;
      align-items: center;
      border: 0;
      border-radius: 6px;
      padding: 0 9px;
      background: transparent;
      color: #111111;
      font: 400 13px/1 'Inter', sans-serif;
      text-align: left;
      cursor: none;
    }

    .mac-menu-dropdown button:hover,
    .mac-menu-dropdown button:focus-visible {
      background: #0a84ff;
      color: #ffffff;
      outline: none;
    }

    .mac-menu-separator {
      display: block;
      height: 1px;
      margin: 6px 2px;
      background: rgba(0, 0, 0, 0.1);
    }

    .mac-apple-dot {
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: linear-gradient(135deg, #111111, #555555);
      box-shadow: none;
    }

    .mac-welcome {
      position: absolute;
      left: calc(18.8vw + 80px);
      top: calc(18.2vh - 40px);
      z-index: 2;
      width: 286px;
      max-width: 24vw;
      color: #f3f3f3;
      text-shadow: 0 2px 18px rgba(0, 0, 0, 0.34);
      cursor: grab;
    }

    .mac-welcome.is-dragging {
      cursor: grabbing;
    }

    .mac-note-image {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 6px;
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    }

    .mac-pop-note {
      position: absolute;
      z-index: 4;
      display: block;
      padding: 0;
      border: 0;
      background: transparent;
      opacity: 0;
      visibility: hidden;
      transform: translate3d(var(--mac-item-x, 0px), calc(var(--mac-item-y, 0px) + 12px), 0) scale(0.98);
      transition: opacity 0.38s ease, visibility 0.38s ease, transform 0.38s ease;
      cursor: none;
    }

    .mac-pop-note.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translate3d(var(--mac-item-x, 0px), var(--mac-item-y, 0px), 0) scale(1);
    }

    .mac-pop-note img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 0;
      user-select: none;
      -webkit-user-drag: none;
    }

    .mac-pop-note-close {
      position: absolute;
      top: 5%;
      right: 4%;
      width: 13%;
      aspect-ratio: 1;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      cursor: none;
    }

    .mac-pop-note.is-dragging {
      transition: none !important;
      z-index: 6;
    }

    .mac-pop-note-2 {
      left: 45.2vw;
      top: 39.8vh;
      width: min(20.6vw, 280px);
    }

    .mac-pop-note-3 {
      right: 12.4vw;
      top: 20.5vh;
      width: min(20.8vw, 300px);
    }

    .mac-welcome h2 {
      display: none;
      margin: 0;
      font: 700 32px/1.18 'Inter', sans-serif;
      letter-spacing: 0.01em;
    }

    .mac-welcome p {
      margin: 0;
      font: 400 14px/1.3 'Inter', sans-serif;
      color: rgba(243, 243, 243, 0.92);
    }

    .mac-welcome .mac-transform-toggle {
      width: 100%;
      justify-content: space-between;
      margin-top: 20px;
    }

    .mac-desktop {
      position: absolute;
      right: 24px;
      top: 7.2vh;
      z-index: 2;
      width: 104px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 38px;
      align-items: start;
    }

    .mac-folder {
      appearance: none;
      border: 0;
      background: transparent;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 8px 6px;
      border-radius: 8px;
      font: 400 14px/1.25 'Inter', sans-serif;
      text-shadow: 0 2px 14px rgba(0, 0, 0, 0.38);
      cursor: none;
      transition: transform 0.2s ease, background 0.2s ease;
    }

    .mac-folder-switch-mode {
      display: none;
    }

    .mac-folder-about-mobile {
      display: none;
    }

    .mac-folder:hover {
      transform: translateY(-4px);
      background: rgba(255, 255, 255, 0.14);
    }

    .mac-folder-art,
    .mac-folder-icon {
      width: 69px;
      height: auto;
      display: block;
      object-fit: contain;
      filter: none;
    }

    .mac-folder-icon-mobile {
      display: none;
    }

    .mac-css-app-icon {
      display: none;
    }

    .mac-folder-label {
      padding: 0;
      border-radius: 0;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    html:not(.dark) .mac-folder,
    html:not(.dark) .mac-folder-label {
      color: #000000;
      text-shadow: none;
    }

    .mac-dock {
      position: absolute;
      left: 50%;
      bottom: 24px;
      z-index: 2;
      display: flex;
      align-items: flex-end;
      gap: 13px;
      padding: 7px 14px;
      border: 1px solid rgba(255,255,255,0.28);
      border-radius: 22px;
      background: rgba(255,255,255,0.18);
      box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
      backdrop-filter: blur(24px) saturate(165%);
      -webkit-backdrop-filter: blur(24px) saturate(165%);
      transform: translateX(-50%);
    }

    .mac-dock-item {
      position: relative;
      appearance: none;
      border: 0;
      background: transparent;
      padding: 0;
      cursor: none;
      transition: transform 0.2s ease;
    }

    .mac-dock-item:hover {
      transform: translateY(-8px) scale(1.08);
    }

    .mac-dock-icon {
      width: 42px;
      height: 42px;
      display: block;
      object-fit: contain;
      filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.28));
    }

    .mac-dock-icon-match-safari {
      transform: scale(1.12);
      transform-origin: center;
    }

    .mac-dock-label {
      position: absolute;
      left: 50%;
      bottom: 58px;
      padding: 6px 9px;
      border-radius: 8px;
      background: rgba(0,0,0,0.62);
      color: #ffffff;
      font-size: 11px;
      white-space: nowrap;
      opacity: 0;
      transform: translate(-50%, 6px);
      pointer-events: none;
      transition: opacity 0.16s ease, transform 0.16s ease;
    }

    .mac-dock-item:hover .mac-dock-label {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .mac-dock-minimized {
      padding-left: 14px;
      margin-left: 4px;
    }

    .mac-dock-minimized::before {
      content: "";
      position: absolute;
      left: 0;
      top: 5px;
      bottom: 5px;
      width: 1px;
      background: rgba(255,255,255,0.34);
    }

    .mac-dock-minimized[hidden] {
      display: none;
    }

    .mac-window {
      position: absolute;
      left: calc(12.4vw + 200px);
      top: 8vh;
      z-index: 4;
      width: min(760px, 72vw);
      height: min(590px, 76vh);
      display: none;
      flex-direction: column;
      border-radius: 8px;
      background: #f7f7f7;
      color: #111111;
      box-shadow: 0 36px 120px rgba(0, 0, 0, 0.38);
      overflow: hidden;
      transform-origin: center;
      animation: macWindowIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .mac-window.is-open {
      display: flex;
    }

    .mac-window.is-maximized {
      left: 20px;
      right: 20px;
      top: 48px;
      bottom: 20px;
      width: auto;
      height: auto;
      border-radius: 20%;
    }

    .mac-case-window {
      left: calc(17vw + 130px);
      top: 10vh;
      z-index: 7;
      width: min(900px, 78vw);
      height: min(680px, 80vh);
    }

    .mac-settings-panel {
      max-width: 520px;
      padding: 22px 8px;
    }

    .mac-settings-panel .resume-download-button {
      margin: 18px 0 12px;
      width: auto;
      min-width: 220px;
    }

    @keyframes macWindowIn {
      from { opacity: 0; transform: translateY(12px) scale(0.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .mac-window-chrome {
      height: 42px;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 0 18px;
      flex: 0 0 auto;
      background: #f7f7f7;
      cursor: grab;
      touch-action: none;
      user-select: none;
    }

    .mac-window.is-dragging .mac-window-chrome {
      cursor: grabbing;
    }

    .mac-window-control {
      position: relative;
      width: 13px;
      height: 13px;
      border: 0;
      border-radius: 50%;
      padding: 0;
      cursor: none;
    }

    .mac-window-control::before,
    .mac-window-control::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 7px;
      height: 1.4px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.56);
      opacity: 0;
      transform: translate(-50%, -50%);
      transition: opacity 0.12s ease;
    }

    .mac-window-control:hover::before,
    .mac-window-control:hover::after {
      opacity: 1;
    }

    .mac-window-close { background: #ff5f57; }
    .mac-window-minimize { background: #ffbd2e; }
    .mac-window-maximize { background: #28c840; }

    .mac-window-close::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .mac-window-close::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .mac-window-minimize::after {
      display: none;
    }

    .mac-window-maximize::before {
      width: 6px;
      height: 6px;
      border: 1.4px solid rgba(0, 0, 0, 0.56);
      border-radius: 1.5px;
      background: transparent;
    }

    .mac-window-maximize::after {
      display: none;
    }

    .mac-window.is-maximize-disabled .mac-window-maximize {
      opacity: 0.42;
      pointer-events: none;
    }

    .mac-window.is-settings-window {
      width: min(344px, 24.8vw);
      height: min(688px, 70.4vh);
      border-radius: 28px;
      overflow: hidden;
    }

    .mac-window.is-settings-window .mac-window-content {
      padding: 0;
      background: transparent;
    }

    .mac-safari-window {
      position: absolute;
      left: calc(9vw + 130px);
      top: 7vh;
      z-index: 5;
      width: min(980px, 78vw);
      height: min(680px, 82vh);
      display: none;
      flex-direction: column;
      overflow: hidden;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 38px 130px rgba(0,0,0,0.42);
      animation: macWindowIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .mac-safari-window.is-open {
      display: flex;
    }

    .mac-safari-window.is-maximized {
      left: 20px;
      right: 20px;
      top: 48px;
      bottom: 20px;
      width: auto;
      height: auto;
    }

    .mac-safari-chrome {
      min-height: 48px;
      display: grid;
      grid-template-columns: auto minmax(240px, 1fr) auto;
      align-items: center;
      gap: 16px;
      padding: 0 16px;
      background: #f2f2f2;
      border-bottom: 1px solid rgba(0,0,0,0.08);
      cursor: grab;
      touch-action: none;
      user-select: none;
    }

    .mac-safari-window.is-dragging .mac-safari-chrome {
      cursor: grabbing;
    }

    .mac-safari-controls {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .mac-safari-url {
      grid-column: 2;
      min-height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 9px;
      background: #ffffff;
      color: #444444;
      font: 500 13px/1 'Inter', sans-serif;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
    }

    .mac-safari-mobile-close {
      display: none;
    }

    .mac-safari-content {
      flex: 1;
      overflow: auto;
      background: #ffffff;
      color: #000000;
      --bg: #ffffff;
      --text: #000000;
      --text-muted: #575757;
      --black: #000000;
      --gray: #888888;
      --light-gray: #c0c0c0;
      --work-bg: rgba(250,250,250,0.45);
    }

    .mac-safari-content .mac-safari-page {
      min-height: 100%;
      overflow: hidden;
      background: #ffffff;
      color: #000000;
      container-type: inline-size;
      zoom: 0.82;
    }

    .mac-safari-content .mac-safari-home-section,
    .mac-safari-content .work-section-wrapper,
    .mac-safari-content .mobile-home-experience,
    .mac-safari-content .site-footer {
      background: #ffffff !important;
      color: #000000 !important;
    }

    .mac-safari-content .hero {
      position: relative;
      min-height: 640px;
      height: 100%;
      overflow: hidden;
      background: #ffffff !important;
    }

    .mac-safari-content .hero::before {
      opacity: 0.08;
    }

    .mac-safari-content .hero::after {
      display: none;
    }

    .mac-safari-content .hero-center {
      position: absolute;
      top: 44% !important;
      left: 50%;
      transform: translate(-50%, -50%) !important;
    }

    .mac-safari-content .tagline,
    .mac-safari-content .sub-tagline,
    .mac-safari-content .stats,
    .mac-safari-content .fun-fact {
      opacity: 1;
      animation: none;
    }

    .mac-safari-content .tagline,
    .mac-safari-content .stat-num,
    .mac-safari-content .company-name,
    .mac-safari-content .portfolio-title,
    .mac-safari-content .portfolio-project-name,
    .mac-safari-content .site-footer strong,
    .mac-safari-content .footer-column-title,
    .mac-safari-content .footer-link {
      color: #000000 !important;
    }

    .mac-safari-content .sub-tagline,
    .mac-safari-content .stat-label,
    .mac-safari-content .fun-fact,
    .mac-safari-content .company-role,
    .mac-safari-content .company-period,
    .mac-safari-content .portfolio-description,
    .mac-safari-content .portfolio-problem,
    .mac-safari-content .portfolio-support-line,
    .mac-safari-content .footer-kicker,
    .mac-safari-content .footer-intro,
    .mac-safari-content .footer-location {
      color: #575757 !important;
    }

    .mac-safari-content .mac-safari-big-name {
      position: relative !important;
      z-index: 1 !important;
      pointer-events: auto !important;
      width: 100%;
      box-sizing: border-box;
      padding: 88px 48px 42px;
      overflow: visible;
      color: #000000 !important;
      font-family: 'Inter', sans-serif;
      background: #ffffff !important;
    }

    .mac-safari-content .mac-safari-big-name svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
    }

    .mac-safari-content .mac-safari-big-name-text {
      display: flex;
      justify-content: center;
      align-items: baseline;
      width: 100%;
      color: #000000;
      font-family: 'Inter', sans-serif;
      font-size: clamp(72px, 9vw, 156px);
      font-weight: 700;
      line-height: 0.9;
      letter-spacing: -0.075em;
      white-space: nowrap;
      -webkit-text-fill-color: currentColor;
    }

    .mac-safari-content .mac-safari-name-letter {
      display: inline-block;
      color: inherit;
      cursor: none;
      transition: color 0.16s ease;
    }

    .mac-safari-content .mac-safari-name-letter.is-gradient {
      color: transparent !important;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent !important;
    }

    .mac-safari-content .mac-safari-big-name text {
      fill: currentColor;
      font-family: 'Inter', sans-serif;
      font-size: 190px;
      font-weight: 700;
      letter-spacing: -9px;
    }

    .mac-safari-content .mac-safari-big-name tspan {
      pointer-events: visiblePainted;
    }

    .mac-safari-content .hero .mac-safari-big-name {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      padding: 0 56px 34px;
      background: transparent !important;
    }

    .mac-safari-content .hero .mac-safari-big-name svg {
      max-height: min(22vh, 190px);
    }

    .mac-safari-content .hero .mac-safari-big-name-text {
      font-size: clamp(70px, 8.8vw, 148px);
    }

    .mac-safari-content .footer-name-svg text,
    .mac-safari-content .footer-name-svg tspan {
      fill: #000000 !important;
    }

    .mac-safari-content .mobile-home-experience {
      display: none;
    }

    .mac-window-content {
      flex: 1;
      overflow: auto;
      padding: 28px 22px 44px;
      background: #f7f7f7;
      scrollbar-width: thin;
    }

    .mac-window-content .page-inner,
    .mac-window-content .case-study-page {
      max-width: none;
      width: 100%;
      min-height: auto;
      padding: 0;
      margin: 0;
      background: transparent;
      color: #111111;
    }

    .mac-window-content .page-title,
    .mac-window-content .portfolio-title {
      margin: 0 0 18px;
      font: 700 24px/1.15 'Inter', sans-serif;
      color: #111111 !important;
      letter-spacing: -0.02em;
    }

    .mac-window-content .work-tabs,
    .mac-window-content .work-tab-description,
    .mac-window-content .portfolio-support-meta,
    .mac-window-content .portfolio-cta,
    .mac-window-content .cs-label,
    .mac-window-content .progress-slider-cs {
      display: none !important;
    }

    .mac-window-content .work-tab-panel {
      display: block !important;
    }

    .mac-window-content .work-tab-panel[hidden] {
      display: none !important;
    }

    .mac-window-content .work-tab-showcase,
    .mac-window-content .how-ai-gallery,
    .mac-window-content .work-artwork-gallery,
    .mac-window-content .ai-designs-showcase {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 28px 20px;
      align-items: start;
      margin: 0;
    }

    .mac-window-content .ai-designs-showcase {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px 20px;
    }

    .mac-window-content .mac-window-clone[data-source-page="how-i-ai"] .ai-designs-showcase {
      grid-template-columns: minmax(0, 1fr);
      max-width: 100%;
      gap: 26px;
    }

    .mac-window-content .portfolio-container {
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent;
      border-radius: 6px;
      cursor: none;
    }

    .mac-window-content .portfolio-card {
      width: 100%;
      height: auto;
      min-height: 0;
      aspect-ratio: auto;
      margin: 0;
      background: transparent;
      border-radius: 5px;
      overflow: hidden;
      align-items: stretch;
    }

    .mac-window-content .portfolio-project-image {
      width: 100%;
      height: 132px;
      display: block;
      overflow: hidden;
      background: #eaeaea;
      border-radius: 5px;
    }

    .mac-window-content .portfolio-project-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .mac-window-content .portfolio-meta {
      width: 100%;
      margin: 8px 0 0;
      padding: 0;
      position: static;
      transform: none;
      color: #111111;
    }

    .mac-window-content .portfolio-project-name {
      font-size: 13px;
      line-height: 1.25;
      font-weight: 600;
      color: #111111;
      margin: 0 0 4px;
      text-transform: none;
    }

    .mac-window-content .portfolio-project-name,
    .mac-window-content .portfolio-project-name *,
    .mac-window-content .portfolio-title-main,
    .mac-window-content .portfolio-title-sub {
      color: #111111 !important;
    }

    .mac-window-content .portfolio-problem {
      max-width: none;
      margin: 0;
      font-size: 11px;
      line-height: 1.35;
      color: #5f5f5f;
    }

    .mac-window-content .portfolio-problem,
    .mac-window-content .portfolio-problem *,
    .mac-window-content .artwork-caption,
    .mac-window-content .artwork-caption-text,
    .mac-window-content .resume-caption {
      color: #5f5f5f !important;
    }

    .mac-window-content .artwork-figure,
    .mac-window-content .ai-design-figure {
      width: 100%;
      display: block;
      margin: 0;
      overflow: visible;
    }

    .mac-window-content .artwork-figure picture,
    .mac-window-content .ai-design-figure picture {
      display: block;
    }

    .mac-window-content .artwork-figure img,
    .mac-window-content .ai-design-figure img {
      width: 100%;
      height: 220px;
      min-height: 0;
      display: block;
      object-fit: contain;
      background: #ececec;
      border-radius: 5px;
    }

    .mac-window-content .mac-window-clone[data-source-page="how-i-ai"] .ai-design-figure img {
      height: 360px;
    }

    .mac-window-content .artwork-caption,
    .mac-window-content .ai-design-figure .artwork-caption {
      position: static;
      display: block;
      padding: 8px 0 0;
      margin: 0;
    }

    .mac-window-content .artwork-caption-text {
      font-size: 12px;
      line-height: 1.35;
    }

    .mac-window-content .mac-window-clone[data-source-page="how-i-ai"] .ai-design-figure .artwork-caption {
      padding-top: 10px;
    }

    .mac-window-content .resume-page {
      padding: 0;
    }

    .mac-window-content .resume-layout {
      display: grid;
      grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
      gap: 24px;
      align-items: start;
    }

    .mac-window-content .resume-info-col {
      position: static;
      gap: 12px;
    }

    .mac-window-content .resume-preview {
      width: 100%;
      max-width: 720px;
      max-height: 430px;
      overflow: hidden;
      background: #ffffff;
      margin: 0 auto;
    }

    .mac-window-content .resume-preview img {
      width: 100%;
      height: auto;
      max-height: 430px;
      object-fit: contain;
    }

    .mac-window-content .resume-download-button {
      background: #111111;
      color: #ffffff;
      border-color: #111111;
    }

    .mac-window-content .contact-page {
      padding: 0;
      color: #111111;
    }

    .mac-window-content .contact-hero {
      max-width: 560px;
      margin-bottom: 26px;
    }

    .mac-window-content .contact-lead {
      margin-top: 10px;
      font-size: 13px;
      line-height: 1.65;
      color: #555555 !important;
    }

    .mac-window-content .contact-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .mac-window-content .contact-block {
      min-height: 150px;
      padding: 18px;
      border-radius: 16px;
      border-color: rgba(0,0,0,0.1) !important;
      background: #ffffff !important;
    }

    .mac-window-content .contact-block-highlight {
      background: #f1f1f1 !important;
    }

    .mac-window-content .contact-label {
      margin-bottom: 12px;
      font-size: 10px;
      color: #6f6f6f !important;
    }

    .mac-window-content .contact-value,
    .mac-window-content .contact-value-static {
      margin-bottom: 8px;
      max-width: 100%;
      font-size: 15px;
      line-height: 1.35;
      overflow-wrap: anywhere;
      color: #111111 !important;
    }

    .mac-window-content .contact-note {
      margin-top: 6px;
      font-size: 12px;
      line-height: 1.55;
      color: #555555 !important;
    }

    .mac-window-content .contact-chip {
      border-color: rgba(0,0,0,0.1) !important;
      background: #f7f7f7 !important;
      color: #111111 !important;
    }

    .mac-window-content .about-page-inner {
      max-width: 680px;
      padding: 0;
      margin: 0 auto;
      color: #111111;
    }

    .mac-window-content .about-hero-title {
      margin: 0 0 2px;
      font: 700 32px/1.05 'Inter', sans-serif;
      letter-spacing: -0.04em;
      color: #111111 !important;
    }

    .mac-window-content .about-hero-subtitle {
      margin: 0 0 24px;
      font: italic 28px/1.1 'Cormorant Garamond', serif;
      color: #6a6a6a !important;
    }

    .mac-window-content .about-text {
      display: grid;
      gap: 12px;
    }

    .mac-window-content .about-text p {
      margin: 0;
      font: 400 13px/1.75 'Inter', sans-serif;
      color: #333333 !important;
    }

    .mac-window-content .about-text strong {
      color: #111111 !important;
      font-weight: 700;
    }

    .mac-window-content .about-work-experience {
      max-width: none;
      margin-top: 28px;
      padding-top: 24px;
      border-top: 1px solid rgba(0,0,0,0.1);
    }

    .mac-window-content .about-work-experience .work-section-wrapper,
    .mac-window-content .about-work-experience .work-section-wrapper > section,
    .mac-window-content .about-work-experience .work-section {
      display: block !important;
      max-width: none;
      margin: 0;
      padding: 0;
      background: transparent !important;
      -webkit-mask-image: none !important;
      mask-image: none !important;
    }

    .mac-window-content .about-work-experience .work-entry {
      display: grid;
      grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
      gap: 24px;
      align-items: start;
    }

    .mac-window-content .about-work-experience .work-left {
      gap: 12px;
    }

    .mac-window-content .about-work-experience .work-left img {
      height: 42px !important;
      width: auto !important;
    }

    .mac-window-content .company-name,
    .mac-window-content .work-highlight strong {
      color: #111111 !important;
    }

    .mac-window-content .company-role,
    .mac-window-content .company-period,
    .mac-window-content .work-desc,
    .mac-window-content .work-highlight {
      color: #555555 !important;
    }

    .mac-window-content .work-right {
      gap: 10px;
    }

    .mac-window-content .work-desc,
    .mac-window-content .work-highlight {
      font-size: 12px;
      line-height: 1.65;
    }

    .mac-window-content .work-highlights {
      gap: 8px;
    }

    .mac-window-content .mac-desktop-settings {
      width: 100%;
      min-height: 100%;
      padding: 22px 18px 24px;
      color: #111111;
      background: #f3f3f3;
    }

    .mac-window-content .mac-desktop-settings.is-dark {
      color: #f3f3f3;
      background: #161616;
    }

    .mac-window-content .mac-desktop-settings-inner {
      display: flex;
      flex-direction: column;
      gap: 13px;
      width: 100%;
      max-width: 100%;
    }

    .mac-window-content .mac-desktop-settings-title {
      margin: 0;
      font: 700 26px/1 'Inter', sans-serif;
      letter-spacing: -0.05em;
      color: inherit;
    }

    .mac-window-content .mac-desktop-settings-profile,
    .mac-window-content .mac-desktop-settings-card {
      width: 100%;
      border-radius: 19px;
      background: #ffffff;
      border: 1px solid rgba(0,0,0,0.06);
    }

    .mac-window-content .mac-desktop-settings.is-dark .mac-desktop-settings-profile,
    .mac-window-content .mac-desktop-settings.is-dark .mac-desktop-settings-card {
      background: #222222;
      border-color: rgba(255,255,255,0.08);
    }

    .mac-window-content .mac-desktop-settings-profile {
      min-height: 67px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 13px;
    }

    .mac-window-content .mac-desktop-settings-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      border: 1px solid rgba(0,0,0,0.08);
      flex: 0 0 auto;
      background: #ffffff;
    }

    .mac-window-content .mac-desktop-settings-avatar img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .mac-window-content .mac-desktop-settings-profile-copy {
      display: flex;
      flex-direction: column;
      gap: 5px;
      min-width: 0;
    }

    .mac-window-content .mac-desktop-settings-profile-copy strong {
      font: 700 19px/1.02 'Inter', sans-serif;
      letter-spacing: -0.05em;
      color: inherit;
    }

    .mac-window-content .mac-desktop-settings-profile-copy span {
      font: 400 11px/1.2 'Inter', sans-serif;
      color: inherit;
      opacity: 0.86;
    }

    .mac-window-content .mac-desktop-settings-card {
      flex: 1 1 auto;
      padding: 11px 14px 19px;
    }

    .mac-window-content .mac-desktop-settings-row {
      width: 100%;
      border: none;
      background: transparent;
      color: inherit;
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 11px 0;
      text-align: left;
    }

    .mac-window-content .mac-desktop-settings-row-icon {
      width: 26px;
      height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      color: #000000;
    }

    .mac-window-content .mac-desktop-settings.is-dark .mac-desktop-settings-row-icon {
      color: #f3f3f3;
    }

    .mac-window-content .mac-desktop-settings-sun-icon {
      display: block;
      width: 19px;
      height: 19px;
      opacity: 1;
      transform: none;
    }

    .mac-window-content .mac-desktop-settings-row-icon--switch img {
      display: block;
      width: 19px;
      height: 19px;
      object-fit: contain;
      filter: brightness(0);
    }

    .mac-window-content .mac-desktop-settings.is-dark .mac-desktop-settings-row-icon--switch img {
      filter: none;
    }

    .mac-window-content .mac-desktop-settings-row-label {
      flex: 1 1 auto;
      min-width: 0;
      font: 500 13px/1.2 'Inter', sans-serif;
      letter-spacing: -0.02em;
      color: inherit;
    }

    .mac-window-content .mac-desktop-settings-divider {
      height: 1px;
      margin: 0 0 0 38px;
      background: rgba(0,0,0,0.1);
    }

    .mac-window-content .mac-desktop-settings.is-dark .mac-desktop-settings-divider {
      background: rgba(255,255,255,0.14);
    }

    .mac-window-content .mac-desktop-settings-switch {
      width: 33px;
      height: 18px;
      border-radius: 999px;
      background: #d1d1d6;
      position: relative;
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      transition: background 0.18s ease;
    }

    .mac-window-content .mac-desktop-settings-switch span {
      position: absolute;
      left: 2px;
      top: 1px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.18);
      transition: transform 0.18s ease;
    }

    .mac-window-content .mac-desktop-settings-switch.is-on {
      background: #34c759;
    }

    .mac-window-content .mac-desktop-settings-switch.is-on span {
      transform: translateX(14px);
    }

    .mac-window-back {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      margin: 0 0 14px;
      padding: 7px 12px;
      border: 1px solid rgba(0,0,0,0.12);
      border-radius: 999px;
      background: #ffffff;
      color: #111111;
      font: 500 12px/1 'Inter', sans-serif;
      letter-spacing: 0.01em;
      cursor: none;
    }

    .mac-window-back::before {
      content: "‹";
      margin-right: 6px;
      font-size: 17px;
      line-height: 0;
      transform: translateY(-1px);
    }

    .mac-window-content .cs-hero-title {
      margin: 0 0 18px;
      padding: 0;
      max-width: 100%;
      font-size: clamp(34px, 4.5vw, 54px);
      line-height: 1;
      white-space: normal;
      overflow-wrap: anywhere;
      color: #111111 !important;
    }

    .mac-window-content .case-study-hero {
      margin: 0 0 32px;
    }

    .mac-window-content .case-study-hero-media {
      margin: 0;
      width: 100%;
      max-height: 420px;
      overflow: hidden;
      border-radius: 8px;
    }

    .mac-window-content .case-study-body {
      max-width: 760px;
      padding: 0;
      margin: 0 auto;
      color: #111111;
    }

    .mac-window-content .cs-section {
      margin: 0 0 48px;
    }

    .mac-window-content .case-study-page,
    .mac-window-content .case-study-body {
      --text: #111111;
      --text-muted: #555555;
      --border: rgba(0,0,0,0.12);
      --card-bg: #ffffff;
      --bg: #f7f7f7;
    }

    .mac-window-content .cs-heading,
    .mac-window-content .cs-meta-value,
    .mac-window-content .cs-insight-num,
    .mac-window-content .cs-principle-title,
    .mac-window-content .cs-result-num,
    .mac-window-content .cs-stat-num,
    .mac-window-content .cs-design-title,
    .mac-window-content .cs-design-result,
    .mac-window-content .cs-impact-delta,
    .mac-window-content .cs-problem-card-title,
    .mac-window-content .cs-goal-text,
    .mac-window-content .cs-feature-item {
      color: #111111 !important;
    }

    .mac-window-content .cs-text,
    .mac-window-content .cs-label,
    .mac-window-content .cs-meta-label,
    .mac-window-content .cs-insight-desc,
    .mac-window-content .cs-result-label,
    .mac-window-content .cs-band-label,
    .mac-window-content .cs-stat-label,
    .mac-window-content .cs-design-num,
    .mac-window-content .cs-design-text,
    .mac-window-content .cs-impact-from,
    .mac-window-content .cs-impact-label,
    .mac-window-content .cs-problem-card-text,
    .mac-window-content .cs-goal-num,
    .mac-window-content .cs-compare-header,
    .mac-window-content .cs-compare-cell,
    .mac-window-content .cs-image-placeholder-label {
      color: #555555 !important;
    }

    .mac-window-content .cs-band,
    .mac-window-content .cs-insight-card,
    .mac-window-content .cs-design-card,
    .mac-window-content .cs-problem-card,
    .mac-window-content .cs-goal-item,
    .mac-window-content .cs-results,
    .mac-window-content .cs-impact-grid,
    .mac-window-content .cs-compare-table,
    .mac-window-content .cs-feature-item,
    .mac-window-content .cs-reflection {
      background: #ffffff !important;
      border-color: rgba(0,0,0,0.12) !important;
    }

    .mac-window-content .cs-overview,
    .mac-window-content .cs-design-result,
    .mac-window-content .cs-result-item,
    .mac-window-content .cs-impact-cell,
    .mac-window-content .cs-compare-header,
    .mac-window-content .cs-compare-header:first-child,
    .mac-window-content .cs-compare-cell,
    .mac-window-content .cs-compare-cell:nth-child(odd),
    .mac-window-content .cs-principle {
      border-color: rgba(0,0,0,0.12) !important;
    }

    .mac-window-content .cs-image-placeholder {
      background: #eeeeee !important;
    }

  }

  @media (max-width: 768px) {
    body.mac-finder-active {
      overflow: hidden;
    }

    .mac-finder-mode {
      position: fixed;
      inset: 0;
      z-index: 7400;
      display: block;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      overflow: hidden;
      color: #f3f3f3;
      background: #000000 url('background-1800.jpg') center center / cover no-repeat;
      background-attachment: scroll;
      --mac-page-x: 0px;
      transition: opacity 0.34s ease, visibility 0.34s ease;
    }

    html:not(.dark) .mac-finder-mode {
      color: #111111;
      background: #f5f5f5 url('lightmode.png') center center / cover no-repeat;
    }

    .mac-finder-mode::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.18), transparent 28%, rgba(0,0,0,0.2));
      pointer-events: none;
      width: 100vw;
    }

    .mac-mobile-scroll-pages {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: flex;
      overflow: hidden;
      touch-action: none;
      opacity: 0.01;
      pointer-events: none;
    }

    .mac-mobile-scroll-pages::-webkit-scrollbar {
      display: none;
    }

    .mac-page-dots {
      position: absolute;
      left: 50%;
      bottom: calc(env(safe-area-inset-bottom) + 118px);
      z-index: 6;
      display: flex;
      align-items: center;
      gap: 7px;
      transform: translateX(-50%);
      pointer-events: none;
    }

    .mac-page-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,0.34);
      box-shadow: 0 1px 8px rgba(0,0,0,0.25);
      transition: width 0.22s ease, background 0.22s ease, opacity 0.22s ease;
    }

    .mac-page-dot.is-active {
      width: 16px;
      background: rgba(255,255,255,0.9);
    }

    .mac-scroll-page {
      flex: 0 0 100vw;
      width: 100vw;
      height: 100%;
      scroll-snap-align: start;
    }

    .mac-empty-page {
      background: transparent;
    }

    .mac-mobile-second-copy {
      position: absolute;
      display: block;
      left: 40px;
      top: 40px;
      width: min(300px, calc(100vw - 80px));
      color: #f3f3f3;
      font: 400 14px/1.45 'Inter', sans-serif;
      letter-spacing: -0.01em;
      text-shadow: 0 2px 14px rgba(0, 0, 0, 0.42);
    }

    .mac-mobile-second-copy p {
      margin: 0 0 18px;
    }

    body.mac-finder-active .mac-finder-mode {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .mac-menu-bar {
      display: none;
    }

    .mac-desktop {
      position: absolute;
      left: 38px;
      right: 38px;
      top: 48px;
      z-index: 3;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      column-gap: 18px;
      row-gap: 18px;
      align-items: start;
      pointer-events: none;
      transform: translate3d(var(--mac-page-x), 0, 0);
      will-change: transform;
    }

    .mac-finder-mode.is-pager-animating .mac-desktop,
    .mac-finder-mode.is-pager-animating .mac-welcome,
    .mac-finder-mode.is-pager-animating .mac-second-page-note {
      transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .mac-folder {
      appearance: none;
      border: 0;
      background: transparent;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 0;
      font: 400 14px/1.25 'Inter', sans-serif;
      text-shadow: 0 2px 14px rgba(0, 0, 0, 0.42);
      pointer-events: auto;
      transform: translate3d(var(--mac-item-x, 0px), var(--mac-item-y, 0px), 0);
      touch-action: none;
      user-select: none;
      will-change: transform;
    }

    .mac-folder-art,
    .mac-folder-icon {
      width: 67.2px;
      height: 67.2px;
      display: block;
      object-fit: contain;
      filter: none;
    }

    .mac-folder-icon-desktop {
      display: none;
    }

    .mac-folder-icon-mobile {
      display: block;
    }

    .mac-css-app-icon {
      display: none;
    }

    .mac-css-work-icon {
      background: #f5f5f5;
    }

    .mac-css-work-icon::before {
      content: "";
      width: 30px;
      height: 22px;
      border: 3px solid #111111;
      border-radius: 4px;
      background: transparent;
    }

    .mac-css-work-icon::after {
      content: "";
      position: absolute;
      top: 20px;
      width: 15px;
      height: 8px;
      border: 3px solid #111111;
      border-bottom: 0;
      border-radius: 6px 6px 0 0;
    }

    .mac-css-ai-icon {
      background: #f5f5f5;
    }

    .mac-css-ai-icon::before,
    .mac-css-ai-icon::after {
      content: "";
      position: absolute;
      background: #111111;
      clip-path: polygon(50% 0%, 62% 34%, 100% 50%, 62% 66%, 50% 100%, 38% 66%, 0% 50%, 38% 34%);
    }

    .mac-css-ai-icon::before {
      left: 18px;
      top: 18px;
      width: 14px;
      height: 14px;
    }

    .mac-css-ai-icon::after {
      right: 17px;
      bottom: 17px;
      width: 22px;
      height: 22px;
    }

    .mac-css-resume-icon {
      background: #f5f5f5;
    }

    .mac-css-resume-icon::before {
      content: "";
      width: 27px;
      height: 34px;
      border-radius: 3px;
      border: 3px solid #111111;
      background: transparent;
      transform: none;
    }

    .mac-css-resume-icon::after {
      content: "";
      position: absolute;
      width: 13px;
      height: 2px;
      border-radius: 99px;
      background: #111111;
      box-shadow:
        0 7px 0 #111111,
        0 14px 0 #111111;
      transform: none;
    }

    .mac-folder-about-mobile {
      display: flex;
    }

    .mac-css-about-icon {
      background: #f5f5f5;
    }

    .mac-css-about-icon::before {
      content: "";
      position: absolute;
      top: 14px;
      width: 15px;
      height: 15px;
      border: 3px solid #111111;
      border-radius: 50%;
      background: transparent;
    }

    .mac-css-about-icon::after {
      content: "";
      position: absolute;
      bottom: 14px;
      width: 30px;
      height: 18px;
      border: 3px solid #111111;
      border-bottom: 0;
      border-radius: 18px 18px 0 0;
    }

    .mac-folder-switch-mode {
      display: flex;
      position: absolute;
      left: 0;
      top: 354px;
    }

    .mac-switch-app-icon {
      position: relative;
      width: 60px;
      height: 60px;
      display: grid;
      place-items: center;
      border-radius: 20%;
      background: #f5f5f5;
      box-shadow: 0 10px 18px rgba(0, 0, 0, 0.34);
    }

    .mac-switch-app-icon::before {
      content: "";
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 4px solid #111111;
      border-top-color: transparent;
      transform: rotate(-36deg);
    }

    .mac-switch-app-icon::after {
      content: "";
      position: absolute;
      right: 12px;
      top: 11px;
      width: 0;
      height: 0;
      border-left: 9px solid #111111;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      transform: rotate(-36deg);
    }

    .mac-folder-label {
      padding: 0;
      background: transparent;
    }

    .mac-folder-switch-mode .mac-folder-label {
      width: 70px;
      line-height: 1.2;
      text-align: center;
    }

    html:not(.dark) .mac-folder,
    html:not(.dark) .mac-folder-label {
      color: #000000;
      text-shadow: none;
    }

    .mac-welcome {
      position: absolute;
      left: 44px;
      right: 44px;
      top: 214px;
      bottom: auto;
      z-index: 3;
      color: #f3f3f3;
      text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
      width: auto;
      max-width: calc(100vw - 88px);
      overflow: visible;
      pointer-events: none;
      transform: translate3d(var(--mac-page-x), 0, 0);
      will-change: transform;
    }

    .mac-note-image {
      display: none;
    }

    .mac-pop-note {
      display: none;
    }

    .mac-second-page-note {
      position: absolute;
      left: 100vw;
      width: 100vw;
      top: calc(env(safe-area-inset-top) + 88px);
      bottom: calc(env(safe-area-inset-bottom) + 118px);
      z-index: 3;
      display: none;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      transform: translate3d(var(--mac-page-x), 0, 0);
      will-change: transform;
    }

    .mac-second-page-note img {
      display: block;
      width: min(78vw, 320px);
      height: auto;
      max-height: 100%;
      object-fit: contain;
      border-radius: 6px;
      box-shadow: 0 22px 72px rgba(0,0,0,0.28);
      pointer-events: auto;
      touch-action: none;
      user-select: none;
      transform: translate3d(var(--mac-item-x, 0px), var(--mac-item-y, 0px), 0);
      will-change: transform;
    }

    .mac-welcome h2 {
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: min(320px, calc(100vw - 88px));
      margin: 0;
      font-family: 'Inter', sans-serif;
      letter-spacing: 0.01em;
      overflow-wrap: break-word;
    }

    .mac-welcome h2 span {
      font: 500 16px/1 'Inter', sans-serif;
      color: rgba(243, 243, 243, 0.9);
    }

    .mac-welcome h2 strong {
      font: 700 40px/1.04 'Inter', sans-serif;
      letter-spacing: -0.05em;
      color: #f3f3f3;
    }

    html:not(.dark) .mac-welcome {
      color: #000000;
      text-shadow: none;
    }

    html:not(.dark) .mac-welcome h2 span,
    html:not(.dark) .mac-welcome h2 strong,
    html:not(.dark) .mac-mobile-second-copy,
    html:not(.dark) .mac-mobile-second-copy p {
      color: #000000;
      -webkit-text-fill-color: #000000;
      text-shadow: none;
    }

    .mac-welcome p {
      display: none;
      margin: 0;
      font: 400 14px/1.3 'Inter', sans-serif;
      color: rgba(243, 243, 243, 0.88);
    }

    .mac-transform-toggle {
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      height: 42px;
      margin-top: 30px;
      padding: 0 10px 0 12px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      background: rgba(255,255,255,0.12);
      color: #f3f3f3;
      font: 400 14px/1 'Inter', sans-serif;
      box-shadow: 0 12px 34px rgba(0,0,0,0.24);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      pointer-events: auto;
    }

    .mac-transform-switch {
      width: 48px;
      height: 28px;
      padding: 3px;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      border-radius: 999px;
      background: rgba(255,255,255,0.92);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
    }

    .mac-transform-switch span {
      display: block;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.24);
      transition: transform 0.2s ease;
    }

    .mac-transform-toggle[aria-pressed="true"] .mac-transform-switch {
      background: #17c421;
    }

    .mac-transform-toggle[aria-pressed="true"] .mac-transform-switch span {
      transform: translateX(20px);
    }

    html:not(.dark) .hero-transform-toggle {
      color: #111111 !important;
      background: rgba(255,255,255,0.92) !important;
      border-color: rgba(0,0,0,0.1) !important;
      box-shadow: none !important;
      text-shadow: none !important;
    }

    html:not(.dark) .hero-transform-toggle .mac-transform-label {
      color: #111111 !important;
    }

    html:not(.dark) .hero-transform-toggle .mac-transform-switch {
      background: rgba(0,0,0,0.12) !important;
    }

    .floating-transform-toggle {
      position: fixed;
      right: 24px;
      bottom: calc(env(safe-area-inset-bottom) + 24px);
      z-index: 80;
      margin-top: 0;
      opacity: 0;
      pointer-events: none;
      transform: translateY(12px);
      box-shadow: 0 16px 42px rgba(0,0,0,0.22);
    }

    body.show-transform-fab:not(.mac-finder-active):not(.has-active-page) .floating-transform-toggle {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .mac-dock {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: calc(env(safe-area-inset-bottom) + 22px);
      z-index: 3;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: center;
      justify-items: center;
      gap: 0;
      min-height: 81px;
      padding: 10px 14px;
      border: 1px solid rgba(255,255,255,0.24);
      border-radius: 34px;
      background: rgba(255,255,255,0.16);
      box-shadow: 0 18px 60px rgba(0,0,0,0.36);
      backdrop-filter: blur(24px) saturate(170%);
      -webkit-backdrop-filter: blur(24px) saturate(170%);
      pointer-events: none;
    }

    .mac-dock-item {
      appearance: none;
      border: 0;
      background: transparent;
      padding: 0;
      pointer-events: auto;
    }

    .mac-dock-icon {
      width: 60px;
      height: 60px;
      display: block;
      object-fit: contain;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,0.34));
    }

    .mac-dock-icon-match-safari {
      transform: scale(1.12);
      transform-origin: center;
    }

    .mac-dock-label {
      display: none;
    }

    .mac-app-splash {
      position: absolute;
      inset: 0;
      z-index: 12;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      background: rgba(0, 0, 0, 0.52);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: scale(1.04);
      transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
      backdrop-filter: blur(14px) saturate(140%);
      -webkit-backdrop-filter: blur(14px) saturate(140%);
    }

    .mac-app-splash.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: scale(1);
    }

    .mac-app-splash img {
      width: 92px;
      height: 92px;
      object-fit: contain;
      filter: drop-shadow(0 18px 32px rgba(0,0,0,0.38));
    }

    .mac-app-splash span {
      color: #ffffff;
      font: 500 15px/1.2 'Inter', sans-serif;
      text-shadow: 0 2px 14px rgba(0,0,0,0.42);
    }

    .mac-safari-window {
      position: absolute;
      inset: 0;
      z-index: 11;
      display: none;
      flex-direction: column;
      background: #ffffff;
      color: #000000;
    }

    .mac-safari-window.is-open {
      display: flex;
    }

    .mac-safari-chrome {
      min-height: calc(env(safe-area-inset-top) + 58px);
      padding: calc(env(safe-area-inset-top) + 10px) 14px 10px;
      display: flex;
      align-items: flex-end;
      gap: 10px;
      background: #f3f3f3;
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }

    .mac-safari-controls {
      display: none;
    }

    .mac-safari-url {
      flex: 1;
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 19px;
      background: #ffffff;
      color: #333333;
      font: 600 14px/1 'Inter', sans-serif;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
    }

    .mac-safari-mobile-close {
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 50%;
      background: #ffffff;
      color: #111111;
      font: 400 24px/1 'Inter', sans-serif;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
    }

    .mac-safari-content {
      flex: 1;
      overflow: auto;
      background: #ffffff;
      color: #000000;
      --bg: #ffffff;
      --text: #000000;
      --text-muted: #575757;
      --black: #000000;
      --gray: #888888;
      --light-gray: #c0c0c0;
      --work-bg: rgba(250,250,250,0.45);
      -webkit-overflow-scrolling: touch;
    }

    .mac-safari-content .mac-safari-page {
      min-height: 100%;
      overflow: hidden;
      background: #ffffff;
      color: #000000;
    }

    .mac-safari-content .mac-safari-home-section,
    .mac-safari-content .work-section-wrapper,
    .mac-safari-content .mobile-home-experience,
    .mac-safari-content .site-footer {
      background: #ffffff !important;
      color: #000000 !important;
    }

    .mac-safari-content .hero {
      position: relative;
      height: calc(100svh - env(safe-area-inset-top) - 58px);
      min-height: 620px;
      overflow: hidden;
      background: #ffffff !important;
    }

    .mac-safari-content .hero::before {
      opacity: 0.08;
    }

    .mac-safari-content .hero::after {
      display: none;
    }

    .mac-safari-content .hero-center {
      position: absolute;
      top: 50% !important;
      left: 50%;
      transform: translate(-50%, -50%) !important;
    }

    .mac-safari-content .tagline,
    .mac-safari-content .sub-tagline,
    .mac-safari-content .stats,
    .mac-safari-content .fun-fact {
      opacity: 1;
      animation: none;
    }

    .mac-safari-content .mobile-hero-name,
    .mac-safari-content .mobile-hero-letter,
    .mac-safari-content .tagline,
    .mac-safari-content .stat-num,
    .mac-safari-content .company-name,
    .mac-safari-content .portfolio-title,
    .mac-safari-content .portfolio-project-name,
    .mac-safari-content .site-footer strong,
    .mac-safari-content .footer-column-title,
    .mac-safari-content .footer-link {
      color: #000000 !important;
      -webkit-text-fill-color: #000000 !important;
    }

    .mac-safari-content .sub-tagline,
    .mac-safari-content .stat-label,
    .mac-safari-content .fun-fact,
    .mac-safari-content .company-role,
    .mac-safari-content .company-period,
    .mac-safari-content .portfolio-description,
    .mac-safari-content .portfolio-problem,
    .mac-safari-content .portfolio-support-line,
    .mac-safari-content .footer-kicker,
    .mac-safari-content .footer-intro,
    .mac-safari-content .footer-location {
      color: #575757 !important;
      -webkit-text-fill-color: #575757 !important;
    }

    .mac-safari-content .mac-safari-big-name {
      display: none !important;
    }

    .mac-safari-content .footer-name-svg text,
    .mac-safari-content .footer-name-svg tspan {
      fill: #000000 !important;
    }

    .mac-safari-content .mobile-home-experience {
      display: block;
    }
  }

  .mac-safari-window .mac-safari-content,
  .mac-safari-window .mac-safari-content .mac-safari-page,
  .mac-safari-window .mac-safari-content .mac-safari-page * {
    color: #000000 !important;
  }

  .mac-safari-window .mac-safari-content .footer-name-svg text,
  .mac-safari-window .mac-safari-content .footer-name-svg tspan {
    fill: #000000 !important;
  }

  .mac-safari-window .mac-safari-content .sub-tagline,
  .mac-safari-window .mac-safari-content .stat-label,
  .mac-safari-window .mac-safari-content .fun-fact,
  .mac-safari-window .mac-safari-content .company-role,
  .mac-safari-window .mac-safari-content .company-period,
  .mac-safari-window .mac-safari-content .portfolio-description,
  .mac-safari-window .mac-safari-content .portfolio-problem,
  .mac-safari-window .mac-safari-content .portfolio-support-line,
  .mac-safari-window .mac-safari-content .footer-kicker,
  .mac-safari-window .mac-safari-content .footer-intro,
  .mac-safari-window .mac-safari-content .footer-location,
  .mac-safari-window .mac-safari-content .footer-copy,
  .mac-safari-window .mac-safari-content .footer-meta-inline {
    color: #575757 !important;
    -webkit-text-fill-color: #575757 !important;
  }

  .mac-safari-window .mac-safari-content .portfolio-cta {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
  }

  .mac-safari-window .mac-safari-content .portfolio-cta:hover,
  .mac-safari-window .mac-safari-content .portfolio-cta:focus-visible {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #000000 !important;
    border-color: #000000 !important;
  }

  .mac-safari-window .mac-safari-content .site-footer {
    background: #f1f1f1 !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
  }

  .mac-safari-window .mac-safari-content .footer-eyebrow,
  .mac-safari-window .mac-safari-content .footer-column-title,
  .mac-safari-window .mac-safari-content .footer-link,
  .mac-safari-window .mac-safari-content .footer-link-button {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
  }

  .mac-safari-window .mac-safari-content .footer-copy,
  .mac-safari-window .mac-safari-content .footer-meta,
  .mac-safari-window .mac-safari-content .footer-meta-inline {
    color: #5f5f5f !important;
    -webkit-text-fill-color: #5f5f5f !important;
  }

  .mac-safari-window .mac-safari-content .mac-safari-big-name text {
    fill: var(--mac-safari-name-fill, #000000);
    -webkit-text-fill-color: unset !important;
  }

  .mac-safari-window .mac-safari-content .mac-safari-big-name tspan {
    -webkit-text-fill-color: unset !important;
  }

  html.dark .mac-safari-window .mac-safari-content .mac-safari-big-name {
    --mac-safari-name-fill: #f3f3f3;
    color: #f3f3f3 !important;
  }

  html.dark .mac-safari-window .mac-safari-content .mac-safari-big-name-text {
    color: #f3f3f3 !important;
  }

  .mac-coming-soon-toast {
    position: fixed;
    left: 48%;
    bottom: calc(env(safe-area-inset-bottom) + 96px);
    z-index: 9999;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.88);
    color: #ffffff;
    font: 600 13px/1 'Inter', sans-serif;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 10px);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .mac-coming-soon-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .mobile-menu-close,
  .page-close {
    font-size: 13px;
    font-weight: 400;
    color: var(--text);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 999px;
    padding: 12px 28px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: opacity 0.3s ease, background 0.2s ease, border-color 0.2s ease;
  }

  /* PAGE VIEWS */
  .page-view {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg);
    z-index: 300;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: none;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    padding-top: 60px;
  }

  .page-view::-webkit-scrollbar {
    display: none;
  }

  .page-view.active {
    transform: translateY(0);
  }

  @media (max-width: 768px) {
    .page-view {
      padding-top: 48px;
    }
  }

  .page-inner {
    padding: 80px 60px;
    font-family: 'Inter', sans-serif;
    max-width: 900px;
  }

  .work-page-inner {
    max-width: 100%;
    padding: 32px 48px 120px;
  }
  .work-page-inner .page-title {
    margin-bottom: 16px;
  }

  .page-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 112px;
    line-height: 0.88;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.04em;
    color: #000000;
    margin-bottom: 40px;
  }

  .page-close {
    position: fixed;
    top: 20px;
    right: 40px;
    z-index: 260;
    opacity: 0;
  }

  .page-view > .page-close {
    display: none;
  }

  .global-page-close {
    pointer-events: none;
  }

  .global-page-close.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  @media (min-width: 769px) {
    .global-page-close.is-visible {
      opacity: 0;
      pointer-events: none;
    }
  }

  @media (max-width: 768px) {
    .global-page-close.is-visible {
      top: auto !important;
      left: auto !important;
      right: 32px !important;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 32px) !important;
      transform: none !important;
      width: 56px;
      height: 56px;
      padding: 0;
      border-radius: 50%;
      justify-content: center;
      gap: 0;
      background: rgba(255,255,255,0.88);
      border-color: rgba(0,0,0,0.08);
      box-shadow: 0 14px 36px rgba(0,0,0,0.14);
      z-index: 340;
    }

    .global-page-close span:not(.page-close-icon) {
      display: none;
    }

    .global-page-close .page-close-icon {
      width: auto;
      height: auto;
      font-size: 18px;
    }

    html.dark .global-page-close {
      background: rgba(20,20,20,0.9);
      border-color: rgba(255,255,255,0.1);
      box-shadow: 0 14px 36px rgba(0,0,0,0.34);
    }
  }

  .page-close:hover,
  .mobile-menu-close:hover {
    background: rgba(0,0,0,0.06);
  }

  .page-close-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    position: relative;
    flex: 0 0 18px;
    font-size: 0;
    line-height: 1;
  }

  .page-close-icon::before,
  .page-close-icon::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
  }

  .page-close-icon::before {
    transform: rotate(45deg);
  }

  .page-close-icon::after {
    transform: rotate(-45deg);
  }

  .case-study-page {
    padding: 20px 40px 100px;
  }

  #progress-slider {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    flex-direction: column;
    gap: 4px;
    z-index: 250;
    pointer-events: none;
  }

  .ps-line {
    width: 8px;
    height: 2px;
    background: #d0d0d0;
    border-radius: 2px;
    transition: background 0.25s ease, width 0.25s ease;
  }

  .ps-line.active {
    width: 20px;
    background: var(--text);
  }

  .progress-slider-cs {
    display: none !important;
  }

  .ps-cs-line,
  .ps-line {
    width: 8px;
    height: 2px;
    background: #d8d8d8;
    border-radius: 2px;
    transition: background 0.25s ease, width 0.25s ease;
  }

  .ps-cs-line.active,
  .ps-line.active {
    width: 20px;
    background: var(--text);
  }

  .cs-hero-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text);
    white-space: nowrap;
    padding: 40px 0 24px;
  }

  .case-study-hero {
    width: 100%;
    border-radius: 0;
    overflow: hidden;
    background: #f4f4f4;
    margin: 0 0 36px;
  }

  .case-study-hero-media {
    display: block;
    width: 100%;
  }

  .case-study-hero-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
  }

  .case-study-hero-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e9e9e9 0%, #d5d5d5 100%);
    color: #111111;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.03em;
  }

  .case-study-body {
    max-width: 1000px;
    margin: 0 auto;
    padding: 64px 60px 120px;
    font-family: 'Inter', sans-serif;
  }

  .cs-section {
    margin-bottom: 64px;
  }

  .cs-overview {
    margin-bottom: 52px;
    padding-bottom: 52px;
    border-bottom: 1px solid var(--border);
  }

  .cs-meta-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .cs-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .cs-meta-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .cs-meta-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
  }

  .cs-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
  }

  .cs-heading {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 18px;
  }

  .cs-text {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 16px;
  }

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

  .cs-image-placeholder {
    margin-top: 28px;
    height: 360px;
    border-radius: 18px;
    background: #efefef;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cs-image-placeholder-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9b9b9b;
  }

  .cs-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
  }

  .cs-insight-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px 20px;
  }

  .cs-insight-num {
    font-size: 36px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 10px;
  }

  .cs-insight-desc {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-muted);
  }

  .cs-principles {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 8px;
  }

  .cs-principle {
    padding-left: 20px;
    border-left: 2px solid var(--border);
  }

  .cs-principle-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
  }

  .cs-results {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
  }

  .cs-result-item {
    padding: 28px 24px;
    border-right: 1px solid var(--border);
  }

  .cs-result-item:last-child {
    border-right: none;
  }

  .cs-result-num {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 8px;
  }

  .cs-result-label {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
  }

  .cs-reflection {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px 24px;
  }

  .cs-reflection .cs-label {
    margin-bottom: 12px;
  }

  .cs-reflection .cs-heading {
    font-size: 22px;
  }

  html.dark .cs-image-placeholder {
    background: #222222;
  }

  html.dark .cs-image-placeholder-label {
    color: #555555;
  }

  html.dark .cs-insight-card {
    background: rgba(255,255,255,0.03);
  }

  html.dark .cs-reflection {
    background: rgba(255,255,255,0.03);
  }

  /* ── Health Insurance enhanced layout ── */


  .cs-band {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 36px 40px;
  }

  .cs-band-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 28px;
  }

  .cs-stat-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
  }

  .cs-stat-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .cs-stat-num {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
    line-height: 1;
  }

  .cs-stat-label {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
  }

  .cs-design-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 32px;
  }

  .cs-design-card {
    padding: 28px 24px;
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .cs-design-num {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .cs-design-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
  }

  .cs-design-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted);
    flex: 1;
  }

  .cs-design-result {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
  }

  .cs-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    margin-top: 32px;
  }

  .cs-impact-cell {
    padding: 28px 20px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .cs-impact-cell:nth-child(4n) {
    border-right: none;
  }

  .cs-impact-cell:nth-last-child(-n+4):nth-child(4n+1),
  .cs-impact-cell:nth-last-child(-n+4),
  .cs-impact-cell:nth-last-child(-n+3),
  .cs-impact-cell:nth-last-child(-n+2),
  .cs-impact-cell:nth-last-child(1) {
    border-bottom: none;
  }

  .cs-impact-delta {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
    line-height: 1;
    margin-bottom: 6px;
  }

  .cs-impact-from {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
  }

  .cs-impact-label {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
  }

  .cs-problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
  }

  .cs-problem-card {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  .cs-problem-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
  }

  .cs-problem-card-text {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
  }

  .cs-goals-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
  }

  .cs-goal-item {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 14px 18px;
    background: var(--card-bg);
    border-radius: 10px;
    border: 1px solid var(--border);
  }

  .cs-goal-num {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    min-width: 18px;
  }

  .cs-goal-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.5;
  }

  .cs-metrics-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 0;
  }

  .cs-compare-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 24px;
  }

  .cs-compare-header {
    padding: 14px 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
  }

  .cs-compare-header:first-child {
    border-right: 1px solid var(--border);
  }

  .cs-compare-row {
    display: contents;
  }

  .cs-compare-cell {
    padding: 14px 20px;
    font-size: 14px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    line-height: 1.5;
  }

  .cs-compare-cell:nth-child(odd) {
    border-right: 1px solid var(--border);
  }

  .cs-compare-cell:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .cs-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 24px;
  }

  .cs-feature-item {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
  }

  /* Mobile overrides for new classes */
  @media (max-width: 768px) {
    .cs-features-grid { grid-template-columns: 1fr 1fr; }
    .cs-compare-table { grid-template-columns: 1fr; }
    .cs-compare-header:first-child,
    .cs-compare-cell:nth-child(odd) { border-right: none; border-bottom: 1px solid var(--border); }
    #page-health-insurance .case-study-body { max-width: 100%; }
    .cs-design-grid { grid-template-columns: 1fr; }
    .cs-stat-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .cs-impact-grid { grid-template-columns: 1fr 1fr; }
    .cs-impact-cell:nth-child(2n) { border-right: none; }
    .cs-problem-grid { grid-template-columns: 1fr; }
    .cs-metrics-compare { grid-template-columns: 1fr; }
    .cs-band { padding: 24px 20px; }
  }

  @media (max-width: 768px) {
    .nav-links { gap: 20px; }
    .page-inner { padding: 60px 20px; }
    .page-close {
      top: auto;
      right: auto;
      bottom: 48px;
      left: 50%;
      transform: translateX(-50%);
    }
    .case-study-page { padding: 12px 16px 72px; }
    #progress-slider { display: none; }
    .progress-slider-cs { display: none !important; }
    .cs-hero-title {
      padding: 20px 0 16px;
      font-size: clamp(18px, 5vw, 28px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .case-study-hero {
      width: 100%;
      border-radius: 0;
      margin: 0 0 24px;
    }
    .case-study-hero-placeholder {
      font-size: 28px;
    }
    .case-study-body {
      padding: 40px 20px 80px;
    }
    .cs-meta-row {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
    .cs-insight-grid {
      grid-template-columns: 1fr;
    }
    .cs-results {
      grid-template-columns: repeat(2, 1fr);
    }
    .cs-result-item:nth-child(2) {
      border-right: none;
    }
    .cs-result-item:nth-child(3) {
      border-top: 1px solid var(--border);
    }
    .cs-result-item:nth-child(4) {
      border-top: 1px solid var(--border);
      border-right: none;
    }
  }

  .logo {
    font-family: 'Caveat', cursive;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--black);
    text-decoration: none;
    opacity: 0;
    animation: fadeUp 0.8s ease 0.1s forwards;
  }

  /* HERO */
  .hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    text-align: center;
    overflow: visible;
    isolation: isolate;
    background:
      radial-gradient(circle at 18% 22%, rgba(0, 0, 0, 0.025), transparent 26%),
      radial-gradient(circle at 82% 78%, rgba(0, 0, 0, 0.018), transparent 24%),
      #ffffff;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0 0 -1px;
    pointer-events: none;
    z-index: -1;
  }

  .hero::before {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.065) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 0, 0, 0.065) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.38;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, rgba(0, 0, 0, 0.42) 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 68%, rgba(0, 0, 0, 0.42) 88%, transparent 100%);
  }

  html:not(.dark) .hero::before {
    background-image: none;
    opacity: 0;
  }

  .hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 240px;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 86%, #ffffff 100%);
  }

  html.dark .hero {
    background:
      radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.055), transparent 28%),
      radial-gradient(circle at 82% 78%, rgba(255, 255, 255, 0.04), transparent 24%),
      var(--bg);
  }

  html.dark .hero::before {
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.36;
  }

  html.dark .hero::after {
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0), var(--bg) 86%, var(--bg) 100%);
  }

  @media (max-width: 768px) {
    .hero {
      height: 100svh;
      overflow: hidden;
    }
  }

  .work-section-wrapper {
    position: relative;
    z-index: 1;
    background: #ffffff;
  }

  #bigNameWrapper {
    z-index: 3 !important;
  }

  html.dark .work-section-wrapper {
    background: var(--bg);
  }

  .hero-center {
    max-width: 560px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .mobile-hero-name {
    display: none;
  }

  .mobile-home-experience {
    display: block;
    position: relative;
    z-index: 1;
    background: #ffffff;
  }

  html.dark .mobile-home-experience {
    background: var(--bg);
  }

  .tagline {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--black);
    margin-bottom: 6px;
    opacity: 0;
    animation: fadeUp 0.9s ease 0.4s forwards;
  }

  .sub-tagline {
    font-size: 15px;
    font-weight: 300;
    color: var(--gray);
    margin-bottom: 20px;
    opacity: 0;
    animation: fadeUp 0.9s ease 0.55s forwards;
  }

  .stats {
    display: flex;
    gap: 56px;
    justify-content: center;
    opacity: 0;
    animation: fadeUp 0.9s ease 0.7s forwards;
  }

  .stat-num {
    font-size: 22px;
    font-weight: 500;
    color: var(--black);
    line-height: 1;
    margin-bottom: 4px;
  }

  .stat-label {
    font-size: 11px;
    font-weight: 400;
    color: var(--light-gray);
    letter-spacing: 0.03em;
  }

  .fun-fact {
    font-size: 13px;
    font-weight: 400;
    color: #575757;
    text-align: center;
    margin-top: 20px;
    opacity: 0;
    animation: fadeUp 0.9s ease 0.85s forwards;
  }

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

  @keyframes loaderPulse {
    0%, 100% { transform: scale(1); opacity: 0.94; }
    50% { transform: scale(1.015); opacity: 1; }
  }

  @keyframes loaderFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }

  @keyframes loaderBars {
    0%, 100% {
      transform: scaleX(0.72);
      opacity: 0.22;
    }
    50% {
      transform: scaleX(1);
      opacity: 1;
    }
  }

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

  /* ─── PORTFOLIO SECTION ─── */
  .portfolio-section {
    padding: 100px 0 0;
    width: 100%;
  }

  .portfolio-title {
    font-size: 32px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 8px;
    padding: 0 48px;
  }

  .portfolio-description {
    max-width: 560px;
    padding: 0 48px;
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted);
  }

  .portfolio-container {
    width: 100%;
    background: transparent;
    padding: 0 48px 0 0;
    margin-bottom: 160px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 32px;
    align-items: start;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .portfolio-container-clickable {
    cursor: none;
    transition: opacity 0.25s ease;
  }

  .portfolio-container-clickable:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 6px;
  }

  .portfolio-card {
    width: 100%;
    background: var(--bg);
    border-radius: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
  }

  .portfolio-image-placeholder {
    width: 42%;
    height: 100%;
    background: #d4d4d4;
  }

  .portfolio-project-image {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .portfolio-project-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


  .portfolio-meta {
    margin-top: 0;
    padding-bottom: 0;
    max-width: 240px;
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: start;
    position: sticky;
    top: 104px;
  }

  .portfolio-project-name {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 10px;
    line-height: 1.25;
  }

  .portfolio-problem {
    font-size: 14px;
    font-weight: 400;
    color: #444444;
    line-height: 1.45;
    margin-bottom: 24px;
  }

  .portfolio-problem strong {
    font-weight: 600;
  }

  .portfolio-support-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 18px;
  }

  .portfolio-support-line {
    font-size: 11px;
    line-height: 1.45;
    color: #8a8a8a;
  }

  .portfolio-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    color: #111111;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .portfolio-cta:hover,
  .portfolio-cta:focus-visible {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
  }

  html.dark .portfolio-cta {
    background: var(--bg);
    color: #F3F3F3;
    border-color: rgba(255,255,255,0.16);
  }

  html.dark .portfolio-cta:hover,
  html.dark .portfolio-cta:focus-visible {
    background: #F3F3F3;
    color: #0a0a0a;
    border-color: #F3F3F3;
  }

  @media (max-width: 768px) {
    .portfolio-section { padding: 80px 0 0; }
    .portfolio-title    { padding: 0 20px; margin-bottom: 8px; }
    .portfolio-description {
      padding: 0 20px;
      margin-bottom: 24px;
      font-size: 15px;
      line-height: 1.65;
    }
    .portfolio-container {
      padding: 0 20px 40px;
      display: block;
      margin-bottom: 48px;
    }
    .portfolio-card {
      width: calc(100% + 40px);
      margin-left: -20px;
      aspect-ratio: unset !important;
      height: auto !important;
      min-height: 0 !important;
      border-radius: 0;
      display: block;
      overflow: visible;
    }
    .portfolio-project-image {
      display: block;
      width: 100%;
      height: auto !important;
      overflow: visible;
    }
    .portfolio-project-image img {
      display: block;
      width: 100%;
      height: auto !important;
      object-fit: fill;
    }
    .life-mobile-edge-card .portfolio-card,
    .goleap-mobile-edge-card .portfolio-card,
    .refi-mobile-edge-card .portfolio-card,
    .colrows-mobile-edge-card .portfolio-card {
      width: calc(100% + 40px);
      margin-left: -20px;
      border-radius: 0;
    }
    .portfolio-image-placeholder { width: 80%; }
    .portfolio-meta {
      margin-top: 16px;
      max-width: none;
      min-height: auto;
      display: block;
      position: static;
      top: auto;
    }
    .portfolio-project-name { font-size: 20px; margin-bottom: 6px; }
    .portfolio-problem { font-size: 15px; margin-bottom: 16px; }
    .portfolio-cta { font-size: 12px; }
  }

  /* ─── WORK SECTION ─── */
  .work-section {
    padding: 180px 48px 80px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
  }

  .work-entry {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }

  .work-left {
    display: flex;
    align-items: flex-start;
    gap: 18px;
  }

  /* Bajaj Finserv logo block */
  .bajaj-logo {
    width: 64px;
    height: 64px;
    min-width: 64px;
    background: #004C97;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .bajaj-logo svg {
    width: 56px;
    height: 56px;
  }

  .company-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 4px;
  }

  .company-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.3;
  }

  .mobile-home-experience .company-info,
  .about-work-experience .company-info {
    padding-top: 0;
    transform: translateY(-2px);
  }

  .mobile-home-experience .company-name,
  .about-work-experience .company-name {
    line-height: 1.05;
  }

  .company-role {
    font-size: 13px;
    font-weight: 400;
    color: var(--gray);
    margin-top: 3px;
  }

  .company-period {
    font-size: 13px;
    font-weight: 400;
    color: var(--gray);
  }

  .work-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .work-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--gray);
    line-height: 1.75;
  }

  .work-highlights {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .work-highlight {
    font-size: 13.5px;
    color: #555;
    line-height: 1.65;
  }

  .work-highlight strong {
    font-weight: 600;
    color: var(--black);
  }

  /* ─── MOBILE ─── */
  @media (max-width: 768px) {
    nav {
      padding: 12px 20px;
      background: #ffffff;
    }
    body.nav-filled nav {
      background: #ffffff;
    }

    .hero {
      height: auto;
      min-height: calc(100svh + 2px);
      justify-content: center;
      overflow: hidden;
      touch-action: pan-y;
    }

    .hero::before {
      background-position: center 24px;
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, 0.44) 90%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, 0.44) 90%, transparent 100%);
    }

    .hero::after {
      height: 26svh;
    }

    #bigNameWrapper {
      display: none !important;
    }

    .work-section-wrapper {
      margin-top: 120px;
    }

    .work-section-wrapper > section {
      background: var(--bg) !important;
      -webkit-mask-image: none !important;
      mask-image: none !important;
    }

    .hero-center {
      max-width: 100%;
      width: 100%;
      padding: 0 20px;
      top: calc(50% - 32px) !important;
      left: 50%;
      transform: translate(-50%, -50%);
      gap: 0;
    }

    .mobile-hero-name {
      display: block;
      margin: 0 0 25px;
      font-size: clamp(48px, 15vw, 66px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.04em;
      color: var(--black);
      text-transform: uppercase;
      opacity: 0;
      animation: fadeUp 0.9s ease 0.3s forwards;
    }

    .mobile-hero-line {
      display: block;
      white-space: nowrap;
    }

    .mobile-hero-letter {
      display: inline-block;
      color: inherit;
      background-clip: text;
      -webkit-background-clip: text;
      transition: color 0.18s ease, filter 0.18s ease;
    }

    .mobile-hero-letter.is-gradient {
      color: transparent;
      -webkit-text-fill-color: transparent;
      filter: saturate(1.15);
    }

    html.dark .mobile-hero-name {
      color: #F3F3F3;
    }

    .tagline {
      max-width: 320px;
      margin: 0 auto 25px;
      font-size: 21px;
      font-weight: 400;
      line-height: 1.2;
      color: #777777;
    }

    .sub-tagline {
      display: none;
    }

    .stats {
      gap: 58px;
      margin-bottom: 20px;
    }
    .stat-num {
      font-size: 17px;
      font-weight: 700;
    }
    .stat-label {
      font-size: 11px;
      color: #c7c7c7;
    }
    .stat-digital { display: none; }

    .fun-fact {
      margin-top: 0;
      font-size: 12px;
      line-height: 15px;
      color: #777777;
    }

    .mobile-home-experience {
      display: block;
      position: relative;
      z-index: 1;
      background: var(--bg);
    }

    .mobile-home-experience > section {
      display: block !important;
      background: var(--bg) !important;
      -webkit-mask-image: none !important;
      mask-image: none !important;
    }

    .mobile-home-experience .work-section {
      padding: 64px 20px 80px;
      max-width: none;
    }

    /* Work section */
    .work-section {
      padding: 0 20px 10px;
    }

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

    /* Company info first, description below on mobile */
    .work-right { order: 2; }
    .work-left  {
      order: 1;
      align-items: flex-start;
      gap: 16px;
    }

    .mobile-home-experience .work-left > div:first-child {
      display: flex;
      align-items: flex-start !important;
      padding-top: 0;
    }

    .mobile-home-experience .work-left img {
      height: 52px !important;
      display: block;
    }

    .mobile-home-experience .company-info {
      padding-top: 0;
    }

    .work-desc { font-size: 13px; }
    .work-highlight { font-size: 13px; }
  }



  .about-section {
    display: flex;
    flex-direction: column;
    padding: 0 45% 120px 220px;
    font-family: 'Inter', sans-serif;
    text-align: left;
  }
  .work-about-spacer {
    height: 100px;
  }
  .about-hero-title {
    font-size: 52px;
    font-weight: 400;
    color: #000000;
    line-height: 1.15;
    margin-bottom: 8px;
  }
  .about-hero-subtitle {
    font-size: 52px;
    font-weight: 400;
    font-style: italic;
    font-family: Georgia, serif;
    color: #aaaaaa;
    line-height: 1.15;
    margin-bottom: 56px;
  }
  .about-text p {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
    color: #111111;
    margin-bottom: 28px;
    text-align: left;
  }
  .about-text p:last-child { margin-bottom: 0; }
  .about-page-inner { padding: 80px 220px 120px; }
  .about-work-experience {
    max-width: 900px;
    margin-top: 72px;
  }
  .about-work-experience .work-section-wrapper {
    margin-top: 0;
    background: transparent;
  }
  .about-work-experience .work-section-wrapper > section {
    background: transparent !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .about-work-experience .work-section {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .contact-page {
    padding-top: 96px;
    padding-bottom: 120px;
  }

  .resume-page {
    max-width: 100%;
    padding: 96px 60px 120px;
    min-height: 100%;
  }

  .resume-layout {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    align-items: start;
    gap: 56px;
    width: 100%;
  }

  .resume-image-col {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
  }

  .resume-preview {
    width: min(100%, 960px);
    max-width: 100%;
    min-height: 480px;
    border: none;
    background: #ffffff;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    overflow: hidden;
  }

  .resume-preview img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: calc(100svh - 110px);
    object-fit: contain;
    object-position: top;
  }

  .resume-info-col {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 96px;
    height: auto;
  }

  .resume-info-col .page-title {
    padding-left: 0;
    margin-bottom: 0;
  }

  .resume-caption {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-muted);
    flex: 0 0 auto;
  }

  .resume-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.08);
    background: #111111;
    color: #ffffff;
    text-decoration: none;
    font: 500 13px/1 'Inter', sans-serif;
    letter-spacing: 0.01em;
    align-self: flex-start;
  }

  .contact-hero {
    max-width: 760px;
    margin-bottom: 44px;
  }

  .contact-lead {
    margin-top: 18px;
    font-size: 18px;
    line-height: 1.75;
    color: #5d5d5d;
    max-width: 46ch;
  }

  .contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .contact-block {
    min-height: 220px;
    padding: 28px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 28px;
    background: #fcfcfc;
  }

  .contact-block-highlight {
    background: #f7f7f7;
  }

  .contact-label {
    margin-bottom: 18px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7b7b7b;
  }

  .contact-value,
  .contact-value-static {
    display: block;
    width: fit-content;
    margin-bottom: 12px;
    font-size: 24px;
    line-height: 1.22;
    font-weight: 500;
    color: #111111;
    text-decoration: none;
  }

  .contact-note {
    margin-top: 8px;
    max-width: 34ch;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
  }

  .contact-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .contact-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.08);
    background: #ffffff;
    font-size: 13px;
    color: #111111;
  }

  .artwork-page {
    max-width: 100%;
    padding: 80px 48px 120px;
  }

  .artwork-gallery {
    width: 100%;
    display: block;
    padding-top: 12px;
  }

  .artwork-figure {
    width: min(100%, 1440px);
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1080px) minmax(140px, 1fr);
    gap: 20px;
    align-items: end;
  }

  .artwork-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    min-height: 420px;
    background: transparent;
  }

  .artwork-caption {
    align-self: end;
    display: flex;
    justify-content: flex-start;
    padding-bottom: 4px;
  }

  .artwork-caption-text {
    font-size: 16px;
    line-height: 1.4;
    color: #666666;
  }

  .ai-designs-showcase {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 80px;
  }

  .how-ai-tab-panel {
    display: none;
  }

  .how-ai-tab-panel.is-active {
    display: block;
  }

  .how-ai-process-state {
    padding-top: 12px;
  }

  .ai-design-figure {
    width: min(100%, 1440px);
    align-items: start !important;
    overflow: visible;
  }

  .ai-design-figure .artwork-caption {
    align-self: start !important;
    position: sticky;
    top: 136px;
    padding-bottom: 0;
    margin-top: 0;
    padding-top: 0;
    justify-content: flex-start;
  }

  .ai-design-figure.image-skeleton-host {
    overflow: visible;
  }

  .work-artwork-gallery .artwork-figure {
    align-items: start;
    overflow: visible;
  }

  .work-artwork-gallery .artwork-caption {
    align-self: start;
    position: sticky;
    top: 136px;
    padding-bottom: 0;
    margin-top: 0;
    padding-top: 0;
    justify-content: flex-start;
  }

  .work-artwork-gallery .artwork-figure.image-skeleton-host {
    overflow: visible;
  }

  .work-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 28px 0 36px;
  }

  .work-tab-showcase .portfolio-container {
    padding: 0 0 0 0;
    margin-bottom: 100px;
  }

  .work-tab-showcase .portfolio-container:last-child {
    margin-bottom: 0;
  }

  .work-tab-showcase .portfolio-meta {
    top: 136px;
  }

  .tab-icon {
    display: none;
  }

  .tab-chevron {
    display: inline-block;
    width: 12px;
    height: 12px;
    position: relative;
    flex-shrink: 0;
  }
  .tab-chevron::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }

  .work-tab {
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.64);
    color: #5f5f5f;
    border-radius: 999px;
    padding: 13px 24px;
    font: 500 14px/1 'Inter', sans-serif;
    cursor: none;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }

  .work-tab.is-active {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
    font-weight: 500;
  }

  html.dark .work-tab {
    background: rgba(10,10,10,0.72);
    color: #F3F3F3;
    border-color: rgba(255,255,255,0.16);
  }

  html.dark .work-tab.is-active {
    background: #F3F3F3;
    color: #0a0a0a;
    border-color: #F3F3F3;
  }

  .work-tab-panel {
    display: none;
  }

  .work-tab-panel.is-active {
    display: block;
  }

  .work-tab-description {
    max-width: 620px;
    margin: 0 0 48px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-muted);
  }

  .work-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .work-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-height: 220px;
    padding: 24px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 28px;
    background: #fcfcfc;
    text-align: left;
    cursor: none;
  }

  .work-card-kicker {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a7a7a;
  }

  .work-card-title {
    font-size: 24px;
    line-height: 1.1;
    font-weight: 600;
    color: #111111;
  }

  .work-card-copy {
    max-width: 48ch;
    font-size: 15px;
    line-height: 1.7;
    color: #666666;
  }

  .work-card-link {
    margin-top: auto;
    font-size: 13px;
    font-weight: 500;
    color: #111111;
  }

  .work-empty-state {
    padding: 24px 0;
  }

  .work-empty-title {
    font-size: 28px;
    font-weight: 600;
    color: #111111;
    margin-bottom: 10px;
  }

  .work-empty-copy {
    max-width: 42ch;
    font-size: 15px;
    line-height: 1.8;
    color: #666666;
  }

  .work-tab-panel[data-work-panel="playground"] .work-empty-copy {
    font-size: 16px;
  }

  .playground-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
    margin-top: 40px;
  }

  .playground-card {
    margin: 0;
  }

  .playground-image-placeholder {
    width: 100%;
    aspect-ratio: 0.66 / 1;
    background: #f6f0f0;
  }

  .playground-caption {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.65;
    color: #666666;
  }

  .site-footer {
    margin-top: 120px;
    padding: 72px 0 20px;
    background: #f1f1f1;
    border-top: 1px solid rgba(0,0,0,0.06);
    overflow: visible;
  }

  .footer-top,
  .footer-bottom,
  .footer-name-row {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 48px;
    padding-right: 48px;
  }

  .footer-top {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 48px;
    align-items: start;
  }

  .footer-eyebrow {
    font-size: 13px;
    letter-spacing: 0.02em;
    color: #000000;
    margin-bottom: 14px;
  }

  .footer-copy {
    max-width: 440px;
    font-size: 15px;
    line-height: 1.75;
    color: #5a5a5a;
  }

  .footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .footer-column-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #000000;
    margin-bottom: 16px;
  }

  .footer-link,
  .footer-link-button {
    display: block;
    width: fit-content;
    margin-bottom: 12px;
    font-size: 14px;
    color: #111111;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    font-family: 'Inter', sans-serif;
    text-align: left;
  }

  .footer-bottom {
    margin-top: 72px;
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: #7d7d7d;
  }

  .footer-name-row {
    margin-top: 36px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    overflow: visible;
  }

  .footer-name {
    display: block;
    padding-bottom: 8px;
    padding-left: 0;
    margin-left: 0;
    overflow: visible;
    flex: 1 1 auto;
  }

  #footerNameSvg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .footer-meta-inline {
    padding-bottom: 10px;
    flex: 0 0 auto;
    white-space: nowrap;
    align-self: flex-end;
  }

  @media (max-width: 768px) {
    .work-page-inner {
      padding: 32px 16px 96px;
    }
    .mobile-work-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 24px;
      min-height: 44px;
    }
    .mobile-work-back,
    .mobile-work-close {
      appearance: none;
      border: 1px solid rgba(0,0,0,0.1);
      background: rgba(255,255,255,0.72);
      color: var(--text);
      font-family: 'Inter', sans-serif;
      backdrop-filter: blur(18px) saturate(160%);
      -webkit-backdrop-filter: blur(18px) saturate(160%);
    }
    .mobile-work-back {
      min-height: 40px;
      padding: 0 16px;
      border-radius: 999px;
      font-size: 13px;
    }
    .mobile-work-close {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    html.dark .mobile-work-back,
    html.dark .mobile-work-close {
      border-color: rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.08);
      color: #F3F3F3;
    }
    body.active-work-page .global-page-close {
      opacity: 0 !important;
      pointer-events: none !important;
    }
    .about-page-inner {
      padding-top: 32px;
    }
    .work-tab-showcase .portfolio-container {
      margin-bottom: 48px;
    }
    .work-tab-description {
      margin-bottom: 28px;
      font-size: 15px;
      line-height: 1.65;
    }
    .work-tab-showcase .portfolio-meta {
      top: auto;
    }
    .page-title {
      font-size: 72px;
      line-height: 0.9;
      margin-bottom: 28px;
    }
    .page-view .page-title {
      margin-bottom: 16px;
      padding-left: 0;
    }
    #page-work .page-title {
      margin-bottom: 24px;
      padding-left: 0;
    }
    .contact-page {
      padding-top: 32px;
      padding-bottom: 96px;
    }
    .resume-page {
      padding: 32px 20px 96px;
      height: auto;
    }
    .resume-layout {
      grid-template-columns: 1fr;
      gap: 0;
      height: auto;
    }
    .resume-image-col {
      order: 2;
      padding: 0;
      margin-bottom: 16px;
    }
    .resume-preview {
      width: 100%;
      min-height: auto;
      aspect-ratio: 0.72 / 1;
    }
    .resume-preview img {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: none;
      margin: 0;
      object-fit: contain;
      object-position: top center;
    }
    .resume-info-col {
      display: contents;
      padding: 0;
      border-left: none;
      position: static;
      height: auto;
    }
    .resume-info-col .page-title {
      order: 1;
    }
    .resume-caption {
      order: 4;
      margin-top: 8px;
      font-size: 12px;
      line-height: 1.55;
      text-align: center;
    }
    .resume-download-button {
      order: 3;
      width: 100%;
      min-height: 42px;
      padding: 11px 16px;
      font-size: 13px;
    }
    .contact-hero {
      margin-bottom: 28px;
    }
    .contact-lead {
      margin-top: 14px;
      font-size: 15px;
      line-height: 1.75;
    }
    .contact-grid {
      grid-template-columns: 1fr;
      gap: 14px;
    }
    .contact-block {
      min-height: 0;
      padding: 22px 20px;
      border-radius: 22px;
    }
    .contact-value,
    .contact-value-static {
      font-size: 19px;
      line-height: 1.28;
    }
    .contact-note {
      font-size: 13px;
    }
    .contact-chip {
      min-height: 34px;
      padding: 8px 12px;
      font-size: 12px;
    }
    .artwork-page {
      padding: 80px 20px 96px;
    }
    #page-how-i-ai .artwork-page {
      padding-top: 32px;
    }
    .artwork-gallery {
      padding-top: 0;
    }
    .artwork-figure {
      width: calc(100% + 40px);
      margin-left: -20px;
      grid-template-columns: 1fr;
      gap: 14px;
    }
    .artwork-figure img {
      border-radius: 0;
      min-height: 0;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      width: 100%;
      height: auto;
    }
    .artwork-caption {
      padding: 0 16px;
    }
    .artwork-caption-text {
      font-size: 16px;
    }
    .ai-design-figure {
      width: calc(100% + 40px);
      align-items: end;
    }
    .ai-design-figure img {
      aspect-ratio: auto;
      object-fit: contain;
      width: 100%;
      height: auto;
      background: transparent;
    }
    .ai-design-figure .artwork-caption {
      position: static;
      top: auto;
      align-self: start;
    }
    .work-artwork-gallery .artwork-caption {
      position: static;
      top: auto;
      align-self: start;
    }
    .how-ai-process-state {
      padding-top: 0;
    }
    .playground-gallery {
      grid-template-columns: 1fr;
      gap: 24px;
      margin-top: 28px;
    }
    .playground-card {
      width: calc(100% + 40px);
      margin-left: -20px;
    }
    .playground-caption {
      padding: 0 16px;
    }
    .playground-caption {
      margin-top: 12px;
      font-size: 14px;
    }
    .page-view .work-tabs {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      align-items: center;
      gap: 20px;
      margin: 0 0 28px;
      padding: 0;
      background: none;
      scrollbar-width: none;
      -ms-overflow-style: none;
      border: none;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-radius: 0;
      position: static;
    }
    .page-view .work-tabs::-webkit-scrollbar { display: none; }

    .page-view .work-tab {
      flex: 0 0 auto;
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      gap: 5px;
      padding: 0 0 8px;
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      border-radius: 0;
      color: #aaaaaa;
      font-size: 14px;
      font-weight: 400;
      opacity: 1;
      transform: none;
      transition: color 0.15s ease, border-color 0.15s ease;
      min-height: unset;
      width: auto;
    }
    .page-view .work-tab .tab-icon {
      display: none;
    }
    .page-view .work-tab .tab-label {
      font-size: 14px;
      font-weight: 400;
      color: inherit;
      white-space: nowrap;
      line-height: 1;
    }
    .page-view .work-tab.is-active {
      background: none;
      border-bottom-color: var(--text);
      color: var(--text);
    }
    .page-view .work-tab.is-active .tab-label {
      font-weight: 500;
    }
    html.dark .page-view .work-tab {
      background: none;
      border-color: transparent;
      border-bottom-color: transparent;
      color: #8c8c8c;
    }
    html.dark .page-view .work-tab.is-active {
      background: none;
      border-color: transparent;
      border-bottom-color: #ffffff;
      color: #ffffff;
    }
    .resume-download-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 44px;
      padding: 12px 18px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.01em;
    }
  .work-grid {
      grid-template-columns: 1fr;
      gap: 14px;
    }
    .work-card {
      min-height: 0;
      padding: 20px;
      border-radius: 22px;
      gap: 12px;
    }
    .work-card-title {
      font-size: 21px;
    }
    .work-card-copy,
    .work-empty-copy {
      font-size: 14px;
      line-height: 1.7;
    }
    .work-tab-panel[data-work-panel="playground"] .work-empty-copy {
      font-size: 16px;
    }
    .work-empty-title {
      font-size: 24px;
    }
    .work-about-spacer { height: 64px; }
    .about-section { padding: 0 20px 80px; }
    .about-hero-title, .about-hero-subtitle { font-size: 36px; }
    .about-page-inner { padding: 32px 20px 80px; }
    .site-footer {
      margin-top: 80px;
      padding: 36px 0 14px;
    }
    .footer-top,
    .footer-bottom,
    .footer-name-row {
      padding-left: 20px;
      padding-right: 20px;
    }
    .footer-top {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    .footer-eyebrow {
      font-size: 12px;
      margin-bottom: 8px;
    }
    .footer-copy {
      font-size: 14px;
      line-height: 1.65;
      max-width: none;
    }
    .footer-links {
      grid-template-columns: 1fr;
      gap: 18px;
    }
    .footer-column {
      padding-top: 18px;
      border-top: 1px solid rgba(0,0,0,0.06);
    }
    .footer-column-title {
      margin-bottom: 10px;
    }
    .footer-link,
    .footer-link-button {
      margin-bottom: 8px;
      font-size: 14px;
      line-height: 1.45;
      min-height: 24px;
    }
    .footer-bottom {
      margin-top: 24px;
      gap: 6px;
    }
    .footer-name-row {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
    }
    .footer-name {
      width: 100%;
      padding-left: 0;
      margin-left: 0;
      padding-bottom: 0;
    }
    #footerNameSvg {
      min-width: 0;
      width: 100%;
      max-width: 100%;
    }
    #footerNameText {
      font-size: 230px;
      letter-spacing: -18px;
    }
  }



  .ai-section {
    padding: 0 100px;
    font-family: 'Inter', sans-serif;
  }
  .ai-category {
    margin-bottom: 48px;
  }
  .ai-category-title {
    font-size: 15px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 16px;
  }
  .ai-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .ai-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .ai-card-image {
    width: 100%;
    aspect-ratio: 4/5;
    background: #ebebeb;
    border-radius: 14px;
  }
  .ai-card-caption {
    font-size: 13px;
    font-weight: 400;
    color: #000000;
  }
  @media (max-width: 768px) {
    .ai-section { padding: 0 20px; }
    .ai-grid { grid-template-columns: repeat(2, 1fr); }
  }



  * { cursor: none; }
  a, button, .nav-link, .page-close, .portfolio-card, .logo { cursor: none; }

  #cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 8px; height: 8px;
    background: #000000;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.15s, height 0.15s, background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
  }

  #cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 48px; height: 48px;
    border: 1px solid rgba(0,0,0,0.35);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, border-color 0.2s;
  }

  .cursor-hand {
    display: none;
    width: 14px;
    height: 14px;
  }

  #cursor-dot.expanded  { width: 12px; height: 12px; }
  #cursor-ring.expanded { width: 72px; height: 72px; border-color: rgba(0,0,0,0.15); }

  #cursor-dot.is-pointer {
    width: 8px;
    height: 8px;
    background: #000000;
  }

  #cursor-dot.is-pointer .cursor-hand {
    display: none;
  }

  html.dark #cursor-dot.is-pointer {
    background: #ffffff;
  }

  body.mac-finder-active #cursor-dot,
  body.mac-finder-active #cursor-dot.expanded,
  body.mac-finder-active #cursor-dot.is-pointer {
    width: 28px;
    height: 28px;
    border-radius: 0;
    background: transparent url("cursor.svg") 0 0 / contain no-repeat;
    color: #ffffff;
    transform: translate(-30%, -14%);
    clip-path: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.42));
    transition: none;
  }

  body.mac-finder-active #cursor-dot::after {
    display: none;
  }

  body.mac-finder-active #cursor-ring {
    display: block !important;
    border-color: rgba(255, 255, 255, 0.36);
  }

  body.mac-finder-active #cursor-dot .cursor-hand {
    display: none !important;
  }

  @media (max-width: 1024px) {
    * {
      cursor: auto !important;
    }

    #cursor-dot,
    #cursor-ring,
    #neonCanvas {
      display: none !important;
    }
  }

  .mac-transform-toggle {
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08)) !important;
    color: #ffffff !important;
    text-shadow: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.34),
      inset 0 -1px 0 rgba(255, 255, 255, 0.08),
      0 18px 42px rgba(0, 0, 0, 0.16) !important;
    backdrop-filter: blur(22px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
  }

  .mac-transform-toggle::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.34), transparent 34%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 56%);
    pointer-events: none;
  }

  .mac-transform-toggle:hover {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.12)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.42),
      inset 0 -1px 0 rgba(255, 255, 255, 0.1),
      0 22px 52px rgba(0, 0, 0, 0.18) !important;
  }

  .mac-transform-label {
    color: currentColor !important;
    position: relative;
    z-index: 1;
  }

  .mac-transform-switch {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow:
      inset 0 1px 2px rgba(0, 0, 0, 0.18),
      0 1px 0 rgba(255, 255, 255, 0.28) !important;
  }

  .mac-transform-switch span {
    background: #ffffff !important;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.12),
      0 5px 14px rgba(0, 0, 0, 0.2) !important;
  }

  .mac-transform-toggle[aria-pressed="true"] .mac-transform-switch {
    background: rgba(23, 196, 33, 0.92) !important;
  }

  html:not(.dark) .hero-transform-toggle,
  html:not(.dark) .floating-transform-toggle {
    border-color: rgba(0, 0, 0, 0.08) !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38)) !important;
    color: #111111 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(255, 255, 255, 0.38),
      0 14px 34px rgba(0, 0, 0, 0.08) !important;
  }

  html:not(.dark) .hero-transform-toggle:hover,
  html:not(.dark) .floating-transform-toggle:hover {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.52)) !important;
  }

  html.dark .hero-transform-toggle,
  html.dark .floating-transform-toggle {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)) !important;
    color: #f3f3f3 !important;
  }

  @media (min-width: 769px) {
    .mac-welcome,
    .mac-folder,
    .mac-dock-item {
      touch-action: none;
      user-select: none;
      transform: translate3d(var(--mac-item-x, 0px), var(--mac-item-y, 0px), 0);
      will-change: transform;
    }

    .mac-folder:hover {
      transform: translate3d(var(--mac-item-x, 0px), calc(var(--mac-item-y, 0px) - 4px), 0);
    }

    .mac-dock-item:hover {
      transform: translate3d(var(--mac-item-x, 0px), calc(var(--mac-item-y, 0px) - 8px), 0) scale(1.08);
    }

    .mac-welcome.is-dragging,
    .mac-folder.is-dragging,
    .mac-dock-item.is-dragging {
      transition: none !important;
      z-index: 10;
    }
  }

  @media (min-width: 769px) {
    .mac-menu-normal-toggle {
      appearance: none;
      width: 42px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: none;
    }

    .mac-menu-normal-track {
      position: relative;
      width: 42px;
      height: 24px;
      display: block;
      border-radius: 999px;
      background: #17c421;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .mac-menu-normal-track span {
      position: absolute;
      left: 3px;
      top: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
      transform: translateX(18px);
      transition: transform 0.2s ease;
    }

    .mac-menu-theme-icon {
      flex: 0 0 auto;
      color: inherit;
      margin-left: 2px;
    }

    .mac-menu-theme-label {
      color: inherit;
      font: 400 12px/1 'Inter', sans-serif;
      letter-spacing: -0.01em;
      white-space: nowrap;
      opacity: 0.9;
      margin-left: 10px;
    }

    .mac-menu-divider {
      color: inherit;
      font: 400 12px/1 'Inter', sans-serif;
      opacity: 0.45;
      margin-left: 2px;
      margin-right: -2px;
      user-select: none;
    }

    .mac-menu-theme-icon svg {
      width: 15px;
      height: 15px;
    }

    .mac-menu-notes-button {
      appearance: none;
      width: 18px;
      height: 18px;
      display: inline-grid;
      place-items: center;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      cursor: none;
      opacity: 0.9;
    }

    .mac-menu-notes-button img {
      width: 15px;
      height: 15px;
      display: block;
      filter: none;
    }

    .mac-menu-mode-label {
      color: inherit;
      font: 400 12px/1 'Inter', sans-serif;
      letter-spacing: -0.01em;
      white-space: nowrap;
      opacity: 0.9;
    }

    html.dark .mac-menu-bar {
      background: #2b2b2d;
      border-bottom-color: rgba(255, 255, 255, 0.08);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
      color: #f3f3f3;
    }

    html.dark .mac-menu-trigger {
      color: #f3f3f3;
    }

    html.dark .mac-menu-item:hover .mac-menu-trigger,
    html.dark .mac-menu-item:focus-within .mac-menu-trigger {
      background: rgba(255, 255, 255, 0.12);
    }

    html.dark .mac-menu-dropdown {
      border-color: rgba(255, 255, 255, 0.12);
      background: rgba(44, 44, 46, 0.92);
      box-shadow: 0 18px 60px rgba(0, 0, 0, 0.36);
    }

    html.dark .mac-menu-dropdown button {
      color: #f3f3f3;
    }

    html.dark .mac-menu-separator {
      background: rgba(255, 255, 255, 0.14);
    }

    html.dark .mac-apple-dot {
      background: linear-gradient(135deg, #f3f3f3, #9a9a9a);
    }

    html.dark .mac-folder {
      color: #f3f3f3;
      text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
    }

    html.dark .mac-folder:hover {
      background: rgba(255, 255, 255, 0.12);
    }

    html.dark .mac-dock {
      border-color: rgba(255, 255, 255, 0.18);
      background: rgba(35, 35, 37, 0.58);
      box-shadow: 0 22px 70px rgba(0, 0, 0, 0.44);
    }

    html.dark .mac-window,
    html.dark .mac-window-content {
      background: #202023;
      color: #f3f3f3;
    }

    html.dark .mac-window-chrome {
      background: #2b2b2d;
    }

    html.dark .mac-window-content .page-inner,
    html.dark .mac-window-content .case-study-page,
    html.dark .mac-window-content .page-title,
    html.dark .mac-window-content .portfolio-title,
    html.dark .mac-window-content .portfolio-project-name,
    html.dark .mac-window-content .work-card-title,
    html.dark .mac-window-content .cs-hero-title,
    html.dark .mac-window-content .cs-heading {
      color: #f3f3f3 !important;
    }

    html.dark .mac-window-content .portfolio-problem,
    html.dark .mac-window-content .work-card-copy,
    html.dark .mac-window-content .cs-text,
    html.dark .mac-window-content .cs-meta-value {
      color: rgba(243, 243, 243, 0.72) !important;
    }

    html.dark .mac-safari-window {
      background: #111111;
      color: #f3f3f3;
    }

    html.dark .mac-safari-chrome {
      background: #2b2b2d;
      border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    html.dark .mac-safari-url {
      background: #1c1c1e;
      color: #f3f3f3;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    }

    html.dark .mac-safari-window .mac-safari-content,
    html.dark .mac-safari-window .mac-safari-content .mac-safari-page,
    html.dark .mac-safari-window .mac-safari-content .mac-safari-home-section,
    html.dark .mac-safari-window .mac-safari-content .work-section-wrapper,
    html.dark .mac-safari-window .mac-safari-content .site-footer,
    html.dark .mac-safari-window .mac-safari-content .hero {
      background: #050505 !important;
      color: #f3f3f3 !important;
      --bg: #050505;
      --text: #f3f3f3;
      --text-muted: rgba(243, 243, 243, 0.72);
      --black: #f3f3f3;
      --gray: rgba(243, 243, 243, 0.72);
    }

    html.dark .mac-safari-window .mac-safari-content .mac-safari-page *,
    html.dark .mac-safari-window .mac-safari-content .tagline,
    html.dark .mac-safari-window .mac-safari-content .stat-num,
    html.dark .mac-safari-window .mac-safari-content .company-name,
    html.dark .mac-safari-window .mac-safari-content .portfolio-title,
    html.dark .mac-safari-window .mac-safari-content .portfolio-project-name,
    html.dark .mac-safari-window .mac-safari-content .footer-column-title,
    html.dark .mac-safari-window .mac-safari-content .footer-link {
      color: #f3f3f3 !important;
    }

    html.dark .mac-safari-window .mac-safari-content .sub-tagline,
    html.dark .mac-safari-window .mac-safari-content .stat-label,
    html.dark .mac-safari-window .mac-safari-content .fun-fact,
    html.dark .mac-safari-window .mac-safari-content .company-role,
    html.dark .mac-safari-window .mac-safari-content .company-period,
    html.dark .mac-safari-window .mac-safari-content .portfolio-description,
    html.dark .mac-safari-window .mac-safari-content .portfolio-problem,
    html.dark .mac-safari-window .mac-safari-content .footer-copy,
    html.dark .mac-safari-window .mac-safari-content .footer-meta-inline {
      color: rgba(243, 243, 243, 0.72) !important;
      -webkit-text-fill-color: rgba(243, 243, 243, 0.72) !important;
    }

    html.dark .mac-safari-window .mac-safari-content .footer-name-svg text,
    html.dark .mac-safari-window .mac-safari-content .footer-name-svg tspan {
      fill: #f3f3f3 !important;
    }

    html.dark .mac-safari-window .mac-safari-content .portfolio-cta {
      color: #f3f3f3 !important;
      -webkit-text-fill-color: #f3f3f3 !important;
      background: #050505 !important;
      border-color: rgba(243, 243, 243, 0.24) !important;
    }
  }

  html.dark .mac-finder-mode,
  html.dark .mac-window,
  html.dark .mac-window-content,
  html.dark .mac-safari-window,
  html.dark .mac-safari-content {
    color: #f3f3f3 !important;
    --text: #f3f3f3;
    --black: #f3f3f3;
    --gray: rgba(243, 243, 243, 0.72);
    --text-muted: rgba(243, 243, 243, 0.72);
  }

  html.dark .mac-window-content :where(h1, h2, h3, h4, h5, h6, p, span, small, strong, em, li, a, button, label, figcaption, div),
  html.dark .mac-menu-bar :where(span, button) {
    color: #f3f3f3 !important;
    -webkit-text-fill-color: #f3f3f3 !important;
  }

  html.dark .mac-safari-content :where(h1, h2, h3, h4, h5, h6, p, span, small, strong, em, li, a, button, label, figcaption, div) {
    color: #f3f3f3 !important;
  }

  html.dark .mac-window-content :where(.portfolio-problem, .portfolio-description, .work-card-copy, .cs-text, .cs-meta-value, .stat-label, .company-role, .company-period, .footer-copy, .footer-meta-inline),
  html.dark .mac-safari-content :where(.portfolio-problem, .portfolio-description, .work-card-copy, .cs-text, .cs-meta-value, .stat-label, .company-role, .company-period, .footer-copy, .footer-meta-inline) {
    color: rgba(243, 243, 243, 0.72) !important;
  }

  html.dark .mac-window-content :where(.portfolio-problem, .portfolio-description, .work-card-copy, .cs-text, .cs-meta-value, .stat-label, .company-role, .company-period, .footer-copy, .footer-meta-inline) {
    -webkit-text-fill-color: rgba(243, 243, 243, 0.72) !important;
  }

  .mac-safari-window .mac-safari-content .mac-safari-big-name text,
  .mac-safari-window .mac-safari-content .mac-safari-big-name tspan,
  html.dark .mac-safari-window .mac-safari-content .mac-safari-big-name text,
  html.dark .mac-safari-window .mac-safari-content .mac-safari-big-name tspan {
    -webkit-text-fill-color: unset !important;
  }

  html.dark .mac-window-content :where(.cs-band, .cs-insight-card, .cs-design-card, .cs-problem-card, .cs-goal-item, .cs-results, .cs-impact-grid, .cs-compare-table, .cs-feature-item, .cs-reflection),
  html.dark .mac-safari-content :where(.cs-band, .cs-insight-card, .cs-design-card, .cs-problem-card, .cs-goal-item, .cs-results, .cs-impact-grid, .cs-compare-table, .cs-feature-item, .cs-reflection) {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  html.dark .mac-window-content :where(.cs-problem-card-title, .cs-goal-text, .cs-feature-item, .cs-result-num, .cs-impact-delta, .cs-design-result, .cs-heading, .cs-hero-title),
  html.dark .mac-safari-content :where(.cs-problem-card-title, .cs-goal-text, .cs-feature-item, .cs-result-num, .cs-impact-delta, .cs-design-result, .cs-heading, .cs-hero-title) {
    color: #f3f3f3 !important;
    -webkit-text-fill-color: #f3f3f3 !important;
  }

  html.dark .mac-window-content :where(.cs-problem-card-text, .cs-goal-num, .cs-band-label, .cs-stat-label, .cs-design-text, .cs-impact-label, .cs-impact-from, .cs-compare-header, .cs-compare-cell, .cs-image-placeholder-label),
  html.dark .mac-safari-content :where(.cs-problem-card-text, .cs-goal-num, .cs-band-label, .cs-stat-label, .cs-design-text, .cs-impact-label, .cs-impact-from, .cs-compare-header, .cs-compare-cell, .cs-image-placeholder-label) {
    color: rgba(243, 243, 243, 0.72) !important;
    -webkit-text-fill-color: rgba(243, 243, 243, 0.72) !important;
  }

  html.dark .mac-window-content .cs-image-placeholder,
  html.dark .mac-safari-content .cs-image-placeholder {
    background: rgba(255, 255, 255, 0.08) !important;
  }

  html.dark .mac-window-content .resume-download-button,
  html.dark .mac-safari-content .resume-download-button {
    background: #f3f3f3 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #f3f3f3 !important;
  }

  html.dark .mac-window-content .work-tab,
  html.dark .mac-safari-content .work-tab {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #f3f3f3 !important;
    -webkit-text-fill-color: #f3f3f3 !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
  }

  html.dark .mac-window-content .work-tab.is-active,
  html.dark .mac-safari-content .work-tab.is-active {
    background: #f3f3f3 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #f3f3f3 !important;
  }

  html.dark .mac-window-content .contact-block,
  html.dark .mac-safari-content .contact-block {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  html.dark .mac-window-content .contact-block-highlight,
  html.dark .mac-safari-content .contact-block-highlight {
    background: rgba(255, 255, 255, 0.08) !important;
  }

  html.dark .mac-window-content .contact-label,
  html.dark .mac-safari-content .contact-label,
  html.dark .mac-window-content .contact-note,
  html.dark .mac-safari-content .contact-note {
    color: rgba(243, 243, 243, 0.72) !important;
    -webkit-text-fill-color: rgba(243, 243, 243, 0.72) !important;
  }

  html.dark .mac-window-content .contact-value,
  html.dark .mac-window-content .contact-value-static,
  html.dark .mac-safari-content .contact-value,
  html.dark .mac-safari-content .contact-value-static {
    color: #f3f3f3 !important;
    -webkit-text-fill-color: #f3f3f3 !important;
  }

  html.dark .mac-window-content .contact-chip,
  html.dark .mac-safari-content .contact-chip {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f3f3f3 !important;
    -webkit-text-fill-color: #f3f3f3 !important;
  }

  html.dark .mac-window-content .footer-link-button,
  html.dark .mac-safari-content .footer-link-button {
    color: #f3f3f3 !important;
    -webkit-text-fill-color: #f3f3f3 !important;
  }

  .mac-transform-toggle,
  html:not(.dark) .hero-transform-toggle,
  html.dark .hero-transform-toggle,
  html:not(.dark) .floating-transform-toggle,
  html.dark .floating-transform-toggle {
    position: relative;
    isolation: isolate;
    overflow: visible;
    min-width: 246px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 34px;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.1), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.1)),
      linear-gradient(180deg, #fff45a 0%, #f7e637 62%, #d6c81e 100%) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 -8px 0 rgba(119, 106, 0, 0.28),
      0 10px 0 #9e9316,
      0 18px 0 rgba(66, 56, 0, 0.18),
      0 28px 44px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
    transform: translateY(0);
    transition:
      transform 0.1s ease-out,
      box-shadow 0.1s ease-out,
      background 0.16s ease;
  }

  .mac-transform-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    width: auto;
    border-radius: 0;
    background:
      linear-gradient(90deg,
        transparent 0%,
        transparent 16%,
        rgba(255, 205, 24, 0.16) 28%,
        rgba(255, 251, 139, 0.88) 39%,
        rgba(255, 220, 34, 0.94) 46%,
        rgba(255, 255, 184, 0.9) 53%,
        rgba(255, 205, 24, 0.2) 66%,
        transparent 78%,
        transparent 100%);
    background-size: 230% 100%;
    background-position: 145% 0;
    mix-blend-mode: screen;
    opacity: 0.9;
    clip-path: inherit;
    animation: surpriseGoldSweep 2.35s cubic-bezier(0.45, 0, 0.2, 1) infinite;
    pointer-events: none;
  }

  .mac-transform-toggle {
    display: none !important;
  }

  .mac-transform-toggle::before,
  .mac-transform-label,
  .mac-transform-label::before,
  .mac-transform-label::after {
    transform-style: preserve-3d;
  }

  .mac-transform-toggle .mac-transform-label::before {
    display: none;
  }

  .mac-transform-toggle::after {
    content: none;
  }

  .mac-transform-toggle:hover,
  body.show-transform-fab:not(.mac-finder-active):not(.has-active-page) .floating-transform-toggle:hover {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.1), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.1)),
      linear-gradient(180deg, #fff767 0%, #f8e93e 62%, #d6c81e 100%) !important;
    transform: translateY(2px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      inset 0 -6px 0 rgba(119, 106, 0, 0.26),
      0 8px 0 #9e9316,
      0 15px 0 rgba(66, 56, 0, 0.16),
      0 22px 34px rgba(0, 0, 0, 0.24) !important;
  }

  .mac-transform-toggle.is-pressing,
  body.show-transform-fab:not(.mac-finder-active):not(.has-active-page) .floating-transform-toggle.is-pressing {
    transform: translateY(10px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.48),
      inset 0 -2px 0 rgba(119, 106, 0, 0.22),
      0 1px 0 #9e9316,
      0 5px 13px rgba(0, 0, 0, 0.16) !important;
  }

  .mac-transform-label {
    position: absolute;
    left: 49%;
    top: 45%;
    z-index: 1;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font: 500 18px/1 'Inter', sans-serif;
    letter-spacing: -0.02em;
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }

  .mac-transform-switch {
    display: none !important;
  }

  @keyframes surpriseGoldSweep {
    0%, 18% {
      background-position: 145% 0;
      opacity: 0;
    }
    28% {
      opacity: 1;
    }
    72% {
      opacity: 1;
    }
    100% {
      background-position: -145% 0;
      opacity: 0;
    }
  }

  .mac-welcome .mac-transform-toggle {
    width: 100%;
    margin-top: 20px;
  }

  .mac-mobile-settings {
    display: none;
  }

  @media (max-width: 768px) {
    .mac-finder-mode .mac-desktop,
    .mac-finder-mode .mac-welcome,
    .mac-finder-mode .mac-second-page-note {
      transform: translate3d(var(--mac-page-x, 0px), 0, 0) !important;
      will-change: transform;
    }

    .mac-transform-toggle,
    html:not(.dark) .hero-transform-toggle,
    html.dark .hero-transform-toggle,
    html:not(.dark) .floating-transform-toggle,
    html.dark .floating-transform-toggle {
      min-width: 190px;
      height: 46px;
      padding: 0 28px;
    }

    .mac-transform-label {
      font-size: 16px;
    }

    .mac-mobile-settings {
      position: absolute;
      inset: 0;
      z-index: 16;
      display: none;
      padding: calc(env(safe-area-inset-top) + 34px) 16px calc(env(safe-area-inset-bottom) + 28px);
      background: #efefed;
      color: #000000;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .mac-mobile-settings.is-open {
      display: block;
    }

    .mac-mobile-settings.is-dark {
      background: #0f0f10;
      color: #f3f3f3;
    }

    .mac-mobile-settings-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 24px;
    }

    .mac-mobile-settings-header h2 {
      font: 700 32px/1 'Inter', sans-serif;
      letter-spacing: -0.055em;
    }

    .mac-mobile-settings-close {
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 999px;
      background: #000000;
      color: #ffffff;
      font: 300 22px/1 'Inter', sans-serif;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      flex: 0 0 auto;
    }

    .mac-mobile-settings-close .page-close-icon {
      width: 14px;
      height: 14px;
      flex: 0 0 14px;
    }

    .mac-mobile-settings-close .page-close-icon::before,
    .mac-mobile-settings-close .page-close-icon::after {
      width: 12px;
      height: 1.5px;
    }

    .mac-mobile-settings.is-dark .mac-mobile-settings-close {
      background: #ffffff;
      color: #000000;
    }

    .mac-mobile-settings-profile,
    .mac-mobile-settings-card {
      width: 100%;
      border-radius: 34px;
      background: rgba(255,255,255,0.96);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
    }

    .mac-mobile-settings-profile {
      display: flex;
      align-items: center;
      gap: 24px;
      min-height: 84px;
      padding: 12px 18px;
      margin-bottom: 24px;
    }

    .mac-mobile-settings-card {
      min-height: 63vh;
      padding: 12px 18px;
    }

    .mac-mobile-settings.is-dark .mac-mobile-settings-profile,
    .mac-mobile-settings.is-dark .mac-mobile-settings-card {
      background: rgba(28,28,30,0.96);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    }

    .mac-mobile-settings-avatar {
      width: 60px;
      height: 60px;
      flex: 0 0 auto;
      border-radius: 999px;
      overflow: hidden;
      border: 2px solid rgba(0,0,0,0.08);
      background: #f8f8f8;
    }

    .mac-mobile-settings-avatar img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .mac-mobile-settings-profile-copy {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .mac-mobile-settings-profile-copy strong {
      font: 700 24px/1.05 'Inter', sans-serif;
      letter-spacing: -0.03em;
      color: inherit;
    }

    .mac-mobile-settings-profile-copy span {
      font: 400 14px/1.2 'Inter', sans-serif;
      color: inherit;
      opacity: 0.86;
    }

    .mac-mobile-settings-row {
      width: 100%;
      border: none;
      background: transparent;
      color: inherit;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px 0;
      text-align: left;
    }

    .mac-mobile-settings-row-icon {
      width: 42px;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      color: #000000;
    }

    .mac-mobile-settings.is-dark .mac-mobile-settings-row-icon {
      color: #f3f3f3;
    }

    .mac-mobile-settings-sun-icon {
      display: block;
      width: 28px;
      height: 28px;
      opacity: 1;
      transform: none;
    }

    .mac-mobile-settings-row-icon--switch img {
      display: block;
      width: 28px;
      height: 28px;
      object-fit: contain;
      filter: brightness(0);
    }

    .mac-mobile-settings.is-dark .mac-mobile-settings-row-icon--switch img {
      filter: none;
    }

    .mac-mobile-settings-row-label {
      flex: 1 1 auto;
      min-width: 0;
      font: 500 16px/1.2 'Inter', sans-serif;
      letter-spacing: -0.02em;
      color: inherit;
    }

    .mac-mobile-settings-divider {
      height: 1px;
      margin: 0 0 0 58px;
      background: rgba(0,0,0,0.09);
    }

    .mac-mobile-settings.is-dark .mac-mobile-settings-divider {
      background: rgba(255,255,255,0.14);
    }

    .mac-mobile-settings-switch {
      width: 41px;
      height: 23px;
      border-radius: 999px;
      background: #d1d1d6;
      position: relative;
      flex: 0 0 auto;
      transition: background 0.2s ease;
    }

    .mac-mobile-settings-switch span {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 19px;
      height: 19px;
      border-radius: 999px;
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
      transition: transform 0.2s ease;
    }

    .mac-mobile-settings-switch.is-on {
      background: #34c759;
    }

    .mac-mobile-settings-switch.is-on span {
      transform: translateX(18px);
    }

  }

  @media (min-width: 769px) {
    .mac-finder-mode {
      transform-origin: 50% 50%;
      transform: scaleY(0.01) scaleX(0.72);
      filter: brightness(1.35);
    }

    body.mac-finder-active .mac-finder-mode {
      transform: scaleY(1) scaleX(1);
      filter: none;
    }

    body.mac-finder-opening.mac-finder-active .mac-finder-mode.tv-open {
      animation: finderTvOpen 920ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    body.mac-finder-closing .mac-finder-mode {
      opacity: 1;
      visibility: visible;
      pointer-events: none;
      animation: finderTvClose 820ms cubic-bezier(0.7, 0, 0.84, 0) both;
    }

    body.mac-finder-closing .mac-finder-mode::before {
      background:
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.04) 38%, transparent 68%),
        linear-gradient(180deg, rgba(0,0,0,0.14), transparent 24%, rgba(0,0,0,0.12));
    }
  }

  @keyframes finderTvOpen {
    0% {
      opacity: 0;
      transform: scaleY(0.01) scaleX(0.54);
      filter: brightness(2.4) blur(2px);
    }
    18% {
      opacity: 1;
      transform: scaleY(0.035) scaleX(0.86);
      filter: brightness(2.05) blur(1px);
    }
    54% {
      transform: scaleY(1.035) scaleX(1);
      filter: brightness(1.12) blur(0);
    }
    100% {
      opacity: 1;
      transform: scaleY(1) scaleX(1);
      filter: brightness(1) blur(0);
    }
  }

  @keyframes finderTvClose {
    0% {
      opacity: 1;
      transform: scaleY(1) scaleX(1);
      filter: brightness(1) blur(0);
    }
    56% {
      opacity: 1;
      transform: scaleY(0.035) scaleX(0.86);
      filter: brightness(2.2) blur(1px);
    }
    100% {
      opacity: 0;
      transform: scaleY(0.002) scaleX(0.42);
      filter: brightness(3) blur(2px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.mac-finder-opening.mac-finder-active .mac-finder-mode.tv-open,
    body.mac-finder-closing .mac-finder-mode {
      animation: none;
      transform: none;
      filter: none;
    }
  }

  @media (max-width: 768px) {
    body.mac-finder-active:not(.mac-finder-booting) .mac-finder-mode > :not(.mac-app-splash) {
      opacity: 1;
      visibility: visible;
      transform: scale(1);
      transition: opacity 0.46s ease, visibility 0.46s ease, transform 0.46s ease;
    }

    body.mac-finder-active:not(.mac-finder-booting) .mac-finder-mode .mac-mobile-scroll-pages {
      opacity: 0.01;
    }

    body.mac-finder-booting .mac-finder-mode::before {
      z-index: 19;
      background: #000000;
      opacity: 1;
    }

    body.mac-finder-mobile-closing .mac-finder-mode {
      opacity: 1;
      visibility: visible;
      pointer-events: none;
      animation: mobileFinderForceClose 720ms cubic-bezier(0.32, 0, 0.67, 0) both;
      transform-origin: 50% 0;
    }
  }

  body.mac-finder-booting .mac-finder-mode > :not(.mac-boot-loader):not(.mac-app-splash) {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.985);
    transition: opacity 0.34s ease, visibility 0.34s ease, transform 0.34s ease;
  }

  body.mac-finder-booting .mac-finder-mode {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1) scaleX(1);
    filter: none;
  }

  body.mac-finder-booting .mac-finder-mode::before {
    z-index: 19;
    background: #000000;
    opacity: 1;
  }

  .mac-boot-loader {
    position: absolute;
    inset: 0;
    z-index: 21;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    background: #000000;
    pointer-events: none;
  }

  body.mac-finder-booting .mac-boot-loader {
    display: flex;
  }

  .mac-boot-text {
    font: 500 14px/1 'Inter', sans-serif;
    letter-spacing: 0.04em;
    color: #39ff14;
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.72), 0 0 28px rgba(57, 255, 20, 0.36);
  }

  .mac-boot-bar {
    width: min(46vw, 180px);
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(57, 255, 20, 0.18);
    box-shadow: 0 0 18px rgba(57, 255, 20, 0.24);
  }

  .mac-boot-bar span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #39ff14;
    box-shadow: 0 0 16px rgba(57, 255, 20, 0.72);
    transform-origin: left center;
    animation: bootLoaderFill 2.5s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  @keyframes mobileFinderBootIn {
    0% {
      opacity: 0;
      transform: scale(0.96);
      filter: blur(8px) brightness(0.7);
    }
    62% {
      opacity: 1;
      transform: scale(1.012);
      filter: blur(0) brightness(1.08);
    }
    100% {
      opacity: 1;
      transform: scale(1);
      filter: blur(0) brightness(1);
    }
  }

  @keyframes mobileFinderForceClose {
    0% {
      opacity: 1;
      border-radius: 0;
      transform: scale(1);
      filter: blur(0) brightness(1);
    }
    58% {
      opacity: 0.72;
      border-radius: 34px;
      transform: scale(0.22) translateY(-72px);
      filter: blur(1px) brightness(0.95);
    }
    100% {
      opacity: 0;
      border-radius: 48px;
      transform: scale(0.04) translateY(-220px);
      filter: blur(8px) brightness(0.58);
    }
  }

  @keyframes bootLoaderFill {
    0% {
      transform: scaleX(0);
    }
    100% {
      transform: scaleX(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.mac-finder-active .mac-finder-mode,
    body.mac-finder-mobile-closing .mac-finder-mode,
    body.mac-finder-booting .mac-boot-bar span,
    .site-loader-bar span {
      animation: none;
      transform: none;
      filter: none;
    }
  }

  @media (min-width: 769px) {
  .floating-transform-toggle,
  html:not(.dark) .floating-transform-toggle,
  html.dark .floating-transform-toggle {
    position: fixed !important;
    right: 24px !important;
    bottom: calc(env(safe-area-inset-bottom) + 24px) !important;
    z-index: 80;
    min-width: 150px;
    height: 46px;
    padding: 0 22px;
    border: 1px solid rgba(255, 217, 88, 0.38) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(135deg, rgba(255, 230, 118, 0.44), rgba(164, 113, 10, 0.18)),
      rgba(255, 255, 255, 0.14) !important;
    clip-path: none;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.52),
      inset 0 -1px 0 rgba(116, 76, 0, 0.18),
      0 18px 44px rgba(98, 66, 0, 0.22) !important;
    backdrop-filter: blur(18px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(170%) !important;
  }

  .floating-transform-toggle::before {
    border-radius: inherit;
    clip-path: none;
    background:
      linear-gradient(100deg,
        transparent 0%,
        rgba(255, 219, 80, 0.08) 28%,
        rgba(255, 246, 168, 0.58) 46%,
        rgba(255, 201, 54, 0.2) 64%,
        transparent 100%);
    background-size: 220% 100%;
    mix-blend-mode: screen;
  }

  .floating-transform-toggle .mac-transform-label {
    left: 50%;
    top: 50%;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
  }

  html.dark .floating-transform-toggle {
    color: #f8f0c8 !important;
    -webkit-text-fill-color: #f8f0c8 !important;
    background:
      linear-gradient(135deg, rgba(255, 207, 74, 0.26), rgba(93, 62, 0, 0.28)),
      rgba(20, 20, 20, 0.42) !important;
    border-color: rgba(255, 214, 88, 0.3) !important;
  }

  html.dark .floating-transform-toggle .mac-transform-label {
    color: #f8f0c8 !important;
    -webkit-text-fill-color: #f8f0c8 !important;
  }

  body.show-transform-fab:not(.mac-finder-active):not(.has-active-page) .floating-transform-toggle:hover {
    transform: translateY(-2px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.62),
      inset 0 -1px 0 rgba(116, 76, 0, 0.18),
      0 22px 52px rgba(98, 66, 0, 0.28) !important;
  }

  .floating-transform-toggle.is-pressing,
  body.show-transform-fab:not(.mac-finder-active):not(.has-active-page) .floating-transform-toggle.is-pressing {
    transform: translateY(2px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.42),
      0 10px 28px rgba(98, 66, 0, 0.2) !important;
  }
  }

  @media (max-width: 768px) {
    .floating-transform-toggle,
    html:not(.dark) .floating-transform-toggle,
    html.dark .floating-transform-toggle {
      right: 16px !important;
      bottom: calc(env(safe-area-inset-bottom) + 18px) !important;
      min-width: 138px;
      height: 44px;
      padding: 0 18px;
    }
  }