/* The site's design kit (the language of Home → Parks & Gardens), shared by every rebuilt page so headings, cards, figures,
   timelines and pictures look and behave the same everywhere. Interactions: js/kit.js. Tables: css/designs/tables.css.
   Statement cards (.dz-statement) live in css/wing_design.css. Cream page, deep green, sand cards, gold only as an accent. */
:root { --k-deep: #0a2e1a; --k-green: #1a472a; --k-mint: #e3ece1; --k-sand: #f2ede1; --k-cream: #f9f6ef; --k-ink: #1f2a22; --k-muted: #4b5563; --k-gold: #f1c40f; }

/* a section of a rebuilt page: the shared heading and text (.st-sec, .st-h2, .st-lead in tables.css) */
.k-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.k-head .st-lead { margin-top: 12px; }

/* figure tiles: the number large, its words under it; every tile deep green */
.k-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 28px; }
.k-fig { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 26px; border-radius: 14px; background: var(--k-deep); overflow: hidden;
    transition: transform 200ms cubic-bezier(.16, 1, .3, 1); }
.k-fig:hover { transform: translateY(-3px); }
.k-fig b { font-size: clamp(34px, 3vw, 46px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.k-fig span { font-size: 14px; font-weight: 600; color: #8fc9a3; }

/* a year rail: the years as stops on a line; pointing at or choosing one shows its record in the card below */
.k-rail { margin-top: 32px; }
.k-rail-stops { position: relative; display: flex; gap: 8px; margin: 0; padding: 0 0 18px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.k-rail-stops::-webkit-scrollbar { display: none; }
.k-rail-stops::before { content: ''; position: absolute; left: 0; right: 0; top: 21px; height: 2px; background: var(--k-mint); }
.k-rail-stop { position: relative; flex: 1 0 120px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 0 0; border: 0; background: none;
    cursor: pointer; font: inherit; text-align: left; color: var(--k-muted); }
.k-rail-stop i { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px #c9d8cb; transition: box-shadow 200ms, transform 200ms; }
.k-rail-stop b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--k-muted); font-variant-numeric: tabular-nums; transition: color 150ms; }
.k-rail-stop:hover b, .k-rail-stop.is-on b { color: var(--k-deep); }
.k-rail-stop:hover i { box-shadow: inset 0 0 0 4px var(--k-green); }
.k-rail-stop.is-on i { box-shadow: inset 0 0 0 5px var(--k-green), 0 0 0 6px rgba(26, 71, 42, .12); transform: scale(1.1); }
.k-rail-stop:focus-visible { outline: 2px solid var(--k-green); outline-offset: 4px; border-radius: 6px; }
.k-rail-card { position: relative; padding: 28px 32px; border-radius: 14px; background: var(--k-deep); color: #fff; min-height: 96px; }
.k-rail-card .k-rail-when { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--k-gold); }
.k-rail-card h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: #fff; }
.k-rail-card p { margin: 0; max-width: 80ch; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .88); }
.k-rail-card [hidden] { display: none; }
.k-rail-panel.k-in { animation: k-in 280ms cubic-bezier(.16, 1, .3, 1); }
@keyframes k-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* a chart beside its list (JFM agencies): one card, the list on the left, the chart on the right */
.k-panel { display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); border-radius: 16px; overflow: hidden; background: #fff; margin-top: 28px;
    box-shadow: 0 0 0 1px rgba(10, 46, 26, .06), 0 30px 60px -44px rgba(10, 46, 26, .35); }
.k-panel-side { background: var(--k-sand); }
.k-panel-main { padding: 28px 32px; }

/* an abbreviation key under a table: the short form in a pill, its meaning beside it */
.k-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 8px 24px; margin: 20px 0 0; padding: 20px 24px; border-radius: 12px; background: var(--k-sand); }
.k-key div { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 13.5px; line-height: 1.5; color: var(--k-ink); }
.k-key dt { flex: none; padding: 2px 8px; border-radius: 6px; background: #fff; font-weight: 700; font-size: 12.5px; color: var(--k-green); }
.k-key dd { margin: 0; color: var(--k-muted); }

/* before / after: one photo over the other, a handle to drag (or arrow keys) to compare */
.k-compare { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 21 / 9; max-height: 540px; width: 100%; background: var(--k-sand); user-select: none; touch-action: pan-y; cursor: ew-resize; --pos: 50%; }
.k-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.k-compare .k-after { clip-path: inset(0 0 0 var(--pos)); }
.k-compare-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .3); pointer-events: none; }
.k-compare-handle { position: absolute; top: 50%; left: var(--pos); width: 52px; height: 52px; margin: -26px 0 0 -26px; border: 0; border-radius: 50%; background: #fff; color: var(--k-deep);
    display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .45); cursor: ew-resize; }
