#book-btn {
  position: fixed;
  top: 35px;       /* Aligned with the center of the + button */
  right: 100px;    /* Space to the left of the menu trigger */
  z-index: 10001;  /* Ensure it's above the menu blur and trigger background */
  
  /* Typography */
  font-family: 'PickleWeasel', sans-serif;
  font-size: 3.5rem;      /* Significantly bigger font */
  font-weight: normal;
  text-decoration: none;
  
  /* Colors */
  color: var(--earth);    /* The studio green */
  background: none;       /* Removed background */
  border: none;           /* Removed border */
  
  /* Interaction */
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
  line-height: 1;
}

#book-btn:hover {
  color: #ffcc00; /* Vibrant yellow on hover */
}

/* Mobile Adjustment */
@media (max-width: 600px) {
  #book-btn {
    right: 85px;
    font-size: 2rem;
    top: 30px;
  }
}

/* The Blur Overlay Container */
.progressive-blur {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 9999; /* Stay above everything */
  pointer-events: none; /* Let clicks pass through to the site */
  user-select: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Top Blur Overlay */
.blur-top {
  top: 0;
  height: 200px;
  /* Fades the blur out from top to bottom */
  mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
  background: linear-gradient(to bottom, var(--bg), transparent);
}

/* Bottom Blur Overlay */
.blur-bottom {
  bottom: 0;
  height: 50px;
  /* Fades the blur out from bottom to top */
  mask-image: linear-gradient(to top, black 20%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 20%, transparent 100%);
  background: linear-gradient(to top, var(--bg), transparent);
}




    /* ─── FONTS ─────────────────────────────────────────────── */
    @font-face {
      font-family: 'PickleWeasel';
      src: url('assets/pickleweasel.ttf') format('truetype');
    }
    @font-face {
      font-family: 'NovecentoWide';
      src: url('assets/Novecentowide-Bold-webfont.ttf') format('truetype');
      font-weight: 700;
    }
    @font-face {
      font-family: 'NovecentoWide';
      src: url('assets/Novecentowide-Light-webfont.ttf') format('truetype');
      font-weight: 300;
    }
    @font-face {
      font-family: 'Cal Sans';
      src: url('assets/CalSans-Regular.ttf') format('truetype');
      font-weight: 300;
    }
    @font-face {
      font-family: 'Montserrat';
      src: url('assets/Montserrat-VariableFont_wght.ttf') format('truetype');
      font-weight: 300;
    }

    /* ─── TOKENS ──────────────────────────────────────────────
       Central design tokens. All colors (especially the brand
       orange) are driven from these variables so they can be
       tuned in one place. Keeps the stylesheet DRY.
    ─────────────────────────────────────────────────────────── */
    :root {
      --bg:           #000000;
      --bg-alt:       #000000;
      --bg-card:      #0d0d0d;        /* Subtle card surface on black */
      --bg-elev:      #151515;        /* Slightly elevated surface   */
      --white:        #ffffff;
      --dim:          #c0c0c0;
      --muted:        #555555;

      /* New palette — orange is reserved for tiny flourishes.
         Green / yellow / red do the heavy lifting for accents. */
      --green:        #8fae6a;        /* primary accent (vibrant earth green) */
      --green-soft:   rgba(143,174,106,0.14);
      --green-hover:  #a4c178;
      --yellow:       #ffcc00;        /* secondary accent (warm pop) */
      --yellow-soft:  rgba(255,204,0,0.14);
      --red:          #c94f3a;        /* tertiary accent (muted brick) */
      --red-soft:     rgba(201,79,58,0.14);

      --accent:       #ff6600;        /* Brand orange — used sparingly now */
      --accent-soft:  rgba(255,102,0,0.12);
      --accent-hover: #ff7d26;
      --earth:        #7d8c6a;
      --border:       rgba(255,255,255,0.09);
      --border-strong:rgba(255,255,255,0.22);
      --font-d:       'NovecentoWide', sans-serif;
      --font-b:       'Cal Sans', Helvetica, Arial, sans-serif;
      --font-pw:      'PickleWeasel', sans-serif;

      /* Map aliases so pasted-in snippets that use --ff-d / --cr
         resolve correctly. */
      --ff-d:         var(--font-d);
      --cr:           var(--white);
    }

    /* PickleWeasel utility — reserved for 1–2 words at a time to
       create big, expressive accents. Always BIG and loud. */
    .pw {
      font-family: var(--font-pw);
      font-weight: 400;
      letter-spacing: -0.01em;
      line-height: 0.85;
      display: inline-block;
    }
    .pw--xl { font-size: 1.4em; }
    .pw--xxl { font-size: 1.7em; }

    /* ─── RESET ─────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg);
      color: var(--white);
      font-family: var(--font-b);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* Screen-reader-only — keeps semantic headings for SEO/a11y
       without affecting the visual layout. */
    .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;
    }

    /* ─── MENU TRIGGER ──────────────────────────────────────── */
    #menu-trigger {
      position: fixed;
      top: 28px;
      right: 36px;
      z-index: 10001;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.2);
      background: rgba(10,10,10,0.7);
      backdrop-filter: blur(10px);
      color: var(--white);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.3s, transform 0.45s cubic-bezier(0.34,1.56,0.64,1), background 0.3s;
      padding: 0;
    }
    #menu-trigger:hover {
      border-color: rgba(255,255,255,0.5);
      background: rgba(30,30,30,0.9);
    }
    #menu-trigger.open { transform: rotate(45deg); }
    #menu-trigger svg { display: block; }

    /* ─── MENU OVERLAY ──────────────────────────────────────── */
