/* =========================================================
   OUR DIFFERENCE PAGE
========================================================= */

.difference-page {

    --diff-navy: #12213F;
    --diff-navy-dark: #0B172D;

    --diff-gold: #C9A227;
    --diff-gold-light: #E7CB6B;

    --diff-cream: #FAF7F0;

    --diff-text: #24324A;
    --diff-muted: #6B7280;

    --diff-border: #E7E1D5;

    --diff-white: #FFFFFF;

    color: var(--diff-text);

    overflow: hidden;
}


/* =========================================================
   COMMON
========================================================= */

.diff-container {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;
}


.diff-eyebrow {

    display: inline-block;

    font-family: 'Inter', sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .06em;

    /* text-transform: uppercase; */

    color: var(--diff-gold);

    margin-bottom: 14px;
}


.difference-page h1,
.difference-page h2,
.difference-page h3 {

    font-family: 'Cormorant Garamond', serif;
}


.difference-page h1 span,
.difference-page h2 span {

    color: #E7CB6B;
}



/* =========================================================
   OUR DIFFERENCE HERO — FULL-WIDTH TEXT, NO IMAGE
   Styled to match the Services intro
========================================================= */

.diff-hero {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 480px;

    padding: 100px 24px 90px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f8f7f2;
    text-align: center;
    overflow: hidden;
}

/* Subtle gold glow in the background */

.diff-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(201, 162, 39, 0.08),
            transparent 38%
        );

    pointer-events: none;
}

/* Main content container */

.diff-hero-inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1050px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Text content */

.diff-hero-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* Gold eyebrow heading */

