/* =========================================================
   DC Supplies — Contact Page
   Layout reference: gradient hero with badge pill (matches
   site-wide banner style), two-column contact section
   (info + card-style form), simple rounded fields, map
   card overlay.

   Brand colors
     --ink      #0D0D0D  headings / hero gradient start (true black, matches logo)
     --steel    #9B1E22  hero gradient end / links (brand red, was steel blue)
     --slate    #6E6E6E  secondary text
     --paper    #F6F7F5  page background
     --amber    #E8A23B  primary button
     --amber-dark #D6902B  button hover
     --line     #E0E3E2  borders
     --white    #FFFFFF
     --success  #2E7D4F
     --error    #B3372C
   ========================================================= */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

   :root {
       --ink: #0D0D0D;
       --steel: #9B1E22;
       --slate: #6E6E6E;
       --paper: #f6f7f5;
       --amber: #e8a23b;
       --amber-dark: #d6902b;
       --line: #e0e3e2;
       --white: #ffffff;
       --success: #2e7d4f;
       --success-bg: #eaf5ef;
       --error: #b3372c;
       --error-bg: #fbeeec;
   }
   
   .dc-contact-hero,
   .dc-contact-main,
   .dc-contact-map-full {
       box-sizing: border-box;
   }
   
   .dc-contact-hero *,
   .dc-contact-main *,
   .dc-contact-map-full * {
       box-sizing: border-box;
   }
   
   .dc-contact-main,
   .dc-contact-hero,
   .dc-contact-map-full {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       color: var(--ink);
   }
   
   /* -------------------------------------------------
      Hero
      ------------------------------------------------- */
   
   .dc-contact-hero {
       position: relative;
       background: #0D0D0D;
       padding: 88px 24px 72px;
       text-align: center;
       border-top: 1px solid #373434;
       overflow: hidden;
   }

   .dc-contact-hero__inner {
       position: relative;
       z-index: 1;
       max-width: 640px;
       margin: 0 auto;
   }
   
   .dc-contact-hero__badge {
       display: inline-block;
       font-size: 0.75rem;
       font-weight: 700;
       letter-spacing: 0.06em;
       text-transform: uppercase;
       color: rgba(255, 255, 255, 0.85);
       border: 1px solid rgba(255, 255, 255, 0.35);
       border-radius: 999px;
       padding: 6px 18px;
       margin-bottom: 20px;
   }
   
   .dc-contact-hero__title {
       font-weight: 800;
       font-size: clamp(2.1rem, 4vw + 1rem, 3rem);
       letter-spacing: -0.01em;
       color: #ffffff;
       margin: 0 0 14px;
   }
   
   .dc-contact-hero__sub {
       font-size: 1.0625rem;
       line-height: 1.6;
       color: rgba(255, 255, 255, 0.78);
       margin: 0;
   }
   
   /* -------------------------------------------------
      Main / grid
      ------------------------------------------------- */
   
   .dc-contact-main {
       background: var(--paper);
       padding: 56px 24px 96px;
   }
   
   .dc-contact-grid {
       max-width: 1080px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: 0.85fr 1.15fr;
       gap: 64px;
       align-items: start;
   }
   
   @media (max-width: 860px) {
       .dc-contact-grid {
           grid-template-columns: 1fr;
           gap: 44px;
       }
   }
   
   /* -------------------------------------------------
      Intro column
      ------------------------------------------------- */
   
   .dc-contact-intro {
       padding-top: 6px;
   }
   
   .dc-contact-intro h2 {
       font-weight: 700;
       font-size: 1.5rem;
       letter-spacing: -0.01em;
       color: var(--ink);
       margin: 0 0 14px;
   }
   
   .dc-contact-intro__lead {
       font-size: 1rem;
       line-height: 1.65;
       color: var(--slate);
       margin: 0 0 36px;
   }
   
   .dc-contact-simple-list {
       margin: 0;
       display: flex;
       flex-direction: column;
       gap: 24px;
   }
   
   .dc-contact-simple-item {
       display: flex;
       align-items: flex-start;
       gap: 14px;
   }
   
   .dc-contact-simple-item__icon {
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 40px;
       height: 40px;
       border-radius: 10px;
       background: rgba(155, 30, 34, 0.1);
       color: var(--steel);
   }
   
   .dc-contact-simple-item__icon svg {
       width: 20px;
       height: 20px;
   }
   
   .dc-contact-simple-item dt {
       font-weight: 700;
       font-size: 0.9375rem;
       color: var(--ink);
       margin-bottom: 4px;
   }
   
   .dc-contact-simple-item dd {
       margin: 0;
       font-size: 0.9375rem;
       line-height: 1.6;
       color: var(--slate);
   }
   
   .dc-contact-simple-item a {
       color: var(--slate);
       text-decoration: none;
   }
   
   .dc-contact-simple-item a:hover {
       color: var(--steel);
       text-decoration: underline;
   }
   
   /* -------------------------------------------------
      Form panel — white card with soft shadow, tinted
      inputs so the form reads as a distinct block.
      ------------------------------------------------- */
   
   .dc-contact-form-wrap {
       background: var(--white);
       border: 1px solid var(--line);
       border-radius: 16px;
       padding: 40px;
       box-shadow: 0 4px 24px rgba(16, 35, 58, 0.06);
   }
   
   .dc-contact-form-wrap h3 {
       font-weight: 700;
       font-size: 1.375rem;
       color: var(--ink);
       margin: 0 0 28px;
   }
   
   @media (max-width: 560px) {
       .dc-contact-form-wrap {
           padding: 28px 20px;
       }
   }
   
   /* -------------------------------------------------
      Notices
      ------------------------------------------------- */
   
   .dc-form-notice {
       font-size: 0.9375rem;
       line-height: 1.5;
       padding: 14px 16px;
       border-radius: 8px;
       margin-bottom: 24px;
   }
   
   .dc-form-notice--success {
       background: var(--success-bg);
       color: var(--success);
       border: 1px solid rgba(46, 125, 79, 0.2);
   }
   
   .dc-form-notice--error {
       background: var(--error-bg);
       color: var(--error);
       border: 1px solid rgba(179, 55, 44, 0.2);
   }
   
   /* -------------------------------------------------
      Form fields
      ------------------------------------------------- */
   
   .dc-contact-form {
       display: flex;
       flex-direction: column;
       gap: 5px;
   }
   
   .dc-form-row {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 20px;
       margin-top: 15px;
   }
   
   @media (max-width: 560px) {
       .dc-form-row {
           grid-template-columns: 1fr;
       }
   }
   
   .dc-form-field {
       display: flex;
       flex-direction: column;
   }
   
   .dc-contact-form label {
       font-size: 0.875rem;
       font-weight: 600;
       color: var(--ink);
       margin-bottom: 8px;
   }
   
   .dc-required {
       color: var(--error);
   }
   
   .dc-optional {
       color: var(--slate);
       font-weight: 400;
       font-size: 0.8125rem;
   }
   
   .dc-contact-form input[type="text"],
   .dc-contact-form input[type="email"],
   .dc-contact-form input[type="tel"],
   .dc-contact-form select,
   .dc-contact-form textarea {
       width: 100%;
       font-family: 'Inter', sans-serif;
       font-size: 0.9375rem;
       color: var(--ink);
       background: var(--paper);
       border: 1px solid var(--line);
       border-radius: 10px;
       padding: 13px 16px;
       transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
   }
   
   .dc-contact-form input:focus,
   .dc-contact-form select:focus,
   .dc-contact-form textarea:focus {
       background: var(--white);
   }
   
   .dc-contact-form textarea {
       min-height: 130px;
       resize: vertical;
       line-height: 1.55;
   }
   
   .dc-contact-form input::placeholder,
   .dc-contact-form textarea::placeholder {
       color: #a3acb1;
   }
   
   .dc-contact-form input:hover,
   .dc-contact-form select:hover,
   .dc-contact-form textarea:hover {
       border-color: #c3cace;
   }
   
   .dc-contact-form input:focus,
   .dc-contact-form select:focus,
   .dc-contact-form textarea:focus {
       outline: none;
       border-color: var(--steel);
       box-shadow: 0 0 0 3px rgba(155, 30, 34, 0.14);
   }
   
   .dc-contact-form select {
       appearance: none;
       background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%235B6B75' d='M4 6l4 4 4-4z'/></svg>");
       background-repeat: no-repeat;
       background-position: right 16px center;
       padding-right: 40px;
   }
   
   /* consent checkbox */
   
   .dc-consent {
       display: flex;
       align-items: flex-start;
       gap: 10px;
       margin-bottom: 0 !important;
       font-weight: 400 !important;
       font-size: 0.875rem !important;
       color: var(--slate) !important;
       cursor: pointer;
   }
   
   .dc-consent input[type="checkbox"] {
       margin-top: 3px;
       width: 17px;
       height: 12px;
       flex-shrink: 0;
       accent-color: var(--steel);
       border-radius: 4px;
   }
   
   .dc-consent span {
       line-height: 1.5;
   }
   
   /* submit */
   
   .dc-btn-submit {
       align-self: flex-start;
       font-size: 0.9375rem;
       font-weight: 600;
       color: #10233a;
       background: var(--amber);
       border: none;
       border-radius: 10px;
       padding: 14px 32px;
       margin-top: 4px;
       cursor: pointer;
       transition: background 0.15s ease, transform 0.1s ease;
   }
   
   .dc-btn-submit:hover {
       background: var(--amber-dark);
   }
   
   .dc-btn-submit:active {
       transform: translateY(1px);
   }
   
   .dc-btn-submit:focus-visible {
       outline: 2px solid var(--steel);
       outline-offset: 2px;
   }
   
   /* -------------------------------------------------
      Map
      ------------------------------------------------- */
   
   .dc-contact-map-full {
       position: relative;
       background: var(--ink);
   }
   
   .dc-contact-map-full iframe {
       display: block;
       width: 100%;
       height: 420px;
       border: 0;
   }
   
   .dc-contact-map-full__pin {
       position: absolute;
       z-index: 2;
       left: 24px;
       bottom: 24px;
       background: var(--white);
       padding: 16px 20px;
       max-width: 280px;
       border-radius: 12px;
       box-shadow: 0 12px 28px rgba(16, 35, 58, 0.2);
   }
   
   .dc-contact-map-full__name {
       display: block;
       font-weight: 700;
       font-size: 0.9375rem;
       color: var(--ink);
       margin-bottom: 6px;
   }
   
   .dc-contact-map-full__address {
       display: block;
       font-size: 0.8125rem;
       color: var(--slate);
       line-height: 1.5;
       margin-bottom: 10px;
   }
   
   .dc-contact-map-full__pin a {
       font-size: 0.8125rem;
       font-weight: 600;
       color: var(--steel);
       text-decoration: none;
   }
   
   .dc-contact-map-full__pin a:hover {
       text-decoration: underline;
   }
   
   @media (max-width: 640px) {
       .dc-contact-map-full__pin {
           left: 16px;
           right: 16px;
           bottom: 16px;
           max-width: none;
       }
   }
   
   /* -------------------------------------------------
      Reduced motion
      ------------------------------------------------- */
   
   @media (prefers-reduced-motion: reduce) {
       .dc-contact-simple-item a,
       .dc-contact-map-full__pin a,
       .dc-btn-submit,
       .dc-contact-form input,
       .dc-contact-form select,
       .dc-contact-form textarea {
           transition: none;
       }
   }
   .button.button-primary, input[type="submit"]:hover{
    background: var(--primary);
   }