.k-compare-handle:focus-visible { outline: 3px solid var(--k-gold); outline-offset: 2px; }
.k-compare-tag { position: absolute; top: 20px; padding: 8px 14px; border-radius: 999px; background: rgba(10, 46, 26, .55); color: #fff; font-size: 14px; font-weight: 700;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; }
.k-compare-tag.is-before { left: 20px; }
.k-compare-tag.is-after { right: 20px; }

/* a feature card (the park card on Parks & Gardens, for any page): the photograph filling one side, a frosted tag on it,
   the story on the other; .is-right puts the photo on the right. The card lifts and the photo slowly zooms under the pointer. */
.k-feature { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); border-radius: 20px; overflow: hidden; background: #fff;
    box-shadow: 0 0 0 1px rgba(10, 46, 26, .06), 0 30px 60px -40px rgba(10, 46, 26, .35); transition: transform 300ms cubic-bezier(.16, 1, .3, 1), box-shadow 300ms; }
.k-feature:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(10, 46, 26, .08), 0 40px 70px -40px rgba(10, 46, 26, .45); }
.k-feature.is-right .k-feature-photo { order: 2; }
.k-feature-photo { position: relative; margin: 0; min-height: 440px; overflow: hidden; background: var(--k-mint); isolation: isolate; }
.k-feature-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.k-feature:hover .k-feature-photo img { transform: scale(1.05); }
.k-feature-photo::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(10, 46, 26, .55) 100%); }
.k-feature-tag { position: absolute; z-index: 2; left: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
    background: rgba(255, 255, 255, .18); color: #fff; font-size: 14px; font-weight: 600; -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.k-feature-body { padding: 48px 52px; }
html body .k-feature-body .st-h2 { font-size: clamp(26px, 2.2vw, 34px); }
.k-feature-body .k-prose { margin-top: 20px; }
.k-prose p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; color: #374151; }
.k-prose p:last-child { margin-bottom: 0; }
.k-prose strong { color: var(--k-deep); }
/* two (or more) tiles side by side; the one marked .is-key deep green */
.k-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 28px; }
.k-pair > div { padding: 20px 22px; border-radius: 14px; background: var(--k-sand); }
.k-pair small { display: block; font-size: 12.5px; font-weight: 700; color: var(--k-muted); }
.k-pair strong { display: block; margin-top: 6px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--k-deep); }
.k-pair span { display: block; margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--k-green); }
.k-pair > .is-key { background: var(--k-deep); }
.k-pair > .is-key small { color: #8fc9a3; }
.k-pair > .is-key strong { color: #fff; }
.k-pair > .is-key span { color: var(--k-gold); }

/* a call to action (a Download section): a deep green band — an icon, the title and text, the button on the right */
.k-cta { position: relative; display: flex; align-items: center; gap: 24px; padding: 32px 40px; border-radius: 18px; background: var(--k-deep); color: #fff; overflow: hidden; isolation: isolate; }
.k-cta::after { content: ''; position: absolute; z-index: -1; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(143, 201, 163, .2), transparent 70%); }
.k-cta-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, .1); color: var(--k-gold); }
.k-cta-text { flex: 1; min-width: 0; }
.k-cta-text h3 { margin: 0; font-size: clamp(19px, 1.6vw, 24px); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.k-cta-text p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.k-cta-btn { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; background: #fff; color: var(--k-deep); font-size: 15px;
    font-weight: 700; text-decoration: none; transition: transform 150ms cubic-bezier(.4, 0, .2, 1), background-color 150ms; }
.k-cta-btn:hover { background: var(--k-gold); transform: translateY(-2px); }
.k-cta-btn:focus-visible { outline: 3px solid var(--k-gold); outline-offset: 3px; }

/* icon cards (as Core Focus on Wildlife Activities): an icon, a number, the title and text; three to a row, a card left
   alone on the last row spans it */
.k-igrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 28px; }
@media (min-width: 701px) and (max-width: 1100px) {   /* two to a row; a card alone on the last row spans it */
    .k-igrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .k-igrid > .k-icard:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}
