/* =============================================================================
   Pinnacle Digital Sdn Bhd — Responsive layer
   -----------------------------------------------------------------------------
   Breakpoints
     1600px+  large desktop monitors
     1200px   desktop
     1080px   small desktop / laptop (mobile navigation begins)
     900px    tablet landscape
     720px    tablet portrait
     560px    mobile
     380px    small mobile
   ========================================================================== */

/* --- Large desktop monitors --------------------------------------------- */
@media (min-width: 1600px) {
  :root {
    --container: 1360px;
    --gutter: 3.5rem;
  }
  .hero__visual { max-width: 620px; }
}

/* --- Desktop ------------------------------------------------------------- */
@media (max-width: 1200px) {
  .site-footer__top { grid-template-columns: 1.4fr 1fr 1.2fr; }
  .site-footer__col--contact { grid-column: 1 / -1; }
  .site-footer__col--contact .site-footer__reg { max-width: 420px; }
}

/* --- Laptop / small desktop: switch to mobile navigation ----------------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .nav-toggle { display: block; }
  :root { --header-h: 76px; }

  .hero__inner { gap: 3rem; }
  .hero__chip--1 { left: 0; }
  .hero__chip--2 { right: 0; }

  .cta-band__inner { grid-template-columns: minmax(0, 1fr); }
  .cta-band__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* --- Tablet landscape ---------------------------------------------------- */
@media (max-width: 900px) {
  .hero { padding-block: 3.5rem 3rem; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__visual { order: -1; max-width: 420px; }
  .hero__text { max-width: 100%; }

  .split,
  .service-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .split--reverse .split__media,
  .service-row--reverse .service-row__visual { order: -1; }
  .media-frame--tall { aspect-ratio: 4 / 3; }

  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .culture { grid-template-columns: minmax(0, 1fr); }

  .process__track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .process__track::before { display: none; }

  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-layout .contact-panel { order: 2; }

  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__col--contact { grid-column: auto; }

  .page-hero__ridge { opacity: 0.28; width: 60%; }
}

/* --- Tablet portrait ----------------------------------------------------- */
@media (max-width: 720px) {
  :root { --section-y: 3.75rem; }

  .grid--2,
  .grid--3,
  .grid--4,
  .grid--5 { grid-template-columns: minmax(0, 1fr); }

  .stat-strip { grid-template-columns: minmax(0, 1fr); }

  /* Decorative offset panel would extend past the gutter on narrow screens. */
  .media-accent { display: none; }

  .form-grid { grid-template-columns: minmax(0, 1fr); }

  .hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
  .logo-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .philosophy__quote { max-width: 100%; }

  .service-row__number { font-size: 2.4rem; }

  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .site-footer__bottom { flex-direction: column; }
}

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 560px) {
  :root { --header-h: 68px; }

  .header-cta { display: none; }
  .brand__logo { height: 34px; }
  .site-header.is-scrolled .brand__logo { height: 31px; }

  .hero { padding-block: 2.75rem 2.75rem; }
  .hero__visual { max-width: 320px; }
  .hero__chip { font-size: 0.72rem; padding: 0.45rem 0.7rem; }
  .hero__chip--2 { right: -2%; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .btn--lg { padding: 0.9rem 1.4rem; font-size: var(--fs-sm); }

  .process__track { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .process__dot { width: 52px; height: 52px; margin-bottom: 1rem; }

  .segment-card { flex-direction: column; gap: 0.9rem; }

  .cta-band__actions { flex-direction: column; align-items: stretch; }
  .cta-band__actions .btn { width: 100%; }
  .cta-band__mail { justify-content: center; }

  .mobile-nav__panel { width: 100%; }

  .media-frame__badge { font-size: 0.68rem; padding: 0.7rem 0.9rem; }

  .logo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .form-card,
  .contact-panel { border-radius: var(--radius-lg); }

  .to-top { width: 42px; height: 42px; }
}

/* --- Small mobile -------------------------------------------------------- */
@media (max-width: 380px) {
  :root { --gutter: 1.1rem; }

  .hero__tagline { font-size: 0.68rem; letter-spacing: 0.12em; }
  .hero__meta { grid-template-columns: minmax(0, 1fr); }
  .logo-grid { grid-template-columns: minmax(0, 1fr); }
  .chip { font-size: var(--fs-xs); }
}

/* --- Landscape phones ---------------------------------------------------- */
@media (max-height: 460px) and (orientation: landscape) {
  .mobile-nav__panel { padding-block: 1rem; }
  .mobile-nav__link { padding: 0.7rem 0.25rem; font-size: 1.05rem; }
}

/* --- Hover-capable pointers only ----------------------------------------- */
@media (hover: none) {
  .card:hover,
  .pillar-card:hover,
  .sector-card:hover,
  .culture__item:hover,
  .segment-card:hover { transform: none; }
  .logo-tile img { filter: grayscale(0); opacity: 0.9; }
}

/* --- Forced colours / high contrast -------------------------------------- */
@media (forced-colors: active) {
  .btn { border: 1px solid currentColor; }
  .card, .pillar-card, .sector-card, .culture__item { border: 1px solid currentColor; }
  .nav__link.is-active::after { background: currentColor; }
}