/* ========== Reset & Base ========== */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            font-size: 16px;
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background: #fff;
            color: #fff;
            line-height: 1.5;
            overflow-x: hidden;
        }

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

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

        ul {
            list-style: none;
        }

        /* ========== Container ========== */
        .container {
            width: 100%;
            max-width: 1920px;
            margin: 0 auto;
            padding: 0 clamp(20px, 5.2vw, 100px);
        }

        /* ========== Hero Wrapper (shares background for header + banner) ========== */
        .hero-wrapper {
            position: relative;
            width: 100%;
            background: #1a1a1a;
            aspect-ratio: 1632 / 850;
            min-height: clamp(380px, 52vw, 850px);
            display: flex;
            flex-direction: column;
        }

        .hero-wrapper__bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background-image: url('/static/web/img/hero-bg.png');
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            z-index: 0;
        }

        .hero-wrapper__overlay {
            position: absolute;
            inset: 0;
            background: rgba(15, 18, 28, 0.18);
            z-index: 1;
            pointer-events: none;
        }

        /* ========== Header (Independent Section) ========== */
        .header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            width: 100%;
            background: transparent;
        }

        .header__inner {
            position: relative;
            z-index: 10;
            padding-top: clamp(8px, 0.8vw, 14px);
        }

        /* Top Bar */
        .header__top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: clamp(6px, 0.5vw, 10px);
        }

        .header__logo {
            flex-shrink: 0;
            z-index: 3;
        }

        .header__logo img {
            width: clamp(70px, 7.1vw, 137px);
            height: auto;
        }

        .header__actions {
            display: flex;
            align-items: center;
            gap: clamp(4px, 0.5vw, 10px);
            position: relative;
            z-index: 3;
        }

        /* Search Button */
        .header__search-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            cursor: pointer;
            padding: 10px 12px;
            border-radius: 6px;
            transition: background 0.25s;
        }

        .header__search-btn:hover {
            background: rgba(255, 255, 255, 0.12);
        }

        .header__search-icon {
            width: clamp(14px, 1.0vw, 20px);
            height: auto;
            flex-shrink: 0;
        }

        /* Search Bar Overlay */
        .search-bar {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 30;
            background: rgba(255, 255, 255, 0.97);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            padding: clamp(20px, 2.5vw, 40px) 0;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px);
            transition: opacity 0.28s, visibility 0.28s, transform 0.28s;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
            /* The hidden (default) state still occupies layout and can push
               the page wider than the viewport on very small screens, so cap
               it and clip overflow even while collapsed. */
            max-width: 100%;
            overflow-x: hidden;
        }

        .search-bar.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .search-bar__inner {
            max-width: clamp(650px, 70%, 1100px);
            margin: 0 auto;
            padding: 0 clamp(20px, 5.2vw, 100px);
            display: flex;
            align-items: center;
            gap: clamp(12px, 1.4vw, 24px);
        }

        .search-bar__input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            padding: clamp(12px, 1.1vw, 20px) 8px;
            font-size: clamp(16px, 1.25vw, 24px);
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            color: #1a1a1a;
            border-bottom: 2px solid #ddd;
            transition: border-color 0.25s;
        }

        .search-bar__input:focus {
            border-bottom-color: #1a1a1a;
        }

        .search-bar__input::placeholder {
            color: #aaa;
        }

        .search-bar__submit {
            background: #1a1a1a;
            color: #fff;
            border: none;
            padding: clamp(12px, 1.1vw, 20px) clamp(24px, 2.8vw, 48px);
            border-radius: 6px;
            cursor: pointer;
            font-size: clamp(14px, 1.1vw, 20px);
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-weight: 500;
            letter-spacing: 0.5px;
            white-space: nowrap;
            transition: background 0.25s;
        }

        .search-bar__submit:hover {
            background: #000;
        }

        .search-bar__close {
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            cursor: pointer;
            width: clamp(32px, 2.4vw, 44px);
            height: clamp(32px, 2.4vw, 44px);
            border-radius: 50%;
            font-size: clamp(20px, 1.6vw, 28px);
            color: #888;
            transition: background 0.25s, color 0.25s;
            flex-shrink: 0;
        }

        .search-bar__close:hover {
            background: rgba(0, 0, 0, 0.06);
            color: #333;
        }

        /* Language Dropdown */
        .header__lang {
            position: relative;
            z-index: 30;
        }

        .header__lang-trigger {
            display: flex;
            align-items: center;
            gap: 8px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 10px 14px;
            border-radius: 6px;
            transition: background 0.25s;
            color: #fff;
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-size: clamp(14px, 1.04vw, 20px);
            font-weight: 400;
            white-space: nowrap;
        }

        .header__lang-trigger:hover {
            background: rgba(255, 255, 255, 0.12);
        }

        .header__lang-arrow {
            width: clamp(6px, 0.52vw, 10px);
            height: auto;
            flex-shrink: 0;
            transition: transform 0.3s;
        }

        .header__lang.active .header__lang-arrow {
            transform: rotate(180deg);
        }

        .header__lang-dropdown {
            position: absolute;
            top: calc(100% + 4px);
            right: 0;
            min-width: 140px;
            background: rgba(255, 255, 255, 0.97);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border-radius: 8px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
            padding: 6px 0;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-6px);
            transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
            z-index: 20;
            list-style: none;
        }

        .header__lang.active .header__lang-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .header__lang-dropdown a {
            display: block;
            padding: 10px 20px;
            color: #333;
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-size: 14px;
            text-decoration: none;
            transition: background 0.2s, color 0.2s;
        }

        .header__lang-dropdown a:hover {
            background: rgba(0, 0, 0, 0.04);
            color: #5b9bff;
        }

        /* Mobile/tablet: language dropdown */
        @media (max-width: 1024px) {
            .header__lang-dropdown {
                right: -50px;
            }
        }

        /* Divider - full width */
        .header__divider {
            width: 100%;
            height: 1px;
            background: rgba(255, 255, 255, 0.3);
        }

        /* Navigation */
        .header__nav {
            padding-top: clamp(4px, 0.35vw, 6px);
            padding-bottom: clamp(4px, 0.35vw, 6px);
            position: relative;
            z-index: 3;
        }

        .header__nav-list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 0;
            width: 100%;
        }

        .header__nav-item {
            display: flex;
            align-items: center;
            white-space: nowrap;
        }

        .header__nav-separator {
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-size: clamp(14px, 1.17vw, 22.4px);
            font-weight: 400;
            color: rgba(255, 255, 255, 0.7);
            user-select: none;
            padding: 0 2px;
        }

        .header__nav-link {
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-size: clamp(14px, 1.17vw, 22.4px);
            font-weight: 600;
            color: #fff;
            padding: clamp(2px, 0.3vw, 6px) clamp(4px, 0.6vw, 12px);
            transition: color 0.3s;
            position: relative;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
        }

        .header__nav-link:hover {
            color: #5b9bff;
        }

        /* ========== Banner (Independent Section) ========== */
        .banner {
            position: relative;
            z-index: 2;
            width: 100%;
            background: transparent;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        /* No background image on banner - rely on hero-wrapper bg */

        .banner__inner {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: clamp(16px, 3vw, 60px);
            flex: 1;
            padding-bottom: clamp(16px, 2.5vw, 50px);
        }

        .banner__title {
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-size: clamp(18px, 1.72vw, 33px);
            font-weight: 400;
            line-height: 1.45;
            color: #fff;
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
            max-width: 100%;
            flex: 1 1 50%;
            min-width: 0;
            padding-bottom: clamp(8px, 1.0vw, 20px);
        }

        /* Product image - sits at bottom-right, overflows banner boundary */
        .banner__product {
            position: relative;
            flex: 0 0 auto;
            width: clamp(200px, 28.9vw, 555px);
            align-self: flex-end;
            margin-bottom: clamp(-160px, -22vw, -80px); /* overflow downward into about */
            z-index: 5;
            pointer-events: none;
        }

        .banner__product img {
            width: 100%;
            height: auto;
        }

        /* ========== Mobile Menu Toggle ========== */
        .header__menu-toggle {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            z-index: 10;
            padding: 8px;
            background: none;
            border: none;
        }

        .header__menu-toggle span {
            display: block;
            width: 24px;
            height: 2px;
            background: #fff;
            border-radius: 2px;
            transition: 0.3s;
        }

        .header__menu-toggle.active span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }

        .header__menu-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .header__menu-toggle.active span:nth-child(3) {
            transform: rotate(-45deg) translate(5px, -5px);
        }

        /* ========== About Section ========== */
        .about {
            position: relative;
            background: #fff;
            padding: clamp(120px, 18vw, 350px) 0 clamp(40px, 5vw, 100px);
            overflow: visible;
            /* Vertical offset between the showcase image's bottom edge
               and the absolutely-positioned caption / View-More buttons.
               Also used by .about__gallery as a negative top margin so
               the Products Gallery overlaps that strip and the buttons
               sit ON the gallery's gradient. */
            --media-pb: clamp(40px, 4vw, 58px);
        }

        .about__inner {
            position: relative;
            z-index: 1;
            /* The showcase image is clamped to (320px, 46.2%, 781px) and
               centered. The paragraph is wider and shares the same left
               edge as the showcase, so the text overflows to the right
               (matching the Figma design). The --showcase-w-pct variable
               is what the .about__showcase width uses; we mirror it here
               so the text's left offset always matches. */
            --showcase-w-pct: 46.2%;
            --text-w-pct: 64%;
            --showcase-w: clamp(320px, var(--showcase-w-pct), 781px);
            --showcase-left: calc((100% - var(--showcase-w)) / 2);
        }

        /* Header Row: Title on top-left + Description below (narrow column) */
        .about__header {
            display: grid;
            grid-template-columns: 1fr;       /* single column -> both stack vertically */
            gap: clamp(20px, 2.2vw, 40px);
            align-items: start;
            margin-bottom: clamp(30px, 3.5vw, 70px);
        }

        /* Title - Baskervville serif (matches Figma design) */
        .about__title {
            grid-column: 1 / -1;                /* span the full row above the text */
            justify-self: start;                /* left-align the title */
            font-family: 'Georgia', 'Times New Roman', 'Songti SC', serif;
            font-size: clamp(50px, 6.5vw, 125px);
            font-weight: 400;
            line-height: 1;
            color: #1a1a1a;
            letter-spacing: clamp(1px, 0.15vw, 4px);
            white-space: nowrap;
        }

        /* Description text */
        /* Paragraph - wider than the showcase, but its left edge is anchored
           to the showcase's left edge (not centered in the about container).
           This matches the Figma design where the text extends past the
           right side of the product image, sharing the same starting X. */
        .about__text {
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-size: clamp(14px, 1.25vw, 22px);
            font-weight: 400;
            line-height: 1.7;
            color: #333;
            width: clamp(320px, var(--text-w-pct), 1100px);
            margin-left: var(--showcase-left);   /* anchor left to showcase */
            margin-right: auto;
            padding-top: clamp(14px, 1.2vw, 24px);
            text-align: left;
        }

        /* Product Showcase - sized to match Figma design.
           5.png is 781x805 but the product sits in the middle band.
           We lock the container to ~781/470 and use object-fit:cover so
           only the top/bottom padding of 5.png is cropped away, matching
           the Figma design (slightly taller than the original 1.88:1
           crop, so the bend at the top of the pipe is more visible).
           Margins are 0 here; the surrounding .about__media grid handles
           the bottom gap so the caption & View-More button can share the
           same baseline as the bottom of the image. */
        .about__showcase {
            position: relative;
            margin: 0;
            width: var(--showcase-w);            /* driven by --showcase-w-pct */
            aspect-ratio: 781 / 470;   /* horizontal rectangle per Figma (~1.66:1) */
            overflow: hidden;          /* clip the cropped top/bottom of 5.png */
        }

        /* Media row: the showcase image sits in the top of the container;
           the "+ Concealed Design" caption and the View-More button are
           absolutely pinned to the container's bottom edge so all three
           bottoms line up on the same baseline (matches the Figma design
           where the image bottom, the caption bottom, and the button
           bottom are colinear).
           Padding-bottom on the container reserves vertical space for the
           absolutely-positioned caption / button so they sit BELOW the
           image (not overlapping it). */
        .about__media {
            position: relative;
            display: block;
            /* padding-bottom drives how far the absolutely-positioned
               caption / View-More button rise so their BOX bottoms
               land exactly on the image's bottom edge. The --media-pb
               variable is declared on the parent .about so that
               .about__gallery can also reference it for its negative
               top margin (overlap effect). */
            padding-bottom: var(--media-pb);
        }

        .about__media > .about__showcase {
            width: var(--showcase-w);
            aspect-ratio: 781 / 470;
            margin: 0 auto 0;
        }

        /* Caption + View-More: pinned to the bottom-left and bottom-right of
           the .about__media box respectively. The padding-bottom above
           places their tops right under the image's bottom edge. Their
           visual bottoms sit on a single horizontal line, matching the
           Figma design. */
        .about__media > .about__caption {
            position: absolute;
            bottom: var(--media-pb);
            left: 0;
            display: flex;
            align-items: flex-start;
            gap: clamp(10px, 1vw, 20px);
            /* Reserve space for the View More button so the two never
               collide on narrower screens. The button takes ~150-220 px
               (text + arrow + padding); the max-width leaves that gap
               plus a comfortable margin. */
            max-width: calc(100% - clamp(150px, 14vw, 230px));
            /* Sit above the Products Gallery strip so the gallery image
               (which overlaps the showcase's bottom strip via negative
               top margin) doesn't visually cover the caption. */
            z-index: 2;
            /* Push the caption down into the gallery's gradient area so
               it appears to sit on the gradient backdrop (matching the
               design where caption and button are on the Products
               Gallery gradient strip, not below it on white). */
            transform: translateY(calc(var(--media-pb) * 1.6));
        }

        .about__media > .about__view-more {
            position: absolute;
            bottom: var(--media-pb);
            right: 0;
            z-index: 2;
            transform: translateY(calc(var(--media-pb) * 1.6));
        }

        .about__showcase img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;         /* crop top/bottom to fill frame */
            object-position: center;   /* keep the product centered */
        }

        /* "+ Concealed Design, Harmonize Modern Decor" caption.
           (Grid placement is handled by .about__media above; this rule only
           defines the internal layout: plus icon stacked ABOVE the two-line
           text, with a small gap between them.) */
        .about__caption {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: clamp(8px, 0.6vw, 12px);
        }

        .about__plus {
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-size: clamp(22px, 1.6vw, 32px);
            font-weight: 300;
            color: #888;
            line-height: 1;
        }

        .about__caption-text {
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-size: clamp(13px, 0.85vw, 16px);
            font-weight: 400;
            color: #555;
            line-height: 1.5;
        }

        /* View More button (matches design: border + black arrow square) */
        .about__view-more {
            display: inline-flex;
            align-items: stretch;
            border: 1px solid #1a1a1a;
            border-radius: 0;
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-size: clamp(12px, 0.85vw, 16px);
            font-weight: 400;
            color: #1a1a1a;
            text-decoration: none;
            letter-spacing: 0.5px;
            overflow: hidden;
            transition: background 0.3s, color 0.3s;
        }

        .about__view-more > span:first-child {
            /* Less left padding than right: text sits close to the left
               edge of the button while leaving breathing room before the
               arrow block (matching the design). */
            padding: clamp(10px, 1.0vw, 18px) clamp(18px, 1.8vw, 30px) clamp(10px, 1.0vw, 18px) clamp(14px, 1.3vw, 22px);
            display: flex;
            align-items: center;
            transition: color 0.3s;
        }

        .about__view-more-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #1a1a1a;
            color: #fff;
            /* Keep the arrow block SQUARE — width equals height — by
               fixing both dimensions and centering vertically inside the
               parent button (parent uses align-items: stretch, so we
               must override align-self here). */
            width: clamp(28px, 1.8vw, 38px);
            height: clamp(28px, 1.8vw, 38px);
            aspect-ratio: 1 / 1;
            align-self: center;
            /* Inset the black arrow square from top, bottom AND right so it
               sits inside the button's outline with a visible gap on all
               three inner edges, matching the design. */
            margin: clamp(4px, 0.5vw, 8px) clamp(4px, 0.5vw, 8px) clamp(4px, 0.5vw, 8px) 0;
            flex-shrink: 0;
            transition: background 0.3s, color 0.3s;
        }

        .about__view-more-arrow svg {
            width: clamp(10px, 0.7vw, 14px);
            height: clamp(10px, 0.7vw, 14px);
        }

        .about__view-more:hover {
            background: #1a1a1a;
            color: #fff;
        }

        .about__view-more:hover .about__view-more-arrow {
            background: #fff;
            color: #1a1a1a;
        }

        /* Products Gallery (full-width) */
        .about__gallery {
            position: relative;
            width: 100%;
            overflow: hidden;
            /* The gallery image overlaps the caption / View-More strip
               below the showcase image — it pulls itself up by media-pb
               so its top edge starts at the showcase's bottom edge, and
               extends down behind the caption and button. The caption /
               button sit on the gallery's bright top area (z-index 2),
               matching the design where they appear on the gradient. */
            margin-top: calc(var(--media-pb) * -1);
            background: #fff;
            padding: 0;
        }

        .about__gallery-img {
            width: 100%;
            height: auto;
            display: block;
            position: relative;
            z-index: 1;
        }

        /* ========== Vision Section ========== */
        /* Figma 801_123: two-column top row (huge "Vision" headline + lead
           paragraph), with a decorative thin-line circle behind the title.
           Below that row: a left-side caption block ("Concealed Design…"
           + View More) and a right-side product pair (copper + chrome),
           top-aligned and same height, sitting BELOW the lead paragraph. */
        .vision {
            position: relative;
            width: 100%;
            background: #ffffff;
            color: #111111;
            padding: clamp(64px, 7vw, 112px) 0 clamp(48px, 6vw, 96px);
            overflow: hidden;
        }

        .vision__inner {
            position: relative;
            /* Two-column desktop layout: column 1 is the narrow left rail
               (caption + "View More"), column 2 is the wide right rail
               (lead paragraph + product photos). The headline and the
               bottom row span both columns. The lead's left edge is
               therefore pinned to the same vertical line as the product
               photos — matching the Figma design. */
            display: grid;
            grid-template-columns: minmax(220px, 1fr) 4fr;
            column-gap: clamp(16px, 2vw, 32px);
            row-gap: clamp(32px, 4vw, 56px);
        }

        /* Decorative thin-line circle behind the headline (asset 2.png).
           Anchored to the top-left, large, very faint. */
        .vision__circle {
            position: absolute;
            top: -160px;
            left: -260px;
            width: 740px;
            height: 740px;
            pointer-events: none;
            z-index: 0;
        }

        .vision__circle img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            opacity: 0.35;
        }

        /* Headline row: large "Vision" title on its own line, above the lead
           paragraph. */
        .vision__title {
            position: relative;
            z-index: 1;
            grid-column: 1 / -1;
            font-family: 'Georgia', 'Times New Roman', 'Songti SC', serif;
            font-weight: 400;
            font-size: clamp(56px, 7.4vw, 110px);
            line-height: 0.95;
            letter-spacing: -0.01em;
            color: #0a0a0a;
            margin: 0 0 clamp(20px, 2.4vw, 40px);
            padding-left: clamp(0px, 0vw, 0px);
        }

        /* Lead paragraph row: sits below the headline. */
        .vision__top {
            position: relative;
            z-index: 1;
            /* The lead paragraph lives in the right column on desktop so its
               left edge aligns with the product photos below. */
            grid-column: 2 / -1;
            margin-bottom: 0;
        }

        /* Lead paragraph, above the two product images. */
        .vision__lead {
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-weight: 400;
            font-size: clamp(16px, 1.55vw, 28px);
            line-height: 1.55;
            color: #1a1a1a;
            margin: 0;
            max-width: 1072px;
            text-align: justify;
        }

        /* Middle row: caption column (left) + product pair (right).
           Uses a grid that gives the caption its own column and lets the
           two product images hug the right edge of the canvas. */
        .vision__middle {
            position: relative;
            z-index: 1;
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: minmax(220px, 1fr) 4fr;
            align-items: end;
            gap: clamp(16px, 2vw, 32px);
        }

        .vision__caption {
            /* Desktop (≥1025): stack vertically per the design — the "+" sits
               on its own line above the caption text, the "View More" button
               on a third line below. This matches the Figma mockup and the
               about block. Tablet/mobile overrides below switch this to a
               two-end row (group left, button right). */
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: clamp(10px, 1vw, 16px);
            padding-bottom: clamp(16px, 2vw, 32px);
        }

        .vision__caption-group {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: clamp(8px, 0.8vw, 12px);
        }

        .vision__plus {
            font-family: 'Georgia', 'Times New Roman', 'Songti SC', serif;
            font-size: clamp(20px, 1.6vw, 28px);
            line-height: 1;
            color: #0a0a0a;
        }

        .vision__caption-text {
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-weight: 400;
            font-size: clamp(13px, 1vw, 16px);
            line-height: 1.55;
            color: #111111;
            margin: 0;
        }

        /* Vision View More buttons reuse the .about__view-more visual style
           (border + black arrow box, matching the design). This class is only
           a thin alignment helper so the button sits left-aligned inside the
           caption column and never stretches. */
        .vision__view-more {
            flex-shrink: 0;
        }

        /* Product pair: two side-by-side frames with identical top + height
           so the photos are perfectly top-aligned and equally tall. */
        .vision__products {
            position: relative;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(12px, 1.4vw, 28px);
        }

        .vision__product {
            position: relative;
            width: 100%;
            /* Fixed aspect so both frames stay the same height regardless
               of which image is loaded. 3:4 portrait fits both the copper
               assembly (8.png) and the chrome fixture (12.png). */
            aspect-ratio: 3 / 4;
            overflow: hidden;
        }

        .vision__product-img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        /* Vision bottom block: large 3-line serif headline on the left
           and a second "View More" button pinned to the bottom-right
           (Figma 801_95). Matches the screenshot layout — title takes
           the full width row, the button sits at the right edge. */
        .vision__bottom {
            position: relative;
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: clamp(20px, 4vw, 60px);
            margin-top: 0;
        }

        /* Keep the View More button pinned to the title's baseline-bottom:
           never let it stretch to the title's full height. */
        .vision__bottom .about__view-more.vision__view-more {
            align-self: flex-end;
            flex: 0 0 auto;
        }

        .vision__bottom-title {
            font-family: 'Georgia', 'Times New Roman', 'Songti SC', serif;
            font-weight: 400;
            font-size: clamp(40px, 5.6vw, 74px);
            line-height: 1.15;
            color: #000;
            margin: 0;
            letter-spacing: 0.5px;
        }

        /* ========== Main Products Title Section (Figma 801_87) ========== */
        /* Full-bleed section: bg-banner.jpg (1080×475) PSD-sliced product
           scene backdrop painted on the whole section as
           `background-image: cover`. */
        .products-title {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            background-color: #f5f5f5;
            /* Responsive height only. NOTE: do NOT combine aspect-ratio
               with min-height here — the browser back-propagates min-height
               through the aspect ratio into a min-width (e.g. 768px viewport
               → min-width 960px), blowing out the section horizontally and
               shifting the absolutely-centered headline off-center on
               tablets/phones. 55vw ≈ the bg's 1080/475 ratio (~2.27 → height
               ≈ 0.44×width), capped at 844px so the 1920px viewport shows
               the same 844px-tall scene as the Figma 801_87 frame. */
            min-height: clamp(320px, 55vw, 844px);
        }

        .products-title__bg {
            position: absolute;
            inset: 0;
            z-index: -2;
            /* PSD-sliced banner from the Figma reference: 1080×475,
               cropped to the product scene only (no UI chrome). */
            background-image: url('/static/web/img/products-title-bg.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .products-title__inner {
            /* Pin the inner to the full section: `min-height: 100%` would
               resolve to auto (0) here because the section's height comes
               from `min-height`, not an explicit `height` — the percentage
               has nothing to resolve against and the inner collapses to 0,
               dragging the absolutely-positioned headline above the banner.
               Absolute + inset:0 makes the inner exactly the section's
               padding box, giving the headline a stable containing block. */
            position: absolute;
            inset: 0;
            z-index: 1;
        }

        .products-title__heading {
            /* Figma 801_87 places the headline bottom at ~77.2% down the
               844px image → ~22.8% above the bottom. Using `bottom: 22.8%`
               (relative to the section's padding-box, which equals the
               image's visible area with cover) drops the title into the
               lower band where the design has it.
               水平居中改用 left:0; right:0 + text-align:center，不再依赖
               transform:translateX(-50%)，否则会被 [data-reveal="fade"] 的
               transform:none 覆盖导致标题偏右、不居中。 */
            position: absolute;
            left: 0;
            right: 0;
            bottom: 22.8%;
            margin: 0;
            text-align: center;
            font-family: 'Georgia', 'Times New Roman', 'Songti SC', serif;
            font-weight: 400;
            /* Match the Figma frame: ~76.77px at 1920, scaling down so the
               headline fits inside the central band of the product scene
               rather than spanning the whole viewport. */
            font-size: clamp(34px, 4.0vw, 80px);
            line-height: 1.05;
            letter-spacing: 0.04em;
        }

        /* Plain white serif headline. The image-text fill was too low-
           contrast against the bright product scene, so the title is
           rendered as crisp white type. A subtle dark shadow keeps the
           glyphs legible over lighter areas of the scene. */
        .products-title__text {
            display: inline-block;
            color: #ffffff;
            -webkit-text-fill-color: #ffffff;
            text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
        }

        /* ========== Main Products List Section (Figma 801_21 + 801_54) ========== */
        /* Product showcase directly below the "MAIN PRODUCTS" title — the
           two modules form one continuous block on the same #BCB5A3
           (brass-toned) ground. Figma 801_21/54 lays out 8 white rounded
           cards (420×568, radius 15) on a 1770px-wide row (420×4 + 30×3
           gutters, 2 rows total). Each card: product photo centered in the
           upper area, title (Poppins 500 / 20px / #333333), spec line
           (Poppins 500 / 16px / #666666) bottom-left, and a 48px brass-toned
           circular badge (#BCB5A3) bottom-right. */
        .products-list {
            background-color: #BCB5A3;
            /* Horizontal padding lives on the section (not the grid) so
               it acts as the warm-tone gutter on both sides of the card
               row — matching Figma 801_21/54 where 75px of #BCB5A3 sits
               between the first/last card and the page edge at 1920.
               Scales down smoothly with viewport so cards don't kiss the
               section edge on laptop sizes (1366/1440) either. */
            padding: clamp(40px, 4.2vw, 80px) 0 clamp(48px, 4.7vw, 90px);
            padding-left: clamp(20px, 3.9vw, 75px);
            padding-right: clamp(20px, 3.9vw, 75px);
        }

        .products-list__grid {
            display: grid;
            /* minmax(0, 1fr) prevents long unbroken text/subtitles from
               inflating the column beyond its share and overflowing the
               section on laptop widths (≈1380px). */
            grid-template-columns: repeat(4, minmax(0, 1fr));
            /* 30px gutters on desktop, tightening on small screens */
            gap: clamp(16px, 1.6vw, 30px);
            /* The grid itself takes the full content area left by the
               section padding, capped at the Figma 1770px row width and
               centered so the cards stay 420px on 1920 without being
               squeezed by extra inline padding. */
            max-width: 1770px;
            margin-inline: auto;
            padding-inline: 0;
        }

        .product-card {
            position: relative;
            display: flex;
            flex-direction: column;
            background: #ffffff;
            border-radius: 15px;
            /* Card padding mirrors the Figma canvas: 24px top (photo
               clearance), 26px sides, 33px bottom (text clearance). */
            padding: clamp(16px, 1.5vw, 24px) clamp(18px, 1.6vw, 26px) clamp(24px, 1.8vw, 33px);
            /* Lock the Figma 801_22 card proportion (420×568 ≈ 0.739) so the
               height tracks the column width at every breakpoint — at 1920 the
               420px-wide card resolves to exactly 568px tall, and on narrower
               viewports it scales proportionally instead of drifting. */
            aspect-ratio: 420 / 568;
            /* Soft shadow lifts the white cards off the grey ground */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
            /* Clickable card: smooth lift so users notice it is a link */
            text-decoration: none;
            color: inherit;
            transition: transform 0.28s ease, box-shadow 0.28s ease;
        }

        .product-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12);
        }

        .product-card__media {
            flex: 1;
            min-height: clamp(150px, 14vw, 300px);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .product-card__media img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
        }

        .product-card__body {
            width: 100%;
            margin-top: clamp(14px, 1.5vw, 28px);
            /* 不再预留右侧空间：让标题首行能用满整个卡片宽度。
               改用 padding-bottom 把标题往上抬，保证超长标题末行也不会
               与底部右下角圆形徽标在垂直方向撞上。 */
            padding-right: 0;
            padding-bottom: clamp(20px, 1.5vw, 32px);
            box-sizing: border-box;
        }

        .product-card__title {
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-weight: 500;
            font-size: clamp(16px, 1.04vw, 20px);
            line-height: 1.2;
            letter-spacing: 0.01em;
            color: #333333;
            /* Allow long unbroken titles to wrap inside the card so they
               never inflate the grid column's min-content width. */
            overflow-wrap: anywhere;
        }

        .product-card__desc {
            display: inline-block;
            max-width: calc(100% - (clamp(34px, 2.5vw, 48px) + 12px)); /* 整体右缩，为右下角箭头让位 */
            margin-top: clamp(8px, 0.7vw, 12px);
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-weight: 500;
            font-size: clamp(13px, 0.83vw, 16px);
            line-height: 1.3;
            color: #666666;
            /* Make sure an overly long spec/subtitle can still wrap instead
               of forcing the card wider than its grid column. */
            overflow-wrap: anywhere;
        }

        .product-card__badge {
            position: absolute;
            right: clamp(18px, 1.6vw, 26px);
            bottom: clamp(24px, 1.8vw, 33px);
            width: clamp(34px, 2.5vw, 48px);
            height: clamp(34px, 2.5vw, 48px);
            line-height: 0;
        }

        .product-card__badge img {
            width: 100%;
            height: 100%;
        }

        /* Responsive scaling: 4 columns on large desktop, 3 columns on
           laptop/small desktop (≈992–1400px), 2 columns on tablet, and a
           single column on phones. This avoids the cramped 4-up layout at
           ≈1380px where cards and long titles were overflowing. */
        /* Keep 4 columns all the way down to 768px so the Main Products row
           stays as one line on PC and tablet landscape. Below that, fold to
           2 columns on portrait tablets/phones, and 1 column on very narrow
           phones so text and images remain readable. */
        @media (max-width: 767px) {
            .products-list__grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                padding-inline: clamp(20px, 5vw, 40px);
            }
        }

        @media (max-width: 575px) {
            .products-list__grid {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        /* ========== Footer Section (Figma 801_9) ========== */
        /* Footer shares the same #BCB5A3 brass-toned ground as the Main
           Products list above, so the bottom of the page reads as one
           continuous warm-tone block. Content: centered wordmark on top,
           a 3-column band (MAIN MENU left / logo center / PRODUCTS right),
           contact line beneath the logo, and a bottom copyright bar. Canvas
           is 1764×557. */
        .footer {
            background-color: #BCB5A3;
            color: #1a1a1a;
            /* Bottom padding is intentionally zero so the black copyright
               strip below can fill the remaining space down to the very
               edge of the section — Figma 801_9 ends at the black bar with
               no #BCB5A3 ground visible beneath it. */
            padding: clamp(48px, 5vw, 96px) 0 0;
        }

        .footer__container {
            width: 100%;
            max-width: 1770px;
            margin: 0 auto;
            padding: 0 clamp(20px, 5.2vw, 100px);
        }

        .footer__wordmark {
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-weight: 600;
            font-size: clamp(26px, 3.6vw, 57px);
            letter-spacing: clamp(4px, 1vw, 11.39px);
            text-align: center;
            color: #1a1a1a;
            /* allow letters to wrap gracefully on narrow screens */
            line-height: 1.1;
        }

        .footer__columns {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: clamp(20px, 4vw, 60px);
            margin-top: clamp(28px, 3.2vw, 56px);
        }

        .footer__col--left { text-align: left; }
        .footer__col--right { text-align: right; }
        .footer__col--center { display: flex; justify-content: center; }
        .footer__col--center img {
            width: clamp(120px, 12vw, 188px);
            height: auto;
        }

        .footer__heading {
            font-family: 'Inter', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-weight: 700;
            font-size: clamp(20px, 1.9vw, 30px);
            letter-spacing: 0.23px;
            color: #1a1a1a;
        }

        .footer__list {
            list-style: none;
            margin: clamp(12px, 1vw, 18px) 0 0;
            padding: 0;
        }

        .footer__list li {
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-weight: 600;
            font-size: clamp(16px, 1.4vw, 22px);
            line-height: 1.7;
            color: #1a1a1a;
        }

        .footer__list--right {
            text-align: right;
            font-weight: 600;
        }

        .footer__contact {
            text-align: center;
            margin-top: clamp(16px, 2vw, 30px);
        }

        .footer__contact p {
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-weight: 400;
            font-size: clamp(16px, 1.5vw, 24px);
            letter-spacing: 0.14px;
            margin: clamp(4px, 0.5vw, 8px) 0;
            color: #1a1a1a;
        }

        .footer__bottom {
            /* Full-bleed black copyright bar (Figma 801_8: 1920×76 solid
               black strip), edge-to-edge across the page. Negative
               side-margins break out of .footer__container so the black
               strip runs to both viewport edges regardless of inner
               padding. */
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
            margin-top: clamp(36px, 3.4vw, 60px);
            margin-inline: calc(clamp(20px, 5.2vw, 100px) * -1);
            padding: clamp(14px, 1.4vw, 24px) clamp(20px, 5.2vw, 100px);
            background-color: #000000;
            color: #ffffff;
        }

        .footer__copy,
        .footer__icp {
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-weight: 400;
            font-size: clamp(13px, 1vw, 16px);
            letter-spacing: 0.23px;
            color: #ffffff;
        }

        .footer__icp { text-align: right; }

        /* Footer tablet: stack PRODUCTS under MAIN MENU, keep logo centered */
        @media (max-width: 900px) {
            .footer__columns {
                grid-template-columns: 1fr 1fr;
                grid-template-areas:
                    "left  right"
                    "center center";
                text-align: center;
            }
            .footer__col--left   { grid-area: left;  text-align: left; }
            .footer__col--right  { grid-area: right; text-align: right; }
            .footer__col--center { grid-area: center; margin-top: clamp(20px, 3vw, 32px); }
        }

        /* Footer phone: single column, everything centered */
        @media (max-width: 600px) {
            .footer__columns {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "center"
                    "left"
                    "right";
                gap: clamp(24px, 5vw, 32px);
            }
            .footer__col--left,
            .footer__col--right { text-align: center; }
            .footer__list--right { text-align: center; }
            .footer__bottom { flex-direction: column; text-align: center; }
            .footer__icp { text-align: center; }
        }

        /* ========== Feature / Product Detail Section ========== */
        /* Figma 801_100: full-bleed dark product backdrop with two white
           copy blocks (top-right + bottom-left). The backdrop is 3.png
           (1.png / 2.png are empty all-black layers and are omitted). */
        .feature {
            position: relative;
            width: 100%;
            /* Match the 1920 × 1050 backdrop aspect so the image always
               fills the section without awkward cropping at any width. */
            aspect-ratio: 1920 / 1050;
            min-height: clamp(420px, 55vw, 760px);
            overflow: hidden;
            background: #1a1a1a;
        }

        .feature__bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background-image: url('/static/web/img/feature-bg.png');
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            z-index: 0;
        }

        .feature__inner {
            position: relative;
            z-index: 1;
            height: 100%;
            /* Let the copy blocks be absolutely placed to mirror the
               Figma canvas positions (top-right / bottom-left). */
            display: block;
        }

        .feature__copy {
            position: absolute;
            color: #fff;
            font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-weight: 400;
            text-wrap: balance;
        }

        /* ---- Visual hierarchy on tablet/mobile ----
           The two copy blocks share the same large viewport size on PC
           (Figma alignment). On tablet/mobile where they stack, we wrap
           each paragraph in a frosted-glass card shell so they read as
           two distinct units:

           • TOP block  — "spec / how it works": brighter card with a
             strong left accent bar, giving it weight as the primary
             statement.
           • BOTTOM block — "marketing / lifestyle": a softer, more
             translucent card, so it visually recedes. */

        .feature__copy--top {
            top: clamp(40px, 5.4vw, 104px);
            /* Figma places the top block's right edge at x=1727 in a
               1927-wide canvas (offset ≈ 200px). Use that as the upper
               bound so the copy lands in the empty top-right area of the
               backdrop, not on the desk in the bottom-right. */
            right: clamp(20px, 10vw, 200px);
            width: clamp(260px, 36.6vw, 703px);
            /* PC base sizes (mobile overrides below) */
            font-size: clamp(15px, 1.46vw, 28px);
            line-height: 1.5;
            display: block;
        }

        .feature__copy--bottom {
            bottom: clamp(40px, 7.8vw, 150px);
            left: clamp(20px, 5.2vw, 100px);
            width: clamp(260px, 33.4vw, 641px);
            /* PC base sizes (mobile overrides below) */
            font-size: clamp(15px, 1.4vw, 27px);
            line-height: 1.5;
            color: rgba(255, 255, 255, 0.95);
            display: block;
        }

        /* ========== Responsive ========== */

        /* Medium: reduce nav items when space is tight */
        @media (max-width: 1100px) {
            .header__nav-separator {
                display: none;
            }

            .header__nav-list {
                justify-content: space-between;
                gap: clamp(4px, 0.8vw, 10px);
            }

            .header__nav-link {
                font-size: clamp(12px, 1.15vw, 14px);
                padding: 4px 6px;
            }
        }

        /* Tablet: single-column sub-sections */
        @media (max-width: 1024px) {
            .about__header {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .about__title {
                white-space: normal;
            }

            .about__showcase {
                width: clamp(320px, 60%, 781px);
            }

            .about__inner {
                --showcase-w-pct: 60%;
                --text-w-pct: 80%;
            }

            /* On tablet/mobile the paragraph drops the desktop
               showcase-aligned left offset and sits flush with the
               .about__title / showcase image's left edge. */
            .about__text {
                margin-left: 0;
            }

            /* absolute positioning already keeps the three elements
               bottom-aligned; just shrink the reserved bottom padding so
               the gap below the image stays proportional. We override
               --media-pb (the variable that also drives
               .about__caption/.about__view-more `bottom`) so they
               stay in sync — if you only override padding-bottom here
               the inner alignment breaks. */
            .about__media {
                --media-pb: clamp(40px, 4vw, 50px);
            }

            /* Tablet (≤1024px): the showcase narrows and the caption + View
               More button get too close to the image subject. Use a CSS
               grid that places the showcase on row 1 (full width) and
               caption + button side-by-side on row 2 (caption left,
               button right). This keeps everything clear of the product
               while mirroring the desktop layout's left/right split. */
            .about__media {
                display: grid;
                grid-template-columns: auto 1fr;
                grid-template-areas:
                    "image image"
                    "caption button";
                align-items: center;
                column-gap: clamp(10px, 1.5vw, 20px);
                row-gap: clamp(10px, 1.2vw, 16px);
                padding-bottom: 0;
                /* Keep --media-pb at its non-zero value (inherited from
                   .about) so .about__gallery's negative top margin still
                   pulls the gallery image up over the caption / button
                   row — so they appear on the gradient, just like desktop. */
                --media-pb: clamp(40px, 4vw, 50px);
            }

            .about__media > .about__showcase {
                grid-area: image;
                width: 100%;
                aspect-ratio: 781 / 470;
                margin: 0;
            }

            .about__media > .about__caption {
                grid-area: caption;
                position: static;
                bottom: auto;
                left: auto;
                max-width: 100%;
                margin: 0;
                justify-self: flex-start;
                transform: translateY(calc(var(--media-pb) * 1.0));
            }

            .about__media > .about__view-more {
                grid-area: button;
                position: static;
                bottom: auto;
                right: auto;
                max-width: 100%;
                margin: 0;
                justify-self: flex-end;
                transform: translateY(calc(var(--media-pb) * 1.0));
            }

            .banner__inner {
                gap: 16px;
            }

            .banner__title {
                max-width: 100%;
                flex: 1 1 55%;
            }

            .banner__product {
                width: min(38%, 300px);
                margin-bottom: clamp(-80px, -7vw, -40px);
            }

            /* Feature copy blocks: keep absolute placement but shrink the
               widths so they don't collide on tablets. Wrap each paragraph
               in a frosted-glass card shell so the two blocks read as
               distinct units without needing added label text. */
            .feature__copy {
                background: rgba(255, 255, 255, 0.06);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.14);
                border-radius: clamp(12px, 1.6vw, 18px);
                padding: clamp(16px, 2.2vw, 26px) clamp(18px, 2.6vw, 30px);
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
            }

            .feature__copy--top {
                width: clamp(280px, 42vw, 560px);
                font-size: clamp(15px, 1.8vw, 20px);
                line-height: 1.55;
                /* Primary statement: brighter card */
                background: rgba(255, 255, 255, 0.09);
            }

            .feature__copy--bottom {
                width: clamp(280px, 40vw, 520px);
                font-size: clamp(15px, 1.8vw, 20px);
                line-height: 1.55;
                color: rgba(255, 255, 255, 0.88);
                /* Secondary statement: softer, more translucent */
                background: rgba(255, 255, 255, 0.04);
            }

            /* Vision: stack the top row so the lead paragraph sits below
               the giant "Vision" headline. Keep the product pair side by
               side. */
            .vision__inner {
                /* Drop the 2-column desktop grid at tablet/mobile widths —
                   everything stacks into a single column for readability. */
                grid-template-columns: 1fr;
                row-gap: clamp(24px, 4vw, 40px);
            }

            .vision__top {
                /* title is now its own row; only the lead paragraph remains
                   here, so no grid is needed. */
                grid-column: 1 / -1;
                margin-bottom: 0;
            }

            .vision__lead {
                max-width: 100%;
            }

            .vision__middle {
                grid-template-columns: 1fr;
                gap: clamp(20px, 3vw, 32px);
            }

            .vision__caption {
                /* At tablet/mobile widths keep the caption ("+  text" group)
                   on the LEFT and the "View More" button on the RIGHT — a
                   two-end alignment that holds from desktop down through
                   phones. The "+" stays stacked ABOVE the text inside the
                   group, matching the design. */
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                gap: clamp(12px, 2vw, 20px);
                padding-bottom: 0;
                flex-wrap: nowrap;
            }

            .vision__caption-group {
                align-items: flex-start;
                gap: clamp(8px, 1.2vw, 12px);
                flex-shrink: 0;
            }

            .vision__caption .vision__plus { flex-shrink: 0; }

            .vision__caption-text {
                flex: none;
                text-align: left;
                min-width: 0;
            }

            .vision__view-more {
                flex-shrink: 0;
            }
        }

        /* Mobile: hamburger menu */
        @media (max-width: 1024px) {
            .header__menu-toggle {
                display: flex;
            }

            .header__top {
                padding-bottom: 12px;
            }

            .header__nav {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 245, 247, 0.96) 100%);
                backdrop-filter: blur(14px) saturate(140%);
                -webkit-backdrop-filter: blur(14px) saturate(140%);
                padding: 24px 0 28px;
                border-top: 1px solid rgba(0, 0, 0, 0.06);
                z-index: 9;
            }

            .header__nav.active {
                display: block;
                animation: navDrop 0.28s ease-out;
            }

            @keyframes navDrop {
                from {
                    opacity: 0;
                    transform: translateY(-8px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .header__nav-list {
                flex-direction: column;
                align-items: stretch;
                padding: 0 24px;
                gap: 0;
            }

            .header__nav-separator {
                display: none;
            }

            .header__nav-link {
                display: block;
                padding: 14px 4px;
                font-size: 17px;
                font-weight: 500;
                width: 100%;
                color: #555;
                text-shadow: none;
                border-bottom: 1px solid rgba(0, 0, 0, 0.08);
                letter-spacing: 0.3px;
                transition: padding-left 0.25s ease, color 0.25s ease;
            }

            .header__nav-link:hover,
            .header__nav-link:active {
                color: #5b9bff;
                padding-left: 12px;
            }

            .header__nav-item:last-child .header__nav-link {
                border-bottom: none;
            }

            .banner__inner {
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-end;
                gap: 12px;
                padding-bottom: 16px;
            }

            .banner__title {
                flex: 0 0 auto;
                width: 100%;
                padding-bottom: 0;
                font-size: 16px;
                line-height: 1.5;
            }

            .banner__product {
                position: relative;
                right: auto;
                bottom: auto;
                align-self: flex-end;
                width: 70%;
                max-width: 300px;
                margin-top: 0;
                margin-bottom: clamp(-80px, -10vw, -40px);
            }

            .about__header {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .about__title {
                font-size: clamp(40px, 12vw, 60px);
                letter-spacing: 1px;
            }

            .about__text {
                font-size: clamp(14px, 4vw, 18px);
                line-height: 1.6;
                width: clamp(min(320px, 100%), 88%, 1100px);
                /* The margin-left: 0 reset is now in the 1024 media
                   block above so it covers tablet too. */
            }

            .about__inner {
                --showcase-w-pct: 75%;
                --text-w-pct: 88%;
            }

            /* Mobile: tighten the reserved bottom padding for absolute caption
               + button so they stay closer to the image on small screens.
               Only override --media-pb (which drives padding-bottom AND the
               `bottom: var(--media-pb)` on the caption/button) to keep
               everything in sync. */
            .about__media {
                --media-pb: clamp(40px, 5vw, 46px);
            }

            /* Feature: drop absolute corners on mobile — stack the two copy
               blocks vertically over the dark backdrop, full width, so they
               stay readable instead of overlapping the product. */
            .feature {
                aspect-ratio: auto;
                min-height: clamp(520px, 110vw, 760px);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: clamp(40px, 8vw, 70px) 0;
            }

            .feature__inner {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                gap: clamp(24px, 6vw, 40px);
                height: 100%;
            }

            .feature__copy {
                position: static;
                width: 100%;
                max-width: 100%;
                top: auto;
                bottom: auto;
                left: auto;
                right: auto;
                text-align: left;
                /* Frosted-glass card shell — the two paragraphs read as
                   distinct cards rather than one big block. */
                background: rgba(255, 255, 255, 0.06);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border: 1px solid rgba(255, 255, 255, 0.16);
                border-radius: clamp(14px, 3.2vw, 20px);
                padding: clamp(16px, 4.5vw, 24px) clamp(18px, 5vw, 28px);
                box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
            }

            .feature__copy--top {
                /* Primary block: brighter card */
                font-size: clamp(14px, 4vw, 17px);
                line-height: 1.6;
                color: #fff;
                background: rgba(255, 255, 255, 0.10);
            }

            .feature__copy--bottom {
                /* Secondary block: softer, more translucent card.
                   A generous top margin separates the two stacked cards. */
                font-size: clamp(14px, 4vw, 17px);
                line-height: 1.6;
                color: rgba(255, 255, 255, 0.85);
                background: rgba(255, 255, 255, 0.04);
                margin-top: clamp(18px, 5vw, 26px);
            }

            .feature__copy--top {
                order: 1;
            }

            .feature__copy--bottom {
                order: 2;
            }

            /* Vision: tighten the headline, shrink the decorative circle,
               and let the lead paragraph wrap comfortably. */
            .vision {
                padding: clamp(56px, 12vw, 88px) 0 clamp(40px, 8vw, 64px);
            }

            .vision__circle {
                width: 520px;
                height: 520px;
                top: -110px;
                left: -200px;
            }

            .vision__title {
                font-size: clamp(56px, 14vw, 96px);
            }

            .vision__lead {
                font-size: clamp(15px, 4vw, 19px);
            }

            /* Vision bottom title: scale down on tablet so the phrase
               "Minimal Look," stays on a single line — at the original
               clamp(44,10vw,76) the type hit the 76px cap around 768px
               and the row wrapped into 4 lines. Capping at 56px keeps
               the design's 3-line layout (Minimal Look, / Maximum /
               Performance) intact across tablets. */
            .vision__bottom-title {
                font-size: clamp(36px, 7vw, 56px);
            }
        }

        /* ---- Very small screens (≤480px) - vertical stack ---- */
        /* At ≤480px the caption + View More button are too wide to share a
           row, so revert to a single-column grid: image on top, then
           caption, then button — all left-aligned. Tighten spacing and
           font sizes to feel airy on phones. */
        @media (max-width: 480px) {
            .about {
                padding: clamp(80px, 22vw, 130px) 0 clamp(30px, 6vw, 60px);
            }

            .about__inner {
                --showcase-w-pct: 92%;
                --text-w-pct: 95%;
            }

            .about__title {
                font-size: clamp(36px, 14vw, 52px);
            }

            .about__text {
                font-size: 14px;
                line-height: 1.6;
            }

            /* Phone (≤480): keep the caption and the View More button on a
               single row (left + right), like the design intent and like the
               481+ tablet layout — never let them stack to two rows under
               any mobile viewport. The "+" inside .about__caption also
               flips to row so the "+" hugs the left edge while the two-line
               text sits next to it, leaving the right half clear for the
               button. flex-wrap: nowrap guards against accidental wrapping
               at the narrowest widths. */
            .about__media {
                grid-template-columns: 1fr auto;
                grid-template-areas:
                    "image image"
                    "caption button";
                row-gap: clamp(10px, 2.5vw, 16px);
                column-gap: clamp(10px, 3vw, 20px);
                transform: none;
            }

            .about__media > .about__caption {
                grid-area: caption;
                flex-direction: row;
                align-items: baseline;
                column-gap: clamp(6px, 1.6vw, 12px);
                row-gap: 0;
                flex-wrap: nowrap;
                justify-self: flex-start;
                transform: none;
            }

            .about__media > .about__view-more {
                grid-area: button;
                justify-self: flex-end;
                align-self: center;
                transform: none;
            }

            .about__caption-text {
                font-size: 13px;
            }

            /* Vision caption guard at small phone widths. The ≤1024
               media query already gives it row + space-between + nowrap,
               but on ≤360 the in-text word can compress the title cell
               and squeeze the button — re-assert the same contract here
               so nothing can ever wrap on phones, and shrink the arrow
               square so the button itself occupies less horizontal real
               estate in the narrow gutter. */
            .vision__caption {
                /* Re-affirm the two-end row at phone widths: the "+  text"
                   group on the left, the "View More" button on the right.
                   Never wraps to a second line on phones, so the two stay
                   aligned to their respective ends no matter how narrow. */
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                flex-wrap: nowrap;
                gap: clamp(10px, 2.6vw, 16px);
            }

            .vision__caption-group {
                flex-shrink: 0;
                gap: clamp(6px, 1.8vw, 10px);
            }

            .vision__caption .vision__plus { flex-shrink: 0; }

            .vision__caption-text {
                flex: none;
                min-width: 0;
                text-align: left;
            }

            .vision__view-more {
                flex-shrink: 0;
            }

            /* Vision mobile small: stack the two product photos instead of
               keeping them side by side, so each photo stays legible. */
            .vision__products {
                grid-template-columns: 1fr;
                gap: clamp(12px, 4vw, 20px);
            }

            .vision__title {
                font-size: clamp(44px, 14vw, 64px);
            }

            /* Vision bottom mobile: stack the headline and the button
               vertically so the button doesn't crowd the type. The block
               is a flex row on desktop, so switch to a column here. */
            .vision__bottom {
                flex-direction: column;
                align-items: flex-start;
                row-gap: clamp(16px, 4vw, 24px);
            }

            .vision__bottom-title {
                font-size: clamp(32px, 12vw, 48px);
            }

            /* Products title on small screens: shrink the headline so it
               stays inside the central band of the product scene rather
               than overflowing the viewport. The inner just fills the
               section, which is sized via aspect-ratio + min-height. */
            .products-title__heading {
                font-size: clamp(28px, 9vw, 48px);
                letter-spacing: 0.04em;
                /* On short sections the absolute `bottom: 20%` works in
                   pixels (e.g. 480px section → 96px from bottom), keeping
                   the title in the lower band even on phones. */
            }
        }

        /* ============ About 版块 厂房轮播（封面流式：中间在上，左右各一在后） ============ */
        .about__showcase--flow { overflow: visible; }
        /* 让 .about__media（含轮播）叠在下方 .about__gallery 之上，
           否则 gallery 的白底会把轮播卡片向下投的阴影硬切一刀、过渡生硬 */
        .about__media { z-index: 3; }
        /* 轮播容器宽度（比原展示图更窄一些；只动轮播，不影响 caption/按钮/正文位置） */
        .about__showcase.about__showcase--flow { width: clamp(280px, 40%, 660px); }
        .about__showcase--flow .deck { position: absolute; inset: 0; touch-action: pan-y; }  /* 触摸时：横向滑动交给轮播切换，纵向仍可滚页面 */
        .about__showcase--flow .deck__item {
            position: absolute; inset: 0; border-radius: 14px; overflow: hidden;
            background: #f4f5f7; cursor: pointer;
            transition: transform .7s cubic-bezier(.22,.61,.36,1), opacity .7s ease, box-shadow .7s ease;
            will-change: transform;
        }
        .about__showcase--flow .deck__item img {
            position: static; width: 100%; height: 100%; object-fit: cover; display: block;
            -webkit-user-drag: none; user-select: none;   /* 拖拽切换时不要触发图片原生拖拽 */
        }
        .about__showcase--flow .deck__item[data-pos="center"] { transform: translateX(0) scale(.9); z-index: 3; opacity: 1; box-shadow: 0 10px 30px rgba(10,22,40,.10); }
        .about__showcase--flow .deck__item[data-pos="left"]   { transform: translateX(-46%) scale(.74); z-index: 2; opacity: .95; box-shadow: 0 6px 20px rgba(10,22,40,.07); }
        .about__showcase--flow .deck__item[data-pos="right"]  { transform: translateX(46%) scale(.74); z-index: 2; opacity: .95; box-shadow: 0 6px 20px rgba(10,22,40,.07); }

        /* 小屏（≤1024px）：About 变单列、两侧空间不足，隐藏左右两张，退化为单图淡入淡出 */
        @media (max-width: 1024px) {
            .about__showcase.about__showcase--flow { width: 100%; }
            /* 单列时左右两张缩回中间再隐藏：不占额外横向空间，避免向两侧溢出 */
            .about__showcase--flow .deck__item[data-pos="left"],
            .about__showcase--flow .deck__item[data-pos="right"] { transform: translateX(0) scale(.9); opacity: 0; }
        }