@font-face {
  font-family: "Montserrat KLF";
  src: url("../fonts/montserrat/Montserrat-SemiBold-Latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed KLF";
  src: url("../fonts/roboto-condensed/RobotoCondensed-Regular-Latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --color-black: #0f0f0f;
  --color-dark: #1a1a1a;
  --color-white: #ffffff;
  --color-gold: #c9a77c;
  --color-gold-dark: #b8956a;
  --color-gray: #f5f5f5;
  --color-text: #333333;
  --color-text-light: #888888;
  --max-width: 1440px;
  --font-base: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-product: "Noto Sans SC", "Source Han Sans CN", "Microsoft YaHei", sans-serif;
  --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Products desktop alignment against the 1920px PSD. */
@media screen and (min-width: 769px) {
  .products-page .inner-hero { display: block; height: 701px; min-height: 701px; }
  .products-page .inner-hero::before { background: rgba(6,5,4,.68); }
  .products-page .inner-hero-content { width: min(1100px, calc(100% - 120px)); margin: 0 auto; padding-top: 274px; }
  .products-page .inner-hero-title { font-size: 72px; line-height: 1.08; }
  .products-page .inner-hero-subtitle { margin-top: 24px; font-size: 26px; line-height: 1.4; }

  .products-page .products-lu-grid,
  .products-page [data-series-section] {
    transition: opacity .28s ease, transform .28s ease;
  }

  .products-page.is-series-changing .products-lu-grid,
  .products-page.is-series-changing [data-series-section] {
    opacity: .52;
    transform: translateY(8px);
  }

  .inner-section.products-intro,
  .inner-section.products-directions,
  .inner-section.products-details,
  .inner-section.products-showcase { min-height: 0; padding: 0; overflow: hidden; }

  .inner-section.products-directions { position: relative; z-index: 2; overflow: visible; }

  .products-intro { height: 1135px; }
  .products-intro .inner-shell { position: relative; width: 100%; max-width: none; height: 100%; }
  .products-intro .inner-tabs { position: absolute; top: 172px; left: 13.49%; z-index: 10; width: 73.02%; height: 79px; justify-content: space-between; flex-wrap: nowrap; margin: 0; }
  .products-intro .inner-tab { flex: 0 0 auto; min-width: 0; height: 79px; padding: 0 0 22px; color: #111; font-size: 24px; text-align: left; }
  .products-intro .inner-tab small { color: #555; font-size: 16px; }
  .products-intro .products-lu-grid { position: absolute; inset: 0; display: block; }
  .products-intro .products-lu-main { position: absolute; top: 273px; left: 46.46%; width: 1028px; height: 534px; overflow: hidden; box-shadow: 0 24px 42px rgba(0,0,0,.2); }
  .products-intro .products-lu-main img { width: 1028px; height: 534px; max-width: none; object-fit: fill; }
  .products-intro .products-lu-copy { position: absolute; top: 320px; left: 13.49%; width: 550px; padding: 0; }
  .products-intro .products-lu-copy .inner-kicker { color: #b58f6b; font-size: 28px; }
  .products-intro .products-lu-copy .inner-title { margin-top: 12px; font-size: 48px; }
  .products-intro .products-lu-copy .inner-copy { max-width: 540px; margin-top: 32px; font-size: 19px; line-height: 1.9; }
  .products-intro .products-lu-copy .inner-copy p { margin: 0; }
  .products-intro .products-lu-copy .inner-copy p + p { margin-top: 28px; }
  .products-intro .products-lu-room,
  .products-intro .products-lu-service { display: none; }

  .products-directions { height: 2871px; background: #080706; }
  .products-directions .inner-shell { position: relative; width: 100%; max-width: none; height: 100%; }
  .products-directions > .inner-shell > .inner-section-head,
  .products-directions > .inner-shell > .inner-feature-grid { display: none; }
  .products-directions .product-direction-panels { position: absolute; inset: 0; display: block; }
  .products-directions .product-direction { position: absolute; left: 0; width: 100%; min-height: 0; margin: 0; overflow: hidden; background: #080706; }
  .products-directions .direction-focus { top: 0; height: 498px; overflow: visible; }
  .products-directions .direction-estate { top: 498px; height: 698px; overflow: visible; }
  .products-directions .direction-focus,
  .products-directions .direction-estate {
    background-color: #080706;
    background-image: linear-gradient(rgba(8, 7, 6, 0.95), rgba(8, 7, 6, 0.95)), url("../images/products/layers/direction-texture.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .products-directions .direction-resource { top: 1196px; height: 704px; }
  .products-directions .direction-lifestyle { top: 1900px; height: 971px; overflow: visible; }
  .products-directions .product-direction > img { position: absolute; max-width: none; object-fit: fill; }
  .products-directions .direction-focus > img { top: -144px; left: 258px; width: 699px; height: 543px; z-index: 1; }
  .products-directions .direction-focus > div { top: 54px; right: auto; bottom: auto; left: 55.16%; z-index: 2; width: 640px; max-width: 640px; }
  .products-directions .direction-focus::before,
  .products-directions .direction-focus::after { content: ""; position: absolute; z-index: 7; display: block; background: #c8a07c; pointer-events: none; }
  .products-directions .direction-focus::before { top: -164px; left: 238px; width: 143px; height: 123px; clip-path: polygon(0 0, 100% 0, 100% 23px, 23px 23px, 23px 100%, 0 100%); }
  .products-directions .direction-focus::after { top: 376px; left: 820px; width: 243px; height: 23px; }
  .products-directions .direction-estate > img { top: 0; left: 964px; width: 696px; height: 540px; z-index: 1; }
  .products-directions .direction-estate > div { top: 197px; right: auto; bottom: auto; left: 13.49%; z-index: 2; width: 650px; max-width: 650px; }
  .products-directions .direction-estate::before,
  .products-directions .direction-estate::after { content: ""; position: absolute; z-index: 7; display: block; background: #c8a07c; pointer-events: none; }
  .products-directions .direction-estate::before { top: -22px; left: 1538px; width: 143px; height: 123px; clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 23px) 100%, calc(100% - 23px) 23px, 0 23px); }
  .products-directions .direction-estate::after { top: 518px; left: 856px; width: 243px; height: 23px; }
  .products-directions .direction-resource > img { top: 0; left: 0; width: 1265px; height: 590px; z-index: 1; }
  .products-directions .direction-resource > div { top: 158px; right: auto; bottom: auto; left: 13.49%; width: 520px; }
  .products-directions .direction-lifestyle > img { top: 159px; left: 260px; width: 698px; height: 540px; z-index: 1; }
  .products-directions .direction-lifestyle > div { top: 346px; right: auto; bottom: auto; left: 55.16%; z-index: 2; width: 560px; }
  .products-directions .direction-lifestyle::before,
  .products-directions .direction-lifestyle::after { content: ""; position: absolute; z-index: 7; display: block; background: #c8a07c; pointer-events: none; }
  .products-directions .direction-lifestyle::before { top: 137px; left: 238px; width: 143px; height: 123px; clip-path: polygon(0 0, 100% 0, 100% 23px, 23px 23px, 23px 100%, 0 100%); }
  .products-directions .direction-lifestyle::after { top: 677px; left: 820px; width: 243px; height: 23px; }
  .products-directions .product-direction p { color: #b9946d; font-size: 20px; text-transform: uppercase; }
  .products-directions .product-direction h3 { margin-top: 14px; font-size: 48px; font-weight: 400; }
  .products-directions .product-direction span { display: block; margin-top: 34px; color: #c9a98a; font-size: 24px; line-height: 1.8; }
  .products-directions .direction-focus p { font-size: 20px; line-height: 1; }
  .products-directions .direction-focus h3 { margin-top: 0; font-size: 42px; }
  .products-directions .direction-focus span { max-width: 600px; font-size: 24px; line-height: 1.8; }
  .products-directions .direction-estate p { font-size: 17px; line-height: 1; }
  .products-directions .direction-estate h3 { margin-top: 3px; }
  .products-directions .direction-estate span { margin-top: 21px; font-size: 25.5px; }
  .products-directions .resource-swatches { display: flex; gap: 96px; margin-top: 62px; }
  .products-directions .resource-swatches span { display: block; width: 108px; height: 145px; margin: 0; border: 0; border-radius: 0; color: #ddd; font-size: 20px; background: none; text-align: center; }
  .products-directions .resource-swatches i { display: block; width: 108px; height: 108px; border: 1px solid #b9946d; border-radius: 50%; background-repeat: no-repeat; }
  .products-directions .resource-swatches b { display: block; margin-top: 12px; font-weight: 400; }
  .products-directions .resource-stone i { background-image: url("../images/products/layers/resource-stone.png"); background-position: -64px -135px; background-size: 290px 379px; }
  .products-directions .resource-metal i { background-image: url("../images/products/layers/resource-metal.png"); background-position: -157px -224px; background-size: 348px 488px; }
  .products-directions .resource-crystal i { background-image: url("../images/products/layers/resource-crystal.png"); background-position: -67px -69px; background-size: 214px 214px; }

  .inner-section.products-details { position: relative; overflow: visible; }
  .products-details { height: 1903px; background: #fff; }
  .products-details .inner-shell { position: relative; width: 100%; max-width: none; height: 100%; }
  .products-details > .inner-shell > .inner-section-head { display: none; }
  .products-details .products-detail-grid { position: absolute; inset: 0; display: block; }
  .products-details .products-detail-grid figure { position: absolute; min-height: 0; margin: 0; overflow: hidden; background: #fff; }
  .products-details .products-detail-grid figure:first-child { top: -114px; left: 956px; z-index: 3; width: 705px; height: 540px; }
  .products-details .products-detail-grid figure:first-child img { position: absolute; top: 0px; left: 0px; width: 705px; height: 640px; z-index: 1; }
  .products-details .products-detail-grid figure:nth-child(2) { top: 523px; left: 258px; width: 705px; height: 540px; }
  .products-details .products-detail-grid figure:nth-child(2) img { position: absolute; top: 0px; left: 0px; width: 705px; height: 640px; z-index: 1; }
  .products-details .detail-copy { position: absolute; z-index: 2; color: #111; }
  .products-details .detail-copy-lock { top: 116px; left: 13.49%; width: 620px; }
  .products-details .detail-copy-flower { top: 615px; left: 55.1%; width: 620px; }
  .products-details .detail-kicker { color: #b58f6b; font-size: 18px; line-height: 1; text-transform: uppercase; }
  .products-details .detail-copy h3 { margin-top: 15px; font-size: 48px; font-weight: 400; line-height: 1.1; }
  .products-details .detail-body { margin-top: 35px; color: #666; font-size: 24px; line-height: 2; }
  .products-details .detail-copy::after { content: ""; display: block; width: 330px; height: 18px; margin-top: 23px; background: repeating-linear-gradient(90deg, #b58f6b 0 3px, transparent 3px 6px); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 58%, rgba(0,0,0,.58) 78%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 58%, rgba(0,0,0,.58) 78%, transparent 100%); }
  .products-details .product-elements { position: absolute; top: 1148px; left: 258px; width: 1403px; height: 410px; margin: 0; }
  .products-details .element-groups { display: grid; grid-template-columns: repeat(2, 1fr); }
  .products-details .element-group h3 { padding: 0; font-size: 24px; font-weight: 500; line-height: 1.2; text-align: center; }
  .products-details .element-group h3::after { content: ""; display: block; width: 72px; height: 4px; margin: 25px auto 0; background: #c8a07c; }
  .products-details .element-swatches { justify-content: center; gap: 96px; margin-top: 26px; }
  .products-details .element-swatches span { display: block; width: 108px; height: auto; border: 0; border-radius: 0; color: #b58f6b; background: none; text-align: center; }
  .products-details .element-swatches img { display: block; width: 108px; height: 108px; border: 1px solid #b9946d; border-radius: 50%; }
  .products-details .element-swatches b { display: block; margin-top: 14px; font-size: 22px; font-weight: 400; white-space: nowrap; }
  .products-details .element-scenes { display: none; }

  .products-page .inner-section.products-showcase { position: relative; z-index: 2; height: 3211px; overflow: visible; background: linear-gradient(#050505 0 2060px, #fff 2060px); }
  .products-showcase .inner-shell { position: relative; width: 100%; max-width: none; height: 100%; }
  .products-showcase .inner-split { position: static; display: block; }
  .products-showcase .inner-split > div { position: absolute; top: 2940px; left: 0; z-index: 3; width: 100%; color: #111; text-align: center; }
  .products-showcase .inner-split > div .inner-eyebrow { color: #777; font-size: 34px; }
  .products-showcase .inner-split > div .inner-title { margin-top: 8px; color: #111; font-size: 38px; }
  .products-showcase .inner-split > div .inner-copy { max-width: 1050px; margin: 22px auto 0; color: #222; font-size: 18px; }
  .products-showcase .product-console { position: absolute; top: 2319px; left: 23.02%; z-index: 2; width: 1036px; height: 498px; min-height: 0; overflow: visible; background: transparent; }
  .products-showcase .product-console img { width: 1036px; height: 498px; max-width: none; object-fit: fill; }
  .products-showcase .cabinet-scenes { position: absolute; inset: 0; display: block; }
  .products-showcase .cabinet-scenes article { position: absolute; min-height: 0; overflow: hidden; background: #050505; }
  .products-showcase .cabinet-card { top: -367px; z-index: 4; width: 439px; height: 571px; }
  .products-showcase .tea-room-card { left: 258px; }
  .products-showcase .cloakroom-card { left: 740px; }
  .products-showcase .bathroom-card { left: 1222px; }
  .products-showcase .cabinet-card img { position: absolute; top: 2px; max-width: none; object-fit: fill; }
  .products-showcase .tea-room-card img { left: 2px; width: 436px; height: 568px; }
  .products-showcase .cloakroom-card img { left: 0; width: 436px; height: 568px; }
  .products-showcase .bathroom-card img { left: 0px; width: 436px; height: 568px; }
  .products-showcase .cabinet-card > div { top: 405px; right: auto; bottom: auto; left: 40px; z-index: 2; width: 363px; }
  .products-showcase .cabinet-card > div::after { content: ""; display: block; width: 100%; height: 1px; margin-top: 24px; background: rgba(255,255,255,.5); }
  .products-showcase .cabinet-card h3 { margin: 0; font-size: 34px; font-weight: 400; }
  .products-showcase .cabinet-card p { margin-top: 2px; color: rgba(255,255,255,.72); font-size: 16px; }

  .products-showcase .bookcase-scene { top: 209px; left: 0; z-index: 1; width: 100%; height: 1080px; }
  .products-showcase .bookcase-scene::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,.94) 0, rgba(0,0,0,.45) 36%, rgba(0,0,0,.18) 100%), linear-gradient(to right, rgba(0,0,0,.1) 0 40%, rgba(0,0,0,.92) 60%, #050505 72%); }
  .products-showcase .bookcase-scene img { position: absolute; inset: 0; width: 1920px; height: 1080px; max-width: none; object-fit: fill; }
  .products-showcase .bookcase-scene > div { top: 327px; right: auto; bottom: auto; left: 1157px; z-index: 2; width: 505px; }
  .products-showcase .bookcase-scene > div > p { color: #b9946d; font-family: "Roboto Condensed KLF", Arial, sans-serif; font-size: 24px; line-height: 1; }
  .products-showcase .bookcase-scene span { display: block; margin-top: 22px; color: rgba(255,255,255,.72); font-size: 20px; line-height: 1.5; }

  .products-showcase .sideboard-scene { top: 1073px; left: 0; z-index: 3; width: 100%; height: 360px; overflow: visible; background: transparent; }
  .products-showcase .sideboard-scene img { position: absolute; top: 0; left: 1223px; width: 415px; height: 237px; z-index: 1; }
  .products-showcase .sideboard-scene > div { top: 270px; right: auto; bottom: auto; left: 1246px; width: 415px; }
  .products-showcase .sideboard-scene h3 { display: inline; margin: 0; font-size: 30px; font-weight: 400; }
  .products-showcase .sideboard-scene p { display: inline; margin-left: 12px; color: #aaa; font-family: "Roboto Condensed KLF", Arial, sans-serif; font-size: 18px; }

  .products-showcase .wine-scene { top: 1153px; left: 0; z-index: 2; width: 100%; height: 1137px; overflow: visible; background: transparent; }
  .products-showcase .cabinet-scenes article.wine-scene { overflow: visible; background: transparent; }
  .products-showcase .wine-scene img { position: absolute; top: 365px; left: 259px; width: 889px; height: 642px; z-index: 1; }
  .products-showcase .wine-scene > div { top: 365px; right: auto; bottom: auto; left: 1222px; width: 470px; }
  .products-showcase .wine-scene > div > p { color: #aaa; font-family: "Roboto Condensed KLF", Arial, sans-serif; font-size: 34px; line-height: 1; }
  .products-showcase .wine-scene span { display: block; margin-top: 15px; color: rgba(255,255,255,.72); font-size: 20px; line-height: 1.5; }
  .products-showcase .bookcase-scene h3 { font-size: 46px; font-weight: 400; }
  .products-showcase .wine-scene h3 { font-size: 34px; font-weight: 400; }

  .product-systems { position: relative; height: 3681px; overflow: hidden; background: #080808; }
  .product-systems .product-system { position: absolute; left: 0; width: 100%; min-height: 0; border: 0; overflow: hidden; }
  .product-systems .product-system:nth-child(1) { top: 0; height: 713px; }
  .product-systems .product-system:nth-child(2) { top: 713px; height: 742px; }
  .product-systems .product-system:nth-child(3) { top: 1455px; height: 742px; }
  .product-systems .product-system:nth-child(4) { top: 2197px; height: 742px; }
  .product-systems .product-system:nth-child(5) { top: 2939px; height: 742px; }
  .product-systems .product-system:nth-child(n+2) { background: linear-gradient(#fff 0 29px, #080808 29px); }
  .product-systems .product-system:nth-child(5) { background: linear-gradient(#fff 0 29px, #080808 29px); }
  .product-systems .product-system img { max-width: none; object-fit: fill; }
  .product-systems .product-system:nth-child(1) img { top: 0; left: 577px; width: 1343px; height: 712px; }
  .product-systems .product-system:nth-child(2) img { top: 29px; left: 0; width: 1343px; height: 712px; }
  .product-systems .product-system:nth-child(3) img { top: 29px; left: 577px; width: 1343px; height: 712px; }
  .product-systems .product-system:nth-child(4) img { top: 29px; left: 0; width: 1343px; height: 712px; }
  .product-systems .product-system:nth-child(5) img { top: 29px; left: 577px; width: 1343px; height: 712px; }
  .product-systems .product-system:nth-child(1) img,
  .product-systems .product-system:nth-child(3) img,
  .product-systems .product-system:nth-child(5) img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
  }
  .product-systems .product-system:nth-child(2) img,
  .product-systems .product-system:nth-child(4) img {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 100%);
  }
  .product-systems .product-system::after { display: none; }
  .product-systems .product-system-copy { position: absolute; z-index: 2; width: 560px; max-width: none; margin: 0; text-align: left; }
  .product-systems .product-system:nth-child(even) .product-system-copy { text-align: left; }
  .product-systems .product-system:nth-child(1) .product-system-copy { top: 216px; left: 13.49%; }
  .product-systems .product-system:nth-child(2) .product-system-copy { top: 177px; left: 63.33%; width: 455px; }
  .product-systems .product-system:nth-child(3) .product-system-copy { top: 168px; left: 13.49%; }
  .product-systems .product-system:nth-child(4) .product-system-copy { top: 153px; left: 62.4%; width: 470px; }
  .product-systems .product-system:nth-child(5) .product-system-copy { top: 215px; left: 13.49%; }
  .product-systems .product-system:nth-child(5) .product-system-copy .inner-kicker { width: max-content; max-width: calc(100vw - 320px); white-space: nowrap; }
  .product-systems .product-system-copy .inner-kicker { color: #aaa; font-size: 40px; line-height: 1.1; }
  .product-systems .product-system-copy h2 { margin-top: 8px; font-size: 40px; line-height: 1.2; }
  .product-systems .product-system-copy p:not(.inner-kicker),
  .product-systems .product-system:nth-child(even) .product-system-copy p:not(.inner-kicker) { max-width: none; margin: 30px 0 0; margin-left: 0; color: rgba(255,255,255,.72); font-size: 20px; line-height: 1.7; }

  .products-page + .footer { height: 545px; padding: 0; overflow: hidden; background: #272727; }
  .products-page + .footer .container { position: relative; width: 1402px; height: 518px; transform: none; }
  .products-page + .footer .footer-inner { display: block; padding: 0; border-bottom: 0; }
  .products-page + .footer .footer-inner::after { content: ""; position: absolute; top: 439px; left: 0; width: 1402px; height: 1px; background: rgba(255,255,255,.12); }
  .products-page + .footer .footer-brand { position: absolute; top: 0; left: 0; width: 350px; height: 162px; padding: 36px 75px 0; overflow: visible; }
  .products-page + .footer .footer-logo { width: 201px; margin-bottom: 25px; }
  .products-page + .footer .footer-phone { position: absolute; top: 211px; left: 0; margin-bottom: 8px; color: #fff; font-size: 23px; line-height: 1; }
  .products-page + .footer .footer-phone-label { position: absolute; top: 245px; left: 0; margin-bottom: 24px; color: rgba(255,255,255,.8); }
  .products-page + .footer .footer-social { position: absolute; top: 302px; left: 0; gap: 14px; }
  .products-page + .footer .footer-social a { flex: 0 0 52px; width: 52px; height: 50px; border: 0; }
  .products-page + .footer .footer-social-icon { width: auto; height: auto; max-width: 48px; max-height: 38px; object-fit: contain; transform: translateY(-1px); }
  .products-page + .footer .footer-links { position: absolute; top: 67px; left: 555px; display: grid; grid-template-columns: repeat(6,1fr); gap: 35px; width: 847px; }
  .products-page + .footer .footer-column h4 { margin-bottom: 20px; }
  .products-page + .footer .footer-column li { height: 25.6px; margin-bottom: 11px; }
  .products-page + .footer .footer-bottom { position: absolute; right: 0; bottom: 36px; left: 0; padding: 0; }
}

/* Manufacturing page: dark base so sub-pixel gaps during reveal animations don't flash white. */
.inner-page.manufacturing-page { background: #0e0b09; }

/* Manufacturing desktop alignment against the 1920px PSD. */
@media screen and (min-width: 769px) {
  .manufacturing-page .inner-hero { display: block; height: 701px; min-height: 701px; }
  .manufacturing-page .inner-hero::before { background: rgba(6,5,4,.68); }
  .manufacturing-page .inner-hero-content { width: min(1100px, calc(100% - 120px)); margin: 0 auto; padding-top: 274px; }
  .manufacturing-page .inner-hero-title { font-size: 72px; line-height: 1.08; }
  .manufacturing-page .inner-hero-subtitle { margin-top: 24px; font-size: 26px; line-height: 1.4; }

  .manufacturing-bases,
  .manufacturing-factory,
  .manufacturing-waterline,
  .manufacturing-handmade,
  .manufacturing-assembly,
  .inner-section.manufacturing-smart { min-height: 0; padding: 0; overflow: hidden; }

  .manufacturing-bases { height: 1037px; }
  .manufacturing-bases .inner-shell { position: relative; width: 100%; max-width: none; height: 100%; }
  .manufacturing-bases .inner-split { display: block; }
  .manufacturing-bases .inner-split > div:first-child { position: absolute; top: 292px; left: 13.49%; width: 650px; }
  .manufacturing-bases .inner-kicker { color: #bf9d78; font-size: 24px; text-transform: none; }
  .manufacturing-bases .inner-title { margin-top: 16px; font-size: 48px; }
  .manufacturing-bases .inner-copy { max-width: 650px; margin-top: 28px; font-size: 20px; line-height: 1.82; }
  .manufacturing-bases .inner-metrics { display: none; }
  .manufacturing-bases .factory-collage { position: absolute; inset: 0; display: block; min-height: 0; }
  .manufacturing-bases .factory-collage > figure { position: absolute; max-width: none; box-shadow: 0 24px 40px rgba(0,0,0,.22); }
  .manufacturing-bases .factory-collage img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
  .manufacturing-bases .factory-card-main { top: 213px; left: 49.9%; width: 962px; height: 608px; box-shadow: none; }
  .manufacturing-bases .factory-card-aerial { top: 58px; left: 43.33%; z-index: 2; width: 562px; height: 351px; }
  .manufacturing-bases .factory-card-second { top: 626px; left: 70.83%; z-index: 2; width: 560px; height: 351px; }
  .manufacturing-bases .factory-card-caption { min-height: 82px; padding: 19px 28px 17px; }
  .manufacturing-bases .factory-card-caption strong { font-size: 24px; }
  .manufacturing-bases .factory-card-caption span { font-size: 16px; }
  .manufacturing-bases.has-extra-bases { height: auto; }
  .manufacturing-bases.has-extra-bases .inner-shell { height: auto; min-height: 1037px; }
  .manufacturing-bases.has-extra-bases .factory-collage {
    position: relative;
    min-height: 1037px;
    padding-top: 1037px;
  }
  .manufacturing-bases .factory-card-extras {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    width: min(1400px, calc(100% - 120px));
    margin: 0 auto;
    padding: 72px 0 96px;
  }
  .manufacturing-bases .factory-card-extras .factory-card-extra {
    position: relative;
    min-height: 420px;
  }

  .manufacturing-factory { height: 946px; background: linear-gradient(#120f0d 0 473px, #1c1814 473px 100%); }
  .manufacturing-factory .inner-shell { position: relative; width: 100%; max-width: none; height: 100%; }
  .manufacturing-factory .inner-section-head { position: absolute; top: 106px; left: 60.42%; z-index: 2; width: 680px; margin: 0; }
  .manufacturing-factory .inner-section-head::after { content: ""; display: block; width: 450px; height: 24px; margin-top: 22px; background: repeating-linear-gradient(90deg, #c9a77c 0 4px, transparent 4px 9px); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 54%, rgba(0,0,0,.58) 76%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 54%, rgba(0,0,0,.58) 76%, transparent 100%); }
  .manufacturing-factory .inner-eyebrow { color: #8f8f8f; font-size: 36px; font-weight: 600; }
  .manufacturing-factory .inner-title { margin-top: 10px; font-size: 48px; }
  .manufacturing-factory .inner-copy { position: absolute; top: 482px; left: -901px; width: 680px; max-width: none; color: #c7b09a; font-size: 19px; line-height: 1.72; }
  .manufacturing-factory .manufacturing-gallery { position: absolute; inset: 0; display: block; }
  .manufacturing-factory .manufacturing-gallery figure { position: absolute; overflow: hidden; background: transparent; }
  .manufacturing-factory .manufacturing-gallery figure:nth-child(1) { top: 172px; left: 12.6%; width: 469px; height: 264px; }
  .manufacturing-factory .manufacturing-gallery figure:nth-child(2) { top: 343px; left: 38.23%; width: 466px; height: 261px; }
  .manufacturing-factory .manufacturing-gallery figure:nth-child(3) { top: 513px; left: 63.75%; width: 467px; height: 262px; }
  .manufacturing-factory .manufacturing-gallery img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: fill; }

  .manufacturing-waterline { height: 1198px; color: #fff; background: #85613f url("../images/manufacturing/layers/wood-texture.png") center / cover no-repeat; }
  .manufacturing-waterline::before { content: ""; position: absolute; top: 393px; left: 0; z-index: 1; width: 1116px; height: 686px; background: rgba(20,17,14,.96); }
  .manufacturing-waterline .inner-shell { position: relative; width: 100%; max-width: none; height: 100%; }
  .manufacturing-waterline .inner-split { display: block; }
  .manufacturing-waterline .manufacturing-robot { position: absolute; top: 116px; left: 41.35%; width: 1126px; height: 1080px; min-height: 0; overflow: hidden; box-shadow: none; }
  .manufacturing-waterline .manufacturing-robot img { width: 1126px; height: 1080px; max-width: none; object-fit: fill; }
  .manufacturing-waterline .inner-split > div { position: absolute; top: 251px; left: 13.49%; z-index: 2; width: 810px; }
  .manufacturing-waterline .inner-eyebrow { color: #ddd; font-size: 36px; font-weight: 600; }
  .manufacturing-waterline .inner-title { margin-top: 10px; color: #fff; font-size: 48px; }
  .manufacturing-waterline .inner-copy { position: absolute; top: 162px; left: 0; width: 800px; max-width: none; color: #fff; font-size: 19px; line-height: 2.05; }
  .manufacturing-waterline .inner-metrics { display: none; }
  .manufacturing-waterline .waterline-thumbs { position: absolute; top: 362px; left: 65px; width: 692px; display: grid; grid-template-columns: repeat(2, 330px); grid-template-rows: repeat(2, 192px); gap: 34px 31px; margin: 0; }
  .manufacturing-waterline .waterline-thumbs img { width: 330px; height: 192px; object-fit: cover; }

  .manufacturing-handmade { height: 978px; background: #0e0b09 url("../images/manufacturing/layers/wood-texture.png") center / cover no-repeat; }
  .manufacturing-handmade::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.78) 56%, rgba(0,0,0,.92) 82%, #000 100%); }
  .manufacturing-handmade .inner-shell { position: relative; width: 100%; max-width: none; height: 100%; }
  .manufacturing-handmade .inner-section-head { position: absolute; top: 132px; left: 0; z-index: 2; width: 100%; margin: 0; }
  .manufacturing-handmade .inner-eyebrow { font-size: 36px; font-weight: 600; }
  .manufacturing-handmade .inner-title { margin-top: 8px; font-size: 48px; }
  .manufacturing-handmade .inner-copy { position: absolute; top: 149px; left: 13.49%; width: 730px; max-width: none; color: #ddd; font-size: 20px; line-height: 2; text-align: left; }
  .manufacturing-handmade .handmade-grid { position: absolute; inset: 0; z-index: 1; display: block; }
  .manufacturing-handmade .handmade-grid img { position: absolute; max-width: none; object-fit: fill; }
  .manufacturing-handmade .handmade-grid img:nth-child(1) { top: 434px; left: 259px; width: 341px; height: 543px; }
  .manufacturing-handmade .handmade-grid img:nth-child(2) { top: 435px; left: 629px; width: 402px; height: 322px; }
  .manufacturing-handmade .handmade-grid img:nth-child(3) { top: 786px; left: 629px; width: 402px; height: 192px; }
  .manufacturing-handmade .handmade-grid img:nth-child(4) { top: 290px; left: 1060px; width: 601px; height: 688px; }

  .manufacturing-assembly { height: 1268px; background: linear-gradient(#000 0 185px, #fff 185px); }
  .manufacturing-assembly .inner-shell { position: relative; width: 100%; max-width: none; height: 100%; display: block; }
  .manufacturing-assembly .assembly-copy { position: absolute; top: 313px; left: 13.49%; z-index: 3; width: 590px; }
  .manufacturing-assembly .assembly-copy .inner-eyebrow { font-size: 36px; font-weight: 600; }
  .manufacturing-assembly .assembly-copy .inner-title { margin-top: 10px; font-size: 48px; }
  .manufacturing-assembly .assembly-count { position: absolute; top: 229px; left: 0; color: #fff; font-size: 62px; line-height: 1; }
  .manufacturing-assembly .assembly-count small { font-size: 32px; }
  .manufacturing-assembly .assembly-copy .inner-copy { position: absolute; top: 456px; left: 0; z-index: 2; width: 560px; max-width: none; color: #ddd; font-size: 19px; line-height: 1.9; }
  .manufacturing-assembly .inner-media { position: absolute; top: 500px; left: 0; z-index: 1; width: 850px; height: 667px; min-height: 0; overflow: hidden; box-shadow: none; }
  .manufacturing-assembly .inner-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.3) 0 72%, rgba(0,0,0,.95) 100%); }
  .manufacturing-assembly .inner-media img { position: absolute; /* top: -500px; */ left: 0; width: 850px; height: 667px; max-width: none; object-fit: fill; }
  .manufacturing-assembly .assembly-gallery { position: absolute; top: 365px; left: 45.78%; width: 782px; height: 850px; display: block; }
  .manufacturing-assembly .assembly-group { position: absolute; left: 0; width: 100%; }
  .manufacturing-assembly .assembly-group:first-child { top: 0; }
  .manufacturing-assembly .assembly-group:last-child { top: 489px; }
  .manufacturing-assembly .assembly-group h3 { font-size: 28px; }
  .manufacturing-assembly .assembly-group > p { position: absolute; top: 4px; right: 196px; margin: 0; font-size: 20px; }
  .manufacturing-assembly .assembly-group:first-child h3,
  .manufacturing-assembly .assembly-group:first-child > p { position: absolute; top: 147px; }
  .manufacturing-assembly .assembly-controls { position: absolute; top: -17px; right: 0; z-index: 3; display: flex; gap: 22px; margin: 0; }
  .manufacturing-assembly .assembly-group:first-child .assembly-controls { top: 132px; }
  .manufacturing-assembly .assembly-control { width: 66px; height: 66px; }
  .manufacturing-assembly .assembly-control span { width: 25px; }
  .manufacturing-assembly .assembly-group > .assembly-cards { position: absolute; top: 227px; left: 0; display: grid; grid-template-columns: repeat(3, 243px); gap: 27px; }
  .manufacturing-assembly .assembly-group:last-child > .assembly-cards { top: 80px; }
  .manufacturing-assembly .assembly-group figure { width: 243px; height: 233px; }
  .manufacturing-assembly .assembly-group img { position: absolute; max-width: none; object-fit: fill; }
  .manufacturing-assembly .assembly-card-panel img { /* top: -49px; */ /* left: -27px; */ width: 243px; height: 233px; }
  .manufacturing-assembly .assembly-card-import img { /* top: -49px; */ /* left: -294px; */ width: 243px; height: 233px; }
  .manufacturing-assembly .assembly-card-wood img { /* top: -106px; */ /* left: -88px; */ width: 243px; height: 233px; }
  .manufacturing-assembly .assembly-card-smart img { /* top: -49px; */ /* left: -27px; */ width: 243px; height: 233px; }
  .manufacturing-assembly .assembly-card-fabric img { top: 0; left: 0; width: 243px; height: 233px; }
  .manufacturing-assembly .assembly-card-furniture img { top: 0; left: 0; width: 243px; height: 233px; }
  .manufacturing-assembly .assembly-group figcaption { padding: 12px 18px; font-size: 22px; }

  .inner-section.manufacturing-smart { height: 2301px; background: #050505 url("../images/manufacturing/layers/dark-texture.png") center bottom / 1920px 1448px no-repeat; }
  .manufacturing-smart::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 974px; background: url("../images/manufacturing/layers/smart-room.png") center -498px / 1920px 1650px no-repeat; }
  .manufacturing-smart::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 974px; background: rgba(0,0,0,.56); }
  .manufacturing-smart .inner-shell { position: relative; z-index: 1; width: 100%; max-width: none; height: 100%; }
  .manufacturing-smart .inner-section-head { position: absolute; top: 108px; left: 13.49%; width: 900px; margin: 0; text-align: left; }
  .manufacturing-smart .inner-section-head .inner-eyebrow,
  .manufacturing-smart .smart-house-copy .inner-eyebrow { color: #aaa; font-size: 36px; font-weight: 600; }
  .manufacturing-smart .inner-section-head .inner-title,
  .manufacturing-smart .smart-house-copy .inner-title { margin-top: 10px; font-size: 48px; }
  .manufacturing-smart .inner-section-head .inner-copy { max-width: 990px; margin-top: 68px; color: #ddd; font-size: 19px; line-height: 1.9; }
  .manufacturing-smart .smart-service-loop { position: absolute; top: 422px; left: 13.75%; width: 72.5%; height: 552px; min-height: 0; margin: 0; border: 1px solid rgba(201,167,124,.5); border-bottom: 0; border-radius: 720px 720px 0 0; background: rgba(0,0,0,.64); }
  .manufacturing-smart .smart-service-loop::before { content: "1   2   3   4   5   6   7"; position: absolute; bottom: 0; left: 50%; width: 630px; height: 260px; padding-top: 95px; border: 76px solid rgba(201,167,124,.52); border-bottom: 0; border-radius: 390px 390px 0 0; color: #fff; font-size: 28px; word-spacing: 39px; text-align: center; transform: translateX(-50%); }
  .manufacturing-smart .smart-service-loop strong { bottom: 42px; z-index: 2; font-size: 30px; }
  .manufacturing-smart .smart-service-loop span { position: absolute; font-size: 22px; }
  .manufacturing-smart .smart-service-loop span:nth-child(2) { top: 395px; left: 185px; }
  .manufacturing-smart .smart-service-loop span:nth-child(3) { top: 245px; left: 270px; }
  .manufacturing-smart .smart-service-loop span:nth-child(4) { top: 120px; left: 430px; }
  .manufacturing-smart .smart-service-loop span:nth-child(5) { top: 62px; left: 655px; }
  .manufacturing-smart .smart-service-loop span:nth-child(6) { top: 120px; right: 405px; }
  .manufacturing-smart .smart-service-loop span:nth-child(7) { top: 245px; right: 255px; }
  .manufacturing-smart .smart-service-loop span:nth-child(8) { top: 395px; right: 150px; }
  .manufacturing-smart .smart-house-copy { position: absolute; top: 1110px; left: 13.49%; width: 930px; }
  .manufacturing-smart .smart-house-copy .inner-copy { max-width: 970px; margin-top: 92px; color: #ccc; font-size: 19px; line-height: 1.9; }
  .manufacturing-smart .smart-house { position: absolute; top: 1350px; left: 35.68%; width: 954px; height: 699px; max-width: none; margin: 0; }
  .manufacturing-smart .smart-systems { position: absolute; top: 2068px; left: 13.39%; width: 73.23%; height: 233px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; padding: 0 18px; background: rgba(68,68,68,.82); }
  .manufacturing-smart .smart-systems span { display: flex; align-items: flex-start; justify-content: center; padding: 125px 6px 0; color: #ddd; font-size: 18px; background-position: center 49px; background-repeat: no-repeat; box-shadow: inset 0 0 0 rgba(201,167,124,0); transition: color .4s ease, background-color .4s ease, box-shadow .4s ease, transform .48s cubic-bezier(.22,.61,.36,1); }
  .manufacturing-smart .smart-systems span:hover { color: #d6b188; background-color: rgba(255,255,255,.12); box-shadow: inset 0 2px 0 #c9a77c; transform: translateY(-8px); }
  .manufacturing-smart .smart-systems span:nth-child(1) { background-image: url("../images/manufacturing/layers/smart-system-1.png"); }
  .manufacturing-smart .smart-systems span:nth-child(2) { background-image: url("../images/manufacturing/layers/smart-system-2.png"); }
  .manufacturing-smart .smart-systems span:nth-child(3) { background-image: url("../images/manufacturing/layers/smart-system-3.png"); }
  .manufacturing-smart .smart-systems span:nth-child(4) { background-image: url("../images/manufacturing/layers/smart-system-4.png"); }
  .manufacturing-smart .smart-systems span:nth-child(5) { background-image: url("../images/manufacturing/layers/smart-system-5.png"); }
  .manufacturing-smart .smart-systems span:nth-child(6) { background-image: url("../images/manufacturing/layers/smart-system-6.png"); }
  .manufacturing-smart .smart-systems span:nth-child(7) { background-image: url("../images/manufacturing/layers/smart-system-7.png"); }

  .manufacturing-page + .footer { height: 636px; padding: 0; overflow: hidden; background: #272727 url("../images/manufacturing/layers/dark-texture.png") center -1329px / 1920px 1448px no-repeat; }
  .manufacturing-page + .footer .container { position: relative; width: 1402px; height: 518px; transform: translateY(119px); }
  .manufacturing-page + .footer .footer-inner { display: block; padding: 0; border-bottom: 0; }
  .manufacturing-page + .footer .footer-inner::after { content: ""; position: absolute; top: 439px; left: 0; width: 1402px; height: 1px; background: rgba(255,255,255,.12); }
  .manufacturing-page + .footer .footer-brand { position: absolute; top: 0; left: 0; width: 350px; height: 162px; padding: 36px 74px 0; overflow: visible; }
  .manufacturing-page + .footer .footer-logo { width: 201px; margin-bottom: 25px; }
  .manufacturing-page + .footer .footer-phone { position: absolute; top: 211px; left: 0; margin-bottom: 8px; color: #fff; font-size: 23px; line-height: 1; }
  .manufacturing-page + .footer .footer-phone-label { position: absolute; top: 245px; left: 0; margin-bottom: 24px; color: rgba(255,255,255,.8); }
  .manufacturing-page + .footer .footer-social { position: absolute; top: 302px; left: 0; gap: 14px; }
  .manufacturing-page + .footer .footer-social a { flex: 0 0 52px; width: 52px; height: 50px; border: 0; }
  .manufacturing-page + .footer .footer-social-icon { width: auto; height: auto; max-width: 48px; max-height: 38px; object-fit: contain; transform: translateY(-1px); }
  .manufacturing-page + .footer .footer-links { position: absolute; top: 67px; left: 555px; display: grid; grid-template-columns: repeat(6,1fr); gap: 35px; width: 847px; }
  .manufacturing-page + .footer .footer-column h4 { margin-bottom: 20px; }
  .manufacturing-page + .footer .footer-column li { height: 25.6px; margin-bottom: 11px; }
  .manufacturing-page + .footer .footer-bottom { position: absolute; right: 0; bottom: 36px; left: 0; padding: 0; }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 140px;
}

/* Anchor offset for fixed header under body.zoom (pc-scale.js) */
h2[id], section[id], [id]:not(body):not(html) {
  scroll-margin-top: 110px;
}
.brand-section-heading[id], .brand-section-heading {
  scroll-margin-top: 120px;
}

body {
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  overflow-x: hidden;
}

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

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

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

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 60px;
}

@media (max-width: 1024px) {
  .container {
    padding: 0 30px;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: var(--transition);
  padding: 20px 0;
}

.header.scrolled {
  background: rgba(15, 15, 15, 0.95);
  backdrop-filter: blur(10px);
  padding: 12px 0;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-white);
}

.logo-mark {
  width: 42px;
  height: 42px;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  position: relative;
}

.logo-mark::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--color-gold);
  border-radius: 50%;
  top: 6px;
  right: 6px;
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-brand {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.2;
}

.logo-sub {
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.8;
}

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  color: var(--color-white);
  font-size: 20px;
  font-weight: 400;
  position: relative;
  transition: var(--transition);
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-gold);
  transition: var(--transition);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-item.has-subnav > .nav-link {
  padding-right: 14px;
}

.nav-item.has-subnav > .nav-link::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  transition: transform .24s ease, color .24s ease;
}

.nav-item.has-subnav:hover > .nav-link,
.nav-item.has-subnav:focus-within > .nav-link {
  color: var(--color-gold);
}

.nav-item.has-subnav:hover > .nav-link::before,
.nav-item.has-subnav:focus-within > .nav-link::before {
  transform: translateY(-35%) rotate(225deg);
}

.nav-submenu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  z-index: 1001;
  min-width: 132px;
  padding: 8px 0;
  background: rgba(15, 15, 15, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: var(--transition);
  backdrop-filter: blur(12px);
}

.nav-submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}

.nav-item:hover .nav-submenu,
.nav-item:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav-submenu-link {
  display: block;
  padding: 9px 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  transition: var(--transition);
}

.nav-submenu-link:hover,
.nav-submenu-link.active {
  color: var(--color-gold);
  background: rgba(255, 255, 255, 0.08);
}

@media (min-width: 1025px) {
  .nav-submenu {
    position: fixed;
    top: 82px;
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(44px, 5.8vw, 82px);
    padding: 0 40px;
    background: rgba(12, 10, 9, 0.97);
    border: 0;
    border-top: 1px solid rgba(201, 160, 124, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .24s ease, transform .24s ease, visibility .24s ease;
    backdrop-filter: blur(16px);
  }



  .nav-submenu::before {
    top: -16px;
    height: 16px;
  }

  .nav-item:hover .nav-submenu,
  .nav-item:focus-within .nav-submenu {
    transform: translateY(0);
  }

  .nav-submenu-link {
    position: relative;
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    padding: 0 2px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .02em;
  }

  .nav-submenu-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 11px;
    width: 0;
    height: 1px;
    background: var(--color-gold);
    transform: translateX(-50%);
    transition: width .24s ease;
  }

  .nav-submenu-link:hover,
  .nav-submenu-link.active {
    color: var(--color-gold);
    background: transparent;
  }

  .nav-submenu-link:hover::after,
  .nav-submenu-link.active::after {
    width: 100%;
  }
}

.page-subnav {
  position: absolute;
  top: 104px;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  justify-content: center;
  padding: 0 20px;
}

.page-subnav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  height: 44px;
  padding: 0 24px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(15, 15, 15, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 14px;
  line-height: 1;
  transition: var(--transition);
  backdrop-filter: blur(8px);
}

.page-subnav-link + .page-subnav-link {
  border-left: 0;
}

.page-subnav-link:hover,
.page-subnav-link.active {
  color: var(--color-black);
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: var(--transition);
}

.icon-btn:hover {
  color: var(--color-gold);
}

.service-btn svg {
  width: 22px;
  height: 22px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
}

.btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--color-white);
}

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

/* Top-right hotline button: keep phone number on one line, keep white text on hover */
.header-actions .btn-outline {
  white-space: nowrap;
}

.header-actions .btn-outline:hover {
  color: var(--color-white);
}

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

.btn-gold:hover {
  background: var(--color-gold-dark);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-white);
  transition: var(--transition);
}

@media (max-width: 768px) {
  .header-inner {
    padding: 0 40px;
  }

  .nav {
    gap: 24px;
  }

  .nav-link {
    font-size: 13px;
  }

  .header-actions {
    gap: 8px;
  }

  .btn {
    padding: 8px 16px;
    font-size: 13px;
  }
}

@media (max-width: 1024px) {
  .header-inner {
    padding: 0 30px;
  }

  .nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--color-black);
    flex-direction: column;
    padding: 100px 40px;
    gap: 24px;
    transition: var(--transition);
  }

  body.menu-open {
    overflow: hidden;
    touch-action: none;
  }

  .nav-item {
    flex-direction: column;
    gap: 8px;
  }

  .nav-submenu {
    position: static;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    backdrop-filter: none;
  }

  .nav-submenu::before {
    display: none;
  }

  .nav-item:hover .nav-submenu,
  .nav-item:focus-within .nav-submenu {
    transform: none;
  }

  .nav-submenu-link {
    padding: 4px 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    text-align: center;
  }

  .nav-submenu-link:hover,
  .nav-submenu-link.active {
    background: transparent;
  }

  .nav.open {
    right: 0;
  }

  .menu-toggle {
    display: flex;
    z-index: 1001;
  }
}

@media (max-width: 768px) {
  .header-inner {
    padding: 0 20px;
  }

  .page-subnav {
    top: 82px;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 0 20px;
    scrollbar-width: none;
  }

  .page-subnav::-webkit-scrollbar {
    display: none;
  }

  .page-subnav-link {
    min-width: 104px;
    height: 38px;
    padding: 0 16px;
    font-size: 13px;
    /* Mobile: 关闭 backdrop-filter 并提升背景不透明度。
       iOS Safari 对半透明 + backdrop-filter 元素的子像素重绘存在已知问题,
       会在 .page-subnav-link 文字上出现短暂拉伸/模糊/失真。
       用 0.85 不透明深色背景替代半透明 + blur 效果。 */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 15, 15, 0.85);
    border-color: rgba(255, 255, 255, 0.34);
  }

  /* history.html 移动端:8 个 subnav 中只保留"发展历程""企业荣誉"两个
     (active 是 history 时,主要用途就是跳到 honors;反之亦然)
     隐藏前 6 个:公司简介、超级符号、品牌释义、品牌IP、合作伙伴、社会公益 */
  .history-body .page-subnav-link:nth-child(1),
  .history-body .page-subnav-link:nth-child(2),
  .history-body .page-subnav-link:nth-child(3),
  .history-body .page-subnav-link:nth-child(4),
  .history-body .page-subnav-link:nth-child(5),
  .history-body .page-subnav-link:nth-child(6) {
    display: none;
  }

  /* brand-honors.html 移动端:同样只保留"发展历程""企业荣誉"两个,
     justify-content 居中(2 个 tab 不溢出,无需 flex-start 滚动) */
  .honors-body .page-subnav-link:nth-child(1),
  .honors-body .page-subnav-link:nth-child(2),
  .honors-body .page-subnav-link:nth-child(3),
  .honors-body .page-subnav-link:nth-child(4),
  .honors-body .page-subnav-link:nth-child(5),
  .honors-body .page-subnav-link:nth-child(6) {
    display: none;
  }

  .honors-body .page-subnav,
  .history-body .page-subnav {
    justify-content: center;
  }

  .header-actions .btn {
    display: none;
  }
}

/* Section Common */
.section-title {
  text-align: center;
  margin-bottom: 60px;
}

.section-title-en {
  font-size: 14px;
  letter-spacing: 4px;
  color: var(--color-text-light);
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 400;
}

.product-series .section-title-en {
  font-family: "Montserrat KLF", Arial, sans-serif;
  font-weight: 600;
}

.section-title-cn {
  font-size: 36px;
  font-weight: 600;
  color: var(--color-black);
}

.section-title-cn.light {
  color: var(--color-white);
}

.section-title-left {
  text-align: left;
  margin-bottom: 0;
}

.section-title-en-light {
  color: rgba(255, 255, 255, 0.5);
}

.reveal {
  opacity: 1;
  transform: none;
}

html.motion-basic .reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

html.motion-basic .reveal.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

html.motion-basic .reveal img {
  transform: scale(1.01);
  transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.motion-basic .reveal.active img {
  transform: scale(1);
}

/* Hero */
.hero {
  height: calc(100vw * 922 / 1897);
  max-height: 922px;
  min-height: 700px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Let the browser keep vertical scrolling, but leave horizontal gestures to
     the swipe handler in main.js so banner taps do not hijack a sideways drag. */
  touch-action: pan-y;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 0s linear 1s;
  pointer-events: none;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition: opacity 1s ease, visibility 0s linear 0s;
  pointer-events: auto;
}

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

.hero-slide-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  pointer-events: auto;
}

.hero-slide:not(.active) .hero-slide-link,
.hero-slide:not(.active) img {
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  text-align: center;
  color: var(--color-white);
  z-index: 2;
  pointer-events: none;
}

.hero-title {
  font-size: 44px;
  font-weight: 400;
  letter-spacing: 8px;
  margin-bottom: 20px;
}

.hero-subtitle {
  font-size: 15px;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.85);
}

.hero-dots {
  position: absolute;
  bottom: 180px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 2;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: var(--transition);
}

.hero-dot.active {
  background: var(--color-white);
}

.hero-stats {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 60px;
  z-index: 2;
  color: var(--color-white);
  pointer-events: none;
}

.hero-stat {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.hero-stat-num {
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
}

.hero-stat-unit {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 1024px) {
  .hero-title {
    font-size: 30px;
    letter-spacing: 4px;
  }

  .hero-stats {
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 20px;
  }

  .hero-stat-num {
    font-size: 28px;
  }

  .hero-dots {
    bottom: 160px;
  }
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: var(--transition);
}

.hero-arrow:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.hero-arrow.prev { left: 60px; }
.hero-arrow.next { right: 60px; }

.hero-arrow::before,
.hero-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  display: none;
  pointer-events: none;
  transition: var(--transition);
}

@media (max-width: 1024px) {
  .hero-arrow {
    display: none;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 690px;
    align-items: flex-start;
  }

  .hero-slide img {
    height: 690px;
    object-position: 42% top;
  }

  .hero-content {
    top: 218px;
    width: min(300px, calc(100vw - 48px));
    transform: translateX(-50%);
  }

  .hero-title {
    font-size: 36px;
    line-height: 1.38;
    letter-spacing: 2px;
    margin-bottom: 16px;
  }

  .hero-subtitle {
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: 1px;
  }

  .hero-dots {
    bottom: 164px;
    gap: 10px;
  }

  .hero-dot {
    width: 8px;
    height: 8px;
  }

  .hero-stats {
    bottom: 52px;
    width: calc(100vw - 56px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 14px;
    padding: 0;
  }

  .hero-stat {
    justify-content: center;
  }

  .hero-stat-num {
    font-size: 28px;
  }

  .hero-stat-unit {
    font-size: 11px;
    white-space: nowrap;
  }
}

/* Product Series */
.product-series {
  padding: 120px 0;
  background: var(--color-white);
}

.product-feature {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 80px;
  color: inherit;
  text-decoration: none;
}

.product-info {
  padding-left: 40px;
}

.product-label {
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.product-name {
  font-size: 42px;
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 24px;
}

.product-desc {
  font-size: 15px;
  color: var(--color-text-light);
  line-height: 2;
  margin-bottom: 32px;
}

.product-image {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

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

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

.product-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.product-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 3/4;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.product-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.4) sepia(0.22) brightness(0.92);
  transition: transform 0.8s ease, filter 0.45s ease;
}

.product-card:hover > img {
  transform: scale(1.08);
  filter: grayscale(0);
}

.product-card.is-active > img {
  transform: scale(1.08);
  filter: grayscale(0);
}

.product-cards:has(.product-card:hover) .product-card.is-active:not(:hover) > img {
  transform: none;
  filter: grayscale(0.4) sepia(0.22) brightness(0.92);
}

.product-card::before,
.product-card::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.82);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.product-card::before {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #c8a07c;
}

.product-card::after {
  width: 40px;
  height: 32px;
  background: url("../images/product-card-eye.png") center / contain no-repeat;
}

.product-card.is-active::before,
.product-card.is-active::after,
.product-card:hover::before,
.product-card:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.product-cards:has(.product-card:hover) .product-card.is-active:not(:hover)::before,
.product-cards:has(.product-card:hover) .product-card.is-active:not(:hover)::after {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
}

.product-card-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 174px;
  padding: 8px 40px 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  color: var(--color-white);
  z-index: 2;
}

.product-card-overlay::after {
  content: "";
  position: absolute;
  left: 38px;
  right: 38px;
  bottom: 71px;
  height: 1px;
  background: rgba(255, 255, 255, 0.65);
}

.product-card-en {
  font-family: "Roboto Condensed KLF", Arial, sans-serif;
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 12px;
}

.product-card-title {
  font-size: 32px;
  line-height: 38px;
  font-weight: 400;
}

@media (max-width: 1024px) {
  .product-feature {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .product-info {
    padding-left: 0;
  }

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

@media (max-width: 768px) {
  .product-series {
    padding: 80px 0;
  }

  .product-name {
    font-size: 32px;
  }

  .product-image img {
    height: 360px;
  }

  .product-cards {
    grid-template-columns: 1fr;
  }
}

/* Dark Scene Sections */
.scene-section {
  padding: 0;
  color: var(--color-white);
  min-height: 700px;
  display: flex;
  align-items: center;
}

.scene-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 700px;
}

.scene-image {
  position: relative;
  overflow: hidden;
  height: 700px;
}

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

.scene-section:hover .scene-image img {
  transform: scale(1.03);
}

.scene-content {
  padding: 80px 80px 80px 100px;
}

.scene-content.left {
  padding: 80px 100px 80px 80px;
}

.scene-label {
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.scene-title {
  font-size: 42px;
  font-weight: 600;
  margin-bottom: 24px;
}

.scene-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 2;
}

.scene-yu-detail .scene-desc + .scene-desc {
  margin-top: 24px;
}

@media (max-width: 1024px) {
  .scene-inner {
    grid-template-columns: 1fr;
  }

  .scene-image {
    height: 400px;
  }

  .scene-content,
  .scene-content.left {
    padding: 60px 30px;
  }

  .scene-title {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .scene-image {
    height: 300px;
  }

  .scene-title {
    font-size: 28px;
  }

  .scene-section {
    color: var(--color-black);
  }

  .scene-section .scene-desc {
    color: rgba(0, 0, 0, 0.7);
  }
}

/* Light Scene Section */
.scene-section-light {
  padding: 120px 0;
  background: var(--color-white);
}

.light-section-inner {
  text-align: center;
}

.light-section-inner .section-title-en,
.light-section-inner .section-title-cn {
  margin-bottom: 16px;
}

.light-section-desc {
  font-size: 15px;
  color: var(--color-text-light);
  line-height: 2;
  margin-bottom: 60px;
}

.light-section-image {
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

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

.light-section-image:hover img {
  transform: scale(1.03);
}

@media (max-width: 768px) {
  .scene-section-light {
    padding: 80px 0;
  }

  .light-section-desc {
    margin-bottom: 40px;
  }
}

/* Five Hearts */
.five-hearts {
  padding: 120px 0;
  background: var(--color-white);
}

.hearts-tabs {
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-bottom: 60px;
}

.hearts-intro-tab,
.hearts-tab {
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.hearts-tab {
  text-align: center;
  cursor: pointer;
  padding-bottom: 16px;
  position: relative;
  transition: var(--transition);
}

.hearts-tab-name {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 6px;
}

.hearts-tab-desc {
  font-size: 13px;
  color: var(--color-text-light);
}

.hearts-tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--color-gold);
  transition: var(--transition);
}

.hearts-tab.active::after {
  width: 40px;
}

.hearts-tab.active .hearts-tab-name {
  color: var(--color-gold);
}

.hearts-content {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 60px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
}

.hearts-text {
  padding: 40px;
  background: var(--color-black);
  color: var(--color-white);
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hearts-title {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 16px;
}

.hearts-title-en {
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 32px;
}

.hearts-detail {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 2;
}

.hearts-image {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
}

.hearts-image img {
  width: 100%;
  height: 480px;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .hearts-tabs {
    gap: 30px;
    flex-wrap: wrap;
  }

  .hearts-content {
    grid-template-columns: 1fr;
    padding: 0 30px;
  }

  .hearts-image img {
    height: 360px;
  }
}

@media (max-width: 768px) {
  .five-hearts {
    padding: 80px 0;
  }

  .hearts-tabs {
    gap: 20px;
  }

  .hearts-tab-name {
    font-size: 20px;
  }

  .hearts-content {
    padding: 0 20px;
  }

  .hearts-text {
    padding: 30px;
  }

  .hearts-title {
    font-size: 28px;
  }
}

/* News */
.news {
  padding: 120px 0;
  background: var(--color-black);
}

.news-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
}

.news-controls {
  display: flex;
  gap: 16px;
}

.news-arrow {
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: var(--transition);
}

.news-arrow:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.news-arrow.is-active {
  transform: scale(0.94);
}

.news-arrow[aria-disabled="true"] {
  cursor: wait;
}

.news-slider {
  overflow: hidden;
}

.news-track {
  display: flex;
  gap: 24px;
  transition: transform 0.6s ease;
}

.news-track.is-switching .news-card {
  pointer-events: none;
}

.news-card {
  flex: 0 0 calc(33.333% - 16px);
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4/5;
}

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

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

.news-date {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--color-gold);
  color: var(--color-white);
  padding: 12px 16px;
  text-align: center;
  border-radius: 2px;
}

.news-date-day {
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}

.news-date-month {
  font-size: 12px;
  margin-top: 4px;
}

.news-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  color: var(--color-white);
}

.news-card-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 12px;
  line-height: 1.5;
}

.news-card-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1024px) {
  .news-card {
    flex: 0 0 calc(50% - 12px);
  }
}

@media (max-width: 768px) {
  .news {
    padding: 80px 0;
  }

  .news-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .news-card {
    flex: 0 0 100%;
    aspect-ratio: auto;
    overflow: visible;
  }

  .news-card img {
    aspect-ratio: 16/9;
    height: auto;
  }

  .news-card-content {
    position: static;
    padding: 16px 20px 4px;
    background: #fff;
    color: #111;
  }

  .news-card-title {
    color: #111;
  }

  .news-card-desc {
    color: rgba(0, 0, 0, 0.66);
  }
}

/* Footer */
.footer {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 80px 0 0;
}

.footer-inner {
  display: grid;
  grid-template-columns: 0.8fr 2fr;
  gap: 80px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand {
  background: var(--color-gold);
  padding: 40px;
  color: var(--color-white);
  align-self: start;
}

@media (min-width: 769px) {
  .footer-brand {
    position: absolute;
    left: 0;
    top: 0;
    width: 350px;
    height: 162px;
    padding: 36px 74px 0;
    overflow: visible;
  }
}

.footer-logo {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 40px;
  letter-spacing: 2px;
}

.footer-phone {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
}

.footer-phone-label {
  font-size: 16px;
  opacity: 0.8;
  margin-bottom: 24px;
}

.footer-social {
  display: flex;
  gap: 14px;
}

.footer-social a {
  width: 40px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.footer-social a:hover {
  background: var(--color-white);
  color: var(--color-gold);
}

.footer-social-icon {
  display: block;
  width: 30px;
  height: 24px;
  object-fit: contain;
}

.footer-social a {
  position: relative;
}

.footer-qr-popover {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  z-index: 20;
  width: 154px;
  padding: 12px 12px 10px;
  border: 1px solid #e6e6e6;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  color: #222;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.footer-qr-popover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 7px solid transparent;
  border-top-color: #fff;
  transform: translateX(-50%);
}

.footer-qr-popover img {
  display: block;
  width: 128px;
  height: 128px;
  object-fit: contain;
}

.footer-qr-popover b {
  display: block;
  margin-top: 7px;
  font-size: 14px;
  font-weight: 500;
}

.footer-social a:hover .footer-qr-popover,
.footer-social a:focus-visible .footer-qr-popover {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 30px;
}

.footer-column h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 24px;
}

.footer-column ul {
  list-style: none;
}

.footer-column li {
  margin-bottom: 12px;
}

.footer-column a {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  transition: var(--transition);
}

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

.footer-bottom {
  padding: 32px 0 28px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  line-height: 1.8;
}

.footer-bottom a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.footer-bottom a:hover {
  color: var(--color-gold);
}

.footer-beian {
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  line-height: 1.6;
}

.footer-beian-sep {
  color: rgba(255, 255, 255, 0.55);
}

.footer-beian-police {
  display: inline-flex;
  align-items: center;
}

.footer-beian-icon {
  display: inline-block;
  width: 17px;
  height: 18px;
  flex: 0 0 auto;
  margin-right: 6px;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

@media (max-width: 768px) {
  .footer {
    height: auto;
    padding: 42px 20px 26px;
    overflow: visible;
    background: #151515;
  }

  .footer .container {
    width: 100%;
    height: auto;
    padding: 0;
  }

  .footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 0 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .footer-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    background: transparent;
    color: #fff;
    text-align: center;
    overflow: visible;
  }

  .footer-brand::before {
    content: none;
  }

  .footer-logo,
  .footer-phone,
  .footer-phone-label,
  .footer-social {
    position: relative;
    z-index: 1;
  }

  .footer-logo {
    order: 1;
    width: 100%;
    margin: 0 0 18px;
    padding: 24px 22px 22px;
    background: #c8a87a;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .footer-logo img {
    width: min(240px, 78%);
    max-width: 240px;
  }

  .footer-phone {
    order: 3;
    margin: 0;
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .02em;
  }

  .footer-phone-label {
    order: 2;
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: .08em;
  }

  .footer-social {
    order: 4;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
  }

  .footer-social a {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
  }

  .footer-social-icon {
    max-width: 20px;
    max-height: 20px;
  }

  .footer-links {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 38px;
  }

  .footer-column h4 {
    margin-bottom: 14px;
    font-size: 15px;
  }

  .footer-column li {
    margin-bottom: 11px;
  }

  .footer-column a {
    font-size: 13px;
    line-height: 1.4;
  }

  .footer-bottom {
    padding: 22px 0 0;
    font-size: 14px;
    line-height: 1.7;
  }
}

/* PSD homepage alignment: keep the existing static structure, tune it to the 1920px design. */
@media (min-width: 769px) {
  :root {
    --max-width: 1402px;
  }

  .container {
    max-width: 1402px;
    padding: 0;
  }

  .home-pc-stage {
    width: 1920px;
    margin: 0 auto;
  }

  .header {
    position: fixed;
    padding: 20px 0 0;
    height: 78px;
  }

  .header.scrolled {
    padding: 14px 0 0;
    height: 78px;
    background: rgba(15, 15, 15, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.22);
  }

  .header-inner {
    max-width: 1720px;
    height: 45px;
    padding: 0;
  }

  .nav {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    flex-direction: row;
    gap: 42px;
    transition: none;
  }

  .nav.open {
    right: auto;
  }

  .nav-item {
    flex-direction: row;
    gap: 0;
  }

  .menu-toggle {
    display: none;
  }

  .nav-submenu {
    top: 78px;
  }

  .logo {
    gap: 10px;
  }

  .logo-mark {
    width: 34px;
    height: 34px;
    font-size: 11px;
    border-width: 1px;
  }

  .logo-mark::before {
    width: 6px;
    height: 6px;
    top: 5px;
    right: 5px;
  }

  .logo-brand {
    font-size: 20px;
    letter-spacing: 1px;
  }

  .logo-sub {
    font-size: 8px;
  }

  .nav {
    gap: 42px;
  }

  .nav-link {
    font-size: 20px;
  }

  .icon-btn {
    width: 32px;
    height: 32px;
  }

  .header-actions {
    gap: 0;
  }

  .header-actions::before {
    content: "";
    width: 3px;
    height: 23px;
    margin-right: 44px;
    background: rgba(255, 255, 255, 0.62);
  }

  .service-btn {
    width: 24px;
    height: 24px;
    margin-right: 41px;
  }

  .service-btn svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.7;
  }

  .btn {
    min-width: 144px;
    height: 45px;
    justify-content: center;
    padding: 0 18px;
    font-size: 14px;
  }

  .btn-outline {
    margin-right: 14px;
  }

  .hero {
    height: 922px;
    max-height: 922px;
    min-height: 922px;
  }

  .hero-slide img {
    height: 100%;
    object-fit: cover;
  }

  .hero-overlay {
    background: rgba(0, 0, 0, 0.28);
  }

  .hero-content {
    top: 356px;
    transform: translateX(-50%);
    width: 1000px;
  }

  .hero-title {
    font-size: 66px;
    line-height: 1.25;
    letter-spacing: 4px;
    margin-bottom: 20px;
  }

  .hero-subtitle {
    font-size: 20px;
    letter-spacing: 1px;
  }

  .hero-dots {
    bottom: 352px;
    gap: 10px;
  }

  .hero-dot {
    width: 6px;
    height: 6px;
  }

  .hero-stats {
    bottom: 68px;
    width: 1700px;
    justify-content: space-between;
    gap: 0;
  }

  .hero-stat-num {
    font-size: 72px;
  }

  .hero-stat-unit {
    font-size: 26px;
  }

  .hero-arrow {
    display: flex;
    width: 56px;
    height: 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
  }

  .hero-arrow:hover {
    background: transparent;
    border-color: transparent;
    color: var(--color-white);
  }

  .hero-arrow svg {
    display: none;
  }

  .hero-arrow::before {
    display: block;
    width: 51px;
    height: 1px;
    background: currentColor;
    transform: translateY(-50%);
  }

  .hero-arrow::after {
    display: block;
    width: 14px;
    height: 1px;
    border: 0;
    background: currentColor;
  }

  .hero-arrow.prev::before {
    left: 0;
  }

  .hero-arrow.prev::after {
    left: 0;
    transform-origin: left center;
    transform: translateY(-50%) rotate(-45deg);
  }

  .hero-arrow.next::before {
    right: 0;
  }

  .hero-arrow.next::after {
    right: 0;
    transform-origin: right center;
    transform: translateY(-50%) rotate(45deg);
  }

  .hero-arrow.prev { left: 70px; }
  .hero-arrow.next { right: 70px; }

  .product-series {
    height: 1477px;
    padding: 100px 0 0;
  }

  .section-title {
    margin-bottom: 72px;
  }

  .section-title-en {
    font-size: 16px;
    letter-spacing: 0;
    margin-bottom: 2px;
  }

  .section-title-cn {
    font-size: 30px;
    line-height: 1.2;
  }

  .product-feature {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 92px;
    margin-bottom: 70px;
  }

  .product-feature .product-info {
    flex: 0 0 540px;
    width: 540px;
    max-width: 100%;
    padding-left: 0;
    padding-top: 80px;
  }

  .product-feature .product-image {
    flex: 0 0 1028px;
    width: 1028px;
    max-width: 100%;
    height: 534px;
    box-shadow: 0 28px 55px rgba(0, 0, 0, 0.22);
  }

  .product-info {
    padding-left: 0;
    padding-top: 80px;
  }

  .product-label {
    font-size: 18px;
    letter-spacing: 0;
    margin-bottom: 8px;
    color: #111;
  }

  .product-name {
    font-size: 43px;
    line-height: 1.15;
    margin-bottom: 28px;
  }

  .product-desc {
    font-size: 18px;
    line-height: 2.25;
    color: #333;
  }

  .product-image {
    width: 1028px;
    height: 534px;
    box-shadow: 0 28px 55px rgba(0, 0, 0, 0.22);
  }

  .product-image img {
    height: 534px;
  }

  .product-cards {
    grid-template-columns: repeat(3, 436px);
    gap: 46px;
    align-items: start;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .product-card {
    width: 436px;
    height: 568px;
    aspect-ratio: auto;
  }

  .product-card:nth-child(1) {
    transform: translateY(76px);
  }

  .product-card:nth-child(2) {
    transform: translateY(135px);
  }

  .product-card:nth-child(3) {
    transform: translateY(0);
  }

  .scene-section {
    position: relative;
    min-height: 0;
    overflow: hidden;
  }

  .scene-inner {
    position: relative;
    width: 100%;
    min-height: inherit;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .scene-image {
    height: 100%;
    border-radius: 0;
  }

  .scene-content {
    z-index: 2;
  }

  .scene-label {
    font-size: 18px;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.86);
    margin-bottom: 4px;
  }

  .scene-title {
    font-size: 43px;
    line-height: 1.16;
    margin-bottom: 28px;
  }

  .scene-desc {
    font-size: 18px;
    line-height: 2;
    color: rgba(255, 255, 255, 0.84);
  }

  .scene-yue {
    height: 1153px;
    background: #000;
  }

  .scene-yue .scene-inner {
    min-height: 1153px;
    display: block;
  }

  .scene-yue .scene-image {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 900px;
  }

  .scene-yue .scene-image img {
    width: 100%;
    height: 900px;
    object-fit: cover;
  }

  .scene-yue .scene-content {
    position: absolute;
    right: 260px;
    top: 520px;
    width: 500px;
    padding: 0;
  }

  .scene-bookshelf {
    height: 850px;
    background: #050505;
  }

  .scene-bookshelf .scene-inner,
  .scene-bedroom .scene-inner,
  .scene-yu .scene-inner,
  .scene-living .scene-inner,
  .scene-master .scene-inner {
    min-height: 100%;
  }

  .scene-bookshelf .scene-image,
  .scene-bedroom .scene-image,
  .scene-yu .scene-image,
  .scene-living .scene-image,
  .scene-master .scene-image {
    height: 100%;
  }

  .scene-bookshelf .scene-content,
  .scene-bedroom .scene-content,
  .scene-yu .scene-content,
  .scene-living .scene-content,
  .scene-master .scene-content {
    padding: 0 80px;
  }

  .scene-bedroom {
    height: 1148px;
    background: #fff;
    color: #111;
  }

  .scene-bedroom .scene-inner {
    grid-template-columns: 1fr;
  }

  .scene-bedroom .scene-image {
    width: 867px;
    height: 530px;
    margin: 280px auto 0;
  }

  .scene-bedroom .scene-image img {
    height: 530px;
    object-fit: contain;
  }

  .scene-bedroom .scene-content {
    text-align: center;
    padding: 28px 0 0;
  }

  .scene-bedroom .scene-label,
  .scene-bedroom .scene-title,
  .scene-bedroom .scene-desc {
    color: #222;
  }

  .scene-cabinet {
    height: 849px;
    padding: 0;
    background: linear-gradient(to bottom, #000 0 847px, #fff 847px 100%);
  }

  .scene-cabinet .scene-inner {
    min-height: 849px;
    display: block;
  }

  .scene-cabinet .scene-image {
    position: absolute;
    inset: 0;
    height: 847px;
  }

  .scene-cabinet .scene-image img {
    width: 100%;
    height: 847px;
    object-fit: cover;
  }

  .scene-cabinet .scene-content {
    position: absolute;
    left: 260px;
    top: 206px;
    width: 590px;
    padding: 0;
  }

  .scene-yu {
    height: 741px;
    margin-top: 15px;
    background: linear-gradient(to bottom, #fff 0 28px, #000 28px 100%);
  }

  .scene-yu .scene-inner {
    display: block;
    min-height: 741px;
  }

  .scene-yu .scene-image {
    position: absolute;
    left: 0;
    top: 28px;
    width: 1343px;
    height: 712px;
  }

  .scene-yu .scene-image img {
    width: 1343px;
    height: 712px;
    object-fit: cover;
  }

  .scene-yu .scene-content {
    position: absolute;
    right: 102px;
    top: 274px;
    width: 500px;
    padding: 0;
  }

  .scene-living {
    height: 742px;
    margin-top: 15px;
  }

  .scene-living .scene-inner {
    display: block;
    min-height: 742px;
  }

  .scene-living .scene-image {
    position: absolute;
    inset: 0;
    height: auto;
  }

  .scene-living .scene-image img,
  .scene-master .scene-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .scene-living .scene-content {
    position: absolute;
    left: 260px;
    top: 170px;
    width: 520px;
    padding: 0;
  }

  .hearts-intro {
    height: 416px;
    background: #fff;
    display: flex;
    align-items: center;
  }

  .hearts-intro .section-title {
    margin-bottom: 70px;
  }

  .hearts-intro-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    text-align: center;
  }

  .hearts-intro-tabs strong {
    display: block;
    color: #222;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
  }

  .hearts-intro-tabs span {
    display: block;
    color: #777;
    font-size: 15px;
  }

  .five-hearts {
    height: 601px;
    padding: 0;
    display: block;
  }

  .five-hearts .section-title,
  .five-hearts .hearts-tabs {
    display: none;
  }

  .hearts-tab-name {
    font-size: 20px;
  }

  .hearts-content {
    grid-template-columns: 230px 1430px;
    gap: 0;
    width: 1660px;
    max-width: none;
    margin-left: 0;
    padding: 0;
    height: 601px;
    align-items: center;
  }

  .hearts-text {
    min-height: 0;
    height: 600px;
    padding: 50px 34px 50px 92px;
    background: linear-gradient(90deg, #553421 0 70px, #050505 70px 100%);
  }

  .hearts-image img {
    width: 1430px;
    height: 600px;
    object-fit: cover;
  }

  .news {
    height: 1319px;
    padding: 0;
    position: relative;
    display: block;
  }

  .news .container {
    position: relative;
    width: 1920px;
    max-width: none;
    height: 100%;
    padding: 0;
  }

  .news-header {
    justify-content: center;
    position: absolute;
    top: 265px;
    left: 0;
    right: 0;
    margin-bottom: 0;
    text-align: center;
  }

  .news .section-title-left {
    text-align: center;
  }

  .news-controls {
    position: absolute;
    left: 260px;
    top: 760px;
    z-index: 3;
  }

  .news-slider {
    position: absolute;
    left: 0;
    top: 441px;
    width: 1920px;
    height: 578px;
    overflow: hidden;
  }

  .news-track {
    position: relative;
    display: block;
    width: 1920px;
    height: 578px;
    transform: none !important;
  }

  .news-card {
    position: absolute;
    top: 0;
    flex-basis: auto;
    height: 700px;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .news-card:nth-child(1) {
    left: 260px;
    width: 1129px;
    height: 578px;
  }

  .news-card:nth-child(2) {
    left: 1470px;
    width: 450px;
    height: 578px;
  }

  .news-card:nth-child(3) {
    left: 0;
    width: 184px;
    height: 578px;
  }

  .news-card img {
    height: 100%;
    object-fit: cover;
  }

  .news-card:nth-child(1) img {
    filter: brightness(0.85);
  }

  .news-card:nth-child(3) .news-date,
  .news-card:nth-child(3) .news-card-content {
    display: none;
  }

  .news-track {
    gap: 64px;
  }

  .footer {
    min-height: 518px;
    padding: 80px 0 0;
  }

  .footer-inner {
    grid-template-columns: 0.8fr 2fr;
  }

  .footer-links {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 768px) {
  .five-hearts .section-title {
    display: none;
  }

  .hearts-intro {
    padding: 72px 0 48px;
    background: #fff;
  }

  .hearts-intro .container {
    width: 100%;
    max-width: none;
  }

  .hearts-intro .section-title {
    margin-bottom: 44px;
  }

  .hearts-intro .section-title-en {
    font-family: "Montserrat KLF", Arial, sans-serif;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
    margin-bottom: 4px;
  }

  .hearts-intro .section-title-cn {
    font-size: 34px;
    line-height: 42px;
    font-weight: 600;
  }

  .hearts-intro-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(64px, 1fr));
    gap: 0;
    width: 100%;
    overflow: visible;
  }

  .hearts-intro-tab {
    position: relative;
    min-width: 0;
    height: 84px;
    padding: 0 2px 22px;
    cursor: pointer;
    text-align: center;
  }

  .hearts-intro-tab strong {
    display: block;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
  }

  .hearts-intro-tab span {
    display: block;
    font-size: 12px;
    line-height: 18px;
    color: #777;
  }

  .hearts-intro-tab.active strong {
    color: #b88e67;
  }

  .hearts-intro-tab.active::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 7px;
    width: 40px;
    height: 1px;
    background: #c4a27f;
    transform: translateX(-50%);
  }

  .hearts-intro-tab.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #c4a27f;
    transform: translateX(-50%);
  }

  .five-hearts .hearts-tabs {
    display: none;
  }

  .hero {
    height: min(82vh, 760px);
    min-height: 620px;
  }

  .product-series,
  .scene-section-light,
  .five-hearts,
  .news,
  .footer {
    height: auto;
  }

  .product-card:nth-child(n) {
    transform: none;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .home-page .nav-submenu {
    position: absolute;
    top: 78px;
    left: 50%;
    z-index: 1001;
    min-width: 132px;
    padding: 8px 0;
    background: rgba(15, 15, 15, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
    backdrop-filter: blur(12px);
  }

  .home-page .nav-submenu::before {
    display: block;
    top: -18px;
    height: 18px;
  }

  .home-page .nav-item:hover .nav-submenu,
  .home-page .nav-item:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .home-page .nav-submenu-link {
    min-height: 0;
    padding: 9px 18px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-slide.active img,
  .scene-image img,
  .product-image img,
  .product-card img,
  .news-card img {
    transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease;
  }

  .hero:hover .hero-slide.active img,
  .scene-section:hover .scene-image img,
  .product-image:hover img,
  .product-card:hover img,
  .news-card:hover img {
    transform: scale(1.025);
  }
}

html:not(.motion-basic) .reveal {
  opacity: 1;
  transform: none;
}

.logo-image,
.logo-emblem,
.bookshelf-preview,
.news-more {
  display: none;
}

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

.hearts-title-sub,
.hearts-kicker,
.hearts-divider,
.hearts-slogan,
.hearts-detail-en {
  display: none;
}

/* 五心护航「了解更多」链接 + 板块锚点偏移 */
.hearts-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  color: #c9a77c;
  font-size: 15px;
  letter-spacing: 1px;
  transition: color .3s ease, gap .3s ease;
}

.hearts-more:hover {
  color: #e8c9a4;
  gap: 12px;
}

.heart-section {
  scroll-margin-top: 110px;
}

/* Development history page */
.history-page {
  background: #000;
  color: #fff;
  overflow-x: hidden;
}

.history-hero {
  position: relative;
  min-height: 520px;
  overflow: hidden;
}

.history-hero-bg,
.history-hero-overlay {
  position: absolute;
  inset: 0;
}

.history-hero-bg {
  background: url("../images/history/hero-bg.png") center top / cover no-repeat;
}

.history-hero-overlay {
  background: rgba(0, 0, 0, 0.68);
}

.history-hero-content {
  position: relative;
  z-index: 1;
  width: min(980px, calc(100% - 40px));
  margin: 0 auto;
  padding-top: 205px;
  text-align: center;
}

.history-hero-title {
  font-size: 36px;
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: 1px;
  margin-bottom: 24px;
}

.history-hero-subtitle {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
}

.history-intro {
  background: #fff;
  color: #111;
  padding: 90px 20px 130px;
}

.history-heading {
  text-align: center;
}

.history-heading p {
  color: #bababa;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
}

.history-heading h2 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

.history-timeline {
  background: #000;
}

.history-event {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  min-height: 620px;
  /* 桌面边距由下方 769px 媒体查询统一为 259px（对齐校准区固定坐标）；
     此处 40px 仅为窄屏兜底。不可用 100vw：zoom 缩放架构下 100vw 读取的是
     硬件视口而非 1920 等效坐标，会导致恢复区与校准区左右错位 */
  padding: 80px 40px;
  overflow: hidden;
}

.history-event-warm {
  background: #1f1b16;
}

.history-event-media {
  position: relative;
  width: min(698px, 100%);
  height: 540px;
  overflow: visible;
  justify-self: start;
}

.history-event-right .history-event-media {
  justify-self: end;
}

.history-event-media img {
  position: absolute;
  top: 0;
  /* 照片源图已统一为 555x390：铺满媒体框后用 cover 等比裁剪，
     保证所有年份无拉伸变形、无左右溢出，追加年份也无需再逐个精调 */
  left: 0;
  width: 100%;
  height: 540px;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.history-event-copy {
  width: min(520px, 100%);
  justify-self: center;
  color: #d8b48d;
}

.history-event-right .history-event-copy {
  justify-self: start;
}

.history-event-copy p {
  font-size: 18px;
  line-height: 18px;
  letter-spacing: 0;
  margin-bottom: 17px;
  color: rgba(216, 180, 141, 0.92);
  text-transform: uppercase;
}

.history-event-copy h3 {
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 36px;
  color: #fff;
}

.history-event-text {
  width: 460px;
  font-size: 25px;
  font-weight: 400;
  line-height: 48px;
  color: #d8b48d;
}

.history-corner,
.history-bar {
  position: absolute;
  z-index: 2;
  display: block;
  background: #d2a77e;
}

.history-corner::before,
.history-corner::after {
  content: "";
  position: absolute;
  background: #d2a77e;
}

.history-corner-tl {
  left: -20px;
  top: -20px;
  width: 140px;
  height: 20px;
}

.history-corner-tl::before {
  left: 0;
  top: 0;
  width: 20px;
  height: 142px;
}

.history-corner-tr {
  right: -20px;
  top: -20px;
  width: 140px;
  height: 20px;
}

.history-corner-tr::before {
  right: 0;
  top: 0;
  width: 20px;
  height: 142px;
}

.history-bar-br {
  right: -20px;
  bottom: 0;
  width: 242px;
  height: 22px;
}

.history-bar-bl {
  left: -20px;
  bottom: 0;
  width: 242px;
  height: 22px;
}

@media (min-width: 769px) {
  .history-hero {
    height: 701px;
    min-height: 701px;
  }

  .history-hero-overlay {
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(0, 0, 0, 0.77) 12.5%,
      rgba(0, 0, 0, 0.64) 25%,
      rgba(0, 0, 0, 0.52) 37.5%,
      rgba(0, 0, 0, 0.52) 50%,
      rgba(0, 0, 0, 0.62) 62.5%,
      rgba(0, 0, 0, 0.75) 75%,
      rgba(0, 0, 0, 0.81) 87.5%,
      rgba(0, 0, 0, 0.82) 100%
    );
  }

  .history-hero-content {
    padding-top: 274px;
  }

  .history-hero-title {
    margin-bottom: 24px;
    font-size: 72px;
    letter-spacing: 0;
  }

  .history-hero-subtitle {
    font-size: 26px;
  }

  .history-intro {
    height: 551px;
    padding: 145px 0 0;
  }

  .history-heading p {
    font-size: 30px;
  }

  .history-heading h2 {
    font-size: 34px;
  }

  .history-event {
    display: block;
    min-height: 0;
    padding: 0;
    overflow: visible;
  }

  .history-event:nth-child(1) { height: 557px; }
  .history-event:nth-child(2) { height: 843px; }
  .history-event:nth-child(3) { height: 837px; }
  .history-event:nth-child(4) { height: 842px; }
  .history-event:nth-child(5) { height: 838px; }
  .history-event:nth-child(6) { height: 842px; }

  .history-event-media,
  .history-event-copy {
    position: absolute;
  }

  .history-event-copy {
    justify-self: auto;
  }

  .history-event:nth-child(1) .history-event-media {
    left: 259px;
    top: -143px;
  }

  .history-event:nth-child(1) .history-event-copy {
    left: 1059px;
    top: 55px;
  }

  .history-event:nth-child(2) .history-event-media,
  .history-event:nth-child(4) .history-event-media,
  .history-event:nth-child(6) .history-event-media {
    left: 963px;
    top: 160px;
  }

  .history-event:nth-child(2) .history-event-copy {
    left: 259px;
    top: 319px;
  }

  .history-event:nth-child(3) .history-event-media,
  .history-event:nth-child(5) .history-event-media {
    left: 259px;
    top: 157px;
  }

  .history-event:nth-child(3) .history-event-copy {
    left: 1059px;
    top: 316px;
  }

  .history-event:nth-child(4) .history-event-copy {
    left: 259px;
    top: 319px;
  }

  .history-event:nth-child(5) .history-event-copy {
    left: 1059px;
    top: 317px;
  }

  .history-event:nth-child(6) .history-event-copy {
    left: 259px;
    top: 295px;
  }

  .history-event:nth-child(5) .history-event-media {
    top: 158px;
  }

  .history-event:nth-child(5) .history-event-text {
    width: 600px;
  }

  .history-page + .footer,
  .history-page + .footer .container {
    height: 515px;
  }

  .history-page + .footer {
    padding: 0;
    overflow: hidden;
    background: #272727;
  }

  .history-page + .footer .container {
    position: relative;
    width: 1402px;
  }

  .history-page + .footer .footer-inner {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .history-page + .footer .footer-inner::after {
    content: "";
    position: absolute;
    top: 439px;
    left: 0;
    width: 1402px;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
  }

  .history-page + .footer .footer-brand {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    height: 162px;
    padding: 36px 75px 0;
    overflow: visible;
  }

  .history-page + .footer .footer-logo {
    width: 201px;
    margin-bottom: 25px;
  }

  .history-page + .footer .footer-phone {
    position: absolute;
    top: 211px;
    left: 0;
    margin-bottom: 8px;
    color: #fff;
    font-size: 23px;
    line-height: 1;
  }

  .history-page + .footer .footer-phone-label {
    position: absolute;
    top: 245px;
    left: 0;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.8);
  }

  .history-page + .footer .footer-social {
    position: absolute;
    top: 302px;
    left: 0;
    gap: 14px;
  }

  .history-page + .footer .footer-social a {
    flex: 0 0 52px;
    width: 52px;
    height: 50px;
    border: 0;
  }

  .history-page + .footer .footer-social-icon {
    width: auto;
    height: auto;
    max-width: 48px;
    max-height: 38px;
    object-fit: contain;
    transform: translateY(-1px);
  }

  .history-page + .footer .footer-links {
    position: absolute;
    top: 67px;
    left: 555px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 35px;
    width: 847px;
  }

  .history-page + .footer .footer-column h4 {
    margin-bottom: 20px;
  }

  .history-page + .footer .footer-column li {
    height: 25.6px;
    margin-bottom: 11px;
  }

  .history-page + .footer .footer-bottom {
    position: absolute;
    right: 0;
    bottom: 36px;
    left: 0;
    padding: 0;
  }

  /* 校准块只为前 6 个事件写了固定高度与坐标（原设计即 6 条）。
     后续追加的事件恢复基础网格布局，避免容器塌陷、内容堆叠。
     事件锁定 1920px 设计宽 + 259px 边距，与前 6 个事件的绝对坐标
     （media 259/963、copy 1059）在同一坐标系下严格对齐：
     不能跟随可用视口宽——zoom 缩放下滚动条会吃掉约 20px，
     用 100% 或 100vw 分列都会导致恢复区比校准区整体偏窄。 */
  .history-event:nth-child(n + 7) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    min-height: 620px;
    width: 1920px;
    box-sizing: border-box;
    padding: 80px 259px;
    overflow: hidden;
  }

  .history-event:nth-child(n + 7) .history-event-media {
    position: relative;
  }

  .history-event:nth-child(n + 7) .history-event-copy {
    position: static;
    /* 校准块的 justify-self:auto 会波及恢复区导致文字贴住照片，这里恢复栏内居中 */
    justify-self: center;
  }

  .history-event:nth-child(n + 7).history-event-right .history-event-copy {
    /* 右图事件文字钉左缘 259，与校准区 nth-child(2/4/6) 的 copy:left:259 一致 */
    justify-self: start;
  }
}

@media (max-width: 768px) {
  .history-hero {
    min-height: 470px;
  }

  .history-hero-bg {
    background-size: auto 650px;
    background-position: center top;
  }

  .history-hero-content {
    padding-top: 178px;
  }

  .history-hero-title {
    font-size: 34px;
  }

  .history-hero-subtitle {
    font-size: 15px;
  }

  .history-intro {
    padding: 76px 20px 84px;
  }

  .history-heading p {
    font-size: 18px;
  }

  .history-heading h2 {
    font-size: 24px;
  }

  .history-event {
    grid-template-columns: 1fr;
    gap: 36px;
    min-height: 0;
    padding: 64px 20px;
  }

  .history-event-right .history-event-copy {
    order: 2;
  }

  .history-event-right .history-event-media {
    order: 1;
  }

  .history-event-media,
  .history-event-right .history-event-media {
    width: 100%;
    height: auto;
    aspect-ratio: 698 / 542;
    overflow: hidden;
    justify-self: center;
  }

  .history-event-media img {
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    clip-path: none;
  }

    .history-event-copy,
  .history-event-right .history-event-copy {
    width: 100%;
    justify-self: center;
  }

  .history-event-copy p {
    font-size: 11px;
    margin-bottom: 14px;
  }

  .history-event-copy h3 {
    font-size: 36px;
    margin-bottom: 22px;
  }

  .history-event-text {
    width: 100%;
    font-size: 16px;
    line-height: 1.7;
  }

  .history-corner-tl,
  .history-corner-tr {
    width: 76px;
  }

  .history-bar-br,
  .history-bar-bl {
    width: 130px;
  }
}

/* Contact page */
.contact-page {
  background: #fff;
  color: #111;
  overflow-x: clip;
}

.contact-hero {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  color: #fff;
}

.contact-hero-bg,
.contact-hero-overlay {
  position: absolute;
  inset: 0;
}

.contact-hero-bg {
  background: url("../images/contact/hero-bg.png") center top / cover no-repeat;
}

.contact-hero-overlay {
  background: rgba(0, 0, 0, 0.68);
}

.contact-hero-content {
  position: relative;
  z-index: 1;
  width: min(900px, calc(100% - 40px));
  margin: 0 auto;
  padding-top: 205px;
  text-align: center;
}

.contact-hero-title {
  font-size: 36px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 4px;
  margin-bottom: 24px;
}

.contact-hero-subtitle {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
}

.contact-main {
  position: relative;
  min-height: 620px;
  background: #fff;
  overflow: hidden;
}

.contact-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.contact-map iframe {
  position: absolute;
  top: -154px;
  left: 0;
  display: block;
  border: 0;
  width: 100%;
  height: calc(100% + 154px);
}

.contact-info {
  position: relative;
  z-index: 1;
  width: min(1001px, 100%);
  min-height: 620px;
  background: #fff;
  padding: 92px 80px 70px max(40px, calc((100vw - 1402px) / 2));
}

.contact-heading {
  margin-bottom: 62px;
}

.contact-heading h2 {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 24px;
}

.contact-heading span {
  display: block;
  width: 55px;
  height: 3px;
  background: #d2a77e;
}

.contact-address,
.contact-method {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 18px;
}

.contact-icon {
  width: 28px;
  height: 28px;
  color: #d2b18d;
}

.contact-icon svg {
  width: 100%;
  height: 100%;
}

.contact-label {
  color: #bba997;
  font-size: 18px;
  line-height: 1.2;
  margin-bottom: 17px;
}

.contact-text {
  display: block;
  color: #111;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.8;
}

.contact-method .contact-text {
  white-space: nowrap;
}

.contact-divider {
  width: 643px;
  max-width: 100%;
  height: 1px;
  background: #e8e4df;
  margin: 58px 0 40px;
}

.contact-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  width: 643px;
  max-width: 100%;
}

.contact-method + .contact-method {
  border-left: 1px solid #e8e4df;
  padding-left: 52px;
}

.contact-qrcode-band {
  background: #fff;
  color: #1a1a1a;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  min-height: 300px;
  padding: 56px max(40px, calc((100vw - 1402px) / 2)) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.contact-qrcode {
  text-align: center;
  transition: background-color 0.25s ease, margin-top 0.25s ease;
}

.contact-qrcode img {
  width: 121px;
  height: 120px;
  margin: 0 auto 18px;
  transition: transform 0.25s ease;
}

.contact-qrcode p {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: #222;
}

@media (hover: hover) {
  .contact-qrcode:hover,
  .contact-qrcode:focus-within {
    transform: translateY(-4px);
  }

  .contact-qrcode:hover img,
  .contact-qrcode:focus-within img {
    transform: scale(1.04);
  }
}

@media (min-width: 769px) {
  .contact-hero {
    height: 701px;
    min-height: 701px;
  }

  .contact-hero-content {
    padding-top: 287px;
  }

  .contact-hero-title {
    font-size: 54px;
    margin-bottom: 24px;
  }

  .contact-hero-subtitle {
    font-size: 22px;
  }

  .contact-main {
    height: 659px;
    min-height: 659px;
  }

  .contact-info {
    width: 1001px;
    height: 659px;
    min-height: 659px;
    padding: 137px 80px 0 258px;
  }

  .contact-map {
    height: 660px;
  }

  .contact-heading {
    margin-bottom: 61px;
  }

  .contact-heading h2 {
    font-size: 44px;
  }

  .contact-qrcode-band {
    height: 300px;
    min-height: 300px;
    padding: 56px 258px 0;
    grid-template-columns: 223px 1fr 1fr 1fr;
    column-gap: 186px;
  }

  .contact-page + .footer {
    height: 517px;
    padding: 0;
  }

  .contact-page + .footer .container {
    height: 517px;
  }
}

@media (max-width: 768px) {
  .contact-hero {
    min-height: 470px;
  }

  .contact-hero-bg {
    background-size: auto 650px;
    background-position: center top;
  }

  .contact-hero-content {
    padding-top: 180px;
  }

  .contact-hero-title {
    font-size: 36px;
    letter-spacing: 2px;
  }

  .contact-hero-subtitle {
    font-size: 15px;
  }

  .contact-main {
    display: flex;
    flex-direction: column;
  }

  .contact-map {
    position: relative;
    order: 2;
    height: 360px;
  }

  .contact-map iframe {
    width: 100%;
  }

  .contact-info {
    order: 1;
    min-height: 0;
    padding: 68px 22px 56px;
  }

  .contact-heading {
    margin-bottom: 44px;
  }

  .contact-heading h2 {
    font-size: 32px;
  }

  .contact-address,
  .contact-method {
    grid-template-columns: 30px 1fr;
    gap: 14px;
  }

  .contact-label {
    font-size: 15px;
    margin-bottom: 10px;
  }

  .contact-text {
    font-size: 14px;
    line-height: 1.8;
  }

  .contact-divider {
    margin: 38px 0 32px;
  }

  .contact-methods {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .contact-method + .contact-method {
    border-left: 0;
    padding-left: 0;
  }

  .contact-qrcode-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 20px;
    min-height: 0;
    padding: 54px 20px;
  }

  .contact-qrcode img {
    width: 100px;
    height: 100px;
  }

  .contact-qrcode p {
    font-size: 18px;
  }
}

/* Stores page */
.stores-page {
  background: #fff;
  color: #111;
  overflow-x: hidden;
}

.stores-hero {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  color: #fff;
}

.stores-hero-bg,
.stores-hero-overlay {
  position: absolute;
  inset: 0;
}

.stores-hero-bg {
  background: url("../images/stores/hero-bg.png") center top / cover no-repeat;
}

.stores-hero-overlay {
  background: rgba(0, 0, 0, 0.68);
}

.stores-hero-content {
  position: relative;
  z-index: 1;
  width: min(980px, calc(100% - 40px));
  margin: 0 auto;
  padding-top: 205px;
  text-align: center;
}

.stores-hero-title {
  font-size: 36px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 4px;
  margin-bottom: 24px;
}

.stores-hero-subtitle {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
}

.store-finder {
  background: #fff;
}

.store-finder-inner,
.store-locator-inner {
  width: min(1402px, calc(100% - 80px));
  margin: 0 auto;
}

.store-finder-eyebrow {
  color: #9e9e9e;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  margin-bottom: 17px;
}

.store-finder h2 {
  color: #111;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
}

.store-search {
  display: grid;
  grid-template-columns: 538px 538px 264px;
  gap: 35px 27px;
  margin-top: 67px;
}

.store-search label,
.store-search input,
.store-search button {
  display: block;
  width: 100%;
  height: 87px;
}

.store-search input {
  border: 1px solid #e2e2e2;
  border-radius: 0;
  padding: 0 39px;
  color: #111;
  font-family: inherit;
  font-size: 18px;
  outline: none;
  transition: border-color 0.25s ease;
}

.store-search input:focus {
  border-color: #cda57f;
}

.store-search input::placeholder {
  color: #9b9b9b;
}

.store-search button {
  background: #cda57f;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  transition: background 0.25s ease;
}

.store-search button:hover {
  background: #ba926d;
}

.store-locator {
  background: #fff;
}

.store-locator-inner {
  display: grid;
  grid-template-columns: 802px 551px;
  gap: 49px;
}

.store-map {
  position: relative;
  height: 974px;
  overflow: hidden;
  background: #edf3f8;
}

.store-map iframe {
  position: absolute;
  left: 50%;
  top: -154px;
  display: block;
  width: 1600px;
  height: calc(100% + 154px);
  border: 0;
  transform: translateX(-50%);
}

.store-results {
  display: flex;
  flex-direction: column;
}

.store-card {
  height: 200px;
  border: 1px solid #e7e7e7;
  background: #fff;
  padding: 37px 34px 28px;
  cursor: pointer;
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
}

.store-card:hover,
.store-card:focus-visible {
  border-color: #cda57f;
  box-shadow: 0 16px 34px rgba(17, 17, 17, 0.08);
  outline: none;
  transform: translateY(-2px);
}

.store-card + .store-card {
  margin-top: 27px;
}

.store-card h3 {
  color: #111;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 29px;
}

.store-card p {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #c3c3c3;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}

.store-card p + p {
  margin-top: 20px;
}

.store-card svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.store-card-active {
  border-color: #cda57f;
  background: #cda57f;
}

.store-card-active h3,
.store-card-active p {
  color: #fff;
}

.store-card-active p {
  opacity: 0.72;
}

.store-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 35px;
}

.store-pagination button,
.store-pagination a,
.store-pagination-ellipsis {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
  color: #b2b2b2;
  font-size: 22px;
  font-weight: 400;
  text-decoration: none;
}

.store-pagination-ellipsis {
  background: transparent;
}

.store-pagination button.active,
.store-pagination a.active {
  background: #cda57f;
  color: #fff;
}

.store-pagination svg {
  width: 13px;
  height: 20px;
}

@media (min-width: 769px) {
  .stores-hero {
    height: 701px;
    min-height: 701px;
  }

  .stores-hero-content {
    padding-top: 287px;
  }

  .stores-hero-title {
    font-size: 54px;
    margin-bottom: 24px;
  }

  .stores-hero-subtitle {
    font-size: 22px;
  }

  .store-finder {
    height: 466px;
  }

  .store-finder-inner {
    padding-top: 156px;
  }

  .store-locator {
    height: 1060px;
  }

  .store-locator-inner {
    padding-top: 23px;
  }

  .stores-page + .footer,
  .contact-page + .footer {
    height: 517px;
    padding: 0;
    overflow: hidden;
    background: #272727;
  }

  .stores-page + .footer .container,
  .contact-page + .footer .container {
    position: relative;
    width: 1402px;
    height: 517px;
  }

  .stores-page + .footer .footer-inner,
  .contact-page + .footer .footer-inner {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .stores-page + .footer .footer-inner::after,
  .contact-page + .footer .footer-inner::after {
    content: "";
    position: absolute;
    top: 439px;
    left: 0;
    width: 1402px;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
  }

  .stores-page + .footer .footer-brand,
  .contact-page + .footer .footer-brand {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    height: 162px;
    padding: 36px 75px 0;
    overflow: visible;
  }

  .stores-page + .footer .footer-logo,
  .contact-page + .footer .footer-logo {
    width: 201px;
    margin-bottom: 25px;
  }

  .stores-page + .footer .footer-phone,
  .contact-page + .footer .footer-phone {
    position: absolute;
    top: 211px;
    left: 0;
    margin-bottom: 8px;
    color: #fff;
    font-size: 23px;
    line-height: 1;
  }

  .stores-page + .footer .footer-phone-label,
  .contact-page + .footer .footer-phone-label {
    position: absolute;
    top: 245px;
    left: 0;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.8);
  }

  .stores-page + .footer .footer-social,
  .contact-page + .footer .footer-social {
    position: absolute;
    top: 302px;
    left: 0;
    gap: 14px;
  }

  .stores-page + .footer .footer-social a,
  .contact-page + .footer .footer-social a {
    flex: 0 0 52px;
    width: 52px;
    height: 50px;
    border: 0;
  }

  .stores-page + .footer .footer-social-icon,
  .contact-page + .footer .footer-social-icon {
    width: auto;
    height: auto;
    max-width: 48px;
    max-height: 38px;
    object-fit: contain;
    transform: translateY(-1px);
  }

  .stores-page + .footer .footer-links,
  .contact-page + .footer .footer-links {
    position: absolute;
    top: 67px;
    left: 555px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 35px;
    width: 847px;
  }

  .stores-page + .footer .footer-column h4,
  .contact-page + .footer .footer-column h4 {
    margin-bottom: 20px;
  }

  .stores-page + .footer .footer-column li,
  .contact-page + .footer .footer-column li {
    height: 25.6px;
    margin-bottom: 11px;
  }

  .stores-page + .footer .footer-bottom,
  .contact-page + .footer .footer-bottom {
    position: absolute;
    right: 0;
    bottom: 36px;
    left: 0;
    padding: 0;
  }
}

@media (max-width: 768px) {
  .stores-hero {
    min-height: 470px;
  }

  .stores-hero-bg {
    background-size: auto 650px;
    background-position: center top;
  }

  .stores-hero-content {
    padding-top: 180px;
  }

  .stores-hero-title {
    font-size: 34px;
    letter-spacing: 2px;
  }

  .stores-hero-subtitle {
    font-size: 15px;
  }

  .store-finder-inner,
  .store-locator-inner {
    width: calc(100% - 40px);
  }

  .store-finder-inner {
    padding: 70px 0 58px;
  }

  .store-finder-eyebrow {
    font-size: 22px;
    line-height: 1.25;
  }

  .store-finder h2 {
    font-size: 28px;
  }

  .store-search {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 34px;
  }

  .store-search label,
  .store-search input,
  .store-search button {
    height: 58px;
  }

  .store-search input {
    padding: 0 20px;
    font-size: 15px;
  }

  .store-search button {
    font-size: 17px;
  }

  .store-locator {
    padding-bottom: 70px;
  }

  .store-locator-inner {
    display: block;
  }

  .store-map {
    height: 420px;
    margin-bottom: 24px;
  }

  .store-card {
    height: auto;
    min-height: 156px;
    padding: 28px 22px 24px;
  }

  .store-card + .store-card {
    margin-top: 16px;
  }

  .store-card h3 {
    font-size: 21px;
    margin-bottom: 20px;
  }

  .store-card p {
    align-items: flex-start;
    white-space: normal;
    font-size: 13px;
    line-height: 1.55;
  }

  .store-card p + p {
    margin-top: 12px;
  }

  .store-pagination {
    justify-content: center;
    margin-top: 24px;
  }

  .store-pagination button,
  .store-pagination a {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
}

@media (min-width: 769px) {
  .logo {
    align-items: center;
    gap: 30px;
    width: 205px;
    height: 44px;
  }

  .logo-image {
    display: block;
    width: 160px;
    height: 52px;
    object-fit: contain;
  }

  .logo-emblem {
    display: block;
    width: 41px;
    height: 42px;
    object-fit: contain;
  }

  .logo-image {
    opacity: 0.9;
  }

  .logo-mark,
  .logo-text {
    display: none;
  }

  .footer-logo {
    width: 201px;
  }

  }
}

@media (min-width: 1201px) {
  .logo {
    align-items: center;
    gap: 30px;
    width: 205px;
    height: 44px;
  }

  .logo-image {
    display: block;
    width: 160px;
    height: 52px;
    object-fit: contain;
    opacity: 0.9;
  }

  .logo-emblem {
    display: block;
    width: 41px;
    height: 42px;
    object-fit: contain;
  }

  .logo-mark,
  .logo-text {
    display: none;
  }

  .footer-logo {
    width: 201px;
  }

}

@media (min-width: 769px) {
  .nav {
    gap: 42px;
    position: relative;
    left: 0;
  }

  .nav-link {
    font-size: 20px;
  }

  .header-actions {
    flex: 0 0 414px;
  }

  .header-actions .btn-gold {
    min-width: 136px;
    height: 42px;
  }

  .hero-overlay {
    background: rgba(0, 0, 0, 0.24);
  }

  .hero-dots {
    bottom: 214px;
    gap: 15px;
  }

  .hero-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.34);
  }

  .hero-dot.active {
    background: rgba(255, 255, 255, 0.9);
  }

  .hero-arrow {
    top: 453px;
    width: 56px;
    height: 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
  }

  .hero-arrow svg {
    width: 52px;
    height: 24px;
    stroke-width: 1.4;
  }

  .hero-arrow.prev {
    left: 258px;
  }

  .hero-arrow.next {
    right: 258px;
  }

  .product-feature {
    margin-top: 87px;
    margin-bottom: 49px;
  }

  .product-series {
    position: relative;
    z-index: 3;
    overflow: visible;
    padding-top: 171px;
  }

  .product-series .section-title-en {
    font-family: "Montserrat KLF", Arial, sans-serif;
    font-size: 36px;
    line-height: 46px;
    letter-spacing: 1.65px;
    font-weight: 600;
    margin-bottom: 2px;
    color: #9d9d9e;
  }

  .product-series .section-title-cn {
    font-family: var(--font-product);
    font-size: 46px;
    line-height: 1.2;
    font-weight: 700;
  }

  .product-card:nth-child(1) {
    transform: translateY(173px);
  }

  .product-card:nth-child(2) {
    transform: translateY(232px);
  }

  .product-card:nth-child(3) {
    transform: translateY(97px);
  }

  .product-info {
    padding-top: 48px;
    font-family: var(--font-product);
  }

  .product-label {
    font-size: 26px;
    line-height: 31px;
    font-weight: 500;
    color: #c8a07c;
    margin-bottom: 5px;
  }

  .product-name {
    font-size: 50px;
    line-height: 60px;
    font-weight: 500;
    margin-bottom: 31px;
  }

  .product-desc {
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
    color: #808080;
  }

  .product-cards {
    position: relative;
    z-index: 4;
  }

  .scene-yue::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 900px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0 35%, rgba(0, 0, 0, 0.07) 40%, rgba(0, 0, 0, 0.18) 42%, rgba(0, 0, 0, 0.67) 50%, rgba(0, 0, 0, 0.92) 58%, rgba(0, 0, 0, 1) 68% 100%);
  }

  .scene-yue .scene-image {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0 70px, rgba(0, 0, 0, 0.08) 130px, rgba(0, 0, 0, 0.45) 260px, #000 400px);
    mask-image: linear-gradient(to bottom, transparent 0 70px, rgba(0, 0, 0, 0.08) 130px, rgba(0, 0, 0, 0.45) 260px, #000 400px);
  }

  .scene-bedroom .scene-inner {
    align-items: start;
  }

  .scene-bedroom .scene-content {
    position: absolute;
    top: 880px;
    left: 0;
    right: 0;
    padding: 0;
    text-align: center;
  }

  .scene-bedroom .scene-label {
    font-family: "Roboto Condensed KLF", Arial, sans-serif;
    font-size: 42px;
    line-height: 46px;
    letter-spacing: 1.7px;
    font-weight: 400;
    margin-bottom: 8px;
    color: #9d9d9e;
    text-transform: uppercase;
  }

  .scene-bedroom .scene-title {
    font-size: 32px;
    line-height: 38px;
    font-weight: 400;
    margin-bottom: 18px;
    color: #111;
  }

  .scene-bedroom .scene-desc {
    font-size: 20px;
    line-height: 24px;
    color: #222;
    white-space: nowrap;
  }

  .scene-yu-detail .scene-content {
    left: 260px;
    top: 175px;
    width: 590px;
  }

  .scene-yu-detail .scene-label {
    font-family: "Roboto Condensed KLF", Arial, sans-serif;
    font-size: 26px;
    line-height: 31px;
    letter-spacing: 0;
    font-weight: 400;
    color: #c9a27e;
    margin-bottom: 3px;
  }

  .scene-yu-detail .scene-title {
    font-size: 48px;
    line-height: 58px;
    font-weight: 400;
    margin-bottom: 31px;
  }

  .scene-yu-detail .scene-desc {
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.84);
    margin-bottom: 30px;
  }

  .scene-yu-detail .scene-desc:last-child {
    margin-bottom: 0;
  }

  .scene-yu .scene-content {
    top: 272px;
  }

  .scene-yu .scene-label {
    font-family: "Roboto Condensed KLF", Arial, sans-serif;
    font-size: 44px;
    line-height: 46px;
    letter-spacing: 0;
    font-weight: 400;
    color: #aaa;
    margin-bottom: 1px;
  }

  .scene-yu .scene-title {
    font-size: 38px;
    line-height: 40px;
    font-weight: 400;
    margin-bottom: 29px;
  }

  .scene-yu .scene-desc {
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.84);
  }

  .scene-yue .scene-content {
    top: 532px;
  }

  .scene-yue .scene-label {
    color: #c9a27e;
    font-size: 28px;
    line-height: 1.1;
  }

  .scene-yue .scene-title {
    font-size: 48px;
  }

  .scene-yue .scene-desc {
    font-size: 20px;
    line-height: 1.75;
  }

  .scene-bookshelf {
    overflow: visible;
    z-index: 2;
  }

  .scene-bookshelf .scene-inner {
    display: block;
    min-height: 850px;
  }

  .bookshelf-preview {
    display: block;
    position: absolute;
    left: 1248px;
    top: -69px;
    width: 412px;
    z-index: 3;
  }

  .bookshelf-preview img {
    display: block;
    width: 412px;
    height: 234px;
    object-fit: cover;
  }

  .bookshelf-preview p {
    margin-top: 18px;
    color: #fff;
    line-height: 1;
  }

  .bookshelf-preview strong {
    display: inline-block;
    font-size: 30px;
    font-weight: 600;
    margin-right: 18px;
  }

  .bookshelf-preview span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 20px;
    text-transform: uppercase;
  }

  .scene-bookshelf .scene-image {
    position: absolute;
    left: 260px;
    top: 366px;
    width: 886px;
    height: 589px;
    overflow: visible;
  }

  .scene-bookshelf .scene-image img {
    width: 886px;
    height: 589px;
    object-fit: cover;
  }

  .scene-bookshelf .scene-content {
    position: absolute;
    left: 1224px;
    top: 424px;
    width: 430px;
    padding: 0;
  }

  .scene-bookshelf .scene-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 43px;
    line-height: 1.1;
    margin-bottom: 4px;
  }

  .scene-bookshelf .scene-title {
    font-size: 32px;
    margin-bottom: 28px;
  }

  .scene-bookshelf .scene-desc {
    font-size: 18px;
    line-height: 2;
  }

  .scene-living .scene-image {
    left: 0;
    top: 30px;
    right: 0;
    bottom: 0;
    height: auto;
  }

  .scene-living::after {
    content: "";
    position: absolute;
    inset: 30px 0 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0 20%, rgba(0, 0, 0, 0.93) 28%, rgba(0, 0, 0, 0.9) 48%, rgba(0, 0, 0, 0.65) 58%, rgba(0, 0, 0, 0.33) 68%, rgba(0, 0, 0, 0.17) 76%, rgba(0, 0, 0, 0.03) 85%, rgba(0, 0, 0, 0) 100%);
  }

  .scene-living .scene-content {
    top: 266px;
    z-index: 2;
  }

  .scene-living .scene-label {
    color: #aaa;
    font-size: 42px;
    line-height: 1.1;
  }

  .scene-living .scene-title {
    font-size: 36px;
    margin-bottom: 18px;
  }

  .scene-living .scene-desc {
    font-size: 18px;
    line-height: 1.75;
  }

  .hearts-intro {
    position: relative;
    display: block;
  }

  .hearts-intro .container {
    position: relative;
    width: 1920px;
    height: 416px;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .hearts-intro .section-title {
    position: absolute;
    left: 0;
    top: 138px;
    width: 100%;
    margin: 0;
  }

  .hearts-intro .section-title-en {
    font-family: "Montserrat KLF", Arial, sans-serif;
    font-size: 36px;
    line-height: 46px;
    letter-spacing: 0;
    font-weight: 600;
    color: #9d9d9e;
    margin: 0 0 4px;
  }

  .hearts-intro .section-title-cn {
    font-size: 46px;
    line-height: 55px;
    font-weight: 400;
    color: #111;
  }

  .hearts-intro-tabs {
    position: absolute;
    left: 335px;
    top: 315px;
    width: 1250px;
    height: 81px;
    display: grid;
    grid-template-columns: repeat(5, 250px);
    overflow: visible;
  }

  .hearts-intro-tab {
    position: relative;
    width: 250px;
    height: 81px;
    padding: 0;
    cursor: pointer;
    text-align: center;
  }

  .hearts-intro-tab strong {
    display: block;
    font-size: 22px;
    line-height: 29px;
    font-weight: 400;
    color: #222;
    transform: translateY(-10px);
  }

  .hearts-intro-tab span {
    display: block;
    font-size: 16px;
    line-height: 26px;
    color: #777;
    transform: translateY(-10px);
  }

  .hearts-intro-tab.active::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 7px;
    width: 100px;
    height: 1px;
    background: #b9aa9c;
    transform: translateX(-50%);
  }

  .hearts-intro-tab.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #c4a27f;
    transform: translateX(-50%);
  }

  .hearts-intro-tab:hover strong,
  .hearts-intro-tab:focus-visible strong {
    color: #9f7957;
  }

  .hearts-content {
    display: block;
    position: relative;
    width: 1920px;
    height: 601px;
    margin: 0;
    padding: 0;
  }

  .five-hearts .container {
    width: 1920px;
    max-width: none;
    margin: 0;
  }

  .hearts-text {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 622px;
    height: 602px;
    padding: 84px 42px 60px 304px;
    background: linear-gradient(90deg, #482f21 0 259px, #000 259px 100%);
    justify-content: flex-start;
  }

  .hearts-title {
    color: #d2ad85;
    font-size: 36px;
    line-height: 1;
    margin-bottom: 10px;
  }

  .hearts-title-sub {
    display: block;
    color: #d2ad85;
    font-size: 18px;
    line-height: 1;
    margin-bottom: 24px;
  }

  .hearts-title-en {
    color: #d2ad85;
    font-size: 12px;
    letter-spacing: 8px;
    line-height: 1;
    margin-bottom: 74px;
  }

  .hearts-kicker {
    display: block;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    margin-bottom: 24px;
  }

  .hearts-divider {
    display: block;
    width: 57px;
    height: 5px;
    background: rgba(255, 255, 255, 0.38);
    margin-bottom: 36px;
  }

  .hearts-slogan {
    display: block;
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.26;
    margin-bottom: 20px;
  }

  .hearts-detail {
    display: none;
  }

  .hearts-detail-en {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
  }

  .hearts-image {
    position: absolute;
    left: 490px;
    top: 0;
    width: 1430px;
    height: 600px;
    border-radius: 0;
    overflow: hidden;
  }

  .hearts-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.42) 15%, rgba(0, 0, 0, 0.2) 38%, rgba(0, 0, 0, 0) 70%);
  }

  .hearts-image img {
    width: 1430px;
    height: 600px;
  }

  .news {
    background: linear-gradient(to bottom, #fff 0 156px, #050505 156px 100%);
  }

  .news-controls {
    left: 259px;
    top: 813px;
    gap: 56px;
  }

  .news .section-title-en {
    font-size: 36px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.42);
    margin-bottom: 8px;
  }

  .news .section-title-cn {
    font-size: 43px;
    font-weight: 400;
  }

  .news-arrow {
    position: relative;
    width: 100px;
    height: 100px;
  }

  .news-arrow svg {
    display: none;
  }

  .news-arrow::before,
  .news-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    background: currentColor;
  }

  .news-arrow::before {
    width: 50px;
  }

  .news-arrow::after {
    width: 14px;
  }

  .news-arrow:first-child::before,
  .news-arrow:first-child::after {
    left: 25px;
  }

  .news-arrow:first-child::after {
    transform-origin: left center;
    transform: rotate(-45deg);
  }

  .news-arrow:last-child::before,
  .news-arrow:last-child::after {
    right: 25px;
  }

  .news-arrow:last-child::after {
    transform-origin: right center;
    transform: rotate(45deg);
  }

  .news-arrow:nth-child(2) {
    background: #fff;
    border-color: #fff;
    color: #111;
  }

  .news-card:nth-child(1) .news-date {
    top: 357px;
    right: 36px;
    width: 89px;
    height: 88px;
    padding: 16px 8px;
  }

  .news-card:nth-child(1) .news-card-content {
    left: 536px;
    right: auto;
    bottom: 0;
    width: 594px;
    height: 158px;
    padding: 38px 46px;
    background: rgba(0, 0, 0, 0.7);
  }

  .news-card:nth-child(2) .news-date,
  .news-card:nth-child(2) .news-card-content {
    display: none;
  }

  .news-card:nth-child(2) img,
  .news-card:nth-child(3) img {
    filter: grayscale(0.4) sepia(0.22) brightness(0.88);
  }

  .news-more {
    display: flex;
    position: absolute;
    left: 1453px;
    top: 1095px;
    width: 208px;
    height: 67px;
    align-items: center;
    justify-content: space-between;
    padding: 0 34px 0 30px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    color: #fff;
    font-size: 18px;
    line-height: 1;
  }

  .footer {
    background: #272727;
    height: 518px;
    padding: 0;
    overflow: hidden;
  }

  .footer .container {
    position: relative;
    width: 1402px;
    height: 518px;
  }

  .footer-inner {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .footer-inner::after {
    content: none;
  }

  .footer-brand {
    position: absolute;
    left: 0;
    top: 0;
    width: 350px;
    height: 162px;
    padding: 36px 75px 0;
    overflow: visible;
  }

  .footer-logo {
    margin-bottom: 25px;
  }

  .footer-phone {
    position: absolute;
    left: 0;
    top: 211px;
    font-size: 23px;
    line-height: 1;
    margin-bottom: 8px;
    color: #fff;
  }

  .footer-phone-label {
    position: absolute;
    left: 0;
    top: 245px;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.8);
  }

  .footer-social {
    position: absolute;
    left: 0;
    top: 302px;
    gap: 14px;
  }

  .footer-social a {
    width: 52px;
    height: 50px;
    border: 0;
    flex: 0 0 52px;
  }

  .footer-social-icon {
    width: auto;
    height: auto;
    max-width: 48px;
    max-height: 38px;
    object-fit: contain;
    transform: translateY(-1px);
  }

  .footer-social a[aria-label="小红书"] > .footer-social-icon {
    clip-path: circle(48% at 50% 50%);
  }

  .footer-social a:hover {
    background: transparent;
    opacity: 1;
  }

  .footer-social a:hover > .footer-social-icon {
    opacity: 0.78;
  }

  .footer-links {
    position: absolute;
    left: 555px;
    top: 67px;
    width: 847px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 35px;
  }

  .footer-column h4 {
    margin-bottom: 20px;
  }

  .footer-column li {
    margin-bottom: 11px;
  }

  .footer-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 36px;
    padding: 0;
  }
  }
}

@media (min-width: 1601px) {
  .nav {
    gap: 42px;
    position: relative;
    left: 0;
  }

  .nav-link {
    font-size: 20px;
  }

  .header-actions {
    flex: 0 0 414px;
  }

  .header-actions .btn-gold {
    min-width: 136px;
    height: 42px;
  }

  .footer {
    background: #272727;
    height: 518px;
    padding: 0;
    overflow: hidden;
  }

  .footer .container {
    position: relative;
    width: 1402px;
    height: 518px;
  }

  .footer-inner {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .footer-inner::after {
    content: none;
  }

  .footer-brand {
    position: absolute;
    left: 0;
    top: 0;
    width: 350px;
    height: 162px;
    padding: 36px 75px 0;
    overflow: visible;
  }

  .footer-logo {
    margin-bottom: 25px;
  }

  .footer-phone {
    position: absolute;
    left: 0;
    top: 211px;
    font-size: 23px;
    line-height: 1;
    margin-bottom: 8px;
    color: #fff;
  }

  .footer-phone-label {
    position: absolute;
    left: 0;
    top: 245px;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.8);
  }

  .footer-social {
    position: absolute;
    left: 0;
    top: 302px;
    gap: 14px;
  }

  .footer-social a {
    width: 52px;
    height: 50px;
    border: 0;
    flex: 0 0 52px;
  }

  .footer-social-icon {
    width: auto;
    height: auto;
    max-width: 48px;
    max-height: 38px;
    object-fit: contain;
    transform: translateY(-1px);
  }

  .footer-social a[aria-label="小红书"] > .footer-social-icon {
    clip-path: circle(48% at 50% 50%);
  }

  .footer-social a:hover {
    background: transparent;
    opacity: 1;
  }

  .footer-social a:hover > .footer-social-icon {
    opacity: 0.78;
  }

  .footer-links {
    position: absolute;
    left: 555px;
    top: 67px;
    width: 847px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 35px;
  }

  .footer-column h4 {
    margin-bottom: 20px;
  }

  .footer-column li {
    margin-bottom: 11px;
  }

  .footer-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 36px;
    padding: 0;
  }
}

/* Corporate honors page */
.honors-page {
  background: #000;
}

.honors-hero {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  color: #fff;
}

.honors-hero-bg,
.honors-hero-overlay {
  position: absolute;
  inset: 0;
}

.honors-hero-bg {
  background: url("../images/honors/hero-bg.png") center top / cover no-repeat;
}

.honors-hero-overlay {
  background: rgba(0, 0, 0, 0.68);
}

.honors-hero-content {
  position: relative;
  z-index: 1;
  width: min(900px, calc(100% - 40px));
  margin: 0 auto;
  padding-top: 205px;
  text-align: center;
}

.honors-hero-title {
  font-size: 36px;
  font-weight: 300;
  line-height: 1.18;
  margin-bottom: 24px;
}

.honors-hero-subtitle {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
}

.corporate-honors {
  background: #fafafa;
  color: #111;
  padding: 88px 20px 92px;
}

.honors-heading {
  text-align: center;
}

.honors-heading p {
  color: #a9a9a9;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
}

.honors-heading h2 {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
}

.honor-awards {
  width: min(1180px, 100%);
  margin: 70px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 130px;
  row-gap: 76px;
}

.honor-award {
  min-height: 155px;
  display: grid;
  grid-template-columns: 94px 1fr 94px;
  align-items: center;
  text-align: center;
}

.honor-award img {
  width: 94px;
  height: 155px;
  object-fit: contain;
}

.honor-laurel-right {
  transform: scaleX(-1);
}

.honor-award p {
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 8px;
}

.honor-award h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
}

.honors-certificates {
  background: #000;
  color: #fff;
  padding: 70px 20px 110px;
  overflow: hidden;
}

.honors-certificate-stage {
  position: relative;
  width: min(1562px, 100%);
  margin: 0 auto;
}

.honors-shelf-row {
  position: relative;
  margin-bottom: 80px;
  padding: 0 0 54px;
}

.honors-certificate-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 42px;
  align-items: end;
  padding: 0 6%;
}

.honors-certificate-grid img {
  width: 100%;
  max-height: 310px;
  object-fit: contain;
  object-position: center bottom;
}

.honors-shelf {
  width: 100%;
  height: 52px;
  object-fit: fill;
  margin-top: -20px;
}

.honors-slider-controls {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
}

.honors-slider-controls button {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: var(--transition);
}

.honors-slider-controls button:nth-child(2) {
  background: #fff;
  color: #111;
  border-color: #fff;
}

.honors-slider-controls button:disabled {
  opacity: 0.3;
  cursor: default;
}

/* 证书书架：服务端分页，一次展示 4 个分类，翻页时 JS 替换
   .honors-cert-list 内容（重新请求数据），布局本身不变 */

/* 分组标题：移动端随文档流排在证书上方 */
.honors-shelf-label {
  margin: 0 0 18px 7%;
  color: #d8b48d;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 3px;
}

@media (min-width: 769px) {
  .honors-hero {
    height: 701px;
    min-height: 701px;
  }

  .honors-hero-content {
    padding-top: 287px;
  }

  .honors-hero-title {
    font-size: 54px;
    letter-spacing: 2px;
    margin-bottom: 24px;
  }

  .honors-hero-subtitle {
    font-size: 20px;
  }

  .corporate-honors {
    height: 820px;
    padding: 137px 0 0;
  }

  .honors-heading p {
    font-size: 30px;
  }

  .honors-heading h2 {
    font-size: 34px;
  }

  .honor-awards {
    margin-top: 82px;
    width: 1196px;
    column-gap: 154px;
    row-gap: 72px;
  }

  .honor-award {
    min-height: 155px;
  }

  .honors-certificates {
    height: 2442px;
    padding: 0;
  }

  .honors-certificate-stage {
    width: 1562px;
    height: 2442px;
  }

  .honors-shelf-row {
    position: absolute;
    left: 0;
    width: 1562px;
    height: 374px;
    margin: 0;
    padding: 0;
  }

  .honors-shelf-row:nth-child(1) { top: 198px; }
  .honors-shelf-row:nth-child(2) { top: 701px; }
  .honors-shelf-row:nth-child(3) { top: 1204px; }
  .honors-shelf-row:nth-child(4) { top: 1707px; }

  /* 证书分页容器（无 JS 或数据加载前不命中，原堆叠布局不受影响）：
     架子层竖向堆叠，层距沿用原设计稿 503px 节奏（层高 374 + 129 空隙） */
  .honors-cert-list {
    /* 首层分类标题悬于架子上方 48px，留出空间避免被区块溢出裁剪遮挡 */
    padding-top: 48px;
  }

  .honors-cert-list .honors-shelf-row {
    position: relative;
    top: auto;
    left: auto;
    margin-bottom: 129px;
  }

  .honors-cert-list .honors-shelf-row:last-child {
    margin-bottom: 0;
  }

  /* 分组标题：桌面端悬于证书组上方（行高固定，不占布局空间） */
  .honors-shelf-label {
    position: absolute;
    top: -48px;
    left: 82px;
    margin: 0;
    font-size: 20px;
  }

  .honors-certificate-stage:has(.honors-cert-list) {
    height: auto;
  }

  .honors-certificates:has(.honors-cert-list) {
    height: auto;
    padding: 30px 0 110px;
  }

  .honors-certificate-stage:has(.honors-cert-list) .honors-slider-controls {
    position: static;
    margin-top: 46px;
  }

  .honors-certificate-grid {
    position: absolute;
    left: 82px;
    top: 0;
    width: 1398px;
    height: 310px;
    padding: 0;
    gap: 72px;
    grid-template-columns: repeat(5, 222px);
  }

  .honors-certificate-grid img {
    width: 222px;
    height: 310px;
  }

  .honors-shelf {
    position: absolute;
    left: 0;
    top: 292px;
    width: 1562px;
    height: 81px;
    margin: 0;
  }

  .honors-slider-controls {
    position: absolute;
    right: 0;
    bottom: 157px;
    gap: 56px;
  }

  .honors-slider-controls button {
    width: 100px;
    height: 100px;
  }

  .honors-page + .footer,
  .honors-page + .footer .container {
    height: 517px;
  }

  .honors-page + .footer {
    padding: 0;
    overflow: hidden;
    background: #272727;
  }

  .honors-page + .footer .container {
    position: relative;
    width: 1402px;
  }

  .honors-page + .footer .footer-inner {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .honors-page + .footer .footer-inner::after {
    content: "";
    position: absolute;
    top: 439px;
    left: 0;
    width: 1402px;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
  }

  .honors-page + .footer .footer-brand {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    height: 162px;
    padding: 36px 75px 0;
    overflow: visible;
  }

  .honors-page + .footer .footer-logo {
    width: 201px;
    margin-bottom: 25px;
  }

  .honors-page + .footer .footer-phone {
    position: absolute;
    top: 211px;
    left: 0;
    margin-bottom: 8px;
    color: #fff;
    font-size: 23px;
    line-height: 1;
  }

  .honors-page + .footer .footer-phone-label {
    position: absolute;
    top: 245px;
    left: 0;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.8);
  }

  .honors-page + .footer .footer-social {
    position: absolute;
    top: 302px;
    left: 0;
    gap: 14px;
  }

  .honors-page + .footer .footer-social a {
    flex: 0 0 52px;
    width: 52px;
    height: 50px;
    border: 0;
  }

  .honors-page + .footer .footer-social-icon {
    width: auto;
    height: auto;
    max-width: 48px;
    max-height: 38px;
    object-fit: contain;
    transform: translateY(-1px);
  }

  .honors-page + .footer .footer-links {
    position: absolute;
    top: 67px;
    left: 555px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 35px;
    width: 847px;
  }

  .honors-page + .footer .footer-column h4 {
    margin-bottom: 20px;
  }

  .honors-page + .footer .footer-column li {
    height: 25.6px;
    margin-bottom: 11px;
  }

  .honors-page + .footer .footer-bottom {
    position: absolute;
    right: 0;
    bottom: 36px;
    left: 0;
    padding: 0;
  }
}

@media (max-width: 768px) {
  .honor-awards {
    column-gap: 50px;
  }

  .honor-award {
    grid-template-columns: 70px 1fr 70px;
  }

  .honor-award img {
    width: 70px;
    height: auto;
  }

  .honor-award h3 {
    font-size: 20px;
  }

  .honors-certificate-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 44px;
  }
}

@media (max-width: 768px) {
  .honors-hero {
    min-height: 470px;
  }

  .honors-hero-bg {
    background-size: auto 650px;
    background-position: center top;
  }

  .honors-hero-content {
    padding-top: 178px;
  }

  .honors-hero-title {
    font-size: 34px;
  }

  .honors-hero-subtitle {
    font-size: 15px;
  }

  .corporate-honors {
    padding: 76px 20px 70px;
  }

  .honors-heading p {
    font-size: 18px;
  }

  .honors-heading h2 {
    font-size: 24px;
  }

  .honor-awards {
    grid-template-columns: 1fr;
    row-gap: 36px;
    margin-top: 48px;
  }

  .honor-award {
    min-height: 120px;
    grid-template-columns: 56px 1fr 56px;
  }

  .honor-award img {
    width: 56px;
  }

  .honor-award p {
    font-size: 14px;
  }

  .honor-award h3 {
    font-size: 18px;
  }

  .honors-certificates {
    padding: 66px 18px 84px;
  }

  .honors-shelf-row {
    margin-bottom: 58px;
  }

  .honors-certificate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 30px;
    padding: 0 7%;
  }

  .honors-certificate-grid img {
    max-height: 230px;
  }

  .honors-shelf {
    height: 34px;
    margin-top: 2px;
  }

  .honors-slider-controls {
    justify-content: center;
  }

  .honors-slider-controls button {
    width: 58px;
    height: 58px;
  }

  .honors-slider-controls svg {
    width: 32px;
  }
}

/* Brand story page */
.brand-story-page {
  background: #000;
  overflow: hidden;
}

.brand-story-hero {
  position: relative;
  height: 701px;
  min-height: 701px;
  overflow: hidden;
  color: #fff;
}

.brand-story-hero-bg,
.brand-story-hero-overlay {
  position: absolute;
  inset: 0;
}

.brand-story-hero-bg {
  background: url("../images/brand-story/hero-bg.png") center top / cover no-repeat;
}

.brand-story-hero-overlay {
  background: rgba(0, 0, 0, 0.68);
}

.brand-story-hero-content {
  position: relative;
  z-index: 1;
  width: min(900px, calc(100% - 40px));
  margin: 0 auto;
  padding-top: 287px;
  text-align: center;
}

.brand-story-hero-title {
  font-size: 56px;
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: 2px;
  margin-bottom: 24px;
}

.brand-story-hero-subtitle {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.6;
}

.brand-origin,
.brand-symbol,
.brand-ip,
.brand-culture {
  background: #000;
}

@media (min-width: 769px) {
  .brand-story-body .brand-story-page {
    width: 100%;
  }

  .brand-story-body .brand-story-page + .footer,
  .brand-story-body .brand-story-page + .footer .container {
    height: 516px;
  }
}

@media (max-width: 1200px) {
  .brand-story-hero {
    height: 520px;
    min-height: 520px;
  }

  .brand-story-hero-content {
    padding-top: 208px;
  }

  .brand-story-hero-title {
    font-size: 40px;
  }

  .brand-story-hero-subtitle {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .brand-story-hero {
    height: 470px;
    min-height: 470px;
  }

  .brand-story-hero-bg {
    background-size: auto 650px;
    background-position: center top;
  }

  .brand-story-hero-content {
    padding-top: 178px;
  }

  .brand-story-hero-title {
    font-size: 34px;
    letter-spacing: 0;
  }

  .brand-story-hero-subtitle {
    font-size: 15px;
  }
}

@media (max-width: 1024px) {
  .logo {
    min-width: 0;
    gap: 8px;
  }

  .logo-image {
    display: block;
    width: 116px;
    height: auto;
    flex: 0 0 auto;
    object-fit: contain;
    opacity: 0.95;
  }

  .logo-emblem {
    display: block;
    width: 32px;
    height: 33px;
    flex: 0 0 auto;
    object-fit: contain;
  }

  .logo-mark,
  .logo-text {
    display: none;
  }
}

@media (max-width: 768px) {
  .hearts-intro-tabs {
    grid-template-columns: repeat(5, 1fr);
    row-gap: 0;
    width: 100%;
    margin: 0 auto;
  }

  .hearts-intro-tab {
    height: 62px;
    padding: 0 2px 18px;
  }

  .hearts-intro-tab strong {
    font-size: 14px;
    line-height: 20px;
  }

  .hearts-intro-tab span {
    font-size: 10px;
    line-height: 14px;
  }

  .hearts-intro-tab.active::before {
    bottom: 6px;
    width: 36px;
  }

  .hearts-intro-tab.active::after {
    border-left-width: 4px;
    border-right-width: 4px;
    border-top-width: 5px;
  }

  .hero {
    height: min(68vh, 590px);
    min-height: 560px;
    align-items: flex-start;
  }

  .hero-slide img {
    height: 100%;
    object-position: 42% top;
  }

  .hero-content {
    top: 186px;
    width: min(282px, calc(100vw - 48px));
    transform: translateX(-50%);
  }

  .hero-title {
    font-size: 32px;
    line-height: 1.34;
    letter-spacing: 2px;
    margin-bottom: 12px;
  }

  .hero-subtitle {
    font-size: 15px;
    line-height: 1.35;
    letter-spacing: 1px;
  }

  .hero-dots {
    bottom: 144px;
    gap: 8px;
  }

  .hero-stats {
    bottom: 32px;
    width: min(310px, calc(100vw - 56px));
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: 11px 34px;
    padding: 0;
  }

  .hero-stat {
    justify-content: flex-start;
    min-width: 94px;
  }

  .hero-stat:nth-child(5) {
    grid-column: 1 / -1;
    justify-content: center;
    min-width: 0;
  }

  .hero-stat-num {
    font-size: 24px;
  }

  .hero-stat-unit {
    font-size: 10px;
    white-space: nowrap;
  }
}

/* Homepage motion system */
html.motion-ready .hero-slide {
  transition: opacity 1.35s var(--motion-ease);
}

html.motion-ready .hero-slide img,
html.motion-ready .scene-image img,
html.motion-ready .product-image img,
html.motion-ready .product-card > img,
html.motion-ready .hearts-image img,
html.motion-ready .news-card img {
  backface-visibility: hidden;
  transform-origin: center center;
}

html.motion-ready .hero-title,
html.motion-ready .hero-subtitle,
html.motion-ready .hero-dot,
html.motion-ready .hero-stat,
html.motion-ready .section-title > *,
html.motion-ready .product-info > *,
html.motion-ready .scene-content > *,
html.motion-ready .hearts-intro-tabs > *,
html.motion-ready .hearts-tab,
html.motion-ready .hearts-text > *,
html.motion-ready .news-controls,
html.motion-ready .news-card {
  will-change: transform, opacity;
}

html.motion-ready .hero-slide img,
html.motion-ready .scene-image img {
  will-change: transform;
}

html.motion-ready .hearts-tab {
  transition: none;
}

html.motion-ready .hero-dot {
  transition: background-color 0.4s var(--motion-ease);
}

.motion-clip {
  clip-path: inset(0);
  will-change: clip-path;
}

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

  .motion-clip {
    clip-path: none !important;
  }

  .hero-slide,
  .hero-slide img,
  .scene-image img,
  .product-image img,
  .product-card > img,
  .hearts-image img,
  .news-card img {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Structured inner pages */
.inner-page {
  width: 100%;
  overflow: hidden;
  background: #fff;
}

.inner-hero {
  position: relative;
  min-height: 701px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #15110e url("../images/inner/hero.png") center top / cover no-repeat;
  isolation: isolate;
}

.inner-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(6, 5, 4, 0.5);
}

.inner-hero-content {
  width: min(calc(100% - 120px), 1400px);
  margin-top: 62px;
  text-align: center;
}

.inner-hero-title {
  color: #fff;
  font-size: 46px;
  font-weight: 300;
  line-height: 1.2;
}

.inner-hero-subtitle {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 18px;
  font-weight: 300;
}

.inner-section {
  position: relative;
  padding: 118px 0;
  background: #fff;
}

.inner-section.is-dark {
  color: #fff;
  background: #080808;
}

.inner-section.is-warm-dark {
  color: #fff;
  background: #18130f;
}

.inner-shell {
  width: min(calc(100% - 120px), 1400px);
  margin: 0 auto;
}

.inner-section-head {
  margin-bottom: 54px;
}

.inner-section-head.is-centered {
  text-align: center;
}

.inner-eyebrow {
  color: #aaa39c;
  font-size: 18px;
  line-height: 1.2;
  text-transform: uppercase;
}

.inner-title {
  margin-top: 8px;
  color: #1f1d1b;
  font-size: 38px;
  font-weight: 500;
  line-height: 1.25;
}

.is-dark .inner-title,
.is-warm-dark .inner-title {
  color: #fff;
}

.inner-copy {
  max-width: 620px;
  margin-top: 28px;
  color: #666;
  font-size: 16px;
  line-height: 2;
}

.products-lu-copy .inner-copy p {
  margin: 0;
}

.products-lu-copy .inner-copy p + p {
  margin-top: 28px;
}

.is-dark .inner-copy,
.is-warm-dark .inner-copy {
  color: rgba(255, 255, 255, 0.68);
}

.inner-kicker {
  color: var(--color-gold);
  font-size: 14px;
  text-transform: uppercase;
}

.inner-split {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 80px;
}

.inner-split.is-reversed {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.86fr);
}

.inner-split.is-reversed .inner-media {
  order: -1;
}

.inner-media {
  position: relative;
  min-width: 0;
}

.inner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inner-media.is-shadow {
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.18);
}

.inner-media.is-frame::before {
  content: "";
  position: absolute;
  inset: -18px auto auto -18px;
  width: 86px;
  height: 86px;
  border-top: 8px solid var(--color-gold);
  border-left: 8px solid var(--color-gold);
  pointer-events: none;
}

.inner-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 34px;
}

.inner-metric strong {
  display: block;
  color: #191715;
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
}

.inner-metric span {
  display: block;
  margin-top: 10px;
  color: #8c8680;
  font-size: 13px;
}

.is-dark .inner-metric strong,
.is-warm-dark .inner-metric strong {
  color: #fff;
}

.inner-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.inner-arrow {
  width: 50px;
  height: 50px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d9d6d2;
  border-radius: 50%;
  color: #555;
  font-size: 20px;
  transition: var(--transition);
}

.inner-arrow:hover,
.inner-arrow:focus-visible {
  color: #fff;
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.inner-tabs {
  display: flex;
  justify-content: center;
  gap: 44px;
  flex-wrap: wrap;
}

.inner-tab {
  position: relative;
  padding: 12px 2px;
  color: #777;
  font-size: 15px;
}

.inner-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.inner-tab.active,
.inner-tab:hover,
.inner-tab:focus-visible {
  color: #161412;
}

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

.inner-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.inner-feature {
  min-height: 210px;
  padding: 42px 32px;
  background: inherit;
}

.inner-feature-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--color-gold);
  font-size: 18px;
}

.inner-feature h3 {
  font-size: 20px;
  font-weight: 500;
}

.inner-feature p {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  line-height: 1.8;
}

.inner-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.inner-scroll::-webkit-scrollbar {
  display: none;
}

.inner-scroll-track {
  display: flex;
  gap: 24px;
  min-width: max-content;
}

.inner-scroll-item {
  scroll-snap-align: start;
}

/* Products */
.products-intro .inner-tabs {
  margin-bottom: 74px;
}

.products-lu-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
}

.products-lu-main {
  grid-column: 1 / 8;
}

.products-lu-copy {
  grid-column: 8 / 13;
  padding: 70px 20px 0 30px;
}

.products-lu-room {
  grid-column: 2 / 9;
  margin-top: -36px;
}

.products-lu-service {
  grid-column: 9 / 13;
  align-self: end;
}

.products-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.products-detail-grid figure {
  min-height: 560px;
  overflow: hidden;
  background: #eee;
}

.products-detail-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-console {
  max-width: 930px;
  margin: 0 auto;
}

.product-systems {
  background: #080808;
}

.product-system {
  position: relative;
  min-height: 712px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

.product-system + .product-system {
  border-top: 4px solid #fff;
}

.product-system img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-system::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.24) 52%, rgba(0, 0, 0, 0) 78%);
}

.product-system:nth-child(even)::after {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.18) 52%, rgba(0, 0, 0, 0) 78%);
}

.product-system-copy {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 120px), 1400px);
  margin: 0 auto;
  max-width: 1400px;
}

.product-system:nth-child(even) .product-system-copy {
  text-align: right;
}

.product-system-copy h2 {
  font-size: 34px;
  font-weight: 400;
}

.product-system-copy p {
  max-width: 490px;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.9;
}

.product-system:nth-child(even) .product-system-copy p {
  margin-left: auto;
}

.inner-tab small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;
}

.product-direction-panels,
.cabinet-scenes {
  display: grid;
  gap: 24px;
}

.product-direction {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  background: #090807;
}

.product-direction > img,
.cabinet-scenes img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-direction > div,
.cabinet-scenes article > div {
  position: absolute;
  z-index: 1;
  right: 8%;
  bottom: 12%;
  max-width: 520px;
  color: #fff;
}

.product-direction h3,
.cabinet-scenes h3 {
  margin-top: 10px;
  font-size: 34px;
}

.resource-swatches,
.element-swatches {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.resource-swatches span,
.element-swatches span {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border: 1px solid #b9946d;
  border-radius: 50%;
}

.product-elements {
  margin-top: 72px;
}

.element-scenes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
}

.element-scenes img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.cabinet-scenes article {
  position: relative;
  min-height: 560px;
  overflow: hidden;
}

/* Manufacturing */
.manufacturing-bases .inner-kicker {
  text-transform: none;
}

.factory-collage {
  min-height: 720px;
  display: grid;
  grid-template-columns: 0.9fr 1.15fr;
  grid-template-rows: 1fr 0.9fr;
  gap: 20px;
}

.factory-collage > figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #eee;
}

.factory-card-extras {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.factory-card-extras .factory-card-extra {
  position: relative;
  min-height: 360px;
  margin: 0;
  overflow: hidden;
  background: #eee;
}

.factory-collage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.factory-collage > figure:first-child {
  grid-row: 1 / 3;
}

.factory-card-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 82px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 28px 17px;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 36%, rgba(0, 0, 0, 0.9) 100%);
}

.factory-card-caption strong {
  font-size: 24px;
  line-height: 1.1;
}

.factory-card-caption span {
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.25;
  white-space: nowrap;
}

.manufacturing-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.manufacturing-gallery figure {
  overflow: hidden;
  background: #222;
}

.manufacturing-gallery img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.6s var(--motion-ease);
}

.manufacturing-gallery figure:hover img {
  transform: scale(1.035);
}

.manufacturing-robot {
  min-height: 720px;
}

.manufacturing-robot img {
  object-position: center;
}

.handmade-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 24px;
}

.handmade-grid img {
  width: 100%;
  height: 620px;
  object-fit: cover;
}

.inner-section.manufacturing-smart {
  background: #070707 url("../images/manufacturing/layers/dark-texture.png") center / cover no-repeat;
}

.smart-house {
  width: min(100%, 980px);
  margin: 56px auto 0;
}

.waterline-thumbs,
.assembly-cards,
.smart-systems {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.waterline-thumbs {
  margin-top: 34px;
}

.waterline-thumbs img,
.assembly-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.assembly-count {
  display: block;
  margin-top: 36px;
  font-size: 48px;
}

.assembly-count small {
  margin-left: 8px;
  font-size: 22px;
}

.assembly-gallery {
  display: grid;
  gap: 34px;
}

.assembly-group {
  position: relative;
}

.assembly-group h3 {
  padding-right: 104px;
  font-size: 24px;
}

.assembly-group > p {
  margin: 8px 104px 16px 0;
  color: #888;
  text-align: left;
}

.assembly-controls {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  gap: 10px;
}

.assembly-control {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(205, 205, 205, 0.62);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: #aaa;
  cursor: pointer;
  transition: color .24s ease, background-color .24s ease, border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}

.assembly-next {
  border-color: #c9a173;
  background: #c9a173;
  color: #fff;
}

.assembly-control:hover,
.assembly-control:focus-visible {
  border-color: #c9a173;
  color: #fff;
  background: #c9a173;
  box-shadow: 0 10px 24px rgba(201, 161, 115, 0.26);
  transform: translateY(-2px);
}

.assembly-prev:hover,
.assembly-prev:focus-visible {
  color: #c9a173;
  background: #fff;
}

.assembly-control:focus-visible {
  outline: 2px solid rgba(201, 161, 115, 0.48);
  outline-offset: 3px;
}

.assembly-control span {
  position: relative;
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
}

.assembly-control span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

.assembly-next span::after {
  right: 0;
  transform: translateY(-50%) rotate(45deg);
}

.assembly-prev span::after {
  left: 0;
  transform: translateY(-50%) rotate(-135deg);
}

.assembly-group.is-shuffling .assembly-cards figure {
  animation: assemblyCardShuffle .28s ease;
}

.assembly-group figure {
  position: relative;
  overflow: hidden;
}

.assembly-group figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 12px 16px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  background: rgba(0,0,0,.42);
}

@keyframes assemblyCardShuffle {
  from {
    opacity: .72;
    transform: translateY(8px);
  }

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

.smart-service-loop {
  position: relative;
  min-height: 440px;
  margin-top: 60px;
  border: 1px solid rgba(201,167,124,.55);
  border-radius: 50% 50% 0 0;
}

.smart-service-loop strong {
  position: absolute;
  bottom: 36px;
  left: 50%;
  text-align: center;
  transform: translateX(-50%);
}

.smart-service-loop span {
  color: #d1ad85;
}

.smart-service-art {
  display: none;
}

.smart-flow-interactions {
  display: none;
}

.smart-flow {
  display: none;
}

.smart-systems {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.smart-systems span {
  padding: 22px 8px;
  color: #ddd;
  text-align: center;
  background: rgba(255,255,255,.06);
}

/* Water paint */
.water-process-media {
  min-height: 560px;
}

.water-process-section .inner-eyebrow {
  display: inline-block;
  color: rgba(196, 151, 109, 0.24);
  font-family: "Bodoni 72", "Bodoni MT", Didot, "Baskerville Old Face", "Times New Roman", Georgia, serif;
  font-size: 34px;
  font-style: italic;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(182, 135, 93, 0.46) 0%, rgba(255, 255, 255, 0.18) 57%, rgba(178, 126, 82, 0.32) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.8px rgba(194, 151, 112, 0.42);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.72), 0 8px 14px rgba(174, 132, 93, 0.12);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, 0.48) 64%, transparent 94%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, 0.48) 64%, transparent 94%);
  transform: skewX(-6deg) scaleX(1.08);
  transform-origin: left center;
}

.water-family-band {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: #16110e;
}

.water-family-band > img {
  position: absolute;
  inset: 0 45% 0 0;
  width: 55%;
  height: 100%;
  object-fit: cover;
}

.water-family-copy {
  width: min(calc(100% - 120px), 1400px);
  margin: 0 auto;
  padding-left: 58%;
}

.water-family-copy h2 {
  font-size: 38px;
  font-weight: 400;
}

.water-family-copy p {
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.66);
}

.inner-section.water-wood {
  min-height: 620px;
  display: flex;
  align-items: center;
  background: #15100d url("../images/water-paint/layers/wood.png") right center / 72% auto no-repeat;
}

.water-standards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid #eee;
}

.water-standard {
  min-height: 230px;
  padding: 40px 28px;
  border-right: 1px solid #eee;
  color: #111;
  text-align: center;
  background: #fff;
  transition: background-color 0.34s ease, color 0.34s ease;
}

.water-standard:last-child {
  border-right: 0;
}

.water-standard .inner-feature-icon {
  margin: 0 auto 24px;
  transition: color 0.34s ease;
}

.water-standard-icon {
  transition: filter 0.34s ease;
}

.water-standard:first-child .water-standard-icon {
  filter: brightness(0) saturate(100%) invert(69%) sepia(18%) saturate(805%) hue-rotate(348deg) brightness(91%) contrast(86%);
}

.water-standard p {
  margin-top: 10px;
  color: #999;
  font-size: 13px;
  line-height: 1.7;
  transition: color 0.34s ease;
}

.water-standard:hover {
  color: #fff;
  background: #000;
}

.water-standard:hover .inner-feature-icon {
  color: #fff;
}

.water-standard:hover .water-standard-icon {
  filter: brightness(0) invert(1);
}

.water-standard:hover p {
  color: rgba(255, 255, 255, 0.72);
}

.certificate-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 54px;
}

.certificate-card {
  padding: 18px;
  background: #f4f2ef;
  scroll-snap-align: start;
}

.certificate-card img {
  width: 100%;
  aspect-ratio: 0.7;
  object-fit: contain;
}

/* Cases */
.case-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 0.95fr);
  grid-template-rows: 1fr auto;
  gap: 24px;
}

.case-feature-slide {
  width: min(calc(100vw - 120px), 1400px);
  flex: 0 0 min(calc(100vw - 120px), 1400px);
}

.case-feature-main {
  grid-row: 1 / 3;
  min-height: 620px;
}

.case-feature-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-feature-copy {
  position: relative;
  overflow: hidden;
  padding: 34px;
  color: #fff;
  background: #17120f;
}

.case-feature-copy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(18, 13, 10, 0.82);
}

.case-feature-copy-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-feature-copy h3,
.case-feature-copy p {
  position: relative;
  z-index: 2;
}

.case-feature-text {
  color: inherit;
  display: block;
  position: relative;
  z-index: 2;
}

.case-gallery-grid {
  overflow-x: auto;
  scrollbar-width: none;
}

.case-gallery-grid::-webkit-scrollbar {
  display: none;
}

.case-gallery-track {
  display: flex;
  gap: 18px;
}

.case-gallery-track-clone {
  display: none;
}

.case-gallery-track figure {
  flex: 0 0 min(82vw, 440px);
  overflow: hidden;
  background: #222;
}

.case-gallery-track img {
  width: 100%;
  aspect-ratio: 1.45;
  object-fit: cover;
  transition: transform 0.6s var(--motion-ease);
}

.case-gallery-track figure:hover img {
  transform: scale(1.04);
}

.case-other-grid {
  display: grid;
  grid-template-columns: 1.55fr 0.7fr;
  grid-template-rows: 1fr 1fr;
  gap: 22px;
}

.case-other-grid figure:first-child {
  grid-row: 1 / 3;
}

.case-other-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-other-grid figure > a:first-child {
  display: block;
  height: 100%;
}

.case-other-grid figcaption a {
  color: inherit;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  width: 100%;
}

.case-other-grid figcaption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 16px;
}

.case-other-grid figcaption strong {
  color: #171717;
  font-size: 22px;
  font-weight: 500;
}

.case-other-grid figcaption span {
  color: #aaa;
  font-size: 16px;
  line-height: 1.8;
  text-align: right;
}

/* Five hearts */
.heart-section {
  padding: 105px 0;
}

.heart-number {
  color: var(--color-gold);
  font-size: 18px;
}

.heart-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 54px;
}

.heart-benefit {
  min-height: 170px;
  padding: 28px;
  background: #f7f3ef;
}

.heart-benefit strong {
  display: block;
  margin-top: 18px;
  font-size: 17px;
}

.heart-benefit p {
  margin-top: 10px;
  color: #777;
  font-size: 13px;
  line-height: 1.7;
}

.heart-service {
  min-height: 760px;
  display: flex;
  align-items: center;
  color: #fff;
  background: #080808;
}

.heart-service .inner-media {
  min-height: 620px;
}

/* Join */
.join-advantage-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.7fr 0.8fr;
  gap: 28px;
  align-items: center;
}

.join-advantage-grid img {
  width: 100%;
  aspect-ratio: 1.28;
  object-fit: cover;
}

.join-orbit {
  --orbit-size: min(512px, 100%);
  position: relative;
  width: var(--orbit-size);
  aspect-ratio: 1;
  display: block;
  isolation: isolate;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 28.5%, rgba(185, 185, 185, 0.56) 28.7% 32.5%, transparent 32.8%),
    radial-gradient(circle at 50% 50%, transparent 0 36.7%, rgba(200, 160, 124, 0.12) 36.9% 46%, transparent 46.2%),
    radial-gradient(circle at 50% 50%, transparent 0 49.7%, rgba(218, 198, 181, 0.32) 49.85% 50%, transparent 50.15%);
}

.join-orbit::before {
  content: "";
  position: absolute;
  inset: 2.5%;
  z-index: 0;
  border: 1px solid rgba(226, 220, 214, 0.38);
  border-radius: 50%;
  transform: rotate(15deg) scaleX(1.04);
  pointer-events: none;
}

.join-orbit-label {
  position: absolute;
  z-index: 4;
  width: 28.125%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #c8a07c;
  font-size: clamp(13px, 1.15vw, 22px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid rgba(238, 232, 225, 0.85);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.1);
}

.join-orbit-label.is-top {
  top: -6.45%;
  left: 35.74%;
}

.join-orbit-label.is-left {
  top: 62.3%;
  left: -0.2%;
  color: #fff;
  background: #c8a07c;
  border-color: #c8a07c;
  box-shadow: none;
}

.join-orbit-label.is-right {
  top: 62.3%;
  left: 71.48%;
}

.join-orbit-core {
  position: absolute;
  top: 28.52%;
  left: 28.32%;
  z-index: 3;
  width: 42.97%;
  aspect-ratio: 1;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  background: transparent;
}

.join-orbit-core::after {
  display: none;
}

.join-orbit-core img {
  position: absolute;
  left: 50%;
  z-index: 2;
  display: block;
  max-width: none;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  opacity: 0.96;
  transform: translateX(-50%);
  pointer-events: none;
}

.join-orbit-core .join-orbit-emblem {
  top: 23%;
  width: 26.4%;
}

.join-orbit-core .join-orbit-logo {
  top: 57.2%;
  width: 60.9%;
}

.inner-section.join-support {
  min-height: 680px;
  background: #19130f url("../images/join/layers/support.png") center / cover no-repeat;
}

.join-support .inner-feature-grid {
  margin-top: 290px;
  background: rgba(185, 143, 98, 0.88);
}

.join-requirements {
  display: grid;
  gap: 44px;
}

.join-requirement {
  display: grid;
  grid-template-columns: 0.95fr 1.1fr;
  align-items: center;
  gap: 64px;
}

.join-requirement img {
  width: 100%;
  aspect-ratio: 1.55;
  object-fit: cover;
}

.join-requirement h3 {
  font-size: 24px;
  font-weight: 500;
}

.join-requirement ul {
  margin: 18px 0 24px;
  padding-left: 18px;
  color: #777;
  line-height: 1.9;
}

.join-link {
  display: inline-flex;
  width: max-content;
  min-width: 126px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--color-gold);
}

