/* ===========================================================================
   Green Schools Network — home page below the hero.
   ---------------------------------------------------------------------------
   An editorial, flat-colour treatment in the manner of a modern agency site:
   condensed uppercase display type at a large scale, square corners, solid
   saturated colour blocks instead of shadowed cards, full-bleed image rows,
   and a lot of white space.

   Everything here is scoped to .page-k so no other page is affected, and
   it deliberately overrides the softer, rounded "premium" layer for these
   sections only. The palette, the words and the photographs are our own.
   =========================================================================== */

/* Oswald, self-hosted (SIL Open Font Licence 1.1) — the site loads no fonts,
   scripts or styles from third-party servers. */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/oswald-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/oswald-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.page-k {
    /* Falls back to whatever condensed face the device has before Oswald
       arrives, so the layout does not reflow much on swap. */
    --display: 'Oswald', 'Haettenschweiler', 'Arial Narrow', system-ui, sans-serif;
}

/* --------------------------------------------------------------- structure */

/* These sections opt out of the rounded, shadowed treatment entirely.

   overflow-x is clipped because the full-bleed photograph is positioned with
   a 100vw calculation, and 100vw counts the scrollbar — without this the page
   gains a real horizontal scrollbar the width of the scrollbar itself. `clip`
   rather than `hidden` so neither axis becomes a scroll container. */
.page-k .k {
    position: relative; padding: clamp(3.2rem, 6vw, 5.5rem) 0;
    overflow-x: hidden; overflow-x: clip;
}
.page-k .k-tight { padding-top: 0; }
.page-k .k-wrap { width: min(1240px, 92vw); margin-inline: auto; }

/* --------------------------------------------------------------- typography */

.page-k .k-eyebrow {
    display: block; margin: 0 0 .35rem;
    font-family: var(--display); font-weight: 400;
    font-size: clamp(.95rem, 1.5vw, 1.25rem);
    letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft);
}
.page-k .k-title {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(2.4rem, 6.2vw, 4.7rem);
    line-height: .98; letter-spacing: -.01em;
    text-transform: uppercase; color: var(--green-900);
    margin: 0 0 1.2rem;
}
/* One word in the headline carries a heavy rule under it. */
.page-k .k-title u {
    text-decoration: none; position: relative; white-space: nowrap;
}
.page-k .k-title u::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: .06em;
    height: 5px; background: var(--green-700);
    transform: scaleX(0); transform-origin: left;
    transition: transform .7s var(--ease-out, cubic-bezier(.22,.8,.3,1)) .1s;
}
.page-k .reveal:not(.pending) .k-title u::after,
.page-k .reveal.in .k-title u::after { transform: scaleX(1); }
.page-k .reveal.pending:not(.in) .k-title u::after { transform: scaleX(0); }

.page-k .k-lead {
    max-width: 62ch; font-size: 1.05rem; color: var(--ink-soft); margin: 0;
}
.page-k .k-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Section headings on this page take the display face too. */
.page-k .k h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase;
    letter-spacing: .01em; }

/* ------------------------------------------------------------ colour blocks */

.page-k .k-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.6rem);
}
.page-k .k-block {
    position: relative; display: flex; flex-direction: column;
    background: var(--tone); color: #fff;
    padding: clamp(1.6rem, 2.6vw, 2.2rem);
    /* Square. The whole point of this treatment. */
    border-radius: 0; border: 0; box-shadow: none;
    /* Room for the CTA bar that sits along the bottom edge. */
    padding-bottom: 5.2rem;
    overflow: hidden;
}
/* A short rule above the block title. */
.page-k .k-block::before {
    content: ''; position: absolute; top: clamp(1.6rem, 2.6vw, 2.2rem);
    left: clamp(1.6rem, 2.6vw, 2.2rem);
    width: 38px; height: 3px; background: rgba(255, 255, 255, .75);
    transition: width .45s var(--ease-out, cubic-bezier(.22,.8,.3,1));
}
.page-k .k-block:hover::before { width: 76px; }

.page-k .k-block h3 {
    margin: 1.6rem 0 1.1rem; color: #fff;
    font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 400;
}
/* The stacked keywords — the loudest thing in the block. */
.page-k .k-words {
    list-style: none; margin: 0 0 1.2rem; padding: 0;
    font-weight: 800; text-transform: uppercase; letter-spacing: -.005em;
    font-size: clamp(1.35rem, 2.3vw, 1.95rem); line-height: 1.08;
}
.page-k .k-words li { opacity: .96; }
.page-k .k-block p {
    margin: 0; color: rgba(255, 255, 255, .84); font-size: .95rem; line-height: 1.6;
}

/* The CTA bar runs along the bottom, with the arrow stepping outside the
   block into a white square — the detail that makes the row feel designed. */
.page-k .k-cta {
    position: absolute; left: 0; right: -1px; bottom: 0;
    display: flex; align-items: stretch; text-decoration: none;
}
.page-k .k-cta span {
    flex: 1; display: flex; align-items: center; justify-content: flex-end;
    padding: 1.05rem 1.2rem;
    font-weight: 700; font-size: .92rem; letter-spacing: .04em;
    text-transform: uppercase; color: #fff;
}
.page-k .k-cta i {
    width: 58px; flex: none; display: grid; place-items: center;
    background: #fff; color: var(--tone);
    transition: background .25s ease, color .25s ease;
}
.page-k .k-cta i svg { transition: transform .3s var(--ease-out, cubic-bezier(.22,.8,.3,1)); }
.page-k .k-cta:hover i svg { transform: translateX(4px); }
.page-k .k-block:hover .k-cta i { background: var(--green-050); }

