/* ==========================================================================
   Coastal SD Pros — 100K homepage system ("the records desk on the Pacific")
   Loads INSTEAD of home.css on index.html only, after directory.css and
   select-menu.css so it wins cascade ties. Brief:
   09-coastal-sd-pros/CSDP-100K-DESIGN-BRIEF-2026-08-03.md
   Kill-rules: no generic-template feel, no cheap details, no dead sections,
   a real above-the-fold wow. Motion is interaction-only — scroll-reveal
   opacity effects are banned sitewide by owner decision.
   ========================================================================== */

/* --------------------------------------------------------------------------
   DISPLAY FACE — Newsreader variable (wght 200-800, opsz 6-72 auto).
   Same physical files declared in editorial.css/profile.css; browsers dedupe
   by URL. If assets/fonts/ moves, this falls to Iowan/Georgia visibly — QA
   measures the loaded face, so a silent fallback fails the build.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: Newsreader;
  src: url("/assets/fonts/newsreader-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Newsreader;
  src: url("/assets/fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   TOKENS — evolution of the --dir-* family (white / ink / navy / coral).
   Coral is reserved for actions. Teal marks record/verification semantics.
   Shadows are ink-tinted and layered; nothing uses flat black.
   -------------------------------------------------------------------------- */
.hp-page {
  /* v4 consumer-marketplace tokens (owner-approved comp, 2026-08-10) —
     white page, Inter-only weight hierarchy (serif = wordmark only),
     coral single action, teal record semantics, amber stars. Values match
     guide-premium.css / profile-v4.css. */
  --k-ink: #1a2733;
  --k-ink-strong: #10202e;
  --k-ink-soft: #34434f;
  --k-navy: #0c2033;
  --k-deep: #0c2033;
  --k-deeper: #0a1826;
  --k-paper: #f7f7f5;
  --k-white: #ffffff;
  --k-coral: #d95745;
  --k-coral-hover: #c24736;
  --k-coral-press: #a93d2e;
  --k-coral-tint: rgba(217, 87, 69, .1);
  --k-coral-bright: #f4826f;
  --k-teal: #147d80;
  --k-teal-deep: #0d6265;
  --k-teal-tint: rgba(20, 125, 128, .09);
  --k-amber: #f2a33c;
  --k-line: #e8eaec;
  --k-line-cool: #e8eaec;
  --k-line-strong: #d3d8dc;
  --k-muted: #5d6772;
  --k-faint: #8a939c;
  --k-focus: #4fc3c0;
  --k-r-s: 10px;
  --k-r-m: 14px;
  --k-r-l: 16px;
  --k-sh-1: 0 1px 2px rgba(16, 32, 46, .06), 0 4px 12px rgba(16, 32, 46, .06);
  --k-sh-2: 0 3px 10px rgba(16, 32, 46, .1), 0 14px 36px rgba(16, 32, 46, .14);
  --k-sh-3: 0 2px 8px rgba(16, 32, 46, .12), 0 8px 28px rgba(16, 32, 46, .1);
  --k-ease: cubic-bezier(.2, .7, .2, 1);
  --k-serif: Newsreader, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --k-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.hp-page {
  overflow-x: hidden;
  background: var(--k-white);
  color: var(--k-ink);
  font-family: var(--k-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hp-page ::selection {
  background: rgba(217, 87, 69, .22);
}

.hp-page h1,
.hp-page h2,
.hp-page h3,
.hp-page p,
.hp-page figure {
  margin: 0;
}

.hp-page h1,
.hp-page h2,
.hp-page h3 {
  text-wrap: balance;
}

.hp-page p,
.hp-page li {
  text-wrap: pretty;
}

.hp-page .dir-shell {
  width: min(calc(100% - 48px), 1200px);
}

@media (max-width: 700px) {
  .hp-page .dir-shell {
    width: calc(100% - 40px);
  }
}

.hp-page :focus-visible {
  outline: 2px solid var(--k-focus);
  outline-offset: 2px;
  border-radius: 6px;
}

.hp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Numerals in data positions read as records: tabular, aligned. */
.hp-num,
.hp-business__rating strong,
.hp-city-row a strong,
.hp-city-row header p strong,
.hp-trade-rail__body small {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   HEADER — v4 marketplace chrome: always solid white with a hairline, the
   serif wordmark (the one serif on the page), pill nav, outline business
   pill. Sticky so the search is one scroll-up away; a soft shadow marks the
   scrolled state.
   -------------------------------------------------------------------------- */
.hp-page .hp-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--k-line);
  background: var(--k-white);
  transition: box-shadow .28s var(--k-ease);
}

.hp-page .dir-header__top {
  min-height: 66px;
  gap: 24px;
}

.hp-page .hp-brand {
  color: var(--k-ink-strong);
  font-family: var(--k-serif);
  font-size: 21.5px;
  font-weight: 640;
  letter-spacing: -.012em;
  text-decoration: none;
}

.hp-page .hp-brand strong {
  font-weight: 640;
}

.hp-page .csdp-brand__accent {
  color: var(--k-coral);
}

.hp-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.hp-nav a {
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--k-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .14s ease-out;
}

.hp-nav a:hover {
  color: var(--k-ink);
  background: var(--k-paper);
}

.hp-nav .hp-nav__business {
  margin-left: 6px;
  padding: 9px 16px;
  border: 1px solid var(--k-line-strong);
  color: var(--k-ink);
  font-weight: 640;
  transition: border-color .14s ease-out, box-shadow .14s ease-out;
}

.hp-nav .hp-nav__business:hover {
  border-color: var(--k-ink);
  color: var(--k-ink);
  background: var(--k-white);
  box-shadow: var(--k-sh-1);
}

.hp-page .hp-header.is-scrolled {
  box-shadow: var(--k-sh-1);
}

/* Mobile nav */
.hp-mobile-nav {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 4px;
}

.hp-mobile-nav > a {
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--k-ink);
  font-size: 14.5px;
  font-weight: 620;
  text-decoration: none;
}

.hp-menu {
  position: relative;
}

.hp-menu summary {
  display: grid;
  place-content: center;
  gap: 4.5px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  cursor: pointer;
  list-style: none;
}

.hp-menu summary::-webkit-details-marker {
  display: none;
}

.hp-menu summary span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--k-ink);
}

