/* A shared width hierarchy: roomy comparisons, focused stories, readable answers. */
:root {
  --layout-gutter:clamp(20px,3vw,48px);
  --layout-standard:1232px;
  --layout-focus:1100px;
  --layout-wide:1600px;
  --layout-reading:920px;
}

/* Full-width backgrounds remain; their content follows the same page gutters. */
:is(.home-page,.service-page,.gallery-page,.error-page) .header>.container,
:is(.home-page,.service-page,.gallery-page,.error-page) .footer>.container {
  width:min(var(--layout-standard),calc(100% - var(--layout-gutter) * 2));
  max-width:none;margin-inline:auto;
}
.home-page #home .hero-frame,
.home-page #home .hero-credentials,
.home-page #work>.container,
.home-page #pricing>.container {
  width:min(var(--layout-standard),calc(100% - var(--layout-gutter) * 2));
  max-width:none;margin-inline:auto;
}
.home-page #home .founder-story,
.home-page #work .recognition-intro,
.home-page #contact>.container {
  width:min(var(--layout-focus),calc(100% - var(--layout-gutter) * 2));
  max-width:none;margin-inline:auto;
}
.home-page #solutions>.container {
  width:min(var(--layout-wide),calc(100% - var(--layout-gutter) * 2));
  max-width:none;margin-inline:auto;
}
.home-page #solutions .services-content {width:100%;max-width:none;margin-inline:auto;}
.home-page #solutions .customer-ad-section {
  width:100%;max-width:var(--layout-standard);margin-inline:auto;
}
.home-page #solutions #working-together.process-rebuild {
  width:100%;max-width:var(--layout-focus);margin-inline:auto;
}
.home-page #pricing #faq {
  width:100%;max-width:var(--layout-reading);margin-inline:auto;
}
.home-page :is(.founder-copy,.recognition-copy) p,
.home-page #faq details>p {max-width:65ch;}

@media(min-width:640px) {
  .home-page #work .community-photos-visible {
    width:min(var(--layout-wide),calc(100% - var(--layout-gutter) * 2));
    max-width:none;margin-inline:auto;
  }
  .home-page #work .community-photos-visible .community-collage {padding-inline:0;}
}

/* Keep phone rails, player sizes, and native dialog controls in their own layouts. */
@media(max-width:639px) {
  .home-page #work .community-photos-visible {
    width:calc(100% - var(--layout-gutter) * 2);margin-inline:auto;
  }
  .home-page #work .community-photos-visible>.structured-rail-tools {padding-inline:0;}
}

/* Secondary pages: add after the shared width variables in site-widths.css. */
body.service-page main > .service-breadcrumb,
body.service-page main > section > .container,
body.service-page.service-design main > section > .container {
  width:min(var(--section-width,var(--layout-standard)),calc(100% - var(--layout-gutter) * 2));
  max-width:none;
  margin-inline:auto;
}

/* Side-by-side headings and answers need more room than a single text column. */
.service-page :is(.service-explanation,.service-planning,.service-questions,.service-next-step,.service-related) {
  --section-width:var(--layout-focus);
}
.service-page :is(.service-visual-stories,.service-approach) {
  --section-width:min(1320px,var(--layout-wide));
}
.service-page .service-investment {
  --section-width:var(--layout-reading);
}
.service-page .service-investment:has(.service-plan-rail) {
  --section-width:min(1320px,var(--layout-wide));
}
.service-page :is(.service-answer,.service-editorial > div > p,.service-faq-list details > p,.service-investment .container > p,.service-next-step p) {
  max-width:65ch;
}

/* Broad backgrounds stay full bleed; every content edge uses the same gutter. */
body.gallery-page .gallery-editorial > .container,
body.gallery-page .gallery-library > .container,
body.gallery-page .gallery-contact > .container {
  width:min(var(--section-width,var(--layout-standard)),calc(100% - var(--layout-gutter) * 2));
  max-width:none;
  margin-inline:auto;
}
.gallery-page .gallery-library {--section-width:min(1320px,var(--layout-wide));}
.gallery-page .gallery-contact {--section-width:var(--layout-focus);}
.gallery-page .gallery-library :is(.gallery-library-heading,.gallery-tools,.gallery-empty) {
  max-width:none;
  width:100%;
}

@media(min-width:940px) {
  .gallery-page .gallery-library .video-gallery {
    width:100%;
    max-width:none;
    gap:26px;
  }
  .gallery-page .gallery-library .video-gallery > .video-card {
    flex:0 1 calc((100% - 52px) / 3);
    max-width:420px;
  }
}

/* The error explanation is a short reading task, not a wide showcase. */
body.error-page main.container.not-found {
  width:min(var(--layout-reading),calc(100% - var(--layout-gutter) * 2));
  max-width:none;
  margin-inline:auto;
}