@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }

    .motion-ready .reveal-on-scroll {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity 700ms ease, transform 700ms ease;
    }

    .motion-ready .reveal-on-scroll.is-visible {
        opacity: 1;
        transform: none;
    }

    .motion-ready .reveal-left {
        opacity: 0;
        transform: translateX(-40px);
        transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .motion-ready .reveal-left.is-visible {
        opacity: 1;
        transform: translateX(0);
    }

    .motion-ready .reveal-right {
        opacity: 0;
        transform: translateX(40px);
        transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .motion-ready .reveal-right.is-visible {
        opacity: 1;
        transform: translateX(0);
    }

    .motion-ready .reveal-scale {
        opacity: 0;
        transform: scale(0.9);
        transition: opacity 700ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .motion-ready .reveal-scale.is-visible {
        opacity: 1;
        transform: scale(1);
    }

    .motion-ready .hover-lift {
        transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 350ms ease, border-color 350ms ease;
    }

    .motion-ready .hover-lift:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 60px rgba(17, 17, 17, 0.12);
    }

    .motion-ready .hover-glow {
        transition: all 350ms ease;
    }

    .motion-ready .hover-glow:hover {
        box-shadow: 0 0 40px rgba(191, 74, 60, 0.15), 0 20px 60px rgba(17, 17, 17, 0.1);
        border-color: #bf4a3c;
    }

    .motion-ready .soft-float {
        animation: softFloat 7s ease-in-out infinite;
    }

    .motion-ready .soft-float-delayed {
        animation: softFloat 7s ease-in-out infinite 1s;
    }

    .motion-ready .media-zoom {
        overflow: hidden;
    }

    .motion-ready .media-zoom img,
    .motion-ready .media-zoom video {
        transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .motion-ready .media-zoom:hover img,
    .motion-ready .media-zoom:hover video {
        transform: scale(1.06);
    }

    .motion-ready .parallax-slow {
        will-change: transform;
    }

    .motion-ready .shimmer-effect {
        position: relative;
        overflow: hidden;
    }

    .motion-ready .shimmer-effect::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        transition: left 0.6s ease;
    }

    .motion-ready .shimmer-effect:hover::after {
        left: 100%;
    }

    .motion-ready .counter-value {
        display: inline-block;
    }

    .motion-ready .geo-badge {
        position: relative;
        overflow: hidden;
    }

    .motion-ready .geo-badge::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 200%;
        height: 100%;
        background: linear-gradient(90deg, transparent 0%, rgba(191, 74, 60, 0.08) 50%, transparent 100%);
        animation: shimmerSlide 3s ease-in-out infinite;
    }

    @keyframes shimmerSlide {
        0% { left: -100%; }
        100% { left: 100%; }
    }

    @keyframes softFloat {
        0%, 100% {
            transform: translateY(0) rotate(0deg);
        }
        50% {
            transform: translateY(-12px) rotate(1deg);
        }
    }

    @keyframes pulse-ring {
        0% { transform: scale(0.8); opacity: 1; }
        100% { transform: scale(2); opacity: 0; }
    }

    .pulse-dot {
        position: relative;
    }

    .pulse-dot::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: currentColor;
        animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
    }

    .geo-connector {
        stroke-dasharray: 8;
        animation: dashFlow 20s linear infinite;
    }

    @keyframes dashFlow {
        to { stroke-dashoffset: -100; }
    }
}

.focus-ring:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 4px;
}

.video-drawer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(12px);
    transition: max-height 600ms ease, opacity 300ms ease, transform 300ms ease;
}

.video-drawer.is-open {
    max-height: 1800px;
    opacity: 1;
    transform: translateY(0);
}

.video-option.is-active {
    border-color: #111111;
    background: #ffffff;
    color: #111111;
}

.model-stage model-viewer {
    --progress-bar-color: #a98c72;
    --progress-bar-height: 2px;
}