.hp-menu[open] summary span {
  background: var(--k-ink);
}

.hp-menu[open]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
}

.hp-menu nav {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  min-width: 224px;
  padding: 8px;
  border: 1px solid var(--k-line-cool);
  border-radius: var(--k-r-m);
  background: var(--k-white);
  box-shadow: var(--k-sh-3);
}

.hp-menu nav a {
  padding: 12px 14px;
  border-radius: 9px;
  color: var(--k-ink);
  font-size: 15px;
  font-weight: 560;
  text-decoration: none;
}

.hp-menu nav a:hover {
  background: var(--k-paper);
  color: var(--k-ink-strong);
}

@media (max-width: 860px) {
  .hp-nav {
    display: none;
  }

  .hp-mobile-nav {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   HERO — full-bleed graded trade photography + the search desk, sitting
   below the solid white header like the comp's navy photo band.
   -------------------------------------------------------------------------- */
.hp-hero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 78svh, 800px);
  padding: 76px 0 196px; /* bottom band reserved for the trade tabs layer */
  overflow: hidden;
  background: var(--k-deep);
}

.hp-hero__slides {
  position: absolute;
  inset: 0;
}

.hp-hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .9s var(--k-ease);
}

.hp-hero__slide.is-active {
  opacity: 1;
}

.hp-hero__slide picture,
.hp-hero__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-hero__slide img {
  filter: saturate(.86) contrast(1.02);
}

/* One committed grade over every slide: deep Pacific ink rising from the
   left where the type lives, falling away over the photography. */
.hp-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(76deg, rgba(8, 20, 33, .88) 0%, rgba(8, 20, 33, .72) 30%, rgba(10, 26, 42, .34) 58%, rgba(8, 20, 33, .22) 78%, rgba(8, 20, 33, .48) 100%),
    linear-gradient(180deg, rgba(8, 20, 33, .30) 0%, rgba(8, 20, 33, 0) 26%, rgba(8, 20, 33, 0) 62%, rgba(8, 20, 33, .58) 100%);
}

