/* ================================================================
   RESPONSIVE.CSS — Full device compatibility for all breakpoints
   Breakpoints: 1199 | 991 | 767 | 575 | 374
   ================================================================ */

/* ── Extra Large Screens (≥1920px) ────────────────────────────── */
@media (min-width: 1920px) {
  .section-container {
    max-width: 1760px !important;
    padding: 0 80px !important;
  }

  .why-split-container {
    gap: 160px !important;
  }

  .why-card {
    padding: 72px 60px !important;
  }

  .why-title {
    font-size: 32px !important;
  }

  .why-desc {
    font-size: 19px !important;
    line-height: 1.85 !important;
  }

  .why-sticky-col h2 {
    font-size: clamp(48px, 3.2vw, 72px) !important;
  }

  .why-sticky-text {
    font-size: 22px !important;
  }

  .why-icon-wrap {
    width: 88px !important;
    height: 88px !important;
    margin-bottom: 40px !important;
  }

  .why-icon-wrap svg {
    width: 38px !important;
    height: 38px !important;
  }

  .why-cards-col {
    gap: 56px !important;
  }
}

/* ── Large Screens (≥1440px) ───────────────────────────────────── */
@media (min-width: 1440px) {
  .section-container {
    max-width: 1400px !important;
    padding: 0 64px !important;
  }

  .why-split-container {
    gap: 130px !important;
  }

  .why-card {
    padding: 60px 52px !important;
  }

  .why-title {
    font-size: 28px !important;
  }

  .why-desc {
    font-size: 17px !important;
    line-height: 1.82 !important;
  }

  .why-sticky-col h2 {
    font-size: clamp(40px, 3vw, 60px) !important;
  }

  .why-sticky-text {
    font-size: 20px !important;
  }

  .why-icon-wrap {
    width: 80px !important;
    height: 80px !important;
  }

  .why-cards-col {
    gap: 48px !important;
  }
}

/* ── Large Desktop Adjustments (≤1199px) ──────────────────────── */
@media (max-width: 1199px) {
  .section-container { padding: 0 40px; }

  .svc-card-left { padding: 40px 36px; }

  .why-grid { grid-template-columns: repeat(2, 1fr); }

  .connect-layout { gap: 48px; }

  .cities-feature-panel { min-height: 420px; }
}

