/*
Theme Name: Kingdom Leaders Learning
Theme URI: https://kingdomleaders.example.com
Author: Kingdom Leaders Learning
Author URI: https://kingdomleaders.example.com
Description: A warm, Christ-centered theme for equipping and training leaders. Integrates with the LearnPress LMS plugin for courses, plus scripture cards and a fully editable homepage built to match the Kingdom Leaders Learning brand.
Version: 1.10.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kingdom-leaders
Tags: education, custom-post-type, custom-menu, featured-images, full-width-template, translation-ready
*/

/* =========================================================================
   1. Design tokens
   ========================================================================= */
:root {
    --kl-navy:        #1c2c4c;
    --kl-navy-deep:   #16233d;
    --kl-navy-soft:   #25375b;
    --kl-gold:        #d3a23e;
    --kl-gold-dark:   #c1912f;
    --kl-green:       #3f6b4f;
    --kl-cream:       #faf7f1;
    --kl-cream-2:     #f3eee4;
    --kl-sand:        #efe7d6;
    --kl-ink:         #2a2f38;
    --kl-muted:       #5f6671;
    --kl-line:        #e3ddd0;
    --kl-white:       #ffffff;

    --kl-font-serif:  "Playfair Display", Georgia, "Times New Roman", serif;
    --kl-font-sans:   "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

    --kl-gold-tint:   #f6ecd8;
    --kl-radius:      14px;
    --kl-radius-sm:   9px;
    --kl-shadow:      0 18px 45px -22px rgba(28, 44, 76, .35);
    --kl-shadow-sm:   0 10px 30px -18px rgba(28, 44, 76, .4);
    --kl-container:   1320px;
    --kl-ease:        .25s cubic-bezier(.4, 0, .2, 1);
}

/* =========================================================================
   2. Base / reset
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--kl-font-sans);
    font-size: 17px;
    line-height: 1.7;
    color: var(--kl-ink);
    background: var(--kl-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: var(--kl-font-serif);
    color: var(--kl-navy);
    line-height: 1.15;
    margin: 0 0 .5em;
    font-weight: 700;
}

p { margin: 0 0 1.1em; }

a { color: var(--kl-navy); text-decoration: none; transition: color var(--kl-ease); }
a:hover { color: var(--kl-gold-dark); }

img { max-width: 100%; height: auto; display: block; }

ul { margin: 0; padding: 0; }

.kl-container {
    width: 100%;
    max-width: var(--kl-container);
    margin: 0 auto;
    padding: 0 24px;
}

.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px; height: 1px;
    overflow: hidden;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--kl-navy);
    color: #fff;
    padding: 10px 18px;
    z-index: 9999;
    border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible {
    outline: 2px solid var(--kl-gold-dark);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================================
   3. Buttons
   ========================================================================= */
.kl-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--kl-font-sans);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    padding: 15px 24px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform var(--kl-ease), background var(--kl-ease), color var(--kl-ease), box-shadow var(--kl-ease);
    text-align: center;
}
.kl-btn:hover { transform: translateY(-2px); }

.kl-btn--navy   { background: var(--kl-navy); color: #fff; }
.kl-btn--navy:hover { background: var(--kl-navy-soft); color: #fff; box-shadow: var(--kl-shadow-sm); }

.kl-btn--gold   { background: var(--kl-gold); color: var(--kl-navy); }
.kl-btn--gold:hover { background: var(--kl-gold-dark); color: var(--kl-navy); box-shadow: 0 14px 30px -16px rgba(211,162,62,.9); }

.kl-btn--ghost  { background: transparent; color: var(--kl-navy); border-color: var(--kl-line); }
.kl-btn--ghost:hover { border-color: var(--kl-navy); color: var(--kl-navy); }

.kl-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.kl-btn--outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }

.kl-btn .kl-play {
    display: grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--kl-navy);
    color: #fff;
}
.kl-btn--ghost .kl-play svg { fill: #fff; }

/* =========================================================================
   4. Header
   ========================================================================= */
.site-header {
    background: var(--kl-cream);
    border-bottom: 1px solid rgba(227,221,208,.7);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: box-shadow var(--kl-ease);
}
.site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(28, 44, 76, .35); }
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.site-brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.site-brand__mark { width: 46px; height: 46px; flex-shrink: 0; }
.site-brand__text { line-height: 1.05; }
.site-brand__name {
    font-family: var(--kl-font-serif);
    font-size: 23px;
    font-weight: 800;
    color: var(--kl-navy);
    letter-spacing: .2px;
}
.site-brand__tag {
    display: block;
    font-size: 11px;
    color: var(--kl-muted);
    margin-top: 5px;
    letter-spacing: .3px;
    line-height: 1.35;
    /* One line, or not at all — wrapped across three lines it reads as a
       paragraph rather than a tagline. Hidden below 1280px, where the nav
       needs the room (see the responsive section). */
    white-space: nowrap;
}

.main-nav { margin-left: auto; }
.main-nav ul { list-style: none; display: flex; gap: 30px; align-items: center; }
.main-nav a {
    /* inline-block keeps the dropdown caret and the current-page underline on
       the link's own line — as inline boxes they spill onto a second line. */
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: var(--kl-ink);
    position: relative;
    padding-bottom: 4px;
}
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a,
.main-nav a:hover { color: var(--kl-gold-dark); }
.main-nav .current-menu-item > a::after,
.main-nav .current-menu-ancestor > a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--kl-gold);
    border-radius: 2px;
}

/* Dropdown submenu (matches WordPress menu markup: .menu-item-has-children > .sub-menu) */
.main-nav .menu > li { position: relative; }
.main-nav .menu-item-has-children > a { padding-right: 17px; }
.main-nav .menu-item-has-children > a::before {
    content: "";
    position: absolute;
    right: 1px; top: 42%;
    width: 7px; height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}
.main-nav .sub-menu {
    display: none;
    position: absolute; top: 100%; left: -18px; z-index: 60;
    min-width: 230px; margin-top: 14px; padding: 10px;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff;
    border: 1px solid var(--kl-line);
    border-radius: 12px;
    box-shadow: var(--kl-shadow);
}
/* Invisible bridge so the dropdown survives the pointer crossing the gap below the link. */
.main-nav .sub-menu::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -15px; height: 15px;
}
.main-nav .menu > li:hover > .sub-menu,
.main-nav .menu > li:focus-within > .sub-menu { display: flex; }
.main-nav .sub-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 15px;
}
.main-nav .sub-menu a:hover { background: var(--kl-gold-tint); }
.main-nav .sub-menu .current-menu-item > a { background: var(--kl-gold-tint); }
.main-nav .sub-menu .current-menu-item > a::after { display: none; }

.header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header-search {
    background: none; border: none; cursor: pointer;
    color: var(--kl-navy); padding: 6px; display: grid; place-items: center;
}
.header-search:hover { color: var(--kl-gold-dark); }

/* Logged out this is the single Sign In button; logged in it becomes My
   Account. One destination, one control. */
.btn-account {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; font-size: 15px; font-weight: 700;
    background: var(--kl-gold); color: var(--kl-navy);
    border-radius: 7px;
    transition: background var(--kl-ease), transform var(--kl-ease);
}
.btn-account:hover { background: var(--kl-gold-dark); color: var(--kl-navy); transform: translateY(-1px); }
.btn-account .kl-ico { flex-shrink: 0; }

.btn-logout {
    padding: 10px 18px; font-size: 15px;
    border: 1.5px solid var(--kl-line); border-radius: 7px;
    color: var(--kl-navy); font-weight: 600; background: #fff;
    transition: border-color var(--kl-ease);
}
.btn-logout:hover { border-color: var(--kl-navy); }

.nav-toggle {
    display: none;
    margin-left: auto;
    background: none; border: none; cursor: pointer;
    width: 44px; height: 44px;
    flex-direction: column; justify-content: center; gap: 5px;
}
.nav-toggle span { display: block; height: 2.5px; width: 24px; background: var(--kl-navy); border-radius: 2px; transition: var(--kl-ease); }

.header-searchbar { padding-top: 4px; padding-bottom: 18px; }
.header-searchbar .kl-search-form { max-width: 620px; margin: 0 auto; }
.kl-search-form { display: flex; gap: 10px; }
.kl-search-field {
    flex: 1; min-width: 0;
    padding: 13px 16px;
    border: 1.5px solid var(--kl-line);
    border-radius: 8px;
    font-size: 16px;
    font-family: var(--kl-font-sans);
    background: var(--kl-white);
    transition: border-color var(--kl-ease);
}
.kl-search-field:focus { outline: none; border-color: var(--kl-navy); }

/* Login / Sign Up inside the mobile menu (hidden on desktop). */
.main-nav__auth { display: none; }

/* =========================================================================
   5. Hero
   ========================================================================= */
.hero {
    background: linear-gradient(180deg, var(--kl-cream) 0%, var(--kl-cream-2) 100%);
    padding: 72px 0 0;
    overflow: hidden;
}
.hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
/* Capped so the headline keeps breaking one sentence per line even though the
   copy column is now as wide as the arch. */
