/*
============================================================
KRULUXE DIAMOND EDUCATION PAGE
Premium Luxury + Fully Responsive Styling
============================================================

File:
/wp-content/themes/kruluxe-child/assets/css/diamond-education.css

Page:
/diamond-education/

============================================================
*/


/* =========================================================
   01. ROOT VARIABLES
========================================================= */

:root {

    --kr-de-black: #0b0b0b;
    --kr-de-charcoal: #171717;
    --kr-de-charcoal-2: #222222;

    --kr-de-white: #ffffff;

    --kr-de-ivory: #faf8f3;
    --kr-de-ivory-2: #f5f1e8;
    --kr-de-ivory-3: #eee7dc;

    --kr-de-gold: #b88d3b;
    --kr-de-gold-light: #d6b763;
    --kr-de-gold-dark: #97702a;

    --kr-de-green: #536547;
    --kr-de-green-dark: #3f5138;

    --kr-de-text: #171717;
    --kr-de-muted: #696693;
    --kr-de-muted-2: #898989;

    --kr-de-border: #e4ded2;
    --kr-de-border-dark: rgba(255, 255, 255, 0.14);

    --kr-de-success: #4c7251;

    --kr-de-radius: 18px;
    --kr-de-radius-lg: 28px;
    --kr-de-radius-xl: 36px;

    --kr-de-container: 1400px;

    --kr-de-shadow:
        0 24px 70px rgba(0, 0, 0, 0.07);

    --kr-de-shadow-small:
        0 14px 35px rgba(0, 0, 0, 0.055);

    --kr-de-serif:
        "Cormorant Garamond",
        "Times New Roman",
        Georgia,
        serif;

    --kr-de-sans:
        Arial,
        Helvetica,
        sans-serif;

}


/* =========================================================
   02. PAGE RESET / BASE
========================================================= */

.kr-de-main,
.kr-de-main *,
.kr-de-main *::before,
.kr-de-main *::after {
    box-sizing: border-box;
}

.kr-de-main {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--kr-de-ivory);
    color: var(--kr-de-text);
}

.kr-de-main img {
    display: block;
    max-width: 100%;
    height: auto;
}

.kr-de-main a {
    text-decoration: none;
}

.kr-de-main button,
.kr-de-main a {
    -webkit-tap-highlight-color: transparent;
}

.kr-de-main section {
    position: relative;
    width: 100%;
}


/* =========================================================
   03. CONTAINER
========================================================= */

