/*
 * Find page — the parts that belong to this page only.
 *
 * The hero shell, scrim, section rhythm, buttons, tiles and scroll reveal come
 * from service_pages.css; the journey clip timing lives in journey_clips.css.
 * All three load together from mls_listings/find.
 *
 * Spec: docs/Redesign/design_handoff_find_page/README.md
 */

.find-hero {
  min-height: 620px;
}

/* ============================== keyhook art ==============================
   The hero line art (shared/graphics/_find_keyhook) hangs in .svc-hero-art —
   the same right-44% clipped slot Insure gives the umbrella, behind the
   scrim. The hd1–hd4 draw-in cascade comes from ink_graphics.css; only what
   is missing there lives here: sizing, the key's own slow draw, and the sway.

   The sway pivots at the hook contact point (transform-origin on the group
   in the SVG), and transform-box: view-box is what makes that user-space
   coordinate mean anything. */

.find-keyhook {
  --ink-dur: 2.9s;
  --ink-ease: cubic-bezier(.4, 0, .2, 1);
  position: absolute;
  right: 20px;
  /* Larger and lifted (owner 2026-08-09): full container width and a raised
     anchor put the ring-and-key cluster level with the H1 instead of hanging
     in the hero's lower half. The art layer clips the few px that run off
     the left edge at narrow widths — the leftmost ink starts 37% in, so
     nothing drawn is lost. */
  bottom: 80px;
  width: min(100%, 640px);
  max-height: 86%;
  stroke-width: 1.7;
}

@keyframes hdKey { 0%, 38% { stroke-dashoffset: 1 } 92%, 100% { stroke-dashoffset: 0 } }
.find-keyhook .ink-key {
  stroke-dasharray: 1;
  animation: hdKey var(--ink-dur) linear 1 both;
}

@keyframes pkSway {
  0%   { transform: rotate(-3.2deg) }
  50%  { transform: rotate(3.2deg) }
  100% { transform: rotate(-3.2deg) }
}
.find-keyhook .pk-sway {
  transform-box: view-box;
  animation: pkSway 4.4s ease-in-out .9s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .find-keyhook .pk-sway,
  .find-keyhook .ink-key,
  .find-keyhook .ink-draw { animation: none }
}

.find-hero-sub {
  max-width: 480px;
}

/* navbar_home is fixed and roughly 80px tall once the md:h-12 logo is in it.
   .svc-hero-inner's own 76px top padding therefore only just clears it and the
   headline read as though it were tucked under the nav. Start the hero block
   below the navbar instead of behind it. */
.find-hero .svc-hero-inner {
  padding-top: 156px;
}

/* Matches .home-hero-search in home_page.css. Everything else about the field
   comes from the shared .svc-search shell in service_pages.css. */
.find-search--hero {
  max-width: 560px;
}

/* ============================= sticky search ============================= */

.find-sticky {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 900;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--svc-border);
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.07);
  transform: translateY(-100%);
  transition: transform 0.32s var(--svc-ease);
}

.find-sticky.ss-in {
  transform: translateY(0);
}

.find-sticky-row {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
}

.find-sticky-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.find-sticky-logo img {
  display: block;
  height: 34px;
  width: auto;
}

.find-sticky-links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 0 auto;
}

.find-sticky-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--svc-ink-soft);
  text-decoration: none;
}

.find-sticky-links a:hover {
  color: var(--svc-orange);
}

/* The condensed field: same component, smaller shell. */
.find-search--sticky {
  flex: 1 1 auto;
  max-width: 620px;
}

.find-search--sticky .svc-search-icon {
  left: 14px;
  font-size: 14px;
}

.find-search--sticky input[type="text"] {
  padding: 11px 108px 11px 38px;
  font-size: 15px;
  background: var(--svc-tint);
  border: 1px solid #e2e8f0;
  box-shadow: none;
}

.find-search--sticky .svc-search-field > button {
  top: 6px;
  right: 6px;
  bottom: 6px;
  padding: 0 18px;
  font-size: 13px;
}

/* ========================= featured properties ========================= */

.find-results {
  padding-top: 96px;
  padding-bottom: 88px;
}

.find-results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--svc-border-soft);
}

.find-results-title {
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--svc-ink-soft);
  text-wrap: pretty;
}

.find-rail-frame {
  position: relative;
}

