@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --gold: #b08d57;
    --gold-deep: #8d6b3f;
    --gold-soft: #d6bd91;
    --gold-pale: #f0e2c7;
    --champagne: #e8d8b8;
    --black: #111111;
    --dark: #181818;
    --white: #ffffff;
    --off-white: #faf9f6;
    --cream: #f5f1e8;
    --soft-gray: #77766f;
    --light-gray: #e8e6e1;
    --border: rgba(17, 17, 17, 0.08);
    --shadow-soft: 0 18px 40px rgba(17, 17, 17, 0.08);
    --shadow-strong: 0 26px 60px rgba(17, 17, 17, 0.12);
    --radius: 14px;
    --radius-sm: 8px;
    --radius-xs: 4px;
    --container: 1200px;
    --side-space: 32px;
    --header-height: 88px;
    --transition: 0.35s ease;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: var(--off-white);
    color: var(--dark);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.menu-open,
body.search-open,
body.modal-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

p {
    margin: 0 0 1rem;
    color: rgba(17, 17, 17, 0.8);
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.8rem;
    font-family: 'Cormorant Garamond', serif;
    color: var(--black);
    line-height: 1;
    letter-spacing: -0.03em;
    font-weight: 600;
}

h1 {
    font-size: clamp(2.9rem, 5vw, 6.2rem);
}

h2 {
    font-size: clamp(2.4rem, 3vw, 4.4rem);
}

h3 {
    font-size: clamp(1.7rem, 2vw, 2.6rem);
}

h4 {
    font-size: clamp(1.35rem, 1.5vw, 1.8rem);
}

::selection {
    background: rgba(176, 141, 87, 0.22);
}

:focus-visible {
    outline: 3px solid rgba(176, 141, 87, 0.55);
    outline-offset: 3px;
}

.section-container,
.header-container,
.footer-container,
.page-hero-content,
.container {
    width: min(var(--container), calc(100% - (var(--side-space) * 2)));
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #15130f;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(214, 189, 145, 0.2);
    transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.site-header.header-scrolled {
    background: #100f0d;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22);
    border-color: rgba(214, 189, 145, 0.28);
}

.header-container {
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 236px;
    height: 76px;
    flex-shrink: 0;
}

.logo img {
    width: 180px;
    height: auto;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 10px 18px rgba(17, 17, 17, 0.08));
}

.main-navigation {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.nav-item {
    position: relative;
}

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.94rem;
    letter-spacing: 0.04em;
    font-weight: 500;
    transition: color var(--transition);
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 6px;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-soft));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease;
}

.nav-link:hover,
.nav-link.active,
.nav-link:focus-visible {
    color: var(--gold-soft);
}

.nav-link:hover::after,
.nav-link.active::after,
.nav-link:focus-visible::after {
    transform: scaleX(1);
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 220px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(17, 17, 17, 0.05);
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-soft);
    padding: 0.7rem 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all var(--transition);
    z-index: 30;
    display: block;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.7rem 1rem;
    color: var(--black);
    transition: background var(--transition), color var(--transition), transform var(--transition);
}

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible {
    background: rgba(176, 141, 87, 0.08);
    color: var(--gold-deep);
    transform: translateX(2px);
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown.menu-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.header-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header-cta {
    display: none;
}

.header-action,
.mobile-menu-button,
.auth-toggle,
.search-close,
.icon-button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(17, 17, 17, 0.08);
    background: rgba(255, 255, 255, 0.06);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.header-action:hover,
.mobile-menu-button:hover,
.auth-toggle:hover,
.search-close:hover,
.icon-button:hover,
.mobile-menu-button.is-active {
    background: rgba(176, 141, 87, 0.09);
    border-color: rgba(176, 141, 87, 0.38);
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(176, 141, 87, 0.12);
}

.header-cta,
.btn,
button[type='submit'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    border-radius: 999px;
    padding: 0.9rem 1.5rem;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    transition: all var(--transition);
    white-space: nowrap;
}

.header-cta,
.btn-primary,
button[type='submit'] {
    background: linear-gradient(135deg, var(--gold-deep), var(--gold));
    color: var(--white);
    box-shadow: 0 16px 35px rgba(176, 141, 87, 0.2);
}

.header-cta:hover,
.btn-primary:hover,
button[type='submit']:hover {
    background: var(--black);
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(17, 17, 17, 0.14);
}

.btn-outline {
    background: transparent;
    color: var(--gold-deep);
    border: 1px solid rgba(176, 141, 87, 0.7);
}

.btn-outline:hover {
    background: var(--gold);
    color: var(--white);
    border-color: var(--gold);
}

.btn-link {
    background: transparent;
    color: var(--gold-deep);
    padding-left: 0;
    padding-right: 0;
    letter-spacing: 0.06em;
}

.mobile-menu-button {
    display: none;
    position: relative;
    overflow: hidden;
}

.mobile-menu-button span {
    position: absolute;
    width: 18px;
    height: 2px;
    background: var(--gold-soft);
    border-radius: 999px;
    transition: transform var(--transition), opacity var(--transition), top var(--transition);
}

.mobile-menu-button span:nth-child(1) {
    top: 15px;
}

.mobile-menu-button span:nth-child(2) {
    top: 21px;
}

.mobile-menu-button span:nth-child(3) {
    top: 27px;
}

.mobile-menu-button.is-active span:nth-child(1) {
    top: 21px;
    transform: rotate(45deg);
}

.mobile-menu-button.is-active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-button.is-active span:nth-child(3) {
    top: 21px;
    transform: rotate(-45deg);
}

main {
    display: block;
}

section {
    padding: 90px 0;
}

.page-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #111111, #1d1b18);
}

.hero-section {
    background: linear-gradient(135deg,
            #000000 0%,
            #02050a 40%,
            #071321 100%);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
    min-height: 0;
    padding: 0;
}

.hero-content {
    width: min(var(--container), calc(100% - 32px));
    margin: 0 auto;
    padding: 80px 0 80px;
    z-index: 2;
    position: relative;
}

.hero-subtitle,
.section-label,
.content-label {
    display: inline-block;
    font-size: 0.72rem;
    line-height: 1.5;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gold);
    max-width: 100%;
    overflow-wrap: anywhere;
}

.hero-title {
    color: var(--white);
    margin: 1rem 0 1rem;
    max-width: 620px;
}

.hero-title span,
.section-heading h2 span,
.page-hero-content h1 span,
.inline-accent {
    color: var(--gold-soft);
    font-style: italic;
}

.hero-description {
    max-width: 540px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.04rem;
    margin-bottom: 2rem;
}

.hero-buttons {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;
    gap: 14px;
}

.final-cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.hero-image {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 630px;
    overflow: hidden;
}

.hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    transition: transform 0.8s ease;
}

.page-hero-image img,
.category-image img,
.intro-image img,
.contact-form-image img,
.card-image img,
.image-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.hero-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(17, 17, 17, 0.35),
            rgba(17, 17, 17, 0.05));
    z-index: 1;
    pointer-events: none;
}

.hero-image:hover img {
    transform: scale(1.02);
}


.page-hero-image:hover img,
.category-image:hover img,
.intro-image:hover img,
.card-image:hover img,
.image-block:hover img {
    transform: scale(1.04);
}

.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.72rem;
    z-index: 2;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 2.1rem;
}

.section-heading.centered {
    text-align: center;
    display: block;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
}

.text-link i {
    transition: transform var(--transition);
}

.text-link:hover i {
    transform: translateX(5px);
}

.intro-grid,
.contact-form-grid,
.newsletter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

.intro-image,
.contact-form-image,
.card-image,
.image-block {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    background: var(--cream);
}

.intro-section,
.jewellery-categories-section,
.four-cs-section,
.diamond-shapes-section,
.why-us-section,
.faq-preview-section {
    background: linear-gradient(180deg, rgba(245, 241, 232, 0.72), rgba(255, 255, 255, 0.35));
}

.jewellery-categories-section,
.four-cs-section,
.why-us-section {
    background: rgba(255, 255, 255, 0.58);
}

.featured-collection-section,
.craftsmanship-section {
    padding: 0;
}