.kr-de-container {
    width: min(
        calc(100% - 64px),
        var(--kr-de-container)
    );

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   04. TYPOGRAPHY
========================================================= */

.kr-de-main h1,
.kr-de-main h2,
.kr-de-main h3,
.kr-de-main p,
.kr-de-main ul {
    margin-top: 0;
}

.kr-de-main h1,
.kr-de-main h2,
.kr-de-main h3 {
    color: var(--kr-de-text);
}

.kr-de-main h1,
.kr-de-main h2 {
    font-family: var(--kr-de-serif);
    font-weight: 500;
    letter-spacing: -0.035em;
}

.kr-de-main h3 {
    font-family: var(--kr-de-serif);
    font-weight: 600;
}

.kr-de-main p,
.kr-de-main li,
.kr-de-main a,
.kr-de-main strong,
.kr-de-main span {
    font-family: var(--kr-de-sans);
}

.kr-de-main p {
    font-size: 16px;
    line-height: 1.82;
    color: #686868;
}

.kr-de-main strong {
    font-weight: 600;
}

.kr-de-main ::selection {
    background: var(--kr-de-gold);
    color: var(--kr-de-white);
}


/* =========================================================
   05. EYEBROW
========================================================= */

.kr-de-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 20px;

    color: var(--kr-de-gold-dark);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.kr-de-eyebrow::before {
    content: "";

    width: 28px;
    height: 1px;

    background: currentColor;
    opacity: 0.65;
}

.kr-de-eyebrow-light {
    color: var(--kr-de-gold-light);
}


/* =========================================================
   06. BUTTON SYSTEM
========================================================= */

.kr-de-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 14px 27px;

    border: 1px solid transparent;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.03em;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.kr-de-btn:hover {
    transform: translateY(-2px);
}

.kr-de-btn:focus-visible {
    outline: 2px solid var(--kr-de-gold);
    outline-offset: 4px;
}

.kr-de-btn-primary {
    background: var(--kr-de-charcoal);
    color: var(--kr-de-white);
    border-color: var(--kr-de-charcoal);
}

.kr-de-btn-primary:hover {
    background: var(--kr-de-black);
    color: var(--kr-de-white);
}

.kr-de-btn-secondary {
    background: transparent;
    color: var(--kr-de-charcoal);
    border-color: #cfc7b8;
}

.kr-de-btn-secondary:hover {
    background: var(--kr-de-white);
    border-color: var(--kr-de-charcoal);
    color: var(--kr-de-charcoal);
}

.kr-de-btn-gold {
    background: var(--kr-de-gold-light);
    color: #171717;
    border-color: var(--kr-de-gold-light);
}

.kr-de-btn-gold:hover {
    background: #e0c372;
    color: #171717;
}

.kr-de-btn-dark {
    background: var(--kr-de-charcoal);
    color: var(--kr-de-white);
    border-color: var(--kr-de-charcoal);
}

.kr-de-btn-dark:hover {
    background: var(--kr-de-black);
    color: var(--kr-de-white);
}

.kr-de-btn-dark-outline {
    background: transparent;
    color: var(--kr-de-white);
    border-color: rgba(255, 255, 255, 0.45);
}

.kr-de-btn-dark-outline:hover {
    background: var(--kr-de-white);
    color: var(--kr-de-black);
    border-color: var(--kr-de-white);
}


/* =========================================================
   07. HERO
========================================================= */

.kr-de-hero {
    padding:
        clamp(90px, 10vw, 160px)
        0
        clamp(90px, 9vw, 145px);

    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(184, 141, 59, 0.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #faf8f3 0%,
            #f7f4ed 45%,
            #efe9dd 100%
        );

    border-bottom: 1px solid var(--kr-de-border);
}

.kr-de-hero-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(340px, 0.65fr);

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

.kr-de-hero-copy {
    max-width: 820px;
}

.kr-de-hero-copy h1 {
    max-width: 820px;

    margin-bottom: 30px;

    font-size:
        clamp(
            52px,
            6.2vw,
            96px
        );

    line-height: 0.98;
}

.kr-de-hero-text {
    max-width: 720px;

    margin-bottom: 36px !important;

    font-size: 17px !important;
    line-height: 1.85 !important;
}

.kr-de-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}


/* =========================================================
   08. HERO CARD
========================================================= */

.kr-de-hero-card {
    position: relative;

    min-height: 500px;

    padding:
        clamp(34px, 4vw, 60px);

    background:
        linear-gradient(
            145deg,
            #121316,
            #1d2026
        );

    color: var(--kr-de-white);

    box-shadow: var(--kr-de-shadow);
}

.kr-de-hero-card::after {
    content: "";

    position: absolute;
    inset: 14px;

    border: 1px solid rgba(214, 183, 99, 0.18);

    pointer-events: none;
}

.kr-de-card-number {
    display: block;

    margin-bottom: 50px;

    color: var(--kr-de-gold-light);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.kr-de-hero-card h2 {
    max-width: 340px;
    margin-bottom: 20px;

    color: var(--kr-de-white);

    font-size: clamp(34px, 3.5vw, 52px);
    line-height: 1.03;
}

.kr-de-hero-card p {
    color: rgba(255, 255, 255, 0.72);
}

.kr-de-clean-list {
    margin:
        34px
        0
        0;

    padding: 0;

    list-style: none;
}

.kr-de-clean-list li {
    position: relative;

    padding:
        12px
        0
        12px
        19px;

    color: rgba(255, 255, 255, 0.88);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);

    font-size: 13px;
}

.kr-de-clean-list li::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--kr-de-gold-light);

    transform: translateY(-50%);
}


/* =========================================================
   09. QUICK NAV
========================================================= */

.kr-de-quick-nav {
    background: var(--kr-de-white);
    border-bottom: 1px solid var(--kr-de-border);
}

