/* ==========================================
   Signature Housekeeping Design System
   responsive.css
   Visual Source of Truth: V1 style-v7.css
========================================== */

/* ==========================================
   1. DESKTOP / ACCESSIBILITY
========================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}

/* ==========================================
   2. TABLET (max-width: 900px)
========================================== */

@media (max-width: 900px) {

  /* Header & Navigation */
  .navbar .container {
    height: 76px;
  }

  .brand > img,
  .logo > img {
    height: 44px !important;
  }

  .menu-button,
  .nav-toggle {
    display: block;
  }

  .nav,
  .nav-links {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--paper);
    padding: 30px;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid var(--gold);
    box-shadow: var(--shadow);
  }

  .nav.open,
  .nav-links.open {
    display: flex;
  }

  /* Hero Section */
  .hero {
    min-height: auto;
    padding: 60px 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-copy,
  .hero-content {
    padding: 10px 0;
  }

  .hero-image {
    min-height: 380px;
  }

  /* Trust Row */
  .trust-row {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .trust-row span {
    border-right: 0;
    border-bottom: 1px solid #dfd2bd;
    padding: 17px;
  }

  /* Services Section */
  .section-heading {
    grid-template-columns: 1fr;
    gap: 15px;
  }

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

  .service-grid article:nth-child(2),
  .service-card:nth-child(2) {
    border-right: 0;
  }

  /* Sections Layout */
  .standard,
  .about,
  .faq,
  .estimate {
    grid-template-columns: 1fr;
  }

  .standard ul {
    grid-template-columns: 1fr;
  }

  .monogram {
    margin: auto;
  }

  .faq {
    gap: 55px;
  }

  /* Footer */
  footer {
    grid-template-columns: 1fr;
  }

  footer > p,
  footer > small {
    text-align: left;
  }

  .footer-brand > img {
    width: 64px;
    height: 64px;
  }
}

/* ==========================================
   3. MOBILE (max-width: 560px)
========================================== */

@media (max-width: 560px) {

  /* Announcement Bar & Header */
  .announcement {
    font-size: 9px;
  }

  .site-header {
    padding: 0 16px;
  }

  .site-header .header-brand {
    width: 96px;
    height: 72px;
    flex-basis: 96px;
  }

  .site-header .header-brand > img {
    width: 66px !important;
    height: 66px !important;
    max-width: 66px !important;
    max-height: 66px !important;
  }

  .brand > img,
  .logo > img {
    width: 124px;
    height: 72px;
  }

  /* Hero Section */
  .hero h1 {
    font-size: 54px;
  }

  .hero-image {
    min-height: 330px;
  }

  /* Trust Row */
  .trust-row span {
    font-size: 14px;
  }

  /* Services Section */
  .section {
    padding: 85px 22px;
  }

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

  .service-grid article,
  .service-card {
    border-right: 0;
    border-bottom: 1px solid var(--taupe);
    padding: 35px 4px;
  }

  .service-grid p {
    min-height: 0;
  }

  /* Standard, About & FAQ */
  .standard,
  .estimate {
    padding: 85px 22px;
  }

  .standard h2,
  .about h2,
  .faq .section-heading h2 {
    font-size: 45px;
  }

  .quote-card {
    padding: 35px 25px;
  }

  .monogram span,
  .monogram i {
    font-size: 80px;
  }

  /* Estimator & Forms */
  .contact-options {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .step-form {
    padding: 22px 16px;
  }

  .step-grid,
  .addon-grid {
    grid-template-columns: 1fr;
  }

  .step-grid .wide-field {
    grid-column: auto;
  }

  .step-actions {
    justify-content: stretch;
  }

  .step-actions .button {
    flex: 1;
    padding: 0 15px;
  }

  .form-step > legend {
    font-size: 27px;
  }

  .addons,
  .contact-fields {
    grid-template-columns: 1fr;
  }

  .contact-fields label {
    grid-column: 1/-1;
  }

  .estimate-result {
    padding: 24px 16px;
  }

  .addons .check-option span {
    flex-wrap: wrap;
  }

  /* Footer */
  footer > div {
    flex-direction: column;
    gap: 15px;
  }
}