/* ============================================================
   Pick One · Contact Us Page Refinement Layer
   ------------------------------------------------------------
   Loaded after contact.css and pick-one-ds.css.

   This refinement layer enforces:
     1 · Container lock & consistent section vertical rhythm
     2 · 60/40 grid alignment between support form & sidebar
     3 · Equal-height trust badge cards and clean sidebar cards
     4 · Anti-slop typography & river elimination on narrow text
     5 · High contrast WCAG AA validation & 44px+ tap targets
   ============================================================ */

/* ---------- 1 · Container & Section Rhythm ------------------- */
.contact-page .wrap,
.contact-page .container {
  width: 100%;
  max-width: var(--container-max-w, 80rem);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.contact-page .contact-hero {
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6.5rem);
  background:
    radial-gradient(100% 70% at 85% 15%, rgba(252, 189, 76, 0.14) 0%, rgba(252, 189, 76, 0) 50%),
    radial-gradient(90% 70% at 10% 90%, rgba(240, 104, 88, 0.1) 0%, rgba(240, 104, 88, 0) 55%),
    linear-gradient(180deg, #fffdf9 0%, var(--cream, #fef8ec) 100%);
}

.contact-page .contact-faq-section {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background-color: #ffffff;
}

.contact-page .contact-trust-section {
  padding-block: clamp(3rem, 6vw, 5rem);
  background-color: var(--cream, #fef8ec);
}

/* ---------- 2 · Hero Header & SLA Badge ---------------------- */
.contact-page .contact-hero__header {
  max-width: 48rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.contact-page .contact-eyebrow {
  display: inline-block;
  margin-bottom: 0.875rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  background: var(--surface-peach, #fcece5);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-coral-ink, #b8402d);
}

.contact-page .contact-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink, #1a1a1a);
  margin-bottom: 1.25rem;
  text-wrap: balance;
}

.contact-page .contact-hero__lead {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.6;
  color: var(--body, #302f2e);
  margin-bottom: 1.5rem;
}

.contact-page .sla-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.125rem;
  border-radius: var(--radius-full);
  background: #ffffff;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-subtle);
  font-size: 0.875rem;
  color: var(--body, #302f2e);
}

.contact-page .sla-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: var(--surface-peach, #fcece5);
  color: var(--accent-coral-ink, #b8402d);
  flex-shrink: 0;
}

/* ---------- 3 · 60/40 Layout Grid ---------------------------- */
.contact-page .contact-layout-grid {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 58rem) {
  .contact-page .contact-layout-grid {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
  }
}

.contact-page .contact-card {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.contact-page .contact-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink, #1a1a1a);
  margin-bottom: 0.5rem;
}

.contact-page .contact-card__subtitle {
  font-size: 0.9375rem;
  color: var(--muted, #6e6b67);
  margin-bottom: 1.75rem;
}

/* ---------- 4 · Sidebar & Signature Frosted Glass ------------ */
.contact-page .contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-page .sidebar-card {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-subtle);
  padding: 1.35rem 1.5rem;
}

.contact-page .visual-mockup-frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.contact-page .mockup-floating-pill {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.9);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
  box-shadow: 0 4px 16px rgba(26, 26, 26, 0.12);
}

/* ---------- 5 · Trust Badges Grid --------------------------- */
.contact-page .trust-badges-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  align-items: stretch;
}

.contact-page .trust-badge-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-subtle);
}

.contact-page .trust-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--surface-peach, #fcece5);
  color: var(--accent-coral-ink, #b8402d);
  flex-shrink: 0;
}

.contact-page .trust-badge-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink, #1a1a1a);
  margin: 0 0 0.35rem;
}

.contact-page .trust-badge-desc {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted, #6e6b67);
  margin: 0;
}

/* ---------- 6 · Justified Text & Rivers Fix ------------------ */
.contact-page :is(
  .contact-hero__lead, .sla-badge__content, .contact-card__subtitle,
  .form-hint, .form-privacy-note, .success-message, .ticket-row, .success-subtext,
  .channel-desc, .quicklinks-list a,
  .faq-answer-content p, .faq-q-text, .trust-badge-desc, .trust-badge-title
) {
  text-align: start;
  text-align-last: auto;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* ---------- 7 · Interactive Elements & Tap Targets ----------- */
.contact-page :is(
  .btn, .category-pill, .btn-copy-email, .faq-question-btn, .quicklink-item, a
) {
  cursor: pointer;
}

.contact-page .category-pill {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-card);
  background: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--body, #302f2e);
  transition: all 0.2s var(--ease);
}

