/**
 * =========================================================
 * KRULUXE CERTIFICATION PAGE
 * Premium Luxury + Fully Responsive Styling
 *
 * File:
 * /wp-content/themes/kruluxe-child/assets/css/certification.css
 *
 * Page:
 * /certification/
 * =========================================================
 */


/* =========================================================
   01. ROOT VARIABLES
========================================================= */

:root {

    --kr-cert-black: #0b0b0b;
    --kr-cert-charcoal: #171717;
    --kr-cert-charcoal-2: #222222;

    --kr-cert-white: #ffffff;

    --kr-cert-ivory: #faf8f3;
    --kr-cert-ivory-2: #f5f1e8;
    --kr-cert-ivory-3: #eee7da;
    --kr-cert-ivory-4: #e7dfd0;

    --kr-cert-gold: #b88d3b;
    --kr-cert-gold-light: #d6b36e;
    --kr-cert-gold-dark: #97702a;

    --kr-cert-gold-soft:
        rgba(184, 141, 59, 0.10);

    --kr-cert-green: #536847;
    --kr-cert-green-dark: #3f5138;

    --kr-cert-text: #171717;
    --kr-cert-muted: #6c6c6c;
    --kr-cert-muted-light: #929292;

    --kr-cert-border: #e5dfd4;
    --kr-cert-border-dark:
        rgba(23, 23, 23, 0.13);

    --kr-cert-border-light:
        rgba(255, 255, 255, 0.14);

    --kr-cert-success: #4c7251;

    --kr-cert-radius: 18px;
    --kr-cert-radius-large: 28px;
    --kr-cert-radius-xl: 34px;

    --kr-cert-container: 1440px;

    --kr-cert-shadow:
        0 24px 70px rgba(0, 0, 0, 0.07);

    --kr-cert-shadow-small:
        0 14px 35px rgba(0, 0, 0, 0.055);

    --kr-cert-transition:
        0.28s ease;

    --kr-cert-serif:
        Georgia,
        "Times New Roman",
        serif;

    --kr-cert-sans:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   02. RESET / BASE
========================================================= */

.kr-cert-main,
.kr-cert-main *,
.kr-cert-main *::before,
.kr-cert-main *::after {
    box-sizing: border-box;
}

.kr-cert-main {
    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;

    background:
        var(--kr-cert-white);

    color:
        var(--kr-cert-text);

    font-family:
        var(--kr-cert-sans);
}

.kr-cert-main section {
    position: relative;
    width: 100%;
}

.kr-cert-main img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
}

.kr-cert-main a {
    color: inherit;
    text-decoration: none;
}

.kr-cert-main h1,
.kr-cert-main h2,
.kr-cert-main h3,
.kr-cert-main h4,
.kr-cert-main p,
.kr-cert-main ul {
    margin-top: 0;
}

.kr-cert-main ul {
    padding-left: 0;
}

.kr-cert-main li {
    list-style: none;
}


/* =========================================================
   03. CONTAINER
========================================================= */

.kr-cert-container {
    width:
        min(
            calc(100% - 64px),
            var(--kr-cert-container)
        );

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   04. TYPOGRAPHY
========================================================= */

.kr-cert-main h1,
.kr-cert-main h2 {
    font-family:
        var(--kr-cert-serif);

    font-weight: 400;

    letter-spacing:
        -0.025em;

    color:
        var(--kr-cert-text);
}

.kr-cert-main h3,
.kr-cert-main h4 {
    color:
        var(--kr-cert-text);
}

.kr-cert-main p {
    color:
        var(--kr-cert-muted);

    line-height:
        1.8;
}

.kr-cert-eyebrow {
    display: inline-block;

    margin-bottom:
        18px;

    color:
        var(--kr-cert-gold);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


/* =========================================================
   05. BUTTONS
========================================================= */

.kr-cert-actions,
.kr-cert-final-actions,
.kr-cert-support-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        14px;
}

.kr-cert-actions {
    margin-top:
        34px;
}

.kr-cert-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height:
        52px;

    padding:
        14px 27px;

    border:
        1px solid transparent;

    border-radius:
        2px;

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1.2;

    text-align:
        center;

    cursor:
        pointer;

    transition:
        background var(--kr-cert-transition),
        color var(--kr-cert-transition),
        border-color var(--kr-cert-transition),
        transform var(--kr-cert-transition),
        box-shadow var(--kr-cert-transition);
}

