/*
 * NLC-DEV-20260902-01
 * Shared centralized quote and general-contact funnel styles.
 * Consumed by /contact/ and /american-express-payments/ only.
 * Uses the canonical tokens from tokens.css / STYLE.md. Do not introduce
 * a new accent color here.
 */

.nlc-qf {
  max-width: 46rem;
}

.nlc-qf-form {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2rem);
}

/*
 * NLC-DEV-20260909-128: the class rule above's own `display: flex` has the
 * same specificity as the browser's default `[hidden] { display: none }`
 * rule but wins on cascade origin (author beats user-agent), so setting
 * the `hidden` attribute/property alone does not actually hide this form.
 * This explicit, higher-specificity override is what makes the success
 * confirmation state actually replace the form visually, not just in the
 * accessibility tree.
 */
.nlc-qf-form[hidden] {
  display: none;
}

.nlc-qf-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.nlc-qf-section {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/*
 * NLC-DEV-20260904-42: the flex display above is an author rule and
 * always outranks the browser's default [hidden] { display: none }
 * regardless of selector specificity, so every conditional fieldset was
 * silently laid out and exposed to assistive tech at all times,
 * independent of showSection()'s own hidden-attribute toggling. Restore
 * the native behavior explicitly.
 */
.nlc-qf-section[hidden] {
  display: none;
}

.nlc-qf-section > legend {
  font-family: var(--nlc-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nlc-cream-dim);
  padding: 0;
  margin-bottom: 0.5rem;
}

/*
 * NLC-DEV-20260902-12: explicit responsive column counts, replacing the
 * prior auto-fill/minmax behavior so the column count at each breakpoint
 * is deterministic rather than a function of available width.
 * NLC-DEV-20260902-13: added a 3-column exception band from 1024px
 * through 1279px (1024px previously jumped straight to 4 columns). Final
 * plan: 1 column below 640px, 2 columns from 640px through 1023px,
 * 3 columns from 1024px through 1279px, 4 columns at 1280px and above.
 * Gap, card styling, and all other .nlc-qf-intent-grid children are
 * unaffected by this rule.
 */
.nlc-qf-intent-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.nlc-qf-intent-grid--invalid {
  outline: 2px solid var(--nlc-accent-deep);
  outline-offset: 4px;
  border-radius: 3px;
}

@media (min-width: 640px) {
  .nlc-qf-intent-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .nlc-qf-intent-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .nlc-qf-intent-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/*
 * NLC-DEV-20260902-10: elegant selectable-panel treatment. The native
 * <input type="radio"> stays in the DOM, visible, and unmoved -- its own
 * filled/empty dot is already a shape-based (non-color) selected
 * indicator. This adds a left accent bar, a subtle inset ring, and a
 * quiet elevation shift so the selected state reads clearly through
 * border, background, and shape together, never through color alone.
 */
.nlc-qf-intent-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--nlc-rule);
  border-left: 3px solid transparent;
  border-radius: 3px;
  background: var(--nlc-card);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/*
 * NLC-DEV-20260902-16: visually hide the native radio using the standard
 * accessible clip technique -- the input stays in the DOM, in the
 * accessibility tree, unmoved from its label, with its name/value/checked/
 * required behavior, Tab order, and Space/Enter activation completely
 * unchanged. Not display:none or visibility:hidden (both of which would
 * remove it from the accessibility tree and break keyboard activation).
 * Selected/focus state is already conveyed entirely through the card's own
 * :has(input:checked) / :has(input:focus-visible) treatment below, which
 * targets the same real input regardless of its own visual size.
 */
.nlc-qf-intent-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nlc-qf-intent-option:hover {
  border-color: var(--nlc-rule-strong);
  background: var(--nlc-surface);
}

.nlc-qf-intent-option:has(input:checked) {
  border-color: var(--nlc-accent);
  border-left-color: var(--nlc-accent);
  background: var(--nlc-surface);
  box-shadow: inset 0 0 0 1px var(--nlc-accent), 0 2px 6px rgba(7, 110, 198, 0.25);
  transform: translateY(-1px);
}

.nlc-qf-intent-option:has(input:focus-visible) {
  outline: 2px solid var(--nlc-focus);
  outline-offset: 2px;
}

.nlc-qf-intent-option__label {
  font-family: var(--nlc-body);
  font-weight: 600;
  color: var(--nlc-cream);
  padding-right: 1.5rem;
}

.nlc-qf-intent-option__help {
  font-size: 0.85rem;
  color: var(--nlc-cream-dim);
  line-height: 1.4;
}

[data-theme="light"] .nlc-qf-intent-option {
  box-shadow: 0 1px 2px rgba(26, 22, 18, 0.12);
}

[data-theme="light"] .nlc-qf-intent-option:has(input:checked) {
  box-shadow: inset 0 0 0 1px var(--nlc-accent), 0 2px 6px rgba(7, 110, 198, 0.18);
}

/* Fields */
.nlc-qf-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.nlc-qf-fields--two {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .nlc-qf-fields--two {
    grid-template-columns: 1fr 1fr;
  }
}

.nlc-qf-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/*
 * NLC-DEV-20260910-190: same root cause as .nlc-qf-form[hidden] (NLC-DEV-
 * 20260909-128) and .nlc-qf-section[hidden] (NLC-DEV-20260904-42) above --
 * this class's own author-origin `display: flex` always outranks the
 * browser's default [hidden] { display: none }, regardless of selector
 * specificity, so a single conditional field (e.g. Hourly's hidden Trip
 * Pattern) would otherwise still be laid out and exposed to assistive tech
 * despite its `hidden` attribute being set correctly.
 */
.nlc-qf-field[hidden] {
  display: none;
}

.nlc-qf-field__label-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.nlc-qf-field label {
  font-family: var(--nlc-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--nlc-cream);
}

.nlc-qf-field label span {
  font-weight: 400;
  color: var(--nlc-cream-ghost);
}

/*
 * NLC-DEV-20260911-201: the live Pro/pro-child theme ships its own global
 * form-control rules (e.g. integrity-light.css's
 * `input[type="text"], input[type="email"], ...` group, and nlc.css's
 * `[type="text"], ...` group) that tie this rule's specificity
 * (`.nlc-qf-field input` = one class + one element) exactly, so on the
 * live site the theme's later-loaded stylesheet silently won the
 * cascade for text/email/tel/date/etc. inputs and textareas -- while
 * `select` stayed correctly dark, because the theme's competing rule for
 * `select` alone is lower-specificity and could not win. Diagnosed by
 * direct comparison against the live UN General Assembly page and by
 * listing every live stylesheet rule that matches these fields
 * (confirmed live: `input` background/color/border/border-radius/
 * font-size/box-shadow were all theme-controlled; `select` was not).
 * The extra `.nlc-qf` ancestor below is the shared outer wrapper for
 * both the form and its post-submit confirmation state (`.nlc-qf-form`
 * alone would not cover the confirmation screen's own `.nlc-qf-button`
 * controls, which sit as a sibling of the form, not inside it) -- this
 * keeps the fix exclusive to the quote-funnel component (used only on
 * /contact/, /contact-dev/, and /american-express-payments/) without
 * touching any unrelated form, page, or theme default. `box-shadow: none`
 * is added because the theme's inset shadow is a property this rule
 * never declared at all, so no amount of specificity on the properties
 * above would have removed it on its own.
 */
.nlc-qf .nlc-qf-field input,
.nlc-qf .nlc-qf-field select,
.nlc-qf .nlc-qf-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--nlc-surface);
  border: 1px solid var(--nlc-rule);
  border-radius: 2px;
  color: var(--nlc-cream);
  font-family: var(--nlc-body);
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  min-height: 44px;
  box-shadow: none;
}

