/*
 * 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;
}

/* One of these shows per breakpoint; the small-screen block swaps them. Both
   are server-rendered so neither line is assembled in JS. */
.find-hero-sub-compact {
  display: none;
}

/* 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 ============================= */

/* Navy, not white (owner 2026-09-10): a white field on a white bar had no edge
   to read against, so the search input — the whole point of the bar —
   disappeared into it. The field stays white and now reads as the one bright
   thing on the strip. */
.find-sticky {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 900;
  background: rgba(20, 48, 110, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 22px rgba(8, 20, 60, 0.3);
  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;
}

/* min-height, not a taller logo: the lockup stays 34px and the link grows
   around it to clear the 44px touch floor. */
.find-sticky-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
}

.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 {
  /* Text links in a fixed bar still have to be tappable. The field beside them
     is taller, so this costs the bar no height. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
}

.find-sticky-links a:hover {
  color: #ffffff;
}

/* 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"] {
  /* 14px, not 11px: a 52px field is what lets the submit pill inside it clear
     the 44px touch floor. At 11px the field was 46px and the button 36px, which
     is still a touch target at 1024 — iPad landscape. */
  padding: 14px 108px 14px 38px;
  font-size: 15px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

.find-search--sticky .svc-search-field > button {
  top: 4px;
  right: 4px;
  bottom: 4px;
  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;
  /* 44, not 42 — the touch-target floor. */
  width: 44px;
  height: 44px;
  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 {
  /* Half the 44px button, so it still straddles the rail edge. */
  left: -22px;
}

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

.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.

   They recede by TONE, not by legibility. A blanket opacity: 0.34 on the card
   took the step number, the line art and the whole paragraph down with it —
   steps 2 and 3 were unreadable until you clicked them, which is backwards for
   a "how it works" row you are meant to read straight through. The open card
   now leads on fill, border and lift instead, all of which leave the text at
   full strength. */
.find-journey-card {
  position: relative;
  overflow: hidden;
  /* The whole box replays the clip, not just the heading. */
  cursor: pointer;
  padding: 22px 28px 32px;
  background: rgba(148, 163, 184, 0.07);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 20px;
  transition: background 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
    border-color 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 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 {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.09) 0%, rgba(37, 99, 235, 0.14) 100%);
  border-color: rgba(59, 130, 246, 0.32);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  transform: translateY(-4px);
}

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

/* The open step owns its number a little more firmly. */
.find-journey-card.is-open .find-journey-num {
  color: rgba(59, 130, 246, 0.3);
}

.find-journey-clip {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  transition: opacity 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* The closed art sits back from the open card's without going illegible. Only
   the drawing fades — the step number and the copy stay at full strength,
   since dimming those is what made steps 2 and 3 unreadable to begin with. */
.find-journey-card:not(.is-open) .find-journey-clip {
  opacity: 0.6;
}

.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;
}

/* ---- closing CTA: the keyhook hung beside the button ----
   A second, smaller copy of the hero art.

   It is held at its first frame until the band scrolls into view. Every ink
   animation is `1 both`, so pausing them parks each path on its 0% keyframe —
   stroke-dashoffset: 1, nothing drawn — and .rv-in releases them. Without this
   the draw would run on page load and be over long before anyone scrolled far
   enough to see it. The reveal on .find-guide-cta is what supplies .rv-in. */
.find-cta-action {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Clipped to the drawing. The shared viewBox is 320x230 but the ink only
   occupies the right 167 of it (preserveAspectRatio is xMaxYMax, so it hangs
   off the bottom-right), which left ~46px of dead space between the art and the
   button and read as a gap rather than a pairing. Widen the SVG, pull it left,
   and clip the empty half away. */
.find-cta-key {
  flex: 0 0 auto;
  width: 58px;
  height: 78px;
  overflow: hidden;
}

/* The hero copy is absolutely positioned into .svc-hero-art; this one is an
   ordinary flex item, and the stroke has to scale with it — 1.7 over a 320-wide
   viewBox drawn at 96px renders at half a pixel. */
.find-cta-key .find-keyhook {
  --ink-dur: 2s;
  position: static;
  right: auto;
  bottom: auto;
  width: 112px;
  height: 100%;
  max-height: none;
  margin-left: -54px;
  stroke-width: 4.6;
}

.find-cta-key .find-keyhook * {
  animation-play-state: paused;
}

.find-guide-cta.rv-in .find-cta-key .find-keyhook * {
  animation-play-state: running;
}

/* Reduced motion never gets .rv-in withheld — the stylesheet forces
   [data-reveal] visible and the ink keyframes are already switched off, so the
   pause must not be what leaves the art blank. */
@media (prefers-reduced-motion: reduce) {
  .find-cta-key .find-keyhook * {
    animation-play-state: running;
  }
}

/* =============================== 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;
  /* 44, not 42 — the touch-target floor. */
  width: 44px;
  height: 44px;
  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);
  }
}

/* ===================== hero: phone + tablet portrait =====================
   Ends at 1023.98px to match the home page's seam fix, so the hero and the
   sections below it can never disagree about where "small" stops. Tablet-only
   values are in the narrower block after this one and inherit everything they
   do not restate. */