.diff-hero .diff-eyebrow {
    display: block;

    margin: 0 0 24px;

    color: var(--difference-yellow, #c9a227);

    font-family: inherit;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;

    line-height: 1.1;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

/* Main headline */

.diff-hero h2 {
    max-width: 850px;

    margin: 0 auto 25px;

    color: #30343b;

    font-family: inherit;
    font-size: clamp(34px, 5vw, 42px);
    font-weight: 500;

    line-height: 1.15;
    letter-spacing: -1.2px;
}

/* Short decorative gold line */

.diff-gold-line {
    width: 45px;
    height: 3px;

    margin: 0 auto 25px;

    background: var(--difference-yellow, #c9a227);
    border-radius: 2px;
}

/* Supporting paragraph */

.diff-hero p {
    max-width: 790px;

    margin: 0 auto 32px;

    color: #686a6d;

    font-family: inherit;
    font-size: 16px;
    font-weight: 400;

    line-height: 1.85;
}

/* Consultation button */

.diff-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    padding: 15px 24px;

    background: var(--difference-yellow, #c9a227);
    border: 1px solid var(--difference-yellow, #c9a227);
    border-radius: 3px;

    color: #252a32;
    text-decoration: none;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

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

.diff-primary-btn:hover {
    background: #e2bd45;
    border-color: #e2bd45;

    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(40, 43, 52, 0.12);
}

.diff-primary-btn span {
    font-size: 20px;
    line-height: 1;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {
    .diff-hero {
        min-height: auto;
        padding: 75px 22px;
    }

    .diff-hero .diff-eyebrow {
        margin-bottom: 20px;

        font-size: clamp(30px, 6vw, 40px);
        letter-spacing: 2px;
    }

    .diff-hero h2 {
        font-size: clamp(30px, 5.5vw, 38px);
        line-height: 1.2;
        letter-spacing: -0.7px;
    }

    .diff-hero p {
        font-size: 15px;
        line-height: 1.8;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
    .diff-hero {
        padding: 58px 20px 65px;
    }

    .diff-hero .diff-eyebrow {
        font-size: 29px;
        letter-spacing: 1.5px;
    }

    .diff-hero h2 {
        font-size: 30px;
    }

    .diff-hero p {
        font-size: 14px;
        line-height: 1.8;
    }

    .diff-primary-btn {
        padding: 14px 19px;
    }
}


/* =========================================================
   INTRO
========================================================= */

.diff-intro {

    background: var(--diff-cream);

    padding: 105px 0;
}


.diff-intro-inner {

    max-width: 780px;

    text-align: center;
}


.diff-intro h2 {

    color: var(--diff-navy);

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

    line-height: 1;

    margin: 0 0 24px;

    font-weight: 600;
}


.diff-intro p {

    color: var(--diff-muted);

    font-size: 16px;

    line-height: 1.8;

    margin: auto;
}


/* =========================================================
   GENERAL SECTION
========================================================= */

.diff-section {

    padding: 110px 0;
}


.diff-technology {

    background: white;
}


.diff-section-heading {

    max-width: 700px;

    margin-bottom: 60px;
}


.diff-section-heading h2 {

    color: var(--diff-navy);

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

    line-height: 1;

    margin: 0 0 20px;

    font-weight: 600;
}


.diff-section-heading p {

    color: var(--diff-muted);

    font-size: 15px;

    line-height: 1.7;

    margin: 0;
}


.diff-center {

    text-align: center;

    margin-left: auto;

    margin-right: auto;
}


/* =========================================================
   TECHNOLOGY CARDS
========================================================= */

.diff-feature-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 28px;
}


.diff-feature-card {

    border: 1px solid var(--diff-border);

    background: white;

    transition: .35s ease;
}


.diff-feature-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 45px rgba(18,33,63,.11);

    border-color: var(--diff-gold-light);
}


.diff-feature-image {

    height: 270px;

    position: relative;

    overflow: hidden;
}


.diff-feature-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform .7s ease;
}


.diff-feature-card:hover img {

    transform: scale(1.05);
}


.diff-number {

    position: absolute;

    top: 18px;

    right: 18px;

    width: 42px;

    height: 42px;

    background: var(--diff-navy);

    color: var(--diff-gold-light);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 700;
}


.diff-feature-content {

    padding: 28px;
}


.diff-small-label {

    color: var(--diff-gold);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .13em;
}


.diff-feature-content h3 {

    color: var(--diff-navy);

    font-size: 30px;

    margin: 9px 0 12px;

    line-height: 1;
}


.diff-feature-content p {

    color: var(--diff-muted);

    font-size: 14px;

    line-height: 1.7;

    margin: 0;
}


/* =========================================================
   SAFETY
========================================================= */

.diff-safety {

    background: var(--diff-cream);
}


.diff-safety-inner {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;
}


.diff-safety-image {

    height: 560px;
}


.diff-safety-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


.diff-safety-content h2 {

    color: var(--diff-navy);

    font-size: clamp(40px, 4vw, 55px);

    line-height: 1;

    margin: 0 0 22px;
}


.diff-safety-content > p {

    color: var(--diff-muted);

    line-height: 1.75;

    font-size: 15px;

    margin-bottom: 35px;
}


.diff-safety-item {

    display: flex;

    gap: 17px;

    padding: 20px 0;

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


.diff-check {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: var(--diff-navy);

    color: var(--diff-gold-light);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    font-size: 13px;
}


.diff-safety-item h3 {

    color: var(--diff-navy);

    font-size: 23px;

    margin: 0 0 5px;
}


.diff-safety-item p {

    color: var(--diff-muted);

    font-size: 13px;

    line-height: 1.6;

    margin: 0;
}


/* =========================================================
   RUBBER DAM
========================================================= */

.diff-rubberdam {

    background: var(--diff-navy);

    padding: 110px 0;

    color: white;
}


.diff-rubber-inner {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;
}


.diff-rubber-content .diff-eyebrow {

    color: var(--diff-gold-light);
}


.diff-rubber-content h2 {

    color: white;

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

    line-height: 1;

    margin: 0 0 22px;
}


.diff-rubber-content h2 span {

    color: var(--diff-gold-light);
}


.diff-rubber-content > p {

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

    font-size: 15px;

    line-height: 1.8;

    margin-bottom: 35px;
}


.diff-rubber-points div {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 15px 0;

    border-top: 1px solid rgba(255,255,255,.13);
}


.diff-rubber-points span {

    color: var(--diff-gold-light);

    font-size: 12px;

    font-weight: 700;
}


.diff-rubber-points strong {

    color: white;

    font-size: 14px;

    font-weight: 500;
}


.diff-rubber-image {

    height: 520px;
}


.diff-rubber-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


/* =========================================================
   PHILOSOPHY
========================================================= */

.diff-philosophy {

    background: white;

    padding: 110px 0;
}


.diff-principles {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid var(--diff-border);

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


.diff-principle {

    padding: 35px 25px;

    border-right: 1px solid var(--diff-border);
}


.diff-principle:last-child {

    border-right: 0;
}


.diff-principle-number {

    color: var(--diff-gold);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .1em;
}


.diff-principle h3 {

    color: var(--diff-navy);

    font-size: 27px;

    margin: 16px 0 10px;
}


.diff-principle p {

    color: var(--diff-muted);

    font-size: 13px;

    line-height: 1.7;

    margin: 0;
}


/* =========================================================
   GUIDELINES
========================================================= */

.diff-guidelines {

    background: var(--diff-cream);

    padding: 110px 0;
}


.diff-guideline-inner {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;
}


.diff-guideline-image {

    height: 520px;
}


.diff-guideline-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


.diff-guideline-content h2 {

    color: var(--diff-navy);

    font-size: clamp(40px, 4vw, 55px);

    line-height: 1;

    margin: 0 0 22px;
}


.diff-guideline-content > p {

    color: var(--diff-muted);

    font-size: 15px;

    line-height: 1.75;
}


.diff-guideline-box {

    display: flex;

    gap: 18px;

    margin-top: 30px;

    padding: 22px;

    background: white;

    border-left: 3px solid var(--diff-gold);
}


.diff-guideline-box > span {

    color: var(--diff-gold);

    font-size: 28px;
}


.diff-guideline-box strong {

    color: var(--diff-navy);

    font-family: 'Cormorant Garamond', serif;

    font-size: 22px;
}


.diff-guideline-box p {

    color: var(--diff-muted);

    font-size: 13px;

    line-height: 1.5;

    margin: 5px 0 0;
}


/* =========================================================
   PREVENTION
========================================================= */

.diff-prevention {

    padding: 110px 0;

    background: white;
}


.diff-prevention-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid var(--diff-border);

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


.diff-prevention-card {

    padding: 35px 25px;

    border-right: 1px solid var(--diff-border);
}


.diff-prevention-card:last-child {

    border-right: 0;
}


.diff-prevention-card > span {

    color: var(--diff-gold);

    font-size: 12px;

    font-weight: 700;
}


.diff-prevention-card h3 {

    color: var(--diff-navy);

    font-size: 27px;

    line-height: 1;

    margin: 16px 0 12px;
}


.diff-prevention-card p {

    color: var(--diff-muted);

    font-size: 13px;

    line-height: 1.7;

    margin: 0;
}


/* =========================================================
   FEMALE PRACTICE
========================================================= */

.diff-female-practice {

    background: var(--diff-cream);

    padding: 110px 0;
}


.diff-female-inner {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;
}


.diff-female-image {

    height: 570px;
}


.diff-female-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


.diff-female-content h2 {

    color: var(--diff-navy);

    font-size: clamp(40px, 4vw, 55px);

    line-height: 1;

    margin: 0 0 22px;
}


.diff-female-content > p {

    color: var(--diff-muted);

    font-size: 15px;

    line-height: 1.8;
}


.diff-female-points {

    margin-top: 30px;
}


.diff-female-points div {

    display: flex;

    gap: 12px;

    padding: 10px 0;

    color: var(--diff-text);

    font-size: 14px;
}


.diff-female-points span {

    color: var(--diff-gold);

    font-weight: 700;
}


/* =========================================================
   EXPERIENCE
========================================================= */

.diff-experience {

    background: white;

    padding: 110px 0;
}


.diff-steps {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    border-top: 1px solid var(--diff-border);

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


.diff-step {

    padding: 35px 20px;

    border-right: 1px solid var(--diff-border);
}


.diff-step:last-child {

    border-right: 0;
}


.diff-step > span {

    color: var(--diff-gold);

    font-size: 12px;

    font-weight: 700;
}


.diff-step h3 {

    color: var(--diff-navy);

    font-size: 27px;

    margin: 14px 0 10px;
}


.diff-step p {

    color: var(--diff-muted);

    font-size: 13px;

    line-height: 1.7;

    margin: 0;
}


/* =========================================================
   STATEMENT
========================================================= */

.diff-statement {

    background: var(--diff-navy);

    padding: 120px 0;
}


.diff-statement-inner {

    max-width: 900px;

    text-align: center;
}


.diff-statement .diff-eyebrow {

    color: var(--diff-gold-light);
}


.diff-statement h2 {

    color: white;

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

    line-height: .98;

    margin: 0 0 25px;
}


.diff-statement h2 span {

    color: var(--diff-gold-light);

    display: block;
}


.diff-statement p {

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

    font-size: 16px;

    line-height: 1.8;

    max-width: 700px;

    margin: auto;
}


/* =========================================================
   FINAL CTA
========================================================= */

.diff-final-cta {

    background: var(--diff-cream);

    padding: 110px 0;
}


.diff-final-inner {

    max-width: 800px;

    text-align: center;
}


.diff-final-inner h2 {

    color: var(--diff-navy);

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

    line-height: 1;

    margin: 0 0 22px;
}


.diff-final-inner p {

    color: var(--diff-muted);

    font-size: 16px;

    line-height: 1.7;

    margin: 0 auto 30px;

    max-width: 620px;
}


.diff-cta-btn {

    background: var(--diff-navy);

    color: white;
}


.diff-cta-btn:hover {

    background: var(--diff-gold);

    color: var(--diff-navy);
}


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

@media (max-width: 1000px) {

    .diff-hero-inner,
    .diff-safety-inner,
    .diff-rubber-inner,
    .diff-guideline-inner,
    .diff-female-inner {

        grid-template-columns: 1fr;

        gap: 55px;
    }


    .diff-feature-grid {

        grid-template-columns: repeat(2, 1fr);
    }


    .diff-principles {

        grid-template-columns: repeat(2, 1fr);
    }


    .diff-principle:nth-child(2) {

        border-right: 0;
    }


    .diff-principle:nth-child(-n+2) {

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


    .diff-prevention-grid {

        grid-template-columns: repeat(2, 1fr);
    }


    .diff-prevention-card:nth-child(2) {

        border-right: 0;
    }


    .diff-prevention-card:nth-child(-n+2) {

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


    .diff-steps {

        grid-template-columns: repeat(3, 1fr);
    }

}


@media (max-width: 700px) {

    .diff-container {

        width: calc(100% - 32px);
    }


    .diff-hero {

        padding: 70px 0 90px;
    }


    .diff-hero-inner {

        gap: 55px;
    }


    .diff-hero h1 {

        font-size: 47px;
    }


    .diff-hero-image {

        height: 400px;
    }


    .diff-hero-card {

        left: 15px;

        bottom: -25px;

        width: 250px;
    }


    .diff-section,
    .diff-safety,
    .diff-rubberdam,
    .diff-guidelines,
    .diff-female-practice,
    .diff-experience,
    .diff-prevention,
    .diff-philosophy,
    .diff-final-cta {

        padding: 80px 0;
    }


    .diff-intro {

        padding: 80px 0;
    }


    .diff-feature-grid {

        grid-template-columns: 1fr;
    }


    .diff-feature-image {

        height: 280px;
    }


    .diff-safety-image,
    .diff-rubber-image,
    .diff-guideline-image,
    .diff-female-image {

        height: 400px;
    }


    .diff-principles,
    .diff-prevention-grid,
    .diff-steps {

        grid-template-columns: 1fr;
    }


    .diff-principle,
    .diff-prevention-card,
    .diff-step {

        border-right: 0;

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


    .diff-principle:last-child,
    .diff-prevention-card:last-child,
    .diff-step:last-child {

        border-bottom: 0;
    }


    .diff-principle:nth-child(-n+2),
    .diff-prevention-card:nth-child(-n+2) {

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


    .diff-steps {

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

}


@media (max-width: 420px) {

    .diff-hero h1 {

        font-size: 42px;
    }


    .diff-hero-image {

        height: 340px;
    }


    .diff-safety-image,
    .diff-rubber-image,
    .diff-guideline-image,
    .diff-female-image {

        height: 340px;
    }

}


/* new css from here  */

/* =========================================================
   OUR DIFFERENCE PAGE
========================================================= */

.difference-page {

    --difference-navy: #12213F;
    --difference-navy-dark: #0C172D;

    --difference-gold: #C9A227;
    --difference-gold-light: #E7CB6B;

    --difference-cream: #FAF7F0;
    --difference-white: #FFFFFF;

    --difference-text: #252A38;
    --difference-grey: #697080;

    --difference-border: #E4E1D8;

    background: var(--difference-cream);

    color: var(--difference-text);

    overflow: hidden;
}


/* =========================================================
   RESET
========================================================= */

.difference-page *,
.difference-page *::before,
.difference-page *::after {

    box-sizing: border-box;

}


.difference-page a {

    color: inherit;

    text-decoration: none;

}


.difference-page img {

    max-width: 100%;

}


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

.difference-hero {

    padding: 100px 6.5% 90px;

    background:

        radial-gradient(
            circle at 85% 25%,
            rgba(201, 162, 39, .10),
            transparent 28%
        ),

        var(--difference-cream);

}


.difference-hero-inner {

    width: min(1200px, 100%);

    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(260px, .65fr);

    gap: 80px;

    align-items: end;

}


.difference-hero-copy {

    max-width: 850px;

}


.difference-eyebrow {

    display: inline-block;

    margin-bottom: 17px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.5px;

    color: var(--difference-gold);

}


.difference-hero h1 {

    margin: 0;

    font-size: clamp(48px, 6vw, 80px);

    line-height: .99;

    letter-spacing: -3px;

    font-weight: 700;

    color: var(--difference-navy);

}


.difference-hero h1 span {

    color: var(--difference-gold);

}


.difference-hero-copy > p {

    max-width: 710px;

    margin: 32px 0 0;

    font-size: 18px;

    line-height: 1.75;

    color: var(--difference-grey);

}


.difference-hero-side {

    padding-left: 30px;

    border-left: 1px solid var(--difference-border);

}


.hero-side-line {

    width: 52px;

    height: 3px;

    margin-bottom: 20px;

    background: var(--difference-gold);

}


.difference-hero-side p {

    margin: 0;

    font-size: 15px;

    line-height: 1.75;

    color: var(--difference-grey);

}


/* =========================================================
   INTRODUCTION
========================================================= */

.difference-intro {

    padding: 75px 6.5%;

    background: var(--difference-white);

    border-top: 1px solid rgba(18, 33, 63, .06);

    border-bottom: 1px solid rgba(18, 33, 63, .06);

}


.difference-intro-inner {

    width: min(1100px, 100%);

    margin: auto;

    display: grid;

    grid-template-columns: 160px minmax(0, 1fr);

    gap: 70px;

}


.intro-label {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.intro-label span {

    font-size: 52px;

    line-height: 1;

    font-weight: 700;

    color: var(--difference-gold-light);

}


.intro-label small {

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.8px;

    color: var(--difference-navy);

}


.intro-content {

    max-width: 780px;

}


.intro-content h2 {

    margin: 0 0 22px;

    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.1;

    letter-spacing: -1.2px;

    color: var(--difference-navy);

}


.intro-content p {

    margin: 0 0 16px;

    font-size: 16px;

    line-height: 1.8;

    color: var(--difference-grey);

}


.intro-content p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   DIFFERENCE LIST
========================================================= */

.difference-list {

    padding: 105px 6.5% 115px;

}


.difference-list-heading {

    width: min(1200px, 100%);

    margin: 0 auto 50px;

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 50px;

}


.difference-list-heading h2 {

    margin: 0;

    font-size: clamp(36px, 4.5vw, 55px);

    line-height: 1.05;

    letter-spacing: -1.7px;

    color: var(--difference-navy);

}


.difference-list-heading > p {

    max-width: 390px;

    margin: 0;

    font-size: 15px;

    line-height: 1.75;

    color: var(--difference-grey);

}


/* =========================================================
   ONE COLUMN GRID
========================================================= */

.difference-grid {

    width: min(1200px, 100%);

    margin: auto;

    display: grid;

    grid-template-columns: 1fr;

    gap: 30px;

}


/* =========================================================
   HORIZONTAL CARD
========================================================= */

.difference-card {

    display: grid;

    grid-template-columns: 42% 58%;

    min-height: 335px;

    background: var(--difference-white);

    border: 1px solid var(--difference-border);

    border-radius: 22px;

    overflow: hidden;

    opacity: 1;
    transform: none;

    box-shadow:
        0 8px 28px rgba(18, 33, 63, .045);

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .3s ease;

}


.difference-card:hover {

    transform: translateY(-6px);

    border-color: rgba(201, 162, 39, .45);

    box-shadow:
        0 24px 60px rgba(18, 33, 63, .12);

}


/* =========================================================
   REVERSE CARDS
========================================================= */

.difference-card-reverse {

    grid-template-columns: 58% 42%;

}


.difference-card-reverse .difference-card-image {

    order: 2;

}


.difference-card-reverse .difference-card-content {

    order: 1;

}


/* =========================================================
   CARD IMAGE
========================================================= */

.difference-card-image {

    position: relative;

    min-height: 335px;

    overflow: hidden;

    background: #E8E7E1;

}


.difference-card-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(18, 33, 63, .08),
            transparent 60%
        );

    pointer-events: none;

}


.difference-card-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .9s cubic-bezier(.2,.8,.2,1);

}


.difference-card:hover .difference-card-image img {

    transform: scale(1.055);

}


/* =========================================================
   IMAGE NUMBER
========================================================= */

.image-number {

    position: absolute;

    z-index: 2;

    top: 20px;

    left: 20px;

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(18, 33, 63, .9);

    color: #FFFFFF;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    backdrop-filter: blur(5px);

}


/* =========================================================
   IMAGE ARROW
========================================================= */

.image-arrow {

    position: absolute;

    z-index: 2;

    right: 20px;

    bottom: 20px;

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .94);

    color: var(--difference-navy);

    font-size: 22px;

    transition:
        transform .35s ease,
        background .35s ease;

}


.difference-card:hover .image-arrow {

    background: var(--difference-gold);

    transform: translateX(5px);

}


/* =========================================================
   CARD CONTENT
========================================================= */

.difference-card-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 50px 60px;

}


.card-category {

    margin-bottom: 14px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    color: var(--difference-gold);

}


.difference-card-content h3 {

    max-width: 600px;

    margin: 0 0 17px;

    font-size: clamp(28px, 3vw, 42px);

    line-height: 1.1;

    letter-spacing: -1.2px;

    color: var(--difference-navy);

}


.difference-card-content p {

    max-width: 570px;

    margin: 0;

    font-size: 16px;

    line-height: 1.75;

    color: var(--difference-grey);

}


.card-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    width: fit-content;

    margin-top: 27px;

    font-size: 14px;

    font-weight: 800;

    color: var(--difference-navy);

    transition:
        color .3s ease,
        gap .3s ease;

}


.card-link > span {

    color: var(--difference-gold);

    font-size: 19px;

    transition:
        transform .3s ease;

}


.difference-card:hover .card-link {

    gap: 15px;

    color: var(--difference-gold);

}


.difference-card:hover .card-link > span {

    transform: translateX(4px);

}


/* =========================================================
   PHILOSOPHY
========================================================= */

.difference-philosophy {

    padding: 100px 6.5%;

    background: var(--difference-navy);

    color: #FFFFFF;

}


.philosophy-inner {

    width: min(1100px, 100%);

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;

}


.difference-philosophy .difference-eyebrow {

    color: var(--difference-gold-light);

}


.philosophy-heading h2 {

    margin: 0;

    font-size: clamp(36px, 4vw, 55px);

    line-height: 1.08;

    letter-spacing: -1.5px;

    color: #FFFFFF;

}


.philosophy-text p {

    margin: 0 0 20px;

    font-size: 16px;

    line-height: 1.85;

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

}


.philosophy-text p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   CTA
========================================================= */

.difference-cta {

    padding: 85px 6.5%;

    background: var(--difference-cream);

}


.difference-cta-inner {

    width: min(1100px, 100%);

    margin: auto;

    padding: 55px 60px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    background: var(--difference-white);

    border: 1px solid var(--difference-border);

    border-radius: 24px;

    box-shadow:
        0 15px 45px rgba(18, 33, 63, .06);

}


.difference-cta-copy {

    max-width: 650px;

}


.difference-cta h2 {

    margin: 0 0 14px;

    font-size: clamp(30px, 4vw, 44px);

    line-height: 1.1;

    color: var(--difference-navy);

}


.difference-cta p {

    margin: 0;

    font-size: 15px;

    line-height: 1.7;

    color: var(--difference-grey);

}


/* =========================================================
   CTA BUTTONS
========================================================= */

.cta-actions {

    display: flex;

    flex-direction: column;

    gap: 12px;

    flex-shrink: 0;

}


.cta-button {

    min-width: 205px;

    padding: 14px 21px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 800;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;

}


.cta-button span {

    font-size: 18px;

}


.cta-button.primary {

    background: var(--difference-navy);

    color: #FFFFFF;

}


.cta-button.primary:hover {

    background: var(--difference-gold);

    color: var(--difference-navy);

    transform: translateY(-2px);

}


.cta-button.secondary {

    border: 1px solid var(--difference-navy);

    color: var(--difference-navy);

    background: transparent;

}


.cta-button.secondary:hover {

    background: var(--difference-navy);

    color: #FFFFFF;

    transform: translateY(-2px);

}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal-card {

    opacity: 1;

    transform: translateY(35px);

    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .3s ease;

}


.reveal-card.visible {

    opacity: 1;

    transform: translateY(0);

}


.reveal-card.visible:hover {

    transform: translateY(-6px);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .difference-hero {

        padding: 75px 5%;

    }


    .difference-hero-inner {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .difference-hero-side {

        max-width: 500px;

    }


    .difference-intro {

        padding: 65px 5%;

    }


    .difference-intro-inner {

        grid-template-columns: 110px 1fr;

        gap: 40px;

    }


    .difference-list {

        padding: 80px 5% 90px;

    }


    .difference-list-heading {

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

    }


    .difference-card,
    .difference-card-reverse {

        grid-template-columns: 45% 55%;

    }


    .difference-card-content {

        padding: 40px;

    }


    .difference-card-content h3 {

        font-size: 30px;

    }


    .philosophy-inner {

        gap: 50px;

    }


    .difference-cta {

        padding: 70px 5%;

    }


    .difference-cta-inner {

        padding: 45px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .difference-hero {

        padding: 60px 22px 65px;

    }


    .difference-hero h1 {

        font-size: clamp(42px, 12vw, 58px);

        letter-spacing: -2px;

    }


    .difference-hero-copy > p {

        font-size: 16px;

        line-height: 1.7;

    }


    .difference-hero-side {

        padding-left: 20px;

    }


    .difference-intro {

        padding: 55px 22px;

    }


    .difference-intro-inner {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .intro-label {

        flex-direction: row;

        align-items: center;

        gap: 15px;

    }


    .intro-label span {

        font-size: 38px;

    }


    .difference-list {

        padding: 65px 18px 75px;

    }


    .difference-list-heading h2 {

        font-size: 38px;

    }


    /*
       On mobile the horizontal cards
       become vertical cards.
    */

    .difference-card,
    .difference-card-reverse {

        display: flex;

        flex-direction: column;

        min-height: 0;

    }


    .difference-card-reverse .difference-card-image,
    .difference-card-reverse .difference-card-content {

        order: initial;

    }


    .difference-card-image {

        height: 250px;

        min-height: 250px;

    }


    .difference-card-content {

        padding: 30px 25px 34px;

    }


    .difference-card-content h3 {

        font-size: 28px;

        letter-spacing: -.7px;

    }


    .difference-card-content p {

        font-size: 15px;

        line-height: 1.7;

    }


    .difference-philosophy {

        padding: 70px 22px;

    }


    .philosophy-inner {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .philosophy-heading h2 {

        font-size: 38px;

    }


    .difference-cta {

        padding: 45px 18px;

    }


    .difference-cta-inner {

        padding: 35px 25px;

        flex-direction: column;

        align-items: flex-start;

        gap: 30px;

        border-radius: 20px;

    }


    .difference-cta h2 {

        font-size: 34px;

    }


    .cta-actions {

        width: 100%;

    }


    .cta-button {

        width: 100%;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .difference-page *,
    .difference-page *::before,
    .difference-page *::after {

        transition-duration: .01ms !important;

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

    }


    .reveal-card {

        opacity: 1;

        transform: none;

    }

}