.contact-page .category-pill:hover,
.contact-page .category-pill.active {
  border-color: var(--coral, #f06858);
  color: var(--coral-ink, #b8402d);
  background: var(--terracotta-light, #fdeeeb);
}

/* ============================================================
   Follow-up pass (Finn, iteration 58)
   ============================================================ */

/* contact.css centres this pill with `left:50%` plus
   `transform: translateX(-50%)`. The rule above re-points `left` to
   1rem but never clears the transform, so the pill kept sliding half
   its own width further left and its first word was clipped off by
   the frame. Clear the transform and cap the width. */
.contact-page .mockup-floating-pill {
  transform: none;
  right: auto;
  max-width: calc(100% - 2rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Viewport pass (2026-08-31) --------------------------------
   The hero block (headline + form + sidebar) measured 1,595px. The
   "Rapid Response" micro-badge, the phone-mockup card and the three
   self-service links (all pointing at the FAQ below) are gone from the
   markup; what is left is the form and the two channels people use. */
.contact-page .contact-hero { padding-block: clamp(2rem, 3.5vw, 3rem) clamp(2.5rem, 4vw, 3.5rem) !important; }
.contact-page .contact-hero__header { margin-bottom: 1.5rem !important; }
.contact-page .contact-hero__title { font-size: clamp(2rem, 3.4vw, 2.75rem) !important; margin-bottom: 0.5rem !important; }
.contact-page .contact-hero__lead { font-size: 1rem !important; }
.contact-page .contact-form-card { padding: clamp(1.25rem, 2.2vw, 1.75rem) !important; }
.contact-page .contact-card__header { margin-bottom: 1rem !important; }
.contact-page .contact-card__title { font-size: 1.35rem !important; }
.contact-page .contact-form { gap: 0.9rem !important; }
.contact-page .form-group { gap: 0.3rem !important; }
.contact-page .category-pills { gap: 0.4rem !important; }
.contact-page .category-pill { padding: 0.45rem 0.8rem !important; }
.contact-page .form-input, .contact-page .floating-input { padding-block: 0.75rem !important; }
.contact-page .form-hint { margin-top: 0.15rem !important; font-size: 0.8rem !important; }
.contact-page .form-privacy-note { margin-top: 0.5rem !important; }
.contact-page .btn--submit { margin-top: 0.25rem !important; }
.contact-page .sidebar-card { padding: 1.1rem 1.25rem !important; }
.contact-page .contact-sidebar { gap: 0.9rem !important; display: grid; align-content: start; }

/* Client's 13_Contact Us.pdf: intro + contact info on the left, the form
   on the right. The stacked centred header is gone, so the block fits
   one screen. Specificity beats the DS centred-header standard. */
html body.contact-page .contact-layout-grid { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
@media (min-width: 60rem) {
  html body.contact-page .contact-layout-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 3vw, 3rem); }
  html body.contact-page .contact-form-container { order: 2; }
  html body.contact-page .contact-intro { order: 1; }
  html body.contact-page .contact-sidebar { order: 1; grid-column: 1; }
  html body.contact-page .contact-intro { grid-column: 1; }
  html body.contact-page .contact-form-container { grid-column: 2; grid-row: 1 / span 2; }
}
html body.contact-page .contact-hero__header,
html body.contact-page .contact-hero__header .contact-hero__title,
html body.contact-page .contact-hero__header .contact-hero__lead {
  text-align: start !important;
  margin-inline: 0 !important;
  max-width: none !important;
}
html body.contact-page .contact-hero__header { margin-bottom: 0 !important; }
html body.contact-page .contact-hero__title { font-size: clamp(1.9rem, 3vw, 2.5rem) !important; }
html body.contact-page .contact-hero__lead { font-size: 1rem !important; max-width: 44ch !important; }
html body.contact-page .form-textarea { min-height: 6rem !important; }
html body.contact-page .btn--submit { padding-block: 0.85rem !important; }
/* 997px after the two-column move. The eyebrow survived a later sheet;
   the card subtitle is filler; the button was fat. */
html body.contact-page .contact-eyebrow { display: none !important; }
html body.contact-page .contact-card__subtitle { display: none !important; }
html body.contact-page .contact-card__header { margin-bottom: 0.75rem !important; }
html body.contact-page .category-pill { padding: 0.4rem 0.7rem !important; font-size: 0.9rem !important; }
html body.contact-page .btn--submit { padding-block: 0.75rem !important; }
html body.contact-page .contact-form-card { padding: clamp(1.1rem, 2vw, 1.5rem) !important; }
html body.contact-page .contact-hero { padding-block: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 3.5vw, 3rem) !important; }
html body.contact-page .form-privacy-note { margin-top: 0.35rem !important; }
html body.contact-page .floating-group .form-hint { display: none !important; }
html body.contact-page .contact-form-card { padding: 1.1rem 1.25rem !important; }
html body.contact-page .contact-hero { padding-block: 1.75rem 2.25rem !important; }