/* Verbatim <style> block from Contact Page.dc.html — do NOT edit.
   (Values are all tokens / clamp / fr units / % — nothing fixed-px to convert;
   @media breakpoint conditions stay in px per the fluid-scaling rule.) */

body { margin: 0; background: var(--paper); font-family: var(--font-sans), system-ui, sans-serif; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
@property --fr-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes fr-border-flow { to { --fr-angle: 360deg; } }
.fr-contact-grid { grid-template-columns: 0.9fr 1.1fr; }
@media (max-width: 900px) { .fr-contact-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .fr-cp-panel { display: contents; }
  .cp-motif { display: none !important; }
  .cp-head, .cp-contact, .cp-desc { background: var(--navy); border-radius: var(--radius-lg); padding: clamp(1.5rem, 6vw, 2.25rem); overflow: hidden; }
  .cp-head .fr-eyebrow { display: none !important; }
  .cp-head h1 { margin-bottom: 0 !important; }
  .cp-desc { display: none !important; }
  .cp-desc p { margin-bottom: 0 !important; max-width: none !important; }
  .cp-contact, .cp-desc { min-width: 0; }
  .cp-contact a, .cp-contact span { min-width: 0; word-break: break-word; overflow-wrap: anywhere; }
  .cp-head { order: 1; position: relative; border-radius: 0; padding-left: var(--container-pad-x); padding-right: var(--container-pad-x); padding-top: clamp(2rem, 7vw, 3rem); padding-bottom: clamp(1.75rem, 6vw, 2.5rem); }
  .cp-head-motif { display: block !important; }
  .cp-head > h1 { position: relative; z-index: 1; }
  .fr-cp-form-card { order: 2; margin-top: calc(-1 * var(--space-6)); border: none !important; box-shadow: none !important; border-radius: 0 !important; padding-left: var(--container-pad-x) !important; padding-right: var(--container-pad-x) !important; }
  .cp-contact { order: 3; border-radius: 0; padding-left: var(--container-pad-x); padding-right: var(--container-pad-x); margin-top: calc(-1 * var(--space-6)); }
  .cp-inforow { gap: var(--space-3) !important; }
  .cp-inforow span { word-break: normal; overflow-wrap: anywhere; }
  .cp-desc { order: 4; }
  .fr-contact-grid { gap: var(--space-5); }
  [data-screen-label="Contact panel"] { padding-top: 0 !important; padding-bottom: 0 !important; }
  [data-screen-label="Contact panel"].fr-container { padding-left: 0; padding-right: 0; }
  .fr-help-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .fr-help-grid label { min-width: 0; }
}
.fr-name-row { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .fr-name-row { grid-template-columns: 1fr; } }
.home-faq-cols { display: flex; align-items: flex-start; gap: var(--space-6); }
@media (max-width: 760px) { .home-faq-cols { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .cta-step:hover { animation: none !important; } }
/* Form fields: white fill; gradient + animation only on the focused field */
.fr-contact-form .fr-field {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--border-strong), var(--border-strong)) border-box !important;
}
.fr-contact-form .fr-field:focus, .fr-contact-form .fr-field:focus-visible {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--fr-angle), var(--cyan), var(--blue-action), var(--blue), var(--cyan)) border-box !important;
}
@media (max-width: 640px) {
  .home-testi-card { margin-inline: calc(-1 * var(--container-pad-x)) !important; border-radius: 0 !important; padding: var(--space-8) var(--container-pad-x) !important; }
  .home-testi-arrow { display: none !important; }
  .home-testi-row { gap: 0 !important; }
  .home-testi-quote { max-width: none !important; padding: var(--space-6) var(--space-5) !important; touch-action: pan-y; }
}
@media (max-width: 760px) { .home-faq-intro { margin-bottom: var(--space-6) !important; } .home-faq-tail { margin-top: var(--space-6) !important; } }
