/* =========================================================
   trusted.css — TN Trusted (RULE tn-trusted): the hero's rating
   bubble, the directory's menu and richer card, each business's
   own page (tn-trusted/<slug>.html), and How to get TN Trusted
   (get-tn-trusted.html). Built on base.css and styles.css
   tokens, so night and day both work.
   ========================================================= */

/* ---------- the hero's rating bubble (Oct. 1, 2026) ----------
   The bar every listed business clears, at the top right of the hero.
   On a narrow screen it falls in under the buttons, never over the
   headline. It sits on the photograph, so it reads the night set. */
.tt-hero .hero-inner:has(> .tt-badge) { align-items: flex-start; }
.tt-badge {
  display: grid; gap: 10px; width: min(100%, 300px); margin-top: 4px;
  padding: 18px 20px 19px; border-radius: 22px;
  background: rgba(8, 9, 11, .58); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  animation: rise .55s .24s var(--ease) both;
}
.tt-badge-score { display: flex; align-items: center; gap: 14px; }
.tt-badge-stars { width: 104px; height: auto; flex: none; color: var(--gold); }
.tt-badge-score b { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--text); }
.tt-badge-txt { font-size: 14px; line-height: 1.5; color: var(--on-ink-body); }
@media (max-width: 760px) {
  .tt-badge { width: 100%; max-width: 440px; margin-top: 0; }
}

/* ---------- the directory (Oct. 1, 2026) ----------
   Two columns: a menu on the left that stays in view while the cards
   scroll (the sort, then the fields, the open field's kinds of business
   nested under it), and the search, the count and the cards on the right.
   Under 900px the menu is three dropdowns over the search: the field, its
   kind (only when the field has kinds to choose from) and the sort. It
   was a search pill over two rows of chips until then. */
