/* ============================================================================
   contact-us — page-specific styles
   Geometry taken from reference/spec/contact-us.desktop.json.
   Desktop: white 675px band (y119-794) = info column + form, then a 432px
   full-bleed map band (y794-1226). Mobile: same content stacked, and the map
   is replaced by a "Find Us" button exactly as the live Duda widget does
   (modedesktop="map" modemobile="button").
   ========================================================================== */

/* ---------- section 1: contact details + form ---------- */
.page-contact-us .contact-main {
  padding: 100px 40px;
  background: var(--white);
}

/* The live fixed header casts a drop shadow onto the top of this band. The
   shared header carries no box-shadow, so it is reproduced locally, sampled
   row-by-row off the reference screenshot. */
.page-contact-us .contact-main::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 17px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.165) 0 1px, rgba(0,0,0,.149) 1px 2px, rgba(0,0,0,.133) 2px 3px,
    rgba(0,0,0,.118) 3px 4px, rgba(0,0,0,.098) 4px 5px, rgba(0,0,0,.082) 5px 6px,
    rgba(0,0,0,.067) 6px 7px, rgba(0,0,0,.055) 7px 8px, rgba(0,0,0,.043) 8px 9px,
    rgba(0,0,0,.031) 9px 10px, rgba(0,0,0,.024) 10px 11px, rgba(0,0,0,.016) 11px 12px,
    rgba(0,0,0,.012) 12px 13px, rgba(0,0,0,.008) 13px 15px, rgba(0,0,0,.004) 15px 16px,
    rgba(0,0,0,0) 16px 17px);
}

/* ---------- left column: details (live col = 320px at x240) ---------- */
.page-contact-us .contact-info { padding: 8px 0; }

.page-contact-us .contact-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  /* Inter's "normal" line box is 36.31px; pinning it to 36 keeps the whole
     675px band an integer height so the footer below lands on a whole pixel. */
  line-height: 36px;
  color: #000;
}

.page-contact-us .contact-lead,
.page-contact-us .contact-addr {
  font-size: 16px;
  line-height: 32px;
  color: var(--body-text);
}
.page-contact-us .contact-lead { margin-top: 27px; }
.page-contact-us .contact-addr { margin-top: 10px; }
.page-contact-us .contact-lead strong,
.page-contact-us .contact-addr strong { font-weight: 700; }

.page-contact-us .contact-email {
  color: var(--gold);
  font-weight: 600;
}
.page-contact-us .contact-email:hover { text-decoration: underline; }

/* ---------- social row (Duda icon-font glyphs, redrawn as SVG) ---------- */
.page-contact-us .contact-social {
  display: flex;
  gap: 15.333px;
  margin-top: 27px;
}
.page-contact-us .contact-social a {
  position: relative;
  display: block;
  width: 34px;
  height: 39px;
  color: var(--body-text);
}
.page-contact-us .contact-social .ic { position: absolute; display: block; }
.page-contact-us .contact-social .ic--fb   { left: 11px; top: 6px;  width: 12px; height: 22px; }
.page-contact-us .contact-social .ic--li   { left: 8px;  top: 6.5px; width: 19px; height: 19px; }
.page-contact-us .contact-social .ic--mail { left: 6px;  top: 9px;  width: 22px; height: 17px; }
.page-contact-us .contact-social .ic--wa   { left: 5.5px; top: 5px; width: 23px; height: 22px; }

/* ---------- right column: the form ---------- */
/* Flex column so the label/input margins stack instead of collapsing —
   Duda wraps each field in its own div, which produces the same result. */
.page-contact-us .contact-form {
  display: flex;
  flex-direction: column;
  width: 560px;
  margin: 5px 0 0 40px;
  padding: 10px 15px 0;
}

.page-contact-us .contact-form > label {
  display: block;
  margin-top: 10px;
  font-family: Roboto, var(--font-body);
  font-size: 16px;
  line-height: 19px;
  color: var(--body-text);
}
.page-contact-us .contact-form > label:first-of-type { margin-top: 0; }

.page-contact-us .contact-form input[type="text"],
.page-contact-us .contact-form input[type="email"],
.page-contact-us .contact-form input[type="tel"],
.page-contact-us .contact-form textarea {
  display: block;
  width: 100%;
  height: 40px;
  margin: 3px 0;
  padding: 0 10px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: #222;
  background: var(--white);
  border: 1px solid #d9d9d9;
  border-radius: 0;
}
.page-contact-us .contact-form textarea {
  height: 80px;
  padding: 10px;
  line-height: normal;
}
.page-contact-us .contact-form input:focus,
.page-contact-us .contact-form textarea:focus {
  outline: 2px solid var(--gold-btn);
  outline-offset: -1px;
}

