/* ============================================
   contact — node 4:237 (mobile 390, DRAWN). Desktop 1024–1920 INVENTED (mobile-only-mode):
   `centred-column 720` + CTA pair `grid-2` (BA-INV-C1); tablet = the same column at its 512 floor,
   text centred (BA-INV-C2). Pattern A (§1b). Fluid values: brief/contact.md §2 (anchor 390,
   --vw-base 1440 INVENTED). Only .contact / .contact__* rules here (GLOBAL-SCOPE LOCK).
============================================ */

.contact {
  /* longhands only — never a padding shorthand on .container */
  padding-top: clamp(41px, calc(50px + (var(--max-vw) - 390px) * 0.015), 100px);
  padding-bottom: clamp(82px, calc(100px + (var(--max-vw) - 390px) * 0.015), 160px);
  background-color: var(--color-white);
  /* D-C4: anchor of the hero sticky CTA — breathing room under the (non-sticky) header */
  scroll-margin-top: var(--header-h);
}

/* 4:238 — inner column; mobile: fills the 350 content box */
.contact__inner {
  display: flex;
  flex-direction: column;
  row-gap: clamp(33px, calc(40px + (var(--max-vw) - 390px) * 0.015), 60px);
  width: 100%;
}

/* 4:239 — title + line, left-aligned as drawn (D-C6) */
.contact__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 30px);
  color: var(--color-ink);
}

/* 4:240 — token h2-serif; Figma leadingTrim CAP_HEIGHT → D-C1 (MUST-APPLY) */
.contact__title {
  font-family: var(--font-serif);
  font-weight: 400;
  /* RESPONSIVE: below ~357px "STRATEGY CALL" (5.625em wide) no longer fits the content box and the title
     breaks to 3 lines. Cap the size so the longest line fits (5.74 = 5.625em × 1.02 margin). Never binds
     at >= 357 (390 stays 56 DRAWN; 768+ token); at 320 → 49.15 (within M-min 46 … M-base 56). */
  font-size: min(var(--text-h2-serif), calc((var(--max-vw) - 2 * var(--gutter)) / 5.74));
  line-height: var(--lh-h2-serif);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-box: trim-both cap alphabetic;
}

/* 4:241 — token body-m-medium; width auto, never the drawn 354 (D-C2) */
.contact__text {
  align-self: stretch;      /* fills the column like the drawn 350 box (D-C2) — intro is align-items:flex-start */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body-m-medium);
  line-height: var(--lh-body-m-medium);
  letter-spacing: var(--ls-body);
}

/* 4:242 — CTA pair: stacked full-width bars on mobile */
.contact__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  row-gap: clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 15px);
}

/* 4:243 / 4:244 — dark CTA bar (component CTA 4:10, fills overridden). No overflow clip:
   the 38.72 label box overflows the 36 bar top by 2.72 as drawn (D-C3, MUST-APPLY). */
.contact__cta {
  display: flex;
  justify-content: center;
  align-items: flex-end;           /* Figma counterAxis MAX */
  column-gap: 4px;
  height: var(--cta-s-h);          /* 36 DRAWN (0–1023) · 48 INVENTED (1024+) */
  padding-left: 20px;
  padding-right: 20px;
  background-color: var(--color-ink);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* I4:243;1905:9128 / I4:244;1905:9128 — token cta-display-s (held 44) */
.contact__cta-label {
  display: block;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-cta-display-s);
  line-height: var(--lh-cta-display-s);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;       /* DOM text stays "Telegram" / "WhatsApp" (D-C5) */
  color: var(--color-white);
  transition: color 0.15s ease;
}

/* Hover as on the site's career form submit (CareerApplyForm .submit): the fill
   turns page-coloured and only the label stays, in ink. Mouse devices only, so a
   tap on a phone never leaves the button stuck blank. */
@media (hover: hover) {
  .contact__cta:hover {
    background-color: var(--color-bg);
  }
  .contact__cta:hover .contact__cta-label {
    color: var(--color-ink);
  }
}
.contact__cta:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .contact__cta,
  .contact__cta-label { transition: none; }
}

/* PSEUDO-TABLET 768–1023 (no tablet layer): M-767 + (vw-768)*0.025 — BA-INV-C2 (INVENTED composition) */
@media (min-width: 768px) {
  .contact {
    padding-top: clamp(55.66px, calc(55.66px + (var(--max-vw) - 768px) * 0.025), 100px);
    padding-bottom: clamp(105.66px, calc(105.66px + (var(--max-vw) - 768px) * 0.025), 160px);
  }
  /* centred column: 512 for the whole band → 720 @1440 → 960 @1920 (continuous across 1024) */
  .contact__inner {
    max-width: clamp(512px, calc(720px * (var(--max-vw) / var(--vw-base))), 960px);
    margin-left: auto;
    margin-right: auto;
    row-gap: clamp(45.66px, calc(45.66px + (var(--max-vw) - 768px) * 0.025), 60px);
  }
  .contact__intro {
    align-items: center;
    text-align: center;
    row-gap: clamp(25.66px, calc(25.66px + (var(--max-vw) - 768px) * 0.025), 30px);
  }
  .contact__title {
    text-wrap: balance;
  }
  /* CTA pair `grid-2` — two equal bars side by side (D2: never one stretched bar) */
  .contact__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    column-gap: 15px;
    row-gap: 15px;
  }
}

/* DESKTOP 1024+ (INVENTED): D-base * vw / 1440; spacing keeps the standard floor */
@media (min-width: 1024px) {
  .contact {
    padding-top: clamp(71px, calc(100px * (var(--max-vw) / var(--vw-base))), 133px);
    padding-bottom: clamp(114px, calc(160px * (var(--max-vw) / var(--vw-base))), 213px);
  }
  .contact__inner {
    row-gap: clamp(43px, calc(60px * (var(--max-vw) / var(--vw-base))), 80px);
  }
  .contact__intro {
    row-gap: clamp(21px, calc(30px * (var(--max-vw) / var(--vw-base))), 40px);
  }
  .contact__actions {
    column-gap: clamp(11px, calc(15px * (var(--max-vw) / var(--vw-base))), 20px);
    row-gap: clamp(11px, calc(15px * (var(--max-vw) / var(--vw-base))), 20px);
  }
  /* BA-INV-C3: centre the bottom-aligned 44 cap ink in the 48 bar */
  .contact__cta {
    padding-bottom: 6px;
  }
}