/*
  Door replacement pages (/calgary/door-replacement.html, /ottawa/door-replacement.html).
  Figma: desktop 7401:17113, mobile 7434:24114. Everything is scoped under .dr;
  fonts come from the site (Neue Haas Display), so no font-family here.
*/
.dr {
  --dr-red: #bb2542;
  --dr-ink: #0b0b0b;
  --dr-gray: #f4f4f4;
  --dr-line: #e4e4e4;
  --dr-muted: #d0d0d0;
  color: var(--dr-ink);
}

/* Resets use :where() so that component classes below win over them. */
.dr :where(p, h1, h2, h3, h4, ul, ol, li, figure, blockquote) {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font-style: normal;
}

.dr :where(ul, ol) {
  list-style: none;
}

.dr :where(img) {
  display: block;
  max-width: 100%;
}

.dr :where(.dr-text, .dr-hero__showroom) a {
  color: var(--dr-red);
  text-decoration: underline;
}

.dr :where(.dr-text, .dr-hero__showroom) a:hover {
  text-decoration: none;
}

/* Layout */
.dr-wrap {
  box-sizing: border-box;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.dr-section {
  padding: 96px 0;
  background: #fff;
}

.dr-section--gray {
  background: var(--dr-gray);
}

.dr-section--dark {
  background: var(--dr-ink);
  color: #fff;
}

.dr-center {
  text-align: center;
}

.dr-narrow {
  max-width: 848px;
}

/* Type */
.dr .dr-h2 {
  font-size: 52px;
  font-weight: 600;
  line-height: 1.08;
  color: inherit;
}

.dr .dr-h3 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
}

.dr .dr-text {
  font-size: 18px;
  line-height: 1.6;
}

.dr-accent {
  color: var(--dr-red);
}

.dr-block {
  display: block;
}

.dr .dr-h2 + .dr-lead {
  margin-top: 24px;
}

.dr-lead + * {
  margin-top: 40px;
}

.dr .dr-lead + .dr-patio {
  margin-top: 64px;
}

.dr-section--dark .dr-text {
  color: var(--dr-muted);
}

/* Button */
.dr .dr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 52px;
  padding: 16px 22px;
  border: 0;
  border-radius: 2px;
  background: var(--dr-red);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease;
}

.dr .dr-btn:hover,
.dr .dr-btn:focus {
  background: #921d34;
  color: #fff;
}

/* Hero */
.dr-hero {
  background: #020202;
  color: #fff;
}

/* Same width as the site header container, so the copy lines up with the
   breadcrumbs and the photo with the header buttons */
.dr-hero__grid {
  max-width: 1524px;
  padding-left: 15px;
  padding-right: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding-top: 70px;
  padding-bottom: 90px;
}

.dr-hero__media {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.dr-hero__media img {
  width: 100%;
  height: 760px;
  object-fit: cover;
}

.dr-hero__content {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.dr .dr-eyebrow {
  color: var(--dr-red);
  font-size: 13px;
  font-weight: 900;
  line-height: 20px;
}

.dr .dr-hero__title {
  color: #fff;
  font-size: 64px;
  font-weight: 900;
  line-height: 1.02;
}

.dr .dr-hero__sub {
  font-size: 24px;
  line-height: 32px;
}

.dr-offer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;
  padding: 22px 0;
  border-top: 1px solid #292929;
  border-bottom: 1px solid #292929;
}

.dr .dr-offer__pay {
  font-size: 23px;
  font-weight: 600;
  line-height: 1.25;
}

.dr .dr-offer__big {
  color: var(--dr-red);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.15;
}

.dr .dr-offer__note {
  color: var(--dr-muted);
  font-size: 12px;
  line-height: 1.6;
}

.dr-hero__showroom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--dr-muted);
  font-size: 14px;
  line-height: 1.6;
}

.dr .dr-hero__showroom a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

/* Two even columns of text (introduction) */
.dr-cols {
  display: grid;
  gap: 64px;
}

.dr-cols--even {
  grid-template-columns: 1fr 1fr;
}

.dr-cols--area {
  grid-template-columns: 400px 1fr;
}

.dr-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Video */
.dr-video {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  aspect-ratio: 1112 / 625;
  overflow: hidden;
}

.dr-video img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dr-video__play {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--dr-red);
  transition: transform .2s ease;
}

.dr-video:hover .dr-video__play {
  transform: scale(1.08);
}

/* Text + photo (signs, entry doors) */
.dr-split {
  display: grid;
  grid-template-columns: 524px 1fr;
  gap: 64px;
}

.dr-split__media img {
  width: 100%;
  object-fit: cover;
}

