#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;
    }
    .scroll-indicator {
      position: absolute;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      pointer-events: none;
      opacity: 0.55;
      will-change: opacity, transform;
      z-index: 5;
    }
    .scroll-indicator-label {
      font-family: var(--font-d, sans-serif);
      font-size: 0.65rem;
      letter-spacing: 0.42em;
      text-transform: uppercase;
      color: var(--white, #fff);
      font-weight: 700;
    }
    .scroll-indicator-line {
      width: 1px;
      height: 38px;
      background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,0));
      animation: scroll-indicator-pulse 2s ease-in-out infinite;
      transform-origin: top;
    }
    @keyframes scroll-indicator-pulse {
      0%   { transform: scaleY(0.3); opacity: 0.2; }
      50%  { transform: scaleY(1);   opacity: 1;   }
      100% { transform: scaleY(0.3); opacity: 0.2; }
    }
    @media (prefers-reduced-motion: reduce) {
      .scroll-indicator-line { animation: none; }
    }

    /* ── BACK TO TOP ─ subtle round button, fades in past hero. */
    #back-to-top {
      position: fixed;
      bottom: 28px;
      right: 28px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(10,10,10,0.6);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: var(--white, #fff);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9998;
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px);
      transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.25s, background 0.25s;
    }
    #back-to-top.visible {
      opacity: 0.9;
      pointer-events: auto;
      transform: translateY(0);
    }
    #back-to-top:hover {
      opacity: 1;
      border-color: rgba(255,255,255,0.45);
      background: rgba(30,30,30,0.85);
    }
    @media (max-width: 640px) {
      #back-to-top { width: 42px; height: 42px; bottom: 20px; right: 20px; }
    }
    .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) {

      /* Hero rows are flex containers. We force a hard line break
         after letter 4 (BUFFALO) / letter 3 (STUDIO) using a
         pseudo-element with flex-basis:100% placed via `order`.
         Letters keep their natural inline-block width — no forced
         column widths — and `justify-content: center` centers each
         line independently, so the orphan ALO ends up centered. */
      #row-buffalo, #row-studio {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
      }
      #row-buffalo .letter:nth-child(1) { order: 1; }
      #row-buffalo .letter:nth-child(2) { order: 2; }
      #row-buffalo .letter:nth-child(3) { order: 3; }
      #row-buffalo .letter:nth-child(4) { order: 4; }
      #row-buffalo::before {
        content: "";
        flex-basis: 100%;
        height: 0;
        order: 5;
      }
      #row-buffalo .letter:nth-child(5) { order: 6; }
      #row-buffalo .letter:nth-child(6) { order: 7; }
      #row-buffalo .letter:nth-child(7) { order: 8; }

      #row-studio .letter:nth-child(1) { order: 1; }
      #row-studio .letter:nth-child(2) { order: 2; }
      #row-studio .letter:nth-child(3) { order: 3; }
      #row-studio::before {
        content: "";
        flex-basis: 100%;
        height: 0;
        order: 4;
      }
      #row-studio .letter:nth-child(4) { order: 5; }
      #row-studio .letter:nth-child(5) { order: 6; }
      #row-studio .letter:nth-child(6) { order: 7; }

      .letter {
        font-size: 24vw;
        line-height: 0.85;
      }
    }

    /* ══════════════════════════════════════════════════════════
       STUDIO
    ══════════════════════════════════════════════════════════ */
    #studio {
      background: var(--bg);
      padding: 40px 0 24px;
      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: start;
    }
    .studio-iframe-wrap {
      width: 100%;
      position: relative;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border-radius: 0px;
      background: #000;
    }
    .studio-iframe-wrap iframe,
    .studio-iframe-wrap .studio-anim {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
      object-fit: cover;
    }
    .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);
      padding: 56px 0;
      margin: 16px 0;
      overflow: hidden;
      cursor: default;
      user-select: none;
    }
    @media (max-width: 640px) {
      #marquee-section { padding: 40px 0; margin: 8px 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); }

    /* Secondary footer nav — links to the SEO landing pages.
       Visually subordinate to the primary anchor nav above it. */
    .footer-pages {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 22px;
      margin: 22px 0 28px;
      padding: 18px 0 0;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .footer-pages a {
      font-family: var(--font-d);
      font-size: 0.6rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer-pages a:hover { color: var(--white); }
    @media (max-width: 580px) {
      .footer-pages { gap: 8px 16px; margin: 16px 0 22px; }
      .footer-pages a { font-size: 0.66rem; letter-spacing: 0.14em; }
    }

    /* Inline "More:" links row in the studio section. Smaller, dimmed
       so it doesn't fight the lead copy but is still discoverable. */
    .studio-more-links {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.55);
      margin-top: 14px !important;
      letter-spacing: 0.01em;
    }
    .studio-more-links a {
      color: rgba(255,255,255,0.85);
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-color: rgba(255,255,255,0.25);
      transition: color 0.2s, text-decoration-color 0.2s;
    }
    .studio-more-links a:hover {
      color: var(--white);
      text-decoration-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;
      margin-bottom: 64px;
    }
    .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 ─────────────────────────────────────
       Black-and-white reveal between Gallery and Equipment. The
       inner .parallax-bg carries the image (so the grayscale
       filter can apply without breaking the stacking context),
       and is taller than its container so JS can translateY it
       on scroll for a noticeable parallax depth. */
    #buffalo-parallax {
      position: relative;
      width: 100%;
      height: 90vh;
      min-height: 520px;
      overflow: hidden;
      background-color: #000;
    }
    #buffalo-parallax .parallax-bg {
      position: absolute;
      left: 0;
      right: 0;
      top: -20%;
      bottom: -20%;
      background-image: url('assets/buffalo-studio-sheffield-ssl-console.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      filter: grayscale(100%) contrast(1.08) brightness(0.92);
      will-change: transform;
      transform: translate3d(0, 0, 0);
    }
    /* Subtle dark vignette so the B&W reads more cinematic */
    #buffalo-parallax::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(ellipse at center,
                  rgba(0,0,0,0) 55%,
                  rgba(0,0,0,0.55) 100%);
    }
    @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-status {
      font-family: var(--font-b);
      font-size: 0.85rem;
      letter-spacing: 0.04em;
      color: var(--white);
      margin: 4px 0 0;
      min-height: 1.2em;
    }
    .contact-popup-status.error { color: var(--red); }
    .contact-popup-direct {
      margin-top: 40px;
      padding-top: 28px;
      border-top: 1px solid rgba(255,255,255,0.12);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
    }
    @media (max-width: 640px) {
      .contact-popup-direct { grid-template-columns: 1fr; }
    }
    .contact-popup-direct-item {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .contact-popup-direct-label {
      font-family: var(--font-d);
      font-size: 0.65rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 700;
    }
    .contact-popup-direct a {
      font-family: var(--font-b);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--white);
      text-decoration: none;
      border-bottom: 1px solid rgba(255,255,255,0.22);
      padding-bottom: 4px;
      transition: color 0.25s, border-color 0.25s;
      width: fit-content;
    }
    .contact-popup-direct a:hover {
      color: var(--red);
      border-color: 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; }
    }

    /* ══════════════════════════════════════════════════════════
       PHONE-ONLY OVERRIDES — single block, max-width: 640px.
       Desktop and tablet are intentionally untouched.
       ══════════════════════════════════════════════════════════ */
    @media (max-width: 640px) {
      /* BOOK lives in the top-right corner with 20px on each side.
         The menu trigger shrinks and shifts left to clear the BOOK,
         keeping both controls reachable in the corner cluster. */
      #book-btn {
        top: calc(env(safe-area-inset-top, 0px) + 20px);
        right: 20px;
        font-size: 1.75rem;
        line-height: 1.05;
        padding: 0;
      }
      #menu-trigger {
        top: calc(env(safe-area-inset-top, 0px) + 18px);
        right: 110px;
        width: 44px;
        height: 44px;
      }

      /* Contact popup: stop centering vertically — when the form
         is taller than the viewport, flex centering clips the top
         (eyebrow + title + first field were unreachable). Anchor
         to the top instead so the user lands on the heading. */
      #contact-popup {
        height: 100dvh;
        align-items: stretch;
        justify-content: flex-start;
        padding: calc(env(safe-area-inset-top, 0px) + 88px) 18px
                 calc(env(safe-area-inset-bottom, 0px) + 32px);
      }
      .contact-popup-inner { margin: 0 auto; }
      #contact-popup-close {
        top: calc(env(safe-area-inset-top, 0px) + 18px);
        right: 18px;
        width: 48px;
        height: 48px;
      }
      .contact-popup-title { font-size: clamp(2rem, 9vw, 2.6rem); margin-bottom: 22px; }
      .contact-popup-eyebrow { font-size: 0.7rem; }

      /* Marquee — removed entirely on phone. */
      #marquee-section { display: none !important; }

      /* Buffalo parallax image — removed on phone. */
      #buffalo-parallax { display: none !important; }

      /* Equipment title was breaking out of the viewport. */
      .equipment-title {
        font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
        letter-spacing: 0.14em;
        margin-bottom: 36px;
      }

      /* Tighten studio section now that marquee is gone. */
      #studio { padding: 32px 0 32px; }
      #gallery { padding: 32px 0 40px; }
    }


