/*
 * 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));
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:clamp(100px, 14vh, 140px);
}

.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}

/* ---------------------------------------------------------------------------
 * Header clearance.
 *
 * The floating nav pill sits 34px from the top and is 100px tall, so it bottoms
 * out at 134px. --header-h still reads 92px (the older pill), so any hero that
 * padded off --header-h - or off a hardcoded ~97px - had its eyebrow and the
 * top of its h1 sitting underneath the pill. contact.css already carries this
 * fix inline; these are the remaining heroes with the same bug.
 * ------------------------------------------------------------------------- */
.place-hero,
.service-page > .service-motion-hero,
.launch-hero,
.page-hero,
.places-hero{
  padding-top:clamp(140px, 16vh, 180px)!important;
}

@media(max-width:1024px){
  /* pill drops to top:12px, height:64px, so it bottoms out at 76px */
  .place-hero,
  .service-page > .service-motion-hero,
  .launch-hero,
  .page-hero,
  .places-hero{
    padding-top:clamp(100px, 13vh, 128px)!important;
  }
}

/* ---------------------------------------------------------------------------
 * The closing CTA on /faq.
 *
 * service-pages.css only centres this band under `.service-page > .service-cta`,
 * and /faq's main is `.faq-page`, so the band inherited the bare `.service-cta`
 * type rules: a 6.8rem headline, left aligned, with `padding:78px 0` and no
 * gutter at all. Give it the same centred treatment, at a headline size that
 * fits the measure.
 * ------------------------------------------------------------------------- */
.faq-page>.service-cta{
  min-height:0;
  padding:clamp(84px,10vh,118px) var(--shell-pad)!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.faq-page>.service-cta h2{
  max-width:900px;
  margin-inline:auto;
  font-size:clamp(2.6rem,5.2vw,4.4rem);
  line-height:1.02;
}
.faq-page>.service-cta p{max-width:620px;margin-inline:auto}