.featured-collection-container,
.craftsmanship-container {
    width: min(var(--container), calc(100% - 32px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.featured-image,
.craftsmanship-image {
    min-height: 540px;
    overflow: hidden;
}

.featured-image img,
.craftsmanship-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.featured-image:hover img,
.craftsmanship-image:hover img {
    transform: scale(1.04);
}

.featured-content,
.craftsmanship-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem clamp(2rem, 5vw, 5rem);
    background: linear-gradient(135deg, #1a1815, #30281e);
    color: var(--white);
}

.featured-content h2,
.featured-content p,
.craftsmanship-content h2,
.craftsmanship-content p,
.featured-content .section-label,
.craftsmanship-content .section-label {
    color: var(--white);
}

.collection-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.8rem;
}

.collection-details>div {
    padding: 0.85rem 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.collection-details strong,
.collection-details span {
    display: block;
}

.collection-details strong {
    color: var(--gold-soft);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
}

.collection-details span {
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
}

.craftsmanship-content {
    order: 1;
}

.craftsmanship-image {
    order: 2;
}

.why-us-grid,
.testimonial-slider,
.faq-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.2rem;
}

.why-us-card,
.testimonial-card,
.faq-preview-content,
.faq-preview-list {
    padding: 1.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 12px 24px rgba(17, 17, 17, 0.035);
}

.why-us-card,
.testimonial-card {
    text-align: center;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.why-us-card:hover,
.testimonial-card:hover {
    transform: translateY(-5px);
    border-color: rgba(176, 141, 87, 0.35);
    box-shadow: var(--shadow-soft);
}

.why-us-icon,
.testimonial-stars {
    color: var(--gold-deep);
    font-size: 1.25rem;
}

.why-us-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(176, 141, 87, 0.12);
}

.why-us-card p,
.testimonial-card p {
    margin-bottom: 0;
}

.testimonial-slider {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
    margin: 0 auto;
}

.testimonial-author {
    margin-top: 1.1rem;
    color: var(--gold-deep);
    font-weight: 700;
}

.faq-preview-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
}

.faq-preview-list {
    display: grid;
    gap: 0.8rem;
}

.shapes-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.2rem;
}

.shape-card {
    display: block;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 24px rgba(17, 17, 17, 0.035);
    text-align: center;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.shape-card:hover {
    transform: translateY(-5px);
    border-color: rgba(176, 141, 87, 0.35);
    box-shadow: var(--shadow-soft);
}

.shape-image {
    height: 220px;
    overflow: hidden;
    background: var(--cream);
}

.shape-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.shape-card:hover .shape-image img {
    transform: scale(1.05);
}

.shape-card h3 {
    margin: 1rem 0 0.15rem;
}

.shape-card>span {
    display: block;
    padding: 0 0.7rem 1.15rem;
    color: var(--gold-deep);
    font-size: 0.78rem;
}

.our-story-section,
.philosophy-section,
.craft-process-section {
    background: linear-gradient(180deg, rgba(245, 241, 232, 0.72), rgba(255, 255, 255, 0.3));
}

.story-grid,
.craftsmanship-detail-container {
    width: min(var(--container), calc(100% - 32px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    align-items: center;
}

.story-image,
.craftsmanship-detail-image {
    position: relative;
    min-height: 460px;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.story-image img,
.craftsmanship-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-image-caption {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: grid;
    min-width: 132px;
    padding: 0.9rem;
    background: rgba(17, 17, 17, 0.76);
    color: var(--white);
    text-align: center;
}

.story-image-caption span,
.story-image-caption small {
    color: var(--gold-soft);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
}

.story-image-caption strong {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    line-height: 1;
}

.philosophy-grid,
.process-timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.2rem;
    margin-top: 2.2rem;
}

.philosophy-card,
.process-step {
    position: relative;
    padding: 1.5rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 24px rgba(17, 17, 17, 0.035);
    text-align: center;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.philosophy-card:hover,
.process-step:hover {
    transform: translateY(-5px);
    border-color: rgba(176, 141, 87, 0.35);
    box-shadow: var(--shadow-soft);
}

.philosophy-number,
.process-number {
    color: var(--gold-deep);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    font-weight: 700;
}

.philosophy-icon,
.process-icon {
    width: 58px;
    height: 58px;
    margin: 0.8rem auto 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.14), rgba(214, 189, 145, 0.18));
    color: var(--gold-deep);
    font-size: 1.25rem;
}

.philosophy-card p,
.process-step p {
    margin-bottom: 0;
}

.craftsmanship-detail-section {
    padding: 0;
    background: #1a1815;
}

.craftsmanship-detail-container {
    width: 100%;
    max-width: none;
    gap: 0;
}

.craftsmanship-detail-content {
    padding: 4rem clamp(2rem, 6vw, 6rem);
    color: var(--white);
}

.craftsmanship-detail-content h2,
.craftsmanship-detail-content p,
.craftsmanship-detail-content .section-label {
    color: var(--white);
}

.craftsmanship-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1.8rem;
}

.craft-stat {
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.craft-stat strong,
.craft-stat span {
    display: block;
}

.craft-stat strong {
    color: var(--gold-soft);
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    line-height: 1;
}

.craft-stat span {
    margin-top: 0.35rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
}

.sourcing-section,
.vision-mission-section,
.heritage-section,
.craft-process-section {
    background: linear-gradient(180deg, rgba(245, 241, 232, 0.72), rgba(255, 255, 255, 0.3));
}

.vision-mission-section,
.heritage-section {
    background: rgba(255, 255, 255, 0.58);
}

.sourcing-grid,
.vision-mission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    align-items: stretch;
}

.sourcing-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 1rem;
}

.sourcing-image {
    min-height: 420px;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.sourcing-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sourcing-list {
    display: grid;
    gap: 0.65rem;
    margin: 0.8rem 0 1.5rem;
}

.sourcing-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: rgba(17, 17, 17, 0.78);
}

.sourcing-list i {
    margin-top: 0.35rem;
    color: var(--gold-deep);
}

.vision-card,
.mission-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(1.7rem, 4vw, 3rem);
    border-radius: var(--radius);
    border: 1px solid rgba(176, 141, 87, 0.2);
    box-shadow: var(--shadow-soft);
}

.vision-card {
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.15), rgba(255, 255, 255, 0.88));
}

.mission-card {
    background: linear-gradient(135deg, rgba(24, 24, 24, 0.96), rgba(51, 42, 29, 0.96));
}

.vision-card h2,
.vision-card p,
.vision-card .section-label,
.mission-card h2,
.mission-card p,
.mission-card .section-label {
    color: inherit;
}

.mission-card h2,
.mission-card p,
.mission-card .section-label {
    color: var(--white);
}

.vision-icon,
.mission-icon {
    width: 62px;
    height: 62px;
    margin: 1.2rem 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--gold-deep);
    background: rgba(255, 255, 255, 0.65);
    font-size: 1.35rem;
}

.mission-icon {
    color: var(--gold-soft);
    background: rgba(255, 255, 255, 0.1);
}

.heritage-timeline {
    position: relative;
    display: grid;
    gap: 0;
    margin: 2.2rem auto 0;
    max-width: 900px;
}

.heritage-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 104px;
    width: 1px;
    background: rgba(176, 141, 87, 0.3);
}

.heritage-item {
    position: relative;
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1.5rem;
    padding: 1.25rem 0;
}

.heritage-year {
    position: relative;
    z-index: 1;
    color: var(--gold-deep);
    background: rgba(255, 255, 255, 0.9);
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
}

.heritage-content {
    padding: 0 0 1.25rem 1rem;
    border-bottom: 1px solid var(--border);
}

.heritage-content h3 {
    margin-bottom: 0.35rem;
}

.heritage-content p {
    margin-bottom: 0;
}

.about-final-cta {
    padding: clamp(60px, 8vw, 100px) 1rem;
    background: linear-gradient(135deg, #171512, #30281e);
}

.about-final-cta-content {
    width: min(760px, 100%);
    margin: 0 auto;
    text-align: center;
}

.about-final-cta-content h2,
.about-final-cta-content p,
.about-final-cta-content .section-label {
    color: var(--white);
}

.cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1.6rem;
}

.diamond-shapes-intro-section,
.shape-overview-section,
.shape-selection-section,
.shape-setting-section,
.diamond-guide-intro-section,
.guide-navigation-section,
.buying-steps-section,
.guide-setting-section,
.guide-metal-section,
.questions-to-ask-section,
.certificate-check-section,
.four-cs-intro-section,
.four-cs-balance-section,
.four-cs-comparison-section,
.faq-intro-section,
.faq-category-section,
.faq-content-section {
    background: linear-gradient(180deg, rgba(245, 241, 232, 0.72), rgba(255, 255, 255, 0.3));
}

.shape-overview-section,
.buying-steps-section,
.four-cs-balance-section,
.faq-content-section {
    background: rgba(255, 255, 255, 0.58);
}

.shape-filter,
.four-cs-navigation,
.faq-category-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.shape-filter-button,
.four-c-nav-item,
.faq-category-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(17, 17, 17, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--black);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    transition: all var(--transition);
}

.shape-filter-button:hover,
.shape-filter-button.active,
.four-c-nav-item:hover,
.four-c-nav-item.active,
.faq-category-button:hover,
.faq-category-button.active {
    background: var(--black);
    color: var(--gold-soft);
    border-color: var(--black);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.shape-overview-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.1rem;
}

.shape-overview-grid .shape-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 24px rgba(17, 17, 17, 0.035);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.shape-overview-grid .shape-card:hover {
    transform: translateY(-6px);
    border-color: rgba(176, 141, 87, 0.4);
    box-shadow: var(--shadow-soft);
}

.shape-card-image {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: var(--cream);
}

.shape-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.shape-overview-grid .shape-card:hover img {
    transform: scale(1.05);
}

