/* Contact Us page -- ported from new-3d's app/contact/ (layout + copy), adapted to
   this site's static-HTML shared shell. Scoped to .contact-* classes only; does not
   touch nav/footer. 3D globe hero replaced with its own static fallback image (the
   same fallback new-3d itself uses for reduced-motion).
   Colors/type unified with the rest of the site (about.css/certification.css/
   product-detail.css): Open Sans, ink #2c2c28, muted #59574f, olive accent
   #71684f / hover #59513e, paper #f8f6f2, alt bg #eeece3, line #d8d3c4 --
   replacing new-3d's own gold/dark-green/serif palette, which looked visibly
   different from every other page on this site. */

.contact-hero {
  --cx-ink: #2c2c28;
  --cx-muted: #59574f;
  --cx-olive: #71684f;
  --cx-olive-dark: #59513e;
  --cx-paper: #f8f6f2;
  --cx-alt: #eeece3;
  --cx-line: #d8d3c4;
  font-family: 'Open Sans', sans-serif;
  position: relative;
  min-height: 420px;
  overflow: hidden;
  /* Warm olive glow behind the globe, near-black at the edges (was flat forest green, which showed
     a hard seam against the globe canvas). */
  background: radial-gradient(70% 110% at 72% 55%, #3a3726 0%, #211f15 45%, #12110c 100%);
  color: #fff;
  display: flex;
  align-items: flex-end;
}
/* .contact-hero-art holds a still of the globe's first frame and shares the canvas's box, blend
   and mask, so the live globe takes over in place. The globe's size follows the box HEIGHT and it
   is centred, hence the height-fitted, centred image. Swapped out (no fade - same picture) on the
   frame the live globe first draws. */
.contact-hero-art { overflow: hidden; pointer-events: none; }
.contact-hero-art.art-ready { visibility: hidden; }
.contact-hero-art img { position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none; transform: translateX(-50%); }
.contact-globe-canvas { touch-action: pan-y; }
.contact-hero-art, .contact-globe-canvas {
  position: absolute; width: 66%; height: 170%; top: -22%; right: -10%;
  /* The bloom pass makes the canvas opaque black; screen-blending drops that black so only the
     globe and its glow sit on the banner, with no visible box edge. */
  mix-blend-mode: screen;
  /* The bloom leaves a faint haze across the whole canvas; fading its left edge hides the last trace of the box. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%);
  mask-image: linear-gradient(90deg, transparent 0, #000 26%);
}
.contact-globe-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.contact-hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #12110cf0 0%, #12110c90 34%, transparent 70%);
}
.contact-hero-inner { position: relative; padding: 140px 40px 56px; max-width: 900px; }
.contact-hero-inner h1 {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.2;
  margin: 0 0 18px;
  font-weight: 700;
  letter-spacing: -.025em;
}
.contact-hero-inner h1 span { color: #d8d3c4; }
.contact-hero-inner p { margin: 0; font-size: 16px; line-height: 1.85; color: #e3e0d6; }

.contact-section {
  --cx-ink: #2c2c28;
  --cx-muted: #59574f;
  --cx-olive: #71684f;
  --cx-olive-dark: #59513e;
  --cx-paper: #f8f6f2;
  --cx-alt: #eeece3;
  --cx-line: #d8d3c4;
  font-family: 'Open Sans', sans-serif;
  background: var(--cx-paper); color: var(--cx-ink); padding: 56px 0 72px;
}
.contact-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 40px;
  display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 60px;
}
.contact-details h2, .contact-form-panel h2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 32px; line-height: 1.2; margin: 0 0 15px; font-weight: 700;
  letter-spacing: -.025em; color: var(--cx-ink);
}
.contact-lead, .contact-form-sub { font-size: 15px; line-height: 1.8; color: var(--cx-muted); margin: 0 0 26px; max-width: 420px; }

.contact-row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 26px; }
.contact-row i { flex-shrink: 0; color: var(--cx-olive); font-size: 20px; margin-top: 4px; width: 22px; text-align: center; }
.contact-row h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 6px; color: var(--cx-ink); }
.contact-row a { display: block; color: var(--cx-olive); text-decoration: none; font-size: 15px; line-height: 1.6; }
.contact-row a:hover { color: var(--cx-olive-dark); text-decoration: underline; }
.contact-row p { margin: 0 0 6px; font-size: 15px; color: var(--cx-ink); }
.contact-directions { display: inline-flex; gap: 6px; align-items: center; font-size: 13px !important; color: var(--cx-muted) !important; margin-top: 2px; }

.contact-form-panel {
  background: var(--cx-alt); border: 1px solid var(--cx-line); border-radius: 4px; padding: 36px;
}
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 18px; margin-top: 8px; }
.contact-required { grid-column: 1 / -1; font-size: 11px; color: var(--cx-muted); margin: -6px 0 0; }
.contact-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.contact-field-full { grid-column: 1 / -1; }
.contact-field label { font-size: 12px; font-weight: 600; color: var(--cx-ink); }
.contact-field input, .contact-field select, .contact-field textarea {
  width: 100%; min-width: 0; border: 1px solid var(--cx-line); border-radius: 2px;
  background: #fff; padding: 11px 12px; color: var(--cx-ink); font-size: 16px;
  line-height: 1.4; min-height: 46px; outline: none; transition: border-color .15s;
  font-family: inherit;
}
.contact-field input::placeholder, .contact-field textarea::placeholder { color: var(--cx-muted); opacity: 1; font-size: 13px; }
/* A dropdown still on its empty first option ("Code", "Select a category") is a placeholder: match the
   input placeholders (13px, muted). Once a real option is chosen it reads like typed text (16px, ink). */
.contact-field select { height: 46px; padding: 0 8px; }
.contact-field select:has(option[value=""]:checked) { font-size: 13px; color: var(--cx-muted); }
.contact-field select option { font-size: 16px; color: var(--cx-ink); }
.contact-field textarea { resize: vertical; min-height: 112px; }
.contact-phone-group { display: flex; gap: 8px; }
.contact-phone-group select { flex: none; width: 96px; }
.contact-phone-group input { flex: 1; }
.contact-field input:hover, .contact-field select:hover, .contact-field textarea:hover { border-color: var(--cx-olive); }
.contact-field input:focus-visible, .contact-field select:focus-visible, .contact-field textarea:focus-visible {
  border-color: var(--cx-olive); outline: 2px solid var(--cx-olive); outline-offset: 2px;
}
.contact-field input:invalid.touched, .contact-field select:invalid.touched, .contact-field textarea:invalid.touched {
  border-color: #a12b25;
}

.contact-submit {
  display: flex; justify-content: center; align-items: center; gap: 14px; width: 100%;
  min-height: 48px; padding: 12px 20px; background: var(--cx-olive); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer; border: 0; border-radius: 2px;
  transition: background .15s;
}
.contact-submit:hover { background: var(--cx-olive-dark); }
.contact-help { font-size: 11px; line-height: 1.7; margin-top: 11px; color: var(--cx-muted); }

.contact-draft { grid-column: 1 / -1; border-top: 1px solid var(--cx-line); padding-top: 24px; margin-top: 28px; }
.contact-draft h3 { font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: var(--cx-ink); }
.contact-draft p { margin: 10px 0 0; font-size: 12px; line-height: 1.65; color: var(--cx-muted); }
.contact-draft pre {
  white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 13px;
  line-height: 1.75; background: #fff; border: 1px solid var(--cx-line); padding: 16px; margin: 16px 0;
  max-height: 300px; overflow-y: auto; border-radius: 2px; color: var(--cx-ink);
}
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-actions a, .contact-actions button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--cx-line); padding: 10px 14px; min-height: 44px; font-size: 12px;
  cursor: pointer; background: #fff; color: var(--cx-ink); text-decoration: none; border-radius: 2px;
  font-family: inherit;
}
.contact-actions a:hover, .contact-actions button:hover { background: var(--cx-alt); border-color: var(--cx-olive); }
#contact-copy-status { font-size: 12px; color: var(--cx-olive-dark); min-height: 1em; }

