/* ==========================================================================
   Starfish Group — enquire.css
   Section 07: the closing ask.

   The page's terminal action. Every earlier section defers somewhere — the
   hero to the fork, the fork to a catalogue, the story to the facility — and
   this is the one that asks for something. Exactly one button. Contact details
   belong in the footer below, not here, or they become competing asks.

   The whole section is the dark field now. It used to be a near-black plate
   with a 64px radius floating inside a light section, which made the page's
   final statement look like one more component; the colour change alone is
   enough to mark the ending.
   ========================================================================== */

.enquire {
  position: relative;
  z-index: 0;
  /* Clipped on BOTH axes, unlike the other sections. Elsewhere the artwork is
     meant to cross the seam; this is the last section on the page, so anything
     hanging out of it lands on the footer instead — a cream ball half on ink
     and half on the footer read as a mistake. */
  overflow: clip;
  padding-block: var(--s-140);
  background: var(--ink-deep);
  color: var(--ink-on-media);
  text-align: center;

  --enquire-title: clamp(34px, 5vw, 72px);
}

.enquire__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-24);
}

.enquire__heading {
  font-size: var(--enquire-title);
  line-height: var(--leading-tight);
  max-width: 16ch;
}

.enquire__body {
  max-width: 46ch;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: rgba(245, 242, 236, 0.82);
}

.enquire .btn { margin-top: var(--s-12); }

/* Focus rings need the cream side of the palette on this ground. */
.enquire :focus-visible { outline-color: var(--cream); }

/* --- Artwork -------------------------------------------------------------
   Two objects, not a scatter. Both are cropped by the window and sit behind
   the copy, so the section still reads as mostly empty space.
   -------------------------------------------------------------------------- */
.enquire__art {
  position: absolute;
  z-index: -1;
  height: auto;
  pointer-events: none;
  user-select: none;
  /* Held back so warm illustration on a deep ground does not pull the eye off
     the one sentence that matters here. */
  opacity: 0.9;
}

.enquire__art--a { top: -14%; left: -9%;  width: min(420px, 30vw); transform: rotate(18deg); }
.enquire__art--b { bottom: -18%; right: -6%; width: min(300px, 22vw); transform: rotate(-12deg); }

@media (max-width: 900px) {
  .enquire { padding-block: var(--s-80); }
  .enquire__art--a { top: -6%; left: -26%; width: 50vw; }
  .enquire__art--b { bottom: -8%; right: -34%; width: 38vw; }
}