/* ============================================================
   LEADING HOME — Responsive layer
   Desktop ≥1024 (default inline styles) · Tablet 768–1023 · Mobile ≤767
   Only overrides for smaller screens live here — media queries
   can't be inline, so this is the one shared stylesheet.
   ============================================================ */

/* Mobile drawer chrome is hidden by default (desktop) */
.lh-nav-toggle{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.lh-burger,.lh-scrim,.lh-drawer,.lh-mobicta{display:none}

/* Shared accessibility layer */
.lh-skip-link{position:fixed;left:16px;top:12px;z-index:1000;padding:11px 16px;border-radius:8px;
  background:#141A1C;color:#fff !important;font:600 14px 'Instrument Sans',system-ui,sans-serif;
  text-decoration:none;transform:translateY(-160%);transition:transform .18s ease}
.lh-skip-link:focus{transform:none}
:where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:3px solid #5FB8B4 !important;outline-offset:3px}
:where(button,a,input,textarea,select){-webkit-tap-highlight-color:rgba(15,122,120,.16)}

/* Keep motion optional for visitors who request a calmer interface. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------------- LARGE SCREENS : ≥1440 ---------------- */
/* Content is capped at 1240 by inline styles; on wide monitors that
   leaves the full-bleed hero & colour bands framing a narrow column.
   Widen the shared wrap so content keeps pace with the bleed. */
@media (min-width:1440px){
  [data-wrap]{max-width:1520px !important;padding-left:48px !important;padding-right:48px !important}
  /* Testimonial is a deliberately narrow measure — keep it readable */
  #stories [data-wrap]{max-width:940px !important;padding-left:32px !important;padding-right:32px !important}
}
@media (min-width:1800px){
  [data-wrap]{max-width:1680px !important}
}

/* ---------------- LISTING TOP BAR : mid widths ---------------- */
/* The listing gnav centres its nav links absolutely (left:50%), so they
   ignore the right-side cluster. Below ~1300 the offer chip + price/address
   grow wide enough to slide under the centred links. Those two are only a
   scroll indicator (the hero already shows price), so drop them here to give
   the nav clearance. Tighten the nav gap too. */
@media (max-width:1300px){
  [data-gnav] [data-gnav-meta]{display:none !important}
}
@media (min-width:768px) and (max-width:1120px){
  [data-gnav] .lh-desktop-nav{gap:18px !important}
  [data-gnav] .lh-desktop-nav a{font-size:12.5px !important}
}

/* ---------------- TABLET : 768–1023 ---------------- */
@media (min-width:768px) and (max-width:1023px){
  [data-wrap]{padding-left:26px !important;padding-right:26px !important}
  [data-mcol="4"],[data-mcol="3"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  [data-selling-advantages]{grid-template-columns:1fr !important;gap:18px !important}
}

/* Keep the three seller advantages aligned as a deliberate system rather
   than three independently wrapping fragments. */
[data-selling-advantages] > div{min-width:0}
[data-selling-advantages] > div > div:first-child{
  min-height:38px;display:flex;align-items:flex-end;line-height:1.35}
[data-selling-advantages] > div > div:last-child{line-height:1.55}

/* Footer contact CTA: keep the WeChat/tour panel on the right, aligned
   with the headline on the left, all the way down to the mobile stack
   breakpoint below — never let it wrap onto its own awkward line. */
@media (min-width:768px) and (max-width:1239px){
  [data-footercta]{flex-wrap:nowrap !important}
}

/* ---------------- MOBILE : ≤767 ---------------- */
@media (max-width:767px){

  /* Safe side gutters on every content container */
  [data-wrap]{padding-left:18px !important;padding-right:18px !important}

  /* Multi-column grids collapse to one column … */
  [data-mcol]:not([data-mcol="tbl"]):not([data-mcol="4"]){grid-template-columns:minmax(0,1fr) !important}
  /* … 4-up grids (stats, small cards) become a neat 2-up instead of a tall stack */
  [data-mcol="4"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px !important}
  [data-results-stats]{gap:10px !important}
  [data-results-stats] > div{min-width:0;padding-left:2px !important;padding-right:2px !important}
  [data-results-stats] > div > div:first-child{font-size:40px !important;white-space:nowrap}
  /* … but a [data-swipe] grid becomes one swipeable horizontal rail (one card at a time) */
  [data-swipe]{display:flex !important;grid-template-columns:none !important;
    overflow-x:auto;gap:14px !important;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scroll-padding:0 18px;
    margin:0 -18px !important;padding:2px 18px 14px !important}
  [data-swipe] > *{flex:0 0 82% !important;scroll-snap-align:center}
  [data-swipe]::-webkit-scrollbar{height:6px}
  [data-swipe]::-webkit-scrollbar-thumb{background:#c3cccd;border-radius:4px}
  /* gallery mosaic → uniform swipeable tiles (drop the grid-row/col spans) */
  [data-swipe="gallery"]{grid-auto-rows:auto !important}
  [data-swipe="gallery"] > *{grid-column:auto !important;grid-row:auto !important;height:250px}

  /* Lightbox: let the opened photo fill the screen; float nav arrows over it */
  .lh-lbimg{max-width:96vw !important;max-height:70vh !important}
  .lh-lbnav{position:absolute !important;z-index:3;top:50%;transform:translateY(-50%);
    width:40px !important;height:40px !important;background:rgba(20,26,28,.55) !important}
  .lh-lbrow > .lh-lbnav:first-child{left:6px}
  .lh-lbrow > .lh-lbnav:last-child{right:6px}
  /* … except the sales table, which stays tabular but tightens */
  [data-mcol="tbl"]{grid-template-columns:1.7fr .7fr 1fr !important;gap:6px !important;
    padding-left:14px !important;padding-right:14px !important}
  [data-mcol="tbl"] > *{font-size:12px !important}

  /* Masonry review columns → single stream */
  [data-cols2]{column-count:1 !important}

  /* Fluid type scale — shrinks display headings, never the body */
  h1{font-size:clamp(30px,8.5vw,40px) !important;line-height:1.08 !important}
  h2{font-size:clamp(25px,6.6vw,32px) !important;line-height:1.14 !important}
  h3{font-size:20px !important}

  /* 16px inputs prevent iOS auto-zoom on focus */
  input,textarea,select{font-size:16px !important}

  /* Primary CTA rows go full-width & stack for easy tapping */
  [data-btnrow]{flex-direction:column !important;align-items:stretch !important}
  [data-btnrow] > a,[data-btnrow] > button{width:100% !important;justify-content:center !important;box-sizing:border-box}

  /* Compact market summaries: preserve two scannable stats, then a full-width action. */
  [data-market-card]{gap:22px !important;padding-top:24px !important;padding-bottom:24px !important}
  [data-market-actions]{align-items:stretch !important;flex-direction:column !important;gap:20px !important}
  [data-market-actions] > a,[data-market-card] > a{display:flex !important;justify-content:center !important;text-align:center !important;width:100% !important;box-sizing:border-box}
  [data-market-stats]{gap:20px !important}

  /* Contact panel: put the conversion action first on phones, then offer
     WeChat as a secondary channel. Desktop keeps the side-by-side layout. */
  [data-wechatcta]{flex-direction:column !important;align-items:center !important;width:100% !important;box-sizing:border-box;margin-left:auto !important;margin-right:auto !important}
  [data-wechatcta] > div{width:100% !important;justify-content:center !important}
  [data-contact-actions]{order:1;align-self:stretch !important}
  [data-contact-wechat]{order:2;margin-top:4px}
  [data-contact-divider]{display:none !important}
  [data-contact-actions] > a,[data-contact-actions] > button{width:100% !important;justify-content:center !important;box-sizing:border-box}
  [data-selling-advantages]{grid-template-columns:1fr !important;gap:18px !important}
  [data-selling-advantages] > div > div:first-child{min-height:0}
  [data-story-actions]{gap:16px !important}

  /* ---- Hamburger + slide-in drawer ---- */
  .lh-desktop-nav,.lh-desktop-cta{display:none !important}

  .lh-burger{order:2;display:flex !important;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;margin:-6px -8px -6px 0;cursor:pointer;background:none;border:none}
  .lh-burger span{display:block;width:23px;height:2px;border-radius:2px;background:#141A1C;transition:transform .25s,opacity .2s}
  .lh-nav-toggle:checked ~ .lh-nav .lh-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .lh-nav-toggle:checked ~ .lh-nav .lh-burger span:nth-child(2){opacity:0}
  .lh-nav-toggle:checked ~ .lh-nav .lh-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .lh-scrim{display:block !important;position:fixed;inset:0;z-index:55;
    background:rgba(15,20,22,.45);opacity:0;visibility:hidden;transition:opacity .28s}
  .lh-nav-toggle:checked ~ .lh-scrim{opacity:1;visibility:visible}

  .lh-drawer{display:flex !important;flex-direction:column;gap:2px;position:fixed;top:0;right:0;z-index:60;
    height:100%;width:80%;max-width:320px;padding:74px 24px 28px;background:#fff;
    box-shadow:-18px 0 46px -22px rgba(20,26,28,.55);
    transform:translateX(105%);transition:transform .3s ease;overflow-y:auto}
  .lh-nav-toggle:checked ~ .lh-drawer{transform:none}
  .lh-drawer-close{position:absolute;top:20px;right:18px;width:44px;height:44px;display:flex;
    align-items:center;justify-content:center;font:400 24px 'Instrument Sans';color:#48555A;cursor:pointer}
  .lh-drawer-link{font:600 18px 'Instrument Sans';text-decoration:none;
    padding:15px 6px;border-bottom:1px solid rgba(20,26,28,.08);min-height:44px;display:flex;align-items:center}
  .lh-drawer-call{margin-top:20px;text-decoration:none;background:#0F7A78;color:#fff;
    font:600 16px 'Instrument Sans';padding:15px;border-radius:10px;text-align:center;
    min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px}

  /* ---- Listing hero: shorter, image on top, text never crushed ---- */
  [data-hero]{min-height:0 !important}
  [data-hero] > div:first-child{padding:34px 20px 40px !important;max-width:100% !important}
  [data-hero-media]{order:-1;min-height:0 !important;height:220px !important}

  /* ---- Sticky rail (offer countdown + mortgage calc) flows inline on mobile ---- */
  [data-rail]{position:static !important;top:auto !important}

  /* ---- About: stacked team cards get proper text gutter; stat band drops divider lines ---- */
  [data-team-body]{padding:6px 24px 26px !important;justify-content:flex-start !important}
  [data-statband] > div{border-left:none !important}

  /* ---- Full-bleed marketing hero flows naturally on phones (no overlap) ---- */
  [data-fullhero]{min-height:0 !important;height:auto !important}
  [data-fullhero] > [data-wrap]{height:auto !important;justify-content:flex-start !important;padding-top:56px !important;padding-bottom:28px !important}
  [data-fullhero] > div:last-child{position:static !important}

  /* ---- Bigger touch target on calculator sliders ---- */
  input[type="range"]{height:30px}

  /* ---- Anchor jumps clear both sticky bars ---- */
  html{scroll-padding-top:120px !important}

  /* ---- Always-visible primary CTA docked to the bottom ---- */
  #top{padding-bottom:74px}
  .lh-mobicta{display:flex !important;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
    border-top:1px solid rgba(20,26,28,.1);box-shadow:0 -8px 24px -18px rgba(20,26,28,.5)}
}

/* Belt-and-suspenders: never show drawer chrome on wide screens */
@media (min-width:768px){
  .lh-burger,.lh-scrim,.lh-drawer,.lh-mobicta{display:none !important}
}

/* ---------------- SHORT / LANDSCAPE SCREENS : height ≤ 500px ---------------- */
/* Keeps the photo lightbox comfortable when a phone is turned sideways,
   regardless of which width breakpoint it falls into. */
@media (max-height:500px){
  /* Photo fills the short screen; leave room for caption + thumb strip */
  .lh-lbimg{max-width:80vw !important;max-height:64vh !important}
  /* Float the nav arrows over the photo so they never steal width */
  .lh-lbnav{position:absolute !important;z-index:3;top:50%;transform:translateY(-50%);
    width:38px !important;height:38px !important;background:rgba(20,26,28,.55) !important}
  .lh-lbrow > .lh-lbnav:first-child{left:8px}
  .lh-lbrow > .lh-lbnav:last-child{right:8px}
  /* Tighten the space the caption and thumbnail rail take vertically */
  .lh-lbrow{margin-top:0 !important}
  .lh-lbrow ~ div{margin-top:8px !important}
  /* Shrink the thumbnail strip */
  .lh-lbstrip button{height:44px !important;width:64px !important}
}
@media (max-height:430px){
  /* Barely any vertical room — drop the thumbnail rail, give the photo the space */
  .lh-lbstrip{display:none !important}
  .lh-lbimg{max-height:76vh !important}
}
/* Stable CTA styling for the dynamic sold-list navigation. */
.lh-sold-cta {
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  background: #141A1C;
  color: #fff !important;
  font: 600 14px 'Instrument Sans', system-ui, sans-serif;
  padding: 15px 28px;
  border-radius: 10px;
  transition: background .2s ease, transform .2s ease;
}

.lh-sold-cta:hover {
  background: #2a3438;
  transform: translateY(-1px);
}

.lh-sold-cta:focus-visible {
  outline: 3px solid rgba(15, 122, 120, .35);
  outline-offset: 3px;
}