/* Hallmark · checked: 2026-10-22 · genre: modern-minimal (inferred)
 * built: the project · redesign: polish · v2.0.0
 * scope: shared UI; existing layout, brand, artwork and content retained.
 * Full legacy gate compliance is not claimed; see .hallmark/review.json. */
/* ==========================================================================
   /contact/ — Request a briefing.
   A white hero, the briefing form (sent by js/pages/contact.js to
   /api/briefing, with a mail-app fallback), the three desks, then what a
   briefing covers on night.
   The form sits on the page's own paper: no panel, no grey boxes. Controls
   are 8px (--r-xs), fields 52px, a selected choice is an ink outline with an
   ink mark (no crimson fill, no tint), and crimson is kept for errors and the
   one primary button.
   Spacing keeps to 8, 12, 16, 24, 32, 40, 48 and 64.
   Everything is scoped under .page-contact. Where css/revamp-editorial.css
   (loaded later) sets the same property, the selector here is one class
   stronger on purpose.
   ========================================================================== */

.page-contact {
  /* A field edge that still reads at 3:1 against paper (WCAG 1.4.11), lighter than --ink-4 */
  --ct-field-line: rgb(var(--ink-rgb) / 0.46);
  --ct-press: var(--t-press, 90ms);
  --ct-release: var(--t-exit, 200ms);
}

/* ------------------------------------------------------------------ Hero
   Title on the left; the lead and one quiet line of links down the page
   stay together beside it (below it on narrow screens). No buttons: the
   form starts right below, and its submit is the page's one crimson action. */
.page-contact .ct-hero .page-hero__inner.container { row-gap: 24px; }
/* Wide screens: the same 0.8 / 1.2 split as the form and the covers head, so the
   right-hand column starts at one x all the way down the page */
@media (min-width: 1001px) {
  .page-contact .ct-hero .page-hero__inner.container { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
.page-contact .ct-hero__side { grid-column: 2; min-width: 0; }
.page-contact .ct-hero__lead { max-width: 640px; }
/* The links are 44px tall with the text centred, so 12px reads as about 24px */
.page-contact .ct-hero .ct-direct { margin-top: 12px; gap: 0 24px; }
.page-contact .ct-direct a { color: var(--ink-2); text-decoration-thickness: 1px; transition: color var(--t-fast) var(--ease-soft); }
@media (hover: hover) { .page-contact .ct-direct a:hover { color: var(--ink); } }

/* ------------------------------------------------------------ The brief
   Wide screens: heading and "How it works" share the left column, the form
   the right. Narrow screens: heading, form, then how it works. */
.page-contact .ct-brief .ct-brief__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-areas: "head form" "next form";
  grid-template-rows: auto 1fr;
  gap: 48px 64px;
  align-items: start;
}
.page-contact .ct-brief__head { grid-area: head; }
.page-contact .ct-brief__next { grid-area: next; }
/* Wide screens: "How it works" stays in view beside the form while it is filled
   in, instead of leaving the left half empty. Only where it fits the window. */
@media (min-width: 1001px) and (min-height: 640px) {
  .page-contact .ct-brief__next { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}
.page-contact .ct-brief__title { max-width: 11ch; }
/* "Sent straight to…": plain text with a small icon, no box */
.page-contact .ct-plain { display: flex; align-items: flex-start; gap: 12px; max-width: 46ch; margin-top: 24px; font-size: var(--fs-small); color: var(--ink-2); }
.page-contact .ct-plain .icon { flex: none; margin-top: 2px; color: var(--ink-3); }
.page-contact .ct-plain b { display: block; margin-bottom: 2px; font-weight: 600; color: var(--ink); }

/* How it works: a quiet label, three numbered rows, one line to the assessment.
   Text beside an icon or number starts 32px in everywhere (20 + 12, 16 + 16, 24 + 8). */
.page-contact .ct-next__title { font-family: var(--font-label); font-size: var(--fs-label); font-weight: 500; line-height: var(--lh-label); letter-spacing: var(--tracking-label); text-transform: none; color: var(--ink-3); }
.page-contact .ct-steps { margin-top: 12px; border-top: 1px solid var(--line); }
.page-contact .ct-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.page-contact .ct-steps__n { padding-top: 3px; font-family: var(--font-label); font-size: var(--fs-micro); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.page-contact .ct-steps h4 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); }
.page-contact .ct-steps p { margin-top: 4px; font-size: var(--fs-small); color: var(--ink-3); }
.page-contact .ct-brief .ct-assess { margin: 24px 0 0; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-3); }

