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

      html {
        scroll-behavior: smooth;
      }
      section[id],
      .stats-bar,
      .clients-row,
      .cta-band,
      #book {
        scroll-margin-top: 96px;
      }
      body {
        background: var(--bg);
        color: var(--text);
        font-family: var(--sans);
        font-weight: 400;
        font-size: var(--text-base);
        line-height: var(--leading-body);
        overflow-x: hidden;
        animation: pageFadeIn 0.45s ease both;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
      }
      body.nav-open {
        overflow: hidden;
      }

      .skip-link {
        position: fixed;
        top: 10px;
        left: 12px;
        transform: translateY(-140%);
        z-index: 10001;
        background: var(--accent);
        color: var(--on-accent);
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 10px 12px;
        text-decoration: none;
        border-radius: 2px;
        transition: transform 0.2s ease;
      }
      .skip-link:focus-visible {
        transform: translateY(0);
      }

      /* Accessibility - focus styles */
      *:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

      button:focus-visible,
      a:focus-visible {
        outline-offset: 2px;
      }

      /* Scrollbar styling */
      ::-webkit-scrollbar {
        width: 8px;
      }
      ::-webkit-scrollbar-track {
        background: var(--bg);
      }
      ::-webkit-scrollbar-thumb {
        background: rgba(59, 158, 255, 0.3);
        border-radius: 4px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: rgba(59, 158, 255, 0.5);
      }

      /* Custom cursor — dot + ring on normal move; dot only on hover/focus */
      body.has-custom-cursor,
      body.has-custom-cursor a,
      body.has-custom-cursor button,
      body.has-custom-cursor input,
      body.has-custom-cursor textarea,
      body.has-custom-cursor select {
        cursor: none;
      }
      .cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: 8px;
        height: 8px;
        background: var(--accent);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
      }
      .cursor-ring {
        position: fixed;
        top: 0;
        left: 0;
        width: 32px;
        height: 32px;
        border: 1.5px solid rgba(59, 158, 255, 0.45);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9998;
        transform: translate(-50%, -50%);
        opacity: 1;
        transition: opacity 0.15s ease;
      }
      .cursor-ring.is-hidden {
        opacity: 0;
      }
      a:focus-visible,
      button:focus-visible,
      input:focus-visible,
      textarea:focus-visible,
      select:focus-visible,
      .work-filter:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }

      @media (hover: none), (pointer: coarse) {
        body.has-custom-cursor,
        body.has-custom-cursor a,
        body.has-custom-cursor button {
          cursor: auto;
        }
        .cursor,
        .cursor-ring {
          display: none;
        }
        .bento-cell:hover {
          transform: none;
          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
        }
        .bento-cell:hover img {
          transform: none;
        }
        .case-study:hover {
          transform: none;
          box-shadow: none;
        }
        .case-study:hover .case-screenshot img {
          transform: none;
        }
      }

      /* Noise texture overlay */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
        pointer-events: none;
        z-index: 1000;
        opacity: 0.4;
      }

      /* NAV */
      nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: rgba(10, 10, 10, 0.78);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom: 1px solid var(--border);
        transition:
          background 0.4s,
          box-shadow 0.4s;
      }
      nav.scrolled {
        background: rgba(10, 10, 10, 0.95);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
      }
      nav.scrolled .nav-inner {
        padding-top: 10px;
        padding-bottom: 10px;
      }
      nav.scrolled .nav-logo .logo-img {
        height: 22px;
      }
      .nav-inner {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 14px 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        width: 100%;
        position: relative;
      }
      .nav-logo .logo-img {
        height: 26px;
        width: auto;
      }
      .nav-logo {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 18px;
        color: var(--text);
        text-decoration: none;
        transition: opacity 0.2s;
      }
      .nav-logo:hover {
        opacity: 0.9;
      }
      .logo-img {
        display: block;
        flex-shrink: 0;
        width: auto;
        object-fit: contain;
      }
      .logo-wordmark {
        font-family: var(--font-ui);
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 1;
        white-space: nowrap;
      }
      .logo-tech {
        color: var(--accent);
        font-weight: 600;
      }
      .logo-dot {
        color: var(--accent);
      }
      .nav-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(18px, 2.2vw, 28px);
        list-style: none;
        flex: 1;
        min-width: 0;
        padding: 0 12px;
      }
      .nav-links li {
        flex-shrink: 0;
      }
      .nav-links a {
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.2s;
      }
      .nav-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
      }
      .nav-links a:hover {
        color: var(--accent);
      }
      .nav-links a.active {
        color: var(--accent);
      }
      .nav-links a.active::after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        margin-top: 6px;
        background: var(--accent);
      }
      .nav-cta {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 10px 18px;
        border: 1px solid var(--border);
        background: transparent;
        color: var(--text);
        border-radius: 4px;
        cursor: pointer;
        transition:
          background 0.2s,
          border-color 0.2s,
          color 0.2s,
          opacity 0.2s;
        text-decoration: none;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        line-height: 1;
      }
      .nav-cta:hover {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--on-accent);
      }
      .nav-cta--primary {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--on-accent);
      }
      .nav-cta--primary:hover {
        opacity: 0.92;
        transform: translateY(-1px);
        background: var(--accent);
        color: var(--on-accent);
      }
      .nav-links-cta {
        display: none;
        list-style: none;
      }

      /* Mobile menu button */
      .nav-menu-btn {
        display: none;
        background: none;
        border: none;
        color: var(--text);
        font-size: 28px;
        line-height: 1;
        font-family: var(--sans);
        font-weight: 400;
        cursor: pointer;
        padding: 8px;
        z-index: 101;
      }
      .nav-menu-btn:hover {
        color: var(--accent);
      }
      .nav-links.mobile-open {
        display: flex;
      }
      .nav-links.mobile-open a {
        display: block;
      }

      /* HERO */
      .hero {
        min-height: calc(100vh - 64px);
        min-height: calc(100dvh - 64px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 108px 48px 72px;
        position: relative;
        overflow: hidden;
      }
      .hero-glow {
        position: absolute;
        pointer-events: none;
        z-index: 0;
        border-radius: 50%;
        filter: blur(40px);
      }
      .hero-glow--left {
        top: -15%;
        left: -12%;
        width: 55%;
        height: 55%;
        background: radial-gradient(
          circle,
          rgba(59, 158, 255, 0.14) 0%,
          transparent 68%
        );
      }
      .hero-glow--right {
        top: 10%;
        right: -8%;
        width: 50%;
        height: 50%;
        background: radial-gradient(
          circle,
          rgba(59, 158, 255, 0.1) 0%,
          transparent 70%
        );
      }
      .hero-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(40px, 5vw, 64px);
        align-items: center;
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
      }
      .hero-inner > * {
        min-width: 0;
      }
      .hero-content {
        position: relative;
        z-index: 1;
      }
      .hero-visual {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 100%;
        opacity: 0;
        animation: fadeUp 0.9s ease 0.6s forwards;
      }
      .hero-bento {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 10px;
        height: clamp(360px, 38vw, 460px);
        position: relative;
        width: 100%;
        max-width: 100%;
      }
      .bento-cell {
        position: relative;
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid var(--border);
        background: var(--surface);
        text-decoration: none;
        display: block;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
        transition:
          transform 0.35s ease,
          border-color 0.35s ease,
          box-shadow 0.35s ease;
      }
      .bento-cell::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(10, 10, 10, 0.88) 0%,
          rgba(10, 10, 10, 0.2) 45%,
          transparent 100%
        );
        pointer-events: none;
        z-index: 1;
        transition: opacity 0.35s ease;
      }
      .bento-cell:hover {
        transform: translateY(-4px) scale(1.01);
        border-color: rgba(59, 158, 255, 0.45);
        box-shadow:
          0 24px 56px rgba(0, 0, 0, 0.45),
          0 0 0 1px rgba(59, 158, 255, 0.12);
      }
      .bento-cell:hover::after {
        opacity: 0.92;
      }
      .bento-cell img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease;
      }
      .bento-cell:hover img {
        transform: scale(1.06);
      }
      .bento-label {
        position: absolute;
        bottom: 14px;
        left: 14px;
        z-index: 2;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text);
        padding: 6px 10px;
        background: rgba(10, 10, 10, 0.55);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 2px;
        transition:
          background 0.25s,
          border-color 0.25s,
          color 0.25s;
      }
      .bento-cell:hover .bento-label {
        background: rgba(59, 158, 255, 0.2);
        border-color: rgba(59, 158, 255, 0.35);
        color: #fff;
      }
      .bento-cell--design {
        animation: bentoIn 0.8s ease 0.7s both;
      }
      .bento-cell--dev {
        animation: bentoIn 0.8s ease 0.8s both;
      }
      .bento-cell--data {
        animation: bentoIn 0.8s ease 0.9s both;
      }
      .bento-cell--marketing {
        animation: bentoIn 0.8s ease 1s both;
      }
      .bento-cell--ai {
        animation: bentoIn 0.8s ease 1.1s both;
      }
      .bento-cell--cloud {
        animation: bentoIn 0.8s ease 1.2s both;
      }
      .bento-float-card {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        z-index: 5;
        width: 88px;
        height: 88px;
        border-radius: 50%;
        background: var(--accent);
        color: var(--on-accent);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-shadow:
          0 12px 40px rgba(59, 158, 255, 0.35),
          0 0 0 6px rgba(10, 10, 10, 0.9);
        animation:
          bentoIn 0.8s ease 1.3s both,
          bentoFloat 4s ease-in-out 2s infinite;
        pointer-events: none;
      }
      .bento-float-num {
        font-family: var(--font-ui);
        font-size: 26px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.03em;
      }
      .bento-float-text {
        font-family: var(--mono);
        font-size: 8px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        line-height: 1.35;
        margin-top: 2px;
        opacity: 0.92;
      }
      .hero-grid-lines {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
          linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
          );
        background-size: 80px 80px;
      }
      .hero-label {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 24px;
        opacity: 0;
        animation: fadeUp 0.8s ease 0.3s forwards;
      }
      .hero h1 {
        font-family: var(--font-display);
        font-size: var(--text-display);
        line-height: 1.05;
        letter-spacing: -0.03em;
        font-weight: 400;
        max-width: 560px;
        text-wrap: balance;
        opacity: 0;
        animation: fadeUp 0.9s ease 0.5s forwards;
      }
      .hero h1 em {
        font-style: italic;
        color: var(--accent);
      }
      .hero-sub {
        font-size: var(--text-lg);
        color: var(--muted);
        max-width: 480px;
        margin-top: 24px;
        line-height: 1.75;
        opacity: 0;
        animation: fadeUp 0.9s ease 0.7s forwards;
      }
      .hero-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 32px;
        opacity: 0;
        animation: fadeUp 0.9s ease 0.8s forwards;
      }
      .hero-pill {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 8px 14px;
        border: 1px solid var(--border);
        border-radius: 2px;
        color: var(--muted);
        text-decoration: none;
        transition:
          border-color 0.2s,
          color 0.2s,
          background 0.2s;
      }
      .hero-pill:hover {
        border-color: rgba(59, 158, 255, 0.45);
        color: var(--accent);
        background: var(--accent-dim);
      }
      .hero-ctas {
        display: flex;
        gap: 16px;
        margin-top: 32px;
        opacity: 0;
        animation: fadeUp 0.9s ease 0.9s forwards;
      }
      .hero-trust {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 20px;
        line-height: 1.6;
        opacity: 0;
        animation: fadeUp 0.9s ease 1s forwards;
      }
      .btn-primary {
        padding: 14px 32px;
        background: var(--accent);
        color: var(--on-accent);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        border: none;
        border-radius: 2px;
        cursor: pointer;
        text-decoration: none;
        transition:
          opacity 0.2s,
          transform 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
      }
      .btn-primary:hover {
        opacity: 0.88;
        transform: translateY(-1px);
      }
      .btn-ghost {
        padding: 14px 32px;
        background: transparent;
        color: var(--text);
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        border: 1px solid var(--border);
        border-radius: 2px;
        cursor: pointer;
        text-decoration: none;
        transition:
          border-color 0.2s,
          color 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
      }
      .btn-ghost:hover {
        border-color: rgba(59, 158, 255, 0.45);
        color: var(--accent);
      }
      .hero-marquee-wrap {
        border-top: 1px solid var(--border);
        margin-top: 64px;
        padding-top: 24px;
        overflow: hidden;
        width: 100%;
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
      }
      .marquee {
        display: flex;
        gap: 64px;
        white-space: nowrap;
        animation: marqueeScroll 28s linear infinite;
      }
      .marquee span {
        font-family: var(--font-ui);
        font-size: 12px;
        font-weight: 500;
        font-style: normal;
        color: var(--muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        flex-shrink: 0;
      }
      .marquee .dot {
        color: var(--accent);
        font-style: normal;
      }

      /* STATS BAR */
      .stats-bar {
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 40px 48px;
      }
      .stats-bar-inner {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
      }
      .stat-item {
        padding: 0 32px;
        border-right: 1px solid var(--border);
      }
      .stat-item:first-child {
        padding-left: 0;
      }
      .stat-item:last-child {
        border-right: none;
      }
      .stat-num {
        font-family: var(--font-ui);
        font-size: 48px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: -0.04em;
        font-variant-numeric: tabular-nums;
        color: var(--text);
      }
      .stat-num span {
        color: var(--accent);
      }
      .stat-num--word {
        font-size: 40px;
        font-family: var(--font-ui);
        font-weight: 600;
        letter-spacing: -0.03em;
        text-transform: none;
      }
      .stat-label {
        font-size: 12px;
        color: var(--muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-top: 8px;
        font-family: var(--mono);
      }

      /* SECTION BASE */
      section {
        padding: var(--space-section) var(--space-12);
      }
      .section-container {
        max-width: var(--max-width);
        margin: 0 auto;
        width: 100%;
      }
      .section-tag {
        font-family: var(--mono);
        font-size: var(--text-xs);
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .section-tag::before {
        content: "";
        width: 24px;
        height: 1px;
        background: var(--accent);
      }
      .section-h2 {
        font-family: var(--font-display);
        font-size: var(--text-xl);
        font-weight: 400;
        letter-spacing: var(--tracking-tight);
        line-height: var(--leading-heading);
        text-wrap: balance;
      }
      .section-h2 em {
        font-style: italic;
        color: var(--accent);
      }

      /* SECTION BACKGROUNDS — unique image per section */
      .section-bg {
        position: relative;
        isolation: isolate;
        overflow: hidden;
      }
      .section-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background-image: var(--section-bg-image);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: var(--section-bg-opacity, 0.16);
        pointer-events: none;
      }
      .section-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient(
          180deg,
          rgba(10, 10, 10, 0.9) 0%,
          rgba(10, 10, 10, 0.82) 45%,
          rgba(10, 10, 10, 0.92) 100%
        );
        pointer-events: none;
      }
      .section-bg > .section-container,
      .section-bg > .cta-band-inner,
      .section-bg > .contact-layout {
        position: relative;
        z-index: 1;
      }
      .section-bg--stats {
        --section-bg-image: url("images/project-healthcare.jpg");
      }
      .section-bg--clients {
        --section-bg-image: url("images/project-ecommerce.jpg");
        --section-bg-opacity: 0.14;
      }
      .section-bg--services {
        --section-bg-image: url("images/project-fintech.jpg");
      }
      .section-bg--process {
        --section-bg-image: url("images/project-saas.jpg");
      }
      .section-bg--work {
        --section-bg-image: url("images/service-design.jpg");
        --section-bg-opacity: 0.12;
      }
      .section-bg--cta-inline {
        --section-bg-image: url("images/service-cloud.svg");
        --section-bg-opacity: 0.22;
      }
      .section-bg--studio {
        --section-bg-image: url("images/service-development.jpg");
      }
      .section-bg--products {
        --section-bg-image: url("images/service-data.jpg");
      }
      .section-bg--testimonials {
        --section-bg-image: url("images/service-marketing.jpg");
        --section-bg-opacity: 0.13;
      }
      .section-bg--engagement {
        --section-bg-image: url("images/service-ai.svg");
        --section-bg-opacity: 0.2;
      }
      .section-bg--cta-main {
        --section-bg-image: url("images/og-image.png");
        --section-bg-opacity: 0.07;
        background-size: 480px auto;
      }
      .section-bg--cta-main::before {
        background-size: 520px auto;
        background-position: right center;
      }
      .section-bg--contact {
        --section-bg-image: url("images/taplogo.png");
        --section-bg-opacity: 0.06;
      }
      .section-bg--contact::before {
        background-size: 420px auto;
        background-position: center 20%;
      }

      /* STUDIO SECTION */
      .studio-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        margin-top: 72px;
        align-items: start;
      }
      .studio-text p {
        font-size: 17px;
        line-height: 1.8;
        color: var(--muted);
        margin-bottom: 24px;
      }
      .studio-text p strong {
        color: var(--text);
        font-weight: 400;
      }
      .studio-cta {
        margin-top: 40px;
      }

      /* PROCESS */
      .process-section {
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        background: transparent;
      }
      .process-section:not(.section-bg) {
        background: var(--surface);
      }
      .process-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        margin-top: 56px;
        background: var(--border);
        border: 1px solid var(--border);
      }
      .process-step {
        background: var(--surface);
        padding: 36px 32px;
        transition: background 0.25s;
      }
      .process-step:hover {
        background: var(--surface-elevated);
      }
      .process-num {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--accent);
        letter-spacing: 0.1em;
        display: block;
        margin-bottom: 20px;
      }
      .process-title {
        font-family: var(--font-ui);
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -0.02em;
        margin-bottom: 12px;
      }
      .process-desc {
        font-size: 14px;
        color: var(--muted);
        line-height: 1.7;
      }
      .studio-pillars {
        display: flex;
        flex-direction: column;
        gap: 0;
        border: 1px solid var(--border);
      }
      .pillar-item {
        padding: 24px 28px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: flex-start;
        gap: 20px;
        transition: background 0.2s;
      }
      .pillar-item:last-child {
        border-bottom: none;
      }
      .pillar-item:hover {
        background: rgba(255, 255, 255, 0.03);
      }
      .pillar-num {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--accent);
        letter-spacing: 0.1em;
        padding-top: 3px;
        flex-shrink: 0;
      }
      .pillar-title {
        font-size: 15px;
        font-weight: 400;
        color: var(--text);
        margin-bottom: 4px;
      }
      .pillar-desc {
        font-size: 13px;
        color: var(--muted);
        line-height: 1.6;
      }

      /* SERVICES */
      .services-section {
        background: transparent;
      }
      .services-section:not(.section-bg) {
        background: var(--surface);
      }
      .services-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
        margin-top: 72px;
        background: var(--border);
        border: 1px solid var(--border);
      }
      .service-card {
        background: var(--surface);
        padding: 48px;
        transition: background 0.25s;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }
      .service-visual {
        margin: -48px -48px 28px;
        height: 200px;
        overflow: hidden;
        border-bottom: 1px solid var(--border);
        position: relative;
      }
      .service-visual::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to bottom,
          transparent 40%,
          rgba(17, 17, 17, 0.85) 100%
        );
        pointer-events: none;
      }
      .service-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.45s ease;
      }
      .service-card:hover .service-visual img {
        transform: scale(1.04);
      }
      .service-card::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--accent);
        transition: width 0.4s ease;
      }
      .service-card:hover {
        background: rgba(255, 255, 255, 0.03);
      }
      .service-card:hover::after {
        width: 100%;
      }
      .service-icon {
        width: 44px;
        height: 44px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.01);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 28px;
        color: var(--accent);
        transition: border-color 0.2s, background 0.2s;
      }
      .service-icon svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .service-card:hover .service-icon {
        border-color: rgba(59, 158, 255, 0.45);
        background: rgba(59, 158, 255, 0.08);
      }
      .service-title {
        font-family: var(--font-ui);
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -0.02em;
        margin-bottom: 16px;
      }
      .service-desc {
        font-size: 14px;
        color: var(--muted);
        line-height: 1.7;
        margin-bottom: 24px;
      }
      .service-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .service-list li {
        font-size: 12px;
        color: var(--muted);
        letter-spacing: 0.04em;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .service-list li::before {
        content: "-";
        color: var(--accent);
        font-size: 10px;
      }

      /* WORK / CASE STUDIES */
      .work-section {
        background: transparent;
      }
      .work-section:not(.section-bg) {
        background: linear-gradient(
          180deg,
          var(--bg) 0%,
          rgba(17, 17, 17, 0.4) 50%,
          var(--bg) 100%
        );
      }
      .work-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 32px;
      }
      .work-header-cta {
        flex-shrink: 0;
      }
      .form-honey {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
      }
      .work-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 16px;
      }
      .work-filter {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 10px 18px;
        border: 1px solid var(--border);
        background: transparent;
        color: var(--muted);
        border-radius: 2px;
        cursor: pointer;
        transition:
          border-color 0.2s,
          color 0.2s,
          background 0.2s;
        min-height: 40px;
      }
      .work-filter:hover,
      .work-filter.is-active {
        border-color: rgba(59, 158, 255, 0.45);
        color: var(--accent);
        background: var(--accent-dim);
      }
      .work-filter-empty {
        font-family: var(--mono);
        font-size: 12px;
        letter-spacing: 0.06em;
        color: var(--muted);
        text-align: center;
        padding: 48px 20px;
        border: 1px dashed var(--border);
        margin-bottom: 2px;
      }
      .work-disclaimer {
        font-size: 14px;
        color: var(--muted);
        line-height: 1.7;
        margin-bottom: 40px;
        max-width: 560px;
      }
      .case-study.is-filtered-out {
        display: none;
      }
      .case-studies {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }
      .case-study {
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition:
          border-color 0.3s ease,
          transform 0.3s ease,
          box-shadow 0.3s ease;
      }
      .case-study:hover {
        border-color: rgba(59, 158, 255, 0.35);
        transform: translateY(-4px);
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
      }
      .case-visual {
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid var(--border);
        background: #0c0c0c;
      }
      .case-visual--mockup {
        display: flex;
        flex-direction: column;
      }
      .case-browser-bar {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 14px;
        background: #141414;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
      }
      .case-browser-bar > span:nth-child(1) {
        background: rgba(255, 95, 87, 0.85);
      }
      .case-browser-bar > span:nth-child(2) {
        background: rgba(255, 189, 46, 0.85);
      }
      .case-browser-bar > span:nth-child(3) {
        background: rgba(39, 201, 63, 0.85);
      }
      .case-browser-bar > span:nth-child(-n + 3) {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .case-screenshot {
        position: relative;
        aspect-ratio: 16 / 10;
        overflow: hidden;
      }
      .case-screenshot .case-num {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 2;
      }
      .case-screenshot .case-preview-badge {
        position: absolute;
        bottom: 12px;
        right: 12px;
        z-index: 2;
      }
      .case-screenshot::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(10, 10, 10, 0.55) 0%,
          transparent 45%
        );
        pointer-events: none;
      }
      .case-screenshot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
        transition: transform 0.5s ease;
      }
      .case-study:hover .case-screenshot img {
        transform: scale(1.04);
      }
      .case-preview-badge {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--accent);
        padding: 5px 8px;
        background: rgba(10, 10, 10, 0.75);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(59, 158, 255, 0.3);
        border-radius: 2px;
      }
      .case-num {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.1em;
        color: var(--text);
        padding: 6px 10px;
        background: rgba(10, 10, 10, 0.65);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 2px;
      }
      .case-body {
        padding: 28px 28px 32px;
        display: flex;
        flex-direction: column;
        flex: 1;
      }
      .case-label {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 10px;
      }
      .case-title {
        font-family: var(--font-ui);
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.25;
        margin-bottom: 12px;
        color: var(--text);
      }
      .case-metrics {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 14px;
      }
      .case-metric {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 8px 12px;
        background: var(--accent-dim);
        border: 1px solid rgba(59, 158, 255, 0.25);
        border-radius: 4px;
        min-width: 0;
      }
      .case-metric-val {
        font-family: var(--font-ui);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--accent);
        line-height: 1.2;
      }
      .case-metric-label {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .case-desc {
        font-size: 14px;
        color: var(--muted);
        line-height: 1.7;
        margin-bottom: 20px;
        flex: 1;
      }
      .case-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 20px;
      }
      .case-tag {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 5px 10px;
        border: 1px solid var(--border);
        color: var(--muted);
        border-radius: 2px;
      }
      .case-tag--pillar {
        border-color: rgba(59, 158, 255, 0.35);
        background: var(--accent-dim);
        color: var(--accent);
      }
      .case-deliverables {
        padding-top: 16px;
        border-top: 1px solid var(--border);
        margin-bottom: 20px;
      }
      .case-deliverables-label {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
        display: block;
        margin-bottom: 6px;
      }
      .case-deliverables p {
        font-size: 13px;
        color: var(--text);
        line-height: 1.5;
        opacity: 0.85;
      }
      .case-link {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: gap 0.2s ease, opacity 0.2s ease;
        margin-top: auto;
      }
      .case-link::after {
        content: "→";
      }
      .case-link:hover {
        opacity: 0.85;
        gap: 10px;
      }
      .case-link--secondary {
        color: var(--text);
        opacity: 0.75;
      }
      .case-link--secondary:hover {
        color: var(--accent);
        opacity: 1;
      }

      /* PRODUCTS / DELIVERABLES */
      .section-intro {
        color: var(--muted);
        font-size: 16px;
        margin-top: 16px;
        max-width: 520px;
        line-height: 1.7;
      }
      .products-section {
        background: transparent;
      }
      .products-section:not(.section-bg) {
        background: var(--surface);
      }
      .products-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: var(--border);
        border: 1px solid var(--border);
        margin-top: 72px;
      }
      .product-card {
        background: var(--surface);
        padding: 40px;
        position: relative;
        transition: background 0.25s;
        cursor: default;
      }
      .product-card:hover {
        background: rgba(255, 255, 255, 0.04);
      }
      .product-card--cta {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: var(--accent-dim);
        cursor: default;
        grid-column: 1 / -1;
      }
      .product-card--cta:hover {
        background: var(--accent-dim);
      }
      .product-cta-title {
        font-family: var(--font-ui);
        font-size: 18px;
        font-weight: 600;
        color: var(--accent);
        margin-bottom: 12px;
      }
      .product-cta-desc {
        font-size: 13px;
        color: var(--muted);
        margin-bottom: 28px;
        line-height: 1.6;
        max-width: 360px;
      }
      .product-cta-btn {
        font-size: 12px;
        padding: 12px 24px;
      }
      .product-badge {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 5px 10px;
        background: var(--accent-dim);
        color: var(--accent);
        display: inline-block;
        margin-bottom: 24px;
        border-radius: 1px;
      }
      .product-name {
        font-family: var(--font-ui);
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -0.02em;
        margin-bottom: 12px;
      }
      .product-desc {
        font-size: 13px;
        color: var(--muted);
        line-height: 1.7;
        margin-bottom: 28px;
      }
      .product-price {
        font-family: var(--mono);
        font-size: 13px;
        color: var(--text);
      }
      .product-price span {
        font-size: 24px;
        font-family: var(--font-ui);
        font-weight: 600;
        letter-spacing: -0.03em;
        color: var(--accent);
      }
      .product-arrow {
        position: absolute;
        bottom: 40px;
        right: 40px;
        width: 32px;
        height: 32px;
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: var(--muted);
        transition:
          background 0.2s,
          color 0.2s,
          border-color 0.2s;
      }
      .product-card:hover .product-arrow {
        background: var(--accent);
        color: var(--on-accent);
        border-color: var(--accent);
      }

      /* CLIENT VOICES */
      .testimonials-section {
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
      }
      .quotes-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-top: 48px;
      }
      .quote-card {
        margin: 0;
        padding: 32px 28px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
        display: flex;
        flex-direction: column;
        gap: 24px;
        transition:
          border-color 0.2s ease,
          background 0.2s ease;
      }
      .quote-card:hover {
        border-color: rgba(59, 158, 255, 0.3);
        background: rgba(59, 158, 255, 0.03);
      }
      .quote-text {
        font-family: var(--font-display);
        font-size: 17px;
        font-style: italic;
        line-height: 1.65;
        color: var(--text);
        flex: 1;
      }
      .quote-author {
        display: flex;
        flex-direction: column;
        gap: 4px;
        border-top: 1px solid var(--border);
        padding-top: 20px;
      }
      .quote-name {
        font-size: 13px;
        font-weight: 600;
        font-style: normal;
        color: var(--text);
      }
      .quote-role {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--accent);
      }
      .trust-points {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid var(--border);
      }
      .trust-point {
        padding: 20px 22px;
        border: 1px solid var(--border);
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.02);
      }
      .trust-point-title {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 6px;
      }
      .trust-point-desc {
        font-size: 13px;
        color: var(--muted);
        line-height: 1.5;
      }

      /* ENGAGEMENT MODELS */
      .engagement-section {
        background: transparent;
        border-bottom: 1px solid var(--border);
      }
      .engagement-section:not(.section-bg) {
        background: var(--surface);
      }
      .engagement-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-top: 48px;
      }
      .engagement-card {
        position: relative;
        padding: 32px 28px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        display: flex;
        flex-direction: column;
        gap: 16px;
        transition:
          border-color 0.2s ease,
          transform 0.2s ease;
      }
      .engagement-card:hover {
        border-color: rgba(59, 158, 255, 0.35);
        transform: translateY(-2px);
      }
      .engagement-badge {
        position: absolute;
        top: 16px;
        right: 16px;
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent);
        padding: 5px 8px;
        background: var(--accent-dim);
        border: 1px solid rgba(59, 158, 255, 0.3);
        border-radius: 2px;
      }
      .engagement-title {
        font-family: var(--font-ui);
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--text);
      }
      .engagement-card--featured .engagement-title {
        padding-right: 88px;
      }
      .engagement-desc {
        font-size: 14px;
        color: var(--muted);
        line-height: 1.7;
      }
      .engagement-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
      }
      .engagement-list li {
        font-size: 13px;
        color: var(--text);
        padding-left: 16px;
        position: relative;
        line-height: 1.5;
        opacity: 0.9;
      }
      .engagement-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--accent);
      }
      .engagement-best {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
        padding-top: 12px;
        border-top: 1px solid var(--border);
      }
      .engagement-cta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 40px;
      }

      /* CTA BAND */
      .cta-band {
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        background: transparent;
        padding: 64px 48px;
      }
      .cta-band:not(.section-bg) {
        background: linear-gradient(
          135deg,
          rgba(59, 158, 255, 0.08) 0%,
          var(--surface) 50%,
          var(--bg) 100%
        );
      }
      .cta-band-inner {
        max-width: var(--max-width);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
        flex-wrap: wrap;
      }
      .cta-band-title {
        font-family: var(--font-ui);
        font-size: clamp(24px, 3vw, 32px);
        font-weight: 600;
        letter-spacing: -0.03em;
        margin-bottom: 8px;
      }
      .cta-band-sub {
        font-size: 15px;
        color: var(--muted);
        line-height: 1.6;
      }
      .cta-band-actions {
        display: flex;
        gap: 12px;
        flex-shrink: 0;
        flex-wrap: wrap;
      }
      .cta-band--inline {
        border-top: none;
      }

      /* CONTACT */
      .contact-section {
        background: transparent;
        border-top: 1px solid var(--border);
        min-height: 70vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        overflow: hidden;
      }
      .contact-section:not(.section-bg) {
        background: #050505;
      }
      .contact-layout {
        max-width: var(--max-width);
        margin: 0 auto;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 64px;
        align-items: start;
        position: relative;
        z-index: 2;
      }
      .booking-block {
        padding: 28px 24px;
        border: 1px solid rgba(59, 158, 255, 0.25);
        border-radius: 6px;
        background: rgba(59, 158, 255, 0.06);
      }
      .booking-desc {
        font-size: 14px;
        color: var(--muted);
        line-height: 1.6;
        margin-bottom: 20px;
      }
      .booking-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
      }
      .booking-note {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.04em;
        color: var(--muted);
        margin-top: 12px;
        line-height: 1.5;
      }
      .contact-direct {
        padding-top: 8px;
        border-top: 1px solid var(--border);
      }
      .contact-section:not(.section-bg)::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 600px;
        height: 600px;
        background: radial-gradient(
          circle,
          rgba(59, 158, 255, 0.04) 0%,
          transparent 70%
        );
        pointer-events: none;
      }
      .contact-inner {
        max-width: 640px;
        position: relative;
        z-index: 2;
      }
      .contact-h2 {
        font-family: var(--font-display);
        font-size: clamp(44px, 5vw, 80px);
        font-weight: 400;
        letter-spacing: -0.03em;
        line-height: 1.05;
        margin-bottom: 20px;
      }
      .contact-h2 em {
        font-style: italic;
        color: var(--accent);
      }
      .contact-sub {
        font-size: 16px;
        color: var(--muted);
        line-height: 1.7;
        margin-bottom: 48px;
        max-width: 400px;
      }
      .contact-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }
      .form-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .form-label {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .form-input {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--text);
        padding: 14px 16px;
        font-family: var(--sans);
        font-size: var(--text-sm);
        font-weight: 400;
        border-radius: 2px;
        outline: none;
        transition:
          border-color 0.2s,
          background 0.2s;
        width: 100%;
        line-height: 1.5;
      }
      .form-input:focus {
        border-color: var(--accent);
        background: rgba(59, 158, 255, 0.02);
      }
      .form-input::placeholder {
        color: rgba(240, 237, 232, 0.32);
      }
      textarea.form-input {
        resize: none;
        height: 100px;
        font-family: var(--sans);
      }
      select.form-input,
      .form-select {
        appearance: none;
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23f0ede8' fill-opacity='0.45' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 16px center;
        padding-right: 40px;
      }
      select.form-input option {
        background: var(--surface);
        color: var(--text);
      }
      .form-submit {
        margin-top: 8px;
        padding: 16px 40px;
        background: var(--accent);
        color: var(--on-accent);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        border: none;
        border-radius: 2px;
        cursor: pointer;
        align-self: flex-start;
        transition:
          opacity 0.2s,
          transform 0.2s;
        min-height: 44px;
      }
      .form-submit:hover {
        opacity: 0.88;
        transform: translateY(-1px);
      }
      .form-submit:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
      }
      .contact-aside {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding-top: 48px;
        border-left: 1px solid var(--border);
        padding-left: 40px;
      }
      .contact-aside-label {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 12px;
      }
      .contact-email {
        font-family: var(--font-ui);
        font-size: 17px;
        font-weight: 500;
        color: var(--text);
        text-decoration: none;
        display: block;
        margin-bottom: 32px;
        transition: color 0.2s;
        word-break: break-all;
      }
      .contact-email:hover {
        color: var(--accent);
      }
      .contact-perks {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .contact-perks li {
        font-size: 13px;
        color: var(--muted);
        line-height: 1.5;
        padding-left: 16px;
        position: relative;
      }
      .contact-perks li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        width: 5px;
        height: 5px;
        background: var(--accent);
        border-radius: 50%;
      }
      .form-input.is-invalid {
        border-color: #ff6b6b;
      }
      .form-feedback {
        min-height: 20px;
        margin-top: 4px;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.04em;
      }
      .form-feedback.error {
        color: #ff8b8b;
      }
      .form-feedback.success {
        color: var(--accent);
      }

      /* SUBPAGES — legal, cases, insights */
      .subpage-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: rgba(10, 10, 10, 0.92);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--border);
      }
      .subpage-nav-inner {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 16px var(--space-12);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
      }
      .subpage-back {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        text-decoration: none;
        transition: color var(--duration-fast);
      }
      .subpage-back:hover {
        color: var(--accent);
      }
      .subpage-main {
        padding: 120px var(--space-12) var(--space-16);
        max-width: var(--content-narrow);
        margin: 0 auto;
      }
      .subpage-eyebrow {
        font-family: var(--mono);
        font-size: var(--text-xs);
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: var(--space-5);
      }
      .subpage-title {
        font-family: var(--font-display);
        font-size: clamp(32px, 4vw, 48px);
        line-height: 1.1;
        letter-spacing: -0.03em;
        margin-bottom: var(--space-6);
      }
      .subpage-lead {
        font-size: var(--text-lg);
        color: var(--muted);
        line-height: var(--leading-body);
        margin-bottom: var(--space-10);
      }
      .prose h2 {
        font-family: var(--font-ui);
        font-size: 20px;
        font-weight: 600;
        margin: var(--space-10) 0 var(--space-4);
        color: var(--text);
      }
      .prose p,
      .prose li {
        font-size: 15px;
        color: var(--muted);
        line-height: var(--leading-body);
        margin-bottom: var(--space-4);
      }
      .prose ul {
        padding-left: var(--space-6);
        margin-bottom: var(--space-6);
      }
      .prose a {
        color: var(--accent);
      }
      .case-study-hero-img {
        width: 100%;
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        margin: var(--space-8) 0;
        display: block;
      }
      .case-meta-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
        margin: var(--space-8) 0;
      }
      .case-meta-item {
        padding: var(--space-4);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--surface);
      }
      .case-meta-label {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        display: block;
        margin-bottom: var(--space-2);
      }
      .case-meta-value {
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
      }
      .subpage-cta {
        margin-top: var(--space-12);
        padding-top: var(--space-8);
        border-top: 1px solid var(--border);
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
      }
      .insights-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        margin-top: var(--space-8);
      }
      .insights-item {
        display: block;
        padding: var(--space-6);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        text-decoration: none;
        transition:
          border-color var(--duration-base),
          background var(--duration-base);
      }
      .insights-item:hover {
        border-color: rgba(59, 158, 255, 0.35);
        background: rgba(59, 158, 255, 0.04);
      }
      .insights-item-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: var(--space-2);
      }
      .insights-item-desc {
        font-size: 14px;
        color: var(--muted);
        line-height: 1.6;
      }
      .footer-social {
        display: flex;
        gap: var(--space-4);
        margin-top: var(--space-4);
      }
      .footer-social a {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        text-decoration: none;
        transition: color var(--duration-fast);
      }
      .footer-social a:hover {
        color: var(--accent);
      }
      .footer-legal {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
      }
      .footer-legal a {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
        text-decoration: none;
        transition: color var(--duration-fast);
      }
      .footer-legal a:hover {
        color: var(--accent);
      }
      .footer-legal .footer-back {
        color: var(--muted);
      }
      .case-card-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-4);
        margin-top: auto;
        padding-top: var(--space-2);
      }
      .case-card-links .case-link {
        margin-top: 0;
      }

      @media (max-width: 768px) {
        .subpage-main {
          padding: 100px var(--space-5) var(--space-12);
        }
        .subpage-nav-inner {
          padding: 14px var(--space-5);
        }
        .case-meta-grid {
          grid-template-columns: 1fr;
        }
      }

      /* FOOTER */
      footer {
        padding: 64px 48px 32px;
        border-top: 1px solid var(--border);
        background: var(--surface);
      }
      .footer-grid {
        max-width: var(--max-width);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 48px;
        padding-bottom: 48px;
        border-bottom: 1px solid var(--border);
      }
      .footer-col-title {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 20px;
      }
      .footer-col-links {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .footer-col-links a {
        font-size: 14px;
        color: var(--muted);
        text-decoration: none;
        transition: color 0.2s;
      }
      .footer-col-links a:hover {
        color: var(--accent);
      }
      .footer-bottom {
        max-width: var(--max-width);
        margin: 24px auto 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
      }
      .footer-back {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        text-decoration: none;
        transition: color 0.2s;
      }
      .footer-back:hover {
        color: var(--accent);
      }
      .footer-logo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 24px;
        color: var(--text);
        text-decoration: none;
        margin-bottom: 4px;
        transition: opacity 0.2s;
      }
      .footer-logo .logo-img {
        height: 26px;
      }
      .footer-logo:hover {
        opacity: 0.9;
      }
      .footer-tagline {
        font-size: 14px;
        color: var(--muted);
        margin-top: 8px;
        font-family: var(--font-ui);
        font-weight: 400;
        line-height: 1.5;
      }
      .footer-email {
        display: inline-block;
        font-family: var(--mono);
        font-size: 12px;
        color: var(--accent);
        margin-top: 12px;
        text-decoration: none;
        letter-spacing: 0.04em;
        transition: opacity 0.2s;
      }
      .footer-email:hover {
        opacity: 0.8;
      }
      .testi-link {
        color: var(--accent);
        text-decoration: none;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }
      .testi-link:hover {
        opacity: 0.8;
      }
      .footer-copy {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
        letter-spacing: 0.04em;
        margin: 0;
      }

      /* CLIENT LOGOS */
      .clients-row {
        padding: 60px 48px 44px;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        overflow: hidden;
        background: transparent;
      }
      .clients-row:not(.section-bg) {
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.02),
          rgba(255, 255, 255, 0)
        );
      }
      .clients-row-inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
      }
      .clients-label {
        font-family: var(--mono);
        font-size: var(--text-xs);
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
        color: var(--accent);
        white-space: nowrap;
        line-height: 1.3;
        margin: 0;
        flex-shrink: 0;
      }
      .clients-marquee {
        overflow: hidden;
        width: 100%;
      }
      .clients-logos-track {
        display: flex;
        width: max-content;
        animation: marqueeScroll 25s linear infinite;
      }
      .clients-logos-set {
        display: flex;
        gap: 48px;
        align-items: center;
        padding-right: 48px;
      }
      .client-logo {
        font-family: var(--font-ui);
        font-size: 13px;
        font-weight: 500;
        color: rgba(240, 237, 232, 0.32);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        white-space: nowrap;
        transition: color 0.2s;
      }
      .client-logo:hover {
        color: rgba(240, 237, 232, 0.58);
      }

      /* ANIMATIONS */
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(24px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes bentoIn {
        from {
          opacity: 0;
          transform: translateY(20px) scale(0.97);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
      @keyframes bentoFloat {
        0%,
        100% {
          transform: translateY(-50%);
        }
        50% {
          transform: translateY(calc(-50% - 8px));
        }
      }
      @keyframes bentoFloatMobile {
        0%,
        100% {
          transform: none;
        }
        50% {
          transform: translateY(-6px);
        }
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      @keyframes pageFadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      @keyframes marqueeScroll {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }

      .reveal {
        opacity: 0;
        transform: translateY(32px);
        transition:
          opacity 0.8s ease,
          transform 0.8s ease;
      }
      .reveal.visible {
        opacity: 1;
        transform: none;
      }
      .reveal-delay-1 {
        transition-delay: 0.1s;
      }
      .reveal-delay-2 {
        transition-delay: 0.2s;
      }
      .reveal-delay-3 {
        transition-delay: 0.3s;
      }

      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        *,
        *::before,
        *::after {
          animation: none !important;
          transition: none !important;
        }
        .reveal {
          opacity: 1;
          transform: none;
        }
      }

      /* Tablet (768px - 1024px) */
      @media (max-width: 1200px) {
        .nav-links {
          gap: 16px;
        }
        .nav-links a {
          font-size: 10px;
        }
        .nav-cta--desktop {
          padding: 9px 14px;
          font-size: 10px;
        }
      }

      @media (max-width: 1024px) {
        .nav-inner {
          padding: 14px 24px;
        }
        .nav-links {
          flex: none;
        }
        section {
          padding: 100px 32px;
        }
        .hero {
          padding: 96px 32px 60px;
          min-height: auto;
        }
        .stats-bar {
          padding: 32px;
        }
        .stats-bar-inner {
          gap: 16px;
        }
        .stat-item {
          padding: 0 16px;
        }
        .services-grid {
          gap: 2px;
        }
        .products-grid {
          gap: 2px;
        }
        .case-studies {
          grid-template-columns: 1fr;
          gap: 20px;
        }
        .quotes-grid {
          grid-template-columns: 1fr;
        }
        .engagement-grid {
          grid-template-columns: 1fr;
        }
        .trust-points {
          grid-template-columns: repeat(3, 1fr);
        }
        .studio-layout {
          gap: 48px;
        }
        .process-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .contact-layout {
          grid-template-columns: 1fr;
          gap: 48px;
        }
        .contact-aside {
          border-left: none;
          padding-left: 0;
          border-top: 1px solid var(--border);
          padding-top: 40px;
        }
        .contact-direct {
          border-top: none;
          padding-top: 0;
        }
        .footer-grid {
          grid-template-columns: 1fr 1fr;
        }
        .footer-brand {
          grid-column: span 2;
        }

        .nav-menu-btn {
          display: block;
          position: relative;
          z-index: 102;
        }

        .nav-actions {
          gap: 0;
        }

        .nav-links {
          display: none;
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background: rgba(10, 10, 10, 0.98);
          backdrop-filter: blur(20px);
          border-bottom: 1px solid var(--border);
          flex-direction: column;
          gap: 0;
          padding: 16px 0;
          list-style: none;
        }

        .nav-links.mobile-open {
          display: flex;
        }

        .nav-links a {
          padding: 14px 28px;
          display: block;
          border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }

        .nav-cta--desktop {
          display: none;
        }
        .nav-links-cta {
          display: block;
          padding: 16px 20px 8px;
        }
        .nav-cta--in-menu {
          display: flex;
          width: 100%;
          justify-content: center;
        }
      }

      /* Mobile (max 768px) */
      @media (max-width: 768px) {
        .nav-inner {
          padding: 14px 20px;
        }
        .nav-logo {
          font-size: 17px;
          gap: 10px;
        }
        .nav-logo .logo-img {
          height: 24px;
        }
        .hero-pills {
          gap: 6px;
        }
        .hero-pill {
          font-size: 9px;
          padding: 7px 10px;
        }
        .process-grid {
          grid-template-columns: 1fr;
        }
        .cta-band {
          padding: 48px 20px;
        }
        .cta-band-inner {
          flex-direction: column;
          align-items: flex-start;
        }
        .cta-band-actions {
          width: 100%;
          flex-direction: column;
        }
        .cta-band-actions .btn-primary,
        .cta-band-actions .btn-ghost {
          width: 100%;
          justify-content: center;
        }
        .footer-grid {
          grid-template-columns: 1fr;
          gap: 32px;
        }
        .footer-brand {
          grid-column: span 1;
        }

        .nav-menu-btn {
          display: block;
          position: relative;
          z-index: 102;
        }

        .nav-links {
          display: none;
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background: rgba(10, 10, 10, 0.98);
          backdrop-filter: blur(20px);
          border-bottom: 1px solid var(--border);
          flex-direction: column;
          gap: 0;
          padding: 20px 0;
          list-style: none;
        }

        .nav-links.mobile-open {
          display: flex;
        }

        .nav-links a {
          padding: 14px 20px;
          display: block;
          border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }

        .nav-cta--desktop {
          display: none;
        }
        .nav-links-cta {
          display: block;
          padding: 16px 20px 8px;
        }
        .nav-cta--in-menu {
          display: flex;
          width: 100%;
          justify-content: center;
        }

        section {
          padding: 60px 20px;
        }
        .hero {
          padding: 92px 20px 40px;
          min-height: auto;
          justify-content: flex-start;
        }

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

        .hero-visual {
          order: -1;
          overflow: hidden;
        }
        .hero-bento {
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: repeat(2, 120px);
          height: auto;
          gap: 8px;
        }
        .bento-cell:hover {
          transform: none;
          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
        }
        .bento-cell:hover img {
          transform: none;
        }
        .bento-float-card {
          width: 56px;
          height: 56px;
          right: 10px;
          top: auto;
          bottom: 10px;
          transform: none;
          box-shadow:
            0 8px 24px rgba(59, 158, 255, 0.35),
            0 0 0 4px rgba(10, 10, 10, 0.9);
          animation:
            bentoIn 0.8s ease 1.3s both,
            bentoFloatMobile 4s ease-in-out 2s infinite;
        }
        .bento-float-num {
          font-size: 18px;
        }
        .bento-float-text {
          font-size: 7px;
          line-height: 1.25;
        }

        .hero h1 {
          font-size: clamp(24px, 6.5vw, 36px);
          line-height: 1.12;
          max-width: 100%;
        }

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

        .hero-ctas {
          flex-direction: column;
          gap: 12px;
          margin-top: 32px;
        }
        .hero-marquee-wrap {
          margin-top: 40px;
          padding-top: 20px;
          max-width: 100%;
        }

        .btn-primary,
        .btn-ghost {
          width: 100%;
          justify-content: center;
          padding: 14px 20px;
          font-size: 13px;
        }

        .stats-bar {
          padding: 24px 20px;
        }
        .stats-bar-inner {
          grid-template-columns: 1fr 1fr;
          gap: 20px;
        }
        .stat-item {
          border-right: none;
          border-bottom: 1px solid var(--border);
          padding: 0 0 20px;
        }
        .stat-item:nth-child(odd) {
          border-right: 1px solid var(--border);
        }
        .stat-item:nth-child(3),
        .stat-item:nth-child(4) {
          border-bottom: none;
        }
        .stat-num {
          font-size: 32px;
        }

        .hero-grid-lines {
          background-size: 40px 40px;
        }

        .studio-layout {
          grid-template-columns: 1fr;
          gap: 40px;
        }

        .services-grid {
          grid-template-columns: 1fr;
        }
        .service-card {
          padding: 32px 20px;
        }
        .service-visual {
          margin: -32px -20px 24px;
          height: 180px;
        }
        .work-section .section-h2 {
          font-size: clamp(28px, 7vw, 40px);
        }
        .work-disclaimer {
          font-size: 13px;
          margin-bottom: 28px;
        }
        .work-header-cta {
          width: 100%;
          justify-content: center;
          text-align: center;
        }
        .work-filters {
          flex-wrap: nowrap;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
          gap: 8px;
          margin-bottom: 20px;
          margin-left: -20px;
          margin-right: -20px;
          padding-left: 20px;
          padding-right: 20px;
          padding-bottom: 4px;
        }
        .work-filters::-webkit-scrollbar {
          display: none;
        }
        .work-filter {
          flex-shrink: 0;
          padding: 10px 14px;
          font-size: 10px;
          min-height: 44px;
        }
        .service-title {
          font-size: 18px;
        }
        .service-desc {
          font-size: 13px;
        }

        .case-studies {
          grid-template-columns: 1fr;
          gap: 16px;
        }
        .case-study:hover {
          transform: none;
          box-shadow: none;
        }
        .case-browser-bar {
          padding: 8px 12px;
        }
        .case-browser-bar > span:nth-child(-n + 3) {
          width: 7px;
          height: 7px;
        }
        .case-screenshot {
          aspect-ratio: 16 / 11;
        }
        .case-body {
          padding: 22px 20px 26px;
        }
        .case-title {
          font-size: 18px;
        }
        .case-desc {
          font-size: 13px;
          margin-bottom: 16px;
        }
        .case-tags {
          gap: 6px;
          margin-bottom: 16px;
        }
        .case-tag {
          font-size: 9px;
          padding: 6px 9px;
        }
        .case-deliverables {
          padding-top: 14px;
          margin-bottom: 16px;
        }
        .case-link {
          min-height: 44px;
          align-items: center;
          padding: 4px 0;
        }

        .products-grid {
          grid-template-columns: 1fr;
        }
        .product-card--cta {
          grid-column: span 1;
        }
        .product-card {
          padding: 28px 20px;
          position: relative;
        }
        .product-badge {
          margin-bottom: 16px;
        }
        .product-name {
          font-size: 18px;
        }
        .product-desc {
          font-size: 12px;
        }
        .product-arrow {
          position: static;
          margin-top: 16px;
          width: auto;
          height: auto;
          border: none;
          font-size: 16px;
        }

        .quotes-grid {
          grid-template-columns: 1fr;
        }
        .quote-card {
          padding: 28px 22px;
        }
        .quote-text {
          font-size: 15px;
        }
        .trust-points {
          grid-template-columns: 1fr;
        }
        .engagement-grid {
          grid-template-columns: 1fr;
        }
        .engagement-title {
          padding-right: 0;
          font-size: 20px;
        }
        .engagement-cta {
          flex-direction: column;
        }
        .engagement-cta .btn-primary,
        .engagement-cta .btn-ghost {
          width: 100%;
          justify-content: center;
        }
        .case-metrics {
          gap: 8px;
        }
        .case-metric-val {
          font-size: 14px;
        }

        .contact-section {
          padding: 60px 20px;
          min-height: auto;
        }
        .contact-inner {
          max-width: 100%;
        }
        .contact-h2 {
          font-size: clamp(28px, 7vw, 48px);
          margin-bottom: 16px;
        }
        .contact-sub {
          font-size: 14px;
        }

        .contact-section:not(.section-bg)::before {
          width: 400px;
          height: 400px;
        }
        .section-bg--contact::before {
          background-size: 280px auto;
        }
        .section-bg--cta-main::before {
          background-size: 320px auto;
          background-position: center bottom;
        }

        .form-row {
          grid-template-columns: 1fr;
          gap: 12px;
        }
        .form-field {
          gap: 6px;
        }
        .form-input {
          padding: 12px 14px;
          font-size: 14px;
        }
        textarea.form-input {
          height: 80px;
        }

        .form-submit {
          width: 100%;
          padding: 14px 20px;
          margin-top: 8px;
        }

        footer {
          padding: 40px 20px 24px;
        }
        .footer-bottom {
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;
        }

        .work-header {
          flex-direction: column;
          gap: 20px;
          align-items: flex-start;
        }

        .clients-row {
          padding: 28px 20px 24px;
        }
        .clients-label {
          margin: 0;
        }
        .clients-logos-set {
          gap: 28px;
        }

        .section-h2 {
          font-size: clamp(24px, 6vw, 42px);
        }
      }

      /* Extra small mobile (max 480px) */
      @media (max-width: 480px) {
        .nav-inner {
          padding: 12px 16px;
        }

        section {
          padding: 48px 16px;
        }
        .hero {
          padding: 88px 16px 32px;
        }

        .hero-inner {
          gap: 32px;
        }
        .hero-bento {
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: repeat(2, 100px);
          gap: 6px;
        }
        .bento-label {
          font-size: 8px;
          bottom: 8px;
          left: 8px;
          padding: 4px 7px;
          letter-spacing: 0.06em;
        }
        .bento-float-card {
          width: 50px;
          height: 50px;
          right: 8px;
          bottom: 8px;
        }
        .bento-float-num {
          font-size: 16px;
        }
        .bento-float-text {
          font-size: 6px;
        }

        .hero h1 {
          font-size: clamp(21px, 6vw, 30px);
        }
        .hero-label {
          font-size: 10px;
          margin-bottom: 20px;
        }
        .hero-sub {
          font-size: 13px;
          margin-top: 20px;
        }
        .hero-ctas {
          margin-top: 24px;
        }

        .btn-primary,
        .btn-ghost {
          padding: 12px 16px;
          font-size: 12px;
        }

        .stats-bar {
          padding: 20px 16px;
        }
        .stats-bar-inner {
          grid-template-columns: 1fr;
          gap: 16px;
        }
        .stat-item {
          border-right: none !important;
          border-bottom: 1px solid var(--border) !important;
          padding: 0 0 16px;
        }
        .stat-item:last-child {
          border-bottom: none !important;
        }
        .stat-num {
          font-size: 24px;
        }
        .stat-label {
          font-size: 11px;
          margin-top: 6px;
        }
        .hero-trust {
          font-size: 9px;
          margin-top: 16px;
        }

        .studio-layout {
          gap: 32px;
        }
        .studio-text p {
          font-size: 14px;
        }

        .service-card {
          padding: 24px 16px;
          border: 1px solid var(--border);
          margin-bottom: 12px;
        }
        .service-visual {
          margin: -24px -16px 20px;
          height: 160px;
        }
        .service-title {
          font-size: 16px;
          margin-bottom: 12px;
        }

        .work-filters {
          margin-left: -16px;
          margin-right: -16px;
          padding-left: 16px;
          padding-right: 16px;
        }
        .work-filter {
          padding: 8px 12px;
          font-size: 9px;
        }
        .work-disclaimer {
          font-size: 12px;
          margin-bottom: 24px;
        }
        .case-studies {
          gap: 14px;
        }
        .case-body {
          padding: 18px 16px 22px;
        }
        .case-screenshot .case-num {
          top: 10px;
          left: 10px;
          font-size: 10px;
          padding: 5px 8px;
        }
        .case-preview-badge {
          bottom: 10px;
          right: 10px;
          font-size: 8px;
          padding: 4px 7px;
        }
        .case-label {
          font-size: 9px;
        }
        .case-title {
          font-size: 17px;
        }
        .case-desc {
          font-size: 13px;
        }

        .product-card {
          padding: 24px 16px;
        }
        .product-name {
          font-size: 16px;
        }
        .product-badge {
          font-size: 9px;
        }

        .quote-card {
          padding: 24px 18px;
        }
        .quote-text {
          font-size: 14px;
        }
        .engagement-card {
          padding: 24px 20px;
        }
        .booking-block {
          padding: 22px 18px;
        }

        .contact-section {
          padding: 48px 16px;
        }
        .contact-h2 {
          font-size: clamp(22px, 6vw, 36px);
        }
        .contact-sub {
          font-size: 13px;
        }

        footer {
          padding: 32px 16px;
          gap: 20px;
        }
        .footer-logo {
          font-size: 20px;
        }

        .section-h2 {
          font-size: clamp(20px, 5vw, 32px);
        }

        .marquee {
          gap: 40px;
        }
        .marquee span {
          font-size: 12px;
        }

        .clients-logos-set {
          gap: 20px;
        }
        .client-logo {
          font-size: 11px;
        }
      }

      /* Landscape mobile (max 768px height) */
      @media (max-height: 768px) and (max-width: 768px) {
        .hero {
          padding-top: 60px;
          padding-bottom: 20px;
        }
        .hero h1 {
          font-size: clamp(20px, 5.5vw, 32px);
        }
        section {
          padding: 48px 16px;
        }
      }