/* ============================================================
   Digital Path Solutions — Responsive CSS
   360px → 480px → 768px → 1024px → 1280px → 1920px
   ============================================================ */

/* ── Large Desktops ── */
@media (max-width: 1280px) {
  :root{--w:1100px}
  .services-main-row{grid-template-columns:1fr 280px;gap:14px}
  .services-cards-row{grid-template-columns:repeat(5,1fr);gap:10px}
  .svc-card-ref{padding:20px 8px 16px}
  .svc-card-title{font-size:13px}
  .svc-card-desc{font-size:11px}
}

/* ── Laptop ── */
@media (max-width: 1100px) {
  :root{--w:960px}
  .services-main-row{grid-template-columns:1fr;gap:24px}
  .services-cards-row{grid-template-columns:repeat(3,1fr);gap:14px}
  .why-card-ref{max-width:100%}
  .about-process-grid{grid-template-columns:1fr 220px 1.2fr;gap:20px}
  .about-grid{grid-template-columns:1fr 260px 1fr}
  .logo-ring{width:230px;height:230px}
  .logo-ring img{width:195px;height:195px}
  .process-row{grid-template-columns:repeat(4,1fr)}
}

/* ── Tablet Landscape (992px and below) ── */
@media (max-width: 992px) {
  .nav,.header-actions .btn--primary,.header-wa{display:none!important}
  .hamburger{display:flex!important}
  .mobile-nav{display:block}

  /* Hero at 992px */
  .hero{min-height:480px;align-items:flex-start}
  .hero-container{padding:20px 30px 36px;align-items:flex-start}
  .hero-content{width:54%;max-width:540px}
  .hero-content h1{font-size:clamp(18px, 2.1vw, 23px);line-height:1.25}
  .hero-description{font-size:15px}
  .hero-stats{gap:12px;flex-wrap:nowrap}
  .hero-visual{width:60%}
  .hero-value-strip{margin-top:22px;padding:5px 12px;gap:10px;border-radius:9999px;flex-wrap:wrap}
  .value-strip-item .value-text{font-size:11px}

  .services-main-row{grid-template-columns:1fr;gap:20px}
  .services-cards-row{grid-template-columns:repeat(3,1fr);gap:12px}

  /* About Process at 992px */
  .about-process-grid{grid-template-columns:1fr;gap:36px;text-align:center}
  .about-proc-left{order:1;display:flex;flex-direction:column;align-items:center}
  .about-proc-center{order:2}
  .about-proc-process{order:3;display:flex;flex-direction:column;align-items:center}
  .about-proc-features{max-width:480px;width:100%}
  .about-proc-buttons{justify-content:center}
  .about-center-emblem{max-width:220px}

  .about-grid{grid-template-columns:1fr;gap:2rem}
  .about-logo-center{order:-1}
  .logo-ring{width:200px;height:200px;margin:0 auto}
  .logo-ring img{width:170px;height:170px}
  .testi-grid{grid-template-columns:repeat(2,1fr)}
  .cta-bar-inner{grid-template-columns:1fr;gap:36px}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:2rem}
}