.tt-layout { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 24px 40px; align-items: start; }
.tt-side {
  position: sticky; top: calc(var(--hdr) + 20px); display: grid; gap: 24px;
  max-height: calc(100vh - var(--hdr) - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  margin: -4px; padding: 4px;
}
.tt-ctl { display: grid; gap: 8px; }
.tt-ctl-field, .tt-ctl-kind { display: none; }
.tt-ctl-l { font-family: var(--label); font-weight: var(--label-w); font-size: 10.5px; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.tt-ctl .select { min-height: 44px; padding: 0 36px 0 14px; border-radius: 12px; font-size: 14.5px; }
.tt-nav { display: grid; gap: 10px; }
.tt-nav ul { display: grid; gap: 2px; }
.tt-nav-btn, .tt-kind-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 38px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent;
  font-family: var(--sans); font-weight: 500; font-size: 14.5px; line-height: 1.25; text-align: left; color: var(--text-2);
  cursor: pointer; transition: background-color .15s, color .15s;
}
.tt-nav-btn:hover, .tt-kind-btn:hover { background: var(--fill-2); color: var(--text); }
.tt-nav-btn:focus-visible, .tt-kind-btn:focus-visible { outline-offset: -2px; }
.tt-nav-btn .n, .tt-kind-btn .n { flex: none; font-size: 12.5px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tt-nav-btn[aria-pressed="true"] { background: var(--go); color: var(--on-go); font-weight: 600; }
.tt-nav-btn[aria-pressed="true"] .n { color: inherit; opacity: .7; }
.tt-kinds { display: grid; gap: 1px; margin: 6px 0 8px 14px; padding-left: 10px; border-left: 1px solid var(--line-2); }
.tt-kind-btn { min-height: 34px; padding: 6px 10px; font-size: 13.5px; }
.tt-kind-btn[aria-pressed="true"] { background: rgba(var(--gold-rgb), .16); color: var(--text); font-weight: 600; }
.tt-main { min-width: 0; }
.tt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.tt-bar .tt-search { flex: 1 1 280px; max-width: 520px; }
.tt-foot-note { margin-top: 18px; font-size: 13px; color: var(--text-3); max-width: 80ch; }
@media (max-width: 899px) {
  .tt-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tt-side {
    position: static; max-height: none; overflow: visible; margin: 0; padding: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px;
  }
  .tt-ctl-field, .tt-ctl-kind { display: grid; }
  .tt-nav { display: none; }
  /* 16px: anything smaller and iOS zooms the page when a dropdown opens. */
  .tt-ctl .select { font-size: 16px; }
}
@media (max-width: 520px) {
  .tt-side { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tt-ctl { grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 10px; }
}

.tt-card { position: relative; overflow: hidden; }
.tt-media { display: block; margin: -22px -22px 6px; aspect-ratio: 16 / 9; background: var(--fill, rgba(127, 127, 127, .08)); overflow: hidden; position: relative; }
.tt-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.tt-card:hover .tt-media img { transform: scale(1.03); }
.tt-mono {
  position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-stretch: 112%;
  font-size: 54px; letter-spacing: -.04em; color: rgba(var(--hl, 255, 255, 255), .16);
  background: radial-gradient(120% 90% at 20% 0%, rgba(var(--gold-rgb), .18), transparent 60%), repeating-linear-gradient(135deg, rgba(127, 127, 127, .05) 0 10px, rgba(127, 127, 127, .09) 10px 11px);
}
.tt-name a { color: inherit; text-decoration: none; }
.tt-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tt-card a:not(.tt-media):not(.tt-name a), .tt-more { position: relative; z-index: 2; }
.tt-ratings { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; color: var(--text-2); }
.tt-r { display: inline-flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.tt-r b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 500; }
.tt-star { color: var(--gold); }
.tt-r small { color: var(--text-3); font-size: 12px; }
/* The round arrow in the foot: solid green while the card is under the
   pointer. The name is the card's link for the keyboard, so the whole card
   shows the focus ring when it has it. */
.tt-more {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; margin-left: auto;
  border: 1px solid var(--line-2); border-radius: 50%; color: var(--text);
  transition: background-color .15s, border-color .15s, color .15s;
}
.tt-more .ic { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.tt-card:hover .tt-more { background: var(--go); border-color: var(--go); color: var(--on-go); }
.tt-card:hover .tt-more .ic { transform: translateX(1px); }
@supports selector(:has(*)) {
  .tt-card:has(.tt-name a:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
  .tt-name a:focus-visible { outline: none; }
}
.tt-card[hidden] { display: none !important; }

/* ---------- a business's own page ---------- */
.ttp { padding: clamp(24px, 4vw, 44px) 0 clamp(40px, 6vw, 80px); }
.ttp .crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--text-3); margin-bottom: 18px; }
.ttp .crumb a { color: var(--text-2); }
.ttp .crumb .now { color: var(--text); }
.ttp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.ttp-media { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-lg, 26px); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.ttp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ttp-media .tt-mono { font-size: clamp(80px, 12vw, 140px); }
.ttp-id { display: grid; gap: 12px; }
.ttp-kicker { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--link); }
.ttp-id h1 { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: clamp(34px, 5vw, 60px); line-height: .98; letter-spacing: -.035em; color: var(--text); }
.ttp-headline { font-size: clamp(17px, 1.8vw, 20px); line-height: 1.45; color: var(--text-body, var(--text-2)); max-width: 46ch; }
.ttp-seal { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.ttp-seal .ic { width: 22px; height: 22px; color: var(--gold); flex: none; }
.ttp-seal b { color: var(--text); }
.ttp-head .tt-ratings { font-size: 15px; gap: 6px 16px; }
.ttp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ttp-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); margin-top: clamp(30px, 5vw, 56px); align-items: start; }
.ttp-main, .ttp-side { display: grid; gap: 22px; }
.ttp-sec h2, .ttp-box h2 { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.ttp-sec p { font-size: 16.5px; line-height: 1.65; color: var(--text-body, var(--text-2)); max-width: 68ch; }
.ttp-list { display: grid; gap: 8px; padding-left: 20px; list-style: disc; color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.ttp-list li::marker { color: var(--gold); }
.ttp-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.ttp-tags li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; color: var(--text-2); }
.ttp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.ttp-photos figure { margin: 0; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--surface); }
.ttp-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ttp-small { font-size: 12.5px; line-height: 1.5; color: var(--text-3); margin-top: 8px; }
.ttp-small a, .ttp-note a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.ttp-faq { display: grid; gap: 8px; }
.ttp-faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.ttp-faq summary { cursor: pointer; padding: 14px 16px; font-weight: 600; color: var(--text); list-style: none; }
.ttp-faq summary::-webkit-details-marker { display: none; }
.ttp-faq details p { padding: 0 16px 14px; font-size: 15px; color: var(--text-2); }
.ttp-box { padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.ttp-why { border-color: rgba(var(--gold-rgb), .35); background: linear-gradient(180deg, rgba(var(--gold-rgb), .07), transparent 60%), var(--surface); }
.ttp-why p { font-size: 15px; line-height: 1.6; color: var(--text-2); }
/* All of its credentials and awards, the same list as the card's, a size up. */
.ttp-creds { gap: 9px; margin-top: 14px; }
.ttp-creds li { grid-template-columns: 16px minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.5; color: var(--text); }
.ttp-creds .ic { width: 16px; height: 16px; margin-top: 3px; }
.ttp-creds .tt-src { font-size: 12.5px; }
.ttp-facts { display: grid; gap: 10px; }
.ttp-facts > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; font-size: 14.5px; }
.ttp-facts dt { color: var(--text-3); }
.ttp-facts dd { color: var(--text-2); overflow-wrap: anywhere; }
.ttp-facts a { color: var(--link); }
.ttp-social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 13.5px; }
.ttp-social a { color: var(--link); }
.ttp-note p { font-size: 13px; line-height: 1.55; color: var(--text-3); }
.ttp-note p + p { margin-top: 8px; }
.ttp-more { margin-top: clamp(40px, 6vw, 72px); display: grid; gap: 18px; }
/* Three across the full width here: the directory's narrower minimum is for
   its column beside the menu. */