.kr-de-quick-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.kr-de-quick-grid a {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 125px;
    padding: 30px 26px;

    color: var(--kr-de-charcoal);

    border-right: 1px solid var(--kr-de-border);

    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.kr-de-quick-grid a:first-child {
    border-left: 1px solid var(--kr-de-border);
}

.kr-de-quick-grid a span {
    margin-bottom: 8px;

    color: var(--kr-de-gold-dark);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.kr-de-quick-grid a strong {
    font-family: var(--kr-de-serif);
    font-size: 21px;
    font-weight: 600;
}

.kr-de-quick-grid a:hover {
    background: var(--kr-de-charcoal);
    color: var(--kr-de-white);
}

.kr-de-quick-grid a:hover span {
    color: var(--kr-de-gold-light);
}


/* =========================================================
   10. GENERIC SECTION
========================================================= */

.kr-de-section {
    padding:
        clamp(90px, 9vw, 145px)
        0;

    background: var(--kr-de-ivory);
}

.kr-de-section + .kr-de-section {
    border-top: 1px solid var(--kr-de-border);
}

.kr-de-section-heading {
    max-width: 850px;
    margin-bottom:
        clamp(48px, 6vw, 80px);
}

.kr-de-section-heading h2 {
    margin-bottom: 24px;

    font-size:
        clamp(
            42px,
            5vw,
            72px
        );

    line-height: 1.02;
}

.kr-de-section-heading p {
    max-width: 760px;
}

.kr-de-heading-centered {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.kr-de-heading-centered p {
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   11. THREE GRID
========================================================= */

.kr-de-three-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.kr-de-info-card {
    position: relative;

    min-height: 310px;

    padding:
        clamp(30px, 3.5vw, 48px);

    background: var(--kr-de-white);

    border: 1px solid var(--kr-de-border);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.kr-de-info-card:hover {
    transform: translateY(-5px);

    box-shadow: var(--kr-de-shadow-small);

    border-color: #d2c6b0;
}

.kr-de-info-card .kr-de-card-number {
    margin-bottom: 55px;
}

.kr-de-info-card h3 {
    margin-bottom: 16px;

    font-size: 31px;
    line-height: 1.12;
}


/* =========================================================
   12. THE 4Cs GRID
========================================================= */

.kr-de-4cs {
    background: #f7f3eb;
}

.kr-de-fourcs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.kr-de-c-card {
    min-height: 550px;

    padding:
        clamp(32px, 4.2vw, 58px);

    background: var(--kr-de-white);

    border: 1px solid var(--kr-de-border);

    box-shadow: 0 6px 0 transparent;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.kr-de-c-card:hover {
    transform: translateY(-5px);

    border-color: #d3c7af;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.06);
}

.kr-de-c-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 55px;
}

.kr-de-c-top .kr-de-card-number {
    margin: 0;
}

.kr-de-c-letter {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    border:
        1px solid
        rgba(184, 141, 59, 0.5);

    border-radius: 50%;

    color: var(--kr-de-gold-dark);

    font-family: var(--kr-de-serif) !important;
    font-size: 30px;
    font-weight: 500;
}

.kr-de-c-card h3 {
    margin-bottom: 18px;

    font-size: clamp(38px, 4vw, 58px);
}

.kr-de-detail-list {
    margin-top: 30px;
}

.kr-de-detail-list > div {
    display: grid;
    grid-template-columns: 130px 1fr;

    gap: 20px;

    padding: 16px 0;

    border-top: 1px solid var(--kr-de-border);
}

.kr-de-detail-list > div:last-child {
    border-bottom: 1px solid var(--kr-de-border);
}

.kr-de-detail-list strong {
    font-size: 13px;
    color: var(--kr-de-charcoal);
}

.kr-de-detail-list span {
    font-size: 13px;
    color: #777;
    line-height: 1.6;
}

.kr-de-note {
    margin:
        26px
        0
        0 !important;

    padding-left: 18px;

    border-left: 2px solid var(--kr-de-gold);

    font-size: 13px !important;
    line-height: 1.7 !important;
}


/* =========================================================
   13. COLOR GRADE SCALE
========================================================= */

.kr-de-grade-scale {
    display: grid;
    grid-template-columns: repeat(7, 1fr);

    margin: 30px 0;

    border: 1px solid var(--kr-de-border);
}

.kr-de-grade-scale span {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 55px;

    border-right: 1px solid var(--kr-de-border);

    color: var(--kr-de-charcoal);

    font-size: 13px;
    font-weight: 700;
}

.kr-de-grade-scale span:last-child {
    border-right: 0;
}


/* =========================================================
   14. CLARITY LIST
========================================================= */

.kr-de-clarity-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);

    margin: 30px 0;

    border: 1px solid var(--kr-de-border);
}

.kr-de-clarity-list span {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 55px;

    border-right: 1px solid var(--kr-de-border);

    font-size: 12px;
    font-weight: 700;
}

.kr-de-clarity-list span:last-child {
    border-right: 0;
}


/* =========================================================
   15. CARAT EXAMPLE
========================================================= */

.kr-de-carat-example {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin:
        30px
        0;

    padding:
        22px
        24px;

    background: var(--kr-de-ivory);

    border:
        1px solid
        var(--kr-de-border);
}

.kr-de-carat-example strong {
    font-family: var(--kr-de-serif);
    font-size: 27px;
    font-weight: 600;
}

.kr-de-carat-example span {
    color: #777;
    font-size: 13px;
}


/* =========================================================
   16. DARK SECTION
========================================================= */

.kr-de-dark-section {
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(184, 141, 59, 0.12),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #101114,
            #1b1e24
        );

    color: var(--kr-de-white);
}

.kr-de-dark-section h2 {
    color: var(--kr-de-white);

    font-size:
        clamp(
            44px,
            5vw,
            70px
        );

    line-height: 1;
}

.kr-de-dark-section p {
    color: rgba(255, 255, 255, 0.68);
}

.kr-de-split-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap:
        clamp(
            50px,
            8vw,
            110px
        );

    align-items: start;
}

.kr-de-dark-points {
    border-top:
        1px solid
        var(--kr-de-border-dark);
}

.kr-de-dark-points > div {
    display: grid;
    grid-template-columns:
        70px
        170px
        1fr;

    gap: 20px;

    padding: 28px 0;

    border-bottom:
        1px solid
        var(--kr-de-border-dark);
}

.kr-de-dark-points span {
    color: var(--kr-de-gold-light);

    font-size: 11px;
    font-weight: 700;
}

.kr-de-dark-points strong {
    color: var(--kr-de-white);

    font-family: var(--kr-de-serif);
    font-size: 22px;
}

.kr-de-dark-points p {
    margin: 0 !important;

    font-size: 13px;
}


/* =========================================================
   17. SHAPE GRID
========================================================= */

.kr-de-shapes {
    background: var(--kr-de-white);
}

.kr-de-shape-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    border-top: 1px solid var(--kr-de-border);
    border-left: 1px solid var(--kr-de-border);
}

