/* ============================================================
   RESPONSIVE — Mobile & Tablet Redesign
   Desktop (901px+) is completely untouched.
   Breakpoints: 900px (tablet/mobile), 480px (small mobile)
   ============================================================ */

/* ============================================================
   GLOBAL MOBILE TOKENS
   ============================================================ */
@media (max-width: 900px) {
  :root {
    --mobile-px: 1.25rem;
    --mobile-section-py: 4.5rem;
  }

  section {
    padding: var(--mobile-section-py) var(--mobile-px);
  }

  .section-title {
    font-size: clamp(2.2rem, 9vw, 3rem);
    line-height: 1.08;
  }

  /* Tighten eyebrow on mobile */
  .section-eyebrow { margin-bottom: 1rem; }

  html, body { max-width: 100%; overflow-x: hidden; }
}

/* ============================================================
   NAV (mobile already handled in nav.css — just padding fix)
   ============================================================ */
@media (max-width: 900px) {
  nav { padding: 0.85rem var(--mobile-px, 1.25rem); }
  .nav-logo-img { height: 40px; }
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
}

/* ============================================================
   HERO
   ============================================================ */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: unset;
    padding: 6rem 1.25rem 3.5rem;
    align-items: flex-start;
  }

  .hero-right,
  .hero-stat-cards { display: none; }

  /* Left-align — cleaner on mobile than forced center */
  .hero-eyebrow { justify-content: flex-start; margin-bottom: 1.25rem; }

  .hero-headline {
    font-size: clamp(3.2rem, 13vw, 5rem);
    margin-bottom: 0.75rem;
  }

  .hero-subhead {
    font-size: clamp(1.15rem, 4.5vw, 1.5rem);
    margin-bottom: 1.25rem;
  }

  .hero-body {
    font-size: 0.9rem;
    max-width: 100%;
    margin-bottom: 2rem;
    color: rgba(176,176,176,0.9);
  }

  .hero-buttons {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary {
    width: 100%;
    text-align: center;
    padding: 1rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 5.5rem 1.25rem 3rem;
  }
  .hero-headline { font-size: clamp(2.8rem, 14vw, 3.8rem); }
}

/* ============================================================
   TRUST BAR — horizontal scroll strip on mobile
   ============================================================ */
@media (max-width: 900px) {
  .trust-bar {
    padding: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(2,32,244,0.15);
  }
  .trust-bar::-webkit-scrollbar { display: none; }

  .trust-item {
    flex-shrink: 0;
    padding: 1.1rem 1.25rem;
    border-right: 1px solid rgba(2,32,244,0.1);
    gap: 0.6rem;
  }
  .trust-item:last-child { border-right: none; }

  .trust-icon {
    width: 28px;
    height: 28px;
  }

  .trust-text strong { font-size: 0.78rem; }
  .trust-text span { font-size: 0.68rem; }
}

/* ============================================================
   SERVICES
   ============================================================ */
@media (max-width: 900px) {
  .services {
    padding: var(--mobile-section-py, 4.5rem) 0;
  }

  .services-header {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 0 var(--mobile-px, 1.25rem);
  }

  .services-intro {
    font-size: 0.88rem;
    max-width: 100%;
  }

  /* Cards in a single column — full bleed with no outer gap */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 1px;
    border-left: none;
    border-right: none;
  }

  .service-card {
    padding: 1.75rem var(--mobile-px, 1.25rem);
    /* Disable lift transform on touch — no hover state */
  }
  .service-card:hover { transform: none; }

  .service-num {
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
  }

  .service-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0.9rem;
  }

  .service-title { font-size: 0.82rem; }
  .service-desc { font-size: 0.85rem; margin-bottom: 1rem; }
}

/* ============================================================
   ABOUT — stacked, image first
   ============================================================ */
