/* Content-height openings keep copy together and photographs clear. */
html { scroll-padding-top: 24px; }
#main, #services, #contact-form, #before-and-after, #our-roots,
#on-the-jobsite, #project-questions, .page-flow .content-row,
.page-flow .content-row.has-photos, .project-gallery { scroll-margin-top: 0; }
.header-estimate { display: none; }
.home-hero, .page-hero {
  --hero-photo-width: min(42%, 600px);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #1b252e;
  color: white;
}
.hero-copy, .page-hero .hero-heading {
  position: relative;
  z-index: 3;
  width: 58%;
  max-width: 1050px;
  margin: 0;
  padding: 24px 38px 24px 6%;
}
.hero-copy h1 { font-size: clamp(48px, 5vw, 72px); line-height: 1.12; margin-bottom: 14px; }
.page-hero h1 { max-width: 20ch; font-size: clamp(36px, 3.8vw, 50px); line-height: 1.2; margin-bottom: 14px; }
.hero-copy .eyebrow, .page-hero .eyebrow { color: #c2d6e2; font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
.hero-copy .hero-opening { max-width: 44ch; font-size: 18px; line-height: 1.5; margin-bottom: 12px; }
.hero-copy .hero-intro, .page-hero .page-intro { max-width: 52ch; font-size: 17px; line-height: 1.6; color: #f1f3f4; margin-bottom: 0; }
.page-hero .page-intro + .page-intro { margin-top: 14px; }
.page-hero .action-link { color: #c4d9e5; }
.page-hero .action-link:hover { color: white; }
.home-hero a:focus-visible, .page-hero a:focus-visible { outline-color: #c4d9e5; }
.hero-copy .hero-actions { gap: 12px 24px; margin: 18px 0 10px; }
.hero-copy .hero-location { max-width: 42ch; margin: 0; font-size: 14px; line-height: 1.6; }
.page-hero .breadcrumb { margin-bottom: 12px; color: #d2dce2; }
.page-hero .hero-inquiry { margin-top: 18px; }
.contact-hero-actions { margin-top: 18px; }
.hero-actions .button, .page-hero .button {
  --button-surface: #c4d9e5;
  --button-hover: #e2edf3;
  --button-ink: #18252e;
}
.hero-photo, .page-hero .hero-image {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: var(--hero-photo-width);
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #1b252e;
  border-radius: clamp(100px, 14vw, 180px) 0 0 0;
  clip-path: none;
}
.hero-photo picture, .page-hero .hero-image .editorial-image,
.page-hero .hero-image picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}
.hero-photo img, .page-hero .hero-image .editorial-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  filter: none;
  border-radius: 0;
}
.hero-photo::after, .page-hero .hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: none;
}
.page-hero .hero-image picture { bottom: 44px; height: calc(100% - 44px); }
.page-contact .hero-image picture { bottom: 0; height: 100%; }
.page-hero .hero-image figcaption {
  position: absolute;
  inset: auto 24px 12px;
  z-index: 2;
  max-width: none;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #e2e9ed;
  text-align: right;
}
.page-exterior-design .hero-image img { object-position: 50% 45%; }
.page-new-builds .hero-image img { object-position: 50% 55%; }
.page-about-us, .page-careers { justify-content: flex-end; }
.page-about-us .hero-heading, .page-careers .hero-heading { width: 58%; max-width: 1050px; padding: 24px 6% 24px 44px; }
.page-about-us .hero-image, .page-careers .hero-image {
  inset: 0 auto 0 0;
  width: min(42%, 520px);
  border-radius: 0 clamp(100px, 14vw, 180px) 0 0;
}
.page-about-us .hero-image .editorial-image img,
.page-careers .hero-image .editorial-image img { object-fit: contain; object-position: center; }
.page-about-us .hero-image::after, .page-careers .hero-image::after {
  background: none;
}
.page-about-us .hero-image figcaption, .page-careers .hero-image figcaption { text-align: left; }
.hero-photo-open {
  position: absolute;
  z-index: 4;
  inset: 16px 24px auto auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #1b252e;
  background: #fffffff0;
  border-radius: 4px 12px 4px 4px;
}
.hero-photo-open svg { width: 23px; height: 23px; }
.hero-photo-open:hover { background: white; }
.page-about-us > .hero-photo-open, .page-careers > .hero-photo-open { left: 24px; right: auto; }

@media (min-width: 901px) {
  .site-header { min-height: 130px; padding-top: 3px; padding-bottom: 3px; }
  .site-header .logo { width: 124px; }
  .company-nav { gap: 18px; }
  #nav a.nav-estimate { min-height: 44px; padding: 10px 18px; background: transparent; color: white; font-size: 13px; font-weight: 600; border-radius: 3px; }
  #nav a.nav-estimate:hover { background: transparent; color: white; }
}
@media (min-width: 1600px) {
  .hero-copy, .page-hero .hero-heading { padding-left: max(6%, calc((100vw - 1360px) / 2)); }
  .page-about-us .hero-heading, .page-careers .hero-heading { padding-left: 44px; padding-right: max(6%, calc((100vw - 1360px) / 2)); }
  .hero-photo, .page-hero .hero-image { right: calc((100vw - 1280px) / 2); }
  .page-about-us .hero-image, .page-careers .hero-image { left: calc((100vw - 1280px) / 2); right: auto; }
}

/* Every small-screen opening uses the photograph behind the copy. */
@media (max-width: 900px) {
  #nav .nav-estimate { display: none; }
  html { scroll-padding-top: 120px; }
  .nav-ready .site-header, .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
    gap: 7px;
    height: auto;
    min-height: 104px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .nav-ready .site-header { height: 104px; }
  .site-header .brand { grid-column: 2; grid-row: 1; justify-self: center; }
  .site-header .logo { width: 92px; }
  .nav-ready .menu-toggle {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    flex-direction: row-reverse;
    gap: 7px;
    min-width: 0;
    padding: 10px 0;
  }
  html:not(.nav-ready) .site-header #nav { grid-column: 1 / -1; }
  .nav-ready #nav { top: 103px; max-height: calc(100dvh - 104px); }
  .header-estimate {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    min-width: 0;
    max-width: 112px;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    --button-rebate: 8px;
    --button-cut: 5px;
  }
  .home-hero, .page-hero {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 0;
    padding: 0;
    border-radius: 0 0 48px 0;
  }
  .page-about-us, .page-careers { border-radius: 0 0 0 48px; }
  .hero-copy, .page-hero .hero-heading,
  .page-about-us .hero-heading, .page-careers .hero-heading {
    order: initial;
    width: 100%;
    max-width: 700px;
    padding: 24px 6% 56px;
    text-shadow: 0 1px 2px #0006;
  }
  .home-hero .hero-copy, .page-contact .hero-heading { padding-bottom: 24px; }
  .hero-copy .button, .page-hero .button { text-shadow: none; }
  .hero-copy h1 { max-width: 13ch; font-size: clamp(34px, 9.8vw, 46px); line-height: 1.18; margin-bottom: 14px; }
  .page-hero h1 { max-width: 21ch; font-size: clamp(32px, 8.8vw, 44px); line-height: 1.23; margin-bottom: 14px; }
  .hero-copy .eyebrow, .page-hero .eyebrow { max-width: 34ch; font-size: 12px; margin-bottom: 10px; color: white; }
  .home-hero .eyebrow { max-width: calc(100% - 54px); }
  .hero-photo-open, .page-about-us > .hero-photo-open, .page-careers > .hero-photo-open { left: auto; right: 6%; }
  .hero-copy .hero-opening { font-size: 18px; line-height: 1.55; }
  .hero-copy .hero-intro, .page-hero .page-intro { max-width: 52ch; font-size: 16px; line-height: 1.6; color: white; }
  .hero-copy .hero-actions { margin: 18px 0 10px; gap: 8px 22px; }
  .hero-copy .hero-location { font-size: 14px; line-height: 1.65; padding-right: 0; }
  .page-hero .breadcrumb { font-size: 12px; margin-bottom: 10px; padding-right: 56px; color: white; }
  .hero-photo, .page-hero .hero-image,
  .page-about-us .hero-image, .page-careers .hero-image {
    position: absolute;
    order: initial;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: inherit;
  }
  .hero-photo picture, .page-hero .hero-image .editorial-image,
  .page-hero .hero-image picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
  .hero-photo img, .page-hero .hero-image .editorial-image img,
  .page-about-us .hero-image .editorial-image img,
  .page-careers .hero-image .editorial-image img { object-fit: cover; object-position: 45% center; }
  .page-careers .hero-image .editorial-image img { object-position: 30% center; }
  .hero-photo::after, .page-hero .hero-image::after,
  .page-about-us .hero-image::after, .page-careers .hero-image::after {
    display: block;
    background: linear-gradient(90deg, #000000a3, #0000008f);
  }
  .home-hero .hero-photo img { object-position: 55% 48%; }
  .page-hero .hero-image figcaption {
    position: absolute;
    inset: auto 6% 12px;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    color: white;
    text-shadow: 0 1px 2px #0006;
    text-align: left;
    font-size: 12px;
    line-height: 1.5;
  }
}
@media (min-width: 380px) and (max-width: 900px) {
  .hero-copy .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  .hero-copy .hero-actions .button { flex: 1; min-width: 0; min-height: 52px; padding: 14px 18px; font-size: 14px; }
  .hero-copy .hero-actions .hero-phone { min-height: 52px; font-size: 15px; gap: 7px; white-space: nowrap; }
}
@media (max-width: 379px) {
  .hero-copy .hero-actions .button { width: 100%; }
}