/* ========================================
   Tablet / Mobile
======================================== */

@media (max-width: 900px) {

  /* ========================================
     Prevent Horizontal Overflow
  ======================================== */

  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }


  /* ========================================
     General Layout
  ======================================== */

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


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


  .footer-grid > div:first-child {
    grid-column:
      1 / -1;
  }


  .split-intro,
  .content-grid,
  .quality-grid,
  .value-grid {
    grid-template-columns:
      1fr;
  }


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


  .heading-row,
  .cta-card {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  /* ========================================
     Header
  ======================================== */

  .header-inner {
    min-height:
      76px;

    gap:
      1rem;
  }


  .brand {
    display:
      inline-flex;

    align-items:
      center;

    gap:
      0.7rem;

    min-width:
      0;

    max-width:
      calc(100% - 58px);
  }


  .brand img {
    width:
      64px;

    height:
      50px;

    flex-shrink:
      0;

    object-fit:
      contain;
  }


  .brand-name {
    min-width:
      0;

    line-height:
      1.04;

    white-space:
      nowrap;
  }


  .brand-name > span {
    font-size:
      0.62rem;

    letter-spacing:
      0.055em;
  }


  .brand-name strong {
    font-size:
      0.88rem;

    letter-spacing:
      0.12em;
  }


  /* ========================================
     Menu Toggle
  ======================================== */

  .menu-toggle {
    display:
      block;

    width:
      42px;

    height:
      42px;

    flex:
      0 0 42px;

    position:
      relative;

    z-index:
      130;
  }


  /* ========================================
     Mobile Sidebar Navigation
  ======================================== */

  .primary-nav {
    position:
      fixed;

    top:
      0;

    right:
      0;

    bottom:
      0;

    left:
      auto;

    width:
      min(82vw, 350px);

    height:
      100dvh;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      0;

    padding:
      82px
      22px
      24px;

    background:
      rgba(243, 247, 251, 0.99);

    box-shadow:
      -20px 0 50px
      rgba(6, 43, 92, 0.16);

    transform:
      translateX(105%);

    opacity:
      0;

    visibility:
      hidden;

    pointer-events:
      none;

    transition:
      transform 360ms cubic-bezier(.22, 1, .36, 1),
      opacity 220ms ease,
      visibility 0s linear 360ms;

    z-index:
      120;
  }


  .primary-nav.is-open {
    transform:
      translateX(0);

    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;

    transition-delay:
      0s;
  }


  .primary-nav a,
  .site-header.is-scrolled .primary-nav a {
    color:
      var(--graphite);

    padding:
      1rem 0.1rem;

    border-bottom:
      1px solid var(--line);
  }


  .primary-nav a::after {
    display:
      none;
  }


  .primary-nav .nav-cta,
  .site-header.is-scrolled .primary-nav .nav-cta {
    margin-top:
      1rem;

    text-align:
      center;

    background:
      var(--blue);

    color:
      white;

    border:
      0;
  }


  /* ========================================
     Hamburger Animation
  ======================================== */

  .menu-toggle[aria-expanded="true"] span:first-child {
    transform:
      translateY(4px)
      rotate(45deg);
  }


  .menu-toggle[aria-expanded="true"] span:last-child {
    transform:
      translateY(-4px)
      rotate(-45deg);
  }


  /* ========================================
     Mobile Menu Backdrop
  ======================================== */

  body::before {
    content:
      "";

    position:
      fixed;

    inset:
      0;

    background:
      rgba(6, 43, 92, 0.43);

    -webkit-backdrop-filter:
      blur(2px);

    backdrop-filter:
      blur(2px);

    opacity:
      0;

    visibility:
      hidden;

    pointer-events:
      none;

    transition:
      opacity 0.28s ease,
      visibility 0.28s ease;

    z-index:
      90;
  }


  body.nav-open::before {
    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;
  }


  body.nav-open {
    overflow:
      hidden;
  }


  .site-header:not(.is-scrolled) .menu-toggle {
    background:
      rgba(255, 255, 255, 0.94);
  }


  /* ========================================
     Page Hero
     About / Solutions / Products / Contact
  ======================================== */

  main .page-hero {
    padding-top:
      132px;

    padding-bottom:
      70px;
  }


  main .page-hero.compact {
    padding-bottom:
      62px;
  }


  main .page-hero h1 {
    max-width:
      900px;

    font-size:
      clamp(
        2.8rem,
        7vw,
        4.6rem
      );

    line-height:
      1.05;

    overflow-wrap:
      break-word;
  }


  /* ========================================
     Product Detail
     Karena halaman ini tidak mempunyai
     page-hero seperti halaman lain.
  ======================================== */

  main > .product-detail-page {
    padding-top:
      132px;
  }

}