.shape-card-number,
.shape-detail-number,
.guide-section-number {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.76);
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 700;
}

.shape-card-number {
    right: 0.8rem;
    bottom: 0.8rem;
    width: 38px;
    height: 38px;
}

.shape-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
}

.shape-card-content>span,
.related-guide-content>span,
.setting-guide-content>span {
    color: var(--gold-deep);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    font-weight: 700;
}

.shape-card-content h3 {
    margin: 0.45rem 0 0.15rem;
}

.shape-card-content p {
    margin-bottom: 0.7rem;
}

.shape-card-content>i {
    margin-top: auto;
    color: var(--gold-deep);
}

.shape-detail-section,
.guide-content-section,
.four-c-detail-section,
.report-anatomy-section,
.report-vs-appraisal-section,
.grading-laboratory-section,
.inscription-section,
.final-checklist-section {
    background: linear-gradient(180deg, rgba(245, 241, 232, 0.65), rgba(255, 255, 255, 0.25));
}

.shape-detail-section.alternate,
.guide-content-section.alternate,
.four-c-detail-section.alternate {
    background: rgba(255, 255, 255, 0.58);
}

.shape-detail-grid,
.guide-intro-grid,
.guide-content-grid,
.guide-metal-grid,
.shape-setting-grid,
.four-c-detail-grid,
.final-checklist-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    align-items: center;
}

.shape-detail-image,
.guide-intro-image,
.guide-content-image,
.guide-metal-image,
.shape-setting-image,
.four-c-detail-image,
.final-checklist-image {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.shape-detail-image img,
.guide-intro-image img,
.guide-content-image img,
.guide-metal-image img,
.shape-setting-image img,
.four-c-detail-image img,
.final-checklist-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shape-detail-number,
.guide-section-number {
    left: 1rem;
    bottom: 1rem;
    width: 58px;
    height: 58px;
}

.shape-detail-content,
.guide-content-text,
.four-c-detail-content,
.buying-guide-content,
.guide-intro-content,
.guide-metal-content,
.shape-setting-content {
    max-width: 620px;
}

.shape-characteristics,
.guide-four-cs,
.shape-choice-grid,
.metal-options,
.certificate-checklist,
.laboratory-points,
.inscription-points,
.checklist {
    display: grid;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.shape-characteristics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shape-characteristics>div,
.guide-four-cs>a,
.shape-choice-grid>a,
.metal-options>div,
.certificate-checklist>div,
.laboratory-points>div,
.inscription-points>div,
.checklist label {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.78);
}

.shape-characteristics span,
.shape-choice-grid span,
.guide-four-cs small,
.metal-options strong {
    display: block;
    color: var(--soft-gray);
    font-size: 0.72rem;
}

.shape-characteristics strong,
.shape-choice-grid strong,
.guide-four-cs strong {
    display: block;
    color: var(--black);
}

.guide-navigation {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.8rem;
}

.guide-nav-card {
    display: grid;
    gap: 0.45rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.8);
    color: var(--black);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.guide-nav-card:hover,
.buying-step-card:hover,
.setting-guide-card:hover,
.question-card:hover,
.certificate-check-card:hover,
.balance-card:hover {
    transform: translateY(-5px);
    border-color: rgba(176, 141, 87, 0.4);
    box-shadow: var(--shadow-soft);
}

.guide-nav-card>span,
.step-number,
.certificate-c-number,
.question-card>span,
.balance-card>span {
    color: var(--gold-deep);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    font-weight: 700;
}

.guide-nav-card i,
.step-icon,
.certificate-c-icon,
.question-card>i,
.balance-icon,
.verification-icon,
.comparison-icon {
    color: var(--gold-deep);
    font-size: 1.2rem;
}

.buying-steps-grid,
.setting-guide-grid,
.questions-grid,
.certificate-check-grid,
.mistakes-grid,
.balance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}

.buying-step-card,
.setting-guide-card,
.question-card,
.certificate-check-card,
.mistake-card,
.balance-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
    padding: 1.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 24px rgba(17, 17, 17, 0.035);
    text-align: center;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.buying-step-card .text-link,
.setting-guide-card .text-link {
    margin-top: auto;
}

.step-icon,
.certificate-c-icon,
.question-card>i,
.balance-icon,
.comparison-icon {
    width: 56px;
    height: 56px;
    margin: 0.9rem auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(176, 141, 87, 0.12);
}

.setting-guide-card {
    overflow: hidden;
    padding: 0;
    align-items: stretch;
    text-align: left;
}

.setting-guide-image,
.related-guide-image {
    height: 220px;
    overflow: hidden;
}

.setting-guide-image img,
.related-guide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.setting-guide-content,
.related-guide-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.2rem;
}

.setting-guide-content .text-link,
.related-guide-content>i {
    margin-top: auto;
    color: var(--gold-deep);
}

.guide-highlight,
.consultation-guide-banner,
.faq-help-banner,
.shape-guide-banner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #1a1815, #30281e);
    color: var(--white);
    box-shadow: var(--shadow-soft);
}

.guide-highlight h2,
.guide-highlight p,
.guide-highlight .section-label,
.consultation-guide-banner h2,
.consultation-guide-banner p,
.consultation-guide-banner .section-label,
.faq-help-banner h2,
.faq-help-banner p,
.faq-help-banner .section-label,
.shape-guide-banner h2,
.shape-guide-banner p,
.shape-guide-banner .section-label {
    color: var(--white);
}

.guide-highlight-icon,
.consultation-guide-icon,
.faq-help-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(214, 189, 145, 0.4);
    border-radius: 50%;
    color: var(--gold-soft);
}

.guide-metal-grid,
.shape-setting-grid {
    align-items: stretch;
}

.metal-options,
.guide-four-cs,
.shape-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.four-c-detail-grid {
    align-items: stretch;
}

.grading-scale,
.four-c-info-grid,
.clarity-feature-grid,
.carat-examples,
.balance-grid {
    margin-top: 1.5rem;
}

.scale-title {
    margin-bottom: 0.65rem;
    color: var(--gold-deep);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    font-weight: 700;
}

.scale-items,
.color-spectrum,
.clarity-scale-items,
.carat-examples {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
}

.scale-item,
.color-grade,
.clarity-grade,
.carat-item {
    min-width: 0;
    padding: 0.7rem 0.35rem;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.78);
    text-align: center;
}

.scale-item strong,
.scale-item span,
.color-grade strong,
.color-grade span,
.clarity-grade strong,
.clarity-grade span,
.carat-item>span {
    display: block;
    overflow-wrap: anywhere;
    font-size: 0.68rem;
}

.four-c-info-grid,
.clarity-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.four-c-info-card,
.clarity-feature {
    padding: 1.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.info-icon,
.clarity-feature-icon {
    color: var(--gold-deep);
    font-size: 1.25rem;
}

.four-cs-grid,
.certificate-four-cs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
}

.four-c-card,
.certificate-c-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 1.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.82);
    text-align: center;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.four-c-card:hover,
.certificate-c-card:hover {
    transform: translateY(-5px);
    border-color: rgba(176, 141, 87, 0.4);
    box-shadow: var(--shadow-soft);
}

.four-c-card .learn-more,
.certificate-c-card .text-link {
    margin-top: auto;
    color: var(--gold-deep);
    font-size: 0.74rem;
    font-weight: 700;
}

.four-cs-table-wrapper {
    overflow-x: auto;
    margin-top: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.four-cs-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.82);
}

.four-cs-table th,
.four-cs-table td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.four-cs-table th {
    background: rgba(176, 141, 87, 0.1);
    color: var(--gold-deep);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.faq-intro-content {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.faq-search-box {
    position: relative;
    max-width: 620px;
    margin: 1.6rem auto 0;
}

.faq-search-box i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold-deep);
}

.faq-search-box input {
    width: 100%;
    min-height: 54px;
    padding: 0.8rem 1rem 0.8rem 2.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
}

.faq-category-block {
    max-width: 900px;
    margin: 0 auto 3rem;
}

.faq-category-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.faq-category-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    border-radius: 50%;
    background: rgba(176, 141, 87, 0.13);
    color: var(--gold-deep);
}

.faq-category-heading h2 {
    margin-bottom: 0;
}

.category-grid,
.jewellery-grid,
.collection-grid,
.education-grid,
.blog-grid,
.gallery-grid,
.info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.4rem;
}

.category-card,
.education-card,
.blog-card,
.gallery-card,
.info-card,
.collection-card {
    display: block;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 12px 24px rgba(17, 17, 17, 0.025);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.category-card:hover,
.education-card:hover,
.blog-card:hover,
.gallery-card:hover,
.info-card:hover,
.collection-card:hover {
    transform: translateY(-6px);
    border-color: rgba(176, 141, 87, 0.35);
    box-shadow: var(--shadow-soft);
}

.category-image,
.blog-image,
.gallery-image,
.card-image {
    height: 260px;
    overflow: hidden;
}

.category-content,
.education-content,
.blog-content,
.gallery-content,
.collection-content,
.info-content {
    padding: 1.4rem 1.2rem 1.45rem;
}

.category-content span,
.post-meta,
.collection-tag {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
}

.page-hero {
    min-height: 420px;
    display: grid;
    place-items: center;
}

.page-hero-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.page-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(17, 17, 17, 0.72), rgba(17, 17, 17, 0.26));
}

