/* =========================================================
   RESPONSIVE
   Breakpoints: 1024px (tablet), 768px (mobile landscape),
   480px (mobile portrait). Mobile-first values live in the
   base files; this file only overrides what changes.
   ========================================================= */

/* -----------------------------------------------------------
   TABLET — 1024px
   Primary nav links move into the side panel; the panel
   toggle becomes the only way to reach navigation.
----------------------------------------------------------- */
@media (max-width: 1024px) {
  .primary-nav {
    display: none;
  }

  .side-panel__nav {
    display: block;
  }

  .main-nav__quote {
    display: none;
  }

  .hero__inner {
    gap: var(--space-lg);
  }

  .tracking-preview {
    left: -20px;
  }

  .service-grid {
    gap: var(--space-md);
  }

  .about-preview__inner {
    grid-template-columns: 1fr;
  }

  .about-preview__image {
    height: 360px;
  }

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

  .work-preview__inner {
    grid-template-columns: 1fr;
  }

  .work-preview__text {
    max-width: 60ch;
  }

  .promo-banner__slides {
    min-height: 116px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .page-banner__title {
    font-size: var(--text-3xl);
  }

  .about-story__inner {
    grid-template-columns: 1fr;
  }

  .about-collage__main {
    min-height: 340px;
  }

  .about-collage__top,
  .about-collage__bottom {
    min-height: 160px;
  }

  .who-we-are__inner {
    grid-template-columns: 1fr;
  }

  .who-we-are__media {
    order: -1;
  }

  .who-we-are__stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-lg);
  }

  .wordmark-marquee__item {
    font-size: var(--text-lg);
  }

  .testimonial-alt-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .services-photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .faq-section__inner {
    grid-template-columns: 1fr;
  }

  .faq-section__text {
    max-width: 60ch;
  }

  .tracking-result-card__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

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

  .gallery-item--large {
    grid-column: span 2;
    grid-row: span 2;
  }

  .gallery-item--wide {
    grid-column: span 2;
  }

  .contact-social-rail {
    flex-direction: row;
    height: auto;
    margin-top: var(--space-lg);
  }

  .contact-social-rail__line {
    display: none;
  }

  .contact-social-rail__list {
    flex-direction: row;
  }

  .footer-col--brand {
    grid-column: 1 / -1;
  }

  .footer-newsletter__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* -----------------------------------------------------------
   MOBILE LANDSCAPE — 768px
   Hero stacks vertically; utility bar drops the social icons
   to save space (contact info stays, it matters more).
