/* ==================================================================
   Contact — kwizzbit/contact (whole-file segment)
   Faithful slice of /HTML/contact.html. Globals (reset/body/font-face/:root)
   dropped; tokens canonical (theme.json). Full-bleed via the .kwb-segment wrapper.
   ================================================================== */

.contact {
  --contact-label-color: #473833;
  --contact-label-optional-color: #8C7068;
  --contact-placeholder: #827571;
}

.contact {
  padding-inline: var(--wp--custom--layout--gutter);
  padding-block: 3.5rem 6rem;
  /* Vertical rhythm: generous top breathing room below sticky header */
}

/* Desktop: this page has no nav/footer, so centre the content vertically in
   the window. Column flex + min-height lets it grow & scroll if it ever
   exceeds the viewport (no clipping). */
@media (min-width: 1024px) {
  .contact {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 2.5rem;
  }
}

.contact__inner {
  max-width: 1100px;   /* matches hero/audience-split constrain width */
  margin-inline: auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;           /* matches hero-split column gap */
  align-items: start;
}

/* =============================================================
   LEFT COLUMN
   ============================================================= */
.contact__left {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  /* WP deviation: no .container class — see hero-split QA note */
}

/* --- Headline ------------------------------------------------ */
.contact__headline {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  font-size: 4.5rem;    /* H2-sketch: 72px */
  line-height: 0.889;
  letter-spacing: -0.10769em;
  color: var(--wp--preset--color--ink);
}

.contact__headline-accent {
  color: var(--wp--preset--color--coral);
}

/* Zero-width anchor — same technique as testimonials finger + pricing handshake
   Does NOT affect line-height or text layout at any breakpoint */
.contact__headline-anchor {
  position: relative;
  display: inline-block;
  width: 0;
  overflow: visible;
  pointer-events: none;
}

/* Pixel pointing finger floating asset
   WP handoff: replace src with WP media library URL, same as pricing handshake
   NOTE: finger image provided as Image 2 in design handoff.
   Using CSS emoji render as preview stand-in — swap for real PNG/WebP on WP handoff. */
.contact__finger {
  position: absolute;
  bottom: -0.15em;
  left: 0.12em;
  width: 115px;
  height: auto;
  pointer-events: none;
  animation: finger-point 3.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  image-rendering: pixelated;  /* preserves pixel art quality */
}

@keyframes finger-point {
  0%, 100% { transform: translateX(0)    rotate(-2deg); }
  35%       { transform: translateX(8px)  rotate(1deg); }
  65%       { transform: translateX(4px)  rotate(-1deg); }
}

/* --- Lead ---------------------------------------------------- */
.contact__lead {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--md);  /* 17px */
  line-height: 1.412;
  color: var(--wp--preset--color--ink);
  width: 327px;   /* locked — matches hero-split lead width spec */
  max-width: 100%;
}

/* --- Trust logos -------------------------------------------- */
.contact__trust {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Trust logo strip — exact pricing__social spec, contact__ namespace ── */
.contact__social-label {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;        /* SemiBold */
  font-size: 0.8125rem;   /* 13px */
  color: var(--wp--preset--color--ink);
}
/* Desktop + tablet: 4-col × 2-row static grid, logos dark + small */
.contact__logos {
  display: block;           /* wrapper — grid lives on the track */
}
.contact__logos svg {
  display: block;
  flex-shrink: 0;
}
.contact__logos-ticker  { display: contents; }
.contact__logos-track   {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 1.375rem 1.5rem;
  align-items: center;
  justify-content: start;
}
/* SVGs at natural height — small, full opacity, matching Sketch */
.contact__logos-track svg {
  height: 17px;
  width: auto;
  opacity: 1;
}
/* "& more" SVG is smaller by design — roughly half the logo height */
.contact__logo-more-wrap svg {
  height: 13px;
}
.contact__logos-track:last-child { display: none; }

@media (max-width: 640px) {
  /* Mobile: static 4×2 grid — no ticker */
  .contact__logos-ticker { display: contents; }
  .contact__logos-track  {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 0.75rem 1.25rem;
    align-items: center;
    justify-content: start;
  }
  .contact__logos-track:last-child { display: none; }
  .contact__logos-track svg {
    height: 14px;
    width: auto;
    opacity: 1;
  }
  .contact__logo-more-wrap svg { height: 11px; }
} /* end @media (max-width: 640px) */



/* --- Back link ---------------------------------------------- */
.contact__back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;        /* SemiBold */
  font-size: var(--wp--preset--font-size--nav);
  color: var(--wp--custom--color--nav-ink);
  text-decoration: none;
  margin-top: 0.75rem;    /* extra breathing room below trust logos */
  transition: color var(--wp--custom--motion--dur-fast) ease;
  align-self: flex-start;
}
.contact__back:hover {
  color: var(--wp--preset--color--coral);
}
.contact__back:hover .contact__back-chevron polygon {
  fill: var(--wp--preset--color--coral);
}
/* Chevron rotated 90° counter-clockwise (points left) */
.contact__back-chevron {
  display: flex;
  align-items: center;
  transform: rotate(90deg);
  flex-shrink: 0;
}

