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

        :root {
            --brand:       #2d4470;
            --brand-mid:   #4a6fa5;
            --brand-light: #f0f4f9;
            --brand-dark:  #141f38;

            /* Gradient stops for the primary surfaces. These were hardcoded
               blues, which meant a theme could tint accents but never change
               the hero, the primary button or the footer — the three things
               that actually decide what a site looks like. Defaults are the
               previous values, so untouched sites render identically. */
            --grad-from:   #2d5293;
            --grad-to:     #1e2f5e;
            --hero-from:   #0a1628;
            --hero-mid:    #0f1e3a;
            --hero-to:     #141d38;
            --footer-from: #090f1e;
            --footer-mid:  #0d1930;
            --footer-to:   #101828;
            /* Header foreground. The header is its own colour context: most
               themes paint it near-black while the page below stays light,
               so anything inside it that reached for --n700 or --brand came
               out invisible. A theme with a light header (industrial,
               minimalist) overrides these three and everything follows. */
            --header-fg:      #ffffff;
            --header-fg-dim:  rgba(255,255,255,.78);
            --header-fg-mute: rgba(255,255,255,.55);
            --header-hover:   rgba(255,255,255,.10);
            --header-line:    rgba(255,255,255,.16);

            --n0:   #ffffff;
            --n50:  #fafaf9;
            --n100: #f4f3f0;
            --n200: #e8e6e1;
            --n300: #d0cdc8;
            --n400: #a8a49d;
            --n500: #7a756e;
            --n600: #5a5650;
            --n700: #3d3a35;
            --n800: #252320;
            --n900: #111010;
            --ok:   #16a34a;
            --ok-l: #dcfce7;
            --warn: #c47b00;
            --accent:   #818cf8;
            --accent-d: #4f46e5;
            --accent-l: rgba(129,140,248,.1);
            --fd:   'Syne', sans-serif;
            --fb:   'DM Sans', sans-serif;
            --fm:   'IBM Plex Mono', monospace;
            --max-w: 1200px;
            --radius: 14px;
            --radius-sm: 8px;
            --radius-lg: 20px;
            /* Elevation */
            --s0: 0 1px 2px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
            --s1: 0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
            --s2: 0 8px 28px rgba(0,0,0,.11), 0 2px 8px rgba(0,0,0,.05);
            --s3: 0 20px 56px rgba(0,0,0,.16), 0 4px 16px rgba(0,0,0,.06);
        }

        html { scroll-behavior: smooth; scroll-padding-top: 72px; }
        ::selection { background: rgba(45,68,112,.15); color: var(--n900); }
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: var(--n100); }
        ::-webkit-scrollbar-thumb { background: var(--n300); border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--n400); }
        body {
            font-family: var(--fb);
            background: var(--n50);
            color: var(--n900);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }
        button, input, textarea, select { font-family: var(--fb); }

        /* ── Skip link ── */
        .skip-link { position:absolute; left:-9999px; top:auto; }
        .skip-link:focus {
            left:1rem; top:1rem; z-index:999;
            background:var(--brand); color:#fff;
            padding:.5rem 1rem; border-radius:6px;
        }

        /* ── Nav ── */
        header[role="banner"] {
            background: rgba(14, 22, 44, 0.88);
            backdrop-filter: blur(24px) saturate(160%);
            -webkit-backdrop-filter: blur(24px) saturate(160%);
            border-bottom: 1px solid rgba(255,255,255,.07);
            padding: 0 clamp(16px,4vw,48px);
            position: sticky;
            top: 0;
            z-index: 200;
        }
        header[role="banner"] nav {
            max-width: var(--max-w);
            margin: 0 auto;
            height: 56px;
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .nav-logo {
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            flex-shrink: 0;
        }
        .nav-logo-mark {
            width: 26px; height: 26px;
            border-radius: 6px;
            background: var(--brand);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .nav-logo-mark svg { display: block; }

        /* ── Megamenu ──────────────────────────────────────────────────────
           Every page's way into the directory, built from its own groupings. */
        .megamenu { display: flex; align-items: center; gap: .15rem; }
        .megamenu-item { position: relative; }
        .megamenu-trigger {
            display: inline-flex; align-items: center; gap: .35rem;
            background: none; border: 0; cursor: pointer;
            padding: .5rem .7rem; border-radius: 8px;
            font: inherit; font-size: .875rem; font-weight: 500;
            color: rgba(255,255,255,.78);
            transition: background-color .14s, color .14s;
        }
        .megamenu-trigger:hover,
        .megamenu-trigger[aria-expanded="true"] { background: rgba(255,255,255,.1); color: #fff; }
        .megamenu-trigger svg { transition: transform .16s ease; }
        .megamenu-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
        .megamenu-panel {
            position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
            min-width: 330px;
            background: var(--n0, #fff);
            border: 1px solid var(--n200, #e8e6e1);
            border-radius: var(--radius, 14px);
            box-shadow: var(--s3, 0 20px 56px rgba(0,0,0,.16));
            padding: .55rem;
        }
        .megamenu-panel[hidden] { display: none; }
        .megamenu-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem; }
        .megamenu-panel-grid a {
            display: flex; align-items: center; justify-content: space-between; gap: .8rem;
            padding: .5rem .6rem; border-radius: 8px;
            font-size: .86rem; color: var(--n700, #3d3a35); text-decoration: none;
            transition: background-color .12s;
        }
        .megamenu-panel-grid a:hover { background: var(--brand-light, #f0f4f9); color: var(--brand); }
        .megamenu-count { font-size: .72rem; color: var(--n400, #a8a49d); font-variant-numeric: tabular-nums; }

        /* The header is tight on a phone; the menu is a desktop affordance and
           the homepage carries the same routes in. */
        @media (max-width: 900px) { .megamenu { display: none; } }

        /* ── Header legibility ─────────────────────────────────────────────
           Themes load after this file, so a theme rule of equal specificity
           wins on order. These are scoped to the header on purpose: the extra
           `header[role="banner"]` outranks a bare `.nav-logo-name` or
           `.btn-ghost`, which is how the header keeps a readable foreground
           whatever the theme does to the page beneath it.

           This was not hypothetical. On carpy.uk the site's own name rendered
           at 1.5:1 against its header (dark green on near-black) and the
           "Sign in" button was invisible at 1.49:1 — the theme's typography
           rule painted .nav-logo-name in --brand, and .btn-ghost took --n700
           from the light page palette. */
        header[role="banner"] .nav-logo-name { color: var(--header-fg); }

        header[role="banner"] .megamenu-trigger { color: var(--header-fg-dim); }
        header[role="banner"] .megamenu-trigger:hover,
        header[role="banner"] .megamenu-trigger[aria-expanded="true"] {
            background: var(--header-hover);
            color: var(--header-fg);
        }

        header[role="banner"] .btn-ghost {
            color: var(--header-fg);
            border-color: var(--header-line);
            background: transparent;
        }
        header[role="banner"] .btn-ghost:hover { background: var(--header-hover); }

        header[role="banner"] .site-search input { color: var(--header-fg); }
        header[role="banner"] .site-search input::placeholder { color: var(--header-fg-mute); }

        /* ── The header on a phone ─────────────────────────────────────────
           It was a fixed 56px row holding a logo, a 360px search field and two
           calls to action, with no rule below 900px at all — so on a 375px
           screen those fought over about a third of the room they needed. It
           wraps instead: identity and the claim prompt on one line, search
           across the next, which is the only element that wants the width. */
        @media (max-width: 700px) {
            header[role="banner"] nav {
                height: auto;
                flex-wrap: wrap;
                gap: 8px 10px;
                padding: 10px 0;
            }
            .site-search {
                order: 10;
                flex: 1 0 100%;
                max-width: none;
                margin-left: 0;
            }
            .nav-cta {
                font-size: .8rem;
                padding: .4rem .65rem;
            }
            .nav-logo-name { font-size: 15px; }
            /* Push the calls to action to the end of the first line. */
            .nav-logo { margin-right: auto; }
        }
        .nav-logo-name {
            font-family: var(--fd);
            font-weight: 800;
            font-size: 16px;
            color: #fff;
            letter-spacing: -.025em;
        }

        /* ── Nav search ── */
        .site-search { position: relative; flex: 1; max-width: 360px; margin-left: 24px; }
        .site-search input {
            width: 100%;
            padding: 7px 13px;
            background: rgba(255,255,255,.1);
            border: 1px solid rgba(255,255,255,.15);
            border-radius: 7px;
            font-size: 13px;
            color: #fff;
            outline: none;
            transition: background .15s, border-color .15s;
        }
        .site-search input::placeholder { color: rgba(255,255,255,.4); }
        .site-search input:focus {
            background: rgba(255,255,255,.15);
            border-color: rgba(255,255,255,.3);
        }
        .search-dropdown {
            position: absolute; left: 0; right: 0;
            top: calc(100% + 6px);
            background: var(--n0);
            border: 1px solid var(--n200);
            border-radius: 10px;
            box-shadow: 0 12px 36px rgba(0,0,0,.16);
            max-height: 360px;
            overflow-y: auto;
            z-index: 999;
            display: none;
        }
        .search-dropdown.open { display: block; }
        .search-result {
            display: block;
            padding: .65rem 1rem;
            text-decoration: none;
            color: var(--n900);
            border-bottom: 1px solid var(--n100);
            transition: background .12s;
        }
        .search-result:last-child { border-bottom: none; }
        .search-result:hover { background: var(--brand-light); }
        .search-result strong { display: block; font-size: .875rem; font-weight: 600; }
        .search-result span { font-size: .8rem; color: var(--n500); }

        /* Claim CTA in nav */
        .nav-cta {
            margin-left: auto;
            flex-shrink: 0;
            padding: 7px 16px;
            background: var(--brand);
            color: #fff;
            border: none;
            border-radius: 7px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            transition: opacity .15s;
        }
        .nav-cta:hover { opacity: .85; }

        /* ── Main ── */
        main[role="main"] {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 2rem clamp(16px,4vw,48px) 4rem;
        }

        /* ── Footer ── */
        footer[role="contentinfo"] {
            background: linear-gradient(160deg, var(--footer-from) 0%, var(--footer-mid) 55%, var(--footer-to) 100%);
            border-top: 1px solid rgba(255,255,255,.07);
            padding: 3rem clamp(16px,4vw,48px) 1.5rem;
            position: relative;
        }
        footer[role="contentinfo"]::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
            opacity: .25;
        }
        .footer-grid {
            max-width: var(--max-w);
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 2.5rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid rgba(255,255,255,.08);
        }
        .footer-brand-mark {
            display: inline-flex; align-items: center; gap: 8px;
            text-decoration: none; margin-bottom: .75rem;
        }
        .footer-brand-icon {
            width: 28px; height: 28px; border-radius: 7px;
            background: var(--brand); display: flex;
            align-items: center; justify-content: center; flex-shrink: 0;
        }
        .footer-brand-name {
            font-family: var(--fd); font-weight: 800; font-size: 15px;
            color: #fff; letter-spacing: -.025em;
        }
        .footer-tagline { font-size: .825rem; color: rgba(255,255,255,.4); line-height: 1.6; margin-bottom: 1rem; max-width: 280px; }
        .footer-cta-link {
            display: inline-block; padding: .5rem 1.1rem;
            background: linear-gradient(135deg, var(--grad-from) 0%, var(--brand) 50%, var(--grad-to) 100%);
            background-size: 220% auto; background-position: 0% center;
            color: #fff; border-radius: 7px;
            font-size: .8rem; font-weight: 600; text-decoration: none;
            transition: background-position .4s, transform .15s;
        }
        .footer-cta-link:hover { background-position: 100% center; transform: translateY(-1px); color: #fff; }
        .footer-col-title {
            font-size: .7rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: .08em; color: rgba(255,255,255,.35);
            margin-bottom: .875rem;
        }
        .footer-col-links { display: flex; flex-direction: column; gap: .5rem; }
        footer a { color: rgba(255,255,255,.5); text-decoration: none; font-size: .875rem; transition: color .15s; }
        footer a:hover { color: #fff; }
        .footer-bottom {
            max-width: var(--max-w); margin: 1.25rem auto 0;
            display: flex; align-items: center; justify-content: space-between;
            gap: 1rem; flex-wrap: wrap;
            font-size: .8rem; color: rgba(255,255,255,.28);
        }
        .footer-legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }
        .footer-legal a { font-size: .8rem; color: rgba(255,255,255,.35); }
        @media (max-width: 680px) {
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .footer-grid > :first-child { grid-column: 1 / -1; }
        }

        /* ── Cards ── */
        .card {
            background: var(--n0);
            border: 1px solid var(--n200);
            border-radius: var(--radius);
            padding: 1.5rem;
            box-shadow: var(--s0);
        }
        .card-sm  { padding: 1rem 1.25rem; }
        .card-raised { box-shadow: var(--s1); border-color: transparent; }
        .card-accent { border-left: 3px solid var(--brand); }
        .card-feature {
            background: linear-gradient(145deg, var(--brand-light) 0%, var(--n0) 55%);
            border-color: rgba(45,68,112,.12);
        }

        /* ── Business cards ── */
        .business-card {
            background: var(--n0);
            border: 1px solid var(--n200);
            border-radius: var(--radius);
            padding: 1.25rem 1.5rem;
            transition: box-shadow .2s, border-color .2s;
        }
        .business-card:hover {
            box-shadow: 0 6px 24px rgba(45,68,112,.1);
            border-color: #bbc9e1;
        }
        .business-card h2 { font-size: 1rem; margin-bottom: .25rem; }
        .business-card h2 a {
            color: var(--n900);
            text-decoration: none;
            font-family: var(--fd);
            font-weight: 700;
            letter-spacing: -.02em;
        }
        .business-card h2 a:hover { color: var(--brand); }
        .business-card .meta { font-size: .85rem; color: var(--n500); }
        .business-card--featured {
            border-color: var(--brand);
            background: var(--brand-light);
        }

        /* ── Listing-card grid (category-location page) ── */
        .listings-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.25rem;
            margin-bottom: 1.5rem;
        }
        .lcard {
            background: var(--n0);
            border: 1px solid var(--n200);
            border-radius: var(--radius);
            display: flex;
            flex-direction: column;
            transition: box-shadow .22s, border-color .22s, transform .22s;
            position: relative;
            overflow: hidden;
        }
        .lcard::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; height: 2px;
            background: linear-gradient(90deg, var(--brand), var(--accent));
            opacity: 0;
            transition: opacity .22s;
            z-index: 1;
        }
        .lcard:hover::before { opacity: 1; }
        .lcard:hover {
            box-shadow: var(--s2);
            border-color: rgba(45,68,112,.2);
            transform: translateY(-4px);
        }
        .lcard--featured {
            border-color: var(--brand);
            background: var(--brand-light);
        }
        .lcard-body { padding: 1.25rem 1.5rem; flex: 1; }
        .lcard-name {
            font-family: var(--fd);
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: -.02em;
            margin-bottom: .4rem;
        }
        .lcard-name a { color: var(--n900); text-decoration: none; }
        .lcard-name a:hover { color: var(--brand); }
        .lcard-bio { font-size: .875rem; color: var(--n600); margin-bottom: .75rem; line-height: 1.55; }
        .lcard-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
        .lcard-location {
            display: inline-flex; align-items: center; gap: 3px;
            font-size: .8rem; color: var(--n500);
        }
        .lcard-rating { font-size: .8rem; color: #f59e0b; font-weight: 600; }
        .lcard-rating span { color: var(--n500); font-weight: 400; }
        .lcard-price { font-size: .78rem; background: var(--n100); color: var(--n700); padding: 2px 8px; border-radius: 4px; font-weight: 500; }
        .lcard-foot {
            padding: .875rem 1.5rem;
            border-top: 1px solid var(--n100);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .5rem;
        }
        .lcard-phone { font-size: .8rem; color: var(--brand); font-weight: 500; text-decoration: none; }
        .lcard-phone:hover { text-decoration: underline; }
        .lcard-cta {
            margin-left: auto;
            font-size: .8rem; font-weight: 600;
            color: var(--brand);
            text-decoration: none;
            white-space: nowrap;
        }
        .lcard-cta:hover { text-decoration: underline; }

        /* ── Badges ── */
        .badge {
            display: inline-block;
            padding: 2px 9px;
            border-radius: 20px;
            font-size: .73rem;
            font-weight: 600;
            background: var(--brand-light);
            color: var(--brand);
            letter-spacing: .005em;
        }
        .badge--featured {
            background: var(--brand);
            color: #fff;
        }
        .badge--claimed {
            background: var(--ok-l);
            color: var(--ok);
        }
        .badge--type {
            background: rgba(99,102,241,.1);
            color: #4338ca;
        }
        .badge--pricing {
            background: rgba(245,158,11,.1);
            color: #b45309;
        }

        /* ── Buttons ── */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 22px;
            border-radius: 9px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            border: none;
            letter-spacing: -.01em;
            transition: all .15s;
        }
        .btn-primary {
            background: linear-gradient(135deg, var(--grad-from) 0%, var(--brand) 50%, var(--grad-to) 100%);
            background-size: 220% auto;
            background-position: 0% center;
            color: #fff;
            transition: background-position .4s, transform .15s, box-shadow .15s, opacity .15s;
        }
        .btn-primary:hover { opacity: .88; }
        .btn-secondary { background: var(--n100); color: var(--n800); }
        .btn-secondary:hover { background: var(--n200); }
        .btn-ghost {
            background: transparent;
            color: var(--n700);
            border: 1.5px solid var(--n200);
        }
        .btn-ghost:hover { background: var(--n100); }
        .btn-lg { padding: 13px 28px; font-size: 15px; }

        /* ── Grids ── */
        .grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1rem; }
        .grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1rem; }

        /* ── Area cards (area-index page) ── */
        .area-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: .75rem; }
        .area-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .5rem;
            padding: .875rem 1rem;
            background: var(--n0);
            border: 1.5px solid var(--n200);
            border-radius: 10px;
            text-decoration: none;
            transition: all .15s;
        }
        .area-card:hover {
            border-color: var(--brand);
            background: var(--brand-light);
            box-shadow: var(--s1);
            transform: translateY(-2px);
        }
        .area-card-name { font-size: .875rem; font-weight: 600; color: var(--n900); }
        .area-card:hover .area-card-name { color: var(--brand); }
        .area-card-count {
            font-size: .72rem;
            background: var(--n100);
            color: var(--n500);
            padding: 2px 7px;
            border-radius: 12px;
            font-family: var(--fm);
            flex-shrink: 0;
        }
        .area-card:hover .area-card-count { background: rgba(45,68,112,.12); color: var(--brand); }

        /* ── Typography ── */
        h1 {
            font-family: var(--fd);
            font-weight: 800;
            font-size: clamp(24px,3vw,36px);
            letter-spacing: -.03em;
            line-height: 1.1;
            margin-bottom: 1rem;
        }
        h2 {
            font-family: var(--fd);
            font-weight: 700;
            font-size: 1.2rem;
            letter-spacing: -.02em;
            margin-bottom: .75rem;
        }
        h3 {
            font-family: var(--fd);
            font-weight: 700;
            font-size: 1rem;
            letter-spacing: -.015em;
            margin-bottom: .5rem;
        }
        p { margin-bottom: 1rem; }

        /* ── Breadcrumb ── */
        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--n400);
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }
        .breadcrumb a { color: var(--n500); text-decoration: none; transition: color .15s; }
        .breadcrumb a:hover { color: var(--n900); }
        .breadcrumb span { color: var(--n300); }
        .breadcrumb span::before { content: ' / '; color: var(--n300); }

        /* ── Shortlist comparison ──
           Lives here rather than in the partial: the shortlist tray is on
           every page, and a page carries a linked stylesheet, never its own
           <style> block. */
        .cmp-chip {
            display: inline-block;
            padding: .1rem .45rem;
            margin: 0 .15rem .2rem 0;
            border-radius: 999px;
            background: var(--brand-light, #eef);
            color: var(--brand, #46c);
            font-size: .74rem;
            white-space: nowrap;
        }
        /* The rows that settle it, marked so the eye lands there first. */
        .cmp-differs td:first-child { box-shadow: inset 3px 0 0 var(--accent, #f2b03d); }

        /* ── Hero (dark) ── */
        .hero-dark {
            background: linear-gradient(160deg, var(--hero-from) 0%, var(--hero-mid) 55%, var(--hero-to) 100%);
            padding: 40px clamp(16px,4vw,48px);
            border-bottom: 1px solid rgba(255,255,255,.07);
            margin-bottom: 0;
            position: relative;
            overflow: hidden;
        }
        .hero-dark::before {
            content: ''; position: absolute; inset: 0; pointer-events: none;
            background-image:
                linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
            background-size: 40px 40px;
        }
        .hero-dark-inner { max-width: var(--max-w); margin: 0 auto; position: relative; z-index: 1; }
        .hero-dark .breadcrumb a { color: rgba(255,255,255,.5); }
        .hero-dark .breadcrumb a:hover { color: rgba(255,255,255,.8); }
        .hero-dark .breadcrumb { color: rgba(255,255,255,.35); }
        .hero-dark .breadcrumb span { color: rgba(255,255,255,.2); }
        .hero-dark .breadcrumb span::before { color: rgba(255,255,255,.2); }
        .hero-dark h1 { color: #fff; margin-bottom: .4rem; }
        .hero-dark-meta { font-size: 13px; color: rgba(255,255,255,.45); }
        .hero-dark-meta strong { color: rgba(255,255,255,.7); }
        .hero-dark-meta a { color: rgba(255,255,255,.6); text-decoration: none; }
        .hero-dark-meta a:hover { color: rgba(255,255,255,.9); }

        /* ── Hero (home) ── */
        .hero-home {
            background: linear-gradient(160deg, var(--hero-from) 0%, var(--hero-mid) 45%, var(--hero-to) 100%);
            padding: 80px clamp(16px,4vw,48px) 72px;
            position: relative;
            overflow: hidden;
            margin-bottom: 0;
        }
        .hero-home-grid {
            position: absolute; inset: 0; pointer-events: none;
            background-image:
                linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
            background-size: 40px 40px;
        }
        .hero-home-glow {
            position: absolute; top: 0; left: 0; right: 0; height: 100%; pointer-events: none;
            background:
                radial-gradient(ellipse at 15% -10%, var(--hero-glow, rgba(129,140,248,.22)) 0%, transparent 55%),
                radial-gradient(ellipse at 80% 110%, var(--hero-glow-2, rgba(45,68,112,.3)) 0%, transparent 50%);
        }
        .hero-home-inner {
            max-width: var(--max-w);
            margin: 0 auto;
            position: relative; z-index: 1;
        }
        .hero-home h1 {
            font-size: clamp(38px,5.5vw,64px);
            letter-spacing: -.045em;
            line-height: 1.05;
            max-width: 720px;
            margin-bottom: .875rem;
            /* gradient text */
            background: linear-gradient(135deg, #fff 20%, var(--hero-title-fade, #a5b4fc) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ── Gradient text utility ── */
        .text-gradient {
            background: linear-gradient(135deg, #fff 20%, var(--hero-title-fade, #a5b4fc) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .text-gradient-brand {
            background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .hero-home p {
            font-size: 17px;
            color: rgba(255,255,255,.65);
            max-width: 500px;
            margin-bottom: 2rem;
        }
        .hero-home .search-form {
            display: flex;
            gap: .5rem;
            flex-wrap: wrap;
            max-width: 560px;
        }
        .hero-home .search-form input {
            flex: 1;
            min-width: 160px;
            padding: 12px 16px;
            background: rgba(255,255,255,.12);
            border: 1px solid rgba(255,255,255,.2);
            border-radius: 9px;
            font-size: 14px;
            color: #fff;
            outline: none;
            transition: background .15s, border-color .15s;
        }
        .hero-home .search-form input::placeholder { color: rgba(255,255,255,.45); }
        .hero-home .search-form input:focus {
            background: rgba(255,255,255,.18);
            border-color: rgba(255,255,255,.35);
        }
        .hero-home .search-form button {
            padding: 12px 24px;
            background: var(--brand);
            color: #fff;
            border: none;
            border-radius: 9px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: opacity .15s;
        }
        .hero-home .search-form button:hover { opacity: .85; }

        /* ── Search form inside dark hero (search page) ── */
        .hero-dark .search-form {
            display: flex; gap: .5rem; flex-wrap: wrap; max-width: 580px; margin-top: 1.25rem;
        }
        .hero-dark .search-form input {
            flex: 1; min-width: 150px;
            padding: 11px 16px;
            background: rgba(255,255,255,.1);
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 9px;
            font-size: 14px; color: #fff;
            font-family: var(--fm);
            outline: none;
            transition: border-color .15s, background .15s;
        }
        .hero-dark .search-form input::placeholder { color: rgba(255,255,255,.38); }
        .hero-dark .search-form input:focus {
            border-color: rgba(255,255,255,.5);
            background: rgba(255,255,255,.14);
        }
        .hero-dark .search-form button {
            padding: 11px 22px;
            background: linear-gradient(135deg, var(--grad-from) 0%, var(--brand) 50%, var(--grad-to) 100%);
            background-size: 220% auto; background-position: 0% center;
            color: #fff; border: none; border-radius: 9px;
            font-size: 14px; font-weight: 600; font-family: var(--fm);
            cursor: pointer; white-space: nowrap;
            transition: background-position .4s, transform .15s;
        }
        .hero-dark .search-form button:hover {
            background-position: 100% center; transform: translateY(-1px);
        }

        /* ── Section heading ── */
        .section-heading {
            font-family: var(--fd);
            font-size: 1.15rem;
            font-weight: 700;
            letter-spacing: -.02em;
            margin-bottom: 1rem;
            color: var(--n900);
            position: relative;
            display: inline-flex;
            flex-direction: column;
            width: 100%;
        }
        .section-heading::after {
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            margin-top: .6rem;
            background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 30%, transparent 100%);
            border-radius: 1px;
            opacity: .5;
        }

        /* ── Category / area pills ── */
        .category-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
        .category-list a {
            padding: 6px 14px;
            background: var(--n0);
            border: 1.5px solid var(--n200);
            border-radius: 20px;
            font-size: .875rem;
            font-weight: 500;
            color: var(--n700);
            text-decoration: none;
            transition: all .15s;
        }
        .category-list a:hover {
            background: var(--brand);
            color: #fff;
            border-color: var(--brand);
        }

        /* ── Filter chips ── */
        .filters { display: flex; align-items: center; gap: 8px; margin-bottom: 1.5rem; flex-wrap: wrap; }
        .filter-select {
            padding: .4rem .75rem;
            border-radius: 6px;
            border: 1.5px solid var(--n200);
            font-size: .83rem; font-family: var(--fm);
            color: var(--n700); background: var(--n0);
            cursor: pointer; outline: none;
            transition: border-color .15s;
        }
        .filter-select:focus { border-color: var(--brand); }
        .filter-btn {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
            border: 1.5px solid var(--n200);
            background: var(--n0);
            color: var(--n700);
            cursor: pointer;
            transition: all .15s;
        }
        .filter-btn:hover { border-color: var(--brand); color: var(--brand); }
        .filter-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }

        /* ── Result count ── */
        .result-count { font-size: 13px; color: var(--n500); }
        .result-count-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: .5rem; }

        /* ── Content wrap (below dark hero) ── */
        .content-wrap {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 1.75rem clamp(16px,4vw,48px) 4rem;
        }

        /* ── Gallery ── */
        .media-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: .75rem; margin-bottom: 1rem; }
        .media-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; border: 1px solid var(--n200); }
        .hero-image { width: 100%; max-height: 400px; object-fit: cover; border-radius: var(--radius); margin-bottom: 1.5rem; }
        .business-logo {
            width: 80px; height: 80px;
            object-fit: contain;
            border-radius: 10px;
            border: 1px solid var(--n200);
            background: var(--n0);
            flex-shrink: 0;
        }

        /* ── Photo grid (listing page) ── */
        .photo-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            grid-template-rows: 200px 200px;
            gap: 3px;
            background: var(--n200);
            border-radius: var(--radius);
            overflow: hidden;
            margin-bottom: 2rem;
        }
        .photo-grid-main { grid-row: 1 / 3; }
        .photo-grid img {
            width: 100%; height: 100%;
            object-fit: cover;
            display: block;
        }
        .photo-grid-placeholder {
            width: 100%; height: 100%;
            background: var(--n100);
            display: flex; align-items: center; justify-content: center;
            font-size: 11px; color: var(--n400); font-family: var(--fm);
        }

        /* ── Claim CTA ── */
        .claim-cta {
            margin-top: 2rem;
            padding: 1.5rem 1.75rem;
            background: linear-gradient(135deg, #0d1b35 0%, #162849 100%);
            border: 1px solid rgba(129,140,248,.18);
            border-radius: var(--radius-lg);
            position: relative; overflow: hidden;
            display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
        }
        .claim-cta::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
            background: linear-gradient(90deg, var(--brand), var(--accent));
        }
        .claim-cta-icon {
            width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
            background: rgba(129,140,248,.12); border: 1px solid rgba(129,140,248,.2);
            display: flex; align-items: center; justify-content: center; color: var(--accent);
        }
        .claim-cta-body { flex: 1; min-width: 180px; }
        .claim-cta-title { font-weight: 700; font-size: .95rem; color: #fff; margin: 0 0 .3rem; }
        .claim-cta-desc { font-size: .825rem; color: rgba(255,255,255,.5); margin: 0; line-height: 1.55; }

        /* ── Skeleton / shimmer ── */
        @keyframes shimmer {
            0%   { background-position: -800px 0; }
            100% { background-position: 800px 0; }
        }
        .skeleton {
            background: linear-gradient(90deg, var(--n100) 25%, var(--n200) 50%, var(--n100) 75%);
            background-size: 800px 100%;
            animation: shimmer 1.6s infinite linear;
            border-radius: 5px;
            display: block;
        }

        /* ── Legal ── */
        .legal-content h2 {
            margin-top: 2.25rem; margin-bottom: .6rem;
            font-size: 1.05rem; font-weight: 700;
            padding-bottom: .5rem;
            border-bottom: 1px solid var(--n200);
            color: var(--n900);
        }
        .legal-content p, .legal-content li { color: var(--n700); line-height: 1.7; }
        .legal-content ul { padding-left: 1.5rem; margin-bottom: 1rem; }
        .legal-content a { color: var(--brand); }
        .legal-content a:hover { text-decoration: underline; }

        /* ── Opening hours ── */
        .hours-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
        .hours-table th { text-align: left; font-weight: 600; padding: .35rem .5rem .35rem 0; width: 120px; color: var(--n900); }
        .hours-table td { padding: .35rem 0; color: var(--n700); }
        .hours-table tr.hours-today th,
        .hours-table tr.hours-today td { color: var(--brand); font-weight: 600; }

        /* ── Stars ── */
        .star { color: var(--n400); font-size: 1rem; }
        .star--filled { color: #f59e0b; }

        /* ── Review cards ── */
        .review-card { padding: 1.25rem; }
        .review-header { flex-wrap: wrap; }
        .star-picker label { user-select: none; }

        /* ── Forms ── */
        .form-label {
            display: block;
            font-size: 13px;
            font-weight: 500;
            color: var(--n700);
            margin-bottom: 5px;
        }
        .form-input {
            width: 100%;
            padding: 9px 12px;
            border: 1.5px solid var(--n200);
            border-radius: 8px;
            font-size: 14px;
            color: var(--n900);
            background: var(--n0);
            outline: none;
            transition: border-color .15s;
        }
        .form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(45,68,112,.12); }
        .success-msg { color: var(--ok); font-weight: 600; padding: .75rem 0; }
        .error-msg { color: #dc2626; font-size: .875rem; padding: .5rem 0; }

        /* ── 404 ── */
        .not-found { text-align: center; padding: 5rem 1rem; }
        .not-found .code {
            font-family: var(--fd);
            font-size: 7rem;
            font-weight: 800;
            color: var(--brand);
            opacity: .15;
            line-height: 1;
            letter-spacing: -.05em;
        }

        /* ── Section eyebrow / label ── */
        .section-label {
            display: inline-block;
            font-size: .68rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: .1em; color: var(--brand); margin-bottom: .4rem;
        }
        .section-title {
            font-family: var(--fd); font-size: 1.25rem; font-weight: 800;
            letter-spacing: -.025em; color: var(--n900); margin-bottom: 1rem;
        }

        /* ── Profile header ── */
        .profile-hdr {
            display: flex; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap;
            margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--n200);
        }
        .profile-avatar {
            width: 76px; height: 76px; border-radius: 14px;
            background: var(--brand-light); border: 1.5px solid var(--n200);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; overflow: hidden; box-shadow: var(--s0);
        }
        .profile-avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }
        .profile-avatar-initial {
            font-family: var(--fd); font-size: 2.25rem; font-weight: 800;
            color: var(--brand); line-height: 1; text-transform: uppercase;
        }
        .profile-meta { flex: 1; min-width: 200px; }
        .profile-name {
            font-family: var(--fd); font-size: clamp(22px, 3.5vw, 32px);
            font-weight: 800; letter-spacing: -.04em; line-height: 1.1;
            color: var(--n900); margin-bottom: .625rem;
        }
        .profile-badge-row { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin-bottom: .625rem; }
        .profile-rating { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .9rem; }
        .prating-stars { color: #f59e0b; font-size: 1rem; letter-spacing: -.05em; }
        .prating-score { font-weight: 700; color: var(--n900); }
        .prating-count { color: var(--n500); font-size: .85rem; }
        .prating-link {
            font-size: .78rem; font-weight: 600; color: var(--brand);
            text-decoration: none; padding: 2px 8px;
            border: 1px solid var(--brand); border-radius: 12px; transition: all .15s;
        }
        .prating-link:hover { background: var(--brand); color: #fff; }

        /* ── Profile two-column layout ── */
        .profile-cols { display: grid; grid-template-columns: 1fr 300px; gap: 1.75rem; align-items: start; }
        @media (max-width: 768px) { .profile-cols { grid-template-columns: 1fr; } }

        /* ── Profile section (card in main column) ── */
        .psection {
            background: var(--n0); border: 1px solid var(--n200);
            border-radius: var(--radius); padding: 1.5rem;
            margin-bottom: 1.25rem; box-shadow: var(--s0);
        }
        .psection-title {
            font-family: var(--fd); font-size: 1rem; font-weight: 700;
            letter-spacing: -.02em; color: var(--n900);
            margin-bottom: 1rem; padding-bottom: .75rem;
            position: relative;
        }
        .psection-title::after {
            content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 1px;
            background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 35%, transparent 100%);
            opacity: .4; border-radius: 1px;
        }
        .psection-body { color: var(--n700); font-size: .9375rem; line-height: 1.7; margin: 0; }

        /* ── Details attribute grid ── */
        .details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem .75rem; }
        @media (max-width: 480px) { .details-grid { grid-template-columns: 1fr; } }
        .detail-item dt { font-size: .7rem; font-weight: 700; color: var(--n400); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .15rem; }
        .detail-item dd { font-size: .875rem; color: var(--n700); margin: 0; }

        /* ── Event detail rows ── */
        .event-rows { display: flex; flex-direction: column; gap: .625rem; }
        .event-row { display: flex; gap: .75rem; align-items: flex-start; }
        .event-row-label { font-size: .875rem; font-weight: 600; color: var(--n800); min-width: 80px; flex-shrink: 0; }
        .event-row-val { font-size: .875rem; color: var(--n600); }

        /* ── Contact card (profile sidebar) ── */
        .contact-card {
            background: var(--n0); border: 1px solid var(--n200);
            border-radius: var(--radius); overflow: hidden;
            box-shadow: var(--s1); position: sticky; top: 72px;
        }
        .contact-card-head {
            padding: 1rem 1.25rem;
            background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-mid) 100%);
            border-bottom: 1px solid rgba(255,255,255,.07);
        }
        .contact-card-title {
            font-family: var(--fd); font-size: .95rem; font-weight: 700;
            color: #fff; letter-spacing: -.015em;
        }
        .contact-card-subtitle { font-size: .75rem; color: rgba(255,255,255,.4); margin-top: 2px; }
        .contact-card-body { padding: .25rem 1.25rem 1rem; }
        .contact-row {
            display: flex; gap: .75rem; align-items: flex-start;
            padding: .75rem 0; border-bottom: 1px solid var(--n100);
        }
        .contact-row:last-child { border-bottom: none; }
        .contact-row-icon {
            width: 28px; height: 28px; border-radius: 7px;
            background: var(--brand-light); border: 1px solid rgba(45,68,112,.1);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; margin-top: 1px;
        }
        .contact-row-icon svg { display: block; }
        .contact-row-info { flex: 1; min-width: 0; }
        .contact-row-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--n400); margin-bottom: 2px; }
        .contact-row-val { font-size: .9rem; color: var(--n700); word-break: break-word; }
        .contact-row-val a { color: var(--brand); font-weight: 600; text-decoration: none; }
        .contact-row-val a:hover { text-decoration: underline; }
        .contact-card-cta {
            display: block; text-align: center; margin: 0 1.25rem 1.25rem;
            padding: .75rem 1rem;
            background: linear-gradient(135deg, var(--grad-from) 0%, var(--brand) 50%, var(--grad-to) 100%);
            background-size: 220% auto; background-position: 0% center;
            color: #fff; border-radius: 9px; font-size: .875rem; font-weight: 600;
            text-decoration: none; transition: background-position .4s, transform .15s, box-shadow .15s;
        }
        .contact-card-cta:hover {
            background-position: 100% center;
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(45,68,112,.35);
            color: #fff;
        }

        /* ── Pricing pill ── */
        .price-pill {
            display: flex; align-items: center; justify-content: space-between;
            padding: .875rem 1rem; margin-bottom: 1rem;
            background: linear-gradient(135deg, var(--brand-light), var(--n0));
            border: 1.5px solid rgba(45,68,112,.18);
            border-radius: var(--radius); box-shadow: var(--s0);
        }
        .price-pill-amount { font-family: var(--fd); font-size: 1.4rem; font-weight: 800; color: var(--brand-dark); }
        .price-pill-band { font-size: .78rem; color: var(--brand); font-weight: 600; background: rgba(45,68,112,.1); padding: 2px 8px; border-radius: 8px; }

        /* ── Prices ── */
        .offer-list { list-style: none; margin: 0; padding: 0; }
        .offer-row {
            display: flex; align-items: baseline; justify-content: space-between;
            gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--n200);
        }
        .offer-row:last-child { border-bottom: 0; }
        .offer-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
        .offer-name { font-weight: 600; color: var(--n800); }
        .offer-desc { font-size: .82rem; color: var(--n600); }
        .offer-side { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; flex-shrink: 0; }
        .offer-price { font-family: var(--fd); font-size: 1.15rem; font-weight: 800; color: var(--brand-dark); white-space: nowrap; }
        .offer-meta { font-size: .74rem; color: var(--n500); }
        .offer-meta a { color: var(--n600); text-decoration: underline; }
        .offer-stale {
            margin-left: .35rem; font-size: .68rem; font-weight: 600;
            color: var(--n700); background: var(--n100);
            padding: 1px 6px; border-radius: 6px;
        }
        .offer-note { font-size: .78rem; color: var(--n500); margin: .75rem 0 0; }

        /* ── Review cards ── */
        .review-card { padding: 1.25rem !important; }
        .review-meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .625rem; }
        .review-avatar {
            width: 34px; height: 34px; border-radius: 50%;
            background: var(--brand); color: #fff;
            display: flex; align-items: center; justify-content: center;
            font-family: var(--fd); font-size: .8rem; font-weight: 800;
            flex-shrink: 0; text-transform: uppercase;
        }
        .review-author { font-weight: 600; font-size: .9rem; color: var(--n900); }
        .review-stars { color: #f59e0b; font-size: .875rem; letter-spacing: -.05em; }
        .review-date { font-size: .78rem; color: var(--n400); margin-left: auto; }
        .review-body { font-size: .9rem; color: var(--n700); line-height: 1.65; margin: 0; }

        /* ── Btn polish ── */
        .btn { position: relative; }
        .btn-primary:hover {
            background-position: 100% center;
            opacity: 1 !important;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(45,68,112,.38);
        }
        .btn-ghost:hover { background: var(--n100); }

        /* ── Star picker ── */
        .star-picker label { font-size: 2rem; color: var(--n300); transition: color .1s; cursor: pointer; }

        /* ── Responsive ── */
        @media (max-width: 600px) {
            main[role="main"] { padding: 1.5rem 1rem 3rem; }
            .content-wrap { padding: 1.5rem 1rem 3rem; }
            .hero-home { padding: 52px 1rem 44px; }
            .photo-grid { grid-template-columns: 1fr; grid-template-rows: 200px; }
            .photo-grid .photo-grid-main { grid-row: auto; }
        }

        /* Theme: carpy — UK carp fishing
 *
 * "Deep water, first light."
 *
 * The previous palette was olive on cream: technically a lake, but it read as
 * a farm shop. The water an angler actually sits in front of at 4am is close
 * to black, with a green cast under the surface and one shaft of gold coming
 * over the treeline. That is a far more striking thing to build from, and it
 * is what this is.
 *
 * Deliberately not blue: blue reads as sea and coast, and carp fishing is
 * inland stillwater.
 *
 * Gold is reserved. It marks the claim prompt, a venue-verified record, and
 * exactly one word of the headline. Spent everywhere it becomes decoration and
 * stops meaning anything.
 */
:root {
    /* Depth. Near-black with a green cast, not a grey. */
    --ink:         #03100D;
    --brand:       #0A3B2E;
    --brand-mid:   #17A47B;  /* under-surface green — the luminous one */
    --brand-light: #EBF4F0;
    --brand-dark:  #061C16;

    /* Carp scale gold. Brighter than the old amber so it actually lifts off
       a near-black surface instead of sinking into it. */
    --accent:      #F2B03D;
    --accent-hi:   #FFD27A;
    --accent-soft: #FDF4E3;

    /* Warm greys — mist and silt, never cool slate. */
    --n200:        #DFD9CF;
    --n400:        #9C9387;
    --n500:        #6F675C;
    --n600:        #524C44;
    --n700:        #37322C;

    --bg:          #F8F6F1;

    /* Primary surfaces: hero, buttons, footer. */
    --grad-from:   #0F5943;
    --grad-to:     #072019;
    --hero-from:   #061F19;
    --hero-mid:    #04150F;
    --hero-to:     #03100D;
    --footer-from: #061C16;
    --footer-mid:  #04140F;
    --footer-to:   #03100D;

    /* Low sun over the far bank, and the water lit from beneath. */
    --hero-glow:   rgba(242,176,61,.30);
    --hero-glow-2: rgba(23,164,123,.26);

    --hero-title-fade: var(--accent-hi);

    --radius: 14px;
    --radius-sm: 10px;

    --fd: 'Fraunces', Georgia, serif;

    /* The stand-in artwork for a listing with no photograph. The motif is
       chosen per site (build_config.listing_art); these are its colours. */
    /* Lifted off the dark: at #12604A on a near-black band the rings were a
       smudge rather than a drawing. */
    --listing-art-from: #1B7C5F;
    --listing-art-to:   #06251C;
    --listing-art-line: rgba(255,210,122,.72);

    /* The plan of an area's listings. Same water, seen from above. */
    --area-map-bg:    #061F19;
    --area-map-glow:  rgba(23,164,123,.26);
    --area-map-grid:  rgba(255,255,255,.07);
    --area-map-point: #F2B03D;
}

/* ── The water's edge ────────────────────────────────────────────────────
   The hero was a rectangle with a hard bottom edge, which is the shape of a
   dashboard, not a lake. This is a shoreline. */
.hero-home {
    padding-bottom: 118px;
    border-radius: 0 0 34px 34px;
}

.hero-home::after {
    content: "";
    position: absolute;
    left: -2%; right: -2%; bottom: -1px;
    height: 78px;
    pointer-events: none;
    background: var(--bg);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80 L0 44 C 150 14 260 66 420 46 C 580 26 700 62 860 40 C 980 24 1100 52 1200 34 L1200 80 Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80 L0 44 C 150 14 260 66 420 46 C 580 26 700 62 860 40 C 980 24 1100 52 1200 34 L1200 80 Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* The listing avatar is the depth chart itself, so it needs no tile behind it. */
.profile-avatar .listing-art,
.lcard .listing-art { display: block; border-radius: 12px; }

body {
    background:
        radial-gradient(1200px 420px at 50% -280px, rgba(23,164,123,.09), transparent 70%),
        var(--bg);
    line-height: 1.62;
    letter-spacing: -0.003em;
    color: var(--n700);
}

/* ── Typography ──────────────────────────────────────────────────────────
   Fraunces at a low optical size keeps the contrast tight enough to stay
   legible at body-adjacent sizes, and opens up at display sizes. */
h1, h2, h3, .section-heading, .nav-logo-name {
    font-family: var(--fd);
    font-optical-sizing: auto;
    color: var(--brand);
    font-weight: 700;
    letter-spacing: -0.02em;
}

h1 { letter-spacing: -0.03em; }

/* A weight is data and should line up like data. */
table, .stat-value, .stat-number, #records strong, .record-figure, time, .hero-stats strong {
    font-variant-numeric: tabular-nums;
}

/* ── Header ──────────────────────────────────────────────────────────────*/
header[role="banner"] {
    background: rgba(4,20,15,.86);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid rgba(242,176,61,.16);
}

.nav-logo-mark,
.footer-brand-icon {
    background: linear-gradient(150deg, var(--brand-mid), var(--brand)) !important;
    color: #fff;
    box-shadow: 0 3px 12px rgba(23,164,123,.34);
}

.nav-logo-name { font-size: 1.06rem; letter-spacing: -.03em; }

/* ── Hero ────────────────────────────────────────────────────────────────
   The old hero was a flat olive block behind a washed-out gradient headline.
   This is depth: black water, a green glow from below, and the sun low and
   off to one side. */
.hero-home,
.hero, .page-hero {
    background:
        radial-gradient(900px 520px at 78% -8%, rgba(242,176,61,.20), transparent 62%),
        radial-gradient(760px 460px at 8% 108%, rgba(23,164,123,.22), transparent 60%),
        linear-gradient(168deg, #0A2B22 0%, var(--hero-mid) 52%, var(--ink) 100%);
}

/* Ripples rather than graph paper. The square grid read as a dashboard. */
.hero-home-grid {
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.035) 0px,
            rgba(255,255,255,.035) 1px,
            transparent 1px,
            transparent 7px
        );
    background-size: auto;
    mask-image: radial-gradient(ellipse at 50% 120%, #000 10%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 120%, #000 10%, transparent 72%);
    opacity: .8;
}

/* Solid white, with the accent carried by one word rather than a fade across
   the whole line — the gradient washed the second half out to near-invisible
   against the dark. */
.hero-home h1 {
    font-family: var(--fd);
    font-weight: 800;
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -.035em;
    max-width: 15ch;
    background: none;
    -webkit-text-fill-color: #FBFAF7;
    color: #FBFAF7;
}

.hero-home h1 em,
.hero-home h1 .accent {
    font-style: normal;
    color: var(--accent-hi);
    -webkit-text-fill-color: var(--accent-hi);
}

.hero-home p {
    font-size: 18px;
    color: rgba(248,246,241,.76);
    max-width: 46ch;
    margin-bottom: 2.25rem;
}

/* The form was capped at 560px, so two inputs and a button fought for room and
   the first placeholder truncated mid-word. */
.hero-home .search-form {
    max-width: 720px;
    gap: .6rem;
}

.hero-home .search-form input {
    padding: 15px 18px;
    font-size: 15px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--radius-sm);
    min-width: 200px;
}

