/* ==========================================================================
   Contact (/contact/). Uses page.css (.pg-hero, .pg-place, .pg-faq, .pg-section,
   .pg-wrap, .pg-h2, .pg-lede, .pg-eyebrow…) — this file only adds what's unique
   to Contact: the hero option cards, the demoted email/phone row, the form and
   its states, and the "what happens next" list. Error/success colour comes
   from the existing tone system (data-tone="rose"/"mint" — see base.css),
   never a hand-picked hex.

   R2 (2026-09-29): chatgpt design review + triage
   (design-runs/2026-09-28-site-v3/review/contact/{chatgpt,triage}.md). Conversion
   hierarchy: Book a call (primary) > WhatsApp (secondary) > email/phone (plain text,
   tertiary). Hero/form/place/FAQ resized; stamp + one Rishikesh line-art layer dropped
   (decoration budget: one hero treatment + one section texture per section).
   ========================================================================== */

/* ---- Hero: 2 option cards (primary/secondary) + inline note + tertiary row ------ */

.ctc-options {
  display: grid;
  gap: 12px;
  max-width: 30rem;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.ctc-option {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: 0 12px 26px -20px rgb(15 23 42 / 0.4);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.ctc-option:hover {
  border-color: var(--slate-300);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -20px rgb(15 23 42 / 0.45);
}

.ctc-option:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.ctc-option__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--slate-100);
  color: var(--blue-600);
}

.ctc-option__icon svg { width: 22px; height: 22px; }