/* =============================================================
   FORM CARD
   ============================================================= */
.contact__card {
  background: var(--wp--preset--color--white);
  border: none;
  border-radius: 0;
  padding: 2.25rem 2.25rem 2rem;
  box-shadow: 0 20px 50px rgba(255, 54, 35, 0.10);
}

/* =============================================================
   FORM LAYOUT
   ============================================================= */
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
.contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.contact__field {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;  /* 9px */
  min-width: 0;    /* allows grid cells to compress equally */
}
.contact__field--full {
  grid-column: 1 / -1;
}

/* =============================================================
   LABELS
   ============================================================= */
.contact__label {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;        /* Medium */
  font-size: 0.8125rem;   /* 13px */
  color: var(--contact-label-color);
  line-height: 1;
  letter-spacing: 0.005em;
}
.contact__label-optional {
  font-weight: 500;
  color: var(--contact-label-optional-color);
  margin-left: 0.2em;
}

/* =============================================================
   INPUTS — from Sketch design:
   - Warm cream fill #F5DFCE
   - No visible border (0.5px same-tone, effectively invisible)
   - border-radius: 0 (site convention)
   - Comfortable padding, slightly taller than default
   - Placeholder in muted warm tone
   - Focus: coral border + white bg
   ============================================================= */
.contact__input,
.contact__select,
.contact__textarea {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;        /* Medium */
  font-size: 0.875rem;    /* 14px */
  color: var(--wp--preset--color--ink);
  background: #F6EEE7;
  border: none;
  border-radius: 0;
  padding: 0.8125rem 0.9375rem;
  width: 100%;
  line-height: 1.4;
  outline: none;
  transition: background var(--wp--custom--motion--dur-fast) ease,
              box-shadow  var(--wp--custom--motion--dur-fast) ease;
  -webkit-appearance: none;
  appearance: none;
}
.contact__input::placeholder,
.contact__textarea::placeholder {
  color: var(--contact-placeholder);
  font-weight: 500;
}
.contact__input:focus,
.contact__select:focus,
.contact__textarea:focus {
  background: #F6EEE7;   /* hold the warm fill — no jarring white flash */
  box-shadow: inset 0 0 0 1px #D7BAAF;  /* single thin warm border, matches card border */
  outline: none;
}

/* =============================================================
   PHONE FIELD
   ============================================================= */
.contact__phone-wrap {
  display: flex;
  align-items: stretch;
  background: #F6EEE7;
  border: none;
  border-radius: 0;
  min-width: 0;         /* prevents grid blowout — keeps phone equal width to email */
  overflow: hidden;     /* clips prefix-wrap within bounds */
  transition: background var(--wp--custom--motion--dur-fast) ease,
              box-shadow var(--wp--custom--motion--dur-fast) ease;
}
.contact__phone-wrap:focus-within {
  background: #F6EEE7;
  box-shadow: inset 0 0 0 1px #D7BAAF;
}
/* Suppress red :focus-visible outline on prefix select and phone input */
.contact__phone-country:focus-visible,
.contact__phone-input:focus-visible {
  outline: none;
}
.contact__phone-prefix-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 5.75rem;
}
/* Subtle vertical divider */
.contact__phone-prefix-wrap::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 0.5px;
  background: rgba(29,11,9,0.12);
  pointer-events: none;
}
/* Flag emoji */
.contact__phone-flag-overlay {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;        /* normalised — emoji renders more consistently across browsers */
  line-height: 1;
  pointer-events: none;
  z-index: 1;
  -webkit-font-smoothing: antialiased;
}
/* Dial code — after flag */
.contact__phone-dial-overlay {
  position: absolute;
  left: 2.25rem;    /* pushed right — reliable gap from flag emoji across Safari/Chrome */
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--wp--preset--color--ink);
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
/* Chevron — tight after dial code */
.contact__phone-chevron {
  position: absolute;
  left: 4.35rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  flex-shrink: 0;
}
/* Transparent select — full tap target over prefix */
.contact__phone-country {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  color: transparent;
  cursor: pointer;
  outline: none;
  width: 100%;
  height: 44px;
  min-height: 44px;
  border-radius: 0;
  padding: 0;
}