.hero__copy { max-width: 540px; }
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--kl-gold-dark);
    margin-bottom: 18px;
}
.hero__eyebrow::before {
    content: "";
    width: 30px; height: 2px;
    background: var(--kl-gold);
    border-radius: 2px;
}
.hero__title {
    font-size: clamp(34px, 4.4vw, 52px);
    line-height: 1.12;
    margin-bottom: 22px;
    letter-spacing: -.5px;
}
.hero__lede { font-size: 18px; color: var(--kl-muted); max-width: 540px; }

.hero__points { list-style: none; margin: 30px 0 36px; display: grid; gap: 14px; }
.hero__points li { display: flex; align-items: center; gap: 13px; font-weight: 600; color: var(--kl-navy); }
.hero__points .kl-ico {
    flex-shrink: 0;
    width: 38px; height: 38px; padding: 8px;
    color: var(--kl-gold-dark);
    background: var(--kl-gold-tint);
    border-radius: 50%;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; padding-bottom: 64px; }

/* Bottom-anchored so the arch stays flush with the base of the hero band
   instead of stretching to whatever height the copy column happens to be. */
.hero__media { position: relative; align-self: end; }
/* Signature arch frame — a chapel window onto the page. */
.hero__image {
    border-radius: 250px 250px 0 0;
    overflow: hidden;
    height: clamp(430px, 44vw, 600px);
    background: linear-gradient(180deg, var(--kl-navy-soft), var(--kl-navy-deep));
    background-size: cover;
    background-position: center;
    box-shadow: var(--kl-shadow);
    position: relative;
    border: 6px solid var(--kl-white);
}
.hero__scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hero__scripture {
    position: absolute;
    right: 0;
    bottom: 40px;
    max-width: 310px;
    background: rgba(250,247,241,.97);
    backdrop-filter: blur(4px);
    border-radius: 12px;
    padding: 22px 24px 20px;
    box-shadow: var(--kl-shadow);
    border-left: 3px solid var(--kl-gold);
}
.hero__scripture blockquote { margin: 0; }
.hero__scripture .kl-quote { color: var(--kl-gold); font-size: 34px; font-family: var(--kl-font-serif); line-height: .6; display: block; margin-bottom: 8px; }
.hero__scripture p { font-family: var(--kl-font-serif); font-size: 16.5px; line-height: 1.55; color: var(--kl-navy); margin-bottom: 12px; font-style: italic; }
.hero__scripture cite { color: var(--kl-green); font-weight: 700; font-style: normal; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }

/* =========================================================================
   6. Section primitives
   ========================================================================= */
.section { padding: 78px 0; }
.section--tight { padding: 56px 0; }
.section__head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section__head h2 { font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 12px; }
.section__head p { color: var(--kl-muted); font-size: 18px; margin: 0; }

.eyebrow {
    display: inline-block;
    font-family: var(--kl-font-sans);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-size: 13px;
    font-weight: 700;
    color: var(--kl-gold-dark);
    margin-bottom: 8px;
}

/* =========================================================================
   6b. Vision & Mission, Our Philosophy (homepage)
   ========================================================================= */
.vision { background: var(--kl-cream-2); }

/* A diptych: one object split down the middle, rather than two cards floating
   in a grid. The vision half is set on navy and the mission half on cream, so
   the end we're working toward and the work itself read as two faces of the
   same statement. The gold seam is the join — the one flourish in the band. */
.diptych {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--kl-radius);
    overflow: hidden;
    box-shadow: var(--kl-shadow);
}
.diptych__panel { padding: clamp(32px, 4vw, 52px); }
.diptych__panel--vision {
    background: linear-gradient(160deg, var(--kl-navy-soft), var(--kl-navy-deep));
    color: var(--kl-cream);
}
.diptych__panel--mission {
    background: var(--kl-white);
    border-left: 3px solid var(--kl-gold);
}

.diptych__label {
    font-family: var(--kl-font-sans);
    font-size: 12px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    margin: 0 0 4px;
}
.diptych__panel--vision .diptych__label { color: var(--kl-gold); }
.diptych__panel--mission .diptych__label { color: var(--kl-navy); }

.diptych__gloss { font-size: 13.5px; margin: 0 0 24px; }
.diptych__panel--vision .diptych__gloss { color: rgba(250, 247, 241, .72); }
.diptych__panel--mission .diptych__gloss { color: var(--kl-muted); }

.diptych__statement {
    margin: 0;
    font-family: var(--kl-font-serif);
    font-size: clamp(18px, 1.7vw, 22px);
    font-weight: 600;
    line-height: 1.6;
}
/* The vision is the claim, the mission is how we answer it — so the vision is
   set larger. It also takes up the slack left by the shorter statement, which
   would otherwise pool as empty navy at the foot of the panel. */
.diptych__panel--vision .diptych__statement { font-size: clamp(20px, 2.1vw, 27px); }
.diptych__panel--mission .diptych__statement { color: var(--kl-navy); }

.home-philosophy__body { max-width: 780px; margin: 0 auto; text-align: center; }
.home-philosophy__body p { color: var(--kl-muted); font-size: 17px; }
.home-philosophy__more {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
    font-weight: 700; font-size: 15px; color: var(--kl-gold-dark);
}
.home-philosophy__more .kl-ico { transition: transform var(--kl-ease); }
.home-philosophy__more:hover .kl-ico { transform: translateX(3px); }

/* =========================================================================
   7. Pillar cards (About page values grid)
   ========================================================================= */
.pillar {
    background: var(--kl-white);
    border: 1px solid var(--kl-line);
    border-radius: var(--kl-radius);
    padding: 30px 20px 26px;
    text-align: center;
    transition: transform var(--kl-ease), box-shadow var(--kl-ease), border-color var(--kl-ease);
}
.pillar:hover {
    transform: translateY(-4px);
    box-shadow: var(--kl-shadow-sm);
    border-color: rgba(211,162,62,.55);
}
/* Arched icon tile — echoes the hero's chapel-window frame. */
.pillar__icon {
    width: 62px; height: 70px;
    margin: 0 auto 18px;
    display: grid; place-items: center;
    background: var(--kl-gold-tint);
    border-radius: 31px 31px 9px 9px;
    color: var(--kl-navy);
    transition: background var(--kl-ease), color var(--kl-ease);
}
.pillar__icon .kl-ico { width: 28px; height: 28px; }
.pillar:hover .pillar__icon { background: var(--kl-navy); color: var(--kl-gold); }
.pillar h3 { font-size: 19px; margin-bottom: 8px; }
.pillar p { font-size: 14.5px; color: var(--kl-muted); margin: 0; line-height: 1.55; }

/* =========================================================================
   8. Featured courses
   ========================================================================= */
.courses { background: var(--kl-cream); }
.courses__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 38px; gap: 20px;
}
.courses__head .eyebrow { margin-bottom: 10px; }
.courses__head h2 { font-size: clamp(28px, 3.4vw, 38px); margin: 0; }
.courses__sub { color: var(--kl-muted); font-size: 16.5px; margin: 10px 0 0; max-width: 520px; }
.courses__viewall { font-weight: 700; color: var(--kl-navy); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding-bottom: 4px; }
.courses__viewall:hover { gap: 12px; color: var(--kl-gold-dark); }

