/* ============================================================
   SITE RESPONSIVE — The Mother Daughter Team™
   motherdaughterteam.ca

   Shared responsive refinements for all pages.
   This file is loaded AFTER per-page inline <style> blocks
   so it wins the cascade at equal specificity.

   Target viewports
   ─────────────────────────────────────────────────────────
   1440px+  Desktop        (baseline — no changes)
   901–1199px Tablet landscape
   820px    Tablet portrait  ← primary gap we fill
   430px    Mobile standard
   390px    Mobile small
   ============================================================ */


/* ============================================================
   1. NAV — TABLET LANDSCAPE REFINEMENTS
   901px → 1199px: desktop nav stays visible but with tighter
   spacing so nothing wraps or overflows at ~1024px
   ============================================================ */
@media (max-width: 1199px) and (min-width: 901px) {
  nav {
    padding: 20px 32px;
  }
  nav.scrolled,
  .nav-solid {
    padding: 12px 32px !important;
  }
  .nav-links {
    gap: 22px;
  }
  .nav-right {
    gap: 18px;
  }
  .nav-logo {
    margin: 0 20px;
  }
  .nav-logo-img {
    height: 60px;
  }
  /* Slightly smaller CTA button at this range */
  .nav-cta-btn {
    padding: 10px 18px;
    font-size: 9.5px;
  }
}


/* ============================================================
   2. NAV — COLLAPSE AT 900px
   820px tablet portrait: the full desktop nav is too cramped.
   Drop to hamburger below 900px (matches affordability-quiz pattern).
   ============================================================ */
@media (max-width: 900px) {
  nav {
    padding: 18px 24px;
  }
  nav.scrolled,
  .nav-solid {
    padding: 12px 24px !important;
  }
  /* Hide desktop nav items */
  .nav-links,
  .nav-right,
  .nav-cta-btn {
    display: none !important;
  }
  /* Show hamburger — pinned to the right side of the nav
     Min 44×44px touch target (Apple HIG), explicit stacking so
     iOS Safari backdrop-filter compositing cannot block taps */
  .hamburger {
    display: flex !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    margin-left: auto;
    min-width: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1010 !important;
    touch-action: manipulation !important;
  }
  /* Allow mobile menu to open above the 768px breakpoint too */
  .mobile-menu.open {
    display: flex !important;
    opacity: 1;
  }
}


/* ============================================================
   3. SECTION PADDING — TABLET LANDSCAPE (1024px)
   Bridge between desktop (100px 60px) and mobile (72px 20px).
   No equivalent rule exists in inline styles at this breakpoint.
   ============================================================ */
@media (max-width: 1024px) {
  section {
    padding: 80px 48px;
  }
  .page-hero-content {
    padding: 100px 48px 0;
  }
  .breadcrumb {
    padding: 14px 48px;
  }
  .cta-band {
    padding: 72px 48px;
  }
  footer {
    padding: 44px 48px 24px;
  }
}


/* ============================================================
   4. SECTION PADDING — TABLET PORTRAIT (820px)
   Intermediate step between 1024px tablet and 767px mobile.
   ============================================================ */
@media (max-width: 820px) {
  section {
    padding: 72px 32px;
  }
  .page-hero-content {
    padding: 100px 32px 0;
  }
  .breadcrumb {
    padding: 12px 32px;
  }
  .cta-band {
    padding: 64px 32px;
  }
  footer {
    padding: 40px 32px 20px;
  }

  /* Split sections: tighter padding at tablet portrait */
  .split-content {
    padding: 52px 32px;
  }
  .split-img {
    min-height: 300px;
  }

  /* Footer: keep 2-column layout at tablet portrait */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  /* Page hero: auto height prevents dead space at portrait */
  .page-hero {
    height: auto;
    min-height: 380px;
    align-items: flex-start !important;
  }
  /* Push content below the fixed nav (nav = 92px at mobile).
     !important overrides any inline padding-top on the element. */
  .page-hero-content {
    padding: 110px 32px 40px !important;
  }

  /* Card grids: 2-column still works fine at 820px */
  .card-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .card-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}


/* ============================================================
   5. MOBILE — CORE IMPROVEMENTS (≤ 767px)
   Touch targets, iOS zoom prevention, readable line lengths,
   rhythm and spacing cohesion.
   ============================================================ */
