/* Keep the native Clai hero, navigation and footer; add the contact form below. */
:root { --contact-ink:#293e35; --contact-muted:#596b61; --contact-paper:#f7f8f2; --contact-border:#d5ded1; --contact-accent:#d5efb4; }
body.contact-restored { background:var(--contact-paper); }
.contact-restored #main > .framer-gaXdc { background:var(--contact-paper); }
/* Match the homepage's 64px desktop / 52px mobile header geometry. Paint the
   full-width fixed shell, not its inset, content-height Header Wrapper. */
.contact-restored .framer-1h867xj-container {
  background:var(--contact-paper);
  color:var(--contact-ink);
}
.contact-restored [data-framer-name="Header Wrapper"] { background:transparent; }
.contact-restored [data-framer-name="Header Wrapper"] :is(a,.framer-text) {
  color:var(--contact-ink)!important;
  --framer-text-color:var(--contact-ink)!important;
}
.contact-restored [data-framer-name="Header Wrapper"] [data-framer-name="Logo Wrapper"] [data-framer-component-type="SVG"] {
  filter:brightness(.22);
}
.contact-restored [data-framer-name="Header Wrapper"] .framer-tdwgfi > div {
  background-color:var(--contact-ink)!important;
}
.contact-restored [data-framer-name="Header Wrapper"] :is(a,[role="button"]):focus-visible {
  outline:3px solid #598345;
  outline-offset:4px;
}
/* The source hero is the authored dhtaut… PNG, not video. Reproduce the
   original /site/contact-hero-fx.js drift without its observer/runtime. Only
   the clipped background moves; title, navigation and form stay stationary. */
.contact-restored #main > .framer-gaXdc > [data-framer-name="Hero Section"] > [data-framer-background-image-wrapper] {
  overflow:hidden;
}
.contact-restored #main > .framer-gaXdc > [data-framer-name="Hero Section"] > [data-framer-background-image-wrapper] > img {
  animation:contact-flower-sway 14s ease-in-out infinite;
  transform-origin:50% 100%;
}
@keyframes contact-flower-sway {
  0%,100% { transform:scale(1.06) rotate(0deg) translate(0%,0%); }
  25% { transform:scale(1.065) rotate(.45deg) translate(.5%,-.2%); }
  50% { transform:scale(1.07) rotate(-.15deg) translate(-.3%,.15%); }
  75% { transform:scale(1.06) rotate(.35deg) translate(.4%,-.1%); }
}
.contact-restored.clai-native-mobile-open { overflow:hidden; }
/* Suppress only the obsolete signup/demo card and standalone demo CTA.
   The original image-backed hero remains untouched and visible. */
.contact-restored #main > .framer-gaXdc > [data-framer-name="Hero Section"] > .framer-4tq64o,
.contact-restored #main > .framer-gaXdc > [data-framer-name="Section"] { display:none!important; }
.contact-page { box-sizing:border-box; width:100%; max-width:1160px; margin:0 auto; padding:100px 40px 112px; color:var(--contact-ink); font:400 16px/1.6 ClaiSans,system-ui,sans-serif; }
.contact-page * { box-sizing:border-box; }
.contact-layout { display:grid; grid-template-columns: .85fr 1.15fr; gap:88px; align-items:start; }
.contact-eyebrow { margin:0 0 22px; font:400 12px/1.4 "Fragment Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }
.contact-page #contact-title { font:400 clamp(44px,5vw,64px)/1.08 "Ivar Text Hydro Regular",Georgia,serif; letter-spacing:-.035em; margin:0 0 24px; color:var(--contact-ink); }
.contact-intro { max-width:340px; font-size:18px; color:var(--contact-muted); }
.contact-aside { margin-top:56px; border-top:1px solid var(--contact-border); padding-top:23px; max-width:340px; }
.contact-aside p { margin:0 0 8px; }
.contact-page a { color:var(--contact-ink); text-underline-offset:4px; }
.contact-card { background:#eef2e8; border:1px solid var(--contact-border); border-radius:20px; padding:32px; }
.contact-card h2 { font:400 26px/1.2 "Ivar Text Hydro Regular",Georgia,serif; margin:0 0 8px; }
.contact-hint { color:var(--contact-muted); font-size:13px; margin:0 0 26px; }
.contact-fields { display:grid; grid-template-columns:1fr 1fr; gap:20px 16px; border:0; margin:0; padding:0; min-width:0; }
.contact-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.contact-wide { grid-column:1/-1; }
.contact-field label { font-size:14px; font-weight:500; }
.contact-field label span { color:var(--contact-muted); font-weight:400; }
.contact-field input,.contact-field textarea { width:100%; border:1px solid #bccbb9; border-radius:8px; background:#fafbf6; padding:12px 13px; color:var(--contact-ink); font:inherit; line-height:1.4; }
.contact-field textarea { min-height:135px; resize:vertical; }
.contact-page :is(input,textarea,button,a):focus-visible { outline:3px solid #598345; outline-offset:3px; }
.contact-field [aria-invalid="true"] { border-color:#9c3e2c; }
.contact-error { margin:0; font-size:13px; color:#8a3426; }
.contact-hp { position:absolute!important; left:-10000px!important; width:1px; height:1px; overflow:hidden; }
.contact-submit { width:100%; min-height:50px; margin-top:24px; border:1px solid #a9c492; border-radius:9px; background:var(--contact-accent); color:var(--contact-ink); font:500 15px/1.4 ClaiSans,system-ui,sans-serif; cursor:pointer; transition:transform .15s ease; }
.contact-submit:hover:not(:disabled) { transform:translateY(-2px); }
.contact-submit:disabled { opacity:.65; cursor:wait; }
.contact-status { margin:14px 0 0; font-size:14px; }
.contact-status:empty { display:none; }
.contact-status[data-error="true"] { color:#8a3426; }
.contact-privacy { font-size:12px; color:var(--contact-muted); margin:18px 0 0; }
.contact-success { padding:30px 0; }
.contact-success h2 { font-size:32px; }
.contact-success p { margin-bottom:0; }
.contact-page [hidden] { display:none!important; }
@media(max-width:809px) {
  .contact-page { padding:58px 24px 64px; }
  .contact-layout { grid-template-columns:1fr; gap:32px; }
  .contact-intro { max-width:480px; }
  .contact-aside { margin-top:24px; max-width:none; }
  .contact-card { padding:25px 22px; }
}
@media(max-width:420px) { .contact-fields { grid-template-columns:1fr; } .contact-page { padding-left:18px; padding-right:18px; } }
@media(prefers-reduced-motion:reduce) {
  .contact-submit { transition:none; }
  .contact-restored #main > .framer-gaXdc > [data-framer-name="Hero Section"] > [data-framer-background-image-wrapper] > img {
    animation:none;
    transform:none;
  }
}