/* Six graduated greens, deep to light. */
.page-k .tone-1 { --tone: #0e3a23; }
.page-k .tone-2 { --tone: #145334; }
.page-k .tone-3 { --tone: #1b6b43; }
.page-k .tone-4 { --tone: #14706b; }
.page-k .tone-5 { --tone: #2e8b57; }
.page-k .tone-6 { --tone: #8a6a12; }

/* ------------------------------------------------------- full-bleed feature */

/* Text inset in the page grid, photograph running off the viewport edge. */
/* stretch, not center: the photograph runs the full height of the text
   column, which is what makes the row read as two solid panels. */
.page-k .k-split {
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: stretch; gap: clamp(2rem, 5vw, 5rem);
}
.page-k .k-split-body { padding: .5rem 0; align-self: center; }
.page-k .k-split-media { position: relative; }
.page-k .k-split-media picture { display: block; width: 100%; height: 100%; }
.page-k .k-split-media img {
    display: block; width: 100%; height: 100%; min-height: 460px;
    object-fit: cover;
}
/* Bleed the photograph to the right-hand edge of the window. */
.page-k .k-bleed-right .k-split-media {
    margin-right: calc((100vw - min(1240px, 92vw)) / -2);
}
.page-k .k-bleed-left .k-split-media {
    margin-left: calc((100vw - min(1240px, 92vw)) / -2);
    order: -1;
}

.page-k .k-sub {
    font-family: var(--display); font-weight: 400; text-transform: none;
    font-size: clamp(1.15rem, 2.1vw, 1.65rem); color: var(--green-700);
    margin: 0 0 1rem; line-height: 1.2;
}
/* Arrow-prefixed list, in place of bullets. */
.page-k .k-arrows { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .55rem; }
.page-k .k-arrows li { display: flex; align-items: center; gap: .7rem;
    font-family: var(--display); font-weight: 400;
    font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--green-800); }
.page-k .k-arrows .icon { color: var(--green-600); flex: none; }

.page-k .k-meta { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .5rem; }
.page-k .k-meta li { display: flex; gap: .6rem; align-items: flex-start;
    color: var(--ink-soft); font-size: .95rem; }
.page-k .k-meta .icon { color: var(--green-600); margin-top: .2em; flex: none; }

.page-k .k-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* Square buttons for this page. */
.page-k .k .btn, .page-k .k-band .btn { border-radius: 0; }
.page-k .k .btn::before { display: none; }

/* --------------------------------------------------------------- watermark */

/* An oversized pale glyph sitting behind a heading block. */
.page-k .k-mark { position: relative; }
.page-k .k-mark::before {
    content: attr(data-mark);
    position: absolute; right: 0; top: 50%; transform: translateY(-54%);
    font-family: var(--display); font-weight: 600;
    font-size: clamp(9rem, 22vw, 19rem); line-height: .8;
    color: var(--green-100); z-index: 0; pointer-events: none;
    user-select: none;
}
/* A whisper on the dark band — --green-100 is far too bright against it. */
.page-k .k-dark .k-mark::before { color: rgba(255, 255, 255, .07); }
.page-k .k-mark > * { position: relative; z-index: 1; }

@media (max-width: 900px) {
    /* Nothing to sit beside on a narrow screen; it would land on the words. */
    .page-k .k-mark::before { display: none; }
}

/* ------------------------------------------------------------------- stats */

.page-k .k-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
}
.page-k .k-stat {
    padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.6rem);
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
}
.page-k .k-stat:first-child { border-left: 1px solid var(--line); }
.page-k .k-stat b {
    display: block; font-family: var(--display); font-weight: 400;
    font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1;
    color: var(--green-800); font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.page-k .k-stat span {
    display: block; margin-top: .5rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
}

/* ----------------------------------------------------------------- pressure */

.page-k .k-dark {
    background: #0e3a23; color: rgba(255, 255, 255, .82);
}
.page-k .k-dark .k-eyebrow { color: rgba(255, 255, 255, .6); }
.page-k .k-dark .k-title   { color: #fff; }
.page-k .k-dark .k-title u::after { background: var(--green-300); }
.page-k .k-dark .k-lead    { color: rgba(255, 255, 255, .78); }

.page-k .k-rows { border-top: 1px solid rgba(255, 255, 255, .16); }
.page-k .k-row {
    display: grid; grid-template-columns: 4.5rem 1fr 1.2fr; align-items: baseline;
    gap: clamp(1rem, 2.5vw, 2rem);
    padding: 1.4rem .4rem;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    transition: background .3s ease, padding-left .3s var(--ease-out, cubic-bezier(.22,.8,.3,1));
}
.page-k .k-row:hover { background: rgba(255, 255, 255, .05); padding-left: 1.2rem; }
.page-k .k-row-num {
    font-family: var(--display); font-weight: 400; font-size: 1.1rem;
    color: var(--green-300); letter-spacing: .06em;
}
.page-k .k-row h3 {
    margin: 0; color: #fff; font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 400;
}
.page-k .k-row p { margin: 0; color: rgba(255, 255, 255, .7); font-size: .95rem; }

/* ------------------------------------------------------------------- band */

/* Full-width solid colour block: eyebrow, giant heading, one action. */
.page-k .k-band {
    background: #145334; color: #fff;
    padding: clamp(4rem, 9vw, 7rem) 0;
    text-align: center;
}
.page-k .k-band .k-eyebrow { color: rgba(255, 255, 255, .72); }
.page-k .k-band .k-title { color: #fff; margin-bottom: 1.6rem; }
.page-k .k-band .k-lead { color: rgba(255, 255, 255, .84); margin-inline: auto; text-align: center; }
.page-k .k-band .k-actions { justify-content: center; }
/* On a flat solid band a frosted button just looks like a grey rectangle.
   A plain outline is the right idiom here. */
.page-k .k-band .btn-glass {
    background: transparent; border: 2px solid rgba(255, 255, 255, .6);
    box-shadow: none; color: #fff;
}
.page-k .k-band .btn-glass:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.page-k .k-band .btn-light { border: 2px solid #fff; }

/* ---------------------------------------------------------------- partners */

.page-k .k-partners {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1.6rem 2.5rem;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 2rem 0;
}
.page-k .k-partner { display: flex; align-items: center; gap: .9rem; }
.page-k .k-partner .icon { color: var(--green-600); flex: none; }
.page-k .k-partner strong {
    display: block; font-family: var(--display); font-weight: 400;
    font-size: 1.15rem; text-transform: uppercase; letter-spacing: .01em;
    color: var(--green-900); line-height: 1.15;
}
.page-k .k-partner span { display: block; font-size: .8rem; color: var(--muted); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
    .page-k .k-grid { grid-template-columns: repeat(2, 1fr); }
    .page-k .k-split { grid-template-columns: 1fr; }
    .page-k .k-bleed-right .k-split-media,
    .page-k .k-bleed-left .k-split-media {
        margin-inline: calc((100vw - min(1240px, 92vw)) / -2);
        order: 0;
    }
    .page-k .k-split-media img { min-height: 300px; }
    .page-k .k-stats { grid-template-columns: repeat(2, 1fr); }
    .page-k .k-row { grid-template-columns: 3rem 1fr; }
    .page-k .k-row p { grid-column: 2; }
}

@media (max-width: 640px) {
    .page-k .k-grid { grid-template-columns: 1fr; }
    .page-k .k-mark::before { font-size: 9rem; opacity: .8; }
    .page-k .k-partners { flex-direction: column; align-items: flex-start; }
    .page-k .k-block { padding-bottom: 4.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .page-k .k-title u::after { transform: scaleX(1) !important; transition: none; }
    .page-k .k-row:hover { padding-left: .4rem; }
    .page-k .k-block:hover::before { width: 38px; }
}

/* Small utilities used by the markup ------------------------------------- */

.page-k .k-title-sm { font-size: clamp(1.8rem, 3.4vw, 2.8rem); margin-bottom: .4rem; }
.page-k .k-eyebrow-inline { margin-top: 1.8rem; }
.page-k .k-closing { margin-top: 2.5rem; max-width: 68ch; }

/* The premium layer adds rounded corners, gradients and shadows to .btn and
   to cards. Below the hero this page wants none of that. */
.page-k .k .card, .page-k .k-band .card { border-radius: 0; }
.page-k .k .btn-primary { box-shadow: none; }
.page-k .k .btn-primary:hover { box-shadow: 0 10px 24px -12px rgba(35, 114, 67, .7); }

/* ===================================================== overlay navigation */

/* Transparent header sitting over the hero, with a centred wordmark and a
   bare burger. It scrolls away with the page rather than sticking. */
.page-k .knav {
    position: absolute; top: 0; left: 0; right: 0; z-index: 60;
    display: flex; align-items: center;
    width: min(1240px, 92vw); margin-inline: auto;
    padding: 1.6rem 0; background: none; border: 0; box-shadow: none;
}
.page-k .knav-brand {
    position: absolute; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: .55rem;
    color: #fff; text-decoration: none; white-space: nowrap;
    font-family: var(--display); font-weight: 400;
    font-size: clamp(1.25rem, 2.2vw, 1.7rem); text-transform: uppercase;
    letter-spacing: .02em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
    transition: opacity .2s ease;
}
.page-k .knav-brand:hover { opacity: .82; }
.page-k .knav-brand .icon { color: var(--green-300); }

.page-k .knav-burger {
    margin-left: auto; display: inline-flex; align-items: center; gap: .65rem;
    cursor: pointer; padding: .5rem; user-select: none;
}
.page-k .knav-burger-lines { display: grid; gap: 6px; width: 40px; }
.page-k .knav-burger-lines i {
    display: block; height: 2px; background: #fff; border-radius: 2px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .5);
    transition: transform .32s var(--ease-out, cubic-bezier(.22,.8,.3,1)),
                opacity .2s ease;
}
/* Kollective's burger carries no visible label. The word stays in the DOM so
   the control still has an accessible name for screen readers. */
.page-k .knav-burger-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.page-k .knav-burger:hover .knav-burger-lines i:nth-child(2) { transform: translateX(5px); }

/* Burger becomes a cross. */
.page-k .knav-input:checked ~ .knav .knav-burger-lines i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.page-k .knav-input:checked ~ .knav .knav-burger-lines i:nth-child(2) { opacity: 0; }
.page-k .knav-input:checked ~ .knav .knav-burger-lines i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.page-k .knav-input:checked ~ .knav .knav-burger:hover .knav-burger-lines i:nth-child(2) { transform: none; }

/* The full-screen panel ---------------------------------------------------- */

/* The panel is only a stage: the two curtains carry the background, and the
   inner content sits above them. */
.page-k .knav-panel {
    position: fixed; inset: 0; z-index: 55;
    display: grid; place-items: center; overflow-y: auto; overflow-x: hidden;
    /* Held out of the tab order and off the screen until it opens. The delay
       on the way out is what lets the curtains finish retracting first. */
    visibility: hidden;
    transition: visibility 0s linear var(--knav-out, .62s);
}
.page-k .knav-input:checked ~ .knav-panel {
    visibility: visible;
    transition-delay: 0s;
}

/* --- the curtains --- */

.page-k .knav-curtain {
    position: fixed; top: 0; bottom: 0; width: 50.2%;   /* .2 covers rounding */
    background:
        radial-gradient(120% 90% at 80% 10%, rgba(46, 139, 87, .5), transparent 60%),
        #145334;
    /* Each half paints the gradient at full viewport size and anchors it to its
       own outer edge. Without this the two halves each draw their own gradient
       and a seam appears down the middle once they meet. */
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    /* A firm ease-in-out: quick through the middle, settling as they meet. */
    transition: transform .62s cubic-bezier(.76, 0, .24, 1);
    will-change: transform;
}
.page-k .knav-curtain-l {
    left: 0;  transform: translate3d(-100%, 0, 0); background-position: left top;
}
.page-k .knav-curtain-r {
    right: 0; transform: translate3d(100%, 0, 0);  background-position: right top;
}
.page-k .knav-input:checked ~ .knav-panel .knav-curtain {
    transform: translate3d(0, 0, 0);
}
/* On the way out they leave a touch later than the content fades. */
.page-k .knav-panel .knav-curtain { transition-delay: .1s; }
.page-k .knav-input:checked ~ .knav-panel .knav-curtain { transition-delay: 0s; }

/* Stop the page behind from scrolling while the menu is open. */
body.page-k:has(.knav-input:checked) { overflow: hidden; }

.page-k .knav-watermark {
    position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
    opacity: 0; transition: opacity .2s ease;
    font-family: var(--display); font-weight: 600; text-transform: uppercase;
    font-size: clamp(3.5rem, 11vw, 9rem); line-height: .95; text-align: center;
    color: rgba(255, 255, 255, .05); white-space: nowrap;
    pointer-events: none; user-select: none;
}
.page-k .knav-input:checked ~ .knav-panel .knav-watermark {
    opacity: 1; transition: opacity .6s ease .45s;
}

.page-k .knav-panel-inner {
    position: relative; z-index: 2; width: min(1240px, 92vw);
    opacity: 0; transform: translateY(14px);
    /* Out fast; in only once the curtains have closed. */
    transition: opacity .18s ease, transform .18s ease;
    display: grid; grid-template-columns: 1.35fr 1fr;
    align-items: center; gap: clamp(2rem, 6vw, 5rem);
    padding: 7rem 0 3rem;
}
/* The thin rule between the two columns. */
.page-k .knav-input:checked ~ .knav-panel .knav-panel-inner {
    opacity: 1; transform: none;
    transition: opacity .45s ease .42s, transform .55s cubic-bezier(.22,.8,.3,1) .42s;
}

.page-k .knav-aside {
    border-left: 1px solid rgba(255, 255, 255, .3);
    padding-left: clamp(1.5rem, 4vw, 3.5rem);
}

.page-k .knav-links { display: grid; justify-items: start; }
.page-k .knav-links a {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.18;
    color: #fff; text-decoration: none;
    transition: transform .28s var(--ease-out, cubic-bezier(.22,.8,.3,1)), color .2s ease;
}
.page-k .knav-links a:hover { transform: translateX(10px); color: var(--green-300); }
.page-k .knav-links a[aria-current="page"] { color: var(--green-300); }
.page-k .knav-group {
    margin: 1.4rem 0 .5rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: rgba(255, 255, 255, .5);
}

.page-k .knav-aside-q {
    font-size: 1.15rem; color: #fff; margin: 0 0 1.4rem;
}
.page-k .knav-contacts {
    list-style: none; margin: 0 0 1.8rem; padding: 0;
    display: flex; gap: clamp(1rem, 2.5vw, 1.8rem); flex-wrap: wrap;
}
.page-k .knav-contacts a { text-decoration: none; display: grid; justify-items: center; gap: .5rem; }
.page-k .knav-circle {
    width: 68px; height: 68px; border-radius: 50%;
    display: grid; place-items: center;
    background: #fff; color: var(--green-800);
    transition: transform .28s var(--ease-out, cubic-bezier(.22,.8,.3,1)), background .2s ease;
}
.page-k .knav-contacts a:hover .knav-circle { transform: translateY(-4px); background: var(--green-300); }
.page-k .knav-cap {
    font-size: .72rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(255, 255, 255, .82);
}
.page-k .knav-aside-meta {
    margin: 0; font-size: .92rem; color: rgba(255, 255, 255, .62); line-height: 1.7;
}

/* The hero owns the top of the page now, so it must not sit under a bar. */
.page-k .gsn-hero { margin-top: 0; }

@media (max-width: 860px) {
    .page-k .knav-panel-inner { grid-template-columns: 1fr; padding-top: 6rem; }
    .page-k .knav-aside {
        border-left: 0; border-top: 1px solid rgba(255, 255, 255, .3);
        padding-left: 0; padding-top: 2rem;
    }
    .page-k .knav-watermark { display: none; }
    .page-k .knav-circle { width: 58px; height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
    .page-k .knav-panel { transition: none; }
    .page-k .knav-links a:hover { transform: none; }
    .page-k .knav-contacts a:hover .knav-circle { transform: none; }
}

@media (max-width: 520px) {
    .page-k .knav { padding: 1.1rem 0; }
    .page-k:not(.page-home) .knav { min-height: calc(46px + 2.2rem); }
    .page-k .knav-burger-lines { width: 32px; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
    /* No sweep: the panel simply appears. */
    .page-k .knav-curtain { transition: none; }
    .page-k .knav-curtain-l, .page-k .knav-curtain-r { transform: none; opacity: 0; }
    .page-k .knav-input:checked ~ .knav-panel .knav-curtain { opacity: 1; }
    .page-k .knav-panel-inner,
    .page-k .knav-input:checked ~ .knav-panel .knav-panel-inner { transition: none; }
    .page-k .knav-panel { --knav-out: 0s; }
}

/* ===========================================================================
   PALETTE
   ---------------------------------------------------------------------------
   The page was a single green wash — 53% of its pixels were green-dominant and
   eleven of its twelve commonest colours were greens. Green is the identity,
   but as a *wash* it reads cheap; used deliberately against warm neutrals it
   reads expensive.

   So: a warm bone paper instead of a green-tinted grey, near-black ink for
   type, and green demoted to one voice among several. The accents are drawn
   from the subject matter rather than picked for decoration — clay earth,
   ochre light, slate water — which is what keeps six colour blocks from
   looking like a swatch chart.
   =========================================================================== */

.page-k {
    /* Foundation ---------------------------------------------------------- */
    --paper:    #f7f4ee;   /* warm bone; replaces the green-grey #f6f8f6 */
    --paper-lift: #fffdf9;
    --sand:     #ece5d8;
    --line-warm:#e3dbcc;
    --ink:      #171c19;   /* near-black, faint green cast */
    --ink-2:    #4b534d;
    /* #7d847e measured only 3.49:1 on the bone paper — below AA for the
       eyebrows, stat labels and partner roles, which are all small text. */
    /* Measured on the sand panels too, not just the paper: #656b66 is 4.97:1
       on #f7f4ee but only 4.36:1 on the #ece5d8 tint bands. */
    --muted-2:  #5d635e;   /* 5.61:1 on paper, 4.91:1 on sand */

    /* Brand green, now an accent rather than the ground ------------------- */
    --forest:   #0f342a;
    --moss:     #2c6a4f;
    --sage:     #a9c5b2;

    /* Drawn from the subject: earth, light, water ------------------------- */
    --clay:     #a64b33;
    --ochre:    #8f6718;   /* white on it is 5.1:1; #a97c22 was 3.75:1 */
    --slate:    #3b5a6b;
    --char:     #212824;
}

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

/* Type ------------------------------------------------------------------- */

.page-k .k-title        { color: var(--ink); }
.page-k .k-eyebrow      { color: var(--muted-2); }
.page-k .k-lead         { color: var(--ink-2); }
.page-k .k-sub          { color: var(--clay); }
/* The one warm stroke in an otherwise quiet headline. */
.page-k .k-title u::after { background: var(--clay); }

.page-k .k-arrows li      { color: var(--ink); }
.page-k .k-arrows .icon   { color: var(--clay); }
.page-k .k-meta li        { color: var(--ink-2); }
.page-k .k-meta .icon     { color: var(--moss); }

/* Sections --------------------------------------------------------------- */

.page-k .k        { background: var(--paper); }
.page-k .k-alt    { background: var(--paper-lift); }

/* Six blocks: forest and moss for the green strands, ochre for the outdoors,
   slate for water and climate research, clay for community, ink for the
   network itself. */
.page-k .tone-1 { --tone: var(--forest); }
.page-k .tone-2 { --tone: var(--moss); }
.page-k .tone-3 { --tone: var(--ochre); }
.page-k .tone-4 { --tone: var(--slate); }
.page-k .tone-5 { --tone: var(--clay); }
.page-k .tone-6 { --tone: var(--char); }

.page-k .k-block::before { background: rgba(255, 255, 255, .8); }
.page-k .k-block:hover .k-cta i { background: var(--paper); }

/* Stats: warm rules, ink figures, no green at all. */
.page-k .k-stats { border-top-color: var(--line-warm); }
.page-k .k-stat  { border-color: var(--line-warm); }
.page-k .k-stat b     { color: var(--ink); }
.page-k .k-stat span  { color: var(--muted-2); }

/* The dark band is charcoal now, not green — it lets the green sit *on* it
   as an accent instead of competing with it. */
.page-k .k-dark {
    background:
        radial-gradient(900px 460px at 84% -12%, rgba(44, 106, 79, .42), transparent 62%),
        radial-gradient(700px 400px at 4% 112%, rgba(169, 124, 34, .18), transparent 60%),
        #103329;
    color: rgba(255, 255, 255, .82);
}
.page-k .k-dark .k-title u::after { background: var(--sage); }
/* The mid ochre measured 3.66:1 against the forest — fine on the old
   near-black, short of AA here. A lighter cast of the same hue. */
.page-k .k-row-num { color: #d4ac4a; }   /* 6.41:1 */
.page-k .k-row     { border-bottom-color: rgba(255, 255, 255, .13); }
.page-k .k-rows    { border-top-color: rgba(255, 255, 255, .13); }

/* One deep-green moment to close on, so the brand still lands. */
/* Warm, so the last thing before the footer is not a third green — and a
   call to action earns the one genuinely warm block on the page. */
.page-k .k-band {
    background:
        radial-gradient(85% 150% at 84% 0%, rgba(191, 106, 62, .5), transparent 62%),
        #8f4630;
}
.page-k .k-band .k-title u::after { background: #f0d9a8; }

.page-k .k-partners     { border-color: var(--line-warm); }
.page-k .k-partner strong { color: var(--ink); }
.page-k .k-partner .icon  { color: var(--clay); }
.page-k .k-partner span   { color: var(--muted-2); }

/* Buttons: solid ink-green, warm on hover. No gradient, no glow. */
.page-k .k .btn-primary {
    background: var(--forest); color: #fff; box-shadow: none;
}
.page-k .k .btn-primary:hover { background: var(--clay); box-shadow: none; }
.page-k .k .btn-ghost {
    border-color: var(--line-warm); color: var(--ink); background: transparent;
}
.page-k .k .btn-ghost:hover { background: var(--sand); border-color: var(--clay); color: var(--clay); }

/* The overlay keeps the deep forest — it is the one place a full green field
   still reads as intent rather than as wallpaper. */
.page-k .knav-curtain {
    background:
        radial-gradient(120% 90% at 80% 10%, rgba(44, 106, 79, .55), transparent 60%),
        var(--forest);
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
}
.page-k .knav-links a:hover,
.page-k .knav-links a[aria-current="page"] { color: var(--sage); }
.page-k .knav-circle { color: var(--forest); }
.page-k .knav-contacts a:hover .knav-circle { background: var(--sage); }

/* The footer sat in a third, slightly different green directly beneath the
   forest CTA band — two near-identical greens meeting is the one adjacency
   that always looks like a mistake. Charcoal instead, echoing the dark band
   higher up, so the page closes on a rhythm rather than a smear. */
.page-k .site-foot {
    background:
        radial-gradient(760px 360px at 88% -10%, rgba(44, 106, 79, .3), transparent 62%),
        #10352a;
    color: #c2cec5;
}
.page-k .site-foot::before { background: linear-gradient(90deg, var(--moss), var(--ochre), var(--clay)); }
.page-k .site-foot a          { color: var(--sage); }
.page-k .site-foot a:hover    { color: #fff; }
.page-k .foot-list .icon      { color: var(--sage); }
.page-k .brand-foot .brand-text span { color: var(--sage); }
.page-k .brand-mark { background: var(--forest); box-shadow: none; }

/* ===================================================== hero: slide caption

   The caption was absolutely positioned against the viewport (right: 0,
   bottom: 5.5rem) with no relationship to the event card beside it, so as the
   window narrowed the two drifted into each other — 276x42px of overlap at
   1100px wide, and it clipped the carousel bar at every width.

   The fix is structural rather than a nudge: the caption now sits in the same
   horizontal band as the carousel controls, which is empty to the right and
   always well below the card. It is a single line there, because the
   description repeated what the hero lead already says.                     */

.page-k .slide figcaption {
    /* Aligned to the content column, not the window edge. */
    right: max(4vw, calc((100vw - 1240px) / 2));
    left: auto;
    bottom: 1.45rem;
    width: auto;
    max-width: min(46ch, 40vw);
    display: flex; align-items: baseline; gap: .6rem;
    padding: .5rem .9rem;
    border-left: 2px solid var(--sage, #a9c5b2);
    background: linear-gradient(90deg, rgba(8, 26, 18, .1), rgba(8, 26, 18, .62));
    backdrop-filter: blur(4px);
}
.page-k .slide-place {
    order: 1; flex: none;
    font-size: .7rem; font-weight: 700; letter-spacing: .11em;
    text-transform: uppercase; color: var(--sage, #a9c5b2);
    display: inline-flex; align-items: center; gap: .3rem;
}
.page-k .slide-title {
    order: 2; font-size: .95rem; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The long line duplicates the hero lead; it only earns its space on mobile,
   where the caption is hidden anyway. */
.page-k .slide-line { display: none; }

@media (max-width: 1000px) {
    /* Below this the columns stack and the band is needed by the controls. */
    .page-k .slide figcaption { display: none; }
}

/* ============================================ full-bleed rows that slide in

   Each row's photograph is anchored to a screen edge and enters from that
   edge as the row scrolls into view, while the text rises to meet it.

   The initial off-screen state is applied only to rows the reveal script has
   marked `.pending` — that is, only rows that started below the fold. With
   JavaScript off, or under reduced motion, nothing is ever displaced, so the
   photographs are simply in place.                                          */

.page-k .k-practice .k-wrap + .k-wrap { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.page-k .k-practice-row { align-items: center; }

.page-k .k-split-media {
    /* The slide is a transform, so it never reflows the row. */
    transition: transform 1.05s cubic-bezier(.22, .8, .26, 1),
                opacity .7s ease;
    will-change: transform;
}
.page-k .reveal.pending:not(.in) .k-split-media { opacity: 0; }
.page-k .reveal.pending:not(.in).k-bleed-right .k-split-media {
    transform: translate3d(60%, 0, 0);
}
.page-k .reveal.pending:not(.in).k-bleed-left  .k-split-media {
    transform: translate3d(-60%, 0, 0);
}
.page-k .reveal.pending.in .k-split-media { transform: none; opacity: 1; }

/* The words come up a beat after the photograph starts moving. */
.page-k .k-practice-row .k-split-body {
    transition: transform .8s cubic-bezier(.22, .8, .26, 1) .16s, opacity .6s ease .16s;
}
.page-k .k-practice-row.reveal.pending:not(.in) .k-split-body {
    opacity: 0; transform: translate3d(0, 26px, 0);
}
.page-k .k-practice-row.reveal.pending.in .k-split-body { opacity: 1; transform: none; }

/* The strand name sits on the photograph, as the client logos do on theirs. */
.page-k .k-practice .k-split-media { position: relative; }
.page-k .k-practice-tag {
    position: absolute; left: 0; bottom: 0;
    padding: .7rem 1.2rem;
    font-family: var(--display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(1rem, 1.6vw, 1.35rem); letter-spacing: .02em;
    color: #fff; background: rgba(16, 51, 41, .82);
    backdrop-filter: blur(3px);
}
/* The tag belongs on the photograph's outer edge — the one running off the
   screen — not the inner one where it would crowd the text column. */
.page-k .k-bleed-left  .k-practice-tag { left: 0;  right: auto; }
.page-k .k-bleed-right .k-practice-tag { left: auto; right: 0; }

.page-k .k-practice .k-split-media img { min-height: 380px; }

@media (max-width: 1000px) {
    /* Stacked: a 60% horizontal slide would push the row off a narrow screen,
       so these come up from below like everything else. */
    .page-k .reveal.pending:not(.in).k-bleed-right .k-split-media,
    .page-k .reveal.pending:not(.in).k-bleed-left  .k-split-media {
        transform: translate3d(0, 34px, 0);
    }
    .page-k .k-practice .k-split-media img { min-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
    .page-k .k-split-media,
    .page-k .k-practice-row .k-split-body { transition: none; }
    .page-k .reveal.pending:not(.in) .k-split-media,
    .page-k .reveal.pending:not(.in).k-bleed-right .k-split-media,
    .page-k .reveal.pending:not(.in).k-bleed-left .k-split-media,
    .page-k .k-practice-row.reveal.pending:not(.in) .k-split-body {
        transform: none; opacity: 1;
    }
}

/* ===========================================================================
   SITE-WIDE THEME
   ---------------------------------------------------------------------------
   Everything above styles the editorial blocks the home page is built from.
   This last part carries the same design language onto every other page.

   The interior pages are assembled from the older component set — cards,
   sections, facts, tiers, forms — and those are all written against custom
   properties. So the cheapest and least fragile way to re-skin them is to
   re-point the properties themselves on `.page-k`, then correct the handful
   of structural things a colour cannot express: the rounded corners, the
   soft drop shadows and the pill shapes, none of which belong here.
   =========================================================================== */

.page-k {
    /* Green stops being the ground and becomes one accent among several ---- */
    --green-900: #10352a;
    --green-800: var(--forest);
    --green-700: #2c6a4f;
    --green-600: #38795c;
    --green-300: var(--sage);
    --green-100: #e2ece4;
    --green-050: #f1ece1;

    /* Tints redrawn from the earth/light/water accents ---------------------- */
    --amber-100: #f7ecd3;
    --amber-600: var(--ochre);
    --rose-100:  #f6e6e0;
    --blue-100:  #e4ebef;
    --lilac-100: #ece7dd;

    --ink:       #171c19;
    --ink-soft:  var(--ink-2);
    --muted:     var(--muted-2);
    --line:      var(--line-warm);
    --white:     var(--paper-lift);
    --bg:        var(--paper);

    --danger:    #a3372f;
    --danger-bg: #f8e7e3;
    --warn:      #8a6416;
    --warn-bg:   #f7ecd3;

    /* Flat, not floating. A hairline and a colour change do the work that a
       drop shadow used to; the one large shadow left is for lifted panels. */
    --radius:    0px;
    --shadow:    0 1px 0 rgba(23, 28, 25, .05);
    --shadow-lg: 0 18px 40px -26px rgba(23, 28, 25, .45);
    --shadow-glow: none;

    --grad-brand: linear-gradient(120deg, var(--forest) 0%, var(--moss) 55%, var(--slate) 100%);
    --grad-warm:  linear-gradient(120deg, var(--forest) 0%, var(--moss) 40%, var(--ochre) 100%);
    --grad-line:  linear-gradient(90deg, var(--moss), var(--ochre), var(--clay));
}

/* --- Type ---------------------------------------------------------------- */

.page-k h1, .page-k h2, .page-k h3, .page-k h4,
.page-k .fact-value, .page-k .tier-amount, .page-k .impact b,
.page-k .strip-item b, .page-k .count-pill {
    font-family: var(--display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--ink);
}
.page-k h1 { font-size: clamp(2.1rem, 5.4vw, 3.8rem); line-height: .98; }
.page-k h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.02; }
.page-k h3 { font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: .02em; }
.page-k h4 { font-size: .95rem; letter-spacing: .06em; }
.page-k .impact b, .page-k .tier-amount { color: var(--clay); }

/* The section rule was a green bar; it becomes the same warm three-stop line
   the rest of the site uses. */
.page-k .section-head h2::after { background: var(--grad-line); }

/* --- Nothing is rounded, nothing floats ---------------------------------- */

.page-k .btn, .page-k .card, .page-k .eyebrow, .page-k .chip,
.page-k .feature-icon, .page-k .fact-icon, .page-k .program,
.page-k .program-icon, .page-k .step, .page-k .step-icon,
.page-k .cta-band, .page-k .side-card, .page-k .tier, .page-k .tier-flag,
.page-k .flagship, .page-k .flagship-tag, .page-k .flagship-figure,
.page-k .flagship-figure img, .page-k .alert, .page-k .vision-card,
.page-k .contact-card, .page-k .contact-aside, .page-k .event-card,
.page-k .empty-state, .page-k .card-ask, .page-k .card-feature,
.page-k .card-outcome, .page-k .closing-note, .page-k .count-pill,
.page-k .ticket, .page-k .ticket-qr img, .page-k .hero-card,
.page-k .form input, .page-k .form select, .page-k .form textarea,
.page-k input[type="text"], .page-k input[type="email"],
.page-k input[type="tel"], .page-k input[type="search"],
.page-k select, .page-k textarea {
    border-radius: 0;
}
.page-k .card, .page-k .side-card, .page-k .tier, .page-k .flagship,
.page-k .step, .page-k .vision-card, .page-k .contact-card,
.page-k .empty-state, .page-k .event-card {
    box-shadow: none;
    background: var(--paper-lift);
    border-color: var(--line-warm);
}

/* A card earns its emphasis from a coloured top edge rather than a shadow. */
.page-k .card, .page-k .tier, .page-k .step, .page-k .contact-card {
    position: relative;
    transition: border-color .25s ease, transform .25s var(--ease-out, ease);
}
.page-k .card::after, .page-k .tier::after,
.page-k .step::after, .page-k .contact-card::after {
    content: ''; position: absolute; left: -1px; right: -1px; top: -1px;
    height: 3px; background: var(--moss);
    transform: scaleX(0); transform-origin: left;
    transition: transform .38s var(--ease-out, cubic-bezier(.22, .8, .3, 1));
}
.page-k .card:hover, .page-k .tier:hover,
.page-k .step:hover, .page-k .contact-card:hover {
    border-color: var(--ink); transform: none;
}
.page-k .card:hover::after, .page-k .tier:hover::after,
.page-k .step:hover::after, .page-k .contact-card:hover::after {
    transform: scaleX(1);
}
.page-k .card-tint { background: var(--sand); }

/* --- Buttons ------------------------------------------------------------- */

.page-k .btn {
    border-radius: 0;
    font-family: var(--display); font-weight: 400;
    text-transform: uppercase; letter-spacing: .06em;
    font-size: .95rem; padding: .8rem 1.5rem;
}
.page-k .btn:hover { transform: none; }
.page-k .btn-primary {
    background: var(--forest); border-color: var(--forest);
    color: #fff; box-shadow: none;
}
.page-k .btn-primary:hover { background: var(--clay); border-color: var(--clay); box-shadow: none; }
.page-k .btn-ghost {
    background: transparent; border: 1px solid var(--ink); color: var(--ink);
}
.page-k .btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.page-k .btn-light { background: #fff; color: var(--forest); border: 1px solid #fff; }
.page-k .btn-light:hover { background: var(--sand); border-color: var(--sand); color: var(--forest); }

/* --- Eyebrows: a lettered label with a rule, not a pill ------------------ */

.page-k .eyebrow {
    background: none; border: 0; border-radius: 0; padding: 0;
    color: var(--muted-2);
    font-family: var(--display); font-weight: 400;
    font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
    gap: .55rem;
}
.page-k .eyebrow::before {
    content: ''; width: 26px; height: 1px; background: currentColor;
    flex: none; opacity: .55;
}
.page-k .eyebrow-light {
    background: none; border: 0; color: var(--sage); backdrop-filter: none;
}

.page-k .chip {
    border-radius: 0; background: var(--sand); border-color: var(--line-warm);
    color: var(--ink-2); font-size: .82rem;
}
.page-k .chips-dark .chip {
    background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .88);
}

/* --- Sections ------------------------------------------------------------ */

.page-k .section      { background: var(--paper); }
.page-k .section-alt  { background: var(--paper-lift); border-color: var(--line-warm); }
.page-k .section-tint { background: var(--sand); border-color: var(--line-warm); }

.page-k .section-dark {
    background:
        radial-gradient(900px 460px at 84% -12%, rgba(44, 106, 79, .42), transparent 62%),
        radial-gradient(700px 400px at 4% 112%, rgba(169, 124, 34, .18), transparent 60%),
        #103329;
    color: rgba(255, 255, 255, .8);
}
.page-k .section-dark h2, .page-k .section-dark h3, .page-k .section-dark h4 { color: #fff; }
.page-k .section-dark .eyebrow { color: var(--sage); }
.page-k .section-dark .section-head h2::after { background: var(--sage); }
.page-k .section-dark .card {
    background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16);
}
.page-k .section-dark .card h3 { color: #fff; }
.page-k .section-dark .muted, .page-k .section-dark .card p { color: rgba(255, 255, 255, .74); }

/* --- Interior page hero: the same forest band as the dark sections -------- */

.page-k .page-hero {
    background: #103329;
    padding: clamp(3.4rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 4.6rem);
    border-bottom: 0;
}
.page-k .page-hero-bg {
    background:
        radial-gradient(900px 460px at 86% -20%, rgba(44, 106, 79, .5), transparent 62%),
        radial-gradient(640px 380px at 2% 120%, rgba(169, 124, 34, .2), transparent 60%);
}
.page-k .page-hero-inner { max-width: none; }
.page-k .page-hero h1 {
    color: #fff; max-width: 18ch;
    font-size: clamp(2.4rem, 6.4vw, 4.6rem); line-height: .95; letter-spacing: 0;
}
.page-k .page-hero-lead {
    color: rgba(255, 255, 255, .8); max-width: 58ch;
    margin-top: 1.1rem; font-size: 1.05rem;
}

/* --- Icon tiles: square, drawn from the accent set ------------------------ */

.page-k .feature-icon, .page-k .fact-icon,
.page-k .program-icon, .page-k .step-icon {
    border-radius: 0; box-shadow: none;
}
.page-k .feature-icon-green { background: var(--forest); color: #fff; }
.page-k .feature-icon-amber { background: var(--ochre); color: #fff; }
.page-k .feature-icon-blue  { background: var(--slate); color: #fff; }
.page-k .feature-icon-rose  { background: var(--clay);  color: #fff; }
.page-k .fact-icon { background: var(--sand); color: var(--forest); }
.page-k .fact-label { color: var(--muted-2); letter-spacing: .14em; }
.page-k .fact-value { font-size: 1.05rem; }

/* --- Forms --------------------------------------------------------------- */

.page-k .form label, .page-k .form legend {
    font-family: var(--display); font-weight: 400;
    text-transform: uppercase; letter-spacing: .08em;
    font-size: .82rem; color: var(--ink);
}
.page-k .form input, .page-k .form select, .page-k .form textarea {
    background: var(--paper-lift); border-color: var(--line-warm); color: var(--ink);
}
.page-k .form input:focus, .page-k .form select:focus, .page-k .form textarea:focus {
    border-color: var(--clay); outline-color: var(--clay);
    box-shadow: 0 0 0 3px rgba(166, 75, 51, .16);
}
.page-k .form .checks label { font-family: inherit; text-transform: none; letter-spacing: 0; }
.page-k .req { color: var(--clay); }

.page-k .alert { border-radius: 0; }
.page-k .alert-info { background: var(--sand); border-color: var(--line-warm); color: var(--ink-2); }

/* --- The remaining panels ------------------------------------------------ */

.page-k .cta-band {
    border-radius: 0;
    background:
        radial-gradient(85% 150% at 84% 0%, rgba(191, 106, 62, .5), transparent 62%),
        #8f4630;
    box-shadow: none;
}
.page-k .cta-band h2, .page-k .cta-band p { color: #fff; }
.page-k .cta-glow { display: none; }

.page-k .strip { background: var(--forest); }
.page-k .strip-item b { color: #fff; }

.page-k .flagship { background: var(--paper-lift); box-shadow: none; border-color: var(--line-warm); }
.page-k .flagship-tag { background: var(--clay); color: #fff; border: 0; letter-spacing: .14em; }
.page-k .program { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); }
.page-k .program-icon { background: rgba(255, 255, 255, .12); color: #fff; }
.page-k .tier-amount-hidden, .page-k .dot { border-radius: 50%; }
.page-k .inline-link { color: var(--clay); text-decoration-color: rgba(166, 75, 51, .4); }
.page-k .inline-link:hover { color: var(--forest); }
.page-k .contact-link { color: var(--forest); font-weight: 600; }
.page-k .contact-link:hover { color: var(--clay); }

.page-k .ticks li::before, .page-k .ticks-2col li::before { color: var(--moss); }
.page-k .closing-note { background: var(--sand); border-color: var(--line-warm); }

/* --- Header on the interior pages ---------------------------------------- */
/* On the home page the header floats over a full-bleed photograph, so it is
   absolute and white. Everywhere else there is no photograph to float over:
   it sits in the flow above the dark page hero, in ink on paper. */

.page-k:not(.page-home) .knav {
    position: relative;
    padding: 1.3rem 0;
    /* The centred logo is absolutely positioned, so it doesn't add to this
       box's own height — without a floor to match, a tall logo overflows the
       bottom of the header into the section below it. */
    min-height: calc(clamp(58px, 7.5vw, 96px) + 2.6rem);
}
.page-k:not(.page-home) .knav-brand { color: var(--ink); text-shadow: none; }
.page-k:not(.page-home) .knav-brand .icon { color: var(--moss); }
.page-k:not(.page-home) .knav-burger-lines i { background: var(--ink); box-shadow: none; }
.page-k:not(.page-home) .knav-burger-label { color: var(--muted-2); }

/* The conclave bar sits above the header, so it has to read on paper too. */
.page-k .event-bar {
    background: var(--forest); color: rgba(255, 255, 255, .82);
    border-bottom: 0;
}
.page-k .event-bar a { color: #fff; }

@media (max-width: 640px) {
    .page-k .page-hero h1 { max-width: none; }
}

/* Headings on dark ground -------------------------------------------------
   The blanket heading rule above sets ink, which is right on paper and wrong
   on every dark panel. These put white back, at a specificity that wins. */

.page-k .site-foot h1, .page-k .site-foot h2,
.page-k .site-foot h3, .page-k .site-foot h4,
.page-k .strip h1, .page-k .strip h2, .page-k .strip h3, .page-k .strip h4,
.page-k .cta-band h1, .page-k .cta-band h2, .page-k .cta-band h3,
.page-k .page-hero h1, .page-k .page-hero h2,
.page-k .section-dark h1, .page-k .section-dark h2,
.page-k .section-dark h3, .page-k .section-dark h4,
.page-k .k-dark h1, .page-k .k-dark h2, .page-k .k-dark h3, .page-k .k-dark h4,
.page-k .k-band h1, .page-k .k-band h2, .page-k .k-band h3,
.page-k .program h3, .page-k .program h4 {
    color: #fff;
}
.page-k .site-foot h4 { letter-spacing: .14em; font-size: .9rem; }
.page-k .section-dark .fact-value, .page-k .section-dark .fact-label,
.page-k .k-dark .fact-value { color: #fff; }
.page-k .section-dark .fact-label { color: var(--sage); }

/* The event hero sits over a photograph, so its headline is white — but the
   white card inside it is on paper and keeps ink. */
.page-k .hero h1, .page-k .hero h2,
.page-k .gsn-hero h1, .page-k .gsn-hero h2 { color: #fff; }
.page-k .hero .hero-card h1, .page-k .hero .hero-card h2,
.page-k .hero .hero-card h3, .page-k .hero .hero-card h4 { color: var(--ink); }

/* The remaining rounded corners: the programme timeline, the entry pass and
   the organiser tooling, which share the component set but not the pages. */

.page-k .agenda-item, .page-k .download-card, .page-k .kpi,
.page-k .table-wrap, .page-k .result, .page-k .scan-stage,
.page-k .pill, .page-k .status-pill, .page-k .pager a, .page-k .pager span,
.page-k .admin-filters input, .page-k .admin-filters select,
.page-k .card-narrow, .page-k .brand-mark, .page-k .count-pill,
.page-k .agenda-time, .page-k .flagship-x {
    border-radius: 0;
}
.page-k .agenda-item, .page-k .kpi, .page-k .table-wrap,
.page-k .result, .page-k .card-narrow, .page-k .download-card {
    box-shadow: none; background: var(--paper-lift); border-color: var(--line-warm);
}
.page-k .agenda-panel  { background: var(--sand); border-left-color: var(--forest); }
.page-k .agenda-break  { background: transparent; }
.page-k .agenda-ceremony { border-left-color: var(--ochre); }
.page-k .agenda-time   { color: var(--ink); letter-spacing: .04em; }
.page-k .agenda-people .icon { color: var(--moss); }

.page-k .admin-body { background: var(--paper); }
.page-k .admin-head { background: var(--forest); border-bottom: 0; }
.page-k .admin-head .brand-text, .page-k .admin-head .brand-text span,
.page-k .admin-nav a { color: rgba(255, 255, 255, .86); }
.page-k .admin-nav a.active { color: #fff; }
.page-k .brand-mark { background: var(--clay); color: #fff; }
.page-k table th {
    font-family: var(--display); font-weight: 400;
    text-transform: uppercase; letter-spacing: .1em; color: var(--ink);
}
.page-k .admin-nav a { border-radius: 0; }
.page-k .admin-nav a.active { background: var(--clay); }

/* A forest tile on a forest panel disappears; on dark ground the icon tiles
   are cut out of the panel instead. */
.page-k .section-dark .feature-icon, .page-k .k-dark .feature-icon,
.page-k .section-dark .fact-icon,    .page-k .k-dark .fact-icon,
.page-k .section-dark .step-icon {
    background: rgba(255, 255, 255, .12); color: #fff;
}

/* While the overlay is open the header has to stay reachable. On the interior
   pages it sits in the flow, so opening the menu half way down the page would
   otherwise leave the close control scrolled off the top. Escape and the
   backdrop still close it, but neither is visible — so pin it, and flip it to
   white now that the curtains are behind it. */
.page-k .knav-input:checked ~ .knav {
    position: fixed; top: 0; left: 50%; right: auto;
    transform: translateX(-50%);
    width: min(1240px, 92vw);
}
.page-k .knav-input:checked ~ .knav .knav-brand { color: #fff; }
.page-k .knav-input:checked ~ .knav .knav-brand .icon { color: var(--sage); }
.page-k .knav-input:checked ~ .knav .knav-burger-lines i { background: #fff; }
.page-k .knav-input:checked ~ .knav .knav-burger-label { color: rgba(255, 255, 255, .75); }

/* The palette block above re-declares the curtain with the `background`
   shorthand, which resets background-position to 0 0 — including on the right
   half, whose gradient has to stay anchored to the right edge or the two
   halves stop being one continuous image and a seam shows down the middle. */
.page-k .knav-curtain-l { background-position: left top; }
.page-k .knav-curtain-r { background-position: right top; }

/* The photo-credit cards ---------------------------------------------------
   These live in premium.css and were missed by the sweep above. */
.page-k .credit-card {
    border-radius: 0; box-shadow: none;
    background: var(--paper-lift); border: 1px solid var(--line-warm);
}
.page-k .credit-card:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.page-k .credit-card strong {
    font-family: var(--display); font-weight: 400;
    text-transform: uppercase; letter-spacing: .02em;
    font-size: 1.05rem; color: var(--ink);
}
.page-k .credit-lic a { color: var(--clay); }

/* Benefits columns ---------------------------------------------------------
   Three audiences side by side on the dark panel. The arrow lists elsewhere
   are ink on paper, so they need inverting here. */

.page-k .k-bens {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.6rem, 3vw, 3rem);
    border-top: 1px solid rgba(255, 255, 255, .16);
    padding-top: clamp(2rem, 4vw, 3rem);
}
.page-k .k-ben-head {
    display: flex; align-items: center; gap: .6rem;
    padding-bottom: .9rem; margin-bottom: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.page-k .k-ben-head .icon { color: var(--sage); flex: none; }
.page-k .k-ben-head h3 {
    margin: 0; color: #fff;
    font-size: clamp(1.05rem, 1.5vw, 1.25rem); letter-spacing: .04em;
}
.page-k .k-ben .k-arrows { margin: 0; gap: .85rem; }
.page-k .k-ben .k-arrows li {
    align-items: flex-start; color: rgba(255, 255, 255, .82);
    font-size: .95rem; line-height: 1.5;
}
.page-k .k-ben .k-arrows .icon { color: var(--sage); margin-top: .25em; }

@media (max-width: 1000px) {
    .page-k .k-bens { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* The white event card sits inside the hero, so the white-headline rule above
   catches its title too. It is on paper, not on the photograph. */
.page-k .hero .hero-card h1, .page-k .hero .hero-card h2,
.page-k .hero .hero-card h3, .page-k .hero .hero-card h4,
.page-k .gsn-hero .hero-event h1, .page-k .gsn-hero .hero-event h2,
.page-k .gsn-hero .hero-event h3, .page-k .gsn-hero .hero-event h4 {
    color: var(--ink);
}

/* Hero, reworked: the Vanalok Foundation mark carries the identity instead of
   a "Green Schools Network" wordmark — large, centred, minimal copy beneath
   it. The event card keeps its own column on wide screens. */
.page-k .gsn-hero-inner-centered {
    text-align: center; display: flex; flex-direction: column; align-items: center;
}
.page-k .hero-logo {
    height: clamp(90px, 13vw, 170px); width: auto;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .45));
    animation: rise-in .9s var(--ease-out, cubic-bezier(.22, .8, .3, 1)) both;
}
.page-k .gsn-hero-inner-centered .gsn-hero-lead {
    margin-top: 1.6rem; max-width: 32ch;
    animation: rise-in .9s var(--ease-out, cubic-bezier(.22, .8, .3, 1)) .12s both;
}
.page-k .gsn-hero-inner-centered .hero-cta {
    justify-content: center;
    animation: rise-in .9s var(--ease-out, cubic-bezier(.22, .8, .3, 1)) .24s both;
}
@media (prefers-reduced-motion: reduce) {
    .page-k .hero-logo,
    .page-k .gsn-hero-inner-centered .gsn-hero-lead,
    .page-k .gsn-hero-inner-centered .hero-cta { animation: none; }
}

/* The Vanalok Foundation mark now *is* the header brand — in place of the
   "Green Schools Network" wordmark. The plain logo, no filters or effects.
   Left-aligned, in the flow, with the burger pushed right by its own
   margin-left: auto — not centred, the way .knav-brand normally sits. */
.page-k .knav-brand-logo {
    position: static; left: auto; transform: none;
}
.page-k .knav-brand-logo img { display: block; height: clamp(58px, 7.5vw, 96px); width: auto; }

@media (max-width: 520px) {
    .page-k .knav-brand-logo img { height: 46px; }
}

/* Conclave pages: the convenor and its two partners, side by side, rather
   than Vanalok alone — the event is jointly run, not just hosted. Each has
   its own native proportions, so height is fixed per logo and width follows;
   a plain flex row keeps their baselines aligned regardless. */
.page-k .knav-brand-group {
    /* .knav-brand normally centres itself absolutely; three logos read
       better pinned to the left, in the flow, with the burger on the right. */
    position: static; left: auto; transform: none;
    display: flex; align-items: center; gap: clamp(1.1rem, 2.5vw, 2rem);
}
.page-k .knav-brand-group a { display: block; line-height: 0; transition: opacity .2s ease; }
.page-k .knav-brand-group a:hover { opacity: .8; }
.page-k .knav-brand-group img { display: block; width: auto; }
.page-k .knav-brand-group img[alt="Vanalok Foundation"] { height: clamp(46px, 6vw, 72px); }
.page-k .knav-brand-group img[alt="EMPRI"] { height: clamp(52px, 6.8vw, 80px); }
.page-k .knav-brand-group img[alt$="Guides"] { height: clamp(46px, 6vw, 72px); }

@media (max-width: 760px) {
    .page-k .knav-brand-group { gap: .8rem; }
    .page-k .knav-brand-group img[alt="Vanalok Foundation"] { height: 34px; }
    .page-k .knav-brand-group img[alt="EMPRI"] { height: 40px; }
    .page-k .knav-brand-group img[alt$="Guides"] { height: 34px; }
}

/* The organiser tooling's brand mark: same real logo, in the same corner
   position "GS" used to occupy, rather than a second design for admin only. */
.page-k .brand-mark-logo {
    background: #fff; border: 1px solid var(--line-warm);
    padding: 3px;
}
.page-k .brand-mark-logo img { width: 100%; height: 100%; object-fit: contain; }

/* Real partner logos in place of the generic icon tile. Each has its own
   native proportions, so height is fixed and width follows rather than
   forcing a square. */
.page-k .k-partner-logo {
    height: 40px; width: auto; max-width: 130px;
    object-fit: contain; flex: none;
}

/* The same Vanalok mark, plain, in the footer. */
.page-k .foot-partner-logo {
    display: inline-block; margin-bottom: 1rem;
}
.page-k .foot-partner-logo img {
    height: 56px; width: auto;
    transition: opacity .2s ease;
}
.page-k .foot-partner-logo:hover img { opacity: .82; }

/* The header logo grew to match the "large, centred" brief, and on narrow
   screens it now reaches further down than the small wordmark it replaced —
   close enough to the headline beneath it to want a little more breathing
   room, even with the hero trimmed down. */
@media (max-width: 520px) {
    .page-k.page-home .gsn-hero-grid { padding-top: 4.5rem; }
}

/* Hero with the event card removed: one column instead of the two the grid
   was built for. No width cap — the 46rem one that used to live here existed
   to keep the lead paragraph's line length readable, and there is no
   paragraph any more; at this type size it only forced "NETWORK" onto a
   third line. The explicit <br> is the wordmark's only break. */
.page-k .gsn-hero-grid-solo { grid-template-columns: 1fr; }

/* Just the wordmark, centred, nothing else — "Green Schools Network" on one
   line and "Bengaluru" on its own beneath it. The carousel controls below
   are untouched; only this text block moves.

   The 46rem cap above exists to keep paragraph line-length readable; there is
   no paragraph here any more, and at this type size that cap is what forces
   "NETWORK" onto a third line. Full width, and the explicit <br> does the
   only line break the wordmark should have. */
.page-k .gsn-hero-inner-solo {
    margin-inline: auto; text-align: center;
    max-width: none;
}
/* No text-wrap: balance here — it re-breaks "GREEN SCHOOLS NETWORK" to even
   the lines out, which is exactly the break the <br> already decides. */
.page-k .gsn-hero-inner-solo h1 { text-wrap: nowrap; }

/* The hero was capped at 88vh/900px, so on tall viewports the next section
   peeked in at the bottom of the first screen before any scrolling. Fill the
   viewport instead — dvh accounts for mobile browser chrome, where a plain
   vh figure is measured against the address bar hidden and comes up short. */
.page-k .carousel {
    min-height: 100vh;
    min-height: 100dvh;
}

/* The first hero slide is a video loop rather than a still. It fills the frame
   the same way the photographs do; no slow-pan animation, since the footage is
   already moving. */
.page-k .slide-video {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Hero scrim, evened out ---------------------------------------------------
   The original was a left-to-right gradient — 74% black at the left edge,
   transparent by 80% across — which made sense when the headline sat in the
   left column. The headline is centred now, so that asymmetry just reads as
   one side being dirtier than the other. Replaced with an even, much lighter
   veil: enough to keep white type legible over a bright sky, not enough to
   colour the photograph. */
.page-k .carousel-scrim {
    background:
        linear-gradient(to top, rgba(4, 18, 10, .5), transparent 34%),
        rgba(0, 0, 0, .16);
}

/* The wordmark is the only thing in the hero now, so it can carry more size. */
.page-k .gsn-hero-inner-solo h1 {
    font-size: clamp(3.2rem, 8.4vw, 7rem);
    line-height: .98;
}
/* Below this the line is held on one line by nowrap, so the size has to be
   tied to the viewport or "GREEN SCHOOLS NETWORK" runs off the edge — 8.8vw
   is what keeps its 21 characters inside the 92vw content column. */
@media (max-width: 1080px) {
    .page-k .gsn-hero-inner-solo h1 { font-size: min(8.8vw, 4.4rem); }
}

/* ===========================================================================
   CONCLAVE PAGES — breaking up the green
   ---------------------------------------------------------------------------
   Measured 29–39% green-dominant pixels across these pages against ~22% on
   the home page. Three causes, all of them the same colour repeated: the page
   hero, the dark section and the footer are all one flat forest, and every
   feature tile is that same forest again.

   The fix is the one the home page already uses — spend the accent range
   (clay earth, ochre light, slate water) instead of one green everywhere, and
   let the deep panels sit closer to charcoal so the green reads as an accent
   rather than the ground.
   =========================================================================== */

/* The interior hero: charcoal base, warm light from one side, green kept as a
   glow rather than the whole slab. */
.page-k .page-hero { background: #16201c; }
.page-k .page-hero-bg {
    background:
        radial-gradient(1100px 520px at 88% -25%, rgba(166, 75, 51, .3), transparent 60%),
        radial-gradient(760px 460px at 4% 118%, rgba(143, 103, 24, .26), transparent 62%),
        radial-gradient(900px 600px at 45% 40%, rgba(44, 106, 79, .3), transparent 68%);
}

/* The dark band lower down leans slate rather than repeating the hero's
   green — two deep panels on one page should not be the same colour. */
.page-k .section-dark {
    background:
        radial-gradient(900px 460px at 84% -12%, rgba(59, 90, 107, .5), transparent 62%),
        radial-gradient(700px 400px at 4% 112%, rgba(143, 103, 24, .2), transparent 60%),
        #1a2227;
}

/* Feature tiles: the accent set in rotation instead of six identical greens.
   Written against the grid position rather than each page's markup so the
   pattern holds wherever the component is used. */
.page-k .grid-3 > *:nth-child(6n + 1) .feature-icon,
.page-k .grid-2 > *:nth-child(4n + 1) .feature-icon { background: var(--forest); color: #fff; }
.page-k .grid-3 > *:nth-child(6n + 2) .feature-icon,
.page-k .grid-2 > *:nth-child(4n + 2) .feature-icon { background: var(--clay);   color: #fff; }
.page-k .grid-3 > *:nth-child(6n + 3) .feature-icon,
.page-k .grid-2 > *:nth-child(4n + 3) .feature-icon { background: var(--slate);  color: #fff; }
.page-k .grid-3 > *:nth-child(6n + 4) .feature-icon,
.page-k .grid-2 > *:nth-child(4n + 4) .feature-icon { background: var(--ochre);  color: #fff; }
.page-k .grid-3 > *:nth-child(6n + 5) .feature-icon { background: var(--moss);   color: #fff; }
.page-k .grid-3 > *:nth-child(6n + 6) .feature-icon { background: var(--char);   color: #fff; }

/* Same for the programme's step and fact tiles. */
.page-k .steps > *:nth-child(3n + 1) .step-icon { background: var(--forest); color: #fff; }
.page-k .steps > *:nth-child(3n + 2) .step-icon { background: var(--clay);   color: #fff; }
.page-k .steps > *:nth-child(3n + 3) .step-icon { background: var(--slate);  color: #fff; }

/* The entry pass carries the convenor's mark above the event name. The header
   band is dark green, so this uses the white cut — and it has to survive the
   print stylesheet too, where backgrounds are commonly dropped. */
.page-k .ticket-logo {
    display: block; height: 42px; width: auto; margin-bottom: .85rem;
}


/* The pass header is white with green type rather than a green band — it
   prints honestly (browsers drop background colours by default, so a coloured
   band would come out as white paper with white text on it) and it lets the
   Vanalok mark appear in its real colours. */
.page-k .ticket-head {
    background: var(--paper-lift);
    border-bottom: 1px solid var(--line-warm);
    color: var(--ink-2);
}
.page-k .ticket-head h1, .page-k .ticket-head h2,
.page-k .ticket-head h3, .page-k .ticket-head h4 { color: var(--forest); }
.page-k .ticket-head p { color: var(--moss); }

/* The fee line inside a membership block: the figure carries the weight, the
   band and period sit quietly beside it. */
.page-k .k-fee {
    display: flex; align-items: baseline; gap: .6rem;
    margin: 0 0 .9rem; padding-bottom: .9rem;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.page-k .k-fee b {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; color: #fff;
}
.page-k .k-fee span {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
    color: rgba(255, 255, 255, .82);
}

/* The numbered row list, on paper rather than on a dark panel — same
   structure as .k-rows, inverted for a light ground. */
.page-k .k-rows-light { border-top-color: var(--line-warm); }
.page-k .k-rows-light .k-row { border-bottom-color: var(--line-warm); }
.page-k .k-rows-light .k-row:hover { background: var(--sand); }
.page-k .k-rows-light .k-row-num { color: var(--clay); }
.page-k .k-rows-light .k-row h3 { color: var(--ink); }
.page-k .k-rows-light .k-row p  { color: var(--ink-2); }

/* A fee line on a light block needs ink, not white. */
.page-k .k-tight .k-fee, .page-k .k-block .k-fee { border-bottom-color: rgba(255, 255, 255, .22); }

/* Message from the CEO: portrait beside the text, stacking under it on a
   narrow screen. */
.page-k .ceo-note {
    display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: clamp(1.6rem, 4vw, 3rem); align-items: start;
}
.page-k .ceo-portrait {
    margin: 0; position: relative;
    border: 1px solid var(--line-warm); background: var(--paper-lift);
}
.page-k .ceo-portrait img {
    display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
}
.page-k .ceo-quote {
    margin: .9rem 0 1.2rem; padding: 0 0 0 1.1rem;
    border-left: 3px solid var(--clay);
    font-family: var(--display); font-weight: 400;
    font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.3;
    color: var(--ink); letter-spacing: .01em;
}
.page-k .ceo-body .muted { font-size: 1rem; }
.page-k .ceo-sign {
    margin-top: 1.4rem; padding-top: 1rem;
    border-top: 1px solid var(--line-warm);
}
.page-k .ceo-sign strong {
    display: block; font-family: var(--display); font-weight: 400;
    text-transform: uppercase; letter-spacing: .04em;
    font-size: 1.1rem; color: var(--ink);
}
.page-k .ceo-sign span { font-size: .88rem; color: var(--muted-2); }
.page-k .ceo-draft { margin-bottom: 1rem; font-size: .9rem; }

@media (max-width: 760px) {
    .page-k .ceo-note { grid-template-columns: 1fr; }
    .page-k .ceo-portrait { max-width: 220px; }
}

/* Message carousel: two statements in one frame. Until the script runs the
   slides are simply stacked, so both are readable with JavaScript off — the
   .is-enhanced class is what collapses them. */
.page-k .msg-carousel .msg-slide + .msg-slide { margin-top: clamp(2rem, 5vw, 3.5rem); }
.page-k .msg-carousel .msg-ui { display: none; }

.page-k .msg-carousel.is-enhanced .msg-track { position: relative; }
.page-k .msg-carousel.is-enhanced .msg-slide {
    display: none; margin-top: 0;
}
.page-k .msg-carousel.is-enhanced .msg-slide.is-active {
    display: grid;
    animation: msg-in .5s var(--ease-out, cubic-bezier(.22, .8, .3, 1)) both;
}
.page-k .msg-carousel.is-enhanced .msg-ui {
    display: flex; align-items: center; justify-content: center; gap: .9rem;
    margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
@keyframes msg-in {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .page-k .msg-carousel.is-enhanced .msg-slide.is-active { animation: none; }
}

/* The slide itself reuses the portrait/body split. */
.page-k .msg-slide {
    display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: clamp(1.6rem, 4vw, 3rem); align-items: start;
}
.page-k .msg-dots { display: flex; gap: .5rem; }
.page-k .msg-dots button {
    background: none; border: 0; padding: .4rem .2rem; cursor: pointer;
}
.page-k .msg-dots i {
    display: block; width: 34px; height: 3px; background: var(--line-warm);
    transition: background .25s ease;
}
.page-k .msg-dots .is-active i { background: var(--clay); }

@media (max-width: 760px) {
    .page-k .msg-slide { grid-template-columns: 1fr; }
}