@media (min-width: 1101px) {   /* three to a row; a last row of two shares it, a card alone on it spans it */
    .k-igrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .k-igrid > .k-icard { grid-column: span 2; }
    .k-igrid > .k-icard:nth-last-child(2):nth-child(3n + 1), .k-igrid > .k-icard:last-child:nth-child(3n + 2) { grid-column: span 3; }
    .k-igrid > .k-icard:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
    .k-igrid > .k-icard:first-child:nth-last-child(4), .k-igrid > .k-icard:first-child:nth-last-child(4) ~ .k-icard { grid-column: span 3; }   /* four: two by two */
}
.k-icard { position: relative; padding: 32px; border-radius: 8px; background: #e4ece2; transition: transform 150ms cubic-bezier(.4, 0, .2, 1), background-color 150ms; }
.k-icard:hover { transform: translateY(-2px); background: #dae5d7; }
.k-icard-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 50%; background: #fff; color: var(--k-green); flex: none;
    transition: transform 200ms, background-color 200ms; }
.k-icard:hover .k-icard-icon { background: var(--k-gold); color: var(--k-deep); transform: rotate(-8deg); }
.k-icard-no { position: absolute; top: 32px; right: 32px; font: 700 13px/1 Roboto, sans-serif; font-variant-numeric: tabular-nums; color: rgba(10, 46, 26, .4); }
.k-icard h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--k-deep); }
.k-icard p, .k-icard .k-prose p { margin: 0 0 8px; font-size: 16px; line-height: 1.65; color: var(--k-ink); }
.k-icard p:last-child, .k-icard .k-prose p:last-child { margin-bottom: 0; }

/* checklist cards: an icon and title, then the points with green checks */
.k-checkcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; margin-top: 28px; align-items: stretch; }   /* cards in a row share one height */
.k-checkcard { padding: 28px 30px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 46, 26, .06); transition: transform 250ms cubic-bezier(.16, 1, .3, 1), box-shadow 250ms; }
.k-checkcard:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(10, 46, 26, .1), 0 24px 48px -30px rgba(10, 46, 26, .5); }
.k-checkcard header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.k-checkcard header .k-icard-icon { margin: 0; background: var(--k-mint); }
.k-checkcard h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--k-deep); }
.k-checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.k-checks li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.55; color: #374151; }
.k-checks li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--k-mint)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a472a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat; }

/* rich text (core/designs/_rich.html): paragraphs, small headings, checks, chips and group cards, spaced evenly */
.k-rich > * + * { margin-top: 14px; }
.k-rich p { margin: 0; font-size: 15.5px; line-height: 1.75; color: #374151; }
.k-rich p strong { color: var(--k-deep); }
.k-rich-h { margin: 22px 0 0 !important; font-size: 15px; font-weight: 700; color: var(--k-green); }
.k-rich-h + * { margin-top: 10px; }
.k-rich .k-chips li { font-weight: 500; font-style: italic; background: var(--k-cream); box-shadow: 0 0 0 1px rgba(10, 46, 26, .08); }
.k-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.k-group { padding: 16px 18px; border-radius: 12px; background: var(--k-cream); box-shadow: 0 0 0 1px rgba(10, 46, 26, .06); }
.k-group header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.k-group strong { font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--k-deep); }
.k-group p { font-size: 13.5px !important; line-height: 1.6 !important; }

