/* Travenza · page-contact.css — responsive layout for the Contact template.
   Uses the shared tokens in style.css (--gutter, --section-y, --radius-card, --f-display …).
   Breakpoints: 900px (stack channels over form) · 560px (phones) · 400px (small phones). */

.ct-hero, .ct-main {
  --ct-muted: #62625b;      /* AA-contrast grey for secondary copy on ivory */
  --ct-ink-orange: #9c5a15; /* orange for small text/links (>=4.5:1 on ivory) — brand orange stays for display type + icons */
}

/* ——— Hero ——— */
.ct-hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  background: var(--ivory);
  padding: clamp(112px, 13vw, 160px) var(--gutter) clamp(36px, 5vw, 60px);
}
.ct-hero__eyebrow { margin-bottom: 20px; }
.ct-hero__h1 {
  font-family: var(--f-display); font-weight: 900; color: var(--black);
  font-size: clamp(44px, 9vw, 120px);
  line-height: 1.1; letter-spacing: -.03em;
  margin-bottom: 20px;
}
.ct-hero__h1 em { font-style: italic; color: var(--orange); }
.ct-hero__sub { max-width: 480px; margin: 0 auto; font-size: clamp(16px, 1.3vw, 17px); line-height: 1.65; font-weight: 400; color: var(--ct-muted); }

/* ——— Main two-column block ——— */
.ct-main { background: var(--ivory); padding: clamp(32px, 5vw, 56px) var(--gutter) clamp(40px, 4.5vw, 56px); }
.ct-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px); align-items: start;
  max-width: 1100px; margin: 0 auto;
}
.ct-channels, .ct-formwrap { min-width: 0; }
.ct-h2 { max-width: 420px; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.12; letter-spacing: -.02em; margin-bottom: clamp(20px, 3vw, 40px); }

/* ——— Contact channels ——— */
.ct-channel { display: flex; gap: 18px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--gray-light); }
.ct-channel__icon {
  flex: none; width: 52px; height: 52px; border-radius: 14px;
  background: var(--orange-pale); color: var(--orange);
  display: flex; align-items: center; justify-content: center;
}
.ct-channel__icon svg { width: 22px; height: 22px; }
.ct-channel__body { flex: 1; min-width: 0; }
.ct-channel__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ct-muted); margin-bottom: 4px; }
.ct-channel__val { font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--black); overflow-wrap: anywhere; }
.ct-channel__cta {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: 10px; padding: 0 18px;
  border: 1.5px solid rgba(213, 142, 74, .5); border-radius: 60px;
  font-size: 14px; font-weight: 700; letter-spacing: .2px; line-height: 1;
  color: var(--ct-ink-orange); text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.ct-channel__cta:hover { background: var(--orange-pale); border-color: var(--orange); transform: translateY(-1px); }

/* ——— Enquiry form (card) ——— */
.ct-formwrap {
  background: var(--white); border: 1px solid var(--gray-light); border-radius: 24px;
  padding: clamp(22px, 3.4vw, 36px);
  box-shadow: 0 10px 40px rgba(26, 26, 26, .05);
}
.ct-formwrap > .section-label { margin-bottom: 20px; }
.ct-form { display: flex; flex-direction: column; gap: 18px; }
.ct-field label {
  display: block; margin-bottom: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ct-muted);
}
.ct-req { color: var(--ct-ink-orange); }
.ct-field input, .ct-field textarea {
  display: block; width: 100%; min-height: 52px;
  padding: 14px 16px;
  border: 1.5px solid var(--gray-light); border-radius: 12px;
  background: var(--ivory-2); color: var(--black);
  font-family: var(--f-body); font-size: 16px; line-height: 1.4; /* 16px stops iOS zoom-on-focus */
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.ct-field textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: #8d8d85; opacity: 1; }
.ct-field input:hover, .ct-field textarea:hover { border-color: #cfcbbd; }
.ct-field input:focus, .ct-field textarea:focus {
  outline: none; background: var(--white);
  border-color: var(--orange); box-shadow: 0 0 0 4px rgba(213, 142, 74, .18);
}
.ct-field.is-invalid input, .ct-field.is-invalid textarea { border-color: #b3261e; background: #fff8f7; }
.ct-field.is-invalid input:focus, .ct-field.is-invalid textarea:focus { box-shadow: 0 0 0 4px rgba(179, 38, 30, .14); }
.ct-err { margin-top: 6px; font-size: 13px; line-height: 1.45; font-weight: 500; color: #b3261e; }
.ct-submit { width: 100%; justify-content: center; min-height: 54px; margin-top: 6px; font-family: inherit; font-size: 15px; }
.ct-submit:disabled { opacity: .7; cursor: progress; transform: none; }

/* Result banners (success / could-not-send) */
.ct-notice {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 22px; padding: 14px 16px; border-radius: 14px;
  font-size: 15px; line-height: 1.55;
}
.ct-notice svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.ct-notice p { margin: 0; }
.ct-notice a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ct-notice--ok  { background: #eef8f1; border: 1px solid #b9dfc8; color: #14532d; }
.ct-notice--err { background: #fdf0ee; border: 1px solid #f0c4be; color: #8a1c14; }
/* functions.php also prints a fixed toast (#contactNotice) after a successful send; this page shows the message inline instead,
   and the toast would otherwise stay on screen as an invisible full-width layer that blocks taps near the bottom edge. */
#contactNotice { display: none !important; }

/* ——— Reveal robustness ——— */
html:not(.js) .reveal { opacity: 1; transform: none; }
/* style.css (<=560px) re-applies the hidden-state offset to revealed elements (same specificity, later in the file), leaving every
   revealed .reveal 16px low on phones: force the settled state. */
.js .reveal.visible, .js .reveal-left.visible, .js .reveal-right.visible { transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ——— Tablet portrait and below: channels over form ——— */
@media (max-width: 900px) {
  .ct-grid { grid-template-columns: minmax(0, 1fr); }
  .ct-h2 { max-width: none; }
}

/* ——— Phones ——— */
@media (max-width: 560px) {
  .reveal { transform: translateY(14px); }
  .ct-hero { padding-top: 112px; }
  .ct-hero__eyebrow { margin-bottom: 16px; }
  .ct-channel { gap: 14px; padding: 18px 0; }
  .ct-channel__icon { width: 46px; height: 46px; border-radius: 12px; }
  .ct-formwrap { border-radius: 20px; }
}
@media (max-width: 400px) {
  .ct-formwrap { padding: 20px 16px; }
}