.dr-split__media--signs {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.dr-split__media--signs img {
  height: 810px;
}

.dr-split__media--entry img {
  height: 920px;
}

/* Shorter photo for a smaller image (Halifax entry doors); mobile keeps the --entry height */
.dr-split__media--short img {
  height: 700px;
}

.dr-split__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.dr-split__media--signs + .dr-split__body {
  grid-column: 1;
  grid-row: 1;
}

/* Climate (Ottawa, Toronto): same layout as Signs, the photo keeps its own ratio */
.dr-split__media--climate {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.dr-split__media--climate img {
  height: auto;
}

.dr-split__media--climate + .dr-split__body {
  grid-column: 1;
  grid-row: 1;
}

/* Check lists */
.dr-checks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dr-checks li {
  display: flex;
  gap: 12px;
}

.dr-check {
  flex: none;
  width: 10px;
  height: 5px;
  margin-top: 9px;
  border-left: 2px solid var(--dr-red);
  border-bottom: 2px solid var(--dr-red);
  transform: rotate(-45deg);
}

.dr-checks li {
  font-size: 18px;
  line-height: 1.6;
}

.dr-checks--lined {
  gap: 0;
  margin: 24px 0;
}

.dr-checks--lined li {
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid #dedede;
}

/* Heading on the left, intro text on the right */
.dr-intro {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  margin-bottom: 48px;
}

.dr-intro--end {
  align-items: flex-end;
}

.dr-intro__title {
  flex: none;
  width: 448px;
}

.dr-intro__title--wide {
  width: 500px;
}

.dr-wide {
  margin-bottom: 64px;
}

.dr-wide img {
  width: 100%;
  object-fit: cover;
}

.dr-wide--climate img {
  height: 476px;
}

.dr-wide--process img {
  height: 710px;
  object-position: 50% 98%;
}

.dr-wide--process._centered img {
  object-position: 50% 50%;
}

.dr-note {
  padding: 28px;
  border-left: 3px solid var(--dr-red);
  background: var(--dr-gray);
}

/* Projects */
.dr-projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
}

.dr-project img {
  width: 100%;
  height: 360px;
  object-fit: cover;
}

.dr-project figcaption {
  margin-top: 20px;
}

/* Reviews */
.dr-review {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  padding: 32px 40px;
  border: 1px solid var(--dr-line);
  background: #fff;
}

.dr-review + .dr-review {
  border-top: 0;
}

.dr-review__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dr .dr-review__title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

.dr-review__quote {
  display: block;
}

.dr-review__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dr .dr-review__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
}

.dr-review__stars {
  color: var(--dr-red);
  font-size: 18px;
  letter-spacing: .05em;
}

.dr-review__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
}

/* Entry door options */
.dr-options {
  gap: 36px;
}

.dr-option {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Patio door styles */
.dr-patio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px 56px;
  margin-bottom: 64px;
}

.dr-patio__img {
  display: flex;
  justify-content: center;
  height: 390px;
  box-sizing: border-box;
  border: 16px solid #f5f3f3;
  border-bottom: 0;
  overflow: hidden;
}

.dr-patio__img img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.dr .dr-patio__title {
  margin-bottom: 14px;
  padding-top: 28px;
  border-top: 1px solid #292929;
  color: var(--dr-red);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.01em;
}

.dr-screens {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 64px;
  padding: 26px 28px;
  background: var(--dr-ink);
  color: #fff;
}

.dr .dr-screens .dr-text {
  color: #fff;
}

/* Steps */
.dr-steps {
  display: flex;
  flex-direction: column;
  gap: 28px;
  counter-reset: dr-step;
}

.dr .dr-steps li {
  position: relative;
  padding-left: 48px;
  color: #fff;
  counter-increment: dr-step;
}

.dr-steps li::before {
  content: counter(dr-step) ".";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  color: var(--dr-red);
  font-size: 24px;
  font-weight: 600;
  line-height: 28.8px;
}

.dr .dr-steps strong {
  color: #fff;
  font-weight: 900;
}

.dr .dr-warranty {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--dr-line);
  color: #fff;
}

/* Cost and financing */
.dr-center .dr-lead + .dr-btn {
  margin-top: 28px;
}

.dr-rebates {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--dr-line);
}

/* FAQ */
.dr-faq {
  max-width: 820px;
}

.dr-faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
}

.dr-faq__item {
  border: 1px solid var(--dr-line);
  background: #fff;
}

.dr .dr-faq__q {
  position: relative;
  padding: 18px 56px 18px 20px;
  font-size: 15px;
  font-weight: 900;
  line-height: 22px;
  cursor: pointer;
  user-select: none;
}