.courses__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.course-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--kl-line);
    border-radius: var(--kl-radius);
    overflow: hidden;
    box-shadow: var(--kl-shadow-sm);
    display: flex; flex-direction: column;
    transition: transform var(--kl-ease), box-shadow var(--kl-ease), border-color var(--kl-ease);
}
.course-card:hover,
.course-card:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--kl-shadow);
    border-color: rgba(211,162,62,.55);
}
.course-card__media {
    display: grid; place-items: center;
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(150deg, var(--kl-navy-soft), var(--kl-green));
    background-size: cover; background-position: center;
    transition: transform var(--kl-ease);
}
.course-card:hover .course-card__media { transform: scale(1.04); }
/* Fallback art rotation for courses without a featured image. */
.course-card:nth-child(4n+2) .course-card__media { background-image: linear-gradient(150deg, var(--kl-green), var(--kl-navy-deep)); }
.course-card:nth-child(4n+3) .course-card__media { background-image: linear-gradient(150deg, var(--kl-navy), #6f5733); }
.course-card:nth-child(4n)   .course-card__media { background-image: linear-gradient(150deg, var(--kl-navy-deep), var(--kl-navy-soft)); }
.course-card__mark { color: rgba(255,255,255,.28); }
.course-card__mark .kl-ico { width: 46px; height: 46px; }
.course-card__badge {
    position: absolute; top: 12px; left: 12px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    padding: 5px 13px; border-radius: 999px;
    background: var(--kl-green); color: #fff;
}
.course-card__badge--new { background: var(--kl-navy); color: var(--kl-gold); }
.course-card__badge--popular { background: var(--kl-green); }
.course-card__body { padding: 20px 20px 0; flex: 1; }
.course-card__body h3 { font-size: 20px; line-height: 1.25; margin-bottom: 10px; }
.course-card__body h3 a::after { content: ""; position: absolute; inset: 0; }
.course-card__body h3 a:hover { color: var(--kl-gold-dark); }
.course-card__body p { font-size: 14.5px; color: var(--kl-muted); margin: 0; }
.course-card__meta {
    display: flex; gap: 18px;
    padding: 16px 20px;
    margin-top: 16px;
    border-top: 1px solid var(--kl-line);
    font-size: 13.5px; color: var(--kl-muted);
}
.course-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.course-card__meta svg { opacity: .7; }

/* =========================================================================
   9. Learning paths band
   ========================================================================= */
.paths { background: var(--kl-cream); padding-bottom: 78px; }
.paths__inner {
    background: var(--kl-cream-2);
    border-radius: var(--kl-radius);
    padding: 34px 38px;
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: 34px;
    align-items: center;
}
.paths__icon {
    width: 84px; height: 84px;
    border: 2px dashed var(--kl-green);
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--kl-green);
}
.paths__intro h3 { font-size: 22px; margin-bottom: 6px; }
.paths__intro p { font-size: 15px; color: var(--kl-muted); margin: 0 0 10px; max-width: 340px; }
.paths__intro a { font-weight: 700; color: var(--kl-green); display: inline-flex; gap: 7px; align-items: center; }
.paths__intro a:hover { gap: 11px; }
.paths__list { display: flex; gap: 30px; }
.path-item { text-align: center; color: var(--kl-navy); }
.path-item__ico { width: 40px; height: 40px; margin: 0 auto 9px; color: var(--kl-green); }
.path-item span { font-size: 13.5px; font-weight: 600; line-height: 1.25; display: block; }

/* =========================================================================
   10. Testimonial + stats
   ========================================================================= */
.proof { background: var(--kl-cream); padding-bottom: 30px; }
.proof__inner {
    background:
        radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px) 0 0 / 22px 22px,
        var(--kl-navy);
    border-radius: 18px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 300px 1fr 320px;
    color: #fff;
}
.proof__image {
    min-height: 260px;
    background-size: cover; background-position: center;
}
/* Decorative panel shown when no testimonial photo is set. */
.proof__image--decor {
    display: grid; place-items: center;
    background: linear-gradient(165deg, var(--kl-navy-soft), var(--kl-navy-deep));
    border-right: 1px solid rgba(255,255,255,.08);
}
.proof__mark {
    font-family: var(--kl-font-serif);
    font-size: 150px;
    line-height: .4;
    padding-top: 60px;
    color: rgba(211,162,62,.55);
}
.proof__quote { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.proof__quote blockquote { margin: 0; }
.proof__quote .kl-quote { color: var(--kl-gold); font-family: var(--kl-font-serif); font-size: 46px; line-height: .5; display: block; margin-bottom: 16px; }
.proof__quote p { font-size: 21px; line-height: 1.5; color: #f2efe9; font-family: var(--kl-font-serif); margin-bottom: 18px; }
.proof__quote cite { font-style: normal; font-weight: 700; color: var(--kl-gold); font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; font-family: var(--kl-font-sans); }
.proof__stats {
    padding: 40px 38px;
    display: flex; flex-direction: column; justify-content: center; gap: 26px;
    border-left: 1px solid rgba(255,255,255,.12);
}
.stat { display: flex; align-items: center; gap: 16px; }
.stat__ico {
    width: 52px; height: 52px; flex-shrink: 0;
    background: rgba(211,162,62,.14);
    border: 1px solid rgba(211,162,62,.45);
    color: var(--kl-gold);
    border-radius: 50%; display: grid; place-items: center;
}
.stat__num { font-family: var(--kl-font-serif); font-size: 30px; font-weight: 800; line-height: 1; color: #fff; }
.stat__label { font-size: 14px; color: rgba(255,255,255,.75); }

/* =========================================================================
   11. CTA band
   ========================================================================= */
/* Closing CTA — full-bleed finale under an arch of light. */
.cta {
    background:
        radial-gradient(ellipse 60% 55% at 50% 0%, rgba(211,162,62,.22), transparent 70%),
        var(--kl-navy-deep);
    margin-top: 48px;
    padding: 92px 0 96px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta__inner {
    position: relative;
    max-width: 620px;
    margin: 0 auto;
    padding: 56px 32px 0;
}
.cta__arch {
    position: absolute;
    inset: 0 auto auto 50%;
    transform: translateX(-50%);
    width: min(560px, 92%);
    height: 100%;
    border: 1px solid rgba(211,162,62,.35);
    border-bottom: none;
    border-radius: 280px 280px 0 0;
    pointer-events: none;
}
.cta__ico { width: 54px; height: 54px; margin: 0 auto 22px; color: var(--kl-gold); }
.cta__text h2 { font-size: clamp(28px, 3.6vw, 40px); color: #fff; margin-bottom: 14px; }
.cta__text p { margin: 0 auto 30px; color: rgba(255,255,255,.8); font-size: 18px; max-width: 460px; }
.cta__action .kl-btn { font-size: 17px; padding: 17px 34px; }
.cta__note { display: block; font-size: 13.5px; color: rgba(255,255,255,.6); margin-top: 14px; letter-spacing: .3px; }

/* =========================================================================
   12. Footer
   ========================================================================= */
.site-footer { background: var(--kl-navy-deep); color: rgba(255,255,255,.78); padding: 60px 0 0; border-top: 1px solid rgba(255,255,255,.08); }
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: var(--kl-gold); }
.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: 40px;
    padding-bottom: 44px;
}
.footer__brand .site-brand__name { color: #fff; }
.footer__brand p { margin-top: 18px; font-size: 15px; max-width: 280px; }
.footer__social { display: flex; gap: 12px; margin-top: 20px; }
.footer__social a {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.08);
    display: grid; place-items: center; color: #fff;
    transition: background var(--kl-ease), transform var(--kl-ease);
}
.footer__social a:hover { background: var(--kl-gold); color: var(--kl-navy); transform: translateY(-2px); }
.footer__col h4 { color: #fff; font-family: var(--kl-font-sans); font-size: 16px; font-weight: 700; letter-spacing: .4px; margin-bottom: 18px; }
.footer__col ul { list-style: none; display: grid; gap: 11px; }
.footer__col li a { font-size: 15px; }
.footer__news p { font-size: 15px; margin-bottom: 16px; }
.footer-widget { margin-bottom: 20px; font-size: 15px; }
.footer-widget h1, .footer-widget h2, .footer-widget h3, .footer-widget h5, .footer-widget h6 {
    color: #fff;
    font-family: var(--kl-font-sans);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .4px;
    margin: 0 0 14px;
    line-height: 1.4;
}
.footer-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer__form { display: flex; gap: 8px; }
.footer__form input[type=email] {
    flex: 1; min-width: 0;
    padding: 12px 14px; border-radius: 7px; border: none;
    background: rgba(255,255,255,.94); font-size: 14px; font-family: var(--kl-font-sans);
}
.footer__form button {
    padding: 12px 18px; border: none; border-radius: 7px;
    background: var(--kl-gold); color: var(--kl-navy); font-weight: 700; cursor: pointer; font-size: 14px;
    transition: background var(--kl-ease);
}
.footer__form button:hover { background: var(--kl-gold-dark); }
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 22px 0;
    display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    font-size: 13.5px; color: rgba(255,255,255,.6);
}
.footer__bottom .verse { font-style: italic; }

/* =========================================================================
   13. Generic content (single / page / archive)
   ========================================================================= */
.page-hero { background: linear-gradient(180deg, var(--kl-cream), var(--kl-cream-2)); padding: 60px 0 48px; text-align: center; }
.page-hero h1 { font-size: clamp(32px, 4vw, 48px); }
.page-hero p { color: var(--kl-muted); font-size: 18px; max-width: 640px; margin: 0 auto; }

.content-area { padding: 64px 0; }
.entry { max-width: 760px; margin: 0 auto; }
.entry h1, .entry h2, .entry h3 { margin-top: 1.4em; }
.entry img { border-radius: var(--kl-radius); margin: 1.5em 0; }
.entry blockquote {
    border-left: 4px solid var(--kl-gold);
    margin: 1.6em 0; padding: 6px 22px;
    font-family: var(--kl-font-serif); font-size: 20px; color: var(--kl-navy);
}
.entry a { color: var(--kl-gold-dark); text-decoration: underline; }
.entry ul, .entry ol { padding-left: 1.3em; margin: 1em 0; }
.entry li + li { margin-top: .5em; }
.entry hr { border: none; border-top: 1px solid var(--kl-line); margin: 2.4em 0; }

.archive-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
    padding: 56px 0;
}

/* --- Free Articles --------------------------------------------------- */
.articles-intro { padding-bottom: 0; }
.articles-intro .entry { margin: 0 auto; }

.articles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.article-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--kl-line);
    border-radius: var(--kl-radius); overflow: hidden;
    box-shadow: var(--kl-shadow-sm);
    transition: transform var(--kl-ease), box-shadow var(--kl-ease), border-color var(--kl-ease);
}
.article-card:hover,
.article-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--kl-shadow);
    border-color: var(--kl-gold);
}
.article-card__media {
    display: block; height: 180px;
    background: linear-gradient(160deg, var(--kl-navy-soft), var(--kl-navy-deep));
    background-size: cover; background-position: center;
}
.article-card__body { display: flex; flex-direction: column; flex: 1; padding: 26px 24px 24px; }

