/* ========================================
   RESPONSIVE - 1024px (Tablet Landscape)
   ======================================== */
@media (max-width: 1024px) {
    /* Navigation */
    .nav { padding: 0 24px;}
    .nav-links { display: none; }
    .nav-burger { display: flex; }
    .nav-cta { display: none; }
   
    
    /* Hero */
    .hero-container {
        grid-template-columns: 1fr;
        gap: 48px;
        text-align: center;
    }
    .section-header
    .hero-left {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        order: 1;
    }
    
    .hero-right { 
        min-height: 400px;
        order: 2;
    }
    
    .custom-bullet-list { align-items: center; }
    .custom-bullet-list li { justify-content: center; }
    .hero-sub { max-width: 500px; text-align: center; }
    .hero-ctas { justify-content: center; }
    
    .grid-scene { max-width: 480px; height: 380px; margin: 0 auto; }
    .main-canvas { width: 240px; height: 300px; left: 45%; }
    .text-label { font-size: 18px; }
    .secondary-canvas { width: 150px; height: 195px; right: 10px; bottom: 20px; }
    .float-palette { top: 40px; left: 10px; padding: 10px 12px; transform: scale(0.9); }
    .float-calendar { right: 0px; top: 10px; min-width: 140px; padding: 10px 12px; transform: scale(0.85); }
    .float-analytics { left: 0px; bottom: 60px; padding: 10px 14px; transform: scale(0.9); }
    
    /* Impact */
    .impact { padding: 50px 0 80px; }
    
    /* Workflow / Bento */
    .workflow { padding: 60px 0 80px; }
    .section-header { padding: 0px; margin-bottom: 40px; }
    .bento-grid { grid-template-columns: repeat(2, 1fr); padding: 0 24px; gap: 10px; }
    .bento-grid .bento-card:nth-child(1) { grid-column: span 2; }
    .bento-grid .bento-card:nth-child(2),
    .bento-grid .bento-card:nth-child(3),
    .bento-grid .bento-card:nth-child(4),
    .bento-grid .bento-card:nth-child(5) { grid-column: span 1; }
    .bento-grid .bento-card:nth-child(6) { grid-column: span 2; }
    .bento-card { min-height: 220px; padding: 20px; }
    .bento-visual-strategy { width: 160px; height: 160px; bottom: -10px; right: -10px; }
    
    /* Orbital rings - tablet */
    .orbit-ring-1 { width: 80px; height: 80px; }
    .orbit-ring-2 { width: 120px; height: 120px; }
    .orbit-ring-3 { width: 160px; height: 160px; }
    .orbit-ring-4 { width: 200px; height: 200px; }
    .orbit-ring-5 { display: none; }
    .orbit-label { font-size: 8px; padding: 4px 8px; }
    .orbit-label:nth-child(5) { display: none; }
    
    /* Planning card */
    .bento-planning .bento-visual-planning { left: -20px; right: -20px; bottom: -16px; height: 60%; }
    .plan-cell { width: 24px; height: 24px; border-radius: 5px; }
    .planning-row { gap: 5px; }
    .planning-grid { gap: 5px; padding: 16px 20px 36px; }
    
    /* Magazine */
    .magazine-gallery { padding: 60px 0 80px; }
    .magazine-container { padding: 0 24px; }
    .magazine-header { grid-template-columns: 1fr; gap: 16px; }
    .header-right { justify-self: start; max-width: 100%; }
    .magazine-spread { min-height: 500px; }
    .meta-block { padding: 16px; }
    .meta-value-large { font-size: 13px; }
    .spec-number { font-size: 14px; }
    .adjustment { grid-template-columns: 55px 1fr 28px; gap: 6px; }
    .adj-label { font-size: 9px; }
    .note-text { font-size: 11px; }
    
    /* Selected Work */
    .selected-work { padding: 60px 0 80px; }
    .selected-work-container { padding: 0 24px; }
    .selected-work .section-header { grid-template-columns: 1fr; gap: 12px; margin-bottom: 40px; }
    .work-showcase { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .work-card.featured, .work-card.standard, .work-card.wide, .work-card.narrow { grid-column: span 1; }
    .work-card.featured { grid-column: span 2; }
    .work-client { font-size: 20px; }
    .work-card.featured .work-client { font-size: 22px; }
    .metric-value { font-size: 20px; }
    .work-card.featured .metric-value { font-size: 24px; }
    
    /* Case Study */
    .case-study-header, .case-study-header-reverse { grid-template-columns: 1fr; min-height: auto; }
    .case-study-image { aspect-ratio: 16 / 9; }
    .case-study-info { padding: 24px; }
    .case-study-info .work-client { font-size: 26px; }
    .case-study-body { padding: 24px; gap: 36px; }
    .service-section { grid-template-columns: 1fr; gap: 24px; }
    .service-section.reverse { direction: ltr; }
    .book-section { grid-template-columns: 1fr; gap: 24px; }
    
    /* Viral */
    .social-header-row { grid-template-columns: 1fr; gap: 24px; }
    .viral-featured-row { grid-template-columns: 200px 1fr; gap: 32px; }
    .viral-metrics-large { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .viral-metric-value { font-size: 28px; }
    .viral-video-title { font-size: 22px; }
    
    /* Engagement */
    .engagement-section { padding: 80px 0 100px; }
    .engagement-grid { grid-template-columns: 1fr; gap: 24px; }
    
    /* Testimonials */
    .testimonials-section { padding: 80px 0 80px; }
    .testimonials-scatter {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }
    .testimonial-card {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100%;
        max-width: 500px;
    }
  
    .testimonial-card:hover { transform: translateY(-4px) !important; }
    .testimonials-decoration, .testimonials-decoration-2 { display: none; }
    .testimonial-card:nth-child(1){width:100%;}
    /* Work Strip */
    .work-strip { height: 240px; }
    .work-strip-item { width: 150px; height: 100px; }
    .work-strip-item:nth-child(1), .work-strip-item:nth-child(7) { display: none; }
    .work-strip-fade-left, .work-strip-fade-right { width: 15%; }
    
    /* Who Section */
    .who-section { padding: 80px 0 100px; }
    .who-section .section-header { grid-template-columns: 1fr; gap: 12px; margin-bottom: 40px; }
    .who-grid { grid-template-columns: 1fr; gap: 48px; }
    
    /* Capabilities */
    .capabilities-section { padding: 80px 0 100px; }
    .capabilities-header { grid-template-columns: 1fr; gap: 12px; margin-bottom: 40px; }
    .capabilities-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .capability-list { grid-template-columns: 1fr; }
    
    /* Footer */
    .footer-cta-section {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 80px 0 60px;
        text-align: center;
    }
    .footer-cta-content { order: 1; }
    .footer-cta-visual { order: 2; height: 240px; }
    .footer-cta-actions { align-items: center; }
    .footer-cta-desc { margin-left: auto; margin-right: auto; }
    .footer-main { grid-template-columns: 1fr; gap: 48px; padding: 48px 0; }
    .footer-brand { max-width: 100%; text-align: center; align-items: center; }
    .footer-social { justify-content: center; }
    .footer-links { grid-template-columns: repeat(3, 1fr); gap: 32px; }
    
    /* Work Grid Compact */
    .work-grid-compact { grid-template-columns: repeat(2, 1fr); }
    
    /* Video Grid */
    .video-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .social-planning-visual { grid-template-columns: 1fr; gap: 20px; }
    .mixed-content-grid { grid-template-columns: repeat(2, 1fr); }
    .content-item.large { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 9; }
    
    /* Digital & Barber Grid */
    .digital-showcase { grid-template-columns: 1fr 1fr; }
    .digital-item.website { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 9; }
    .barber-grid { grid-template-columns: repeat(2, 1fr); }
    .barber-grid .photo-grid-item.featured { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; }
    .graphics-showcase { grid-template-columns: repeat(2, 1fr); }
    .journey-flow { padding: 20px; }
    .journey-step { min-width: 100px; }
}

/* ========================================
   RESPONSIVE - 900px
   ======================================== */
@media (max-width: 900px) {
    /* Impact */
    .stats-minimal {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        max-width: 400px;
    }
    .stat-minimal { padding: 0; max-width: 100%; width: 100%; }
    .stat-minimal:not(:last-child)::after {
        right: 20%;
        left: 20%;
        top: auto;
        bottom: -20px;
        width: auto;
        height: 1px;
        background: linear-gradient(to right, transparent, var(--white-15), transparent);
    }
    .stat-minimal-number { font-size: clamp(36px, 10vw, 48px); }
    
    /* Work Strip */
    .work-strip { height: 200px; }
    .work-strip-item { width: 130px; height: 85px; border-radius: 3px; }
    .work-strip-track { gap: 2px; }
    .work-strip-reflection { display: none; }
    .work-strip-fade-top, .work-strip-fade-bottom { height: 60px; }
}

/* ========================================
   RESPONSIVE - 768px (Tablet Portrait)
   ======================================== */
@media (max-width: 768px) {
    /* Navigation */
    .nav { padding: 0 20px; }
    .nav-content { height: 64px; }
    .logo-mark { width: 32px; height: 32px; }
    .nav-overlay-links a { font-size: 18px; }
    .nav-overlay .nav-cta { padding: 14px 36px; font-size: 13px; }
    
    /* Hero */
    .hero { padding-top: 64px; min-height: auto; }
    .hero-container { grid-template-columns: 1fr; gap: 32px; padding: 24px 20px 40px; }
    .hero-left { text-align: center; align-items: center; order: 1; }
    .hero-right { order: 2; min-height: 320px; display: flex; align-items: center; justify-content: center; }
    .grid-scene { width: 100%; max-width: 360px; height: 300px; }
    .grid-container { display: none; }
    .main-canvas {
        position: absolute;
        width: 180px;
        height: 230px;
        left: 50%;
        top: 50%;
        transform: translate(-60%, -50%);
        border-radius: 10px;
    }
    .secondary-canvas {
        position: absolute;
        width: 120px;
        height: 155px;
        right: 10%;
        bottom: 10%;
        left: auto;
        top: auto;
        transform: none;
        border-radius: 8px;
    }
    .text-label { font-size: 14px; }
    .selection-box { inset: -8px -12px; }
    .secondary-label span { font-size: 8px; padding: 4px 8px; }
    .float-palette { display: none; }
    .float-calendar {
        position: absolute;
        top: 0;
        right: 5%;
        left: auto;
        transform: scale(0.75);
        transform-origin: top right;
        min-width: 130px;
        padding: 8px 10px;
    }
    .float-analytics {
        position: absolute;
        bottom: 5%;
        left: 5%;
        right: auto;
        transform: scale(0.8);
        transform-origin: bottom left;
        padding: 10px 12px;
        min-width: 110px;
    }
    .analytics-value { font-size: 20px; }
    .calendar-month { font-size: 11px; }
    .calendar-grid .day { font-size: 6px; padding: 2px 1px; }
    .calendar-header span { font-size: 5px; }
    .calendar-legend { display: none; }
    .hero-title { font-size: clamp(32px, 8vw, 42px); margin-bottom: 20px; }
    .hero-sub { font-size: 14px; max-width: 100%; margin-bottom: 24px; }
    .hero-ctas { flex-direction: column; width: 100%; gap: 12px; }
    .btn-primary { width: 100%; justify-content: center; padding: 14px 24px; }
    .btn-ghost { justify-content: center; }
    .curved-underline::after { bottom: -12px; height: 12px; }
    .custom-bullet-list li { justify-content: center; font-size: 0.8rem; }
    
    /* Impact */
    .impact { padding: 48px 0 64px; }
    .stats-minimal { flex-direction: column; gap: 32px; padding: 0 20px; }
    .stat-minimal { padding: 0; width: 100%; max-width: 100%; }
    .stat-minimal-number { font-size: clamp(32px, 10vw, 44px); }
    .stat-minimal-context { max-width: 100%; font-size: 13px; }
    .stat-minimal:not(:last-child)::after { left: 20%; right: 20%; top: auto; bottom: -16px; width: auto; height: 1px; }
    
    /* Section Divider */
    /* .section-divider { padding: 24px 0; height: auto; } */
    
    /* Workflow / Bento */
    .workflow { padding: 48px 0 64px; }
    .section-header { grid-template-columns: 1fr; gap: 12px; padding: 0 16px; margin-bottom: 32px; }
    .section-title { font-size: clamp(28px, 8vw, 36px); }
    .section-intro { max-width: 100%; }
    .bento-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 16px; }
    .bento-span-2, .bento-span-1 { grid-column: span 1; }
    .bento-grid .bento-card { grid-column: span 1 !important; }
    .bento-card { min-height: 150px; padding: 20px; }
    .bento-header h3 { font-size: 16px; }
    .bento-body p { font-size: 12px; max-width: 100%; }
    .bento-visual { opacity: 0.5; transform: scale(0.8); botton:15px }
    .bento-visual-strategy { width: 140px; height: 140px; }
    .bento-cta h3 { font-size: 16px; }
    .bento-cta-button { padding: 12px 20px; font-size: 12px; }
    
    /* Orbital rings - mobile */
    .orbit-ring-1 { width: 60px; height: 60px; }
    .orbit-ring-2 { width: 90px; height: 90px; }
    .orbit-ring-3 { width: 120px; height: 120px; }
    .orbit-ring-4 { width: 150px; height: 150px; }
    .orbit-label:nth-child(n+5) { display: none; }
    .diagram-orb { width: 80px; height: 40px; }
    
    /* Planning card */
    .bento-planning .bento-visual-planning { left: -18px; right: -18px; bottom: -14px; height: 55%; }
    .plan-cell { width: 22px; height: 22px; border-radius: 4px; }
    .planning-row { gap: 4px; }
    .planning-grid { gap: 4px; padding: 12px 18px 32px; }
    
    /* Production */
    .bento-visual-production { bottom: -50px; left: 14px; right: 14px; height: 120px; }
    .vf-hud { font-size: 7px; inset: 10px; }
    .vf-focus { width: 36px; height: 36px; }
    .viewfinder::before, .viewfinder::after, .vf-corner { width: 18px; height: 18px; }
    
    /* Analytics */
    .bento-visual-analytics { height: 90px; left: 20px; right: 20px; bottom: 20px; }
    .graph-node { width: 8px; height: 8px; }
    .graph-line { stroke-width: 2; }

    .bento-visual {
      display: none;
    }
    
    /* Magazine */
    .magazine-gallery { padding: 48px 0; }
    .magazine-container { padding: 0 16px; }
    .magazine-header { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; padding-bottom: 24px; }
    .magazine-title { font-size: clamp(28px, 8vw, 42px); }
    .header-right { max-width: 100%; }
    .magazine-intro { font-size: 13px; }
    .magazine-spread { display: flex; flex-direction: column; gap: 12px; min-height: auto; aspect-ratio: auto; }
    .spread-item { aspect-ratio: 16 / 10; width: 100%; }
    .spread-1, .spread-2, .spread-3, .spread-4, .spread-5 { grid-column: auto; grid-row: auto; }
    .meta-block { padding: 16px; }
    .meta-1, .meta-2 { grid-column: auto; grid-row: auto; }
    .magazine-statement { flex-direction: column; text-align: center; gap: 8px; padding: 16px; }
    .statement-text { font-size: 14px; }
    
    /* Selected Work */
    .selected-work { padding: 48px 0 64px; }
    .selected-work-container { padding: 0 16px; }
    .work-showcase { grid-template-columns: 1fr; gap: 24px; }
    .work-card.featured, .work-card.standard, .work-card.wide, .work-card.narrow, .work-card.case-study { grid-column: span 1; }
    
    /* Case Study */
    .case-study-header, .case-study-header-reverse { grid-template-columns: 1fr; min-height: auto; }
    .case-study-header .case-study-image, .case-study-header-reverse .case-study-image { order: 1; aspect-ratio: 16 / 10; }
    .case-study-header .case-study-info, .case-study-header-reverse .case-study-info { order: 2; padding: 20px; }
    .case-study-info .work-client { font-size: clamp(20px, 6vw, 26px); }
    .case-study-info .work-description { font-size: 13px; }
    .case-study-stats { flex-wrap: wrap; gap: 16px; }
    .case-stat-value { font-size: 20px; }
    .case-study-services { flex-wrap: wrap; }
    .case-study-expand { padding: 12px 16px; }
    .expand-text { font-size: 12px; }
    .case-study-body { padding: 16px; gap: 32px; }
    .service-section { grid-template-columns: 1fr; gap: 20px; }
    .service-section.reverse { direction: ltr; }
    .service-title { font-size: clamp(18px, 5vw, 24px); }
    .service-description { font-size: 13px; }
    .photo-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .photo-grid-item.featured { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; }
    .book-section { grid-template-columns: 1fr; gap: 20px; }
    .book-images { grid-template-columns: 1fr 1fr; gap: 8px; }
    .book-item.cover { grid-row: span 1; }
    .book-specs { flex-wrap: wrap; gap: 16px; padding: 16px 0; }
    .book-spec-value { font-size: 20px; }
    .case-study-footer { flex-direction: column; gap: 16px; padding: 16px; }
    .case-study-tags { justify-content: center; }
    
    /* Viral */
    .viral-showcase { padding: 16px; }
    .viral-showcase-header { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 20px; padding-bottom: 16px; }
    .viral-badge-large { font-size: 10px; padding: 8px 12px; }
    .viral-featured-row { grid-template-columns: 1fr; gap: 20px; }
    .viral-video-player { max-width: 200px; margin: 0 auto; }
    .viral-video-details { text-align: center; align-items: center; }
    .viral-video-title { font-size: 18px; }
    .viral-video-desc { font-size: 12px; text-align: center; }
    .viral-metrics-large { justify-content: center; gap: 16px; flex-wrap: wrap; }
    .viral-metric-value { font-size: 22px; }
    .viral-platform { justify-content: center; }
    .viral-videos-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .viral-video-card-info { padding: 10px; }
    .card-metric-value { font-size: 14px; }
    
    /* See More Work */
    .work-see-more-wrapper { margin-top: -40px; padding-top: 80px; }
    .work-fade-overlay { height: 100px; left: -16px; right: -16px; }
    .see-more-button { padding: 14px 24px; }
    .see-more-text { font-size: 13px; }
    .work-grid-compact { grid-template-columns: 1fr; gap: 16px; }
    .work-card.compact .work-content { padding: 14px 16px 16px; }
    .work-card.compact .work-client { font-size: 16px; }
    
    /* Engagement */
    .engagement-section { padding: 64px 0 80px; }
    .engagement-container { padding: 0 16px; }
    .engagement-grid { grid-template-columns: 1fr; gap: 24px; }
    .engagement-card { padding: 24px; }
    .engagement-card.featured { margin-top: 16px; }
    .featured-badge { top: -10px; right: 20px; font-size: 9px; padding: 5px 12px; }
    .engagement-title { font-size: clamp(22px, 6vw, 28px); }
    .engagement-desc { font-size: 13px; }
    .engagement-features li { font-size: 12px; }
    .integration-benefits { padding: 16px; }
    .integration-benefits p { font-size: 12px; }
    
    /* Testimonials */
    .testimonials-section { padding: 64px 0; }
    .testimonials-container { padding: 0 16px; }
    .testimonials-header { margin-bottom: 40px; }
    .testimonials-header-intro { font-size: 13px; }
    .testimonials-scatter { height: auto; display: flex; flex-direction: column; gap: 16px; }
    .testimonial-card {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100%;
        max-width: 100%;
        padding: 20px;
    }
    .quote-text { font-size: 14px; }
    .quote-text-large { font-size: 15px; }
    .quote-context { font-size: 12px; }
    .author-avatar { width: 32px; height: 32px; font-size: 11px; }
    .author-name { font-size: 12px; }
    .author-details { font-size: 10px; }
    .testimonials-decoration, .testimonials-decoration-2 { display: none; }
    
    /* Work Strip */
    .work-strip { height: 180px; }
    .work-strip-item { width: 120px; height: auto; aspect-ratio: 3/4; }
    .work-strip-track { gap: 8px; transform: translate(-50%, -50%) rotateX(8deg); }
    .work-strip-fade-top, .work-strip-fade-bottom { height: 50px; }
    .work-strip-fade-left, .work-strip-fade-right { width: 15%; }
    .work-strip-item:nth-child(1), .work-strip-item:nth-child(7) { display: none; }
    
    /* Who Section */
    .who-section { padding: 64px 0 80px; }
    .who-container { padding: 0 16px; }
    .who-section .section-header { grid-template-columns: 1fr; gap: 12px; margin-bottom: 40px; }
    .who-grid { grid-template-columns: 1fr; gap: 40px; }
    .industry-item { padding: 16px; }
    .industry-icon { width: 40px; height: 40px; }
    .industry-icon svg { width: 20px; height: 20px; }
    .industry-info h4 { font-size: 14px; }
    .industry-info p { font-size: 12px; }
    .values-label { font-size: 18px; }
    .value-content h4 { font-size: 15px; }
    .value-content p { font-size: 12px; }
    
    /* Capabilities */
    .capabilities-section { padding: 64px 0 80px; }
    .capabilities-container { padding: 0 16px; }
    .capabilities-header { grid-template-columns: 1fr; gap: 12px; margin-bottom: 40px; }
    .capabilities-grid { grid-template-columns: 1fr; gap: 12px; }
    .capability-card { padding: 20px; }
    .capability-icon { width: 42px; height: 42px; }
    .capability-icon svg { width: 20px; height: 20px; }
    .capability-title { font-size: 18px; }
    .capability-desc { font-size: 12px; }
    .capability-list { grid-template-columns: 1fr; gap: 6px; }
    .capability-list li { font-size: 11px; }
    .capabilities-note { flex-direction: column; gap: 16px; padding: 16px; }
    .note-icon { width: 40px; height: 40px; }
    .note-content h4 { font-size: 14px; }
    .note-content p { font-size: 12px; }
    
    /* Footer */
    .footer-cta-section { grid-template-columns: 1fr; gap: 40px; padding: 64px 0 48px; text-align: center; }
    .footer-cta-content { order: 1; }
    .footer-cta-visual { order: 2; height: 180px; }
    .footer-cta-title { font-size: clamp(28px, 8vw, 36px); }
    .footer-cta-desc { font-size: 14px; margin-left: auto; margin-right: auto; }
    .footer-cta-actions { align-items: center; }
    .cta-primary { width: 100%; justify-content: center; padding: 16px 24px; }
    .visual-orb { width: 120px; height: 120px; }
    .visual-ring:nth-child(1) { width: 80px; height: 80px; }
    .visual-ring:nth-child(2) { width: 120px; height: 120px; }
    .visual-ring:nth-child(3) { width: 160px; height: 160px; }
   .footer-container { padding: 0 16px; }
    .footer-main { grid-template-columns: 1fr; gap: 40px; padding: 40px 0; }
    .footer-brand { text-align: center; max-width: 100%; align-items: center; }
    .footer-logo-img { width: 44px; height: 44px; }
    .footer-tagline { font-size: 13px; max-width: 300px; }
    .footer-social { justify-content: center; margin-top: 8px; }
    .footer-social a { width: 44px; height: 44px; }
    .footer-links { grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
    .footer-column { align-items: center; gap: 12px; }
    .footer-column a:hover { transform: none; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; padding: 20px 0 28px; }
    .footer-bottom-links { justify-content: center; }
    
    /* Touch Targets */
    .btn-primary, .btn-ghost, .nav-cta, .cta-primary, .see-more-button,
    .case-study-expand, .footer-cta, .bento-cta-button, .work-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .nav-overlay-links a { padding: 16px 0; min-height: 48px; }
    .service-tag { min-height: 32px; display: inline-flex; align-items: center; }
    
    /* Video & Planning */
    .video-grid { gap: 8px; }
    .video-play-icon { width: 40px; height: 40px; }
    .video-play-icon svg { width: 14px; height: 14px; }
    .social-planning-visual { padding: 18px; }
    .planning-feature { font-size: 12px; gap: 10px; }
    .planning-feature svg { width: 18px; height: 18px; }
    .mixed-content-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .content-item.large { grid-column: span 2; }
    
    /* Digital & Content */
    .digital-services-list { gap: 10px; margin-top: 16px; padding-top: 12px; }
    .digital-service-item { font-size: 12px; gap: 10px; }
    .digital-service-item svg { width: 16px; height: 16px; }
    .digital-showcase { grid-template-columns: 1fr; }
    .digital-item.website, .digital-item.google, .digital-item.email {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 16 / 10;
    }
    .content-stats { gap: 16px; padding: 16px 0; margin-top: 16px; }
    .content-stat-value { font-size: 20px; }
    
    /* Journey Flow */
    .journey-flow { flex-direction: column; align-items: stretch; gap: 0; padding: 20px; }
    .journey-step { flex-direction: row; text-align: left; min-width: auto; gap: 16px; }
    .journey-step-content { align-items: flex-start; }
    .journey-connector {
        width: 2px;
        height: 24px;
        min-width: 2px;
        margin-top: 0;
        margin-left: 17px;
        background: linear-gradient(180deg, var(--accent), var(--white-20));
    }
    .graphics-showcase { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ========================================
   RESPONSIVE - 480px (Mobile)
   ======================================== */
@media (max-width: 480px) {
    /* Navigation */
    .nav { padding: 0 16px; }
    .nav-content { height: 60px; }
    .logo-mark { width: 30px; height: 30px; }
    .nav-burger { width: 36px; height: 36px; padding: 8px; }
    .nav-overlay-content { padding: 24px 20px; gap: 40px; }
    .nav-overlay-links { gap: 20px; }
    .nav-overlay-links a { font-size: 17px; }
    
    /* Hero */
    .hero-container { padding: 20px 16px 32px; gap: 24px; }
    .hero-left { order: 1; }
    .hero-right { order: 2; min-height: 280px; }
    .grid-scene { max-width: 300px; height: 260px; }
    .main-canvas { width: 150px; height: 195px; border-radius: 8px; }
    .secondary-canvas { width: 100px; height: 130px; right: 8%; bottom: 8%; border-radius: 6px; }
    .text-label { font-size: 12px; }
    .selection-box { inset: -6px -10px; border-width: 1px; }
    .selection-box::before, .selection-box::after { width: 6px; height: 6px; }
    .float-calendar { transform: scale(0.65); top: -5px; right: 0; }
    .float-analytics { transform: scale(0.7); bottom: 0; left: 0; }
    .analytics-value { font-size: 18px; }
    .analytics-label { font-size: 7px; }
    .analytics-change { font-size: 8px; }
    .hero-title { font-size: clamp(28px, 9vw, 36px); }
    .hero-sub { font-size: 13px; margin-bottom: 20px; }
    .btn-primary { padding: 12px 24px; font-size: 13px; }
    .custom-bullet-list li { font-size: 0.75rem; }
    .curved-underline::after { bottom: -10px; height: 10px; }
    
    /* Impact */
    .impact { padding: 48px 0 64px; }
    .stats-minimal { padding: 0 16px; gap: 32px; }
    .stat-minimal-number { font-size: 36px; margin-bottom: 10px; }
    .stat-minimal-label { font-size: 9px; letter-spacing: 0.12em; }
    .stat-minimal-context { font-size: 12px; max-width: 240px; }
    .stat-minimal:not(:last-child)::after { bottom: -16px; }
    
    /* Bento */
    .section-header { padding: 0px; }
    .section-title { font-size: 28px; }
    .bento-grid { padding: 0 16px; gap: 10px; }
    .bento-card { padding: 16px; min-height: 180px; }
    .bento-icon { width: 36px; height: 36px; }
    .bento-icon svg { width: 16px; height: 16px; }
    .bento-header-left { gap: 10px; }
    .bento-number { font-size: 10px; }
    .bento-visual-strategy { width: 120px; height: 120px; }
    .orbit-label:nth-child(n+4) { display: none; }
    
    /* Planning */
    .bento-planning .bento-visual-planning { left: -16px; right: -16px; bottom: -12px; }
    .plan-cell { width: 18px; height: 18px; border-radius: 3px; }
    .planning-row { gap: 3px; }
    .planning-grid { gap: 3px; padding: 10px 16px 28px; }
    .planning-row .plan-cell:nth-child(9) { display: none; }
    
    /* Production */
    .bento-visual-production { bottom: -40px; left: 12px; right: 12px; height: 100px; }
    .vf-hud { font-size: 6px; inset: 8px; }
    .vf-focus { width: 28px; height: 28px; }
    .vf-settings { display: none; }
    .viewfinder::before, .viewfinder::after, .vf-corner { width: 14px; height: 14px; }
    
    /* Analytics */
    .bento-visual-analytics { height: 70px; left: 16px; right: 16px; bottom: 16px; }
    .graph-node { width: 6px; height: 6px; border-width: 1.5px; }
    .graph-line { stroke-width: 1.5; }
    
    /* Magazine */
    .magazine-container { padding: 0 12px; }
    .magazine-title { font-size: 28px; }
    .meta-block { padding: 12px; }
    .meta-value-large { font-size: 12px; }
    .spec-number { font-size: 14px; }
    .adjustment { grid-template-columns: 45px 1fr 24px; }
    .adj-label { font-size: 8px; }
    .adj-value { font-size: 9px; }
    .note-text { font-size: 10px; }
    .strip-item { font-size: 10px; }
    .magazine-statement { padding: 16px 20px; }
    .statement-text { font-size: 14px; }
    
    /* Selected Work */
    .selected-work-container { padding: 0 12px; }
    .case-study-info { padding: 16px; }
    .case-study-info .work-client { font-size: 20px; }
    .case-study-stats { gap: 12px; }
    .case-stat-value { font-size: 18px; }
    .case-stat-label { font-size: 8px; }
    .case-study-body { padding: 16px; gap: 28px; }
    .service-title { font-size: 20px; }
    .service-description { font-size: 12px; }
    .service-tag { font-size: 9px; padding: 4px 8px; }
    .photo-grid { gap: 6px; }
    .book-images { gap: 6px; }
    
    /* Journey */
    .journey-flow { padding: 16px; }
    .journey-step-number { width: 32px; height: 32px; font-size: 12px; }
    .journey-step-title { font-size: 12px; }
    .journey-step-desc { font-size: 9px; }
    .journey-connector { margin-left: 15px; height: 20px; }
    .graphics-showcase { grid-template-columns: 1fr 1fr; }
    .graphic-item { aspect-ratio: 1; }
    
    /* Viral */
    .viral-showcase { padding: 12px; }
    .viral-video-player { max-width: 160px; }
    .viral-video-title { font-size: 16px; }
    .viral-metric-value { font-size: 18px; }
    .viral-metric-label { font-size: 8px; }
    .viral-videos-grid { grid-template-columns: 1fr 1fr; }
    .card-metric-value { font-size: 12px; }
    .card-metric-label { font-size: 7px; }
    
    /* See More */
    .see-more-button { padding: 12px 24px; }
    .see-more-text { font-size: 12px; }
    .work-grid-compact { grid-template-columns: 1fr; gap: 12px; }
    .work-card.compact .work-content { padding: 14px 16px 16px; }
    .work-card.compact .work-client { font-size: 15px; }
    
    /* Engagement */
    .engagement-container { padding: 0 12px; }
    .engagement-card { padding: 20px; }
    .engagement-title { font-size: 20px; }
    .engagement-features { gap: 10px; }
    .engagement-features svg { width: 16px; height: 16px; }
    
    /* Testimonials */
    .testimonials-section { padding: 64px 0 80px; }
    .testimonials-container { padding: 0 16px; }
    .testimonial-card { padding: 20px; }
    .quote-text { font-size: 14px; }
    .quote-text-large { font-size: 15px; }
    .author-avatar { width: 32px; height: 32px; font-size: 11px; }
    .author-name { font-size: 12px; }
    .author-details { font-size: 10px; }
    
    /* Work Strip */
    .work-strip { height: 240px; }
    .work-strip-item { width: 140px; }
    .work-strip-track { gap: 6px; transform: translate(-50%, -50%) rotateX(5deg); }
    .work-strip-fade-top, .work-strip-fade-bottom { height: 35px; }
    .work-strip-item:nth-child(2), .work-strip-item:nth-child(6) { display: none; }
    
    /* Who Section */
    .who-container { padding: 0 12px; }
    .industry-item { flex-direction: column; gap: 12px; padding: 14px; }
    .values-list { gap: 20px; }
    .value-number { font-size: 10px; }
    
    /* Capabilities */
    .capabilities-container { padding: 0 12px; }
    .capability-card { padding: 16px; gap: 12px; }
    .capability-title { font-size: 16px; }
    .capability-list li { font-size: 10px; }
    
    /* Footer */
    .footer-cta-section { padding: 48px 0 40px; }
    .footer-cta-title { font-size: 26px; }
    .footer-cta-desc { font-size: 13px; }
    .footer-cta-visual { height: 140px; }
    .visual-orb { width: 80px; height: 80px; }
    .visual-ring:nth-child(1) { width: 60px; height: 60px; }
    .visual-ring:nth-child(2) { width: 100px; height: 100px; }
    .visual-ring:nth-child(3) { width: 140px; height: 140px; }
    .footer-container { padding: 0 12px; }
    .footer-logo-img { width: 40px; height: 40px; }
    .footer-tagline { font-size: 12px; }
    .footer-social a { width: 40px; height: 40px; }
    .footer-social svg { width: 16px; height: 16px; }
    .footer-links { grid-template-columns: 1fr; gap: 28px; }
    .footer-column { gap: 10px; }
    .footer-column a, .footer-column span { font-size: 13px; }
    .footer-column-title { font-size: 9px; margin-bottom: 2px; }
    .footer-bottom { padding: 16px 0 24px; gap: 10px; }
    .footer-copyright { font-size: 11px; }
    .footer-bottom-links a { font-size: 11px; }
    
    /* Video & Planning */
    .video-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .video-item { border-radius: 8px; }
    .video-play-icon { width: 32px; height: 32px; }
    .video-play-icon svg { width: 12px; height: 12px; margin-left: 2px; }
    .social-planning-visual { padding: 14px; }
    .calendar-day { border-radius: 4px; font-size: 10px; }
    .calendar-day-label { font-size: 7px; }
    .planning-feature { font-size: 11px; }
    .mixed-content-grid { gap: 6px; }
    .content-item { border-radius: 8px; }
    .content-type-label { font-size: 7px; padding: 3px 6px; }
    
    /* Digital & Content */
    .digital-service-item { font-size: 11px; }
    .barber-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
    .barber-grid .photo-grid-item.featured { grid-column: span 2; }
    .content-stats { gap: 12px; }
    .content-stat-value { font-size: 18px; }
    
    /* Text Overflow */
    h1, h2, h3, h4, h5, h6,
    .hero-title, .section-title, .magazine-title, .engagement-title,
    .capability-title, .service-title, .work-client, .footer-cta-title {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    p, li, span { word-wrap: break-word; overflow-wrap: break-word; }
}

/* ========================================
   RESPONSIVE - 360px (Small Mobile)
   ======================================== */
@media (max-width: 360px) {
    .hero-left { order: 1; }
    .hero-right { min-height: 240px; order: 2; }
    .grid-scene { max-width: 260px; height: 220px; }
    .main-canvas { width: 130px; height: 170px; }
    .secondary-canvas { width: 85px; height: 110px; }
    .float-calendar, .float-analytics { transform: scale(0.6); }
    .text-label { font-size: 10px; }
}