.dr-faq__q::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 20px;
  color: var(--dr-red);
  font-size: 22px;
  font-weight: 900;
  line-height: 22px;
  transform: translateY(-50%);
  transition: transform .2s ease;
}

.dr-faq__q.is-active::after {
  transform: translateY(-50%) rotate(45deg);
}

.dr-faq__a {
  height: 0;
  overflow: hidden;
}

.dr-faq__a.is-open {
  height: auto;
}

.dr-faq__a .dr-text {
  padding: 0 20px 20px;
  font-size: 16px;
}

/* Closing CTA */
.dr-cta .dr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-top: 34px;
  padding-bottom: 34px;
}

.dr-cta__icon {
  width: 72px;
  height: auto;
}

.dr-cta__icon .square {
  fill: #fff !important;
}

.dr .dr-cta__title {
  max-width: 1112px;
  color: #fff;
  font-size: 96px;
  font-weight: 600;
  line-height: 90px;
}

.dr .dr-cta__text {
  max-width: 760px;
}

.dr .dr-cta__tagline {
  color: var(--dr-red);
  font-size: 24px;
  line-height: 1.25;
}

/* Trust strip under the hero (Ottawa) */
.dr-trust {
  padding: 40px 0;
  background: var(--dr-gray);
}

.dr-trust__grid {
  display: flex;
  align-items: center;
  gap: 48px;
}

.dr-trust__stats {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  font-size: 14px;
  line-height: 1.4;
}

.dr-trust__num {
  display: block;
  margin-bottom: 6px;
  color: var(--dr-red);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
}

.dr-trust__side {
  display: flex;
  flex: 0 0 180px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.dr .dr-trust__line {
  font-size: 14px;
  line-height: 1.4;
}

/* Hero address link (Google Business Profile) */
.dr .dr-hero__showroom .dr-hero__address {
  white-space: normal;
  text-decoration: underline;
}

.dr .dr-hero__showroom .dr-hero__address:hover {
  text-decoration: none;
}

/* Review extras (Ottawa): linked reviewer, buttons, HomeStars */
.dr .dr-review__author {
  color: inherit;
  font-weight: 600;
}

.dr a.dr-review__author {
  text-decoration: underline;
}

.dr a.dr-review__author:hover {
  color: var(--dr-red);
}

.dr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

.dr .dr-btn--outline {
  border: 1px solid var(--dr-red);
  background: transparent;
  color: var(--dr-red);
}

.dr .dr-btn--outline:hover,
.dr .dr-btn--outline:focus {
  background: var(--dr-red);
  color: #fff;
}

.dr-hs {
  margin-top: 72px;
}

.dr-hs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 32px;
  margin-bottom: 32px;
}

.dr .dr-hs__score {
  font-size: 18px;
  line-height: 1.4;
}

.dr-hs__value {
  color: var(--dr-red);
  font-size: 28px;
  font-weight: 600;
}

/* Team photo */
.dr-team img {
  width: 100%;
  height: auto;
}

.dr-team figcaption {
  margin-top: 20px;
}

.dr-team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
}

/* Portrait project photos (Halifax, Vancouver) */
.dr-projects--portrait .dr-project img {
  height: 560px;
}

/* Edmonton: spacing helpers, cost table, why choose us */
.dr .dr-mt {
  margin-top: 32px;
}

.dr-mx {
  margin-right: auto;
  margin-left: auto;
}

.dr-table-wrap {
  margin: 48px 0;
  overflow-x: auto;
}

.dr-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
}

.dr-table th,
.dr-table td {
  padding: 14px 20px;
  border: 1px solid var(--dr-line);
  text-align: left;
  vertical-align: top;
}

.dr-table th {
  background: var(--dr-ink);
  color: #fff;
  font-weight: 600;
}

.dr-table td:nth-child(2) {
  white-space: nowrap;
}

.dr .dr-projects__title {
  margin: 72px 0 32px;
}

.dr-why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 64px;
  margin-top: 48px;
}

.dr-wide--patio {
  margin: 48px 0 0;
}

.dr-wide--patio img {
  height: 520px;
}

.dr .dr-gallery__title {
  margin: 96px 0 40px;
  font-size: 40px;
}

/* Edmonton: case-study cards from edmonton.html, two in a row without the carousel */
.dr-cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
  align-items: stretch;
}

/* Halifax entry doors: full-width photo in its own ratio, options in two columns */
.dr-wide--natural img {
  height: auto;
}

.dr-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 64px;
}

