/* ==========================================================================
   THE CLOSING ENQUIRY — retuned to the owner's notes.

   Four things happen here.

   The type gets the screen. On a phone this heading was capped at 9ch and the
   lead at about 300px inside a 335px column, so "Start with the" broke after
   three words and a third of every line was empty. Both now run the full
   width of the column they sit in.

   The two routes answer the finger. They are the only choice in the section
   and they were completely inert; they now lift, warm and light their edge on
   hover, focus and press, with the press state doing the work on a phone
   where hover never happens.

   The chip row became a sentence. "Bring only — Parties · What changed · Next
   date" read as a form's field list, and "what changed" is not a thing anyone
   outside a law office says about their own life. It is one statement now,
   and it says the thing a worried person actually needs to hear first.

   And How it works moved above the button, so nobody is asked to press
   anything before they know what happens to the message.
   ========================================================================== */

/* ---- the type takes the screen ---- */
@media (max-width: 760px) {
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"] .record-scene__heading h2 {
    max-width: none;
    font-size: clamp(2.4rem, 12vw, 3.4rem);
    line-height: 1;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"] .record-scene__lead,
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"] .enquiry-ready,
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"] .enquiry-trust {
    max-width: none;
    width: 100%;
  }
}

/* ---- the routes, which now answer ---- */
/* No border radius here: the second route carries a hairline on its inside
   edge only, and a radius turns that one line into a curl round the corners
   that reads as a stray box. */
.enquiry-route {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  touch-action: manipulation;
  transition: transform .35s cubic-bezier(.22, .9, .3, 1), background-color .35s ease, box-shadow .35s ease;
}
/* the top margin belonged to the number that used to sit above the title */
.enquiry-route strong { margin-top: 0; }
/* the warm wash that rises out of the bottom edge */
.enquiry-route::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0 0;
  height: 100%;
  background: linear-gradient(0deg, rgba(244,159,46,.22), transparent 70%);
  opacity: 0;
  translate: 0 30%;
  transition: opacity .4s ease, translate .45s cubic-bezier(.22, .9, .3, 1);
}
/* and the hairline that lights along the bottom, drawn from the middle out */
.enquiry-route::before {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--record-amber, #f49f2e);
  scale: 0 1;
  transition: scale .45s cubic-bezier(.22, .9, .3, 1);
}
.enquiry-route strong,
.enquiry-route > span:not(.enquiry-route__index) {
  transition: color .3s ease, translate .4s cubic-bezier(.22, .9, .3, 1);
}

@media (hover: hover) {
  .enquiry-route:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,.32); }
  .enquiry-route:hover::after { opacity: 1; translate: 0 0; }
  .enquiry-route:hover::before { scale: 1 1; }
  .enquiry-route:hover strong { color: var(--record-amber, #f49f2e); }
}
.enquiry-route:focus-visible {
  outline: 2px solid var(--record-amber, #f49f2e);
  outline-offset: 3px;
}
.enquiry-route:focus-visible::before,
.enquiry-route:active::before { scale: 1 1; }
.enquiry-route:focus-visible::after,
.enquiry-route:active::after { opacity: 1; translate: 0 0; }
.enquiry-route:active { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .enquiry-route,
  .enquiry-route::before,
  .enquiry-route::after,
  .enquiry-route strong { transition: none; }
  .enquiry-route:hover { transform: none; }
}

/* ---- the statement ---- */
.enquiry-ready {
  display: grid !important;
  gap: .4rem;
  width: min(100%, 42rem);
  margin-block: .4rem 0;
}
.enquiry-ready strong {
  color: #f4efe4 !important;
  font-family: "Instrument Serif", Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.2rem, 4.4vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}
.enquiry-ready span {
  padding-inline-end: 0 !important;
  border-inline-end: 0 !important;
  font-family: Manrope, system-ui, sans-serif;
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(244,239,228,.7);
}