.article-card__meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--kl-muted); margin-bottom: 12px;
}
.article-card__cat {
    color: var(--kl-gold-dark);
    padding-left: 10px; border-left: 1px solid var(--kl-line);
}
.article-card__title { font-size: 20px; line-height: 1.3; margin: 0 0 10px; }
.article-card__title a { color: var(--kl-navy); }
.article-card:hover .article-card__title a { color: var(--kl-gold-dark); }
.article-card__excerpt { font-size: 14.5px; color: var(--kl-muted); line-height: 1.6; margin: 0 0 18px; }
.article-card__more {
    margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
    font-weight: 700; font-size: 14.5px; color: var(--kl-gold-dark);
}
.article-card__more .kl-ico { transition: transform var(--kl-ease); }
.article-card:hover .article-card__more .kl-ico { transform: translateX(3px); }

.articles-empty {
    max-width: 520px; margin: 0 auto; text-align: center;
    padding: 56px 32px;
    background: #fff; border: 1px dashed var(--kl-line);
    border-radius: var(--kl-radius);
}
.articles-empty__ico {
    width: 72px; height: 80px; margin: 0 auto 22px;
    display: grid; place-items: center;
    background: var(--kl-gold-tint); color: var(--kl-navy);
    border-radius: 36px 36px 9px 9px;
}
.articles-empty h2 { font-size: clamp(22px, 2.4vw, 27px); margin-bottom: 12px; }
.articles-empty p { color: var(--kl-muted); margin-bottom: 26px; }

.pagination { display: flex; gap: 10px; justify-content: center; padding: 20px 0 60px; }
.pagination .page-numbers {
    padding: 10px 16px; border-radius: 8px; background: #fff;
    box-shadow: var(--kl-shadow-sm); font-weight: 600;
}
.pagination .current { background: var(--kl-navy); color: #fff; }

.error-404 { text-align: center; padding: 100px 0; }
.error-404 h1 { font-size: 80px; color: var(--kl-gold); }

/* =========================================================================
   13b. About page
   ========================================================================= */
.about-hero .eyebrow { justify-content: center; margin: 0 auto 14px; }
.about-hero h1 { margin-bottom: 16px; }
.about-hero__cta { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

.about-mission__grid {
    display: grid; grid-template-columns: 1.15fr .85fr;
    gap: 56px; align-items: center;
}
/* One measure for the whole column, so the heading and the paragraphs under
   it line up rather than the heading running wider. */
.about-mission__copy { max-width: 620px; }
.about-mission__copy .eyebrow { margin-bottom: 12px; }
.about-mission__copy h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 18px; }
.about-mission__copy p { color: var(--kl-muted); font-size: 17px; line-height: 1.7; margin-bottom: 16px; }
.about-mission__list { list-style: none; margin-top: 26px; display: grid; gap: 12px; }
.about-mission__list li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--kl-navy); }
.about-mission__list .kl-ico { color: var(--kl-green); flex-shrink: 0; }

.about-mission__card {
    position: relative;
    background: var(--kl-navy);
    color: var(--kl-cream);
    border-radius: var(--kl-radius);
    padding: 46px 40px 40px;
    box-shadow: var(--kl-shadow);
    overflow: hidden;
}
.about-mission__card .kl-quote {
    font-family: var(--kl-font-serif);
    font-size: 120px; line-height: 1;
    color: var(--kl-gold);
    position: absolute; top: 4px; left: 24px; opacity: .5;
}
.about-mission__card blockquote {
    position: relative;
    font-family: var(--kl-font-serif);
    font-size: 22px; line-height: 1.5;
    margin: 22px 0 18px;
}
.about-mission__card figcaption { color: var(--kl-gold); font-weight: 700; letter-spacing: .3px; }

.about-values { background: var(--kl-cream-2); }
.about-values__grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px;
}

.about-stats { background: var(--kl-navy); color: var(--kl-cream); padding: 60px 0; }
.about-stats__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center;
}
.about-stat { padding: 8px 12px; }
.about-stat + .about-stat { border-left: 1px solid rgba(255,255,255,.14); }
.about-stat__num {
    font-family: var(--kl-font-serif);
    font-size: clamp(34px, 4vw, 46px); font-weight: 800;
    color: var(--kl-gold); line-height: 1;
}
.about-stat__label { margin-top: 10px; font-size: 15px; color: rgba(250,247,241,.82); }

.about-story .entry { margin-top: 8px; }

/* =========================================================================
   13c. Contact page
   ========================================================================= */
.contact-grid {
    display: grid; grid-template-columns: .9fr 1.1fr;
    gap: 48px; align-items: start;
}
.contact-info h2,
.contact-form-wrap h2 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 24px; }

.contact-info__item { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.contact-info__ico {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--kl-gold-tint); color: var(--kl-gold-dark);
}
.contact-info__label {
    font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--kl-muted); margin-bottom: 3px;
}
.contact-info__item a { font-weight: 600; }
.contact-info__item a:hover { color: var(--kl-gold-dark); }

.contact-info__social { margin: 28px 0; }
.contact-info__links { display: flex; gap: 10px; margin-top: 10px; }
.contact-info__links a {
    width: 40px; height: 40px; border-radius: 10px;
    display: grid; place-items: center;
    background: #fff; color: var(--kl-navy);
    border: 1px solid var(--kl-line);
    transition: color var(--kl-ease), border-color var(--kl-ease), transform var(--kl-ease);
}
.contact-info__links a:hover { color: var(--kl-gold-dark); border-color: var(--kl-gold); transform: translateY(-2px); }

.contact-info__verse {
    margin: 30px 0 0; padding: 22px 24px;
    border-left: 4px solid var(--kl-gold);
    background: var(--kl-cream-2); border-radius: 0 var(--kl-radius-sm) var(--kl-radius-sm) 0;
}
.contact-info__verse blockquote { font-family: var(--kl-font-serif); font-size: 18px; color: var(--kl-navy); line-height: 1.5; }
.contact-info__verse figcaption { margin-top: 8px; color: var(--kl-gold-dark); font-weight: 700; }

.contact-form-wrap {
    background: #fff; border: 1px solid var(--kl-line);
    border-radius: var(--kl-radius); padding: 40px;
    box-shadow: var(--kl-shadow-sm);
}
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-field { display: block; margin-bottom: 18px; }
.contact-field > span { display: block; font-weight: 600; font-size: 14.5px; color: var(--kl-navy); margin-bottom: 7px; }
.contact-field em { color: var(--kl-gold-dark); font-style: normal; }
.contact-field input,
.contact-field textarea {
    width: 100%; font-family: inherit; font-size: 15px; color: var(--kl-ink);
    padding: 12px 14px; border: 1.5px solid var(--kl-line); border-radius: var(--kl-radius-sm);
    background: var(--kl-cream); transition: border-color var(--kl-ease), box-shadow var(--kl-ease);
}
.contact-field input:focus,
.contact-field textarea:focus {
    outline: none; border-color: var(--kl-gold);
    box-shadow: 0 0 0 3px rgba(211, 162, 62, .18); background: #fff;
}
.contact-field textarea { resize: vertical; min-height: 130px; }
.contact-form .kl-btn { width: 100%; justify-content: center; margin-top: 6px; padding: 15px; }

.kl-notice--success {
    background: #e8f3ec;
    border: 1px solid var(--kl-green);
    color: #2c5540;
}

/* =========================================================================
   13d. Topic cards & callout banner
   ========================================================================= */
.resources__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.resource-card {
    display: flex; flex-direction: column; align-items: flex-start;
    background: #fff; border: 1px solid var(--kl-line);
    border-radius: var(--kl-radius); padding: 30px 28px;
    box-shadow: var(--kl-shadow-sm);
    transition: transform var(--kl-ease), box-shadow var(--kl-ease), border-color var(--kl-ease);
    color: var(--kl-ink);
}
.resource-card:hover,
.resource-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--kl-shadow);
    border-color: var(--kl-gold);
    color: var(--kl-ink);
}
.resource-card__icon {
    width: 54px; height: 54px; border-radius: 14px;
    display: grid; place-items: center; margin-bottom: 18px;
    background: var(--kl-gold-tint); color: var(--kl-gold-dark);
    transition: background var(--kl-ease), color var(--kl-ease);
}
.resource-card:hover .resource-card__icon { background: var(--kl-navy); color: var(--kl-gold); }
.resource-card h3 { font-size: 19px; margin-bottom: 8px; color: var(--kl-navy); }
.resource-card p { font-size: 14.5px; color: var(--kl-muted); line-height: 1.55; margin: 0 0 18px; }
.resource-card__more {
    margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
    font-weight: 700; font-size: 14.5px; color: var(--kl-gold-dark);
}
.resource-card__more .kl-ico { transition: transform var(--kl-ease); }
.resource-card:hover .resource-card__more .kl-ico { transform: translateX(3px); }

