/* ============================================================
   Mobile / small-screen overrides.
   Everything below is gated behind max-width media queries, so
   nothing here ever touches the desktop (>860px) presentation —
   it only tightens scale, spacing and card density on phones.
   ============================================================ */

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .nav__right .btn-outline-dark { display: none; }

  /* Tighter global rhythm: every .section (all 5 pages) and the
     gutter shrink together from one place. */
  :root {
    --section-pad: clamp(48px, 13vw, 80px);
    --gutter: clamp(20px, 6vw, 28px);
  }

  .section--tight { padding-block: clamp(36px, 10vw, 56px); }
  .section-head { margin-bottom: clamp(28px, 8vw, 44px); gap: 16px; }

  /* ---- Type scale: the huge display sizes get a real phone ceiling ---- */
  .h-huge { font-size: clamp(2.6rem, 15vw, 4.4rem); line-height: 0.94; }
  .h-display { font-size: clamp(2.3rem, 11vw, 3.8rem); }
  .h-xl { font-size: clamp(1.9rem, 8vw, 2.8rem); }
  .ghost-num { font-size: clamp(3rem, 20vw, 5.6rem); }
  .quote-mark { font-size: clamp(2.4rem, 14vw, 3.6rem); }

  /* ---- Hero ---- */
  .hero { padding-top: 100px; }
  .hero__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-top: clamp(16px, 5vw, 32px);
    padding-top: clamp(12px, 4vw, 22px);
  }
  .hero__bottom .gap-lg {
    gap: 22px;
    flex-wrap: wrap;
    row-gap: 14px;
  }

  /* ---- Page hero ---- */
  .page-hero { padding-top: 104px; min-height: 40vh; }
  .page-hero__content { padding-bottom: 40px; }
  .page-hero__num { top: 92px; font-size: 4rem; }

  /* ---- Property / featured cards: compact 2-up grid so each card sits
     in a small tile instead of stacking full-width down the screen.
     The curated homepage bento (single big feature + 2 small) stays a
     single column since it's a 3-item showcase, not a dense catalog. */
  .p-grid:not(.p-grid--bento) { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
  .p-grid--bento { grid-template-columns: 1fr; gap: 18px; }
  .p-grid--bento .p-card:first-child { grid-row: auto; }
  .p-grid--bento .p-card:first-child .p-card__media { aspect-ratio: 4/5; min-height: 0; }
  .related-scroll { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }

  .p-card__body { padding-top: 10px; gap: 8px; }
  .p-card__name { font-size: 0.92rem; margin-bottom: 3px; }
  .p-card__loc { font-size: 0.68rem; }
  .p-card__specs { margin-top: 8px; padding-top: 8px; gap: 6px 10px; font-size: 0.64rem; flex-wrap: wrap; }
  .p-card__tag { top: 10px; left: 10px; padding: 4px 9px; font-size: 0.58rem; }
  .p-card__fav { top: 10px; right: 10px; width: 30px; height: 30px; }
  .p-card__fav svg { width: 14px; height: 14px; }
  .p-card__price { left: 10px; right: 10px; bottom: 10px; }
  .p-card__price .amount { font-size: 1.05rem; }
  .p-card__price .body-sm { font-size: 0.6rem; line-height: 1.3; }

  /* ---- Service pillars ---- */
  .pillar { min-height: 320px; }
  .pillar__body { padding: 24px; }
  .pillar__desc { max-width: none; }
  .pillar__ghost { font-size: 3rem; top: 6px; right: 14px; }
  .pillars--stagger .pillar:nth-child(2),
  .pillars--stagger .pillar:nth-child(3) { margin-top: 0; }

  /* ---- Values: compact 2-up, same density as the team grid below ---- */
  .values-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .value-card__body { padding: 14px 14px 18px; }
  .value-card__num { font-size: 2.2rem; }
  .value-card .h-sm { font-size: 0.9rem; }
  .value-card__body .body-sm { font-size: 0.76rem; }

  /* ---- Team: compact 2-up instead of one full-width card per row ---- */
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 14px;
  }
  .team-card__media { aspect-ratio: 1 / 1.05; margin-bottom: 10px; }
  .team-card .h-sm { font-size: 0.95rem; }
  .team-card__role { font-size: 0.7rem; }
  .team-grid .team-card:nth-child(2n) { margin-top: 0; }

  /* ---- Stats: 2x2 instead of a long single-column stack ---- */
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }

  /* ---- Timeline ---- */
  .timeline__row { padding: 24px 0; gap: 8px; }
  .timeline__year { font-size: clamp(2rem, 10vw, 2.6rem); }

  /* ---- Locations split ---- */
  .loc-panel { min-height: 360px; padding: 26px; }
  .loc-panel__stats { gap: 24px; margin-top: 20px; padding-top: 18px; }

  /* ---- Testimonials ---- */
  .testi-wrap { gap: 14px; }

  /* ---- Property detail: gallery, specs, agent card ---- */
  .breadcrumb-section { padding: 104px 0 24px; }
  .pd-hero-section { margin-bottom: 36px; }
  .pd-hero-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
  }
  .pd-hero-head > div:last-child { text-align: left !important; }
  .spec-cell { padding: 18px 16px; }
  .spec-cell__value { font-size: 1.15rem; }
  .pd-overview-grid { gap: 24px; margin-bottom: 40px; }
  .pd-specs { margin-bottom: 44px; }
  .pd-main-grid { gap: 36px; }
  .agent-card { padding: 22px; }
  .gallery { gap: 10px; }

  /* ---- Office / contact cards ---- */
  .office-card { padding: 24px; }
  .contact-info__row { padding: 18px 0; gap: 14px; }
  .contact-wrap__ghost { top: 0.02em; }

  /* ---- Footer ---- */
  .footer__top { gap: 32px; padding-bottom: 48px; }
  .footer__bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  /* ---- Filter bar ---- */
  .filter-bar {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 0;
    margin-bottom: 36px;
  }
  .chip { padding: 7px 13px; font-size: 0.68rem; }
  .filter-bar__count { font-size: 0.74rem; }

  /* ---- WhatsApp float ---- */
  .wa-float {
    width: 50px;
    height: 50px;
    right: 18px;
    bottom: 18px;
  }

  .cursor, .cursor-ring { display: none !important; }

  /* ---- Mobile nav toggle: animate the bars into an X when the menu
     opens (previously it just sat there as a hamburger with no feedback
     that tapping it again would close the menu). ---- */
  .nav__toggle span { transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
  .nav__toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav__toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav__toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* ---- Mobile full-screen menu ----
     Was a plain justify-content:center stack, which left large dead gaps
     above and below the four links on a full 100vh panel. Anchor it near
     the top instead, add running index numbers + dividers to match the
     site's "01 —" numbering language used elsewhere, and pin the contact
     footer to the bottom so the whole screen reads as one composition. */
  .mobile-menu {
    justify-content: flex-start;
    padding-top: 116px;
    padding-bottom: 32px;
  }

  .mobile-menu::before {
    content: "Menu";
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 22px;
  }

  .mobile-menu__links {
    gap: 0;
    counter-reset: menu-item;
    border-top: 1px solid var(--line-on-dark);
  }

  .mobile-menu__links a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line-on-dark);
    transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
  }

  .mobile-menu__links a::before {
    counter-increment: menu-item;
    content: counter(menu-item, decimal-leading-zero);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--gold);
  }

  .mobile-menu__links a.is-active,
  .mobile-menu__links a:active {
    color: var(--gold-light);
    padding-left: 10px;
  }

  .mobile-menu__foot {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid var(--line-on-dark);
  }

  .mobile-menu__foot span:first-child {
    color: var(--text-on-dark);
    font-weight: 600;
  }
}

@media (max-width: 560px) {
  .loc-panel { min-height: 320px; padding: 22px; }
  .agent-card { padding: 20px; }
  .office-card { padding: 22px; }
  .value-card__body { padding: 16px 16px 20px; }
  .value-card__num { font-size: 1.9rem; }
  .pillar__body { padding: 20px; }

  /* Slightly tighter card grid on very small phones. */
  .p-grid:not(.p-grid--bento), .related-scroll { gap: 12px 8px; }
  .values-grid, .team-grid { gap: 10px; }
  .p-card__specs { gap: 4px 8px; }
}