.find-rail {
  display: flex;
  gap: 20px;
  padding: 4px 0 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.find-rail::-webkit-scrollbar {
  display: none;
}

/* The rail's cards are shared/_listing_card (.listing-tile, styled in
   listing_card.css). Only the rail geometry belongs here — four visible at full
   width, never narrower than 260px. */
.find-rail .listing-tile {
  flex: 0 0 calc((100% - 60px) / 4);
  min-width: 260px;
  scroll-snap-align: start;
}

.find-rail-arrow {
  position: absolute;
  top: 50%;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-size: 14px;
  color: var(--svc-ink-soft);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.find-rail-arrow:hover:not(:disabled) {
  border-color: var(--svc-orange);
  color: var(--svc-orange);
}

.find-rail-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.find-rail-arrow--prev {
  left: -21px;
}

.find-rail-arrow--next {
  right: -21px;
}

.find-rail-footer {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 26px;
}

.find-rail-progress {
  flex: 1 1 auto;
  height: 2px;
  overflow: hidden;
  background: var(--svc-border-soft);
  border-radius: 999px;
}

/* A fixed-width thumb that slides, rather than a bar that grows. */
.find-rail-progress-fill {
  display: block;
  width: 58%;
  height: 100%;
  border-radius: 999px;
  background: var(--svc-orange);
  transform: translateX(calc(var(--rail-progress, 0) * 72%));
  transition: transform 0.25s ease;
}

.find-rail-more {
  flex: 0 0 auto;
}

.find-rail-empty {
  padding: 56px 20px;
  text-align: center;
  color: var(--svc-muted);
  border: 1px dashed var(--svc-border);
  border-radius: 14px;
}

.find-rail-empty i {
  font-size: 28px;
  color: var(--svc-hairline);
}

.find-rail-empty h3 {
  margin: 14px 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--svc-ink-soft);
}

.find-rail-empty p {
  margin: 0;
  font-size: 15px;
}

/* ============================== path tiles ============================== */

.find-paths {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--svc-border-soft);
}

.find-path-tile {
  display: flex;
  flex-direction: column;
  flex: 1 1 220px;
  padding: 24px 22px 22px;
  color: var(--svc-ink-soft);
  text-decoration: none;
  background: #ffffff;
  border: 1px solid var(--svc-border);
  border-radius: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.find-path-tile:hover {
  color: var(--svc-ink-soft);
  border-color: var(--svc-orange);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
}

.find-path-tile > i {
  margin-bottom: 16px;
  font-size: 19px;
  color: var(--svc-orange);
}

.find-path-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.find-path-title i {
  font-size: 12px;
  color: var(--svc-faint);
}

.find-path-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--svc-muted);
  text-wrap: pretty;
}

/* Photo-backed path tiles — the Firefly county cards. The navy scrim carries
   both the brand tone and the text contrast; the photos themselves are graded
   neutral-documentary on purpose (see the prompt pack README). Tiles without
   a county image keep the plain white treatment above. */
.find-path-tile--photo {
  position: relative;
  min-height: 190px;
  justify-content: flex-end;
  overflow: hidden;
  color: #ffffff;
}

.find-path-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--svc-ease);
}

.find-path-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(10, 24, 61, 0.88) 0%,
    rgba(10, 24, 61, 0.44) 55%,
    rgba(10, 24, 61, 0.14) 100%
  );
}

.find-path-tile--photo > i,
.find-path-tile--photo .find-path-title,
.find-path-tile--photo .find-path-body {
  position: relative;
  z-index: 2;
}

.find-path-tile--photo > i {
  color: #ffffff;
}

.find-path-tile--photo:hover {
  color: #ffffff;
}

.find-path-tile--photo:hover .find-path-photo {
  transform: scale(1.04);
}

.find-path-tile--photo .find-path-title i {
  color: rgba(255, 255, 255, 0.75);
}

.find-path-tile--photo .find-path-body {
  color: rgba(255, 255, 255, 0.88);
  /* Every body reserves exactly two lines, so a one-line body can't let its
     title sit lower than the neighbors' — the title row aligns across all
     four tiles regardless of copy length. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.5em);
}

@media (prefers-reduced-motion: reduce) {
  .find-path-photo {
    transition: none;
  }

  .find-path-tile--photo:hover .find-path-photo {
    transform: none;
  }
}

/* =============================== journey =============================== */

.find-journey {
  padding: 72px clamp(20px, 5vw, 80px) 88px;
  background: linear-gradient(180deg, #ffffff 0%, var(--svc-tint) 100%);
}

.find-journey-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* Was a two-column grid with a standfirst in the right-hand 420px. That copy is
   gone, so the grid would only have held an empty column open. */
.find-journey-head {
  margin-bottom: 52px;
}

.find-journey-title {
  margin: 0;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--svc-ink-soft);
  text-wrap: pretty;
}

.find-journey-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr);
  align-items: stretch;
}

.find-journey-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  font-size: 20px;
  color: var(--svc-faint);
}

/* Closed cards recede rather than collapse, so the row never reflows. */
.find-journey-card {
  position: relative;
  overflow: hidden;
  /* The whole box replays the clip, not just the heading. */
  cursor: pointer;
  padding: 22px 28px 32px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(37, 99, 235, 0.08) 100%);
  border: 1px solid rgba(59, 130, 246, 0.12);
  border-radius: 20px;
  opacity: 0.34;
  transform: translateY(18px);
  transition: opacity 0.55s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.find-journey-card.is-open {
  opacity: 1;
  transform: none;
}

.find-journey-num {
  position: absolute;
  top: 4px;
  left: 22px;
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
  color: rgba(59, 130, 246, 0.16);
  opacity: 0.85;
  user-select: none;
}

