/* Shared furniture for the standalone pages (about, projects, gallery, news,
   landowners, residences, contact). The page hero, section rhythm, spec rows
   and CTA come from property.css - only patterns those pages do not already
   have live here. */

/* ------------------------------------------------------------------ intro */

.pg_lede__Pld1 {
  margin: 0;
  max-width: 92rem;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 145%;
  letter-spacing: -0.01em;
}

.pg_body__Pbd2 p {
  margin: 0 0 2.4rem;
  max-width: 68rem;
  font-size: 1.7rem;
  line-height: 175%;
  color: rgba(21, 23, 23, 0.7);
}

.pg_body__Pbd2 p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ stats */

.pg_stats__Pst3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem 2rem;
  margin: 6rem 0 0;
  padding: 4rem 0 0;
  border-top: 1px solid rgba(21, 23, 23, 0.14);
}

.pg_stat-value__Psv4 {
  display: block;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 5.6rem;
  line-height: 100%;
  letter-spacing: -0.03em;
}

.pg_stat-label__Psl5 {
  display: block;
  margin: 1.2rem 0 0;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(21, 23, 23, 0.5);
}

/* --------------------------------------------------------------- ruled list */

/* A numbered rail: process steps, principles, anything ordered. */
.pg_steps__Pstp6 {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.pg_step__Pstp7 {
  display: grid;
  gap: 1.2rem;
  padding: 3.2rem 0;
  border-top: 1px solid rgba(21, 23, 23, 0.14);
}

.pg_step__Pstp7:last-child {
  border-bottom: 1px solid rgba(21, 23, 23, 0.14);
}

.pg_step__Pstp7::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: rgba(21, 23, 23, 0.4);
}

.pg_step-title__Pstt8 {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 125%;
  letter-spacing: -0.01em;
}

.pg_step-text__Pstx9 {
  margin: 0;
  font-size: 1.6rem;
  line-height: 170%;
  color: rgba(21, 23, 23, 0.65);
}

/* ------------------------------------------------------------ project cards */

.pg_projects__Ppr10 {
  display: grid;
  gap: 6rem 2.4rem;
  margin: 4rem 0 0;
}

.pg_project__Ppr11 {
  display: block;
  color: inherit;
  text-decoration: none;
}

.pg_project-media__Ppm12 {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #e9e9e9;
}

.pg_project-media__Ppm12 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pg_tag__Ptg13 {
  position: absolute;
  left: 1.6rem;
  top: 1.6rem;
  z-index: 1;
  padding: 0.6rem 1.4rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.92);
  color: #151717;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pg_project-head__Pph14 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.6rem;
  margin: 2rem 0 0;
}

.pg_project-name__Ppn15 {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -0.01em;
}

/* Everything on a project card reads down the left edge: name, address, then
   the figures. */
.pg_project-place__Ppp16 {
  margin: 0.4rem 0 0;
  font-size: 1.4rem;
  line-height: 150%;
  color: rgba(21, 23, 23, 0.5);
}

.pg_project-facts__Ppf17 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2.4rem;
  padding: 1.6rem 0 0;
  border-top: 1px solid rgba(21, 23, 23, 0.14);
  font-size: 1.4rem;
  color: rgba(21, 23, 23, 0.6);
}

.pg_project-facts__Ppf17 b {
  font-weight: 500;
  color: #151717;
}

/* ---------------------------------------------------------------- gallery */

.pg_filters__Pfl18 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 4rem 0 0;
}

.pg_filter__Pfl19 {
  padding: 1rem 2rem;
  border: 1px solid rgba(21, 23, 23, 0.2);
  border-radius: 100px;
  background: transparent;
  color: rgba(21, 23, 23, 0.6);
  font-size: 1.4rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.pg_filter__Pfl19[aria-pressed='true'] {
  background: #151717;
  border-color: #151717;
  color: #fff;
}

.pg_grid__Pgr20 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  margin: 3rem 0 0;
}

.pg_shot__Psh21 {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #e9e9e9;
}

/* Filtering swaps display, so the reveal is re-run per item rather than by the
   scroll trigger, which has already fired by the time a chip is clicked. */
.pg_shot__Psh21[hidden] {
  display: none;
}

.pg_shot__Psh21 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pg_shot-caption__Psc22 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4rem 1.6rem 1.4rem;
  background: linear-gradient(180deg, rgba(21, 23, 23, 0) 0%, rgba(21, 23, 23, 0.8) 100%);
  color: #fff;
  font-size: 1.3rem;
  opacity: 0;
  transform: translateY(0.8rem);
  transition: opacity 0.35s, transform 0.35s;
}