.hero-home .search-form input::placeholder { color: rgba(248,246,241,.5); }

.hero-home .search-form input:focus {
    background: rgba(255,255,255,.12);
    border-color: rgba(242,176,61,.55);
    box-shadow: 0 0 0 3px rgba(242,176,61,.14);
}

/* Gold, because it is the one action on the page. It was --brand: dark green
   on near-black. */
.hero-home .search-form button {
    padding: 15px 30px;
    background: var(--accent);
    color: #2A1D06;
    font-weight: 700;
    font-size: 15px;
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 20px rgba(242,176,61,.28);
}

.hero-home .search-form button:hover {
    background: var(--accent-hi);
    opacity: 1;
}

/* ── Stats ───────────────────────────────────────────────────────────────*/
.hero-stats strong {
    font-family: var(--fd);
    font-weight: 700;
    color: var(--accent-hi);
}

.hero-stats span { color: rgba(248,246,241,.62); }

/* ── Surfaces ────────────────────────────────────────────────────────────*/
.card, .business-card {
    background: #fff;
    border: 1px solid var(--n200);
    border-radius: var(--radius);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.card:hover, .business-card:hover {
    transform: translateY(-3px);
    border-color: rgba(23,164,123,.45);
    box-shadow: 0 16px 34px rgba(3,16,13,.13);
}

.card-accent { border-left: 3px solid var(--brand-mid); }

.section-heading {
    position: relative;
    padding-bottom: .45rem;
    font-size: clamp(22px, 2.4vw, 30px);
}

.section-heading::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 2.75rem; height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-hi));
    border-radius: 3px;
}

