.approach-page {
    background: var(--paper);
}

.approach-label,
.approach-hero__meta,
.contrast-card>span {
    font: 500 .55rem var(--mono);
    text-transform: uppercase;
}

.approach-hero {
    min-height: 94svh;
    padding: 10rem 1.4rem 2rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* border-bottom: 1px solid; */
}

.approach-hero__meta {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.approach-hero h1 {
    max-width: 11ch;
    margin: auto 0;
    line-height: .77;
    letter-spacing: -.09em;
}

.approach-hero h1 span,
.approach-hero h1 em {
    display: block;
}

.approach-hero h1 em {
    margin-left: 13vw;
    color: var(--orange);
    font-style: normal;
}

.approach-hero__bottom {
    padding-top: 1rem;
    display: grid;
    grid-template-columns: minmax(16rem, 35rem) auto;
    justify-content: space-between;
    gap: 4rem;
    align-items: end;
    border-top: 1px solid;
}

.approach-hero__bottom p {
    margin: 0;
    font: clamp(.78rem, 1vw, .92rem)/1.7 var(--mono);
}

.approach-hero__bottom a {
    display: flex;
    gap: 3rem;
    padding: 1rem 1.2rem;
    color: var(--paper);
    background: var(--ink);
    border: 1px solid;
    box-shadow: 5px 5px 0 var(--yellow);
    font: 500 .58rem var(--mono);
    text-transform: uppercase;
    transition: transform .2s, box-shadow .2s;
}

.approach-hero__bottom a:hover {
    transform: translate(5px, 5px);
    box-shadow: none;
}

.approach-statement {
    padding: clamp(6rem, 10vw, 11rem) 1.4rem;
    color: var(--paper);
    background: var(--ink);
    border-bottom: 1px solid;
}

.approach-statement h2 {
    max-width: 13ch;
    margin: 5rem 0;
    font-size: clamp(4rem, 8vw, 8.5rem);
    line-height: .86;
    letter-spacing: -.08em;
}

.approach-statement h2 em {
    color: var(--yellow);
    font-style: normal;
}

.approach-statement__copy {
    max-width: 65rem;
    margin-left: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 6rem);
    padding-top: 1.2rem;
    border-top: 1px solid rgba(246, 242, 233, .45);
}

.approach-statement__copy p {
    margin: 0;
    font: .78rem/1.75 var(--mono);
}

.ecosystem {
    padding: clamp(6rem, 10vw, 10rem) 1.4rem;
    color: var(--paper);
    background: var(--ink);
    border-bottom: 1px solid var(--ink);
}

.ecosystem__head {
    display: grid;
    grid-template-columns: .3fr 1fr .45fr;
    gap: 4vw;
    align-items: end;
    margin-bottom: clamp(5rem, 9vw, 9rem);
}

.ecosystem__head h2 {
    max-width: 13ch;
    margin: 0;
    font-size: clamp(3.8rem, 6.4vw, 6.8rem);
    line-height: .88;
    letter-spacing: -.075em;
}

.ecosystem__head>p:last-child {
    margin: 0;
    font: .72rem/1.7 var(--mono);
}

.approach-contrast {
    padding: clamp(6rem, 10vw, 10rem) 1.4rem;
    background: var(--cream);
    border-bottom: 1px solid;
}

.approach-contrast__head {
    display: grid;
    grid-template-columns: .3fr 1fr;
    gap: 4vw;
    margin-bottom: 5rem;
}

.approach-contrast__head h2 {
    max-width: 15ch;
    margin: 0;
    font-size: clamp(3.7rem, 6vw, 6.5rem);
    line-height: .9;
    letter-spacing: -.07em;
}

.approach-contrast__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid;
}

.contrast-card {
    min-height: 37rem;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
}

.contrast-card:first-child {
    border-right: 1px solid;
}

.contrast-card--limited {
    background: var(--paper);
}

.contrast-card--northstar {
    background: var(--yellow);
}

.contrast-card h3 {
    margin: auto 0 1.5rem;
    font-size: clamp(3.2rem, 5.4vw, 5.8rem);
    line-height: .88;
    letter-spacing: -.075em;
}

.contrast-card p {
    max-width: 33rem;
    margin: 0;
    font: .7rem/1.7 var(--mono);
}

.approach-close {
    min-height: 70vh;
    padding: clamp(6rem, 10vw, 10rem) 1.4rem;
    display: grid;
    grid-template-columns: 1fr minmax(18rem, .35fr);
    gap: 5vw;
    align-items: end;
    color: var(--paper);
    background: var(--orange);
    border-bottom: 1px solid var(--ink);
}

.approach-close h2 {
    max-width: 11ch;
    margin: 2rem 0 0;
    font-size: clamp(4.2rem, 8vw, 8.5rem);
    line-height: .85;
    letter-spacing: -.08em;
}

