/* ============================================================
   PAGE: support
   ============================================================ */

/* Visually-hidden utility (WCAG 4.1.2) */
body.page-contact .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

body.page-contact *, body.page-contact *::before, body.page-contact *::after, body.page-contact { margin: 0; padding: 0; box-sizing: border-box; }

:root:has(body.page-contact) {
  --blue-light: #4da6ff;
  --blue-dark: #0a1e3d;
  --bg: #050a14;
  --glass-border: rgba(255,255,255,0.25);
}

html:has(body.page-contact) { scroll-behavior: smooth; overflow-x: hidden; }

body.page-contact {
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: #fff;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  max-width: 100vw;
}

/* ─── Nav ─── */

body.page-contact .nav-wrapper { position: fixed; top: 24px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; z-index: 1000; padding: 0 24px; pointer-events: none; }
body.page-contact .nav-wrapper.nav-enter { animation: navDrop 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.3s both; }
/* The page transition must never swallow this entrance: hold it at frame 0
   while the veil is up (html.ll-loading) so the full run plays the moment it
   lifts. Same pattern as the two product heroes. */
html.ll-loading body.page-contact .nav-wrapper.nav-enter { animation-play-state: paused; }
body.page-contact .nav { pointer-events: auto; }

body.page-contact .nav {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  border-radius: 999px; border: 1px solid var(--glass-border);
  position: relative; overflow: hidden;
  background: rgba(18,18,28,0.22);
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
}

body.page-contact .nav::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  pointer-events: none;
  z-index: 0;
}

body.page-contact .nav a {
  position: relative; z-index: 1; text-decoration: none; color: rgba(255,255,255,0.65);
  font-size: 14px; font-weight: 500; padding: 8px 20px; border-radius: 999px;
  transition: color 0.25s, background 0.25s, padding 0.35s cubic-bezier(0.23, 1, 0.32, 1); white-space: nowrap;
  display: flex; align-items: center; gap: 6px; text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

body.page-contact .nav a:hover { color: #fff; background: rgba(255,255,255,0.08); }
body.page-contact .nav a.active { color: #fff; background: rgba(255,255,255,0.12); }

body.page-contact .nav-icon { display: none; width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }

body.page-contact .nav-label { display: inline; overflow: hidden; max-width: 100px; transition: opacity 0.25s ease; opacity: 1; text-overflow: ellipsis; }
body.page-contact .light-only { display: none !important; }
[data-theme="light"] body.page-contact .dark-only { display: none !important; }
[data-theme="light"] body.page-contact .light-only { display: inline !important; }

@media (max-width: 640px) {
  body.page-contact .nav { gap: 3px; padding: 8px 10px; }
  body.page-contact .nav a { padding: 9px 12px; font-size: 13px; }
  body.page-contact .nav-icon { display: block; }
  body.page-contact .nav-label { max-width: 0; opacity: 0; }
  body.page-contact .nav a.active .nav-label { max-width: 70px; opacity: 1; font-size: 12px; }
  body.page-contact .nav a.active { padding: 9px 14px; }
}

/* ─── Shared ─── */
body.page-contact .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 32px;
  border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none;
  transition: all 0.3s; cursor: pointer; border: none; font-family: inherit;
  min-height: 44px; /* WCAG 2.5.5 target size */
}

body.page-contact .btn-primary { background: #fff; color: var(--bg); }
body.page-contact .btn-primary:hover { background: rgba(255,255,255,0.9); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(77,166,255,0.25); }

/* ─── Page ─── */
body.page-contact .page-section {
  display: flex; flex-direction: column; align-items: center;
  position: relative; padding: 120px 24px 80px;
}

/* Post-submit success state: the form + address card are removed (display:none),
   which would otherwise let the short content pull the footer up into view. Keep
   the content top-aligned (so the // SUPPORT / Get in touch / subtext heading stays
   pinned to the top exactly like every other page) and make the section fill the
   viewport, so the footer is always pushed below the fold. Only applies while
   .contact-success is visible, so the normal form layout is untouched. */
body.page-contact .page-section:has(.contact-success.visible),
body.page-contact .page-section:has(.contact-error.visible) {
  min-height: 100vh;
  justify-content: center;
  padding-top: 80px;
}

body.page-contact .page-section .label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--blue-light); margin-bottom: 16px;
}

body.page-contact .page-section h1 {
  font-size: clamp(28px, 4vw, 44px); font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 16px; text-align: center; color: #fff;
}

body.page-contact .page-section > p,
body.page-contact .page-section > .real-content > .contact-intro > p,
body.page-contact .page-section > .skeleton-content > .contact-intro > p {
  color: rgba(255,255,255,0.7); font-size: 16px; max-width: 500px;
  text-align: center; margin-bottom: 56px; line-height: 1.6;
}

/* ─── Form ─── */
body.page-contact .contact-form {
  max-width: 640px; width: 100%;
  background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)), var(--bg); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px; padding: 48px 40px;
}