.page-hero-content {
    position: relative;
    z-index: 2;
    color: var(--white);
    padding: 120px 0 90px;
}

.page-hero-content h1,
.page-hero-content p {
    color: var(--white);
}

.jewellery-intro-section,
.jewellery-category-nav,
.jewellery-category-section,
.materials-section,
.jewellery-guide-section,
.jewellery-collection-cta,
.collection-intro-section,
.featured-collection-large,
.collection-detail-section,
.collection-inspiration-section,
.collection-craftsmanship-section {
    background: linear-gradient(180deg, rgba(245, 241, 232, 0.7), rgba(255, 255, 255, 0.2));
}

.breadcrumb-container {
    width: min(var(--container), calc(100% - 32px));
    margin: 0 auto;
    padding: 1.25rem 0 0;
}

.breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.03);
    color: rgba(17, 17, 17, 0.7);
    font-size: 0.82rem;
}

.breadcrumb a {
    color: var(--gold-deep);
    font-weight: 600;
}

.breadcrumb span {
    color: rgba(17, 17, 17, 0.45);
}

.contact-intro-section,
.contact-form-section,
.consultation-section,
.booking-section,
.location-section,
.contact-faq-section,
.social-contact-section {
    background: linear-gradient(180deg, rgba(245, 241, 232, 0.7), rgba(255, 255, 255, 0.3));
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
    margin-top: 2.25rem;
}

.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.35rem 1.1rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 16px 32px rgba(17, 17, 17, 0.04);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.contact-info-card:hover {
    transform: translateY(-4px);
    border-color: rgba(176, 141, 87, 0.38);
    box-shadow: var(--shadow-soft);
}

.contact-info-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.15), rgba(214, 189, 145, 0.25));
    border: 1px solid rgba(176, 141, 87, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-deep);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.contact-info-card span {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.contact-info-card h3 {
    margin-bottom: 0.25rem;
    font-size: clamp(1.15rem, 1.5vw, 1.6rem);
}

.contact-info-card p {
    margin-bottom: 0;
}

.contact-form-image {
    position: relative;
    min-height: 700px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.contact-form-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.12), rgba(17, 17, 17, 0.7));
}

.contact-image-content {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1;
    color: var(--white);
}

.contact-image-content h2,
.contact-image-content p {
    color: var(--white);
}

.contact-form-wrapper {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-soft);
}

.form-intro {
    margin-bottom: 1.5rem;
}

.contact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.full-width {
    grid-column: 1 / -1;
}

.form-label,
.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
    color: var(--gold-deep);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    padding-top: 0.2rem;
}

.radio-group label,
.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.94rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: rgba(17, 17, 17, 0.82);
    font-weight: 500;
}

.radio-group input,
.checkbox-label input {
    width: 18px;
    height: 18px;
    accent-color: var(--gold-deep);
}

.contact-form .form-group {
    margin-bottom: 0;
}

.consultation-grid,
.location-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2rem;
    align-items: center;
}

.consultation-content {
    padding-right: 1rem;
}

.consultation-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 2rem 0;
}

.consultation-benefits>div {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.consultation-benefits i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(176, 141, 87, 0.12);
    color: var(--gold-deep);
    font-size: 1rem;
}

.consultation-benefits h3 {
    margin-bottom: 0.2rem;
    font-size: 1.3rem;
}

.consultation-image {
    position: relative;
    min-height: 520px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.consultation-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.consultation-badge {
    position: absolute;
    left: 1.3rem;
    bottom: 1.3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(17, 17, 17, 0.7);
    backdrop-filter: blur(8px);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 0.8rem 1rem;
}

.consultation-badge i {
    color: var(--gold-soft);
}

.consultation-badge span {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.consultation-badge strong {
    font-size: 0.82rem;
    letter-spacing: 0.08em;
}

.booking-card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-soft);
}

.booking-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.location-map {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border);
}

.location-map iframe {
    display: block;
    min-height: 420px;
}

.location-content {
    padding-left: 0.5rem;
}

.location-details {
    display: grid;
    gap: 1rem;
    margin: 1.8rem 0;
}

.location-details>div {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.05rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.location-details i {
    color: var(--gold-deep);
    margin-top: 0.25rem;
}

.location-details strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--black);
}

.location-details p {
    margin-bottom: 0;
}

.contact-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.contact-faq-item {
    background: rgba(255, 255, 255, 0.8);
}

.faq-more-link {
    margin-top: 1.5rem;
    text-align: center;
}

.social-contact-section {
    padding-bottom: 100px;
}

.social-contact-content {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.contact-social-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.75rem;
}

.contact-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--black);
    box-shadow: 0 10px 22px rgba(17, 17, 17, 0.03);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.contact-social-links a:hover {
    transform: translateY(-3px);
    border-color: rgba(176, 141, 87, 0.35);
    box-shadow: var(--shadow-soft);
}

.final-cta-section {
    background: linear-gradient(135deg, #131313, #1c1a17);
    padding: 90px 0;
}

.final-cta-content {
    width: min(760px, calc(100% - 32px));
    margin: 0 auto;
    text-align: center;
}

.final-cta-content h2,
.final-cta-content p,
.final-cta-content .section-label {
    color: var(--white);
}

.btn-light {
    background: rgba(255, 255, 255, 0.14);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-light:hover {
    background: rgba(255, 255, 255, 0.22);
    color: var(--white);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.category-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.category-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.2rem;
    border-radius: 999px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    background: rgba(255, 255, 255, 0.72);
    color: var(--black);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    transition: all var(--transition);
}

.category-tab:hover,
.category-tab.active,
.category-tab:focus-visible {
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.12), rgba(214, 189, 145, 0.2));
    border-color: rgba(176, 141, 87, 0.35);
    color: var(--gold-deep);
    box-shadow: 0 12px 24px rgba(176, 141, 87, 0.08);
}

.category-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

.category-feature-grid.reverse {
    grid-template-columns: 1fr 1fr;
}

.category-feature-image {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 420px;
    box-shadow: var(--shadow-soft);
}

.category-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-number {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--white);
    font-weight: 700;
    letter-spacing: 0.12em;
}

.category-feature-content {
    max-width: 560px;
}

.category-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 1.7rem 0;
}

.category-highlights>div {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 0.95rem;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.category-highlights i {
    color: var(--gold-deep);
}

.category-highlights span {
    color: rgba(17, 17, 17, 0.82);
    font-weight: 600;
}

.jewellery-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
    margin-top: 2.2rem;
}

.jewellery-mini-card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 12px 26px rgba(17, 17, 17, 0.04);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.jewellery-mini-card:hover {
    transform: translateY(-5px);
    border-color: rgba(176, 141, 87, 0.38);
    box-shadow: var(--shadow-soft);
}

.mini-card-image {
    height: 260px;
    overflow: hidden;
}

.mini-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.jewellery-mini-card:hover .mini-card-image img {
    transform: scale(1.04);
}

.jewellery-mini-card h3 {
    padding: 1rem 1rem 0.2rem;
    margin-bottom: 0;
    font-size: 1.8rem;
}

.jewellery-mini-card span {
    display: block;
    padding: 0 1rem 1.2rem;
    color: var(--gold-deep);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
}

.bridal-jewellery-section {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 560px;
    overflow: hidden;
}

.bridal-background,
.bridal-overlay {
    position: absolute;
    inset: 0;
}

.bridal-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bridal-overlay {
    background: linear-gradient(90deg, rgba(17, 17, 17, 0.75), rgba(17, 17, 17, 0.38));
}

.bridal-content {
    position: relative;
    z-index: 1;
    width: min(760px, calc(100% - 32px));
    text-align: center;
    color: var(--white);
    padding: 3rem 0;
}

.bridal-content h2,
.bridal-content p,
.bridal-content .section-label {
    color: var(--white);
}

.bridal-categories {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.bridal-categories a {
    display: block;
    padding: 1.1rem 0.9rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    color: var(--white);
    backdrop-filter: blur(5px);
    transition: transform var(--transition), background var(--transition), border-color var(--transition);
}

.bridal-categories a:hover,
.bridal-categories a:focus-visible {
    transform: translateY(-3px);
    background: rgba(176, 141, 87, 0.12);
    border-color: rgba(176, 141, 87, 0.36);
}

.bridal-categories span {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-soft);
    font-weight: 700;
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
    margin-top: 2rem;
}

.material-card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 12px 24px rgba(17, 17, 17, 0.04);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.material-card:hover {
    transform: translateY(-5px);
    border-color: rgba(176, 141, 87, 0.35);
    box-shadow: var(--shadow-soft);
}

.material-image {
    height: 250px;
    overflow: hidden;
}

