/* =====================================================================
   contact.css — CyMobility Contact Us page
   Page-scoped (.page-contact) styles that sit on top of the shared About
   design system (styles.css) + header/footer chrome (site-chrome.css).
   Reuses the About panels (.hero, .cards-grid/.card, .grid-header,
   .final-cta, .btn-primary) and only adds what the contact page needs:
   a compact hero, the enquiry form, direct channels, office cards and a
   FAQ accordion. All new class names are contact-* to avoid the generic
   class collisions noted for this codebase.
   ===================================================================== */

/* Local semantic colour: crimson is reserved ONLY for required markers and
   validation errors (never as a decorative accent), per the content spec. */
.page-contact { --contact-crimson: #d1274f; }

/* ---- Compact hero (no video; keeps the animated node grid).
   Left-aligned to match the About page hero (and the homepage text layout). ---- */
.page-contact .hero {
  justify-content: flex-start;
  min-height: 54vh;
  padding-top: clamp(40px, 4.6vw, 66px);
  padding-bottom: 66px;
}
.page-contact .hero-content { max-width: 60ch; }
/* The hero background is deliberately NOT overridden here. This page used to
   carry its own blue gradient (#0a1c54 → #061238), which made it the odd one
   out — every other interior page (Industries, Services) uses the shared
   purple-navy `.hero` from styles.css. Removing the override is what puts
   Contact on the same hero as the rest of the site; don't reintroduce a
   per-page hero background. */

/* ============================ SECTION BGs ============================= */
/* The form is the page's conversion moment, so it sits on a dark band between
   two white sections (pillars above, channels below) — the same navy recipe the
   Industries pages use for their dark bands, not a theme-reactive token, so it
   stays dark in both themes like every other content section here.
   Crimson #d1274f is unreadable on navy, so the required-marker/error colour is
   lifted to the same rose used on the Industries dark band. Everything that
   reads var(--contact-crimson) — the intro asterisk, .req markers and
   .field-error — picks this up automatically. */
.page-contact .contact-form-section {
  background: radial-gradient(70% 120% at 88% 0%, rgba(73, 41, 154, 0.22), transparent 60%), var(--color-navy);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  --contact-crimson: #ff8aa6;
}
.page-contact .contact-channels     { background-color: var(--color-white); }
.page-contact .contact-offices      { background-color: var(--color-lavender); box-shadow: inset 0 10px 30px rgba(0,0,59,.02), inset 0 -10px 30px rgba(0,0,59,.02); }
.page-contact .contact-faq          { background-color: var(--color-white); }

/* ===================== SECTION 2 — Two paths ========================= */
.page-contact .contact-paths {
  grid-template-columns: repeat(2, 1fr);
  max-width: 920px;
}
.page-contact .card-ico {
  width: 48px; height: 48px;
  color: var(--color-purple);
  margin-bottom: 1.4rem;
}
.page-contact .card-ico svg { width: 100%; height: 100%; display: block; }
/* The "ready to buy" card carries the visual weight: it sits on a faint
   lavender wash with a slightly stronger border. */
.page-contact .card.card-feature {
  background: linear-gradient(180deg, #fbfbff 0%, #f4f2fd 100%);
  border-color: rgba(73, 41, 154, 0.22);
}
.page-contact .card-note {
  display: inline-block;
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-purple);
  background: rgba(73, 41, 154, 0.08);
  padding: 0.3rem 0.7rem; border-radius: 20px;
}

/* ===================== SECTION 3 — Enquiry form ====================== */
/* The shared .grid-header carries a 5rem bottom margin; that's too much space
   between the "Send Us a Message" heading and the form. Tighten it here. */
.page-contact .contact-form-section .grid-header { margin-bottom: 1.75rem; }
.page-contact .contact-form-section .grid-header h2 { color: var(--color-white); }
.page-contact .contact-form-wrap { max-width: 720px; margin: 0 auto; }
.page-contact .contact-form-intro {
  text-align: center; max-width: 620px; margin: 0 auto 2.75rem auto;
  color: var(--color-text-light); font-size: 1.08rem;
}
.page-contact .contact-form {
  background: linear-gradient(180deg, rgba(52, 28, 122, 0.30), rgba(20, 16, 64, 0.42));
  border: 1px solid rgba(160, 140, 235, 0.28);
  border-radius: 18px;
  padding: clamp(1.75rem, 3vw, 3rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 55px rgba(4, 2, 24, 0.40);
}
.page-contact .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.page-contact .form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.page-contact .form-field.full { grid-column: 1 / -1; }
.page-contact .form-field label {
  font-family: var(--font-heading);
  font-weight: 600; font-size: 0.9rem; color: var(--color-white);
}
/* Required markers. The consent row is .form-consent, NOT .form-field, so its
   `*` was missed by the field rule and inherited the label's light text instead
   of the crimson — which is why it read as a plain dot, not a red star like the
   other required fields. Both selectors share the rule so every required marker
   on the form matches. */
.page-contact .form-field .req,
.page-contact .form-consent .req { color: var(--contact-crimson); margin-left: 2px; text-decoration: none; font-weight: 700; }
.page-contact .form-field input,
.page-contact .form-field select,
.page-contact .form-field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--color-white);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  width: 100%;
}
.page-contact .form-field textarea { resize: vertical; min-height: 130px; }
/* The option list is painted by the OS, not by us, so `background` on <option>
   alone is not enough — without a colour-scheme hint the browser draws the
   popup chrome (its frame, scrollbar and highlight) in LIGHT mode, which is why
   this used to be a white panel dropping out of a dark navy form.
   `color-scheme: dark` tells the browser to paint that native chrome dark; the
   option colours below then sit on it instead of fighting it.
   The earlier rule forced the list light for the opposite reason: the select's
   own text is white, so options inherited white-on-white. Setting both the
   scheme and the colours fixes that without giving up the dark palette. */
