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

 

   COMPONENTS

 

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

 

 

 

.section {

 

    padding: 88px 55px;

 

    background:

 

        radial-gradient(circle at center top, rgba(201, 164, 90, 0.055), transparent 42%),

 

        var(--black);

 

}

 

 

 

.container {

 

    width: 100%;

 

    max-width: 1240px;

 

    margin: 0 auto;

 

}

 

 

 

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

 

   SECTION HEADER

 

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

 

 

 

.section-header {

 

    text-align: center;

 

    margin-bottom: 66px;

 

}

 

 

 

.section-label {

 

    font-family: var(--font-main);

 

    color: var(--gold);

 

    font-size: 20px;

 

    letter-spacing: 8px;

 

    text-transform: uppercase;

 

    font-weight: 500;

 

    margin-bottom: 24px;

 

}

 

 

 

.section-description {

 

    max-width: 620px;

 

    margin: 0 auto;

 

    color: var(--text-soft);

 

    font-size: 18px;

 

    line-height: 1.9;

 

    font-weight: 300;

 

}

 

 

 

.section-line {

 

    width: 190px;

 

    height: 1px;

 

    background: linear-gradient(

 

        90deg,

 

        transparent,

 

        rgba(201, 164, 90, 0.75),

 

        transparent

 

    );

 

    margin: 30px auto 0;

 

}

 

 

 

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

 

   BENEFITS

 

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

 

 

 

.benefits-section {

 

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

 

}

 

 

 

.benefits-grid {

 

    display: grid;

 

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

 

    gap: 26px;

 

}

 

 

 

.benefit-card {

 

    position: relative;

 

    overflow: hidden;

 

    min-height: 420px;

 

    background:

 

        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),

 

        #070707;

 

    border: 1px solid rgba(201, 164, 90, 0.16);

 

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);

 

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

 

}

 

 

 

.benefit-card::before {

 

    content: "";

 

    position: absolute;

 

    inset: 1px;

 

    border: 1px solid rgba(225, 196, 122, 0.06);

 

    z-index: 3;

 

    pointer-events: none;

 

}

 

 

 

.benefit-card::after {

 

    content: "";

 

    position: absolute;

 

    inset: 0;

 

    background:

 

        linear-gradient(

 

            180deg,

 

            rgba(5, 5, 5, 0.02) 0%,

 

            rgba(5, 5, 5, 0.28) 38%,

 

            rgba(5, 5, 5, 0.96) 84%

 

        );

 

    z-index: 1;

 

}

 

 

 

.benefit-card:hover {

 

    transform: translateY(-10px);

 

    border-color: rgba(225, 196, 122, 0.52);

 

    box-shadow:

 

        0 28px 65px rgba(0, 0, 0, 0.58),

 

        0 0 34px rgba(201, 164, 90, 0.10),

 

        inset 0 0 0 1px rgba(255, 255, 255, 0.035);

 

}

 

 

 

.benefit-card img {

 

    width: 100%;

 

    height: 420px;

 

    object-fit: cover;

 

    opacity: 0.68;

 

    filter: saturate(0.92) contrast(1.04);

 

    transition: transform 0.65s ease, opacity 0.65s ease, filter 0.65s ease;

 

}

 

 

 

.benefit-card:hover img {

 

    opacity: 0.92;

 

    transform: scale(1.065);

 

    filter: saturate(1.04) contrast(1.08);

 

}

 

 

 

.benefit-content {

 

    position: absolute;

 

    z-index: 2;

 

    right: 0;

 

    left: 0;

 

    bottom: 0;

 

    padding: 36px 24px 34px;

 

    text-align: center;

 

}

 

 

 

.benefit-content h3 {

 

    font-family: var(--font-main);

 

    color: var(--text-luxury);

 

    font-size: 22px;

 

    font-weight: 500;

 

    line-height: 1.45;

 

    margin-bottom: 13px;

 

}

 

 

 

