/*
 * Escrow page — the parts that belong to this page only.
 *
 * Hero shell, section rhythm, cards, tiles, the segmented control, the switch
 * and the closing CTA band live in service_pages.css; the hero and notary
 * keyframes live in ink_graphics.css. All three load together from escrow/index.
 *
 * Spec: docs/Redesign/design_handoff_service_pages/README.md
 */

/* ============================ hero artwork ============================ */

/* 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. Same treatment as
   .find-hero in find.css. */
.escrow-hero .svc-hero-inner {
  padding-top: 156px;
}

.escrow-hero-signing {
  /* Draw-in a beat quicker than the shared 2.6s (owner 2026-08-09). Loads
     after ink_graphics.css, so this wins the custom-property cascade. */
  --ink-dur: 2s;
  position: absolute;
  right: 18px;
  bottom: 30px;
  width: min(96%, 540px);
  max-height: 82%;
}

/* Owner 2026-08-09: the two hero actions read as a matched pair — equal
   width, centred labels, and a visible lift on hover on top of the shared
   colour/shadow hovers from service_pages.css. */
.escrow-hero .svc-hero-actions .svc-btn {
  min-width: 280px; /* clears the wider label so the pair renders equal */
  justify-content: center;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.escrow-hero .svc-hero-actions .svc-btn:hover {
  transform: translateY(-2px);
}

/* Owner ruling 2026-08-09: primary buttons on this page take the white
   buttons' 16px type so the pairs read as one size. Owner accepts that white
   on orange at 16px is under the AA contrast bar — do not "fix" back to 19px. */
.escrow-hero .svc-hero-actions .svc-btn--primary,
.escrow-cta .svc-btn--primary {
  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .escrow-hero .svc-hero-actions .svc-btn {
    transition: none;
  }

  .escrow-hero .svc-hero-actions .svc-btn:hover {
    transform: none;
  }
}

/* =========================== escrow services =========================== */

/* Sized to sit inside a laptop viewport in one piece.
   At the shared section padding and the original row density this section ran
   to about 912px — 184 padding + 152 head + 576 for six rows at 96px each — so
   on a 13in screen the heading scrolled off before the last transaction type
   arrived. The budget below comes to about 684px: 116 padding + 136 head + 432
   split. The three numbers move together; shrinking only the padding does not
   get there, because the rows are two thirds of the height. */
.escrow-services {
  padding-top: 56px;
  padding-bottom: 60px;
}

.escrow-services-head {
  max-width: 720px;
  margin-bottom: 28px;
  margin-left: auto;
  margin-right: auto;
}

.escrow-services-head .svc-blurb {
  margin-left: auto;
  margin-right: auto;
}

/* Matches the six rows beside it, so the photo never drives the section height. */
.escrow-services-photo {
  position: relative;
  min-height: 432px;
  overflow: hidden;
  background: var(--svc-ink);
  border-radius: 18px;
}

/* Biased right so the pen and the keys stay in frame. */
.escrow-services-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.escrow-services-photo-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.1) 0%,
    rgba(20, 48, 110, 0.55) 62%,
    rgba(20, 48, 110, 0.9) 100%
  );
}

.escrow-services-licence {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 28px 26px 26px;
  pointer-events: none;
}

.escrow-services-licence-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffb08a;
}

.escrow-services-licence-body {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  text-wrap: pretty;
}

.escrow-types {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 13px here, not 22px: six rows at the old density were 576px on their own.
   The hover indent moves the CONTENT via transform (compositor-only) — the old
   padding-left transition relaid the row out on every hover. */
.escrow-type-row {
  display: flex;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--svc-border-soft);
  transition: background 0.2s ease;
}

.escrow-type-row > i,
.escrow-type-row > div {
  transition: transform 0.2s ease;
}

.escrow-type-row:hover {
  background: var(--svc-tint);
}

.escrow-type-row:hover > i,
.escrow-type-row:hover > div {
  transform: translateX(8px);
}

@media (prefers-reduced-motion: reduce) {
  .escrow-type-row > i,
  .escrow-type-row > div {
    transition: none;
  }
}

.escrow-type-row > i {
  flex: 0 0 22px;
  margin-top: 4px;
  font-size: 17px;
  color: var(--svc-orange);
}

.escrow-type-title {
  margin-bottom: 3px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--svc-ink);
}