@media (max-width: 767px) {

  /* ── Section spacing ── */
  section {
    padding: 60px 20px;
  }
  .page-hero-content {
    padding: 110px 20px 40px !important;
  }
  .breadcrumb {
    padding: 12px 20px;
  }
  .cta-band {
    padding: 56px 20px;
  }
  footer {
    padding: 36px 20px 20px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px;
  }
  /* Brand column spans full width at top, then 2-col for the rest */
  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }

  /* ── Tap targets — minimum 44px (Apple HIG) / 48px (Material) ── */
  /* Buttons as inline-flex so height works without breaking layout */
  .btn-gold,
  .btn-white,
  .btn-outline-gold,
  .btn-outline-light {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ── iOS input zoom prevention ── */
  /* iOS Safari zooms in if input font-size < 16px */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* ── Stats row ── */
  /* Keep 2-column on mobile — single column makes numbers feel weak */
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-num {
    font-size: 40px;
  }
  .stat-num span {
    font-size: 24px;
  }
  .stat-item {
    padding: 36px 20px;
  }

  /* ── Info cards ── */
  .info-card {
    padding: 32px 24px;
  }
  .info-card-title {
    font-size: 22px;
  }

  /* ── Testimonials ── */
  .testimonial-block {
    padding: 40px 24px;
  }
  .testimonial-block blockquote {
    font-size: 18px;
  }

  /* ── CTA band ── */
  .cta-band h2 {
    font-size: clamp(26px, 7.5vw, 44px);
  }
  .cta-band p {
    font-size: 15px;
    margin-bottom: 32px;
  }
  /* Shrink the giant decorative quote mark */
  .cta-band::before {
    font-size: 200px;
  }

  /* ── Footer bottom ── */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .footer-bottom-links {
    gap: 14px;
    flex-wrap: wrap;
  }

  /* ── Page hero ── */
  .page-hero {
    min-height: 280px;
  }

  /* ── Section heading sizes ── */
  h2.section-title {
    font-size: clamp(26px, 7vw, 42px);
  }

  /* ── Mobile font boost — increase readability on phones ── */
  body {
    font-size: 16px !important;
  }
  .section-desc {
    font-size: 17px !important;
    line-height: 1.9 !important;
  }
  .info-card-text {
    font-size: 16px !important;
    line-height: 1.85 !important;
  }
  .footer-about {
    font-size: 15px !important;
  }
  .footer-links a {
    font-size: 15px !important;
  }
  .footer-contact-row {
    font-size: 15px !important;
  }
  .cta-band p {
    font-size: 16px !important;
  }
  /* Service cards, step cards, general body text in sections */
  section p {
    font-size: 16px !important;
    line-height: 1.85 !important;
  }
  /* Breadcrumb text */
  .breadcrumb-inner {
    font-size: 12px !important;
  }

  /* ── Nav logo — prevent blur from filter on raster SVG ── */
  .nav-logo-img {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
  }

  /* ── "All Services" link — move below heading on mobile ── */
  .home-services-overview > div > div:first-child {
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 16px !important;
  }

  /* ── Mobile menu links — ensure proper tap targets ── */
  .mobile-menu {
    gap: 0;
    padding: 24px 0;
    overflow-y: auto;
  }
  .mobile-menu a {
    min-height: 52px;
    width: 100%;
    max-width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
  }

  /* ── Nav logo on mobile ── */
  .nav-logo-img {
    height: 56px;
  }

  /* ── Card grids: single column on mobile ── */
  .card-grid-3,
  .card-grid-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}


/* ============================================================
   6. VERY SMALL MOBILE (≤ 420px)
   iPhone SE, older Android handsets, 390px viewport width.
   Tighten further without sacrificing readability.
   ============================================================ */
@media (max-width: 420px) {
  section {
    padding: 52px 16px;
  }
  .page-hero-content {
    padding: 84px 16px 0;
  }
  .breadcrumb {
    padding: 12px 16px;
  }
  .cta-band {
    padding: 48px 16px;
  }
  footer {
    padding: 32px 16px 16px;
  }
  .footer-grid {
    gap: 20px;
  }

  /* Buttons: narrower padding at very small screens */
  .btn-gold,
  .btn-white,
  .btn-outline-gold,
  .btn-outline-light {
    padding: 14px 28px;
    letter-spacing: 0.14em;
    width: 100%;
    text-align: center;
  }

  /* Stat numbers: prevent overflow */
  .stat-num {
    font-size: 34px;
  }

  /* Logo: slightly smaller at 390px */
  .nav-logo-img {
    height: 50px;
  }

  /* Section labels */
  .section-label {
    font-size: 9px;
  }

  /* Hero: tighter */
  .page-hero {
    min-height: 260px;
  }

  /* CTA band: stack the button naturally */
  .cta-band h2 {
    font-size: clamp(24px, 8vw, 36px);
  }

  /* Footer bottom links: stack vertically at 390px */
  .footer-bottom-links {
    flex-direction: column;
    gap: 6px;
  }
}