.material-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.material-content {
    padding: 1.2rem;
}

.material-content span {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
}

.material-content h3 {
    margin-bottom: 0.5rem;
}

.jewellery-guide-section {
    padding-top: 80px;
}

.guide-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

.guide-image {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    min-height: 420px;
}

.guide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guide-content {
    padding-left: 0.5rem;
}

.guide-points {
    display: grid;
    gap: 0.95rem;
    margin-top: 1.6rem;
}

.guide-points li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: rgba(17, 17, 17, 0.8);
}

.guide-points i {
    color: var(--gold-deep);
    margin-top: 0.2rem;
}

.jewellery-collection-cta {
    padding: 90px 0;
}

.collection-cta-content {
    width: min(760px, calc(100% - 32px));
    margin: 0 auto;
    text-align: center;
    padding: 3rem 1.5rem;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.1), rgba(255, 255, 255, 0.75));
    border: 1px solid rgba(176, 141, 87, 0.18);
    box-shadow: var(--shadow-soft);
}

.collection-cta-content h2,
.collection-cta-content p,
.collection-cta-content .section-label {
    color: var(--black);
}

.collection-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.filter-button {
    border: 1px solid rgba(17, 17, 17, 0.08);
    background: rgba(255, 255, 255, 0.8);
    color: var(--black);
    border-radius: 999px;
    padding: 0.72rem 1.15rem;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    transition: all var(--transition);
}

.filter-button:hover,
.filter-button.active,
.filter-button:focus-visible {
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.12), rgba(214, 189, 145, 0.2));
    border-color: rgba(176, 141, 87, 0.35);
    color: var(--gold-deep);
    box-shadow: 0 12px 26px rgba(176, 141, 87, 0.07);
}

.featured-collection-large {
    position: relative;
    min-height: 560px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.featured-collection-image,
.featured-collection-overlay {
    position: absolute;
    inset: 0;
}

.featured-collection-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-collection-overlay {
    background: linear-gradient(90deg, rgba(17, 17, 17, 0.72), rgba(17, 17, 17, 0.28));
}

.featured-collection-content {
    position: relative;
    z-index: 1;
    width: min(760px, calc(100% - 32px));
    text-align: center;
    color: var(--white);
}

.featured-collection-content h2,
.featured-collection-content p,
.featured-collection-content .section-label {
    color: var(--white);
}

.collection-detail-section {
    padding-top: 90px;
    padding-bottom: 90px;
}

.collection-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

.collection-detail-image {
    position: relative;
    min-height: 440px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.collection-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collection-number {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--white);
    font-weight: 700;
    letter-spacing: 0.12em;
}

.collection-detail-content {
    max-width: 560px;
}

.collection-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 1.7rem 0;
}

.collection-features>div {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 0.8rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.collection-features i {
    color: var(--gold-deep);
}

.collection-features span {
    color: rgba(17, 17, 17, 0.82);
    font-weight: 600;
}

.collection-detail-section.alternate {
    background: rgba(255, 255, 255, 0.45);
}

.luxury-collection {
    background: linear-gradient(180deg, rgba(245, 241, 232, 0.85), rgba(255, 255, 255, 0.45));
}

.style-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.2rem;
    margin-top: 2rem;
}

.style-card {
    padding: 1.6rem 1.2rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 22px rgba(17, 17, 17, 0.03);
    text-align: center;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.style-card:hover {
    transform: translateY(-5px);
    border-color: rgba(176, 141, 87, 0.35);
    box-shadow: var(--shadow-soft);
}

.style-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.14), rgba(214, 189, 145, 0.18));
    color: var(--gold-deep);
    font-size: 1.3rem;
}

.style-card h3 {
    margin-bottom: 0.5rem;
}

.collection-craftsmanship-section {
    position: relative;
    overflow: hidden;
    min-height: 480px;
    display: grid;
    place-items: center;
}

.collection-craftsmanship-image,
.collection-craftsmanship-content {
    position: absolute;
    inset: 0;
}

.collection-craftsmanship-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collection-craftsmanship-content {
    display: grid;
    place-items: center;
    background: linear-gradient(90deg, rgba(17, 17, 17, 0.7), rgba(17, 17, 17, 0.4));
    text-align: center;
    padding: 2rem;
}

.collection-craftsmanship-content h2,
.collection-craftsmanship-content p,
.collection-craftsmanship-content .section-label {
    color: var(--white);
}

.collection-craftsmanship-content>* {
    max-width: 720px;
}

.diamond-introduction-section,
.diamond-formation-section,
.natural-lab-section,
.diamond-anatomy-section,
.diamond-four-cs-section,
.diamond-shapes-preview-section,
.diamond-certification-section,
.diamond-buying-guide-section,
.diamond-care-preview-section,
.diamond-faq-section {
    background: linear-gradient(180deg, rgba(245, 241, 232, 0.7), rgba(255, 255, 255, 0.25));
}

.diamond-formation-section,
.diamond-anatomy-section,
.diamond-care-preview-section {
    background: rgba(255, 255, 255, 0.55);
}

.diamond-introduction-grid,
.anatomy-grid,
.certification-grid,
.buying-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    align-items: center;
}

.diamond-introduction-image,
.anatomy-image,
.certification-image,
.buying-guide-image,
.diamond-option-image {
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.diamond-introduction-image,
.anatomy-image,
.certification-image,
.buying-guide-image {
    min-height: 420px;
}

.diamond-introduction-image img,
.anatomy-image img,
.certification-image img,
.buying-guide-image img,
.diamond-option-image img,
.shape-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.diamond-facts,
.certificate-features,
.buying-guide-steps {
    display: grid;
    gap: 0.8rem;
    margin-top: 1.7rem;
}

.diamond-fact,
.certificate-features>div,
.buying-guide-steps>div {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.78);
}

.diamond-fact strong,
.buying-guide-steps span,
.anatomy-item>span {
    color: var(--gold-deep);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    font-weight: 700;
}

.formation-timeline,
.diamond-comparison,
.four-cs-grid,
.diamond-shapes-preview-grid,
.care-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.2rem;
    margin-top: 2.2rem;
}

.formation-step,
.diamond-option,
.four-c-card,
.diamond-shape-preview-card,
.care-preview-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 22px rgba(17, 17, 17, 0.03);
}

.formation-step,
.four-c-card,
.care-preview-card {
    padding: 1.4rem;
    text-align: center;
}

.formation-number,
.four-c-number {
    display: block;
    color: var(--gold-deep);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    font-weight: 700;
}

.formation-icon,
.four-c-icon,
.care-icon {
    width: 58px;
    height: 58px;
    margin: 0.8rem auto 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.14), rgba(214, 189, 145, 0.18));
    color: var(--gold-deep);
    font-size: 1.25rem;
}

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

.diamond-option {
    overflow: hidden;
}

.diamond-option-image {
    height: 250px;
    border-radius: 0;
    box-shadow: none;
}

.diamond-option-content {
    padding: 1.4rem;
}

.option-label {
    color: var(--gold-deep);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    font-weight: 700;
}

.diamond-option-content ul {
    display: grid;
    gap: 0.45rem;
    margin-top: 1rem;
}

.diamond-option-content li {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    color: rgba(17, 17, 17, 0.78);
}

.diamond-option-content li i,
.certificate-features i {
    color: var(--gold-deep);
}

.anatomy-content {
    display: grid;
    gap: 0.8rem;
}

.anatomy-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 0.9rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
}

.anatomy-item h3 {
    margin-bottom: 0.2rem;
}

.anatomy-item p {
    margin-bottom: 0;
}

.diamond-four-cs-section .section-heading,
.diamond-faq-section .section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
}