body.page-contact .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
/* min-width:0 lets the grid column shrink below the field's intrinsic min-width
   (the default `min-width:auto` on grid items is what let inputs overflow the
   card's padding on narrow viewports). */
body.page-contact .form-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
body.page-contact .form-group.full { grid-column: 1 / -1; }

body.page-contact .form-group label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.6); letter-spacing: 0.02em; }
body.page-contact .form-group label .required { color: var(--blue-light); margin-left: 2px; }

body.page-contact .form-group input, body.page-contact .form-group select, body.page-contact .form-group textarea {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 14px 18px; color: #fff; font-size: 15px;
  font-family: inherit; transition: border-color 0.3s, background 0.3s;
  outline: none; -webkit-appearance: none; min-height: 44px;
  width: 100%; min-width: 0; /* fill the column and allow shrinking - never overflow the card */
}

body.page-contact .form-group input:focus, body.page-contact .form-group select:focus, body.page-contact .form-group textarea:focus {
  border-color: var(--blue-light); background: rgba(77,166,255,0.04);
}

body.page-contact .form-group input::placeholder, body.page-contact .form-group textarea::placeholder { color: rgba(255,255,255,0.2); }
body.page-contact .form-group select { cursor: pointer; color: rgba(255,255,255,0.7); }
body.page-contact .form-group select option { background: #0a1e3d; color: #fff; }
body.page-contact .form-group textarea { min-height: 140px; resize: vertical; }

body.page-contact .form-submit { margin-top: 32px; text-align: center; }
body.page-contact .form-submit .btn { min-width: 200px; }
body.page-contact .form-note { margin-top: 16px; font-size: 12px; color: rgba(255,255,255,0.5); text-align: center; }

/* Per-field error note (the disposable-email message under the email field).
   Same red family as the validating pill; the hidden attribute does the
   show/hide, so no display rule here. */
body.page-contact .field-error { font-size: 12px; line-height: 1.5; color: rgba(255,100,100,0.9); margin-top: 2px; }

/* ─── Validation feedback ───
   Mirrors the content-submission subsite (cs) one-to-one: the required
   asterisk SNAPS red and HOLDS, the button shakes then shows a red
   "validating" pill with a sweeping timer-fill, and when the button starts
   its return animation JS removes .flash-red so the asterisk fades back in
   perfect lock-step (matched 0.65s curve below). */
body.page-contact .form-group label .required {
  display: inline-block; transform-origin: center;
  transition: color 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
body.page-contact .form-group label .required.flash-red { animation: supportRequiredPunch 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
body.page-contact .btn-primary.shake { animation: supportBtnShake 0.5s ease-in-out both; }

/* Red "validating" pill + sweeping fill bar (same visual language as cs). */
body.page-contact .btn-primary.validating {
  position: relative;
  background: linear-gradient(135deg, rgba(255,100,100,0.1) 0%, rgba(255,100,100,0.04) 50%, rgba(255,100,100,0.07) 100%);
  border: 1px solid rgba(255,100,100,0.2);
  color: rgba(255,100,100,0.9);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(255,255,255,0.02);
  clip-path: inset(0 round 999px);
  pointer-events: none; transform: none; transition: none; white-space: nowrap;
}
body.page-contact .btn-primary.validating::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 0;
  background: rgba(255,80,80,0.15);
  animation: supportTimerFill 2.5s ease-out forwards;
}
body.page-contact .btn-primary.returning {
  animation: supportReturnToBtn 0.65s cubic-bezier(0.22,1,0.36,1) forwards;
  color: var(--bg); pointer-events: none;
}

/* Sending: a spinner leads the label while the mailer works (files and the
   send take a moment); the label and the width stay as they are. */
body.page-contact .btn-primary.is-sending { pointer-events: none; transform: none; }
body.page-contact .btn-primary.is-sending::before {
  content: ''; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: supportSendSpin 0.7s linear infinite;
}
@keyframes supportSendSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body.page-contact .btn-primary.is-sending::before { animation-duration: 1.6s; }
}

/* ─── "Message sent" success panel ─── */
body.page-contact .contact-form { transition: opacity 0.4s ease, transform 0.4s ease; }
body.page-contact .contact-form.form-hide { opacity: 0; transform: translateY(-8px) scale(0.99); pointer-events: none; }
/* The intro heading block fades out in lock-step with the form on a
   successful submit, then fades back in when the form is restored. */
body.page-contact .contact-intro {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; text-align: center;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
body.page-contact .contact-intro.form-hide { opacity: 0; transform: translateY(-8px) scale(0.99); pointer-events: none; }
/* The address card under the form fades out in lock-step with the form on a
   successful submit, then fades back in when the form is restored. */
body.page-contact .address-block { transition: opacity 0.4s ease, transform 0.4s ease; }
body.page-contact .address-block.form-hide { opacity: 0; transform: translateY(-8px) scale(0.99); pointer-events: none; }

body.page-contact .contact-success {
  display: none; flex-direction: column; align-items: center; text-align: center;
  width: 100%; max-width: 560px; margin: 8px auto 0; padding: 24px 0 8px;
}
body.page-contact .contact-success.visible { display: flex; }

body.page-contact .cs-badge { position: relative; width: 96px; height: 96px; margin-bottom: 28px; display: flex; align-items: center; justify-content: center; }
body.page-contact .cs-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(77,166,255,0.28) 0%, rgba(77,166,255,0) 68%);
}
body.page-contact .contact-success.visible .cs-ring { animation: csRingPulse 2.6s ease-out 0.5s infinite; }

