/* Contact page — owner-intake form, trust strip, FAQ. Matches the glass
   aesthetic used on /services/ and /freehold/. Mobile-first. */

body.contact-page {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Outfit", system-ui, -apple-system, sans-serif;
  /* Wave stroke variables — same scheme listings/freehold/services use
     so the signature reads consistently across pages. */
  --simple-wave-stroke: var(--ink-shadow);
  --simple-wave-glow: rgba(246, 250, 247, 0.14);
  --simple-wave-opacity: 0.45;
}
:root:not([data-mode="light"]) body.contact-page {
  --simple-wave-stroke: rgba(220, 230, 225, 0.16);
  --simple-wave-glow: rgba(176, 196, 188, 0.12);
  --simple-wave-opacity: 0.5;
}

body.contact-page .page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
}

body.contact-page .site-footer {
  margin-top: auto;
}

html:has(body.contact-page) {
  overflow-x: hidden;
}

body.contact-page main {
  flex: 1 0 auto;
  padding: 80px clamp(16px, 4vw, 48px) 60px;
  max-width: 1180px;
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
}

/* Background wave (signature). Same styling shape that listings,
   freehold, services use so the wave looks the same across pages.
   The intake glass card defends the form text from the wave behind it. */
.ct-wave-svg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-base);
  opacity: var(--simple-wave-opacity);
  mix-blend-mode: multiply;
  filter: saturate(104%);
  pointer-events: none;
}
:root:not([data-mode="light"]) .ct-wave-svg {
  mix-blend-mode: screen;
  filter: saturate(108%);
}
.ct-wave {
  fill: none;
  stroke: var(--simple-wave-stroke);
  stroke-width: 0.95;
  opacity: 0.58;
  stroke-linecap: round;
  filter: drop-shadow(0 0 0.16rem var(--simple-wave-glow));
}
@media (prefers-reduced-motion: reduce) {
  .ct-wave-svg { display: none; }
}

/* ── Section eyebrow (used outside the hero too) ── */
.ct-section-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 18px;
}

/* ── HERO: split layout. Left = pitch + CTAs. Right = dark stat panel. ── */
.ct-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: stretch;
  margin-bottom: clamp(56px, 7vw, 88px);
}

.ct-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(8px, 2vw, 24px) 0;
}

.ct-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  font-weight: 600;
}

.ct-hero__title {
  font-family: "Cormorant Garamond", "Noto Sans Arabic", "Vazirmatn", "Noto Sans SC", "Noto Sans TC", serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 18px;
}
.ct-hero__title em {
  font-style: italic;
  color: var(--accent);
}

.ct-hero__sub {
  font-size: clamp(0.98rem, 1.5vw, 1.12rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 0 28px;
}

.ct-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.ct-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--control-radius);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.96rem;
  text-decoration: none;
  transition: background-color 0.18s ease, transform 0.16s var(--ease-spring);
}
.ct-hero__cta:hover { background: var(--accent-soft); transform: translateY(-1px); }
.ct-hero__cta:active { transform: scale(0.98); }
.ct-hero__cta svg { stroke: currentColor; }

.ct-hero__ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color 0.18s ease;
}
.ct-hero__ghost:hover { color: var(--accent); }