/* ── Tablet Portrait & Below (768px and below) ── */
@media (max-width: 768px) {
  /* Hero: switch to one column (Text first, Image second) */
  .hero{
    display:block;
    min-height:auto;
    padding-top:70px;
  }
  .hero-container{
    display:flex;
    flex-direction:column;
    gap:28px;
    padding:25px 20px 20px;
  }
  .hero-content{
    order:1;
    width:100%;
    max-width:100%;
  }
  .hero-content h1{
    font-size:clamp(22px, 5vw, 30px);
    line-height:1.24;
    margin-bottom:22px;
  }
  .hero-content h1 .hero-line{
    white-space:normal;
  }
  .hero-content h1 .hero-highlight{
    white-space:normal;
  }
  .hero-underline-svg{
    bottom:-9px;
    height:13px;
  }
  .hero-description{
    max-width:100%;
    font-size:16px;
  }
  .hero-visual{
    order:2;
    position:relative;
    top:0;
    right:auto;
    bottom:auto;
    width:100%;
    height:auto;
    aspect-ratio:16 / 9;
    overflow:hidden;
    border-radius:0;
    box-shadow:none;
    pointer-events:auto;
  }
  .hero-image{
    width:100%;
    height:100%;
    aspect-ratio:16 / 9;
    object-fit:cover;
    object-position:center;
    transform:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    border:none !important;
  }
  .hero-visual::after{
    display:none;
  }
  .hero-tag.tag-past{left:8%;bottom:12px;top:auto;font-size:11px}
  .hero-tag.tag-future{right:8%;left:auto;bottom:12px;top:auto;font-size:11px}
  .hero-stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px 14px;
    width:100%;
  }
  .hero-value-strip{
    width:100%;
    max-width:100%;
    margin-top:16px;
    padding:8px 12px;
    border-radius:10px;
    flex-wrap:wrap;
    gap:8px 12px;
  }
  .value-strip-item .value-text{font-size:11px}

  .services-header-row{flex-direction:column;align-items:flex-start;gap:14px}
  .services-main-row{grid-template-columns:1fr;gap:20px;perspective:none !important}
  .services-cards-row{grid-template-columns:repeat(2,1fr);gap:12px;perspective:none !important}
  .why-card-ref{max-width:100%}

  /* Disable 3D transforms & perspective on touch/tablet screens to prevent horizontal overflow */
  .svc-card-ref,
  .why-card-ref {
    transform: none !important;
    transform-style: flat !important;
  }
  .svc-card-ref .svc-card-icon,
  .svc-card-ref .svc-card-title,
  .svc-card-ref .svc-card-desc,
  .svc-card-ref .svc-card-points,
  .svc-card-ref .svc-card-link,
  .why-card-ref .why-card-title,
  .why-card-ref .why-features-list,
  .why-card-ref .why-growth-callout {
    transform: none !important;
  }
  .card-glare-3d {
    display: none !important;
  }

  /* About Process at 768px */
  .about-process-section{padding:3rem 0}
  .about-proc-title{font-size:1.6rem}
  .about-proc-features{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:360px}
  .about-proc-buttons{width:100%}
  .btn-about-primary,.btn-about-outline{flex:1;text-align:center}
  .proc-timeline{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 14px;max-width:340px;width:100%}
  .proc-step-arrow{display:none}

  .testi-grid{grid-template-columns:1fr}
  .form-row-2{grid-template-columns:1fr}
  .process-row{grid-template-columns:repeat(2,1fr);gap:2rem}
  .process-row::before{display:none}
  .blog-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:center;text-align:center}
  .founders-grid{grid-template-columns:1fr;gap:1.5rem}
  .founder-card{padding:2rem 1.25rem 1.75rem}
  .about-story-grid{grid-template-columns:1fr;gap:2.5rem}
  .story-impact-bar{grid-template-columns:repeat(2,1fr);gap:10px}
  .purpose-grid{grid-template-columns:1fr;gap:1.5rem}
  .contact-grid{grid-template-columns:1fr;gap:2.5rem}
  .form-row, .form-row-2{grid-template-columns:1fr;gap:1.15rem}

  /* CTA at 768px */
  .cta-bar{padding:3.2rem 0}
  .cta-bar-inner{grid-template-columns:1fr;gap:32px}
  .cta-actions-group{width:100%}
  .btn-cta-orange,.btn-cta-glass{width:100%;justify-content:center}
  .cta-stats-grid{grid-template-columns:repeat(2,1fr);gap:12px;width:100%}
  .cta-stat-card{padding:12px 14px;gap:10px}
  .cta-card-icon{width:38px;height:38px;border-radius:10px}
  .cta-card-num{font-size:1.25rem}
  .cta-card-label{font-size:0.68rem}
}