.hp-hero__inner {
  position: relative;
  z-index: 4;
  display: grid;
  max-width: 780px;
  /* owner fix 2026-08-11: the old split-hero pinned this block to the right
     edge (margin-inline: auto 0); the v4 hero centers it at every width */
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

@media (min-width: 701px) {
  .hp-page .hp-hero .dir-shell.hp-hero__inner {
    width: min(calc(100% - 48px), 1200px);
    max-width: none;
  }

  .hp-hero__copy,
  .hp-hero .hp-search,
  .hp-hero__cta {
    max-width: 780px;
  }
}

.hp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: rgba(255, 255, 255, .92);
  font-size: 13px;
  font-weight: 640;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hp-hero__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--k-coral-bright);
}

.hp-page .hp-hero__headline {
  margin-bottom: 40px;
  color: #fff;
  font-family: var(--k-sans);
  font-size: clamp(2.3rem, 4.4vw, 3.6rem);
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -.022em;
}

/* THE SEARCH PILL — the comp's Airbnb-style segmented pill. -------------- */
.hp-search {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr auto;
  align-items: stretch;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--k-line);
  border-radius: 999px;
  background: var(--k-white);
  box-shadow: var(--k-sh-3);
}

.hp-search__field {
  position: relative;
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 10px 22px;
  border-radius: 999px;
  transition: background-color .14s ease-out;
}

.hp-search__field:hover {
  background: var(--k-paper);
}

.hp-search__field + .hp-search__field::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--k-line);
}

.hp-search__field label {
  color: var(--k-ink-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* Native select (no-JS) and the ui-select trigger (JS) share one voice. */
.hp-search__field select,
.hp-search__field .ui-select__trigger {
  width: 100%;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--k-ink);
  font-family: var(--k-sans);
  font-size: 16.5px;
  font-weight: 620;
  text-align: left;
  cursor: pointer;
}

/* JS path: select-menu.js swaps in a trigger and absolutely positions the
   field label at its top (select-menu.css .ui-select-field contract), so the
   trigger must reserve headroom under the label. */
.hp-page .hp-search__field .ui-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 21px 30px 4px 0;
  box-shadow: none;
}

.hp-page .hp-search__field.ui-select-field > label {
  top: 12px;
  left: 22px;
}

.hp-search__field select:focus-visible,
.hp-search__field .ui-select__trigger:focus-visible {
  outline: 2px solid var(--k-focus);
  outline-offset: 4px;
}

.hp-search__field .ui-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-search__field .ui-select__trigger::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 2px;
  border-right: 2px solid var(--k-faint);
  border-bottom: 2px solid var(--k-faint);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s var(--k-ease), border-color .18s var(--k-ease);
}

.hp-search__field .ui-select[aria-expanded="true"] .ui-select__trigger::after,
.hp-search__field .ui-select.is-open .ui-select__trigger::after {
  border-color: var(--k-ink);
}

.hp-search__field .ui-select__menu {
  min-width: 100%;
  margin-top: 12px;
  padding: 8px;
  border: 1px solid var(--k-line-cool);
  border-radius: var(--k-r-m);
  background: var(--k-white);
  box-shadow: var(--k-sh-3);
}

.hp-search__field .ui-select__option {
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 15.5px;
  font-weight: 540;
}

.hp-search__field .ui-select__option:hover,
.hp-search__field .ui-select__option[aria-selected="true"] {
  background: var(--k-paper);
  color: var(--k-ink-strong);
}

.hp-search button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 148px;
  margin-left: 8px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--k-coral);
  color: #fff;
  font-family: var(--k-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .005em;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(217, 87, 69, .55);
  transition: background-color .14s ease-out, transform .12s ease-out, box-shadow .14s ease-out;
}

.hp-search button[type="submit"] svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
}

.hp-search button[type="submit"]:hover {
  background: var(--k-coral-hover);
  transform: scale(1.02);
}

.hp-search button[type="submit"]:active {
  background: var(--k-coral-press);
  transform: scale(.98);
}

/* Hero CTA + credit -------------------------------------------------------- */
.hp-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .18s var(--k-ease), border-color .18s var(--k-ease);
}

.hp-hero__cta svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s var(--k-ease);
}