/*
 * NLC-DEV-20260910-180: the form's default appearance uses a near-black
 * input background (--nlc-surface), but native date/time picker chrome
 * (the calendar/clock trigger icon, the picker popup, spinner controls)
 * renders using the browser's light-mode default unless told otherwise --
 * making the trigger icon hard to see against this dark field. `color-
 * scheme: dark` tells the browser to render that native chrome in its own
 * dark variant instead. Scoped to date/time inputs only, so no other
 * field, and no other native control, is affected. Field type, name,
 * value, validation, and serialization are untouched by this rule --
 * color-scheme only affects rendering of native browser-drawn chrome.
 */
.nlc-qf-field input[type="date"],
.nlc-qf-field input[type="time"] {
  color-scheme: dark;
}

.nlc-qf-field textarea {
  min-height: 7rem;
  resize: vertical;
}

.nlc-qf .nlc-qf-field input:focus-visible,
.nlc-qf .nlc-qf-field select:focus-visible,
.nlc-qf .nlc-qf-field textarea:focus-visible {
  outline: 2px solid var(--nlc-focus);
  outline-offset: 1px;
  border-color: var(--nlc-accent-bright);
}

/*
 * NLC-DEV-20260911-226: prepends the same .nlc-qf ancestor scope already
 * used by the base field rule and the :focus-visible rule above, raising
 * this selector's specificity from (0,2,1) to (0,3,1) -- one point higher
 * than the light-theme override rule below ([data-theme="light"]
 * .nlc-qf-field input, select, textarea, also (0,2,1)), which otherwise
 * wins this exact tie purely by appearing later in the file. This is the
 * same fix shape :focus-visible already relies on (its own extra
 * pseudo-class raises it to (0,3,1) for the identical reason), confirmed
 * as the root cause and the smallest correction in the -225 preflight,
 * Part B. No color token, no property value, and no rule order changed --
 * only the selector's own specificity. textarea is added here for the
 * first time (no required field had ever been a textarea before), closing
 * the same coverage gap already closed for the near-limit rule below.
 */
