/* layout.css - shell, section bands, column systems */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: var(--pad-section) 0; }

/* Band colours never repeat in adjacent sections. */
.section--white { background: var(--white); }
.section--band  { background: var(--band); }
.section--sand  { background: var(--sand); }

.section--cta {
  background: var(--green-dark);
  color: #e4f7ea;
}

.heading-block {
  max-width:100%;
  margin: 0 auto 46px;
  text-align: center;
}
.heading-block h1,
.heading-block h2,
.heading-block h3 { margin-left: auto; margin-right: auto; }

.heading-block__sub {
  color: var(--ink);
  font-size: var(--fs-body);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.section--cta .heading-block__sub { color: inherit; }

/* Two column split. Columns match height so no empty voids appear. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}

.split--reverse .split__figure { order: -1; }

.split__text > h2,
.split__text > h3 { margin-bottom: 18px; }

.split__lead {
  font-size: var(--fs-h3);
  font-family: var(--font-display);
  font-weight: var(--w-ui);
  line-height: 1.14;
  margin-bottom: 16px;
  max-width: 16em;
}

.split__aside {
  margin-top: 18px;
  font-size: var(--fs-small);
  color: var(--muted);
}

.split__figure {
  margin: 0;
  height: 100%;
  min-height: 380px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.split__figure img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
}

/* The form is always taller than the copy beside it. Centring the copy
   splits the difference top and bottom so it reads as balance rather than
   as a hole under the text. */
.split--form {
  gap: 48px;
  align-items: center;
  grid-template-columns: 1fr 1.02fr;
}

.split--form .split__text { max-width: 46ch; }

/* Card grids */
.steps,
.cards,
.rates,
.tiles {
  display: grid;
  gap: var(--gap-grid);
}

.steps  { grid-template-columns: repeat(4, 1fr); }
.cards  { grid-template-columns: repeat(4, 1fr); }
.rates  { grid-template-columns: repeat(4, 1fr); }
.tiles  { grid-template-columns: repeat(4, 1fr); }

.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.section .center { margin-top: 38px; }

.sitemap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.sitemap__title { margin-bottom: 8px; }
.sitemap li { padding: 3px 0; font-size: var(--fs-small); }




/* Two column split. Columns match height so no empty voids appear. */
.splitt {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 52px;
  align-items: center;
}