.hp-hero__cta:hover {
  border-color: rgba(255, 255, 255, .66);
  background: rgba(255, 255, 255, .2);
}

.hp-hero__cta:hover svg {
  transform: translateX(3px);
}

.hp-hero__credit {
  position: absolute;
  right: 24px;
  bottom: 82px; /* clear of the trust ledger's overlap into the hero */
  z-index: 5;
  max-width: 40%;
  text-align: right;
  margin: 0;
  color: rgba(255, 255, 255, .52);
  font-size: 11.5px;
  letter-spacing: .02em;
}

.hp-hero__credit a {
  color: rgba(255, 255, 255, .68);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hp-hero__credit a:hover {
  color: #fff;
}

/* Trade tabs (the redesigned slide pickers) + rotation toggle -------------- */
.hp-hero__controls {
  position: absolute;
  left: 50%;
  bottom: 84px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(calc(100% - 48px), 1200px);
  transform: translateX(-50%);
  justify-content: flex-start;
  pointer-events: none;
}

.hp-hero__pickers {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  background: rgba(10, 24, 38, .42);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}

.hp-hero__picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  font-family: var(--k-sans);
  font-size: 13px;
  font-weight: 620;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .18s var(--k-ease), color .18s var(--k-ease);
}

.hp-hero__picker:hover {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

.hp-hero__picker.is-active {
  color: var(--k-deep);
  background: #fff;
  box-shadow: 0 2px 10px rgba(6, 16, 27, .35);
}

.hp-hero__picker .hp-pick__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: .55;
}

.hp-hero__picker.is-active .hp-pick__dot {
  background: var(--k-coral);
  opacity: 1;
}

.hp-hero__toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  background: rgba(10, 24, 38, .42);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color .18s var(--k-ease), color .18s var(--k-ease);
}

.hp-hero__toggle:hover {
  color: #fff;
  background: rgba(10, 24, 38, .62);
}

.hp-hero__toggle svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hp-hero__play-icon {
  display: none;
}

[data-hero][data-rotation="stopped"] .hp-hero__pause-icon {
  display: none;
}

[data-hero][data-rotation="stopped"] .hp-hero__play-icon {
  display: block;
}

.hp-hero__play-icon path {
  fill: currentColor;
  stroke: none;
}

/* --------------------------------------------------------------------------
   SNAPSHOT — the trust ledger. A white record card floating up over the
   hero's bottom edge; the page's provenance in one designed object.
   -------------------------------------------------------------------------- */
.hp-snapshot {
  position: relative;
  z-index: 6;
  margin-top: -58px;
  padding-bottom: 8px;
}

.hp-snapshot__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 26px 34px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-l);
  background: var(--k-white);
  box-shadow: var(--k-sh-2);
}

/* Record seal — decorative, aria-free. */
.hp-snapshot__inner::before {
  content: "";
  flex: none;
  width: 44px;
  height: 44px;
  border: 2px solid var(--k-teal);
  border-radius: 999px;
  background:
    radial-gradient(circle at center, var(--k-teal) 0 4px, transparent 5px),
    conic-gradient(from 20deg, transparent 0 24deg, rgba(20, 125, 128, .4) 24deg 26deg, transparent 26deg 68deg, rgba(20, 125, 128, .4) 68deg 70deg, transparent 70deg 112deg, rgba(20, 125, 128, .4) 112deg 114deg, transparent 114deg 156deg, rgba(20, 125, 128, .4) 156deg 158deg, transparent 158deg 200deg, rgba(20, 125, 128, .4) 200deg 202deg, transparent 202deg 244deg, rgba(20, 125, 128, .4) 244deg 246deg, transparent 246deg 288deg, rgba(20, 125, 128, .4) 288deg 290deg, transparent 290deg 332deg, rgba(20, 125, 128, .4) 332deg 334deg, transparent 334deg);
}

.hp-snapshot__inner p {
  flex: 1;
  color: var(--k-muted);
  font-size: 14px;
  line-height: 1.6;
}

.hp-snapshot__inner p strong {
  display: block;
  margin-bottom: 4px;
  color: var(--k-ink);
  font-size: 17.5px;
  font-weight: 560;
  line-height: 1.35;
}