/* Conversational B2B project concierge */
.jp-concierge { position:fixed; right:22px; bottom:22px; z-index:80; font-family:Inter,"Helvetica Neue",Arial,sans-serif; }
.jp-concierge__launcher { display:flex; align-items:center; gap:10px; min-height:50px; padding:0 18px; border:1px solid rgba(255,255,255,.15); border-radius:999px; background:#111; color:#fff; box-shadow:0 18px 50px rgba(17,17,17,.25); font-size:12px; font-weight:800; letter-spacing:.04em; cursor:pointer; }
.jp-concierge__pulse { width:8px; height:8px; border-radius:50%; background:#8fd7a2; box-shadow:0 0 0 5px rgba(143,215,162,.14); }
.jp-concierge__panel { position:absolute; right:0; bottom:62px; width:min(390px,calc(100vw - 28px)); max-height:min(650px,calc(100vh - 110px)); display:flex; flex-direction:column; overflow:hidden; border:1px solid #ded8cf; border-radius:20px; background:#fff; box-shadow:0 30px 90px rgba(17,17,17,.22); opacity:0; visibility:hidden; transform:translateY(12px) scale(.98); transform-origin:bottom right; transition:.22s ease; }
.jp-concierge.is-open .jp-concierge__panel { opacity:1; visibility:visible; transform:none; }
.jp-concierge__head { display:flex; align-items:center; justify-content:space-between; padding:18px 18px 15px; border-bottom:1px solid #e7e1d8; background:#f8f5ef; }
.jp-concierge__head strong { display:block; font-size:15px; color:#111; }
.jp-concierge__head span { display:block; margin-top:3px; font-size:11px; color:#777067; }
.jp-concierge__close { width:34px; height:34px; border:1px solid #ddd7ce; border-radius:50%; background:#fff; color:#111; cursor:pointer; }
.jp-concierge__messages { min-height:245px; overflow-y:auto; padding:18px; background:#fff; }
.jp-message { width:fit-content; max-width:88%; margin-bottom:10px; padding:11px 13px; border-radius:14px 14px 14px 4px; background:#f2eee7; color:#332f2a; font-size:13px; font-weight:600; line-height:1.55; }
.jp-message--user { margin-left:auto; border-radius:14px 14px 4px 14px; background:#111; color:#fff; }
.jp-concierge__options { display:grid; gap:8px; padding:0 18px 18px; background:#fff; }
.jp-concierge__option { width:100%; padding:11px 13px; border:1px solid #ddd7ce; border-radius:10px; background:#fff; color:#25221f; text-align:left; font-size:12px; font-weight:750; line-height:1.35; cursor:pointer; transition:.18s ease; }
.jp-concierge__option:hover { border-color:#111; background:#fbfaf7; transform:translateY(-1px); }
.jp-concierge__actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:14px 18px 18px; border-top:1px solid #e7e1d8; background:#fbfaf7; }
.jp-concierge__actions a { display:flex; min-height:42px; align-items:center; justify-content:center; border-radius:999px; background:#111; color:#fff; font-size:11px; font-weight:800; text-decoration:none; }
.jp-concierge__actions a:last-child { border:1px solid #d8d2c8; background:#fff; color:#111; }
.jp-reading-progress { position:fixed; top:0; left:0; z-index:90; width:0; height:3px; background:#111; transition:width 80ms linear; }

@media (max-width:640px) {
    .jp-concierge { right:14px; bottom:14px; }
    .jp-concierge__launcher { width:44px; min-height:44px; justify-content:center; padding:0; }
    .jp-concierge__launcher > span:last-child { display:none; }
    .jp-concierge__panel { right:0; bottom:56px; max-height:calc(100vh - 85px); border-radius:17px; }
}

/* Shared responsive safeguards. Desktop layout remains unchanged. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

@supports (overflow: clip) {
    html,
    body { overflow-x: clip; }
}

img,
video,
canvas,
model-viewer { max-width: 100%; }

h1,
h2,
h3,
p,
a,
span { overflow-wrap: break-word; }

@media (max-width: 767px) {
    body { font-size: 15px; }

    header { padding-top: 12px !important; padding-bottom: 10px !important; }
    header > div:first-of-type { align-items: stretch !important; }
    header .mobile-site-tabs { margin-top: -2px; }
    header .mobile-header-actions img { max-width: 42px; }
    header .mobile-site-tabs nav {
        gap: 8px !important;
        padding-top: 4px !important;
        padding-bottom: 3px !important;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
    }
    header .mobile-site-tabs::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 26px;
        pointer-events: none;
        background: linear-gradient(to right, transparent, rgba(255,255,255,.96));
    }
    header .mobile-site-tabs nav a {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        padding: 8px 13px !important;
        border: 0 !important;
        border-radius: 999px;
        color: #6f6a63;
        font-size: 12px;
        scroll-snap-align: center;
    }
    header .mobile-site-tabs nav a.text-ink {
        background: #111;
        color: #fff !important;
        box-shadow: 0 6px 18px rgba(17,17,17,.12);
    }

    main > section:not(.mobile-stack-hero) {
        scroll-margin-top: 76px;
    }

    .section-title {
        font-size: clamp(1.8rem, 8vw, 2.35rem) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.035em !important;
    }

    .section-label { letter-spacing: .18em !important; }

    .geo-badge {
        max-width: 100%;
        white-space: normal !important;
    }

    .geo-badge > span { flex-wrap: wrap; }

    /* Mobile heroes stay image-led: copy sits in a protected poster-style
       gradient instead of being detached into a second content block. */
    .mobile-stack-hero {
        display: flex !important;
        height: auto !important;
        min-height: clamp(500px, 132vw, 560px) !important;
        align-items: flex-end !important;
        padding-top: 0 !important;
        isolation: isolate;
    }

    .mobile-stack-hero > .absolute.inset-0 {
        position: absolute !important;
        inset: 0 !important;
        height: 100% !important;
        overflow: hidden;
    }

    .mobile-stack-hero > .absolute.inset-0 > img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        object-position: var(--mobile-hero-position, 72% center) !important;
        transform: scale(var(--mobile-hero-scale, 1.08));
        transform-origin: var(--mobile-hero-position, 72% center);
    }

    .mobile-stack-hero > .absolute.inset-0 > .absolute.inset-0 {
        background: transparent !important;
    }

    .mobile-stack-hero::after {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(to top, rgba(18,16,14,.78) 0%, rgba(18,16,14,.48) 34%, rgba(18,16,14,.06) 62%, transparent 76%),
            linear-gradient(to right, rgba(18,16,14,.48) 0%, rgba(18,16,14,.22) 46%, transparent 78%);
    }

    .mobile-stack-hero > .relative.z-10 {
        position: relative;
        z-index: 2;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 180px 18px 24px !important;
        background: transparent !important;
    }

    .mobile-stack-hero > .relative.z-10 > .grid {
        width: 100% !important;
        max-width: none !important;
    }

    .mobile-stack-hero .w-\[85\%\],
    .mobile-stack-hero .w-\[90\%\],
    .mobile-stack-hero .max-w-2xl,
    .mobile-stack-hero .max-w-\[620px\] {
        width: var(--mobile-copy-width, 66%) !important;
        max-width: 22rem !important;
    }

    .mobile-stack-hero .inline-flex {
        max-width: 100%;
        flex-wrap: wrap;
        gap: 5px 8px;
        width: auto !important;
        max-width: min(100%, 18rem);
        margin-bottom: 10px !important;
        padding: 7px 10px !important;
        border-radius: 999px;
        border-color: rgba(255,255,255,.32) !important;
        background: rgba(255,255,255,.88) !important;
    }

    .mobile-stack-hero .inline-flex > .w-px,
    .mobile-stack-hero .inline-flex > span:last-child {
        display: none !important;
    }

    .mobile-stack-hero h1,
    .mobile-stack-hero h2 {
        max-width: 100%;
        margin-top: 8px !important;
        color: #fff !important;
        font-size: clamp(1.75rem, 7.7vw, 2.2rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -.035em !important;
        text-shadow: 0 2px 18px rgba(0,0,0,.28);
        white-space: normal !important;
    }

    .mobile-stack-hero > .relative.z-10 p:not(.text-white),
    .mobile-stack-hero > .relative.z-10 div:not(.inline-flex) {
        color: rgba(255,255,255,.86);
    }

    .mobile-stack-hero > .relative.z-10 .mt-6.space-y-4,
    .mobile-stack-hero > .relative.z-10 p.mt-5,
    .mobile-stack-hero > .relative.z-10 p.mt-6 {
        display: -webkit-box;
        max-width: 100%;
        margin-top: 14px !important;
        overflow: hidden;
        color: rgba(255,255,255,.88) !important;
        font-size: 12px !important;
        line-height: 1.55 !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .mobile-stack-hero > .relative.z-10 .mt-6.space-y-4 > p:not(:first-child),
    .mobile-stack-hero > .relative.z-10 .mt-5.space-y-3,
    .mobile-stack-hero > .relative.z-10 .mt-8.border-t,
    .mobile-stack-hero > .relative.z-10 .mt-10.flex,
    .mobile-stack-hero > .relative.z-10 .mt-8.flex.flex-wrap.items-center.gap-x-8 {
        display: none !important;
    }

    .mobile-stack-hero > .relative.z-10 .mt-8,
    .mobile-stack-hero > .relative.z-10 .mt-6.flex,
    .mobile-stack-hero > .relative.z-10 .mt-8.flex {
        margin-top: 18px !important;
    }

    .mobile-stack-hero > .relative.z-10 a.rounded-full {
        border-color: rgba(255,255,255,.78) !important;
        background: rgba(255,255,255,.94) !important;
        color: #171411 !important;
        box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
    }

    .hero-home { --mobile-hero-position: 58% center; --mobile-hero-scale: 1.08; --mobile-copy-width: 52%; }
    .hero-original-ip { --mobile-hero-position: 72% center; --mobile-hero-scale: 1.22; --mobile-copy-width: 61%; }
    .hero-collections { --mobile-hero-position: 70% center; --mobile-hero-scale: 1.14; --mobile-copy-width: 62%; }
    .hero-product-innovation { --mobile-hero-position: 75% center; --mobile-hero-scale: 1.14; --mobile-copy-width: 61%; }
    .hero-journal { --mobile-hero-position: 76% center; --mobile-hero-scale: 1.13; --mobile-copy-width: 60%; }
    .hero-about { --mobile-hero-position: 24% center; --mobile-hero-scale: 1.05; --mobile-copy-width: 61%; }

    .hero-about > .absolute.inset-0 > img {
        transform: scaleX(-1) scale(var(--mobile-hero-scale, 1.05)) !important;
    }
    .hero-contact { --mobile-hero-position: 80% center; --mobile-hero-scale: 1.02; --mobile-copy-width: 52%; }
    .hero-characters { --mobile-hero-position: 72% center; --mobile-hero-scale: 1.14; --mobile-copy-width: 64%; }

    .hero-home > .relative.z-10 {
        padding-top: 95px !important;
        padding-bottom: 109px !important;
    }

    .hero-original-ip > .relative.z-10,
    .hero-product-innovation > .relative.z-10 {
        padding-top: 105px !important;
        padding-bottom: 99px !important;
    }

    .hero-about > .relative.z-10,
    .hero-characters > .relative.z-10 {
        padding-top: 110px !important;
        padding-bottom: 94px !important;
    }

    .hero-about .about-hero-desktop-copy {
        display: none !important;
    }

    .hero-journal > .relative.z-10 {
        padding-top: 115px !important;
        padding-bottom: 89px !important;
    }

    .hero-product-innovation > .relative.z-10 p.mt-4 {
        display: none !important;
    }

    .hero-collections > .relative.z-10 {
        padding-bottom: 190px !important;
    }

    .hero-collections::after {
        background:
            linear-gradient(to top, rgba(18,16,14,.54) 0%, rgba(18,16,14,.16) 42%, transparent 66%),
            linear-gradient(to right, rgba(18,16,14,.48) 0%, rgba(18,16,14,.18) 48%, transparent 76%);
    }

    .hero-contact > .relative.z-10 {
        padding-top: 90px !important;
        padding-bottom: 90px !important;
    }

    .hero-contact h1 {
        max-width: 17rem !important;
        font-size: clamp(1.85rem, 7.6vw, 2.25rem) !important;
        line-height: 1.02 !important;
    }

    .hero-contact .contact-hero-mobile-copy {
        display: -webkit-box !important;
        max-width: 15rem !important;
        overflow: hidden;
        color: rgba(255,255,255,.9) !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .hero-contact .mt-8 a {
        min-height: 44px;
        align-items: center;
    }

    .hero-contact::after {
        background:
            linear-gradient(to top, rgba(18,16,14,.58), rgba(18,16,14,.08) 58%, transparent 76%),
            linear-gradient(to right, rgba(18,16,14,.64) 0%, rgba(18,16,14,.25) 47%, transparent 72%);
    }

    /* DUKKI's story artwork has characters across the lower half, so its
       mobile copy uses the quieter upper-left area instead of the generic
       bottom caption position. */
    .dukki-mobile-hero {
        min-height: 540px !important;
    }

    .dukki-mobile-hero > .absolute.inset-0 > img {
        object-position: 64% center !important;
        transform: scale(1.1);
        transform-origin: 64% center;
    }

    .dukki-mobile-hero > .absolute.inset-0 > .absolute.inset-y-0 {
        width: 72% !important;
        background: linear-gradient(to right, rgba(247,242,234,.96) 0%, rgba(247,242,234,.72) 58%, transparent 100%) !important;
    }

    .dukki-mobile-hero > .relative.z-10 {
        min-height: 540px !important;
        align-items: flex-start !important;
        padding: 54px 18px 24px !important;
    }

    .dukki-mobile-hero > .relative.z-10 > div {
        width: min(62%, 250px) !important;
    }

    .dukki-mobile-hero h1 {
        margin-top: 22px !important;
        font-size: clamp(2rem, 9vw, 2.65rem) !important;
        line-height: .92 !important;
        letter-spacing: -.045em !important;
    }

    .dukki-mobile-hero h1 + p {
        margin-top: 12px !important;
        font-size: clamp(1.05rem, 5vw, 1.35rem) !important;
        line-height: 1.08 !important;
    }

    .dukki-mobile-hero .mt-8.max-w-md {
        display: none !important;
    }

    .dukki-mobile-hero .mt-9 {
        margin-top: 20px !important;
        gap: 8px !important;
    }

    .dukki-mobile-hero .mt-9 a {
        padding: 11px 14px !important;
        font-size: 10px !important;
        white-space: nowrap;
    }

    .dukki-mobile-hero .mt-9 a:nth-child(n+2) {
        display: none !important;
    }

    .tato-friends-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        padding: 16px !important;
    }

    .tato-friends-grid > article {
        display: flex !important;
        min-width: 0;
        flex-direction: column;
        padding: 16px 12px;
        border: 1px solid #ebe5dc;
        border-radius: 14px;
        background: #fbfaf7;
    }

    .tato-friends-grid > article h3 {
        font-size: 22px !important;
    }

    .tato-friends-grid > article h3 + p {
        margin-top: 5px !important;
        font-size: 15px !important;
    }

    .tato-friends-grid > article > p.mt-6 {
        display: -webkit-box;
        min-height: 0 !important;
        margin-top: 14px !important;
        overflow: hidden;
        font-size: 12px !important;
        line-height: 1.45 !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
    }

    .tato-friends-grid > article > img {
        height: 125px !important;
        margin-top: 14px !important;
        object-position: center !important;
    }

    .tato-friends-grid > article > p.mt-7 {
        display: -webkit-box;
        margin-top: 14px !important;
        overflow: hidden;
        font-size: 12px !important;
        line-height: 1.45 !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .mobile-stack-hero > .relative.z-10 a.rounded-full ~ a.rounded-full {
        display: none !important;
    }

    .mobile-stack-hero > .relative.z-10 .mt-8.flex > a:nth-child(n+2) {
        display: none !important;
    }

    .mobile-stack-hero a.rounded-full,
    main a.rounded-full,
    main button.rounded-full {
        min-height: 44px;
    }

    #filter-bar {
        top: 76px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    #filter-bar .filter-btn,
    #filter-bar .sort-select {
        min-height: 42px;
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }

    #products-grid { gap: 16px !important; }

    .product-card:hover {
        transform: none !important;
        box-shadow: 0 8px 28px rgba(17,17,17,.08) !important;
    }

    .product-card:hover img,
    .product-card:focus-within img,
    .product-card.is-open img { transform: none !important; }

    .product-card.is-open { z-index: 30; }

    /* Touch devices keep the compact, offset detail card shown in the approved
       reference. It floats across the grid without changing row height. */
    .product-card .product-card-overlay,
    .product-card:hover .product-card-overlay,
    .product-card:focus-within .product-card-overlay {
        position: absolute !important;
        top: var(--mobile-panel-top, 42%) !important;
        right: auto !important;
        bottom: auto !important;
        left: var(--mobile-panel-left, 56px) !important;
        display: flex;
        width: min(240px, calc(100vw - 24px)) !important;
        margin: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(8px) scale(.98) !important;
        pointer-events: none;
    }

    .product-card.is-open .product-card-overlay,
    .product-card.is-open:hover .product-card-overlay,
    .product-card.is-open:focus-within .product-card-overlay {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto;
    }

    .product-card .product-inquiry-link {
        min-height: 44px;
        font-size: 11px !important;
    }

    .model-card > .relative { min-height: 280px !important; }

    .for-brands-hero > .grid {
        min-height: 0 !important;
    }

    .for-brands-hero > .grid > div:first-child {
        padding: 42px 16px 36px !important;
    }

    .for-brands-hero .inline-flex {
        max-width: 100%;
        flex-wrap: wrap;
        gap: 6px 10px;
        border-radius: 14px;
    }

    .for-brands-hero .inline-flex > .w-px,
    .for-brands-hero .inline-flex > span:last-child {
        display: none !important;
    }

    .for-brands-hero h1 + p {
        display: -webkit-box;
        margin-top: 20px !important;
        overflow: hidden;
        font-size: 16px !important;
        line-height: 1.55 !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
    }

    .for-brands-hero h1 + p + div {
        margin-top: 24px !important;
    }

    .for-brands-hero h1 + p + div + div {
        margin-top: 24px !important;
    }

    .for-brands-hero h1 + p + div + div > div:nth-child(n+3) {
        display: none !important;
    }

    .for-brands-hero .model-stage,
    .model-stage {
        min-height: 390px !important;
    }

    .model-stage model-viewer {
        min-height: 330px !important;
    }

    .model-stage > .absolute.bottom-5 {
        right: 14px !important;
        bottom: 14px !important;
        left: 14px !important;
        max-width: none !important;
        padding: 14px !important;
    }

    #malaysia-operations {
        padding: 48px 16px !important;
    }

    #malaysia-operations figure img {
        height: min(72vw, 320px) !important;
    }

    #creative-advantage {
        padding: 48px 16px !important;
    }

    #creative-advantage article,
    #creative-advantage .geo-advantage-card {
        padding: 22px !important;
    }

    .mobile-comparison {
        padding: 48px 16px !important;
    }

    .mobile-comparison .relative.grid > div:not(.hidden) {
        min-width: 0;
    }

    .mobile-comparison .reveal-left-init > .flex {
        flex-direction: column;
        align-items: stretch;
    }

    .mobile-comparison .reveal-left-init > .flex > ul,
    .mobile-comparison .reveal-left-init > .flex > div {
        width: 100%;
        flex-shrink: 1;
    }

    .mobile-comparison .reveal-left-init > .flex > div.flex {
        align-self: center;
        width: 40px;
        transform: rotate(90deg);
    }

    .mobile-comparison .rounded-2xl {
        padding: 22px !important;
    }

    #project-form { padding: 48px 16px !important; }
    #project-form form { padding: 20px !important; }

    #selected-product-summary > .flex {
        flex-wrap: wrap;
    }

    #project-form input,
    #project-form select,
    #project-form textarea {
        min-width: 0;
        font-size: 16px !important;
    }

    footer p.flex,
    footer div.flex.items-start { min-width: 0; }
    footer a,
    footer span { word-break: break-word; }

    .jp-concierge {
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
    }

    .jp-concierge__launcher {
        min-height: 44px;
        padding: 0 14px;
        font-size: 11px;
    }

    .jp-concierge__panel {
        position: fixed;
        right: 10px;
        bottom: max(66px, calc(env(safe-area-inset-bottom) + 58px));
        left: 10px;
        width: auto;
        max-height: min(78vh, 620px);
        border-radius: 18px;
    }

    /* Horizontal entrance motion looks like layout drift on narrow screens.
       Keep the reveal, but make it a short vertical lift instead. */
    .motion-ready .reveal-left,
    .motion-ready .reveal-right {
        transform: translateY(16px);
    }

    .motion-ready .reveal-left.is-visible,
    .motion-ready .reveal-right.is-visible {
        transform: none;
    }
}

@media (hover: none), (pointer: coarse) {
    .motion-ready .hover-lift:hover,
    .motion-ready .hover-glow:hover,
    .motion-ready .media-zoom:hover img,
    .motion-ready .media-zoom:hover video {
        transform: none !important;
    }
}

@media (max-width: 374px) {
    .product-card .product-card-overlay {
        width: min(228px, calc(100vw - 24px)) !important;
    }

    .mobile-stack-hero {
        min-height: 520px !important;
    }

    .mobile-stack-hero > .relative.z-10 {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }
}

/* Journal covers keep the article category, title, excerpt, and two useful facts.
   The repeated "Journal Feature" label and generic editorial badge add no reader value. */
.article-hero-feature .section-label + p {
    display: none;
}

.article-hero-feature .section-label + p + h1 {
    margin-top: 1rem;
}

.article-hero-feature .lg\:justify-end span:last-child,
.article-hero-immersive .lg\:justify-end span:last-child {
    display: none;
}

/* B2B conversion and responsive safeguards */
a[href*="contact.html"],
button,
input,
select,
textarea {
    touch-action: manipulation;
}

main,
main section,
main article {
    min-width: 0;
}

@media (max-width: 767px) {
    header .mobile-header-actions a {
        min-height: 44px;
        padding-inline: 14px;
    }

    #selected-work {
        padding: 44px 16px !important;
    }

    #selected-work article {
        grid-template-columns: 28px 76px minmax(0, 1fr) !important;
        gap: 14px !important;
        padding: 22px 0 !important;
    }

    #selected-work article > p:not(:first-of-type),
    #selected-work article > a {
        grid-column: 3;
    }

    #selected-work article figure {
        width: 76px !important;
        height: 76px !important;
    }

    #project-form .grid.sm\:grid-cols-2 {
        gap: 18px !important;
    }

    #project-form textarea {
        min-height: 140px !important;
    }

    #project-form button[type="submit"] {
        min-height: 52px;
    }
}

@media (max-width: 430px) {
    #selected-work article {
        grid-template-columns: 24px 64px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    #selected-work article figure {
        width: 64px !important;
        height: 64px !important;
    }

    #selected-work article h3 {
        font-size: 1.2rem !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 479px) {
    header .mobile-site-tabs {
        display: none !important;
    }

    header #mobile-menu-toggle {
        display: inline-flex !important;
        flex: 0 0 auto;
    }

    header .mobile-header-actions img {
        display: none !important;
    }

    header .mobile-header-actions {
        gap: 7px !important;
    }

    header .mobile-header-actions a {
        min-height: 36px;
        padding-inline: 9px !important;
        font-size: 8px !important;
    }

    header > div:first-of-type > div:first-child {
        gap: 0 !important;
    }

    header > div:first-of-type > div > div:first-child > a:first-child {
        font-size: 25px !important;
    }
}