@font-face {
        font-family: "Mango Grotesque";
        src: url("../fonts/mango-grotesque-light.woff")
          format("woff");
        font-style: normal;
        font-weight: 300;
        font-display: swap;
      }

      @font-face {
        font-family: "Mango Grotesque";
        src: url("../fonts/mango-grotesque-regular.woff")
          format("woff");
        font-style: normal;
        font-weight: 400;
        font-display: swap;
      }

      @font-face {
        font-family: "Mango Grotesque";
        src: url("../fonts/mango-grotesque-medium.woff")
          format("woff");
        font-style: normal;
        font-weight: 500;
        font-display: swap;
      }

      @font-face {
        font-family: "Mango Grotesque";
        src: url("../fonts/mango-grotesque-semibold.woff")
          format("woff");
        font-style: normal;
        font-weight: 600;
        font-display: swap;
      }

      @font-face {
        font-family: "Inter Custom";
        src: url("../fonts/inter-regular.woff")
          format("woff");
        font-style: normal;
        font-weight: 400;
        font-display: swap;
      }

      @font-face {
        font-family: "Inter Custom";
        src: url("../fonts/inter-medium.woff")
          format("woff");
        font-style: normal;
        font-weight: 500;
        font-display: swap;
      }

      @font-face {
        font-family: "Inter Custom";
        src: url("../fonts/inter-semibold.woff")
          format("woff");
        font-style: normal;
        font-weight: 600;
        font-display: swap;
      }

      :root {
        --ink: oklch(9% 0.01 45);
        --ink-soft: oklch(13% 0.012 45);
        --paper: oklch(96% 0.008 60);
        --muted: oklch(69% 0.014 55);
        --line: oklch(100% 0.004 60 / 0.13);
        --orange: oklch(68% 0.21 45);
        --orange-hot: oklch(74% 0.2 52);
        --page-pad: clamp(1.25rem, 4vw, 5rem);
        --display: "Mango Grotesque", "Arial Narrow", sans-serif;
        --body: "Inter Custom", Arial, sans-serif;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
        background: var(--ink);
      }

      body {
        margin: 0;
        overflow-x: hidden;
        background: var(--ink);
        color: var(--paper);
        font-family: var(--body);
        text-rendering: optimizeLegibility;
      }

      body.menu-open {
        overflow: hidden;
      }

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

      button {
        color: inherit;
        font: inherit;
      }

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

      ::selection {
        background: var(--orange);
        color: var(--ink);
      }

      .display {
        font-family: var(--display);
        font-weight: 400;
      }

      .site-nav {
        position: fixed;
        inset: 0 0 auto;
        z-index: 80;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 5.25rem;
        padding-inline: var(--page-pad);
        border-bottom: 1px solid transparent;
        transition:
          background-color 300ms ease,
          border-color 300ms ease;
      }

      .site-nav.is-scrolled {
        border-color: var(--line);
        background: oklch(9% 0.01 45 / 0.9);
        backdrop-filter: blur(16px);
      }

      .brand {
        position: relative;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        width: clamp(7.5rem, 10vw, 9rem);
      }

      .brand-logo {
        width: 100%;
        height: auto;
        object-fit: contain;
      }

      .menu-trigger {
        position: relative;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 0.8rem;
        border: 0;
        background: transparent;
        cursor: pointer;
        outline: none;
      }

      .menu-label {
        padding-top: 0.1rem;
        font-family: var(--display);
        font-size: 1.25rem;
        text-transform: uppercase;
      }

      .menu-disc {
        display: grid;
        width: 2.65rem;
        aspect-ratio: 1;
        place-items: center;
        border: 1px solid oklch(100% 0 0 / 0.72);
        border-radius: 50%;
        background: var(--orange);
        transition:
          transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
          background-color 250ms ease;
      }

      .menu-lines {
        display: grid;
        gap: 0.27rem;
        width: 0.95rem;
      }

      .menu-lines span {
        display: block;
        height: 1px;
        background: var(--paper);
        transition:
          transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
          opacity 200ms ease;
      }

      body.menu-open .menu-lines span:nth-child(1) {
        transform: translateY(0.28rem) rotate(45deg);
      }

      body.menu-open .menu-lines span:nth-child(2) {
        opacity: 0;
      }

      body.menu-open .menu-lines span:nth-child(3) {
        transform: translateY(-0.28rem) rotate(-45deg);
      }

      .menu-trigger:focus-visible .menu-disc {
        outline: 2px solid var(--paper);
        outline-offset: 0.25rem;
      }

      @media (hover: hover) and (pointer: fine) {
        .menu-trigger:hover .menu-disc {
          transform: rotate(90deg);
          background: var(--orange-hot);
        }

        body.menu-open .menu-trigger:hover .menu-disc {
          transform: rotate(0);
        }
      }

      .menu-overlay {
        position: fixed;
        inset: 0;
        z-index: 70;
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.55fr);
        visibility: hidden;
        background: var(--ink);
        opacity: 0;
        pointer-events: none;
        transition:
          opacity 400ms ease,
          visibility 400ms;
      }

      .menu-overlay.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
      }

      .menu-main {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 100svh;
        padding: 8rem var(--page-pad) 3rem;
        background:
          linear-gradient(90deg, oklch(9% 0.01 45 / 0.25), transparent),
          radial-gradient(circle at 30% 15%, oklch(59% 0.17 42 / 0.28), transparent 36%),
          var(--ink);
      }

      .menu-eyebrow,
      .section-label {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        color: var(--muted);
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: uppercase;
      }

      .menu-eyebrow::before,
      .section-label::before {
        width: 1.7rem;
        height: 1px;
        background: var(--orange);
        content: "";
      }

      .menu-links {
        display: grid;
        margin-top: 1.1rem;
      }

      .menu-link {
        display: grid;
        grid-template-columns: 2rem 1fr auto;
        align-items: center;
        border-bottom: 1px solid var(--line);
        font-family: var(--display);
        font-size: clamp(3.5rem, 8vw, 8.2rem);
        line-height: 0.78;
        text-transform: uppercase;
        transition:
          color 250ms ease,
          padding-left 450ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .menu-link:first-child {
        border-top: 1px solid var(--line);
      }

      .menu-link:hover {
        padding-left: 0.5rem;
        color: var(--orange);
      }

      .menu-index {
        align-self: start;
        padding-top: 0.75rem;
        color: var(--muted);
        font-family: var(--body);
        font-size: 0.62rem;
      }

      .menu-arrow {
        font-family: var(--body);
        font-size: clamp(1.2rem, 2vw, 2rem);
      }

      .menu-aside {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 2.8rem;
        min-height: 100svh;
        padding: 8rem clamp(1.5rem, 3vw, 3.5rem) 3rem;
        border-left: 1px solid var(--line);
        background: var(--ink-soft);
      }

      .menu-aside h3 {
        margin: 0 0 0.7rem;
        color: var(--muted);
        font-size: 0.68rem;
        font-weight: 500;
        text-transform: uppercase;
      }

      .menu-aside a,
      .menu-aside p {
        margin: 0;
        font-family: var(--display);
        font-size: clamp(1.7rem, 3vw, 2.7rem);
        line-height: 0.95;
      }

      .availability {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        font-size: 0.75rem;
      }

      .availability-dot {
        width: 0.55rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--orange);
        box-shadow: 0 0 0 0.3rem oklch(68% 0.21 45 / 0.14);
      }

      .hero {
        position: relative;
        min-height: 100svh;
        overflow: hidden;
        border-bottom: 1px solid var(--line);
        background:
          radial-gradient(circle at 50% 5%, oklch(55% 0.17 42 / 0.34), transparent 40%),
          linear-gradient(180deg, oklch(18% 0.04 40), var(--ink) 72%);
        isolation: isolate;
      }

      .hero::before {
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image:
          linear-gradient(oklch(100% 0 0 / 0.045) 1px, transparent 1px),
          linear-gradient(90deg, oklch(100% 0 0 / 0.045) 1px, transparent 1px);
        background-size: 4.2rem 4.2rem;
        mask-image: linear-gradient(to bottom, black 8%, transparent 96%);
        content: "";
      }

      .hero::after {
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: 0.2;
        background-image: repeating-radial-gradient(
          circle at 12% 18%,
          oklch(100% 0 0 / 0.16) 0 0.5px,
          transparent 0.8px 3px
        );
        background-size: 7px 7px;
        mix-blend-mode: soft-light;
        content: "";
      }

      .hero-intro {
        position: absolute;
        top: clamp(8.5rem, 20vh, 13rem);
        left: 16%;
        z-index: 2;
        font-family: var(--display);
        font-size: clamp(1rem, 1.8vw, 1.55rem);
        text-transform: uppercase;
        animation: rise-in 900ms 120ms both cubic-bezier(0.16, 1, 0.3, 1);
      }

      .hero-name {
        position: absolute;
        top: 30%;
        left: 50%;
        z-index: 1;
        width: 100%;
        margin: 0;
        transform: translateX(-50%);
        color: var(--paper);
        font-family: var(--display);
        font-size: clamp(8rem, 18.7vw, 22rem);
        font-weight: 400;
        line-height: 0.72;
        text-align: center;
        text-transform: uppercase;
        white-space: nowrap;
        animation: name-in 1000ms 80ms both cubic-bezier(0.16, 1, 0.3, 1);
      }

      .hero-character {
        position: absolute;
        bottom: -1px;
        left: 50%;
        z-index: 3;
        width: min(47vw, 45rem);
        max-height: 84vh;
        transform: translateX(-50%);
        object-fit: contain;
        object-position: bottom;
        filter: drop-shadow(0 1.8rem 2rem oklch(0% 0 0 / 0.45));
        animation: character-in 1100ms 160ms both cubic-bezier(0.16, 1, 0.3, 1);
      }

      .hero-copy {
        position: absolute;
        bottom: clamp(3rem, 8vh, 5.8rem);
        left: var(--page-pad);
        z-index: 5;
        width: min(27rem, 37vw);
        animation: rise-in 900ms 320ms both cubic-bezier(0.16, 1, 0.3, 1);
      }

      .hero-kicker {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        margin-bottom: 0.7rem;
        font-size: 0.66rem;
        font-weight: 600;
        text-transform: uppercase;
      }

      .spark {
        color: var(--orange);
        font-size: 1rem;
      }

      .hero-copy h2 {
        max-width: 25rem;
        margin: 0;
        font-family: var(--display);
        font-size: clamp(2.9rem, 5vw, 5.7rem);
        font-weight: 400;
        line-height: 0.78;
        text-transform: uppercase;
      }

      .hero-copy p {
        max-width: 32rem;
        margin: 1rem 0 1.35rem;
        color: oklch(87% 0.01 55);
        font-size: clamp(0.78rem, 1vw, 0.92rem);
        line-height: 1.6;
      }

      .primary-cta {
        display: inline-flex;
        align-items: center;
        gap: 1rem;
        min-height: 3.35rem;
        padding: 0.5rem 0.55rem 0.5rem 1.4rem;
        border-radius: 999px;
        background: var(--orange);
        color: var(--paper);
        font-size: 0.78rem;
        font-weight: 600;
        transition:
          transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
          background-color 250ms ease;
      }

      .primary-cta:hover {
        transform: translateY(-0.2rem);
        background: var(--orange-hot);
      }

      .cta-arrow {
        display: grid;
        width: 2.3rem;
        aspect-ratio: 1;
        place-items: center;
        border-radius: 50%;
        background: var(--paper);
        color: var(--orange);
        font-size: 1rem;
      }

      .hero-proof {
        position: absolute;
        right: var(--page-pad);
        bottom: clamp(3rem, 8vh, 5.8rem);
        z-index: 5;
        width: min(20rem, 27vw);
        padding: 1.2rem;
        border: 1px solid var(--line);
        background: oklch(10% 0.01 45 / 0.82);
        animation: rise-in 900ms 430ms both cubic-bezier(0.16, 1, 0.3, 1);
      }

      .hero-proof strong {
        display: block;
        margin-bottom: 0.65rem;
        font-family: var(--display);
        font-size: clamp(1.7rem, 2.6vw, 2.7rem);
        font-weight: 400;
        line-height: 0.88;
        text-transform: uppercase;
      }

      .hero-proof p {
        margin: 0;
        color: var(--muted);
        font-size: 0.76rem;
        line-height: 1.55;
      }

      .ticker {
        overflow: hidden;
        border-bottom: 1px solid var(--line);
        background: var(--orange);
        color: var(--ink);
      }

      .ticker-track {
        display: flex;
        width: max-content;
        animation: ticker 28s linear infinite;
      }

      .ticker-group {
        display: flex;
        align-items: center;
        gap: clamp(2rem, 4vw, 5rem);
        padding: 1.1rem 2.5rem;
        font-family: var(--display);
        font-size: clamp(2.5rem, 5vw, 5.5rem);
        line-height: 0.8;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .ticker-star {
        font-family: var(--body);
        font-size: clamp(1.45rem, 2vw, 2rem);
        line-height: 1;
      }

      .section {
        padding: clamp(6rem, 11vw, 10rem) var(--page-pad);
      }

      .about {
        display: grid;
        grid-template-columns: minmax(10rem, 0.55fr) minmax(0, 1.45fr);
        gap: clamp(3rem, 9vw, 10rem);
        border-bottom: 1px solid var(--line);
      }

      .about-copy h2 {
        max-width: 17ch;
        margin: 0;
        font-family: var(--display);
        font-size: clamp(4rem, 8.6vw, 9.5rem);
        font-weight: 400;
        line-height: 0.78;
        text-transform: uppercase;
      }

      .about-copy h2 span {
        color: var(--orange);
      }

      .about-details {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
        margin-top: clamp(3rem, 6vw, 5rem);
        border-top: 1px solid var(--line);
        padding-top: 1.5rem;
      }

      .about-details p {
        max-width: 37ch;
        margin: 0;
        color: var(--muted);
        font-size: 0.9rem;
        line-height: 1.75;
      }

      .services {
        background: var(--ink-soft);
        border-bottom: 1px solid var(--line);
      }

      .section-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 2rem;
        margin-bottom: clamp(3rem, 7vw, 6rem);
      }

      .section-head h2 {
        max-width: 10ch;
        margin: 0;
        font-family: var(--display);
        font-size: clamp(4.5rem, 9vw, 10rem);
        font-weight: 400;
        line-height: 0.76;
        text-transform: uppercase;
      }

      .section-head p {
        max-width: 37ch;
        margin: 0;
        color: var(--muted);
        font-size: 0.84rem;
        line-height: 1.65;
      }

      .service-row {
        display: grid;
        grid-template-columns: 3.5rem minmax(15rem, 0.65fr) minmax(18rem, 1fr) auto;
        align-items: center;
        gap: clamp(1rem, 3vw, 3rem);
        padding: 2rem 0;
        border-top: 1px solid var(--line);
      }

      .service-row:last-child {
        border-bottom: 1px solid var(--line);
      }

      .service-number {
        align-self: start;
        color: var(--orange);
        font-size: 0.68rem;
        font-weight: 600;
      }

      .service-row h3 {
        margin: 0;
        font-family: var(--display);
        font-size: clamp(2.3rem, 4vw, 4.5rem);
        font-weight: 400;
        line-height: 0.88;
        text-transform: uppercase;
      }

      .service-row p {
        max-width: 48ch;
        margin: 0;
        color: var(--muted);
        font-size: 0.82rem;
        line-height: 1.65;
      }

      .service-arrow {
        display: grid;
        width: 3rem;
        aspect-ratio: 1;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 50%;
        font-size: 1.1rem;
        transition:
          transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
          background-color 250ms ease,
          color 250ms ease;
      }

      .service-row:hover .service-arrow {
        transform: rotate(45deg);
        background: var(--orange);
        color: var(--ink);
      }

      .work {
        padding-inline: 0;
      }

      .work .section-head {
        padding-inline: var(--page-pad);
      }

      .work-grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 1px;
        background: var(--line);
        border-block: 1px solid var(--line);
      }

      .project {
        position: relative;
        grid-column: span 6;
        min-height: clamp(26rem, 48vw, 45rem);
        overflow: hidden;
        background: var(--ink-soft);
      }

      .project:nth-child(1),
      .project:nth-child(4) {
        grid-column: span 7;
      }

      .project:nth-child(2),
      .project:nth-child(3) {
        grid-column: span 5;
      }

      .project img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .project::after {
        position: absolute;
        inset: 35% 0 0;
        background: linear-gradient(transparent, oklch(6% 0.01 45 / 0.92));
        content: "";
      }

      .project:hover img {
        transform: scale(1.035);
      }

      .project-copy {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 2rem;
        padding: clamp(1.4rem, 3vw, 2.5rem);
      }

      .project-meta {
        display: block;
        margin-bottom: 0.55rem;
        color: var(--orange-hot);
        font-size: 0.62rem;
        font-weight: 600;
        text-transform: uppercase;
      }

      .project h3 {
        max-width: 12ch;
        margin: 0;
        font-family: var(--display);
        font-size: clamp(2.6rem, 5vw, 5.5rem);
        font-weight: 400;
        line-height: 0.8;
        text-transform: uppercase;
      }

      .project-link {
        display: grid;
        flex: 0 0 auto;
        width: 3.3rem;
        aspect-ratio: 1;
        place-items: center;
        border-radius: 50%;
        background: var(--paper);
        color: var(--ink);
      }

      .manifesto {
        overflow: hidden;
        border-bottom: 1px solid var(--line);
        text-align: center;
      }

      .manifesto p {
        max-width: 30ch;
        margin: 0 auto 2.2rem;
        color: var(--muted);
        font-size: 0.9rem;
        line-height: 1.7;
      }

      .manifesto h2 {
        margin: 0;
        font-family: var(--display);
        font-size: clamp(5rem, 14.8vw, 17rem);
        font-weight: 400;
        line-height: 0.68;
        text-transform: uppercase;
      }

      .manifesto h2 span {
        color: var(--orange);
      }

      .testimonials {
        border-bottom: 1px solid var(--line);
        background: var(--ink-soft);
      }

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

      .testimonial-card {
        display: grid;
        min-height: 22rem;
        padding: clamp(1.5rem, 3vw, 2.8rem);
        border: 1px solid var(--line);
        background: var(--ink);
      }

      .testimonial-quote {
        color: var(--orange);
        font-family: var(--display);
        font-size: 4rem;
        line-height: 0.6;
      }

      .testimonial-card blockquote {
        align-self: center;
        max-width: 25ch;
        margin: 0;
        font-family: var(--display);
        font-size: clamp(2.3rem, 4.2vw, 4.2rem);
        font-weight: 400;
        line-height: 0.88;
        text-transform: uppercase;
      }

      .testimonial-card footer {
        align-self: end;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding-top: 1.2rem;
        border-top: 1px solid var(--line);
        color: var(--muted);
        font-size: 0.7rem;
        text-transform: uppercase;
      }

      .testimonial-status {
        color: var(--orange-hot);
      }

      .contact {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
        align-items: end;
        gap: clamp(4rem, 10vw, 10rem);
        background:
          radial-gradient(circle at 80% 30%, oklch(58% 0.16 42 / 0.26), transparent 32%),
          var(--ink-soft);
        border-bottom: 1px solid var(--line);
      }

      .contact h2 {
        max-width: 9ch;
        margin: 1.2rem 0 1.6rem;
        font-family: var(--display);
        font-size: clamp(4.8rem, 10vw, 11rem);
        font-weight: 400;
        line-height: 0.72;
        text-transform: uppercase;
      }

      .contact-copy > p {
        max-width: 46ch;
        margin: 0 0 2rem;
        color: var(--muted);
        font-size: 0.9rem;
        line-height: 1.7;
      }

      .contact-panel {
        padding: clamp(1.5rem, 3vw, 2.5rem);
        border: 1px solid var(--line);
        background: oklch(9% 0.01 45 / 0.78);
      }

      .contact-panel p {
        margin: 0 0 1.5rem;
        color: var(--muted);
        font-size: 0.78rem;
        line-height: 1.65;
      }

      .contact-email {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding-top: 1.2rem;
        border-top: 1px solid var(--line);
        font-family: var(--display);
        font-size: clamp(1.8rem, 3.5vw, 3.4rem);
        line-height: 0.9;
      }

      .footer {
        position: relative;
        overflow: hidden;
        min-height: clamp(38rem, 63vw, 57rem);
        padding: clamp(5rem, 8vw, 8rem) var(--page-pad)
          clamp(10rem, 18vw, 16rem);
        background:
          radial-gradient(circle at 20% 20%, oklch(55% 0.15 42 / 0.22), transparent 32%),
          var(--ink);
      }

      .footer-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(10rem, 0.38fr));
        gap: clamp(2.5rem, 7vw, 8rem);
        padding-bottom: 4rem;
        border-bottom: 1px solid var(--line);
      }

      .footer-pitch h2 {
        max-width: 10ch;
        margin: 0 0 1.7rem;
        font-family: var(--display);
        font-size: clamp(4.2rem, 8vw, 8.5rem);
        font-weight: 400;
        line-height: 0.76;
        text-transform: uppercase;
      }

      .footer-pitch p {
        max-width: 40ch;
        margin: 0 0 1.5rem;
        color: var(--muted);
        font-size: 0.82rem;
        line-height: 1.65;
      }

      .footer-column h3 {
        margin: 0 0 1.25rem;
        color: var(--muted);
        font-size: 0.68rem;
        font-weight: 500;
        text-transform: uppercase;
      }

      .footer-column nav {
        display: grid;
        gap: 0.7rem;
      }

      .footer-column a,
      .footer-domain {
        width: fit-content;
        font-family: var(--display);
        font-size: clamp(1.7rem, 2.6vw, 2.8rem);
        line-height: 0.9;
      }

      .footer-bottom {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        gap: 2rem;
        padding-top: 1.5rem;
        color: var(--muted);
        font-size: 0.67rem;
        text-transform: uppercase;
      }

      .footer-name {
        position: absolute;
        right: -0.02em;
        bottom: -0.1em;
        left: -0.02em;
        margin: 0;
        color: var(--orange);
        font-family: var(--display);
        font-size: clamp(7.2rem, 20.8vw, 25rem);
        font-weight: 400;
        line-height: 0.62;
        text-align: center;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .reveal {
        opacity: 0;
        transform: translateY(2rem);
        transition:
          opacity 700ms ease,
          transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      @keyframes ticker {
        to {
          transform: translateX(-50%);
        }
      }

      @keyframes rise-in {
        from {
          opacity: 0;
          transform: translateY(2rem);
        }
      }

      @keyframes name-in {
        from {
          opacity: 0;
          transform: translate(-50%, 2rem) scaleX(0.94);
        }
      }

      @keyframes character-in {
        from {
          opacity: 0;
          transform: translate(-50%, 3rem) scale(0.96);
        }
      }

      @media (max-width: 900px) {
        .menu-overlay {
          grid-template-columns: 1fr;
          overflow-y: auto;
        }

        .menu-main {
          min-height: auto;
          padding-top: 7.5rem;
        }

        .menu-aside {
          min-height: auto;
          padding-top: 3rem;
          border-top: 1px solid var(--line);
          border-left: 0;
        }

        .hero-name {
          top: 33%;
          font-size: 19vw;
        }

        .hero-character {
          width: min(64vw, 34rem);
        }

        .hero-copy {
          width: min(22rem, 46vw);
        }

        .hero-proof {
          width: min(17rem, 32vw);
        }

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

        .about .section-label {
          margin-bottom: -1rem;
        }

        .service-row {
          grid-template-columns: 2.5rem 1fr auto;
        }

        .service-row p {
          grid-column: 2 / -1;
        }

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

        .footer-grid {
          grid-template-columns: minmax(0, 1fr) repeat(2, minmax(9rem, 0.45fr));
        }
      }

      @media (max-width: 640px) {
        :root {
          --page-pad: 1.35rem;
        }

        .site-nav {
          height: 4.5rem;
        }

        .brand {
          font-size: 0.76rem;
        }

        .menu-label {
          font-size: 1.05rem;
        }

        .menu-disc {
          width: 2.25rem;
        }

        .menu-main {
          justify-content: flex-start;
          padding-top: 7rem;
        }

        .menu-link {
          grid-template-columns: 1.5rem 1fr auto;
          min-height: 4.5rem;
          font-size: clamp(3rem, 17vw, 5rem);
        }

        .menu-aside {
          gap: 2rem;
        }

        .hero {
          min-height: max(42rem, 100svh);
        }

        .hero::before {
          background-size: 3.4rem 3.4rem;
        }

        .hero-intro {
          top: 19%;
          left: var(--page-pad);
          font-size: 0.95rem;
        }

        .hero-name {
          top: 23%;
          left: var(--page-pad);
          width: auto;
          transform: none;
          font-size: clamp(5.3rem, 23.2vw, 7.2rem);
          line-height: 0.75;
          text-align: left;
        }

        .hero-character {
          right: -20%;
          bottom: -0.4rem;
          left: auto;
          width: min(104vw, 26rem);
          max-height: 66vh;
          transform: none;
          object-position: right bottom;
          animation-name: character-in-mobile;
        }

        .hero-copy {
          bottom: 1.5rem;
          left: var(--page-pad);
          width: min(16.5rem, 68vw);
        }

        .hero-kicker {
          max-width: 17rem;
          font-size: 0.58rem;
        }

        .hero-copy h2 {
          max-width: 12ch;
          font-size: clamp(2.55rem, 12vw, 3.6rem);
        }

        .hero-copy p {
          display: none;
        }

        .primary-cta {
          min-height: 3.05rem;
          margin-top: 1rem;
          padding-left: 1.2rem;
        }

        .cta-arrow {
          width: 2rem;
        }

        .hero-proof {
          display: none;
        }

        .ticker-group {
          padding-block: 0.85rem;
          font-size: 2.9rem;
        }

        .section {
          padding-block: 5.5rem;
        }

        .about-copy h2,
        .section-head h2,
        .contact h2 {
          font-size: clamp(4.1rem, 19vw, 6rem);
        }

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

        .section-head {
          display: grid;
        }

        .service-row {
          grid-template-columns: 2rem 1fr auto;
          padding-block: 1.6rem;
        }

        .service-row h3 {
          font-size: 2.7rem;
        }

        .service-arrow {
          width: 2.5rem;
        }

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

        .project,
        .project:nth-child(n) {
          grid-column: 1;
          min-height: 27rem;
        }

        .project-copy {
          padding: 1.35rem;
        }

        .project h3 {
          font-size: 3.4rem;
        }

        .project-link {
          width: 2.8rem;
        }

        .manifesto h2 {
          font-size: 25vw;
        }

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

        .testimonial-card {
          min-height: 19rem;
        }

        .contact-email {
          align-items: flex-start;
          flex-direction: column;
        }

        .footer {
          min-height: 57rem;
          padding-top: 5rem;
          padding-bottom: 9rem;
        }

        .footer-grid {
          grid-template-columns: 1fr 1fr;
          gap: 3rem 1.5rem;
        }

        .footer-pitch {
          grid-column: 1 / -1;
        }

        .footer-bottom {
          flex-direction: column;
          gap: 0.6rem;
        }

        .footer-name {
          bottom: -0.05em;
          font-size: 23vw;
        }
      }

      @keyframes character-in-mobile {
        from {
          opacity: 0;
          transform: translateY(3rem) scale(0.96);
        }
      }

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

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

        .reveal {
          opacity: 1;
          transform: none;
        }
      }

/* Inner pages */
.inner-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 74% 0%, oklch(54% 0.16 42 / 0.2), transparent 28rem),
    var(--ink);
}