.hp-snapshot__inner p strong .hp-num {
  font-family: var(--k-sans);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--k-ink-strong);
  padding-inline: 1px;
}

.hp-snapshot__inner > a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid rgba(20, 125, 128, .35);
  border-radius: 999px;
  background: var(--k-teal-tint);
  color: var(--k-teal-deep);
  font-size: 14px;
  font-weight: 640;
  text-decoration: none;
  transition: background-color .18s var(--k-ease), border-color .18s var(--k-ease), transform .18s var(--k-ease);
}

.hp-snapshot__inner > a:hover {
  border-color: var(--k-teal);
  background: rgba(20, 125, 128, .14);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   SECTION RHYTHM + HEADS
   -------------------------------------------------------------------------- */
.hp-section {
  padding: 104px 0;
}

.hp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--k-teal-deep);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hp-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--k-teal);
}

.hp-page .hp-section h2 {
  color: var(--k-ink-strong);
  font-family: var(--k-sans);
  font-size: clamp(1.7rem, 2.7vw, 2.25rem);
  font-weight: 760;
  line-height: 1.12;
  letter-spacing: -.02em;
}

.hp-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 46px;
}

.hp-section__head > p {
  max-width: 400px;
  padding-bottom: 6px;
  color: var(--k-muted);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .hp-section {
    padding: 72px 0;
  }

  .hp-section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 34px;
  }
}

/* --------------------------------------------------------------------------
   TOOLS — "Check before you hire." Paper field, one featured instrument.
   -------------------------------------------------------------------------- */
.hp-utility {
  background: var(--k-paper);
  border-top: 1px solid var(--k-line);
  border-bottom: 1px solid var(--k-line);
}

.hp-utility__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: start;
}

.hp-utility__intro h2 {
  margin-bottom: 14px;
}

.hp-utility__intro > p:not(.hp-kicker) {
  max-width: 42ch;
  color: var(--k-muted);
  font-size: 16px;
  line-height: 1.65;
}

.hp-tool-list {
  display: grid;
  gap: 12px;
}

.hp-tool-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 24px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-m);
  background: var(--k-white);
  color: var(--k-ink);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--k-sh-1);
  transition: transform .18s var(--k-ease), box-shadow .18s var(--k-ease), border-color .18s var(--k-ease);
}

.hp-tool-list a:hover {
  transform: translateY(-2px);
  border-color: var(--k-line-strong);
  box-shadow: var(--k-sh-2);
}

.hp-tool-list a > span[aria-hidden] {
  color: var(--k-coral);
  font-size: 19px;
  transition: transform .18s var(--k-ease);
}

.hp-tool-list a:hover > span[aria-hidden] {
  transform: translateX(4px);
}

.hp-tool-list__featured {
  position: relative;
  overflow: hidden;
  padding: 26px 24px !important;
  border-color: rgba(217, 87, 69, .35) !important;
  background: linear-gradient(120deg, var(--k-coral-tint) 0%, var(--k-white) 58%) !important;
}

.hp-tool-list__featured > span:first-child {
  display: grid;
  gap: 3px;
}

.hp-tool-list__featured small {
  width: fit-content;
  margin-bottom: 8px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--k-coral);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.hp-tool-list__featured strong {
  font-family: var(--k-sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.014em;
}

.hp-tool-list__featured em {
  color: var(--k-muted);
  font-family: var(--k-sans);
  font-style: normal;
  font-size: 14px;
}

@media (max-width: 960px) {
  .hp-utility__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* --------------------------------------------------------------------------
   TRADE RAIL — four photo cards under one committed grade.
   -------------------------------------------------------------------------- */
.hp-trade-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.hp-trade-rail a {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--k-r-l);
  background: var(--k-deep);
  box-shadow: var(--k-sh-1);
  text-decoration: none;
  transition: transform .22s var(--k-ease), box-shadow .22s var(--k-ease);
}

.hp-trade-rail a:hover {
  transform: translateY(-4px);
  box-shadow: var(--k-sh-2);
}

.hp-trade-rail__media {
  position: absolute;
  inset: 0;
}

.hp-trade-rail__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 32, 51, .08) 34%, rgba(10, 24, 38, .82) 100%);
}