.join-process {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 1px;
  background: #2a2724;
}

.join-process-step {
  min-height: 176px;
  padding: 28px 14px;
  text-align: center;
  background: #080808;
  transition:
    opacity .55s ease,
    background-color .34s cubic-bezier(.22,.61,.36,1),
    transform .34s cubic-bezier(.22,.61,.36,1),
    box-shadow .34s ease,
    color .34s ease;
}

.join-process-step:first-child {
  background: var(--color-gold);
}

.join-process.has-active .join-process-step:first-child {
  background: #080808;
}

.join-process-step.is-active,
.join-process.has-active .join-process-step:first-child.is-active {
  background: var(--color-gold);
  color: #fff;
  transform: translateY(-10px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
}

.join-process-step strong {
  display: block;
  margin-top: 14px;
  font-size: 28px;
}

.join-process-step span {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
  transition: color .34s ease;
}

.join-process-step.is-active span {
  color: #fff;
}

html.motion-basic .join-process-step {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
}

html.motion-basic .join-process-step.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.motion-basic .join-process-step.is-visible.is-active {
  transform: translate3d(0, -10px, 0);
}

.join-store {
  height: 850px;
  min-height: 850px;
  display: flex;
  align-items: center;
  color: #fff;
  background-color: #18130f;
  background-position: center;
  background-size: 1920px 850px;
  background-repeat: no-repeat;
  transition: background-position .36s ease, background-size .36s ease;
}

.join-store-copy {
  width: min(calc(100% - 120px), 1400px);
  margin: 0 auto;
}

.join-store-copy h2 {
  font-size: 38px;
  font-weight: 400;
}

.join-store-copy .inner-copy {
  transition: opacity .2s ease, transform .2s ease;
}

.join-store.is-store-changing .join-store-copy .inner-copy {
  opacity: 0;
  transform: translateY(6px);
}

.join-application-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 72px;
  align-items: stretch;
}

