@media screen and (max-width: 1200px){

}
@media screen and (max-width: 992px){
	
}
@media screen and (max-width: 768px){
.wap_nav {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	z-index: 7777;
}
.wap_nav .logo {
    float: left;
    position: absolute;
    left: 0px;
    top: 0px;
}
.wap_nav .logo img{height: 24px;margin-top: 13px;margin-left: 10px;}
body{
	padding-top: 50px;
}

.pc{
    display: none;
}
.wap{
    display: block;
}


    .hero-container{
		display: block;
		height: 27vh;
	}
    /* Safe Content Container for Mobile */
    .container {
        width: 100%;
        padding: 0px 15px;
    }

    /* Header Mobile Styles */
    .header {
        height: calc(90 / 768 * 100vw);
        border-bottom: calc(1 / 768 * 100vw) solid rgba(255, 255, 255, 0.08);
    }

    .header-container {
        width: calc(690 / 768 * 100vw);
    }

    .header-left {
        gap: calc(15 / 768 * 100vw);
    }

    .nav-link-sub {
        display: none; /* Hide auxiliary desktop text link on mobile */
    }

    .burger-text {
        font-size: calc(15 / 768 * 100vw);
        letter-spacing: calc(0.3 / 768 * 100vw);
    }

    .burger-icon {
        width: calc(24 / 768 * 100vw);
        height: calc(15 / 768 * 100vw);
    }

    .burger-icon::before,
    .burger-icon::after {
        height: calc(2 / 768 * 100vw);
    }

    /* Centered Logo mobile adjustment */
    .logo img {
        height: calc(26 / 768 * 100vw);
    }

    /* Right Nav transformed to slide out menu */
    .nav-menu {
        position: fixed;
        top: calc(90 / 768 * 100vw);
        right: -100%;
        width: calc(480 / 768 * 100vw);
        height: calc(100vh - (90 / 768 * 100vw));
        background-color: rgba(0, 0, 0, 0.95);
        flex-direction: column;
        align-items: flex-start;
        padding: calc(60 / 768 * 100vw) calc(40 / 768 * 100vw);
        gap: calc(40 / 768 * 100vw);
        transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        border-left: calc(1 / 768 * 100vw) solid rgba(255, 255, 255, 0.05);
    }

    .nav-menu.open {
        right: 0;
    }

    .nav-item {
        font-size: calc(22 / 768 * 100vw);
        width: 100%;
    }

    .search-btn {
        margin-top: calc(20 / 768 * 100vw);
    }

    .search-icon {
        width: calc(24 / 768 * 100vw);
        height: calc(24 / 768 * 100vw);
    }

    /* Hero Section Mobile */
    .hero-section {
        min-height: auto;
        background-position: 65% center; /* Adjust alignment to preserve subject position */
    }

    .hero-text-block {
        margin-top: calc(120 / 768 * 100vw);
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .hero-subtitle {
        font-size: calc(28 / 768 * 100vw);
        letter-spacing: calc(2 / 768 * 100vw);
        margin-bottom: calc(10 / 768 * 100vw);
    }

    .hero-title {
        font-size: calc(38 / 768 * 100vw);
        letter-spacing: calc(1 / 768 * 100vw);
        margin-bottom: calc(150 / 768 * 100vw); /* Shift button down in mobile orientation */
    }

    /* Mobile CTA Pill adaptation */
    .cta-button {
        border-radius: calc(30 / 768 * 100vw);
        padding: calc(12/ 768 * 100vw) calc(34/ 768 * 100vw) calc(12/ 768 * 100vw) calc(20 / 768 * 100vw);
    }

    .cta-text {
        font-size: calc(16 / 768 * 100vw);
        margin-right: calc(18 / 768 * 100vw);
    }

    .cta-arrow-wrap {
        width: calc(44 / 768 * 100vw);
        height: calc(44 / 768 * 100vw);
    }

    .arrow-icon {
        width: calc(25/ 768 * 100vw);
        height: calc(25/ 768 * 100vw);
    }

    /* Mobile Play Button Scale */
    .play-button {
        width: calc(110 / 768 * 100vw);
        height: calc(110 / 768 * 100vw);
    }

    .play-icon-inner {
        border-top: calc(10 / 768 * 100vw) solid transparent;
        border-bottom: calc(10 / 768 * 100vw) solid transparent;
        border-left: calc(16 / 768 * 100vw) solid #ffffff;
        margin-left: calc(4 / 768 * 100vw);
    }

    /* Mobile Carousel Indicators */
    .carousel-indicators {
        bottom: calc(60 / 768 * 100vw);
        gap: calc(8 / 768 * 100vw);
    }

    .indicator-dash {
        width: calc(40 / 768 * 100vw);
        height: calc(4 / 768 * 100vw);
        border-radius: calc(2 / 768 * 100vw);
    }

    /* Products Section Mobile */
    .products-section {
        padding-top: calc(70 / 768 * 100vw);
        padding-bottom: calc(80 / 768 * 100vw);
    }

    .section-title-dark {
        font-size: calc(34 / 768 * 100vw);
        margin-bottom: calc(30 / 768 * 100vw);
        text-align: center;
    }

    .products-grid {
        grid-template-columns: 1fr; /* Force 1 column on mobile */
        gap: calc(24 / 768 * 100vw);
        padding: 0;
    }

    .product-card {
        aspect-ratio: 4 / 3; /* Slightly deeper card height for mobile viewports */
        border-radius: calc(6 / 768 * 100vw);
    }

    .product-overlay {
        padding: calc(24 / 768 * 100vw);
    }

    .product-title {
        font-size: calc(32/ 768 * 100vw);
    }

    /* Small pill button mobile adaptation */
    .cta-button-small {
        border-radius: calc(20 / 768 * 100vw);
        padding: calc(12 / 768 * 100vw) calc(34/ 768 * 100vw) calc(12/ 768 * 100vw) calc(20 / 768 * 100vw);
    }

    .cta-text-small {
        font-size: calc(13 / 768 * 100vw);
        margin-right: calc(10 / 768 * 100vw);
    }

    .cta-arrow-wrap-small {
        width: calc(32 / 768 * 100vw);
        height: calc(32 / 768 * 100vw);
    }

    .arrow-icon-small {
        width: calc(14 / 768 * 100vw);
        height: calc(14 / 768 * 100vw);
    }

    .brand-pattern-bg {
        display: none; /* Hide decorative background icon on mobile */
    }

    /* Aesthetic Banner Mobile */
    .aesthetic-section {
        height: calc(700 / 768 * 100vw);
        background-position: 70% center;
    }

    .aesthetic-text-block {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .aesthetic-subtitle {
        font-size: calc(22 / 768 * 100vw);
        letter-spacing: calc(1.5 / 768 * 100vw);
        margin-bottom: calc(10 / 768 * 100vw);
    }

    .aesthetic-title {
        font-size: calc(32 / 768 * 100vw);
        letter-spacing: calc(1 / 768 * 100vw);
        margin-bottom: calc(200 / 768 * 100vw); /* Pushes pill button down nicely */
        line-height: 1.3;
    }
    /* Brand Intro Section Mobile */
    .brand-intro-section {
        padding-top: calc(60 / 768 * 100vw);
        padding-bottom: calc(50 / 768 * 100vw);
    }

    .brand-intro-header {
        max-width: 100%;
        margin-bottom: calc(30 / 768 * 100vw);
        text-align: left;
    }

    .brand-intro-title {
        font-size: calc(32 / 768 * 100vw);
        margin-bottom: calc(12 / 768 * 100vw);
    }

    .brand-intro-desc {
        font-size: calc(22/ 768 * 100vw);
        line-height: 1.5;
    }

    .brand-illustration-wrap {
        margin-top: calc(20 / 768 * 100vw); /* Reset negative margins for standard mobile stacking */
    }
    /* Recommended Section Mobile */
    .recommended-section {
        padding-top: calc(70 / 768 * 100vw);
        padding-bottom: calc(70 / 768 * 100vw);
    }

    .rec-header {
        margin-bottom: calc(32 / 768 * 100vw);
        text-align: center;
    }

    .rec-title {
        font-size: calc(32 / 768 * 100vw);
        margin-bottom: calc(8 / 768 * 100vw);
    }

    .rec-subtitle {
        font-size: calc(22/ 768 * 100vw);
    }

    /* Transition layout grid from 4 columns to 2 columns */
    .rec-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(16 / 768 * 100vw);
    }

    .rec-card {
        padding: calc(18 / 768 * 100vw) calc(14 / 768 * 100vw) calc(22 / 768 * 100vw) calc(14 / 768 * 100vw);
        border-radius: calc(6 / 768 * 100vw);
    }

    .rec-img-wrap {
        height: calc(180 / 768 * 100vw);
        margin-bottom: calc(16 / 768 * 100vw);
    }

    .rec-details {
        padding-top: calc(10 / 768 * 100vw);
        border-top: calc(1 / 768 * 100vw) solid #f0f0f0;
    }

    .rec-product-code {
        font-size: calc(25/ 768 * 100vw);
        margin-bottom: calc(6 / 768 * 100vw);
    }

    .rec-product-desc {
        font-size: calc(22/ 768 * 100vw);
        padding-right: calc(34 / 768 * 100vw);
    }

    .rec-arrow-link {
        width: calc(30 / 768 * 100vw);
        height: calc(30 / 768 * 100vw);
    }

    .diagonal-arrow {
        width: calc(14 / 768 * 100vw);
        height: calc(14 / 768 * 100vw);
    }

    /* About Brand Section Mobile */
    .about-brand-section {
        height: calc(800 / 768 * 100vw);
        background-position: 75% center; /* Adjust camera focus alignment on mobile */
    }

    .about-brand-text-block {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .about-brand-subtitle {
        font-size: calc(24 / 768 * 100vw);
        letter-spacing: calc(2 / 768 * 100vw);
        margin-bottom: calc(8 / 768 * 100vw);
    }

    .about-brand-title {
        font-size: calc(34 / 768 * 100vw);
        letter-spacing: calc(0.5 / 768 * 100vw);
        margin-bottom: calc(36 / 768 * 100vw);
    }

    .about-brand-desc {
        font-size: calc(22/ 768 * 100vw);
        line-height: 1.6;
        margin-bottom: calc(160 / 768 * 100vw); /* Keeps button perfectly overlaying the bathtub edge */
        max-width: 100%;
    }

    .about-brand-desc p {
        margin-bottom: calc(6 / 768 * 100vw);
    }
      .main-footer {
        padding-top: calc(60 / 768 * 100vw);
        padding-bottom: calc(30 / 768 * 100vw);
    }

    /* Transform columns to adaptive grid layout on mobile viewports */
    .footer-upper {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for navigation categories */
        gap: calc(36 / 768 * 100vw) calc(20 / 768 * 100vw);
        padding-bottom: calc(40 / 768 * 100vw);
    }

    /* Keep branding spanning across the top full-width */
    .footer-brand-col {
        grid-column: span 2;
        align-items: center;
        margin-bottom: calc(20 / 768 * 100vw);
    }

    .footer-logo img {
        height: calc(32 / 768 * 100vw);
    }

    .footer-socials {
        gap: calc(16 / 768 * 100vw);
        margin-top: calc(24 / 768 * 100vw);
    }

    .social-icon-btn {
        width: calc(44 / 768 * 100vw);
        height: calc(44 / 768 * 100vw);
        border: calc(1 / 768 * 100vw) solid rgba(255, 255, 255, 0.25);
    }

    .social-svg {
        width: calc(20 / 768 * 100vw);
        height: calc(20 / 768 * 100vw);
    }

    /* Responsive Link column styles on mobile */
    .footer-col-title {
        font-size: calc(22/ 768 * 100vw);
        margin-bottom: calc(20 / 768 * 100vw);
    }

    .footer-list {
        gap: calc(14 / 768 * 100vw);
    }

    .footer-list a {
        font-size: calc(14 / 768 * 100vw);
    }
.footer-upper:after{
	display:none;
}
    /* Align footer copyright vertical-oriented */
    .footer-bottom-row {
        border-top: calc(1 / 768 * 100vw) solid rgba(255, 255, 255, 0.08);
        padding-top: calc(24 / 768 * 100vw);
        flex-direction: column;
        gap: calc(12 / 768 * 100vw);
        text-align: center;
    }

    .footer-copyright,
    .footer-policy-link {
        font-size: calc(14/ 768 * 100vw);
    }

    .news-section {
        padding-top: calc(70 / 768 * 100vw);
        padding-bottom: calc(70 / 768 * 100vw);
    }

    .news-main-title {
        font-size: calc(34 / 768 * 100vw);
        margin-bottom: calc(32 / 768 * 100vw);
        text-align: center;
    }

    /* Collapse to 1 column */
    .news-grid {
        grid-template-columns: 1fr;
        gap: calc(40 / 768 * 100vw);
    }

    .news-img-wrap {
        height: calc(340 / 768 * 100vw);
    }

    .news-card-content {
        padding-top: calc(16 / 768 * 100vw);
    }

    .news-card-title {
        font-size: calc(25/ 768 * 100vw);
        margin-bottom: calc(8 / 768 * 100vw);
    }

    .news-date {
        font-size: calc(20/ 768 * 100vw);
        margin-bottom: calc(12 / 768 * 100vw);
    }

    .news-snippet {
        font-size: calc(22/ 768 * 100vw);
    }

    /* Mobile Sidebar spacing */
    .news-sidebar {
        margin-top: calc(20 / 768 * 100vw);
    }

    .sidebar-header {
        height: calc(52 / 768 * 100vw);
        font-size: calc(22/ 768 * 100vw);
        padding-left: calc(20 / 768 * 100vw);
    }

    .sidebar-item {
        padding-top: calc(24 / 768 * 100vw);
        padding-bottom: calc(24 / 768 * 100vw);
        border-bottom: calc(1 / 768 * 100vw) solid #dddddd;
    }

    .sidebar-item-title {
        font-size: calc(24/ 768 * 100vw);
        margin-bottom: calc(8 / 768 * 100vw);
    }

    .sidebar-item-date {
        font-size: calc(19/ 768 * 100vw);
    }

    /* Bottom Button Scaling */
    .news-action-wrap {
        margin-top: calc(44 / 768 * 100vw);
    }

    .cta-button-light {
        border-radius: calc(30 / 768 * 100vw);
        padding: calc(12 / 768 * 100vw) calc(34 / 768 * 100vw) calc(12 / 768 * 100vw) calc(20 / 768 * 100vw);
    }

    .cta-text-dark {
        font-size: calc(15 / 768 * 100vw);
        margin-right: calc(18 / 768 * 100vw);
    }
    .mega-menu-panel {
        top: calc(90 / 768 * 100vw);
        padding-top: calc(30 / 768 * 100vw);
        padding-bottom: calc(30 / 768 * 100vw);
        box-shadow: 0 calc(10 / 768 * 100vw) calc(30 / 768 * 100vw) rgba(0, 0, 0, 0.15);
        height: calc(100vh - (90 / 768 * 100vw));
        overflow-y: auto; /* Allow scrolling on small screen drawer menu */
    }

    .mega-menu-container {
        flex-direction: column;
        gap: calc(40 / 768 * 100vw);
        padding-bottom: calc(100 / 768 * 100vw);
        display: flex;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        position: relative;
        padding-bottom: calc(60 / 1920 * 100vw);
        max-height: 60vh;
        overflow: auto;
        display: block;
    }
.mega-menu-container .bd{
	width:100%;
}
    /* Left Part Mobile */
    .mega-menu-left {
        width: 100%;
    }

    .mega-tabs-nav {
        gap: calc(10 / 768 * 100vw);
        margin-bottom: calc(30 / 768 * 100vw);
    }

    .mega-tab {
        font-size: calc(22 / 768 * 100vw);
        padding: calc(8 / 768 * 100vw) calc(20 / 768 * 100vw);
        border-radius: calc(15 / 768 * 100vw);
        padding: 2vw 5vw;
        width: auto;
        line-height: 1;
        height: auto;
    }

    /* Grid turns to single column on mobile */
    .mega-category-grid {
        grid-template-columns: 1fr;
        row-gap: calc(24 / 768 * 100vw);
    }

    .category-item {
        gap: calc(16 / 768 * 100vw);
    }

    .category-icon-wrap {
        width: calc(52 / 768 * 100vw);
        height: calc(52 / 768 * 100vw);
    }

    .category-name {
        font-size: calc(14 / 768 * 100vw);
    }

    /* Right Part Mobile */
    .mega-menu-right {
        width: 100%;
        margin-top: 4vw;
    }

    .promo-img-wrap {
        height: calc(160 / 768 * 100vw);
    }

    .promo-overlay-text {
        left: calc(16 / 768 * 100vw);
        bottom: calc(12 / 768 * 100vw);
        font-size: calc(22/ 768 * 100vw);
    }

    .promo-bottom-bar {
        padding: calc(12 / 768 * 100vw) calc(16 / 768 * 100vw);
        font-size: calc(22/ 768 * 100vw);
    }

    .catalog-brochure-btn {
        margin-top: calc(16 / 768 * 100vw);
        height: calc(48 / 768 * 100vw);
        padding: 0 calc(16 / 768 * 100vw);
    }

    .catalog-btn-text {
        font-size: calc(22 / 768 * 100vw);
    }

    .catalog-arrow {
        width: calc(16 / 768 * 100vw);
        height: calc(16 / 768 * 100vw);
    }

    /* Close Button Mobile */
    .close-menu-action {
        gap: calc(8 / 768 * 100vw);
        font-size: calc(14 / 768 * 100vw);
    }

    .close-icon-cross {
        font-size: calc(13 / 768 * 100vw);
    }

    .series-spotlight-section {
        padding-top: calc(30 / 768 * 100vw);
        padding-bottom: calc(30 / 768 * 100vw);
    }

    /* Stack cards to 1 column */
    .series-grid {
        /* grid-template-columns: 1fr; */
        /* gap: calc(20 / 768 * 100vw); */
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: calc(24 / 1920 * 100vw);
    }

    .series-card {
        border-radius: calc(10 / 768 * 100vw);
        aspect-ratio: 4 / 2.7;
        width: 100%;
        height: 23vw;
    }

    .series-info-bar {
        height: calc(70 / 768 * 100vw);
        padding-left: calc(20 / 768 * 100vw);
        padding-right: calc(20 / 768 * 100vw);
    }

    .series-name {
        font-size: calc(18 / 768 * 100vw);
    }

    .series-arrow-icon {
        width: calc(18 / 768 * 100vw);
        height: calc(18 / 768 * 100vw);
    }

      .pagination-action-group {
        flex-direction: column; /* Stack pagination on top of button in narrow views */
        gap: calc(24 / 768 * 100vw);
        margin-top: calc(50 / 768 * 100vw);
    }

    .pagination-nav {
        gap: calc(10 / 768 * 100vw);
    }

    .page-num {
        width: calc(56 / 768 * 100vw);
        height: calc(34 / 768 * 100vw);
        border-radius: calc(17 / 768 * 100vw);
        font-size: calc(14 / 768 * 100vw);
    }

    /* Override mobile button border width */
    .pagination-cta .cta-button-light {
        border-width: calc(1 / 768 * 100vw);
    }
    .pagination-cta{
    	margin-left: 0;
    }
    
    /* Maya Hero Banner Mobile */
    .maya-hero-section {
        height: calc(560 / 768 * 100vw);
        background-position: 70% center;
    }

    .maya-hero-container {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        padding-bottom: calc(60 / 768 * 100vw);
        width: calc(690 / 768 * 100vw);
    }

    .maya-hero-left {
        margin-bottom: calc(20 / 768 * 100vw);
    }

    .maya-model {
        font-size: calc(36 / 768 * 100vw);
    }

    .maya-title-main {
        font-size: calc(36 / 768 * 100vw);
        margin-top: calc(2 / 768 * 100vw);
    }

    .maya-hero-right {
        width: 100%;
    }

    .maya-desc-para {
        font-size: calc(14 / 768 * 100vw);
        line-height: 1.6;
    }

    /* Gallery Section Mobile */
    .gallery-section {
        padding-top: calc(60 / 768 * 100vw);
        padding-bottom: calc(60 / 768 * 100vw);
    }

    .gallery-header {
        margin-bottom: calc(36 / 768 * 100vw);
    }
.prolist .title{
	font-size:4vw;
}
    .gallery-title {
        font-size: calc(34/ 768 * 100vw);
        margin-bottom: calc(16 / 768 * 100vw);
    }

    .gallery-subtitle {
        font-size: calc(22/ 768 * 100vw);
        max-width: 100%;
        line-height: 1.5;
    }

    /* Mobile Slider layout - hide chevrons in favor of fullwidth cards stacking */
    .gallery-arrow {
        display: none; /* Hide traditional arrows on mobile touch devices */
    }

    .gallery-cards-grid {
        width: 100%;
        grid-template-columns: 1fr; /* 1 column layout on mobile devices */
        gap: calc(20 / 768 * 100vw);
    }

    .gallery-card {
        border-radius: calc(10 / 768 * 100vw);
        aspect-ratio: 4 / 3; /* Deeper horizontal landscape shape on mobile standard grids */
    }

    /* Configurator Mobile */
    .configurator-section {
        padding-top: calc(60 / 768 * 100vw);
        padding-bottom: calc(60 / 768 * 100vw);
    }

    .configurator-container {
        flex-direction: column; /* Stack configurator components vertically */
        gap: calc(30 / 768 * 100vw);
        width: calc(690 / 768 * 100vw);
        width: 100%;
    }

    /* Thumbs column transforms to horizontal row on mobile */
    .config-thumbs-col {
        flex-direction: row;
        width: 100%;
        justify-content: center;
        gap: calc(10 / 768 * 100vw);
    }

    .thumb-scroll-btn {
        display: none; /* Hide PC vertical scroll buttons on touch screen */
    }

    .thumbs-list-wrap {
        flex-direction: row; /* Horizontal thumbnail strip */
        gap: calc(10 / 768 * 100vw);
    }

    .thumb-item {
        width: calc(64 / 768 * 100vw);
        height: calc(64 / 768 * 100vw);
        border-radius: calc(6 / 768 * 100vw);
    }

    /* Main Photo mobile */
    .config-main-col {
        width: 100%;
        max-width: 54%;
        margin: auto;
    }

    .main-display-frame {
        border-radius: calc(6 / 768 * 100vw);
        height: 45vw;
    }

    /* Specs Text column mobile */
    .config-specs-col {
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        text-align: left;
    }

    .product-code-highlight {
        font-size: calc(28 / 768 * 100vw);
        margin-bottom: calc(16 / 768 * 100vw);
    }

    .specs-title {
        font-size: calc(18 / 768 * 100vw);
        margin-bottom: calc(10 / 768 * 100vw);
    }

    .specs-desc {
        font-size: calc(14 / 768 * 100vw);
        margin-bottom: calc(30 / 768 * 100vw);
    }

    /* Banner Mobile adaptation */
    .relaxation-zone-banner {
        height: calc(650 / 768 * 100vw);
        background-position: 65% center;
        padding-top: 8vw;
    }

    .relaxation-title-main {
        font-size: calc(30 / 768 * 100vw);
        margin-bottom: calc(12 / 768 * 100vw);
        line-height: 1.3;
    }

    .relaxation-title-sub {
        font-size: calc(26 / 768 * 100vw);
        line-height: 1.3;
    }

    /* Specs Tab mobile */
    .specs-tab-section {
        padding-top: calc(50 / 768 * 100vw);
        padding-bottom: calc(30 / 768 * 100vw);
    }

    /* Stack headers vertically on mobile */
    .specs-tabs-nav {
        /* flex-direction: column; */
        width: 100%;
        gap: calc(12 / 768 * 100vw);
        margin-bottom: calc(36 / 768 * 100vw);
    }

    .spec-tab {
        width: 100%;
        height: calc(52 / 768 * 100vw);
        border-radius: calc(26 / 768 * 100vw);
        font-size: calc(22/ 768 * 100vw);
    }

    .tab-arrow-down {
        font-size: calc(11 / 768 * 100vw);
        font-size: 0;
    }

    /* Highlights Stacked vertically on mobile */
    .pane-highlights-grid {
        grid-template-columns: 1fr;
        gap: calc(24 / 768 * 100vw);
        margin-bottom: calc(32 / 768 * 100vw);
    }

    .highlight-col-title {
        font-size: calc(32/ 768 * 100vw);
        margin-bottom: calc(8 / 768 * 100vw);
    }

    .highlight-col-text {
        font-size: calc(22/ 768 * 100vw);
    }

    .pane-bullets-list {
        gap: calc(14 / 768 * 100vw);
    }

    .pane-bullets-list li {
        font-size: calc(14 / 768 * 100vw);
    }

    /* Rec grid mobile */
    .similar-rec-section {
        padding-top: calc(50 / 768 * 100vw);
        padding-bottom: calc(60 / 768 * 100vw);
    }

    .similar-rec-title {
        font-size: calc(32/ 768 * 100vw);
        margin-bottom: calc(32 / 768 * 100vw);
        text-align: center;
    }

    .similar-rec-grid {
        grid-template-columns: 1fr; /* Stack product cards vertically */
        gap: calc(24 / 768 * 100vw);
    }

    .rec-product-card {
        border-radius: calc(6 / 768 * 100vw);
    }

    .rec-card-img-wrap {
        height: calc(300 / 768 * 100vw);
    }

    .rec-card-details {
        padding: calc(18 / 768 * 100vw) calc(16 / 768 * 100vw);
    }

    .rec-card-name {
        font-size: calc(32/ 768 * 100vw);
        margin-bottom: calc(16 / 768 * 100vw);
    }

    .rec-card-color {
        font-size: calc(22/ 768 * 100vw);
        margin-bottom: calc(6 / 768 * 100vw);
    }

    .rec-card-article {
        font-size: calc(22/ 768 * 100vw);
    }

    /* Load more actions */
    .rec-action-wrap {
        margin-top: calc(40 / 768 * 100vw);
    }

    .specs-group {
        margin-bottom: calc(36 / 768 * 100vw);
    }

    .specs-group:last-child {
        margin-bottom: calc(50 / 768 * 100vw);
    }

    .specs-group-title {
        font-size: calc(18 / 768 * 100vw);
        margin-bottom: calc(16 / 768 * 100vw);
        text-align: left;
    }

    .specs-row {
        padding-top: calc(12 / 768 * 100vw);
        padding-bottom: calc(12 / 768 * 100vw);
        border-bottom-width: calc(1 / 768 * 100vw);
    }

    .specs-key {
        font-size: calc(14 / 768 * 100vw);
        max-width: 60%; /* Allow long labels to wrap gracefully */
        line-height: 1.3;
    }

    .specs-val {
        font-size: calc(14 / 768 * 100vw);
        line-height: 1.3;
        padding-left: calc(16 / 768 * 100vw);
    }

    .direct-specs-section {
        padding-top: 0;
        padding-bottom: calc(50 / 768 * 100vw);
    }

    .direct-specs-group {
        margin-bottom: calc(36 / 768 * 100vw);
    }

    .direct-specs-title {
        font-size: calc(32/ 768 * 100vw);
        margin-bottom: calc(18 / 768 * 100vw);
    }

    .direct-specs-row {
        padding-top: calc(12 / 768 * 100vw);
        padding-bottom: calc(12 / 768 * 100vw);
        border-bottom-width: calc(1 / 768 * 100vw);
    }

    .direct-specs-key {
        font-size: calc(22/ 768 * 100vw);
        max-width: 60%;
        line-height: 1.35;
    }

    .direct-specs-val {
        font-size: calc(18/ 768 * 100vw);
        line-height: 1.35;
        padding-left: calc(16 / 768 * 100vw);
    }
    
    .dl-group {
        margin-bottom: calc(32 / 768 * 100vw);
    }

    .dl-group-title {
        font-size: calc(32/ 768 * 100vw);
        margin-bottom: calc(16 / 768 * 100vw);
    }

    .dl-item {
        padding-top: calc(14 / 768 * 100vw);
        padding-bottom: calc(14 / 768 * 100vw);
        border-bottom-width: calc(1 / 768 * 100vw);
    }
	.dl-item-left + img{
		width: 4vw;
	height: 4vw;
	}
.dl-item-left img{
	width: 4vw;
	height: 4vw;
}
    .dl-item-left {
        gap: calc(12 / 768 * 100vw);
    }

    .dl-icon {
        width: calc(20 / 768 * 100vw);
        height: calc(20 / 768 * 100vw);
    }

    .dl-item-name {
        font-size: calc(22/ 768 * 100vw);
        line-height: 1.35;
    }

    .dl-arrow-icon {
        width: calc(18 / 768 * 100vw);
        height: calc(18 / 768 * 100vw);
    }

    .thumb-carousel-widget {
        flex-direction: row; /* Converts to horizontal row on mobile */
        width: 100%;
        justify-content: center;
        gap: calc(10 / 768 * 100vw);
    }

    .carousel-btn {
        display: none; /* Hide scroll buttons on mobile, swipe is preferred */
    }

    /* Adjust viewport to horizontal layout displaying up to 5 items */
    /* Item (64px) * 5 + Gap (10px) * 4 = 320px + 40px = 360px */
    .carousel-viewport {
        width: calc(360 / 768 * 100vw);
        height: calc(64 / 768 * 100vw);
    }

    .carousel-track {
        flex-direction: row;
        gap: calc(10 / 768 * 100vw);
        height: 100%;
        width: auto;
    }

    .thumb-item {
        width: calc(64 / 768 * 100vw);
        height: calc(64 / 768 * 100vw);
        border-radius: calc(6 / 768 * 100vw);
        border-width: calc(1 / 768 * 100vw);
    }

    .thumb-item:hover, .thumb-item.active {
        border-width: calc(1.5 / 768 * 100vw);
    }
    
    .interior-ambient-banner {
        height: calc(580 / 768 * 100vw);
        background-position: 55% center; /* Balances mountain view and shower graphics on mobile */
    }

    .interior-ambient-container {
        justify-content: center; /* Centers slogan on small screens */
    }

    .ambient-text-block {
        padding-left: 0;
        text-align: center;
        align-items: center;
        padding-top: 25vw;
    }

    .ambient-subtitle {
        font-size: calc(28 / 768 * 100vw);
        letter-spacing: calc(1 / 768 * 100vw);
        margin-bottom: calc(6 / 768 * 100vw);
    }

    .ambient-title {
        font-size: calc(34 / 768 * 100vw);
        letter-spacing: calc(0.5 / 768 * 100vw);
    }

    .group-intro-section {
        padding-top: calc(60 / 768 * 100vw);
        padding-bottom: calc(60 / 768 * 100vw);
    }

    .group-intro-header {
        margin-bottom: calc(24 / 768 * 100vw);
    }

    .group-intro-title {
        font-size: calc(32/ 768 * 100vw);
        line-height: 1.3;
        text-align: left;
    }

    .group-intro-desc {
        margin-bottom: calc(40 / 768 * 100vw);
        max-width: 100%;
    }

    .group-intro-desc p {
        font-size: calc(22/ 768 * 100vw);
        line-height: 1.6;
        margin-bottom: calc(18 / 768 * 100vw);
    }

    .group-skyline-banner {
        aspect-ratio: 4 / 3; /* Deeper portrait shape for optimized mobile screen ratios */
        border-radius: calc(6 / 768 * 100vw);
    }

    .skyline-overlay-text {
        bottom: calc(24 / 768 * 100vw);
        font-size: calc(16 / 768 * 100vw);
        letter-spacing: calc(0.5 / 768 * 100vw);
        bottom: 0;
    }
    .qualifications-section {
        padding-top: calc(60 / 768 * 100vw);
        padding-bottom: calc(60 / 768 * 100vw);
    }

    .qual-section-header {
        margin-bottom: calc(36 / 768 * 100vw);
    }

    .qual-section-title {
        font-size: calc(30 / 768 * 100vw);
        line-height: 1.3;
        text-align: center;
    }

    /* Hide arrow keys on mobile device screens */
    .qual-nav-btn {
        display: none;
    }

    /* Standard mobile width with scrolling enabled */
    .qual-carousel-viewport {
        width: 100%;
        overflow-x: auto; /* Support swipe scroll natively on mobile */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .qual-carousel-track {
        gap: calc(16 / 768 * 100vw);
    }

    .qual-card-item {
        width: 100%; /* Elegant partial reveal of next card */
        border-radius: calc(12 / 768 * 100vw);
        aspect-ratio: 4 / 4.8;
        scroll-snap-align: center;
        height: 83vw;
    }
.qual-card-content img{
	height: 27vw;
}
    .qual-card-content {
        padding: calc(24 / 768 * 100vw);
    }

    .trophy-icon {
        width: calc(64 / 768 * 100vw);
        height: calc(64 / 768 * 100vw);
        margin-bottom: calc(30 / 768 * 100vw);
    }

    .qual-card-sub {
        font-size: calc(32/ 768 * 100vw);
        padding-top: 5vw;
        padding-bottom: 4vw;
    }

    .qual-card-line {
        width: calc(28 / 768 * 100vw);
        height: calc(2 / 768 * 100vw);
        margin-top: calc(10 / 768 * 100vw);
        margin-bottom: calc(14 / 768 * 100vw);
    }

    .qual-card-main {
        font-size: calc(22/ 768 * 100vw);
    }
    
    .values-section {
        padding-top: calc(60 / 768 * 100vw);
        padding-bottom: calc(60 / 768 * 100vw);
    }

    .values-main-title {
        font-size: calc(36/ 768 * 100vw);
        margin-bottom: calc(32 / 768 * 100vw);
        text-align: center;
    }

    /* Transform grid into a clean single vertical stack layout on mobile devices */
    .values-bento-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: calc(16 / 768 * 100vw);
    }

    /* Reset grid coordinate allocations */
    .card-top-full,
    .card-left-tall,
    .card-right-upper,
    .card-right-lower,
    .card-bottom-full {
        grid-column: auto;
        grid-row: auto;
        height: calc(240 / 768 * 100vw); /* Uniform aesthetic height for mobile viewport cards */
        border-radius: calc(12 / 768 * 100vw);
        display: block;
        padding: 4vw;
    }
.last .value-card-content{
	padding: calc(18 / 768 * 100vw);
}
    .value-card-content {
        padding: calc(18 / 768 * 100vw);
    }

    .value-card-title {
        font-size: calc(32/ 768 * 100vw);
        margin-bottom: calc(6 / 768 * 100vw);
        line-height: 1.35;
    }

    .value-card-desc {
        font-size: calc(22/ 768 * 100vw);
        line-height: 1.35;
    }

    
    .contact-section {
        padding-top: calc(60 / 768 * 100vw);
        padding-bottom: calc(60 / 768 * 100vw);
    }

    .contact-main-title {
        font-size: calc(30 / 768 * 100vw);
        margin-bottom: calc(32 / 768 * 100vw);
        text-align: center;
    }

    .contact-group {
        margin-bottom: calc(20 / 768 * 100vw);
        text-align: center;
        text-align: left;
    }

    .contact-label {
        font-size: calc(24/ 768 * 100vw);
        margin-bottom: calc(4 / 768 * 100vw);
    }

    .contact-value {
        font-size: calc(22/ 768 * 100vw);
    }

    .contact-subvalue {
        font-size: calc(22/ 768 * 100vw);
        margin-top: calc(2 / 768 * 100vw);
    }

    /* Stack upper buttons on mobile */
    .contact-buttons-row {
        /* flex-direction: column; */
        width: 100%;
        gap: calc(12 / 768 * 100vw);
        margin-bottom: calc(50 / 768 * 100vw);
        align-items: center;
    }

    .contact-pill-btn {
        width: 100%;
        max-width: calc(360 / 768 * 100vw);
        height: calc(48 / 768 * 100vw);
        border-radius: calc(24 / 768 * 100vw);
        font-size: calc(14 / 768 * 100vw);
    }

    /* Transform split block to vertical scroll columns */
    .contact-split-wrap {
        flex-direction: column;
        height: auto;
        border-radius: calc(6 / 768 * 100vw);
    }

    /* Top Promo Image */
    .contact-promo-card {
        width: 100%;
        height: calc(420 / 768 * 100vw);
        padding: calc(32 / 768 * 100vw);
    }

    .promo-text-top {
        font-size: calc(20 / 768 * 100vw);
        max-width: 100%;
    }

    .promo-email-label {
        font-size: calc(15 / 768 * 100vw);
    }

    .promo-email-address {
        font-size: calc(24 / 768 * 100vw);
    }

    /* Bottom feedback form details on mobile */
    .contact-feedback-form {
        width: 100%;
        height: auto;
        padding: calc(36 / 768 * 100vw) calc(32 / 768 * 100vw);
        gap: calc(28 / 768 * 100vw);
    }

    .form-header-title {
        font-size: calc(26/ 768 * 100vw);
        text-align: center;
        line-height: 1.4;
    }

    .form-inputs-group {
        gap: calc(10 / 768 * 100vw);
    }

    .form-field {
        height: calc(64 / 768 * 100vw);
        border-radius: calc(10 / 768 * 100vw);
        font-size: calc(14 / 768 * 100vw);
    }

    .form-field.text-area {
        height: calc(140 / 768 * 100vw);
        padding: calc(12 / 768 * 100vw) calc(14 / 768 * 100vw);
    }

    .form-consent-text {
        font-size: calc(19/ 768 * 100vw);
        text-align: center;
        margin-top: 0;
    }

    /* Center submit button for better mobile usability ergonomics */
    .form-submit-btn {
        align-self: center;
    }
    
    .brand-presentation-banner {
        height: calc(580 / 768 * 100vw);
        background-position: 65% center;
    }

    .brand-pres-container {
        justify-content: center;
    }

    .pres-text-block {
        padding-bottom: 0;
        align-items: center;
        text-align: center;
    }

    .pres-main-title {
        font-size: calc(28 / 768 * 100vw);
        margin-bottom: calc(32 / 768 * 100vw);
    }

    .pres-subtitle {
        font-size: calc(32/ 768 * 100vw);
        margin-bottom: calc(12 / 768 * 100vw);
    }

    .pres-separator-line {
        width: calc(28 / 768 * 100vw);
        height: calc(1 / 768 * 100vw);
        margin-bottom: calc(12 / 768 * 100vw);
    }

    .pres-desc-text {
        font-size: calc(22/ 768 * 100vw);
        max-width: 100%;
        line-height: 1.6;
    }


    .news-ambient-banner {
        height: calc(450 / 768 * 100vw);
        background-position: 65% center;
    }

    .news-banner-container {
        /* justify-content: center; */
        padding-bottom: calc(50 / 768 * 100vw);
    }

    .news-banner-content {
        /* align-items: center; */
        /* text-align: center; */
        /* width: 100%; */
    }

    .news-ambient-title {
        font-size: calc(36 / 768 * 100vw);
        margin-bottom: calc(24 / 768 * 100vw);
    }

    /* Stack buttons vertically on mobile to gracefully fit long label texts */
    .news-category-pills {
        /* flex-direction: column; */
        /* width: 100%; */
        /* max-width: calc(360 / 768 * 100vw); */
        gap: calc(12 / 768 * 100vw);
    }

    .news-cat-pill {
        width: 32vw;
        height: calc(48 / 768 * 100vw);
        border-radius: calc(24 / 768 * 100vw);
        font-size: calc(14 / 768 * 100vw);
    }

    .news-cat-pill:not(.active) {
        border-width: calc(1 / 768 * 100vw);
    }

    .news-list-section {
        padding-top: calc(50 / 768 * 100vw);
        padding-bottom: calc(60 / 768 * 100vw);
    }

    .news-list-container {
        gap: calc(44 / 768 * 100vw);
    }

    /* Convert horizontal row component to vertical stack */
    .article-row-item {
        flex-direction: column;
        gap: calc(20 / 768 * 100vw);
    }

    /* Left Image Box mobile */
    .article-img-wrap {
        width: 100%;
        height: calc(340 / 768 * 100vw);
        border-radius: calc(6 / 768 * 100vw);
    }

    /* Right Details Box mobile */
    .article-details-col {
        width: 100%;
        padding-left: 0;
    }

    .article-row-title {
        font-size: calc(30/ 768 * 100vw);
        margin-bottom: calc(8 / 768 * 100vw);
        line-height: 1.3;
    }

    .article-row-date {
        font-size: calc(22/ 768 * 100vw);
        margin-bottom: calc(16 / 768 * 100vw);
    }

    .article-row-excerpt {
        font-size: calc(22/ 768 * 100vw);
        line-height: 1.6;
        margin-bottom: calc(24 / 768 * 100vw);
        -webkit-line-clamp: 3; /* Condenses to 3 rows on smaller viewports */
    }
    

.pagination-chevron {
    width: calc(28 / 768 * 100vw);
    height: calc(48 / 768 * 100vw);
}

    .article-detail-section {
        padding-top: calc(50 / 768 * 100vw);
        padding-bottom: calc(60 / 768 * 100vw);
    }

    .article-top-category {
        font-size: calc(32/ 768 * 100vw);
        margin-bottom: calc(44 / 768 * 100vw);
    }

    .article-detail-header {
        margin-bottom: calc(32 / 768 * 100vw);
    }

    .article-detail-title {
        font-size: calc(26/ 768 * 100vw);
        margin-bottom: calc(12 / 768 * 100vw);
        line-height: 1.3;
    }

    /* Stack metadata items vertically on mobile view */
    .article-detail-meta {
        flex-direction: column;
        gap: calc(8 / 768 * 100vw);
    }
.meta-item img {
    width: calc(18 / 768 * 100vw);
}
    .meta-item {
        font-size: calc(22/ 768 * 100vw);
        gap: calc(6 / 768 * 100vw);
    }

    .meta-svg {
        width: calc(13 / 768 * 100vw);
        height: calc(13 / 768 * 100vw);
    }

    /* Maximize reading column width */
    .article-reading-col {
        max-width: 100%;
    }

    .article-sub-category {
        font-size: calc(22/ 768 * 100vw);
        margin-bottom: calc(12 / 768 * 100vw);
    }

    .article-lead-paragraph {
        font-size: calc(16 / 768 * 100vw);
        margin-bottom: calc(20 / 768 * 100vw);
    }

    .article-paragraph {
        font-size: calc(22/ 768 * 100vw);
        line-height: 1.6;
        margin-bottom: calc(18 / 768 * 100vw);
    }

    .article-featured-image-wrap {
        height: calc(380 / 768 * 100vw);
        border-radius: calc(6 / 768 * 100vw);
        margin-top: calc(24 / 768 * 100vw);
        margin-bottom: calc(24 / 768 * 100vw);
    }

    /* Bottom navigation adjustments */
    .article-bottom-navigation {
        margin-top: calc(50 / 768 * 100vw);
        padding-top: calc(30 / 768 * 100vw);
        border-top-width: calc(1 / 768 * 100vw);
    }

    .nav-pill-btn {
        height: calc(44 / 768 * 100vw);
        border-radius: calc(22 / 768 * 100vw);
        border-width: calc(1 / 768 * 100vw);
        position: static;
    }

    .nav-pill-text {
        font-size: calc(13 / 768 * 100vw);
    }

    .nav-arrow-badge {
        width: calc(36 / 768 * 100vw);
        height: calc(36 / 768 * 100vw);
        position: static;
    }

    .nav-arrow-svg {
        width: calc(14 / 768 * 100vw);
        height: calc(14 / 768 * 100vw);
    }

    .nav-pill-btn.btn-prev {
        padding: 0 calc(20 / 768 * 100vw) 0 calc(4 / 768 * 100vw);
    }

    .nav-pill-btn.btn-prev .nav-pill-text {
        margin-left: calc(10 / 768 * 100vw);
    }

    .nav-pill-btn.btn-next {
        padding: 0 calc(4 / 768 * 100vw) 0 calc(20 / 768 * 100vw);
    }

    .nav-pill-btn.btn-next .nav-pill-text {
        margin-right: calc(10 / 768 * 100vw);
    }
}