.benefit-content p {

 

    color: var(--text-soft);

 

    font-size: 15px;

 

    line-height: 1.9;

 

    font-weight: 300;

 

}

 

 

 

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

 

   INSPIRATION CATEGORY CARDS

 

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

 

 

 

.inspiration-section {

 

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

 

}

 

 

 

.inspiration-grid {

 

    display: grid;

 

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

 

    gap: 26px;

 

}

 

 

 

.inspiration-card {

 

    position: relative;

 

    width: 100%;

 

    height: 390px;

 

    overflow: hidden;

 

    padding: 0;

 

    border: 1px solid rgba(201, 164, 90, 0.34);

 

    background: #070707;

 

    color: inherit;

 

    font: inherit;

 

    text-align: inherit;

 

    cursor: pointer;

 

    box-shadow: inset 0 0 0 1px rgba(201, 164, 90, 0.08);

 

    transition:

 

        transform 0.4s ease,

 

        border-color 0.4s ease,

 

        box-shadow 0.4s ease;

 

}

 

 

 

.inspiration-card:focus-visible {

 

    outline: 2px solid var(--gold-light);

 

    outline-offset: 4px;

 

}

 

 

 

.inspiration-card img {

 

    width: 100%;

 

    height: 100%;

 

    object-fit: cover;

 

    opacity: 0.78;

 

    filter: saturate(0.9) contrast(1.05);

 

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

 

}

 

 

 

.inspiration-card::after {

 

    content: "";

 

    position: absolute;

 

    inset: 0;

 

    background:

 

        linear-gradient(

 

            180deg,

 

            rgba(5, 5, 5, 0.05) 0%,

 

            rgba(5, 5, 5, 0.35) 58%,

 

            rgba(5, 5, 5, 0.92) 100%

 

        );

 

    transition: background 0.55s ease;

 

}

 

 

 

.inspiration-overlay {

 

    position: absolute;

 

    z-index: 2;

 

    right: 34px;

 

    bottom: 32px;

 

    color: var(--text-luxury);

 

    font-family: var(--font-main);

 

    font-size: 32px;

 

    font-weight: 500;

 

    transition: transform 0.45s ease, color 0.45s ease;

 

}

 

 

 

.inspiration-overlay span {

 

    font-family: var(--font-main);

 

    color: var(--text-luxury);

 

    font-weight: 500;

 

}

 

 

 

.inspiration-overlay span::after {

 

    content: "  ←";

 

    font-family: var(--font-main);

 

    color: var(--gold-light);

 

    font-size: 22px;

 

    opacity: 0;

 

    margin-right: 8px;

 

    transition: opacity 0.4s ease, margin-right 0.4s ease;

 

}

 

 

 

.inspiration-card:hover,

 

.inspiration-card.active {

 

    transform: translateY(-4px);

 

    border-color: rgba(225, 196, 122, 0.68);

 

    box-shadow:

 

        0 0 24px rgba(201, 164, 90, 0.16),

 

        inset 0 0 0 1px rgba(225, 196, 122, 0.14);

 

}

 

 

 

.inspiration-card:hover img,

 

.inspiration-card.active img {

 

    transform: scale(1.055);

 

    opacity: 0.95;

 

    filter: saturate(1.04) contrast(1.08);

 

}

 

 

 

.inspiration-card:hover::after,

 

.inspiration-card.active::after {

 

    background:

 

        linear-gradient(

 

            180deg,

 

            rgba(5, 5, 5, 0.02) 0%,

 

            rgba(5, 5, 5, 0.22) 50%,

 

            rgba(5, 5, 5, 0.86) 100%

 

        );

 

}

 

 

 

.inspiration-card:hover .inspiration-overlay,

 

.inspiration-card.active .inspiration-overlay {

 

    transform: translateY(-8px);

 

    color: var(--gold-light);

 

}

 

 

 

.inspiration-card:hover .inspiration-overlay span::after,

 