#menu-overlay {
  position: fixed;
  inset: 0;
  /* Dark semi-transparent background */
  background: rgba(10, 10, 10, 0.9); 
  /* The Apple-style frosted glass effect */
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 10vw;
  gap: 0.2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#menu-overlay.open {
  opacity: 1;
  pointer-events: all;
}

    .flip-link {
      position: relative;
      display: block;
      overflow: hidden;
      white-space: nowrap;
      font-family: var(--font-d);
      font-size: clamp(2.4rem, 7vw, 5.8rem);
      font-weight: 700;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--white);
      line-height: 0.98;
      letter-spacing: -0.02em;
    }
    .flip-top, .flip-bottom { display: flex; }
    .flip-bottom {
      position: absolute;
      inset: 0;
      color: var(--accent);
    }
    .flip-top span, .flip-bottom span {
      display: inline-block;
      transition: transform 0.32s ease-in-out;
    }
    .flip-bottom span { transform: translateY(100%); }
    .flip-link:hover .flip-top span  { transform: translateY(-100%); }
    .flip-link:hover .flip-bottom span { transform: translateY(0); }

    /* ─── SECTION BASE ──────────────────────────────────────── */
    section { width: 100%; }

    /* ─── SCROLL REVEAL ─────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  /* Slower duration (1.2s) and custom easing for a smoother look */
  transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), 
              transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

    /* ══════════════════════════════════════════════════════════
       HERO
    ══════════════════════════════════════════════════════════ */
    #hero {
      height: 100vh;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }
    .title-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .word-row {
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
    }
    .letter {
      font-family: 'PickleWeasel', sans-serif;
      font-size: 16vw;
      font-weight: 900;
      letter-spacing: -0.025em;
      cursor: pointer;
      position: relative;
      display: inline-block;
      transform: scale(0);
      opacity: 0;
      transition: transform 0.8s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s ease;
      line-height: 0.9;
    }
    .letter-image {
      display: inline-block;
      opacity: 0;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      background-size: 300%;
      background-repeat: no-repeat;
      background-position: center;
      transition: opacity 0.1s ease, background-position 0.2s ease-out;
    }
    .letter-base {
      position: absolute; inset: 0;
      color: white;
      transition: opacity 0.1s ease;
      pointer-events: none;
    }
    .letter-overlay {
      position: absolute; inset: 0;
      color: #ef4444;
      opacity: 0;
      pointer-events: none;
    }
    .letter-overlay.flash {
      animation: flash-sweep var(--flash-duration, 0.5s) ease-in-out forwards;
    }
    @keyframes flash-sweep {
      0%   { opacity: 0; }
      10%  { opacity: 1; }
      70%  { opacity: 1; }
      100% { opacity: 0; }
    }
    .letter:hover .letter-base  { opacity: 0; }
    .letter:hover .letter-image { opacity: 1; }

    @media (max-width: 768px) {
  
      #row-buffalo, #row-studio {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

      /* Forces BUFFALO into 4 columns: BUFF on row 1, ALO wraps to row 2 */
  #row-buffalo {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
  }
  
  /* Forces STUDIO into 3 columns: STU on row 1, DIO wraps to row 2 */
  #row-studio {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
  }



  /* Increase the font size so the 4 letters fill the screen width */
  .letter {
    font-size: 24vw; 
    line-height: 0.85;
    text-align: center; /* Adds center alignment to the letters */
    display: flex;
    justify-content: center;
  }
}

    /* ══════════════════════════════════════════════════════════
       STUDIO
    ══════════════════════════════════════════════════════════ */
    #studio {
      background: var(--bg);
      padding: 40px 0 60px;
      border-top: 0px solid var(--border);
    }
    .studio-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 8%;
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 48px;
      align-items: center;
    }
    .studio-iframe-wrap {
      width: 100%;
      position: relative;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border-radius: 0px;
      background: #000;
    }
    .studio-iframe-wrap iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }
    .studio-copy { min-width: 0; }
    .accent-red {
      color: var(--red);
      font-weight: 700;
      position: relative;
      display: inline-block;
    }
    .accent-red.pulse {
      animation: redPulse 2.6s ease-in-out infinite;
    }
    @keyframes redPulse {
      0%, 100% { color: var(--red); text-shadow: 0 0 0 rgba(201,79,58,0); transform: translateY(0); }
      50%      { color: #ff7557; text-shadow: 0 0 14px rgba(201,79,58,0.55); transform: translateY(-1px); }
    }
    .studio-eyebrow {
      font-family: var(--font-d);
      font-size: 0.65rem;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 20px;
    }
    .studio-heading {
      font-family: var(--font-d);
      font-size: clamp(3.2rem, 5.5vw, 5.5rem);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      line-height: 1.0;
    }
    .studio-text {
      font-size: 1.1rem;
      line-height: 1.85;
      color: var(--dim);
      margin-bottom: 52px;
    }
    .studio-stats {
      display: flex;
      gap: 48px;
    }
    .stat-number {
      font-family: var(--font-d);
      font-size: 1.9rem;
      font-weight: 700;
      color: var(--white);
      display: block;
    }
    .stat-label {
      font-size: 0.62rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 4px;
      display: block;
    }
    @media (max-width: 800px) {
      .studio-inner { grid-template-columns: 1fr; gap: 28px; }
      .studio-iframe-wrap { aspect-ratio: 16 / 11; max-width: 100%; }
    }

    /* ══════════════════════════════════════════════════════════
       GALLERY
    ══════════════════════════════════════════════════════════ */
    #gallery {
      background: var(--bg);
      padding: 60px 0 50px;
      border-top: 0px solid var(--border);
    }
    .gallery-header {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 8%;
      margin-bottom: 32px;
    }
    .section-title {
      font-family: var(--font-d);
      font-size: clamp(3.2rem, 5.5vw, 5.5rem);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 32px;
    }
    .gallery-filters {
      display: flex;
      gap: 28px;
    }
    .gal-btn {
      cursor: pointer;
      opacity: 0.28;
      transition: opacity 0.35s ease, letter-spacing 0.35s ease;
      background: none;
      border: none;
      color: var(--white);
      font-family: var(--font-b);
      font-size: 0.82rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 0;
      outline: none;
    }
    .gal-btn:hover, .gal-btn.active { opacity: 1; letter-spacing: 0.3em; }
    .gallery-rule {
      height: 1px;
      background: var(--border);
      max-width: 1200px;
      margin: 0 auto 20px;
      width: 84%;
    }
    .gallery-grid-wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 8%;
    }
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
      gap: 9px;
    }
    .g-item {
      aspect-ratio: 1/1;
      overflow: hidden;
      background: #111;
      cursor: pointer;
    }
    .g-item img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.8s cubic-bezier(0.16,1,0.3,1);
    }
    .g-item:hover img { transform: scale(1.08); }
    .hidden { display: none !important; }

    /* Lightbox */
    #lightbox {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.96);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 7000;
      cursor: zoom-out;
      opacity: 0;
    }
    #lightbox img {
      max-width: 90%; max-height: 90%;
      object-fit: contain;
    }

    /* ══════════════════════════════════════════════════════════
       EQUIPMENT
    ══════════════════════════════════════════════════════════ */
    #equipment {
      background: var(--bg-alt);
      padding: 60px 0;
      border-top: 0px solid var(--border);
    }
    .equipment-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 8%;
    }
    .equipment-title {
      font-family: var(--font-d);
      font-size: clamp(3rem, 4.5vw, 4.5rem);
      font-weight: 700;
      text-align: center;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      margin-bottom: 72px;
    }
    .block-wrapper {
      column-count: 3;
      column-gap: 56px;
    }
    .section-block {
      break-inside: avoid;
      margin-bottom: 36px;
    }
    .section-block h3 {
      font-family: var(--font-d);
      font-size: 0.8rem;
      color: var(--earth);
      text-transform: uppercase;
      letter-spacing: 0.18em;
      margin: 0 0 10px;
      border-bottom: 0px solid #1e1e1e;
      padding-bottom: 6px;
    }
    .section-block ul {
      list-style: disc;
      padding-left: 18px;
    }
    .section-block li {
      font-size: 0.78rem;
      line-height: 1.38;
      color: var(--dim);
      margin-bottom: 3px;
      cursor: default;
      transition: transform 0.14s ease-out, color 0.14s ease;
      transform-origin: left center;
    }
    @media (max-width: 920px) { .block-wrapper { column-count: 2; } }
    @media (max-width: 580px) { .block-wrapper { column-count: 1; } }

    /* ══════════════════════════════════════════════════════════
       JB PILON
    ══════════════════════════════════════════════════════════ */
    #jb-pilon {
      background: var(--bg);
      padding: 60px 0;
      border-top: 0px solid var(--border);
    }
    .jb-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 8%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .jb-img-wrap {
      flex-shrink: 0;
      z-index: 1;
      position: relative;
    }
    .jb-frame {
      width: 380px;
      height: 530px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: 0 0 80px rgba(0,0,0,0.5);
    }
    .jb-frame img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 1.1s ease;
    }
    .jb-img-wrap:hover .jb-frame img { transform: scale(1.04); }
    .jb-content {
      margin-left: -60px;
      margin-top: -80px;
      z-index: 2;
      position: relative;
    }
    .jb-name {
      font-family: var(--font-d);
      font-size: clamp(3rem, 5.5vw, 5.5rem);
      font-weight: 700;
      text-transform: uppercase;
      line-height: 0.85;
      letter-spacing: -0.02em;
      margin-bottom: 14px;
    }
    .jb-role {
      font-size: 0.65rem;
      letter-spacing: 0.38em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 40px;
    }
    .jb-actions {
      display: flex;
      align-items: flex-start;
      gap: 36px;
    }
    .jb-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 76px;
      height: 76px;
      border-radius: 50%;
      border: 1px solid #3a3a3a;
      color: var(--white);
      text-decoration: none;
      flex-shrink: 0;
      transition: background 0.3s, border-color 0.3s;
    }
    .jb-arrow:hover { background: var(--white); border-color: var(--white); }
    .jb-arrow svg { transition: transform 0.3s, color 0.3s; }
    .jb-arrow:hover svg { transform: rotate(-45deg); color: #000; }
    .jb-bio p {
      font-size: 1.05rem;
      line-height: 1.75;
      color: var(--dim);
      max-width: 340px;
      margin-bottom: 22px;
    }
    .jb-socials {
      display: flex;
      gap: 18px;
    }
    .jb-socials a {
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s;
    }
    .jb-socials a:hover { color: var(--white); }
    @media (max-width: 860px) {
      .jb-inner { flex-direction: column; align-items: center; }
      .jb-content { margin-left: 0; margin-top: -40px; text-align: center; }
      .jb-frame { width: 260px; height: 360px; }
      .jb-actions { flex-direction: column; align-items: center; }
      .jb-bio p { text-align: center; }
      .jb-socials { justify-content: center; }
    }

    /* ══════════════════════════════════════════════════════════
       TESTIMONIALS
    ══════════════════════════════════════════════════════════ */
    #testimonials {
      background: var(--bg);
      padding: 60px 0;
      border-top: 0px solid var(--border);
      overflow: hidden;
    }
    .testi-wrap {
      position: relative;
      max-width: 960px;
      margin: 0 auto;
      padding: 0 8%;
    }
    .testi-ghost {
      position: absolute;
      left: -5%;
      top: 50%;
      transform: translateY(-50%);
      font-family: var(--font-d);
      font-size: clamp(10rem, 20vw, 22rem);
      font-weight: 700;
      color: rgba(255,255,255,0.025);
      line-height: 1;
      pointer-events: none;
      user-select: none;
      transition: transform 0.3s ease;
    }
    .testi-body { display: flex; position: relative; }
    .testi-sidebar {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-right: 44px;
      border-right: 1px solid var(--border);
    }
    .testi-label {
      font-family: var(--font-b);
      font-size: 0.58rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.28);
      writing-mode: vertical-rl;
      text-orientation: mixed;
      margin-bottom: 20px;
    }
    .testi-bar {
      position: relative;
      height: 120px;
      width: 1px;
      background: var(--border);
    }
    .testi-fill {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      background: var(--white);
      transition: height 0.5s ease;
    }
    .testi-content {
      flex: 1;
      padding: 48px 0 48px 48px;
    }
    .testi-author-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-b);
      font-size: 0.62rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 6px 16px;
      margin-bottom: 32px;
    }
    .testi-dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
    }
    .testi-quote-area {
      position: relative;
      min-height: 160px;
      display: flex;
      align-items: center;
      margin-bottom: 56px;
    }
    .testi-quote {
      position: absolute;
      opacity: 0;
      transition: opacity 0.5s ease;
      font-size: clamp(1.8rem, 3.5vw, 3.1rem);
      font-weight: 300;
      line-height: 1.25;
      letter-spacing: -0.01em;
      color: var(--white);
    }
    .testi-quote.active { opacity: 1; }
    .testi-footer {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
    }
    .testi-credit {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .testi-credit-line {
      width: 36px; height: 1px;
      background: rgba(255,255,255,0.35);
    }
    .testi-credit-role {
      font-size: 0.6rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      margin-bottom: 2px;
    }
    .testi-credit-name {
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--white);
    }
    .testi-navs { display: flex; gap: 10px; }
    .testi-nav-btn {
      width: 46px; height: 46px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: none;
      color: var(--white);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s, color 0.3s;
    }
    .testi-nav-btn:hover { background: var(--white); color: #000; }
    @media (max-width: 640px) {
      .testi-sidebar { display: none; }
      .testi-content { padding-left: 0; }
    }

    /* ══════════════════════════════════════════════════════════
       CLIENTS
    ══════════════════════════════════════════════════════════ */
    #clients {
      background: var(--bg-alt);
      padding: 60px 0;
      border-top: 0px solid var(--border);
    }
    .clients-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 8%;
    }
    .clients-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 72px;
    }
    .clients-sub {
      font-size: 0.72rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      max-width: 200px;
      line-height: 1.7;
      padding-top: 6px;
    }
    .clients-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }
    .client-item {
      padding: 24px 20px;
      border-bottom: 1px solid var(--border);
      border-right: 1px solid var(--border);
      transition: background 0.25s;
    }
    .client-item:nth-child(4n) { border-right: none; }
    .client-item:hover { background: rgba(255,255,255,0.025); }
    .client-name {
      font-family: var(--font-d);
      font-size: 0.88rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--dim);
      transition: color 0.25s;
    }
    .client-item:hover .client-name { color: var(--white); }
    .client-genre {
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 5px;
    }
    @media (max-width: 720px) {
      .clients-grid { grid-template-columns: repeat(2, 1fr); }
      .client-item:nth-child(4n) { border-right: 1px solid var(--border); }
      .client-item:nth-child(2n) { border-right: none; }
    }

    /* ══════════════════════════════════════════════════════════
       CONTACT
    ══════════════════════════════════════════════════════════ */
    #contact {
      background: var(--bg);
      padding: 110px 0;
      border-top: 0px solid var(--border);
    }
    .contact-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 8%;
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: 80px;
      align-items: start;
    }
    .contact-eyebrow {
      font-family: var(--font-d);
      font-size: 0.62rem;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 20px;
    }
    .contact-title {
      font-family: var(--font-d);
      font-size: clamp(3.2rem, 5.5vw, 5.5rem);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      line-height: 1.0;
      margin-bottom: 24px;
    }
    .contact-desc {
      font-size: 1.05rem;
      line-height: 1.8;
      color: var(--dim);
      margin-bottom: 48px;
      max-width: 320px;
    }
    .info-item { margin-bottom: 24px; }
    .info-label {
      font-size: 0.6rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--muted);
      display: block;
      margin-bottom: 4px;
    }
    .info-value {
      font-size: 1rem;
      color: var(--white);
    }
    .info-value a {
      color: var(--white);
      text-decoration: none;
      transition: color 0.2s;
    }
    .info-value a:hover { color: var(--accent); }
    .contact-form { display: flex; flex-direction: column; gap: 22px; }
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
    }
    .form-group { display: flex; flex-direction: column; gap: 8px; }
    .form-label {
      font-size: 0.6rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .form-input, .form-select, .form-textarea {
      background: transparent;
      border: none;
      border-bottom: 1px solid rgba(255,255,255,0.15);
      color: var(--white);
      font-family: var(--font-b);
      font-size: 0.88rem;
      padding: 11px 0;
      outline: none;
      width: 100%;
      -webkit-appearance: none;
      appearance: none;
      transition: border-color 0.3s;
    }
    .form-input::placeholder, .form-textarea::placeholder { color: rgba(255,255,255,0.18); }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
      border-color: rgba(255,255,255,0.6);
    }
    .form-textarea { resize: none; min-height: 110px; }
    .form-select option { background: #1a1a1a; color: var(--white); }
    .form-submit {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      background: none;
      border: 1px solid rgba(255,255,255,0.22);
      color: var(--white);
      font-family: var(--font-d);
      font-size: 0.75rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      padding: 15px 30px;
      cursor: pointer;
      transition: background 0.3s, border-color 0.3s, color 0.3s;
      align-self: flex-start;
    }
    .form-submit:hover { background: var(--white); color: #000; border-color: var(--white); }
    .form-submit svg { transition: transform 0.3s; }
    .form-submit:hover svg { transform: translateX(4px); }
    @media (max-width: 760px) {
      .contact-inner { grid-template-columns: 1fr; gap: 56px; }
      .form-row { grid-template-columns: 1fr; }
    }

    /* ══════════════════════════════════════════════════════════
       MARQUEE
    ══════════════════════════════════════════════════════════ */
    #marquee-section {
      background: var(--bg);
      border-top: 0px solid var(--border);
      /* Generous vertical breathing room above/below the marquee
         so it reads as its own beat in the page flow. */
      padding: 90px 0;
      margin: 40px 0;
      overflow: hidden;
      cursor: default;
      user-select: none;
    }
    @media (max-width: 640px) {
      #marquee-section { padding: 60px 0; margin: 24px 0; }
    }
    .marquee-track {
      display: flex;
      white-space: nowrap;
      will-change: transform;
    }
    .marquee-item {
      font-family: var(--font-d);
      font-size: 6vw;
      font-weight: 700;
      font-style: italic;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--white);
      padding-right: 3vw;
      flex-shrink: 0;
      line-height: 1;
      opacity: 0.92;
    }
    .marquee-item .dot {
      color: var(--accent);
      margin: 0 1.5vw;
    }

    /* ══════════════════════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════════════════════ */
    footer {
      background: var(--bg-alt);
      border-top: 0px solid var(--border);
      padding: 56px 0 36px;
    }
    .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 8%;
    }
    .footer-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 44px;
    }
    .footer-logo {
      font-family: var(--font-d);
      font-size: 1.45rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--white);
    }
    .footer-logo span { color: var(--accent); }
    .footer-location {
      font-size: 0.62rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 7px;
    }
    .footer-nav {
      display: flex;
      gap: 28px;
      flex-wrap: wrap;
    }
    .footer-nav a {
      font-family: var(--font-d);
      font-size: 0.65rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer-nav a:hover { color: var(--white); }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 22px;
      border-top: 1px solid var(--border);
    }
    .footer-copy {
      font-size: 0.6rem;
      letter-spacing: 0.1em;
      color: var(--muted);
    }
    .footer-socials { display: flex; gap: 18px; }
    .footer-socials a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
    .footer-socials a:hover { color: var(--white); }
    @media (max-width: 580px) {
      .footer-top { flex-direction: column; gap: 28px; }
      .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
    }

    /* ══════════════════════════════════════════════════════════
       ░░  RESPONSIVE OVERHAUL + SECTION REDESIGNS  ░░
       ── Everything below this banner overrides or extends the
          styles above. Kept at the end of the stylesheet so the
          cascade does the work and the original declarations
          remain readable for reference.
    ══════════════════════════════════════════════════════════ */

    /* ── Safety net: prevent any horizontal overflow on mobile.
       Paired with body { overflow-x: hidden } further up. */
    html, body { max-width: 100%; }
    img, svg, video { max-width: 100%; height: auto; }

    /* ══════════════════════════════════════════════════════════
       GALLERY — force a 3-column grid on mobile viewports.
       The desktop auto-fill grid stays intact; only phones get
       the fixed 4-col treatment, with smaller gaps so tiles
       stay sharp at small sizes.
    ══════════════════════════════════════════════════════════ */
    @media (max-width: 640px) {
      .gallery-grid-wrap { padding: 0 4%; }
      .gallery-grid {
        /* 4 equal columns — each cell keeps its 1:1 aspect ratio */
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px;
      }
      .gallery-header { padding: 0 5%; }
      .gallery-filters {
        gap: 16px;
        flex-wrap: wrap;
      }
      .gal-btn { font-size: 0.7rem; letter-spacing: 0.14em; }
    }

    /* ══════════════════════════════════════════════════════════
       EQUIPMENT — extendable (Show More) list on mobile.
       On >= 760px the full list renders as before.
       On < 760px only the first 3 items per block are visible
       until the user taps the toggle. We key off the
       body[data-equip-expanded="true"] attribute set by JS.
    ══════════════════════════════════════════════════════════ */
    .equip-toggle-wrap {
      display: none;               /* hidden on desktop */
      justify-content: center;
      margin-top: 12px;
    }
    .equip-toggle {
      background: transparent;
      border: 1px solid var(--border-strong);
      color: var(--white);
      font-family: var(--font-d);
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      padding: 14px 26px;
      cursor: pointer;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: background 0.3s, color 0.3s, border-color 0.3s;
    }
    .equip-toggle:hover,
    .equip-toggle:focus-visible {
      background: var(--accent);
      border-color: var(--accent);
      color: #000;
      outline: none;
    }
    .equip-toggle .chev {
      transition: transform 0.3s ease;
    }
    body[data-equip-expanded="true"] .equip-toggle .chev {
      transform: rotate(180deg);
    }

    @media (max-width: 760px) {
      /* Single column list on mobile so each block reads clearly */
      .block-wrapper { column-count: 1 !important; }

      /* Hide every <li> beyond the 3rd in each block by default. */
      .section-block li:nth-child(n+4) { display: none; }

      /* When expanded, show them all. */
      body[data-equip-expanded="true"] .section-block li:nth-child(n+4) {
        display: list-item;
      }

      /* Show the toggle only on mobile */
      .equip-toggle-wrap { display: flex; }
    }

    /* ══════════════════════════════════════════════════════════
       TESTIMONIALS — redesigned as a card slider.
       High-impact typography, scroll-snap carousel on mobile,
       single active card with peek on desktop.
    ══════════════════════════════════════════════════════════ */
    #testimonials {
      padding: 60px 0;
      position: relative;
    }
    .testi-head {
      max-width: 1200px;
      margin: 0 auto 56px;
      padding: 0 8%;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 32px;
      flex-wrap: wrap;
    }
    .testi-eyebrow {
      font-family: var(--font-d);
      font-size: 0.65rem;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 14px;
    }
    .testi-title {
      font-family: var(--font-d);
      font-size: clamp(3rem, 5.5vw, 5.5rem);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      line-height: 0.95;
    }
    .testi-title em {
      font-style: normal;
      color: var(--accent);
    }
    .testi-cards {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 8%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px;
    }
    .testi-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 44px 40px 36px;
      position: relative;
      transition: transform 0.45s cubic-bezier(0.2,0.8,0.2,1),
                  border-color 0.3s, background 0.3s;
      display: flex;
      flex-direction: column;
      gap: 24px;
      overflow: hidden;
    }
    .testi-card::before {
      /* Oversized quotation mark as a graphic flourish */
      content: "\201C";
      position: absolute;
      top: -30px;
      right: 18px;
      font-family: var(--font-d);
      font-size: 12rem;
      line-height: 1;
      color: var(--accent);
      opacity: 0.12;
      pointer-events: none;
    }
    .testi-card:hover {
      transform: translateY(-6px);
      border-color: var(--accent);
      background: var(--bg-elev);
    }
    .testi-card-quote {
      font-family: var(--font-b);
      font-size: 1.15rem;
      line-height: 1.55;
      color: var(--white);
      font-weight: 400;
    }
    .testi-card-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 20px;
      border-top: 1px solid var(--border);
      gap: 16px;
    }
    .testi-card-author {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .testi-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), #b34600);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-d);
      font-weight: 700;
      color: #000;
      font-size: 0.9rem;
      letter-spacing: 0.05em;
      flex-shrink: 0;
    }
    .testi-card-name {
      font-family: var(--font-d);
      font-size: 0.95rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--white);
    }
    .testi-card-index {
      font-family: var(--font-d);
      font-size: 0.7rem;
      letter-spacing: 0.25em;
      color: var(--muted);
    }
    @media (max-width: 820px) {
      .testi-cards { grid-template-columns: 1fr; }
      .testi-card { padding: 36px 28px 28px; }
      .testi-card-quote { font-size: 1.05rem; }
    }

    /* ══════════════════════════════════════════════════════════
       CLIENTS — editorial list inspired by jbpilon.com.
       Large rows, numeric index, hover slides the name and
       reveals the orange accent bar.
    ══════════════════════════════════════════════════════════ */
    #clients { padding: 60px 0; }
    /* Stack the title and subtitle on narrow screens so they
       don't overlap inside the flex container. */
    @media (max-width: 640px) {
      .clients-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        margin-bottom: 40px;
      }
      .clients-sub { max-width: 100%; }
    }
    .clients-list {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 8%;
      border-top: 1px solid var(--border);
    }
    .client-row {
      display: grid;
      grid-template-columns: 60px 1fr auto 40px;
      align-items: center;
      gap: 24px;
      padding: 28px 0;
      border-bottom: 1px solid var(--border);
      position: relative;
      cursor: default;
      transition: padding 0.3s ease;
    }
    .client-row::before {
      /* Left-edge accent bar that expands on hover */
      content: "";
      position: absolute;
      left: -8%;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--accent);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform 0.45s cubic-bezier(0.2,0.8,0.2,1);
    }
    .client-row:hover::before { transform: scaleY(1); }
    .client-row:hover { padding-left: 20px; }

    .client-index {
      font-family: var(--font-d);
      font-size: 0.75rem;
      letter-spacing: 0.2em;
      color: var(--muted);
    }
    .client-row-name {
      font-family: var(--font-d);
      font-size: clamp(1.6rem, 3vw, 2.6rem);
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--dim);
      transition: color 0.3s, letter-spacing 0.3s;
      line-height: 1;
    }
    .client-row:hover .client-row-name {
      color: var(--white);
      letter-spacing: 0.04em;
    }
    .client-row-genre {
      font-size: 0.7rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .client-row-arrow {
      color: var(--muted);
      opacity: 0;
      transform: translateX(-8px);
      transition: opacity 0.3s, transform 0.3s, color 0.3s;
    }
    .client-row:hover .client-row-arrow {
      color: var(--accent);
      opacity: 1;
      transform: translateX(0);
    }

    @media (max-width: 640px) {
      .client-row {
        grid-template-columns: 40px 1fr;
        gap: 16px;
        padding: 22px 0;
      }
      .client-row-genre { grid-column: 2; margin-top: 4px; }
      .client-row-arrow { display: none; }
    }

    /* ══════════════════════════════════════════════════════════
       CONTACT — redesigned. Card-based form with strong focus
       states, floating-label fields, and a bold orange CTA.
    ══════════════════════════════════════════════════════════ */
    #contact { padding: 140px 0; }
    .contact-inner {
      /* Override the grid from the original rules */
      grid-template-columns: 1fr 1.2fr;
      gap: 72px;
    }
    .contact-form-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 48px 44px;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    /* Floating-label wrapper: the label sits inside the field
       and lifts when the input is focused or filled. */
    .field {
      position: relative;
      display: flex;
      flex-direction: column;
    }
    .field .form-input,
    .field .form-textarea,
    .field .form-select {
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 12px;
      color: var(--white);
      font-family: var(--font-b);
      font-size: 0.95rem;
      padding: 22px 16px 14px;
      outline: none;
      transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
      width: 100%;
    }
    .field .form-textarea { min-height: 130px; resize: vertical; }
    .field .form-select { appearance: none; -webkit-appearance: none; cursor: pointer; }
    .field .form-label {
      position: absolute;
      left: 16px;
      top: 18px;
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      pointer-events: none;
      transition: transform 0.2s ease, color 0.2s ease, font-size 0.2s ease;
      background: transparent;
    }
    .field .form-input:focus,
    .field .form-textarea:focus,
    .field .form-select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
      background: rgba(255,255,255,0.01);
    }
    /* Lift the label when the field is focused or non-empty
       (:not(:placeholder-shown) covers the filled state). */
    .field .form-input:focus + .form-label,
    .field .form-input:not(:placeholder-shown) + .form-label,
    .field .form-textarea:focus + .form-label,
    .field .form-textarea:not(:placeholder-shown) + .form-label,
    .field .form-select:focus + .form-label,
    .field .form-select:valid + .form-label {
      transform: translateY(-14px);
      font-size: 0.6rem;
      color: var(--accent);
      letter-spacing: 0.22em;
    }
    /* Keep placeholder invisible so the floating label owns
       the "empty state" messaging. */
    .field .form-input::placeholder,
    .field .form-textarea::placeholder { color: transparent; }

    .contact-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: var(--accent);
      border: 1px solid var(--accent);
      color: #000;
      font-family: var(--font-d);
      font-size: 0.85rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      padding: 18px 30px;
      cursor: pointer;
      border-radius: 999px;
      transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
      align-self: flex-start;
      font-weight: 700;
    }
    .contact-cta:hover {
      background: var(--accent-hover);
      border-color: var(--accent-hover);
      transform: translateY(-2px);
      box-shadow: 0 10px 30px -10px var(--accent);
    }
    .contact-cta:focus-visible {
      outline: 2px solid var(--white);
      outline-offset: 3px;
    }
    .contact-cta svg { transition: transform 0.25s; }
    .contact-cta:hover svg { transform: translateX(5px); }

    @media (max-width: 820px) {
      .contact-inner { grid-template-columns: 1fr !important; gap: 48px; }
      .contact-form-card { padding: 32px 22px; }
      .form-row { grid-template-columns: 1fr !important; }
    }

    /* ══════════════════════════════════════════════════════════
       MOBILE NIPS & TUCKS — catch-all adjustments so nothing
       overflows or gets clipped on small viewports.
    ══════════════════════════════════════════════════════════ */
    @media (max-width: 640px) {
      #studio, #equipment, #jb-pilon, #clients, #contact, #testimonials {
        padding: 40px 0;
      }
      .studio-inner, .equipment-inner, .jb-inner,
      .clients-inner, .contact-inner, .testi-head, .testi-cards {
        padding-left: 6%;
        padding-right: 6%;
      }
      .section-title, .contact-title, .studio-heading, .testi-title, .jb-name {
        font-size: clamp(2.4rem, 9vw, 3.4rem);
      }
      #layered-container { font-size: 40px; }
  .layered-li, .layered-li p { height: 45px; line-height: 40px; }
      .equipment-title { margin-bottom: 40px; }
    }

    /* ══════════════════════════════════════════════════════════
       ░░  V2 PASS — mobile menu kill, bigger/bolder type,
           palette rebalance (less orange, more green/yellow/red),
           flatter Testimonials & Contact, new Clients logo wall.
       ══════════════════════════════════════════════════════════ */

    /* ── MOBILE: remove the pop-up navigation ─────────────────── */
    @media (max-width: 820px) {
      #menu-trigger,
      #menu-overlay { display: none !important; }
      /* Keep the BOOK button but slide it into the top-right so
         it's the sole persistent CTA on mobile. */
      #book-btn { right: 24px; }
    }

    /* ── TYPOGRAPHY SCALE — bigger + bolder ────────────────────
       Intentionally excluded from this pass per request:
         .equipment-title   – kept at original size
         .equipment-inner li – kept at original size
         .marquee-item      – kept at original size
         #gallery .section-title – kept at original size
    ───────────────────────────────────────────────────────────── */
    body { font-weight: 500; }

    /* Studio */
    .studio-heading { font-size: clamp(4rem, 7vw, 7.5rem); font-weight: 900; }
    .studio-text { font-size: 1.35rem; line-height: 1.7; font-weight: 500; color: #d8d8d8; }
    .stat-number { font-size: 2.4rem; font-weight: 900; }
    .stat-label  { font-size: 0.72rem; }

    /* Section titles (gallery is excluded by a more-specific rule below) */
    .section-title,
    .contact-title,
    .testi-title,
    .jb-name {
      font-size: clamp(3.8rem, 7vw, 7rem);
      font-weight: 900;
      letter-spacing: 0.02em;
    }
    /* Preserve the gallery title at its current size (exclusion) */
    #gallery .section-title {
      font-size: clamp(3.2rem, 5.5vw, 5.5rem);
      font-weight: 700;
    }

    /* JB bio */
    .jb-bio p { font-size: 1.2rem; line-height: 1.7; font-weight: 500; color: #d8d8d8; }
    .jb-role  { font-size: 0.75rem; letter-spacing: 0.4em; }

    /* Contact copy */
    .contact-desc { font-size: 1.25rem; line-height: 1.65; font-weight: 500; color: #d8d8d8; }
    .info-value   { font-size: 1.15rem; font-weight: 600; }
    .info-label   { font-size: 0.68rem; }

    /* Menu links (desktop) slightly bolder */
    .flip-link { font-weight: 900; }

    /* ── PALETTE REBALANCE ──────────────────────────────────────
       Shift big splashes of orange to the green/yellow/red set.
       Orange is now reserved for tiny dots and micro-highlights. */

    /* Book button */
    #book-btn { color: var(--green); }
    #book-btn:hover { color: var(--white); }

    /* Layered text between gallery & equipment: yellow now */
    #layered-text-section,
    #layered-container,
    #layered-container p { color: var(--yellow) !important; }

    /* Menu flip-bottom letters */
    .flip-bottom { color: var(--green); }

    /* Hero letter overlay flash — restored to the original
       orange/red flourish so the title reveal keeps its punch. */
    .letter-overlay { color: var(--red); }

    /* Marquee dots — back to orange (per request) */
    .marquee-item .dot { color: var(--accent) !important; }

    /* Footer logo dot (was orange) → green */
    .footer-logo span { color: var(--green); }

    /* Info-value hover */
    .info-value a:hover { color: var(--green); }

    /* Testimonials eyebrow was orange → green */
    .testi-eyebrow { color: var(--green); }

    /* Equipment h3 headings — tint mixture (keeps list itself untouched) */
    .section-block h3 { color: var(--green); }

    /* ── TESTIMONIALS — slider, flatter, no orange ──────────────
       Renders one quote at a time. Uses scroll-snap on the track
       and prev/next buttons. Big, bold quote text. */
    #testimonials { padding: 140px 0; background: var(--bg); }
    .testi-head { margin-bottom: 72px; }
    .testi-eyebrow {
      font-family: var(--font-d);
      font-size: 0.75rem;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      font-weight: 700;
    }
    .testi-title { line-height: 0.92; }
    .testi-title em { font-style: normal; color: var(--yellow); }

    /* Override the old card grid styles: we'll use a slider */
    .testi-cards {
      display: block !important;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 8%;
      position: relative;
    }
    .testi-slider-viewport {
      overflow: hidden;
      position: relative;
      border-top: 2px solid var(--white);
      border-bottom: 2px solid var(--white);
      padding: 72px 0;
    }
    .testi-slider-track {
      display: flex;
      transition: transform 0.65s cubic-bezier(0.2,0.8,0.2,1);
      will-change: transform;
    }
    .testi-slide {
      flex: 0 0 100%;
      padding: 0 8px;
      display: flex;
      flex-direction: column;
      gap: 36px;
    }
    /* Big bold quote — flat, no card, no rounds, no orange */
    .testi-slide-quote {
      font-family: var(--font-b);
      font-size: clamp(1.6rem, 3.2vw, 3rem);
      line-height: 1.2;
      letter-spacing: -0.015em;
      font-weight: 700;
      color: var(--white);
      max-width: 1000px;
    }
    .testi-slide-quote .pw {
      color: var(--green);
      font-size: 1.15em;
      vertical-align: -0.05em;
    }
    .testi-slide-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
      border-top: 1px solid var(--border);
      padding-top: 28px;
    }
    .testi-slide-author {
      font-family: var(--font-d);
      font-size: 1.15rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 900;
      color: var(--white);
    }
    .testi-slide-author::before {
      content: "— ";
      color: var(--green);
    }
    .testi-slide-idx {
      font-family: var(--font-d);
      font-size: 0.85rem;
      letter-spacing: 0.25em;
      color: var(--muted);
      font-weight: 700;
    }
    .testi-slide-idx b { color: var(--white); }

    /* Navigation row under the slider */
    .testi-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 32px;
      gap: 16px;
      flex-wrap: wrap;
    }
    .testi-dots {
      display: flex;
      gap: 10px;
    }
    .testi-dot-btn {
      width: 34px;
      height: 4px;
      background: var(--border-strong);
      border: none;
      padding: 0;
      cursor: pointer;
      transition: background 0.3s, width 0.3s;
    }
    .testi-dot-btn.active { background: var(--green); width: 56px; }
    .testi-dot-btn:hover { background: var(--green); }

    .testi-nav {
      display: flex;
      gap: 0;
      border: 2px solid var(--white);
    }
    .testi-nav-btn {
      width: 56px;
      height: 56px;
      border: none;
      background: transparent;
      color: var(--white);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.25s, color 0.25s;
    }
    .testi-nav-btn + .testi-nav-btn { border-left: 2px solid var(--white); }
    .testi-nav-btn:hover { background: var(--yellow); color: #000; }

    @media (max-width: 640px) {
      .testi-slider-viewport { padding: 48px 0; }
      .testi-slide-quote { font-size: clamp(1.3rem, 5.5vw, 1.8rem); font-weight: 700; }
    }

    /* ── CONTACT — flatter, bolder, less orange ──────────────── */
    #contact { padding: 140px 0; }
    .contact-title em { font-style: normal; color: var(--yellow); }
    .contact-eyebrow {
      font-size: 0.75rem;
      letter-spacing: 0.4em;
      color: var(--green);
      font-weight: 700;
    }
    .contact-form-card {
      background: var(--bg);
      border: 2px solid var(--white);
      border-radius: 0 !important;     /* Flat, no rounds */
      padding: 40px 40px;
      gap: 28px;
    }
    .field .form-input,
    .field .form-textarea,
    .field .form-select {
      border: none;
      border-bottom: 2px solid var(--border-strong);
      border-radius: 0 !important;
      background: transparent;
      font-size: 1.1rem;
      font-weight: 600;
      padding: 26px 4px 12px;
    }
    .field .form-label {
      left: 4px;
      top: 22px;
      font-weight: 700;
      font-size: 0.7rem;
      letter-spacing: 0.25em;
    }
    .field .form-input:focus,
    .field .form-textarea:focus,
    .field .form-select:focus {
      border-color: var(--yellow);
      box-shadow: none;
      background: transparent;
    }
    .field .form-input:focus + .form-label,
    .field .form-input:not(:placeholder-shown) + .form-label,
    .field .form-textarea:focus + .form-label,
    .field .form-textarea:not(:placeholder-shown) + .form-label,
    .field .form-select:focus + .form-label,
    .field .form-select:valid + .form-label {
      transform: translateY(-16px);
      color: var(--yellow);
      font-size: 0.62rem;
      letter-spacing: 0.3em;
    }
    /* CTA — flat rectangle, yellow, bold */
    .contact-cta {
      border-radius: 0 !important;
      background: var(--yellow);
      border: 2px solid var(--yellow);
      color: #000;
      font-weight: 900;
      font-size: 0.95rem;
      letter-spacing: 0.3em;
      padding: 22px 36px;
    }
    .contact-cta:hover {
      background: #000;
      color: var(--yellow);
      border-color: var(--yellow);
      transform: none;
      box-shadow: 6px 6px 0 var(--yellow);
    }

    /* Catchy intro under the contact title */
    .contact-catch {
      font-family: var(--font-b);
      font-size: clamp(1.4rem, 2.4vw, 2rem);
      font-weight: 800;
      line-height: 1.2;
      color: var(--white);
      margin-bottom: 32px;
      max-width: 420px;
    }
    .contact-catch .pw {
      color: var(--green);
      font-size: 1.6em;
      vertical-align: -0.05em;
      margin: 0 2px;
    }

    /* ── CLIENTS LOGO WALL (user-supplied spec) ─────────────── */
    .clients-section {
      background:
        radial-gradient(ellipse at 18% 10%, rgba(143,174,106,0.22), transparent 55%),
        radial-gradient(ellipse at 82% 85%, rgba(201,79,58,0.20), transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(255,204,0,0.12), transparent 60%),
        #000;
      padding: 60px 52px 72px;
      position: relative;
      overflow: hidden;
    }
    .clients-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 54px 54px;
      pointer-events: none;
      opacity: 0.45;
    }
    .clients-section .clients-inner {
      max-width: 1300px;
      margin: 0 auto;
      /* Override the generic padding from the original .clients-inner */
      padding: 0;
    }
    .clients-big-title {
      font-family: var(--ff-d);
      font-weight: 900;
      font-style: italic;
      font-size: clamp(32px, 4vw, 56px);
      color: var(--cr);
      line-height: 0.9;
      letter-spacing: -0.03em;
      margin-bottom: 48px;
      white-space: nowrap;
      position: relative;
    }
    .clients-big-title .tint-green { color: var(--green); font-style: normal; }
    .clients-big-title .tint-red   { color: var(--red); font-style: normal; }
    .clients-title-dot { color: var(--yellow); font-style: normal; }
    .clients-logos {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      align-items: left;
      justify-content: left;
    }
    .cl {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 16px;
    }
    .cl img {
      max-width: 220px;
      max-height: 100px;
      width: auto;
      object-fit: contain;
      display: block;
      mix-blend-mode: screen;
      filter: grayscale(100%) brightness(1.05);
      transition: transform .3s cubic-bezier(.34,1.56,.64,1), filter .35s ease;
    }
    .cl img:hover { transform: scale(1.25); filter: grayscale(0%) brightness(1.1); }
    .cl { position: relative; z-index: 1; }
    @media (max-width: 960px) {
      .clients-big-title {
        font-size: clamp(44px, 10vw, 72px);
        margin-bottom: 40px;
        white-space: normal;
      }
      .cl img { max-width: 150px; max-height: 72px; }
      .cl { padding: 6px 14px; }
    }
    @media (max-width: 540px) {
      .cl img { max-width: 110px; max-height: 54px; }
      .cl { padding: 6px 10px; }
      .clients-section { padding: 72px 20px 88px; }
    }

    /* ══════════════════════════════════════════════════════════
       ░░  V3 PASS — title sizing fixes, vertical SPACE,
           tighter JB stack, cleaner slider buttons,
           clients side margins.
       ══════════════════════════════════════════════════════════ */

    /* ── STUDIO: stacked "THE SPACE" with vertical SPACE ───────
       Layout:
         [THE]   [SPACE rotated -90°]
         [body text]
       The whole heading becomes a grid so SPACE occupies a tall
       narrow column to the right of "THE" and the body copy
       flows underneath with minimal breathing room. */
    .studio-inner { gap: 100px; }
    .studio-heading--stacked {
      display: grid;
      grid-template-columns: auto auto;
      grid-template-rows: auto;
      align-items: start;
      column-gap: 18px;
      margin-bottom: 18px;
      line-height: 0.9;
    }
    .studio-heading--stacked .studio-the {
      font-family: var(--font-d);
      font-size: clamp(2.6rem, 4.2vw, 4.4rem);
      font-weight: 900;
      line-height: 0.9;
      color: var(--white);
      padding-top: 4px;
    }
    .studio-heading--stacked .studio-space {
      font-family: var(--font-pw);
      color: var(--green);
      /* Rotated 90° counter-clockwise so SPACE reads vertically. */
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-size: clamp(5.5rem, 10vw, 9.5rem);
      line-height: 0.8;
      letter-spacing: -0.02em;
    }
    /* Bring the body text closer on desktop where the grid has
       room to breathe; tightens the visual relationship. */
    .studio-inner .studio-text {
      margin-top: 0;
      margin-bottom: 36px;
      line-height: 1.55;
    }
    @media (max-width: 640px) {
      .studio-heading--stacked .studio-the  { font-size: clamp(2rem, 9vw, 3rem); }
      .studio-heading--stacked .studio-space { font-size: clamp(4.5rem, 18vw, 7rem); }
    }

    /* ── JB PILON: tight stacked name, less space between lines
       of the bio, PickleWeasel on both words. */
    .jb-name--stacked {
      display: flex;
      flex-direction: column;
      line-height: 0.78;             /* super-tight stack */
      letter-spacing: -0.02em;
      margin-bottom: 10px;
      gap: 0;
    }
    .jb-name--stacked .pw {
      font-size: clamp(4.5rem, 9vw, 8rem);
      line-height: 0.78;
    }
    /* Tighten the neighbour copy */
    .jb-role { margin-bottom: 22px; }
    .jb-bio p {
      line-height: 1.4 !important;
      margin-bottom: 14px !important;
    }

    /* ── TESTIMONIALS: dial the title back, fix the nav ───────
       Old version used pw--xxl (1.7em × 7rem) which blew up to
       12rem. V2 sets an explicit, sensible size. */
    .testi-title.testi-title--v2 {
      font-size: clamp(2.4rem, 4.8vw, 4.2rem) !important;
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0.02em;
    }
    .testi-title-loud {
      color: var(--yellow);
      font-size: 1.2em;              /* small bump, not a blow-up */
      vertical-align: -0.02em;
    }

    /* Slider buttons — replace the buggy split-border treatment
       with two plain square buttons + a small gap. Easier to
       style, easier to click, no overlapping border quirks. */
    .testi-nav {
      border: none !important;
      gap: 10px;
    }
    .testi-nav-btn {
      border: 2px solid var(--white) !important;
      border-left-width: 2px !important;
      background: transparent;
    }
    .testi-nav-btn:hover {
      background: var(--yellow);
      border-color: var(--yellow) !important;
      color: #000;
    }
    .testi-nav-btn:focus-visible {
      outline: 2px solid var(--yellow);
      outline-offset: 3px;
    }
    /* Cancel the old ".testi-nav-btn + .testi-nav-btn" rule */
    .testi-nav-btn + .testi-nav-btn { border-left: 2px solid var(--white) !important; }

    /* ── CONTACT: dial title back ───────────────────────────── */
    .contact-title.contact-title--v2 {
      font-size: clamp(2.6rem, 5vw, 4.6rem) !important;
      font-weight: 900;
      line-height: 0.95;
      letter-spacing: 0.01em;
      margin-bottom: 20px;
    }
    .contact-title-loud {
      color: var(--white);
      font-size: 1.35em;             /* accent, not oversized */
      vertical-align: -0.04em;
    }
    .contact-catch {
      font-size: clamp(1.1rem, 1.6vw, 1.4rem);
      font-weight: 800;
      line-height: 1.35;
      margin-bottom: 22px;
      max-width: 420px;
    }
    .contact-catch-accent {
      color: var(--green);
      font-size: 1.3em;
      vertical-align: -0.05em;
    }
    .contact-desc {
      font-size: 1.1rem !important;
      line-height: 1.55 !important;
      margin-bottom: 40px !important;
    }

    /* ── CLIENTS: match the 1200px container width used by the
       rest of the page so the logo wall reads as part of the
       same column, not a wider full-bleed band. */
    #clients.clients-section {
      padding-left: 0;
      padding-right: 0;
      padding-top: 60px;
      padding-bottom: 60px;
    }
    #clients.clients-section .clients-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 8%;
    }
    @media (max-width: 640px) {
      #clients.clients-section .clients-inner {
        padding: 0 6%;
      }
      #clients.clients-section { padding-top: 50px; padding-bottom: 50px; }
    }

    /* ══════════════════════════════════════════════════════════
       ░░  V4 PASS — buffalo parallax, contact popup, JB widen,
           testimonials cleanup, menu socials, bolder footer.
       ══════════════════════════════════════════════════════════ */

    /* ── BUFFALO PARALLAX ─────────────────────────────────────
       Fixed background image sits between Gallery and Equipment.
       As the user scrolls the section, the image appears to stay
       in place; neighbouring sections (opaque black) cover it on
       exit, producing the reveal / hide effect. */
    #buffalo-parallax {
      position: relative;
      width: 100%;
      height: 90vh;
      min-height: 520px;
      background-image: url('assets/buffalo.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-color: #000;
    }
    /* iOS Safari ignores background-attachment: fixed. Fall back
       to a scrolling cover image there; the reveal-on-scroll
       impression is still reasonable. */
    @supports (-webkit-touch-callout: none) {
      #buffalo-parallax { background-attachment: scroll; }
    }
    @media (max-width: 768px) {
      #buffalo-parallax { height: 60vh; min-height: 380px; }
    }

    /* ── JB PILON — widen to match the 1200px column ─────────
       Originally used `justify-content: center`, which left the
       image and content hugging the middle even on wide screens.
       Swap to a space-between layout anchored at the container
       edges so the section reads at the same width as the rest. */
    .jb-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 8%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 60px;
    }
    .jb-content {
      margin-left: 0;
      margin-top: 0;
      flex: 1;
      max-width: 640px;
    }
    .jb-bio p { max-width: none; }
    @media (max-width: 860px) {
      .jb-inner { flex-direction: column; align-items: center; gap: 32px; }
      .jb-content { text-align: center; max-width: 100%; }
    }

    /* ── TESTIMONIALS — remove top/bottom white borders,
         switch nav buttons to round + thin outline like the
         menu trigger button. */
    .testi-slider-viewport {
      border-top: none;
      border-bottom: none;
    }
    .testi-nav {
      border: none !important;
      gap: 12px;
    }
    .testi-nav-btn,
    .testi-nav-btn + .testi-nav-btn {
      width: 56px;
      height: 56px;
      border-radius: 50% !important;
      border: 1px solid rgba(255,255,255,0.2) !important;
      background: rgba(10,10,10,0.7);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: var(--white);
      transition: border-color 0.3s, background 0.3s, color 0.3s;
    }
    .testi-nav-btn:hover {
      background: rgba(30,30,30,0.9) !important;
      border-color: rgba(255,255,255,0.5) !important;
      color: var(--white) !important;
    }

    /* ── MENU OVERLAY SOCIALS ─────────────────────────────────
       Pinned bottom-left of the overlay, echoing the left-edge
       alignment of the flip links. */
    .menu-socials {
      position: absolute;
      left: 10vw;
      bottom: 8vh;
      display: flex;
      gap: 22px;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
    }
    #menu-overlay.open .menu-socials {
      opacity: 1;
      transform: translateY(0);
    }
    .menu-socials a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.2);
      color: var(--white);
      transition: background 0.3s, border-color 0.3s, transform 0.3s;
    }
    .menu-socials a:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.5);
      transform: translateY(-2px);
    }

    /* ── CONTACT POPUP — same frosted-glass shell as the menu
         overlay. Triggered by the BOOK button. Uses visibility
         toggle (no transition on opacity) so the dialog is
         either fully shown or fully hidden — simpler than the
         opacity-fade approach which proved flaky here. */
    #contact-popup {
      position: fixed;
      inset: 0;
      background: rgba(10, 10, 10, 0.9);
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
      z-index: 10000;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      overflow-y: auto;
      display: none;
    }
    #contact-popup.open {
      display: flex;
      animation: popupIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    @keyframes popupIn {
      from { opacity: 0; transform: scale(0.98); }
      to   { opacity: 1; transform: scale(1); }
    }
    .contact-popup-inner {
      width: 100%;
      max-width: 640px;
      margin: auto;
    }
    .contact-popup-eyebrow {
      font-family: var(--font-d);
      font-size: 0.75rem;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      color: var(--green);
      font-weight: 700;
      margin-bottom: 14px;
    }
    .contact-popup-title {
      font-family: var(--font-d);
      font-size: clamp(2.6rem, 5vw, 4.6rem);
      font-weight: 900;
      line-height: 0.95;
      letter-spacing: 0.01em;
      color: var(--white);
      margin-bottom: 28px;
      text-transform: uppercase;
    }
    .contact-popup-title em {
      font-style: normal;
      color: var(--red);
    }
    #contact-popup-form {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }
    #contact-popup-form .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
    }
    @media (max-width: 640px) {
      #contact-popup-form .form-row { grid-template-columns: 1fr; }
    }
    #contact-popup-form .field .form-input,
    #contact-popup-form .field .form-textarea,
    #contact-popup-form .field .form-select {
      background: transparent;
      border: none;
      border-bottom: 2px solid rgba(255,255,255,0.22);
      border-radius: 0;
      color: var(--white);
      font-family: var(--font-b);
      font-size: 1.05rem;
      font-weight: 600;
      padding: 26px 4px 12px;
      width: 100%;
      outline: none;
      transition: border-color 0.25s;
    }
    #contact-popup-form .field .form-textarea {
      min-height: 110px;
      resize: vertical;
    }
    #contact-popup-form .field .form-label {
      position: absolute;
      left: 4px;
      top: 22px;
      font-size: 0.7rem;
      letter-spacing: 0.25em;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      pointer-events: none;
      transition: transform 0.2s ease, color 0.2s ease, font-size 0.2s ease;
    }
    #contact-popup-form .field .form-input:focus,
    #contact-popup-form .field .form-textarea:focus,
    #contact-popup-form .field .form-select:focus {
      border-color: var(--white);
    }
    #contact-popup-form .field .form-input:focus + .form-label,
    #contact-popup-form .field .form-input:not(:placeholder-shown) + .form-label,
    #contact-popup-form .field .form-textarea:focus + .form-label,
    #contact-popup-form .field .form-textarea:not(:placeholder-shown) + .form-label,
    #contact-popup-form .field .form-select:focus + .form-label,
    #contact-popup-form .field .form-select:valid + .form-label {
      transform: translateY(-16px);
      color: var(--white);
      font-size: 0.6rem;
      letter-spacing: 0.3em;
    }
    #contact-popup-form .contact-cta {
      align-self: flex-start;
      background: var(--red);
      border: 2px solid var(--red);
      color: #000;
      font-family: var(--font-d);
      font-weight: 900;
      font-size: 0.95rem;
      letter-spacing: 0.3em;
      padding: 22px 36px;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 0;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      transition: background 0.25s, color 0.25s, box-shadow 0.25s;
    }
    #contact-popup-form .contact-cta:hover {
      background: #000;
      color: var(--red);
      box-shadow: 6px 6px 0 var(--red);
    }
    #contact-popup-close {
      position: absolute;
      top: 28px;
      right: 36px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.2);
      background: rgba(10,10,10,0.7);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: var(--white);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.3s, background 0.3s, transform 0.3s;
    }
    #contact-popup-close:hover {
      border-color: rgba(255,255,255,0.5);
      background: rgba(30,30,30,0.9);
      transform: rotate(90deg);
    }

    /* ── FOOTER — bigger, bolder. ────────────────────────────── */
    footer {
      padding: 40px 0 28px;
    }
    .footer-logo {
      font-family: var(--font-pw);
      font-size: clamp(3.2rem, 7vw, 5.6rem);
      font-weight: 400;
      letter-spacing: -0.01em;
      line-height: 0.85;
      text-transform: none;
      color: var(--white);
      margin-right: 56px;
    }
    .footer-logo span { color: var(--green); }
    .footer-location {
      font-size: 0.78rem;
      letter-spacing: 0.2em;
      font-weight: 600;
      margin-top: 6px;
    }
    .footer-top > div:first-child { display: flex; flex-direction: column; gap: 0; padding-right: 48px; }
    .footer-top {
      margin-bottom: 20px;
      gap: 32px;
    }
    .footer-nav {
      gap: 22px;
      row-gap: 8px;
    }
    .footer-nav a {
      font-size: 0.78rem;
      letter-spacing: 0.2em;
      font-weight: 900;
      color: var(--dim);
      line-height: 1.2;
    }
    .footer-nav a:hover { color: var(--yellow); }
    .footer-copy {
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      font-weight: 700;
      color: var(--dim);
      line-height: 1.2;
    }
    .footer-socials a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.18);
      color: var(--white);
      transition: background 0.3s, border-color 0.3s;
    }
    .footer-socials a:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.5);
    }
    .footer-bottom { padding-top: 18px; }

    @media (max-width: 580px) {
      footer { padding: 32px 0 24px; }
      .footer-nav { gap: 14px; }
      .footer-nav a { font-size: 0.74rem; letter-spacing: 0.16em; }
      .footer-top > div:first-child { padding-right: 0; }
      .footer-logo { margin-right: 0; }
    }