.page-contact .form-field select { color-scheme: dark; }
.page-contact .form-field select option {
  /* a shade lifted off --color-navy so the panel reads as a surface above the
     form rather than a hole in it */
  color: var(--color-white);
  background: #14104a;
}
.page-contact .form-field select option:checked,
.page-contact .form-field select option:hover {
  background: var(--color-purple);
  color: var(--color-white);
}
.page-contact .form-field input::placeholder,
.page-contact .form-field textarea::placeholder { color: rgba(255, 255, 255, 0.42); }
.page-contact .form-field input:hover,
.page-contact .form-field select:hover,
.page-contact .form-field textarea:hover { border-color: rgba(255, 255, 255, 0.3); }
.page-contact .form-field input:focus,
.page-contact .form-field select:focus,
.page-contact .form-field textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-cyan-1);
  box-shadow: 0 0 0 3px rgba(77, 127, 230, 0.28);
}
/* Invalid state */
.page-contact .form-field.invalid input,
.page-contact .form-field.invalid select,
.page-contact .form-field.invalid textarea { border-color: var(--contact-crimson); }
.page-contact .form-field.invalid input:focus,
.page-contact .form-field.invalid select:focus,
.page-contact .form-field.invalid textarea:focus { box-shadow: 0 0 0 3px rgba(209, 39, 79, 0.16); }
.page-contact .field-error {
  color: var(--contact-crimson); font-size: 0.82rem; font-weight: 500;
  min-height: 0; display: none;
}
.page-contact .form-field.invalid .field-error { display: block; }

/* Consent checkbox row */
.page-contact .form-consent {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: 0.7rem;
  font-size: 0.92rem; color: var(--color-text-light);
}
/* Purple is too dark to read as "checked" against the navy band — the blue
   accent is the same colour the focus ring already uses. */