/* Right: dark stat panel — anchors the page. 2x2 grid of numbers. */
.ct-hero__panel {
  background: linear-gradient(165deg, #253F36 0%, #1C322B 55%, #142520 100%);
  border-radius: 16px;
  padding: clamp(22px, 3vw, 32px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 28px) clamp(20px, 2.6vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 48px rgba(10, 26, 18, 0.18);
  align-content: center;
}
.ct-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ct-hero-stat__num {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1;
  letter-spacing: -0.02em;
}
.ct-hero-stat__num span { color: var(--accent-bright, #2fb56b); }
.ct-hero-stat__num sup {
  font-size: 0.5em;
  font-weight: 500;
  vertical-align: super;
  margin-inline-start: 2px;
  color: rgba(255, 255, 255, 0.7);
}
.ct-hero-stat__label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.45;
  font-weight: 400;
}

@media (max-width: 880px) {
  .ct-hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ct-hero__panel {
    order: 2;
  }
}

@media (max-width: 480px) {
  .ct-hero__panel {
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    padding: 18px 20px;
  }
  .ct-hero-stat__num { font-size: 1.7rem; }
  .ct-hero-stat__label { font-size: 0.74rem; }
}

/* ── Process timeline: 4 numbered steps from intake → live listing. ── */
.ct-process {
  margin-bottom: clamp(56px, 7vw, 88px);
}
.ct-process__rail {
  position: relative;
}
.ct-process__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--surface-border);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  overflow: hidden;
}
.ct-process-step {
  background: var(--card);
  padding: clamp(22px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ct-process-step__num {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.ct-process-step__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.ct-process-step__body {
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

@media (max-width: 980px) {
  .ct-process__steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .ct-process__steps { grid-template-columns: 1fr; }
}

/* ── Two-column grid (form + sidebar) ── */

/* ── Two-column grid ── */
.ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin-bottom: 72px;
}

@media (max-width: 900px) {
  .ct-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Form card ── */
.ct-form-card {
  padding: clamp(20px, 3vw, 36px);
  border-radius: calc(var(--control-radius) + 4px);
  border: 1px solid var(--surface-stroke-strong);
  background: var(--card);
  box-shadow: var(--panel-shadow);
}

.ct-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ct-honey {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ct-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.ct-field > label,
.ct-field > legend {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  padding: 0;
}

.ct-req {
  color: var(--accent-bright);
  margin-inline-start: 2px;
}

.ct-field input[type="text"],
.ct-field input[type="tel"],
.ct-field input[type="email"],
.ct-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--surface-border);
  border-radius: var(--control-radius-tight);
  background: var(--surface-layer-1);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.ct-field textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.45;
}

.ct-field input:hover,
.ct-field textarea:hover {
  border-color: var(--accent-bright-border);
}

.ct-field input:focus-visible,
.ct-field textarea:focus-visible {
  outline: none;
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px var(--accent-bright-soft);
  background: var(--surface-layer-2);
}

.ct-field input[aria-invalid="true"],
.ct-field textarea[aria-invalid="true"] {
  border-color: #d93434;
  box-shadow: 0 0 0 3px rgba(217, 52, 52, 0.18);
}

.ct-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 520px) {
  .ct-row { grid-template-columns: 1fr; }
}

.ct-hint {
  margin: -6px 0 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* ── Chip radio group ── */
.ct-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ct-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  min-height: 44px;
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  background: var(--surface-layer-1);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
  user-select: none;
}

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

.ct-chip:hover {
  border-color: var(--accent-bright-border);
  color: var(--accent-bright);
}

.ct-chip:has(input:focus-visible) {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

.ct-chip:has(input:checked) {
  background: var(--accent-bright-soft);
  border-color: var(--accent-bright);
  color: var(--accent-bright);
  font-weight: 600;
}

/* ── Actions ── */
.ct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}

.ct-submit {
  flex: 1 1 220px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--control-radius);
  background: var(--accent-bright);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.14s ease, transform var(--dur-instant) var(--ease-spring);
}

.ct-submit:hover {
  background: var(--accent-bright-dark, #018a44);
}

.ct-submit:active {
  transform: scale(0.98);
}

.ct-submit:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

.ct-submit[disabled] {
  opacity: 0.72;
  cursor: progress;
}

.ct-submit[data-loading="true"] .ct-submit__label { opacity: 0.55; }
.ct-submit[data-loading="true"] .ct-submit__spinner { display: inline-block; }

.ct-submit__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  animation: ct-spin 0.8s linear infinite;
}

@keyframes ct-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ct-submit__spinner { animation: none; }
}

.ct-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  min-height: 44px;
  border: 1px solid rgba(37, 211, 102, 0.4);
  border-radius: var(--control-radius);
  background: transparent;
  color: #25d366;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}

.ct-whatsapp:hover {
  background: rgba(37, 211, 102, 0.08);
  border-color: #25d366;
}

.ct-whatsapp:focus-visible {
  outline: 2px solid #25d366;
  outline-offset: 2px;
}

/* ── Status messages ── */
.ct-status {
  margin-top: 4px;
  padding: 14px 18px;
  border-radius: var(--control-radius-tight);
  font-size: 0.9rem;
  line-height: 1.45;
}

.ct-status[data-state="success"] {
  background: var(--accent-bright-soft);
  border: 1px solid var(--accent-bright-border);
  color: var(--accent-bright);
}

.ct-status[data-state="error"] {
  background: rgba(217, 52, 52, 0.08);
  border: 1px solid rgba(217, 52, 52, 0.35);
  color: #c1231c;
}

:root:not([data-mode="light"]) .ct-status[data-state="error"] {
  color: #f9a5a0;
}

/* ── Side column ── */
.ct-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 72px;
}

