/* =========================================
   PIXYGRID — Custom Override CSS
   Light Theme + #4e62ad Accent | Outfit Font
   Gradient: #272268 → #833ebe
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --pg-accent: #4e62ad;
  --pg-accent-2: #833ebe;
  --pg-gradient: linear-gradient(135deg, #272268 0%, #573792 50%, #833ebe 100%);
  --pg-gradient-r: linear-gradient(135deg, #833ebe 0%, #272268 100%);
  --pg-black: #0d0d0d;
  --pg-white: #ffffff;
  --pg-gray: #f5f5f3;
  --pg-gray2: #ebebea;
  --pg-mid: #999992;
  --pg-border: rgba(0,0,0,0.08);
  --pg-radius: 20px;
  --pg-radius-lg: 28px;
  --pg-radius-xl: 40px;
}

/* ---- GLOBAL ---- */
*, *::before, *::after { box-sizing: border-box; }
body, html { font-family: 'Outfit', sans-serif !important; background: var(--pg-white) !important; color: var(--pg-black) !important; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6, .mil-h1, .mil-h2, .mil-h3, .mil-h4, .mil-h5, .mil-h6 { font-family: 'Outfit', sans-serif !important; letter-spacing: -0.03em; }
p, span, a, li, div { font-family: 'Outfit', sans-serif !important; }

/* ---- CURSOR ---- */
.mil-ball { background: var(--pg-black) !important; border: none !important; width: 32px !important; height: 32px !important; }

/* ---- PRELOADER ---- */
.mil-preloader { background: var(--pg-white) !important; }
.mil-preloader .mil-h3 { color: var(--pg-black) !important; font-weight: 900 !important; font-size: clamp(28px, 5vw, 60px) !important; }
.mil-reveal-box { background: var(--pg-accent) !important; }

/* ---- PROGRESS ---- */
.mil-progress-track { background: var(--pg-gray2) !important; }
.mil-progress { background: var(--pg-gradient) !important; }

/* ---- NAVIGATION ---- */
.mil-menu-frame { background: transparent !important; }
.mil-frame-top { background: rgba(255,255,255,0.95) !important; backdrop-filter: blur(20px) !important; border-bottom: 1px solid var(--pg-border) !important; padding: 16px 40px !important; }
.mil-logo { font-family: 'Outfit', sans-serif !important; font-weight: 900 !important; font-size: 22px !important; color: var(--pg-black) !important; letter-spacing: -0.04em !important; text-decoration: none !important; }
.mil-menu-btn span, .mil-menu-btn span::before, .mil-menu-btn span::after { background: var(--pg-black) !important; }
.mil-menu-content { background: var(--pg-white) !important; }
.mil-main-menu a { font-family: 'Outfit', sans-serif !important; font-weight: 800 !important; font-size: clamp(32px, 6vw, 72px) !important; color: rgba(0,0,0,0.15) !important; text-transform: uppercase !important; letter-spacing: -0.03em !important; transition: color 0.3s ease !important; line-height: 1.1 !important; }
.mil-main-menu a:hover, .mil-main-menu li.mil-active > a { color: var(--pg-black) !important; }

/* ---- HERO ---- */
.mil-banner { background: var(--pg-white) !important; min-height: 100vh !important; position: relative !important; overflow: hidden !important; }
.mil-banner.mil-dark-bg { background: var(--pg-black) !important; }
.mil-banner .mil-about-photo img, .mil-banner-img-frame { border-radius: 24px !important; }
.mil-banner .mil-h1 { font-size: clamp(52px, 9vw, 130px) !important; font-weight: 900 !important; line-height: 0.9 !important; letter-spacing: -0.04em !important; text-transform: uppercase !important; color: var(--pg-white) !important; }
.mil-banner .mil-h1 em { font-style: normal !important; background: var(--pg-gradient) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }

/* ---- LABELS & HEADINGS ---- */
.mil-suptitle, .mil-text-sm.mil-suptitle { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--pg-mid) !important; }
.mil-h2 { font-size: clamp(36px, 5vw, 68px) !important; font-weight: 900 !important; letter-spacing: -0.035em !important; text-transform: uppercase !important; line-height: 0.95 !important; }

