/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --base-width: 1080px;
    --base-height: 1920px;
    --side-padding: 80px;
    --images-total-width: 880px;
    --image-gap: 21px;
}

a.no-link-style {
    text-decoration: none;        /* 移除下划线 */
    color: inherit;               /* 继承父元素颜色 */
  }
  
  /* 移除悬停效果 */
  a.no-link-style:hover,
  a.no-link-style:active,
  a.no-link-style:focus {
    text-decoration: none;
    color: inherit;
  }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    /* background-color: #f5f1eb; */
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    text-shadow: none;
    box-shadow: none;
}

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

/* Hero Banner Section */
.hero-banner {
    position: relative;
    min-height: auto;
    overflow: hidden;
}

.banner-container {
    position: relative;
    width: 100%;
    height: auto;
}

.banner-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
    overflow: hidden;
}

.banner-slide img {
    width: 100%;
    height: auto;
}

.banner-slide.active {
    opacity: 1;
    z-index: 2;
}

.banner-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 calc(40px * 100 / var(--base-width) * 1vw);
    z-index: 10;
    pointer-events: none;
}

@media (min-width: 1080px) {
    .banner-controls {
        padding: 0 40px;
    }
}

.banner-prev,
.banner-next {
    background: rgba(255, 255, 255, 0.3);
    border: none;
    color: #fff;
    font-size: calc(48px * 100 / var(--base-width) * 1vw);
    width: calc(60px * 100 / var(--base-width) * 1vw);
    height: calc(60px * 100 / var(--base-width) * 1vw);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

@media (min-width: 1080px) {
    .banner-prev,
    .banner-next {
        font-size: 48px;
        width: 60px;
        height: 60px;
    }
}

.banner-prev:hover,
.banner-next:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

/* Craftsmanship Intro Section */
.craftsmanship-intro {
    display: flex;
    gap: calc(60px * 100 / var(--base-width) * 1vw);
    padding: calc(100px * 100 / var(--base-width) * 1vw) calc(var(--side-padding) * 100 / var(--base-width) * 1vw);
    background-color: #f6f6f6;
    align-items: center;
    max-width: 100vw;
    box-sizing: border-box;
}

@media (min-width: 1080px) {
    .craftsmanship-intro {
        gap: 60px;
        padding: 100px var(--side-padding);
    }
}

@media (min-width: 1080px) {
    .craftsmanship-intro {
        padding: 100px var(--side-padding);
    }
}

.craftsmanship-images {
    display: flex;
    gap: calc(var(--image-gap) * 100 / var(--base-width) * 1vw);
    width: calc(var(--images-total-width) * 100 / var(--base-width) * 1vw);
    flex-shrink: 0;
}

@media (min-width: 1080px) {
    .craftsmanship-images {
        gap: var(--image-gap);
        width: var(--images-total-width);
    }
}

.craftsmanship-images img {
    flex: 1;
    width: 0;
    height: auto;
    object-fit: cover;
}

.craftsmanship-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.craftsmanship-content h2 {
    font-size: calc(40px * 100 / var(--base-width) * 1vw);
    font-weight: 700;
    margin-bottom: calc(30px * 100 / var(--base-width) * 1vw);
    color: #3a3429;
    letter-spacing: 1px;
}

@media (min-width: 1080px) {
    .craftsmanship-content h2 {
        font-size: 40px;
        margin-bottom: 30px;
    }
}

.craftsmanship-content p {
    font-size: calc(16px * 100 / var(--base-width) * 1vw);
    line-height: 1.8;
    color: #5a5247;
    margin-bottom: calc(20px * 100 / var(--base-width) * 1vw);
}

@media (min-width: 1080px) {
    .craftsmanship-content p {
        font-size: 16px;
        margin-bottom: 20px;
    }
}

.certifications {
    display: flex;
    margin-top: 20px;
}

.certifications img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Comparison Section */
.comparison {
    padding: 0;
    background-color: #2a2419;
    color: #fff;
    position: relative;
}

.comparison-container {
    position: relative;
    min-height: 600px;
}

.comparison h2 {
    position: absolute;
    top: calc(35 * 100 / 1080 * 1vw);
    left: 50%;
    transform: translateX(-50%);
    font-size: calc(22 * 100 / 1080 * 1vw);
    font-weight: 700;
    text-align: center;
    letter-spacing: 1px;
    z-index: 2;
    width: 100%;
    padding: 0 calc(80 * 100 / 1080 * 1vw);
    box-sizing: border-box;
}

.comparison-table {
    width: 100%;
    background-image: url('assets/comparison-bg.jpg');
    background-size: 100.3% auto;
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 45.4%; /* 根据图片实际比例 872/1921 计算 */
}

/* Member Benefits Section */
.member-benefits {
    padding: 0;
    /* background-color: #f5f1eb; */
    position: relative;
    overflow: hidden;
}

.member-benefits-bg {
    width: 100%;
    background-image: url('assets/member-benefits-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-top: 47.5%; /* 根据图片实际比例 912/1919 计算 */
    position: relative;
}



.member-benefits-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.benefits-footer {
    position: absolute;
    bottom: calc(44px * 100 / var(--base-width) * 1vw);
    left: 50%;
    transform: translateX(-50%);
    text-align: left;
    font-size: 20px;
    color: #5a5247;
    width: 100%;
    padding: 0 calc(var(--side-padding) * 100 / var(--base-width) * 1vw);
    box-sizing: border-box;
    z-index: 3;
    color: #964F1B;
}

@media (min-width: 1080px) {
    .benefits-footer {
        bottom: 110px;
        padding: 0 var(--side-padding);
    }
}

.benefits-content {
    position: absolute;
    top: 0;
    left: calc(114px * 100 / var(--base-width) * 1vw);
    padding-top: calc(60px * 100 / var(--base-width) * 1vw);
    text-align: left;
    z-index: 2;
}

@media (min-width: 1080px) {
    .benefits-content {
        left: 114px;
        padding-top: 60px;
    }
}

.benefits-content h2 {
    font-size: calc(40px * 100 / var(--base-width) * 1vw);
    font-weight: 700;
    margin-bottom: calc(20px * 100 / var(--base-width) * 1vw);
    color: #3a3429;
    letter-spacing: 1px;
}

@media (min-width: 1080px) {
    .benefits-content h2 {
        font-size: 40px;
        margin-bottom: 20px;
    }
}

.benefits-content h2 small {
    font-size: 0.9em;
}

.benefits-offer {
    font-size: calc(18px * 100 / var(--base-width) * 1vw);
    color: #5a5247;
    line-height: 1.8;
    letter-spacing: 0.5px;
}

@media (min-width: 1080px) {
    .benefits-offer {
        font-size: 18px;
    }
}

.benefits-products {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    gap: 0;
    padding-left: calc(114px * 100 / var(--base-width) * 1vw);
    box-sizing: border-box;
    z-index: 2;
}

@media (min-width: 1080px) {
    .benefits-products {
        padding-left: 114px;
    }
}

.product-item {
    text-align: left;
    display: flex;
    gap: calc(20px * 100 / var(--base-width) * 1vw);
    align-items: flex-start;
    flex: 1;
}

@media (min-width: 1080px) {
    .product-item {
        gap: 20px;
    }
}

.product-item > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.product-item:first-child {
    flex-direction: row;
    padding-top: calc(245px * 100 / var(--base-width) * 1vw);
}

@media (min-width: 1080px) {
    .product-item:first-child {
        padding-top: 245px;
    }
}

.product-item:first-child img {
    width: calc(280px * 100 / var(--base-width) * 1vw);
    height: auto;
    border-radius: 12px;
    margin-bottom: 0;
    flex-shrink: 0;
}

@media (min-width: 1080px) {
    .product-item:first-child img {
        width: 280px;
    }
}

.product-item:not(:first-child) {
    flex-direction: row;
    padding-top: calc(388px * 100 / var(--base-width) * 1vw);
}

@media (min-width: 1080px) {
    .product-item:not(:first-child) {
        padding-top: 388px;
    }
}

.product-item:not(:first-child) img {
    width: calc(235px * 100 / var(--base-width) * 1vw);
    height: auto;
    border-radius: 12px;
    margin-bottom: 0;
    flex-shrink: 0;
}

@media (min-width: 1080px) {
    .product-item:not(:first-child) img {
        width: 235px;
    }
}

.product-item:first-child > div {
    padding-top: calc((455px - 245px) * 100 / var(--base-width) * 1vw);
}

@media (min-width: 1080px) {
    .product-item:first-child > div {
        padding-top: 210px; /* 455px - 245px */
    }
}

.product-item:not(:first-child) > div {
    padding-top: calc((455px - 388px) * 100 / var(--base-width) * 1vw);
}

@media (min-width: 1080px) {
    .product-item:not(:first-child) > div {
        padding-top: 67px; /* 455px - 388px */
    }
}

.product-item h3 {
    margin-top: 0;
    margin-bottom: calc(10px * 100 / var(--base-width) * 1vw);
    padding-top: 0;
    font-size: calc(18px * 100 / var(--base-width) * 1vw);
    font-weight: 700;
    color: #3a3429;
    letter-spacing: 1px;
}

@media (min-width: 1080px) {
    .product-item h3 {
        margin-bottom: 10px;
        font-size: 18px;
    }
}

.product-item h3::after {
    content: ':';
}

.product-item p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: calc(10px * 100 / var(--base-width) * 1vw);
    line-height: 1.8;
    color: #5a5247;
}

/* @media (min-width: 1080px) {
    .product-item p {
        font-size: 16px;
    }
} */

/* Atelier Section */
.atelier {
    padding: calc(260px * 100 / var(--base-width) * 1vw) calc(147px * 100 / var(--base-width) * 1vw) calc(120px * 100 / var(--base-width) * 1vw) calc(160px * 100 / var(--base-width) * 1vw);
    /* background-color: #f5f1eb; */
    position: relative;
    background: #F6F6F6;
}

@media (min-width: 1080px) {
    .atelier {
        padding: 260px 147px 120px 160px;
    }
}

.atelier-content-1 {
    position: absolute;
    top: calc(90px * 100 / var(--base-width) * 1vw);
    left: calc(80px * 100 / var(--base-width) * 1vw);
    text-align: left;
    z-index: 2;
    white-space: normal; /* 取消强制不换行，避免大屏重叠 */
    max-width: calc(58% - 112px * 100 / var(--base-width) * 1vw);
}

@media (min-width: 1080px) {
    .atelier-content-1 {
        top: 120px;
        left: 112px;
        max-width: calc(58% - 112px);
    }
}

.atelier-content-2 {
    position: absolute;
    top: 50.5%; /* 1088px / 1712px (背景图原始高度) ≈ 63.5% */
    right: calc(110px * 100 / var(--base-width) * 1vw);
    text-align: right;
    z-index: 2;
    white-space: nowrap;
    max-width: calc(100% - 220px * 100 / var(--base-width) * 1vw);
}

@media (min-width: 1080px) {
    .atelier-content-2 {
        top: 50.5%;
        right: 110px;
        max-width: calc(100% - 220px);
    }
}

.atelier h2 {
    font-size: calc(40px * 100 / var(--base-width) * 1vw);
    font-weight: 350;
    margin-bottom: calc(30px * 100 / var(--base-width) * 1vw);
    color: #3a3429;
    letter-spacing: 1px;
    white-space: nowrap;
}

@media (min-width: 1080px) {
    .atelier h2 {
        font-size: 40px;
        font-weight: 350;
        margin-bottom: 30px;
    }
}

.atelier p {
    font-size: calc(17.7px * 100 / var(--base-width) * 1vw);
    line-height: 1.8;
    color: #5a5247;
}

@media (min-width: 1080px) {
    .atelier p {
        font-size: 17.7px;
    }
}

.artisans-grid {
    width: 100%;
    background-image: url('assets/atelier-bg-1.png');
    background-size: 100% auto; /* 根据宽度自适应 */
    background-position: center top;
    background-repeat: no-repeat;
    padding-top: 42.5%; /* 约等于新图高/宽 ≈ 677/1596 */
}

/* Atelier 2 background (assets/资源 3.png) */
.artisans-grid-2 {
    width: 100%;
    background-image: url('assets/atelier-bg-2.png');
    background-size: 100% auto; /* 根据宽度自适应 */
    background-position: center top;
    background-repeat: no-repeat;
    padding-top: 114.9%; /* 精确高宽比：2208 / 1922 ≈ 1.149 */
}

/* Overlay text positioning for atelier2 */
.atelier2 {
    position: relative;
}

.atelier2 .atelier-content-2 {
    position: absolute;
    top: calc(96px * 100 / var(--base-width) * 1vw);
    right: calc(120px * 100 / var(--base-width) * 1vw);
    text-align: right;
    z-index: 2;
    white-space: nowrap;
}

@media (min-width: 1080px) {
    .atelier2 .atelier-content-2 {
        top: 96px;
        right: 120px;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .atelier2 .atelier-content-2 {
        top: calc(60px * 100 / var(--base-width) * 1vw);
        right: calc(24px * 100 / var(--base-width) * 1vw);
        white-space: normal;
        max-width: calc(100% - 48px * 100 / var(--base-width) * 1vw);
    }
}

/* Typography for atelier2 referencing atelier-content-1 */
.atelier2 h2 {
    font-size: calc(40px * 100 / var(--base-width) * 1vw);
    font-weight: 350;
    margin-bottom: calc(30px * 100 / var(--base-width) * 1vw);
    color: #3a3429;
    letter-spacing: 1px;
}

@media (min-width: 1080px) {
    .atelier2 h2 {
        font-size: 40px;
        font-weight: 350;
        margin-bottom: 30px;
    }
}

.atelier2 h2 strong {
    font-weight: 600;
}

.atelier2 p {
    font-size: calc(17.7px * 100 / var(--base-width) * 1vw);
    line-height: 1.8;
    color: #5a5247;
}

@media (min-width: 1080px) {
    .atelier2 p {
        font-size: 17.7px;
    }
}

.atelier2 h4 {
    font-size: calc(15px * 100 / var(--base-width) * 1vw);
    margin-top: calc(20px * 100 / var(--base-width) * 1vw);
}

/* @media (min-width: 1080px) {
    .atelier2 h4 {
        font-size: 28px;
        margin-top: 20px;
    }
} */

/* Clients Section */
.clients {
    padding: calc(100px * 100 / var(--base-width) * 1vw) calc(120px * 100 / var(--base-width) * 1vw);
    background-color: #f5f1eb;
    text-align: center;
}

@media (min-width: 1080px) {
    .clients {
        padding: 100px 120px;
    }
}

.clients h2 {
    font-size: calc(40px * 100 / var(--base-width) * 1vw);
    font-weight: 700;
    margin-bottom: calc(30px * 100 / var(--base-width) * 1vw);
    color: #3a3429;
    letter-spacing: 1px;
}

@media (min-width: 1080px) {
    .clients h2 {
        font-size: 40px;
        margin-bottom: 30px;
    }
}

.clients > p {
    font-size: calc(18px * 100 / var(--base-width) * 1vw);
    line-height: 1.8;
    color: #5a5247;
    max-width: calc(800px * 100 / var(--base-width) * 1vw);
    margin: 0 auto calc(60px * 100 / var(--base-width) * 1vw);
}

@media (min-width: 1080px) {
    .clients > p {
        font-size: 18px;
        max-width: 800px;
        margin: 0 auto 60px;
    }
}

.clients-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(20px * 100 / var(--base-width) * 1vw);
}

@media (min-width: 1080px) {
    .clients-gallery {
        gap: 20px;
    }
}

.clients-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Hermès Comparison Section */
.hermes-comparison {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hermes-comparison-bg {
    width: 100%;
    position: relative;
    background-image: url('assets/hermes-comparison-bg.png');
    background-size: 100.3% auto;
    background-position: center top;
    background-repeat: no-repeat;
    padding-top: 22.75%; /* 根据图片实际比例 438/1925 计算 */
    min-height: 200px;
}

.hermes-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    text-align: center;
    pointer-events: none;
}

.hermes-content h2 {
    font-size: calc(48px * 100 / var(--base-width) * 1vw);
    font-weight: 700;
    color: #fff;
    letter-spacing: calc(2px * 100 / var(--base-width) * 1vw);
    line-height: 1.4;
}

@media (min-width: 1080px) {
    .hermes-content h2 {
        font-size: 48px;
        letter-spacing: 2px;
    }
}

/* Craftsmanship Details Section */
.craftsmanship-details {
    padding: 100px calc(112px * 100 / var(--base-width) * 1vw) 100px calc(112px * 100 / var(--base-width) * 1vw);
    background-color: #DCD6CB;
}

@media (min-width: 1080px) {
    .craftsmanship-details {
        padding: 100px 112px;
    }
}

.detail-item {
    display: flex;
    gap: calc(60px * 100 / var(--base-width) * 1vw);
    margin-bottom: calc(40px * 100 / var(--base-width) * 1vw);
    align-items: flex-start;
}

@media (min-width: 1080px) {
    .detail-item {
        gap: 60px;
        margin-bottom: 40px;
    }
}

.detail-item:last-child {
    margin-bottom: 0;
}

.detail-item.reverse {
    flex-direction: row-reverse;
}

.detail-image {
    flex-shrink: 0;
    width: calc(412px * 100 / var(--base-width) * 1vw);
}

@media (min-width: 1080px) {
    .detail-image {
        width: 412px;
    }
}

.detail-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.detail-content {
    flex: 1;
    margin-top: calc(25px * 100 / var(--base-width) * 1vw);
}

@media (min-width: 1080px) {
    .detail-content {
        margin-top: 25px;
    }
}

.detail-content h3 {
    font-size: calc(27px * 100 / var(--base-width) * 1vw);
    font-weight: 700;
    margin-bottom: calc(25px * 100 / var(--base-width) * 1vw);
    color: #3a3429;
    letter-spacing: 1px;
}

@media (min-width: 1080px) {
    .detail-content h3 {
        font-size: 27px;
        margin-bottom: 25px;
    }
}

.detail-content p {
    font-size: calc(16px * 100 / var(--base-width) * 1vw);
    line-height: 1.8;
    color: #5a5247;
    margin-bottom: calc(15px * 100 / var(--base-width) * 1vw);
}

@media (min-width: 1080px) {
    .detail-content p {
        font-size: 16px;
        margin-bottom: 15px;
    }
}

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

/* CTA Section */
.cta {
    display: flex;
    min-height: 600px;
}

.cta-image {
    flex: 1;
    background-color: #f5f1eb;
}

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

.cta-content {
    flex: 1;
    background-color: #513323;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: calc(230px * 100 / var(--base-width) * 1vw) calc(80px * 100 / var(--base-width) * 1vw) calc(80px * 100 / var(--base-width) * 1vw) calc(80px * 100 / var(--base-width) * 1vw);
    position: relative;
}

@media (min-width: 1080px) {
    .cta-content {
        padding: 230px 80px 80px 80px;
    }
}

.cta-content h2 {
    font-size: calc(40px * 100 / var(--base-width) * 1vw);
    font-weight: 700;
    margin-bottom: calc(45px * 100 / var(--base-width) * 1vw);
    letter-spacing: 1px;
}

@media (min-width: 1080px) {
    .cta-content h2 {
        font-size: 40px;
    }
}

.cta-content p {
    font-size: calc(20px * 100 / var(--base-width) * 1vw);
}

@media (min-width: 1080px) {
    .cta-content p {
        font-size: 20px;
    }
}

@media (min-width: 1080px) {
    .cta-content h2 {
        margin-bottom: 2px;
    }
}

.contact-info {
    margin-top: calc(113px * 100 / var(--base-width) * 1vw);
    font-size: calc(20px * 100 / var(--base-width) * 1vw);
    line-height: 2;
}

@media (min-width: 1080px) {
    .contact-info {
        margin-top: 113px;
        font-size: 20px;
    }
}

.contact-info p {
    font-size: calc(31px * 100 / var(--base-width) * 1vw);
    margin-bottom: calc(10px * 100 / var(--base-width) * 1vw);
}

@media (min-width: 1080px) {
    .contact-info p {
        font-size: 31px;
        margin-bottom: 10px;
    }
}

/* Last Section */
.last {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0;
    background-image: url('assets/last-bg.png');
    background-size: 100% auto;
    background-position: left top;
    background-repeat: no-repeat;
    padding-top: 56.34%; /* 根据图片比例 1084/1924 计算 */
    min-height: 600px;
    overflow: hidden;
}

.last-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(1450px * 100 / var(--base-width) * 1vw);
    height: calc(475px * 100 / var(--base-width) * 1vw);
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(110px * 100 / var(--base-width) * 1vw);
    box-sizing: border-box;
}