.hp-trade-rail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88);
  transition: transform .6s var(--k-ease);
}

.hp-trade-rail a:hover .hp-trade-rail__media img {
  transform: scale(1.045);
}

.hp-trade-rail__body {
  position: absolute;
  left: 20px;
  right: 54px;
  bottom: 18px;
  display: grid;
  gap: 3px;
}

.hp-trade-rail__body strong {
  color: #fff;
  font-family: var(--k-sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.012em;
}

.hp-trade-rail__body small {
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  font-weight: 560;
  letter-spacing: .015em;
}

.hp-trade-rail__arrow {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 16px;
  transition: background-color .18s var(--k-ease), transform .18s var(--k-ease);
}

.hp-trade-rail a:hover .hp-trade-rail__arrow {
  background: var(--k-coral);
  border-color: var(--k-coral);
  transform: translateX(2px);
}

@media (max-width: 1080px) {
  .hp-trade-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hp-trade-rail a {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 560px) {
  .hp-trade-rail {
    display: flex;
    gap: 14px;
    margin-inline: -20px;
    padding-inline: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .hp-trade-rail::-webkit-scrollbar {
    display: none;
  }

  .hp-trade-rail a {
    flex: 0 0 72vw;
    aspect-ratio: 4 / 5;
    scroll-snap-align: start;
  }
}

/* --------------------------------------------------------------------------
   RECORD CARDS — "Inside the directory." Business examples as records.
   -------------------------------------------------------------------------- */
.hp-businesses {
  background: var(--k-paper);
  border-top: 1px solid var(--k-line);
}

.hp-section__head--businesses > p {
  max-width: 460px;
}

.hp-business-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.hp-business {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 20px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-l);
  background: var(--k-white);
  box-shadow: var(--k-sh-1);
  transition: transform .2s var(--k-ease), box-shadow .2s var(--k-ease), border-color .2s var(--k-ease);
}

.hp-business:hover {
  transform: translateY(-3px);
  border-color: var(--k-line-strong);
  box-shadow: var(--k-sh-2);
}

.hp-business__trade {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-bottom: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--k-teal-tint);
  color: var(--k-teal-deep);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.hp-business__trade::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--k-teal);
}

.hp-page .hp-business__identity h3 {
  font-family: var(--k-sans);
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.012em;
}

.hp-business__identity h3 a {
  color: var(--k-ink-strong);
  text-decoration: none;
}

.hp-business__identity h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hp-business__identity p {
  margin-top: 5px;
  color: var(--k-muted);
  font-size: 13.5px;
}

.hp-business__signal {
  width: fit-content;
  margin-top: 14px;
  padding: 5px 11px;
  border: 1px solid var(--k-line);
  border-radius: 999px;
  background: var(--k-paper);
  color: var(--k-ink-soft);
  font-size: 12.5px;
  font-weight: 580;
}

.hp-business__rating {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--k-line);
}

.hp-business__rating strong {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--k-ink-strong);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1;
}

.hp-business__rating strong span[aria-hidden] {
  color: var(--k-amber);
  font-size: 17px;
}

.hp-business__rating a {
  color: var(--k-muted);
  font-size: 13px;
  font-weight: 540;
  text-decoration: underline;
  text-decoration-color: var(--k-line-strong);
  text-underline-offset: 3px;
  transition: color .16s var(--k-ease), text-decoration-color .16s var(--k-ease);
}

.hp-business__rating a:hover {
  color: var(--k-ink);
  text-decoration-color: var(--k-ink);
}

.hp-business__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 18px;
  padding: 10px 16px;
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-r-s);
  color: var(--k-ink);
  font-size: 14px;
  font-weight: 660;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: border-color .14s ease-out, box-shadow .14s ease-out, transform .12s ease-out;
}

.hp-business__phone:hover {
  border-color: var(--k-ink);
  color: var(--k-ink);
  background: var(--k-white);
  box-shadow: var(--k-sh-1);
}

.hp-business__phone:active {
  transform: scale(.98);
}

.hp-business__profile {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  color: var(--k-ink);
  font-size: 14px;
  font-weight: 640;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .14s ease-out;
}

.hp-business__profile:hover {
  color: var(--k-teal-deep);
}

