/* Working Plans: the page's original design (from static/css/forest_working_plans.css, used by templates/core/forest/forest_working_plans.html), unchanged. */
/* ============================================
   WORKING PLANS PAGE — Premium Strategic Blueprint
   ============================================ */

.wp-page {
    --forest:   #0a2e1a;
    --emerald:  #059669;
    --gold:     #f1c40f;
    --cream:    #f9f6ef;
    --fog:      #e8f0e9;
    --ink:      #0f1c10;
    --white:    #ffffff;
    --ease:     cubic-bezier(0.16, 1, 0.3, 1);
}

.wp-page {
    background: transparent;
    color: var(--ink);
    font-family: 'Plus Jakarta Sans', sans-serif;
}



/* ── ANIMATIONS ── */
.wp-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.wp-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.wp-section-title {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    color: var(--forest);
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-bottom: 25px;
    text-align: center;
}

/* ── SECTIONING & NEAT COMPACT SPACING ── */
.wp-section { padding: 18px 0; }
.wp-wrap { padding: 0 4%; max-width: 1440px; margin: 0 auto; }

/* ── STATS PANEL ── */
.wp-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 10px;
    position: relative;
    z-index: 20;
}
.wp-stat-card {
    background: var(--white);
    padding: 16px 14px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.04);
    border: 1px solid var(--fog);
    transition: all 0.3s var(--ease);
    position: relative;
    overflow: hidden;
}
.wp-stat-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: var(--emerald); transform: scaleX(0); transition: 0.3s var(--ease);
}
.wp-stat-card:hover { transform: translateY(-3px); border-color: var(--emerald); }
.wp-stat-card:hover::before { transform: scaleX(1); }

.wp-stat-num {
    font-size: 28px;
    font-weight: 800;
    color: var(--forest);
    display: block;
    margin-bottom: 4px;
    line-height: 1.1;
}
.wp-stat-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--emerald);
    line-height: 1.3;
    display: block;
}

