/* =========================================================
   Reusable page blocks
   Built on the same tokens as the home page design, so a
   flexible page sits beside the home page without a seam.
   ========================================================= */

/* ---------- Page banner ---------- */
.pbanner{
  position:relative;display:flex;align-items:center;
  overflow:hidden;color:#fff;text-align:center;
}
.pbanner--short{min-height:280px;padding:70px 0;}
.pbanner--medium{min-height:420px;padding:90px 0;}
.pbanner--tall{min-height:560px;padding:110px 0;}

.pbanner__bg{
  position:absolute;inset:0;
  background:linear-gradient(rgba(12,13,12,.9),rgba(18,19,18,.94)) center/cover no-repeat;
}

.pbanner__in{position:relative;z-index:2;max-width:820px;margin-inline:auto;}

/* The kicker is a flex row carrying its own gold rule, so centring the banner
   text is not enough — the row itself has to be centred too. */
.pbanner .kicker{justify-content:center;}

.pbanner__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(30px,4vw,54px);line-height:1.16;
  margin:14px 0 0;color:#fff;
}
.pbanner__title em{font-family:var(--serif);font-style:italic;font-weight:400;}

.pbanner__text{
  font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);font-weight:400;
  line-height:1.75;color:rgba(255,255,255,.82);margin:20px auto 0;max-width:640px;
}

/* ---------- Text and image ---------- */
.tix--white{background:var(--white);}
.tix--paper{background:var(--paper);}

.tix__grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}

/* The photo is first in the markup; this moves it across without reordering
   the DOM, so the reading order stays correct for screen readers. */
.tix--photo-right .tix__media{order:2;}

.tix--no-photo .tix__grid,
.tix__grid.tix--no-photo{grid-template-columns:1fr;max-width:820px;margin-inline:auto;}

.tix__media{position:relative;}
.tix__media img{
  display:block;width:100%;height:auto;
  border:1px solid var(--line);position:relative;z-index:2;
}
.tix__frame{
  position:absolute;inset:22px -22px -22px 22px;
  border:1px solid var(--gold-solid);opacity:.5;z-index:1;
}
.tix--photo-right .tix__frame{inset:22px 22px -22px -22px;}

.tix__body > p{color:var(--ink-soft);line-height:1.85;margin:0 0 18px;}

/* ---------- Card grid ---------- */
.gcards--white{background:var(--white);}
.gcards--paper{background:var(--paper);}

.gcards__grid{
  display:grid;
  grid-template-columns:repeat(var(--gcards-cols,3),1fr);
  gap:32px;
}

.gcard{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.gcard:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent;}

.gcard__media{overflow:hidden;aspect-ratio:3/2;}
.gcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);}
.gcard:hover .gcard__media img{transform:scale(1.07);}

.gcard .svc__icon{margin:32px 32px 0;}

.gcard__body{padding:26px 32px 32px;display:flex;flex-direction:column;gap:12px;flex:1;}
.gcard__body h3{
  font-family:var(--serif);font-size:25px;font-weight:400;
  margin:0;color:var(--ink);
}
.gcard__body p{color:var(--ink-soft);line-height:1.8;margin:0;}
.gcard__body .link-arrow{margin-top:auto;padding-top:6px;}

/* ---------- Call to action band ---------- */
/* With no form on the right, the text centres instead of hugging one side. */
.valuation__in--solo{
  grid-template-columns:1fr;max-width:760px;margin-inline:auto;text-align:center;
}
.valuation__in--solo .kicker{justify-content:center;}
.valuation__in--solo .valuation__list{display:inline-block;text-align:left;}
.valuation__btns{margin:32px 0 0;}

/* ---------- Public forms ---------- */
/* The honeypot must be reachable by a bot reading the HTML but never seen or
   focused by a person, so it is moved off-screen rather than display:none. */
.jp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.jp-form__row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.jp-form__row--2{grid-template-columns:repeat(2,1fr);}