/* an explorer (js/kit.js joins side-by-side panels marked data-k-explore): the list on the left — number and title — and
   the chosen panel on the right; without the script every panel shows, one after another */
.k-explorer { padding: 0 0 84px; background: var(--k-cream); }
.k-explorer-grid { display: grid; grid-template-columns: minmax(0, 32fr) minmax(0, 68fr); gap: 28px; align-items: start; }
.k-explorer-nav { position: sticky; top: 96px; display: grid; gap: 6px; margin: 0; padding: 10px; border-radius: 16px; background: var(--k-sand); list-style: none; }
.k-explorer-nav button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 12px; background: transparent; text-align: left;
    font: 600 14.5px/1.35 'Plus Jakarta Sans', sans-serif; color: var(--k-deep); cursor: pointer; transition: background-color 150ms cubic-bezier(.4, 0, .2, 1); }
.k-explorer-nav button:hover { background: rgba(255, 255, 255, .7); }
.k-explorer-nav button b { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff;
    font: 700 12px 'Roboto', sans-serif; color: var(--k-green); font-variant-numeric: tabular-nums; }
.k-explorer-nav button.is-on { background: var(--k-deep); color: #fff; }
.k-explorer-nav button.is-on b { background: var(--k-gold); color: var(--k-deep); }
.k-explorer-nav button:focus-visible { outline: 2px solid var(--k-green); outline-offset: 2px; }
.k-explore-panel { padding: 0 0 16px; }
.k-explorer .k-explore-panel { padding: 0; }
.k-explorer .k-explore-panel > .st-wrap { padding: 0; }
.k-explorer .k-explore-panel[hidden] { display: none; }
.k-explore-panel.k-in { animation: k-in 300ms cubic-bezier(.16, 1, .3, 1); }
.k-explore-card { position: relative; padding: 36px 40px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 46, 26, .06), 0 30px 60px -48px rgba(10, 46, 26, .4); }
.k-explore-no { position: absolute; top: 34px; right: 38px; font: 700 13px 'Roboto', sans-serif; color: rgba(10, 46, 26, .35); font-variant-numeric: tabular-nums; }
.k-explore-title { margin: 0 0 18px; padding-right: 40px; font-size: clamp(22px, 2vw, 28px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--k-deep); }
.k-explore-table { margin-top: 26px; }
.k-explore-table .st-table { margin-top: 12px; }

/* status cards (approved / under process): a tick or a clock, the name and its note, the status pill */
.k-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 540px), 1fr)); gap: 12px; margin-top: 28px; }
.k-status { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 22px; border-radius: 14px; background: #fff;
    box-shadow: 0 0 0 1px rgba(10, 46, 26, .06); transition: transform 200ms cubic-bezier(.16, 1, .3, 1), box-shadow 200ms; }
.k-status:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(10, 46, 26, .1), 0 18px 36px -26px rgba(10, 46, 26, .5); }
.k-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--k-mint); color: var(--k-green); }
.k-status.is-pending .k-status-icon { background: #fef7d6; color: #8a6d0b; }
.k-status h3 { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--k-deep); }
.k-status p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--k-muted); }
.k-status-pill { padding: 6px 12px; border-radius: 999px; background: var(--k-mint); color: var(--k-green); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.k-status.is-pending .k-status-pill { background: #fef7d6; color: #6b4f0a; }
@media (max-width: 600px) { .k-status-grid { grid-template-columns: minmax(0, 1fr); } .k-status { grid-template-columns: auto minmax(0, 1fr); } .k-status-pill { grid-column: 2; justify-self: start; } }

/* deep green cards: an icon in gold, the title and text in white */
.k-dcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; margin-top: 28px; }
/* a row of cards: all in one row on wide screens, two to a row on smaller ones, one on phones */
.k-dcards.k-dcards-2 { grid-template-columns: repeat(var(--k-n, 4), minmax(0, 1fr)); }
@media (max-width: 1280px) { .k-dcards.k-dcards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .k-dcards.k-dcards-2 { grid-template-columns: minmax(0, 1fr); } }
.k-dcard p strong { color: var(--k-gold); }
.k-dcard { position: relative; padding: 30px; border-radius: 16px; background: var(--k-deep); overflow: hidden; isolation: isolate; transition: transform 250ms cubic-bezier(.16, 1, .3, 1); }
.k-dcard::after { content: ''; position: absolute; z-index: -1; right: -70px; top: -70px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(143, 201, 163, .18), transparent 70%); }
.k-dcard:hover { transform: translateY(-4px); }
.k-dcard-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, .1); color: var(--k-gold); }
.k-dcard h3 { margin: 22px 0 8px; font-size: 19px; font-weight: 700; line-height: 1.3; color: #fff; }
.k-dcard p { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .8); }

