/* contact.css — section 12 `contact` (brief/contact.md). BUILD-SECTION.
   Scoped under .contact only. The lead form, .chip and .btn come from components.css
   (shared-component contract); this file adds the section layout, the info column and the
   contact-specific overrides:
   - D-CT-1 / page D-1: the desktop INFO group is drawn at k = 1.125 -> --text-display / --text-eyebrow /
     --text-lead / --text-chip re-declared in .contact__info scope (768–1023 and 1024+). The form stays k = 1.
   - chips at k = 1.125 (padding 8.70 / 22.9, D-CT-6).
   - chips row visually first below 1024 (D-CT-2), CSS order only.
   Bands: base 0–767 mobile (anchor 390) · 768–1023 pseudo-tablet (split row, D-6) · 1024+ desktop (--vw-base 1619). */

/* ---------------------------------------------------------------------------
   SECTION TOKENS — moved out of the page's tokens.css.

   Read by THIS block and nothing else on the site, so they belong here rather
   than in a site-wide :root. In Shopify a section can be dropped onto any
   template from the theme editor, so a section that reads a token from a
   page-level scope breaks the moment it is moved; scoped to the block's own
   class, it travels with it.

   EVERY band is carried verbatim from the old tokens.css, in that file's own
   order — so the cascade is unchanged whether the page was written
   desktop-first (base + max-width overrides) or mobile-first (base +
   min-width overrides). Verified by computed-style diff at
   375/768/1024/1440/1920.
--------------------------------------------------------------------------- */

.contact {
  --font-serif:         'Roboto Serif', Georgia, 'Times New Roman', serif;
  --font-mono:          'Roboto Mono', ui-monospace, 'Courier New', monospace;
  --c-eyebrow:          #b3aeae;
  --text-display:       clamp(21px, calc(26px + (var(--max-vw) - 390px) * 0.015), 51px);
  --ls-display:         -0.025em;
  --text-eyebrow:       clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --lh-eyebrow:         1.5;
  --ls-eyebrow:         0.2em;
  --ls-lead:            0;
  --section-pad-y:      clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 63px);
  --contact-pad-bottom: clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 63px);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .contact {
    --text-display:       clamp(26px, calc(26px + (var(--max-vw) - 768px) * 0.025), 46.425px);
    --text-eyebrow:       clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 21.493px);
    --section-pad-y:      clamp(32px, calc(32px + (var(--max-vw) - 768px) * 0.025), 75px);
    --contact-pad-bottom: clamp(32px, calc(32px + (var(--max-vw) - 768px) * 0.025), 150px);
  }
}

@media (min-width: 1024px) {
  .contact {
    --text-display:       clamp(29px, calc(46.425px * (var(--max-vw) / var(--vw-base))), 55px);
    --ls-display:         -0.012em;
    --text-eyebrow:       clamp(14px, calc(21.493px * (var(--max-vw) / var(--vw-base))), 25px);
    --lh-eyebrow:         normal;
    --ls-eyebrow:         0.1em;
    --ls-lead:            0;
    --section-pad-y:      clamp(47px, calc(75px * (var(--max-vw) / var(--vw-base))), 89px);
    --contact-pad-bottom: clamp(95px, calc(150px * (var(--max-vw) / var(--vw-base))), 178px);
  }
}

.contact {
  /* section-local type roles (brief/contact.md §5.6) */
  --text-contact-dt: clamp(7px, calc(9px + (var(--max-vw) - 390px) * 0.015), 18px);
  --lh-contact-dt: 1.5;
  --ls-contact-dt: 0.1em;
  --text-contact-dd: clamp(9px, calc(11px + (var(--max-vw) - 390px) * 0.015), 22px);
  --lh-contact-dd: 1.5;
  --ls-contact-dd: 0;

  /* section-local spacing (brief/contact.md §2.4) */
  --ct-form-gap: clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 47px);
  --ct-eyebrow-gap: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 31px);
  --ct-title-gap: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 16px);
  --ct-lead-gap: clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --ct-chips-gap: 0px;
  --ct-details-gap: clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 47px);
  --ct-chip-gap: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 16px);
  --ct-grid-col-gap: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 39px);
  --ct-grid-row-gap: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 31px);
  --ct-dd-gap: clamp(3px, calc(4px + (var(--max-vw) - 390px) * 0.015), 8px);

  padding-top: var(--section-pad-y);
  padding-bottom: var(--contact-pad-bottom);
}

