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

/* =========================== 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-notary-title {
    font-size: 27px;
  }
}