/* ── Mobile (480px and below) ── */
@media (max-width: 480px) {
  .hero-container{padding:20px 16px 20px;gap:22px}
  .hero-content h1{font-size:clamp(20px, 5.2vw, 26px);line-height:1.2}
  .hero-description{font-size:15px;margin-bottom:20px}
  .hero-buttons{flex-direction:column;width:100%;gap:10px;margin-bottom:24px}
  .hero-buttons .btn{width:100%;height:50px;justify-content:center;font-size:15px}
  .hero-stats{grid-template-columns:1fr 1fr;gap:14px 10px}
  .hero-value-strip{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:8px 12px;
    margin-top:14px;
    width:100%;
  }
  .value-strip-item .value-text{font-size:11px}
  .stat-num{font-size:18px}
  .stat-label{font-size:12px}
  .hero-visual{aspect-ratio:16 / 9;width:100%;max-height:260px}

  .services-section {
    padding: 32px 0 40px;
    overflow: hidden;
  }
  .services-container {
    padding: 0 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .services-cards-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100%;
  }
  .svc-card-ref {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 24px 20px 20px !important;
    margin: 0 !important;
    border-radius: 16px;
    box-shadow: 0 3px 12px rgba(7, 27, 73, 0.05);
  }
  .svc-card-ref .svc-card-icon {
    width: 58px !important;
    height: 58px !important;
    margin-bottom: 12px !important;
  }
  .svc-card-ref .svc-card-title {
    font-size: 19px !important;
    min-height: auto !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
  }
  .svc-card-ref .svc-card-desc {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
    max-width: 100% !important;
  }
  .svc-card-ref .svc-card-points {
    width: 100% !important;
    gap: 9px !important;
    margin-bottom: 16px !important;
  }
  .svc-card-points li {
    font-size: 13px !important;
    gap: 8px !important;
  }
  .point-check {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
  }
  .svc-card-ref .svc-card-link {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0866E8 !important;
    padding: 8px 18px !important;
    background: #EAF3FF !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .why-card-ref {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 26px 20px 22px !important;
    border-radius: 18px;
  }
  .why-card-ref .why-card-title {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  .why-card-ref .why-feature-row {
    font-size: 13px !important;
    gap: 12px !important;
  }
  .why-card-ref .why-feature-icon {
    width: 28px !important;
    height: 28px !important;
  }

  /* About Process at 480px */
  .about-proc-title{font-size:1.45rem}
  .about-proc-buttons{flex-direction:column;width:100%}
  .btn-about-primary,.btn-about-outline{width:100%}
  .about-center-emblem{max-width:200px}

  /* CTA at 480px */
  .cta-bar {
    padding: 3rem 0;
  }
  .cta-bar-heading {
    font-size: 1.65rem !important;
    line-height: 1.25 !important;
  }
  .cta-bar-desc {
    font-size: 0.92rem !important;
    margin-bottom: 1.4rem !important;
  }
  .cta-actions-group {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }
  .btn-cta-orange, .btn-cta-glass {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.85rem 1.4rem !important;
  }
  .cta-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100%;
  }
  .cta-stat-card {
    padding: 14px 12px !important;
    gap: 10px !important;
    border-radius: 14px !important;
  }
  .cta-card-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }
  .cta-card-num {
    font-size: 1.25rem !important;
  }
  .cta-card-label {
    font-size: 0.65rem !important;
    letter-spacing: 0.02em !important;
  }
}

/* ── Small Mobile (400px and below) ── */
@media (max-width: 400px) {
  .hero-content h1{font-size:clamp(18px, 4.8vw, 22px)}
  .hero-content h1 .hero-line{white-space:normal}
  .services-cards-row{grid-template-columns:1fr !important}
  .hero-stats{grid-template-columns:1fr 1fr}
  .cta-stats-grid{grid-template-columns:1fr !important}
  .testi-grid{grid-template-columns:1fr}
  .btn{padding:.65rem 1.25rem;font-size:.85rem}
  .section{padding:2rem 0}
}

/* ── 4K / Ultra Wide ── */
@media (min-width: 1800px) {
  :root{--w:1400px}
  .hero-heading{font-size:3.5rem}
  .services-grid{gap:1.25rem}
}