/* =========================================================
   adaptive.css
   Last-loaded responsive normalization for phone, large
   phone/small tablet, and tablet views only.
   Desktop above 1024px intentionally remains unchanged.
   ========================================================= */

@media (max-width: 1024px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  body > main,
  .site-header,
  .site-header__inner,
  .container,
  .section,
  .hero,
  .page-hero,
  .logos,
  .services,
  .work,
  .work-section,
  .process,
  .achievements,
  .testimonials,
  .news,
  .cta,
  .site-footer,
  .footer {
    max-width: 100%;
    min-width: 0;
  }

  .btn,
  .nav-toggle,
  .nav-drawer__link,
  .site-nav__link,
  .socials__link,
  .filter__btn,
  .about__slider-btn,
  .about__slider-dot,
  .dot,
  input,
  select,
  textarea,
  button {
    min-width: 44px;
    min-height: 44px;
  }

  .hero__inner,
  .cta__grid,
  .footer__grid,
  .footer__newsletter-inner,
  .contact-grid,
  .about-intro__grid,
  .blog-controls__inner,
  .blog-featured,
  .blog-grid,
  .portfolio-grid,
  .stat-grid,
  .team__grid,
  .why-grid {
    min-width: 0;
  }

  .hero__copy,
  .section-head,
  .section-head--row,
  .cta__copy,
  .blog-card__body,
  .portfolio-card__foot,
  .contact-info,
  .contact-form,
  .login-card {
    max-width: 100%;
    min-width: 0;
  }

  .hero__c,
  .cta__phone,
  .gallery,
  img,
  video,
  svg {
    max-width: 100%;
  }

}

@media (max-width: 768px) {
  .block.block--main {
    height: auto;
  }

  .block__wrapper {
    position: relative;
    top: auto;
    height: auto;
    min-height: auto;
    overflow: hidden;
    padding: 96rem 24rem;
  }

  .content {
    height: auto;
    min-height: 0;
    padding: 0;
  }

  .gallery {
    position: relative;
    top: auto;
    left: auto;
    transform: none !important;
    width: min(90vw, 620px);
    margin: 36px auto 0;
    will-change: auto;
  }

  .gallery__grid {
    transform: none !important;
    will-change: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22rem;
  }

  .gallery__item:nth-child(n + 9) {
    display: none;
  }
}