/* ------------------------------------------------------------- The form */
/* On the page's paper. (.ct-brief raises specificity above the editorial layer's panel.) */
.page-contact .ct-brief .ct-form { grid-area: form; position: relative; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.page-contact .ct-brief .ct-form > * + * { margin-top: 40px; }
/* The lede ("Every field is needed unless…") is for screen readers only, through
   aria-describedby; each field's own "Optional" says it on screen. So the first
   thing on screen (the summary, else the fields) starts flush with the heading. */
.page-contact .ct-brief .ct-form > .ct-form__lede + *,
.page-contact .ct-brief .ct-form > .ct-summary[hidden] + .ct-fields { margin-top: 0; }

/* Labels: sentence case, above the field; a quiet "Optional" where it applies */
.page-contact .ct-form .field { display: grid; gap: 8px; align-content: start; }
.page-contact .ct-form .field > label,
.page-contact .ct-group > legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: var(--fs-small); font-weight: 600; line-height: 1.4; color: var(--ink); }
.page-contact .ct-opt { font-size: var(--fs-small); font-weight: 400; color: var(--ink-3); }

/* Two balanced rows: name and email, then company, role and size */
.page-contact .ct-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 20px; }
.page-contact .ct-fields > .field { grid-column: span 2; }
.page-contact .ct-fields > .field:nth-child(-n + 2) { grid-column: span 3; }
@media (min-width: 1001px) and (max-width: 1180px) {
  .page-contact .ct-fields > .field:nth-child(3) { grid-column: 1 / -1; }
  .page-contact .ct-fields > .field:nth-child(n + 4) { grid-column: span 3; }
}

/* Fields: 52px, 8px corners, a calm ink border and soft halo on focus; crimson only for errors */
.page-contact .ct-form :is(.input, .textarea) {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid var(--ct-field-line);
  border-radius: var(--r-xs);
  background-color: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 160ms var(--ease-soft), box-shadow 200ms var(--ease-soft), background-color var(--t-fast) var(--ease-soft);
}
.page-contact .ct-form .textarea { min-height: 168px; resize: vertical; }
.page-contact .ct-form :is(.input, .textarea)::placeholder { color: var(--ink-4); }
@media (hover: hover) { .page-contact .ct-form :is(.input, .textarea):hover { border-color: var(--ink-3); } }
.page-contact .ct-form :is(.input, .textarea):is(:focus, :focus-visible) { outline: none; border-color: var(--ink); border-radius: var(--r-xs); box-shadow: 0 0 0 4px rgb(var(--ink-rgb) / 0.08); }
.page-contact .ct-form :is(.input, .textarea)[aria-invalid="true"] { border-color: var(--accent-text); box-shadow: none; }
.page-contact .ct-form :is(.input, .textarea)[aria-invalid="true"]:is(:focus, :focus-visible) { border-color: var(--accent-text); box-shadow: 0 0 0 4px rgb(var(--crimson-rgb) / 0.12); }
.page-contact .ct-select {
  appearance: none;
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 17px) 52%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
/* "Choose one" is a prompt, not an answer: placeholder ink until something is chosen */
.page-contact .ct-select:has(option[value=""]:checked) { color: var(--ink-4); }
.page-contact .ct-select option { color: var(--ink); }
.page-contact .ct-err { font-size: var(--fs-micro); font-weight: 500; color: var(--accent-text); }