/* ------------------------------------------------------------------- news */

.pg_news__Pnw23 {
  display: grid;
  gap: 0;
  margin: 4rem 0 0;
}

/* The row is a link now, so the grid sits on the link and this keeps only
   the rule and the rhythm. */
.pg_post__Pps24 {
  padding: 3.2rem 0;
  border-top: 1px solid rgba(21, 23, 23, 0.14);
}

.pg_post__Pps24:last-child {
  border-bottom: 1px solid rgba(21, 23, 23, 0.14);
}

.pg_post-media__Ppm25 {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #e9e9e9;
}

.pg_post-media__Ppm25 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pg_post-date__Ppd26 {
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(21, 23, 23, 0.45);
}

.pg_post-title__Ppt27 {
  margin: 1.2rem 0 1rem;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 125%;
  letter-spacing: -0.01em;
}

.pg_post-text__Ppx28 {
  margin: 0;
  max-width: 56rem;
  font-size: 1.6rem;
  line-height: 170%;
  color: rgba(21, 23, 23, 0.65);
}

/* ---------------------------------------------------------------- contact */

.pg_cards__Pcd29 {
  display: grid;
  gap: 1px;
  margin: 4rem 0 0;
  background: rgba(21, 23, 23, 0.14);
  border: 1px solid rgba(21, 23, 23, 0.14);
}

