<!-- Department of Jolly — finder/index.html — v2.24.0 — 2026-10-24 — BACK BUTTON. Each finder screen is now a browser history entry, so Back steps to the previous screen (answers kept) instead of leaving the finder for whatever page came before it. Waiting and error screens are skipped. -->
<!-- Department of Jolly — finder/index.html — v2.23.1 — 2026-10-24 — A case now gives up after 100s and shows the retry screen, instead of an open-ended wait. Pairs with api/finder.js v2.11.0, which caps live search at 30s and uses a stale trend cache rather than none. -->
<!-- Department of Jolly — finder/index.html — v2.23.0 — 2026-10-24 — LIVE CASE FILE. The deliberation video is replaced by the same animation built into the page: live type (crisp at any size, in the site's own fonts) and the real exhibit photos, scaled to its box. Desktop wait screen is now two columns: headline, brief and progress on the left, above the fold; the case file on the right, sized to the screen height. Phones keep progress above the file. /images/deliberation.mp4 and its poster are removed; two small exhibit images added (cf-exhibit-*.webp). -->
<!-- Department of Jolly — finder/index.html — v2.22.1 — 2026-10-24 — Fixes from the live test: (1) the full-width gift card (5th of 5, 3rd of an amend set) now lays out side by side, so its photo is no longer stretched three times larger than its neighbours and soft; (2) the resolution stamp is smaller and sits within the video; (3) the deliberation video is re-rendered at full resolution for crisp type. -->
<!-- Department of Jolly — finder/index.html — v2.22.0 — 2026-10-24 — PAID-TRAFFIC PASS. (1) Landing screen is now a split: copy left, /images/finder-hero.jpg right (image on top on phones). New copy: "Excellent gifts. Rigorously approved." plus the four-questions line, and a mono line under the CTA leading with "Results in under a minute". (2) Wait screen rebuilt: the icon train is gone. The visitor now sees their brief, a progress bar with elapsed time and the usual wait, five named stages that tick over as the case moves, the departmental bulletins in a smaller panel, and a JOLLY APPROVED stamp that lands when results arrive. A long case says so plainly at 70s. Timings live in WAIT_* constants. Requires /images/finder-hero.jpg; deploy together. -->
<!-- Department of Jolly — finder/index.html — v2.21.0 — 2026-10-12 — Loads js/amend.js: "Amend the Brief" (pills, the Department Dial, rule-outs, written amendments) and "Share these findings" under every case. Nothing else on this page changes. -->
<!-- Department of Jolly — finder/index.html — v2.20.0 — 2026-10-11 — DOSSIERS. Your Cases gains a second tab, Dossiers: named lists a visitor files gifts into, one per child or per occasion. Every gift card on the results screen carries a "+ File it" stamp (as do the Affairs pages and the Intelligence Center, via js/dossier.js loaded by include.js). The Dossiers tab shows each Dossier as a board with a four-photo mosaic; open one to see its gifts, click out, remove, rename or shred. /finder?view=dossiers deep-links straight in (nav partial v1.3.0 adds "Your Dossiers"). The intro line now counts Dossiers alongside cases. Dossier controls carry Cobalt so they never echo the green Open a case CTA. Pairs with js/dossier.js v1.0.0, js/include.js v1.4.0, partials/nav.html v1.3.0; deploy together. -->
<!-- v2.19.0 — 2026-10-02 — Launch pass: search and share tags (canonical, robots, Open Graph, Twitter card with image), search title and description, stamp tab icons replace the star. Tracking unchanged: finder_results_viewed now also counts as a Pinterest lead through include.js v1.3.1. -->
<!-- Department of Jolly — finder/index.html — v2.18.0 — 2026-09-22 — Formspree no longer posts gift{n}_age_fit, since api/finder.js v2.9.0 stops generating that field. Pairs with that file; deploy together. -->
<!-- v2.17.0 — 2026-09-22 — DELIBERATION BULLETINS. The 47-second wait is now filled in character. The static "Cross-referencing trend intelligence, age appropriateness, and jolly merit" line is replaced by a rotating bulletin that ESCALATES with the wait: tier 1 (0-9s) is straight procedural and builds credibility, tier 2 (9-24s) lets the bureaucracy arrive, tier 3 (24s+) runs IN ORDER as a story — the overruled analyst, the Head of Jolly's eyebrow, the search for the stamp — resolving on "Applying the stamp" against the JOLLY APPROVED seal already turning on screen. Tiers 1 and 2 shuffle so repeat visitors get a different run; tier 3 keeps its order because the order carries the joke. Timings live in three constants at the top of the block for tuning as engine speed changes. Verified against a real-length 47s case: 17 bulletins, none repeated, the stamp landing 0.2s before the gifts. -->
<!-- v2.16.0 — 2026-09-22 — INTRO REORDER + CASE LOG ACCESS + CONSOLE VISIBILITY. (1) "Open a case" now leads the intro screen; the case log moved beneath it and lost its boxed banner, reading as a quiet mono utility line rather than a second CTA competing with the first. Wording trimmed to "N cases on file." (2) /finder?view=cases opens straight into the case log on load, so a site-wide nav entry can deep-link into it — pairs with partials/nav.html v1.1.0, which adds a Gift Finder dropdown carrying "Open a Case" and "Your Cases". (3) Every completed case now logs to the console: a headline with case ref, elapsed time and cache hit/miss, a console.table of the five gifts with price/verified/retailer/image, and the full response object — matching how Maison Grey surfaces its engine, so the working can be inspected without waiting on Formspree. (4) wait_seconds is now stored in the case log alongside the case, not only posted to Formspree. Verified by render: CTA sits above the log line, ?view=cases lands on the log. -->
<!-- v2.15.0 — 2026-09-22 — WAIT TIME CAPTURE + FORMSPREE STATUS CHECK. (1) The clock now starts when a case is submitted and stops when gifts render, so every Formspree row carries wait_seconds alongside cache_used — the two fields together show whether a slow case was a cache miss or simply a large generation. Failed cases are timed too (a death at 55s is a timeout; at 3s it is something else), and wait_seconds rides along on the finder_results_viewed and finder_error GA4 events. (2) Formspree rejections used to vanish: a 4xx resolves the promise successfully, so the existing .catch() never fired and a refused submission left no trace. The status is now checked explicitly and a rejection names itself in the console with the response body; a success logs the case ref and the wait. Verified against a simulated 3s API delay (posted 3.0) and a simulated 422 (logged with body). -->
<!-- v2.14.0 — 2026-09-19 — RESULTS GRID FIX. Serper returns a product shot for some gifts and not others; a card with no image collapsed its image box entirely, so it started with text while its neighbour started with a photo, and since grid rows stretch to the tallest card, the shorter one's footer sat mid-card with an orphaned white block beneath it. Two fixes: .gift-card is now a flex column with .gift-card-body taking the slack, so every footer and CTA sits on the card's bottom edge; and the image box is always reserved, holding a "★ IMAGE NOT ON FILE" departmental placeholder when there's nothing to show (a broken image URL now falls back to the same placeholder instead of collapsing). Verified by render with images present on items 1/3/5 and absent on 2/4: every card in a row measures identical height with its CTA 1px off the bottom. -->
<!-- v2.13.0 — 2026-09-19 — ICON TRAIN, properly fixed at the container level. Two faults: (1) `.icon-train-wrap` declared `margin-left: -50vw` and then a `margin: 28px 0 32px` shorthand AFTER it, which silently overrode the -50vw — so the full-bleed row sat half a viewport to the right of where it belonged and ran its right end off screen; the shorthand now carries the -50vw itself. (2) The edge mask faded icons mid-journey; removed entirely, so icons enter one side and leave the other fully drawn. overflow:hidden kept on the wrap, overflow:visible kept on the SVGs, flex-shrink:0 added to `.icon-train-set`, translateX(-50%) loop unchanged. Verified by render at 1959/1600/1280/390px: wrap now spans exactly 0..viewport, no mask, no horizontal scroll, one set (4992px) exceeds every viewport so the loop stays seamless. No icon artwork or layout changes. -->
<!-- v2.12.0 — 2026-09-19 — TRACKING OVERHAUL, matching the Maison Grey reporting pattern: Formspree was only ever capturing the four intake questions and firing BEFORE the API call, so it never saw the actual case result. Moved the Formspree POST to fire after a successful response, carrying the full case — every gift's why/trending_reason/age_fit/price/retailer/categories, not just its name — plus case_ref, cache_used and first-touch source attribution (referrer/landing page/UTMs, via new djSource()). Added GA4 events for every step that wasn't already tracked (occasion_selected, budget_selected, interests_selected, baby_stage_selected, baby_details_confirmed, difficult_case_submitted, finder_error). Enriched the outbound gift-click event with price/retailer/link_type/case_ref so click-off tracking shows which gift and at what reasoning, not just a name and position. -->
<!-- v2.11.0 — 2026-09-19 — Actual fix for the icon cut-off: several icon strokes (e.g. the robot's antenna ball) sit close enough to their 48x48 viewBox edge that the 2.2px stroke pushed past it and got clipped. Added overflow:visible to .icon-train svg so strokes render fully regardless of proximity to the box edge. The earlier edge-fade (v2.9.0) addressed a different, real but separate thing and stays in place. Also fixed the seal's curved text colliding with "APPROVED" via textLength. -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Gift Finder: Personalised Gift Ideas for Kids 0–18 | Department of Jolly</title>
  <meta name="description" content="Answer four questions and the Department's Gift Finder files five personalised gift ideas for any child, ages 0–18, drawn from this morning's trend intelligence." />
  <meta name="robots" content="index, follow, max-image-preview:large" />
  <link rel="canonical" href="https://departmentofjolly.com/finder" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://departmentofjolly.com/finder" />
  <meta property="og:site_name" content="Department of Jolly" />
  <meta property="og:title" content="The Gift Finder | Department of Jolly" />
  <meta property="og:description" content="Four questions. Today's trend intelligence. Five gifts they'll actually want." />
  <meta property="og:image" content="https://departmentofjolly.com/images/hero-teen-headphones.jpg" />
  <meta property="og:locale" content="en_US" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="The Gift Finder | Department of Jolly" />
  <meta name="twitter:description" content="Four questions. Today's trend intelligence. Five gifts they'll actually want." />
  <meta name="twitter:image" content="https://departmentofjolly.com/images/hero-teen-headphones.jpg" />
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#F8F4EB">

  <!-- GA4 -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-P91H1B792Z"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-P91H1B792Z');
  </script>

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=IBM+Plex+Mono:wght@400;600&family=Inter:wght@400;500;600&family=Reenie+Beanie&display=swap" rel="stylesheet" />

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

    :root {
      --cream: #F8F4EB;
      --ivory: #F0E8D8;
      --ink: #111111;
      --ink-soft: #3a3530;
      --ink-muted: #6a6058;
      --border: #d8d0c0;
      --jolly-red: #C62828;
      --dept-green: #224E3F;
      --cobalt: #2E58FF;
      --blush: #e8559a;
      --butter: #b89800;
      --serif: 'Playfair Display', Georgia, serif;
      --mono: 'IBM Plex Mono', monospace;
      --sans: 'Inter', system-ui, sans-serif;
      --hand: 'Reenie Beanie', cursive;
    }

    html, body { height: 100%; font-family: var(--sans); background: var(--cream); color: var(--ink); -webkit-font-smoothing: antialiased; }

    .page { min-height: 100vh; display: flex; flex-direction: column; }
    .sticky-top { position: sticky; top: 0; z-index: 100; background: var(--cream); }

    /* SHARED NAV/FOOTER — required so partials/nav.html and partials/footer.html (fetched by js/include.js)
       render correctly here. Without this base reset, footer links fall back to the browser default
       blue/purple, since the footer partial has no colors of its own — it relies on the host page
       providing them, same as every other page on the site already does. */
    a { color: inherit; text-decoration: none; }
    .nav-link { text-decoration: none; }
    .nav-link:hover { color: var(--jolly-red) !important; }
    .nav-dropdown { position: relative; }
    .dropdown-menu { display: none; position: absolute; top: 28px; left: 0; width: 200px; background: #ffffff; border: 1px solid #111111; box-shadow: 3px 3px 0 rgba(0,0,0,0.08); z-index: 10; }
    .nav-dropdown:hover .dropdown-menu { display: block; }
    .dropdown-menu a { display: block; padding: 10px 16px; font-family: var(--sans); font-size: 13px; text-transform: none; letter-spacing: normal; color: var(--ink); text-decoration: none; }
    .dropdown-menu a:hover { background: #F2C6D0; }
    .dropdown-label { padding: 8px 16px 4px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: #A7A7A7; }

    /* PROGRESS */
    .progress { display: flex; border-bottom: 1px solid var(--border); background: var(--cream); }
    .prog-step { flex: 1; padding: 11px 0 8px; text-align: center; border-right: 0.5px solid var(--border); position: relative; cursor: default; transition: background 0.12s; user-select: none; }
    .prog-step:last-child { border-right: none; }
    .prog-step.done { background: #f0ece0; cursor: pointer; }
    .prog-step.done:hover { background: var(--ivory); }
    .prog-step.active { background: #fff; }
    .prog-num { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 1px; display: block; color: var(--ink-muted); }
    .prog-step.active .prog-num { color: var(--ink); }
    .prog-edit { font-family: var(--mono); font-size: 10px; color: var(--ink-muted); display: none; margin-top: 2px; }
    .prog-step.done .prog-edit { display: block; }
    .prog-bar { height: 3px; position: absolute; bottom: 0; left: 0; right: 0; display: none; }
    .prog-step.active .prog-bar { display: block; }

    /* BODY */
    .finder-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .step-wrap { max-width: 640px; margin: 0 auto; padding: 40px 24px 64px; display: none; }
    .step-wrap.active { display: block; }
    #s6.step-wrap { max-width: 1040px; }

    /* TYPOGRAPHY */
    .form-ref { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 14px; line-height: 1.5; }
    .step-ey { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink); margin-bottom: 16px; }
    .step-h { font-family: var(--serif); font-size: clamp(28px, 5vw, 40px); font-weight: 400; line-height: 1.15; margin-bottom: 12px; }
    .step-sub { font-size: 17px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 36px; }

    /* AGE TILES */
    .age-grid { display: grid; gap: 10px; margin-bottom: 16px; }
    .age-btn { border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; cursor: pointer; background: #fff; display: flex; align-items: center; justify-content: space-between; min-height: 68px; transition: all 0.12s; }
    .age-btn:hover { background: var(--ivory); border-color: var(--ink); }
    .age-btn.sel { border: 2.5px solid var(--butter); background: #fffdf0; }
    .age-btn.dc-btn.sel { border-color: var(--jolly-red); background: #fff5f5; }
    .ab-name { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; display: block; margin-bottom: 4px; }
    .ab-range { font-size: 15px; color: var(--ink-muted); }
    .ab-arr { font-size: 20px; color: var(--ink-muted); flex-shrink: 0; }

    /* OPTIONAL GENDER — hidden until an age is selected */
    .gender-reveal { display: none; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
    .gender-reveal.show { display: block; animation: genderIn 0.22s ease-out; }
    @keyframes genderIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
    .gender-label { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 12px; }
    .gender-row { display: flex; gap: 10px; flex-wrap: wrap; }
    .gender-btn { border: 1px solid var(--border); border-radius: 24px; padding: 12px 24px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; background: #fff; transition: all 0.12s; min-height: 46px; display: flex; align-items: center; }
    .gender-btn:hover { background: var(--ivory); border-color: var(--ink); }
    .gender-btn.sel { border: 2.5px solid var(--dept-green); color: var(--dept-green); background: #f0f5f2; }
    .gender-skip { color: var(--ink-muted); }

    /* DIFFICULT CASES */
    .dc-box { background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--jolly-red); border-radius: 0 8px 8px 0; padding: 20px; margin-bottom: 32px; }
    .dc-label { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--jolly-red); margin-bottom: 12px; }
    .dc-ta { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 14px; font-size: 16px; font-family: var(--sans); background: var(--cream); color: var(--ink); resize: none; height: 110px; line-height: 1.65; }
    .dc-ta:focus { outline: none; border-color: var(--jolly-red); }

    /* CHIPS */
    .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; padding: 8px 0; }
    .chip { border: 1px solid var(--border); border-radius: 24px; padding: 11px 20px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; background: #fff; transition: all 0.12s; min-height: 46px; display: flex; align-items: center; }
    .chip:hover { background: var(--ivory); border-color: var(--ink); }
    .chip.sel { border: 2.5px solid var(--cobalt); color: var(--cobalt); background: #eef2ff; }

    /* OCCASIONS */
    .occ-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
    .occ-btn { border: 1px solid var(--border); border-radius: 8px; padding: 16px; cursor: pointer; background: #fff; transition: all 0.12s; min-height: 72px; }
    .occ-btn:hover { background: var(--ivory); border-color: var(--ink); }
    .occ-btn.sel { border: 2.5px solid var(--blush); background: #fff0f6; }
    .occ-name { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; display: block; margin-bottom: 5px; }
    .occ-sub { font-size: 13px; color: var(--ink-muted); line-height: 1.4; }
    .occ-other-wrap { display: none; margin-bottom: 20px; }
    .occ-other-label { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); display: block; margin-bottom: 8px; }
    .occ-other-input { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 13px 16px; font-size: 16px; font-family: var(--sans); background: #fff; color: var(--ink); }
    .occ-other-input:focus { outline: none; border-color: var(--blush); }

    /* BUDGET */
    .bud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 36px; }
    .bud-btn { border: 1px solid var(--border); border-radius: 8px; padding: 18px 16px; cursor: pointer; background: #fff; transition: all 0.12s; min-height: 100px; }
    .bud-btn:hover { background: var(--ivory); border-color: var(--ink); }
    .bud-btn.sel { border: 2.5px solid var(--jolly-red); background: #fff5f5; }
    .bud-price { font-family: var(--serif); font-size: 22px; font-weight: 400; display: block; margin-bottom: 6px; }
    .bud-desc { font-size: 13px; color: var(--ink-muted); line-height: 1.5; display: block; margin-bottom: 8px; }
    .bud-rank { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--jolly-red); }

    /* INTEL */
    .intel-wrap { border-top: 1px solid var(--border); padding-top: 32px; margin-bottom: 32px; }
    .intel-h { font-family: var(--serif); font-size: 26px; font-weight: 400; margin-bottom: 8px; }
    .intel-sub { font-size: 16px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 16px; display: block; }
    .intel-ta { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; font-size: 16px; font-family: var(--sans); background: #fff; color: var(--ink); resize: none; height: 96px; line-height: 1.65; }
    .intel-ta:focus { outline: none; border-color: var(--jolly-red); }

    /* CTA */
    .cta { display: block; width: 100%; background: var(--dept-green); color: #fff; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; padding: 18px; border-radius: 4px; border: none; cursor: pointer; text-align: center; min-height: 56px; transition: background 0.15s; }
    .cta:hover { background: #1a3a2e; }

    /* ERRORS */
    .err { font-family: var(--mono); font-size: 12px; color: var(--jolly-red); letter-spacing: 1px; margin-bottom: 16px; display: none; line-height: 1.5; }

    /* INTRO SPLIT (v2.22.0) */
    #s0.step-wrap { max-width: 1180px; }
    .intro-split { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
    .intro-img { border-radius: 10px; overflow: hidden; background: var(--ivory); aspect-ratio: 4 / 3; }
    .intro-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
    .intro-h { font-family: var(--serif); font-size: clamp(36px, 6.2vw, 64px); font-weight: 400; line-height: 1.04; margin-bottom: 18px; }
    .intro-h em { font-style: italic; display: block; }
    .intro-sub { font-size: 18px; color: var(--ink-soft); line-height: 1.65; margin-bottom: 30px; max-width: 30em; }
    .intro-meta b { color: var(--dept-green); font-weight: 600; }
    .intro-meta { margin-top: 14px; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-muted); }
    #s0 .intro-log-line { text-align: center; }
    @media (min-width: 900px) {
      .intro-split { grid-template-columns: 1fr 1.1fr; gap: 56px; }
      .intro-copy { order: 1; }
      .intro-img { order: 2; aspect-ratio: 1374 / 1145; }
      .intro-meta, #s0 .intro-log-line { text-align: left; }
    }

    /* WAIT SCREEN (v2.22.0) */
    #s5.step-wrap { max-width: 720px; }
    .wait-h { font-family: var(--serif); font-size: clamp(30px, 5vw, 44px); font-weight: 400; line-height: 1.1; margin-bottom: 12px; }
    .wait-h em { font-style: italic; }
    .wait-sub { font-size: 16px; color: var(--ink-soft); line-height: 1.65; margin-bottom: 22px; }
    .wait-brief { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 26px; }
    .wait-brief-label { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-muted); margin-right: 4px; }
    .wait-panel { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px 4px; margin: 0 auto 16px; max-width: 460px; }
    .wait-bar { height: 8px; background: var(--ivory); border-radius: 4px; overflow: hidden; }
    .wait-bar i { display: block; height: 100%; width: 0; background: var(--dept-green); border-radius: 4px; transition: width 0.4s linear; }
    .wait-time { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 10px 0 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-muted); }
    .wait-time b { color: var(--ink); font-weight: 600; }
    .wait-long { display: none; font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: -6px 0 16px; padding-left: 12px; border-left: 2px solid var(--jolly-red); }
    .wait-long.show { display: block; }
    /* LIVE CASE FILE (v2.23.0). Built in the page at a fixed 1080x1350 design size and
       scaled to fit its box, so every word stays live type: crisp at any screen size. */
    .wait-video { position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--border); background: var(--cream); aspect-ratio: 4 / 5; width: 100%; margin: 0 auto; }
    .cf-stage { position: absolute; left: 0; top: 0; width: 1080px; height: 1350px; transform-origin: 0 0; color: var(--ink); background: var(--cream); }
    .cf-stage * { box-sizing: border-box; }
    .cf-frame { position: absolute; inset: 26px; border: 2px solid var(--ink); }
    .cf-frame::after { content: ''; position: absolute; inset: 8px; border: 1px solid var(--ink); opacity: .3; }
    .cf-top { position: absolute; top: 60px; left: 70px; right: 70px; display: flex; justify-content: space-between; font-family: var(--mono); font-weight: 600; font-size: 27px; letter-spacing: 4px; text-transform: uppercase; }
    .cf-top .l { color: var(--jolly-red); }
    .cf-top .r { color: var(--dept-green); display: flex; align-items: center; gap: 12px; }
    .cf-top .r i { width: 15px; height: 15px; border-radius: 50%; background: var(--dept-green); display: inline-block; }
    .cf-folder { position: absolute; top: 140px; left: 62px; right: 62px; height: 800px; }
    .cf-tab { position: absolute; top: 0; left: 0; width: 640px; height: 64px; background: #E8DCC2; border: 2px solid var(--ink); border-bottom: none; border-radius: 10px 10px 0 0; font-family: var(--mono); font-weight: 600; font-size: 24px; letter-spacing: 3px; display: flex; align-items: center; padding-left: 26px; color: var(--ink-soft); white-space: nowrap; }
    .cf-body { position: absolute; top: 62px; left: 0; right: 0; bottom: 0; background: var(--ivory); border: 2px solid var(--ink); border-radius: 0 10px 10px 10px; }
    .cf-grid { position: absolute; top: 34px; left: 34px; right: 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 26px; }
    .cf-ex { position: relative; background: #fff; padding: 14px 14px 0; height: 330px; box-shadow: 0 2px 0 rgba(0,0,0,.06), 0 12px 22px rgba(60,40,10,.10); border: 1px solid #e2d8c4; opacity: 0; }
    .cf-ph { position: relative; height: 196px; overflow: hidden; background: var(--ivory); }
    .cf-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .cf-scan { position: absolute; left: 0; right: 0; height: 4px; background: var(--cobalt); box-shadow: 0 0 14px 4px rgba(46,88,255,.35); opacity: 0; }
    .cf-hd { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; }
    .cf-cap { font-family: var(--mono); font-weight: 600; font-size: 21px; letter-spacing: 3px; color: var(--jolly-red); }
    .cf-no { font-family: var(--mono); font-size: 17px; color: var(--ink-muted); }
    .cf-nm { font-family: var(--sans); font-weight: 600; font-size: 27px; color: var(--ink); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cf-st { font-family: var(--mono); font-weight: 600; font-size: 17px; letter-spacing: 1px; color: var(--ink-muted); margin-top: 4px; white-space: nowrap; }
    .cf-stamp { position: absolute; left: 50%; top: 44%; padding: 8px 14px; border: 5px double currentColor; background: rgba(255,253,248,.93); font-family: var(--mono); font-weight: 600; font-size: 28px; letter-spacing: 3px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.12); opacity: 0; }
    .cf-seal { position: absolute; top: 96px; right: 44px; width: 180px; height: 180px; }
    .cf-blabel { position: absolute; top: 1000px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-weight: 600; font-size: 25px; letter-spacing: 4px; color: var(--jolly-red); }
    .cf-bul { position: absolute; top: 1050px; left: 80px; right: 80px; height: 220px; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--serif); font-size: 60px; line-height: 1.18; }
    /* Two columns on desktop: everything the visitor needs to read stays above the fold on
       the left; the case file fills the screen height on the right. */
    #s5.step-wrap { max-width: 1180px; }
    .wait-grid { display: grid; gap: 24px; }
    .wait-grid .wait-panel { max-width: none; margin: 0; }
    @media (min-width: 900px) {
      #s5.step-wrap { padding-top: 32px; padding-bottom: 40px; }
      .wait-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center; }
      .wait-grid .wait-video { width: min(620px, calc((100vh - 170px) * 0.8)); min-width: 420px; }
    }
    /* Stamp lands over the panel the moment the case resolves, then results take over. */
    .wait-stamp { position: absolute; z-index: 3; left: 50%; top: 50%; width: 58%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(2.2); mix-blend-mode: multiply; }
    .wait-stamp.slam { animation: stampSlam 0.5s cubic-bezier(.2,.9,.3,1.2) forwards; }
    @keyframes stampSlam { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(-8deg) scale(2.2); } 35% { opacity: .95; transform: translate(-50%,-50%) rotate(-8deg) scale(0.96); } 100% { opacity: .92; transform: translate(-50%,-50%) rotate(-8deg) scale(1); } }
    .wait-video.thud { animation: thud 0.3s 0.16s ease-out; }
    @keyframes thud { 0%,100% { transform: none; } 30% { transform: translate(2px,-2px); } 60% { transform: translate(-2px,1px); } }
    @media (prefers-reduced-motion: reduce) { .wait-stamp.slam { animation-duration: .01s; } .wait-video.thud { animation: none; } }


    /* RESULTS */
    .res-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; line-height: 1.6; font-weight: 600; }
    .res-h { font-family: var(--serif); font-size: clamp(28px, 5vw, 40px); font-weight: 400; margin-bottom: 20px; line-height: 1.15; }
    .res-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
    .res-pill { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; border: 1px solid var(--border); border-radius: 20px; padding: 7px 14px; background: #fff; color: var(--ink-soft); }
    .res-pill.res-pill-int { border-color: var(--cobalt); color: var(--cobalt); }
    .jolly-note { background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--jolly-red); padding: 18px 20px; border-radius: 0 6px 6px 0; margin-bottom: 32px; }
    .jolly-note-label { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--jolly-red); display: block; margin-bottom: 10px; }
    .jolly-note-text { font-family: var(--serif); font-size: 19px; color: var(--ink-soft); line-height: 1.65; }

    /* GIFT CARDS */
    .gift-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 28px; }
    .gift-list .gift-card:nth-child(5) { grid-column: 1 / -1; }
    @media (max-width: 560px) { .gift-list { grid-template-columns: 1fr; } .gift-list .gift-card:nth-child(5) { grid-column: auto; } }
    /* Cards in a row stretch to the tallest card's height. Without this flex column the
       shorter card's footer sat wherever its content ended and the remaining height
       showed as an orphaned white block below it, inside the border. Body takes the
       slack instead, so every card's footer and CTA sit on the card's bottom edge and
       line up across the row. */
    .gift-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
    .gift-img-wrap { width: 100%; aspect-ratio: 4 / 3; background: var(--ivory); overflow: hidden; flex-shrink: 0; }
    .gift-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* Serper doesn't find a product shot for every gift. A card that simply omitted the
       image started with text while its neighbour started with a photo, so the columns
       never aligned. The box is always reserved; when there's nothing to put in it, it
       holds a departmental placeholder instead. */
    .gift-img-none { display: flex; align-items: center; justify-content: center; background: var(--ivory); }
    .gift-img-none::after { content: '\2605  IMAGE NOT ON FILE'; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-muted); opacity: 0.65; }
    .gift-card-body { padding: 22px 22px 18px; flex: 1; }
    /* WIDE CARD (v2.22.1). The odd card out — the fifth of five, or the third of an amend
       set of three — spans both columns. Stacked, its photo stretched to the full grid width
       (~1,000–1,500px), three times its neighbours, and every product shot went soft. It now
       sits side by side: photo on the left at the same width as the cards above it, details
       on the right. Phones keep the single stacked column. */
    @media (min-width: 561px) {
      .gift-list .gift-card:nth-child(5), .gift-list.am-three .gift-card:nth-child(3) { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto; }
      .gift-list .gift-card:nth-child(5) > .gift-img-wrap, .gift-list.am-three .gift-card:nth-child(3) > .gift-img-wrap { grid-column: 1; grid-row: 1 / 4; aspect-ratio: auto; height: 100%; min-height: 300px; border-right: 1px solid var(--border); }
      .gift-list .gift-card:nth-child(5) > :not(.gift-img-wrap):not(.dj-file), .gift-list.am-three .gift-card:nth-child(3) > :not(.gift-img-wrap):not(.dj-file) { grid-column: 2; }
    }

    /* Visual hierarchy — three clear tiers */
    .gift-num { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--jolly-red); margin-bottom: 8px; }
    .gift-name { font-family: var(--serif); font-size: 22px; font-weight: 700; margin-bottom: 10px; line-height: 1.25; color: var(--ink); }
    .gift-why { font-size: 16px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 10px; }
    .gift-trending { font-size: 14px; color: var(--ink-muted); line-height: 1.65; margin-bottom: 10px; border-left: 2px solid var(--border); padding-left: 12px; }
    .gift-hand { font-family: var(--hand); font-size: 24px; color: var(--dept-green); display: block; margin-bottom: 10px; }
    .gift-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--cream); flex-wrap: wrap; gap: 10px; }
    .gift-where { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-muted); }
    .gift-right { display: flex; align-items: center; gap: 12px; }
    .gift-price { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--ink); }
    .gift-stamp { font-family: var(--mono); font-size: 8px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; border: 1.5px solid var(--jolly-red); color: var(--jolly-red); padding: 4px 9px; border-radius: 2px; white-space: nowrap; }
    .gift-buy-wrap { padding: 0 22px 18px; }
    .gift-buy { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--dept-green); text-decoration: none; border-bottom: 1.5px solid var(--dept-green); padding-bottom: 2px; }
    .gift-buy:hover { color: var(--jolly-red); border-color: var(--jolly-red); }

    /* ERROR STATE */
    .api-error { background: #fff5f5; border: 1px solid var(--jolly-red); border-radius: 8px; padding: 28px; text-align: center; margin-bottom: 24px; }
    .api-error-h { font-family: var(--serif); font-size: 26px; margin-bottom: 10px; }
    .api-error-sub { font-size: 16px; color: var(--ink-soft); line-height: 1.7; }

    /* RESET — filled button */
    .reset-btn { display: block; width: 100%; background: var(--dept-green); color: #fff; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; padding: 18px; border-radius: 4px; border: none; cursor: pointer; text-align: center; min-height: 56px; transition: background 0.15s; }
    .reset-btn:hover { background: #1a3a2e; }

    /* CASE LOG */
    .log-banner { background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--dept-green); border-radius: 0 8px 8px 0; padding: 16px 20px; margin-bottom: 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
    .log-banner-text { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; color: var(--ink-soft); }
    .log-banner-link { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dept-green); text-decoration: none; border-bottom: 1.5px solid var(--dept-green); padding-bottom: 2px; white-space: nowrap; }
    .log-banner-link:hover { color: var(--jolly-red); border-color: var(--jolly-red); }
    /* INTRO CASE-LOG LINE — deliberately understated. Sits under the primary CTA as a
       returning-visitor convenience, never as a competing call to action. */
    .intro-log-line { margin-top: 20px; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.4px; color: var(--ink-muted); line-height: 1.6; }
    .intro-log-line a { color: var(--dept-green); border-bottom: 1px solid rgba(34, 78, 63, 0.35); padding-bottom: 1px; margin-left: 8px; white-space: nowrap; }
    .intro-log-line a:hover { color: var(--jolly-red); border-color: var(--jolly-red); }
    .log-list { display: grid; gap: 12px; margin-bottom: 28px; }
    .log-item { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; cursor: pointer; transition: all 0.12s; }
    .log-item:hover { background: var(--ivory); border-color: var(--ink); }
    .log-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
    .log-item-ref { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--jolly-red); }
    .log-item-date { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); }
    .log-item-summary { font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
    .log-item-count { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); margin-top: 6px; }
    .log-empty { font-size: 16px; color: var(--ink-muted); line-height: 1.7; margin-bottom: 28px; }
    .log-clear { display: block; width: 100%; background: transparent; color: var(--ink-muted); border: 1px solid var(--border); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 14px; border-radius: 4px; cursor: pointer; text-align: center; margin-top: 12px; }
    .log-clear:hover { border-color: var(--jolly-red); color: var(--jolly-red); }

    @media (min-width: 640px) {
      .step-wrap { padding: 52px 40px 80px; }
    }

    /* YOUR CASES · DOSSIERS TABS (v2.20.0) */
    #s-log.step-wrap.wide { max-width: 1040px; }
    .log-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--ink); margin: 0 0 28px; }
    .log-tab { background: transparent; border: none; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: 12px 18px 10px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-muted); cursor: pointer; }
    .log-tab:first-child { padding-left: 0; }
    .log-tab:hover { color: var(--ink); }
    .log-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--jolly-red); }
    #tab-dossiers[aria-selected="true"] { border-bottom-color: #2E58FF; }
    .log-tab .n { font-weight: 400; color: var(--ink-muted); margin-left: 6px; }
  </style>
