/* Let the client website be legible in the opening frame. */
.hero-grid {
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(24px, 3.5vw, 54px);
  align-items: center;
}

.hero-copy { min-width: 0; }
.hero h1 {
  font-size: clamp(3.5rem, 5.45vw, 5.5rem);
  line-height: .98;
  white-space: normal;
}

.hero-laptop {
  position: relative;
  top: auto;
  right: auto;
  width: 100%;
  max-width: 740px;
  margin: 0;
  transform: none;
  perspective: none;
  justify-self: end;
}

.hero-laptop-device,
.hero-laptop-device:hover {
  transform: none;
  filter: drop-shadow(0 28px 38px rgba(0, 0, 0, .32));
}
.hero-laptop-device::after { display: none; }
.hero-laptop-metal { filter: brightness(.78) contrast(1.04) saturate(.88); }
.hero-laptop-display { filter: brightness(1.12) contrast(1.03); }

/* Price is a clear answer, not another box in the flow. */
main > #pricing {
  display: block;
  min-height: 0;
  padding-block: clamp(65px, 7vw, 110px);
}

#pricing .pricing-panel {
  grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
  align-items: center;
  gap: clamp(42px, 7vw, 110px);
  padding-block: clamp(35px, 5vw, 65px);
  border-top: 1px solid rgba(199, 203, 206, .28);
  border-bottom: 1px solid rgba(199, 203, 206, .2);
}

#pricing .pricing-intro h2 {
  max-width: 680px;
  font-size: clamp(2.7rem, 4.7vw, 4.5rem);
  line-height: 1.05;
  text-wrap: balance;
}

#pricing .pricing-intro > p:last-child {
  max-width: 440px;
  margin-top: 24px;
  font-size: 1rem;
  line-height: 1.7;
}

#pricing .pricing-details { padding-top: 0; }
#pricing .pricing-label {
  color: var(--silver);
  font: 600 .875rem/1.5 var(--display);
  letter-spacing: .09em;
  text-transform: uppercase;
}

#pricing .pricing-amount {
  margin: 8px 0 18px;
  color: var(--light);
  font: 600 clamp(5rem, 11vw, 10rem)/.88 var(--display);
  letter-spacing: -.07em;
}
#pricing .pricing-amount span {
  font-size: .42em;
  vertical-align: top;
  color: var(--yellow);
}

#pricing .pricing-details .pricing-includes {
  max-width: 490px;
  color: var(--light);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.5;
}
#pricing .pricing-details .pricing-terms {
  max-width: 490px;
  margin-top: 14px;
  font-size: .875rem;
  line-height: 1.65;
}
#pricing .pricing-details .button { margin-top: 28px; }

main > #faq { min-height: 0; padding-block: clamp(64px, 7vw, 100px); }
#faq .faq-layout { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); }
#faq .faq-layout h2 { font-size: clamp(2.5rem, 4.1vw, 3.8rem); text-wrap: balance; }
#faq .faq summary { font-size: 1rem; }
#faq .faq details p { font-size: .9375rem; line-height: 1.7; }

main > #contact { min-height: 0; padding-block: clamp(72px, 7vw, 110px); }
#contact .contact-copy > p:not(.eyebrow) { font-size: 1rem; line-height: 1.7; }
#contact .enquiry-form label { font-size: .9375rem; }
#contact .enquiry-form label:not(.consent-row) > span { font-size: .875rem; }
#contact .form-fallback { font-size: .875rem; }
#contact #enquiry-form { scroll-margin-top: 36px; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-laptop { justify-self: center; width: min(680px, 100%); margin: 22px auto 0; }
  .hero h1 { font-size: clamp(3.1rem, 8vw, 5rem); }
  #pricing .pricing-panel, #faq .faq-layout { grid-template-columns: minmax(0, 1fr); }
  #pricing .pricing-panel { gap: 30px; }
}

@media (max-width: 520px) {
  .hero h1 { font-size: clamp(2.75rem, 12vw, 3.25rem); }
  .hero-laptop { width: 100%; margin-top: 20px; }
  #pricing .pricing-intro h2 { font-size: clamp(2.5rem, 10vw, 3.25rem); }
  #pricing .pricing-amount { font-size: clamp(5.5rem, 26vw, 8rem); }
  #faq .faq-layout h2 { font-size: clamp(2.3rem, 10vw, 3rem); }
}

/* Short captions keep the client work as the focus. */
.homepage .project-summary { margin-top: 12px; max-width: 55ch; color: var(--silver); font-size: 1rem; line-height: 1.65; }
.homepage #contact .enquiry-form h3 { margin-bottom: 24px; }

/* The questions sit in the same open editorial system as the service pages. */
.homepage #faq .faq-intro { position: relative; padding-left: 24px; align-self: start; }
.homepage #faq .faq-intro::before { content: ''; position: absolute; left: 0; top: 4px; width: 2px; height: clamp(72px, 8vw, 112px); background: linear-gradient(#f47b36, #f47b3622); }
.homepage #faq .faq-intro h2 { max-width: 13ch; font-family: var(--body); font-size: clamp(2.5rem, 4vw, 3.8rem); line-height: 1.1; letter-spacing: -.045em; text-transform: none; }
.homepage #faq .faq-intro > p:last-child { max-width: 31ch; margin-top: 18px; color: #bdc5c4; font-size: 1rem; line-height: 1.7; }
@media(max-width:760px) {
  .homepage #faq .faq-intro { padding-left: 18px; }
  .homepage #faq .faq-intro::before { height: 84px; }
  .homepage #faq .faq-intro h2 { font-size: clamp(2.25rem, 9vw, 3rem); }
  .homepage #faq .faq-layout { gap: 24px; }
}