/* ========================================
   Mobile
======================================== */

@media (max-width: 640px) {

  /* ========================================
     Container
  ======================================== */

  .container {
    width:
      min(
        calc(100% - 32px),
        var(--container)
      );
  }


  .section {
    padding-block:
      68px;
  }


  /* ========================================
     Header
  ======================================== */

  .header-inner {
    min-height:
      72px;

    gap:
      0.75rem;
  }


  .brand {
    gap:
      0.6rem;

    max-width:
      calc(100% - 56px);
  }


  .brand img {
    width:
      58px;

    height:
      46px;
  }


  .brand-name > span {
    font-size:
      0.56rem;

    letter-spacing:
      0.045em;
  }


  .brand-name strong {
    font-size:
      0.78rem;

    letter-spacing:
      0.11em;
  }


  /* ========================================
     Page Hero
  ======================================== */

  main .page-hero {
    padding-top:
      116px;

    padding-bottom:
      58px;
  }


  main .page-hero.compact {
    padding-bottom:
      54px;
  }


  main .page-hero h1 {
    font-size:
      clamp(
        2.2rem,
        10vw,
        3.25rem
      );

    line-height:
      1.05;
  }


  /* ========================================
     Product Detail
  ======================================== */

  main > .product-detail-page {
    padding-top:
      116px;
  }


  /* ========================================
     Products
  ======================================== */

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


  /* ========================================
     Footer
  ======================================== */

  .footer-grid {
    grid-template-columns:
      1fr;

    gap:
      2rem;
  }


  .footer-grid > div:first-child {
    grid-column:
      auto;
  }


  /* ========================================
     Value Points
  ======================================== */

  .value-points {
    grid-template-columns:
      1fr;
  }


  .value-points div {
    border-right:
      0;

    border-bottom:
      1px solid var(--line-light);
  }


  /* ========================================
     CTA
  ======================================== */

  .cta-card {
    width:
      100%;

    gap:
      1.4rem;
  }


  .cta-card .btn {
    width:
      100%;
  }

}


/* ========================================
   Small Mobile
======================================== */

@media (max-width: 420px) {

  .container {
    width:
      calc(100% - 24px);
  }


  /* Header */

  .header-inner {
    min-height:
      68px;
  }


  .brand {
    gap:
      0.5rem;
  }


  .brand img {
    width:
      52px;

    height:
      43px;
  }


  .brand-name > span {
    font-size:
      0.5rem;

    letter-spacing:
      0.035em;
  }


  .brand-name strong {
    font-size:
      0.71rem;

    letter-spacing:
      0.09em;
  }


  .menu-toggle {
    width:
      40px;

    height:
      40px;

    flex-basis:
      40px;
  }


  .menu-toggle span {
    left:
      11px;
  }


  /* Navigation */

  .primary-nav {
    width:
      min(88vw, 330px);

    padding:
      76px
      18px
      22px;
  }


  /* Page hero */

  main .page-hero {
    padding-top:
      108px;

    padding-bottom:
      52px;
  }


  main .page-hero h1 {
    font-size:
      clamp(
        2.05rem,
        10.5vw,
        2.8rem
      );
  }


  /* Product Detail */

  main > .product-detail-page {
    padding-top:
      108px;
  }

}