/* ===== Self-hosted fonts - no third-party requests =====
   Only the weights the design actually uses: IBM Plex Sans 400/500/600/700
   and Source Serif 4 at 600 (headings and firm names). Latin subset only.
   Both families are SIL Open Font License 1.1 - see app/fonts/OFL.txt. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/source-serif-4-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Firm Dhundo - "Professional registry" design direction =====
   Warm paper background, white cards, registry navy, and a serif reserved for
   firm names and section headings. Tokens below are the single source of truth;
   every page (static HTML + the server-rendered firm page) shares this file. */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --brand: #1E4B6E;         /* registry navy: actions, links, accents */
  --brand-dark: #153650;    /* hover / pressed */
  --brand-soft: #E8F0F6;    /* navy tint: selected fills, focus rings */
  --star: #B07C1F;          /* rating glyphs (star gold) */
  --ink: #16232E;           /* headings, primary text, dark bands */
  --ink-soft: #55616D;      /* secondary text */
  --muted: #8A8478;         /* warm tertiary text: counts, captions */
  --line: #E1DDD2;          /* warm hairline borders */
  --line-strong: #D2CEC2;
  --bg: #F1EFE9;            /* paper page background */
  --card: #FFFFFF;          /* raised surfaces */
  --surface: #F5F3ED;       /* inset layer inside a card: fields, chips */
  --rule: #EFECE4;          /* divider inside a card */
  --teal: #0E7268;          /* CA / external-link accent */
  --teal-tint: #E7F1EF;
  --amber-bg: #FBF4E4;      /* years-in-practice trust chip */
  --amber-ink: #8A5F14;
  --hero-sub: #AEB9C2;      /* body text on the dark hero */
  --shadow-sm: 0 1px 2px rgba(22,35,46,.05);
  --shadow-card: 0 1px 2px rgba(22,35,46,.04);
  --shadow-hover: 0 6px 18px rgba(22,35,46,.10);
  --shadow-pop: 0 8px 24px rgba(10,20,30,.18);
  --shadow-panel: 0 8px 24px rgba(10,20,30,.25);
  --ring: 0 0 0 3px var(--brand-soft);
  --radius: 12px;
  --maxw: 1240px;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, "Times New Roman", serif;
  font-family: var(--sans);
}
body { color: var(--ink); background: var(--bg); line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hidden { display: none !important; }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--line);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1); will-change: transform;
}
.site-header.nav-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 32px; height: 64px;
  display: flex; align-items: center; gap: 16px; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { height: 34px; width: auto; display: block; border-radius: 8px; }
