/* ==========================================================================
   Contact page
   ==========================================================================
   Proof on the left, the ask on the right. Ported from app/contact/page.tsx.

   The left rail exists to earn the form on the right: cleared numbers,
   confirmed client logos, three reassurances about what happens next, and two
   real channels for people who do not want a form at all.
   ========================================================================== */

.contact-page {
  display: grid;
  align-items: start;
  gap: 3rem;
  padding-block: 3.5rem;
}

@media (min-width: 768px) { .contact-page { padding-block: 5rem; } }

@media (min-width: 1024px) {
  .contact-page {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    gap: 4rem;
  }
}

.contact-page__rail { display: flex; flex-direction: column; gap: 2rem; }
.contact-page__intro { display: flex; flex-direction: column; gap: 1.25rem; }

.contact-page__eyebrow {
  font-size: var(--text-overline-size);
  line-height: var(--text-overline-line);
  letter-spacing: var(--text-overline-tracking);
  font-weight: var(--text-overline-weight);
  color: var(--brand);
}

/* 36/44px with its own leading, between h1 and display-lg. */
.contact-page__title {
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--foreground);
  text-wrap: pretty;
}

@media (min-width: 768px) { .contact-page__title { font-size: 44px; } }

.contact-page__lede {
  max-width: 28rem;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  font-weight: var(--text-body-lg-weight);
  color: var(--muted-foreground);
}

/* Stacked stat cells, no dividers, so the row wraps cleanly and never leaves
   an orphan separator. */
.contact-page__proof { display: flex; flex-direction: column; gap: 1.75rem; }

.contact-page__stats {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2.5rem;
  row-gap: 1.25rem;
}

.contact-page__stat-value {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  letter-spacing: var(--text-h4-tracking);
  font-weight: 500;
  color: var(--foreground);
}

.contact-page__stat-value--rating { display: flex; align-items: center; gap: 0.375rem; }

.contact-page__stat-of {
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--text-label-weight);
  color: var(--subtle-foreground);
}

.contact-page__stars { display: flex; align-items: center; gap: 0.125rem; }
.contact-page__stars svg { width: 0.875rem; height: 0.875rem; fill: #fac917; color: #fac917; }

.contact-page__stat-label {
  margin-top: 0.25rem;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  font-weight: var(--text-body-sm-weight);
  color: var(--subtle-foreground);
}

/* Logos get their own zone, separated by a hairline, so the numbers above do
   not compete with them. */
.contact-page__clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 2rem;
  row-gap: 1.25rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 1.75rem;
}

.contact-page__clients img { height: 1.5rem; width: auto; opacity: 0.8; }
/* Sized by shape like the hero strip: stacked lockups taller, wide wordmarks shorter. */
.contact-page__clients .client-logo--stacked { height: 2.07rem; }
.contact-page__clients .client-logo--wide { height: 1.24rem; }

.contact-page__reassurance {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 2rem;
}

.contact-page__reassurance li { display: flex; gap: 0.875rem; }

.contact-page__reassurance-mark {
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background-color: var(--brand-subtle);
}

.contact-page__reassurance-mark svg { width: 1.25rem; height: 1.25rem; color: var(--brand); }

.contact-page__reassurance-title {
  font-size: var(--text-label-lg-size);
  line-height: var(--text-label-lg-line);
  font-weight: var(--text-label-lg-weight);
  color: var(--foreground);
}

.contact-page__reassurance-body {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  font-weight: var(--text-body-sm-weight);
  color: var(--muted-foreground);
}

/* Real channels, for people who do not want a form. */
.contact-page__channels {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 2rem;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}

.contact-page__channels a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--muted-foreground);
  transition: color 150ms ease;
}

.contact-page__channels a:hover { color: var(--foreground); }
.contact-page__channels svg { width: 1rem; height: 1rem; color: var(--subtle-foreground); }

.contact-page__channel-note {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: var(--text-caption-weight);
  color: var(--subtle-foreground);
}