.hp-business__profile span[aria-hidden] {
  transition: transform .18s var(--k-ease);
}

.hp-business__profile:hover span[aria-hidden] {
  transform: translateX(4px);
}

.hp-businesses__footer {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-top: 40px;
}

.hp-businesses__footer a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--k-r-s);
  background: var(--k-coral);
  color: #fff;
  font-size: 14.5px;
  font-weight: 660;
  text-decoration: none;
  box-shadow: 0 6px 16px -6px rgba(217, 87, 69, .55);
  transition: background-color .14s ease-out, transform .12s ease-out;
}

.hp-businesses__footer a:hover {
  background: var(--k-coral-hover);
  transform: translateY(-1px);
}

.hp-businesses__footer a:active {
  transform: translateY(0) scale(.98);
}

.hp-businesses__footer p {
  color: var(--k-muted);
  font-size: 13.5px;
}

@media (max-width: 1120px) {
  .hp-business-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .hp-business-list {
    grid-template-columns: 1fr;
  }

  .hp-businesses__footer {
    flex-direction: column;
    gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   MARKETS — the evening registry. Deep Pacific band over CC0 pier
   photography; white city ledgers with dot-leader indexes.
   -------------------------------------------------------------------------- */
.hp-markets {
  position: relative;
  overflow: hidden;
  background: var(--k-deep);
}

.hp-markets::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/oceanside-pier-sunset-cc0.webp") center 38% / cover no-repeat;
  filter: saturate(.78);
  opacity: .38;
}

.hp-markets::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 24, 38, .9) 0%, rgba(10, 24, 38, .42) 42%, rgba(10, 24, 38, .86) 100%),
    linear-gradient(76deg, rgba(10, 24, 38, .48) 0%, rgba(10, 24, 38, .1) 60%);
}

.hp-markets > .dir-shell {
  position: relative;
  z-index: 2;
}

.hp-markets .hp-kicker {
  color: #8fc4c6;
}

.hp-markets .hp-kicker::before {
  background: #8fc4c6;
}

.hp-page .hp-markets h2 {
  color: #fff;
}

.hp-section__head--markets > p {
  color: rgba(255, 255, 255, .72);
}

.hp-city-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.hp-city-row {
  padding: 22px 22px 14px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--k-r-l);
  background: var(--k-white);
  box-shadow: var(--k-sh-3);
  transition: transform .2s var(--k-ease);
}

.hp-city-row:hover {
  transform: translateY(-3px);
}

.hp-city-row header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--k-line);
}

.hp-page .hp-city-row h3 {
  font-family: var(--k-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--k-ink-strong);
}

.hp-city-row header p {
  color: var(--k-muted);
  font-size: 12.5px;
  font-weight: 560;
}

.hp-city-row header p strong {
  margin-right: 4px;
  color: var(--k-ink-strong);
  font-family: var(--k-sans);
  font-size: 18px;
  font-weight: 700;
}

.hp-city-row > a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9.5px 2px;
  color: var(--k-ink-soft);
  font-size: 14.5px;
  font-weight: 560;
  text-decoration: none;
  transition: color .15s var(--k-ease);
}

/* Dot leader — the registry index grammar. */
.hp-city-row > a::after {
  content: "";
  order: 2;
  flex: 1;
  min-width: 24px;
  border-bottom: 2px dotted var(--k-line-strong);
  transform: translateY(-3px);
  transition: border-color .15s var(--k-ease);
}

.hp-city-row > a span {
  order: 1;
}

.hp-city-row > a strong {
  order: 3;
  min-width: 26px;
  color: var(--k-ink-strong);
  font-size: 14.5px;
  font-weight: 700;
  text-align: right;
}

.hp-city-row > a:hover {
  color: var(--k-teal-deep);
}

.hp-city-row > a:hover::after {
  border-color: rgba(20, 125, 128, .55);
}

.hp-city-row > a:hover strong {
  color: var(--k-teal-deep);
}

.hp-markets__credit {
  position: relative;
  z-index: 2;
  margin: 26px auto 0;
  width: min(calc(100% - 48px), 1200px);
  color: rgba(255, 255, 255, .42);
  font-size: 11.5px;
  text-align: right;
}

