/* ============================================
   KRS Groups — Mobile Responsive Stylesheet
   
   Clean breakpoint architecture:
   • 1024px — Tablet
   • 768px  — Mobile (single column, full-width cards)
   • 480px  — Small mobile (tighter typography)
   
   Desktop layout is FINAL and UNTOUCHED.
   This file loads AFTER redesign.css to override
   only responsive behavior.
   ============================================ */


/* ===========================================
   TABLET — max-width: 1024px
   Reduce gaps, start simplifying grids
   =========================================== */
@media (max-width: 1024px) {

    /* Team grid — 2 columns */
    .team-grid-editorial {
        gap: 24px;
    }

    /* Properties sidebar narrower */
    .properties-layout-grid {
        grid-template-columns: 240px 1fr;
        gap: 30px;
    }

    /* Contact sidebar narrower */
    .contact-layout-grid {
        gap: 30px;
    }
}


/* ===========================================
   MOBILE — max-width: 768px
   Single column. Full-width cards. Generous spacing.
   Think Apple. Think Airbnb. Think Stripe.
   =========================================== */
@media (max-width: 768px) {

    /* Prevent horizontal swiping/scrolling on mobile devices */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
    }

    /* -------------------------------------------
       GLOBAL — Section Spacing & Typography
       ------------------------------------------- */

    .editorial-section,
    .editorial-section.alt-bg {
        padding: 64px 0 !important;
    }

    .section-header-editorial {
        margin-bottom: 24px !important;
        padding: 0 20px !important;
    }

    .section-header-editorial h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
    }

    .section-header-editorial p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 0 !important;
    }


    /* -------------------------------------------
       GLOBAL — Grid Reset (Single Column)
       ------------------------------------------- */

    /* Bootstrap row — collapse to block */
    .editorial-section .row,
    .editorial-section .row.flex-row,
    .editorial-section .row.reveal {
        display: block !important;
        margin: 0 !important;
        flex-wrap: unset !important;
    }

    /* Bootstrap columns — full width, centered */
    .editorial-section [class*="col-"] {
        width: 100% !important;
        float: none !important;
        padding: 0 20px !important;
        margin-bottom: 20px !important;
        margin-left: 0 !important;  /* Reset col-md-offset-* */
    }

    /* Last child no bottom margin */
    .editorial-section [class*="col-"]:last-child {
        margin-bottom: 0 !important;
    }


    /* -------------------------------------------
       GLOBAL — Card Base Styles
       ------------------------------------------- */

    .value-card-premium,
    .feature-box-editorial,
    .uniqueness-point-premium,
    .income-card-premium,
    .portfolio-card-premium {
        width: 100% !important;
        max-width: 420px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        height: auto !important;
        padding: 28px 24px !important;
        border-radius: 12px !important;
    }


    /* -------------------------------------------
       GLOBAL — Buttons
       ------------------------------------------- */

    .btn-premium-solid,
    .btn-premium-outline {
        width: 100% !important;
        max-width: 340px !important;
        min-height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 15px !important;
        border-radius: 99px !important;
    }


    /* -------------------------------------------
       GLOBAL — Images
       ------------------------------------------- */

    .editorial-section img {
        max-width: 100% !important;
        height: auto !important;
    }


    /* -------------------------------------------
       GLOBAL — Inner Page Banner
       ------------------------------------------- */

    .inner-page-banner {
        padding: 110px 20px 50px 20px !important;
    }

    .inner-page-banner h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    .inner-page-banner .breadcrumb-editorial {
        font-size: 13px !important;
    }


    /* =============================================
       HOMEPAGE — index.html
       ============================================= */

    /* Header padding compression to bring logo & toggle menu closer to top */
    body .navbar-default,
    body .navbar-default.scrolled {
        padding: 2px 0 !important;
    }
    
    body .navbar-default .navbar-header {
        height: 46px !important;
        margin-top: 4px !important;
    }

    /* Hero Section Reset & Vertical Alignment */
    .hero-editorial-section {
        padding: 40px 0 80px 0 !important;
        height: auto !important;
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .hero-editorial-content {
        padding: 0 15px !important;
        max-width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-top: -60px !important; /* Shift entire content upward, keeping headline visible without clipping */
    }
    
    .mobile-block {
        display: inline !important;
    }
    
    .hero-editorial-content h1 {
        font-size: 38px !important; /* Increased for stronger visual hierarchy */
        line-height: 1.3 !important;
        letter-spacing: -0.015em !important;
        margin-bottom: 16px !important; /* Excellent spacing to badges */
        font-weight: 800 !important;
    }
    
    .hero-editorial-content h1 span.hero-accent-green {
        display: block !important;
        margin-top: 6px !important;
    }

    /* Hero Trust Badges as glass pills */
    .hero-trust-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important; /* Tightened badge spacing */
        margin-bottom: 22px !important; /* Excellent spacing to description */
        padding: 0 10px !important;
        width: 100% !important;
        font-weight: 500 !important;
        letter-spacing: 0.03em !important;
    }
    
    .hero-trust-row span:nth-child(even) {
        display: none !important;
    }
    
    .hero-trust-row span:nth-child(odd) {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 99px !important;
        padding: 5px 12px !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        color: rgba(255, 255, 255, 0.85) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
        margin: 0 !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        pointer-events: auto;
    }

    .hero-editorial-content p {
        font-size: 14px !important; /* Compact description size */
        line-height: 1.75 !important;
        max-width: 320px !important;
        margin: 0 auto 30px auto !important; /* Maintained excellent spacing */
        color: rgba(255, 255, 255, 0.76) !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
        text-align: center !important;
    }
    
    .hero-cta-group {
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    .btn-hero-primary,
    .btn-hero-secondary {
        width: 100% !important;
        text-align: center !important;
        padding: 16px 24px !important;
        font-size: 13px !important;
        border-radius: 99px !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
        margin: 0 !important;
        display: block !important;
    }

    .btn-hero-primary:active,
    .btn-hero-secondary:active,
    .hero-trust-row span:active {
        transform: scale(0.97) !important;
        filter: brightness(0.9) !important;
    }

    .hero-scroll-indicator {
        position: absolute;
        bottom: 25px;
        left: 50%;
        transform: translateX(-50%);
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        z-index: 10;
        pointer-events: none;
    }
    
    .scroll-text {
        font-family: var(--font-sans);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.45);
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    
    .scroll-arrow {
        color: #34D399;
        font-size: 14px;
        animation: scrollBounce 2s infinite ease-in-out;
        text-shadow: 0 1px 4px rgba(34, 197, 94, 0.4);
    }
    
    @keyframes scrollBounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }

    /* Trust Stats Band */
    .trust-stats-band {
        padding: 40px 0 !important;
    }
    
    .trust-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        margin-top: 0 !important;
    }
    
    .trust-stat-item-premium {
        padding: 16px 12px !important;
    }
    
    .trust-stat-item-premium h3 {
        font-size: 28px !important;
        margin-bottom: 2px !important;
    }
    
    .trust-stat-item-premium p {
        font-size: 11px !important;
        letter-spacing: 0.05em !important;
    }

    /* Featured Projects Horizontal Swipe */
    .coverflow-stage {
        height: auto !important;
        overflow: visible !important;
        display: block !important;
        padding: 0 !important;
        position: relative !important;
    }
    
    .coverflow-track {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        height: auto !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 20px 20px 30px 20px !important;
        gap: 20px !important;
        transform: none !important;
        transform-style: flat !important;
        margin: 0 !important;
    }
    
    .coverflow-track::-webkit-scrollbar {
        display: none !important;
    }
    
    .coverflow-card {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        width: 280px !important;
        height: 380px !important;
        scroll-snap-align: center !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        box-shadow: 0 8px 25px rgba(11, 21, 36, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    
    .coverflow-arrow {
        display: none !important;
    }

    /* Bento Grid — SINGLE column */
    .bento-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 20px !important;
        margin-top: 24px !important;
    }

    .bento-card {
        height: auto !important;
        padding: 24px !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        grid-template-areas: unset !important;
        grid-template-columns: unset !important;
    }

    .bento-card.span-2 {
        grid-column: span 1 !important;
    }

    .bento-icon {
        width: 44px !important;
        height: 44px !important;
        margin: 0 0 16px 0 !important;
        border-radius: 12px !important;
        grid-area: unset !important;
    }

    .bento-icon svg {
        width: 20px !important;
        height: 20px !important;
    }

    .bento-card h3 {
        font-size: 18px !important;
        margin: 0 0 8px 0 !important;
        grid-area: unset !important;
    }

    .bento-card p {
        font-size: 14px !important;
        line-height: 1.55 !important;
        margin: 0 !important;
        grid-area: unset !important;
        display: block !important;
    }

    /* Available Plots Horizontal Swipe */
    .plots-properties-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px 15px 24px 15px !important;
        gap: 16px !important;
        margin-top: 20px !important;
        width: 100% !important;
    }
    
    .plots-properties-grid::-webkit-scrollbar {
        display: none !important;
    }
    
    .plot-card-premium {
        flex-shrink: 0 !important;
        width: 275px !important;
        scroll-snap-align: center !important;
        margin: 0 !important;
    }

    /* Video Testimonials Swipe */
    .video-testimonials-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px 15px 24px 15px !important;
        gap: 16px !important;
        margin-top: 20px !important;
        width: 100% !important;
    }
    
    .video-testimonials-grid::-webkit-scrollbar {
        display: none !important;
    }
    
    .video-card-premium {
        flex-shrink: 0 !important;
        width: 240px !important;
        scroll-snap-align: center !important;
        margin: 0 !important;
    }
    
    .video-wrapper-premium {
        padding-bottom: 125% !important;
    }

    /* Text Testimonials Stacked */
    .text-testimonials-editorial {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        margin-top: 40px !important;
        padding-top: 40px !important;
    }
    
    .testimonial-quote-editorial {
        padding-left: 10px !important;
    }

    /* FAQ accordion styling */
    .faq-container-premium {
        max-width: 100% !important;
        padding: 0 20px !important;
    }

    /* Dual CTA — SINGLE column stacked */
    .dual-cta-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 20px !important;
    }

    .cta-panel {
        height: auto !important;
        min-height: auto !important;
        padding: 28px 24px !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        max-width: 420px !important;
        margin: 0 auto !important;
        grid-template-areas: unset !important;
        grid-template-columns: unset !important;
    }

    .cta-panel-icon {
        width: 48px !important;
        height: 48px !important;
        margin: 0 0 16px 0 !important;
        font-size: 18px !important;
        grid-area: unset !important;
    }

    .cta-panel h2 {
        font-size: 20px !important;
        margin: 0 0 8px 0 !important;
        grid-area: unset !important;
    }

    .cta-panel p {
        font-size: 14px !important;
        line-height: 1.55 !important;
        margin: 0 0 20px 0 !important;
        grid-area: unset !important;
        display: block !important;
    }

    .cta-panel .btn-cta-panel {
        width: 100% !important;
        max-width: 340px !important;
        min-height: 48px !important;
        padding: 14px 24px !important;
        font-size: 14px !important;
        white-space: normal !important;
        margin: 0 !important;
        grid-area: unset !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }


    /* =============================================
       ABOUT PAGE — about.html
       ============================================= */

    /* Story & Identity grid — single column */
    .about-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* Founder image — below text */
    .about-img-framed {
        order: 2 !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        aspect-ratio: auto !important;
    }

    .about-img-framed img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 16px !important;
    }

    /* Acronym section */
    .acronym-container {
        padding: 0 !important;
    }

    .acronym-row {
        gap: 12px !important;
        margin-bottom: 20px !important;
    }

    .acronym-letter {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
        flex-shrink: 0 !important;
    }

    .acronym-content h4 {
        font-size: 16px !important;
    }

    .acronym-content p {
        font-size: 13px !important;
    }

    /* About metrics — 2×2 grid */
    .about-metrics-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin-top: 24px !important;
    }

    .about-metric-card {
        padding: 16px !important;
    }

    .about-metric-card h3 {
        font-size: 28px !important;
    }

    .about-metric-card p {
        font-size: 11px !important;
    }

    /* Value cards — full content, no clipping */
    .value-card-premium h3 {
        font-size: 20px !important;
        margin-bottom: 12px !important;
        gap: 10px !important;
    }

    .value-card-premium > p {
        font-size: 14px !important;
        line-height: 1.55 !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }

    .value-card-premium ul {
        display: block !important;
        padding-left: 20px !important;
        margin-top: 16px !important;
    }

    .value-card-premium ul li {
        font-size: 14px !important;
        margin-bottom: 8px !important;
        color: var(--muted) !important;
    }

    /* Feature boxes (Business Philosophy) — full content */
    .feature-box-editorial {
        text-align: left !important;
    }

    .feature-box-editorial .feat-icon {
        font-size: 32px !important;
        margin-bottom: 16px !important;
    }

    .feature-box-editorial h3 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }

    .feature-box-editorial > p {
        font-size: 14px !important;
        line-height: 1.55 !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }

    .feature-box-editorial ul {
        display: block !important;
        margin-top: 16px !important;
    }

    .feature-box-editorial ul li {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    /* Certifications */
    .cert-grid {
        gap: 10px !important;
        justify-content: center !important;
    }

    .cert-tag {
        font-size: 12px !important;
        padding: 8px 16px !important;
    }

    /* Team grid — SINGLE column */
    .team-grid-editorial {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        margin-top: 32px !important;
    }

    .team-member-card {
        width: 100% !important;
        max-width: 420px !important;
        margin: 0 auto !important;
        height: auto !important;
    }

    .team-img-wrapper {
        padding-bottom: 100% !important;  /* Square portrait */
    }

    .team-meta {
        padding: 20px !important;
    }

    .team-meta h3 {
        font-size: 18px !important;
    }

    .team-role {
        font-size: 13px !important;
    }

    .team-desc {
        font-size: 14px !important;
        line-height: 1.5 !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }

    /* Timeline */
    .timeline-editorial {
        margin-top: 20px !important;
    }

    .timeline-item-premium h5 {
        font-size: 13px !important;
    }

    .timeline-item-premium p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    /* CTA section overrides */
    .editorial-section[style*="padding: 100px 0"] {
        padding: 64px 20px !important;
    }


    /* =============================================
       PROPERTIES PAGE — properties.html
       ============================================= */

    /* Layout grid — SINGLE column (sidebar stacks on top) */
    .properties-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* Sidebar panels — full width */
    .sidebar-premium-panel {
        max-width: 420px !important;
        margin: 0 auto 20px auto !important;
        padding: 24px !important;
        border-radius: 12px !important;
    }

    .sidebar-premium-panel h3 {
        font-size: 18px !important;
        margin-bottom: 16px !important;
    }

    /* Search form fields */
    .search-field-wrapper {
        margin-bottom: 12px !important;
    }

    .search-field-wrapper label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .search-field-wrapper select,
    .search-field-wrapper input {
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 15px !important;
        min-height: 48px !important;
        border-radius: 8px !important;
    }

    .apply-filter-btn,
    .reset-filter-btn {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 14px !important;
        margin-bottom: 8px !important;
        border-radius: 8px !important;
    }

    /* Project cards — SINGLE column, NOT horizontal scroll */
    .properties-row-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
        padding: 0 !important;
        flex-direction: unset !important;
    }

    .properties-row-grid > * {
        width: 100% !important;
        max-width: 420px !important;
        margin: 0 auto !important;
        flex-shrink: unset !important;
        scroll-snap-align: unset !important;
    }

    /* Hide scroll navigation arrows */
    .mobile-scroll-btn {
        display: none !important;
    }

    /* Editorial project card styling */
    .editorial-card {
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .editorial-card .card-thumb {
        height: 200px !important;
    }

    .editorial-card .card-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .editorial-card .card-content {
        padding: 20px !important;
    }

    .editorial-card .card-content h3 {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }

    .editorial-card .card-content p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .editorial-card .card-location {
        font-size: 13px !important;
    }

    /* View Details button */
    .editorial-card .card-content .btn-premium-outline,
    .editorial-card .card-content a[class*="btn"] {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 16px !important;
    }

    /* Scroll indicator dots */
    .scroll-indicator {
        margin-top: 20px !important;
    }

    /* Recommended cards */
    .recommended-side-card {
        gap: 12px !important;
    }

    .rec-thumb-side {
        width: 60px !important;
        height: 60px !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
    }


    /* =============================================
       UNIQUENESS PAGE — uniqueness.html
       ============================================= */

    /* Uniqueness point cards — full width with full content */
    .uniqueness-point-premium h3 {
        font-size: 20px !important;
        margin-bottom: 12px !important;
        gap: 10px !important;
    }

    .uniqueness-point-premium > p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }

    /* Tech features — VISIBLE, not hidden */
    .tech-feature-premium {
        display: block !important;
        margin-top: 16px !important;
        padding-top: 16px !important;
    }

    .tech-feature-premium h5 {
        font-size: 14px !important;
    }

    .tech-feature-premium p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    /* Timeline items (uniqueness) */
    .timeline-item-unq {
        margin-bottom: 16px !important;
    }

    .timeline-item-unq h5 {
        font-size: 13px !important;
    }

    .timeline-item-unq p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    /* Income cards — full width with full content */
    .income-card-premium h3 {
        font-size: 20px !important;
        gap: 10px !important;
    }

    .income-card-premium > p {
        font-size: 14px !important;
        line-height: 1.55 !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }

    .income-card-premium ul {
        display: block !important;
        padding-left: 20px !important;
        margin-top: 16px !important;
    }

    .income-card-premium ul li {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    /* Portfolio cards (Trust & Diversity) — full width */
    .portfolio-card-premium {
        text-align: left !important;
    }

    .portfolio-card-premium .port-icon {
        font-size: 32px !important;
        margin-bottom: 16px !important;
    }

    .portfolio-card-premium h3 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }

    .portfolio-card-premium > p {
        font-size: 14px !important;
        line-height: 1.55 !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }

    .portfolio-price {
        margin-top: 16px !important;
        padding-top: 12px !important;
        font-size: 14px !important;
    }

    .portfolio-price strong {
        font-size: 18px !important;
    }

    /* Cert badges */
    .cert-badge-premium {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }


    /* =============================================
       CONTACT PAGE — contact.html
       ============================================= */

    /* Main layout grid — single column */
    .contact-layout-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* Reach Us card — single column */
    .reach-us-premium-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 28px 24px !important;
        border-radius: 12px !important;
    }

    .reach-us-item-premium {
        gap: 12px !important;
    }

    .reach-us-icon-premium {
        width: 44px !important;
        height: 44px !important;
    }

    /* Contact form */
    .contact-form-premium-wrapper {
        padding: 28px 24px !important;
        border-radius: 12px !important;
    }

    /* Form fields — single column */
    .form-row-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .form-field-premium label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .form-field-premium input,
    .form-field-premium select,
    .form-field-premium textarea,
    .contact-form-premium-wrapper input,
    .contact-form-premium-wrapper select,
    .contact-form-premium-wrapper textarea,
    .contact-form-editorial input,
    .contact-form-editorial select,
    .contact-form-editorial textarea {
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 15px !important;
        min-height: 48px !important;
        border-radius: 8px !important;
    }

    .contact-form-premium-wrapper textarea,
    .contact-form-editorial textarea {
        min-height: 120px !important;
    }

    /* Submit button */
    .contact-form-premium-wrapper .btn-premium-solid,
    .contact-form-editorial .btn-premium-solid {
        width: 100% !important;
        max-width: 340px !important;
        min-height: 52px !important;
        margin: 8px auto 0 auto !important;
    }

    /* Sidebar */
    .sidebar-contact-panel {
        max-width: 420px !important;
        margin: 0 auto !important;
        padding: 24px !important;
        border-radius: 12px !important;
    }

    /* Recommended projects in sidebar */
    .custom-recommended-item {
        gap: 12px !important;
    }

    .custom-recommended-thumb {
        width: 56px !important;
        height: 56px !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
    }

    /* Map */
    .map-section-premium {
        border-radius: 12px !important;
        overflow: hidden !important;
        margin-top: 32px !important;
    }

    #map,
    #map iframe {
        height: 260px !important;
        border-radius: 12px !important;
    }


    /* =============================================
       JOIN US PAGE — join-us.html
       ============================================= */

    /* Portal panel — full width */
    .join-panel-premium {
        max-width: 100% !important;
        margin: 0 auto 40px auto !important;
        padding: 28px 24px !important;
        border-radius: 12px !important;
    }

    .join-panel-premium h2 {
        font-size: 24px !important;
    }

    .join-panel-premium p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    /* CTA group — stacked buttons */
    .cta-group-unq {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .join-portal-btn,
    .copy-portal-btn {
        width: 100% !important;
        max-width: 340px !important;
        min-height: 52px !important;
        justify-content: center !important;
        font-size: 14px !important;
        border-radius: 99px !important;
    }

    /* Portal URL field */
    .portal-url-field {
        max-width: 100% !important;
    }

    .portal-url-field input {
        width: 100% !important;
        font-size: 12px !important;
        padding: 12px 14px !important;
    }

    /* Support grid — SINGLE column */
    .support-grid-premium {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .support-card-premium {
        width: 100% !important;
        max-width: 420px !important;
        margin: 0 auto !important;
        padding: 24px !important;
        height: auto !important;
        border-radius: 12px !important;
    }

    .support-card-premium h3 {
        font-size: 18px !important;
    }

    .support-card-premium p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* Urgent bar */
    .urgent-bar-premium {
        padding: 20px 24px !important;
        border-radius: 12px !important;
        max-width: 420px !important;
        margin: 24px auto 0 auto !important;
    }

    .urgent-bar-premium a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 340px !important;
        min-height: 48px !important;
        margin: 12px auto 0 auto !important;
    }


    /* =============================================
       FOOTER — All Pages
       ============================================= */

    .footer-editorial {
        padding: 64px 0 32px 0 !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        margin-bottom: 40px !important;
    }

    .footer-col h4 {
        margin-bottom: 16px !important;
    }

    .footer-social-icons {
        margin-top: 20px !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
        padding-top: 24px !important;
    }

    .footer-bottom-links a {
        margin: 0 10px !important;
    }

    /* Newsletter form */
    .newsletter-form-group {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .newsletter-form-group input {
        width: 100% !important;
        min-height: 48px !important;
    }

    .newsletter-form-group button {
        width: 100% !important;
        min-height: 48px !important;
    }
}


/* ===========================================
   SMALL MOBILE — max-width: 480px
   Tighter typography, compact spacing
   =========================================== */
@media (max-width: 480px) {

    .editorial-section,
    .editorial-section.alt-bg {
        padding: 48px 0 !important;
    }

    .section-header-editorial h2 {
        font-size: 24px !important;
    }

    .section-header-editorial p {
        font-size: 14px !important;
    }

    .inner-page-banner {
        padding: 100px 16px 40px 16px !important;
    }

    .inner-page-banner h1 {
        font-size: 28px !important;
    }

    /* Hero title */
    .hero-editorial-content h1 {
        font-size: 30px !important;
    }

    /* Column padding tighter */
    .editorial-section [class*="col-"] {
        padding: 0 16px !important;
    }

    /* Card titles */
    .value-card-premium h3,
    .feature-box-editorial h3,
    .uniqueness-point-premium h3,
    .income-card-premium h3,
    .portfolio-card-premium h3 {
        font-size: 18px !important;
    }

    .bento-card h3,
    .cta-panel h2 {
        font-size: 16px !important;
    }

    /* Card padding tighter */
    .value-card-premium,
    .feature-box-editorial,
    .uniqueness-point-premium,
    .income-card-premium,
    .portfolio-card-premium {
        padding: 20px !important;
    }

    /* Trust stats compact */
    .trust-stat-item-premium h3 {
        font-size: 24px !important;
    }

    /* Team card tighter */
    .team-meta {
        padding: 16px !important;
    }

    .team-meta h3 {
        font-size: 16px !important;
    }

    /* Join Us */
    .join-panel-premium {
        padding: 20px 16px !important;
    }

    .join-panel-premium h2 {
        font-size: 22px !important;
    }
}