/* ════════════════════════════════════════════════════════════════════════════
   ContactV3 — SERVICES page contact ("R Contact - Dark", artifact L5734)
   Forest-green section (primary-dark + .srf-forest) + darkened photo overlay.
   LEFT: heading lockup on the forest bg (WHITE text, LIME flair + accent), NOT
   inside a card (artifact TextBox6). RIGHT: cream form card with a rotated RUST
   phone sticker floating over its top. Distinct from ContactV1 (homepage), whose
   intro sits INSIDE the cream card on the orange band. Semantic tokens; px ÷18.
   ════════════════════════════════════════════════════════════════════════════ */
.ctc.v3 {
  --ctc-v3-pill-rds: 1.611rem;       /* 29px pill radius */
  --ctc-v3-stkr-rot: -4deg;          /* artifact: -rotate-4 */
  --flx-gap: 3.333rem;               /* 60px column gap */

  position: relative;
  overflow: clip;

  /* Artifact: 1px top hairline (var(--lt-txt)) separating from the panel above. */
  border-block-start: var(--bdr-w) var(--bdr-stl) hsl(from var(--bdr-clr) h s l / var(--bdr-clr-o));

  /* -- Darkened background photo over the forest surface ------------------ */
  /* Artifact: bg var(--lt-callout) (.srf-forest) + photo opacity-15 + a mix-blend-multiply
     opacity-20 darkening pass. Decorative → role=presentation in markup. */
  .ctc-v3-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: clip;
  }

  .ctc-v3-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;               /* full-bleed PNG → override global contain */
    opacity: 0.15;
    mix-blend-mode: multiply;
  }

  .mn_wd {
    position: relative;
    z-index: 1;
  }

  /* -- Left intro on the forest bg (white text, lime flair + accent) ------- */
  .ctc-intro {
    /* Artifact: Archivo black 88px, leading 0.9, tracking -1.76px. No close
       ramp match — mobile rides fnt_t-1, desktop pins the exact display
       size below (>=1280). */
    .fnt_t-1 {
      max-width: 14ch;
      line-height: 1; /* was 0.9 — policy: never < 1 */
    }

    /* "FITS?" accent → lime. On primary-dark --link-color is lime; the accent
       flows inline after a space like the artifact (not forced to its own line). */
    .fnt_t-1 .clr-lnk {
      color: var(--link-color);
    }

    /* Tagline (SubHeader) — SUSE bold 32px, white (primary-dark --text-color).
       No close ramp match — mobile rides fnt_t-5, desktop pins the exact
       size below (>=1280). */
    .fnt_t-5 {
      line-height: 1;
    }

    /* Body — SUSE 16px, white, max 640px (artifact). */
    p:not(.fnt_t-5) {
      max-width: 35.556rem;          /* 640px */
    }

    @media screen and (min-width: 1280px) {

      .fnt_t-5 {
        font-size: 1.778rem;           /* 32px */
      }
    }
  }

  /* -- Right column: form card + floating sticker ------------------------- */
  .ctc-v3-formwrap {
    position: relative;
  }

  /* Cream form card (artifact ContactForm var(--lt-bg), border var(--lt-txt), hard 4px/6px
     black offset shadow, rounded-16). Painted explicitly + dark text scope so it
     reads dark-on-cream regardless of the section's primary-dark palette
     (deterministic — no .bg-bx/.ulk-bg flip dependency). */
  .ctc-v3-card {
    position: relative;
    z-index: 1;
    /* Surface + ink come from .bg-bx / the palette (innerColors) — theme-aware,
       no forced values (so an innerColors flip stays readable in any theme). */
    border-radius: var(--bdr-rds);     /* 16px (override crd's 1rem; border via .crd-bdr-thc, shadow via .bx-sdw) */
    padding: 1.778rem;                 /* 32px — top bumped ≥1280 to clear sticker */
  }

  /* -- Rotated RUST phone sticker ----------------------------------------- */
  .phn-stkr {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin-block-end: -1.778rem;       /* -32px overlap onto the card */
    pointer-events: none;

    > div {
      transform: rotate(var(--ctc-v3-stkr-rot));
      pointer-events: auto;
    }

    /* Artifact StickerCallout: bg rust, white ink, p-24 / gap-16. Deliberate off-palette
       brand color — pinned rust because on this forest (primary-dark) section the semantic
       --link-color resolves to LIME. Same documented exception class as the footer orange. */
    .phn-stkr-fc {
      background: var(--lt-lnk);
      color: var(--white);
      padding: 1.333rem;               /* 24px */
      gap: 0.889rem;                   /* 16px */
    }

    /* "CALL" — SUSE 16px, uppercase, tracking 4px, white. Strip fnt_t-k color
       ramp; no close size match — mobile rides fnt_t-k, desktop pins the
       exact px below (>=1280). */
    .fnt_t-k {
      align-self: center;
      --title-color: var(--white);
      color: var(--white);
    }

    /* Phone — Archivo black 64px, white. No close ramp match — mobile rides
       fnt_phn, desktop pins the exact display size below (>=1280). */
    a {
      color: var(--white);
      text-decoration: none;
      line-height: 1; /* was 0.9 — policy: never < 1 */
      white-space: nowrap;
    }
  }

  @media screen and (min-width: 1280px) {
    .phn-stkr {
      position: absolute;
      inset-block-start: -3rem;
      inset-inline-start: 1.778rem;    /* over the form card's top-left */
      margin-block-end: 0;
      justify-content: flex-start;

      .fnt_t-k {
        font-size: 0.889rem;           /* 16px */
      }

      a {
        font-size: 3.556rem;           /* 64px */
      }
    }

    /* Artifact ContactForm pt-112 so the first field row clears the sticker. */
    .ctc-v3-card {
      padding-block-start: 6.222rem;   /* 112px */
    }
  }

  /* Visible field labels above each field (matches ContactV2). Artifact: SUSE 13px,
     uppercase, tracking 0.26px, near-black, 8px above the 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);
  }

  /* Artifact: field label — SUSE 13px, uppercase, tracking 0.26px. No close
     ramp match — mobile rides fnt_t-nt (added to Fieldset's labelClass),
     desktop pins the exact size below (>=1280). */
  @media screen and (min-width: 1280px) {
    .fld-lbl {
      font-size: 0.722rem;             /* 13px */
    }
  }

  /* -- Form fields (same treatment as ContactV1) -------------------------- */
  .input-text {
    label.abs {
      opacity: 0;
      pointer-events: none;
    }

    .msg-lbl {
      opacity: 1;
      pointer-events: auto;
    }

    .msg-note {
      text-align: right;
    }

    :is(input, select, textarea) {
      background: var(--inner-theme);
      border-color: var(--text-color);
      border-width: 1px;
    }

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

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

  /* "Are you a new customer?" prompt — artifact var(--lt-txt) near-black (L5033), NOT
     the forest green the fnt_t-k ramp injects at the element level via
     --title-color. Re-pin to dark ink (keeps fnt_t-k's uppercase + 4px tracking). */
  .ctc-v3-card .fnt_t-k {
    --title-color: var(--text);
    color: var(--text);
  }

  /* -- New / Returning customer pills ------------------------------------- */
  .ctc-opts .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.444rem 0.889rem;        /* 8px / 16px */
    border: 2px solid var(--text-color);
    border-radius: var(--ctc-v3-pill-rds);
    cursor: pointer;
    transition: background var(--btn-trn-sp) var(--btn-trn-tf),
                color var(--btn-trn-sp) var(--btn-trn-tf);

    input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    &:has(input:checked) {
      background: var(--text-color);
      color: var(--lt-bg);
    }
  }

  /* -- Submit button: lime fill, dark ink on the cream card --------------- */
  
}