.nlc-qf .nlc-qf-field.nlc-qf-field--incomplete input,
.nlc-qf .nlc-qf-field.nlc-qf-field--incomplete select,
.nlc-qf .nlc-qf-field.nlc-qf-field--incomplete textarea {
  border-color: var(--nlc-accent-deep);
}

.nlc-qf-field--incomplete label {
  color: var(--nlc-accent);
}

/*
 * NLC-DEV-20260911-224: near-limit character-count warning border, kept as
 * its own distinct class rather than reusing .nlc-qf-field--incomplete --
 * "getting long" and "missing" are different states that happen to share
 * the same accent-deep token and the same .nlc-qf-field__required-note
 * message slot (see quote-funnel.js), but keeping the class name distinct
 * avoids the two states' rules ever needing to be disentangled later.
 * Includes textarea explicitly: the existing .nlc-qf-field--incomplete
 * rule above never needed it (no required field has ever been a
 * textarea), but four of this feature's five long-field targets
 * (review_request_notes, question_text, program_details,
 * additional_details) are textareas -- confirmed as a real gap in the
 * -223 preflight, Section 4. select is included for the same shape as the
 * existing --incomplete rule, even though no current character-limit
 * field is a <select>.
 */
/*
 * NLC-DEV-20260911-226: same .nlc-qf ancestor-scoping fix as the
 * incomplete-border rule above, for the identical (0,2,1)-vs-(0,2,1)
 * specificity tie against the light-theme override rule below -- see the
 * -225 preflight, Part B, for the full diagnosis. New specificity (0,3,1).
 */
.nlc-qf .nlc-qf-field.nlc-qf-field--near-limit input,
.nlc-qf .nlc-qf-field.nlc-qf-field--near-limit select,
.nlc-qf .nlc-qf-field.nlc-qf-field--near-limit textarea {
  border-color: var(--nlc-accent-deep);
}