.jp-notice{
  margin:0 0 18px;padding:13px 16px;font-size:14px;line-height:1.6;border-left:3px solid;
}
.jp-notice--good{background:rgba(181,142,67,.12);border-color:var(--gold-solid);color:var(--ink);}
.jp-notice--bad{background:rgba(160,40,40,.1);border-color:#a02828;color:var(--ink);}
.valuation .jp-notice--good,.valuation .jp-notice--bad{color:var(--ink);}

.jp-empty{
  padding:52px 24px;text-align:center;color:var(--muted);
  font-family:var(--serif);font-size:20px;font-style:italic;
  border:1px dashed var(--line);
}

/* ---------- Search: filter bar above a results grid ---------- */
.listings__search{margin-bottom:34px;}
.search--filters{
  box-shadow:none;border:1px solid var(--line);background:var(--white);
}

.listings__result{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:0 0 28px;padding-bottom:16px;border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:19px;font-style:italic;color:var(--ink-soft);
}
.listings__clear{
  font-family:var(--sans);font-size:11px;font-style:normal;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid currentColor;padding-bottom:2px;
  transition:color .3s var(--ease);
}
.listings__clear:hover{color:var(--navy);}

/* ---------- Photo upload ---------- */
.jp-upload{margin-top:6px;}
.jp-upload__label{
  display:block;margin-bottom:8px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}

/* The real input is hidden from sight but kept focusable, so the styled
   label below acts as the control without breaking keyboard use. */
.jp-upload__input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* The form is a white card, so this sits on light — brass on ivory, matching
   the rest of the inputs rather than the dark band behind the card. */
.jp-upload__drop{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:28px 20px;cursor:pointer;text-align:center;
  border:1px dashed rgba(181,142,67,.55);background:var(--paper);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.jp-upload__drop:hover{border-color:var(--gold-solid);background:var(--paper-2);}
.jp-upload__input:focus-visible + .jp-upload__drop{
  border-color:var(--gold-solid);box-shadow:0 0 0 3px rgba(181,142,67,.22);
}

.jp-upload__icon svg{width:26px;height:26px;fill:none;stroke:var(--gold-solid);stroke-width:1.3;}
.jp-upload__text{
  font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);
}
.jp-upload__hint{font-size:12px;color:var(--muted);line-height:1.6;}

.jp-upload__chosen{
  margin:10px 0 0;font-size:12.5px;color:var(--ink-soft);line-height:1.7;
}
.jp-upload__chosen:empty::before{content:attr(data-empty);color:var(--muted);}
.jp-upload__chosen b{color:var(--gold);font-weight:500;}
.jp-upload__skipped{display:block;margin-top:6px;color:#a02828;}

/* ---------- Single property: details left, photography right ---------- */
.prop{padding-top:64px;}
.prop__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:start;}

.prop__back{margin:0 0 20px;}
.link-arrow--back i{transform:rotate(180deg);margin-right:8px;margin-left:0;}

.prop__tags{display:flex;align-items:center;gap:12px;margin:0 0 16px;}
.prop__tags .badge{position:static;}
.prop__kind{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}

.prop__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(28px,3.4vw,46px);line-height:1.14;
  margin:0 0 14px;color:var(--ink);
}

.prop__addr{
  display:flex;align-items:center;gap:9px;margin:0 0 20px;
  font-size:14.5px;color:var(--muted);
}
.prop__addr svg{width:17px;height:17px;fill:none;stroke:var(--gold-solid);stroke-width:1.5;flex:none;}

.prop__price{
  font-family:var(--display);font-size:clamp(24px,2.6vw,34px);
  letter-spacing:.03em;color:var(--navy);margin:0 0 28px;
}