/* a numbered process: the steps side by side on a line joining them */
.k-steps { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: none; }
.k-step { position: relative; padding: 26px 26px 28px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 46, 26, .06); transition: transform 200ms cubic-bezier(.16, 1, .3, 1), box-shadow 200ms; }
.k-step:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(10, 46, 26, .1), 0 20px 40px -28px rgba(10, 46, 26, .5); }
.k-step-n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--k-deep); color: var(--k-gold);
    font: 700 14px 'Roboto', sans-serif; font-variant-numeric: tabular-nums; }
.k-step:not(:last-child)::after { content: ''; position: absolute; top: 46px; right: -16px; width: 16px; height: 2px; background: var(--k-green); }
.k-step h3 { margin: 18px 0 6px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--k-deep); }
.k-step p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.65; color: #374151; }
.k-step p.k-step-lead { font-weight: 600; color: var(--k-ink); }

/* a bento: the first card large on the left, the others stacked beside it */
.k-bento { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 28px; }
.k-bento > :first-child { grid-row: span 2; }
.k-bento > :only-child { grid-column: 1 / -1; }
.k-bcard { padding: 30px 32px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 46, 26, .06); }
.k-bento > :first-child.k-bcard { background: var(--k-sand); box-shadow: none; }
.k-bcard header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.k-bcard header .k-icard-icon { margin: 0; background: var(--k-mint); }
.k-bento > :first-child.k-bcard header .k-icard-icon { background: #fff; }
.k-bcard h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; color: var(--k-deep); }

/* three notes of about the same length: three equal columns, no card larger */
.k-bento.k-bento-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }   /* each card ends with its text: no blank foot */
.k-bento.k-bento-3 > :first-child { grid-row: auto; }
.k-bento.k-bento-3 > .k-bcard { background: #fff; box-shadow: 0 0 0 1px rgba(10, 46, 26, .06); }
.k-bento.k-bento-3 > .k-bcard header .k-icard-icon { background: var(--k-mint); }
@media (max-width: 1100px) { .k-bento.k-bento-3 { grid-template-columns: minmax(0, 1fr); } }

/* a closing banner: deep green, a small gold title, the line large */
.k-banner { position: relative; padding: 48px 56px; border-radius: 20px; background: var(--k-deep); overflow: hidden; isolation: isolate; }
.k-banner .k-note-mark { width: 300px; right: -30px; top: -20px; }
.k-banner-kicker { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 700; color: var(--k-gold); }
.k-banner p { margin: 0; max-width: 46ch; font-size: clamp(21px, 2vw, 30px); font-weight: 600; line-height: 1.4; letter-spacing: -.015em; color: #fff; }
.k-banner p strong { color: #8fc9a3; }

/* a numbered list of duties: one duty a row, two rows side by side */
.k-duties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.k-duties li { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 46, 26, .06);
    transition: transform 200ms cubic-bezier(.16, 1, .3, 1), box-shadow 200ms; }
.k-duties li:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(10, 46, 26, .1), 0 16px 32px -24px rgba(10, 46, 26, .5); }
.k-duties b { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--k-mint); color: var(--k-green);
    font: 700 12.5px 'Roboto', sans-serif; font-variant-numeric: tabular-nums; }