/* ════════════════════════════════════════════════════════════
   SEO LANDING PAGES
   Lightweight content pages at /mixing/, /equipment/, /about/
   etc. — focused on text + structure for crawlers, with one
   visual CTA back to the homepage. No GSAP, no menu overlay.
═══════════════════════════════════════════════════════════════ */

body.seo-page {
  background: var(--bg);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  line-height: 1.65;
  min-height: 100vh;
  margin: 0;
}

.seo-page .seo-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 60px);
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.seo-page .seo-logo {
  font-family: 'NovecentoWide', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  color: var(--white);
  text-decoration: none;
}
.seo-page .seo-logo span {
  color: var(--red);
}
.seo-page .seo-nav {
  display: flex;
  gap: clamp(12px, 3vw, 28px);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.seo-page .seo-nav a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.seo-page .seo-nav a:hover,
.seo-page .seo-nav a[aria-current="page"] {
  color: var(--white);
}
@media (max-width: 720px) {
  .seo-page .seo-nav { display: none; }
}

.seo-page .seo-main {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 8vw, 90px) clamp(20px, 5vw, 40px) 80px;
}
.seo-page .seo-eyebrow {
  font-family: 'NovecentoWide', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 16px;
}
.seo-page h1 {
  font-family: 'NovecentoWide', sans-serif;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0 0 28px;
  color: var(--white);
}
.seo-page h2 {
  font-family: 'NovecentoWide', sans-serif;
  font-size: clamp(1.3rem, 3.4vw, 1.7rem);
  letter-spacing: 0.02em;
  margin: 48px 0 14px;
  color: var(--white);
}
.seo-page h3 {
  font-family: 'NovecentoWide', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 28px 0 8px;
  color: var(--earth);
}
.seo-page p,
.seo-page li {
  color: rgba(255,255,255,0.82);
  font-size: 1rem;
}
.seo-page p { margin: 0 0 18px; }
.seo-page strong { color: var(--white); }
.seo-page a { color: var(--white); text-underline-offset: 3px; }
.seo-page a:hover { color: var(--red); }
.seo-page ul {
  padding-left: 20px;
  margin: 0 0 24px;
}
.seo-page li { margin-bottom: 6px; }