@media (max-width: 900px) {
  .ct-side { position: static; }
}

.ct-side-card {
  padding: 22px clamp(18px, 2.5vw, 28px);
  border-radius: calc(var(--control-radius) + 4px);
  border: 1px solid var(--surface-stroke-strong);
  background: var(--card);
}

.ct-side-card h2 {
  margin: 0 0 14px;
  font-family: "Cormorant Garamond", "Noto Sans Arabic", "Vazirmatn", serif;
  font-size: 1.28rem;
  font-weight: 500;
  color: var(--ink);
}

.ct-why {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ct-why li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.ct-why strong {
  display: block;
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.ct-why span {
  display: block;
}

.ct-why__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-bright-soft);
  color: var(--accent-bright);
}

.ct-direct {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ct-direct li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: var(--control-radius-tight);
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.14s ease;
}

.ct-direct li a:hover,
.ct-direct li a:focus-visible {
  background: var(--surface-layer-1);
  outline: none;
}

.ct-direct li a:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: -2px;
}

.ct-direct__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.ct-direct__val {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-family: "Outfit", monospace;
}

.ct-direct__hours {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ── FAQ ── */
.ct-faq {
  max-width: 780px;
  margin-inline: auto;
  padding: 20px 0 40px;
}

.ct-faq h2 {
  margin: 0 0 20px;
  font-family: "Cormorant Garamond", "Noto Sans Arabic", "Vazirmatn", serif;
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  font-weight: 500;
  color: var(--ink);
  text-align: center;
}

.ct-faq__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ct-faq__item {
  border: 1px solid var(--surface-border);
  border-radius: var(--control-radius-tight);
  background: var(--card);
  overflow: hidden;
  transition: border-color 0.16s ease;
}

.ct-faq__item[open] {
  border-color: var(--accent-bright-border);
}

.ct-faq__item summary {
  list-style: none;
  padding: 16px 20px;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: relative;
}

.ct-faq__item summary::-webkit-details-marker { display: none; }

.ct-faq__item summary::after {
  content: "+";
  font-size: 1.4rem;
  line-height: 1;
  color: var(--accent-bright);
  transition: transform 0.16s ease;
  flex-shrink: 0;
}

.ct-faq__item[open] summary::after {
  content: "−";
}

.ct-faq__item summary:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: -2px;
}