.kr-de-shape-grid article {
    min-height: 260px;

    padding: 30px;

    border-right: 1px solid var(--kr-de-border);
    border-bottom: 1px solid var(--kr-de-border);

    background: var(--kr-de-white);

    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.kr-de-shape-grid article > span {
    display: block;

    margin-bottom: 55px;

    color: var(--kr-de-gold-dark);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.kr-de-shape-grid h3 {
    margin-bottom: 14px;

    font-size: 28px;
}

.kr-de-shape-grid p {
    margin-bottom: 0 !important;

    font-size: 13px !important;
    line-height: 1.7 !important;
}

.kr-de-shape-grid article:hover {
    background: var(--kr-de-charcoal);
}

.kr-de-shape-grid article:hover h3 {
    color: var(--kr-de-white);
}

.kr-de-shape-grid article:hover p {
    color: rgba(255, 255, 255, 0.68);
}

.kr-de-shape-grid article:hover > span {
    color: var(--kr-de-gold-light);
}


/* =========================================================
   18. NATURAL VS LAB
========================================================= */

.kr-de-origin {
    background:
        linear-gradient(
            180deg,
            #f7f3eb,
            #faf8f3
        );
}

.kr-de-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 24px;

    max-width: 1150px;
    margin: 0 auto;
}

.kr-de-origin-card {
    padding:
        clamp(35px, 4vw, 58px);

    background: var(--kr-de-white);

    border: 1px solid var(--kr-de-border);

    box-shadow: var(--kr-de-shadow-small);
}

.kr-de-origin-card .kr-de-card-number {
    margin-bottom: 50px;
}

.kr-de-origin-card h3 {
    margin-bottom: 18px;

    font-size:
        clamp(
            34px,
            3.5vw,
            48px
        );
}

.kr-de-check-list {
    margin:
        32px
        0;

    padding: 0;

    list-style: none;
}

.kr-de-check-list li {
    position: relative;

    padding:
        13px
        0
        13px
        27px;

    border-top: 1px solid var(--kr-de-border);

    color: #555;

    font-size: 13px;
}

.kr-de-check-list li:last-child {
    border-bottom: 1px solid var(--kr-de-border);
}

.kr-de-check-list li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 13px;

    color: var(--kr-de-green-dark);

    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   19. TEXT LINKS
========================================================= */

.kr-de-text-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;

    color: var(--kr-de-charcoal);

    font-size: 12px;
    font-weight: 700;

    border-bottom:
        1px solid
        var(--kr-de-gold);

    padding-bottom: 7px;
}

.kr-de-text-link span {
    transition: transform 0.25s ease;
}

.kr-de-text-link:hover {
    color: var(--kr-de-gold-dark);
}