.escrow-type-items {
  font-size: 14px;
  line-height: 1.5;
  color: var(--svc-muted);
  text-wrap: pretty;
}

/* ============================ escrow quote ============================ */

/* The whole section is budgeted to fit a laptop screen without scrolling, since
   it is a thing you use rather than read: about 670px, made of 84px section
   padding + 96px head + 452px card + 40px note. Every number in this block and
   the card below it is part of that. Grow one and something else has to give. */
.escrow-quote {
  padding-top: 40px;
  padding-bottom: 44px;
}

.escrow-quote .svc-section-head {
  margin-bottom: 18px;
}

.escrow-quote-title {
  margin: 0 0 8px;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--svc-ink);
  text-wrap: pretty;
}

.escrow-quote-blurb {
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
}

/* ---- the card ----
   Chrome deliberately identical to the Finance payment estimator so the two
   calculators read as siblings. */
.escrow-card {
  max-width: 860px;
  margin: 0 auto;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--svc-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 32px -12px rgba(15, 23, 42, 0.12);
}

.escrow-card-controls {
  padding: 14px 18px 0;
}

.escrow-card-grid {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 18px;
  padding: 12px 18px 14px;
}

.escrow-card-foot {
  padding: 12px 18px;
  background: var(--svc-tint);
  border-top: 1px solid var(--svc-border-soft);
}

/* ---- the ring ---- */

.escrow-ring {
  position: relative;
  align-self: center;
  width: 152px;
  height: 152px;
  margin: 0 auto;
}

/* Starts the first arc at 12 o'clock. */
.escrow-ring-svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

/* Only motion this redesign adds, so it is the only thing to withdraw. */
@media (prefers-reduced-motion: no-preference) {
  .escrow-ring-arc {
    transition: stroke-dasharray 0.55s cubic-bezier(0.23, 1, 0.32, 1),
      stroke-dashoffset 0.55s cubic-bezier(0.23, 1, 0.32, 1);
  }
}

/* Chart palette. HOA was #0a69b8 — off the brand system, replaced with the
   standing #2563eb (the tax dot that used to hold that blue went muted slate,
   which also reads as "excluded"). */
.escrow-ring-arc--escrow { stroke: #14306e; }
.escrow-ring-arc--loan { stroke: var(--svc-orange); }
.escrow-ring-arc--hoa { stroke: #2563eb; }
.escrow-ring-arc--reporting { stroke: #94a3b8; }
.escrow-ring-arc--mailing { stroke: #cbd5e1; }

/* A real DOM node over the ring rather than an SVG <text>, so the total stays
   selectable and is read as text. */
.escrow-ring-centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 26px;
  text-align: center;
  pointer-events: none;
}

.escrow-ring-total {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--svc-ink);
}

.escrow-ring-caption {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--svc-faint); /* was 9px #94a3b8 — 2.56:1 and below the size floor */
}

/* ---- the ledger ---- */

.escrow-ledger {
  align-self: center;
  min-width: 0;
}

.escrow-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cbd5e1;
}

.escrow-dot--escrow { background: #14306e; }
.escrow-dot--loan { background: var(--svc-orange); }
.escrow-dot--hoa { background: #2563eb; }
.escrow-dot--flat { background: #94a3b8; }

/* Hollow, because County Transfer Tax is listed in the schedule but is not part
   of the total the ring draws — and muted slate, not a chart hue, so it can't
   be mistaken for a ring segment. The subnote under the label says the same
   thing in words. */
.escrow-dot--tax {
  background: transparent;
  border: 2px solid var(--svc-faint);
}

.svc-fee-row.is-off .escrow-dot {
  background: #e2e8f0;
  border-color: #e2e8f0;
}

.escrow-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0 0;
}

/* Coarse on purpose — 10k steps across 50k-10M. The number field is there when
   someone wants an exact figure; the slider is for finding the neighbourhood.
   The INPUT is 44px tall (the same touch-target budget .svc-range reserves);
   the visible 4px bar is drawn by the track pseudo-elements, so the hit area
   grew without the card visually changing. */
.escrow-price-slider {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.escrow-price-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(90deg, #14306e 0%, #2563eb 100%);
  border-radius: 999px;
}

.escrow-price-slider::-moz-range-track {
  height: 4px;
  background: linear-gradient(90deg, #14306e 0%, #2563eb 100%);
  border-radius: 999px;
}

.escrow-price-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  background: #ffffff;
  border: 3px solid var(--svc-orange);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
  cursor: pointer;
}

.escrow-price-slider::-moz-range-thumb {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border: 3px solid var(--svc-orange);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
  cursor: pointer;
}

.escrow-price-slider:focus-visible {
  outline: 2px solid var(--svc-orange);
  outline-offset: 4px;
}

.escrow-price-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--svc-ink);
}

.escrow-price-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.escrow-price-currency {
  font-size: 18px;
  color: var(--svc-faint);
}

.escrow-price-field input {
  box-sizing: border-box;
  width: 148px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--svc-ink);
  background: #ffffff;
  border: 1px solid var(--svc-hairline);
  border-radius: 10px;
}