.ct-faq__item > div {
  padding: 0 20px 18px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ═══════════════════════════════════════════════════════════════════
   EXCEPTIONAL INTAKE — single elegant form card with numbered sections,
   visual purpose cards, icon-prefixed inputs, method-of-reply cards,
   confident dual-action submit. Trust + direct contacts move below as
   horizontal strips so the form is the page's centerpiece.
   ═══════════════════════════════════════════════════════════════════ */

/* The intake card. Glass-mid + double padding so the wave behind it
   reads as texture under opaque card, never through bare text. */
.ct-intake {
  margin-bottom: clamp(56px, 7vw, 88px);
}
.ct-intake__shell {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(28px, 4vw, 48px) clamp(22px, 3vw, 44px);
  border-radius: 22px;
  border: 1px solid var(--surface-stroke-strong);
  background: var(--card);
  box-shadow: 0 24px 64px rgba(10, 26, 18, 0.08);
}
.ct-intake__head {
  text-align: center;
  margin-bottom: clamp(28px, 3.5vw, 40px);
}
.ct-intake__title {
  font-family: "Cormorant Garamond", "Noto Sans Arabic", "Vazirmatn", "Noto Sans SC", "Noto Sans TC", serif;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 10px;
}
.ct-intake__title em { font-style: italic; color: var(--accent); }
.ct-intake__sub {
  margin: 0;
  font-size: 0.96rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Numbered fieldset sections — visually weighted with subtle dividers. */
.ct-form { display: flex; flex-direction: column; gap: 0; }
.ct-fs {
  border: 0;
  padding: 28px 0;
  margin: 0;
  border-top: 1px solid var(--surface-border);
}
.ct-fs:first-of-type { border-top: 0; padding-top: 0; }
.ct-fs__legend {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0;
  margin: 0 0 18px;
  font-weight: 600;
  color: var(--ink);
}
.ct-fs__num {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
  line-height: 1;
}
.ct-fs__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* Purpose cards — 2x2 visual grid (icon + title + sub). */
.ct-purpose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ct-purpose {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: var(--surface-layer-1);
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.14s var(--ease-spring);
  user-select: none;
  min-height: 110px;
}
.ct-purpose input {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.ct-purpose__icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--accent-bright-soft);
  color: var(--accent);
  margin-bottom: 8px;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.ct-purpose__icon svg { width: 18px; height: 18px; }
.ct-purpose__title {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.ct-purpose__sub {
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.ct-purpose:hover {
  border-color: var(--accent-bright-border);
  background: color-mix(in srgb, var(--accent-bright-soft) 35%, var(--surface-layer-1));
}
.ct-purpose:has(input:focus-visible) {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}
.ct-purpose:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-bright-soft) 60%, var(--card));
  transform: translateY(-1px);
}
.ct-purpose:has(input:checked) .ct-purpose__icon {
  background: var(--accent);
  color: #fff;
}
@media (max-width: 540px) {
  .ct-purpose-grid { grid-template-columns: 1fr; }
  .ct-purpose { min-height: auto; padding: 14px 16px; }
}

/* Inputs with leading icons. */
.ct-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.ct-input:last-child { margin-bottom: 0; }
.ct-input > label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: uppercase;
}
.ct-input__field {
  position: relative;
  display: flex;
  align-items: center;
}
.ct-input__icon {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ink-soft);
  pointer-events: none;
  transition: color 0.16s ease;
}
.ct-input__field input {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  padding: 12px 16px 12px 44px;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: var(--surface-layer-1);
  color: var(--ink);
  font: inherit;
  font-size: 0.96rem;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}
[dir="rtl"] .ct-input__field input { padding: 12px 44px 12px 16px; }
.ct-input__field input::placeholder { color: var(--ink-soft); opacity: 0.7; }
.ct-input__field input:hover {
  border-color: var(--accent-bright-border);
}
.ct-input__field input:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-layer-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.ct-input__field:focus-within .ct-input__icon {
  color: var(--accent);
}
.ct-input__field input[aria-invalid="true"] {
  border-color: #d93434;
  box-shadow: 0 0 0 4px rgba(217, 52, 52, 0.16);
}

.ct-input--textarea textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 130px;
  padding: 14px 16px;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: var(--surface-layer-1);
  color: var(--ink);
  font: inherit;
  font-size: 0.96rem;
  line-height: 1.55;
  resize: vertical;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}
