/* ── responsive.css — mobile overrides, real class names only ── */

/* ── GLOBAL ── */
@media (max-width: 1024px) {
  html,
  body {
    overflow-x: hidden;
  }

  * {
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* ── HEADER ── */
@media (max-width: 1024px) {
  .header__nav {
    display: none;
  }

  .header__burger {
    display: block;
  }

  .header__btn {
    display: none;
  }

  .header__main {
    padding: 12px 20px;
  }

  .header__logo img {
    height: 44px;
  }
}

@media (max-width: 768px) {
  .header__logo img {
    height: 36px;
  }

  .header__nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #2e76af;
    z-index: 999;
    padding: 20px 0;
  }

  .header__nav.is-open .nav__list {
    flex-direction: column;
    gap: 0;
  }

  .header__nav.is-open .nav__link {
    color: #ffffff;
    padding: 14px 24px;
    display: block;
    font-size: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .header__nav.is-open .dropdown {
    position: static;
    transform: none;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.15);
    padding: 0;
  }

  .header__nav.is-open .dropdown__link {
    color: #ffffff;
    padding: 12px 40px;
    font-size: 13px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* ── QUOTE BARS ── */
.mobile-quote-btn {
  display: none;
}

@media (max-width: 768px) {
  .quote-bar,
  #quote-bar,
  #storage-quote-bar,
  #resources-quote-bar,
  #faq-quote-bar,
  #contact-quote-bar,
  #about-quote-bar {
    display: none !important;
  }

  .mobile-quote-btn {
    display: block;
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 998;
    padding: 14px 32px;
    background: #fd8e39;
    color: #ffffff;
    border: none;
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  }
}

/* ── INDEX HERO ── */
@media (max-width: 900px) {
  .hero__row {
    flex-direction: column;
    gap: 40px;
  }

  .hero__left,
  .hero__right {
    width: 100%;
    max-width: 100%;
    flex: none;
  }

  .hero__right {
    padding: 0 20px;
  }

  .hero__img {
    max-width: 100%;
    margin: 0 auto;
    display: block;
  }

  .hero__title {
    font-size: 40px;
    line-height: 48px;
  }
}

@media (max-width: 600px) {
  .hero {
    padding: 40px 0 60px;
  }

  .hero__container {
    padding: 0 20px;
  }

  .hero__title {
    font-size: 32px;
    line-height: 40px;
  }
}

/* ── CHOOSE US ── */
@media (max-width: 700px) {
  .choose-us__lists {
    flex-direction: column;
    gap: 20px;
  }

  .choose-us__title {
    font-size: 26px;
  }

  .choose-us__container {
    padding: 0 20px;
  }
}

/* ── COMMITMENT ── */
@media (max-width: 768px) {
  .commitment__badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    justify-items: center;
  }

  .commitment__badge img {
    max-height: 52px;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .commitment__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .commitment__stat {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  .commitment__stat-icon img {
    max-width: 44px;
    max-height: 44px;
    display: block;
    margin: 0 auto;
  }

  .commitment__stat-number,
  .commitment__stat-label {
    text-align: center;
  }

  .commitment__container {
    padding: 0 20px;
  }

  .commitment {
    padding: 60px 0;
  }

  .commitment__title {
    font-size: 28px;
    margin-bottom: 40px;
  }
}

/* ── FAQ (index) ── */
@media (max-width: 768px) {
  .faq__grid {
    flex-direction: column;
  }

  .faq__title {
    font-size: 28px;
  }

  .faq__container {
    padding: 0 20px;
  }

  .faq {
    padding: 60px 0;
  }
}

/* ── REVIEWS (index) ── */
@media (max-width: 900px) {
  .reviews__layout {
    flex-direction: column;
  }

  .reviews__photo {
    display: none;
  }

  .reviews__title {
    font-size: 28px;
  }
}

@media (max-width: 560px) {
  .reviews__cards {
    grid-template-columns: 1fr;
  }

  .reviews__container {
    padding: 0 20px;
  }

  .reviews {
    padding: 60px 0;
  }
}

/* ── TOOLS ── */
@media (max-width: 768px) {
  .tools__cards {
    flex-direction: column;
    align-items: center;
  }

  .tools__card {
    width: 100%;
    max-width: 400px;
  }

  .tools__container {
    padding: 0 20px;
  }

  .tools {
    padding: 60px 0;
  }

  .tools__title {
    font-size: 28px;
  }
}

/* ── SERVICES ── */
@media (max-width: 700px) {
  .services__cards {
    flex-direction: column;
  }

  .services__container {
    padding: 0 20px;
  }

  .card__link {
    opacity: 1;
  }
}

/* ── FOOTER ── */
@media (max-width: 900px) {
  .footer__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__logo {
    align-self: center;
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .footer__row {
    align-items: center;
    gap: 20px;
  }

  .footer__links {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 16px;
  }

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

  .footer__col ul {
    align-items: center;
  }

  .footer__container {
    padding: 0 20px;
  }

  .footer {
    padding: 40px 0;
  }

  .sub-footer__row {
    flex-direction: column;
    text-align: center;
  }
}

/* ── MODAL ── */
@media (max-width: 768px) {
  .modal-box {
    padding: 32px 16px 24px;
    width: 95%;
  }

  .modal-fields-grid {
    grid-template-columns: 1fr;
  }
}

/* ── LOCAL MOVING hero ── */
@media (max-width: 900px) {
  .lm-hero__row {
    flex-direction: column;
    gap: 40px;
  }

  .lm-hero__left {
    flex: none;
    max-width: 100%;
    width: 100%;
  }

  .lm-hero__right {
    width: 100%;
    padding: 0 20px;
  }

  .lm-hero__title {
    font-size: 40px;
  }

  .lm-intro__row,
  .lm-goal__row {
    flex-direction: column;
  }

  .lm-intro__text-col,
  .lm-goal__text-col {
    flex: none;
    max-width: 100%;
    width: 100%;
    padding: 60px 20px;
    margin-left: 0;
  }

  .lm-intro__img-col {
    min-height: 300px;
  }

  .lm-goal__img-col {
    flex: none;
    min-height: 300px;
    width: 100%;
    order: 0;
  }

  .lm-goal__text-col {
    order: 1;
    padding-right: 20px;
  }
}

/* ── LONG DISTANCE ── */
@media (max-width: 900px) {
  .ldm-split__row {
    flex-direction: column;
  }

  .ldm-split--reverse .ldm-split__row {
    flex-direction: column-reverse;
  }

  .ldm-split__text--left,
  .ldm-split__text--right {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
    padding: 40px 20px;
  }

  .ldm-split__img-col {
    flex: none;
    max-width: 100%;
    height: 280px;
  }

  .ldm-split__title {
    font-size: 28px;
    line-height: 36px;
  }

  .ldm-consider__title {
    font-size: 28px;
    margin-bottom: 30px;
  }

  .ldm-consider__grid {
    grid-template-columns: 1fr;
  }
}

/* ── MOVING PAGE hero ── */
@media (max-width: 768px) {
  .mv-hero {
    max-height: none;
    min-height: 0;
    flex-direction: column;
  }

  .mv-hero__row {
    flex-direction: column;
    gap: 0;
  }

  .mv-hero__left {
    flex: none;
    max-width: 100%;
    width: 100%;
    padding: 40px 20px;
  }

  .mv-hero__right {
    flex: none;
    max-width: 100%;
    max-height: 300px;
    width: 100%;
  }

  .mv-hero__img {
    max-height: 300px;
    height: 300px;
  }

  .mv-hero__title {
    font-size: 28px;
    line-height: 36px;
  }

  .mv-wow-section__layout {
    flex-direction: column;
    gap: 32px;
  }

  .mv-wow-section__left {
    flex: none;
    max-width: 100%;
  }

  .mv-checklist__grid {
    grid-template-columns: 1fr;
  }

  .mv-ps__grid {
    grid-template-columns: 1fr;
  }

  .mv-diff__title,
  .mv-pack__title,
  .mv-ps__title {
    font-size: 28px;
    line-height: 36px;
  }
}

/* ── STORAGE ── */
@media (max-width: 768px) {
  .st-hero__row {
    flex-direction: column;
    gap: 40px;
  }

  .st-hero__text-col,
  .st-hero__img-col {
    flex: none;
    width: 100%;
  }

  .st-hero__img {
    height: 300px;
  }

  .st-hero {
    padding: 60px 0;
  }

  .st-intro {
    padding: 60px 20px;
  }

  .st-intro__title {
    font-size: 28px;
    line-height: 36px;
  }

  .st-features {
    padding: 60px 20px;
  }

  .st-features__title {
    font-size: 28px;
    line-height: 36px;
  }

  .st-features__grid {
    grid-template-columns: 1fr;
  }
}

/* ── RESOURCES ── */
@media (max-width: 768px) {
  .rs-tabs__row {
    flex-direction: column;
  }

  .rs-tab {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .rs-tab.is-active::after {
    display: none;
  }

  .rs-panel__wrap {
    padding: 0 16px;
  }

  .rs-panel__inner {
    padding: 24px 16px;
    max-height: none;
  }

  .rs-cols {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .rs-blog__grid {
    grid-template-columns: 1fr;
  }

  .rs-blog__container {
    padding: 0 16px;
  }

  .rs-blog__title {
    font-size: 32px;
    line-height: 40px;
  }
}

/* ── FAQ PAGE ── */
@media (max-width: 900px) {
  .faq-page__grid {
    flex-direction: column;
  }

  .faq-page__title {
    font-size: 48px;
    line-height: 54px;
  }

  .faq-page-hero .faq-page__inner {
    padding: 40px 20px 32px;
  }

  .faq-page-acc .faq-page__inner {
    padding: 0 20px 60px;
  }
}

/* ── CONTACT ── */
@media (max-width: 768px) {
  .contact-hero__inner {
    flex-direction: column;
    gap: 40px;
    padding: 0 20px;
  }

  .contact-hero__left,
  .contact-hero__right {
    flex: 1 1 auto;
    width: 100%;
  }

  .contact-hero__title {
    font-size: 40px;
    line-height: 46px;
  }

  .contact-form-row {
    flex-direction: column;
  }
}

/* ── ABOUT ── */
@media (max-width: 768px) {
  .about-hero__row {
    flex-direction: column;
    gap: 40px;
  }

  .about-hero__left {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .about-hero__right {
    flex: none;
    width: 100%;
    padding: 0 20px;
  }

  .about-hero__img {
    margin-left: 0;
    max-width: 100%;
  }

  .about-hero__container {
    padding: 0 20px;
  }

  .about-hero__title {
    font-size: 40px;
    line-height: 46px;
  }

  .about-who {
    padding: 60px 20px;
  }

  .about-founder__container {
    flex-direction: column;
    padding: 0 20px;
  }

  .about-founder__text,
  .about-founder__image {
    flex: none;
    width: 100%;
  }

  .about-founder__text h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .timeline-slide.active {
    flex-direction: column;
  }

  .timeline-text-col,
  .timeline-img-col {
    flex: 0 0 100%;
  }

  .timeline-img-col {
    height: 300px;
    min-height: 300px;
  }

  .timeline-img-col img {
    min-height: 300px;
  }

  .timeline-text-inner {
    padding: 40px 20px;
  }

  .timeline-text-inner h2 {
    font-size: 48px;
    line-height: 56px;
  }

  .beliefs-grid-top,
  .beliefs-grid-bottom {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .belief-item {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .beliefs-container {
    padding: 0 20px;
  }

  .ab-offer__grid {
    grid-template-columns: 1fr;
  }

  .ab-offer {
    padding: 60px 20px;
  }
}

/* ── COMMERCIAL ── */
@media (max-width: 768px) {
  .cm-offer__grid {
    grid-template-columns: 1fr;
  }

  .cm-offer__title {
    font-size: 28px;
    line-height: 36px;
  }

  .cm-how__layout {
    flex-direction: column;
    gap: 32px;
  }

  .cm-how__left {
    flex: none;
    max-width: 100%;
  }

  .cm-how__right {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .cm-how__title {
    font-size: 28px;
    line-height: 36px;
  }

  .cm-consider__grid {
    grid-template-columns: 1fr;
  }

  .cm-consider__title {
    font-size: 28px;
    line-height: 36px;
  }
}

/* ══════════════════════════════════════════════
   ADAPTIVE FIXES — mobile only
══════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* 1. Footer social icons — center them */
  .footer__social {
    justify-content: center;
  }

  /* 2. Choose Us — remove giant gap between two lists */
  .choose-us__lists {
    flex-direction: column;
    gap: 16px;
  }

  .choose-us__list {
    flex: none;
    width: 100%;
  }

  .choose-us {
    padding: 50px 0 50px;
  }

  /* 3. Index page — remove giant top gap (header placeholder space) */
  #header-placeholder-space,
  [id*="header-placeholder"] ~ * {
    margin-top: 0 !important;
  }

  .hero {
    padding-top: 40px !important;
  }

  /* 4. All hero images — center inside container */
  .hero__right,
  .lm-hero__right,
  .mv-hero__right,
  .st-hero__img-col,
  .about-hero__right {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px !important;
  }

  .hero__img,
  .lm-hero__img,
  .about-hero__img {
    margin: 0 auto !important;
    display: block !important;
    max-width: 100% !important;
  }

  /* 5. Burger button — orange background */
  .header__burger {
    background-color: #fd8e39 !important;
    color: #ffffff !important;
    padding: 6px 10px !important;
    border-radius: 2px;
  }

  /* 6. Long-distance split sections — fix overflow/clipping */
  .ldm-split {
    overflow: visible !important;
  }

  .ldm-split__row {
    overflow: visible !important;
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .ldm-split__img-col {
    height: 260px !important;
    max-height: 260px !important;
    overflow: hidden !important;
  }

  .ldm-split__text--left,
  .ldm-split__text--right {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 40px 20px !important;
  }

  /* 7. Commercial moving — fix clipped sections */
  .cm-offer,
  .cm-how,
  .cm-consider {
    overflow: visible !important;
  }

  .cm-offer__card-img {
    height: 200px !important;
  }

  /* 8. All pages — moving hero image centered */
  .lm-hero__image-wrap,
  .about-hero__image-wrap,
  .hero__image-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
  }

  .lm-hero__image-wrap img,
  .about-hero__image-wrap img,
  .hero__image-wrap img {
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Remove decorative square positioning issues on mobile */
  .lm-hero__sq--teal,
  .hero__square--teal,
  .mv-hero__sq--teal,
  .about-hero__sq--1,
  .about-hero__sq--4 {
    display: none;
  }

}

/* ── Mobile nav background — orange when open ── */
@media (max-width: 768px) {
  .header__nav.is-open {
    background: #fd8e39 !important;
  }

  .header__nav.is-open .nav__link {
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  .header__nav.is-open .dropdown {
    background: rgba(0, 0, 0, 0.1) !important;
  }

  .header__nav.is-open .dropdown__link {
    color: #ffffff !important;
  }

  /* About founder — photo goes ABOVE text on mobile */
  .about-founder__container {
    flex-direction: column !important;
  }

  .about-founder__image {
    order: -1 !important;
    width: 100% !important;
    justify-content: center !important;
    margin-bottom: 32px !important;
  }

  .about-founder__image img {
    max-width: 280px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  .about-founder__text {
    order: 0 !important;
    width: 100% !important;
  }
}

/* ── Mobile GET A QUOTE button in header ── */
.header__quote-mobile {
  display: none;
}

@media (max-width: 1024px) {
  .header__quote-mobile {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: #fd8e39;
    color: #ffffff;
    border: none;
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    margin-right: 8px;
  }

  .header__quote-mobile:hover {
    background: #d26612;
  }
}

/* ── Header mobile fixes ── */
@media (max-width: 1024px) {

  /* 1. Header always fixed on mobile */
  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
  }

  /* Compensate for fixed header — push page content down */
  body {
    padding-top: 90px !important;
  }

  /* 2. GET A QUOTE button — blue color, no radius, same height as burger */
  .header__quote-mobile {
    background: #2e76af !important;
    border-radius: 0 !important;
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
  }

  /* 3. Space between logo, button, burger */
  .header__main {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
  }

}

@media (max-width: 1024px) {
  .header__logo {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .header__logo img {
    max-width: 130px !important;
    width: 100% !important;
  }

  .header__quote-mobile {
    flex-shrink: 0 !important;
    margin-left: 12px !important;
    margin-right: 10px !important;
  }

  .header__burger {
    flex-shrink: 0 !important;
  }
}

/* ── Modal close button — stays INSIDE the box, top-right corner ── */
@media (max-width: 768px) {
  .modal-close {
    position: absolute !important;
    top: 12px !important;
    right: 16px !important;
    background: none !important;
    font-size: 24px !important;
    color: #fd8e39 !important;
  }

  .modal-box {
    padding-top: 48px !important;
  }
}

/* ── Header container padding on mobile ── */
@media (max-width: 1024px) {
  .header__container {
    padding: 0 20px !important;
  }

  .header__main {
    padding: 0 !important;
  }
}