/* ── ACTIVITIES CONTAINER (DARK THIN BORDER + GREEN BG + YELLOW TITLE + WHITE CONTENT) ── */
.wp-activities-container {
    background: linear-gradient(135deg, #042f1a 0%, #064e3b 100%);
    border: 1.5px solid #0f3e26;
    border-radius: 24px;
    padding: 32px 30px;
    box-shadow: 0 15px 40px rgba(4, 47, 26, 0.18);
    position: relative;
    overflow: hidden;
}

.wp-activities-header {
    text-align: center;
    margin-bottom: 24px;
}
.wp-activities-title {
    font-size: 1.8rem;
    font-weight: 900;
    color: #F1C40F; /* Yellow / Gold topic title */
    margin: 0 0 8px 0;
    letter-spacing: -0.3px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.wp-act-title-line {
    display: block;
    width: 60px;
    height: 3.5px;
    background: #F1C40F;
    margin: 0 auto;
    border-radius: 2px;
}

.wp-pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.wp-pillar-card {
    background: rgba(255, 255, 255, 0.07);
    padding: 22px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: 0.3s var(--ease);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
}
.wp-pillar-card:hover {
    border-color: #F1C40F;
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.wp-pillar-icon {
    width: 44px;
    height: 44px;
    background: rgba(241, 196, 15, 0.15);
    border: 1px solid rgba(241, 196, 15, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F1C40F;
    margin-bottom: 14px;
}
.wp-pillar-icon svg { width: 22px; height: 22px; }
.wp-pillar-card h4 {
    font-weight: 800;
    font-size: 1.05rem;
    color: #F1C40F; /* Yellow sub-topic title */
    margin: 0 0 8px 0;
}
.wp-pillar-card p {
    font-size: 0.88rem;
    color: #ffffff; /* Crisp white body content */
    line-height: 1.55;
    margin: 0;
    opacity: 0.95;
}

/* ── DISTRIBUTION DONUT ── */
.wp-dist-module {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 60px;
    align-items: center;
    background: var(--white);
    padding: 60px;
    border-radius: 40px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.04);
    max-width: 100%;
    box-sizing: border-box;
}
.wp-chart-wrap {
    position: relative;
    width: 320px;
    height: 320px;
    margin: 0 auto;
}
.wp-donut-svg {
    transform: rotate(-90deg);
}
.wp-donut-seg {
    fill: none;
    stroke-width: 15;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.5s var(--ease);
}
.wp-donut-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.wp-donut-center strong { font-size: 32px; color: var(--forest); }

/* ── BLUEPRINT CARDS (Alternating Sidebar: 1st & 3rd LEFT, 2nd RIGHT, Equivalent Width) ── */
.wp-blueprint-row {
    margin-bottom: 24px;
    width: 100%;
}

.wp-bp-card {
    background: var(--white);
    border-radius: 24px;
    border: 1px solid var(--fog);
    overflow: hidden;
    display: flex;
    flex-direction: row; /* Default (1st & 3rd): Green panel on LEFT */
    align-items: stretch;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: all 0.4s var(--ease);
    width: 100%;
    box-sizing: border-box;
}

/* Middle card (2nd): Green panel on RIGHT */
.wp-blueprint-row:nth-child(even) .wp-bp-card {
    flex-direction: row-reverse;
}

.wp-bp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}
.wp-bp-sidebar {
    width: 250px;
    align-self: stretch;
    background: var(--forest);
    padding: 30px 24px;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    box-sizing: border-box;
    flex-shrink: 0;
}
.wp-bp-body {
    padding: 30px 36px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wp-meta-item { margin-bottom: 0; }
.wp-meta-item small { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; opacity: 0.7; margin-bottom: 3px; letter-spacing: 0.05em; }
.wp-meta-item p { font-size: 14px; font-weight: 700; margin: 0; line-height: 1.3; }

.wp-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.wp-tag {
    background: var(--fog);
    color: var(--forest);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

/* ── LUNGS OF SHILLONG ── */
.wp-shillong {
    background: var(--forest);
    border-radius: 60px;
    padding: 80px;
    color: var(--white);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}
.wp-shillong h2 { font-size: 3rem; font-weight: 800; color: var(--gold); line-height: 1.1; margin-bottom: 30px; }
.wp-lung-list { list-style: none; padding: 0; margin: 0; }
.wp-lung-list li {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    gap: 20px;
    align-items: center;
    font-weight: 600;
}
.wp-lung-list svg { color: var(--gold); width: 24px; flex-shrink: 0; }

/* ── RESPONSIVE ── */
@media (max-width: 1440px) {
    .wp-stats-grid { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
    .wp-pillar-grid { grid-template-columns: repeat(2, 1fr); }
    .wp-dist-module { grid-template-columns: 1fr; padding: 40px; }
    .wp-blueprint-row:nth-child(odd),
    .wp-blueprint-row:nth-child(even) { margin-left: 0; margin-right: 0; }
    .wp-bp-card { flex-direction: column-reverse; }
    .wp-bp-sidebar { width: 100%; padding: 30px; }
    .wp-shillong { grid-template-columns: 1fr; padding: 40px; }
}

@media (max-width: 640px) {
    .wp-stats-grid { grid-template-columns: 1fr; }
    .wp-pillar-grid { grid-template-columns: 1fr; }
    .wp-shillong h2 { font-size: 2rem; }
}

/* ── Working Plans in the site style (Home → Territorial Overview): full width inside 5% margins, cream page with one
   deep-green band (Management of Forests), sand cards, 52px left headings, Roboto figures, 150ms motion. ── */
.wk-sec { padding: 84px 0 !important; background: #f9f6ef; }
.wk-sec:not(.wk-mgmt) + .wk-sec:not(.wk-mgmt) { padding-top: 20px !important; }   /* cream after cream: close up */
.wk-wrap { margin: 0 auto; padding: 0 5%; box-sizing: border-box; }
.wk-h2 { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(28px, 2.5vw, 38px); line-height: 1.02; letter-spacing: -.035em; color: #0a2e1a; text-wrap: balance; }
.wk-light { color: #fff; }
.wk-sub { margin: 12px 0 0; max-width: 64ch; font-size: 16px; line-height: 1.6; color: #4b5563; }
.wk-sub p { margin: 0; }
.wk-light-sub { color: rgba(255, 255, 255, .72); }
.wk-split { display: grid; grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr); gap: 52px; align-items: start; }

/* figures: deep-green cards */
.wk-stats { padding-top: 52px !important; }
.wk-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.wk-fig { display: flex; flex-direction: column; gap: 8px; padding: 32px; border-radius: 8px; background: #0a2e1a; outline: none; cursor: default;
    transition: transform 200ms cubic-bezier(.4, 0, .2, 1), background-color 200ms cubic-bezier(.4, 0, .2, 1); }
.wk-fig-num { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-size: clamp(44px, 4.4vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -.03em; color: #fff;
    transition: color 200ms cubic-bezier(.4, 0, .2, 1); }
.wk-fig-label { font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, .9); }
.wk-fig-note { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .7); }
.wk-fig:is(:hover, :focus-visible) { transform: translateY(-4px); background: #123b26; }
.wk-fig:is(:hover, :focus-visible) .wk-fig-num { color: #f1c40f; }
.wk-fig:focus-visible { outline: 2px solid #f1c40f; outline-offset: 3px; }

/* directives: sand cards */
.wk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.wk-card { padding: 32px; border-radius: 8px; background: #f2ede1; transition: transform 150ms cubic-bezier(.4, 0, .2, 1), background-color 150ms cubic-bezier(.4, 0, .2, 1); }
.wk-card:hover { transform: translateY(-2px); background: #ece5d3; }
.wk-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 50%; background: rgba(26, 71, 42, .1); color: #1a472a; font-size: 18px;
    transition: background-color 250ms cubic-bezier(.4, 0, .2, 1), color 250ms, transform 400ms cubic-bezier(.34, 1.56, .64, 1); }
.wk-card-icon svg { width: 20px; height: 20px; }
.wk-card:hover .wk-card-icon { background: #f1c40f; color: #0a2e1a; transform: rotate(-10deg) scale(1.06); }
.wk-card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #0a2e1a; }
.wk-card p { margin: 0; font-size: 15px; line-height: 1.6; color: #1f2a22; }

/* distribution: a slim bar and a row per region */
.wk-total { margin: 32px 0 0; display: flex; align-items: baseline; gap: 12px; font-size: 15px; font-weight: 600; color: #4b5563; }
.wk-total span { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-size: 64px; font-weight: 500; line-height: 1; letter-spacing: -.03em; color: #1a472a; }
.wk-regions { padding: 32px; border-radius: 8px; background: #f2ede1; }
.wk-bar { display: flex; gap: 4px; height: 16px; }
.wk-seg { flex: var(--g) 1 0; border-radius: 999px; transition: opacity 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1); }
.wk-tone-1 { background: #0a2e1a; } .wk-tone-2 { background: #2d6a4f; } .wk-tone-3 { background: #c9a227; } .wk-tone-4 { background: #8fc9a3; } .wk-tone-5 { background: #d3ccbb; }
.wk-region-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wk-region { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 64px; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; outline: none; cursor: default;
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1), opacity 150ms cubic-bezier(.4, 0, .2, 1); }
.wk-dot { width: 12px; height: 12px; border-radius: 50%; }
.wk-region-name { display: flex; flex-direction: column; font-size: 16px; font-weight: 700; color: #0a2e1a; }
.wk-region-name small { font-size: 13px; font-weight: 500; color: #4b5563; }
.wk-region-num { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-size: 32px; font-weight: 500; color: #0a2e1a; }
.wk-region-share { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-size: 14px; color: #4b5563; text-align: right; }
.wk-region.is-on { background: #f9f6ef; }
[data-wk-pick].has-pick .wk-region:not(.is-on), [data-wk-pick].has-pick .wk-seg:not(.is-on) { opacity: .35; }
.wk-seg.is-on { transform: scaleY(1.35); }

/* management of forests: the slider band */
.wk-mgmt { background: #0a2e1a; overflow: hidden; }
.wk-mgmt + .wk-sec { padding-top: 84px !important; }
.wk-mgmt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.wk-nav { display: flex; align-items: center; gap: 12px; flex: none; }
.wk-count { margin-right: 8px; font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-size: 14px; color: rgba(255, 255, 255, .6); }
.wk-count b { font-weight: 500; color: #fff; }
.wk-btn { width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1), color 150ms, transform 150ms cubic-bezier(.4, 0, .2, 1); }
.wk-btn svg { width: 18px !important; height: 18px !important; }
.wk-btn:hover { background: #f1c40f; color: #0a2e1a; }
.wk-btn:active { transform: translateY(1px); }
.wk-btn:focus-visible, .wk-track:focus-visible { outline: 2px solid #f1c40f; outline-offset: 3px; }
.wk-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 5%; cursor: grab; outline: none; }
.wk-track::-webkit-scrollbar { display: none; }
.wk-track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.wk-slide { flex: 0 0 min(420px, 78vw); min-height: 240px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 32px;
    border-radius: 8px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); scroll-snap-align: start; user-select: none;
    opacity: .5; transform: scale(.96); transition: opacity 400ms cubic-bezier(.4, 0, .2, 1), transform 500ms cubic-bezier(.16, 1, .3, 1), background-color 300ms; }
.wk-slide.is-on { opacity: 1; transform: none; background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(241, 196, 15, .4); }
.wk-slide-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(143, 201, 163, .14); color: #8fc9a3; font-size: 20px;
    transition: background-color 300ms, color 300ms, transform 500ms cubic-bezier(.34, 1.56, .64, 1); }
.wk-slide.is-on .wk-slide-icon { background: #f1c40f; color: #0a2e1a; transform: rotate(-8deg); }
.wk-slide p { margin: 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.4; color: #fff; }
.wk-progress { height: 2px; margin-top: 32px; border-radius: 2px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.wk-progress span { display: block; height: 100%; width: 100%; background: #f1c40f; transform: scaleX(0); transform-origin: left; transition: transform 400ms cubic-bezier(.4, 0, .2, 1); }

/* working plans of the state: a list beside the chosen plan */
.wk-plans-grid { margin-top: 32px; align-items: stretch; }
.wk-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wk-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; border-radius: 8px; background: #f2ede1; cursor: pointer; outline: none;
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1); }
.wk-plan-name { font-size: 16px; font-weight: 700; line-height: 1.35; color: #0a2e1a; }
.wk-plan svg { flex: none; color: #1a472a; opacity: 0; transform: translateX(-6px); transition: opacity 150ms, transform 150ms cubic-bezier(.4, 0, .2, 1); }
.wk-plan:hover { background: #ece5d3; }
.wk-plan.is-on { background: #1a472a; transform: translateX(4px); }
.wk-plan.is-on .wk-plan-name { color: #fff; }
.wk-plan.is-on svg, .wk-plan:hover svg { opacity: 1; transform: none; }
.wk-plan.is-on svg { color: #f1c40f; }
.wk-plan:focus-visible { box-shadow: 0 0 0 2px #f9f6ef, 0 0 0 4px #1a472a; }
.wk-plan-panel { position: relative; padding: 32px; border-radius: 8px; background: #fff; }
.wk-plan-detail { display: none; }
.wk-plan-detail.is-on { display: block; animation: wkIn .35s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes wkIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wk-plan-detail p { margin: 0; font-size: 16px; line-height: 1.7; color: #1f2a22; }
.wk-plan-detail strong { display: block; margin-bottom: 12px; font-size: 22px; line-height: 1.3; color: #0a2e1a; }
.wk-plan-note { margin-top: 20px; padding: 20px; border-radius: 8px; background: #f2ede1; }
.wk-plan-note p { margin: 0; font-size: 14px; line-height: 1.6; color: #4b5563; }
.wk-plans:not(.is-live) .wk-plan-detail { display: block; margin-bottom: 20px; }

@media (max-width: 1100px) { .wk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
    .wk-sec { padding: 52px 0 !important; }
    .wk-wrap { padding: 0 20px; }
    html body .wk-split, html body .wk-cards { grid-template-columns: minmax(0, 1fr) !important; gap: 20px; }
    .wk-mgmt-head { flex-direction: column; align-items: flex-start; gap: 20px; }
    .wk-track { padding: 8px 20px; gap: 12px; }
    .wk-regions, .wk-plan-panel { padding: 20px; }
    .wk-region { grid-template-columns: 12px minmax(0, 1fr) auto; }
    .wk-region-share { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wk-slide, .wk-slide-icon, .wk-fig, .wk-card, .wk-progress span { transition: none; } .wk-plan-detail.is-on { animation: none; } }
.wk-track { scroll-padding-inline: 5%; }
@media (max-width: 900px) { .wk-track { scroll-padding-inline: 20px; } }
html body .wk-mgmt + .wk-sec { padding-top: 84px !important; }
@media (max-width: 900px) { html body .wk-mgmt + .wk-sec { padding-top: 52px !important; } }

/* ── Polish: pointer light, 3D tilt, staggered entrances, drawn contours, sliding marker ── */
/* a soft light that follows the pointer (--gx/--gy set by the script) */
.wk-glow { position: relative; isolation: isolate; }
.wk-glow::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 50%), rgba(241, 196, 15, .14), transparent 60%); transition: opacity 300ms cubic-bezier(.4, 0, .2, 1); }
.wk-card.wk-glow::after, .wk-regions.wk-glow::after { background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 50%), rgba(26, 71, 42, .10), transparent 60%); }
.wk-mgmt.wk-glow::after { z-index: 0; background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 50%), rgba(143, 201, 163, .10), transparent 60%); }
.wk-glow.is-lit::after { opacity: 1; }
.wk-mgmt > * { position: relative; z-index: 1; }
/* figures: a faint contour texture inside the green cards */
.wk-fig { overflow: hidden; background-image: repeating-radial-gradient(circle at 110% 120%, transparent 0 22px, rgba(143, 201, 163, .07) 22px 23px); }
/* 3D tilt toward the pointer (--rx/--ry set by the script) */
.wk-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 250ms cubic-bezier(.16, 1, .3, 1), background-color 150ms; will-change: transform; }
.wk-card.wk-tilt:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
/* entrances: cards rise in turn as their section is seen */
@media (prefers-reduced-motion: no-preference) {
    .wk-rise { opacity: 0; translate: 0 24px; transition: opacity 600ms cubic-bezier(.16, 1, .3, 1), translate 700ms cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--d, 0) * 70ms); }
    .wk-rise.is-in { opacity: 1; translate: 0 0; }
    .wk-dist .wk-seg { transform-origin: left; scale: 0 1; transition: scale 900ms cubic-bezier(.16, 1, .3, 1), opacity 150ms, transform 150ms; }
    .wk-dist .wk-seg:nth-child(2) { transition-delay: 120ms; } .wk-dist .wk-seg:nth-child(3) { transition-delay: 240ms; } .wk-dist .wk-seg:nth-child(4) { transition-delay: 360ms; }
    .wk-dist.is-in .wk-seg { scale: 1 1; }
    .wk-slide.is-on .wk-slide-icon { animation: wkFloat 3.2s ease-in-out infinite; }
    @keyframes wkFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
    .wk-mgmt.is-in .wk-contours path { stroke-dashoffset: 0; }
}
/* drawn contour lines in the green band */
.wk-contours { position: absolute !important; z-index: 0 !important; right: 0; bottom: 0; width: min(70vw, 900px); height: 100%; color: rgba(143, 201, 163, .14); pointer-events: none; }
.wk-contours path { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 2.4s cubic-bezier(.16, 1, .3, 1); }
.wk-contours path:nth-child(2) { transition-delay: .15s; } .wk-contours path:nth-child(3) { transition-delay: .3s; } .wk-contours path:nth-child(4) { transition-delay: .45s; } .wk-contours path:nth-child(5) { transition-delay: .6s; } .wk-contours path:nth-child(6) { transition-delay: .75s; }
@media (prefers-reduced-motion: reduce) { .wk-contours path { stroke-dashoffset: 0; transition: none; } }
/* slider cards lean with the drag (--lean set by the script) */
.wk-track.is-drag .wk-slide { transform: skewX(var(--lean, 0deg)) scale(.96); }
.wk-track.is-drag .wk-slide.is-on { transform: skewX(var(--lean, 0deg)); }
/* plans: a large faint letter behind the text, and a gold marker sliding along the list */
.wk-plan-panel { overflow: hidden; isolation: isolate; }
.wk-plan-detail.is-on::before { content: attr(data-mark); position: absolute; z-index: -1; right: 20px; bottom: -40px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 260px; font-weight: 800;
    line-height: 1; color: rgba(26, 71, 42, .06); pointer-events: none; }
.wk-plan-list { position: relative; }
.wk-plan-marker { position: absolute; left: -12px; top: 0; width: 4px; height: var(--mh, 0); border-radius: 4px; background: #f1c40f; transform: translateY(var(--my, 0));
    transition: transform 350ms cubic-bezier(.16, 1, .3, 1), height 350ms cubic-bezier(.16, 1, .3, 1); }
.wk-plan.is-on { transform: none; }
@media (max-width: 900px) { .wk-plan-marker { display: none; } .wk-contours { width: 100%; } }
.wk-slide { background: #0f3522; }
.wk-slide.is-on { background: #154229; }
.wk-plan-detail.is-on::before { bottom: -96px; right: 12px; }
.wk-slide { opacity: 1; }
.wk-slide:not(.is-on) > * { opacity: .5; transition: opacity 400ms cubic-bezier(.4, 0, .2, 1); }

/* The Lungs of Shillong: one compact full-width green card on the golden split, title, line and the four forests
   numbered on the left; the salient features in two columns on the right */
html body .wk-sec.wk-lungs { padding-top: 52px !important; }
.wk-lungs-card { display: grid; grid-template-columns: 38.2fr 61.8fr; gap: 52px; padding: 52px; border-radius: 8px; background: #0a2e1a; color: #fff; }
.wk-lungs-card .wk-h2 { color: #f1c40f; }
.wk-lungs-intro { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.wk-lungs-text { margin: 0; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .78); }
.wk-lungs-forests { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wk-lungs-forests li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; background: rgba(255, 255, 255, .05);
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1); }
.wk-lungs-forests li:hover { background: rgba(255, 255, 255, .1); transform: translateY(-2px); }
.wk-lungs-no { font: 700 13px/1 Roboto, sans-serif; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .45); transition: color 150ms; }
.wk-lungs-forests li:hover .wk-lungs-no { color: #f1c40f; }
.wk-lungs-forests li > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk-lungs-forests strong { font-size: 15px; font-weight: 700; }
.wk-lungs-forests small { font-size: 12px; color: rgba(255, 255, 255, .6); }
.wk-lungs-features { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
/* the salient features: a lead line level with the title, then one tile per feature, two to a row; tiles in a row are
   equal height with the tick and text centred, and an odd last feature spans the full width */
.wk-lungs-lead { margin: 0; padding: 8px 0 12px; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.wk-lungs-lead strong { font-weight: 600; }
.wk-lungs-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wk-lungs-checks li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 8px; background: rgba(255, 255, 255, .05);
    font-size: 15px; font-weight: 600; line-height: 1.45; transition: background-color 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1); }
.wk-lungs-checks li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.wk-lungs-checks svg { flex: none; padding: 3px; box-sizing: content-box; border-radius: 50%; color: #f1c40f; background: rgba(241, 196, 15, .12);
    transition: background-color 150ms, color 150ms; }
.wk-lungs-checks li:hover { background: rgba(255, 255, 255, .1); transform: translateY(-2px); }
.wk-lungs-checks li:hover svg { background: #f1c40f; color: #0a2e1a; }
@media (max-width: 1100px) { .wk-lungs-card { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 640px) { .wk-lungs-card { padding: 32px 20px; } .wk-lungs-checks { grid-template-columns: minmax(0, 1fr); } }

/* Strategic Management Directives as strips: one row of slim sand strips; the open one widens to white and shows its
   text, the closed ones keep their number and an upright title. Phones: stacked rows, the open row shows its text. */
.wk-strips { display: flex; gap: 8px; height: 340px; margin-top: 32px; }
.wk-strip { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; border-radius: 8px;
    background: #f2ede1; box-shadow: inset 0 0 0 1px transparent; cursor: pointer; outline: none; overflow: hidden;
    transition: flex-grow 600ms cubic-bezier(.16, 1, .3, 1), background-color 150ms cubic-bezier(.4, 0, .2, 1), box-shadow 150ms; }
.wk-strip:hover { background: #ece5d3; }
.wk-strip.is-on { flex-grow: 4; padding: 32px; background: #fff; box-shadow: inset 0 0 0 1px rgba(10, 46, 26, .08); cursor: default; }
.wk-strip:focus-visible { box-shadow: 0 0 0 2px #f9f6ef, 0 0 0 4px #1a472a; }
.wk-strip::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: #f1c40f; transition: width 600ms cubic-bezier(.16, 1, .3, 1); }
.wk-strip.is-on::before { width: 100%; }
.wk-strip-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wk-strip-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(26, 71, 42, .1); color: #1a472a; font-size: 17px;
    transition: background-color 150ms, color 150ms, transform 300ms cubic-bezier(.34, 1.56, .64, 1); }
.wk-strip-icon svg { width: 20px; height: 20px; }
.wk-strip:not(.is-on):hover .wk-strip-icon { transform: translateY(-3px); }
.wk-strip.is-on .wk-strip-icon { background: #f1c40f; color: #0a2e1a; }
.wk-strip-no { font: 700 13px/1 Roboto, sans-serif; font-variant-numeric: tabular-nums; color: rgba(10, 46, 26, .45); }
.wk-strip.is-on .wk-strip-no { font-size: 15px; color: #0a2e1a; }
.wk-strip-title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; color: #0a2e1a; }
.wk-strip-text { display: none; margin: 12px 0 0; max-width: 44ch; font-size: 16px; line-height: 1.6; color: #1f2a22; }
.wk-strip.is-on .wk-strip-title { font-size: clamp(22px, 2vw, 28px); letter-spacing: -.02em; }
.wk-strip.is-on .wk-strip-copy { animation: wkStripIn 500ms 120ms cubic-bezier(.16, 1, .3, 1) both; }
.wk-strip.is-on .wk-strip-text { display: block; }
@keyframes wkStripIn { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@media (min-width: 901px) {
    .wk-strip:not(.is-on) .wk-strip-top { flex-direction: column; align-items: flex-start; }
    .wk-strip:not(.is-on) .wk-strip-title { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
}
@media (max-width: 900px) {
    .wk-strips { flex-direction: column; height: auto; }
    .wk-strip, .wk-strip.is-on { flex: none; padding: 20px; }
    .wk-strip { flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 20px; }
    .wk-strip-top { flex-direction: column; align-items: center; }
    .wk-strip-no { display: none; }
    .wk-strip-copy { align-self: center; }
    .wk-strip.is-on .wk-strip-copy { align-self: flex-start; }
    .wk-strip::before { height: 100%; width: 3px; transition: none; }
    .wk-strip:not(.is-on)::before { width: 0; }
    .wk-strip.is-on::before { width: 3px; }
}
@media (prefers-reduced-motion: reduce) { .wk-strip, .wk-strip::before { transition: none; } .wk-strip.is-on .wk-strip-copy { animation: none; } }
/* the open strip in deep green instead of white: white title and text, gold icon and top line as before */
.wk-strip.is-on { background: #0a2e1a; box-shadow: none; }
.wk-strip.is-on .wk-strip-no { color: #f1c40f; }
.wk-strip.is-on .wk-strip-title { color: #fff; }
.wk-strip.is-on .wk-strip-text { color: rgba(255, 255, 255, .82); }
.wk-strip.is-on:focus-visible { box-shadow: 0 0 0 2px #f9f6ef, 0 0 0 4px #1a472a; }

/* Section headings kept to the site's smaller size (up to 36px) */
html body .wp-section-title { font-size: clamp(28px, 2.5vw, 38px); }