@media (max-width: 1023.98px) {
  /* The radial's light end (#60a5fa) pooled right where the subtitle sits.
     Re-centred higher and started a stop darker so the copy is never on the
     brightest part of the ramp — this is also what stops the white logo lockup
     washing out against the mid-blue behind the navbar. */
  .find-hero {
    background: radial-gradient(120% 100% at 84% 22%,
      #3b82f6 0%,
      #2563eb 30%,
      #1e40af 62%,
      #14306e 100%);
  }

  /* Vertical base scrim on top of the shared .svc-hero-scrim, which is angled
     for a desktop two-column split and does almost nothing at the bottom of a
     phone hero where the field sits. z-index 3: over the scrim (2), under the
     copy (20). */
  .find-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(
      178deg,
      rgba(8, 20, 54, 0.42) 0%,
      rgba(8, 20, 54, 0.24) 40%,
      rgba(8, 20, 54, 0.55) 100%
    );
  }

  /* Muted ink over the brightest part of the ramp measured under 4.5:1. The
     line is short now, so it can carry full white without shouting. */
  .find-hero-sub {
    color: #ffffff;
  }

  .find-hero-sub-full {
    display: none;
  }

  .find-hero-sub-compact {
    display: inline;
  }

  /* ---- the field is the only call to action ----
     One icon on screen, in the button. The leading .svc-search-icon is
     absolutely positioned top:0/bottom:0 against .svc-search-field, so once the
     shared small-screen rule made the submit button position:static the icon
     stretched across BOTH the input and the stacked button and floated in the
     dead space between them. */
  .find-search--hero .svc-search-icon {
    display: none;
  }

  .find-search--hero input[type="text"] {
    padding: 17px 62px 17px 20px;
  }

  /* Back inside the pill. Stacked, it cost ~78px of vertical space and read as
     a section CTA rather than part of the field. Overrides the shared
     small-screen rule in service_pages.css, which stays as it is for Insure and
     Manage. */
  .find-search--hero .svc-search-field > button {
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: auto;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-top: 0;
    padding: 0;
    font-size: 17px;
  }

  .find-search--hero .svc-search-btn-label {
    display: none;
  }

  .find-search--hero .svc-search-field > button i {
    font-size: 17px;
  }

  /* ---- sticky bar ----
     Same shared rule, same stacking, worse consequence: the bar is fixed to the
     top of the viewport, so a stacked button turned it into a 105px slab across
     a phone screen. It exists to stay out of the way. The field grows to 52px
     so the button can hold the 44px touch floor inside it. */
  .find-sticky-row {
    padding: 10px 16px;
  }

  .find-search--sticky input[type="text"] {
    padding: 14px 58px 14px 38px;
  }

  .find-search--sticky .svc-search-field > button {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    justify-content: center;
    width: 44px;
    margin-top: 0;
    padding: 0;
  }

  .find-search--sticky .svc-search-btn-label {
    display: none;
  }
}

/* ------------------------- tablet portrait only ------------------------- */

@media (min-width: 768px) and (max-width: 1023.98px) {
  /* The art keeps a right-half clearing here rather than the shared
     `left: 42%`, which put the keyhook under the copy: at 768 the headline ran
     429px across it. */
  .find-hero .svc-hero-art {
    left: 58%;
  }

  /* Capped so the copy column stops short of that clearing instead of crossing
     into it. */
  .find-hero .svc-hero-title,
  .find-hero .find-hero-sub,
  .find-hero .find-search--hero {
    max-width: 430px;
  }

  .find-hero .svc-hero-title {
    font-size: 40px;
  }

  /* Tablet has the width to keep the verb on the pill. */
  .find-search--hero input[type="text"] {
    padding: 17px 152px 17px 22px;
  }

  .find-search--hero .svc-search-field > button {
    width: auto;
    height: auto;
    bottom: 8px;
    gap: 8px;
    padding: 0 22px;
    font-size: 14px;
  }

  .find-search--hero .svc-search-btn-label {
    display: inline;
  }

  .find-search--hero .svc-search-field > button i {
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  /* Clears the shorter mobile navbar (h-8 logo) and then gets out of the way:
     the old 108px top with a 38px headline, a three-line subtitle and a stacked
     button put the field most of the way down the viewport. */
  .find-hero .svc-hero-inner {
    padding: 100px 16px 56px;
  }

  /* Well under the 620px desktop floor so the next section still shows below
     the fold, but a real hero rather than a strip: at `auto` the band closed to
     345px and sat right on top of the field. */
  .find-hero {
    min-height: 460px;
  }

  .find-hero .svc-hero-title {
    font-size: 34px;
  }

  .find-hero-sub {
    margin-bottom: 20px;
  }

  /* Three stats on this page, so the last one would sit alone in column one of
     the two-up grid service_pages.css sets. */
  .find-page-wrapper .awards-stats .stat-item:last-child {
    grid-column: 1 / -1;
  }

  /* The key takes its own row above the full-width button. Sharing one row left
     the button 188px wide and its label four lines tall. */
  .find-cta-action {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  .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;
  }
}