.contact__phone-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0.8125rem 0.9375rem 0.8125rem 0.75rem;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--wp--preset--color--ink);
  outline: none;
  border-radius: 0;
}
.contact__phone-input::placeholder {
  color: #827571;
}

/* =============================================================
   SELECT
   ============================================================= */
.contact__select-wrap {
  position: relative;
}
.contact__select {
  cursor: pointer;
  padding-right: 2.5rem;
  color: var(--contact-placeholder);
}
.contact__select.has-value {
  color: var(--wp--preset--color--ink);
}
.contact__select-chevron {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  flex-shrink: 0;
}

/* =============================================================
   TEXTAREA
   ============================================================= */
.contact__textarea {
  resize: none;
  min-height: 8.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  /* Thin scrollbar — Firefox */
  scrollbar-width: thin;
  scrollbar-color: #D7BAAF transparent;
}
/* Thin scrollbar — Chrome/Safari */
.contact__textarea::-webkit-scrollbar {
  width: 4px;
}
.contact__textarea::-webkit-scrollbar-track {
  background: transparent;
}
.contact__textarea::-webkit-scrollbar-thumb {
  background: #D7BAAF;
  border-radius: 0;
}



/* Character counter */
.contact__char-count {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: 0.75rem;    /* 12px */
  color: #827571;
  text-align: right;
  margin-top: 0.375rem;
  transition: color var(--wp--custom--motion--dur-fast) ease;
}
.contact__char-count.is-low {
  color: var(--wp--preset--color--coral);
}

/* =============================================================
   SUBMIT BUTTON
   ============================================================= */
