/*
 * layout-shell.css — the outer edges of the page, in one place.
 *
 * Loaded LAST on every page so it beats the per-page overrides.
 *
 * The problem it fixes: most bands sat on the --max (1344px) grid, but a
 * handful padded straight off var(--gutter), so on a wide monitor they ran
 * ~1632px and read as "that section is wider than the others". Here the
 * background band still goes full bleed; only the CONTENT is pulled back to
 * the same left and right edge as everything else.
 *
 * Below 1440px the max() collapses to var(--gutter), so mobile and laptop
 * are untouched.
 */

:root{
  --shell-pad:max(var(--gutter),calc((100% - var(--max)) / 2));
}

.page-hero,
.place-hero,
.place-opportunity,
.place-build,
.place-pricing,
.place-faq,
.place-next,
.faq-section{
  padding-inline:var(--shell-pad)!important;
}

/* photo-flick sets its own padding at .photo-flick.is-enhanced specificity,
   so drive it through its own token rather than fighting the cascade. */
.photo-flick{--flick-pad-x:var(--shell-pad)}

/* The four hero service cards were the loudest mismatch: 1632px wide with the
   1344px story section directly underneath them. */
.hero-levels{width:min(100%,var(--max))}
/* Deliberately NOT touching .hero-copy: service-vibrancy.css stretches it on
   purpose and centres the headline with justify-content. Capping its width
   left-aligns the whole hero headline. See the comment at service-vibrancy.css
   .hero-copy before changing this. */

/* Live-example strip removed from the hero, so close the gap it was holding
   open between the four cards and the section heading below. */
.story-hero{padding-bottom:40px}
.level-story{padding-top:44px}