/* =========================================================
   MOBILEHUB — RESPONSIVE SYSTEM
   PART 1
   Large tablets / small desktops
   1200px → 901px
   ========================================================= */

@media (max-width: 1200px) {

    .container {
        width: min(92%, 1100px);
    }

    /* =========================
       HEADER
       ========================= */

    .nav-container {
        min-height: 76px;
    }

    .nav-links {
        gap: 24px;
    }

    .nav-contact span {
        display: none;
    }

    /* =========================
       HERO
       ========================= */

    .hero-container {
        gap: 45px;
    }

    .hero-content {
        max-width: 560px;
    }

    .hero-content h1 {
        font-size: clamp(3rem, 5vw, 4.8rem);
    }

    .hero-visual {
        max-width: 450px;
    }

    /* =========================
       INTRO
       ========================= */

    .intro-grid {
        grid-template-columns: 130px 1fr 150px;
        gap: 35px;
    }

    /* =========================
       PRODUCTS
       ========================= */

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

    .product-image {
        min-height: 400px;
    }

    .product-info {
        padding: 42px;
    }

    /* =========================
       ACCESSORIES
       ========================= */

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

    /* =========================
       WHY SECTION
       ========================= */

    .why-grid {
        gap: 60px;
    }

    /* =========================
       ABOUT
       ========================= */

    .about-intro-grid {
        gap: 55px;
    }

    .values-grid {
        gap: 55px;
    }

    /* =========================
       CONTACT
       ========================= */

    .store-info-grid {
        gap: 55px;
    }

    .enquiry-layout {
        gap: 55px;
    }

    /* =========================
       FOOTER
       ========================= */

    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
        gap: 30px;
    }
}


/* =========================================================
   TABLET
   900px → 769px
   ========================================================= */

@media (max-width: 900px) {

    .container {
        width: min(92%, 760px);
    }

    /* =========================
       HEADER
       ========================= */

    .navbar {
        display: none;
    }

    .menu-btn {
        display: flex;
    }

    .nav-contact {
        display: flex;
    }

    /* =========================
       HERO
       ========================= */

    .hero {
        min-height: auto;
    }

    .hero-container {
        grid-template-columns: 1fr;
        padding-top: 100px;
        padding-bottom: 80px;
    }

    .hero-content {
        max-width: 700px;
    }

    .hero-visual {
        width: min(100%, 520px);
        margin: 0 auto;
    }

    /* =========================
       LOCATION BAR
       ========================= */

    .location-inner {
        grid-template-columns: auto 1fr auto;
    }

    /* =========================
       INTRO
       ========================= */

    .intro-grid {
        grid-template-columns: 90px 1fr;
    }

    .intro-stat {
        display: none;
    }

    /* =========================
       SECTION HEADINGS
       ========================= */

    .section-heading {
        gap: 30px;
    }

    /* =========================
       PRODUCT FEATURES
       ========================= */

    .product-feature,
    .product-feature.reverse-card {
        grid-template-columns: 1fr;
    }

    .product-feature.reverse-card .product-image {
        order: 0;
    }

    .product-feature.reverse-card .product-info {
        order: 1;
    }

    .product-image {
        min-height: 420px;
    }

    /* =========================
       ACCESSORY GRID
       ========================= */

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

    /* =========================
       WHY SECTION
       ========================= */

    .why-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    /* =========================
       STORE CTA
       ========================= */

    .store-cta-card {
        padding: 50px;
    }

    /* =========================
       ABOUT
       ========================= */

    .about-intro-grid,
    .values-grid {
        grid-template-columns: 1fr;
    }

    .about-intro-image,
    .values-visual {
        max-width: 650px;
        margin-inline: auto;
    }

    .about-intro-content,
    .values-content {
        max-width: 700px;
    }

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

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

    /* =========================
       CONTACT
       ========================= */

    .contact-method-grid {
        grid-template-columns: 1fr;
    }

    .store-info-grid,
    .enquiry-layout {
        grid-template-columns: 1fr;
    }

    .store-image {
        min-height: 400px;
    }

    /* =========================
       FOOTER
       ========================= */

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 50px;
    }
}








































/* =========================================================
   MOBILEHUB — RESPONSIVE SYSTEM
   PART 2
   Mobile devices
   768px → 481px
   ========================================================= */