.ctc-option__text { display: grid; gap: 2px; }
.ctc-option__text strong { color: var(--ink-900); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.ctc-option__text > span { color: var(--slate-600); font-size: 1rem; }

.ctc-option__arrow {
  color: var(--slate-500);
  transition: transform var(--t-base) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.ctc-option:hover .ctc-option__arrow { color: var(--blue-600); transform: translateX(3px); }

/* Primary (Book a call): filled, the strongest card on the page. */
.ctc-option--primary {
  border-color: transparent;
  background: var(--color-primary);
  box-shadow: 0 18px 34px -18px rgb(37 99 235 / 0.55);
}

.ctc-option--primary .ctc-option__icon { background: rgb(255 255 255 / 0.18); color: var(--color-on-primary); }
.ctc-option--primary .ctc-option__text strong,
.ctc-option--primary .ctc-option__text > span,
.ctc-option--primary .ctc-option__arrow { color: var(--color-on-primary); }
.ctc-option--primary:hover { border-color: transparent; background: var(--color-primary-hover); }
.ctc-option--primary:hover .ctc-option__arrow { color: var(--color-on-primary); }

/* Secondary (WhatsApp): quieter paper card, official green only on its icon. */
.ctc-option--secondary .ctc-option__icon { background: color-mix(in srgb, #25D366 14%, var(--paper)); }
.ctc-option--secondary:hover .ctc-option__arrow { color: #25D366; }

/* "I reply myself" — in the conversion flow now, not only a note on the portrait. */
.ctc-note-inline {
  margin: 14px 0 0;
  color: var(--slate-600);
  font-size: 1rem;
  font-style: italic;
}

/* Tertiary: email + phone as one plain text row, well beneath the cards. */
.ctc-tertiary {
  margin: 16px 0 0;
  color: var(--slate-700);
  font-size: 1rem;
}

.ctc-tertiary span { margin: 0 8px; color: var(--slate-400); }

.ctc-tertiary a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-900);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--slate-300);
  text-underline-offset: 4px;
}

.ctc-tertiary a:hover { color: var(--blue-700); text-decoration-color: currentColor; }

@media (min-width: 480px) and (max-width: 1199.98px) {
  .ctc-option { padding: 16px 20px; }
}

/* ---- Hero: target ~440-470px desktop content, mobile order H1→lede→cards→portrait --- */

@media (max-width: 1199.98px) {
  /* Portrait: 300-340px tall (was ~400+), and moved after the cards/note/tertiary row. */
  .ctc .pg-hero__media { order: 8; margin-top: 20px; }

  .ctc-options { order: 4; margin-top: 20px; }
  .ctc-note-inline { order: 5; }
  .ctc-tertiary { order: 6; margin-bottom: 4px; }

  /* Compact cards: 64-72px tall, 10-12px apart (was ~86px). */
  .ctc-options { gap: 10px; }
  .ctc-option { grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 12px; padding: 12px 14px; min-height: 64px; }
  .ctc-option__icon { width: 40px; height: 40px; }
  .ctc-option__icon svg { width: 20px; height: 20px; }
}

@media (min-width: 1200px) {
  /* R3 (2026-09-29 re-review, score 8.2/7.3): the portrait still dominates and the copy
     column ends early. Slightly smaller portrait, more width for the conversion column,
     cards unchanged per triage-r2 item 3 ("keep the cards as they are"). */
  /* Owner 2026-09-29: the portrait was too small — the kit's 50/50 hero stage now sizes it
     (centred in its half, ~94% of the hero's height, floor clamp(600px, 40vw + 60px, 780px)). */
  .ctc .pg-hero { padding-top: clamp(20px, 2vw, 28px); }
  .ctc .pg-hero__copy { padding-bottom: clamp(20px, 2.4vw, 32px); }

  /* Wider lede column so it wraps to fewer lines instead of sitting narrow inside a wider copy column. */
  .ctc .pg-hero__lede { max-width: 44rem; }

  .ctc .pg-hero__title { margin-top: 14px; }
  .ctc .pg-hero__lede { margin-top: 14px; }
  .ctc-options { margin-top: 18px; }
  .ctc-note-inline { margin-top: 10px; }
  .ctc-tertiary { margin-top: 10px; }

  /* Compact desktop cards too — "larger than mobile" still means tighter than the old 3-card design. */
  .ctc-option { padding: 12px 18px; }
  .ctc-option__icon { width: 40px; height: 40px; }
  .ctc-option__icon svg { width: 20px; height: 20px; }
  .ctc-options { gap: 10px; }
}

/* ==========================================================================
   01 Form + "what happens next"
   ========================================================================== */

.ctc-form-section { background: var(--paper); }
.ctc-form-section .pg-lede { margin-bottom: 0; }

/* R3: the kit's shared padding-block (clamp(48px, 5.5vw, 88px), both sides) left a large
   dead zone below the form on desktop. 48-72px bottom only; top is unchanged (still needs
   to clear the hero). No min-height anywhere in this section — height is content-driven. */
@media (min-width: 1024px) {
  .ctc-form-section { padding-bottom: clamp(48px, 6vw, 72px); }
}

.ctc-form__grid { display: grid; gap: 32px; }

/* ---- The form itself ----------------------------------------------------------- */

.ctc-form {
  display: grid;
  gap: 20px;
  max-width: 42rem;
  margin-top: 28px;
}

.ctc-row { display: grid; gap: 20px; }

@media (min-width: 560px) {
  .ctc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ctc-field { display: grid; gap: 8px; }

.ctc-field label {
  display: block;
  color: var(--ink-900);
  font-size: 1rem;
  font-weight: 600;
}

.ctc-req { color: var(--blue-600); }
.ctc-opt { color: var(--slate-500); font-weight: 500; font-size: 0.8125rem; }

.ctc-field input,
.ctc-field select,
.ctc-field textarea {
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid var(--slate-300);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink-900);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.ctc-field textarea { min-height: 140px; padding-top: 12px; resize: vertical; }

.ctc-field input::placeholder,
.ctc-field textarea::placeholder { color: var(--slate-400); }

.ctc-field input:hover,
.ctc-field select:hover,
.ctc-field textarea:hover { border-color: var(--slate-400); }

.ctc-field input:focus-visible,
.ctc-field select:focus-visible,
.ctc-field textarea:focus-visible {
  border-color: var(--blue-600);
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.ctc-field [aria-invalid="true"] { border-color: var(--tone-mark); }
.ctc-field[data-tone] label { color: var(--tone-ink); }

.ctc-select { position: relative; display: grid; }

.ctc-select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding-right: 42px;
}

.ctc-select__chev {
  position: absolute;
  top: 50%;
  right: 14px;
  color: var(--slate-500);
  transform: translateY(-50%);
  pointer-events: none;
}

.ctc-field__err {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--tone-ink);
  font-size: 1rem;
  font-weight: 600;
}

.ctc-field__err::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tone-mark);
}

.ctc-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding-inline: 26px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}

.ctc-submit:hover { background: var(--color-primary-hover); }
.ctc-submit:active { background: var(--color-primary-active); transform: translateY(1px); }
.ctc-submit:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.ctc-privacy {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  color: var(--slate-600); /* AA contrast on paper (review: was too low-contrast/small) */
  font-size: 0.875rem;
}

/* Honeypot: off-screen for sighted users, out of tab order (tabindex="-1"), still
   present in the DOM for a bot to fill. aria-hidden on the wrapper also removes it
   from the accessibility tree, so screen-reader users never encounter it. */
.ctc-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ---- Error summary + success panel: tone-driven (data-tone="rose" | "mint") ----- */

.ctc-errors {
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--tone-line);
  border-radius: var(--r-lg);
  background: var(--tone-bg);
}

.ctc-errors__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--tone-ink);
  font-weight: 700;
}

.ctc-errors ul { margin: 10px 0 0; padding: 0 0 0 26px; }
.ctc-errors li { margin-top: 4px; }

.ctc-errors a {
  color: var(--tone-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ctc-success {
  display: grid;
  justify-items: start;
  gap: 6px;
  margin-top: 28px;
  padding: 28px 24px;
  border: 1px solid var(--tone-line);
  border-radius: var(--r-xl);
  background: var(--tone-bg);
}

.ctc-success:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.ctc-success__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--tone-mark);
}