.inspiration-card.active .inspiration-overlay span::after {

 

    opacity: 1;

 

    margin-right: 14px;

 

}

 

 

 

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

 

   IN-PAGE HORIZONTAL GALLERY

 

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

 

 

 

.inspiration-gallery[hidden] {

 

    display: none;

 

}

 

 

 

.inspiration-gallery {

 

    margin-top: 54px;

 

    padding: 34px 34px 38px;

 

    border: 1px solid rgba(201, 164, 90, 0.36);

 

    background:

 

        radial-gradient(circle at 50% 0%, rgba(201, 164, 90, 0.07), transparent 34%),

 

        linear-gradient(145deg, rgba(12, 12, 12, 0.98), rgba(5, 5, 5, 0.98));

 

    box-shadow:

 

        0 24px 58px rgba(0, 0, 0, 0.42),

 

        inset 0 0 0 1px rgba(225, 196, 122, 0.05);

 

    animation: inspirationGalleryReveal 0.45s ease both;

 

}

 

 

 

@keyframes inspirationGalleryReveal {

 

    from {

 

        opacity: 0;

 

        transform: translateY(18px);

 

    }

 

 

 

    to {

 

        opacity: 1;

 

        transform: translateY(0);

 

    }

 

}

 

 

 

.inspiration-gallery-header {

 

    display: flex;

 

    align-items: flex-start;

 

    justify-content: space-between;

 

    gap: 24px;

 

    margin-bottom: 26px;

 

}

 

 

 

.inspiration-gallery-label {

 

    margin-bottom: 6px;

 

    color: var(--gold);

 

    font-size: 13px;

 

    font-weight: 500;

 

    letter-spacing: 4px;

 

    direction: ltr;

 

}

 

 

 

.inspiration-gallery-title {

 

    color: var(--gold-light);

 

    font-family: var(--font-main);

 

    font-size: 36px;

 

    font-weight: 400;

 

    line-height: 1.25;

 

}

 

 

 

.inspiration-gallery-close {

 

    width: 44px;

 

    height: 44px;

 

    flex: 0 0 44px;

 

    border: 1px solid rgba(201, 164, 90, 0.52);

 

    border-radius: 50%;

 

    display: inline-flex;

 

    align-items: center;

 

    justify-content: center;

 

    background: transparent;

 

    color: var(--gold-light);

 

    font-family: Arial, sans-serif;

 

    font-size: 28px;

 

    line-height: 1;

 

    cursor: pointer;

 

    transition:

 

        transform 0.3s ease,

 

        border-color 0.3s ease,

 

        box-shadow 0.3s ease;

 

}

 

 

 

.inspiration-gallery-close:hover {

 

    transform: rotate(90deg);

 

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

 

    box-shadow: 0 0 15px rgba(201, 164, 90, 0.16);

 

}

 

 

 

.inspiration-gallery-shell {

 

    position: relative;

 

    display: grid;

 

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

 

    align-items: center;

 

    gap: 16px;

 

}

 

 

 

.inspiration-gallery-track {

 

    display: flex;

 

    gap: 22px;

 

    overflow-x: auto;

 

    overflow-y: hidden;

 

    padding: 8px 4px 18px;

 

    direction: ltr;

 

    scroll-behavior: smooth;

 

    scroll-snap-type: x mandatory;

 

    scrollbar-width: thin;

 

    scrollbar-color: rgba(201, 164, 90, 0.62) rgba(255, 255, 255, 0.04);

 

    overscroll-behavior-inline: contain;

 

}

 

 

 

.inspiration-gallery-track::-webkit-scrollbar {

 

    height: 8px;

 

}

 

 

 

.inspiration-gallery-track::-webkit-scrollbar-track {

 

    background: rgba(255, 255, 255, 0.035);

 

}

 

 

 

.inspiration-gallery-track::-webkit-scrollbar-thumb {

 

    border-radius: 999px;

 

    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));

 

}

 

 

 