.nlc-qf-field__required-note {
  font-family: var(--nlc-body);
  font-size: 0.9rem;
  color: var(--nlc-accent);
  font-weight: 600;
}

.nlc-qf-field__help {
  margin: 0;
  font-size: 0.8rem;
  color: var(--nlc-cream-ghost);
}

/*
 * NLC-DEV-20260903-21: required-field legend and per-label asterisk. The
 * asterisk is a real "*" character, not a color swatch, so meaning is
 * never conveyed by color alone; accent color is a supplementary cue only.
 * Visibility of each .nlc-qf-field__required-mark is fully driven by
 * syncRequiredIndicators() reading the field's own native `required`
 * attribute -- no CSS here decides which fields are required.
 */
.nlc-qf-required-legend {
  margin: -0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--nlc-cream-ghost);
}

.nlc-qf-required-legend__mark,
.nlc-qf-field__required-mark {
  color: var(--nlc-accent-bright);
  font-weight: 700;
}

.nlc-qf-field__required-mark {
  margin-left: 0.3rem;
}

/*
 * NLC-DEV-20260903-23: .nlc-qf-field label span (specificity 0,1,2) was
 * overriding the shared required-mark color/weight above (0,1,0) on every
 * field-level marker, since field() appends the mark as a child of the
 * field's own <label>. Re-asserted here with a field-label-scoped
 * selector (0,2,1) so it wins without !important. Legend markers (never
 * descendants of .nlc-qf-field label) are unaffected by this rule.
 */
.nlc-qf-field label .nlc-qf-field__required-mark {
  color: var(--nlc-accent-bright);
  font-weight: 700;
}

.nlc-qf-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: var(--nlc-body);
  font-size: 0.9rem;
  color: var(--nlc-cream-dim);
  cursor: pointer;
}

.nlc-qf-check input {
  margin-top: 0.2rem;
  accent-color: var(--nlc-accent);
  min-width: 18px;
  min-height: 18px;
}

/* Stops repeater */
.nlc-qf-stops-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.nlc-qf-stop-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.6rem;
}

.nlc-qf-stop-row label {
  grid-column: 1 / -1;
  font-family: var(--nlc-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--nlc-cream);
}

/*
 * NLC-DEV-20260911-201: same theme-specificity-tie problem and same
 * `.nlc-qf` scoping rationale as the primary field rule above -- this
 * selector is the same shape (`.nlc-qf-stop-row input` = one class + one
 * element) and matches the same theme text-input rule, so it carries
 * the identical risk even though the Multi-stop repeater row is hidden
 * by default and was not the field directly reported as broken.
 */
.nlc-qf .nlc-qf-stop-row input {
  background: var(--nlc-surface);
  border: 1px solid var(--nlc-rule);
  border-radius: 2px;
  color: var(--nlc-cream);
  font-family: var(--nlc-body);
  padding: 0.65rem 0.8rem;
  min-height: 44px;
  box-shadow: none;
}

/* Payment preference */
.nlc-qf-payment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

@media (max-width: 960px) {
  .nlc-qf-payment-grid {
    grid-template-columns: 1fr;
  }
}

.nlc-qf-payment-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--nlc-rule);
  border-radius: 2px;
  background: var(--nlc-card);
  font-family: var(--nlc-body);
  font-size: 0.9rem;
  color: var(--nlc-cream-dim);
  cursor: pointer;
}

.nlc-qf-payment-option span {
  flex: 1 1 auto;
  min-width: 0;
}