/* ============================================================
   7. SPLIT-SECTION IMAGE ORDER
   On mobile, move the image above the copy (not below) when
   the image is on the right (default grid order puts copy first).
   Only affects pairs where image is visually second.
   ============================================================ */
@media (max-width: 767px) {
  .split-section {
    grid-template-columns: 1fr;
  }
  /* Image-first variant: image div after content div in DOM */
  .split-section > .split-img:last-child {
    order: -1;
  }
}


/* ============================================================
   8. BREADCRUMB LINE LENGTH
   Prevent long breadcrumb paths from overflowing horizontally
   ============================================================ */
@media (max-width: 767px) {
  .breadcrumb-inner {
    flex-wrap: wrap;
    row-gap: 4px;
    font-size: 10px;
  }
}


/* ============================================================
   9. MARQUEE
   Slow down on mobile for better readability
   ============================================================ */
@media (max-width: 767px) {
  .marquee-track {
    animation-duration: 36s;
  }
  .marquee-item {
    padding: 0 20px;
  }
}


/* ============================================================
   10. MARKET INSIDER SECTION — mobile polish
   (Supplements market-insider.css)
   ============================================================ */
@media (max-width: 767px) {
  .mi-cta {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ============================================================
   11. HOME PAGE — HERO STAT BADGES
   Three absolute-positioned boxes bottom-right overlap hero
   content on tablet/mobile — hide below 900px
   ============================================================ */
/* Tablet + Mobile (≤900px): hide completely */
@media (max-width: 900px) {
  .hero-badges {
    display: none !important;
  }
}


/* ============================================================
   12. HOME PAGE — ABOUT SECTION GRID
   1fr 1.5fr two-column collapses at tablet portrait
   ============================================================ */
@media (max-width: 820px) {
  .home-about-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}


/* ============================================================
   13. SELLERS — PROCESS STEPS
   3-col grid (52px 1fr 2fr) is unreadable on mobile.
   Becomes: step number inline with heading, description below.
   ============================================================ */
@media (max-width: 767px) {
  .sellers-process-row {
    grid-template-columns: 28px 1fr !important;
    gap: 0 12px !important;
    padding: 28px 0 !important;
  }
  /* Description spans full width below the number + heading row */
  .sellers-process-row > p {
    grid-column: 1 / -1 !important;
    margin-top: 10px !important;
    padding-right: 0 !important;
  }
  /* Heading: no right padding needed in 2-col layout */
  .sellers-process-row > h3 {
    padding-right: 0 !important;
    font-size: 19px !important;
  }
}


/* ============================================================
   14. SELLERS — VIRTUAL STAGING SPLIT
   Two-column image+text block: image stacks above text on tablet
   ============================================================ */
@media (max-width: 820px) {
  .sellers-staging-split {
    grid-template-columns: 1fr !important;
  }
  .sellers-staging-split > div:first-child {
    min-height: 260px !important;
  }
  .sellers-staging-split > div:last-child {
    padding: 40px 32px !important;
  }
}
@media (max-width: 767px) {
  .sellers-staging-split > div:first-child {
    min-height: 220px !important;
  }
  .sellers-staging-split > div:last-child {
    padding: 32px 20px !important;
  }
}


/* ============================================================
   15. SELLERS — ACTION BOXES (Guide + Evaluation side-by-side)
   1fr 1fr with 52px padding: stacks at tablet, padding reduced
   ============================================================ */
@media (max-width: 820px) {
  .sellers-action-grid {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }
  .sellers-action-grid > div {
    padding: 40px 32px !important;
    min-height: auto !important;
  }
}
@media (max-width: 767px) {
  .sellers-action-grid > div {
    padding: 32px 20px !important;
  }
}


/* ============================================================
   16. SELLERS — MARKET STATS PANEL (4-column grid)
   4 cols → 2×2 at tablet → 1 col at mobile
   ============================================================ */
@media (max-width: 820px) {
  .sellers-stat-pad {
    padding: 36px 32px 28px !important;
  }
  .sellers-stat-inner {
    grid-template-columns: 1fr 1fr !important;
    row-gap: 36px !important;
  }
  /* Reset all inline paddings and borders, apply uniform layout */
  .sellers-stat-inner > div {
    padding: 0 16px !important;
    text-align: center !important;
    border-right: none !important;
  }
  /* Re-apply divider on left column items */
  .sellers-stat-inner > div:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.07) !important;
  }
}
@media (max-width: 540px) {
  .sellers-stat-pad {
    padding: 28px 20px 24px !important;
  }
  .sellers-stat-inner {
    grid-template-columns: 1fr 1fr !important;
    row-gap: 28px !important;
  }
  .sellers-stat-inner > div {
    padding: 0 8px !important;
  }
}