.menu-link[aria-current="page"] {
  color: var(--orange);
}

.page-hero {
  position: relative;
  display: grid;
  min-height: 78svh;
  align-content: end;
  overflow: hidden;
  padding: 10rem var(--page-pad) clamp(4rem, 8vw, 7rem);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, oklch(17% 0.04 40), transparent 72%),
    var(--ink);
}

.page-hero::before {
  position: absolute;
  inset: 0;
  opacity: 0.72;
  background-image:
    linear-gradient(oklch(100% 0 0 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, oklch(100% 0 0 / 0.045) 1px, transparent 1px);
  background-size: 4.2rem 4.2rem;
  mask-image: linear-gradient(to bottom, black, transparent 96%);
  content: "";
}

.page-hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  align-items: end;
  gap: clamp(3rem, 8vw, 9rem);
}

.page-number {
  display: block;
  margin-bottom: 1.7rem;
  color: var(--orange);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.page-title {
  max-width: 8ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(7rem, 17vw, 19rem);
  font-weight: 400;
  line-height: 0.66;
  text-transform: uppercase;
}

.page-intro {
  max-width: 42ch;
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.75;
}

.work-list {
  border-bottom: 1px solid var(--line);
}

.work-entry {
  display: grid;
  grid-template-columns: minmax(20rem, 0.72fr) minmax(0, 1.28fr);
  min-height: 43rem;
  border-bottom: 1px solid var(--line);
}

.work-entry:last-child {
  border-bottom: 0;
}

.work-entry:nth-child(even) {
  grid-template-columns: minmax(0, 1.28fr) minmax(20rem, 0.72fr);
}

.work-entry:nth-child(even) .work-entry-media {
  order: -1;
}

.work-entry-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 5vw, 5rem) var(--page-pad);
}

