.belonging-tabs {
  max-width: 1250px;
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
}

.belonging-tabs,
.belonging-tabs * {
  box-sizing: border-box;
}

.belonging-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px 0;
  border-bottom: 1px solid rgba(0,0,0,0.14);
}

.belonging-tabs__tab {
  appearance: none;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: #f0f0f0;
  color: #222;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  padding: 13px 20px;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.belonging-tabs__tab:hover,
.belonging-tabs__tab:focus-visible {
  background: #e2e2e2;
  outline: none;
}

.belonging-tabs__tab.is-active {
  background: #222;
  color: #fff;
  transform: translateY(1px);
}

.belonging-tabs__panels {
  position: relative;
  overflow: hidden;
  transition: height 320ms ease;
}

.belonging-tabs__panel {
  width: 100%;
  opacity: 0;
  transition: opacity 260ms ease;
}

.belonging-tabs__panel[hidden] {
  display: block !important;
}

.belonging-tabs__panel.is-positioned {
  position: absolute;
  top: 0;
  left: 0;
}

.belonging-tabs__panel.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.belonging-tabs__panel:not(.is-active) {
  pointer-events: none;
  z-index: 1;
}

.belonging-tabs__intro {
  max-width: 980px;
  margin: 0 0 26px 0;
}

.belonging-tabs__heading {
  margin: 0 0 10px 0;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
  font-weight: 700;
  color: #111;
}

.belonging-tabs__text {
  font-size: 18px;
  line-height: 1.5;
  color: #222;
}

.belonging-tabs__text p:first-child {
  margin-top: 0;
}

.belonging-tabs__text p:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .belonging-tabs__panels,
  .belonging-tabs__panel,
  .belonging-tabs__tab {
    transition: none !important;
  }
}

.belonging-triangle {
  --bt-prompt-width: 300px;
  --bt-band-min-height: 125px;
  --bt-band-pad-top: 24px;
  --bt-band-pad-right: 36px;
  --bt-band-pad-bottom: 28px;
  --bt-band-pad-left: 290px;
  --bt-row-gap: 22px;
  --bt-slope: 65px;
  --bt-text-colour: #fff;
  --bt-prompt-colour: #222;

  max-width: 1250px;
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  display: grid;
  grid-template-rows: repeat(4, minmax(var(--bt-band-min-height), 1fr));
  row-gap: var(--bt-row-gap);
}

.belonging-triangle__row {
  position: relative;
  min-height: 0;
}

.belonging-triangle__prompt {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--bt-prompt-width);
  transform: none;
  z-index: 3;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  color: var(--bt-prompt-colour);
  opacity: 0.72;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 10px;
}

.belonging-triangle__prompt:empty {
  display: none;
}

.belonging-triangle__band {
  position: relative;
  min-height: 100%;
  height: 100%;
  padding: var(--bt-band-pad-top) var(--bt-band-pad-right) var(--bt-band-pad-bottom) var(--bt-band-pad-left);
  color: var(--bt-text-colour);
  overflow: hidden;
  box-sizing: border-box;
  background: linear-gradient(90deg, var(--bt-row-start), var(--bt-row-end));
  clip-path: polygon(
    var(--cut-top) 0,
    100% 0,
    100% 100%,
    var(--cut-bottom) 100%
  );
}

.belonging-triangle__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.20),
    rgba(0,0,0,0.08),
    rgba(0,0,0,0.02)
  );
  clip-path: polygon(
    var(--cut-top) 0,
    calc(var(--cut-top) + var(--facet-top-offset)) 0,
    calc(var(--cut-bottom) + var(--facet-bottom-offset)) 100%,
    var(--cut-bottom) 100%
  );
}

.belonging-triangle__band > * {
  position: relative;
  z-index: 2;
}

.belonging-triangle__body {
  font-size: 16.4px;
  line-height: 1.34;
  max-width: 980px;
  font-weight: 400;
  margin-left:15px;
}

.belonging-triangle__body p {
  margin-top: 0;
}

.belonging-triangle__body p:last-child {
  margin-bottom: 0;
}


/* Geometry: four fixed rows. Facet offsets widen row-by-row to create the triangular face. */
.belonging-triangle__row:nth-child(1) .belonging-triangle__band {
  --cut-top: 290px;
  --cut-bottom: 225px;
  --facet-top-offset: -1px;
  --facet-bottom-offset: 130px;
}

.belonging-triangle__row:nth-child(2) .belonging-triangle__band {
  --cut-top: 215px;
  --cut-bottom: 150px;
  --facet-top-offset: 150px;
  --facet-bottom-offset: 280px;
}

.belonging-triangle__row:nth-child(3) .belonging-triangle__band {
  --cut-top: 140px;
  --cut-bottom: 75px;
  --facet-top-offset: 300px;
  --facet-bottom-offset: 430px;
}

.belonging-triangle__row:nth-child(4) .belonging-triangle__band {
  --cut-top: 65px;
  --cut-bottom: 0px;
  --facet-top-offset: 450px;
  --facet-bottom-offset: 580px;
}