.brand-name { color: var(--ink); font-family: var(--serif); font-weight: 600; font-size: 19px; }
.brand-beta {
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 3px 8px;
}
.header-right { display: flex; align-items: center; gap: 20px; }
.auth-slot { display: flex; align-items: center; gap: 10px; }
.auth-user { font-size: 13.5px; font-weight: 600; color: var(--ink); background: var(--surface); padding: 8px 14px; border-radius: 8px; white-space: nowrap; cursor: pointer; }
.auth-user:hover { background: #EDEAE1; }
.auth-btn {
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font-weight: 600; font-size: 13.5px;
  padding: 9px 18px; border-radius: 8px; transition: background .15s ease, border-color .15s ease;
}
.auth-btn:hover { background: var(--surface); border-color: var(--muted); }
.auth-btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.auth-btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
/* The two contact actions read as one group, separated by a hairline. */
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-actions .header-link + .header-link { border-left: 1px solid var(--line); padding-left: 14px; }
.header-link { font-weight: 500; font-size: 13.5px; color: var(--ink-soft); padding: 8px 4px; white-space: nowrap; }
.header-link:hover { color: var(--brand); }

/* ===== Hero (dark) - carries the search panel and locality chips ===== */
.hero { background: var(--ink); color: #fff; }
.hero-inner { max-width: var(--maxw); margin: 0 auto; padding: 52px 32px 46px; }
.hero-copy { max-width: 640px; }
/* Rotating headline. min-height reserves two lines so the hero does not jump as the
   phrases change length; .is-out rolls the old line up and out, .is-in drops the new
   one in from below (transition:none on .is-in so it snaps to the start position). */
.hero h1 { color: #fff; font-family: var(--serif); font-weight: 600; font-size: 40px; line-height: 1.15; text-wrap: balance;
  min-height: 2.3em; transition: opacity .42s ease, transform .42s ease; }
.hero h1.is-out { opacity: 0; transform: translateY(-14px); }
.hero h1.is-in { opacity: 0; transform: translateY(14px); transition: none; }
@media (prefers-reduced-motion: reduce) {
  .hero h1 { transition: none; }
  .hero h1.is-out, .hero h1.is-in { opacity: 1; transform: none; }
}
.hero p { color: var(--hero-sub); font-size: 15.5px; line-height: 1.55; margin-top: 12px; max-width: 640px; }
.hero p strong { color: #fff; font-weight: 600; }
/* Filtering collapses the headline, but the search panel stays put. */
body.filtering .hero-inner { padding: 20px 32px 22px; }
body.filtering .search-panel { margin-top: 0; }

.search-panel {
  margin-top: 28px; background: #fff; border-radius: 12px; box-shadow: var(--shadow-panel); padding: 10px;
  display: grid; grid-template-columns: 1.1fr 1.4fr 1.2fr 1.1fr .9fr .9fr; gap: 8px;
}
.field { display: flex; flex-direction: column; gap: 3px; padding: 6px 12px 8px; border-radius: 8px; background: var(--surface); min-width: 0;
  transition: background .15s ease, box-shadow .15s ease; }
.field[hidden] { display: none; }
/* An active filter tints its whole field, so you can see what is applied without
   opening anything. Set by multiSelect's renderLabel and by setFieldActive(). */
.field.is-active { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand); }
.field.is-active label { color: var(--brand); }
.field.is-active .ms-label, .field.is-active input, .field.is-active select { color: var(--brand); font-weight: 600; }
.field label { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.field input, .field select {
  border: none; background: none; outline: none; width: 100%; padding: 0; color: var(--ink);
  min-height: 30px;
  font-family: inherit; font-size: 14px; font-weight: 500; appearance: none; -webkit-appearance: none;
  text-overflow: ellipsis; cursor: pointer;
}
/* appearance:none strips the native arrow, so draw the same chevron the comboboxes use. */
.field select {
  padding-right: 20px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355616D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; background-size: 14px 14px;
}
.field.is-active select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4B6E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.field input { font-weight: 400; cursor: text; }
.field input::placeholder { color: var(--muted); }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }

.loc-row { margin-top: 14px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.loc-lbl { font-size: 13px; font-weight: 500; color: #7C8894; flex: none; }

/* ===== Locality quick-chips (on the dark hero) ===== */
/* min-width:0 is load-bearing: as a flex item the chip row would otherwise size to
   its content and push the whole page wide instead of scrolling inside itself. */
.chip-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; min-width: 0; max-width: 100%; }
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; border: none; background: rgba(255,255,255,.1); color: #D9E2E9;
  border-radius: 999px; height: 30px; padding: 0 13px; font-size: 13px; font-weight: 500;
  white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.chip:hover { background: rgba(255,255,255,.2); }
.chip.active { background: #fff; color: var(--ink); }

/* ===== Discovery: browse by service ===== */
.discovery { max-width: var(--maxw); margin: 0 auto; padding: 40px 32px 0; }
.disco-inner { display: block; }
.disco-title { font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--ink); margin-bottom: 16px; }
.disco-sub { color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; margin: 6px 0 16px; max-width: 640px; }
.svc-browse { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.svc-card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; text-align: left;
  display: flex; flex-direction: column; gap: 10px; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.svc-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.svc-card .ico {
  width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 13px;
}
.svc-card .txt { display: block; min-width: 0; }
.svc-card .nm { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.svc-card .ct { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ===== Results ===== */
.content { max-width: var(--maxw); margin: 0 auto; padding: 44px 32px 0; }
.results-head { display: flex; align-items: baseline; gap: 12px; }
.results-head h2 { font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--ink); }
.results-count { color: var(--muted); font-size: 14px; }
/* One removable chip per active filter value. The heading can only summarise, so
   these carry the full truth and let a single filter be dropped without Clear all. */
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.active-filters[hidden] { display: none; }
.af-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 8px 0 12px;
  border: 1px solid var(--brand-soft); border-radius: 999px; background: var(--brand-soft);
  color: var(--brand); font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.af-chip:hover { background: #DCE8F2; border-color: var(--brand); }
.af-x { width: 13px; height: 13px; flex: none; opacity: .65; }
.af-chip:hover .af-x { opacity: 1; }
.results-note { color: var(--muted); font-size: 13px; margin: 8px 0 22px; }
.btn-clear { margin-left: auto; align-self: center; background: none; border: none; color: var(--brand); font-weight: 500; font-size: 13px; }
.btn-clear:hover { color: var(--brand-dark); text-decoration: underline; }
.btn-clear[hidden] { display: none; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* ===== Firm card =====
   The monogram tile hue is derived from the firm name so a grid of cards reads as
   varied rather than a wall of identical white boxes. */
.card {
  display: flex; flex-direction: column; gap: 12px; background: #fff; min-width: 0;
  border: 1px solid var(--line); border-radius: 12px; padding: 18px;
  cursor: pointer; box-shadow: var(--shadow-card);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card:hover { border-color: #CFC9BB; box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.card-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.card-mono {
  width: 44px; height: 44px; flex: none; border-radius: 10px; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 16px;
}
.card-head { flex: 1; min-width: 0; }
.card-name {
  font-family: var(--serif); font-weight: 600; font-size: 17.5px; line-height: 1.28; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-loc { color: var(--muted); font-size: 13px; margin-top: 3px; }
.card-dir { display: inline-flex; vertical-align: middle; margin-left: 5px; color: var(--line-strong); cursor: pointer;
  padding: 7px; margin: -7px -7px -7px 0; transition: color .12s ease, transform .12s ease; }
.card-dir svg { width: 14px; height: 14px; }
.card-dir:hover { color: var(--brand); transform: scale(1.12); }
.card-dir:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.card-actions { flex: none; display: flex; align-items: center; gap: 6px; }
.card-web, .card-fav {
  width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.card-web { background: var(--teal-tint); color: var(--teal); border-color: transparent; }
.card-web svg { width: 15px; height: 15px; }
.card-web:hover { background: var(--teal); color: #fff; }
.card-fav { font-size: 14px; line-height: 1; }
.card-fav:hover { color: #C0392B; border-color: #E3C9C4; }
.card-fav.is-saved { color: #C0392B; border-color: #E3C9C4; }
.card-rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-rating .cr-stars { color: var(--star); font-size: 13px; letter-spacing: 1px; }
.card-rating .cr-num { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.card-rating .cr-cnt { color: var(--muted); font-size: 13px; }
.card-new { font-size: 12.5px; font-weight: 500; color: var(--brand); background: var(--brand-soft); border-radius: 6px; padding: 4px 9px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.card-tag { height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 6px; background: var(--surface); color: var(--ink-soft); font-size: 12.5px; font-weight: 500; }
.card-tbc { font-size: 12.5px; line-height: 1.5; color: var(--muted); font-style: italic; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule); min-width: 0; }
.card-exp { font-size: 12.5px; font-weight: 500; color: var(--amber-ink); background: var(--amber-bg); border-radius: 6px; padding: 4px 9px; white-space: nowrap; }
.card-specs { font-size: 12.5px; color: var(--muted); }
.card-specs b { color: var(--ink-soft); font-weight: 600; }
.btn-view { font-size: 13.5px; font-weight: 600; color: var(--brand); white-space: nowrap; }
.card:hover .btn-view { color: var(--brand-dark); }

/* ===== Load more / empty ===== */
.load-more-wrap { display: flex; justify-content: center; padding: 34px 0 10px; }
.load-more-wrap[hidden] { display: none; }
.loader { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--brand); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loader { animation-duration: 1.6s; } }
.empty { text-align: center; padding: 48px 0; color: var(--muted); }
.empty p { font-size: 15px; }
.btn-text { background: none; border: none; color: var(--brand); font-weight: 600; text-decoration: underline; font-size: 14px; margin-top: 8px; }

/* ===== Searchable multi-select combobox (mounts inside .field) ===== */
.ms { position: relative; }
.ms-control {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: none; background: none; padding: 0; text-align: left; font-family: inherit;
  font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; min-height: 30px;
}
.ms-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-label.ms-ph { color: var(--muted); font-weight: 400; }
.ms.ms-has .ms-label { font-weight: 600; }
/* A real chevron, not a 10px glyph that reads as a speck. Same mark is drawn on the
   native selects below, so all six filter fields signal "opens a list" identically. */
.ms-caret { width: 14px; height: 14px; flex: 0 0 auto; color: var(--ink-soft); }
.ms.ms-open .ms-caret { transform: rotate(180deg); }
.field.is-active .ms-caret { color: var(--brand); }
.ms-panel {
  position: absolute; z-index: 60; top: calc(100% + 12px); left: -12px; min-width: 260px; max-width: 340px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 8px;
}
.ms-search { width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px; font-size: 14px; outline: none; margin-bottom: 6px; font-family: inherit; }
.ms-search:focus { border-color: var(--brand); box-shadow: var(--ring); }
.ms-list { max-height: 244px; overflow-y: auto; }
.ms-item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 14px;
  color: var(--ink); transition: background .12s ease, color .12s ease; }
.ms-item:hover { background: var(--surface); }
.ms-item input { flex: 0 0 auto; accent-color: var(--brand); width: 16px; height: 16px; }
/* Chosen rows are filled and brand-coloured - a bare native checkbox reads as
   "nothing happened" when you click an option. */
.ms-item.on { background: var(--brand-soft); color: var(--brand); }
.ms-item.on:hover { background: #DCE8F3; }
.ms-item.on .ms-item-label { font-weight: 600; }
.ms-item.on .ms-item-count { color: var(--brand); opacity: .75; }
.ms-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-item-count { color: var(--muted); font-size: 12px; flex: 0 0 auto; }
.ms-empty { color: var(--muted); font-size: 14px; padding: 10px 8px; }
.ms-clear { display: block; width: 100%; margin-top: 6px; padding: 9px; border: none; border-top: 1px solid var(--line); background: none; color: var(--brand); font-weight: 600; font-size: 13px; font-family: inherit; }
.ms-clear:hover { background: var(--surface); }
.ms-clear[hidden] { display: none; }

/* ===== Save-to-collection popover ===== */
.save-pop { position: absolute; z-index: 200; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 12px; width: 260px; }
.save-pop h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.save-list { max-height: 220px; overflow-y: auto; margin-bottom: 10px; }
.save-item { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.save-item:hover { background: var(--surface); }
.save-new { display: flex; gap: 8px; }
.save-new input { flex: 1; min-width: 0; border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 11px; font-size: 14px; outline: none; font-family: inherit; }
.save-new .btn-primary { padding: 9px 14px; font-size: 14px; margin-top: 0; }
.save-manage { display: inline-block; margin-top: 10px; color: var(--brand); font-weight: 600; font-size: 13px; }

/* ===== Buttons ===== */
.btn-primary {
  background: var(--brand); color: #fff; border: none; font-weight: 600; font-size: 14px;
  padding: 12px 20px; border-radius: 8px; margin-top: 14px;
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn-primary:hover { background: var(--brand-dark); box-shadow: var(--shadow-sm); }
.btn-primary:active { transform: translateY(1px); }
.btn-outline { border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font-weight: 600; font-size: 14px; padding: 11px 18px; border-radius: 8px; }
.btn-outline:hover { background: var(--surface); border-color: var(--muted); }

/* ===== Contact / get-listed band (home + firm page) ===== */
.cta-band { max-width: var(--maxw); margin: 36px auto 0; padding: 0 32px; }
.cta-inner {
  background: var(--ink); border-radius: 14px; padding: 30px 34px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.cta-inner .cta-txt { flex: 1; min-width: 0; }
.cta-inner .cta-txt h3 { font-family: var(--serif); font-weight: 600; font-size: 19px; color: #fff; }
.cta-inner .cta-txt p { font-size: 13.5px; line-height: 1.5; color: var(--hero-sub); margin-top: 6px; text-wrap: pretty; }
.cta-inner .btn-cta {
  flex: none; background: #fff; color: var(--ink); font-weight: 600; font-size: 13.5px;
  height: 40px; padding: 0 22px; border-radius: 8px; border: none; white-space: nowrap;
  transition: background .15s ease, transform .1s ease;
}
.cta-inner .btn-cta:hover { background: #EFECE4; transform: translateY(-1px); }
/* Two paths out of the band: listing a firm is the primary ask, everything else is
   the quieter outline button beside it. */
.cta-actions { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cta-inner .btn-cta-alt { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.38); }
.cta-inner .btn-cta-alt:hover { background: rgba(255,255,255,.12); }
.cta-note { max-width: var(--maxw); margin: 12px auto 0; padding: 0 4px; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }
.cta-note-link { color: var(--brand); font-weight: 500; text-decoration: underline; padding: 6px 0; }
.cta-note-link:hover { color: var(--brand-dark); }

/* ===== Footer ===== */
.site-footer { border-top: 1px solid var(--line); margin-top: 36px; padding: 26px 0; }
.site-footer p { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.footer-links { max-width: var(--maxw); margin: 6px auto 0; padding: 0 32px; display: flex; gap: 8px 20px; flex-wrap: wrap; }
/* Vertical padding gives the footer links a real touch target (20px -> 36px) without
   changing how the row looks. */
.footer-links a { color: var(--ink-soft); font-size: 13.5px; font-weight: 500; padding: 8px 0; }
.footer-links a:hover { color: var(--brand); }

/* ===== Firm profile page ===== */
.profile { max-width: 900px; margin: 24px auto; padding: 24px 32px 34px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-card); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crumbs .crumb-cur { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb { display: inline-block; padding: 6px 0; color: var(--muted); font-size: 13px; }
a.crumb:hover { color: var(--brand); text-decoration: underline; }

/* ===== Firm page: summary, ICAI block, FAQ, nearby firms ===== */
.firm-summary { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); text-wrap: pretty; }
.firm-summary strong { color: var(--ink); font-weight: 600; }
.psec-sub { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin-bottom: 14px; }
.psec-more { margin-top: 14px; font-size: 14px; }
.psec-more a, .firm-summary a { color: var(--brand); font-weight: 500; text-decoration: underline; padding: 5px 0; }

/* Sign-in prompt where a firm's contact details would be. Stated plainly rather than
   teased: it says exactly which details exist and why they are held back. */
.gate {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  background: var(--brand-soft); border: 1px solid #CFE0EC; border-radius: 12px;
  padding: 16px 18px; margin-top: 16px;
}
.gate-txt { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.gate-txt strong { font-size: 15px; color: var(--ink); font-weight: 600; }
.gate-txt span { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.btn-gate {
  flex: none; background: var(--brand); color: #fff; font-weight: 600; font-size: 14px;
  padding: 11px 20px; border-radius: 8px; white-space: nowrap;
  transition: background .15s ease;
}
.btn-gate:hover { background: var(--brand-dark); }
@media (max-width: 640px) { .gate { flex-direction: column; align-items: stretch; } .btn-gate { text-align: center; } }

/* Sign-in wall shown instead of a firm profile. Centred and deliberately sparse -
   it exists to be passed through, not read. */
.gate-page {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 48px 32px; margin-top: 12px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.gate-mono {
  width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 21px; margin-bottom: 18px;
}
.gate-page h1 { font-family: var(--serif); font-weight: 600; font-size: 26px; color: var(--ink); line-height: 1.25; text-wrap: balance; }
.gate-lede { font-size: 16px; color: var(--ink); margin-top: 12px; max-width: 460px; }
.gate-body { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin-top: 10px; max-width: 460px; }
.gate-page .btn-gate { margin-top: 22px; padding: 13px 26px; font-size: 15px; }
.gate-foot { font-size: 13px; color: var(--muted); margin-top: 16px; }
.gate-foot a { color: var(--brand); font-weight: 500; text-decoration: underline; padding: 6px 0; }
@media (max-width: 640px) { .gate-page { padding: 36px 20px; } .gate-page h1 { font-size: 22px; } }

.icai-box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.icai-num { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.icai-num .k { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.icai-num strong { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: .02em; }
.icai-box p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.icai-box p + p { margin-top: 10px; }
.icai-box a { color: var(--brand); font-weight: 500; text-decoration: underline; padding: 5px 0; }
.icai-prov { color: var(--muted); font-size: 13px; }

.faq { display: flex; flex-direction: column; gap: 8px; }
.faq-item { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.faq-item summary {
  cursor: pointer; padding: 13px 16px; font-weight: 600; font-size: 14.5px; color: var(--ink);
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 19px; line-height: 1; flex: none; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item[open] summary { border-bottom: 1px solid var(--rule); }
.faq-item p { padding: 12px 16px 15px; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }

.near-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.near-card {
  display: flex; align-items: center; gap: 11px; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.near-card:hover { border-color: #CFC9BB; box-shadow: var(--shadow-hover); }
.near-mono {
  width: 34px; height: 34px; flex: none; border-radius: 8px; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 13px;
}
.near-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.near-name { font-weight: 600; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.near-meta { color: var(--muted); font-size: 12.5px; }

/* ===== Guides ===== */
.doc .lede { font-size: 17px; line-height: 1.65; color: var(--ink); margin: 4px 0 8px; text-wrap: pretty; }
.doc h3 { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--ink); margin: 22px 0 6px; }
.doc ol { margin: 10px 0 10px 20px; }
.doc ol li { margin-bottom: 7px; line-height: 1.6; }
.guide-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 6px; }
.guide-card {
  display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.guide-card:hover { border-color: #CFC9BB; box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.gc-title { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--brand); }
.gc-sub { color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; }
.guide-links { margin: 10px 0 0 20px; }
.guide-links li { margin-bottom: 6px; line-height: 1.6; }
@media (max-width: 640px) { .guide-cards { grid-template-columns: 1fr; } }

/* ===== Ad slots =====
   Collapsed entirely until ads.js confirms advertising is on, then given a reserved
   height before the iframe arrives so nothing on the page jumps. The label is
   required by Google's policy on distinguishing ads from content. */
.ad-slot { display: none; }
.ad-slot[hidden] { display: none !important; }
.ads-on .ad-slot {
  display: block; width: 100%; max-width: 100%; overflow: hidden;
  margin: 22px auto; text-align: center;
}
.ads-on .ad-slot::before {
  content: "Advertisement"; display: block; margin-bottom: 6px;
  color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.ads-on .ad-slot ins { max-width: 100%; }
.crumb:hover { color: var(--brand); text-decoration: underline; }
.crumb-sep { color: var(--line-strong); margin: 0 5px; }
.crumb-cur { color: var(--ink-soft); font-weight: 500; font-size: 13px; }
.profile-hero { display: flex; align-items: flex-start; gap: 16px; margin: 16px 0 4px; }
.profile-mono { width: 60px; height: 60px; flex: none; border-radius: 12px; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 22px; }
.ph-main { flex: 1; min-width: 0; }
.profile-hero h1 { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.2; color: var(--ink); }
.ph-sub { color: var(--ink-soft); font-size: 14.5px; margin-top: 4px; }
.ph-save {
  flex: none; align-self: flex-start; background: #fff; color: var(--ink-soft); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 9px 16px; font-weight: 600; font-size: 13.5px; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ph-save:hover { background: var(--surface); color: var(--ink); }
.ph-save.is-saved { background: var(--brand); color: #fff; border-color: var(--brand); }
.rating-strip { display: flex; gap: 28px; flex-wrap: wrap; padding: 16px 0 20px; border-bottom: 1px solid var(--rule); }
.rstat .big { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--ink); }
/* The no-reviews state is a statement, not a stat - it should not shout like a score. */
.rstat .big.quiet { font-size: 18px; color: var(--ink-soft); }
.rstat .lbl { color: var(--muted); font-size: 13px; margin-top: 2px; }
.psec { padding: 22px 0; border-top: 1px solid var(--rule); }
.psec:first-of-type { border-top: none; }
.psec h2 { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink); margin-bottom: 14px; }
.psec .hcount { color: var(--muted); font-weight: 400; font-size: 15px; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.info-item { font-size: 15px; }
.info-item .k { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 3px; }
.info-item a { display: inline-block; padding: 3px 0; color: var(--brand); font-weight: 500; word-break: break-word; }
.info-item a:hover { text-decoration: underline; }
.frn { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; letter-spacing: .3px; }
.source-note { color: var(--muted); font-size: 13px; line-height: 1.55; margin-top: 14px; }
.source-note a { color: var(--brand); font-weight: 500; text-decoration: underline; }
.btn-directions {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  background: #fff; color: var(--brand); border: 1px solid var(--brand); border-radius: 8px;
  padding: 9px 16px; font-weight: 600; font-size: 13.5px;
  transition: background .15s ease, color .15s ease;
}
.btn-directions svg { width: 16px; height: 16px; }
.btn-directions:hover { background: var(--brand); color: #fff; }
.apply-box {
  margin-top: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.apply-txt { display: flex; flex-direction: column; gap: 3px; }
.apply-txt strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.apply-txt span { font-size: 13px; color: var(--muted); max-width: 460px; }
.apply-btns { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }
.btn-apply {
  flex: 0 0 auto; background: var(--brand); color: #fff; border: 1px solid var(--brand); border-radius: 8px;
  padding: 11px 18px; font-weight: 600; font-size: 14px; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.btn-apply:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-apply-alt { background: #fff; color: var(--brand); }
.btn-apply-alt:hover { background: var(--brand-soft); color: var(--brand-dark); }
.svc-note { color: var(--muted); font-size: 13px; margin-bottom: 12px; line-height: 1.55; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-tag { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--ink-soft); }

/* Reviews */
.rating-summary { display: flex; align-items: center; gap: 28px; margin-bottom: 18px; flex-wrap: wrap; }
.rs-big { font-family: var(--serif); font-weight: 600; font-size: 40px; color: var(--ink); line-height: 1; }
.rs-big .rev-stars { display: block; font-family: var(--sans); font-size: 15px; margin-top: 4px; }
.rs-bars { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.bar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.bar-lbl { width: 12px; text-align: right; }
.bar { flex: 1; height: 8px; background: var(--surface); border-radius: 6px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--star); border-radius: 6px; }
.bar-n { width: 26px; }
.rev-list { display: flex; flex-direction: column; gap: 16px; }
.rev { border-top: 1px solid var(--rule); padding-top: 16px; }
.rev:first-child { border-top: none; padding-top: 0; }
.rev-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rev-author { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.rev-stars { color: var(--star); letter-spacing: 1px; font-size: 14px; }
.rev-tag { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; letter-spacing: .3px; color: var(--teal); background: var(--teal-tint); border: 1px solid #C6E1DC; border-radius: 20px; padding: 2px 9px; vertical-align: middle; }
.rev-svc { display: inline-block; font-size: 12px; color: var(--ink-soft); background: var(--surface); padding: 3px 9px; border-radius: 12px; margin: 0 6px 6px 0; }
.rev-body { font-size: 15px; line-height: 1.6; margin-top: 8px; color: var(--ink); }
.rev-report { margin-top: 8px; background: none; border: none; color: var(--muted); font-size: 12px; font-weight: 500; padding: 0; }
.rev-report:hover { color: var(--ink); text-decoration: underline; }
.rev-empty { color: var(--muted); font-size: 15px; }

/* Review form */
.rev-form { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.rev-form h4 { font-family: var(--serif); font-weight: 600; font-size: 17px; margin-bottom: 4px; }
.rev-form .hint { color: var(--muted); font-size: 13px; margin-bottom: 14px; line-height: 1.55; }
.rev-form label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin: 12px 0 5px; }
.rev-form input, .rev-form select, .rev-form textarea {
  width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; padding: 11px 13px;
  font-size: 15px; font-family: inherit; outline: none; background: #fff; color: var(--ink);
}
.rev-form input:focus, .rev-form select:focus, .rev-form textarea:focus { border-color: var(--brand); box-shadow: var(--ring); }
.rev-form textarea { min-height: 96px; resize: vertical; }
.star-pick { font-size: 28px; color: var(--line-strong); letter-spacing: 4px; }
.star-pick span { cursor: pointer; transition: color .1s; }
.star-pick span.on { color: var(--star); }
.aspect-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.aspect {
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink-soft);
  border-radius: 20px; padding: 7px 14px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.aspect:hover { border-color: var(--brand); color: var(--brand); }
.aspect.on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ===== Contact links + awareness nudge ===== */
/* "Contact us" chooser: asks which errand this is, then opens that draft. */
.choose-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(22,35,46,.5); display: grid; place-items: center; padding: 20px; }
.choose-card {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  width: 100%; max-width: 430px; padding: 24px; box-shadow: var(--shadow-pop);
}
.choose-card h3 { font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--ink); padding-right: 24px; }
.choose-sub { color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; margin: 6px 0 16px; }
.choose-close { position: absolute; top: 6px; right: 8px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: none; border: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; }
.choose-close:hover { color: var(--ink); }
.choose-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.choose-opt:last-of-type { margin-bottom: 0; }
.choose-opt:hover { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-1px); }
.choose-opt-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choose-opt-title { font-weight: 600; font-size: 15px; color: var(--ink); }
.choose-opt-sub { font-size: 12.5px; color: var(--muted); }
.choose-opt-arrow { flex: none; color: var(--brand); font-weight: 600; }

.contact-nudge {
  position: fixed; z-index: 200; right: 20px; bottom: 20px; width: 340px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-pop); padding: 16px 18px 15px;
  animation: nudge-in .32s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes nudge-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.contact-nudge h4 { font-family: var(--serif); font-size: 16px; font-weight: 600; padding-right: 18px; }
.contact-nudge p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; margin: 6px 0 13px; }
.contact-nudge .nudge-btns { display: flex; align-items: center; gap: 10px; }
.contact-nudge .btn-primary { margin-top: 0; padding: 9px 16px; font-size: 14px; }
.contact-nudge a.btn-primary { display: inline-block; color: #fff; text-decoration: none; }
.nudge-later { background: none; border: none; padding: 9px 4px; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.nudge-later:hover { color: var(--ink); }
.nudge-close { position: absolute; top: 3px; right: 6px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: none; border: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.nudge-close:hover { color: var(--ink); }

/* ===== Static content pages (about / terms / privacy / guidelines) ===== */
.doc { max-width: 760px; margin: 24px auto; padding: 36px 40px 48px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-card); }
.doc h1 { font-family: var(--serif); font-weight: 600; font-size: 30px; letter-spacing: -0.2px; margin-bottom: 6px; }
.doc .updated { color: var(--muted); font-size: 14px; margin-bottom: 26px; }
.doc h2 { font-family: var(--serif); font-weight: 600; font-size: 20px; margin: 28px 0 10px; }
.doc p, .doc li { font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.doc ul { padding-left: 22px; margin: 10px 0; }
.doc li { margin: 6px 0; }
.doc .note { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: 14px; color: var(--ink-soft); margin: 18px 0; }
.doc a { color: var(--brand); font-weight: 500; text-decoration: underline; padding: 6px 0; }

/* ===== Responsive ===== */
@media (max-width: 1150px) {
  .search-panel { grid-template-columns: repeat(3, 1fr); }
  .svc-browse { grid-template-columns: repeat(4, 1fr); }
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hero h1 { font-size: 32px; }
  .info-grid { grid-template-columns: 1fr; }
  .svc-browse { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .header-inner, .hero-inner, .discovery, .content, .cta-band, .site-footer p, .footer-links { padding-left: 20px; padding-right: 20px; }
  /* Comfortable touch targets on phones. */
  .card-web, .card-fav { width: 36px; height: 36px; }
  .chip { height: 34px; padding: 0 14px; }
  .af-chip { height: 34px; padding: 0 10px 0 14px; }
  /* Phone / email / website are the primary actions on a profile, so give them
     a full-width row to hit rather than just the text run. */
  .info-item a { display: block; padding: 7px 0; }
  .near-grid { grid-template-columns: 1fr; }
  .icai-num strong { font-size: 21px; }
  /* The 260px dropdown is wider than a half-width field, so on the right-hand
     column it ran off the screen. Grow it leftwards from that field's right edge
     instead, and never let it exceed the viewport. */
  .ms-panel { max-width: calc(100vw - 24px); }
  .search-panel .field:nth-child(even) .ms-panel { left: auto; right: -12px; }
  .hero-inner { padding-top: 34px; padding-bottom: 30px; }
  .hero h1 { font-size: 27px; }
  .hero p { font-size: 14.5px; }
  .search-panel { grid-template-columns: 1fr 1fr; }
  .svc-browse { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: 1fr; }
  /* Keep both contact actions reachable on a phone; drop the wordmark instead,
     since the logo still identifies the site. */
  .brand-name, .brand-beta { display: none; }
  .header-link-guides { display: none; }
  /* Signed in, the auth slot adds a Collections button, a handle chip and Log out on
     top of the two contact links. On a 390px screen that came to 530px of header and
     pushed the whole document to 600px wide, which is what made every page look
     shifted left with a dead strip down the right.
     Collections goes (it is still reachable from "Manage collections" in the save
     popover), the handle truncates instead of setting the header's width, and the row
     is allowed to wrap so no future addition can force overflow again. Log out stays:
     there is nowhere else to sign out from. */
  .header-inner { flex-wrap: wrap; height: auto; min-height: 56px; padding-top: 8px; padding-bottom: 8px; row-gap: 8px; }
  .header-right { flex: 1 1 auto; justify-content: flex-end; gap: 10px; min-width: 0; }
  .auth-slot { min-width: 0; gap: 8px; }
  .auth-slot .auth-btn[href="/collections.html"] { display: none; }
  /* Log out lives on the account page, which the handle chip links to. Dropping it
     here leaves the chip as the only auth element, so it gets the room back and can
     show a full handle rather than an ellipsis. */
  .auth-slot #authLogout { display: none; }
  .auth-user { min-width: 0; max-width: 170px; overflow: hidden; text-overflow: ellipsis; padding: 8px 12px; font-size: 12.5px; }
  .auth-slot .auth-btn { padding: 8px 12px; font-size: 12.5px; white-space: nowrap; }
  .header-actions { gap: 10px; }
  .header-actions .header-link + .header-link { padding-left: 10px; }
  .header-link { font-size: 12.5px; padding: 8px 0; }
  .header-right { gap: 12px; }
  /* stretch (not flex-start) so the chip row is bounded by the viewport and scrolls
     inside itself rather than sizing to its content. */
  .loc-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .loc-lbl { align-self: flex-start; }
  .profile { margin: 16px 12px; padding: 20px 20px 28px; border-radius: 14px; }
  .profile-hero { flex-wrap: wrap; }
  .profile-hero h1 { font-size: 24px; }
  .doc { margin: 16px 12px; padding: 26px 22px 34px; }
  .apply-box { flex-direction: column; align-items: stretch; }
  .apply-btns { width: 100%; }
  .btn-apply { flex: 1 1 100%; text-align: center; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .contact-nudge { right: 16px; left: 16px; bottom: 16px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .contact-nudge { animation: none; } }