.work-entry-index {
  color: var(--orange);
  font-size: 0.68rem;
  font-weight: 600;
}

.work-entry h2 {
  max-width: 10ch;
  margin: auto 0 1rem;
  font-family: var(--display);
  font-size: clamp(4rem, 7vw, 8rem);
  font-weight: 400;
  line-height: 0.75;
  text-transform: uppercase;
}

.work-entry-copy p {
  max-width: 42ch;
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.7;
}

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.work-tags span {
  padding: 0.48rem 0.7rem;
  border: 1px solid var(--line);
  color: oklch(84% 0.012 55);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.work-entry-media {
  min-height: 43rem;
  overflow: hidden;
  background: var(--ink-soft);
}

.work-entry-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.work-entry:hover .work-entry-media img {
  transform: scale(1.025);
}

.work-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  padding: clamp(6rem, 11vw, 11rem) var(--page-pad);
  background: var(--orange);
  color: var(--ink);
}

.work-cta h2 {
  max-width: 9ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(5rem, 11vw, 12rem);
  font-weight: 400;
  line-height: 0.72;
  text-transform: uppercase;
}

.work-cta .primary-cta {
  background: var(--ink);
}

.contact-hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  align-items: end;
  overflow: hidden;
  padding: 9rem var(--page-pad) 4rem;
  background:
    radial-gradient(circle at 74% 28%, oklch(58% 0.17 43 / 0.3), transparent 34rem),
    linear-gradient(180deg, oklch(17% 0.04 40), var(--ink) 76%);
  isolation: isolate;
}

