/* =========================================================
   KSL MEDIATION — HOMEPAGE
   ========================================================= */

.kslm-home {
    --kslm-ink: #101820;
    --kslm-text: #32383d;
    --kslm-muted: #657078;
    --kslm-line: #dde1e3;
    --kslm-soft: #f5f3ee;
    --kslm-white: #ffffff;
    background: var(--kslm-white);
    color: var(--kslm-text);
}

.kslm-home__shell {
    width: min(1160px, calc(100% - 48px));
    margin: 0 auto;
}

.kslm-home h1,
.kslm-home h2,
.kslm-home h3,
.kslm-home p {
    margin-top: 0;
}

.kslm-home h1,
.kslm-home h2,
.kslm-home h3 {
    color: var(--kslm-ink);
}

.kslm-home__eyebrow {
    margin-bottom: 18px;
    color: var(--kslm-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    line-height: 1.4;
    text-transform: uppercase;
}


/* Hero */

.kslm-home__hero {
    display: flex;
    align-items: center;
    min-height: 620px;
    background: var(--kslm-soft);
    border-bottom: 1px solid var(--kslm-line);
}

.kslm-home__hero-inner {
    padding-top: 88px;
    padding-bottom: 88px;
}

.kslm-home__hero h1 {
    max-width: 920px;
    margin-bottom: 28px;
    font-size: clamp(44px, 5.7vw, 76px);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.03;
}

.kslm-home__lede {
    max-width: 760px;
    margin-bottom: 34px;
    color: #434b50;
    font-size: clamp(19px, 2vw, 23px);
    line-height: 1.55;
}

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


/* Buttons */

.kslm-home__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 13px 24px;
    border: 1px solid var(--kslm-ink);
    border-radius: 2px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
}

.kslm-home__button--primary {
    background: var(--kslm-ink);
    color: #ffffff;
}

.kslm-home__button--primary:hover,
.kslm-home__button--primary:focus-visible {
    background: #26333c;
    border-color: #26333c;
    color: #ffffff;
}

.kslm-home__button--secondary {
    background: transparent;
    color: var(--kslm-ink);
}

.kslm-home__button--secondary:hover,
.kslm-home__button--secondary:focus-visible {
    background: var(--kslm-ink);
    color: #ffffff;
}

.kslm-home__button--light {
    border-color: #ffffff;
    background: #ffffff;
    color: var(--kslm-ink);
}

.kslm-home__button--light:hover,
.kslm-home__button--light:focus-visible {
    background: transparent;
    color: #ffffff;
}


/* Standard sections */

.kslm-home__section {
    padding: 96px 0;
}

.kslm-home__section--soft {
    background: var(--kslm-soft);
}

.kslm-home__section--dark {
    background: var(--kslm-ink);
    color: rgba(255,255,255,.78);
}

.kslm-home__section h2,
.kslm-home__closing h2 {
    max-width: 820px;
    margin-bottom: 24px;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.12;
}

.kslm-home__section-intro {
    max-width: 760px;
    margin-bottom: 48px;
    color: var(--kslm-muted);
    font-size: 18px;
    line-height: 1.7;
}


/* Matter cards */

.kslm-home__cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.kslm-home__card {
    grid-column: span 2;
    min-height: 220px;
    padding: 30px;
    border: 1px solid var(--kslm-line);
    background: #ffffff;
}

.kslm-home__card:nth-child(4),
.kslm-home__card:nth-child(5) {
    grid-column: span 3;
}

.kslm-home__card h3 {
    margin-bottom: 14px;
    font-size: 21px;
    line-height: 1.25;
}

.kslm-home__card p {
    margin-bottom: 0;
    color: var(--kslm-muted);
    line-height: 1.65;
}


/* Section links */

.kslm-home__section-link {
    margin: 34px 0 0;
}

.kslm-home__section-link a,
.kslm-home__audience a {
    color: var(--kslm-ink);
    font-weight: 700;
    text-decoration: none;
}

.kslm-home__section-link a:hover,
.kslm-home__section-link a:focus-visible,
.kslm-home__audience a:hover,
.kslm-home__audience a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* Process */

.kslm-home__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #d5d1c8;
    border-bottom: 1px solid #d5d1c8;
}

.kslm-home__step {
    padding: 34px 34px 34px 0;
}

.kslm-home__step + .kslm-home__step {
    padding-left: 34px;
    border-left: 1px solid #d5d1c8;
}

.kslm-home__step-number {
    display: block;
    margin-bottom: 28px;
    color: #858078;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
}

.kslm-home__step h3 {
    margin-bottom: 12px;
    font-size: 23px;
}