.k-duties span { font-size: 15px; line-height: 1.6; color: var(--k-ink); padding-top: 6px; }

/* large figure tiles: the number, its label and a line explaining it; every tile deep green */
.k-bigfigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; margin-top: 28px; }
.k-bigfig { padding: 32px 36px; border-radius: 16px; background: var(--k-deep); transition: transform 200ms cubic-bezier(.16, 1, .3, 1); }
.k-bigfig:hover { transform: translateY(-3px); }
.k-bigfig b { display: block; font-size: clamp(48px, 5vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--k-gold); font-variant-numeric: tabular-nums; }
.k-bigfig > strong { display: block; margin-top: 14px; font-size: 18px; font-weight: 700; color: #fff; }
.k-bigfig p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.k-bigfig p strong { color: #fff; }
@media (max-width: 800px) { .k-duties { grid-template-columns: minmax(0, 1fr); } }

/* two photographs side by side, the first wider; each lifts its zoom under the pointer */
.k-photopair { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.k-photopair figure { position: relative; margin: 0; height: clamp(260px, 32vw, 460px); border-radius: 18px; overflow: hidden; background: var(--k-mint); }
.k-photopair img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.k-photopair figure:hover img { transform: scale(1.05); }
.k-photopair figcaption { position: absolute; left: 18px; bottom: 18px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; font-size: 13.5px;
    font-weight: 600; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.k-fig-note { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--k-gold); }

/* a spotlight: a deep green panel — the name and text on the left, the figures large and a note on the right */
.k-spot { position: relative; display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: 48px; padding: 48px 52px; border-radius: 20px; background: var(--k-deep);
    overflow: hidden; isolation: isolate; }
.k-spot .k-note-mark { width: 320px; right: -40px; top: -30px; }
.k-spot-main h2 { margin: 0 0 16px; font-size: clamp(30px, 3vw, 44px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: #fff; }
.k-spot-main p { margin: 0 0 12px; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .85); }
.k-spot-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.k-spot-figs div { padding: 20px 22px; border-radius: 14px; background: rgba(255, 255, 255, .08); }
.k-spot-figs b { display: block; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--k-gold); font-variant-numeric: tabular-nums; }
.k-spot-figs span { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .75); }
.k-spot-note { margin-top: 12px; padding: 20px 22px; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.k-spot-note strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--k-gold); }
.k-spot-note p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, .82); }

/* documents: a row each — an icon, the title and date, the Download button */
.k-docs { display: grid; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.k-docs li { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 46, 26, .06);
    transition: transform 150ms cubic-bezier(.4, 0, .2, 1), box-shadow 150ms; }
.k-docs li:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(10, 46, 26, .1), 0 14px 28px -22px rgba(10, 46, 26, .5); }
.k-docs-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: #f6e3dd; color: #b4442f; }
.k-docs li > div { flex: 1; min-width: 0; }
.k-docs strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--k-deep); }
.k-docs small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--k-muted); }
.k-docs-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--k-mint); color: var(--k-green);
    font-size: 13.5px; font-weight: 700; text-decoration: none; transition: background-color 150ms; }
.k-docs-btn:hover { background: var(--k-green); color: #fff; }
.k-docs-btn:focus-visible { outline: 2px solid var(--k-green); outline-offset: 2px; }
.k-banner p.k-banner-long { max-width: 72ch; font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; line-height: 1.6; }

/* theme tiles: an icon and a short name, in a row (the first deep green) */
.k-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 24px 0 16px; }
.k-theme { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 46, 26, .06);
    transition: transform 200ms cubic-bezier(.16, 1, .3, 1); }
