/* ==========================================================
   TRIMROSS · TOWNPARKS — FIND YOUR HOME
   Everything is prefixed .tr- so it can't collide with the
   hero page. Montserrat only, to match the opening sequence.
   ========================================================== */

.tr-siteplan{
  --ink:#16232F;
  --ink-2:#51616F;
  --ink-3:#8896A2;
  --paper:#FBFAF7;
  --card:#FFFFFF;
  --sky:#D7E6F5;              /* sampled from clip 1, frame 0 */
  --line:#E7E4DC;
  --line-2:#D3CFC5;

  --c1:#3E8FA8;               /* 1 bed  */
  --c2:#C6793F;               /* 2 bed  */
  --c3:#4C5B6B;               /* 3 bed  */
  --c1-d:#2E7189; --c2-d:#A15D2A; --c3-d:#35414E;
  --c-sold:#A6ADB3; --c-sold-d:#8A9299;

  --r:14px;
  --ease:cubic-bezier(.22,.61,.36,1);

  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#E6F0FA 0,#F6F8F7 46vh,var(--paper) 100%);
  padding:clamp(56px,7vw,104px) clamp(18px,4vw,48px) clamp(64px,8vw,120px);
  -webkit-font-smoothing:antialiased;
}
.tr-siteplan *{box-sizing:border-box}
.tr-wrap{max-width:1180px;margin:0 auto}

/* ---------- header ---------- */
.tr-eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#6E8299;margin:0 0 20px;
}
.tr-h2{font-size:clamp(32px,5vw,58px);font-weight:600;letter-spacing:-.025em;
  line-height:1.04;margin:0 0 20px;max-width:15ch}
.tr-lede{font-size:clamp(16px,1.7vw,19px);line-height:1.6;color:var(--ink-2);
  max-width:50ch;margin:0 0 40px;font-weight:400}

/* ---------- controls ---------- */
.tr-controls{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;
  justify-content:space-between;margin-bottom:22px}