.approach-close>p {
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid;
    font: .75rem/1.75 var(--mono);
}

.approach-next {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid;
}

.approach-next a {
    min-height: 15rem;
    padding: 1.3rem;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    transition: color .35s var(--ease), background-color .35s var(--ease);
}

.approach-next a:first-child {
    border-right: 1px solid;
}

.approach-next a:hover,
.approach-next a:focus-visible {
    background: var(--yellow);
}

.approach-next span {
    font: 500 .54rem var(--mono);
    text-transform: uppercase;
}

.approach-next strong {
    margin: auto 0 0;
    font-size: clamp(2.5rem, 4.5vw, 4.8rem);
    letter-spacing: -.065em;
}

.approach-next i {
    align-self: flex-end;
    font-size: 1.8rem;
    font-style: normal;
    transition: transform .35s var(--ease);
}

.approach-next a:hover i,
.approach-next a:focus-visible i {
    transform: translateX(.5rem);
}

@media (max-width: 900px) {

    .ecosystem__head,
    .approach-contrast__head {
        grid-template-columns: 1fr;
    }

    .ecosystem__head>p:last-child {
        max-width: 34rem;
    }

    .approach-close {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .approach-hero {
        min-height: 46rem;
        padding-top: 7rem;
    }

    .approach-hero__meta>span:last-child {
        display: none;
    }

    .approach-hero h1 {
        max-width: 100%;
        min-width: 0;
    }

    .approach-hero h1 em {
        margin-left: 0;
    }

    .approach-hero__bottom,
    .approach-statement__copy,
    .approach-contrast__grid,
    .approach-next {
        grid-template-columns: 1fr;
    }

    .approach-hero__bottom {
        gap: 2rem;
        width: calc(100vw - 2.8rem);
        min-width: 0;
        align-self: flex-start;
    }

    .approach-hero__bottom p {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .approach-hero__bottom a {
        width: max-content;
        max-width: 100%;
    }

    .approach-statement h2,
    .ecosystem__head h2,
    .approach-contrast__head h2,
    .approach-close h2 {
        font-size: clamp(3.5rem, 15vw, 4.8rem);
    }

    .approach-statement__copy {
        gap: 1.5rem;
    }

    .contrast-card {
        min-height: 29rem;
    }

    .contrast-card:first-child,
    .approach-next a:first-child {
        border-right: 0;
        border-bottom: 1px solid;
    }

    .approach-close {
        min-height: 40rem;
    }

    .approach-next a {
        min-height: 11rem;
    }
}

/* UX spacing and readability refinements. */
@media (max-width: 640px) {
    .approach-close {
        min-height: 0;
        padding-block: 3rem;
        row-gap: 2rem;
        align-content: start;
    }
}

/* ========================================
   ECOSYSTEM WHEEL
   ======================================== */

.ecosystem-map {
    width: min(100%, 62rem);
    margin: 0 auto;
}

.ecosystem-wheel {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.wheel-guides path {
    fill: none;
    stroke: rgba(246, 242, 233, .3);
    stroke-width: 2;
}

.wheel-wedge path {
    stroke: var(--ink);
    stroke-width: 4;
}

.wheel-ticks line {
    stroke-width: 2;
    stroke-linecap: round;
}

.wheel-v {
    stroke: var(--paper);
    stroke-width: 1.5;
    opacity: .85;
}

.wheel-text {
    fill: var(--paper);
    transition: fill .25s;
    font-family: inherit;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.wheel-text--wedge {
    fill: #fff;
}

/* Label cells: ink with paper text, yellow with ink text on hover / focus */
.wheel-cell {
    fill: transparent;
    transition: fill .25s;
}

.wheel-item:hover .wheel-cell {
    fill: var(--yellow);
}

.wheel-item:hover .wheel-text {
    fill: var(--ink);
}

.wheel-ticks {
    pointer-events: none;
}

.wheel-v {
    pointer-events: none;
}

/* Text list: kept for assistive tech only (the wheel carries the same content). */
.ecosystem-list {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    list-style: none;
}

/* Mobile: the whole wheel fits the screen; labels are enlarged within the wheel to stay legible. */
@media (max-width: 700px) {
    .ecosystem-map {
        position: relative;
        width: calc(100% + 1.4rem);
        margin-inline: -.7rem;
    }

    .ecosystem-wheel text[font-size="12"],
    .ecosystem-wheel text[font-size="13"] {
        font-size: 14px;
        letter-spacing: 0;
    }

    .ecosystem-wheel text[font-size="16"] {
        font-size: 19px;
    }

    .ecosystem-wheel text[font-size="17"] {
        font-size: 21px;
    }

    .ecosystem-wheel text[font-size="20"] {
        font-size: 26px;
    }
}

/* ========================================
   ECOSYSTEM
   ======================================== */

.ecosystem {
    padding: clamp(6rem, 10vw, 10rem) 1.4rem;
    color: var(--ink);
    background: var(--paper);
    border-bottom: 1px solid;
}

.ecosystem__head {
    display: grid;
    grid-template-columns: 1fr .45fr;
    gap: 4vw;
    align-items: end;
    margin-bottom: clamp(5rem, 9vw, 9rem);
}

.ecosystem__head h2 {
    max-width: 13ch;
    margin: 0;
    font-size: clamp(3.8rem, 6.4vw, 6.8rem);
    line-height: .88;
    letter-spacing: -.075em;
}

.ecosystem__head>p:last-child {
    margin: 0;
    font: .72rem/1.7 var(--mono);
}


/* ========================================
   ECOSYSTEM WHEEL
   ======================================== */

.ecosystem-map {
    width: min(100%, 62rem);
    margin: 0 auto;
    padding: clamp(1rem, 2vw, 2rem);
    background: var(--ink);
}

.ecosystem-wheel {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}


/* Subtle guide rings */
.wheel-guides path {
    fill: none;
    stroke: rgba(246, 242, 233, .3);
    stroke-width: 2;
}


/* Main coloured ecosystem bands */
.wheel-wedge path {
    stroke: var(--ink);
    stroke-width: 4;
}


/* Centre star */
.ecosystem-wheel circle {
    /* Keep SVG's existing centre colours */
}


/* Dividing lines */
.wheel-v {
    stroke: var(--paper);
    stroke-width: 1.5;
    opacity: .85;
}


/* Main wheel labels */
.wheel-text {
    fill: var(--paper);
    transition: fill .25s;
    font-family: inherit;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.wheel-text--wedge {
    fill: #fff;
}


/* ========================================
   HOVER AREAS
   ======================================== */

.wheel-cell {
    fill: transparent;
    transition: fill .25s;
}

.wheel-item:hover .wheel-cell,
.wheel-item:focus-within .wheel-cell {
    fill: var(--yellow);
}

.wheel-item:hover .wheel-text,
.wheel-item:focus-within .wheel-text {
    fill: var(--ink);
}


/* Tick marks */
.wheel-ticks {
    pointer-events: none;
}

.wheel-ticks line {
    stroke-width: 2;
    stroke-linecap: round;
}

.wheel-v {
    pointer-events: none;
}


/* ========================================
   ACCESSIBILITY LIST
   ======================================== */

.ecosystem-list {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    list-style: none;
}


/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 900px) {

    .ecosystem__head {
        grid-template-columns: 1fr;
    }

    .ecosystem__head>p:last-child {
        max-width: 34rem;
    }
}


@media (max-width: 700px) {

    .ecosystem {
        padding-inline: 1.2rem;
    }

    .ecosystem-map {
        position: relative;
        width: calc(100% + 1.4rem);
        margin-inline: -.7rem;
        padding: .75rem;
    }

    .ecosystem-wheel text[font-size="12"],
    .ecosystem-wheel text[font-size="13"] {
        font-size: 14px;
        letter-spacing: 0;
    }

    .ecosystem-wheel text[font-size="16"] {
        font-size: 19px;
    }

    .ecosystem-wheel text[font-size="17"] {
        font-size: 21px;
    }

    .ecosystem-wheel text[font-size="20"] {
        font-size: 26px;
    }
}

/* ========================================
   LEARNING ECOSYSTEM
   ======================================== */

.ecosystem {
    padding: clamp(6rem, 10vw, 10rem) 1.4rem;
    color: var(--ink);
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
}

.ecosystem__head {
    width: min(100%, 70rem);
    margin: 0 auto clamp(3rem, 6vw, 5rem);
}

.ecosystem-map {
    width: min(100%, 62rem);
    margin: 0 auto;
    background: var(--paper);
}

.ecosystem-wheel {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}


/* ========================================
   INK BACKGROUND FOR COLOURED BANDS ONLY
   ======================================== */

.wheel-colour-bg {
    fill: var(--ink);
}


/* ========================================
   GUIDE RINGS
   ======================================== */

.wheel-guides path {
    fill: none;
    stroke: rgba(33, 30, 25, .28);
    stroke-width: 2;
}


/* ========================================
   COLOURED BANDS
   ======================================== */

/*
 * The page/wheel background remains var(--paper).
 * Ink is used only as the visible backing/separation
 * around the four coloured bands.
 */
.wheel-wedge path {
    stroke: var(--ink);
    stroke-width: 8;
    stroke-linejoin: round;
}


/* ========================================
   WHEEL TEXT
   ======================================== */

.wheel-text {
    fill: var(--ink);
    transition: fill .25s ease;
    font-family: inherit;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.wheel-text--wedge {
    fill: #fff;
}


/* ========================================
   INNER WHEEL CELLS
   ======================================== */

.wheel-cell {
    fill: transparent;
    transition: fill .25s ease;
}

.wheel-item {
    cursor: pointer;
}

.wheel-item:hover .wheel-cell,
.wheel-item:focus-within .wheel-cell {
    fill: var(--yellow);
}

.wheel-item:hover .wheel-text,
.wheel-item:focus-within .wheel-text {
    fill: var(--ink);
}


/* ========================================
   CENTRE
   ======================================== */

.wheel-v {
    stroke: rgba(33, 30, 25, .28);
    stroke-width: 2;
}


/* ========================================
   COLOUR TICKS
   ======================================== */

.wheel-ticks line {
    stroke: var(--ink) !important;
    stroke-width: 2;
}


/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 640px) {
    .ecosystem {
        padding-inline: 1.2rem;
    }

    .ecosystem-map {
        width: 100%;
    }
}

/* =========================================================
   FINAL ECOSYSTEM WHEEL OVERRIDE
   Four main blocks use the page ink colour with white labels.
   No thick black borders around the blocks.
   ========================================================= */

.ecosystem {
    background: var(--paper);
    color: var(--ink);
}

.ecosystem-map {
    background: var(--paper);
}

/* Learners, Educators, Learning Environment,
   Parents & Community */
.wheel-wedge path {
    fill: var(--ink) !important;
    stroke: none !important;
    stroke-width: 0 !important;
}

/* Labels inside the four ink blocks */
.wheel-text--wedge {
    fill: var(--paper) !important;
}

/* Keep the rest of the wheel on the page background */
.wheel-cell {
    fill: transparent;
    stroke: none;
}

/* Inner wheel hover */
.wheel-item:hover .wheel-cell,
.wheel-item:focus-within .wheel-cell {
    fill: var(--yellow);
}

.wheel-item:hover .wheel-text,
.wheel-item:focus-within .wheel-text {
    fill: var(--ink);
}

/* Centre dividers remain subtle on the paper area */
.wheel-v {
    stroke: var(--ink);
    stroke-width: 1.5;
    opacity: .85;
}

/* =========================================================
   FOUR MAIN COLOUR BANDS
   ========================================================= */

.wheel-wedge path {
    fill: var(--ink) !important;
    stroke: none;
    stroke-width: 0;
    transition: fill .25s ease;
    cursor: pointer;
}


/* =========================================================
   FOUR MAIN BAND HOVER
   ========================================================= */

.wheel-wedge path:hover {
    fill: var(--yellow) !important;
    color: var(--ink) !important;
}


/* =========================================================
   MAIN BAND TEXT
   ========================================================= */

.wheel-text--wedge {
    fill: #fff;
    transition: fill .25s ease;
    pointer-events: none;
}


/*
 * Change the corresponding label when its band is hovered.
 *
 * The four paths and four labels are in the same order:
 * 1. Learners
 * 2. Educators
 * 3. Learning environment
 * 4. Parents & community
 */

.wheel-wedge:has(path:nth-child(1):hover)
~ .wheel-labels text:nth-child(1),
.wheel-wedge:has(path:nth-child(2):hover)
~ .wheel-labels text:nth-child(2),
.wheel-wedge:has(path:nth-child(3):hover)
~ .wheel-labels text:nth-child(3),
.wheel-wedge:has(path:nth-child(4):hover)
~ .wheel-labels text:nth-child(4) {
    fill: var(--ink);
}

.wheel-guides path,
.wheel-v {
    fill: none;
    stroke: rgba(33, 30, 25, .28);
    stroke-width: 2;
}

/* Four main bands */
.wheel-wedge path {
    fill: var(--ink) !important;
    stroke: none;
    stroke-width: 0;
    transition: fill .25s ease;
    cursor: pointer;
}

.wheel-wedge path:hover {
    fill: var(--yellow) !important;
}


/* Four main band labels */
.wheel-text--wedge {
    fill: #fff;
    transition: fill .25s ease;
    pointer-events: none;
}


/* Label becomes ink when its corresponding band is hovered */
.wheel-wedge:has(path:nth-child(1):hover) ~ .wheel-labels text:nth-child(1),
.wheel-wedge:has(path:nth-child(2):hover) ~ .wheel-labels text:nth-child(2),
.wheel-wedge:has(path:nth-child(3):hover) ~ .wheel-labels text:nth-child(3),
.wheel-wedge:has(path:nth-child(4):hover) ~ .wheel-labels text:nth-child(4) {
    fill: var(--ink) !important;
}