/* ==========================================================================
   Sector landing pages — schools, residential, resorts, public spaces.
   Loaded only on those pages, so the homepage payload is unchanged.
   ========================================================================== */

/* ---------------- hero ---------------- */
/* The sector heroes carry a breadcrumb, an eyebrow and a longer paragraph than
   the homepage hero, so they need a little more room and a slightly smaller
   headline than the h1 default. */
.shero { min-height: 88svh; }
.shero .hero-inner { gap: clamp(1rem, 2vw, 1.6rem); }
.shero h1 {
  font-size: clamp(2.2rem, 1.2rem + 4.2vw, 5.2rem);
  max-width: 20ch;
}
.shero .hero-row { margin-top: clamp(1rem, 2vw, 1.8rem); }
.shero .hero-row p { max-width: 62ch; }

/* label sits on photography here, so it cannot use the clay-on-bone default */
.label--light { color: var(--bone); }
.label--light::before { background: var(--clay); opacity: 1; }

.crumbs {
  display: flex;
  gap: .6rem;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(243, 240, 231, .62);
}
.crumbs a { transition: color .25s; }
.crumbs a:hover { color: var(--bone); }
.crumbs span[aria-hidden] { opacity: .45; }

@media (max-width: 900px) { .shero { min-height: 84svh; } }

/* ---------------- why it matters ---------------- */
.split-txt .body-p {
  color: var(--fg-muted);
  max-width: 54ch;
  font-size: 1.02rem;
}

/* ---------------- solution cards ---------------- */
/* Flex, not grid: these sections hold five items, and an auto-fit grid strands
   the fifth one alone on its own row. With flex the last row's items grow to
   fill the width instead, so any count from 4 to 6 lays out cleanly. */
.scards {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 1.6vw, 1.6rem);
}

.scard {
  /* 200px basis lets all five sit on one row at desktop widths; max-width stops
     a single wrapped card from stretching across the whole section */
  flex: 1 1 200px;
  max-width: 460px;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bone-2);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.scard:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(7, 11, 9, .16); }

.scard-img { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.scard-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.96) contrast(1.03);   /* see the note on .mtile img */
  transition: transform 1s var(--ease2);
}
.scard:hover .scard-img img { transform: scale(1.06); }

.scard-body {
  display: grid;
  align-content: start;
  gap: .7rem;
  padding: clamp(1.2rem, 2vw, 1.8rem);
}
.scard-body h3 { font-size: 1.18rem; line-height: 1.15; }
.scard-body p { font-size: .96rem; line-height: 1.62; color: var(--fg-muted); }
.scard-body .num { color: var(--clay); }
.scard-body .tlink { margin-top: .4rem; color: var(--clay-2); }

/* ---------------- value list ---------------- */
.vlist {
  /* Flex, not auto-fit grid: these lists run to four or five points, and a
     three-column grid strands the last one in a row of its own. Flexing lets
     the row rebalance so the tail never sits alone. */
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(2rem, 4vw, 5rem);
  counter-reset: v;
}
.vlist li { flex: 1 1 300px; }
/* Quantity queries: with flex-grow the odd item out stretches to a full row,
   which reads as a mistake. Four points balance as 2x2 and five as 3+2. */
@media (min-width: 1000px) {
  .vlist:has(> li:nth-child(4):last-child) > li { flex-basis: 42%; }
  .vlist:has(> li:nth-child(5):last-child) > li { flex-basis: 28%; }
}
.vlist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2vw, 1.8rem);
  align-items: start;
  padding-block: clamp(1.4rem, 2vw, 2rem);
  border-top: 1px solid rgba(243, 240, 231, .16);
}
.vnum {
  font-family: 'Editorial', Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--clay);
  line-height: 1.4;
}
.vlist h3 { font-size: 1.22rem; margin-bottom: .55rem; }
.vlist p { font-size: .99rem; line-height: 1.68; max-width: 50ch; }

/* ---------------- use cases ---------------- */
.ucases {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--bone-3);
  border: 1px solid var(--bone-3);
}
@media (min-width: 1000px) {
  .ucases:has(> .ucase:nth-child(5):last-child) > .ucase { flex-basis: 30%; }
  .ucases:has(> .ucase:nth-child(7):last-child) > .ucase { flex-basis: 30%; }
}
.ucase {
  flex: 1 1 250px;
  background: var(--bone);
  padding: clamp(1.5rem, 2.4vw, 2.4rem);
  display: grid;
  gap: .7rem;
  align-content: start;
  transition: background .35s;
}
.ucase:hover { background: var(--bone-2); }
.ucase .icn { width: 1.5rem; height: 1.5rem; color: var(--clay); margin-bottom: .3rem; }
.ucase h3 { font-size: 1.1rem; line-height: 1.2; }
.ucase p { font-size: .95rem; line-height: 1.6; color: var(--fg-muted); }

/* ---------------- sector cross-links ---------------- */
.sectors-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.sector-chip {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.4rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px var(--bone-3);
  transition: background .3s, color .3s, box-shadow .3s;
}
.sector-chip:hover { background: var(--ink); color: var(--bone); box-shadow: none; }
.sector-chip .icn { transition: transform .3s var(--ease); }
.sector-chip:hover .icn { transform: translateX(3px); }
/* the page you are already on is shown, but not offered as a link target */
.sector-chip.is-on {
  background: var(--clay);
  color: var(--bone);
  box-shadow: none;
  pointer-events: none;
}

/* ---------------- final CTA ---------------- */
/* These closing headings are full questions rather than the homepage's short
   phrase, so they need a wider measure and a smaller size — at the homepage's
   24ch/4.2rem they break to roughly one word per line. */
.cta-actions .btn--line { color: var(--bone); }
.cta-actions .btn .icn { width: 1.15em; height: 1.15em; }