.kr-de-text-link:hover span {
    transform: translateX(5px);
}


/* =========================================================
   20. FLUORESCENCE
========================================================= */

.kr-de-fluorescence {
    background: var(--kr-de-white);
}

.kr-de-fluorescence h2 {
    font-size:
        clamp(
            40px,
            4.5vw,
            66px
        );
}

.kr-de-scale-card {
    padding:
        clamp(
            30px,
            4vw,
            50px
        );

    background: var(--kr-de-ivory);

    border: 1px solid var(--kr-de-border);
}

.kr-de-scale-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    margin-bottom: 30px;

    border: 1px solid var(--kr-de-border);
}

.kr-de-scale-row span {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 70px;

    padding: 10px;

    border-right: 1px solid var(--kr-de-border);

    text-align: center;

    font-size: 11px;
    font-weight: 700;
}

.kr-de-scale-row span:last-child {
    border-right: 0;
}


/* =========================================================
   21. CERTIFICATION
========================================================= */

.kr-de-certification {
    background: #f6f1e8;
}

.kr-de-report-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.9fr);

    gap: 24px;
}

.kr-de-report-card {
    padding:
        clamp(
            34px,
            4vw,
            56px
        );

    background: var(--kr-de-white);

    border: 1px solid var(--kr-de-border);
}

.kr-de-report-card .kr-de-card-number {
    margin-bottom: 45px;
}

.kr-de-report-card h3 {
    margin-bottom: 22px;

    font-size:
        clamp(
            32px,
            3.2vw,
            46px
        );
}

.kr-de-report-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 0 30px;

    margin: 30px 0 0;
    padding: 0;

    list-style: none;
}

.kr-de-report-list li {
    position: relative;

    padding:
        14px
        0
        14px
        22px;

    border-top: 1px solid var(--kr-de-border);

    color: #555;

    font-size: 13px;
}

.kr-de-report-list li::before {
    content: "";

    position: absolute;
    left: 0;
    top: 20px;

    width: 5px;
    height: 5px;

    background: var(--kr-de-gold);

    border-radius: 50%;
}

.kr-de-report-highlight {
    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            145deg,
            #131416,
            #1d2024
        );

    color: var(--kr-de-white);
}

.kr-de-report-highlight h3 {
    color: var(--kr-de-white);
}

.kr-de-report-highlight p {
    color: rgba(255, 255, 255, 0.7);
}

.kr-de-report-highlight .kr-de-btn {
    margin-top: auto;
    align-self: flex-start;

    background: var(--kr-de-gold-light);
    border-color: var(--kr-de-gold-light);
    color: var(--kr-de-black);
}


/* =========================================================
   22. COMPARISON STEPS
========================================================= */

.kr-de-report-steps {
    background: var(--kr-de-white);
}

.kr-de-step-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid var(--kr-de-border);
    border-left: 1px solid var(--kr-de-border);
}

.kr-de-step-grid article {
    min-height: 280px;

    padding:
        clamp(26px, 3vw, 42px);

    border-right: 1px solid var(--kr-de-border);
    border-bottom: 1px solid var(--kr-de-border);
}

.kr-de-step-grid article > span {
    display: block;

    margin-bottom: 45px;

    color: var(--kr-de-gold-dark);

    font-size: 11px;
    font-weight: 700;
}

.kr-de-step-grid h3 {
    margin-bottom: 15px;

    font-size: 28px;
}

.kr-de-step-grid p {
    margin-bottom: 0 !important;

    font-size: 13px !important;
}


/* =========================================================
   23. BUYING GUIDE
========================================================= */

.kr-de-buying-guide {
    background:
        radial-gradient(
            circle at 15% 80%,
            rgba(184, 141, 59, 0.08),
            transparent 27%
        ),
        var(--kr-de-ivory);
}

.kr-de-buy-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);

    gap:
        clamp(
            55px,
            8vw,
            120px
        );
}

.kr-de-buy-layout > div:first-child {
    position: sticky;
    top: 120px;

    align-self: start;
}

.kr-de-buy-layout h2 {
    margin-bottom: 25px;

    font-size:
        clamp(
            44px,
            5vw,
            70px
        );

    line-height: 1;
}

.kr-de-buy-points {
    border-top: 1px solid var(--kr-de-border);
}

.kr-de-buy-points > div {
    display: grid;
    grid-template-columns:
        70px
        210px
        1fr;

    gap: 20px;

    padding: 26px 0;

    border-bottom: 1px solid var(--kr-de-border);
}