.callout { padding: 20px 0 8px; }
.callout__inner {
    display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center;
    background: var(--kl-navy); color: var(--kl-cream);
    border-radius: var(--kl-radius); padding: 38px 44px;
    box-shadow: var(--kl-shadow);
}
.callout__ico {
    width: 84px; height: 84px; border-radius: 20px; flex-shrink: 0;
    display: grid; place-items: center;
    background: rgba(211, 162, 62, .16); color: var(--kl-gold);
}
.callout__text h2 { color: var(--kl-cream); font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 8px; }
.callout__text p { color: rgba(250, 247, 241, .82); font-size: 16px; margin: 0; max-width: 60ch; }
.callout__action { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }

/* =========================================================================
   13e. Curriculum — homepage band + Curriculum page
   ========================================================================= */
.schools { background: var(--kl-cream-2); }
/* The five schools are a sequence, so they're set as a numbered pathway rather
   than a card grid — the numerals sit on a continuous gold spine that runs the
   length of the band. Full-width rows also give the long school names room to
   breathe, which five 230px columns never did. */
.pathway {
    --pw-node: 44px;
    list-style: none; margin: 0; padding: 0; position: relative;
}
/* The spine, stopped short of the first and last node. */
.pathway::before {
    content: "";
    position: absolute; z-index: 0;
    left: calc(var(--pw-node) / 2 - 1px);
    top: 46px; bottom: 46px; width: 2px;
    /* Even weight the whole way down — a gradient fading toward School 5 would
       read as the pathway petering out, which is the opposite of the point. */
    background: rgba(211, 162, 62, .45);
}
.pathway__item + .pathway__item { border-top: 1px solid var(--kl-line); }

.pathway__link {
    display: grid;
    grid-template-columns: var(--pw-node) minmax(220px, 1fr) 1.45fr auto;
    align-items: center;
    gap: 0 30px;
    padding: 24px 4px;
    color: var(--kl-ink);
}
.pathway__link:focus-visible {
    outline: 2px solid var(--kl-gold);
    outline-offset: 4px;
    border-radius: var(--kl-radius-sm);
}

.pathway__node {
    position: relative; z-index: 1;
    width: var(--pw-node); height: var(--pw-node);
    border-radius: 50%;
    display: grid; place-items: center;
    /* Matches the band behind it, so the spine reads as passing underneath. */
    background: var(--kl-cream-2);
    border: 2px solid var(--kl-gold);
    font-family: var(--kl-font-serif); font-weight: 700; font-size: 18px;
    color: var(--kl-navy);
    transition: background var(--kl-ease), color var(--kl-ease), border-color var(--kl-ease);
}
.pathway__link:hover .pathway__node,
.pathway__link:focus-visible .pathway__node {
    background: var(--kl-navy); border-color: var(--kl-navy); color: var(--kl-gold);
}

.pathway__name {
    font-size: 20px; line-height: 1.25; margin: 0 0 3px;
    color: var(--kl-navy);
    transition: color var(--kl-ease);
}
.pathway__link:hover .pathway__name { color: var(--kl-gold-dark); }
.pathway__motto { font-family: var(--kl-font-serif); font-size: 15px; color: var(--kl-green); }

.pathway__purpose { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--kl-muted); }

.pathway__meta {
    display: flex; align-items: center; gap: 12px; white-space: nowrap;
    font-size: 13px; font-weight: 700; color: var(--kl-navy);
}
.pathway__meta .kl-ico { color: var(--kl-gold-dark); transition: transform var(--kl-ease); }
.pathway__link:hover .pathway__meta .kl-ico { transform: translateX(4px); }

.schools__foot {
    margin-top: 36px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.schools__note { font-size: 14.5px; color: var(--kl-muted); }

/* Sticky-ish jump bar + headline figures on the Curriculum page. */
.curriculum-nav { background: var(--kl-navy); color: var(--kl-cream); padding: 34px 0; }
.curriculum-nav__facts {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 48px;
    padding-bottom: 26px; margin-bottom: 26px;
    border-bottom: 1px solid rgba(255,255,255,.14);
}
.curriculum-fact { text-align: center; }
.curriculum-fact__num {
    display: block; font-family: var(--kl-font-serif); font-weight: 800;
    font-size: clamp(28px, 3.4vw, 40px); line-height: 1; color: var(--kl-gold);
}
.curriculum-fact__label { display: block; margin-top: 8px; font-size: 14.5px; color: rgba(250,247,241,.82); }

.curriculum-nav__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.curriculum-nav__links a {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 16px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.2);
    color: var(--kl-cream); font-size: 14.5px; font-weight: 600;
    transition: background var(--kl-ease), border-color var(--kl-ease), color var(--kl-ease);
}
.curriculum-nav__links a:hover,
.curriculum-nav__links a:focus-visible {
    background: var(--kl-gold); border-color: var(--kl-gold); color: var(--kl-navy);
}
.curriculum-nav__num {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: rgba(211,162,62,.22); color: var(--kl-gold);
    font-size: 12px; font-weight: 700;
}
.curriculum-nav__links a:hover .curriculum-nav__num,
.curriculum-nav__links a:focus-visible .curriculum-nav__num { background: var(--kl-navy); color: var(--kl-gold); }

.school:nth-child(even) { background: var(--kl-cream-2); }

.school__head { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; }
.school__ico {
    width: 68px; height: 76px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--kl-gold-tint); color: var(--kl-navy);
    border-radius: 34px 34px 9px 9px;
}
.school__intro h2 { font-size: clamp(26px, 3.2vw, 36px); margin: 4px 0 6px; }
.school__intro h2 a { color: inherit; }
.school__intro h2 a:hover { color: var(--kl-gold-dark); }
.school__motto { font-family: var(--kl-font-serif); font-size: 19px; color: var(--kl-green); margin: 0; }

.school__purpose {
    border-left: 4px solid var(--kl-gold);
    background: #fff; border-radius: 0 var(--kl-radius-sm) var(--kl-radius-sm) 0;
    padding: 24px 28px; margin-bottom: 36px;
    box-shadow: var(--kl-shadow-sm);
    /* Cap the card, not the paragraph inside it — otherwise the text stops
       well short of the card's own right edge. */
    max-width: 900px;
}
.school__purpose h3 {
    font-family: var(--kl-font-sans); font-size: 12.5px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--kl-gold-dark); margin-bottom: 8px;
}
.school__purpose p { margin: 0; color: var(--kl-muted); font-size: 16px; }

.school__label {
    font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    font-family: var(--kl-font-sans); color: var(--kl-muted); margin-bottom: 18px;
}

/* Curriculum hub: a school's courses listed compactly (full topics live on
   the school's own page). */
.school__units {
    list-style: none; margin: 0 0 28px; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 22px;
}
.school__units li {
    display: flex; align-items: center; gap: 13px;
    background: #fff; border: 1px solid var(--kl-line);
    border-radius: var(--kl-radius-sm); padding: 13px 18px;
}
.school__unit-num {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--kl-navy); color: var(--kl-gold);
    font-size: 13px; font-weight: 700;
}
.school__unit-title { font-weight: 600; color: var(--kl-navy); font-size: 15.5px; }
.school__unit-count {
    margin-left: auto; flex-shrink: 0;
    font-size: 13px; color: var(--kl-muted); white-space: nowrap;
}

.school__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.school__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.unit-card {
    background: #fff; border: 1px solid var(--kl-line);
    border-radius: var(--kl-radius); padding: 26px 24px;
    box-shadow: var(--kl-shadow-sm);
}
.unit-card__head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 16px; }
.unit-card__num {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--kl-navy); color: var(--kl-gold);
    font-weight: 700; font-size: 14.5px;
}
.unit-card h3,
.unit-card h4 {
    font-family: var(--kl-font-serif); font-size: 18px; line-height: 1.3;
    color: var(--kl-navy); margin: 3px 0 0;
}
.unit-card__topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.unit-card__topics li {
    position: relative; padding-left: 20px;
    font-size: 14.5px; color: var(--kl-muted); line-height: 1.5;
}
.unit-card__topics li::before {
    content: ""; position: absolute; left: 3px; top: .62em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--kl-gold);
}

.curriculum-notes { padding-top: 0; }

