/* Contact-page map and form styles, scoped to service detail pages. */
.service-contact { padding: 60px 0; background: var(--color-bg-primary); }
.service-contact h1,
      .service-contact h2,
      .service-contact h3 {
        text-transform: none;
        font-family: var(--font-heading);
        font-weight: var(--font-weight-heading);
        letter-spacing: var(--letter-spacing-heading);
      }
.service-contact .ct-connect.ct-container {
        width: 100%;
        padding-left: 100px;
        padding-right: 100px;
        box-sizing: border-box;
        margin-inline: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 32px;
        align-items: stretch;
        margin-top: 72px;
        scroll-margin-top: 150px;
        background: radial-gradient(ellipse at 75% 40%, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 65%);
      }
.service-contact .ct-form-card {
        border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
        background-color: var(--color-bg-secondary);
        background-image: linear-gradient(color-mix(in srgb, var(--color-bg-secondary) 97%, transparent), color-mix(in srgb, var(--color-bg-secondary) 95%, transparent)), url('../assets/images/about/creative-studio.jpg');
        background-size: cover;
        background-position: center;
        box-shadow: var(--shadow-soft);
        padding: clamp(26px, 3vw, 52px);
        border-radius: 20px;
        min-width: 0;
      }
.service-contact .ct-form-card h2 span { color: var(--color-accent-ink); }
.service-contact .ct-form-card h2::after { content: ""; display: block; width: 44px; height: 3px; margin: 18px auto 0; border-radius: 3px; background: var(--color-accent); }
.service-contact .ct-form-card h2 {
        font-size: var(--font-size-h2);
        color: var(--color-text-primary);
        margin: 0 0 24px;
        text-align: center;
      }
.service-contact .ct-form-intro {
        color: var(--color-text-muted);
        font-size: var(--font-size-body);
        line-height: 1.65;
        margin: 0 0 26px;
        text-align: center;
      }
.service-contact .contact-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 24px;
      }
.service-contact .form-textarea {
        min-height: 180px;
        resize: vertical;
      }
body.design-system .service-contact .contact-form button[type="submit"].site-button {
        width: 200px;
        max-width: 100%;
        margin: 28px auto 0;
      }
.service-contact :focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 5px;
      }
@media (max-width: 767px) {
.service-contact .ct-connect.ct-container {
          padding-left: 20px;
          padding-right: 20px;
          gap: 24px;
          grid-template-columns: 1fr;
        }
}
@media (max-width: 600px) {
.service-contact .ct-connect {
          margin-top: 40px;
          gap: 20px;
        }
.service-contact .ct-form-card {
          padding: 28px 22px;
        }
.service-contact .contact-form {
          grid-template-columns: 1fr;
        }
.service-contact .form-group.full-width {
          grid-column: 1;
        }
}
@media (prefers-reduced-motion: reduce) {
.service-contact * {
          transition: none !important;
          animation: none !important;
          scroll-behavior: auto !important;
        }
}
.service-contact .ct-map-card {
        min-width: 0;
        min-height: 560px;
        position: relative;
        border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
        box-shadow: var(--shadow-soft);
        border-radius: 20px;
        overflow: hidden;
        background: var(--color-bg-secondary);
      }
.service-contact .ct-map-card iframe {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
.service-contact .ct-connect .form-group { min-width: 0; }
.service-contact .ct-connect :is(.form-input, .form-select, .form-textarea) {
        width: 100%;
        min-width: 0;
        border-radius: 12px;
        background: var(--color-bg-primary);
        color: var(--color-text-primary);
        border: 1px solid var(--color-border);
        padding: 14px 16px;
        min-height: 54px;
        transition: border-color .25s ease, box-shadow .25s ease;
      }
.service-contact .ct-connect :is(.form-input, .form-textarea)::placeholder { color: var(--color-text-muted); opacity: 1; }
.service-contact .ct-connect .form-select { color-scheme: light; accent-color: var(--color-accent); }
.service-contact .ct-connect .form-select option { background: var(--color-bg-primary); color: var(--color-text-primary); }
.service-contact .ct-connect .form-select option:is(:checked, :hover, :focus) { background: var(--color-bg-cream); color: var(--color-text-primary); }
@supports (appearance: base-select) {
.service-contact .ct-connect .form-select,
        .service-contact .ct-connect .form-select::picker(select) { appearance: base-select; }
.service-contact .ct-connect .form-select::picker(select) { background: var(--color-bg-primary); color: var(--color-text-primary); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: none; }
.service-contact .ct-connect .form-select option { padding: 10px 16px; }
}
.service-contact .ct-connect :is(.form-input, .form-select, .form-textarea):focus {
        background: var(--color-bg-primary);
        border-color: var(--color-gold-dark);
        outline: 2px solid var(--color-gold-dark);
        outline-offset: 2px;
        box-shadow: none;
      }
.service-contact .ct-form-card .form-label { color: var(--color-accent-ink); font-weight: 600; }
.service-contact .ct-form-card .contact-form > .form-group:last-child { align-items: center; }
.service-contact .ct-form-card .site-button {
        background: var(--color-accent);
        color: var(--color-control-bg);
        border-radius: 999px;
        min-height: 54px;
        transition: transform .25s ease, box-shadow .25s ease;
      }
@media (hover: hover) and (pointer: fine) {
.service-contact .ct-form-card .site-button:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--color-accent) 20%, transparent); }
}
@media (min-width: 768px) and (max-width: 1100px) {
.service-contact .ct-connect.ct-container { padding-left: 32px; padding-right: 32px; gap: 24px; }
.service-contact .ct-form-card { padding: 26px; }
.service-contact .ct-connect .contact-form { grid-template-columns: 1fr; }
.service-contact .ct-connect .form-group.full-width { grid-column: 1; }
}
@media (max-width: 767px) {
.service-contact .form-textarea { min-height: 150px; }
.service-contact .ct-map-card { min-height: 360px; }
.service-contact .ct-connect .contact-form { grid-template-columns: minmax(0, 1fr); }
.service-contact .ct-connect .form-group.full-width { grid-column: 1; }
}

.service-contact .ct-connect.ct-container { margin-top: 0; }
@media (max-width: 600px) { .service-contact { padding-block: 40px; } }