/* =========================================================
   SHARED PAGE LAYOUTS
   ========================================================= */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(32px, 7vw, 120px); align-items: start; }
.split .head { margin-bottom: 0; }
.section--flush { padding-top: 0; }
.lead--dark { color: var(--fg); font-size: clamp(1.0625rem, 1rem + .4vw, 1.375rem); line-height: 1.5; max-width: 52ch; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* Related services */
.related { display: grid; }
.related-link { display: grid; grid-template-columns: minmax(180px, 3fr) minmax(0, 6fr) auto; gap: 8px 32px; align-items: center; padding: 24px 0; color: var(--fg); background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent) bottom / 100% 1px no-repeat; }
.related-link .icon { color: var(--taupe); transition: transform 250ms var(--ease), color 250ms var(--ease); }
.related-link:hover .icon { transform: translateX(3px); color: var(--fg); }
@media (max-width: 700px) { .related-link { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; padding: 20px 0; } .related-link .body { grid-column: 1; } .related-link .icon { grid-column: 2; grid-row: 1 / 3; } }

/* Who it suits (inside a text panel) */
.suits { display: grid; gap: 4px; }
.suits li { display: flex; align-items: baseline; gap: 32px; padding: 12px 0; color: var(--paper); }
.suits .step-n { color: var(--taupe); }

/* Who we work with: copy and a figure, alternating sides */
.audience { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px clamp(32px, 7vw, 120px); align-items: center; padding-block: clamp(32px, 5vw, 72px); background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent) top / 100% 1px no-repeat; }
.audience-copy { display: grid; gap: 16px; min-width: 0; }
.audience .ticks { margin-top: 8px; }
.audience--flip .audience-copy { order: 2; }
.audience-media { border-radius: var(--radius); background: var(--cream); }
@media (max-width: 900px) { .audience { grid-template-columns: minmax(0, 1fr); } .audience--flip .audience-copy { order: 0; } .audience-media { order: -1; max-width: 520px; width: 100%; } }

/* Teams and values: small cards with an icon tile */
.teams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.team { display: grid; gap: 10px; align-content: start; padding: 28px 32px 32px; border-radius: var(--radius); background: var(--cream); color: var(--mahogany); }
.team .icon-tile { margin-bottom: 6px; }
.team .body { color: rgba(55, 47, 44, .8); }
@media (max-width: 900px) { .teams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .teams { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* On phones each team is a row: icon on the left, title and line beside it */
  .team { grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 20px 0; border-radius: 0; background: none; border-bottom: 1px solid var(--line); }
  .team:first-child { border-top: 1px solid var(--line); }
  .team .icon-tile { grid-row: 1 / 3; margin: 0; background: var(--cream); box-shadow: none; }
}

/* Roles */
.roles { display: grid; }
.role { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr) auto; gap: 8px 24px; align-items: center; padding: 22px 0; color: var(--fg); background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent) bottom / 100% 1px no-repeat; }
.role .icon { color: var(--taupe); transition: transform 250ms var(--ease); }
.role:hover .icon { transform: translateX(3px); }
.roles-note { margin-top: 24px; }
@media (max-width: 760px) {
  .role { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 18px 0; }
  .role .body { grid-column: 1; font-size: var(--fs-small); }
  .role .icon { grid-column: 2; grid-row: 1 / 4; }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact { padding-top: clamp(24px, 4vw, 64px); }
.contact-grid { display: grid; gap: 20px; max-width: 860px; }
.contact-card { padding: clamp(20px, 3.5vw, 48px); border-radius: var(--radius); background: var(--cream); color: var(--mahogany); }
.form { display: grid; gap: 28px; }
.topics { border: 0; padding: 0; margin: 0; min-width: 0; }
.topics legend { padding: 0; margin-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 36px; padding: 0 12px; border-radius: 4px; font-size: var(--fs-small); color: var(--mahogany); border: 1px solid rgba(163, 152, 147, .35); background: var(--white); transition: background 250ms var(--ease), color 250ms var(--ease), border-color 250ms var(--ease); }
.chip:hover { border-color: rgba(55, 21, 6, .4); }
.chip.is-active { background: var(--mahogany); color: var(--white); border-color: var(--mahogany); }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field .eyebrow { color: rgba(55, 47, 44, .72); }
.field input, .field select, .field textarea { width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(163, 152, 147, .45); border-radius: 0; background: transparent; font-size: var(--fs-body-l); color: var(--mahogany); outline: none; resize: vertical; transition: border-color 250ms var(--ease); }
.field select { appearance: none; cursor: pointer; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--mahogany); }
.has-error input { border-color: #A3402A; }
.field-error { font-style: normal; font-size: var(--fs-eyebrow); color: #A3402A; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-small); color: rgba(55, 47, 44, .85); cursor: pointer; }
.consent input { appearance: none; flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; border: 1px solid rgba(55, 21, 6, .4); border-radius: 4px; display: grid; place-items: center; cursor: pointer; background: var(--white); }
.consent input:checked { background: var(--mahogany); border-color: var(--mahogany); }
.consent input:checked::after { content: ''; width: 8px; height: 5px; border-left: 1.5px solid var(--white); border-bottom: 1.5px solid var(--white); transform: rotate(-45deg) translate(1px, -1px); }
.consent a { text-decoration: underline; text-underline-offset: 3px; }
.sent { display: grid; gap: 18px; justify-items: start; }
.sent .body { color: rgba(55, 47, 44, .85); }
.side-email { color: var(--fg-2); padding-left: clamp(20px, 3.5vw, 48px); }
.select-all { user-select: all; color: var(--fg); overflow-wrap: anywhere; }
@media (max-width: 900px) { .form-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .form, .form-2 { gap: 22px; }
  .field textarea { min-height: 112px; }
  .field input, .field select, .field textarea { font-size: 1rem; }
}

/* Legal */
.legal { display: grid; margin: 0; }
.legal > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 12px 48px; padding: 28px 0; background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent) bottom / 100% 1px no-repeat; }
.legal dd { margin: 0; }
@media (max-width: 760px) { .legal > div { grid-template-columns: minmax(0, 1fr); padding: 22px 0; } }