.kslm-home__step p {
    margin-bottom: 0;
    color: #5f615f;
    line-height: 1.65;
}


/* Audiences */

.kslm-home__audiences {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.kslm-home__audience {
    padding: 42px;
    border: 1px solid var(--kslm-line);
}

.kslm-home__audience h3 {
    margin-bottom: 16px;
    font-size: 26px;
}

.kslm-home__audience p {
    max-width: 470px;
    margin-bottom: 24px;
    color: var(--kslm-muted);
    line-height: 1.7;
}


/* Feature rows */

.kslm-home__feature {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, .5fr);
    gap: 60px;
    align-items: center;
}

.kslm-home__feature p:not(.kslm-home__eyebrow) {
    max-width: 700px;
    margin-bottom: 0;
    font-size: 18px;
    line-height: 1.7;
}

.kslm-home__feature-action {
    text-align: right;
}

.kslm-home__section--dark h2,
.kslm-home__section--dark .kslm-home__eyebrow {
    color: #ffffff;
}


/* Closing */

.kslm-home__closing {
    padding: 104px 0 112px;
    text-align: center;
}

.kslm-home__closing h2,
.kslm-home__closing p {
    margin-left: auto;
    margin-right: auto;
}

.kslm-home__closing p {
    max-width: 620px;
    margin-bottom: 30px;
    color: var(--kslm-muted);
    font-size: 18px;
    line-height: 1.7;
}


/* Focus */

.kslm-home a:focus-visible {
    outline: 3px solid #0065cb;
    outline-offset: 4px;
}


/* Tablet */

@media (max-width: 959px) {

    .kslm-home__hero {
        min-height: auto;
    }

    .kslm-home__hero-inner {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .kslm-home__section {
        padding: 76px 0;
    }

    .kslm-home__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kslm-home__card,
    .kslm-home__card:nth-child(4),
    .kslm-home__card:nth-child(5) {
        grid-column: auto;
    }

    .kslm-home__card:last-child {
        grid-column: 1 / -1;
    }

}


/* Mobile */

@media (max-width: 767px) {

    .kslm-home__shell {
        width: min(100% - 32px, 1160px);
    }

    .kslm-home__hero-inner {
        padding-top: 56px;
        padding-bottom: 62px;
    }

    .kslm-home__hero h1 {
        margin-bottom: 22px;
        font-size: clamp(39px, 12vw, 52px);
        line-height: 1.04;
    }

    .kslm-home__lede {
        font-size: 18px;
    }

    .kslm-home__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .kslm-home__button {
        width: 100%;
    }

    .kslm-home__section {
        padding: 64px 0;
    }

    .kslm-home__section h2,
    .kslm-home__closing h2 {
        font-size: 34px;
    }

    .kslm-home__section-intro {
        margin-bottom: 34px;
        font-size: 17px;
    }

    .kslm-home__cards,
    .kslm-home__audiences,
    .kslm-home__steps,
    .kslm-home__feature {
        grid-template-columns: 1fr;
    }

    .kslm-home__card,
    .kslm-home__card:last-child {
        grid-column: auto;
        min-height: auto;
    }

    .kslm-home__card {
        padding: 26px;
    }

    .kslm-home__steps {
        border-bottom: 0;
    }

    .kslm-home__step,
    .kslm-home__step + .kslm-home__step {
        padding: 28px 0;
        border-left: 0;
        border-bottom: 1px solid #d5d1c8;
    }

    .kslm-home__audience {
        padding: 30px;
    }

    .kslm-home__feature {
        gap: 28px;
    }

    .kslm-home__feature-action {
        text-align: left;
    }

    .kslm-home__section--dark .kslm-home__button {
        width: auto;
    }

    .kslm-home__closing {
        padding: 72px 0 80px;
    }

}


/* Accessibility — sufficient contrast for process numbers */
.kslm-home__step-number {
    color: #59636a !important;
}


/* ==========================================================================
   KSLM HOMEPAGE V2 — HERO + PRIMER
   2026-09-11
   ========================================================================== */

.kslm-home {
    --kslm-oxblood: #3D0C02;
    --kslm-oxblood-panel: #521409;
    --kslm-gold: #C39A36;
    --kslm-warm: #F7F5EF;
    --kslm-stone: #E7E2D8;
    --kslm-white: #FFFFFF;
    --kslm-charcoal: #2B2F33;
}


/* Shared geometry — same 1200px family as locked header */

.kslm-home__shell {
    box-sizing: border-box;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}


/* Breadcrumb */

.kslm-home__breadcrumbs {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 50px;

    color: rgba(255,255,255,.55);

    font-size: 11px;
    line-height: 1;
    letter-spacing: .04em;
}

.kslm-home__breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.kslm-home__breadcrumbs a:hover,
.kslm-home__breadcrumbs a:focus-visible {
    color: #FFFFFF;
}


/* =========================================================
   HERO
   ========================================================= */

.kslm-home__hero {
    display: block;

    min-height: 0;

    padding: 54px 0 72px;

    background: var(--kslm-oxblood);
    border: 0;

    color: rgba(255,255,255,.82);
}

.kslm-home__hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(320px, .65fr);

    gap: clamp(70px, 8vw, 120px);
    align-items: center;
}