.kr-cert-btn:hover {
    transform:
        translateY(-2px);
}

.kr-cert-btn-primary {
    background:
        var(--kr-cert-black);

    color:
        var(--kr-cert-white) !important;

    border-color:
        var(--kr-cert-black);
}

.kr-cert-btn-primary:hover {
    background:
        var(--kr-cert-gold);

    border-color:
        var(--kr-cert-gold);

    box-shadow:
        0 12px 28px
        rgba(184, 141, 59, 0.20);
}

.kr-cert-btn-secondary {
    background:
        transparent;

    color:
        var(--kr-cert-black) !important;

    border-color:
        #cbc3b7;
}

.kr-cert-btn-secondary:hover {
    color:
        var(--kr-cert-gold) !important;

    border-color:
        var(--kr-cert-gold);
}

.kr-cert-btn-gold {
    background:
        var(--kr-cert-gold);

    border-color:
        var(--kr-cert-gold);

    color:
        var(--kr-cert-black) !important;
}

.kr-cert-btn-gold:hover {
    background:
        var(--kr-cert-gold-light);

    border-color:
        var(--kr-cert-gold-light);

    box-shadow:
        0 12px 30px
        rgba(184, 141, 59, 0.20);
}

.kr-cert-btn-dark-outline {
    background:
        transparent;

    border-color:
        rgba(255, 255, 255, 0.34);

    color:
        var(--kr-cert-white) !important;
}

.kr-cert-btn-dark-outline:hover {
    border-color:
        var(--kr-cert-gold-light);

    color:
        var(--kr-cert-gold-light) !important;
}


/* =========================================================
   06. HERO
========================================================= */

.kr-cert-hero {
    padding:
        clamp(90px, 10vw, 155px)
        0
        clamp(90px, 9vw, 145px);

    background:
        radial-gradient(
            circle at 86% 18%,
            rgba(184, 141, 59, 0.12),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #faf8f3 0%,
            #ffffff 58%,
            #f3eee4 100%
        );
}

.kr-cert-hero::before {
    content: "";

    position:
        absolute;

    top:
        -160px;

    right:
        -140px;

    width:
        430px;

    height:
        430px;

    border-radius:
        50%;

    background:
        rgba(184, 141, 59, 0.055);

    pointer-events:
        none;
}

.kr-cert-hero-layout {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(350px, 0.85fr);

    gap:
        clamp(50px, 7vw, 110px);

    align-items:
        center;
}

.kr-cert-hero-copy {
    max-width:
        820px;
}

.kr-cert-hero h1 {
    margin-bottom:
        28px;

    max-width:
        860px;

    font-size:
        clamp(50px, 6vw, 88px);

    line-height:
        0.98;
}

.kr-cert-hero-copy > p {
    max-width:
        690px;

    margin-bottom:
        0;

    font-size:
        clamp(17px, 1.45vw, 21px);

    line-height:
        1.82;
}


/* =========================================================
   07. HERO CARD
========================================================= */

.kr-cert-hero-card {
    position:
        relative;

    min-height:
        520px;

    padding:
        clamp(38px, 4vw, 58px);

    background:
        linear-gradient(
            145deg,
            #111111,
            #202020
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius:
        0;

    color:
        var(--kr-cert-white);

    box-shadow:
        var(--kr-cert-shadow);

    overflow:
        hidden;
}

.kr-cert-hero-card::before {
    content: "";

    position:
        absolute;

    right:
        -100px;

    bottom:
        -130px;

    width:
        280px;

    height:
        280px;

    border-radius:
        50%;

    background:
        rgba(184, 141, 59, 0.08);
}

.kr-cert-card-number {
    position:
        relative;

    z-index:
        2;

    display:
        block;

    margin-bottom:
        55px;

    color:
        var(--kr-cert-gold-light);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.12em;
}

.kr-cert-hero-card h2 {
    position:
        relative;

    z-index:
        2;

    margin-bottom:
        22px;

    color:
        var(--kr-cert-white);

    font-size:
        clamp(34px, 3.5vw, 52px);

    line-height:
        1.06;
}

.kr-cert-hero-card p {
    position:
        relative;

    z-index:
        2;

    margin-bottom:
        34px;

    color:
        rgba(255, 255, 255, 0.68);

    font-size:
        15px;
}

.kr-cert-hero-card ul {
    position:
        relative;

    z-index:
        2;

    margin-bottom:
        0;

    display:
        grid;

    gap:
        14px;
}

.kr-cert-hero-card li {
    position:
        relative;

    padding-left:
        20px;

    color:
        rgba(255, 255, 255, 0.82);

    font-size:
        14px;

    line-height:
        1.5;
}

.kr-cert-hero-card li::before {
    content: "";

    position:
        absolute;

    left:
        0;

    top:
        9px;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--kr-cert-gold-light);
}