.inspiration-gallery-item {

 

    position: relative;

 

    flex: 0 0 clamp(270px, 34vw, 420px);

 

    height: 390px;

 

    overflow: hidden;

 

    border: 1px solid rgba(235, 196, 105, 0.92);

 

    background: #070707;

 

    scroll-snap-align: start;

 

    box-shadow:

 

        0 16px 36px rgba(0, 0, 0, 0.42),

 

        0 0 12px rgba(225, 196, 122, 0.22),

 

        inset 0 0 0 1px rgba(255, 225, 150, 0.20);

 

}

 

 

 

.inspiration-gallery-item::before {

 

    content: "";

 

    position: absolute;

 

    inset: 0;

 

    z-index: 3;

 

    pointer-events: none;

 

    border: 1px solid rgba(255, 224, 145, 0.78);

 

    box-shadow:

 

        inset 0 0 16px rgba(225, 196, 122, 0.18),

 

        0 0 10px rgba(201, 164, 90, 0.20);

 

    opacity: 0.9;

 

}

 

 

 

.inspiration-gallery-item::after {

 

    content: "";

 

    position: absolute;

 

    inset: 0;

 

    z-index: 2;

 

    pointer-events: none;

 

    background:

 

        linear-gradient(90deg, rgba(201, 164, 90, 0.09), transparent 13%, transparent 87%, rgba(201, 164, 90, 0.09)),

 

        linear-gradient(180deg, rgba(255, 220, 135, 0.05), transparent 18%, transparent 78%, rgba(5, 5, 5, 0.24));

 

}

 

 

 

.inspiration-gallery-item img {

 

    width: 100%;

 

    height: 100%;

 

    object-fit: cover;

 

    object-position: center;

 

    filter: brightness(0.94) contrast(1.05) saturate(0.98);

 

    transition: transform 0.65s ease, filter 0.65s ease;

 

}

 

 

 

.inspiration-gallery-item:hover img {

 

    transform: scale(1.04);

 

    filter: brightness(1) contrast(1.07) saturate(1.02);

 

}

 

 

 

.inspiration-gallery-arrow {

 

    width: 50px;

 

    height: 50px;

 

    border: 1px solid rgba(201, 164, 90, 0.52);

 

    border-radius: 50%;

 

    display: inline-flex;

 

    align-items: center;

 

    justify-content: center;

 

    background: rgba(5, 5, 5, 0.82);

 

    color: var(--gold-light);

 

    font-family: Arial, sans-serif;

 

    font-size: 38px;

 

    line-height: 1;

 

    cursor: pointer;

 

    transition:

 

        transform 0.3s ease,

 

        border-color 0.3s ease,

 

        box-shadow 0.3s ease,

 

        opacity 0.3s ease;

 

}

 

 

 

.inspiration-gallery-arrow:hover:not(:disabled) {

 

    transform: scale(1.06);

 

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

 

    box-shadow: 0 0 16px rgba(201, 164, 90, 0.17);

 

}

 

 

 

.inspiration-gallery-arrow:disabled {

 

    opacity: 0.28;

 

    cursor: default;

 

}

 

 

 

.inspiration-gallery-empty {

 

    margin: 20px 0 4px;

 

    padding: 34px 20px;

 

    border: 1px solid rgba(201, 164, 90, 0.22);

 

    color: var(--text-soft);

 

    font-size: 17px;

 

    text-align: center;

 

    background: rgba(201, 164, 90, 0.025);

 

}

 

 

 

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

 

   RESPONSIVE

 

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

 

 

 

@media (max-width: 1024px) {

 

    .benefits-grid {

 

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

 

    }

 

 

 

    .inspiration-card {

 

        height: 340px;

 

    }

 

 

 

    .inspiration-gallery-item {

 

        flex-basis: clamp(270px, 48vw, 390px);

 

        height: 360px;

 

    }

 

}

 

 

 