.kslm-home__hero-copy {
    max-width: 690px;
}


/* Hero eyebrow */

.kslm-home__hero .kslm-home__eyebrow {
    margin: 0 0 22px;

    color: var(--kslm-gold);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .15em;
    text-transform: uppercase;
}


/* H1 */

.kslm-home__hero h1 {
    max-width: 680px;

    margin: 0 0 24px;

    color: #FFFFFF;

    font-size: clamp(48px, 5.2vw, 72px);
    font-weight: 500;
    line-height: .99;
    letter-spacing: -.04em;
}


/* Hero text */

.kslm-home__hero .kslm-home__lede {
    max-width: 610px;

    margin: 0 0 32px;

    color: rgba(255,255,255,.78);

    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.55;
}


/* CTAs */

.kslm-home__hero .kslm-home__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;
}

.kslm-home__hero .kslm-home__button {
    min-height: 46px;

    padding: 0 20px;

    border-radius: 0;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .095em;
    text-transform: uppercase;
}

.kslm-home__hero .kslm-home__button--primary {
    border-color: var(--kslm-gold);

    background: var(--kslm-gold);
    color: var(--kslm-oxblood);
}

.kslm-home__hero .kslm-home__button--primary:hover,
.kslm-home__hero .kslm-home__button--primary:focus-visible {
    border-color: #FFFFFF;

    background: #FFFFFF;
    color: var(--kslm-oxblood);
}

.kslm-home__hero .kslm-home__button--secondary {
    border-color: rgba(195,154,54,.85);

    background: transparent;
    color: var(--kslm-gold);
}

.kslm-home__hero .kslm-home__button--secondary:hover,
.kslm-home__hero .kslm-home__button--secondary:focus-visible {
    border-color: var(--kslm-gold);

    background: var(--kslm-gold);
    color: var(--kslm-oxblood);
}


/* Hero editorial panel */

.kslm-home__hero-panel {
    box-sizing: border-box;

    padding: 30px 32px 32px;

    border:
        1px solid rgba(195,154,54,.55);

    background: var(--kslm-oxblood-panel);
}