/* ── Tablet (≤991px) ──────────────────────────────────────────── */
@media (max-width: 991px) {

  /* General */
  .section-container { padding: 0 28px; }
  .section-padding { padding: 70px 0; }

  /* ── Portal container: let GSAP handle height and pinning ── */
  #portal-container {
    overflow: hidden !important;
    isolation: auto !important;
  }

  /* Sections outside portal always render on top */
  #services-section,
  #why-choose-us-section,
  #connect-section {
    position: relative !important;
    z-index: 100 !important;
    background: var(--page-bg) !important;
  }

  /* ── Navigation ── */
  nav { padding: 24px 28px; }

  /* ── Hero ── */
  .hero-content { padding: 0 28px; }

  /* ── Marquee ── */
  .marquee-item { padding: 0 32px; }
  .marquee-text { font-size: 15px; letter-spacing: 0.18em; }

  /* ── Floating Section: absolutely layered for portal transition ── */
  #floating-section {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    z-index: 10 !important;
  }

  /* ── Fog wrap: transparent container — NO white gradient (that caused the white screen) ── */
  #floating-section .fog-wrap {
    display: block !important;
    opacity: 1 !important;    /* Always visible; children clouds control opacity */
    background: transparent !important;  /* Removed white gradient — it was causing solid white screen */
    position: absolute !important;
    inset: -5% !important;
    z-index: 1 !important;
  }

  /* Use only 2 clouds on mobile; hide fog-layers */
  #floating-section .ca-3,
  #floating-section .ca-4,
  #floating-section .fog-layer { display: none !important; }

  /* Clouds: positioned at center - GSAP bursts them outward.
     mix-blend-mode: screen is REQUIRED for white PNG images on dark hero background.
     NO !important on opacity — GSAP must be able to override it via inline styles. */
  #floating-section .ca-1 {
    width: 800px !important;
    height: 650px !important;
    top: 50% !important;
    left: 50% !important;
    opacity: 0;             /* No !important — GSAP sets this to 0.3 via gsap.set() */
    mix-blend-mode: screen !important;
  }

  #floating-section .ca-2 {
    width: 800px !important;
    height: 650px !important;
    top: 50% !important;
    left: 50% !important;
    opacity: 0;             /* No !important — GSAP sets this to 0.3 via gsap.set() */
    mix-blend-mode: screen !important;
  }

  /* ── Float text: absolutely centered, high z-index ── */
  #floating-section .float-text {
    position: absolute !important;
    top: 45% !important; /* Lower slightly to avoid logo */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    opacity: 0;
    width: 90% !important;
    margin: 0 !important;
    z-index: 100 !important; /* Sits above everything */
  }

  .vision-title {
    font-size: clamp(14px, 4vw, 18px) !important;
    letter-spacing: 0.2em !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 16px rgba(0,0,0,0.8) !important;
  }

  .vision-luxury {
    font-size: clamp(48px, 12vw, 64px) !important;
    color: var(--cyan) !important;
    text-shadow: 0 4px 24px rgba(0,0,0,0.6) !important;
  }

  /* ── Float images: absolute overlay — scattered, not a grid ── */
  #floating-section .float-images {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 5 !important;
  }

  /* Each image: absolute positioned, hidden initially for GSAP */
  #floating-section .float-img {
    position: absolute !important;
    height: auto !important;
    opacity: 0;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.15) !important;
  }

  /* Top-Left: fi-small */
  #floating-section .fi-small {
    display: block !important;
    width: 32% !important;
    aspect-ratio: 1/1 !important;
    top: 14% !important;
    left: 8% !important;
    bottom: auto !important;
    right: auto !important;
    z-index: 3 !important;
  }

  /* Top-Right: fi-medium */
  #floating-section .fi-medium {
    display: block !important;
    width: 44% !important;
    aspect-ratio: 4/3 !important;
    top: 18% !important;
    right: 6% !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 4 !important;
  }

  /* Middle-Left (Behind): fi-large */
  #floating-section .fi-large {
    display: block !important;
    width: 38% !important;
    aspect-ratio: 16/10 !important;
    top: 36% !important;
    left: -4% !important;
    bottom: auto !important;
    right: auto !important;
    z-index: 2 !important;
  }

  /* Bottom-Left: fi-4 */
  #floating-section .fi-4 {
    display: block !important;
    width: 38% !important;
    aspect-ratio: 3/4 !important;
    bottom: 12% !important;
    left: 10% !important;
    top: auto !important;
    right: auto !important;
    z-index: 4 !important;
  }

  /* Bottom-Right: fi-5 */
  #floating-section .fi-5 {
    display: block !important;
    width: 46% !important;
    aspect-ratio: 16/9 !important;
    bottom: 16% !important;
    right: 6% !important;
    top: auto !important;
    left: auto !important;
    z-index: 3 !important;
  }

  /* Hide the remaining images — too crowded on mobile */
  #floating-section .fi-6 { display: none !important; }

  /* ── Video Mask: absolutely positioned inside the pinned portal so GSAP
     can slide it up from y:100vh (below viewport) into view cleanly ── */
  #video-mask-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 101.5vh !important;
    background: #ffffff !important;
    overflow: hidden !important;
    z-index: 20 !important;
    will-change: transform;
    /* Note: initial translateY(100vh) is set by gsap.set() in mobile JS block */
  }

  /* ── Mobile reveal curtain ─────────────────────────────────── */
  .mobile-video-curtain {
    display: none !important;
  }

  /* Mobile Video: absolute 100vh height during transition */
  #video-mask-container .showcase-video,
  .showcase-video {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 101.5vh !important;
    overflow: hidden !important;
    opacity: 1 !important;
    z-index: 10 !important;
  }

  #video-mask-container .showcase-video video,
  .showcase-video video {
    display: block !important;
    visibility: visible !important;
    opacity: 0.85 !important;
    pointer-events: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* SVG mask overlay — show on mobile */
  #video-mask-container .video-mask-overlay,
  .video-mask-overlay {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 101.5vh !important;
    pointer-events: none !important;
    z-index: 15 !important;
    opacity: 0;
  }

  #video-mask-container .video-mask-overlay svg,
  .video-mask-overlay svg {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Compact content block overlaid on the video. Top-anchored (NOT vertically
     centered) — the "ZEN REAL ESTATE" mask-text settles at ~26% of the
     container height once shrunk (see .mask-text tween in antigravity.js),
     so padding-top reserves that space to keep it acting like a header
     instead of sitting behind/through this content. */
  .mask-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    padding: 32vh 20px 32px !important;
    margin-top: 0 !important;
    opacity: 0;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 22 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  .features-intro {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #video-mask-container .features-title-main {
    color: var(--white) !important;
    font-size: 20px !important;
    margin-bottom: 16px !important;
    text-align: center !important;
    line-height: 1.3 !important;
  }

  .features-tagline {
    display: block !important;
    color: var(--white-soft) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .features-grid::before {
    width: 180px !important;
    height: 180px !important;
    top: 5% !important;
    left: 0 !important;
  }

  .features-grid::after {
    width: 200px !important;
    height: 200px !important;
    bottom: 5% !important;
    right: 0 !important;
  }

  .feature-card {
    padding: 12px 10px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(232, 238, 233, 0.25) 100%) !important;
    backdrop-filter: blur(25px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 15px 35px rgba(10, 139, 155, 0.08) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .feature-num {
    font-size: 14px !important;
    color: var(--cyan) !important;
    margin-bottom: 2px !important;
  }

  .feature-title {
    font-size: 12px !important;
    color: var(--white) !important;
    margin-bottom: 2px !important;
  }

  .feature-desc {
    font-size: 10px !important;
    line-height: 1.25 !important;
    color: var(--white-soft) !important;
  }

  .features-cta {
    margin-top: 8px !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .features-cta .btn-gold {
    padding: 10px 24px !important;
    font-size: 10px !important;
  }

  /* ── Trending / Signature Developments: flat grid on tablet ── */
  #trending-section {
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    top: auto !important; left: auto !important;
    overflow: visible !important;
    perspective: none !important;
    padding: 70px 28px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
  }

  #trending-section .perspective-grid { display: none !important; }

  #trending-section .trending-content-wrap {
    position: relative !important;
    transform: none;
    margin-bottom: 40px !important;
    pointer-events: auto !important;
  }

  .trending-hero-title {
    opacity: 1;
    transform: none;
  }

  .trending-subtitle {
    opacity: 1;
    transform: none;
  }

  .trending-cta {
    opacity: 1;
    transform: none;
  }

  .tunnel-images {
    position: relative !important;
    inset: auto !important;
    transform-style: flat !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    z-index: auto !important;
    pointer-events: auto !important;
  }

  #trending-section .float-img {
    position: relative !important;
    width: 100% !important;
    height: 200px !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
    transform: none !important;
    opacity: 1;
    aspect-ratio: auto !important;
    pointer-events: auto !important;
  }

  #trending-section .float-img img {
    width: 100%; height: 100%; object-fit: cover;
  }

  /* ── Services Stack ──
     This section is pin:true — the deck can NEVER be taller than the
     viewport minus the heading above it, or its bottom (the photo) is
     permanently cut off with no way to scroll to it. Size the deck from
     the actual viewport (measured heading+peek overhead ≈ 337px here),
     and let the photo panel flex to fill whatever room is left after the
     (now more compact) text panel, instead of demanding a fixed height. */
  .svc-stack-scene { padding: 0 28px 16px; }

  .svc-card-deck { height: clamp(360px, calc(100vh - 360px), 620px); }

  .svc-card { flex-direction: column !important; }

  .svc-card-left {
    flex: none !important;
    width: 100% !important;
    padding: 24px 24px 16px !important;
  }

  .svc-big-title {
    font-size: clamp(24px, 3.6vw, 34px) !important;
    margin-bottom: 10px !important;
  }

  .svc-body-text {
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }

  .svc-num { margin-bottom: 10px !important; }
  .svc-icon { margin-bottom: 10px !important; }

  .svc-card-right {
    flex: 1 !important;
    min-height: 100px !important;
    width: 100% !important;
  }

  /* New Horizontal Services Mobile Style overrides */
  .svc-horizontal-scene {
    flex-direction: column !important;
    height: 100vh !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  .svc-horizontal-left {
    width: 100% !important;
    min-width: 0 !important;
    padding: 40px 24px 20px !important;
    height: auto !important;
    background-color: var(--page-bg) !important;
  }

  .svc-horizontal-heading h2 {
    font-size: 32px !important;
    margin-bottom: 8px !important;
  }

  .svc-horizontal-heading .section-subtitle {
    font-size: 14px !important;
    max-width: 100% !important;
  }

  .svc-horizontal-right {
    flex: 1 !important;
    height: auto !important;
  }

  .svc-horizontal-track {
    padding-left: 24px !important;
    padding-right: 60vw !important; /* Allow the last card to scroll in and clear the page width */
    gap: 20px !important;
  }

  .svc-card-v {
    width: 290px !important;
    height: 440px !important;
    border-radius: 20px !important;
  }

  .svc-card-v-photo-wrap {
    height: 150px !important;
  }

  .svc-card-v-body {
    padding: 32px 20px 20px !important;
  }

  .svc-v-title {
    font-size: 20px !important;
    margin-top: 8px !important;
    margin-bottom: 6px !important;
  }

  .svc-v-desc {
    font-size: 13px !important;
  }

  .svc-card-v .svc-icon {
    position: absolute !important;
    top: 150px !important;
    left: 20px !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    margin-bottom: 0 !important;
    background: #ffffff !important;
    border: 1px solid rgba(14, 34, 36, 0.08) !important;
    z-index: 12 !important;
  }

  .svc-card-v .svc-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* ── Cities Section ── */
  #cities-section,
  #portal-container #cities-section {
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .cities-feature-wrap {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .cities-feature-panel {
    aspect-ratio: 16/9 !important;
    min-height: 320px !important;
  }

  .cities-list-panel { padding: 40px 28px !important; }

  /* ── Why Choose Us ── */
  .why-split-container {
    flex-direction: column !important;
    gap: 40px !important;
  }

  .why-sticky-col {
    position: relative !important;
    top: auto !important;
  }

  .why-cards-col {
    gap: 20px !important;
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* ── Property Types ── */
  .pt-grid {
    gap: 10px !important;
  }

  .pt-card {
    height: 240px !important;
  }

  /* ── Connect Section ── */
  .connect-layout {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* ── Promo Banner (inside footer) ── */
  .footer-promo-wrap {
    margin-bottom: 40px !important;
  }
  .promo-banner {
    flex-direction: column !important;
    min-height: auto !important;
    border-radius: 20px 20px 0 0 !important;
  }
  .promo-content {
    flex: none !important;
    width: 100% !important;
    padding: 56px 48px !important;
  }
  .promo-visual-wrap {
    flex: none !important;
    width: 100% !important;
    height: 300px !important;
    position: relative !important;
  }
  .promo-visual-wrap img {
    position: absolute !important;
    animation: none !important;
  }
}

/* ── Mobile / Small Tablet (≤767px) ──────────────────────────── */
@media (max-width: 767px) {

  /* General */
  .section-container { padding: 0 20px; }
  .section-padding { padding: 56px 0; }

  .section-subtitle,
  .pt-header-desc,
  .trending-subtitle,
  .connect-subtitle,
  .features-tagline {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  .why-desc {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* ── Navigation ── */
  nav { padding: 20px; }

  /* ── Marquee ── */
  .marquee-item { padding: 0 20px; }
  .marquee-text { font-size: 13px; letter-spacing: 0.12em; }

  /* ── Hero ── */
  .hero-content { padding: 0 20px; }
  .hero-line { font-size: clamp(38px, 11vw, 56px) !important; }

  /* ── Floating Section (mobile small) ── */
  #floating-section {
    height: 100vh !important;
    min-height: auto !important;
    padding: 0 !important;
  }

  #floating-section .float-img { height: auto !important; }

  .vision-title { font-size: 15px !important; letter-spacing: 0.2em !important; }
  .vision-luxury { font-size: 52px !important; margin-top: -12px !important; }

  /* ── Video mask-content (mobile small): keep the same 32vh top clearance
     reserved for the settled mask-text header, just tighten the sides ── */
  .mask-content { padding: 32vh 16px 24px !important; }

  /* ── Features grid: 2 columns on mobile ── */
  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .features-intro { padding: 0 !important; }

  .features-title-main {
    font-size: clamp(24px, 6vw, 36px) !important;
  }

  .features-tagline {
    font-size: 15px !important;
    max-width: 100% !important;
  }


  /* ── Services ── */
  .svc-stack-scene { padding: 0 16px 16px; }

  .svc-heading h2 { font-size: clamp(28px, 7vw, 40px) !important; }

  .svc-section-subtitle,
  .svc-heading .section-subtitle { font-size: 15px !important; }

  .svc-card-left { padding: 22px 20px 14px !important; }

  .svc-big-title {
    font-size: clamp(22px, 6vw, 30px) !important;
    margin-bottom: 8px !important;
  }

  .svc-body-text {
    font-size: 12.5px !important;
    margin-bottom: 14px !important;
  }

  .svc-num { margin-bottom: 8px !important; }
  .svc-icon { margin-bottom: 8px !important; }

  /* flex:1 so the photo fills whatever room is left after the text panel,
     rather than demanding a fixed height that can push the card taller
     than the viewport — this section is pin:true, so anything taller
     than the viewport is permanently cut off with no way to scroll to it. */
  .svc-card-right { flex: 1 !important; min-height: 90px !important; height: auto !important; }

  .svc-card-deck { height: clamp(340px, calc(100vh - 440px), 560px); }

  /* ── Trending section ── */
  .tunnel-images {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #trending-section .float-img { height: 180px !important; }

  .trending-hero-title { font-size: clamp(28px, 8vw, 48px) !important; }

  /* ── Why Choose Us ── */
  .why-grid {
    grid-template-columns: 1fr !important;
  }

  .why-sticky-col h2 { font-size: clamp(28px, 7vw, 40px) !important; }

  .why-sticky-decoration { display: none !important; }

  /* ── Cities ── */
  .cities-feature-panel { min-height: 260px !important; }

  .cities-feature-img-wrap { min-height: auto !important; height: 100% !important; }

  /* ── Property Types ── */
  .pt-section-tabs {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  .pt-grid {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .pt-card { height: 220px !important; }

  /* ── Sticky bottom nav ── */
  .sticky-bottom-nav {
    bottom: 16px !important;
    gap: 4px !important;
    padding: 8px 12px !important;
  }

  .sticky-nav-btn {
    padding: 8px 10px !important;
    font-size: 9px !important;
    letter-spacing: 0.05em !important;
  }

  /* ── Promo ── */
  .promo-content { padding: 44px 32px !important; }
  .promo-visual-wrap { height: 240px !important; }
  .promo-cta-row { gap: 20px !important; }

  /* ── Connect ── */
  .connect-info-block { margin-bottom: 32px !important; }

  /* ── Video mask content: keep the 32vh top clearance for the mask-text header ── */
  .mask-content { padding: 32vh 20px 32px !important; }

  /* ── Section headings ── */
  .section-label { font-size: 10px; letter-spacing: 0.15em; }
}

/* ── Small Mobile (≤575px) ───────────────────────────────────── */
@media (max-width: 575px) {

  /* General */
  .section-container { padding: 0 16px; }
  .section-padding { padding: 48px 0; }

  /* ── Features: compact 2-column layout ── */
  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .feature-card {
    padding: 8px 10px !important;
  }

  .feature-num {
    font-size: 14px !important;
    margin-bottom: 2px !important;
  }

  /* ── Trending ── */
  #trending-section { padding: 50px 16px !important; }

  /* ── Services ── */
  .svc-stack-scene { padding: 0 12px 12px; }

  .svc-card-left { padding: 18px 16px 12px !important; }

  /* flex:1, not a fixed height — see the ≤767px rule for why */
  .svc-card-right { flex: 1 !important; min-height: 80px !important; height: auto !important; }

  /* ── Why ── */
  .why-cards-col { gap: 14px !important; }

  /* ── Sticky nav: even smaller ── */
  .sticky-bottom-nav {
    bottom: 10px !important;
    padding: 6px 10px !important;
    gap: 2px !important;
  }

  .sticky-nav-btn {
    padding: 7px 8px !important;
    font-size: 8px !important;
    letter-spacing: 0.03em !important;
  }

  /* ── Marquee ── */
  .marquee-item { padding: 0 14px; }
  .marquee-text { font-size: 11px; letter-spacing: 0.1em; }

  /* ── Section heading ── */
  .svc-heading h2 { font-size: clamp(24px, 8vw, 32px) !important; }

  /* ── Connect form ── */
  .connect-form-wrap { padding: 28px 16px !important; }

  /* ── Cities ── */
  .cities-list-panel { padding: 32px 16px !important; }

  /* ── Property types ── */
  .pt-card { height: 190px !important; padding: 20px !important; }

  /* ── Why cards ── */
  .why-card { padding: 32px 24px !important; }

  /* ── Promo ── */
  .promo-content { padding: 36px 20px !important; }
  .promo-label { font-size: 10px !important; }
  .promo-visual-wrap { height: 200px !important; }
  .btn-promo-ghost { display: none !important; }
}

/* ── Tiny Mobile (≤374px) ───────────────────────────────────── */
@media (max-width: 374px) {
  .section-container { padding: 0 12px; }

  .sticky-nav-btn { padding: 6px 6px !important; font-size: 7px !important; }

  .features-grid { gap: 8px !important; }

  .svc-card-left { padding: 20px 12px !important; }

  .why-card { padding: 24px 16px !important; }
}

/* ── Short Viewports (landscape mobile + short portrait like iPhone SE) ──
   The services stack is pin:true, so the heading block + card-wrapper's
   peek-zone padding above the deck eat directly into the same fixed
   viewport the deck needs — on short screens they have to shrink too, or
   the deck's calc() floor pushes the card taller than the viewport again. */
@media (max-height: 720px) and (max-width: 991px) {
  .svc-heading { padding: 8px 0 8px !important; }
  .svc-heading h2 { margin-bottom: 6px !important; }
  .svc-card-wrapper { padding-top: 44px !important; }
  .svc-card-deck { height: clamp(160px, calc(100vh - 340px), 480px) !important; }
  .svc-card-right { min-height: 50px !important; }
}

@media (max-height: 600px) and (max-width: 991px) {
  .hero-content { padding-bottom: 60px; }

  /* Claw back a bit more overhead so the deck gets more of this very
     short viewport to work with. */
  .svc-heading { padding: 4px 0 !important; }
  .svc-heading h2 { font-size: clamp(20px, 4vw, 26px) !important; margin-bottom: 4px !important; }
  .svc-card-wrapper { padding-top: 20px !important; }
  .svc-card-deck { height: clamp(70px, calc(100vh - 280px), 320px) !important; }

  /* Wide-but-short (landscape phones): row layout uses the abundant width
     instead of the scarce height, so text and photo sit side by side
     rather than stacked — stacking them here can't fit even compressed. */
  .svc-card { flex-direction: row !important; }
  .svc-card-left { flex: 0 0 46% !important; width: 46% !important; padding: 14px 18px !important; overflow-y: auto !important; }
  .svc-card-right { flex: 1 !important; width: auto !important; height: 100% !important; min-height: 0 !important; }
  .svc-big-title { font-size: clamp(16px, 2.6vw, 22px) !important; margin-bottom: 4px !important; }
  .svc-body-text { font-size: 11px !important; margin-bottom: 8px !important; line-height: 1.4 !important; }
  .svc-num, .svc-icon { margin-bottom: 4px !important; }
  .svc-icon { width: 28px !important; height: 28px !important; }
  .svc-explore-btn { padding: 6px 14px 6px 10px !important; font-size: 10px !important; }

  /* Landscape: SVG mask scales off width not height here, so the header
     sits higher relatively — less top clearance needed than portrait. */
  .mask-content { padding-top: 18vh !important; }

  #trending-section .float-img { height: 140px !important; }
}