.ctc.v2 {
  /* -- module-local tokens (px / 18) ------------------------------------- */
  --ctc-v2-crd-pd: 1.778rem;          /* 32px card padding (artifact p-[32px]) */
  --ctc-v2-grp-gap: 1.333rem;         /* 24px gap between field groups */
  --ctc-v2-fld-rds: 0.444rem;         /* 8px field radius (artifact rounded-[8px]) */
  --ctc-v2-pill-rds: 1.611rem;        /* 29px pill radius */
  --ctc-v2-col-gap: 0.556rem;         /* 10px between the two field columns (artifact gap-[10px]) */
  position: relative;

  /* Trim the gap to the banner above: halve the section's TOP padding only
     (bottom padding stays full, driven by the base pd_v). This uses the design
     system's "-30" half-padding value, but applied here so it ALSO reduces on
     mobile — the pd_v-30 utility only kicks in at ≥700px. */
  padding-block-start: clamp(calc(var(--sp-vp-min) * 0.5), var(--sp-vp), calc(var(--sp-vp-max) * 0.5));

  /* The card surface inside the orange (alternate-dark) section flips to the
     cream inner surface via .bg-bx.ulk-bg (artifact bg-[var(--lt-bg)]). In that flip
     scope --inner-theme is cream, --background is lime, --link-color is rust,
     --text-color is dark ink. Semantic tokens only, no raw colors. */
  .ctc-crd {
    padding: var(--ctc-v2-crd-pd);
    position: relative;
    z-index: 1;
  }

  /* Heading — Archivo black 64px, leading 0.9. No eyebrow / subhead / body.
     fnt_t-1 ramp lands elsewhere; pin to the exact artifact display size. The
     near-black title color is already correct on the cream card. */
  .ctc-hd.fnt_t-1 {
    line-height: 1; /* was 0.9 — policy: never < 1 */
    /* Title renders in its literal .cnd casing (title case: "Squash the Problem"). */
    margin-block-end: var(--ctc-v2-grp-gap);
  }

  /* The form now uses the shared utility-class field pattern (ul.flx-at-700 f_wrp
     gp_sp-sml > li.half/li.full > div.input-text), matching ContactV1 — so the
     bespoke .ctc-fields / .ctc-row gap hooks are gone and fields sit on the standard
     gp_sp-sml gutter. Visible labels (.fld-lbl) are kept (the contact-page artifact
     shows them, unlike the placeholder-only inline contact panels). */

  /* -- Visible field labels --------------------------------------------- */
  /* Artifact: SUSE 13px, uppercase, tracking 0.26px, near-black, sitting
     8px above each white field. */
  .fld-lbl {
    display: block;
    margin-block-end: 0.444rem;        /* 8px label→field gap */
    font-family: var(--fnt-m);
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--text-color);
  }

  /* -- Form fields ------------------------------------------------------- */
  .input-text {
    /* Artifact: pure white field face, 1px dark border, 8px radius, 36px tall. */
    :is(input, select, textarea) {
      background: var(--white);
      border-color: var(--text-color);
      border-width: 1px;
      border-radius: var(--ctc-v2-fld-rds);
    }

    :is(input, select):not([type="radio"]) {
      min-height: 2rem;                /* 36px */
    }

    :is(input, select, textarea)::placeholder {
      color: var(--text-color);
      opacity: 0.6;
    }

    textarea {
      min-height: 4.333rem;            /* 78px */
    }

    /* AddressAutocomplete ships an .abs floating label; hide it. This field already has a
       visible "FULL ADDRESS" label above (fld-lbl, also for="Address"), so the floating
       "Address" would read as a placeholder. (V2's other fields use fld-lbl, not .abs.) */
    label.abs {
      opacity: 0;
      pointer-events: none;
    }
  }

  /* Textarea label row: title left, note right (artifact justify-between). */
  .msg-lbl {
    margin-block-end: 0.444rem;        /* 8px */
  }

  .msg-note {
    flex: 1 0 0;
    min-width: 0;
    text-align: right;
  }

  /* -- Submit button ----------------------------------------------------- */
  /* Artifact: lime "Send it" CTA with dark ink on the cream card. This orange
     section's alternate-dark button rule paints the dark-surface treatment;
     restore the light treatment here on the cream .ulk-bg card. Lime fill via
     the palette-independent --lime token; dark ink = --text-color. */
  fieldset .btn.v1 {
    /* Artifact button is full-width (w-full) with centred label+arrow. */
    width: 100%;
    justify-content: center;
    border-color: var(--text-color);
    box-shadow:
      4px 6px 0 -1.5px var(--btn-bg),
      4px 6px 0 0 var(--text-color);

    @media (hover: hover) and (pointer: fine) {
      &:is(a:hover, a:focus-visible),
      a:is(:hover, :focus-visible) & {
        box-shadow:
          1px 2px 0 -1.5px var(--btn-bg),
          1px 2px 0 0 var(--text-color);
      }
    }
  }

  /* -- Post-button reassurance note (artifact ButtonArea, below the button) -- */
  /* Column with the lime button on top + the reassurance note line
     centred beneath it (artifact items-center, gap-[16px]). The note reuses
     the field-label type ramp; clear the label bottom-margin so the 16px
     column gap is the only spacing, and centre it. */
  .ctc-reply {
    margin-block-end: 0;
    text-align: center;
  }

  /* ══ Two-column layout (artifact RContactAccent: justify-between) ════════ */
  /* LEFT form w-661, RIGHT info w-939 within the 1632 content frame. */
  .ctc-v2-row {
    align-items: stretch;
    --flx-gap: 1.778rem;                /* 32px between the two columns */
  }

  .ctc-v2-form {
    flex: 0 1 40.5%;                    /* 661 / 1632 */
    border-color: var(--text-color);   /* solid dark border (artifact #0d0f0c) */
  }

  .ctc-v2-info {
    flex: 1 1 0;                        /* 939 / 1632 (wider) */
    --flx-gap: 1.778rem;               /* 32px between the just-call + values cards */
  }

  /* ── RIGHT: "// Just call" card — data-colors="primary-dark" paints the
     near-black surface (artifact #171b14) + white ink; lime status accents. ── */
  .ctc-cta-card {
    display: flex;
    flex-direction: column;
    gap: 0.889rem;                      /* 16px */
    padding: 1.333rem 1.778rem;         /* 24px 32px */
    border-color: var(--text-color);    /* near-black border (artifact #0d0f0c) */
  }

  .ctc-cta-eyebrow {
    margin: 0;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--text-color);           /* white on the near-black card */
  }

  .ctc-cta-phone {
    font-family: var(--fnt-t);          /* Archivo */
    line-height: 1; /* was 0.9 — policy: never < 1 */
    color: var(--text-color);
    text-decoration: none;
    white-space: nowrap;
  }

  /* ── RIGHT: "// values" near-white card (artifact #f4efe6 → --lt-bg) ───── */
  .ctc-values-card {
    padding: 1.778rem;                  /* 32px */
    /* surface via .bg-bx (innerColors) — no hardcoded background */
    border-color: var(--text-color);    /* solid dark border */
  }

  .ctc-values-eyebrow {
    margin: 0 0 0.889rem;               /* 16px gap to list */
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--text-color);
  }

  .ctc-values-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.889rem;                      /* 16px */
  }

  /* each value: title over description, dashed divider between rows */
  .ctc-values-item {
    display: flex;
    flex-direction: column;
    gap: 0.222rem;                      /* 4px title→desc */
    padding-block-end: 0.889rem;        /* 16px */
    border-block-end: 1px dashed hsl(from var(--callout) h s l / 0.25);
  }

  .ctc-values-item:last-child {
    border-block-end: 0;
    padding-block-end: 0;
  }

  .ctc-values-title {
    font-family: var(--fnt-t);          /* Archivo */
    line-height: 1.2;
    color: var(--text-color);
  }

  .ctc-values-desc {
    margin: 0;
    line-height: 1.4;
    color: var(--text-color);
  }

  /* -- Desktop-only display overrides (deliberate artifact sizes with no
       close ramp match) -------------------------------------------------- */
  @media (min-width: 1280px) {
    .fld-lbl {
      font-size: 0.722rem;              /* 13px */
    }

    .ctc-cta-phone {
      font-size: 3.556rem;              /* 64px */
    }
  }
}