.kslm-home__hero-panel-label {
    margin: 0 0 24px;

    color: var(--kslm-gold);

    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.kslm-home__hero-panel h2 {
    margin: 0 0 26px;

    color: #FFFFFF;

    font-size: clamp(25px, 2.5vw, 33px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.025em;
}

.kslm-home__hero-panel ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.kslm-home__hero-panel li {
    padding: 13px 0;

    border-top:
        1px solid rgba(195,154,54,.25);

    color: rgba(255,255,255,.80);

    font-size: 14px;
    line-height: 1.4;
}

.kslm-home__hero-panel li:last-child {
    padding-bottom: 0;
}


/* =========================================================
   PRIMER
   ========================================================= */

.kslm-home__primer {
    padding: 32px 0 36px;

    background: var(--kslm-warm);

    color: var(--kslm-charcoal);
}

.kslm-home__primer-heading {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);

    gap: 54px;

    margin-bottom: 24px;
}

.kslm-home__primer .kslm-home__eyebrow {
    margin: 7px 0 0;

    color: var(--kslm-gold);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.kslm-home__primer h2 {
    max-width: 800px;

    margin: 0;

    color: var(--kslm-charcoal);

    font-size: clamp(35px, 4vw, 52px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.kslm-home__primer h2 span {
    color: var(--kslm-oxblood);
}


/* Three columns */

.kslm-home__primer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    border-top:
        1px solid rgba(61,12,2,.20);

    border-bottom:
        1px solid rgba(61,12,2,.20);
}

.kslm-home__primer-grid article {
    padding: 30px 36px 32px 0;
}

.kslm-home__primer-grid article + article {
    padding-left: 36px;

    border-left:
        1px solid rgba(61,12,2,.20);
}

.kslm-home__primer-number {
    margin: 0 0 38px;

    color: var(--kslm-gold);

    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .12em;
}

.kslm-home__primer-grid h3 {
    margin: 0 0 10px;

    color: var(--kslm-charcoal);

    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
}

.kslm-home__primer-grid article > p:last-child {
    max-width: 290px;

    margin: 0;

    color: #68635D;

    font-size: 14px;
    line-height: 1.6;
}


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

@media (max-width: 959px) {

    .kslm-home__hero {
        padding-top: 38px;
        padding-bottom: 58px;
    }

    .kslm-home__breadcrumbs {
        margin-bottom: 38px;
    }

    .kslm-home__hero-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .kslm-home__hero-panel {
        max-width: 620px;
    }

    .kslm-home__primer {
        padding: 72px 0;
    }

    .kslm-home__primer-heading {
        grid-template-columns: 1fr;
        gap: 18px;

        margin-bottom: 44px;
    }
}


@media (max-width: 767px) {

    .kslm-home__shell {
        padding-left: 18px;
        padding-right: 18px;
    }

    .kslm-home__hero h1 {
        font-size: clamp(42px, 13vw, 58px);
    }

    .kslm-home__hero .kslm-home__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .kslm-home__hero .kslm-home__button {
        width: 100%;
    }

    .kslm-home__hero-panel {
        padding: 26px 24px 28px;
    }

    .kslm-home__primer-grid {
        grid-template-columns: 1fr;

        border-bottom: 0;
    }

    .kslm-home__primer-grid article,
    .kslm-home__primer-grid article + article {
        padding: 26px 0;

        border-left: 0;
        border-bottom:
            1px solid rgba(61,12,2,.20);
    }

    .kslm-home__primer-number {
        margin-bottom: 20px;
    }
}

/* =========================================================
   KSLM PRIMER — FINAL GEOMETRY OVERRIDE
   Eyebrow stacked directly above headline
   ========================================================= */

.kslm-home__primer-heading {
    display: block !important;
    padding-left: 274px !important;
    margin-bottom: 24px !important;
}

.kslm-home__primer .kslm-home__eyebrow {
    display: block !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

.kslm-home__primer h2 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 800px !important;
}

@media (max-width: 959px) {
    .kslm-home__primer-heading {
        padding-left: 0 !important;
    }
}

/* END KSLM PRIMER — FINAL GEOMETRY OVERRIDE */

/* KSLM PRIMER — LEFT ALIGN EYEBROW + TITLE */
.kslm-home__primer-heading {
    padding-left: 0 !important;
}

.kslm-home__primer .kslm-home__eyebrow,
.kslm-home__primer h2 {
    text-align: left !important;
}
/* END KSLM PRIMER — LEFT ALIGN EYEBROW + TITLE */

/* =========================================================
   KSLM HOMEPAGE — COMPACT SECTION RHYTHM
   Standardize vertical spacing across homepage sections.
   ========================================================= */

.kslm-home__section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
}

/*
 * Section CTAs:
 * Equal visual spacing from preceding content and section edge.
 */
.kslm-home__section-link {
    margin-top: 36px !important;
    margin-bottom: 0 !important;
}

/*
 * Remove the one-off Matters spacing override so it follows
 * the same standard as the other homepage sections.
 */
.kslm-home__section--matters {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
}

@media (max-width: 959px) {
    .kslm-home__section,
    .kslm-home__section--matters {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    .kslm-home__section-link {
        margin-top: 32px !important;
    }
}

@media (max-width: 767px) {
    .kslm-home__section,
    .kslm-home__section--matters {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    .kslm-home__section-link {
        margin-top: 28px !important;
    }
}

/* END KSLM HOMEPAGE — COMPACT SECTION RHYTHM */

/* =========================================================
   KSLM HOMEPAGE — COMPACT CLOSING + GREEN CTA
   Match standard section rhythm.
   ========================================================= */

.kslm-home__closing {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
}

/* KSL green — closing CTA only */
.kslm-home__closing .kslm-home__button--primary {
    background: #1e7b1e !important;
    border-color: #1e7b1e !important;
    color: #ffffff !important;
}

.kslm-home__closing .kslm-home__button--primary:hover,
.kslm-home__closing .kslm-home__button--primary:focus-visible {
    background: #176417 !important;
    border-color: #176417 !important;
    color: #ffffff !important;
}

@media (max-width: 959px) {
    .kslm-home__closing {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
}

@media (max-width: 767px) {
    .kslm-home__closing {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
}

/* END KSLM HOMEPAGE — COMPACT CLOSING + GREEN CTA */
