/* ==========================================================================
   RESPONSIVE ADJUSTMENTS & REFINEMENTS
   UDARAX — Systems & Software Portfolio
   ========================================================================== */

/* --------------------------------------------------------------------------
   LARGE TABLETS & SMALL DESKTOPS (< 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  :root {
    --container-max: 960px;
  }

  .client-brands-grid {
    gap: 1rem;
  }

  .brand-card-even {
    flex: 0 0 calc((100% - (4 * 1rem)) / 5);
    max-width: calc((100% - (4 * 1rem)) / 5);
  }
}

/* --------------------------------------------------------------------------
   TABLETS & HORIZONTAL PHONES (< 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  :root {
    --header-height: 70px;
  }

  .site-nav {
    display: none;
  }

  .mobile-nav-toggle {
    display: flex;
  }

  /* --- FIVENEURALS HERO BANNER: TABLET REFINEMENT --- */
  .hero-fn-banner {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .hero-fn-banner .banner-content-area {
    padding-top: 10px !important;
    padding-bottom: 20px !important;
    max-width: 760px !important;
    margin: 0 auto !important;
  }

  .hero-fn-banner .top-shape,
  .hero-fn-banner .banner-shape-area {
    display: none !important;
  }

  .hero-ambient-glow {
    width: 85vw !important;
    height: 260px !important;
    top: 0 !important;
    filter: blur(45px) !important;
    opacity: 0.7 !important;
  }

  /* Live Availability Tag: Clean Minimal Technical Indicator (No Bubble Pill) */
  .hero-status-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.25rem 0 !important;
    margin-bottom: 1rem !important;
    border-radius: 0 !important;
    gap: 0.5rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .hero-status-tag .status-pulse-dot {
    flex-shrink: 0;
    width: 7px !important;
    height: 7px !important;
    background-color: #10b981 !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.45) !important;
  }

  .hero-status-tag .status-text {
    font-family: var(--font-mono) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.08em !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #059669 !important;
    text-transform: uppercase !important;
  }

  [data-theme="dark"] .hero-status-tag .status-text {
    color: #34d399 !important;
  }

  /* Clean Professional Hero Title Lockup */
  .fn-hero-title {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto 0.25rem !important;
  }

  .fn-hero-title .left-area,
  .fn-hero-title .right-area {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    padding: 0.45rem 1rem !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-subtle) !important;
    background: var(--bg-surface) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .fn-hero-title .square-shape,
  .fn-hero-title .left-area .arrow-track,
  .fn-hero-title .right-area .arrow-track {
    display: none !important;
  }

  .fn-hero-title .text {
    font-family: var(--font-mono) !important;
    font-size: clamp(0.8rem, 2.2vw, 0.95rem) !important;
    letter-spacing: 0.09em !important;
    white-space: nowrap !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: initial !important;
    background: none !important;
    text-transform: uppercase !important;
  }

  [data-theme="dark"] .fn-hero-title .text {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: initial !important;
    background: none !important;
  }

  .fn-hero-title .fn-hero-tile {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    background: var(--bg-surface) !important;
    border: 1px solid rgba(255, 85, 0, 0.25) !important;
    box-shadow: 0 2px 8px rgba(255, 85, 0, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .fn-hero-title .fn-hero-tile img {
    width: 60% !important;
    height: 60% !important;
    object-fit: contain !important;
  }

  /* Editorial Lead & Subheadline */
  .hero-fn-banner .text-area {
    margin: 1.35rem auto 0 !important;
    max-width: 620px !important;
  }

  .hero-fn-banner .hero-subheadline {
    font-size: clamp(1.6rem, 4.2vw, 2.25rem) !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 0.75rem !important;
    color: var(--text-primary) !important;
    text-wrap: balance !important;
  }

  .hero-fn-banner .hero-subheadline .hero-highlight {
    background: linear-gradient(135deg, #ff5500 0%, #ff7a1a 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline !important;
  }

  .hero-fn-banner .desc {
    font-size: clamp(0.92rem, 2vw, 1rem) !important;
    line-height: 1.62 !important;
    margin-bottom: 1.5rem !important;
    padding: 0 0.5rem !important;
    color: var(--text-secondary) !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-wrap: pretty !important;
  }

  /* Action Buttons: Side-by-Side on Tablet */
  .hero-fn-banner .button-area {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    gap: 0.85rem !important;
  }

  .hero-fn-banner .button-area .wpr-btn {
    width: auto !important;
    min-width: 190px !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    padding: 0.75rem 1.4rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
  }

  .hero-fn-banner .button-area .wpr-btn:active {
    transform: scale(0.98) !important;
  }

  /* Primary Button (Start a Project) */
  .hero-fn-banner .button-area .btn-primary {
    order: 1 !important;
    background: linear-gradient(135deg, #ff5500 0%, #ff6e1a 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(255, 85, 0, 0.22) !important;
    color: #ffffff !important;
    gap: 0.5rem !important;
  }

  .hero-fn-banner .button-area .btn-primary.with-icon .inner {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .hero-fn-banner .button-area .btn-primary.with-icon .icon {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.95rem !important;
    margin-left: 0.15rem !important;
  }

  /* Secondary Button (Explore Selected Work) */
  .hero-fn-banner .button-area .btn-white {
    order: 2 !important;
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-primary) !important;
    gap: 0.5rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  }

  /* Technical Credibility Stats Band: Clean Tablet Grid */
  .hero-fn-banner .hero-stats-band,
  .hero-stats-band {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
    padding: 1.35rem 1.5rem !important;
    margin: 2rem auto 0 !important;
    max-width: 720px !important;
    border-radius: 16px !important;
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03) !important;
  }

  .hero-stats-band .square-shape {
    display: none !important;
  }

  .hero-stats-band .stat-item {
    padding: 0.25rem 0.5rem !important;
    text-align: left !important;
  }

  .hero-stats-band .stat-number {
    font-size: clamp(1.65rem, 3.6vw, 2.1rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: var(--text-primary) !important;
    font-family: var(--font-sans) !important;
    font-feature-settings: "tnum" 1 !important;
    display: block !important;
    letter-spacing: -0.02em !important;
  }

  .hero-stats-band .stat-label {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    color: var(--text-muted) !important;
    margin-top: 0.35rem !important;
    display: block !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
  }

  .project-body {
    padding: 1.5rem;
  }

  .editorial-quote {
    font-size: 1.2rem;
  }

  .client-brands-grid {
    gap: 0.85rem;
  }

  .brand-card-even {
    flex: 0 0 calc((100% - (3 * 0.85rem)) / 4);
    max-width: calc((100% - (3 * 0.85rem)) / 4);
    height: 100px;
    padding: 0.65rem 0.8rem;
  }

  .brand-logo-img.brand-logo-wordmark {
    max-height: 36px;
    max-width: 92%;
  }

  .brand-logo-img.brand-logo-wide {
    max-height: 52px;
    max-width: 92%;
  }

  .brand-logo-img.brand-logo-square {
    max-height: 62px;
    max-width: 62px;
  }

  .brand-logo-img.brand-logo-tall {
    max-height: 68px;
    max-width: 68px;
  }

  /* --- Core Services Showcase (We Engineer We Transform) Tablet --- */
  .services-transform-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    min-height: auto !important;
    gap: 1.15rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .service-transform-card {
    border: 1px solid var(--border-subtle) !important;
    border-radius: 18px !important;
    min-height: 420px !important;
    padding: 2.2rem 1.8rem !important;
    flex: none !important;
  }

  .service-transform-card .service-desc {
    opacity: 1 !important;
    max-height: none !important;
    transform: none !important;
    margin-top: 1.25rem !important;
    font-size: 0.88rem !important;
    color: var(--text-secondary) !important;
  }

  [data-theme="dark"] .service-transform-card .service-desc {
    color: #94a3b8 !important;
  }

  .service-transform-card.is-active .service-desc {
    color: rgba(255, 255, 255, 0.88) !important;
  }

  .service-action-btn {
    opacity: 1 !important;
    transform: scale(1) !important;
    pointer-events: auto !important;
  }
}

/* --------------------------------------------------------------------------
   MOBILE DEVICES & COMPACT TABLETS (< 768px)
   Comprehensive polish for modern iOS and Android viewports
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  :root {
    --header-height: 64px;
  }

  /* Prevent unintended horizontal scroll / side gutters */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative;
  }

  /* Section Spacing - reduced to 20px across the whole page */
  .section-spacing {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .section-spacing-sm {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .client-brands-section {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  /* Reduce space between section headers and card grids to 20px */
  .section-spacing .mb-5,
  .section-spacing-sm .mb-5,
  .client-brands-section .mb-5,
  .site-footer .mb-5 {
    margin-bottom: 20px !important;
  }

  .client-brands-grid {
    margin-top: 16px !important;
  }
  .container{
    padding: 30px !important;
  }

  .container-editorial,
  .container-narrow {
    padding: 30px !important;
  }

  .container-editorial {
    padding: 30px !important;
  }

  /* Typography scale refinements */
  .display-title-md {
    font-size: clamp(1.45rem, 5.6vw, 1.95rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.025em !important;
  }

  .section-eyebrow {
    font-size: 0.7rem !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 0.45rem !important;
  }

  /* --- Top Announcement Bar --- */
  .header-top-bar {
    font-size: clamp(0.6rem, 2.5vw, 0.7rem) !important;
    padding: 0.35rem 0.75rem !important;
    letter-spacing: 0.05em !important;
    line-height: 1.3 !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .header-top-bar span:nth-child(2) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 3.5rem);
  }

  /* --- Main Sticky Header --- */
  .header-inner {
    height: 64px !important;
    padding: 0 0.15rem;
  }

  .brand-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .brand-name-main {
    font-size: 1rem !important;
  }

  .brand-name-sub {
    font-size: 0.625rem !important;
  }

  .theme-toggle-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 0.95rem !important;
  }

  .mobile-nav-toggle {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.2rem !important;
    border-radius: 8px !important;
  }

  /* --- Mobile Offcanvas Drawer --- */
  .mobile-drawer {
    width: min(340px, 86vw) !important;
    padding: 1.5rem 1.25rem !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-drawer-nav {
    gap: 0.4rem !important;
    margin-top: 1.5rem !important;
  }

  .mobile-drawer-nav .nav-link-custom {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    padding: 0.65rem 0.85rem !important;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .mobile-drawer-nav .nav-link-custom:hover,
  .mobile-drawer-nav .nav-link-custom.active {
    background-color: var(--accent-subtle);
    color: var(--accent-primary) !important;
  }

  .mobile-drawer-nav .nav-link-custom.active::after {
    display: none;
  }

  /* --- FIVENEURALS SIGNATURE HERO BANNER: MOBILE REFINEMENT --- */
  .hero-fn-banner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .hero-fn-banner .banner-content-area {
    padding-top: 6px !important;
    padding-bottom: 15px !important;
  }

  .hero-fn-banner .top-shape,
  .hero-fn-banner .banner-shape-area {
    display: none !important;
  }

  .hero-ambient-glow {
    width: 92vw !important;
    height: 240px !important;
    top: 0 !important;
    filter: blur(40px) !important;
    opacity: 0.7 !important;
  }

  /* Live Availability: Clean Minimal Technical Indicator (No Pill, No Bubble) */
  .hero-status-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.2rem 0 !important;
    margin-bottom: 0.85rem !important;
    border-radius: 0 !important;
    gap: 0.45rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .hero-status-tag .status-pulse-dot {
    flex-shrink: 0;
    width: 6px !important;
    height: 6px !important;
    background-color: #10b981 !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5) !important;
  }

  .hero-status-tag .status-text {
    font-family: var(--font-mono) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.1em !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #059669 !important;
    text-transform: uppercase !important;
  }

  [data-theme="dark"] .hero-status-tag .status-text {
    color: #34d399 !important;
  }

  /* SOFTWARE · [LOGO] · ENGINEER lockup: visually hidden on mobile
     (logo already in header). Kept in the DOM so the page h1 remains for SEO & screen readers. */
  .fn-hero-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* Subheadline & Lead Copy */
  .hero-fn-banner .text-area {
    margin: 0.25rem auto 0 !important;
    max-width: 100% !important;
  }

  .hero-fn-banner .hero-subheadline {
    font-size: clamp(1.4rem, 5.2vw, 1.85rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 0.7rem !important;
    color: var(--text-primary) !important;
    text-wrap: balance !important;
  }

  .hero-fn-banner .hero-subheadline .hero-highlight {
    background: linear-gradient(135deg, #ff5500 0%, #ff7a1a 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline !important;
  }

  .hero-fn-banner .desc {
    font-size: 0.92rem !important;
    line-height: 1.58 !important;
    margin-bottom: 1.35rem !important;
    padding: 0 0.4rem !important;
    color: var(--text-secondary) !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-wrap: pretty !important;
  }

  /* Hero Action Buttons - Clean Stacked Mobile CTAs */
  .hero-fn-banner .button-area {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 330px !important;
    margin: 0 auto !important;
    gap: 0.7rem !important;
  }

  .hero-fn-banner .button-area .wpr-btn {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    padding: 0.75rem 1.25rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  }

  .hero-fn-banner .button-area .wpr-btn:active {
    transform: scale(0.98) !important;
  }

  /* Primary CTA (Start a Project) */
  .hero-fn-banner .button-area .btn-primary {
    order: 1 !important;
    background: linear-gradient(135deg, #ff5500 0%, #ff6e1a 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(255, 85, 0, 0.22) !important;
    color: #ffffff !important;
    gap: 0.5rem !important;
  }

  .hero-fn-banner .button-area .btn-primary.with-icon .inner {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .hero-fn-banner .button-area .btn-primary.with-icon .icon {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.95rem !important;
    margin-left: 0.15rem !important;
  }

  /* Secondary CTA (Explore Selected Work) */
  .hero-fn-banner .button-area .btn-white {
    order: 2 !important;
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-primary) !important;
    gap: 0.5rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  }

  /* Stats Band - Refined Modern Surface with Plus Jakarta Sans Numerals */
  .hero-fn-banner .hero-stats-band,
  .hero-stats-band {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.2rem 1rem !important;
    padding: 1.25rem 1.1rem !important;
    margin-top: 1.5rem !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 16px !important;
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03) !important;
  }

  .hero-stats-band .square-shape {
    display: none !important;
  }

  .hero-stats-band .stat-item {
    padding: 0.15rem 0.25rem !important;
    text-align: left !important;
  }

  .hero-stats-band .stat-number {
    font-size: clamp(1.6rem, 5.2vw, 1.95rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: var(--text-primary) !important;
    font-family: var(--font-sans) !important;
    font-feature-settings: "tnum" 1 !important;
    display: block !important;
    letter-spacing: -0.02em !important;
  }

  .hero-stats-band .stat-label {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    color: var(--text-muted) !important;
    margin-top: 0.35rem !important;
    display: block !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
  }

  /* --- Marquee Ticker --- */
  .tech-marquee-wrapper {
    padding: 0.75rem 0 !important;
  }

  .marquee-item {
    font-size: 0.78rem !important;
    gap: 0.5rem !important;
  }

  /* --- Client Logos Grid (3-Column Layout on Mobile) --- */
  .client-brands-section .container-editorial {
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
  }

  .client-brands-grid {
    gap: 0.5rem !important;
  }

  .brand-card-even {
    flex: 0 0 calc((100% - (2 * 0.5rem)) / 3) !important;
    max-width: calc((100% - (2 * 0.5rem)) / 3) !important;
    height: 76px !important;
    padding: 0.45rem 0.55rem !important;
    border-radius: 10px !important;
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  [data-theme="dark"] .brand-card-even {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  }

  .brand-logo-img {
    opacity: 1 !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
  }

  .brand-logo-img.brand-logo-wordmark {
    max-height: 32px !important;
    max-width: 88% !important;
  }

  .brand-logo-img.brand-logo-wide {
    max-height: 42px !important;
    max-width: 90% !important;
  }

  .brand-logo-img.brand-logo-square {
    max-height: 50px !important;
    max-width: 50px !important;
  }

  .brand-logo-img.brand-logo-tall {
    max-height: 54px !important;
    max-width: 54px !important;
  }

  .brand-logo-img.brand-logo-badge {
    border-radius: 6px !important;
  }

  .brand-logo-img.brand-logo-circle {
    border-radius: 6px !important;
    max-height: 50px !important;
    max-width: 50px !important;
  }

  /* --- Services Showcase Mobile (We Engineer We Transform) --- */
  .services-transform-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .service-transform-card {
    min-height: 350px !important;
    padding: 1.85rem 1.45rem !important;
    border-radius: 16px !important;
  }

  .service-watermark-num {
    font-size: 6.8rem !important;
    right: 1.25rem !important;
    left: auto !important;
    top: 48% !important;
    transform: translateY(-50%) !important;
  }

  .service-deliverables li {
    font-size: 0.85rem !important;
    white-space: normal !important;
  }

  .service-action-btn {
    bottom: 1.6rem !important;
    right: 1.45rem !important;
    width: 40px !important;
    height: 40px !important;
  }

  /* Fallback legacy service-fn-card */
  .service-fn-card {
    padding: 1.35rem 1.15rem !important;
    border-radius: 14px !important;
  }

  /* --- Process Step Boxes --- */
  .process-step-box {
    padding: 1.25rem 1.15rem !important;
    border-radius: 14px !important;
  }

  .process-step-num {
    font-size: 1.15rem !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 0 !important;
  }

  .process-step-title {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.45rem !important;
  }

  .process-step-desc {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
  }

  /* --- Case Studies & Projects --- */
  .project-card,
  .project-card-featured {
    border-radius: 14px !important;
    grid-template-columns: 1fr !important;
  }

  .project-media {
    min-height: 170px !important;
    padding: 1rem 0.75rem !important;
  }

  .project-body {
    padding: 1.25rem 1.15rem !important;
  }

  .project-category {
    font-size: 0.72rem !important;
    margin-bottom: 0.35rem !important;
  }

  .project-title {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.55rem !important;
  }

  .project-desc {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin-bottom: 0.85rem !important;
  }

  .project-impact-badge {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.65rem !important;
    border-radius: 8px !important;
    margin-bottom: 0.75rem !important;
  }

  .project-tech-stack {
    gap: 0.35rem !important;
    margin-bottom: 1rem !important;
  }

  .tech-pill {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.55rem !important;
  }

  .project-body .btn-editorial,
  .project-body .link-arrow {
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
  }

  /* --- Architecture Blueprint Inspector --- */
  .blueprint-card {
    border-radius: 14px !important;
  }

  .blueprint-header {
    padding: 0.65rem 0.85rem !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  .blueprint-nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    width: 100% !important;
  }

  .blueprint-tab {
    white-space: nowrap !important;
    font-size: 0.75rem !important;
    padding: 0.35rem 0.65rem !important;
    flex-shrink: 0 !important;
  }

  .btn-copy-snippet {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    padding: 0.4rem !important;
  }

  .blueprint-body {
    padding: 1rem 0.85rem !important;
    font-size: 0.78rem !important;
  }

  .arch-diagram-flow {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .arch-node {
    padding: 0.85rem !important;
    border-radius: 10px !important;
  }

  .arch-node-title {
    font-size: 0.85rem !important;
  }

  .arch-node-desc {
    font-size: 0.76rem !important;
  }

  /* --- FAQ Section --- */
  .faq-box {
    border-radius: 12px !important;
    margin-bottom: 0.75rem !important;
  }

  .faq-box.last-box{
    margin-bottom: 0 !important;
  }

  .faq-header {
    padding: 1rem 1.15rem !important;
    gap: 0.75rem !important;
  }

  .faq-question {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
  }

  .faq-body {
    padding: 0 1.15rem 1rem !important;
    font-size: 0.86rem !important;
    line-height: 1.55 !important;
  }

  /* --- Direct Engagement CTA Section --- */
  .contact-container {
    padding: 1.5rem 1.15rem !important;
    border-radius: 14px !important;
  }

  .btn-editorial {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
    font-size: 0.92rem !important;
  }

  /* --- Site Footer --- */
  .site-footer {
    padding-top: 0 !important;
    padding-bottom: 20px !important;
  }

  .footer-link {
    font-size: 0.88rem !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* --- Inner Pages (.page-hero, filters, form fields) --- */
  .page-hero {
    padding: 0 !important;
  }

  .page-hero + section.pt-0 {
    padding-top: 20px !important;
  }

  .page-hero-title {
    font-size: clamp(1.75rem, 6.5vw, 2.35rem) !important;
    line-height: 1.2 !important;
  }

  .page-hero-inner{
    padding-bottom: 0 !important;
  }

  .wpr-get-in-touch {
    margin: 0 !important;
  }

  .wpr-contact-area{
    margin: 0 !important;
  }

  .client-brands-section{
    padding-top: 0 !important;
  }

  .wpr-contact-area .container-editorial{
    padding-top: 0 !important;
  }
  .page-hero-lead {
    font-size: 0.925rem !important;
    line-height: 1.6 !important;
  }

  /* --- Page Hero Meta Card (Mobile Refinement) --- */
  .page-hero-meta {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 1.5rem !important;
    box-sizing: border-box !important;
  }

  .page-hero-meta .meta-item {
    min-width: 0 !important;
    padding: 0.75rem 0.85rem !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .page-hero-meta .meta-item + .meta-item {
    border-left: none !important;
  }

  .page-hero-meta div.meta-item:nth-of-type(even) {
    border-left: 1px dashed var(--border-medium) !important;
  }

  .page-hero-meta div.meta-item:nth-of-type(n+3) {
    border-top: 1px dashed var(--border-medium) !important;
  }

  .page-hero-meta .meta-k {
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 0.2rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .page-hero-meta .meta-v {
    font-size: clamp(0.82rem, 3.2vw, 0.95rem) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }

  .page-hero-meta .meta-v.mono {
    font-size: clamp(0.78rem, 3vw, 0.88rem) !important;
    letter-spacing: -0.01em !important;
  }

  /* 3rd item (Local Time): full-width row, label left / value right on one line */
  .page-hero-meta div.meta-item:nth-of-type(3):last-of-type {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    border-left: none !important;
  }

  .page-hero-meta div.meta-item:nth-of-type(3):last-of-type .meta-k {
    margin-bottom: 0 !important;
  }

  .page-hero-meta div.meta-item:nth-of-type(3):last-of-type .meta-v {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    word-break: normal !important;
  }

  /* --- Contact Form Card: prevent fields overflowing the card edge --- */
  .wpr-contact-area .section-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 1.5rem 1.25rem !important;
    gap: 2rem !important;
  }

  .wpr-contact-area .left-content-area,
  .wpr-contact-area .contact-form-area,
  .wpr-contact-area form {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .wpr-contact-area .single-input input,
  .wpr-contact-area .single-input select,
  .wpr-contact-area .single-input textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .wpr-contact-area .single-input select {
    padding-right: 2.5rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* --- Article & Product Author Utility Bar & Action Buttons on Mobile --- */
  .article-author-bar .container-editorial {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.85rem !important;
    width: 100% !important;
  }

  .article-author-bar .container-editorial > div:first-child {
    width: 100% !important;
  }

  .article-action-buttons,
  .article-author-bar .article-action-buttons,
  .article-author-bar .d-flex.align-items-center.gap-2,
  .article-author-bar .container-editorial > div:last-child {
    display: flex !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }

  .article-action-buttons .btn,
  .article-author-bar .article-action-buttons .btn,
  .article-author-bar .d-flex.align-items-center.gap-2 .btn,
  .article-author-bar .container-editorial > div:last-child .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem 0.65rem !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
    text-overflow: ellipsis;
    box-sizing: border-box !important;
  }

  /* --- Quick Tech Spec Box on Mobile --- */
  .tech-spec-box {
    padding: 0.75rem 0.85rem !important;
    font-size: 0.76rem !important;
    gap: 0.45rem !important;
    line-height: 1.4 !important;
  }

  .filter-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 0.5rem !important;
    gap: 0.4rem !important;
  }

  .filter-btn {
    white-space: nowrap !important;
    font-size: 0.78rem !important;
    padding: 0.35rem 0.8rem !important;
    flex-shrink: 0 !important;
  }

  /* Prevent iOS Safari auto-zoom on input focus by guaranteeing 16px minimum */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 46px;
  }
}

/* --------------------------------------------------------------------------
   SMALL PHONES & EXTRA NARROW VIEWPORTS (< 420px)
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .hero-stats-band .stat-number {
    font-size: 1.55rem !important;
  }

  .client-brands-grid {
    gap: 0.38rem !important;
  }

  .brand-card-even {
    flex: 0 0 calc((100% - (2 * 0.38rem)) / 3) !important;
    max-width: calc((100% - (2 * 0.38rem)) / 3) !important;
    height: 70px !important;
    padding: 0.35rem 0.45rem !important;
    border-radius: 8px !important;
    background-color: var(--bg-surface) !important;
  }

  [data-theme="dark"] .brand-card-even {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-subtle) !important;
  }

  .brand-logo-img.brand-logo-wordmark {
    max-height: 30px !important;
    max-width: 90% !important;
  }

  .brand-logo-img.brand-logo-wide {
    max-height: 38px !important;
    max-width: 92% !important;
  }

  .brand-logo-img.brand-logo-square {
    max-height: 46px !important;
    max-width: 46px !important;
  }

  .brand-logo-img.brand-logo-tall {
    max-height: 50px !important;
    max-width: 50px !important;
  }

  .brand-logo-img.brand-logo-badge,
  .brand-logo-img.brand-logo-circle {
    border-radius: 5px !important;
    max-height: 46px !important;
    max-width: 46px !important;
  }

  .page-hero-meta .meta-item {
    padding: 0.65rem 0.65rem !important;
  }

  .page-hero-meta .meta-v {
    font-size: 0.8rem !important;
    gap: 0.25rem !important;
  }

  .page-hero-meta .meta-v.mono {
    font-size: 0.75rem !important;
  }
}