@media (max-width: 900px) {
  .about {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .about-image {
    min-height: 52vw;
    max-height: 340px;
    order: 0;
  }

  .portrait-monogram { font-size: 6rem; }

  .about-content {
    order: 1;
    padding: 2.5rem var(--mobile-px, 1.25rem) 3rem;
  }

  .about-bio {
    font-size: 0.88rem;
    max-width: 100%;
    margin: 1.25rem 0 1.5rem;
  }

  .about-quote {
    font-size: 1.15rem;
    margin: 1.5rem 0;
  }

  .credentials { margin-top: 1.5rem; gap: 0.5rem; }
  .credential { font-size: 0.82rem; }
}

/* ============================================================
   PROCESS — streamlined steps
   ============================================================ */
@media (max-width: 900px) {
  .process {
    padding: var(--mobile-section-py, 4.5rem) var(--mobile-px, 1.25rem);
  }

  .process-grid {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 2.5rem;
  }

  .process-nav { display: none; }

  .process-steps { gap: 0; }

  /* Each step: slim horizontal rule between, number inline with title */
  .process-step {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 1rem;
    align-items: start;
    padding: 2rem 0;
    border-bottom: 1px solid rgba(2,32,244,0.1);
  }
  .process-step:last-child { border-bottom: none; }

  .step-num-large {
    font-size: 2.4rem;
    min-width: 52px;
    color: rgba(2,32,244,0.22);
    line-height: 1;
    padding-top: 0.15rem;
  }

  .step-title {
    font-size: 1.5rem;
    margin-bottom: 0.6rem;
  }

  .step-desc {
    font-size: 0.86rem;
    line-height: 1.75;
    max-width: 100%;
  }

  .step-detail {
    margin-top: 1rem;
    padding: 0.9rem;
    gap: 0.4rem;
  }

  .step-tag {
    font-size: 0.68rem;
    padding: 0.25rem 0.6rem;
  }
}

@media (max-width: 480px) {
  .process-step {
    grid-template-columns: 40px 1fr;
    gap: 0.75rem;
  }
  .step-num-large { font-size: 2rem; min-width: 40px; }
}

/* ============================================================
   GALLERY STRIP (homepage)
   ============================================================ */
@media (max-width: 900px) {
  .gallery-strip {
    padding: var(--mobile-section-py, 4.5rem) var(--mobile-px, 1.25rem);
    overflow: hidden;
  }

  .gallery-strip-header {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.75rem;
  }

  .gallery-strip-intro {
    font-size: 0.86rem;
    max-width: 100%;
  }

  /* 2-column mosaic: tall item spans both rows */
  .gallery-preview-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 140px;
    gap: 4px;
  }

  .gallery-preview-item.tall {
    grid-row: span 2;
  }
}

@media (max-width: 480px) {
  .gallery-preview-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .gallery-preview-item,
  .gallery-preview-item.tall {
    height: 200px;
    grid-row: span 1;
  }
}

/* ============================================================
   GALLERY PAGE
   ============================================================ */
@media (max-width: 900px) {
  .gallery-page-grid {
    padding: 2.5rem var(--mobile-px, 1.25rem) 5rem;
  }

  /* Horizontal scroll filter bar */
  .gallery-filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    padding-bottom: 0.25rem;
    margin-bottom: 1.5rem;
  }
  .gallery-filters::-webkit-scrollbar { display: none; }

  .gallery-filter-btn {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    font-size: 0.7rem;
    min-height: 44px;
    white-space: nowrap;
  }

  .gallery-main-grid { columns: 2; column-gap: 6px; }
}

@media (max-width: 480px) {
  .gallery-main-grid { columns: 1; }
}

/* ============================================================
   CTA SECTION
   ============================================================ */