/* ============================================================
   17. CONTACT PAGE — MAIN GRID
   1fr 1fr with 80px gap: stacks at 820px tablet portrait
   ============================================================ */
@media (max-width: 820px) {
  .contact-main-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}


/* ============================================================
   18. CONTACT PAGE — PERSON CARDS (100px photo + info)
   100px fixed photo works at 820px; reduce to 80px at mobile
   ============================================================ */
@media (max-width: 767px) {
  .contact-person-card {
    grid-template-columns: 80px 1fr !important;
  }
}


/* ============================================================
   19. CONTACT PAGE — FORM COLUMN PADDING
   48px padding is excessive on mobile
   ============================================================ */
@media (max-width: 820px) {
  .contact-form-col {
    padding: 36px 32px 28px !important;
  }
}
@media (max-width: 767px) {
  .contact-form-col {
    padding: 28px 20px 24px !important;
  }
}


/* ============================================================
   20. CONTACT PAGE — MAP IFRAME HEIGHT
   460px is too tall on mobile
   ============================================================ */
@media (max-width: 767px) {
  .contact-map iframe {
    height: 280px !important;
  }
}


/* ============================================================
   21. MARKET INSIDER — align breakpoints with site
   market-insider.css uses 960px & 600px; patch here to match
   site's 820px tablet portrait and 767px mobile breakpoints
   ============================================================ */
