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

    :root {
      --red:       #CC0000;
      --red-dk:    #990000;
      --red-lt:    #FF3333;
      --red-bg:    #FFF0F0;
      --red-faint: #FFF8F8;
      --text:      #111111;
      --muted:     #5a6470;
      --subtle:    #9ca3af;
      --border:    #e5e7eb;
      --surface:   #f9fafb;
      --white:     #ffffff;
      --black:     #0a0a0a;
      --green:     #15803d;
      --green-bg:  #dcfce7;

      --shadow:    0 4px 16px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
      --shadow-lg: 0 20px 60px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.06);
      --shadow-red:0 8px 32px rgba(204,0,0,0.20);

      --radius:    12px;
      --radius-lg: 20px;
      --radius-xl: 32px;

      --ease:      cubic-bezier(0.25, 0.8, 0.25, 1);
      --ease-out:  cubic-bezier(0, 0, 0.2, 1);

      --max-w:     1280px;
      --nav-h:     72px;
      --font:      'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden; /* overflow-x ONLY on html keeps window as scroll container */
    }

    body {
      font-family: var(--font);
      color: var(--text);
      background: var(--white);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      /* no overflow on body — html handles horizontal clip, window stays scroll container */
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }
    ul { list-style: none; }

    .container {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 28px;
    }

    /* ── fade-up ── */
    .fu {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    }
    .fu.in { opacity: 1; transform: translateY(0); }

    @media (prefers-reduced-motion: reduce) {
      .fu { opacity: 1; transform: none; transition: none; }
      .yap-img { animation: none; }
      .badge-dot { animation: none; }
    }

    /* ================================================================
       NAV
    ================================================================ */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 200;
      height: var(--nav-h);
      background: rgba(255,255,255,0.88);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-bottom: 1px solid transparent;
      transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
    }

    nav.scrolled {
      border-bottom-color: var(--border);
      box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    }

    nav > .container { height: 100%; }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
    }

    /* Logo lockup — the hand-drawn YAP Dude badge alongside a clean wordmark.
       Mascot carries the brand; the wordmark stays crisp (no muddy outline). */
    .logo {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      gap: 11px;
      text-decoration: none;
    }
    .logo-badge {
      width: 44px;
      height: 44px;
      border-radius: 11px;
      display: block;
      object-fit: cover;
      box-shadow: 0 1px 3px rgba(0,0,0,0.18);
      transition: transform 0.18s ease;
    }
    .logo:hover .logo-badge { transform: rotate(-3deg) scale(1.04); }
    .logo-text {
      display: inline-flex;
      flex-direction: column;
      gap: 2px;
      line-height: 1;
    }
    /* Clean red wordmark — bold + slightly slanted to echo the shirt, but no
       text-stroke (the maroon outline muddied the red at this size). */
    .logo-mark {
      font-size: 25px;
      font-weight: 800;
      font-style: italic;
      color: var(--red);
      letter-spacing: -0.03em;
      line-height: 1;
    }
    .logo-sub {
      font-size: 9.5px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      line-height: 1;
    }
    @media (max-width: 480px) {
      .logo { gap: 9px; }
      .logo-badge { width: 38px; height: 38px; border-radius: 9px; }
      .logo-mark { font-size: 21px; }
      .logo-sub { font-size: 8.5px; letter-spacing: 0.12em; }
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 36px;
    }

    .nav-links a {
      font-size: 15px;
      font-weight: 500;
      color: var(--text);
      letter-spacing: -0.01em;
      transition: color 0.15s;
    }
    .nav-links a:hover { color: var(--red); }

    .btn-text {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 10px 22px;
      background: var(--red);
      color: var(--white);
      border-radius: 100px;
      font-size: 14px;
      font-weight: 600;
      box-shadow: 0 2px 10px rgba(204,0,0,0.25);
      transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    }
    .btn-text svg { width: 13px; height: 13px; fill: currentColor; }
    .btn-text:hover { background: var(--red-dk); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(204,0,0,0.35); }

    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      padding: 8px;
      cursor: pointer;
      background: none;
      border: none;
    }
    .hamburger span {
      display: block; width: 22px; height: 2px;
      background: var(--text); border-radius: 2px;
      transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease;
    }
    /* Morph the three bars into an X while the drawer is open. */
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* mobile menu — kept in the DOM so it can ease in/out (display can't
       transition). Hidden via opacity + transform + visibility. */
    .mob-menu {
      display: flex;
      flex-direction: column;
      position: fixed;
      top: var(--nav-h); left: 0; right: 0;
      background: var(--white);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 16px 30px rgba(0,0,0,0.10);
      padding: 8px 28px 24px;
      z-index: 190;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-14px);
      transition: opacity .26s ease, transform .36s cubic-bezier(.16,1,.3,1),
                  visibility 0s linear .36s;
    }
    .mob-menu.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition: opacity .26s ease, transform .36s cubic-bezier(.16,1,.3,1),
                  visibility 0s linear 0s;
    }
    .mob-menu a {
      display: block;
      padding: 14px 0;
      font-size: 17px;
      font-weight: 500;
      border-bottom: 1px solid var(--border);
      /* each link starts nudged up + faded; revealed in sequence when open */
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1);
    }
    .mob-menu.open a { opacity: 1; transform: translateY(0); }
    .mob-menu.open a:nth-child(1) { transition-delay: .06s; }
    .mob-menu.open a:nth-child(2) { transition-delay: .11s; }
    .mob-menu.open a:nth-child(3) { transition-delay: .16s; }
    .mob-menu.open a:nth-child(4) { transition-delay: .21s; }
    .mob-menu.open a:nth-child(5) { transition-delay: .26s; }
    .mob-menu a:last-child { border-bottom: none; color: var(--red); font-weight: 600; margin-top: 8px; }

    @media (prefers-reduced-motion: reduce) {
      .mob-menu, .mob-menu a, .hamburger span { transition: none; }
      .mob-menu.open a { transition-delay: 0s; }
    }

    /* ================================================================
       HERO
    ================================================================ */
    .hero {
      display: flex;
      align-items: center;
      padding-top: var(--nav-h);
      background:
        radial-gradient(ellipse 60% 80% at 85% 50%, rgba(204,0,0,0.10) 0%, transparent 60%),
        linear-gradient(168deg, #fff 0%, #fdf5f5 50%, #ffe0e0 100%);
      position: relative;
      overflow: hidden;
    }

    /* giant ghost wordmark behind everything */
    .hero::before {
      content: 'YAP';
      position: absolute;
      bottom: -80px;
      left: -30px;
      font-size: 420px;
      font-weight: 700;
      color: rgba(204,0,0,0.045);
      letter-spacing: -0.08em;
      line-height: 1;
      pointer-events: none;
      z-index: 0;
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      /* center vertically so the poster on the right doesn't extend a
         giant chunk below the search card on the left when the form
         collapses into the (shorter) result/loader state. */
      align-items: center;
      /* Tightened so the whole hero (title + form + poster) fits in
         one desktop viewport without scrolling. Was 48 / 80; pulling
         in saves ~40px of vertical that the killed pill (~100px)
         already gave us. Net: hero now lands inside ~720px. */
      padding: 24px 28px 48px;
      width: 100%;
      max-width: var(--max-w);
      margin: 0 auto;
    }

    .hero-copy { display: flex; flex-direction: column; gap: 32px; }

    /* (.hero-badge / .badge-dot removed — the location pill above the
       title was pushing the form below the fold. Geographic info now
       lives in the trust-badges row as `.trust-locate` instead.) */

    .hero-h1 {
      /* Was clamp(42px, 5.6vw, 76px) — at 76px the title alone ate ~240px
         on 3 lines and pushed the form below the fold even after the
         location pill was killed. Dialed back so it still reads as the
         heroic hook but doesn't dominate the viewport. */
      font-size: clamp(32px, 3.6vw, 52px);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.035em;
      margin: 0;
    }
    .hero-h1 .red { color: var(--red); }

    /* one line. that's it. */
    .hero-sub {
      font-size: clamp(16px, 1.4vw, 18px);
      font-weight: 400;
      color: var(--muted);
      max-width: 420px;
      line-height: 1.6;
    }

    /* ── Hero search card (two-field) ─────── */
    .search-card {
      width: 100%; max-width: 540px;
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      padding: 24px; display: flex; flex-direction: column; gap: 10px;
      margin-top: 8px;
    }

    /* ── In-card result view (replaces the form when a part lookup
       fires). The form lives in #search-active; result + back link
       live in #search-result. JS toggles which is visible. */
    #search-result { display: flex; flex-direction: column; gap: 16px; }
    .search-back {
      align-self: center;
      background: transparent;
      border: 1.5px solid var(--border);
      color: var(--muted);
      padding: 9px 18px;
      border-radius: 999px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .3px;
      cursor: pointer;
      transition: color .15s, border-color .15s, background .15s;
    }
    .search-back:hover {
      color: var(--red);
      border-color: var(--red);
      background: var(--red-bg, #fff0f0);
    }
    .search-back span { margin-right: 4px; }
    .search-field { margin-bottom: 16px; }
    .search-field label {
      display: block;
      font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
    }
    .search-field input {
      width: 100%;
      border: 1.5px solid var(--border); border-radius: 10px;
      padding: 13px 16px;
      font-family: var(--font); font-size: 16px; font-weight: 500;
      color: var(--text); background: var(--surface);
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    }
    .search-field input:focus {
      border-color: var(--red);
      box-shadow: 0 0 0 3px rgba(204,0,0,0.08);
      background: var(--white);
    }
    .search-hint {
      font-size: 12px; color: var(--subtle); margin-top: 6px;
    }
    .search-btn {
      width: 100%; padding: 16px;
      background: linear-gradient(135deg, #cc0000 0%, #990000 100%);
      color: var(--white); border-radius: 12px;
      font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
      box-shadow: var(--shadow-red);
      transition: opacity 0.15s, transform 0.15s; margin-top: 8px;
    }
    .search-btn:hover { opacity: 0.9; transform: translateY(-1px); }
    .search-trust {
      display: flex; gap: 20px; row-gap: 10px; flex-wrap: wrap; margin-top: 16px;
      align-items: center;
    }
    .search-trust span {
      font-size: 13px; font-weight: 500; color: var(--muted);
      display: flex; align-items: center; gap: 6px;
    }
    .search-trust span::before {
      content: ''; width: 6px; height: 6px;
      border-radius: 50%; background: #22c55e; flex-shrink: 0;
    }
    /* Location chip — replaces the giant pill that used to live above
       the title. Same geographic info, far less vertical real estate.
       Red dot instead of green to keep it visually distinct from the
       generic trust signals next to it. */
    .search-trust .trust-locate {
      font-weight: 700; color: var(--red);
    }
    .search-trust .trust-locate::before {
      background: var(--red);
    }

    /* ── Co-equal "or text a real person" CTA under the finder ──────────
       Finder stays the primary action; this is a co-equal alternate path
       for the buyer who doesn't have a model # or wants a human. Prominent
       (full-width, tappable) — NOT footer fine print. Most valuable on
       mobile, where it's shown a touch larger. */
    .or-text-divider {
      display: flex; align-items: center; gap: 12px;
      margin: 18px 0 14px; color: var(--subtle); font-size: 13px; font-weight: 600;
    }
    .or-text-divider::before, .or-text-divider::after {
      content: ''; flex: 1; height: 1px; background: var(--border);
    }
    .text-cta {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      width: 100%; padding: 15px; border-radius: 12px;
      background: #fff; color: var(--red);
      border: 2px solid var(--red);
      font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em;
      text-decoration: none; line-height: 1.2;
      transition: background 0.15s, transform 0.15s;
    }
    .text-cta:hover { background: var(--red-bg); transform: translateY(-1px); text-decoration: none; }
    .text-cta .tc-ico { font-size: 18px; flex: 0 0 auto; }
    .text-cta .tc-sub { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }
    @media (max-width: 720px) {
      .text-cta { padding: 17px; font-size: 16.5px; }
    }
    /* In-search text-capture (the ~10s abandon-moment prompt) */
    .in-search-capture {
      margin-top: 14px; padding: 14px 16px;
      background: var(--red-bg); border: 1px solid #f3c5c5; border-radius: 12px;
      animation: isc-in 0.3s ease;
    }
    @keyframes isc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    .isc-copy { font-size: 14px; color: var(--text); line-height: 1.5; margin-bottom: 10px; font-weight: 500; }
    .in-search-capture .text-cta { background: #fff; }

    /* Mobile YAP-Dude lookup loader: CSS + HTML + JS all live in
       templates/_yap_loader.html. The include block lower in the body
       (just before </body>) pulls in the full component. */

    /* Mode tabs — pill-outline style so they read as proper interactive
       selectors instead of subtle text. */
    .search-tabs {
      display: inline-flex; gap: 4px; padding: 4px;
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 100px;
      margin-bottom: 12px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .search-tab {
      padding: 9px 20px; border-radius: 100px; border: 1.5px solid transparent;
      background: transparent; color: var(--muted);
      font-size: 14px; font-weight: 700; font-family: inherit;
      cursor: pointer;
      transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
    }
    .search-tab:hover:not(.active) {
      color: var(--text);
      background: rgba(0,0,0,0.03);
    }
    .search-tab.active {
      background: var(--white);
      color: var(--red);
      border-color: var(--red);
      box-shadow: 0 2px 8px rgba(204,0,0,0.18);
    }
    /* Ease the panel swap when toggling By model # / By part #.
       Going from display:none → shown restarts this animation, so each
       tab click eases the incoming fields in. Start partly-visible (not
       opacity:0) so there's never a fully-blank frame — that blank frame
       is what read as a "blink". */
    #mode-model, #mode-part { animation: mode-swap-in .18s ease-out both; }
    @keyframes mode-swap-in {
      from { opacity: .45; transform: translateY(3px); }
      to   { opacity: 1; transform: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      #mode-model, #mode-part { animation: none; }
    }
    /* ── Inline result card for the part # tab ────────────────────────────
       Three clean rows in one column:
         1. image (left) + name/meta (right)
         2. price (left) + status pill (right)
         3. full-width CTA
       Everything aligns to the same grid edges so nothing "floats". */
    .pn-result {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 4px 2px;          /* lives inside .search-card already, so light */
      background: #fff;
      border: none;
      /* Soft ease-in so the card doesn't slam into the slot when a cache
         hit lands. Combined with the minimum 1400ms wait in
         handlePartLookup, this gives every lookup a deliberate rhythm. */
      animation: pn-result-enter .42s cubic-bezier(.25,.8,.25,1) both;
    }
    @keyframes pn-result-enter {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .pn-result { animation: none; }
    }
    .pn-result.err {
      padding: 14px 16px;
      border: 1.5px solid #fecaca;
      border-radius: 12px;
      background: #fef2f2;
      color: #991b1b;
      font-size: 14px;
      line-height: 1.5;
    }
    /* ── Stumped-state card (model not found / low-confidence withhold) ───
       The BIG YAP poster on the right swaps to the stumped pose, so the
       left-side card just carries the words: headline → voiced body →
       big tap-to-text CTA. Same warm cream/amber palette as the YAP
       poster glow so it reads as the shop's voice, not a generic 500. */
    .pn-notfound {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      padding: 20px;
      background: #fff8ef;
      border: 1.5px solid #f5d680;
      border-radius: 14px;
      box-shadow: 0 8px 22px rgba(204, 0, 0, .06);
      animation: pn-result-enter .42s cubic-bezier(.25,.8,.25,1) both;
    }
    .pn-notfound-headline {
      font-size: 20px;
      font-weight: 900;
      letter-spacing: -.015em;
      color: var(--text);
      margin: 0;
      line-height: 1.2;
    }
    .pn-notfound-msg {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.55;
      margin: 0 0 8px;
    }
    .pn-notfound-msg strong {
      color: var(--text);
      font-family: "SF Mono", "Consolas", monospace;
      font-size: 12.5px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 1px 6px;
      letter-spacing: .3px;
    }
    .pn-notfound-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 13px 22px;
      background: linear-gradient(135deg, #cc0000 0%, #990000 100%);
      color: #fff;
      border-radius: 999px;
      font-weight: 800;
      font-size: 14px;
      letter-spacing: .2px;
      text-decoration: none;
      box-shadow: 0 4px 12px rgba(204, 0, 0, .22);
      transition: transform .15s, box-shadow .15s, filter .15s;
    }
    .pn-notfound-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(204, 0, 0, .28);
      filter: brightness(1.05);
    }
    @media (max-width: 480px) {
      .pn-notfound-cta { width: 100%; justify-content: center; }
    }

    /* ── Best-guess warning strip ─────────────────────────────────────────
       Shown when the result is unverified or came from Claude's
       training-knowledge fallback (no real web evidence). Sits at the top
       of the result card so the customer reads it before the price/CTA. */
    .pn-result .pn-warn {
      padding: 12px 14px;
      background: #fff8e6;
      border: 1.5px solid #f5d680;
      border-radius: 10px;
      color: #7a4a00;
      font-size: 12.5px;
      line-height: 1.45;
    }
    .pn-result .pn-warn strong {
      display: block;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .5px;
      text-transform: uppercase;
      color: #9a5b00;
      margin-bottom: 4px;
    }
    .pn-result .pn-warn a {
      color: var(--red);
      font-weight: 700;
      text-decoration: underline;
    }

    /* OEM trust badge — sits above the part so the customer reads
       "this is the real, in-system part" before anything else. */
    .pn-result .pn-oem {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      border-radius: 999px;
      color: #166534;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .5px;
      text-transform: uppercase;
    }

    /* Row 1: image + name/meta */
    .pn-result .pn-top {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }
    /* Sell line — Square SEO copy when stocked, else a YAP-voiced pitch.
       Clamped so long catalog copy stays tidy inside the card. */
    .pn-result .pn-pitch {
      margin: 8px 0 0;
      font-size: 13.5px;
      line-height: 1.5;
      color: var(--text);
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .pn-result img {
      width: 92px;
      height: 92px;
      object-fit: contain;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #fff;
      padding: 6px;
      flex-shrink: 0;
    }
    /* YAP-badge fallback when a part has no real product photo —
       borderless so it reads as our mark, not a missing-image box. */
    .pn-result img.pn-img--badge {
      border: none; background: transparent; padding: 0; opacity: .92;
    }
    .pn-result .pn-info { flex: 1; min-width: 0; padding-top: 2px; }
    .pn-result .pn-name {
      font-size: 17px;
      font-weight: 800;
      letter-spacing: -.01em;
      line-height: 1.25;
      margin: 0 0 6px;
      color: var(--text);
    }
    .pn-result .pn-meta {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.5;
      margin: 0;
    }

    /* Row 2: price + status pill (split horizontally) */
    .pn-result .pn-pricebar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      padding-top: 14px;
      border-top: 1px solid var(--border);
    }
    .pn-result .pn-priceblock { display: flex; flex-direction: column; gap: 4px; }
    .pn-result .pn-price {
      font-size: 30px;
      font-weight: 900;
      color: var(--text);
      letter-spacing: -.03em;
      line-height: 1;
    }
    /* MSRP anchor + dollars-saved — only rendered when we have a real
       MSRP above our price, so the value reads instead of a bare number. */
    .pn-result .pn-save {
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex-wrap: wrap;
    }
    .pn-result .pn-msrp {
      font-size: 13px;
      color: var(--muted);
      text-decoration: line-through;
    }
    .pn-result .pn-save-amt {
      font-size: 12px;
      font-weight: 800;
      color: var(--red);
    }
    /* Fulfillment pill — confident green chip for both the in-stock and
       ships-soon cases so the customer reads availability at a glance. */
    .pn-result .pn-stock {
      display: inline-block;
      padding: 6px 13px;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      border-radius: 999px;
      color: #166534;
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: .4px;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .pn-result .pn-stock--ship {
      background: #fff8e6;
      border-color: #f5d680;
      color: #7a4a00;
    }

    /* Trust strip — four reasons to buy from the shop, not a marketplace. */
    .pn-result .pn-trust {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 14px;
      padding: 14px;
      background: var(--red-faint, #fff8f8);
      border: 1px solid var(--border);
      border-radius: 12px;
    }
    .pn-result .pn-trust-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.2;
    }
    .pn-result .pn-trust-i { font-size: 14px; flex-shrink: 0; }

    /* Row 3: full-width CTA */
    .pn-result .pn-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      box-sizing: border-box;
      padding: 14px 22px;
      background: linear-gradient(135deg, #cc0000 0%, #990000 100%);
      color: #fff;
      border-radius: 999px;
      font-weight: 800;
      font-size: 15px;
      letter-spacing: .2px;
      text-decoration: none;
      box-shadow: 0 4px 14px rgba(204, 0, 0, .25);
      transition: transform .15s, box-shadow .15s, filter .15s;
    }
    .pn-result .pn-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(204, 0, 0, .32);
      filter: brightness(1.05);
    }
    /* Fit-reassurance under the CTA — kills the "is this the right part?"
       hesitation that stalls the sale, with a low-friction photo path. */
    .pn-result .pn-reassure {
      margin: -4px 0 0;
      text-align: center;
      font-size: 12.5px;
      line-height: 1.5;
      color: var(--muted);
    }
    .pn-result .pn-reassure a {
      color: var(--red);
      font-weight: 700;
      text-decoration: underline;
    }
    .pn-busy {
      display: flex; gap: 10px; align-items: center;
      padding: 12px 14px; color: var(--muted); font-size: 13.5px;
    }
    .pn-spin {
      width: 14px; height: 14px; border-radius: 50%;
      border: 2px solid var(--border); border-top-color: var(--red);
      animation: pnspin 0.8s linear infinite; flex-shrink: 0;
    }
    @keyframes pnspin { to { transform: rotate(360deg); } }

    /* Real progress bar during a search */
    .search-progress { margin: 4px 14px 8px; }
    .search-progress-track {
      height: 8px; border-radius: 100px; overflow: hidden;
      background: var(--surface, #f1f1f1); border: 1px solid var(--border);
    }
    .search-progress-fill {
      height: 100%; width: 0%; border-radius: 100px;
      background: linear-gradient(90deg, var(--red), var(--red-dk));
      transition: width 0.4s ease;
    }

    /* (the previous in-form .pn-loader scene was retired — the YAP
       poster now serves as the search animation stage. See
       .yap-frame.searching overlays below.) */

    /* YAP dude — framed like a poster on the shop wall */
    .hero-visual {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .yap-frame {
      position: relative;
      width: 100%;
      /* Capped tighter than before (was 440px → 660px tall, towering over
         the left column when the form collapsed to its result state). At
         380px the poster is ~570px tall, which lines up much better with
         the heroic title + search card on the left. */
      max-width: 380px;
      margin: 0 auto;
      transform: rotate(-1.2deg);
      animation: yap-float 7.5s ease-in-out infinite;
      transition: transform .5s cubic-bezier(.25,.8,.25,1);
    }

    /* red glow behind the poster */
    .yap-frame::before {
      content: '';
      position: absolute;
      inset: -30px -30px -30px -30px;
      background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(204,0,0,0.22) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
      transition: background .4s ease, inset .4s ease;
    }

    /* little "pinned to the wall" red corner tacks */
    .yap-frame::after {
      content: '';
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--red);
      box-shadow:
        0 2px 4px rgba(0,0,0,0.25),
        inset 0 -2px 2px rgba(0,0,0,0.2);
      z-index: 3;
    }

    /* Image stack — idle pose + three search-action poses. Exactly ONE
       is visible at a time (a `pose-*` class on .yap-frame selects it)
       so cross-fades don't double-expose silhouettes the way the previous
       version did. .yap-pose-idle is the layout-driver (position:relative
       so the stack has height); the rest absolutely position over it. */
    .yap-img-stack {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      box-shadow:
        0 32px 60px rgba(0,0,0,0.18),
        0 8px 20px rgba(0,0,0,0.10),
        0 0 0 1px rgba(0,0,0,0.04);
    }
    .yap-pose {
      width: 100%;
      height: auto;
      display: block;
      transition: opacity .5s ease;
    }
    .yap-pose-idle {
      position: relative;
      z-index: 1;
      opacity: 1;
    }

    .yap-pose-look,
    .yap-pose-scan,
    .yap-pose-found,
    .yap-pose-stumped {
      position: absolute;
      inset: 0;
      opacity: 0;
      z-index: 2;
    }
    /* Active-pose rules: exactly one visible, the idle pose hidden. */
    .yap-frame.pose-look    .yap-pose-idle    { opacity: 0; }
    .yap-frame.pose-look    .yap-pose-look    { opacity: 1; }
    .yap-frame.pose-scan    .yap-pose-idle    { opacity: 0; }
    .yap-frame.pose-scan    .yap-pose-scan    { opacity: 1; }
    .yap-frame.pose-found   .yap-pose-idle    { opacity: 0; }
    .yap-frame.pose-found   .yap-pose-found   { opacity: 1; }
    /* Stumped pose — fired when a search returns not_found. The right-
       side poster swaps from the counter dude to the stumped one so
       the visual matches the error state on the left. Cleared by
       newPartSearch's call to _yapPosterStop. */
    .yap-frame.pose-stumped .yap-pose-idle    { opacity: 0; }
    .yap-frame.pose-stumped .yap-pose-stumped { opacity: 1; }

    /* ── SEARCH MODE — the 3 pose frames carry the storytelling. The
       only overlays now are the speech bubble + the intensified frame
       glow; spotlight/scan-dot overlays were removed because they
       polluted the new illustrations whose actions already read clearly. */
    .yap-speech {
      pointer-events: none;
      opacity: 0;
      transition: opacity .35s ease;
    }
    .yap-frame.searching .yap-speech { opacity: 1; }

    /* Frame-state glow + scale when searching */
    .yap-frame.searching {
      animation: yap-float 5s ease-in-out infinite; /* a little quicker */
    }
    .yap-frame.searching::before {
      inset: -50px -50px -50px -50px;
      background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(204,0,0,0.40) 0%, transparent 75%);
      animation: yap-glow-pulse 1.6s ease-in-out infinite;
    }
    @keyframes yap-glow-pulse {
      0%, 100% { opacity: 1;   }
      50%      { opacity: .55; }
    }

    /* (d) Speech bubble — positioned near YAP dude's mouth area
       (~28% from top of the portrait poster), points left toward the
       form. Large white card with red border + heavy shadow so it
       reads instantly against the orange poster background. Sits OUTSIDE
       .yap-img-stack so the stack's overflow:hidden doesn't clip it. */
    .yap-speech {
      position: absolute;
      top: 28%;
      left: -14px;
      transform: translateX(-100%);
      z-index: 10;
      background: var(--white);
      border: 2px solid var(--red);
      color: var(--text);
      padding: 11px 17px;
      border-radius: 16px;
      font-size: 14.5px;
      font-weight: 800;
      line-height: 1.3;
      white-space: nowrap;
      box-shadow:
        0 12px 28px rgba(204, 0, 0, .28),
        0 2px 6px rgba(0, 0, 0, .12);
    }
    /* Arrow tail pointing at the dude */
    .yap-speech::after {
      content: '';
      position: absolute;
      right: -9px; top: 50%;
      transform: translateY(-50%) rotate(45deg);
      width: 14px; height: 14px;
      background: var(--white);
      border-right: 2px solid var(--red);
      border-top: 2px solid var(--red);
    }
    .yap-frame.searching .yap-speech {
      animation: yap-speech-enter .4s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes yap-speech-enter {
      from { transform: translateX(-90%) scale(.85); opacity: 0; }
      to   { transform: translateX(-100%) scale(1);  opacity: 1; }
    }
    /* `.bump` pulse — JS toggles this each time the text changes so the
       bubble re-pops to draw the eye to the new status. */
    .yap-speech.bump {
      animation: yap-speech-bump .42s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes yap-speech-bump {
      0%   { transform: translateX(-100%) scale(1);    }
      35%  { transform: translateX(-100%) scale(1.07); }
      100% { transform: translateX(-100%) scale(1);    }
    }
    .yap-speech .dot {
      display: inline-block;
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--red);
      margin-right: 8px;
      vertical-align: middle;
      animation: yap-tag-pulse 1.4s ease-in-out infinite;
    }
    @keyframes yap-tag-pulse {
      0%,100% { opacity: 1; transform: scale(1); }
      50%      { opacity: .4; transform: scale(.75); }
    }

    @media (prefers-reduced-motion: reduce) {
      .yap-pose,
      .yap-frame.searching::before { animation: none; transition: none; }
    }

    /* Mobile: keep the speech bubble on the right side and shrink */
    @media (max-width: 720px) {
      .yap-speech {
        top: 30%;
        left: auto;
        right: -10px;
        transform: translateX(100%);
        font-size: 12px;
        padding: 7px 11px;
      }
      .yap-speech::after {
        right: auto; left: -9px;
        border-right: none; border-top: none;
        border-left: 2px solid var(--red);
        border-bottom: 2px solid var(--red);
      }
      @keyframes yap-speech-enter {
        from { transform: translateX(90%) scale(.85); opacity: 0; }
        to   { transform: translateX(100%) scale(1);  opacity: 1; }
      }
      @keyframes yap-speech-bump {
        0%   { transform: translateX(100%) scale(1);    }
        35%  { transform: translateX(100%) scale(1.07); }
        100% { transform: translateX(100%) scale(1);    }
      }
    }

    @keyframes yap-float {
      0%, 100% { transform: rotate(-1.2deg) translateY(0); }
      50%       { transform: rotate(-1.2deg) translateY(-8px); }
    }

    /* ================================================================
       BRANDS
    ================================================================ */
    .brands {
      padding: 28px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .brands-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 52px;
      flex-wrap: wrap;
    }

    .brand-tag {
      font-size: 19px;
      font-weight: 700;
      color: #d1d5db;
      letter-spacing: -0.025em;
      transition: color 0.2s;
      cursor: default;
      user-select: none;
    }
    .brand-tag:hover { color: var(--subtle); }

    /* ================================================================
       PARTS — typography-only cards
    ================================================================ */
    .parts { padding: 80px 0; }

    .sec-hd {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 36px;
    }

    .tag {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 12px;
    }

    .sec-h {
      font-size: clamp(28px, 3.5vw, 44px);
      font-weight: 700;
      letter-spacing: -0.035em;
      line-height: 1.08;
    }

    .view-all {
      font-size: 14px;
      font-weight: 600;
      color: var(--red);
      letter-spacing: -0.01em;
      transition: opacity 0.15s;
      padding-bottom: 4px;
    }
    .view-all:hover { opacity: 0.7; }

    .parts-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .part-card {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 24px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      background: var(--white);
      transition: box-shadow 0.22s var(--ease), transform 0.22s var(--ease), border-color 0.22s;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .part-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-4px);
      border-color: rgba(204,0,0,0.18);
    }

    /* faint part number watermark behind content */
    .part-card::after {
      content: attr(data-num);
      position: absolute;
      bottom: -4px;
      right: 12px;
      font-size: 40px;
      font-weight: 700;
      color: rgba(0,0,0,0.04);
      letter-spacing: -0.04em;
      pointer-events: none;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .p-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 4px;
    }
    .p-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      border-radius: 100px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      width: fit-content;
    }
    .b-oem  { background: var(--green-bg); color: var(--green); }
    .b-app  {
      background: var(--red-faint);
      color: var(--red);
      border: 1px solid rgba(204,0,0,0.18);
    }
    .b-app .p-app-ico {
      font-size: 12px;
      letter-spacing: 0;
      text-transform: none;
    }

    .p-brand {
      font-size: 11px;
      font-weight: 700;
      color: var(--red);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .p-name {
      font-size: 17px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.02em;
      line-height: 1.3;
      margin-top: 2px;
    }

    .p-num {
      font-size: 12px;
      color: var(--subtle);
      font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
      letter-spacing: 0.04em;
      margin-top: 2px;
    }

    .p-tell {
      margin-top: 14px;
      padding: 10px 12px;
      background: var(--red-faint);
      border-left: 3px solid var(--red);
      border-radius: 6px;
      font-size: 13.5px;
      line-height: 1.45;
      color: var(--text);
      font-style: italic;
    }

    /* Amplified social-proof variant — when neighbors actually picked one up */
    .p-tell.p-social {
      background: linear-gradient(135deg, #fff0f0 0%, #ffe4e4 100%);
      border-left: 3px solid var(--red);
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-style: normal;
      font-weight: 600;
      color: var(--red-dk);
    }
    .p-tell.p-social .p-pin {
      flex-shrink: 0;
      font-size: 16px;
      line-height: 1.3;
    }
    .p-tell.p-social .p-social-num {
      color: var(--red);
      font-weight: 800;
      font-size: 15px;
    }

    .p-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-top: 16px;
      margin-top: 14px;
      border-top: 1px solid var(--border);
    }
    .p-foot .p-price {
      font-size: 13px;
      color: var(--muted);
      font-weight: 600;
    }

    .p-sms-fallback {
      display: block;
      text-align: center;
      margin-top: 10px;
      font-size: 11.5px;
      color: var(--subtle);
      text-decoration: none;
      letter-spacing: -0.005em;
      transition: color 0.15s;
    }
    .p-sms-fallback:hover { color: var(--red); }

    /* Section header w/ YAP Dude vignette */
    .parts-hd-wrap {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 36px;
    }
    .parts-hd-wrap .sec-hd {
      flex: 1;
      margin-bottom: 0;
    }
    .parts-hd-yap {
      flex-shrink: 0;
      width: 88px;
      height: 88px;
      border-radius: 50%;
      background: linear-gradient(135deg, #fff0f0 0%, #ffe4e4 100%);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      overflow: hidden;
      box-shadow: 0 4px 14px rgba(204,0,0,0.12);
      border: 2px solid var(--white);
    }
    .parts-hd-yap img {
      width: 82px;
      height: 82px;
      object-fit: contain;
      object-position: bottom;
    }
    @media (max-width: 640px) {
      .parts-hd-yap { width: 64px; height: 64px; }
      .parts-hd-yap img { width: 60px; height: 60px; }
    }

    .btn-text-order,
    .btn-order {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 18px;
      background: var(--red);
      color: var(--white);
      border-radius: 9px;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 600;
      transition: background 0.15s, transform 0.15s;
      text-decoration: none;
    }
    .btn-text-order:hover,
    .btn-order:hover { background: var(--red-dk); transform: translateX(2px); }

    /* ================================================================
       SHELF — uniform grid of recent distinct parts.
       Informational, not promotional. Photo, brand, name, part #, price.
    ================================================================ */
    .parts-hd { margin-bottom: 22px; }

    .sec-sub {
      font-size: 15px;
      line-height: 1.55;
      color: var(--muted);
      max-width: 580px;
      margin-top: 12px;
    }
    .sec-sub b { color: var(--text); font-weight: 600; }

    .shelf-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 30px;
    }
    .shelf-chip {
      display: inline-flex;
      align-items: center;
      padding: 7px 15px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--white);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--text);
      text-decoration: none;
      transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
    }
    .shelf-chip:hover {
      border-color: var(--red);
      background: var(--red-faint);
      color: var(--red);
      transform: translateY(-1px);
    }

    .shelf-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .shelf-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: box-shadow 0.18s var(--ease), border-color 0.18s;
    }
    .shelf-card:hover {
      box-shadow: 0 6px 18px rgba(0,0,0,0.05);
      border-color: rgba(204,0,0,0.18);
    }

    /* Product photo tile — 1:1 square, white, bordered, object-fit contain.
       No-image cards get a subtle bordered placeholder with the part # centered. */
    .shelf-card-photo {
      position: relative;
      aspect-ratio: 1 / 1;
      background: #fafafa;
      border: 1px solid var(--border);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .shelf-card-photo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 10%;
    }
    .shelf-card-photo-placeholder {
      font-family: 'SF Mono', 'Fira Code', monospace;
      font-size: 13px;
      font-weight: 700;
      color: var(--subtle);
      letter-spacing: 0.04em;
      text-align: center;
      padding: 0 10px;
      word-break: break-all;
    }

    .shelf-card-body {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    .shelf-card-brand {
      font-size: 10.5px;
      font-weight: 700;
      color: var(--red);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      line-height: 1;
    }
    .shelf-card-name {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.3;
      letter-spacing: -0.015em;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 2.6em;
    }
    .shelf-card-pn {
      font-family: 'SF Mono', 'Fira Code', monospace;
      font-size: 11.5px;
      color: var(--subtle);
      letter-spacing: 0.04em;
      margin-top: 2px;
    }
    .shelf-card-price {
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.02em;
      margin-top: 2px;
    }

    /* Empty state — quiet one-liner, no CTA */
    .shelf-empty {
      border: 1px dashed var(--border);
      border-radius: 12px;
      padding: 32px 18px;
      text-align: center;
      font-size: 13.5px;
      color: var(--muted);
    }

    @media (max-width: 900px) {
      .shelf-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    }
    @media (max-width: 520px) {
      .shelf-grid { grid-template-columns: 1fr; gap: 12px; }
      .shelf-card { flex-direction: row; align-items: center; padding: 12px; }
      .shelf-card-photo { width: 84px; height: 84px; aspect-ratio: auto; flex-shrink: 0; }
      .shelf-card-name { min-height: 0; -webkit-line-clamp: 2; }
    }

    /* ================================================================
       APPLIANCE CATEGORY TILES — the home grid (replaces the per-part
       shelf). Mirrors the original yukonapplianceparts.com layout:
       big icon + name + one-line blurb per appliance type.
    ================================================================ */
    .cats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    .cat-tile {
      display: flex;
      flex-direction: column;
      gap: 4px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px 12px 16px;
      text-decoration: none;
      color: inherit;
      text-align: center;
      overflow: hidden;
      transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s var(--ease);
    }
    .cat-tile:hover {
      border-color: rgba(204, 0, 0, 0.35);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
      transform: translateY(-2px);
    }
    .cat-img {
      width: 100%;
      /* height:auto so the height="1024" CLS attribute can't force a fixed
         pixel height once width:100% shrinks the rendered width */
      height: auto;
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 10px;
      background: #fafafa;
      margin-bottom: 10px;
      display: block;
    }
    .cat-name {
      font-size: 15.5px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.01em;
      line-height: 1.2;
    }
    .cat-blurb {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.4;
      margin-top: 2px;
    }
    @media (max-width: 900px) {
      .cats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    }
    @media (max-width: 480px) {
      .cat-tile { padding: 10px 10px 12px; }
      .cat-name { font-size: 14px; }
      .cat-blurb { display: none; }
    }

    /* ================================================================
       NEXT-DAY PROMISE — the real Oklahoma differentiator.
       Denton, TX and Lenexa, KS are both Zone 2 to Oklahoma via FedEx
       Ground, so parts not on the shelf still land the next business day.
    ================================================================ */
    /* Dark near-black slab with a warm red undertone. Inverts the palette
       so this section reads as "the moment" on the page — a hard break
       between the white shelf above and the red-faint blog below. */
    .promise {
      padding: 88px 0;
      text-align: center;
      background:
        radial-gradient(ellipse at 50% 30%, rgba(204,0,0,0.16) 0%, transparent 62%),
        #180606;
      color: var(--white);
    }
    .promise-inner {
      max-width: 720px;
      margin: 0 auto;
      padding: 0 22px;
    }
    /* Two-column grid for the rewritten section: copy on the left,
       YAP Dude on the right. Stacks on mobile. */
    .promise-grid {
      max-width: 1080px;
      margin: 0 auto;
      padding: 0 22px;
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 48px;
      align-items: center;
    }
    .promise-copy { text-align: left; }
    .promise-copy .promise-rule { margin-bottom: 22px; }
    .promise-copy .promise-h { margin-bottom: 16px; }
    .promise-copy .promise-sub { margin-bottom: 28px; text-align: left; }
    .promise-cta {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 26px;
      background: linear-gradient(135deg, #cc0000 0%, #990000 100%);
      color: #fff;
      font-weight: 800; font-size: 15px; letter-spacing: -0.01em;
      border-radius: 100px;
      text-decoration: none;
      box-shadow: 0 4px 16px rgba(204, 0, 0, 0.35);
      transition: transform .15s, box-shadow .15s, opacity .15s;
    }
    .promise-cta:hover {
      opacity: 0.95;
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(204, 0, 0, 0.42);
    }
    .promise-visual {
      display: flex; align-items: center; justify-content: center;
    }
    .promise-visual img {
      max-width: 100%;
      width: 380px;
      height: auto;
      filter: drop-shadow(0 10px 28px rgba(0,0,0,0.4));
    }
    @media (max-width: 760px) {
      .promise-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; }
      .promise-copy { text-align: center; }
      .promise-copy .promise-sub { text-align: center; }
      /* Stacked on phones, lead with the YAP Dude so he sits above the
         "Text us at 3" headline instead of trailing the CTA. */
      .promise-visual { order: -1; }
      /* Was 240px — too small for the YAP Dude scene to read on a phone.
         Let the image grow toward the column edge so it lands as the
         visual anchor it's meant to be. */
      .promise-visual img { width: 100%; max-width: 320px; }
    }
    .promise-rule {
      display: inline-block;
      width: 48px;
      height: 3px;
      background: var(--red-lt);
      border-radius: 2px;
      margin-bottom: 26px;
    }
    .promise-h {
      font-family: var(--font);
      font-size: clamp(28px, 3.8vw, 44px);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.025em;
      color: var(--white);
      margin: 0 0 18px;
    }
    .promise-sub {
      font-size: 16px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.72);
      margin: 0 auto;
      max-width: 56ch;
      letter-spacing: -0.005em;
    }
    /* Typographic route diagram — DENTON ●——● [OKLAHOMA] ●——● LENEXA.
       Pure CSS, no graphics. Makes the geography concrete at a glance. */
    .promise-map {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 34px;
      flex-wrap: wrap;
      font-family: 'SF Mono', 'Fira Code', monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
    }
    .promise-city { white-space: nowrap; }
    .promise-line {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 1px;
      background: rgba(255, 255, 255, 0.32);
    }
    .promise-line::before,
    .promise-line::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--red-lt);
      transform: translateY(-50%);
    }
    .promise-line::before { left: -2px; }
    .promise-line::after  { right: -2px; }
    /* OKLAHOMA anchor — solid white pill with dark red text so it pops
       as the brightest element on the slab. It IS the point of the map. */
    .promise-pin {
      font-weight: 800;
      color: var(--red-dk);
      background: var(--white);
      padding: 5px 13px;
      border-radius: 100px;
      font-size: 10.5px;
      letter-spacing: 0.14em;
      white-space: nowrap;
      box-shadow: 0 2px 10px rgba(204, 0, 0, 0.25);
    }

    @media (max-width: 600px) {
      .promise { padding: 68px 0; }
      .promise-map { gap: 8px; font-size: 10px; }
      .promise-line { width: 24px; }
    }

    /* ================================================================
       BLOG HUB
    ================================================================ */
    .blog {
      padding: 96px 0;
      background: var(--red-faint);
    }

    .blog-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 32px;
      margin-bottom: 32px;
      flex-wrap: wrap;
    }

    .blog-header-text { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }

    .blog-header h2 {
      font-size: clamp(36px, 4vw, 56px);
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1.05;
      margin: 0;
    }

    .blog-header p {
      font-size: 17px;
      color: var(--muted);
      line-height: 1.75;
      margin: 0;
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      background: linear-gradient(135deg, #cc0000 0%, #990000 100%);
      color: var(--white);
      border-radius: 100px;
      font-family: var(--font);
      font-size: 15px;
      font-weight: 600;
      width: fit-content;
      box-shadow: var(--shadow-red);
      transition: opacity 0.15s, transform 0.15s;
    }
    .btn-primary:hover { opacity: 0.92; transform: translateY(-2px); }

    /* ── category pills ── */
    .blog-cats {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 40px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border);
    }

    .cat-pill {
      padding: 9px 18px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 100px;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
      transition: all 0.15s;
    }
    .cat-pill:hover { border-color: var(--red); color: var(--red); }
    .cat-pill.active {
      background: linear-gradient(135deg, #cc0000 0%, #990000 100%);
      color: var(--white);
      border-color: transparent;
      box-shadow: var(--shadow-red);
    }

    /* ── featured post ── */
    .post-featured {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 0;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      overflow: hidden;
      margin-bottom: 40px;
      transition: box-shadow 0.25s, transform 0.25s var(--ease), border-color 0.2s;
    }
    .post-featured:hover {
      box-shadow: var(--shadow-lg);
      border-color: rgba(204,0,0,0.22);
      transform: translateY(-3px);
    }

    .post-featured-img {
      background: linear-gradient(168deg, #fff 0%, var(--red-faint) 55%, #ffe6e6 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px;
      min-height: 340px;
      position: relative;
    }
    .post-featured-img::before {
      content: 'YAP';
      position: absolute;
      bottom: -22px; right: -10px;
      font-size: 180px;
      font-weight: 700;
      color: rgba(204,0,0,0.06);
      letter-spacing: -0.08em;
      line-height: 1;
      pointer-events: none;
    }
    .post-featured-img img {
      max-width: 82%;
      max-height: 340px;
      object-fit: contain;
      position: relative;
      z-index: 1;
    }

    .post-featured-body {
      padding: 44px 48px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      justify-content: center;
    }
    .post-featured-body .featured-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--red);
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }
    .post-featured-body h3 {
      font-size: clamp(26px, 2.4vw, 34px);
      font-weight: 700;
      letter-spacing: -0.028em;
      line-height: 1.15;
      color: var(--text);
    }
    .post-featured-body p {
      font-size: 16px;
      color: var(--muted);
      line-height: 1.7;
    }

    /* ── post grid ── */
    .post-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .post-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      cursor: pointer;
      position: relative;
      transition: box-shadow 0.2s, transform 0.2s var(--ease), border-color 0.2s;
    }

    .post-featured-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      background: var(--red);
      color: var(--white);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 4px 9px;
      border-radius: 100px;
      z-index: 3;
      box-shadow: 0 2px 8px rgba(204,0,0,0.25);
    }
    .post-card:hover {
      box-shadow: var(--shadow);
      transform: translateY(-3px);
      border-color: rgba(204,0,0,0.18);
    }

    .post-thumb {
      aspect-ratio: 16/9;
      background: linear-gradient(135deg, var(--red-faint), var(--red-bg));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 58px;
      position: relative;
      overflow: hidden;
    }
    .post-thumb img {
      width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1;
    }
    .post-thumb::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 70% 30%, rgba(204,0,0,0.08), transparent 60%);
      pointer-events: none;
      z-index: 2;
    }

    .post-body {
      padding: 22px 24px 26px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    .post-cat {
      font-size: 11px;
      font-weight: 700;
      color: var(--red);
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .post-title {
      font-size: 17px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -0.015em;
      line-height: 1.35;
    }

    .post-excerpt {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.6;
      flex: 1;
    }

    .post-meta {
      display: flex;
      gap: 12px;
      font-size: 12px;
      color: var(--subtle);
      margin-top: 4px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
    }
    .post-meta span { display: inline-flex; align-items: center; gap: 4px; }

    /* hidden state for category filtering */
    .post-card.hide,
    .post-featured.hide { display: none; }

    /* ================================================================
       BRAND STORY
    ================================================================ */
    .story {
      padding: 96px 0;
      background: linear-gradient(170deg, #fdf6ec 0%, #f6e9d2 100%);
      border-top: 1px solid rgba(204,0,0,0.06);
      border-bottom: 1px solid rgba(204,0,0,0.06);
    }

    .story-inner {
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: 80px;
      align-items: center;
    }

    /* Visit-the-shop section (map + address + hours) */
    .visit-sec { padding: 80px 0; background: #fff; border-top: 1px solid rgba(0,0,0,0.06); }
    .visit-inner {
      display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
    }
    .visit-info h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.05; margin: 10px 0 14px; }
    .visit-lede { font-size: 17px; color: #444; line-height: 1.6; margin-bottom: 22px; max-width: 46ch; }
    .visit-detail { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
    .visit-row { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
    .visit-ico { font-size: 18px; flex: 0 0 auto; line-height: 1.4; }
    .visit-row a { color: var(--red); text-decoration: none; }
    .visit-row a:hover { text-decoration: underline; }
    .visit-dir {
      display: inline-block; font-weight: 700; color: var(--red); text-decoration: none;
      font-size: 15px;
    }
    .visit-dir:hover { text-decoration: underline; }
    .visit-map iframe { box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
    @media (max-width: 760px) {
      .visit-sec { padding: 56px 0; }
      .visit-inner { grid-template-columns: 1fr; gap: 28px; }
    }

    .story-copy { display: flex; flex-direction: column; gap: 22px; }

    .story-copy h2 {
      font-size: clamp(36px, 4.5vw, 62px);
      font-weight: 700;
      letter-spacing: -0.045em;
      line-height: 1.04;
    }

    .story-copy p {
      font-size: 18px;
      color: var(--muted);
      line-height: 1.75;
      max-width: 520px;
    }

    .bullets { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }

    .bul {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 16px;
      font-weight: 500;
      color: var(--text);
      line-height: 1.5;
    }

    .bul-chk {
      width: 22px; height: 22px;
      background: var(--green-bg);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: var(--green);
      flex-shrink: 0;
      margin-top: 1px;
    }

    .story-visual { position: relative; }

    .story-card {
      border-radius: var(--radius-xl);
      background: #f6e9d2;
      overflow: hidden;
      /* Matches the 2:3 portrait poster so it fills the column with no crop. */
      aspect-ratio: 2/3;
      position: relative;
      box-shadow: 0 20px 50px rgba(0,0,0,0.18), 0 6px 16px rgba(204,0,0,0.12);
    }

    .story-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      position: relative;
      z-index: 1;
    }

    .story-lede {
      font-size: 19px;
      color: var(--text);
      line-height: 1.65;
      max-width: 540px;
    }
    .story-lede em {
      font-style: italic;
      color: var(--red);
      font-weight: 600;
    }

    .story-pullquote {
      display: flex;
      align-items: center;
      gap: 22px;
      padding: 18px 0 18px 22px;
      border-left: 3px solid var(--red);
      margin: 6px 0 4px;
      max-width: 540px;
    }
    .stat-big {
      font-size: clamp(44px, 5vw, 60px);
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.04em;
      line-height: 1;
      flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }
    .stat-say {
      font-size: 15px;
      color: var(--muted);
      line-height: 1.55;
    }
    .stat-say em {
      font-style: italic;
      color: var(--text);
    }

    .story-tagline {
      font-size: 15px;
      color: var(--muted);
      font-weight: 500;
      margin-top: 4px;
    }

    /* ================================================================
       CTA
    ================================================================ */
    .cta-sec {
      padding: 96px 0;
      background: linear-gradient(140deg, #0a0a0a 0%, #1c0404 100%);
      text-align: center;
      color: var(--white);
      position: relative;
      overflow: hidden;
    }

    .cta-sec::before {
      content: '';
      position: absolute;
      top: -40%;
      left: 50%;
      transform: translateX(-50%);
      width: 700px; height: 700px;
      background: radial-gradient(circle, rgba(204,0,0,0.12) 0%, transparent 65%);
      pointer-events: none;
    }

    .cta-inner { position: relative; z-index: 1; }

    .cta-sec h2 {
      font-size: clamp(36px, 6vw, 76px);
      font-weight: 700;
      letter-spacing: -0.048em;
      line-height: 1.04;
    }

    .cta-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .cta-primary {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 18px 36px;
      border-radius: 14px;
      font-family: var(--font);
      font-size: 17px;
      font-weight: 700;
      color: var(--black);
      background: var(--white);
      box-shadow: 0 2px 16px rgba(255,255,255,0.12);
      transition: opacity 0.15s, transform 0.15s;
    }
    .cta-primary:hover { opacity: 0.92; transform: translateY(-2px); }

    .cta-or {
      font-size: 14px; color: rgba(255,255,255,0.3); font-weight: 500;
    }

    .cta-sms {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 26px;
      border-radius: 100px;
      font-family: var(--font);
      font-size: 15px;
      font-weight: 600;
      color: rgba(255,255,255,0.7);
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.14);
      transition: all 0.15s;
    }
    .cta-sms:hover { color: var(--white); background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25); }

    .cta-sub {
      font-size: 16px;
      color: rgba(255,255,255,0.35);
      margin-top: 32px;
      font-weight: 400;
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;
    }

    /* ================================================================
       TESTIMONIALS
    ================================================================ */
    .testimonials {
      padding: 88px 0;
      background: var(--white);
      border-top: 1px solid var(--border);
    }
    .testimonials .sec-hd { margin-bottom: 44px; }
    .t-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .t-card {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px 26px;
      background: var(--white);
      display: flex;
      flex-direction: column;
      gap: 16px;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .t-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
    .t-stars {
      display: flex;
      gap: 2px;
      color: #f4b400;
      font-size: 16px;
      letter-spacing: 1px;
    }
    .t-quote {
      font-size: 16px;
      line-height: 1.55;
      color: var(--text);
      font-weight: 500;
    }
    .t-author {
      font-size: 13px;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }
    .t-author-name { font-weight: 700; color: var(--text); }
    .t-author-sub { color: var(--subtle); }
    .t-author-pic {
      width: 28px; height: 28px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }

    .t-summary {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
      font-size: 15px;
      color: var(--muted);
    }
    .t-summary-stars {
      color: #f4b400;
      font-size: 16px;
      letter-spacing: 1px;
    }
    .t-summary strong {
      color: var(--text);
      font-size: 17px;
      font-weight: 700;
    }
    .t-summary-sub {
      color: var(--subtle);
    }

    @media (max-width: 900px) {
      .t-grid { grid-template-columns: 1fr; gap: 16px; }
    }

    /* ================================================================
       SMS CONVERSATION MOCKUP (inside CTA)
    ================================================================ */
    .sms-mockup {
      max-width: 420px;
      margin: 40px auto 36px;
      background: #1a1a1a;
      border-radius: 28px;
      padding: 20px 18px 22px;
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 20px 60px rgba(204,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.04);
      text-align: left;
      position: relative;
    }
    .sms-mockup::before {
      content: 'iMessage · 2:47 PM';
      display: block;
      text-align: center;
      font-size: 11px;
      color: rgba(255,255,255,0.35);
      margin-bottom: 14px;
      letter-spacing: 0.04em;
    }
    .sms-row {
      display: flex;
      margin: 6px 0;
    }
    .sms-row.me { justify-content: flex-end; }
    .sms-row.yap { justify-content: flex-start; }
    .sms-bubble {
      max-width: 78%;
      padding: 10px 14px;
      border-radius: 18px;
      font-size: 14.5px;
      line-height: 1.4;
      font-family: var(--font);
      word-break: break-word;
    }
    .sms-row.me .sms-bubble {
      background: #0b84ff;
      color: #fff;
      border-bottom-right-radius: 4px;
    }
    .sms-row.yap .sms-bubble {
      background: #2a2a2d;
      color: rgba(255,255,255,0.95);
      border-bottom-left-radius: 4px;
    }
    .sms-row.me .sms-bubble.mono {
      font-family: 'SF Mono', 'Fira Code', monospace;
      letter-spacing: 0.04em;
      font-size: 13.5px;
    }
    .sms-caption {
      text-align: center;
      font-size: 13px;
      color: rgba(255,255,255,0.45);
      margin-top: 8px;
      font-style: italic;
    }

    /* ── Animated conversation ── */
    .sms-mockup[data-animated] .sms-step {
      opacity: 0;
      transform: translateY(8px) scale(.96);
      transform-origin: left bottom;
      transition: opacity .32s ease-out, transform .32s cubic-bezier(.2,.9,.3,1.2);
    }
    .sms-mockup[data-animated] .sms-row.me.sms-step {
      transform-origin: right bottom;
    }
    .sms-mockup[data-animated] .sms-step.show {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* Typing bubble: visible initially, fades out before real msg appears */
    .sms-mockup[data-animated] .sms-step[data-typing] .sms-typing-bubble {
      display: inline-flex;
      opacity: 1;
      transition: opacity .2s ease-out;
    }
    .sms-mockup[data-animated] .sms-step[data-typing].typing-ended .sms-typing-bubble {
      opacity: 0;
    }

    /* Real bubble: hidden until .typed, then animates in smoothly */
    .sms-mockup[data-animated] .sms-step[data-typing] .sms-real-bubble {
      display: none;
    }
    .sms-mockup[data-animated] .sms-step[data-typing].typed .sms-typing-bubble {
      display: none;
    }
    .sms-mockup[data-animated] .sms-step[data-typing].typed .sms-real-bubble {
      display: block;
      animation: smsBubblePop .32s cubic-bezier(.2,.9,.3,1.25) both;
    }
    @keyframes smsBubblePop {
      from { opacity: 0; transform: translateY(4px) scale(.94); }
      to   { opacity: 1; transform: translateY(0)   scale(1);   }
    }

    /* Three-dot typing indicator */
    .sms-typing-bubble {
      display: inline-flex;
      gap: 4px;
      align-items: center;
      padding: 13px 15px !important;
      min-height: 18px;
    }
    .sms-typing-bubble span {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(255,255,255,0.55);
      animation: smsTypingDots 1.3s infinite ease-in-out;
    }
    .sms-typing-bubble span:nth-child(2) { animation-delay: .18s; }
    .sms-typing-bubble span:nth-child(3) { animation-delay: .36s; }
    @keyframes smsTypingDots {
      0%, 60%, 100% { opacity: .32; transform: translateY(0); }
      30%           { opacity: 1;   transform: translateY(-3px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .sms-mockup[data-animated] .sms-step { opacity: 1; transform: none; transition: none; }
      .sms-mockup[data-animated] .sms-step[data-typing] .sms-typing-bubble { display: none; }
      .sms-mockup[data-animated] .sms-step[data-typing] .sms-real-bubble { display: block; animation: none; }
      .sms-typing-bubble span { animation: none; }
    }

    /* ================================================================
       FOOTER
    ================================================================ */
    footer {
      padding: 60px 0 36px;
      background: var(--black);
      color: rgba(255,255,255,0.45);
    }

    .foot-grid {
      display: grid;
      grid-template-columns: 240px 1fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 36px;
    }

    /* Matches the nav .logo-mark — clean red wordmark, no muddy outline. */
    .foot-logo {
      display: block;
      font-size: 28px;
      font-weight: 800;
      font-style: italic;
      color: var(--red);
      letter-spacing: -0.03em;
      margin-bottom: 10px;
    }

    /* Tagline + address share one type treatment so the brand column reads
       as a single block, not two different-sized chunks. */
    .foot-brand p,
    .foot-addr {
      font-size: 14px;
      line-height: 1.7;
      max-width: 220px;
      color: rgba(255,255,255,0.45);
    }
    .foot-brand p { margin-bottom: 14px; }
    .foot-addr { font-style: normal; }
    .foot-addr a { color: inherit; transition: color 0.15s; }
    .foot-addr a:hover { color: var(--white); }

    .foot-col h4 {
      font-size: 12px;
      font-weight: 700;
      color: var(--white);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 16px;
    }

    .foot-col ul { display: flex; flex-direction: column; gap: 10px; }

    .foot-col a {
      font-size: 14px;
      color: rgba(255,255,255,0.42);
      transition: color 0.15s;
    }
    .foot-col a:hover { color: var(--white); }

    .foot-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 28px;
      border-top: 1px solid rgba(255,255,255,0.07);
      font-size: 13px;
      color: rgba(255,255,255,0.22);
    }

    /* ================================================================
       RESPONSIVE
    ================================================================ */
    @media (max-width: 1100px) {
      .parts-grid { grid-template-columns: repeat(2, 1fr); }
      /* Story section ('Meet the Dude') — stack image above text on
         narrow screens. Previously hid the YAP Dude entirely (display:
         none) on everything <1100px, which gutted the whole point of
         the 'Meet the Dude' framing. Show him bigger and on top so the
         human face leads the section on tablets and phones. */
      .story-inner { grid-template-columns: 1fr; gap: 24px; }
      .story-visual { order: -1; max-width: 320px; margin: 0 auto; }
      .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
      .foot-brand { grid-column: 1 / -1; }
    }

    @media (max-width: 1180px) {
      .post-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    }

    @media (max-width: 900px) {
      .blog-header { flex-direction: column; align-items: flex-start; }
    }

    @media (max-width: 640px) {
      .post-grid { grid-template-columns: 1fr; }
      .blog-cats { padding-bottom: 12px; }
      .cat-pill { font-size: 13px; padding: 7px 14px; }
    }

    @media (max-width: 768px) {
      .nav-links, .btn-text { display: none; }
      .hamburger { display: flex; }

      /* ── Mobile hero reorder ───────────────────────────────────────────
         Goal: customer can see the part finder AND the YAP dude search
         animation in a single phone viewport without scrolling.
         Stack order top → bottom (location pill is gone — its info now
         lives in the trust-badges row inside the search card):
           1. YAP dude poster (smaller — 240px)
           2. Search card (form / inline result, with location chip baked
              into the trust badges underneath the button)
           3. "Fix it yourself. We've got the part." (smaller tagline)
         Implemented by flattening .hero-copy children into the grid via
         display: contents, then explicit `order` on the three siblings. */
      .hero-inner {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px 20px 40px;
      }
      .hero-copy { display: contents; }

      .hero-visual  { order: 1; }
      .search-card  { order: 2; margin-top: 0; }
      .hero-h1 {
        order: 3;
        font-size: 28px;
        line-height: 1.1;
        text-align: center;
        margin-top: 6px;
      }

      .yap-frame { max-width: 240px; margin: 0 auto; }
      /* When the poster's "ON THE HUNT" speech bubble pops left of the
         frame, ensure it doesn't push the page wider than the viewport. */
      .yap-speech { max-width: 220px; }

      .brands-row { gap: 28px; }
      .brand-tag { font-size: 16px; }

      .sec-hd { flex-direction: column; align-items: flex-start; gap: 10px; }

      .foot-grid { grid-template-columns: 1fr 1fr; }
      .foot-bottom { flex-direction: column; gap: 8px; text-align: center; }
    }

    @media (max-width: 540px) {
      .parts-grid { grid-template-columns: 1fr; }
      .foot-grid { grid-template-columns: 1fr; }
    }