/* Gold submit button — 3px black border, 10px radius, drop shadow. */
.page-contact-us .contact-send {
  align-self: flex-start;
  flex: 0 0 auto;
  width: 200px;
  height: 50px;
  margin: 20px 0;
  background: var(--gold-btn);
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: 0 3px 11px rgba(0, 0, 0, .25);
  text-align: center;
}
.page-contact-us .contact-send input {
  display: block;
  width: 190.11px;
  height: 41px;
  margin-left: 4px;
  padding: 10px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: var(--white);
  text-align: center;
  background: none;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

/* ---------- section 2: the map ---------- */
/* The live band is a Mapbox GL canvas keyed to a Duda-owned access token that
   dies with the Duda account, so it is rebuilt as a static map image linked
   through to Google Maps. Attribution stays as real, clickable links. */
.page-contact-us .contact-map {
  position: relative;
  line-height: 0;
  background: var(--white);
}
.page-contact-us .contact-map__canvas { display: block; }
.page-contact-us .contact-map__canvas img {
  display: block;
  width: 100%;
  height: auto;
}

.page-contact-us .contact-map__attrib {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 20px;
  padding: 0 5px;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}
.page-contact-us .contact-map__attrib a { color: var(--muted); }
.page-contact-us .contact-map__attrib a:hover { text-decoration: underline; }
.page-contact-us .contact-map__improve { margin-left: 2px; font-weight: 700; }

/* Mobile-only alternative to the map. */
.page-contact-us .contact-map__btn { display: none; }

/* ---------- local corrections to the shared footer ----------
   These are NOT page-specific design; they are five small defects in the
   shared footer that show up on every page and are flagged in the handover.
   They are patched here, scoped to this page only, because site.css is
   off-limits to page builds.
     1. .footer-social sits 1.4px low, which pushes the nav row, the CTA, the
        rule and the whole legal block 1px below where the live site puts them.
     2. .footer-legal's 136px bottom padding makes the page 2px taller than
        the live one.
     3. "© 2026" runs straight into "All Rights Reserved" — the live site has
        a space there.
     4. The footer CTA is drawn with the generic .btn chrome (1px gold border,
        4px radius). The live one is the same gold button as this page's Send
        button: 3px black border, 10px radius, 0 3px 11px rgba(0,0,0,.25).
     5. The rule under the footer is 3px of solid #7897af. The live one is a
        1px border on a 3px-tall box.                                         */
.page-contact-us .footer-social { margin-top: 17px; }
.page-contact-us .footer-legal { padding-bottom: 134.6px; }
.page-contact-us .footer-legal__year { padding-right: 4px; }
.page-contact-us .footer-cta {
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: 0 3px 11px rgba(0, 0, 0, .25);
}
.page-contact-us .footer-rule {
  box-sizing: content-box;
  height: 2px;
  border-top-width: 1px;
}

/* ============================================================================
   MOBILE — same content, stacked (measured off contact-us.mobile.json)
   ========================================================================== */
@media (max-width: 767px) {
  .page-contact-us .contact-main { padding: 40px 15px 20px; }
  .page-contact-us .contact-info { padding: 10px 0 0; }

  .page-contact-us .contact-lead,
  .page-contact-us .contact-addr {
    font-size: 14px;
    line-height: 28px;
  }
  .page-contact-us .contact-lead { margin-top: 13.5px; }
  .page-contact-us .contact-addr { margin-top: 12px; }

  .page-contact-us .contact-social { gap: 13px; margin-top: 27px; }

  .page-contact-us .contact-form {
    width: 100%;
    margin: 40px 0 0;
    padding: 10px 0 0;
  }
  .page-contact-us .contact-send { width: 205px; }
  .page-contact-us .contact-send input { width: 179px; margin-left: 5px; }

  .page-contact-us .contact-map { padding: 15px; line-height: normal; }
  .page-contact-us .contact-map__canvas,
  .page-contact-us .contact-map__attrib { display: none; }

  .page-contact-us .contact-map__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 47px;
    margin: 10px 0;
    background: var(--gold-btn);
    border: 3px solid #000;
    border-radius: 10px;
    box-shadow: 0 3px 11px rgba(0, 0, 0, .25);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
  }
}