/* =====================================================================
   contact.css — page-scoped styles for /contact. base.css + theme-*.css
   are the shared foundation in the repo root.

   Shape: text hero, two-column body (Reach us | Form), no closing CTA
   band (the page itself is the CTA). Form embed honors Zoho's iframe
   styling — we wrap it in a panel and let it breathe.
   ===================================================================== */

/* =====  HERO  ===== */
.contact-hero {
  background: var(--hero-bg);
  color: var(--hero-text);
  padding: var(--hero-pad-y) 0 calc(var(--hero-pad-y) * 0.7);
  position: relative;
  overflow: hidden;
}
.contact-hero-inner {
  position: relative; z-index: 2;
  max-width: 880px;
}
.contact-hero h1 {
  font-family: var(--font-display);
  font-size: var(--hero-h-size);
  line-height: var(--hero-h-line);
  letter-spacing: var(--display-tracking);
  font-weight: var(--display-weight);
  color: var(--hero-text);
  margin: 18px 0 28px;
}
.contact-hero .contact-summary {
  font-size: 19px;
  line-height: 1.6;
  color: var(--hero-sub-text);
  max-width: 720px;
}

/* =====  BODY — 2-col grid  ===== */
.contact-body {
  background: var(--why-bg);
  padding: var(--section-pad-y) 0 calc(var(--section-pad-y) * 1.2);
}
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}
.contact-body h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: var(--display-tracking);
  font-weight: var(--section-h-weight);
  color: var(--text-1);
  margin: 8px 0 24px;
}

/* =====  REACH PANEL  ===== */
.reach-panel { position: relative; }
.reach-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 36px;
}
.reach-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 18px 0;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--line);
  align-items: start;
  transition: background 0.15s ease;
}
.reach-item:last-child { border-bottom: 1px solid var(--line); }
.reach-item:not(.reach-item--bot):hover {
  background: rgba(0,0,0,0.02);
}
.reach-icon {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-key);
  margin-top: 2px;
}
.reach-icon svg { width: 18px; height: 18px; stroke: currentColor; }
.reach-body { min-width: 0; }
.reach-key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 4px;
}
.reach-value {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.25;
  font-weight: var(--display-weight);
  letter-spacing: -0.005em;
  color: var(--text-1);
  margin-bottom: 6px;
}
.reach-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0;
}
.reach-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f4f1ec;
  background: var(--accent-key);
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 8px;
  font-weight: 600;
  vertical-align: 2px;
}

/* Meta — operational facts under the list */
.reach-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reach-meta-item {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 14px;
  line-height: 1.5;
}
.reach-meta-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.reach-meta-key svg { width: 14px; height: 14px; stroke: currentColor; }
.reach-meta-value { color: var(--text-2); }

/* =====  FORM PANEL  ===== */
.form-panel {
  background: var(--surface-1, #ffffff);
  border: 1px solid var(--line);
  padding: 36px 40px 40px;
}
.form-lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 28px;
  max-width: 540px;
}
.form-embed {
  min-height: 580px;
  position: relative;
}
.form-embed iframe {
  /* Zoho Forms JS embed injects an iframe at runtime;
     ensure it fills our container cleanly */
  width: 100% !important;
  border: 0 !important;
}
.form-noscript {
  padding: 24px;
  border: 1px dashed var(--line);
  background: rgba(0,0,0,0.02);
  font-size: 14px;
  color: var(--text-2);
}
.form-noscript a {
  color: var(--accent-key);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Form placeholder shown until Zoho iframe injects */
.form-placeholder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 36px 32px;
  border: 1px dashed var(--line);
  background: rgba(0,0,0,0.015);
}
.form-placeholder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--accent-key);
  background: rgba(0,0,0,0.04);
}
.form-placeholder-icon svg { width: 22px; height: 22px; stroke: currentColor; }
.form-placeholder h3 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  font-weight: var(--display-weight);
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin: 0;
}
.form-placeholder p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
  max-width: 480px;
}
.form-placeholder p a {
  color: var(--accent-key);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.theme-lobby .form-placeholder-icon { color: #b3a586; background: rgba(26,30,38,0.04); }
.theme-lobby .form-placeholder p a { color: #1a1e26; text-decoration-color: rgba(26,30,38,0.4); }
.theme-corporate .form-placeholder-icon { color: #226DB4; background: rgba(34,109,180,0.08); }
.theme-corporate .form-placeholder p a { color: #226DB4; }

/* =====  LOBBY OVERRIDES  ===== */
.theme-lobby .contact-hero {
  background:
    linear-gradient(180deg, rgba(26,30,38,0.0) 0%, rgba(26,30,38,0.75) 100%),
    linear-gradient(135deg, #1a1e26 0%, #2c303a 50%, #4a4f5a 100%);
}
.theme-lobby .contact-hero::before {
  content: '';
  position: absolute; right: 0; top: 0; bottom: 0; width: 55%;
  background-image:
    linear-gradient(rgba(244,241,236,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,236,0.05) 1px, transparent 1px);
  background-size: 120px 120px;
  opacity: 0.55;
  pointer-events: none;
}
.theme-lobby .contact-hero h1 { font-weight: 300; }
.theme-lobby .contact-hero h1 em { font-weight: 500; }
.theme-lobby .contact-body h2 { font-weight: 400; }
.theme-lobby .reach-value { font-weight: 400; }
.theme-lobby .reach-icon { color: #b3a586; }
.theme-lobby .reach-tag { background: #b3a586; color: #1a1e26; }
.theme-lobby .form-panel {
  background: #f4f1ec;
  border-color: rgba(26,30,38,0.18);
  border-radius: 2px;
}

/* =====  CORPORATE OVERRIDES  ===== */
.theme-corporate .contact-hero { background: #ffffff; }
.theme-corporate .contact-hero h1 em { color: #226DB4; font-style: normal; }
.theme-corporate .contact-body h2 em { color: #226DB4; font-style: normal; }
.theme-corporate .reach-icon { color: #226DB4; }
.theme-corporate .reach-tag { background: #226DB4; }
.theme-corporate .form-panel {
  background: #ffffff;
  border-radius: 8px;
  border-color: rgba(34,109,180,0.18);
  box-shadow: 0 4px 18px rgba(15,30,60,0.06);
}

/* =====  RESPONSIVE  ===== */
@media (max-width: 980px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .form-panel { padding: 28px 24px 32px; }
  .reach-meta-item { grid-template-columns: 110px 1fr; }
}