/* ==========================================================================
   Responsive refinements — desktop-first overrides
   Breakpoints: 1280 · 1024 · 768 · 480 · 360
   ========================================================================== */

/* ---------------------------------------------------------------- ≤1280 */
@media (max-width: 1280px) {
  .nav-link { padding: 0 0.6rem; }
  .nav-link::after { left: 0.6rem; right: 0.6rem; }
  .hero__copy { grid-column: 1 / span 7; }
  .hero__visual { grid-column: 8 / span 5; }
  .svc-row__link { grid-template-columns: 3rem minmax(0, 1.2fr) minmax(0, 1fr) auto; }
}

/* ---------------------------------------------------------------- ≤1024 */
@media (max-width: 1023.98px) {
  :root { --header-h: 68px; }

  .primary-nav { display: none; }
  .menu-toggle { display: inline-block; }

  .section-head__index, .section-head__title, .section-head__aside { grid-column: 1 / -1; }

  /* Hero */
  .hero { min-height: auto; }
  .hero__inner { grid-template-columns: 1fr; gap: 3.5rem; }
  .hero__copy, .hero__visual { grid-column: 1 / -1; }
  .hero__visual { height: clamp(380px, 62vw, 520px); max-width: 640px; width: 100%; }

  /* About intro */
  .about-intro__head, .about-intro__body { grid-column: 1 / -1; }
  .about-intro__title { position: static; max-width: 14ch; }

  /* Services rows */
  .svc-row__link { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
  .svc-row__desc { grid-column: 2 / 3; grid-row: 2; }
  .svc-row__arrow { grid-row: 1 / span 2; align-self: center; width: 48px; height: 48px; }

  /* Projects */
  .project-row__media, .project-row--flip .project-row__media { grid-column: 1 / -1; order: 1; }
  .project-row__body, .project-row--flip .project-row__body { grid-column: 1 / span 10; order: 2; }

  /* Why */
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-item { min-height: 300px; }

  /* Testimonials / How / FAQ */
  .testimonials__head, .testimonials__body,
  .faq__head, .faq__list { grid-column: 1 / -1; }
  .how__head, .how__steps { grid-column: 1 / -1; }
  .how__head { position: static; }
  .faq__head h2, .how__head h2 { max-width: 14ch; }

  /* Final CTA */
  .cta-final__row { grid-template-columns: 1fr; align-items: start; }

  /* Footer */
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- ≤768 */
@media (max-width: 767.98px) {
  .nav-cta { display: none; }

  .hero__foot { flex-direction: column; align-items: flex-start; }
  .scroll-cue { display: none; }
  

  .hero__visual { height: 400px; }
  .hv-browser { width: 92%; height: 64%; }
  .hv-proposal { width: 62%; top: 26%; }
  .hv-milestones { width: 78%; right: 0; bottom: 12%; }
  .hv-owner { left: 0; }

  .project-row__body, .project-row--flip .project-row__body { grid-column: 1 / -1; }

  .why-grid { grid-template-columns: 1fr; }
  .why-item { min-height: 0; padding: 1.75rem 1.5rem 2rem; }

  .why-item__icon { margin-bottom: 0; }

  .t-slide__who .stars { margin-left: 0; width: 100%; }
  .t-carousel__controls { flex-wrap: wrap; }
  .t-dots { order: 3; flex-basis: 100%; }
  .t-carousel__nav { margin-left: auto; }

  .steps { padding-left: 2.75rem; }
  .step__dot { left: calc(-2.75rem + 2px); }

  .acc-trigger { font-size: 1.1rem; padding: 1.35rem 0; gap: 1rem; }
  .acc-icon { width: 36px; height: 36px; }
  .acc-panel p { padding-right: 0; }

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

  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-contact { grid-column: 1 / -1; }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }

  .dropdown { display: none; }
}

/* ---------------------------------------------------------------- ≤480 */
@media (max-width: 479.98px) {
  .btn--lg { min-height: 56px; padding: 0 1.25rem 0 1.4rem; font-size: 1rem; }
  .hero .btn-row { flex-direction: column; align-items: flex-start; gap: 1.25rem; }

  .hero__visual { height: 360px; }
  .hv-browser { width: 100%; height: 58%; }
  .hv-browser__body { padding: 18px 18px 0; gap: 9px; }
  .hv-tiles span { height: 52px; }
  .hv-proposal { width: 72%; top: 30%; padding: 14px 15px 16px; }
  .hv-checks { font-size: 0.78rem; gap: 7px; }
  .hv-milestones { width: 88%; bottom: 13%; padding: 12px 14px; }
  .hv-track { font-size: 0.62rem; }
  .hv-owner { font-size: 0.74rem; padding: 9px 13px 9px 10px; }

  .principle { grid-template-columns: auto 1fr; }
  .principle__num { display: none; }

  .svc-row__link { grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem 1rem; }
  .svc-row__num { grid-column: 1 / -1; }
  .svc-row__name { grid-column: 1; grid-row: 2; }
  .svc-row__desc { grid-column: 1 / -1; grid-row: 3; }
  .svc-row__arrow { grid-column: 2; grid-row: 2; width: 44px; height: 44px; }

  .footer-top { grid-template-columns: 1fr; gap: 2.25rem; }

  .cover__num { font-size: 2.25rem; }
}

/* ---------------------------------------------------------------- ≤360 */
@media (max-width: 359.98px) {
  .brand img { height: 28px; }
  .hero__title { font-size: 2.45rem; }
  .hv-proposal { width: 80%; }
  .hv-track li { font-size: 0.56rem; }
  .btn { white-space: normal; text-align: left; line-height: 1.2; }
}

/* ---------------------------------------------------------------- Large screens */
@media (min-width: 1680px) {
  :root { --gutter: 5rem; }
}

/* ==========================================================================
   Inner pages — responsive
   ========================================================================== */
@media (max-width: 1023.98px) {
  .about-hero__main, .about-hero__side,
  .partner__head, .partner__body,
  .gap__copy, .gap__diagram,
  .choose__head, .choose-list,
  .cta-band__inner > h2, .cta-band__side,
  .svc-split__visual, .svc-split__copy, .svc-split--rev .svc-split__copy, .svc-split--rev .svc-split__visual,
  .svc-mkt__head, .channel-grid,
  .svc-brand__top > div, .svc-brand__top > p,
  .work-hero__grid > div,
  .pkg-hero__row .t-lead,
  .pkg-group__head, .pkg-list,
  .payment__grid > div:first-child, .payment__body,
  .contact-intro, .contact-form-wrap, .legal-article { grid-column: 1 / -1; }
  .svc-split--rev .svc-split__visual { order: -1; }
  .choose__head, .svc-mkt__head, .contact-intro{ position: static; max-height: none; }
  
  .plan-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-card { grid-column: span 12; }
  .svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resp-cols { grid-template-columns: 1fr; }
  .h-process { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.5rem; }
  .support-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  .work-card, .work-card--1, .work-card--2, .work-card--3, .work-card--4, .work-card--5, .work-card--6 { grid-column: span 6; margin-top: 0; }
  .work-card--2 .cover, .work-card--6 .cover { aspect-ratio: 16 / 11; }
  .orbit { max-width: 460px; }
  
  .legal-article { order: 1; }
  
}

@media (max-width: 767.98px) {
  .values__cols { grid-template-columns: 1fr; }
  .choose-list { grid-template-columns: 1fr; }
  .choose-list li, .choose-list li:nth-child(even) { padding: 1.5rem 0; border-right: 0; }
  .svc-cards { grid-template-columns: 1fr; }
  .svc-card { min-height: 0; }
  .channel-grid { grid-template-columns: 1fr; }
  .channel-grid li, .channel-grid li:nth-child(2), .channel-grid li:nth-child(4) { transform: none; min-height: 0; }
  .h-process { grid-template-columns: 1fr 1fr; }
  .brand-row__k, .brand-row p { grid-column: 1 / -1; }
  .support-tiles{ grid-template-columns: 1fr; }
  .support-tiles li { min-height: 0; }
  .work-card, .work-card--1, .work-card--2, .work-card--3, .work-card--4, .work-card--5, .work-card--6 { grid-column: 1 / -1; }
  .pkg-list { grid-template-columns: 1fr; }
  
  .proc-stage { grid-template-columns: auto 1fr; }
  .proc-stage__i { display: none; }
  .pay-split__bar { flex-direction: column; }
  
  .orbit__node { font-size: 0.72rem; padding: 0.4rem 0.7rem 0.4rem 0.45rem; }
  .orbit__node .icon { width: 24px; height: 24px; }
  .ecom-seller { font-size: 1.35rem; }
}

@media (max-width: 479.98px) {
  .plan-steps { grid-template-columns: 1fr; }
  .plan-steps li { min-height: 0; gap: 1.5rem; }
  .h-process { grid-template-columns: 1fr; }
  .orbit__node b { display: none; }
  .orbit__node { padding: 0.35rem; }
  .orbit__core .mono { display: none; }
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn { flex: none; }
  
  .platforms li { padding: 0.55rem 1rem; }
}

/* ---------------------------------------------------------------- QA overflow fixes */
.footer-contact a, .footer-contact address, .contact-details a { overflow-wrap: anywhere; }
.pkg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pkg-list li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.pkg-list .chip { flex: none; }
@media (max-width: 767.98px) { .pkg-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479.98px) {
  
  .pkg-list .chip { padding: 0 0.6rem; font-size: 0.62rem; }
}

/* ---------------------------------------------------------------- Hero visual refinements */
.hero__visual .concept-tag { top: -34px; bottom: auto; right: 0; left: auto; }
@media (min-width: 1024px) and (max-width: 1240px) {
  .hero__visual { height: 470px; }
  .hv-browser { width: 92%; height: 66%; }
  .hv-proposal { width: 64%; top: 18%; }
  .hv-milestones { width: 76%; right: 0; bottom: 10%; }
  .hv-owner { bottom: -2%; left: 0; }
}
@media (max-width: 1023.98px) {
  .hero__visual { margin-top: 1.5rem; }
}
@media (max-width: 479.98px) {
  .hero__visual { height: 330px; }
  .hv-milestones { display: none; }
  .hv-proposal { width: 76%; top: 26%; }
  .hv-browser { height: 70%; }
  .hv-owner { left: auto; right: 0; bottom: 0; }
}