/* content.css — long text, contact, payment, careers roles, "Tools we use".
   Owned by the content renderers in site/build.py (blk_prose, blk_contact +
   the contact hero chips, blk_paylinks, blk_index variant "roles", blk_tools).
   Tokens only (clay.css), so html[data-theme] reaches every colour. */

/* ── prose (A2): one column on the hero title's edge, air above sub-heads ── */
.prose { max-width: 70ch; }
.prose__sec + .prose__sec { margin-top: 22px; }
.prose__sec--h + .prose__sec,
.prose__sec + .prose__sec--h { margin-top: clamp(44px, 5vw, 64px); }
.prose__h { font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.2; }
.prose__h + .prose__body { margin-top: 16px; }
.prose__body { display: grid; gap: 16px; }
.prose__body > .body { max-width: none; }
.prose .prose__list { max-width: none; }
.prose__body a:not(.link-arrow) { color: var(--bronze-deep); text-decoration: underline;
  text-decoration-color: rgba(var(--bronze-rgb), .45); text-underline-offset: 3px; }
.prose__body a:not(.link-arrow):hover { text-decoration-color: currentColor; }
.prose__links { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 6px; }
.prose__foot { margin-top: clamp(44px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--line-soft); }
/* the first long-text section right under a page hero: no second band of air */
.phero + .prose-sec { padding-top: clamp(8px, 1.6vw, 24px); }

/* ── contact hero: three action chips (P12) ───────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 20px 0 16px; border-radius: var(--r-pill);
  font: 500 14px/1.2 Inter, sans-serif; color: var(--ink);
  background: linear-gradient(178deg, var(--sand-980) 0%, var(--sand-943) 100%);
  box-shadow: var(--clay-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.chip svg { color: var(--bronze-deep); flex: 0 0 auto; }
.chip small { display: block; font: 400 11.5px/1.3 Inter, sans-serif; color: var(--ink-faint); }
.chip:hover { transform: translate3d(-1px, -3px, 0); box-shadow: var(--clay-md); }
.chip:active { transform: none; box-shadow: var(--clay-in); }

/* ── offices: two groups, each office a small clay card ───────────────── */
.offices { display: grid; gap: 30px; }
.offices > .eyebrow { margin-bottom: -6px; }
.offices__group { display: grid; gap: 14px; }
.offices__h { font: 500 12px/1.4 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); }
.offices__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.office { padding: 20px 22px 22px; }
.office__k { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font: 400 1.3125rem/1.2 Newsreader, Georgia, serif; letter-spacing: -.01em; color: var(--ink); }
.office__tag { font: 500 10px/1 Inter, sans-serif; letter-spacing: .18em; color: var(--bronze-deep);
  padding: 5px 8px 4px; border-radius: var(--r-pill); background: rgba(var(--bronze-rgb), .12); }
.office__v { margin-top: 8px; font: 400 13.5px/1.6 Inter, sans-serif; color: var(--ink-muted); }

/* ── payment portals (A8): a clear bronze button per row. The button column is a
   fixed track (P1), so both rows' description columns share one left edge ──── */
.pay__row.index-row { grid-template-columns: 88px minmax(0, 1fr) minmax(0, 38%) 10.5rem; align-items: center; }
.pay__row .index-row__no, .pay__row .index-row__title { align-self: baseline; }
.pay__btn { justify-self: stretch; justify-content: center; white-space: nowrap; min-height: 50px; padding: 0 26px; }
@media (max-width: 1100px) {
  .pay__row.index-row { grid-template-columns: 56px minmax(0, 1fr); align-items: baseline; }
  .pay__row .index-row__no { grid-column: 1; grid-row: 1; }
  .pay__row .index-row__title { grid-column: 2; grid-row: 1; }
  .pay__row .index-row__body { grid-column: 2; grid-row: 2; margin-top: 4px; }
  .pay__btn { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 14px; }
}
@media (max-width: 680px) { .pay__row.index-row { grid-template-columns: 40px minmax(0, 1fr); } }

/* ── careers: open roles (A9) ─────────────────────────────────────────── */
.roles__note { max-width: 62ch; margin-bottom: clamp(26px, 3vw, 36px); }
.roles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); }
.role { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center;
  gap: 14px; padding: 20px 4px; border-bottom: 1px solid var(--line); }