.ct-input--textarea textarea::placeholder { color: var(--ink-soft); opacity: 0.7; }
.ct-input--textarea textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-layer-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Method cards — 3 horizontal cards (WhatsApp / Phone call / Email). */
.ct-method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ct-method {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 14px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: var(--surface-layer-1);
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.14s var(--ease-spring);
  user-select: none;
  min-height: 92px;
  text-align: center;
}
.ct-method input {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.ct-method__icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-bright-soft);
  color: var(--accent);
  transition: background-color 0.16s ease, color 0.16s ease;
}
.ct-method__icon svg { width: 16px; height: 16px; }
.ct-method__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.ct-method:hover {
  border-color: var(--accent-bright-border);
  background: color-mix(in srgb, var(--accent-bright-soft) 35%, var(--surface-layer-1));
}
.ct-method:has(input:focus-visible) {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}
.ct-method:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-bright-soft) 60%, var(--card));
  transform: translateY(-1px);
}
.ct-method:has(input:checked) .ct-method__icon {
  background: var(--accent);
  color: #fff;
}
@media (max-width: 480px) {
  .ct-method-grid { grid-template-columns: 1fr; gap: 8px; }
  .ct-method { flex-direction: row; justify-content: flex-start; padding: 14px 16px; min-height: 56px; gap: 12px; }
}

/* Submit row: confident primary + WhatsApp ghost alternative. */
.ct-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--surface-border);
  margin-top: 4px;
}
.ct-submit-btn {
  position: relative;
  flex: 1 1 260px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 30px;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: background-color 0.16s ease, transform 0.16s var(--ease-spring), box-shadow 0.18s ease;
}
.ct-submit-btn:hover {
  background: var(--accent-soft, var(--accent));
  transform: translateY(-1px);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 36%, transparent);
}
.ct-submit-btn:active { transform: scale(0.98); }
.ct-submit-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.ct-submit-btn[disabled] {
  opacity: 0.78;
  cursor: progress;
}
.ct-submit-btn__arrow {
  width: 18px;
  height: 18px;
  transition: transform 0.18s ease;
}
.ct-submit-btn:hover .ct-submit-btn__arrow { transform: translateX(3px); }
[dir="rtl"] .ct-submit-btn:hover .ct-submit-btn__arrow { transform: translateX(-3px); }
.ct-submit-btn__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  animation: ct-spin 0.8s linear infinite;
}
.ct-submit-btn[data-loading="true"] .ct-submit-btn__label { opacity: 0.55; }
.ct-submit-btn[data-loading="true"] .ct-submit-btn__arrow { display: none; }
.ct-submit-btn[data-loading="true"] .ct-submit-btn__spinner { display: inline-block; }

.ct-wa-alt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(37, 211, 102, 0.4);
  background: transparent;
  color: #1f9b4a;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}