@media (max-width: 768px) {

 

    .section {

 

        padding: 64px 22px;

 

    }

 

 

 

    .section-label {

 

        font-size: 16px;

 

        letter-spacing: 7px;

 

    }

 

 

 

    .section-description {

 

        font-size: 16px;

 

    }

 

 

 

    .benefits-grid,

 

    .inspiration-grid {

 

        grid-template-columns: 1fr;

 

        gap: 20px;

 

    }

 

 

 

    .benefit-card,

 

    .benefit-card img {

 

        min-height: 360px;

 

        height: 360px;

 

    }

 

 

 

    .benefit-content h3 {

 

        font-size: 21px;

 

    }

 

 

 

    .inspiration-card {

 

        height: 310px;

 

    }

 

 

 

    .inspiration-overlay {

 

        right: 24px;

 

        bottom: 24px;

 

        font-size: 27px;

 

    }

 

 

 

    .inspiration-gallery {

 

        margin-top: 36px;

 

        padding: 26px 18px 28px;

 

    }

 

 

 

    .inspiration-gallery-title {

 

        font-size: 30px;

 

    }

 

 

 

    .inspiration-gallery-shell {

 

        grid-template-columns: 1fr;

 

        gap: 14px;

 

    }

 

 

 

    .inspiration-gallery-arrow {

 

        position: absolute;

 

        z-index: 4;

 

        top: 50%;

 

        width: 42px;

 

        height: 42px;

 

        font-size: 32px;

 

        transform: translateY(-50%);

 

    }

 

 

 

    .inspiration-gallery-arrow:hover:not(:disabled) {

 

        transform: translateY(-50%) scale(1.05);

 

    }

 

 

 

    .inspiration-gallery-arrow-prev {

 

        left: 8px;

 

    }

 

 

 

    .inspiration-gallery-arrow-next {

 

        right: 8px;

 

    }

 

 

 

    .inspiration-gallery-track {

 

        width: 100%;

 

        padding-inline: 2px;

 

    }

 

 

 

    .inspiration-gallery-item {

 

        flex-basis: min(92vw, 390px);
        height: 420px;
        border-radius: 18px;
        border-color: rgba(235, 196, 105, 0.45);
    }

 


    /* Mobile-only framing for the first necklace image.
       Desktop remains unchanged. */
    .gallery-necklaces-1 img {
        object-fit: cover;
        object-position: center 34%;
        padding: 0;
    }
}

 

 

 

@media (max-width: 480px) {

 

    .inspiration-gallery-header {

 

        gap: 14px;

 

    }

 

 

 

    .inspiration-gallery-label {

 

        font-size: 11px;

 

        letter-spacing: 3px;

 

    }

 

 

 

    .inspiration-gallery-title {

 

        font-size: 27px;

 

    }

 

 

 

    .inspiration-gallery-close {

 

        width: 40px;

 

        height: 40px;

 

        flex-basis: 40px;

 

    }

 

 

 

    .inspiration-gallery-item {

 

        flex-basis: 92vw;
        height: 400px;
    }

 

}

 

 

 

 

 

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

 

   GALLERY IMAGE POSITION FIXES

 

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

 

 

 

/* ring_galery6.png - show the full side profile instead of cropping the top */

 

.gallery-rings-6 img {

 

    object-fit: contain;

 

    object-position: center;

 

    padding: 12px;

 

    background: #050505;

 

}

 

 

 

/* neck_galery1.png - move the necklace lower so the pendant is fully visible */

 

.gallery-necklaces-1 img {

 

    object-fit: contain;

 

    object-position: center 50%;

 

}

 

 

 

.inspiration-gallery-item:hover {

 

    border-color: rgba(255, 221, 135, 1);

 

    box-shadow:

 

        0 18px 40px rgba(0, 0, 0, 0.46),

 

        0 0 20px rgba(225, 196, 122, 0.34),

 

        inset 0 0 0 1px rgba(255, 232, 172, 0.28);

 

}

/* Hide first necklace image on mobile only */
@media (max-width:768px){

    .gallery-necklaces-1{
        display:none;
    }

}