.escrow-price-field input:focus {
  outline: none;
  border-color: var(--svc-orange);
  box-shadow: 0 0 0 3px rgba(255, 79, 0, 0.18);
}

/* All six rows stay in the DOM on every side. A row that does not apply is
   dimmed by closevana-fees adding .is-off, never removed.
   11px padding and 14px type, not 15px and 18px — this is a six-line fee list,
   and the old density is most of where the section's height went. */
.svc-fee-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--svc-border-soft);
}

.svc-fee-row:last-child {
  border-bottom: 0;
}

.escrow-fee-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--svc-body);
}


.escrow-fee-value {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--svc-ink);
}

.svc-fee-row.is-off .escrow-fee-label,
.svc-fee-row.is-off .escrow-fee-value {
  color: #cbd5e1;
}

/* No price entered: closevana-fees puts .is-empty on the card so the flat
   $15/$99 figures and the dots dim WITH the dashes instead of glowing among
   them like a half-broken result. */
.escrow-quote-calc.is-empty .escrow-fee-value,
.escrow-quote-calc.is-empty .escrow-fee-label {
  color: #cbd5e1;
}

.escrow-quote-calc.is-empty .escrow-dot {
  background: #e2e8f0;
  border-color: #e2e8f0;
}

/* Both footer rows are seller-only. closevana-fees hides them with Tailwind's
   .hidden, and .svc-page .hidden in service_pages.css out-specifies these
   display rules — see the note at the end of that file. */
.escrow-net-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.escrow-net-label {
  font-size: 13px;
  color: var(--svc-body); /* muted metered 4.55:1 on the tinted foot — thin margin */
}

.escrow-net-value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--svc-ink);
}

.escrow-savings-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--svc-border);
}

.escrow-savings-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
}

.escrow-savings-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--svc-orange-deep);
}

.escrow-savings-title i {
  font-size: 13px;
}

.escrow-savings-value {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--svc-orange-deep);
}

/* 12px and the corrected faint, not 11px #94a3b8 (2.45:1) — this is the only
   place the fee schedule's limits are stated, so it has to be readable. The
   560px cap keeps it near 70ch instead of the 148ch it ran at 860px. */
.escrow-quote-note {
  max-width: 560px;
  margin: 10px auto 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--svc-faint);
  text-align: center;
  text-wrap: pretty;
}


.escrow-fees-error {
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--svc-orange-deep);
}

/* =========================== notary services =========================== */

.escrow-notary-split {
  display: grid;
  grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}

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

.escrow-notary-art {
  max-width: 420px;
}

.escrow-notary-scene {
  display: block;
  width: 100%;
  height: auto;
}

.escrow-notary-services {
  margin-top: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #e2e8f0;
}

.escrow-notary-services-label {
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--svc-faint);
}

.escrow-notary-services-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.escrow-notary-services-row .svc-tile {
  flex: 1 1 200px;
}

/* The compact one-line band (svc-midcta shell, same as manage's) replaced the
   tall centered .svc-cta-band on owner request. The notary section already
   closes on a rule, so the band keeps its own top padding. */
.escrow-cta {
  padding-top: 56px;
}

.escrow-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

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

@media (max-width: 1023px) {
  .escrow-notary-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .escrow-services-photo {
    min-height: 360px;
  }
}

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

  .escrow-quote-title,
  .escrow-notary-title {
    font-size: 27px;
  }

  .escrow-price-field input {
    width: 130px;
    font-size: 16px;
  }

  /* The ring's total replaced .escrow-total-value. Below this width the card
     stacks, so the ring keeps its size and only the ledger reflows. */
  .escrow-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .escrow-savings-value {
    font-size: 18px;
  }
}