@media (max-width: 900px) {
  .cta-section {
    padding: 4rem var(--mobile-px, 1.25rem);
  }

  .cta-headline {
    font-size: clamp(2.2rem, 9vw, 3.2rem);
    margin-bottom: 1rem;
  }

  .cta-sub {
    font-size: 0.9rem;
    margin-bottom: 2rem;
  }

  .cta-phone {
    font-size: 2rem;
    margin-bottom: 0.4rem;
  }

  .cta-note {
    font-size: 0.75rem;
    margin-bottom: 2rem;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .cta-section .btn-primary,
  .cta-section .btn-secondary {
    width: 100%;
    text-align: center;
    padding: 1rem 1.5rem;
  }
}

/* ============================================================
   CONTACT SECTION
   ============================================================ */
@media (max-width: 900px) {
  .contact {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 4rem var(--mobile-px, 1.25rem);
  }

  /* Info block comes first, then form */
  .contact-info { order: 0; }
  .contact-form { order: 1; }

  .contact-detail { margin-top: 1.75rem; gap: 1.25rem; }

  .contact-item-icon { width: 32px; height: 32px; }
  .contact-item-label { font-size: 0.68rem; }
  .contact-item-value { font-size: 1rem; }

  /* Full-width form inputs */
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .form-row .form-group { margin-bottom: 1rem; }

  .form-input,
  .form-select,
  .form-textarea {
    font-size: 1rem; /* Prevent iOS zoom */
    padding: 0.9rem 0.85rem;
  }

  .form-submit {
    min-height: 52px;
    margin-top: 1.25rem;
    font-size: 0.78rem;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
@media (max-width: 900px) {
  footer {
    padding: 2.5rem var(--mobile-px, 1.25rem) 1.5rem;
  }

  /* Brand full-width row 1, then 3 link cols flow 2-per-row */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 1.5rem;
  }

  /* Brand: full width, separated by a subtle rule */
  .footer-brand {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(2,32,244,0.12);
  }

  .footer-brand .nav-logo {
    font-size: 0.92rem;
    letter-spacing: 0.18em;
    margin-bottom: 0.2rem;
  }

  .footer-tagline {
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 0.4rem;
  }

  .footer-brand > div:last-child {
    font-size: 0.78rem;
    margin-top: 0;
  }

  /* Link columns sit 2-per-row automatically in the 2-col grid */
  .footer-col-title {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.75rem;
  }

  .footer-links { gap: 0.5rem; }
  .footer-links a { font-size: 0.82rem; }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding-top: 1.25rem;
    margin-top: 0.25rem;
  }

  .footer-legal { font-size: 0.7rem; }
  .footer-bbb { font-size: 0.7rem; gap: 0.5rem; flex-wrap: wrap; }
  .bbb-badge { padding: 0.25rem 0.6rem; }
  .footer-instagram { font-size: 0.7rem; }
  .footer-instagram svg { width: 16px; height: 16px; }
}

/* ============================================================
   INNER PAGE HERO (about / gallery / process / services / contact)
   ============================================================ */
@media (max-width: 900px) {
  .page-hero {
    min-height: 44vw;
    padding: 8rem var(--mobile-px, 1.25rem) 3rem;
  }

  .page-title {
    font-size: clamp(2.5rem, 11vw, 4rem) !important;
    margin-bottom: 1rem !important;
  }

  .page-lead {
    font-size: 0.88rem !important;
    max-width: 100% !important;
    line-height: 1.7 !important;
  }

  .page-hero-rule { left: var(--mobile-px, 1.25rem); right: var(--mobile-px, 1.25rem); }
}

/* ============================================================
   ABOUT PAGE — stats row
   ============================================================ */
@media (max-width: 900px) {
  .stats-row { grid-template-columns: 1fr 1fr !important; gap: 1px !important; }
}
@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr 1fr !important; }
}

/* ============================================================
   SERVICES PAGE — inner service cards / accordion
   ============================================================ */
@media (max-width: 900px) {
  /* Service detail sections stack cleanly */
  .service-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* ============================================================
   CONTACT PAGE (contact.php) — sidebar layout
   ============================================================ */
@media (max-width: 900px) {
  .contact-page-grid,
  .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .contact-sidebar {
    padding: 2rem var(--mobile-px, 1.25rem) !important;
  }
  .area-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
  }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
@media (max-width: 900px) {
  .lightbox-inner { width: 96vw; }
  .lightbox-arrow.prev { left: 4px; top: auto; bottom: -56px; transform: none; }
  .lightbox-arrow.next { right: 4px; top: auto; bottom: -56px; transform: none; }
  .lightbox-close { top: -46px; }
}

/* ============================================================
   TOUCH — minimum tap target size
   ============================================================ */
@media (max-width: 900px) {
  .gallery-filter-btn,
  .form-submit,
  .btn-primary,
  .btn-secondary,
  .nav-hamburger,
  .sidebar-close { min-height: 44px; }

  .process-nav-item { padding: 1rem 0; }
}

/* ============================================================
   SCROLL PROGRESS BAR — keep visible on mobile
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: var(--copper);
  z-index: 9999;
  transition: height 0.1s linear;
}