/* =========================================================
   08. INTRODUCTION
========================================================= */

.kr-cert-intro {
    padding:
        clamp(90px, 9vw, 145px)
        0;
}

.kr-cert-intro-layout {
    display:
        grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    gap:
        clamp(55px, 8vw, 125px);

    align-items:
        start;
}

.kr-cert-intro h2 {
    max-width:
        600px;

    margin-bottom:
        0;

    font-size:
        clamp(42px, 4.7vw, 70px);

    line-height:
        1.03;
}

.kr-cert-intro-layout > div:last-child {
    max-width:
        690px;
}

.kr-cert-intro p {
    font-size:
        17px;
}

.kr-cert-intro p + p {
    margin-top:
        22px;
}


/* =========================================================
   09. SECTION HEADING
========================================================= */

.kr-cert-section-heading {
    max-width:
        830px;

    margin-bottom:
        clamp(48px, 6vw, 80px);
}

.kr-cert-section-heading h2 {
    margin-bottom:
        20px;

    font-size:
        clamp(42px, 5vw, 72px);

    line-height:
        1.02;
}

.kr-cert-section-heading p {
    max-width:
        680px;

    margin-bottom:
        0;

    font-size:
        17px;
}


/* =========================================================
   10. LABORATORIES
========================================================= */

.kr-cert-labs {
    padding:
        clamp(90px, 9vw, 145px)
        0;

    background:
        var(--kr-cert-ivory);
}

.kr-cert-lab-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        20px;
}

.kr-cert-lab-card {
    min-height:
        430px;

    padding:
        38px;

    background:
        var(--kr-cert-white);

    border:
        1px solid
        var(--kr-cert-border);

    transition:
        transform var(--kr-cert-transition),
        box-shadow var(--kr-cert-transition),
        border-color var(--kr-cert-transition);
}

.kr-cert-lab-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(184, 141, 59, 0.38);

    box-shadow:
        var(--kr-cert-shadow-small);
}

.kr-cert-lab-code {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        62px;

    height:
        62px;

    padding:
        0 14px;

    margin-bottom:
        58px;

    border:
        1px solid
        var(--kr-cert-border);

    border-radius:
        50%;

    color:
        var(--kr-cert-gold);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.10em;
}

.kr-cert-lab-card h3 {
    margin-bottom:
        18px;

    color:
        var(--kr-cert-green);

    font-family:
        var(--kr-cert-serif);

    font-size:
        clamp(28px, 2.4vw, 38px);

    font-weight:
        400;

    line-height:
        1.12;
}

.kr-cert-lab-card p {
    margin-bottom:
        28px;
}

.kr-cert-lab-card strong {
    display:
        block;

    color:
        var(--kr-cert-text);

    font-size:
        13px;

    line-height:
        1.6;
}


/* =========================================================
   11. REPORT SECTION
========================================================= */

.kr-cert-report {
    padding:
        clamp(95px, 10vw, 155px)
        0;
}

.kr-cert-report-layout {
    display:
        grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    gap:
        clamp(55px, 8vw, 125px);

    align-items:
        start;
}

.kr-cert-report-title {
    position:
        sticky;

    top:
        140px;
}

.kr-cert-report-title h2 {
    max-width:
        540px;

    margin-bottom:
        22px;

    font-size:
        clamp(44px, 5vw, 72px);

    line-height:
        1.01;
}

.kr-cert-report-title p {
    max-width:
        500px;

    margin-bottom:
        0;
}

.kr-cert-report-list {
    border-top:
        1px solid
        var(--kr-cert-border);
}

.kr-cert-report-item {
    display:
        grid;

    grid-template-columns:
        58px
        minmax(0, 1fr);

    gap:
        24px;

    padding:
        34px
        0;

    border-bottom:
        1px solid
        var(--kr-cert-border);
}

