/* Responsive overrides for fixed-width inline-styled pages */
html{overflow-x:hidden}
img{max-width:100%}
@media (max-width:767px){
  div[style*="gap: 64px"]{flex-wrap:wrap;gap:28px !important;justify-content:center !important}
  div[style*="gap: 64px"] img{width:130px !important;height:auto !important}
}
@media (max-width:1439px){
  div[style*="width: 1440px"]{width:100% !important}
}
@media (max-width:1023px){
  div[style*="grid-template-columns: repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  div[style*="grid-template-columns: repeat(3"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  div[style*="grid-template-columns: 1.5fr"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:1100px){
  .vhHeader, div[style*="height: 84px"][style*="#132338"]{padding-left:28px !important;padding-right:28px !important}
  div[style*="gap: 34px"]{gap:20px !important}
  div[style*="gap: 34px"] > div{white-space:nowrap}
  div[style*="height: 84px"] .btn{white-space:nowrap;padding:0 18px !important}
}
@media (max-width:899px){
  div[style*="gap: 34px"]{display:none !important}
}
@media (max-width:767px){
  div[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important}
  div[style*="56px"]{padding-left:20px !important;padding-right:20px !important}
  h1{font-size:clamp(30px,9vw,54px) !important}
  h2{font-size:clamp(23px,6.5vw,34px) !important}
  div[style*="font-size: 64px"]{font-size:44px !important}
  div[style*="display: flex"][style*="justify-content: space-between"]{flex-wrap:wrap;row-gap:16px}
  div[style*="display: flex"][style*="gap: 16px"]{flex-wrap:wrap}
  img[style*="min-height: 480px"]{min-height:260px !important}
  .btn{padding:0 22px !important}
}

/* filter pill rows: wrap as whole pills, never inside */
div[style*="border-radius: 22px"], a[style*="border-radius: 22px"]{white-space:nowrap}
div[style*="gap: 12px; padding-top: 44px"]{flex-wrap:wrap}

/* header above hero */
.vhHeader, div[style*="height: 84px"][style*="#132338"]{position:relative;z-index:1000}

@media (max-width:899px){
  div[style*="grid-template-columns: 380px"]{grid-template-columns:minmax(0,1fr) !important;gap:24px !important}
  div[style*="grid-template-columns: 380px"]>div:first-child{padding-right:0 !important;border-right:none !important}
}

@media (max-width:899px){
  div[style*="grid-template-columns: minmax(320px, 40%)"]{grid-template-columns:minmax(0,1fr) !important}
  div[style*="grid-template-columns: minmax(0, 1fr) 420px"]{grid-template-columns:minmax(0,1fr) !important}
  div[style*="grid-template-columns: minmax(0, 1fr) 420px"] img{height:320px !important}
  div[style*="grid-template-columns: repeat(6"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}

/* ============================================================
   Mobile overflow fixes — added 26 Sep 2026
   Each rule targets a specific non-wrapping row found by
   measuring scrollWidth at a 390px viewport.
   ============================================================ */

/* Belt and braces: nothing should ever scroll the page sideways */
html, body { max-width: 100%; overflow-x: clip; }

@media (max-width: 767px) {
  /* Enquiry-band CTA pairs: "Talk to our sales team" + phone number */
  div[style*="gap: 16px"][style*="flex-shrink: 0"] {
    flex-wrap: wrap !important;
    flex-shrink: 1 !important;
    width: 100%;
  }
  div[style*="gap: 16px"][style*="flex-shrink: 0"] > .btn { flex: 1 1 auto; }

  /* Enquiry band itself: stack heading above buttons */
  div[style*="justify-content: space-between"][style*="gap: 48px"] { flex-wrap: wrap; }

  /* Hero stat rows (Developments / Prices from / Locations) */
  div[style*="gap: 72px"] { flex-wrap: wrap; gap: 24px 36px !important; }
  div[style*="gap: 72px"] > div { min-width: 0; }
  .statnum { overflow-wrap: anywhere; }

  /* Oversized display figures */
  div[style*="font-size: 84px"] { font-size: clamp(40px, 13vw, 60px) !important; }
  div[style*="font-size: 72px"] { font-size: clamp(36px, 12vw, 54px) !important; }
  div[style*="font-size: 48px"] { font-size: clamp(30px, 10vw, 44px) !important; }

  /* Newsletter signup: input above button */
  form[name="newsletter"] { width: 100%; }
  form[name="newsletter"] input[type="email"] {
    width: 100% !important;
    border-right: 1px solid #D8D8D5 !important;
  }
  form[name="newsletter"] button { width: 100%; margin-top: 10px; }

  /* Enquiry form: single column, and never wider than its container */
  form[name="enquiry"] div[style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  form[name="enquiry"] { padding: 26px 20px 30px !important; }

  /* Filter and spec pill rows */
  div[style*="height: 40px"][style*="border: 1px solid rgba(255,255,255,0.35)"] { flex: 0 0 auto; }
  div[style*="gap: 10px"][style*="display: flex"] { flex-wrap: wrap; }

  /* Any remaining fixed-width child */
  div[style*="width: 340px"] { width: 100% !important; max-width: 100% !important; }
}

/* Tables and wide media get their own scroller rather than moving the page */
table { max-width: 100%; }

/* Headings that should hold a single line on desktop and wrap only when the
   viewport can no longer carry them. */
.h2-oneline{white-space:nowrap}
@media (max-width:1080px){.h2-oneline{white-space:normal}}

/* Cards must never be wider than their grid track on narrow screens. */
@media (max-width:820px){
  div[style*="grid-template-columns"] > *{min-width:0}
  div[style*="grid-template-columns"] div[style*="display: flex"]{flex-wrap:wrap}
  /* Grids declared with rows only have an implicit column that sizes to content. */
  div[style*="grid-template-rows"]{grid-template-columns:minmax(0,1fr) !important}
  div[style*="display: grid"] img{max-width:100%}
}

/* ============================================================
   Whole-card click targets — added 7 Oct 2026
   The cards carried their link on the title text alone, so the
   image, the price and the arrow all did nothing when clicked.
   The title stays the real link (keyboard and screen readers
   still get one link with a sensible name); this stretches its
   hit area over the card. Any other link inside a card is
   lifted above the overlay so it still works.
   ============================================================ */
.cardlink{position:relative}
/* The cover is the card's own first child, so inset:0 always resolves against
   the card itself rather than whichever inner div happens to be positioned.
   The visible title keeps the real, focusable, crawlable link. */
.cardlink > a.cardcover{position:absolute;inset:0;z-index:1;display:block;font-size:0;line-height:0;color:transparent}
.cardlink a:not(.cardcover),
.cardlink button,
.cardlink select,
.cardlink input{position:relative;z-index:2}
.cardlink{transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease}
.cardlink:hover{border-color:#132338 !important;box-shadow:0 6px 22px rgba(15,19,31,.10)}
.cardlink:hover img{filter:brightness(1.03)}
.cardlink:focus-within{outline:3px solid #132338;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .cardlink{transition:none}
  .cardlink:hover{box-shadow:none}
  .cardlink:hover img{filter:none}
}

/* ============================================================
   Zero Bills block, Lacuna Gardens development page - 8 Oct 2026
   ============================================================ */
/* Zero Bills block — Lacuna Gardens */
@media (max-width: 1023px){
  .zbTop{grid-template-columns:minmax(0,1fr) !important;gap:44px !important;padding:60px 40px 36px !important}
  .zbFig{padding:8px 40px 60px !important}
}
@media (max-width: 767px){
  .zbTop{padding:48px 20px 30px !important;gap:36px !important}
  .zbFig{padding:4px 0 48px !important}
  .zbFig > div:first-child{padding-left:20px;padding-right:20px}
  /* The annotation labels are baked into the image, so never let it shrink
     below the width where they stop being readable. Scroll it instead. */
  .zbScroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 20px}
  .zbScroll img{min-width:760px}
  .zbSwipe{display:inline !important}
}

@media (max-width: 767px){
  /* caption and swipe hint stack rather than colliding */
  .zbFig > div:first-child{flex-direction:column;align-items:flex-start;gap:8px}
  .zbFig figcaption{line-height:1.5}
}

/* ============================================================
   Enquiry form controls - 8 Oct 2026
   Lifted out of lets-talk.html so the same form can be placed
   inline on the development pages.
   ============================================================ */
.flabel { font-size: 13.5px; color: #3B4750; }
.finput { height: 50px; border: 1px solid #D8D8D5; background: #FFFFFF; width: 100%; box-sizing: border-box; padding: 0 14px; font-family: inherit; font-size: 15px; color: #0F131F; border-radius: 0; -webkit-appearance: none; appearance: none; }
.ftextarea { min-height: 130px; border: 1px solid #D8D8D5; background: #FFFFFF; width: 100%; box-sizing: border-box; padding: 12px 14px; font-family: inherit; font-size: 15px; line-height: 1.6; color: #0F131F; border-radius: 0; resize: vertical; -webkit-appearance: none; appearance: none; }
.fselect { height: 50px; padding: 0 38px 0 14px; border: 1px solid #D8D8D5; background-color: #FFFFFF; font-family: inherit; font-size: 15px; color: #0F131F; width: 100%; box-sizing: border-box; border-radius: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1 L5 5 L9 1' stroke='%2369747A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.finput:focus-visible, .ftextarea:focus-visible, .fselect:focus-visible { outline: 2px solid #2E7D4F; outline-offset: 1px; border-color: #2E7D4F; }
/* :user-invalid only styles a field the visitor has actually interacted with.
   The old :invalid rule painted every empty required field red on load, so the
   form looked like it was already in error before anyone typed. */
.finput:user-invalid, .ftextarea:user-invalid, .fselect:user-invalid { border-color: #A8321F; }

/* Inline enquiry band on development pages */
.enqBand{scroll-margin-top:96px}
@media (max-width:1023px){ .enqGrid{grid-template-columns:minmax(0,1fr) !important;gap:32px !important} }
@media (max-width:767px){
  .enqBand{padding:48px 20px 56px !important}
  .enqForm{padding:26px 20px 30px !important}
  .enqForm div[style*="grid-template-columns: repeat(2"]{grid-template-columns:minmax(0,1fr) !important}
}

/* Status badges sit on the thumbnail. The card-link rule above lifts every
   link to z-index 2, and on plot cards the image is inside a link, so without
   this the image paints over the badge and hides it. pointer-events:none keeps
   the whole card clickable through the badge. */
.cardlink .statusbadge{z-index:3;pointer-events:none}

/* Built Different shorts rail: only ever whole thumbnails, never a partial.
   Card width is an exact fraction of the visible track, so the rail always
   shows N complete tiles and the final scroll position lands flush. */
.shorts-rail{--sr-cols:5;--sr-gap:22px;margin-left:56px !important;margin-right:56px !important;padding-left:0 !important;padding-right:0 !important}
.shorts-rail .short-frame{flex:0 0 calc((100% - (var(--sr-cols) - 1) * var(--sr-gap)) / var(--sr-cols)) !important;width:auto !important;scroll-snap-align:start}
@media (max-width:1279px){ .shorts-rail{--sr-cols:4} }
@media (max-width:1023px){ .shorts-rail{--sr-cols:3} }
@media (max-width:767px){ .shorts-rail{--sr-cols:2;--sr-gap:14px;margin-left:20px !important;margin-right:20px !important} }

/* Zero Bills tag on property cards. Sits top-right so it never collides with
   the sold/reserved/available badge at top-left. z-index beats the image link. */
.cardlink{position:relative}
.cardlink .zbtag{position:absolute !important;top:auto !important;bottom:16px;right:16px;z-index:3;pointer-events:none;line-height:0}
.cardlink .zbtag img{width:104px !important}
@media (max-width:1023px){ .cardlink .zbtag img{width:92px !important} }
@media (max-width:767px){ .cardlink .zbtag{bottom:14px;right:14px} .cardlink .zbtag img{width:86px !important} }