.listing-logo, .biz-logo, .profile-logo {
    background: linear-gradient(150deg, var(--brand-mid), var(--brand)) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(3,16,13,.26);
}

.badge {
    background: var(--brand-light);
    color: var(--brand);
    border: 1px solid rgba(23,164,123,.26);
    font-weight: 600;
}

/* ── Buttons ─────────────────────────────────────────────────────────────*/
.btn, .btn-primary, .btn-ghost {
    border-radius: var(--radius-sm);
    font-weight: 650;
    transition: transform .12s ease, box-shadow .16s ease, background-color .16s ease;
}

.btn-primary {
    background: var(--brand);
    box-shadow: 0 1px 2px rgba(3,16,13,.3);
}

.btn-primary:hover {
    background: var(--brand-mid);
    box-shadow: 0 8px 20px rgba(23,164,123,.34);
}

.btn:active { transform: translateY(1px); }

/* ── Gold, spent deliberately ────────────────────────────────────────────
   The claim prompt is the revenue path, and a venue-verified record is the one
   fact anglers actually trust. Nothing else earns the accent. */
.claim-cta {
    background: var(--accent-soft);
    border-color: rgba(242,176,61,.42);
}

.claim-cta .btn-primary { background: var(--accent); color: #2A1D06; }
.claim-cta .btn-primary:hover { background: var(--accent-hi); color: #2A1D06; }

/* ── Data density ────────────────────────────────────────────────────────*/
table th {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--n500);
    font-weight: 650;
}

table tbody tr:hover { background: var(--brand-light); }

/* Most listings start empty, and a bare page reads as broken rather than new. */
.empty-state {
    background: var(--brand-light);
    border: 1px dashed rgba(23,164,123,.35);
    border-radius: var(--radius);
    padding: 1.1rem;
    color: var(--n500);
}

.category-list a { border-radius: 99px; }
.search-result:hover { background: var(--brand-light); }
a { text-underline-offset: 2px; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

footer[role="contentinfo"] {
    background:
        radial-gradient(700px 300px at 82% -30%, rgba(23,164,123,.12), transparent 62%),
        var(--brand-dark);
    border-top: 1px solid rgba(242,176,61,.18);
}

/* ── The venue's own header ──────────────────────────────────────────────
   A listing page opened with a breadcrumb and a small dark title floating in
   white space, and the depth chart — a dark drawing on a dark tile — read as a
   smudge at 84px. The page a visitor actually spends time on looked nothing
   like the homepage that sent them there.

   It gets the same water: a dark band the full width of the content, the name
   set in the display face, and the chart big enough to be a drawing. */
.profile-hdr {
    position: relative;
    margin: -1.5rem -1.5rem 2rem;
    padding: 2.25rem 2rem 2rem;
    border-bottom: 0;
    border-radius: 0 0 26px 26px;
    align-items: center;
    background:
        radial-gradient(680px 320px at 82% -20%, rgba(242,176,61,.16), transparent 62%),
        radial-gradient(560px 300px at 6% 116%, rgba(23,164,123,.20), transparent 60%),
        linear-gradient(160deg, #0A2B22 0%, var(--hero-mid) 58%, var(--ink) 100%);
    box-shadow: 0 18px 40px rgba(3,16,13,.18);
}

/* The chart is the picture on a page that has no photograph, so give it room
   and let it sit on the band rather than in a tile of its own. */
.profile-avatar {
    width: 104px; height: 104px;
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 16px;
}

.profile-avatar .listing-art { width: 104px; height: 104px; }

.profile-name { color: #FBFAF7; letter-spacing: -.03em; }

.profile-hdr .badge {
    background: rgba(255,255,255,.1);
    color: rgba(251,250,247,.9);
    border-color: rgba(255,255,255,.18);
}

.profile-hdr .badge--claimed {
    background: rgba(242,176,61,.16);
    color: var(--accent-hi);
    border-color: rgba(242,176,61,.4);
}

/* Where it is and what is known about it, so the band carries something
   besides a name. */
.profile-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem 1.6rem;
    margin: 0 0 0 auto;
    padding-left: 1.5rem;
    align-self: center;
    max-width: 22rem;
    border-left: 1px solid rgba(255,255,255,.12);
}

.profile-facts dt {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: rgba(255,210,122,.85);
    margin-bottom: .18rem;
}

.profile-facts dd {
    margin: 0;
    font-size: .9rem;
    color: rgba(251,250,247,.9);
    line-height: 1.35;
}

@media (max-width: 900px) {
    .profile-facts {
        margin: 1.25rem 0 0;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.12);
        padding-top: 1rem;
        max-width: none;
        flex-basis: 100%;
    }
}

/* Against the band, the outline button was a dark rule on a dark surface. */
.profile-hdr .btn,
.profile-hdr .shortlist-toggle {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.22);
    color: #FBFAF7;
}

.profile-hdr .btn:hover,
.profile-hdr .shortlist-toggle:hover {
    background: rgba(242,176,61,.18);
    border-color: rgba(242,176,61,.5);
    color: var(--accent-hi);
}

.profile-rating .prating-score,
.profile-hdr .prating-count { color: rgba(251,250,247,.8); }

@media (max-width: 700px) {
    .profile-hdr {
        margin: -1rem -1rem 1.5rem;
        padding: 1.5rem 1.25rem;
        border-radius: 0 0 20px 20px;
    }
    .profile-avatar,
    .profile-avatar .listing-art { width: 76px; height: 76px; }
}

/* ── The area's own header ───────────────────────────────────────────────
   The directory page — "Fishing lakes in Nantwich" — is where most people
   arrive from a search, and it was the last surface still on the stock dark
   band: a flat gradient with a title and a count, while the homepage that
   linked to it and the venue page it linked on both had water in them.

   Same treatment as the two it sits between, so a visit reads as one site. */
.hero-dark {
    background:
        radial-gradient(720px 340px at 84% -25%, rgba(242,176,61,.15), transparent 62%),
        radial-gradient(600px 320px at 4% 118%, rgba(23,164,123,.20), transparent 60%),
        linear-gradient(160deg, #0A2B22 0%, var(--hero-mid) 56%, var(--ink) 100%);
    border-bottom: 0;
    border-radius: 0 0 26px 26px;
    padding: 2.5rem clamp(16px,4vw,48px) 2.25rem;
    box-shadow: 0 18px 40px rgba(3,16,13,.18);
}

/* The stock band lays a 40px graph-paper grid over itself. Against the
   gradients above it reads as moiré, and the shoreline motif is doing that
   job already. */
.hero-dark::before { display: none; }

.hero-dark h1 {
    font-family: var(--fd);
    font-weight: 600;
    letter-spacing: -.03em;
    font-size: clamp(30px, 4.2vw, 44px);
    color: #FBFAF7;
}

.dir-hdr-stat dt { color: rgba(255,210,122,.85); }
.dir-hdr-stat dd { color: #FBFAF7; }
.dir-hdr-stat dd small { color: rgba(251,250,247,.62); }
.dir-hdr-stats { border-top-color: rgba(242,176,61,.22); }

/* The opening paragraph is the first prose on the page, so it gets the
   display face's drop cap in brand green rather than the body grey. */
.dir-intro p:first-child::first-letter { color: var(--brand-mid); }

.dir-facets {
    background: linear-gradient(140deg, var(--brand-light), var(--paper, #FBFAF7));
    border-color: rgba(10,59,46,.14);
}

.dir-facet-label { color: var(--brand); }
.dir-facet-chip { border-color: rgba(10,59,46,.16); }
.dir-facet-chip b { color: var(--brand-mid); }

@media (max-width: 700px) {
    .hero-dark {
        padding: 1.75rem 1.25rem 1.5rem;
        border-radius: 0 0 20px 20px;
    }
}

/* ── On a phone ──────────────────────────────────────────────────────────
   Two 200px fields and a button do not fit 375px, so they wrapped into a
   ragged stack of part-width boxes. Given the width, take all of it. */
@media (max-width: 620px) {
    .hero-home .search-form { flex-direction: column; align-items: stretch; }
    .hero-home .search-form input,
    .hero-home .search-form button { width: 100%; min-width: 0; }

    /* The shoreline is 78px of decoration; on a small screen that is most of
       what is above the fold. */
    .hero-home { padding-bottom: 84px; border-radius: 0 0 24px 24px; }
    .hero-home::after { height: 52px; }

    .hero-home h1 { font-size: clamp(34px, 9vw, 46px); max-width: 100%; }
    .hero-home p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .card, .business-card, .btn, .btn-primary, .btn-ghost { transition: none; }
    .card:hover, .business-card:hover, .btn:active { transform: none; }
}