:root {
      --footer-h: 96px;
      /* Primary accent colors */
      --terminal-green: #ffd34d;
      --terminal-green-bright: #ffd34d;
      --terminal-green-dim: #ffd34d;
      --signal-blue: #ffffff;
      --signal-aqua: #ffffff;
      --signal-cyan: #ffffff;

      /* Text colors */
      --ink: #ffffff;
      --ink-2: #cfd3d6;

      /* Background and layout */
      --bg: #000;
      --nav-h: 56px;
      --hero-shift: 12vh;
      --logo-size: clamp(16px, 10vw, 100px);
      --frame-radius: 0px;
      --pill-radius: 999px;
      --frame-border: 1px solid rgba(255, 255, 255, 0.14);
      --testimonial-gap: 1rem;
      --section-pad: 3rem;
      --text-sm: 0.95rem;

      /* Type scale */
      --text-base: 1.05rem;
      --text-lg: 1.25rem;
      --h1-size: 3rem;
      --h2-size: 2.1rem;
      --h3-size: 1.4rem;
      --h4-size: 1.15rem;

      /* CTA buttons */
      --cta-bg: var(--terminal-green);
      --cta-bg-hover: #46d0e4;
      --cta-text: #000;
      --cta-font-size: 16px;
      --cta-weight: 800;
      --cta-letter: .06em;
      --cta-padding-y: 10px;
      --cta-padding-x: 18px;
      --cta-radius: 0;
    }

    /* Mobile: allow modal card to scroll when content exceeds viewport
       and ensure the modal body stays scrollable inside the card. */
    @media (max-width: 900px) {
      .project-modal__card {
        /* permit internal scrolling instead of clipping content */
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }

      .project-modal__body {
        /* leave room for header/media area; this keeps the body scrollable */
        max-height: calc(94vh - 220px);
        overflow-y: auto;
      }
    }

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

    html {
      scroll-behavior: smooth;
      font-size: 142%;
      overflow-y: scroll;
      scroll-padding-top: var(--nav-h);
      height: 100%;
    }

    body {
      background: var(--bg);
      color: var(--ink);
      font-family: 'Handjet', serif;
      overflow-x: hidden;
      overscroll-behavior-y: contain;
      min-height: 100vh;
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    /* Inputs inherit font */
    :where(input, textarea, select, button) {
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
    }

    /* Placeholders too */
    ::placeholder { font-family: inherit; }

    /* Background layer */
    #page-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: #000;
      min-height: 100vh;
      height: 100%;
      will-change: transform;
    }

    #page-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .9));
      z-index: 1;
      pointer-events: none;
    }

    .crt-overlay,
    .noise-overlay,
    .vignette-overlay {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    .crt-overlay {
      background: repeating-linear-gradient(
        transparent 0 2px,
        rgba(255, 255, 255, 0.06) 2px 3px
      );
      opacity: 0.12;
      mix-blend-mode: screen;
    }

    .noise-overlay {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
      opacity: 0.12;
      mix-blend-mode: screen;
    }

    .vignette-overlay {
      background: radial-gradient(circle at center, transparent 45%, rgba(0, 0, 0, 0.7));
    }

    /* Content wrapper spans full viewport height so footer can pin to bottom */
    #app {
      position: relative;
      z-index: 1;
      flex: 1 0 auto;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* Skip links */
    .skip {
      position: absolute;
      left: -9999px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }
    .skip:focus {
      left: 8px;
      top: 8px;
      width: auto;
      height: auto;
      background: #000;
      border: 1px solid var(--terminal-green);
      padding: .35rem .5rem;
      z-index: 20000;
    }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* NAV (match dossier) */
    nav {
      position: fixed;
      inset: 0 auto auto 0;
      height: var(--nav-h);
      width: 100%;
      display: flex;
      align-items: center;
      gap: 1.5rem;
      padding: 0.65rem 1.4rem;
      background: #000;
      border-bottom: none;
      z-index: 2100;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      color: var(--ink);
      text-decoration: none;
      font-weight: 800;
    }
    .brand img { width:18px; height:18px; }

    .nav-toggle {
      display: none;
      width: 42px;
      height: 34px;
      border-radius: var(--frame-radius);
      border: 1px solid rgba(255,255,255,0.35);
      background: transparent;
      color: var(--ink);
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 4px;
      cursor: pointer;
      transition: border-color .2s ease, color .2s ease;
    }
    .nav-toggle span {
      display: block;
      width: 22px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transition: transform .2s ease, opacity .2s ease;
    }
    .nav-toggle span:nth-child(1) {
      transform-origin:  center;
    }
    .nav-toggle span:nth-child(3) {
      transform-origin: center;
    }
    .nav-toggle span + span { margin-top: 0; }

    .nav-links{
      display:flex;
      align-items:center;
      gap:1rem;
      flex:1;
      flex-wrap:wrap;
    }
    .nav-spacer { flex: 1 1 auto; }
    /* shared social-link styles: use same aspect, padding and spacing as footer */
    .social-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 6px;
      background: transparent;
      color: var(--terminal-green);
      text-decoration: none;
      border: none;
      border-radius: 0;
      box-sizing: border-box;
      transition: color .12s ease, transform .12s ease;
    }
    .social-link svg { width: 40px; height: 40px; display: block; }
    .social-link[aria-label="LinkedIn"] svg,
    .social-link[aria-label="GitHub"] svg { width: 28px; height: 28px; }
    /* tight spacing identical to footer (12px) - handled by wrapper gap; reset any added margins */
    .nav-links .nav-social + .nav-social { margin-left: 0; }
    @media (max-width: 900px) { .nav-links .nav-social { display: none; } }
    /* Explicit nav social sizing to exactly match footer */
    .nav-socials { display: flex; gap: 12px; align-items: center; }
    .nav-social {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      padding: 6px;
      gap: 6px;
      background: transparent;
      color: var(--terminal-green);
      text-decoration: none;
      border: none;
      border-radius: 0;
      box-sizing: border-box;
    }
    .nav-social svg { width: 40px; height: 40px; display: block; }
    .nav-social[aria-label="LinkedIn"] svg,
    .nav-social[aria-label="GitHub"] svg { width: 28px; height: 28px; }
    /* spacing handled by .nav-socials gap */
    .nav-social + .nav-social { margin-left: 0; }
    .footer-contact .footer-sep {
      display: inline-block;
      margin: 0 .4rem;
    }
    nav a{
      color:var(--ink);
      font-size:1rem;
      letter-spacing:.06em;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      line-height:1;
    }
    nav a.active{
      color:var(--signal-aqua);
    }
    nav a:not(.hire):hover{
      color:var(--signal-aqua);
    }
    nav a.section-active{
      color:var(--terminal-green);
      text-decoration:underline;
      text-decoration-color:var(--terminal-green);
      text-underline-offset:3px;
    }
    nav .hire{margin-left:auto;}
    nav.open .nav-toggle span:nth-child(1){
      transform: translateY(6px) rotate(45deg);
    }
    nav.open .nav-toggle span:nth-child(2){
      opacity:0;
    }
    nav.open .nav-toggle span:nth-child(3){
      transform: translateY(-6px) rotate(-45deg);
    }

    @media (max-width: 900px) {
      .nav-toggle { display:inline-flex; margin-left:auto; border: none; }
      .nav-links{
        position: fixed;
        top: var(--nav-h);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
        padding: 1.4rem clamp(1rem, 4vw, 2rem);
        background: #000;
        border-top: 1px solid rgba(255,255,255,0.08);
        transform: translateY(-120%);
        opacity: 0;
        pointer-events: none;
        transition: transform .25s ease, opacity .25s ease;
      }
      nav.open .nav-links{
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
      }
      nav .hire{
        margin-left: 0;
      }

  /* Match section inner padding so headings, subtitles and grids share the same gutters */
  .section-inner {
    padding-inline: clamp(12px, 5vw, 24px);
    width: 100%;
    box-sizing: border-box;
  }

/* Cover any remaining background grid at the very bottom of the viewport so footer edges are flush */
/* removed body::after guard; footer background should cover overlays */
    }

    @media (max-width: 600px) {
      .footer-contact .footer-sep:last-of-type {
        display: none;
      }
    }

    /* MAIN SECTIONS */
    main {
      display: block;
      flex: 1 0 auto;
      width: 100%;
    }
    section {
      min-height: calc(100svh - var(--nav-h));
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: var(--section-pad) 2vw var(--section-pad) 2vw;
      position: relative;
    }
    section + section {
      border-top: 1px solid #46d0e4;
      padding-top: calc(var(--section-pad) + .5rem);
    }

    .about-section {
      padding-bottom: 1rem;
    }

    .about-section + .projects-section {
      padding-top: 1.5rem;
    }

    .section-inner {
      max-width: 1100px;
      /* Use full available width inside section and rely on section padding for gutters to avoid double-vw math */
      width: 100%;
      padding-inline: 2vw;
      box-sizing: border-box;
      margin: 0 auto;
    }
    /* section-inner stays a block container (centering handled by width/margins) */
    .section-inner--narrow {
      max-width: 640px;
    }

    .section-divider {
      display: block;
      width: 100%;
      height: 1px;
      margin: 3rem 0 2rem;
      background: #46d0e4;
      border: none;
      align-self: stretch;
    }

    .cta-row,
    .hero-cta-row {
      margin-top: 1rem;
      display: flex;
      flex-wrap: wrap;
      gap: .65rem;
      align-items: center;
      justify-content: center;
    }
    .projects-cta { margin-top: 2.5rem; }
    .projects-cta .btn,
    .projects-cta .btn-ghost { min-width: 220px; }

    .legacy-hero {
      min-height: 50vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      gap: 1rem;
    }

    /* TYPE */
    h1 { font-size: var(--h1-size); letter-spacing: 1px; font-weight: 700; text-align: center; }
    h2 {
      font-size: var(--h2-size);
      margin: 0 0 .55rem;
      color: var(--terminal-green);
      text-shadow: 0 0 3px rgba(255, 211, 77, .5);
      text-align: center;
    }
    .hero-subhead {
      font-size: calc(var(--h2-size) * 0.8);
      line-height: 1.45;
      color: var(--ink);
      text-align: center;
      margin: 0 auto 1.2rem;
    }
    h3 {
      font-size: var(--h3-size);
      margin: 0 0 .5rem;
      color: var(--ink);
    }
    h4 {
      font-size: var(--h4-size);
      margin: 0 0 .4rem;
      color: var(--ink);
      font-weight: 600;
    }
    p {
      color: var(--ink-2);
      font-size: var(--text-base);
      text-align: center;
      margin: .2em auto .35em;
      line-height: 1.6;
      max-width: 820px;
    }
    ul,
    ol {
      font-size: var(--text-sm);
      line-height: 1.6;
      margin: .35rem 0 .85rem;
      padding-left: 1.35rem;
      list-style: square;
      text-align: left;
      list-style-position: outside;
    }
    ul li::marker,
    ol li::marker { color: var(--terminal-green); }
    li + li { margin-top: .35rem; }
    .bullet-yellow { list-style: square; padding-left: 1.5rem; }
    .muted { opacity: .85; font-size: var(--text-sm); }
    .text-sm { font-size: var(--text-sm); line-height: 1.6; }
    .section-header{
      width:100%;
      padding:1rem 0;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:1rem;
      border-top:1px solid rgba(255,255,255,0.08);
      border-bottom:1px solid rgba(255,255,255,0.08);
      margin:1.6rem 0 .8rem;
    }
    .section-eyebrow{
      text-transform:uppercase;
      letter-spacing:.2em;
      font-size:.9rem;
      color:var(--ink);
      margin:0;
      text-align:left;
    }
    .section-microcopy{
      font-size:.95rem;
      color:var(--ink-2);
      margin:.15rem 0 0;
      text-align:left;
    }
    .section-header .section-action{margin-left:auto;}

    #projects-section #projects-title { color: var(--terminal-green); font-size: var(--h2-size); }
    #projects-section p.muted { color: #ffffff; opacity: 1; }
    
    #testimonials-title,
    #contact-title,
    #about-title,
    #pricing-title {
      color: var(--terminal-green);
      font-size: var(--h2-size);
      text-shadow: 0 0 3px rgba(255, 211, 77, .5);
    }

    @media (max-width: 650px) {
      h1 { font-size: calc(var(--h1-size) * 0.45); }
      h2 { font-size: calc(var(--h2-size) * 0.8); }
      p  { font-size: 1rem; }
    }

    /* HERO below logo */
    section.intro { padding-top: calc(var(--nav-h) + 12vh); }
    section.intro h1 { color: var(--terminal-green); }

    @media (max-width: 720px) {
      section.intro { padding-top: calc(var(--nav-h) + 14vh); }
    }

    @media (max-width: 540px) {
      section.intro { padding-top: calc(var(--nav-h) + 10vh); }
    }

    .hero-ascii {
      display: none;
      white-space: pre;
      letter-spacing: 0.02em;
      text-align: center;
      margin: 0 auto 1rem;
      margin-top: -180px;
      line-height: 1.1;
      color: var(--terminal-green);
      font-size: clamp(12px, 2vw, 16px);
      max-width: 100%;
      word-break: keep-all;
    }

    /* Mobile logo fallback (non-ASCII) */
    .hero-logo-mobile {
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      color: var(--terminal-green);
      font-size: clamp(54px, 20vw, 96px);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 800;
      line-height: 1.05;
      margin: 0 auto 1.2rem;
      flex-direction: row;
      gap: 1.5rem;
    }
    .hero-logo-mobile span { display: inline-block; }

    @media (max-width: 720px) {
      .hero-ascii { display: none; }
      .hero-logo-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 4px;
        margin-top: 0;
        font-size: clamp(44px, 17vw, 64px);
        letter-spacing: 0.12em;
      }
    }

    /* Projects / About sections on home */
    .projects-section,
    .about-section,
    .pricing-section {
      padding-top: 1rem;
      padding-bottom: 2.5rem;
    }

    .projects-section .projects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.25rem;
      margin-top: 1rem;
      align-items: start;
      grid-auto-rows: auto;
      justify-content: center;
      justify-items: center;
    }

    .projects-section .projects-grid > * {
      width: min(100%, 420px);
    }

    /* Ensure grid is constrained and centered inside section-inner to avoid viewport shifts */
    .projects-grid,
    .projects-section .projects-grid,
    .project-grid {
      max-width: 1100px;
      margin-left: auto;
      margin-right: auto;
      padding-inline: 0;
      box-sizing: border-box;
    }
    @media (max-width: 640px) {
      .projects-section .projects-grid,
      .projects-grid,
      .project-grid {
        grid-template-columns: minmax(0, 1fr);
        justify-content: center;
        justify-items: center;
        /* Add consistent horizontal padding so cards are centered with equal gutters */
        padding-inline: clamp(12px, 5vw, 24px);
        box-sizing: border-box;
        width: 100%;
      }
      .projects-section .projects-grid > *,
      .projects-grid > *,
      .project-grid > * {
        /* Ensure cards scale to the available column and never overflow the viewport */
        width: 100%;
        max-width: 420px;
        justify-self: center;
      }
    }
    .projects-section .archive-thumb img,
    .archive-section .archive-card img,
    .projects-grid img {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 2px;
    }

    .section-subtitle {
      font-size: 1rem;
      letter-spacing: .15em;
      color: var(--ink-2);
      text-transform: uppercase;
    }

    .projects-section .archive-thumb {
      border: 1px solid #111214;
      background: #070b0c;
      transition: border-color .2s, box-shadow .2s, transform .2s;
      border-radius: 0;
    }

    .archive-card .archive-badge {
      display: block;
      margin-top: .35rem;
    }

    .projects-section .archive-thumb .meta p {
      font-size: var(--text-sm);
      margin-top: .35rem;
    }

    /* Sound lab playlist card */
    .sound-lab-panel {
      margin-top: 1rem;
      border: none;
      border-radius: 0;
      padding: 0;
      background: transparent;
      text-align: center;
      width: 100%;
      max-width: 100%;
    }

    .sound-lab-panel h3 {
      color: var(--terminal-green);
      font-size: 1.2rem;
      margin-bottom: .8rem;
      text-align: left;
    }

    .playlist-container {
      max-height: 320px;
      overflow-y: auto;
      border: 1px solid #111214;
      border-radius: 0;
      background: #070b0c;
      scrollbar-gutter: stable;
      padding-right: 4px;
    }

    .playlist-container::-webkit-scrollbar {
      width: 6px;
    }

    .playlist-container::-webkit-scrollbar-track {
      background: #050808;
    }

    .playlist-container::-webkit-scrollbar-thumb {
      background: #1a1d1f;
      border-radius: 0;
    }

    .playlist-container::-webkit-scrollbar-thumb:hover {
      background: #2a2d2f;
    }

    .sound-tracks {
      display: flex;
      flex-direction: column;
      gap: 0;
      text-align: left;
    }

    .sound-tracks .track {
      display: grid;
      grid-template-columns: 2fr 240px;
      align-items: center;
      gap: 1rem;
      padding: .5rem .8rem;
      border-bottom: 1px solid #0f1112;
      background: #070b0c;
      transition: background .2s ease;
    }

    .sound-tracks .track:hover {
      background: #0a0f10;
    }

    .sound-tracks .track:last-child {
      border-bottom: none;
    }

    .track-info {
      display: flex;
      flex-direction: column;
      gap: .15rem;
      min-width: 0;
    }

    .sound-tracks .track strong {
      color: var(--ink);
      font-size: .9rem;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sound-tracks .track small {
      color: var(--ink-2);
      opacity: .6;
      font-size: .75rem;
    }

    .sound-tracks .track audio {
      width: 100%;
      min-width: 200px;
      max-width: 360px;
      height: 40px;
      display: block;
      color-scheme: dark;
      background: #0b0d0f;
      border: none;
      border-radius: 6px;
    }

    @media (max-width: 720px) {
      .sound-tracks .track {
        grid-template-columns: 1fr;
        gap: .4rem;
        padding: .7rem;
      }
      
      .sound-tracks .track audio {
        max-width: 100%;
        min-width: 0;
        height: 44px;
      }

      .playlist-container {
        max-height: 300px;
      }
    }

    .about-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1rem;
      margin-top: 1rem;
    }

    .about-grid article {
      background: #070b0c;
      border: 1px solid rgba(255, 255, 255, 0.12);
      padding: 1rem;
      text-align: left;
      opacity: 1;
      transition: transform .12s, border-color .12s, background .12s, box-shadow .12s;
    }

    /* Bullet lists */
    .bullet-yellow { list-style: none; padding: 0; margin: 0; }
    .list-reset { list-style: none; padding: 0; margin: 0; }

    .about-grid article:hover {
      background: #0a0f10;
      border-color: #46d0e4;
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(16, 137, 147, .25);
    }

    .about-grid ul {
      list-style: square;
      padding-left: 1.5rem;
      margin: .35rem 0 .85rem;
    }

    .about-grid li {
      margin: .35rem 0;
      font-size: var(--text-sm);
      line-height: 1.6;
    }

    .about-grid strong {
      color: var(--terminal-green);
    }

    .about-grid h3 {
      margin-bottom: .8rem;
    }

    .metrics {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: .5rem;
      margin-top: .5rem;
    }

    .metrics div {
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 0;
      padding: .4rem .6rem;
      background: #070b0c;
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
      cursor: pointer;
      position: relative;
    }
    
    .metrics div:hover {
      transform: translateY(-2px);
      border-color: var(--terminal-green);
      box-shadow: 0 4px 16px rgba(16, 137, 147, .3);
    }
    
    .metrics div::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(-8px);
      background: #0a0f10;
      color: var(--terminal-green);
      padding: .5rem .75rem;
      border-radius: 0;
      border: 2px solid var(--terminal-green);
      font-size: .85rem;
      white-space: normal;
      max-width: 240px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease, transform .3s ease;
      z-index: 100;
      box-shadow: 0 4px 12px rgba(16, 137, 147, .35);
    }
    
    .metrics div:hover::after {
      opacity: 1;
      transform: translateX(-50%) translateY(-12px);
    }

    @media (max-width: 640px) {
      .metrics {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      }
      .metrics div {
        padding: .6rem .65rem;
      }
      .metrics div::after {
        display: none;
      }
      .metrics div:hover {
        transform: none;
        box-shadow: none;
        border-color: rgba(255, 255, 255, 0.18);
      }
    }

    .pricing-highlight {
      margin-top: 1.5rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1rem;
      align-items: stretch;
    }

    .standalone-pricing .pricing-grid {
      display: flex;
      gap: 1.5rem;
      align-items: stretch;
    }
    /* Ensure secondary pricing rows (Clarity/Process) match width of primary cards */
    .about-section .pricing-highlight {
        display: flex;
        gap: 1.5rem;
        justify-content: stretch;
        align-items: stretch;
        width: 100%;
        min-height: 0;
      }

    .about-section .pricing-highlight .pricing-card-home {
        flex: 1 1 50%;
        height: auto;
        border: none;
        background: transparent;
        padding: 0;
        box-shadow: none;
        min-height: 0;
      }

      @media (max-width: 700px) {
        .about-section .pricing-highlight {
          flex-direction: column;
        }

        .about-section .pricing-highlight .pricing-card-home {
          flex-basis: auto;
        }

        .about-section .pricing-card-home {
          aspect-ratio: auto;
        }
      }


    .about-section .pricing-card-home {
      text-align: center;
      align-items: center;
      height: auto;
      min-height: 0;
      aspect-ratio: 1 / 1;
      min-height: 420px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: #050808;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .about-section .pricing-card-home p {
      margin: 0;
    }

    .pricing-card-home {
      border: none;
      background: transparent;
      padding: 0;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: .25rem;
      height: 100%;
      width: 100%;
      min-height: 0;
    }

    .pricing-card-home h3 {
      margin-bottom: .8rem;
      color: var(--terminal-green);
    }

    .pricing-card-home p {
      text-align: center;
      margin: 0 auto;
      font-size: var(--text-sm);
      line-height: 1.5;
    }

    .pricing-card-home h4 {
      font-size: var(--text-sm);
      line-height: 1.4;
      font-weight: 700;
      opacity: .9;
      margin-top: auto;
    }

    .standalone-pricing .pricing-card-home {
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: #050808;
      padding: 1.25rem;
      align-items: flex-start;
      text-align: left;
      gap: .45rem;
      justify-content: flex-start;
      min-height: 0;
    }

    .standalone-pricing .pricing-card-home h3 {
      margin-bottom: .4rem;
    }

    .standalone-pricing .pricing-card-home p {
      margin: 0;
      line-height: 1.4;
    }

    .standalone-pricing .pricing-card-home h4 {
      margin: 0;
    }

    @media (max-width: 720px) {
      .pricing-card-home { min-height: 0; }
    }

    .pricing-card-home .btn {
      margin-top: auto;
      align-self: flex-start;
    }

    .bullet-yellow li::marker {
      color: var(--terminal-green);
      font-weight: 900;
      font-size: 0.7rem;
      content: "■ ";
    }

    /* Pricing table styled like contact card */
    .pricing-table-wrap {
      background: transparent;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
      border: none;
      overflow-x: auto;
    }

    .pricing-table-home {
      width: 100%;
      border-collapse: collapse;
      color: var(--ink);
      min-width: 640px;
    }

    .pricing-table-home th,
    .pricing-table-home td {
      padding: .75rem .85rem;
      border: 1px solid rgba(255, 255, 255, 0.06);
      background: #0b0f10;
      text-align: left;
      vertical-align: top;
      font-size: .95rem;
      line-height: 1.5;
    }

    .pricing-table-home th {
      color: #ffd34d;
      font-weight: 700;
      background: #0d1112;
      white-space: nowrap;
    }

    .pricing-table-home strong {
      color: #ffd34d;
    }

    .pricing-note {
      display: block;
      color: var(--ink-2);
      font-size: var(--text-sm);
      margin-top: .4rem;
      line-height: 1.5;
    }

    @media (max-width: 720px) {
      .pricing-table-wrap {
        padding: 1rem;
      }
      .pricing-table-home {
        min-width: 0;
      }
      .pricing-table-home th,
      .pricing-table-home td {
        font-size: .95rem;
      }
    }

    /* GRID / CARDS */
    .projects-grid,
    .project-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.25rem;
      width: 100%;
      margin: 1.6rem auto;
      justify-content: center;
      justify-items: center;
    }

    .projects-grid > *,
    .project-grid > * {
      width: min(100%, 420px);
    }

    .project-card,
    .archive-thumb {
      display: flex;
      flex-direction: column;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.14);
      background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.05), #050808 60%);
      overflow: hidden;
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
      min-height: 100%;
    }

    .project-card:hover,
    .archive-thumb:hover {
      transform: translateY(-4px);
      border-color: #46d0e4;
      box-shadow: 0 18px 32px rgba(70, 208, 228, 0.35);
      background: radial-gradient(circle at 20% 20%, rgba(70,208,228,0.08), #050808 60%);
    }

    .thumb-frame,
    .archive-thumb > div:first-child {
      position: relative;
      aspect-ratio: 3 / 2;
      overflow: hidden;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .archive-thumb > img:first-child{
      width:100%;
      height:auto;
      display:block;
      aspect-ratio:3 / 2;
      object-fit:cover;
      border-bottom:1px solid rgba(255,255,255,0.08);
    }

    .thumb-frame img,
    .archive-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .thumb-caption {
      position: absolute;
      bottom: 0.65rem;
      left: 0.9rem;
      right: 0.9rem;
      padding: 0.35rem 0.65rem;
      border-radius: 10px;
      background: rgba(0,0,0,0.75);
      color: #fff;
      font-size: .85rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      text-align: center;
    }

    .card-meta,
    .archive-thumb .meta {
      display: flex;
      flex-direction: column;
      padding: 1rem;
      gap: .5rem;
      flex: 1 1 auto;
    }

    .card-meta h3,
    .archive-thumb h3 {
      margin: 0;
      font-size: 1.25rem;
      color: var(--ink);
    }

    .card-meta p,
    .archive-thumb p {
      margin: 0;
      text-align: left;
    }

    .meta-label {
      font-size: .9rem;
      color: var(--ink-2);
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .meta-stack,
    .archive-thumb .stack {
      font-size: .85rem;
      color: var(--ink);
    }

    .stack-label {
      display: inline-block;
      margin: 0 0 .5rem 0;
      padding: .28rem .5rem;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: #050808;
      color: var(--ink);
      font-size: var(--text-sm);
      line-height: 1.3;
      letter-spacing: .02em;
      text-transform: none;
    }

    .stack-label strong {
      color: var(--terminal-green);
      font-weight: 700;
    }

    .project {
      background: #050808;
      border: var(--frame-border);
      border-radius: var(--frame-radius);
      transition: transform .12s, border-color .12s;
      cursor: pointer;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .project:hover { transform: translateY(-2px); border-color: #ffffff; }
    .project img.thumb {
      width: 100%;
      height: 150px;
      object-fit: cover;
      object-position: top;
      background: #0b0b0b;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .project h3 { font-size: var(--h3-size); color: var(--ink); margin: .45em 0; text-align: center; }
    .project p { font-size: var(--text-base); line-height: 1.5; }

    .archive-thumb {
      background: #070b0c;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 0;
      overflow: hidden;
      transition: border-color .2s, transform .2s, box-shadow .2s;
      display: flex;
      flex-direction: column;
      /* Fill the grid cell so all cards match height */
      height: 100%;
      align-items: stretch;
    }

    .archive-thumb:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(16, 137, 147, .25);
    }

    .archive-thumb img {
      width: 100%;
      height: 120px; /* image stays fixed height */
      object-fit: cover;
      object-position: top;
      background: #0c0c0c;
      border-bottom: none;
      flex: 0 0 auto;
    }
    /* Keep game cards static like app cards (no video hover swap) */
    .game-card-video { display: none; }
    .game-preview { display: block; }

    .meta {
      padding: .6rem .8rem;
      display: flex;
      flex-direction: column;
      /* allow meta to grow to fill card so CTAs align to bottom */
      flex: 1 1 auto;
      text-align: left;
      gap: .3rem;
    }

    .meta h3 {
      color: var(--ink);
      font-size: 1rem;
      margin: 0 0 .25rem 0;
    }

    .project-label {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: .25rem;
      font-size: .75rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--terminal-green);
      background: rgba(255, 211, 77, 0.08);
      border: 1px solid rgba(255, 211, 77, 0.35);
      border-radius: 0;
      padding: .2rem .65rem;
      margin: 0 0 .4rem;
      align-self: flex-start;
    }

    .meta p {
      color: var(--ink-2);
      font-size: .95rem;
      line-height: 1.5;
      margin: 0 0 .4rem 0;
      text-align: left;
      flex: 0 0 auto;
    }

    /* Keep spacing consistent before CTAs inside cards */
    .meta .stack {
      display: block;
      margin-bottom: .35rem !important;
      font-size: var(--text-sm) !important;
    }
    .meta .backend-tag {
      display: inline-block;
      margin: 0 0 .5rem 0;
      padding: .28rem .5rem;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: #050808;
      color: var(--ink-2);
      font-size: var(--text-sm);
      line-height: 1.3;
      letter-spacing: .02em;
    }
    .meta .backend-tag strong {
      color: var(--terminal-green);
      font-weight: 700;
      margin-right: .35rem;
    }

    .meta .btn,
    .meta .btn-sm {
      margin-top: auto;
      align-self: flex-start;
      width: auto;
      min-width: auto;
    }

    .archive-thumb[data-project-modal] {
      cursor: pointer;
    }
    .archive-thumb[data-project-modal]:focus-visible {
      outline: 2px solid var(--terminal-green);
      outline-offset: 2px;
    }

    .project-modal {
      position: fixed;
      inset: 0;
      z-index: 4000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;
    }

    .project-modal.open {
      opacity: 1;
      pointer-events: auto;
    }

    .project-modal__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.78);
    }

    .project-modal__card {
      position: relative;
      z-index: 1;
      width: min(960px, 96vw);
      max-height: 92vh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: #050808;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.75);
      overflow: hidden;
    }

    .project-modal__media {
      min-height: 260px;
      background: #000;
    }

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

    .project-modal__body {
      padding: 1.4rem 1.6rem 1.6rem;
      display: flex;
      flex-direction: column;
      gap: .7rem;
      overflow-y: auto;
    }

    .project-modal__eyebrow {
      margin: 0;
      letter-spacing: .28em;
      text-transform: uppercase;
      font-size: .85rem;
      color: var(--ink-2);
    }

    .project-modal__stack {
      display: flex;
      flex-wrap: wrap;
      gap: .35rem;
    }

    .project-modal__stack span {
      display: inline-flex;
      padding: .2rem .6rem;
      border: 1px solid rgba(255, 255, 255, 0.2);
      text-transform: uppercase;
      letter-spacing: .12em;
      font-size: .8rem;
    }

    .project-modal__features {
      list-style: square;
      padding-left: 1.35rem;
      margin: .25rem 0 .75rem;
      color: var(--ink-2);
      font-size: var(--text-sm);
      line-height: 1.4;
    }

    .project-modal__links {
      display: flex;
      flex-wrap: wrap;
      gap: .65rem;
      margin-top: auto;
    }

    .project-modal__links a[hidden] {
      display: none;
    }

    .project-modal__close {
      position: absolute;
      top: .5rem;
      right: .5rem;
      width: 36px;
      height: 36px;
      border: none;
      background: rgba(0, 0, 0, 0.5);
      color: var(--ink);
      font-size: 1.2rem;
      cursor: pointer;
      z-index: 2;
    }

    .project-modal__close:hover {
      color: var(--terminal-green);
    }

    @media (max-width: 900px) {
      .project-modal__card {
        grid-template-columns: 1fr;
        max-height: 94vh;
      }

      .project-modal__media {
        min-height: 220px;
      }
    }

    /* Mobile: center modal title and description for better readability */
    @media (max-width: 640px) {
      .project-modal__body {
        text-align: center;
        align-items: center; /* center children horizontally */
      }

      .project-modal__body h3,
      .project-modal__body p,
      .project-modal__eyebrow {
        text-align: center;
      }

      .project-modal__stack {
        justify-content: center;
      }

      .project-modal__links {
        justify-content: center;
        width: 100%;
      }
    }

    body.modal-open {
      overflow: hidden;
    }

    /* Buttons */
    .btn,
    .btn-cta,
    nav .hire {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: var(--cta-padding-y) var(--cta-padding-x);
      border-radius: var(--cta-radius);
      border: 2px solid transparent;
      color: var(--cta-text);
      background: var(--cta-bg);
      text-decoration: none;
      font-weight: var(--cta-weight);
      letter-spacing: var(--cta-letter);
      line-height: 1;
      font-size: var(--cta-font-size);
      text-transform: uppercase;
      transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    }
    
    .btn:hover,
    .btn-cta:hover,
    nav .hire:hover {
      background: var(--cta-bg-hover);
      color: var(--cta-text);
      border-color: var(--cta-bg-hover);
    }

    /* Nav CTA hover: ensure black text on blue background */
    nav .hire:hover {
      background: var(--cta-bg-hover);
      border-color: var(--cta-bg-hover);
      color: #000;
    }

    .btn-sm { 
      padding: var(--cta-padding-y) var(--cta-padding-x); 
      border-radius: var(--cta-radius); 
      font-size: var(--cta-font-size); 
      letter-spacing: var(--cta-letter);
      font-weight: var(--cta-weight);
    }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: var(--cta-padding-y) var(--cta-padding-x);
      border-radius: var(--cta-radius);
      line-height: 1;
      background: transparent;
      color: var(--ink);
      border: 2px solid rgba(255, 255, 255, 0.2);
      text-decoration: none;
      font-size: var(--cta-font-size);
      font-weight: var(--cta-weight);
      letter-spacing: var(--cta-letter);
      text-transform: uppercase;
      transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    }

    .btn-ghost:hover {
      background: var(--cta-bg-hover);
      color: #000;
      border-color: var(--cta-bg-hover);
    }

    /* Hero doors (clickable entry cards in hero) */
    .hero-doors {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .9rem;
      margin: 1.1rem auto 0;
      max-width: 980px;
    }

    @media (max-width: 900px) { .hero-doors { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 600px) { .hero-doors { grid-template-columns: 1fr; } }

    .door-card {
      display: flex;
      flex-direction: column;
      gap: .5rem;
      align-items: flex-start;
      text-decoration: none;
      background: #070b0c;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 0;
      padding: 1rem;
      color: var(--ink);
      transition: transform .12s, border-color .12s, background .12s, box-shadow .12s;
      min-height: 140px;
      opacity: 0;
      transform: perspective(1000px) rotateX(-90deg);
      transform-origin: center bottom;
    }
    
    .door-card.visible {
      opacity: 1;
      transform: perspective(1000px) rotateX(0deg);
      transition: opacity 0.6s ease, transform 0.6s ease, border-color .12s, background .12s, box-shadow .12s;
    }

    .door-card:hover {
      border-color: #46d0e4;
      background: #0a0f10;
      transform: perspective(1000px) rotateX(0deg) translateY(-2px);
      box-shadow: 0 4px 12px rgba(16, 137, 147, .25);
    }

    .door-title {
      font-size: 1.8rem;
      text-align: left;
      color: var(--terminal-green);
      margin: 0;
      font-weight: 700;
      letter-spacing: .02em;
    }

    .door-desc { 
      font-size: 1rem; 
      color: var(--ink-2); 
      margin: 0;
      line-height: 1.4;
    }

    /* CONTACT */
    .contact-card {
      width: min(640px, 92vw);
      margin: 1.2rem auto 0;
      background: #070b0c;
      border: none; /* remove cyan frame */
      border-radius: 10px;
      padding: 1.25rem;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Form layout inside the card */
    .contact-card form {
      width: 100%;
      max-width: 560px;
      display: flex;
      flex-direction: column;
      gap: .6rem;
    }

    .contact-card label {
      display: block;
      color: var(--ink-2);
      font-size: .95rem;
      margin-bottom: .18rem;
    }

    .contact-card input,
    .contact-card textarea {
      width: 100%;
      background: #000;
      color: var(--ink);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 6px;
      padding: .6rem .75rem;
      font-size: 1rem;
      outline: none;
      transition: box-shadow .12s ease, border-color .12s ease;
    }

    .contact-card textarea { min-height: 120px; resize: vertical; }

    .contact-card input:focus,
    .contact-card textarea:focus {
      border-color: var(--terminal-green);
      box-shadow: 0 6px 18px rgba(16, 137, 147, 0.12);
    }

    .contact-card .btn {
      align-self: center;
      cursor: pointer;
      margin-top: .4rem;
      padding: var(--cta-padding-y) var(--cta-padding-x);
    }

    .contact-card .btn:hover {
      background: var(--cta-bg-hover);
      color: #000;
    }

    @media (max-width: 720px) {
      .contact-card { padding: .9rem; }
      .contact-card form { max-width: 100%; }
      .contact-card .btn { width: 100%; }
    }

    .contact-page {
      padding: calc(var(--section-pad) + 1rem) 2vw 2rem;
      min-height: calc(100svh - var(--nav-h) - 200px);
    }
    .contact-page .cta-row { margin-top: 1.5rem; }
    .contact-page .btn,
    .contact-page .btn-cta {
      text-transform: none;
    }
    .contact-page .section-inner--narrow {
      margin-top: 2rem;
    }

    /* TESTIMONIALS */
    .testimonial-marquee {
      position: relative;
      overflow: hidden;
      width: 100%;
      margin: 1.2rem auto;
    }
    .testimonial-marquee.fade-mask {
      -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
      mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    }
    .testimonial-track {
      display: flex;
      gap: var(--testimonial-gap);
      width: max-content;
      animation: testimonial-marquee 80s linear infinite;
      will-change: transform;
    }
    .testimonial-marquee:hover .testimonial-track { animation-play-state: paused; }
    .testimonial-marquee:active .testimonial-track { animation-play-state: paused; }
    .testimonial-marquee.paused .testimonial-track { animation-play-state: paused; }

    @keyframes testimonial-marquee {
      from { transform: translateX(0); }
      to { transform: translateX(-33.333333%); }
    }

    .testimonial {
      flex: 0 0 340px;
      min-height: 180px;
      background: #070b0c;
      border: none;
      border-radius: 0;
      padding: 1.2rem;
      color: var(--ink);
      display: flex;
      flex-direction: column;
      gap: .8rem;
    }

    /* Structured testimonial footer: avatar, name/role, short context */
    .testimonial-footer {
      display: flex;
      flex-direction: column;
      gap: .45rem;
      margin-top: .6rem;
    }

    .testimonial-person {
      display: flex;
      align-items: center;
      gap: .6rem;
    }

    .testimonial-avatar {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(255,211,77,0.12), rgba(70,208,228,0.06));
      border: 1px solid rgba(255,255,255,0.06);
      flex: 0 0 40px;
    }

    .testimonial-info strong { display:block; }
    .testimonial-context { margin: 0; }
    
    .testimonial blockquote {
      margin: 0;
      color: var(--ink);
      font-size: 1.2rem;
      line-height: 1.5;
      font-weight: 400;
      flex: 1;
    }
    
    .testimonial cite {
      display: block;
      color: var(--terminal-green);
      font-style: normal;
      font-size: 1rem;
      font-weight: 600;
      padding-top: .5rem;
      border-top: 1px solid rgba(16, 137, 147, .4);
    }

    /* Footer and back-to-top styles (restored) */
  .signal-footer {
    text-align: center;
    padding: 16px 0;
    background: #000;
    border-top: 1px solid transparent;
    margin-top: 20px;
    color: var(--ink-2);
    position: relative;
    z-index: 2;
    /* Span full container width and avoid viewport-anchored transforms */
    width: 100%;
    left: 0;
    transform: none;
    box-sizing: border-box;
  }
  /* Make footer sit at the absolute bottom of the page when content is short */
  footer.signal-footer { flex-shrink: 0; }
  /* Ensure footer overlays other background overlays so grid doesn't peek through */
  .signal-footer { background: linear-gradient(#000,#000); }
  .signal-footer .footer-inner {
    width: min(1100px, 96vw);
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 12px;
  }
  .signal-footer p {
    font-size: 21px;
    color: var(--ink-2);
    margin: 0 auto;
    line-height: 1.4;
    max-width: 800px;
  }
  .footer-pitch{font-size:1rem;margin-bottom:.3rem;}
  .footer-contact a{color:var(--signal-cyan);text-decoration:none;}
  .footer-contact a:hover{text-decoration:underline;}
  .footer-social {
    margin-top: 8px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
  }
  .footer-social a,
  .footer-social .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px;
    background: transparent;
    color: var(--terminal-green);
    text-decoration: none;
    border: none;
    border-radius: 0;
    transition: color .12s ease, transform .12s ease;
  }
  .footer-social a:hover,
  .footer-social .social-link:hover {
    color: var(--cta-bg-hover);
    transform: translateY(-2px);
  }
  .footer-social svg { width: 40px; height: 40px; display: block; }
  .footer-social .social-link[aria-label="LinkedIn"] svg,
  .footer-social .social-link[aria-label="GitHub"] svg {
    width: 28px;
    height: 28px;
  }

  /* Back-to-top button */
  .to-top {
    position: fixed;
    right: 12px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 0;
    background: transparent;
    color: var(--terminal-green);
    border: none;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    z-index: 3000;
    transition: opacity .18s ease, transform .18s ease, color .12s ease;
  }
  .to-top.show { opacity: 1; transform: none; pointer-events: auto; }
  .to-top:hover,
  .to-top:active {
    color: var(--cta-bg-hover);
  }
  .to-top:focus-visible { outline: 2px solid var(--terminal-green); outline-offset: 2px; }

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

/* Hard guard against horizontal overflow that can shift centered layout */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Mobile override to ensure project cards are perfectly centered and cannot overflow */
@media (max-width: 640px) {
  .projects-section .projects-grid,
  .projects-grid,
  .project-grid {
    /* force a single column and center contents */
    grid-template-columns: 1fr !important;
    place-items: center !important;
    justify-content: center !important;
    /* remove extra inline padding so section/section-inner control gutters */
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible;
  }

  .projects-section .projects-grid > *,
  .projects-grid > *,
  .project-grid > * {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 420px !important;
    box-sizing: border-box !important;
  }
}