/* Colour schemes */
.belonging-triangle--mental-health .belonging-triangle__row:nth-child(1) .belonging-triangle__band { --bt-row-start: #0b6f6a; --bt-row-end: #0f8f88; }
.belonging-triangle--mental-health .belonging-triangle__row:nth-child(2) .belonging-triangle__band { --bt-row-start: #0f8f88; --bt-row-end: #12a29c; }
.belonging-triangle--mental-health .belonging-triangle__row:nth-child(3) .belonging-triangle__band { --bt-row-start: #12a29c; --bt-row-end: #18b3ae; }
.belonging-triangle--mental-health .belonging-triangle__row:nth-child(4) .belonging-triangle__band { --bt-row-start: #18b3ae; --bt-row-end: #22c4bf; }

.belonging-triangle--behaviour .belonging-triangle__row:nth-child(1) .belonging-triangle__band { --bt-row-start: #6e2f62; --bt-row-end: #8a3f7c; }
.belonging-triangle--behaviour .belonging-triangle__row:nth-child(2) .belonging-triangle__band { --bt-row-start: #8a3f7c; --bt-row-end: #a7468e; }
.belonging-triangle--behaviour .belonging-triangle__row:nth-child(3) .belonging-triangle__band { --bt-row-start: #a7468e; --bt-row-end: #bf519b; }
.belonging-triangle--behaviour .belonging-triangle__row:nth-child(4) .belonging-triangle__band { --bt-row-start: #bf519b; --bt-row-end: #d65aa7; }

.belonging-triangle--attendance .belonging-triangle__row:nth-child(1) .belonging-triangle__band { --bt-row-start: #275b82; --bt-row-end: #2e6f9d; }
.belonging-triangle--attendance .belonging-triangle__row:nth-child(2) .belonging-triangle__band { --bt-row-start: #2e6f9d; --bt-row-end: #1f7faa; }
.belonging-triangle--attendance .belonging-triangle__row:nth-child(3) .belonging-triangle__band { --bt-row-start: #1f7faa; --bt-row-end: #1b95b8; }
.belonging-triangle--attendance .belonging-triangle__row:nth-child(4) .belonging-triangle__band { --bt-row-start: #1b95b8; --bt-row-end: #1aa6c5; }

.belonging-triangle--safety .belonging-triangle__row:nth-child(1) .belonging-triangle__band { --bt-row-start: #3e5f3e; --bt-row-end: #4c744b; }
.belonging-triangle--safety .belonging-triangle__row:nth-child(2) .belonging-triangle__band { --bt-row-start: #4c744b; --bt-row-end: #5f8a58; }
.belonging-triangle--safety .belonging-triangle__row:nth-child(3) .belonging-triangle__band { --bt-row-start: #5f8a58; --bt-row-end: #789f5f; }
.belonging-triangle--safety .belonging-triangle__row:nth-child(4) .belonging-triangle__band { --bt-row-start: #789f5f; --bt-row-end: #95b163; }

.belonging-triangle--learning .belonging-triangle__row:nth-child(1) .belonging-triangle__band { --bt-row-start: #a85627; --bt-row-end: #c0672e; }
.belonging-triangle--learning .belonging-triangle__row:nth-child(2) .belonging-triangle__band { --bt-row-start: #c0672e; --bt-row-end: #d97a33; }
.belonging-triangle--learning .belonging-triangle__row:nth-child(3) .belonging-triangle__band { --bt-row-start: #d97a33; --bt-row-end: #e6953a; }
.belonging-triangle--learning .belonging-triangle__row:nth-child(4) .belonging-triangle__band { --bt-row-start: #e6953a; --bt-row-end: #f0b83a; }

@media (max-width: 950px) {
  .belonging-triangle {
    --bt-prompt-width: 230px;
    --bt-band-min-height: 115px;
    --bt-band-pad-left: 220px;
  }

  .belonging-triangle__prompt {
    font-size: 16px;
  }

  .belonging-triangle__body {
    font-size: 17px;
    line-height: 1.36;
  }

  .belonging-triangle__row:nth-child(1) .belonging-triangle__band {
    --cut-top: 220px;
    --cut-bottom: 165px;
    --facet-top-offset: -1px;
    --facet-bottom-offset: 110px;
  }

  .belonging-triangle__row:nth-child(2) .belonging-triangle__band {
    --cut-top: 160px;
    --cut-bottom: 105px;
    --facet-top-offset: 120px;
    --facet-bottom-offset: 230px;
  }

  .belonging-triangle__row:nth-child(3) .belonging-triangle__band {
    --cut-top: 100px;
    --cut-bottom: 45px;
    --facet-top-offset: 240px;
    --facet-bottom-offset: 350px;
  }

  .belonging-triangle__row:nth-child(4) .belonging-triangle__band {
    --cut-top: 40px;
    --cut-bottom: 0px;
    --facet-top-offset: 360px;
    --facet-bottom-offset: 470px;
  }
}

@media (max-width: 700px) {
  .belonging-triangle {
    display: block;
    max-width: none;
  }

  .belonging-triangle__row {
    margin-bottom: 24px;
  }

  .belonging-triangle__prompt {
    position: static;
    width: auto;
    transform: none;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.25;
    opacity: 0.72;
  }

  .belonging-triangle__band {
    clip-path: none;
    min-height: 0;
    height: auto;
    padding: 20px 22px 22px 22px;
  }

  .belonging-triangle__band::before {
    display: none;
  }

  .belonging-triangle__body {
    font-size: 16px;
    line-height: 1.4;
    max-width: none;
  }
}

/* Rich text safeguards for editor-generated content */
.belonging-tabs__text ul,
.belonging-tabs__text ol {
  margin-top: 0.35em;
  margin-bottom: 0;
  padding-left: 1.25em;
}

.belonging-tabs__text a,
.belonging-triangle__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.belonging-triangle__body ul,
.belonging-triangle__body ol {
  margin-top: 0.35em;
  margin-bottom: 0;
  padding-left: 1.2em;
}