/* Tablet view: 769px-1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --gutter: clamp(28rem, 4vw, 44rem);
  }

  .section {
    padding-block: 84rem;
  }

  .hero {
    min-height: auto;
    padding-block: 118rem 76rem;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(260rem, 0.95fr);
    gap: 36rem;
    align-items: center;
  }

  .hero__title {
    font-size: clamp(54rem, 7vw, 72rem);
    line-height: 0.96;
  }

  .hero__lead {
    font-size: 16rem;
    max-width: 460rem;
  }

  .hero__c {
    width: clamp(260rem, 34vw, 380rem);
  }

  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22rem;
  }

  .service-card {
    padding: 30rem 28rem;
  }

  .service-card__desc {
    font-size: 15rem;
  }

  .work-section {
    height: auto;
    padding-block: 10rem 0;
    overflow: hidden;
  }

  .work-track {
    position: relative;
    display: flex;
    width: 100%;
    height: auto;
    overflow-x: auto;
    gap: 18rem;
    padding: 6rem var(--gutter) 26rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .work-track::-webkit-scrollbar {
    display: none;
  }

  .work-card {
    flex: 0 0 clamp(300rem, 42vw, 360rem);
    width: clamp(300rem, 42vw, 360rem);
    height: auto;
    min-height: 380rem;
    scroll-snap-align: start;
  }

  .timeline__nodes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 34rem;
    column-gap: 28rem;
  }

  .news__grid,
  .blog-grid,
  .portfolio-grid,
  .why-grid,
  .team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-card__media {
    height: clamp(180rem, 24vw, 230rem);
    aspect-ratio: auto;
  }

  .cta {
    padding-block: 84rem;
  }

  .cta__grid {
    grid-template-columns: minmax(0, 1fr) minmax(240rem, 0.72fr);
    gap: 34rem;
  }

  .cta__phone {
    width: clamp(170rem, 24vw, 230rem);
  }

  .block.block--main {
    height: 350vh;
  }

  .block__wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
    overflow: visible;
    padding: 0 24rem;
  }

  .content {
    height: 100vh;
    min-height: 100vh;
    padding-inline: var(--gutter);
  }

  .gallery {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(90vw, 600rem);
    max-width: 600rem;
    margin: 0;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
  }

  .gallery__grid {
    transform: translateZ(0);
    will-change: transform;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24rem;
  }

  .gallery__item:nth-child(n + 9) {
    display: none;
  }

  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34rem;
  }
}

/* Large phone / small tablet: 481px-767px */
@media (min-width: 481px) and (max-width: 767px) {
  :root {
    --gutter: 24rem;
  }

  .section {
    padding-block: 64rem;
  }

  .section-head {
    margin-bottom: 36rem;
  }

  .hero {
    min-height: auto;
    padding-block: 104rem 58rem;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 30rem;
  }

  .hero__title {
    font-size: clamp(44rem, 9vw, 58rem);
    line-height: 0.98;
  }

  .hero__lead {
    font-size: 16rem;
    max-width: 520rem;
  }

  .hero__c {
    width: clamp(220rem, 48vw, 320rem);
  }

  .h-display,
  .page-hero__title {
    font-size: clamp(38rem, 8vw, 50rem);
    line-height: 1;
  }

  .services__grid,
  .news__grid,
  .blog-grid,
  .portfolio-grid,
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18rem;
  }

  .service-card {
    padding: 24rem 22rem;
  }

  .service-card__icon {
    width: 44rem;
    height: 44rem;
    margin-bottom: 14rem;
  }

  .service-card__title {
    font-size: 14rem;
    letter-spacing: 0.1em;
  }

  .service-card__desc {
    font-size: 14rem;
    line-height: 1.58;
  }

  .work-section {
    height: auto;
    overflow: hidden;
  }

  .work-track {
    position: relative;
    display: flex;
    height: auto;
    overflow-x: auto;
    gap: 16rem;
    padding: 4rem var(--gutter) 24rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .work-track::-webkit-scrollbar {
    display: none;
  }

  .work-card {
    flex: 0 0 clamp(276rem, 58vw, 340rem);
    width: clamp(276rem, 58vw, 340rem);
    height: auto;
    min-height: 350rem;
    scroll-snap-align: start;
  }

  .timeline__nodes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 26rem;
    column-gap: 20rem;
  }

  .step__desc {
    max-width: 280rem;
  }

  .blog-card__media,
  .news-card {
    height: clamp(150rem, 30vw, 190rem);
    aspect-ratio: auto;
  }

  .cta {
    padding-block: 64rem;
  }

  .cta__grid {
    grid-template-columns: 1fr;
    gap: 28rem;
  }

  .cta__phone-wrap {
    order: 2;
    transform: none;
  }

  .cta__copy {
    order: 1;
  }

  .cta__phone {
    width: clamp(150rem, 34vw, 210rem);
    transform: none;
  }

  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30rem;
  }
}