@media (max-width: 1020px) {
  .hp-city-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .hp-city-index {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   FOOTER — the comp's light footer: white ground, hairline top rule, the
   serif wordmark, quiet muted links.
   -------------------------------------------------------------------------- */
.hp-page .hp-footer {
  padding: 44px 0 32px;
  border-top: 1px solid var(--k-line);
  background: var(--k-white);
  color: var(--k-muted);
}

.hp-page .hp-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
}

.hp-brand--footer {
  color: var(--k-ink-strong);
  font-family: var(--k-serif);
  font-size: 17px;
  font-weight: 640;
  letter-spacing: -.012em;
  text-decoration: none;
}

.hp-brand--footer .csdp-brand__accent {
  color: var(--k-coral);
}

.hp-footer__grid > div > p {
  max-width: 40ch;
  margin-top: 12px;
  color: var(--k-faint);
  font-size: 13px;
  line-height: 1.65;
}

.hp-page .hp-footer nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 24px;
  justify-items: start;
}

.hp-page .hp-footer nav a {
  padding: 8px 0;
  color: var(--k-muted);
  font-size: 13.5px;
  font-weight: 560;
  text-decoration: none;
  transition: color .15s var(--k-ease);
}

.hp-page .hp-footer nav a:hover {
  color: var(--k-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hp-footer__base {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--k-line);
}

.hp-footer__base p {
  max-width: 84ch;
  color: var(--k-faint);
  font-size: 12.5px;
  line-height: 1.65;
}

.hp-footer__base p + p {
  margin-top: 12px;
}

@media (max-width: 860px) {
  .hp-page .hp-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* --------------------------------------------------------------------------
   HERO RESPONSIVE + small screens
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hp-hero {
    padding: 88px 0 132px;
  }

  .hp-hero__controls {
    bottom: 66px;
  }
}

@media (max-width: 700px) {
  .hp-hero {
    min-height: clamp(520px, 86svh, 720px);
    padding: 48px 0 150px;
    align-items: flex-start;
  }

  .hp-hero__shade {
    background:
      linear-gradient(180deg, rgba(8, 20, 33, .62) 0%, rgba(8, 20, 33, .4) 34%, rgba(10, 26, 42, .48) 66%, rgba(8, 20, 33, .82) 100%);
  }

  .hp-hero__eyebrow {
    margin-bottom: 16px;
    font-size: 11.5px;
  }

  .hp-hero__headline {
    margin-bottom: 28px;
    font-size: clamp(2.15rem, 9vw, 2.7rem);
    line-height: 1.08;
  }

  .hp-search {
    grid-template-columns: 1fr;
    padding: 8px;
    border-radius: 18px;
  }

  .hp-search__field {
    padding: 12px 14px;
    border-radius: 12px;
  }

  .hp-search__field + .hp-search__field::before {
    left: 14px;
    right: 14px;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .hp-page .hp-search__field.ui-select-field > label {
    left: 14px;
  }

  .hp-search button[type="submit"] {
    min-height: 50px;
    margin: 8px 0 0;
    width: 100%;
  }

  .hp-hero__cta {
    margin-top: 20px;
  }

  .hp-hero__controls {
    bottom: 58px;
    width: calc(100% - 40px);
  }

  .hp-hero__pickers {
    max-width: calc(100% - 48px);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .hp-hero__pickers::-webkit-scrollbar {
    display: none;
  }

  .hp-hero__picker {
    flex: none;
    padding: 8px 13px;
    font-size: 12.5px;
  }

  .hp-hero__credit {
    right: 20px;
    bottom: 108px; /* above the trade tabs row, clear of the ledger */
    font-size: 10.5px;
  }

  .hp-snapshot {
    margin-top: -44px;
  }

  .hp-snapshot__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 24px 22px;
  }

  .hp-snapshot__inner::before {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION — stillness without loss of content. (Scroll reveals are
   already banned; this removes the remaining transitions and transforms.)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hp-page *,
  .hp-page *::before,
  .hp-page *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .hp-hero__slide {
    transition: none;
  }

  .hp-trade-rail a:hover,
  .hp-business:hover,
  .hp-city-row:hover,
  .hp-tool-list a:hover {
    transform: none;
  }
}