.k-theme:hover { transform: translateY(-3px); }
.k-theme .k-icard-icon { margin: 0; background: var(--k-mint); }
.k-theme strong { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--k-deep); }
.k-theme:first-child { background: var(--k-deep); box-shadow: none; }
.k-theme:first-child .k-icard-icon { background: rgba(255, 255, 255, .1); color: var(--k-gold); }
.k-theme:first-child strong { color: #fff; }

/* a moving strip of cards: an endless loop across the full width, edges fading; it pauses under the pointer or on focus */
.k-marquee { position: relative; margin-top: 28px; overflow: hidden; outline: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.k-marquee-track { display: flex; width: max-content; animation: k-marquee var(--k-marquee-time, 46s) linear infinite; }
.k-marquee:hover .k-marquee-track, .k-marquee:focus-within .k-marquee-track, .k-marquee:focus .k-marquee-track { animation-play-state: paused; }
.k-marquee-set { display: flex; gap: 20px; padding-right: 20px; }
.k-marquee-set > .k-icard { flex: none; width: 380px; }
@keyframes k-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 700px) { .k-marquee-set > .k-icard { width: 290px; } }
@media (prefers-reduced-motion: reduce) {
    .k-marquee { -webkit-mask-image: none; mask-image: none; padding: 0 5%; }
    .k-marquee-track { animation: none; width: auto; display: block; }
    .k-marquee-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); padding: 0; }
    .k-marquee-set > .k-icard { width: auto; }
    .k-marquee-set[aria-hidden="true"] { display: none; }
}

/* chips: short items side by side */
.k-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.k-chips li { margin: 0; padding: 5px 12px; border-radius: 999px; background: var(--k-sand); font-size: 13.5px; font-weight: 600; color: var(--k-deep); }
.k-pill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--k-mint); color: var(--k-green); font-size: 13px; font-weight: 700; white-space: nowrap; }

/* two cards side by side under a statement: a chain of command and a note */
.k-duo { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); gap: 16px; margin-top: 16px; align-items: stretch; }
.k-duo > :only-child { grid-column: 1 / -1; }

/* a chain of command: the roles down a line, each office under its role */
.k-chain { padding: 32px 36px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 46, 26, .06); }
.k-chain h3 { margin: 0 0 20px; font-size: 19px; font-weight: 700; color: var(--k-deep); }
.k-chain > ol { position: relative; margin: 0; padding: 0 0 0 28px; list-style: none; }
.k-chain > ol::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--k-mint); }
.k-chain > ol > li { position: relative; margin: 0 0 18px; }
.k-chain > ol > li:last-child { margin-bottom: 0; }
.k-chain > ol > li::before { content: ''; position: absolute; left: -28px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px var(--k-green); }
.k-chain > ol > li:first-child::before { background: var(--k-gold); box-shadow: inset 0 0 0 4px var(--k-deep); }
.k-chain-role { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 700; color: var(--k-muted); }
.k-chain strong { font-size: 16px; font-weight: 700; color: var(--k-deep); }

/* a note as a deep green panel, a faint leaf in the corner */
.k-note { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 32px 36px; border-radius: 14px; background: var(--k-deep);
    overflow: hidden; isolation: isolate; min-height: 220px; }
.k-note-mark { position: absolute; z-index: -1; right: -20px; top: 10px; width: 62%; color: rgba(143, 201, 163, .16); }
.k-note p { margin: 0; font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; line-height: 1.55; color: #fff; }
.k-note-by { font-size: 14px; color: rgba(255, 255, 255, .65); }

/* level cards: the code large, three rings with this level's ring lit */
.k-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; margin-top: 28px; }
.k-level { position: relative; padding: 28px; border-radius: 14px; background: var(--k-sand); overflow: hidden; transition: transform 200ms cubic-bezier(.16, 1, .3, 1), background-color 200ms; }
.k-level:hover { transform: translateY(-4px); background: var(--k-mint); }
.k-level-rings { position: absolute; right: 22px; top: 22px; width: 56px; height: 56px; }
.k-level-rings circle { fill: none; stroke: rgba(10, 46, 26, .14); stroke-width: 2; }
.k-level-rings circle.is-on { fill: rgba(26, 71, 42, .12); stroke: var(--k-green); stroke-width: 2.5; }
.k-level-code { display: block; font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--k-deep); }
.k-level h3 { margin: 18px 0 8px; font-size: 18px; font-weight: 700; color: var(--k-deep); }
.k-level p { margin: 0; font-size: 15px; line-height: 1.65; color: #374151; }

/* data cards: name and badge, figures large, a stacked bar of the mix with its key */
.k-units { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin-top: 28px; align-items: start; }
.k-unit { display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 46, 26, .06);
    transition: transform 250ms cubic-bezier(.16, 1, .3, 1), box-shadow 250ms; }
