/* Odisal Sections: Contact Card. A project photo with the headline and contact buttons, beside the enquiry form.
   The form itself (fields, photos box, send button) is styled by form.css, shared with the Contact page widget. */
.osx-contact {
  --_card: var(--osx-contact-card, var(--osx-card));
  --_accent: var(--osx-contact-accent, var(--osx-accent));
  --_label: var(--osx-contact-label, var(--osx-muted));
  scroll-margin-top: 80px;
}
.osx-contact-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); border-radius: 28px; overflow: hidden; background: var(--_card); box-shadow: 0 40px 80px -40px rgba(0,0,0,.95); }

/* Photo side */
.osx-contact-cta { display: flex; flex-direction: column; justify-content: flex-end; padding: 44px 40px 40px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--_card) 15%, transparent) 0%, color-mix(in srgb, var(--_card) 60%, transparent) 45%, color-mix(in srgb, var(--_card) 95%, transparent) 100%), var(--osx-contact-img, none) center / cover; }
.osx .osx-contact-h { font: 600 44px/1.15 var(--osx-head); color: var(--osx-text); }
.osx-contact-h em { font-style: normal; color: var(--_accent); }
.osx-contact-sub { margin-top: 14px; color: color-mix(in srgb, var(--osx-text) 85%, var(--osx-muted)); font-size: 15px; }
.osx-contact-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-top: 30px; }
.osx-contact-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; padding: 20px 8px 18px; border-radius: 18px; text-align: center; text-decoration: none;
  background: color-mix(in srgb, var(--_card) 55%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  transition: transform 160ms var(--osx-ease-out), background-color 200ms ease, box-shadow 200ms ease; }
.osx-contact-tile i { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--_accent); color: var(--osx-dark); }
.osx-contact-tile .osx-ico { width: 18px; height: 18px; }
.osx-contact-tile small { font: 400 10.5px/1 var(--osx-label); letter-spacing: 1.5px; text-transform: uppercase; color: var(--osx-text); }
.osx-contact-tile:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .osx-contact-tile:hover { background: rgba(0,0,0,.4); box-shadow: inset 0 0 0 1px var(--_accent); } }

/* Form side */
.osx-contact-form { position: relative; padding: 46px 44px 40px; }
.osx .osx-contact-title { margin-bottom: 22px; font: 600 30px/1.15 var(--osx-head); color: var(--osx-text); }
@media (max-width: 980px) {
  .osx-contact-card { grid-template-columns: minmax(0, 1fr); }
  .osx-contact-cta { min-height: var(--osx-contact-photo-h, 380px); }
}
@media (max-width: 560px) {
  .osx .osx-contact-h { font-size: 34px; }
  .osx-contact-card--wide { margin-inline: calc(-1 * var(--osx-gutter-l) + 6px) calc(-1 * var(--osx-gutter-r) + 6px); }
  .osx-contact-cta { min-height: var(--osx-contact-photo-h, 340px); padding: 30px 22px 26px; }
  .osx-contact-form { padding: 30px 22px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .osx-contact-tile { transition: none; }
  .osx-contact-tile:active { transform: none; }
}