.find-journey-clip {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.find-journey-trigger {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.find-journey-card-title {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 700;
  color: var(--svc-ink-soft);
}

.find-journey-card-body {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--svc-body);
  text-wrap: pretty;
}

/* ================================ guide ================================ */

.find-guide {
  padding: 84px clamp(20px, 5vw, 80px) 104px;
}

.find-guide-head {
  max-width: 720px;
  margin: 0 auto 46px;
  text-align: center;
}

.find-guide-title {
  margin: 0 0 14px;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--svc-ink-soft);
  text-wrap: pretty;
}

.find-guide-blurb {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--svc-muted);
  text-wrap: pretty;
}

.find-phases {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
}

.find-phase {
  display: flex;
  flex-direction: column;
  flex: 1 1 300px;
  box-sizing: border-box;
  padding: 26px 24px 24px;
  background: #ffffff;
  border: 1px solid var(--svc-border);
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.find-phase-range {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--svc-orange-deep);
}

.find-phase-name {
  margin-bottom: 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--svc-ink-soft);
}

.find-phase-blurb {
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--svc-muted);
  text-wrap: pretty;
}

.find-phase-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.find-step-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  background: #fbfcfe;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.find-step-row.is-open {
  background: #fffaf7;
  border-color: rgba(255, 79, 0, 0.22);
}

.find-step-num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 13px;
  font-weight: 700;
  color: var(--svc-muted);
  background: rgba(59, 130, 246, 0.09);
  border-radius: 8px;
}

.find-step-row.is-open .find-step-num {
  color: #ffffff;
  background: #14306e; /* small text never sits on orange; navy matches the band language */
}

.find-step-title {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: #334155;
}

.find-step-row.is-open .find-step-title {
  color: var(--svc-ink-soft);
}

.find-step-chevron {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--svc-faint);
  transition: transform 0.2s ease, color 0.2s ease;
}

.find-step-row.is-open .find-step-chevron {
  color: var(--svc-orange);
  transform: rotate(180deg);
}

.find-step-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0 2px 36px;
}

.find-step-line {
  font-size: 13px;
  line-height: 1.6;
  color: var(--svc-muted);
}

.find-step-line--we {
  color: var(--svc-body);
}

.find-step-who {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--svc-faint);
}

.find-step-who--we {
  color: var(--svc-orange-deep);
}

/* The closing CTA is .svc-midcta-band from service_pages.css — the same blue
   band finance and manage close with. That rule owns the layout and the
   gradient; only the spacing around it belongs to this page. */
.find-guide-cta {
  margin-top: 64px;
}

/* =============================== reviews =============================== */

.find-reviews {
  padding: 112px clamp(24px, 5vw, 64px) 120px;
  background: var(--svc-tint);
  border-top: 1px solid #e2e8f0;
}

.find-reviews-grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 104px);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

.find-reviews-intro {
  max-width: 320px;
}

.find-reviews-title {
  margin: 0 0 16px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--svc-ink);
  text-wrap: pretty;
}

.find-reviews-blurb {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--svc-muted);
  text-wrap: pretty;
}

.find-reviews-stage {
  min-width: 0;
}

.find-review {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 0;
}

.find-review-score {
  display: flex;
  align-items: center;
  gap: 12px;
}

.find-review-stars {
  display: flex;
  gap: 3px;
  font-size: 14px;
  color: var(--svc-orange);
}

.find-review-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--svc-ink);
}

.find-review-body {
  margin: 0;
  font-size: clamp(20px, 2.1vw, 25px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--svc-ink-soft);
  text-wrap: pretty;
}

.find-review-mark {
  color: var(--svc-orange);
}

.find-review-who {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.find-review-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--svc-ink);
}

.find-review-detail {
  font-size: 14px;
  color: var(--svc-muted);
}

.find-reviews-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid #e2e8f0;
}

.find-reviews-counter {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--svc-faint);
}

.find-reviews-arrows {
  display: flex;
  gap: 8px;
}

.find-reviews-arrows button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-size: 13px;
  color: var(--svc-ink);
  background: #ffffff;
  border: 1px solid var(--svc-hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.find-reviews-arrows button:hover {
  border-color: var(--svc-orange);
  color: var(--svc-orange);
}

/* ============================== responsive ============================== */

@media (max-width: 1200px) {
  .find-rail .listing-tile {
    flex: 0 0 calc((100% - 40px) / 3);
  }
}

@media (max-width: 1023px) {
  .find-reviews-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .find-journey-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .find-journey-arrow {
    display: none;
  }

  .find-journey-title {
    font-size: 38px;
  }

  .find-rail .listing-tile {
    flex: 0 0 calc((100% - 20px) / 2);
  }
}

@media (max-width: 767px) {
  /* Same clearance, against the shorter mobile navbar (h-8 logo). */
  .find-hero .svc-hero-inner {
    padding-top: 108px;
  }

  .find-sticky-links {
    display: none;
  }

  .find-results {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .find-results-title {
    font-size: 30px;
  }

  .find-rail .listing-tile {
    flex: 0 0 82%;
  }

  /* The arrows would sit off-screen at this width. */
  .find-rail-arrow {
    display: none;
  }

  .find-journey-title {
    font-size: 30px;
  }

  .find-journey-card {
    opacity: 1;
    transform: none;
  }

  .find-reviews {
    padding-top: 64px;
    padding-bottom: 72px;
  }
}