<script src="/js/tweak.js"></script>
<link rel="stylesheet" href="/tweaks.css">
</head>
<body>
<script>
  // Kick off loading Reenie Beanie (and the other webfonts) the moment the
  // page opens, rather than waiting until a handwritten-style element is
  // actually rendered. Without this, the first time results appear in a
  // session, the browser sometimes paints that text before the font has
  // finished downloading and falls back to its own generic cursive — which
  // is why it looked correct on reopened/past cases (font already loaded
  // by then) but wrong on a freshly submitted one. Someone spends a good
  // stretch of time on the four questions before ever reaching results,
  // so this gives the font plenty of time to finish loading first.
  if (window.document && document.fonts) {
    ['Reenie Beanie', 'Playfair Display', 'IBM Plex Mono', 'Inter'].forEach(function(f) {
      try { document.fonts.load('1em "' + f + '"'); } catch (e) {}
    });
  }
</script>
<div class="page">

  <div class="sticky-top">
    <div id="site-nav"></div>
    <div class="progress" id="progress" style="display:none;">
      <div class="prog-step active" id="ps1" onclick="goBack(1)">
        <span class="prog-num">01/04</span>
        <span class="prog-edit">← edit</span>
        <div class="prog-bar" style="background:#EFD966;"></div>
      </div>
      <div class="prog-step" id="ps2" onclick="goBack(2)">
        <span class="prog-num">02/04</span>
        <span class="prog-edit">← edit</span>
        <div class="prog-bar" style="background:#2E58FF;"></div>
      </div>
      <div class="prog-step" id="ps3" onclick="goBack(3)">
        <span class="prog-num">03/04</span>
        <span class="prog-edit">← edit</span>
        <div class="prog-bar" style="background:#e8559a;"></div>
      </div>
      <div class="prog-step" id="ps4" onclick="goBack(4)">
        <span class="prog-num">04/04</span>
        <span class="prog-edit">← edit</span>
        <div class="prog-bar" style="background:#C62828;"></div>
      </div>
    </div>
  </div>

  <div class="finder-body">

    <!-- INTRO — split screen (v2.22.0): copy left, hero right; image stacks on top on phones. -->
    <div class="step-wrap active" id="s0">
      <div class="intro-split">
        <div class="intro-img">
          <img src="/images/finder-hero.jpg" alt="A child peers over a stack of colourful gift boxes topped with a toy camera, magnetic tiles and a toy dinosaur" width="1374" height="1145" fetchpriority="high" />
        </div>
        <div class="intro-copy">
          <div class="form-ref">Form 001 · Gift Assistance Request</div>
          <h1 class="intro-h">Excellent gifts. <em>Rigorously approved.</em></h1>
          <p class="intro-sub">Four questions. Five gifts they'll actually want. An entire Department dedicated to getting it right.</p>
          <button class="cta" onclick="startFinder()">Open a case →</button>
          <div class="intro-meta"><b>Results in under a minute</b> · No account · No charge</div>
          <!-- Case log sits BELOW the primary CTA and reads as a quiet utility line rather
               than a second boxed call to action competing with "Open a case". -->
          <div class="intro-log-line" id="intro-log-banner" style="display:none;">
            <span id="intro-log-text"></span>
            <a href="#" id="intro-log-cases" onclick="openCaseLog();return false;">Your cases →</a>
            <a href="#" id="intro-log-dossiers" style="color:#2E58FF; border-color:rgba(46,88,255,.35);" onclick="openDossiers();return false;">Your Dossiers →</a>
          </div>
        </div>
      </div>
    </div>

    <!-- S1 RECIPIENT — auto-advances on selection -->
    <div class="step-wrap" id="s1">
      <div class="form-ref">Form 001 · Gift Assistance Request</div>
      <div class="step-ey" style="color:var(--butter);">01 / 04 — Recipient</div>
      <h2 class="step-h">Who is this gift for?</h2>
      <p class="step-sub">Select the age division. The Department will handle the rest.</p>
      <div class="age-grid">
        <div class="age-btn" onclick="selAge(this,'baby')">
          <div><span class="ab-name">Baby Affairs</span><span class="ab-range">0 – 2 years</span></div>
          <span class="ab-arr">→</span>
        </div>
        <div class="age-btn" onclick="selAge(this,'kid')">
          <div><span class="ab-name">Kid Affairs</span><span class="ab-range">3 – 8 years</span></div>
          <span class="ab-arr">→</span>
        </div>
        <div class="age-btn" onclick="selAge(this,'tween')">
          <div><span class="ab-name">Tween Affairs</span><span class="ab-range">9 – 12 years</span></div>
          <span class="ab-arr">→</span>
        </div>
        <div class="age-btn" onclick="selAge(this,'teen')">
          <div><span class="ab-name">Teen Affairs</span><span class="ab-range">13 – 18 years</span></div>
          <span class="ab-arr">→</span>
        </div>
        <div class="age-btn dc-btn" onclick="selAge(this,'difficult')">
          <div><span class="ab-name">Difficult Cases</span><span class="ab-range">No further information available.</span></div>
          <span class="ab-arr">→</span>
        </div>
      </div>

      <!-- Optional gender — revealed after an age is chosen. Deliberately omitted for
           Baby Affairs, where it changes nothing useful about the recommendations. -->
      <div class="gender-reveal" id="gender-reveal">
        <div class="gender-label">Optional — helps with fashion and clothing picks</div>
        <div class="gender-row">
          <div class="gender-btn" onclick="selGender(this,'girl')">Girl</div>
          <div class="gender-btn" onclick="selGender(this,'boy')">Boy</div>
          <div class="gender-btn gender-skip" onclick="selGender(this,null)">Skip this →</div>
        </div>
      </div>
    </div>

    <!-- S1b DIFFICULT CASES -->
    <div class="step-wrap" id="s1b">
      <div class="form-ref">Form 001 · Gift Assistance Request · Difficult Cases Division</div>
      <div class="step-ey" style="color:var(--jolly-red);">01 / 04 — Difficult Cases</div>
      <h2 class="step-h">Describe the case.</h2>
      <p class="step-sub">The more intelligence you provide, the better. Age, personality, what they already have, what makes them impossible to buy for.</p>
      <div class="dc-box">
        <div class="dc-label">Case Intelligence · Classified</div>
        <textarea class="dc-ta" id="dc-text" placeholder="e.g. My 14-year-old nephew who already has everything. Into gaming but don't know which games. His parents say he's 'hard to impress'..."></textarea>
      </div>
      <div class="err" id="err1b">Provide some case intelligence to proceed.</div>
      <button class="cta" onclick="next1b()">Proceed to interests →</button>
    </div>

    <!-- S2 INTERESTS -->
    <div class="step-wrap" id="s2">
      <div class="form-ref">Form 001 · Gift Assistance Request</div>
      <div class="step-ey" style="color:var(--cobalt);">02 / 04 — Interests</div>
      <h2 class="step-h">What are their interests?</h2>
      <p class="step-sub">Select up to four. The Department cross-references against current trend intelligence.</p>
      <div class="chips">
        <div class="chip" id="ch-creative" onclick="togChip(this,'creative')">Creative</div>
        <div class="chip" id="ch-outdoor" onclick="togChip(this,'outdoor')">Outdoor</div>
        <div class="chip" id="ch-tech" onclick="togChip(this,'tech')">Tech</div>
        <div class="chip" id="ch-reading" onclick="togChip(this,'reading')">Reading</div>
        <div class="chip" id="ch-music" onclick="togChip(this,'music')">Music</div>
        <div class="chip" id="ch-sport" onclick="togChip(this,'sport')">Sport</div>
        <div class="chip" id="ch-fashion" onclick="togChip(this,'fashion')">Fashion</div>
        <div class="chip" id="ch-collecting" onclick="togChip(this,'collecting')">Collecting</div>
        <div class="chip" id="ch-cooking" onclick="togChip(this,'cooking')">Cooking</div>
        <div class="chip" id="ch-travel" onclick="togChip(this,'travel')">Travel</div>
        <div class="chip" id="ch-gaming" onclick="togChip(this,'gaming')">Gaming</div>
        <div class="chip" id="ch-art" onclick="togChip(this,'art')">Art</div>
      </div>
      <div class="err" id="err2">Select at least one interest to proceed.</div>
      <button class="cta" onclick="next2()">Proceed to occasion →</button>
    </div>

    <!-- S2-BABY — replaces the generic interest chips, which don't apply to a 0–2
         year old. Stage is single-select (like age); Category caps at two, same
         toggle pattern as the interest chips but a shorter, gift-relevant list. -->
    <div class="step-wrap" id="s2-baby">
      <div class="form-ref">Form 001 · Gift Assistance Request</div>
      <div class="step-ey" style="color:var(--cobalt);">02 / 04 — About the Baby</div>
      <h2 class="step-h">A bit more detail.</h2>
      <p class="step-sub">Babies don't have interests yet — but stage and focus tell the Department everything it needs.</p>

      <div class="gender-label" style="margin-bottom:12px;">Stage</div>
      <div class="age-grid" id="baby-stage-grid" style="margin-bottom:28px;">
        <div class="age-btn" onclick="selBabyStage(this,'newborn')">
          <div><span class="ab-name">Newborn</span><span class="ab-range">0 – 6 months</span></div>
          <span class="ab-arr">→</span>
        </div>
        <div class="age-btn" onclick="selBabyStage(this,'sitting')">
          <div><span class="ab-name">Sitting / Rolling</span><span class="ab-range">6 – 12 months</span></div>
          <span class="ab-arr">→</span>
        </div>
        <div class="age-btn" onclick="selBabyStage(this,'cruising')">
          <div><span class="ab-name">Cruising / Early Walking</span><span class="ab-range">12 – 18 months</span></div>
          <span class="ab-arr">→</span>
        </div>
        <div class="age-btn" onclick="selBabyStage(this,'toddling')">
          <div><span class="ab-name">Toddling</span><span class="ab-range">18 – 24 months</span></div>
          <span class="ab-arr">→</span>
        </div>
      </div>

      <div id="baby-category-section">
        <div class="gender-label" style="margin-bottom:12px;">Category — select up to two</div>
        <div class="chips" id="baby-category-chips" style="margin-bottom:8px;">
          <div class="chip" id="bc-sensory" onclick="togBabyCat(this,'sensory')">Sensory &amp; Discovery</div>
          <div class="chip" id="bc-motor" onclick="togBabyCat(this,'motor')">Motor &amp; Movement</div>
          <div class="chip" id="bc-soothe" onclick="togBabyCat(this,'soothe')">Soothe &amp; Sleep</div>
          <div class="chip" id="bc-books" onclick="togBabyCat(this,'books')">Books &amp; Music</div>
          <div class="chip" id="bc-bath" onclick="togBabyCat(this,'bath')">Bath &amp; Bedtime</div>
          <div class="chip" id="bc-keepsake" onclick="togBabyCat(this,'keepsake')">Keepsake</div>
        </div>
      </div>

      <div class="err" id="err2baby" style="margin-top:20px;">Select a stage and at least one category to proceed.</div>
      <button class="cta" onclick="next2Baby()">Proceed to occasion →</button>
    </div>

    <!-- S3 OCCASION -->
    <div class="step-wrap" id="s3">
      <div class="form-ref">Form 001 · Gift Assistance Request</div>
      <div class="step-ey" style="color:var(--blush);">03 / 04 — Occasion</div>
      <h2 class="step-h">What is the occasion?</h2>
      <p class="step-sub">Context matters. The Department calibrates accordingly.</p>
      <div class="occ-grid">
        <div class="occ-btn" id="oc-birthday" onclick="selOcc(this,'birthday')">
          <span class="occ-name">Birthday</span>
          <span class="occ-sub">A celebration of them specifically</span>
        </div>
        <div class="occ-btn" id="oc-christmas" onclick="selOcc(this,'christmas')">
          <span class="occ-name">Christmas</span>
          <span class="occ-sub">The big one</span>
        </div>
        <div class="occ-btn" id="oc-justbecause" onclick="selOcc(this,'justbecause')">
          <span class="occ-name">Just because</span>
          <span class="occ-sub">No occasion required</span>
        </div>
        <div class="occ-btn" id="oc-graduation" onclick="selOcc(this,'graduation')">
          <span class="occ-name">Graduation</span>
          <span class="occ-sub">A milestone worth marking</span>
        </div>
        <div class="occ-btn" id="oc-newbaby" onclick="selOcc(this,'newbaby')">
          <span class="occ-name">New baby</span>
          <span class="occ-sub">For the tiniest new person</span>
        </div>
        <div class="occ-btn" id="oc-holiday" onclick="selOcc(this,'holiday')">
          <span class="occ-name">Holiday</span>
          <span class="occ-sub">Hanukkah, Easter + more</span>
        </div>
        <div class="occ-btn" id="oc-other" onclick="selOcc(this,'other')">
          <span class="occ-name">Other</span>
          <span class="occ-sub">The Department handles all cases</span>
        </div>
      </div>
      <div class="occ-other-wrap" id="occ-other-wrap">
        <span class="occ-other-label">Tell the Department what it is</span>
        <input class="occ-other-input" type="text" id="occ-other-text" placeholder="e.g. End of school year, half-birthday, moving house..." />
      </div>
      <div class="err" id="err3">Select an occasion to proceed.</div>
      <button class="cta" id="occ-continue-btn" style="margin-top:20px; display:none;" onclick="next3()">Proceed to budget →</button>
    </div>

    <!-- S4 BUDGET + INTEL -->
    <div class="step-wrap" id="s4">
      <div class="form-ref">Form 001 · Gift Assistance Request</div>
      <div class="step-ey" style="color:var(--jolly-red);">04 / 04 — Budget</div>
      <h2 class="step-h">What is the budget?</h2>
      <p class="step-sub">The Department operates across all price points with equal rigour.</p>
      <div class="bud-grid">
        <div class="bud-btn" onclick="selBud(this,'budget')">
          <span class="bud-price">Under $30</span>
          <span class="bud-desc">Thoughtful doesn't require extravagant.</span>
          <span class="bud-rank">Standard Issue</span>
        </div>
        <div class="bud-btn" onclick="selBud(this,'mid')">
          <span class="bud-price">$30 – $75</span>
          <span class="bud-desc">The sweet spot. Room for quality.</span>
          <span class="bud-rank">Field Grade</span>
        </div>
        <div class="bud-btn" onclick="selBud(this,'premium')">
          <span class="bud-price">$75 – $150</span>
          <span class="bud-desc">Considered and special.</span>
          <span class="bud-rank">Senior Officer</span>
        </div>
        <div class="bud-btn" onclick="selBud(this,'luxury')">
          <span class="bud-price">$150+</span>
          <span class="bud-desc">The best version of the best thing.</span>
          <span class="bud-rank">Head of Jolly</span>
        </div>
      </div>
      <div class="intel-wrap">
        <h3 class="intel-h">Additional Intelligence</h3>
        <span class="intel-sub">Optional but useful. What they already have, a current obsession, what not to get.</span>
        <textarea class="intel-ta" id="intel-text" placeholder="e.g. She's really into dinosaurs lately. He already has a Switch. They're obsessed with Taylor Swift..."></textarea>
      </div>
      <div class="err" id="err4">Select a budget to proceed.</div>
      <button class="cta" onclick="submitCase()">Submit case to the Department →</button>
    </div>

    <!-- LOADING — rebuilt v2.22.0. The video is a seamless 48s loop (silent, 4:5) so any
         length of wait looks right. Real timing lives in the panel under it: elapsed,
         the usual wait, and a bar that never claims more than it knows. The stamp is
         page-side so it lands exactly when the case resolves. -->
    <div class="step-wrap" id="s5">
      <div class="wait-grid">
        <div class="wait-copy">
          <div class="form-ref">Form 001 · Case Submitted</div>
          <h2 class="wait-h">The Department <em>is deliberating.</em></h2>
          <p class="wait-sub">Your case is being researched live against this morning's trend intelligence, then checked for age, price and stock. Most cases close in under a minute.</p>
          <div class="wait-brief" id="wait-brief"></div>
          <div class="wait-panel" role="status" aria-live="polite">
            <div class="wait-bar"><i id="wait-bar"></i></div>
            <div class="wait-time"><span><b id="wait-elapsed">0:00</b> elapsed</span><span id="wait-usual">Usually under a minute</span></div>
            <p class="wait-long" id="wait-long">This one is taking longer than usual. Detailed briefs earn extra research. The Department does not rush a good case.</p>
          </div>
        </div>
        <div class="wait-video" id="wait-video" aria-label="The Department reviewing gift exhibits">
          <div class="cf-stage" id="cf-stage" aria-hidden="true"></div>
          <svg class="wait-stamp" id="wait-stamp" viewBox="0 0 420 170" aria-hidden="true">
            <rect x="6" y="6" width="408" height="158" rx="8" fill="rgba(248,244,235,.9)" stroke="#C62828" stroke-width="6"/>
            <rect x="18" y="18" width="384" height="134" rx="3" fill="none" stroke="#C62828" stroke-width="2"/>
            <text x="210" y="50" font-family="IBM Plex Mono,monospace" font-weight="600" font-size="13" fill="#C62828" text-anchor="middle" letter-spacing="3">★ CASE RESOLVED ★</text>
            <text x="210" y="104" font-family="Playfair Display,Georgia,serif" font-weight="700" font-size="46" fill="#C62828" text-anchor="middle" textLength="350" lengthAdjust="spacingAndGlyphs">JOLLY APPROVED</text>
            <text x="210" y="135" font-family="IBM Plex Mono,monospace" font-weight="600" font-size="12" fill="#C62828" text-anchor="middle" letter-spacing="3">CLEARED FOR GIFTING</text>
          </svg>
        </div>
      </div>
    </div>

    <!-- RESULTS -->
    <div class="step-wrap" id="s6">
      <div class="res-meta" id="res-meta"></div>
      <h2 class="res-h">Case resolved. <em id="res-count">Five gifts cleared for consideration.</em></h2>
      <div class="res-pills" id="res-pills"></div>
      <div class="jolly-note">
        <span class="jolly-note-label">Jolly Note · From the Department</span>
        <span class="jolly-note-text" id="jolly-note-text">"The Department has reviewed the evidence. Proceed with complete confidence."</span>
      </div>
      <div class="gift-list" id="gift-list"></div>
      <button class="reset-btn" onclick="resetForm()">Open a new case →</button>
      <a href="#" class="log-banner-link" style="display:block; text-align:center; margin-top:16px;" onclick="openCaseLog();return false;">View All Your Cases →</a>
      <a href="#" class="log-banner-link" style="display:table; margin:14px auto 0; color:#2E58FF; border-color:#2E58FF;" onclick="openDossiers();return false;">View Your Dossiers →</a>
    </div>

    <!-- ERROR -->
    <div class="step-wrap" id="s-error">
      <div class="api-error">
        <h3 class="api-error-h">The Department encountered a complication.</h3>
        <p class="api-error-sub">Our analysts are standing by. Please try again — the Department does not give up on a case.</p>
      </div>
      <button class="cta" onclick="retryCase()">Try again →</button>
    </div>

    <!-- CASE LOG -->
    <div class="step-wrap" id="s-log">
      <div class="form-ref">Departmental Records</div>
      <h2 class="step-h" id="log-h">Your case log.</h2>
      <div class="log-tabs" role="tablist" aria-label="Your records">
        <button type="button" class="log-tab" role="tab" id="tab-cases" aria-selected="true" onclick="openCaseLog()">Cases<span class="n" id="tab-cases-n"></span></button>
        <button type="button" class="log-tab" role="tab" id="tab-dossiers" aria-selected="false" onclick="openDossiers()">Dossiers<span class="n" id="tab-dossiers-n"></span></button>
      </div>
      <p class="step-sub" id="log-sub">Every case you've opened, on file, on this device.</p>
      <div id="log-content"></div>
      <div id="dossier-content" hidden></div>
      <button class="reset-btn" onclick="resetForm()">Open a new case →</button>
    </div>

  </div>

  <div id="site-footer"></div>

