/* ==========================================================================
   Closing contact section (homepage)
   ==========================================================================
   The last section of the page and the one action it asks for: the
   invitation, the two direct lines and the client proof on the left, the
   site's two-step contact form on the right. Hulusi, 15 September: a full
   contact section as the CTA, after Galadrim's, not a copy of it.

   The form is the same component as contact.html (form.css,
   contact-form.css, contact-form.js), so the delivery wiring lands in both
   places at once. It sits on the cobalt grain plate the hero's sky uses: the
   one blue moment at the end of the page, and the bookend to the top.

   Hulusi, 15 September, last word: a normal section like the others, the
   last one in main. Only the footer is fixed; this section slides over it.
   ========================================================================== */


.closing-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
}
/* The intro fills the row: the client logos sit at its foot, level with the
   bottom of the form (Hulusi, 1 Oct: open space between the contact lines
   and the logos). On one column they simply follow. */
.closing-contact__intro { display: flex; flex-direction: column; }
.closing-contact__intro .closing-contact__proof { margin-top: auto; }
.closing-contact__direct { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }

.closing-contact__title {
  max-width: 14ch;
  font-size: var(--ed-title);
  line-height: var(--ed-heading-line);
  letter-spacing: var(--ed-tracking);
  font-weight: 500;
  text-wrap: balance;
}
.closing-contact__title span { color: var(--ed-muted); }

.closing-contact__lede {
  margin-top: 1.25rem;
  max-width: 40ch;
  font-size: var(--ed-lede);
  line-height: 1.5;
  color: var(--ed-muted);
}

/* The two direct lines, set large: read from across the room. */
.closing-contact__direct { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .25rem; }
.closing-contact__direct a {
  display: inline-block;
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: -.01em;
  font-weight: 500;
  color: var(--ed-ink);
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.closing-contact__direct a:hover { text-decoration: underline; }

/* Client proof: the vetted sentence and the logos the hero shows. Tone and
   size come from components/client-logos.css (one grey, one weight, since
   the meeting of 23 September). */
.closing-contact__proof { margin-top: clamp(2.5rem, 4vw, 3.5rem); } /* 13 Oct: no rule above it (no divider lines) */
.closing-contact__proof p { font-size: var(--ed-label); line-height: 1.4; color: var(--ed-muted); }
.closing-contact__logos {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
}
.closing-contact__logos li { display: flex; align-items: center; min-width: 0; height: 2.5rem; }
.closing-contact__logo { display: block; height: 1.45rem; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.closing-contact__logo--stacked { height: 2rem; }
.closing-contact__logo--wide { height: 1.2rem; }

/* The horizon (13 Oct, Hulusi picked direction A of
   previews/contact-directions.html, after Duna). The plate 097 sits at the top
   of the section, full bleed, and dissolves into the page by itself: the
   dissolve is baked into the image (bright areas melt first, an uneven edge,
   pure white at the foot), no gradient laid over it. The title, in its usual
   dark ink, lands in the dissolve; the form stands on white and overlaps the
   land. Rendered at 3840 px with small characters (image-set 1x/2x).
   Replaces the 13 Oct offset plate and the cobalt frame. The id in the
   selector outranks the industrial variant's plain white #contact. */
html .ed-section.closing-contact#contact {
  /* A component, not a page setting (Hulusi, 13 Oct: "the CTA is not a
     component, broken on À propos"): the plate is the section's own ::before
     at the image's ratio, and the gap above the copy is a margin on the grid,
     so pages that zero their sections' padding (À propos) keep the same CTA. */
  position: relative; isolation: isolate; overflow-x: clip;
  display: flow-root; /* keeps the grid's top margin inside the section */
  padding-top: 0;
}
html .ed-section.closing-contact#contact::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; aspect-ratio: 3840 / 1400;
  background: url('../../img/backgrounds/dream/figma/horizon/ai-bg-033-dissolve-2400.webp') center top / 100% auto no-repeat; /* Safari before 17 drops unprefixed image-set() */
  background: image-set(url('../../img/backgrounds/dream/figma/horizon/ai-bg-033-dissolve-2400.webp') 1x, url('../../img/backgrounds/dream/figma/horizon/ai-bg-033-dissolve-3840.webp') 2x) center top / 100% auto no-repeat;
}
html .ed-section.closing-contact#contact > .closing-contact__grid { margin-top: clamp(9rem, 15vw, 15rem); }
.closing-contact__panel { align-self: start; margin-top: clamp(1.5rem, 3vw, 3rem); }
.home-editorial .closing-contact .contact-form {
  /* 13 Oct: Hulusi "the first horizon was good": back to the first layout
     (plate at full width, form below the title line), with the grey form he
     asked for: a light steel block, white fields without outlines. */
  border: 0;
  box-shadow: 0 40px 80px -50px rgb(10 30 90 / .35);
  border-radius: var(--ed-radius-xl);
  background: color-mix(in srgb, var(--ed-frame) 55%, #fff);
}
.home-editorial .closing-contact .contact-form :is(.input, select, .textarea-group) { background: #fff; border-color: transparent; box-shadow: none; }
.home-editorial .closing-contact .contact-form .textarea-group textarea { background: transparent; border: 0; }
.home-editorial .closing-contact .contact-form .textarea-group__foot { border-top-color: var(--ed-frame); }
.home-editorial .closing-contact .contact-form :is(.input, select, .textarea-group):hover { border-color: var(--ed-line); }
.home-editorial .closing-contact .contact-form :is(.input:focus-visible, select:focus-visible, .textarea-group:focus-within) {
  border-color: var(--brand); outline: 2px solid color-mix(in srgb, var(--brand) 25%, transparent); outline-offset: 0;
}
.home-editorial .closing-contact .btn { border-radius: var(--ed-radius-pill); }

@media (max-width: 1023px) {
  .closing-contact__grid { grid-template-columns: 1fr; }
  .closing-contact__title { max-width: none; }
}
@media (max-width: 639px) {
  .closing-contact__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  html .ed-section.closing-contact#contact::before { width: 220%; left: -60%; }
  html .ed-section.closing-contact#contact > .closing-contact__grid { margin-top: 9rem; }
  .home-editorial .closing-contact .contact-form { border-radius: var(--ed-radius-lg); }
}