.contact__submit-wrap {
  padding-top: 0;
  margin-top: -0.5rem;  /* pulls submit up tighter to message box */
}
.contact__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--white);
  background: var(--wp--preset--gradient--btn-secondary);
  border: none;
  border-radius: 0;
  padding-inline: 1.5rem;
  height: 44px;
  min-height: 44px;
  min-width: 8.5rem;    /* locks width — prevents shrink during loading dots state */
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background var(--wp--custom--motion--dur-fast) ease,
              transform  var(--wp--custom--motion--dur-fast) ease,
              opacity    var(--wp--custom--motion--dur-fast) ease,
              color      var(--wp--custom--motion--dur-base) ease,
              border     var(--wp--custom--motion--dur-base) ease;
}
.contact__submit:hover:not(:disabled) {
  background: var(--wp--preset--gradient--btn-secondary-hover);
  transform: translateY(-1px);
}
.contact__submit:active:not(:disabled) {
  transform: translateY(0);
}
/* Disabled state — fields not yet complete */
.contact__submit:disabled:not(.is-sent) {
  opacity: 0.38;
  cursor: not-allowed;
}
.contact__submit-arrow {
  flex-shrink: 0;
  will-change: transform;
  transition: none;
}
/* Submit loading + sent states */
.contact__submit-dots {
  display: none;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.contact__submit-dot {
  display: block;
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 0;     /* square bits — matches loader spec */
  animation: submit-pulse 1.2s ease-in-out infinite;
}
.contact__submit-dot:nth-child(2) { animation-delay: 0.2s; }
.contact__submit-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes submit-pulse {
  0%, 100% { transform: scale(0.6); opacity: 0.6; }
  50%       { transform: scale(1);   opacity: 1; }
}
/* Loading state */
.contact__submit.is-sending .contact__submit-label { display: none; }
.contact__submit.is-sending .contact__submit-arrow { display: none; }
.contact__submit.is-sending .contact__submit-dots  { display: flex; }
/* Sent state */
.contact__submit.is-sent {
  background: var(--wp--preset--color--white);
  border: 0.5px solid #D7BAAF;
  color: var(--wp--preset--color--ink);
  pointer-events: none;
  border-radius: 0;   /* locked — no corner radius */
}
.contact__submit.is-sent .contact__submit-dots  { display: none; }
.contact__submit.is-sent .contact__submit-arrow { display: none; }
.contact__submit.is-sent .contact__submit-label { display: inline; opacity: 1; }

/* =============================================================
   SEND CONFIRMATION — full-screen takeover
   Added 2026-08. QA flagged that the tick on the Send button was the only
   success signal. A second after the button flips to "Sent" this fades up over
   the whole screen, holds, then fades back out to the form, where the spent
   "Sent" button remains as the receipt. Modelled on .payment-success.

   THE FAIL-SAFE DIRECTION IS INVERTED HERE, ON PURPOSE. Everywhere else in this
   theme the rule is "fail visible". An overlay is the opposite case: one that
   fails to APPEAR costs nothing (the Sent button still tells the story), but one
   that fails to LEAVE covers the entire page and traps the visitor. So the
   resting state is comprehensively inert — opacity 0, visibility hidden AND
   pointer-events none — and every one of those has to be actively switched on.
   Dropping the .is-visible class alone fully disarms it, even if the JS teardown
   never removes the element.
   ============================================================= */
.contact__success[hidden] { display: none; }

.contact__success {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  background: var(--wp--preset--color--cream);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.contact__success.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.45s ease, visibility 0s;
}

/* Inner choreography mirrors .payment-success: badge springs, then the title
   lifts, then the sub. Each is gated on .is-visible so it replays cleanly.
   These are decoration only — if they never run, the overlay is simply a cream
   screen for its ~2s hold and then leaves, which is recoverable. The overlay's
   own dismissal never depends on them. */
/* Badge, type scale and stagger timings below are a deliberate 1:1 mirror of
   .payment-success (payment.css) so the two confirmations are the same screen in
   two places. Same asset too: /wp-content/uploads/quiz-tick.webp, which is the
   tick the payment portal and the blog newsletter badge both use.
   The 50px top / -20px title pull is payment's own pairing — it sits the badge
   low and tucks the headline under it. Carried across on purpose, not a stray. */
.contact__success-badge {
  width: 100px;
  height: 100px;
  margin-top: 50px;
  margin-bottom: 0.75rem;
  transform: scale(0.6) translateY(10px);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s,
              opacity 0.4s ease 0.2s;
}
.contact__success.is-visible .contact__success-badge {
  transform: scale(1) translateY(0);
  opacity: 1;
  /* Own keyframe name, NOT the shared `badge-float`. Three @keyframes
     badge-float already exist (blog.css, gateway.css, payment.css) and keyframes
     are global, so the last file loaded wins for all of them. Don't add a fourth;
     these values are a copy of payment's so the motion still matches. */
  animation: contact-badge-float 3.5s cubic-bezier(0.65, 0, 0.35, 1) infinite 0.75s;
}
.contact__success-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes contact-badge-float {
  0%   { transform: translateY(0px)   rotate(-2deg); }
  25%  { transform: translateY(-7px)  rotate(0deg);  }
  50%  { transform: translateY(-12px) rotate(2deg);  }
  75%  { transform: translateY(-6px)  rotate(0deg);  }
  100% { transform: translateY(0px)   rotate(-2deg); }
}

.contact__success-title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
  color: var(--wp--preset--color--ink);
  margin-top: -20px;
  margin-bottom: 0.875rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease 0.35s,
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}
.contact__success.is-visible .contact__success-title {
  opacity: 1;
  transform: translateY(0);
}
.contact__success-accent { color: var(--wp--preset--color--coral); }