.kr-de-buy-points span {
    color: var(--kr-de-gold-dark);

    font-size: 11px;
    font-weight: 700;
}

.kr-de-buy-points strong {
    font-family: var(--kr-de-serif);
    font-size: 22px;
    font-weight: 600;
}

.kr-de-buy-points p {
    margin: 0 !important;

    font-size: 13px !important;
}


/* =========================================================
   24. SETTING GUIDE
========================================================= */

.kr-de-setting-guide {
    background: var(--kr-de-white);
}


/* =========================================================
   25. FAQ
========================================================= */

.kr-de-faq {
    background: #f7f3eb;
}

.kr-de-faq-list {
    max-width: 1050px;
    margin: 0 auto;
}

.kr-de-faq-list details {
    border-top: 1px solid #dcd2c3;

    background: transparent;
}

.kr-de-faq-list details:last-child {
    border-bottom: 1px solid #dcd2c3;
}

.kr-de-faq-list summary {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 88px;

    padding:
        24px
        58px
        24px
        0;

    cursor: pointer;

    list-style: none;

    color: var(--kr-de-charcoal);

    font-family: var(--kr-de-serif);
    font-size:
        clamp(
            22px,
            2.5vw,
            30px
        );

    font-weight: 600;
}

.kr-de-faq-list summary::-webkit-details-marker {
    display: none;
}

.kr-de-faq-list summary::after {
    content: "+";

    position: absolute;
    right: 4px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--kr-de-gold-dark);

    font-family: var(--kr-de-sans);
    font-size: 25px;
    font-weight: 300;
}

.kr-de-faq-list details[open] summary::after {
    content: "−";
}

.kr-de-faq-list details > div {
    padding:
        0
        70px
        28px
        0;
}

.kr-de-faq-list details p {
    max-width: 800px;
}

.kr-de-faq-link-wrap {
    display: flex;
    justify-content: center;

    margin-top: 42px;
}


/* =========================================================
   26. SUPPORT SECTION
========================================================= */

.kr-de-support {
    padding:
        clamp(
            80px,
            9vw,
            130px
        )
        0;

    background: var(--kr-de-white);
}

.kr-de-support-card {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 60px;

    padding:
        clamp(
            42px,
            5vw,
            70px
        );

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(184, 141, 59, 0.12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #101114,
            #1d2024
        );

    color: var(--kr-de-white);

    box-shadow: var(--kr-de-shadow);
}

.kr-de-support-card h2 {
    max-width: 700px;

    margin-bottom: 18px;

    color: var(--kr-de-white);

    font-size:
        clamp(
            38px,
            4vw,
            58px
        );

    line-height: 1;
}

.kr-de-support-card p {
    max-width: 650px;
    margin-bottom: 0 !important;

    color: rgba(255, 255, 255, 0.68);
}

.kr-de-support-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;

    min-width: 210px;
}


/* =========================================================
   27. RELATED JOURNEY
========================================================= */

.kr-de-related {
    background: var(--kr-de-ivory);
}

.kr-de-related-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(380px, 0.7fr);

    gap:
        clamp(
            60px,
            9vw,
            130px
        );

    align-items: start;
}

.kr-de-related-layout h2 {
    max-width: 740px;

    font-size:
        clamp(
            46px,
            5vw,
            72px
        );

    line-height: 1;
}

.kr-de-related-links {
    border-top: 1px solid var(--kr-de-border);
}

.kr-de-related-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 23px 8px;

    border-bottom: 1px solid var(--kr-de-border);

    color: var(--kr-de-charcoal);

    transition:
        color 0.25s ease,
        padding 0.25s ease;
}

.kr-de-related-links a span {
    font-size: 13px;
    font-weight: 600;
}

.kr-de-related-links a strong {
    font-size: 16px;

    transition: transform 0.25s ease;
}

.kr-de-related-links a:hover {
    padding-left: 15px;
    padding-right: 15px;

    color: var(--kr-de-gold-dark);
}

.kr-de-related-links a:hover strong {
    transform: translateX(4px);
}


/* =========================================================
   28. FINAL CTA
========================================================= */

.kr-de-final {
    padding:
        clamp(
            70px,
            8vw,
            115px
        )
        0;

    background: var(--kr-de-white);

    border-top: 1px solid var(--kr-de-border);
}

.kr-de-final-inner {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 50px;

    align-items: center;
}

.kr-de-final h2 {
    max-width: 760px;

    margin-bottom: 18px;

    font-size:
        clamp(
            43px,
            5vw,
            68px
        );

    line-height: 1;
}

