@font-face {
        font-family: "Helvetica Regular";
        src:
          url("../assets/fonts/helvetica-regular.woff2") format("woff2"),
          url("../assets/fonts/helvetica-regular.woff") format("woff");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }

      :root {
        --bg: #090807;
        --bg-soft: #0f0d0b;
        --surface: rgba(26, 22, 18, 0.72);
        --text: #f5ead9;
        --muted: #aaa095;
        --muted-strong: #d2c5b5;
        --amber: #ee9f3a;
        --amber-soft: #c87926;
        --line: rgba(245, 234, 217, 0.14);
        --container: 1240px;
        --radius: 28px;
        --hero-progress: 0;
        --hero-copy-y: 0px;
        --hero-copy-opacity: 1;
        color-scheme: dark;
        font-family: "Helvetica Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-synthesis: none;
        text-rendering: optimizeLegibility;
      }

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

      html {
        min-width: 320px;
        scroll-behavior: smooth;
        background: var(--bg);
      }

      body {
        min-width: 320px;
        min-height: 100vh;
        margin: 0;
        overflow-x: hidden;
        background:
          radial-gradient(circle at 88% 16%, rgba(238, 159, 58, 0.07), transparent 28rem),
          var(--bg);
        color: var(--text);
      }

      body.menu-open {
        overflow: hidden;
      }

      ::selection {
        background: rgba(238, 159, 58, 0.28);
        color: #fff9ef;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      button,
      a {
        -webkit-tap-highlight-color: transparent;
      }

      button {
        font: inherit;
      }

      img,
      video,
      svg {
        display: block;
        max-width: 100%;
      }

      .skip-link {
        position: fixed;
        top: 1rem;
        left: 1rem;
        z-index: 100;
        transform: translateY(-180%);
        border-radius: 999px;
        padding: 0.8rem 1.1rem;
        background: var(--text);
        color: var(--bg);
        font-size: 0.78rem;
        font-weight: 700;
        transition: transform 180ms ease;
      }

      .skip-link:focus {
        transform: translateY(0);
      }

      :focus-visible {
        outline: 2px solid var(--amber);
        outline-offset: 5px;
      }

      .container {
        width: min(calc(100% - 3rem), var(--container));
        margin-inline: auto;
      }

      .liquid-glass {
        position: relative;
        overflow: hidden;
        border: none;
        background: rgba(255, 255, 255, 0.025);
        background-blend-mode: luminosity;
        box-shadow:
          inset 0 1px 1px rgba(255, 255, 255, 0.13),
          0 22px 70px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(8px) saturate(112%);
        -webkit-backdrop-filter: blur(8px) saturate(112%);
      }

      .liquid-glass::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        border-radius: inherit;
        padding: 1.3px;
        background: linear-gradient(
          180deg,
          rgba(255, 245, 230, 0.58) 0%,
          rgba(255, 224, 190, 0.2) 20%,
          rgba(255, 255, 255, 0) 42%,
          rgba(255, 255, 255, 0) 60%,
          rgba(238, 159, 58, 0.2) 82%,
          rgba(255, 226, 194, 0.5) 100%
        );
        -webkit-mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
      }

      .site-header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 50;
        width: 100%;
        padding: max(1.25rem, env(safe-area-inset-top, 1.25rem)) 0 1.25rem;
        pointer-events: none;
      }

      .nav-shell {
        width: min(calc(100% - 3rem), var(--container));
        display: flex;
        min-height: 66px;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        border-radius: 22px;
        padding: 0 1.35rem 0 1.5rem;
        pointer-events: auto;
        transition:
          background-color 300ms ease,
          transform 300ms ease;
      }

      .site-header.is-scrolled .nav-shell {
        background: rgba(12, 10, 8, 0.62);
      }

      .wordmark {
        display: inline-flex;
        align-items: center;
        color: #fff8ec;
        font-family: "Helvetica Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: clamp(0.7rem, 1.2vw, 0.78rem);
        font-weight: 700;
        letter-spacing: 0.12em;
        white-space: nowrap;
      }

      .wordmark::before {
        width: 6px;
        height: 6px;
        flex: 0 0 auto;
        margin-right: 0.8rem;
        border-radius: 50%;
        background: var(--amber);
        box-shadow: 0 0 12px rgba(238, 159, 58, 0.48);
        content: "";
      }

      .primary-nav {
        display: flex;
        align-items: center;
        gap: clamp(2rem, 3.2vw, 3rem);
      }

      .primary-nav a {
        position: relative;
        padding: 0.65rem 0;
        color: rgba(255, 248, 236, 0.76);
        font-size: 0.75rem;
        letter-spacing: 0.035em;
        transition: color 180ms ease;
      }

      .primary-nav a::after {
        position: absolute;
        right: 0;
        bottom: 0.38rem;
        left: 0;
        height: 1px;
        transform: scaleX(0);
        transform-origin: right;
        background: var(--amber);
        content: "";
        transition: transform 220ms ease;
      }

      .primary-nav a:hover,
      .primary-nav a:focus-visible {
        color: #fff8ec;
      }

      .primary-nav a:hover::after,
      .primary-nav a:focus-visible::after {
        transform: scaleX(1);
        transform-origin: left;
      }

      .menu-toggle {
        display: none;
        width: 44px;
        height: 44px;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
        color: var(--text);
        cursor: pointer;
      }

      .menu-toggle span,
      .menu-toggle span::before,
      .menu-toggle span::after {
        display: block;
        width: 18px;
        height: 1px;
        background: currentColor;
        content: "";
        transition:
          transform 200ms ease,
          opacity 200ms ease;
      }

      .menu-toggle span {
        position: relative;
      }

      .menu-toggle span::before,
      .menu-toggle span::after {
        position: absolute;
        top: 0;
        left: 0;
      }

      .menu-toggle span::before {
        transform: translateY(-6px);
      }

      .menu-toggle span::after {
        transform: translateY(6px);
      }

      .menu-toggle[aria-expanded="true"] span {
        background: transparent;
      }

      .menu-toggle[aria-expanded="true"] span::before {
        transform: rotate(45deg);
      }

      .menu-toggle[aria-expanded="true"] span::after {
        transform: rotate(-45deg);
      }

      .scroll-hero {
        position: relative;
        height: 500vh;
        background: #050403;
      }

      .scroll-hero.is-static {
        height: 100svh;
      }

      .scroll-hero.is-reduced {
        height: 100svh;
      }

      .hero-sticky {
        position: sticky;
        top: 0;
        height: 100svh;
        min-height: 640px;
        overflow: hidden;
        background: #060504 url("../assets/hero-poster.jpg") center / cover no-repeat;
      }

      .scroll-hero.is-static .hero-sticky {
        position: relative;
      }

      .scroll-hero.is-reduced .hero-sticky {
        position: relative;
        min-height: 0;
      }

      .scroll-hero.is-static .scroll-meter {
        display: none;
      }

      .hero-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        opacity: 0;
        transition: opacity 600ms ease;
      }

      .scroll-hero.is-ready .hero-video {
        opacity: 1;
      }

      .scroll-hero.is-poster .hero-video,
      .scroll-hero.is-reduced .hero-video {
        opacity: 1;
      }

      .hero-sticky::before {
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
          linear-gradient(90deg, rgba(6, 5, 4, 0.64) 0%, rgba(6, 5, 4, 0.2) 37%, transparent 68%),
          radial-gradient(circle at 52% 42%, transparent 28%, rgba(5, 4, 3, 0.18) 100%);
        content: "";
        pointer-events: none;
      }

      .hero-sticky::after {
        position: absolute;
        inset: auto 0 0;
        z-index: 1;
        height: 52%;
        background: linear-gradient(180deg, transparent, rgba(9, 8, 7, 0.28) 58%, var(--bg));
        content: "";
        pointer-events: none;
      }

      .video-loading {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        background: var(--bg);
        color: var(--muted);
        font-size: 0.72rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        transition: opacity 350ms ease;
      }

      .scroll-hero.is-ready .video-loading {
        opacity: 0;
        pointer-events: none;
      }

      html:not(.js) .video-loading {
        display: none;
      }

      html:not(.js) .hero-video {
        opacity: 1;
      }

      .hero-content {
        position: absolute;
        right: 0;
        bottom: clamp(6.7rem, 10vh, 7.8rem);
        left: 0;
        z-index: 3;
        pointer-events: none;
      }

      .hero-content__inner {
        width: min(calc(100% - 3rem), var(--container));
      }

      .hero-copy {
        position: relative;
        display: block;
        width: 100%;
        transform: translate3d(0, var(--hero-copy-y), 0);
        opacity: var(--hero-copy-opacity);
        will-change: transform, opacity;
      }

      .hero-title-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.65rem;
      }

      .hero-title {
        max-width: none;
        margin: 0;
        color: #fff8ed;
        font-family: "Helvetica Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: clamp(5rem, 10.2vw, 9.35rem);
        font-weight: 400;
        letter-spacing: -0.082em;
        line-height: 0.78;
        text-transform: uppercase;
        text-shadow: 0 12px 50px rgba(0, 0, 0, 0.22);
        transform: scaleX(0.9);
        transform-origin: left center;
        white-space: nowrap;
      }

      .hero-subtitle-tag {
        margin: 0;
        color: #f7dfc0;
        font-family: "Helvetica Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: clamp(0.72rem, 1.25vw, 0.95rem);
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        opacity: 0.88;
        text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
      }

      .hero-subtitle-tag::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--amber);
        box-shadow: 0 0 10px rgba(238, 159, 58, 0.6);
      }

      .hero-action {
        position: absolute;
        right: 0;
        bottom: 0.55rem;
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: 0.85rem;
        min-width: 194px;
        justify-content: center;
        margin: 0;
        border: 1px solid rgba(238, 159, 58, 0.72);
        border-radius: 999px;
        padding: 1rem 1.35rem;
        background: rgba(12, 10, 8, 0.28);
        color: #ffe0b6;
        font-size: 0.75rem;
        letter-spacing: 0.025em;
        pointer-events: auto;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition:
          background-color 200ms ease,
          color 200ms ease,
          transform 200ms ease;
      }

      .hero-action svg {
        width: 17px;
        transition: transform 200ms ease;
      }

      .hero-action:hover {
        transform: translateY(-2px);
        background: var(--amber);
        color: #160f08;
      }

      .hero-action:hover svg {
        transform: translateX(3px);
      }

      .chapter-float {
        --chapter-opacity: 0;
        --chapter-y: 28px;
        --chapter-scale: 0.98;
        position: absolute;
        bottom: clamp(7.5rem, 15vh, 10.5rem);
        left: max(7.5vw, calc((100vw - var(--container)) / 2));
        z-index: 4;
        display: flex;
        max-width: min(88vw, 760px);
        transform: translate3d(0, var(--chapter-y), 0) scale(var(--chapter-scale));
        transform-origin: left center;
        align-items: center;
        gap: clamp(1.1rem, 2.4vw, 2.2rem);
        opacity: var(--chapter-opacity);
        pointer-events: auto;
        cursor: pointer;
        will-change: transform, opacity;
        transition: filter 0.25s ease;
      }

      .chapter-float:hover .chapter-float__title {
        color: var(--amber);
        text-shadow: 0 0 26px rgba(238, 159, 58, 0.55);
      }

      .chapter-float:hover .chapter-float__media {
        border-color: rgba(238, 159, 58, 0.85);
        box-shadow: 0 16px 42px rgba(0, 0, 0, 0.65), 0 0 22px rgba(238, 159, 58, 0.4);
        transform: scale(1.03);
      }

      .chapter-float__text {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
      }

      .chapter-float__title {
        margin: 0;
        color: #fff8ed;
        font-family: "Helvetica Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: clamp(2rem, 3.4vw, 3.4rem);
        font-weight: 400;
        letter-spacing: -0.055em;
        line-height: 0.9;
        text-shadow: 0 12px 44px rgba(0, 0, 0, 0.6);
        text-transform: uppercase;
        white-space: nowrap;
      }

      .chapter-float__sub {
        margin: 0;
        font-size: clamp(0.72rem, 1vw, 0.85rem);
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(245, 234, 217, 0.78);
        text-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
        white-space: nowrap;
      }

      .chapter-float__media {
        position: relative;
        width: clamp(160px, 14.5vw, 215px);
        aspect-ratio: 16 / 10;
        flex: 0 0 auto;
        border: 1px solid rgba(255, 240, 218, 0.35);
        border-radius: 12px;
        overflow: hidden;
        background: rgba(10, 15, 26, 0.85);
        box-shadow: 0 16px 42px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(245, 234, 217, 0.12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }

      .chapter-float__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        transition: opacity 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
      }

      .chapter-float__image--prev {
        opacity: 0;
        transform: scale(1.04);
        pointer-events: none;
      }

      .chapter-float__badge {
        position: absolute;
        bottom: 7px;
        right: 7px;
        z-index: 2;
        padding: 0.22rem 0.55rem;
        background: rgba(8, 12, 20, 0.82);
        border: 1px solid rgba(245, 234, 217, 0.25);
        border-radius: 999px;
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: #fff8ed;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
      }

      .chapter-float__bar {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2.5px;
        width: 0%;
        background: linear-gradient(90deg, #d4a373, #f5ead9);
        z-index: 3;
        transition: width 0.12s linear;
      }

      .scroll-meter {
        position: absolute;
        top: 50%;
        left: clamp(1.1rem, 3vw, 3.4rem);
        z-index: 3;
        display: flex;
        height: min(42vh, 330px);
        transform: translateY(-42%);
        align-items: flex-start;
        gap: 0.75rem;
        color: rgba(255, 248, 236, 0.58);
        pointer-events: none;
      }

      .scroll-meter__track {
        position: relative;
        width: 1px;
        height: 100%;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.28);
      }

      .scroll-meter__fill {
        position: absolute;
        inset: 0 0 auto;
        height: calc(var(--hero-progress) * 100%);
        background: var(--amber);
        box-shadow: 0 0 14px rgba(238, 159, 58, 0.6);
      }

      .scroll-meter__value {
        margin-top: -0.25rem;
        font-size: 0.62rem;
        letter-spacing: 0.13em;
        writing-mode: vertical-rl;
      }

      .scroll-cue {
        position: absolute;
        bottom: 1.35rem;
        left: 50%;
        z-index: 3;
        display: grid;
        transform: translateX(-50%);
        place-items: center;
        gap: 0.65rem;
        color: rgba(255, 219, 172, 0.72);
        font-size: 0.58rem;
        letter-spacing: 0.28em;
        text-align: center;
        text-transform: uppercase;
        opacity: var(--hero-copy-opacity);
        pointer-events: none;
        transition: opacity 120ms linear;
      }

      .scroll-cue svg {
        width: 21px;
        animation: cue 1.8s ease-in-out infinite;
      }

      @keyframes cue {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(6px);
        }
      }

      .content-shell {
        position: relative;
        z-index: 4;
        background: var(--bg);
        overflow: hidden;
      }

      /* Ambient Aurora & Tech Mesh Background Layers */
      .body-ambient-glows {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
        opacity: var(--bg-glow-opacity, 0.9);
        transition: opacity 0.4s ease;
      }

      .glow-node {
        position: absolute;
        border-radius: 50%;
        filter: blur(85px);
        transform: translate3d(0, 0, 0);
        will-change: transform;
        pointer-events: none;
      }

      .glow-node--amber-1 {
        top: 2%;
        right: -6vw;
        width: clamp(350px, 45vw, 680px);
        height: clamp(350px, 45vw, 680px);
        background: radial-gradient(circle, rgba(238, 159, 58, 0.16) 0%, rgba(238, 159, 58, 0) 70%);
      }

      .glow-node--blue-1 {
        top: 22%;
        left: -8vw;
        width: clamp(400px, 50vw, 750px);
        height: clamp(400px, 50vw, 750px);
        background: radial-gradient(circle, rgba(40, 85, 175, 0.14) 0%, rgba(40, 85, 175, 0) 70%);
      }

      .glow-node--amber-2 {
        top: 44%;
        right: -6vw;
        width: clamp(380px, 46vw, 720px);
        height: clamp(380px, 46vw, 720px);
        background: radial-gradient(circle, rgba(238, 159, 58, 0.13) 0%, rgba(238, 159, 58, 0) 70%);
      }

      .glow-node--gold-3 {
        top: 68%;
        left: -6vw;
        width: clamp(420px, 50vw, 820px);
        height: clamp(420px, 50vw, 820px);
        background: radial-gradient(circle, rgba(212, 163, 115, 0.13) 0%, rgba(212, 163, 115, 0) 70%);
      }

      .glow-node--amber-4 {
        bottom: 1%;
        right: 12vw;
        width: clamp(400px, 48vw, 750px);
        height: clamp(400px, 48vw, 750px);
        background: radial-gradient(circle, rgba(238, 159, 58, 0.15) 0%, rgba(238, 159, 58, 0) 70%);
      }

      /* Cybernetic Dot-Matrix Grid */
      .body-tech-grid {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        background-image: radial-gradient(rgba(245, 234, 217, 0.08) 1px, transparent 1px);
        background-size: 34px 34px;
        mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, #000 65%, transparent 100%);
        -webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, #000 65%, transparent 100%);
        opacity: var(--bg-grid-opacity, 1);
        transition: opacity 0.4s ease;
      }

      .section {
        position: relative;
        z-index: 2;
        padding: clamp(6rem, 12vw, 11rem) 0;
        content-visibility: auto;
        contain-intrinsic-size: 900px;
      }

      .section + .section {
        border-top: 1px solid rgba(245, 234, 217, 0.06);
      }

      .section-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 2rem;
        margin-bottom: clamp(4rem, 8vw, 7rem);
      }

      .section-index {
        display: inline-flex;
        align-items: center;
        gap: 0.8rem;
        margin-bottom: 1.4rem;
        color: var(--amber);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.18em;
      }

      .section-index::after {
        width: 60px;
        height: 1px;
        background: var(--amber-soft);
        content: "";
      }

      .section-title {
        margin: 0;
        color: var(--text);
        font-size: clamp(3.2rem, 7vw, 6.8rem);
        font-weight: 400;
        letter-spacing: -0.055em;
        line-height: 0.94;
      }

      .section-note {
        max-width: 25rem;
        margin: 0 0 0.45rem;
        color: var(--muted);
        font-size: 0.92rem;
        line-height: 1.7;
      }

      .project-list {
        display: grid;
        gap: clamp(5rem, 10vw, 9rem);
      }

      .project {
        display: grid;
        grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
        align-items: center;
        gap: clamp(2rem, 5vw, 4.5rem);
      }

      .project:nth-child(even) {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
      }

      .project:nth-child(even) .project-meta {
        order: 2;
      }

      .project-number {
        display: block;
        color: var(--text);
        font-size: clamp(3.8rem, 7vw, 6.5rem);
        font-weight: 300;
        letter-spacing: -0.075em;
        line-height: 0.85;
      }

      .project-label {
        display: block;
        margin-bottom: 0.75rem;
        color: var(--amber);
        font-size: 0.64rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
      }

      .project-name {
        margin: 1.4rem 0 0;
        padding-top: 1.1rem;
        border-top: 1px solid rgba(238, 159, 58, 0.48);
        color: var(--muted-strong);
        font-size: 0.78rem;
        letter-spacing: 0.19em;
        line-height: 1.6;
        text-transform: uppercase;
      }

      .project-title-real {
        margin: 0.75rem 0 0.35rem;
        color: #fff;
        font-size: clamp(1.6rem, 2.2vw, 2.1rem);
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 1.18;
      }

      .project-subtitle {
        margin: 0 0 1.1rem;
        color: var(--amber);
        font-size: 0.76rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .project-description {
        margin: 0 0 1.35rem;
        color: var(--muted-strong);
        font-size: 0.88rem;
        line-height: 1.65;
      }

      .project-impact-metrics {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        margin: 0.2rem 0 1.25rem 0;
        padding: 0.7rem 0.95rem;
        border-radius: 10px;
        background: rgba(238, 159, 58, 0.05);
        border: 1px solid rgba(238, 159, 58, 0.22);
      }

      .impact-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: #fff9ef;
        font-size: 0.74rem;
        font-weight: 500;
        line-height: 1.4;
      }

      .project-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
        margin-bottom: 1.5rem;
      }

      .project-tag {
        display: inline-flex;
        align-items: center;
        padding: 0.3rem 0.7rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(245, 234, 217, 0.12);
        color: var(--muted-strong);
        font-size: 0.68rem;
        font-weight: 500;
        letter-spacing: 0.03em;
      }

      .project-link-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.72rem 1.35rem;
        border-radius: 999px;
        background: rgba(238, 159, 58, 0.12);
        border: 1px solid rgba(238, 159, 58, 0.5);
        color: var(--amber);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        transition: all 220ms ease;
        width: fit-content;
      }

      .project-link-btn svg {
        width: 15px;
        height: 15px;
        transition: transform 200ms ease;
      }

      .project-link-btn:hover {
        background: var(--amber);
        color: #110e0a;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(238, 159, 58, 0.3);
      }

      .project-link-btn:hover svg {
        transform: translate(2px, -2px);
      }

      .project-gallery-shell {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: var(--radius);
        isolation: isolate;
        transition:
          transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
          box-shadow 450ms ease;
        background: rgba(18, 15, 12, 0.88);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
      }

      .project:hover .project-gallery-shell {
        transform: translateY(-6px);
        box-shadow: 0 32px 90px rgba(0, 0, 0, 0.55);
      }

      .project-gallery-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.85rem 1.35rem;
        border-bottom: 1px solid rgba(245, 234, 217, 0.08);
        background: rgba(10, 8, 6, 0.65);
      }

      .window-dots {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .window-dots .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
      }

      .dot--red { background: #ff5f56; }
      .dot--yellow { background: #ffbd2e; }
      .dot--green { background: #27c93f; }

      .browser-address {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.3rem 0.9rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: var(--muted);
        font-size: 0.72rem;
        letter-spacing: 0.04em;
      }

      .browser-address .lock-icon {
        width: 11px;
        height: 11px;
        color: var(--amber);
      }

      .view-indicator {
        color: var(--amber);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.1em;
      }

      .project-gallery-viewport {
        position: relative;
        width: 100%;
        background: #080605;
        overflow: hidden;
      }

      .project-slide {
        display: none;
        margin: 0;
        padding: 0;
        opacity: 0;
        transition: opacity 300ms ease;
      }

      .project-slide.is-active {
        display: block;
        opacity: 1;
      }

      .project-slide img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        max-height: 490px;
      }

      .slide-caption {
        padding: 0.85rem 1.35rem;
        background: rgba(14, 11, 9, 0.94);
        border-top: 1px solid rgba(245, 234, 217, 0.08);
        color: var(--muted-strong);
        font-size: 0.8rem;
        line-height: 1.5;
      }

      .slide-caption strong {
        color: #fff;
        font-weight: 600;
      }

      .project-gallery-controls {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        background: rgba(245, 234, 217, 0.08);
        border-top: 1px solid rgba(245, 234, 217, 0.08);
      }

      .gallery-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        padding: 0.75rem 0.5rem;
        background: rgba(14, 12, 10, 0.95);
        border: 0;
        color: var(--muted);
        cursor: pointer;
        transition: all 180ms ease;
        text-align: center;
      }

      .gallery-tab:hover {
        background: rgba(26, 22, 18, 0.95);
        color: var(--text);
      }

      .gallery-tab.is-active {
        background: rgba(238, 159, 58, 0.12);
        color: #fff;
        box-shadow: inset 0 2px 0 var(--amber);
      }

      .gallery-tab.is-active .tab-num {
        color: var(--amber);
      }

      .tab-num {
        font-size: 0.64rem;
        font-weight: 700;
        letter-spacing: 0.1em;
      }

      .tab-name {
        font-size: 0.72rem;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }

      .project-media {
        position: relative;
        display: grid;
        min-height: clamp(310px, 42vw, 520px);
        overflow: hidden;
        border-radius: var(--radius);
        place-items: center;
        isolation: isolate;
        transition:
          transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
          box-shadow 450ms ease;
      }

      .project-media::after {
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
          linear-gradient(135deg, transparent 0 55%, rgba(238, 159, 58, 0.08)),
          linear-gradient(160deg, #17130f, #0d0b09 54%, #1e140c);
        content: "";
      }

      .project-atmosphere {
        position: absolute;
        right: -5%;
        bottom: -18%;
        z-index: -1;
        width: 60%;
        height: 70%;
        transform: translate3d(0, var(--parallax-y, 0px), 0);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(238, 159, 58, 0.24), transparent 66%);
        filter: blur(26px);
        will-change: transform;
      }

      .project-placeholder {
        display: grid;
        place-items: center;
        gap: 1rem;
        color: rgba(255, 219, 172, 0.58);
        text-align: center;
      }

      .project-placeholder svg {
        width: 54px;
        stroke-width: 1;
      }

      .project-placeholder span {
        font-size: 0.62rem;
        letter-spacing: 0.24em;
        text-transform: uppercase;
      }

      .project:hover .project-media {
        transform: translateY(-8px);
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.36);
      }

      /* Lightbox Modal para Zoom de Imágenes */
      .lightbox-modal {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: clamp(1rem, 4vw, 3rem);
        background: rgba(4, 3, 2, 0.94);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 280ms ease, visibility 280ms ease;
        cursor: zoom-out;
      }

      .lightbox-modal.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      .lightbox-container {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 95vw;
        max-height: 94vh;
        transform: scale(0.94);
        transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
        cursor: default;
      }

      .lightbox-modal.is-open .lightbox-container {
        transform: scale(1);
      }

      .lightbox-img-wrapper {
        position: relative;
        overflow: hidden;
        border-radius: 14px;
        border: 1px solid rgba(245, 234, 217, 0.16);
        box-shadow: 0 36px 110px rgba(0, 0, 0, 0.85);
        background: #0d0b09;
        max-height: 78vh;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: zoom-out;
      }

      .lightbox-img {
        max-width: 100%;
        max-height: 78vh;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
      }

      .lightbox-caption {
        margin: 1rem 0 0.4rem;
        padding: 0.65rem 1.4rem;
        border-radius: 999px;
        background: rgba(18, 15, 12, 0.9);
        border: 1px solid rgba(238, 159, 58, 0.35);
        color: #fff8ec;
        font-size: 0.82rem;
        text-align: center;
        backdrop-filter: blur(12px);
        max-width: min(90vw, 750px);
        line-height: 1.45;
      }

      .lightbox-hint {
        color: var(--muted);
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-top: 0.3rem;
      }

      .lightbox-close-btn {
        position: absolute;
        top: -14px;
        right: -14px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--amber);
        color: #0b0907;
        border: none;
        display: grid;
        place-items: center;
        font-size: 1.3rem;
        line-height: 1;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
        transition: transform 180ms ease, background-color 180ms ease;
        z-index: 10;
      }

      .lightbox-close-btn:hover {
        transform: scale(1.1);
        background: #fff;
      }

      .project-slide {
        cursor: zoom-in;
      }

      .project-slide img {
        transition: transform 300ms ease;
      }

      .project-slide:hover img {
        transform: scale(1.018);
      }

      .about-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.7fr);
        gap: 1.5rem;
      }

      .about-copy,
      .portrait-placeholder {
        min-height: 360px;
        border-radius: var(--radius);
      }

      .about-copy {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: clamp(2rem, 5vw, 3.5rem);
      }

      .quote-mark {
        color: rgba(238, 159, 58, 0.48);
        font-size: 4rem;
        font-family: Georgia, serif;
        line-height: 0.5;
        margin-bottom: 0.5rem;
      }

      .about-text-content {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        margin: 1rem 0;
      }

      .about-lead {
        margin: 0;
        color: var(--text);
        font-size: clamp(1.15rem, 2vw, 1.5rem);
        font-weight: 400;
        line-height: 1.38;
        letter-spacing: -0.02em;
      }

      .about-lead strong {
        color: #fff;
        font-weight: 600;
      }

      .about-paragraph {
        margin: 0;
        color: var(--muted-strong);
        font-size: clamp(0.92rem, 1.1vw, 1.02rem);
        line-height: 1.72;
      }

      .about-paragraph strong {
        color: #fff8ec;
        font-weight: 600;
      }

      .about-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.55rem 1.1rem;
        border-radius: 999px;
        background: rgba(238, 159, 58, 0.08);
        border: 1px solid rgba(238, 159, 58, 0.28);
        color: var(--amber);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        width: fit-content;
        margin-top: 1rem;
      }

      .badge-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--amber);
        box-shadow: 0 0 10px rgba(238, 159, 58, 0.7);
      }

      .portrait-card {
        position: relative;
        min-height: 380px;
        border-radius: var(--radius);
        overflow: hidden;
        display: flex;
        align-items: flex-end;
      }

      .portrait-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 20%;
        transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
      }

      .portrait-card:hover .portrait-photo {
        transform: scale(1.035);
      }

      .portrait-info {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 1.5rem 1.6rem;
        background: linear-gradient(180deg, transparent 0%, rgba(7, 9, 14, 0.85) 55%, rgba(7, 9, 14, 0.98) 100%);
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }

      .portrait-name {
        font-size: 0.92rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #fff9ef;
      }

      .portrait-sub {
        font-size: 0.68rem;
        letter-spacing: 0.12em;
        color: var(--muted);
        text-transform: uppercase;
      }

      /* Sección Cómo Trabajo / Metodología (Compacta con divisores verticales en escritorio y horizontales en móvil) */
      .methodology-card {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-radius: var(--radius);
        overflow: hidden;
        margin-top: 1rem;
      }

      .methodology-step {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: clamp(1.6rem, 3.5vw, 2.5rem);
        position: relative;
        transition: background-color 300ms ease;
      }

      .methodology-step:not(:last-child) {
        border-right: 1px solid rgba(245, 234, 217, 0.1);
      }

      .methodology-step:hover {
        background: rgba(238, 159, 58, 0.04);
      }

      .step-badge {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
      }

      .step-num {
        font-family: var(--font-heading);
        font-size: clamp(1.4rem, 2.2vw, 1.8rem);
        font-weight: 700;
        color: var(--amber);
        line-height: 1;
      }

      .step-tag {
        font-size: 0.64rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--muted);
        padding: 0.2rem 0.6rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }

      .step-title {
        font-size: clamp(1.05rem, 1.3vw, 1.25rem);
        font-weight: 600;
        color: #fff9ef;
        margin: 0;
        letter-spacing: -0.01em;
      }

      .step-desc {
        font-size: 0.85rem;
        color: var(--muted-strong);
        line-height: 1.6;
        margin: 0;
      }

      @media (max-width: 767px) {
        .methodology-card {
          grid-template-columns: 1fr;
        }

        .methodology-step:not(:last-child) {
          border-right: none;
          border-bottom: 1px solid rgba(245, 234, 217, 0.1);
        }
      }

      .contact-section {
        overflow: hidden;
      }

      .contact-glow {
        position: absolute;
        top: 4%;
        right: -18rem;
        width: 44rem;
        height: 44rem;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(238, 159, 58, 0.15), transparent 68%);
        filter: blur(12px);
        pointer-events: none;
      }

      .contact-layout {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
        align-items: end;
        gap: clamp(3rem, 8vw, 8rem);
      }

      .contact-title {
        max-width: 9ch;
        margin: 0;
        color: var(--text);
        font-size: clamp(3.7rem, 7vw, 7.2rem);
        font-weight: 500;
        letter-spacing: -0.065em;
        line-height: 0.94;
        text-transform: uppercase;
      }

      .contact-intro {
        max-width: 35rem;
        margin: 1.6rem 0 0;
        color: var(--muted);
        line-height: 1.7;
      }

      .contact-list {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .contact-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.2rem;
        min-height: 86px;
        padding: 0.9rem 0;
        border-bottom: 1px solid rgba(238, 159, 58, 0.3);
        color: var(--muted-strong);
      }

      .contact-link {
        transition: color 200ms ease, border-color 200ms ease;
        cursor: pointer;
      }

      .contact-link:hover {
        color: #fff;
        border-bottom-color: var(--amber);
      }

      .contact-link-inline {
        display: flex;
        align-items: center;
        gap: 1.1rem;
        flex: 1;
        min-width: 0;
        color: inherit;
        transition: color 200ms ease;
      }

      .contact-link-inline:hover {
        color: #fff;
      }

      .contact-static {
        cursor: default;
      }

      .contact-main-text {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        min-width: 0;
      }

      .contact-main-text strong {
        color: var(--text);
        font-size: 0.95rem;
        font-weight: 500;
      }

      .contact-sub-text {
        color: var(--muted);
        font-size: 0.84rem;
        letter-spacing: 0.02em;
      }

      .contact-item svg {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        color: var(--amber);
        stroke-width: 1.4;
      }

      .contact-item .arrow {
        font-size: 1.35rem;
        font-weight: 300;
        color: var(--amber);
        transition: transform 200ms ease, color 200ms ease;
      }

      .contact-link:hover .arrow {
        transform: translate(3px, -3px);
        color: #fff;
      }

      .contact-action-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        width: 100%;
      }

      .copy-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.45rem 0.95rem;
        border-radius: 999px;
        background: rgba(238, 159, 58, 0.12);
        border: 1px solid rgba(238, 159, 58, 0.35);
        color: var(--amber);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 200ms ease;
        flex-shrink: 0;
      }

      .copy-btn:hover {
        background: var(--amber);
        color: #120e0a;
      }

      .copy-btn.is-copied {
        background: rgba(80, 200, 120, 0.2);
        border-color: rgba(80, 200, 120, 0.5);
        color: #7cf0a6;
      }

      .services-list {
        display: grid;
        overflow: hidden;
        border: 1px solid rgba(245, 234, 217, 0.08);
        border-radius: var(--radius);
        background: rgba(255, 255, 255, 0.018);
      }

      .service-row {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr) 36px;
        align-items: start;
        gap: 1.8rem;
        min-height: auto;
        padding: 2.2rem 2.2rem;
        border-bottom: 1px solid rgba(245, 234, 217, 0.08);
        transition: background-color 240ms ease;
      }

      .service-row:last-child {
        border-bottom: 0;
      }

      .service-row:hover {
        background: rgba(238, 159, 58, 0.06);
      }

      .service-body {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
      }

      .service-number {
        color: var(--amber);
        font-size: 1.7rem;
        font-weight: 500;
        line-height: 1;
        letter-spacing: -0.04em;
        padding-top: 0.15rem;
      }

      .service-title {
        margin: 0;
        color: var(--text);
        font-size: clamp(1.15rem, 1.8vw, 1.45rem);
        font-weight: 500;
        line-height: 1.25;
      }

      .service-description {
        margin: 0;
        color: var(--muted);
        font-size: 0.92rem;
        line-height: 1.65;
        letter-spacing: normal;
        text-transform: none;
      }

      .service-arrow-link {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: var(--amber);
        transition: transform 200ms ease, color 200ms ease;
        margin-top: 0.15rem;
      }

      .service-arrow {
        font-size: 1.6rem;
      }

      .service-row:hover .service-arrow-link {
        transform: translateX(5px);
        color: #fff;
      }

      .site-footer {
        position: relative;
        overflow: hidden;
        padding: 2rem 0 3rem;
        background: var(--bg);
      }

      .footer-glow {
        position: absolute;
        right: -8rem;
        bottom: -12rem;
        width: 36rem;
        height: 28rem;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(238, 159, 58, 0.2), transparent 68%);
        filter: blur(18px);
        pointer-events: none;
      }

      .footer-shell {
        border-radius: 32px;
        padding: clamp(2rem, 5vw, 4rem);
      }

      .footer-main {
        position: relative;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 3rem;
        padding-bottom: 3rem;
      }

      .footer-wordmark {
        color: #fff8ec;
        font-size: clamp(1.45rem, 3vw, 2.4rem);
        font-weight: 600;
        letter-spacing: -0.035em;
      }

      .footer-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 1.25rem clamp(1.5rem, 4vw, 4rem);
      }

      .footer-nav a {
        color: rgba(245, 234, 217, 0.72);
        font-size: 0.8rem;
        transition: color 180ms ease;
      }

      .footer-nav a:hover {
        color: #fff8ec;
      }

      .footer-bottom {
        position: relative;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        padding-top: 2rem;
        border-top: 1px solid rgba(245, 234, 217, 0.14);
        color: rgba(245, 234, 217, 0.48);
        font-size: 0.64rem;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }

      .footer-bottom a {
        transition: color 180ms ease;
      }

      .footer-bottom a:hover {
        color: var(--text);
      }

      .js [data-reveal] {
        transform: translate3d(0, 36px, 0);
        opacity: 0;
        transition:
          transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
          opacity 650ms ease;
        transition-delay: var(--reveal-delay, 0ms);
      }

      .js [data-reveal].is-visible {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }

      @media (max-width: 900px) {
        .container {
          width: min(calc(100% - 2rem), var(--container));
        }

        .section-heading,
        .contact-layout {
          grid-template-columns: 1fr;
        }

        .hero-content__inner {
          display: block;
        }

        .hero-action {
          width: max-content;
        }

        .section-heading {
          display: grid;
          align-items: start;
        }

        .section-note {
          max-width: 36rem;
        }

        .project,
        .project:nth-child(even) {
          grid-template-columns: minmax(130px, 0.3fr) minmax(0, 1fr);
          gap: 2rem;
        }

        .project:nth-child(even) .project-meta {
          order: initial;
        }

        .about-grid {
          grid-template-columns: 1fr 0.7fr;
        }

        .contact-layout {
          display: grid;
          align-items: start;
        }

        .contact-title {
          max-width: 11ch;
        }

        .footer-main {
          align-items: flex-start;
          flex-direction: column;
        }

        .footer-nav {
          justify-content: flex-start;
        }
      }

      @media (min-width: 768px) and (max-width: 1100px) {
        .hero-copy {
          width: 100%;
        }

        .hero-title {
          font-size: clamp(3.85rem, 8.75vw, 5.75rem);
        }

        .hero-action {
          min-width: 170px;
          padding-inline: 1rem;
        }

        .chapter-float {
          left: 5rem;
        }
      }

      @media (max-width: 767px) {
        .site-header {
          padding-top: max(1.15rem, env(safe-area-inset-top, 1.15rem));
        }

        .nav-shell {
          width: calc(100% - 2rem);
          min-height: 50px;
          overflow: visible;
          padding: 0 0.5rem 0 1rem;
        }

        .menu-toggle {
          width: 40px;
          height: 40px;
        }

        .menu-toggle {
          display: grid;
        }

        .primary-nav {
          position: absolute;
          top: calc(100% + 0.65rem);
          right: 0;
          bottom: auto;
          left: 0;
          z-index: 3;
          display: flex;
          width: 100%;
          transform: translateY(-12px) scale(0.98);
          transform-origin: top;
          visibility: hidden;
          flex-direction: column;
          align-items: stretch;
          justify-content: flex-start;
          gap: 0;
          border: 1px solid rgba(255, 239, 218, 0.18);
          border-radius: 20px;
          padding: 0.75rem 1rem;
          background: rgba(9, 8, 7, 0.92);
          box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
          backdrop-filter: blur(18px);
          -webkit-backdrop-filter: blur(18px);
          opacity: 0;
          pointer-events: none;
          transition:
            transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 180ms ease,
            visibility 180ms ease;
        }

        .primary-nav.is-open {
          transform: translateY(0) scale(1);
          visibility: visible;
          opacity: 1;
          pointer-events: auto;
        }

        .primary-nav a {
          width: 100%;
          padding: 0.9rem 0.35rem;
          border-bottom: 1px solid rgba(245, 234, 217, 0.1);
          font-size: 1rem;
        }

        .scroll-hero {
          height: 500svh;
        }

        .hero-sticky {
          position: sticky;
          top: 0;
          height: 100svh;
          min-height: 600px;
        }

        .hero-video {
          object-position: 53% center;
        }

        .hero-content {
          bottom: clamp(4.9rem, 9svh, 6.25rem);
        }

        .hero-content__inner {
          width: calc(100% - 3.25rem);
        }

        .hero-copy {
          display: flex;
          width: 100%;
          align-items: stretch;
          flex-direction: column;
          gap: 1.15rem;
        }

        .hero-title {
          max-width: 100%;
          font-size: clamp(2.55rem, 11.8vw, 3.75rem);
          letter-spacing: -0.085em;
          line-height: 0.78;
          transform: scaleX(0.84);
        }

        .hero-subtitle-tag {
          font-size: 0.68rem;
          letter-spacing: 0.12em;
        }

        .hero-action {
          position: static;
          min-width: 164px;
          align-self: flex-end;
          gap: 0.65rem;
          margin-bottom: 0;
          padding: 0.72rem 1rem;
          font-size: 0.67rem;
        }

        .chapter-float {
          right: 1.25rem;
          bottom: clamp(6.5rem, 13svh, 8.5rem);
          left: 2.6rem;
          max-width: none;
          justify-content: flex-start;
          gap: 0.9rem;
        }

        .chapter-float__title {
          font-size: clamp(1.75rem, 8.2vw, 2.6rem);
          white-space: normal;
        }

        .chapter-float__sub {
          font-size: 0.68rem;
        }

        .chapter-float__media {
          width: clamp(118px, 32vw, 145px);
        }

        .scroll-cue {
          bottom: 0.55rem;
        }

        .scroll-cue svg {
          width: 19px;
        }

        .section {
          padding: 6.5rem 0;
        }

        .section-heading {
          margin-bottom: 3.5rem;
        }

        .section-title {
          font-size: clamp(3.15rem, 15vw, 5rem);
        }

        .project,
        .project:nth-child(even) {
          grid-template-columns: 1fr;
          gap: 1.8rem;
        }

        .project:nth-child(even) .project-meta {
          order: initial;
        }

        .project-gallery-controls {
          grid-template-columns: repeat(2, 1fr);
        }

        .gallery-tab {
          padding: 0.65rem 0.35rem;
        }

        .tab-name {
          font-size: 0.68rem;
        }

        .project-gallery-header {
          padding: 0.65rem 0.85rem;
        }

        .browser-address {
          font-size: 0.64rem;
          padding: 0.25rem 0.65rem;
        }

        .project-media {
          min-height: 300px;
        }

        .project-number {
          font-size: 4rem;
        }

        .project-name {
          width: min(100%, 16rem);
        }

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

        .about-copy,
        .portrait-placeholder {
          min-height: 300px;
        }

        .contact-title {
          font-size: clamp(3.2rem, 16vw, 5.4rem);
        }

        .service-row {
          grid-template-columns: 38px minmax(0, 1fr) 24px;
          gap: 1rem;
          min-height: auto;
          padding: 1.5rem 1.15rem;
          align-items: start;
        }

        .service-number {
          font-size: 1.35rem;
          padding-top: 0.1rem;
        }

        .service-title {
          font-size: 1.1rem;
        }

        .service-description {
          display: block;
          margin-top: 0.35rem;
          font-size: 0.85rem;
          line-height: 1.55;
          color: var(--muted);
        }

        .footer-shell {
          padding: 2rem 1.4rem;
        }

        .footer-bottom {
          align-items: flex-start;
          flex-direction: column;
        }
      }

      @media (max-width: 359px) {
        .container {
          width: min(calc(100% - 1.5rem), var(--container));
        }

        .nav-shell {
          width: calc(100% - 1.5rem);
        }

        .hero-title {
          font-size: 2.35rem;
        }

        .chapter-float {
          right: 0.8rem;
          left: 2.2rem;
          gap: 0.65rem;
        }

        .chapter-float__title {
          font-size: 1.65rem;
        }

        .chapter-float__sub {
          font-size: 0.62rem;
        }

        .chapter-float__media {
          width: 104px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
          scroll-behavior: auto !important;
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }

        .scroll-hero {
          height: 100svh;
        }

        .hero-sticky {
          position: relative;
          min-height: 0;
        }

        .chapter-float {
          display: none;
        }

        .js [data-reveal] {
          transform: none;
          opacity: 1;
        }
      }