.kr-cert-report-item > span {
    padding-top:
        5px;

    color:
        var(--kr-cert-gold);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.12em;
}

.kr-cert-report-item h3 {
    margin-bottom:
        9px;

    color:
        var(--kr-cert-green);

    font-size:
        clamp(22px, 2vw, 30px);

    font-weight:
        400;
}

.kr-cert-report-item p {
    max-width:
        620px;

    margin-bottom:
        0;
}


/* =========================================================
   12. 4CS
========================================================= */

.kr-cert-four-c {
    padding:
        clamp(90px, 9vw, 145px)
        0;

    background:
        linear-gradient(
            180deg,
            #faf8f3,
            #ffffff
        );
}

.kr-cert-four-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top:
        1px solid
        var(--kr-cert-border);

    border-left:
        1px solid
        var(--kr-cert-border);
}

.kr-cert-four-card {
    min-height:
        300px;

    padding:
        34px;

    background:
        rgba(255, 255, 255, 0.72);

    border-right:
        1px solid
        var(--kr-cert-border);

    border-bottom:
        1px solid
        var(--kr-cert-border);
}

.kr-cert-four-card > span {
    display:
        block;

    margin-bottom:
        62px;

    color:
        var(--kr-cert-gold);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.13em;
}

.kr-cert-four-card h3 {
    margin-bottom:
        14px;

    color:
        var(--kr-cert-green);

    font-family:
        var(--kr-cert-serif);

    font-size:
        clamp(28px, 2.3vw, 38px);

    font-weight:
        400;
}

.kr-cert-four-card p {
    margin-bottom:
        0;

    font-size:
        15px;
}


/* =========================================================
   13. NATURAL / LAB-GROWN
========================================================= */

.kr-cert-origin {
    padding:
        clamp(95px, 10vw, 155px)
        0;

    background:
        var(--kr-cert-charcoal);

    color:
        var(--kr-cert-white);
}

.kr-cert-origin-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        24px;
}

.kr-cert-origin-card {
    min-height:
        500px;

    padding:
        clamp(38px, 4vw, 60px);

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    background:
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.01)
        );

    transition:
        border-color var(--kr-cert-transition),
        transform var(--kr-cert-transition);
}

.kr-cert-origin-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(214, 179, 110, 0.45);
}

.kr-cert-origin .kr-cert-eyebrow {
    color:
        var(--kr-cert-gold-light);
}

.kr-cert-origin-card h2 {
    max-width:
        570px;

    margin-bottom:
        24px;

    color:
        var(--kr-cert-white);

    font-size:
        clamp(38px, 4vw, 58px);

    line-height:
        1.03;
}

.kr-cert-origin-card p {
    max-width:
        580px;

    color:
        rgba(255, 255, 255, 0.66);
}

.kr-cert-origin-card p + p {
    margin-top:
        18px;
}

.kr-cert-origin-card > a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        34px;

    color:
        var(--kr-cert-white);

    font-size:
        14px;

    font-weight:
        600;

    transition:
        color var(--kr-cert-transition),
        gap var(--kr-cert-transition);
}

.kr-cert-origin-card > a span {
    color:
        var(--kr-cert-gold-light);
}

.kr-cert-origin-card > a:hover {
    color:
        var(--kr-cert-gold-light);

    gap:
        14px;
}


/* =========================================================
   14. LASER INSCRIPTION
========================================================= */

.kr-cert-inscription {
    padding:
        clamp(95px, 10vw, 155px)
        0;
}

.kr-cert-inscription-layout {
    display:
        grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(55px, 8vw, 120px);

    align-items:
        center;
}

.kr-cert-inscription h2 {
    max-width:
        590px;

    margin-bottom:
        24px;

    font-size:
        clamp(44px, 5vw, 72px);

    line-height:
        1.01;
}

.kr-cert-inscription-layout > div:first-child p {
    max-width:
        600px;

    font-size:
        16px;
}

.kr-cert-inscription-layout > div:first-child p + p {
    margin-top:
        18px;
}

.kr-cert-inscription-points {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top:
        1px solid
        var(--kr-cert-border);

    border-left:
        1px solid
        var(--kr-cert-border);
}

.kr-cert-inscription-points > div {
    min-height:
        210px;

    padding:
        30px;

    border-right:
        1px solid
        var(--kr-cert-border);

    border-bottom:
        1px solid
        var(--kr-cert-border);
}