.contact-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(oklch(100% 0 0 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, oklch(100% 0 0 / 0.04) 1px, transparent 1px);
  background-size: 4rem 4rem;
  content: "";
}

.contact-hero-content {
  position: relative;
  z-index: 3;
  width: min(48rem, 62vw);
}

.contact-hero h1 {
  max-width: 8ch;
  margin: 0 0 1.5rem;
  font-family: var(--display);
  font-size: clamp(6rem, 13vw, 15rem);
  font-weight: 400;
  line-height: 0.68;
  text-transform: uppercase;
}

.contact-title span {
  display: block;
}

.contact-title span + span {
  margin-top: 0.13em;
}

.contact-hero .page-number {
  margin-bottom: 1.9rem;
}

.contact-hero-copy {
  max-width: 45ch;
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

.contact-character {
  position: absolute;
  right: -3vw;
  bottom: 0;
  z-index: 1;
  width: min(58vw, 53rem);
  max-height: 87vh;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 2rem 2rem oklch(0% 0 0 / 0.42));
}

.contact-methods {
  border-bottom: 1px solid var(--line);
}

.contact-method {
  display: grid;
  grid-template-columns: 4rem minmax(12rem, 0.45fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  min-height: 9rem;
  padding: 1.5rem var(--page-pad);
  border-top: 1px solid var(--line);
  transition:
    background-color 260ms ease,
    color 260ms ease;
}

.contact-method:hover {
  background: var(--orange);
  color: var(--ink);
}

.contact-method-index {
  color: var(--orange);
  font-size: 0.65rem;
  font-weight: 600;
}

.contact-method:hover .contact-method-index,
.contact-method:hover .contact-method-copy {
  color: var(--ink);
}

.contact-method h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.7rem, 5vw, 5rem);
  font-weight: 400;
  line-height: 0.82;
  text-transform: uppercase;
}

