/*
 * v7 — full-width section canvas, consistently centered page content.
 * All section backgrounds reach the viewport edges; text, cards, controls,
 * and footer content sit on the same responsive, centered content grid.
 * Loaded after hero-v6.css to preserve the approved hero composition.
 */
:root {
  --content-max: 1372px;
  --section-gutter: clamp(16px, 3.2vw, 54px);
}

/* The ONLY horizontal content frame used throughout the page. */
.container {
  width: min(calc(100% - 2 * var(--section-gutter)), var(--content-max));
  max-width: var(--content-max);
  margin-inline: auto;
}

/* Every major band fills the full browser width, without framed cards
   or artificial white margins surrounding its background. */
.site-header,
.trust-section,
.work-section,
.statement-section,
.services-section,
.about-section,
.process-section,
.contact-section,
.footer {
  width: 100%;
  margin-inline: 0;
}
.site-header { background: #0b1b34; }
.trust-section { background: #f8fafd; border-bottom: 1px solid #e1e8f1; }
.work-section { background: #fff; }
.statement-section { background: #eaf2fd; }
.services-section { background: #f6f9fd; }
.about-section { background: #112441; }
.process-section { background: #fff; }
.contact-section { background: #0e2140; padding: 0; }
.footer { background: #f8fafd; padding-top: 38px; padding-bottom: 34px; }

/* Contact used to be a small navy inset card floating on a pale page.
   The section owns the navy background now; the content is centered. */
.contact-section .contact-shell {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  padding: 105px 0 112px;
}
.contact-section .contact-shell::before,
.contact-section .contact-shell::after { display: none; }

/* Preserve an easy-to-scan layout rather than centering every line of text. */
.work-section, .services-section, .process-section { padding-block: 112px 120px; }
.statement-inner { min-height: 365px; }
.about-section { padding-block: 112px 120px; }
.nav-inner, .trust-inner, .footer-inner { max-width: var(--content-max); }

@media (max-width: 960px) {
  .work-section, .services-section, .process-section { padding-block: 83px 92px; }
  .about-section { padding-block: 84px 92px; }
  .contact-section .contact-shell { padding-block: 83px 93px; }
  .statement-inner { min-height: 325px; }
}
@media (max-width: 700px) {
  :root { --section-gutter: 16px; }
  .work-section, .services-section, .process-section { padding-block: 70px 76px; }
  .about-section { padding-block: 72px 78px; }
  .contact-section .contact-shell { padding-block: 70px 78px; }
  .statement-inner { min-height: 290px; }
  .footer { padding-top: 30px; padding-bottom: 30px; }
}