/* Error summary: a quiet panel, crimson only in its edge, icon and links */
.page-contact .ct-summary { padding: 16px 18px; border-radius: var(--r-xs); border: 1px solid rgb(var(--crimson-rgb) / 0.45); background: var(--paper); }
.page-contact .ct-summary:focus { outline: none; }
.page-contact .ct-summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.page-contact .ct-summary__title { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.page-contact .ct-summary__title .icon { flex: none; color: var(--accent-text); }
.page-contact .ct-summary ul { display: grid; gap: 4px; margin-top: 8px; padding-left: 28px; }
.page-contact .ct-summary a { font-size: var(--fs-small); color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ------------------------------------------------- Choices (radio, checkbox)
   Unselected: a hairline row with ink text. Selected: an ink outline (1.5px
   overall) and a filled ink mark. The real input covers the card, so the
   whole card is the hit area; the ring shows only for the keyboard. */
.page-contact .ct-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.page-contact .ct-group > legend { width: 100%; margin-bottom: 12px; padding: 0; }
.page-contact .ct-ints__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.page-contact .ct-domains__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.page-contact :is(.ct-int, .ct-dom) { position: relative; display: block; min-width: 0; cursor: pointer; }
.page-contact :is(.ct-int, .ct-dom) input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.page-contact :is(.ct-int__box, .ct-dom__box) {
  position: relative;
  height: 100%;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  background: var(--paper);
  transition: border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft), transform var(--ct-release) var(--ease-out);
}
@media (hover: hover) { .page-contact :is(.ct-int, .ct-dom):hover :is(.ct-int__box, .ct-dom__box) { border-color: var(--ct-field-line); } }
.page-contact :is(.ct-int, .ct-dom) input:checked + * { border-color: var(--ink); box-shadow: inset 0 0 0 0.5px var(--ink); }
.page-contact :is(.ct-int, .ct-dom) input:focus-visible + * { outline: 2px solid var(--ink); outline-offset: 3px; }
.page-contact :is(.ct-int, .ct-dom) input:active + * { transform: scale(0.985); transition-duration: var(--t-fast), var(--t-fast), var(--ct-press); }

/* What brings you here: a radio mark, a title and one quiet line */
.page-contact .ct-int__box { display: grid; align-content: start; gap: 4px; padding: 15px 16px 16px 48px; }
.page-contact .ct-int__box::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 17px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid var(--ct-field-line);
  background: var(--paper);
  transition: border-color var(--t-fast) var(--ease-soft), background-color var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft);
}
.page-contact .ct-ints .ct-int__box b { font-size: var(--fs-small); font-weight: 600; line-height: 1.45; color: var(--ink); }
.page-contact .ct-ints .ct-int__box span { font-size: var(--fs-micro); line-height: 1.5; color: var(--ink-3); }
.page-contact .ct-int input:checked + .ct-int__box::before { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 4px var(--paper); }
.page-contact .ct-int input:checked + .ct-int__box span { color: var(--ink-2); }

/* Domains: icon and check mark on top, then the name and its maturity */
.page-contact .ct-dom__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "icon tick" "name name" "state state";
  align-content: start;
  row-gap: 2px;
  padding: 14px 14px 15px 16px;
}
.page-contact .ct-dom__box vm-icon { grid-area: icon; display: inline-flex; margin-bottom: 10px; color: var(--ink-3); transition: color var(--t-fast) var(--ease-soft); }
.page-contact .ct-dom__name { grid-area: name; font-size: var(--fs-small); font-weight: 600; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; word-break: normal; hyphens: manual; }
.page-contact .ct-dom__state { grid-area: state; font-size: var(--fs-micro); line-height: 1.45; color: var(--ink-3); }
.page-contact .ct-dom__tick {
  grid-area: tick;
  align-self: start;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-radius: var(--r-tag, 4px);
  border: 1.5px solid var(--ct-field-line);
  background: var(--paper);
  transition: border-color var(--t-fast) var(--ease-soft), background-color var(--t-fast) var(--ease-soft);
}
.page-contact .ct-dom__tick::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--paper);
  opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
  transition: opacity var(--t-fast) var(--ease-soft);
}
.page-contact .ct-dom input:checked + .ct-dom__box vm-icon { color: var(--ink); }
.page-contact .ct-dom input:checked + .ct-dom__box .ct-dom__tick { border-color: var(--ink); background: var(--ink); }
.page-contact .ct-dom input:checked + .ct-dom__box .ct-dom__tick::after { opacity: 1; }