/* ---- DARK / SOFT / GRADIENT SECTIONS ---- */
.mil-dark-bg { background: var(--pg-black) !important; border-radius: var(--pg-radius-xl) !important; }
.mil-dark-bg .mil-h2, .mil-dark-bg .mil-h3, .mil-dark-bg .mil-h4, .mil-dark-bg p { color: var(--pg-white) !important; }
.mil-dark-bg .mil-suptitle { color: rgba(255,255,255,0.4) !important; }
.mil-soft-bg { background: var(--pg-gray) !important; border-radius: var(--pg-radius-xl) !important; }
.mil-gradient-bg { background: var(--pg-gradient) !important; border-radius: var(--pg-radius-xl) !important; }
.mil-gradient-bg * { color: var(--pg-white) !important; }

/* ---- BUTTONS ---- */
.mil-button { font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: 0.02em !important; border-radius: 50px !important; padding: 14px 32px !important; transition: all 0.3s ease !important; }
.mil-button.mil-arrow-place { background: var(--pg-black) !important; color: var(--pg-white) !important; border: none !important; }
.mil-button.mil-arrow-place:hover { background: var(--pg-accent) !important; transform: translateY(-2px) !important; }
.mil-btn-outline { background: transparent !important; border: 1.5px solid var(--pg-border) !important; color: var(--pg-black) !important; }
.mil-btn-outline:hover { background: var(--pg-black) !important; color: var(--pg-white) !important; border-color: var(--pg-black) !important; }
.mil-arrow { background: var(--pg-gradient) !important; border-radius: 50% !important; }

/* ---- STATS ---- */
.mil-counter-frame { border-top: 1px solid var(--pg-border) !important; padding-top: 40px !important; }
.mil-counter { font-size: clamp(48px, 7vw, 80px) !important; font-weight: 900 !important; letter-spacing: -0.04em !important; line-height: 1 !important; background: var(--pg-gradient) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.mil-counter-text { font-size: 14px !important; color: var(--pg-mid) !important; line-height: 1.5 !important; }

/* ---- SERVICE CARDS ---- */
.mil-service-card-sm { border-bottom: 1px solid var(--pg-border) !important; border-top: none !important; border-left: none !important; border-right: none !important; background: transparent !important; border-radius: 0 !important; padding: 28px 0 !important; display: flex !important; align-items: center !important; gap: 24px !important; transition: padding 0.4s ease !important; }
.mil-service-card-sm:hover { padding: 34px 0 !important; }
.mil-service-card-sm .mil-service-num { font-size: 13px !important; font-weight: 700 !important; color: var(--pg-mid) !important; width: 52px !important; flex-shrink: 0 !important; }
.mil-service-card-sm h4, .mil-service-card-sm .mil-h4 { font-size: clamp(20px, 2.8vw, 36px) !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: -0.02em !important; flex: 1 !important; transition: color 0.3s !important; margin: 0 !important; }
.mil-service-card-sm:hover h4, .mil-service-card-sm:hover .mil-h4 { color: var(--pg-accent) !important; }
.mil-service-arrow-btn { width: 48px !important; height: 48px !important; border: 1.5px solid var(--pg-border) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s !important; flex-shrink: 0 !important; background: transparent !important; }
.mil-service-card-sm:hover .mil-service-arrow-btn { background: var(--pg-accent) !important; border-color: var(--pg-accent) !important; }

/* ---- IMAGES ---- */
.mil-about-photo { border-radius: var(--pg-radius-lg) !important; overflow: hidden !important; }
.mil-about-photo img { border-radius: var(--pg-radius-lg) !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
.mil-project-card, .mil-team-card, .mil-blog-card { border-radius: var(--pg-radius-lg) !important; overflow: hidden !important; }
.mil-project-card img, .mil-team-card img, .mil-blog-card img { border-radius: var(--pg-radius-lg) !important; transition: transform 0.6s ease !important; }
.mil-project-card:hover img, .mil-team-card:hover img { transform: scale(1.04) !important; }
.mil-glare-frame { position: relative !important; overflow: hidden !important; border-radius: var(--pg-radius-lg) !important; }
.mil-glare-frame::after { content: '' !important; position: absolute !important; top: -50% !important; left: -60% !important; width: 60% !important; height: 200% !important; background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100%) !important; transform: skewX(-15deg) translateX(-100%) !important; transition: transform 0.7s ease !important; pointer-events: none !important; z-index: 2 !important; }
.mil-glare-frame:hover::after { transform: skewX(-15deg) translateX(350%) !important; }

/* ---- PORTFOLIO ---- */
.mil-portfolio-item { border-radius: var(--pg-radius-lg) !important; overflow: hidden !important; position: relative !important; }
.mil-portfolio-cover { border-radius: var(--pg-radius-lg) !important; }
.mil-portfolio-item .mil-hover-link { background: var(--pg-gradient) !important; opacity: 0 !important; border-radius: var(--pg-radius-lg) !important; transition: opacity 0.4s ease !important; }
.mil-portfolio-item:hover .mil-hover-link { opacity: 0.85 !important; }

/* ---- PROCESS ---- */
.mil-process-item { border-bottom: 1px solid var(--pg-border) !important; padding: 24px 0 !important; cursor: pointer !important; transition: all 0.3s !important; }
.mil-process-num { font-size: 13px !important; font-weight: 700 !important; color: var(--pg-mid) !important; }
.mil-process-item.mil-active .mil-process-num { color: var(--pg-accent) !important; }
.mil-process-item .mil-h4 { font-size: clamp(18px, 2vw, 26px) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: -0.02em !important; color: rgba(255,255,255,0.25) !important; transition: color 0.3s !important; }
.mil-process-item.mil-active .mil-h4 { color: var(--pg-white) !important; }

/* ---- TESTIMONIALS ---- */
.mil-testimonial-card { background: var(--pg-white) !important; border-radius: var(--pg-radius-lg) !important; border: 1px solid var(--pg-border) !important; padding: 36px !important; }
.mil-testimonial-photo { border-radius: 14px !important; overflow: hidden !important; width: 72px !important; height: 88px !important; flex-shrink: 0 !important; }
.mil-testimonial-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 14px !important; }
.mil-quote { font-size: clamp(16px, 2.2vw, 22px) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: -0.02em !important; line-height: 1.25 !important; }