.nlc-qf-payment-mark {
  height: 1rem;
  width: auto;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.nlc-qf-payment-option input {
  accent-color: var(--nlc-accent);
  min-width: 18px;
  min-height: 18px;
}

.nlc-qf-payment-option:has(input:checked) {
  border-color: var(--nlc-accent);
  background: var(--nlc-surface);
  color: var(--nlc-cream);
}

.nlc-qf-payment-option:has(input:focus-visible) {
  outline: 2px solid var(--nlc-focus);
  outline-offset: 2px;
}

/* Quote boundary note */
.nlc-qf-note {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.1rem;
  border-left: 2px solid var(--nlc-rule-strong);
  background: var(--nlc-surface);
  font-family: var(--nlc-body);
  font-size: 0.9rem;
  color: var(--nlc-cream-dim);
}

.nlc-qf-note strong {
  color: var(--nlc-cream);
}

/* Actions + status */
.nlc-qf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/*
 * NLC-DEV-20260911-201: same theme-specificity-tie problem as the field
 * fix above. The live theme's `.x-btn, .button, [type="submit"]` rule
 * (integrity-light.css, plus a matching inline <style> block) matches
 * this component's own [type="submit"] primary button at the exact same
 * specificity as `.nlc-qf-button`/`.nlc-qf-button--primary` alone, and
 * loads later -- confirmed live via computed-style inspection showing
 * theme padding/font-size/border-radius/background/color/border-color
 * (and an added box-shadow + text-shadow neither of these rules ever
 * declared) on the live submit button. Only `[type="submit"]` elements
 * are matched by that theme rule, so `.nlc-qf-button--quiet` controls
 * (type="button", e.g. "+ Add a stop") were never actually affected --
 * this fix does not change their behavior, only their now-redundant
 * specificity margin. See the field-rule comment above for why `.nlc-qf`
 * (not `.nlc-qf-form`) is the correct scoping ancestor: the post-submit
 * confirmation screen's own "Return to Homepage" / "Start a New Request"
 * controls reuse these same button classes but sit outside `.nlc-qf-form`
 * as a sibling, so they need to stay covered too.
 */
.nlc-qf .nlc-qf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border-radius: 2px;
  font-family: var(--nlc-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  cursor: pointer;
  box-shadow: none;
  text-shadow: none;
}

.nlc-qf .nlc-qf-button--primary {
  background: var(--nlc-accent);
  color: #ffffff;
  border-color: var(--nlc-accent);
}

.nlc-qf .nlc-qf-button--primary:hover,
.nlc-qf .nlc-qf-button--primary:focus-visible {
  background: var(--nlc-accent-deep);
  border-color: var(--nlc-accent-deep);
}

.nlc-qf .nlc-qf-button--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.nlc-qf .nlc-qf-button--quiet {
  background: transparent;
  color: var(--nlc-cream-dim);
  border-color: var(--nlc-rule-strong);
}

.nlc-qf .nlc-qf-button--quiet:hover,
.nlc-qf .nlc-qf-button--quiet:focus-visible {
  color: var(--nlc-accent-bright);
  border-color: var(--nlc-accent-bright);
}

.nlc-qf .nlc-qf-button--quiet:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nlc-qf .nlc-qf-button--small {
  min-height: 36px;
  padding: 0.4rem 0.9rem;
  font-size: 0.75rem;
}

.nlc-qf .nlc-qf-button:focus-visible {
  outline: 2px solid var(--nlc-focus);
  outline-offset: 2px;
}

.nlc-qf-status {
  font-family: var(--nlc-body);
  font-size: 0.9rem;
  min-height: 1.4rem;
}

.nlc-qf-status[data-state="error"] {
  color: var(--nlc-accent-deep);
}

@media (max-width: 640px) {
  .nlc-qf-actions {
    flex-direction: column;
  }

  .nlc-qf-status {
    order: -1;
  }
}

.nlc-qf-status[data-state="unavailable"] {
  color: var(--nlc-accent-bright);
}

/*
 * NLC-DEV-20260909-128: one-column success confirmation, replacing the
 * form entirely once storage is confirmed. Uses the same tokens, card
 * treatment, and button classes as the rest of this form -- no new
 * accent color, no new spacing scale.
 */
.nlc-qf-confirmation {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 100%;
  padding: 1.75rem 1.75rem 2rem;
  border: 1px solid var(--nlc-rule);
  border-radius: 3px;
  background: var(--nlc-card);
}

.nlc-qf-confirmation[hidden] {
  display: none;
}

.nlc-qf-confirmation__heading {
  margin: 0;
  font-family: var(--nlc-heading);
  font-size: clamp(1.35rem, 2.4vw, 1.6rem);
  color: var(--nlc-cream);
}

.nlc-qf-confirmation__body {
  margin: 0;
  max-width: 34rem;
  font-family: var(--nlc-body);
  color: var(--nlc-cream-dim);
  line-height: 1.6;
}

.nlc-qf-confirmation__actions {
  margin-top: 0.25rem;
}

@media (max-width: 640px) {
  .nlc-qf-confirmation__actions {
    flex-direction: column;
  }
}

/* Light theme */
[data-theme="light"] .nlc-qf-intent-option,
[data-theme="light"] .nlc-qf-payment-option {
  background: var(--nlc-card);
  border-color: var(--nlc-rule);
}

[data-theme="light"] .nlc-qf-field input,
[data-theme="light"] .nlc-qf-field select,
[data-theme="light"] .nlc-qf-field textarea,
[data-theme="light"] .nlc-qf-stop-row input {
  background: var(--nlc-surface);
  color: var(--nlc-cream);
  border-color: var(--nlc-rule);
}

/*
 * NLC-DEV-20260910-180: under the light theme, --nlc-surface switches to a
 * warm-light background, so the dark-scoped native chrome above would be
 * wrong here. Explicitly restore light-mode native chrome for the same
 * two field types, so this fix never leaks into the light theme.
 */
[data-theme="light"] .nlc-qf-field input[type="date"],
[data-theme="light"] .nlc-qf-field input[type="time"] {
  color-scheme: light;
}

[data-theme="light"] .nlc-qf-status[data-state="unavailable"] {
  color: var(--nlc-accent-deep);
}

@media (max-width: 480px) {
  .nlc-qf-stop-row {
    grid-template-columns: 1fr;
  }

  .nlc-qf-stop-row button {
    justify-self: start;
  }
}

/*
 * NLC-DEV-20260902-02: opt-in wide modifier, paired with the shared
 * .nlc-service__*--wide modifiers, so a text-led utility page (e.g.
 * Contact) can let the intent grid and form use the full wide shell width
 * instead of the default narrow single-column measure. Opt-in only --
 * .nlc-qf without this class is unchanged.
 */
.nlc-qf--wide {
  max-width: min(80rem, 100%);
}

/*
 * NLC-DEV-20260902-08/09: scoped spacing so the CTA row reads naturally in
 * its Start Here location, between the explanatory paragraph and the
 * intent-selection cards. Scoped to the Contact page's own modifier class
 * only -- does not touch the shared .nlc-service__actions default used
 * elsewhere (e.g. the hero action rows on image-led pages), and does not
 * modify shared/service-page.css. The bottom value was widened under
 * NLC-DEV-20260902-09 for a slightly more modest, intentional gap before
 * "WHAT DO YOU NEED?".
 */
.nlc-service__actions--start-here {
  margin: 1.5rem 0 3rem;
}

/*
 * NLC-DEV-20260902-09: the informational AMEX asset inside the Start Here
 * CTA row. Sized to the adjacent secondary button's min-height
 * (3.35rem, shared/service-page.css .nlc-service__button) with width left
 * to `auto` so the browser scales the image proportionally from its
 * native 300x73 dimensions -- no distortion, no crop, no filter, no
 * replacement asset.
 */
.nlc-service__amex-inline-link {
  align-items: center;
  display: inline-flex;
}

.nlc-service__amex-inline-link img {
  display: block;
  height: 3.35rem;
  width: auto;
}