/* =========================================
   ADinB Landing Page — Mobile & Tablet Overrides
   Description: Specific style overrides for max-width 1024px and 768px viewports.
   ========================================= */

/* =========================================
   RESPONSIVE — TABLET
   ========================================= */
@media (max-width: 1024px) {

  .who__grid,
  .exp__grid,
  .vm__columns {
    gap: 40px;
  }

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

/* =========================================
   RESPONSIVE — MOBILE
   ========================================= */
@media (max-width: 768px) {

  /* ---------- Base ---------- */
  html {
    scroll-snap-type: none;
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }

  .section {
    min-height: auto;
    padding: 12vw 6vw;
  }

  /* Hero stays the same layout — scaled to fit rectangle */
  #hero {
    min-height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    padding: 3vw 5vw;
  }

  .hero__logo {
    top: 2vw;
    right: 5vw;
  }

  .hero__logo img {
    height: 3vw;
  }

  .hero__text {
    font-size: 9vw;
  }

  .hero__layout {
    padding-top: 2vw;
  }

  .hero__line {
    gap: 0.8vw;
  }

  .hero__photo--sm {
    width: 5.5vw;
    height: 6vw;
  }

  .hero__photo--md {
    width: 6.5vw;
    height: 5.8vw;
  }

  .hero__photo--tall {
    width: 7.5vw;
    height: 13vw;
  }

  .hero__dot-img {
    width: 2vw;
    height: 2vw;
  }

  .hero__dot {
    width: 2vw;
    height: 2vw;
  }

  .hero__words span {
    font-size: 1vw;
  }

  .hero__arrow-down {
    width: 3.5vw;
  }

  .hero__arrows-grid {
    width: 7vw;
    margin-right: 1vw;
  }

  .hero__photo-overlay {
    width: 6.5vw;
    height: 8vw;
  }

  .hero__red-block {
    width: 4.5vw;
    height: 4.5vw;
  }

  .hero__line--1 {
    margin-bottom: -0.4vw;
    padding-right: 5vw;
  }

  .hero__line--2 {
    margin-bottom: -0.4vw;
  }

  .hero__line--3 {
    margin-bottom: -0.4vw;
    padding-right: 13vw;
  }

  .hero__line--4 {
    margin-bottom: -0.4vw;
    padding-left: 8.5vw;
    padding-right: 13vw;
  }

  .hero__line--5 {
    padding-left: 13vw;
  }

  .hero__float-right {
    height: 53%;
  }

  .hero__float-left {
    height: 66%;
  }

  /* ---------- WHO WE ARE ---------- */
  #who-we-are {
    padding: 8vw 6vw;
  }

  .who__top {
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 0;
  }

  .who__label {
    font-size: 8vw;
    text-align: center;
    margin-bottom: 2vw;
  }

  .who__bullets {
    align-self: flex-start;
    position: relative;
    z-index: 5;
  }

  .who__bullets li {
    font-size: 2.8vw;
  }

  .who__content {
    flex-direction: column;
    align-items: center;
    gap: 5vw;
  }

  .who__text-side {
    max-width: 100%;
    order: 2;
  }

  .who__image-side {
    width: 85%;
    order: 1;
    position: relative;
    right: auto;
    bottom: auto;
    margin: -8vw auto 0;
  }

  .who__image-side img {
    width: 100%;
  }

  .who__body-main {
    font-size: 5.5vw;
    text-align: center;
    line-height: 1.3;
  }

  .who__body-sub {
    font-size: 3.5vw;
    text-align: center;
    line-height: 1.5;
    margin: 3vw auto 0;
    max-width: 90%;
  }

  .who__flourish {
    width: 15vw;
    right: 4vw;
    bottom: auto;
    top: 55%;
  }

  /* ---------- FOUNDING ---------- */
  #founding {
    padding: 8vw 5vw;
    min-height: auto;
  }

  .founding__layout {
    flex-direction: column;
    gap: 3vw;
    align-items: center;
  }

  .founding__left {
    width: 100%;
    text-align: center;
  }

  .founding__headline {
    font-size: 4.5vw;
    text-align: center;
    line-height: 1.25;
  }

  .founding__highlight-img {
    height: 4vw;
  }

  .founding__body {
    font-size: 2.5vw;
    max-width: 100%;
    margin: 2vw auto 0;
    text-align: center;
    line-height: 1.5;
  }

  .founding__highlight-img {
    height: 6vw;
    position: relative;
    display: inline-block;
    top: auto;
    left: auto;
    transform: rotate(-8deg);
  }

  .founding__badge-side {
    padding-top: 0;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
    width: 100%;
  }

  .founding__vision-badge {
    width: auto;
    height: 14vw;
  }

  .founding__quote {
    font-size: 3vw;
    text-align: center;
    font-weight: 700;
    margin-top: 0;
    align-self: center;
    width: 100%;
  }

  /* Vision & Mission inside founding */
  #founding .vm__columns {
    grid-template-columns: 1fr;
    gap: 3vw;
    margin-top: 2vw;
  }

  .vm__column {
    text-align: center;
    align-items: center;
  }

  .vm__column-head {
    justify-content: center;
  }

  .vm__column-title {
    font-size: 4.5vw;
    text-align: center;
  }

  .vm__column-body {
    font-size: 2.5vw;
    line-height: 1.5;
    text-align: center;
    max-width: 85%;
    margin: 0 auto;
  }

  .vm__services-badge {
    width: 20vw;
    height: 20vw;
  }

  .vm__badge-wrap {
    margin-top: 2vw;
    align-self: center;
  }

  /* ---------- SERVICES ---------- */
  #services {
    padding: 8vw 5vw 10vw;
    min-height: auto;
  }

  .services__title {
    font-size: 6vw;
    line-height: 1.1;
    text-align: center;
  }

  .services__subtitle {
    font-size: 2.5vw;
    max-width: 80vw;
    text-align: center;
  }

  .services__grid {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4vw;
    margin-top: 5vw;
    pointer-events: all;
  }

  .service-bubble {
    position: relative;
    width: auto;
    height: 30vw;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  .service-bubble__icon {
    font-size: 4vw;
  }

  .service-bubble__name {
    font-size: 1.8vw;
  }

  /* ---------- EXPERIENCES ---------- */
  #experiences {
    padding: 8vw 5vw;
  }

  .exp__grid {
    grid-template-columns: 1fr;
    gap: 3vw;
  }

  .exp__text-side {
    width: 100%;
    text-align: center;
  }

  .exp__label {
    font-size: 6vw;
    text-align: center;
  }

  .exp__body {
    font-size: 3.5vw;
    text-align: center;
  }

  .exp__collab-img {
    height: 5vw;
    vertical-align: baseline;
    display: inline;
    position: absolute;
    top: 0.3vw;
    left: 0;
    margin-left: 0px;
  }

  .exp__body-sub {
    font-size: 2.5vw;
    max-width: 90%;
    text-align: center;
    margin: 0 auto;
  }

  .exp__arrow {
    align-self: center;
  }

  .exp__arrow-img {
    width: 5vw;
  }

  .exp__sectors {
    gap: 3vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
  }

  .exp__sector-num {
    font-size: 2vw;
  }

  .exp__sector-name {
    font-size: 3vw;
  }

  .exp__note {
    font-size: 2.5vw;
    margin-top: 4vw;
    text-align: center;
  }

  .exp__note-italic {
    font-size: 2.5vw;
    text-align: center;
  }

  /* ---------- CLIENTS ---------- */
  #clients {
    padding: 8vw 5vw;
    text-align: center;
  }

  .clients__header {
    margin-bottom: 4vw;
    justify-content: center;
  }

  .clients__title {
    font-size: 6vw;
    text-align: center;
  }

  .clients__red-dot {
    width: 4vw;
    height: 4vw;
  }

  /* ---------- AWARDS ---------- */
  #awards {
    padding: 8vw 5vw;
    text-align: center;
  }

  .awards__title-img {
    height: 10vw;
    display: block;
    margin: 0 auto 4vw;
  }

  .awards__image {
    width: 100%;
  }

  .awards__footer {
    margin-top: 4vw;
    padding-right: 0;
    justify-content: center;
  }

  .awards__arrow {
    width: 8vw;
    height: 8vw;
    font-size: 3vw;
  }

  .awards__footer-tag {
    font-size: 2.5vw;
  }

  /* ---------- FOOTER ---------- */
  .footer {
    padding: 10vw 6vw 6vw;
  }

  .footer__top {
    grid-template-columns: 1fr;
    gap: 8vw;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 4vw;
    text-align: center;
  }
}