.four-cs-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.four-c-card,
.diamond-shape-preview-card {
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.four-c-card:hover,
.diamond-shape-preview-card:hover,
.care-preview-card:hover {
    transform: translateY(-5px);
    border-color: rgba(176, 141, 87, 0.35);
    box-shadow: var(--shadow-soft);
}

.diamond-shapes-preview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.diamond-shape-preview-card {
    overflow: hidden;
    padding-bottom: 1.1rem;
    text-align: center;
}

.shape-preview-image {
    height: 210px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.diamond-shape-preview-card h3,
.diamond-shape-preview-card>span {
    display: block;
}

.diamond-shape-preview-card h3 {
    margin-bottom: 0.15rem;
}

.diamond-shape-preview-card>span {
    color: var(--gold-deep);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.section-action,
.comparison-link {
    margin-top: 2rem;
    text-align: center;
}

.certificate-features>div {
    justify-content: flex-start;
}

.buying-guide-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.buying-guide-steps p {
    margin: 0;
    color: var(--black);
    font-weight: 600;
}

.diamond-faq-list {
    display: grid;
    gap: 0.8rem;
    margin-top: 2rem;
}

.diamond-faq-list summary i {
    display: none;
}

.certification-intro-section,
.what-is-certification-section,
.report-anatomy-section,
.certificate-four-cs-section,
.report-vs-appraisal-section,
.grading-laboratory-section,
.inscription-section,
.certification-mistakes-section,
.certification-faq-section,
.related-guides-section {
    background: linear-gradient(180deg, rgba(245, 241, 232, 0.7), rgba(255, 255, 255, 0.25));
}

.what-is-certification-section,
.certificate-four-cs-section,
.certification-faq-section {
    background: rgba(255, 255, 255, 0.55);
}

.certification-intro-grid,
.report-anatomy-grid,
.report-vs-appraisal-grid,
.grading-laboratory-grid,
.inscription-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    align-items: center;
}

.certification-intro-image,
.report-anatomy-image,
.report-vs-appraisal-image,
.grading-laboratory-image,
.inscription-image {
    min-height: 420px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.certification-intro-image img,
.report-anatomy-image img,
.report-vs-appraisal-image img,
.grading-laboratory-image img,
.inscription-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.certification-feature-grid,
.certificate-four-cs-grid,
.verification-steps,
.certification-mistakes-grid,
.related-guides-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.2rem;
    margin-top: 2.2rem;
}

.certification-feature-card,
.certificate-c-card,
.verification-step,
.certification-mistake-card,
.related-guide-card {
    padding: 1.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 22px rgba(17, 17, 17, 0.03);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.certification-feature-card:hover,
.certificate-c-card:hover,
.verification-step:hover,
.certification-mistake-card:hover,
.related-guide-card:hover {
    transform: translateY(-5px);
    border-color: rgba(176, 141, 87, 0.35);
    box-shadow: var(--shadow-soft);
}

.certification-feature-card,
.certificate-c-card {
    text-align: center;
}

.certification-feature-icon,
.certificate-c-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.14), rgba(214, 189, 145, 0.18));
    color: var(--gold-deep);
    font-size: 1.25rem;
}

.report-anatomy-content {
    display: grid;
    gap: 0.8rem;
}

.report-item,
.verification-step {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 0.9rem;
}

.report-item {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
}

.report-item>span,
.verification-step>span,
.certificate-c-number {
    color: var(--gold-deep);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    font-weight: 700;
}

.report-item h3 {
    margin-bottom: 0.2rem;
}

.report-item p {
    margin-bottom: 0;
}

.report-image-label {
    position: absolute;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gold-deep);
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 700;
}

.report-label-1 {
    top: 16%;
    left: 19%;
}

.report-label-2 {
    top: 31%;
    right: 18%;
}

.report-label-3 {
    top: 48%;
    left: 20%;
}

.report-label-4 {
    bottom: 26%;
    right: 17%;
}

.report-label-5 {
    bottom: 10%;
    left: 20%;
}

.certificate-c-number {
    display: block;
}

.verification-steps,
.certification-mistakes-grid,
.related-guides-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.verification-step {
    align-items: start;
}

.verification-step h3,
.certification-mistake-card h3,
.related-guide-card h3 {
    margin-bottom: 0.35rem;
}

.verification-step p,
.certification-mistake-card p,
.related-guide-card p {
    margin-bottom: 0;
}

.certification-cta-section {
    padding: 90px 0;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.13), rgba(255, 255, 255, 0.72));
}

.faq-item,
.contact-faq-item {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.faq-item summary,
.contact-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.05rem 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    font-weight: 600;
    color: var(--black);
}

.faq-item summary::-webkit-details-marker,
.contact-faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after,
.contact-faq-item summary::after {
    content: '+';
    font-size: 1.4rem;
    line-height: 1;
    color: var(--gold-deep);
    transition: transform var(--transition);
}

.faq-item[open] summary::after,
.contact-faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-item p,
.contact-faq-item p {
    padding: 0 1.1rem 1.1rem;
    color: rgba(17, 17, 17, 0.77);
}

.contact-form-wrapper,
.newsletter-form,
.form-card,
.search-panel,
.search-container,
.auth-panel {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.contact-form,
.newsletter-form,
.auth-form {
    padding: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--gold-deep);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.form-group input,
.form-group select,
.form-group textarea,
.newsletter-form input,
.search-panel input,
.auth-form input,
.auth-form select {
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(17, 17, 17, 0.12);
    background: var(--white);
    border-radius: var(--radius-sm);
    color: var(--black);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.newsletter-form input:focus,
.search-panel input:focus,
.auth-form input:focus,
.auth-form select:focus {
    border-color: rgba(176, 141, 87, 0.74);
    box-shadow: 0 0 0 4px rgba(176, 141, 87, 0.12);
    outline: none;
}

.form-group textarea {
    min-height: 140px;
    resize: vertical;
}

.form-message,
.newsletter-success,
.auth-message {
    display: none;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    background: rgba(176, 141, 87, 0.1);
    border: 1px solid rgba(176, 141, 87, 0.25);
    color: var(--gold-deep);
    font-weight: 600;
}

.form-message.show,
.newsletter-success.show,
.auth-message.show {
    display: block;
}

.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.72);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 110px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
    z-index: 1000;
}

.search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.search-container,
.search-panel {
    width: min(760px, calc(100% - 32px));
    padding: 1.5rem;
    position: relative;
    transform: translateY(-18px);
    transition: transform var(--transition);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-strong);
}

.search-overlay.is-open .search-container,
.search-overlay.is-open .search-panel {
    transform: translateY(0);
}

.search-container h2 {
    margin-bottom: 0;
    color: var(--black);
}

.search-container h2 span {
    color: var(--gold-deep);
}

.search-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    background: var(--off-white);
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 999px;
    padding: 0.55rem 0.7rem 0.55rem 1rem;
}

.search-form .search-inline-close {
    position: static;
    order: 2;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: rgba(17, 17, 17, 0.55);
    box-shadow: none;
}

.search-form .search-inline-close:hover,
.search-form .search-inline-close:focus-visible {
    background: transparent;
    color: var(--gold-deep);
    transform: none;
    box-shadow: none;
}

.search-form input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0.9rem 0.4rem;
    color: var(--black);
}

.search-form input:focus {
    outline: none;
}

.search-form button {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-results {
    display: none;
    background: var(--off-white);
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.search-results.is-visible {
    display: block;
}

.search-result-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-result-item+.search-result-item {
    border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.search-result-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    color: var(--black);
    transition: background var(--transition), color var(--transition);
}

.search-result-link:hover,
.search-result-link:focus-visible {
    background: rgba(176, 141, 87, 0.08);
    color: var(--gold-deep);
}

.search-result-meta {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
}

.search-empty {
    padding: 1rem;
    color: rgba(17, 17, 17, 0.7);
}

.search-header {
    margin-bottom: 1rem;
}

.search-input-wrap {
    position: relative;
}

.search-input-wrap i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--soft-gray);
}

.search-panel input,
.search-input-wrap input {
    padding-left: 2.8rem;
}

.site-footer {
    background: var(--dark);
    color: rgba(255, 255, 255, 0.8);
    padding-top: 4.2rem;
    width: 100%;
    overflow: hidden;
}

.footer-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-container,
.footer-grid {
    display: grid;
    grid-template-columns: 1.45fr repeat(4, minmax(0, 1fr));
    gap: 2rem;
    padding-bottom: 2.2rem;
}

.footer-brand {
    max-width: 290px;
}

.footer-brand p,
.footer-brand .social-links {
    margin-left: 1rem;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 300px;
    height: 78px;
    margin-bottom: 1rem;
}

.footer-logo strong {
    display: flex;
    flex-direction: column;
    color: var(--white);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    line-height: 0.85;
    letter-spacing: 0.08em;
}

.footer-logo small {
    margin-top: 0.35rem;
    color: var(--gold-soft);
    font-family: 'Inter', sans-serif;
    font-size: 0.48rem;
    letter-spacing: 0.28em;
    line-height: 1;
}