.kr-de-final p {
    max-width: 630px;
}

.kr-de-final-actions {
    display: flex;
    gap: 12px;
}


/* =========================================================
   29. REVEAL ANIMATION
========================================================= */

.js .kr-de-reveal,
.kr-de-js-enabled .kr-de-reveal {
    opacity: 0;

    transform: translateY(26px);

    transition:
        opacity 0.75s ease,
        transform 0.75s ease;
}

.js .kr-de-reveal.is-visible,
.kr-de-js-enabled .kr-de-reveal.is-visible {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   30. ACCESSIBILITY
========================================================= */

.kr-de-main a:focus-visible,
.kr-de-main summary:focus-visible {
    outline: 2px solid var(--kr-de-gold);
    outline-offset: 4px;
}

.kr-de-main summary {
    outline: none;
}


/* =========================================================
   31. ASTRA / WORDPRESS COMPATIBILITY
========================================================= */

body.page-template-page-diamond-education
.site-content,
body.page-template-page-diamond-education
.ast-container {
    max-width: none;
    padding: 0;
}

body.page-template-page-diamond-education
#primary {
    width: 100%;
    margin: 0;
}

body.page-template-page-diamond-education
.entry-content {
    margin: 0;
}

body.page-template-page-diamond-education
.entry-header,
body.page-template-page-diamond-education
.ast-page-builder-template
.entry-header {
    display: none;
}

.kr-de-main {
    margin: 0 !important;
    padding: 0 !important;
}

.kr-de-main section {
    width: 100%;
}


/* =========================================================
   32. LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

    .kr-de-container {
        width: min(
            calc(100% - 100px),
            var(--kr-de-container)
        );
    }

}


/* =========================================================
   33. TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 1180px) {

    .kr-de-hero-layout {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(320px, 0.85fr);

        gap: 50px;
    }

    .kr-de-shape-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .kr-de-quick-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .kr-de-quick-grid a {
        border-bottom:
            1px solid
            var(--kr-de-border);
    }

    .kr-de-dark-points > div,
    .kr-de-buy-points > div {
        grid-template-columns:
            55px
            170px
            1fr;
    }

}


/* =========================================================
   34. TABLET
========================================================= */

@media (max-width: 991px) {

    .kr-de-container {
        width:
            min(
                calc(100% - 44px),
                var(--kr-de-container)
            );
    }

    .kr-de-hero-layout,
    .kr-de-split-layout,
    .kr-de-buy-layout,
    .kr-de-related-layout,
    .kr-de-report-layout {
        grid-template-columns: 1fr;
    }

    .kr-de-hero-card {
        min-height: auto;
    }

    .kr-de-three-grid {
        grid-template-columns: 1fr 1fr;
    }

    .kr-de-fourcs-grid {
        grid-template-columns: 1fr;
    }

    .kr-de-compare-grid {
        grid-template-columns: 1fr;
    }

    .kr-de-step-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kr-de-shape-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kr-de-buy-layout > div:first-child {
        position: static;
    }

    .kr-de-support-card,
    .kr-de-final-inner {
        grid-template-columns: 1fr;
    }

    .kr-de-support-actions {
        min-width: 0;
        max-width: 340px;

        flex-direction: row;
        flex-wrap: wrap;
    }

    .kr-de-final-actions {
        flex-wrap: wrap;
    }

    .kr-de-related-layout {
        gap: 50px;
    }

}


/* =========================================================
   35. MOBILE LANDSCAPE / LARGE MOBILE
========================================================= */

@media (max-width: 767px) {

    .kr-de-container {
        width:
            calc(100% - 32px);
    }

    .kr-de-section {
        padding:
            75px
            0;
    }

    .kr-de-hero {
        padding:
            75px
            0
            80px;
    }

    .kr-de-hero-copy h1 {
        font-size:
            clamp(
                46px,
                13vw,
                66px
            );

        line-height: 1;
    }

    .kr-de-hero-text {
        font-size: 15px !important;
    }

    .kr-de-hero-actions,
    .kr-de-final-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .kr-de-btn {
        width: 100%;
    }

    .kr-de-quick-grid {
        grid-template-columns: 1fr 1fr;
    }

    .kr-de-quick-grid a:first-child {
        border-left: 0;
    }

    .kr-de-three-grid,
    .kr-de-step-grid {
        grid-template-columns: 1fr;
    }

    .kr-de-shape-grid {
        grid-template-columns: 1fr 1fr;
    }

    .kr-de-info-card {
        min-height: auto;
    }

    .kr-de-dark-points > div,
    .kr-de-buy-points > div {
        grid-template-columns:
            45px
            1fr;

        gap: 10px 18px;
    }

    .kr-de-dark-points > div p,
    .kr-de-buy-points > div p {
        grid-column: 2;
    }

    .kr-de-report-list {
        grid-template-columns: 1fr;
    }

    .kr-de-support-actions {
        flex-direction: column;
        max-width: none;
    }

    .kr-de-scale-row {
        grid-template-columns: 1fr;
    }

    .kr-de-scale-row span {
        min-height: 48px;
        border-right: 0;
        border-bottom:
            1px solid
            var(--kr-de-border);
    }

    .kr-de-scale-row span:last-child {
        border-bottom: 0;
    }

}