.role__mark { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.role__t { font: 400 1.25rem/1.3 Newsreader, Georgia, serif; letter-spacing: -.01em; color: var(--ink); }
.role--open .role__mark { background: var(--bronze); box-shadow: 0 0 0 4px rgba(var(--bronze-rgb), .16); }
.role__tag { font: 500 10px/1 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase;
  color: var(--bronze-deep); padding: 6px 9px 5px; border-radius: var(--r-pill); background: rgba(var(--bronze-rgb), .13); }
.role__apply { white-space: nowrap; }
.role--closed .role__t { color: var(--ink-faint); }
.role__state { grid-column: 3 / 5; justify-self: end; font: 400 12.5px/1.3 Inter, sans-serif; color: var(--ink-faint); }
@media (max-width: 940px) { .roles { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .role { grid-template-columns: 10px minmax(0, 1fr) auto; row-gap: 10px; }
  .role__apply { grid-column: 2 / 4; grid-row: 2; }
  .role__state { grid-column: 2 / 4; grid-row: 2; justify-self: start; }
}

/* ── "Tools we use" (A5 / L5): a quiet two-column statement on the narrow column
   (the FAQ's left edge). The logos keep their own colours; each is exported on
   one 10:3 canvas with its visual weight equalised (assets/img/tools/), and
   drifts ±3px on its own slow clock — transform only, still under reduced motion. */
.tools { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
  padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line-soft); }
.tools__copy { display: grid; gap: 16px; }
.tools__text { max-width: 46ch; }
.tools__logos { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px) clamp(24px, 3vw, 44px);
  align-items: center; justify-items: center; }
.tools__item { display: flex; align-items: center; justify-content: center; width: 100%; }
.tools__item img { display: block; width: min(100%, 184px); height: auto; aspect-ratio: 10 / 3; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) {
  .tools__item img { animation: tools-float var(--fd, 7s) ease-in-out var(--fo, 0s) infinite; will-change: transform; }
  .tools__item:nth-child(1) img { --fd: 6.4s; --fo: -0.9s; }
  .tools__item:nth-child(2) img { --fd: 8.2s; --fo: -3.1s; }
  .tools__item:nth-child(3) img { --fd: 7.3s; --fo: -5.4s; }
  .tools__item:nth-child(4) img { --fd: 8.9s; --fo: -1.8s; }
  @keyframes tools-float { 0%, 100% { transform: translate3d(0, -3px, 0); } 50% { transform: translate3d(0, 3px, 0); } }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tools__logos { animation: tools-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes tools-fade { from { opacity: 0; } to { opacity: 1; } }
  }
}
@media (max-width: 940px) {
  .tools { grid-template-columns: 1fr; gap: 28px; }
  .tools__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .tools__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── service intro without media (L6, India): one column on the prose measure ── */
.intro-solo { grid-template-columns: minmax(0, 1fr); }
.intro-solo .duet__copy { max-width: 70ch; }
.intro-solo .duet__copy h2 { max-width: 20ch; }

/* ── contact (P3): one column below ~1100px — the card above the offices, every
   field full width; the "optional" tag never drops under its label ─────────── */
@media (max-width: 1100px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-grid .form__pair { grid-template-columns: minmax(0, 1fr); }
}
.contact-grid .field > label { white-space: nowrap; }

/* contact form head: title, one line, then air before the first field */
.form__head { display: grid; gap: 10px; margin-bottom: clamp(26px, 3vw, 34px); }

/* ── contact, form first (imp-pages 17 Oct; hero "formFirst"): a compact head, then the
   form left and the Direct rows right inside the first screen at 1440 × 900; the offices
   follow full width. Below 1100px: head → form → Direct → offices (one column). ───── */
.phero--compact { padding-bottom: clamp(12px, 1.6vw, 22px); padding-top: calc(var(--head-h) + clamp(20px, 2.4vw, 36px)); }
.phero--compact::after { display: none; }   /* the bloom would be cut off by the short head */
.contact-head .head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 48px; flex-wrap: wrap; }
.contact-head .head-split > p { max-width: 44ch; margin-bottom: 6px; }
@media (min-width: 1101px) { .contact-head .head-split { flex-wrap: nowrap; } }
.contact-first { padding-top: clamp(8px, 1.4vw, 20px); }
.contact-first .contact-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.contact-first .lf-card { padding-top: clamp(28px, 3vw, 44px); }
.contact-side { display: grid; align-content: start; }
.contact-side .chips { margin-top: 24px; }
.contact-offices { margin-top: clamp(48px, 6vw, 88px); }
.contact-offices .offices__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
@media (max-width: 1100px) {
  .contact-first .contact-grid { grid-template-columns: minmax(0, 1fr); }
}