/* Design page */
.d-hero { background: var(--teal); }
.d-hero-in {
  max-width: 1350px; margin: 0 auto; padding: 10px 30px 90px; text-align: center;
}
.d-hero h1 {
  font: 700 50px/1 var(--font-head); text-transform: uppercase; color: var(--white); margin: 0 0 20px;
}
.dots { padding: 10px 0; }
.dots span { display: block; width: 10%; margin: 0 auto; border-top: 5px dotted var(--white); }

/* Process: fixed (parallax) photo under a #f4f4f4 overlay, desktop only */
.d-process {
  padding: 40px 0 0;
  background:
    linear-gradient(rgba(244, 244, 244, 0.89), rgba(244, 244, 244, 0.89)),
    url("/assets/img/samuel-zeller-110931-unsplash.webp") center / cover no-repeat;
}
@media (min-width: 1025px) {
  .d-process { background-attachment: scroll, fixed; }
}
.d-wrap { max-width: 1140px; margin: 0 auto; }
.d-cards { display: flex; flex-direction: column; padding: 10px; }

.d-card {
  display: flex; margin: 10px 0; padding: 50px 24px;
  background: rgba(255, 254, 254, 0.65); border-radius: 5px;
  box-shadow: 4px 1px 5px 1px rgba(140, 133, 133, 0.5);
  font: 400 16px/1.5 var(--font-head); color: #202020;
}
.d-card-img { flex: 0 0 35%; padding: 0 5px 0 1px; }
.d-card-txt { flex: 0 0 65%; padding-left: 30px; border-left: 1px solid var(--teal-dark); }
.d-card-txt p { margin: 0 0 14.4px; }
.d-bare p { margin: 0; }
.d-ibox { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-items: center; }
.d-ibox img { width: 100%; transition: transform 0.3s; }
.d-ibox img:hover { transform: scale(0.9); }
.d-ibox h2 {
  margin: 8px 0 5px; font: 500 20px/1.2 var(--font-head); color: var(--teal);
}

/* Permits / bidding */
.d-info { background: var(--light); padding: 20px 0; }
.d-info-grid { display: grid; grid-template-columns: 1fr 1fr; font: 400 16px/1.5 var(--font-head); color: #202020; }
.d-box { margin: 10px; padding: 10px 15px; background: #fffefe; }
.d-box h2 { margin: 0 0 22px; font: 600 20px/1 var(--font-head); color: var(--teal); }
.d-box p { margin: 0 0 14.4px; }
.d-box .d-bare { margin: 0; }
.d-rule { height: 0; width: 15%; margin: 0 0 22px; border: 0; border-top: 1px solid #000; }

/* Construction */
.d-build { padding: 20px 0 40px; }
.d-build-grid { display: flex; }
.d-build-txt { flex: 0 0 55%; padding: 10px; color: var(--white); font: 400 16px/1.6 var(--font-head); letter-spacing: 0.1px; }
.d-build-txt h2 { margin: 0; font: 600 20px/1 var(--font-head); letter-spacing: 0; color: var(--white); }
.d-build-txt .d-rule { width: 15%; margin: 12px 0; border-top: 2px solid var(--white); }
.d-build-txt p { margin: 0 0 14.4px; }
.d-list { margin: 0 0 14.4px; padding-left: 1.2em; }
.d-list li + li { margin-top: 8px; }
.d-build-img { flex: 0 0 44.826%; padding: 10px; }
.d-build-img img { width: 100%; }

@media (max-width: 1024px) {
  .d-hero h1 { font-size: 30px; }
  .d-hero-in { padding: 10px 30px 60px; }
  .d-card { padding-left: 16px; padding-right: 16px; }
  .d-ibox { column-gap: 8px; }
  .d-ibox h2 { padding-right: 12px; }
}
@media (max-width: 767px) {
  .d-hero { padding: 20px 20px 0; }
  .d-hero-in { padding: 10px 0 28px; }
  .d-hero h1 { font-size: 25px; margin-bottom: 14px; }
  .dots { padding: 2px 0; }
  .dots span { width: 45%; }

  .d-process {
    background-image:
      linear-gradient(rgba(244, 244, 244, 0.89), rgba(244, 244, 244, 0.89)),
      url("/assets/img/samuel-zeller-110931-unsplash-800.webp");
  }
  .d-process { padding-top: 16px; }
  .d-cards { padding: 8px; }
  .d-card { display: block; padding: 14px 14px 18px; margin: 8px 0; }
  .d-card-img { padding: 0; margin-bottom: 20px; }
  .d-ibox { display: block; }
  .d-ibox img { margin-bottom: 15px; }
  .d-ibox { padding-bottom: 5px; }
  .d-ibox h2 { margin: 0; }
  .d-card-txt { padding-left: 0; border-left: 0; line-height: 1.6; }

  .d-info-grid { grid-template-columns: 1fr; }
  .d-build-grid { display: block; }
  .d-info { padding: 10px 0; }
  .d-box { margin: 8px; padding: 16px; }
  .d-build { padding: 14px 0 28px; }
  .d-build-txt { flex-basis: auto; padding: 10px 18px; font-size: 16px; line-height: 1.6; letter-spacing: 0; }
  .d-build-img { padding: 8px 18px; }
}