.k-unit:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(10, 46, 26, .1), 0 24px 48px -30px rgba(10, 46, 26, .5); }
.k-unit header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.k-unit h3 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--k-deep); }
.k-unit-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.k-unit-facts div { padding: 14px 16px; border-radius: 12px; background: var(--k-sand); }
.k-unit-facts dt { font-size: 12.5px; font-weight: 600; color: var(--k-muted); }
.k-unit-facts dd { margin: 4px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--k-deep); font-variant-numeric: tabular-nums; }
.k-mix { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--k-sand); }
.k-mix span { width: var(--w); height: 100%; transition: filter 150ms, transform 150ms; }
.k-mix span:hover { filter: brightness(1.2); }
.k-mix span:nth-child(5n + 1), .k-mix-key li:nth-child(5n + 1) i { background: #d9c79e; }
.k-mix span:nth-child(5n + 2), .k-mix-key li:nth-child(5n + 2) i { background: #8fc9a3; }
.k-mix span:nth-child(5n + 3), .k-mix-key li:nth-child(5n + 3) i { background: #2d6a4f; }
.k-mix span:nth-child(5n + 4), .k-mix-key li:nth-child(5n + 4) i { background: #0a2e1a; }
.k-mix span:nth-child(5n + 5), .k-mix-key li:nth-child(5n + 5) i { background: #b8900f; }
.k-mix-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -6px 0 0; padding: 0; list-style: none; }
.k-mix-key li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--k-muted); }
.k-mix-key i { width: 10px; height: 10px; border-radius: 3px; }
.k-mix-key b { color: var(--k-deep); font-weight: 700; font-variant-numeric: tabular-nums; }
.k-unit p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #374151; }
/* a figure tile whose value is words, not a number; and the unit beside a number */
.k-fig b small { font-size: 16px; font-weight: 700; letter-spacing: 0; }
.k-fig.is-words b { font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }

@media (max-width: 700px) { .k-icard { padding: 22px; } .k-icard-no { top: 22px; right: 22px; } }
@media (max-width: 900px) {
    .k-photopair { grid-template-columns: minmax(0, 1fr); }
    .k-spot { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 30px 24px; }
    .k-docs li { flex-wrap: wrap; }
    .k-bento { grid-template-columns: minmax(0, 1fr); }
    .k-bento > :first-child { grid-row: auto; }
    .k-step:not(:last-child)::after { display: none; }
    .k-banner { padding: 32px 26px; }
    .k-explorer-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .k-explorer-nav { position: static; display: flex; overflow-x: auto; scrollbar-width: none; border-radius: 14px; }
    .k-explorer-nav::-webkit-scrollbar { display: none; }
    .k-explorer-nav button { flex: 0 0 auto; max-width: 240px; }
    .k-explore-card { padding: 26px 22px; }
    .k-explore-no { top: 24px; right: 22px; }
    .k-feature { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
    .k-feature.is-right .k-feature-photo { order: 0; }
    .k-feature-photo { min-height: 0; aspect-ratio: 4 / 3; }
    .k-feature-body { padding: 28px 22px 32px; }
    .k-cta { flex-direction: column; align-items: flex-start; padding: 26px 24px; }
    .k-duo { grid-template-columns: minmax(0, 1fr); }
    .k-chain, .k-note { padding: 24px 22px; }
    .k-panel { grid-template-columns: minmax(0, 1fr); }
    .k-panel-main { padding: 22px 20px; }
    .k-rail-card { padding: 22px 20px; }
    .k-compare { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .k-fig, .k-rail-stop i, .k-rail-panel.k-in { transition: none; animation: none; } .k-fig:hover { transform: none; } }