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

/* ---------------------------------------------------------------------------
 * Locality index.
 *
 * Parent-area pages can carry hundreds of child locations. Keep each letter
 * as one readable row instead of turning uneven groups into equal-height
 * cards. The links then reflow from four columns to one without changing the
 * alphabetical DOM or keyboard order.
 * ------------------------------------------------------------------------- */
.area-review .locations-index--local{
  padding:clamp(84px,8vw,120px) var(--shell-pad) clamp(96px,9vw,136px)!important;
  background:var(--cloud);
  color:var(--ink);
}

.area-review .locations-index--local .locations-index__head,
.area-review .locations-index--local .locations-index__grid{
  width:min(100%,var(--max));
  margin-inline:auto;
}

.area-review .locations-index--local .locations-index__head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.7fr);
  align-items:end;
  gap:clamp(28px,5vw,72px);
  margin-bottom:clamp(52px,6vw,80px);
}

.area-review .locations-index--local .locations-index__head h2{
  max-width:900px;
  font-size:clamp(2.75rem,5vw,5rem);
  line-height:.98;
  letter-spacing:-.04em;
  text-wrap:balance;
}

.area-review .locations-index--local .locations-index__head p{
  max-width:54ch;
  color:var(--muted);
  font-size:clamp(1rem,1.25vw,1.125rem);
  line-height:1.55;
}

.area-review .locations-index--local .locations-index__col{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:clamp(18px,2.5vw,34px);
  padding:clamp(24px,2.5vw,34px) 0;
  border-top:1px solid var(--line);
}

.area-review .locations-index--local .locations-index__col:last-child{
  border-bottom:1px solid var(--line);
}

.area-review .locations-index--local .locations-index__col h3{
  margin:0;
  padding-top:8px;
  color:var(--navy);
  font-size:1rem;
  font-weight:700;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.area-review .locations-index--local .locations-index__links{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 clamp(12px,1.5vw,22px);
  min-width:0;
}

.area-review .locations-index--local .locations-index__links a{
  display:flex;
  min-width:0;
  min-height:48px;
  align-items:center;
  padding:10px 12px;
  border-bottom:1px solid rgb(76 29 149 / .1);
  border-radius:8px 8px 0 0;
  color:var(--ink);
  font-size:clamp(.94rem,1.05vw,1.0625rem);
  font-weight:500;
  line-height:1.3;
  text-decoration:none;
  overflow-wrap:anywhere;
  transition:background-color .2s var(--ease),color .2s var(--ease),padding-left .25s var(--ease-out);
}

@media(hover:hover){
  .area-review .locations-index--local .locations-index__links a:hover{
    padding-left:16px;
    background:rgb(1 178 253 / .1);
    color:var(--navy);
  }
}

.area-review .locations-index--local .locations-index__links a:focus-visible{
  position:relative;
  z-index:1;
  outline:3px solid var(--amber);
  outline-offset:2px;
  background:var(--white);
}

@media(max-width:1180px){
  .area-review .locations-index--local .locations-index__links{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:900px){
  .area-review .locations-index--local .locations-index__head{grid-template-columns:1fr}
  .area-review .locations-index--local .locations-index__links{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:600px){
  .area-review .locations-index--local{
    padding-top:72px!important;
    padding-bottom:88px!important;
  }
  .area-review .locations-index--local .locations-index__head{
    gap:18px;
    margin-bottom:42px;
  }
  .area-review .locations-index--local .locations-index__head h2{
    font-size:clamp(2.35rem,11vw,3.2rem);
  }
  .area-review .locations-index--local .locations-index__col{
    grid-template-columns:1fr;
    gap:10px;
    padding:26px 0;
  }
  .area-review .locations-index--local .locations-index__col h3{padding:0 0 4px}
  .area-review .locations-index--local .locations-index__links{grid-template-columns:1fr}
  .area-review .locations-index--local .locations-index__links a{
    min-height:44px;
    padding:9px 0;
    border-radius:0;
  }
}