.contact-method-copy {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

.contact-method-arrow {
  font-size: 1.4rem;
}

.contact-availability {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.6fr);
  gap: clamp(3rem, 10vw, 10rem);
  padding: clamp(6rem, 10vw, 10rem) var(--page-pad);
}

.contact-availability h2 {
  max-width: 10ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4rem, 8vw, 9rem);
  font-weight: 400;
  line-height: 0.76;
  text-transform: uppercase;
}

.contact-availability p {
  align-self: end;
  max-width: 42ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.75;
}

.error-page {
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, oklch(58% 0.18 43 / 0.36), transparent 32rem),
    var(--ink);
}

.error-stage {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: 7rem var(--page-pad) 2rem;
}

.error-code {
  position: absolute;
  top: 48%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(18rem, 47vw, 46rem);
  font-weight: 400;
  line-height: 0.55;
}

.error-character {
  position: absolute;
  bottom: -9%;
  left: 50%;
  z-index: 2;
  width: min(47vw, 42rem);
  transform: translateX(-50%);
  filter: drop-shadow(0 2rem 2rem oklch(0% 0 0 / 0.5));
}

.error-copy {
  position: absolute;
  bottom: 3rem;
  left: var(--page-pad);
  z-index: 3;
  max-width: 28rem;
}

.error-copy h1 {
  margin: 0 0 0.8rem;
  font-family: var(--display);
  font-size: clamp(3.2rem, 6vw, 6.5rem);
  font-weight: 400;
  line-height: 0.78;
  text-transform: uppercase;
}