@media (min-width: 1080px) {
    .last-overlay {
        width: 1450px;
        height: 475px;
        padding: 110px;
    }
}

.last-text {
    color: #fff;
    text-align: left;
    max-width: 100%;
}

.last-text h2 {
    font-size: calc(40px * 100 / var(--base-width) * 1vw);
    font-weight: 700;
    margin-bottom: calc(20px * 100 / var(--base-width) * 1vw);
    letter-spacing: 1px;
}

@media (min-width: 1080px) {
    .last-text h2 {
        font-size: 40px;
        margin-bottom: 20px;
    }
}

.last-text > p {
    font-size: calc(18px * 100 / var(--base-width) * 1vw);
    line-height: 1.6;
    margin-bottom: calc(30px * 100 / var(--base-width) * 1vw);
}

@media (min-width: 1080px) {
    .last-text > p {
        font-size: 18px;
        margin-bottom: 30px;
    }
}

.last-contact-info {
    font-size: calc(20px * 100 / var(--base-width) * 1vw);
    line-height: 2;
}

@media (min-width: 1080px) {
    .last-contact-info {
        font-size: 20px;
    }
}

.last-contact-info p {
    font-size: calc(18px * 100 / var(--base-width) * 1vw);
    margin-bottom: calc(40px * 100 / var(--base-width) * 1vw);
    color: #cacaca;
}