.footer-logo img {
    width: 260px;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.footer-brand p,
.footer-column p,
.footer-column li,
.footer-column a,
.footer-bottom,
.footer-legal a {
    color: rgba(255, 255, 255, 0.72);
}

.footer-column h3,
.footer-brand h3 {
    color: var(--white);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.footer-column ul {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.footer-contact address {
    margin: 0;
    font-style: normal;
}

.footer-contact p {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.footer-contact p i {
    width: 1rem;
    padding-top: 0.3rem;
    color: var(--gold-soft);
    text-align: center;
}

.footer-column a,
.footer-legal a {
    transition: color var(--transition);
}

.footer-column a:hover,
.footer-legal a:hover {
    color: var(--gold-soft);
}

.social-links {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.3rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--white);
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.social-links a:hover {
    background: rgba(176, 141, 87, 0.12);
    border-color: rgba(176, 141, 87, 0.4);
    transform: translateY(-2px);
}

.social-links a img {
    width: 25px;
    height: 25px;
    object-fit: contain;
    padding: 2px;
}

.footer-newsletter {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.8rem 0 2rem;
    width: min(var(--container), calc(100% - 32px));
    margin: 0 auto;
}

.footer-newsletter,
.footer-newsletter>div,
.footer-bottom {
    display: flex;
    align-items: center;
}

.footer-newsletter {
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-newsletter>div {
    flex: 1 1 260px;
}

.footer-newsletter h3 {
    margin: 0;
    color: var(--white);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.newsletter-form {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: min(540px, 100%);
    flex: 0 1 540px;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
    padding: 0.75rem 0.85rem 0.75rem 1rem;
    min-height: 60px;
    height: 60px;
    flex-basis: auto;
    position: relative;
}

.newsletter-form .newsletter-success {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    margin-top: 0;
    z-index: 2;
}

.newsletter-form input {
    background: transparent;
    border: none;
    color: var(--white);
    flex: 1;
    min-width: 0;
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.48);
}

.newsletter-form button {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: var(--white);
    flex: 0 0 46px;
}

.image-fallback {
    object-fit: contain !important;
    padding: 2rem;
    background: var(--cream);
}

.footer-bottom {
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.2rem 0 2.2rem;
    font-size: 0.92rem;
    width: min(var(--container), calc(100% - 32px));
    margin: 0 auto;
}

.footer-bottom p {
    margin: 0;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.auth-modal {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
    z-index: 1200;
}

.auth-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.auth-panel {
    width: min(680px, 100%);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: clamp(1.3rem, 3vw, 2rem);
    position: relative;
    transform: translateY(-18px);
    transition: transform var(--transition);
    background: rgba(255, 255, 255, 0.96);
}

.auth-modal.is-open .auth-panel {
    transform: translateY(0);
}

.auth-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.auth-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.35rem;
}

.auth-tab {
    flex: 1;
    border: 1px solid var(--border);
    background: transparent;
    padding: 0.75rem 0.9rem;
    border-radius: 999px;
    color: var(--black);
    font-weight: 600;
    transition: all var(--transition);
}

.auth-tab.is-active {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}

.auth-form {
    display: none;
    padding: 0;
}

.auth-form.is-active {
    display: block;
}

.auth-form[data-form="register"].is-active {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem 1rem;
}

.auth-intro {
    grid-column: 1 / -1;
    margin: -0.25rem 0 0.8rem;
    color: rgba(17, 17, 17, 0.62);
    font-size: 0.88rem;
    line-height: 1.55;
}

.auth-form[data-form="register"] .form-group {
    min-width: 0;
    margin-bottom: 0.8rem;
}

.auth-form[data-form="register"] .form-group:nth-of-type(4),
.auth-form[data-form="register"] button,
.auth-form[data-form="register"] .auth-message {
    grid-column: 1 / -1;
}

.auth-form[data-form="register"] textarea {
    min-height: 84px;
    resize: vertical;
}

.auth-form[data-form="register"] .btn-primary {
    min-height: 48px;
    margin-top: 0.35rem;
}

.auth-form .form-group {
    margin-bottom: 0.9rem;
}

.form-note {
    font-size: 0.83rem;
    color: rgba(17, 17, 17, 0.7);
    margin-top: 0.8rem;
}

.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: var(--white);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all var(--transition);
    z-index: 9998;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1024px) {
    .nav-list {
        gap: 1.25rem;
    }

    .category-grid,
    .jewellery-grid,
    .collection-grid,
    .education-grid,
    .blog-grid,
    .gallery-grid,
    .info-grid,
    .contact-info-grid,
    .contact-faq-grid,
    .materials-grid,
    .bridal-categories,
    .style-grid,
    .collection-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .hero-section,
    .consultation-grid,
    .location-grid,
    .contact-form-grid,
    .category-feature-grid,
    .guide-layout,
    .collection-detail-grid,
    .featured-collection-container,
    .craftsmanship-container,
    .faq-preview-grid,
    .story-grid,
    .craftsmanship-detail-container,
    .sourcing-grid,
    .vision-mission-grid {
        grid-template-columns: 1fr;
    }

    .hero-content {
        padding-bottom: 60px;
    }

    .hero-image,
    .contact-form-image,
    .consultation-image,
    .category-feature-image,
    .guide-image,
    .collection-detail-image,
    .featured-image,
    .craftsmanship-image,
    .story-image,
    .craftsmanship-detail-image {
        min-height: 420px;
    }

    .sourcing-image {
        min-height: 420px;
    }

    .philosophy-grid,
    .process-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

    .craftsmanship-content {
        order: 2;
    }

    .craftsmanship-image {
        order: 1;
    }

    .diamond-introduction-grid,
    .anatomy-grid,
    .certification-grid,
    .buying-guide-grid,
    .diamond-comparison {
        grid-template-columns: 1fr;
    }

    .formation-timeline,
    .four-cs-grid,
    .diamond-shapes-preview-grid,
    .care-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .certification-intro-grid,
    .report-anatomy-grid,
    .report-vs-appraisal-grid,
    .grading-laboratory-grid,
    .inscription-grid {
        grid-template-columns: 1fr;
    }

    .report-comparison-grid {
        grid-template-columns: 1fr;
    }

    .comparison-divider {
        padding: 0.25rem 0;
    }

    .certification-feature-grid,
    .certificate-four-cs-grid,
    .verification-steps,
    .certification-mistakes-grid,
    .related-guides-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shape-overview-grid,
    .guide-navigation,
    .buying-steps-grid,
    .setting-guide-grid,
    .questions-grid,
    .certificate-check-grid,
    .mistakes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shape-detail-grid,
    .guide-intro-grid,
    .guide-content-grid,
    .guide-metal-grid,
    .shape-setting-grid,
    .four-c-detail-grid,
    .final-checklist-grid,
    .report-vs-appraisal-grid,
    .grading-laboratory-grid,
    .inscription-grid {
        grid-template-columns: 1fr;
    }

    .shape-detail-grid.reverse,
    .guide-content-grid.reverse,
    .four-c-detail-grid.reverse {
        direction: ltr;
    }
}

@media (max-width: 991px) {
    .header-cta {
        display: none;
    }

    .mobile-menu-button {
        display: inline-flex;
    }

    .main-navigation {
        position: fixed;
        inset: var(--header-height) 0 auto 0;
        height: calc(100vh - var(--header-height));
        background: rgba(21, 19, 15, 0.98);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        padding: 1rem 1.1rem 2rem;
        justify-content: flex-start;
        overflow-y: auto;
        transform: translateY(-14px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
        z-index: 40;
    }

    .main-navigation.nav-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-list {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav-item {
        width: 100%;
        border-bottom: 1px solid rgba(214, 189, 145, 0.16);
    }

    .nav-link {
        width: 100%;
        padding: 1rem 0;
        font-size: 1rem;
    }

    .dropdown-menu a {
        color: rgba(255, 255, 255, 0.75);
    }

    .dropdown-menu {
        position: static;
        transform: none !important;
        min-width: 100%;
        border: 0;
        box-shadow: none;
        background: transparent;
        padding: 0 0 0.8rem 1rem;
        display: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: none;
    }

    .dropdown.menu-open .dropdown-menu,
    .dropdown:hover .dropdown-menu,
    .dropdown:focus-within .dropdown-menu {
        display: block;
    }

    .intro-grid,
    .contact-form-grid,
    .newsletter-grid,
    .form-row,
    .footer-container,
    .footer-grid,
    .contact-info-grid,
    .contact-faq-grid,
    .consultation-benefits,
    .booking-form,
    .contact-form,
    .materials-grid,
    .jewellery-mini-grid,
    .bridal-categories,
    .category-highlights,
    .philosophy-grid,
    .process-timeline,
    .heritage-timeline {
        .collection-features,
        .style-grid,

        .heritage-timeline::before {
            display: none;
        }

        .heritage-item {
            grid-template-columns: 1fr;
            gap: 0.55rem;
        }

        .heritage-content {
            padding-left: 0;
        }

        .formation-timeline,
        .four-cs-grid,
        .diamond-shapes-preview-grid,
        .heritage-timeline,
        .care-preview-grid,
        .buying-guide-steps,
        .certification-feature-grid,
        .certificate-four-cs-grid,
        .verification-steps,
        .certification-mistakes-grid,
        .related-guides-grid,
        .shape-overview-grid,
        .guide-navigation,
        .buying-steps-grid,
        .setting-guide-grid,
        .questions-grid,
        .certificate-check-grid,
        .mistakes-grid,
        .four-cs-grid,
        .certificate-four-cs-grid,
        .four-c-info-grid,
        .clarity-feature-grid,
        .shape-characteristics,
        .buying-guide-steps,
        .metal-options,
        .guide-four-cs,
        .shape-choice-grid,
        .certification-mistakes-grid,
        .related-guides-grid {
            grid-template-columns: 1fr;
        }

        .shape-card-image,
        .setting-guide-image,
        .related-guide-image,
        .shape-detail-image,
        .guide-intro-image,
        .guide-content-image,
        .guide-metal-image,
        .shape-setting-image,
        .four-c-detail-image,
        .final-checklist-image,
        .certification-intro-image,
        .report-anatomy-image,
        .report-vs-appraisal-image,
        .grading-laboratory-image,
        .inscription-image {
            min-height: 300px;
            height: auto;
        }

        .guide-highlight,
        .consultation-guide-banner,
        .faq-help-banner,
        .shape-guide-banner {
            grid-template-columns: 1fr;
            text-align: center;
        }

        .guide-highlight-icon,
        .consultation-guide-icon,
        .faq-help-icon {
            margin: 0 auto;
        }

        .contact-form-wrapper,
        .booking-card,
        .collection-detail-content {
            padding: 1.4rem;
        }
    }

    @media (max-width: 767px) {
        section {
            padding: clamp(48px, 9vw, 64px) 0;
        }

        .hero-title {
            max-width: 100%;
        }

        .hero-buttons,
        .final-cta-buttons {
            flex-direction: column;
            align-items: stretch;
        }

        .btn,
        .header-cta,
        button[type='submit'] {
            width: 100%;
        }

        .newsletter-form {
            width: 100%;
            flex-direction: row;
            align-items: center;
            min-height: 56px;
            padding: 0.5rem 0.55rem 0.5rem 0.85rem;
        }

        .auth-form[data-form="register"].is-active {
            grid-template-columns: 1fr;
        }

        .auth-form[data-form="register"] .form-group,
        .auth-form[data-form="register"] button,
        .auth-form[data-form="register"] .auth-message {
            grid-column: auto;
        }

        .footer-newsletter {
            flex-direction: column;
            align-items: stretch;
            gap: 1rem;
        }

        .footer-newsletter>div {
            align-items: flex-start;
            flex-direction: column;
            gap: 0.3rem;
        }

        .newsletter-form button {
            width: 46px;
            height: 46px;
            border-radius: 50%;
        }

        .footer-bottom {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    @media (max-width: 480px) {
        :root {
            --header-height: 76px;
        }

        .header-container,
        .section-container,
        .footer-container,
        .page-hero-content,
        .hero-content,
        .breadcrumb-container {
            width: min(var(--container), calc(100% - 20px));
        }

        .logo {
            width: 140px;
            min-width: 140px;
            height: 60px;
        }

        .logo img {
            max-height: 58px;
        }

        .header-actions {
            gap: 6px;
        }

        .header-action,
        .mobile-menu-button,
        .auth-toggle {
            width: 40px;
            height: 40px;
        }

        .footer-logo {
            width: 190px;
            height: 68px;
        }

        .featured-collection-container,
        .craftsmanship-container {
            width: calc(100vw - 32px);
            max-width: calc(100vw - 32px);
        }

        .newsletter-form {
            height: 56px;
            min-height: 56px;
            flex-basis: auto;
        }

        .hero-image,
        .featured-image,
        .craftsmanship-image,
        .story-image,
        .craftsmanship-detail-image {
            min-height: 300px;
        }

        .auth-panel {
            padding: 1rem;
        }

        .category-grid,
        .shapes-grid,
        .jewellery-grid,
        .collection-grid,
        .education-grid,
        .blog-grid,
        .gallery-grid,
        .info-grid,
        .contact-info-grid,
        .contact-faq-grid,
        .consultation-benefits,
        .materials-grid,
        .bridal-categories,
        .category-highlights,
        .jewellery-mini-grid,
        .why-us-grid,
        .collection-features,
        .style-grid {
            grid-template-columns: 1fr;
        }

        .contact-social-links {
            flex-direction: column;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

.site-header,
.site-footer,
main,
section,
.section-container,
.header-container,
.footer-container {
    max-width: 100%;
}

img,
video,
iframe {
    max-width: 100%;
}

@media (max-width: 991px) {

    .intro-grid,
    .contact-form-grid,
    .newsletter-grid,
    .form-row,
    .contact-form,
    .footer-container,
    .footer-grid,
    .contact-info-grid,
    .contact-faq-grid,
    .consultation-benefits,
    .booking-form,
    .materials-grid,
    .jewellery-mini-grid,
    .bridal-categories,
    .category-highlights,
    .philosophy-grid,
    .process-timeline,
    .heritage-timeline,
    .collection-features,
    .style-grid {
        grid-template-columns: 1fr;
    }

    .main-navigation {
        width: 100%;
        max-width: 100vw;
    }

    .contact-form-wrapper,
    .booking-card,
    .collection-detail-content {
        padding: clamp(1rem, 3vw, 1.4rem);
    }

    .report-comparison-grid {
        grid-template-columns: 1fr;
    }

    .comparison-divider {
        padding: 0.25rem 0;
    }
}

@media (max-width: 767px) {
    section {
        padding: clamp(44px, 8vw, 64px) 0;
    }

    .header-container,
    .section-container,
    .footer-container,
    .page-hero-content,
    .hero-content,
    .breadcrumb-container {
        width: min(var(--container), calc(100% - 28px));
    }

    .hero-buttons,
    .final-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .btn,
    .header-cta,
    button[type='submit'] {
        width: 100%;
    }

    .footer-logo {
        width: min(100%, 220px);
    }

    .footer-brand {
        padding-left: 0.25rem;
    }

    .footer-newsletter,
    .footer-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .newsletter-form {
        width: 100%;
    }

    .auth-panel {
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }

    .auth-form[data-form="register"].is-active {
        grid-template-columns: 1fr;
    }

    .auth-form[data-form="register"] .form-group,
    .auth-form[data-form="register"] button,
    .auth-form[data-form="register"] .auth-message {
        grid-column: auto;
    }

    .search-container {
        width: calc(100% - 24px);
        padding: 1.1rem;
    }

    .search-close {
        top: 12px;
        right: 12px;
    }

    .search-container h2 {
        padding-right: 2.4rem;
    }

    .search-result-link {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    :root {
        --header-height: 76px;
    }

    .logo {
        width: min(140px, 38vw);
        min-width: 0;
    }

    .header-actions {
        gap: 4px;
    }

    .header-action,
    .mobile-menu-button,
    .auth-toggle {
        width: 38px;
        height: 38px;
    }

    .report-comparison-card,
    .legal-panel {
        padding: 1.2rem;
    }
}

.user-account {
    display: flex;
    align-items: center;
    gap: 14px;
}

.user-name {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgb(221, 219, 219);
    font-size: 0.9rem;
    font-weight: 600;
}

.user-name i {
    color: var(--gold-deep);
}

.logout-button {
    border: 1px solid var(--gold-deep);
    background: transparent;
    color: var(--gold-deep);
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.3s ease;
}

.logout-button:hover {
    background: var(--gold-deep);
    color: #fff;
}

.report-comparison-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 1.5rem;
    margin-top: 2rem;
}

.report-comparison-card {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.report-comparison-card:hover {
    transform: translateY(-6px);
    border-color: rgba(176, 141, 87, 0.45);
    box-shadow: var(--shadow-strong);
}

.report-comparison-card h3 {
    margin: 0.65rem 0;
}

.report-comparison-card p {
    flex: 1;
}

.comparison-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
    border-radius: 50%;
    background: rgba(176, 141, 87, 0.13);
    color: var(--gold-deep);
    font-size: 1.25rem;
}

.comparison-label {
    color: var(--gold-deep);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.report-comparison-card ul {
    display: grid;
    gap: 0.6rem;
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
}

.report-comparison-card li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.report-comparison-card li i {
    margin-top: 0.25rem;
    color: var(--gold-deep);
}

.comparison-divider {
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-divider span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    background: var(--dark);
    color: var(--gold-soft);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.search-result-link strong,
.search-result-link small {
    display: block;
}

.search-result-link small {
    max-width: 580px;
    margin-top: 0.25rem;
    color: rgba(17, 17, 17, 0.66);
    font-size: 0.84rem;
}

.legal-modal {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(17, 17, 17, 0.72);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}

.legal-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.legal-panel {
    width: min(680px, 100%);
    max-height: min(720px, 90vh);
    overflow-y: auto;
    position: relative;
    padding: 2rem;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-strong);
}

.legal-panel h2 {
    margin: 0.6rem 0 1.2rem;
}

.legal-content p:last-child {
    margin-bottom: 0;
}

.legal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: black;
}

/* =========================================================
   GLOBAL WHATSAPP FLOATING BUTTON
========================================================= */

.whatsapp-float {
    position: fixed;
    right: 18px;
    bottom: 84px;

    width: 48px;
    height: 48px;

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

    background: #25D366;
    color: #fff;

    border-radius: 50%;

    font-size: 27px;
    text-decoration: none;

    z-index: 99999;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);

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

.whatsapp-float:hover {
    color: #fff;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.28);
}

.whatsapp-float i {
    line-height: 1;
}

/* MOBILE */

@media (max-width: 767px) {

    .whatsapp-float {
        width: 14px;
        height: 74px;

        right: 46px;
        bottom: 46px;

        font-size: 25px;
    }
}


@media (max-width: 480px) {

    .whatsapp-float {
        right: 12px;
        bottom: 66px;

        width: 44px;
        height: 44px;

        font-size: 24px;
    }
}