/* ============================================================
   GAP3 — responsive.css  (desktop-first; matches reference behaviour)
   1600 → 1280 → 1024 (nav→drawer) → 768 → 480
   ============================================================ */

@media (max-width: 1600px) {
  :root { --container: 1240px; }
  .hero .title, .page-hero .title, .svchero .title { font-size: 104px; }
  .cta-big .title, .footer-email { font-size: 76px; }
}

@media (max-width: 1280px) {
  :root { --gutter: 32px; }
  .hero .title, .page-hero .title, .svchero .title { font-size: 88px; }
  .cta-big .title { font-size: 68px; }
  .cta-big .sub { font-size: 54px; }
  .testi .grid { grid-template-columns: 340px 1fr 1fr; gap: 28px; }
  .tools-grid { grid-template-columns: repeat(6, 1fr); }
  .footer-cols { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .split, .apart .container, .miles .container, .proc { grid-template-columns: 320px 1fr; gap: 60px; }
}

/* ---- 1024 : nav collapses to drawer ---- */
@media (max-width: 1024px) {
  :root { --header-h: 76px; }
  .main-nav, .header-cta { display: none; }
  .burger { display: inline-flex; }

  .hero .title, .page-hero .title, .svchero .title { font-size: 72px; }
  .hero .row { flex-direction: column-reverse; align-items: flex-start; gap: 26px; }

  .split, .apart .container, .miles .container, .proc { grid-template-columns: 1fr; gap: 40px; }
  .split .intro, .apart .intro, .miles .intro, .proc .intro, .testi .intro, .sg-toc { position: static; }

  .work-dark .head { grid-template-columns: 1fr; gap: 30px; }
  .work-grid, .workgrid { gap: 24px; }
  .work-item:nth-child(2), .work-item:nth-child(3),
  .workgrid > .wcard:nth-child(2), .workgrid > .wcard:nth-child(3) { margin-top: 0; }

  .solutions { grid-template-columns: 1fr; gap: 40px; }
  .solutions .col.b .sol-imgwrap .badge { right: 0; }

  .featured { grid-template-columns: 1fr; gap: 32px; }
  .featured .media { height: 340px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .who { grid-template-columns: 1fr; gap: 40px; }
  .ps-grid, .grid-3, .grid-4, .inc-grid, .why-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .tools-grid { grid-template-columns: repeat(5, 1fr); }

  /* testimonials → single column, hide second scroller */
  .testi .grid { grid-template-columns: 1fr; }
  .testi .intro { max-width: 640px; }
  .testi-col.hide-sm { display: none; }
}

/* ---- 768 : mobile ---- */
@media (max-width: 768px) {
  :root { --gutter: 20px; }
  .section { padding-block: 72px; }
  .apart .container, .miles .container, .tools .container,
  .work-dark .container, .why-dark .container { padding-block: 72px; }

  .hero .title { font-size: 52px; }
  .heading, .heading.lg, .sol-title, .work-dark .head .title, .testi .title, .who-h, .subheading { font-size: 36px; }
  .cta-big .title { font-size: 46px; }
  .cta-big .sub { font-size: 38px; }
  .footer-email { font-size: 34px; }
  .article-title { font-size: 38px; }
  .svchero .title { font-size: 48px; }
  .featured .title { font-size: 30px; }

  .grid-2, .grid-3, .grid-4, .ps-grid, .inc-grid, .why-grid, .team-grid, .stats { grid-template-columns: 1fr; }
  .stats { gap: 24px; }
  .stat { border-left: none; text-align: left; padding: 0; }

  .svc-row { grid-template-columns: 1fr; gap: 12px; }
  .svc-row .more { justify-self: start; }
  .apart .row { grid-template-columns: 1fr; gap: 8px; }
  .journal-row, .postrow { grid-template-columns: 1fr; gap: 16px; }
  .journal-row .thumb, .postrow .media { width: 100%; height: 200px; }
  .journal-row .readmore, .postrow .readmore { justify-self: start; }
  .miles .row { flex-direction: column; align-items: flex-start; gap: 6px; }

  .tools-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-cols { grid-template-columns: 1fr; }
  .callout, .cta-band .callout { flex-direction: column; align-items: flex-start; }
  .cta-big { padding: 72px var(--gutter) 80px; }

  .article-head, .content-area { padding-inline: var(--gutter); }
  .article-hero { padding-inline: var(--gutter); }
  .article-hero img { height: 300px; }

  .sg-type-row { flex-direction: column; gap: 6px; }
  .sg-type-row .lbl { width: auto; }
}

/* ---- 480 ---- */
@media (max-width: 480px) {
  .hero .title { font-size: 42px; }
  .heading { font-size: 30px; }
  .cta-big .title { font-size: 34px; }
  .btn { width: 100%; justify-content: center; }
  .sg-row .btn, .callout .btn, .hero .row .btn, .featured .btn { width: auto; }
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-legal { flex-wrap: wrap; gap: 14px; }
}

/* ---- service hero WP admin mock ---- */
@media (max-width: 1024px) {
  .wpm-media { grid-template-columns: repeat(4, 1fr); }
  .wpm-themes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .svc-mock { margin-top: 40px; }
  .wp-admin { grid-template-columns: 54px 1fr; }
  .wp-admin .wpm-item { justify-content: center; padding: 13px 0; gap: 0; }
  .wp-admin .wpm-item span { display: none; }
  .wpm-screen { padding: 16px; }
  .wpm-grid { grid-template-columns: 1fr; }
  .wpm-themes { grid-template-columns: repeat(2, 1fr); }
  .wpm-media { grid-template-columns: repeat(3, 1fr); }
  .wpm-field { grid-template-columns: 1fr; gap: 8px; }
  .wpm-tr { grid-template-columns: 20px 1.8fr 1fr; }
  .wpm-tr > *:nth-child(4), .wpm-tr > *:nth-child(5) { display: none; }
}
@media (max-width: 480px) {
  .wpm-media { grid-template-columns: repeat(2, 1fr); }
  .wpm-themes { grid-template-columns: 1fr; }
  .wpm-stats { gap: 16px; }
  .wp-url { min-width: 0; font-size: 11px; }
  .wpm-who { font-size: 0; gap: 0; }
  .wpm-me { font-size: 12px; }
}

/* ---- SaaS mock ---- */
@media (max-width: 1024px) {
  .mk-saas .wpm-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .mk-saas .wpm-metrics { grid-template-columns: repeat(2, 1fr); }
  .wpm-tr.proj { grid-template-columns: 1.6fr 0.9fr 1fr; }
  .wpm-tr.proj > *:nth-child(4) { display: none; }
  .saas-meter { grid-template-columns: 104px 1fr 42px; }
  .saas-schip { display: none; }
}
@media (max-width: 480px) {
  .mk-saas .wpm-metrics { grid-template-columns: 1fr; }
}

/* ---- Social scheduler mock ---- */
@media (max-width: 1024px) {
  .mk-social .wpm-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .soc-cal { min-width: 640px; }
  .soc-posts { grid-template-columns: 1fr; }
  .mk-social .wpm-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .mk-social .wpm-metrics { grid-template-columns: 1fr; }
}

/* ---- responsive polish: service hero stack + mock fixes ---- */
@media (max-width: 1024px) {
  .svchero { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 768px) {
  .mk-shopify .wp-admin { grid-template-columns: 54px 1fr; }   /* collapse light sidebar to rail */
  .wpm-search { display: none; }
  .wpm-metrics, .mk-marketing .wpm-metrics { grid-template-columns: repeat(2, 1fr); }
  .mkt-date { display: none; }
  .mkt-head { gap: 12px; padding: 12px 14px; }
  .wpm-tr.kw { grid-template-columns: 2fr 0.7fr 1fr; }
  .soc-channels { overflow-x: auto; }
}
@media (max-width: 480px) {
  .wpm-metrics, .mk-marketing .wpm-metrics { grid-template-columns: 1fr; }
  .svc-mock { padding-inline: 10px; }
}

/* ---- mobile nav: Services accordion ---- */
@media (max-width: 1024px) {
  .mobile-nav .m-item-sub { border-bottom: 1px solid var(--c-line); }
  .mobile-nav .m-sub-btn { display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 0; font-size: 22px; font-weight: 600; color: var(--c-ink); text-align: left; background: none; border: none; cursor: pointer; }
  .mobile-nav .m-sub-btn .i { font-size: 13px; font-weight: 600; color: var(--c-muted); }
  .mobile-nav .m-sub-btn.is-active { color: var(--c-green-link); }
  .mobile-nav .m-sub-btn .m-chev { margin-left: auto; font-size: 20px; color: var(--c-muted); transition: transform var(--dur) var(--ease); }
  .mobile-nav .m-item-sub.is-open .m-sub-btn .m-chev { transform: rotate(180deg); }
  .mobile-nav .m-sub { overflow: hidden; max-height: 0; transition: max-height 0.35s var(--ease); }
  .mobile-nav .m-item-sub.is-open .m-sub { max-height: 460px; }
  .mobile-nav .m-sub a { display: flex; align-items: center; gap: 10px; padding: 12px 0 12px 30px; font-size: 16px; font-weight: 500; color: var(--c-body); border-top: 1px solid var(--c-line-2); border-bottom: none; }
  .mobile-nav .m-sub a iconify-icon { font-size: 17px; color: var(--c-green-link); }
  .mobile-nav .m-sub a.is-active { color: var(--c-green-link); }
  .mobile-nav .m-sub a:last-child { padding-bottom: 16px; }
}

/* ============================================================
   Mobile polish (client feedback): centered intros, uniform
   headings, 2-col counter, tighter gutter, equal section padding
   ============================================================ */
@media (max-width: 768px) {
  :root { --gutter: 18px; }

  /* equal top and bottom padding on every content section */
  .section, .section.tight, .section.tight-bottom { padding-block: 60px; }
  .apart .container, .miles .container, .tools .container,
  .work-dark .container, .why-dark .container { padding-block: 60px; }
  .testi { padding: 60px var(--gutter); }

  /* center section intros / headers, button sits centered at the bottom */
  .split .intro, .apart .intro, .miles .intro, .proc .intro,
  .sec-head.left, .svchero, .svchero .body { align-items: center; text-align: center; }
  .split .intro, .apart .intro, .miles .intro, .proc .intro { position: static; }
  .testi .intro { align-items: center; position: static; }
  .testi .intro-head { align-items: center; text-align: center; }
  .greview { margin-inline: auto; }
  .work-dark .head { text-align: center; }
  .work-dark .head .side { align-items: center; }
  .journal-head { grid-template-columns: 1fr; gap: 14px; text-align: center; align-items: center; }

  /* full-width descriptions and headings */
  .body-text.narrow, .tools .sub, .journal-head p, .sol-title, .heading, .subheading { max-width: none; }

  /* one uniform size for every section heading */
  .heading, .heading.lg, .subheading, .sol-title, .who-h,
  .testi .title, .work-dark .head .title, .journal-head .heading { font-size: 40px; line-height: 1.12; }

  /* counter as a 2 x 2 grid */
  .stats { grid-template-columns: repeat(2, 1fr); gap: 32px 18px; }
  .stat { border-left: none; text-align: center; padding: 0; }
}

@media (max-width: 480px) {
  :root { --gutter: 16px; }
  .heading, .heading.lg, .subheading, .sol-title, .who-h,
  .testi .title, .work-dark .head .title, .journal-head .heading { font-size: 32px; line-height: 1.15; }
  .svchero .title { font-size: 38px; }
  .stats { gap: 26px 14px; }
}

/* ============================================================
   Type hierarchy (mobile): hero H1 clearly larger than H2;
   fix inner-page hero stuck at 82px; move services CTA below list
   ============================================================ */
@media (max-width: 768px) {
  .hero .title, .page-hero .title, .svchero .title { font-size: 60px; line-height: 1.06; }
  .heading, .heading.lg, .subheading, .sol-title, .who-h,
  .testi .title, .work-dark .head .title, .journal-head .heading { font-size: 40px; line-height: 1.12; }
  .article-title { line-height: 1.14; }

  /* services: hide intro button, show full-width CTA after the list */
  .split .intro .btn { display: none; }
  .svc-more-mobile { display: inline-flex; width: 100%; justify-content: center; margin-top: 6px; }
}
@media (max-width: 480px) {
  .hero .title, .page-hero .title, .svchero .title { font-size: 46px; }
  .heading, .heading.lg, .subheading, .sol-title, .who-h,
  .testi .title, .work-dark .head .title, .journal-head .heading { font-size: 32px; }
}

/* ---- home hero: centered + even spacing on mobile ---- */
@media (max-width: 1024px) {
  .hero .inner { align-items: center; text-align: center; }
  .hero .row { align-items: center; }
  .hero .row p { max-width: none; }
  .hero .eyebrow { justify-content: center; }
}
@media (max-width: 768px) {
  .hero .inner { gap: 26px; padding-block: 24px; }
  .hero .row { gap: 22px; margin-top: 0; }
}

/* ---- hide eyebrow dot on mobile (looks odd when centered/wrapping) ---- */
@media (max-width: 768px) {
  .eyebrow::before { display: none; }
}

/* ---- article headline (editorial) + smaller sub/card headings on mobile ---- */
@media (max-width: 768px) {
  .article-title { font-size: 40px; line-height: 1.14; }
  .svc-row .title, .journal-row .title, .postrow .title { font-size: 20px; }
  .featured .title { font-size: 24px; }
  .inc-card .inc-t, .ps-card .ps-t, .why-card .why-t { font-size: 20px; }
}
@media (max-width: 480px) {
  .article-title { font-size: 32px; }
  .svc-row .title, .journal-row .title, .postrow .title { font-size: 19px; }
  .inc-card .inc-t, .ps-card .ps-t, .why-card .why-t { font-size: 18px; }
}

/* ---- mobile: smaller buttons + tags, bigger CTA heading, static footer ---- */
@media (max-width: 768px) {
  .btn { padding: 12px 24px; font-size: 15px; }
  .btn.sm { padding: 11px 20px; font-size: 14px; }
  .btn .arrow { font-size: 14px; }
  .journal-row .tag, .tagpill { font-size: 13px; padding: 4px 12px; }
  .work-item .tag, .wcard .tag { font-size: 15px; }
  .cta-big .title { font-size: 60px; }
  .cta-big .sub { font-size: 44px; }
  .site-footer { position: static; }   /* remove sticky parallax reveal on mobile */
}
@media (max-width: 480px) {
  .cta-big .title { font-size: 46px; }
  .cta-big .sub { font-size: 34px; }
}

/* ---- mobile: shorter buttons, smaller FAQ, consistent hero top, centered callout ---- */
@media (max-width: 768px) {
  .btn { padding: 10px 22px; font-size: 15px; }
  .readmore { padding: 9px 18px; font-size: 12px; letter-spacing: 0.1em; }
  .faq .q { padding: 20px 2px; }
  .faq .qt { font-size: 17px; line-height: 1.35; }
  /* consistent hero top on every inner page (service pages were overridden to 60px) */
  .page-hero { padding-top: calc(var(--header-h) + 50px); padding-bottom: 60px; }
  .section.svchero-sec { padding-top: calc(var(--header-h) + 50px); padding-bottom: 60px; }
  /* center callout text + button */
  .callout, .cta-band .callout { align-items: center; text-align: center; }
}
@media (max-width: 480px) {
  .faq .qt { font-size: 16px; }
  .btn { padding: 11px 20px; }
  .readmore { padding: 8px 16px; }
}

/* ---- center the rotating "available" badge over the image on mobile ---- */
@media (max-width: 768px) {
  .solutions .col.b .sol-imgwrap .badge { left: 50%; right: auto; transform: translateX(-50%); }
}

/* ---- staggered work grid: smaller offset on mobile, stack on tiny phones ---- */
@media (max-width: 768px) {
  .work-grid > .work-item:nth-child(even), .workgrid > .wcard:nth-child(even) { transform: translateY(28px); }
}
@media (max-width: 420px) {
  .work-grid, .workgrid { grid-template-columns: 1fr; }
  .work-grid > .work-item:nth-child(even), .workgrid > .wcard:nth-child(even) { transform: none; }
}