/* ---- BLOG ---- */
.mil-blog-card { border-radius: var(--pg-radius-lg) !important; overflow: hidden !important; background: var(--pg-gray) !important; }
.mil-blog-card img { border-radius: var(--pg-radius-lg) var(--pg-radius-lg) 0 0 !important; width: 100% !important; object-fit: cover !important; }
.mil-blog-tag { display: inline-block !important; background: var(--pg-black) !important; color: var(--pg-white) !important; border-radius: 50px !important; padding: 5px 14px !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; }

/* ---- MARQUEE ---- */
.mil-marquee-wrapper { overflow: hidden !important; border-top: 1px solid var(--pg-border) !important; border-bottom: 1px solid var(--pg-border) !important; padding: 20px 0 !important; }
.mil-marquee-inner { display: flex !important; gap: 40px !important; white-space: nowrap !important; animation: pgMarquee 22s linear infinite !important; }
.mil-marquee-inner:hover { animation-play-state: paused !important; }
.mil-marquee-text { font-size: clamp(40px, 7vw, 90px) !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: -0.03em !important; color: rgba(0,0,0,0.07) !important; flex-shrink: 0 !important; }
.mil-marquee-dot { width: 12px !important; height: 12px !important; border-radius: 50% !important; background: var(--pg-accent) !important; flex-shrink: 0 !important; align-self: center !important; }
@keyframes pgMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---- FAQ ---- */
.mil-accordion-group { border-bottom: 1px solid var(--pg-border) !important; }
.mil-accordion-menu { padding: 22px 0 !important; cursor: pointer !important; font-weight: 700 !important; font-size: clamp(14px, 1.5vw, 17px) !important; text-transform: uppercase !important; letter-spacing: -0.01em !important; }
.mil-symbol { width: 28px !important; height: 28px !important; border: 1.5px solid var(--pg-border) !important; border-radius: 50% !important; }