/* Message */
.page-contact .ct-msg-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.page-contact .ct-form .hint { font-size: var(--fs-micro); line-height: 1.5; color: var(--ink-3); }
.page-contact .ct-count { flex: none; font-size: var(--fs-micro); line-height: 1.5; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.page-contact .ct-count.is-near { color: var(--accent-text); }

/* Actions: the one strong accent is the primary button */
.page-contact .ct-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 32px; border-top: 1px solid var(--line); }
.page-contact .ct-form__foot .btn {
  min-height: 52px;
  transition: background-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft), opacity var(--t-fast) var(--ease-soft), transform var(--ct-release) var(--ease-out);
}
.page-contact .ct-form__foot .btn:not(:disabled):active { transform: scale(0.97); transition-duration: var(--t-fast), var(--t-fast), var(--t-fast), var(--t-fast), var(--ct-press); }
.page-contact .ct-submit { min-width: 220px; }
/* Busy: the button dims (180ms) and holds still: no moving arrow */
.page-contact .ct-form__foot .ct-submit.is-busy { opacity: 0.72; cursor: progress; }
.page-contact .ct-meta { display: grid; gap: 8px; }
.page-contact .ct-brief .ct-form > .ct-meta { margin-top: 20px; }
.page-contact .ct-meta p { display: flex; align-items: flex-start; gap: 16px; font-size: var(--fs-micro); line-height: 1.5; color: var(--ink-3); }
.page-contact .ct-meta p[hidden] { display: none; }
.page-contact .ct-meta .icon { flex: none; margin-top: 1px; color: var(--ink-3); }
.page-contact .ct-note a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { .page-contact .ct-note a:hover { color: var(--ink); } }

/* Private browser check: one quiet line; the mark pulses only while checking */
.page-contact .ct-verify__mark { display: grid; place-items: center; width: 16px; height: 16px; color: var(--ink-3); transition: color var(--t-fast) var(--ease-soft); }
.page-contact .ct-verify[data-state="checking"] .ct-verify__mark { animation: ct-verify-pulse 1.1s var(--ease-in-out) infinite; }
.page-contact .ct-verify[data-state="verified"], .page-contact .ct-verify[data-state="verified"] .ct-verify__mark { color: var(--ink-2); }
@keyframes ct-verify-pulse { 50% { opacity: 0.35; } }

/* Status after sending: a calm note with a plain icon, no tile */
.page-contact .ct-status { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border-radius: var(--r-md, 12px); border: 1px solid var(--line-2); background: var(--paper); }
.page-contact .ct-status[hidden] { display: none; }
.page-contact .ct-status:focus { outline: none; }
.page-contact .ct-status:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.page-contact .ct-status__icon { display: inline-flex; flex: none; padding-top: 1px; color: var(--ink); }
.page-contact .ct-status[data-kind="error"] .ct-status__icon, .page-contact .ct-status[data-kind="fallback"] .ct-status__icon { color: var(--accent-text); }
.page-contact .ct-status[data-kind="error"], .page-contact .ct-status[data-kind="fallback"] { border-color: rgb(var(--crimson-rgb) / 0.45); }
.page-contact .ct-status__title { font-weight: 600; color: var(--ink); }
.page-contact .ct-status__text p + p { margin-top: 4px; font-size: var(--fs-small); color: var(--ink-2); }
.page-contact .ct-status a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Honeypot: off screen for people, there for bots */
.page-contact .ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Motion: the summary and status rise in (320ms), field errors fade in (200ms) */
@keyframes ct-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes ct-fade { from { opacity: 0; } }
.page-contact :is(.ct-status, .ct-summary):not([hidden]) { animation: ct-rise 320ms var(--ease-out) backwards; }
.page-contact .ct-err:not([hidden]) { animation: ct-fade 200ms var(--ease-soft) backwards; }

/* ------------------------------------------------------------- The desks
   Three open columns on a hairline. Each address is its own mailto link
   (ink, a faint underline that darkens on hover), with a small icon-only
   copy button right beside it. */
