.sg-owner-only{display:none!important}body.sg-has-listing .sg-owner-only{display:inline-block!important}
  /* ===== mobile / tablet header: Join left, logo centred, menu right ===== */
  @media (max-width: 1024px) {
    header .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 12px; }
    header .nav > .logo { grid-column: 2; grid-row: 1; justify-self: center; }
    header .nav > .nav-links { display: none !important; }
    header .nav > .nav-cta { display: contents; }
    header .nav .nav-cta .btn-cedar { display: inline-flex !important; grid-column: 1; grid-row: 1; justify-self: start; order: 0; white-space: nowrap; }
    header .nav .nav-cta .nav-toggle { display: inline-flex; grid-column: 3; grid-row: 1; justify-self: end; margin-right: -10px; order: 0; }
    header .nav .nav-cta .sg-auth-slot,
    header .nav .nav-cta .btn-ghost { display: none !important; }
  }

  /* ===== homepage practitioner/space cards: name, category · location,
     username, description, then the other categories it's listed in ===== */
  #homeListings .card-body { gap: 0; }
  #homeListings .card-title { margin: 0; }
  .card-catloc { margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
  .card-catloc .cc-cat { font-weight: 600; color: var(--cedar); }
  .card-catloc .cc-sep { opacity: 0.7; }
  .card-catloc .cc-loc { white-space: nowrap; }
  /* hairline under the business name */
  /* name, then what they do + location, then the dividing line */
  #homeListings .card-title { padding-bottom: 0; border-bottom: 0; }
  #homeListings .card-catloc { margin-top: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line-strong, rgba(28,24,16,0.18)); }
  #homeListings .card-handle { margin-top: 10px; }
  #homeListings .card-catloc + .card-desc { margin-top: 10px; }
  /* Book (practitioners) / Visit (spaces) */
  .card-action {
    display: block; margin-top: 14px; padding: 10px 14px; border-radius: 999px;
    background: var(--cedar); color: var(--cream); text-align: center; text-decoration: none;
    font-size: 13.5px; font-weight: 700; line-height: 1.2;
    transition: background 0.2s ease;
  }
  .card-action:hover { background: var(--cedar-deep); color: var(--cream); }
  .card-action:focus-visible { outline: 2px solid var(--cedar-deep); outline-offset: 2px; }
  .card-handle { margin-top: 4px; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card-desc {
    margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .card-tags { list-style: none; margin: auto 0 0; padding: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .card-tags li {
    font-size: 11.5px; line-height: 1; padding: 6px 10px; border-radius: 999px;
    background: var(--cream-2); color: var(--ink-soft); border: 1px solid var(--line);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .card-tags li.more { color: var(--muted); }
  @media (max-width: 640px) {
    .card-catloc { font-size: 11.5px; }
    #homeListings .card-catloc { margin-top: 4px; padding-bottom: 8px; }
    #homeListings .card-handle { margin-top: 8px; }
    #homeListings .card-catloc + .card-desc { margin-top: 8px; }
    .card-action { margin-top: 10px; padding: 8px 10px; font-size: 12.5px; }
    .card-handle { font-size: 11.5px; margin-top: 3px; }
    .card-desc { font-size: 12.5px; margin-top: 7px; line-height: 1.4; }
    .card-tags { padding-top: 10px; gap: 5px; }
    .card-tags li { font-size: 10.5px; padding: 5px 8px; }
  }


  /* ===== brand promise under "Community on Sanctuary Ground." ===== */
  .sg-promise {
    margin: 22px 0 0; font-family: var(--display); font-weight: 400;
    font-size: clamp(19px, 1.7vw, 24px); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-soft);
    font-variation-settings: "opsz" 72, "SOFT" 50;
  }
  .sg-promise em { font-style: italic; color: var(--cedar); }
  #listings h2 + .sg-values { margin-top: 22px; }
  .sg-values {                     /* each item carries a leading dot; the list is shifted left and clipped,
                                     so a dot that starts any line (first or wrapped) is never visible */
    list-style: none; margin: 12px 0 0 -32px; padding: 0; display: flex; flex-wrap: wrap; align-items: center;
    row-gap: 8px; clip-path: inset(-4px -4px -4px 32px);
  }
  .sg-values li {
    font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--cedar-deep);
  }
  .sg-values li::before {
    content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
    background: var(--ochre); margin: 0 14px; vertical-align: middle; transform: translateY(-1px);
  }
  @media (max-width: 767px) {
    #listings .section-head { display: block; }
    #listings .section-head .right { text-align: left; max-width: none; margin-top: 18px; }
    #listings .section-head .right .link { margin-left: 0; justify-content: flex-start; }
    .sg-promise { margin-top: 16px; font-size: 19px; }
    .sg-values li { font-size: 10px; letter-spacing: 0.18em; }
    .sg-values { margin-left: -22px; clip-path: inset(-4px -4px -4px 22px); }
    .sg-values li::before { margin: 0 9px; }
  }

  /* hero "Featured sanctuary" label: no star, underlined */
  .hero-feature .hf-eyebrow {
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
    text-decoration-color: currentColor;
  }
  .hero-feature .hf-star { display: none; }

  /* hero "View sanctuary →": 1px outlined pill */
  .hero-feature .hf-cta {
    border: 1px solid currentColor; border-radius: 999px; padding: 7px 14px 7px 16px;
    transition: background .15s ease, color .15s ease;
  }
  .hero-feature:hover .hf-cta { background: var(--ochre); color: var(--ink); }

  /* ===== host invitation band ===== */
  .host-cta { padding: 8px 0 72px; }
  .host-cta-card {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between; gap: 40px;
    padding: 44px 52px; border-radius: 28px;
    background:
      radial-gradient(120% 170% at 0% 0%, rgba(214,164,93,0.14), transparent 58%),
      linear-gradient(120deg, var(--paper, #FAF6EC) 0%, #F1E7D6 100%);
    border: 1px solid var(--line-strong, rgba(28,24,16,0.18));
    box-shadow: 0 1px 2px rgba(28,24,16,0.03), 0 14px 36px -24px rgba(28,24,16,0.28);
  }
  .host-cta-card::after {            /* faint gold arc, echoing the brand's organic lines */
    content: ""; position: absolute; right: -120px; top: -140px; width: 420px; height: 420px;
    border-radius: 50%; border: 1px solid rgba(214,164,93,0.35); pointer-events: none;
  }
  .host-cta-copy { position: relative; max-width: 640px; }
  .host-cta-eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cedar-deep); }
  .host-cta-title { margin: 12px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -0.015em; color: var(--ink); }
  .host-cta-title em { font-style: italic; color: var(--cedar); }
  .host-cta-text { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
  .host-cta-actions { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .host-cta-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; border-radius: 999px;
    background: var(--cedar, #8A5A37); color: #FBF7EE; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
    text-decoration: none; box-shadow: 0 10px 24px -12px rgba(107,67,38,0.55); transition: transform .2s ease, background .2s ease;
  }
  .host-cta-btn svg { width: 17px; height: 17px; transition: transform .2s ease; }
  .host-cta-btn:hover { background: var(--cedar-deep, #6B4326); transform: translateY(-1px); }
  .host-cta-btn:hover svg { transform: translateX(3px); }
  .host-cta-link { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--cedar); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .host-cta-link:hover { color: var(--cedar-deep); }
  @media (max-width: 900px) {
    .host-cta-card { flex-direction: column; align-items: flex-start; gap: 26px; padding: 32px 26px; }
    .host-cta-card::after { display: none; }
    .host-cta-actions { align-items: flex-start; }
  }
  @media (max-width: 600px) {
    .host-cta { padding-bottom: 52px; }
    .host-cta-card { border-radius: 22px; padding: 28px 22px; }
    .host-cta-actions { width: 100%; align-items: stretch; }
    .host-cta-btn { justify-content: center; }
    .host-cta-link { text-align: center; }
    .host-cta-text { font-size: 15px; }
  }

  /* homepage listing cards: end at the Book/Visit button (category pills removed), buttons aligned at the bottom */
  #homeListings .card-tags { display: none !important; }
  #homeListings .card-body { display: flex; flex-direction: column; }
  #homeListings .card-desc { margin-bottom: 14px; }
  #homeListings .card-action { margin-top: auto; }

  /* homepage cards without a cover photo: show the logo/headshot on soft cream */
  #homeListings .card-img.card-img-logo {
    background: radial-gradient(120% 120% at 50% 30%, #FBF7EE 0%, #EFE6D6 70%, #E7DCC8 100%);
    display: grid; place-items: center;
  }
  #homeListings .card-img.card-img-logo .card-img-link { display: grid; place-items: center; width: 100%; height: 100%; }
  #homeListings .card-img.card-img-logo img {
    width: 58% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%;
    box-shadow: 0 0 0 4px #FBF7EE, 0 10px 26px -12px rgba(28,24,16,0.45); position: static !important; inset: auto !important;
  }

  /* hero headline: keep each line together where there's room */
  @media (min-width: 768px) { .hero-content h1 .hl { white-space: nowrap; } }

  /* homepage cards: category · location above the name; dividing line just above the button */
  #homeListings .card-catloc { order: -1; margin: 0 0 6px !important; padding-bottom: 0 !important; border-bottom: 0 !important; }
  #homeListings .card-handle { margin-top: 8px !important; }
  #homeListings .card-catloc + .card-desc { margin-top: 10px; }
  #homeListings .card-action { position: relative; margin-top: auto; }
  #homeListings .card-body > .card-action { margin-top: auto; }
  #homeListings .card-desc { margin-bottom: 28px; }
  #homeListings .card-action::before {
    content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 1px;
    background: var(--line-strong, rgba(28,24,16,0.18)); pointer-events: none;
  }
  @media (max-width: 767px) {
    #homeListings .card-desc { margin-bottom: 24px; }
    #homeListings .card-action::before { top: -13px; }
  }

  /* ===== event type pills ===== */
  .ev-cats { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 26px; }
  .ev-cat {
    padding: 11px 22px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line-strong, rgba(28,24,16,0.2)); background: var(--paper, #FAF6EC);
    font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink, #1c1810);
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
  }
  .ev-cat:hover { border-color: var(--ink, #1c1810); transform: translateY(-1px); }
  .ev-cat.on { background: var(--ink, #1c1810); border-color: var(--ink, #1c1810); color: #FBF7EE; }
  .ev-cat:focus-visible { outline: 2px solid var(--cedar, #8A5A37); outline-offset: 2px; }
  @media (max-width: 767px) {
    /* phones: every type on one line, no sideways scrolling (sgFitCats shrinks the text if needed) */
    .ev-cats { flex-wrap: nowrap; overflow: hidden; gap: 6px; margin: 4px 0 20px; padding: 2px 0; }
    .ev-cat { flex: 1 1 auto; min-width: 0; white-space: nowrap; padding: 9px 8px; font-size: 13px; text-align: center; }
    .ev-cat:hover { transform: none; }
    .ev-cats.ev-cats-scroll { overflow-x: auto; scrollbar-width: none; }
    .ev-cats.ev-cats-scroll::-webkit-scrollbar { display: none; }
    .ev-cats.ev-cats-scroll .ev-cat { flex: none; }
  }


  /* ===== one elevated search card: tabs + fields ===== */
  .search-shell {
    position: relative; z-index: 5;
    background: linear-gradient(180deg, #FCF9F2 0%, var(--paper, #FAF6EC) 100%);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 24px;
    padding: 8px;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.8) inset,
      0 2px 6px rgba(20,16,10,0.10),
      0 30px 70px -28px rgba(20,16,10,0.55);
  }
  .search-shell .search-bar {
    margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
    border-top: 1px solid var(--line, rgba(28,24,16,0.12)) !important; border-radius: 0 0 18px 18px !important;
    padding: 8px 2px 2px !important;
  }
  .search-types {
    position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    margin: 2px 2px 8px; padding: 4px; border-radius: 999px;
    background: rgba(28,24,16,0.055); border: 1px solid rgba(28,24,16,0.06);
  }
  .st-glide {
    position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; pointer-events: none;
    background: var(--ink, #1c1810);
    box-shadow: 0 6px 16px -8px rgba(20,16,10,0.7);
    transition: transform .35s cubic-bezier(.3,.9,.2,1), width .35s cubic-bezier(.3,.9,.2,1);
  }
  .st-btn {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 20px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
    font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-soft, #3a3328);
    transition: color .25s ease;
  }
  .st-btn svg { opacity: .75; transition: opacity .25s ease; }
  .st-btn:hover { color: var(--ink, #1c1810); }
  .st-btn.on { color: #FBF7EE; }
  .st-btn.on svg { opacity: 1; color: #EAC894; }
  .st-btn:focus-visible { outline: 2px solid var(--cedar, #8A5A37); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { .st-glide { transition: none; } }
  @media (max-width: 767px) {
    .search-shell { border-radius: 22px; padding: 7px; }
    .search-types { display: grid; margin: 1px 1px 7px; }
    .st-btn { padding: 9px 6px; font-size: 13.5px; gap: 6px; }
    .search-shell .search-bar { padding-top: 6px !important; }
  }

  /* host invitation sits on the seam: page colour behind its top half, Events colour behind its bottom half */
  #events { border-top: 0 !important; }
  .host-cta {
    padding: 0 !important;
    background: linear-gradient(to bottom, transparent 0, transparent 50%, var(--cream-2) 50%, var(--cream-2) 100%);
  }

  /* desktop & tablet: clean text tabs with a gliding underline on the divider */
  @media (min-width: 768px) {
    .search-shell { padding: 6px 8px 8px; }
    .search-types {
      display: flex; gap: 30px; margin: 0 0 0 26px; padding: 0;
      background: none; border: 0; border-radius: 0;
    }
    .st-btn {
      padding: 15px 2px 14px; border-radius: 0; gap: 8px;
      font-size: 14.5px; font-weight: 600; color: var(--muted, #7a705f);
    }
    .st-btn:hover { color: var(--ink, #1c1810); }
    .st-btn.on { color: var(--ink, #1c1810); }
    .st-btn svg { opacity: .8; }
    .st-btn.on svg { opacity: 1; color: var(--cedar, #8A5A37); }
    .st-glide {
      top: auto; bottom: -1px; height: 2px; border-radius: 2px;
      background: var(--ink, #1c1810); box-shadow: none;
    }
    .search-shell .search-bar { padding-top: 10px !important; }
  }
  /* desktop: the three tabs sit centered and spread wider across the card */
  @media (min-width: 1025px) {
    .search-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: min(640px, 72%); margin: 0 auto; }
    .st-btn { padding: 15px 10px 14px; font-size: 15px; }
  }

  /* desktop: Practice / Space / Event sit on top of the search card as folder tabs.
     The chosen tab is the card's own colour and joins the card; the others are smoky glass over the photo. */
  @media (min-width: 1025px) {
    .search-shell { margin-top: 54px; border-top-left-radius: 0; }
    .search-types {
      position: absolute; top: -46px; left: -1px; width: auto; margin: 0; padding: 0;
      display: flex; align-items: flex-end; gap: 6px;
    }
    .st-btn {
      height: 40px; margin-bottom: 6px; padding: 0 28px; border-radius: 16px 16px 0 0;
      background: rgba(20,16,10,0.46); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.14); border-bottom: 0;
      color: rgba(251,247,238,0.86); font-size: 15px;
      transition: background .2s ease, color .2s ease;
    }
    .st-btn:hover { color: #FBF7EE; background: rgba(20,16,10,0.6); }
    .st-btn svg { opacity: .85; }
    .st-btn.on {
      height: 48px; margin-bottom: -2px; padding-bottom: 2px;
      background: #FCF9F2; border-color: rgba(255,255,255,0.7); color: var(--ink, #1c1810);
      -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .st-btn.on svg { color: var(--cedar, #8A5A37); opacity: 1; }
    .st-glide { display: none; }
    .search-shell .search-bar { border-top: 0 !important; border-radius: 18px !important; padding-top: 2px !important; }
  }

  /* ===== host banner photo background ===== */
  .host-cta { --host-photo: url("/images/cta/hosts-healers-banner.jpg"); }
  .host-cta-card {
    background:
      linear-gradient(90deg, rgb(248,242,230) 0%, rgb(248,242,230) 40%, rgba(248,242,230,0.78) 50%, rgba(248,242,230,0.25) 68%, rgba(248,242,230,0.04) 88%),
      var(--host-photo) right 48% / 64% auto no-repeat,
      var(--paper, #FAF6EC) !important;
    border-color: rgba(28,24,16,0.14) !important;
    min-height: 260px;
  }
  .host-cta-card::after { display: none !important; }      /* the gold arc would compete with the photo */
  .host-cta-actions .host-cta-link { background: none; padding: 0; }
  @media (min-width: 901px) {   /* desktop: the link sits over the dark part of the photo */
    .host-cta-actions .host-cta-link {
      color: #FBF7EE; text-decoration-color: rgba(251,247,238,0.7);
      text-shadow: 0 1px 8px rgba(20,16,10,0.55);
    }
    .host-cta-actions .host-cta-link:hover { color: #fff; text-decoration-color: #fff; }
  }
  @media (max-width: 900px) {
    /* tablet & phone: the photo fills the whole banner, with a warm dark wash and cream text */
    .host-cta-card {
      background:
        linear-gradient(180deg, rgba(20,16,10,0.10) 0%, rgba(20,16,10,0.42) 38%, rgba(20,16,10,0.80) 72%, rgba(20,16,10,0.88) 100%),
        var(--host-photo) 50% 45% / cover no-repeat,
        #2a2118 !important;
      border-color: rgba(251,247,238,0.18) !important;
      padding-top: 190px !important;
    }
    .host-cta-card .host-cta-eyebrow { color: #EAC894; }
    .host-cta-card .host-cta-title { color: #FBF7EE; text-shadow: 0 2px 18px rgba(0,0,0,0.35); }
    .host-cta-card .host-cta-title em { color: #EAC894; }
    .host-cta-card .host-cta-text { color: rgba(251,247,238,0.9); }
    .host-cta-actions .host-cta-link { color: #FBF7EE; text-decoration-color: rgba(251,247,238,0.7); }
  }
  @media (max-width: 600px) { .host-cta-card { padding-top: 170px !important; } }

  /* homepage cards: a little shorter — landscape photo, tighter spacing */
  #homeListings .card-img { aspect-ratio: 5 / 4 !important; height: auto !important; }
  #homeListings .card-img img { width: 100%; height: 100%; object-fit: cover; }
  #homeListings .card-body { padding-top: 13px !important; padding-bottom: 14px !important; }
  #homeListings .card-desc { margin-bottom: 22px !important; }
  #homeListings .card-action::before { top: -12px !important; }
  @media (max-width: 767px) {
    #homeListings .card-body { padding-top: 10px !important; padding-bottom: 12px !important; }
    #homeListings .card-desc { margin-bottom: 20px !important; }
    #homeListings .card-action::before { top: -11px !important; }
  }

  /* events under the featured card: two rows everywhere */
  @media (max-width: 1024px) { .ev-secondary-row .ev-card:nth-child(n+7) { display: none !important; } }

  /* announcement bar: short, one line everywhere */
  .announcement { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .announcement b { font-weight: 600; }
  .announcement em { color: #EAC894; font-style: italic; }
  @media (max-width: 480px) { .announcement { font-size: 12px; letter-spacing: 0.02em; padding: 8px 12px; } }

  @media (max-width: 520px) { .announcement .ann-lead { display: none; } .announcement { letter-spacing: 0.01em; } }

  /* ===== event posters (secondary events under the featured one) ===== */
  .ev-posters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
  .ev-posters .ev-card.ev-poster { position: relative; aspect-ratio: 5 / 4; border-radius: 20px; overflow: hidden; color: #FBF7EE; isolation: isolate;
    padding: 0; margin: 0; border: 0; background: #2A241B; box-shadow: 0 18px 36px -26px rgba(28,24,16,.6); transform: none; }
  .ev-posters .ev-card.ev-poster.active { box-shadow: 0 18px 36px -26px rgba(28,24,16,.6); }
  .ev-ps-photo { position: absolute; inset: 0; z-index: -2; background: #2A241B center/cover no-repeat; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  .ev-poster::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,16,10,.04) 28%, rgba(20,16,10,.84) 100%); }
  .ev-poster:hover .ev-ps-photo { transform: scale(1.06); }
  .ev-ps-date { position: absolute; left: 16px; top: 16px; background: rgba(251,247,238,.93); color: var(--ink); border-radius: 14px; padding: 8px 12px 7px; text-align: center; line-height: 1; }
  .ev-ps-date b { display: block; font: 500 24px/1 var(--display); }
  .ev-ps-date span { font: 700 10px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--cedar-deep, #6B4326); }
  .ev-ps-soon { position: absolute; right: 16px; top: 18px; font: 700 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; background: rgba(28,24,16,.6); padding: 6px 10px; border-radius: 999px; }
  .ev-ps-txt { position: absolute; left: 20px; right: 20px; bottom: 18px; }
  .ev-ps-type { display: block; font: 700 10.5px/1.4 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: #EAC894; }
  .ev-ps-title { font: 500 22px/1.1 var(--display); margin: 5px 0 8px; letter-spacing: -.01em; color: #FBF7EE; }
  .ev-ps-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
  .ev-ps-row .ev-host-av { width: 24px; height: 24px; flex: none; }
  .ev-ps-grow { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; }
  .ev-ps-grow .ev-host-text, .ev-ps-grow .ev-host-name { display: inline; color: #FBF7EE; font-weight: 600; }
  .ev-ps-price { font: 600 14px var(--sans); white-space: nowrap; }
  .ev-ps-cta { display: flex; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .35s ease, margin .35s ease; }
  .ev-ps-cta > span { flex: 1; text-align: center; padding: 10px; border-radius: 999px; background: #FBF7EE; color: var(--ink); font: 600 13px var(--sans); }
  .ev-poster:hover .ev-ps-cta, .ev-poster:focus-within .ev-ps-cta { max-height: 60px; opacity: 1; margin-top: 14px; }
  @media (hover: none) { .ev-ps-cta { max-height: 60px; opacity: 1; margin-top: 12px; } }
  @media (prefers-reduced-motion: reduce) { .ev-ps-photo, .ev-ps-cta { transition: none; } }
  /* desktop: four smaller posters per row, two rows */
  @media (min-width: 1025px) {
    .ev-posters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .ev-posters .ev-card.ev-poster { aspect-ratio: 1 / 1; border-radius: 18px; }
    .ev-ps-date { left: 12px; top: 12px; padding: 7px 10px 6px; border-radius: 12px; }
    .ev-ps-date b { font-size: 21px; }
    .ev-ps-soon { right: 12px; top: 14px; font-size: 9.5px; }
    .ev-ps-txt { left: 16px; right: 16px; bottom: 15px; }
    .ev-ps-type { font-size: 9.5px; }
    .ev-ps-title { font-size: 19px; margin: 4px 0 7px; }
    .ev-ps-row { font-size: 12px; gap: 7px; }
    .ev-ps-row .ev-host-av { width: 22px; height: 22px; }
    .ev-ps-cta > span { padding: 8px; font-size: 12.5px; }
  }
  @media (max-width: 1024px) {
    .ev-posters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ev-posters .ev-poster:nth-child(n+7) { display: none; }
    .ev-posters .ev-card.ev-poster { aspect-ratio: 1 / 1; }
  }
  @media (max-width: 640px) {
    /* phones: two posters per row */
    .ev-posters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
    .ev-posters .ev-card.ev-poster { aspect-ratio: 4 / 5.3; border-radius: 16px; }
    .ev-posters .ev-poster:nth-child(n+7) { display: none; }
    .ev-ps-date { left: 10px; top: 10px; border-radius: 11px; padding: 6px 9px 5px; }
    .ev-ps-date b { font-size: 19px; }
    .ev-ps-date span { font-size: 8.5px; letter-spacing: .16em; }
    .ev-ps-soon { right: 10px; top: 12px; font-size: 8.5px; letter-spacing: .1em; padding: 4px 7px; }
    .ev-ps-txt { left: 12px; right: 12px; bottom: 12px; }
    .ev-ps-type { font-size: 8.5px; letter-spacing: .12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ev-ps-title { font-size: 16px; line-height: 1.12; margin: 4px 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .ev-ps-row { font-size: 11px; gap: 5px; }
    .ev-ps-row .ev-host-av { width: 18px; height: 18px; }
    .ev-ps-price { font-size: 11.5px; }
    .ev-ps-cta { display: none; }
  }

  /* bigger city + compass cards on tablets and phones */
  @media (max-width: 1024px) {
    .compass-tile { flex-basis: 290px; }
    .city-tile, .cities-marquee .city-tile { flex-basis: 270px; aspect-ratio: 3 / 4; }
  }
  @media (max-width: 640px) {
    .compass-tile { flex-basis: min(80vw, 330px); aspect-ratio: 3 / 4.1; }
    .city-tile, .cities-marquee .city-tile { flex-basis: min(72vw, 300px); aspect-ratio: 3 / 4; }
    .city-tile .label h3 { font-size: 26px; }
  }
  /* hero headline: a little larger on every screen */
  .hero h1 { font-size: clamp(50px, 5.5vw, 82px); }
  @media (max-width: 1024px) { .hero h1 { font-size: clamp(48px, 6.6vw, 64px); } }
  @media (max-width: 600px)  { .hero h1 { font-size: clamp(35px, 9.6vw, 46px); line-height: 1.04; } }
  /* compass cards: fine border in the same gold as the top banner text */
  .compass-tile, .compass-tile.has-photo { border: 1px solid #D6A45D !important; }   /* 1px gold border on every screen */
  /* no faded edges on the cities row */
  .cities-marquee::before, .cities-marquee::after { display: none !important; content: none !important; }
  .cities-marquee, #cities .cities-grid { -webkit-mask-image: none !important; mask-image: none !important; }
  /* compass cards on phones & tablets: every card exactly the same size, with a fine border */
  @media (max-width: 1024px) {
    .compass-tile { flex-shrink: 0; overflow: hidden; min-height: 0; }
  }
  /* section titles on phones: title on the left, small intro text beside it on the right (same row),
     with the title given most of the width so it isn't squeezed */
  @media (max-width: 767px) {
    .section-head, #listings .section-head { display: grid !important; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: end; gap: 14px; }
    .section-head h2 { font-size: clamp(27px, 7.6vw, 36px); }
    .section-head h2 span { white-space: normal !important; }
    .section-head .right, #listings .section-head .right { text-align: right !important; max-width: none !important; margin: 0 !important; font-size: 12.5px; line-height: 1.5; }
    .section-head .right .link, #listings .section-head .right .link { margin-left: auto !important; justify-content: flex-end !important; font-size: 10.5px; }
  }
  /* compass cards: the 6 cards fill one row on computers; mid-size, swipeable on tablets & phones */
  .compass-grid { gap: 12px; }
  .compass-tile { flex: 1 1 0 !important; min-width: 170px; aspect-ratio: 3 / 4 !important; padding: 18px 14px; gap: 10px; }
  .compass-tile .glyph { width: 32px; height: 32px; }
  .compass-tile h3 { font-size: 22px; line-height: 1; }
  .compass-tile .desc { font-size: 11.5px; line-height: 1.4; margin-top: 6px; }
  .compass-tile .count { font-size: 9px; padding: 6px 13px; }
  @media (min-width: 1025px) {   /* all 6 fit, nothing to scroll; wider (the row uses some of the side margin) and taller on computers */
    .compass-nav { display: none !important; }        /* nothing to scroll on computers */
    #compass .section-head { margin-bottom: 40px; }
    .compass-grid { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }   /* line up with the title above and the sections around it */
    .compass-tile { aspect-ratio: 9 / 17 !important; }
  }
  @media (max-width: 1024px) { .compass-tile { flex: 0 0 220px !important; } }
  @media (max-width: 640px)  { .compass-tile { flex: 0 0 min(72vw, 300px) !important; aspect-ratio: 3 / 4 !important; } }   /* same size as the city cards on phones */
  /* taller city cards on computers */
  @media (min-width: 1025px) { .city-tile, .cities-marquee .city-tile { flex-basis: 268px !important; aspect-ratio: 3 / 5 !important; } }   /* taller on computers */
  /* compass cards: exactly the same width and height as the city cards on every screen (the row scrolls) */
  .compass-tile { flex: 0 0 268px !important; min-width: 0 !important; aspect-ratio: 3 / 5 !important; }
  .compass-tile h3 { font-size: 26px; }
  .compass-tile .desc { font-size: 13px; }
  .compass-tile .count { font-size: 10px; }
  @media (min-width: 1025px) { #compass .compass-nav { display: flex !important; } #compass .section-head { margin-bottom: 14px; } }   /* arrows are back, since the row now scrolls */
  @media (max-width: 1024px) { .compass-tile { flex: 0 0 270px !important; aspect-ratio: 3 / 4 !important; } }
  @media (max-width: 640px)  { .compass-tile { flex: 0 0 min(72vw, 300px) !important; aspect-ratio: 3 / 4 !important; } }
  /* events on computers: six smaller posters per row, two rows */
  @media (min-width: 1025px) {
    .ev-posters { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 12px !important; }
    .ev-posters .ev-card.ev-poster { aspect-ratio: 4 / 5 !important; border-radius: 16px !important; }
    .ev-posters .ev-poster:nth-child(n+13) { display: none !important; }
    .ev-ps-date { left: 10px !important; top: 10px !important; padding: 6px 9px 5px !important; border-radius: 11px !important; }
    .ev-ps-date b { font-size: 18px !important; }
    .ev-ps-date span { font-size: 8.5px !important; }
    .ev-ps-soon { right: 10px !important; top: 11px !important; font-size: 8.5px !important; padding: 5px 8px !important; }
    .ev-ps-txt { left: 13px !important; right: 13px !important; bottom: 13px !important; }
    .ev-ps-type { font-size: 8.5px !important; }
    .ev-ps-title { font-size: 16.5px !important; margin: 4px 0 6px !important; }
    .ev-ps-row { font-size: 11.5px !important; gap: 6px !important; }
    .ev-ps-row .ev-host-av { width: 20px !important; height: 20px !important; }
    .ev-ps-price { font-size: 12px !important; }
    .ev-ps-cta > span { font-size: 12px !important; padding: 8px !important; }
  }
  /* testimonials a little smaller on computers */
  @media (min-width: 1025px) {
    .test-row { gap: 14px; padding: 10px 0; }
    .test-card { width: 290px; padding: 18px 20px; border-radius: 12px; }
    .test-card .stars { margin-bottom: 10px; }
    .test-card .stars svg { width: 12px; height: 12px; }
    .test-card .quote { font-size: 14.5px; line-height: 1.42; }
    .test-card .author { margin-top: 14px; padding-top: 12px; gap: 10px; }
    .test-card .avatar { width: 34px; height: 34px; font-size: 14px; }
  }
  /* cities on phones & tablets: a native swipe row that snaps card by card */
  @media (max-width: 1024px) {
    #cities .cities-grid { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
    #cities .cities-grid::-webkit-scrollbar { display: none; }
    #cities .city-tile { scroll-snap-align: start; }
  }
  /* no light strip past the bottom on phones & tablets: the area beyond the page edge (overscroll / bounce)
     matches the dark footer, and the page doesn't bounce past its ends where browsers allow it */
  html { background-color: #1C1810; }
  html, body { overscroll-behavior-y: none; }
  /* Phones (and in-app browsers like Instagram's) paint the strip past the bottom edge — and the
     bottom browser bar — from the page background, so the page itself is dark and the content cream. */
  body { background: linear-gradient(var(--cream), var(--cream)) top left / 100% 600px no-repeat, #1C1810; }
  #main { background-color: var(--cream); }
  /* compass cards: same width and height as the reading-room (blog) cards. Photo with the words
     at the bottom left, the kind-of-care symbol in a small badge at the top, and a light strip
     underneath with the number of matches. The first card is wider, like the first article. */
  #compass .compass-grid { gap: 18px !important; align-items: flex-start; }
  #compass .compass-tile, #compass .compass-tile.has-photo {
    flex: 0 0 260px !important; height: 467px; aspect-ratio: auto !important; min-height: 0;
    display: block; padding: 0; text-align: left; border-radius: 20px;
    border: 1px solid rgba(28,24,16,.1) !important; box-shadow: none;
    background-color: #2A2219; background-clip: padding-box; color: #FBF7EE; transition: transform .3s ease, border-color .3s ease;
  }
  #compass .compass-tile.has-photo::before { inset: 0 0 48px 0; background: linear-gradient(to top, rgba(28,24,16,.9) 6%, rgba(28,24,16,.3) 46%, transparent 70%); }
  #compass .compass-tile:hover { transform: translateY(-4px); border-color: rgba(138,90,55,.55) !important; box-shadow: none; }
  #compass .compass-tile .glyph { position: absolute; left: 16px; top: 16px; width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: rgba(251,247,238,.94); color: #1C1810; }
  #compass .compass-tile > div:not(.count) { position: absolute; left: 18px; right: 18px; bottom: 66px; }
  #compass .compass-tile h3 { font-size: 30px; line-height: 1.02; }
  #compass .compass-tile .desc { font-size: 13.5px; line-height: 1.45; margin-top: 10px; opacity: .9; max-width: 32ch; }
  #compass .compass-tile .count {
    position: absolute; left: 0; right: 0; bottom: 0; height: 48px; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; padding: 0 18px;
    border: 0; border-radius: 0; background: #FBF7EE; color: #5B5246;
    font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
  }
  #compass .compass-tile .count::after { content: "→"; font-size: 16px; color: #1C1810; transition: transform .25s ease; }
  #compass .compass-tile:hover .count { background: #FBF7EE; color: #1C1810; }
  #compass .compass-tile:hover .count::after { transform: translateX(4px); }
  #compass .compass-tile:focus-visible { outline: 2px solid var(--ink, #1C1810); outline-offset: 3px; }
  html.sg-dark #compass .compass-tile .count { background: #2A2219; color: rgba(242,235,221,.75); border-top: 1px solid rgba(242,235,221,.08); }
  html.sg-dark #compass .compass-tile .count::after { color: #F2EBDD; }
  @media (max-width: 760px) {
    #compass .compass-grid { gap: 12px !important; }
    #compass .compass-tile, #compass .compass-tile.has-photo { flex: 0 0 76vw !important; height: 408px; }
    #compass .compass-tile h3 { font-size: 28px; }
  }
  @media (prefers-reduced-motion: reduce) { #compass .compass-tile, #compass .compass-tile .count::after { transition: none; } }
  /* compass cards in the brand colors: each card has its own colour (sage, terracotta, deep sage,
     cedar, ochre, ink). It tints the bottom of the photo, fills the symbol badge and the bottom strip,
     and edges the card. */
  #compass .compass-tile.t1 { --cc: #4A5D4F; --cc-tx: #F2EBDD; --cc-ac: #D6A45D; }
  #compass .compass-tile.t2 { --cc: #BB5E3C; --cc-tx: #FAF6EC; --cc-ac: #F2EBDD; }
  #compass .compass-tile.t3 { --cc: #344037; --cc-tx: #F2EBDD; --cc-ac: #D6A45D; }
  #compass .compass-tile.t4 { --cc: #8A5A37; --cc-tx: #FAF6EC; --cc-ac: #D6A45D; }
  #compass .compass-tile.t5 { --cc: #D6A45D; --cc-tx: #1C1810; --cc-ac: #1C1810; --cc-g: #6B4326; }   /* ochre strip; the photo fades to deep cedar so the white words stay readable */
  #compass .compass-tile.t6 { --cc: #1C1810; --cc-tx: #F2EBDD; --cc-ac: #D6A45D; }
  #compass .compass-tile, #compass .compass-tile.has-photo { border: 1px solid var(--cc, #1C1810) !important; background-color: var(--cc, #2A2219); }
  #compass .compass-tile:hover { border-color: var(--cc, #1C1810) !important; box-shadow: 0 18px 30px -20px var(--cc, rgba(28,24,16,.5)); }
  #compass .compass-tile.has-photo::before { background: linear-gradient(to top, var(--cc-g, var(--cc, #1C1810)) 0%, color-mix(in srgb, var(--cc-g, var(--cc, #1C1810)) 84%, transparent) 18%, color-mix(in srgb, #1C1810 30%, transparent) 50%, transparent 72%); }
  #compass .compass-tile .glyph { background: var(--cc, #FBF7EE); color: var(--cc-ac, #1C1810); box-shadow: 0 0 0 2px color-mix(in srgb, #FAF6EC 70%, transparent); }
  #compass .compass-tile h3 em { color: var(--cc-ac, inherit); }
  #compass .compass-tile.t2 h3 em { color: inherit; }
  #compass .compass-tile.t5 h3 em { color: #D6A45D; }
  #compass .compass-tile.t5 .glyph { color: #1C1810; }
  #compass .compass-tile .count, #compass .compass-tile:hover .count { background: var(--cc, #FBF7EE); color: var(--cc-tx, #1C1810); border-top: 1px solid color-mix(in srgb, var(--cc-tx, #FAF6EC) 18%, transparent); }
  #compass .compass-tile .count::after { color: var(--cc-tx, #1C1810); }
  html.sg-dark #compass .compass-tile .count { background: var(--cc); color: var(--cc-tx); }
  html.sg-dark #compass .compass-tile .count::after { color: var(--cc-tx); }
  html.sg-dark #compass .compass-tile.t6 { border-color: #D6A45D !important; }
  /* Practitioners / Spaces buttons: on phones both are always exactly the same size (rows share one
     height even when one description wraps to an extra line), and the unselected one gets a soft
     frame the same width as the selected one's colour ring, so its outer edge lines up and it doesn't look smaller. */
  .type-btn:not(.active) { border-color: rgba(28,24,16,.2); }
  html.sg-dark .type-btn:not(.active) { border-color: rgba(242,235,221,.2); }
  @media (max-width: 700px) {
    .type-buttons { grid-auto-rows: 1fr; }
    .type-btn { height: 100%; min-height: 152px; }
    .type-btn:hover { transform: none; }
  }
  /* "Closest to you first" line above results (sg-near.js) */
  .near-line { margin: 0 0 14px; font-size: 13.5px; color: var(--muted, #6F6552); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
  .near-line[hidden] { display: none; }
  .near-btn { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong, rgba(28,24,16,.25)); background: transparent; color: var(--ink, #1C1810); font: 600 13px/1 var(--sans, inherit); cursor: pointer; }
  .near-btn:hover { background: rgba(28,24,16,.05); }
  .near-btn:focus-visible { outline: 2px solid var(--ink, #1C1810); outline-offset: 2px; }
  html.sg-dark .near-btn { color: #F1E8D8; border-color: rgba(241,232,216,.3); }