</div>
<script src="/js/dossier.js"></script>
<script src="/js/include.js"></script>

<script>
  var state = { age: null, gender: null, babyStage: null, dc: '', ints: [], occ: null, occOther: '', bud: null, intel: '' };
  var curStep = 0;
  var FORMSPREE_ID = 'xrpbzlyl';

  function track(event, params) {
    if (typeof gtag !== 'undefined') gtag('event', event, params || {});
  }

  // SOURCE ATTRIBUTION — first-touch capture, same pattern as Maison Grey's mgSource().
  // Stored once per session (sessionStorage) so it survives moving between steps/pages
  // rather than re-capturing "departmentofjolly.com" as the referrer on every request.
  // Every Formspree submission below spreads this in, so every case on file shows
  // where that visitor actually came from.
  function djSource() {
    var KEY = 'doj_src';
    try {
      var existing = sessionStorage.getItem(KEY);
      if (existing) return JSON.parse(existing);
    } catch (e) {}
    var params = new URLSearchParams(window.location.search);
    var src = {
      referrer: document.referrer || '(direct)',
      landing_page: window.location.pathname + window.location.search,
      utm_source: params.get('utm_source') || '',
      utm_medium: params.get('utm_medium') || '',
      utm_campaign: params.get('utm_campaign') || '',
    };
    try { sessionStorage.setItem(KEY, JSON.stringify(src)); } catch (e) {}
    return src;
  }

  // BACK BUTTON (v2.24.0). Every screen of the finder lives inside /finder, so the browser
  // used to have no record of them: Back skipped the whole finder and left the site. Each
  // screen is now a history entry, so Back steps to the previous screen with the answers
  // still filled in. The waiting and error screens are never recorded.
  var NAV_SKIP = { s5: true, 's-error': true };
  var NAV_PROGRESS = { s1: 1, s1b: 1, s2: 2, 's2-baby': 2, s3: 3, s4: 4 };
  var navPopping = false;

  function showStep(id) {
    if (!navPopping && !NAV_SKIP[id]) {
      try {
        var cur = history.state && history.state.djStep;
        if (cur !== id) {
          if (!cur || NAV_SKIP[cur]) history.replaceState({ djStep: id }, '');
          else history.pushState({ djStep: id }, '');
        }
      } catch (e) {}
    }
    document.querySelectorAll('.step-wrap').forEach(function(s) { s.classList.remove('active'); });
    document.getElementById(id).classList.add('active');
    window.scrollTo(0, 0);
    document.querySelector('.finder-body').scrollTo(0, 0);
  }

  // ANCHOR — brings a newly revealed focal element into view without a full step
  // change. showStep() (above) already scrolls to the top of a step; this covers
  // the in-place reveals within a step — the optional gender row after age
  // selection, the "Other" occasion input — that appear below the fold and
  // otherwise strand the user with no visible next action. Accounts for the
  // sticky nav/progress bar height so the target isn't hidden underneath it.
  function anchorTo(el) {
    if (!el) return;
    requestAnimationFrame(function() {
      var sticky = document.querySelector('.sticky-top');
      var offset = (sticky ? sticky.getBoundingClientRect().height : 0) + 16;
      var rect = el.getBoundingClientRect();
      var current = window.pageYOffset || document.documentElement.scrollTop;
      var target = current + rect.top - offset;
      window.scrollTo({ top: Math.max(target, 0), behavior: 'smooth' });
    });
  }

  function setProgress(n) {
    var prog = document.getElementById('progress');
    if (n === 0) { prog.style.display = 'none'; return; }
    prog.style.display = 'flex';
    for (var i = 1; i <= 4; i++) {
      var ps = document.getElementById('ps' + i);
      ps.classList.remove('active', 'done');
      if (i < n) ps.classList.add('done');
      else if (i === n) ps.classList.add('active');
    }
    curStep = n;
  }

  function goBack(n) {
    if (n >= curStep || n < 1) return;
    setProgress(n);
    // Baby's Step 2 is a different screen (s2-baby) from every other band's (s2).
    if (n === 2 && state.age === 'baby') {
      showStep('s2-baby');
    } else {
      showStep('s' + n);
    }
    track('finder_step_back', { step: n });
  }

  function startFinder() {
    if (typeof cfPreload === 'function') cfPreload();
    setProgress(1);
    showStep('s1');
    track('finder_started');
  }

  // Baby and Difficult Cases skip the gender question entirely — it changes nothing
  // useful for 0–2, and Difficult Cases captures everything in free text instead.
  // Every other band reveals the optional gender row, and advances on that choice.
  function selAge(el, val) {
    document.querySelectorAll('.age-btn').forEach(function(b) { b.classList.remove('sel'); });
    el.classList.add('sel');
    state.age = val;
    state.gender = null;
    document.querySelectorAll('.gender-btn').forEach(function(b) { b.classList.remove('sel'); });
    track('case_opened', { age_band: val });

    var reveal = document.getElementById('gender-reveal');

    if (val === 'difficult') {
      reveal.classList.remove('show');
      setTimeout(function() {
        track('difficult_case_opened');
        showStep('s1b');
      }, 180);
      return;
    }

    if (val === 'baby') {
      reveal.classList.remove('show');
      setTimeout(function() {
        setProgress(2);
        showStep('s2-baby');
      }, 180);
      return;
    }

    reveal.classList.add('show');
    anchorTo(reveal);
  }

  function selGender(el, val) {
    document.querySelectorAll('.gender-btn').forEach(function(b) { b.classList.remove('sel'); });
    if (val) el.classList.add('sel');
    state.gender = val;
    track('gender_selected', { gender: val || 'skipped' });
    setTimeout(function() {
      document.getElementById('gender-reveal').classList.remove('show');
      setProgress(2);
      showStep('s2');
    }, 180);
  }

  function next1b() {
    var t = document.getElementById('dc-text').value.trim();
    if (!t) { document.getElementById('err1b').style.display = 'block'; return; }
    document.getElementById('err1b').style.display = 'none';
    state.dc = t;
    track('difficult_case_submitted', { detail_length: t.length });
    setProgress(2);
    showStep('s2');
  }

  function togChip(el, val) {
    if (el.classList.contains('sel')) {
      el.classList.remove('sel');
      state.ints = state.ints.filter(function(i) { return i !== val; });
    } else {
      if (state.ints.length >= 4) {
        var first = document.querySelector('.chip.sel');
        if (first) { first.classList.remove('sel'); state.ints.shift(); }
      }
      el.classList.add('sel');
      state.ints.push(val);
    }
  }

  function next2() {
    if (state.ints.length === 0) { document.getElementById('err2').style.display = 'block'; return; }
    document.getElementById('err2').style.display = 'none';
    track('interests_selected', { interests: state.ints.join(',') });
    setProgress(3);
    showStep('s3');
  }

  // Baby's Step 2 — Stage is single-select like age (no auto-advance, since
  // Category still needs picking); Category reuses the interest-chip toggle
  // pattern but caps at two instead of four and shares state.ints, so the
  // payload/results-pills code below doesn't need a parallel field.
  function selBabyStage(el, val) {
    document.querySelectorAll('#baby-stage-grid .age-btn').forEach(function(b) { b.classList.remove('sel'); });
    el.classList.add('sel');
    state.babyStage = val;
    track('baby_stage_selected', { stage: val });
    document.getElementById('err2baby').style.display = 'none';
    anchorTo(document.getElementById('baby-category-section'));
    maybeAdvanceBaby();
  }

  function togBabyCat(el, val) {
    if (el.classList.contains('sel')) {
      el.classList.remove('sel');
      state.ints = state.ints.filter(function(i) { return i !== val; });
    } else {
      if (state.ints.length >= 2) {
        var first = document.querySelector('#baby-category-chips .chip.sel');
        if (first) { first.classList.remove('sel'); state.ints.shift(); }
      }
      el.classList.add('sel');
      state.ints.push(val);
    }
    document.getElementById('err2baby').style.display = 'none';
    maybeAdvanceBaby();
  }

  // Auto-advances once both fields are complete (stage + the 2-category cap),
  // whichever order they're filled in. The Continue button stays as the
  // fallback for someone who deliberately picks only one category.
  function maybeAdvanceBaby() {
    if (state.babyStage && state.ints.length === 2) {
      setTimeout(function() { next2Baby(); }, 180);
    }
  }

  function next2Baby() {
    if (!state.babyStage || state.ints.length === 0) {
      document.getElementById('err2baby').style.display = 'block';
      return;
    }
    document.getElementById('err2baby').style.display = 'none';
    track('baby_details_confirmed', { stage: state.babyStage, categories: state.ints.join(',') });
    setProgress(3);
    showStep('s3');
  }

  function selOcc(el, val) {
    document.querySelectorAll('.occ-btn').forEach(function(b) { b.classList.remove('sel'); });
    el.classList.add('sel');
    state.occ = val;
    track('occasion_selected', { occasion: val });
    document.getElementById('err3').style.display = 'none';
    var wrap = document.getElementById('occ-other-wrap');
    var continueBtn = document.getElementById('occ-continue-btn');
    if (val === 'other') {
      wrap.style.display = 'block';
      continueBtn.style.display = 'block';
      anchorTo(continueBtn);
      document.getElementById('occ-other-text').focus({ preventScroll: true });
    } else {
      wrap.style.display = 'none';
      document.getElementById('occ-other-text').value = '';
      state.occOther = '';
      continueBtn.style.display = 'none';
      // Single-select — auto-advance, same pattern as age selection.
      setTimeout(function() { next3(); }, 180);
    }
  }

  function next3() {
    if (!state.occ) { document.getElementById('err3').style.display = 'block'; return; }
    document.getElementById('err3').style.display = 'none';
    if (state.occ === 'other') { state.occOther = document.getElementById('occ-other-text').value.trim(); }
    setProgress(4);
    showStep('s4');
  }

  function selBud(el, val) {
    document.querySelectorAll('.bud-btn').forEach(function(b) { b.classList.remove('sel'); });
    el.classList.add('sel');
    state.bud = val;
    track('budget_selected', { budget: val });
  }

  async function submitCase() {
    if (!state.bud) { document.getElementById('err4').style.display = 'block'; return; }
    document.getElementById('err4').style.display = 'none';
    state.intel = document.getElementById('intel-text').value.trim();

    track('finder_completed', { age_band: state.age, occasion: state.occ, budget: state.bud, interest_count: state.ints.length });

    // Clock starts the moment the case is submitted, so the elapsed figure below is the
    // wait as the visitor actually experiences it — the full deliberating screen, from
    // "Submit case" to gifts on screen.
    var caseStartedAt = Date.now();

    setProgress(0);
    showStep('s5');
    startWait();

    try {
      // Build recipient details — combine dc text and intel
      var recipientDetails = [state.dc, state.intel].filter(Boolean).join('\n\n');

      var payload = {
        ageBandId: state.age === 'difficult' ? 'teen' : state.age,
        gender: state.gender,
        babyStage: state.babyStage,
        interests: state.ints,
        occasion: state.occ === 'other' ? (state.occOther || 'other occasion') : state.occ,
        budget: state.bud,
        recipientDetails: recipientDetails,
        isDifficultCase: state.age === 'difficult',
      };

      // v2.23.1: never wait forever. The engine's own worst case is ~85s (a 30s live-search
      // cut-off plus a normal answer); past 100s something has failed, and the visitor
      // gets the retry screen rather than an endless clock.
      var caseCtrl = window.AbortController ? new AbortController() : null;
      var caseKill = caseCtrl ? setTimeout(function() { caseCtrl.abort(); }, 100000) : null;
      var res;
      try {
        res = await fetch('/api/finder', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
          signal: caseCtrl ? caseCtrl.signal : undefined,
        });
      } finally {
        if (caseKill) clearTimeout(caseKill);
      }

      // Read the body BEFORE checking res.ok — the server sends a real `detail`
      // message on failure (see api/finder.js's catch block), and throwing on
      // status alone was discarding it, leaving only "API error 500" in the
      // console with no way to tell what actually broke.
      var data = await res.json().catch(function() { return null; });
      if (!res.ok) {
        var serverDetail = (data && data.detail) ? data.detail : ('status ' + res.status);
        throw new Error(serverDetail);
      }
      var waitMs = Date.now() - caseStartedAt;
      await finishWait();

      // Full case logged to the console on every run, so the engine's working can be
      // inspected immediately rather than waiting on Formspree to populate.
      console.log(
        '%c[DoJ Finder] ' + (data.case_ref || 'case') + '%c · ' + (waitMs / 1000).toFixed(1) + 's · cache ' +
        (data.cache_used ? 'HIT' : 'MISS') + ' · ' + ((data.gifts || []).length) + ' gifts',
        'color:#224E3F;font-weight:bold', 'color:inherit'
      );
      console.table((data.gifts || []).map(function(g) {
        return { name: g.name, brand: g.brand, price: g.price, verified: !!g.price_verified,
                 retailer: g.where_to_buy, image: !!g.image_url };
      }));
      console.log('[DoJ Finder] Full case object:', data);

      renderResults(data);
      saveCaseToLog(data, waitMs);
      sendToFormspree(data, waitMs);
      track('finder_results_viewed', {
        case_ref: data.case_ref,
        gift_count: data.gifts ? data.gifts.length : 0,
        cache_used: !!data.cache_used,
        wait_seconds: Math.round(waitMs / 1000)
      });

    } catch (err) {
      // A failed case is worth timing too — a case that dies at 55 seconds is a timeout,
      // one that dies at 3 seconds is something else entirely.
      var failedAfterMs = Date.now() - caseStartedAt;
      stopWait();
      console.error('[DoJ Finder]', err, '(after ' + (failedAfterMs / 1000).toFixed(1) + 's)');
      track('finder_error', {
        message: String(err.message || err).slice(0, 150),
        age_band: state.age,
        wait_seconds: Math.round(failedAfterMs / 1000)
      });
      showStep('s-error');
    }
  }

  // FORMSPREE — fires only once the Department has actually returned a case, so every
  // submission carries the full picture: every question asked, every gift returned, and
  // the reasoning behind each one (why/trending_reason) — not just the four
  // inputs, which is all the previous version captured. Mirrors the Maison Grey
  // reporting pattern: full Q&A + source attribution + per-item reasoning, one row per
  // completed case, "(left blank)" placeholders so skipped is distinguishable from
  // never-asked.
  function sendToFormspree(data, waitMs) {
    var src = djSource();
    var body = new FormData();

    // Case identity
    body.append('case_ref', data.case_ref || '');
    body.append('cache_used', data.cache_used ? 'yes (daily trend cache)' : 'no (live search)');
    body.append('wait_seconds', waitMs ? (waitMs / 1000).toFixed(1) : '');
    body.append('jolly_note', data.jolly_note || '');

    // Every question asked
    body.append('age_band', state.age || '(left blank)');
    body.append('baby_stage', state.babyStage || '(left blank)');
    body.append('gender', state.gender || '(skipped)');
    body.append('interests_or_baby_categories', state.ints.join(', ') || '(left blank)');
    body.append('occasion', (state.occ === 'other' ? (state.occOther || 'other') : state.occ) || '(left blank)');
    body.append('budget', state.bud || '(left blank)');
    body.append('difficult_case_notes', state.dc || '(left blank)');
    body.append('additional_intel', state.intel || '(left blank)');

    // Every gift returned, with the full reasoning behind it — not just the name.
    (data.gifts || []).forEach(function(gift, i) {
      var n = i + 1;
      body.append('gift' + n + '_name', gift.name || '');
      body.append('gift' + n + '_brand', gift.brand || '');
      body.append('gift' + n + '_why', gift.why || '');
      body.append('gift' + n + '_trending_reason', gift.trending_reason || '');
      body.append('gift' + n + '_price', (gift.price || '') + (gift.price_verified ? ' (verified)' : ' (estimated)'));
      body.append('gift' + n + '_where_to_buy', gift.where_to_buy || '');
      body.append('gift' + n + '_categories', (gift.categories || []).join(', '));
      body.append('gift' + n + '_safety_flag', gift.safety_flag ? 'yes' : 'no');
    });

    // Source attribution — where this visitor actually came from
    body.append('referrer', src.referrer);
    body.append('landing_page', src.landing_page);
    body.append('utm_source', src.utm_source);
    body.append('utm_medium', src.utm_medium);
    body.append('utm_campaign', src.utm_campaign);

    body.append('submitted_at', new Date().toISOString());

    // A rejection from Formspree — quota, field count, spam filtering — resolves the
    // promise successfully, so .catch() alone never fired and a refused submission left
    // no trace anywhere. The status is now checked explicitly and a failure names itself
    // in the console with the response body.
    fetch('https://formspree.io/f/' + FORMSPREE_ID, {
      method: 'POST', body: body, headers: { 'Accept': 'application/json' }
    }).then(function(res) {
      if (!res.ok) {
        res.text().then(function(t) {
          console.warn('[Formspree] REJECTED — status ' + res.status + ' —', t);
        });
        return;
      }
      console.log('[Formspree] case filed —', data.case_ref, '· wait ' + (waitMs ? (waitMs / 1000).toFixed(1) + 's' : 'not recorded'));
    }).catch(function(e) { console.warn('[Formspree] network error', e); });
  }

  function renderResults(data) {
    var budLabels = { budget: 'Standard Issue', mid: 'Field Grade', premium: 'Senior Officer', luxury: 'Head of Jolly' };
    var ageLabels = { baby: 'Baby Affairs', kid: 'Kid Affairs', tween: 'Tween Affairs', teen: 'Teen Affairs', difficult: 'Difficult Cases' };

    document.getElementById('res-meta').textContent = [
      data.case_ref,
      ageLabels[state.age] || state.age,
      state.occ === 'other' ? (state.occOther || 'other') : state.occ,
      budLabels[state.bud] || state.bud
    ].filter(Boolean).join(' · ').toUpperCase();

    var intLabels = { creative:'Creative', outdoor:'Outdoor', tech:'Tech', reading:'Reading', music:'Music', sport:'Sport', fashion:'Fashion', collecting:'Collecting', cooking:'Cooking', travel:'Travel', gaming:'Gaming', art:'Art', sensory:'Sensory & Discovery', motor:'Motor & Movement', soothe:'Soothe & Sleep', books:'Books & Music', bath:'Bath & Bedtime', keepsake:'Keepsake' };
    var babyStageLabels = { newborn:'Newborn (0–6mo)', sitting:'Sitting/Rolling (6–12mo)', cruising:'Cruising/Early Walking (12–18mo)', toddling:'Toddling (18–24mo)' };
    var pillsHtml = '<span class="res-pill">' + (ageLabels[state.age] || state.age) + '</span>';
    if (state.age === 'baby' && state.babyStage) {
      pillsHtml += '<span class="res-pill">' + (babyStageLabels[state.babyStage] || state.babyStage) + '</span>';
    }
    if (state.gender) {
      pillsHtml += '<span class="res-pill">' + (state.gender === 'girl' ? 'Girl' : 'Boy') + '</span>';
    }
    (state.ints || []).forEach(function(i) {
      pillsHtml += '<span class="res-pill res-pill-int">' + (intLabels[i] || i) + '</span>';
    });
    pillsHtml += '<span class="res-pill">' + (state.occ === 'other' ? (state.occOther || 'Other') : state.occ) + '</span>';
    pillsHtml += '<span class="res-pill">' + (budLabels[state.bud] || state.bud) + '</span>';
    document.getElementById('res-pills').innerHTML = pillsHtml;

    var count = data.gifts ? data.gifts.length : 0;
    var countWords = ['Zero','One','Two','Three','Four','Five','Six'];
    document.getElementById('res-count').textContent = (countWords[count] || count) + ' gift' + (count !== 1 ? 's' : '') + ' cleared for consideration.';

    if (data.jolly_note) {
      document.getElementById('jolly-note-text').textContent = data.jolly_note;
    }

    var list = document.getElementById('gift-list');
    list.innerHTML = '';
    var handNotes = ['they\'ll love this one', 'a proper gift'];

    (data.gifts || []).forEach(function(gift, i) {
      // Fix brand/name duplication — don't prepend brand if name already contains it
      var displayName = gift.name;
      if (gift.brand && !gift.name.toLowerCase().includes(gift.brand.toLowerCase())) {
        displayName = gift.brand + ' — ' + gift.name;
      }

      var searchUrl = 'https://www.google.com/search?q=' + encodeURIComponent(gift.search_term || displayName);
      var hand = (i === 0 || i === 3) ? '<span class="gift-hand">' + handNotes[i === 0 ? 0 : 1] + '</span>' : '';

      var card = document.createElement('div');
      card.className = 'gift-card';
      card.setAttribute('data-case-ref', data.case_ref || '');
      // The image box is always rendered so every card in a row starts at the same
      // place. A missing URL — or one that fails to load — falls back to the
      // placeholder rather than collapsing the box and knocking the row out of line.
      var imgHtml = gift.image_url
        ? '<div class="gift-img-wrap"><img src="' + gift.image_url + '" alt="' + displayName.replace(/"/g,'') + '" loading="lazy" onerror="this.closest(\'.gift-img-wrap\').classList.add(\'gift-img-none\'); this.style.display=\'none\';"></div>'
        : '<div class="gift-img-wrap gift-img-none"></div>';
      card.innerHTML =
        imgHtml +
        '<div class="gift-card-body">' +
          '<div class="gift-num">Item ' + String(i+1).padStart(2,'0') + ' of ' + String(count).padStart(2,'0') + ' · ' + (data.case_ref || '') + '</div>' +
          '<div class="gift-name">' + displayName + '</div>' +
          '<div class="gift-why">' + gift.why + '</div>' +
          (gift.trending_reason ? '<div class="gift-trending">' + gift.trending_reason + '</div>' : '') +
          hand +
        '</div>' +
        '<div class="gift-footer">' +
          '<div class="gift-where">' + (gift.where_to_buy || '') + '</div>' +
          '<div class="gift-right">' +
            '<span class="gift-price">' + (gift.price || '') + (gift.price_verified ? '' : '<span style="font-size:10px; color:var(--ink-muted); font-family:var(--mono); font-weight:600; margin-left:4px;">est.</span>') + '</span>' +
            '<span class="gift-stamp">Jolly Approved</span>' +
          '</div>' +
        '</div>' +
        '<div class="gift-buy-wrap">' +
          '<a class="gift-buy" href="' + searchUrl + '" target="_blank" rel="noopener" onclick="track(\'gift_click\',{gift_name:\'' + displayName.replace(/'/g,'').replace(/"/g,'') + '\',gift_price:\'' + (gift.price || '').replace(/'/g,'') + '\',retailer:\'' + (gift.where_to_buy || '').replace(/'/g,'') + '\',link_type:\'google_search\',position:' + (i+1) + ',case_ref:\'' + (data.case_ref || '').replace(/'/g,'') + '\'})">Find this gift →</a>' +
        '</div>';
      list.appendChild(card);
    });

    if (data.safety_note) {
      var note = document.createElement('p');
      note.style.cssText = 'font-family:var(--mono);font-size:11px;color:var(--ink-muted);margin-bottom:16px;line-height:1.6;letter-spacing:0.5px;';
      note.textContent = data.safety_note;
      list.appendChild(note);
    }

    showStep('s6');
  }

  function retryCase() { setProgress(4); showStep('s4'); }

  function resetForm() {
    state = { age: null, gender: null, babyStage: null, dc: '', ints: [], occ: null, occOther: '', bud: null, intel: '' };
    document.querySelectorAll('.sel').forEach(function(e) { e.classList.remove('sel'); });
    document.getElementById('dc-text').value = '';
    document.getElementById('intel-text').value = '';
    document.getElementById('occ-other-text').value = '';
    document.getElementById('occ-other-wrap').style.display = 'none';
    document.getElementById('gender-reveal').classList.remove('show');
    document.getElementById('gift-list').innerHTML = '';
    track('finder_reset');
    setProgress(0);
    showStep('s0');
    checkCaseLogBanner();
  }

  /* ===== CASE LOG ===== */
  var CASE_LOG_KEY = 'doj_case_log';
  var CASE_LOG_MAX = 20;

  function loadCaseLog() {
    try {
      var raw = localStorage.getItem(CASE_LOG_KEY);
      return raw ? JSON.parse(raw) : [];
    } catch (e) {
      console.warn('[DoJ Case Log] read failed', e);
      return [];
    }
  }

  function saveCaseToLog(data, waitMs) {
    try {
      var log = loadCaseLog();
      var budLabels = { budget: 'Standard Issue', mid: 'Field Grade', premium: 'Senior Officer', luxury: 'Head of Jolly' };
      var ageLabels = { baby: 'Baby Affairs', kid: 'Kid Affairs', tween: 'Tween Affairs', teen: 'Teen Affairs', difficult: 'Difficult Cases' };
      var entry = {
        case_ref: data.case_ref || ('DOJ-' + Date.now()),
        saved_at: new Date().toISOString(),
        age_label: ageLabels[state.age] || state.age,
        occasion_label: state.occ === 'other' ? (state.occOther || 'other') : state.occ,
        budget_label: budLabels[state.bud] || state.bud,
        gift_count: data.gifts ? data.gifts.length : 0,
        // Stored alongside the case so the console dump shows performance next to the
        // result — wait time and cache state together are the whole picture.
        wait_seconds: waitMs ? +(waitMs / 1000).toFixed(1) : null,
        data: data,
        stateSnapshot: { age: state.age, gender: state.gender, babyStage: state.babyStage, occ: state.occ, occOther: state.occOther, bud: state.bud, ints: state.ints.slice() }
      };
      log.unshift(entry);
      if (log.length > CASE_LOG_MAX) log = log.slice(0, CASE_LOG_MAX);
      localStorage.setItem(CASE_LOG_KEY, JSON.stringify(log));
      track('case_saved', { case_ref: entry.case_ref, gift_count: entry.gift_count });
    } catch (e) {
      console.warn('[DoJ Case Log] save failed — likely private browsing or storage full', e);
    }
  }

  function checkCaseLogBanner() {
    var log = loadCaseLog();
    var nd = window.JollyDossier ? window.JollyDossier.count() : 0;
    var banner = document.getElementById('intro-log-banner');
    if (!banner) return;
    if (log.length > 0 || nd > 0) {
      var bits = [];
      if (log.length) bits.push(log.length + ' case' + (log.length !== 1 ? 's' : '') + ' on file');
      if (nd) bits.push(nd + ' Dossier' + (nd !== 1 ? 's' : ''));
      document.getElementById('intro-log-text').textContent = bits.join(' · ') + '.';
      document.getElementById('intro-log-cases').style.display = log.length ? '' : 'none';
      document.getElementById('intro-log-dossiers').style.display = nd ? '' : 'none';
      banner.style.display = 'block';
    } else {
      banner.style.display = 'none';
    }
  }

  // Your Cases has two tabs: Cases (this file's case log) and Dossiers (js/dossier.js).
  function setLogTab(which) {
    var dossiers = which === 'dossiers';
    document.getElementById('tab-cases').setAttribute('aria-selected', dossiers ? 'false' : 'true');
    document.getElementById('tab-dossiers').setAttribute('aria-selected', dossiers ? 'true' : 'false');
    document.getElementById('log-content').hidden = dossiers;
    document.getElementById('dossier-content').hidden = !dossiers;
    document.getElementById('s-log').classList.toggle('wide', dossiers);
    document.getElementById('log-h').textContent = dossiers ? 'Your Dossiers.' : 'Your case log.';
    var nc = loadCaseLog().length, nd = window.JollyDossier ? window.JollyDossier.count() : 0;
    document.getElementById('tab-cases-n').textContent = nc ? nc : '';
    document.getElementById('tab-dossiers-n').textContent = nd ? nd : '';
  }

  function openDossiers() {
    setLogTab('dossiers');
    document.getElementById('log-sub').textContent = 'Gifts filed by child or by occasion. Tap a Dossier to open it.';
    if (window.JollyDossier) {
      window.JollyDossier.render(document.getElementById('dossier-content'));
    } else {
      document.getElementById('dossier-content').innerHTML = '<p class="log-empty">The Dossier cabinet is still being unlocked. Refresh the page in a moment.</p>';
    }
    track('dossiers_opened', { dossier_count: window.JollyDossier ? window.JollyDossier.count() : 0 });
    setProgress(0);
    showStep('s-log');
  }

  function openCaseLog() {
    setLogTab('cases');
    var log = loadCaseLog();
    track('case_log_viewed', { case_count: log.length });
    var content = document.getElementById('log-content');
    var sub = document.getElementById('log-sub');

    if (log.length === 0) {
      sub.textContent = 'Nothing on file yet.';
      content.innerHTML = '<p class="log-empty">Once you open a case, it\'s saved here automatically — on this device only, no account required. Come back any time to see what the Department found for you.</p>';
      setProgress(0);
      showStep('s-log');
      return;
    }

    sub.textContent = log.length + ' case' + (log.length !== 1 ? 's' : '') + ' on file, most recent first.';
    var html = '<div class="log-list">';
    log.forEach(function(entry, i) {
      var d = new Date(entry.saved_at);
      var dateStr = d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
      html +=
        '<div class="log-item" onclick="openLoggedCase(' + i + ')">' +
          '<div class="log-item-top">' +
            '<span class="log-item-ref">' + entry.case_ref + '</span>' +
            '<span class="log-item-date">' + dateStr + '</span>' +
          '</div>' +
          '<div class="log-item-summary">' + [entry.age_label, entry.occasion_label, entry.budget_label].filter(Boolean).join(' · ') + '</div>' +
          '<div class="log-item-count">' + entry.gift_count + ' gift' + (entry.gift_count !== 1 ? 's' : '') + ' on file →</div>' +
        '</div>';
    });
    html += '</div><button class="log-clear" onclick="clearCaseLog()">Clear case log</button>';
    content.innerHTML = html;
    setLogTab('cases');
    setProgress(0);
    showStep('s-log');
  }

  function openLoggedCase(i) {
    var log = loadCaseLog();
    var entry = log[i];
    if (!entry) return;
    if (entry.stateSnapshot) {
      state.age = entry.stateSnapshot.age;
      state.occ = entry.stateSnapshot.occ;
      state.occOther = entry.stateSnapshot.occOther;
      state.bud = entry.stateSnapshot.bud;
      state.ints = entry.stateSnapshot.ints || [];
      state.gender = entry.stateSnapshot.gender || null;
      state.babyStage = entry.stateSnapshot.babyStage || null;
    }
    track('case_log_reopened', { case_ref: entry.case_ref });
    renderResults(entry.data);
  }

  function clearCaseLog() {
    if (!confirm('Clear your entire case log? This cannot be undone.')) return;
    localStorage.removeItem(CASE_LOG_KEY);
    track('case_log_cleared');
    checkCaseLogBanner();
    showStep('s0');
  }

  // Check for existing cases on initial page load
  checkCaseLogBanner();

  try { if (!history.state || !history.state.djStep) history.replaceState({ djStep: 's0' }, ''); } catch (e) {}
  window.addEventListener('popstate', function(e) {
    var id = e.state && e.state.djStep;
    if (!id || !document.getElementById(id)) return;
    if (typeof stopWait === 'function') stopWait();
    // Results with nothing to show (after a reset) go back to the start instead.
    if (id === 's6' && !document.getElementById('gift-list').children.length) id = 's0';
    if (id === 's-log') {
      var onDossiers = document.getElementById('tab-dossiers').getAttribute('aria-selected') === 'true';
      navPopping = true; try { onDossiers ? openDossiers() : openCaseLog(); } finally { navPopping = false; }
      return;
    }
    navPopping = true;
    try { setProgress(NAV_PROGRESS[id] || 0); showStep(id); } finally { navPopping = false; }
    track('finder_back_button', { to: id });
  });

  // DEEP LINK for a site-wide "Your Cases" nav entry. The case log lives in this page's
  // localStorage, so a nav link on any other page points at /finder?view=cases and lands
  // the visitor straight in the log rather than on the intro screen. Harmless until that
  // nav item exists.
  (function() {
    try {
      var view = new URLSearchParams(window.location.search).get('view');
      if (view === 'cases') openCaseLog();
      else if (view === 'dossiers') openDossiers();
    } catch (e) {}
  })();

  /* ===== LIVE CASE FILE (v2.23.0) =====
     The deliberation animation, built in the page instead of a video so every word is
     live type and every photo is the real file. Designed at 1080x1350 and scaled to fit
     #wait-video. A 48s seamless loop: six exhibits arrive, are reviewed and stamped,
     the bulletins run underneath, then the file clears and starts again. Runs only while
     the wait screen is showing. */
  var CF_L = 48, CF_STEP = 6.2, CF_ARR = 0.5;
  var CF_EX = [
    { img:'/images/tile-teen.webp',          n:'Low-top sneakers',       ok:true,  st:'CLEARED · TEEN AFFAIRS' },
    { img:'/images/tile-kid.webp',           n:'Magnetic tiles',         ok:true,  st:'CLEARED · KID AFFAIRS' },
    { img:'/images/tile-baby.webp',          n:'Plush bunny',            ok:false, st:'SENT TO BABY AFFAIRS' },
    { img:'/images/tile-tween.webp',         n:'Quad roller skates',     ok:true,  st:'CLEARED · TWEEN AFFAIRS' },
    { img:'/images/cf-exhibit-ridecar.webp', n:'Ride-on car',            ok:false, st:'SENT TO BABY AFFAIRS' },
    { img:'/images/bulletin-02.jpg',          n:'Squishy cube',           ok:true,  st:'CLEARED · TRENDING' }
  ];
  var CF_BUL = [
    'Opening case file.',
    'Cross-referencing trend intelligence.',
    'Consulting the age appropriateness index.',
    'Forwarding to the Subcommittee on Things That Light Up.',
    'Filtering for things that are actually good.',
    'Checking the register of gifts previously described as “boring”.',
    'One analyst has strong feelings about this. We are hearing him out.',
    'The analyst has been thanked for his contribution.',
    'Confirming no item has been described as “educational” in a threatening manner.',
    'Requesting sign-off from the Deputy Under-Secretary for Novelty.',
    'The Head of Jolly has been located. She is reviewing.',
    'The Head of Jolly has raised an eyebrow. This is considered favourable.'
  ];
  var cfEl = null, cfRaf = null, cfT0 = 0, cfLastBul = -1;

  function cfBuild() {
    var stage = document.getElementById('cf-stage');
    if (!stage || cfEl) return stage;
    var ex = '';
    CF_EX.forEach(function(e, i) {
      ex += '<div class="cf-ex"><div class="cf-ph"><img src="' + e.img + '" alt="" decoding="async"><div class="cf-scan"></div></div>' +
            '<div class="cf-hd"><span class="cf-cap">EXHIBIT ' + 'ABCDEF'[i] + '</span><span class="cf-no">No. 0' + (i + 1) + '</span></div>' +
            '<div class="cf-nm">' + e.n.replace('&', '&amp;') + '</div><div class="cf-st">AWAITING REVIEW</div>' +
            '<div class="cf-stamp" style="color:' + (e.ok ? '#224E3F' : '#C62828') + '">' + (e.ok ? 'SHORTLISTED' : 'NOT TODAY') + '</div></div>';
    });
    stage.innerHTML =
      '<div class="cf-frame"></div>' +
      '<div class="cf-top"><span class="l">Form 001 · Case in deliberation</span><span class="r"><i></i>In session</span></div>' +
      '<div class="cf-folder"><div class="cf-tab">CASE FILE · 0 OF 6 REVIEWED</div><div class="cf-body"><div class="cf-grid">' + ex + '</div></div></div>' +
      '<svg class="cf-seal" viewBox="0 0 200 200"><g class="cf-ring"><circle cx="100" cy="100" r="92" fill="#F8F4EB" stroke="#C62828" stroke-width="3"/><circle cx="100" cy="100" r="78" fill="none" stroke="#C62828" stroke-width="1"/>' +
        '<defs><path id="cf-arc" d="M100,100 m-85,0 a85,85 0 1,1 170,0 a85,85 0 1,1 -170,0"/></defs>' +
        '<text font-family="IBM Plex Mono,monospace" font-size="10" fill="#C62828" font-weight="600"><textPath href="#cf-arc" textLength="520" lengthAdjust="spacingAndGlyphs">DEPT. OF JOLLY · EST. 2026 · OFFICIAL FINDING · CLEARED FOR GIFTING ·</textPath></text></g>' +
        '<circle cx="100" cy="100" r="64" fill="rgba(198,40,40,0.06)"/>' +
        '<text x="100" y="94" font-family="Playfair Display,Georgia,serif" font-weight="700" font-size="21" fill="#C62828" text-anchor="middle">JOLLY</text>' +
        '<text x="100" y="118" font-family="Playfair Display,Georgia,serif" font-weight="700" font-size="21" fill="#C62828" text-anchor="middle">APPROVED</text>' +
        '<text x="100" y="140" font-size="16" fill="#C62828" text-anchor="middle">★</text></svg>' +
      '<div class="cf-blabel"></div><div class="cf-bul"></div>';
    cfEl = {
      dot: stage.querySelector('.cf-top .r i'),
      ring: stage.querySelector('.cf-ring'),
      tab: stage.querySelector('.cf-tab'),
      ex: [].slice.call(stage.querySelectorAll('.cf-ex')),
      blabel: stage.querySelector('.cf-blabel'),
      bul: stage.querySelector('.cf-bul')
    };
    cfEl.ex.forEach(function(el) {
      el._st = el.querySelector('.cf-st'); el._scan = el.querySelector('.cf-scan'); el._stamp = el.querySelector('.cf-stamp');
    });
    return stage;
  }

  function cfFit() {
    var box = document.getElementById('wait-video'), stage = document.getElementById('cf-stage');
    if (box && stage && box.clientWidth) stage.style.transform = 'scale(' + (box.clientWidth / 1080) + ')';
  }

  function cfClamp(x) { return Math.max(0, Math.min(1, x)); }
  function cfEase(x) { x = cfClamp(x); return 1 - Math.pow(1 - x, 3); }

  function cfRender(t) {
    if (!cfEl) return;
    t = ((t % CF_L) + CF_L) % CF_L;
    var reset = 1 - cfEase((t - (CF_L - 1.4)) / 0.8);
    cfEl.dot.style.opacity = (Math.floor(t * 1.25) % 2) ? .25 : 1;
    cfEl.ring.setAttribute('transform', 'rotate(' + (t * 360 / CF_L).toFixed(2) + ' 100 100)');
    var done = 0;
    CF_EX.forEach(function(e, i) {
      var el = cfEl.ex[i], a = CF_ARR + i * CF_STEP, r0 = a + 0.6, r1 = a + 3.4, s = a + 3.5;
      var ar = cfEase((t - a) / 0.5), tilt = [-2, 1.5, -1, 2, -1.5, 1][i];
      el.style.opacity = ar * reset;
      el.style.transform = 'translateY(' + (-60 * (1 - ar)).toFixed(1) + 'px) rotate(' + (tilt * ar).toFixed(2) + 'deg)';
      var label, colour;
      if (t < r0) { label = 'AWAITING REVIEW'; colour = '#6a6058'; el._scan.style.opacity = 0; }
      else if (t < s) {
        label = 'UNDER REVIEW' + ' ···'.slice(0, 1 + Math.floor(t * 3) % 4); colour = '#2E58FF';
        el._scan.style.top = ((((t - r0) / 1.4) % 1) * 196).toFixed(1) + 'px';
        el._scan.style.opacity = 1 - cfEase((t - r1 + 0.1) / 0.3);
      } else { label = e.st; colour = e.ok ? '#224E3F' : '#C62828'; el._scan.style.opacity = 0; if (t < CF_L - 1.0) done++; }
      if (el._st.textContent !== label) el._st.textContent = label;
      el._st.style.color = colour;
      var sl = t - s;
      if (sl < 0) el._stamp.style.opacity = 0;
      else {
        el._stamp.style.opacity = Math.min(1, sl / 0.06) * 0.92;
        el._stamp.style.transform = 'translate(-50%,-50%) rotate(' + (e.ok ? -12 : 9) + 'deg) scale(' + (2.2 - 1.2 * cfEase(sl / 0.18)).toFixed(3) + ')';
      }
    });
    var tab = 'CASE FILE · ' + done + ' OF 6 REVIEWED';
    if (cfEl.tab.textContent !== tab) cfEl.tab.textContent = tab;
    var BL = CF_L / CF_BUL.length, k = Math.min(CF_BUL.length - 1, Math.floor(t / BL)), lt = t - k * BL;
    if (k !== cfLastBul) {
      cfEl.bul.textContent = CF_BUL[k];
      cfEl.blabel.textContent = 'DEPARTMENTAL BULLETIN ' + String(k + 1).padStart(2, '0') + ' / ' + CF_BUL.length;
      cfLastBul = k;
    }
    cfEl.bul.style.opacity = cfEase(lt / 0.35) * (1 - cfEase((lt - (BL - 0.35)) / 0.35));
    cfEl.bul.style.transform = 'translateY(' + (14 * (1 - cfEase(lt / 0.4))).toFixed(1) + 'px)';
  }

  function cfStart() {
    cfStop();
    cfBuild(); cfFit(); cfLastBul = -1;
    var still = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (still) { cfRender(40); return; }   // a finished file, standing still
    cfT0 = performance.now();
    (function frame(now) {
      cfRender((now - cfT0) / 1000);
      cfRaf = requestAnimationFrame(frame);
    })(cfT0);
  }

  function cfStop() { if (cfRaf) { cancelAnimationFrame(cfRaf); cfRaf = null; } }

  window.addEventListener('resize', cfFit);
  if (window.ResizeObserver) { try { new ResizeObserver(cfFit).observe(document.getElementById('wait-video')); } catch (e) {} }
  // Fetch the exhibit photos once a case is opened, while the visitor answers the four
  // questions, so the file never shows an empty frame. Landing-only visitors pay nothing.
  var cfPreloaded = false;
  function cfPreload() { if (cfPreloaded) return; cfPreloaded = true; CF_EX.forEach(function(e) { var i = new Image(); i.src = e.img; }); }

  /* ===== WAIT SCREEN (v2.22.0) =====
     The live case file (below) is a seamless 48s loop, so it looks right for
     any length of case. Everything that has to be TRUE lives in the page: the brief
     recap, elapsed time, and a bar that runs to 90% across the usual wait, then creeps
     and never claims to be finished until the case actually is. The stamp lands on
     resolution, then results take over. Tune the WAIT_* constants as engine speed
     changes (wait_seconds is in every Formspree row). */
  var WAIT_USUAL = 50;     // seconds — the bar reaches 90% here
  var WAIT_LONG  = 70;     // seconds — "taking longer than usual" note appears
  var WAIT_STAMP_MS = 900; // how long the stamp sits before results appear
  var waitTimer = null, waitStarted = 0;

  function briefPills() {
    var age = { baby:'Baby Affairs', kid:'Kid Affairs', tween:'Tween Affairs', teen:'Teen Affairs', difficult:'Difficult Case' };
    var bud = { budget:'Under $30', mid:'$30–$75', premium:'$75–$150', luxury:'$150+' };
    var occ = { birthday:'Birthday', christmas:'Christmas', justbecause:'Just because', graduation:'Graduation', newbaby:'New baby', holiday:'Holiday' };
    var ints = { creative:'Creative', outdoor:'Outdoor', tech:'Tech', reading:'Reading', music:'Music', sport:'Sport', fashion:'Fashion', collecting:'Collecting', cooking:'Cooking', travel:'Travel', gaming:'Gaming', art:'Art', sensory:'Sensory', motor:'Motor', soothe:'Soothe & Sleep', books:'Books & Music', bath:'Bath & Bedtime', keepsake:'Keepsake' };
    function esc(t) { return String(t).replace(/[&<>"]/g, function(c) { return { '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;' }[c]; }); }
    var p = [age[state.age] || state.age];
    if (state.gender) p.push(state.gender === 'girl' ? 'Girl' : 'Boy');
    (state.ints || []).forEach(function(i) { p.push(ints[i] || i); });
    p.push(state.occ === 'other' ? (state.occOther || 'Other') : (occ[state.occ] || state.occ));
    p.push(bud[state.bud] || state.bud);
    return '<span class="wait-brief-label">Your brief</span>' + p.filter(Boolean).map(function(x, i) {
      var isInt = (state.ints || []).some(function(k) { return (ints[k] || k) === x; });
      return '<span class="res-pill' + (isInt ? ' res-pill-int' : '') + '">' + esc(x) + '</span>';
    }).join('');
  }

  function fmtClock(s) { s = Math.floor(s); return Math.floor(s / 60) + ':' + (s % 60 < 10 ? '0' : '') + (s % 60); }

  function waitProgress(sec) {
    if (sec <= WAIT_USUAL) return 0.9 * sec / WAIT_USUAL;
    return 0.9 + 0.08 * (1 - Math.exp(-(sec - WAIT_USUAL) / 40)); // creeps toward 98%, never 100%
  }

  function startWait() {
    stopWait();
    document.getElementById('wait-brief').innerHTML = briefPills();
    var stamp = document.getElementById('wait-stamp');
    stamp.classList.remove('slam');
    document.getElementById('wait-video').classList.remove('thud');
    document.getElementById('wait-long').classList.remove('show');
    document.getElementById('wait-usual').textContent = 'Usually under a minute';
    cfStart();
    waitStarted = Date.now();
    function tick() {
      var sec = (Date.now() - waitStarted) / 1000;
      document.getElementById('wait-elapsed').textContent = fmtClock(sec);
      document.getElementById('wait-bar').style.width = (waitProgress(sec) * 100).toFixed(1) + '%';
      if (sec >= WAIT_LONG) {
        document.getElementById('wait-long').classList.add('show');
        document.getElementById('wait-usual').textContent = 'Nearly there';
      }
    }
    tick();
    waitTimer = setInterval(tick, 500);
  }

  function stopWait() {
    if (waitTimer) { clearInterval(waitTimer); waitTimer = null; }
    cfStop();
  }

  // Bar to 100%, stamp lands, a beat to enjoy it, then the results screen.
  function finishWait() {
    if (waitTimer) { clearInterval(waitTimer); waitTimer = null; }
    document.getElementById('wait-bar').style.width = '100%';
    document.getElementById('wait-usual').textContent = 'Case resolved';
    document.getElementById('wait-long').classList.remove('show');
    document.getElementById('wait-stamp').classList.add('slam');
    document.getElementById('wait-video').classList.add('thud');
    return new Promise(function(resolve) {
      setTimeout(function() { stopWait(); resolve(); }, WAIT_STAMP_MS);
    });
  }
</script>
<script src="/js/amend.js" defer></script>
</body>
</html>