----------------------------------------------------------- */
@media (max-width: 768px) {
  .utility-bar__social {
    display: none;
  }

  .utility-bar__contact li:last-child {
    display: none; /* location line — email is the priority contact */
  }

  /* Explicit here rather than left inherited from 1024px — the
     row height and gap were tuned for a wider column at that
     breakpoint and feel loose at true tablet-landscape width. */
  .gallery-grid {
    grid-auto-rows: 150px;
    gap: var(--space-sm);
  }

  .hero {
    padding-block: var(--space-xl) var(--space-lg);
  }

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

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

  .hero__actions {
    justify-content: center;
  }

  .hero__media {
    min-height: 320px;
    order: -1;
  }

  .hero__media-clip {
    clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
    border-radius: var(--radius-md);
  }

  .hero__slash {
    display: none;
  }

  .hero__dots {
    display: none;
  }

  .promo-banner {
    padding-block: var(--space-md);
  }

  .promo-banner__slides {
    min-height: 104px;
  }

  .promo-slide__title {
    font-size: var(--text-2xl);
  }

  .promo-slide__text {
    font-size: var(--text-xs);
  }

  /* On mobile the card can't hang off the image edge — center
     it and dock it to the bottom instead of floating outside. */
  .tracking-preview {
    left: 50%;
    bottom: var(--space-sm);
    transform: translateX(-50%);
    min-width: 200px;
    animation: none;
  }

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

  .section-heading__title {
    font-size: var(--text-2xl);
  }

  .about-preview__badge {
    right: 8px;
    padding: var(--space-sm) var(--space-md);
    min-width: 130px;
  }

  .about-preview__badge-number {
    font-size: var(--text-xl);
  }

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

  .testimonial-card {
    width: 300px;
  }

  .promo-banner {
    padding-block: var(--space-sm);
  }

  .promo-banner__slides {
    min-height: 128px;
  }

  .promo-slide__title {
    font-size: var(--text-xl);
  }

  .partners__wordmark {
    font-size: var(--text-lg);
  }

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

  .footer-col--brand {
    grid-column: auto;
  }

  .footer-newsletter__form {
    width: 100%;
  }

  .footer-newsletter__field {
    flex: 1;
  }

  .footer-newsletter__field input {
    min-width: 0;
    width: 100%;
  }

  .footer-bottom__inner {
    flex-direction: column;
    text-align: center;
  }

  .back-to-top {
    right: var(--space-md);
    bottom: var(--space-md);
    width: 42px;
    height: 42px;
  }

  .page-banner {
    min-height: 220px;
    padding-block: var(--space-lg);
  }

  .page-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .page-banner__title {
    font-size: var(--text-2xl);
  }

  .about-collage {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .about-collage__main {
    grid-column: 1 / 3;
    grid-row: 1;
    min-height: 280px;
  }

  .about-collage__top {
    grid-column: 1;
    grid-row: 2;
  }

  .about-collage__bottom {
    grid-column: 2;
    grid-row: 2;
  }

  /* Precise overlap positioning gets fragile at this width —
     drop the badge out of the flow and center it below the
     collage instead of straddling a seam. */
  .about-collage__badge {
    position: static;
    transform: none;
    margin-top: var(--space-md);
    width: fit-content;
    margin-inline: auto;
    animation: none;
  }

  .about-story__features {
    gap: var(--space-lg);
  }

  .who-we-are__stats {
    grid-template-columns: 1fr;
  }

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

  .who-stat__number {
    font-size: var(--text-3xl);
  }

  .testimonial-alt {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .testimonial-alt__stars {
    justify-content: center;
  }

  .cta-banner-simple__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-banner-simple__button {
    width: 100%;
    justify-content: center;
  }

  .services-photo-grid {
    grid-template-columns: 1fr;
  }

  .services-grid-section__title {
    font-size: var(--text-2xl);
  }

  .faq-item__question {
    gap: var(--space-sm);
  }

  .faq-item__question-text {
    font-size: var(--text-sm);
  }

  .faq-item__number {
    font-size: var(--text-lg);
  }
}

/* -----------------------------------------------------------
   MOBILE PORTRAIT — 480px
----------------------------------------------------------- */
@media (max-width: 480px) {
  .utility-bar__inner {
    justify-content: center;
  }

  .brand__logo {
    height: 32px;
  }

  .side-panel {
    width: 100%;
    padding: var(--space-lg) var(--space-md);
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__actions {
    flex-direction: column;
    width: 100%;
  }

  /* At this width a longer question is likely to wrap onto a
     second line — top-align the row instead of centering, so
     the chevron sits with the first line rather than floating
     against the vertical middle of two lines of text. */
  .faq-item__question {
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .faq-item__chevron {
    margin-top: 0.15rem;
  }

  .faq-item__number {
    font-size: var(--text-base);
  }

  .tracking-form {
    flex-direction: column;
    align-items: stretch;
  }

  .tracking-form__submit {
    width: 100%;
  }

  .tracking-result-card {
    padding: var(--space-lg);
  }

  .tracking-result-card__grid {
    grid-template-columns: 1fr;
  }

  .tracking-result-card__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-card {
    padding: var(--space-lg);
  }

  .contact-form__submit {
    width: 100%;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }

  .gallery-item--large,
  .gallery-item--wide,
  .gallery-item--tall {
    grid-column: span 1;
    grid-row: span 1;
  }

  .lightbox__nav {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }

  .lightbox__nav--prev {
    left: var(--space-sm);
  }

  .lightbox__nav--next {
    right: var(--space-sm);
  }
}