/* ---- contact ------------------------------------------------------------
   Full-bleed closing frame. The last photograph runs the width of the page
   with the type sitting over its darkest quarter, so the page ends on fire
   rather than on a form. */

.close {
  position: relative;
  isolation: isolate;
  min-height: 74svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.close__ph {
  position: absolute;
  inset: 0;
  z-index: -2;
}
/* The source is a tall portrait and the burner sits low in it, so a centred
   cover crop on a wide viewport loses the flame entirely. Bias the crop
   down to keep fire in the closing frame. */
.close__ph img { object-position: 50% 72%; }
/* Legibility scrim, weighted to the bottom-left where the copy sits so the
   rest of the photograph stays at its own brightness. */
.close__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(12, 12, 13, 0.94) 0%, rgba(12, 12, 13, 0.62) 34%, rgba(12, 12, 13, 0.12) 68%),
    linear-gradient(to right, rgba(12, 12, 13, 0.72), rgba(12, 12, 13, 0) 62%);
}

/* No width here. This element also carries .shell, and a width:100% would
   land later in the cascade at equal specificity and cancel the gutter,
   dropping the copy flush against the viewport edge. */
.close__in {
  padding-block: clamp(56px, 8vw, 110px);
}

.close__title {
  font-size: clamp(2.25rem, 1.2rem + 4.4vw, 5rem);
  max-width: 13ch;
}
.close__lede { margin-top: 1.3rem; max-width: 34rem; color: var(--bone-soft); }

.close__actions {
  margin-top: clamp(28px, 3.4vw, 40px);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.close__tel {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--bone);
  letter-spacing: 0.02em;
  padding-left: clamp(0px, 1vw, 16px);
}
.close__tel:hover { color: var(--pop); }

.close__pending {
  margin-top: 1.4rem;
  font-size: var(--fs-xs);
  color: var(--bone-dim);
  max-width: 44ch;
}

@media (max-width: 700px) {
  .close { min-height: 0; }
  .close__tel { padding-left: 0; }
}