.ttp-more .tt-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.ttp-more h2 { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; color: var(--text); }
@media (max-width: 860px) {
  .ttp-head, .ttp-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- How to get TN Trusted ---------- */
.gt-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; counter-reset: step; }
.gt-step { position: relative; padding: 22px 22px 22px 70px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.gt-step::before {
  counter-increment: step; content: counter(step); position: absolute; left: 20px; top: 20px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--display); font-weight: 900; background: var(--gold); color: var(--ink, #08090B);
}
.gt-step h3 { font-family: var(--display); font-weight: 800; font-stretch: 108%; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; color: var(--text); }
.gt-step p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.gt-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.gt-card { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.gt-card h3 { font-family: var(--display); font-weight: 800; font-stretch: 108%; font-size: 18px; color: var(--text); margin-bottom: 10px; }
.gt-card ul { display: grid; gap: 8px; padding-left: 18px; list-style: disc; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.gt-card li::marker { color: var(--gold); }
.gt-card p { font-size: 15px; line-height: 1.55; color: var(--text-2); }
.gt-labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.gt-label { display: grid; gap: 8px; padding: 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.gt-label .tt-stamp { font-size: 15px; }
.gt-faq { display: grid; gap: 10px; max-width: 900px; }
.gt-faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.gt-faq summary { cursor: pointer; padding: 16px 18px; font-weight: 600; color: var(--text); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.gt-faq summary::-webkit-details-marker { display: none; }
.gt-faq summary::after { content: "+"; color: var(--gold); font-size: 20px; line-height: 1; }
.gt-faq details[open] summary::after { content: "\2013"; }
.gt-faq details p { padding: 0 18px 16px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.gt-sector { border-top: 1px solid var(--line); padding: 14px 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
.gt-sector:first-child { border-top: 0; }
.gt-sector h3 { font-weight: 700; color: var(--text); font-size: 15.5px; }
.gt-sector p { font-size: 15px; line-height: 1.55; color: var(--text-2); }
@media (max-width: 700px) { .gt-sector { grid-template-columns: minmax(0, 1fr); gap: 4px; } }