/* Phone view: 320px-480px */
@media (max-width: 480px) {
  :root {
    --gutter: 18rem;
  }

  .section {
    padding-block: 56px;
  }

  .section-head {
    margin-bottom: 30px;
  }

  .section-head--row {
    align-items: flex-start;
    gap: 18px;
  }

  .eyebrow {
    font-size: 12px;
    letter-spacing: 0.08em;
    gap: 8px;
    margin-bottom: 14px;
  }

  .eyebrow::before {
    width: 22px;
  }

  .hero {
    min-height: auto;
    padding-block: 96px 48px;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-inline-end: 0;
  }

  .hero__title {
    font-size: clamp(36px, 10.8vw, 46px);
    line-height: 0.98;
    margin-bottom: 20px;
  }

  .hero__lead {
    font-size: 15px;
    line-height: 1.62;
    margin-bottom: 24px;
  }

  .hero__cta,
  .page-hero__cta,
  .about-intro__cta {
    gap: 10px;
  }

  .hero__c {
    width: min(70vw, 250px);
  }

  .h-display,
  .page-hero__title {
    font-size: clamp(32px, 10vw, 42px);
    line-height: 1;
  }

  .page-hero {
    padding: 90px 0 46px;
  }

  .btn,
  .content__button,
  .footer__newsletter-btn {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 13px;
    letter-spacing: 0.08em;
    white-space: normal;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
    margin-right: 0;
  }

  .services__grid,
  .news__grid,
  .blog-grid,
  .portfolio-grid,
  .why-grid,
  .contact-form__row,
  .contact-grid,
  .about-intro__grid,
  .team__grid {
    grid-template-columns: 1fr;
  }

  .services__grid,
  .blog-grid,
  .portfolio-grid,
  .why-grid,
  .team__grid {
    gap: 16px;
  }

  .service-card {
    padding: 20px 18px;
  }

  .service-card__icon {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
  }

  .service-card__icon svg {
    width: 20px;
    height: 20px;
  }

  .service-card__title {
    font-size: 14px;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
  }

  .service-card__desc,
  .step__desc,
  .blog-card__excerpt,
  .news-card__date,
  .footer__tagline {
    font-size: 14px;
    line-height: 1.55;
  }

  .work {
    padding-top: 56px;
  }

  .work__head {
    margin-bottom: 18px;
  }

  .work-section {
    height: auto;
    padding-block: 0;
    overflow: hidden;
  }

  .work-track {
    position: relative;
    display: flex;
    height: auto;
    width: 100%;
    overflow-x: auto;
    gap: 14px;
    padding: 4px var(--gutter) 22px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    will-change: auto;
  }

  .work-track::-webkit-scrollbar {
    display: none;
  }

  .work-card {
    flex: 0 0 min(80vw, 330px);
    width: min(80vw, 330px);
    max-width: calc(100vw - 52px);
    height: auto;
    min-height: 0;
    grid-template-rows: minmax(168px, 48vw) auto;
    scroll-snap-align: start;
  }

  .work-card__foot {
    padding: 14px 15px 16px;
    gap: 6px;
    overflow: visible;
  }

  .work-card__cat,
  .work-card__cta,
  .blog-card__cat,
  .portfolio-card__cat,
  .stat__label,
  .footer__legal a {
    font-size: 12px;
    letter-spacing: 0.07em;
  }

  .work-card__title,
  .blog-card__title,
  .news-card__title,
  .portfolio-card__name {
    font-size: 17px;
    line-height: 1.25;
  }

  .timeline {
    padding-block: 8px;
  }

  .timeline__nodes {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .step {
    gap: 8px;
  }

  .step__circle {
    width: 60px;
    height: 60px;
  }

  .step__circle svg {
    width: 23px;
    height: 23px;
  }

  .step__title {
    font-size: 15px;
    letter-spacing: 0.1em;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .stat {
    padding: 18px 14px;
  }

  .testimonial {
    padding: 34px 20px 24px;
  }

  .testimonial__text {
    font-size: 15px;
    line-height: 1.62;
  }

  .blog-card__media,
  .news-card {
    height: clamp(132px, 38vw, 160px);
    aspect-ratio: auto;
  }

  .blog-card__body {
    padding: 18px 16px;
  }

  .blog-card__meta {
    font-size: 13px;
  }

  .cta {
    padding-block: 52px;
  }

  .cta__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .cta__copy {
    order: 1;
  }

  .cta__phone-wrap {
    order: 2;
    transform: none;
  }

  .cta__phone {
    width: min(42vw, 170px);
    min-width: 132px;
    transform: none;
    border-radius: 24px;
  }

  .cta__phone-screen {
    inset: 9px;
    border-radius: 18px;
  }

  .cta__phone-notch {
    width: 64px;
    height: 16px;
    top: 10px;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-block: 52px 38px;
  }

  .footer__col h4 {
    font-size: 12px;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
  }

  .footer__col:not(.footer__brand) a,
  .footer__col:not(.footer__brand) span:not(.footer__icon) {
    font-size: 15px;
    line-height: 1.45;
  }

  .footer__bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .footer__newsletter-field {
    flex-direction: column;
    padding: 14px;
  }

  .footer__newsletter-input {
    width: 100%;
    min-width: 0;
    font-size: 15px;
  }

  .showreel-modal,
  .proj-modal {
    padding-inline: 14px;
  }
}

@media (max-width: 360px) {
  .hero__title {
    font-size: 36px;
  }

  .h-display,
  .page-hero__title {
    font-size: 31px;
  }

  .btn {
    padding-inline: 14px;
  }

  .work-card {
    flex-basis: 78vw;
    width: 78vw;
  }

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