.join-application-image {
  min-height: 650px;
}

.join-form {
  display: grid;
  align-content: center;
  gap: 18px;
}

.join-form label {
  position: relative;
}

.join-form input {
  width: 100%;
  height: 58px;
  padding: 0 18px;
  border: 1px solid #e6e2de;
  border-radius: 0;
  outline: none;
  font: inherit;
}

.join-form input:focus {
  border-color: var(--color-gold);
}

.join-submit {
  height: 58px;
  color: #fff;
  background: var(--color-gold);
  font-size: 16px;
}

.join-form-status {
  min-height: 26px;
  color: #8f6e4e;
  font-size: 14px;
}

.join-form-qr {
  width: 132px;
  margin-top: 8px;
}

@media (max-width: 1100px) {
  .inner-hero {
    min-height: 560px;
  }

  .inner-hero-title {
    font-size: 38px;
  }

  .inner-split,
  .inner-split.is-reversed {
    gap: 44px;
  }

  .inner-feature-grid,
  .heart-benefits,
  .water-standards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

@media (max-width: 768px) {
  .inner-hero {
    min-height: 430px;
    background-position: 58% top;
  }

  .inner-hero-content,
  .inner-shell,
  .water-family-copy,
  .product-system-copy,
  .join-store-copy {
    width: calc(100% - 40px);
  }

  .inner-hero-content {
    margin-top: 44px;
  }

  .inner-hero-title {
    font-size: 38px;
  }

  .inner-hero-subtitle {
    font-size: 16px;
    line-height: 1.7;
  }

  .inner-section,
  .heart-section {
    padding: 72px 0;
  }

  .inner-section-head {
    margin-bottom: 36px;
  }

  .inner-eyebrow {
    font-size: 14px;
  }

  .inner-title,
  .water-family-copy h2,
  .join-store-copy h2 {
    font-size: 30px;
  }

  .inner-copy {
    font-size: 14px;
  }

  .inner-split,
  .inner-split.is-reversed,
  .products-detail-grid,
  .factory-collage,
  .handmade-grid,
  .case-feature-grid,
  .case-other-grid,
  .join-advantage-grid,
  .join-requirement,
  .join-application-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .inner-split.is-reversed .inner-media {
    order: 0;
  }

  .inner-tabs {
    justify-content: flex-start;
    gap: 18px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .inner-feature-grid,
  .heart-benefits,
  .water-standards {
    grid-template-columns: 1fr;
  }

  .inner-feature,
  .heart-benefit,
  .water-standard {
    min-height: 0;
  }

  .products-lu-grid {
    grid-template-columns: 1fr;
  }

  .products-lu-main,
  .products-lu-copy,
  .products-lu-room,
  .products-lu-service {
    grid-column: 1;
    margin: 0;
    padding: 0;
  }

  .products-detail-grid figure {
    min-height: 430px;
  }

  .product-system {
    min-height: 560px;
  }

  .product-system::after,
  .product-system:nth-child(even)::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.1) 72%);
  }

  .product-system-copy,
  .product-system:nth-child(even) .product-system-copy {
    align-self: end;
    padding-bottom: 48px;
    text-align: left;
  }

  .product-system:nth-child(even) .product-system-copy p {
    margin-left: 0;
  }

  .factory-collage {
    min-height: 0;
  }

  .factory-collage > figure:first-child {
    grid-row: auto;
  }

  .factory-card-caption {
    min-height: 86px;
    padding: 15px 18px 14px;
  }

  .factory-card-caption strong {
    font-size: 21px;
  }

  .factory-card-caption span {
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
  }

  .manufacturing-gallery {
    grid-template-columns: 1fr;
  }

  .manufacturing-robot,
  .handmade-grid img {
    min-height: 0;
    height: 420px;
  }

  /* 修复:让 manufacturing-waterline 和 manufacturing-assembly 内的 .inner-media.is-shadow
     在 mobile 下完全脱离 desktop 的绝对定位 + 1920px 拉伸布局,
     改为 position:static + width:100% + height:auto,图片 fit 进 div 完整显示,
     接受拉伸变形(object-fit: fill)。 */
  .manufacturing-waterline .manufacturing-robot,
  .manufacturing-assembly .inner-media {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: hidden;
    margin: 24px 0 0;
  }

  .manufacturing-waterline .manufacturing-robot img,
  .manufacturing-assembly .inner-media img {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: fill;
  }

  .water-family-band {
    min-height: auto;
    display: block;
    padding-bottom: 68px;
  }

  .water-process-media {
    height: 390px;
    min-height: 0;
    overflow: hidden;
  }

  .water-process-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .water-family-band > img {
    position: relative;
    inset: auto;
    width: 100%;
    height: 390px;
  }

  .water-family-copy {
    padding: 48px 0 0;
  }

  .water-family-copy .inner-metric strong {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(201, 167, 124, 0.7);
    border-radius: 50%;
    color: #d8b58c;
    font-size: 0;
  }

  .water-family-metric-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
  }

  .water-family-copy .inner-metric:last-child .water-family-metric-icon {
    width: 27px;
    height: 42px;
  }

  .water-wood {
    min-height: 620px;
    background-size: auto 70%;
    background-position: right bottom;
  }

  .certificate-track {
    display: flex;
    gap: 20px;
  }

  .certificate-card {
    width: 260px;
    flex: 0 0 260px;
  }

  .case-feature-main,
  .case-feature-grid img {
    min-height: 0;
    height: 330px;
  }

  .case-feature-main {
    grid-row: auto;
  }

  .case-feature-slide {
    width: calc(100vw - 40px);
    flex-basis: calc(100vw - 40px);
  }

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

  .case-other-grid figure:first-child {
    grid-row: auto;
  }

  .case-other-grid img {
    min-height: 280px;
  }

  .heart-service {
    min-height: auto;
  }

  .heart-service .inner-media {
    min-height: 0;
  }

  .join-support {
    min-height: 620px;
  }

  .join-support .inner-feature-grid {
    margin-top: 220px;
  }

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

  .join-store {
    position: relative;
    width: 100% !important;
    min-height: 0;
    height: auto;
    display: block;
    padding-top: 0;
    background-image: none !important;
  }

  .join-store::before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    background-image: var(--join-store-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .join-store::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 56.25%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
    z-index: 0;
  }

  .join-store-copy {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    padding: 28px 20px 24px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.96) 100%);
    color: #fff;
  }

  .join-store-copy .inner-eyebrow {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    letter-spacing: 0.08em;
  }

  .join-store-copy h2 {
    margin-top: 6px;
    color: #fff;
    font-size: 22px;
    font-weight: 500;
  }

  .join-store-details {
    margin-top: 18px;
  }

  .join-store-name {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
  }

  .join-store-details .inner-copy {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    line-height: 1.75;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }

  .join-store-locations {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 18px 20px 24px;
    background: rgba(0, 0, 0, 0.96);
    color: rgba(255, 255, 255, 0.95);
    font-size: 12px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  }

  .join-store-locations::-webkit-scrollbar {
    display: none;
  }

  .join-store-locations span {
    flex: 0 0 auto;
    padding: 0 18px;
    white-space: nowrap;
    cursor: pointer;
  }

  .join-store-locations span:first-child {
    padding-left: 0;
  }

  .join-store-locations span + span {
    border-left: 1px solid rgba(255, 255, 255, 0.55);
  }

  .join-application-image {
    min-height: 420px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .manufacturing-gallery img,
  .case-gallery-grid img {
    transition: none;
  }
}

