/* Shared page geometry: one outer edge, one rhythm between chapters. */
main {
  --page-width: 1200px;
  --page-inset: 88%;
  --section-space: clamp(104px, 9vw, 144px);
  --section-half: calc(var(--section-space) / 2);
  --layout-gap: clamp(32px, 5vw, 72px);
}

.section-width, .gallery-shell, .hero-stage {
  width: min(var(--page-inset), var(--page-width));
  max-width: none;
  margin-inline: auto;
}

/* Headings, images and closing details share the same outer guides. */
.work { padding-top: var(--section-half); }
.about, .testimonials, .faq, .contact { padding-block: var(--section-half); }
.about-layout { column-gap: var(--layout-gap); }
.faq-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--layout-gap); }
.contact-layout { column-gap: var(--layout-gap); row-gap: 48px; }
.contact-details { column-gap: var(--layout-gap); }
.testimonial-copy { padding-inline: 0; }

/* The quotation stays on the same outer guides as the surrounding chapters. */
.quote-section:not(.quote-held) { padding-block: var(--section-half); }
.quote-section.quote-held { margin-block: var(--section-half); }
.quote-held .quote-pin { padding-block: 20px; }

/* Footer belongs to the contact chapter, with the same left and right edges. */
.site-footer { padding: 32px 0 20px; border-top: 0; }
.footer-content { padding-top: 28px; border-top: 1px solid #d7c3a225; }
.footer-main, .footer-bottom { max-width: none; }
.footer-bottom { margin-top: 28px; }

/* Quiet scroll progress, with a wider invisible area for dragging. */
html.has-scroll-progress { scrollbar-width: none; }
html.has-scroll-progress::-webkit-scrollbar { display: none; }
.scroll-progress {
  position: fixed; z-index: 45; right: 0;
  top: max(18px, env(safe-area-inset-top)); bottom: max(18px, env(safe-area-inset-bottom));
  width: 14px; cursor: ns-resize; touch-action: none; user-select: none;
}
.scroll-progress::before, .scroll-progress > span {
  position: absolute; top: 0; right: 5px; bottom: 0; width: 2px; border-radius: 2px;
}
.scroll-progress::before { content: ''; background: #c7d0c01c; }
.scroll-progress > span { background: #d6c2a1a6; transform: scaleY(var(--page-progress, 0)); transform-origin: top; }
.scroll-progress::after {
  content: ''; position: absolute; right: 4px; top: calc(var(--page-progress, 0) * (100% - 20px));
  width: 4px; height: 20px; border-radius: 4px; background: #e4cfac;
  opacity: 0; transition: opacity 180ms ease;
}
.scroll-progress:is(:hover, :focus-visible, .is-dragging)::after { opacity: 1; }
.scroll-progress:focus-visible { outline: 1px solid #d6c2a199; outline-offset: -1px; border-radius: 8px; }
body.modal-open .scroll-progress { visibility: hidden; }

@media (max-width: 1023px) {
  main { --section-space: 96px; --layout-gap: 32px; }
}

@media (max-width: 700px) {
  main { --section-space: 80px; --layout-gap: 28px; }
  .hero-stage { padding-bottom: 24px; }
  .about-layout { row-gap: 24px; }
  .about-services { margin-top: 8px; }
  .faq-layout { grid-template-columns: 1fr; row-gap: 28px; }
  .contact-layout { row-gap: 28px; }
  .quote-held .quote-pin { padding-block: 12px; }
  .site-footer { padding-block: 12px 16px; }
  .footer-content { padding-top: 24px; }
  .footer-bottom { margin-top: 24px; }
  .scroll-progress { width: 10px; top: max(12px, env(safe-area-inset-top)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .scroll-progress::before, .scroll-progress > span { right: 3px; }
  .scroll-progress::after { right: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .quote-section.quote-held { height: auto; padding-block: var(--section-half); margin-block: 0; }
  .quote-held .quote-pin { padding-block: 0; }
}