/* Roofie Contact page cleanup. */

.roofie-contact {
  background: #fff;
  color: var(--site-ink);
}

.roofie-contact * { box-sizing: border-box; }

.roofie-contact-shell {
  width: min(1170px, calc(100% - 30px));
  margin: 0 auto;
}

.roofie-contact-hero {
  padding: 78px 0;
  background: var(--site-ink);
  color: #fff;
}

.roofie-contact-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1;
}

.roofie-contact-main {
  padding: 92px 0;
}

/* On full desktop the legacy header's lower navigation is positioned over the
   document flow. Give the Contact page enough real space so its first headings
   start below the navigation instead of underneath it. */
@media (min-width: 1141px) {
  .roofie-contact-main {
    padding-top: 165px;
  }
}

.roofie-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 70px;
  align-items: start;
}

.roofie-contact-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--site-accent);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.roofie-contact-details h1 {
  margin: 0 0 22px;
  color: var(--site-ink);
  font-family: 'Catamaran', sans-serif;
  font-size: clamp(42px, 4vw, 56px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
}

.roofie-contact h2 {
  margin: 0 0 24px;
  color: var(--site-ink);
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.08;
}

.roofie-contact-intro {
  max-width: 560px;
  margin: 0 0 32px;
  color: var(--site-muted);
  font-size: 17px;
  line-height: 1.7;
}

.roofie-contact-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roofie-contact-list li {
  padding: 20px 22px;
  border: 1px solid var(--site-border);
  border-radius: 7px;
  background: var(--site-soft);
}

.roofie-contact-list strong {
  display: block;
  margin-bottom: 5px;
  color: var(--site-ink);
  font-size: 15px;
}

.roofie-contact-list span,
.roofie-contact-list a {
  color: var(--site-muted);
}

.roofie-contact-form-wrap {
  padding: 34px;
  border: 1px solid var(--site-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(var(--site-ink-rgb),.06);
}

.roofie-contact-form-wrap h2 { font-size: clamp(30px, 3vw, 40px); }

.roofie-contact-form {
  display: grid;
  gap: 14px;
}

.roofie-contact-form input,
.roofie-contact-form textarea {
  width: 100%;
  border: 1px solid var(--site-edge);
  border-radius: 5px;
  background: #fff;
  color: var(--site-ink);
  font: inherit;
}

.roofie-contact-form input {
  min-height: 52px;
  padding: 0 16px;
}

.roofie-contact-form textarea {
  min-height: 150px;
  padding: 15px 16px;
  resize: vertical;
}

.roofie-contact-form input:focus,
.roofie-contact-form textarea:focus {
  outline: 2px solid rgba(var(--site-accent-rgb),.18);
  border-color: var(--site-accent);
}

.roofie-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 50px;
  padding: 12px 24px;
  border: 2px solid var(--site-accent);
  border-radius: 4px;
  background: var(--site-accent);
  color: #fff !important;
  font-weight: 800;
  cursor: pointer;
}

.roofie-contact-map-section {
  padding: 0 0 92px;
}

.roofie-contact-map {
  min-height: 390px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(rgba(var(--site-ink-rgb),.18), rgba(var(--site-ink-rgb),.18)),
    repeating-linear-gradient(45deg, var(--site-soft) 0 18px, var(--site-border) 18px 36px);
  border: 1px solid var(--site-border);
}

.roofie-contact-map__label {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(var(--site-ink-rgb),.86);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.roofie-contact-footer {
  padding: 54px 0 0;
  background: var(--site-ink);
  color: var(--site-onDark);
}

.roofie-contact-footer__grid {
  display: grid;
  grid-template-columns: 1.7fr .8fr .8fr 1fr;
  gap: 42px;
  padding-bottom: 42px;
}

.roofie-contact-footer__logo img {
  max-width: 145px;
  height: auto;
  filter: grayscale(1) brightness(0) invert(1);
}

.roofie-contact-footer__brand p {
  max-width: 390px;
  margin: 16px 0 0;
  color: var(--site-onDark);
  line-height: 1.7;
}

.roofie-contact-footer__label {
  padding-top: 4px;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

.roofie-contact-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 14px;
}

.roofie-contact-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.roofie-contact-footer a { color: var(--site-onDark); }

@media (max-width: 991px) {
  .roofie-contact-grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .roofie-contact-footer__grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 767px) {
  .roofie-contact-hero { padding: 52px 0; }
  .roofie-contact-hero h1 { font-size: 46px; }
  .roofie-contact-main { padding: 68px 0; }
  .roofie-contact-details h1 { font-size: 42px; }
  .roofie-contact-form-wrap { padding: 24px 20px; }
  .roofie-contact-map-section { padding-bottom: 68px; }
  .roofie-contact-map { min-height: 280px; }
  .roofie-contact-footer__grid { grid-template-columns: 1fr; gap: 26px; }
  .roofie-contact-footer__bottom { align-items: flex-start; flex-direction: column; }
}