.contact__success-sub {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.5;
  color: #473531;
  margin: 0;
  max-width: 240px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease 0.5s,
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}
.contact__success.is-visible .contact__success-sub {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================================
   SPENT FORM
   Once the confirmation overlay has been seen, the form is done: the submit
   button is already inert (.is-sent carries pointer-events:none) so the fields
   are dimmed to match rather than sitting there looking live. contact.js also
   sets `disabled` on each control, which takes them out of the tab order — the
   dim alone would leave keyboard users tabbing through a dead form.

   The submit button is deliberately NOT dimmed: it is the receipt, and
   `.contact__submit:disabled:not(.is-sent)` already excludes it from the greyed
   disabled treatment. Only .contact__row is touched, and the button lives
   outside those in .contact__submit-wrap.
   ============================================================= */
.contact__row { transition: opacity 0.5s ease; }

.contact__form.is-spent .contact__row {
  opacity: 0.5;
  pointer-events: none;
}

/* Browsers (Safari especially) grey disabled control text themselves via
   -webkit-text-fill-color rather than `color`, which would stack on top of the
   row dim and leave the visitor's own words unreadable. Defer to whatever colour
   the cascade already computed, so the placeholder-vs-filled distinction that
   the .has-value logic sets up survives being disabled. */
.contact__form.is-spent .contact__row input,
.contact__form.is-spent .contact__row select,
.contact__form.is-spent .contact__row textarea {
  -webkit-text-fill-color: currentColor;
  opacity: 1;
  cursor: default;
}

/* Reduced motion: everything snaps to its end state, nothing animates.
   NB the transitions and the badge float are declared on COMPOUND selectors
   (`.contact__success.is-visible`, 0,2,0 / `.contact__success.is-visible
   .contact__success-badge`, 0,3,0). A media query adds no specificity, so a
   plain `.contact__success` override here loses and the fade plays anyway —
   which is exactly what verification caught. Match the compound form. */
@media (prefers-reduced-motion: reduce) {
  .contact__row { transition: none; }
  .contact__success,
  .contact__success.is-visible { transition: none; }
  .contact__success-badge,
  .contact__success-title,
  .contact__success-sub,
  .contact__success.is-visible .contact__success-badge,
  .contact__success.is-visible .contact__success-title,
  .contact__success.is-visible .contact__success-sub { transition: none; animation: none; }
}

/* =============================================================
   SCROLL REVEAL
   ============================================================= */
.sr-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity   0.65s var(--wp--custom--motion--ease-out),
    transform 0.65s var(--wp--custom--motion--ease-out);
  will-change: transform, opacity;
}
.sr-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .sr-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .contact__finger { animation: none; }
}

/* =============================================================
   PAGE LOADER
   ============================================================= */

/* =============================================================
   FOCUS
   ============================================================= */

/* =============================================================
   SITE HEADER
   ============================================================= */

/* =============================================================
   CONTACT SECTION
   ============================================================= */
.contact {
  padding-inline: var(--wp--custom--layout--gutter);
  padding-block: 3.5rem 6rem;
}
.contact__inner {
  max-width: 1100px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
  align-items: start;
}
.contact__left {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* =============================================================
   TABLET — ≤1023px
   ============================================================= */
@media (max-width: 1023px) {
  .contact {
    padding-block: 4rem 5rem;
  }
  .contact__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 600px;
  }
  /* Tablet headline matches desktop — 4.5rem */
  .contact__finger { width: 88px; }
  .contact__lead   { max-width: 100%; }
}

/* =============================================================
   MOBILE — ≤640px
   ============================================================= */
@media (max-width: 640px) {
  .contact {
    padding-block: 2.5rem 3.5rem;
    padding-inline: clamp(1rem, 5vw, 1.5rem);
  }
  .contact__inner {
    gap: 1.25rem;   /* tighter between left column and card */
    max-width: 100%;
    width: 100%;
  }
  .contact__headline {
    font-size: clamp(2.1rem, 11.5vw, 2.75rem);
    line-height: 0.8421;
    letter-spacing: -0.10763em;
  }
  .contact__finger { width: 64px; }
  .contact__left  { gap: 1.25rem; }   /* was 2.5rem desktop */
  .contact__back  { order: -1; margin-top: -0.5rem; margin-bottom: 0.5rem; }  /* lifted, gap below to headline */
  .contact__lead   { font-size: 1rem; width: min(240px, 88vw); }
  .contact__social-label { font-size: 13px; }
  .contact__trust { margin-top: 0.5rem; }   /* extra gap above trust strip */
  .contact__card  { margin-top: 1.25rem; }   /* increased gap above input card */
  .contact__card   { padding: 1.5rem 1.25rem 1.25rem; margin-inline: 0; box-sizing: border-box; width: 100%; }
  /* Prevent iOS Safari auto-zoom — must be ≥16px on all inputs */
  .contact__input,
  .contact__select,
  .contact__textarea,
  .contact__phone-input,
  .contact__phone-country { font-size: 16px; }
  .contact__row    { grid-template-columns: 1fr; gap: 0.875rem; }
  .contact__field--full { grid-column: auto; }
  .contact__submit { width: 100%; }
}

/* Honeypot — off-screen for bots to find and people never to see. Not
   display:none, which some bots skip; kept focusable-adjacent but out of the
   tab order via tabindex="-1" on the input itself. */
.contact__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__error {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #C4271A;
  margin-top: 0.875rem;
  max-width: 34em;
}