.page-contact .form-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-cyan-1); flex-shrink: 0; }
.page-contact .form-consent a { color: #8fb4ff; font-weight: 600; border-bottom: 1px solid currentColor; }

/* Honeypot — visually hidden, kept in the a11y + layout flow off-screen */
.page-contact .hp-field {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.page-contact .form-actions { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.4rem; }
.page-contact .contact-form .btn-primary { width: fit-content; }
.page-contact .form-privacy { font-size: 0.85rem; color: rgba(255, 255, 255, 0.62); }
.page-contact .form-privacy a { color: #8fb4ff; font-weight: 600; border-bottom: 1px solid currentColor; }

/* Shown only when a submission genuinely failed. Red is correct here: this is a
   real failure, not decoration. */
.page-contact .form-senderror {
  margin: 0.9rem 0 0; padding: 0.75rem 0.95rem; border-radius: 10px;
  font-size: 0.9rem; line-height: 1.5; color: #ffd9dc;
  background: rgba(255, 74, 86, 0.10); border: 1px solid rgba(255, 74, 86, 0.38);
}
.page-contact .form-senderror a { color: #ffd9dc; font-weight: 700; border-bottom: 1px solid currentColor; }
.page-contact .form-senderror[hidden] { display: none; }

/* Inline success state (replaces the form, no reload) */
.page-contact .form-success {
  display: none;
  text-align: center;
  background: linear-gradient(180deg, rgba(52, 28, 122, 0.30), rgba(20, 16, 64, 0.42));
  border: 1px solid rgba(160, 140, 235, 0.28);
  border-radius: 18px;
  padding: clamp(2rem, 4vw, 3.25rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 55px rgba(4, 2, 24, 0.40);
}
.page-contact .form-success.show { display: block; }
.page-contact .form-success .tick {
  width: 64px; height: 64px; margin: 0 auto 1.25rem auto;
  color: #8fb4ff;
}
.page-contact .form-success h3 { color: var(--color-white); margin-bottom: 0.75rem; }
.page-contact .form-success p { color: var(--color-text-light); margin: 0; }

/* ===================== SECTION 4 — Direct channels ==================== */
.page-contact .channels-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem; max-width: 1000px; margin: 0 auto;
}
.page-contact .channel {
  display: flex; align-items: center; gap: 1.1rem;
  background: var(--color-white);
  border: 1.5px solid var(--color-lavender);
  border-radius: 14px; padding: 1.5rem 1.6rem;
  transition: var(--transition-smooth);
}
/* Hover is the lift and nothing else - no shadow, and no border recolour.
   Rendering the resting and hover states side by side showed the card fill is
   identical in both, so the blue outline was the only colour hover introduced
   and therefore the thing being seen. The pin/icon accent is left alone: that
   is foreground, not a colour on the block. */
.page-contact .channel:hover { transform: translateY(-4px); }
.page-contact .channel-ico {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(73, 41, 154, 0.08); color: var(--color-purple);
}
.page-contact .channel-ico svg { width: 22px; height: 22px; }
.page-contact .channel-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(0,0,59,.55); margin-bottom: 0.2rem; }
.page-contact .channel-val { font-family: var(--font-heading); font-weight: 600; color: var(--color-navy); font-size: 1.02rem; line-height: 1.35; }
.page-contact .channel-val a { color: var(--color-purple); transition: color .2s ease; }
.page-contact .channel-val a:hover { color: var(--color-cyan-1); }
.page-contact .channels-note { text-align: center; margin-top: 2rem; color: rgba(0,0,59,.6); font-size: 0.98rem; }

/* ===================== SECTION 5 — Offices =========================== */
.page-contact .offices-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem; max-width: 1100px; margin: 0 auto;
}
.page-contact .office-card {
  background: var(--color-white);
  border: 1.5px solid rgba(73, 41, 154, 0.1);
  border-radius: 16px; padding: 2.25rem 2rem;
  transition: var(--transition-smooth); position: relative;
}
/* No shadow at all on hover, in two steps. It was --shadow-glow-cyan, a
   `0 0 15px` halo with zero offset that lit the card up on all four sides;
   swapping that for the site's directional lift shadow removed the halo but
   still tinted the ground under the card. Both are gone now - the hover is the
   lift and the border, nothing painted behind it.
   The token is untouched: .office-item and .cert-badge still use it. */
.page-contact .office-card:hover { transform: translateY(-6px); }
.page-contact .office-pin {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 1.1rem; border-radius: 12px;
  background: rgba(73, 41, 154, 0.08); color: var(--color-purple);
}
.page-contact .office-pin svg { width: 24px; height: 24px; }
.page-contact .office-card:hover .office-pin { color: var(--color-cyan-1); }
.page-contact .office-city { font-family: var(--font-heading); font-weight: 700; color: var(--color-navy); font-size: 1.3rem; margin-bottom: 0.35rem; }
.page-contact .office-role { color: rgba(0,0,59,.7); font-size: 0.98rem; }
.page-contact .office-tag {
  display: inline-block; margin-top: 1rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-purple); background: rgba(73,41,154,.08);
  padding: 0.28rem 0.7rem; border-radius: 20px;
}

/* ===================== SECTION 6 — FAQ accordion ===================== */
.page-contact .faq-list { max-width: 800px; margin: 0 auto; }
.page-contact .faq-item { border-bottom: 1px solid var(--color-lavender); }
.page-contact .faq-item:first-child { border-top: 1px solid var(--color-lavender); }
.page-contact .faq-q {
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0.25rem;
  font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; color: var(--color-navy);
  transition: color 0.2s ease;
}
.page-contact .faq-q:hover { color: var(--color-purple); }
.page-contact .faq-q[aria-expanded="true"] { color: var(--color-purple); }
.page-contact .faq-chevron { flex-shrink: 0; width: 22px; height: 22px; color: var(--color-cyan-1); transition: transform 0.3s ease; }
.page-contact .faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.page-contact .faq-panel { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; }
.page-contact .faq-panel-inner { padding: 0 0.25rem 1.5rem 0.25rem; color: rgba(0,0,59,.75); line-height: 1.7; }
.page-contact .faq-panel-inner a { color: var(--color-purple); font-weight: 600; border-bottom: 1px solid currentColor; }

/* ===================== SECTION 7 — Final CTA ========================= */
/* Mirror the About page's final-CTA exactly: a rounded, inset card with a
   gradient fill, glowing border and slowly-spinning conic sheen, centred
   content and a teal accent word in the heading. (These --heading/--txt/
   --line-hi/--accent tokens come from site-chrome.css, which this page loads.) */
.page-contact .final-cta {
  position: relative; overflow: hidden;
  background: #00003b;
  padding: clamp(70px, 8vw, 120px) 0;
  border-radius: 28px;
  margin: clamp(20px, 3vw, 44px) clamp(12px, 2vw, 32px);
}
[data-theme="light"] .page-contact .final-cta { background: #EEF0FB; }
.page-contact .final-cta::before,
.page-contact .final-cta::after { display: none !important; }
.page-contact .final-cta .final-bg {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, rgba(77, 127, 230, 0.16), rgba(90, 63, 176, 0.2));
  border: 1px solid var(--line-hi);
  border-radius: 28px; overflow: hidden;
}
.page-contact .final-cta .final-bg::before {
  content: ""; position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, transparent, rgba(77, 127, 230, 0.18), transparent 40%, rgba(90, 63, 176, 0.16), transparent 75%);
  animation: spin 16s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .page-contact .final-cta .final-bg::before { animation: none; }
}
.page-contact .final-cta-content {
  position: relative; z-index: 2; max-width: 920px; margin-inline: auto; text-align: center;
}
.page-contact .final-cta h2 { color: var(--heading); font-size: clamp(2.3rem, 5.4vw, 3.4rem); }
.page-contact .final-cta h2 em.accent { font-style: italic; color: #00dddd; font-weight: 700; }
.page-contact .final-cta p { color: var(--txt); font-size: 1.32rem; }
.page-contact .final-cta-link {
  color: var(--accent); text-decoration: none; font-weight: 600; border-bottom: 0; padding-bottom: 0;
}
.page-contact .final-cta-link:hover { color: var(--accent-2); border-color: transparent; transform: none; }

/* Note: the shared cym design system (styles.css) defines NO [data-theme="dark"]
   rules — content sections stay light (white/lavender with navy headings) in
   both themes, and only the hero + header/footer chrome respond to the toggle.
   The contact sections deliberately follow that same model, so no dark-theme
   overrides are added here. */

/* ============================ Responsive ============================= */
@media (max-width: 860px) {
  .page-contact .channels-grid,
  .page-contact .offices-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .page-contact .contact-paths { grid-template-columns: 1fr; }
  .page-contact .form-grid { grid-template-columns: 1fr; }
}