/* =========================================================
   36. SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .kr-de-main p {
        font-size: 14px;
        line-height: 1.75;
    }

    .kr-de-section-heading h2 {
        font-size:
            clamp(
                36px,
                11vw,
                48px
            );
    }

    .kr-de-hero-card,
    .kr-de-info-card,
    .kr-de-c-card,
    .kr-de-origin-card,
    .kr-de-report-card,
    .kr-de-scale-card {
        padding:
            28px
            24px;
    }

    .kr-de-hero-card::after {
        inset: 9px;
    }

    .kr-de-quick-grid {
        grid-template-columns: 1fr;
    }

    .kr-de-quick-grid a {
        min-height: 95px;

        border-right: 0;
        border-left: 0;
    }

    .kr-de-shape-grid {
        grid-template-columns: 1fr;
    }

    .kr-de-shape-grid article {
        min-height: auto;
    }

    .kr-de-shape-grid article > span {
        margin-bottom: 30px;
    }

    .kr-de-grade-scale {
        grid-template-columns:
            repeat(4, 1fr);
    }

    .kr-de-grade-scale span {
        border-bottom:
            1px solid
            var(--kr-de-border);
    }

    .kr-de-clarity-list {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .kr-de-clarity-list span {
        border-bottom:
            1px solid
            var(--kr-de-border);
    }

    .kr-de-carat-example {
        flex-direction: column;
        align-items: flex-start;
    }

    .kr-de-detail-list > div {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .kr-de-support-card {
        padding:
            36px
            24px;
    }

    .kr-de-related-layout h2,
    .kr-de-final h2 {
        font-size:
            clamp(
                37px,
                11vw,
                50px
            );
    }

    .kr-de-faq-list summary {
        min-height: 78px;

        padding-right: 45px;

        font-size: 22px;
    }

    .kr-de-faq-list details > div {
        padding-right: 0;
    }

}


/* =========================================================
   37. VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .kr-de-container {
        width:
            calc(100% - 24px);
    }

    .kr-de-hero-copy h1 {
        font-size: 43px;
    }

    .kr-de-c-card h3,
    .kr-de-origin-card h3 {
        font-size: 35px;
    }

    .kr-de-grade-scale {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =========================================================
   38. PRINT
========================================================= */

@media print {

    .kr-de-main {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .kr-de-main *,
    .kr-de-main *::before,
    .kr-de-main *::after {
        animation: none !important;
        transition: none !important;
        box-shadow: none !important;
    }

    .kr-de-hero,
    .kr-de-section,
    .kr-de-support,
    .kr-de-final {
        padding:
            25px
            0 !important;
    }

    .kr-de-btn,
    .kr-de-support-actions,
    .kr-de-final-actions {
        display: none !important;
    }

    .kr-de-dark-section,
    .kr-de-support-card,
    .kr-de-report-highlight,
    .kr-de-hero-card {
        background: #ffffff !important;
        color: #000000 !important;

        border:
            1px solid
            #cccccc !important;
    }

    .kr-de-dark-section h2,
    .kr-de-support-card h2,
    .kr-de-report-highlight h3,
    .kr-de-hero-card h2 {
        color: #000000 !important;
    }

    .kr-de-dark-section p,
    .kr-de-support-card p,
    .kr-de-report-highlight p,
    .kr-de-hero-card p {
        color: #000000 !important;
    }

}


/* =========================================================
   39. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kr-de-main *,
    .kr-de-main *::before,
    .kr-de-main *::after {
        animation: none !important;
        transition: none !important;

        scroll-behavior: auto !important;
    }

    .kr-de-reveal {
        opacity: 1 !important;

        transform: none !important;
    }

}


/* =========================================================
   END OF KRULUXE DIAMOND-EDUCATION.CSS
========================================================= */