/* ── CORPORATE / METRICS ── */
        #corporate {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(120% 78% at 50% -10%, #FFFDFA 0%, var(--cream) 52%, #F2EEE6 100%);
            padding: 80px 20px 100px;
        }
        @media (min-width: 768px) { #corporate { padding: 100px 80px 120px; } }

        /* Giant Japanese watermark — same device as #final-cta's 豊洲 and #quote's 見積 */
        #corporate::before {
            content: '信頼';
            position: absolute; left: -2vw; bottom: -5vw;
            font-family: 'Cormorant Garamond', serif;
            font-size: 33vw; line-height: 0.8;
            color: rgba(8,9,64,0.02);
            pointer-events: none; user-select: none;
            z-index: 0;
        }
        /* Gold hairline along the section's top edge */
        #corporate::after {
            content: '';
            position: absolute; top: 0; left: 8%; right: 8%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(197,160,89,0.75), transparent);
            pointer-events: none;
        }

        #corporate-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }
        #corporate-label { margin-bottom: 20px !important; }
        #corporate-heading {
            font-family: 'Prompt', sans-serif;
            font-size: clamp(28px, 5.5vw, 58px);
            font-weight: 600; line-height: 1.25;
            color: var(--blue-dark);
            margin-bottom: 48px;
        }
        @media (min-width: 768px) { #corporate-heading { margin-bottom: 64px; } }
        .ch-sub {
            font-family: 'Cormorant Garamond', serif;
            font-size: 0.42em; font-style: italic; font-weight: 400;
            letter-spacing: 0.03em; color: var(--gold);
        }
        #corporate-heading .cr:last-child { margin-top: 6px; }

        #metrics-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        @media (min-width: 768px) {
            #metrics-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
        }

        /* ── metric card ── */
        .metric-item {
            position: relative;
            overflow: hidden;
            padding: 26px 18px 30px;
            background: linear-gradient(158deg, #FFFFFF 0%, #FCFAF7 54%, #F5F1EA 100%);
            border: 1px solid rgba(8,9,64,0.07);
            border-radius: 2px;
            box-shadow:
                0 1px 2px rgba(8,9,64,0.03),
                0 18px 38px -30px rgba(8,9,64,0.4);
            transition:
                transform 420ms cubic-bezier(.22,1,.36,1),
                box-shadow 420ms cubic-bezier(.22,1,.36,1),
                border-color 420ms cubic-bezier(.22,1,.36,1);
        }
        @media (min-width: 768px) {
            .metric-item { padding: 40px 32px 46px; }
        }

        /* Faint kanji behind each card, one per metric (set via data-jp in the HTML) */
        .metric-item::before {
            content: attr(data-jp);
            position: absolute; right: -0.06em; bottom: -0.3em;
            font-family: 'Cormorant Garamond', serif;
            font-size: 6.5rem; line-height: 0.76;
            color: rgba(8,9,64,0.05);
            pointer-events: none; user-select: none;
            transition:
                color 420ms cubic-bezier(.22,1,.36,1),
                transform 700ms cubic-bezier(.22,1,.36,1);
        }
        @media (min-width: 768px) {
            .metric-item::before { font-size: 10.5rem; }
        }

        /* Diagonal light sweep on hover — same device as .cat-cta-btn's sheen */
        .metric-item::after {
            content: '';
            position: absolute; top: 0; left: -75%;
            width: 45%; height: 100%;
            background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.85) 50%, transparent 100%);
            transform: skewX(-20deg);
            pointer-events: none; opacity: 0;
            transition: left 900ms ease, opacity 240ms ease;
        }

        /* Gold corner brackets */
        .metric-frame { position: absolute; inset: 0; pointer-events: none; }
        .metric-frame::before, .metric-frame::after {
            content: '';
            position: absolute;
            width: 14px; height: 14px;
            border: 1px solid var(--gold);
            opacity: 0.34;
            transition:
                opacity 420ms cubic-bezier(.22,1,.36,1),
                width 420ms cubic-bezier(.22,1,.36,1),
                height 420ms cubic-bezier(.22,1,.36,1);
        }
        .metric-frame::before {
            top: 8px; left: 8px;
            border-right: 0; border-bottom: 0;
        }
        .metric-frame::after {
            bottom: 8px; right: 8px;
            border-left: 0; border-top: 0;
        }

        @media (hover: hover) {
            .metric-item:hover {
                transform: translateY(-6px);
                border-color: rgba(197,160,89,0.5);
                box-shadow:
                    0 2px 4px rgba(8,9,64,0.04),
                    0 30px 54px -28px rgba(8,9,64,0.5);
            }
            .metric-item:hover::before {
                color: rgba(197,160,89,0.17);
                transform: translateY(-8px) scale(1.05);
            }
            .metric-item:hover::after { left: 130%; opacity: 1; }
            .metric-item:hover .metric-frame::before,
            .metric-item:hover .metric-frame::after {
                opacity: 0.95;
                width: 24px; height: 24px;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .metric-item, .metric-item::before, .metric-item::after,
            .metric-frame::before, .metric-frame::after { transition: none; }
            .metric-item:hover { transform: none; }
            .metric-item:hover::after { opacity: 0; left: -75%; }
        }

        /* ── card contents ── */
        .metric-gold {
            position: relative; z-index: 1;
            display: block; height: 2px; width: 0;
            background: linear-gradient(90deg, var(--gold), rgba(197,160,89,0.25));
            margin-bottom: 24px;
        }
        .metric-value {
            position: relative; z-index: 1;
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(1.35rem, 5.4vw, 2.6rem);
            font-weight: 300; color: var(--blue-dark);
            line-height: 1.05; display: block; margin-bottom: 16px;
            overflow-wrap: break-word; word-break: break-word;
            font-variant-numeric: lining-nums;
        }
        @media (min-width: 768px) {
            .metric-value { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
        }
        /* Collage tier squeezes the centre track — cap the display size so long
           values like "Temperature Controlled" can't break mid-word. */
        @media (min-width: 1200px) and (max-width: 1699px) {
            .metric-value { font-size: 2.3rem; }
        }
        .metric-label {
            position: relative; z-index: 1;
            font-family: 'Prompt', sans-serif;
            font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
            color: rgba(146,110,44,0.95); display: block; margin-bottom: 4px;
        }
        @media (min-width: 768px) { .metric-label { font-size: 13px; } }
        .metric-label-th {
            position: relative; z-index: 1;
            font-family: 'Prompt', sans-serif;
            font-size: 13px; font-weight: 300;
            color: rgba(0,0,0,0.46); display: block; margin-bottom: 14px;
        }
        @media (min-width: 768px) { .metric-label-th { font-size: 14px; } }
        .metric-sub {
            font-family: 'Prompt', sans-serif;
            font-size: 0.85rem; line-height: 1.75;
            color: rgba(0,0,0,0.48); margin: 0; max-width: 280px;
        }
        .metric-sub-th {
            position: relative; z-index: 1;
            font-family: 'Prompt', sans-serif;
            font-size: 0.85rem; line-height: 1.75;
            color: rgba(0,0,0,0.52); margin-top: 4px; max-width: 280px;
        }
        .js .mrev-i {
            opacity: 0;
            clip-path: inset(0 0 100% 0);
            transform: translateY(12px);
        }
        /* Card shell fades in on its own; kept to opacity only (no transform) so
           it never competes with the hover-lift transform above. */
        .js .metric-item.mrev { opacity: 0; }