/* The brand-mark success animation (shared llm* keyframes live in shared.css):
   the primaryLogo 4-square mark pops in, its squares fragment outward, shake,
   then spring back on the exact brand colours (the hue sweep is removed).
   The amber window then resumes the logo's 9s flicker. */
body.page-contact .llm-svg { width: 88px; height: 88px; overflow: visible;
  filter: drop-shadow(0 0 10px rgba(77,166,255,0.35)); }
body.page-contact .llm-tile { fill: #050a14; }
body.page-contact .llm-tint { fill: rgba(77,166,255,0.09); stroke: rgba(77,166,255,0.35); stroke-width: 1; }
body.page-contact .llm-shine { fill: rgba(255,255,255,0.07); }
body.page-contact .llm-sq { transform-box: fill-box; transform-origin: center; }
body.page-contact .llm-sq1 { fill: #4da6ff; --fx: -5.6px; --fy: -5.6px; --fr: -9deg; }
body.page-contact .llm-sq2 { fill: #56d9e4; opacity: 0.85; --fx: 5.6px; --fy: -5.6px; --fr: 8deg; }
body.page-contact .llm-sq3 { fill: #4da6ff; opacity: 0.4; --fx: -5.6px; --fy: 5.6px; --fr: 7deg; }
body.page-contact .llm-sq4 { fill: #f5b342; --fx: 5.6px; --fy: 5.6px; --fr: -8deg; }
body.page-contact .contact-success.visible .cs-badge { animation: llmPop 0.9s cubic-bezier(0.23, 1, 0.32, 1) both; }
body.page-contact .contact-success.visible .llm-svg { animation: llmShake 1.5s ease-in-out both; }
body.page-contact .contact-success.visible .llm-sq { animation: llmFrag 1.5s cubic-bezier(0.68, -0.15, 0.27, 1.25) both; }
/* The window flickers by fill on its own rect (2026-09-11); the fragment
   transform rides the square's wrapper, so the flickering rect never carries
   a transform and an opacity together (that pairing could leave a pixel lit). */
body.page-contact .contact-success.visible .llm-win { animation: llmWindow 9s steps(1) 2.2s infinite; }

body.page-contact .cs-label { font-size: 13px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 14px; }
body.page-contact .cs-title { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; letter-spacing: -0.02em; color: #fff; margin-bottom: 0; }
body.page-contact .contact-success .cs-label,
body.page-contact .contact-success .cs-title { opacity: 0; }
body.page-contact .contact-success.visible .cs-label { animation: csRise 0.5s ease both 0.95s; }
body.page-contact .contact-success.visible .cs-title { animation: csRise 0.5s ease both 1.1s; }

/* ─── "Not sent" error panel (the X counterpart of the success badge) ─── */
/* Reuses the same badge layout and the shared csDraw / csRise / csRingPulse
   keyframes; only the geometry (an X) and the colour (red) differ. */
body.page-contact .contact-error {
  display: none; flex-direction: column; align-items: center; text-align: center;
  width: 100%; max-width: 560px; margin: 8px auto 0; padding: 24px 0 8px;
}
body.page-contact .contact-error.visible { display: flex; }

body.page-contact .cs-ring-error { background: radial-gradient(circle, rgba(255,94,94,0.28) 0%, rgba(255,94,94,0) 68%); }
body.page-contact .contact-error.visible .cs-ring-error { animation: csRingPulse 2.6s ease-out 0.5s infinite; }

body.page-contact .cs-cross { width: 96px; height: 96px; }
body.page-contact .cs-cross-circle { fill: rgba(255,94,94,0.08); stroke: #ff5e5e; stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; }
body.page-contact .cs-cross-line { fill: none; stroke: #ff5e5e; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; filter: drop-shadow(0 0 6px rgba(255,94,94,0.5)); }
body.page-contact .contact-error.visible .cs-cross-circle { animation: csDraw 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
body.page-contact .contact-error.visible .cs-cross-line1 { animation: csDraw 0.32s cubic-bezier(0.65, 0, 0.45, 1) 0.5s forwards; }
body.page-contact .contact-error.visible .cs-cross-line2 { animation: csDraw 0.32s cubic-bezier(0.65, 0, 0.45, 1) 0.72s forwards; }

body.page-contact .contact-error .cs-label-error { color: #ff5e5e; }
body.page-contact .contact-error .cs-label,
body.page-contact .contact-error .cs-title { opacity: 0; }
body.page-contact .contact-error.visible .cs-label { animation: csRise 0.5s ease both 0.98s; }
body.page-contact .contact-error.visible .cs-title { animation: csRise 0.5s ease both 1.1s; }

@media (prefers-reduced-motion: reduce) {
  body.page-contact .contact-form,
  body.page-contact .address-block { transition: none; }
  body.page-contact .form-group label .required.flash-red,
  body.page-contact .btn-primary.shake,
  body.page-contact .btn-primary.validating::before,
  body.page-contact .btn-primary.returning,
  body.page-contact .contact-success.visible .cs-ring { animation: none; }
  body.page-contact .contact-success.visible .cs-badge,
  body.page-contact .contact-success.visible .llm-svg,
  body.page-contact .contact-success.visible .llm-sq,
  body.page-contact .contact-success.visible .llm-sq4,
  body.page-contact .contact-success.visible .llm-win { animation: none; }
  body.page-contact .contact-success .cs-label,
  body.page-contact .contact-success .cs-title { opacity: 1; }
  body.page-contact .contact-success.visible .cs-label,
  body.page-contact .contact-success.visible .cs-title { animation: none; }
  /* Error panel: same reduced-motion treatment */
  body.page-contact .contact-error.visible .cs-ring-error { animation: none; }
  body.page-contact .contact-error.visible .cs-cross-circle,
  body.page-contact .contact-error.visible .cs-cross-line { animation: none; stroke-dashoffset: 0; }
  body.page-contact .contact-error .cs-label,
  body.page-contact .contact-error .cs-title { opacity: 1; }
  body.page-contact .contact-error.visible .cs-label,
  body.page-contact .contact-error.visible .cs-title { animation: none; }
}

/* ─── Address ─── */
body.page-contact .address-block {
  max-width: 640px; width: 100%; margin-top: 64px; padding: 40px 36px;
  background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)), var(--bg); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}

body.page-contact .address-col h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px; color: #fff; }
body.page-contact .address-col p { color: rgba(255,255,255,0.5); font-size: 14px; line-height: 1.8; }
body.page-contact .address-col a,
body.page-contact .address-note a { color: var(--blue-light); text-decoration: none; transition: color 0.2s; }
body.page-contact .address-col a:hover,
body.page-contact .address-note a:hover { color: #fff; }
body.page-contact .address-note {
  grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px;
  margin-top: 4px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.06);
}
body.page-contact .address-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--blue-light); }
body.page-contact .address-note p { color: rgba(255,255,255,0.5); font-size: 12.5px; line-height: 1.7; }

body.page-contact footer {
  text-align: center; padding: 48px 24px 32px; color: rgba(255,255,255,0.2);
  font-size: 13px; border-top: 1px solid rgba(255,255,255,0.04); margin-top: 40px;
}
body.page-contact .footer-social { display: flex; justify-content: center; gap: 10px; margin-bottom: 24px; }
body.page-contact .footer-social a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.3); text-decoration: none; transition: color 0.25s, border-color 0.25s, transform 0.25s; }
body.page-contact .footer-social a:hover { color: var(--blue-light); border-color: rgba(77,166,255,0.3); transform: translateY(-2px); }
body.page-contact .footer-social a svg { width: 14px; height: 14px; }
body.page-contact footer .footer-links { display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; row-gap: 4px; margin-bottom: 24px; }
body.page-contact footer .footer-links a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; font-size: clamp(11px, 3vw, 13px);
  /* inline-block + padding lifts these from a 14px-tall target to 24px,
     the WCAG 2.2 AA 2.5.8 minimum. They wrap onto two rows on a phone,
     so a short target here meant real mis-taps between legal pages. */
  display: inline-block; padding: 5px 0; }
body.page-contact footer .footer-links a:hover { color: rgba(255,255,255,0.6); }
body.page-contact footer .footer-sep { color: rgba(255,255,255,0.3); margin: 0 clamp(4px, 1.5vw, 10px); }
body.page-contact footer .address { color: rgba(255,255,255,0.48); margin-bottom: 8px; }
body.page-contact footer .footer-copy { color: rgba(255,255,255,0.46); }
[data-theme="light"] body.page-contact .footer-social a { border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-contact .footer-social a:hover { color: var(--blue-light); border-color: rgba(77,166,255,0.3); }
[data-theme="light"] body.page-contact footer .footer-links a { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-contact footer .footer-links a:hover { color: #1a1a2e; }
[data-theme="light"] body.page-contact footer .footer-copy { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-contact footer .footer-sep { color: rgba(0,0,0,0.45); }

@media (max-width: 640px) {
  body.page-contact .form-row { grid-template-columns: 1fr; }
  body.page-contact .contact-form { padding: 32px 24px; }
  body.page-contact .address-block { grid-template-columns: 1fr; }
}

/* ─── Theme toggle ─── */
body.page-contact .theme-toggle { position: relative; z-index: 1; width: 34px; height: 34px; border: none; background: transparent; cursor: pointer; border-radius: 50%; margin-left: 2px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.65); transition: color 0.25s, background 0.25s; text-decoration: none; padding: 0; font-size: 0; min-width: 34px; flex-shrink: 0; }
body.page-contact .theme-toggle:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* ─── Mobile header bubble (the client portal sign-in link since 2026-09-17) ─── */
body.page-contact .theme-toggle-mobile {
  display: none; pointer-events: auto;
  width: 48px; height: 48px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: rgba(18,18,28,0.22);
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
  cursor: pointer; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.65);
  transition: color 0.25s, border-color 0.25s;
  padding: 0; font-size: 0; margin-left: 8px; flex-shrink: 0;
}
body.page-contact .theme-toggle-mobile:hover { border-color: rgba(255,255,255,0.2); }
:root:has(body.page-contact) { --nav-scale: 1; }
body.page-contact .nav-fit { display: flex; align-items: center; gap: 8px; width: max-content; max-width: none; transform: scale(var(--nav-scale)); transform-origin: center top; pointer-events: auto; will-change: transform; }
body.page-contact .nav-fit.nav-fit-transitions { transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1); }

/* ─── Mobile nav-link click animation ───
   .nav-collapsed = active label is currently at width 0.
   .nav-anim      = transition is currently enabled (only present during the
   collapse-on-click window on the outgoing page, and during the expand-on-
   load window on the incoming page).
   Without .nav-anim, refresh and breakpoint resize both snap - preserves
   the "no character-by-character reveal" guarantee from the previous fix. */
@media (max-width: 640px) {
  html.nav-collapsed:has(body.page-contact) .nav a.active .nav-label {
    max-width: 0;
    opacity: 0;
  }
  html.nav-anim:has(body.page-contact) .nav a.active .nav-label {
    transition: max-width 220ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 180ms ease;
  }
  /* Neutralise the active highlight during the collapsed state so all 5
     links read as plain icons (no grey background, no brighter text, no
     widened padding). The existing `transition: color 0.25s, background
     0.25s` on `.nav a` smoothly fades the styling out and back in. */
  html.nav-collapsed:has(body.page-contact) .nav a.active {
    background: transparent;
    color: rgba(255,255,255,0.65);
    /* Symmetric padding + zero gap so the active pill collapses to a true
       circle (16px icon + 9px padding × 2 = 34×34) instead of an oval. */
    padding: 9px;
    gap: 0;
  }
  html[data-theme="light"].nav-collapsed:has(body.page-contact) .nav a.active {
    color: rgba(0,0,0,0.6);
  }
}
body.page-contact .nav { gap: 6px; padding: 8px 10px; }
body.page-contact .nav a { font-size: 14px; padding: 8px 20px; gap: 6px; }
body.page-contact .nav-icon { width: 16px; height: 16px; }
body.page-contact .nav-label { max-width: 100px; }
body.page-contact .theme-toggle { width: 34px; height: 34px; min-width: 34px; margin-left: 2px; }
body.page-contact .theme-toggle-mobile { width: 48px; height: 48px; margin-left: 0; }
@media (max-width: 640px) {
  body.page-contact .nav-fit { gap: 8px; }
  body.page-contact .nav { gap: 3px; padding: 8px 10px; }
  body.page-contact .nav a { padding: 9px 12px; font-size: 13px; }
  body.page-contact .nav a:not(.active) .nav-label { max-width: 0; opacity: 0; }
  body.page-contact .nav a.active .nav-label { max-width: 70px; font-size: 12px; }
  body.page-contact .nav a.active { padding: 9px 14px; }
}
[data-theme="light"] body.page-contact .theme-toggle-mobile { border-color: rgba(0,0,0,0.08); color: rgba(0,0,0,0.6); background: rgba(255,255,255,0.3); backdrop-filter: blur(32px) saturate(2.0); -webkit-backdrop-filter: blur(32px) saturate(2.0); box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.7); }
[data-theme="light"] body.page-contact .theme-toggle-mobile:hover { border-color: rgba(0,0,0,0.2); }
@media (max-width: 640px) {
  body.page-contact .nav .theme-toggle { display: none; }
  body.page-contact .theme-toggle-mobile { display: flex; }
}

[data-theme="light"]:has(body.page-contact) { --bg: #eef1f6; --blue-light: #1a66b5; --glass-border: rgba(0,0,0,0.13); }
[data-theme="light"] body.page-contact { background: var(--bg); color: #1a1a2e; }
[data-theme="light"] body.page-contact .theme-toggle { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-contact .theme-toggle:hover { color: #1a1a2e; background: rgba(0,0,0,0.05); }
[data-theme="light"] body.page-contact .nav { background: rgba(255,255,255,0.3); backdrop-filter: blur(32px) saturate(2.0); -webkit-backdrop-filter: blur(32px) saturate(2.0); border-color: rgba(0,0,0,0.08); box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.7); }
[data-theme="light"] body.page-contact .nav::before { opacity: 0.5; }
[data-theme="light"] body.page-contact .nav a { color: rgba(0,0,0,0.6); text-shadow: 0 1px 2px rgba(255,255,255,0.5); }
[data-theme="light"] body.page-contact .nav a:hover { color: #1a1a2e; background: rgba(0,0,0,0.05); }
[data-theme="light"] body.page-contact .nav a.active { color: #1a1a2e; background: rgba(0,0,0,0.11); }

/* ── Adaptive nav text ── */
body.page-contact .nav.nav-dark-adaptive a { color: rgba(0,0,0,0.7); text-shadow: 0 1px 2px rgba(255,255,255,0.3); }
body.page-contact .nav.nav-dark-adaptive a:hover { color: rgba(0,0,0,0.9); }
body.page-contact .nav.nav-dark-adaptive a.active { color: rgba(0,0,0,0.9); }
body.page-contact .nav.nav-dark-adaptive .theme-toggle { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-contact .nav.nav-light-adaptive a { color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
[data-theme="light"] body.page-contact .nav.nav-light-adaptive a:hover { color: #fff; }
[data-theme="light"] body.page-contact .nav.nav-light-adaptive a.active { color: #fff; }
[data-theme="light"] body.page-contact .nav.nav-light-adaptive .theme-toggle { color: rgba(255,255,255,0.8); }

[data-theme="light"] body.page-contact .btn-primary { background: #1a1a2e; color: #fff; }
[data-theme="light"] body.page-contact .btn-primary:hover { background: #2a2a4e; }
[data-theme="light"] body.page-contact .btn-outline { color: #1a1a2e; border-color: rgba(0,0,0,0.15); }
[data-theme="light"] body.page-contact .btn-outline:hover { border-color: rgba(0,0,0,0.6); background: rgba(0,0,0,0.04); }
[data-theme="light"] body.page-contact .page-section .label { color: #2b7fd4; }
[data-theme="light"] body.page-contact .page-section h1 { color: #1a1a2e; }
[data-theme="light"] body.page-contact .page-section > p,
[data-theme="light"] body.page-contact .page-section > .real-content > .contact-intro > p,
[data-theme="light"] body.page-contact .page-section > .skeleton-content > .contact-intro > p { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-contact .contact-form { background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), var(--bg); border-color: rgba(0,0,0,0.11); }
[data-theme="light"] body.page-contact .form-group label { color: rgba(26,26,46,0.65); }
[data-theme="light"] body.page-contact .form-group input, [data-theme="light"] body.page-contact .form-group select, [data-theme="light"] body.page-contact .form-group textarea { background: rgba(255,255,255,0.88); border-color: rgba(0,0,0,0.12); color: #1a1a2e; }
[data-theme="light"] body.page-contact .form-group input:focus, [data-theme="light"] body.page-contact .form-group select:focus, [data-theme="light"] body.page-contact .form-group textarea:focus { border-color: #2b7fd4; background: rgba(43,127,212,0.08); }
[data-theme="light"] body.page-contact .form-group input::placeholder, [data-theme="light"] body.page-contact .form-group textarea::placeholder { color: rgba(26,26,46,0.45); }
[data-theme="light"] body.page-contact .form-group select { color: rgba(26,26,46,0.85); }
[data-theme="light"] body.page-contact .form-group select option { background: #f5f7fa; color: #1a1a2e; }
[data-theme="light"] body.page-contact .form-note { color: rgba(26,26,46,0.7); }
[data-theme="light"] body.page-contact .field-error { color: rgba(190,40,40,0.95); }
[data-theme="light"] body.page-contact .btn-primary.validating { color: rgba(200,50,50,0.9); border-color: rgba(200,50,50,0.2); background: linear-gradient(135deg, rgba(200,50,50,0.08) 0%, rgba(200,50,50,0.03) 50%, rgba(200,50,50,0.06) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.04); }
[data-theme="light"] body.page-contact .btn-primary.validating::before { background: rgba(200,50,50,0.1); }
[data-theme="light"] body.page-contact .btn-primary.returning { animation: supportReturnToBtnLight 0.65s cubic-bezier(0.22,1,0.36,1) forwards; color: #fff; }
[data-theme="light"] body.page-contact .cs-ring { background: radial-gradient(circle, rgba(43,127,212,0.3) 0%, rgba(43,127,212,0) 68%); }
[data-theme="light"] body.page-contact .cs-label { color: #1a66b5; }
[data-theme="light"] body.page-contact .cs-title { color: #1a1a2e; }
[data-theme="light"] body.page-contact .cs-cross-circle { fill: rgba(216,58,58,0.1); stroke: #d83a3a; }
[data-theme="light"] body.page-contact .cs-cross-line { stroke: #d83a3a; filter: drop-shadow(0 0 6px rgba(216,58,58,0.4)); }
[data-theme="light"] body.page-contact .cs-ring-error { background: radial-gradient(circle, rgba(216,58,58,0.3) 0%, rgba(216,58,58,0) 68%); }
[data-theme="light"] body.page-contact .contact-error .cs-label-error { color: #d83a3a; }
[data-theme="light"] body.page-contact .address-block { background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), var(--bg); border-color: rgba(0,0,0,0.11); }
[data-theme="light"] body.page-contact .address-col h3 { color: #1a1a2e; }
[data-theme="light"] body.page-contact .address-col p { color: rgba(26,26,46,0.85); }
[data-theme="light"] body.page-contact .address-col a,
[data-theme="light"] body.page-contact .address-note a { color: #1a66b5; }
[data-theme="light"] body.page-contact .address-col a:hover,
[data-theme="light"] body.page-contact .address-note a:hover { color: #1a1a2e; }
[data-theme="light"] body.page-contact .address-note { border-color: rgba(0,0,0,0.1); }
[data-theme="light"] body.page-contact .address-note p { color: rgba(26,26,46,0.72); }
[data-theme="light"] body.page-contact .address-note svg { color: #1a66b5; }
[data-theme="light"] body.page-contact footer { color: rgba(0,0,0,0.6); border-color: rgba(0,0,0,0.09); }
[data-theme="light"] body.page-contact footer .address { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-contact footer .footer-links a { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-contact footer .footer-links a:hover { color: #1a1a2e; }
[data-theme="light"] body.page-contact footer .footer-sep { color: rgba(0,0,0,0.45); }
[data-theme="light"] body.page-contact .footer-social a { border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-contact .footer-social a:hover { color: var(--blue-light); border-color: rgba(77,166,255,0.3); }
[data-theme="light"] body.page-contact footer .footer-logo { filter: drop-shadow(0 0 6px rgba(43,127,212,0.3)); }
/* Success mark, light: the light logo file's tile ground and glass highlight
   (squares and tint are theme-invariant), with the glow in the light blue. */
[data-theme="light"] body.page-contact .llm-svg { filter: drop-shadow(0 0 10px rgba(43,127,212,0.3)); }
[data-theme="light"] body.page-contact .llm-tile { fill: #ffffff; }
[data-theme="light"] body.page-contact .llm-win { --llm-dim: #f7e9d0; }
[data-theme="light"] body.page-contact .llm-shine { fill: rgba(255,255,255,0.85); }

body.page-contact footer a:has(> .footer-logo) { display: inline-block; }
body.page-contact .footer-logo {
  width: 48px; height: auto; margin-bottom: 14px;
  filter: drop-shadow(0 0 6px rgba(77,166,255,0.4));
}

/* ─── Skeleton ─── */
body.page-contact .skeleton-text { height: 12px; margin-bottom: 8px; width: 80%; }
body.page-contact .skeleton-text.short { width: 40%; }
body.page-contact .skeleton-text.medium { width: 60%; }
body.page-contact .skeleton-heading { height: 28px; width: 50%; margin-bottom: 12px; border-radius: 8px; }
body.page-contact .skeleton-heading.large { height: 42px; width: 70%; }
body.page-contact .skeleton-card { border-radius: 20px; padding: 24px; min-height: 120px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.025); }
body.page-contact .skeleton-pill { height: 28px; width: 100px; border-radius: 999px; }
body.page-contact .skeleton-bar { height: 4px; width: 100%; border-radius: 999px; }
body.page-contact .skeleton-circle { width: 30px; height: 30px; border-radius: 50%; }
body.page-contact .skeleton-amount { height: 36px; width: 120px; margin: 0 auto 8px; border-radius: 8px; }
body.page-contact .skeleton-btn { height: 48px; width: 100%; border-radius: 14px; }
body.page-contact .skeleton-input { height: 44px; width: 100%; border-radius: 12px; }
body.page-contact .skeleton-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; gap: 12px; }
body.page-contact .skeleton-row .skeleton-text { margin-bottom: 0; }
body.page-contact .skeleton-dot { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
body.page-contact .skeleton-dots-row { display: flex; justify-content: center; gap: 24px; margin-top: 12px; }
/* .real-content is display:contents when loaded, so .contact-intro and
   .contact-form are each a DIRECT flex item of .page-section and each sizes
   to fit-content under align-items:center. The skeleton copy has to occupy
   the same position in that flex layout, otherwise its wrapper becomes a
   single item that stretches to the full section width (1392px instead of
   640px). Hence display:contents here too - and because opacity has no
   effect on a display:contents box, the fade moves onto the children. */
body.page-contact .skeleton-content { display: contents; }
body.page-contact .skeleton-content > * { opacity: 0; transition: opacity 0.2s; }
body.page-contact.show-skeleton .skeleton-content > * { opacity: 1; }
body.page-contact.loaded .skeleton-content { display: none !important; }
body.page-contact:not(.loaded) .real-content { display: none; }
body.page-contact.loaded .real-content { display: contents; }
/* skeleton form-row / address-block collapse to match real breakpoints */
@media (max-width: 640px) {
  /* Match real .contact-form padding shrink */
}
/* Respect prefers-reduced-motion (WCAG 2.2 AA 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  body.page-contact *, body.page-contact *::before, body.page-contact *::after, body.page-contact {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body.page-contact .skip-link {position:fixed;top:-48px;left:0;background:#2b7fd4;color:#fff;padding:10px 16px;z-index:99999;text-decoration:none;font-weight:600;border-radius:0 0 4px 0;transition:top .2s ease,opacity .2s ease;font-size:14px;opacity:0;pointer-events:none;white-space:nowrap}
body.page-contact .skip-link:focus, body.page-contact .skip-link:focus-visible {top:0;opacity:1;pointer-events:auto;outline:2px solid #fff;outline-offset:-4px}

/* Global :focus-visible - keyboard accessibility (WCAG 2.4.7) */
body.page-contact a:focus-visible, body.page-contact button:focus-visible, body.page-contact [role="button"]:focus-visible, body.page-contact input:focus-visible, body.page-contact select:focus-visible, body.page-contact textarea:focus-visible, body.page-contact .btn:focus-visible, body.page-contact .theme-toggle:focus-visible, body.page-contact .theme-toggle-mobile:focus-visible {
  outline: 2px solid var(--blue-light, #4da6ff);
  outline-offset: 2px;
  border-radius: 4px;
}
body.page-contact .btn:focus-visible { border-radius: 999px; }