:root:not([data-mode="light"]) .ct-wa-alt { color: #4ad27c; }
.ct-wa-alt:hover {
  background: rgba(37, 211, 102, 0.1);
  border-color: #25d366;
}
.ct-wa-alt:focus-visible { outline: 2px solid #25d366; outline-offset: 2px; }
.ct-wa-alt svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Trust strip: 4 horizontal cards (replaces sidebar). ── */
.ct-trust {
  margin-bottom: clamp(56px, 7vw, 88px);
}
.ct-trust__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
}
.ct-trust__title {
  font-family: "Cormorant Garamond", "Noto Sans Arabic", "Vazirmatn", "Noto Sans SC", "Noto Sans TC", serif;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.ct-trust__title em { font-style: italic; color: var(--accent); }
.ct-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.ct-trust__card {
  padding: 24px 22px;
  border-radius: 14px;
  border: 1px solid var(--surface-border);
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ct-trust__icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-bright-soft);
  color: var(--accent);
  margin-bottom: 6px;
}
.ct-trust__icon svg { width: 20px; height: 20px; }
.ct-trust__card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.ct-trust__card p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
@media (max-width: 980px) { .ct-trust__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .ct-trust__grid { grid-template-columns: 1fr; } }

/* ── Direct contacts: channel cards in a grid. ── */
.ct-direct {
  margin-bottom: clamp(56px, 6vw, 80px);
}
.ct-direct__head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 32px;
}
.ct-direct__title {
  font-family: "Cormorant Garamond", "Noto Sans Arabic", "Vazirmatn", "Noto Sans SC", "Noto Sans TC", serif;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 10px;
}
.ct-direct__title em { font-style: italic; color: var(--accent); }
.ct-direct__hours {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.ct-direct__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.ct-channel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--surface-border);
  background: var(--card);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.16s ease, transform 0.16s var(--ease-spring), box-shadow 0.18s ease;
  min-height: 76px;
}
.ct-channel:hover {
  border-color: var(--accent-bright-border);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(10, 26, 18, 0.08);
}
.ct-channel:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.ct-channel__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-bright-soft);
  color: var(--accent);
}
.ct-channel__icon svg { width: 20px; height: 20px; }
.ct-channel__icon--wa { background: rgba(37, 211, 102, 0.14); color: #1f9b4a; }
.ct-channel__icon--tg { background: rgba(36, 161, 222, 0.14); color: #1880b3; }
.ct-channel__icon--mail { background: var(--accent-bright-soft); color: var(--accent); }
:root:not([data-mode="light"]) .ct-channel__icon--wa { color: #4ad27c; }
:root:not([data-mode="light"]) .ct-channel__icon--tg { color: #5fc3eb; }
.ct-channel__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ct-channel__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.ct-channel__val {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-feature-settings: "tnum";
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 980px) { .ct-direct__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .ct-direct__grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════
   AGENT PICKER — bar at top of intake + dialog with cards.
   ═══════════════════════════════════════════════════════════════════ */

/* "Talking to" bar that sits above the form. Shows the currently
   selected agent (or a neutral "Tamlik team" placeholder + open-picker
   button). After an agent is picked the button becomes "Change". */
.ct-agent-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 10px 14px;
  border: 1px dashed var(--surface-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-layer-1) 70%, transparent);
  flex-wrap: wrap;
}
.ct-agent-bar.has-agent {
  border-style: solid;
  border-color: var(--accent-bright-border);
  background: color-mix(in srgb, var(--accent-bright-soft) 50%, var(--surface-layer-1));
}
.ct-agent-bar__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.ct-agent-bar__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.ct-agent-bar__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-bright-soft);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.ct-agent-bar.has-agent .ct-agent-bar__avatar {
  background: var(--accent);
  color: #fff;
}
.ct-agent-bar__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ct-agent-bar__name {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-agent-bar__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--accent-bright-border);
  border-radius: 999px;
  background: transparent;
  color: var(--accent-bright);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.ct-agent-bar__btn:hover,
.ct-agent-bar__btn:focus-visible {
  background: var(--accent-bright);
  color: #fff;
  outline: none;
}
.ct-agent-bar__btn-change { display: none; }
.ct-agent-bar.has-agent .ct-agent-bar__btn-default { display: none; }
.ct-agent-bar.has-agent .ct-agent-bar__btn-change { display: inline; }

/* Featured channel card (the WhatsApp-an-agent CTA in Reach Us). */
.ct-channel--featured {
  border-color: var(--accent-bright-border);
  background: color-mix(in srgb, var(--accent-bright-soft) 38%, var(--card));
}
.ct-channel--featured .ct-channel__label {
  color: var(--accent);
}

/* When body has-contact-agent (an agent is picked), tighten the agent
   bar styling so the chip shows the picked agent prominently. */
body.has-contact-agent .ct-channel--featured {
  /* keep the visual emphasis even after picking */
}

/* ── Picker dialog ── */
.ct-agent-picker {
  width: min(640px, calc(100vw - 24px));
  max-height: min(86vh, 760px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 32px 80px rgba(10, 26, 18, 0.4);
  overflow: hidden;
}
.ct-agent-picker::backdrop {
  background: rgba(8, 16, 12, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ct-agent-picker[open] {
  display: flex;
}
.ct-agent-picker__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: inherit;
  overflow: hidden;
}
.ct-agent-picker__close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 0;
  background: var(--surface-layer-1);
  color: var(--ink-soft);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.ct-agent-picker__close:hover,
.ct-agent-picker__close:focus-visible {
  background: var(--accent-bright-soft);
  color: var(--accent-bright);
  outline: none;
}
.ct-agent-picker__head {
  padding: 28px clamp(20px, 3vw, 36px) 18px;
  text-align: center;
}
.ct-agent-picker__title {
  font-family: "Cormorant Garamond", "Noto Sans Arabic", "Vazirmatn", "Noto Sans SC", "Noto Sans TC", serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 8px;
}
.ct-agent-picker__title em { font-style: italic; color: var(--accent); }
.ct-agent-picker__sub {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.ct-agent-picker__grid {
  padding: 4px clamp(16px, 2.5vw, 28px) 18px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 540px) {
  .ct-agent-picker__grid { grid-template-columns: 1fr; }
}
.ct-agent-picker__foot {
  padding: 14px clamp(20px, 3vw, 36px) 22px;
  border-top: 1px solid var(--surface-border);
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
}
.ct-agent-picker__foot a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Agent card inside the picker. */
.ct-agent-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr 24px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: var(--surface-layer-1);
  text-align: start;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.14s var(--ease-spring);
}
.ct-agent-card:hover {
  border-color: var(--accent-bright-border);
  background: color-mix(in srgb, var(--accent-bright-soft) 35%, var(--surface-layer-1));
  transform: translateY(-1px);
}
.ct-agent-card:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}
.ct-agent-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-bright-soft);
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.ct-agent-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ct-agent-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ct-agent-card__name {
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.ct-agent-card__title {
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.3;
}
.ct-agent-card__langs {
  display: inline-flex;
  gap: 4px;
  margin-top: 6px;
}
.ct-agent-card__lang {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ct-agent-card__lang--en {
  background: rgba(45, 109, 200, 0.14);
  color: #1a4f95;
}
.ct-agent-card__lang--ar {
  background: rgba(178, 109, 36, 0.14);
  color: #a45c10;
}
:root:not([data-mode="light"]) .ct-agent-card__lang--en {
  color: #7da9e0;
}
:root:not([data-mode="light"]) .ct-agent-card__lang--ar {
  color: #d8a55c;
}
.ct-agent-card__pick {
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.18s ease, transform 0.18s ease;
}
[dir="rtl"] .ct-agent-card__pick svg { transform: scaleX(-1); }
.ct-agent-card:hover .ct-agent-card__pick {
  color: var(--accent);
  transform: translateX(3px);
}
[dir="rtl"] .ct-agent-card:hover .ct-agent-card__pick {
  transform: translateX(-3px);
}

/* Lock body scroll while picker is open. */
body.ct-agent-picker-open { overflow: hidden; }

/* sr-only helper used inside the textarea wrapper for the hidden label. */
.ct-form .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── RTL-specific adjustments (logical props handle most; handful of tweaks) ── */
html[dir="rtl"] .ct-submit__spinner,
html[dir="rtl"] .ct-submit-btn__spinner { animation-direction: reverse; }

/* ── Dark mode adjustments ── */
:root:not([data-mode="light"]) .ct-form-card,
:root:not([data-mode="light"]) .ct-side-card,
:root:not([data-mode="light"]) .ct-faq__item,
:root:not([data-mode="light"]) .ct-intake__shell,
:root:not([data-mode="light"]) .ct-trust__card,
:root:not([data-mode="light"]) .ct-channel {
  background: color-mix(in srgb, var(--card) 92%, transparent);
}