.seo-page .seo-lead {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.92);
  margin-bottom: 32px;
}

.seo-page .seo-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 36px 0 0;
}
.seo-page .seo-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font-family: 'NovecentoWide', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s, background 0.2s, color 0.2s;
}
.seo-page .seo-cta--primary {
  background: var(--red);
  color: var(--white);
}
.seo-page .seo-cta--primary:hover {
  background: var(--white);
  color: var(--bg);
  transform: translateY(-2px);
}
.seo-page .seo-cta--ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.25);
}
.seo-page .seo-cta--ghost:hover {
  border-color: var(--white);
  transform: translateY(-2px);
  color: var(--white);
}

.seo-page .seo-equip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px 36px;
  margin: 32px 0 0;
}
.seo-page .seo-equip-block {
  break-inside: avoid;
}
.seo-page .seo-equip-block h3 {
  margin-top: 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding-bottom: 6px;
}
.seo-page .seo-equip-block ul {
  list-style: none;
  padding: 0;
}
.seo-page .seo-equip-block li {
  font-size: 0.92rem;
  border-bottom: 1px dotted rgba(255,255,255,0.07);
  padding: 6px 0;
}

.seo-page .seo-faq dt {
  font-family: 'NovecentoWide', sans-serif;
  color: var(--white);
  margin-top: 22px;
  font-size: 1.05rem;
}
.seo-page .seo-faq dd {
  margin: 6px 0 0;
  color: rgba(255,255,255,0.78);
}