/* Structured brand story page */
.brand-story-shell {
  width: min(1404px, calc(100% - 80px));
  margin: 0 auto;
}

.brand-section-heading > p {
  margin: 0 0 8px;
  color: #8b8b8b;
  font-size: 18px;
  line-height: 1.4;
}

.brand-section-heading h2 {
  margin: 0;
  color: inherit;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.3;
}

.brand-section-heading.is-centered {
  text-align: center;
}

.brand-section-heading.is-light > p {
  color: rgba(255, 255, 255, 0.62);
}

.brand-story-page .brand-story-hero-title {
  letter-spacing: 0;
}

.brand-desktop-break {
  display: none;
}

.brand-profile {
  padding: 110px 0 132px;
  color: #fff;
  background: #050505;
}

.brand-profile-lead {
  max-width: 1160px;
  margin: 40px auto 48px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 16px;
  line-height: 2;
  text-align: center;
}

.brand-profile-media {
  width: 100%;
  height: 560px;
  margin: 0;
  overflow: hidden;
}

.brand-profile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 51%;
}

.brand-profile-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin: -84px auto 0;
  position: relative;
  z-index: 1;
  background: rgba(20, 13, 9, 0.9);
}

.brand-profile-metrics div {
  min-height: 146px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.brand-profile-metrics div:last-child {
  border-right: 0;
}

.brand-profile-metrics strong {
  color: #caa27d;
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
}

.brand-profile-metrics small {
  margin-left: 4px;
  font-size: 15px;
}

.brand-profile-metrics span {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 13px;
}

.brand-profile-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px;
  max-width: 1200px;
  margin: 64px auto 0;
}