/* A single school's page */
.school-hero { padding-top: 52px; }
.school-hero__ico {
    width: 68px; height: 76px; margin: 0 auto 20px;
    display: grid; place-items: center;
    background: var(--kl-gold-tint); color: var(--kl-navy);
    border-radius: 34px 34px 9px 9px;
}
.school-hero__motto {
    font-family: var(--kl-font-serif); font-size: clamp(19px, 2.2vw, 24px);
    color: var(--kl-green); margin: 12px auto 0;
}
.school-hero__meta {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    margin-top: 24px;
}
.school-hero__meta span {
    font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
    color: var(--kl-navy); background: var(--kl-white);
    border: 1px solid var(--kl-line); border-radius: 999px; padding: 7px 16px;
}

.school-purpose-section { padding-bottom: 0; }
.school-purpose-section .school__purpose { margin-bottom: 0; }
.school__purpose h2 {
    font-family: var(--kl-font-sans); font-size: 12.5px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--kl-gold-dark); margin-bottom: 8px;
}
.school-units .section__head { margin-bottom: 40px; }
.school-notes { padding-top: 0; }
.school-cta { padding-bottom: 8px; }

.school-pager { padding: 40px 0 64px; }
.school-pager__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.school-pager__spacer { flex: 1 1 0; }
.school-pager__link {
    flex: 1 1 0; display: flex; flex-direction: column; gap: 3px;
    padding: 16px 20px; border-radius: var(--kl-radius);
    background: #fff; border: 1px solid var(--kl-line);
    box-shadow: var(--kl-shadow-sm); color: var(--kl-ink);
    transition: border-color var(--kl-ease), transform var(--kl-ease);
}
.school-pager__link:hover { border-color: var(--kl-gold); transform: translateY(-2px); color: var(--kl-ink); }
.school-pager__link--next { text-align: right; }
.school-pager__label {
    font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--kl-gold-dark);
}
.school-pager__name { font-family: var(--kl-font-serif); font-size: 17px; color: var(--kl-navy); }
.school-pager__all {
    flex-shrink: 0; font-weight: 700; font-size: 14.5px; color: var(--kl-navy);
    border-bottom: 2px solid var(--kl-gold); padding-bottom: 2px;
}
.school-pager__all:hover { color: var(--kl-gold-dark); }

/* About page — Our Philosophy */
.about-philosophy__body { max-width: 780px; margin: 0 auto; text-align: center; }
.about-philosophy__body p { color: var(--kl-muted); font-size: 17px; }
.about-philosophy__creed {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
    margin: 32px 0;
}
.about-philosophy__creed span {
    font-family: var(--kl-font-serif); font-size: clamp(18px, 2.1vw, 23px);
    color: var(--kl-navy); background: var(--kl-gold-tint);
    border-radius: var(--kl-radius-sm); padding: 12px 22px;
}
.about-philosophy__close { font-weight: 600; color: var(--kl-navy); }

.about-curriculum { padding: 8px 0 44px; }

/* =========================================================================
   13f. Help Center & FAQ
   ========================================================================= */
.help-search { max-width: 460px; margin: 28px auto 0; }

.help-quick { padding-top: 0; }
.help-quick__list {
    list-style: none; margin: 0 auto; padding: 0;
    max-width: 820px; display: grid; gap: 10px;
}
.help-quick__list a {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: #fff; border: 1px solid var(--kl-line);
    border-radius: var(--kl-radius-sm); padding: 16px 22px;
    font-weight: 600; color: var(--kl-navy);
    transition: border-color var(--kl-ease), transform var(--kl-ease);
}
.help-quick__list a:hover { border-color: var(--kl-gold); transform: translateX(3px); color: var(--kl-navy); }
.help-quick__list .kl-ico { flex-shrink: 0; color: var(--kl-gold-dark); }
.help-quick__more { text-align: center; margin-top: 28px; }

.faq-wrap { max-width: 840px; }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group__head {
    display: flex; align-items: center; gap: 13px;
    font-size: clamp(21px, 2.4vw, 26px); margin-bottom: 20px;
}
.faq-group__ico {
    width: 42px; height: 46px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--kl-gold-tint); color: var(--kl-navy);
    border-radius: 21px 21px 7px 7px;
}
.faq-list { display: grid; gap: 12px; }

