/* ==========================================================================
   Arsh Bangalore General Trading LLC — Responsive behaviour
   Breakpoints follow the reference: 1366 / 1280 / 1024 / 991 / 767 / 480
   ========================================================================== */

@media (max-width: 1366px) {
  :root { --gutter: 40px; }
  .split { grid-template-columns: 470px 1fr; gap: 60px; }
  .process { grid-template-columns: 460px 1fr; gap: 60px; }
  .commitments { grid-template-columns: 520px 1fr; gap: 60px; }
  .page-hero__lead { grid-template-columns: 470px 1fr; gap: 60px; }
  .founder__inner { gap: 60px; }
  .hero__panel { padding: 30px; }
  .hero__panel-title { font-size: 30px; }
}

@media (max-width: 1280px) {
  :root { --text-display: 60px; --text-h2: 44px; --text-h2-sm: 36px; }
  .hero { height: 740px; }
  .hero__panel-title { font-size: 27px; }
  .hero__panel-text { font-size: 15px; }
  .carousel__track { grid-auto-columns: 340px; }
  .card__media { height: 220px; }
  .page-hero__media { height: 420px; }
  .founder__photo img { width: 100%; height: 460px; }
  .founder__inner { grid-template-columns: 340px 1fr; }
}

@media (max-width: 1024px) {
  .topbar { display: none; }
  .site-header__cta { display: none; }

  :root {
    --gutter: 32px;
    --text-display: 48px;
    --text-h2: 38px;
    --text-h2-sm: 32px;
    --space-section: 60px;
    --space-section-lg: 64px;
  }

  .nav { display: none; }
  .nav-toggle { display: flex; }

  /* Mobile navigation panel */
  .nav.is-open {
    display: block;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    overflow-y: auto;
    padding: 10px var(--gutter) 60px;
    background: var(--color-white);
    border-top: 1px solid var(--color-line);
  }
  .nav.is-open .nav__list { display: block; }
  .nav.is-open .nav__item { border-bottom: 1px solid var(--color-line); }
  .nav.is-open .nav__link { justify-content: space-between; padding: 18px 0; font-size: var(--text-xs); }
  .nav.is-open .nav__link::after { display: none; }
  .nav.is-open .nav__sub {
    position: static;
    min-width: 0;
    padding: 0 0 14px;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .nav.is-open .nav__item.is-open > .nav__sub { display: block; }
  .nav.is-open .nav__sub a { padding: 10px 0 10px 16px; }
  .nav.is-open .nav__item.is-open > .nav__link .nav__caret { transform: rotate(180deg); }

  /* Hero: the bento becomes a stack of media card, panel and actions */
  .hero { height: auto; padding: 14px var(--gutter) 24px; }
  .hero__slide {
    position: static;
    display: none;
    inset: auto;
    opacity: 1;
    visibility: visible;
  }
  .hero__slide.is-active { display: block; }
  .hero__item {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none;
    opacity: 1;
  }
  .hero__item--main { height: 380px !important; }
  .hero__item--t2, .hero__item--t3, .hero__item--t4, .hero__item--t5,
  .hero__item--p2, .hero__item--p3 { display: none; }
  .hero__item--p1, .hero__item--lead { margin-top: 14px; }
  .hero__actions {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
  }
  .hero__item--discover, .hero__item--prev, .hero__item--next { height: 62px !important; }
  .hero__dots { position: static; margin-top: 18px; }
  .hero__caption { left: 30px; bottom: 28px; }

  .page-hero__media { height: 360px; }
  .page-hero__body { left: 32px; right: 32px; bottom: 34px; }

  .split,
  .split--wide-left,
  .page-hero__lead,
  .media-row,
  .contact-grid,
  .founder__inner { grid-template-columns: 1fr; gap: 34px; }

  .media-row--reverse .media-row__media { order: 0; }
  .media-row__media img { height: 380px; }
  .media-row__media--portrait img { height: 460px; }

  .stats { grid-template-columns: repeat(3, 1fr); margin-top: 60px; }
  .stat { padding: 22px 0 22px 22px; }
  .stat:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n + 4) { border-top: 1px solid var(--color-line); }

  .panels { grid-template-columns: 1fr; margin-top: 50px; }

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

  .process, .commitments { grid-template-columns: 1fr; gap: 34px; }
  .process__intro, .commitments__intro { position: static; }
  .process__items li { grid-template-columns: 60px 1fr; }

  .mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: 260px;
  }
  .mosaic--row { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 300px; }
  .mosaic--row .mosaic__cell:first-child { grid-column: span 2; }
  .mosaic__cell--tall { grid-row: span 1; }

  .founder__photo img { height: 420px; object-position: center 20%; }
  .founder { padding-block: 64px; }

  .contact-card { padding: 32px 30px 36px; }
}

@media (max-width: 991px) {
  :root { --text-display: 42px; --text-h2: 34px; }
  .carousel__track { grid-auto-columns: 320px; gap: 20px; }
  .page-hero__media { height: 320px; }
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --text-display: 34px;
    --text-h2: 28px;
    --text-h2-sm: 26px;
    --text-h3: 30px;
    --text-lead: 17px;
    --space-section: 48px;
    --space-section-lg: 52px;
    --space-band: 40px;
    --header-h: 84px;
    --radius: 10px;
    --radius-lg: 14px;
  }

  .site-logo img { height: 64px; }

  .hero__item--main { height: 300px !important; }
  .hero__caption { left: 22px; bottom: 22px; }
  .hero__panel { padding: 26px 24px; }
  .hero__panel-title { font-size: 22px; }
  .hero__panel-text { font-size: 14px; }
  .hero__actions { grid-template-columns: 1fr 1fr; }
  .hero__item--discover { grid-column: 1 / -1; }
  .hero__action { font-size: 13px; }

  .page-hero__media { height: 280px; }
  .page-hero__body { left: 22px; right: 22px; bottom: 26px; }

  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3n + 1) { padding-left: 22px; border-left: 1px solid var(--color-line); }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--color-line); }

  .panel { padding: 30px 26px; }
  .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; }
  .card__media { height: 220px; }

  .mosaic { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 230px; }
  .mosaic--row { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .mosaic--row .mosaic__cell:first-child { grid-column: span 1; }

  .form__row { grid-template-columns: 1fr; }
  .contact-card { padding: 28px 22px 32px; }
  .accordion__trigger { font-size: var(--text-base); padding: 22px; }
  .accordion__panel p { padding: 0 22px 24px; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .footer__bottom { grid-template-columns: 1fr; gap: 14px; text-align: center; }
  .footer__legal { justify-content: center; }

  .carousel__head { flex-direction: column; align-items: flex-start; }
  .map-embed { height: 300px; }
}

@media (max-width: 480px) {
  :root { --text-display: 30px; --text-h2: 26px; }
  .hero__item--main { height: 260px !important; }
  .carousel__track { grid-auto-columns: 84vw; }
  .footer__grid { grid-template-columns: 1fr; }
}