.brand-profile-copy p,
.brand-symbol-copy > p,
.brand-application-meaning > p,
.brand-ip-copy > p,
.brand-welfare-lead {
  margin: 0;
  font-size: 15px;
  line-height: 2;
}

.brand-profile-copy p {
  color: rgba(255, 255, 255, 0.56);
}

.brand-symbol {
  padding: 120px 0;
  color: #17110d;
  background: #c5a485;
}

.brand-symbol-layout {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 90px;
  align-items: center;
}

.brand-symbol-copy {
  padding-left: 40px;
}

.brand-symbol-mark {
  display: block;
  width: 112px;
  height: 112px;
  margin-bottom: 36px;
  object-fit: contain;
}

.brand-symbol-copy > p {
  margin-top: 30px;
  color: rgba(23, 17, 13, 0.7);
}

.brand-symbol-values {
  display: flex;
  gap: 12px;
  margin-top: 34px;
}

.brand-symbol-values span {
  padding: 10px 16px;
  border: 1px solid rgba(23, 17, 13, 0.24);
  font-size: 13px;
}

.brand-symbol-scene {
  margin: 36px 0 0;
  overflow: hidden;
}

.brand-symbol-scene img {
  display: block;
  width: 100%;
  height: auto;
}

.brand-symbol-media {
  height: 760px;
  margin: 0;
  overflow: hidden;
  background: #6f5546;
}

.brand-symbol-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 76% center;
}

.brand-application {
  padding: 112px 0 130px;
  color: #161616;
  background: #fff;
}

.brand-application-head {
  display: grid;
  grid-template-columns: 0.42fr 1fr;
  gap: 90px;
  align-items: end;
}

.brand-application-meaning > p {
  margin: 0;
  color: #666;
}

.brand-application-tabs {
  display: flex;
  gap: 28px;
  margin-bottom: 24px;
}

.brand-application-tabs span {
  color: #8f6b4c;
  font-size: 16px;
}

.brand-application-gallery {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 28px;
  align-items: end;
  margin-top: 78px;
}

.brand-application-gallery figure {
  margin: 0;
}

.brand-application-gallery img {
  display: block;
  width: 100%;
  height: 500px;
  object-fit: cover;
}

.brand-application-gallery figure:first-child img {
  height: 390px;
}

.brand-application-gallery figcaption {
  padding-top: 14px;
  color: #777;
  font-size: 13px;
}

.brand-ip {
  position: relative;
  min-height: 980px;
  overflow: hidden;
  color: #fff;
  background: #151515;
}

.brand-ip-backdrop {
  position: absolute;
  inset: 0;
  background: url("../images/brand-story/profile-family.png") center 56% / cover no-repeat;
  opacity: 0.1;
}

.brand-ip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.brand-ip-layout {
  position: relative;
  z-index: 1;
  min-height: 980px;
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: 80px;
  align-items: center;
}

.brand-ip-copy {
  padding-left: 40px;
}

.brand-ip-copy > p {
  max-width: 720px;
  margin-top: 30px;
  color: rgba(255, 255, 255, 0.68);
}

.brand-ip-copy .brand-ip-name {
  color: #fff;
  font-size: 17px;
}

.brand-ip-name strong {
  display: block;
  margin-top: 8px;
  font-size: 36px;
  font-weight: 500;
}

.brand-ip-features {
  max-width: 720px;
  margin: 42px 0 0;
}

.brand-ip-features div {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 24px;
  padding: 17px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.brand-ip-features dt {
  color: #caa27d;
  font-size: 14px;
}

.brand-ip-features dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}

.brand-ip-mascot {
  align-self: end;
  margin: 0;
  text-align: center;
}

.brand-ip-mascot img {
  display: inline-block;
  width: min(430px, 100%);
  height: auto;
}

.brand-partners {
  position: relative;
  padding: 116px 0 132px;
  color: #1a1a1a;
  background: #fff;
}

.brand-partners::before {
  content: none;
}

.brand-partners .brand-story-shell {
  position: relative;
  z-index: 1;
}

.brand-partner-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1120px;
  margin: 68px auto 0;
  background: transparent;
}

.brand-partner-grid div {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.brand-partner-grid strong {
  font-size: 24px;
  font-weight: 500;
}

.brand-partner-grid img {
  display: block;
  max-width: 100%;
  height: auto;
}

.brand-partner-grid span {
  margin-top: 12px;
  color: rgba(0, 0, 0, 0.55);
  font-size: 12px;
}

.brand-welfare {
  padding: 112px 0 130px;
  color: #171717;
  background: #fff;
}

.brand-welfare-lead {
  max-width: 900px;
  margin-top: 28px;
  color: #666;
}

.brand-welfare-layout {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 54px;
  margin-top: 68px;
}

.brand-welfare-years {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 36px;
  max-height: 160px;
  overflow-y: auto;
  scrollbar-width: none;
  scroll-snap-type: y mandatory;
}

.brand-welfare-years::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg, rgba(214, 214, 214, 0) 0%, #e3e3e3 12%, #e3e3e3 88%, rgba(214, 214, 214, 0) 100%);
}

.brand-welfare-years::-webkit-scrollbar {
  display: none;
}

.brand-welfare-years li {
  position: relative;
  padding: 14px 0;
  color: #b1b1b1;
  font-size: 18px;
  letter-spacing: 0.04em;
  scroll-snap-align: start;
  transition: color 0.3s ease;
}

.brand-welfare-years li::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 50%;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d6d6d6;
  transform: translateY(-50%);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.brand-welfare-year {
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s ease, letter-spacing 0.3s ease;
}

.brand-welfare-year:hover {
  color: #b98a62;
}

.brand-welfare-year:focus-visible {
  outline: 2px solid #b98a62;
  outline-offset: 5px;
}

.brand-welfare-years li.active {
  color: #b98a62;
  font-weight: 500;
}

.brand-welfare-years li.active::before {
  background: #b98a62;
  border-color: #b98a62;
  box-shadow: 0 0 0 5px rgba(185, 138, 98, 0.18);
}

.brand-welfare-years li.active .brand-welfare-year {
  letter-spacing: 0.08em;
}

.brand-welfare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.brand-welfare-grid article {
  border: 1px solid #e6e6e6;
  background: #fff;
}

.brand-welfare-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1.55 / 1;
  object-fit: cover;
}

.brand-welfare-grid p {
  margin: 0;
  padding: 18px 20px 22px;
  color: #555;
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .brand-story-shell {
    width: min(100% - 48px, 820px);
  }

  .brand-symbol-layout,
  .brand-application-head,
  .brand-ip-layout {
    grid-template-columns: 1fr;
  }

  .brand-symbol-copy,
  .brand-ip-copy {
    padding-left: 0;
  }

  .brand-symbol-media {
    height: 620px;
  }

  .brand-application-head,
  .brand-ip-layout {
    gap: 42px;
  }

  .brand-ip-layout {
    padding-top: 100px;
  }

  .brand-ip-mascot {
    align-self: auto;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .brand-symbol {
    overflow: hidden;
  }

  .brand-application {
    position: relative;
    z-index: 3;
    height: 698px;
    padding: 0;
    overflow: visible;
    background: #fff;
  }

  .brand-application::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 544px;
    height: 42px;
    background: url("../images/brand-story/symbol-cabinet-room.png") center -310px / 544px auto no-repeat;
    pointer-events: none;
  }

  .brand-application .brand-story-shell {
    position: relative;
    width: min(100% - 154px, 870px);
    height: 698px;
  }

  .brand-application-head {
    display: block;
    gap: 0;
  }

  .brand-application-head > .brand-section-heading {
    position: absolute;
    top: 34px;
    left: 0;
    z-index: 4;
  }

  .brand-application-head > .brand-section-heading p {
    font-size: 21px;
    line-height: 1;
  }

  .brand-application-head > .brand-section-heading h2 {
    margin-top: 6px;
    font-size: 31px;
    line-height: 1.08;
  }

  .brand-application-meaning {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 698px;
    min-height: 0;
    z-index: 2;
  }

  .brand-application-meaning::before {
    content: "KLF BRAND";
    position: absolute;
    top: 116px;
    left: 46px;
    z-index: 0;
    width: 172px;
    height: 660px;
    padding-top: 45px;
    color: rgba(255, 255, 255, 0.52);
    background: #c9a17c;
    font-size: 31px;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
  }

  .brand-application-tabs {
    position: absolute;
    top: 236px;
    left: 46px;
    z-index: 1;
    display: grid;
    gap: 16px;
    min-height: 0;
    padding: 0 0 0 48px;
    margin: 0;
  }

  .brand-application-tabs span {
    padding: 0;
    border: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
  }

  .brand-application-meaning > p {
    position: absolute;
    top: 150px;
    left: 250px;
    z-index: 1;
    width: 560px;
    margin: 0;
    padding-bottom: 34px;
    border-bottom: 1px dashed rgba(201, 161, 124, 0.38);
    color: #666;
    font-size: 14px;
    line-height: 27px;
  }

  .brand-application-gallery {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    margin: 0;
    z-index: 3;
  }

  .brand-application-gallery figure {
    position: absolute;
    margin: 0;
    overflow: hidden;
  }

  .brand-application-gallery figure:first-child {
    top: 402px;
    left: 3px;
    width: 323px;
    height: 226px;
  }

  .brand-application-gallery figure:last-child {
    top: 318px;
    left: 344px;
    width: 463px;
    height: 310px;
  }

  .brand-application-gallery img,
  .brand-application-gallery figure:first-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .brand-application-gallery figcaption {
    display: none;
  }

  .brand-ip-layout {
    position: relative;
    display: block;
    height: 572px;
    min-height: 572px;
    padding-top: 0;
    z-index: 4;
    align-items: start;
    opacity: 1;
    pointer-events: auto;
  }

  .brand-ip-copy {
    position: absolute;
    inset: 0;
    padding-left: 0;
    text-align: left;
  }

  .brand-ip-copy .brand-section-heading {
    position: absolute;
    top: 60px;
    left: 377px;
    z-index: 4;
    color: #fff;
    text-align: left;
  }

  .brand-ip-copy .brand-section-heading p {
    font-size: 21px;
    line-height: 1;
  }

  .brand-ip-copy .brand-section-heading h2 {
    margin-top: 6px;
    font-size: 31px;
    line-height: 1.08;
  }

  .brand-ip,
  .brand-ip-layout {
    height: 572px;
    min-height: 572px;
  }

  .brand-ip {
    position: relative;
    overflow: hidden;
    color: #171717;
    background:
      linear-gradient(90deg, rgba(32, 32, 32, 0.96) 0 43%, rgba(0, 0, 0, 1) 43% 100%),
      url("../images/brand-story/profile-family.png") left 65px / 520px auto no-repeat,
      #000;
  }

  .brand-ip-backdrop,
  .brand-ip::after {
    display: none;
  }

  .brand-ip-layout::before {
    content: "";
    position: absolute;
    top: 198px;
    left: -160px;
    width: 1005px;
    height: 307px;
    background: #fff;
  }

  .brand-ip-copy .brand-ip-name {
    position: absolute;
    top: 109px;
    left: 0;
    width: auto;
    margin: 0;
    color: #c99f7a;
    font-size: 13px;
  }

  .brand-ip-copy .brand-ip-name strong {
    margin-top: 5px;
    color: #fff;
    font-size: 28px;
    line-height: 1.15;
  }

  .brand-ip-copy > .brand-ip-description {
    position: absolute;
    top: 220px;
    left: 4px;
    width: 500px;
    max-width: 500px;
    margin: 0;
    color: #777;
    font-size: 12.5px;
    line-height: 17px;
  }

  .brand-ip-description span {
    display: block;
    white-space: normal;
  }

  .brand-ip-description span.is-indented {
    padding-left: 22px;
  }

  .brand-ip-features {
    position: absolute;
    top: 411px;
    left: 0;
    width: 500px;
    margin: 0;
  }

  .brand-ip-features div {
    grid-template-columns: 112px 1fr;
    min-height: 32px;
    padding: 0;
    border: 0;
    align-items: center;
    gap: 12px;
  }

  .brand-ip-features dt {
    padding: 7px 20px;
    border-radius: 18px;
    background: linear-gradient(90deg, #f2e5d8, #fff);
    font-size: 12px;
    white-space: nowrap;
  }

  .brand-ip-features dd {
    color: #777;
    font-size: 12px;
  }

  .brand-ip-mascot {
    position: absolute;
    top: 103px;
    right: 29px;
    width: 269px;
    margin: 0;
    z-index: 4;
  }
}

@media (max-width: 768px) {
  .brand-story-shell {
    width: calc(100% - 40px);
  }

  .brand-profile,
  .brand-symbol,
  .brand-application,
  .brand-partners,
  .brand-welfare {
    padding-top: 72px;
    padding-bottom: 78px;
  }

  .brand-section-heading > p {
    font-size: 13px;
  }

  .brand-section-heading h2 {
    font-size: 28px;
  }

  .brand-profile-lead {
    margin: 28px 0 34px;
    font-size: 14px;
    text-align: left;
  }

  .brand-profile-media {
    height: 330px;
  }

  .brand-profile-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc(100% - 24px);
    margin-top: -34px;
  }

  .brand-profile-metrics div {
    min-height: 112px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .brand-profile-metrics div:nth-child(2) {
    border-right: 0;
  }

  .brand-profile-metrics strong {
    font-size: 30px;
  }

  .brand-profile-copy,
  .brand-application-gallery,
  .brand-partner-grid,
  .brand-welfare-grid {
    grid-template-columns: 1fr;
  }

  .brand-profile-copy {
    gap: 24px;
    margin-top: 44px;
  }

  .brand-symbol-layout {
    gap: 44px;
  }

  .brand-symbol-mark {
    width: 82px;
    height: 82px;
  }

  .brand-symbol-values {
    flex-wrap: wrap;
  }

  .brand-symbol-media {
    height: 430px;
  }

  .brand-application-gallery {
    margin-top: 44px;
  }

  .brand-application-gallery img,
  .brand-application-gallery figure:first-child img {
    height: 300px;
  }

  .brand-ip,
  .brand-ip-layout {
    min-height: 0;
  }

  .brand-ip-layout {
    padding-top: 76px;
  }

  .brand-ip-features div {
    grid-template-columns: 96px 1fr;
  }

  .brand-ip-mascot img {
    width: 270px;
  }

  .brand-partner-grid {
    gap: 16px;
    margin-top: 44px;
  }

  .brand-partner-grid div {
    min-height: 112px;
  }

  .brand-partner-grid strong {
    font-size: 20px;
  }

  .brand-welfare-layout {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 44px;
  }

  .brand-welfare-years {
    display: flex;
    overflow-x: auto;
  }

  .brand-welfare-years li {
    flex: 0 0 auto;
    padding: 8px 18px;
  }

  .brand-welfare-years li::before {
    display: none;
  }
}

/* Brand story 1920px design calibration. Keep the existing DOM and adjust only layout. */
.brand-story-body .page-subnav {
  display: none;
}

@media (min-width: 769px) {
  .brand-story-hero {
    height: 701px;
    min-height: 701px;
  }

  .brand-story-hero-overlay {
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(0, 0, 0, 0.77) 12.5%,
      rgba(0, 0, 0, 0.64) 25%,
      rgba(0, 0, 0, 0.52) 37.5%,
      rgba(0, 0, 0, 0.52) 50%,
      rgba(0, 0, 0, 0.62) 62.5%,
      rgba(0, 0, 0, 0.75) 75%,
      rgba(0, 0, 0, 0.81) 87.5%,
      rgba(0, 0, 0, 0.82) 100%
    );
  }

  .brand-story-hero-content {
    padding-top: 274px;
  }

  .brand-story-hero-title {
    margin-bottom: 24px;
    font-size: 72px;
  }

  .brand-story-hero-subtitle {
    font-size: 26px;
  }

  .brand-story-page .brand-section-heading > p {
    margin-bottom: 6px;
    font-family: Arial, sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.08;
  }

  .brand-desktop-break {
    display: none;
  }

  .brand-story-page .brand-section-heading h2 {
    font-size: 46px;
    font-weight: 600;
    line-height: 1.2;
  }

  .brand-profile {
    position: relative;
    height: 1802px;
    padding: 85px 0 0;
    overflow: hidden;
    background: #000;
  }

  .brand-profile::after {
    content: "";
    position: absolute;
    top: 1030px;
    left: 0;
    width: 1920px;
    height: 1130px;
    background: url("../images/brand-story/profile-map.png") left top / 1920px 1130px no-repeat;
    filter: sepia(1) saturate(0.5);
    opacity: 0.3;
    pointer-events: none;
  }

  .brand-profile .brand-story-shell {
    position: relative;
    z-index: 1;
  }

  .brand-profile-lead {
    max-width: 1338px;
    margin: 69px auto 31px;
    font-size: 26px;
    line-height: 1.85;
    text-align: left;
    text-indent: 36px;
  }

  .brand-profile-media {
    width: 1403px;
    height: 503px;
  }

  .brand-profile-media img {
    object-fit: fill;
    object-position: center;
  }

  .brand-profile-metrics {
    width: 100%;
    max-width: 1403px;
    height: 403px;
    margin-top: -190px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 190px;
    box-sizing: border-box;
    background: transparent;
  }

  .brand-profile-metrics div {
    min-height: 0;
    height: 213px;
    background: #1d1812;
  }

  .brand-profile-metrics strong {
    font-size: 58px;
  }

  .brand-profile-metrics small {
    font-size: 22px;
  }

  .brand-profile-metrics span {
    margin-top: 20px;
    font-size: 20px;
  }

  .brand-profile-copy {
    display: block;
    max-width: 1400px;
    margin-top: 57px;
  }

  .brand-profile-copy p {
    font-size: 23px;
    line-height: 48px;
    text-indent: 36px;
  }

  .brand-profile-copy p + p {
    margin-top: 0;
  }

  .brand-symbol {
    position: relative;
    z-index: 3;
    height: 1028px;
    padding: 0;
    overflow: visible;
    background-image: url("../images/brand-story/symbol-wall.png");
    background-position: center -270px;
    background-size: 1920px 1298px;
    background-repeat: no-repeat;
  }

  .brand-symbol::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.32) 25%,
      rgba(0, 0, 0, 0.42) 40%,
      rgba(0, 0, 0, 0.6) 58%,
      rgba(0, 0, 0, 0.82) 77%,
      rgba(0, 0, 0, 0.86) 83%,
      rgba(0, 0, 0, 0.99) 88%,
      rgba(0, 0, 0, 1) 100%
    );
    pointer-events: none;
  }

  .brand-symbol-layout {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    grid-template-columns: 963px 957px;
    gap: 0;
    align-items: start;
  }

  .brand-symbol-copy {
    width: 520px;
    margin-left: 258px;
    padding: 162px 0 0;
  }

  .brand-symbol-mark {
    display: none;
  }

  .brand-symbol-media {
    align-self: start;
    width: 957px;
    height: 907px;
    margin-top: 287px;
  }

  .brand-symbol-media img {
    object-position: center;
  }

  .brand-symbol-copy > p {
    width: 675px;
    margin-top: 58px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 25px;
    line-height: 48px;
  }

  .brand-symbol-copy .brand-section-heading {
    color: #fff;
  }

  .brand-symbol-copy .brand-section-heading > p {
    color: rgba(255, 255, 255, 0.72);
  }

  .brand-symbol-scene {
    width: 456px;
    height: 320px;
    margin-top: 46px;
  }

  .brand-symbol-scene img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .brand-symbol-values {
    display: none;
  }

  .brand-application {
    position: relative;
    z-index: auto;
    height: 1316px;
    padding: 0;
    overflow: visible;
    background: #fff;
  }

  .brand-application .brand-story-shell {
    position: relative;
    height: 100%;
    opacity: 1;
    pointer-events: auto;
  }

  .brand-application-gallery {
    position: absolute;
    top: 600px;
    left: 0;
    display: block;
    width: 100%;
    margin: 0;
    z-index: 3;
  }

  .brand-application-gallery figure {
    position: absolute;
    margin: 0;
    overflow: hidden;
  }

  .brand-application-gallery figure:first-child {
    top: 160px;
    left: 0;
    width: 610px;
    height: 455px;
  }

  .brand-application-gallery figure:last-child {
    top: 0;
    left: 645px;
    width: 815px;
    height: 455px;
  }

  .brand-application-gallery img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .brand-application-gallery figure:first-child img {
    height: 100%;
  }

  .brand-application-gallery figcaption {
    display: none;
  }

  .brand-application-head {
    display: block;
  }

  .brand-application-head > .brand-section-heading {
    position: absolute;
    top: 140px;
    left: 0;
    transform: none;
  }

  .brand-application-head > .brand-section-heading p {
    font-size: 31px;
    line-height: 1;
  }

  .brand-application-head > .brand-section-heading h2 {
    margin-top: 10px;
    font-size: 42px;
    line-height: 1.1;
  }

  .brand-application-meaning {
    position: absolute;
    left: 0;
    top: 282px;
    width: 100%;
    height: 1157px;
    min-height: 0;
    z-index: 2;
    display: block;
  }

  .brand-application-meaning::before {
    content: "KLF BRAND";
    position: absolute;
    z-index: 0;
    left: 65px;
    top: 0;
    width: 324px;
    height: 1160px;
    min-height: 0;
    padding-top: 112px;
    color: rgba(255, 255, 255, 0.52);
    background: #c9a17c;
    font-size: 43px;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
  }

  .brand-application-tabs {
    position: absolute;
    top: 241px;
    left: 65px;
    z-index: 1;
    display: grid;
    gap: 31px;
    min-height: 0;
    padding: 0 0 0 92px;
    margin: 0;
  }

  .brand-application-tabs span {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
  }

  .brand-application-meaning > p {
    position: absolute;
    z-index: 1;
    top: 34px;
    left: 452px;
    width: 1010px;
    margin: 0;
    padding-bottom: 40px;
    border-bottom: 1px dashed rgba(201, 161, 124, 0.45);
    color: #666;
    font-size: 19px;
    line-height: 39px;
  }

  .brand-ip,
  .brand-ip-layout {
    height: 1072px;
    min-height: 1072px;
  }

  .brand-ip {
    position: relative;
    z-index: auto;
    color: #171717;
    overflow: hidden;
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.68) 0 372px, rgba(0, 0, 0, 0) 372px 947px, rgba(0, 0, 0, 0.82) 947px 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.52) 0 42%, rgba(0, 0, 0, 0.86) 62%, #000 100%),
      url("../images/brand-story/ip-family-bg.png") left -208px / 1680px 1280px no-repeat,
      #000;
  }

  .brand-ip-backdrop {
    display: none;
  }

  .brand-ip::after {
    display: none;
  }

  .brand-ip-layout {
    position: relative;
    display: block;
    z-index: 4;
    opacity: 1;
    pointer-events: auto;
  }

  .brand-ip-layout::before {
    content: "";
    position: absolute;
    top: 372px;
    left: -258px;
    width: 1621px;
    height: 575px;
    border-top-right-radius: 128px;
    background: #fff;
  }

  .brand-ip-copy {
    position: absolute;
    inset: 0;
    padding-left: 0;
  }

  .brand-ip-copy .brand-section-heading {
    position: absolute;
    top: 112px;
    left: 608px;
    color: #fff;
    z-index: 4;
  }

  .brand-ip-copy .brand-ip-name {
    position: absolute;
    top: 205px;
    left: 0;
    margin: 0;
    color: #c99f7a;
  }

  .brand-ip-copy .brand-ip-name strong {
    color: #fff;
  }

  .brand-ip-copy > .brand-ip-description {
    position: absolute;
    top: 412px;
    left: 4px;
    width: 760px;
    max-width: 760px;
    margin: 0;
    color: #777;
    font-size: 17.5px;
    line-height: 27px;
  }

  .brand-ip-description span {
    display: block;
    transform: none;
    transform-origin: left top;
    white-space: nowrap;
  }

  .brand-ip-description span.is-indented {
    padding-left: 36px;
  }

  .brand-ip-features {
    position: absolute;
    top: 772px;
    left: 0;
    display: grid;
    gap: 22px;
    width: 760px;
    margin: 0;
  }

  .brand-ip-features div {
    grid-template-columns: 180px 1fr;
    min-height: 48px;
    padding: 0;
    border: 0;
    align-items: center;
  }

  .brand-ip-features dt {
    padding: 10px 32px;
    border-radius: 28px;
    background: linear-gradient(90deg, #f2e5d8, #fff);
    font-size: 17px;
    white-space: nowrap;
  }

  .brand-ip-features dd {
    font-size: 17px;
  }

  .brand-ip-features dd {
    color: #777;
  }

  .brand-ip-mascot {
    position: absolute;
    top: 193px;
    right: 46px;
    width: 434px;
    margin: 0;
    z-index: 4;
  }

  .brand-partners {
    height: 1100px;
    padding: 164px 0 0;
    overflow: hidden;
  }

  .brand-partners .brand-section-heading {
    transform: translateY(-41px);
  }

  .brand-partner-grid div {
    position: relative;
    min-height: 184px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;
  }

  .brand-partner-grid {
    grid-template-columns: repeat(3, 397px);
    justify-content: space-between;
    max-width: 1404px;
    column-gap: 0;
    row-gap: 64px;
    margin-top: 71px;
    background: transparent;
  }

  .brand-partner-grid .brand-partner-item img {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }

  .brand-partner-grid img {
    max-width: 397px;
    max-height: 84px;
    object-fit: contain;
  }

  .brand-partner-grid span {
    position: absolute;
    top: 108px;
    left: 50%;
    transform: translateX(-50%);
    width: 303px;
    margin: 0;
    padding-top: 28px;
    font-size: 20px;
    text-align: center;
  }

  .brand-partner-grid span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 303px;
    height: 1px;
    background: rgba(0, 0, 0, 0.15);
  }

  .brand-welfare {
    position: relative;
    height: 960px;
    padding: 150px 0 0;
    overflow: hidden;
    background: #fff;
  }

  .brand-welfare::before {
    content: "";
    position: absolute;
    top: 0;
    left: 710px;
    width: 1210px;
    height: 896px;
    background: url("../images/brand-story/welfare-lines.png") center / 1210px 896px no-repeat;
    opacity: 0.2;
    pointer-events: none;
  }

  .brand-welfare .brand-story-shell {
    position: relative;
    z-index: 1;
  }

  .brand-welfare .brand-section-heading {
    transform: translateY(-17px);
  }

  .brand-welfare .brand-story-shell {
    width: 1662px;
    margin-right: 0;
    margin-left: 258px;
  }

  .brand-welfare-layout {
    grid-template-columns: 207px 1fr;
    gap: 54px;
    margin-top: 119px;
  }

  .brand-welfare-grid {
    grid-template-columns: 456px 456px 455px;
    gap: 17px;
  }

  .brand-welfare-grid article {
    display: flex;
    flex-direction: column;
    border: 0;
  }

  .brand-welfare-grid img {
    height: 320px;
    aspect-ratio: auto;
    flex-shrink: 0;
  }

  .brand-welfare-grid p {
    padding: 20px 0 0;
    font-size: 18px;
    line-height: 1.7;
  }

  .brand-welfare-lead {
    max-width: 1400px;
    margin-top: 34px;
    font-size: 20px;
  }

  .brand-welfare-years {
    max-height: 310px;
    padding-left: 40px;
  }

  .brand-welfare-years::before {
    left: 19px;
    top: 22px;
    bottom: 22px;
  }

  .brand-welfare-years li {
    min-height: 76px;
    padding: 18px 0;
    font-size: 24px;
  }

  .brand-welfare-years li::before {
    left: -32px;
    width: 23px;
    height: 23px;
    border-width: 2px;
  }

  .brand-welfare-years li.active {
    font-size: 28px;
    font-weight: 500;
  }

  .brand-welfare-years li.active::before {
    box-shadow: 0 0 0 6px rgba(185, 138, 98, 0.18);
  }
}