.faq-item {
    background: #fff; border: 1px solid var(--kl-line);
    border-radius: var(--kl-radius-sm);
    transition: border-color var(--kl-ease), box-shadow var(--kl-ease);
}
.faq-item[open] { border-color: var(--kl-gold); box-shadow: var(--kl-shadow-sm); }
.faq-item summary {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 18px 22px; cursor: pointer;
    font-weight: 700; font-size: 16.5px; color: var(--kl-navy);
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Chevron built from borders so it needs no icon markup inside <summary>. */
.faq-item summary::after {
    content: ""; flex-shrink: 0; margin-left: auto; margin-top: 6px;
    width: 9px; height: 9px;
    border-right: 2px solid var(--kl-gold-dark);
    border-bottom: 2px solid var(--kl-gold-dark);
    transform: rotate(45deg);
    transition: transform var(--kl-ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 10px; }
.faq-item summary:hover { color: var(--kl-gold-dark); }
.faq-item summary:focus-visible { outline: 2px solid var(--kl-gold); outline-offset: -2px; border-radius: var(--kl-radius-sm); }
.faq-item__body { padding: 0 22px 20px; }
.faq-item__body p { margin: 0; color: var(--kl-muted); font-size: 15.5px; }

.faq-notes { margin-top: 48px; }
/* These two pages end on the banner — every other page that uses it has a
   further section underneath supplying the gap. Without this the navy card
   sits 8px above the navy footer and the two read as one block. */
.faq-cta, .help-cta { padding-bottom: 78px; }

/* Ghost button on a dark band (the FAQ / Help CTA rows). */
.kl-btn--ghost-light {
    background: transparent; color: var(--kl-cream);
    border: 1.5px solid rgba(250, 247, 241, .45);
}
.kl-btn--ghost-light:hover { background: rgba(250, 247, 241, .1); border-color: var(--kl-cream); color: var(--kl-cream); }

/* =========================================================================
   14. Responsive
   ========================================================================= */
@media (max-width: 1080px) {
    .courses__grid { grid-template-columns: repeat(2, 1fr); }
    .proof__inner { grid-template-columns: 1fr; }
    .proof__image { min-height: 200px; }
    .proof__stats { flex-direction: row; flex-wrap: wrap; border-left: none; border-top: 1px solid rgba(255,255,255,.12); }
    .stat { flex: 1 1 40%; }
    .paths__inner { grid-template-columns: 1fr; text-align: center; }
    .paths__icon { margin: 0 auto; }
    .paths__intro p { margin-inline: auto; }
    .paths__list { flex-wrap: wrap; justify-content: center; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .about-mission__grid { grid-template-columns: 1fr; gap: 40px; }
    /* Stacked, the seam runs across the join instead of down it. */
    .diptych { grid-template-columns: 1fr; }
    .diptych__panel--mission { border-left: none; border-top: 3px solid var(--kl-gold); }
    .about-values__grid { grid-template-columns: repeat(3, 1fr); }
    .school__grid { grid-template-columns: repeat(2, 1fr); }
    .articles__grid { grid-template-columns: repeat(2, 1fr); }
    /* Purpose drops to its own line once the four-column row gets tight. Every
       cell is placed explicitly — with only the purpose positioned, auto-flow
       pushed the course count into the node column. */
    .pathway__link { grid-template-columns: var(--pw-node) 1fr auto; gap: 0 22px; }
    .pathway__node    { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
    .pathway__head    { grid-column: 2; grid-row: 1; }
    .pathway__meta    { grid-column: 3; grid-row: 1; align-self: center; }
    .pathway__purpose { grid-column: 2 / -1; grid-row: 2; margin-top: 10px; }
    .school__units { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .resources__grid { grid-template-columns: repeat(2, 1fr); }
    .callout__inner { grid-template-columns: 1fr; text-align: center; gap: 20px; justify-items: center; }
    .callout__text p { margin-inline: auto; }
}

/* Drop the tagline and tighten the nav first, then collapse to the hamburger.
   Measured with the single account button: the full row fits to 960px and
   overflows at 920, so 1000 leaves a margin for font-rendering differences. */
@media (max-width: 1280px) {
    .site-brand__tag { display: none; }
    .main-nav ul { gap: 20px; }
    .main-nav a { font-size: 15px; }
}

@media (max-width: 1000px) {
    .main-nav, .header-actions .btn-account, .header-actions .btn-logout { display: none; }
    .nav-toggle { display: flex; margin-left: 0; }
    /* With .main-nav hidden, nothing else carries margin-left:auto, so push the
       search + hamburger group to the right edge of the header. */
    .header-actions { margin-left: auto; gap: 8px; }
    .site-header__inner { gap: 12px; }
    /* The brand must be allowed to shrink once the nav collapses — while it
       held flex-shrink:0 it pushed the search and hamburger off-screen, which
       left the menu unreachable on phones narrower than ~430px. */
    .site-brand { flex-shrink: 1; min-width: 0; gap: 10px; }
    .site-brand__text { min-width: 0; line-height: 1.15; }
    .site-brand__mark { width: 40px; height: 40px; }
    .site-brand__name { font-size: 20px; }
    .main-nav.is-open {
        display: block;
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--kl-cream);
        box-shadow: var(--kl-shadow); padding: 16px 24px 22px;
        border-top: 1px solid var(--kl-line);
    }
    .main-nav.is-open ul { flex-direction: column; gap: 4px; align-items: stretch; }
    .main-nav.is-open .menu a { display: block; padding: 12px 4px; border-bottom: 1px solid var(--kl-line); }
    /* Submenus render inline (indented) in the mobile panel — no hover needed. */
    .main-nav.is-open .sub-menu {
        display: block;
        position: static;
        min-width: 0; margin: 0; padding: 0 0 0 18px;
        background: none; border: none; border-radius: 0; box-shadow: none;
    }
    .main-nav.is-open .sub-menu::before { display: none; }
    .main-nav.is-open .sub-menu a { border-radius: 0; font-size: 15px; }
    .main-nav.is-open .menu-item-has-children > a::before { right: 6px; top: 50%; }
    .main-nav.is-open .main-nav__auth { display: flex; gap: 10px; padding-top: 18px; }
    .main-nav.is-open .main-nav__auth .kl-btn { flex: 1; justify-content: center; padding: 13px 18px; }
    .hero__grid { grid-template-columns: 1fr; }
    .hero__copy { max-width: none; }
    .hero__media { margin-top: 10px; }
    .hero__image { height: auto; border-radius: 170px 170px 0 0; min-height: min(92vw, 480px); }
    .hero__cta { padding-bottom: 40px; }
}

@media (max-width: 680px) {
    body { font-size: 16px; }
    .section { padding: 56px 0; }
    .courses__grid { grid-template-columns: 1fr; }
    .courses__head { flex-direction: column; align-items: flex-start; }
    .proof__quote { padding: 36px 28px; }
    .proof__quote p { font-size: 18px; }
    .proof__stats { flex-direction: column; flex-wrap: nowrap; }
    .proof__stats .stat { flex: 0 0 auto; }
    .cta { padding: 72px 0 76px; }
    .cta__inner { padding-top: 44px; }
    .footer__grid { grid-template-columns: 1fr; }
    .archive-grid { grid-template-columns: 1fr; }
    .articles__grid { grid-template-columns: 1fr; }
    .hero__scripture { position: static; max-width: none; margin-top: -46px; margin-inline: 16px; }
    .about-values__grid { grid-template-columns: 1fr; }
    .school__grid { grid-template-columns: 1fr; }
    .school__head { flex-direction: column; gap: 16px; }
    .school__actions .kl-btn { width: 100%; justify-content: center; }
    .pathway { --pw-node: 38px; }
    .pathway__link { grid-template-columns: var(--pw-node) 1fr; gap: 0 16px; padding: 20px 2px; }
    .pathway__node    { grid-column: 1; grid-row: 1; align-self: start; }
    .pathway__head    { grid-column: 2; grid-row: 1; }
    .pathway__purpose { grid-column: 2; grid-row: 2; margin-top: 10px; }
    .pathway__meta    { grid-column: 2; grid-row: 3; margin-top: 12px; }
    .pathway__name { font-size: 18px; }
    .curriculum-nav__facts { gap: 18px 28px; }
    .school-pager__inner { flex-direction: column; align-items: stretch; }
    .school-pager__link--next { text-align: left; }
    .school-pager__spacer { display: none; }
    .school-pager__all { align-self: center; }
    .about-stats__grid { grid-template-columns: 1fr 1fr; gap: 28px 12px; }
    .about-stat:nth-child(odd) { border-left: none; }
    .about-stat:nth-child(3), .about-stat:nth-child(4) { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); }
    .contact-form__row { grid-template-columns: 1fr; gap: 0; }
    .contact-form-wrap { padding: 28px 22px; }
    .resources__grid { grid-template-columns: 1fr; }
    .callout__inner { padding: 32px 24px; }
}

/* Phones proper (iPhone SE 375, iPhone 12–15 390, most Android 360). */
@media (max-width: 480px) {
    .kl-container { padding: 0 18px; }

    /* Shrink the lockup further so the search and hamburger always have room. */
    .site-brand { gap: 9px; }
    .site-brand__mark { width: 34px; height: 34px; }
    .site-brand__name { font-size: 17px; }
    .header-actions { gap: 2px; }
    .nav-toggle { width: 40px; }

    .callout__action { width: 100%; }
    .callout__action .kl-btn { flex: 1; justify-content: center; }
}

/* =========================================================================
   15. Scroll reveal
   ========================================================================= */
.kl-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
    transition-delay: var(--kl-reveal-delay, 0s);
}
.kl-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .kl-reveal { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
 * LMS — course curriculum, lesson list, notices
 * ---------------------------------------------------------------------- */

/* Align LearnPress content width with the theme container (.kl-container).
 * LearnPress injects its own --lp-container-max-width (1290px / 1rem padding),
 * which rendered the course archive, breadcrumb and single-course pages wider
 * than the site header and footer. Point these at the theme's own container
 * tokens so the LMS lines up with the rest of the theme. */
:root {
    --lp-container-max-width: var(--kl-container); /* 1180px */
    --lp-cotainer-padding: 24px;                   /* matches .kl-container padding; LearnPress's own (misspelled) var */
    --lp-primary-color: var(--kl-gold);            /* brand gold instead of LearnPress' default amber */
    --lp-secondary-color: var(--kl-navy);          /* brand navy instead of LearnPress' default purple (course-item learning bar) */
}

/* LearnPress pages (profile, checkout, …) render through page.php inside
 * `.entry`, whose 760px reading width is right for articles but squeezes the
 * LMS into a narrow column. Let LearnPress content use the full theme
 * container instead. The theme class is "…-learning" (not "learnpress"), so
 * this only matches genuine LearnPress body classes. */
body[class*="learnpress"] .entry {
    max-width: none;
}

/* Guest profile page: LearnPress lays the Login and Register cards in a flex
 * row with no gap, so they touch in the middle. column-gap only affects the
 * side-by-side desktop layout; the stacked mobile view keeps its own spacing. */
.lp-user-profile.guest .lp-content-area {
    column-gap: 32px;
}

/* Brand the LearnPress form/CTA buttons like the theme's gold buttons:
 * navy text on gold, deepening to gold-dark on hover (better contrast than
 * LearnPress' default white-on-amber). The `body` prefix raises specificity
 * so it beats LearnPress' own `color:#fff`, whose stylesheet loads after this. */
body .learn-press-form-login button[type="submit"],
body .learn-press-form-register button[type="submit"],
body .lp-button,
body #checkout-payment #checkout-order-action button {
    background: var(--kl-gold);
    color: var(--kl-navy);
    font-weight: 700;
    transition: background var(--kl-ease);
}
body .learn-press-form-login button[type="submit"]:hover,
body .learn-press-form-register button[type="submit"]:hover,
body .lp-button:hover,
body #checkout-payment #checkout-order-action button:hover {
    background: var(--kl-gold-dark);
    color: var(--kl-navy);
    opacity: 1;
}

/* Course player: the primary actions — complete lesson, start quiz, submit
 * quiz — default to LearnPress' faint ghost `.learnpress-page .lp-button`
 * (or a white submit button). Promote them to solid gold CTAs. The
 * `body[class*="learnpress"]` prefix out-specifies those rules so the brand
 * style wins even though LearnPress' CSS loads after the theme's. */
body[class*="learnpress"] .lp-btn-complete-item,
body[class*="learnpress"] .lp-button.start,
body[class*="learnpress"] .quiz-status .submit-quiz button {
    background: var(--kl-gold);
    border-color: var(--kl-gold);
    color: var(--kl-navy);
    font-weight: 700;
}
body[class*="learnpress"] .lp-btn-complete-item:hover,
body[class*="learnpress"] .lp-button.start:hover,
body[class*="learnpress"] .quiz-status .submit-quiz button:hover {
    background: var(--kl-gold-dark);
    border-color: var(--kl-gold-dark);
    color: var(--kl-navy);
}

.kl-notice {
    border-radius: var(--kl-radius-sm);
    padding: 14px 18px;
    margin: 0 0 1.5em;
    font-weight: 600;
}
.kl-notice--locked {
    background: #faf1dd;
    border: 1px solid var(--kl-gold);
    color: var(--kl-navy);
}

.kl-curriculum { margin-top: 2.5em; }
.kl-curriculum__title {
    font-size: 1.6rem;
    margin: 0 0 .8em;
    padding-bottom: .4em;
    border-bottom: 2px solid var(--kl-line);
}

.kl-module { margin-bottom: 1.4em; }
.kl-module__title {
    display: flex;
    align-items: center;
    gap: .55em;
    font-size: 1.15rem;
    margin: 0 0 .5em;
}
.kl-module__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7em;
    height: 1.7em;
    border-radius: 50%;
    background: var(--kl-navy);
    color: #fff;
    font-size: .8rem;
    font-family: var(--kl-font-sans);
    font-weight: 700;
}