.page-contact .ct-directory.section { padding-top: 0; }
/* The section heading in the form-legend style, so it never reads as a fourth card label */
.page-contact .ct-directory__title { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; line-height: 1.4; letter-spacing: normal; text-transform: none; color: var(--ink); }
.page-contact .ct-directory .ct-desks-wrap { margin-top: 0; }
.page-contact .ct-directory .ct-desks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 24px; }
.page-contact .ct-desks .ct-desk {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 0 0;
  border: 0;
  border-top: 1px solid var(--line-2);
  border-radius: 0;
  background: none;
}
.page-contact .ct-desk__top { display: flex; align-items: center; gap: 12px; }
/* Icons stand on their own: no tile behind them */
.page-contact .ct-desk__icon { display: inline-flex; flex: none; color: var(--ink-2); }
.page-contact .ct-desk__kicker { font-family: var(--font-label); font-size: var(--fs-label); font-weight: 500; line-height: var(--lh-label); letter-spacing: var(--tracking-label); text-transform: none; color: var(--ink-3); }
.page-contact .ct-desk .ct-desk__addr {
  display: flex;
  align-items: center;
  gap: 8px;   /* clears the keyboard rings (2px at a 3px offset) with 3px to spare */
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
/* The address wraps only before the @ (a <wbr> in the markup), and the copy button stays beside it */
.page-contact .ct-desk__mail {
  min-width: 0;
  border-radius: 4px;   /* the keyboard ring follows it, a quieter match for the button's */
  color: var(--ink);
  overflow-wrap: break-word;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgb(var(--ink-rgb) / 0.16);
  transition: text-decoration-color var(--t-fast) var(--ease-soft);
}
@media (hover: hover) {
  .page-contact .ct-desk__mail:hover { text-decoration-color: currentColor; }
}
.page-contact .ct-desk__what { max-width: 46ch; margin-top: 8px; font-size: var(--fs-small); color: var(--ink-3); }
.page-contact .ct-desk__more { margin-top: auto; padding-top: 16px; font-size: var(--fs-small); }

/* Copy: a 32px icon button (44px on touch screens). It turns to a check with a
   quiet "Copied" beside it for 1.6s; the polite live region says it aloud. */
.page-contact .ct-copy {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-xs);
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease-soft), background-color var(--t-fast) var(--ease-soft), transform var(--ct-release) var(--ease-out);
}
.page-contact .ct-copy[hidden] { display: none; }
.page-contact .ct-copy:active { transform: scale(0.97); transition-duration: var(--t-fast), var(--t-fast), var(--ct-press); }
@media (hover: hover) {
  .page-contact .ct-copy:hover { color: var(--ink); background-color: rgb(var(--ink-rgb) / 0.06); }
}
/* Touch screens: 44px targets without moving the layout. The address link grows
   by padding offset with a negative margin, the copy button keeps the full 8px gap
   (so even a keyboard ring on an iPad clears the address), and the text links in
   the cards and the brief grow the same way (their hover underline moves with them). */
@media (pointer: coarse) {
  .page-contact .ct-copy { width: 44px; height: 44px; margin-block: -6px; }
  .page-contact .ct-desk__mail { padding-block: 11px; margin-block: -11px; }
  .page-contact :is(.ct-desk__more, .ct-assess, .ct-for) .link-arrow { padding-block: 10px; margin-block: -10px; }
  .page-contact :is(.ct-desk__more, .ct-assess, .ct-for) .link-arrow::after { bottom: 7px; }
}
.page-contact .ct-copy__icon { grid-area: 1 / 1; transition: opacity var(--t-fast) var(--ease-soft); }
.page-contact .ct-copy__icon--done,
.page-contact .ct-copy.is-done .ct-copy__icon--copy { opacity: 0; }
.page-contact .ct-copy.is-done .ct-copy__icon--done { opacity: 1; }
.page-contact .ct-copy:is(.is-done, .is-manual) { color: var(--ink); }
.page-contact .ct-copy__tip {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  translate: 0 -50%;
  white-space: nowrap;
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-label);
  color: var(--ink-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ct-release) var(--ease-soft);
}
.page-contact .ct-copy:is(.is-done, .is-manual) .ct-copy__tip { opacity: 1; transition-duration: var(--t-fast); }
/* No room to the right (contact.js measures): no label at all. The check, the
   selected address and the polite live region still say what happened. */
.page-contact .ct-copy__tip[data-place="none"] { display: none; }