/* ---- FOOTER ---- */
footer, .mil-footer { background: var(--pg-black) !important; border-radius: 32px 32px 0 0 !important; }
.mil-footer-logo { filter: brightness(0) invert(1) !important; }
.mil-footer-link { color: rgba(255,255,255,0.55) !important; transition: color 0.3s !important; font-size: 14px !important; text-decoration: none !important; font-weight: 400 !important; }
.mil-footer-link:hover { color: var(--pg-white) !important; }
.mil-footer-title { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: rgba(255,255,255,0.35) !important; margin-bottom: 20px !important; }
.mil-footer-wordmark { font-size: clamp(60px, 14vw, 160px) !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: -0.04em !important; color: rgba(255,255,255,0.04) !important; text-align: center !important; line-height: 1 !important; user-select: none !important; margin-top: 20px !important; }
.mil-social-icon { width: 36px !important; height: 36px !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: rgba(255,255,255,0.5) !important; font-size: 14px !important; text-decoration: none !important; transition: all 0.3s !important; margin-right: 8px !important; }
.mil-social-icon:hover { border-color: var(--pg-accent) !important; color: var(--pg-accent) !important; background: rgba(78,98,173,0.1) !important; }

/* ---- ACCENTS ---- */
.mil-gradient-text { background: var(--pg-gradient) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.mil-gradient-badge { background: var(--pg-gradient) !important; color: var(--pg-white) !important; border-radius: 50px !important; padding: 6px 18px !important; font-size: 12px !important; font-weight: 600 !important; display: inline-block !important; }
.mil-divider { border-color: var(--pg-border) !important; }
.mil-cta-banner { background: var(--pg-black) !important; border-radius: var(--pg-radius-xl) !important; position: relative !important; overflow: hidden !important; }
.mil-cta-banner::before { content: '' !important; position: absolute !important; inset: 0 !important; background: var(--pg-gradient) !important; opacity: 0.15 !important; pointer-events: none !important; }
.mil-pill-nav { position: fixed !important; bottom: 32px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 1000 !important; background: rgba(255,255,255,0.95) !important; backdrop-filter: blur(16px) !important; border: 1px solid var(--pg-border) !important; border-radius: 50px !important; padding: 12px 28px !important; font-weight: 700 !important; font-size: 15px !important; color: var(--pg-black) !important; cursor: pointer !important; transition: all 0.3s ease !important; display: flex !important; align-items: center !important; gap: 10px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; }
.mil-pill-nav:hover { background: var(--pg-black) !important; color: var(--pg-white) !important; }

/* ---- SCROLL ANIMATIONS ---- */
.mil-up { opacity: 0; transform: translateY(40px) scale(0.98); }

/* ---- SECTION PADDING ---- */
.mil-p-120-90 { padding: 120px 0 90px !important; }
.mil-p-90-60 { padding: 90px 0 60px !important; }
.mil-partner-logo { opacity: 0.35 !important; transition: opacity 0.3s !important; filter: grayscale(1) !important; }
.mil-partner-logo:hover { opacity: 0.75 !important; filter: grayscale(0) !important; }

/* ============================================================
   RESPONSIVE — FULL MOBILE-FIRST PASS
   ============================================================ */

/* ── Tablet ≤1024px ── */
@media (max-width: 1024px) {
  .mil-frame-top { padding: 14px 28px !important; }
  .container { padding-left: 20px !important; padding-right: 20px !important; }
  #pgNav { padding: 16px 24px !important; }
  #pgNav.scrolled { padding: 12px 24px !important; }
  .cs-score-grid { grid-template-columns: repeat(2,1fr) !important; }
  .cs-svc-grid { grid-template-columns: repeat(2,1fr) !important; }
  .cs-about-row, .cs-ac-inner { grid-template-columns: 1fr !important; gap: 40px !important; }
  .cs-proc-row { grid-template-columns: repeat(2,1fr) !important; }
  .cs-proc-item:nth-child(2) { border-right: none !important; }
  .cs-proc-item:nth-child(3) { border-top: 1px solid rgba(0,0,0,0.07) !important; }
  .pg-stats-row { grid-template-columns: repeat(2,1fr) !important; gap: 32px 24px !important; }
}

/* ── Mobile ≤768px ── */
@media (max-width: 768px) {
  /* Template */
  .mil-frame-top { padding: 14px 20px !important; }
  .mil-h2 { font-size: 36px !important; }
  .mil-footer-wordmark { font-size: 60px !important; }
  .mil-counter { font-size: 48px !important; }
  .mil-pill-nav { bottom: 20px !important; }
  .mil-main-menu a { font-size: 32px !important; }

  /* PG Nav */
  #pgNavLinks, #pgNav .pg-nav-cta { display: none !important; }
  #pgNav { padding: 16px 20px !important; }
  #pgNav.scrolled { padding: 12px 20px !important; }

  /* Homepage hero */
  #hero { min-height: 100svh !important; padding-bottom: 0 !important; }
  #hero h1 { font-size: clamp(38px, 10vw, 64px) !important; margin-bottom: 16px !important; }
  #hero > div[style*="48px 96px"] { padding: 0 20px 72px !important; max-width: 100% !important; }
  #hero > div[style*="right:36px"] { display: none !important; }

  /* Work page hero banners */
  .pg-hero { padding-top: 64px !important; }
  .pg-hero-banner { height: 300px !important; border-radius: 16px !important; }
  .pg-hero-content { padding: 24px 20px !important; }
  .pg-hero-content h1 { font-size: clamp(26px, 8vw, 44px) !important; }
  .pg-hero-content p { display: none !important; }
  .pg-hero-breadcrumb { font-size: 11px !important; }
  .pg-hero-label { font-size: 10px !important; }

  /* PG sections */
  .pg-section { padding: 60px 0 !important; }
  .pg-dark-wrap, .pg-soft-wrap { margin: 0 10px !important; padding: 48px 20px !important; border-radius: 20px !important; }

  /* Scoreboard */
  .cs-score-grid { grid-template-columns: repeat(2,1fr) !important; }
  .cs-score-cell { padding: 28px 16px !important; }
  .cs-score-num { font-size: 32px !important; }
  .cs-score-bg { font-size: 60px !important; }

  /* Service grids */
  .cs-svc-grid, .cs-svc-grid.two-col { grid-template-columns: 1fr !important; }

  /* About / client rows */
  .cs-about-row, .cs-ac-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  .cs-ac-img { height: 240px !important; }

  /* Process */
  .cs-proc-row { grid-template-columns: 1fr !important; border-radius: 16px !important; }
  .cs-proc-item { border-right: none !important; border-bottom: 1px solid rgba(0,0,0,0.07) !important; padding: 24px 20px !important; }
  .cs-proc-item:last-child { border-bottom: none !important; }

  /* Client card facts */
  .cs-client-facts { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .cs-client-card { padding: 32px 24px !important; }

  /* Browser iframe */
  .cs-browser iframe { height: 280px !important; }
  .cs-browser-url { font-size: 10px !important; }

  /* Related projects */
  .cs-rel-grid { grid-template-columns: 1fr !important; }
  .cs-rel-card { height: 180px !important; }
  .cs-rel-sec { padding: 48px 0 !important; }

  /* CTA */
  .pg-cta-banner { margin: 0 !important; border-radius: 20px !important; min-height: 240px !important; }
  .pg-cta-content { padding: 36px 24px !important; }
  .pg-cta-content h2 { font-size: clamp(26px, 7vw, 36px) !important; }
  .pg-cta-content p { font-size: 14px !important; margin-bottom: 24px !important; }
  .pg-cta-banner > img[class="pg-cta-img"] { opacity: 0.12 !important; width: 65% !important; }

  /* Footer */
  .pg-footer { padding: 48px 20px 0 !important; border-radius: 20px 20px 0 0 !important; }
  .pg-footer .row > [class*="col-"] { margin-bottom: 28px !important; padding-right: 0 !important; }
  .pg-footer-wordmark { font-size: clamp(44px, 14vw, 72px) !important; }
  .pg-sub-row { flex-direction: column !important; gap: 8px !important; }
  .pg-sub-input { width: 100% !important; }

  /* Homepage work grid */
  .pg-work-grid { grid-template-columns: 1fr !important; }
  .pg-work-item.pg-work-large { grid-column: auto !important; grid-row: auto !important; min-height: 260px !important; }
  .pg-work-item.pg-work-sm { min-height: 200px !important; }

  /* Work page project grid */
  .pg-proj-frame { height: 200px !important; }
  .pg-proj-frame.pg-vert { height: 240px !important; }
  .pg-portfolio-col-right { margin-top: 0 !important; padding-top: 0 !important; }

  /* Homepage stats */
  .pg-stats-row { grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; padding-top: 40px !important; margin-top: 40px !important; }
  .pg-stat-num { font-size: 36px !important; }

  /* Homepage services */
  .pg-service-row { padding: 18px 0 !important; gap: 12px !important; }
  .pg-service-name { font-size: clamp(15px, 4.5vw, 20px) !important; }
  .pg-service-detail { padding-left: 0 !important; }
  .pg-service-item:hover .pg-service-row { padding: 22px 0 !important; }

  /* Why Us */
  .pg-why-track-outer { padding: 60px 16px 40px !important; }
  .pg-why-card { width: 256px !important; margin-right: 48px !important; }

  /* Logos */
  .pg-logos-grid { grid-template-columns: repeat(2,1fr) !important; }
  .pg-logo-cell { padding: 24px 12px !important; }
  .pg-logo-name { font-size: 13px !important; }
  .pg-logo-icon { width: 30px !important; height: 30px !important; }
  .pg-logo-cell:nth-child(5n) { border-right: 1px solid rgba(0,0,0,0.07) !important; }
  .pg-logo-cell:nth-child(2n) { border-right: none !important; }

  /* Blog (homepage) */
  .pg-blog-row { flex-direction: column !important; height: auto !important; }
  .pg-blog-card { flex: none !important; height: 240px !important; }
  .pg-blog-bottom { transform: translateY(0) !important; }

  /* Process (homepage dark section) */
  .pg-dark-wrap .row { flex-direction: column !important; }
  .pg-dark-wrap .col-lg-5 { padding-right: 0 !important; margin-bottom: 28px !important; }
  .pg-dark-wrap .col-lg-7 .row { flex-direction: column !important; }
  .pg-dark-wrap .col-lg-7 .col-lg-6:last-child { display: none !important; }

  /* Testimonials */
  .pg-t-stack { height: 500px !important; }
  .pg-t-card { padding: 24px !important; }
  .pg-t-photo { width: 64px !important; height: 76px !important; }

  /* About page: team staggered flex → vertical stack */
  .pg-team-flex { flex-direction: column !important; align-items: center !important; gap: 24px !important; padding: 0 16px 32px !important; }
  .pg-team-flex > div { flex: none !important; width: 100% !important; max-width: 300px !important; transform: translateY(0) !important; }
  .pg-team-flex > div[style*="z-index:2"] { order: -1 !important; }

  /* About page: story / values / mission */
  .pg-story-img { height: 260px !important; }
  .pg-mv-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .pg-values-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* JoyNJoyy reels */
  .jj-vid-grid { grid-template-columns: 1fr !important; }

  /* Oli mascot grid */
  .oli-grid { grid-template-columns: 1fr !important; }
  .oli-card { height: 280px !important; }

  /* Work page 3-stat result cards */
  .cs-results-3col { grid-template-columns: 1fr !important; }
}

/* ── Small mobile ≤480px ── */
@media (max-width: 480px) {
  .cs-score-grid { grid-template-columns: 1fr !important; }
  .cs-score-cell { border-right: none !important; }
  #hero h1 { font-size: clamp(32px, 9vw, 52px) !important; }
  .pg-hero-content h1 { font-size: clamp(22px, 7vw, 36px) !important; }
  .pg-cta-pill { padding: 7px 7px 7px 18px !important; font-size: 12px !important; }
  .pg-cta-pill-icon { width: 32px !important; height: 32px !important; margin-left: 12px !important; }
  .pg-footer { padding: 36px 16px 0 !important; }
  .cs-client-card { padding: 24px 16px !important; }
}