.kl-lesson-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--kl-line);
    border-radius: var(--kl-radius-sm);
    overflow: hidden;
    background: var(--kl-white);
}
.kl-lesson {
    display: flex;
    align-items: center;
    gap: .7em;
    padding: 12px 16px;
    border-top: 1px solid var(--kl-line);
    color: var(--kl-ink);
}
.kl-lesson:first-child { border-top: 0; }
.kl-lesson a {
    display: flex;
    align-items: center;
    gap: .7em;
    width: 100%;
    color: var(--kl-ink);
}
.kl-lesson a:hover { color: var(--kl-gold-dark); }
.kl-lesson__icon {
    flex: 0 0 auto;
    font-size: .85rem;
    color: var(--kl-gold-dark);
}
.kl-lesson--locked { color: var(--kl-muted); }
.kl-lesson--locked .kl-lesson__icon { color: var(--kl-muted); }
.kl-lesson__title { flex: 1 1 auto; }
.kl-lesson__tag {
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--kl-green);
    background: rgba(63,107,79,.1);
    padding: 2px 8px;
    border-radius: 999px;
}

/* -------------------------------------------------------------------------
 * LMS — lesson player, progress bar, dashboard
 * ---------------------------------------------------------------------- */
.kl-lesson-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 60px;
    align-items: start;
}

/* Course nav sidebar */
.kl-course-nav {
    position: sticky;
    top: 24px;
    background: var(--kl-white);
    border: 1px solid var(--kl-line);
    border-radius: var(--kl-radius);
    padding: 22px 20px;
    box-shadow: var(--kl-shadow-sm);
}
.kl-course-nav__title { font-size: 1.15rem; margin: 0 0 14px; line-height: 1.3; }
.kl-course-nav__module {
    display: flex; align-items: center; gap: .5em;
    font-size: .95rem; margin: 18px 0 8px;
}
.kl-course-nav__list { list-style: none; margin: 0 0 4px; padding: 0; }
.kl-nav-lesson a {
    display: flex; align-items: center; gap: .6em;
    padding: 8px 10px; border-radius: var(--kl-radius-sm);
    color: var(--kl-ink); font-size: .92rem;
}
.kl-nav-lesson a:hover { background: var(--kl-cream-2); color: var(--kl-navy); }
.kl-nav-lesson__icon { flex: 0 0 auto; color: var(--kl-muted); font-size: .8rem; }
.kl-nav-lesson.is-done .kl-nav-lesson__icon { color: var(--kl-green); }
.kl-nav-lesson.is-current a { background: var(--kl-navy); color: #fff; }
.kl-nav-lesson.is-current .kl-nav-lesson__icon { color: var(--kl-gold); }
.kl-nav-lesson__title { flex: 1 1 auto; }

/* Progress bar */
.kl-progress { margin: 6px 0 10px; }
.kl-progress__track {
    height: 8px; border-radius: 999px;
    background: var(--kl-sand); overflow: hidden;
}
.kl-progress__fill {
    height: 100%; border-radius: 999px;
    background: var(--kl-gold);
    transition: width var(--kl-ease);
}
.kl-progress__label { font-size: .8rem; color: var(--kl-muted); margin-top: 6px; }

/* Lesson main column */
.kl-lesson-main { min-width: 0; }
.kl-lesson-head__course {
    display: inline-block; margin-bottom: 8px;
    font-weight: 600; color: var(--kl-muted);
}
.kl-lesson-head h1 { font-size: 2rem; margin: 0 0 20px; }

.kl-lesson-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 16px; margin-top: 32px; padding-top: 24px;
    border-top: 1px solid var(--kl-line);
}
.kl-complete-form { display: flex; align-items: center; gap: 12px; margin: 0; }
.kl-done-badge { color: var(--kl-green); font-weight: 700; }
.kl-lesson-nav { display: flex; gap: 18px; }
.kl-lesson-nav a { font-weight: 600; }

/* Dashboard */
.kl-dashboard__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 26px;
}
.kl-dash-card {
    background: var(--kl-white);
    border: 1px solid var(--kl-line);
    border-radius: var(--kl-radius);
    overflow: hidden;
    box-shadow: var(--kl-shadow-sm);
    display: flex; flex-direction: column;
}
.kl-dash-card__thumb img { display: block; width: 100%; height: auto; }
.kl-dash-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.kl-dash-card__title { font-size: 1.2rem; margin: 0 0 6px; }
.kl-dash-card__done { color: var(--kl-green); font-weight: 700; margin: 2px 0 0; }
.kl-dash-card__cta { align-self: flex-start; margin-top: 12px; }

@media (max-width: 900px) {
    .kl-lesson-layout { grid-template-columns: 1fr; }
    .kl-course-nav { position: static; order: 2; }
    .kl-lesson-main { order: 1; }
}

/* -------------------------------------------------------------------------
 * LMS — quizzes
 * ---------------------------------------------------------------------- */
.kl-quiz { margin-top: 1.5em; }
.kl-quiz-result {
    border-radius: var(--kl-radius-sm);
    padding: 12px 16px;
    margin: 0 0 18px;
    font-weight: 600;
}
.kl-quiz-result.is-pass { background: rgba(63,107,79,.12); border: 1px solid var(--kl-green); color: var(--kl-green); }
.kl-quiz-result.is-fail { background: #faf1dd; border: 1px solid var(--kl-gold); color: var(--kl-navy); }

.kl-quiz-q {
    border: 1px solid var(--kl-line);
    border-radius: var(--kl-radius-sm);
    padding: 16px 18px;
    margin: 0 0 14px;
    background: var(--kl-white);
}
.kl-quiz-q legend {
    font-weight: 700;
    color: var(--kl-navy);
    padding: 0 6px;
}
.kl-quiz-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: var(--kl-radius-sm);
    cursor: pointer;
}
.kl-quiz-opt:hover { background: var(--kl-cream-2); }
.kl-quiz-opt input { flex: 0 0 auto; }
.kl-quiz-form > .kl-btn { margin-top: 8px; }

/* -------------------------------------------------------------------------
 * LMS — certificates
 * ---------------------------------------------------------------------- */
.kl-course-complete {
    margin-top: 1.2em;
    padding: 12px 16px;
    border-radius: var(--kl-radius-sm);
    background: rgba(63,107,79,.1);
    border: 1px solid var(--kl-green);
    color: var(--kl-green);
    font-weight: 600;
}
.kl-course-complete a { color: var(--kl-green); text-decoration: underline; }

.kl-cert-link {
    display: inline-block;
    margin-top: 8px;
    font-weight: 700;
    color: var(--kl-gold-dark);
}

.kl-cert-page { padding-top: 40px; padding-bottom: 60px; }

.kl-cert {
    background: var(--kl-white);
    border: 2px solid var(--kl-gold);
    border-radius: var(--kl-radius);
    padding: 10px;
    box-shadow: var(--kl-shadow);
    max-width: 860px;
    margin: 0 auto;
}
.kl-cert__inner {
    border: 1px solid var(--kl-line);
    border-radius: var(--kl-radius-sm);
    padding: 56px 48px;
    text-align: center;
}
.kl-cert__mark {
    font-size: 2.4rem;
    color: var(--kl-gold);
    margin-bottom: 10px;
}
.kl-cert__eyebrow {
    text-transform: uppercase;
    letter-spacing: .28em;
    font-size: .8rem;
    font-weight: 700;
    color: var(--kl-gold-dark);
    margin: 0 0 18px;
}
.kl-cert__title {
    font-size: 2.4rem;
    margin: 0 0 26px;
    color: var(--kl-navy);
}
.kl-cert__intro { color: var(--kl-muted); margin: 0 0 6px; }
.kl-cert__name {
    font-family: var(--kl-font-serif);
    font-size: 2rem;
    color: var(--kl-navy);
    margin: 6px 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--kl-sand);
    display: inline-block;
    min-width: 60%;
}
.kl-cert__course {
    font-family: var(--kl-font-serif);
    font-size: 1.5rem;
    color: var(--kl-gold-dark);
    margin: 6px 0 34px;
}
.kl-cert__meta {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}
.kl-cert__meta-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .72rem;
    color: var(--kl-muted);
}
.kl-cert__meta-value {
    display: block;
    font-weight: 700;
    color: var(--kl-navy);
}

.kl-cert-actions {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
}
.kl-cert-share {
    min-width: 280px;
    padding: 12px 14px;
    border: 1px solid var(--kl-line);
    border-radius: 8px;
    font-size: .85rem;
    color: var(--kl-muted);
    background: var(--kl-white);
}

@media print {
    .site-header,
    .site-footer,
    .kl-cert-actions { display: none !important; }
    body { background: #fff; }
    .kl-cert { box-shadow: none; border-color: var(--kl-gold); max-width: none; }
    .kl-cert-page { padding: 0; }
}