/* =========================================================================
   Gestiofincas — Mobile / Responsive overrides
   Targets inline styles via attribute selectors so we don't touch JSX files.
   Breakpoints:
     - <= 960px : tablet (handled mostly by .gf-desktop-nav etc.)
     - <= 760px : mobile (stack grids, shrink paddings)
     - <= 480px : small mobile (tighter)
   ========================================================================= */

html, body { overflow-x: hidden; max-width: 100%; }
img { max-width: 100%; }

/* Hide horizontal scrollbars on root */
body { overflow-x: clip; }

/* Property detail media: desktop mosaic and mobile swipe gallery. */
.gf-property-gallery-mobile { display: none; }

.gf-property-map {
  height: 320px;
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: 8px;
  background: #dfe5e0;
}
.gf-property-map iframe,
.gf-property-map > img {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}
.gf-property-map__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 10px;
  color: var(--fg-3);
  font-family: var(--font-body);
  font-size: 11px;
}
.gf-property-map__meta a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--mint-700);
  font-weight: 500;
  text-decoration: none;
}

/* Keep the Communities CTA heading readable on its light mint background. */
.gf-communities-cta h3 {
  color: var(--ink-900) !important;
}

/* Sold homes carousel: one compact row instead of a two-row gallery. */
.gf-sold-carousel__viewport {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gf-sold-carousel__viewport::-webkit-scrollbar { display: none; }
.gf-sold-carousel__track { display: flex; gap: 20px; position: relative; }
.gf-sold-carousel__slide {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
  scroll-snap-align: start;
}
.gf-sold-carousel__button {
  width: 46px;
  height: 46px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 180ms, color 180ms, background 180ms;
}
.gf-sold-carousel__button:hover,
.gf-sold-carousel__button:focus-visible {
  border-color: var(--mint-600);
  color: var(--mint-700);
  background: var(--mint-100);
  outline: none;
}
.gf-sold-card:hover img { transform: scale(1.035); }

@media (max-width: 960px) {
  .gf-sold-carousel__slide { flex-basis: calc((100% - 20px) / 2); }
}

/* =========================================================================
   <= 760px : MOBILE
   ========================================================================= */
@media (max-width: 760px) {

  /* Keep every navigation item reachable on short mobile screens. */
  .gf-mobile-menu {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep the large desktop rhythm compact and consistent on mobile. */
  section[style*="padding: 120px 48px"],
  section[style*="padding: 140px 48px"],
  section[style*="padding: 100px 48px"] {
    padding: 68px 22px !important;
  }

  /* ---------- Communities page ---------- */
  .gf-communities-page {
    padding-top: 64px !important;
  }
  section.gf-communities-hero {
    padding: 64px 22px 24px !important;
  }
  .gf-communities-hero p {
    max-width: 34rem !important;
    font-size: 16px !important;
  }
  section.gf-communities-media-section {
    padding: 36px 22px 0 !important;
  }
  .gf-communities-media {
    aspect-ratio: 4 / 3 !important;
  }
  section.gf-communities-services {
    padding: 56px 22px 64px !important;
  }
  .gf-communities-services__grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 36px !important;
  }
  .gf-communities-service {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  .gf-communities-service__number {
    width: 48px !important;
    height: 62px !important;
    font-size: 20px !important;
  }
  .gf-communities-service h3 {
    margin-top: 3px !important;
    font-size: 24px !important;
  }
  .gf-communities-service p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  section.gf-communities-cta {
    padding: 56px 22px 62px !important;
  }
  .gf-communities-cta__inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }
  .gf-communities-cta button {
    width: 100% !important;
    min-height: 52px !important;
  }

  /* ---------- Contact page ---------- */
  .gf-contact-hero {
    padding: 88px 22px 28px !important;
  }
  .gf-contact-hero p {
    font-size: 16px !important;
  }
  .gf-contact-main {
    padding: 44px 22px 72px !important;
  }
  .gf-contact-layout {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
  }
  .gf-contact-info {
    gap: 24px !important;
  }
  .gf-contact-card {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  .gf-contact-card > div:first-child {
    width: 44px !important;
    height: 56px !important;
  }
  .gf-contact-card__line {
    overflow-wrap: anywhere;
  }
  .gf-contact-form-card {
    padding: 28px 20px !important;
  }
  .gf-contact-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .gf-contact-form > * {
    grid-column: 1 !important;
    min-width: 0 !important;
  }
  .gf-contact-submit,
  .gf-contact-submit button {
    width: 100% !important;
  }
  .gf-contact-map {
    height: 280px !important;
  }

  .gf-sold-carousel { padding: 68px 20px 72px !important; }
  .gf-sold-carousel__header { align-items: flex-start !important; gap: 24px !important; margin-bottom: 28px !important; }
  .gf-sold-carousel__controls { width: 100%; justify-content: flex-end; }

  /* ---------- Sell editorial hero: stack, image on top ---------- */
  .gf-sell-hero-grid { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .gf-sell-hero-media { min-height: 300px !important; height: 46vw !important; max-height: 340px !important; order: -1; }
  .gf-sell-hero-text { padding: 44px 26px 8px !important; }
  .gf-sell-hero h1 { font-size: clamp(34px, 10vw, 48px) !important; }
  .gf-sell-hero .gf-sell-hero-cta { margin-top: 30px !important; }

  /* ---------- 1. Headlines & hero text scale down ---------- */
  /* The clamp() values already scale down nicely; just cap a few outliers. */
  h1 { font-size: clamp(34px, 9vw, 48px) !important; line-height: 1.05 !important; }
  h2 { font-size: clamp(28px, 7vw, 40px) !important; line-height: 1.1 !important; }

  /* Agency intro: stack the text/photo grid and the value bullets to 1 column.
     (Class hooks — the quoted [style*="…'1fr 1fr'…"] selectors below never match
     because the browser serializes inline styles without quotes.) */
  .gf-intro-grid { grid-template-columns: 1fr !important; gap: 36px !important; align-items: stretch !important; }
  .gf-intro-bullets { grid-template-columns: 1fr !important; gap: 18px !important; }
  /* Intro CTAs: stack full-width and keep each label on a single line */
  .gf-intro-cta { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .gf-intro-cta button { white-space: nowrap !important; letter-spacing: 0.06em !important; padding-left: 14px !important; padding-right: 14px !important; }
  /* The photo cell relies on aspect-ratio + the grid track for its size; once the
     grid is a single column with centred items it collapses to 0×0. Give it an
     explicit full width and a pleasant landscape ratio on mobile. */
  .gf-intro-grid > .gf-reveal:last-child {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
  }

  /* ---------- 2. Stack 3-col grids → 1 col ---------- */
  div[style*="grid-template-columns: repeat(3, 1fr)"],
  ul[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* ---------- 3. Stack 4-col grids → 2 cols (areas / team / stats) ---------- */
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
  }

  /* Sell wizard — collapse its inner grids to a single column */
  .gf-wiz-types, .gf-wiz-3, .gf-wiz-2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Sell wizard — give the card more width and keep the nav buttons inside it.
     Without this the long "Continuar"/"Recibir mi valoración" button overflows
     the card's rounded (overflow:hidden) edge and gets clipped. */
  #gf-valorar { padding-left: 16px !important; padding-right: 16px !important; }
  .gf-wiz-nav { padding: 14px 16px 22px !important; gap: 10px !important; }
  .gf-wiz-nav button { padding-left: 14px !important; padding-right: 14px !important; font-size: 11px !important; white-space: nowrap; }
  /* Legal areas grid uses 3-col with 1px gap (faux border lines) → 1 col, restore border between cells */
  section[style*="background: var(--ink-50)"] > div[style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 1px"] {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }

  /* ---------- 4. Stack 2-col fr layouts ---------- */
  div[style*="grid-template-columns: '1.1fr 1fr'"],
  div[style*="grid-template-columns: '1.2fr 1fr'"],
  div[style*="grid-template-columns: '1.3fr 1fr'"],
  div[style*="grid-template-columns: '1.4fr 1fr'"],
  div[style*="grid-template-columns: '1.5fr 1fr'"],
  div[style*="grid-template-columns: '1.6fr 1fr'"],
  div[style*="grid-template-columns: '1.7fr 1fr'"],
  div[style*="grid-template-columns: '1fr 1.1fr'"],
  div[style*="grid-template-columns: '1fr 1.2fr'"],
  div[style*="grid-template-columns: '1fr 1.3fr'"],
  div[style*="grid-template-columns: '1fr 1.5fr'"],
  div[style*="grid-template-columns: '1fr 1fr'"],
  ul[style*="grid-template-columns: '1fr 1fr'"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Property detail two-col with sticky aside — stack so aside drops below */
  div[style*="grid-template-columns: 1.6fr 1fr"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  div[style*="grid-template-columns: 1.7fr 1fr"] { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* ---------- 5. Footer 4-col fr ---------- */
  div[style*="grid-template-columns: '1.6fr 1fr 1fr 1.1fr'"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* ---------- 6. SearchBar: stack fields vertically ---------- */
  form[style*="grid-template-columns: '1.2fr 1.4fr 1.4fr auto'"] {
    grid-template-columns: 1fr !important;
  }
  form[style*="grid-template-columns: '1.2fr 1.4fr 1.4fr auto'"] > div {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border-1) !important;
  }
  form[style*="grid-template-columns: '1.2fr 1.4fr 1.4fr auto'"] > button {
    padding: 16px !important;
    width: 100% !important;
  }

  /* ---------- 7. Property detail gallery + map ---------- */
  .gf-property-detail-gallery-section {
    padding: 24px 22px 0 !important;
  }
  .gf-property-gallery-desktop { display: none !important; }
  .gf-property-gallery-mobile {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: 8px;
  }
  .gf-property-gallery-mobile::-webkit-scrollbar { display: none; }
  .gf-property-gallery-mobile__slide {
    position: relative;
    flex: 0 0 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    scroll-snap-align: start;
    border-radius: 8px;
    background: var(--ink-50);
  }
  .gf-property-gallery-mobile__slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  .gf-property-gallery-mobile__slide > span {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--white);
    color: var(--ink-900);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
  }
  .gf-property-detail-content {
    padding: 48px 22px 80px !important;
  }
  .gf-property-map { height: 280px; }
  .gf-property-map__meta {
    align-items: flex-start;
    padding-top: 12px;
    line-height: 1.45;
  }

  /* ---------- 8. Section padding (horizontal & vertical) ---------- */
  section[style*="padding: '120px 48px'"],
  section[style*="padding: '140px 48px'"],
  section[style*="padding: '96px 48px'"],
  section[style*="padding: '88px 48px"],
  section[style*="padding: '80px 48px"],
  section[style*="padding: '72px 48px"],
  section[style*="padding: '64px 48px"],
  section[style*="padding: '100px 48px"],
  section[style*="padding: '120px 48px 96px"],
  section[style*="padding: '96px 48px 0"],
  section[style*="padding: '64px 48px 96px"],
  section[style*="padding: '120px 48px 120px"],
  section[style*="padding: '120px 48px"],
  section[style*="padding: '80px 48px 120px"],
  section[style*="padding: '120px 48px'"]
  {
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  /* Hero / pageTop sections specifically */
  section[style*="padding: '96px 48px 0'"] { padding-top: 96px !important; padding-bottom: 24px !important; }
  section[style*="padding: '96px 48px 64px'"] { padding-top: 96px !important; padding-bottom: 40px !important; }
  section[style*="padding: '64px 48px 96px'"] { padding-top: 32px !important; padding-bottom: 64px !important; }
  section[style*="padding: '0 48px 120px'"] { padding-left: 22px !important; padding-right: 22px !important; padding-bottom: 64px !important; }
  section[style*="padding: '0 48px 96px'"] { padding-left: 22px !important; padding-right: 22px !important; }
  section[style*="padding: '24px 48px 0'"] { padding-left: 22px !important; padding-right: 22px !important; }
  section[style*="padding: '32px 48px 0'"] { padding-left: 22px !important; padding-right: 22px !important; }

  /* Inner max-width containers — already responsive but force horizontal padding 0 since section already pads */
  div[style*="maxWidth: 1280"], div[style*="maxWidth: 1180"], div[style*="maxWidth: 1100"], div[style*="maxWidth: 1080"], div[style*="maxWidth: 1180"], div[style*="maxWidth: 980"], div[style*="maxWidth: 880"], div[style*="maxWidth: 1440"] {
    max-width: 100% !important;
  }

  /* ---------- 9. Hero V2 — shrink height + bottom bar ---------- */
  section[style*="height: '100vh'"] {
    min-height: 600px !important;
  }
  /* Keep the scroll cue centred at the bottom of the hero. */
  .gf-hero-meta {
    padding-left: 22px !important;
    padding-right: 22px !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    justify-content: center !important;
    align-items: flex-end !important;
  }
  /* Keep the centre scroll cue (DESCUBRIR + line) visible on mobile too */
  .gf-hero-meta .gf-hero-scroll { display: flex !important; }

  /* Hero on mobile: let it FLOW (auto height) instead of vertically centring tall
     content in a fixed-height box. */
  /* The whole hero becomes a flex column so its zones distribute evenly:
     (header gap) → centred text → bottom cue. No fixed-height centring, so
     nothing overlaps and the photo never has a dead empty half. */
  .gf-hero {
    height: auto !important;
    min-height: 94vh !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .gf-hero .gf-hero-inner {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 auto !important;          /* take all the room above the scroll cue */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;  /* centre the text in that space */
    padding: 84px 0 28px !important;     /* top clears the fixed header */
  }
  /* More air between the hero pieces — eyebrow lifts up, the rest breathes */
  .gf-hero .gf-hero-inner > .gf-hero-copy { top: 0 !important; gap: 0 !important; }
  .gf-hero .gf-hero-copy {
    box-sizing: border-box !important;
    width: 100% !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  .gf-hero .gf-hero-copy > div:first-child { margin-bottom: 20px !important; }
  /* Scroll cue drops into normal flow, pinned at the bottom of the photo */
  .gf-hero .gf-hero-meta {
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    padding: 10px 22px 30px !important;
  }
  /* Trim the hero headline a touch so it wraps to fewer lines */
  .gf-hero h1 { font-size: clamp(27px, 7.2vw, 38px) !important; }
  /* Subtitle: slightly smaller and narrower for an easier read */
  .gf-hero .gf-hero-inner p { font-size: 15px !important; }
  /* CTA: full-width, single clean line (no awkward 2-line wrap), tap-friendly */
  .gf-hero .gf-hero-inner button {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 14px !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    margin-top: 28px !important;
  }
  /* Sell hero has TWO CTAs: stack them full-width, even gap, no per-button margin
     (overrides the single-button margin-top above — same specificity, later in source). */
  .gf-hero .gf-sell-hero-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 22px !important;
  }
  .gf-hero .gf-sell-hero-cta button { margin-top: 0 !important; }

  /* ---------- 10. Header logo + padding ---------- */
  header > div[style*="padding: '18px 48px'"] {
    padding: 12px 18px !important;
    gap: 12px !important;
  }
  header img[alt="gestiofincas"] { height: 30px !important; }

  /* Hide language switcher in compact header (keep in mobile menu) */
  header .gf-desktop-nav { display: none !important; }
  /* mobile menu trigger is already shown via existing rule */

  /* ---------- 11. Page top spacers ---------- */
  div[style*="paddingTop: 80"] { padding-top: 64px !important; }

  /* ---------- 12. Forms: stack 1-col grid ---------- */
  form[style*="grid-template-columns: '1fr 1fr'"] {
    grid-template-columns: 1fr !important;
  }
  /* Form cards padding */
  div[style*="padding: '56px 64px'"] { padding: 32px 22px !important; }
  div[style*="padding: '40px 44px'"] { padding: 28px 20px !important; }
  div[style*="padding: '40px 36px'"] { padding: 28px 22px !important; }

  /* ---------- 13. Listing card text — keep readable on full-width ---------- */
  article[style*="border-radius: 60px 60px 8px 8px"],
  article[style*="borderRadius: 60px 60px"] {
    border-radius: 8px !important; /* arched featured -> regular on mobile */
  }

  /* ---------- 14. Sticky aside (agent card) drops to inline ---------- */
  aside[style*="position: 'sticky'"], aside[style*="position:sticky"] {
    position: relative !important;
    top: auto !important;
  }

  /* ---------- 15. Mobile menu padding ---------- */
  div[style*="padding: '24px 28px'"] { padding: 20px 22px !important; }

  /* ---------- 16. Filter bar (sticky) ---------- */
  section[style*="position: 'sticky'"] > div[style*="padding: '14px 48px'"] {
    padding: 12px 18px !important;
    gap: 12px !important;
  }

  /* ---------- 17. Timeline (140px col + 1fr) ---------- */
  div[style*="grid-template-columns: '140px 1fr'"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  div[style*="grid-template-columns: '64px 1fr'"] {
    gap: 14px !important;
  }
  div[style*="grid-template-columns: '48px 1fr'"] {
    gap: 14px !important;
  }

  /* ---------- 18. Intro section bullets list 2-col -> 1 ---------- */
  ul[style*="grid-template-columns: '1fr 1fr'"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* ---------- 19. CtaBand inner 1.3fr 1fr ---------- */
  /* Already caught by 2-col-fr rule */

  /* ---------- 20. About page sticky header in body section ---------- */
  h2[style*="position: 'sticky'"] {
    position: relative !important;
    top: auto !important;
  }

  /* ---------- 21. Newsletter form: stack ---------- */
  div[style*="display: 'grid'"][style*="grid-template-columns: '1fr 1fr'"][style*="gap: 64"],
  div[style*="grid-template-columns: '1fr 1fr'"][style*="paddingBottom: 64"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* ---------- 22. Footer logo size ---------- */
  footer img[alt="gestiofincas"] { height: 44px !important; margin-bottom: 16px !important; }

  /* ---------- 23. Stats numbers shrink ---------- */
  div[style*="fontSize: 'clamp(40px, 4vw, 56px)'"] { font-size: clamp(28px, 8vw, 40px) !important; }

  /* ---------- 24. Hero intro photo arch radius (right column) ---------- */
  div[style*="aspect-ratio: 4 / 5"], div[style*="aspectRatio: '4 / 5'"] {
    max-width: 320px !important;
    margin-inline: auto !important;
  }
  /* But on hero specifically, let it fill */
  section[style*="height: '100vh'"] div[style*="aspectRatio: '4 / 5'"] {
    max-width: none !important;
  }

  /* ---------- 25. Properties detail title row + ref ---------- */
  div[style*="display: 'flex'"][style*="alignItems: 'baseline'"][style*="gap: 16"] {
    flex-wrap: wrap !important;
  }

  /* ---------- 26. Stats row borders ---------- */
  div[style*="display: 'grid'"][style*="grid-template-columns: repeat(4, 1fr)"][style*="border-top"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
  }

  /* Runtime serializes React inline styles without quotes; keep footer robust. */
  footer div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .gf-newsletter-form,
  .gf-newsletter-controls {
    width: 100%;
  }

  .gf-newsletter-controls {
    grid-template-columns: 1fr;
  }

  .gf-newsletter-controls button {
    width: 100%;
  }

  footer div[style*="grid-template-columns: 1.6fr 1fr 1fr 1.1fr"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  header > div[style*="padding: 18px 48px"] {
    padding: 12px 22px !important;
    gap: 12px !important;
    justify-content: space-between !important;
  }

  header a[aria-label="gestiofincas"] {
    max-width: calc(100% - 58px) !important;
  }

  header img[alt="gestiofincas"] {
    height: 28px !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  header .gf-mobile-toggle {
    display: inline-flex !important;
    flex: none !important;
    width: 42px !important;
    height: 42px !important;
    justify-content: center !important;
  }

  form[style*="grid-template-columns: 1.2fr 1.4fr 1.4fr auto"] {
    grid-template-columns: 1fr !important;
  }

  form[style*="grid-template-columns: 1.2fr 1.4fr 1.4fr auto"] > div {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border-1) !important;
  }

  form[style*="grid-template-columns: 1.2fr 1.4fr 1.4fr auto"] > button {
    width: 100% !important;
    min-height: 52px !important;
    padding: 16px !important;
  }

  /* ---------- 27. CTA band: a single, readable mobile column ---------- */
  .gf-cta-band {
    padding: 76px 22px 82px !important;
  }

  .gf-cta-band__grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    align-items: start !important;
  }

  .gf-cta-band__heading,
  .gf-cta-band__content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .gf-cta-band__heading h2 {
    max-width: 330px !important;
    font-size: clamp(40px, 12vw, 54px) !important;
    line-height: 1 !important;
  }

  .gf-cta-band__content > p {
    max-width: 34rem !important;
    margin-bottom: 28px !important;
    font-size: 16px !important;
    line-height: 1.68 !important;
    opacity: .8 !important;
  }

  .gf-cta-band__actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .gf-cta-band__actions button {
    width: 100% !important;
    min-height: 54px !important;
    justify-content: center !important;
    padding: 16px 18px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .gf-cta-band__shape {
    top: -72px !important;
    right: -138px !important;
    width: 310px !important;
    height: 390px !important;
    opacity: .12 !important;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  .gf-mobile-menu {
    padding-top: 16px !important;
    padding-bottom: 18px !important;
  }
  .gf-mobile-menu__header {
    margin-bottom: 14px !important;
  }
  .gf-mobile-menu__nav a {
    padding: 6px 0 !important;
    font-size: 30px !important;
  }
  .gf-mobile-menu__footer {
    padding-top: 18px !important;
  }
}

@media (max-width: 640px) {
  .gf-sold-carousel__slide { flex-basis: 100%; }
}

/* =========================================================================
   <= 480px : SMALL MOBILE — extra tightening
   ========================================================================= */
@media (max-width: 480px) {
  h1 { font-size: clamp(28px, 10vw, 40px) !important; }
  h2 { font-size: clamp(24px, 8vw, 32px) !important; }

  .gf-property-map__meta {
    flex-direction: column;
    gap: 8px;
  }

  /* Hero text in serif clamp(48px, 7vw, 104px) — overrides above */
  section[style*="height: '100vh'"] h1 { font-size: 38px !important; }

  /* 4-col → 2 → 1 for stats */
  div[style*="display: 'grid'"][style*="grid-template-columns: repeat(4, 1fr)"][style*="border-top"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Small mobile section padding */
  section[style*="padding: '120px 48px"],
  section[style*="padding: '140px 48px"],
  section[style*="padding: '96px 48px"],
  section[style*="padding: 120px 48px"],
  section[style*="padding: 140px 48px"],
  section[style*="padding: 100px 48px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}