@media (min-width: 769px) {
  .brand-profile .brand-story-shell,
  .brand-application .brand-story-shell,
  .brand-ip-layout,
  .brand-partners .brand-story-shell {
    width: 1404px;
    margin-right: auto;
    margin-left: auto;
  }

  .brand-ip-copy .brand-ip-name {
    font-size: 17px;
  }

  .brand-ip-copy .brand-ip-name strong {
    margin-top: 8px;
    font-size: 36px;
    line-height: normal;
  }

  .brand-ip-features div {
    gap: 24px;
  }

  .brand-story-page + .footer {
    height: 516px;
    padding: 0;
    overflow: hidden;
    background: #272727;
  }

  .brand-story-page + .footer .container {
    position: relative;
    width: 1402px;
    height: 516px;
  }

  .brand-story-page + .footer .footer-inner {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .brand-story-page + .footer .footer-inner::after {
    content: "";
    position: absolute;
    top: 439px;
    left: 0;
    width: 1402px;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
  }

  .brand-story-page + .footer .footer-brand {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    height: 162px;
    padding: 35px 75px 0;
    overflow: visible;
  }

  .home-page + .footer .footer-brand {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    height: 162px;
    padding: 35px 75px 0;
    overflow: visible;
  }

  .news-index-page + .footer .footer-brand,
  .news-detail-page + .footer .footer-brand {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    height: 162px;
    padding: 35px 75px 0;
    overflow: visible;
  }

  .brand-story-page + .footer .footer-logo {
    width: 201px;
    margin-bottom: 25px;
  }

  .brand-story-page + .footer .footer-phone {
    position: absolute;
    top: 211px;
    left: 0;
    margin-bottom: 8px;
    color: #fff;
    font-size: 23px;
    line-height: 1;
  }

  .brand-story-page + .footer .footer-phone-label {
    position: absolute;
    top: 245px;
    left: 0;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.8);
  }

  .brand-story-page + .footer .footer-social {
    position: absolute;
    top: 302px;
    left: 0;
    gap: 14px;
  }

  .brand-story-page + .footer .footer-social a {
    flex: 0 0 52px;
    width: 52px;
    height: 50px;
    border: 0;
  }

  .brand-story-page + .footer .footer-social-icon {
    width: auto;
    height: auto;
    max-width: 48px;
    max-height: 38px;
    object-fit: contain;
    transform: translateY(-1px);
  }

  .brand-story-page + .footer .footer-links {
    position: absolute;
    top: 67px;
    left: 555px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 35px;
    width: 847px;
  }

  .brand-story-page + .footer .footer-column h4 {
    margin-bottom: 20px;
  }

  .brand-story-page + .footer .footer-column li {
    margin-bottom: 11px;
  }

  .brand-story-page + .footer .footer-bottom {
    position: absolute;
    right: 0;
    bottom: 36px;
    left: 0;
    padding: 0;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .brand-story-body .nav-submenu {
    position: absolute;
    top: 78px;
    left: 50%;
    z-index: 1001;
    min-width: 132px;
    padding: 8px 0;
    background: rgba(15, 15, 15, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
    backdrop-filter: blur(12px);
  }

  .brand-story-body .nav-submenu::before {
    display: block;
    top: -18px;
    height: 18px;
  }

  .brand-story-body .nav-item:hover .nav-submenu,
  .brand-story-body .nav-item:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .brand-story-body .nav-submenu-link {
    min-height: 0;
    padding: 9px 18px;
    font-size: 13px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .products-body .nav-submenu {
    position: absolute;
    top: 78px;
    left: 50%;
    z-index: 1001;
    min-width: 132px;
    padding: 8px 0;
    background: rgba(15, 15, 15, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
    backdrop-filter: blur(12px);
  }

  .products-body .nav-submenu::before {
    display: block;
    top: -18px;
    height: 18px;
  }

  .products-body .nav-item:hover .nav-submenu,
  .products-body .nav-item:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .products-body .nav-submenu-link {
    min-height: 0;
    padding: 9px 18px;
    font-size: 13px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .manufacturing-body .logo {
    align-items: center;
    gap: 30px;
    width: 205px;
    height: 44px;
  }

  .manufacturing-body .logo-image {
    width: 160px;
    height: 52px;
  }

  .manufacturing-body .logo-emblem {
    width: 41px;
    height: 42px;
  }

  .manufacturing-body .nav-submenu {
    position: absolute;
    top: 78px;
    left: 50%;
    z-index: 1001;
    min-width: 132px;
    padding: 8px 0;
    background: rgba(15, 15, 15, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
    backdrop-filter: blur(12px);
  }

  .manufacturing-body .nav-submenu::before {
    display: block;
    top: -18px;
    height: 18px;
  }

  .manufacturing-body .nav-item:hover .nav-submenu,
  .manufacturing-body .nav-item:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .manufacturing-body .nav-submenu-link {
    min-height: 0;
    padding: 9px 18px;
    font-size: 13px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .water-paint-body .logo {
    align-items: center;
    gap: 30px;
    width: 205px;
    height: 44px;
  }

  .water-paint-body .logo-image {
    width: 160px;
    height: 52px;
  }

  .water-paint-body .logo-emblem {
    width: 41px;
    height: 42px;
  }

  .water-paint-body .nav-submenu {
    position: absolute;
    top: 78px;
    left: 50%;
    z-index: 1001;
    min-width: 132px;
    padding: 8px 0;
    background: rgba(15, 15, 15, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
    backdrop-filter: blur(12px);
  }

  .water-paint-body .nav-submenu::before {
    display: block;
    top: -18px;
    height: 18px;
  }

  .water-paint-body .nav-item:hover .nav-submenu,
  .water-paint-body .nav-item:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .water-paint-body .nav-submenu-link {
    min-height: 0;
    padding: 9px 18px;
    font-size: 13px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .join-body .logo {
    align-items: center;
    gap: 30px;
    width: 205px;
    height: 44px;
  }

  .join-body .logo-image {
    width: 160px;
    height: 52px;
  }

  .join-body .logo-emblem {
    width: 41px;
    height: 42px;
  }

  .join-body .nav-submenu {
    position: absolute;
    top: 78px;
    left: 50%;
    z-index: 1001;
    min-width: 132px;
    padding: 8px 0;
    background: rgba(15, 15, 15, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
    backdrop-filter: blur(12px);
  }

  .join-body .nav-submenu::before {
    display: block;
    top: -18px;
    height: 18px;
  }

  .join-body .nav-item:hover .nav-submenu,
  .join-body .nav-item:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .join-body .nav-submenu-link {
    min-height: 0;
    padding: 9px 18px;
    font-size: 13px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .five-hearts-body .logo {
    align-items: center;
    gap: 30px;
    width: 205px;
    height: 44px;
  }

  .five-hearts-body .logo-image {
    width: 160px;
    height: 52px;
  }

  .five-hearts-body .logo-emblem {
    width: 41px;
    height: 42px;
  }

  .five-hearts-body .nav-submenu {
    position: absolute;
    top: 78px;
    left: 50%;
    z-index: 1001;
    min-width: 132px;
    padding: 8px 0;
    background: rgba(15, 15, 15, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
    backdrop-filter: blur(12px);
  }

  .five-hearts-body .nav-submenu::before {
    display: block;
    top: -18px;
    height: 18px;
  }

  .five-hearts-body .nav-item:hover .nav-submenu,
  .five-hearts-body .nav-item:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .five-hearts-body .nav-submenu-link {
    min-height: 0;
    padding: 9px 18px;
    font-size: 13px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .honors-body .logo {
    align-items: center;
    gap: 30px;
    width: 205px;
    height: 44px;
  }

  .honors-body .logo-image {
    width: 160px;
    height: 52px;
  }

  .honors-body .logo-emblem {
    width: 41px;
    height: 42px;
  }

  .honors-body .nav-submenu {
    position: absolute;
    top: 78px;
    left: 50%;
    z-index: 1001;
    min-width: 132px;
    padding: 8px 0;
    background: rgba(15, 15, 15, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
    backdrop-filter: blur(12px);
  }

  .honors-body .nav-submenu::before {
    display: block;
    top: -18px;
    height: 18px;
  }

  .honors-body .nav-item:hover .nav-submenu,
  .honors-body .nav-item:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .honors-body .nav-submenu-link {
    min-height: 0;
    padding: 9px 18px;
    font-size: 13px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .cases-body .logo {
    align-items: center;
    gap: 30px;
    width: 205px;
    height: 44px;
  }

  .cases-body .logo-image {
    width: 160px;
    height: 52px;
  }

  .cases-body .logo-emblem {
    width: 41px;
    height: 42px;
  }

  .cases-body .nav-submenu {
    position: absolute;
    top: 78px;
    left: 50%;
    z-index: 1001;
    min-width: 132px;
    padding: 8px 0;
    background: rgba(15, 15, 15, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
    backdrop-filter: blur(12px);
  }

  .cases-body .nav-submenu::before {
    display: block;
    top: -18px;
    height: 18px;
  }

  .cases-body .nav-item:hover .nav-submenu,
  .cases-body .nav-item:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .cases-body .nav-submenu-link {
    min-height: 0;
    padding: 9px 18px;
    font-size: 13px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .contact-body .logo {
    align-items: center;
    gap: 30px;
    width: 205px;
    height: 44px;
  }

  .contact-body .logo-image {
    width: 160px;
    height: 52px;
  }

  .contact-body .logo-emblem {
    width: 41px;
    height: 42px;
  }

  .contact-body .nav-submenu {
    position: absolute;
    top: 78px;
    left: 50%;
    z-index: 1001;
    min-width: 132px;
    padding: 8px 0;
    background: rgba(15, 15, 15, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
    backdrop-filter: blur(12px);
  }

  .contact-body .nav-submenu::before {
    display: block;
    top: -18px;
    height: 18px;
  }

  .contact-body .nav-item:hover .nav-submenu,
  .contact-body .nav-item:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .contact-body .nav-submenu-link {
    min-height: 0;
    padding: 9px 18px;
    font-size: 13px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .stores-body .logo {
    align-items: center;
    gap: 30px;
    width: 205px;
    height: 44px;
  }

  .stores-body .logo-image {
    width: 160px;
    height: 52px;
  }

  .stores-body .logo-emblem {
    width: 41px;
    height: 42px;
  }

  .stores-body .nav-submenu {
    position: absolute;
    top: 78px;
    left: 50%;
    z-index: 1001;
    min-width: 132px;
    padding: 8px 0;
    background: rgba(15, 15, 15, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
    backdrop-filter: blur(12px);
  }

  .stores-body .nav-submenu::before {
    display: block;
    top: -18px;
    height: 18px;
  }

  .stores-body .nav-item:hover .nav-submenu,
  .stores-body .nav-item:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .stores-body .nav-submenu-link {
    min-height: 0;
    padding: 9px 18px;
    font-size: 13px;
  }
}

/* News pages: restore the absolute-floating submenu in the 769-1024 px
   middle band so brand-story/water-paint/cases-style header behavior
   matches the rest of the site. Without this, (max-width: 1024px) below
   forces .nav-submenu { position: static; opacity: 1 } and the children
   spill out as a vertical inline list under each nav item. */
@media (min-width: 769px) and (max-width: 1024px) {
  .news-page .nav-submenu,
  .news-index-page .nav-submenu,
  .news-detail-body .nav-submenu {
    position: absolute;
    top: 78px;
    left: 50%;
    z-index: 1001;
    min-width: 132px;
    padding: 8px 0;
    background: rgba(15, 15, 15, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
    backdrop-filter: blur(12px);
  }

  .news-page .nav-submenu::before,
  .news-index-page .nav-submenu::before,
  .news-detail-body .nav-submenu::before {
    display: block;
    top: -18px;
    height: 18px;
  }

  .news-page .nav-item:hover .nav-submenu,
  .news-page .nav-item:focus-within .nav-submenu,
  .news-index-page .nav-item:hover .nav-submenu,
  .news-index-page .nav-item:focus-within .nav-submenu,
  .news-detail-body .nav-item:hover .nav-submenu,
  .news-detail-body .nav-item:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .news-page .nav-submenu-link,
  .news-index-page .nav-submenu-link,
  .news-detail-body .nav-submenu-link {
    min-height: 0;
    padding: 9px 18px;
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .brand-symbol-scene {
    margin-top: 32px;
  }

  .brand-application-meaning {
    margin-top: 30px;
  }

  .brand-application-tabs {
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 20px;
  }

  .brand-application-tabs span {
    padding-bottom: 6px;
    border-bottom: 1px solid #c9a17c;
    color: #8f6b4c;
    font-size: 14px;
    font-weight: 600;
  }

  .brand-partner-grid img {
    max-width: 250px;
    max-height: 54px;
    object-fit: contain;
  }
}

/* Water paint desktop alignment against the 1920px PSD. */
@media (min-width: 769px) {
  .water-paint-page .inner-hero {
    display: block;
    height: 701px;
    min-height: 701px;
  }

  .water-paint-page .inner-hero::before {
    background: linear-gradient(
      90deg,
      rgba(6, 5, 4, 0.82) 0%,
      rgba(6, 5, 4, 0.77) 12.5%,
      rgba(6, 5, 4, 0.64) 25%,
      rgba(6, 5, 4, 0.52) 37.5%,
      rgba(6, 5, 4, 0.52) 50%,
      rgba(6, 5, 4, 0.62) 62.5%,
      rgba(6, 5, 4, 0.75) 75%,
      rgba(6, 5, 4, 0.81) 87.5%,
      rgba(6, 5, 4, 0.82) 100%
    );
  }

  .water-paint-page .inner-hero-content {
    width: min(1100px, calc(100% - 120px));
    margin: 0 auto;
    padding-top: 274px;
  }

  .water-paint-page .inner-hero-title {
    font-size: 72px;
    line-height: 1.08;
    letter-spacing: 0;
  }

  .water-paint-page .inner-hero-subtitle {
    margin-top: 24px;
    font-size: 26px;
    line-height: 1.4;
  }

  .water-process-section {
    height: 1036px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .water-process-section .inner-shell {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .water-process-section .inner-shell > div {
    position: absolute;
    top: 244px;
    left: 13.49%;
    width: 510px;
  }

  .water-process-section .inner-eyebrow {
    font-size: 52px;
    line-height: 0.92;
    -webkit-text-stroke-width: 1px;
    transform: skewX(-6deg) scaleX(1.3);
  }

  .water-process-section .inner-title {
    margin-top: 4px;
    font-size: 42px;
  }

  .water-process-section .inner-copy {
    margin-top: 31px;
    font-size: 18px;
    line-height: 2;
  }

  .water-process-section .inner-metrics {
    gap: 52px;
    margin-top: 56px;
  }

  .water-process-section .inner-metric strong {
    font-size: 46px;
  }

  .water-process-section .water-process-media {
    position: absolute;
    top: 197px;
    left: 49.79%;
    width: 50.21%;
    height: 608px;
    min-height: 0;
    overflow: hidden;
  }

  .water-process-section .water-process-media img {
    position: absolute;
    top: -228px;
    left: -13.17%;
    width: 113.17%;
    height: 1066px;
    max-width: none;
    object-fit: fill;
  }

  .water-family-band {
    height: 600px;
    min-height: 0;
    display: block;
    overflow: visible;
  }

  .water-family-band::after {
    content: "";
    position: absolute;
    top: 0;
    right: 8.15%;
    width: 14px;
    height: 333px;
    background: repeating-linear-gradient(to bottom, #c9a77c 0 2px, transparent 2px 5px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, 0.72) 68%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, 0.72) 68%, transparent 100%);
  }

  .water-family-band > img {
    top: -102px;
    right: auto;
    bottom: auto;
    left: 8.8%;
    width: 45.1%;
    height: 637px;
    object-fit: cover;
    object-position: center;
  }

  .water-family-copy {
    position: absolute;
    top: 100px;
    left: 60.05%;
    width: 520px;
    margin: 0;
    padding: 0;
  }

  .water-family-copy h2 {
    margin-top: 0;
    font-size: 46px;
  }

  .water-family-copy > p:not(.inner-kicker) {
    max-width: 500px;
    margin-top: 68px;
    color: #d8b58c;
    font-size: 20px;
    line-height: 1.5;
  }

  .water-family-copy .inner-metrics {
    gap: 94px;
    margin-top: 65px;
  }

  .water-family-copy .inner-metric {
    width: 107px;
    text-align: center;
  }

  .water-family-copy .inner-metric strong {
    width: 107px;
    height: 107px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(201, 167, 124, 0.7);
    border-radius: 50%;
    color: #d8b58c;
    font-size: 0;
  }

  .water-family-metric-icon {
    width: 62px;
    height: 62px;
    object-fit: contain;
  }

  .water-family-copy .inner-metric:last-child .water-family-metric-icon {
    width: 37px;
    height: 58px;
  }

  .water-family-copy .inner-metric span {
    display: block;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 16px;
  }

  .inner-section.water-wood {
    height: 801px;
    min-height: 0;
    display: block;
    padding: 0;
    background-color: #17120f;
    background-position: 100% 0;
    background-size: 76.61% 661px;
  }

  .water-wood .inner-shell {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100%;
  }

  .water-wood .inner-shell > * {
    position: absolute;
    left: 13.49%;
    width: 520px;
  }

  .water-wood .inner-title {
    top: 158px;
    font-size: 42px;
  }

  .water-wood-summary {
    top: 282px;
    display: flex;
    gap: 30px;
    color: #c9a77c;
    font-size: 24px;
    font-weight: 500;
    white-space: nowrap;
  }

  .water-wood .inner-metrics {
    top: 380px;
    width: 610px;
    gap: 144px;
    margin: 0;
    flex-wrap: nowrap;
  }

  .water-wood .inner-metric {
    flex: 0 0 107px;
    width: 107px;
    text-align: center;
  }

  .water-wood .inner-metric strong {
    width: 107px;
    height: 107px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(201, 167, 124, .7);
    border-radius: 50%;
    font-size: 0;
  }

  .water-wood-metric-icon {
    width: 62px;
    height: 62px;
    object-fit: contain;
  }

  .water-wood .inner-metric:last-child .water-wood-metric-icon {
    width: 37px;
    height: 58px;
  }

  .water-wood .inner-metric span {
    display: block;
    width: 170px;
    margin-top: 12px;
    color: #c9a77c;
    font-size: 18px;
    white-space: nowrap;
    transform: translateX(-31px);
  }

  .water-wood .inner-metric span b {
    font-size: 28px;
    font-weight: 500;
  }

  .water-standards-section {
    z-index: 3;
    height: 363px;
    min-height: 0;
    padding: 0;
    overflow: visible;
  }

  .water-standards-section::before {
    content: "";
    position: absolute;
    top: -102px;
    left: 0;
    width: 100%;
    height: 465px;
    background: #fff;
  }

  .water-standards-section .inner-shell {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100%;
  }

  .water-standards {
    position: absolute;
    top: 0;
    left: 12.45%;
    z-index: 1;
    width: 74.53%;
    height: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
    border: 0;
  }

  .water-standard {
    position: relative;
    top: -28px;
    height: 391px;
    min-height: 0;
    padding: 0 20px;
    border: 0;
    transition: background-color 0.34s ease, color 0.34s ease, top 0.34s ease, height 0.34s ease, padding-top 0.34s ease;
  }

  .water-standard:first-child {
    top: -102px;
    height: 465px;
    padding-top: 74px;
  }

  .water-standards:has(.water-standard:hover) .water-standard:first-child:not(:hover) {
    top: -28px;
    height: 391px;
    padding-top: 0;
  }

  .water-standards .water-standard:hover {
    top: -102px;
    height: 589px;
    padding-top: 74px;
  }

  .water-standard .inner-feature-icon {
    width: 167px;
    height: 167px;
    margin: 0 auto 42px;
    color: #c9a77c;
    font-size: 0;
  }

  .water-standard-icon {
    width: 78px;
    height: 78px;
    object-fit: contain;
  }

  .water-standard:hover .inner-feature-icon {
    color: #fff;
  }

  .water-standard:hover .water-standard-icon {
    filter: brightness(0) invert(1);
  }

  .water-standard h2 {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;
  }

  .water-standard p {
    margin-top: 18px;
    color: #bbb;
    font-size: 16px;
    line-height: 1.9;
  }

  .water-standard:hover p {
    color: rgba(255, 255, 255, 0.72);
  }

  .inner-section.water-certificates {
    z-index: 1;
    height: 1890px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
  }

  .water-certificates::before,
  .water-certificates::after {
    content: "";
    position: absolute;
    left: 9.32%;
    z-index: 1;
    width: 81.35%;
    height: 81px;
    background: url("../images/water-paint/layers/certificate-shelf.png") center / 100% 81px no-repeat;
  }

  .water-certificates::before {
    top: 870px;
  }

  .water-certificates::after {
    top: 1447px;
  }

  .water-certificates > .inner-shell {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100%;
  }

  .water-certificates .inner-section-head {
    position: static;
    display: block !important;
    margin: 0;
  }

  .water-certificates .inner-section-head > div:first-child {
    position: absolute;
    top: 280px;
    left: 0;
    width: 100%;
    text-align: center;
  }

  .water-certificates .inner-eyebrow {
    color: #aaa;
    font-size: 40px;
    font-weight: 500;
    line-height: 1;
  }

  .water-certificates .inner-title {
    margin-top: 4px;
    font-size: 46px;
    font-weight: 400;
  }

  .water-certificates .inner-scroll {
    position: absolute;
    inset: 0;
    overflow: visible;
  }

  .water-certificates .certificate-track {
    position: absolute;
    top: 477px;
    left: 13.59%;
    z-index: 2;
    width: 72.86%;
    display: grid;
    grid-template-columns: repeat(4, 19.37%);
    grid-template-rows: 404px 404px;
    column-gap: 7.5%;
    row-gap: 193px;
  }

  .water-certificates .certificate-card {
    width: 100%;
    height: 404px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: transparent;
  }

  .water-certificates .certificate-card img {
    width: 100%;
    height: auto;
    max-height: 404px;
    aspect-ratio: auto;
    object-fit: contain;
  }

  .water-certificates .certificate-card:nth-child(n + 5) {
    transform: translateY(-20px);
  }

  .water-certificates .inner-controls {
    position: absolute;
    top: 1633px;
    right: 13.49%;
    z-index: 3;
    gap: 56px;
  }

  .water-certificates .inner-arrow {
    width: 100px;
    height: 100px;
    border-color: rgba(255, 255, 255, 0.48);
    color: rgba(255, 255, 255, 0.78);
    font-size: 32px;
  }

  .water-certificates .inner-arrow:last-child {
    color: #111;
    background: #fff;
    border-color: #fff;
  }

  .water-paint-page + .footer {
    height: 517px;
    padding: 0;
    overflow: hidden;
    background: #272727;
  }

  .water-paint-page + .footer .container {
    position: relative;
    width: 1402px;
    height: 518px;
  }

  .water-paint-page + .footer .footer-inner {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .water-paint-page + .footer .footer-inner::after {
    content: "";
    position: absolute;
    top: 439px;
    left: 0;
    width: 1402px;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
  }

  .water-paint-page + .footer .footer-brand {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    height: 162px;
    padding: 36px 75px 0;
    overflow: visible;
  }

  .water-paint-page + .footer .footer-logo {
    width: 201px;
    margin-bottom: 25px;
  }

  .water-paint-page + .footer .footer-phone {
    position: absolute;
    top: 211px;
    left: 0;
    margin-bottom: 8px;
    color: #fff;
    font-size: 23px;
    line-height: 1;
  }

  .water-paint-page + .footer .footer-phone-label {
    position: absolute;
    top: 245px;
    left: 0;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.8);
  }

  .water-paint-page + .footer .footer-social {
    position: absolute;
    top: 302px;
    left: 0;
    gap: 14px;
  }

  .water-paint-page + .footer .footer-social a {
    flex: 0 0 52px;
    width: 52px;
    height: 50px;
    border: 0;
  }

  .water-paint-page + .footer .footer-social-icon {
    width: auto;
    height: auto;
    max-width: 48px;
    max-height: 38px;
    object-fit: contain;
    transform: translateY(-1px);
  }

  .water-paint-page + .footer .footer-links {
    position: absolute;
    top: 67px;
    left: 555px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 35px;
    width: 847px;
  }

  .water-paint-page + .footer .footer-column h4 {
    margin-bottom: 20px;
  }

  .water-paint-page + .footer .footer-column li {
    height: 25.6px;
    margin-bottom: 11px;
  }

  .water-paint-page + .footer .footer-bottom {
    position: absolute;
    right: 0;
    bottom: 36px;
    left: 0;
    padding: 0;
  }
}

/* Join page desktop alignment against the 1920px PSD. */
@media (min-width: 769px) {
  .join-page .inner-hero {
    display: block;
    height: 701px;
    min-height: 701px;
  }

  .join-page .inner-hero::before {
    background: rgba(6, 5, 4, 0.72);
  }

  .join-page .inner-hero-content {
    width: min(1100px, calc(100% - 120px));
    margin: 0 auto;
    padding-top: 274px;
  }

  .join-page .inner-hero-title {
    font-size: 72px;
    line-height: 1.08;
    letter-spacing: 0;
  }

  .join-page .inner-hero-subtitle {
    margin-top: 24px;
    font-size: 26px;
    line-height: 1.4;
  }

  .join-advantage-section {
    height: 952px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .join-advantage-section .inner-shell {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100%;
  }

  .join-advantage-section .inner-section-head {
    position: absolute;
    top: 145px;
    left: 13.49%;
    margin: 0;
  }

  .join-advantage-section .inner-eyebrow {
    font-size: 28px;
  }

  .join-advantage-section .inner-title {
    margin-top: 12px;
    font-size: 42px;
  }

  .join-advantage-grid {
    position: absolute;
    inset: 0;
    display: block;
  }

  .join-advantage-grid > figure {
    position: absolute;
  }

  .join-advantage-grid > figure:first-child {
    top: 306px;
    left: 13.49%;
    width: 508px;
  }

  .join-advantage-grid > figure:first-child img {
    width: 508px;
    height: 340px;
    aspect-ratio: auto;
    object-fit: cover;
  }

  .join-advantage-grid > figure:first-child figcaption {
    margin-top: 34px;
  }

  .join-advantage-grid > figure:first-child h3 {
    font-size: 24px;
    font-weight: 500;
  }

  .join-advantage-grid > figure:first-child .inner-copy {
    width: 760px;
    margin-top: 16px;
    font-size: 16px;
  }

  .join-advantage-grid > figure:nth-child(2) {
    top: 446px;
    left: 40.57%;
    width: 301px;
  }

  .join-advantage-grid > figure:nth-child(2) img {
    width: 301px;
    height: 202px;
    aspect-ratio: auto;
    object-fit: cover;
  }

  .join-orbit {
    position: absolute;
    top: 344px;
    left: 61.77%;
    width: 512px;
    height: 512px;
    aspect-ratio: auto;
  }

  .inner-section.join-support {
    z-index: 3;
    height: 422px;
    min-height: 0;
    padding: 0;
    overflow: visible;
    background-position: center -371px;
    background-size: 1920px 1458px;
  }

  .join-support .inner-shell {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100%;
  }

  .join-support .inner-section-head {
    position: absolute;
    top: 65px;
    left: 13.49%;
    margin: 0;
  }

  .join-support .inner-eyebrow {
    color: #fff;
    font-size: 28px;
  }

  .join-support .inner-title {
    margin-top: 10px;
    font-size: 42px;
  }

  .join-support .inner-feature-grid {
    position: absolute;
    top: 265px;
    left: 13.49%;
    z-index: 2;
    width: 73.07%;
    height: 291px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    background: #aa8969;
  }

  .join-support .inner-feature {
    min-height: 0;
    height: 291px;
    padding: 70px 10px 0;
    text-align: center;
    background: transparent;
  }

  .join-support .inner-feature-icon {
    width: 108px;
    height: 108px;
    margin: 0 auto 30px;
    border-color: rgba(255, 255, 255, 0.9);
    color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 54px;
  }

  .join-support .inner-feature:nth-child(1) .inner-feature-icon { background-image: url("../images/join/layers/support-icon-1.png"); }
  .join-support .inner-feature:nth-child(2) .inner-feature-icon { background-image: url("../images/join/layers/support-icon-2.png"); }
  .join-support .inner-feature:nth-child(3) .inner-feature-icon { background-image: url("../images/join/layers/support-icon-3.png"); }
  .join-support .inner-feature:nth-child(4) .inner-feature-icon { background-image: url("../images/join/layers/support-icon-4.png"); }
  .join-support .inner-feature:nth-child(5) .inner-feature-icon { background-image: url("../images/join/layers/support-icon-5.png"); }
  .join-support .inner-feature:nth-child(6) .inner-feature-icon { background-image: url("../images/join/layers/support-icon-6.png"); }

  .join-support .inner-feature h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 400;
  }

  .join-support .inner-feature p {
    display: none;
  }

  .join-requirements-section {
    z-index: 1;
    height: 1875px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
  }

  .join-requirements-section::before {
    content: "";
    position: absolute;
    top: -489px;
    right: 0;
    z-index: 0;
    width: 366px;
    height: 2363px;
    background: url("../images/join/layers/requirements-ribbon.png") center / contain no-repeat;
    pointer-events: none;
  }

  .join-requirements-section .inner-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    height: 100%;
  }

  .join-requirements-section .inner-section-head {
    position: absolute;
    top: 178px;
    left: 0;
    width: 100%;
    margin: 0;
  }

  .join-requirements-section .inner-eyebrow {
    font-size: 36px;
    font-weight: 500;
  }

  .join-requirements-section .inner-title {
    margin-top: 12px;
    font-size: 48px;
  }

  .join-requirements {
    position: absolute;
    inset: 0;
    display: block;
  }

  .join-requirement {
    position: absolute;
    left: 13.49%;
    width: 73.07%;
    height: 403px;
    display: block;
    overflow: hidden;
  }

  .join-requirement:nth-child(1) { top: 424px; }
  .join-requirement:nth-child(2) { top: 884px; }
  .join-requirement:nth-child(3) { top: 1344px; }

  .join-requirement img {
    position: absolute;
    max-width: none;
    aspect-ratio: auto;
    object-fit: fill;
  }

  .join-requirement:nth-child(1) img,
  .join-requirement:nth-child(2) img,
  .join-requirement:nth-child(3) img {
    top: 0;
    left: 0;
    width: 750px;
    height: 452px;
    clip-path: none;
  }

  .join-requirement > div {
    position: absolute;
    top: 54px;
    left: 786px;
    width: 617px;
    height: 349px;
  }

  .join-requirement > div::before {
    display: block;
    position: absolute;
    top: -25px;
    left: -22px;
    color: #eee3d8;
    font-size: 118px;
    font-weight: 700;
    line-height: 1;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, 0.45) 62%, transparent 86%);
    mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, 0.45) 62%, transparent 86%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .join-requirement:nth-child(1) > div::before { content: "1"; }
  .join-requirement:nth-child(2) > div::before { content: "2"; }
  .join-requirement:nth-child(3) > div::before { content: "3"; }

  .join-requirement h3,
  .join-requirement ul,
  .join-requirement .join-link {
    position: relative;
    z-index: 1;
  }

  .join-requirement h3 {
    font-size: 30px;
  }

  .join-requirement ul {
    margin-top: 46px;
    font-size: 16px;
    line-height: 2;
  }

  .join-requirement .join-link {
    position: absolute;
    top: 276px;
    left: 0;
    width: 204px;
    min-width: 0;
    height: 73px;
  }

  .inner-section.join-process-section {
    position: relative;
    height: 829px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
  }

  .join-process-section::before,
  .join-process-section::after {
    content: "";
    position: absolute;
    z-index: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .join-process-section::before {
    top: 124px;
    left: 62.34%;
    width: 301px;
    height: 97px;
    background-image: url("../images/join/layers/process-logo-v2.png");
  }

  .join-process-section::after {
    top: 134px;
    left: 81.67%;
    width: 94px;
    height: 94px;
    background-image: url("../images/join/layers/process-emblem.png");
  }

  .join-process-section .inner-shell {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100%;
  }

  .join-process-section .inner-section-head {
    position: absolute;
    top: 120px;
    left: 13.49%;
    z-index: 2;
    margin: 0;
  }

  .join-process-section .inner-eyebrow {
    font-size: 36px;
    font-weight: 500;
  }

  .join-process-section .inner-title {
    margin-top: 12px;
    font-size: 48px;
  }

  .join-process {
    position: absolute;
    top: 299px;
    left: 13.49%;
    width: 73.07%;
    height: 391px;
    display: grid;
    grid-template-columns: 163px repeat(7, minmax(0, 1fr));
    gap: 0;
    background: transparent;
  }

  .join-process-step {
    height: 391px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 96px 8px 0;
    background: #000;
    cursor: pointer;
  }

  .join-process-step::before {
    content: "";
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: filter .34s ease, transform .34s cubic-bezier(.22,.61,.36,1);
  }

  .join-process-step:nth-child(1)::before { background-image: url("../images/join/layers/process-icon-1.png"); }
  .join-process-step:nth-child(2)::before { background-image: url("../images/join/layers/process-icon-2.png"); }
  .join-process-step:nth-child(3)::before { background-image: url("../images/join/layers/process-icon-3.png"); }
  .join-process-step:nth-child(4)::before { background-image: url("../images/join/layers/process-icon-4.png"); }
  .join-process-step:nth-child(5)::before { background-image: url("../images/join/layers/process-icon-5.png"); }
  .join-process-step:nth-child(6)::before { background-image: url("../images/join/layers/process-icon-6.png"); }
  .join-process-step:nth-child(7)::before { background-image: url("../images/join/layers/process-icon-7.png"); }
  .join-process-step:nth-child(8)::before { background-image: url("../images/join/layers/process-icon-8.png"); }

  .join-process-step:first-child {
    background: #c9a77c;
  }

  .join-process.has-active .join-process-step:first-child {
    background: #000;
  }

  .join-process-step.is-active,
  .join-process.has-active .join-process-step:first-child.is-active {
    background: #c9a77c;
    transform: translateY(-8px);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
  }

  .join-process-step.is-active::before {
    filter: brightness(0) invert(1);
    transform: translateY(-4px) scale(1.04);
  }

  .join-process-step span {
    margin-top: 24px;
    color: #fff;
    font-size: 22px;
  }

  .join-process-step strong {
    margin-top: 18px;
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
  }

  .join-store {
    position: relative;
    z-index: 1;
    height: 850px;
    min-height: 850px;
    display: block;
    overflow: visible;
    background-image: none !important;
    background-position: center top;
    background-size: 1920px 850px;
  }

  .join-store::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 850px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.48)), var(--join-store-image, url("../images/join/layers/store.png"));
    background-position: center, var(--join-store-position, center top);
    background-size: 100% 100%, var(--join-store-size, 1920px 850px);
    background-repeat: no-repeat;
    pointer-events: none;
  }

  .join-store-copy {
    position: absolute;
    top: 145px;
    left: 13.49%;
    z-index: 1;
    width: 590px;
    margin: 0;
  }

  .join-store-copy .inner-eyebrow {
    color: #fff;
    font-size: 36px;
  }

  .join-store-copy h2 {
    margin-top: 10px;
    font-size: 48px;
  }

  .join-store-details {
    position: absolute;
    top: 252px;
    left: 0;
    width: 650px;
  }

  .join-store-name {
    color: #fff;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.3;
  }

  .join-store-details .inner-copy {
    margin-top: 46px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 20px;
    line-height: 1.9;
  }

  .join-store-locations {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40px;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    color: rgba(255, 255, 255, 0.72);
    font-size: 17px;
    text-align: center;
  }

  .join-store-locations span {
    position: relative;
    padding: 0 18px;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease, opacity .2s ease;
  }

  .join-store-locations span + span::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.72);
  }

  .join-store-locations .active,
  .join-store-locations span:hover,
  .join-store-locations span:focus-visible {
    color: #fff;
    font-weight: 500;
  }

  .join-store-locations span:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.75);
    outline-offset: 8px;
  }

  .join-application-section {
    position: relative;
    height: 1203px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .join-application-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 223px;
    display: none;
    background-image: linear-gradient(rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.48)), var(--join-store-continuation-image, url("../images/join/layers/store.png"));
    background-position: center, center -776px;
    background-size: 100% 100%, var(--join-store-continuation-size, 1920px 850px);
    background-repeat: no-repeat;
  }

  .join-application-grid {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }

  .join-application-image {
    position: absolute;
    top: 303px;
    left: 0;
    width: 995px;
    height: 843px;
    min-height: 0;
    overflow: hidden;
  }

  .join-application-image img {
    position: absolute;
    top: -303px;
    left: 0;
    width: 1920px;
    height: 1390px;
    max-width: none;
    object-fit: fill;
  }

  .join-form {
    position: absolute;
    top: 154px;
    left: 56.3%;
    width: 580px;
    height: 1045px;
    display: block;
  }

  .join-form > div:first-child {
    position: absolute;
    top: 158px;
    left: 0;
    width: 100%;
  }

  .join-form .inner-eyebrow {
    font-size: 36px;
  }

  .join-form .inner-title {
    margin-top: 10px;
    font-size: 42px;
  }

  .join-form .inner-copy {
    display: none;
  }

  .join-form label {
    position: absolute;
    left: 0;
    width: 100%;
  }

  .join-form label::before {
    content: "";
    position: absolute;
    top: 29px;
    left: 40px;
    z-index: 1;
    width: 28px;
    height: 28px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .join-form label:nth-of-type(1)::before { background-image: url("../images/join/layers/form-icon-1.png"); }
  .join-form label:nth-of-type(2)::before { background-image: url("../images/join/layers/form-icon-2.png"); }
  .join-form label:nth-of-type(3)::before { background-image: url("../images/join/layers/form-icon-3.png"); }

  .join-form label:nth-of-type(1) { top: 309px; }
  .join-form label:nth-of-type(2) { top: 423px; }
  .join-form label:nth-of-type(3) { top: 537px; }

  .join-form input {
    height: 87px;
    padding: 0 76px;
    font-size: 16px;
  }

  .join-submit {
    position: absolute;
    top: 677px;
    left: 0;
    width: 100%;
    height: 86px;
  }

  .join-form-status {
    position: absolute;
    top: 775px;
    left: 0;
  }

  .join-form-qr {
    position: absolute;
    top: 819px;
    left: 2px;
    width: 174px;
    height: 171px;
    margin: 0;
  }

  .join-page + .footer {
    height: 538px;
    padding: 0;
    overflow: hidden;
    background: #272727;
  }

  .join-page + .footer .container {
    position: relative;
    width: 1402px;
    height: 518px;
  }

  .join-page + .footer .footer-inner {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .join-page + .footer .footer-inner::after {
    content: "";
    position: absolute;
    top: 439px;
    left: 0;
    width: 1402px;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
  }

  .join-page + .footer .footer-brand {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    height: 162px;
    padding: 36px 75px 0;
    overflow: visible;
  }

  .join-page + .footer .footer-logo {
    width: 201px;
    margin-bottom: 25px;
  margin-left: auto;
    margin-right: auto;
  }

  .join-page + .footer .footer-phone {
    position: absolute;
    top: 211px;
    left: 0;
    margin-bottom: 8px;
    color: #fff;
    font-size: 23px;
    line-height: 1;
  }

  .join-page + .footer .footer-phone-label {
    position: absolute;
    top: 245px;
    left: 0;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.8);
  }

  .join-page + .footer .footer-social {
    position: absolute;
    top: 302px;
    left: 0;
    gap: 14px;
  }

  .join-page + .footer .footer-social a {
    flex: 0 0 52px;
    width: 52px;
    height: 50px;
    border: 0;
  }

  .join-page + .footer .footer-social-icon {
    width: auto;
    height: auto;
    max-width: 48px;
    max-height: 38px;
    object-fit: contain;
    transform: translateY(-1px);
  }

  .join-page + .footer .footer-links {
    position: absolute;
    top: 67px;
    left: 555px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 35px;
    width: 847px;
  }

  .join-page + .footer .footer-column h4 {
    margin-bottom: 20px;
  }

  .join-page + .footer .footer-column li {
    height: 25.6px;
    margin-bottom: 11px;
  }

  .join-page + .footer .footer-bottom {
    position: absolute;
    right: 0;
    bottom: 36px;
    left: 0;
    padding: 0;
  }
}

/* Five hearts desktop alignment against the 1920px PSD. */
@media (min-width: 769px) {
  .five-hearts-page .inner-hero { display: block; height: 701px; min-height: 701px; }
  .five-hearts-page .inner-hero::before { background: rgba(6, 5, 4, 0.72); }
  .five-hearts-page .inner-hero-content { width: min(1200px, calc(100% - 120px)); margin: 0 auto; padding-top: 274px; }
  .five-hearts-page .inner-hero-title { font-size: 72px; line-height: 1.08; letter-spacing: 0; }
  .five-hearts-page .inner-hero-subtitle { margin-top: 24px; font-size: 26px; line-height: 1.4; }

  .heart-assurance,
  .heart-precision,
  .heart-craft,
  .heart-service,
  .heart-potential { position: relative; min-height: 0; padding: 0; overflow: hidden; }

  .heart-assurance { height: 881px; }
  .heart-precision { height: 952px; overflow: visible; background: #000; }
  .heart-craft { z-index: 2; height: 725px; overflow: visible; }
  .heart-service { z-index: 1; height: 902px; display: block; background: #000; }
  .heart-potential { height: 1027px; background: #fff url("../images/five-hearts/layers/potential.png") center top / 1920px 1080px no-repeat; }

  .heart-assurance .inner-shell,
  .heart-precision .inner-shell,
  .heart-craft .inner-shell,
  .heart-service .inner-shell,
  .heart-potential .inner-shell { position: relative; width: 100%; max-width: none; height: 100%; }

  .heart-assurance .inner-split,
  .heart-precision .inner-split,
  .heart-craft .inner-split,
  .heart-service .inner-split,
  .heart-potential .inner-split { display: block; height: 100%; }

  .heart-assurance .inner-split > div { position: absolute; top: 170px; left: 13.49%; width: 560px; }
  .heart-assurance .inner-kicker { font-size: 18px; }
  .heart-assurance .heart-number { position: absolute; top: 37px; left: 480px; font-size: 30px; }
  .heart-assurance .inner-title { margin-top: 11px; font-size: 42px; }
  .heart-assurance .inner-copy { width: 620px; margin-top: 30px; font-size: 24px; line-height: 1.5; white-space: nowrap; }
  .heart-assurance .inner-metrics { display: grid; grid-template-columns: repeat(2, 250px); gap: 45px 55px; margin-top: 63px; }
  .heart-assurance .inner-metric { display: grid; grid-template-columns: 107px 1fr; align-items: center; }
  .heart-assurance .inner-metric strong { width: 107px; height: 107px; display: grid; place-items: center; border: 1px solid #d8c3aa; border-radius: 50%; color: #b9946d; font-size: 28px; }
  .heart-assurance .inner-metric span { margin: 0 0 0 19px; font-size: 20px; white-space: nowrap; }
  .heart-assurance-icon { width: 62px; height: 62px; object-fit: contain; filter: brightness(0) saturate(100%) invert(73%) sepia(17%) saturate(784%) hue-rotate(345deg) brightness(88%) contrast(85%); }
  .heart-assurance .inner-media { position: absolute; top: 150px; left: 46.98%; width: 53.02%; height: 522px; overflow: hidden; box-shadow: none; }
  .heart-assurance .inner-media img { position: absolute; top: -228px; left: -274px; width: 1292px; height: 965px; max-width: none; object-fit: fill; }

  .heart-precision .inner-split { position: static; }
  .heart-precision .inner-media { position: absolute; top: -64px; left: 13.39%; width: 794px; height: 404px; overflow: hidden; }
  .heart-precision .inner-media img { position: absolute; top: 1px; left: 2px; width: 791px; height: 439px; max-width: none; object-fit: fill; }
  .heart-precision .inner-split > div { position: absolute; top: 85px; left: 59.9%; width: 540px; }
  .heart-precision .heart-number { position: absolute; top: 34px; right: 0; font-size: 30px; }
  .heart-precision .inner-title { position: relative; top: -8px; margin-top: 18px; font-size: 42px; }
  .heart-precision .inner-copy { margin-top: 28px; color: #c9a77c; font-size: 24px; line-height: 2; }
  .heart-precision .inner-feature-grid { position: absolute; top: 454px; left: 12.45%; width: 74.53%; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 !important; background: transparent; }
  .heart-precision .inner-feature { min-height: 0; padding: 0 24px; text-align: center; background: transparent; }
  .heart-precision .inner-feature-icon { width: 108px; height: 108px; margin: 0 auto 38px; }
  .heart-precision-icon { width: 64px; height: 64px; object-fit: contain; filter: brightness(0) saturate(100%) invert(73%) sepia(17%) saturate(784%) hue-rotate(345deg) brightness(88%) contrast(85%); }
  .heart-precision .inner-feature h3 { color: #c9a77c; font-size: 22px; font-weight: 500; }
  .heart-precision .inner-feature p { margin-top: 10px; color: rgba(255,255,255,.8); font-size: 17px; line-height: 2.25; }

  .heart-precision .inner-split::before,
  .heart-precision .inner-split::after,
  .heart-craft .inner-split::before,
  .heart-craft .inner-split::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }
  .heart-precision .inner-split::before {
    top: -84px;
    left: 12.45%;
    width: 142px;
    height: 132px;
    background:
      linear-gradient(#c9a77c, #c9a77c) left top / 22px 132px no-repeat,
      linear-gradient(#c9a77c, #c9a77c) 20px top / 122px 22px no-repeat;
  }
  .heart-precision .inner-split::after {
    z-index: 2;
    top: 318px;
    left: calc(13.39% + 674px);
    width: 163px;
    height: 22px;
    background: #c9a77c;
  }
  .heart-precision .inner-media { z-index: 1; }

  .heart-craft .inner-split > div { position: absolute; top: 83px; left: 13.49%; width: 560px; }
  .heart-craft .heart-number { position: absolute; top: 42px; left: 410px; font-size: 26px; }
  .heart-craft .inner-title { margin-top: 18px; font-size: 42px; }
  .heart-craft .inner-split::before {
    top: -108px;
    left: calc(44.53% + 685px);
    width: 142px;
    height: 132px;
    background:
      linear-gradient(#c9a77c, #c9a77c) left top / 122px 22px no-repeat,
      linear-gradient(#c9a77c, #c9a77c) 120px top / 22px 132px no-repeat;
  }
  .heart-craft .inner-split::after {
    top: 239px;
    left: calc(44.53% - 17px);
    width: 142px;
    height: 132px;
    background:
      linear-gradient(#c9a77c, #c9a77c) left top / 22px 132px no-repeat,
      linear-gradient(#c9a77c, #c9a77c) 20px 110px / 122px 22px no-repeat;
  }
  .heart-craft .inner-media { position: absolute; top: -88px; left: 44.53%; z-index: 1; width: 808px; height: 440px; overflow: hidden; }
  .heart-craft .inner-media img { position: absolute; top: 0; left: -3px; width: 824px; height: 462px; max-width: none; object-fit: fill; }
  .heart-craft .heart-benefits { position: absolute; top: 450px; left: 13.49%; width: 73.07%; height: 340px; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; }
  .heart-craft .heart-benefit { position: relative; height: 340px; padding: 100px 34px 72px; background: #f7f3ef; }
  .heart-craft .inner-copy { color: #666; font-size: 24px; line-height: 2; }
  .heart-benefit-icon { position: absolute; top: 32px; right: 28px; width: 70px; height: 70px; object-fit: contain; filter: brightness(0) saturate(100%) invert(73%) sepia(17%) saturate(784%) hue-rotate(345deg) brightness(88%) contrast(85%); }
  .heart-craft .heart-benefit strong { font-size: 22px; }
  .heart-craft .heart-benefit p { margin-top: 26px; color: #999; font-size: 17px; line-height: 2; }

  .heart-service .inner-media { position: absolute; top: 80px; left: 0; width: 80.05%; height: 822px; min-height: 0; overflow: hidden; }
  .heart-service .inner-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.28) 45%, #000 78%); }
  .heart-service .inner-media img { width: 1537px; height: 1027px; max-width: none; object-fit: fill; }
  .heart-service .inner-split > div { position: absolute; top: 180px; left: 61.2%; z-index: 2; width: 570px; }
  .heart-service .heart-number { position: absolute; top: 42px; right: 0; font-size: 26px; }
  .heart-service .inner-title { margin-top: 18px; font-size: 42px; }
  .heart-service .inner-copy { margin-top: 30px; color: #c9a77c; font-size: 24px; line-height: 2; }
  .heart-service-list { margin-top: 58px; }
  .heart-service-item { position: relative; padding-left: 30px; }
  .heart-service-item + .heart-service-item { margin-top: 72px; }
  .heart-service-item::before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 72px; background: #c9a77c; }
  .heart-service-item h3 { color: #fff; font-size: 24px; font-weight: 500; }
  .heart-service-item p { margin-top: 18px; color: rgba(255,255,255,.7); font-size: 18px; }

  .heart-potential::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0 34%, rgba(255,255,255,.9) 44%, transparent 65%); }
  .heart-potential .inner-split > div { position: absolute; top: 180px; left: 13.49%; z-index: 1; width: 610px; }
  .heart-potential .heart-number { position: absolute; top: 42px; left: 430px; font-size: 26px; }
  .heart-potential .inner-title { margin-top: 18px; font-size: 42px; }
  .heart-potential .inner-copy { margin-top: 30px; color: #666; font-size: 24px; line-height: 1.8; white-space: nowrap; }
  .heart-potential-list { margin-top: 52px; }
  .heart-potential-item { position: relative; padding-left: 30px; }
  .heart-potential-item + .heart-potential-item { margin-top: 54px; }
  .heart-potential-item::before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 74px; background: #c9a77c; }
  .heart-potential-item h3 { color: #b9946d; font-size: 24px; font-weight: 500; }
  .heart-potential-item p { margin-top: 18px; color: #777; font-size: 18px; line-height: 1.7; }
  .heart-potential .inner-media { display: none; }
  .five-hearts-page + .footer {
    height: 513px;
    padding: 0;
    overflow: hidden;
    background: #272727;
  }

  .five-hearts-page + .footer .container {
    position: relative;
    width: 1402px;
    height: 518px;
  }

  .five-hearts-page + .footer .footer-inner {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .five-hearts-page + .footer .footer-inner::after {
    content: "";
    position: absolute;
    top: 439px;
    left: 0;
    width: 1402px;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
  }

  .five-hearts-page + .footer .footer-brand {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    height: 162px;
    padding: 36px 75px 0;
    overflow: visible;
  }

  .five-hearts-page + .footer .footer-logo {
    width: 201px;
    margin-bottom: 25px;
  }

  .five-hearts-page + .footer .footer-phone {
    position: absolute;
    top: 211px;
    left: 0;
    margin-bottom: 8px;
    color: #fff;
    font-size: 23px;
    line-height: 1;
  }

  .five-hearts-page + .footer .footer-phone-label {
    position: absolute;
    top: 245px;
    left: 0;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.8);
  }

  .five-hearts-page + .footer .footer-social {
    position: absolute;
    top: 302px;
    left: 0;
    gap: 14px;
  }

  .five-hearts-page + .footer .footer-social a {
    flex: 0 0 52px;
    width: 52px;
    height: 50px;
    border: 0;
  }

  .five-hearts-page + .footer .footer-social-icon {
    width: auto;
    height: auto;
    max-width: 48px;
    max-height: 38px;
    object-fit: contain;
    transform: translateY(-1px);
  }

  .five-hearts-page + .footer .footer-links {
    position: absolute;
    top: 67px;
    left: 555px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 35px;
    width: 847px;
  }

  .five-hearts-page + .footer .footer-column h4 {
    margin-bottom: 20px;
  }

  .five-hearts-page + .footer .footer-column li {
    height: 25.6px;
    margin-bottom: 11px;
  }

  .five-hearts-page + .footer .footer-bottom {
    position: absolute;
    right: 0;
    bottom: 36px;
    left: 0;
    padding: 0;
  }
}

/* Cases desktop alignment against the 1920px PSD. */
@media (min-width: 769px) {
  .cases-page .inner-hero { display: block; height: 701px; min-height: 701px; }
  .cases-page .inner-hero::before { background: rgba(6, 5, 4, 0.72); }
  .cases-page .inner-hero-content { width: min(1100px, calc(100% - 120px)); margin: 0 auto; padding-top: 274px; }
  .cases-page .inner-hero-title { font-size: 72px; line-height: 1.08; letter-spacing: 0; }
  .cases-page .inner-hero-subtitle { margin-top: 24px; font-size: 26px; line-height: 1.4; }

  .cases-featured { height: 1210px; min-height: 0; padding: 0; overflow: hidden; }
  .cases-featured > .inner-shell { position: relative; width: 100%; max-width: none; height: 100%; }
  .cases-featured .inner-section-head { position: static; display: block !important; margin: 0; }
  .cases-featured .inner-section-head > div:first-child { position: absolute; top: 150px; left: 0; width: 100%; text-align: center; }
  .cases-featured .inner-eyebrow { font-size: 36px; font-weight: 500; }
  .cases-featured .inner-title { margin-top: 10px; font-size: 48px; }
  .cases-featured .inner-scroll { position: absolute; inset: 0; overflow: hidden; }
  .cases-featured .inner-scroll-track { position: static; display: block; }
  .cases-featured .case-feature-slide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease; }
  .cases-featured .case-feature-slide.active { opacity: 1; visibility: visible; pointer-events: auto; }
  .cases-featured .case-feature-grid { position: relative; width: 100%; height: 100%; display: block; }
  .cases-featured .case-feature-main { position: absolute; z-index: 2; top: 341px; left: 13.44%; width: 923px; height: 501px; min-height: 0; overflow: hidden; }
  .cases-featured .case-feature-main img { position: absolute; top: 2px; left: -122px; width: 1044px; height: 587px; max-width: none; object-fit: fill; }
  .cases-featured .case-feature-grid > figure:nth-child(2) { position: absolute; z-index: 2; top: 341px; left: 62.92%; width: 453px; height: 340px; overflow: hidden; }
  .cases-featured .case-feature-grid > figure:nth-child(2) img { position: absolute; top: 2px; left: -223px; width: 675px; height: 380px; max-width: none; object-fit: fill; }
  .cases-featured .case-feature-copy { position: absolute; z-index: 1; top: 722px; left: 0; width: 1369px; height: 389px; padding: 186px 0 0 13.49%; border-radius: 0 0 110px 0; background: #17120f; }
  .cases-featured .case-feature-copy-bg { object-position: center 64%; }
  .cases-featured .case-feature-copy::after { background: linear-gradient(90deg, rgba(12,9,7,.96) 0%, rgba(17,12,9,.88) 62%, rgba(17,12,9,.72) 100%); }
  .cases-featured .case-feature-copy h3 { font-size: 38px; }
  .cases-featured .case-feature-copy p { margin-top: 16px; font-size: 20px; }
  .cases-featured .inner-controls { position: absolute; right: 13.49%; bottom: 186px; z-index: 3; gap: 56px; }
  .cases-featured .inner-arrow { width: 100px; height: 100px; font-size: 30px; }
  .cases-featured .inner-arrow:last-child { color: #fff; background: #c9a77c; border-color: #c9a77c; }

  .inner-section.cases-gallery { height: 1339px; min-height: 0; padding: 0; overflow: hidden; background: #000; }
  .cases-gallery::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 564px; background-image: var(--case-gallery-bg, url("../images/cases/layers/gallery-backdrop.png")); background-position: center top; background-size: 1920px 1400px; background-repeat: no-repeat; }
  .cases-gallery.is-case-changing::before { animation: case-gallery-change .36s ease both; }
  @keyframes case-gallery-change { from { opacity: .66; } to { opacity: 1; } }
  .cases-gallery::after { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 564px; background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.99) 18%, rgba(0,0,0,.925) 35%, rgba(0,0,0,.78) 53%, rgba(0,0,0,.55) 71%, rgba(0,0,0,.285) 89%, rgba(0,0,0,.15) 100%); }
  .cases-gallery .inner-shell { position: relative; width: 100%; max-width: none; height: 100%; }
  .cases-gallery .inner-section-head { position: absolute; top: 145px; left: 0; z-index: 2; width: 100%; margin: 0; }
  .cases-gallery .inner-eyebrow { color: #aaa; font-size: 36px; font-weight: 500; }
  .cases-gallery .inner-title { margin-top: 10px; font-size: 48px; }
  .case-gallery-locations { position: absolute; top: 310px; left: 13.49%; z-index: 3; width: 73.07%; display: grid; grid-template-columns: repeat(3, 1fr); color: rgba(255,255,255,.72); font-size: 24px; text-align: center; }
  .case-gallery-locations button { padding: 0; color: inherit; font: inherit; text-align: center; background: transparent; }
  .case-gallery-locations small { display: block; margin-top: 10px; font-size: 16px; font-weight: 400; }
  .case-gallery-locations .active { position: relative; color: #fff; font-weight: 600; }
  .case-gallery-locations .active::before { content: ""; position: absolute; top: 80px; left: 50%; width: 103px; height: 4px; background: #c9a77c; transform: translateX(-50%); }
  .case-gallery-locations .active::after { content: ""; position: absolute; top: 81px; left: 50%; border: 7px solid transparent; border-top-color: #c9a77c; transform: translateX(-50%); }
  .cases-gallery .case-gallery-grid { position: absolute; top: 564px; left: 0; z-index: 2; display: flex; width: 100%; height: 713px; overflow-x: auto; overflow-y: hidden; cursor: grab; overscroll-behavior-x: contain; scroll-behavior: smooth; scrollbar-width: none; touch-action: pan-y; }
  .cases-gallery .case-gallery-grid::-webkit-scrollbar { display: none; }
  .cases-gallery .case-gallery-grid.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
  .cases-gallery .case-gallery-track { position: relative; display: block; flex: 0 0 2160px; width: 2160px; height: 713px; }
  .cases-gallery .case-gallery-track::before { content: ""; position: absolute; top: 370px; left: 0; width: 40px; height: 343px; background: #111 url("../images/cases/layers/gallery-edge.png") left 2px / 39px 340px no-repeat; }
  .cases-gallery .case-gallery-track figure { position: absolute; height: 343px; overflow: hidden; background: #111; }
  .cases-gallery .case-gallery-track img { position: absolute; top: 2px; max-width: none; height: 340px; aspect-ratio: auto; object-fit: fill; }
  .cases-gallery .case-gallery-track figure:nth-child(1) img { left: 0; width: 439px; }
  .cases-gallery .case-gallery-track figure:nth-child(2) img { left: -103px; width: 605px; }
  .cases-gallery .case-gallery-track figure:nth-child(3) img { left: -103px; width: 605px; }
  .cases-gallery .case-gallery-track figure:nth-child(4) img { left: -102px; width: 709px; }
  .cases-gallery .case-gallery-track figure:nth-child(5) img { left: -67px; width: 569px; }
  .cases-gallery .case-gallery-track figure:nth-child(6) img { left: -102px; width: 604px; }
  .cases-gallery .case-gallery-track figure:nth-child(7) img { left: -103px; width: 605px; }
  .cases-gallery .case-gallery-track figure:nth-child(8) img { left: -103px; width: 605px; }
  .cases-gallery .case-gallery-track figure:nth-child(1) { top: 0; left: 0; width: 440px; }
  .cases-gallery .case-gallery-track figure:nth-child(2) { top: 0; left: 466px; width: 503px; }
  .cases-gallery .case-gallery-track figure:nth-child(3) { top: 0; left: 996px; width: 503px; }
  .cases-gallery .case-gallery-track figure:nth-child(4) { top: 0; left: 1526px; width: 607px; }
  .cases-gallery .case-gallery-track figure:nth-child(5) { top: 370px; left: 67px; width: 503px; }
  .cases-gallery .case-gallery-track figure:nth-child(6) { top: 370px; left: 597px; width: 503px; }
  .cases-gallery .case-gallery-track figure:nth-child(7) { top: 370px; left: 1127px; width: 503px; }
  .cases-gallery .case-gallery-track figure:nth-child(8) { top: 370px; left: 1657px; width: 503px; }

  .cases-other { height: 1185px; min-height: 0; padding: 0; overflow: hidden; background: linear-gradient(#000 0 85px, #fff 85px); }
  .cases-other .inner-shell { position: relative; width: 73.07%; max-width: none; height: 100%; margin: 0 auto; }
  .cases-other .inner-section-head { position: absolute; top: 220px; left: 0; margin: 0; }
  .cases-other .inner-eyebrow { font-size: 36px; font-weight: 600; }
  .cases-other .inner-title { margin-top: 10px; font-size: 44px; }
  .case-other-controls { position: absolute; top: 224px; right: 0; z-index: 3; display: flex; gap: 56px; }
  .case-other-controls button { width: 100px; height: 100px; border: 1px solid #ddd; border-radius: 50%; font-size: 30px; }
  .case-other-controls button:last-child { color: #fff; background: #c9a77c; border-color: #c9a77c; }
  .case-other-tabs { position: absolute; top: 412px; right: 0; z-index: 3; display: flex; gap: 40px; color: #aaa; font-size: 22px; white-space: nowrap; }
  .case-other-tabs button { padding: 0 0 8px; color: inherit; font: inherit; background: transparent; white-space: nowrap; }
  .case-other-tabs .active { color: #222; border-bottom: 2px solid #c9a77c; }
  .cases-other .case-other-grid { position: absolute; inset: 0; display: block; }
  .cases-other .case-other-grid.is-changing figure { animation: case-other-change .35s ease both; }
  @keyframes case-other-change { from { opacity: .72; } to { opacity: 1; } }
  .cases-other .case-other-grid::before { content: ""; position: absolute; top: 577px; left: -1px; width: 461px; height: 582px; background-image: var(--case-other-image, url("../images/cases/layers/other-main.png")); background-position: center; background-size: cover; background-repeat: no-repeat; }
  .cases-other .case-other-grid::after { content: ""; position: absolute; top: 577px; left: -1px; width: 461px; height: 582px; background: linear-gradient(to bottom, transparent 48%, rgba(255,255,255,.9) 64%, #fff 70%); pointer-events: none; }
  .cases-other .case-other-grid figure { position: absolute; overflow: hidden; }
  .cases-other .case-other-grid figure:first-child { top: 480px; left: 235px; width: 753px; height: 506px; }
  .cases-other .case-other-grid figure:first-child img { position: absolute; top: -174px; left: -302px; width: 1563px; height: 879px; max-width: none; object-fit: fill; }
  .cases-other .case-other-grid figure:nth-child(2) { top: 480px; left: 1015px; width: 387px; height: 283px; }
  .cases-other .case-other-grid figure:nth-child(3) { top: 842px; left: 1015px; width: 387px; height: 283px; }
  .cases-other .case-other-grid figure:nth-child(2) img,
  .cases-other .case-other-grid figure:nth-child(3) img { position: absolute; top: -79px; left: -127px; width: 735px; height: 413px; max-width: none; object-fit: fill; }
  .cases-other .case-other-grid figcaption { position: absolute; left: 0; width: 100%; padding: 0; overflow: visible; }
  .cases-other .case-other-grid figcaption strong { color: #171717; font-size: 28px; font-weight: 500; white-space: nowrap; }
  .cases-other .case-other-grid figcaption span { color: #b7b7b7; font-size: 20px; line-height: 1.75; white-space: nowrap; }
  .cases-other .case-other-main { overflow: visible !important; }
  .cases-other .case-other-main > a > img { clip-path: inset(174px 508px 199px 302px); }
  .cases-other .case-other-main figcaption { top: 531px; left: -204px; z-index: 2; width: 430px; display: block; }
  .cases-other .case-other-main figcaption a { display: block; }
  .cases-other .case-other-main figcaption strong,
  .cases-other .case-other-main figcaption span { display: block; text-align: left; }
  .cases-other .case-other-main figcaption span { margin-top: 18px; }
  .cases-other .case-other-grid figure:nth-child(2),
  .cases-other .case-other-grid figure:nth-child(3) { overflow: visible; }
  .cases-other .case-other-grid figure:nth-child(2) > a > img,
  .cases-other .case-other-grid figure:nth-child(3) > a > img { clip-path: inset(79px 221px 51px 127px); }
  .cases-other .case-other-grid figure:nth-child(2) figcaption,
  .cases-other .case-other-grid figure:nth-child(3) figcaption { top: 304px; }

  .cases-extra-cta { display: none; }
  .cases-page + .footer { height: 693px; padding: 0; overflow: hidden; background: linear-gradient(#fff 0 176px, #272727 176px); }
  .cases-page + .footer .container {
    position: relative;
    width: 1402px;
    height: 518px;
    transform: translateY(176px);
  }

  .cases-page + .footer .footer-inner {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .cases-page + .footer .footer-inner::after {
    content: "";
    position: absolute;
    top: 439px;
    left: 0;
    width: 1402px;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
  }

  .cases-page + .footer .footer-brand {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    height: 162px;
    padding: 36px 75px 0;
    overflow: visible;
  }

  .cases-page + .footer .footer-logo {
    width: 201px;
    margin-bottom: 25px;
  }

  .cases-page + .footer .footer-phone {
    position: absolute;
    top: 211px;
    left: 0;
    margin-bottom: 8px;
    color: #fff;
    font-size: 23px;
    line-height: 1;
  }

  .cases-page + .footer .footer-phone-label {
    position: absolute;
    top: 245px;
    left: 0;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.8);
  }

  .cases-page + .footer .footer-social {
    position: absolute;
    top: 302px;
    left: 0;
    gap: 14px;
  }

  .cases-page + .footer .footer-social a {
    flex: 0 0 52px;
    width: 52px;
    height: 50px;
    border: 0;
  }

  .cases-page + .footer .footer-social-icon {
    width: auto;
    height: auto;
    max-width: 48px;
    max-height: 38px;
    object-fit: contain;
    transform: translateY(-1px);
  }

  .cases-page + .footer .footer-links {
    position: absolute;
    top: 67px;
    left: 555px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 35px;
    width: 847px;
  }

  .cases-page + .footer .footer-column h4 {
    margin-bottom: 20px;
  }

  .cases-page + .footer .footer-column li {
    height: 25.6px;
    margin-bottom: 11px;
  }

  .cases-page + .footer .footer-bottom {
    position: absolute;
    right: 0;
    bottom: 36px;
    left: 0;
    padding: 0;
  }
}

@media (min-width: 769px) {
  .inner-section.manufacturing-bases,
  .inner-section.manufacturing-factory,
  .inner-section.manufacturing-waterline,
  .inner-section.manufacturing-handmade,
  .inner-section.manufacturing-assembly,
  .inner-section.manufacturing-smart { min-height: 0; padding: 0; overflow: hidden; }
  .inner-section.manufacturing-factory { background: linear-gradient(#120f0d 0 473px, #1c1814 473px 100%); }
  .manufacturing-factory .inner-section-head::after { content: ""; display: block; width: 450px; height: 24px; margin-top: 22px; background: repeating-linear-gradient(90deg, #c9a77c 0 4px, transparent 4px 9px); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 54%, rgba(0,0,0,.58) 76%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 54%, rgba(0,0,0,.58) 76%, transparent 100%); }
  .manufacturing-factory .inner-eyebrow { color: #8f8f8f; }
  .manufacturing-factory .inner-copy { top: 482px; color: #c7b09a; font-size: 19px; line-height: 1.72; }
  .inner-section.manufacturing-waterline {
    background:
      linear-gradient(90deg, rgba(143, 101, 63, 0.96) 0 44.38%, transparent 44.38%) 0 116px / 100% 277px no-repeat,
      linear-gradient(90deg, rgba(143, 101, 63, 0.96) 0 44.38%, transparent 44.38%) 0 1079px / 100% 117px no-repeat,
      #17130f;
  }
  .inner-section.manufacturing-waterline::before {
    display: block;
    top: 393px;
    left: 0;
    z-index: 1;
    width: 1116px;
    height: 686px;
    background:
      repeating-radial-gradient(ellipse 820px 430px at -90px 34px, rgba(173, 123, 72, 0.22) 0 1px, transparent 2px 19px),
      rgba(20, 17, 14, 0.96);
  }
  .inner-section.manufacturing-waterline > .inner-shell { opacity: 1; pointer-events: auto; }
  .manufacturing-waterline .manufacturing-robot { z-index: 0; }
  .manufacturing-waterline .inner-split > div { z-index: 2; }
  .inner-section.manufacturing-handmade { z-index: 2; overflow: visible; background: #0e0b09 url("../images/manufacturing/layers/wood-texture.png") center -2px / 1920px 1155px no-repeat; }
  .inner-section.manufacturing-assembly { background: linear-gradient(#000 0 185px, #fff 185px); }

  .inner-section.manufacturing-smart { background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)) center 972px / 1920px 1448px no-repeat, #050505 url("../images/manufacturing/layers/dark-texture.png") center 972px / 1920px 1448px no-repeat; }
  .manufacturing-smart::before { height: 974px; background: linear-gradient(rgba(4,4,4,.72), rgba(4,4,4,.64) 45%, rgba(4,4,4,.78)) center top / 1920px 974px no-repeat, url("../images/manufacturing/layers/smart-room.png") center -498px / 1920px 1650px no-repeat, radial-gradient(820px 480px at 50% 890px, rgba(201,167,124,.13), rgba(201,167,124,0) 70%) center top / 1920px 974px no-repeat, linear-gradient(#070605, #070605) center top / 1920px 974px no-repeat; transform: scale(1); transform-origin: center 68%; transition: transform .85s cubic-bezier(.22,.61,.36,1), filter .85s ease; will-change: transform, filter; }
  .manufacturing-smart::after { display: none; }
  .manufacturing-smart > .inner-shell > .inner-section-head,
  .manufacturing-smart .smart-service-loop { display: none; }
  /* ===== 智能定制用户服务闭环 - HTML 化圆盘 + GSAP 轮播点亮 ===== */
  .manufacturing-smart .smart-flow { position: absolute; top: 0; left: 0; z-index: 4; display: block; width: 100%; height: 974px; overflow: hidden; }
  .manufacturing-smart .smart-flow-head { position: absolute; top: 78px; left: 50%; z-index: 6; width: 980px; margin-left: -702px; color: #fff; }
  .manufacturing-smart .smart-flow-eyebrow { margin: 0; font-size: 36px; font-weight: 600; line-height: 1.1; letter-spacing: 0; text-transform: uppercase; color: rgba(240,235,228,.5); }
  .manufacturing-smart .smart-flow-head h2 { margin: 10px 0 0; font-size: 48px; font-weight: 600; letter-spacing: 2px; color: #f7f2ea; }
  .manufacturing-smart .smart-flow-head h3 { margin: 70px 0 0; font-size: 24px; font-weight: 500; letter-spacing: 1px; color: #f2ece3; }
  .manufacturing-smart .smart-flow-head > p:not(.smart-flow-eyebrow) { margin: 30px 0 0; font-size: 15px; line-height: 2.1; color: rgba(232,226,218,.82); }
  .manufacturing-smart .smart-flow-stage { position: absolute; top: 0; left: 50%; width: 1920px; height: 974px; transform: translateX(-50%); }
  .manufacturing-smart .smart-flow-stage > img { position: absolute; max-width: none; margin: 0; pointer-events: none; }
  /* 层叠：大黑圆弧(2) < 细弧线(3) < 金环(4) < 线条/中心圆盘(5) < 文字(6-8) */
  .manufacturing-smart .smart-flow-stage > img:nth-of-type(1),
  .manufacturing-smart .smart-flow-stage > img:nth-of-type(2) { z-index: 2; top: 464px; left: 379px; width: 1161px; height: 902px; }
  .manufacturing-smart .smart-flow-stage > img:nth-of-type(3) { z-index: 3; top: 409px; left: 308px; width: 1303px; height: 691px; opacity: .5; }
  .manufacturing-smart .smart-flow-stage > img:nth-of-type(4) { z-index: 3; top: 464px; left: 379px; width: 1161px; height: 582px; opacity: .7; }
  .manufacturing-smart .smart-flow-stage > img:nth-of-type(5) { z-index: 4; top: 662px; left: 644px; width: 632px; height: 632px; }
  .manufacturing-smart .smart-flow-stage > img:nth-of-type(6) { z-index: 5; top: 966px; left: 956px; width: 803px; height: 8px; }
  /* 扇区分隔：6 张楔形切片用环形遮罩只露出金环带部分（恢复 7 个扇区间隔，不外散） */
  .manufacturing-smart .smart-flow-sectors { position: absolute; top: 662px; left: 644px; z-index: 5; width: 632px; height: 632px; pointer-events: none; -webkit-mask-image: radial-gradient(circle at 316px 316px, transparent 0 230px, #000 233px 313px, transparent 316px); mask-image: radial-gradient(circle at 316px 316px, transparent 0 230px, #000 233px 313px, transparent 316px); }
  .manufacturing-smart .smart-flow-sectors img { position: absolute; max-width: none; margin: 0; filter: brightness(0); }
  .manufacturing-smart .smart-flow-sectors img:nth-child(1) { top: -95px; left: -380px; width: 698px; height: 406px; }
  .manufacturing-smart .smart-flow-sectors img:nth-child(2) { top: -349px; left: -147px; width: 466px; height: 660px; }
  .manufacturing-smart .smart-flow-sectors img:nth-child(3) { top: -481px; left: 172px; width: 146px; height: 792px; }
  .manufacturing-smart .smart-flow-sectors img:nth-child(4) { top: -465px; left: 310px; width: 214px; height: 776px; }
  .manufacturing-smart .smart-flow-sectors img:nth-child(5) { top: -307px; left: 311px; width: 520px; height: 618px; }
  .manufacturing-smart .smart-flow-sectors img:nth-child(6) { top: -33px; left: 312px; width: 730px; height: 344px; }
  /* 内环切片(smart-art-099)中心导出为实心白圆，用深色圆盘盖住还原设计稿暗色效果 */
  .manufacturing-smart .smart-flow-stage::after { content: ""; position: absolute; top: 746px; left: 728px; z-index: 5; width: 464px; height: 464px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #181310 0%, #0c0908 72%); pointer-events: none; }
  .manufacturing-smart .smart-flow-center { position: absolute; top: 850px; left: 960px; z-index: 6; text-align: center; transform: translateX(-50%); color: #f5efe6; pointer-events: none; }
  .manufacturing-smart .smart-flow-center strong,
  .manufacturing-smart .smart-flow-center span { display: block; font-size: 30px; font-weight: 600; letter-spacing: 3px; line-height: 1.5; }

  /* 7 个步骤数字圆环：常显，轮播/悬停时高亮 */
  .manufacturing-smart .smart-flow-node {
    position: absolute;
    z-index: 8;
    width: 72px;
    height: 72px;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
  }

  .manufacturing-smart .smart-flow-node[data-step="1"] { top: 875px; left: 658px; }
  .manufacturing-smart .smart-flow-node[data-step="2"] { top: 752px; left: 727px; }
  .manufacturing-smart .smart-flow-node[data-step="3"] { top: 689px; left: 819px; }
  .manufacturing-smart .smart-flow-node[data-step="4"] { top: 668px; left: 932px; }
  .manufacturing-smart .smart-flow-node[data-step="5"] { top: 695px; left: 1043px; }
  .manufacturing-smart .smart-flow-node[data-step="6"] { top: 771px; left: 1138px; }
  .manufacturing-smart .smart-flow-node[data-step="7"] { top: 883px; left: 1191px; }

  .manufacturing-smart .smart-flow-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    font-size: 26px;
    font-weight: 600;
    color: #f4eee7;
    border: 1px solid transparent;
    background: transparent;
    transform-origin: center center;
    transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, background .35s ease, border-color .35s ease;
  }

  /* 标签（图标+文字）：常显，与数字联动高亮 */
  .manufacturing-smart .smart-flow-label {
    position: absolute;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 14px;
    transform-origin: center center;
    transition: transform .45s cubic-bezier(.22,.61,.36,1), filter .35s ease;
  }

  .manufacturing-smart .smart-flow-label[data-step="1"] { top: 867px; left: 454px; }
  .manufacturing-smart .smart-flow-label[data-step="2"] { top: 722px; left: 540px; }
  .manufacturing-smart .smart-flow-label[data-step="3"] { top: 597px; left: 705px; }
  .manufacturing-smart .smart-flow-label[data-step="4"] { top: 533px; left: 905px; }
  .manufacturing-smart .smart-flow-label[data-step="5"] { top: 597px; left: 1099px; }
  .manufacturing-smart .smart-flow-label[data-step="6"] { top: 722px; left: 1246px; }
  .manufacturing-smart .smart-flow-label[data-step="7"] { top: 868px; left: 1318px; }

  .manufacturing-smart .smart-flow-label img {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin: 0;
    object-fit: contain;
  }

  .manufacturing-smart .smart-flow-label b {
    color: #e8c9a4;
    font-size: 26px;
    line-height: 1;
    transform: translateY(11px);
    font-weight: 500;
    white-space: nowrap;
    transition: color .35s ease;
  }

  /* 高亮态：轮播点亮 / 悬停，整组（数字+图标+文字）一起亮，无圆圈（is-active 由 JS 同步加到 node 和 label 上） */
  .manufacturing-smart .smart-flow-node:hover .smart-flow-num,
  .manufacturing-smart .smart-flow-node.is-active .smart-flow-num {
    transform: scale(1.5);
    color: #ffe9c4;
    text-shadow: 0 0 24px rgba(255,233,196,1), 0 0 60px rgba(232,201,164,.85), 0 0 100px rgba(201,167,124,.6);
  }

  .manufacturing-smart .smart-flow-label:hover,
  .manufacturing-smart .smart-flow-label.is-active {
    transform: scale(1.35);
    filter: drop-shadow(0 0 14px rgba(255,233,196,.95)) drop-shadow(0 0 36px rgba(220,180,130,.7));
  }

  .manufacturing-smart .smart-flow-label:hover b,
  .manufacturing-smart .smart-flow-label.is-active b {
    color: #ffe9c4;
  }
  .manufacturing-smart .smart-service-loop { z-index: 3; border: 0; background: none; }
  .manufacturing-smart .smart-service-loop::before { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .manufacturing-smart::before { transition: none; }
    .manufacturing-smart .smart-flow-num,
    .manufacturing-smart .smart-flow-label,
    .manufacturing-smart .smart-flow-label b { transition: none; }
    .manufacturing-smart .smart-systems span { transition: none; }
    .manufacturing-smart .smart-systems span:hover { transform: none; }
  }
}

@media (max-width: 768px) {
  .products-details .products-detail-grid {
    gap: 24px;
  }

  .products-details .products-detail-grid figure {
    position: relative;
    min-height: 0;
    overflow: hidden;
  }

  .products-details .products-detail-grid figure:first-child {
    aspect-ratio: 962 / 406;
  }

  .products-details .products-detail-grid figure:first-child img {
    position: absolute;
    top: -167.24%;
    left: 0;
    width: 100%;
    height: 295.57%;
    max-width: none;
    object-fit: fill;
  }

  .products-details .products-detail-grid figure:nth-child(2) {
    aspect-ratio: 705 / 540;
  }

  .products-details .products-detail-grid figure:nth-child(2) img {
    position: absolute;
    top: -21.67%;
    left: -0.71%;
    width: 205.67%;
    height: 150.93%;
    max-width: none;
    object-fit: fill;
  }

  .products-details .detail-copy {
    margin-top: 34px;
  }

  .products-details .detail-copy-flower {
    margin-top: 54px;
  }

  .products-details .detail-kicker {
    color: #b58f6b;
    font-size: 14px;
    line-height: 1.2;
  }

  .products-details .detail-copy h3 {
    margin-top: 10px;
    font-size: 30px;
    font-weight: 400;
  }

  .products-details .detail-body {
    margin-top: 20px;
    color: #666;
    font-size: 15px;
    line-height: 2;
  }

  .products-details .detail-body br {
    display: none;
  }

  .products-details .detail-copy::after {
    content: "";
    display: block;
    width: min(240px, 72%);
    height: 12px;
    margin-top: 20px;
    background: repeating-linear-gradient(90deg, #b58f6b 0 2px, transparent 2px 5px);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 58%, rgba(0,0,0,.58) 78%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 58%, rgba(0,0,0,.58) 78%, transparent 100%);
  }

  .products-details .product-elements {
    margin-top: 64px;
  }

  .products-details .element-groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .products-details .element-group h3 {
    font-size: 23px;
    font-weight: 500;
    text-align: center;
  }

  .products-details .element-swatches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
  }

  .products-details .element-swatches span {
    width: auto;
    height: auto;
    display: block;
    border: 0;
    border-radius: 0;
    color: #b58f6b;
    text-align: center;
  }

  .products-details .element-swatches img {
    width: min(86px, 100%);
    aspect-ratio: 1;
    margin: 0 auto;
    border: 1px solid #b9946d;
    border-radius: 50%;
    object-fit: cover;
  }

  .products-details .element-swatches b {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
  }

  .products-details .element-scenes {
    display: none;
  }

  .products-showcase .bookcase-scene,
  .products-showcase .wine-scene {
    min-height: 760px;
  }

  .products-showcase .bookcase-scene::after,
  .products-showcase .wine-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.92) 0, rgba(0,0,0,.38) 66%, rgba(0,0,0,.1) 100%);
  }

  .products-showcase .bookcase-scene > div,
  .products-showcase .wine-scene > div {
    right: 24px;
    bottom: 38px;
    left: 24px;
    max-width: none;
  }

  .products-showcase .bookcase-scene span,
  .products-showcase .wine-scene span {
    display: block;
    margin-top: 22px;
    color: rgba(255,255,255,.78);
    font-size: 14px;
    line-height: 1.75;
  }

  .product-systems .product-system {
    min-height: 700px;
  }

  .product-systems .product-system:nth-child(3),
  .product-systems .product-system:nth-child(4) {
    min-height: 820px;
  }

  .products-directions .product-direction-panels {
    gap: 0;
  }

  .products-directions .product-direction {
    isolation: isolate;
    overflow: visible;
    margin: 18px 14px 54px;
  }

  .products-directions .product-direction > img {
    position: relative;
    z-index: 1;
    display: block;
  }

  .products-directions .product-direction > div {
    z-index: 2;
  }

  .products-directions .direction-focus::before,
  .products-directions .direction-focus::after,
  .products-directions .direction-estate::before,
  .products-directions .direction-estate::after,
  .products-directions .direction-lifestyle::before,
  .products-directions .direction-lifestyle::after {
    content: "";
    position: absolute;
    z-index: 7;
    display: block;
    background: #c8a07c;
    pointer-events: none;
  }

  .products-directions .direction-focus::before,
  .products-directions .direction-lifestyle::before {
    top: -14px;
    left: -14px;
    width: 86px;
    height: 74px;
    clip-path: polygon(0 0, 100% 0, 100% 14px, 14px 14px, 14px 100%, 0 100%);
  }

  .products-directions .direction-focus::after,
  .products-directions .direction-lifestyle::after {
    right: -14px;
    bottom: -14px;
    width: 146px;
    height: 14px;
  }

  .products-directions .direction-estate::before {
    top: -14px;
    right: -14px;
    width: 86px;
    height: 74px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 14px) 100%, calc(100% - 14px) 14px, 0 14px);
  }

  .products-directions .direction-estate::after {
    bottom: -14px;
    left: -14px;
    width: 146px;
    height: 14px;
  }
}

@media (max-width: 768px) {
  .products-page .inner-section {
    padding: 56px 0;
  }

  .products-page .inner-shell {
    width: 100%;
    padding: 0 20px;
  }

  .products-intro {
    padding-top: 48px;
  }

  .products-intro .inner-tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 12px;
    margin: 0 -20px 30px;
    padding: 0 20px 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .products-intro .inner-tabs::-webkit-scrollbar {
    display: none;
  }

  .products-intro .inner-tab {
    flex: 0 0 92px;
    min-width: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0 13px;
    color: #444;
    font-size: 15px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    scroll-snap-align: start;
  }

  .products-intro .inner-tab[data-product-series="chinese"],
  .products-intro .inner-tab[data-product-series="butterfly"] {
    flex-basis: 108px;
    min-width: 108px;
  }

  .products-intro .inner-tab small {
    display: block;
    margin-top: 5px;
    color: #666;
    font-size: 12px;
    line-height: 1.25;
  }

  .products-intro .inner-tab::after {
    left: 18px;
    right: 18px;
    height: 2px;
  }

  .products-lu-grid {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .products-lu-main,
  .products-lu-room,
  .products-lu-service {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    margin: 0;
    overflow: hidden;
  }

  .products-lu-main img,
  .products-lu-room img,
  .products-lu-service img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .products-lu-copy {
    padding: 0;
  }

  .products-lu-copy .inner-kicker {
    font-size: 18px;
  }

  .products-lu-copy .inner-title {
    margin-top: 8px;
    font-size: 32px;
    line-height: 1.18;
  }

  .products-lu-copy .inner-copy {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.9;
  }

  .products-lu-copy .inner-copy p + p {
    margin-top: 18px;
  }

  .products-directions {
    height: auto;
    padding: 58px 0;
    overflow: hidden;
    background: #080706;
  }

  .inner-section.products-directions {
    min-height: 0;
    padding: 58px 0;
    overflow: hidden;
  }

  .products-directions .inner-shell {
    position: relative;
    width: 100%;
    height: auto;
    max-width: none;
    padding: 0 20px;
  }

  .products-directions > .inner-shell > .inner-section-head,
  .products-directions > .inner-shell > .inner-feature-grid {
    display: none;
  }

  .products-directions .product-direction-panels {
    position: relative;
    inset: auto;
    display: grid;
    gap: 34px;
  }

  .products-directions .product-direction {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    overflow: visible;
    border: 1px solid rgba(200, 160, 124, 0.2);
    background: #111;
  }

  .products-directions .product-direction:last-child {
    margin-bottom: 0;
  }

  .products-directions .product-direction > img {
    position: relative;
    inset: auto;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.55;
    max-width: 100%;
    clip-path: none;
    object-fit: cover;
  }

  .products-directions .product-direction > div {
    position: relative;
    inset: auto;
    z-index: 2;
    width: auto;
    max-width: none;
    padding: 24px 22px 30px;
    color: #fff;
  }

  .products-directions .product-direction p {
    font-size: 12px;
    line-height: 1.3;
  }

  .products-directions .product-direction h3 {
    margin-top: 8px;
    font-size: 26px;
    line-height: 1.25;
  }

  .products-directions .product-direction span {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.8;
  }

  .products-directions .resource-swatches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 24px;
  }

  .products-directions .resource-swatches span {
    width: auto;
    height: auto;
    color: #ddd;
    font-size: 13px;
  }

  .products-directions .resource-swatches i {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    background-size: cover;
    background-position: center;
  }

  .products-details {
    padding: 58px 0;
    background: #fff;
  }

  .products-detail-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .products-details .products-detail-grid figure,
  .products-details .products-detail-grid figure:first-child,
  .products-details .products-detail-grid figure:nth-child(2) {
    aspect-ratio: 16 / 11;
  }

  .products-details .products-detail-grid figure:first-child img,
  .products-details .products-detail-grid figure:nth-child(2) img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .products-details .detail-copy {
    margin-top: 24px;
  }

  .products-details .detail-copy h3 {
    font-size: 28px;
  }

  .products-details .detail-body {
    font-size: 14px;
    line-height: 1.9;
  }

  .products-details .element-swatches {
    gap: 12px;
  }

  .products-details .element-swatches img {
    width: 72px;
  }

  .products-showcase {
    padding: 58px 0;
    background: #050505;
  }

  .products-showcase .inner-split {
    display: flex;
    flex-direction: column-reverse;
    gap: 24px;
  }

  .products-showcase .product-console {
    width: 100%;
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .products-showcase .product-console img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .products-showcase .inner-split > div {
    text-align: left;
  }

  .products-showcase .inner-split > div .inner-eyebrow {
    font-size: 16px;
  }

  .products-showcase .inner-split > div .inner-title {
    margin-top: 8px;
    font-size: 30px;
  }

  .products-showcase .inner-split > div .inner-copy {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.85;
  }

  .products-showcase .cabinet-scenes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 34px;
  }

  .products-showcase .cabinet-scenes article,
  .products-showcase .bookcase-scene,
  .products-showcase .wine-scene {
    position: relative;
    min-height: 0;
    height: auto;
    overflow: hidden;
    background: #111;
  }

  .products-showcase .cabinet-card img,
  .products-showcase .bookcase-scene img,
  .products-showcase .sideboard-scene img,
  .products-showcase .wine-scene img {
    position: relative;
    inset: auto;
    width: 100%;
    height: 230px;
    max-width: none;
    object-fit: cover;
    clip-path: none;
  }

  .products-showcase .cabinet-card > div,
  .products-showcase .bookcase-scene > div,
  .products-showcase .sideboard-scene > div,
  .products-showcase .wine-scene > div {
    position: relative;
    inset: auto;
    width: auto;
    padding: 20px;
  }

  .products-showcase .cabinet-card h3,
  .products-showcase .bookcase-scene h3,
  .products-showcase .wine-scene h3,
  .products-showcase .sideboard-scene h3 {
    font-size: 24px;
  }

  .products-showcase .cabinet-card p,
  .products-showcase .sideboard-scene p,
  .products-showcase .bookcase-scene > div > p,
  .products-showcase .wine-scene > div > p {
    margin-top: 4px;
    font-size: 12px;
  }

  .products-showcase .bookcase-scene::after,
  .products-showcase .wine-scene::after {
    display: none;
  }

  .products-showcase .bookcase-scene span,
  .products-showcase .wine-scene span {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.75;
  }

  .product-systems {
    height: auto;
    overflow: visible;
  }

  .product-systems .product-system,
  .product-systems .product-system:nth-child(3),
  .product-systems .product-system:nth-child(4) {
    min-height: 520px;
    height: auto;
    padding: 260px 20px 36px;
    display: block;
    border-top: 6px solid #fff;
  }

  .product-systems .product-system:first-child {
    border-top: 0;
  }

  .product-systems .product-system img {
    height: 260px;
    object-fit: cover;
  }

  .product-systems .product-system::after,
  .product-systems .product-system:nth-child(even)::after,
  .product-systems .product-system:nth-child(5)::after {
    display: block;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(8,8,8,.18) 210px, #080808 260px);
  }

  .product-systems .product-system-copy,
  .product-systems .product-system:nth-child(even) .product-system-copy {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    padding: 0;
    text-align: left;
  }

  .product-systems .product-system-copy .inner-kicker {
    font-size: 18px;
    line-height: 1.25;
  }

  .product-systems .product-system-copy h2 {
    margin-top: 6px;
    font-size: 27px;
  }

  .product-systems .product-system-copy p:not(.inner-kicker),
  .product-systems .product-system:nth-child(even) .product-system-copy p:not(.inner-kicker) {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.8;
  }

  .products-page + .footer {
    height: auto;
    padding: 44px 20px 28px;
    overflow: visible;
    background: #151515;
  }

  .products-page + .footer .container {
    width: 100%;
    height: auto;
    padding: 0;
  }

  .products-page + .footer .footer-inner {
    display: grid;
    gap: 28px;
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }

  .products-page + .footer .footer-brand {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    background: transparent;
    text-align: center;
    overflow: visible;
  }

  .products-page + .footer .footer-brand::before {
    content: none;
  }

  .products-page + .footer .footer-logo,
  .products-page + .footer .footer-phone,
  .products-page + .footer .footer-phone-label,
  .products-page + .footer .footer-social {
    position: relative;
    z-index: 1;
  }

  .products-page + .footer .footer-logo {
    order: 1;
    width: 100%;
    margin: 0 0 18px;
    padding: 24px 22px 22px;
    background: #c8a87a;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .products-page + .footer .footer-logo img {
    display: block;
    width: min(240px, 78%);
    max-width: 240px;
    margin: 0 auto;
  }

  .products-page + .footer .footer-phone {
    order: 3;
    margin: 0;
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .02em;
  }

  .products-page + .footer .footer-phone-label {
    order: 2;
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: .08em;
  }

  .products-page + .footer .footer-social {
    order: 4;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
    padding-top: 0;
    border-top: 0;
  }

  .products-page + .footer .footer-social a {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.28);
  }

  .products-page + .footer .footer-social-icon {
    max-width: 20px;
    max-height: 20px;
  }

  .products-page + .footer .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 42px;
  }

  .products-page + .footer .footer-column h4 {
    margin-bottom: 14px;
    font-size: 15px;
  }

  .products-page + .footer .footer-column li {
    margin-bottom: 11px;
  }

  .products-page + .footer .footer-column a {
    font-size: 13px;
    line-height: 1.4;
  }

  .products-page + .footer .footer-bottom {
    padding: 22px 0 0;
    font-size: 14px;
    line-height: 1.7;
  }
}

/* Mobile polish pass: keep desktop PSD calibration intact, tighten phone layouts. */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .container,
  .inner-shell {
    width: calc(100% - 40px);
    max-width: none;
  }

  .inner-hero,
  .brand-story-hero,
  .history-hero,
  .honors-hero,
  .stores-hero,
  .contact-hero {
    min-height: 400px;
  }

  .inner-hero-content,
  .brand-story-hero-content,
  .history-hero-content,
  .honors-hero-content,
  .stores-hero-content,
  .contact-hero-content {
    padding-top: 154px;
  }

  .inner-hero-title,
  .brand-story-hero-title,
  .history-hero-title,
  .honors-hero-title,
  .stores-hero-title,
  .contact-hero-title {
    font-size: 32px;
    line-height: 1.28;
  }

  .inner-hero-subtitle,
  .brand-story-hero-subtitle,
  .history-hero-subtitle,
  .honors-hero-subtitle,
  .stores-hero-subtitle,
  .contact-hero-subtitle {
    width: min(100%, 330px);
    margin-right: auto;
    margin-left: auto;
    font-size: 14px;
    line-height: 1.7;
  }

  .inner-section,
  .heart-section {
    padding: 58px 0;
  }

  .inner-section-head {
    margin-bottom: 28px;
  }

  .inner-title,
  .section-title-cn {
    line-height: 1.25;
  }

  .inner-copy,
  .product-desc,
  .scene-desc {
    line-height: 1.85;
  }

  .hero {
    height: 620px;
    min-height: 620px;
  }

  .hero-content {
    top: 166px;
    width: min(320px, calc(100vw - 48px));
  }

  .hero-title {
    font-size: 31px;
    line-height: 1.34;
  }

  .hero-dots {
    bottom: 177px;
  }

  .hero-stats {
    bottom: 34px;
    width: min(320px, calc(100vw - 44px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    padding: 14px 16px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(2px);
  }

  .hero-stat {
    min-width: 0;
    justify-content: center;
  }

  .hero-stat:nth-child(5) {
    grid-column: 1 / -1;
  }

  .hero-stat-num {
    font-size: 24px;
  }

  .hero-stat-unit {
    font-size: 10px;
  }

  .products-intro {
    height: auto;
    padding: 44px 0 58px;
  }

  .products-intro .inner-shell,
  .products-intro .products-lu-grid,
  .products-details .inner-shell,
  .products-details .products-detail-grid,
  .products-showcase .inner-shell,
  .products-showcase .inner-split,
  .products-showcase .cabinet-scenes {
    position: relative;
    inset: auto;
    height: auto;
  }

  .products-intro .inner-tabs {
    margin-bottom: 22px;
  }

  .products-intro .products-lu-main,
  .products-intro .products-lu-copy {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .products-intro .products-lu-main {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
  }

  .products-intro .products-lu-copy {
    margin-top: 22px;
  }

  .products-intro .products-lu-room,
  .products-intro .products-lu-service {
    display: none;
  }

  .products-details,
  .products-showcase {
    height: auto;
    padding: 58px 0;
  }

  .products-details .products-detail-grid figure,
  .products-details .products-detail-grid figure:first-child,
  .products-details .products-detail-grid figure:nth-child(2),
  .products-details .detail-copy,
  .products-details .product-elements,
  .products-showcase .product-console,
  .products-showcase .inner-split > div,
  .products-showcase .cabinet-scenes article,
  .products-showcase .bookcase-scene,
  .products-showcase .sideboard-scene,
  .products-showcase .wine-scene {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
  }

  .products-details .product-elements {
    margin-top: 32px;
  }

  .products-details .element-groups {
    gap: 28px;
  }

  .products-details .element-swatches {
    justify-content: flex-start;
  }

  .products-showcase {
    background: #050505;
  }

  .products-showcase .inner-split > div {
    color: #fff;
    text-align: left;
  }

  .products-showcase .inner-split > div .inner-eyebrow,
  .products-showcase .inner-split > div .inner-title,
  .products-showcase .inner-split > div .inner-copy {
    color: inherit;
  }

  .products-showcase .cabinet-scenes {
    margin-top: 28px;
  }

  .products-showcase .cabinet-scenes article,
  .products-showcase .bookcase-scene,
  .products-showcase .sideboard-scene,
  .products-showcase .wine-scene {
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .join-advantage-section {
    padding-bottom: 48px;
  }

  .join-advantage-grid {
    gap: 22px;
  }

  .join-advantage-grid > figure:first-child figcaption {
    margin-top: 18px;
  }

  .join-orbit {
    --orbit-size: min(330px, 100%);
    margin-top: 8px;
  }

  .join-support {
    min-height: 0;
    padding: 58px 0;
    background-position: center;
  }

  .join-support .inner-feature-grid {
    margin-top: 34px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
  }

  .join-support .inner-feature {
    min-height: 132px;
    padding: 26px 12px 22px;
    background: rgba(170, 137, 105, 0.9);
  }

  .join-support .inner-feature-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
  }

  .join-requirements-section {
    padding: 58px 0;
  }

  .join-requirements-section::before {
    opacity: 0.28;
    transform: translateX(54%);
  }

  .join-requirements {
    gap: 26px;
  }

  .join-requirement {
    gap: 18px;
    padding-bottom: 22px;
    border-bottom: 1px solid #eee8e2;
  }

  .join-requirement:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .join-requirement > div {
    position: relative;
  }

  .join-requirement > div::before {
    display: block;
    position: absolute;
    top: -22px;
    left: -8px;
    z-index: 0;
    color: #eee3d8;
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.45) 60%, transparent 84%);
    mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.45) 60%, transparent 84%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .join-requirement:nth-child(1) > div::before { content: "1"; }
  .join-requirement:nth-child(2) > div::before { content: "2"; }
  .join-requirement:nth-child(3) > div::before { content: "3"; }

  .join-requirement h3,
  .join-requirement ul,
  .join-requirement .join-link {
    position: relative;
    z-index: 1;
  }

  .join-requirement h3 {
    font-size: 22px;
  }

  .join-requirement ul {
    margin: 12px 0 18px;
    font-size: 13px;
    line-height: 1.75;
  }

  .join-process {
    gap: 1px;
  }

  .join-process-step {
    min-height: 136px;
    padding: 24px 8px 18px;
  }

  .join-process-step strong {
    font-size: 24px;
  }

  .join-store {
    width: 1920px;
    min-height: 500px;
    padding-top: 82px;
    background-position: center;
  }

  .join-store-copy .inner-copy {
    margin-top: 30px;
  }

  .join-store-details {
    margin-top: 30px;
  }

  .join-store-name {
    color: #fff;
    font-size: 22px;
    font-weight: 400;
  }

  .join-store-details .inner-copy {
    margin-top: 12px;
  }

  .join-application-section {
    padding: 58px 0;
  }

  .join-application-image {
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .join-form {
    gap: 14px;
  }

  .cases-featured {
    padding: 58px 0;
  }

  .cases-featured .case-feature-main,
  .cases-featured .case-feature-grid > figure:nth-child(2) {
    height: auto;
  }

  .cases-featured .case-feature-grid > figure img {
    height: auto;
    object-fit: contain;
  }

  .cases-featured .case-feature-copy {
    padding: 24px 22px;
    border-radius: 0 0 36px 0;
  }

  .cases-gallery {
    padding: 58px 0;
  }

  .case-gallery-locations {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: none;
  }

  .case-gallery-locations::-webkit-scrollbar {
    display: none;
  }

  .case-gallery-locations > * {
    flex: 0 0 auto;
  }

  .cases-other {
    padding: 58px 0;
  }

  .case-other-controls button {
    width: 44px;
    height: 44px;
  }

  .case-other-tabs {
    gap: 18px;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 8px;
    scrollbar-width: none;
  }

  .case-other-tabs::-webkit-scrollbar {
    display: none;
  }

  .brand-profile,
  .brand-symbol,
  .brand-application,
  .brand-ip,
  .brand-partners,
  .brand-welfare,
  .honors-certificates,
  .heart-precision,
  .heart-craft,
  .heart-potential {
    padding-top: 58px;
    padding-bottom: 62px;
  }

  .brand-profile-media,
  .brand-symbol-media,
  .brand-application-gallery img,
  .brand-application-gallery figure:first-child img {
    height: 280px;
  }

  .honors-certificates {
    min-height: 0;
  }

  .honors-shelf-row {
    margin-bottom: 34px;
  }

  .honors-certificate-grid {
    gap: 20px 22px;
    padding: 0;
  }

  .honors-certificate-grid img {
    max-height: 180px;
  }

  .heart-precision,
  .heart-craft {
    overflow: hidden;
  }

  .heart-benefits {
    gap: 12px;
    margin-top: 32px;
  }

  .heart-benefit {
    padding: 22px 18px;
  }

  .contact-main {
    min-height: 0;
  }

  .contact-info {
    padding: 54px 22px 44px;
  }

  .contact-heading {
    margin-bottom: 34px;
  }

  .contact-method .contact-text {
    white-space: normal;
  }

  .contact-map {
    height: 300px;
  }

  .contact-qrcode-band {
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 16px;
    padding: 34px 20px 38px;
  }

  .contact-qrcode img {
    width: 96px;
    height: 96px;
    margin-bottom: 12px;
  }

  .contact-qrcode p {
    font-size: 16px;
  }

  .store-finder {
    padding: 48px 0;
  }

  .store-search {
    gap: 12px;
  }

  .store-search input,
  .store-search button {
    height: 48px;
  }

  .store-locator {
    padding: 0 0 54px;
  }

  .store-map {
    height: 300px;
  }

  .store-results {
    margin-top: 22px;
  }

  .store-card {
    padding: 18px 18px 16px;
  }

  .footer,
  .brand-story-page + .footer,
  .history-page + .footer,
  .honors-page + .footer,
  .water-paint-page + .footer,
  .manufacturing-page + .footer,
  .products-page + .footer,
  .cases-page + .footer,
  .five-hearts-page + .footer,
  .join-page + .footer,
  .stores-page + .footer,
  .contact-page + .footer {
    height: auto;
    padding: 36px 20px 24px;
    overflow: visible;
    background: #151515;
  }

  .footer .container,
  .brand-story-page + .footer .container,
  .history-page + .footer .container,
  .honors-page + .footer .container,
  .water-paint-page + .footer .container,
  .manufacturing-page + .footer .container,
  .products-page + .footer .container,
  .cases-page + .footer .container,
  .five-hearts-page + .footer .container,
  .join-page + .footer .container,
  .stores-page + .footer .container,
  .contact-page + .footer .container {
    width: 100%;
    height: auto;
    padding: 0;
    transform: none;
  }

  .footer-inner {
    gap: 24px;
    padding-bottom: 24px;
  }

  .footer-logo {
    margin-bottom: 14px;
    padding: 20px;
  }

  .footer-logo img {
    width: min(210px, 76%);
  }

  .footer-phone {
    font-size: 24px;
  }

  .footer-social {
    margin-top: 18px;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 28px;
  }

  .footer-column h4 {
    margin-bottom: 10px;
    font-size: 14px;
  }

  .footer-column li {
    margin-bottom: 8px;
  }

  .footer-column a {
    font-size: 12px;
  }

  .footer-bottom {
    padding-top: 18px;
    font-size: 14px;
  }

  /* ===== Five Hearts mobile polish (2026-09-29) =====
     Reset desktop absolute-positioned layouts for heart-assurance / precision /
     craft / service / potential so each section flows naturally on phone widths. */

  .heart-assurance,
  .heart-precision,
  .heart-craft,
  .heart-service,
  .heart-potential {
    position: relative;
    min-height: 0;
    height: auto;
    padding: 0;
    overflow: hidden;
  }

  .heart-precision,
  .heart-service {
    background: #000;
  }

  .heart-potential {
    background: #fff;
  }

  .heart-assurance .inner-shell,
  .heart-precision .inner-shell,
  .heart-craft .inner-shell,
  .heart-service .inner-shell,
  .heart-potential .inner-shell {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    padding: 44px 20px 52px;
    margin: 0;
  }

  .heart-assurance .inner-split,
  .heart-precision .inner-split,
  .heart-craft .inner-split,
  .heart-service .inner-split,
  .heart-potential .inner-split {
    display: block;
    position: static;
    height: auto;
    min-height: 0;
    margin: 0;
  }

  .heart-assurance .inner-split > div,
  .heart-precision .inner-split > div,
  .heart-craft .inner-split > div,
  .heart-service .inner-split > div,
  .heart-potential .inner-split > div {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .heart-assurance .heart-number,
  .heart-precision .heart-number,
  .heart-craft .heart-number,
  .heart-service .heart-number,
  .heart-potential .heart-number {
    position: static;
    inset: auto;
    margin: 0;
    font-size: 18px;
  }

  .heart-assurance .inner-kicker,
  .heart-precision .inner-kicker,
  .heart-craft .inner-kicker,
  .heart-service .inner-kicker,
  .heart-potential .inner-kicker {
    font-size: 13px;
  }

  .heart-assurance .inner-title,
  .heart-precision .inner-title,
  .heart-craft .inner-title,
  .heart-service .inner-title,
  .heart-potential .inner-title {
    margin-top: 10px;
    font-size: 28px;
    line-height: 1.3;
  }

  .heart-assurance .inner-copy,
  .heart-precision .inner-copy,
  .heart-craft .inner-copy,
  .heart-service .inner-copy,
  .heart-potential .inner-copy {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.85;
    white-space: normal;
  }

  /* Hide desktop decorative pseudo lines on split sections */
  .heart-precision .inner-split::before,
  .heart-precision .inner-split::after,
  .heart-craft .inner-split::before,
  .heart-craft .inner-split::after {
    display: none;
  }

  /* Hide desktop left-to-right gradient overlay on heart-potential */
  .heart-potential::before {
    display: none;
  }

  /* Media (images) - reset absolute positioning, make responsive */
  .heart-assurance .inner-media,
  .heart-precision .inner-media,
  .heart-craft .inner-media,
  .heart-service .inner-media,
  .heart-potential .inner-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0 0 24px;
    overflow: hidden;
    box-shadow: none;
  }

  .heart-assurance .inner-media img,
  .heart-precision .inner-media img,
  .heart-craft .inner-media img,
  .heart-service .inner-media img,
  .heart-potential .inner-media img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .heart-assurance .inner-media.is-shadow,
  .heart-precision .inner-media.is-frame::before,
  .heart-service .inner-media::after {
    box-shadow: none;
  }

  .heart-precision .inner-media.is-frame::before,
  .heart-craft .inner-media.is-frame::before,
  .heart-potential .inner-media.is-shadow {
    display: none;
  }

  .heart-service .inner-media::after {
    content: none;
  }

  /* ===== heart-assurance: stack content + image, 1-col metrics ===== */
  .heart-assurance .inner-split > div {
    margin-bottom: 28px;
  }

  .heart-assurance .inner-metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 28px;
  }

  .heart-assurance .inner-metric {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid #eee1cf;
    border-radius: 14px;
    background: #fff;
  }

  .heart-assurance .inner-metric strong {
    width: 64px;
    height: 64px;
    font-size: 18px;
    border-radius: 50%;
    border: 1px solid #d8c3aa;
    color: #b9946d;
    background: transparent;
    display: grid;
    place-items: center;
  }

  .heart-assurance .inner-metric span {
    margin: 0;
    font-size: 14px;
    white-space: normal;
    line-height: 1.5;
    color: #555;
  }

  .heart-assurance-icon {
    width: 36px;
    height: 36px;
    /* 修复:补回 desktop 的棕色 filter,统一所有 icon 颜色
       (源 PNG 是多色,如 assurance-environment.png 是绿色) */
    filter: brightness(0) saturate(100%) invert(73%) sepia(17%) saturate(784%) hue-rotate(345deg) brightness(88%) contrast(85%);
  }

  /* ===== heart-precision: 2-col feature grid ===== */
  .heart-precision .inner-feature-grid {
    position: static;
    inset: auto;
    width: 100%;
    margin: 24px 0 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.08);
  }

  .heart-precision .inner-feature {
    min-height: 0;
    padding: 24px 14px;
    background: #1c1814;
  }

  .heart-precision .inner-feature-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
  }

  .heart-precision-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(73%) sepia(17%) saturate(784%) hue-rotate(345deg) brightness(88%) contrast(85%);
  }

  .heart-precision .inner-feature h3 {
    font-size: 16px;
    color: #c9a77c;
  }

  .heart-precision .inner-feature p {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
  }

  /* ===== heart-craft: 2-col benefits ===== */
  .heart-craft .heart-benefits {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    margin-top: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .heart-craft .heart-benefit {
    position: relative;
    height: auto;
    padding: 22px 16px 20px;
    background: #f7f3ef;
    border-radius: 0;
  }

  .heart-benefit-icon {
    position: relative;
    inset: auto;
    width: 44px;
    height: 44px;
    margin: 0 0 12px;
    /* 修复:补回 desktop 的棕色 filter,避免源 PNG 多色显示 */
    filter: brightness(0) saturate(100%) invert(73%) sepia(17%) saturate(784%) hue-rotate(345deg) brightness(88%) contrast(85%);
  }

  .heart-craft .heart-benefit strong {
    font-size: 16px;
    color: #1f1d1b;
  }

  .heart-craft .heart-benefit p {
    margin-top: 10px;
    color: #777;
    font-size: 12px;
    line-height: 1.7;
  }

  /* ===== heart-service (dark) ===== */
  .heart-service {
    background: #000;
  }

  .heart-service .inner-shell {
    padding-top: 44px;
    padding-bottom: 52px;
  }

  .heart-service .inner-split > div {
    margin-top: 8px;
  }

  .heart-service .inner-copy {
    color: rgba(255, 255, 255, 0.7);
  }

  .heart-service-list {
    margin-top: 24px;
  }

  .heart-service-item {
    padding-left: 18px;
  }

  .heart-service-item + .heart-service-item {
    margin-top: 28px;
  }

  .heart-service-item::before {
    height: 56px;
  }

  .heart-service-item h3 {
    font-size: 17px;
  }

  .heart-service-item p {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.7;
  }

  /* ===== heart-potential (light bg) ===== */
  .heart-potential {
    background: #fff;
  }

  .heart-potential .inner-shell {
    padding-top: 44px;
    padding-bottom: 52px;
  }

  .heart-potential .inner-copy {
    color: #555;
  }

  .heart-potential-list {
    margin-top: 24px;
  }

  .heart-potential-item {
    padding-left: 18px;
  }

  .heart-potential-item + .heart-potential-item {
    margin-top: 26px;
  }

  .heart-potential-item::before {
    height: 54px;
  }

  .heart-potential-item h3 {
    font-size: 17px;
    color: #b9946d;
  }

  .heart-potential-item p {
    margin-top: 10px;
    color: #777;
    font-size: 13px;
    line-height: 1.75;
  }
}

@media (min-width: 769px) {
  .nav > .nav-link,
  .nav > .nav-item > .nav-link {
    font-size: 18px;
  }
}

/* 顶部 logo 不显示副标语小字（2026-09-01 新版 logo 要求） */
.header .logo-sub {
  display: none;
}

/* 窄屏（<=1024px）头部 logo：改用白字+红箭头图片，替代原 brightness(0) invert(1) 滤镜（该滤镜会把红箭头一并滤白） */
@media (max-width: 1024px) {
  .header .logo-image {
    display: none;
  }

  .header .logo::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 145px;
    height: 32px;
    background: url("../images/logo-header-white.png") center / contain no-repeat;
  }
}

/* 首页新闻资讯板块浅色化（2026-09-01 应用户要求：色系改亮，别那么暗）。
   用 #news（ID 选择器）覆盖 .home-page 嵌套作用域里的深色渐变规则 */
#news {
  background: #f7f6f3;
}

#news .section-title-cn.light {
  color: var(--color-black);
}

#news .section-title-en,
#news .section-title-en-light {
  color: rgba(0, 0, 0, 0.45);
}

#news .news-arrow {
  border-color: rgba(0, 0, 0, 0.22);
  color: var(--color-black);
}

#news .news-arrow:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-white);
}

@media (min-width: 1601px) {
  #news .news-more {
    border-color: rgba(0, 0, 0, 0.8);
    color: var(--color-black);
  }
}

/* 头部花朵徽标与文字 logo 的视觉对齐微调（2026-09-04） */
@media (max-width: 1024px) {
  .header .logo .logo-emblem {
    width: 38px;
    height: auto;
    transform: translateY(2px);
  }
}

/* Contact map: widen canvas and shift left so the Tencent pin+info-window
   ensemble (window opens left of the pin) reads centered in the visible area. */
.contact-map iframe {
  width: calc(100% + 520px);
  left: -260px;
  transform: translateX(260px);
}


/* ===== 2026-09-21: widen content on iMac/large displays ===== */
@media (min-width: 1920px) {
  :root {
    --max-width: 1840px;
  }
  .container,
  .news-page-shell,
  .news-detail-body,
  .case-pages .inner-shell,
  .anti-counterfeit .inner-shell {
    max-width: 1840px;
  }
}

@media (min-width: 2560px) {
  :root {
    --max-width: 2400px;
  }
  .container,
  .news-page-shell,
  .news-detail-body,
  .case-pages .inner-shell,
  .anti-counterfeit .inner-shell {
    max-width: 2400px;
  }
}