.error-copy p {
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.65;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.secondary-cta {
  display: inline-flex;
  align-items: center;
  min-height: 3.35rem;
  padding: 0.8rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--paper);
  font-size: 0.78rem;
  font-weight: 600;
  transition:
    background-color 250ms ease,
    color 250ms ease;
}

.secondary-cta:hover,
.secondary-cta:focus-visible {
  background: var(--paper);
  color: var(--ink);
}

@media (max-width: 900px) {
  .page-hero-content,
  .contact-availability {
    grid-template-columns: 1fr;
  }

  .work-entry,
  .work-entry:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .work-entry:nth-child(even) .work-entry-media {
    order: initial;
  }

  .work-entry-copy {
    min-height: 27rem;
  }

  .work-entry-media {
    min-height: 33rem;
  }

  .contact-hero-content {
    width: min(35rem, 68vw);
  }

  .contact-character {
    right: -17vw;
    width: min(75vw, 44rem);
  }
}

@media (max-width: 640px) {
  .page-hero {
    min-height: 66svh;
    padding-top: 8rem;
  }

  .page-hero-content {
    gap: 2rem;
  }

  .page-title {
    font-size: clamp(6rem, 30vw, 8.2rem);
  }

  .work-entry-copy {
    min-height: 23rem;
  }

  .work-entry h2 {
    font-size: 4rem;
  }

  .work-entry-media {
    min-height: 24rem;
  }

  .work-cta {
    grid-template-columns: 1fr;
  }

  .work-cta h2 {
    font-size: 20vw;
  }

  .contact-hero {
    min-height: 100svh;
    padding-bottom: 2rem;
  }

  .contact-hero-content {
    width: 74vw;
  }

  .contact-hero h1 {
    font-size: clamp(5rem, 24vw, 7rem);
  }

  .contact-hero-copy {
    display: none;
  }

  .contact-character {
    right: -42%;
    width: min(115vw, 31rem);
    max-height: 62vh;
  }

  .contact-method {
    grid-template-columns: 2rem 1fr auto;
    min-height: 8rem;
  }

  .contact-method-copy {
    display: none;
  }

  .contact-method h2 {
    font-size: 3rem;
  }

  .contact-availability h2 {
    font-size: 4.7rem;
  }

  .error-code {
    top: 37%;
    font-size: 59vw;
  }

  .error-character {
    right: -31%;
    bottom: 8%;
    left: auto;
    width: 94vw;
    transform: none;
  }

  .error-copy {
    bottom: 1.5rem;
    max-width: 18rem;
  }

  .error-copy h1 {
    font-size: 3.3rem;
  }
}