@media (max-width: 820px) {
  .mi-inner {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .mi-left::after {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .market-insider {
    padding: 60px 20px !important;
  }
  .mi-form-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .mi-email-input {
    border-right: 1px solid rgba(28,28,28,0.22) !important;
    font-size: 16px !important;
  }
  .mi-submit {
    width: 100% !important;
    padding: 16px 24px !important;
  }
}


/* ============================================================
   22. GENERAL — inline section wrappers with large padding
   Many sections use style="padding:100px 60px" or similar.
   These overrides ensure no horizontal overflow at small sizes.
   ============================================================ */
@media (max-width: 820px) {
  /* Any inline-padded section wrapper inside a section */
  section > div[style*="padding:100px 60px"],
  section > div[style*="padding: 100px 60px"] {
    padding: 0 !important;
  }
}
@media (max-width: 767px) {
  /* Reduce large gap values set inline */
  [style*="gap:80px"] {
    gap: 32px !important;
  }
  [style*="gap: 80px"] {
    gap: 32px !important;
  }
  [style*="gap:60px"] {
    gap: 28px !important;
  }
  /* Reduce heavy inline padding on content boxes */
  [style*="padding:52px 48px"],
  [style*="padding: 52px 48px"] {
    padding: 32px 20px !important;
  }
  [style*="padding:48px 56px"],
  [style*="padding: 48px 56px"] {
    padding: 32px 20px !important;
  }
}

/* ============================================================
   23. MOBILE NAV — SLIDE-IN DRAWER FROM LEFT
   Replaces fullscreen overlay with a left-side panel
   ============================================================ */

/* Backdrop overlay — dark scrim behind the open drawer
   No backdrop-filter: iOS Safari can mis-composite blur layers
   above elements with higher z-index, blocking the hamburger tap. */
.mobile-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 998;
}
.mobile-menu-backdrop.open {
  display: block;
}

@media (max-width: 900px) {
  /* ── Hamburger: more breathing room from edge ── */
  nav {
    padding: 18px 28px;
  }
  .hamburger {
    padding: 6px;
  }

  /* ── Logo: bigger on mobile ── */
  .nav-logo-img {
    height: 68px !important;
  }
  .nav-logo {
    margin: 0 12px;
  }

  /* ── Slide-in drawer ── */
  .mobile-menu {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 300px !important;
    max-width: 85vw !important;
    height: 100% !important;
    background: var(--ivory, #F8F4EE) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 0 0 40px !important;
    gap: 0 !important;
    opacity: 1 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 4px 0 40px rgba(0,0,0,0.15) !important;
    overflow-y: auto !important;
    z-index: 999 !important;
  }
  .mobile-menu.open {
    transform: translateX(0) !important;
    display: flex !important;
  }

  /* ── Logo inside drawer ── */
  .mobile-menu-logo {
    padding: 28px 28px 20px;
    border-bottom: 1px solid rgba(28,28,28,0.08);
    width: 100%;
    margin-bottom: 8px;
  }

  /* ── Nav links in drawer ── */
  .mobile-menu a:not(.mobile-menu-cta) {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    padding: 14px 28px !important;
    border-bottom: 1px solid rgba(28,28,28,0.06) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    font-size: 11px !important;
  }

  /* ── Calculator link ── */
  .mobile-menu-calc {
    color: var(--charcoal) !important;
    opacity: 0.7;
  }
  .mobile-menu-calc:hover {
    opacity: 1;
  }

  /* ── CTA button in drawer — full border, contained ── */
  .mobile-menu .mobile-menu-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 16px 28px 0 !important;
    width: calc(100% - 56px) !important;
    text-align: center !important;
    padding: 13px 20px !important;
    border-top: 1px solid var(--charcoal, #1C1C1C) !important;
    border-right: 1px solid var(--charcoal, #1C1C1C) !important;
    border-bottom: 1px solid var(--charcoal, #1C1C1C) !important;
    border-left: 1px solid var(--charcoal, #1C1C1C) !important;
    font-size: 11px !important;
  }
}


/* ============================================================
   24. CITY / DISCOVER GRID (Home page)
   3-col image grid → 2-col at tablet → 1-col at mobile
   Ensures city names are always fully visible
   ============================================================ */
@media (max-width: 820px) {
  .city-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .city-grid > a {
    height: 220px !important;
  }
}
@media (max-width: 767px) {
  .city-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .city-grid > a {
    height: 180px !important;
  }
  /* Ensure city name text is fully visible */
  .city-grid > a > div {
    padding: 16px !important;
  }
  .city-grid > a > div > div:first-child {
    font-size: 18px !important;
  }
}
@media (max-width: 420px) {
  .city-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .city-grid > a {
    height: 160px !important;
  }
}


/* ============================================================
   25. SERVICES GRID (Home page — 3 service cards)
   Ensures equal sizing and proper collapse on mobile
   ============================================================ */
@media (max-width: 820px) {
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }
  .services-grid > a {
    padding: 36px 32px !important;
  }
}
@media (max-width: 767px) {
  .services-grid > a {
    padding: 32px 20px !important;
  }
}


/* ============================================================
   26. MEET THE TEAM — Team member photo + bio grids
   Collapses 2-col to single column on tablet/mobile so photos
   are full-width rather than narrow slivers
   ============================================================ */
@media (max-width: 900px) {
  .team-member-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Bio text always first (order 1), photo always below (order 2) */
  .team-member-grid > div:not(.team-photo-col) {
    order: 1 !important;
  }
  .team-member-grid .team-photo-col {
    order: 2 !important;
  }
  /* Full-width portrait photos — consistent height */
  .team-member-grid img {
    height: 420px !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}
@media (max-width: 767px) {
  .team-member-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .team-member-grid img {
    height: 340px !important;
  }
}


/* ============================================================
   27. MOBILE MENU — Safe area padding for iPhone notch/bar
   Ensures top links (Home, Meet the Team) are never clipped
   ============================================================ */
@media (max-width: 900px) {
  .mobile-menu {
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
  .mobile-menu-logo {
    padding-top: max(28px, calc(env(safe-area-inset-top, 0px) + 16px)) !important;
  }
}


/* ============================================================
   28. SERVICES DETAIL GRID (real-estate-services.html)
   9-card service grid: 3-col → 2-col at tablet → 1-col mobile
   Uniform card heights and consistent spacing
   ============================================================ */
@media (max-width: 900px) {
  .services-detail-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    background: var(--ivory, #F8F4EE) !important;
  }
  .services-detail-grid > a {
    padding: 36px 32px !important;
  }
}
@media (max-width: 767px) {
  .services-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .services-detail-grid > a {
    padding: 32px 24px !important;
  }
}


/* ============================================================
   29. RESOURCES PAGE — Card grid rows
   All inline-styled grids collapse gracefully on mobile
   ============================================================ */

/* Tablet: 3-col → 2-col, 2-col stays 2-col */
@media (max-width: 900px) {
  .resources-row-3col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .resources-row-3col > a {
    padding: 36px 28px !important;
  }
  .resources-row-2col > a {
    padding: 40px 36px !important;
  }
  /* Guide row: switch flex cards to column layout */
  .resources-row-guides > a {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 36px 32px !important;
  }
}

/* Mobile: everything → 1-col */
@media (max-width: 767px) {
  .resources-row-2col,
  .resources-row-3col {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .resources-row-3col > a,
  .resources-row-2col > a {
    padding: 32px 24px !important;
  }
  /* Shrink heading font in cards to prevent overflow */
  .resources-row-2col h3,
  .resources-row-3col h3 {
    font-size: 18px !important;
  }
  /* Remove the big decorative arrow on guide cards */
  .resources-row-guides > a > div:last-child {
    display: none !important;
  }
}


/* ============================================================
   30. TRIPLE C FARM — Intro grid (text + contact box)
   Collapses 1fr auto side-by-side to single column on mobile
   ============================================================ */
@media (max-width: 820px) {
  .triple-c-intro {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .triple-c-intro > div:last-child {
    min-width: 0 !important;
    width: 100% !important;
  }
}


/* ============================================================
   31. CONTACT PAGE — Form column reveal fix
   The form had a double class attribute bug causing it to stay
   hidden (opacity:0). Force visible so form is always shown.
   ============================================================ */
.contact-form-col.reveal {
  opacity: 1 !important;
  transform: none !important;
}
.contact-form-col.reveal.visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Contact grid: stack to single column on mobile */
@media (max-width: 820px) {
  .contact-main-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .contact-form-col {
    padding: 36px 28px 28px !important;
  }
}


/* ============================================================
   32. BUYERS PAGE — Free Guides & Programs grids
   2-col guides and 3-col programs collapse on mobile
   ============================================================ */
@media (max-width: 820px) {
  /* 3-col programs → 2-col at tablet */
  .buyers-programs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .buyers-programs-grid > div {
    padding: 28px 24px !important;
  }
}
@media (max-width: 767px) {
  /* 2-col guides → 1-col on mobile */
  .buyers-guides-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .buyers-guides-grid > div {
    padding: 36px 28px !important;
  }
  /* 3-col programs → 1-col on mobile */
  .buyers-programs-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .buyers-programs-grid > div {
    padding: 28px 24px !important;
  }
}


/* ============================================================
   33. FREE HOME EVALUATION — MAIN CONTENT GRID
   The 2-col info + form grid collapses to single column on
   mobile so neither column gets cramped or compressed.
   Form padding shrinks so it doesn't swallow the screen.
   ============================================================ */
@media (max-width: 820px) {
  /* Stack columns vertically: content first, form second */
  .free-eval-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  /* Tighten form box padding on tablet */
  .free-eval-form {
    padding: 36px 32px !important;
  }
}
@media (max-width: 767px) {
  /* Even tighter on phones — form should feel open, not boxed */
  .free-eval-form {
    padding: 28px 20px !important;
  }
  /* Reduce numbered-row grid column from 52px to 36px so text fits */
  .free-eval-grid .reveal > div > div[style*="52px"] {
    grid-template-columns: 36px 1fr !important;
  }
  /* Ensure reveal-d2 form is never invisible — override opacity animation */
  .free-eval-form.reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .free-eval-form.reveal.visible {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   CITY PAGES — intro grid (2fr 1fr) mobile stack
   Affects: burlington, oakville, hamilton, mississauga,
            toronto, niagara-north, luxury-homes
   ============================================================ */
@media (max-width: 767px) {
  .city-intro-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Market snapshot box: fix var(--gold) invisible label & tighten padding */
  .city-intro-grid > div > div[style*="var(--charcoal)"] {
    padding: 24px 20px !important;
  }
  .city-intro-grid > div > div[style*="var(--charcoal)"] > div:first-child {
    color: #E8B4C4 !important;
  }
}

/* ============================================================
   HOME PAGE — Tighten gap between About and Services on mobile
   With stats bar removed, two 100px-padded ivory sections stack
   creating excessive whitespace.
   ============================================================ */
@media (max-width: 767px) {
  .home-about-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Shrink bottom padding of About section → brings "What We Do" closer to team photo */
  section:has(.home-about-grid) {
    padding-bottom: 28px !important;
  }
  /* Shrink top padding of Services section */
  .home-services-overview {
    padding-top: 16px !important;
  }
  /* Reduce gap between "All Services" link and the 01/02/03 service cards */
  .home-services-overview > div > div:first-child {
    margin-bottom: 24px !important;
  }
}