/* Tablet */
@media (max-width: 1100px) {
  .dr .dr-cta__title {
    font-size: 72px;
    line-height: 1.04;
  }

  .dr-split {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .dr-cols--area {
    grid-template-columns: 1fr 1.5fr;
  }

  .dr-intro__title,
  .dr-intro__title--wide {
    width: 40%;
  }

  .dr-trust__stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile (Figma 7434:24114) */
@media (max-width: 767px) {
  .dr-wrap {
    padding: 0 20px;
  }

  .dr-section {
    padding: 56px 0;
  }

  .dr .dr-h2 {
    font-size: 34px;
  }

  .dr .dr-h3 {
    font-size: 23px;
  }

  .dr .dr-h2 + .dr-lead {
    margin-top: 28px;
  }

  .dr-lead + * {
    margin-top: 28px;
  }

  .dr .dr-btn {
    width: 100%;
    padding: 16px 18px;
  }

  /* Hero: photo on top, then the copy */
  .dr-hero__grid {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 0 20px 56px;
  }

  .dr-hero__media {
    align-self: stretch;
  }

  .dr-hero__media img {
    height: 475px;
  }

  .dr-hero__content {
    gap: 28px;
  }

  .dr .dr-hero__title {
    font-size: 46px;
  }

  .dr .dr-hero__sub {
    font-size: 23px;
    line-height: 1.3;
  }

  .dr .dr-offer__pay {
    font-size: 20px;
  }

  .dr .dr-offer__big {
    font-size: 32px;
  }

  .dr-cols,
  .dr-cols--even,
  .dr-cols--area {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .dr-video {
    margin-top: 28px;
  }

  .dr-video__play {
    width: 56px;
    height: 56px;
  }

  .dr-video__play svg {
    width: 24px;
    height: 24px;
  }

  /* Signs: copy first, photo last */
  .dr-split {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .dr-split__media--signs,
  .dr-split__media--climate {
    order: 2;
  }

  .dr-split__media--signs img {
    height: 518px;
  }

  .dr-split__media--entry img {
    height: 588px;
  }

  .dr-checks li {
    gap: 20px;
  }

  .dr-intro {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    margin-bottom: 28px;
  }

  .dr-intro__title,
  .dr-intro__title--wide {
    width: auto;
  }

  .dr-wide {
    margin-bottom: 28px;
  }

  /* Height follows the width (3:2, the photo's own ratio) */
  .dr-wide--climate img,
  .dr-wide--process img {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .dr-checks--lined {
    margin: 28px 0;
  }

  .dr-projects {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .dr-project img {
    height: 223px;
  }

  .dr-review {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px 20px;
  }

  .dr-review__head {
    gap: 20px;
  }

  .dr .dr-review__title {
    font-size: 23px;
  }

  .dr-review__quote {
    width: 29px;
    height: 29px;
  }

  .dr-review__body {
    gap: 20px;
  }

  .dr-review__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .dr-options {
    gap: 36px;
  }

  .dr-patio {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 28px;
  }

  .dr-patio__img {
    height: auto;
    padding: 12px;
    border: 10px solid #f5f3f3;
  }

  .dr-patio__img img {
    height: 273px;
  }

  .dr .dr-patio__title {
    font-size: 23px;
  }

  .dr-screens {
    margin-top: 28px;
  }

  .dr-steps li::before {
    font-size: 24px;
  }

  .dr .dr-warranty {
    margin-top: 28px;
  }

  .dr-faq__list {
    margin-top: 28px;
  }

  .dr-cta .dr-wrap {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .dr .dr-cta__title {
    font-size: 42px;
    line-height: 1.04;
  }

  .dr-trust {
    padding: 32px 0;
  }

  .dr-trust__grid {
    flex-direction: column;
    gap: 28px;
  }

  .dr-trust__stats {
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
  }

  .dr-trust__num {
    font-size: 22px;
  }

  .dr-trust__side {
    flex-basis: auto;
  }

  .dr-actions {
    flex-direction: column;
    margin-top: 24px;
  }

  .dr-hs {
    margin-top: 48px;
  }

  .dr-hs__head {
    margin-bottom: 24px;
  }

  .dr-team-grid {
    grid-template-columns: 1fr;
  }

  .dr-projects--portrait .dr-project img {
    height: 420px;
  }

  .dr-table-wrap {
    margin: 28px 0;
  }

  .dr-table {
    font-size: 14px;
  }

  .dr-table th,
  .dr-table td {
    padding: 10px 12px;
  }

  .dr .dr-projects__title {
    margin: 48px 0 24px;
  }

  .dr-why {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 28px;
  }

  .dr-wide--patio img {
    height: 260px;
  }

  .dr .dr-gallery__title {
    margin: 56px 0 24px;
    font-size: 30px;
  }

  .dr-cases {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .dr-options-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}