.seo-page .seo-footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 28px clamp(20px, 5vw, 40px);
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}
.seo-page .seo-footer a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  margin: 0 10px;
}
.seo-page .seo-footer a:hover { color: var(--white); }

.seo-page .seo-form {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 28px;
  margin-top: 28px;
}
.seo-page .seo-form label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 6px;
}
.seo-page .seo-form input,
.seo-page .seo-form select,
.seo-page .seo-form textarea {
  width: 100%;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  padding: 10px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  margin-bottom: 16px;
}
.seo-page .seo-form input:focus,
.seo-page .seo-form select:focus,
.seo-page .seo-form textarea:focus {
  outline: none;
  border-color: var(--red);
}
.seo-page .seo-form textarea { min-height: 120px; resize: vertical; }
.seo-page .seo-form button {
  background: var(--red);
  color: var(--white);
  border: none;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: 'NovecentoWide', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.seo-page .seo-form button:hover { background: var(--white); color: var(--bg); }

.seo-page .seo-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin: 24px 0 32px;
}
.seo-page .seo-contact-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 18px 20px;
}
.seo-page .seo-contact-card-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--earth);
  margin-bottom: 6px;
  display: block;
}
.seo-page .seo-contact-card a,
.seo-page .seo-contact-card span {
  font-size: 1rem;
  color: var(--white);
}


/* ══════════════════════════════════════════════════════════
   LINK STYLING SYSTEM — branded, animated, never blue.

   Three flavours:
     1. .hl-link  — hover-highlight slide. Big, display-style links
                    used in the studio link list. A red block scales
                    in from the left on hover.
     2. .seo-page article a (body copy)
                  — brand-red text with an animated underline that
                    grows from the left.
     3. .seo-nav a / .seo-footer a / .footer-pages a (nav chrome)
                  — uppercase pill-style links with a red underline
                    that slides in on hover.
   All three share the same brand-red as the accent so the site
   feels coherent. No default blue, no default purple.
   ══════════════════════════════════════════════════════════ */

/* ── 1. HOVER-HIGHLIGHT LINK ──────────────────────────────── */
.hl-link {
  position: relative;
  display: inline-block;
  padding: 0.06em 0.28em;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white);
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              letter-spacing 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hl-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.hl-link:hover::before,
.hl-link:focus-visible::before {
  transform: scaleX(1);
}
.hl-link:hover,
.hl-link:focus-visible {
  color: var(--white);
  letter-spacing: 0.06em;
  outline: none;
}

