/* ================================================================
   theme.css — MARINE LAYER
   805 Referrals

   Palette sampled from the coastal photography, not a swatch
   library: fog, dry grass, eucalyptus, deep pacific. The neutral
   is a green-grey, never a warm cream.

   Structure:
     1. Token overrides      (@layer tokens)
     2. Site-wide patterns   (@layer theme)
     3. Component styles     (@layer components)

   Layers are declared in yg-base.css. Don't redeclare them here.
   ================================================================ */


/* ================================================================
   1. TOKEN OVERRIDES
   ================================================================ */

@layer tokens {
  :root {
    /* --- Ground and surface ----------------------------------- */
    --color-bg:          #ECEDE6;   /* fog — page ground, never white */
    --color-bg-alt:      #E3E5DC;   /* sunk — insets, wells */
    --color-surface:     #F8F8F3;   /* bone — cards, raised things */

    /* --- Ink --------------------------------------------------- */
    --color-text:        #17211E;   /* green-black, from the hill shadows */
    --color-heading:     #101917;
    --color-text-muted:  #5F6D68;
    --color-faint:       #8A968F;

    /* --- Brand ------------------------------------------------- */
    --color-primary:     #1E4750;   /* pacific */
    --color-primary-hover: #2B626C;
    --color-primary-subtle: #DCE3E1;
    --color-secondary:   #6B7E6C;   /* eucalyptus */
    --color-accent:      #8E7031;   /* dry grass — rationed, data only */
    --color-link:        var(--color-primary);

    /* --- Lines ------------------------------------------------- */
    --color-line:        rgba(23, 33, 30, 0.14);
    --color-line-soft:   rgba(23, 33, 30, 0.07);

    /* --- Scrim (over photography) ------------------------------ */
    --scrim-rgb:         12, 22, 20;
    --on-photo:          #FCFCF7;
    --on-photo-dim:      rgba(244, 245, 238, 0.76);

    /* --- Typography -------------------------------------------- */
    --font-body:     "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-heading:  "Fraunces", "Iowan Old Style", Georgia, serif;
    --font-size-base:      1rem;
    --line-height-body:    1.65;
    --line-height-heading: 1.12;

    /* --- Spacing ----------------------------------------------- */
    --space-xs:   0.5rem;
    --space-sm:   1rem;
    --space-md:   1.75rem;
    --space-lg:   3.25rem;
    --space-xl:   6rem;

    /* --- Radii ------------------------------------------------- */
    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    16px;
    --radius-xl:    22px;
    --radius-full:  9999px;

    /* --- Shadows — warm-tinted, never neutral grey ------------- */
    --shadow-sm:  0 1px 2px rgba(23, 45, 42, 0.05), 0 4px 12px -8px rgba(23, 45, 42, 0.18);
    --shadow-md:  0 1px 2px rgba(23, 45, 42, 0.05), 0 8px 24px -12px rgba(23, 45, 42, 0.22);
    --shadow-lg:  0 2px 4px rgba(23, 45, 42, 0.06), 0 18px 44px -18px rgba(23, 45, 42, 0.30);
    --shadow-hero: 0 24px 60px -20px rgba(0, 0, 0, 0.55);

    /* --- Motion ------------------------------------------------ */
    --transition-fast: 160ms cubic-bezier(.2, .6, .2, 1);
    --transition-base: 340ms cubic-bezier(.2, .6, .2, 1);

    /* --- Container --------------------------------------------- */
    --container-max-width:  1260px;
    --container-padding:    1.5rem;

    /* --- Header height (used to offset fixed-header pages) ----- */
    --header-h: 74px;
  }

  /* --- Category tints ------------------------------------------
     One per trade, all drawn from the coastal palette. Assigned by
     category — never by charCodeAt — so a business's mark is stable
     and means something. Used on monograms, entry bands, tiles.
     ------------------------------------------------------------- */
  :root {
    --cat-professional-services: #1E4750;
    --cat-real-estate:           #9C7B55;
    --cat-health-wellness:       #5E7360;
    --cat-home-property:         #7A5F45;
    --cat-finance-accounting:    #47585F;
    --cat-marketing-design:      #585672;
    --cat-events-media:          #9A5B3D;
    --cat-mortgage-lending:      #3D5A4C;
    --cat-insurance:             #356168;
    --cat-food-hospitality:      #8A6F35;
    --cat-legal:                 #333F3E;
    --cat-retail-shopping:       #4C766E;
    --cat-nonprofit-community:   #666549;
    --cat-technology-web:        #1F3B4D;
    --cat-beauty-personal:       #856A66;
  }
}


/* ================================================================
   2. SITE-WIDE PATTERNS
   ================================================================ */