/* ---------- row ---------- */
.contact__inner {
  display: flex;
  flex-direction: column;
}

/* ---------- info column ---------- */
.contact__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contact__eyebrow {
  margin-top: var(--ct-eyebrow-gap);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-eyebrow);
}

.contact__title {
  margin-top: var(--ct-title-gap);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: 1.25;                 /* drawn 32.5 / 26 (D-CT-1); the token's 1.15 is the hero's */
  letter-spacing: var(--ls-display);
  color: var(--c-ink);
}

.contact__lead {
  margin-top: var(--ct-lead-gap);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: var(--c-text);
}

/* chips: DOM follows the desktop order; visually first below 1024 (D-CT-2) */
.contact__chips {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ct-chip-gap);
  margin-top: var(--ct-chips-gap);
}

/* details list — 2 x 2 grid on both layers */
.contact__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--ct-grid-col-gap);
  row-gap: var(--ct-grid-row-gap);
  margin-top: var(--ct-details-gap);
}
.contact__item { min-width: 0; }
.contact__item dt {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-contact-dt);
  line-height: var(--lh-contact-dt);
  letter-spacing: var(--ls-contact-dt);
  text-transform: uppercase;
  color: var(--c-ink);
}
.contact__item dd {
  margin-top: var(--ct-dd-gap);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-contact-dd);
  line-height: var(--lh-contact-dd);
  letter-spacing: var(--ls-contact-dd);
  color: var(--c-text);
}

/* per-layer copy (D-CT-3) */
.contact__br-d { display: none; }
.contact__copy--d { display: none; }

/* ---------- form (shared component; only the placement lives here) ---------- */
.contact .lead-form {
  margin-top: var(--ct-form-gap);
}

/* ================= 768–1023: pseudo-tablet, split row (D-6), mobile internals ================= */
@media (min-width: 768px) and (max-width: 1023px) {
  .contact {
    --text-contact-dt: clamp(9px, calc(9px + (var(--max-vw) - 768px) * 0.025), 16.034px);
    --text-contact-dd: clamp(11px, calc(11px + (var(--max-vw) - 768px) * 0.025), 14.474px);
    --ct-eyebrow-gap: clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 32px);
    --ct-title-gap: clamp(8px, calc(8px + (var(--max-vw) - 768px) * 0.025), 11.88px);
    --ct-lead-gap: clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 22.82px);
    --ct-details-gap: clamp(24px, calc(24px + (var(--max-vw) - 768px) * 0.025), 51.91px);
    --ct-chip-gap: clamp(8px, calc(8px + (var(--max-vw) - 768px) * 0.025), 20.11px);
    --ct-grid-col-gap: clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 33.11px);
    --ct-grid-row-gap: clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 33.13px);
    --ct-dd-gap: clamp(4px, calc(4px + (var(--max-vw) - 768px) * 0.025), 8.28px);
  }
  /* k = 1.125 info group: same M-base, the drawn D-base as the cap (D-CT-1) */
  .contact__info {
    --text-display: clamp(26px, calc(26px + (var(--max-vw) - 768px) * 0.025), 52.227px);
    --text-eyebrow: clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 24.179px);
    --text-lead: clamp(13px, calc(13px + (var(--max-vw) - 768px) * 0.025), 24.179px);
    --text-chip: clamp(9px, calc(9px + (var(--max-vw) - 768px) * 0.025), 15.818px);
  }
  .contact .chip {
    --chip-pad-y: clamp(6px, calc(6px + (var(--max-vw) - 768px) * 0.025), 8.7px);
    --chip-pad-x: clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 21.9px);
  }
  .contact__inner {
    --ct-col-gap: clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 120.76px);
    flex-direction: row;
    align-items: flex-start;
    gap: var(--ct-col-gap);
  }
  /* RESPONSIVE 2026-09-15: basis as a share of (inner − gap), NOT `flex: 1 1 0` (FD-AA) — a 0 basis
     is floored at the form card's padding+border, so grow handed the card the wider half
     (375 vs 333 at 768). Equal halves per brief-page §7.2, identical to the hero form. */
  .contact__info,
  .contact .lead-form {
    flex: 0 1 calc((100% - var(--ct-col-gap)) / 2);
    min-width: 0;
  }
  .contact .lead-form { margin-top: 0; }
}