/* ── STUDIO LINK LIST (replaces the inline "Services" + "More" rows) ──
   Stacked, gallery-style typography. Each item fades up on load via
   a CSS-only stagger so the row reads as a sequenced reveal. */
.studio-link-list-eyebrow {
  font-family: var(--font-b);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 26px 0 14px !important;
}
.studio-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.studio-link-list li {
  opacity: 0;
  transform: translateY(14px);
  animation: hlFadeUp 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.studio-link-list li:nth-child(1) { animation-delay: 0.05s; }
.studio-link-list li:nth-child(2) { animation-delay: 0.17s; }
.studio-link-list li:nth-child(3) { animation-delay: 0.29s; }
.studio-link-list li:nth-child(4) { animation-delay: 0.41s; }
.studio-link-list li:nth-child(5) { animation-delay: 0.53s; }
.studio-link-list li:nth-child(6) { animation-delay: 0.65s; }
@keyframes hlFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
.studio-link-list .hl-link {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing: 0.02em;
}
.studio-link-list .hl-link:hover,
.studio-link-list .hl-link:focus-visible {
  letter-spacing: 0.04em;
}
@media (max-width: 640px) {
  .studio-link-list .hl-link { font-size: clamp(1.25rem, 5vw, 1.6rem); }
}


/* ── 2. SEO-PAGE BODY LINKS — branded red with sliding underline ── */
.seo-page article a:not(.seo-cta):not(.hl-link) {
  position: relative;
  display: inline-block;
  color: var(--red);
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 1px;
  transition: color 0.25s ease;
}
.seo-page article a:not(.seo-cta):not(.hl-link)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0.35);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
              background 0.25s ease;
}
.seo-page article a:not(.seo-cta):not(.hl-link):hover {
  color: #ff7557;
}
.seo-page article a:not(.seo-cta):not(.hl-link):hover::after {
  transform: scaleX(1);
  background: #ff7557;
}

/* Direct contact-card links (mailto:, tel:) — keep white but keep
   the same animated underline. They sit in chrome cards, so the
   white reads better than red there. */
.seo-page .seo-contact-card a {
  position: relative;
  text-decoration: none;
  color: var(--white);
  padding-bottom: 1px;
}
.seo-page .seo-contact-card a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1.5px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.seo-page .seo-contact-card a:hover::after { transform: scaleX(1); }


/* ── 3. NAV CHROME LINKS — header / footer / pages strip ────
   Same vibe across nav strips: a red underline that slides in
   from the left. Uppercase, NovecentoWide, never plain blue. */
.seo-page .seo-nav a {
  position: relative;
  font-family: var(--font-d);
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  padding-bottom: 4px;
  transition: color 0.25s ease, letter-spacing 0.25s ease;
}
.seo-page .seo-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.seo-page .seo-nav a:hover,
.seo-page .seo-nav a[aria-current="page"] {
  color: var(--white);
  letter-spacing: 0.16em;
}
.seo-page .seo-nav a:hover::after,
.seo-page .seo-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.seo-page .seo-footer a {
  position: relative;
  font-family: var(--font-d);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  padding: 4px 2px;
  transition: color 0.25s ease;
}
.seo-page .seo-footer a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.seo-page .seo-footer a:hover { color: var(--white); }
.seo-page .seo-footer a:hover::after { transform: scaleX(1); }


/* ── HOMEPAGE FOOTER PAGES STRIP — same treatment ───────────
   .footer-pages already exists on index.html. Replace the dim
   white-on-hover with the branded red underline-slide so the
   nav row to the SEO pages doesn't read as boring. */
.footer-pages a {
  position: relative;
  padding-bottom: 4px;
  transition: color 0.25s ease, letter-spacing 0.25s ease;
}
.footer-pages a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.footer-pages a:hover {
  color: var(--white);
  letter-spacing: 0.22em;
}
.footer-pages a:hover::after { transform: scaleX(1); }