@layer theme {

  html {
    scroll-padding-top: calc(var(--header-h) + 1rem);
  }

  body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
  }

  /* Fraunces is a variable face. Most sites set a weight and ignore
     the rest — the optical, softness and wonk axes are what make it
     behave differently at display size than at card size. */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    line-height: var(--line-height-heading);
    font-weight: 400;
    font-variation-settings: "SOFT" 28, "WONK" 0, "opsz" 40;
    letter-spacing: -0.018em;
    text-wrap: balance;
  }

  a {
    color: var(--color-link);
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);

    &:hover { color: var(--color-primary-hover); }
  }

  :where(a, button, input, select, summary):focus-visible {
    outline: 2px solid var(--color-primary-hover);
    outline-offset: 3px;
    border-radius: 4px;
  }

  ::selection {
    background: var(--color-primary);
    color: var(--on-photo);
  }

  /* Eyebrow — Inter, never the serif */
  .eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: var(--space-sm);
  }

  /* --- Buttons ------------------------------------------------- */
  .btn-primary,
  .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.8rem 1.5rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
  }

  .btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--on-photo);
    box-shadow: var(--shadow-sm);

    &:hover {
      background-color: var(--color-primary-hover);
      border-color: var(--color-primary-hover);
      color: var(--on-photo);
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }
  }

  .btn-ghost {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-line);

    &:hover {
      background-color: var(--color-surface);
      border-color: var(--color-primary);
      color: var(--color-primary);
      transform: translateY(-1px);
    }
  }

  /* --- Section rhythm ------------------------------------------ */
  .section { padding-block: var(--space-xl); }
  .section-alt { background-color: var(--color-bg-alt); }

  .section-head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 46rem;
    margin-bottom: var(--space-md);
  }
  .section-head h2 {
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    font-variation-settings: "SOFT" 36, "WONK" 1, "opsz" 72;
    letter-spacing: -0.025em;
    margin: 0;
  }
  .section-head p {
    color: var(--color-text-muted);
    max-width: 44rem;
  }

  /* A rule that carries a label — used above minor sections. Safe to
     put on a heading element: it overrides the display face and the
     variable-font axes the h1-h6 rule sets, so a section can keep its
     place in the document outline while reading as a small label
     rather than as a second headline competing with the masthead. */
  .rule-label {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-family: var(--font-body);
    font-variation-settings: normal;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
    text-wrap: wrap;
    color: var(--color-secondary);
    margin: 0 0 var(--space-sm);
  }
  .rule-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-line);
  }

  /* --- Film grain ----------------------------------------------
     Applied over every photographic or gradient surface. This is
     what stops generated imagery and CSS gradients reading as
     plastic. Parent needs position other than static.
     ------------------------------------------------------------- */
  .grain::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.34;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* --- Scroll reveal --------------------------------------------
     Scoped to .has-js (set by an inline script in the layout head) so a
     failed or blocked yg-reveal.js leaves the page visible rather than
     blank. Reduced motion skips the hiding entirely. */
  @media (prefers-reduced-motion: no-preference) {
    .has-js .rv {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2, .6, .2, 1);
    }
    .has-js .rv.in { opacity: 1; transform: none; }
  }

  main { flex: 1; }
}


/* ================================================================
   3. COMPONENT STYLES
   ================================================================ */