@media (min-width: 1080px) {
    .last-contact-info p {
        font-size: 18px;
        margin-bottom: 40px;
    }
}

/* Footer */
.footer {
    position: relative;
    min-height: calc(400px * 100 / var(--base-width) * 1vw);
    background-image: url('assets/footer-bg.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(80px * 100 / var(--base-width) * 1vw) calc(120px * 100 / var(--base-width) * 1vw);
}

@media (min-width: 1080px) {
    .footer {
        min-height: 400px;
        padding: 80px 120px;
    }
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.footer-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.footer-content p {
    font-size: calc(24px * 100 / var(--base-width) * 1vw);
    color: #fff;
    letter-spacing: calc(2px * 100 / var(--base-width) * 1vw);
}

@media (min-width: 1080px) {
    .footer-content p {
        font-size: 24px;
        letter-spacing: 2px;
    }
}

/* ---- Large screen scaling & overlap prevention ---- */
/* Global scaling variable for headings */
:root {
    --type-scale: 1;
}



/* 2k breakpoint: slightly enlarge type and widen text columns */
@media (min-width: 1920px) {
    :root { --type-scale: 1.2; }
    .atelier-content-1,
    .atelier2 .atelier-content-2 {
        white-space: normal;
        max-width: 48%;
        line-height: 1.9;
    }
}

/* 4k breakpoint: further enlarge type and narrow text column to avoid overlap */
@media (min-width: 3840px) {
    :root { --type-scale: 1.8; }
    .atelier-content-1,
    .atelier2 .atelier-content-2 {
        white-space: normal;
        max-width: 44%;
        line-height: 2.0;
    }
}

/* Responsive Enhancements for Mobile */
@media (max-width: 768px) {
    /* Craftsmanship Intro: stack vertically on mobile */
    .craftsmanship-intro {
        flex-direction: column;
        gap: calc(30px * 100 / var(--base-width) * 1vw);
        padding: calc(60px * 100 / var(--base-width) * 1vw) calc(24px * 100 / var(--base-width) * 1vw);
    }
    .craftsmanship-images {
        width: 100%;
        gap: calc(12px * 100 / var(--base-width) * 1vw);
    }
    .craftsmanship-content h2 {
        font-size: calc(28px * 100 / var(--base-width) * 1vw);
    }
    .craftsmanship-content p {
        font-size: calc(15px * 100 / var(--base-width) * 1vw);
    }

    /* Details: stack image and text */
    .detail-item,
    .detail-item.reverse {
        flex-direction: column;
        gap: calc(24px * 100 / var(--base-width) * 1vw);
    }
    .detail-image {
        width: 100%;
    }
    .detail-content h3 {
        font-size: calc(24px * 100 / var(--base-width) * 1vw);
    }
    .detail-content p {
        font-size: calc(15px * 100 / var(--base-width) * 1vw);
    }

    /* CTA: stack and reduce padding */
    .cta {
        flex-direction: column;
    }
    .cta-content {
        padding: calc(60px * 100 / var(--base-width) * 1vw) calc(24px * 100 / var(--base-width) * 1vw);
    }
    .cta-content h2 {
        font-size: calc(40px * 100 / var(--base-width) * 1vw);
    }

    /* Hermes comparison: slightly smaller title for phones */
    .hermes-content h2 {
        font-size: calc(40px * 100 / var(--base-width) * 1vw);
    }

    /* Clients gallery: one column */
    .clients-gallery {
        grid-template-columns: 1fr;
    }

    /* Last section overlay: full width, auto height */
    .last-overlay {
        width: 100%;
        left: 0;
        height: auto;
        padding: calc(24px * 100 / var(--base-width) * 1vw);
    }
}