/* Shared stylesheet moved out of inline <style> blocks so browsers cache it.
   Used by: /adus/lake-oswego-or/, /adus/portland-or/, /exterior-remodeling/lake-oswego-or/, /exterior-remodeling/portland-or/, /full-home/lake-oswego-or/, /full-home/portland-or/, /home-additions/lake-oswego-or/, /home-additions/portland-or/, /shower-remodeling/lake-oswego-or/, /shower-remodeling/portland-or/ */

/* ============================================
     MOBILE RESPONSIVE OVERRIDES (≤768px)
  ============================================ */
  @media (max-width: 768px) {

    /* === HERO === */
    #hero .hero-card { height: 100svh; }
    .hero-card-content { padding: 0 24px 180px; align-items: center; text-align: center; }
    .hero-badge { font-size: 9px; padding: 5px 12px; }
    .hero-heading { font-size: clamp(3.8rem, 14vw, 5.5rem); line-height: 1.02; }
    .hero-sub { font-size: 13px; max-width: 100%; }
    .hero-actions { flex-direction: column; gap: 12px; width: 100%; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .hero-stats-strip { padding: 16px 24px; flex-wrap: wrap; gap: 12px; }
    .hero-stats-strip .hero-stats-row { gap: 24px; flex-wrap: wrap; }
    .hero-stats-strip .hero-stat-num { font-size: clamp(1.6rem, 6vw, 2rem); }
    .hero-as-seen { display: none; }

    /* === BENEFITS === */
    #benefits { padding: 48px 0 0; }
    .benefits-heading-block { padding: 0 24px 0px; margin-bottom: 8px; flex-direction: column; align-items: flex-start; gap: 4px; }
    .benefits-heading-sub { display: none; }
    .benefits-title { font-size: clamp(3.2rem, 13vw, 4.5rem); }
    .benefits-stagger { padding: 0 24px; grid-template-columns: 1fr 1fr; gap: 12px; }
    .benefit-box:nth-child(1),
    .benefit-box:nth-child(2),
    .benefit-box:nth-child(3),
    .benefit-box:nth-child(4) { margin-top: 0; }

    /* === SERVICES === */
    #services { padding: 60px 0; }
    .svc-grid { grid-template-columns: 1fr; gap: 16px; }
    .svc-card { height: 280px; }

    /* === OUR WORK === */
    #our-work { padding: 40px 0 32px; }
    .oww-track-wrap::before, .oww-track-wrap::after { width: 60px; }
    .oww-gallery-btns { flex-direction: column !important; padding: 32px 24px 0 !important; }
    .oww-gallery-btns .btn { width: 100% !important; justify-content: center; text-align: center; }
    .oww-header { padding: 0 24px 20px; flex-direction: column; gap: 12px; align-items: flex-start; }
    .oww-sub { text-align: left; max-width: 100%; }
    .oww-row-header { padding: 0 24px 12px; }
    .oww-img,
    .oww-track-wrap:nth-child(3) .oww-img,
    .oww-track-wrap:nth-child(4) .oww-img { height: 260px; width: 360px; }

    /* === REVIEWS === */
    .reviews-section { padding: 60px 0; overflow: hidden; }
    .reviews-heading { font-size: clamp(1.8rem, 7vw, 2.4rem); }

    /* Reviews mobile fix */
    .reviews-carousel-wrap { padding: 0 44px; overflow: hidden; }
    .review-card { flex: 0 0 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; word-break: break-word; }
    .reviews-controls {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      margin-top: 32px;
    }
    .reviews-controls-btns {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .reviews-nav { position: static; transform: none; }
    #reviews { overflow: visible; }
    #reviews .container { overflow: visible; }
    .reviews-track-clip { overflow: hidden; width: 100%; }


    /* === PROCESS === */
    #process { padding: 60px 0 28px; }
    #process .container { padding: 0 24px; }
    .process-header { padding: 0 24px; margin-bottom: 40px; }
    .process-steps { grid-template-columns: 1fr; padding: 0; gap: 0; }
    .process-card { border-bottom: 1px solid var(--cream-dark); padding-bottom: 8px; }
    .process-card:last-child { border-bottom: none; }
    .process-card-content { padding: 20px 0 16px; }
    .process-card-photo { height: 220px; border-radius: 12px !important; overflow: hidden; margin-bottom: 8px; }
    .process-card-watermark { font-size: 4rem; top: 0; }
    .process-header { padding: 0 24px; margin-bottom: 32px; }

    /* === TRUST === */
    .trust-inner { grid-template-columns: 1fr; }
    .trust-left { padding: 60px 24px; }
    .trust-right { height: 280px; }
    .trust-stats { gap: 0; }
    .trust-stat { padding: 20px 0; }
    .trust-stat:nth-child(2), .trust-stat:nth-child(4) { padding-left: 20px; }
    .trust-stat-num { font-size: clamp(1.8rem, 7vw, 2.4rem); }

    /* === SERVICE AREA === */
    #service-area { padding: 60px 0 0; }
    .sa-content { width: 100%; padding: 40px 24px 24px; }
    .sa-container { flex-direction: column; gap: 40px; }
    .sa-title { font-size: clamp(1.8rem, 7vw, 2.4rem); }
    .sa-map-side { flex: none; height: 600px; min-height: 600px; overflow: hidden; display: block; position: relative; width: 100%; }
    .sa-map-side::after { box-shadow: none; background: linear-gradient(to bottom, #0f0f0f 0%, rgba(15,15,15,0) 18%, rgba(15,15,15,0) 86%, #0f0f0f 100%); }
    .sa-map-img { position: absolute; inset: 0; transform: translate(60px, 40px) scale(1.5); transform-origin: 50% 50%; width: 100%; height: 100%; object-fit: cover; object-position: center; max-width: none !important; }
    .sa-cities-tags { gap: 6px; }
    .sa-city-tag { font-size: 10px; padding: 4px 10px; }

    /* === WHY === */
    #why { padding: 60px 0; }
    .why-editorial { grid-template-columns: 1fr; gap: 40px; }
    .why-points-grid { grid-template-columns: 1fr 1fr; gap: 24px 20px; }

    /* === CONTACT === */
    .contact-split { grid-template-columns: 1fr; }
    .contact-photo-panel { display: none; }
    .contact-step1-inner { padding: 40px 24px; }

    /* === FAQ === */
    #faq { padding: 60px 0; }
    .faq-list { padding: 0 24px; }

    /* === FOOTER === */
    footer .container { padding: 0 24px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }

    /* === BENEFITS SECTION === */
    #benefits .benefits-stagger { grid-template-columns: 1fr; gap: 0; }
    .benefit-box { border: none !important; border-bottom: 1px solid var(--cream-dark) !important; padding: 24px 0; background: transparent; }
    .benefit-box:last-child { border-bottom: none !important; }
    .benefit-box::before { display: none; }
    .benefit-box-icon { width: 32px; height: 32px; margin-bottom: 12px; }

    /* === PROCESS mobile ===> handled below === */
  }

  @media (max-width: 480px) {
    /* === HERO === */
    .hero-heading { font-size: clamp(3.2rem, 13vw, 4.5rem); }
    .hero-stats-strip .hero-stats-row { gap: 16px; }

    /* === GALLERY === */
    .oww-img,
    .oww-track-wrap:nth-child(3) .oww-img,
    .oww-track-wrap:nth-child(4) .oww-img { height: 220px; width: 300px; }

    /* === TRUST === */
    .trust-stats { grid-template-columns: 1fr; }
    .trust-stat:nth-child(2), .trust-stat:nth-child(4) { padding-left: 0; border-left: none; }

    /* === FOOTER === */
    .footer-grid { grid-template-columns: 1fr; }

    /* === NAV === */
    #nav { padding: 12px 0; }

    /* === SERVICE AREA MAP (phones: gentler zoom so labels don't clip) === */
    .sa-map-side { height: 480px; min-height: 480px; }
    .sa-map-img { transform: translateX(0) scale(1.55); transform-origin: 50% 38%; object-fit: cover; object-position: center; }
  }

  /* Tablet range */
  @media (min-width: 681px) and (max-width: 960px) {
    .sa-map-side { flex: none; width: 100%; height: 520px; min-height: 520px; }
    .sa-map-side::after { box-shadow: none; background: linear-gradient(to bottom, #0f0f0f 0%, rgba(15,15,15,0) 18%, rgba(15,15,15,0) 86%, #0f0f0f 100%); }
    .sa-map-img { transform: translateX(0) scale(1.65); transform-origin: 50% 38%; object-fit: contain; object-position: center; }
  }