/* Touch: the controls show their own press state, so no browser tap flash on top */
.page-contact :is(.ct-int, .ct-dom, .ct-copy, .ct-desk__mail, .ct-tile, .ct-disc__list a, .ct-direct a, .link-arrow) { -webkit-tap-highlight-color: transparent; }

/* ------------------------------------------------------- Narrow screens */
@media (max-width: 1000px) {
  .page-contact .ct-hero__side { grid-column: 1; }
  .page-contact .ct-brief .ct-brief__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "form" "next"; grid-template-rows: none; gap: 40px; }
  .page-contact :is(.ct-brief__head, .ct-brief__next) { max-width: 640px; }
  .page-contact .ct-brief__title { max-width: 14ch; }
}
@media (max-width: 960px) {
  .page-contact .ct-directory .ct-desks { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 700px) {
  .page-contact .page-hero.ct-hero { padding-top: calc(var(--header-h) + 40px); padding-bottom: 40px; }
  .page-contact .ct-hero .page-hero__inner.container { row-gap: 16px; }
  .page-contact .ct-hero .ct-direct { margin-top: 4px; }
  /* Phone section breaks keep to 48 and 64 */
  .page-contact .ct-brief.section { padding-top: 48px; padding-bottom: 64px; }
  .page-contact .ct-brief .ct-brief__grid { row-gap: 32px; }
  .page-contact .ct-brief__next { margin-top: 16px; }
  .page-contact .ct-plain { margin-top: 16px; }
  .page-contact .ct-brief .ct-form > * + * { margin-top: 32px; }
  .page-contact .ct-steps li { padding: 12px 0; }
  .page-contact .ct-steps h4 { font-size: 1rem; }
  .page-contact .ct-steps p { margin-top: 2px; }
  .page-contact .ct-desks .ct-desk { padding-top: 20px; }
}
@media (max-width: 640px) {
  .page-contact .ct-ints__grid { grid-template-columns: minmax(0, 1fr); }
  .page-contact .ct-fields { row-gap: 20px; }
  .page-contact .ct-fields > .field, .page-contact .ct-fields > .field:nth-child(-n + 2) { grid-column: 1 / -1; }
  .page-contact .ct-domains__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-contact .ct-form__foot { padding-top: 24px; }
  .page-contact .ct-form__foot .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------- Covers */
.page-contact .ct-directory.section { padding-bottom: clamp(72px, 8vw, 120px); }
.page-contact .ct-covers { padding-bottom: clamp(88px, 10vw, 150px); }
/* In the dark theme paper and night are the same black: a hairline marks the change */
:root[data-theme="dark"] .page-contact .ct-covers { border-top: 1px solid var(--line); }
.page-contact .ct-covers__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
@media (min-width: 1001px) {
  .page-contact .ct-covers__head { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 64px; }
  .page-contact .ct-covers__head > .lead { max-width: 620px; }
}
.page-contact .ct-covers__head .eyebrow + h2 { margin-top: 16px; }
.page-contact .ct-covers__title { max-width: 11ch; }
.page-contact .ct-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.page-contact .ct-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 300px;
  padding: 22px;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  background: var(--night-1);
  color: #fff;
  transition: border-color var(--t-fast) var(--ease-soft);
}
/* Media hover: at most 1.03 over 500ms, no filter, no lift */
.page-contact .ct-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.72; transition: transform 500ms var(--ease-out), opacity var(--t-fast) var(--ease-soft); }
.page-contact .ct-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(5 5 6 / 0.15) 0%, rgb(5 5 6 / 0.35) 45%, rgb(5 5 6 / 0.92) 100%); }
@media (hover: hover) { .page-contact .ct-tile:hover img { transform: scale(1.03); opacity: 0.85; } }
.page-contact .ct-tile__hud { position: absolute; inset: 14px; pointer-events: none; }
.page-contact .ct-tile__hud::before, .page-contact .ct-tile__hud::after { content: ""; position: absolute; width: 16px; height: 16px; border: 0 solid rgb(255 255 255 / 0.7); }
.page-contact .ct-tile__hud::before { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.page-contact .ct-tile__hud::after { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.page-contact .ct-tile__n { position: absolute; top: 22px; left: 36px; font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: 0.14em; color: rgb(255 255 255 / 0.8); }
.page-contact .ct-tile__name { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: 650; letter-spacing: -0.025em; }
/* Two lines held for every description, so the names in a row share a line */
.page-contact .ct-tile__what { min-height: 2lh; margin-top: 6px; padding-right: 40px; font-size: var(--fs-small); color: rgb(255 255 255 / 0.78); }
/* The arrow is an 8px square that changes colour only: it never moves */
.page-contact .ct-tile__go { position: absolute; right: 20px; bottom: 22px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-xs); border: 1px solid rgb(255 255 255 / 0.3); color: #fff; transition: background-color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft); }
@media (hover: hover) { .page-contact .ct-tile:hover .ct-tile__go { background: var(--night-3); border-color: var(--night-ink-3); } }
.page-contact .ct-tile:focus-visible { box-shadow: none; border-radius: var(--r-lg); outline: 2px solid var(--ink); outline-offset: 3px; }

/* The label sits above, so the three links line up with the tile columns */
.page-contact .ct-disc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(40px, 5vw, 64px); padding-top: 32px; border-top: 1px solid var(--line); }
.page-contact .ct-disc__label { font-family: var(--font-label); font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--tracking-label); text-transform: none; color: var(--ink-3); }
.page-contact .ct-disc__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.page-contact .ct-disc__list a { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); transition: border-color var(--t-fast) var(--ease-soft), background-color var(--t-fast) var(--ease-soft); }
@media (hover: hover) { .page-contact .ct-disc__list a:hover { border-color: var(--line-2); background: rgb(255 255 255 / 0.03); } }
/* Ink, not crimson: the page keeps one strong accent */
.page-contact .ct-disc__list .icon { flex: none; margin-top: 2px; color: var(--ink-2); }
.page-contact .ct-disc__list span { font-size: var(--fs-small); color: var(--ink-3); }
.page-contact .ct-disc__list b { display: block; font-weight: 650; color: var(--ink); }
.page-contact .ct-for { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 32px; font-size: var(--fs-small); color: var(--ink-2); }

