/* Tablet and desktop layout only. Loaded from 768px upwards. */
body { font-size: 1.125rem; line-height: 1.75; }
#home { display: block; }
#home > div:first-child { position: absolute; width: 100%; }
#home > div:nth-child(2) { width: 100%; min-height: clamp(520px, 65vh, 700px); padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 4vw, 3.5rem); }
#home h1 { font-size: clamp(3rem, 5.5vw, 5rem); line-height: 1.12; }
#home > div:nth-child(2) > div > p:first-child { font-size: .8rem; letter-spacing: .12em; }
#home > div:nth-child(2) > div > div { flex-wrap: wrap; }
#home > div:last-child { width: 100%; padding: 1.5rem clamp(1.5rem, 4vw, 3.5rem); }
#about, #vision-mission, #approach { padding: clamp(3rem, 6vw, 7rem) clamp(1.5rem, 4vw, 3.5rem); }
#about > div > div:first-child, #vision-mission > div, #approach > div { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 5rem); }
#practice > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#values, #contact { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
#contact > div:last-child { grid-template-columns: minmax(0, 1fr); }
#values > div:last-child, #contact > div:last-child > div { padding: clamp(1.5rem, 3vw, 4rem); }
#values > div:first-child > div, #contact > div:first-child > div { display: none; }
#values > div:first-child > p { position: static; margin: 0; max-width: none; padding: 2rem; background: #071426; }
.leader-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.video-queue video { display: block; width: 100%; height: auto; aspect-ratio: auto; }
footer > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-dialog-toolbar { z-index: 1; }

@media (min-width: 1024px) {
    #practice > div:last-child, .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    footer > div:first-child { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}
@media (min-width: 1536px) {
    #contact > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#values > div:first-child > img, #contact > div:first-child > img,
.gallery-grid img, .leader-portrait img, .service-dialog-image {
    display: block; width: 100%; height: auto; max-height: none; object-fit: contain;
}
.leader-portrait { height: auto; }

/* Keep the image-and-caption panel level with the values panel. */
#values { align-items: stretch; }
#values > div { align-self: stretch; min-width: 0; }
#values > div:first-child { display: flex; flex-direction: column; background: #071426; }
#values > div:first-child > img { flex: 0 0 auto; }
#values > div:first-child > p { flex: 1; }