.prop__facts{
  display:flex;flex-wrap:wrap;gap:14px;
  margin:0 0 38px;padding:20px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.prop__facts li{display:flex;align-items:center;gap:9px;padding-right:14px;}
.prop__facts-icon svg{width:20px;height:20px;fill:none;stroke:var(--gold-solid);stroke-width:1.4;}
.prop__facts b{font-family:var(--display);font-weight:400;font-size:14px;letter-spacing:.06em;color:var(--navy);}

.prop__section{margin-bottom:38px;}
.prop__section p:not(.kicker){color:var(--ink-soft);line-height:1.85;margin:0 0 16px;}
.prop__section .about__points li{margin-bottom:11px;}

/* The call to action. It spans both grid columns and sits below them, so it
   reads as the page's single next step rather than an orphan beside the text. */
.prop__cta{
  grid-column:1 / -1;
  margin-top:56px;padding:38px 44px;
  background:var(--navy);color:#fff;
}
.prop__cta-in{
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
.prop__cta-text{min-width:0;}
.prop__cta-text .kicker{color:var(--gold-lt);margin-bottom:12px;}
.prop__cta-text h2{
  font-family:var(--display);font-weight:400;font-size:clamp(20px,2.2vw,28px);
  line-height:1.25;margin:0;color:#fff;
}
.prop__cta-act{flex:none;text-align:center;}

.btn--lg{padding:18px 44px;font-size:13px;}
.prop__call{margin:14px 0 0;font-size:13.5px;color:rgba(255,255,255,.6);}
.prop__call a{color:var(--gold-lt);}

.prop__cta .jp-notice{margin:22px 0 0;background:rgba(255,255,255,.1);color:#fff;}

@media (max-width:760px){
  .prop__cta{padding:30px 24px;margin-top:40px;}
  .prop__cta-in{flex-direction:column;align-items:stretch;text-align:center;gap:26px;}
  .prop__cta-text .kicker{justify-content:center;}
  .prop__cta-act .btn{width:100%;}
}

/* Photography column. Sticky so the photo stays beside the facts being read. */
.prop__media-inner{position:sticky;top:112px;}

.prop__main{display:block;overflow:hidden;margin-bottom:12px;}
.prop__main img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1s var(--ease);
}
.prop__main:hover img{transform:scale(1.04);}

/* The rest of the photographs, in one line that scrolls.

   As a grid of nine they made this column taller than everything beside
   it and still showed only a third of a set that often runs past thirty.
   The scrolling is the browser's own, with snap points, so it answers a
   finger, a trackpad and the arrow keys before any script loads. */
.prop__strip{position:relative;}

.prop__strip-rail{
  display:flex;gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.prop__strip-rail::-webkit-scrollbar{display:none;}

.prop__thumb{
  flex:0 0 calc((100% - 24px) / 3);
  scroll-snap-align:start;
  display:block;overflow:hidden;aspect-ratio:4/3;
}
.prop__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.prop__thumb:hover img{transform:scale(1.08);}

/* The arrows. A mouse has no other way to move the strip; everything
   else does, which is why they appear only on a pointer that hovers. */
.prop__strip-go{
  position:absolute;top:50%;z-index:2;
  transform:translateY(-50%);
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.94);
  box-shadow:0 2px 14px rgba(12,13,12,.18);
  cursor:pointer;
  opacity:0;transition:opacity .25s ease,background .25s ease;
}
.prop__strip-go svg{width:17px;height:17px;fill:none;stroke:var(--navy,#0C0D0C);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.prop__strip-go:hover{background:#fff;}
.prop__strip-go--back{left:8px;}
.prop__strip-go--next{right:8px;}

.prop__strip:hover .prop__strip-go{opacity:1;}

/* An arrow with nowhere to go is worse than no arrow. These three
   classes are set by the script from where the rail actually sits. */
.prop__strip.is-still .prop__strip-go,
.prop__strip.is-start .prop__strip-go--back,
.prop__strip.is-end .prop__strip-go--next{opacity:0;pointer-events:none;}

/* Touch has no hover, so the arrows would never show. It also has no
   need of them. */
@media (hover:none){
  .prop__strip-go{display:none;}
}

.prop__strip-count{
  display:block;margin-top:11px;text-align:right;
  font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(12,13,12,.42);
}

@media (max-width:1024px){
  /* Stacked, the photography leads — that is what sells a listing. */
  .prop__grid{grid-template-columns:1fr;gap:44px;}
  .prop__media{order:-1;}
  .prop__media-inner{position:static;}
}
@media (max-width:760px){
  .prop{padding-top:40px;}
  .prop__thumb{flex-basis:calc((100% - 12px) / 2);}
  .prop__enquiry{padding:26px 22px;}
}

/* ---------- Enquiry dialog ---------- */
.jp-modal{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:24px;}
.jp-modal[hidden]{display:none;}

.jp-modal__veil{
  position:absolute;inset:0;background:rgba(12,13,12,.72);
  opacity:0;transition:opacity .25s var(--ease);
}
.jp-modal.is-open .jp-modal__veil{opacity:1;}

.jp-modal__box{
  position:relative;z-index:2;width:100%;max-width:520px;
  max-height:calc(100vh - 48px);overflow-y:auto;
  background:var(--paper);border:1px solid var(--line);
  padding:44px 44px 38px;
  box-shadow:0 30px 80px rgba(0,0,0,.3);
  opacity:0;transform:translateY(18px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.jp-modal.is-open .jp-modal__box{opacity:1;transform:none;}

.jp-modal__x{
  position:absolute;top:14px;right:16px;
  width:34px;height:34px;padding:0;border:0;background:none;
  color:var(--muted);font-size:26px;line-height:1;cursor:pointer;
  transition:color .3s var(--ease);
}
.jp-modal__x:hover{color:var(--ink);}

.jp-modal__title{
  font-family:var(--display);font-weight:400;font-size:clamp(21px,2.4vw,27px);
  line-height:1.24;margin:0 0 22px;color:var(--ink);
}

/* The listing, restated so the visitor knows what they are enquiring about. */
.jp-modal__prop{
  display:flex;align-items:center;gap:14px;
  padding:14px;margin-bottom:24px;
  background:var(--white);border:1px solid var(--line);
}
.jp-modal__prop img{width:62px;height:62px;object-fit:cover;flex:none;}
.jp-modal__prop div{display:flex;flex-direction:column;gap:3px;min-width:0;}
.jp-modal__prop strong{font-family:var(--serif);font-size:18px;font-weight:400;color:var(--ink);}
.jp-modal__prop span{font-size:12.5px;color:var(--muted);}
.jp-modal__prop b{font-family:var(--display);font-size:14px;letter-spacing:.04em;color:var(--navy);}

.jp-modal__form .field{margin-bottom:12px;}
.jp-modal__form input,.jp-modal__form textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line);background:var(--white);
  font-family:var(--sans);font-size:14px;color:var(--ink);
}
.jp-modal__form input:focus,.jp-modal__form textarea:focus{outline:0;border-color:var(--gold-solid);}
.jp-modal__note{margin:14px 0 0;font-size:12.5px;color:var(--muted);text-align:center;}

/* Stop the page behind from scrolling while the dialog is open. */
body.jp-modal-open{overflow:hidden;}

@media (max-width:760px){
  .jp-modal{padding:14px;}
  .jp-modal__box{padding:36px 24px 28px;}
}
@media (prefers-reduced-motion:reduce){
  .jp-modal__veil,.jp-modal__box{transition:none;}
}

/* A flexible page with no blocks yet still needs readable body copy. */
.jp-plain{max-width:820px;}
.jp-plain p{color:var(--ink-soft);line-height:1.85;}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .tix__grid{gap:52px;}
  .gcards__grid{grid-template-columns:repeat(min(var(--gcards-cols,3),2),1fr);}
}

@media (max-width:900px){
  .tix__grid{grid-template-columns:1fr;gap:48px;}
  /* Stacked, the photo belongs above the text whichever side it was on. */
  .tix--photo-right .tix__media{order:0;}
  .tix__frame{display:none;}
}

@media (max-width:760px){
  .pbanner--short,
  .pbanner--medium,
  .pbanner--tall{min-height:0;padding:64px 0;}
  .gcards__grid{grid-template-columns:1fr;gap:24px;}
  .gcard__body{padding:22px 24px 26px;}
  .gcard .svc__icon{margin:26px 24px 0;}
}

/* ------------------------------------------------------------------
   Listing brokerage credit
   The board requires the listing office to be named wherever its
   listing appears, so it is quiet but never hidden.
------------------------------------------------------------------ */
.card__office{
	margin-top:.75rem;
	padding-top:.75rem;
	border-top:1px solid rgba(12,13,12,.08);
	font-size:.72rem;
	letter-spacing:.02em;
	line-height:1.4;
	color:rgba(12,13,12,.55);
}

.prop__office{
	margin-top:2rem;
	font-size:.78rem;
	letter-spacing:.02em;
	color:rgba(12,13,12,.55);
}

/* ------------------------------------------------------------------
   Listing pager
   Numbered links rather than an endless "load more": someone
   comparing listings needs to get back to page three, and a link is
   something a search engine can follow where a button is not.
------------------------------------------------------------------ */
.pager{
	margin-top:3.5rem;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:1.25rem;
}

.pager__count{
	margin:0;
	font-size:.82rem;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:rgba(12,13,12,.55);
}

.pager__links{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:.4rem;
}

.pager__link{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:2.75rem;
	height:2.75rem;
	padding:0 .85rem;
	border:1px solid rgba(12,13,12,.14);
	border-radius:2px;
	font-size:.88rem;
	font-weight:500;
	line-height:1;
	color:#0C0D0C;
	text-decoration:none;
	transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}

.pager__link:hover,
.pager__link:focus-visible{
	border-color:#0C0D0C;
	background:#0C0D0C;
	color:#fff;
}

.pager__link.is-active{
	background:#0C0D0C;
	border-color:#0C0D0C;
	color:#fff;
	cursor:default;
}

.pager__link--step{
	letter-spacing:.06em;
	text-transform:uppercase;
	font-size:.76rem;
}

.pager__gap{
	padding:0 .25rem;
	color:rgba(12,13,12,.4);
}

@media (max-width:600px){
	/* The window of numbers is what goes first: previous and next still
	   move the visitor, and the count still tells them where they are. */
	.pager__link:not(.is-active):not(.pager__link--step),
	.pager__gap{
		display:none;
	}
}

/* ==================================================================
   Listing detail — the action, the spec table, the rooms, the map
   ================================================================== */

/* The button sits directly under the facts now. It reads as the reply
   to what has just been read, rather than as something found at the
   end by whoever got that far. */
.prop__act{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:18px;
	margin:26px 0 34px;
	padding-bottom:30px;
	border-bottom:1px solid rgba(12,13,12,.1);
}

.prop__act-call{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:.9rem;
	font-weight:500;
	color:#0C0D0C;
	text-decoration:none;
	white-space:nowrap;
}

.prop__act-call:hover{ color:var(--gold-solid,#b08d57); }

.prop__act-call svg{
	width:16px;height:16px;
	stroke:currentColor;fill:none;stroke-width:1.7;
	stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- The reading half of the page ---------- */

/* Everything below the photographs: the description, the table, the
   rooms and the map. It used to be squeezed into the left column beside
   the pictures, which is what made a spec table of thirty rows feel like
   a cramped list. Across the whole container it reads as a document. */
.prop__wide{ padding-top:8px; padding-bottom:16px; }

.prop__wide .prop__section{
	margin:0;
	padding:46px 0;
	border-top:1px solid rgba(12,13,12,.09);
}

.prop__wide .prop__section:first-of-type{ border-top:0; padding-top:0; }

/* The heading sits out in its own margin rather than on top of the
   text, so the eye can run down the page and find a section by its
   name without reading anything else. It follows you while its
   section is on screen. */
@media (min-width:1000px){
	.prop__wide .prop__section:not(.prop__section--full){
		display:grid;
		grid-template-columns:200px minmax(0,1fr);
		column-gap:56px;
	}

	.prop__wide .prop__section > .kicker{
		margin:0;
		position:sticky;
		top:118px;
		align-self:start;
	}

	.prop__wide .prop__section > *:not(.kicker){ grid-column:2; }
}

/* ---------- The spec table ---------- */

/* Each group is a card. As bare columns of text the thirty-odd rows ran
   together into one grey block; boxed, a reader can take in "Parking"
   or "Condo" as a thing on its own and skip the rest. They tile to
   whatever width there is. */
.prop__specs{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
	gap:16px;
}

.prop__spec{
	margin:0;
	padding:24px 26px 8px;
	background:var(--paper,#f7f5f0);
	border:1px solid rgba(12,13,12,.07);
}

.prop__spec h3{
	margin:0 0 14px;
	padding-bottom:12px;
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.17em;
	text-transform:uppercase;
	color:var(--gold-solid,#b08d57);
	border-bottom:1px solid rgba(176,141,87,.3);
}

.prop__spec dl{ margin:0; }

.prop__spec dl > div{
	display:flex;
	gap:16px;
	padding:9px 0;
	font-size:.875rem;
	line-height:1.55;
}

.prop__spec dl > div + div{ border-top:1px solid rgba(12,13,12,.06); }

.prop__spec dt{
	flex:0 0 42%;
	color:rgba(12,13,12,.5);
}

.prop__spec dd{
	margin:0;
	flex:1;
	color:#0C0D0C;
	font-weight:500;
}

@media (max-width:520px){
	.prop__spec{ padding:20px 20px 6px; }
	.prop__spec dl > div{ flex-direction:column; gap:2px; }
	.prop__spec dt{ flex:none; font-size:.78rem; }
}

/* ---------- Rooms ---------- */

/* Boxed to match the cards above it, and striped, because four columns
   of short values are hard to read straight across without something
   holding the line. */
.prop__rooms{
	width:100%;
	border-collapse:collapse;
	font-size:.88rem;
	border:1px solid rgba(12,13,12,.08);
}

.prop__rooms th{
	padding:14px 18px;
	text-align:left;
	font-size:.7rem;
	font-weight:600;
	letter-spacing:.15em;
	text-transform:uppercase;
	color:rgba(12,13,12,.5);
	background:var(--paper,#f7f5f0);
	border-bottom:1px solid rgba(12,13,12,.1);
}

.prop__rooms td{
	padding:13px 18px;
	border-bottom:1px solid rgba(12,13,12,.06);
	vertical-align:top;
}

.prop__rooms tr:last-child td{ border-bottom:0; }
.prop__rooms tbody tr:nth-child(even){ background:rgba(12,13,12,.018); }

.prop__rooms td:first-child{ font-weight:500; }
.prop__rooms td:nth-child(3){ white-space:nowrap; }
.prop__rooms td:last-child{ color:rgba(12,13,12,.6); }

@media (max-width:600px){
	/* The features column is the one that can go: it is the least
	   useful of the four and the one that wraps worst. */
	.prop__rooms td:nth-child(4),
	.prop__rooms th:nth-child(4){ display:none; }
	.prop__rooms th,
	.prop__rooms td{ padding:11px 12px; }
}

/* ---------- Map ---------- */

/* The whole width, and in colour. It was half a column and grey, which
   made the one part of the page that is meant to say "here" say almost
   nothing. */
.prop__map{
	position:relative;
	overflow:hidden;
	border:1px solid rgba(12,13,12,.1);
	background:var(--paper,#f7f5f0);
}

.prop__map iframe{
	display:block;
	width:100%;
	/* Pulled back a little so the map sits with the page rather than
	   shouting over it, and let all the way up on approach. */
	filter:saturate(.82) contrast(1.02);
	transition:filter .5s ease;
}

.prop__map:hover iframe{ filter:none; }

/* The address over the corner: the map is captioned without anybody
   having to read the pin. */
.prop__map-card{
	position:absolute;
	left:20px;bottom:20px;
	max-width:min(380px,calc(100% - 40px));
	padding:18px 22px;
	background:rgba(255,255,255,.96);
	box-shadow:0 6px 28px rgba(12,13,12,.16);
}

.prop__map-addr{
	display:flex;
	align-items:flex-start;
	gap:9px;
	margin:0 0 10px;
	font-size:.9rem;
	line-height:1.5;
	color:#0C0D0C;
}

.prop__map-addr svg{
	width:16px;height:16px;flex:none;margin-top:3px;
	fill:none;stroke:var(--gold-solid,#b08d57);stroke-width:1.6;
	stroke-linecap:round;stroke-linejoin:round;
}

.prop__map-out{
	display:inline-flex;
	align-items:center;
	gap:5px;
	font-size:.74rem;
	font-weight:600;
	letter-spacing:.13em;
	text-transform:uppercase;
	color:var(--gold-solid,#b08d57);
	text-decoration:none;
}

.prop__map-out svg{
	width:13px;height:13px;
	fill:none;stroke:currentColor;stroke-width:2;
	stroke-linecap:round;stroke-linejoin:round;
	transition:transform .25s ease;
}

.prop__map-out:hover svg{ transform:translateX(3px); }

@media (max-width:600px){
	/* Under the map rather than over it — at this width the card would
	   cover most of what it is pointing at. */
	.prop__map-card{
		position:static;
		max-width:none;
		box-shadow:none;
		border-top:1px solid rgba(12,13,12,.1);
	}
}

/* ==================================================================
   The payment calculator
   ================================================================== */

/* The way in, beside the price. Quiet, because it is an aside to the
   figure it sits next to, not a rival for it. */
.prop__est{
	display:inline-flex;
	align-items:center;
	gap:6px;
	margin-left:14px;
	padding:7px 13px;
	border:1px solid rgba(12,13,12,.14);
	border-radius:999px;
	background:none;
	font-family:var(--display,inherit);
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:rgba(12,13,12,.62);
	cursor:pointer;
	vertical-align:middle;
	transition:border-color .2s ease,color .2s ease;
}

.prop__est:hover{ border-color:var(--gold-solid,#b58e43);color:var(--gold-solid,#b58e43); }

.prop__est svg{
	width:15px;height:15px;
	fill:none;stroke:currentColor;stroke-width:1.5;
	stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- The dialog ---------- */

.jp-modal--calc .calc__box{
	max-width:860px;
	width:100%;
	padding:0;
	overflow:hidden;
}

.calc__title{
	margin:0;
	padding:26px 34px 22px;
	font-size:1.15rem;
	border-bottom:1px solid rgba(12,13,12,.09);
}

/* The answer on the left, the levers on the right. The ring is the thing
   somebody came for, so it gets the side the eye lands on first. */
.calc{
	display:grid;
	grid-template-columns:290px minmax(0,1fr);
	align-items:start;
}

.calc__side{
	padding:30px 30px 34px;
	background:var(--paper,#f6f4f1);
	border-right:1px solid rgba(12,13,12,.08);
	align-self:stretch;
}

/* ---------- The ring ---------- */

.calc__ring{
	position:relative;
	width:200px;
	max-width:100%;
	margin:0 auto 26px;
}

.calc__ring svg{
	display:block;
	width:100%;height:auto;
	/* The arcs are drawn from the top rather than from three o'clock,
	   which is where a circle's nought sits by default. */
	transform:rotate(-90deg);
}

.calc__ring circle{
	fill:none;
	stroke-width:15;
}

.calc__ring-track{ stroke:rgba(12,13,12,.07); }

.calc__ring-arc{
	transition:stroke-dasharray .45s var(--ease,ease),stroke-dashoffset .45s var(--ease,ease);
}

.calc__ring-arc--loan{ stroke:var(--navy,#0c0d0c); }
.calc__ring-arc--tax{ stroke:var(--gold-solid,#b58e43); }
.calc__ring-arc--insurance{ stroke:#7d8f7a; }
.calc__ring-arc--fee{ stroke:#c4bcae; }

.calc__ring-mid{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	pointer-events:none;
}

.calc__ring-sum{
	font-family:var(--display,inherit);
	font-size:1.65rem;
	font-weight:500;
	line-height:1.1;
	color:var(--navy,#0c0d0c);
}

.calc__ring-cap{
	margin-top:3px;
	font-size:.66rem;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:rgba(12,13,12,.45);
}

/* ---------- The legend ---------- */

.calc__legend-head{
	margin:0 0 12px;
	font-size:.66rem;
	font-weight:600;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:rgba(12,13,12,.45);
}

.calc__legend{ margin:0; }

.calc__legend-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	padding:8px 0;
	font-size:.85rem;
	border-top:1px solid rgba(12,13,12,.07);
}

.calc__legend-row:first-child{ border-top:0; }

/* A line reading $0 is noise — the ring has already said so. */
.calc__legend-row.is-nil{ display:none; }

.calc__legend dt{
	display:flex;
	align-items:center;
	gap:9px;
	color:rgba(12,13,12,.6);
}

.calc__legend dd{ margin:0;font-weight:500;color:var(--navy,#0c0d0c); }

.calc__dot{
	width:9px;height:9px;
	flex:none;
	border-radius:50%;
}

.calc__dot--loan{ background:var(--navy,#0c0d0c); }
.calc__dot--tax{ background:var(--gold-solid,#b58e43); }
.calc__dot--insurance{ background:#7d8f7a; }
.calc__dot--fee{ background:#c4bcae; }

/* ---------- The fields ---------- */

.calc__form{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:18px 20px;
	padding:30px 34px 28px;
	align-content:start;
}

.calc__field label{
	display:block;
	margin-bottom:8px;
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:rgba(12,13,12,.5);
}

/* Dollars and per cent are the same figure said two ways, so they sit on
   one line and each rewrites the other as it is typed. */
.calc__pair{ display:flex;gap:8px; }
.calc__pair .calc__in--wide{ flex:1 1 auto;min-width:0; }
.calc__pair .calc__in--pct{ flex:0 0 82px; }

.calc__in{
	display:flex;
	align-items:center;
	gap:2px;
	padding:0 12px;
	background:#fff;
	border:1px solid rgba(12,13,12,.14);
	transition:border-color .2s ease;
}

.calc__in:focus-within{ border-color:var(--gold-solid,#b58e43); }

.calc__in input,
.calc__in select{
	flex:1;
	min-width:0;
	width:100%;
	padding:11px 0;
	border:0;
	background:none;
	font-family:var(--display,inherit);
	font-size:.95rem;
	color:var(--navy,#0c0d0c);
	appearance:none;
	-webkit-appearance:none;
}

.calc__in input:focus,
.calc__in select:focus{ outline:none; }

.calc__in i,
.calc__in em{
	flex:none;
	font-style:normal;
	color:rgba(12,13,12,.4);
}

.calc__in i{ font-size:.95rem; }
.calc__in em{ font-size:.75rem;padding-left:6px; }

.calc__in--sel{ position:relative;padding-right:10px; }
.calc__in--sel svg{
	width:15px;height:15px;flex:none;
	fill:none;stroke:rgba(12,13,12,.45);stroke-width:1.8;
	stroke-linecap:round;stroke-linejoin:round;
	pointer-events:none;
}

.calc__hint{
	margin:7px 0 0;
	font-size:.72rem;
	color:rgba(12,13,12,.45);
}

/* Not an error — a rule somebody has just walked into. Brass rather than
   red, because nothing has gone wrong. */
.calc__warn{
	grid-column:1 / -1;
	margin:0;
	padding:11px 14px;
	background:rgba(181,142,67,.1);
	border-left:2px solid var(--gold-solid,#b58e43);
	font-size:.78rem;
	line-height:1.6;
	color:#7a5f2c;
}

.calc__foot{
	grid-column:1 / -1;
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:20px;
	margin-top:4px;
	padding-top:18px;
	border-top:1px solid rgba(12,13,12,.09);
}

.calc__small{
	margin:0;
	font-size:.71rem;
	line-height:1.6;
	color:rgba(12,13,12,.45);
}

.calc__reset{
	flex:none;
	padding:0;
	border:0;
	background:none;
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:rgba(12,13,12,.5);
	cursor:pointer;
	text-decoration:underline;
	text-underline-offset:3px;
}

.calc__reset:hover{ color:var(--gold-solid,#b58e43); }

.calc .is-hidden{ display:none; }

@media (max-width:820px){
	.calc{ grid-template-columns:1fr; }
	.calc__side{
		border-right:0;
		border-bottom:1px solid rgba(12,13,12,.08);
		padding:26px 24px 28px;
	}
	.calc__ring{ width:170px; }
	.calc__form{ padding:24px; }
	.calc__title{ padding:22px 24px 18px; }
	.calc__foot{ flex-direction:column;gap:12px; }
}

@media (max-width:520px){
	.calc__form{ grid-template-columns:1fr; }
	.prop__est{ margin-left:0;margin-top:12px; }
}

/* ==================================================================
   The photograph gallery
   ================================================================== */

/* Nearly black rather than black: a photograph of a room reads better
   against something that is still a colour. */
/* Before anything else: an author's display beats the browser's own rule
   for [hidden], so without this the panel is told to hide and simply does
   not — the X, the backdrop and Escape all fire and nothing moves. */
.jp-lb[hidden]{ display:none; }

.jp-lb{
	position:fixed;
	inset:0;
	z-index:9999;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:56px 76px;
	background:rgba(10,10,9,.94);
	animation:jp-lb-in .25s var(--ease,ease);
}

@keyframes jp-lb-in{ from{ opacity:0; } to{ opacity:1; } }

/* The page behind must not scroll while this is over it. */
body.jp-lb-open{ overflow:hidden; }

.jp-lb__figure{
	margin:0;
	max-width:100%;
	max-height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
}

.jp-lb__figure img{
	display:block;
	max-width:100%;
	max-height:calc(100vh - 112px);
	width:auto;height:auto;
	object-fit:contain;
	opacity:1;
	transition:opacity .2s ease;
}

/* While the next one is on its way. Fading rather than blanking, so the
   picture that is already there stays readable until it is replaced. */
.jp-lb.is-loading .jp-lb__figure img{ opacity:.35; }

.jp-lb__go,
.jp-lb__x{
	position:absolute;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	border:0;
	background:rgba(255,255,255,.1);
	color:#fff;
	cursor:pointer;
	transition:background .2s ease;
}

.jp-lb__go:hover,
.jp-lb__x:hover{ background:rgba(255,255,255,.22); }

.jp-lb__go:focus-visible,
.jp-lb__x:focus-visible{ outline:2px solid var(--gold-lt,#dfbe7e);outline-offset:2px; }

.jp-lb__go{
	top:50%;
	transform:translateY(-50%);
	width:52px;height:52px;
	border-radius:50%;
}

.jp-lb__go svg{
	width:22px;height:22px;
	fill:none;stroke:currentColor;stroke-width:1.6;
	stroke-linecap:round;stroke-linejoin:round;
}

.jp-lb__go--back{ left:16px; }
.jp-lb__go--next{ right:16px; }

.jp-lb__x{
	top:16px;right:16px;
	width:44px;height:44px;
	border-radius:50%;
	font-size:26px;
	line-height:1;
}

.jp-lb__count{
	position:absolute;
	bottom:20px;left:0;right:0;
	margin:0;
	text-align:center;
	font-size:.72rem;
	letter-spacing:.16em;
	color:rgba(255,255,255,.62);
}

@media (max-width:760px){
	/* The arrows come down to the bottom corners, where a thumb can reach
	   them, and stop sitting on top of the photograph. */
	.jp-lb{ padding:56px 12px 76px; }

	.jp-lb__go{
		top:auto;bottom:14px;
		transform:none;
		width:46px;height:46px;
	}

	.jp-lb__go--back{ left:22%; }
	.jp-lb__go--next{ right:22%; }

	.jp-lb__figure img{ max-height:calc(100vh - 152px); }
	.jp-lb__count{ bottom:28px; }
}

/* WordPress's own bar sits at a higher layer than anything a theme may
   claim, so for a signed-in visitor it lies across the top of the
   gallery and swallows half of the close button. Only the client and
   the agent ever see this, but they are the two people who will be
   looking at it most. */
body.admin-bar .jp-lb__x{ top:48px; }

@media (max-width:782px){
	/* The bar is taller on a phone, and it does not scroll away. */
	body.admin-bar .jp-lb__x{ top:62px; }
}