@media (max-width: 768px) {

    .container {
        width: min(92%, 620px);
    }

    /* =========================
       GLOBAL SPACING
       ========================= */

    section {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    /* =========================
       HEADER
       ========================= */

    .header {
        height: 70px;
    }

    .nav-container {
        min-height: 70px;
    }

    .logo {
        font-size: 1.15rem;
    }

    .logo-icon {
        width: 38px;
        height: 38px;
    }

    .nav-actions {
        gap: 12px;
    }

    .nav-contact {
        width: 40px;
        height: 40px;
        justify-content: center;
        padding: 0;
    }

    .menu-btn {
        width: 42px;
        height: 42px;
    }

    /* =========================
       HERO
       ========================= */

    .hero-container {
        padding-top: 85px;
        padding-bottom: 65px;
    }

    .hero-content h1 {
        font-size: clamp(2.7rem, 10vw, 4rem);
        line-height: 1;
    }

    .hero-content p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-trust {
        flex-wrap: wrap;
        gap: 15px 22px;
    }

    .trust-item {
        font-size: 0.78rem;
    }

    .hero-visual {
        margin-top: 15px;
    }

    .floating-chip {
        font-size: 0.72rem;
        padding: 9px 12px;
    }

    .chip-one {
        left: 5%;
    }

    .chip-two {
        right: 5%;
    }

    /* =========================
       LOCATION BAR
       ========================= */

    .location-bar {
        padding: 18px 0;
    }

    .location-inner {
        grid-template-columns: auto 1fr;
        gap: 12px;
    }

    .location-link {
        grid-column: 2;
        justify-self: start;
        margin-top: 3px;
    }

    .location-text strong {
        font-size: 0.86rem;
    }

    /* =========================
       CATEGORY STRIP
       ========================= */

    .category-strip {
        overflow: hidden;
    }

    .category-scroll {
        overflow-x: auto;
        display: flex;
        gap: 10px;
        padding-bottom: 5px;
        scrollbar-width: none;
    }

    .category-scroll::-webkit-scrollbar {
        display: none;
    }

    .category-item {
        flex: 0 0 auto;
        min-width: 125px;
    }

    /* =========================
       INTRO
       ========================= */

    .intro-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .intro-label {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .intro-label div {
        width: 40px;
        height: 1px;
    }

    .intro-content h2 {
        font-size: 2.1rem;
    }

    /* =========================
       SECTION HEADINGS
       ========================= */

    .section-heading {
        grid-template-columns: 1fr;
        display: grid;
        gap: 18px;
    }

    .section-heading h2 {
        font-size: 2.2rem;
    }

    .section-heading.centered {
        text-align: center;
    }

    /* =========================
       PRODUCTS
       ========================= */

    .product-feature {
        border-radius: 20px;
    }

    .product-image {
        min-height: 330px;
    }

    .product-info {
        padding: 30px 25px;
    }

    .product-info h3 {
        font-size: 1.8rem;
    }

    .product-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 9px;
    }

    .availability-btn {
        width: 100%;
        justify-content: center;
    }

    /* =========================
       ACCESSORIES
       ========================= */

    .accessory-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .accessory-content {
        padding: 20px;
    }

    .accessory-content h3 {
        font-size: 1.15rem;
    }

    .accessory-content p {
        font-size: 0.82rem;
    }

    .mini-enquiry {
        width: 100%;
    }

    /* =========================
       WHY SECTION
       ========================= */

    .why-content h2 {
        font-size: 2.2rem;
    }

    .why-point {
        padding: 20px;
    }

    /* =========================
       STORE CTA
       ========================= */

    .store-cta-card {
        padding: 35px 25px;
        flex-direction: column;
        align-items: flex-start;
    }

    .store-cta-content h2 {
        font-size: 2.2rem;
    }

    .store-cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .store-cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .store-cta-mark {
        align-self: flex-end;
    }

    /* =========================
       QUICK ENQUIRY
       ========================= */

    .enquiry-layout {
        gap: 35px;
    }

    .enquiry-info h2 {
        font-size: 2.2rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .enquiry-form {
        padding: 25px;
    }

    .enquiry-submit {
        width: 100%;
        justify-content: center;
    }

    /* =========================
       ABOUT PAGE
       ========================= */

    .inner-hero {
        min-height: 430px;
    }

    .inner-hero-content h1 {
        font-size: clamp(2.7rem, 10vw, 4rem);
    }

    .about-intro-content h2,
    .values-content h2 {
        font-size: 2.3rem;
    }

    .about-highlights {
        gap: 15px;
    }

    .approach-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

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

    .about-location-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
        padding: 30px;
    }

    .location-cta-action {
        width: 100%;
    }

    .location-cta-action .btn {
        width: 100%;
        justify-content: center;
    }

    /* =========================
       CONTACT PAGE
       ========================= */

    .contact-intro {
        padding-top: 70px;
    }

    .contact-method {
        padding: 22px;
    }

    .contact-method h3 {
        font-size: 1.05rem;
    }

    .store-info-content h2 {
        font-size: 2.3rem;
    }

    .store-image {
        min-height: 330px;
    }

    .map-card iframe {
        height: 350px;
    }

    .map-actions {
        flex-direction: column;
    }

    .map-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .contact-cta-card {
        padding: 35px 25px;
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }

    .contact-cta-buttons {
        width: 100%;
        flex-direction: column;
    }

    .contact-cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    /* =========================
       FOOTER
       ========================= */

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 25px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .copyright {
        text-align: center;
    }

    /* =========================
       FLOATING BUTTONS
       ========================= */

    .floating-call,
    .floating-whatsapp {
        width: 48px;
        height: 48px;
    }

    .floating-call {
        bottom: 85px;
    }

    .floating-whatsapp {
        bottom: 25px;
    }
}
























































































/* =========================================================
   MOBILEHUB — RESPONSIVE SYSTEM
   PART 3
   Small phones
   480px and below
   ========================================================= */

@media (max-width: 480px) {

    .container {
        width: 91%;
    }

    section {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    /* =========================
       HEADER
       ========================= */

    .header {
        height: 64px;
    }

    .nav-container {
        min-height: 64px;
    }

    .logo {
        font-size: 1rem;
        gap: 8px;
    }

    .logo-icon {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
    }

    .nav-actions {
        gap: 7px;
    }

    .nav-contact,
    .menu-btn {
        width: 38px;
        height: 38px;
    }

    /* =========================
       HERO
       ========================= */

    .hero-container {
        padding-top: 70px;
        padding-bottom: 55px;
    }

    .eyebrow {
        font-size: 0.68rem;
        letter-spacing: 0.12em;
    }

    .hero-content h1 {
        font-size: clamp(2.45rem, 12vw, 3.3rem);
        letter-spacing: -0.055em;
    }

    .hero-content p {
        font-size: 0.92rem;
        line-height: 1.65;
    }

    .hero-trust {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .trust-item {
        font-size: 0.72rem;
    }

    .hero-visual {
        width: 100%;
    }

    .floating-chip {
        padding: 8px 10px;
        font-size: 0.64rem;
    }

    /* =========================
       LOCATION
       ========================= */

    .location-inner {
        grid-template-columns: 38px 1fr;
    }

    .location-icon {
        width: 38px;
        height: 38px;
    }

    .location-text span {
        font-size: 0.62rem;
    }

    .location-text strong {
        font-size: 0.76rem;
        line-height: 1.4;
    }

    .location-link {
        font-size: 0.75rem;
    }

    /* =========================
       CATEGORY
       ========================= */

    .category-item {
        min-width: 112px;
        padding: 12px;
    }

    .category-icon {
        width: 34px;
        height: 34px;
    }

    .category-item span:last-child {
        font-size: 0.72rem;
    }

    /* =========================
       INTRO
       ========================= */

    .intro-content h2 {
        font-size: 1.9rem;
        line-height: 1.15;
    }

    .intro-content p {
        font-size: 0.9rem;
    }

    /* =========================
       HEADINGS
       ========================= */

    .section-heading h2,
    .why-content h2,
    .store-cta-content h2,
    .enquiry-info h2,
    .store-info-content h2 {
        font-size: 1.95rem;
        line-height: 1.15;
    }

    /* =========================
       PRODUCT FEATURE
       ========================= */

    .product-image {
        min-height: 260px;
    }

    .product-info {
        padding: 25px 20px;
    }

    .product-number {
        font-size: 0.7rem;
    }

    .product-info h3 {
        font-size: 1.55rem;
    }

    .product-info p {
        font-size: 0.86rem;
    }

    .product-meta span {
        font-size: 0.74rem;
    }

    .availability-btn {
        padding: 13px 15px;
        font-size: 0.78rem;
    }

    /* =========================
       ACCESSORIES
       ========================= */

    .accessory-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .accessory-image {
        height: 220px;
    }

    .accessory-content {
        padding: 20px;
    }

    /* =========================
       WHY
       ========================= */

    .why-point {
        padding: 17px;
        gap: 15px;
    }

    .why-icon {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

    .why-point h3 {
        font-size: 1rem;
    }

    .why-point p {
        font-size: 0.8rem;
    }

    /* =========================
       STORE CTA
       ========================= */

    .store-cta-card {
        padding: 28px 20px;
    }

    .store-cta-content h2 {
        font-size: 1.9rem;
    }

    .store-cta-content p {
        font-size: 0.87rem;
    }

    .store-cta-mark {
        font-size: 0.65rem;
    }

    /* =========================
       FORMS
       ========================= */

    .enquiry-form {
        padding: 20px;
    }

    .form-group label {
        font-size: 0.78rem;
    }

    .form-group input,
    .form-group textarea {
        font-size: 0.86rem;
        padding: 13px 14px;
    }

    .form-group textarea {
        min-height: 120px;
    }

    /* =========================
       ABOUT PAGE
       ========================= */

    .inner-hero {
        min-height: 390px;
    }

    .inner-hero-content h1 {
        font-size: clamp(2.5rem, 12vw, 3.4rem);
    }

    .inner-hero-content p {
        font-size: 0.9rem;
    }

    .about-intro-content h2,
    .values-content h2 {
        font-size: 2rem;
    }

    .about-intro-content p,
    .values-content > p {
        font-size: 0.88rem;
    }

    .about-highlights {
        flex-direction: column;
    }

    .about-highlight {
        width: 100%;
    }

    .approach-card {
        padding: 25px;
    }

    .about-product-card {
        padding: 25px;
    }

    .about-location-card {
        padding: 25px 20px;
    }

    .location-cta-content h2 {
        font-size: 1.9rem;
    }

    /* =========================
       CONTACT PAGE
       ========================= */

    .contact-method {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 12px;
        padding: 18px;
    }

    .contact-method-icon {
        width: 42px;
        height: 42px;
    }

    .contact-method h3 {
        font-size: 0.9rem;
    }

    .contact-method p {
        font-size: 0.72rem;
    }

    .method-arrow {
        font-size: 0.7rem;
    }

    .store-image {
        min-height: 270px;
    }

    .map-card iframe {
        height: 280px;
    }

    .contact-cta-card {
        padding: 28px 20px;
    }

    /* =========================
       FOOTER
       ========================= */

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-column {
        padding-top: 5px;
    }

    .footer-socials {
        gap: 8px;
    }

    .copyright {
        font-size: 0.72rem;
        padding-top: 25px;
    }

    /* =========================
       FLOATING ACTIONS
       ========================= */

    .floating-call,
    .floating-whatsapp {
        width: 44px;
        height: 44px;
        font-size: 0.9rem;
        right: 15px;
    }

    .floating-call {
        bottom: 75px;
    }

    .floating-whatsapp {
        bottom: 20px;
    }
}


/* =========================================================
   REDUCED MOTION
   Accessibility + smoother low-power devices
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   TOUCH DEVICES
   Prevent hover-heavy interactions on touch screens
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .accessory-card:hover,
    .product-feature:hover,
    .approach-card:hover,
    .about-product-card:hover,
    .contact-method:hover {
        transform: none;
    }

    .btn:hover,
    .availability-btn:hover,
    .mini-enquiry:hover {
        transform: none;
    }
}































































@media (max-width: 768px) {

    .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 12px 5%;
        background: var(--white, #fff);

        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);

        transition:
            opacity 0.2s ease,
            transform 0.2s ease,
            visibility 0.2s ease;

        z-index: 999;
    }

    .navbar.menu-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 8px 0;
    }

    .nav-links a {
        display: block;
        padding: 14px 12px;
        border-radius: 10px;
    }

    .nav-links a:hover {
        background: rgba(0, 0, 0, 0.04);
    }

    .menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1001;
    }

    .menu-btn i {
        transition: transform 0.2s ease;
    }

    .menu-btn.active i {
        transform: rotate(90deg);
    }
}



























































/* MOBILE MENU FIX */
@media (max-width: 900px) {

    .navbar.menu-open {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background: #ffffff;
        padding: 20px;
        z-index: 9999;
        box-shadow: 0 15px 30px rgba(0,0,0,.08);
    }

    .navbar.menu-open .nav-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0;
        padding: 0;
    }

    .navbar.menu-open .nav-links a {
        display: block;
        padding: 14px 16px;
    }

    .menu-btn {
        cursor: pointer;
        position: relative;
        z-index: 10000;
    }

    .menu-btn.active i::before {
        content: "\f00d";
    }
}