.pg_card__Pcd30 {
  display: block;
  padding: 3.2rem;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.pg_card-label__Pcl31 {
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(21, 23, 23, 0.45);
  transition: color 0.3s;
}

.pg_card-value__Pcv32 {
  margin: 1.6rem 0 0;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.01em;
}

.pg_card-note__Pcn33 {
  margin: 1rem 0 0;
  font-size: 1.5rem;
  line-height: 160%;
  color: rgba(21, 23, 23, 0.55);
  transition: color 0.3s;
}

.pg_map__Pmp34 {
  position: relative;
  display: block;
  margin: 4rem 0 0;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: #e9e9e9;
  color: inherit;
  text-decoration: none;
}

.pg_map__Pmp34 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pg_map-note__Pmn41 {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 2rem;
  border-radius: 100px;
  background: #151717;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
}

.pg_map-note__Pmn41 svg {
  width: 1.6rem;
  height: 1.6rem;
}

/* ------------------------------------------------------------- live map
   Leaflet over OpenStreetMap tiles. The still underneath is the poster: it
   carries the block until the tiles arrive, and it is what stays if they
   never do. */

.pg_map-canvas__Pmc55 {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #e9e9e9;
}

.pg_map__Pmp34[data-live] img {
  opacity: 0;
}

/* the note is a link out to a full map, so it sits above Leaflet's own panes */
.pg_map__Pmp34 .pg_map-note__Pmn41 {
  z-index: 1000;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

/* A short strip is fine for a picture and cramped for a map you can drag. */
@media (max-width: 767px) {
  .pg_map__Pmp34[data-map] {
    aspect-ratio: 4 / 3;
  }
}

/* ----- marker ----------------------------------------------------------- */

/* Drawn here rather than shipped as an icon file, so it can be the site's own
   ink. The ring is the resting pulse; the dot is the address. */
.pg_pin__Pmk56 {
  position: relative;
}

.pg_pin-dot__Pmd57,
.pg_pin-ring__Pmr58 {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.pg_pin-dot__Pmd57 {
  width: 1.2rem;
  height: 1.2rem;
  background: #151717;
  box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(21, 23, 23, 0.45);
}

.pg_pin-ring__Pmr58 {
  width: 2.4rem;
  height: 2.4rem;
  background: rgba(21, 23, 23, 0.28);
  animation: pg_pulse__Pmp59 2.4s ease-out infinite;
}

@keyframes pg_pulse__Pmp59 {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; }
  70% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
}

/* ----- popup and controls ----------------------------------------------- */

/* Leaflet ships a rounded, shadowed bubble in its own blue. The rest of this
   site is square corners and ink, so the bubble is redrawn to match. */
.pg_map__Pmp34 .leaflet-popup-content-wrapper,
.pg_map__Pmp34 .leaflet-popup-tip {
  border-radius: 0;
  background: #151717;
  color: #fff;
  box-shadow: 0 1.2rem 3rem rgba(21, 23, 23, 0.28);
}

.pg_map__Pmp34 .leaflet-popup-content {
  margin: 1.4rem 1.8rem;
  font-family: var(--font-primary);
  font-size: 1.4rem;
  line-height: 155%;
}

.pg_map__Pmp34 .leaflet-popup-content strong {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pg_map__Pmp34 .leaflet-popup-close-button {
  color: rgba(255, 255, 255, 0.7);
}

.pg_map__Pmp34 .leaflet-container {
  font-family: var(--font-primary);
  background: #e9e9e9;
}

.pg_map__Pmp34 .leaflet-control-zoom a {
  border-radius: 0;
  color: #151717;
}

.pg_map__Pmp34 .leaflet-control-attribution {
  font-size: 1.1rem;
  background: rgba(255, 255, 255, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .pg_pin-ring__Pmr58 {
    animation: none;
    opacity: 0.35;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ----------------------------------------------------------------- follow
   Three accounts, set as plain type. No rules and no boxes: the block sits
   under the map with space around it, and space is enough to separate three
   short things. The arrow is the only mark, and it moves on hover so the
   whole cell reads as a thing you can press. */

.pg_follow__Pfw67 {
  margin: 6rem 0 0;
}

.pg_follow-label__Pfl71 {
  margin: 0 0 2.4rem;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(21, 23, 23, 0.6);
}

.pg_follow-links__Pfg72 {
  display: grid;
  gap: 3rem;
}

.pg_follow-link__Pfk68 {
  display: block;
  color: inherit;
  text-decoration: none;
}

.pg_follow-name__Pfn69 {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.01em;
}

.pg_follow-name__Pfn69 svg {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pg_follow-handle__Pfh70 {
  display: block;
  margin: 0.6rem 0 0;
  font-size: 1.4rem;
  color: rgba(21, 23, 23, 0.6);
}

.pg_follow-link__Pfk68:focus-visible {
  outline: 2px solid #151717;
  outline-offset: 0.6rem;
}

@media (min-width: 768px) {
  .pg_follow-links__Pfg72 {
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
  }

  .pg_follow-name__Pfn69 {
    font-size: 2.6rem;
  }

  .pg_follow-handle__Pfh70 {
    font-size: 1.7rem;
  }
}

@media (hover: hover) {
  .pg_follow-link__Pfk68:hover .pg_follow-name__Pfn69 svg {
    transform: translateX(0.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg_follow-name__Pfn69 svg {
    transition: none;
  }
}

/* -------------------------------------------------------------------- faq */

.pg_faq__Pfq35 {
  margin: 4rem 0 0;
  border-top: 1px solid rgba(21, 23, 23, 0.14);
}

.pg_faq__Pfq35 details {
  border-bottom: 1px solid rgba(21, 23, 23, 0.14);
}

.pg_faq__Pfq35 summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.8rem 0;
  font-size: 2rem;
  font-weight: 500;
  line-height: 140%;
  cursor: pointer;
  list-style: none;
}

.pg_faq__Pfq35 summary::-webkit-details-marker {
  display: none;
}

.pg_faq__Pfq35 summary::after {
  content: '+';
  flex: none;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  color: rgba(21, 23, 23, 0.4);
  transition: transform 0.3s;
}

.pg_faq__Pfq35 details[open] summary::after {
  transform: rotate(45deg);
}

.pg_faq__Pfq35 p {
  margin: 0 0 2.8rem;
  max-width: 64rem;
  font-size: 1.6rem;
  line-height: 175%;
  color: rgba(21, 23, 23, 0.65);
}

/* ------------------------------------------------------------------- misc */

/* A quiet strip of supplier / standard names. */
.pg_chips__Pch36 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 3rem 0 0;
}

.pg_chip__Pch37 {
  padding: 0.9rem 1.8rem;
  border: 1px solid rgba(21, 23, 23, 0.18);
  border-radius: 100px;
  font-size: 1.4rem;
  color: rgba(21, 23, 23, 0.7);
}

.pdp_tint__Ptn12 .pg_chip__Pch37 {
  border-color: rgba(21, 23, 23, 0.2);
}

/* Two-column reading layout with an image that stays put while text scrolls. */
.pg_split__Psp38 {
  display: grid;
  gap: 4rem;
  align-items: start;
}

.pg_split-media__Psm39 {
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #e9e9e9;
}

.pg_split-media__Psm39 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .pg_lede__Pld1 {
    font-size: 3.6rem;
  }

  .pg_stats__Pst3 {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  .pg_step__Pstp7 {
    grid-template-columns: 8rem 32rem 1fr;
    gap: 4rem;
    align-items: baseline;
    padding: 4rem 0;
  }

  .pg_projects__Ppr10 {
    grid-template-columns: repeat(2, 1fr);
  }

  .pg_grid__Pgr20 {
    grid-template-columns: repeat(3, 1fr);
  }

  .pg_post__Pps24 {
    padding: 4rem 0;
  }

  .pg_cards__Pcd29 {
    grid-template-columns: repeat(3, 1fr);
  }

  .pg_split__Psp38 {
    grid-template-columns: 1fr 1fr;
    gap: 8rem;
  }

  .pg_split-media__Psm39 {
    position: sticky;
    top: 12rem;
  }
}

@media (hover: hover) {
  .pg_project__Ppr11:hover .pg_project-media__Ppm12 img,
  .pg_map__Pmp34:hover img,
  .pg_shot__Psh21:hover img,
  .pg_post__Pps24:hover .pg_post-media__Ppm25 img {
    transform: scale(1.04);
  }

  .pg_shot__Psh21:hover .pg_shot-caption__Psc22 {
    opacity: 1;
    transform: translateY(0);
  }

  .pg_filter__Pfl19:hover {
    border-color: #151717;
    color: #151717;
  }

  a.pg_card__Pcd30:hover {
    background: #151717;
    color: #fff;
  }

  a.pg_card__Pcd30:hover .pg_card-label__Pcl31,
  a.pg_card__Pcd30:hover .pg_card-note__Pcn33 {
    color: rgba(255, 255, 255, 0.6);
  }
}

/* ------------------------------------------------------------------ form
   Ruled fields, in the page's own language: a hairline under each one, the
   label above it in the same uppercase micro type the spec rows and card
   labels use, and no boxes. A form on this site should read like the rest of
   it - a list of rows with rules between them.

   The muted greys here are at 0.6 and above. The older values (0.5 on the
   label, 0.32 on the placeholder) sat under 4.5:1 on white. */

/* Carried by a screen reader, not by the page. "Required" has to reach someone
   listening to the form, and the asterisk that marks it visually is read as
   punctuation or skipped entirely. */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pg_form__Pfm43 {
  display: grid;
  gap: 2.8rem;
  margin: 4rem 0 0;
}

.pg_field__Pfd44 {
  display: grid;
  gap: 0.8rem;
  align-content: start;
}

.pg_label__Plb48 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(21, 23, 23, 0.6);
  transition: color 0.3s;
}

/* Required is marked on the label, not left to the browser to enforce
   silently. A bare asterisk reads as punctuation to a screen reader, so the
   word travels with it and the mark itself is hidden. */
.pg_req__Prq62 {
  color: rgba(21, 23, 23, 0.45);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
}

.pg_input__Pin45 {
  width: 100%;
  padding: 1.2rem 0;
  border: 0;
  border-bottom: 1px solid rgba(21, 23, 23, 0.22);
  border-radius: 0;
  background: transparent;
  color: #151717;
  font-family: inherit;
  font-size: 1.8rem;
  line-height: 150%;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.pg_input__Pin45::placeholder {
  color: rgba(21, 23, 23, 0.42);
}

/* The rule thickens rather than changing colour alone - a 1px tint shift is
   not a focus state anyone can see. box-shadow rather than border-width so
   the field does not move as it gains weight. */
.pg_input__Pin45:focus {
  outline: none;
  border-bottom-color: #151717;
  box-shadow: 0 1px 0 0 #151717;
}

.pg_field__Pfd44:focus-within .pg_label__Plb48 {
  color: #151717;
}

/* A select drawn by the platform brings its own box and arrow, neither of
   which belongs on a ruled field. The chevron is drawn here instead. */
select.pg_input__Pin45 {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #151717 50%, #151717 calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent 50%, #151717 50%, #151717 calc(50% + 1px), transparent calc(50% + 1px));
  background-position: right 0.8rem center, right 0.2rem center;
  background-size: 0.7rem 0.7rem;
  background-repeat: no-repeat;
}

.pg_textarea__Pta46 {
  resize: vertical;
  min-height: 10rem;
}

/* ----- invalid -----------------------------------------------------------

   The old state painted the rule #151717 - the same ink as focus and as a
   field that is perfectly fine - so nothing about it read as an error. It is
   drawn in red now, and the reason is written under the field rather than
   left to the colour alone. */

.pg_input__Pin45[aria-invalid='true'] {
  border-bottom-color: #b3261e;
  box-shadow: 0 1px 0 0 #b3261e;
}

.pg_field__Pfd44[data-invalid] .pg_label__Plb48 {
  color: #b3261e;
}

.pg_error__Per63 {
  margin: 0;
  font-size: 1.3rem;
  line-height: 150%;
  color: #b3261e;
}

.pg_field__Pfd44:not([data-invalid]) .pg_error__Per63 {
  display: none;
}

/* ----- foot -------------------------------------------------------------- */

.pg_form-foot__Pff49 {
  display: grid;
  margin: 1.2rem 0 0;
  justify-items: start;
}

/* the button is the site's own, but on a light ground it needs ink, not white */
.pg_submit__Psb50.pdp_btn-solid__Pbs42 {
  border-color: #151717;
  background: #151717;
  color: #fff;
  cursor: pointer;
}

.pg_submit__Psb50.pdp_btn-solid__Pbs42:focus-visible {
  outline: 2px solid #151717;
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .pg_form__Pfm43 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.2rem 4rem;
  }

  .pg_field-wide__Pfw47 {
    grid-column: 1 / -1;
  }

  .pg_form-foot__Pff49 {
    grid-column: 1 / -1;
  }
}

@media (hover: hover) {
  .pg_submit__Psb50.pdp_btn-solid__Pbs42:hover {
    background: transparent;
    color: #151717;
  }
}

/* ------------------------------------------------------- figures & pulls */

.pg_figure__Pfg52 {
  margin: 0;
}

.pg_figure-media__Pfm54 {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #e9e9e9;
}

.pg_figure-tall__Pfg53 .pg_figure-media__Pfm54,
.pg_figure-tall__Pft53 .pg_figure-media__Pfm54 {
  aspect-ratio: 3 / 4;
}

/* a map or a panorama is a strip, not a card */
.pg_figure-wide__Pfg62 .pg_figure-media__Pfm54 {
  aspect-ratio: 21 / 9;
}

.pg_figure-media__Pfm54 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pg_figure__Pfg52 figcaption {
  margin: 1.2rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid rgba(21, 23, 23, 0.14);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: rgba(21, 23, 23, 0.5);
}

.pg_figures__Pfs59 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  margin: 4rem 0;
}

.pg_pull__Ppl60 {
  margin: 0 0 3rem;
  padding: 0 0 0 2.4rem;
  border-left: 2px solid #151717;
  font-family: var(--font-secondary);
  font-size: 2.2rem;
  line-height: 145%;
  letter-spacing: -0.01em;
}

.pg_pull-by__Ppb61 {
  display: block;
  margin: 1.2rem 0 0;
  font-family: var(--font-primary);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(21, 23, 23, 0.45);
}

/* ------------------------------------------------------------ media steps
   Each step keeps its own picture. The row that is hovered, focused or
   simply first brings its image up; the rest sit back. */

.pg_msteps__Pms58 {
  display: grid;
  gap: 0;
  margin: 4rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: mstep;
}

.pg_mstep__Pms55 {
  display: grid;
  gap: 1.6rem;
  padding: 2.4rem 0;
  border-top: 1px solid rgba(21, 23, 23, 0.14);
  transition: opacity 0.4s;
}

.pg_mstep__Pms55:last-child {
  border-bottom: 1px solid rgba(21, 23, 23, 0.14);
}

.pg_mstep__Pms55::before {
  counter-increment: mstep;
  content: counter(mstep, decimal-leading-zero);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: rgba(21, 23, 23, 0.4);
}

.pg_mstep-media__Pmm56 {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #e9e9e9;
}

.pg_mstep-media__Pmm56 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  filter: grayscale(1);
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.6s;
}

@media (min-width: 768px) {
  .pg_figures__Pfs59 {
    grid-template-columns: repeat(3, 1fr);
  }

  .pg_pull__Ppl60 {
    font-size: 2.8rem;
    max-width: 54rem;
  }

  .pg_mstep__Pms55 {
    /* number, then the picture at a fixed measure, then the words */
    grid-template-columns: 5rem 24rem 1fr;
    gap: 3.2rem;
    align-items: center;
    padding: 2rem 0;
  }

  .pg_mstep-media__Pmm56 {
    aspect-ratio: 3 / 2;
  }

  /* on a pointer device the rows dim until one is picked out */
  @media (hover: hover) {
    .pg_msteps__Pms58:hover .pg_mstep__Pms55 {
      opacity: 0.45;
    }

    .pg_msteps__Pms58 .pg_mstep__Pms55:hover,
    .pg_msteps__Pms58 .pg_mstep__Pms55:focus-within {
      opacity: 1;
    }
  }
}

@media (hover: hover) {
  .pg_figure__Pfg52:hover .pg_figure-media__Pfm54 img {
    transform: scale(1.04);
  }

  .pg_mstep__Pms55:hover .pg_mstep-media__Pmm56 img,
  .pg_mstep__Pms55:focus-within .pg_mstep-media__Pmm56 img {
    transform: scale(1);
    filter: grayscale(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg_mstep-media__Pmm56 img,
  .pg_figure-media__Pfm54 img {
    transition: none;
  }
}

/* ----------------------------------------------------- neighbourhood list
   The landmarks were a wrapped bank of twelve pills - a shape the site uses
   nowhere else, and one that gives an eye no way in. Grouped and ruled they
   read the way the spec tables on the property pages do, and a reader
   looking for schools can find the schools. */

.pg_near__Pnr73 {
  display: grid;
  gap: 0;
  margin: 4rem 0 0;
}

.pg_near-group__Png74 {
  display: grid;
  gap: 1.2rem;
  padding: 2.6rem 0;
}

/* between the groups only - not above the first or below the last */
.pg_near-group__Png74 + .pg_near-group__Png74 {
  border-top: 1px solid rgba(21, 23, 23, 0.1);
}

.pg_near-key__Pnk75 {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(21, 23, 23, 0.6);
}

.pg_near-list__Pnl76 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.4rem;
  font-size: 1.7rem;
  line-height: 165%;
}

/* A middot between names rather than a bullet down the side: the group is one
   line of places, not a list of instructions. */
.pg_near-list__Pnl76 li {
  position: relative;
}

.pg_near-list__Pnl76 li + li::before {
  content: '';
  position: absolute;
  left: -1.3rem;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(21, 23, 23, 0.3);
  transform: translateY(-50%);
}

/* The neighbourhood map is read, not glanced at, so it is given more height
   than the office strip on the contact page. */
.pg_map__Pmp34.pg_map-tall__Pmt77 {
  margin: 4rem 0 0;
  aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
  .pg_near-group__Png74 {
    grid-template-columns: 18rem 1fr;
    gap: 3rem;
    align-items: baseline;
    padding: 3rem 0;
  }

  .pg_near-list__Pnl76 {
    font-size: 2rem;
  }

  .pg_map__Pmp34.pg_map-tall__Pmt77 {
    aspect-ratio: 16 / 9;
  }
}

/* ------------------------------------------------------ desktop type scale
   Same step-up as property.css, for the roles that live in this sheet. See
   the note there. */

@media (min-width: 768px) {
  .pg_body__Pbd2 p,
  .pg_step-text__Pstx9,
  .pg_post-text__Ppx28 {
    font-size: 2rem;
  }

  .pg_chip__Pch37,
  .pg_project-place__Ppp16,
  .pg_project-facts__Ppf17,
  .pg_filter__Pfl19,
  .pg_card-note__Pcn33,
  .pg_map-note__Pmn41,
  .pg_follow-handle__Pfh70 {
    font-size: 1.7rem;
  }

  .pg_stat-label__Psl5,
  .pg_card-label__Pcl31,
  .pg_post-date__Ppd26,
  .pg_follow-label__Pfl71,
  .pg_near-key__Pnk75,
  .pg_label__Plb48,
  .pg_tag__Ptg13,
  .pg_shot-caption__Psc22,
  .pg_figure__Pfg52 figcaption {
    font-size: 1.5rem;
  }

  .pg_step-title__Pstt8 {
    font-size: 3rem;
  }

  .pg_project-name__Ppn15,
  .pg_post-title__Ppt27 {
    font-size: 3.2rem;
  }

  .pg_card-value__Pcv32,
  .pg_follow-name__Pfn69 {
    font-size: 2.6rem;
  }

  .pg_input__Pin45 {
    font-size: 2rem;
  }
}

/* -------------------------------------------------------------- two places
   Bashundhara and Jolshiri, each with the picture of what we are building
   there. The old block was two sentences and a bank of twelve pills shared
   between them, so neither place had anything of its own. */

.pg_places__Ppc78 {
  display: grid;
  gap: 4rem;
  margin: 4rem 0 0;
}

/* min-width:0 so a long landmark name cannot push the grid column wider than
   its share and unbalance the pair. */
.pg_place__Ppi79 {
  min-width: 0;
}

.pg_place-media__Ppm80 {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #e9e9e9;
}

.pg_place-media__Ppm80 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pg_place-name__Ppn81 {
  margin: 2rem 0 0;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 122%;
  letter-spacing: -0.01em;
}

.pg_place-where__Ppw93 {
  margin: 0.6rem 0 0;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(21, 23, 23, 0.6);
}

.pg_place-text__Ppt82 {
  margin: 1.6rem 0 0;
  font-size: 1.7rem;
  line-height: 172%;
  color: rgba(21, 23, 23, 0.72);
}

.pg_place-list__Ppl83 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.4rem;
  margin: 2rem 0 0;
  list-style: none;
  font-size: 1.5rem;
  line-height: 160%;
  color: rgba(21, 23, 23, 0.72);
}

.pg_place-list__Ppl83 li {
  position: relative;
}

.pg_place-list__Ppl83 li + li::before {
  content: '';
  position: absolute;
  left: -1.3rem;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(21, 23, 23, 0.3);
  transform: translateY(-50%);
}

/* ------------------------------------------------------------ the work so far
   Four sites and how far each one has come. The figures are the ones each
   project record already carries, so the page cannot drift away from them. */

.pg_jrny__Pjy84 {
  display: grid;
  gap: 0;
  margin: 4rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: jrny;
}

.pg_jrny-item__Pji85 + .pg_jrny-item__Pji85 {
  border-top: 1px solid rgba(21, 23, 23, 0.1);
}

/* The whole row opens the project, not just its name - the picture and the
   figures are the parts most people aim at. One anchor around the lot, so
   there is a single tab stop per project rather than four. */
.pg_jrny-link__Pjk95 {
  display: grid;
  gap: 2rem;
  padding: 3.2rem 0;
  color: inherit;
  text-decoration: none;
}

.pg_jrny-link__Pjk95:focus-visible {
  outline: 2px solid #151717;
  outline-offset: -0.4rem;
}

.pg_jrny-body__Pjb96 {
  min-width: 0;
}

.pg_jrny-media__Pjm86 {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #e9e9e9;
}

.pg_jrny-media__Pjm86 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pg_jrny-name__Pjn87 {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 124%;
  letter-spacing: -0.01em;
}

.pg_jrny-name__Pjn87 {
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}

.pg_jrny-where__Pjw88 {
  margin: 0.6rem 0 0;
  font-size: 1.4rem;
  line-height: 155%;
  color: rgba(21, 23, 23, 0.6);
}

.pg_jrny-facts__Pjf89 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.4rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 1.5rem;
  color: rgba(21, 23, 23, 0.72);
}

.pg_jrny-facts__Pjf89 b {
  font-weight: 500;
  color: #151717;
}

/* The bar is the figure drawn, not decoration - the number stays beside it so
   it reads without colour or width being trusted. */
.pg_jrny-stage__Pjs94 {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 2rem 0 0;
}

.pg_jrny-bar__Pjb90 {
  position: relative;
  flex: 1;
  height: 2px;
  background: rgba(21, 23, 23, 0.14);
}

.pg_jrny-fill__Pjl91 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #151717;
}

.pg_jrny-pct__Pjp92 {
  flex: none;
  font-size: 1.4rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .pg_places__Ppc78 {
    grid-template-columns: repeat(2, 1fr);
    gap: 6rem 4rem;
  }

  .pg_place-name__Ppn81 {
    font-size: 3.2rem;
  }

  .pg_place-text__Ppt82,
  .pg_jrny-facts__Pjf89,
  .pg_place-list__Ppl83 {
    font-size: 1.7rem;
  }

  .pg_jrny-link__Pjk95 {
    grid-template-columns: 30rem 1fr;
    gap: 4rem;
    align-items: center;
    padding: 3.6rem 0;
  }

  .pg_jrny-media__Pjm86 {
    aspect-ratio: 3 / 2;
  }

  .pg_jrny-name__Pjn87 {
    font-size: 3rem;
  }

  .pg_jrny-where__Pjw88 {
    font-size: 1.6rem;
  }
}

@media (hover: hover) {
  .pg_place-media__Ppm80:hover img,
  .pg_jrny-link__Pjk95:hover .pg_jrny-media__Pjm86 img {
    transform: scale(1.04);
  }

  .pg_jrny-link__Pjk95:hover .pg_jrny-name__Pjn87 {
    border-bottom-color: #151717;
  }
}

/* ------------------------------------------------------------ news article
   A post carries a title, a date, one line and a picture, so its page is
   built from exactly that and does not pad itself out. The left column holds
   when it was posted and, where the post names one outright, the project it
   belongs to. */

.pg_rel__Prl98 {
  display: block;
  margin: 3.2rem 0 0;
  color: inherit;
  text-decoration: none;
}

.pg_rel-label__Prl99 {
  display: block;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(21, 23, 23, 0.6);
}

.pg_rel-name__Prn100 {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 0;
  font-size: 2rem;
  font-weight: 500;
  line-height: 135%;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}

.pg_rel-name__Prn100 svg {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
}

/* ----- newer / older ---------------------------------------------------- */

.pg_pager__Ppg101 {
  display: grid;
  gap: 2.4rem;
  margin: 6rem 0 0;
}

.pg_pager-link__Ppl102 {
  display: block;
  color: inherit;
  text-decoration: none;
}

.pg_pager-label__Ppl105 {
  display: block;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(21, 23, 23, 0.6);
}

.pg_pager-title__Ppt106 {
  display: block;
  margin: 0.8rem 0 0;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 135%;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}

/* An article at either end of the run has only one neighbour. The gap holds
   the column so the remaining link stays on its own side. */
.pg_pager-gap__Ppg103 {
  display: none;
}

.pg_pager-next__Ppd104 {
  text-align: right;
}

/* ----- the list rows open the post -------------------------------------- */

.pg_post-link__Ppl107 {
  display: grid;
  gap: 2rem;
  color: inherit;
  text-decoration: none;
}

.pg_post-link__Ppl107:focus-visible {
  outline: 2px solid #151717;
  outline-offset: 0.6rem;
}

@media (min-width: 768px) {
  .pg_pager__Ppg101 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 4rem;
  }

  .pg_pager-gap__Ppg103 {
    display: block;
  }

  .pg_pager-title__Ppt106 {
    font-size: 2.2rem;
  }

  .pg_post-link__Ppl107 {
    grid-template-columns: 28rem 1fr;
    gap: 4rem;
    align-items: start;
  }
}

@media (hover: hover) {
  .pg_rel__Prl98:hover .pg_rel-name__Prn100,
  .pg_pager-link__Ppl102:hover .pg_pager-title__Ppt106 {
    border-bottom-color: #151717;
  }

  .pg_post-link__Ppl107:hover .pg_post-media__Ppm25 img {
    transform: scale(1.04);
  }
}

/* ------------------------------------------------------------ article body
   A news page is read top to bottom, so it drops the caption/lead split the
   rest of the site uses and runs as one column at a comfortable measure. No
   rules anywhere in here - the standfirst, the spacing and the pulled line do
   the separating. */

.pg_art__Par108 {
  max-width: 76rem;
  margin: 0 auto;
}

.pg_art-stand__Pas110 {
  margin: 0 0 4rem;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 150%;
  letter-spacing: -0.01em;
}

.pg_art-body__Pab111 p {
  margin: 0 0 2.4rem;
  font-size: 1.8rem;
  line-height: 180%;
  color: rgba(21, 23, 23, 0.78);
}

.pg_art-body__Pab111 p:last-child {
  margin-bottom: 0;
}

/* The first line of the piece gets a little more weight, the way a magazine
   opens a column - it carries the eye from the standfirst into the body. */
.pg_art-body__Pab111 p:first-child {
  font-size: 2rem;
  color: #151717;
}

.pg_art-pull__Pap109 {
  margin: 4.8rem 0;
  padding: 0;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 2.8rem;
  line-height: 140%;
  letter-spacing: -0.015em;
  text-indent: -0.4em;
}

.pg_art-pull__Pap109::before {
  content: '\201C';
}

.pg_art-pull__Pap109::after {
  content: '\201D';
}

.pg_art-figure__Paf112 {
  margin: 4.8rem 0 0;
}

.pg_art-figure-media__Pam113 {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: #e9e9e9;
}

.pg_art-figure-media__Pam113 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg_art-figure__Paf112 figcaption {
  margin: 1.4rem 0 0;
  font-size: 1.4rem;
  color: rgba(21, 23, 23, 0.6);
}

@media (min-width: 768px) {
  .pg_art-stand__Pas110 {
    font-size: 3.2rem;
  }

  .pg_art-body__Pab111 p {
    font-size: 2rem;
  }

  .pg_art-body__Pab111 p:first-child {
    font-size: 2.3rem;
  }

  .pg_art-pull__Pap109 {
    margin: 6rem 0;
    font-size: 3.6rem;
  }

  .pg_art-figure__Paf112 figcaption {
    font-size: 1.6rem;
  }
}