@media (min-width: 1024px) {
  .contact-page__form { position: sticky; top: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-page__channels a { transition: none; }
}

/* 24 Sept: the rail follows the homepage contact section. The two direct
   lines are set large like there; the proof is one sentence over the logos,
   on a rule. */
.contact-page__direct { display: grid; gap: .25rem; }
.contact-page__direct a { width: fit-content; font-size: 1.25rem; line-height: 1.4; color: var(--ed-ink, var(--foreground)); text-decoration: none; }
.contact-page__direct a:hover { text-decoration: underline; text-underline-offset: .2em; }
.contact-page__proof-line { font-size: .9375rem; color: var(--ed-muted, var(--muted-foreground)); }
.contact-page__proof { gap: 1.25rem; padding-top: 1.75rem; border-top: 1px solid var(--border-subtle); }
.contact-page__proof .contact-page__clients { border-top: 0; padding-top: 0; }

/* 14 Oct (Hulusi: "based on our contact section, update the contact page and
   add a book-a-meeting section"). The page takes the homepage's horizon: the
   033 plate across the top of the page, full bleed, dissolving into white by
   itself; the title lands in the dissolve; the form is the same steel block
   as on the homepage (white fields, no outline). The offset plate and its
   sharpening (plate-clear.js) are gone. */
main#contenu { position: relative; isolation: isolate; overflow-x: clip; }
main#contenu::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;
  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 .contact-page { padding-top: clamp(10rem, 18vw, 18rem); }
.contact-page__form { align-self: start; }
@media (max-width: 1023px) { .contact-page__form { position: relative; } }
.contact-page__form .contact-form {
  border: 0; border-radius: 0; box-shadow: 0 40px 80px -50px rgb(10 30 90 / .35);
  background: color-mix(in srgb, var(--ed-frame, #e1e4e7) 55%, #fff);
}
.contact-page__form .contact-form :is(.input, select, .textarea-group) { background: #fff; border-color: transparent; box-shadow: none; }
.contact-page__form .contact-form .textarea-group textarea { background: transparent; border: 0; }
.contact-page__form .contact-form :is(.input, select, .textarea-group):hover { border-color: var(--ed-line, #cdd2d8); }
.contact-page__form .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;
}
.contact-page__proof { border-top: 0; padding-top: 0; } /* no divider lines */
@media (max-width: 639px) {
  main#contenu::before { width: 220%; left: -60%; }
  html .contact-page { padding-top: 8rem; }
}

/* Book a meeting (14 Oct): the second way in, under the form. The site's own
   appointment card (.ed-contact-card from editorial-sections.css, the same as
   on the homepage FAQ) on the right; on the left what the call is, in the
   card's own words, and the two actions. Sharp, steel ground, on the grid. */
.contact-meet { padding-block: clamp(4rem, 8vw, 7rem); background: color-mix(in srgb, var(--ed-frame, #e1e4e7) 40%, #fff); }
.contact-meet__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .contact-meet__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 5rem; } }
.contact-meet__title { margin: 0; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.05; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.contact-meet__title span { color: var(--ed-muted, #50565f); }
.contact-meet__lede { margin: 1.25rem 0 0; max-width: 38rem; font-size: 1.0625rem; line-height: 1.55; color: var(--ed-muted, #50565f); }
.contact-meet__list { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; max-width: 34rem; counter-reset: meet; }
.contact-meet__list li { counter-increment: meet; display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; padding: 1rem 1.25rem; background: #fff; font-size: 1.0625rem; }
.contact-meet__list li::before { content: counter(meet, decimal-leading-zero); color: var(--brand); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.contact-meet__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .625rem; }
.contact-meet__actions .ed-button { border-radius: 0; }
.contact-meet .ed-contact-card { position: relative; top: auto; }
.contact-meet__actions .ed-button--secondary { background: #fff; border: 1px solid var(--ed-ink, #0f1113); color: var(--ed-ink, #0f1113); }