@media (max-width: 1024px) {
  .page-contact .ct-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Narrow: "In every domain" becomes plain hairline rows, like the steps and the desks */
@media (max-width: 760px) {
  .page-contact .ct-covers__head { grid-template-columns: minmax(0, 1fr); }
  .page-contact .ct-disc { padding-top: 0; border-top: 0; }
  .page-contact .ct-disc__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .page-contact .ct-disc__list a { padding: 16px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .page-contact .ct-disc__list li:last-child a { border-bottom: 1px solid var(--line); }
  .page-contact .ct-disc__list a:hover { background: none; }
}
@media (max-width: 700px) {
  .page-contact .ct-directory.section { padding-bottom: 48px; }
  .page-contact .ct-covers.section { padding-top: 64px; }
}
/* Phones: one swipeable row with the next tile peeking in, instead of six
   stacked pictures. The row runs to the screen edges and snaps to the gutter;
   the block padding keeps the keyboard ring clear of the scroll clip. */
@media (max-width: 560px) {
  .page-contact .ct-tiles {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    margin: 0 calc(var(--gutter) * -1);
    padding: 6px var(--gutter);
    margin-block: -6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .page-contact .ct-tiles::-webkit-scrollbar { display: none; }
  .page-contact .ct-tiles > li { scroll-snap-align: start; }
  .page-contact .ct-tile { min-height: 200px; }
  /* Narrower tiles: some descriptions take three lines, so three are held */
  .page-contact .ct-tile__what { min-height: 3lh; }
}

/* Reduced motion: no movement, no hiding, no delays */
@media (prefers-reduced-motion: reduce) {
  .page-contact :is(.ct-status, .ct-summary, .ct-err) { animation: none; }
  .page-contact .ct-verify[data-state="checking"] .ct-verify__mark { animation: none; }
  .page-contact .ct-tile img, .page-contact .ct-tile:hover img { transform: none; }
  .page-contact :is(.ct-int, .ct-dom) input:active + *, .page-contact .ct-form__foot .btn:active, .page-contact .ct-copy:active { transform: none; }
}
@media print {
  .page-contact :is(.ct-status, .ct-summary, .ct-err) { animation: none; }
  .page-contact .ct-copy { display: none; }
}