.ctc-success__title {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
}

.ctc-success__text { margin: 0 0 6px; color: var(--slate-700); font-size: 1rem; line-height: 1.5; }

/* ---- "What happens next" ------------------------------------------------------- */

.ctc-next {
  padding: 28px 26px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  background: var(--warm-50);
}

/* R3: on phones this reads as a compact confirmation, not another full section —
   slightly less inner padding than the desktop card (which stays at 28/26 per R2's
   "give it more weight" request; that was a desktop-only ask). */
@media (max-width: 1023.98px) {
  .ctc-next { padding: 22px 20px; }
}

.ctc-next__title {
  margin: 0 0 22px;
  color: var(--ink-900);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
}

.ctc-steps {
  display: grid;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.ctc-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  color: var(--slate-700);
  font-size: 1rem;
  line-height: 1.5;
}

.ctc-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 44px;
  bottom: -26px;
  left: 21px;
  border-left: 2px dashed var(--slate-300);
}

.ctc-steps__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--slate-200);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 8px 16px -12px rgb(15 23 42 / 0.4);
  color: var(--blue-600);
}

.ctc-steps__num { display: none; }
.ctc-steps strong { display: block; color: var(--ink-900); font-weight: 700; }

@media (min-width: 1024px) {
  /* Container ~1200-1240, form ~700-720, next-steps ~380-420, gap 56-72 (review: the form
     was a narrow ~420px column in a much wider section — this makes it the main event). */
  /* Same left content edge as every other section (a centred 1240px box looked indented). */
  .ctc-form__grid { max-width: 1240px; }
  .ctc-form__grid { grid-template-columns: minmax(0, 744px) 380px; gap: 56px; align-items: start; }
  .ctc-form { max-width: 100%; }
  .ctc-next { position: sticky; top: calc(var(--bar-h) + 32px); }
}

/* ==========================================================================
   02 Where I am — smaller photo, one decoration device, less height
   ========================================================================== */

/* Photo ~15-20% smaller (was 440px) — the arch frame + location pill is the one
   decoration device now that the stamp and background line art are gone. */
.ctc-place__media { width: min(100%, 370px); }

/* R3: the image is slightly more compact vertically (kit default is 4/5; a touch shorter
   keeps the arch shape but trims the empty air it left below the text column). */
.ctc-place__photo img { aspect-ratio: 5 / 6; }

/* R3: phones ~15% smaller again (was already reduced once in R2). */
@media (max-width: 767.98px) {
  .ctc-place__media { width: min(85%, 314px); }
}

@media (min-width: 1024px) {
  .ctc-place__media { margin-right: auto; }

  /* R3: the kit's default 1.1fr/0.9fr split + clamp(48-96px) gap left a large empty middle,
     since the photo itself is capped at 370px, well under what 0.9fr resolves to at this
     width. A fixed image-sized column + tighter gap makes the two columns read as one
     composition instead of two blocks with dead air between them. */
  .ctc .pg-place__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 48px; }
}

/* ==========================================================================
   03 FAQ — smaller H2, a stronger/taller accordion, a tighter desktop split
   ========================================================================== */

/* The section H2 was rendering ~60px (page.css's generic clamp); the review flagged it as
   oversized next to quiet questions. 44-48px, closer to the accordion's own weight. */
.ctc .pg-faq .pg-h2 { font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); }

/* Stronger rows: 64-72px, heavier question weight, deliberate 2-line wrapping instead of
   a cramped single line (review: "Does my ad spend go through / you?"). */
.ctc .pg-qa summary { min-height: 64px; padding-block: 20px; font-weight: 700; }
.ctc .pg-qa__q { text-wrap: pretty; }

@media (min-width: 1024px) {
  .ctc .pg-faq__grid { grid-template-columns: minmax(0, 380px) minmax(0, 680px); gap: 56px; }
}

/* R3: chatgpt's re-review flagged a P0 mobile FAQ overflow. Verified as a false positive —
   no element's right edge exceeds the viewport at 390/375/360 and mobile-r2.png shows the
   FAQ wrapping correctly (chatgpt misread the side-by-side strips). Defensive rules anyway,
   page-scoped: grid/flex children don't shrink below their content's intrinsic width unless
   told to, so a long unbroken string (a URL, a long email) could in principle push a card
   wider than its column. */
.ctc .pg-faq__grid,
.ctc .pg-faq__side,
.ctc .pg-faq__list,
.ctc .pg-help,
.ctc .pg-qa { min-width: 0; max-width: 100%; }

.ctc .pg-qa__q,
.ctc .pg-qa p,
.ctc .pg-help__title,
.ctc .pg-help__text { overflow-wrap: anywhere; }