.web-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 32px;
  border-bottom: 1px dashed var(--ink-60);
}

.web-page-brand {
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}

.web-page-nav { display: flex; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; }
.web-page-nav a { text-decoration: none; border-bottom: 2px solid transparent; padding: 4px 0; }
.web-page-nav a:hover, .web-page-nav a:focus-visible { border-bottom-color: var(--orange); }

.web-hero { padding-top: clamp(72px, 10vw, 132px); }
.web-kicker { color: var(--orange-ink); margin-bottom: 28px; font-weight: 700; }
.web-hero h1 { font-size: clamp(3.1rem, 8.4vw, 7.1rem); max-width: 14ch; }
.web-hero .hl { display: inline; }
.web-hero-bottom { display: grid; gap: 26px; align-items: end; margin-top: 52px; }
.web-hero-bottom p { font-size: clamp(1.1rem, 2vw, 1.4rem); max-width: 58ch; }
.web-hero-bottom .btn-cta { justify-self: start; }
.web-hero-index { display: flex; justify-content: space-between; gap: 12px; margin-top: 84px; padding-top: 14px; border-top: 1px solid var(--black); color: var(--ink-60); }

.web-section-heading { display: grid; gap: 22px; margin-bottom: 36px; }
.web-section-heading h2 { font-size: clamp(2.2rem, 6.5vw, 4.6rem); max-width: 12ch; }
.web-section-heading p { max-width: 55ch; }
.web-gallery .web-project-info { padding-top: 22px; }
.web-gallery .web-project-info > p:last-child { max-width: 48ch; }

.web-method {
  background: var(--black);
  color: var(--cream);
  padding: clamp(36px, 6vw, 76px);
  margin-top: 72px;
}
.web-method .eyebrow { color: rgba(239, 237, 230, .65); }
.web-method h2 { font-size: clamp(2.2rem, 7vw, 5.1rem); max-width: 16ch; }
.web-method-lead { max-width: 60ch; margin-top: 24px; font-size: clamp(1.05rem, 2vw, 1.3rem); }
.web-method-grid { display: grid; gap: 30px; margin-top: 64px; }
.web-method-grid article { border-top: 1px solid rgba(239, 237, 230, .45); padding-top: 18px; }
.web-method-grid .mono { color: #F19C6C; }
.web-method-grid h3 { font-family: 'Archivo Black', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1.25rem; margin: 22px 0 8px; }
.web-method-grid p { max-width: 36ch; }

.web-contact { background: var(--orange); padding: clamp(36px, 6vw, 76px); margin: 72px 0 28px; }
.web-contact > .mono { font-weight: 700; margin-bottom: 28px; }
.web-contact h2 { font-size: clamp(2.4rem, 7.5vw, 5.8rem); max-width: 13ch; }
.web-contact h2 span { color: var(--cream); }
.web-contact-bottom { display: grid; gap: 28px; align-items: end; margin-top: 44px; }
.web-contact-bottom p { max-width: 54ch; font-size: 1.1rem; }
.web-contact .btn-cta { background: var(--black); border-color: var(--black); justify-self: start; }
.web-contact .btn-cta:hover, .web-contact .btn-cta:focus-visible { box-shadow: 4px 4px 0 var(--cream); }

.web-page-foot { margin-top: 0; }
.web-page-foot > p:last-child { max-width: 24ch; }

@media (min-width: 900px) {
  .web-hero-bottom { grid-template-columns: 1fr auto; gap: 48px; }
  .web-section-heading { grid-template-columns: 1fr .8fr; align-items: end; gap: 48px; }
  .web-method-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .web-contact-bottom { grid-template-columns: 1fr auto; gap: 40px; }
}

@media (max-width: 600px) {
  .web-page-header { flex-direction: column; align-items: flex-start; padding: 16px 20px; gap: 12px; }
  .web-page-nav { gap: 16px; font-size: 10px; }
  .web-hero h1 { font-size: clamp(2.7rem, 13vw, 4.3rem); }
  .web-hero-index { margin-top: 54px; font-size: 9px; }
  .web-method { margin-top: 44px; }
  .web-contact { margin-top: 44px; }
}