/* ================= 1024+: desktop ================= */
@media (min-width: 1024px) {
  .contact {
    --text-contact-dt: clamp(10px, calc(16.034px * (var(--max-vw) / var(--vw-base))), 19px);
    --lh-contact-dt: 1.022;          /* 16.39px */
    --text-contact-dd: clamp(9px, calc(14.474px * (var(--max-vw) / var(--vw-base))), 17px);
    --lh-contact-dd: 1.55;           /* 22.435px */
    --ct-eyebrow-gap: 0px;
    --ct-title-gap: clamp(8px, calc(11.88px * (var(--max-vw) / var(--vw-base))), 14px);
    /* heading -> lead: 187.87 - 43.88 - 2 x 60.58 (rendered line boxes; the drawn box is 115.87) */
    --ct-lead-gap: clamp(14px, calc(22.82px * (var(--max-vw) / var(--vw-base))), 27px);
    --ct-chips-gap: clamp(20px, calc(32px * (var(--max-vw) / var(--vw-base))), 38px);
    --ct-details-gap: clamp(33px, calc(51.91px * (var(--max-vw) / var(--vw-base))), 62px);
    --ct-chip-gap: clamp(13px, calc(20.11px * (var(--max-vw) / var(--vw-base))), 24px);
    --ct-grid-col-gap: clamp(21px, calc(33.11px * (var(--max-vw) / var(--vw-base))), 39px);
    --ct-grid-row-gap: clamp(21px, calc(33.13px * (var(--max-vw) / var(--vw-base))), 39px);
    --ct-dd-gap: clamp(5px, calc(8.28px * (var(--max-vw) / var(--vw-base))), 10px);
  }
  /* D-CT-1: the info group is drawn at k = 1.125 */
  .contact__info {
    --text-display: clamp(33px, calc(52.227px * (var(--max-vw) / var(--vw-base))), 62px);
    --text-eyebrow: clamp(15px, calc(24.179px * (var(--max-vw) / var(--vw-base))), 29px);
    --text-lead: clamp(15px, calc(24.179px * (var(--max-vw) / var(--vw-base))), 29px);
    --text-chip: clamp(10px, calc(15.818px * (var(--max-vw) / var(--vw-base))), 19px);
  }
  /* D-CT-6: chip padding from the drawn box at k = 1.125. Figma's 22.9 text inset includes the
     1.125 inside stroke; CSS adds a 1px border outside the padding -> (252.79 - 207 - 2) / 2 = 21.9 */
  .contact .chip {
    --chip-pad-y: clamp(6px, calc(8.7px * (var(--max-vw) / var(--vw-base))), 10px);
    --chip-pad-x: clamp(14px, calc(21.9px * (var(--max-vw) / var(--vw-base))), 26px);
  }
  /* placeholder text inset: drawn 14.21 from the outer edge, inside a 1px border -> 13.21 padding */
  .contact .lead-form {
    --lf-field-pad-x: clamp(8px, calc(13.21px * (var(--max-vw) / var(--vw-base))), 16px);
  }

  .contact__inner {
    flex-direction: row;
    align-items: center;            /* D-CT-7: drawn top 38 / bottom 33.94 in the 612 row */
    gap: clamp(76px, calc(120.76px * (var(--max-vw) / var(--vw-base))), 143px);
  }
  .contact__info { flex: 1 1 0; }
  .contact .lead-form {
    flex: 0 0 clamp(306px, calc(484.12px * (var(--max-vw) / var(--vw-base))), 574px);
    margin-top: 0;
  }

  .contact__title {
    max-width: clamp(321px, calc(507.37px * (var(--max-vw) / var(--vw-base))), 602px);
    line-height: 1.16;              /* 60.583 / 52.227 */
  }
  .contact__chips { order: 0; }

  .contact__details {
    /* items drawn 320.4 and 239.36 wide (grid 592.87, not the full 614 column) */
    grid-template-columns:
      clamp(203px, calc(320.4px * (var(--max-vw) / var(--vw-base))), 380px)
      clamp(151px, calc(239.36px * (var(--max-vw) / var(--vw-base))), 284px);
  }
  .contact__item dd { white-space: nowrap; }   /* drawn nowrap lines split by <br> (§5.6) */

  .contact__br-d { display: revert; }
  .contact__copy--d { display: inline; }
  .contact__copy--m { display: none; }
}