.kr-cert-inscription-points strong {
    display:
        block;

    margin-bottom:
        11px;

    color:
        var(--kr-cert-green);

    font-size:
        17px;
}

.kr-cert-inscription-points span {
    display:
        block;

    color:
        var(--kr-cert-muted);

    font-size:
        14px;

    line-height:
        1.7;
}


/* =========================================================
   15. CERTIFICATION CLARITY
========================================================= */

.kr-cert-clarity {
    padding:
        clamp(90px, 9vw, 145px)
        0;

    background:
        var(--kr-cert-ivory);
}

.kr-cert-clarity-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        20px;
}

.kr-cert-clarity-grid article {
    min-height:
        230px;

    padding:
        36px;

    background:
        var(--kr-cert-white);

    border:
        1px solid
        var(--kr-cert-border);
}

.kr-cert-clarity-grid strong {
    display:
        block;

    margin-bottom:
        14px;

    color:
        var(--kr-cert-green);

    font-size:
        clamp(21px, 1.8vw, 27px);

    font-weight:
        500;
}

.kr-cert-clarity-grid p {
    max-width:
        590px;

    margin-bottom:
        0;
}


/* =========================================================
   16. KRULUXE APPROACH
========================================================= */

.kr-cert-approach {
    padding:
        clamp(95px, 10vw, 155px)
        0;
}

.kr-cert-approach-layout {
    display:
        grid;

    grid-template-columns:
        minmax(0, 0.86fr)
        minmax(0, 1.14fr);

    gap:
        clamp(55px, 8vw, 125px);

    align-items:
        start;
}

.kr-cert-approach h2 {
    max-width:
        570px;

    margin-bottom:
        24px;

    font-size:
        clamp(44px, 5vw, 72px);

    line-height:
        1.01;
}

.kr-cert-approach-layout > div:first-child p {
    max-width:
        560px;

    margin-bottom:
        0;
}

.kr-cert-approach-list {
    border-top:
        1px solid
        var(--kr-cert-border);
}

.kr-cert-approach-list > div {
    display:
        grid;

    grid-template-columns:
        56px
        minmax(0, 1fr);

    gap:
        20px;

    padding:
        30px
        0;

    border-bottom:
        1px solid
        var(--kr-cert-border);
}

.kr-cert-approach-list > div > span {
    padding-top:
        3px;

    color:
        var(--kr-cert-gold);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.12em;
}

.kr-cert-approach-list strong {
    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--kr-cert-green);

    font-size:
        21px;

    font-weight:
        500;
}

.kr-cert-approach-list p {
    margin-bottom:
        0;
}


/* =========================================================
   17. VERIFICATION
========================================================= */

.kr-cert-verify {
    padding:
        clamp(90px, 9vw, 145px)
        0;

    background:
        linear-gradient(
            135deg,
            var(--kr-cert-ivory-2),
            #ffffff
        );
}

.kr-cert-verify-inner {
    display:
        grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(50px, 8vw, 115px);

    align-items:
        center;
}

.kr-cert-verify h2 {
    max-width:
        610px;

    margin-bottom:
        22px;

    font-size:
        clamp(42px, 4.7vw, 68px);

    line-height:
        1.02;
}

.kr-cert-verify-inner > div:first-child p {
    max-width:
        560px;

    margin-bottom:
        0;
}

.kr-cert-verify-steps {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top:
        1px solid
        var(--kr-cert-border);

    border-left:
        1px solid
        var(--kr-cert-border);
}

.kr-cert-verify-steps > div {
    min-height:
        160px;

    padding:
        28px;

    border-right:
        1px solid
        var(--kr-cert-border);

    border-bottom:
        1px solid
        var(--kr-cert-border);
}

.kr-cert-verify-steps span {
    display:
        block;

    margin-bottom:
        28px;

    color:
        var(--kr-cert-gold);

    font-size:
        11px;

    font-weight:
        700;
}

.kr-cert-verify-steps strong {
    display:
        block;

    color:
        var(--kr-cert-green);

    font-size:
        18px;

    line-height:
        1.4;
}


/* =========================================================
   18. SUPPORT
========================================================= */

.kr-cert-support {
    padding:
        clamp(90px, 9vw, 145px)
        0;
}