.tr-chips{display:flex;flex-wrap:wrap;gap:9px}
.tr-chip{
  font-family:inherit;font-size:13.5px;font-weight:500;padding:10px 18px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.72);
  border-radius:100px;color:var(--ink-2);cursor:pointer;
  transition:all .22s var(--ease);display:inline-flex;align-items:center;gap:9px;
}
.tr-chip:hover{border-color:var(--ink-3);color:var(--ink);background:#fff}
.tr-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.tr-chip .dot{width:9px;height:9px;border-radius:50%;background:currentColor}
.tr-chip[data-beds="1"] .dot{background:var(--c1)}
.tr-chip[data-beds="2"] .dot{background:var(--c2)}
.tr-chip[data-beds="3"] .dot{background:var(--c3)}
.tr-count{font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.tr-count b{color:var(--ink);font-weight:600}

/* ---------- map ---------- */
.tr-stage{
  --mapH:clamp(400px,74vh,760px);
  position:relative;display:grid;gap:22px;align-items:start;justify-content:center;
  grid-template-columns:auto minmax(320px,400px);
  grid-template-rows:auto auto;
}
/* The legend lives in the grid rather than under it, so its left edge lines up
   with the map's. The stage is centred, so anything sitting outside the grid
   starts at the container edge instead — which is where the key used to be. */
.tr-map{grid-column:1;grid-row:1}
.tr-panel{grid-column:2;grid-row:1}
.tr-maplegend{grid-column:1;grid-row:2}
.tr-map{
  position:relative;height:var(--mapH);width:calc(var(--mapH) * 0.9604);
  background:#EEF1EC;border-radius:var(--r);overflow:hidden;
  box-shadow:0 26px 60px -34px rgba(22,35,47,.42),0 0 0 1px rgba(22,35,47,.06);
}
.tr-map svg{display:block;width:100%;height:100%}

/* roofs are the interactive layer */
.tr-plot{cursor:pointer;transition:opacity .25s var(--ease),transform .22s var(--ease)}
.tr-plot .roof{stroke:#fff;stroke-width:1.8;stroke-linejoin:round;transition:filter .2s var(--ease)}
.tr-plot .ridge{stroke-width:1.5;stroke-linecap:round;opacity:.9}
.tr-plot[data-beds="1"] .roof{fill:var(--c1)} .tr-plot[data-beds="1"] .ridge{stroke:var(--c1-d)}
.tr-plot[data-beds="2"] .roof{fill:var(--c2)} .tr-plot[data-beds="2"] .ridge{stroke:var(--c2-d)}
.tr-plot[data-beds="3"] .roof{fill:var(--c3)} .tr-plot[data-beds="3"] .ridge{stroke:var(--c3-d)}
.tr-plot[data-status="reserved"] .roof,.tr-plot[data-status="sold"] .roof{fill:var(--c-sold)}
.tr-plot[data-status="reserved"] .ridge,.tr-plot[data-status="sold"] .ridge{stroke:var(--c-sold-d)}
.tr-plot:hover,.tr-plot.is-active{transform:translate(-1.5px,-2.5px)}
.tr-plot:hover .roof,.tr-plot.is-active .roof{filter:brightness(1.12)}
.tr-plot.is-active .roof{stroke-width:3.2}
.tr-plot:focus{outline:none}
.tr-plot:focus-visible .roof{stroke:var(--ink);stroke-width:3.2}
.tr-plot.is-dim{opacity:.28;pointer-events:none}

/* pegs */
.tr-peg{pointer-events:none;transition:opacity .25s var(--ease)}
.tr-peg .stem{stroke:#2C3944;stroke-width:1.5;opacity:.6}
.tr-peg .pill{fill:#fff;stroke:#fff;stroke-width:1}
.tr-peg .cap{fill:var(--c3)}
.tr-peg[data-beds="1"] .cap{fill:var(--c1)}
.tr-peg[data-beds="2"] .cap{fill:var(--c2)}
.tr-peg[data-status="reserved"] .cap,.tr-peg[data-status="sold"] .cap{fill:var(--c-sold)}
.tr-peg .lt{font-size:17px;font-weight:700;fill:#fff;text-anchor:middle;dominant-baseline:central}
.tr-peg.is-dim{opacity:.18}
.tr-tip{opacity:0;transition:opacity .18s var(--ease);pointer-events:none}
.tr-tip rect{fill:#16232F;filter:url(#tr-pshadow)}
.tr-tip text{font-size:14px;font-weight:500;fill:#fff;text-anchor:middle;dominant-baseline:central}
.tr-plot:hover ~ * .tr-tip[data-for],
.tr-tip.is-on{opacity:1}

/* legend */
.tr-maplegend{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;
  padding:0;font-size:13px;color:var(--ink-2)}
.tr-maplegend .k{display:inline-flex;align-items:center;gap:9px}
.tr-maplegend .sw{width:15px;height:15px;border-radius:4px}
.tr-hint{margin-left:auto;color:var(--ink-3)}

/* ---------- on-map hint --------------------------------------------------
   Sits over the plan rather than above the section, where it was being
   scrolled past unread. Retires as soon as a home is opened — by then it has
   done its job and is only covering the map. */
.tr-maphint{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
  margin:0;padding:11px 20px;white-space:nowrap;pointer-events:none;
  background:rgba(255,255,255,.94);color:var(--ink);
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 10px 26px -14px rgba(22,35,47,.5),0 0 0 1px rgba(22,35,47,.08);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.tr-map.has-picked .tr-maphint{opacity:0;transform:translate(-50%,8px)}
@media (max-width:620px){
  .tr-maphint{font-size:11.5px;padding:9px 15px;bottom:12px;letter-spacing:.05em}
}

/* ---------- panel ---------- */
.tr-panel{
  position:relative;height:var(--mapH);width:100%;
  background:var(--card);border-radius:var(--r);
  box-shadow:0 26px 60px -34px rgba(22,35,47,.42),0 0 0 1px rgba(22,35,47,.06);
  overflow-y:auto;overscroll-behavior:contain;z-index:5;
}
.tr-panel-close{display:none}
.tr-panel.has-selection .tr-panel-close{display:grid}

/* overview — what the column shows before anything is picked */
.tr-ov{padding:26px}
.tr-ov h4{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:0 0 8px}
.tr-ov p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0 0 22px}
.tr-ov-list{list-style:none;margin:0 0 20px;padding:0}
.tr-ov-list button{
  width:100%;display:flex;align-items:center;gap:12px;padding:13px 12px;
  background:none;border:none;border-radius:10px;cursor:pointer;font-family:inherit;
  text-align:left;transition:background .18s var(--ease);border-bottom:1px solid var(--line);
}
.tr-ov-list button:hover{background:#F4F6F4}
.tr-ov-list i{width:12px;height:12px;border-radius:4px;flex:0 0 auto}
.tr-ov-list .nm{font-size:14px;font-weight:500;flex:1}
.tr-ov-list .ty{font-size:12px;color:var(--ink-3)}
.tr-ov-list .ct{font-size:14px;font-weight:600;min-width:22px;text-align:right}
.tr-ov-hint{font-size:12.5px;color:var(--ink-3);margin:0}
.tr-panel-close{
  position:absolute;top:14px;right:14px;z-index:3;width:36px;height:36px;
  border-radius:50%;border:none;background:rgba(255,255,255,.9);cursor:pointer;
  font-size:18px;line-height:1;color:var(--ink);display:grid;place-items:center;
  transition:.2s var(--ease);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(22,35,47,.16);
}
.tr-panel-close:hover{background:var(--ink);color:#fff}
.tr-hero-img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--sky)}
.tr-pad{padding:0 26px}

.tr-badge{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:100px;margin:22px 0 0}
.tr-badge[data-status="available"]{background:#E6F1E9;color:#2C6244}
.tr-badge[data-status="reserved"]{background:#FBF0DA;color:#8A6712}
.tr-badge[data-status="sold"]{background:#EDEFF1;color:#66707A}

.tr-panel h3{font-size:27px;font-weight:600;letter-spacing:-.02em;margin:14px 0 5px;line-height:1.14}
.tr-sub{font-size:13.5px;color:var(--ink-3);margin:0 0 20px;font-weight:500}
.tr-price{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:0 0 22px}
.tr-price small{display:block;font-size:12.5px;font-weight:400;color:var(--ink-3);margin-top:5px;line-height:1.5}

.tr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 26px}
.tr-stats div{background:#F4F6F4;border-radius:10px;padding:14px 6px;text-align:center}
.tr-stats .v{font-size:17px;font-weight:600;display:block;letter-spacing:-.01em}
.tr-stats .l{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-top:5px;display:block}

.tr-tabs{display:flex;gap:7px;margin:0 0 14px}
.tr-tab{flex:1;padding:10px 6px;background:#F4F6F4;border:none;border-radius:9px;
  font-family:inherit;font-size:12.5px;font-weight:500;color:var(--ink-2);cursor:pointer;
  transition:.2s var(--ease)}
.tr-tab[aria-selected="true"]{background:var(--ink);color:#fff;font-weight:600}
.tr-plan{width:100%;border:1px solid var(--line);background:#fff;cursor:zoom-in;display:block;border-radius:10px}
.tr-plan-note{font-size:12px;color:var(--ink-3);margin:10px 0 24px;line-height:1.55}
.tr-spec{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin:0 0 10px}
.tr-spec-list{margin:0 0 26px;padding:0;list-style:none;font-size:13.5px}
.tr-spec-list li{padding:11px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;justify-content:space-between}
.tr-spec-list li span:first-child{color:var(--ink-3)}
.tr-spec-list li span:last-child{text-align:right;font-weight:500}

.tr-cta{display:block;width:100%;padding:17px;background:var(--ink);color:#fff;border:none;
  font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;border-radius:10px;
  transition:.24s var(--ease)}
.tr-cta:hover{background:#000;transform:translateY(-1px)}
.tr-cta[disabled]{background:var(--c-sold);cursor:not-allowed;transform:none}

/* ---------- cards ---------- */
.tr-types{margin-top:82px}
.tr-types h3{font-size:clamp(24px,2.8vw,34px);font-weight:600;letter-spacing:-.02em;margin:0 0 10px}
.tr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.tr-card{background:var(--card);border-radius:12px;overflow:hidden;cursor:pointer;text-align:left;
  padding:0;font-family:inherit;transition:.28s var(--ease);display:flex;flex-direction:column;
  box-shadow:0 2px 14px -6px rgba(22,35,47,.2),0 0 0 1px rgba(22,35,47,.05)}
.tr-card:hover{transform:translateY(-4px);box-shadow:0 22px 46px -26px rgba(22,35,47,.45),0 0 0 1px rgba(22,35,47,.07)}
.tr-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--sky)}
.tr-card-body{padding:18px 18px 20px;flex:1;display:flex;flex-direction:column}
.tr-card .rule{height:4px;width:32px;border-radius:2px;margin-bottom:13px;background:var(--c3)}
.tr-card[data-beds="1"] .rule{background:var(--c1)}
.tr-card[data-beds="2"] .rule{background:var(--c2)}
.tr-card h4{font-size:17.5px;font-weight:600;margin:0 0 5px;letter-spacing:-.01em}
.tr-card .meta{font-size:12.5px;color:var(--ink-3);margin:0 0 15px}
.tr-card .avail{margin-top:auto;font-size:13px;color:var(--ink-2);display:flex;justify-content:space-between;gap:10px}
.tr-card .avail b{font-weight:600;color:var(--ink)}

/* ---------- form ---------- */
.tr-form-shell{margin-top:82px;padding-top:56px;border-top:1px solid var(--line)}
.tr-form{max-width:660px}
.tr-form h3{font-size:clamp(24px,2.8vw,34px);font-weight:600;letter-spacing:-.02em;margin:0 0 10px}
.tr-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0 22px}
.tr-field{display:flex;flex-direction:column;gap:8px}
.tr-field.full{grid-column:1/-1}
.tr-field label{font-size:12.5px;font-weight:500;color:var(--ink-2)}
.tr-field input,.tr-field select,.tr-field textarea{
  font-family:inherit;font-size:15px;padding:14px 15px;border:1px solid var(--line-2);
  background:#fff;color:var(--ink);border-radius:10px;transition:border-color .2s var(--ease);width:100%}
.tr-field input:focus,.tr-field select:focus,.tr-field textarea:focus{outline:none;border-color:var(--ink)}
.tr-field textarea{resize:vertical;min-height:96px}
.tr-consent{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--ink-2);line-height:1.55;margin-bottom:24px}
.tr-consent input{margin-top:2px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--ink)}
.tr-legal{font-size:12px;color:var(--ink-3);line-height:1.65;margin-top:20px;max-width:62ch}
.tr-legal a{color:var(--ink-2)}
.tr-hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.tr-submit{width:auto;padding:17px 42px}

/* ---------- lightbox ---------- */
.tr-lightbox{position:fixed;inset:0;background:rgba(14,22,30,.94);z-index:9999;display:none;
  place-items:center;padding:24px;cursor:zoom-out}
.tr-lightbox.is-open{display:grid}
.tr-lightbox img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;border-radius:8px}
.tr-lightbox-close{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-size:20px;
  cursor:pointer;display:grid;place-items:center}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .tr-stage{grid-template-columns:1fr}
  .tr-map,.tr-panel,.tr-maplegend{grid-column:1}
  .tr-panel{grid-row:auto}
  .tr-maplegend{grid-row:auto}
  .tr-map{width:100%;height:auto;aspect-ratio:970/1010}
  .tr-panel{position:fixed;inset:auto 0 0 0;width:100%;height:88vh;max-height:88vh;
    border-radius:18px 18px 0 0;transform:translateY(101%);
    transition:transform .4s var(--ease);
    box-shadow:0 -22px 60px -30px rgba(22,35,47,.6)}
  .tr-panel.is-open{transform:translateY(0)}
  .tr-panel .tr-ov{display:none}
  .tr-panel-close{display:grid}
  .tr-panel-inner::before{content:"";display:block;width:44px;height:4px;border-radius:100px;
    background:var(--line-2);margin:11px auto 2px}
  .tr-peg,.tr-tip{display:none}
  .tr-hint{display:none}
  .tr-fields{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .tr-siteplan *{transition-duration:.01ms !important}
  .tr-plot:hover,.tr-plot.is-active{transform:none}
}

/* --- site plan, brought into the site design system --- */
.tr-siteplan{--r:0;--paper:transparent;--card:#fff;--line:#E4E3DE;--line-2:#CFCEC7;
  --ink:#0F1518;--ink-2:#4A5257;--ink-3:#7C8388;--sky:#EEF1EC;
  background:none;padding:0;font-family:var(--sans)}
.tr-siteplan .tr-wrap{max-width:none;margin:0;padding:0}
.tr-map,.tr-panel,.tr-card,.tr-panel-close,.tr-chip,.tr-cta,.tr-tab,.tr-stats div,
.tr-plan,.tr-ov-list button,.tr-ov-list i,.tr-badge{border-radius:0}
.tr-map,.tr-panel,.tr-card{box-shadow:none;border:1px solid var(--rule)}
.tr-map{background:#EEF1EC}
.tr-card:hover{transform:translateY(-3px);box-shadow:none;border-color:var(--ink)}
.tr-chip{background:transparent}
.tr-stats div,.tr-tab{background:var(--paper-2)}
.tr-panel-close{box-shadow:none;border:1px solid var(--rule)}
.tr-controls{border-bottom:1px solid var(--rule);padding-bottom:18px;margin-bottom:26px}
.tr-types{margin-top:clamp(56px,7vw,96px)}
.tr-types h3{font-size:var(--t-lg);font-weight:300;letter-spacing:-.032em}
.tr-types .tr-lede,.tr-siteplan .tr-lede{font-weight:300}
.tr-maplegend{font-size:13px}

/* compact variant — used on the homepage, where the house-type cards
   already appear further down the page */
.tr-compact .tr-types{display:none}
.tr-compact .tr-siteplan{padding:0}