/* ===================================================================== Responsive system — desktop-first, max-width ONLY (no min-width mixing). Base styles (index.css) target large desktop; these blocks step DOWN. Ordered largest → smallest so smaller screens win the cascade. Breakpoints (device-aligned): 1500 container reaches its max-width → below this, sections regain side padding 1300 nav collapses to hamburger (7-item nav can't fit below this) 1024 tablet — main multi-column grids stack 768 mobile — everything compact (single spacing tier below 768) 600 phone — everything single column + compact chrome Plus prefers-reduced-motion (feature query, not a width breakpoint). Section spacing tiers (single source of truth per tier). Container maxes at 1400px (home 1240) and reaches it around a 1500px viewport; above that it is centered with side gutters so 4rem 0 (no side padding) is safe; ≤1500 the section side padding keeps content off the edges. >1500 (base, index.css) section 4rem 0 footer 4rem 0 0 768–1500 (@1500) section 2rem 3rem footer 2rem 0 0 / sides 0 3rem <768 (@768) section 2rem 1.5rem footer 2rem 0 0 / sides 0 1.5rem ===================================================================== */ /* ========================= max-width: 1500px ========================= */ @media (max-width: 1500px) { /* --- Section spacing: container no longer at max-width, so restore side padding (4rem 0 would let content touch the edges below 1500). --- */ section { padding: 2rem 3rem; } .site-header, .topbar { padding: 1rem 3rem; } .site-footer { padding: 2rem 0 0; } .site-footer-top, .site-footer-cols { padding: 0 3rem; } } /* ========================= max-width: 1300px ========================= */ @media (max-width: 1300px) { /* --- Site chrome: collapse nav to hamburger --- */ .nav-menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: linear-gradient(180deg, #5a0d0d, var(--c-maroon)); box-shadow: 0 16px 38px rgba(0,0,0,0.3); max-height: 0; overflow: hidden; transition: max-height 0.35s var(--c-ease); } .nav-menu.open { max-height: 480px; } .nav-menu a { padding: 14px 22px; border-bottom: 1px solid rgba(246,166,35,0.18); } .nav-menu a::after { display: none; } .nav-toggle { display: block; order: 3; } .site-header-inner { position: relative; flex-wrap: wrap; } } /* ========================= max-width: 1024px ========================= */ @media (max-width: 1024px) { /* --- Site chrome --- */ .site-footer-cols { grid-template-columns: 1fr 1fr; } /* --- Home --- */ .home-page .home-about-top { grid-template-columns: 1fr; gap: 40px; } .home-page .home-about-media { order: -1; } .home-page .home-about-features { grid-template-columns: repeat(2, 1fr); } .home-page .home-reviews-layout { grid-template-columns: 1fr; } .home-page .services-showcase { grid-template-columns: repeat(3, 1fr); } .home-page .service-card:nth-child(1), .home-page .service-card:nth-child(8) { grid-column: span 2; grid-row: span 2; } /* --- Topics: 4 cols -> 2 cols, dividers switch from every-column to left-column-only --- */ .home-page .topics-columns { grid-template-columns: repeat(2, 1fr); } .home-page .topics-list { border-right: none; padding: 0 24px; } .home-page .topics-list:nth-child(odd) { border-right: 1px solid var(--line); padding-left: 0; } .home-page .topics-list:nth-child(even) { padding-right: 0; } /* --- About --- */ .about-profile-grid { grid-template-columns: 1fr; gap: 56px; } .about-profile-media { order: -1; } .about-stats { grid-template-columns: 1fr 1fr; } .about-journey-grid { grid-template-columns: 1fr; gap: 38px; } .about-why-grid { grid-template-columns: 1fr; } /* --- Specialist In --- */ .specialist-skills-grid { grid-template-columns: 1fr; gap: 36px; } .specialist-skills-aside { position: static; text-align: center; } .specialist-skills-aside .eyebrow { justify-content: center; } .specialist-credentials-grid { grid-template-columns: 1fr; gap: 44px; } .specialist-credentials-media { order: -1; } /* --- Why Choose Us --- */ .why-intro-grid { grid-template-columns: 1fr; gap: 44px; } .why-intro-media { order: -1; } .why-stats { grid-template-columns: 1fr 1fr; } .why-reasons-grid { grid-template-columns: repeat(2, 1fr); } .why-steps { grid-template-columns: 1fr 1fr; } .why-step:not(:last-child)::after { display: none; } .why-guarantee-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } } /* ============== max-width: 1023.98px — global typography step ============== */ /* Mobile & Tablet (<1024px): body/interactive text 14px, section headings 22px. Kept just below 1024 so the ≥1024 desktop values stay exact (e.g. iPad landscape). */ @media (max-width: 1023.98px) { /* --- Global typography --- */ p, li, a, button { font-size: 14px; } h2 { font-size: 22px; } } /* ========================= max-width: 768px ========================= */ @media (max-width: 768px) { .home-page .hero-chips li { font-size: 14px; } /* --- Section spacing (mobile: compact side padding) --- */ section { padding: 2rem 1.5rem; } .site-header, .topbar { padding: 1rem 1.5rem; } .site-footer { padding: 2rem 0 0; } .site-footer-top, .site-footer-cols { padding: 0 1.5rem; } /* --- Contact / Testimonials (shared CTA strip) --- */ .cta-strip-inner { flex-direction: column; text-align: center; } /* --- Home --- */ .home-page .home-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 14px; } .home-page .home-stats-item { border-right: none !important; } .home-page .home-stats { margin-top: -40px; } /* --- Topics: stack single column, swap vertical dividers for horizontal ones --- (nth-child(odd)/(even) used here purely to out-specificity the 1024px divider rule above, which also targets :nth-child and would otherwise win the cascade) --- */ .home-page .topics-columns { grid-template-columns: 1fr; row-gap: 0; } .home-page .topics-list:nth-child(odd), .home-page .topics-list:nth-child(even) { border-right: none; padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line); } .home-page .topics-list:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } /* --- Services --- */ .services-steps { grid-template-columns: 1fr 1fr; gap: 36px 24px; } .services-steps::before { display: none; } /* --- Contact --- */ .contact-grid { grid-template-columns: 1fr; gap: 30px; max-width: 620px; margin: 0 auto; } /* --- Testimonials --- */ .rating-summary { grid-template-columns: 1fr; gap: 26px; padding: 28px 22px; } .rating-score { padding-right: 0; padding-bottom: 22px; border-right: none; border-bottom: 1px solid #f0e2da; } } /* ========================= max-width: 600px ========================= */ @media (max-width: 600px) { .topbar-right{ flex-direction: column; align-items: center; } /* --- Site chrome --- */ .topbar-inner { justify-content: center; text-align: center; } .site-footer-cols { grid-template-columns: 1fr; } .header-phone-text { display: none; } .brand .brand-logo { display: none; } .brand .brand-logo-icon { display: block; } .brand { background: transparent; box-shadow: none; padding: 0; } /* --- Home: services as a clean horizontal list on phones --- */ /* 13 image tiles feel congested at this width, so switch to single-column list rows: photo thumbnail left, gold icon badge on its corner, dark title on a white card. Titles get full horizontal room (1–2 lines, no crowding). */ .home-page .hero-chips li { font-size: 11px; } .home-page .services-showcase { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; } .home-page .service-card { display: flex; align-items: stretch; height: 92px; background: #fff; border-radius: 14px; } .home-page .service-card:nth-child(1), .home-page .service-card:nth-child(8) { grid-column: auto; grid-row: auto; } .home-page .service-card img { position: relative; inset: auto; flex: 0 0 104px; width: 104px; height: 100%; } .home-page .service-card::after { display: none; } .home-page .service-card-icon { top: 10px; left: 10px; width: 34px; height: 34px; font-size: 14px; } .home-page .service-card-body { position: static; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 16px; } .home-page .service-card-title, .home-page .service-card:nth-child(1) .service-card-title, .home-page .service-card:nth-child(8) .service-card-title { font-size: 14px; color: #3a0303; text-shadow: none; } .home-page .service-card-gold { border-radius: 14px; } .home-page .service-card-desc { display: none; } .home-page .home-reviews-grid { grid-template-columns: 1fr; } .home-page .home-about-features { grid-template-columns: 1fr; } .home-page .home-stats-inner { grid-template-columns: 1fr; } /* --- About --- */ .about-points { grid-template-columns: 1fr; } .about-stats { grid-template-columns: 1fr; } .about-feature { flex-direction: column; } /* --- Services --- */ .services-card { flex-basis: 100%; max-width: 420px; } .services-steps { grid-template-columns: 1fr; } .services-cta-inner { flex-direction: column; text-align: center; } .form-row { grid-template-columns: 1fr; gap: 0; } /* --- Specialist In --- */ .specialist-skills-list { grid-template-columns: 1fr; } .specialist-credentials-stats { grid-template-columns: 1fr; } /* --- Testimonials --- */ .review-spotlight { border-radius: 18px; } .review-spotlight-person { flex-wrap: wrap; gap: 14px; } .review-spotlight-badge { margin-left: 0; } /* --- Why Choose Us --- */ .why-stats { grid-template-columns: 1fr; } .why-reasons-grid { grid-template-columns: 1fr; } .why-comparison-cards { grid-template-columns: 1fr; } .why-steps { grid-template-columns: 1fr; } .why-cta-inner { flex-direction: column; text-align: center; } } /* ========================= prefers-reduced-motion (all pages) ========================= */ @media (prefers-reduced-motion: reduce) { /* --- Base / site chrome --- */ html { scroll-behavior: auto; } .page-hero::before, .page-hero::after, .header-phone-icon { animation: none !important; } .reveal-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; } /* --- Home --- */ .home-page .hero::before, .home-page .hero::after, .home-page .home-featured::before, .home-page .home-cta::before, .home-page .home-about-experience, .home-page .hero-eyebrow, .home-page .hero-script, .home-page .hero-title, .home-page .hero-sub, .home-page .hero-cta, .home-page .hero-chips { animation: none !important; } .home-page .reveal-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; } /* --- About --- */ .about-journey::before, .about-cta::before, .about-profile-badge { animation: none !important; } /* --- Services --- */ .services-process::before { animation: none !important; } /* --- Specialist In --- */ .specialist-credentials::before, .specialist-cta::before, .specialist-credentials-badge { animation: none !important; } /* --- Testimonials --- */ .trust-bar-item, .testimonial-card, .testimonial-card::before { transition: none; } /* --- Why Choose Us --- */ .why-guarantee-section::before, .why-intro-badge { animation: none !important; } /* --- Contact --- */ .contact-method, .contact-social a { transition: none; } }