/* ==========================================================================

       CSS VARIABLES & THEME ARCHITECTURE

       ========================================================================== */

    :root {

      --bg-primary: #f7f7f8;

      --bg-secondary: #ffffff;

      --bg-tertiary: #ebecee;

      --text-main: #0c0d0e;

      --text-muted: #5a5e66;

      --accent: #000000;

      --accent-highlight: #ff3300;

      --border-color: rgba(12, 13, 14, 0.12);

      --card-bg: #ffffff;

      --tag-bg: #e4e6ea;

      --grid-line: rgba(0, 0, 0, 0.035);

      --glass-bg: rgba(255, 255, 255, 0.9);

      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);

      --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.08);

      --font-heading: 'Space Grotesk', -apple-system, sans-serif;

      --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;

      --font-mono: 'JetBrains Mono', monospace;

      --transition-smooth: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    }



    *, *::before, *::after {

      box-sizing: border-box;

      margin: 0;

      padding: 0;

    }



    html {

      scroll-behavior: smooth;

      font-size: 16px;

    }



    body {

      background-color: var(--bg-primary);

      color: var(--text-main);

      font-family: var(--font-body);

      line-height: 1.6;

      overflow-x: hidden;

      transition: background-color 0.4s ease, color 0.4s ease;

      background-image: 

        linear-gradient(var(--grid-line) 1px, transparent 1px),

        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);

      background-size: 40px 40px;

    }



    a {

      color: inherit;

      text-decoration: none;

    }



    img, video {

      max-width: 100%;

      height: auto;

      display: block;

    }



    .eyebrow {

      font-family: var(--font-mono);

      font-size: 0.8rem;

      text-transform: uppercase;

      letter-spacing: 0.08em;

      color: var(--accent-highlight);

      margin-bottom: 0.75rem;

      display: block;

    }



    /* ==========================================================================

       PERSISTENT HEADER & STUDIO NAVIGATION

       ========================================================================== */

    .header {

      position: fixed;

      top: 0;

      left: 0;

      width: 100%;

      z-index: 1000;

      padding: 1.25rem 2.5rem;

      display: flex;

      justify-content: space-between;

      align-items: center;

      background: var(--glass-bg);

      backdrop-filter: blur(16px);

      -webkit-backdrop-filter: blur(16px);

      border-bottom: 1px solid var(--border-color);

      transition: var(--transition-smooth);

    }



    .studio-mark {

      display: flex;

      align-items: center;

      gap: 0.75rem;

      text-decoration: none;

      transition: opacity 0.2s ease;

    }



    .studio-mark:hover {

      opacity: 0.85;

    }



    .studio-mark img {

      height: 32px;

      width: auto;

      object-fit: contain;

    }



    .nav-right-group {

      display: flex;

      align-items: center;

      gap: 2rem;

    }



    .nav-menu-list {

      display: flex;

      align-items: center;

      gap: 1.75rem;

      list-style: none;

    }



    .nav-menu-link {

      font-family: var(--font-mono);

      font-size: 0.92rem;

      font-weight: 700;

      text-transform: uppercase;

      letter-spacing: 0.05em;

      color: var(--text-muted);

      transition: color 0.2s ease;

    }



    .nav-menu-link:hover {

      color: var(--text-main);

    }



    .btn-contact-icon {

      width: 40px;

      height: 40px;

      border-radius: 50%;

      background: var(--accent);

      color: var(--bg-primary);

      display: flex;

      align-items: center;

      justify-content: center;

      transition: var(--transition-smooth);

    }



    .btn-contact-icon:hover {

      transform: scale(1.08);

      background: var(--accent-highlight);

      color: #ffffff;

    }





    /* ==========================================================================

       LAYER 01: PROJECT INTRODUCTION & COMMERCIAL SHOWCASE

       ========================================================================== */

    .hero-layer {

      padding: 9rem 2.5rem 4rem;

      max-width: 1400px;

      margin: 0 auto;

    }



    .hero-title {

      font-family: var(--font-heading);

      font-size: clamp(3rem, 7vw, 6rem);

      font-weight: 800;

      line-height: 0.98;

      letter-spacing: -0.03em;

      margin-bottom: 2rem;

      text-transform: uppercase;

    }



    .hero-title span {

      display: block;

      color: var(--text-muted);

      font-weight: 400;

      font-size: clamp(1.2rem, 2.5vw, 2.2rem);

      letter-spacing: -0.01em;

      margin-top: 0.5rem;

      text-transform: none;

    }



    .hero-grid {

      display: grid;

      grid-template-columns: 2fr 1.2fr;

      gap: 3.5rem;

      align-items: start;

      border-top: 1px solid var(--border-color);

      padding-top: 2.5rem;

    }



    .hero-lead {

      font-size: clamp(1.15rem, 1.8vw, 1.45rem);

      font-weight: 400;

      color: var(--text-main);

      line-height: 1.5;

    }



    .hero-specs {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 1.75rem;

      background: var(--card-bg);

      border: 1px solid var(--border-color);

      padding: 1.75rem;

      border-radius: 14px;

    }



    .spec-item {

      border-left: 2px solid var(--accent-highlight);

      padding-left: 0.85rem;

    }



    .spec-label {

      font-family: var(--font-mono);

      font-size: 0.72rem;

      color: var(--text-muted);

      text-transform: uppercase;

    }



    .spec-value {

      font-weight: 600;

      font-size: 0.92rem;

      margin-top: 0.25rem;

    }



    /* Production Video Showcase Container */

    .commercial-showcase {

      max-width: 1400px;

      margin: 2rem auto 6rem;

      padding: 0 2.5rem;

    }



    .video-player-container {

      position: relative;

      width: 100%;

      aspect-ratio: 16 / 9;

      background-color: #000;

      border-radius: 18px;

      overflow: hidden;

      box-shadow: var(--shadow-lg);

      border: 1px solid var(--border-color);

    }



    .video-element {

      width: 100%;

      height: 100%;

      object-fit: cover;

      display: block;

    }



    .video-cover-art {

      position: absolute;

      inset: 0;

      width: 100%;

      height: 100%;

      object-fit: cover;

      z-index: 2;

      transition: opacity 0.5s ease;

      cursor: pointer;

    }



    .play-btn-center {

      position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

      z-index: 3;

      width: 84px;

      height: 84px;

      border-radius: 50%;

      background: rgba(0, 0, 0, 0.7);

      backdrop-filter: blur(12px);

      border: 2px solid rgba(255, 255, 255, 0.8);

      color: #fff;

      display: flex;

      align-items: center;

      justify-content: center;

      cursor: pointer;

      transition: transform 0.2s ease, background 0.2s ease;

    }



    .play-btn-center:hover {

      transform: translate(-50%, -50%) scale(1.1);

      background: var(--accent-highlight);

      border-color: var(--accent-highlight);

    }



    .play-icon-svg {

      width: 32px;

      height: 32px;

      fill: #ffffff;

      margin-left: 4px;

    }



    .audio-btn-topright {

      position: absolute;

      top: 20px;

      right: 20px;

      z-index: 3;

      width: 48px;

      height: 48px;

      border-radius: 50%;

      background: rgba(0, 0, 0, 0.7);

      backdrop-filter: blur(10px);

      border: 1px solid rgba(255, 255, 255, 0.3);

      color: #fff;

      display: flex;

      align-items: center;

      justify-content: center;

      cursor: pointer;

      transition: background 0.2s ease;

    }



    .audio-btn-topright:hover {

      background: rgba(0, 0, 0, 0.95);

      border-color: var(--accent-highlight);

    }



    /* ==========================================================================

       LAYER 02: MOTION PRODUCTION ASSETS & PRODUCT TIERS

       ========================================================================== */

    .motion-layer {

      padding: 6rem 2.5rem;

      max-width: 1400px;

      margin: 0 auto;

    }



    .layer-header {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 3rem;

      margin-bottom: 4rem;

      align-items: start;

    }



    .layer-header h2 {

      font-family: var(--font-heading);

      font-size: clamp(2.25rem, 4.5vw, 3.5rem);

      font-weight: 800;

      line-height: 1.05;

      text-transform: uppercase;

      letter-spacing: -0.02em;

    }



    .layer-header p {

      font-size: 1.15rem;

      color: var(--text-muted);

      line-height: 1.6;

    }



    .asset-capabilities-grid {

      display: grid;

      grid-template-columns: repeat(5, 1fr);

      gap: 1.25rem;

      margin-bottom: 4rem;

    }



    .capability-card {

      background: var(--card-bg);

      border: 1px solid var(--border-color);

      border-radius: 12px;

      padding: 1.5rem;

      transition: var(--transition-smooth);

    }



    .capability-card:hover {

      border-color: var(--text-main);

      transform: translateY(-3px);

    }



    .capability-num {

      font-family: var(--font-mono);

      font-size: 0.72rem;

      color: var(--accent-highlight);

      display: block;

      margin-bottom: 0.75rem;

    }



    .capability-card h3 {

      font-family: var(--font-heading);

      font-size: 1.05rem;

      font-weight: 700;

      margin-bottom: 0.35rem;

    }



    .capability-card p {

      font-size: 0.82rem;

      color: var(--text-muted);

      line-height: 1.45;

    }



    /* Motion Asset Tier Cards Table/Grid */

    .motion-tier-grid {

      display: grid;

      grid-template-columns: repeat(4, 1fr);

      gap: 1.5rem;

      margin-bottom: 3.5rem;

    }



    .tier-card {

      background: var(--card-bg);

      border: 1px solid var(--border-color);

      border-radius: 16px;

      padding: 2.25rem 1.75rem;

      display: flex;

      flex-direction: column;

      position: relative;

      transition: var(--transition-smooth);

    }



    .tier-card.featured {

      border: 2px solid var(--accent-highlight);

      box-shadow: var(--shadow-lg);

    }



    .tier-badge-top {

      display: flex;

      justify-content: space-between;

      align-items: center;

      font-family: var(--font-mono);

      font-size: 0.72rem;

      color: var(--text-muted);

      margin-bottom: 1.25rem;

    }



    .tier-resolution {

      font-family: var(--font-heading);

      font-size: 2.75rem;

      font-weight: 800;

      color: var(--text-main);

      margin-bottom: 0.15rem;

      line-height: 1;

    }



    .tier-card h3 {

      font-family: var(--font-heading);

      font-size: 1.25rem;

      font-weight: 700;

      text-transform: uppercase;

      margin-bottom: 0.85rem;

    }



    .tier-card > p {

      font-size: 0.88rem;

      color: var(--text-muted);

      margin-bottom: 1.5rem;

      line-height: 1.5;

    }



    .tier-features {

      list-style: none;

      margin-bottom: 2rem;

      flex-grow: 1;

      border-top: 1px solid var(--border-color);

      padding-top: 1rem;

    }



    .tier-features li {

      font-size: 0.85rem;

      padding: 0.4rem 0;

      color: var(--text-main);

      display: flex;

      align-items: center;

      gap: 0.5rem;

    }



    .tier-features li::before {

      content: "✓";

      color: var(--accent-highlight);

      font-weight: bold;

    }



    .btn-checkout {

      display: block;

      width: 100%;

      text-align: center;

      background: var(--bg-tertiary);

      border: 1px solid var(--border-color);

      color: var(--text-main);

      padding: 0.75rem 1rem;

      border-radius: 8px;

      font-family: var(--font-mono);

      font-size: 0.82rem;

      font-weight: 600;

      text-transform: uppercase;

      letter-spacing: 0.05em;

      transition: var(--transition-smooth);

    }



    .btn-checkout:hover {

      background: var(--accent-highlight);

      color: #ffffff;

      border-color: var(--accent-highlight);

    }



    /* Storefront Provider Links */

    .checkout-platforms {

      background: var(--bg-tertiary);

      border: 1px solid var(--border-color);

      border-radius: 16px;

      padding: 2.25rem 2.5rem;

      display: flex;

      justify-content: space-between;

      align-items: center;

      gap: 2rem;

    }



    .checkout-platforms-copy {

      max-width: 660px;

    }



    .checkout-platforms-copy h3 {

      margin: 0 0 0.55rem;

      font-family: var(--font-heading);

      font-size: 1.2rem;

      font-weight: 700;

      color: var(--text-main);

    }



    .checkout-platforms-copy p {

      margin: 0;

      font-size: 0.95rem;

      line-height: 1.65;

      color: var(--text-muted);

    }



    .tier-selection-note {

      margin-top: auto;

      padding-top: 1rem;

      color: var(--text-muted);

      font-family: var(--font-mono);

      font-size: 0.72rem;

      font-weight: 600;

      letter-spacing: 0.04em;

      text-transform: uppercase;

    }



    .template-storefronts {

      margin-top: 2rem;

    }



    .framer-direct-link {

      display: inline-flex;

      align-items: center;

      min-height: 42px;

      padding: 0.55rem 0.9rem;

      border: 1px solid var(--border-color);

      border-radius: 8px;

      color: var(--text-main);

      font-family: var(--font-mono);

      font-size: 0.78rem;

      font-weight: 700;

      letter-spacing: 0.04em;

      text-transform: uppercase;

      transition: var(--transition-smooth);

    }



    .framer-direct-link:hover {

      color: #fff;

      background: var(--accent-highlight);

      border-color: var(--accent-highlight);

      transform: translateY(-2px);

    }



    .platform-links {

      display: flex;

      align-items: center;

      gap: 1.5rem;

      flex-wrap: wrap;

    }



    .platform-logo-link {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      min-height: 42px;

      opacity: 0.68;

      filter: grayscale(1);

      transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;

    }



    .platform-logo-link img {

      display: block;

      width: auto;

      max-width: 132px;

      max-height: 28px;

      object-fit: contain;

    }



    .platform-logo-link:hover {

      opacity: 1;

      filter: grayscale(0);

      transform: translateY(-2px);

    }



    /* ==========================================================================

       LAYER 03: WEB EXPERIENCE & TEMPLATE STOREFRONT

       ========================================================================== */

    .web-layer {

      padding: 6rem 2.5rem;

      max-width: 1400px;

      margin: 0 auto;

      border-top: 1px solid var(--border-color);

    }



    /* Interactive Prototype Cover Banner */

    .prototype-showcase-container {

      position: relative;

      margin-bottom: 4rem;

      border-radius: 20px;

      overflow: hidden;

      border: 1px solid var(--border-color);

      box-shadow: var(--shadow-lg);

      background: var(--bg-secondary);

    }



    .prototype-cover-img {

      width: 100%;

      height: auto;

      display: block;

      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

    }



    .prototype-showcase-container:hover .prototype-cover-img {

      transform: scale(1.03);

    }



    /* Prototype guidance panel */

    .prototype-guidance {

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 2.5rem;

      margin: 0 0 4rem;

      padding: 2.5rem 2.75rem;

      background: var(--card-bg);

      border: 1px solid var(--border-color);

      border-radius: 16px;

      box-shadow: var(--shadow-sm);

    }



    .prototype-guidance > div {

      max-width: 760px;

    }



    .prototype-guidance h3 {

      margin: 0.65rem 0 0.75rem;

      font-family: var(--font-heading);

      font-size: clamp(1.65rem, 2.6vw, 2.25rem);

      line-height: 1.12;

      font-weight: 700;

      letter-spacing: -0.035em;

      color: var(--text-main);

    }



    .prototype-guidance p {

      max-width: 720px;

      margin: 0;

      color: var(--text-muted);

      font-size: 0.96rem;

      line-height: 1.7;

    }



    .prototype-text-link {

      display: inline-flex;

      flex: 0 0 auto;

      align-items: center;

      justify-content: center;

      gap: 0.75rem;

      padding: 1rem 1.4rem;

      background: var(--accent-highlight);

      border: 1px solid var(--accent-highlight);

      border-radius: 8px;

      color: #fff;

      font-family: var(--font-mono);

      font-size: 0.82rem;

      font-weight: 700;

      letter-spacing: 0.045em;

      text-transform: uppercase;

      text-decoration: none;

      white-space: nowrap;

      transition: var(--transition-smooth);

    }



    .prototype-text-link:hover {

      background: var(--bg-tertiary);

      border-color: var(--accent-highlight);

      color: var(--text-main);

      transform: translateY(-2px);

      box-shadow: var(--shadow-md);

    }



    /* Website Template Packages Grid */

    .template-tier-grid {

      display: grid;

      grid-template-columns: repeat(3, 1fr);

      gap: 2rem;

    }



    .template-card {

      background: var(--card-bg);

      border: 1px solid var(--border-color);

      border-radius: 16px;

      padding: 2.5rem 2rem;

      display: flex;

      flex-direction: column;

      transition: var(--transition-smooth);

    }



    .template-card:hover {

      border-color: var(--accent-highlight);

      transform: translateY(-4px);

    }



    .template-card h3 {

      font-family: var(--font-heading);

      font-size: 1.5rem;

      font-weight: 700;

      margin-bottom: 0.5rem;

    }



    .template-price {

      font-family: var(--font-heading);

      font-size: 2.25rem;

      font-weight: 800;

      color: var(--accent-highlight);

      margin-bottom: 1.25rem;

    }



    .template-card p {

      font-size: 0.9rem;

      color: var(--text-muted);

      line-height: 1.55;

      margin-bottom: 1.75rem;

    }



    .template-specs {

      list-style: none;

      margin-bottom: 2.5rem;

      flex-grow: 1;

      border-top: 1px solid var(--border-color);

      padding-top: 1.25rem;

    }



    .template-specs li {

      font-size: 0.88rem;

      padding: 0.45rem 0;

      color: var(--text-main);

      display: flex;

      align-items: center;

      gap: 0.5rem;

    }



    .template-specs li::before {

      content: "→";

      color: var(--accent-highlight);

    }



    /* ==========================================================================

       LAYER 04: PORTFOLIO NAVIGATION & EXPLORE THE WORK

       ========================================================================== */

    .explore-work-section {

      padding: 6rem 2.5rem;

      max-width: 1400px;

      margin: 0 auto;


    }



    .explore-work-header {

      display: flex;

      justify-content: space-between;

      align-items: flex-end;

      margin-bottom: 2.5rem;

    }



    .explore-work-header h2 {

      font-family: var(--font-heading);

      font-size: clamp(2rem, 4vw, 3rem);

      font-weight: 800;

      text-transform: uppercase;

      letter-spacing: -0.02em;

    }



    .explore-controls {

      display: flex;

      gap: 0.75rem;

    }



    .explore-control {

      width: 48px;

      height: 48px;

      border-radius: 50%;

      background: var(--card-bg);

      border: 1px solid var(--border-color);

      color: var(--text-main);

      display: flex;

      align-items: center;

      justify-content: center;

      cursor: pointer;

      font-size: 1.25rem;

      transition: var(--transition-smooth);

    }



    .explore-control:hover {

      background: var(--text-main);

      color: var(--bg-primary);

      border-color: var(--text-main);

    }



    .explore-carousel {

      display: flex;

      gap: 1.75rem;

      overflow-x: auto;

      scroll-snap-type: x mandatory;

      scrollbar-width: none;

      -ms-overflow-style: none;

      padding-bottom: 1.5rem;

    }



    .explore-carousel::-webkit-scrollbar {

      display: none;

    }



    .explore-card {

      flex: 0 0 290px;

      scroll-snap-align: start;

      display: flex;

      flex-direction: column;

      background: var(--card-bg);

      border: 1px solid var(--border-color);

      border-radius: 14px;

      overflow: hidden;

      transition: var(--transition-smooth);

    }



    .explore-card:hover {

      transform: translateY(-6px);

      border-color: var(--accent-highlight);

      box-shadow: var(--shadow-lg);

    }



    .explore-card-media {

      width: 100%;

      height: 350px;

      background: var(--bg-tertiary);

      overflow: hidden;

      position: relative;

    }



    .explore-card-media img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      transition: transform 0.5s ease;

    }



    .explore-card:hover .explore-card-media img {

      transform: scale(1.06);

    }



    .explore-card-meta {

      padding: 1.25rem 1.25rem 1.5rem;

      display: flex;

      flex-direction: column;

      gap: 0.35rem;

    }



    .explore-card-kicker {

      font-family: var(--font-mono);

      font-size: 0.72rem;

      color: var(--accent-highlight);

      text-transform: uppercase;

    }



    .explore-card-title {

      font-family: var(--font-heading);

      font-size: 1.2rem;

      font-weight: 700;

      color: var(--text-main);

    }



    .explore-card-description {

      font-size: 0.85rem;

      color: var(--text-muted);

      line-height: 1.4;

    }



    /* ==========================================================================

       STUDIO FOOTER & SOCIAL LINKS

       ========================================================================== */

    .footer {

      background: var(--bg-secondary);

      border-top: 1px solid var(--border-color);

      padding: 5rem 2.5rem 3rem;

      margin-top: 4rem;

    }



    .footer-inner {

      max-width: 1400px;

      margin: 0 auto;

      display: flex;

      flex-direction: column;

      justify-content: center;

      align-items: center;

      text-align: center;

      gap: 2rem;

    }



    .footer-brand {

      display: flex;

      align-items: center;

      justify-content: center;

    }



    .footer-brand img {

      height: 52px;

      width: auto;

      display: block;

    }



    .footer-social-links {

      display: flex;

      align-items: center;

      gap: 2rem;

      list-style: none;

      justify-content: center;

      flex-wrap: wrap;

    }



    .footer-social-logo {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      min-width: 34px;

      min-height: 34px;

      opacity: 0.62;

      filter: grayscale(1);

      transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;

    }

    .footer-social-logo img {

      display: block;

      width: auto;

      max-width: 104px;

      max-height: 26px;

      object-fit: contain;

    }

    .footer-social-logo:hover {

      opacity: 1;

      filter: grayscale(0);

      transform: translateY(-2px);

    }



    .copyright {

      width: 100%;

      border-top: 1px solid var(--border-color);

      padding-top: 2rem;

      margin-top: 2rem;

      display: flex;

      justify-content: center;

      text-align: center;

      font-family: var(--font-mono);

      font-size: 0.75rem;

      color: var(--text-muted);

    }





    .explore-all-media {

      display: flex;

      align-items: flex-end;

      justify-content: flex-start;

      min-height: 100%;

      padding: 2rem;

      background: var(--bg-tertiary);

    }

    .explore-all-copy {

      display: flex;

      flex-direction: column;

      gap: 0.55rem;

      max-width: 220px;

      font-family: var(--font-heading);

      font-size: clamp(1.8rem, 3vw, 2.5rem);

      line-height: 1.05;

      font-weight: 700;

      letter-spacing: -0.045em;

    }

    .explore-all-copy span {

      color: var(--text-muted);

      font-family: var(--font-mono);

      font-size: 0.78rem;

      line-height: 1.5;

      font-weight: 500;

      letter-spacing: 0.02em;

      text-transform: uppercase;

    }

    .studio-cta-section {

      padding: clamp(4rem, 9vw, 8rem) 2.5rem;

      margin: 2rem auto 0;

      max-width: 1400px;

      text-align: center;

    }

    .studio-cta-section h2 {

      max-width: 900px;

      margin: 1rem auto;

      font-family: var(--font-heading);

      font-size: clamp(2.4rem, 5.5vw, 5rem);

      line-height: 1.02;

      letter-spacing: -0.055em;

    }

    .studio-cta-section p {

      max-width: 700px;

      margin: 0 auto;

      color: var(--text-muted);

      line-height: 1.75;

      font-size: 1.05rem;

    }

    .studio-cta-link {

      display: inline-flex;

      gap: 1rem;

      align-items: center;

      margin-top: 2rem;

      padding: 1rem 1.5rem;

      background: var(--accent-highlight);

      color: #fff;

      border-radius: 100px;

      font-family: var(--font-mono);

      font-weight: 700;

      text-transform: uppercase;

      letter-spacing: .04em;

    }



    /* ==========================================================================

       RESPONSIVE BREAKPOINTS

       ========================================================================== */

    @media (max-width: 1200px) {

      .asset-capabilities-grid { grid-template-columns: repeat(3, 1fr); }

      .motion-tier-grid { grid-template-columns: repeat(2, 1fr); }

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

    }



    @media (max-width: 900px) {

      .header { padding: 1rem 1.5rem; }

      .nav-menu-list { display: none; }

      .hero-layer, .motion-layer, .web-layer, .explore-work-section { padding-left: 1.5rem; padding-right: 1.5rem; }

      .hero-grid, .layer-header { grid-template-columns: 1fr; gap: 2rem; }

      .checkout-platforms { flex-direction: column; align-items: flex-start; }

      .platform-links { gap: 1rem; }

      .footer-inner { flex-direction: column; align-items: center; }

      .prototype-guidance { flex-direction: column; align-items: flex-start; padding: 2rem; gap: 1.5rem; }

      .prototype-text-link { white-space: normal; }

    }



    @media (max-width: 600px) {

      .asset-capabilities-grid, .motion-tier-grid { grid-template-columns: 1fr; }

      .explore-card { flex: 0 0 82vw; }



    }

  
    /* Yoga Lab page refinements: tighter vertical rhythm and cleaner responsive spacing */
    .hero-layer { padding-top: 8.25rem; padding-bottom: 3.25rem; }
    .hero-title { margin-bottom: 1.5rem; }
    .hero-grid { gap: 2.75rem; padding-top: 2rem; }
    .commercial-showcase { margin-top: 1.5rem; margin-bottom: 4.25rem; }
    .motion-layer, .web-layer { padding-top: 5rem; padding-bottom: 5rem; }
    .layer-header { gap: 2.5rem; margin-bottom: 3rem; }
    .asset-capabilities-grid { margin-bottom: 3rem; }
    .motion-tier-grid { margin-bottom: 2.75rem; }
    .checkout-platforms { padding: 1.75rem 2rem; }
    .prototype-showcase-container { margin-bottom: 1.75rem; }
    .prototype-guidance { margin-bottom: 2.75rem; padding: 2rem 2.25rem; }
    .explore-work-section { padding-top: 5rem; padding-bottom: 5rem; }
    .explore-work-header { margin-bottom: 2rem; }
    .studio-cta-section { padding-top: 5.5rem; padding-bottom: 5.5rem; }
    .footer { margin-top: 2rem; padding-top: 4rem; }
    .nav-menu-link:focus-visible, .btn-contact-icon:focus-visible,
    .prototype-text-link:focus-visible, .studio-cta-link:focus-visible,
    .explore-control:focus-visible, .platform-logo-link:focus-visible {
      outline: 2px solid var(--accent-highlight);
      outline-offset: 4px;
    }
    @media (max-width: 900px) {
      .hero-layer { padding-top: 7.25rem; padding-bottom: 2.75rem; }
      .commercial-showcase { margin-bottom: 3.25rem; }
      .motion-layer, .web-layer { padding-top: 4rem; padding-bottom: 4rem; }
      .layer-header { margin-bottom: 2.25rem; }
      .prototype-guidance { margin-bottom: 2.25rem; }
      .explore-work-section { padding-top: 4rem; padding-bottom: 4rem; }
    }
    @media (max-width: 600px) {
      .hero-layer, .motion-layer, .web-layer, .explore-work-section { padding-left: 1.1rem; padding-right: 1.1rem; }
      .hero-title { margin-bottom: 1.25rem; }
      .hero-grid { padding-top: 1.5rem; gap: 1.5rem; }
      .hero-specs { gap: 1.25rem; padding: 1.25rem; }
      .commercial-showcase { padding-left: 1.1rem; padding-right: 1.1rem; margin-bottom: 2.75rem; }
      .video-player-container { border-radius: 12px; }
      .layer-header { gap: 1.25rem; }
      .checkout-platforms { padding: 1.35rem; }
      .prototype-guidance { padding: 1.5rem; gap: 1.25rem; }
      .studio-cta-section { padding-left: 1.25rem; padding-right: 1.25rem; }
    }

    /* Alignment refinements */
    .video-aligned-guidance {
      width: calc(100% - 5rem);
      max-width: 1320px;
      box-sizing: border-box;
      margin-left: auto;
      margin-right: auto;
    }
    .layer-header {
      align-items: center;
    }
    @media (max-width: 600px) {
      .video-aligned-guidance {
        width: calc(100% - 2.2rem);
      }
    }