:root {
       /* dark panels */
       /* light sections */
       /* blue */
       --color-accent-contact: #f97316;
       /* orange CTA */
       --color-text-main: #111827;
       --radius-pill-contact: 999px;
       --shadow-soft-contact: 0 18px 40px rgba(15, 23, 42, 0.25);

       --color-bg-contact-contact: #0f172a;
       /* dark panels */
       /* blue */
       /* orange CTA */
       --color-text-main-contacts: #111827;
       --color-text-inverse-contacts: #f9fafb;
   }


   a {
       text-decoration: none;
   }

   /* Contact box */
   .contact {
       background: var(--color-bg-contact-contact);
       color: var(--color-text-inverse-contacts);
       padding-bottom: 3.5rem;
   }

   section.contact {
       padding: 3rem 0;
   }

   .contact-inner {
       display: grid;
       grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
       gap: 1.5rem;
       align-items: stretch;
   }

   .contact .contact-card {
       background: #ffffff;
       color: var(--color-text-main-contacts);
       border-radius: 1.75rem;
       border: 1px solid rgba(148, 163, 184, 0.45);
       box-shadow: 0 20px 45px rgba(15, 23, 42, 0.35);
       padding: 2.25rem;
       min-width: 0;
   }

   .contact .contact-card .section-kicker {
       color: #6b7280;
   }

   .contact .contact-card .section-title {
       color: #111827;
   }

   .contact .contact-card form {
       margin-top: 0.75rem;
   }

   .contact .contact-card .form-field label {
       color: #6b7280;
   }

   .contact .contact-card .form-field input,
   .contact .contact-card .form-field textarea {
       background: #f9fafb;
       color: #111827;
       border: 1px solid rgba(148, 163, 184, 0.65);
   }

   .contact .contact-card .form-field input::placeholder,
   .contact .contact-card .form-field textarea::placeholder {
       color: #9ca3af;
   }

   .contact .contact-card .pill-outline {
       color: #111827;
       border-color: rgba(17, 24, 39, 0.25);
       background: transparent;
   }

   .contact .contact-card .pill-outline:hover {
       background: rgba(15, 23, 42, 0.04);
       border-color: rgba(17, 24, 39, 0.35);
   }

   .contact .contact-card .contact-note {
       color: #6b7280;
   }

   .contact .contact-card .contact-details {
       color: #111827;
   }

   .contact .contact-card .contact-details div {
       margin-bottom: 0.4rem;
   }

   .service-locations {
       margin-top: 1rem;
       padding-top: 1rem;
       border-top: 1px solid rgba(148, 163, 184, 0.35);
   }

   .service-locations h4 {
       margin: 0 0 0.6rem;
       font-size: 0.9rem;
       letter-spacing: 0.12em;
       text-transform: uppercase;
       color: #374151;
   }

   .service-locations ul {
       list-style: none;
       padding: 0;
       margin: 0;
       display: grid;
       gap: 0.55rem;
       color: #111827;
       font-size: 0.9rem;
   }

   .service-locations li {
       display: flex;
       gap: 0.5rem;
       align-items: flex-start;
   }

   .service-locations li::before {
       content: "📍";
       line-height: 1.2;
       margin-top: 0.05rem;
   }

   .contact-right {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       gap: 1.75rem;
   }

   .contact-right p {
       color: #6b7280;
   }

   .contact-hours {
       color: #6b7280;
   }

   .contact form {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 1rem 1.2rem;
   }

   .form-field {
       display: flex;
       flex-direction: column;
       gap: 0.25rem;
   }

   .form-field label {
       font-size: 0.8rem;
       color: #9ca3af;
   }

   .form-field input,
   .form-field textarea {
       border-radius: 0.75rem;
       border: 1px solid rgba(148, 163, 184, 0.8);
       background: rgba(15, 23, 42, 0.9);
       padding: 0.55rem 0.75rem;
       color: #e5e7eb;
       font-size: 0.9rem;
       outline: none;
   }

   .form-field textarea {
       min-height: 80px;
       resize: vertical;
   }

   .form-field input::placeholder,
   .form-field textarea::placeholder {
       color: #6b7280;
   }

   .form-full {
       grid-column: 1 / -1;
   }

   .contact-actions {
       /* margin-top: 1rem; */
       display: flex;
       gap: 0.75rem;
       flex-wrap: wrap;
       align-items: center;
   }

   .contact-note {
       font-size: 0.75rem;
       color: #9ca3af;
   }

   .contact-right {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       gap: 1.75rem;
   }

   .contact-right h3 {
       margin: 0 0 0.6rem;
   }

   .contact-right p {
       font-size: 0.9rem;
       color: #9ca3af;
       margin: 0 0 0.75rem;
   }

   .contact-details {
       font-size: 0.9rem;
       color: #d1d5db;
   }

   .contact-details div {
       margin-bottom: 0.4rem;
   }

   .contact-hours {
       margin-top: 0.75rem;
       font-size: 0.8rem;
       color: #9ca3af;
   }

   .cta-actions .pill-outline {
       background: transparent;
       color: #e5e7eb;
       border-color: rgba(148, 163, 184, 0.7);
   }

   .contact .pill {
       border-radius: var(--radius-pill-contact);
       padding: 0.55rem 1.2rem;
       font-size: 0.9rem;
       font-weight: 600;
       letter-spacing: 0.03em;
       text-transform: uppercase;
       border: 1px solid transparent;
       cursor: pointer;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       transition: background 0.2s ease, color 0.2s ease, border 0.2s ease,
           transform 0.1s ease;
   }

   .contact .pill-primary {
       background: var(--color-accent-contact);
       color: #111827;
       border-color: var(--color-accent-contact);
   }

   .contact .pill-primary:hover {
       background: #ea580c;
       border-color: #ea580c;
       transform: translateY(-1px);
   }

   .contact .pill-outline {
       background: transparent;
       color: #e5e7eb;
       border-color: rgba(148, 163, 184, 0.7);
   }

   .contact .pill-outline:hover {
       background: rgba(15, 23, 42, 0.85);
       border-color: #e5e7eb;
   }

   @media (max-width: 1024px) {
       .contact-inner {
           grid-template-columns: minmax(0, 1fr) !important;
       }
   }

   @media (max-width: 768px) {
       .contact form {
           grid-template-columns: minmax(0, 1fr);
       }
   }