@layer components {

  /* ----------------------------------------------------------
     Site Header
     Pages that open with a photographic hero get a fixed,
     transparent header that floats over the image and resolves
     to solid bone once scrolled. Pages without one keep a normal
     sticky solid header.
     ---------------------------------------------------------- */

  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-line-soft);
    transition: background-color var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base);

    & .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-md);
      padding-block: 1.1rem;
    }

    &.is-scrolled {
      box-shadow: var(--shadow-sm);
    }
  }

  body:has(.dir-hero) .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--color-surface);
    border-bottom-color: var(--color-line-soft);

    & .site-logo { color: var(--color-heading); }
    & .nav-link { color: var(--color-text); }
    & .nav-link:hover { color: var(--color-primary); background-color: var(--color-primary-subtle); }
    & .nav-link.active { color: var(--color-primary); background-color: transparent; }
    & .nav-toggle-bar { background-color: var(--color-text); }
    & .nav-cta {
      background-color: var(--color-primary);
      color: var(--on-photo) !important;
      border-color: var(--color-primary);
    }
    & .nav-cta:hover { background-color: var(--color-primary-hover); color: var(--on-photo) !important; }
  }

  /* Solid, not frosted. backdrop-filter renders the fill far more
     transparent than its alpha in WebKit, and content bled through. */
  body:has(.dir-hero) .site-header.is-scrolled {
    background-color: var(--color-bg);
    box-shadow: var(--shadow-sm);
    border-bottom-color: var(--color-line-soft);

    & .site-logo { color: var(--color-heading); }
    & .nav-link { color: var(--color-text); }
    & .nav-link:hover { color: var(--color-primary); background-color: var(--color-primary-subtle); }
    & .nav-link.active { color: var(--color-primary); background-color: transparent; }
    & .nav-toggle-bar { background-color: var(--color-text); }
    & .nav-cta {
      background-color: var(--color-primary);
      color: var(--on-photo) !important;
      border-color: var(--color-primary);
    }
    & .nav-cta:hover { background-color: var(--color-primary-hover); color: var(--on-photo) !important; }
  }

  .site-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-heading);
    font-variation-settings: "SOFT" 24, "opsz" 30;
    font-weight: 500;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--color-heading);
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    transition: color var(--transition-base);

    &:hover { color: var(--color-primary); }
  }
  .site-logo__mark {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: var(--radius-sm);
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-link {
    display: block;
    padding: 0.45rem 0.8rem;
    font-size: 0.9rem;
    font-weight: 450;
    color: var(--color-text);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: color var(--transition-fast), background-color var(--transition-fast);

    &:hover { color: var(--color-primary); background-color: var(--color-primary-subtle); }
    &.active { color: var(--color-primary); font-weight: 600; }
  }

  .nav-cta {
    padding: 0.5rem 1.15rem;
    background-color: var(--color-primary);
    color: var(--on-photo) !important;
    font-weight: 500;
    font-size: 0.875rem;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-full);
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast);

    &:hover { background-color: var(--color-primary-hover); }
  }

  .nav-toggle {
    display: none;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 9px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
  }
  .nav-toggle-bar {
    display: block;
    width: 100%;
    height: 1.5px;
    background-color: var(--color-text);
    border-radius: var(--radius-full);
    transition: transform var(--transition-base), opacity var(--transition-base),
                background-color var(--transition-base);
  }

  .nav-close {
    display: none;
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
  }
  .nav-close:hover { color: var(--color-primary); }

  @media (max-width: 768px) {
    .nav-toggle { display: flex; }
    .site-nav.is-open .nav-close { display: block; }

    .site-nav {
      display: none;
      flex-direction: column;
      align-items: stretch;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: var(--color-bg);
      border-top: 1px solid var(--color-line-soft);
      border-bottom: 1px solid var(--color-line-soft);
      padding: var(--space-sm);
      gap: 0.5rem;
      box-shadow: var(--shadow-md);

      &.is-open { display: flex; }
    }

    .nav-links { flex-direction: column; align-items: stretch; gap: 0; }

    .nav-link {
      padding: 0.75rem 0.5rem;
      border-bottom: 1px solid var(--color-line-soft);
      border-radius: 0;
    }

    .nav-cta { text-align: center; padding: 0.75rem 1.25rem; }

    /* The open drawer is always solid, even over a photo hero. */
    body:has(.dir-hero) .site-header .site-nav.is-open {
      background-color: var(--color-bg);
      & .nav-link { color: var(--color-text); }
      & .nav-cta {
        background-color: var(--color-primary);
        color: var(--on-photo) !important;
        border-color: var(--color-primary);
        backdrop-filter: none;
      }
    }
  }


  /* ----------------------------------------------------------
     Search-first page headers
     Search is the product. Photography and dashboard-like counters
     stay out of the way on both the homepage and directory.
     ---------------------------------------------------------- */

  .dir-hero {
    position: relative;
    padding: calc(var(--header-h) + 2.75rem) 0 3rem;
    color: var(--color-text);
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-line-soft);
  }

  .dir-hero--directory {
    padding-top: calc(var(--header-h) + 1.75rem);
    padding-bottom: 2rem;
  }

  .dir-hero .container { width: 100%; }

  .dir-hero__panel { max-width: 52rem; }

  .dir-hero__eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin: 0;
  }

  .dir-hero__title {
    color: var(--color-heading);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 300;
    font-variation-settings: "SOFT" 46, "WONK" 1, "opsz" 120;
    letter-spacing: -0.03em;
    line-height: 1.02;
    margin: 0.65rem 0 0;
    max-width: 18ch;
  }
  .dir-hero__title em {
    font-style: italic;
    color: var(--color-primary);
    font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 120;
    white-space: nowrap;
  }

  .dir-hero--directory .dir-hero__title {
    font-size: clamp(1.75rem, 3.4vw, 2.4rem);
    line-height: 1.08;
    max-width: 24ch;
  }

  /* --- Search --------------------------------------------------- */
  .dir-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    max-width: 48rem;
    margin: 1.4rem 0 0;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: 13px;
    padding: 1.05rem 1.15rem;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }
  .dir-search__icon {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1;
    pointer-events: none;
  }
  .dir-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    color: var(--color-text);
    outline: none;
    padding: 0;

    &::placeholder { color: var(--color-faint); }
    &::-webkit-search-cancel-button { display: none; }
  }
  .dir-search:focus-within {
    border-color: var(--color-primary-hover);
    box-shadow: var(--shadow-sm), 0 0 0 2px color-mix(in srgb, var(--color-primary) 18%, transparent);
  }
  .dir-search__clear {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--radius-full);
    line-height: 1;

    &:hover { color: var(--color-text); background: var(--color-bg-alt); }
  }

  @media (max-width: 760px) {
    .dir-hero {
      padding: calc(var(--header-h) + 1.6rem) 0 1.9rem;
    }
    .dir-hero--directory {
      padding-top: calc(var(--header-h) + 1.25rem);
      padding-bottom: 1.5rem;
    }
    .dir-hero__title {
      font-size: clamp(2rem, 10vw, 2.75rem);
      max-width: 17ch;
    }
    .dir-hero--directory .dir-hero__title {
      font-size: clamp(1.65rem, 8vw, 2rem);
    }
    .dir-search {
      margin-top: 1.1rem;
      padding: 0.95rem 1rem;
    }
    .dir-search__input { font-size: 1rem; }
  }

  /* --- Suggested searches --------------------------------------- */
  .dir-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1rem;
    max-width: 36rem;
  }
  .dir-suggest__label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    align-self: center;
    margin-right: 0.2rem;
  }
  .dir-suggest a {
    font-size: 0.75rem;
    color: var(--color-primary);
    border: 1px solid var(--color-line);
    background: var(--color-bg);
    border-radius: var(--radius-full);
    padding: 0.28rem 0.75rem;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);

    &:hover { background: var(--color-primary-subtle); border-color: var(--color-primary); color: var(--color-primary); }
  }

  /* --- Hero stat line -------------------------------------------- */
  .dir-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.75rem;
    margin-top: var(--space-md);
    padding-top: 1.1rem;
    border-top: 1px solid var(--color-line);
    max-width: 36rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
  }
  .dir-stats span.dir-stats__item { display: inline-flex; align-items: baseline; gap: 0.4rem; }
  .dir-stats__num {
    font-family: var(--font-heading);
    font-variation-settings: "SOFT" 20, "opsz" 20;
    font-weight: 500;
    font-size: 1.0625rem;
    color: var(--color-heading);
    font-variant-numeric: tabular-nums;
  }
  .dir-stats__sep { display: none; }


  /* ----------------------------------------------------------
     Directory body — filter rail + results
     ---------------------------------------------------------- */

  .dir-body { padding: 2.25rem 0 var(--space-xl); }

  @media (max-width: 760px) {
    .dir-body { padding-top: 1.5rem; }
  }

  .dir-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
  }
  @media (max-width: 900px) {
    .dir-layout { grid-template-columns: 1fr; gap: var(--space-md); }
  }

  /* --- Filter rail ------------------------------------------------
     Multi-select, and nothing collapses behind a "show more" — an
     option you cannot see is an option you do not know exists. The
     town list scrolls instead. Below 900px the whole rail becomes a
     sheet: 15 trades and 27 towns with nothing hidden is far too tall
     to sit above the results on a phone.
     ---------------------------------------------------------------- */

  .dir-filters {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-height: calc(100vh - var(--header-h) - 3rem);
    /* Safety net for short viewports. The groups below refuse to
       shrink, so without this the trade list would be squeezed under
       its own height and overlap the town list. */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-line) transparent;
  }

  .dir-filters__head { display: none; }

  .dir-filters__group {
    margin: 0;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
  }

  .dir-filters__title {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-faint);
    margin: 0 0 0.5rem;
  }

  .dir-chips { display: flex; flex-direction: column; }
  .dir-chips--scroll {
    overflow-y: auto;
    max-height: 18rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-line) transparent;
  }

  .dir-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.42rem 0;
    border: 0;
    border-bottom: 1px solid var(--color-line-soft);
    background: transparent;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    transition: color var(--transition-fast);
  }
  .dir-chip:hover:not(:disabled) { color: var(--color-text); }
  .dir-chip:hover:not(:disabled) .dir-chip__box { border-color: var(--color-primary); }

  /* A box, because these combine. A rail of plain rows gives no clue
     that a second choice adds rather than replaces the first. */
  .dir-chip__box {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--color-line);
    border-radius: 4px;
    background: var(--color-surface);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
  }
  .dir-chip.is-active .dir-chip__box {
    border-color: var(--color-primary);
    background: var(--color-primary)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.2 3.6 6.8 9 1.2' fill='none' stroke='%23F8F8F3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      no-repeat center;
  }

  .dir-chip__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dir-chip.is-active { color: var(--color-heading); font-weight: 600; }

  .dir-chip__n {
    margin-left: auto;
    padding-left: 0.5rem;
    color: var(--color-faint);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
  }
  .dir-chip.is-active .dir-chip__n { color: var(--color-primary); }

  /* Counts answer "what happens if I click this", so a combination
     that leads nowhere reads as zero before it is committed to. Empty
     options dim in place rather than disappearing, which would reflow
     the list under the cursor. */
  .dir-chip.is-empty { opacity: 0.34; cursor: default; }

  .dir-reset {
    align-self: flex-start;
    border: 0;
    background: none;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0;

    &:hover { text-decoration: underline; }
  }

  /* --- Active filters -------------------------------------------
     Repeated above the results so filter state is unmistakable, and
     removable from where the results are — on a phone the rail is
     behind a button and the pills are the only visible state. */
  .dir-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 var(--space-sm);
  }
  .dir-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem 0.3rem 0.8rem;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }
  .dir-pill__x { font-size: 1rem; line-height: 1; opacity: 0.5; }
  .dir-pill:hover .dir-pill__x { opacity: 1; }
  .dir-pill--clear {
    background: none;
    color: var(--color-text-muted);
    padding-inline: 0.5rem;

    &:hover { color: var(--color-text); text-decoration: underline; }
  }

  /* Native selects are the loudest "assembled, not designed" tell.
     Kept in the DOM for the sort control only, restyled hard. */
  .dir-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.85rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235F6D68' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color var(--transition-fast);

    &:hover { border-color: var(--color-primary); }
  }
  .dir-select--sm { width: auto; }

  /* --- Mobile sheet ---------------------------------------------- */
  .dir-filters__open { display: none; }
  .dir-scrim { display: none; }

  @media (max-width: 900px) {
    .dir-filters {
      position: fixed;
      /* above the fixed site header, which sits at 100 */
      z-index: 120;
      inset: 0 auto 0 0;
      width: min(21rem, 88vw);
      max-height: none;
      gap: var(--space-sm);
      padding: var(--space-sm) 1.25rem var(--space-lg);
      background: var(--color-bg);
      box-shadow: var(--shadow-lg);
      overflow-y: auto;
      overscroll-behavior: contain;
      visibility: hidden;
      transform: translateX(-102%);
      /* visibility is stepped, not interpolated: it flips instantly on
         open and waits out the slide on close. Putting it in the
         transition list proper wedges the panel shut in WebKit — the
         transition never starts on an off-screen hidden element, so
         both properties stay stuck at their from-values. */
      transition: transform var(--transition-base),
                  visibility 0s linear var(--transition-base);
    }
    .dir-filters.is-open {
      visibility: visible;
      transform: none;
      transition: transform var(--transition-base), visibility 0s;
    }

    .dir-filters__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--color-line);
    }
    .dir-filters__heading {
      margin: 0;
      font-family: var(--font-heading);
      font-variation-settings: "SOFT" 28, "opsz" 30;
      font-size: 1.125rem;
      font-weight: 500;
      color: var(--color-heading);
    }
    .dir-filters__close {
      border: 0;
      background: none;
      color: var(--color-text-muted);
      font-size: 1rem;
      cursor: pointer;
      padding: 0.4rem;
    }

    .dir-chips--scroll { max-height: none; overflow: visible; }

    .dir-filters__open {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.5rem 0.95rem;
      border: 1px solid var(--color-line);
      border-radius: var(--radius-full);
      background: var(--color-surface);
      color: var(--color-text);
      font-family: var(--font-body);
      font-size: 0.8125rem;
      cursor: pointer;
    }
    .dir-filters__open[aria-expanded="true"],
    .dir-filters__open:hover { border-color: var(--color-primary); }

    .dir-scrim {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 119;
      background: rgba(12, 22, 20, 0.42);
    }
    .dir-scrim[hidden] { display: none; }
    body.dir-sheet-open { overflow: hidden; }
  }

  /* --- Results bar ---------------------------------------------- */
  .dir-results__bar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-line);
    margin-bottom: var(--space-md);
  }
  .dir-results__count {
    margin: 0;
    font-family: var(--font-heading);
    font-variation-settings: "SOFT" 30, "opsz" 40;
    font-weight: 400;
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    letter-spacing: -0.02em;
    color: var(--color-heading);
  }


  .dir-results__tools {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }


  /* ----------------------------------------------------------
     Result row
     The most-repeated object on the site — 721 of them.

     One column, full width. A three-up grid of equal tiles makes
     every member look identical and leaves no room for the owner's
     name, which is the thing people search by when they are looking
     for a person rather than a business.

     One bone panel with hairline rules, not 40 stacked cards: at this
     length the list has to read as a list.
     ---------------------------------------------------------- */

  .dir-list {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }

  .dir-row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 1.1rem;
    padding: 0.95rem 1.35rem;
    color: inherit;
    text-decoration: none;
    transition: background-color var(--transition-fast);
  }
  .dir-row + .dir-row { box-shadow: inset 0 1px 0 var(--color-line-soft); }
  .dir-row:hover { background: var(--color-bg-alt); }

  /* The trade tint, earned on hover rather than shouted on every row. */
  .dir-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--cat-tint, var(--color-primary));
    opacity: 0;
    transition: opacity var(--transition-fast);
  }
  .dir-row:hover::before { opacity: 1; }

  .dir-row__logo {
    width: 48px;
    height: 48px;
    border-radius: 11px;
    object-fit: contain;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-line-soft);
  }

  /* Monogram is the system, not the fallback — 274 members have no
     logo at all, and the colour tells you their trade. */
  .dir-row__logo--mono {
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-variation-settings: "SOFT" 20, "opsz" 30;
    font-weight: 500;
    font-size: 1rem;
    color: var(--on-photo);
    border: 0;
    background: var(--cat-tint, var(--color-primary));
  }

  .dir-row__body { min-width: 0; }

  .dir-row__trade {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: 0.15rem;
  }

  .dir-row__name {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 500;
    font-variation-settings: "SOFT" 26, "opsz" 30;
    letter-spacing: -0.012em;
    line-height: 1.25;
    color: var(--color-heading);
    transition: color var(--transition-fast);
    /* 19 names run past 60 characters, one to 222. Always clamp. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .dir-row:hover .dir-row__name { color: var(--color-primary); }

  .dir-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem 0;
    margin-top: 0.22rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
  }
  /* Separator rides on the item BEFORE it, inside that item's box, so
     a wrapped line can never open with a dangling dot. */
  .dir-row__meta > span:not(:last-child)::after {
    content: "·";
    margin: 0 0.5rem;
    color: var(--color-faint);
  }
  .dir-row__owner { color: var(--color-text); }
  .dir-row__site { color: var(--color-primary); }

  .dir-row__blurb {
    margin: 0.3rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    /* 476 of 506 blurbs are scraped and cut mid-sentence — clamping
       means the ellipsis lands where we chose it to. */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .dir-row__aside {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    color: var(--color-faint);
  }
  .dir-row__go {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-top: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition-fast), color var(--transition-fast);
  }
  .dir-row:hover .dir-row__go {
    color: var(--color-primary);
    transform: rotate(45deg) translate(2px, -2px);
  }

  @media (max-width: 560px) {
    .dir-row { padding: 0.85rem 0.95rem; gap: 0 0.8rem; }
    .dir-row__logo { width: 40px; height: 40px; border-radius: 9px; }
    .dir-row__blurb, .dir-row__go { display: none; }
  }

  /* Search hits are marked so a result shows why it matched — "sheryl"
     landing on Cheryl reads as a correction, not a wrong answer. */
  .dir-row mark {
    background: rgba(142, 112, 49, 0.20);
    color: inherit;
    border-radius: 3px;
    padding: 0 0.12em;
  }


  /* ----------------------------------------------------------
     Business card
     Homepage strips and the related strips on a business page. The
     directory itself uses .dir-row. No border — bone surface lifted
     off fog by a warm shadow.
     ---------------------------------------------------------- */

  .dir-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* Cards in a row share a height. Row 2 (the description) takes all the
       slack, so the foot sits on the bottom edge and the ~30% of members
       with no description get a short card, not a hole in the middle. */
    grid-template-rows: auto 1fr auto;
    gap: 0 1rem;
    padding: 1.15rem 1.25rem;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
  }
  .dir-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
  }

  .dir-card__logo {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    border-radius: 12px;
    object-fit: contain;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-line-soft);
  }

  /* Monogram is the system, not the fallback — 274 businesses
     have no logo and 150 have no logo and no description. */
  .dir-card__logo--mono {
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-variation-settings: "SOFT" 20, "opsz" 30;
    font-weight: 500;
    font-size: 1.0625rem;
    letter-spacing: 0.01em;
    color: var(--on-photo);
    border: 0;
    background: var(--cat-tint, var(--color-primary));
  }

  .dir-card__id { min-width: 0; grid-column: 2; grid-row: 1; }

  .dir-card__trade {
    display: block;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: 0.3rem;
  }
  .dir-card__trade i { display: none; }

  .dir-card__name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.1875rem;
    font-weight: 500;
    font-variation-settings: "SOFT" 26, "opsz" 30;
    letter-spacing: -0.012em;
    line-height: 1.22;
    /* 19 names run past 60 chars, one to 222. Always clamp. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .dir-card__name a {
    color: var(--color-heading);
    text-decoration: none;

    &:hover { color: var(--color-primary); }
  }
  /* Whole card is the target; the name keeps the accessible name. */
  .dir-card__name a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
  }

  .dir-card__blurb {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    /* 476 of 506 blurbs are scraped and cut mid-sentence — clamping
       to two lines means the ellipsis lands where we chose it to. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .dir-card__foot {
    grid-column: 2;
    grid-row: 3;
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--color-line-soft);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
  }
  .dir-card__foot > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dir-card__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-faint);
    flex: 0 0 auto;
  }
  .dir-card__site {
    position: relative;
    z-index: 1;
    font-size: 0.8125rem;
    white-space: nowrap;
    color: var(--color-primary);

    &:hover { text-decoration: underline; }
  }

  /* --- Empty / more --------------------------------------------- */
  .dir-empty {
    text-align: center;
    padding: var(--space-xl) var(--space-sm);
    color: var(--color-text-muted);
  }
  .dir-empty i { font-size: 1.75rem; opacity: 0.35; }
  .dir-empty__title {
    font-family: var(--font-heading);
    font-variation-settings: "SOFT" 30, "opsz" 40;
    font-size: 1.25rem;
    color: var(--color-heading);
    margin: var(--space-sm) 0 0.25rem;
  }
  .dir-empty__hint { margin: 0; font-size: 0.9rem; }

  /* Offered when every token had to match and none did together.
     "roofer in paso robles" is genuinely empty, but there are three
     roofers elsewhere and that is what was being looked for. */
  .dir-relax { margin: var(--space-sm) 0 0; font-size: 0.9375rem; }
  .dir-relax__btn {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;

    &:hover { text-decoration: underline; }
  }

  .dir-more {
    display: block;
    margin: var(--space-md) auto 0;
    padding: 0.7rem 1.7rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

    &:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
  }

  .dir-noscript {
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
  }



  /* ----------------------------------------------------------
     Home page

     The front door, and deliberately a different kind of page from
     the directory: centred masthead over the fog ground rather than
     a left-aligned working header over bone. Nothing here is
     photographic — the visual interest comes from the members' own
     logos and from the trade tints, both of which are real.
     ---------------------------------------------------------- */

  /* One continuous ground. The hero's own surface colour and bottom
     rule are what made the old page read as three unrelated slabs. */
  .dir-hero--home {
    background-color: transparent;
    border-bottom: 0;
    padding: calc(var(--header-h) + 4.5rem) 0 0;
    text-align: center;
  }
  .dir-hero--home .dir-hero__panel {
    max-width: 46rem;
    margin-inline: auto;
  }
  .dir-hero--home .dir-hero__title {
    /* Weight 300 at this size read as a whisper. The masthead is the
       one place on the site that should carry real presence. */
    font-weight: 400;
    font-size: clamp(2.5rem, 5.6vw, 4rem);
    font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 144;
    letter-spacing: -0.032em;
    line-height: 1.04;
    max-width: 20ch;
    margin: 0.75rem auto 0;
    text-wrap: balance;
  }
  .dir-hero--home .dir-search {
    margin-inline: auto;
    max-width: 40rem;
  }

  /* --- Stat row -------------------------------------------------
     The one place on the site where a big serif numeral earns its
     size. Hidden until the fetch fills it, so a failure leaves no
     row of empty slots. */
  .home-stats {
    display: none;
    list-style: none;
    margin: 2rem 0 0;
    padding: 1.4rem 0 0;
    border-top: 1px solid var(--color-line-soft);
    gap: clamp(2rem, 6vw, 4.5rem);
    justify-content: center;
  }
  .home-stats.is-ready { display: flex; }

  .home-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
  }
  .home-stat__n {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3.4vw, 2.125rem);
    font-weight: 400;
    font-variation-settings: "SOFT" 24, "opsz" 60;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-heading);
    font-variant-numeric: tabular-nums;
  }
  .home-stat__l {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  /* Sections below the masthead sit closer together than the site-wide
     rhythm — the page is one sequence, not a stack of separate pages. */
  .section--tight { padding-block: 2.5rem; }
  .dir-hero--home + .section--tight { padding-top: var(--space-md); }

  /* --- Trade index ----------------------------------------------
     Fifteen rows of name-and-count. Column-major so the order still
     reads largest-first down each column rather than zig-zagging. */
  .home-trades {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
  }

  .home-trade {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.72rem 0.25rem 0.72rem 0;
    border-bottom: 1px solid var(--color-line-soft);
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-fast), border-color var(--transition-fast);

    &:hover {
      color: var(--color-primary);
      border-bottom-color: var(--color-line);
    }
  }
  /* The trade tint, visible at last. The old photo tiles set the same
     scrim over all fifteen, so the colour system never reached the eye. */
  .home-trade__mark {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--cat-tint, var(--color-primary));
    transform: translateY(-1px);
    transition: transform var(--transition-fast);
  }
  .home-trade:hover .home-trade__mark { transform: translateY(-1px) scale(1.35); }

  .home-trade__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
  }
  .home-trade__n {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    color: var(--color-faint);
    font-variant-numeric: tabular-nums;
  }

  /* --- Rotating sample -------------------------------------------- */
  .home-picks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: var(--space-sm);
  }

  .home-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--space-md);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;

    & i { font-size: 0.85em; transition: transform var(--transition-fast); }
    &:hover i { transform: translateX(3px); }
  }

  /* --- Towns -------------------------------------------------------
     Set as a flowing run of place names rather than a second ruled
     index, so two consecutive lists don't collapse into one. */
  .home-towns {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: clamp(1.25rem, 3vw, 2.25rem);
    row-gap: 0.7rem;
  }
  .home-town {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--color-heading);
    text-decoration: none;
    transition: color var(--transition-fast);

    &:hover { color: var(--color-primary); }
    &:hover .home-town__name { text-decoration: underline; text-underline-offset: 0.22em; }
  }
  .home-town__name {
    font-family: var(--font-heading);
    font-size: clamp(1.0625rem, 1.9vw, 1.3125rem);
    font-weight: 400;
    font-variation-settings: "SOFT" 26, "opsz" 36;
    letter-spacing: -0.014em;
  }
  .home-town__n {
    font-size: 0.75rem;
    color: var(--color-faint);
    font-variant-numeric: tabular-nums;
  }

  /* --- Close -------------------------------------------------------
     What this directory is and how to get into it. */
  .home-close {
    padding-block: var(--space-lg) var(--space-xl);
  }
  .home-close__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-line);
  }
  .home-close__lede {
    margin: 0;
    max-width: 40rem;
    color: var(--color-text-muted);
  }
  .home-close__lede em {
    font-style: normal;
    color: var(--color-text);
  }
  .home-close .btn-ghost { flex: 0 0 auto; }

  @media (max-width: 900px) {
    .home-trades {
      grid-template-rows: repeat(8, auto);
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    .dir-hero--home { padding-top: calc(var(--header-h) + 2.25rem); }
    .home-stats {
      margin-top: 1.5rem;
      padding-top: 1.1rem;
      gap: 1.5rem;
    }
    /* Column-major ordering has no meaning in one column. */
    .home-trades {
      grid-auto-flow: row;
      grid-template-rows: none;
      grid-template-columns: minmax(0, 1fr);
    }
    .home-picks { grid-template-columns: minmax(0, 1fr); }
    .home-close__inner { flex-direction: column; align-items: flex-start; }
  }


  /* ----------------------------------------------------------
     Business entry (detail page)
     The business is the header. Category color is a quiet identifier,
     not a full-width decorative background.
     ---------------------------------------------------------- */

  .biz { padding: 0 0 var(--space-xl); }
  .biz__wrap { --container-max-width: 66rem; }

  /* --- Header ---------------------------------------------------- */
  .biz__head {
    color: var(--color-text);
    padding: 1.4rem 0 2.25rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-line-soft);
  }

  .biz__head-inner { position: relative; }
  .biz__head-inner::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.5rem;
    width: 3px;
    border-radius: var(--radius-full);
    background: var(--cat-tint, var(--color-primary));
  }

  .biz__back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-decoration: none;
    margin-bottom: 1.25rem;

    &:hover { color: var(--color-primary); }
  }

  .biz__id {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0 1.35rem;
  }

  .biz__logo {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-alt);
    object-fit: contain;
    padding: 7px;
    border: 1px solid var(--color-line-soft);
  }
  .biz__logo--mono {
    display: grid;
    place-items: center;
    padding: 0;
    font-family: var(--font-heading);
    font-variation-settings: "SOFT" 24, "opsz" 48;
    font-weight: 500;
    font-size: 1.75rem;
    color: var(--on-photo);
    background: var(--cat-tint, var(--color-primary));
    border: 0;
  }

  .biz__id-text { min-width: 0; }

  .biz__name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 2.85rem);
    font-weight: 400;
    font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 100;
    letter-spacing: -0.028em;
    line-height: 1.06;
    color: var(--color-heading);
    max-width: 22ch;
  }
  .biz__name.is-long {
    font-size: clamp(1.15rem, 2.1vw, 1.5rem);
    line-height: 1.22;
    max-width: 46ch;
    font-variation-settings: "SOFT" 20, "opsz" 24;
  }

  .biz__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem 0;
    margin: 0.55rem 0 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
  }
  .biz__meta > span:not(:last-child)::after { content: "·"; margin: 0 0.6rem; }
  .biz__owner { color: var(--color-text); }

  .biz__actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 1.25rem 0 0;
  }

  .biz__cat {
    margin: 0.9rem 0 0;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  @media (max-width: 700px) {
    .biz__head { padding: 1rem 0 1.6rem; }
    .biz__back { margin-bottom: 1rem; }
    .biz__meta { display: block; }
    .biz__meta > span { display: block; }
    .biz__meta > span:not(:last-child)::after { content: none; }

    .biz__id { grid-template-columns: auto minmax(0, 1fr); gap: 0 1rem; }
    .biz__logo { width: 60px; height: 60px; border-radius: 12px; }
    .biz__logo--mono { font-size: 1.3rem; }
    .biz__name { font-size: clamp(1.65rem, 8vw, 2.1rem); }
    .biz__actions { margin-top: 1rem; }
    .biz__actions .btn-primary,
    .biz__actions .btn-ghost { flex: 1 1 auto; justify-content: center; }
  }

  /* --- Body ------------------------------------------------------- */
  .biz__body { padding-top: var(--space-sm); }

  /* A lead paragraph rather than an "About" section. 476 of 506
     descriptions are scraped and cut mid-sentence, so they are texture,
     not a component the layout should depend on. */
  .biz__blurb {
    margin: var(--space-md) 0 0;
    font-family: var(--font-heading);
    font-variation-settings: "SOFT" 18, "opsz" 20;
    font-size: 1.1875rem;
    font-weight: 300;
    line-height: 1.62;
    color: var(--color-text);
    max-width: 58ch;
  }

  .biz__section { margin: var(--space-lg) 0 0; }

  .biz__h2 {
    margin: 0 0 0.8rem;
    font-family: var(--font-heading);
    font-variation-settings: "SOFT" 28, "opsz" 30;
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.008em;
    text-transform: none;
    color: var(--color-heading);
  }

  /* Service tags link back to directory searches. */
  .biz__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .biz__tag {
    display: inline-block;
    padding: 0.32rem 0.8rem;
    border: 1px solid var(--color-line-soft);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: color var(--transition-fast),
                border-color var(--transition-fast),
                background-color var(--transition-fast);
  }
  .biz__tag:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
  }

  /* ----------------------------------------------------------
     Category tint on entry pages
     The per-business JSON carries the trade label, not a slug, so
     the tint is keyed off the label. Ampersands are unescaped here
     because the attribute value is compared post-parse.
     ---------------------------------------------------------- */
  [data-cat="Professional Services"] { --cat-tint: var(--cat-professional-services); --cat-photo: url("/images/categories/professional-services.webp"); }
  [data-cat="Real Estate"] { --cat-tint: var(--cat-real-estate); --cat-photo: url("/images/categories/real-estate.webp"); }
  [data-cat="Health & Wellness"] { --cat-tint: var(--cat-health-wellness); --cat-photo: url("/images/categories/health-wellness.webp"); }
  [data-cat="Home & Property Services"] { --cat-tint: var(--cat-home-property); --cat-photo: url("/images/categories/home-property.webp"); }
  [data-cat="Finance & Accounting"] { --cat-tint: var(--cat-finance-accounting); --cat-photo: url("/images/categories/finance-accounting.webp"); }
  [data-cat="Marketing & Design"] { --cat-tint: var(--cat-marketing-design); --cat-photo: url("/images/categories/marketing-design.webp"); }
  [data-cat="Events & Media"] { --cat-tint: var(--cat-events-media); --cat-photo: url("/images/categories/events-media.webp"); }
  [data-cat="Mortgage & Lending"] { --cat-tint: var(--cat-mortgage-lending); --cat-photo: url("/images/categories/mortgage-lending.webp"); }
  [data-cat="Insurance"] { --cat-tint: var(--cat-insurance); --cat-photo: url("/images/categories/insurance.webp"); }
  [data-cat="Food & Hospitality"] { --cat-tint: var(--cat-food-hospitality); --cat-photo: url("/images/categories/food-hospitality.webp"); }
  [data-cat="Legal"] { --cat-tint: var(--cat-legal); --cat-photo: url("/images/categories/legal.webp"); }
  [data-cat="Retail & Shopping"] { --cat-tint: var(--cat-retail-shopping); --cat-photo: url("/images/categories/retail-shopping.webp"); }
  [data-cat="Nonprofit & Community"] { --cat-tint: var(--cat-nonprofit-community); --cat-photo: url("/images/categories/nonprofit-community.webp"); }
  [data-cat="Technology & Web"] { --cat-tint: var(--cat-technology-web); --cat-photo: url("/images/categories/technology-web.webp"); }
  [data-cat="Beauty & Personal Care"] { --cat-tint: var(--cat-beauty-personal); --cat-photo: url("/images/categories/beauty-personal.webp"); }

  /* --- Related strip --------------------------------------------- */
  .biz__related { margin-top: var(--space-lg); }
  .biz__related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-sm);
  }


  /* ----------------------------------------------------------
     Site Footer
     ---------------------------------------------------------- */

  .site-footer {
    background-color: #14201E;
    color: rgba(236, 237, 230, 0.72);
    padding-block: var(--space-lg);
    margin-top: auto;

    & a {
      color: rgba(236, 237, 230, 0.72);
      text-decoration: none;
      transition: color var(--transition-fast);

      &:hover { color: var(--on-photo); }
    }
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
  }

  .footer-brand {
    & .site-logo {
      display: block;
      font-family: var(--font-heading);
      font-variation-settings: "SOFT" 30, "opsz" 40;
      font-weight: 500;
      font-size: 1.25rem;
      color: var(--on-photo);
      margin-bottom: 0.6rem;
    }
    & .site-logo:hover { color: var(--on-photo); }
    & p {
      font-size: 0.875rem;
      color: rgba(236, 237, 230, 0.56);
      line-height: 1.6;
      max-width: 34ch;
    }
  }

  .site-footer h4 {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(236, 237, 230, 0.5);
    margin-bottom: 0.9rem;
  }

  .site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
  }

  .site-footer address {
    font-style: normal;
    font-size: 0.875rem;
    color: rgba(236, 237, 230, 0.56);
  }

  .site-footer i { margin-right: 0.4em; opacity: 0.6; }

  .social-links {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;

    & a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: var(--radius-full);
      background-color: rgba(236, 237, 230, 0.08);
      color: rgba(236, 237, 230, 0.72);
      font-size: 0.9rem;
      transition: background-color var(--transition-fast), color var(--transition-fast);

      &:hover { background-color: var(--on-photo); color: #14201E; }
    }
    & a i { margin-right: 0; }
  }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xs);
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(236, 237, 230, 0.1);
    font-size: 0.8125rem;
    color: rgba(236, 237, 230, 0.44);

    & a {
      color: rgba(236, 237, 230, 0.44);
      &:hover { color: var(--on-photo); }
    }
  }

  @media (max-width: 960px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: span 2; }
  }
  @media (max-width: 520px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-brand { grid-column: span 1; }
    .footer-bottom { flex-direction: column; text-align: center; }
  }


  /* ----------------------------------------------------------
     Privacy page
     ---------------------------------------------------------- */

  .legal-page__inner { max-width: 48rem; }
  .legal-page h1 { margin-bottom: 0.25rem; }
  .legal-page__updated {
    margin-bottom: var(--space-md);
    color: var(--color-text-muted);
    font-size: 0.875rem;
  }
  .legal-page h2 {
    margin-top: var(--space-md);
    margin-bottom: 0.4rem;
    font-size: 1.25rem;
  }
  .legal-page p + p { margin-top: 0.75rem; }


  /* ----------------------------------------------------------
     Reusable content components
     ---------------------------------------------------------- */

  .hero {
    padding-block: var(--space-xl);
    background-color: var(--color-bg-alt);

    & .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-lg);
      align-items: center;

      @media (max-width: 768px) { grid-template-columns: 1fr; }
    }
  }
  .hero-content h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-variation-settings: "SOFT" 44, "WONK" 1, "opsz" 120;
    font-weight: 300;
    margin-bottom: var(--space-sm);
  }
  .hero-content p {
    font-size: 1.0625rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
    max-width: 46ch;
  }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .hero-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }

  .split-section { padding-block: var(--space-xl); }
  .split-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: center;
  }
  .split-reverse .split-inner {
    direction: rtl;
    & > * { direction: ltr; }
  }
  .split-media img, .split-media video {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  .split-content h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: var(--space-sm);
  }
  .split-body {
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
    & p + p { margin-top: 1em; }
  }
  @media (max-width: 768px) {
    .split-inner { grid-template-columns: 1fr; }
    .split-reverse .split-inner { direction: ltr; }
  }
}