.kr-cert-support-card {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        50px;

    align-items:
        center;

    padding:
        clamp(42px, 5vw, 70px);

    background:
        linear-gradient(
            135deg,
            #141414,
            #232323
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius:
        var(--kr-cert-radius-large);

    box-shadow:
        var(--kr-cert-shadow);

    color:
        var(--kr-cert-white);
}

.kr-cert-support .kr-cert-eyebrow {
    color:
        var(--kr-cert-gold-light);
}

.kr-cert-support h2 {
    max-width:
        760px;

    margin-bottom:
        18px;

    color:
        var(--kr-cert-white);

    font-size:
        clamp(38px, 4vw, 58px);

    line-height:
        1.03;
}

.kr-cert-support p {
    max-width:
        650px;

    margin-bottom:
        0;

    color:
        rgba(255, 255, 255, 0.67);
}

.kr-cert-support-actions {
    justify-content:
        flex-end;

    max-width:
        230px;
}

.kr-cert-support-actions .kr-cert-btn {
    width:
        100%;

    min-width:
        190px;
}


/* =========================================================
   19. RELATED LINKS
========================================================= */

.kr-cert-related {
    padding:
        clamp(90px, 9vw, 145px)
        0;

    background:
        var(--kr-cert-white);
}

.kr-cert-related-layout {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(340px, 0.7fr);

    gap:
        clamp(50px, 8vw, 120px);

    align-items:
        center;
}

.kr-cert-related h2 {
    max-width:
        720px;

    margin-bottom:
        0;

    font-size:
        clamp(44px, 5vw, 72px);

    line-height:
        1;
}

.kr-cert-related-links {
    border-top:
        1px solid
        var(--kr-cert-border);
}

.kr-cert-related-links a {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    min-height:
        64px;

    padding:
        17px
        4px;

    border-bottom:
        1px solid
        var(--kr-cert-border);

    color:
        var(--kr-cert-text);

    font-size:
        14px;

    font-weight:
        600;

    transition:
        color var(--kr-cert-transition),
        padding-left var(--kr-cert-transition);
}

.kr-cert-related-links a strong {
    color:
        var(--kr-cert-gold);

    font-size:
        18px;

    font-weight:
        400;

    transition:
        transform var(--kr-cert-transition);
}

.kr-cert-related-links a:hover {
    padding-left:
        8px;

    color:
        var(--kr-cert-gold-dark);
}

.kr-cert-related-links a:hover strong {
    transform:
        translateX(4px);
}


/* =========================================================
   20. FINAL CTA
========================================================= */

.kr-cert-final {
    padding:
        clamp(85px, 9vw, 135px)
        0;

    background:
        linear-gradient(
            135deg,
            var(--kr-cert-ivory-2),
            #ffffff
        );
}

.kr-cert-final-inner {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        50px;

    align-items:
        center;
}

.kr-cert-final h2 {
    max-width:
        820px;

    margin-bottom:
        18px;

    font-size:
        clamp(45px, 5vw, 72px);

    line-height:
        1;
}

.kr-cert-final p {
    max-width:
        650px;

    margin-bottom:
        0;

    font-size:
        16px;
}

.kr-cert-final-actions {
    justify-content:
        flex-end;
}


/* =========================================================
   21. REVEAL ANIMATION BASE
========================================================= */

.kr-cert-reveal {
    opacity:
        0;

    transform:
        translateY(24px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.kr-cert-reveal.is-visible {
    opacity:
        1;

    transform:
        translateY(0);
}


/* =========================================================
   22. FOCUS / ACCESSIBILITY
========================================================= */

.kr-cert-main a:focus-visible,
.kr-cert-main button:focus-visible {
    outline:
        2px solid
        var(--kr-cert-gold);

    outline-offset:
        4px;
}


/* =========================================================
   23. WORDPRESS / ASTRA COMPATIBILITY
========================================================= */

body.page-template-page-certification
.site-content,
body.page-template-page-certification
.ast-container,
body.page-template-page-certification
.entry-content,
body.page-template-page-certification
.site-main,
body.page-template-page-certification
#primary {
    max-width:
        none !important;

    padding-left:
        0 !important;

    padding-right:
        0 !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;
}

body.page-template-page-certification
#primary {
    width:
        100% !important;
}

body.page-template-page-certification
.entry-content {
    margin:
        0 !important;
}

body.page-template-page-certification
.entry-header,
body.page-template-page-certification
.ast-page-builder-template
.entry-header {
    display:
        none !important;
}

.kr-cert-main {
    margin:
        0 !important;

    padding:
        0 !important;
}

.kr-cert-main section {
    width:
        100%;
}


/* =========================================================
   24. LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    .kr-cert-container {
        width:
            min(
                calc(100% - 120px),
                var(--kr-cert-container)
            );
    }

}


/* =========================================================
   25. DESKTOP / SMALL LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .kr-cert-hero-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(330px, 0.75fr);

        gap:
            50px;
    }

    .kr-cert-lab-card {
        padding:
            32px;
    }

    .kr-cert-four-card {
        padding:
            28px;
    }

}


/* =========================================================
   26. TABLET LANDSCAPE
========================================================= */

@media (max-width: 1100px) {

    .kr-cert-hero-layout,
    .kr-cert-intro-layout,
    .kr-cert-report-layout,
    .kr-cert-inscription-layout,
    .kr-cert-approach-layout,
    .kr-cert-verify-inner,
    .kr-cert-related-layout {
        grid-template-columns:
            1fr;
    }

    .kr-cert-report-title {
        position:
            static;
    }

    .kr-cert-hero-card {
        min-height:
            0;
    }

    .kr-cert-lab-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .kr-cert-four-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .kr-cert-origin-grid {
        grid-template-columns:
            1fr;
    }

    .kr-cert-support-card {
        grid-template-columns:
            1fr;
    }

    .kr-cert-support-actions {
        justify-content:
            flex-start;

        max-width:
            none;
    }

    .kr-cert-support-actions .kr-cert-btn {
        width:
            auto;

        min-width:
            190px;
    }

    .kr-cert-final-inner {
        grid-template-columns:
            1fr;
    }

    .kr-cert-final-actions {
        justify-content:
            flex-start;
    }

}


/* =========================================================
   27. TABLET
========================================================= */

@media (max-width: 900px) {

    .kr-cert-container {
        width:
            calc(100% - 40px);
    }

    .kr-cert-clarity-grid {
        grid-template-columns:
            1fr;
    }

    .kr-cert-inscription-points,
    .kr-cert-verify-steps {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   28. MOBILE
========================================================= */

@media (max-width: 767px) {

    .kr-cert-container {
        width:
            calc(100% - 32px);
    }

    .kr-cert-hero {
        padding:
            78px
            0
            80px;
    }

    .kr-cert-hero h1 {
        font-size:
            clamp(46px, 13vw, 65px);

        line-height:
            0.98;
    }

    .kr-cert-hero-copy > p {
        font-size:
            17px;
    }

    .kr-cert-actions,
    .kr-cert-final-actions,
    .kr-cert-support-actions {
        display:
            grid;

        grid-template-columns:
            1fr;

        width:
            100%;

        gap:
            12px;
    }

    .kr-cert-btn {
        width:
            100%;

        min-height:
            56px;
    }

    .kr-cert-hero-card {
        padding:
            34px
            26px;
    }

    .kr-cert-card-number {
        margin-bottom:
            42px;
    }

    .kr-cert-intro,
    .kr-cert-labs,
    .kr-cert-report,
    .kr-cert-four-c,
    .kr-cert-origin,
    .kr-cert-inscription,
    .kr-cert-clarity,
    .kr-cert-approach,
    .kr-cert-verify,
    .kr-cert-support,
    .kr-cert-related,
    .kr-cert-final {
        padding-top:
            76px;

        padding-bottom:
            76px;
    }

    .kr-cert-intro h2,
    .kr-cert-section-heading h2,
    .kr-cert-report-title h2,
    .kr-cert-inscription h2,
    .kr-cert-approach h2,
    .kr-cert-verify h2,
    .kr-cert-related h2,
    .kr-cert-final h2 {
        font-size:
            clamp(40px, 11vw, 58px);
    }

    .kr-cert-lab-grid {
        grid-template-columns:
            1fr;
    }

    .kr-cert-lab-card {
        min-height:
            0;

        padding:
            30px
            24px;
    }

    .kr-cert-lab-code {
        margin-bottom:
            42px;
    }

    .kr-cert-report-item {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        gap:
            12px;

        padding:
            28px
            0;
    }

    .kr-cert-four-grid {
        grid-template-columns:
            1fr;
    }

    .kr-cert-four-card {
        min-height:
            0;

        padding:
            30px
            24px;
    }

    .kr-cert-four-card > span {
        margin-bottom:
            40px;
    }

    .kr-cert-origin-card {
        min-height:
            0;

        padding:
            34px
            26px;
    }

    .kr-cert-origin-card h2 {
        font-size:
            clamp(38px, 10vw, 52px);
    }

    .kr-cert-inscription-points > div,
    .kr-cert-verify-steps > div {
        min-height:
            0;
    }

    .kr-cert-clarity-grid article {
        min-height:
            0;

        padding:
            30px
            24px;
    }

    .kr-cert-approach-list > div {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        gap:
            12px;
    }

    .kr-cert-support-card {
        padding:
            34px
            24px;

        border-radius:
            18px;
    }

    .kr-cert-support h2 {
        font-size:
            clamp(38px, 10vw, 52px);
    }

    .kr-cert-support-actions .kr-cert-btn {
        width:
            100%;

        min-width:
            0;
    }

    .kr-cert-related-layout {
        gap:
            44px;
    }

}


/* =========================================================
   29. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .kr-cert-container {
        width:
            calc(100% - 28px);
    }

    .kr-cert-eyebrow {
        font-size:
            10px;

        letter-spacing:
            0.15em;
    }

    .kr-cert-hero {
        padding:
            66px
            0
            70px;
    }

    .kr-cert-hero h1 {
        font-size:
            47px;
    }

    .kr-cert-hero-card {
        padding:
            30px
            22px;
    }

    .kr-cert-intro,
    .kr-cert-labs,
    .kr-cert-report,
    .kr-cert-four-c,
    .kr-cert-origin,
    .kr-cert-inscription,
    .kr-cert-clarity,
    .kr-cert-approach,
    .kr-cert-verify,
    .kr-cert-support,
    .kr-cert-related,
    .kr-cert-final {
        padding-top:
            66px;

        padding-bottom:
            66px;
    }

    .kr-cert-lab-card,
    .kr-cert-origin-card,
    .kr-cert-clarity-grid article,
    .kr-cert-support-card {
        border-radius:
            16px;
    }

    .kr-cert-lab-card h3 {
        font-size:
            30px;
    }

    .kr-cert-four-card h3 {
        font-size:
            31px;
    }

    .kr-cert-related-links a {
        font-size:
            13px;
    }

}


/* =========================================================
   30. HOVER-FREE DEVICES
========================================================= */

@media (hover: none) {

    .kr-cert-btn:hover,
    .kr-cert-lab-card:hover,
    .kr-cert-origin-card:hover {
        transform:
            none;
    }

}


/* =========================================================
   31. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kr-cert-main *,
    .kr-cert-main *::before,
    .kr-cert-main *::after {
        animation:
            none !important;

        transition:
            none !important;

        scroll-behavior:
            auto !important;
    }

    .kr-cert-reveal {
        opacity:
            1 !important;

        transform:
            none !important;
    }

}


/* =========================================================
   32. PRINT
========================================================= */

@media print {

    .kr-cert-main {
        background:
            #ffffff !important;

        color:
            #000000 !important;
    }

    .kr-cert-actions,
    .kr-cert-final-actions,
    .kr-cert-support-actions {
        display:
            none !important;
    }

    .kr-cert-hero,
    .kr-cert-labs,
    .kr-cert-four-c,
    .kr-cert-origin,
    .kr-cert-clarity,
    .kr-cert-verify,
    .kr-cert-final {
        background:
            #ffffff !important;
    }

    .kr-cert-origin,
    .kr-cert-origin h2,
    .kr-cert-origin p,
    .kr-cert-support-card,
    .kr-cert-support-card h2,
    .kr-cert-support-card p {
        color:
            #000000 !important;

        background:
            #ffffff !important;
    }

    .kr-cert-hero-card {
        background:
            #ffffff !important;

        color:
            #000000 !important;

        border:
            1px solid #cccccc !important;

        box-shadow:
            none !important;
    }

    .kr-cert-hero-card h2,
    .kr-cert-hero-card p,
    .kr-cert-hero-card li {
        color:
            #000000 !important;
    }

}


/* =========================================================
   33. SELECTION
========================================================= */

.kr-cert-main ::selection {
    background:
        var(--kr-cert-gold);

    color:
        var(--kr-cert-white);
}


/* =========================================================
   END OF KRULUXE CERTIFICATION.CSS
========================================================= */