@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; gap: 40px; padding: 0 24px; }
}
/* Side-by-side layout on small laptops/tablets: one field per row so the code + number fit. */
@media (min-width: 901px) and (max-width: 1100px) {
  .contact-form { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .contact-hero-art, .contact-globe-canvas { width: 115%; height: 115%; top: 0; right: -55%; opacity: .7; }
}
@media (max-width: 480px) {
  .contact-hero-inner { padding: 110px 24px 32px; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-actions { flex-direction: column; }
  .contact-form-panel { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-field input, .contact-field select, .contact-field textarea, .contact-submit { transition: none; }
  .contact-hero-art { transition: none; }
}

/* Direct send (Oct 2026): FormSubmit, as on niksonai.com. */
.contact-honey { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-submit:disabled { opacity: .7; cursor: progress; }
.contact-send-status { font-size: 12px; color: var(--cx-muted); margin: 8px 0 0; min-height: 1em; }
.contact-privacy-note { font-size: 12px; line-height: 1.6; color: var(--cx-muted); margin: 6px 0 0; }
.contact-privacy-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.contact-sent { grid-column: 1 / -1; text-align: center; padding: 36px 10px 20px; }
.contact-sent > i { font-size: 42px; color: var(--cx-olive, #71684f); }
.contact-sent h3 { font-family: 'Open Sans', sans-serif; font-size: 22px; font-weight: 700; margin: 14px 0 0; color: var(--cx-ink); outline: none; }
.contact-sent p { font-size: 14px; line-height: 1.7; color: var(--cx-muted); margin: 10px auto 0; max-width: 40ch; }
.contact-again { margin-top: 20px; background: none; border: 1px solid var(--cx-line); border-radius: 999px; padding: 10px 20px; font-size: 13px; font-weight: 600; color: var(--cx-ink); cursor: pointer; }
.contact-again:hover { border-color: var(--cx-olive, #71684f); }

/* Office map (Oct 2026, option A): a card under the contact details. Plain Google Maps embed, no API key. */
.contact-map { margin: 28px 0 0; border: 1px solid var(--cx-line); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 14px 30px -22px rgba(44,44,40,.4); }
.contact-map iframe { display: block; width: 100%; height: 260px; border: 0; filter: saturate(.75) contrast(.95); }
.contact-map figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; font-size: 13px; line-height: 1.45; color: var(--cx-ink); }
.contact-map figcaption small { display: block; font-size: 11.5px; color: var(--cx-muted); margin-top: 2px; }
.contact-map figcaption a { white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--cx-olive, #71684f); text-decoration: none; }
.contact-map figcaption a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 580px) { .contact-map iframe { height: 220px; } }

/* Launch fixes (Oct 14 2026): map is its own grid item after the form, so on phones the form comes
   before the map; on desktop it sits under the contact details as before. #enquiry on the form
   panel lets links jump straight to the form. */
.contact-inner { grid-template-rows: auto 1fr; }
.contact-details { grid-column: 1; grid-row: 1; }
.contact-form-panel { grid-column: 2; grid-row: 1 / span 2; align-self: start; scroll-margin-top: 96px; }
.contact-inner > .contact-map { grid-column: 1; grid-row: 2; align-self: start; margin-top: -32px; }
@media (max-width: 900px) {
  .contact-details, .contact-form-panel, .contact-inner > .contact-map { grid-column: 1; grid-row: auto; }
  .contact-inner > .contact-map { margin-top: 0; }
}