* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f5f1ea;
    color: #29231f;
}
img {
    display: block;
    width: 100%;
}
a {
    text-decoration: none;
    color: inherit;
}
button {
    font-family: inherit;
}
/* =====================================================
   HEADER
===================================================== */
.header {
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    color: #fff;
}
.header-inner {
    width: 94%;
    max-width: 1450px;
    height: 105px;
    margin: auto;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.25);
}
/* LOGO */
.logo {
    width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.logo-symbol {
    position: absolute;
    top: -18px;
    color: #d8ae6c;
    font-size: 23px;
}
.logo-name {
    font-family: Georgia, serif;
    font-size: 40px;
    letter-spacing: 7px;
    line-height: 1;
}
.logo-jewels {
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: 7px;
}
/* NAV */
.navigation {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}
.navigation > a,
.nav-item > a {
    position: relative;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .8px;
    padding: 10px 0;
}
.navigation > a::after,
.nav-item > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: #d7ad6a;
    transition: .3s;
}
.navigation > a:hover,
.nav-item > a:hover {
    color: #d7ad6a;
}
.navigation > a:hover::after,
.nav-item > a:hover::after {
    width: 100%;
}
/* DROPDOWN */
.nav-item {
    position: relative;
}
.nav-item > a span {
    margin-left: 5px;
}
.dropdown-menu {
    position: absolute;
    top: 42px;
    left: 50%;
    width: 210px;
    padding: 12px 0;
    background: rgba(31,20,13,.97);
    transform: translate(-50%, 10px);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}
.nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.dropdown-menu a {
    display: block;
    padding: 11px 20px;
    font-size: 12px;
    color: #fff;
    transition: .3s;
}
.dropdown-menu a:hover {
    color: #d7ad6a;
    padding-left: 28px;
}
/* ACTIONS */
.header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}
.icon-button,
.bag-button,
.theme-button,
.rtl-button {
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: .3s;
}
.icon-button,
.bag-button,
.theme-button {
    font-size: 23px;
}
.rtl-button {
    font-size: 12px;
    letter-spacing: 1px;
}
.icon-button:hover,
.bag-button:hover,
.theme-button:hover,
.rtl-button:hover {
    color: #d7ad6a;
}
/* BAG */
.bag-button {
    position: relative;
}
.bag-count {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d7ad6a;
    color: #24170f;
    font-size: 9px;
}
/* LOGIN */
.login-button {
    padding: 11px 20px;
    border: 1px solid #d7ad6a;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    transition: .3s;
}
.login-button:hover {
    background: #d7ad6a;
    color: #24170f;
}
/* MOBILE */
.mobile-button {
    display: none;
    margin-left: 15px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 25px;
}
/* =====================================================
   HERO
===================================================== */
.hero {
    height: 88vh;
    min-height: 680px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
/* FULL IMAGE */
.hero-image {
    position: absolute;
    inset: 0;
    background-image:
        url("../images/newhero1.png");
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
}
/* DARK BROWN EFFECT */
.hero-dark {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(31,18,11,.92) 0%,
            rgba(47,29,18,.70) 35%,
            rgba(47,29,18,.20) 70%,
            rgba(30,17,10,.25) 100%
        );
}
/* HERO CONTENT */
.hero-content {
    position: relative;
    z-index: 2;
    width: 94%;
    max-width: 1450px;
    margin: 90px auto 0;
}
.eyebrow {
    color: #dfb46d;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 22px;
}
.hero h1 {
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(58px, 6vw, 92px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -2px;
    margin-bottom: 27px;
}
.hero-description {
    max-width: 460px;
    color: rgba(255,255,255,.9);
    font-family: Georgia, serif;
    font-size: 19px;
    line-height: 1.6;
    margin-bottom: 35px;
}
.hero-link {
    display: inline-flex;
    align-items: center;
    gap: 25px;
    padding-bottom: 11px;
    border-bottom: 1px solid #d7ad6a;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    transition: .3s;
}
.hero-link span {
    font-size: 30px;
    transition: .3s;
}
.hero-link:hover {
    color: #d7ad6a;
}
.hero-link:hover span {
    transform: translateX(8px);
}
/* =====================================================
   SECTION HEADING
===================================================== */
.section-heading {
    text-align: center;
    margin-bottom: 45px;
}
.section-heading p {
    color: #bc8546;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 9px;
}
.section-heading h2 {
    font-family: Georgia, serif;
    font-size: 48px;
    font-weight: 400;
}
.section-heading span {
    display: block;
    width: 50px;
    height: 1px;
    margin: 17px auto 0;
    background: #c99a5a;
}
/* =====================================================
   COLLECTIONS
===================================================== */
.collections {
    padding: 70px 4% 95px;
    background: #f7f4ef;
}
.collection-grid {
    max-width: 1380px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 28px;
}
.collection {
    background: #eee8df;
    overflow: hidden;
}
.collection-img {
    height: 260px;
    overflow: hidden;
}
.collection-img img {
    height: 100%;
    object-fit: cover;
    transition: .7s;
}
.collection:hover img {
    transform: scale(1.06);
}
.collection-name {
    text-align: center;
    padding: 16px 10px 18px;
}
.collection-name h3 {
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1px;
}
.collection-name p {
    font-size: 10px;
    letter-spacing: 2px;
    margin-top: 7px;
}
/* =====================================================
   NEW ARRIVALS
===================================================== */
.new-arrivals {
    padding: 95px 4% 110px;
    background: #f5f1ea;
}
.product-grid {
    max-width: 1380px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 28px;
}
.product-image {
    height: 390px;
    position: relative;
    overflow: hidden;
    background: #e8dfd4;
}
.product-image img {
    height: 100%;
    object-fit: cover;
    transition: .6s;
}
.product:hover .product-image img {
    transform: scale(1.04);
}
/* WISHLIST */
.wishlist {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    font-size: 21px;
    cursor: pointer;
    transition: .3s;
}
.wishlist:hover {
    background: #c99a5a;
    color: #fff;
}
/* ADD BAG */
.add-bag {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 15px;
    height: 48px;
    border: 1px solid #fff;
    background: rgba(35,22,14,.92);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transform: translateY(70px);
    transition: .4s;
}
.product-image:hover .add-bag {
    transform: translateY(0);
}
.add-bag:hover {
    background: #c99a5a;
    border-color: #c99a5a;
}
/* PRODUCT TEXT */
.product-info {
    padding: 16px 0;
}
.product-info h3 {
    font-family: Georgia, serif;
    font-size: 19px;
    font-weight: 400;
}
.product-info p {
    margin-top: 6px;
    color: #9a7042;
    font-size: 14px;
}
/* =====================================================
   SIGNATURE
===================================================== */
.signature {
    min-height: 600px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #2b1b11;
    color: #fff;
}
.signature-photo {
    height: 600px;
}
.signature-photo img {
    height: 100%;
    object-fit: cover;
}
.signature-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px 10%;
}
.eyebrow-dark {
    color: #d7ad6a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 20px;
}
.signature-text h2 {
    font-family: Georgia, serif;
    font-size: 54px;
    font-weight: 400;
    line-height: 1.08;
    margin-bottom: 25px;
}
.signature-text > p:not(.eyebrow-dark) {
    max-width: 440px;
    color: rgba(255,255,255,.72);
    font-family: Georgia, serif;
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 30px;
}
.signature-text a,
.craft-text a {
    width: fit-content;
    color: #d7ad6a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    padding-bottom: 9px;
    border-bottom: 1px solid #d7ad6a;
}
/* =====================================================
   CRAFT
===================================================== */
.craft {
    max-width: 1380px;
    margin: auto;
    padding: 110px 4%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.craft-text h2 {
    font-family: Georgia, serif;
    font-size: 55px;
    font-weight: 400;
    line-height: 1.08;
    margin-bottom: 25px;
}
.craft-text > p:not(.eyebrow-dark) {
    max-width: 470px;
    color: #6c6259;
    font-family: Georgia, serif;
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 30px;
}
.craft-photo {
    height: 520px;
}
.craft-photo img {
    height: 100%;
    object-fit: cover;
}
/* =====================================================
   BRIDAL
===================================================== */
.bridal {
    height: 530px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}
.bridal-bg {
    position: absolute;
    inset: 0;
    background-image:
        url("../images/heroimage.png");
    background-size: cover;
    background-position: center;
}
.bridal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(35,21,13,.62);
}
.bridal-content {
    position: relative;
    z-index: 2;
}
.bridal-content p {
    color: #dfb46d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 20px;
}
.bridal-content h2 {
    font-family: Georgia, serif;
    font-size: 53px;
    font-weight: 400;
    margin-bottom: 30px;
}
.bridal-content a {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d7ad6a;
}
.bridal-content a span {
    font-size: 23px;
    margin-left: 12px;
}
/* =====================================================
   PROMISE
===================================================== */
.promise {
    padding: 100px 4%;
    background: #f7f4ef;
}
.promise-row {
    max-width: 1300px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
.promise-item {
    padding: 20px 35px;
    border-right: 1px solid rgba(42,34,27,.15);
}
.promise-item:last-child {
    border-right: none;
}
.promise-item span {
    color: #bd8847;
    font-size: 11px;
    letter-spacing: 2px;
}
.promise-item h3 {
    font-family: Georgia, serif;
    font-size: 21px;
    font-weight: 400;
    margin: 14px 0 9px;
}
.promise-item p {
    color: #746a61;
    font-size: 13px;
}
/* =====================================================
   SHOWROOM
===================================================== */
.showroom {
    height: 470px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}
.showroom-bg {
    position: absolute;
    inset: 0;
    background-image:
        url("../images/craftmanship.jpg");
    background-size: cover;
    background-position: center;
}
.showroom-overlay {
    position: absolute;
    inset: 0;
    background: rgba(30,19,12,.68);
}
.showroom-content {
    position: relative;
    z-index: 2;
}
.showroom-content p {
    color: #d7ad6a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 20px;
}
.showroom-content h2 {
    font-family: Georgia, serif;
    font-size: 52px;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 30px;
}
.showroom-content a {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d7ad6a;
}
/* =====================================================
   FOOTER
===================================================== */
.footer {
    background: #21150f;
    color: #fff;
}
.footer-main {
    max-width: 1400px;
    margin: auto;
    padding: 80px 5%;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 70px;
}
.footer-logo {
    display: flex;
    flex-direction: column;
    width: fit-content;
    font-family: Georgia, serif;
    font-size: 36px;
    letter-spacing: 6px;
}
.footer-logo small {
    font-family: Arial, sans-serif;
    font-size: 9px;
    letter-spacing: 6px;
    margin-top: 7px;
}
.footer-brand > p {
    max-width: 330px;
    color: rgba(255,255,255,.65);
    font-family: Georgia, serif;
    line-height: 1.7;
    margin: 25px 0;
}
.social-links {
    display: flex;
    gap: 20px;
}
.social-links a {
    color: rgba(255,255,255,.7);
    font-size: 12px;
    transition: .3s;
}
.social-links a:hover {
    color: #d7ad6a;
}
.footer-column {
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.footer-column h3 {
    color: #d7ad6a;
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.footer-column a {
    color: rgba(255,255,255,.68);
    font-size: 12px;
    transition: .3s;
}
.footer-column a:hover {
    color: #d7ad6a;
    transform: translateX(5px);
}
.footer-bottom {
    max-width: 1400px;
    margin: auto;
    padding: 20px 5% 25px;
    border-top: 1px solid rgba(255,255,255,.14);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255,255,255,.45);
    font-size: 10px;
}
.footer-bottom div {
    display: flex;
    gap: 25px;
}
.footer-bottom a:hover {
    color: #d7ad6a;
}
/* =====================================================
   DARK MODE
===================================================== */

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 1200px) {
    .navigation {
        gap: 20px;
    }
    .header-actions {
        gap: 10px;
    }
    .logo {
        width: 175px;
    }
    .logo-name {
        font-size: 32px;
    }
}
@media (max-width: 1000px) {
    .navigation {
        display: none;
    }
    .header-actions {
        margin-left: auto;
    }
    .mobile-button {
        display: block;
    }
    .collection-grid,
    .product-grid {
        grid-template-columns: repeat(2,1fr);
    }
    .signature,
    .craft {
        grid-template-columns: 1fr;
    }
    .signature-photo {
        height: 450px;
    }
    .promise-row {
        grid-template-columns: repeat(2,1fr);
    }
    .promise-item:nth-child(2) {
        border-right: none;
    }
    .footer-main {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 650px) {
    .header-inner {
        height: 85px;
    }
    .logo {
        width: 145px;
    }
    .logo-name {
        font-size: 27px;
        letter-spacing: 5px;
    }
    .logo-jewels {
        font-size: 8px;
        letter-spacing: 4px;
    }
    .theme-button,
    .rtl-button {
        display: none;
    }
    .hero {
        min-height: 680px;
    }
    .hero-content {
        width: 88%;
    }
    .hero h1 {
        font-size: 50px;
    }
    .hero-description {
        font-size: 17px;
    }
    .collections,
    .new-arrivals {
        padding: 70px 6%;
    }
    .section-heading h2 {
        font-size: 38px;
    }
    .collection-grid,
    .product-grid {
        grid-template-columns: 1fr;
    }
    .product-image {
        height: 390px;
    }
    .signature-photo {
        height: 360px;
    }
    .signature-text {
        padding: 65px 8%;
    }
    .signature-text h2,
    .craft-text h2 {
        font-size: 43px;
    }
    .craft {
        padding: 75px 7%;
    }
    .craft-photo {
        height: 400px;
    }
    .bridal {
        height: 440px;
    }
    .bridal-content {
        padding: 25px;
    }
    .bridal-content h2 {
        font-size: 39px;
    }
    .promise {
        padding: 75px 6%;
    }
    .promise-row {
        grid-template-columns: 1fr;
    }
    .promise-item {
        border-right: none;
        border-bottom: 1px solid rgba(42,34,27,.15);
        padding: 25px 5px;
    }
    .promise-item:last-child {
        border-bottom: none;
    }
    .showroom {
        height: 400px;
    }
    .showroom-content h2 {
        font-size: 40px;
    }
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 45px 25px;
        padding: 65px 7%;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 18px;
        text-align: center;
    }
}
@media (max-width: 420px) {
    .logo {
        width: 125px;
    }
    .logo-name {
        font-size: 23px;
    }
    .header-actions .icon-button,
    .header-actions .bag-button {
        display: none;
    }
    .hero h1 {
        font-size: 43px;
    }
    .footer-main {
        grid-template-columns: 1fr;
    }
    .footer-brand {
        grid-column: auto;
    }
}
/* =========================================
   DARK MODE
========================================= */
body.dark-mode {
    background: #17110d;
    color: #f5f1ea;
}
body.dark-mode .collections-section,
body.dark-mode .new-arrivals,
body.dark-mode .signature-section,
body.dark-mode .craft-section,
body.dark-mode .promise-section {
    background: #17110d;
    color: #f5f1ea;
}
body.dark-mode .section-title,
body.dark-mode .section-heading,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode p {
    color: #f5f1ea;
}
body.dark-mode .site-header.scrolled {
    background: #17110d;
}
body.dark-mode .product-name,
body.dark-mode .collection-title {
    color: #f5f1ea;
}
body.dark-mode .site-footer {
    background: #100b08;
    color: #f5f1ea;
}
/* =========================================
   RTL MODE
========================================= */
html[dir="rtl"] {
    direction: rtl;
}
html[dir="rtl"] body {
    direction: rtl;
}
html[dir="rtl"] .hero-content {
    text-align: right;
}
html[dir="rtl"] .footer-content {
    direction: rtl;
}
html[dir="rtl"] .main-nav {
    direction: rtl;
}
html[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;
}
/* Keep buttons/actions usable in RTL */
html[dir="rtl"] .header-actions {
    direction: ltr;
}
/* SCROLLED STICKY HEADER */
.header.scrolled {
    background: #21150f;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}
.header.scrolled .logo,
.header.scrolled .navigation a,
.header.scrolled .icon-button,
.header.scrolled .bag-button,
.header.scrolled .theme-button,
.header.scrolled .rtl-button {
    color: #ffffff;
}
/* =========================================
   PREMIUM DROPDOWNS
========================================= */
.dropdown {
    position: relative;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: #21150f;
    padding: 12px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    z-index: 9999;
}
.dropdown-menu a {
    display: block;
    padding: 12px 20px;
    color: #ffffff !important;
    font-size: 12px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}
.dropdown-menu a:hover {
    color: #d7ad6a !important;
    padding-left: 26px;
}
/* Desktop hover */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* Arrow */
.dropdown > a span {
    display: inline-block;
    margin-left: 5px;
    font-size: 14px;
    transition: transform 0.3s ease;
}
.dropdown:hover > a span {
    transform: rotate(180deg);
}
/* =========================================
   BAG COUNTER ANIMATION
========================================= */
.bag-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.bag-count.bag-bounce {
    animation: bagBounce 0.5s ease;
}
@keyframes bagBounce {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.5);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}
/* Added button */
.add-bag.added {
    letter-spacing: 2px;
}
/* =========================================================
   ZIVARA HOME 2 — CLEAN EDITORIAL VERSION
   • Hero = real desktop viewport composition
   • Noticeable breathing gap between sections
   • No boxed-gallery feeling
   • Images fill their visual frame completely
   • Different animation for each section
   • Strong Light Mode / Dark Mode contrast
========================================================= */

.h2-page{
    --h2-bg:#f5efe6;
    --h2-panel:#ebe0d1;
    --h2-paper:#fbf7f1;
    --h2-ink:#2b241f;
    --h2-muted:#756b60;
    --h2-gold:#b4884d;
    --h2-line:rgba(52,39,29,.16);
    --h2-dark:#34241f;
    --h2-wine:#4a1f29;
    --h2-gap:18px;
    background:var(--h2-bg);
    color:var(--h2-ink);
    overflow-x:hidden;
}

.h2-page *,
.h2-page *::before,
.h2-page *::after{
    box-sizing:border-box;
}

/* Every main section gets the same design rhythm,
   while the hero is intentionally taller. */
.h2-block{
    position:relative;
    width:100%;
    height:540px;
    margin:0 0 var(--h2-gap);
    overflow:hidden;
}

.h2-page img{
    display:block;
}

.h2-eyebrow{
    margin:0 0 13px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--h2-gold);
}

.h2-eyebrow::before{
    content:"";
    display:inline-block;
    width:30px;
    height:1px;
    margin:0 10px 3px 0;
    background:currentColor;
}

.h2-page h1,
.h2-page h2,
.h2-page h3{
    font-family:Georgia,"Times New Roman",serif;
    font-weight:500;
}

.h2-page h2{
    margin:0 0 16px;
    font-size:clamp(38px,4.2vw,62px);
    line-height:.96;
    letter-spacing:-.035em;
}

.h2-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:100%;
    padding:46px clamp(28px,5vw,76px);
}

.h2-copy p{
    max-width:530px;
    margin:0;
    font-size:13px;
    line-height:1.75;
    color:var(--h2-muted);
}

.h2-btn{
    width:max-content;
    display:inline-flex;
    align-items:center;
    gap:11px;
    margin-top:24px;
    padding:11px 16px;
    border:1px solid currentColor;
    color:inherit;
    text-decoration:none;
    font-size:10px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    transition:transform .3s ease,background .3s ease,color .3s ease;
}

.h2-btn:hover{
    transform:translateY(-3px);
    background:currentColor;
    color:var(--h2-paper);
}

/* =========================================================
   HERO
========================================================= */
.h2-hero{
    height:min(760px,84vh);
    min-height:650px;
    margin-bottom:var(--h2-gap);
    position:relative;
    overflow:hidden;
    isolation:isolate;
    color:#fff;
}

.h2-hero-media{
    position:absolute;
    inset:0;
    z-index:0;
}

.h2-hero-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 46%;
    animation:h2HeroDrift 11s ease-in-out infinite alternate;
}

.h2-hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(90deg,rgba(21,15,12,.82) 0%,rgba(21,15,12,.52) 33%,rgba(21,15,12,.10) 69%,rgba(21,15,12,.20)),
        linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.18));
}

.h2-hero-content{
    position:relative;
    z-index:3;
    width:min(680px,56%);
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:50px clamp(28px,6vw,92px);
}

.h2-hero-content .h2-eyebrow{
    color:#e3c892;
}

.h2-hero-content h1{
    margin:0;
    font-size:clamp(56px,6.6vw,94px);
    line-height:.86;
    letter-spacing:-.055em;
}

.h2-hero-content p:not(.h2-eyebrow){
    max-width:500px;
    margin:19px 0 0;
    color:rgba(255,255,255,.86);
    font-size:14px;
    line-height:1.8;
}

.h2-hero-content .h2-btn{
    color:#fff;
    border-color:rgba(255,255,255,.65);
}

.h2-hero-content .h2-btn:hover{
    background:#fff;
    color:#2a201b;
}

.h2-hero-stamp{
    position:absolute;
    z-index:3;
    right:5.5%;
    bottom:37px;
    width:112px;
    height:112px;
    border:1px solid rgba(255,255,255,.48);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-family:Georgia,"Times New Roman",serif;
    font-size:13px;
    line-height:1.15;
    letter-spacing:.1em;
    text-transform:uppercase;
    animation:h2Float 4.2s ease-in-out infinite;
}

.h2-hero-stamp::after{
    content:"✦";
    position:absolute;
    font-family:Arial,sans-serif;
    font-size:11px;
    animation:h2Spin 7s linear infinite;
}

/* =========================================================
   01 — STATEMENT
========================================================= */
.h2-statement{
    display:grid;
    grid-template-columns:46% 54%;
    background:var(--h2-paper);
}

.h2-statement-image{
    position:relative;
    height:100%;
    overflow:hidden;
}

.h2-statement-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}

.h2-statement:hover .h2-statement-image img{
    transform:scale(1.055);
}

.h2-statement-copy{
    position:relative;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:48px clamp(30px,5vw,84px);
}

.h2-statement-copy::after{
    content:"02";
    position:absolute;
    right:8%;
    top:13%;
    color:rgba(180,136,77,.12);
    font:500 130px/1 Georgia,"Times New Roman",serif;
}

.h2-statement-copy .h2-rule{
    width:68px;
    height:1px;
    margin:1px 0 21px;
    background:var(--h2-gold);
}

/* =========================================================
   02 — CATEGORIES
   Strong wide panels rather than four tiny cards.
========================================================= */
.h2-categories{
    background:var(--h2-panel);
    padding:18px;
}

.h2-category-grid{
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    grid-template-rows:1fr 1fr;
    gap:18px;
}

.h2-category{
    position:relative;
    overflow:hidden;
    color:#fff;
    text-decoration:none;
}

.h2-category:nth-child(1){
    grid-row:1 / span 2;
}

.h2-category img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .5s ease;
}

.h2-category:hover img{
    transform:scale(1.065);
    filter:saturate(1.06);
}

.h2-category::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 38%,rgba(19,13,10,.82));
}

.h2-category-copy{
    position:absolute;
    z-index:2;
    left:27px;
    right:27px;
    bottom:25px;
}

.h2-category-copy small{
    display:block;
    margin-bottom:7px;
    font-size:9px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:#ecd19f;
}

.h2-category-copy h3{
    margin:0;
    font-size:34px;
    line-height:1;
}

/* =========================================================
   03 — EDITORIAL DUO
========================================================= */
.h2-duo{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--h2-paper);
}

.h2-duo-panel{
    position:relative;
    height:100%;
    overflow:hidden;
}

.h2-duo-panel:first-child{
    border-right:var(--h2-gap) solid var(--h2-bg);
}

.h2-duo-panel img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}

.h2-duo-panel:hover img{
    transform:scale(1.06);
}

.h2-duo-panel::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 38%,rgba(20,14,11,.76));
}

.h2-duo-copy{
    position:absolute;
    z-index:2;
    left:30px;
    right:30px;
    bottom:28px;
    color:#fff;
}

.h2-duo-copy small{
    display:block;
    margin-bottom:8px;
    font-size:9px;
    letter-spacing:.2em;
    color:#ecd09a;
}

.h2-duo-copy h3{
    margin:0;
    font-size:35px;
    line-height:.98;
}

.h2-duo-copy p{
    max-width:420px;
    margin:10px 0 0;
    font-size:12px;
    line-height:1.65;
    color:rgba(255,255,255,.78);
}

/* =========================================================
   04 — WATCH FEATURE
========================================================= */
.h2-watch{
    display:grid;
    grid-template-columns:57% 43%;
    background:var(--h2-dark);
    color:#fff;
}

.h2-watch-image{
    height:100%;
    position:relative;
    overflow:hidden;
}

.h2-watch-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform 1.2s cubic-bezier(.16,1,.3,1);
}

.h2-watch:hover .h2-watch-image img{
    transform:scale(1.06);
}

.h2-watch-image::before{
    content:"TIME / 04";
    position:absolute;
    z-index:2;
    left:23px;
    top:22px;
    font-size:9px;
    letter-spacing:.2em;
    color:rgba(255,255,255,.67);
}

.h2-watch-copy{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:45px clamp(28px,4.5vw,68px);
}

.h2-watch-copy .h2-eyebrow{
    color:#d4b47d;
}

.h2-watch-copy p{
    color:rgba(255,255,255,.73);
}

.h2-watch-stats{
    margin-top:27px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid rgba(255,255,255,.15);
    border-bottom:1px solid rgba(255,255,255,.15);
}

.h2-watch-stats div{
    padding:16px 9px 15px 0;
}

.h2-watch-stats div+div{
    border-left:1px solid rgba(255,255,255,.15);
    padding-left:13px;
}

.h2-watch-stats strong{
    display:block;
    margin-bottom:5px;
    color:#d8bc88;
    font:500 23px/1 Georgia,"Times New Roman",serif;
}

.h2-watch-stats span{
    font-size:9px;
    letter-spacing:.11em;
    text-transform:uppercase;
    color:rgba(255,255,255,.58);
}

/* =========================================================
   05 — ARRIVALS
========================================================= */
.h2-arrivals{
    display:grid;
    grid-template-columns:29% 35.5% 35.5%;
    background:var(--h2-panel);
}

.h2-arrivals-intro{
    height:100%;
    padding:44px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:var(--h2-paper);
    border-right:1px solid var(--h2-line);
}

.h2-arrivals-intro h2{
    margin:0 0 13px;
    font-size:43px;
    line-height:.94;
}

.h2-arrivals-intro p{
    max-width:260px;
    margin:0;
    color:var(--h2-muted);
    font-size:12px;
    line-height:1.7;
}

.h2-arrival-column{
    height:100%;
    display:grid;
    grid-template-rows:1fr 1fr;
}

.h2-arrival-column + .h2-arrival-column{
    border-left:1px solid rgba(255,255,255,.76);
}

.h2-product{
    position:relative;
    overflow:hidden;
    color:#fff;
    text-decoration:none;
}

.h2-product:first-child{
    border-bottom:1px solid rgba(255,255,255,.76);
}

.h2-product img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform 1.05s cubic-bezier(.16,1,.3,1);
}

.h2-product:hover img{
    transform:scale(1.07);
}

.h2-product::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 35%,rgba(20,14,11,.80));
}

.h2-product-info{
    position:absolute;
    z-index:2;
    left:21px;
    right:18px;
    bottom:20px;
}

.h2-product-info small{
    display:block;
    margin-bottom:6px;
    color:#edd09b;
    font-size:9px;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.h2-product-info h3{
    margin:0;
    font-size:24px;
}

.h2-product-info span{
    display:block;
    margin-top:6px;
    font-size:9px;
    letter-spacing:.13em;
    text-transform:uppercase;
}

/* =========================================================
   06 — CRAFT DETAIL
========================================================= */
.h2-craft{
    display:grid;
    grid-template-columns:48% 52%;
    background:var(--h2-paper);
}

.h2-craft-copy{
    position:relative;
    padding:45px clamp(28px,5vw,75px);
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.h2-craft-copy::after{
    content:"Z";
    position:absolute;
    right:8%;
    top:6%;
    font:500 220px/1 Georgia,"Times New Roman",serif;
    color:rgba(180,136,77,.08);
    pointer-events:none;
}

.h2-craft-list{
    margin-top:25px;
    display:grid;
    grid-template-columns:1fr 1fr;
    border-top:1px solid var(--h2-line);
}

.h2-craft-list div{
    padding:15px 10px 14px 0;
    border-bottom:1px solid var(--h2-line);
}

.h2-craft-list div:nth-child(even){
    border-left:1px solid var(--h2-line);
    padding-left:17px;
}

.h2-craft-list span{
    display:block;
    margin-bottom:5px;
    color:var(--h2-gold);
    font-size:9px;
    letter-spacing:.18em;
}

.h2-craft-list strong{
    font:500 18px/1.1 Georgia,"Times New Roman",serif;
}

.h2-craft-image{
    height:100%;
    overflow:hidden;
}

.h2-craft-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 1.15s cubic-bezier(.16,1,.3,1);
}

.h2-craft:hover .h2-craft-image img{
    transform:scale(1.06);
}

/* =========================================================
   07 — GIFTING
========================================================= */
.h2-gifting{
    display:grid;
    grid-template-columns:44% 56%;
    background:var(--h2-wine);
    color:#f8efe4;
}

.h2-gifting-image{
    height:100%;
    overflow:hidden;
}

.h2-gifting-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 1.15s cubic-bezier(.16,1,.3,1);
}

.h2-gifting:hover .h2-gifting-image img{
    transform:scale(1.055);
}

.h2-gifting-copy{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:45px clamp(28px,5vw,76px);
}

.h2-gifting-copy .h2-eyebrow{
    color:#d7ba84;
}

.h2-gifting-copy p{
    color:rgba(255,255,255,.73);
}

.h2-gift-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:26px;
    border-top:1px solid rgba(255,255,255,.14);
    border-bottom:1px solid rgba(255,255,255,.14);
}

.h2-gift-row div{
    padding:15px 9px 14px 0;
}

.h2-gift-row div+div{
    border-left:1px solid rgba(255,255,255,.14);
    padding-left:13px;
}

.h2-gift-row strong{
    display:block;
    margin-bottom:5px;
    color:#d6b982;
    font:500 22px/1 Georgia,"Times New Roman",serif;
}

.h2-gift-row span{
    display:block;
    font-size:9px;
    letter-spacing:.1em;
    text-transform:uppercase;
    line-height:1.45;
    color:rgba(255,255,255,.64);
}

/* =========================================================
   08 — EXPERIENCE / SHOWROOM
========================================================= */
.h2-experience{
    display:grid;
    grid-template-columns:54% 46%;
    background:var(--h2-paper);
}

.h2-experience-image{
    position:relative;
    overflow:hidden;
}

.h2-experience-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform 1.15s cubic-bezier(.16,1,.3,1);
}

.h2-experience:hover .h2-experience-image img{
    transform:scale(1.055);
}

.h2-experience-copy{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:45px clamp(28px,5vw,72px);
}

.h2-service-list{
    margin-top:27px;
    border-top:1px solid var(--h2-line);
}

.h2-service{
    display:grid;
    grid-template-columns:40px 1fr auto;
    align-items:center;
    gap:10px;
    min-height:58px;
    border-bottom:1px solid var(--h2-line);
}

.h2-service b{
    color:var(--h2-gold);
    font-size:10px;
    letter-spacing:.1em;
}

.h2-service strong{
    font:500 18px/1 Georgia,"Times New Roman",serif;
}

.h2-service span{
    color:var(--h2-muted);
    font-size:10px;
}

/* =========================================================
   09 — FINAL CTA
========================================================= */
.h2-final{
    height:510px;
    position:relative;
    color:#fff;
    isolation:isolate;
}

.h2-final-media{
    position:absolute;
    inset:0;
}

.h2-final-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    animation:h2FinalFloat 9s ease-in-out infinite alternate;
}

.h2-final::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(24,17,13,.79),rgba(24,17,13,.28) 62%,rgba(24,17,13,.46)),
        linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.28));
}

.h2-final-content{
    position:relative;
    z-index:3;
    height:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    padding:45px 6vw;
}

.h2-final-content h2{
    margin:0 0 15px;
    color:#fff;
    font-size:clamp(45px,5vw,72px);
}

.h2-final-content p{
    max-width:480px;
    margin:0;
    color:rgba(255,255,255,.83);
    font-size:13px;
    line-height:1.7;
}

.h2-final-panel{
    justify-self:end;
    width:min(395px,100%);
    padding:27px;
    background:rgba(35,24,19,.47);
    border:1px solid rgba(255,255,255,.32);
    backdrop-filter:blur(7px);
    transition:transform .4s ease,background .4s ease;
}

.h2-final-panel:hover{
    transform:translateY(-7px);
    background:rgba(35,24,19,.58);
}

.h2-final-panel small{
    display:block;
    margin-bottom:8px;
    color:#edcf99;
    font-size:9px;
    letter-spacing:.2em;
    text-transform:uppercase;
}

.h2-final-panel h3{
    margin:0 0 9px;
    font-size:29px;
}

.h2-final-panel p{
    font-size:12px;
    line-height:1.65;
}

/* =========================================================
   SCROLL ANIMATION SYSTEM
   Every section enters differently.
========================================================= */
.h2-reveal-left,
.h2-reveal-right,
.h2-reveal-up,
.h2-reveal-scale,
.h2-reveal-clip,
.h2-reveal-tilt{
    opacity:0;
    will-change:transform,opacity,clip-path;
    transition:
        opacity .8s ease,
        transform 1s cubic-bezier(.16,1,.3,1),
        clip-path 1s cubic-bezier(.16,1,.3,1);
}

.h2-reveal-left{transform:translateX(-70px)}
.h2-reveal-right{transform:translateX(70px)}
.h2-reveal-up{transform:translateY(60px)}
.h2-reveal-scale{transform:scale(.9)}
.h2-reveal-clip{clip-path:inset(0 45% 0 0)}
.h2-reveal-tilt{transform:translateY(52px) rotate(1.8deg)}

.h2-visible{
    opacity:1;
    transform:none;
    clip-path:inset(0 0 0 0);
}

.h2-stagger > *{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1);
}

.h2-stagger.h2-visible > *{
    opacity:1;
    transform:none;
}

.h2-stagger.h2-visible > *:nth-child(1){transition-delay:.05s}
.h2-stagger.h2-visible > *:nth-child(2){transition-delay:.15s}
.h2-stagger.h2-visible > *:nth-child(3){transition-delay:.25s}
.h2-stagger.h2-visible > *:nth-child(4){transition-delay:.35s}

/* subtle image shine on hover */
.h2-image-shine{
    position:relative;
}

.h2-image-shine::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:-45%;
    width:24%;
    z-index:5;
    pointer-events:none;
    transform:skewX(-15deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
}

.h2-image-shine:hover::before{
    animation:h2Shine .75s ease;
}

/* =========================================================
   DARK MODE — intentionally different
========================================================= */
body.dark-mode .h2-page{
    --h2-bg:#0d0c0b;
    --h2-panel:#171412;
    --h2-paper:#211c18;
    --h2-ink:#f3ebe0;
    --h2-muted:#bdb1a4;
    --h2-gold:#d3aa68;
    --h2-line:rgba(245,235,223,.15);
    --h2-dark:#090807;
    --h2-wine:#281017;
}

body.dark-mode .h2-page .h2-categories{
    background:#0d0c0b;
}

body.dark-mode .h2-page .h2-arrivals-intro{
    background:#171412;
}

body.dark-mode .h2-page .h2-statement-copy::after,
body.dark-mode .h2-page .h2-craft-copy::after{
    color:rgba(211,170,104,.10);
}

body.dark-mode .h2-page .h2-statement,
body.dark-mode .h2-page .h2-craft,
body.dark-mode .h2-page .h2-experience{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(255,255,255,.04);
}

/* =========================================================
   KEYFRAMES
========================================================= */
@keyframes h2HeroDrift{
    from{transform:scale(1.02) translate3d(0,0,0)}
    to{transform:scale(1.075) translate3d(-1.2%,0,0)}
}

@keyframes h2FinalFloat{
    from{transform:scale(1.02)}
    to{transform:scale(1.06)}
}

@keyframes h2Float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
}

@keyframes h2Spin{
    to{transform:rotate(360deg)}
}

@keyframes h2Shine{
    from{left:-45%}
    to{left:125%}
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:980px){
    .h2-hero{
        height:680px;
        min-height:680px;
    }

    .h2-hero-content{
        width:65%;
    }

    .h2-block{
        height:520px;
    }

    .h2-page h2{
        font-size:46px;
    }
}

@media (max-width:760px){
    .h2-page{
        --h2-gap:14px;
    }

    .h2-block,
    .h2-hero,
    .h2-final{
        height:auto;
        min-height:0;
    }

    .h2-hero{
        height:640px;
        min-height:640px;
    }

    .h2-hero-content{
        width:100%;
        padding:32px 22px;
    }

    .h2-hero-content h1{
        font-size:56px;
    }

    .h2-hero-stamp{
        right:20px;
        bottom:20px;
        width:82px;
        height:82px;
        font-size:10px;
    }

    .h2-statement,
    .h2-watch,
    .h2-craft,
    .h2-gifting,
    .h2-experience{
        grid-template-columns:1fr;
    }

    .h2-statement-image,
    .h2-watch-image,
    .h2-craft-image,
    .h2-gifting-image,
    .h2-experience-image{
        height:300px;
        min-height:300px;
    }

    .h2-statement-copy,
    .h2-watch-copy,
    .h2-craft-copy,
    .h2-gifting-copy,
    .h2-experience-copy{
        height:auto;
        min-height:360px;
        padding:32px 22px;
    }

    .h2-category-grid{
        min-height:650px;
        gap:10px;
    }

    .h2-category{
        min-height:315px;
    }

    .h2-categories{
        padding:10px;
    }

    .h2-duo{
        grid-template-columns:1fr;
    }

    .h2-duo-panel{
        height:300px;
    }

    .h2-duo-panel:first-child{
        border-right:0;
        border-bottom:10px solid var(--h2-bg);
    }

    .h2-arrivals{
        grid-template-columns:1fr 1fr;
        min-height:800px;
    }

    .h2-arrivals-intro{
        grid-column:1 / -1;
        min-height:230px;
        padding:28px 22px;
    }

    .h2-arrival-column{
        min-height:570px;
    }

    .h2-final{
        min-height:620px;
    }

    .h2-final-content{
        grid-template-columns:1fr;
        gap:25px;
        padding:32px 22px;
    }

    .h2-final-panel{
        justify-self:stretch;
        width:100%;
    }

    .h2-service{
        grid-template-columns:35px 1fr auto;
    }
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
    }

    .h2-reveal-left,
    .h2-reveal-right,
    .h2-reveal-up,
    .h2-reveal-scale,
    .h2-reveal-clip,
    .h2-reveal-tilt,
    .h2-stagger > *{
        opacity:1 !important;
        transform:none !important;
        clip-path:none !important;
    }
}


/* =========================================================
   404 ERROR PAGE
   ========================================================= */
.error-page {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 90px;
    padding: 80px 6%;
    overflow: hidden;
    background: #f7f3ed;
    color: #21150f;
}
/* =========================================================
   DECORATIVE BACKGROUND
   ========================================================= */
.error-circle {
    position: absolute;
    border-radius: 50%;
    border:
        1px solid rgba(180,140,90,.15);
    pointer-events: none;
}
.error-circle-one {
    width: 380px;
    height: 380px;
    left: -190px;
    top: 80px;
    animation:
        errorCircleOne
        12s ease-in-out
        infinite alternate;
}
.error-circle-two {
    width: 230px;
    height: 230px;
    right: -70px;
    bottom: 50px;
    animation:
        errorCircleTwo
        9s ease-in-out
        infinite alternate;
}
@keyframes errorCircleOne {
    from {
        transform:
            translate(0,0)
            rotate(0deg);
    }
    to {
        transform:
            translate(70px,60px)
            rotate(30deg);
    }
}
@keyframes errorCircleTwo {
    from {
        transform:
            translate(0,0);
    }
    to {
        transform:
            translate(-60px,-40px);
    }
}
/* =========================================================
   IMAGE
   ========================================================= */
.error-image {
    position: relative;
    z-index: 2;
    width: 380px;
    height: 470px;
    overflow: hidden;
    animation:
        errorImageReveal
        1.3s
        cubic-bezier(.16,1,.3,1)
        both;
}
@keyframes errorImageReveal {
    from {
        opacity: 0;
        transform:
            translateX(-80px)
            scale(.88);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform:
            translateX(0)
            scale(1);
        filter: blur(0);
    }
}
.error-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            transparent 55%,
            rgba(215,173,106,.15)
        );
    pointer-events: none;
}
.error-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 1s ease;
}
.error-image:hover img {
    transform:
        scale(1.06);
}
/* =========================================================
   CONTENT
   ========================================================= */
.error-content {
    position: relative;
    z-index: 3;
    max-width: 550px;
    animation:
        errorContentReveal
        1.3s
        .15s
        cubic-bezier(.16,1,.3,1)
        both;
}
@keyframes errorContentReveal {
    from {
        opacity: 0;
        transform:
            translateX(80px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform:
            translateX(0);
        filter: blur(0);
    }
}
.error-label {
    display: block;
    margin-bottom: 10px;
    color: #b08b54;
    font-size: 10px;
    letter-spacing: 3px;
}
.error-number {
    margin-bottom: 5px;
    font-family: Georgia, serif;
    color: #d7ad6a;
    font-size:
        clamp(90px,13vw,150px);
    font-weight: 400;
    line-height: .8;
    letter-spacing: -8px;
}
.error-content h1 {
    max-width: 500px;
    margin: 25px 0 20px;
    font-family: Georgia, serif;
    font-size:
        clamp(36px,4vw,54px);
    font-weight: 400;
    line-height: 1.05;
}
.error-content p {
    max-width: 480px;
    margin: 0;
    color: #6b6159;
    font-size: 14px;
    line-height: 1.85;
}
/* =========================================================
   BUTTONS
   ========================================================= */
.error-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}
.error-primary,
.error-secondary {
    display: inline-block;
    padding: 14px 22px;
    text-decoration: none;
    font-size: 10px;
    letter-spacing: 1.8px;
    transition:
        all .3s ease;
}
.error-primary {
    background: #21150f;
    border:
        1px solid #21150f;
    color: #fff;
}
.error-primary:hover {
    background: #d7ad6a;
    border-color: #d7ad6a;
    color: #21150f;
    transform:
        translateY(-3px);
}
.error-secondary {
    border:
        1px solid #b08b54;
    color: #21150f;
}
.error-secondary:hover {
    background: #d7ad6a;
    border-color: #d7ad6a;
    transform:
        translateY(-3px);
}
/* =========================================================
   DARK MODE
   ========================================================= */
body.dark-mode .error-page {
    background: #17110d;
    color: #f5f1ea;
}
body.dark-mode .error-content p {
    color: #cfc5bb;
}
body.dark-mode .error-secondary {
    color: #f5f1ea;
    border-color: #b08b54;
}
body.dark-mode .error-secondary:hover {
    color: #21150f;
}
/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
    .error-page {
        min-height: auto;
        padding:
            90px 7%;
        flex-direction: column;
        gap: 45px;
        text-align: center;
    }
    .error-image {
        width: 330px;
        height: 390px;
        order: 2;
    }
    .error-content {
        order: 1;
    }
    .error-content p {
        margin-left: auto;
        margin-right: auto;
    }
    .error-buttons {
        justify-content: center;
    }
}
@media (max-width: 600px) {
    .error-page {
        padding:
            70px 6%;
        gap: 35px;
    }
    .error-number {
        font-size: 100px;
    }
    .error-content h1 {
        font-size: 36px;
    }
    .error-image {
        width: 100%;
        max-width: 320px;
        height: 350px;
    }
    .error-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .error-primary,
    .error-secondary {
        text-align: center;
    }
}
/* =========================================================
   COMING SOON PAGE
   ========================================================= */
.coming-page {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 90px;
    padding: 80px 6%;
    overflow: hidden;
    background: #f7f3ed;
    color: #21150f;
}
/* =========================================================
   BACKGROUND ORBITS
   ========================================================= */
.coming-orbit {
    position: absolute;
    border-radius: 50%;
    border:
        1px solid rgba(180,140,90,.14);
    pointer-events: none;
}
.coming-orbit-one {
    width: 520px;
    height: 520px;
    left: -280px;
    top: 40px;
    animation:
        comingOrbitOne
        14s
        ease-in-out
        infinite
        alternate;
}
.coming-orbit-two {
    width: 300px;
    height: 300px;
    right: -120px;
    bottom: -60px;
    animation:
        comingOrbitTwo
        10s
        ease-in-out
        infinite
        alternate;
}
@keyframes comingOrbitOne {
    from {
        transform:
            translate(0,0)
            rotate(0deg);
    }
    to {
        transform:
            translate(90px,50px)
            rotate(35deg);
    }
}
@keyframes comingOrbitTwo {
    from {
        transform:
            translate(0,0)
            rotate(0deg);
    }
    to {
        transform:
            translate(-70px,-50px)
            rotate(-25deg);
    }
}
/* =========================================================
   MOVING LIGHT
   ========================================================= */
.coming-light {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background:
        rgba(215,173,106,.10);
    filter: blur(45px);
    right: 25%;
    top: 15%;
    pointer-events: none;
    animation:
        comingLightMove
        9s
        ease-in-out
        infinite
        alternate;
}
@keyframes comingLightMove {
    from {
        transform:
            translate(0,0);
    }
    to {
        transform:
            translate(-100px,100px);
    }
}
/* =========================================================
   IMAGE
   ========================================================= */
.coming-image {
    position: relative;
    z-index: 2;
    width: 390px;
    height: 470px;
    overflow: hidden;
}
.coming-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            transparent 50%,
            rgba(215,173,106,.14)
        );
    pointer-events: none;
}
.coming-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 1s ease;
}
.coming-image:hover img {
    transform:
        scale(1.07);
}
/* =========================================================
   CONTENT
   ========================================================= */
.coming-content {
    position: relative;
    z-index: 3;
    max-width: 560px;
}
.coming-label {
    display: block;
    margin-bottom: 18px;
    color: #b08b54;
    font-size: 10px;
    letter-spacing: 3px;
}
.coming-content h1 {
    margin: 0 0 24px;
    font-family: Georgia, serif;
    font-size:
        clamp(48px,6vw,76px);
    font-weight: 400;
    line-height: .98;
}
.coming-content p {
    max-width: 480px;
    margin: 0;
    color: #6b6159;
    font-size: 14px;
    line-height: 1.9;
}
.coming-line {
    width: 80px;
    height: 1px;
    margin: 28px 0 18px;
    background: #b08b54;
}
.coming-small-text {
    color: #9a8265;
    font-size: 9px;
    letter-spacing: 2.5px;
}
/* =========================================================
   BUTTONS
   ========================================================= */
.coming-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}
.coming-primary,
.coming-secondary {
    display: inline-block;
    padding: 14px 22px;
    text-decoration: none;
    font-size: 10px;
    letter-spacing: 1.8px;
    transition:
        all .3s ease;
}
.coming-primary {
    background: #21150f;
    border:
        1px solid #21150f;
    color: #fff;
}
.coming-primary:hover {
    background: #d7ad6a;
    border-color: #d7ad6a;
    color: #21150f;
    transform:
        translateY(-3px);
}
.coming-secondary {
    border:
        1px solid #b08b54;
    color: #21150f;
}
.coming-secondary:hover {
    background: #d7ad6a;
    border-color: #d7ad6a;
    transform:
        translateY(-3px);
}
/* =========================================================
   SCROLL ANIMATION
   ========================================================= */
.coming-slide-left,
.coming-slide-right {
    opacity: 0;
    filter: blur(7px);
    transition:
        opacity 1s ease,
        transform 1.15s cubic-bezier(.16,1,.3,1),
        filter 1s ease;
}
.coming-slide-left {
    transform:
        translateX(-90px)
        scale(.92);
}
.coming-slide-right {
    transform:
        translateX(90px)
        scale(.94);
}
.coming-slide-left.coming-show,
.coming-slide-right.coming-show {
    opacity: 1;
    transform:
        translateX(0)
        scale(1);
    filter: blur(0);
}
/* =========================================================
   DARK MODE
   ========================================================= */
body.dark-mode .coming-page {
    background: #17110d;
    color: #f5f1ea;
}
body.dark-mode .coming-content p {
    color: #cfc5bb;
}
body.dark-mode .coming-secondary {
    color: #f5f1ea;
    border-color: #b08b54;
}
body.dark-mode .coming-secondary:hover {
    color: #21150f;
}
/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
    .coming-page {
        min-height: auto;
        padding:
            90px 7%;
        flex-direction: column;
        gap: 50px;
        text-align: center;
    }
    .coming-content {
        order: 1;
    }
    .coming-image {
        order: 2;
        width: 340px;
        height: 400px;
    }
    .coming-content p {
        margin-left: auto;
        margin-right: auto;
    }
    .coming-line {
        margin-left: auto;
        margin-right: auto;
    }
    .coming-buttons {
        justify-content: center;
    }
}
@media (max-width: 600px) {
    .coming-page {
        padding:
            70px 6%;
        gap: 35px;
    }
    .coming-content h1 {
        font-size: 48px;
    }
    .coming-image {
        width: 100%;
        max-width: 320px;
        height: 350px;
    }
    .coming-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .coming-primary,
    .coming-secondary {
        text-align: center;
    }
}

/* =========================================================
   HOME 1 - SIGNATURE JEWELLERY
========================================================= */
.home-signature {
    min-height: 500px;
    padding: 80px 10%;
    background: #f7f3ed;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 80px;
    position: relative;
    overflow: hidden;
}
/* IMAGE */
.home-signature-image {
    width: 100%;
    height: 430px;
    overflow: hidden;
    position: relative;
}
.home-signature-image::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(177, 138, 81, 0.18);
    border-radius: 50%;
    right: -70px;
    top: -60px;
    animation: homeSignatureCircle 8s ease-in-out infinite alternate;
}
@keyframes homeSignatureCircle {
    from {
        transform: translate(0, 0) rotate(0);
    }
    to {
        transform: translate(-25px, 30px) rotate(12deg);
    }
}
.home-signature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}
.home-signature-image:hover img {
    transform: scale(1.06);
}
/* CONTENT */
.home-signature-content {
    max-width: 500px;
}
.home-section-label {
    display: block;
    margin-bottom: 14px;
    color: #b18a51;
    font-size: 10px;
    letter-spacing: 2.5px;
    font-weight: 600;
}
.home-signature-content h2 {
    margin: 0 0 20px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 46px;
    line-height: 1.08;
    font-weight: 400;
    color: #21150f;
}
.home-signature-content p {
    max-width: 440px;
    margin: 0 0 25px;
    color: #74685e;
    font-size: 13px;
    line-height: 1.9;
}
.home-signature-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #21150f;
    text-decoration: none;
    font-size: 10px;
    letter-spacing: 1.5px;
    border-bottom: 1px solid #b18a51;
    padding-bottom: 5px;
    transition: all 0.35s ease;
}
.home-signature-link span {
    transition: transform 0.35s ease;
}
.home-signature-link:hover {
    color: #b18a51;
}
.home-signature-link:hover span {
    transform: translateX(6px);
}
/* =========================================================
   HOME 1 - WHY ZIVARA
========================================================= */
.home-why {
    padding: 75px 8% 80px;
    background: #21150f;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.home-why::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(215, 173, 106, 0.12);
    border-radius: 50%;
    right: -170px;
    top: -180px;
    animation: homeWhyOrbit 12s ease-in-out infinite alternate;
}
.home-why::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    background: rgba(215, 173, 106, 0.08);
    border-radius: 50%;
    filter: blur(35px);
    left: -50px;
    bottom: -70px;
    animation: homeWhyLight 9s ease-in-out infinite alternate;
}
@keyframes homeWhyOrbit {
    from {
        transform: translate(0, 0) rotate(0);
    }
    to {
        transform: translate(-30px, 25px) rotate(10deg);
    }
}
@keyframes homeWhyLight {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(70px, -30px);
    }
}
/* HEADING */
.home-why-heading {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 50px;
}
.home-why-heading .home-section-label {
    color: #d7ad6a;
}
.home-why-heading h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    line-height: 1.1;
    font-weight: 400;
    color: #fff;
}
/* GRID */
.home-why-grid {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    z-index: 2;
}
.home-why-item {
    padding: 10px 28px 10px;
    border-left: 1px solid rgba(255,255,255,0.14);
}
.home-why-item:first-child {
    border-left: 0;
}
.home-why-number {
    display: block;
    margin-bottom: 25px;
    color: #d7ad6a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
}
.home-why-item h3 {
    margin: 0 0 13px;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.25;
}
.home-why-item p {
    margin: 0;
    color: rgba(255,255,255,0.68);
    font-size: 11px;
    line-height: 1.8;
}
/* =========================================================
   HOME 1 SCROLL ANIMATIONS
========================================================= */
.home1-reveal-left,
.home1-reveal-right,
.home1-reveal-bottom {
    opacity: 0;
    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(.16,1,.3,1);
}
.home1-reveal-left {
    transform: translateX(-70px);
}
.home1-reveal-right {
    transform: translateX(70px);
}
.home1-reveal-bottom {
    transform: translateY(60px);
}
.home1-reveal-left.home1-show,
.home1-reveal-right.home1-show,
.home1-reveal-bottom.home1-show {
    opacity: 1;
    transform: translate(0);
}
/* =========================================================
   HOME 1 DARK MODE
========================================================= */
body.dark-mode .home-signature {
    background: #17110d;
}
body.dark-mode .home-signature-content h2,
body.dark-mode .home-signature-content p {
    color: #f5f1ea;
}
body.dark-mode .home-signature-link {
    color: #f5f1ea;
}
body.dark-mode .home-why {
    background: #0f0a07;
}
/* =========================================================
   HOME 1 RESPONSIVE
========================================================= */
@media (max-width: 900px) {
    .home-signature {
        min-height: auto;
        padding: 55px 6%;
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .home-signature-image {
        height: 320px;
    }
    .home-signature-content h2 {
        font-size: 38px;
    }
    .home-why {
        padding: 60px 6%;
    }
    .home-why-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 35px;
    }
    .home-why-item:nth-child(3) {
        border-left: 0;
    }
}
@media (max-width: 600px) {
    .home-signature {
        padding: 45px 20px;
        gap: 28px;
    }
    .home-signature-image {
        height: 270px;
    }
    .home-signature-content h2 {
        font-size: 32px;
    }
    .home-signature-content p {
        font-size: 12px;
    }
    .home-why {
        padding: 50px 20px;
    }
    .home-why-heading {
        margin-bottom: 35px;
    }
    .home-why-heading h2 {
        font-size: 32px;
    }
    .home-why-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .home-why-item,
    .home-why-item:nth-child(3) {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,0.14);
        padding: 25px 0;
    }
    .home-why-item:first-child {
        border-top: 0;
    }
}
/* LOGIN - desktop */
.mobile-login {
    display: none !important;
}
.header-actions .login-button {
    display: flex !important;
}
/* MOBILE ONLY */
@media (max-width: 900px) {
    /* Logo on the left */
    .header-inner {
        display: flex;
        align-items: center;
    }
    .logo {
        margin-right: auto !important;
        text-align: left !important;
    }
    /* Desktop LOGIN hidden only on mobile */
    .header-actions .login-button {
        display: none !important;
    }
    /* Hamburger on right */
    .mobile-button {
        display: flex !important;
        margin-left: 8px !important;
    }
    /* LOGIN inside hamburger dropdown */
    .navigation .mobile-login {
        display: none !important;
    }
    .navigation.active .mobile-login {
        display: flex !important;
        width: 100%;
        box-sizing: border-box;
        padding: 8px 14px !important;
        margin-top: 3px;
        border-top: 1px solid rgba(215, 173, 106, 0.35);
        color: #d7ad6a !important;
        font-size: 11px !important;
        letter-spacing: 1px;
    }
}
/* =====================================================
   ZIVARA MOBILE HEADER — FINAL
===================================================== */
.mobile-login {
    display: none !important;
}
/* DESKTOP */
@media (min-width: 901px) {
    .header-actions .login-button {
        display: flex !important;
    }
    .mobile-login {
        display: none !important;
    }
}
/* MOBILE */
@media (max-width: 900px) {
    /* HEADER */
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
    }
    .header-inner {
        width: 100% !important;
        height: 68px !important;
        padding: 0 12px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    /* =========================
       LOGO — LEFT
    ========================= */
    .header .logo {
        position: relative !important;
        width: 125px !important;
        min-width: 125px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        text-align: left !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
    }
    .header .logo-symbol {
        position: absolute !important;
        top: -7px !important;
        left: 32px !important;
        font-size: 17px !important;
    }
    .header .logo-name {
        font-size: 17px !important;
        letter-spacing: 2px !important;
        line-height: 1 !important;
    }
    .header .logo-jewels {
        margin-top: 5px !important;
        margin-left: 38px !important;
        font-size: 6px !important;
        letter-spacing: 1.5px !important;
    }
    /* =========================
       DESKTOP NAV HIDDEN
    ========================= */
    .navigation {
        display: none !important;
    }
    /* =========================
       HEADER ACTIONS
    ========================= */
    .header-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 3px !important;
        margin-left: auto !important;
    }
    .header-actions .icon-button,
    .header-actions .bag-button,
    .header-actions .theme-button,
    .header-actions .rtl-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        background: transparent !important;
        padding: 3px !important;
    }
    .header-actions .icon-button,
    .header-actions .bag-button,
    .header-actions .theme-button {
        font-size: 15px !important;
    }
    .header-actions .rtl-button {
        font-size: 7px !important;
        padding: 4px 5px !important;
    }
    /* DESKTOP LOGIN HIDDEN ON MOBILE */
    .header-actions .login-button {
        display: none !important;
    }
    /* =========================
       HAMBURGER
    ========================= */
    .mobile-button {
        display: flex !important;
        width: 30px !important;
        height: 30px !important;
        margin-left: 5px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        align-items: center !important;
        justify-content: center !important;
        color: #fff !important;
        font-size: 20px !important;
        position: relative !important;
        z-index: 100001 !important;
    }
    /* =========================
       SMALL HAMBURGER MENU
    ========================= */
    .navigation.active {
        display: flex !important;
        position: fixed !important;
        top: 68px !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
        width: 175px !important;
        max-width: 175px !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        background: #21150f !important;
        box-shadow: 0 15px 35px rgba(0,0,0,.35) !important;
        z-index: 100000 !important;
        overflow: visible !important;
    }
    /* =========================
       MAIN MENU ITEMS
    ========================= */
    .navigation.active > a,
    .navigation.active > .nav-item > a {
        width: 100% !important;
        height: 43px !important;
        min-height: 43px !important;
        padding: 0 14px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        color: #fff !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        letter-spacing: 1.4px !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }
    /* =========================
       SUB MENUS
    ========================= */
    .navigation.active .dropdown-menu {
        position: static !important;
        display: none !important;
        width: 100% !important;
        min-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #170f0b !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
    }
    .navigation.active .dropdown.active .dropdown-menu {
        display: block !important;
    }
    .navigation.active .dropdown-menu a {
        width: 100% !important;
        height: 32px !important;
        padding: 0 14px 0 24px !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        color: #fff !important;
        font-size: 9px !important;
        letter-spacing: 1px !important;
        border-bottom: 1px solid rgba(255,255,255,.05) !important;
    }
    /* =========================
       MOBILE LOGIN
    ========================= */
    .navigation .mobile-login {
        display: none !important;
    }
    .navigation.active .mobile-login {
        display: flex !important;
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: flex-start !important;
        color: #d7ad6a !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        letter-spacing: 1.4px !important;
        border-top: 1px solid rgba(215,173,106,.35) !important;
    }
}
/* SMALL PHONES */
@media (max-width: 420px) {
    .header .logo {
        width: 115px !important;
        min-width: 115px !important;
    }
    .header .logo-name {
        font-size: 16px !important;
    }
    .header-actions {
        gap: 1px !important;
    }
    .mobile-button {
        margin-left: 3px !important;
    }
}
/* =========================================================
   FINAL MOBILE HEADER SPACING FIX
========================================================= */
@media (max-width: 900px) {
    /* =========================
       LOGO
    ========================= */
    .header .logo {
        width: 110px !important;
        min-width: 110px !important;
        height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        position: relative !important;
        transform: none !important;
    }
    /* Diamond ABOVE ZIVARA - NOT OVER IT */
    .header .logo-symbol {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 2px 0 !important;
        padding: 0 !important;
        text-align: center !important;
        font-size: 15px !important;
        line-height: 12px !important;
        transform: none !important;
    }
    .header .logo-name {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 16px !important;
        line-height: 18px !important;
        letter-spacing: 2px !important;
    }
    .header .logo-jewels {
        display: block !important;
        width: 100% !important;
        margin: 2px 0 0 0 !important;
        padding: 0 !important;
        text-align: center !important;
        font-size: 5px !important;
        line-height: 8px !important;
        letter-spacing: 1.5px !important;
    }
    /* =========================
       HEADER
    ========================= */
    .header-inner {
        height: 68px !important;
        min-height: 68px !important;
        padding: 0 12px !important;
        display: flex !important;
        align-items: center !important;
    }
    /* =========================
       ICONS
    ========================= */
    .header-actions {
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
    }
    .header-actions .icon-button,
    .header-actions .bag-button,
    .header-actions .theme-button,
    .header-actions .rtl-button {
        padding: 2px !important;
    }
    /* Desktop LOGIN hidden on mobile */
    .header-actions .login-button {
        display: none !important;
    }
    /* =========================
       HAMBURGER BUTTON
    ========================= */
    .mobile-button {
        width: 28px !important;
        height: 28px !important;
        margin-left: 3px !important;
        padding: 0 !important;
        font-size: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* =========================
       SMALL HAMBURGER MENU
    ========================= */
    .navigation.active {
        position: fixed !important;
        top: 68px !important;
        right: 8px !important;
        left: auto !important;
        bottom: auto !important;
        width: 165px !important;
        max-width: 165px !important;
        height: auto !important;
        padding: 2px 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        background: #21150f !important;
        z-index: 100000 !important;
        overflow: visible !important;
    }
    /* =========================
       MAIN MENU - REDUCED SPACE
    ========================= */
    .navigation.active > a,
    .navigation.active > .nav-item > a {
        width: 100% !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 13px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-size: 10px !important;
        line-height: 1 !important;
        letter-spacing: 1.3px !important;
        color: #fff !important;
        border-bottom: 1px solid rgba(255,255,255,.07) !important;
    }
    /* =========================
       SUBMENU - ALSO COMPACT
    ========================= */
    .navigation.active .dropdown-menu {
        position: static !important;
        width: 100% !important;
        min-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: none !important;
        background: #170f0b !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
    }
    .navigation.active .dropdown.active .dropdown-menu {
        display: block !important;
    }
    .navigation.active .dropdown-menu a {
        width: 100% !important;
        height: 24px !important;
        min-height: 24px !important;
        padding: 0 13px 0 22px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        font-size: 9px !important;
        line-height: 1 !important;
        color: #fff !important;
        border-bottom: 1px solid rgba(255,255,255,.04) !important;
    }
    /* =========================
       LOGIN
    ========================= */
.navigation.active .mobile-login {
    display:flex !important;
    width:calc(100% - 16px) !important;
    height:20px !important;
    min-height:30px !important;
    margin:5px 8px 4px !important;
    padding:0 13px !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:2 !important;
    transform:translateY(-2px) !important;
    box-sizing:border-box !important;
    background:#d7ad6a !important;
    color:#21150f !important;
    font-size:9px !important;
    font-weight:700 !important;
    letter-spacing:1.5px !important;
}
}
/* =========================================================
   VERY SMALL PHONES
========================================================= */
@media (max-width: 420px) {
    .header .logo {
        width: 100px !important;
        min-width: 100px !important;
    }
    .header .logo-name {
        font-size: 15px !important;
    }
    .header .logo-symbol {
        font-size: 14px !important;
    }
    .navigation.active {
        width: 160px !important;
        max-width: 160px !important;
    }
}/* =========================================================
   INDEX HOME 1 - HERO
   ========================================================= */
.hero {
    position: relative;
    min-height: 680px;
    height: 82vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #21150f;
}
/* Hero image */
.hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/newhero1.png");
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    animation: heroImageReveal 1.8s ease forwards,
               heroImageMove 8s ease-in-out 1.8s infinite alternate;
}
/* Dark luxury overlay */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(20, 12, 8, 0.82) 0%,
            rgba(20, 12, 8, 0.52) 42%,
            rgba(20, 12, 8, 0.15) 75%,
            rgba(20, 12, 8, 0.30) 100%
        );
    z-index: 1;
}
/* Hero content */
.hero-content {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 55px;
}
/* Small heading */
.hero-label {
    display: block;
    margin-bottom: 18px;
    color: #d7ad6a;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 4px;
    opacity: 0;
    animation: heroTextUp 0.9s ease 0.4s forwards;
}
/* Main heading */
.hero-content h1 {
    margin: 0;
    max-width: 650px;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(55px, 7vw, 100px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 3px;
    opacity: 0;
    animation: heroTitleReveal 1.1s ease 0.65s forwards;
}
/* Description */
.hero-content p {
    max-width: 520px;
    margin: 28px 0 32px;
    color: rgba(255,255,255,0.86);
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.3px;
    opacity: 0;
    animation: heroTextUp 0.9s ease 1s forwards;
}
/* Button */
.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 175px;
    padding: 14px 24px;
    border: 1px solid #d7ad6a;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    transition: all 0.35s ease;
    opacity: 0;
    animation: heroTextUp 0.9s ease 1.25s forwards;
}
.hero-button:hover {
    background: #d7ad6a;
    color: #21150f;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}
/* =========================================================
   HERO ANIMATIONS
   ========================================================= */
@keyframes heroImageReveal {
    from {
        opacity: 0;
        transform: scale(1.14);
    }
    to {
        opacity: 1;
        transform: scale(1.06);
    }
}
@keyframes heroImageMove {
    from {
        transform: scale(1.06) translateX(0);
    }
    to {
        transform: scale(1.10) translateX(-12px);
    }
}
@keyframes heroTitleReveal {
    from {
        opacity: 0;
        transform: translateY(45px);
        clip-path: inset(100% 0 0 0);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }
}
@keyframes heroTextUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* =========================================================
   MOBILE HERO
   ========================================================= */
@media (max-width: 900px) {
    .hero {
        min-height: 570px;
        height: 72vh;
    }
    .hero-image {
        background-position: 62% center;
    }
    .hero::after {
        background:
            linear-gradient(
                90deg,
                rgba(20, 12, 8, 0.78),
                rgba(20, 12, 8, 0.38)
            );
    }
    .hero-content {
        width: 88%;
        padding-top: 45px;
    }
    .hero-label {
        font-size: 9px;
        letter-spacing: 2.5px;
        margin-bottom: 14px;
    }
    .hero-content h1 {
        font-size: clamp(42px, 12vw, 65px);
        letter-spacing: 2px;
    }
    .hero-content p {
        max-width: 340px;
        margin: 20px 0 25px;
        font-size: 12px;
        line-height: 1.7;
    }
    .hero-button {
        min-width: 150px;
        padding: 12px 18px;
        font-size: 9px;
    }
}
@media (max-width: 480px) {
    .hero {
        min-height: 530px;
    }
    .hero-image {
        background-position: 65% center;
    }
    .hero-content {
        padding-top: 35px;
    }
    .hero-content h1 {
        font-size: 42px;
    }
}
/* =====================================================
   WATCH COLLECTION - NEW DESIGN
===================================================== */
.watches-section {
    position: relative;
    padding: 70px 6%;
    background: #f7f3ed;
    overflow: hidden;
}
/* HEADING */
.watches-heading {
    max-width: 700px;
    margin: 0 auto 45px;
    text-align: center;
}
.watches-heading span {
    display: block;
    margin-bottom: 12px;
    color: #b08b54;
    font-size: 10px;
    letter-spacing: 3px;
}
.watches-heading h2 {
    margin: 0 0 15px;
    color: #21150f;
    font-family: Georgia, serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 400;
    line-height: 1.05;
}
.watches-heading p {
    max-width: 560px;
    margin: auto;
    color: #756a61;
    font-size: 13px;
    line-height: 1.8;
}
/* WATCH GRID */
.watches-grid {
    max-width: 1150px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    align-items: start;
}
/* WATCH ITEM */
.watch-item {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transform: translateY(45px);
    opacity: 0;
    animation: watchReveal 1s cubic-bezier(.16,1,.3,1) forwards;
}
.watch-item:nth-child(1) {
    animation-delay: .15s;
}
.watch-item:nth-child(2) {
    animation-delay: .30s;
}
.watch-item:nth-child(3) {
    animation-delay: .45s;
}
/* IMAGE */
.watch-image {
    position: relative;
    width: 100%;
    height: 360px;
    overflow: hidden;
    background: #ebe4db;
}
.watch-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 60%,
        rgba(20,14,10,.15)
    );
    pointer-events: none;
}
.watch-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform 1s cubic-bezier(.16,1,.3,1),
        filter .6s ease;
}
/* IMAGE HOVER */
.watch-item:hover .watch-image img {
    transform: scale(1.08);
    filter: brightness(.92);
}
/* INFO */
.watch-info {
    padding: 20px 5px 5px;
}
.watch-info span {
    display: block;
    margin-bottom: 9px;
    color: #b08b54;
    font-size: 10px;
    letter-spacing: 2px;
}
.watch-info h3 {
    margin: 0 0 9px;
    color: #21150f;
    font-family: Georgia, serif;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: .5px;
}
.watch-info p {
    margin: 0;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    transition:
        color .35s ease,
        transform .35s ease;
}
.watch-info b {
    font-weight: 400;
    transition: transform .35s ease;
}
.watch-item:hover .watch-info p {
    color: #b08b54;
    transform: translateX(6px);
}
/* GOLD LINE ANIMATION */
.watch-item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: #b08b54;
    transition: width .6s cubic-bezier(.16,1,.3,1);
}
.watch-item:hover::after {
    width: 100%;
}
/* SCROLL / ENTRY ANIMATION */
@keyframes watchReveal {
    0% {
        opacity: 0;
        transform: translateY(45px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* =====================================================
   WATCH COLLECTION RESPONSIVE
===================================================== */
@media (max-width: 900px) {
    .watches-section {
        padding: 60px 6%;
    }
    .watches-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    .watch-image {
        height: 320px;
    }
}
@media (max-width: 600px) {
    .watches-section {
        padding: 50px 20px;
    }
    .watches-heading {
        margin-bottom: 30px;
    }
    .watches-heading h2 {
        font-size: 36px;
    }
    .watches-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .watch-image {
        height: 330px;
    }
    .watch-info {
        padding-top: 15px;
    }
}
/* =====================================================
   DARK MODE
===================================================== */
body.dark-mode .watches-section {
    background: #17110d;
}
body.dark-mode .watches-heading h2,
body.dark-mode .watch-info h3 {
    color: #f5f1ea;
}
body.dark-mode .watches-heading p,
body.dark-mode .watch-info p {
    color: #c5b9ae;
}
body.dark-mode .watch-image {
    background: #211812;
}
/* =========================================================
   ZIVARA JEWELS — PREMIUM WATCH PAGE
   HEADER & FOOTER ARE NOT TOUCHED
   ========================================================= */
/* PREMIUM WATCH PAGE COLORS */
:root {
    --watch-ivory: #f6f1e8;
    --watch-cream: #eee5d7;
    --watch-soft: #e4d7c4;
    --watch-gold: #b79a68;
    --watch-gold-light: #d5bd8d;
    --watch-espresso: #29221d;
    --watch-brown: #66584b;
    --watch-dark: #211c18;
}
/* =========================================================
   01 — HERO
   ========================================================= */
.watch-hero {
    position: relative;
    width: 100%;
    height: 92vh;
    min-height: 650px;
    overflow: hidden;
    color: #fff;
}
.watch-hero-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.watch-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.06);
    animation: watchHeroZoom 7s ease forwards;
}
@keyframes watchHeroZoom {
    from {
        transform: scale(1.12);
    }
    to {
        transform: scale(1);
    }
}
.watch-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(25, 20, 16, .78) 0%,
            rgba(35, 27, 20, .48) 42%,
            rgba(35, 27, 20, .14) 100%
        );
}
.watch-hero-glow {
    position: absolute;
    width: 480px;
    height: 480px;
    right: 5%;
    top: 20%;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(213, 189, 141, .20),
            transparent 68%
        );
    animation: watchGlow 8s ease-in-out infinite alternate;
}
@keyframes watchGlow {
    from {
        transform: translate(30px, 0) scale(.9);
    }
    to {
        transform: translate(-60px, 25px) scale(1.1);
    }
}
.watch-hero-content {
    position: absolute;
    left: 8%;
    top: 50%;
    width: 570px;
    max-width: 82%;
    transform: translateY(-50%);
    z-index: 3;
    opacity: 0;
    animation: watchHeroContent 1.2s .3s ease forwards;
}
@keyframes watchHeroContent {
    from {
        opacity: 0;
        transform: translate(-60px, -50%);
    }
    to {
        opacity: 1;
        transform: translate(0, -50%);
    }
}
.watch-eyebrow {
    display: block;
    margin-bottom: 22px;
    color: var(--watch-gold-light);
    font-size: 9px;
    letter-spacing: 4px;
}
.watch-hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(58px, 7vw, 105px);
    line-height: .88;
    font-weight: 400;
    letter-spacing: -3px;
}
.watch-hero h1 em {
    display: block;
    margin-left: 55px;
    color: var(--watch-gold-light);
    font-style: italic;
    opacity: 0;
    animation: watchTitle 1s .8s ease forwards;
}
@keyframes watchTitle {
    from {
        opacity: 0;
        transform: translateX(70px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.watch-hero-content p {
    width: 430px;
    max-width: 100%;
    margin-top: 28px;
    color: rgba(255,255,255,.82);
    font-size: 13px;
    line-height: 1.8;
    opacity: 0;
    animation: watchText 1s 1.2s ease forwards;
}
.watch-button {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-top: 28px;
    padding-bottom: 8px;
    color: #fff;
    font-size: 9px;
    letter-spacing: 2px;
    border-bottom: 1px solid var(--watch-gold-light);
    opacity: 0;
    animation: watchText 1s 1.5s ease forwards;
    transition: color .3s ease;
}
@keyframes watchText {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.watch-button:hover {
    color: var(--watch-gold-light);
}
.watch-button span {
    transition: transform .35s ease;
}
.watch-button:hover span {
    transform: translate(5px, -4px);
}
.watch-hero-line {
    position: absolute;
    right: 8%;
    bottom: 90px;
    width: 110px;
    height: 1px;
    background: rgba(255,255,255,.5);
    transform-origin: right;
    animation: watchLine 1.3s 1.5s ease forwards;
}
@keyframes watchLine {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}
.watch-scroll {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.75);
    font-size: 7px;
    letter-spacing: 3px;
}
.watch-scroll i {
    width: 1px;
    height: 36px;
    background: var(--watch-gold-light);
    animation: watchScroll 1.6s infinite;
}
@keyframes watchScroll {
    0% {
        transform: scaleY(0);
        transform-origin: top;
    }
    50% {
        transform: scaleY(1);
        transform-origin: top;
    }
    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}
/* =========================================================
   02 — INTRO
   ========================================================= */
.watch-intro {
    width: 86%;
    max-width: 1280px;
    min-height: 540px;
    margin: auto;
    padding: 90px 0;
    display: grid;
    grid-template-columns: 50px 1fr .85fr;
    gap: 55px;
    align-items: center;
    background: var(--watch-ivory);
}
.watch-intro-number {
    align-self: start;
    padding-top: 8px;
    color: var(--watch-gold);
    font-size: 10px;
    letter-spacing: 2px;
}
.watch-intro-content {
    opacity: 0;
    transform: translateX(-60px);
    transition:
        opacity 1s ease,
        transform 1s ease;
}
.watch-intro-content.watch-visible {
    opacity: 1;
    transform: translateX(0);
}
.watch-intro-content h2 {
    font-family: Georgia, serif;
    font-size: clamp(42px, 5vw, 65px);
    line-height: .95;
    font-weight: 400;
    color: var(--watch-espresso);
}
.watch-intro-content h2 span {
    display: block;
    margin-left: 65px;
    color: var(--watch-gold);
    font-style: italic;
}
.watch-intro-content p {
    max-width: 470px;
    margin: 28px 0;
    color: var(--watch-brown);
    font-size: 13px;
    line-height: 1.9;
}
.watch-intro-image {
    position: relative;
    height: 460px;
    opacity: 0;
    transform: translateY(65px);
    transition:
        opacity 1.1s .15s ease,
        transform 1.1s .15s ease;
}
.watch-intro-image.watch-visible {
    opacity: 1;
    transform: translateY(0);
}
.watch-intro-image::before {
    content: "";
    position: absolute;
    left: -15px;
    bottom: -15px;
    width: 72%;
    height: 72%;
    border-left: 1px solid var(--watch-gold);
    border-bottom: 1px solid var(--watch-gold);
}
.watch-intro-image img {
    position: relative;
    z-index: 1;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}
.watch-intro-image:hover img {
    transform: scale(1.035);
}
.image-caption {
    position: absolute;
    right: -23px;
    bottom: 25px;
    writing-mode: vertical-rl;
    color: var(--watch-gold);
    font-size: 8px;
    letter-spacing: 2px;
}
/* =========================================================
   03 — COLLECTIONS
   ========================================================= */
.watch-collections {
    padding: 90px 7% 105px;
    background:
        linear-gradient(
            135deg,
            #eee6da,
            #e8dfd1
        );
}
.watch-section-heading {
    width: 90%;
    max-width: 1250px;
    margin: 0 auto 60px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 50px;
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 1s ease,
        transform 1s ease;
}
.watch-section-heading.watch-visible {
    opacity: 1;
    transform: translateY(0);
}
.watch-section-heading h2 {
    font-family: Georgia, serif;
    font-size: clamp(45px, 5vw, 68px);
    line-height: .9;
    font-weight: 400;
    color: var(--watch-espresso);
}
.watch-section-heading h2 em {
    display: block;
    margin-left: 70px;
    color: var(--watch-gold);
    font-style: italic;
}
.watch-section-heading > p {
    max-width: 350px;
    color: var(--watch-brown);
    font-size: 12px;
    line-height: 1.9;
}
.watch-collection-grid {
    width: 90%;
    max-width: 1250px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    column-gap: 60px;
    row-gap: 70px;
}
.watch-collection-item {
    opacity: 0;
    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.2,.7,.2,1);
}
.watch-item-large {
    transform: translateX(-75px);
    grid-row: span 2;
}
.watch-item-small:nth-child(2) {
    transform: translateX(75px);
}
.watch-item-small:nth-child(3) {
    transform: translateY(65px);
}
.watch-collection-item.watch-visible {
    opacity: 1;
    transform: translate(0);
}
.watch-image-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #d9d0c2;
}
.watch-item-large .watch-image-wrap {
    height: 570px;
}
.watch-item-small .watch-image-wrap {
    height: 315px;
}
.watch-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.watch-collection-item:hover img {
    transform: scale(1.055);
}
.watch-image-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 65%;
    height: 100%;
    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255,255,255,.24),
            transparent
        );
    transform: skewX(-20deg);
    transition: left 1s ease;
}
.watch-collection-item:hover .watch-image-wrap::after {
    left: 140%;
}
.watch-image-number {
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 2;
    color: #fff;
    font-family: Georgia, serif;
    font-size: 12px;
}
.watch-item-info {
    padding-top: 18px;
}
.watch-item-info > span {
    color: var(--watch-gold);
    font-size: 8px;
    letter-spacing: 2px;
}
.watch-item-info h3 {
    margin: 7px 0;
    font-family: Georgia, serif;
    color: var(--watch-espresso);
    font-size: 24px;
    font-weight: 400;
}
.watch-item-info p {
    color: var(--watch-brown);
    font-size: 11px;
}
/* =========================================================
   04 — FEATURED WATCH
   ========================================================= */
.watch-featured {
    display: grid;
    grid-template-columns: 1fr .9fr;
    min-height: 650px;
    background: var(--watch-ivory);
}
.featured-image {
    overflow: hidden;
    opacity: 0;
    transform: translateX(-70px);
    transition:
        opacity 1.1s ease,
        transform 1.1s ease;
}
.featured-image.watch-visible {
    opacity: 1;
    transform: translateX(0);
}
.featured-image img {
    width: 100%;
    height: 650px;
    object-fit: cover;
    transition: transform 1.5s ease;
}
.featured-image:hover img {
    transform: scale(1.045);
}
.featured-content {
    align-self: center;
    padding: 80px 10%;
    opacity: 0;
    transform: translateX(70px);
    transition:
        opacity 1.1s .15s ease,
        transform 1.1s .15s ease;
}
.featured-content.watch-visible {
    opacity: 1;
    transform: translateX(0);
}
.featured-line {
    width: 70px;
    height: 1px;
    margin-bottom: 25px;
    background: var(--watch-gold);
}
.featured-content h2 {
    font-family: Georgia, serif;
    color: var(--watch-espresso);
    font-size: clamp(45px, 5vw, 68px);
    font-weight: 400;
    line-height: .93;
}
.featured-content h2 em {
    display: block;
    margin-left: 38px;
    color: var(--watch-gold);
    font-style: italic;
}
.featured-content > p {
    max-width: 420px;
    margin: 28px 0;
    color: var(--watch-brown);
    font-size: 13px;
    line-height: 1.9;
}
.featured-details {
    display: flex;
    gap: 38px;
    margin-bottom: 32px;
}
.featured-details div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.featured-details span {
    color: var(--watch-gold);
    font-size: 8px;
    letter-spacing: 2px;
}
.featured-details strong {
    font-family: Georgia, serif;
    color: var(--watch-espresso);
    font-size: 13px;
    font-weight: 400;
}
/* =========================================================
   05 — CRAFTSMANSHIP
   ========================================================= */
.watch-craft {
    width: 86%;
    max-width: 1300px;
    min-height: 610px;
    margin: auto;
    padding: 95px 0;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 75px;
    align-items: center;
    background: var(--watch-ivory);
}
.craft-content {
    opacity: 0;
    transform: translateY(60px);
    transition:
        opacity 1s ease,
        transform 1s ease;
}
.craft-content.watch-visible {
    opacity: 1;
    transform: translateY(0);
}
.craft-content h2 {
    font-family: Georgia, serif;
    color: var(--watch-espresso);
    font-size: clamp(43px, 4.5vw, 64px);
    line-height: .94;
    font-weight: 400;
}
.craft-content h2 em {
    display: block;
    margin-left: 38px;
    color: var(--watch-gold);
    font-style: italic;
}
.craft-content > p {
    max-width: 430px;
    margin: 25px 0 35px;
    color: var(--watch-brown);
    font-size: 13px;
    line-height: 1.9;
}
.craft-points {
    border-top: 1px solid #d3c6b6;
}
.craft-points div {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 50px;
    border-bottom: 1px solid #d3c6b6;
}
.craft-points span {
    color: var(--watch-gold);
    font-size: 9px;
}
.craft-points p {
    color: var(--watch-espresso);
    font-size: 11px;
}
.craft-image {
    position: relative;
    height: 545px;
    overflow: hidden;
    opacity: 0;
    transform: translateX(75px);
    transition:
        opacity 1.1s .15s ease,
        transform 1.1s .15s ease;
}
.craft-image.watch-visible {
    opacity: 1;
    transform: translateX(0);
}
.craft-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s ease;
}
.craft-image:hover img {
    transform: scale(1.045);
}
.craft-floating-text {
    position: absolute;
    right: 25px;
    bottom: 25px;
    z-index: 2;
    color: #fff;
    text-align: right;
}
.craft-floating-text span {
    display: block;
    font-size: 8px;
    letter-spacing: 3px;
}
.craft-floating-text strong {
    display: block;
    margin-top: 4px;
    font-family: Georgia, serif;
    font-size: 27px;
    font-weight: 400;
    color: var(--watch-gold-light);
}
/* =========================================================
   06 — WATCH SERVICES
   ========================================================= */
.watch-services {
    padding: 95px 8%;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 80px;
    background:
        linear-gradient(
            135deg,
            #29211b,
            #211b17
        );
    color: #f5efe6;
}
.services-heading {
    opacity: 0;
    transform: translateX(-60px);
    transition:
        opacity 1s ease,
        transform 1s ease;
}
.services-heading.watch-visible {
    opacity: 1;
    transform: translateX(0);
}
.services-heading .section-label {
    color: var(--watch-gold-light);
}
.services-heading h2 {
    font-family: Georgia, serif;
    font-size: clamp(45px, 5vw, 68px);
    font-weight: 400;
    line-height: .94;
}
.services-heading h2 em {
    display: block;
    margin-left: 48px;
    color: var(--watch-gold-light);
    font-style: italic;
}
.services-heading p {
    max-width: 350px;
    margin-top: 25px;
    color: #aaa097;
    font-size: 12px;
    line-height: 1.8;
}
.services-list {
    border-top: 1px solid rgba(213,189,141,.25);
}
.services-list a {
    min-height: 110px;
    display: grid;
    grid-template-columns: 45px 1fr 35px;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid rgba(213,189,141,.25);
    opacity: 0;
    transform: translateX(60px);
    transition:
        opacity .8s ease,
        transform .8s ease,
        padding .35s ease;
}
.services-list a.watch-visible {
    opacity: 1;
    transform: translateX(0);
}
.services-list a:nth-child(2) {
    transition-delay: .15s;
}
.services-list a:nth-child(3) {
    transition-delay: .3s;
}
.services-list a:hover {
    padding-left: 12px;
}
.service-number {
    color: var(--watch-gold-light);
    font-size: 9px;
}
.services-list h3 {
    font-family: Georgia, serif;
    font-size: 21px;
    font-weight: 400;
    transition: color .3s ease;
}
.services-list a:hover h3 {
    color: var(--watch-gold-light);
}
.services-list p {
    margin-top: 5px;
    color: #928980;
    font-size: 10px;
}
.service-arrow {
    font-size: 18px;
    transition: transform .35s ease;
}
.services-list a:hover .service-arrow {
    color: var(--watch-gold-light);
    transform: translate(5px, -4px);
}
/* =========================================================
   07 — VISIT SHOWROOM
   ========================================================= */
.watch-visit {
    position: relative;
    min-height: 570px;
    overflow: hidden;
    color: #fff;
}
.watch-visit-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.watch-visit-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.7s ease;
}
.watch-visit:hover .watch-visit-image img {
    transform: scale(1.04);
}
.watch-visit-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(28,22,17,.80),
            rgba(28,22,17,.43),
            rgba(28,22,17,.12)
        );
}
.watch-visit-content {
    position: relative;
    z-index: 2;
    width: 620px;
    max-width: 82%;
    padding: 130px 0 90px 9%;
    opacity: 0;
    transform: translateY(60px);
    transition:
        opacity 1.1s ease,
        transform 1.1s ease;
}
.watch-visit-content.watch-visible {
    opacity: 1;
    transform: translateY(0);
}
.watch-visit-content .section-label {
    color: var(--watch-gold-light);
}
.watch-visit-content h2 {
    font-family: Georgia, serif;
    font-size: clamp(47px, 5.5vw, 75px);
    line-height: .93;
    font-weight: 400;
}
.watch-visit-content h2 em {
    display: block;
    margin-left: 48px;
    color: var(--watch-gold-light);
    font-style: italic;
}
.watch-visit-content p {
    max-width: 430px;
    margin: 25px 0;
    color: rgba(255,255,255,.80);
    font-size: 13px;
    line-height: 1.8;
}
/* =========================================================
   DARK MODE — WATCH PAGE
   ========================================================= */
body.dark-mode .watch-intro,
body.dark-mode .watch-featured,
body.dark-mode .watch-craft {
    background: #181512;
}
body.dark-mode .watch-collections {
    background: #211b17;
}
body.dark-mode .watch-intro-content h2,
body.dark-mode .watch-section-heading h2,
body.dark-mode .watch-item-info h3,
body.dark-mode .featured-content h2,
body.dark-mode .craft-content h2,
body.dark-mode .featured-details strong,
body.dark-mode .craft-points p {
    color: #f1e9dd;
}
body.dark-mode .watch-intro-content p,
body.dark-mode .watch-section-heading > p,
body.dark-mode .watch-item-info p,
body.dark-mode .featured-content > p,
body.dark-mode .craft-content > p {
    color: #aaa097;
}
/* =========================================================
   RTL
   ========================================================= */
html[dir="rtl"] .watch-hero-content {
    left: auto;
    right: 8%;
}
html[dir="rtl"] .watch-hero h1 em,
html[dir="rtl"] .watch-intro-content h2 span,
html[dir="rtl"] .watch-section-heading h2 em,
html[dir="rtl"] .featured-content h2 em,
html[dir="rtl"] .craft-content h2 em,
html[dir="rtl"] .services-heading h2 em,
html[dir="rtl"] .watch-visit-content h2 em {
    margin-left: 0;
    margin-right: 48px;
}
/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1100px) {
    .watch-intro {
        grid-template-columns: 40px 1fr 1fr;
        gap: 35px;
    }
    .watch-collection-grid {
        column-gap: 40px;
    }
    .watch-craft {
        gap: 50px;
    }
    .watch-services {
        gap: 55px;
    }
}
/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 900px) {
    .watch-intro {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .watch-intro-number {
        display: none;
    }
    .watch-collection-grid {
        grid-template-columns: 1fr;
    }
    .watch-item-large {
        grid-row: auto;
    }
    .watch-featured {
        grid-template-columns: 1fr;
    }
    .featured-image img {
        height: 520px;
    }
    .watch-craft {
        grid-template-columns: 1fr;
    }
    .watch-services {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   SMALL MOBILE
   ========================================================= */
@media (max-width: 600px) {
    .watch-hero {
        height: 88vh;
        min-height: 590px;
    }
    .watch-hero-content {
        left: 7%;
        width: 86%;
    }
    .watch-hero h1 {
        font-size: 55px;
        letter-spacing: -2px;
    }
    .watch-hero h1 em {
        margin-left: 25px;
    }
    .watch-intro {
        display: block;
        width: 86%;
        padding: 75px 0;
    }
    .watch-intro-image {
        height: 400px;
        margin-top: 50px;
    }
    .watch-collections {
        padding: 75px 6%;
    }
    .watch-section-heading {
        display: block;
        width: 90%;
    }
    .watch-section-heading h2 {
        font-size: 47px;
    }
    .watch-section-heading h2 em {
        margin-left: 32px;
    }
    .watch-section-heading > p {
        margin-top: 22px;
    }
    .watch-collection-grid {
        width: 90%;
    }
    .watch-item-large .watch-image-wrap {
        height: 460px;
    }
    .watch-item-small .watch-image-wrap {
        height: 330px;
    }
    .featured-image img {
        height: 450px;
    }
    .featured-content {
        padding: 70px 8%;
    }
    .featured-details {
        flex-wrap: wrap;
        gap: 20px;
    }
    .watch-craft {
        width: 86%;
        padding: 75px 0;
    }
    .craft-image {
        height: 420px;
    }
    .watch-services {
        padding: 75px 7%;
    }
    .services-list a {
        grid-template-columns: 30px 1fr 25px;
        gap: 10px;
        min-height: 105px;
    }
    .services-list h3 {
        font-size: 18px;
    }
    .watch-visit {
        min-height: 530px;
    }
    .watch-visit-content {
        width: 100%;
        max-width: 100%;
        padding: 110px 7% 75px;
    }
    .watch-visit-content h2 {
        font-size: 48px;
    }
    .watch-visit-content h2 em {
        margin-left: 25px;
    }
}
/* =========================================================
   WATCH SERVICE PAGE
   PREMIUM IVORY + CHAMPAGNE GOLD + ESPRESSO
   ========================================================= */
.watch-service-page {
    background: #f6f1e8;
    color: #29221d;
}
/* =========================================================
   HERO
   ========================================================= */
.service-hero {
    position: relative;
    height: 88vh;
    min-height: 620px;
    overflow: hidden;
    color: #fff;
}
.service-hero-image {
    position: absolute;
    inset: 0;
}
.service-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: serviceHeroZoom 7s ease forwards;
}
@keyframes serviceHeroZoom {
    from {
        transform: scale(1.1);
    }
    to {
        transform: scale(1);
    }
}
.service-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(28,22,17,.82),
            rgba(28,22,17,.45),
            rgba(28,22,17,.12)
        );
}
.service-hero-content {
    position: absolute;
    left: 8%;
    top: 50%;
    width: 560px;
    max-width: 82%;
    transform: translateY(-50%);
    animation: serviceHeroIn 1.2s ease forwards;
}
@keyframes serviceHeroIn {
    from {
        opacity: 0;
        transform: translate(-60px,-50%);
    }
    to {
        opacity: 1;
        transform: translate(0,-50%);
    }
}
.service-eyebrow {
    display: block;
    margin-bottom: 24px;
    color: #d5bd8d;
    font-size: 9px;
    letter-spacing: 4px;
}
.service-hero h1 {
    font-family: Georgia, serif;
    font-size: clamp(60px, 7vw, 105px);
    font-weight: 400;
    line-height: .86;
    letter-spacing: -3px;
}
.service-hero h1 em {
    display: block;
    margin-left: 65px;
    color: #d5bd8d;
    font-style: italic;
}
.service-hero-content p {
    max-width: 420px;
    margin-top: 28px;
    color: rgba(255,255,255,.82);
    font-size: 13px;
    line-height: 1.8;
}
.service-button {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-top: 28px;
    padding-bottom: 8px;
    border-bottom: 1px solid #d5bd8d;
    color: #fff;
    font-size: 9px;
    letter-spacing: 2px;
    transition: color .3s ease;
}
.service-button:hover {
    color: #d5bd8d;
}
.service-button span {
    font-size: 16px;
    transition: transform .35s ease;
}
.service-button:hover span {
    transform: translate(5px,-4px);
}
.service-hero-mark {
    position: absolute;
    right: 7%;
    bottom: 70px;
    color: rgba(255,255,255,.55);
    font-size: 8px;
    letter-spacing: 4px;
    writing-mode: vertical-rl;
}
/* =========================================================
   INTRO
   ========================================================= */
.service-intro {
    width: 86%;
    max-width: 1250px;
    margin: auto;
    padding: 100px 0;
    display: grid;
    grid-template-columns: 60px 1fr .55fr;
    gap: 55px;
    align-items: start;
}
.service-intro-number {
    color: #b79a68;
    font-size: 10px;
    letter-spacing: 2px;
}
.service-label {
    display: block;
    margin-bottom: 20px;
    color: #b79a68;
    font-size: 9px;
    letter-spacing: 2.5px;
}
.service-intro-content h2 {
    font-family: Georgia, serif;
    max-width: 620px;
    font-size: clamp(44px, 5vw, 68px);
    font-weight: 400;
    line-height: .94;
}
.service-intro-content h2 em {
    display: block;
    margin-left: 65px;
    color: #b79a68;
    font-style: italic;
}
.service-intro-content p {
    max-width: 500px;
    margin-top: 25px;
    color: #66584b;
    font-size: 13px;
    line-height: 1.9;
}
.service-intro-side {
    display: grid;
    grid-template-columns: 35px 1fr;
    align-items: center;
    border-top: 1px solid #d3c6b6;
}
.service-intro-side span,
.service-intro-side strong {
    padding: 17px 0;
    border-bottom: 1px solid #d3c6b6;
}
.service-intro-side span {
    color: #b79a68;
    font-size: 9px;
}
.service-intro-side strong {
    font-family: Georgia, serif;
    font-size: 14px;
    font-weight: 400;
}
/* =========================================================
   SERVICES
   ========================================================= */
.watch-service-list {
    padding: 100px 8%;
    background: #e9dfd1;
}
.service-section-heading {
    max-width: 1250px;
    margin: auto auto 55px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 50px;
}
.service-section-heading h2 {
    font-family: Georgia, serif;
    font-size: clamp(45px,5vw,68px);
    font-weight: 400;
    line-height: .9;
}
.service-section-heading h2 em {
    display: block;
    margin-left: 65px;
    color: #b79a68;
    font-style: italic;
}
.service-section-heading > p {
    max-width: 360px;
    color: #66584b;
    font-size: 12px;
    line-height: 1.9;
}
.service-items {
    max-width: 1250px;
    margin: auto;
    border-top: 1px solid #cfc1ae;
}
.service-item {
    min-height: 145px;
    display: grid;
    grid-template-columns: 45px 65px 1fr 40px;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid #cfc1ae;
    transition:
        padding .4s ease,
        background .4s ease;
}
.service-item:hover {
    padding-left: 15px;
    background: rgba(255,255,255,.25);
}
.service-item-number {
    color: #b79a68;
    font-size: 9px;
}
.service-item-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid #b79a68;
    border-radius: 50%;
    color: #b79a68;
    font-size: 20px;
}
.service-item-content h3 {
    font-family: Georgia, serif;
    font-size: 23px;
    font-weight: 400;
}
.service-item-content p {
    max-width: 580px;
    margin-top: 7px;
    color: #66584b;
    font-size: 11px;
    line-height: 1.7;
}
.service-item-arrow {
    font-size: 18px;
    transition: transform .35s ease;
}
.service-item:hover .service-item-arrow {
    color: #b79a68;
    transform: translate(5px,-4px);
}
/* =========================================================
   PRECISION
   ========================================================= */
.service-precision {
    min-height: 650px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #f6f1e8;
}
.precision-image {
    position: relative;
    overflow: hidden;
}
.precision-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s ease;
}
.precision-image:hover img {
    transform: scale(1.045);
}
.precision-image-caption {
    position: absolute;
    left: 30px;
    bottom: 30px;
    color: #fff;
    font-size: 8px;
    letter-spacing: 3px;
}
.precision-content {
    align-self: center;
    padding: 80px 12%;
}
.precision-content h2 {
    font-family: Georgia, serif;
    font-size: clamp(46px,5vw,68px);
    font-weight: 400;
    line-height: .92;
}
.precision-content h2 em {
    display: block;
    margin-left: 50px;
    color: #b79a68;
    font-style: italic;
}
.precision-content > p {
    max-width: 430px;
    margin: 28px 0 35px;
    color: #66584b;
    font-size: 13px;
    line-height: 1.9;
}
.precision-points {
    max-width: 430px;
    border-top: 1px solid #d3c6b6;
}
.precision-points div {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 52px;
    border-bottom: 1px solid #d3c6b6;
}
.precision-points span {
    color: #b79a68;
    font-size: 9px;
}
.precision-points p {
    font-size: 11px;
}
/* =========================================================
   PROCESS
   ========================================================= */
.service-process {
    padding: 100px 8%;
    background: #211c18;
    color: #f5efe6;
}
.process-heading {
    max-width: 1250px;
    margin: auto auto 65px;
}
.process-heading .service-label {
    color: #d5bd8d;
}
.process-heading h2 {
    font-family: Georgia, serif;
    font-size: clamp(45px,5vw,68px);
    font-weight: 400;
    line-height: .92;
}
.process-heading h2 em {
    display: block;
    margin-left: 65px;
    color: #d5bd8d;
    font-style: italic;
}
.process-timeline {
    max-width: 1250px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid rgba(213,189,141,.3);
}
.process-step {
    min-height: 240px;
    padding: 30px 28px 20px 0;
    border-right: 1px solid rgba(213,189,141,.3);
}
.process-step:not(:first-child) {
    padding-left: 28px;
}
.process-step:last-child {
    border-right: 0;
}
.process-step > span {
    color: #d5bd8d;
    font-size: 9px;
}
.process-step h3 {
    margin-top: 55px;
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: 400;
}
.process-step p {
    max-width: 190px;
    margin-top: 10px;
    color: #999087;
    font-size: 10px;
    line-height: 1.8;
}
/* =========================================================
   CTA
   ========================================================= */
.service-cta {
    position: relative;
    min-height: 570px;
    overflow: hidden;
    color: #fff;
}
.service-cta-image {
    position: absolute;
    inset: 0;
}
.service-cta-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.6s ease;
}
.service-cta:hover .service-cta-image img {
    transform: scale(1.04);
}
.service-cta-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(28,22,17,.82),
            rgba(28,22,17,.40),
            rgba(28,22,17,.12)
        );
}
.service-cta-content {
    position: relative;
    z-index: 2;
    width: 620px;
    max-width: 82%;
    padding: 135px 0 90px 9%;
}
.service-cta-content .service-label {
    color: #d5bd8d;
}
.service-cta-content h2 {
    font-family: Georgia, serif;
    font-size: clamp(45px,5.5vw,75px);
    font-weight: 400;
    line-height: .92;
}
.service-cta-content h2 em {
    display: block;
    margin-left: 45px;
    color: #d5bd8d;
    font-style: italic;
}
.service-cta-content p {
    max-width: 430px;
    margin-top: 25px;
    color: rgba(255,255,255,.8);
    font-size: 13px;
    line-height: 1.8;
}
/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 900px) {
    .service-intro {
        grid-template-columns: 1fr;
    }
    .service-intro-number {
        display: none;
    }
    .service-intro-side {
        max-width: 450px;
    }
    .service-section-heading {
        display: block;
    }
    .service-section-heading > p {
        margin-top: 25px;
    }
    .service-item {
        grid-template-columns: 35px 50px 1fr 25px;
        gap: 12px;
    }
    .service-item-content h3 {
        font-size: 19px;
    }
    .service-precision {
        grid-template-columns: 1fr;
    }
    .precision-image {
        height: 500px;
    }
    .process-timeline {
        grid-template-columns: 1fr 1fr;
    }
    .process-step:nth-child(2) {
        border-right: 0;
    }
    .process-step:nth-child(3),
    .process-step:nth-child(4) {
        border-top: 1px solid rgba(213,189,141,.3);
    }
}
@media (max-width: 600px) {
    .service-hero {
        height: 86vh;
        min-height: 570px;
    }
    .service-hero-content {
        left: 7%;
        width: 86%;
    }
    .service-hero h1 {
        font-size: 55px;
    }
    .service-hero h1 em {
        margin-left: 30px;
    }
    .service-intro {
        width: 86%;
        padding: 75px 0;
    }
    .watch-service-list {
        padding: 75px 7%;
    }
    .service-item {
        grid-template-columns: 28px 42px 1fr;
        min-height: 135px;
    }
    .service-item-arrow {
        display: none;
    }
    .service-item-icon {
        width: 38px;
        height: 38px;
    }
    .service-item-content h3 {
        font-size: 17px;
    }
    .service-item-content p {
        font-size: 10px;
    }
    .precision-content {
        padding: 70px 8%;
    }
    .precision-image {
        height: 430px;
    }
    .service-process {
        padding: 75px 7%;
    }
    .process-timeline {
        grid-template-columns: 1fr;
    }
    .process-step,
    .process-step:not(:first-child) {
        padding: 25px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(213,189,141,.3);
    }
    .process-step h3 {
        margin-top: 30px;
    }
    .service-cta {
        min-height: 520px;
    }
    .service-cta-content {
        width: 100%;
        max-width: 100%;
        padding: 110px 7% 75px;
    }
    .service-cta-content h2 {
        font-size: 47px;
    }
    .service-cta-content h2 em {
        margin-left: 25px;
    }
}
/* =========================================================
   DARK MODE
   ========================================================= */
body.dark-mode .watch-service-page {
    background: #181512;
}
body.dark-mode .service-intro,
body.dark-mode .service-precision {
    background: #181512;
}
body.dark-mode .watch-service-list {
    background: #211b17;
}
body.dark-mode .service-intro-content h2,
body.dark-mode .service-section-heading h2,
body.dark-mode .precision-content h2 {
    color: #f1e9dd;
}
body.dark-mode .service-intro-content p,
body.dark-mode .service-section-heading > p,
body.dark-mode .precision-content > p {
    color: #aaa097;
}
body.dark-mode .service-item-content p {
    color: #aaa097;
}
/* =========================================================
   ZIVARA WATCH SERVICE PAGE
   ========================================================= */
:root {
    --ws-bg: #f1ede5;
    --ws-cream: #e4dccd;
    --ws-dark: #211f1c;
    --ws-black: #171614;
    --ws-gold: #ad8b55;
    --ws-bronze: #8b7048;
    --ws-text: #3b3731;
}
/* HERO */
.ws-hero {
    min-height: 680px;
    position: relative;
    overflow: hidden;
    background: var(--ws-black);
    display: flex;
    align-items: center;
}
.ws-hero-image {
    position: absolute;
    inset: 0;
}
.ws-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: wsHeroZoom 10s ease-in-out infinite alternate;
}
.ws-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(20,18,16,.88), rgba(20,18,16,.35), rgba(20,18,16,.08));
}
.ws-hero-content {
    position: relative;
    z-index: 2;
    width: min(1200px, 90%);
    margin: auto;
    color: #fff;
}
.ws-hero-content span,
.ws-section-title span,
.ws-intro-text > span,
.ws-movement-content > span,
.ws-process-heading span,
.ws-craft-content span,
.ws-care-content > span,
.ws-final-content span {
    display: block;
    color: var(--ws-gold);
    letter-spacing: 3px;
    font-size: 11px;
    margin-bottom: 22px;
}
.ws-hero-content h1 {
    font-family: Georgia, serif;
    font-size: clamp(48px, 6vw, 88px);
    line-height: .95;
    font-weight: 400;
    margin: 0 0 28px;
}
.ws-hero-content p {
    max-width: 450px;
    line-height: 1.8;
    font-size: 15px;
    margin-bottom: 35px;
}
.ws-button {
    display: inline-block;
    padding: 15px 28px;
    border: 1px solid var(--ws-gold);
    color: inherit;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 2px;
    transition: .35s ease;
}
.ws-button:hover {
    background: var(--ws-gold);
    color: #fff;
}
.ws-hero-number {
    position: absolute;
    right: 5%;
    bottom: 35px;
    color: rgba(255,255,255,.5);
    font-size: 12px;
    letter-spacing: 3px;
}
@keyframes wsHeroZoom {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}
/* INTRO */
.ws-intro {
    background: var(--ws-bg);
    padding: 100px 7%;
}
.ws-intro-small {
    color: var(--ws-gold);
    font-size: 11px;
    letter-spacing: 3px;
    margin-bottom: 55px;
}
.ws-intro-layout {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr .85fr;
    gap: 90px;
    align-items: center;
}
.ws-intro-text h2,
.ws-section-title h2,
.ws-process-heading h2,
.ws-craft-content h2,
.ws-care-content h2,
.ws-final-content h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    color: var(--ws-dark);
    font-size: clamp(38px, 4vw, 62px);
    line-height: 1.05;
    margin: 0 0 30px;
}
.ws-intro-text p,
.ws-movement-content p,
.ws-craft-content p,
.ws-care-content p,
.ws-final-content p {
    max-width: 520px;
    line-height: 1.9;
    color: var(--ws-text);
    font-size: 15px;
    margin-bottom: 20px;
}
.ws-intro-image {
    height: 500px;
    overflow: hidden;
}
.ws-intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s ease;
}
.ws-intro-image:hover img {
    transform: scale(1.06);
}
/* SERVICES */
.ws-services {
    background: #ded5c6;
    padding: 100px 7%;
}
.ws-section-title {
    max-width: 1200px;
    margin: 0 auto 70px;
}
.ws-service-list {
    max-width: 1200px;
    margin: auto;
}
.ws-service-item {
    display: grid;
    grid-template-columns: 38% 1fr;
    min-height: 270px;
    border-top: 1px solid rgba(33,31,28,.25);
    transition: .45s ease;
}
.ws-service-item:last-child {
    border-bottom: 1px solid rgba(33,31,28,.25);
}
.ws-service-image {
    overflow: hidden;
}
.ws-service-image img {
    width: 100%;
    height: 270px;
    object-fit: cover;
    transition: transform .8s ease;
}
.ws-service-item:hover img {
    transform: scale(1.07);
}
.ws-service-content {
    padding: 45px 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ws-service-content > span {
    color: var(--ws-gold);
    font-size: 12px;
    letter-spacing: 2px;
}
.ws-service-content h3 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: 31px;
    margin: 15px 0;
    color: var(--ws-dark);
}
.ws-service-content p {
    max-width: 500px;
    line-height: 1.7;
    color: var(--ws-text);
}
/* MOVEMENT */
.ws-movement {
    background: var(--ws-black);
    color: #fff;
    min-height: 620px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.ws-movement-image {
    overflow: hidden;
}
.ws-movement-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}
.ws-movement:hover .ws-movement-image img {
    transform: scale(1.05);
}
.ws-movement-content {
    padding: 90px 9%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.ws-movement-content h2 {
    color: #f3eee6;
    font-family: Georgia, serif;
    font-size: clamp(40px, 4vw, 62px);
    font-weight: 400;
    line-height: 1;
    margin-bottom: 30px;
}
.ws-movement-content p {
    color: #c9c1b6;
}
.ws-detail-lines {
    margin-top: 35px;
}
.ws-detail-lines div {
    border-top: 1px solid rgba(255,255,255,.2);
    padding: 17px 0;
    display: flex;
    gap: 30px;
}
.ws-detail-lines strong {
    color: var(--ws-gold);
    font-weight: 400;
}
.ws-detail-lines span {
    color: #ddd5c9;
}
/* PROCESS */
.ws-process {
    padding: 100px 7%;
    background: var(--ws-bg);
}
.ws-process-heading {
    max-width: 1200px;
    margin: auto auto 70px;
}
.ws-process-line {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.ws-process-step {
    padding: 25px 30px;
    border-left: 1px solid rgba(33,31,28,.25);
}
.ws-process-step:last-child {
    border-right: 1px solid rgba(33,31,28,.25);
}
.ws-process-step > span {
    color: var(--ws-gold);
    font-size: 12px;
    letter-spacing: 2px;
}
.ws-process-step h3 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: 27px;
    margin: 20px 0 15px;
}
.ws-process-step p {
    color: var(--ws-text);
    line-height: 1.7;
    font-size: 14px;
}
/* CRAFT */
.ws-craft {
    background: #cfc3b2;
    padding: 90px 7%;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 70px;
    align-items: center;
}
.ws-craft-content {
    padding-left: 5%;
}
.ws-craft-images {
    height: 470px;
    position: relative;
}
.ws-craft-images img {
    position: absolute;
    object-fit: cover;
    transition: transform .8s ease;
}
.ws-craft-images img:first-child {
    width: 68%;
    height: 380px;
    left: 0;
    top: 0;
}
.ws-craft-images img:last-child {
    width: 48%;
    height: 290px;
    right: 0;
    bottom: 0;
    border: 10px solid #cfc3b2;
}
.ws-craft-images:hover img:first-child {
    transform: translateX(-8px);
}
.ws-craft-images:hover img:last-child {
    transform: translateX(8px);
}
/* CARE */
.ws-care {
    background: var(--ws-bg);
    padding: 100px 7%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}
.ws-care-image {
    height: 500px;
    overflow: hidden;
}
.ws-care-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s ease;
}
.ws-care-image:hover img {
    transform: scale(1.06);
}
.ws-care-content {
    padding-right: 5%;
}
.ws-care-points {
    margin-top: 35px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.ws-care-points span {
    padding: 16px 0;
    border-top: 1px solid rgba(33,31,28,.2);
    font-size: 13px;
}
/* FINAL */
.ws-final {
    min-height: 560px;
    position: relative;
    overflow: hidden;
    background: var(--ws-black);
    display: flex;
    align-items: center;
}
.ws-final-image {
    position: absolute;
    inset: 0;
}
.ws-final-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .45;
    transition: transform 1s ease;
}
.ws-final:hover img {
    transform: scale(1.05);
}
.ws-final-content {
    position: relative;
    z-index: 2;
    width: 1200px;
    max-width: 86%;
    margin: auto;
    color: #fff;
}
.ws-final-content h2 {
    color: #f3eee6;
}
.ws-final-content p {
    color: #d1c8bc;
}
/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
    .ws-hero {
        min-height: 580px;
    }
    .ws-intro-layout,
    .ws-movement,
    .ws-care,
    .ws-craft {
        grid-template-columns: 1fr;
    }
    .ws-intro-layout {
        gap: 45px;
    }
    .ws-intro-image,
    .ws-care-image {
        height: 420px;
    }
    .ws-service-item {
        grid-template-columns: 1fr;
    }
    .ws-service-image img {
        height: 240px;
    }
    .ws-process-line {
        grid-template-columns: 1fr 1fr;
    }
    .ws-process-step {
        border-bottom: 1px solid rgba(33,31,28,.2);
    }
    .ws-craft-images {
        height: 420px;
    }
    .ws-movement {
        min-height: auto;
    }
    .ws-movement-image {
        height: 450px;
    }
}
@media (max-width: 600px) {
    .ws-hero-content h1 {
        font-size: 48px;
    }
    .ws-intro,
    .ws-services,
    .ws-process,
    .ws-craft,
    .ws-care {
        padding: 70px 6%;
    }
    .ws-service-content {
        padding: 35px 20px;
    }
    .ws-process-line {
        grid-template-columns: 1fr;
    }
    .ws-process-step {
        border-left: 0;
        border-right: 0 !important;
    }
    .ws-craft-images {
        height: 350px;
    }
    .ws-craft-images img:first-child {
        width: 75%;
        height: 280px;
    }
    .ws-craft-images img:last-child {
        width: 48%;
        height: 210px;
    }
    .ws-care-points {
        grid-template-columns: 1fr;
    }
}
/* FIX COLLECTION TEXT IN DARK MODE */
body.dark-mode .collection-name {
    background: #211711;
}
body.dark-mode .collection-name h3 {
    color: #f5f1ea;
}
body.dark-mode .collection-name p {
    color: #d7ad6a;
}
/* =========================================================
   FINAL HOME PAGE SPACING FIX
========================================================= */

/* MADE TO BE REMEMBERED
   Text LEFT - Image RIGHT
*/
.home-signature {
    min-height: 430px;
    padding: 45px 6%;
    grid-template-columns: 1fr 1fr;
    gap: 45px;
}

.home-signature-content {
    order: 1;
    max-width: 500px;
}

.home-signature-image {
    order: 2;
    height: 360px;
}

.home-signature-image img {
    object-fit: contain;
}


/* WHY ZIVARA
   Make section shorter and tighter
*/
.home-why {
    padding: 55px 6% 60px;
}

.home-why-heading {
    margin-bottom: 35px;
}

.home-why-grid {
    max-width: 1150px;
}

.home-why-item {
    padding: 5px 25px;
}

.home-why-number {
    margin-bottom: 16px;
}

.home-why-item h3 {
    margin-bottom: 9px;
}

.home-why-item p {
    line-height: 1.6;
}


/* CRAFTSMANSHIP
   Reduce excessive vertical space
*/
.craft {
    padding: 65px 5%;
    gap: 55px;
    min-height: auto;
}

.craft-photo {
    height: 400px;
}

.craft-photo img {
    object-fit: contain;
}

.craft-text h2 {
    margin-bottom: 18px;
}

.craft-text > p:not(.eyebrow-dark) {
    margin-bottom: 22px;
}


/* WATCH SECTION
   Reduce the large vertical area
*/
.bridal {
    height: 420px;
}

.bridal-content {
    padding: 30px;
}


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

@media (max-width: 900px) {

    .home-signature {
        min-height: auto;
        padding: 45px 6%;
        gap: 30px;
    }

    .home-signature-image {
        height: 330px;
    }

    .home-why {
        padding: 50px 6%;
    }

    .home-why-heading {
        margin-bottom: 30px;
    }

    .craft {
        padding: 55px 6%;
        gap: 35px;
    }

    .craft-photo {
        height: 350px;
    }

    .bridal {
        height: 380px;
    }
}


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

@media (max-width: 600px) {

    .home-signature {
        padding: 40px 20px;
        gap: 25px;
    }

    .home-signature-image {
        height: 270px;
    }

    .home-why {
        padding: 45px 20px;
    }

    .home-why-heading {
        margin-bottom: 25px;
    }

    .home-why-item {
        padding: 20px 5px;
    }

    .craft {
        padding: 45px 20px;
        gap: 25px;
    }

    .craft-photo {
        height: 300px;
    }

    .bridal {
        height: 340px;
    }

    .bridal-content {
        padding: 20px;
    }
}
/* =========================================================
   INDEX PAGE - EXTRA PREMIUM ANIMATIONS
========================================================= */

/* HERO IMAGE - SLOW ZOOM */
.hero-image img {
    animation: heroZoom 8s ease-in-out infinite alternate;
}

@keyframes heroZoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.06);
    }
}


/* INTRO TEXT */
.intro-content {
    animation: introSlide 1s ease both;
}

@keyframes introSlide {
    from {
        opacity: 0;
        transform: translateX(-45px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* COLLECTION IMAGES - FLOAT */
.collection:hover {
    transform: translateY(-8px);
    transition: transform .5s ease;
}

.collection-img img {
    transition: transform .8s ease;
}

.collection:hover .collection-img img {
    transform: scale(1.08);
}


/* NEW ARRIVAL IMAGE */
.product:hover .product-image img {
    transform: scale(1.07) translateY(-5px);
}

.product-image img {
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}


/* CRAFT IMAGE */
.craft-photo {
    overflow: hidden;
}

.craft-photo img {
    transition: transform 1s ease;
}

.craft-photo:hover img {
    transform: scale(1.06);
}


/* WATCH / EDITORIAL BACKGROUND */
.bridal-bg,
.showroom-bg {
    transition: transform 1.2s ease;
}

.bridal:hover .bridal-bg,
.showroom:hover .showroom-bg {
    transform: scale(1.05);
}


/* BUTTON HOVER */
.btn-primary,
.btn-outline,
.btn-light {
    transition:
        transform .35s ease,
        letter-spacing .35s ease,
        background-color .35s ease;
}

.btn-primary:hover,
.btn-outline:hover,
.btn-light:hover {
    transform: translateY(-3px);
    letter-spacing: 1.5px;
}


/* SECTION HEADINGS */
.section-heading {
    transition: transform .6s ease;
}

.section-heading:hover {
    transform: translateY(-4px);
}


/* FOOTER LINKS */
.footer-column a,
.footer-social a {
    transition:
        transform .3s ease,
        letter-spacing .3s ease;
}

.footer-column a:hover,
.footer-social a:hover {
    transform: translateX(5px);
    letter-spacing: .8px;
}
/* =========================================================
   ZIVARA HOME 2
   DENSE EDITORIAL SHOWROOM
========================================================= */

.h2-hero {
    min-height: 600px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #211813;
    color: #f8f1e8;
}

.h2-hero-visual {
    position: absolute;
    inset: 0;
}

.h2-hero-main-image,
.h2-hero-main-image img {
    width: 100%;
    height: 100%;
}

.h2-hero-main-image img {
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    transition: transform 1.5s ease;
}

.h2-hero:hover .h2-hero-main-image img {
    transform: scale(1.06);
}

.h2-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(20,13,10,.82) 0%,
        rgba(20,13,10,.45) 42%,
        rgba(20,13,10,.08) 100%
    );
}

.h2-hero-content {
    position: relative;
    z-index: 2;
    width: 55%;
    margin-left: 5%;
    padding: 45px 0;
}

.h2-hero-content > span {
    display: block;
    font-size: 10px;
    letter-spacing: 4px;
    margin-bottom: 18px;
}

.h2-hero-content h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 6vw, 82px);
    font-weight: 400;
    line-height: .93;
    margin: 0 0 22px;
}

.h2-hero-content p {
    max-width: 460px;
    font-size: 13px;
    line-height: 1.75;
    margin-bottom: 25px;
    color: rgba(255,255,255,.82);
}

.h2-hero-links {
    display: flex;
    gap: 25px;
}

.h2-hero-links a {
    color: #fff;
    text-decoration: none;
    font-size: 9px;
    letter-spacing: 2px;
    transition: .3s ease;
}

.h2-hero-links a:hover {
    letter-spacing: 3px;
}

.h2-hero-small-image {
    position: absolute;
    z-index: 3;
    right: 5%;
    bottom: 35px;
    width: 145px;
    height: 175px;
    border: 4px solid #211813;
    overflow: hidden;
}

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


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

.h2-statement {
    min-height: 260px;
    padding: 45px 5%;
    background: #eee4d6;
    color: #28211d;
    display: grid;
    grid-template-columns: 45px 1.15fr .85fr;
    gap: 25px;
    align-items: center;
}

.h2-statement-number {
    align-self: start;
    font-size: 9px;
    letter-spacing: 2px;
}

.h2-statement-heading h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: clamp(38px, 4.4vw, 58px);
    line-height: .95;
    margin: 0;
}

.h2-statement-heading > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 13px;
}

.h2-statement-copy {
    max-width: 430px;
}

.h2-line {
    width: 45px;
    height: 1px;
    background: #28211d;
    margin-bottom: 15px;
}

.h2-statement-copy p {
    font-size: 12px;
    line-height: 1.65;
    margin: 0 0 15px;
}

.h2-statement-copy a {
    color: inherit;
    text-decoration: none;
    font-size: 9px;
    letter-spacing: 2px;
}


/* =========================================================
   GOLD EDIT
========================================================= */

.h2-gold-edit {
    min-height: 430px;
    padding: 35px 5%;
    background: #f7f1e8;
    color: #28211d;
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 20px;
    align-items: stretch;
}

.h2-gold-image {
    height: 360px;
    overflow: hidden;
    position: relative;
}

.h2-gold-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-gold-edit:hover .h2-gold-image img {
    transform: scale(1.05);
}

.h2-gold-content {
    align-self: center;
    margin-left: -45px;
    position: relative;
    z-index: 2;
    background: #f7f1e8;
    padding: 30px;
}

.h2-gold-content > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 13px;
}

.h2-gold-content h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: clamp(40px, 4vw, 56px);
    line-height: .92;
    margin: 0 0 18px;
}

.h2-gold-content p {
    font-size: 12px;
    line-height: 1.7;
    margin: 0 0 18px;
}

.h2-detail-line {
    display: flex;
    gap: 20px;
    padding: 11px 0;
    border-top: 1px solid rgba(40,33,29,.25);
    border-bottom: 1px solid rgba(40,33,29,.25);
    margin-bottom: 16px;
}

.h2-detail-line span {
    font-size: 8px;
    letter-spacing: 2px;
}

.h2-gold-content a,
.h2-diamond-content a,
.h2-watch-content a,
.h2-silver-content a,
.h2-time-content a,
.h2-consultation-content a,
.h2-showroom-content a {
    color: inherit;
    text-decoration: none;
    font-size: 9px;
    letter-spacing: 2px;
}


/* =========================================================
   DIAMOND EDIT
========================================================= */

.h2-diamond-edit {
    min-height: 430px;
    padding: 35px 5%;
    background: #29211e;
    color: #f8f0e7;
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 25px;
    align-items: center;
}

.h2-diamond-content {
    padding-right: 15px;
}

.h2-diamond-content > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 13px;
}

.h2-diamond-content h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: clamp(40px, 4vw, 57px);
    line-height: .93;
    margin: 0 0 18px;
}

.h2-diamond-content p {
    max-width: 400px;
    font-size: 12px;
    line-height: 1.7;
}

.h2-diamond-facts {
    display: flex;
    gap: 25px;
    margin: 20px 0;
}

.h2-diamond-facts div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.h2-diamond-facts strong {
    font-family: Georgia, serif;
    font-size: 21px;
    font-weight: 400;
}

.h2-diamond-facts span {
    font-size: 7px;
    letter-spacing: 2px;
    opacity: .65;
}

.h2-diamond-image {
    height: 360px;
    overflow: hidden;
}

.h2-diamond-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-diamond-edit:hover .h2-diamond-image img {
    transform: scale(1.05);
}


/* =========================================================
   WATCH EDIT
========================================================= */

.h2-watch-edit {
    min-height: 390px;
    padding: 30px 5%;
    background: #d8c8b7;
    color: #28211d;
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 25px;
    align-items: center;
}

.h2-watch-image {
    height: 320px;
    overflow: hidden;
}

.h2-watch-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-watch-edit:hover .h2-watch-image img {
    transform: scale(1.05);
}

.h2-watch-image-label {
    position: absolute;
    margin: -35px 0 0 15px;
    z-index: 2;
    background: #211813;
    color: #fff;
    padding: 8px 11px;
    font-size: 7px;
    letter-spacing: 2px;
}

.h2-watch-content {
    max-width: 500px;
}

.h2-watch-content > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 13px;
}

.h2-watch-content h2 {
    font-family: Georgia, serif;
    font-size: clamp(40px, 4vw, 57px);
    font-weight: 400;
    line-height: .93;
    margin: 0 0 18px;
}

.h2-watch-content p {
    font-size: 12px;
    line-height: 1.7;
    margin-bottom: 15px;
}

.h2-watch-specs {
    display: flex;
    gap: 30px;
    margin: 18px 0;
}

.h2-watch-specs div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.h2-watch-specs strong {
    font-family: Georgia, serif;
    font-size: 20px;
    font-weight: 400;
}

.h2-watch-specs span {
    font-size: 7px;
    letter-spacing: 2px;
}


/* =========================================================
   JEWELLERY × TIME
========================================================= */

.h2-overlap {
    min-height: 450px;
    padding: 40px 5%;
    background: #f4ebe0;
    color: #28211d;
}

.h2-overlap-heading {
    max-width: 580px;
}

.h2-overlap-heading > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.h2-overlap-heading h2 {
    font-family: Georgia, serif;
    font-size: clamp(40px, 4vw, 55px);
    font-weight: 400;
    line-height: .94;
    margin: 0 0 12px;
}

.h2-overlap-heading p {
    max-width: 430px;
    font-size: 12px;
    line-height: 1.65;
    margin: 0;
}

.h2-overlap-stage {
    max-width: 1050px;
    height: 255px;
    margin: 20px auto 0;
    position: relative;
}

.h2-overlap-image {
    position: absolute;
    overflow: hidden;
}

.h2-overlap-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-overlap-image:hover img {
    transform: scale(1.06);
}

.h2-overlap-back {
    width: 48%;
    height: 220px;
    right: 6%;
    top: 0;
}

.h2-overlap-front {
    width: 43%;
    height: 205px;
    left: 8%;
    bottom: 0;
    z-index: 2;
    border: 6px solid #f4ebe0;
}

.h2-overlap-note {
    position: absolute;
    right: 0;
    bottom: 5px;
    z-index: 4;
    width: 155px;
    padding: 14px;
    background: #28211d;
    color: #f8f0e7;
}

.h2-overlap-note span {
    font-size: 7px;
    letter-spacing: 2px;
}

.h2-overlap-note p {
    font-family: Georgia, serif;
    font-size: 12px;
    line-height: 1.4;
    margin: 8px 0 0;
}


/* =========================================================
   SILVER
========================================================= */

.h2-silver-edit {
    min-height: 300px;
    padding: 35px 5%;
    background: #d8d0c8;
    color: #28211d;
    display: grid;
    grid-template-columns: 35px 1fr 1fr;
    gap: 25px;
    align-items: center;
}

.h2-silver-number {
    align-self: start;
    font-size: 8px;
    letter-spacing: 2px;
}

.h2-silver-image {
    height: 240px;
    overflow: hidden;
}

.h2-silver-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-silver-edit:hover .h2-silver-image img {
    transform: scale(1.06);
}

.h2-silver-content {
    max-width: 450px;
}

.h2-silver-content > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.h2-silver-content h2 {
    font-family: Georgia, serif;
    font-size: 48px;
    font-weight: 400;
    line-height: .94;
    margin: 0 0 15px;
}

.h2-silver-content p {
    font-size: 12px;
    line-height: 1.65;
    margin-bottom: 15px;
}


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

.h2-difference {
    min-height: 320px;
    padding: 40px 5%;
    background: #211813;
    color: #f8f0e7;
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 45px;
    align-items: center;
}

.h2-difference-title > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.h2-difference-title h2 {
    font-family: Georgia, serif;
    font-size: clamp(38px, 4vw, 54px);
    font-weight: 400;
    line-height: .94;
    margin: 0;
}

.h2-difference-list {
    border-top: 1px solid rgba(255,255,255,.2);
}

.h2-difference-item {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,.2);
}

.h2-difference-item > span {
    font-family: Georgia, serif;
    font-size: 19px;
}

.h2-difference-item h3 {
    font-size: 9px;
    letter-spacing: 2px;
    margin: 0 0 5px;
}

.h2-difference-item p {
    font-size: 11px;
    line-height: 1.55;
    opacity: .7;
    margin: 0;
}


/* =========================================================
   DETAIL STORY
========================================================= */

.h2-detail-story {
    padding: 40px 5%;
    background: #f5ede3;
    color: #28211d;
}

.h2-detail-story-intro {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 22px;
}

.h2-detail-story-intro > span {
    font-size: 9px;
    letter-spacing: 3px;
}

.h2-detail-story-intro h2 {
    font-family: Georgia, serif;
    font-size: 45px;
    font-weight: 400;
    margin: 8px 0 0;
}

.h2-detail-story-intro p {
    max-width: 340px;
    font-size: 11px;
    line-height: 1.65;
    margin: 0;
}

.h2-detail-grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr .65fr;
    gap: 14px;
    align-items: end;
}

.h2-detail-large {
    height: 280px;
    position: relative;
    overflow: hidden;
}

.h2-detail-small {
    height: 205px;
    position: relative;
    overflow: hidden;
}

.h2-detail-large img,
.h2-detail-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-detail-large:hover img,
.h2-detail-small:hover img {
    transform: scale(1.06);
}

.h2-detail-large span,
.h2-detail-small span {
    position: absolute;
    left: 12px;
    bottom: 10px;
    color: #fff;
    font-size: 7px;
    letter-spacing: 2px;
}

.h2-detail-text {
    padding: 10px 0;
}

.h2-detail-text strong {
    font-family: Georgia, serif;
    font-size: 23px;
    font-weight: 400;
}

.h2-detail-text h3 {
    font-family: Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    margin: 8px 0;
}

.h2-detail-text p {
    font-size: 11px;
    line-height: 1.6;
    margin: 0;
}


/* =========================================================
   TIME STORY
========================================================= */

.h2-time-story {
    min-height: 350px;
    padding: 35px 5%;
    background: #2b211e;
    color: #f8f0e7;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 30px;
    align-items: center;
}

.h2-time-image {
    height: 285px;
    overflow: hidden;
}

.h2-time-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-time-story:hover .h2-time-image img {
    transform: scale(1.05);
}

.h2-time-content {
    max-width: 450px;
}

.h2-time-content > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.h2-time-content h2 {
    font-family: Georgia, serif;
    font-size: 48px;
    font-weight: 400;
    line-height: .94;
    margin: 0 0 15px;
}

.h2-time-content p {
    font-size: 11px;
    line-height: 1.65;
    margin-bottom: 15px;
}

.h2-time-points {
    display: flex;
    gap: 25px;
    margin: 17px 0;
}

.h2-time-points div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.h2-time-points strong {
    font-family: Georgia, serif;
    font-size: 19px;
    font-weight: 400;
}

.h2-time-points span {
    font-size: 7px;
    letter-spacing: 2px;
}


/* =========================================================
   MOMENTS
========================================================= */

.h2-moments {
    padding: 40px 5%;
    background: #e9dfd2;
    color: #28211d;
}

.h2-moments-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 22px;
}

.h2-moments-heading > span {
    font-size: 9px;
    letter-spacing: 3px;
}

.h2-moments-heading h2 {
    font-family: Georgia, serif;
    font-size: 43px;
    font-weight: 400;
    line-height: .95;
    margin: 7px 0 0;
}

.h2-moments-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.h2-moment {
    color: inherit;
    text-decoration: none;
}

.h2-moment-image {
    height: 215px;
    overflow: hidden;
}

.h2-moment-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s ease;
}

.h2-moment:hover .h2-moment-image img {
    transform: scale(1.06);
}

.h2-moment-text {
    padding: 11px 0;
    border-bottom: 1px solid rgba(40,33,29,.25);
}

.h2-moment-text span {
    font-size: 7px;
    letter-spacing: 2px;
}

.h2-moment-text h3 {
    font-size: 9px;
    letter-spacing: 2px;
    margin: 6px 0 4px;
}

.h2-moment-text p {
    font-size: 10px;
    margin: 0;
    opacity: .7;
}


/* =========================================================
   CONSULTATION
========================================================= */

.h2-consultation {
    min-height: 320px;
    padding: 35px 5%;
    background: #d4c1ad;
    color: #28211d;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
}

.h2-consultation-image {
    height: 255px;
    overflow: hidden;
}

.h2-consultation-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-consultation:hover .h2-consultation-image img {
    transform: scale(1.05);
}

.h2-consultation-content {
    max-width: 450px;
}

.h2-consultation-content > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.h2-consultation-content h2 {
    font-family: Georgia, serif;
    font-size: 47px;
    font-weight: 400;
    line-height: .94;
    margin: 0 0 15px;
}

.h2-consultation-content p {
    font-size: 11px;
    line-height: 1.65;
    margin-bottom: 15px;
}


/* =========================================================
   SHOWROOM
========================================================= */

.h2-showroom {
    min-height: 320px;
    padding: 35px 5%;
    background: #f7f1e8;
    color: #28211d;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 30px;
    align-items: center;
}

.h2-showroom-content {
    max-width: 440px;
}

.h2-showroom-content > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.h2-showroom-content h2 {
    font-family: Georgia, serif;
    font-size: 47px;
    font-weight: 400;
    line-height: .94;
    margin: 0 0 15px;
}

.h2-showroom-content p {
    font-size: 11px;
    line-height: 1.65;
    margin-bottom: 15px;
}

.h2-showroom-image {
    height: 270px;
    overflow: hidden;
}

.h2-showroom-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-showroom:hover .h2-showroom-image img {
    transform: scale(1.05);
}


/* =========================================================
   SCROLL ANIMATION
========================================================= */

.h2-statement-heading,
.h2-statement-copy,
.h2-gold-image,
.h2-gold-content,
.h2-diamond-content,
.h2-diamond-image,
.h2-watch-image,
.h2-watch-content,
.h2-overlap-heading,
.h2-overlap-stage,
.h2-silver-image,
.h2-silver-content,
.h2-difference-title,
.h2-difference-list,
.h2-detail-story-intro,
.h2-detail-grid,
.h2-time-image,
.h2-time-content,
.h2-moments-heading,
.h2-moment,
.h2-consultation-image,
.h2-consultation-content,
.h2-showroom-content,
.h2-showroom-image {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity .7s ease, transform .7s ease;
}

.h2-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.h2-moment:nth-child(2) {
    transition-delay: .1s;
}

.h2-moment:nth-child(3) {
    transition-delay: .2s;
}


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

@media (max-width: 900px) {

    .h2-hero-content {
        width: 65%;
        margin-left: 5%;
    }

    .h2-statement {
        grid-template-columns: 35px 1fr;
    }

    .h2-statement-copy {
        grid-column: 2;
    }

    .h2-gold-edit {
        grid-template-columns: 1fr .75fr;
    }

    .h2-gold-image {
        height: 330px;
    }

    .h2-diamond-edit {
        grid-template-columns: .8fr 1.2fr;
    }

    .h2-diamond-image {
        height: 330px;
    }

    .h2-watch-edit,
    .h2-time-story,
    .h2-consultation,
    .h2-showroom {
        grid-template-columns: 1fr 1fr;
    }

    .h2-watch-image {
        height: 290px;
    }

    .h2-detail-grid {
        grid-template-columns: 1fr 1fr;
    }

    .h2-detail-large {
        grid-column: span 2;
    }

    .h2-detail-small {
        height: 210px;
    }

}


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

@media (max-width: 600px) {

    .h2-hero {
        min-height: 560px;
    }

    .h2-hero-content {
        width: 90%;
        margin-left: 5%;
    }

    .h2-hero-content h1 {
        font-size: 46px;
    }

    .h2-hero-small-image {
        width: 100px;
        height: 130px;
        right: 5%;
        bottom: 20px;
    }

    .h2-statement {
        padding: 35px 5%;
        grid-template-columns: 25px 1fr;
        gap: 12px;
    }

    .h2-statement-heading h2 {
        font-size: 37px;
    }

    .h2-gold-edit,
    .h2-diamond-edit,
    .h2-watch-edit,
    .h2-time-story,
    .h2-consultation,
    .h2-showroom {
        grid-template-columns: 1fr;
        padding: 30px 5%;
        gap: 20px;
    }

    .h2-gold-image,
    .h2-diamond-image,
    .h2-watch-image,
    .h2-time-image,
    .h2-consultation-image,
    .h2-showroom-image {
        height: 240px;
    }

    .h2-gold-content {
        margin: -35px 4% 0 auto;
        padding: 22px;
    }

    .h2-diamond-edit {
        min-height: auto;
    }

    .h2-diamond-content {
        padding: 0;
    }

    .h2-overlap {
        padding: 35px 5%;
    }

    .h2-overlap-stage {
        height: 250px;
    }

    .h2-overlap-back {
        width: 70%;
        height: 190px;
        right: 0;
    }

    .h2-overlap-front {
        width: 62%;
        height: 175px;
        left: 0;
    }

    .h2-overlap-note {
        width: 135px;
        padding: 11px;
    }

    .h2-silver-edit {
        grid-template-columns: 1fr;
        padding: 30px 5%;
        gap: 15px;
    }

    .h2-silver-number {
        display: none;
    }

    .h2-silver-image {
        height: 220px;
    }

    .h2-difference {
        grid-template-columns: 1fr;
        padding: 35px 5%;
        gap: 25px;
    }

    .h2-detail-story {
        padding: 35px 5%;
    }

    .h2-detail-story-intro {
        display: block;
    }

    .h2-detail-story-intro h2 {
        font-size: 40px;
        margin-bottom: 12px;
    }

    .h2-detail-grid {
        grid-template-columns: 1fr;
    }

    .h2-detail-large {
        grid-column: auto;
        height: 240px;
    }

    .h2-detail-small {
        height: 210px;
    }

    .h2-moments {
        padding: 35px 5%;
    }

    .h2-moments-heading {
        display: block;
    }

    .h2-moments-heading h2 {
        font-size: 39px;
    }

    .h2-moments-grid {
        grid-template-columns: 1fr;
    }

    .h2-moment-image {
        height: 235px;
    }

}
/* =========================================================
   HOME 2 PREMIUM ANIMATIONS
========================================================= */

/* LEFT REVEAL */
.h2-animate-left {
    opacity: 0;
    transform: translateX(-70px);
    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(.22,.61,.36,1);
}

.h2-animate-left.h2-show {
    opacity: 1;
    transform: translateX(0);
}


/* RIGHT REVEAL */
.h2-animate-right {
    opacity: 0;
    transform: translateX(70px);
    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(.22,.61,.36,1);
}

.h2-animate-right.h2-show {
    opacity: 1;
    transform: translateX(0);
}


/* BOTTOM REVEAL */
.h2-animate-up {
    opacity: 0;
    transform: translateY(60px);
    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(.22,.61,.36,1);
}

.h2-animate-up.h2-show {
    opacity: 1;
    transform: translateY(0);
}


/* SCALE / POP */
.h2-animate-scale {
    opacity: 0;
    transform: scale(.88);
    transition:
        opacity 1s ease,
        transform 1.1s cubic-bezier(.22,.61,.36,1);
}

.h2-animate-scale.h2-show {
    opacity: 1;
    transform: scale(1);
}


/* CLIP REVEAL */
.h2-animate-clip {
    clip-path: inset(0 100% 0 0);
    transition:
        clip-path 1.2s cubic-bezier(.77,0,.18,1);
}

.h2-animate-clip.h2-show {
    clip-path: inset(0 0 0 0);
}


/* IMAGE ZOOM */
.h2-image-zoom {
    overflow: hidden;
}

.h2-image-zoom img {
    transform: scale(1.12);
    transition: transform 1.5s cubic-bezier(.22,.61,.36,1);
}

.h2-image-zoom.h2-show img {
    transform: scale(1);
}


/* IMAGE MOVEMENT */
.h2-image-move img {
    transform: scale(1.08) translateX(-15px);
    transition: transform 1.4s cubic-bezier(.22,.61,.36,1);
}

.h2-image-move.h2-show img {
    transform: scale(1) translateX(0);
}


/* TEXT STAGGER */
.h2-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.h2-stagger.h2-show > *:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .05s;
}

.h2-stagger.h2-show > *:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .15s;
}

.h2-stagger.h2-show > *:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .25s;
}

.h2-stagger.h2-show > *:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .35s;
}


/* HERO CONTENT */
.h2-hero-content {
    animation: h2HeroText 1.2s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes h2HeroText {
    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* HERO SMALL IMAGE */
.h2-hero-small-image {
    animation: h2HeroSmall 1.3s .35s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes h2HeroSmall {
    from {
        opacity: 0;
        transform: translateY(35px) scale(.85);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* FLOATING DETAIL */
.h2-floating {
    animation: h2Floating 5s ease-in-out infinite;
}

@keyframes h2Floating {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


/* HOVER IMAGE */
.h2-hover-image {
    overflow: hidden;
}

.h2-hover-image img {
    transition: transform 1s cubic-bezier(.22,.61,.36,1);
}

.h2-hover-image:hover img {
    transform: scale(1.06);
}


/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {

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

}
/* =========================================================
   ZIVARA HOME 2
   COMPACT EDITORIAL LUXURY DESIGN
========================================================= */

.h2-hero,
.h2-category-strip,
.h2-dual-feature,
.h2-values,
.h2-arrivals,
.h2-watch-gift,
.h2-services,
.h2-stories,
.h2-consultation,
.h2-showroom {
    width: 100%;
    overflow: hidden;
}

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

.h2-hero {
    min-height: 590px;
    position: relative;
    background: #201c19;
    color: #f7f3ed;
    display: flex;
    align-items: center;
}

.h2-hero-visual {
    position: absolute;
    inset: 0;
}

.h2-hero-main-image {
    width: 100%;
    height: 100%;
}

.h2-hero-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.h2-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(20,16,14,.78),
            rgba(20,16,14,.30),
            rgba(20,16,14,.08)
        );
    z-index: 1;
}

.h2-hero-content {
    position: relative;
    z-index: 3;
    width: 48%;
    margin-left: 7%;
    padding: 50px 0;
}

.h2-hero-content span {
    display: block;
    font-size: 10px;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.h2-hero-content h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 5vw, 78px);
    line-height: .94;
    font-weight: 400;
    margin: 0 0 25px;
}

.h2-hero-content p {
    max-width: 470px;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 28px;
}

.h2-hero-links {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.h2-hero-links a {
    color: #fff;
    font-size: 10px;
    letter-spacing: 2px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.7);
    padding-bottom: 7px;
    transition: .3s ease;
}

.h2-hero-links a:hover {
    letter-spacing: 3px;
}

.h2-hero-small-image {
    position: absolute;
    z-index: 4;
    right: 7%;
    bottom: 35px;
    width: 150px;
    height: 190px;
    border: 1px solid rgba(255,255,255,.6);
    padding: 7px;
}

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


/* =========================================================
   CATEGORY STRIP
========================================================= */

.h2-category-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #e8dccd;
    border-bottom: 1px solid #cdbda9;
}

.h2-category-item {
    min-height: 155px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    color: #211d19;
    text-decoration: none;
    border-right: 1px solid #cdbda9;
    transition: background .35s ease;
}

.h2-category-item:last-child {
    border-right: 0;
}

.h2-category-item:hover {
    background: #ddd0c0;
}

.h2-category-image {
    width: 88px;
    height: 105px;
    flex-shrink: 0;
    overflow: hidden;
    background: #f7f3ed;
}

.h2-category-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .6s ease;
}

.h2-category-item:hover img {
    transform: scale(1.07);
}

.h2-category-item strong,
.h2-category-item span,
.h2-category-item small {
    display: block;
}

.h2-category-item strong {
    font-family: Georgia, serif;
    font-size: 17px;
    font-weight: 400;
}

.h2-category-item span {
    font-size: 9px;
    letter-spacing: 2px;
    margin-top: 3px;
}

.h2-category-item small {
    font-size: 8px;
    letter-spacing: 1px;
    margin-top: 15px;
}


/* =========================================================
   DUAL FEATURE
========================================================= */

.h2-dual-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.h2-dual-panel {
    min-height: 430px;
    position: relative;
    display: flex;
    align-items: stretch;
}

.h2-dark-panel {
    background: #27211d;
    color: #f7f3ed;
}

.h2-dual-image {
    width: 53%;
    overflow: hidden;
}

.h2-dual-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-dual-panel:hover .h2-dual-image img {
    transform: scale(1.04);
}

.h2-dual-content {
    width: 47%;
    padding: 45px 32px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.h2-dual-content span {
    font-size: 9px;
    letter-spacing: 2.5px;
    margin-bottom: 18px;
}

.h2-dual-content h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: 35px;
    line-height: 1.05;
    margin: 0 0 18px;
}

.h2-dual-content p {
    font-size: 12px;
    line-height: 1.7;
    margin: 0 0 22px;
}

.h2-dual-content a {
    color: inherit;
    font-size: 9px;
    letter-spacing: 2px;
    text-decoration: none;
}


/* =========================================================
   VALUES
========================================================= */

.h2-values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #f7f3ed;
    border-bottom: 1px solid #d9cbbb;
}

.h2-value {
    min-height: 170px;
    padding: 30px 25px;
    border-right: 1px solid #d9cbbb;
}

.h2-value:last-child {
    border-right: 0;
}

.h2-value-icon {
    font-size: 24px;
    display: block;
    margin-bottom: 13px;
}

.h2-value h3 {
    font-size: 10px;
    letter-spacing: 2px;
    margin: 0 0 9px;
}

.h2-value p {
    font-size: 11px;
    line-height: 1.6;
    margin: 0;
    max-width: 210px;
}


/* =========================================================
   NEW ARRIVALS
========================================================= */

.h2-arrivals {
    display: grid;
    grid-template-columns: 235px 1fr;
    gap: 25px;
    padding: 45px 5%;
    background: #eee5da;
}

.h2-arrivals-intro {
    padding: 10px 10px 10px 0;
}

.h2-arrivals-intro span {
    font-size: 9px;
    letter-spacing: 2.5px;
}

.h2-arrivals-intro h2 {
    font-family: Georgia, serif;
    font-size: 42px;
    font-weight: 400;
    line-height: .95;
    margin: 15px 0;
}

.h2-arrivals-intro p {
    font-size: 11px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.h2-arrivals-intro a {
    color: inherit;
    text-decoration: none;
    font-size: 9px;
    letter-spacing: 2px;
}

.h2-products {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

.h2-product {
    text-decoration: none;
    color: #241f1b;
}

.h2-product-image {
    height: 245px;
    position: relative;
    background: #f8f5f0;
    overflow: hidden;
    margin-bottom: 12px;
}

.h2-product-image span {
    position: absolute;
    z-index: 2;
    right: 10px;
    top: 9px;
    font-size: 18px;
}

.h2-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .7s ease;
}

.h2-product:hover img {
    transform: scale(1.06);
}

.h2-product strong {
    display: block;
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: 400;
}

.h2-product small {
    display: block;
    margin-top: 5px;
    font-size: 10px;
}


/* =========================================================
   WATCH + GIFT
========================================================= */

.h2-watch-gift {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    min-height: 410px;
}

.h2-watch-banner,
.h2-gift-banner {
    position: relative;
    overflow: hidden;
}

.h2-watch-banner {
    background: #1e1b19;
    color: #fff;
}

.h2-gift-banner {
    background: #d5c2ad;
    color: #211c18;
}

.h2-watch-banner-image,
.h2-gift-banner-image {
    position: absolute;
    inset: 0;
}

.h2-watch-banner-image img,
.h2-gift-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h2-watch-banner::after,
.h2-gift-banner::after {
    content: "";
    position: absolute;
    inset: 0;
}

.h2-watch-banner::after {
    background: linear-gradient(
        90deg,
        rgba(15,13,12,.86),
        rgba(15,13,12,.20)
    );
}

.h2-gift-banner::after {
    background: linear-gradient(
        90deg,
        rgba(40,30,24,.75),
        rgba(40,30,24,.10)
    );
}

.h2-watch-banner-content,
.h2-gift-banner-content {
    position: relative;
    z-index: 2;
    width: 60%;
    padding: 60px 8%;
}

.h2-watch-banner-content span,
.h2-gift-banner-content span {
    font-size: 9px;
    letter-spacing: 2.5px;
}

.h2-watch-banner-content h2,
.h2-gift-banner-content h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.05;
    margin: 16px 0;
}

.h2-watch-banner-content p,
.h2-gift-banner-content p {
    font-size: 11px;
    line-height: 1.7;
    margin-bottom: 22px;
}

.h2-watch-banner-content a,
.h2-gift-banner-content a {
    color: inherit;
    font-size: 9px;
    letter-spacing: 2px;
    text-decoration: none;
}


/* =========================================================
   SERVICES
========================================================= */

.h2-services {
    display: grid;
    grid-template-columns: 180px repeat(4, 1fr);
    background: #f7f3ed;
    border-bottom: 1px solid #d8cab9;
}

.h2-services-title,
.h2-service {
    min-height: 165px;
    padding: 28px 22px;
    border-right: 1px solid #d8cab9;
}

.h2-services-title {
    display: flex;
    align-items: flex-start;
}

.h2-services-title span {
    font-size: 9px;
    letter-spacing: 2.5px;
}

.h2-service {
    color: #28231e;
    text-decoration: none;
    transition: background .3s ease;
}

.h2-service:hover {
    background: #e8ded1;
}

.h2-service-icon {
    display: block;
    font-size: 25px;
    margin-bottom: 17px;
}

.h2-service strong {
    display: block;
    font-size: 9px;
    letter-spacing: 1.5px;
}

.h2-service p {
    font-size: 10px;
    line-height: 1.6;
    margin-top: 9px;
}

.h2-service-all {
    grid-column: 1 / -1;
    text-align: right;
    padding: 12px 5%;
    color: inherit;
    text-decoration: none;
    font-size: 8px;
    letter-spacing: 2px;
    border-top: 1px solid #d8cab9;
}


/* =========================================================
   THREE STORIES
========================================================= */

.h2-stories {
    display: grid;
    grid-template-columns: 1.1fr .9fr 1.1fr;
    min-height: 390px;
}

.h2-story {
    position: relative;
    overflow: hidden;
    min-height: 390px;
    color: #fff;
    text-decoration: none;
    background: #211d1a;
}

.h2-story-image {
    position: absolute;
    inset: 0;
}

.h2-story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.h2-story:hover img {
    transform: scale(1.07);
}

.h2-story::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        transparent 25%,
        rgba(0,0,0,.78)
    );
}

.h2-story-content {
    position: absolute;
    z-index: 2;
    bottom: 28px;
    left: 28px;
    right: 25px;
}

.h2-story-content span {
    font-size: 8px;
    letter-spacing: 2px;
}

.h2-story-content h3 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: 25px;
    line-height: 1.1;
    margin: 10px 0 17px;
}

.h2-story-content strong {
    font-size: 8px;
    letter-spacing: 1.8px;
}


/* =========================================================
   CONSULTATION
========================================================= */

.h2-consultation {
    min-height: 350px;
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    background: #d6c1aa;
}

.h2-consultation-content {
    padding: 45px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.h2-consultation-content span {
    font-size: 9px;
    letter-spacing: 2.5px;
}

.h2-consultation-content h2 {
    font-family: Georgia, serif;
    font-size: 42px;
    font-weight: 400;
    line-height: .98;
    margin: 15px 0 17px;
}

.h2-consultation-content p {
    font-size: 11px;
    line-height: 1.7;
    max-width: 470px;
    margin-bottom: 22px;
}

.h2-consultation-content a {
    color: inherit;
    text-decoration: none;
    font-size: 9px;
    letter-spacing: 2px;
}

.h2-consultation-image {
    min-height: 350px;
    overflow: hidden;
}

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


/* =========================================================
   SHOWROOM
========================================================= */

.h2-showroom {
    min-height: 360px;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    background: #29231f;
    color: #f7f3ed;
}

.h2-showroom-image {
    overflow: hidden;
}

.h2-showroom-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.h2-showroom-content {
    padding: 45px 9%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.h2-showroom-content span {
    font-size: 9px;
    letter-spacing: 2.5px;
}

.h2-showroom-content h2 {
    font-family: Georgia, serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    margin: 15px 0;
}

.h2-showroom-content p {
    font-size: 11px;
    line-height: 1.7;
    max-width: 400px;
    margin-bottom: 22px;
}

.h2-showroom-content a {
    color: inherit;
    text-decoration: none;
    font-size: 9px;
    letter-spacing: 2px;
}


/* =========================================================
   HOME 2 ANIMATION STATES
========================================================= */

.h2-animate-left,
.h2-animate-right,
.h2-animate-up,
.h2-animate-scale,
.h2-animate-clip,
.h2-image-zoom,
.h2-image-move,
.h2-stagger {
    will-change: transform, opacity;
}

.h2-animate-left {
    opacity: 0;
    transform: translateX(-55px);
    transition: opacity .8s ease, transform .9s ease;
}

.h2-animate-left.h2-show {
    opacity: 1;
    transform: translateX(0);
}

.h2-animate-right {
    opacity: 0;
    transform: translateX(55px);
    transition: opacity .8s ease, transform .9s ease;
}

.h2-animate-right.h2-show {
    opacity: 1;
    transform: translateX(0);
}

.h2-animate-up {
    opacity: 0;
    transform: translateY(45px);
    transition: opacity .8s ease, transform .9s ease;
}

.h2-animate-up.h2-show {
    opacity: 1;
    transform: translateY(0);
}

.h2-animate-scale {
    opacity: 0;
    transform: scale(.9);
    transition: opacity .9s ease, transform 1s ease;
}

.h2-animate-scale.h2-show {
    opacity: 1;
    transform: scale(1);
}

.h2-animate-clip {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s ease;
}

.h2-animate-clip.h2-show {
    clip-path: inset(0 0 0 0);
}

.h2-image-zoom img {
    transform: scale(1.08);
    transition: transform 1.2s ease;
}

.h2-image-zoom.h2-show img {
    transform: scale(1);
}

.h2-image-move img {
    transform: scale(1.07) translateX(-12px);
    transition: transform 1.2s ease;
}

.h2-image-move.h2-show img {
    transform: scale(1) translateX(0);
}

.h2-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}

.h2-stagger.h2-show > * {
    opacity: 1;
    transform: translateY(0);
}

.h2-stagger.h2-show > *:nth-child(1) {
    transition-delay: .05s;
}

.h2-stagger.h2-show > *:nth-child(2) {
    transition-delay: .12s;
}

.h2-stagger.h2-show > *:nth-child(3) {
    transition-delay: .19s;
}

.h2-stagger.h2-show > *:nth-child(4) {
    transition-delay: .26s;
}

.h2-stagger.h2-show > *:nth-child(5) {
    transition-delay: .33s;
}


/* =========================================================
   FLOATING WATCH
========================================================= */

.h2-floating {
    animation: h2Floating 5s ease-in-out infinite;
}

@keyframes h2Floating {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


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

@media (max-width: 1100px) {

    .h2-category-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .h2-products {
        grid-template-columns: repeat(3, 1fr);
    }

    .h2-arrivals {
        grid-template-columns: 190px 1fr;
    }

    .h2-services {
        grid-template-columns: repeat(2, 1fr);
    }

    .h2-services-title {
        grid-column: 1 / -1;
        min-height: auto;
    }

    .h2-stories {
        grid-template-columns: repeat(3, 1fr);
    }

}


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

@media (max-width: 700px) {

    .h2-hero {
        min-height: 540px;
    }

    .h2-hero-content {
        width: 85%;
        margin-left: 7%;
    }

    .h2-hero-content h1 {
        font-size: 47px;
    }

    .h2-hero-small-image {
        width: 105px;
        height: 135px;
        right: 5%;
        bottom: 20px;
    }

    .h2-category-strip {
        grid-template-columns: 1fr 1fr;
    }

    .h2-category-item {
        min-height: 130px;
        padding: 15px;
        gap: 10px;
    }

    .h2-category-image {
        width: 65px;
        height: 80px;
    }

    .h2-category-item strong {
        font-size: 13px;
    }

    .h2-dual-feature {
        grid-template-columns: 1fr;
    }

    .h2-dual-panel {
        min-height: 350px;
    }

    .h2-dual-content {
        padding: 30px 20px;
    }

    .h2-dual-content h2 {
        font-size: 29px;
    }

    .h2-values {
        grid-template-columns: 1fr 1fr;
    }

    .h2-value {
        min-height: 145px;
        padding: 20px 15px;
    }

    .h2-arrivals {
        display: block;
        padding: 35px 5%;
    }

    .h2-arrivals-intro {
        margin-bottom: 25px;
    }

    .h2-products {
        grid-template-columns: repeat(2, 1fr);
    }

    .h2-product-image {
        height: 190px;
    }

    .h2-watch-gift {
        grid-template-columns: 1fr;
    }

    .h2-watch-banner,
    .h2-gift-banner {
        min-height: 330px;
    }

    .h2-watch-banner-content,
    .h2-gift-banner-content {
        width: 75%;
        padding: 45px 7%;
    }

    .h2-services {
        grid-template-columns: 1fr 1fr;
    }

    .h2-services-title {
        grid-column: 1 / -1;
    }

    .h2-service {
        min-height: 145px;
    }

    .h2-stories {
        grid-template-columns: 1fr;
    }

    .h2-story {
        min-height: 300px;
    }

    .h2-consultation,
    .h2-showroom {
        grid-template-columns: 1fr;
    }

    .h2-consultation {
        display: flex;
        flex-direction: column-reverse;
    }

    .h2-consultation-image {
        min-height: 260px;
    }

    .h2-consultation-content,
    .h2-showroom-content {
        padding: 35px 7%;
    }

    .h2-showroom-image {
        min-height: 260px;
    }

}


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

@media (max-width: 450px) {

    .h2-category-strip {
        grid-template-columns: 1fr;
    }

    .h2-category-item {
        border-right: 0;
        border-bottom: 1px solid #cdbda9;
    }

    .h2-values {
        grid-template-columns: 1fr;
    }

    .h2-value {
        border-right: 0;
        border-bottom: 1px solid #d9cbbb;
    }

    .h2-products {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .h2-product-image {
        height: 170px;
    }

    .h2-services {
        grid-template-columns: 1fr;
    }

    .h2-service {
        border-right: 0;
        border-bottom: 1px solid #d8cab9;
    }

    .h2-services-title {
        min-height: auto;
    }

    .h2-hero-content h1 {
        font-size: 42px;
    }

}
/* =========================================================
    SCROLL ANIMATIONS
========================================================= */
/* HOME 2 — FORCE CONTENT VISIBLE */

.h2-animate-left,
.h2-animate-right,
.h2-animate-up,
.h2-animate-scale,
.h2-animate-clip,
.h2-image-zoom,
.h2-image-move,
.h2-statement-heading,
.h2-statement-copy,
.h2-gold-image,
.h2-gold-content,
.h2-diamond-content,
.h2-diamond-image,
.h2-watch-image,
.h2-watch-content,
.h2-moment,
.h2-consultation-image,
.h2-consultation-content,
.h2-showroom-content,
.h2-showroom-image {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
}
/* HOME 2 - SHOW ALL SECTIONS */
body .h2-statement-heading,
body .h2-statement-copy,
body .h2-gold-image,
body .h2-gold-content,
body .h2-diamond-content,
body .h2-diamond-image,
body .h2-watch-image,
body .h2-watch-content,
body .h2-overlap-heading,
body .h2-overlap-stage,
body .h2-silver-image,
body .h2-silver-content,
body .h2-difference-title,
body .h2-difference-list,
body .h2-detail-story-intro,
body .h2-detail-grid,
body .h2-time-image,
body .h2-time-content,
body .h2-moments-heading,
body .h2-moment,
body .h2-consultation-image,
body .h2-consultation-content,
body .h2-showroom-content,
body .h2-showroom-image {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f5f1ea;
    color: #29231f;
}
img {
    display: block;
    width: 100%;
}
a {
    text-decoration: none;
    color: inherit;
}
button {
    font-family: inherit;
}
/* =====================================================
   HEADER
===================================================== */
.header {
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    color: #fff;
}
.header-inner {
    width: 94%;
    max-width: 1450px;
    height: 105px;
    margin: auto;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.25);
}
/* LOGO */
.logo {
    width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.logo-symbol {
    position: absolute;
    top: -18px;
    color: #d8ae6c;
    font-size: 23px;
}
.logo-name {
    font-family: Georgia, serif;
    font-size: 40px;
    letter-spacing: 7px;
    line-height: 1;
}
.logo-jewels {
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: 7px;
}
/* NAV */
.navigation {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}
.navigation > a,
.nav-item > a {
    position: relative;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .8px;
    padding: 10px 0;
}
.navigation > a::after,
.nav-item > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: #d7ad6a;
    transition: .3s;
}
.navigation > a:hover,
.nav-item > a:hover {
    color: #d7ad6a;
}
.navigation > a:hover::after,
.nav-item > a:hover::after {
    width: 100%;
}
/* DROPDOWN */
.nav-item {
    position: relative;
}
.nav-item > a span {
    margin-left: 5px;
}
.dropdown-menu {
    position: absolute;
    top: 42px;
    left: 50%;
    width: 210px;
    padding: 12px 0;
    background: rgba(31,20,13,.97);
    transform: translate(-50%, 10px);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}
.nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.dropdown-menu a {
    display: block;
    padding: 11px 20px;
    font-size: 12px;
    color: #fff;
    transition: .3s;
}
.dropdown-menu a:hover {
    color: #d7ad6a;
    padding-left: 28px;
}
/* ACTIONS */
.header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}
.icon-button,
.bag-button,
.theme-button,
.rtl-button {
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: .3s;
}
.icon-button,
.bag-button,
.theme-button {
    font-size: 23px;
}
.rtl-button {
    font-size: 12px;
    letter-spacing: 1px;
}
.icon-button:hover,
.bag-button:hover,
.theme-button:hover,
.rtl-button:hover {
    color: #d7ad6a;
}
/* BAG */
.bag-button {
    position: relative;
}
.bag-count {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d7ad6a;
    color: #24170f;
    font-size: 9px;
}
/* LOGIN */
.login-button {
    padding: 11px 20px;
    border: 1px solid #d7ad6a;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    transition: .3s;
}
.login-button:hover {
    background: #d7ad6a;
    color: #24170f;
}
/* MOBILE */
.mobile-button {
    display: none;
    margin-left: 15px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 25px;
}
/* =====================================================
   HERO
===================================================== */
.hero {
    height: 88vh;
    min-height: 680px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
/* FULL IMAGE */
.hero-image {
    position: absolute;
    inset: 0;
    background-image:
        url("../images/newhero1.png");
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
}
/* DARK BROWN EFFECT */
.hero-dark {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(31,18,11,.92) 0%,
            rgba(47,29,18,.70) 35%,
            rgba(47,29,18,.20) 70%,
            rgba(30,17,10,.25) 100%
        );
}
/* HERO CONTENT */
.hero-content {
    position: relative;
    z-index: 2;
    width: 94%;
    max-width: 1450px;
    margin: 90px auto 0;
}
.eyebrow {
    color: #dfb46d;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 22px;
}
.hero h1 {
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(58px, 6vw, 92px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -2px;
    margin-bottom: 27px;
}
.hero-description {
    max-width: 460px;
    color: rgba(255,255,255,.9);
    font-family: Georgia, serif;
    font-size: 19px;
    line-height: 1.6;
    margin-bottom: 35px;
}
.hero-link {
    display: inline-flex;
    align-items: center;
    gap: 25px;
    padding-bottom: 11px;
    border-bottom: 1px solid #d7ad6a;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    transition: .3s;
}
.hero-link span {
    font-size: 30px;
    transition: .3s;
}
.hero-link:hover {
    color: #d7ad6a;
}
.hero-link:hover span {
    transform: translateX(8px);
}
/* =====================================================
   SECTION HEADING
===================================================== */
.section-heading {
    text-align: center;
    margin-bottom: 45px;
}
.section-heading p {
    color: #bc8546;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 9px;
}
.section-heading h2 {
    font-family: Georgia, serif;
    font-size: 48px;
    font-weight: 400;
}
.section-heading span {
    display: block;
    width: 50px;
    height: 1px;
    margin: 17px auto 0;
    background: #c99a5a;
}
/* =====================================================
   COLLECTIONS
===================================================== */
.collections {
    padding: 70px 4% 95px;
    background: #f7f4ef;
}
.collection-grid {
    max-width: 1380px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 28px;
}
.collection {
    background: #eee8df;
    overflow: hidden;
}
.collection-img {
    height: 260px;
    overflow: hidden;
}
.collection-img img {
    height: 100%;
    object-fit: cover;
    transition: .7s;
}
.collection:hover img {
    transform: scale(1.06);
}
.collection-name {
    text-align: center;
    padding: 16px 10px 18px;
}
.collection-name h3 {
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1px;
}
.collection-name p {
    font-size: 10px;
    letter-spacing: 2px;
    margin-top: 7px;
}
/* =====================================================
   NEW ARRIVALS
===================================================== */
.new-arrivals {
    padding: 95px 4% 110px;
    background: #f5f1ea;
}
.product-grid {
    max-width: 1380px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 28px;
}
.product-image {
    height: 390px;
    position: relative;
    overflow: hidden;
    background: #e8dfd4;
}
.product-image img {
    height: 100%;
    object-fit: cover;
    transition: .6s;
}
.product:hover .product-image img {
    transform: scale(1.04);
}
/* WISHLIST */
.wishlist {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    font-size: 21px;
    cursor: pointer;
    transition: .3s;
}
.wishlist:hover {
    background: #c99a5a;
    color: #fff;
}
/* ADD BAG */
.add-bag {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 15px;
    height: 48px;
    border: 1px solid #fff;
    background: rgba(35,22,14,.92);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transform: translateY(70px);
    transition: .4s;
}
.product-image:hover .add-bag {
    transform: translateY(0);
}
.add-bag:hover {
    background: #c99a5a;
    border-color: #c99a5a;
}
/* PRODUCT TEXT */
.product-info {
    padding: 16px 0;
}
.product-info h3 {
    font-family: Georgia, serif;
    font-size: 19px;
    font-weight: 400;
}
.product-info p {
    margin-top: 6px;
    color: #9a7042;
    font-size: 14px;
}
/* =====================================================
   SIGNATURE
===================================================== */
.signature {
    min-height: 600px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #2b1b11;
    color: #fff;
}
.signature-photo {
    height: 600px;
}
.signature-photo img {
    height: 100%;
    object-fit: cover;
}
.signature-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px 10%;
}
.eyebrow-dark {
    color: #d7ad6a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 20px;
}
.signature-text h2 {
    font-family: Georgia, serif;
    font-size: 54px;
    font-weight: 400;
    line-height: 1.08;
    margin-bottom: 25px;
}
.signature-text > p:not(.eyebrow-dark) {
    max-width: 440px;
    color: rgba(255,255,255,.72);
    font-family: Georgia, serif;
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 30px;
}
.signature-text a,
.craft-text a {
    width: fit-content;
    color: #d7ad6a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    padding-bottom: 9px;
    border-bottom: 1px solid #d7ad6a;
}
/* =====================================================
   CRAFT
===================================================== */
.craft {
    max-width: 1380px;
    margin: auto;
    padding: 110px 4%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.craft-text h2 {
    font-family: Georgia, serif;
    font-size: 55px;
    font-weight: 400;
    line-height: 1.08;
    margin-bottom: 25px;
}
.craft-text > p:not(.eyebrow-dark) {
    max-width: 470px;
    color: #6c6259;
    font-family: Georgia, serif;
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 30px;
}
.craft-photo {
    height: 520px;
}
.craft-photo img {
    height: 100%;
    object-fit: cover;
}
/* =====================================================
   BRIDAL
===================================================== */
.bridal {
    height: 530px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}
.bridal-bg {
    position: absolute;
    inset: 0;
    background-image:
        url("../images/heroimage.png");
    background-size: cover;
    background-position: center;
}
.bridal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(35,21,13,.62);
}
.bridal-content {
    position: relative;
    z-index: 2;
}
.bridal-content p {
    color: #dfb46d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 20px;
}
.bridal-content h2 {
    font-family: Georgia, serif;
    font-size: 53px;
    font-weight: 400;
    margin-bottom: 30px;
}
.bridal-content a {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d7ad6a;
}
.bridal-content a span {
    font-size: 23px;
    margin-left: 12px;
}
/* =====================================================
   PROMISE
===================================================== */
.promise {
    padding: 100px 4%;
    background: #f7f4ef;
}
.promise-row {
    max-width: 1300px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
.promise-item {
    padding: 20px 35px;
    border-right: 1px solid rgba(42,34,27,.15);
}
.promise-item:last-child {
    border-right: none;
}
.promise-item span {
    color: #bd8847;
    font-size: 11px;
    letter-spacing: 2px;
}
.promise-item h3 {
    font-family: Georgia, serif;
    font-size: 21px;
    font-weight: 400;
    margin: 14px 0 9px;
}
.promise-item p {
    color: #746a61;
    font-size: 13px;
}
/* =====================================================
   SHOWROOM
===================================================== */
.showroom {
    height: 470px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}
.showroom-bg {
    position: absolute;
    inset: 0;
    background-image:
        url("../images/craftmanship.jpg");
    background-size: cover;
    background-position: center;
}
.showroom-overlay {
    position: absolute;
    inset: 0;
    background: rgba(30,19,12,.68);
}
.showroom-content {
    position: relative;
    z-index: 2;
}
.showroom-content p {
    color: #d7ad6a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 20px;
}
.showroom-content h2 {
    font-family: Georgia, serif;
    font-size: 52px;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 30px;
}
.showroom-content a {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d7ad6a;
}
/* =====================================================
   FOOTER
===================================================== */
.footer {
    background: #21150f;
    color: #fff;
}
.footer-main {
    max-width: 1400px;
    margin: auto;
    padding: 80px 5%;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 70px;
}
.footer-logo {
    display: flex;
    flex-direction: column;
    width: fit-content;
    font-family: Georgia, serif;
    font-size: 36px;
    letter-spacing: 6px;
}
.footer-logo small {
    font-family: Arial, sans-serif;
    font-size: 9px;
    letter-spacing: 6px;
    margin-top: 7px;
}
.footer-brand > p {
    max-width: 330px;
    color: rgba(255,255,255,.65);
    font-family: Georgia, serif;
    line-height: 1.7;
    margin: 25px 0;
}
.social-links {
    display: flex;
    gap: 20px;
}
.social-links a {
    color: rgba(255,255,255,.7);
    font-size: 12px;
    transition: .3s;
}
.social-links a:hover {
    color: #d7ad6a;
}
.footer-column {
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.footer-column h3 {
    color: #d7ad6a;
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.footer-column a {
    color: rgba(255,255,255,.68);
    font-size: 12px;
    transition: .3s;
}
.footer-column a:hover {
    color: #d7ad6a;
    transform: translateX(5px);
}
.footer-bottom {
    max-width: 1400px;
    margin: auto;
    padding: 20px 5% 25px;
    border-top: 1px solid rgba(255,255,255,.14);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255,255,255,.45);
    font-size: 10px;
}
.footer-bottom div {
    display: flex;
    gap: 25px;
}
.footer-bottom a:hover {
    color: #d7ad6a;
}
/* =====================================================
   DARK MODE
===================================================== */

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

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 1200px) {
    .navigation {
        gap: 20px;
    }
    .header-actions {
        gap: 10px;
    }
    .logo {
        width: 175px;
    }
    .logo-name {
        font-size: 32px;
    }
}
@media (max-width: 1000px) {
    .navigation {
        display: none;
    }
    .header-actions {
        margin-left: auto;
    }
    .mobile-button {
        display: block;
    }
    .collection-grid,
    .product-grid {
        grid-template-columns: repeat(2,1fr);
    }
    .signature,
    .craft {
        grid-template-columns: 1fr;
    }
    .signature-photo {
        height: 450px;
    }
    .promise-row {
        grid-template-columns: repeat(2,1fr);
    }
    .promise-item:nth-child(2) {
        border-right: none;
    }
    .footer-main {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 650px) {
    .header-inner {
        height: 85px;
    }
    .logo {
        width: 145px;
    }
    .logo-name {
        font-size: 27px;
        letter-spacing: 5px;
    }
    .logo-jewels {
        font-size: 8px;
        letter-spacing: 4px;
    }
    .theme-button,
    .rtl-button {
        display: none;
    }
    .hero {
        min-height: 680px;
    }
    .hero-content {
        width: 88%;
    }
    .hero h1 {
        font-size: 50px;
    }
    .hero-description {
        font-size: 17px;
    }
    .collections,
    .new-arrivals {
        padding: 70px 6%;
    }
    .section-heading h2 {
        font-size: 38px;
    }
    .collection-grid,
    .product-grid {
        grid-template-columns: 1fr;
    }
    .product-image {
        height: 390px;
    }
    .signature-photo {
        height: 360px;
    }
    .signature-text {
        padding: 65px 8%;
    }
    .signature-text h2,
    .craft-text h2 {
        font-size: 43px;
    }
    .craft {
        padding: 75px 7%;
    }
    .craft-photo {
        height: 400px;
    }
    .bridal {
        height: 440px;
    }
    .bridal-content {
        padding: 25px;
    }
    .bridal-content h2 {
        font-size: 39px;
    }
    .promise {
        padding: 75px 6%;
    }
    .promise-row {
        grid-template-columns: 1fr;
    }
    .promise-item {
        border-right: none;
        border-bottom: 1px solid rgba(42,34,27,.15);
        padding: 25px 5px;
    }
    .promise-item:last-child {
        border-bottom: none;
    }
    .showroom {
        height: 400px;
    }
    .showroom-content h2 {
        font-size: 40px;
    }
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 45px 25px;
        padding: 65px 7%;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 18px;
        text-align: center;
    }
}
@media (max-width: 420px) {
    .logo {
        width: 125px;
    }
    .logo-name {
        font-size: 23px;
    }
    .header-actions .icon-button,
    .header-actions .bag-button {
        display: none;
    }
    .hero h1 {
        font-size: 43px;
    }
    .footer-main {
        grid-template-columns: 1fr;
    }
    .footer-brand {
        grid-column: auto;
    }
}
/* =========================================
   DARK MODE
========================================= */
body.dark-mode {
    background: #17110d;
    color: #f5f1ea;
}
body.dark-mode .collections-section,
body.dark-mode .new-arrivals,
body.dark-mode .signature-section,
body.dark-mode .craft-section,
body.dark-mode .promise-section {
    background: #17110d;
    color: #f5f1ea;
}
body.dark-mode .section-title,
body.dark-mode .section-heading,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode p {
    color: #f5f1ea;
}
body.dark-mode .site-header.scrolled {
    background: #17110d;
}
body.dark-mode .product-name,
body.dark-mode .collection-title {
    color: #f5f1ea;
}
body.dark-mode .site-footer {
    background: #100b08;
    color: #f5f1ea;
}
/* =========================================
   RTL MODE
========================================= */
html[dir="rtl"] {
    direction: rtl;
}
html[dir="rtl"] body {
    direction: rtl;
}
html[dir="rtl"] .hero-content {
    text-align: right;
}
html[dir="rtl"] .footer-content {
    direction: rtl;
}
html[dir="rtl"] .main-nav {
    direction: rtl;
}
html[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;
}
/* Keep buttons/actions usable in RTL */
html[dir="rtl"] .header-actions {
    direction: ltr;
}
/* SCROLLED STICKY HEADER */
.header.scrolled {
    background: #21150f;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}
.header.scrolled .logo,
.header.scrolled .navigation a,
.header.scrolled .icon-button,
.header.scrolled .bag-button,
.header.scrolled .theme-button,
.header.scrolled .rtl-button {
    color: #ffffff;
}
/* =========================================
   PREMIUM DROPDOWNS
========================================= */
.dropdown {
    position: relative;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: #21150f;
    padding: 12px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    z-index: 9999;
}
.dropdown-menu a {
    display: block;
    padding: 12px 20px;
    color: #ffffff !important;
    font-size: 12px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}
.dropdown-menu a:hover {
    color: #d7ad6a !important;
    padding-left: 26px;
}
/* Desktop hover */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* Arrow */
.dropdown > a span {
    display: inline-block;
    margin-left: 5px;
    font-size: 14px;
    transition: transform 0.3s ease;
}
.dropdown:hover > a span {
    transform: rotate(180deg);
}
/* =========================================
   BAG COUNTER ANIMATION
========================================= */
.bag-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.bag-count.bag-bounce {
    animation: bagBounce 0.5s ease;
}
@keyframes bagBounce {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.5);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}
/* Added button */
.add-bag.added {
    letter-spacing: 2px;
}
/* =========================================
   HOME 2
========================================= */
.home2-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.home2-hero-image {
    position: absolute;
    inset: 0;
    background-image: url("../images/home2hero.png");
    background-size: cover;
    background-position: center;
    transform: scale(1.03);
}
.home2-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(28, 17, 10, .88),
        rgba(28, 17, 10, .42),
        rgba(28, 17, 10, .12)
    );
}
.home2-hero-content {
    position: relative;
    z-index: 2;
    max-width: 620px;
    margin-left: 8%;
    color: #fff;
    animation: heroContentReveal 1.3s ease forwards;
}
.home2-eyebrow,
.home2-eyebrow-dark {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.home2-eyebrow {
    color: #d7ad6a;
    margin-bottom: 22px;
}
.home2-hero h1 {
    font-family: Georgia, serif;
    font-size: clamp(55px, 7vw, 105px);
    line-height: .95;
    font-weight: 400;
    margin: 0 0 30px;
}
.home2-hero-content > p:not(.home2-eyebrow) {
    max-width: 430px;
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255,255,255,.85);
    margin-bottom: 35px;
}
.home2-button {
    display: inline-flex;
    gap: 25px;
    align-items: center;
    color: #fff;
    border-bottom: 1px solid #d7ad6a;
    padding-bottom: 10px;
    letter-spacing: 2px;
    font-size: 11px;
    transition: .35s ease;
}
.home2-button:hover {
    color: #d7ad6a;
    gap: 35px;
}
.home2-hero-number {
    position: absolute;
    right: 6%;
    bottom: 40px;
    color: #fff;
    font-size: 11px;
    letter-spacing: 3px;
    z-index: 2;
}
/* INTRO */
.home2-intro {
    display: grid;
    grid-template-columns: 15% 50% 35%;
    align-items: center;
    padding: 110px 8%;
    background: #f5f1ea;
}
.home2-intro-small {
    color: #b8894b;
    font-size: 11px;
    letter-spacing: 4px;
}
.home2-intro-main p {
    color: #b8894b;
    font-size: 11px;
    letter-spacing: 3px;
}
.home2-intro-main h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: clamp(38px, 4vw, 65px);
    line-height: 1.05;
    margin: 15px 0;
}
.home2-intro-text {
    max-width: 360px;
    line-height: 1.8;
    color: #66594f;
}
.home2-intro-text a,
.home2-feature-content a {
    display: inline-block;
    margin-top: 20px;
    color: #21150f;
    font-size: 11px;
    letter-spacing: 2px;
    border-bottom: 1px solid #b8894b;
    padding-bottom: 8px;
}
/* FEATURE SECTIONS */
.home2-feature {
    display: grid;
    grid-template-columns: 58% 42%;
    min-height: 650px;
}
.home2-feature-reverse {
    grid-template-columns: 42% 58%;
}
.home2-feature-image {
    overflow: hidden;
}
.home2-feature-image img {
    width: 100%;
    height: 100%;
    min-height: 650px;
    object-fit: cover;
    transition: transform 1s ease;
}
.home2-feature:hover .home2-feature-image img {
    transform: scale(1.04);
}
.home2-feature-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10%;
    background: #2b1b11;
    color: #fff;
}
.home2-feature-reverse .home2-feature-content {
    background: #f5f1ea;
    color: #21150f;
}
.home2-eyebrow-dark {
    color: #d7ad6a;
    margin-bottom: 20px;
}
.home2-feature-content h2 {
    font-family: Georgia, serif;
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 400;
    line-height: 1;
    margin: 0 0 25px;
}
.home2-feature-content > p:not(.home2-eyebrow-dark) {
    max-width: 400px;
    line-height: 1.8;
    opacity: .8;
}
.home2-feature-content a {
    color: inherit;
    width: fit-content;
}
/* STATEMENT */
.home2-statement {
    position: relative;
    min-height: 620px;
    background-image: url("../images/image.png");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.home2-statement-overlay,
.home2-bridal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(25,15,10,.55);
}
.home2-statement-content {
    position: relative;
    z-index: 2;
    color: #fff;
}
.home2-statement-content p,
.home2-bridal-content p {
    color: #d7ad6a;
    font-size: 11px;
    letter-spacing: 3px;
}
.home2-statement-content h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: clamp(48px, 6vw, 85px);
    line-height: .95;
    margin: 20px 0 35px;
}
.home2-statement-content a,
.home2-bridal-content a {
    color: #fff;
    font-size: 11px;
    letter-spacing: 2px;
    border-bottom: 1px solid #d7ad6a;
    padding-bottom: 10px;
}
/* COLLECTIONS */
.home2-collections {
    padding: 110px 4%;
    background: #f5f1ea;
}
.home2-collection-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 60px;
}
.home2-collection {
    position: relative;
    height: 520px;
    overflow: hidden;
    color: #fff;
}
.home2-collection img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}
.home2-collection:hover img {
    transform: scale(1.07);
}
.home2-collection::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        transparent 35%,
        rgba(20,12,8,.75)
    );
}
.home2-collection > div {
    position: absolute;
    z-index: 2;
    bottom: 30px;
    left: 28px;
}
.home2-collection span {
    font-size: 10px;
    color: #d7ad6a;
}
.home2-collection h3 {
    font-family: Georgia, serif;
    font-size: 34px;
    font-weight: 400;
    margin: 8px 0;
}
.home2-collection p {
    font-size: 10px;
    letter-spacing: 2px;
}
/* BRIDAL */
.home2-bridal {
    position: relative;
    min-height: 650px;
    background-image: url("../images/backhome2.png");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.home2-bridal-content {
    position: relative;
    z-index: 2;
    color: #fff;
}
.home2-bridal-content h2 {
    font-family: Georgia, serif;
    font-size: clamp(50px, 6vw, 85px);
    font-weight: 400;
    margin: 15px 0;
}
.home2-bridal-content span {
    display: block;
    margin-bottom: 35px;
}
/* VISIT */
.home2-visit {
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #e9dfd2;
}
.home2-visit p {
    color: #b8894b;
    letter-spacing: 3px;
    font-size: 11px;
}
.home2-visit h2 {
    font-family: Georgia, serif;
    font-size: clamp(42px, 5vw, 70px);
    font-weight: 400;
    line-height: 1;
    margin: 20px 0 30px;
}
.home2-visit a {
    color: #21150f;
    font-size: 11px;
    letter-spacing: 2px;
    border-bottom: 1px solid #b8894b;
    padding-bottom: 9px;
}
/* =========================================
   HOME 2 MOBILE
========================================= */
@media (max-width: 900px) {
    .home2-hero {
        min-height: 760px;
    }
    .home2-hero-content {
        margin: 0 7%;
    }
    .home2-hero h1 {
        font-size: 58px;
    }
    .home2-intro {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 80px 7%;
    }
    .home2-feature,
    .home2-feature-reverse {
        grid-template-columns: 1fr;
    }
    .home2-feature-reverse .home2-feature-content {
        order: 2;
    }
    .home2-feature-image img {
        min-height: 500px;
    }
    .home2-collection-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .home2-collection {
        height: 450px;
    }
}
@media (max-width: 600px) {
    .home2-hero {
        min-height: 700px;
    }
    .home2-hero h1 {
        font-size: 48px;
    }
    .home2-hero-content > p:not(.home2-eyebrow) {
        font-size: 14px;
    }
    .home2-feature-image img {
        min-height: 400px;
    }
    .home2-feature-content {
        padding: 70px 8%;
    }
    .home2-collection-grid {
        grid-template-columns: 1fr;
    }
    .home2-collection {
        height: 500px;
    }
    .home2-statement,
    .home2-bridal {
        min-height: 500px;
    }
}
/* =====================================================
   ZIVARA — GLOBAL DARK MODE
   Works across all pages
===================================================== */
body.dark-mode {
    background: #17110d;
    color: #f5f1ea;
}
/* ---------- GENERAL SECTIONS ---------- */
body.dark-mode .collections,
body.dark-mode .new-arrivals,
body.dark-mode .promise,
body.dark-mode .home2-intro,
body.dark-mode .home2-collections {
    background: #17110d;
    color: #f5f1ea;
}
/* ---------- HOME 2 ---------- */
body.dark-mode .home2-feature-reverse .home2-feature-content {
    background: #21150f;
    color: #f5f1ea;
}
body.dark-mode .home2-feature-content {
    background: #21150f;
    color: #f5f1ea;
}
body.dark-mode .home2-visit {
    background: #21150f;
    color: #f5f1ea;
}
/* ---------- HEADINGS ---------- */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode p {
    color: inherit;
}
/* ---------- HOME 2 TEXT ---------- */
body.dark-mode .home2-intro-main h2,
body.dark-mode .home2-intro-text,
body.dark-mode .home2-feature-content h2,
body.dark-mode .home2-feature-content p,
body.dark-mode .home2-visit h2 {
    color: #f5f1ea;
}
body.dark-mode .home2-intro-text {
    color: #cfc5bb;
}
/* ---------- COLLECTION TEXT ---------- */
body.dark-mode .collection-name h3,
body.dark-mode .collection-name p,
body.dark-mode .product-info h3,
body.dark-mode .product-info p {
    color: #f5f1ea;
}
/* ---------- SECTION HEADINGS ---------- */
body.dark-mode .section-heading h2 {
    color: #f5f1ea;
}
body.dark-mode .section-heading p {
    color: #d7ad6a;
}
/* ---------- SIGNATURE / CRAFT ---------- */
body.dark-mode .signature-text,
body.dark-mode .craft-text {
    background: #17110d;
    color: #f5f1ea;
}
body.dark-mode .signature-text h2,
body.dark-mode .craft-text h2,
body.dark-mode .signature-text p,
body.dark-mode .craft-text p {
    color: #f5f1ea;
}
/* ---------- HEADER ---------- */
body.dark-mode .header.scrolled {
    background: #17110d;
}
/* ---------- FOOTER ---------- */
body.dark-mode .footer {
    background: #0f0a07;
    color: #f5f1ea;
}
body.dark-mode .footer p,
body.dark-mode .footer a,
body.dark-mode .footer-column h3 {
    color: #f5f1ea;
}
body.dark-mode .footer a:hover {
    color: #d7ad6a;
}
/* ---------- DARK MODE BUTTON ---------- */
body.dark-mode .theme-button {
    color: #d7ad6a;
}
/* ---------- LINKS ---------- */
body.dark-mode .home2-intro-text a,
body.dark-mode .home2-feature-content a,
body.dark-mode .home2-visit a {
    color: #f5f1ea;
}
/* ---------- TRANSITION ---------- */
body,
section,
.home2-feature-content,
.home2-intro,
.home2-collections,
.home2-visit,
.footer,
.signature-text,
.craft-text {
    transition:
        background-color 0.4s ease,
        color 0.4s ease;
}

/* =========================================================
   404 ERROR PAGE
   ========================================================= */
.error-page {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 90px;
    padding: 80px 6%;
    overflow: hidden;
    background: #f7f3ed;
    color: #21150f;
}
/* =========================================================
   DECORATIVE BACKGROUND
   ========================================================= */
.error-circle {
    position: absolute;
    border-radius: 50%;
    border:
        1px solid rgba(180,140,90,.15);
    pointer-events: none;
}
.error-circle-one {
    width: 380px;
    height: 380px;
    left: -190px;
    top: 80px;
    animation:
        errorCircleOne
        12s ease-in-out
        infinite alternate;
}
.error-circle-two {
    width: 230px;
    height: 230px;
    right: -70px;
    bottom: 50px;
    animation:
        errorCircleTwo
        9s ease-in-out
        infinite alternate;
}
@keyframes errorCircleOne {
    from {
        transform:
            translate(0,0)
            rotate(0deg);
    }
    to {
        transform:
            translate(70px,60px)
            rotate(30deg);
    }
}
@keyframes errorCircleTwo {
    from {
        transform:
            translate(0,0);
    }
    to {
        transform:
            translate(-60px,-40px);
    }
}
/* =========================================================
   IMAGE
   ========================================================= */
.error-image {
    position: relative;
    z-index: 2;
    width: 380px;
    height: 470px;
    overflow: hidden;
    animation:
        errorImageReveal
        1.3s
        cubic-bezier(.16,1,.3,1)
        both;
}
@keyframes errorImageReveal {
    from {
        opacity: 0;
        transform:
            translateX(-80px)
            scale(.88);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform:
            translateX(0)
            scale(1);
        filter: blur(0);
    }
}
.error-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            transparent 55%,
            rgba(215,173,106,.15)
        );
    pointer-events: none;
}
.error-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 1s ease;
}
.error-image:hover img {
    transform:
        scale(1.06);
}
/* =========================================================
   CONTENT
   ========================================================= */
.error-content {
    position: relative;
    z-index: 3;
    max-width: 550px;
    animation:
        errorContentReveal
        1.3s
        .15s
        cubic-bezier(.16,1,.3,1)
        both;
}
@keyframes errorContentReveal {
    from {
        opacity: 0;
        transform:
            translateX(80px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform:
            translateX(0);
        filter: blur(0);
    }
}
.error-label {
    display: block;
    margin-bottom: 10px;
    color: #b08b54;
    font-size: 10px;
    letter-spacing: 3px;
}
.error-number {
    margin-bottom: 5px;
    font-family: Georgia, serif;
    color: #d7ad6a;
    font-size:
        clamp(90px,13vw,150px);
    font-weight: 400;
    line-height: .8;
    letter-spacing: -8px;
}
.error-content h1 {
    max-width: 500px;
    margin: 25px 0 20px;
    font-family: Georgia, serif;
    font-size:
        clamp(36px,4vw,54px);
    font-weight: 400;
    line-height: 1.05;
}
.error-content p {
    max-width: 480px;
    margin: 0;
    color: #6b6159;
    font-size: 14px;
    line-height: 1.85;
}
/* =========================================================
   BUTTONS
   ========================================================= */
.error-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}
.error-primary,
.error-secondary {
    display: inline-block;
    padding: 14px 22px;
    text-decoration: none;
    font-size: 10px;
    letter-spacing: 1.8px;
    transition:
        all .3s ease;
}
.error-primary {
    background: #21150f;
    border:
        1px solid #21150f;
    color: #fff;
}
.error-primary:hover {
    background: #d7ad6a;
    border-color: #d7ad6a;
    color: #21150f;
    transform:
        translateY(-3px);
}
.error-secondary {
    border:
        1px solid #b08b54;
    color: #21150f;
}
.error-secondary:hover {
    background: #d7ad6a;
    border-color: #d7ad6a;
    transform:
        translateY(-3px);
}
/* =========================================================
   DARK MODE
   ========================================================= */
body.dark-mode .error-page {
    background: #17110d;
    color: #f5f1ea;
}
body.dark-mode .error-content p {
    color: #cfc5bb;
}
body.dark-mode .error-secondary {
    color: #f5f1ea;
    border-color: #b08b54;
}
body.dark-mode .error-secondary:hover {
    color: #21150f;
}
/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
    .error-page {
        min-height: auto;
        padding:
            90px 7%;
        flex-direction: column;
        gap: 45px;
        text-align: center;
    }
    .error-image {
        width: 330px;
        height: 390px;
        order: 2;
    }
    .error-content {
        order: 1;
    }
    .error-content p {
        margin-left: auto;
        margin-right: auto;
    }
    .error-buttons {
        justify-content: center;
    }
}
@media (max-width: 600px) {
    .error-page {
        padding:
            70px 6%;
        gap: 35px;
    }
    .error-number {
        font-size: 100px;
    }
    .error-content h1 {
        font-size: 36px;
    }
    .error-image {
        width: 100%;
        max-width: 320px;
        height: 350px;
    }
    .error-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .error-primary,
    .error-secondary {
        text-align: center;
    }
}
/* =========================================================
   COMING SOON PAGE
   ========================================================= */
.coming-page {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 90px;
    padding: 80px 6%;
    overflow: hidden;
    background: #f7f3ed;
    color: #21150f;
}
/* =========================================================
   BACKGROUND ORBITS
   ========================================================= */
.coming-orbit {
    position: absolute;
    border-radius: 50%;
    border:
        1px solid rgba(180,140,90,.14);
    pointer-events: none;
}
.coming-orbit-one {
    width: 520px;
    height: 520px;
    left: -280px;
    top: 40px;
    animation:
        comingOrbitOne
        14s
        ease-in-out
        infinite
        alternate;
}
.coming-orbit-two {
    width: 300px;
    height: 300px;
    right: -120px;
    bottom: -60px;
    animation:
        comingOrbitTwo
        10s
        ease-in-out
        infinite
        alternate;
}
@keyframes comingOrbitOne {
    from {
        transform:
            translate(0,0)
            rotate(0deg);
    }
    to {
        transform:
            translate(90px,50px)
            rotate(35deg);
    }
}
@keyframes comingOrbitTwo {
    from {
        transform:
            translate(0,0)
            rotate(0deg);
    }
    to {
        transform:
            translate(-70px,-50px)
            rotate(-25deg);
    }
}
/* =========================================================
   MOVING LIGHT
   ========================================================= */
.coming-light {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background:
        rgba(215,173,106,.10);
    filter: blur(45px);
    right: 25%;
    top: 15%;
    pointer-events: none;
    animation:
        comingLightMove
        9s
        ease-in-out
        infinite
        alternate;
}
@keyframes comingLightMove {
    from {
        transform:
            translate(0,0);
    }
    to {
        transform:
            translate(-100px,100px);
    }
}
/* =========================================================
   IMAGE
   ========================================================= */
.coming-image {
    position: relative;
    z-index: 2;
    width: 390px;
    height: 470px;
    overflow: hidden;
}
.coming-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            transparent 50%,
            rgba(215,173,106,.14)
        );
    pointer-events: none;
}
.coming-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 1s ease;
}
.coming-image:hover img {
    transform:
        scale(1.07);
}
/* =========================================================
   CONTENT
   ========================================================= */
.coming-content {
    position: relative;
    z-index: 3;
    max-width: 560px;
}
.coming-label {
    display: block;
    margin-bottom: 18px;
    color: #b08b54;
    font-size: 10px;
    letter-spacing: 3px;
}
.coming-content h1 {
    margin: 0 0 24px;
    font-family: Georgia, serif;
    font-size:
        clamp(48px,6vw,76px);
    font-weight: 400;
    line-height: .98;
}
.coming-content p {
    max-width: 480px;
    margin: 0;
    color: #6b6159;
    font-size: 14px;
    line-height: 1.9;
}
.coming-line {
    width: 80px;
    height: 1px;
    margin: 28px 0 18px;
    background: #b08b54;
}
.coming-small-text {
    color: #9a8265;
    font-size: 9px;
    letter-spacing: 2.5px;
}
/* =========================================================
   BUTTONS
   ========================================================= */
.coming-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}
.coming-primary,
.coming-secondary {
    display: inline-block;
    padding: 14px 22px;
    text-decoration: none;
    font-size: 10px;
    letter-spacing: 1.8px;
    transition:
        all .3s ease;
}
.coming-primary {
    background: #21150f;
    border:
        1px solid #21150f;
    color: #fff;
}
.coming-primary:hover {
    background: #d7ad6a;
    border-color: #d7ad6a;
    color: #21150f;
    transform:
        translateY(-3px);
}
.coming-secondary {
    border:
        1px solid #b08b54;
    color: #21150f;
}
.coming-secondary:hover {
    background: #d7ad6a;
    border-color: #d7ad6a;
    transform:
        translateY(-3px);
}
/* =========================================================
   SCROLL ANIMATION
   ========================================================= */
.coming-slide-left,
.coming-slide-right {
    opacity: 0;
    filter: blur(7px);
    transition:
        opacity 1s ease,
        transform 1.15s cubic-bezier(.16,1,.3,1),
        filter 1s ease;
}
.coming-slide-left {
    transform:
        translateX(-90px)
        scale(.92);
}
.coming-slide-right {
    transform:
        translateX(90px)
        scale(.94);
}
.coming-slide-left.coming-show,
.coming-slide-right.coming-show {
    opacity: 1;
    transform:
        translateX(0)
        scale(1);
    filter: blur(0);
}
/* =========================================================
   DARK MODE
   ========================================================= */
body.dark-mode .coming-page {
    background: #17110d;
    color: #f5f1ea;
}
body.dark-mode .coming-content p {
    color: #cfc5bb;
}
body.dark-mode .coming-secondary {
    color: #f5f1ea;
    border-color: #b08b54;
}
body.dark-mode .coming-secondary:hover {
    color: #21150f;
}
/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
    .coming-page {
        min-height: auto;
        padding:
            90px 7%;
        flex-direction: column;
        gap: 50px;
        text-align: center;
    }
    .coming-content {
        order: 1;
    }
    .coming-image {
        order: 2;
        width: 340px;
        height: 400px;
    }
    .coming-content p {
        margin-left: auto;
        margin-right: auto;
    }
    .coming-line {
        margin-left: auto;
        margin-right: auto;
    }
    .coming-buttons {
        justify-content: center;
    }
}
@media (max-width: 600px) {
    .coming-page {
        padding:
            70px 6%;
        gap: 35px;
    }
    .coming-content h1 {
        font-size: 48px;
    }
    .coming-image {
        width: 100%;
        max-width: 320px;
        height: 350px;
    }
    .coming-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .coming-primary,
    .coming-secondary {
        text-align: center;
    }
}

/* =========================================================
   MOBILE HEADER ACTIONS FIX
========================================================= */
@media (max-width: 900px) {
    .header-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    /* Keep logo visible */
    .logo {
        display: flex !important;
        flex-shrink: 0 !important;
    }
    /* SHOW ALL HEADER ACTIONS */
    .header-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        margin-left: auto !important;
    }
    .header-actions button,
    .header-actions a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* LIKE */
    .icon-button {
        display: flex !important;
        font-size: 17px !important;
        padding: 4px !important;
    }
    /* CART */
    .bag-button {
        display: flex !important;
        position: relative !important;
        font-size: 16px !important;
        padding: 4px !important;
    }
    /* DARK MODE */
    .theme-button {
        display: flex !important;
        font-size: 17px !important;
        padding: 4px !important;
    }
    /* RTL */
    .rtl-button {
        display: flex !important;
        font-size: 8px !important;
        padding: 5px 6px !important;
    }
    /* LOGIN */
    .login-button {
        display: flex !important;
        font-size: 8px !important;
        padding: 5px 3px !important;
    }
    /* HAMBURGER */
    .mobile-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 7px !important;
        font-size: 20px !important;
        padding: 3px !important;
    }
}
/* SMALL MOBILE */
@media (max-width: 600px) {
    .header-inner {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .logo-name {
        font-size: 16px !important;
        letter-spacing: 2px !important;
    }
    .logo-jewels {
        font-size: 6px !important;
        letter-spacing: 1.5px !important;
    }
    .logo-symbol {
        font-size: 18px !important;
    }
    .header-actions {
        gap: 3px !important;
    }
    .icon-button,
    .bag-button,
    .theme-button {
        font-size: 15px !important;
        padding: 3px !important;
    }
    .rtl-button {
        font-size: 7px !important;
        padding: 4px 5px !important;
    }
    .login-button {
        font-size: 7px !important;
        letter-spacing: 0.5px !important;
    }
    .mobile-button {
        font-size: 18px !important;
        margin-left: 3px !important;
    }
}
/* =========================================================
   ACTIVE NAVIGATION
========================================================= */
.navigation > a.active,
.navigation > .nav-item > a.active {
    color: #d7ad6a !important;
    position: relative;
}
/* GOLD UNDERLINE */
.navigation > a.active::after,
.navigation > .nav-item > a.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 100%;
    height: 1px;
    background: #d7ad6a;
    transform: scaleX(1);
    transform-origin: center;
}
/* DROPDOWN PARENT ACTIVE */
.navigation > .nav-item.active-parent > a {
    color: #d7ad6a !important;
}
/* DROPDOWN ACTIVE ITEM */
.dropdown-menu a.active {
    color: #d7ad6a !important;
    padding-left: 26px !important;
}
/* SMALL GOLD MARK */
.dropdown-menu a.active::before {
    content: "→";
    margin-right: 7px;
    color: #d7ad6a;
}
/* HOVER */
.navigation > a,
.navigation > .nav-item > a {
    transition: color 0.3s ease;
}
.navigation > a:hover,
.navigation > .nav-item > a:hover {
    color: #d7ad6a !important;
}
/* MOBILE */
@media (max-width: 900px) {
    .navigation > a.active::after,
    .navigation > .nav-item > a.active::after {
        display: none;
    }
    .navigation > a.active,
    .navigation > .nav-item > a.active {
        background: rgba(215, 173, 106, 0.12);
        color: #d7ad6a !important;
    }
    .dropdown-menu a.active {
        background: rgba(215, 173, 106, 0.08);
    }
}
/* =========================================================
   HOME 1 - SIGNATURE JEWELLERY
========================================================= */
.home-signature {
    min-height: 500px;
    padding: 80px 10%;
    background: #f7f3ed;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 80px;
    position: relative;
    overflow: hidden;
}
/* IMAGE */
.home-signature-image {
    width: 100%;
    height: 430px;
    overflow: hidden;
    position: relative;
}
.home-signature-image::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(177, 138, 81, 0.18);
    border-radius: 50%;
    right: -70px;
    top: -60px;
    animation: homeSignatureCircle 8s ease-in-out infinite alternate;
}
@keyframes homeSignatureCircle {
    from {
        transform: translate(0, 0) rotate(0);
    }
    to {
        transform: translate(-25px, 30px) rotate(12deg);
    }
}
.home-signature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}
.home-signature-image:hover img {
    transform: scale(1.06);
}
/* CONTENT */
.home-signature-content {
    max-width: 500px;
}
.home-section-label {
    display: block;
    margin-bottom: 14px;
    color: #b18a51;
    font-size: 10px;
    letter-spacing: 2.5px;
    font-weight: 600;
}
.home-signature-content h2 {
    margin: 0 0 20px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 46px;
    line-height: 1.08;
    font-weight: 400;
    color: #21150f;
}
.home-signature-content p {
    max-width: 440px;
    margin: 0 0 25px;
    color: #74685e;
    font-size: 13px;
    line-height: 1.9;
}
.home-signature-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #21150f;
    text-decoration: none;
    font-size: 10px;
    letter-spacing: 1.5px;
    border-bottom: 1px solid #b18a51;
    padding-bottom: 5px;
    transition: all 0.35s ease;
}
.home-signature-link span {
    transition: transform 0.35s ease;
}
.home-signature-link:hover {
    color: #b18a51;
}
.home-signature-link:hover span {
    transform: translateX(6px);
}
/* =========================================================
   HOME 1 - WHY ZIVARA
========================================================= */
.home-why {
    padding: 75px 8% 80px;
    background: #21150f;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.home-why::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(215, 173, 106, 0.12);
    border-radius: 50%;
    right: -170px;
    top: -180px;
    animation: homeWhyOrbit 12s ease-in-out infinite alternate;
}
.home-why::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    background: rgba(215, 173, 106, 0.08);
    border-radius: 50%;
    filter: blur(35px);
    left: -50px;
    bottom: -70px;
    animation: homeWhyLight 9s ease-in-out infinite alternate;
}
@keyframes homeWhyOrbit {
    from {
        transform: translate(0, 0) rotate(0);
    }
    to {
        transform: translate(-30px, 25px) rotate(10deg);
    }
}
@keyframes homeWhyLight {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(70px, -30px);
    }
}
/* HEADING */
.home-why-heading {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 50px;
}
.home-why-heading .home-section-label {
    color: #d7ad6a;
}
.home-why-heading h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    line-height: 1.1;
    font-weight: 400;
    color: #fff;
}
/* GRID */
.home-why-grid {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    z-index: 2;
}
.home-why-item {
    padding: 10px 28px 10px;
    border-left: 1px solid rgba(255,255,255,0.14);
}
.home-why-item:first-child {
    border-left: 0;
}
.home-why-number {
    display: block;
    margin-bottom: 25px;
    color: #d7ad6a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
}
.home-why-item h3 {
    margin: 0 0 13px;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.25;
}
.home-why-item p {
    margin: 0;
    color: rgba(255,255,255,0.68);
    font-size: 11px;
    line-height: 1.8;
}
/* =========================================================
   HOME 1 SCROLL ANIMATIONS
========================================================= */
.home1-reveal-left,
.home1-reveal-right,
.home1-reveal-bottom {
    opacity: 0;
    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(.16,1,.3,1);
}
.home1-reveal-left {
    transform: translateX(-70px);
}
.home1-reveal-right {
    transform: translateX(70px);
}
.home1-reveal-bottom {
    transform: translateY(60px);
}
.home1-reveal-left.home1-show,
.home1-reveal-right.home1-show,
.home1-reveal-bottom.home1-show {
    opacity: 1;
    transform: translate(0);
}
/* =========================================================
   HOME 1 DARK MODE
========================================================= */
body.dark-mode .home-signature {
    background: #17110d;
}
body.dark-mode .home-signature-content h2,
body.dark-mode .home-signature-content p {
    color: #f5f1ea;
}
body.dark-mode .home-signature-link {
    color: #f5f1ea;
}
body.dark-mode .home-why {
    background: #0f0a07;
}
/* =========================================================
   HOME 1 RESPONSIVE
========================================================= */
@media (max-width: 900px) {
    .home-signature {
        min-height: auto;
        padding: 55px 6%;
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .home-signature-image {
        height: 320px;
    }
    .home-signature-content h2 {
        font-size: 38px;
    }
    .home-why {
        padding: 60px 6%;
    }
    .home-why-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 35px;
    }
    .home-why-item:nth-child(3) {
        border-left: 0;
    }
}
@media (max-width: 600px) {
    .home-signature {
        padding: 45px 20px;
        gap: 28px;
    }
    .home-signature-image {
        height: 270px;
    }
    .home-signature-content h2 {
        font-size: 32px;
    }
    .home-signature-content p {
        font-size: 12px;
    }
    .home-why {
        padding: 50px 20px;
    }
    .home-why-heading {
        margin-bottom: 35px;
    }
    .home-why-heading h2 {
        font-size: 32px;
    }
    .home-why-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .home-why-item,
    .home-why-item:nth-child(3) {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,0.14);
        padding: 25px 0;
    }
    .home-why-item:first-child {
        border-top: 0;
    }
}
/* LOGIN - desktop */
.mobile-login {
    display: none !important;
}
.header-actions .login-button {
    display: flex !important;
}
/* MOBILE ONLY */
@media (max-width: 900px) {
    /* Logo on the left */
    .header-inner {
        display: flex;
        align-items: center;
    }
    .logo {
        margin-right: auto !important;
        text-align: left !important;
    }
    /* Desktop LOGIN hidden only on mobile */
    .header-actions .login-button {
        display: none !important;
    }
    /* Hamburger on right */
    .mobile-button {
        display: flex !important;
        margin-left: 8px !important;
    }
    /* LOGIN inside hamburger dropdown */
    .navigation .mobile-login {
        display: none !important;
    }
    .navigation.active .mobile-login {
        display: flex !important;
        width: 100%;
        box-sizing: border-box;
        padding: 8px 14px !important;
        margin-top: 3px;
        border-top: 1px solid rgba(215, 173, 106, 0.35);
        color: #d7ad6a !important;
        font-size: 11px !important;
        letter-spacing: 1px;
    }
}
/* =====================================================
   ZIVARA MOBILE HEADER — FINAL
===================================================== */
.mobile-login {
    display: none !important;
}
/* DESKTOP */
@media (min-width: 901px) {
    .header-actions .login-button {
        display: flex !important;
    }
    .mobile-login {
        display: none !important;
    }
}
/* MOBILE */
@media (max-width: 900px) {
    /* HEADER */
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
    }
    .header-inner {
        width: 100% !important;
        height: 68px !important;
        padding: 0 12px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    /* =========================
       LOGO — LEFT
    ========================= */
    .header .logo {
        position: relative !important;
        width: 125px !important;
        min-width: 125px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        text-align: left !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
    }
    .header .logo-symbol {
        position: absolute !important;
        top: -7px !important;
        left: 32px !important;
        font-size: 17px !important;
    }
    .header .logo-name {
        font-size: 17px !important;
        letter-spacing: 2px !important;
        line-height: 1 !important;
    }
    .header .logo-jewels {
        margin-top: 5px !important;
        margin-left: 38px !important;
        font-size: 6px !important;
        letter-spacing: 1.5px !important;
    }
    /* =========================
       DESKTOP NAV HIDDEN
    ========================= */
    .navigation {
        display: none !important;
    }
    /* =========================
       HEADER ACTIONS
    ========================= */
    .header-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 3px !important;
        margin-left: auto !important;
    }
    .header-actions .icon-button,
    .header-actions .bag-button,
    .header-actions .theme-button,
    .header-actions .rtl-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        background: transparent !important;
        padding: 3px !important;
    }
    .header-actions .icon-button,
    .header-actions .bag-button,
    .header-actions .theme-button {
        font-size: 15px !important;
    }
    .header-actions .rtl-button {
        font-size: 7px !important;
        padding: 4px 5px !important;
    }
    /* DESKTOP LOGIN HIDDEN ON MOBILE */
    .header-actions .login-button {
        display: none !important;
    }
    /* =========================
       HAMBURGER
    ========================= */
    .mobile-button {
        display: flex !important;
        width: 30px !important;
        height: 30px !important;
        margin-left: 5px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        align-items: center !important;
        justify-content: center !important;
        color: #fff !important;
        font-size: 20px !important;
        position: relative !important;
        z-index: 100001 !important;
    }
    /* =========================
       SMALL HAMBURGER MENU
    ========================= */
    .navigation.active {
        display: flex !important;
        position: fixed !important;
        top: 68px !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
        width: 175px !important;
        max-width: 175px !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        background: #21150f !important;
        box-shadow: 0 15px 35px rgba(0,0,0,.35) !important;
        z-index: 100000 !important;
        overflow: visible !important;
    }
    /* =========================
       MAIN MENU ITEMS
    ========================= */
    .navigation.active > a,
    .navigation.active > .nav-item > a {
        width: 100% !important;
        height: 43px !important;
        min-height: 43px !important;
        padding: 0 14px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        color: #fff !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        letter-spacing: 1.4px !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }
    /* =========================
       SUB MENUS
    ========================= */
    .navigation.active .dropdown-menu {
        position: static !important;
        display: none !important;
        width: 100% !important;
        min-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #170f0b !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
    }
    .navigation.active .dropdown.active .dropdown-menu {
        display: block !important;
    }
    .navigation.active .dropdown-menu a {
        width: 100% !important;
        height: 32px !important;
        padding: 0 14px 0 24px !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        color: #fff !important;
        font-size: 9px !important;
        letter-spacing: 1px !important;
        border-bottom: 1px solid rgba(255,255,255,.05) !important;
    }
    /* =========================
       MOBILE LOGIN
    ========================= */
    .navigation .mobile-login {
        display: none !important;
    }
    .navigation.active .mobile-login {
        display: flex !important;
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: flex-start !important;
        color: #d7ad6a !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        letter-spacing: 1.4px !important;
        border-top: 1px solid rgba(215,173,106,.35) !important;
    }
}
/* SMALL PHONES */
@media (max-width: 420px) {
    .header .logo {
        width: 115px !important;
        min-width: 115px !important;
    }
    .header .logo-name {
        font-size: 16px !important;
    }
    .header-actions {
        gap: 1px !important;
    }
    .mobile-button {
        margin-left: 3px !important;
    }
}
/* =========================================================
   FINAL MOBILE HEADER SPACING FIX
========================================================= */
@media (max-width: 900px) {
    /* =========================
       LOGO
    ========================= */
    .header .logo {
        width: 110px !important;
        min-width: 110px !important;
        height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        position: relative !important;
        transform: none !important;
    }
    /* Diamond ABOVE ZIVARA - NOT OVER IT */
    .header .logo-symbol {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 2px 0 !important;
        padding: 0 !important;
        text-align: center !important;
        font-size: 15px !important;
        line-height: 12px !important;
        transform: none !important;
    }
    .header .logo-name {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 16px !important;
        line-height: 18px !important;
        letter-spacing: 2px !important;
    }
    .header .logo-jewels {
        display: block !important;
        width: 100% !important;
        margin: 2px 0 0 0 !important;
        padding: 0 !important;
        text-align: center !important;
        font-size: 5px !important;
        line-height: 8px !important;
        letter-spacing: 1.5px !important;
    }
    /* =========================
       HEADER
    ========================= */
    .header-inner {
        height: 68px !important;
        min-height: 68px !important;
        padding: 0 12px !important;
        display: flex !important;
        align-items: center !important;
    }
    /* =========================
       ICONS
    ========================= */
    .header-actions {
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
    }
    .header-actions .icon-button,
    .header-actions .bag-button,
    .header-actions .theme-button,
    .header-actions .rtl-button {
        padding: 2px !important;
    }
    /* Desktop LOGIN hidden on mobile */
    .header-actions .login-button {
        display: none !important;
    }
    /* =========================
       HAMBURGER BUTTON
    ========================= */
    .mobile-button {
        width: 28px !important;
        height: 28px !important;
        margin-left: 3px !important;
        padding: 0 !important;
        font-size: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* =========================
       SMALL HAMBURGER MENU
    ========================= */
    .navigation.active {
        position: fixed !important;
        top: 68px !important;
        right: 8px !important;
        left: auto !important;
        bottom: auto !important;
        width: 165px !important;
        max-width: 165px !important;
        height: auto !important;
        padding: 2px 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        background: #21150f !important;
        z-index: 100000 !important;
        overflow: visible !important;
    }
    /* =========================
       MAIN MENU - REDUCED SPACE
    ========================= */
    .navigation.active > a,
    .navigation.active > .nav-item > a {
        width: 100% !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 13px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-size: 10px !important;
        line-height: 1 !important;
        letter-spacing: 1.3px !important;
        color: #fff !important;
        border-bottom: 1px solid rgba(255,255,255,.07) !important;
    }
    /* =========================
       SUBMENU - ALSO COMPACT
    ========================= */
    .navigation.active .dropdown-menu {
        position: static !important;
        width: 100% !important;
        min-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: none !important;
        background: #170f0b !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
    }
    .navigation.active .dropdown.active .dropdown-menu {
        display: block !important;
    }
    .navigation.active .dropdown-menu a {
        width: 100% !important;
        height: 24px !important;
        min-height: 24px !important;
        padding: 0 13px 0 22px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        font-size: 9px !important;
        line-height: 1 !important;
        color: #fff !important;
        border-bottom: 1px solid rgba(255,255,255,.04) !important;
    }
    /* =========================
       LOGIN
    ========================= */
.navigation.active .mobile-login {
    display:flex !important;
    width:calc(100% - 16px) !important;
    height:20px !important;
    min-height:30px !important;
    margin:5px 8px 4px !important;
    padding:0 13px !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:2 !important;
    transform:translateY(-2px) !important;
    box-sizing:border-box !important;
    background:#d7ad6a !important;
    color:#21150f !important;
    font-size:9px !important;
    font-weight:700 !important;
    letter-spacing:1.5px !important;
}
}
/* =========================================================
   VERY SMALL PHONES
========================================================= */
@media (max-width: 420px) {
    .header .logo {
        width: 100px !important;
        min-width: 100px !important;
    }
    .header .logo-name {
        font-size: 15px !important;
    }
    .header .logo-symbol {
        font-size: 14px !important;
    }
    .navigation.active {
        width: 160px !important;
        max-width: 160px !important;
    }
}/* =========================================================
   INDEX HOME 1 - HERO
   ========================================================= */
.hero {
    position: relative;
    min-height: 680px;
    height: 82vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #21150f;
}
/* Hero image */
.hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/newhero1.png");
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    animation: heroImageReveal 1.8s ease forwards,
               heroImageMove 8s ease-in-out 1.8s infinite alternate;
}
/* Dark luxury overlay */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(20, 12, 8, 0.82) 0%,
            rgba(20, 12, 8, 0.52) 42%,
            rgba(20, 12, 8, 0.15) 75%,
            rgba(20, 12, 8, 0.30) 100%
        );
    z-index: 1;
}
/* Hero content */
.hero-content {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 55px;
}
/* Small heading */
.hero-label {
    display: block;
    margin-bottom: 18px;
    color: #d7ad6a;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 4px;
    opacity: 0;
    animation: heroTextUp 0.9s ease 0.4s forwards;
}
/* Main heading */
.hero-content h1 {
    margin: 0;
    max-width: 650px;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(55px, 7vw, 100px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 3px;
    opacity: 0;
    animation: heroTitleReveal 1.1s ease 0.65s forwards;
}
/* Description */
.hero-content p {
    max-width: 520px;
    margin: 28px 0 32px;
    color: rgba(255,255,255,0.86);
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.3px;
    opacity: 0;
    animation: heroTextUp 0.9s ease 1s forwards;
}
/* Button */
.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 175px;
    padding: 14px 24px;
    border: 1px solid #d7ad6a;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    transition: all 0.35s ease;
    opacity: 0;
    animation: heroTextUp 0.9s ease 1.25s forwards;
}
.hero-button:hover {
    background: #d7ad6a;
    color: #21150f;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}
/* =========================================================
   HERO ANIMATIONS
   ========================================================= */
@keyframes heroImageReveal {
    from {
        opacity: 0;
        transform: scale(1.14);
    }
    to {
        opacity: 1;
        transform: scale(1.06);
    }
}
@keyframes heroImageMove {
    from {
        transform: scale(1.06) translateX(0);
    }
    to {
        transform: scale(1.10) translateX(-12px);
    }
}
@keyframes heroTitleReveal {
    from {
        opacity: 0;
        transform: translateY(45px);
        clip-path: inset(100% 0 0 0);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }
}
@keyframes heroTextUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* =========================================================
   MOBILE HERO
   ========================================================= */
@media (max-width: 900px) {
    .hero {
        min-height: 570px;
        height: 72vh;
    }
    .hero-image {
        background-position: 62% center;
    }
    .hero::after {
        background:
            linear-gradient(
                90deg,
                rgba(20, 12, 8, 0.78),
                rgba(20, 12, 8, 0.38)
            );
    }
    .hero-content {
        width: 88%;
        padding-top: 45px;
    }
    .hero-label {
        font-size: 9px;
        letter-spacing: 2.5px;
        margin-bottom: 14px;
    }
    .hero-content h1 {
        font-size: clamp(42px, 12vw, 65px);
        letter-spacing: 2px;
    }
    .hero-content p {
        max-width: 340px;
        margin: 20px 0 25px;
        font-size: 12px;
        line-height: 1.7;
    }
    .hero-button {
        min-width: 150px;
        padding: 12px 18px;
        font-size: 9px;
    }
}
@media (max-width: 480px) {
    .hero {
        min-height: 530px;
    }
    .hero-image {
        background-position: 65% center;
    }
    .hero-content {
        padding-top: 35px;
    }
    .hero-content h1 {
        font-size: 42px;
    }
}
/* =====================================================
   WATCH COLLECTION - NEW DESIGN
===================================================== */
.watches-section {
    position: relative;
    padding: 70px 6%;
    background: #f7f3ed;
    overflow: hidden;
}
/* HEADING */
.watches-heading {
    max-width: 700px;
    margin: 0 auto 45px;
    text-align: center;
}
.watches-heading span {
    display: block;
    margin-bottom: 12px;
    color: #b08b54;
    font-size: 10px;
    letter-spacing: 3px;
}
.watches-heading h2 {
    margin: 0 0 15px;
    color: #21150f;
    font-family: Georgia, serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 400;
    line-height: 1.05;
}
.watches-heading p {
    max-width: 560px;
    margin: auto;
    color: #756a61;
    font-size: 13px;
    line-height: 1.8;
}
/* WATCH GRID */
.watches-grid {
    max-width: 1150px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    align-items: start;
}
/* WATCH ITEM */
.watch-item {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transform: translateY(45px);
    opacity: 0;
    animation: watchReveal 1s cubic-bezier(.16,1,.3,1) forwards;
}
.watch-item:nth-child(1) {
    animation-delay: .15s;
}
.watch-item:nth-child(2) {
    animation-delay: .30s;
}
.watch-item:nth-child(3) {
    animation-delay: .45s;
}
/* IMAGE */
.watch-image {
    position: relative;
    width: 100%;
    height: 360px;
    overflow: hidden;
    background: #ebe4db;
}
.watch-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 60%,
        rgba(20,14,10,.15)
    );
    pointer-events: none;
}
.watch-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform 1s cubic-bezier(.16,1,.3,1),
        filter .6s ease;
}
/* IMAGE HOVER */
.watch-item:hover .watch-image img {
    transform: scale(1.08);
    filter: brightness(.92);
}
/* INFO */
.watch-info {
    padding: 20px 5px 5px;
}
.watch-info span {
    display: block;
    margin-bottom: 9px;
    color: #b08b54;
    font-size: 10px;
    letter-spacing: 2px;
}
.watch-info h3 {
    margin: 0 0 9px;
    color: #21150f;
    font-family: Georgia, serif;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: .5px;
}
.watch-info p {
    margin: 0;
    color: #756a61;
    font-size: 10px;
    letter-spacing: 1.8px;
    transition:
        color .35s ease,
        transform .35s ease;
}
.watch-info b {
    font-weight: 400;
    transition: transform .35s ease;
}
.watch-item:hover .watch-info p {
    color: #b08b54;
    transform: translateX(6px);
}
/* GOLD LINE ANIMATION */
.watch-item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: #b08b54;
    transition: width .6s cubic-bezier(.16,1,.3,1);
}
.watch-item:hover::after {
    width: 100%;
}
/* SCROLL / ENTRY ANIMATION */
@keyframes watchReveal {
    0% {
        opacity: 0;
        transform: translateY(45px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* =====================================================
   WATCH COLLECTION RESPONSIVE
===================================================== */
@media (max-width: 900px) {
    .watches-section {
        padding: 60px 6%;
    }
    .watches-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    .watch-image {
        height: 320px;
    }
}
@media (max-width: 600px) {
    .watches-section {
        padding: 50px 20px;
    }
    .watches-heading {
        margin-bottom: 30px;
    }
    .watches-heading h2 {
        font-size: 36px;
    }
    .watches-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .watch-image {
        height: 330px;
    }
    .watch-info {
        padding-top: 15px;
    }
}
/* =====================================================
   DARK MODE
===================================================== */
body.dark-mode .watches-section {
    background: #17110d;
}
body.dark-mode .watches-heading h2,
body.dark-mode .watch-info h3 {
    color: #f5f1ea;
}
body.dark-mode .watches-heading p,
body.dark-mode .watch-info p {
    color: #c5b9ae;
}
body.dark-mode .watch-image {
    background: #211812;
}
/* =========================================================
   ZIVARA JEWELS — PREMIUM WATCH PAGE
   HEADER & FOOTER ARE NOT TOUCHED
   ========================================================= */
/* PREMIUM WATCH PAGE COLORS */
:root {
    --watch-ivory: #f6f1e8;
    --watch-cream: #eee5d7;
    --watch-soft: #e4d7c4;
    --watch-gold: #b79a68;
    --watch-gold-light: #d5bd8d;
    --watch-espresso: #29221d;
    --watch-brown: #66584b;
    --watch-dark: #211c18;
}
/* =========================================================
   01 — HERO
   ========================================================= */
.watch-hero {
    position: relative;
    width: 100%;
    height: 92vh;
    min-height: 650px;
    overflow: hidden;
    color: #fff;
}
.watch-hero-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.watch-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.06);
    animation: watchHeroZoom 7s ease forwards;
}
@keyframes watchHeroZoom {
    from {
        transform: scale(1.12);
    }
    to {
        transform: scale(1);
    }
}
.watch-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(25, 20, 16, .78) 0%,
            rgba(35, 27, 20, .48) 42%,
            rgba(35, 27, 20, .14) 100%
        );
}
.watch-hero-glow {
    position: absolute;
    width: 480px;
    height: 480px;
    right: 5%;
    top: 20%;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(213, 189, 141, .20),
            transparent 68%
        );
    animation: watchGlow 8s ease-in-out infinite alternate;
}
@keyframes watchGlow {
    from {
        transform: translate(30px, 0) scale(.9);
    }
    to {
        transform: translate(-60px, 25px) scale(1.1);
    }
}
.watch-hero-content {
    position: absolute;
    left: 8%;
    top: 50%;
    width: 570px;
    max-width: 82%;
    transform: translateY(-50%);
    z-index: 3;
    opacity: 0;
    animation: watchHeroContent 1.2s .3s ease forwards;
}
@keyframes watchHeroContent {
    from {
        opacity: 0;
        transform: translate(-60px, -50%);
    }
    to {
        opacity: 1;
        transform: translate(0, -50%);
    }
}
.watch-eyebrow {
    display: block;
    margin-bottom: 22px;
    color: var(--watch-gold-light);
    font-size: 9px;
    letter-spacing: 4px;
}
.watch-hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(58px, 7vw, 105px);
    line-height: .88;
    font-weight: 400;
    letter-spacing: -3px;
}
.watch-hero h1 em {
    display: block;
    margin-left: 55px;
    color: var(--watch-gold-light);
    font-style: italic;
    opacity: 0;
    animation: watchTitle 1s .8s ease forwards;
}
@keyframes watchTitle {
    from {
        opacity: 0;
        transform: translateX(70px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.watch-hero-content p {
    width: 430px;
    max-width: 100%;
    margin-top: 28px;
    color: rgba(255,255,255,.82);
    font-size: 13px;
    line-height: 1.8;
    opacity: 0;
    animation: watchText 1s 1.2s ease forwards;
}
.watch-button {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-top: 28px;
    padding-bottom: 8px;
    color: #fff;
    font-size: 9px;
    letter-spacing: 2px;
    border-bottom: 1px solid var(--watch-gold-light);
    opacity: 0;
    animation: watchText 1s 1.5s ease forwards;
    transition: color .3s ease;
}
@keyframes watchText {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.watch-button:hover {
    color: var(--watch-gold-light);
}
.watch-button span {
    transition: transform .35s ease;
}
.watch-button:hover span {
    transform: translate(5px, -4px);
}
.watch-hero-line {
    position: absolute;
    right: 8%;
    bottom: 90px;
    width: 110px;
    height: 1px;
    background: rgba(255,255,255,.5);
    transform-origin: right;
    animation: watchLine 1.3s 1.5s ease forwards;
}
@keyframes watchLine {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}
.watch-scroll {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.75);
    font-size: 7px;
    letter-spacing: 3px;
}
.watch-scroll i {
    width: 1px;
    height: 36px;
    background: var(--watch-gold-light);
    animation: watchScroll 1.6s infinite;
}
@keyframes watchScroll {
    0% {
        transform: scaleY(0);
        transform-origin: top;
    }
    50% {
        transform: scaleY(1);
        transform-origin: top;
    }
    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}
/* =========================================================
   02 — INTRO
   ========================================================= */
.watch-intro {
    width: 86%;
    max-width: 1280px;
    min-height: 540px;
    margin: auto;
    padding: 90px 0;
    display: grid;
    grid-template-columns: 50px 1fr .85fr;
    gap: 55px;
    align-items: center;
    background: var(--watch-ivory);
}
.watch-intro-number {
    align-self: start;
    padding-top: 8px;
    color: var(--watch-gold);
    font-size: 10px;
    letter-spacing: 2px;
}
.watch-intro-content {
    opacity: 0;
    transform: translateX(-60px);
    transition:
        opacity 1s ease,
        transform 1s ease;
}
.watch-intro-content.watch-visible {
    opacity: 1;
    transform: translateX(0);
}
.watch-intro-content h2 {
    font-family: Georgia, serif;
    font-size: clamp(42px, 5vw, 65px);
    line-height: .95;
    font-weight: 400;
    color: var(--watch-espresso);
}
.watch-intro-content h2 span {
    display: block;
    margin-left: 65px;
    color: var(--watch-gold);
    font-style: italic;
}
.watch-intro-content p {
    max-width: 470px;
    margin: 28px 0;
    color: var(--watch-brown);
    font-size: 13px;
    line-height: 1.9;
}
.watch-intro-image {
    position: relative;
    height: 460px;
    opacity: 0;
    transform: translateY(65px);
    transition:
        opacity 1.1s .15s ease,
        transform 1.1s .15s ease;
}
.watch-intro-image.watch-visible {
    opacity: 1;
    transform: translateY(0);
}
.watch-intro-image::before {
    content: "";
    position: absolute;
    left: -15px;
    bottom: -15px;
    width: 72%;
    height: 72%;
    border-left: 1px solid var(--watch-gold);
    border-bottom: 1px solid var(--watch-gold);
}
.watch-intro-image img {
    position: relative;
    z-index: 1;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}
.watch-intro-image:hover img {
    transform: scale(1.035);
}
.image-caption {
    position: absolute;
    right: -23px;
    bottom: 25px;
    writing-mode: vertical-rl;
    color: var(--watch-gold);
    font-size: 8px;
    letter-spacing: 2px;
}
/* =========================================================
   03 — COLLECTIONS
   ========================================================= */
.watch-collections {
    padding: 90px 7% 105px;
    background:
        linear-gradient(
            135deg,
            #eee6da,
            #e8dfd1
        );
}
.watch-section-heading {
    width: 90%;
    max-width: 1250px;
    margin: 0 auto 60px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 50px;
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 1s ease,
        transform 1s ease;
}
.watch-section-heading.watch-visible {
    opacity: 1;
    transform: translateY(0);
}
.watch-section-heading h2 {
    font-family: Georgia, serif;
    font-size: clamp(45px, 5vw, 68px);
    line-height: .9;
    font-weight: 400;
    color: var(--watch-espresso);
}
.watch-section-heading h2 em {
    display: block;
    margin-left: 70px;
    color: var(--watch-gold);
    font-style: italic;
}
.watch-section-heading > p {
    max-width: 350px;
    color: var(--watch-brown);
    font-size: 12px;
    line-height: 1.9;
}
.watch-collection-grid {
    width: 90%;
    max-width: 1250px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    column-gap: 60px;
    row-gap: 70px;
}
.watch-collection-item {
    opacity: 0;
    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.2,.7,.2,1);
}
.watch-item-large {
    transform: translateX(-75px);
    grid-row: span 2;
}
.watch-item-small:nth-child(2) {
    transform: translateX(75px);
}
.watch-item-small:nth-child(3) {
    transform: translateY(65px);
}
.watch-collection-item.watch-visible {
    opacity: 1;
    transform: translate(0);
}
.watch-image-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #d9d0c2;
}
.watch-item-large .watch-image-wrap {
    height: 570px;
}
.watch-item-small .watch-image-wrap {
    height: 315px;
}
.watch-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.watch-collection-item:hover img {
    transform: scale(1.055);
}
.watch-image-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 65%;
    height: 100%;
    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255,255,255,.24),
            transparent
        );
    transform: skewX(-20deg);
    transition: left 1s ease;
}
.watch-collection-item:hover .watch-image-wrap::after {
    left: 140%;
}
.watch-image-number {
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 2;
    color: #fff;
    font-family: Georgia, serif;
    font-size: 12px;
}
.watch-item-info {
    padding-top: 18px;
}
.watch-item-info > span {
    color: var(--watch-gold);
    font-size: 8px;
    letter-spacing: 2px;
}
.watch-item-info h3 {
    margin: 7px 0;
    font-family: Georgia, serif;
    color: var(--watch-espresso);
    font-size: 24px;
    font-weight: 400;
}
.watch-item-info p {
    color: var(--watch-brown);
    font-size: 11px;
}
/* =========================================================
   04 — FEATURED WATCH
   ========================================================= */
.watch-featured {
    display: grid;
    grid-template-columns: 1fr .9fr;
    min-height: 650px;
    background: var(--watch-ivory);
}
.featured-image {
    overflow: hidden;
    opacity: 0;
    transform: translateX(-70px);
    transition:
        opacity 1.1s ease,
        transform 1.1s ease;
}
.featured-image.watch-visible {
    opacity: 1;
    transform: translateX(0);
}
.featured-image img {
    width: 100%;
    height: 650px;
    object-fit: cover;
    transition: transform 1.5s ease;
}
.featured-image:hover img {
    transform: scale(1.045);
}
.featured-content {
    align-self: center;
    padding: 80px 10%;
    opacity: 0;
    transform: translateX(70px);
    transition:
        opacity 1.1s .15s ease,
        transform 1.1s .15s ease;
}
.featured-content.watch-visible {
    opacity: 1;
    transform: translateX(0);
}
.featured-line {
    width: 70px;
    height: 1px;
    margin-bottom: 25px;
    background: var(--watch-gold);
}
.featured-content h2 {
    font-family: Georgia, serif;
    color: var(--watch-espresso);
    font-size: clamp(45px, 5vw, 68px);
    font-weight: 400;
    line-height: .93;
}
.featured-content h2 em {
    display: block;
    margin-left: 38px;
    color: var(--watch-gold);
    font-style: italic;
}
.featured-content > p {
    max-width: 420px;
    margin: 28px 0;
    color: var(--watch-brown);
    font-size: 13px;
    line-height: 1.9;
}
.featured-details {
    display: flex;
    gap: 38px;
    margin-bottom: 32px;
}
.featured-details div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.featured-details span {
    color: var(--watch-gold);
    font-size: 8px;
    letter-spacing: 2px;
}
.featured-details strong {
    font-family: Georgia, serif;
    color: var(--watch-espresso);
    font-size: 13px;
    font-weight: 400;
}
/* =========================================================
   05 — CRAFTSMANSHIP
   ========================================================= */
.watch-craft {
    width: 86%;
    max-width: 1300px;
    min-height: 610px;
    margin: auto;
    padding: 95px 0;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 75px;
    align-items: center;
    background: var(--watch-ivory);
}
.craft-content {
    opacity: 0;
    transform: translateY(60px);
    transition:
        opacity 1s ease,
        transform 1s ease;
}
.craft-content.watch-visible {
    opacity: 1;
    transform: translateY(0);
}
.craft-content h2 {
    font-family: Georgia, serif;
    color: var(--watch-espresso);
    font-size: clamp(43px, 4.5vw, 64px);
    line-height: .94;
    font-weight: 400;
}
.craft-content h2 em {
    display: block;
    margin-left: 38px;
    color: var(--watch-gold);
    font-style: italic;
}
.craft-content > p {
    max-width: 430px;
    margin: 25px 0 35px;
    color: var(--watch-brown);
    font-size: 13px;
    line-height: 1.9;
}
.craft-points {
    border-top: 1px solid #d3c6b6;
}
.craft-points div {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 50px;
    border-bottom: 1px solid #d3c6b6;
}
.craft-points span {
    color: var(--watch-gold);
    font-size: 9px;
}
.craft-points p {
    color: var(--watch-espresso);
    font-size: 11px;
}
.craft-image {
    position: relative;
    height: 545px;
    overflow: hidden;
    opacity: 0;
    transform: translateX(75px);
    transition:
        opacity 1.1s .15s ease,
        transform 1.1s .15s ease;
}
.craft-image.watch-visible {
    opacity: 1;
    transform: translateX(0);
}
.craft-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s ease;
}
.craft-image:hover img {
    transform: scale(1.045);
}
.craft-floating-text {
    position: absolute;
    right: 25px;
    bottom: 25px;
    z-index: 2;
    color: #fff;
    text-align: right;
}
.craft-floating-text span {
    display: block;
    font-size: 8px;
    letter-spacing: 3px;
}
.craft-floating-text strong {
    display: block;
    margin-top: 4px;
    font-family: Georgia, serif;
    font-size: 27px;
    font-weight: 400;
    color: var(--watch-gold-light);
}
/* =========================================================
   06 — WATCH SERVICES
   ========================================================= */
.watch-services {
    padding: 95px 8%;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 80px;
    background:
        linear-gradient(
            135deg,
            #29211b,
            #211b17
        );
    color: #f5efe6;
}
.services-heading {
    opacity: 0;
    transform: translateX(-60px);
    transition:
        opacity 1s ease,
        transform 1s ease;
}
.services-heading.watch-visible {
    opacity: 1;
    transform: translateX(0);
}
.services-heading .section-label {
    color: var(--watch-gold-light);
}
.services-heading h2 {
    font-family: Georgia, serif;
    font-size: clamp(45px, 5vw, 68px);
    font-weight: 400;
    line-height: .94;
}
.services-heading h2 em {
    display: block;
    margin-left: 48px;
    color: var(--watch-gold-light);
    font-style: italic;
}
.services-heading p {
    max-width: 350px;
    margin-top: 25px;
    color: #aaa097;
    font-size: 12px;
    line-height: 1.8;
}
.services-list {
    border-top: 1px solid rgba(213,189,141,.25);
}
.services-list a {
    min-height: 110px;
    display: grid;
    grid-template-columns: 45px 1fr 35px;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid rgba(213,189,141,.25);
    opacity: 0;
    transform: translateX(60px);
    transition:
        opacity .8s ease,
        transform .8s ease,
        padding .35s ease;
}
.services-list a.watch-visible {
    opacity: 1;
    transform: translateX(0);
}
.services-list a:nth-child(2) {
    transition-delay: .15s;
}
.services-list a:nth-child(3) {
    transition-delay: .3s;
}
.services-list a:hover {
    padding-left: 12px;
}
.service-number {
    color: var(--watch-gold-light);
    font-size: 9px;
}
.services-list h3 {
    font-family: Georgia, serif;
    font-size: 21px;
    font-weight: 400;
    transition: color .3s ease;
}
.services-list a:hover h3 {
    color: var(--watch-gold-light);
}
.services-list p {
    margin-top: 5px;
    color: #928980;
    font-size: 10px;
}
.service-arrow {
    font-size: 18px;
    transition: transform .35s ease;
}
.services-list a:hover .service-arrow {
    color: var(--watch-gold-light);
    transform: translate(5px, -4px);
}
/* =========================================================
   07 — VISIT SHOWROOM
   ========================================================= */
.watch-visit {
    position: relative;
    min-height: 570px;
    overflow: hidden;
    color: #fff;
}
.watch-visit-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.watch-visit-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.7s ease;
}
.watch-visit:hover .watch-visit-image img {
    transform: scale(1.04);
}
.watch-visit-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(28,22,17,.80),
            rgba(28,22,17,.43),
            rgba(28,22,17,.12)
        );
}
.watch-visit-content {
    position: relative;
    z-index: 2;
    width: 620px;
    max-width: 82%;
    padding: 130px 0 90px 9%;
    opacity: 0;
    transform: translateY(60px);
    transition:
        opacity 1.1s ease,
        transform 1.1s ease;
}
.watch-visit-content.watch-visible {
    opacity: 1;
    transform: translateY(0);
}
.watch-visit-content .section-label {
    color: var(--watch-gold-light);
}
.watch-visit-content h2 {
    font-family: Georgia, serif;
    font-size: clamp(47px, 5.5vw, 75px);
    line-height: .93;
    font-weight: 400;
}
.watch-visit-content h2 em {
    display: block;
    margin-left: 48px;
    color: var(--watch-gold-light);
    font-style: italic;
}
.watch-visit-content p {
    max-width: 430px;
    margin: 25px 0;
    color: rgba(255,255,255,.80);
    font-size: 13px;
    line-height: 1.8;
}
/* =========================================================
   DARK MODE — WATCH PAGE
   ========================================================= */
body.dark-mode .watch-intro,
body.dark-mode .watch-featured,
body.dark-mode .watch-craft {
    background: #181512;
}
body.dark-mode .watch-collections {
    background: #211b17;
}
body.dark-mode .watch-intro-content h2,
body.dark-mode .watch-section-heading h2,
body.dark-mode .watch-item-info h3,
body.dark-mode .featured-content h2,
body.dark-mode .craft-content h2,
body.dark-mode .featured-details strong,
body.dark-mode .craft-points p {
    color: #f1e9dd;
}
body.dark-mode .watch-intro-content p,
body.dark-mode .watch-section-heading > p,
body.dark-mode .watch-item-info p,
body.dark-mode .featured-content > p,
body.dark-mode .craft-content > p {
    color: #aaa097;
}
/* =========================================================
   RTL
   ========================================================= */
html[dir="rtl"] .watch-hero-content {
    left: auto;
    right: 8%;
}
html[dir="rtl"] .watch-hero h1 em,
html[dir="rtl"] .watch-intro-content h2 span,
html[dir="rtl"] .watch-section-heading h2 em,
html[dir="rtl"] .featured-content h2 em,
html[dir="rtl"] .craft-content h2 em,
html[dir="rtl"] .services-heading h2 em,
html[dir="rtl"] .watch-visit-content h2 em {
    margin-left: 0;
    margin-right: 48px;
}
/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1100px) {
    .watch-intro {
        grid-template-columns: 40px 1fr 1fr;
        gap: 35px;
    }
    .watch-collection-grid {
        column-gap: 40px;
    }
    .watch-craft {
        gap: 50px;
    }
    .watch-services {
        gap: 55px;
    }
}
/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 900px) {
    .watch-intro {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .watch-intro-number {
        display: none;
    }
    .watch-collection-grid {
        grid-template-columns: 1fr;
    }
    .watch-item-large {
        grid-row: auto;
    }
    .watch-featured {
        grid-template-columns: 1fr;
    }
    .featured-image img {
        height: 520px;
    }
    .watch-craft {
        grid-template-columns: 1fr;
    }
    .watch-services {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   SMALL MOBILE
   ========================================================= */
@media (max-width: 600px) {
    .watch-hero {
        height: 88vh;
        min-height: 590px;
    }
    .watch-hero-content {
        left: 7%;
        width: 86%;
    }
    .watch-hero h1 {
        font-size: 55px;
        letter-spacing: -2px;
    }
    .watch-hero h1 em {
        margin-left: 25px;
    }
    .watch-intro {
        display: block;
        width: 86%;
        padding: 75px 0;
    }
    .watch-intro-image {
        height: 400px;
        margin-top: 50px;
    }
    .watch-collections {
        padding: 75px 6%;
    }
    .watch-section-heading {
        display: block;
        width: 90%;
    }
    .watch-section-heading h2 {
        font-size: 47px;
    }
    .watch-section-heading h2 em {
        margin-left: 32px;
    }
    .watch-section-heading > p {
        margin-top: 22px;
    }
    .watch-collection-grid {
        width: 90%;
    }
    .watch-item-large .watch-image-wrap {
        height: 460px;
    }
    .watch-item-small .watch-image-wrap {
        height: 330px;
    }
    .featured-image img {
        height: 450px;
    }
    .featured-content {
        padding: 70px 8%;
    }
    .featured-details {
        flex-wrap: wrap;
        gap: 20px;
    }
    .watch-craft {
        width: 86%;
        padding: 75px 0;
    }
    .craft-image {
        height: 420px;
    }
    .watch-services {
        padding: 75px 7%;
    }
    .services-list a {
        grid-template-columns: 30px 1fr 25px;
        gap: 10px;
        min-height: 105px;
    }
    .services-list h3 {
        font-size: 18px;
    }
    .watch-visit {
        min-height: 530px;
    }
    .watch-visit-content {
        width: 100%;
        max-width: 100%;
        padding: 110px 7% 75px;
    }
    .watch-visit-content h2 {
        font-size: 48px;
    }
    .watch-visit-content h2 em {
        margin-left: 25px;
    }
}

/* =========================================================
   ZIVARA WATCH SERVICE PAGE
   ========================================================= */
:root {
    --ws-bg: #f1ede5;
    --ws-cream: #e4dccd;
    --ws-dark: #211f1c;
    --ws-black: #171614;
    --ws-gold: #ad8b55;
    --ws-bronze: #8b7048;
    --ws-text: #3b3731;
}
/* HERO */
.ws-hero {
    min-height: 680px;
    position: relative;
    overflow: hidden;
    background: var(--ws-black);
    display: flex;
    align-items: center;
}
.ws-hero-image {
    position: absolute;
    inset: 0;
}
.ws-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: wsHeroZoom 10s ease-in-out infinite alternate;
}
.ws-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(20,18,16,.88), rgba(20,18,16,.35), rgba(20,18,16,.08));
}
.ws-hero-content {
    position: relative;
    z-index: 2;
    width: min(1200px, 90%);
    margin: auto;
    color: #fff;
}
.ws-hero-content span,
.ws-section-title span,
.ws-intro-text > span,
.ws-movement-content > span,
.ws-process-heading span,
.ws-craft-content span,
.ws-care-content > span,
.ws-final-content span {
    display: block;
    color: var(--ws-gold);
    letter-spacing: 3px;
    font-size: 11px;
    margin-bottom: 22px;
}
.ws-hero-content h1 {
    font-family: Georgia, serif;
    font-size: clamp(48px, 6vw, 88px);
    line-height: .95;
    font-weight: 400;
    margin: 0 0 28px;
}
.ws-hero-content p {
    max-width: 450px;
    line-height: 1.8;
    font-size: 15px;
    margin-bottom: 35px;
}
.ws-button {
    display: inline-block;
    padding: 15px 28px;
    border: 1px solid var(--ws-gold);
    color: inherit;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 2px;
    transition: .35s ease;
}
.ws-button:hover {
    background: var(--ws-gold);
    color: #fff;
}
.ws-hero-number {
    position: absolute;
    right: 5%;
    bottom: 35px;
    color: rgba(255,255,255,.5);
    font-size: 12px;
    letter-spacing: 3px;
}
@keyframes wsHeroZoom {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}
/* INTRO */
.ws-intro {
    background: var(--ws-bg);
    padding: 100px 7%;
}
.ws-intro-small {
    color: var(--ws-gold);
    font-size: 11px;
    letter-spacing: 3px;
    margin-bottom: 55px;
}
.ws-intro-layout {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr .85fr;
    gap: 90px;
    align-items: center;
}
.ws-intro-text h2,
.ws-section-title h2,
.ws-process-heading h2,
.ws-craft-content h2,
.ws-care-content h2,
.ws-final-content h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    color: var(--ws-dark);
    font-size: clamp(38px, 4vw, 62px);
    line-height: 1.05;
    margin: 0 0 30px;
}
.ws-intro-text p,
.ws-movement-content p,
.ws-craft-content p,
.ws-care-content p,
.ws-final-content p {
    max-width: 520px;
    line-height: 1.9;
    color: var(--ws-text);
    font-size: 15px;
    margin-bottom: 20px;
}
.ws-intro-image {
    height: 500px;
    overflow: hidden;
}
.ws-intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s ease;
}
.ws-intro-image:hover img {
    transform: scale(1.06);
}
/* SERVICES */
.ws-services {
    background: #ded5c6;
    padding: 100px 7%;
}
.ws-section-title {
    max-width: 1200px;
    margin: 0 auto 70px;
}
.ws-service-list {
    max-width: 1200px;
    margin: auto;
}
.ws-service-item {
    display: grid;
    grid-template-columns: 38% 1fr;
    min-height: 270px;
    border-top: 1px solid rgba(33,31,28,.25);
    transition: .45s ease;
}
.ws-service-item:last-child {
    border-bottom: 1px solid rgba(33,31,28,.25);
}
.ws-service-image {
    overflow: hidden;
}
.ws-service-image img {
    width: 100%;
    height: 270px;
    object-fit: cover;
    transition: transform .8s ease;
}
.ws-service-item:hover img {
    transform: scale(1.07);
}
.ws-service-content {
    padding: 45px 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ws-service-content > span {
    color: var(--ws-gold);
    font-size: 12px;
    letter-spacing: 2px;
}
.ws-service-content h3 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: 31px;
    margin: 15px 0;
    color: var(--ws-dark);
}
.ws-service-content p {
    max-width: 500px;
    line-height: 1.7;
    color: var(--ws-text);
}
/* MOVEMENT */
.ws-movement {
    background: var(--ws-black);
    color: #fff;
    min-height: 620px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.ws-movement-image {
    overflow: hidden;
}
.ws-movement-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}
.ws-movement:hover .ws-movement-image img {
    transform: scale(1.05);
}
.ws-movement-content {
    padding: 90px 9%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.ws-movement-content h2 {
    color: #f3eee6;
    font-family: Georgia, serif;
    font-size: clamp(40px, 4vw, 62px);
    font-weight: 400;
    line-height: 1;
    margin-bottom: 30px;
}
.ws-movement-content p {
    color: #c9c1b6;
}
.ws-detail-lines {
    margin-top: 35px;
}
.ws-detail-lines div {
    border-top: 1px solid rgba(255,255,255,.2);
    padding: 17px 0;
    display: flex;
    gap: 30px;
}
.ws-detail-lines strong {
    color: var(--ws-gold);
    font-weight: 400;
}
.ws-detail-lines span {
    color: #ddd5c9;
}
/* PROCESS */
.ws-process {
    padding: 100px 7%;
    background: var(--ws-bg);
}
.ws-process-heading {
    max-width: 1200px;
    margin: auto auto 70px;
}
.ws-process-line {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.ws-process-step {
    padding: 25px 30px;
    border-left: 1px solid rgba(33,31,28,.25);
}
.ws-process-step:last-child {
    border-right: 1px solid rgba(33,31,28,.25);
}
.ws-process-step > span {
    color: var(--ws-gold);
    font-size: 12px;
    letter-spacing: 2px;
}
.ws-process-step h3 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: 27px;
    margin: 20px 0 15px;
}
.ws-process-step p {
    color: var(--ws-text);
    line-height: 1.7;
    font-size: 14px;
}
/* CRAFT */
.ws-craft {
    background: #cfc3b2;
    padding: 90px 7%;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 70px;
    align-items: center;
}
.ws-craft-content {
    padding-left: 5%;
}
.ws-craft-images {
    height: 470px;
    position: relative;
}
.ws-craft-images img {
    position: absolute;
    object-fit: cover;
    transition: transform .8s ease;
}
.ws-craft-images img:first-child {
    width: 68%;
    height: 380px;
    left: 0;
    top: 0;
}
.ws-craft-images img:last-child {
    width: 48%;
    height: 290px;
    right: 0;
    bottom: 0;
    border: 10px solid #cfc3b2;
}
.ws-craft-images:hover img:first-child {
    transform: translateX(-8px);
}
.ws-craft-images:hover img:last-child {
    transform: translateX(8px);
}
/* CARE */
.ws-care {
    background: var(--ws-bg);
    padding: 100px 7%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}
.ws-care-image {
    height: 500px;
    overflow: hidden;
}
.ws-care-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s ease;
}
.ws-care-image:hover img {
    transform: scale(1.06);
}
.ws-care-content {
    padding-right: 5%;
}
.ws-care-points {
    margin-top: 35px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.ws-care-points span {
    padding: 16px 0;
    border-top: 1px solid rgba(33,31,28,.2);
    font-size: 13px;
}
/* FINAL */
.ws-final {
    min-height: 560px;
    position: relative;
    overflow: hidden;
    background: var(--ws-black);
    display: flex;
    align-items: center;
}
.ws-final-image {
    position: absolute;
    inset: 0;
}
.ws-final-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .45;
    transition: transform 1s ease;
}
.ws-final:hover img {
    transform: scale(1.05);
}
.ws-final-content {
    position: relative;
    z-index: 2;
    width: 1200px;
    max-width: 86%;
    margin: auto;
    color: #fff;
}
.ws-final-content h2 {
    color: #f3eee6;
}
.ws-final-content p {
    color: #d1c8bc;
}
/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
    .ws-hero {
        min-height: 580px;
    }
    .ws-intro-layout,
    .ws-movement,
    .ws-care,
    .ws-craft {
        grid-template-columns: 1fr;
    }
    .ws-intro-layout {
        gap: 45px;
    }
    .ws-intro-image,
    .ws-care-image {
        height: 420px;
    }
    .ws-service-item {
        grid-template-columns: 1fr;
    }
    .ws-service-image img {
        height: 240px;
    }
    .ws-process-line {
        grid-template-columns: 1fr 1fr;
    }
    .ws-process-step {
        border-bottom: 1px solid rgba(33,31,28,.2);
    }
    .ws-craft-images {
        height: 420px;
    }
    .ws-movement {
        min-height: auto;
    }
    .ws-movement-image {
        height: 450px;
    }
}
@media (max-width: 600px) {
    .ws-hero-content h1 {
        font-size: 48px;
    }
    .ws-intro,
    .ws-services,
    .ws-process,
    .ws-craft,
    .ws-care {
        padding: 70px 6%;
    }
    .ws-service-content {
        padding: 35px 20px;
    }
    .ws-process-line {
        grid-template-columns: 1fr;
    }
    .ws-process-step {
        border-left: 0;
        border-right: 0 !important;
    }
    .ws-craft-images {
        height: 350px;
    }
    .ws-craft-images img:first-child {
        width: 75%;
        height: 280px;
    }
    .ws-craft-images img:last-child {
        width: 48%;
        height: 210px;
    }
    .ws-care-points {
        grid-template-columns: 1fr;
    }
}
/* FIX COLLECTION TEXT IN DARK MODE */
body.dark-mode .collection-name {
    background: #211711;
}
body.dark-mode .collection-name h3 {
    color: #f5f1ea;
}
body.dark-mode .collection-name p {
    color: #d7ad6a;
}
/* =========================================================
   FINAL HOME PAGE SPACING FIX
========================================================= */

/* MADE TO BE REMEMBERED
   Text LEFT - Image RIGHT
*/
.home-signature {
    min-height: 430px;
    padding: 45px 6%;
    grid-template-columns: 1fr 1fr;
    gap: 45px;
}

.home-signature-content {
    order: 1;
    max-width: 500px;
}

.home-signature-image {
    order: 2;
    height: 360px;
}

.home-signature-image img {
    object-fit: contain;
}


/* WHY ZIVARA
   Make section shorter and tighter
*/
.home-why {
    padding: 55px 6% 60px;
}

.home-why-heading {
    margin-bottom: 35px;
}

.home-why-grid {
    max-width: 1150px;
}

.home-why-item {
    padding: 5px 25px;
}

.home-why-number {
    margin-bottom: 16px;
}

.home-why-item h3 {
    margin-bottom: 9px;
}

.home-why-item p {
    line-height: 1.6;
}


/* CRAFTSMANSHIP
   Reduce excessive vertical space
*/
.craft {
    padding: 65px 5%;
    gap: 55px;
    min-height: auto;
}

.craft-photo {
    height: 400px;
}

.craft-photo img {
    object-fit: contain;
}

.craft-text h2 {
    margin-bottom: 18px;
}

.craft-text > p:not(.eyebrow-dark) {
    margin-bottom: 22px;
}


/* WATCH SECTION
   Reduce the large vertical area
*/
.bridal {
    height: 420px;
}

.bridal-content {
    padding: 30px;
}


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

@media (max-width: 900px) {

    .home-signature {
        min-height: auto;
        padding: 45px 6%;
        gap: 30px;
    }

    .home-signature-image {
        height: 330px;
    }

    .home-why {
        padding: 50px 6%;
    }

    .home-why-heading {
        margin-bottom: 30px;
    }

    .craft {
        padding: 55px 6%;
        gap: 35px;
    }

    .craft-photo {
        height: 350px;
    }

    .bridal {
        height: 380px;
    }
}


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

@media (max-width: 600px) {

    .home-signature {
        padding: 40px 20px;
        gap: 25px;
    }

    .home-signature-image {
        height: 270px;
    }

    .home-why {
        padding: 45px 20px;
    }

    .home-why-heading {
        margin-bottom: 25px;
    }

    .home-why-item {
        padding: 20px 5px;
    }

    .craft {
        padding: 45px 20px;
        gap: 25px;
    }

    .craft-photo {
        height: 300px;
    }

    .bridal {
        height: 340px;
    }

    .bridal-content {
        padding: 20px;
    }
}
/* =========================================================
   INDEX PAGE - EXTRA PREMIUM ANIMATIONS
========================================================= */

/* HERO IMAGE - SLOW ZOOM */
.hero-image img {
    animation: heroZoom 8s ease-in-out infinite alternate;
}

@keyframes heroZoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.06);
    }
}


/* INTRO TEXT */
.intro-content {
    animation: introSlide 1s ease both;
}

@keyframes introSlide {
    from {
        opacity: 0;
        transform: translateX(-45px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* COLLECTION IMAGES - FLOAT */
.collection:hover {
    transform: translateY(-8px);
    transition: transform .5s ease;
}

.collection-img img {
    transition: transform .8s ease;
}

.collection:hover .collection-img img {
    transform: scale(1.08);
}


/* NEW ARRIVAL IMAGE */
.product:hover .product-image img {
    transform: scale(1.07) translateY(-5px);
}

.product-image img {
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}


/* CRAFT IMAGE */
.craft-photo {
    overflow: hidden;
}

.craft-photo img {
    transition: transform 1s ease;
}

.craft-photo:hover img {
    transform: scale(1.06);
}


/* WATCH / EDITORIAL BACKGROUND */
.bridal-bg,
.showroom-bg {
    transition: transform 1.2s ease;
}

.bridal:hover .bridal-bg,
.showroom:hover .showroom-bg {
    transform: scale(1.05);
}


/* BUTTON HOVER */
.btn-primary,
.btn-outline,
.btn-light {
    transition:
        transform .35s ease,
        letter-spacing .35s ease,
        background-color .35s ease;
}

.btn-primary:hover,
.btn-outline:hover,
.btn-light:hover {
    transform: translateY(-3px);
    letter-spacing: 1.5px;
}


/* SECTION HEADINGS */
.section-heading {
    transition: transform .6s ease;
}

.section-heading:hover {
    transform: translateY(-4px);
}


/* FOOTER LINKS */
.footer-column a,
.footer-social a {
    transition:
        transform .3s ease,
        letter-spacing .3s ease;
}

.footer-column a:hover,
.footer-social a:hover {
    transform: translateX(5px);
    letter-spacing: .8px;
}
/* =========================================================
   ZIVARA HOME 2
   DENSE EDITORIAL SHOWROOM
========================================================= */

.h2-hero {
    min-height: 600px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #211813;
    color: #f8f1e8;
}

.h2-hero-visual {
    position: absolute;
    inset: 0;
}

.h2-hero-main-image,
.h2-hero-main-image img {
    width: 100%;
    height: 100%;
}

.h2-hero-main-image img {
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    transition: transform 1.5s ease;
}

.h2-hero:hover .h2-hero-main-image img {
    transform: scale(1.06);
}

.h2-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(20,13,10,.82) 0%,
        rgba(20,13,10,.45) 42%,
        rgba(20,13,10,.08) 100%
    );
}

.h2-hero-content {
    position: relative;
    z-index: 2;
    width: 55%;
    margin-left: 5%;
    padding: 45px 0;
}

.h2-hero-content > span {
    display: block;
    font-size: 10px;
    letter-spacing: 4px;
    margin-bottom: 18px;
}

.h2-hero-content h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 6vw, 82px);
    font-weight: 400;
    line-height: .93;
    margin: 0 0 22px;
}

.h2-hero-content p {
    max-width: 460px;
    font-size: 13px;
    line-height: 1.75;
    margin-bottom: 25px;
    color: rgba(255,255,255,.82);
}

.h2-hero-links {
    display: flex;
    gap: 25px;
}

.h2-hero-links a {
    color: #fff;
    text-decoration: none;
    font-size: 9px;
    letter-spacing: 2px;
    transition: .3s ease;
}

.h2-hero-links a:hover {
    letter-spacing: 3px;
}

.h2-hero-small-image {
    position: absolute;
    z-index: 3;
    right: 5%;
    bottom: 35px;
    width: 145px;
    height: 175px;
    border: 4px solid #211813;
    overflow: hidden;
}

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


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

.h2-statement {
    min-height: 260px;
    padding: 45px 5%;
    background: #eee4d6;
    color: #28211d;
    display: grid;
    grid-template-columns: 45px 1.15fr .85fr;
    gap: 25px;
    align-items: center;
}

.h2-statement-number {
    align-self: start;
    font-size: 9px;
    letter-spacing: 2px;
}

.h2-statement-heading h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: clamp(38px, 4.4vw, 58px);
    line-height: .95;
    margin: 0;
}

.h2-statement-heading > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 13px;
}

.h2-statement-copy {
    max-width: 430px;
}

.h2-line {
    width: 45px;
    height: 1px;
    background: #28211d;
    margin-bottom: 15px;
}

.h2-statement-copy p {
    font-size: 12px;
    line-height: 1.65;
    margin: 0 0 15px;
}

.h2-statement-copy a {
    color: inherit;
    text-decoration: none;
    font-size: 9px;
    letter-spacing: 2px;
}


/* =========================================================
   GOLD EDIT
========================================================= */

.h2-gold-edit {
    min-height: 430px;
    padding: 35px 5%;
    background: #f7f1e8;
    color: #28211d;
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 20px;
    align-items: stretch;
}

.h2-gold-image {
    height: 360px;
    overflow: hidden;
    position: relative;
}

.h2-gold-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-gold-edit:hover .h2-gold-image img {
    transform: scale(1.05);
}

.h2-gold-content {
    align-self: center;
    margin-left: -45px;
    position: relative;
    z-index: 2;
    background: #f7f1e8;
    padding: 30px;
}

.h2-gold-content > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 13px;
}

.h2-gold-content h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: clamp(40px, 4vw, 56px);
    line-height: .92;
    margin: 0 0 18px;
}

.h2-gold-content p {
    font-size: 12px;
    line-height: 1.7;
    margin: 0 0 18px;
}

.h2-detail-line {
    display: flex;
    gap: 20px;
    padding: 11px 0;
    border-top: 1px solid rgba(40,33,29,.25);
    border-bottom: 1px solid rgba(40,33,29,.25);
    margin-bottom: 16px;
}

.h2-detail-line span {
    font-size: 8px;
    letter-spacing: 2px;
}

.h2-gold-content a,
.h2-diamond-content a,
.h2-watch-content a,
.h2-silver-content a,
.h2-time-content a,
.h2-consultation-content a,
.h2-showroom-content a {
    color: inherit;
    text-decoration: none;
    font-size: 9px;
    letter-spacing: 2px;
}


/* =========================================================
   DIAMOND EDIT
========================================================= */

.h2-diamond-edit {
    min-height: 430px;
    padding: 35px 5%;
    background: #29211e;
    color: #f8f0e7;
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 25px;
    align-items: center;
}

.h2-diamond-content {
    padding-right: 15px;
}

.h2-diamond-content > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 13px;
}

.h2-diamond-content h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: clamp(40px, 4vw, 57px);
    line-height: .93;
    margin: 0 0 18px;
}

.h2-diamond-content p {
    max-width: 400px;
    font-size: 12px;
    line-height: 1.7;
}

.h2-diamond-facts {
    display: flex;
    gap: 25px;
    margin: 20px 0;
}

.h2-diamond-facts div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.h2-diamond-facts strong {
    font-family: Georgia, serif;
    font-size: 21px;
    font-weight: 400;
}

.h2-diamond-facts span {
    font-size: 7px;
    letter-spacing: 2px;
    opacity: .65;
}

.h2-diamond-image {
    height: 360px;
    overflow: hidden;
}

.h2-diamond-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-diamond-edit:hover .h2-diamond-image img {
    transform: scale(1.05);
}


/* =========================================================
   WATCH EDIT
========================================================= */

.h2-watch-edit {
    min-height: 390px;
    padding: 30px 5%;
    background: #d8c8b7;
    color: #28211d;
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 25px;
    align-items: center;
}

.h2-watch-image {
    height: 320px;
    overflow: hidden;
}

.h2-watch-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-watch-edit:hover .h2-watch-image img {
    transform: scale(1.05);
}

.h2-watch-image-label {
    position: absolute;
    margin: -35px 0 0 15px;
    z-index: 2;
    background: #211813;
    color: #fff;
    padding: 8px 11px;
    font-size: 7px;
    letter-spacing: 2px;
}

.h2-watch-content {
    max-width: 500px;
}

.h2-watch-content > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 13px;
}

.h2-watch-content h2 {
    font-family: Georgia, serif;
    font-size: clamp(40px, 4vw, 57px);
    font-weight: 400;
    line-height: .93;
    margin: 0 0 18px;
}

.h2-watch-content p {
    font-size: 12px;
    line-height: 1.7;
    margin-bottom: 15px;
}

.h2-watch-specs {
    display: flex;
    gap: 30px;
    margin: 18px 0;
}

.h2-watch-specs div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.h2-watch-specs strong {
    font-family: Georgia, serif;
    font-size: 20px;
    font-weight: 400;
}

.h2-watch-specs span {
    font-size: 7px;
    letter-spacing: 2px;
}


/* =========================================================
   JEWELLERY × TIME
========================================================= */

.h2-overlap {
    min-height: 450px;
    padding: 40px 5%;
    background: #f4ebe0;
    color: #28211d;
}

.h2-overlap-heading {
    max-width: 580px;
}

.h2-overlap-heading > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.h2-overlap-heading h2 {
    font-family: Georgia, serif;
    font-size: clamp(40px, 4vw, 55px);
    font-weight: 400;
    line-height: .94;
    margin: 0 0 12px;
}

.h2-overlap-heading p {
    max-width: 430px;
    font-size: 12px;
    line-height: 1.65;
    margin: 0;
}

.h2-overlap-stage {
    max-width: 1050px;
    height: 255px;
    margin: 20px auto 0;
    position: relative;
}

.h2-overlap-image {
    position: absolute;
    overflow: hidden;
}

.h2-overlap-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-overlap-image:hover img {
    transform: scale(1.06);
}

.h2-overlap-back {
    width: 48%;
    height: 220px;
    right: 6%;
    top: 0;
}

.h2-overlap-front {
    width: 43%;
    height: 205px;
    left: 8%;
    bottom: 0;
    z-index: 2;
    border: 6px solid #f4ebe0;
}

.h2-overlap-note {
    position: absolute;
    right: 0;
    bottom: 5px;
    z-index: 4;
    width: 155px;
    padding: 14px;
    background: #28211d;
    color: #f8f0e7;
}

.h2-overlap-note span {
    font-size: 7px;
    letter-spacing: 2px;
}

.h2-overlap-note p {
    font-family: Georgia, serif;
    font-size: 12px;
    line-height: 1.4;
    margin: 8px 0 0;
}


/* =========================================================
   SILVER
========================================================= */

.h2-silver-edit {
    min-height: 300px;
    padding: 35px 5%;
    background: #d8d0c8;
    color: #28211d;
    display: grid;
    grid-template-columns: 35px 1fr 1fr;
    gap: 25px;
    align-items: center;
}

.h2-silver-number {
    align-self: start;
    font-size: 8px;
    letter-spacing: 2px;
}

.h2-silver-image {
    height: 240px;
    overflow: hidden;
}

.h2-silver-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-silver-edit:hover .h2-silver-image img {
    transform: scale(1.06);
}

.h2-silver-content {
    max-width: 450px;
}

.h2-silver-content > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.h2-silver-content h2 {
    font-family: Georgia, serif;
    font-size: 48px;
    font-weight: 400;
    line-height: .94;
    margin: 0 0 15px;
}

.h2-silver-content p {
    font-size: 12px;
    line-height: 1.65;
    margin-bottom: 15px;
}


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

.h2-difference {
    min-height: 320px;
    padding: 40px 5%;
    background: #211813;
    color: #f8f0e7;
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 45px;
    align-items: center;
}

.h2-difference-title > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.h2-difference-title h2 {
    font-family: Georgia, serif;
    font-size: clamp(38px, 4vw, 54px);
    font-weight: 400;
    line-height: .94;
    margin: 0;
}

.h2-difference-list {
    border-top: 1px solid rgba(255,255,255,.2);
}

.h2-difference-item {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,.2);
}

.h2-difference-item > span {
    font-family: Georgia, serif;
    font-size: 19px;
}

.h2-difference-item h3 {
    font-size: 9px;
    letter-spacing: 2px;
    margin: 0 0 5px;
}

.h2-difference-item p {
    font-size: 11px;
    line-height: 1.55;
    opacity: .7;
    margin: 0;
}


/* =========================================================
   DETAIL STORY
========================================================= */

.h2-detail-story {
    padding: 40px 5%;
    background: #f5ede3;
    color: #28211d;
}

.h2-detail-story-intro {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 22px;
}

.h2-detail-story-intro > span {
    font-size: 9px;
    letter-spacing: 3px;
}

.h2-detail-story-intro h2 {
    font-family: Georgia, serif;
    font-size: 45px;
    font-weight: 400;
    margin: 8px 0 0;
}

.h2-detail-story-intro p {
    max-width: 340px;
    font-size: 11px;
    line-height: 1.65;
    margin: 0;
}

.h2-detail-grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr .65fr;
    gap: 14px;
    align-items: end;
}

.h2-detail-large {
    height: 280px;
    position: relative;
    overflow: hidden;
}

.h2-detail-small {
    height: 205px;
    position: relative;
    overflow: hidden;
}

.h2-detail-large img,
.h2-detail-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-detail-large:hover img,
.h2-detail-small:hover img {
    transform: scale(1.06);
}

.h2-detail-large span,
.h2-detail-small span {
    position: absolute;
    left: 12px;
    bottom: 10px;
    color: #fff;
    font-size: 7px;
    letter-spacing: 2px;
}

.h2-detail-text {
    padding: 10px 0;
}

.h2-detail-text strong {
    font-family: Georgia, serif;
    font-size: 23px;
    font-weight: 400;
}

.h2-detail-text h3 {
    font-family: Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    margin: 8px 0;
}

.h2-detail-text p {
    font-size: 11px;
    line-height: 1.6;
    margin: 0;
}


/* =========================================================
   TIME STORY
========================================================= */

.h2-time-story {
    min-height: 350px;
    padding: 35px 5%;
    background: #2b211e;
    color: #f8f0e7;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 30px;
    align-items: center;
}

.h2-time-image {
    height: 285px;
    overflow: hidden;
}

.h2-time-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-time-story:hover .h2-time-image img {
    transform: scale(1.05);
}

.h2-time-content {
    max-width: 450px;
}

.h2-time-content > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.h2-time-content h2 {
    font-family: Georgia, serif;
    font-size: 48px;
    font-weight: 400;
    line-height: .94;
    margin: 0 0 15px;
}

.h2-time-content p {
    font-size: 11px;
    line-height: 1.65;
    margin-bottom: 15px;
}

.h2-time-points {
    display: flex;
    gap: 25px;
    margin: 17px 0;
}

.h2-time-points div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.h2-time-points strong {
    font-family: Georgia, serif;
    font-size: 19px;
    font-weight: 400;
}

.h2-time-points span {
    font-size: 7px;
    letter-spacing: 2px;
}


/* =========================================================
   MOMENTS
========================================================= */

.h2-moments {
    padding: 40px 5%;
    background: #e9dfd2;
    color: #28211d;
}

.h2-moments-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 22px;
}

.h2-moments-heading > span {
    font-size: 9px;
    letter-spacing: 3px;
}

.h2-moments-heading h2 {
    font-family: Georgia, serif;
    font-size: 43px;
    font-weight: 400;
    line-height: .95;
    margin: 7px 0 0;
}

.h2-moments-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.h2-moment {
    color: inherit;
    text-decoration: none;
}

.h2-moment-image {
    height: 215px;
    overflow: hidden;
}

.h2-moment-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s ease;
}

.h2-moment:hover .h2-moment-image img {
    transform: scale(1.06);
}

.h2-moment-text {
    padding: 11px 0;
    border-bottom: 1px solid rgba(40,33,29,.25);
}

.h2-moment-text span {
    font-size: 7px;
    letter-spacing: 2px;
}

.h2-moment-text h3 {
    font-size: 9px;
    letter-spacing: 2px;
    margin: 6px 0 4px;
}

.h2-moment-text p {
    font-size: 10px;
    margin: 0;
    opacity: .7;
}


/* =========================================================
   CONSULTATION
========================================================= */

.h2-consultation {
    min-height: 320px;
    padding: 35px 5%;
    background: #d4c1ad;
    color: #28211d;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
}

.h2-consultation-image {
    height: 255px;
    overflow: hidden;
}

.h2-consultation-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-consultation:hover .h2-consultation-image img {
    transform: scale(1.05);
}

.h2-consultation-content {
    max-width: 450px;
}

.h2-consultation-content > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.h2-consultation-content h2 {
    font-family: Georgia, serif;
    font-size: 47px;
    font-weight: 400;
    line-height: .94;
    margin: 0 0 15px;
}

.h2-consultation-content p {
    font-size: 11px;
    line-height: 1.65;
    margin-bottom: 15px;
}


/* =========================================================
   SHOWROOM
========================================================= */

.h2-showroom {
    min-height: 320px;
    padding: 35px 5%;
    background: #f7f1e8;
    color: #28211d;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 30px;
    align-items: center;
}

.h2-showroom-content {
    max-width: 440px;
}

.h2-showroom-content > span {
    display: block;
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.h2-showroom-content h2 {
    font-family: Georgia, serif;
    font-size: 47px;
    font-weight: 400;
    line-height: .94;
    margin: 0 0 15px;
}

.h2-showroom-content p {
    font-size: 11px;
    line-height: 1.65;
    margin-bottom: 15px;
}

.h2-showroom-image {
    height: 270px;
    overflow: hidden;
}

.h2-showroom-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-showroom:hover .h2-showroom-image img {
    transform: scale(1.05);
}


/* =========================================================
   SCROLL ANIMATION
========================================================= */

.h2-statement-heading,
.h2-statement-copy,
.h2-gold-image,
.h2-gold-content,
.h2-diamond-content,
.h2-diamond-image,
.h2-watch-image,
.h2-watch-content,
.h2-overlap-heading,
.h2-overlap-stage,
.h2-silver-image,
.h2-silver-content,
.h2-difference-title,
.h2-difference-list,
.h2-detail-story-intro,
.h2-detail-grid,
.h2-time-image,
.h2-time-content,
.h2-moments-heading,
.h2-moment,
.h2-consultation-image,
.h2-consultation-content,
.h2-showroom-content,
.h2-showroom-image {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity .7s ease, transform .7s ease;
}

.h2-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.h2-moment:nth-child(2) {
    transition-delay: .1s;
}

.h2-moment:nth-child(3) {
    transition-delay: .2s;
}


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

@media (max-width: 900px) {

    .h2-hero-content {
        width: 65%;
        margin-left: 5%;
    }

    .h2-statement {
        grid-template-columns: 35px 1fr;
    }

    .h2-statement-copy {
        grid-column: 2;
    }

    .h2-gold-edit {
        grid-template-columns: 1fr .75fr;
    }

    .h2-gold-image {
        height: 330px;
    }

    .h2-diamond-edit {
        grid-template-columns: .8fr 1.2fr;
    }

    .h2-diamond-image {
        height: 330px;
    }

    .h2-watch-edit,
    .h2-time-story,
    .h2-consultation,
    .h2-showroom {
        grid-template-columns: 1fr 1fr;
    }

    .h2-watch-image {
        height: 290px;
    }

    .h2-detail-grid {
        grid-template-columns: 1fr 1fr;
    }

    .h2-detail-large {
        grid-column: span 2;
    }

    .h2-detail-small {
        height: 210px;
    }

}


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

@media (max-width: 600px) {

    .h2-hero {
        min-height: 560px;
    }

    .h2-hero-content {
        width: 90%;
        margin-left: 5%;
    }

    .h2-hero-content h1 {
        font-size: 46px;
    }

    .h2-hero-small-image {
        width: 100px;
        height: 130px;
        right: 5%;
        bottom: 20px;
    }

    .h2-statement {
        padding: 35px 5%;
        grid-template-columns: 25px 1fr;
        gap: 12px;
    }

    .h2-statement-heading h2 {
        font-size: 37px;
    }

    .h2-gold-edit,
    .h2-diamond-edit,
    .h2-watch-edit,
    .h2-time-story,
    .h2-consultation,
    .h2-showroom {
        grid-template-columns: 1fr;
        padding: 30px 5%;
        gap: 20px;
    }

    .h2-gold-image,
    .h2-diamond-image,
    .h2-watch-image,
    .h2-time-image,
    .h2-consultation-image,
    .h2-showroom-image {
        height: 240px;
    }

    .h2-gold-content {
        margin: -35px 4% 0 auto;
        padding: 22px;
    }

    .h2-diamond-edit {
        min-height: auto;
    }

    .h2-diamond-content {
        padding: 0;
    }

    .h2-overlap {
        padding: 35px 5%;
    }

    .h2-overlap-stage {
        height: 250px;
    }

    .h2-overlap-back {
        width: 70%;
        height: 190px;
        right: 0;
    }

    .h2-overlap-front {
        width: 62%;
        height: 175px;
        left: 0;
    }

    .h2-overlap-note {
        width: 135px;
        padding: 11px;
    }

    .h2-silver-edit {
        grid-template-columns: 1fr;
        padding: 30px 5%;
        gap: 15px;
    }

    .h2-silver-number {
        display: none;
    }

    .h2-silver-image {
        height: 220px;
    }

    .h2-difference {
        grid-template-columns: 1fr;
        padding: 35px 5%;
        gap: 25px;
    }

    .h2-detail-story {
        padding: 35px 5%;
    }

    .h2-detail-story-intro {
        display: block;
    }

    .h2-detail-story-intro h2 {
        font-size: 40px;
        margin-bottom: 12px;
    }

    .h2-detail-grid {
        grid-template-columns: 1fr;
    }

    .h2-detail-large {
        grid-column: auto;
        height: 240px;
    }

    .h2-detail-small {
        height: 210px;
    }

    .h2-moments {
        padding: 35px 5%;
    }

    .h2-moments-heading {
        display: block;
    }

    .h2-moments-heading h2 {
        font-size: 39px;
    }

    .h2-moments-grid {
        grid-template-columns: 1fr;
    }

    .h2-moment-image {
        height: 235px;
    }

}
/* =========================================================
   HOME 2 PREMIUM ANIMATIONS
========================================================= */

/* LEFT REVEAL */
.h2-animate-left {
    opacity: 0;
    transform: translateX(-70px);
    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(.22,.61,.36,1);
}

.h2-animate-left.h2-show {
    opacity: 1;
    transform: translateX(0);
}


/* RIGHT REVEAL */
.h2-animate-right {
    opacity: 0;
    transform: translateX(70px);
    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(.22,.61,.36,1);
}

.h2-animate-right.h2-show {
    opacity: 1;
    transform: translateX(0);
}


/* BOTTOM REVEAL */
.h2-animate-up {
    opacity: 0;
    transform: translateY(60px);
    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(.22,.61,.36,1);
}

.h2-animate-up.h2-show {
    opacity: 1;
    transform: translateY(0);
}


/* SCALE / POP */
.h2-animate-scale {
    opacity: 0;
    transform: scale(.88);
    transition:
        opacity 1s ease,
        transform 1.1s cubic-bezier(.22,.61,.36,1);
}

.h2-animate-scale.h2-show {
    opacity: 1;
    transform: scale(1);
}


/* CLIP REVEAL */
.h2-animate-clip {
    clip-path: inset(0 100% 0 0);
    transition:
        clip-path 1.2s cubic-bezier(.77,0,.18,1);
}

.h2-animate-clip.h2-show {
    clip-path: inset(0 0 0 0);
}


/* IMAGE ZOOM */
.h2-image-zoom {
    overflow: hidden;
}

.h2-image-zoom img {
    transform: scale(1.12);
    transition: transform 1.5s cubic-bezier(.22,.61,.36,1);
}

.h2-image-zoom.h2-show img {
    transform: scale(1);
}


/* IMAGE MOVEMENT */
.h2-image-move img {
    transform: scale(1.08) translateX(-15px);
    transition: transform 1.4s cubic-bezier(.22,.61,.36,1);
}

.h2-image-move.h2-show img {
    transform: scale(1) translateX(0);
}


/* TEXT STAGGER */
.h2-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.h2-stagger.h2-show > *:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .05s;
}

.h2-stagger.h2-show > *:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .15s;
}

.h2-stagger.h2-show > *:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .25s;
}

.h2-stagger.h2-show > *:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .35s;
}


/* HERO CONTENT */
.h2-hero-content {
    animation: h2HeroText 1.2s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes h2HeroText {
    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* HERO SMALL IMAGE */
.h2-hero-small-image {
    animation: h2HeroSmall 1.3s .35s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes h2HeroSmall {
    from {
        opacity: 0;
        transform: translateY(35px) scale(.85);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* FLOATING DETAIL */
.h2-floating {
    animation: h2Floating 5s ease-in-out infinite;
}

@keyframes h2Floating {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


/* HOVER IMAGE */
.h2-hover-image {
    overflow: hidden;
}

.h2-hover-image img {
    transition: transform 1s cubic-bezier(.22,.61,.36,1);
}

.h2-hover-image:hover img {
    transform: scale(1.06);
}


/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {

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

}
/* =========================================================
   ZIVARA HOME 2
   COMPACT EDITORIAL LUXURY DESIGN
========================================================= */

.h2-hero,
.h2-category-strip,
.h2-dual-feature,
.h2-values,
.h2-arrivals,
.h2-watch-gift,
.h2-services,
.h2-stories,
.h2-consultation,
.h2-showroom {
    width: 100%;
    overflow: hidden;
}

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

.h2-hero {
    min-height: 590px;
    position: relative;
    background: #201c19;
    color: #f7f3ed;
    display: flex;
    align-items: center;
}

.h2-hero-visual {
    position: absolute;
    inset: 0;
}

.h2-hero-main-image {
    width: 100%;
    height: 100%;
}

.h2-hero-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.h2-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(20,16,14,.78),
            rgba(20,16,14,.30),
            rgba(20,16,14,.08)
        );
    z-index: 1;
}

.h2-hero-content {
    position: relative;
    z-index: 3;
    width: 48%;
    margin-left: 7%;
    padding: 50px 0;
}

.h2-hero-content span {
    display: block;
    font-size: 10px;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.h2-hero-content h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 5vw, 78px);
    line-height: .94;
    font-weight: 400;
    margin: 0 0 25px;
}

.h2-hero-content p {
    max-width: 470px;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 28px;
}

.h2-hero-links {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.h2-hero-links a {
    color: #fff;
    font-size: 10px;
    letter-spacing: 2px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.7);
    padding-bottom: 7px;
    transition: .3s ease;
}

.h2-hero-links a:hover {
    letter-spacing: 3px;
}

.h2-hero-small-image {
    position: absolute;
    z-index: 4;
    right: 7%;
    bottom: 35px;
    width: 150px;
    height: 190px;
    border: 1px solid rgba(255,255,255,.6);
    padding: 7px;
}

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


/* =========================================================
   CATEGORY STRIP
========================================================= */

.h2-category-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #e8dccd;
    border-bottom: 1px solid #cdbda9;
}

.h2-category-item {
    min-height: 155px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    color: #211d19;
    text-decoration: none;
    border-right: 1px solid #cdbda9;
    transition: background .35s ease;
}

.h2-category-item:last-child {
    border-right: 0;
}

.h2-category-item:hover {
    background: #ddd0c0;
}

.h2-category-image {
    width: 88px;
    height: 105px;
    flex-shrink: 0;
    overflow: hidden;
    background: #f7f3ed;
}

.h2-category-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .6s ease;
}

.h2-category-item:hover img {
    transform: scale(1.07);
}

.h2-category-item strong,
.h2-category-item span,
.h2-category-item small {
    display: block;
}

.h2-category-item strong {
    font-family: Georgia, serif;
    font-size: 17px;
    font-weight: 400;
}

.h2-category-item span {
    font-size: 9px;
    letter-spacing: 2px;
    margin-top: 3px;
}

.h2-category-item small {
    font-size: 8px;
    letter-spacing: 1px;
    margin-top: 15px;
}


/* =========================================================
   DUAL FEATURE
========================================================= */

.h2-dual-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.h2-dual-panel {
    min-height: 430px;
    position: relative;
    display: flex;
    align-items: stretch;
}

.h2-dark-panel {
    background: #27211d;
    color: #f7f3ed;
}

.h2-dual-image {
    width: 53%;
    overflow: hidden;
}

.h2-dual-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.h2-dual-panel:hover .h2-dual-image img {
    transform: scale(1.04);
}

.h2-dual-content {
    width: 47%;
    padding: 45px 32px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.h2-dual-content span {
    font-size: 9px;
    letter-spacing: 2.5px;
    margin-bottom: 18px;
}

.h2-dual-content h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: 35px;
    line-height: 1.05;
    margin: 0 0 18px;
}

.h2-dual-content p {
    font-size: 12px;
    line-height: 1.7;
    margin: 0 0 22px;
}

.h2-dual-content a {
    color: inherit;
    font-size: 9px;
    letter-spacing: 2px;
    text-decoration: none;
}


/* =========================================================
   VALUES
========================================================= */

.h2-values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #f7f3ed;
    border-bottom: 1px solid #d9cbbb;
}

.h2-value {
    min-height: 170px;
    padding: 30px 25px;
    border-right: 1px solid #d9cbbb;
}

.h2-value:last-child {
    border-right: 0;
}

.h2-value-icon {
    font-size: 24px;
    display: block;
    margin-bottom: 13px;
}

.h2-value h3 {
    font-size: 10px;
    letter-spacing: 2px;
    margin: 0 0 9px;
}

.h2-value p {
    font-size: 11px;
    line-height: 1.6;
    margin: 0;
    max-width: 210px;
}


/* =========================================================
   NEW ARRIVALS
========================================================= */

.h2-arrivals {
    display: grid;
    grid-template-columns: 235px 1fr;
    gap: 25px;
    padding: 45px 5%;
    background: #eee5da;
}

.h2-arrivals-intro {
    padding: 10px 10px 10px 0;
}

.h2-arrivals-intro span {
    font-size: 9px;
    letter-spacing: 2.5px;
}

.h2-arrivals-intro h2 {
    font-family: Georgia, serif;
    font-size: 42px;
    font-weight: 400;
    line-height: .95;
    margin: 15px 0;
}

.h2-arrivals-intro p {
    font-size: 11px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.h2-arrivals-intro a {
    color: inherit;
    text-decoration: none;
    font-size: 9px;
    letter-spacing: 2px;
}

.h2-products {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

.h2-product {
    text-decoration: none;
    color: #241f1b;
}

.h2-product-image {
    height: 245px;
    position: relative;
    background: #f8f5f0;
    overflow: hidden;
    margin-bottom: 12px;
}

.h2-product-image span {
    position: absolute;
    z-index: 2;
    right: 10px;
    top: 9px;
    font-size: 18px;
}

.h2-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .7s ease;
}

.h2-product:hover img {
    transform: scale(1.06);
}

.h2-product strong {
    display: block;
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: 400;
}

.h2-product small {
    display: block;
    margin-top: 5px;
    font-size: 10px;
}


/* =========================================================
   WATCH + GIFT
========================================================= */

.h2-watch-gift {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    min-height: 410px;
}

.h2-watch-banner,
.h2-gift-banner {
    position: relative;
    overflow: hidden;
}

.h2-watch-banner {
    background: #1e1b19;
    color: #fff;
}

.h2-gift-banner {
    background: #d5c2ad;
    color: #211c18;
}

.h2-watch-banner-image,
.h2-gift-banner-image {
    position: absolute;
    inset: 0;
}

.h2-watch-banner-image img,
.h2-gift-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h2-watch-banner::after,
.h2-gift-banner::after {
    content: "";
    position: absolute;
    inset: 0;
}

.h2-watch-banner::after {
    background: linear-gradient(
        90deg,
        rgba(15,13,12,.86),
        rgba(15,13,12,.20)
    );
}

.h2-gift-banner::after {
    background: linear-gradient(
        90deg,
        rgba(40,30,24,.75),
        rgba(40,30,24,.10)
    );
}

.h2-watch-banner-content,
.h2-gift-banner-content {
    position: relative;
    z-index: 2;
    width: 60%;
    padding: 60px 8%;
}

.h2-watch-banner-content span,
.h2-gift-banner-content span {
    font-size: 9px;
    letter-spacing: 2.5px;
}

.h2-watch-banner-content h2,
.h2-gift-banner-content h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.05;
    margin: 16px 0;
}

.h2-watch-banner-content p,
.h2-gift-banner-content p {
    font-size: 11px;
    line-height: 1.7;
    margin-bottom: 22px;
}

.h2-watch-banner-content a,
.h2-gift-banner-content a {
    color: inherit;
    font-size: 9px;
    letter-spacing: 2px;
    text-decoration: none;
}


/* =========================================================
   SERVICES
========================================================= */

.h2-services {
    display: grid;
    grid-template-columns: 180px repeat(4, 1fr);
    background: #f7f3ed;
    border-bottom: 1px solid #d8cab9;
}

.h2-services-title,
.h2-service {
    min-height: 165px;
    padding: 28px 22px;
    border-right: 1px solid #d8cab9;
}

.h2-services-title {
    display: flex;
    align-items: flex-start;
}

.h2-services-title span {
    font-size: 9px;
    letter-spacing: 2.5px;
}

.h2-service {
    color: #28231e;
    text-decoration: none;
    transition: background .3s ease;
}

.h2-service:hover {
    background: #e8ded1;
}

.h2-service-icon {
    display: block;
    font-size: 25px;
    margin-bottom: 17px;
}

.h2-service strong {
    display: block;
    font-size: 9px;
    letter-spacing: 1.5px;
}

.h2-service p {
    font-size: 10px;
    line-height: 1.6;
    margin-top: 9px;
}

.h2-service-all {
    grid-column: 1 / -1;
    text-align: right;
    padding: 12px 5%;
    color: inherit;
    text-decoration: none;
    font-size: 8px;
    letter-spacing: 2px;
    border-top: 1px solid #d8cab9;
}


/* =========================================================
   THREE STORIES
========================================================= */

.h2-stories {
    display: grid;
    grid-template-columns: 1.1fr .9fr 1.1fr;
    min-height: 390px;
}

.h2-story {
    position: relative;
    overflow: hidden;
    min-height: 390px;
    color: #fff;
    text-decoration: none;
    background: #211d1a;
}

.h2-story-image {
    position: absolute;
    inset: 0;
}

.h2-story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.h2-story:hover img {
    transform: scale(1.07);
}

.h2-story::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        transparent 25%,
        rgba(0,0,0,.78)
    );
}

.h2-story-content {
    position: absolute;
    z-index: 2;
    bottom: 28px;
    left: 28px;
    right: 25px;
}

.h2-story-content span {
    font-size: 8px;
    letter-spacing: 2px;
}

.h2-story-content h3 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: 25px;
    line-height: 1.1;
    margin: 10px 0 17px;
}

.h2-story-content strong {
    font-size: 8px;
    letter-spacing: 1.8px;
}


/* =========================================================
   CONSULTATION
========================================================= */

.h2-consultation {
    min-height: 350px;
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    background: #d6c1aa;
}

.h2-consultation-content {
    padding: 45px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.h2-consultation-content span {
    font-size: 9px;
    letter-spacing: 2.5px;
}

.h2-consultation-content h2 {
    font-family: Georgia, serif;
    font-size: 42px;
    font-weight: 400;
    line-height: .98;
    margin: 15px 0 17px;
}

.h2-consultation-content p {
    font-size: 11px;
    line-height: 1.7;
    max-width: 470px;
    margin-bottom: 22px;
}

.h2-consultation-content a {
    color: inherit;
    text-decoration: none;
    font-size: 9px;
    letter-spacing: 2px;
}

.h2-consultation-image {
    min-height: 350px;
    overflow: hidden;
}

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


/* =========================================================
   SHOWROOM
========================================================= */

.h2-showroom {
    min-height: 360px;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    background: #29231f;
    color: #f7f3ed;
}

.h2-showroom-image {
    overflow: hidden;
}

.h2-showroom-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.h2-showroom-content {
    padding: 45px 9%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.h2-showroom-content span {
    font-size: 9px;
    letter-spacing: 2.5px;
}

.h2-showroom-content h2 {
    font-family: Georgia, serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    margin: 15px 0;
}

.h2-showroom-content p {
    font-size: 11px;
    line-height: 1.7;
    max-width: 400px;
    margin-bottom: 22px;
}

.h2-showroom-content a {
    color: inherit;
    text-decoration: none;
    font-size: 9px;
    letter-spacing: 2px;
}


/* =========================================================
   HOME 2 ANIMATION STATES
========================================================= */

.h2-animate-left,
.h2-animate-right,
.h2-animate-up,
.h2-animate-scale,
.h2-animate-clip,
.h2-image-zoom,
.h2-image-move,
.h2-stagger {
    will-change: transform, opacity;
}

.h2-animate-left {
    opacity: 0;
    transform: translateX(-55px);
    transition: opacity .8s ease, transform .9s ease;
}

.h2-animate-left.h2-show {
    opacity: 1;
    transform: translateX(0);
}

.h2-animate-right {
    opacity: 0;
    transform: translateX(55px);
    transition: opacity .8s ease, transform .9s ease;
}

.h2-animate-right.h2-show {
    opacity: 1;
    transform: translateX(0);
}

.h2-animate-up {
    opacity: 0;
    transform: translateY(45px);
    transition: opacity .8s ease, transform .9s ease;
}

.h2-animate-up.h2-show {
    opacity: 1;
    transform: translateY(0);
}

.h2-animate-scale {
    opacity: 0;
    transform: scale(.9);
    transition: opacity .9s ease, transform 1s ease;
}

.h2-animate-scale.h2-show {
    opacity: 1;
    transform: scale(1);
}

.h2-animate-clip {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s ease;
}

.h2-animate-clip.h2-show {
    clip-path: inset(0 0 0 0);
}

.h2-image-zoom img {
    transform: scale(1.08);
    transition: transform 1.2s ease;
}

.h2-image-zoom.h2-show img {
    transform: scale(1);
}

.h2-image-move img {
    transform: scale(1.07) translateX(-12px);
    transition: transform 1.2s ease;
}

.h2-image-move.h2-show img {
    transform: scale(1) translateX(0);
}

.h2-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}

.h2-stagger.h2-show > * {
    opacity: 1;
    transform: translateY(0);
}

.h2-stagger.h2-show > *:nth-child(1) {
    transition-delay: .05s;
}

.h2-stagger.h2-show > *:nth-child(2) {
    transition-delay: .12s;
}

.h2-stagger.h2-show > *:nth-child(3) {
    transition-delay: .19s;
}

.h2-stagger.h2-show > *:nth-child(4) {
    transition-delay: .26s;
}

.h2-stagger.h2-show > *:nth-child(5) {
    transition-delay: .33s;
}


/* =========================================================
   FLOATING WATCH
========================================================= */

.h2-floating {
    animation: h2Floating 5s ease-in-out infinite;
}

@keyframes h2Floating {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


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

@media (max-width: 1100px) {

    .h2-category-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .h2-products {
        grid-template-columns: repeat(3, 1fr);
    }

    .h2-arrivals {
        grid-template-columns: 190px 1fr;
    }

    .h2-services {
        grid-template-columns: repeat(2, 1fr);
    }

    .h2-services-title {
        grid-column: 1 / -1;
        min-height: auto;
    }

    .h2-stories {
        grid-template-columns: repeat(3, 1fr);
    }

}


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

@media (max-width: 700px) {

    .h2-hero {
        min-height: 540px;
    }

    .h2-hero-content {
        width: 85%;
        margin-left: 7%;
    }

    .h2-hero-content h1 {
        font-size: 47px;
    }

    .h2-hero-small-image {
        width: 105px;
        height: 135px;
        right: 5%;
        bottom: 20px;
    }

    .h2-category-strip {
        grid-template-columns: 1fr 1fr;
    }

    .h2-category-item {
        min-height: 130px;
        padding: 15px;
        gap: 10px;
    }

    .h2-category-image {
        width: 65px;
        height: 80px;
    }

    .h2-category-item strong {
        font-size: 13px;
    }

    .h2-dual-feature {
        grid-template-columns: 1fr;
    }

    .h2-dual-panel {
        min-height: 350px;
    }

    .h2-dual-content {
        padding: 30px 20px;
    }

    .h2-dual-content h2 {
        font-size: 29px;
    }

    .h2-values {
        grid-template-columns: 1fr 1fr;
    }

    .h2-value {
        min-height: 145px;
        padding: 20px 15px;
    }

    .h2-arrivals {
        display: block;
        padding: 35px 5%;
    }

    .h2-arrivals-intro {
        margin-bottom: 25px;
    }

    .h2-products {
        grid-template-columns: repeat(2, 1fr);
    }

    .h2-product-image {
        height: 190px;
    }

    .h2-watch-gift {
        grid-template-columns: 1fr;
    }

    .h2-watch-banner,
    .h2-gift-banner {
        min-height: 330px;
    }

    .h2-watch-banner-content,
    .h2-gift-banner-content {
        width: 75%;
        padding: 45px 7%;
    }

    .h2-services {
        grid-template-columns: 1fr 1fr;
    }

    .h2-services-title {
        grid-column: 1 / -1;
    }

    .h2-service {
        min-height: 145px;
    }

    .h2-stories {
        grid-template-columns: 1fr;
    }

    .h2-story {
        min-height: 300px;
    }

    .h2-consultation,
    .h2-showroom {
        grid-template-columns: 1fr;
    }

    .h2-consultation {
        display: flex;
        flex-direction: column-reverse;
    }

    .h2-consultation-image {
        min-height: 260px;
    }

    .h2-consultation-content,
    .h2-showroom-content {
        padding: 35px 7%;
    }

    .h2-showroom-image {
        min-height: 260px;
    }

}


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

@media (max-width: 450px) {

    .h2-category-strip {
        grid-template-columns: 1fr;
    }

    .h2-category-item {
        border-right: 0;
        border-bottom: 1px solid #cdbda9;
    }

    .h2-values {
        grid-template-columns: 1fr;
    }

    .h2-value {
        border-right: 0;
        border-bottom: 1px solid #d9cbbb;
    }

    .h2-products {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .h2-product-image {
        height: 170px;
    }

    .h2-services {
        grid-template-columns: 1fr;
    }

    .h2-service {
        border-right: 0;
        border-bottom: 1px solid #d8cab9;
    }

    .h2-services-title {
        min-height: auto;
    }

    .h2-hero-content h1 {
        font-size: 42px;
    }

}
/* =========================================================
    SCROLL ANIMATIONS
========================================================= */
/* HOME 2 — FORCE CONTENT VISIBLE */

.h2-animate-left,
.h2-animate-right,
.h2-animate-up,
.h2-animate-scale,
.h2-animate-clip,
.h2-image-zoom,
.h2-image-move,
.h2-statement-heading,
.h2-statement-copy,
.h2-gold-image,
.h2-gold-content,
.h2-diamond-content,
.h2-diamond-image,
.h2-watch-image,
.h2-watch-content,
.h2-moment,
.h2-consultation-image,
.h2-consultation-content,
.h2-showroom-content,
.h2-showroom-image {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
}
/* HOME 2 - SHOW ALL SECTIONS */
body .h2-statement-heading,
body .h2-statement-copy,
body .h2-gold-image,
body .h2-gold-content,
body .h2-diamond-content,
body .h2-diamond-image,
body .h2-watch-image,
body .h2-watch-content,
body .h2-overlap-heading,
body .h2-overlap-stage,
body .h2-silver-image,
body .h2-silver-content,
body .h2-difference-title,
body .h2-difference-list,
body .h2-detail-story-intro,
body .h2-detail-grid,
body .h2-time-image,
body .h2-time-content,
body .h2-moments-heading,
body .h2-moment,
body .h2-consultation-image,
body .h2-consultation-content,
body .h2-showroom-content,
body .h2-showroom-image {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
/* =========================================
   LOGIN THEME + RTL CONTROLS
========================================= */

.login-tools {
    position: absolute;
    top: 28px;
    right: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 20;
}

.login-theme-button,
.login-rtl-button {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(160, 125, 55, 0.35);
    background: transparent;
    color: #6f5525;
    cursor: pointer;
    font-family: inherit;
    transition: 0.3s ease;
}

.login-theme-button:hover,
.login-rtl-button:hover {
    background: #b89452;
    color: #fff;
    border-color: #b89452;
}


/* =========================================
   LOGIN DARK MODE
========================================= */

body.login-page.dark-mode {
    background: #171411;
    color: #f4eee3;
}

body.login-page.dark-mode .login-main {
    background: #171411;
}

body.login-page.dark-mode .login-back-home {
    color: #d8bd82;
}

body.login-page.dark-mode .login-logo-name,
body.login-page.dark-mode .login-logo-jewels,
body.login-page.dark-mode .auth-form h2,
body.login-page.dark-mode .auth-intro,
body.login-page.dark-mode .auth-switch span {
    color: #f4eee3;
}

body.login-page.dark-mode .auth-label {
    color: #d0a85d;
}

body.login-page.dark-mode .auth-field label {
    color: #c9b99d;
}

body.login-page.dark-mode .auth-field input {
    background: #211d19;
    color: #f4eee3;
    border-color: #514738;
}

body.login-page.dark-mode .auth-field input::placeholder {
    color: #887e70;
}

body.login-page.dark-mode .auth-field input:focus {
    border-color: #c5a05b;
}

body.login-page.dark-mode .password-toggle {
    color: #d0a85d;
}

body.login-page.dark-mode .auth-options,
body.login-page.dark-mode .remember-me {
    color: #c9b99d;
}

body.login-page.dark-mode .forgot-password,
body.login-page.dark-mode .auth-switch button {
    color: #d0a85d;
}

body.login-page.dark-mode .terms-check {
    color: #c9b99d;
}

body.login-page.dark-mode .login-theme-button,
body.login-page.dark-mode .login-rtl-button {
    color: #e0c27f;
    border-color: #675638;
}

body.login-page.dark-mode .login-theme-button:hover,
body.login-page.dark-mode .login-rtl-button:hover {
    background: #b89452;
    color: #171411;
}


/* =========================================
   SIGNUP / LOGIN SWITCH
========================================= */

.signup-form {
    display: none;
}

.signup-form.active {
    display: block;
}

.login-form.active {
    display: block;
}

.login-form:not(.active) {
    display: none;
}


/* =========================================
   RTL
========================================= */

html[dir="rtl"] .login-page {
    direction: rtl;
}

html[dir="rtl"] .login-tools {
    right: auto;
    left: 32px;
}

html[dir="rtl"] .login-back-home {
    text-align: right;
}

html[dir="rtl"] .auth-field input {
    text-align: right;
}

html[dir="rtl"] .auth-options {
    direction: rtl;
}

html[dir="rtl"] .auth-submit span {
    transform: rotate(180deg);
}
/* =========================================
   LOGIN TOOLS
========================================= */

.login-tools {
    position: absolute;
    top: 28px;
    right: 32px;
    display: flex;
    gap: 8px;
    z-index: 100;
}

.login-tools button {
    width: 42px;
    height: 42px;
    border: 1px solid #b89452;
    background: #fff;
    color: #765722;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.3s ease;
}

.login-tools button:first-child {
    font-size: 19px;
}

.login-tools button:hover {
    background: #b89452;
    color: #fff;
    transform: translateY(-2px);
}


/* =========================================
   LOGIN DARK MODE
========================================= */

body.login-page.dark-mode {
    background: #15120f !important;
    color: #f5efe4 !important;
}

body.login-page.dark-mode .login-main {
    background: #15120f !important;
}

body.login-page.dark-mode .login-form-area {
    background: #1d1915 !important;
}

body.login-page.dark-mode .login-back-home {
    color: #d6b76e !important;
}

body.login-page.dark-mode .login-logo-name,
body.login-page.dark-mode .login-logo-jewels {
    color: #f5efe4 !important;
}

body.login-page.dark-mode .login-logo-symbol {
    color: #d6b76e !important;
}

body.login-page.dark-mode .auth-label {
    color: #d6b76e !important;
}

body.login-page.dark-mode .auth-form h2 {
    color: #f5efe4 !important;
}

body.login-page.dark-mode .auth-intro {
    color: #bdb3a4 !important;
}

body.login-page.dark-mode .auth-field label {
    color: #d0c5b5 !important;
}

body.login-page.dark-mode .auth-field input {
    background: #25201b !important;
    color: #fff !important;
    border-color: #554a3c !important;
}

body.login-page.dark-mode .auth-field input::placeholder {
    color: #887f72 !important;
}

body.login-page.dark-mode .auth-field input:focus {
    border-color: #c5a35f !important;
}

body.login-page.dark-mode .password-toggle {
    color: #d6b76e !important;
}

body.login-page.dark-mode .auth-options,
body.login-page.dark-mode .remember-me,
body.login-page.dark-mode .terms-check {
    color: #c9bfb1 !important;
}

body.login-page.dark-mode .forgot-password,
body.login-page.dark-mode .auth-switch button {
    color: #d6b76e !important;
}

body.login-page.dark-mode .login-tools button {
    background: #211c17 !important;
    color: #e0c27d !important;
    border-color: #765f36 !important;
}

body.login-page.dark-mode .login-tools button:hover {
    background: #b89452 !important;
    color: #17130f !important;
}

body.login-page.dark-mode .login-bottom-text {
    color: #9f9587 !important;
}


/* =========================================
   SIGNUP SWITCH
========================================= */

.signup-form {
    display: none;
}

.signup-form.active {
    display: block;
}

.login-form:not(.active) {
    display: none;
}

.login-form.active {
    display: block;
}


/* =========================================
   RTL
========================================= */

html[dir="rtl"] .login-tools {
    right: auto;
    left: 32px;
}

html[dir="rtl"] .login-form-area {
    direction: rtl;
}

html[dir="rtl"] .auth-field input {
    text-align: right;
}

html[dir="rtl"] .auth-field label {
    text-align: right;
}

html[dir="rtl"] .auth-options {
    direction: rtl;
}

html[dir="rtl"] .terms-check {
    direction: rtl;
}

html[dir="rtl"] .auth-submit span {
    display: inline-block;
    transform: rotate(180deg);
}

html[dir="rtl"] .login-back-home {
    direction: rtl;
}


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

@media (max-width: 700px) {

    .login-tools {
        top: 18px;
        right: 18px;
    }

    html[dir="rtl"] .login-tools {
        right: auto;
        left: 18px;
    }

    .login-tools button {
        width: 38px;
        height: 38px;
    }

}
/* =====================================================
   ZIVARA COMMON HEADER - SCROLL DARK BACKGROUND
   ===================================================== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    transition:
        background-color 0.35s ease,
        box-shadow 0.35s ease,
        backdrop-filter 0.35s ease;
}

/* DARK HEADER AFTER SCROLL */
body .header.scrolled {
    background-color: #17120e !important;
    background-image: none !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Logo */
body .header.scrolled .logo-name,
body .header.scrolled .logo-jewels {
    color: #f7f1e7 !important;
}

body .header.scrolled .logo-symbol {
    color: #d4ad63 !important;
}

/* Navigation */
body .header.scrolled .navigation > a,
body .header.scrolled .navigation .nav-item > a {
    color: #f7f1e7 !important;
}

/* Dropdown arrow */
body .header.scrolled .navigation .nav-item > a span {
    color: #d4ad63 !important;
}

/* Icons */
body .header.scrolled .header-actions button,
body .header.scrolled .header-actions a {
    color: #f7f1e7 !important;
}

/* Login button */
body .header.scrolled .login-button {
    color: #f7f1e7 !important;
    border-color: #c9a45d !important;
}

/* RTL button */
body .header.scrolled .rtl-button {
    color: #f7f1e7 !important;
}

/* Bag count */
body .header.scrolled .bag-count {
    background: #c9a45d !important;
    color: #17120e !important;
}
/* =========================================
   ACTIVE CURRENT PAGE
========================================= */

.header .navigation > a.active,
.header .navigation .nav-item > a.active {
    color: #b18a48 !important;
    position: relative;
}

/* Gold line under current page */
.header .navigation > a.active::after,
.header .navigation .nav-item > a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    height: 2px;
    background: #b18a48;
    transform: scaleX(1);
    transform-origin: center;
}

/* Active page when header is scrolled */
.header.scrolled .navigation > a.active,
.header.scrolled .navigation .nav-item > a.active {
    color: #d5b46a !important;
}

.header.scrolled .navigation > a.active::after,
.header.scrolled .navigation .nav-item > a.active::after {
    background: #d5b46a;
}

/* Mobile */
@media (max-width: 900px) {

    .header .navigation > a.active::after,
    .header .navigation .nav-item > a.active::after {
        bottom: 4px;
        left: 0;
        right: auto;
        width: 35px;
    }

}
/* =========================================================
   ZIVARA FINAL HEADER FIX
   PASTE THIS AT THE VERY BOTTOM OF style.css
========================================================= */

/* ---------- DESKTOP HEADER ---------- */

.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    height: auto !important;
    min-height: 68px !important;

    z-index: 999999 !important;

    visibility: visible !important;
    opacity: 1 !important;

    transform: none !important;

    transition:
        background-color .3s ease,
        box-shadow .3s ease,
        border-color .3s ease !important;
}


/* Header before scrolling */

.header:not(.scrolled) {
    background: rgba(20, 17, 14, .78) !important;

    border-bottom:
        1px solid rgba(255,255,255,.15) !important;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* Header after scrolling */

.header.scrolled {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    background: #18130f !important;

    visibility: visible !important;
    opacity: 1 !important;

    box-shadow:
        0 8px 30px rgba(0,0,0,.35) !important;

    border-bottom:
        1px solid rgba(212,170,97,.25) !important;
}


/* ---------- HEADER CONTENT ---------- */

.header-inner {
    position: relative !important;

    z-index: 1000000 !important;

    min-height: 68px !important;
}


/* ---------- SCROLLED HEADER TEXT ---------- */

.header.scrolled .logo-name,
.header.scrolled .logo-jewels,
.header.scrolled .navigation > a,
.header.scrolled .navigation > .nav-item > a,
.header.scrolled .icon-button,
.header.scrolled .bag-button,
.header.scrolled .theme-button,
.header.scrolled .rtl-button,
.header.scrolled .login-button {
    color: #ffffff !important;
}


.header.scrolled .logo-symbol {
    color: #d4aa61 !important;
}


/* ---------- ACTIVE PAGE ---------- */

.header .navigation > a.active,
.header .navigation > .nav-item > a.active {
    color: #b38a49 !important;
}


.header.scrolled .navigation > a.active,
.header.scrolled .navigation > .nav-item > a.active {
    color: #d4aa61 !important;
}


/* ---------- HEADER ALWAYS ABOVE PAGE ---------- */

.hero,
.hero-section,
.page-hero,
.page-banner,
main,
main > section {
    position: relative;
    z-index: 1;
}


.header,
.header-inner,
.header-actions,
.navigation,
.mobile-button {
    isolation: isolate;
}


/* =========================================================
   DESKTOP — KEEP HEADER ABOVE HERO IMAGES
========================================================= */

@media (min-width: 901px) {

    .header {
        display: block !important;
    }

    .navigation {
        position: relative !important;
        z-index: 1000001 !important;
    }

    .header-actions {
        position: relative !important;
        z-index: 1000001 !important;
    }

    .logo {
        position: relative !important;
        z-index: 1000001 !important;
    }

}


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

@media (max-width: 900px) {

    .header {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        width: 100% !important;

        min-height: 68px !important;

        z-index: 999999 !important;

        background: #fffdf8 !important;

        border-bottom:
            1px solid rgba(40,30,20,.14) !important;
    }


    body.dark-mode .header {
        background: #17120e !important;

        border-bottom:
            1px solid rgba(212,170,97,.18) !important;
    }


    .header.scrolled {
        background: #18130f !important;

        box-shadow:
            0 8px 25px rgba(0,0,0,.3) !important;
    }


    .header-inner {
        height: 68px !important;
        min-height: 68px !important;

        position: relative !important;
    }


    /* Hamburger */

    .mobile-button {
        position: relative !important;

        z-index: 1000002 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        cursor: pointer !important;
    }


    /* Mobile menu */

    .navigation.active {
        position: fixed !important;

        top: 68px !important;

        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        height: auto !important;

        max-height: calc(100vh - 68px) !important;

        overflow-y: auto !important;

        z-index: 1000001 !important;

        background: #fffdf8 !important;

        display: flex !important;

        flex-direction: column !important;

        box-shadow:
            0 20px 40px rgba(0,0,0,.2) !important;
    }


    body.dark-mode .navigation.active {
        background: #211a15 !important;
    }


    /* Mobile links */

    .navigation.active > a,
    .navigation.active > .nav-item > a {
        width: 100% !important;

        min-height: 48px !important;

        display: flex !important;

        align-items: center !important;

        padding: 0 20px !important;

        color: #211b16 !important;

        background: #fffdf8 !important;

        border-bottom:
            1px solid rgba(40,30,20,.12) !important;
    }


    body.dark-mode .navigation.active > a,
    body.dark-mode .navigation.active > .nav-item > a {
        color: #ffffff !important;

        background: #211a15 !important;

        border-bottom:
            1px solid rgba(255,255,255,.08) !important;
    }


    .navigation.active > a.active,
    .navigation.active > .nav-item > a.active {
        color: #b38a49 !important;
    }


    /* Mobile dropdown */

    .navigation.active .dropdown-menu {
        position: static !important;

        width: 100% !important;

        min-width: 100% !important;

        display: none !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        padding: 0 !important;

        margin: 0 !important;

        box-shadow: none !important;
    }


    .navigation.active
    .nav-item.dropdown.active
    .dropdown-menu {
        display: block !important;
    }


    .navigation.active .dropdown-menu a {
        display: flex !important;

        align-items: center !important;

        min-height: 42px !important;

        padding: 0 35px !important;

        background: #eee7dc !important;

        color: #211b16 !important;

        border-bottom:
            1px solid rgba(40,30,20,.1) !important;
    }


    body.dark-mode
    .navigation.active
    .dropdown-menu a {
        background: #2b211a !important;

        color: #ffffff !important;
    }

}
/* =====================================================
   ZIVARA HOME 1 - PREMIUM MOTION
   ===================================================== */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Prevent horizontal movement */
body {
    overflow-x: hidden;
}

/* -----------------------------------------------------
   HERO ANIMATION
   ----------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
}

.hero-image {
    transform: scale(1.06);
    animation: heroZoom 1.8s ease-out forwards;
}

.hero-dark {
    animation: heroFade 1.2s ease-out forwards;
}

.hero-content {
    animation: heroContent 1.1s cubic-bezier(.22,.61,.36,1) forwards;
}

.hero-content .eyebrow {
    animation: heroText 0.9s ease-out 0.15s both;
}

.hero-content h1 {
    animation: heroText 1s ease-out 0.3s both;
}

.hero-description {
    animation: heroText 1s ease-out 0.45s both;
}

.hero-link {
    animation: heroText 1s ease-out 0.6s both;
}

@keyframes heroZoom {
    from {
        transform: scale(1.06);
    }
    to {
        transform: scale(1);
    }
}

@keyframes heroFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes heroContent {
    from {
        opacity: 0;
        transform: translateY(35px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroText {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* -----------------------------------------------------
   SECTION REVEAL
   ----------------------------------------------------- */

.home1-reveal-left,
.home1-reveal-right,
.home1-reveal-bottom,
.collection,
.watch-item,
.product,
.promise-item {
    opacity: 0;
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.22,.61,.36,1);
}

.home1-reveal-left {
    transform: translateX(-45px);
}

.home1-reveal-right {
    transform: translateX(45px);
}

.home1-reveal-bottom {
    transform: translateY(45px);
}

.home1-show {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}


/* -----------------------------------------------------
   SECTION HEADINGS
   ----------------------------------------------------- */

.section-heading,
.watches-heading {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.22,.61,.36,1);
}

.heading-show {
    opacity: 1;
    transform: translateY(0);
}


/* -----------------------------------------------------
   COLLECTION CARDS
   ----------------------------------------------------- */

.collection {
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.22,.61,.36,1);
}

.collection:nth-child(1) {
    transition-delay: 0.05s;
}

.collection:nth-child(2) {
    transition-delay: 0.12s;
}

.collection:nth-child(3) {
    transition-delay: 0.19s;
}

.collection:nth-child(4) {
    transition-delay: 0.26s;
}

.collection-img {
    overflow: hidden;
}

.collection-img img {
    transition:
        transform 0.8s cubic-bezier(.22,.61,.36,1),
        filter 0.5s ease;
}

.collection:hover .collection-img img {
    transform: scale(1.07);
    filter: brightness(1.04);
}

.collection:hover .collection-name {
    transform: translateY(-5px);
}

.collection-name {
    transition: transform 0.45s ease;
}


/* -----------------------------------------------------
   WATCH CARDS
   ----------------------------------------------------- */

.watch-item {
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.22,.61,.36,1);
}

.watch-image {
    overflow: hidden;
}

.watch-image img {
    transition:
        transform 1s cubic-bezier(.22,.61,.36,1),
        filter 0.6s ease;
}

.watch-item:hover .watch-image img {
    transform: scale(1.06);
}

.watch-info h3 {
    transition: transform 0.4s ease;
}

.watch-item:hover .watch-info h3 {
    transform: translateX(6px);
}

.watch-info p {
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

.watch-item:hover .watch-info p {
    transform: translateX(6px);
}


/* -----------------------------------------------------
   PRODUCT CARDS
   ----------------------------------------------------- */

.product {
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.22,.61,.36,1);
}

.product-image {
    overflow: hidden;
}

.product-image img {
    transition:
        transform 0.8s cubic-bezier(.22,.61,.36,1),
        filter 0.5s ease;
}

.product:hover .product-image img {
    transform: scale(1.06);
}

.product-info {
    transition: transform 0.4s ease;
}

.product:hover .product-info {
    transform: translateY(-4px);
}

.wishlist {
    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}

.product:hover .wishlist {
    transform: scale(1.1);
}


/* -----------------------------------------------------
   SIGNATURE IMAGE
   ----------------------------------------------------- */

.signature-photo,
.home-signature-image,
.craft-photo {
    overflow: hidden;
}

.signature-photo img,
.home-signature-image img,
.craft-photo img {
    transition:
        transform 1.1s cubic-bezier(.22,.61,.36,1),
        filter 0.6s ease;
}

.signature-photo:hover img,
.home-signature-image:hover img,
.craft-photo:hover img {
    transform: scale(1.045);
}


/* -----------------------------------------------------
   ZIVARA EDIT
   ----------------------------------------------------- */

.home-signature-content {
    transition: transform 0.8s ease;
}

.home-signature-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: gap 0.35s ease;
}

.home-signature-link:hover {
    gap: 18px;
}


/* -----------------------------------------------------
   WHY ZIVARA
   ----------------------------------------------------- */

.home-why-item {
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.22,.61,.36,1),
        border-color 0.4s ease;
}

.home-why-item:hover {
    transform: translateY(-7px) !important;
}

.home-why-number {
    transition:
        transform 0.4s ease,
        opacity 0.4s ease;
}

.home-why-item:hover .home-why-number {
    transform: translateX(5px);
}


/* -----------------------------------------------------
   PROMISE ITEMS
   ----------------------------------------------------- */

.promise-item {
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.22,.61,.36,1);
}

.promise-item:nth-child(1) {
    transition-delay: 0.05s;
}

.promise-item:nth-child(2) {
    transition-delay: 0.12s;
}

.promise-item:nth-child(3) {
    transition-delay: 0.19s;
}

.promise-item:nth-child(4) {
    transition-delay: 0.26s;
}

.promise-item:hover {
    transform: translateY(-6px) !important;
}


/* -----------------------------------------------------
   IMAGE SECTIONS
   ----------------------------------------------------- */

.bridal-bg,
.showroom-bg {
    transition: transform 1.2s ease;
}

.bridal:hover .bridal-bg,
.showroom:hover .showroom-bg {
    transform: scale(1.025);
}


/* -----------------------------------------------------
   LINKS
   ----------------------------------------------------- */

.hero-link,
.signature-text a,
.craft-text a,
.bridal-content a,
.showroom-content a {
    transition:
        letter-spacing 0.35s ease,
        opacity 0.35s ease;
}

.hero-link:hover,
.signature-text a:hover,
.craft-text a:hover,
.bridal-content a:hover,
.showroom-content a:hover {
    letter-spacing: 1.5px;
}


/* -----------------------------------------------------
   HEADER
   ----------------------------------------------------- */

.header {
    transition:
        background 0.4s ease,
        box-shadow 0.4s ease;
}

.header.scrolled {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}


/* -----------------------------------------------------
   FOOTER LINKS
   ----------------------------------------------------- */

.footer-column a,
.social-links a {
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.footer-column a:hover,
.social-links a:hover {
    transform: translateX(5px);
}


/* -----------------------------------------------------
   REDUCED MOTION
   ----------------------------------------------------- */

@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;
    }
}


/* -----------------------------------------------------
   MOBILE
   ----------------------------------------------------- */

@media (max-width: 768px) {

    .home1-reveal-left,
    .home1-reveal-right,
    .home1-reveal-bottom {
        transform: translateY(25px);
    }

    .hero-image {
        animation-duration: 1.3s;
    }

    .collection:hover .collection-img img,
    .watch-item:hover .watch-image img,
    .product:hover .product-image img {
        transform: scale(1.025);
    }

    .home-why-item:hover,
    .promise-item:hover {
        transform: translateY(0) !important;
    }
}
/* =====================================================
   ZIVARA HOME 1 - SOFT PREMIUM POP ANIMATION
   ===================================================== */

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}


/* ===============================
   IMAGE SOFT POP
   =============================== */

.collection,
.watch-item,
.product {
    opacity: 0;
    transform: translateY(25px) scale(0.97);
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.collection.home1-visible,
.watch-item.home1-visible,
.product.home1-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* ===============================
   IMAGE CONTAINER
   =============================== */

.collection-img,
.watch-image,
.product-image,
.signature-photo,
.home-signature-image,
.craft-photo {
    overflow: hidden;
}


/* No image zoom */
.collection-img img,
.watch-image img,
.product-image img,
.signature-photo img,
.home-signature-image img,
.craft-photo img {
    transform: none;
    transition: opacity 0.5s ease;
}


/* ===============================
   TEXT SOFT APPEAR
   =============================== */

.section-heading,
.watches-heading,
.home-why-heading {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-heading.home1-visible,
.watches-heading.home1-visible,
.home-why-heading.home1-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ===============================
   SIGNATURE SECTIONS
   =============================== */

.signature-photo,
.signature-text,
.home-signature-image,
.home-signature-content,
.craft-text,
.craft-photo {
    opacity: 0;
    transform: translateY(25px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.signature-photo.home1-visible,
.signature-text.home1-visible,
.home-signature-image.home1-visible,
.home-signature-content.home1-visible,
.craft-text.home1-visible,
.craft-photo.home1-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ===============================
   WHY ZIVARA
   =============================== */

.home-why-item {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-why-item.home1-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ===============================
   PROMISE
   =============================== */

.promise-item {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.promise-item.home1-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ===============================
   STAGGER EFFECT
   =============================== */

.collection:nth-child(1),
.watch-item:nth-child(1),
.product:nth-child(1),
.promise-item:nth-child(1) {
    transition-delay: 0.05s;
}

.collection:nth-child(2),
.watch-item:nth-child(2),
.product:nth-child(2),
.promise-item:nth-child(2) {
    transition-delay: 0.12s;
}

.collection:nth-child(3),
.watch-item:nth-child(3),
.product:nth-child(3),
.promise-item:nth-child(3) {
    transition-delay: 0.19s;
}

.collection:nth-child(4),
.watch-item:nth-child(4),
.product:nth-child(4),
.promise-item:nth-child(4) {
    transition-delay: 0.26s;
}


/* ===============================
   PREMIUM HOVER
   =============================== */

.collection,
.watch-item,
.product {
    transition-property: opacity, transform;
}

.collection:hover,
.watch-item:hover,
.product:hover {
    transform: translateY(-5px) scale(1) !important;
}


/* ===============================
   LINKS
   =============================== */

.hero-link,
.home-signature-link,
.signature-text a,
.craft-text a,
.bridal-content a,
.showroom-content a {
    transition:
        letter-spacing 0.3s ease,
        opacity 0.3s ease;
}

.hero-link:hover,
.home-signature-link:hover,
.signature-text a:hover,
.craft-text a:hover,
.bridal-content a:hover,
.showroom-content a:hover {
    letter-spacing: 1px;
}


/* ===============================
   REDUCE MOTION
   =============================== */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}


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

@media (max-width: 768px) {

    .collection,
    .watch-item,
    .product,
    .home-why-item,
    .promise-item {
        transform: translateY(18px) scale(0.985);
    }

    .collection:hover,
    .watch-item:hover,
    .product:hover {
        transform: translateY(-2px) scale(1) !important;
    }
}
/* ==========================================
   ZIVARA HOME 1
   SMOOTH FLOW ANIMATION
   ========================================== */

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}


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

.hero-content {
    animation: heroContentIn 0.9s ease-out both;
}

.hero-content .eyebrow {
    animation: heroItemIn 0.7s ease-out 0.05s both;
}

.hero-content h1 {
    animation: heroItemIn 0.8s ease-out 0.12s both;
}

.hero-content .hero-description {
    animation: heroItemIn 0.8s ease-out 0.22s both;
}

.hero-content .hero-link {
    animation: heroItemIn 0.8s ease-out 0.32s both;
}

@keyframes heroContentIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroItemIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================
   SECTION HEADINGS
   ========================================== */

.section-heading,
.watches-heading {
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}


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

.collection,
.watch-item,
.product,
.promise-item {
    transition:
        transform 0.55s cubic-bezier(.22,1,.36,1),
        box-shadow 0.4s ease;
}


/* Small premium hover */

.collection:hover,
.watch-item:hover,
.product:hover {
    transform: translateY(-5px);
}


/* ==========================================
   IMAGES
   ========================================== */

.collection-img img,
.watch-image img,
.product-image img,
.signature-photo img,
.home-signature-image img,
.craft-photo img {
    transition:
        transform 0.7s cubic-bezier(.22,1,.36,1),
        filter 0.5s ease;
}


/* Very small image movement only on hover */

.collection:hover img,
.watch-item:hover img,
.product:hover img {
    transform: scale(1.025);
}


/* ==========================================
   IMAGE HOVER LIGHT EFFECT
   ========================================== */

.collection-img,
.watch-image,
.product-image,
.signature-photo,
.home-signature-image,
.craft-photo {
    position: relative;
}

.collection-img::after,
.watch-image::after,
.product-image::after,
.signature-photo::after,
.home-signature-image::after,
.craft-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 35%,
        rgba(255,255,255,0.12) 50%,
        transparent 65%
    );
    transform: translateX(-120%);
    pointer-events: none;
}

.collection:hover .collection-img::after,
.watch-item:hover .watch-image::after,
.product:hover .product-image::after,
.signature-photo:hover::after,
.home-signature-image:hover::after,
.craft-photo:hover::after {
    transform: translateX(120%);
    transition: transform 0.9s ease;
}


/* ==========================================
   SIGNATURE SECTIONS
   ========================================== */

.signature-photo,
.signature-text,
.home-signature-image,
.home-signature-content,
.craft-text,
.craft-photo {
    transition:
        transform 0.7s cubic-bezier(.22,1,.36,1),
        opacity 0.7s ease;
}


/* ==========================================
   LINKS
   ========================================== */

.hero-link,
.home-signature-link,
.signature-text a,
.craft-text a,
.bridal-content a,
.showroom-content a {
    transition:
        transform 0.35s ease,
        letter-spacing 0.35s ease;
}

.hero-link:hover,
.home-signature-link:hover,
.signature-text a:hover,
.craft-text a:hover,
.bridal-content a:hover,
.showroom-content a:hover {
    transform: translateX(5px);
    letter-spacing: 0.8px;
}


/* ==========================================
   WHY ZIVARA
   ========================================== */

.home-why-item {
    transition:
        transform 0.5s cubic-bezier(.22,1,.36,1),
        opacity 0.5s ease;
}

.home-why-item:hover {
    transform: translateY(-5px);
}


/* ==========================================
   PROMISE
   ========================================== */

.promise-item {
    transition:
        transform 0.5s cubic-bezier(.22,1,.36,1),
        opacity 0.5s ease;
}

.promise-item:hover {
    transform: translateY(-5px);
}


/* ==========================================
   BACK TO TOP
   ========================================== */

.back-top {
    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}

.back-top:hover {
    transform: translateY(-4px);
}


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

@media (max-width: 768px) {

    .collection:hover,
    .watch-item:hover,
    .product:hover,
    .home-why-item:hover,
    .promise-item:hover {
        transform: translateY(-2px);
    }

    .collection:hover img,
    .watch-item:hover img,
    .product:hover img {
        transform: scale(1.015);
    }

}
/* =========================================================
   ZIVARA ABOUT — CLEAN COMPACT REDESIGN
   Rule:
   - Only hero uses a full background image.
   - Every other image is used as part of a composition.
   - No image-only section.
   - No giant single-image blocks.
========================================================= */

.about-page-new{
    --ab-bg:#f4eee6;
    --ab-paper:#fcf8f1;
    --ab-soft:#e7dccd;
    --ab-soft-2:#ddd0be;
    --ab-ink:#231d19;
    --ab-heading:#17120f;
    --ab-muted:#6c6258;
    --ab-gold:#ae7c3c;
    --ab-gold-2:#d4b47b;
    --ab-wine:#441b27;
    --ab-brown:#2b211d;
    --ab-line:rgba(49,36,26,.15);
    --ab-gap:18px;
    background:var(--ab-bg);
    color:var(--ab-ink);
    overflow-x:hidden;
}

.about-page-new *,
.about-page-new *::before,
.about-page-new *::after{
    box-sizing:border-box;
}

.about-page-new h1,
.about-page-new h2,
.about-page-new h3,
.about-page-new blockquote{
    font-family:Georgia,"Times New Roman",serif;
    font-weight:500;
}

.about-page-new .ab-label{
    margin:0 0 10px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--ab-gold);
}

.about-page-new .ab-label::before{
    content:"";
    width:27px;
    height:1px;
    display:inline-block;
    margin:0 9px 3px 0;
    background:currentColor;
}

.about-page-new .ab-title{
    margin:0 0 15px;
    color:var(--ab-heading);
    font-size:clamp(36px,4vw,59px);
    line-height:.96;
    letter-spacing:-.04em;
}

.about-page-new .ab-copy{
    margin:0;
    color:var(--ab-muted);
    font-size:13px;
    line-height:1.78;
}

.about-page-new .ab-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    width:max-content;
    margin-top:21px;
    padding:10px 15px;
    border:1px solid currentColor;
    color:inherit;
    text-decoration:none;
    font-size:10px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    transition:transform .3s ease,background .3s ease,color .3s ease;
}

.about-page-new .ab-btn:hover{
    transform:translateY(-3px);
    background:currentColor;
    color:var(--ab-paper);
}

.about-page-new .ab-sec{
    position:relative;
    width:100%;
    margin-bottom:var(--ab-gap);
    overflow:hidden;
}

/* =========================================================
   01 HERO — FULL DESKTOP BACKGROUND (ONLY LARGE IMAGE)
========================================================= */
.about-page-new .ab-hero{
    height:min(760px,86vh);
    min-height:650px;
    position:relative;
    color:#fff;
    isolation:isolate;
}

.about-page-new .ab-hero-bg{
    position:absolute;
    inset:0;
}

.about-page-new .ab-hero-bg img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    animation:abHeroMove 12s ease-in-out infinite alternate;
}

.about-page-new .ab-hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(90deg,rgba(17,11,9,.82),rgba(17,11,9,.48) 37%,rgba(17,11,9,.08) 74%,rgba(17,11,9,.25)),
        linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.23));
}

.about-page-new .ab-hero-content{
    position:relative;
    z-index:2;
    width:min(690px,64%);
    height:100%;
    padding:50px 6vw;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.about-page-new .ab-hero-content .ab-label{
    color:#e7c990;
}

.about-page-new .ab-hero h1{
    margin:0;
    color:#fff;
    font-size:clamp(56px,6.2vw,90px);
    line-height:.86;
    letter-spacing:-.055em;
}

.about-page-new .ab-hero .ab-copy{
    max-width:510px;
    margin-top:20px;
    color:rgba(255,255,255,.88);
    font-size:14px;
}

.about-page-new .ab-hero-facts{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:25px;
}

.about-page-new .ab-hero-fact{
    padding:9px 12px;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(34,22,17,.25);
    backdrop-filter:blur(5px);
    font-size:8px;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.about-page-new .ab-hero-mark{
    position:absolute;
    z-index:3;
    right:5%;
    bottom:33px;
    width:108px;
    height:108px;
    border:1px solid rgba(255,255,255,.44);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    font:500 12px/1.1 Georgia,"Times New Roman",serif;
    text-transform:uppercase;
    letter-spacing:.1em;
    animation:abFloat 4.5s ease-in-out infinite;
}

/* =========================================================
   02 BRAND STORY — 2 smaller visuals + copy
========================================================= */
.about-page-new .ab-story{
    min-height:470px;
    display:grid;
    grid-template-columns:41% 59%;
    background:var(--ab-paper);
}

.about-page-new .ab-story-visual{
    background:var(--ab-soft);
    padding:35px;
    display:grid;
    grid-template-columns:1.25fr .75fr;
    grid-template-rows:1fr .85fr;
    gap:13px;
}

.about-page-new .ab-story-photo{
    overflow:hidden;
}

.about-page-new .ab-story-photo.main{
    grid-row:1 / span 2;
}

.about-page-new .ab-story-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform 1.05s cubic-bezier(.16,1,.3,1);
}

.about-page-new .ab-story-visual:hover img{
    transform:scale(1.06);
}

.about-page-new .ab-story-copy{
    padding:45px clamp(28px,5vw,76px);
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.about-page-new .ab-story-quote{
    max-width:660px;
    margin:0 0 17px;
    font-size:clamp(29px,3.15vw,46px);
    line-height:1.04;
    letter-spacing:-.03em;
}

.about-page-new .ab-story-quote span{
    color:var(--ab-gold);
}

.about-page-new .ab-story-line{
    width:62px;
    height:1px;
    margin-bottom:18px;
    background:var(--ab-gold);
}

.about-page-new .ab-story-points{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:24px;
    border-top:1px solid var(--ab-line);
    border-bottom:1px solid var(--ab-line);
}

.about-page-new .ab-story-point{
    padding:14px 8px 14px 0;
}

.about-page-new .ab-story-point + .ab-story-point{
    border-left:1px solid var(--ab-line);
    padding-left:14px;
}

.about-page-new .ab-story-point strong{
    display:block;
    margin-bottom:5px;
    color:var(--ab-gold);
    font:500 22px/1 Georgia,"Times New Roman",serif;
}

.about-page-new .ab-story-point span{
    font-size:9px;
    line-height:1.45;
    letter-spacing:.1em;
    text-transform:uppercase;
}

/* =========================================================
   03 HISTORY — clean timeline
========================================================= */
.about-page-new .ab-history{
    min-height:470px;
    padding:41px 6vw;
    background:var(--ab-brown);
    color:#fff;
}

.about-page-new .ab-history .ab-title{
    color:#fff;
}

.about-page-new .ab-history .ab-label{
    color:var(--ab-gold-2);
}

.about-page-new .ab-history-top{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    margin-bottom:29px;
}

.about-page-new .ab-history-top .ab-copy{
    max-width:430px;
    color:rgba(255,255,255,.64);
}

.about-page-new .ab-timeline{
    position:relative;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:15px;
}

.about-page-new .ab-timeline::before{
    content:"";
    position:absolute;
    left:3%;
    right:3%;
    top:25px;
    height:1px;
    background:rgba(255,255,255,.16);
}

.about-page-new .ab-time{
    position:relative;
}

.about-page-new .ab-time-dot{
    position:relative;
    z-index:2;
    width:51px;
    height:51px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--ab-brown);
    border:1px solid rgba(214,180,123,.6);
    color:var(--ab-gold-2);
    font-size:8px;
    font-weight:700;
}

.about-page-new .ab-time h3{
    margin:16px 0 7px;
    color:#fff;
    font-size:22px;
}

.about-page-new .ab-time p{
    max-width:220px;
    color:rgba(255,255,255,.60);
    font-size:10px;
    line-height:1.65;
}

.about-page-new .ab-time small{
    display:block;
    margin-top:11px;
    color:rgba(255,255,255,.77);
    font-size:8px;
    letter-spacing:.16em;
    text-transform:uppercase;
}

/* =========================================================
   04 MISSION — content with medium framed gallery
========================================================= */
.about-page-new .ab-mission{
    min-height:520px;
    display:grid;
    grid-template-columns:59% 41%;
    background:var(--ab-soft);
}

.about-page-new .ab-mission-copy{
    padding:46px clamp(28px,5vw,80px);
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.about-page-new .ab-mission-quote{
    max-width:680px;
    margin:0 0 17px;
    font:500 clamp(29px,3.1vw,44px)/1.05 Georgia,"Times New Roman",serif;
}

.about-page-new .ab-mission-quote em{
    color:var(--ab-gold);
    font-style:normal;
}

.about-page-new .ab-mission-values{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:26px;
    border-top:1px solid var(--ab-line);
}

.about-page-new .ab-mission-value{
    padding:15px 9px 14px 0;
}

.about-page-new .ab-mission-value + .ab-mission-value{
    border-left:1px solid var(--ab-line);
    padding-left:14px;
}

.about-page-new .ab-mission-value strong{
    display:block;
    margin-bottom:5px;
    color:var(--ab-gold);
    font:500 21px/1 Georgia,"Times New Roman",serif;
}

.about-page-new .ab-mission-value span{
    font-size:9px;
    line-height:1.4;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.about-page-new .ab-mission-gallery{
    padding:34px;
    display:grid;
    grid-template-columns:1.35fr .65fr;
    grid-template-rows:1fr 1fr;
    gap:13px;
    background:var(--ab-soft-2);
}

.about-page-new .ab-mission-photo{
    overflow:hidden;
}

.about-page-new .ab-mission-photo.main{
    grid-row:1 / span 2;
}

.about-page-new .ab-mission-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform 1.05s cubic-bezier(.16,1,.3,1);
}

.about-page-new .ab-mission-gallery:hover img{
    transform:scale(1.06);
}

/* =========================================================
   05 VALUES — premium cards
========================================================= */
.about-page-new .ab-values{
    min-height:435px;
    padding:40px 6vw;
    background:var(--ab-paper);
}

.about-page-new .ab-values-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    margin-bottom:24px;
}

.about-page-new .ab-values-head .ab-copy{
    max-width:430px;
}

.about-page-new .ab-values-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:13px;
}

.about-page-new .ab-value{
    position:relative;
    min-height:215px;
    padding:23px;
    border:1px solid var(--ab-line);
    background:#f0e7db;
    overflow:hidden;
    transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}

.about-page-new .ab-value:hover{
    transform:translateY(-6px);
    border-color:rgba(174,124,60,.42);
    box-shadow:0 14px 30px rgba(42,29,21,.08);
}

.about-page-new .ab-value::after{
    content:"";
    position:absolute;
    right:-28px;
    bottom:-34px;
    width:105px;
    height:105px;
    border:1px solid rgba(174,124,60,.20);
    border-radius:50%;
}

.about-page-new .ab-value-num{
    color:var(--ab-gold);
    font-size:9px;
    letter-spacing:.18em;
}

.about-page-new .ab-value-icon{
    width:40px;
    height:40px;
    margin:21px 0 17px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(174,124,60,.40);
    border-radius:50%;
    color:var(--ab-gold);
    transition:transform .4s ease;
}

.about-page-new .ab-value:hover .ab-value-icon{
    transform:rotate(16deg) scale(1.08);
}

.about-page-new .ab-value h3{
    margin:0 0 8px;
    font-size:22px;
}

.about-page-new .ab-value p{
    color:var(--ab-muted);
    font-size:11px;
    line-height:1.65;
}

/* =========================================================
   06 TEAM — 4 people, medium images
========================================================= */
.about-page-new .ab-team{
    min-height:545px;
    padding:40px 6vw;
    background:var(--ab-wine);
    color:#fff;
}

.about-page-new .ab-team-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    margin-bottom:24px;
}

.about-page-new .ab-team .ab-title{
    color:#fff;
}

.about-page-new .ab-team .ab-label{
    color:var(--ab-gold-2);
}

.about-page-new .ab-team-head .ab-copy{
    max-width:430px;
    color:rgba(255,255,255,.63);
}

.about-page-new .ab-team-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.about-page-new .ab-person-photo{
    height:260px;
    overflow:hidden;
    background:#2a131a;
}

.about-page-new .ab-person-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform 1.05s cubic-bezier(.16,1,.3,1);
}

.about-page-new .ab-person:hover .ab-person-photo img{
    transform:scale(1.065);
}

.about-page-new .ab-person-info{
    padding-top:11px;
}

.about-page-new .ab-person-info small{
    color:var(--ab-gold-2);
    font-size:7px;
    letter-spacing:.17em;
    text-transform:uppercase;
}

.about-page-new .ab-person-info h3{
    margin:6px 0 4px;
    color:#fff;
    font-size:20px;
}

.about-page-new .ab-person-info p{
    margin:0;
    color:rgba(255,255,255,.55);
    font-size:9px;
    line-height:1.55;
}

/* =========================================================
   07 COLLECTION PHILOSOPHY — 2 broad but balanced panels
========================================================= */
.about-page-new .ab-collections{
    min-height:440px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    background:var(--ab-bg);
}

.about-page-new .ab-collection{
    position:relative;
    min-width:0;
    overflow:hidden;
}

.about-page-new .ab-collection img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}

.about-page-new .ab-collection:hover img{
    transform:scale(1.065);
}

.about-page-new .ab-collection::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 32%,rgba(18,12,10,.80));
}

.about-page-new .ab-collection-copy{
    position:absolute;
    z-index:2;
    left:30px;
    right:30px;
    bottom:28px;
    color:#fff;
}

.about-page-new .ab-collection-copy small{
    color:#eed09b;
    font-size:8px;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.about-page-new .ab-collection-copy h3{
    margin:7px 0 7px;
    font-size:34px;
}

.about-page-new .ab-collection-copy p{
    max-width:415px;
    margin:0;
    color:rgba(255,255,255,.78);
    font-size:11px;
    line-height:1.62;
}

/* =========================================================
   08 TESTIMONIALS
========================================================= */
.about-page-new .ab-testimonials{
    min-height:430px;
    padding:39px 6vw;
    background:var(--ab-paper);
}

.about-page-new .ab-testimonials-head{
    text-align:center;
    margin-bottom:24px;
}

.about-page-new .ab-review-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.about-page-new .ab-review{
    position:relative;
    min-height:225px;
    padding:22px 21px;
    border:1px solid var(--ab-line);
    background:#efe6da;
    transition:transform .35s ease,border-color .35s ease;
}

.about-page-new .ab-review:hover{
    transform:translateY(-6px);
    border-color:rgba(174,124,60,.45);
}

.about-page-new .ab-review::before{
    content:"“";
    color:var(--ab-gold);
    font:500 43px/1 Georgia,"Times New Roman",serif;
}

.about-page-new .ab-review p{
    margin:4px 0 21px;
    color:var(--ab-ink);
    font-size:12px;
    line-height:1.7;
}

.about-page-new .ab-review strong{
    display:block;
    color:var(--ab-heading);
    font:500 16px/1 Georgia,"Times New Roman",serif;
}

.about-page-new .ab-review span{
    display:block;
    margin-top:5px;
    color:var(--ab-muted);
    font-size:8px;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.about-page-new .ab-stars{
    position:absolute;
    right:17px;
    bottom:17px;
    color:var(--ab-gold);
    font-size:10px;
    letter-spacing:2px;
}

/* =========================================================
   09 FINAL SHOWROOM CTA — medium image + content
========================================================= */
.about-page-new .ab-final{
    min-height:490px;
    display:grid;
    grid-template-columns:53% 47%;
    background:var(--ab-dark);
    color:#fff;
}

.about-page-new .ab-final-visual{
    position:relative;
    overflow:hidden;
}

.about-page-new .ab-final-visual img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}

.about-page-new .ab-final:hover .ab-final-visual img{
    transform:scale(1.055);
}

.about-page-new .ab-final-copy{
    padding:44px clamp(28px,5vw,74px);
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.about-page-new .ab-final-copy .ab-label{
    color:var(--ab-gold-2);
}

.about-page-new .ab-final-copy .ab-title{
    color:#fff;
}

.about-page-new .ab-final-copy .ab-body{
    color:rgba(255,255,255,.69);
}

.about-page-new .ab-final-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}

.about-page-new .ab-final-links .ab-btn{
    margin-top:0;
    color:#fff;
    border-color:rgba(255,255,255,.35);
}

/* =========================================================
   SCROLL ANIMATIONS
========================================================= */

.about-page-new .ab-from-left,
.about-page-new .ab-from-right,
.about-page-new .ab-from-up,
.about-page-new .ab-pop,
.about-page-new .ab-clip,
.about-page-new .ab-tilt{
    opacity:0;
    will-change:transform,opacity,clip-path;
    transition:
        opacity .82s ease,
        transform 1s cubic-bezier(.16,1,.3,1),
        clip-path 1.02s cubic-bezier(.16,1,.3,1);
}

.about-page-new .ab-from-left{transform:translateX(-62px)}
.about-page-new .ab-from-right{transform:translateX(62px)}
.about-page-new .ab-from-up{transform:translateY(55px)}
.about-page-new .ab-pop{transform:scale(.90)}
.about-page-new .ab-clip{clip-path:inset(0 47% 0 0)}
.about-page-new .ab-tilt{transform:translateY(43px) rotate(1.5deg)}

.about-page-new .ab-visible{
    opacity:1;
    transform:none;
    clip-path:inset(0 0 0 0);
}

.about-page-new .ab-stagger > *{
    opacity:0;
    transform:translateY(25px);
    transition:opacity .68s ease,transform .8s cubic-bezier(.16,1,.3,1);
}

.about-page-new .ab-stagger.ab-visible > *{
    opacity:1;
    transform:none;
}

.about-page-new .ab-stagger.ab-visible > *:nth-child(1){transition-delay:.04s}
.about-page-new .ab-stagger.ab-visible > *:nth-child(2){transition-delay:.13s}
.about-page-new .ab-stagger.ab-visible > *:nth-child(3){transition-delay:.22s}
.about-page-new .ab-stagger.ab-visible > *:nth-child(4){transition-delay:.31s}
.about-page-new .ab-stagger.ab-visible > *:nth-child(5){transition-delay:.40s}

/* =========================================================
   DARK MODE — COMPLETE THEME SWITCH
========================================================= */

body.dark-mode .about-page-new{
    --ab-bg:#080706;
    --ab-paper:#151210;
    --ab-soft:#1c1714;
    --ab-soft-2:#100e0c;
    --ab-ink:#f1e9df;
    --ab-heading:#fffaf3;
    --ab-muted:#b7ab9d;
    --ab-gold:#d8ad6a;
    --ab-gold-2:#e3c28d;
    --ab-line:rgba(246,236,223,.15);
    --ab-dark:#090807;
    --ab-brown:#090807;
    --ab-wine:#260d15;
}

body.dark-mode .about-page-new .ab-value{
    background:#191613;
}

body.dark-mode .about-page-new .ab-review{
    background:#191512;
}

body.dark-mode .about-page-new .ab-story,
body.dark-mode .about-page-new .ab-values,
body.dark-mode .about-page-new .ab-testimonials{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 -1px 0 rgba(255,255,255,.04);
}

body.dark-mode .about-page-new .ab-hero-fact{
    background:rgba(0,0,0,.34);
}


/* =========================================================
   FINAL THEME OVERRIDE
   Light + Dark are complete visual themes, not only
   background swaps. Every text/surface/control is mapped.
========================================================= */

.about-page-new{
    color-scheme:light;
}

/* ---------- LIGHT THEME ---------- */

body:not(.dark-mode) .about-page-new,
body:not(.dark-mode).about-page-new{
    --ab-bg:#f3eadf;
    --ab-paper:#fffaf3;
    --ab-soft:#eadcca;
    --ab-soft-2:#d9c9b5;
    --ab-ink:#241d18;
    --ab-heading:#17120f;
    --ab-muted:#61574d;
    --ab-gold:#9b692c;
    --ab-gold-2:#b9833d;
    --ab-line:rgba(44,31,21,.18);
    --ab-dark:#211714;
    --ab-wine:#531d2a;
    --ab-white:#fffdf8;
    --ab-shadow:0 18px 42px rgba(48,34,23,.10);

    background:var(--ab-bg) !important;
    color:var(--ab-ink) !important;
}

body:not(.dark-mode) .about-page-new .ab-sec{
    color:var(--ab-ink);
}

body:not(.dark-mode) .about-page-new .ab-title,
body:not(.dark-mode) .about-page-new .ab-story-quote,
body:not(.dark-mode) .about-page-new .ab-mission-quote,
body:not(.dark-mode) .about-page-new .ab-value h3,
body:not(.dark-mode) .about-page-new .ab-review strong{
    color:var(--ab-heading) !important;
}

body:not(.dark-mode) .about-page-new .ab-copy,
body:not(.dark-mode) .about-page-new .ab-body,
body:not(.dark-mode) .about-page-new .ab-value p,
body:not(.dark-mode) .about-page-new .ab-review p{
    color:var(--ab-muted) !important;
}

body:not(.dark-mode) .about-page-new .ab-story{
    background:var(--ab-paper) !important;
}

body:not(.dark-mode) .about-page-new .ab-story-visual{
    background:var(--ab-soft) !important;
}

body:not(.dark-mode) .about-page-new .ab-history,
body:not(.dark-mode) .about-page-new .ab-team,
body:not(.dark-mode) .about-page-new .ab-final{
    color:#fff !important;
}

body:not(.dark-mode) .about-page-new .ab-history .ab-title,
body:not(.dark-mode) .about-page-new .ab-team .ab-title,
body:not(.dark-mode) .about-page-new .ab-final .ab-title{
    color:#fff !important;
}

body:not(.dark-mode) .about-page-new .ab-history .ab-body,
body:not(.dark-mode) .about-page-new .ab-team .ab-body,
body:not(.dark-mode) .about-page-new .ab-final .ab-body{
    color:rgba(255,255,255,.78) !important;
}

body:not(.dark-mode) .about-page-new .ab-time h3,
body:not(.dark-mode) .about-page-new .ab-person-info h3{
    color:#fff !important;
}

body:not(.dark-mode) .about-page-new .ab-time p,
body:not(.dark-mode) .about-page-new .ab-person-info p{
    color:rgba(255,255,255,.70) !important;
}

body:not(.dark-mode) .about-page-new .ab-mission{
    background:var(--ab-soft) !important;
}

body:not(.dark-mode) .about-page-new .ab-mission-visual{
    background:var(--ab-soft-2) !important;
}

body:not(.dark-mode) .about-page-new .ab-values,
body:not(.dark-mode) .about-page-new .ab-testimonials{
    background:var(--ab-paper) !important;
}

body:not(.dark-mode) .about-page-new .ab-value{
    background:#f0e3d3 !important;
    color:var(--ab-ink) !important;
    border-color:var(--ab-line) !important;
}

body:not(.dark-mode) .about-page-new .ab-value:hover{
    background:#ead9c5 !important;
}

body:not(.dark-mode) .about-page-new .ab-review{
    background:#eee1d0 !important;
    color:var(--ab-ink) !important;
    border-color:var(--ab-line) !important;
}

body:not(.dark-mode) .about-page-new .ab-review p{
    color:var(--ab-ink) !important;
}

body:not(.dark-mode) .about-page-new .ab-collections{
    background:var(--ab-bg) !important;
}

body:not(.dark-mode) .about-page-new .ab-hero-fact{
    color:#fff !important;
}

body:not(.dark-mode) .about-page-new .ab-mission-value span,
body:not(.dark-mode) .about-page-new .ab-story-point span{
    color:var(--ab-ink) !important;
}

body:not(.dark-mode) .about-page-new .ab-button,
body:not(.dark-mode) .about-page-new .ab-btn{
    color:inherit;
}

body:not(.dark-mode) .about-page-new .ab-final .ab-btn{
    color:#fff !important;
    border-color:rgba(255,255,255,.42) !important;
}

/* ---------- DARK THEME ---------- */

body.dark-mode .about-page-new{
    color-scheme:dark;

    --ab-bg:#060606;
    --ab-paper:#121110;
    --ab-soft:#1a1613;
    --ab-soft-2:#0f0d0c;
    --ab-ink:#f2ece4;
    --ab-heading:#fffaf3;
    --ab-muted:#c1b5a8;
    --ab-gold:#e0b36e;
    --ab-gold-2:#ebc98f;
    --ab-line:rgba(255,246,235,.16);
    --ab-dark:#080706;
    --ab-wine:#260e16;
    --ab-white:#fffaf4;
    --ab-shadow:0 20px 44px rgba(0,0,0,.34);

    background:var(--ab-bg) !important;
    color:var(--ab-ink) !important;
}

body.dark-mode .about-page-new .ab-sec{
    color:var(--ab-ink);
}

body.dark-mode .about-page-new .ab-title,
body.dark-mode .about-page-new .ab-story-quote,
body.dark-mode .about-page-new .ab-mission-quote,
body.dark-mode .about-page-new .ab-value h3,
body.dark-mode .about-page-new .ab-review strong{
    color:var(--ab-heading) !important;
}

body.dark-mode .about-page-new .ab-copy,
body.dark-mode .about-page-new .ab-body,
body.dark-mode .about-page-new .ab-value p,
body.dark-mode .about-page-new .ab-review p{
    color:var(--ab-muted) !important;
}

body.dark-mode .about-page-new .ab-story{
    background:#121110 !important;
}

body.dark-mode .about-page-new .ab-story-visual,
body.dark-mode .about-page-new .ab-mission-visual{
    background:#0e0c0b !important;
}

body.dark-mode .about-page-new .ab-history{
    background:#080706 !important;
    color:#fff !important;
}

body.dark-mode .about-page-new .ab-history .ab-title{
    color:#fff !important;
}

body.dark-mode .about-page-new .ab-history .ab-body{
    color:rgba(255,255,255,.78) !important;
}

body.dark-mode .about-page-new .ab-time h3{
    color:#fff !important;
}

body.dark-mode .about-page-new .ab-time p{
    color:rgba(255,255,255,.72) !important;
}

body.dark-mode .about-page-new .ab-mission{
    background:#1a1613 !important;
}

body.dark-mode .about-page-new .ab-values,
body.dark-mode .about-page-new .ab-testimonials{
    background:#121110 !important;
}

body.dark-mode .about-page-new .ab-value{
    background:#191714 !important;
    color:var(--ab-ink) !important;
    border-color:rgba(255,246,235,.16) !important;
    box-shadow:none !important;
}

body.dark-mode .about-page-new .ab-value:hover{
    background:#211c18 !important;
    border-color:rgba(224,179,110,.44) !important;
}

body.dark-mode .about-page-new .ab-value h3{
    color:#fffaf3 !important;
}

body.dark-mode .about-page-new .ab-value p{
    color:#c1b5a8 !important;
}

body.dark-mode .about-page-new .ab-team{
    background:#0a0708 !important;
    color:#fff !important;
}

body.dark-mode .about-page-new .ab-team .ab-title{
    color:#fff !important;
}

body.dark-mode .about-page-new .ab-team .ab-body{
    color:rgba(255,255,255,.75) !important;
}

body.dark-mode .about-page-new .ab-person-info h3{
    color:#fff !important;
}

body.dark-mode .about-page-new .ab-person-info p{
    color:rgba(255,255,255,.69) !important;
}

body.dark-mode .about-page-new .ab-collections{
    background:#060606 !important;
}

body.dark-mode .about-page-new .ab-testimonials{
    background:#121110 !important;
}

body.dark-mode .about-page-new .ab-review{
    background:#1a1714 !important;
    color:#f2ece4 !important;
    border-color:rgba(255,246,235,.16) !important;
}

body.dark-mode .about-page-new .ab-review p{
    color:#ece3d8 !important;
}

body.dark-mode .about-page-new .ab-review strong{
    color:#fffaf3 !important;
}

body.dark-mode .about-page-new .ab-review span{
    color:#b9ad9f !important;
}

body.dark-mode .about-page-new .ab-final{
    background:#050403 !important;
    color:#fff !important;
}

body.dark-mode .about-page-new .ab-final .ab-title{
    color:#fff !important;
}

body.dark-mode .about-page-new .ab-final .ab-body{
    color:rgba(255,255,255,.78) !important;
}

body.dark-mode .about-page-new .ab-final .ab-btn{
    color:#fff !important;
    border-color:rgba(255,255,255,.38) !important;
}

body.dark-mode .about-page-new .ab-final .ab-btn:hover{
    background:#fff !important;
    color:#17110e !important;
}

body.dark-mode .about-page-new .ab-mission-value span,
body.dark-mode .about-page-new .ab-story-point span{
    color:#f0e8dd !important;
}

body.dark-mode .about-page-new .ab-line{
    background:#d9ad69 !important;
}

/* make the complete page transition feel like a real theme change */
.about-page-new,
.about-page-new .ab-sec,
.about-page-new .ab-value,
.about-page-new .ab-review,
.about-page-new .ab-story,
.about-page-new .ab-mission,
.about-page-new .ab-values,
.about-page-new .ab-testimonials{
    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


/* =========================================================
   FINAL MOTION PACK — MORE PREMIUM, DIFFERENT ANIMATIONS
========================================================= */

/* reveal line */
.about-page-new .ab-title,
.about-page-new .ab-kicker{
    position:relative;
}

.about-page-new .ab-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-7px;
    width:0;
    height:1px;
    background:var(--ab-gold);
    transition:width 1s cubic-bezier(.16,1,.3,1);
}

.about-page-new .ab-visible .ab-title::after{
    width:54px;
}

/* image breathing */
.about-page-new .ab-story-photo,
.about-page-new .ab-mission-photo,
.about-page-new .ab-person-photo,
.about-page-new .ab-collection,
.about-page-new .ab-final-visual{
    isolation:isolate;
}

.about-page-new .ab-story-photo::after,
.about-page-new .ab-mission-photo::after,
.about-page-new .ab-person-photo::after,
.about-page-new .ab-collection::before,
.about-page-new .ab-final-visual::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:2;
    background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.08),transparent 62%);
    transform:translateX(-120%);
}

.about-page-new .ab-story-visual:hover .ab-story-photo::after,
.about-page-new .ab-mission-gallery:hover .ab-mission-photo::after,
.about-page-new .ab-team-grid:hover .ab-person-photo::after,
.about-page-new .ab-collection:hover::before,
.about-page-new .ab-final:hover .ab-final-visual::after{
    animation:abSweep .85s ease;
}

@keyframes abSweep{
    from{transform:translateX(-120%)}
    to{transform:translateX(120%)}
}

/* timeline draw */
.about-page-new .ab-timeline::before{
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform 1.4s cubic-bezier(.16,1,.3,1);
}

.about-page-new .ab-timeline.ab-visible::before{
    transform:scaleX(1);
}

/* staggered marker motion */
.about-page-new .ab-time-dot{
    transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease;
}

.about-page-new .ab-time:hover .ab-time-dot{
    transform:translateY(-6px) scale(1.08);
    box-shadow:0 0 0 7px rgba(216,188,137,.07);
}

/* cards float differently */
.about-page-new .ab-value:nth-child(1){transition-delay:.02s}
.about-page-new .ab-value:nth-child(2){transition-delay:.08s}
.about-page-new .ab-value:nth-child(3){transition-delay:.14s}
.about-page-new .ab-value:nth-child(4){transition-delay:.20s}

/* magnetic buttons */
.about-page-new .ab-btn{
    position:relative;
    overflow:hidden;
}

.about-page-new .ab-btn::before{
    content:"";
    position:absolute;
    width:0;
    height:0;
    left:50%;
    top:50%;
    border-radius:50%;
    background:currentColor;
    opacity:.12;
    transform:translate(-50%,-50%);
    transition:width .45s ease,height .45s ease;
}

.about-page-new .ab-btn:hover::before{
    width:220px;
    height:220px;
}

/* number pulse */
.about-page-new .ab-mini-stat strong,
.about-page-new .ab-story-point strong,
.about-page-new .ab-mission-value strong,
.about-page-new .ab-dna-item b,
.about-page-new .ab-pillar b{
    transition:transform .35s ease,color .35s ease;
}

.about-page-new .ab-mini-stat:hover strong,
.about-page-new .ab-story-point:hover strong,
.about-page-new .ab-mission-value:hover strong,
.about-page-new .ab-dna-item:hover b,
.about-page-new .ab-pillar:hover b{
    transform:translateX(5px);
    color:var(--ab-accent-2);
}

/* soft moving ambient glow */
.about-page-new .ab-dna,
.about-page-new .ab-values,
.about-page-new .ab-history{
    position:relative;
}

.about-page-new .ab-dna::before,
.about-page-new .ab-values::before,
.about-page-new .ab-history::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    pointer-events:none;
    filter:blur(30px);
    opacity:.12;
    animation:abGlow 8s ease-in-out infinite alternate;
}

.about-page-new .ab-dna::before{
    left:-90px;
    top:-100px;
    background:var(--ab-gold);
}

.about-page-new .ab-values::before{
    right:-100px;
    top:-80px;
    background:var(--ab-gold);
}

.about-page-new .ab-history::before{
    right:-100px;
    bottom:-110px;
    background:#7b3e4c;
}

@keyframes abGlow{
    from{transform:translate3d(0,0,0) scale(.85)}
    to{transform:translate3d(35px,20px,0) scale(1.15)}
}

/* team images get an editorial lift */
.about-page-new .ab-person{
    transition:transform .45s cubic-bezier(.16,1,.3,1);
}

.about-page-new .ab-person:hover{
    transform:translateY(-8px);
}

/* review cards rotate a tiny amount independently */
.about-page-new .ab-review:nth-child(1):hover{transform:translateY(-7px) rotate(-.4deg)}
.about-page-new .ab-review:nth-child(2):hover{transform:translateY(-7px) rotate(.25deg)}
.about-page-new .ab-review:nth-child(3):hover{transform:translateY(-7px) rotate(-.25deg)}

/* collection text slide-up */
.about-page-new .ab-collection-copy{
    transform:translateY(10px);
    transition:transform .55s cubic-bezier(.16,1,.3,1);
}

.about-page-new .ab-collection:hover .ab-collection-copy{
    transform:translateY(0);
}

/* hero content letter reveal */
.about-page-new .ab-hero h1{
    animation:abLetterIn 1.15s cubic-bezier(.16,1,.3,1) both;
    animation-delay:.2s;
}

.about-page-new .ab-hero .ab-copy{
    animation:abHeroCopy .95s ease both;
    animation-delay:.5s;
}

@keyframes abLetterIn{
    from{opacity:0;transform:translateY(28px);letter-spacing:.02em}
    to{opacity:1;transform:none;letter-spacing:-.055em}
}

@keyframes abHeroCopy{
    from{opacity:0;transform:translateY(18px)}
    to{opacity:1;transform:none}
}

/* parallax-like scroll treatment for selected media */
.about-page-new .ab-story-image img,
.about-page-new .ab-final-visual img{
    transform:scale(1.04);
    will-change:transform;
}

/* =========================================================
   EXTRA DARK MODE DETAILS
========================================================= */

body.dark-mode .about-page-new .ab-value::after{
    border-color:rgba(224,179,110,.22);
}

body.dark-mode .about-page-new .ab-value:hover{
    box-shadow:0 18px 38px rgba(0,0,0,.28);
}

body.dark-mode .about-page-new .ab-review:hover{
    box-shadow:0 16px 32px rgba(0,0,0,.28);
}

body.dark-mode .about-page-new .ab-timeline::before{
    background:rgba(224,179,110,.25);
}

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

@media (prefers-reduced-motion:reduce){
    .about-page-new .ab-title::after,
    .about-page-new .ab-timeline::before{
        transition:none !important;
    }
    .about-page-new .ab-hero h1,
    .about-page-new .ab-hero .ab-copy,
    .about-page-new .ab-dna::before,
    .about-page-new .ab-values::before,
    .about-page-new .ab-history::before{
        animation:none !important;
    }
}

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

@media (max-width:1050px){
    .about-page-new .ab-team-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .about-page-new .ab-person:nth-child(4){
        display:none;
    }

    .about-page-new .ab-timeline{
        grid-template-columns:repeat(3,1fr);
    }

    .about-page-new .ab-time:nth-child(4),
    .about-page-new .ab-time:nth-child(5){
        display:none;
    }
}

@media (max-width:800px){

    .about-page-new{
        --ab-gap:13px;
    }

    .about-page-new .ab-hero{
        height:650px;
        min-height:650px;
    }

    .about-page-new .ab-hero-content{
        width:78%;
        padding:35px 23px;
    }

    .about-page-new .ab-hero h1{
        font-size:58px;
    }

    .about-page-new .ab-story,
    .about-page-new .ab-mission,
    .about-page-new .ab-final{
        grid-template-columns:1fr;
    }

    .about-page-new .ab-story-visual{
        min-height:340px;
        padding:15px;
    }

    .about-page-new .ab-story-copy,
    .about-page-new .ab-mission-copy,
    .about-page-new .ab-final-copy{
        min-height:390px;
        padding:33px 23px;
    }

    .about-page-new .ab-mission-gallery{
        min-height:390px;
        padding:15px;
    }

    .about-page-new .ab-history,
    .about-page-new .ab-values,
    .about-page-new .ab-team,
    .about-page-new .ab-testimonials{
        padding:34px 23px;
    }

    .about-page-new .ab-history-top,
    .about-page-new .ab-values-head,
    .about-page-new .ab-team-head{
        display:block;
    }

    .about-page-new .ab-history-top .ab-copy,
    .about-page-new .ab-values-head .ab-copy,
    .about-page-new .ab-team-head .ab-copy{
        margin-top:11px;
    }

    .about-page-new .ab-timeline{
        grid-template-columns:1fr 1fr;
        gap:24px 15px;
    }

    .about-page-new .ab-time:nth-child(4),
    .about-page-new .ab-time:nth-child(5){
        display:block;
    }

    .about-page-new .ab-values-grid{
        grid-template-columns:1fr 1fr;
    }

    .about-page-new .ab-team-grid{
        grid-template-columns:1fr 1fr;
    }

    .about-page-new .ab-person:nth-child(4){
        display:block;
    }

    .about-page-new .ab-person-photo{
        height:275px;
    }

    .about-page-new .ab-collections{
        grid-template-columns:1fr;
        gap:13px;
    }

    .about-page-new .ab-collection{
        min-height:320px;
    }

    .about-page-new .ab-review-grid{
        grid-template-columns:1fr;
    }

    .about-page-new .ab-final-visual{
        min-height:300px;
    }
}

@media (max-width:520px){

    .about-page-new .ab-hero{
        height:620px;
        min-height:620px;
    }

    .about-page-new .ab-hero-content{
        width:100%;
        padding:30px 20px;
    }

    .about-page-new .ab-hero h1{
        font-size:52px;
    }

    .about-page-new .ab-hero-mark{
        width:80px;
        height:80px;
        right:18px;
        bottom:18px;
        font-size:8px;
    }

    .about-page-new .ab-story-points,
    .about-page-new .ab-mission-values{
        grid-template-columns:1fr;
    }

    .about-page-new .ab-story-point + .ab-story-point,
    .about-page-new .ab-mission-value + .ab-mission-value{
        border-left:0;
        border-top:1px solid var(--ab-line);
        padding-left:0;
    }

    .about-page-new .ab-timeline,
    .about-page-new .ab-values-grid,
    .about-page-new .ab-team-grid{
        grid-template-columns:1fr;
    }

    .about-page-new .ab-person-photo{
        height:310px;
    }

    .about-page-new .ab-mission-gallery{
        grid-template-columns:1fr;
        grid-template-rows:1fr 1fr 1fr;
    }

    .about-page-new .ab-mission-photo.main{
        grid-row:auto;
    }

    .about-page-new .ab-final-links{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
    }

    .about-page-new .ab-from-left,
    .about-page-new .ab-from-right,
    .about-page-new .ab-from-up,
    .about-page-new .ab-pop,
    .about-page-new .ab-clip,
    .about-page-new .ab-tilt,
    .about-page-new .ab-stagger > *{
        opacity:1 !important;
        transform:none !important;
        clip-path:none !important;
    }
}
.story-label,
.chapter-label,
.story-item small,
.story-item span {
    color: #8b6a3e !important;
}
body.dark-mode .story-label,
body.dark-mode .chapter-label,
body.dark-mode .story-item small,
body.dark-mode .story-item span {
    color: #d5aa61 !important;
}

body.dark-mode .story-item p {
    color: #d0c6bb !important;
}

body.about-page-new:not(.dark-mode){
  --U-bg:#f2ece3;
  --U-surface:#fffaf4;
  --U-surface2:#e7dbca;
  --U-surface3:#d7c4ad;
  --U-ink:#211a15;
  --U-heading:#100c09;
  --U-muted:#51483f;
  --U-soft:#75695e;
  --U-gold:#8b5b25;
  --U-gold2:#b17b3d;
  --U-line:rgba(33,26,21,.18);
  --U-deep:#241914;
  --U-deeper:#130d0a;
  --U-accent:#5d1d2b;
  background:var(--U-bg)!important;
  color:var(--U-ink)!important;
}
body.about-page-new.dark-mode{
  --U-bg:#070605;
  --U-surface:#12100e;
  --U-surface2:#1b1714;
  --U-surface3:#28211c;
  --U-ink:#f3eadf;
  --U-heading:#fffaf2;
  --U-muted:#cbbfb1;
  --U-soft:#a89a8c;
  --U-gold:#e4b66f;
  --U-gold2:#f0ce95;
  --U-line:rgba(255,247,235,.20);
  --U-deep:#0e0b09;
  --U-deeper:#030202;
  --U-accent:#8f3f53;
  background:var(--U-bg)!important;
  color:var(--U-ink)!important;
}

/* Full-page surfaces */
body.about-page-new:not(.dark-mode) .ab-sec,
body.about-page-new:not(.dark-mode) .ab-story,
body.about-page-new:not(.dark-mode) .ab-history,
body.about-page-new:not(.dark-mode) .ab-values,
body.about-page-new:not(.dark-mode) .ab-team,
body.about-page-new:not(.dark-mode) .ab-testimonials{
  background:var(--U-bg)!important;
}
body.about-page-new.dark-mode .ab-sec,
body.about-page-new.dark-mode .ab-story,
body.about-page-new.dark-mode .ab-history,
body.about-page-new.dark-mode .ab-values,
body.about-page-new.dark-mode .ab-team,
body.about-page-new.dark-mode .ab-testimonials{
  background:var(--U-bg)!important;
}

/* Explicit text colors — no inherited/global color surprises */
body.about-page-new:not(.dark-mode) .ab-title,
body.about-page-new:not(.dark-mode) .ab-story-quote,
body.about-page-new:not(.dark-mode) .ab-mission-quote,
body.about-page-new:not(.dark-mode) .ab-value h3,
body.about-page-new:not(.dark-mode) .ab-review p,
body.about-page-new:not(.dark-mode) .ab-review strong,
body.about-page-new:not(.dark-mode) .ab-collection-copy h3,
body.about-page-new:not(.dark-mode) .ab-person-info h3,
body.about-page-new:not(.dark-mode) .ab-final-copy h2,
body.about-page-new:not(.dark-mode) .ab-time h3,
body.about-page-new:not(.dark-mode) .ab-story-point strong,
body.about-page-new:not(.dark-mode) .ab-mission-value strong{
  color:var(--U-heading)!important;
}
body.about-page-new:not(.dark-mode) .ab-copy,
body.about-page-new:not(.dark-mode) .ab-body,
body.about-page-new:not(.dark-mode) .ab-value p,
body.about-page-new:not(.dark-mode) .ab-review span,
body.about-page-new:not(.dark-mode) .ab-collection-copy p,
body.about-page-new:not(.dark-mode) .ab-person-info p,
body.about-page-new:not(.dark-mode) .ab-time p,
body.about-page-new:not(.dark-mode) .ab-story-point p,
body.about-page-new:not(.dark-mode) .ab-mission-value p,
body.about-page-new:not(.dark-mode) .ab-testimonials-head .ab-copy{
  color:var(--U-muted)!important;
}
body.about-page-new:not(.dark-mode) .ab-label,
body.about-page-new:not(.dark-mode) .ab-value-num,
body.about-page-new:not(.dark-mode) .ab-value-icon,
body.about-page-new:not(.dark-mode) .ab-stars,
body.about-page-new:not(.dark-mode) .ab-time-dot{
  color:var(--U-gold)!important;
}
body.about-page-new.dark-mode .ab-title,
body.about-page-new.dark-mode .ab-story-quote,
body.about-page-new.dark-mode .ab-mission-quote,
body.about-page-new.dark-mode .ab-value h3,
body.about-page-new.dark-mode .ab-review p,
body.about-page-new.dark-mode .ab-review strong,
body.about-page-new.dark-mode .ab-collection-copy h3,
body.about-page-new.dark-mode .ab-person-info h3,
body.about-page-new.dark-mode .ab-final-copy h2,
body.about-page-new.dark-mode .ab-time h3,
body.about-page-new.dark-mode .ab-story-point strong,
body.about-page-new.dark-mode .ab-mission-value strong{
  color:var(--U-heading)!important;
}
body.about-page-new.dark-mode .ab-copy,
body.about-page-new.dark-mode .ab-body,
body.about-page-new.dark-mode .ab-value p,
body.about-page-new.dark-mode .ab-review span,
body.about-page-new.dark-mode .ab-collection-copy p,
body.about-page-new.dark-mode .ab-person-info p,
body.about-page-new.dark-mode .ab-time p,
body.about-page-new.dark-mode .ab-story-point p,
body.about-page-new.dark-mode .ab-mission-value p,
body.about-page-new.dark-mode .ab-testimonials-head .ab-copy{
  color:var(--U-muted)!important;
}
body.about-page-new.dark-mode .ab-label,
body.about-page-new.dark-mode .ab-value-num,
body.about-page-new.dark-mode .ab-value-icon,
body.about-page-new.dark-mode .ab-stars,
body.about-page-new.dark-mode .ab-time-dot{
  color:var(--U-gold2)!important;
}

/* Cards/content blocks also change completely */
body.about-page-new:not(.dark-mode) .ab-value,
body.about-page-new:not(.dark-mode) .ab-review,
body.about-page-new:not(.dark-mode) .ab-person,
body.about-page-new:not(.dark-mode) .ab-collection,
body.about-page-new:not(.dark-mode) .ab-story-point,
body.about-page-new:not(.dark-mode) .ab-mission-value{
  background:var(--U-surface)!important;
  border-color:var(--U-line)!important;
  color:var(--U-ink)!important;
  box-shadow:0 18px 45px rgba(57,39,23,.08)!important;
}
body.about-page-new.dark-mode .ab-value,
body.about-page-new.dark-mode .ab-review,
body.about-page-new.dark-mode .ab-person,
body.about-page-new.dark-mode .ab-collection,
body.about-page-new.dark-mode .ab-story-point,
body.about-page-new.dark-mode .ab-mission-value{
  background:var(--U-surface2)!important;
  border-color:var(--U-line)!important;
  color:var(--U-ink)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.30)!important;
}

/* Buttons/links */
body.about-page-new:not(.dark-mode) .ab-btn{
  color:#fffaf4!important;
  background:var(--U-deep)!important;
  border-color:var(--U-deep)!important;
}
body.about-page-new.dark-mode .ab-btn{
  color:#17100b!important;
  background:var(--U-gold)!important;
  border-color:var(--U-gold)!important;
}
body.about-page-new:not(.dark-mode) .ab-final{
  background:var(--U-deep)!important;
  color:#fffaf4!important;
}
body.about-page-new.dark-mode .ab-final{
  background:var(--U-deeper)!important;
  color:var(--U-heading)!important;
}
body.about-page-new .ab-final *,
body.about-page-new .ab-hero *{
  text-shadow:none;
}
body.about-page-new:not(.dark-mode) .ab-final h2,
body.about-page-new:not(.dark-mode) .ab-final p,
body.about-page-new:not(.dark-mode) .ab-final .ab-label,
body.about-page-new:not(.dark-mode) .ab-final a{
  color:#fffaf4!important;
}
body.about-page-new.dark-mode .ab-final h2,
body.about-page-new.dark-mode .ab-final p,
body.about-page-new.dark-mode .ab-final .ab-label,
body.about-page-new.dark-mode .ab-final a{
  color:var(--U-heading)!important;
}

/* Lines, timeline, dividers */
body.about-page-new:not(.dark-mode) .ab-story-line,
body.about-page-new:not(.dark-mode) .ab-timeline,
body.about-page-new:not(.dark-mode) .ab-time{
  border-color:var(--U-line)!important;
}
body.about-page-new.dark-mode .ab-story-line,
body.about-page-new.dark-mode .ab-timeline,
body.about-page-new.dark-mode .ab-time{
  border-color:var(--U-line)!important;
}

/* =========================================================
   ALWAYS-ON SCROLL ANIMATION SYSTEM
   No hover required. Every reveal is triggered by scrolling.
   ========================================================= */
.about-page-new .ua-reveal,
.about-page-new .ab-left,
.about-page-new .ab-right,
.about-page-new .ab-up,
.about-page-new .ab-pop,
.about-page-new .ab-clip,
.about-page-new .ab-tilt,
.about-page-new .ab-stagger > *{
  will-change:transform,opacity,filter;
}
.about-page-new .ua-reveal{
  opacity:0;
  transform:translateY(55px) scale(.985);
  filter:blur(7px);
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    transform 1.05s cubic-bezier(.16,1,.3,1),
    filter .9s ease;
}
.about-page-new .ua-reveal.ua-left{transform:translateX(-90px) rotate(-1deg); }
.about-page-new .ua-reveal.ua-right{transform:translateX(90px) rotate(1deg); }
.about-page-new .ua-reveal.ua-pop{transform:scale(.72); }
.about-page-new .ua-reveal.ua-up{transform:translateY(90px); }
.about-page-new .ua-reveal.ua-show{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}
.about-page-new .ua-stagger > *{
  opacity:0;
  transform:translateY(34px);
  filter:blur(4px);
  transition:
    opacity .72s cubic-bezier(.16,1,.3,1),
    transform .82s cubic-bezier(.16,1,.3,1),
    filter .72s ease;
}
.about-page-new .ua-stagger.ua-show > *{opacity:1;transform:none;filter:none;}
.about-page-new .ua-stagger.ua-show > *:nth-child(1){transition-delay:.05s}
.about-page-new .ua-stagger.ua-show > *:nth-child(2){transition-delay:.14s}
.about-page-new .ua-stagger.ua-show > *:nth-child(3){transition-delay:.23s}
.about-page-new .ua-stagger.ua-show > *:nth-child(4){transition-delay:.32s}
.about-page-new .ua-stagger.ua-show > *:nth-child(5){transition-delay:.41s}
.about-page-new .ua-stagger.ua-show > *:nth-child(6){transition-delay:.50s}

/* Image reveal + cinematic zoom */
.about-page-new .ua-media{
  overflow:hidden;
  position:relative;
}
.about-page-new .ua-media img{
  transform:scale(1.10);
  filter:saturate(.88) contrast(1.02);
  transition:transform 1.6s cubic-bezier(.16,1,.3,1),filter 1.4s ease;
}
.about-page-new .ua-media.ua-show img{
  transform:scale(1);
  filter:none;
}
.about-page-new .ua-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.28) 48%,transparent 74%);
  transform:translateX(-130%);
  pointer-events:none;
}
.about-page-new .ua-media.ua-show::after{
  animation:uaShine 1.25s cubic-bezier(.2,.7,.2,1) .12s both;
}
@keyframes uaShine{to{transform:translateX(130%)}}

/* Floating image movement while scrolling */
.about-page-new .ua-parallax img{
  transition:transform .18s linear;
}

/* Hero cinematic entrance */
.about-page-new .ab-hero h1,
.about-page-new .ab-hero .ab-label,
.about-page-new .ab-hero .ab-copy,
.about-page-new .ab-hero .ab-btn{
  animation:uaHeroIn 1s cubic-bezier(.16,1,.3,1) both;
}
.about-page-new .ab-hero h1{animation-delay:.12s}
.about-page-new .ab-hero .ab-copy{animation-delay:.30s}
.about-page-new .ab-hero .ab-btn{animation-delay:.48s}
@keyframes uaHeroIn{
  from{opacity:0;transform:translateY(38px);filter:blur(8px)}
  to{opacity:1;transform:none;filter:none}
}

/* Gentle continuous luxury motion on decorative marks */
.about-page-new .ab-hero-mark{
  animation:uaFloat 5s ease-in-out infinite;
}
@keyframes uaFloat{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-9px) rotate(3deg)}
}

/* Scroll progress accent */
.about-page-new::before{
  content:"";
  position:fixed;
  left:0;top:0;
  width:100%;
  height:3px;
  transform:scaleX(var(--ua-progress,0));
  transform-origin:left center;
  background:linear-gradient(90deg,var(--U-gold),var(--U-gold2),var(--U-accent));
  z-index:9999;
  pointer-events:none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .about-page-new *{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}
/* =========================================
   MOBILE MENU - RIGHT SIDE
   ========================================= */

@media (max-width: 900px) {

    /* Header */
    .header-inner {
        display: flex;
        align-items: center;
    }

    /* Hamburger RIGHT */
    .mobile-button {
        display: flex !important;
        align-items: center;
        justify-content: center;

        margin-left: auto;
        margin-right: 0;

        width: 42px;
        height: 42px;

        position: relative;
        z-index: 1002;

        cursor: pointer;
    }


    /* =====================================
       MOBILE MENU BOX
       ===================================== */

    .navigation {
        position: fixed;

        top: 78px;
        right: 0;
        left: auto;

        width: 76vw;
        max-width: 380px;

        height: 74vh;
        max-height: 74vh;

        background: var(--background, #f7f3ed);

        z-index: 1001;

        display: flex;
        flex-direction: column;

        padding: 8px 0 14px;

        overflow-y: auto;
        overflow-x: hidden;

        box-shadow:
            -12px 10px 35px rgba(0, 0, 0, 0.16);

        border-left: 1px solid rgba(0, 0, 0, 0.08);

        transform: translateX(105%);

        transition:
            transform 0.35s cubic-bezier(.22, 1, .36, 1);

        visibility: hidden;
        opacity: 0;

        pointer-events: none;
    }


    /* Menu OPEN */

    .navigation.active,
    .navigation.show,
    .navigation.open {
        transform: translateX(0);

        visibility: visible;
        opacity: 1;

        pointer-events: auto;
    }


    /* =====================================
       MENU ITEMS
       ===================================== */

    .navigation > a,
    .navigation .nav-item > a {

        width: 100%;

        min-height: 58px;

        display: flex;
        align-items: center;

        padding: 0 28px;

        margin: 0;

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

        font-size: 13px;
        letter-spacing: 1.2px;

        box-sizing: border-box;
    }


    /* =====================================
       DROPDOWN
       ===================================== */

    .navigation .nav-item {
        width: 100%;
    }


    .navigation .dropdown-menu {

        position: static;

        width: 100%;

        display: none;

        padding: 0;

        margin: 0;

        box-shadow: none;

        border: none;

        background: rgba(0, 0, 0, 0.025);
    }


    .navigation .dropdown:hover .dropdown-menu,
    .navigation .dropdown.active .dropdown-menu {
        display: block;
    }


    .navigation .dropdown-menu a {

        min-height: 48px;

        display: flex;
        align-items: center;

        padding: 0 42px;

        font-size: 12px;

        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }


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

    .navigation .mobile-login {

        display: flex !important;

        margin: 12px 20px 0;

        width: calc(100% - 40px);

        min-height: 45px;

        justify-content: center;

        border: none;
    }


    /* =====================================
       SCROLLBAR
       ===================================== */

    .navigation::-webkit-scrollbar {
        width: 3px;
    }

    .navigation::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.25);
    }

}


/* =========================================
   SMALL PHONES
   ========================================= */

@media (max-width: 500px) {
.navigation.active {
    position: fixed !important;

    top: 68px !important;

    left: auto !important;
    right: 10px !important;

    width: 175px !important;

    height: auto !important;

    max-height: none !important;

    overflow: visible !important;

    z-index: 1000001 !important;

    background: #fffdf8 !important;

    display: flex !important;

    flex-direction: column !important;
}

}
/* =========================================
   MOBILE HEADER - RTL + HAMBURGER
   ========================================= */

@media (max-width: 900px) {

    .header-inner {
        position: relative !important;
    }

    /* RTL BUTTON */
    #rtlToggle {
        position: absolute !important;

        top: 50% !important;
        right: 58px !important;
        left: auto !important;

        transform: translateY(-50%) !important;

        margin: 0 !important;
        padding: 0 !important;

        width: 35px !important;
        height: 35px !important;

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

        z-index: 1005 !important;
    }

    /* HAMBURGER */
    #mobileMenu {
        position: absolute !important;

        top: 50% !important;
        right: 15px !important;
        left: auto !important;

        transform: translateY(-50%) !important;

        margin: 0 !important;

        width: 38px !important;
        height: 38px !important;

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

        z-index: 1006 !important;
    }
}
/* =========================================================
   FINAL MOBILE HEADER + MENU FIX
   ========================================================= */

@media (max-width: 900px) {

    /* HEADER */
    .header-inner {
        position: relative !important;
        width: 100% !important;
        height: 68px !important;
        padding: 0 12px !important;
    }


    /* =========================
       RTL + OTHER ICONS
       ========================= */

    .header-actions {
        position: absolute !important;

        right: 52px !important;
        left: auto !important;

        top: 50% !important;
        transform: translateY(-50%) !important;

        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        gap: 3px !important;

        z-index: 1000001 !important;
    }


    /* RTL BUTTON */

    #rtlToggle {
        position: relative !important;

        right: auto !important;
        left: auto !important;

        top: auto !important;

        transform: none !important;

        width: auto !important;
        height: 28px !important;

        margin: 0 !important;
        padding: 3px 5px !important;

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


    /* =========================
       HAMBURGER
       ========================= */

    #mobileMenu {
        position: absolute !important;

        right: 12px !important;
        left: auto !important;

        top: 50% !important;
        transform: translateY(-50%) !important;

        width: 32px !important;
        height: 32px !important;

        margin: 0 !important;
        padding: 0 !important;

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

        z-index: 1000002 !important;

        font-size: 20px !important;
    }

}



:root{
    --bg:#f6f1e8;
    --bg-soft:#eee5d5;
    --surface:#fffdf8;
    --surface-soft:#e8ddcc;

    --text:#211b16;
    --muted:#756c61;

    --gold:#b28a4b;
    --gold-light:#d4ad68;

    --line:rgba(55,42,30,.16);

    --dark:#17120e;
    --dark-soft:#241b15;

    --white:#ffffff;
}

/* DARK THEME VARIABLES */

body.dark-mode{
    --bg:#15110e;
    --bg-soft:#1d1712;
    --surface:#211a15;
    --surface-soft:#2b211a;

    --text:#f7f1e7;
    --muted:#c5b9aa;

    --gold:#d5ad66;
    --gold-light:#e5c47e;

    --line:rgba(235,210,170,.18);
}

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    transition:
        background .4s ease,
        color .4s ease;
}

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

a{
    text-decoration:none;
}

button{
    font-family:inherit;
}

/* =====================================================
   HEADER
===================================================== */


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

.hero{
    min-height:100vh;

    padding-top:82px;

    position:relative;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:#30261d;
}

.hero-bg{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(15,10,7,.76),
            rgba(15,10,7,.2)
        ),
        url("https://images.unsplash.com/photo-1617038220319-276d3cfab638?auto=format&fit=crop&w=1800&q=85")
        center/cover no-repeat;

    transform:scale(1.05);

    animation:heroZoom 12s ease-out forwards;
}

.hero-content{
    position:relative;
    z-index:2;

    width:min(1200px,90%);

    margin:auto;

    color:#fff;
}

.hero-small{
    color:#dfbf7b;

    font-size:10px;
    letter-spacing:5px;

    margin-bottom:22px;
}

.hero h1{
    font-family:Georgia,serif;

    font-size:clamp(58px,8vw,112px);

    font-weight:400;

    line-height:.88;
}

.hero p{
    max-width:510px;

    margin-top:28px;

    color:#eee5d9;

    font-size:14px;

    line-height:1.85;
}

.hero-button{
    display:inline-block;

    margin-top:28px;

    padding:14px 27px;

    background:#d2aa62;

    color:#17120e;

    font-size:10px;

    letter-spacing:2px;
}

.hero-floating{
    position:absolute;

    z-index:3;

    right:8%;
    bottom:11%;

    width:180px;
    height:230px;

    object-fit:cover;

    border:5px solid rgba(255,255,255,.9);

    box-shadow:
        0 20px 60px rgba(0,0,0,.4);

    transform:rotate(5deg);

    animation:floatImage 5s ease-in-out infinite;
}

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

.section{
    position:relative;

    padding:68px 5%;

    background:var(--bg);

    overflow:hidden;
}

.section.alt{
    background:var(--bg-soft);
}

.section-inner{
    width:min(1320px,100%);

    margin:auto;
}

.eyebrow{
    color:var(--gold);

    font-size:10px;
    letter-spacing:4px;

    margin-bottom:12px;
}

.section-title{
    color:var(--text);

    font-family:Georgia,serif;

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

    font-weight:400;

    line-height:1;
}

.section-copy{
    color:var(--muted);

    font-size:14px;

    line-height:1.8;
}

/* =====================================================
   FRESH
===================================================== */

.fresh{
    padding-top:65px;
    padding-bottom:65px;
}

.fresh-grid{
    display:grid;

    grid-template-columns:
        1fr
        1.2fr
        1fr;

    gap:24px;

    align-items:center;
}

.fresh-text{
    padding-right:20px;
}

.fresh-image{
    height:400px;

    overflow:hidden;
}

.fresh-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:1s ease;
}

.fresh-image:hover img{
    transform:scale(1.08);
}

.fresh-side{
    display:grid;

    gap:20px;
}

.mini-image{
    height:190px;

    overflow:hidden;
}

.mini-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.8s ease;
}

.mini-image:hover img{
    transform:scale(1.08);
}

/* =====================================================
   JUST ARRIVED
===================================================== */

.arrived{
    padding-top:60px;
    padding-bottom:65px;
}

.arrived-head{
    display:flex;

    justify-content:space-between;
    align-items:flex-end;

    gap:30px;

    margin-bottom:30px;
}

.arrived-grid{
    display:grid;

    grid-template-columns:
        1.25fr
        .9fr
        .9fr;

    gap:20px;
}

.arrived-card{
    position:relative;

    height:400px;

    overflow:hidden;

    background:var(--surface);
}

.arrived-card:nth-child(2){
    height:340px;
    margin-top:60px;
}

.arrived-card:nth-child(3){
    height:340px;
}

.arrived-card img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:1s ease;
}

.arrived-card:hover img{
    transform:scale(1.07);
}

.arrived-label{
    position:absolute;

    left:18px;
    bottom:18px;

    padding:10px 14px;

    background:rgba(20,15,10,.82);

    color:#fff;

    font-size:10px;
    letter-spacing:2px;
}

/* =====================================================
   EDIT
===================================================== */

.edit{
    background:var(--surface);
}

.edit-switch{
    display:flex;

    gap:30px;

    margin:30px 0;

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

    overflow-x:auto;
}

.edit-switch button{
    flex-shrink:0;

    padding:0 0 14px;

    border:0;

    background:transparent;

    color:var(--muted);

    font-size:10px;
    letter-spacing:2px;

    cursor:pointer;
}

.edit-switch button.active{
    color:var(--gold);

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

.edit-panel{
    display:none;

    grid-template-columns:
        1.15fr
        .85fr;

    gap:30px;

    min-height:350px;
}

.edit-panel.active{
    display:grid;
}

.edit-main-image{
    height:360px;

    overflow:hidden;
}

.edit-main-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:1s ease;
}

.edit-main-image:hover img{
    transform:scale(1.05);
}

.edit-info{
    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:20px;
}

.edit-info h3{
    color:var(--text);

    font-family:Georgia,serif;

    font-size:42px;

    font-weight:400;

    margin-bottom:15px;
}

.edit-info p{
    color:var(--muted);

    line-height:1.8;

    max-width:470px;
}

.view-link{
    display:inline-block;

    margin-top:24px;

    width:max-content;

    color:var(--gold);

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

    padding-bottom:7px;

    font-size:10px;

    letter-spacing:2px;
}

/* =====================================================
   SIGNATURE
===================================================== */

.signature{
    padding-top:65px;
    padding-bottom:65px;
}

.signature-layout{
    display:grid;

    grid-template-columns:
        .75fr
        1.5fr
        .75fr;

    gap:20px;

    align-items:center;
}

.signature-image{
    height:290px;

    overflow:hidden;
}

.signature-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.9s ease;
}

.signature-image:hover img{
    transform:scale(1.08);
}

.signature-center{
    text-align:center;

    padding:20px;
}

.signature-center h2{
    color:var(--text);

    font-family:Georgia,serif;

    font-size:50px;

    font-weight:400;
}

.signature-center p{
    color:var(--muted);

    line-height:1.8;

    margin-top:15px;
}

/* =====================================================
   WATCH EDIT
===================================================== */

.watch-edit{
    background:#17120e;

    color:#fff;
}

.watch-layout{
    display:grid;

    grid-template-columns:
        1.2fr
        .8fr;

    gap:40px;

    align-items:center;
}

.watch-image{
    height:410px;

    overflow:hidden;
}

.watch-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:1s ease;
}

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

.watch-content .eyebrow{
    color:#d5ad66;
}

.watch-content h2{
    color:#fff;

    font-family:Georgia,serif;

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

    font-weight:400;

    line-height:1;
}

.watch-content p{
    color:#cfc3b4;

    line-height:1.85;

    margin-top:20px;
}

.watch-link{
    display:inline-block;

    margin-top:25px;

    color:#dfbb73;

    border-bottom:1px solid #dfbb73;

    padding-bottom:7px;

    font-size:10px;

    letter-spacing:2px;
}

/* =====================================================
   STYLE
===================================================== */

.style{
    padding-top:65px;
    padding-bottom:65px;
}

.style-grid{
    display:grid;

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

    gap:15px;

    margin-top:32px;
}

.style-item{
    position:relative;

    height:310px;

    overflow:hidden;
}

.style-item img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:1s ease;
}

.style-item:hover img{
    transform:scale(1.09);
}

.style-item::after{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            transparent 40%,
            rgba(0,0,0,.78)
        );
}

.style-text{
    position:absolute;

    z-index:2;

    left:18px;
    bottom:18px;

    color:#fff;
}

.style-text strong{
    display:block;

    font-family:Georgia,serif;

    font-size:24px;

    font-weight:400;
}

.style-text span{
    display:block;

    margin-top:5px;

    font-size:9px;

    letter-spacing:2px;
}

/* =====================================================
   BEHIND
===================================================== */

.behind{
    background:var(--bg-soft);
}

.behind-layout{
    display:grid;

    grid-template-columns:
        .8fr
        1.2fr;

    gap:40px;

    align-items:center;
}

.behind-images{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;
}

.behind-images img{
    width:100%;
    height:190px;

    object-fit:cover;
}

.behind-images img:first-child{
    margin-top:35px;
}

.behind-copy h2{
    color:var(--text);

    font-family:Georgia,serif;

    font-size:48px;

    font-weight:400;
}

.behind-copy p{
    color:var(--muted);

    line-height:1.9;

    margin-top:18px;

    max-width:550px;
}

/* =====================================================
   EXPLORE
===================================================== */

.explore{
    background:var(--surface);

    padding-top:55px;
    padding-bottom:55px;
}

.explore-line{
    display:grid;

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

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

.explore-line a{
    padding:25px 18px;

    color:var(--text);

    border-right:1px solid var(--line);

    transition:.3s ease;
}

.explore-line a:last-child{
    border-right:0;
}

.explore-line a:hover{
    background:var(--bg-soft);

    color:var(--gold);
}

.explore-line span{
    display:block;

    color:var(--gold);

    font-size:9px;
    letter-spacing:2px;

    margin-bottom:8px;
}

.explore-line strong{
    font-family:Georgia,serif;

    font-size:22px;

    font-weight:400;
}

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

.cta{
    padding:70px 5%;

    text-align:center;

    background:#eee4d2;
}

body.dark-mode .cta{
    background:#2b2119;
}

.cta h2{
    color:var(--text);

    font-family:Georgia,serif;

    font-size:clamp(38px,5vw,65px);

    font-weight:400;
}

.cta p{
    max-width:550px;

    margin:15px auto 25px;

    color:var(--muted);

    line-height:1.8;
}

.cta a{
    display:inline-block;

    padding:14px 25px;

    background:#17120e;

    color:#fff;

    font-size:10px;

    letter-spacing:2px;
}

/* =====================================================
   FOOTER
===================================================== */

.footer{
    background:#120e0b;

    color:#eee;
}

.footer-main{
    width:min(1400px,90%);

    margin:auto;

    padding:70px 0 55px;

    display:grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr;

    gap:50px;
}

.footer-logo{
    display:block;

    color:#fff;

    font-family:Georgia,serif;

    font-size:23px;

    letter-spacing:4px;
}

.footer-logo small{
    display:block;

    margin-top:5px;

    font-family:Arial,sans-serif;

    font-size:8px;

    letter-spacing:3px;
}

.footer-brand p{
    max-width:330px;

    margin-top:20px;

    color:#aaa096;

    font-size:13px;

    line-height:1.8;
}

.social-links{
    display:flex;

    gap:18px;

    margin-top:22px;
}

.social-links a{
    color:#c8b9a7;

    font-size:10px;
}

.footer-column{
    display:flex;

    flex-direction:column;

    gap:13px;
}

.footer-column h3{
    margin-bottom:8px;

    color:#d4aa61;

    font-size:10px;

    letter-spacing:3px;
}

.footer-column a{
    color:#aaa096;

    font-size:12px;

    transition:.25s ease;
}

.footer-column a:hover{
    color:#fff;
}

.footer-bottom{
    width:min(1400px,90%);

    margin:auto;

    padding:20px 0;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    color:#857b72;

    font-size:10px;
}

.footer-bottom div{
    display:flex;

    gap:20px;
}

.footer-bottom a{
    color:#857b72;
}

/* =====================================================
   ANIMATIONS
===================================================== */

.reveal,
.reveal-left,
.reveal-right,
.zoom-reveal{
    opacity:0;

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

.reveal{
    transform:translateY(45px);
}

.reveal-left{
    transform:translateX(-60px);
}

.reveal-right{
    transform:translateX(60px);
}

.zoom-reveal{
    transform:scale(.86);
}

.reveal.show,
.reveal-left.show,
.reveal-right.show,
.zoom-reveal.show{
    opacity:1;

    transform:none;
}

@keyframes heroZoom{

    from{
        transform:scale(1.05);
    }

    to{
        transform:scale(1);
    }
}

@keyframes floatImage{

    0%,100%{
        transform:translateY(0) rotate(5deg);
    }

    50%{
        transform:translateY(-14px) rotate(3deg);
    }
}

/* =====================================================
   RTL
===================================================== */

html[dir="rtl"] .fresh-text{
    padding-right:0;
    padding-left:20px;
}

html[dir="rtl"] .hero-content{
    text-align:right;
}

html[dir="rtl"] .dropdown-menu{
    left:auto;

    right:50%;

    transform:
        translateX(50%)
        translateY(10px);
}

html[dir="rtl"] .nav-item:hover .dropdown-menu{
    transform:
        translateX(50%)
        translateY(0);
}

html[dir="rtl"] .footer-main,
html[dir="rtl"] .footer-bottom{
    direction:rtl;
}

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

@media(max-width:1100px){

    .navigation{
        gap:14px;
    }

    .navigation > a,
    .nav-item > a{
        font-size:9px;
    }

    .login-button{
        display:none;
    }

    .fresh-grid{
        grid-template-columns:
            1fr
            1.3fr;
    }

    .fresh-side{
        display:flex;
    }

    .mini-image{
        width:50%;
    }

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

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

@media(max-width:900px){

    .header-inner{
        height:72px;
    }

    .mobile-button{
        display:block;

        order:3;
    }

    .header-actions{
        margin-left:auto;
    }

    /* MOBILE NAV */

    .navigation{

        position:absolute;

        top:72px;
        left:0;

        width:100%;

        height:auto;

        max-height:
            calc(100vh - 72px);

        overflow-y:auto;

        display:none;

        flex-direction:column;

        align-items:stretch;

        justify-content:flex-start;

        gap:0;

        flex:none;

        background:#fffdf8 !important;

        border-top:
            1px solid #ded5c8;

        box-shadow:
            0 20px 40px rgba(0,0,0,.15);
    }

    /* IMPORTANT:
       FIXES WHITE TEXT ON CREAM MENU */

    .navigation.active{
        display:flex;
    }

    .navigation > a,
    .navigation > .nav-item > a{
        display:block;

        width:100%;

        padding:17px 6%;

        color:#211b16 !important;

        background:#fffdf8 !important;

        border-bottom:
            1px solid #ded5c8;

        font-size:11px;

        letter-spacing:1.7px;
    }

    .navigation > a.active,
    .navigation > .nav-item > a.active{
        color:#b28a4b !important;
    }

    /* SCROLLED HEADER MUST NOT MAKE MOBILE LINKS WHITE */

    .header.scrolled .navigation{
        background:#fffdf8 !important;
    }

    .header.scrolled .navigation > a,
    .header.scrolled .navigation > .nav-item > a{
        color:#211b16 !important;
        background:#fffdf8 !important;
    }

    .header.scrolled .navigation > a.active,
    .header.scrolled .navigation > .nav-item > a.active{
        color:#b28a4b !important;
    }

    /* DARK MOBILE MENU */

    body.dark-mode .navigation,
    body.dark-mode .header.scrolled .navigation{
        background:#211a15 !important;
    }

    body.dark-mode .navigation > a,
    body.dark-mode .navigation > .nav-item > a,
    body.dark-mode .header.scrolled .navigation > a,
    body.dark-mode .header.scrolled .navigation > .nav-item > a{
        color:#f7f1e7 !important;

        background:#211a15 !important;

        border-bottom:
            1px solid rgba(235,210,170,.16);
    }

    body.dark-mode .navigation > a.active,
    body.dark-mode .navigation > .nav-item > a.active{
        color:#d5ad66 !important;
    }

    /* DROPDOWN MOBILE */

    .nav-item{
        width:100%;
    }

    .dropdown-menu{

        position:static;

        width:100%;

        min-width:0;

        padding:0;

        display:none;

        opacity:1;

        visibility:visible;

        transform:none !important;

        box-shadow:none;

        border:0;
    }

    .nav-item.active-dropdown .dropdown-menu{
        display:block;
    }

    .dropdown-menu a{
        display:block;

        padding:14px 10%;

        background:#eee7dc;

        color:#211b16 !important;

        border-bottom:
            1px solid #ddd3c5;
    }

    body.dark-mode .dropdown-menu a{
        background:#2b211a;

        color:#f7f1e7 !important;

        border-bottom:
            1px solid rgba(235,210,170,.14);
    }

    /* MOBILE LOGIN */

    .mobile-login{
        display:block !important;
    }

    /* HIDE DESKTOP LOGIN */

    .login-button{
        display:none;
    }

    /* MOBILE CONTENT */

    .fresh-grid,
    .watch-layout,
    .behind-layout{
        grid-template-columns:1fr;
    }

    .fresh-image{
        height:360px;
    }

    .fresh-side{
        display:grid;

        grid-template-columns:
            1fr 1fr;
    }

    .arrived-grid{
        grid-template-columns:
            1fr 1fr;
    }

    .arrived-card:first-child{
        grid-column:1/-1;
    }

    .arrived-card:nth-child(2),
    .arrived-card:nth-child(3){
        height:300px;

        margin-top:0;
    }

    .edit-panel.active{
        grid-template-columns:1fr;
    }

    .signature-layout{
        grid-template-columns:
            1fr 1fr;
    }

    .signature-center{
        grid-column:1/-1;

        grid-row:1;
    }

    .watch-image{
        height:350px;
    }

    .footer-main{
        grid-template-columns:
            1fr 1fr;
    }

    .footer-brand{
        grid-column:1/-1;
    }
}

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

@media(max-width:600px){

    .header-inner{
        width:92%;
    }

    .logo{
        min-width:auto;
    }

    .logo-name{
        font-size:16px;
        letter-spacing:3px;
    }

    .logo-jewels{
        display:none;
    }

    .logo-symbol{
        font-size:25px;
    }

    .header-actions{
        gap:5px;
    }

    .icon-button{
        display:none;
    }

    .theme-button{
        font-size:17px;
    }

    .rtl-button{
        padding:6px 8px;
    }

    /* HERO */

    .hero{
        min-height:100svh;

        padding-top:72px;
    }

    .hero-content{
        width:88%;
    }

    .hero h1{
        font-size:57px;
    }

    .hero p{
        max-width:88%;

        font-size:13px;
    }

    .hero-floating{
        width:110px;
        height:145px;

        right:6%;
        bottom:8%;
    }

    /* SECTIONS */

    .section{
        padding:
            50px 5%;
    }

    /* FRESH */

    .fresh-grid{
        display:block;
    }

    .fresh-text{
        padding:0;

        margin-bottom:25px;
    }

    .fresh-image{
        height:330px;
    }

    .fresh-side{
        margin-top:14px;

        gap:10px;
    }

    .mini-image{
        height:160px;
    }

    /* ARRIVALS */

    .arrived-head{
        display:block;
    }

    .arrived-head .section-copy{
        margin-top:15px;
    }

    .arrived-grid{
        grid-template-columns:1fr;
    }

    .arrived-card:first-child{
        grid-column:auto;
    }

    .arrived-card,
    .arrived-card:nth-child(2),
    .arrived-card:nth-child(3){
        height:330px;
    }

    /* EDIT */

    .edit-switch{
        gap:20px;
    }

    .edit-main-image{
        height:310px;
    }

    .edit-info{
        padding:
            20px 0;
    }

    .edit-info h3{
        font-size:35px;
    }

    /* SIGNATURE */

    .signature-layout{
        grid-template-columns:1fr;
    }

    .signature-center{
        grid-column:auto;
    }

    .signature-image{
        height:280px;
    }

    /* WATCH */

    .watch-image{
        height:300px;
    }

    /* STYLE */

    .style-grid{
        grid-template-columns:
            1fr 1fr;

        gap:9px;
    }

    .style-item{
        height:230px;
    }

    /* BEHIND */

    .behind-images{
        grid-template-columns:
            1fr 1fr;

        gap:8px;
    }

    .behind-images img{
        height:160px;
    }

    /* EXPLORE */

    .explore-line{
        grid-template-columns:
            1fr 1fr;
    }

    .explore-line a{
        border-bottom:
            1px solid var(--line);
    }

    .explore-line a:nth-child(2){
        border-right:0;
    }

    /* FOOTER */

    .footer-main{
        grid-template-columns:
            1fr 1fr;

        gap:30px;
    }

    .footer-bottom{
        flex-direction:column;

        align-items:flex-start;
    }

    .footer-bottom div{
        flex-direction:column;

        gap:8px;
    }
}

/* =====================================================
   VERY SMALL
===================================================== */

@media(max-width:390px){

    .hero h1{
        font-size:48px;
    }

    .style-grid{
        grid-template-columns:1fr;
    }

    .style-item{
        height:280px;
    }

    .footer-main{
        grid-template-columns:1fr;
    }

    .footer-brand{
        grid-column:auto;
    }
}


/* ===== FINAL FIXED HEADER ===== */

.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    z-index: 999999 !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: translateY(0) !important;

    transition:
        background-color .3s ease,
        box-shadow .3s ease !important;
}


/* HEADER WHEN SCROLLING */

.header.scrolled {
    position: fixed !important;
    top: 0 !important;

    background: #18130f !important;

    box-shadow:
        0 8px 30px rgba(0,0,0,.35) !important;

    border-bottom:
        1px solid rgba(212,170,97,.25) !important;
}


/* HEADER CONTENT */

.header-inner {
    position: relative !important;
    z-index: 1000000 !important;
}


/* SCROLLED TEXT */

.header.scrolled .logo-name,
.header.scrolled .logo-jewels,
.header.scrolled .navigation a,
.header.scrolled .icon-button,
.header.scrolled .bag-button,
.header.scrolled .theme-button,
.header.scrolled .rtl-button,
.header.scrolled .login-button {
    color: #ffffff !important;
}


.header.scrolled .logo-symbol {
    color: #d4aa61 !important;
}


/* PAGE CONTENT MUST STAY BELOW HEADER */

main,
section,
.na-hero,
.na-featured,
.na-types,
.na-editorial,
.na-collections,
.na-final {
    position: relative;
    z-index: 1;
}


/* HEADER ABOVE EVERYTHING */

.header,
.header-inner,
.navigation,
.header-actions,
.mobile-button {
    isolation: isolate;
}


/* MOBILE */

@media (max-width: 900px) {

    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;

        width: 100% !important;

        z-index: 999999 !important;
    }

    .header-inner {
        min-height: 70px !important;
    }

    .navigation.active {
        position: fixed !important;

        top: 70px !important;
        left: 0 !important;

        width: 100% !important;

        height: calc(100vh - 70px) !important;

        overflow-y: auto !important;

        z-index: 999998 !important;
    }

}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-page {
    overflow-x: hidden;
}

/* HERO */

.about-hero {
    min-height: 62vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.about-hero-content {
    max-width: 720px;
    position: relative;
    z-index: 2;
}

.about-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(42px, 6vw, 82px);
    line-height: 1;
}

.about-hero p {
    max-width: 620px;
    line-height: 1.8;
}


/* ABOUT INTRO */

.about-intro {
    padding: 90px 0;
}

.about-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-intro-image {
    overflow: hidden;
}

.about-intro-image img {
    width: 100%;
    display: block;
    transition: transform .7s ease;
}

.about-intro-image:hover img {
    transform: scale(1.025);
}

.about-intro-content h2 {
    margin-bottom: 20px;
}

.about-intro-content p {
    line-height: 1.9;
}


/* STORY */

.about-story {
    padding: 90px 0;
}

.about-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-story-image {
    overflow: hidden;
}

.about-story-image img {
    width: 100%;
    display: block;
    transition: transform .7s ease;
}

.about-story-image:hover img {
    transform: scale(1.025);
}


/* VALUES */

.about-values {
    padding: 80px 0;
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.about-value-card {
    padding: 35px 28px;
    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.about-value-card:hover {
    transform: translateY(-6px);
}


/* STATS */

.about-stats {
    padding: 70px 0;
}

.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}

.about-stat {
    padding: 25px 15px;
}

.about-stat h3 {
    font-size: 38px;
    margin-bottom: 8px;
}


/* CTA */

.about-cta {
    padding: 90px 0;
    text-align: center;
}

.about-cta-content {
    max-width: 700px;
    margin: auto;
}

.about-cta h2 {
    margin-bottom: 18px;
}

.about-cta p {
    line-height: 1.8;
}


/* IMAGE ANIMATION */

.about-intro-image,
.about-story-image {
    animation: aboutImageReveal .8s ease both;
}

@keyframes aboutImageReveal {
    from {
        opacity: .85;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

@media (max-width: 900px) {

    .about-hero {
        min-height: 55vh;
    }

    .about-intro,
    .about-story {
        padding: 60px 0;
    }

    .about-intro-grid,
    .about-story-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .about-values {
        padding: 60px 0;
    }

    .about-values-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .about-stats {
        padding: 55px 0;
    }

    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-cta {
        padding: 65px 20px;
    }
}


@media (max-width: 500px) {

    .about-hero {
        min-height: 48vh;
    }

    .about-hero h1 {
        font-size: 42px;
    }

    .about-intro,
    .about-story {
        padding: 50px 0;
    }

    .about-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .about-stat h3 {
        font-size: 30px;
    }
}
/* =========================================================
   ZIVARA DARK MODE
   ABOUT PAGE
   DESKTOP + MOBILE
   ========================================================= */

body.dark-mode {
    background: #15110e;
    color: #f5eee5;
}


/* HEADER */

body.dark-mode header {
    background: #15110e;
    border-color: rgba(255,255,255,.08);
}

body.dark-mode header a {
    color: #f5eee5;
}


/* ABOUT HERO */

body.dark-mode .about-hero {
    background: #15110e;
}

body.dark-mode .about-hero h1,
body.dark-mode .about-hero h2,
body.dark-mode .about-hero p {
    color: #f5eee5;
}


/* INTRO */

body.dark-mode .about-intro {
    background: #191410;
}

body.dark-mode .about-intro h2,
body.dark-mode .about-intro h3 {
    color: #f5eee5;
}

body.dark-mode .about-intro p {
    color: #cfc5bb;
}


/* STORY */

body.dark-mode .about-story {
    background: #15110e;
}

body.dark-mode .about-story h2,
body.dark-mode .about-story h3 {
    color: #f5eee5;
}

body.dark-mode .about-story p {
    color: #cfc5bb;
}


/* VALUE CARDS */

body.dark-mode .about-values {
    background: #191410;
}

body.dark-mode .about-value-card {
    background: #211a15;
    border-color: rgba(255,255,255,.08);
}

body.dark-mode .about-value-card h3 {
    color: #f5eee5;
}

body.dark-mode .about-value-card p {
    color: #cfc5bb;
}


/* STATS */

body.dark-mode .about-stats {
    background: #15110e;
}

body.dark-mode .about-stat h3 {
    color: #d7ad6a;
}

body.dark-mode .about-stat p {
    color: #cfc5bb;
}


/* CTA */

body.dark-mode .about-cta {
    background: #211a15;
}

body.dark-mode .about-cta h2 {
    color: #f5eee5;
}

body.dark-mode .about-cta p {
    color: #cfc5bb;
}


/* MOBILE */

@media (max-width: 900px) {

    body.dark-mode .about-value-card {
        background: #211a15;
    }

}
.back-to-top{
    position:fixed;
    right:25px;
    bottom:25px;
    width:45px;
    height:45px;
    border:1px solid #b38a49;
    background:#19140f;
    color:#fff;
    font-size:22px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transform:translateY(15px);
    transition:all .3s ease;
    z-index:9999;
}

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

.back-to-top:hover{
    background:#b38a49;
    color:#fff;
}
/* =========================================================
   ZIVARA JEWELS
   UNIVERSAL RESPONSIVE + MOBILE + DARK + RTL SYSTEM
   ========================================================= */


/* =========================
   ACTIVE NAVIGATION
   ========================= */

.header .navigation > a.active,
.header .navigation > .nav-item > a.active {
    color: #b38a49 !important;
}


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

.mobile-button {
    display: none;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 5px;
}


/* =========================
   BACK TO TOP
   ========================= */

.back-to-top {
    position: fixed;
    right: 25px;
    bottom: 25px;

    width: 45px;
    height: 45px;

    border: 1px solid #b38a49;
    background: #19140f;
    color: #fff;

    font-size: 22px;

    cursor: pointer;

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

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease;

    z-index: 9999;
}

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

.back-to-top:hover {
    background: #b38a49;
    color: #fff;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html.dark-mode,
html.dark-mode body {
    background: #11100e !important;
    color: #f5eee4 !important;
}


/* Main backgrounds */

html.dark-mode .section,
html.dark-mode .content-section,
html.dark-mode .about-section,
html.dark-mode .category-section,
html.dark-mode .service-section,
html.dark-mode .contact-section,
html.dark-mode main {
    background: #11100e !important;
    color: #f5eee4 !important;
}


/* Light sections */

html.dark-mode .final,
html.dark-mode .light-section,
html.dark-mode .cream-section {
    background: #1b1713 !important;
    color: #f5eee4 !important;
}


/* Text */

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode p,
html.dark-mode span,
html.dark-mode li {
    color: inherit;
}


/* Links */

html.dark-mode a {
    color: #f5eee4;
}


/* Header */

html.dark-mode .header {
    background: #11100e !important;
    color: #fff !important;
    border-bottom-color: rgba(212,170,97,.2) !important;
}

html.dark-mode .logo-name,
html.dark-mode .logo-jewels,
html.dark-mode .navigation > a,
html.dark-mode .navigation > .nav-item > a,
html.dark-mode .icon-button,
html.dark-mode .theme-button,
html.dark-mode .rtl-button,
html.dark-mode .login-button {
    color: #fff !important;
}

html.dark-mode .logo-symbol {
    color: #d4aa61 !important;
}


/* Dropdown */

html.dark-mode .dropdown-menu {
    background: #1b1713 !important;
    border-color: rgba(212,170,97,.25) !important;
}

html.dark-mode .dropdown-menu a {
    color: #fff !important;
}

html.dark-mode .dropdown-menu a:hover {
    background: #2a221b !important;
    color: #d4aa61 !important;
}


/* Borders */

html.dark-mode .section,
html.dark-mode .content-section,
html.dark-mode .card,
html.dark-mode .service-card,
html.dark-mode .category-card {
    border-color: rgba(255,255,255,.12);
}


/* Footer */

html.dark-mode .footer {
    background: #0c0b0a !important;
    color: #f5eee4 !important;
}

html.dark-mode .footer a,
html.dark-mode .footer p,
html.dark-mode .footer h3 {
    color: #f5eee4 !important;
}


/* Forms */

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
    background: #1b1713 !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.2) !important;
}


/* Buttons */

html.dark-mode button {
    color: #fff;
}


/* =========================================================
   RTL
   ========================================================= */

html[dir="rtl"] body {
    direction: rtl;
}

html[dir="rtl"] .header-inner {
    direction: rtl;
}

html[dir="rtl"] .navigation {
    direction: rtl;
}

html[dir="rtl"] .dropdown-menu {
    text-align: right;
}

html[dir="rtl"] .footer-main {
    direction: rtl;
}

html[dir="rtl"] .footer-bottom {
    direction: rtl;
}


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

@media (max-width: 1100px) {

    .header-inner {
        padding-left: 25px;
        padding-right: 25px;
    }

    .navigation {
        gap: 18px;
    }

    .navigation > a,
    .navigation > .nav-item > a {
        font-size: 12px;
    }

}


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

@media (max-width: 900px) {

    /* HEADER */

    .header {
        position: relative;
        z-index: 9999;
    }

    .header-inner {
        min-height: 70px;
        padding: 12px 20px;

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


    /* LOGO */

    .logo {
        flex-shrink: 0;
    }


    /* MOBILE BUTTON */

    .mobile-button {
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10001;
    }


    /* DESKTOP ACTIONS */

    .header-actions {
        display: none !important;
    }


    /* MOBILE NAVIGATION */

    .navigation {

        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

        display: flex;
        flex-direction: column;

        gap: 0;

        background: #f7f2ea;

        border-top: 1px solid rgba(0,0,0,.1);

        box-shadow: 0 15px 30px rgba(0,0,0,.12);

        max-height: 0;
        overflow: hidden;

        opacity: 0;
        visibility: hidden;

        transition:
            max-height .35s ease,
            opacity .25s ease,
            visibility .25s ease;

        z-index: 10000;
    }


    /* OPEN */

    .navigation.mobile-open {

        max-height: 85vh;

        overflow-y: auto;

        opacity: 1;
        visibility: visible;
    }


    /* NAV LINKS */

    .navigation > a,
    .navigation > .nav-item > a {

        width: 100%;

        padding: 16px 22px;

        font-size: 13px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        border-bottom: 1px solid rgba(0,0,0,.08);
    }


    /* DROPDOWN */

    .nav-item.dropdown {
        width: 100%;
    }


    .dropdown-menu {

        position: static !important;

        width: 100% !important;

        max-height: 0;

        overflow: hidden;

        opacity: 0;

        visibility: hidden;

        box-shadow: none !important;

        border: 0 !important;

        transform: none !important;

        transition:
            max-height .3s ease,
            opacity .2s ease;
    }


    .nav-item.dropdown.open .dropdown-menu {

        max-height: 500px;

        opacity: 1;

        visibility: visible;
    }


    .dropdown-menu a {

        display: block;

        width: 100%;

        padding: 13px 38px;

        font-size: 12px;
    }


    /* MOBILE LOGIN */

    .mobile-login {
        display: flex !important;
    }


    /* GENERAL SECTIONS */

    .section,
    .content-section,
    .about-section,
    .category-section,
    .service-section,
    .contact-section {

        padding-left: 6%;
        padding-right: 6%;

    }


    /* IMAGES */

    img {
        max-width: 100%;
        height: auto;
    }


    /* GRIDS */

    .grid,
    .products-grid,
    .category-grid,
    .service-grid,
    .cards-grid {

        grid-template-columns: 1fr !important;

    }


    /* TWO COLUMN LAYOUTS */

    .two-column,
    .split-section,
    .watch-grid,
    .story-grid,
    .content-grid {

        grid-template-columns: 1fr !important;

    }


    /* FLEX */

    .row,
    .section-row {

        flex-direction: column;

    }


    /* TYPOGRAPHY */

    h1 {
        font-size: clamp(32px, 9vw, 55px);
    }

    h2 {
        font-size: clamp(26px, 7vw, 42px);
    }

    h3 {
        font-size: clamp(20px, 5vw, 30px);
    }


    /* FOOTER */

    .footer-main {

        grid-template-columns: 1fr !important;

        gap: 35px;

    }

    .footer-bottom {

        flex-direction: column;

        gap: 15px;

        text-align: center;

    }


    /* BACK TOP */

    .back-to-top {

        right: 15px;
        bottom: 15px;

        width: 42px;
        height: 42px;

    }

}


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

@media (max-width: 600px) {

    .header-inner {
        padding: 10px 15px;
    }

    .logo-name {
        font-size: 18px;
    }

    .logo-jewels {
        font-size: 8px;
    }

    .mobile-button {
        font-size: 25px;
    }

    .section {
        padding-top: 45px;
        padding-bottom: 45px;
    }

    .footer {
        padding-left: 20px;
        padding-right: 20px;
    }

}


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

@media (max-width: 900px) {

    html[dir="rtl"] .navigation {
        text-align: right;
    }

    html[dir="rtl"] .navigation > a,
    html[dir="rtl"] .navigation > .nav-item > a {
        text-align: right;
    }

    html[dir="rtl"] .dropdown-menu a {
        padding-left: 22px;
        padding-right: 38px;
    }

}
/* =========================
   BACK TO TOP BUTTON
   ========================= */

.back-to-top {
    position: fixed;
    right: 25px;
    bottom: 25px;

    width: 45px;
    height: 45px;

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

    background: #19140f;
    color: #ffffff;

    border: 1px solid #b38a49;
    border-radius: 50%;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);

    transition: all 0.3s ease;

    z-index: 9999;
}

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

.back-to-top:hover {
    background: #b38a49;
    color: #ffffff;
    transform: translateY(-3px);
}


/* MOBILE */

@media (max-width: 600px) {

    .back-to-top {
        right: 15px;
        bottom: 15px;

        width: 40px;
        height: 40px;

        font-size: 20px;
    }

}
/* =========================================================
   BACK TO TOP BUTTON
========================================================= */

.back-to-top{
    position:fixed;
    right:25px;
    bottom:25px;

    width:48px;
    height:48px;

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

    border:1px solid #b78942;
    border-radius:50%;

    background:#17130f;
    color:#fff;

    font-size:22px;
    font-weight:400;

    cursor:pointer;

    opacity:0;
    visibility:hidden;

    transform:translateY(20px);

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s ease,
        background .3s ease;

    z-index:99999;
}

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

.back-to-top:hover{
    background:#b78942;
    color:#17130f;
    transform:translateY(-4px);
}


/* DARK MODE */

body.dark-mode .back-to-top{
    background:#211b16;
    color:#f7f0e5;
    border-color:#d4aa61;
}

body.dark-mode .back-to-top:hover{
    background:#d4aa61;
    color:#17130f;
}


/* RTL */

html[dir="rtl"] .back-to-top{
    right:auto;
    left:25px;
}


/* MOBILE */

@media(max-width:600px){

    .back-to-top{
        width:42px;
        height:42px;

        right:15px;
        bottom:15px;

        font-size:20px;
    }

    html[dir="rtl"] .back-to-top{
        right:auto;
        left:15px;
    }

}
/* =========================================================
   ZIVARA — FINAL MOBILE HEADER
   Matches the requested mobile layout
========================================================= */

@media (max-width: 900px) {

    /* =====================================
       HEADER
    ===================================== */

    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        height: 58px !important;

        background: #21150f !important;

        z-index: 999999 !important;
    }

    .header-inner {
        width: 100% !important;
        height: 58px !important;

        padding: 0 12px !important;

        display: flex !important;
        align-items: center !important;

        position: relative !important;
    }


    /* =====================================
       LOGO
    ===================================== */

    .header .logo {
        width: 90px !important;
        min-width: 90px !important;

        height: 50px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;
    }

    .header .logo-symbol {
        display: none !important;
    }

    .header .logo-name {
        font-family: Georgia, serif !important;

        font-size: 16px !important;
        line-height: 16px !important;

        letter-spacing: 2px !important;

        color: #fff !important;
    }

    .header .logo-jewels {
        margin-top: 3px !important;

        font-size: 5px !important;
        line-height: 6px !important;

        letter-spacing: 2px !important;

        color: #fff !important;
    }


    /* =====================================
       DARK MODE + RTL BUTTONS
    ===================================== */

    .header-actions {
        position: absolute !important;

        top: 50% !important;
        right: 48px !important;

        left: auto !important;

        transform: translateY(-50%) !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 2px !important;

        z-index: 1000000 !important;
    }

    .header-actions .icon-button,
    .header-actions .bag-button {
        display: none !important;
    }

    .header-actions .theme-button,
    .header-actions .rtl-button {

        display: flex !important;

        width: 30px !important;
        height: 30px !important;

        padding: 0 !important;
        margin: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        border: 0 !important;
        background: transparent !important;

        color: #fff !important;

        cursor: pointer !important;
    }

    /* DARK MODE ICON */

    .header-actions .theme-button {
        font-size: 17px !important;
    }

    /* RTL */

    .header-actions .rtl-button {
        font-size: 8px !important;

        font-weight: 700 !important;

        letter-spacing: .5px !important;
    }

    /* Hide LOGIN on mobile */

    .header-actions .login-button {
        display: none !important;
    }


    /* =====================================
       HAMBURGER / CLOSE BUTTON
    ===================================== */

    #mobileMenu,
    .mobile-button {

        position: absolute !important;

        top: 50% !important;
        right: 10px !important;

        left: auto !important;

        transform: translateY(-50%) !important;

        width: 32px !important;
        height: 32px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border: 0 !important;

        background: transparent !important;

        color: #fff !important;

        font-size: 22px !important;
        line-height: 1 !important;

        cursor: pointer !important;

        z-index: 1000001 !important;
    }


    /* =====================================
       MOBILE NAVIGATION
       SMALL SIDE PANEL
    ===================================== */

    .navigation {

        position: fixed !important;

        top: 58px !important;
        left: 0 !important;

        right: auto !important;
        bottom: auto !important;

        width: 165px !important;
        max-width: 165px !important;

        height: auto !important;
        max-height: calc(100vh - 58px) !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: stretch !important;

        gap: 0 !important;

        background: #f8f4ed !important;

        border-right: 1px solid rgba(0,0,0,.15) !important;

        box-shadow:
            8px 12px 28px rgba(0,0,0,.16) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        opacity: 0 !important;
        visibility: hidden !important;

        transform: translateX(-100%) !important;

        transition:
            transform .35s ease,
            opacity .25s ease,
            visibility .25s ease !important;

        z-index: 999998 !important;
    }


    /* =====================================
       OPEN MENU
    ===================================== */

    .navigation.active,
    .navigation.mobile-open {

        display: flex !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: translateX(0) !important;
    }


    /* =====================================
       MAIN MENU ITEMS
    ===================================== */

    .navigation > a,
    .navigation > .nav-item > a {

        width: 100% !important;

        height: 48px !important;
        min-height: 48px !important;

        padding: 0 20px !important;

        margin: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        box-sizing: border-box !important;

        color: #29231f !important;

        background: #f8f4ed !important;

        border-bottom:
            1px solid rgba(42,34,27,.12) !important;

        font-size: 10px !important;

        font-weight: 600 !important;

        letter-spacing: 1.5px !important;

        line-height: 1 !important;
    }


    /* =====================================
       DROPDOWN ARROW
    ===================================== */

    .navigation .nav-item > a span {

        display: inline-block !important;

        margin-left: auto !important;

        font-size: 10px !important;

        line-height: 1 !important;

        color: #29231f !important;
    }


    /* =====================================
       DROPDOWN MENU
    ===================================== */

    .navigation .dropdown-menu {

        position: static !important;

        width: 100% !important;
        min-width: 100% !important;

        height: auto !important;

        max-height: 0 !important;

        overflow: hidden !important;

        display: block !important;

        padding: 0 !important;
        margin: 0 !important;

        background: #eee8df !important;

        border: 0 !important;

        box-shadow: none !important;

        opacity: 0 !important;
        visibility: hidden !important;

        transform: none !important;

        transition:
            max-height .3s ease,
            opacity .25s ease !important;
    }


    /* Open dropdown */

    .navigation .nav-item.open .dropdown-menu,
    .navigation .nav-item.active .dropdown-menu,
    .navigation .nav-item.active-dropdown .dropdown-menu {

        max-height: 300px !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* Dropdown links */

    .navigation .dropdown-menu a {

        width: 100% !important;

        height: 38px !important;
        min-height: 38px !important;

        padding: 0 20px 0 30px !important;

        display: flex !important;

        align-items: center !important;

        color: #29231f !important;

        background: #eee8df !important;

        border-bottom:
            1px solid rgba(42,34,27,.08) !important;

        font-size: 9px !important;

        letter-spacing: 1px !important;
    }


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

    .navigation .mobile-login {

        display: flex !important;

        width: 100% !important;

        height: 42px !important;
        min-height: 42px !important;

        padding: 0 20px !important;
        margin: 0 !important;

        align-items: center !important;

        color: #a8793e !important;

        font-size: 9px !important;

        letter-spacing: 1.3px !important;

        border-top:
            1px solid rgba(180,136,77,.25) !important;
    }


    /* =====================================
       BODY
    ===================================== */

    body {
        padding-top: 58px !important;
    }


    /* =====================================
       RTL
    ===================================== */

    html[dir="rtl"] .navigation {

        left: auto !important;
        right: 0 !important;

        transform: translateX(100%) !important;

        border-right: 0 !important;

        border-left:
            1px solid rgba(0,0,0,.15) !important;
    }

    html[dir="rtl"] .navigation.active,
    html[dir="rtl"] .navigation.mobile-open {

        transform: translateX(0) !important;
    }

    html[dir="rtl"] .navigation .dropdown-menu a {

        padding-left: 20px !important;
        padding-right: 30px !important;
    }


    /* =====================================
       DARK MODE — MOBILE
    ===================================== */

    html.dark-mode .header,
    body.dark-mode .header {

        background: #17110d !important;
    }

    html.dark-mode .navigation,
    body.dark-mode .navigation {

        background: #1c1713 !important;

        border-color:
            rgba(255,255,255,.12) !important;

        box-shadow:
            8px 12px 28px rgba(0,0,0,.45) !important;
    }

    html.dark-mode .navigation > a,
    html.dark-mode .navigation > .nav-item > a,
    body.dark-mode .navigation > a,
    body.dark-mode .navigation > .nav-item > a {

        color: #f5eee4 !important;

        background: #1c1713 !important;

        border-color:
            rgba(255,255,255,.10) !important;
    }

    html.dark-mode .navigation .nav-item > a span,
    body.dark-mode .navigation .nav-item > a span {

        color: #d7ad6a !important;
    }

    html.dark-mode .navigation .dropdown-menu,
    body.dark-mode .navigation .dropdown-menu {

        background: #15110e !important;
    }

    html.dark-mode .navigation .dropdown-menu a,
    body.dark-mode .navigation .dropdown-menu a {

        color: #e9dfd2 !important;

        background: #15110e !important;

        border-color:
            rgba(255,255,255,.07) !important;
    }

    html.dark-mode .navigation .mobile-login,
    body.dark-mode .navigation .mobile-login {

        color: #d7ad6a !important;
    }

    html.dark-mode .header-actions .theme-button,
    html.dark-mode .header-actions .rtl-button,
    body.dark-mode .header-actions .theme-button,
    body.dark-mode .header-actions .rtl-button {

        color: #fff !important;
    }


    /* =====================================
       SMALL PHONES
    ===================================== */

    @media (max-width: 420px) {

        .navigation {

            width: 165px !important;
            max-width: 165px !important;
        }

        .navigation > a,
        .navigation > .nav-item > a {

            height: 48px !important;
            min-height: 48px !important;

            padding-left: 20px !important;
            padding-right: 16px !important;

            font-size: 9px !important;
        }

        .header-actions {

            right: 45px !important;
        }

        .header-actions .theme-button,
        .header-actions .rtl-button {

            width: 27px !important;
            height: 27px !important;
        }

        .header-actions .theme-button {

            font-size: 15px !important;
        }

        .header-actions .rtl-button {

            font-size: 7px !important;
        }

        #mobileMenu,
        .mobile-button {

            right: 7px !important;

            width: 30px !important;
            height: 30px !important;

            font-size: 21px !important;
        }
    }
}
@media (max-width: 900px) {
    .navigation > a,
    .navigation > .nav-item > a {
        height: 42px !important;
        min-height: 42px !important;
    }
}
@media (max-width: 900px) {

    .navigation {
        position: fixed !important;

        top: 58px !important;
        right: 0 !important;
        left: auto !important;

        width: 165px !important;
        max-width: 165px !important;

        height: auto !important;
        max-height: none !important;

        bottom: auto !important;

        display: flex !important;
        flex-direction: column !important;

        padding: 0 !important;
        margin: 0 !important;

        overflow: hidden !important;

        opacity: 0 !important;
        visibility: hidden !important;

        transform: translateX(100%) !important;

        transition:
            transform .3s ease,
            opacity .3s ease,
            visibility .3s ease !important;

        background: #f8f4ed !important;

        z-index: 999998 !important;
    }

    /* OPEN */

    .navigation.active,
    .navigation.mobile-open {
        opacity: 1 !important;
        visibility: visible !important;

        transform: translateX(0) !important;
    }

    /* MENU ITEMS */

    .navigation > a,
    .navigation > .nav-item > a {
        width: 165px !important;

        height: 48px !important;
        min-height: 48px !important;

        padding: 0 18px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        box-sizing: border-box !important;

        border-bottom: 1px solid rgba(0,0,0,.12) !important;
    }

    /* DROPDOWN */

    .navigation .dropdown-menu {
        position: static !important;

        width: 165px !important;
        min-width: 165px !important;

        max-height: 0 !important;

        overflow: hidden !important;

        padding: 0 !important;
        margin: 0 !important;

        opacity: 0 !important;
        visibility: hidden !important;

        transform: none !important;
    }

    .navigation .dropdown.open .dropdown-menu,
    .navigation .dropdown.active .dropdown-menu,
    .navigation .dropdown.active-dropdown .dropdown-menu {
        max-height: 250px !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

    /* DARK MODE */

    body.dark-mode .navigation,
    html.dark-mode .navigation {
        background: #1c1713 !important;
    }

    body.dark-mode .navigation > a,
    body.dark-mode .navigation > .nav-item > a,
    html.dark-mode .navigation > a,
    html.dark-mode .navigation > .nav-item > a {
        background: #1c1713 !important;
        color: #f5eee4 !important;
        border-color: rgba(255,255,255,.1) !important;
    }

    /* RTL */

    html[dir="rtl"] .navigation {
        left: 0 !important;
        right: auto !important;

        transform: translateX(-100%) !important;
    }

    html[dir="rtl"] .navigation.active,
    html[dir="rtl"] .navigation.mobile-open {
        transform: translateX(0) !important;
    }
}
/* =========================================================
   HOME 1 - FINAL MOBILE HEADER FIX
========================================================= */

@media (max-width: 600px) {

    /* HEADER */
    .header {
        height: 68px !important;
        min-height: 68px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10000 !important;
    }

    .header-inner {
        height: 68px !important;
        min-height: 68px !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* LOGO */
    .logo {
        position: relative !important;
        z-index: 10002 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .logo-name {
        font-size: 17px !important;
    }

    .logo-jewels {
        font-size: 6px !important;
    }

    .logo-symbol {
        font-size: 18px !important;
    }

    /* DESKTOP NAVIGATION HIDDEN */
    .navigation {
        position: fixed !important;

        top: 68px !important;
        right: 0 !important;
        left: auto !important;

        width: 220px !important;
        max-width: 220px !important;
        height: auto !important;
        max-height: calc(100vh - 68px) !important;

        overflow-y: auto !important;

        display: flex !important;
        flex-direction: column !important;

        background: #f5eee3 !important;

        transform: translateX(110%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transition:
            transform .3s ease,
            opacity .3s ease,
            visibility .3s ease !important;

        z-index: 10001 !important;

        box-shadow: -8px 12px 30px rgba(0,0,0,.15) !important;
    }

    /* OPEN MOBILE MENU */
    .navigation.active {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* NAV LINKS */
    .navigation > a,
    .navigation .nav-item > a {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;

        display: flex !important;
        align-items: center !important;

        padding: 0 18px !important;

        font-size: 11px !important;
        letter-spacing: 1.5px !important;

        white-space: nowrap !important;

        box-sizing: border-box !important;
    }

    /* DROPDOWN */
    .navigation .nav-item {
        width: 100% !important;
        position: relative !important;
    }

    .navigation .dropdown-menu {
        position: static !important;

        width: 100% !important;
        min-width: 100% !important;

        display: none !important;

        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;

        box-shadow: none !important;
    }

    .navigation .nav-item.active .dropdown-menu {
        display: block !important;
    }

    .navigation .dropdown-menu a {
        height: 40px !important;
        min-height: 40px !important;

        padding-left: 30px !important;

        font-size: 10px !important;
    }

    /* HEADER ACTIONS */
    .header-actions {
        display: none !important;
    }

    /* HAMBURGER */
    .mobile-button {
        display: flex !important;

        position: relative !important;

        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;

        margin: 0 !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        border: 1px solid rgba(255,255,255,.45) !important;
        background: transparent !important;

        color: #fff !important;

        font-size: 20px !important;
        line-height: 1 !important;

        z-index: 10003 !important;
    }

    /* HERO */
    .hero {
        min-height: 100vh !important;
        height: 100vh !important;

        padding-top: 68px !important;

        box-sizing: border-box !important;
    }

    .hero-content {
        position: relative !important;
        z-index: 5 !important;

        width: calc(100% - 40px) !important;
        max-width: 330px !important;

        margin: 0 auto !important;

        padding: 120px 20px 40px !important;

        box-sizing: border-box !important;
    }

    .hero-content h1 {
        font-size: clamp(38px, 11vw, 58px) !important;
        line-height: .95 !important;
    }

    .hero-description {
        max-width: 300px !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    /* PREVENT HORIZONTAL OVERFLOW */
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}


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

@media (max-width: 600px) {

    html[dir="rtl"] .navigation {
        right: auto !important;
        left: 0 !important;

        transform: translateX(-110%) !important;
    }

    html[dir="rtl"] .navigation.active {
        transform: translateX(0) !important;
    }

    html[dir="rtl"] .mobile-button {
        order: -1 !important;
    }

}