/* ===========================================================================
   UPTOWN PLAZA by GreeNest — Ambegaon Pathar, Pune
   uptown-plaza.css — project styles, layered over framework.css / sections.css

   Everything project-specific lives here: the wordmark proportions, the price
   and plan blocks, the site chrome, the popup, the location and contact
   sections. The two files underneath are vendor stylesheets and are never
   edited, so this one must load LAST to win on order.

   Built by @oroeet.
   =========================================================================== */

/* ------------------------------------------------- 01 wordmark proportions */
@media (max-width: 767px) {
  }

/* The intro bookmark holds the mark at display size; give it the same ratio. */
.intro__bookmark .icon-logo-eng,
.header__logo .icon-logo-eng { max-width: 100%; }

/* ------------------------------------------------------ 02 contact details */
.footer a[href^="tel:"],
.footer a[href^="mailto:"] { transition: opacity .25s ease; }
.footer a[href^="tel:"]:hover,
.footer a[href^="mailto:"]:hover { opacity: .62; }

/* The address block sits where a two-line opening-hours note used to. */
.footer .text-small a[href^="mailto:"] { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------ 03 the price */
/* The offices section became the shop price sheet. The template's stat rows
   are built for two-digit numbers; Indian figures run longer. */
.information__carousel-key,
.offices__key { hyphens: none; }

.h1 { font-variant-numeric: lining-nums tabular-nums; }

/* --------------------------------- 04 document pages (price, plans, legal) */
/* These sit on the same shell as the landing page but hold plain documents
   rather than parallax sections, so they need ordinary prose rhythm. */
.doc-page { min-height: 100vh; }
.doc-page .py-layout { padding-top: calc(var(--scale-px) * 150); }

.doc__lede { max-width: 62ch; }

/* The template uppercases body copy inside landing sections. That reads well
   for three-line statements and not at all for a privacy policy. */
.doc,
.doc *,
.doc__table,
.doc__table *,
.doc__term p { text-transform: none; }

.doc { max-width: 78ch; }
.doc h2 { margin: 2em 0 .5em; font-size: calc(var(--scale-px) * 26); }
.doc h3 { margin: 1.7em 0 .4em; font-size: calc(var(--scale-px) * 19); }
.doc h4 { margin: 1.4em 0 .3em; font-size: calc(var(--scale-px) * 16); }
.doc p, .doc li { margin: 0 0 1em; line-height: 1.75; font-size: calc(var(--scale-px) * 15); }
.doc ul, .doc ol { margin: 0 0 1.2em; padding-left: 1.2em; }
.doc li { margin-bottom: .5em; }
.doc a { text-decoration: underline; text-underline-offset: 3px; }
.doc a:hover { opacity: .65; }
.doc strong, .doc b { font-weight: 600; }
.doc__meta { margin-bottom: 2em !important; opacity: .6; }

.doc__plan {
  display: block;
  margin-top: calc(var(--scale-px) * 8);
  background: #fff;
  border: 1px solid rgba(7, 11, 32, .12);
}
.doc__plan img { width: 100%; height: auto; }

.doc__term {
  height: 100%;
  padding-top: calc(var(--scale-px) * 14);
  border-top: 1px solid rgba(7, 11, 32, .18);
}
.doc__term h3 { margin: 0 0 calc(var(--scale-px) * 6); font-weight: 600; }
.doc__term p { margin: 0; }

/* -------------------------------------------------- 04b the shop cost sheet */
.doc__tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.doc__table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
}
.doc__table th,
.doc__table td {
  padding: calc(var(--scale-px) * 12) calc(var(--scale-px) * 14);
  border-bottom: 1px solid rgba(7, 11, 32, .12);
  text-align: right;
  font-size: calc(var(--scale-px) * 14);
  white-space: nowrap;
}
.doc__table th:first-child,
.doc__table td:first-child { text-align: left; white-space: normal; }
.doc__table thead th {
  border-bottom-width: 1px;
  border-bottom-color: rgba(7, 11, 32, .34);
  font-size: calc(var(--scale-px) * 11);
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1.35;
  white-space: normal;
}
.doc__table tbody tr:hover { background: rgba(7, 11, 32, .035); }
.doc__table tfoot td {
  border-bottom: 0;
  border-top: 1px solid rgba(7, 11, 32, .34);
  font-size: calc(var(--scale-px) * 14);
}
.doc__table tfoot td:last-child { text-align: left; }

/* Stacked cards instead of a sideways-scrolling table on small screens */
@media (max-width: 767px) {
  .doc__table { min-width: 0; }
  .doc__table, .doc__table tbody, .doc__table tr, .doc__table td { display: block; width: 100%; }
  .doc__table thead, .doc__table tfoot { display: none; }
  .doc__table tbody tr {
    margin-bottom: calc(var(--scale-px) * 14);
    border: 1px solid rgba(7, 11, 32, .16);
  }
  .doc__table tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(7, 11, 32, .08);
  }
  .doc__table tbody td:first-child { background: rgba(7, 11, 32, .05); display: block; }
  .doc__table tbody td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    font-size: calc(var(--scale-px) * 12);
    letter-spacing: .6px;
    opacity: .62;
  }
}

/* ------------------------- 05 about the project / developer / FAQ sections */
/* These are plain editorial sections rather than sticky/parallax ones, so they
   need their own clearance: the header floats over them, and the team section
   that follows pulls a bookmark notch up over whatever sits above it. */
.about-project > .px-layout,
.highlights > .px-layout,
.developer > .px-layout,
.faq > .px-layout {
  padding-top: calc(var(--scale-px) * 160);
  padding-bottom: calc(var(--scale-px) * 110);
}

/* the team section that used to pull a notch up over this is gone */

@media (max-width: 767px) {
  .about-project > .px-layout,
  .highlights > .px-layout,
  .developer > .px-layout,
  .faq > .px-layout {
    padding-top: calc(var(--scale-px) * 110);
    padding-bottom: calc(var(--scale-px) * 70);
  }
}

/* --- about the project: rhythm between its four bands -------------------- */
.about-project__title { max-width: 15ch; }

.about-project__stats {
  margin-top: calc(var(--scale-px) * 70);
  padding-top: calc(var(--scale-px) * 40);
  padding-bottom: calc(var(--scale-px) * 40);
  border-top: 1px solid rgba(7, 11, 32, .16);
  border-bottom: 1px solid rgba(7, 11, 32, .16);
}

.stat__num {
  margin: 0 0 calc(var(--scale-px) * 8);
  font-variant-numeric: lining-nums tabular-nums;
  text-transform: none;
}
.stat__unit { font-size: .48em; }
.stat__label { margin: 0; max-width: 22ch; text-transform: none; }

.about-project__body { margin-top: calc(var(--scale-px) * 60); }
.about-project__specs { margin-top: calc(var(--scale-px) * 70); }

@media (max-width: 767px) {
  .about-project__stats { margin-top: calc(var(--scale-px) * 44); }
  .stat { margin-bottom: calc(var(--scale-px) * 26); }
  .about-project__body,
  .about-project__specs { margin-top: calc(var(--scale-px) * 40); }
}

/* --- price section: configuration cards ---------------------------------- */
.pricecards > .px-layout {
  padding-top: calc(var(--scale-px) * 160);
  padding-bottom: calc(var(--scale-px) * 110);
}
.pricecards__grid { margin-top: calc(var(--scale-px) * 55); }

.pc {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: calc(var(--scale-px) * 24);
  padding: calc(var(--scale-px) * 26) calc(var(--scale-px) * 24) calc(var(--scale-px) * 26);
  border: 1px solid rgba(7, 11, 32, .16);
  background: #fff;
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.pc:hover {
  border-color: rgba(7, 11, 32, .5);
  transform: translateY(calc(var(--scale-px) * -3));
  box-shadow: 0 calc(var(--scale-px) * 14) calc(var(--scale-px) * 34) rgba(7, 11, 32, .08);
}

.pc__where {
  margin: 0 0 calc(var(--scale-px) * 10);
  color: rgba(7, 11, 32, .5);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-size: calc(var(--scale-px) * 10.5);
}

.pc__name {
  margin: calc(var(--scale-px) * 4) 0 calc(var(--scale-px) * 20);
  font-size: calc(var(--scale-px) * 27);
  text-transform: none;
}

.pc__spec {
  margin: 0 0 calc(var(--scale-px) * 16);
  padding-top: calc(var(--scale-px) * 14);
  border-top: 1px solid rgba(7, 11, 32, .12);
}
.pc__spec dt {
  margin: 0 0 calc(var(--scale-px) * 3);
  color: rgba(7, 11, 32, .5);
  text-transform: none;
}
.pc__spec dd {
  margin: 0;
  font-size: calc(var(--scale-px) * 15);
  text-transform: none;
  font-variant-numeric: lining-nums tabular-nums;
}

.pc__price {
  margin: 0 0 calc(var(--scale-px) * 22);
  font-size: calc(var(--scale-px) * 26);
  font-weight: 500;
  text-transform: none;
  font-variant-numeric: lining-nums tabular-nums;
}

.pc__btn { margin-top: auto; align-self: flex-start; }

.pc__terms-head { margin-top: calc(var(--scale-px) * 60); }
.pc__note { max-width: 92ch; }
.pc__note b { font-weight: 600; }

@media (max-width: 767px) {
  .pricecards > .px-layout {
    padding-top: calc(var(--scale-px) * 110);
    padding-bottom: calc(var(--scale-px) * 70);
  }
  .pricecards__grid { margin-top: calc(var(--scale-px) * 34); }
  .pc { margin-bottom: calc(var(--scale-px) * 16); }
  .pc__terms-head { margin-top: calc(var(--scale-px) * 40); }
}

/* --- layout plans: three-up slider --------------------------------------- */
.plans > .px-layout {
  padding-top: calc(var(--scale-px) * 160);
  padding-bottom: calc(var(--scale-px) * 110);
}

.ps { margin-top: calc(var(--scale-px) * 55); }
.ps__viewport { overflow: hidden; }

.ps__track {
  display: flex;
  gap: calc(var(--scale-px) * 20);
  transition: transform .65s cubic-bezier(.7, 0, .3, 1);
  will-change: transform;
}

.ps__slide {
  flex: 0 0 calc((100% - var(--scale-px) * 40) / 3);
  margin: 0;
  min-width: 0;
}

.ps__media {
  display: block;
  border: 1px solid rgba(7, 11, 32, .14);
  background: #fff;
  overflow: hidden;
}
.ps__media img { display: block; width: 100%; height: auto; }

.ps__cap { display: block; padding-top: calc(var(--scale-px) * 14); }
/* leading-trim clips descenders on these short captions, so opt out of it */
.ps__title { display: block; text-transform: none; line-height: 1.35; }
.ps__note { display: block; margin-top: calc(var(--scale-px) * 5); text-transform: none; line-height: 1.5; }
/* the viewport clips overflow, so captions get breathing room below */
.ps__viewport { padding-bottom: calc(var(--scale-px) * 4); }

.ps__controls {
  display: flex;
  align-items: center;
  gap: calc(var(--scale-px) * 16);
  margin-top: calc(var(--scale-px) * 26);
}

.ps__nav {
  flex: 0 0 auto;
  width: calc(var(--scale-px) * 42);
  height: calc(var(--scale-px) * 42);
  padding: calc(var(--scale-px) * 11);
  border: 1px solid rgba(7, 11, 32, .28);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease;
}
.ps__nav svg { display: block; width: 100%; height: 100%; }
.ps__nav:hover:not(:disabled) { background: #070B20; border-color: #070B20; color: #fff; }
.ps__nav:disabled { opacity: .28; cursor: default; }

.ps__dots { display: flex; gap: calc(var(--scale-px) * 7); }
.ps__dot {
  width: calc(var(--scale-px) * 7);
  height: calc(var(--scale-px) * 7);
  padding: 0;
  border: 1px solid rgba(7, 11, 32, .4);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease;
}
.ps__dot[aria-current=true] { background: #070B20; border-color: #070B20; }

@media (max-width: 1023px) {
  .ps__slide { flex-basis: calc((100% - var(--scale-px) * 20) / 2); }
}
@media (max-width: 767px) {
  .plans > .px-layout {
    padding-top: calc(var(--scale-px) * 110);
    padding-bottom: calc(var(--scale-px) * 70);
  }
  .ps { margin-top: calc(var(--scale-px) * 34); }
  .ps__slide { flex-basis: 100%; }
  .ps__track { gap: calc(var(--scale-px) * 14); }
}

@media (prefers-reduced-motion: reduce) {
  .ps__track { transition: none; }
  .pc { transition: none; }
  .pc:hover { transform: none; }
}

/* --- neighbourhood: image one side, points the other ---------------------- */
.neighbourhood > .px-layout {
  padding-top: calc(var(--scale-px) * 160);
  padding-bottom: calc(var(--scale-px) * 110);
}
.nb__layout { align-items: center; }

.nb__media {
  display: block;
  border: 1px solid rgba(7, 11, 32, .12);
  overflow: hidden;
}
.nb__media img { display: block; width: 100%; height: auto; }

.nb__list {
  margin: calc(var(--scale-px) * 28) 0 calc(var(--scale-px) * 22);
  padding: 0;
  list-style: none;
}

.nb__item {
  display: flex;
  gap: calc(var(--scale-px) * 16);
  padding: calc(var(--scale-px) * 16) 0;
  border-top: 1px solid rgba(7, 11, 32, .12);
}
.nb__item:last-child { border-bottom: 1px solid rgba(7, 11, 32, .12); }

.nb__icon {
  flex: 0 0 auto;
  width: calc(var(--scale-px) * 28);
  height: calc(var(--scale-px) * 28);
  margin-top: calc(var(--scale-px) * 2);
  opacity: .85;
}
.nb__icon svg { display: block; width: 100%; height: 100%; }

.nb__body { display: block; min-width: 0; }
.nb__title { display: block; text-transform: none; line-height: 1.3; }
.nb__note {
  display: block;
  margin-top: calc(var(--scale-px) * 4);
  text-transform: none;
  line-height: 1.55;
}

.nb__foot { margin: 0; text-transform: none; line-height: 1.6; opacity: .8; }

@media (max-width: 767px) {
  .neighbourhood > .px-layout {
    padding-top: calc(var(--scale-px) * 110);
    padding-bottom: calc(var(--scale-px) * 70);
  }
  .nb__list { margin-top: calc(var(--scale-px) * 20); }
  .nb__item { padding: calc(var(--scale-px) * 13) 0; }
}

/* --- project highlights: six fact tiles ----------------------------------- */
.highlights__grid { margin-top: calc(var(--scale-px) * 60); }

.ft {
  height: 100%;
  padding: calc(var(--scale-px) * 30) 0 calc(var(--scale-px) * 34);
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.ft__icon {
  display: block;
  width: calc(var(--scale-px) * 42);
  height: calc(var(--scale-px) * 42);
  margin-bottom: calc(var(--scale-px) * 20);
  color: currentColor;
  opacity: .9;
  transition: transform .45s cubic-bezier(.7, 0, .3, 1);
}
.ft__icon svg { display: block; width: 100%; height: 100%; }
.ft:hover .ft__icon { transform: translateY(calc(var(--scale-px) * -3)); }

.ft__label {
  margin: 0 0 calc(var(--scale-px) * 10);
  opacity: .55;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.ft__value {
  margin: 0 0 calc(var(--scale-px) * 8);
  text-transform: none;
  max-width: 20ch;
}

.ft__note { margin: 0; max-width: 28ch; text-transform: none; }

.highlights__foot { margin-top: calc(var(--scale-px) * 50); }
.highlights__foot b { font-weight: 600; }

@media (max-width: 767px) {
  .highlights__grid { margin-top: calc(var(--scale-px) * 34); }
  .ft { padding: calc(var(--scale-px) * 22) 0 calc(var(--scale-px) * 24); }
  .ft__icon { margin-bottom: calc(var(--scale-px) * 14); }
}

@media (prefers-reduced-motion: reduce) {
  .ft__icon { transition: none; }
  .ft:hover .ft__icon { transform: none; }
}

/* The template uppercases body copy inside landing sections, which suits a
   three-line statement and not a paragraph of project detail. */
.doc-prose { text-transform: none; }
.doc-prose strong { font-weight: 600; }

.doc-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .25s ease;
}
.doc-link:hover { opacity: .6; }

/* --- key-facts list ------------------------------------------------------ */
.spec {
  margin: 0;
  border-top: 1px solid rgba(7, 11, 32, .16);
}

.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: calc(var(--scale-px) * 20);
  padding: calc(var(--scale-px) * 14) 0;
  border-bottom: 1px solid rgba(7, 11, 32, .1);
}

.spec__row dt,
.spec__row dd { margin: 0; text-transform: none; }
.spec__row dd { font-weight: 500; }

@media (max-width: 767px) {
  .spec__row { grid-template-columns: 1fr; gap: calc(var(--scale-px) * 4); }
}

/* --- developer fact columns ---------------------------------------------- */
.dev__fact {
  padding-top: calc(var(--scale-px) * 14);
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.dev__fact p { margin: 0 0 calc(var(--scale-px) * 6); text-transform: none; }
.dev__fact p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .dev__fact { margin-bottom: calc(var(--scale-px) * 22); }
}

/* --- FAQ accordion -------------------------------------------------------- */
/* Native <details>, so it works with JavaScript off and is keyboard- and
   screen-reader-accessible without any extra plugin. */
.faq__list { border-top: 1px solid rgba(7, 11, 32, .16); }

.faq__item { border-bottom: 1px solid rgba(7, 11, 32, .1); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--scale-px) * 24);
  padding: calc(var(--scale-px) * 18) 0;
  cursor: pointer;
  list-style: none;
  transition: opacity .25s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { opacity: .62; }
.faq__q:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.faq__q-text { text-transform: none; }

/* plus that becomes a minus, drawn rather than iconed so it inherits colour */
.faq__q-mark {
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--scale-px) * 16);
  height: calc(var(--scale-px) * 16);
  margin-top: calc(var(--scale-px) * 6);
}
.faq__q-mark::before,
.faq__q-mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform .3s cubic-bezier(.7, 0, .3, 1);
}
.faq__q-mark::after { transform: rotate(90deg); }
.faq__item[open] .faq__q-mark::after { transform: rotate(0deg); }

.faq__a { padding: 0 0 calc(var(--scale-px) * 22); max-width: 68ch; }
.faq__a p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .faq__q-mark::before, .faq__q-mark::after { transition: none; }
}

/* --------------------------------------------------------------- 06 print */
@media print {
  .preloader, .header, .footer, .modal, .cookie-consent { display: none !important; }
}


/* ===========================================================================
   06 SITE CHROME — fixed desktop nav, fixed mobile action bar, footer legal
   =========================================================================== */
:root { --upt-gold: #c9a227; --upt-ink: #070b20; }

/* --- desktop nav ---------------------------------------------------------- */
.uptNav {
  display: flex;
  align-items: center;
  gap: calc(var(--scale-px) * 26);
  min-height: calc(var(--scale-px) * 112);
}

.uptNav__logo { flex: 0 0 auto; display: flex; align-items: center; color: inherit; }
.uptNav__logo .icon { display: block; }

.uptNav__links {
  display: flex;
  align-items: center;
  gap: calc(var(--scale-px) * 26);
  margin-left: auto;
}

.uptNav__link {
  position: relative;
  color: inherit;
  font-size: calc(var(--scale-px) * 12.5);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: calc(var(--scale-px) * 3);
  transition: opacity .25s ease;
}
.uptNav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width .35s cubic-bezier(.7, 0, .3, 1);
}
.uptNav__link:hover::after,
.uptNav__link.is-current::after { width: 100%; }

.uptNav__actions { display: flex; align-items: center; gap: calc(var(--scale-px) * 16); }

.uptNav__cta {
  padding: calc(var(--scale-px) * 10) calc(var(--scale-px) * 20);
  border: 1px solid currentColor;
  color: inherit;
  font-size: calc(var(--scale-px) * 12);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.uptNav__cta:hover { background: var(--upt-gold); border-color: var(--upt-gold); color: #fff; }

/* the burger only earns its place once the inline links no longer fit */
.uptNav__burger { display: none; color: inherit; }

@media (max-width: 1199px) {
  .uptNav__links { display: none; }
  .uptNav__burger { display: flex; align-items: center; }
}
@media (max-width: 767px) {
  .uptNav { gap: calc(var(--scale-px) * 14); min-height: calc(var(--scale-px) * 84); }
  .uptNav__cta { display: none; }
  .uptNav__logo .icon { width: calc(var(--scale-px) * 128); height: auto; }
}

/* --- fixed mobile action bar ---------------------------------------------- */
.uptBar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  background: #fff;
  border-top: 1px solid rgba(7, 11, 32, .12);
  box-shadow: 0 -2px 18px rgba(7, 11, 32, .1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.uptBar__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px 9px;
  color: var(--upt-ink);
  border-right: 1px solid rgba(7, 11, 32, .1);
  font-size: 10.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}
.uptBar__item:last-child { border-right: 0; }
.uptBar__item svg { width: 21px; height: 21px; }
.uptBar__item--cta { background: var(--upt-gold); color: #fff; }
.uptBar__item--cta:active { background: #b28f1f; }

@media (max-width: 1023px) {
  .uptBar { display: flex; }
  /* keep the last section clear of the bar */
  .footer { padding-bottom: 72px; }
}



/* ===========================================================================
   07 ENQUIRY POPUP — the template ships this as a full-height left drawer.
   It animates with clip-path on .modal__animation, so that element is left
   alone; the card is centred by the content wrapper instead.
   =========================================================================== */
#callback-modal .modal__background { background: rgba(7, 11, 32, .74); }

#callback-modal .modal__content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--scale-px) * 24) calc(var(--scale-px) * 18);
}

/* the side variant pins the card left with margin:0 auto 0 0 - centre it */
#callback-modal.modal--side--left .modal__content {
  margin: 0 auto;
  max-width: min(92vw, calc(var(--scale-px) * 460));
  padding-left: calc(var(--scale-px) * 34);
  padding-right: calc(var(--scale-px) * 34);
  border-top: 3px solid var(--upt-gold);
  box-shadow: 0 calc(var(--scale-px) * 26) calc(var(--scale-px) * 70) rgba(0, 0, 0, .45);
}
/* that variant also draws a notched pseudo-element sized for a full-height
   drawer; a centred card wants a plain panel */
#callback-modal.modal--side--left .modal__content::before { clip-path: none; }

/* The title carries .leading-trim, whose optical trimming IS its ::after
   (height:0; overflow:hidden). Overriding that pseudo-element to draw a rule
   destroyed the trim, so the rule is painted as a background instead - no
   pseudo-element, no positioning, nothing of the template's to clobber. */
#callback-modal .callback-modal__title {
  padding-bottom: calc(var(--scale-px) * 18);
  background-image: linear-gradient(var(--upt-gold), var(--upt-gold));
  background-repeat: no-repeat;
  background-size: calc(var(--scale-px) * 46) 2px;
  background-position: left bottom;
}

#callback-modal .modal__close { background: var(--upt-gold); border-color: var(--upt-gold); }
#callback-modal .modal__close:hover { background: var(--upt-ink); border-color: var(--upt-ink); }

#callback-modal button[type=submit],
#callback-modal .btn--primary { background: var(--upt-gold); border-color: var(--upt-gold); color: #fff; }
#callback-modal button[type=submit]:hover,
#callback-modal .btn--primary:hover { background: var(--upt-ink); border-color: var(--upt-ink); }

@media (max-width: 767px) {
  #callback-modal .modal__content-wrapper { align-items: flex-end; padding: 0; }
  #callback-modal.modal--side--left .modal__content {
    max-width: 100%;
    width: 100%;
    padding-bottom: 88px;
    padding-left: calc(var(--scale-px) * 22);
    padding-right: calc(var(--scale-px) * 22);
  }
}

/* The drawer layout sized itself to the viewport: a full-height flex column,
   an absolutely-placed title and a 34.5svh top pad on the form. A centred card
   wants ordinary flow instead. */
/* the drawer sized its panel to the viewport; a card sizes to its content */
#callback-modal.modal--side--left .modal__content { min-height: 0; }

#callback-modal .callback-modal__container {
  min-height: 0;
  padding-top: calc(var(--scale-px) * 34);
  padding-bottom: calc(var(--scale-px) * 30);
}
#callback-modal .callback-modal__title {
  position: static;
  left: auto;
  top: auto;
  max-width: 100%;
  margin-bottom: calc(var(--scale-px) * 26);
}
#callback-modal .callback-modal__form { flex: 0 1 auto; padding-top: 0; justify-content: flex-start; }
#callback-modal .callback-modal__fields { margin-bottom: calc(var(--scale-px) * 20); }
#callback-modal .callback-modal__wrapper { max-width: 100%; }
#callback-modal .callback-modal__message { padding-top: 0; padding-right: 0; }

/* the RERA note sits under the legal strip rather than fighting it for columns */

/* two fact columns left (Developer and Sales), so let them breathe */
.developer .dev__fact { max-width: 34ch; }


/* ===========================================================================
   08 BRAND MARK — the GreeNest logo ships on its own dark plate, so it is
   placed as an image rather than a currentColor icon.
   =========================================================================== */
.uptNav__mark {
  display: block;
  width: auto;
  /* the mark is a stacked lockup with a tagline; below ~52px the tagline
     stops being legible and just reads as noise */
  height: calc(var(--scale-px) * 92);
}
.uptLegal__mark { display: block; width: auto; height: calc(var(--scale-px) * 44); }

/* the remaining marks: preloader plate, menu header, orientation message */
.uptMark { display: block; width: auto; height: calc(var(--scale-px) * 46); }
.turn-message__logo .uptMark { height: calc(var(--scale-px) * 72); margin-inline: auto; }
.header__logo .uptMark { height: calc(var(--scale-px) * 44); }

/* the old rule sized the preloader wordmark by width; the mark is near-square */

@media (max-width: 767px) {
  .uptNav__mark { height: calc(var(--scale-px) * 68); }
  }

/* The template blends the landing header with mix-blend-mode:difference so a
   monochrome wordmark inverts itself against whatever scrolls under it. The
   GreeNest mark is full-colour, and difference turns its gold blue, so the
   blend is switched off. The themed plugin still swaps ui-dark / ui-light on
   the header, which is what actually keeps the nav text readable. */
.header--landing:not(.ui-header-solid) { mix-blend-mode: normal; }

/* the mark sits on its own dark plate, so give it a little breathing room
   rather than letting it touch the viewport edge */
.uptNav__logo { display: flex; align-items: center; }

/* With the blend off, the header at the top of the page was white text on a
   transparent bar over a light hero. A solid bar is what a fixed nav wants
   anyway, and it lets the logo plate sit flush against it. */
/* .header__background is transform-slid out of view until the header collapses,
   so the colour goes on the header element itself. */
.header--landing { background: var(--upt-ink); }
.header--landing .uptNav__link,
.header--landing .uptNav__cta { color: #fff; }
.header--landing .uptNav__cta:hover { background: var(--upt-gold); border-color: var(--upt-gold); color: #fff; }
.header--landing .header__burger,
.header--landing .header__burger::before,
.header--landing .header__burger::after { background: #fff; }


/* ===========================================================================
   09 POPUP — DARK CARD
   The modal is marked ui-light, which paints it white. These rules repaint it
   on the project's near-black and speed the open/close, which the template
   runs at a full second.
   =========================================================================== */

/* --- faster in and out --------------------------------------------------- */
#callback-modal.modal__animation,
#callback-modal .modal__animation,
#callback-modal .modal__background,
#callback-modal .modal__content::before {
  transition-duration: .32s !important;
  transition-delay: 0s !important;
}
#callback-modal .modal__content,
#callback-modal .modal__close { transition-duration: .32s; }

/* --- the panel ------------------------------------------------------------ */
#callback-modal .modal__content { color: #fff; }
#callback-modal.modal--side--left .modal__content,
#callback-modal .modal__content::before { background: #0b0d14; }

#callback-modal .callback-modal__title { color: #fff; }

/* --- fields --------------------------------------------------------------- */
#callback-modal .form-control--input {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .22);
}
#callback-modal .form-control { color: #fff; }
/* the consent rows are .form-control too, but they are not boxes */
#callback-modal .form-control-checkbox { background: transparent; border-color: transparent; }
#callback-modal .form-control:focus-within { border-color: var(--upt-gold); }
#callback-modal .form-control input,
#callback-modal .form-control input:focus {
  background: transparent;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
#callback-modal .form-label { color: rgba(255, 255, 255, .55); }
/* .form-control--float hides the placeholder so the floating label reads alone.
   -webkit-text-fill-color on the input beats the placeholder colour, so it has
   to be reset here too or the placeholder shows through the label. */
#callback-modal .form-control--float input::placeholder {
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Chrome paints autofilled inputs a solid pale yellow; keep them on-theme */
#callback-modal input:-webkit-autofill,
#callback-modal input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  box-shadow: 0 0 0 1000px #14161f inset;
}

/* --- consent rows and small print ----------------------------------------- */
#callback-modal .form-group,
#callback-modal label,
#callback-modal .text-small { color: rgba(255, 255, 255, .68); }
#callback-modal a { color: var(--upt-gold); }
#callback-modal a:hover { color: #fff; }

/* checkbox squares read as invisible outlines on black otherwise */
#callback-modal input[type=checkbox] + *,
#callback-modal .form-control--checkbox { border-color: rgba(255, 255, 255, .4); }

/* --- the success state ---------------------------------------------------- */
#callback-modal .js-form-success,
#callback-modal .callback-modal__message { color: #fff; }

/* the bitten-corner button paints its fill through ::after, so the element's
   own background never shows */
#callback-modal .btn--bitten-corner::after { background: var(--upt-gold); }
#callback-modal .btn--bitten-corner .btn__text { color: #fff; position: relative; z-index: 1; }


/* ===========================================================================
   10 POPUP MOTION
   The drawer animated its panel with a clip-path sized for a full-height
   sheet. Section 07 turned that clip off to get a centred card, which left
   the panel with nothing to animate: on close it stayed fully opaque until
   the plugin set is-hidden about two seconds later, which is the black space
   that lingers. The card now fades and lifts on its own.
   =========================================================================== */
/* Visible by default: the modal can also be opened straight from a hash,
   which never adds the animation classes, and an opacity:0 default would
   leave the card invisible over a dimmed page. */
#callback-modal .modal__content {
  opacity: 1;
  transform: none;
  transition: opacity .42s cubic-bezier(.2, .7, .3, 1),
              transform .42s cubic-bezier(.2, .7, .3, 1);
}
#callback-modal.animation--modal-in .modal__content {
  opacity: 0;
  transform: translateY(calc(var(--scale-px) * 18)) scale(.985);
}
#callback-modal.animation--modal-in--active .modal__content {
  opacity: 1;
  transform: none;
}
#callback-modal.animation--modal-out--active .modal__content,
#callback-modal.modal--animating-out .modal__content {
  opacity: 0;
  transform: translateY(calc(var(--scale-px) * 10)) scale(.99);
  transition-duration: .22s;
}

/* the plugin keeps the modal displayed for ~2s after the visuals are done;
   stop it swallowing clicks in that window */
#callback-modal.modal--animating-out { pointer-events: none; }

/* backdrop matches the card's timing in both directions */
#callback-modal .modal__background { transition-duration: .42s !important; transition-delay: 0s !important; }
#callback-modal.modal--animating-out .modal__background { transition-duration: .22s !important; }


/* ===========================================================================
   11 MENU PANEL — icons, rules and touch-sized rows
   =========================================================================== */
.menu__links-lead li { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.menu__links-lead li:first-child { border-top: 1px solid rgba(255, 255, 255, .14); }

.menu__links-lead .btn--text-lead {
  display: block;
  width: 100%;
  padding: calc(var(--scale-px) * 13) 0;
  transition: padding-left .3s cubic-bezier(.7, 0, .3, 1), color .3s ease;
}
.menu__links-lead .btn--text-lead .btn__content {
  display: flex;
  align-items: center;
  gap: calc(var(--scale-px) * 16);
}
.menu__links-lead .btn--text-lead:hover { padding-left: calc(var(--scale-px) * 8); }

.uptMenu__icon {
  flex: 0 0 auto;
  display: block;
  width: calc(var(--scale-px) * 24);
  height: calc(var(--scale-px) * 24);
  opacity: .55;
  transition: opacity .3s ease, color .3s ease;
}
.uptMenu__icon svg { display: block; width: 100%; height: 100%; }
.menu__links-lead .btn--text-lead:hover .uptMenu__icon { opacity: 1; color: var(--upt-gold); }

@media (max-width: 767px) {
  .menu__links-lead .btn--text-lead { padding: calc(var(--scale-px) * 15) 0; }
  .uptMenu__icon { width: calc(var(--scale-px) * 22); height: calc(var(--scale-px) * 22); }
  /* the menu sits above the fixed action bar */
  .menu .modal__content { padding-bottom: 84px; }
}

/* menu panel is light, and the keyed mark has white lettering, so give it back
   the dark plate it was designed on */
.menu .uptMark,
.menu .header__logo .uptMark {
  background: #2e3235;
  padding: calc(var(--scale-px) * 7) calc(var(--scale-px) * 10);
  box-sizing: content-box;
}

/* the template spaces these rows for six items; twelve need a tighter rhythm */
.menu__links-lead .btn--text-lead { padding: calc(var(--scale-px) * 9) 0; }
.menu__links-lead li { line-height: 1.1; }
@media (max-width: 767px) {
  .menu__links-lead .btn--text-lead { padding: calc(var(--scale-px) * 10) 0; }
}


/* ===========================================================================
   12 GALLERY — wide image strip with a counter and round buttons, matching
   the template's infrastructure slider.
   =========================================================================== */
.galStrip__head { padding-top: calc(var(--scale-px) * 120); padding-bottom: calc(var(--scale-px) * 46); }

.galStrip { position: relative; padding-bottom: calc(var(--scale-px) * 90); }
.galStrip__viewport { overflow: hidden; }
.galStrip__track { display: flex; gap: 0; }

.galStrip__slide {
  flex: 0 0 100%;
  margin: 0;
  min-width: 0;
}
.galStrip__slide img {
  display: block;
  width: 100%;
  height: clamp(240px, 46vw, 560px);
  object-fit: cover;
}

/* the nav plate overlaps the strip's bottom-right corner, as in the template */
.galStrip__nav {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: calc(var(--scale-px) * 26);
  padding: calc(var(--scale-px) * 18) calc(var(--scale-px) * 22);
}

.galStrip__counter {
  display: flex;
  align-items: center;
  gap: calc(var(--scale-px) * 9);
  margin: 0;
  font-variant-numeric: lining-nums tabular-nums;
  text-transform: none;
}
.galStrip__counter svg { display: block; }

.galStrip__buttons { display: flex; gap: calc(var(--scale-px) * 8); }
.galStrip__buttons .btn--square:disabled { opacity: .35; cursor: default; }

@media (max-width: 767px) {
  .galStrip__head { padding-top: calc(var(--scale-px) * 90); padding-bottom: calc(var(--scale-px) * 30); }
  .galStrip { padding-bottom: calc(var(--scale-px) * 74); }
  .galStrip__slide img { height: clamp(220px, 62vw, 360px); }
  .galStrip__nav { gap: calc(var(--scale-px) * 16); padding: calc(var(--scale-px) * 14) calc(var(--scale-px) * 16); }
}

/* ===========================================================================
   13 FOOTER STRIP — logo, legal links and the fine print on one aligned row
   =========================================================================== */
.uptFoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--scale-px) * 20) calc(var(--scale-px) * 34);
  margin-top: calc(var(--scale-px) * 34);
  padding-top: calc(var(--scale-px) * 26);
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.uptFoot__logo { flex: 0 0 auto; display: block; }
.uptFoot__mark { display: block; width: auto; height: calc(var(--scale-px) * 60); }

.uptFoot__links {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--scale-px) * 10) calc(var(--scale-px) * 26);
}
.uptFoot__links a {
  color: inherit;
  font-size: calc(var(--scale-px) * 12.5);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: .78;
  transition: opacity .25s ease, color .25s ease;
}
.uptFoot__links a:hover { opacity: 1; color: var(--upt-gold); }

.uptFoot__meta {
  margin-left: auto;
  text-align: right;
  display: grid;
  gap: calc(var(--scale-px) * 4);
}
.uptFoot__meta p {
  margin: 0;
  font-size: calc(var(--scale-px) * 12);
  line-height: 1.5;
  opacity: .6;
  text-transform: none;
}
.uptFoot__meta a { color: var(--upt-gold); text-decoration: underline; text-underline-offset: 2px; }
.uptFoot__meta a:hover { color: #fff; }

@media (max-width: 1023px) {
  .uptFoot { justify-content: flex-start; }
  .uptFoot__meta { margin-left: 0; text-align: left; width: 100%; }
}
@media (max-width: 767px) {
  .uptFoot { gap: calc(var(--scale-px) * 16); }
  .uptFoot__mark { height: calc(var(--scale-px) * 52); }
}


/* ===========================================================================
   14 CONTACT — four ways to reach the sales team, then the two CTAs
   =========================================================================== */
.contact > .px-layout {
  padding-top: calc(var(--scale-px) * 150);
  padding-bottom: calc(var(--scale-px) * 120);
}
.ct__grid { margin-top: calc(var(--scale-px) * 55); }

.ct {
  height: 100%;
  padding: calc(var(--scale-px) * 26) 0 calc(var(--scale-px) * 28);
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.ct__icon {
  display: block;
  width: calc(var(--scale-px) * 30);
  height: calc(var(--scale-px) * 30);
  margin-bottom: calc(var(--scale-px) * 18);
  opacity: .85;
}
.ct__icon svg { display: block; width: 100%; height: 100%; }

.ct__label {
  margin: 0 0 calc(var(--scale-px) * 9);
  opacity: .55;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.ct__value { margin: 0; text-transform: none; line-height: 1.45; }
.ct__value a { color: inherit; transition: color .25s ease; }
.ct__value a:hover { color: var(--upt-gold); }

.ct__cta { margin-top: calc(var(--scale-px) * 46); }
.ct__buttons { display: flex; flex-wrap: wrap; gap: calc(var(--scale-px) * 14); }

@media (max-width: 767px) {
  .contact > .px-layout {
    padding-top: calc(var(--scale-px) * 100);
    padding-bottom: calc(var(--scale-px) * 80);
  }
  .ct__grid { margin-top: calc(var(--scale-px) * 30); }
  .ct { padding: calc(var(--scale-px) * 20) 0 calc(var(--scale-px) * 22); }
  .ct__buttons .btn { width: 100%; }
}

/* the nav row grew with the logo, but the template sizes the bar itself, so
   the mark was spilling past the navy strip onto the hero */
.header--landing .header__content {
  min-height: calc(var(--scale-px) * 112);
  display: flex;
  align-items: center;
}
.header--landing .header__content > .row,
.header--landing .header__content > .uptNav { width: 100%; flex: 1 1 auto; }
@media (max-width: 767px) {
  .header--landing .header__content { min-height: calc(var(--scale-px) * 84); }
}

/* ===========================================================================
   15  DOCUMENT PAGES - CENTRED COLUMN, JUSTIFIED PROSE
   Terms, Privacy and Disclaimer read as documents rather than as a left
   margin note: the measure is centred in the page and the body copy is
   justified, with headings and small print left-aligned so the hierarchy
   still reads at a glance.
   ========================================================================= */

.doc-page { --doc-measure: 82ch; }

/* the column itself is the measure and is centred in the page, so the
   eyebrow, the headline, the standfirst and the body share one left edge
   without any of them needing a width of its own */
.doc-page .row > .col {
  flex: 0 0 auto;
  width: 100%;
  max-width: calc(var(--doc-measure) + var(--grid-gutter));
  margin-left: auto;
  margin-right: auto;
}

.doc,
.doc__lede { max-width: none; margin-left: 0; margin-right: 0; }

.doc p,
.doc li {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* justification only helps a full measure - short lines gap badly */
.doc h2,
.doc h3,
.doc h4,
.doc__meta,
.doc__term p,
.doc figcaption,
.doc td,
.doc th {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

.doc__term p { text-align: justify; }

@media (max-width: 767px) {
  /* a narrow measure justifies into rivers - let it run ragged */
  .doc p,
  .doc li,
  .doc__term p { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
}


/* ===========================================================================
   16  CONTACT SECTION - DETAILS AND ENQUIRY FORM
   Closes the page above the footer: how to reach the sales team on the left,
   a working enquiry form on the right. The form is name="contact", so the
   project's lead handler validates and posts it exactly like the modal.
   ========================================================================= */

.contact-sec { padding-bottom: calc(var(--scale-px) * 120); }
.contact-sec .ctf__head { margin-bottom: calc(var(--scale-px) * 56); }
.contact-sec .ctf { align-items: flex-start; }

/* ------------------------------------------------------- the details list */
.ctf__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.ctf__row {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--scale-px) * 18);
  padding: calc(var(--scale-px) * 22) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.ctf__icon {
  flex: 0 0 auto;
  width: calc(var(--scale-px) * 30);
  height: calc(var(--scale-px) * 30);
  margin-top: calc(var(--scale-px) * 2);
  opacity: .85;
}

.ctf__icon svg { width: 100%; height: 100%; display: block; }

.ctf__rowText { display: block; min-width: 0; }

.ctf__label {
  display: block;
  margin-bottom: calc(var(--scale-px) * 6);
  opacity: .55;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ctf__value {
  display: block;
  font-size: calc(var(--scale-px) * 18);
  line-height: 1.5;
  text-transform: none;
}

a.ctf__value { text-decoration: none; transition: color .22s ease; }

/* the template fades any hovered anchor to 60%; on this dark panel that
   reads as the line going out, so it goes gold instead */
.contact-sec a.ctf__value:hover,
.contact-sec a.ctf__value:focus-visible { color: var(--upt-gold); opacity: 1; }

/* ------------------------------------------------------------- the card */
.ctf__card {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: calc(var(--scale-px) * 4);
  padding: calc(var(--scale-px) * 42) calc(var(--scale-px) * 40);
}

.ctf__card--done { display: flex; align-items: center; min-height: calc(var(--scale-px) * 300); }
.ctf__card--done.is-hidden { display: none; }

.ctf__formTitle {
  margin: 0 0 calc(var(--scale-px) * 30);
  font-size: calc(var(--scale-px) * 30);
}

.ctf__form .form-group { margin-bottom: calc(var(--scale-px) * 18); }

/* the float label needs the placeholder invisible, same as in the modal */
.ctf__form .form-control--float input::placeholder {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------- interest chips */
.ctf__chips { margin: calc(var(--scale-px) * 26) 0 calc(var(--scale-px) * 24); }

.ctf__chipsLabel {
  display: block;
  margin-bottom: calc(var(--scale-px) * 12);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ctf__chipRow { display: flex; flex-wrap: wrap; gap: calc(var(--scale-px) * 10); }

.ctf__chip { position: relative; display: inline-flex; cursor: pointer; }
.ctf__chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.ctf__chipText {
  display: inline-flex;
  align-items: center;
  padding: calc(var(--scale-px) * 11) calc(var(--scale-px) * 20);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: calc(var(--scale-px) * 100);
  font-size: calc(var(--scale-px) * 14);
  line-height: 1;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.ctf__chip:hover .ctf__chipText { border-color: rgba(255, 255, 255, .5); }

.ctf__chip input:checked ~ .ctf__chipText {
  background: #fff;
  border-color: #fff;
  color: var(--upt-ink, #070b20);
}

.ctf__chip input:focus-visible ~ .ctf__chipText { outline: 2px solid #fff; outline-offset: 2px; }

/* ------------------------------------------------------ consent + footer */
.ctf__consent { margin-bottom: calc(var(--scale-px) * 26) !important; }
.ctf__consent .form-control-checkbox__label-text { opacity: .62; line-height: 1.6; }
.ctf__consent a { text-decoration: underline; text-underline-offset: 2px; }

.ctf__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--scale-px) * 18);
}

.ctf__note { margin: 0; opacity: .5; }

.ctf__submit[disabled] { pointer-events: none; }

/* ----------------------------------------------------------------- phones */
@media (max-width: 767px) {
  .contact-sec { padding-bottom: calc(var(--scale-px) * 80); }
  .contact-sec .ctf__head { margin-bottom: calc(var(--scale-px) * 34); }
  .contact-sec .ctf > .col--md-6 { margin-top: calc(var(--scale-px) * 40); }

  .ctf__row { padding: calc(var(--scale-px) * 18) 0; gap: calc(var(--scale-px) * 14); }
  .ctf__value { font-size: calc(var(--scale-px) * 16); }

  .ctf__card {
    padding: calc(var(--scale-px) * 28) calc(var(--scale-px) * 22);
    border-radius: calc(var(--scale-px) * 3);
  }
  .ctf__formTitle { font-size: calc(var(--scale-px) * 24); margin-bottom: calc(var(--scale-px) * 22); }
  .ctf__chipText { padding: calc(var(--scale-px) * 10) calc(var(--scale-px) * 16); }
  .ctf__footer { gap: calc(var(--scale-px) * 12); }
  .ctf__submit { width: 100%; }
}

/* the box belongs beside the first line of the consent, not halfway down it */
.ctf__consent .form-control-checkbox { align-items: flex-start; }
.ctf__consent .form-control-checkbox__icon { margin-top: calc(var(--scale-px) * 2); }

/* three chips on one row at phone widths rather than an orphan on a second */
@media (max-width: 420px) {
  .ctf__chipRow { gap: calc(var(--scale-px) * 7); }
  .ctf__chipText {
    padding: calc(var(--scale-px) * 10) calc(var(--scale-px) * 12);
    font-size: calc(var(--scale-px) * 13);
  }
}

/* ===========================================================================
   17  HEADER NAV HOVER
   The template's global rule fades any anchor to 60% on hover
   (.has-hover a:hover { color: rgba(var(--t-primary-rgb), .6) }), so on the
   navy bar the item under the cursor dimmed almost to nothing - it read as
   the link disappearing. Inverted here: the bar rests slightly muted and the
   hovered item comes up to full white with a gold rule sliding in under it.
   ========================================================================= */

.uptNav .uptNav__link {
  color: rgba(255, 255, 255, .74);
  transition: color .25s ease;
}

.uptNav .uptNav__link:hover,
.uptNav .uptNav__link:focus-visible,
.uptNav .uptNav__link.is-current {
  color: #fff;
  opacity: 1;
}

.uptNav .uptNav__link::after { background: var(--upt-gold); height: 2px; }

.uptNav .uptNav__link:focus-visible::after { width: 100%; }
.uptNav .uptNav__link:focus-visible { outline: none; }

/* the enquire button must not fade either - it inverts to gold instead */
.uptNav .uptNav__cta:hover,
.uptNav .uptNav__cta:focus-visible {
  color: #fff;
  background: var(--upt-gold);
  border-color: var(--upt-gold);
}

.uptNav .uptNav__logo:hover,
.uptNav .uptNav__burger:hover { color: #fff; opacity: 1; }

/* ===========================================================================
   18  LOCATION - MAP AND CONNECTIVITY
   One section carrying a live map of the actual site next to the things
   people ask about before they visit.
   ========================================================================= */

.loc .loc__head { margin-bottom: calc(var(--scale-px) * 52); }
.loc .loc__grid { align-items: flex-start; }

.loc__mapWrap {
  margin: 0;
  border: 1px solid rgba(7, 11, 32, .14);
  border-radius: calc(var(--scale-px) * 4);
  overflow: hidden;
  background: rgba(7, 11, 32, .04);
}

.loc__map {
  display: block;
  width: 100%;
  height: calc(var(--scale-px) * 420);
  border: 0;
  /* the stock Google tiles run warm; this settles them into the page */
  filter: saturate(.86) contrast(1.02);
}

.loc__mapFoot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--scale-px) * 10);
  padding: calc(var(--scale-px) * 16) calc(var(--scale-px) * 20);
  border-top: 1px solid rgba(7, 11, 32, .12);
  background: #fff;
}

.loc__address { text-transform: none; opacity: .72; }
.loc__mapLink { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.loc a.loc__mapLink:hover { color: var(--upt-gold); opacity: 1; }

/* ------------------------------------------------ the three headline facts */
.loc__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--scale-px) * 14);
  margin-top: calc(var(--scale-px) * 22);
}

.loc__fact {
  padding: calc(var(--scale-px) * 20) calc(var(--scale-px) * 18);
  border: 1px solid rgba(7, 11, 32, .12);
  border-radius: calc(var(--scale-px) * 3);
}

.loc__factValue {
  display: block;
  font-size: calc(var(--scale-px) * 26);
  line-height: 1.1;
  margin-bottom: calc(var(--scale-px) * 6);
}

.loc__factLabel { display: block; text-transform: none; opacity: .6; }

/* --------------------------------------------------- the connectivity list */
.loc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(7, 11, 32, .12);
}

.loc__item {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--scale-px) * 16);
  padding: calc(var(--scale-px) * 20) 0;
  border-bottom: 1px solid rgba(7, 11, 32, .12);
}

.loc__icon {
  flex: 0 0 auto;
  width: calc(var(--scale-px) * 28);
  height: calc(var(--scale-px) * 28);
  margin-top: calc(var(--scale-px) * 2);
  opacity: .7;
}
.loc__icon svg { width: 100%; height: 100%; display: block; }

.loc__body { display: block; min-width: 0; }
.loc__title { display: block; margin-bottom: calc(var(--scale-px) * 5); text-transform: none; }
.loc__note { display: block; text-transform: none; line-height: 1.6; }

.loc__cta { margin-top: calc(var(--scale-px) * 34); }

@media (max-width: 767px) {
  .loc .loc__head { margin-bottom: calc(var(--scale-px) * 30); }
  .loc__map { height: calc(var(--scale-px) * 300); }
  .loc__facts { grid-template-columns: 1fr; gap: calc(var(--scale-px) * 10); }
  .loc__fact { padding: calc(var(--scale-px) * 16); }
  .loc .loc__grid > .col--md-5 { margin-top: calc(var(--scale-px) * 34); }
  .loc__mapFoot { padding: calc(var(--scale-px) * 14) calc(var(--scale-px) * 16); }
}


/* ===========================================================================
   19  CONFIGURATION DROPDOWN
   Replaces the interest chips in both forms. A native <select> on purpose:
   it is the control a phone already knows how to scroll.
   ========================================================================= */

.uptSel__group { margin-bottom: calc(var(--scale-px) * 18); }

.uptSel__label {
  display: block;
  margin-bottom: calc(var(--scale-px) * 9);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.uptSel { position: relative; display: block; }

.uptSel select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: calc(var(--scale-px) * 17) calc(var(--scale-px) * 44) calc(var(--scale-px) * 17) calc(var(--scale-px) * 18);
  border: 1px solid rgba(7, 11, 32, .28);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: calc(var(--scale-px) * 15);
  line-height: 1.2;
  text-transform: none;
  cursor: pointer;
}

.uptSel select:focus { outline: none; border-color: var(--upt-gold); }

/* the closed control inherits the panel's colour, but the open list is painted
   by the OS - without explicit colours the options render white on white */
.uptSel select option { background: #fff; color: #070b20; }

.uptSel__chevron {
  position: absolute;
  top: 50%;
  right: calc(var(--scale-px) * 18);
  width: calc(var(--scale-px) * 12);
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .6;
}
.uptSel__chevron svg { display: block; width: 100%; height: auto; }

/* on dark panels the border reads as a hairline rather than a box */
.contact-sec .uptSel select,
#callback-modal .uptSel select {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .04);
  color: #fff;
}
.contact-sec .uptSel select:focus,
#callback-modal .uptSel select:focus { border-color: var(--upt-gold); }
#callback-modal .uptSel__label { color: rgba(255, 255, 255, .55); }


/* ===========================================================================
   20  POPUP - CENTRED ON EVERY SCREEN, AND DRESSED UP
   The card was pinned to the bottom edge on phones (align-items: flex-end),
   which is what made it read as "not in the centre". It is centred here and
   given the same panel treatment at every width.
   ========================================================================= */

#callback-modal .modal__content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

#callback-modal.modal--side--left .modal__content {
  border-top: 3px solid var(--upt-gold);
  border-radius: calc(var(--scale-px) * 5);
  box-shadow:
    0 calc(var(--scale-px) * 30) calc(var(--scale-px) * 80) rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 255, 255, .07) inset;
  /* a faint lift from the top edge so the gold rule reads as a header band */
  background-image: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) calc(var(--scale-px) * 150));
}

#callback-modal .callback-modal__title { font-size: calc(var(--scale-px) * 30); }

/* a line of reassurance under the title, drawn from the form itself */
#callback-modal .callback-modal__fields { margin-bottom: calc(var(--scale-px) * 22); }

#callback-modal .form-control--input {
  border-radius: calc(var(--scale-px) * 3);
  transition: border-color .2s ease, background .2s ease;
}
#callback-modal .form-control--input:focus-within { background: rgba(255, 255, 255, .07); }

#callback-modal button[type=submit] { width: 100%; }
#callback-modal .form-footer { width: 100%; }

/* phones: still centred, just tighter */
@media (max-width: 767px) {
  #callback-modal .modal__content-wrapper {
    align-items: center;
    padding: calc(var(--scale-px) * 20) calc(var(--scale-px) * 16);
  }
  #callback-modal.modal--side--left .modal__content {
    max-width: 100%;
    width: 100%;
    padding-bottom: calc(var(--scale-px) * 30);
    padding-left: calc(var(--scale-px) * 22);
    padding-right: calc(var(--scale-px) * 22);
  }
  #callback-modal .callback-modal__title { font-size: calc(var(--scale-px) * 25); }
}

/* short screens: let the card scroll rather than overflow off the top */
@media (max-height: 720px) {
  #callback-modal .modal__content-wrapper { align-items: flex-start; }
}


/* ===========================================================================
   21  MOBILE CHROME - HEADER, MENU PANEL, ACTION BAR
   ========================================================================= */

/* --- the fixed action bar goes black, to sit with the header -------------- */
.uptBar {
  background: var(--upt-ink);
  border-top: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 -2px 18px rgba(0, 0, 0, .45);
}

.uptBar__item {
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, .14);
}
.uptBar__item:last-child { border-right: 0; }
.uptBar__item--cta { background: var(--upt-gold); color: #fff; }
.uptBar__item--cta:active { background: #b28f1f; }
.uptBar__item:not(.uptBar__item--cta):active { background: rgba(255, 255, 255, .08); }

/* --- phone header: menu button left, logo right --------------------------- */
@media (max-width: 1199px) {
  /* the burger sits inside .uptNav__actions in the markup; display:contents
     lifts both controls into the bar's own flex row so they can be ordered
     independently, without changing the DOM order the screen reader follows */
  .uptNav__actions { display: contents; }

  .uptNav { justify-content: space-between; gap: calc(var(--scale-px) * 12); }

  .uptNav__burger { order: 1; margin-right: auto; display: flex; align-items: center; }
  .uptNav__logo   { order: 2; }
  .uptNav__cta    { order: 3; margin-left: calc(var(--scale-px) * 16); }
}

@media (max-width: 767px) {
  .uptNav { min-height: calc(var(--scale-px) * 92); }
  .uptNav__mark { height: calc(var(--scale-px) * 76); }
  .uptNav__burger .header__burger { transform: scale(1.15); transform-origin: left center; }
}

/* --- the side menu panel -------------------------------------------------- */
@media (max-width: 767px) {
  /* close on the left, logo on the right: the same axis as the header it
     replaces, so the eye does not have to re-find either control */
  .header--modal .header__content > .row { align-items: center; }
  .header--modal .header__close-col { order: 1; }
  /* the logo column is a fixed-width grid cell, so pushing the cell is not
     enough - the mark has to be pushed inside it as well */
  .header--modal .header__close-col + .col {
    order: 2;
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
  }
  .header--modal .header__logo { display: flex; justify-content: flex-end; }
  .header--modal .group--right { order: 3; }

  /* the transparent mark was sitting on a dark plate that read as a stray
     box on the light panel - the mark carries its own contrast instead */
  .header--modal .uptMark { height: calc(var(--scale-px) * 62); background: none; padding: 0; }

  .menu__links-lead > li > .btn { padding-top: 14px; padding-bottom: 14px; }
}


/* ===========================================================================
   22  FLOOR PLANS OPEN THE ENQUIRY
   Each plan is a way in to the sheet, so it has to look like one.
   ========================================================================= */

.ps__slide--enquire { cursor: pointer; position: relative; }
.ps__slide--enquire .ps__media { display: block; overflow: hidden; }
.ps__slide--enquire img { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.ps__slide--enquire:hover img { transform: scale(1.03); }

.ps__slide--enquire::after {
  content: "Enquire";
  position: absolute;
  right: calc(var(--scale-px) * 14);
  bottom: calc(var(--scale-px) * 14);
  padding: calc(var(--scale-px) * 9) calc(var(--scale-px) * 16);
  background: var(--upt-gold);
  color: #fff;
  font-size: calc(var(--scale-px) * 11);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(calc(var(--scale-px) * 6));
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}

.ps__slide--enquire:hover::after,
.ps__slide--enquire:focus-visible::after { opacity: 1; transform: none; }
.ps__slide--enquire:focus-visible { outline: 2px solid var(--upt-gold); outline-offset: 3px; }

/* a touch screen has no hover, so the cue is simply always on */
@media (hover: none) {
  .ps__slide--enquire::after { opacity: 1; transform: none; }
}

/* the select follows the last text field directly; without this the label
   collides with the box above it */
#callback-modal .uptSel__group { margin-top: calc(var(--scale-px) * 20); }
#callback-modal .form-agreement { margin-top: calc(var(--scale-px) * 22); }

/* ===========================================================================
   23  MENU PANEL HEADER
   The panel is light and the keyed mark has white lettering, so the mark was
   given a dark plate - which read as a stray box floating on white. The band
   itself goes dark instead: the mark then sits on the same navy it was drawn
   for, and the bar matches the site header the menu replaces.
   ========================================================================= */

.menu .header--modal {
  background: var(--upt-ink);
  position: relative;
  z-index: 3;
}

.menu .header--modal .header__content {
  min-height: calc(var(--scale-px) * 92);
  display: flex;
  align-items: center;
  padding-top: calc(var(--scale-px) * 8);
  padding-bottom: calc(var(--scale-px) * 8);
}
.menu .header--modal .header__content > .row { width: 100%; }

/* every control in the band is now on navy */
.menu .header--modal .header__close,
.menu .header--modal .header__close .btn__icon,
.menu .header--modal .btn--link,
.menu .header--modal .btn__text { color: #fff; }

.menu .header--modal .btn--link:hover .btn__text { color: var(--upt-gold); }

/* the plate has nothing left to do */
.menu .uptMark,
.menu .header__logo .uptMark {
  background: none;
  padding: 0;
  height: calc(var(--scale-px) * 66);
}

/* the panel's own background image was reaching the last menu row */
.menu .menu-background { z-index: 0; }
.menu .menu__links { position: relative; z-index: 1; }

/* the fixed action bar overlaps the end of the menu list */
@media (max-width: 1023px) {
  .menu .menu__links { padding-bottom: 96px; }
}

/* ===========================================================================
   24  HERO - THE BUILDING'S TOP EDGE
   .intro__building is an absolutely-placed panel that rides up over the sky
   backdrop as the hero is scrolled. Its source is a rectangular render whose
   own top band is sky, so its top edge landed on the backdrop as a hard line
   across the page - two skies meeting at slightly different blues.

   Both layers are object-fit: cover, so which pixels meet at that edge moves
   with the viewport; no amount of colour-matching the files holds at every
   window size. The edge itself is dissolved instead, which is correct at any
   size and for both the day and the lit render.
   ========================================================================= */

.intro__building {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(80px, 13vh, 190px));
  mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(80px, 13vh, 190px));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* ===========================================================================
   25  BANNER — HEADER, THEN THE IMAGE
   The banner was a four-viewport scroll sequence: the building panel sat a
   screen below the fold at rest and rose as you scrolled, so the first thing
   on the page was two thirds of empty sky (78% of it on a phone). The panel's
   parallax pattern is gone from the markup, so it now sits where its own CSS
   puts it — filling the banner directly under the header — and the scroll
   spacer below is shortened to match, since there is no longer a long
   sequence to play out.
   ========================================================================= */

.intro__building {
  /* bottom-anchored and taller than the frame, so the image fills the banner
     and is cropped from the top rather than floating below it */
  top: 0;
  bottom: auto;
  height: 100%;
  aspect-ratio: auto;
}

.intro__building .intro__building-picture,
.intro__building img { height: 100%; width: 100%; object-fit: cover; }

/* the mask that hid the panel's hard top edge belongs to the old overlap;
   the image now starts at the top of the banner and needs no fade */
.intro__building {
  -webkit-mask-image: none;
  mask-image: none;
}

/* the spacer that gave the sequence its scroll length */
.intro .intro__sticky::after {
  height: var(--md, calc(60svh + var(--sticky-under-next-distance)))
          var(--n-md, calc(30svh + var(--sticky-under-next-distance)));
}


/* ===========================================================================
   26  HEADLINE SCALE
   The template's display sizes were drawn for a six-letter wordmark and two
   or three words of Russian. This project's headlines are full sentences, so
   at 85px they filled the screen and pushed everything below the fold. Scaled
   down across the board; the vendor files are untouched.
   ========================================================================= */

.h2,
h2.h2 { font-size: calc(var(--scale-px) * 40); line-height: 1.06; }

.h2-small,
h2.h2-small { font-size: calc(var(--scale-px) * 31); line-height: 1.1; }

.h3,
.h3-small { font-size: calc(var(--scale-px) * 26); line-height: 1.14; }

/* the section eyebrows keep their size but sit closer to the headline */
.section .text-color-small.mb-1 { margin-bottom: calc(var(--scale-px) * 8); }

@media (max-width: 1023px) {
  .h2, h2.h2 { font-size: calc(var(--scale-px) * 34); }
  .h2-small, h2.h2-small { font-size: calc(var(--scale-px) * 27); }
  .h3, .h3-small { font-size: calc(var(--scale-px) * 23); }
}

@media (max-width: 767px) {
  .h2, h2.h2 { font-size: calc(var(--scale-px) * 29); line-height: 1.1; }
  .h2-small, h2.h2-small { font-size: calc(var(--scale-px) * 24); }
  .h3, .h3-small { font-size: calc(var(--scale-px) * 21); }
}

/* ===========================================================================
   27  SECTION EDGES
   The contact band opened flush against its own top edge — the eyebrow sat on
   the boundary with nothing above it — and the FAQ left a run of empty white
   underneath its last row once the closing line was removed.
   ========================================================================= */

.contact-sec { padding-top: calc(var(--scale-px) * 90); }

.faq { padding-bottom: calc(var(--scale-px) * 40); }

@media (max-width: 767px) {
  .contact-sec { padding-top: calc(var(--scale-px) * 56); }
  .faq { padding-bottom: calc(var(--scale-px) * 24); }
}

/* ===========================================================================
   28  BANNER CROP
   object-fit: cover has to lose something, and centring it meant the loss came
   off the top: 65px of roofline at 1920 wide. The top of a building render is
   the part worth keeping, so the crop is anchored there and the road at the
   bottom is what gives way instead.
   ========================================================================= */

.intro__building img { object-position: center top; }

/* ===========================================================================
   29  MOBILE HEADER — LOGO LEFT, MENU BUTTON RIGHT
   Replaces the ordering in section 21. The vendor burger is two hairlines in
   a bare box, which read as a single stray dash on the navy bar; it is drawn
   here as a bordered button with three even bars so it looks like a control.
   The side menu mirrors it — logo left, close right — so neither the mark nor
   the control moves when the panel opens.
   ========================================================================= */

@media (max-width: 1199px) {
  .uptNav__logo   { order: 1; margin-left: 0; margin-right: auto; }
  .uptNav__cta    { order: 2; margin-left: 0; margin-right: calc(var(--scale-px) * 14); }
  .uptNav__burger { order: 3; margin-right: 0; }

  /* the button */
  .uptNav__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--scale-px) * 48);
    height: calc(var(--scale-px) * 48);
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: calc(var(--scale-px) * 3);
    color: #fff;
    transition: background .22s ease, border-color .22s ease;
  }
  .uptNav__burger:hover,
  .uptNav__burger:focus-visible { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); }
  .uptNav__burger:active { background: var(--upt-gold); border-color: var(--upt-gold); }

  /* Three even bars. The vendor draws two hairlines with ::before/::after and
     no height on the box, so at this size they collapsed into one solid
     block; the icon is painted as three background stripes instead, which
     needs no pseudo-elements and cannot merge. */
  .uptNav__burger .header__burger {
    width: 20px;
    height: 14px;
    gap: 0;
    background-image:
      linear-gradient(currentColor, currentColor),
      linear-gradient(currentColor, currentColor),
      linear-gradient(currentColor, currentColor);
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: left top, left center, left bottom;
    /* something upstream fills this box white; the stripes sit on top of that
       background-color and read as one solid block unless it is cleared */
    background-color: transparent;
    transform: none;
  }
  .uptNav__burger .header__burger::before,
  .uptNav__burger .header__burger::after { display: none; }
}

@media (max-width: 767px) {
  .uptNav__burger {
    width: calc(var(--scale-px) * 46);
    height: calc(var(--scale-px) * 46);
  }
  .uptNav__burger .header__burger { width: calc(var(--scale-px) * 20); }

  /* the panel keeps the same axis: mark on the left, control on the right */
  .header--modal .header__close-col { order: 3; margin-left: auto; }
  .header--modal .header__close-col + .col { order: 1; margin-left: 0; justify-content: flex-start; }
  .header--modal .header__logo { justify-content: flex-start; }
  .header--modal .group--right { order: 2; margin-left: auto; margin-right: calc(var(--scale-px) * 14); }

  .menu .header--modal .header__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--scale-px) * 46);
    height: calc(var(--scale-px) * 46);
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: calc(var(--scale-px) * 3);
  }
  .menu .header--modal .header__close:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); }
}

/* the panel header row is not a flex container at phone widths, so `order`
   was inert and the close button dropped underneath the logo */
@media (max-width: 767px) {
  .menu .header--modal .header__content > .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
  }
  .menu .header--modal .header__close-col {
    order: 3;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin-left: auto;
  }
  .menu .header--modal .header__close-col + .col {
    order: 1;
    flex: 0 1 auto;
    width: auto;
    max-width: none;
  }
  .menu .header--modal .group--right {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin-left: auto;
    margin-right: calc(var(--scale-px) * 16);
  }
}

/* The close column collapsed to its padding because the button inside is
   taken out of flow, so the 46px control hung off the left of a 10px box.
   The column is given the button's width and everything in the band is
   centred on one baseline. */
@media (max-width: 767px) {
  .menu .header--modal .header__content > .row { align-items: center; }

  .menu .header--modal .header__close-col {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: calc(var(--scale-px) * 54);
  }
  .menu .header--modal .header__close {
    position: static;
    margin: 0;
    flex: 0 0 auto;
  }
  .menu .header--modal .group--right { align-self: center; }
}

/* ===========================================================================
   30  OVERVIEW SPACING
   The headline wraps to four lines and .leading-trim pulls its box in with
   negative margins, so the intro row that was added underneath climbed into
   it and "Project overview" printed on top of "…on top of it."
   ========================================================================= */

.about-project__head { margin-bottom: calc(var(--scale-px) * 64); }
.about-project__intro { margin-bottom: calc(var(--scale-px) * 56); }
.about-project__introTitle { margin-top: 0; }

@media (max-width: 767px) {
  .about-project__head { margin-bottom: calc(var(--scale-px) * 34); }
  .about-project__intro { margin-bottom: calc(var(--scale-px) * 30); }
}

/* ===========================================================================
   31  ABOUT THE PROJECT
   The section this replaces was the template's sticky-scroll "idea" band: an
   offset first line, a duplicated overlay copy of the statement, and a cube
   that parallaxed through a tall empty gap. This is a plain two-column
   layout — statement across the top, images beside the prose — so nothing
   overlaps and nothing depends on scroll position to become readable.
   ========================================================================= */

.abt { padding-top: calc(var(--scale-px) * 110); padding-bottom: calc(var(--scale-px) * 110); }

.abt__head { margin-bottom: calc(var(--scale-px) * 70); }

.abt__statement {
  max-width: 22ch;
  text-transform: none;
  font-size: calc(var(--scale-px) * 38);
  line-height: 1.16;
  max-width: none;
}

.abt__body { align-items: flex-start; }

/* ------------------------------------------------------------- the images */
.abt__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--scale-px) * 14);
  align-items: start;
}

.abt__shot {
  display: block;
  overflow: hidden;
  border-radius: calc(var(--scale-px) * 4);
  background: rgba(255, 255, 255, .05);
}

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

/* the taller of the pair sets the rhythm; the second sits lower and shorter,
   which keeps the pair from reading as one flat block */
.abt__shot--tall { aspect-ratio: 700 / 900; }
.abt__shot--short { aspect-ratio: 700 / 720; margin-top: calc(var(--scale-px) * 56); }

/* ------------------------------------------------------------- the prose */
.abt__block { margin-bottom: calc(var(--scale-px) * 44); }
.abt__block:last-of-type { margin-bottom: 0; }

.abt__blockTitle {
  margin: 0 0 calc(var(--scale-px) * 16);
  text-transform: none;
  font-size: calc(var(--scale-px) * 25);
}

.abt__prose {
  margin: 0;
  text-transform: none;
  line-height: 1.72;
  font-size: calc(var(--scale-px) * 15);
}

.abt__prose strong { color: #fff; font-weight: 600; }

.abt__cta { margin-top: calc(var(--scale-px) * 40); }

/* ---------------------------------------------------------------- phones */
@media (max-width: 767px) {
  .abt { padding-top: calc(var(--scale-px) * 60); padding-bottom: calc(var(--scale-px) * 60); }
  .abt__head { margin-bottom: calc(var(--scale-px) * 34); }
  .abt__statement { font-size: calc(var(--scale-px) * 27); }

  /* one picture is enough at this width; the second is hidden in the markup */
  .abt__media { grid-template-columns: 1fr; gap: 0; }
  .abt__shot--tall { aspect-ratio: 16 / 11; }

  .abt__body > .col--md-5 { margin-top: calc(var(--scale-px) * 34); }
  .abt__block { margin-bottom: calc(var(--scale-px) * 30); }
  .abt__blockTitle { font-size: calc(var(--scale-px) * 21); }
  .abt__cta { margin-top: calc(var(--scale-px) * 28); }
}

/* ===========================================================================
   32  SENTENCE CASE, AND ROOM TO BREATHE
   The template sets text-transform: uppercase on almost every type class —
   headings, body copy, small print alike. That suits a six-letter wordmark
   and two-word Russian headings; it does not suit full English sentences,
   which become hard to scan and lose their proper nouns.

   Case is returned to whatever the copy was written as, for headings, prose
   and the popup. It is deliberately KEPT on the navigation, the buttons and
   the mobile action bar, where the caps read as a deliberate UI device rather
   than as shouting.
   ========================================================================= */

/* --- headings ------------------------------------------------------------ */
.section h2,
.section .h2,
.section .h2-small,
.section h3,
.section .h3,
.section .h3-small,
.abt__statement,
.faq__q {
  text-transform: none;
}

/* --- section eyebrows, and the gap under them --------------------------- */
.section p.text-small.text-color-small.leading-trim {
  text-transform: none;
  letter-spacing: .06em;
}

.section p.text-small.text-color-small.leading-trim.mb-1 {
  margin-bottom: calc(var(--scale-px) * 20);
}

/* --- the popup reads as a form, not a notice ---------------------------- */
#callback-modal .callback-modal__title,
#callback-modal .form-label,
#callback-modal .form-control-checkbox__label,
#callback-modal .form-control-checkbox__label-text,
#callback-modal .uptSel__label,
#callback-modal input,
#callback-modal select,
#callback-modal .error-message {
  text-transform: none;
}

/* the consent note is small print, so it should look like small print */
#callback-modal .form-control-checkbox__label-text {
  font-size: calc(var(--scale-px) * 12);
  line-height: 1.62;
  letter-spacing: 0;
  opacity: .62;
}

/* the same treatment on the page's own contact form */
.contact-sec .form-control-checkbox__label-text {
  text-transform: none;
  font-size: calc(var(--scale-px) * 12);
  line-height: 1.62;
  letter-spacing: 0;
}

.contact-sec .form-label,
.contact-sec .uptSel__label,
.contact-sec .ctf__label,
.contact-sec .ctf__note { text-transform: none; letter-spacing: .04em; }


/* ===========================================================================
   33  PRICE CARD SPACING
   The carpet-area label sat 3px off its own figure, so the two read as one
   line of noise instead of a label and a value.
   ========================================================================= */

.pc__spec { margin-bottom: calc(var(--scale-px) * 22); }
.pc__spec dt { margin-bottom: calc(var(--scale-px) * 9); opacity: .55; letter-spacing: .05em; }
.pc__spec dd { margin: 0; }

/* the footer small print is a description, so it reads as one */
.footer__footnote {
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.66;
  font-size: calc(var(--scale-px) * 12.5);
  opacity: .58;
}
.footer__footnote strong { opacity: 1; font-weight: 600; }
.footer__footnote + .footer__footnote { margin-top: calc(var(--scale-px) * 12); }

/* the policy links sit inside the consent sentence, so they follow its case */
#callback-modal .form-control-checkbox__label-text .btn__text,
.contact-sec .form-control-checkbox__label-text .btn__text {
  text-transform: none;
  font-size: inherit;
  letter-spacing: inherit;
}

/* ===========================================================================
   34  HIGHLIGHTS — ALIGNMENT AND THE DEVELOPER MARK
   The tile text was clamped to 20ch and 28ch, widths chosen when the tiles
   were narrower; in a third-width column that forced "Two buildings over a
   retail high street" to wrap after four words while two thirds of the tile
   sat empty. The clamps go, the label drops out of capitals to match the
   rest of the page, and the mark sits beside the headline.
   ========================================================================= */

.ft__label {
  text-transform: none;
  letter-spacing: .06em;
  margin-bottom: calc(var(--scale-px) * 12);
  opacity: .5;
}

.ft__value { max-width: none; margin-bottom: calc(var(--scale-px) * 10); line-height: 1.24; }
.ft__note { max-width: 34ch; line-height: 1.6; opacity: .55; }

/* every tile starts its text at the same height, whatever the icon does */
.highlights__grid > .col { display: flex; }
.ft { display: flex; flex-direction: column; width: 100%; }
.ft__icon { flex: 0 0 auto; }

/* the row of tiles is separated from the headline by a real gap */
.highlights__grid { margin-top: calc(var(--scale-px) * 20); }

/* ------------------------------------------------------ the developer mark */
.hl__brandCol { display: flex; align-items: flex-start; justify-content: flex-end; }

.hl__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--scale-px) * 12);
  color: inherit;
  text-align: right;
  transition: opacity .22s ease;
}
.hl__brand:hover { opacity: .75; }

.hl__mark { display: block; width: auto; height: calc(var(--scale-px) * 78); }

.hl__brandNote {
  text-transform: none;
  letter-spacing: .04em;
  opacity: .5;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .hl__brandCol { justify-content: flex-start; margin-top: calc(var(--scale-px) * 26); }
  .hl__brand { align-items: flex-start; text-align: left; }
  .hl__mark { height: calc(var(--scale-px) * 62); }
  .ft__note { max-width: none; }
}


/* ===========================================================================
   35  ABOUT THE DEVELOPER — TIGHTER PARAGRAPHS
   The paragraphs used the template's mt-1.5 step, which is sized for gaps
   between blocks rather than between paragraphs of one argument, so the
   column read as four disconnected notes.
   ========================================================================= */

.developer .doc-prose + .doc-prose { margin-top: calc(var(--scale-px) * 20) !important; }
.developer .text-lead { margin-bottom: calc(var(--scale-px) * 4); line-height: 1.32; }
.developer .doc-prose { line-height: 1.72; }
.developer h2 { margin-bottom: calc(var(--scale-px) * 10); }

@media (max-width: 767px) {
  .developer .doc-prose + .doc-prose { margin-top: calc(var(--scale-px) * 16) !important; }
}

/* ===========================================================================
   36  FOOTER
   Three aligned columns — mark, contact, enquire — over one legal strip and
   the small print. Replaces the template's loose stack, where the phone
   number floated in a nine-column well and the address sat in an offset slot
   that lined up with nothing.
   ========================================================================= */

.footer { padding-top: calc(var(--scale-px) * 90); padding-bottom: calc(var(--scale-px) * 60); }

.uptFoot__top {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: calc(var(--scale-px) * 48);
  align-items: start;
  padding-bottom: calc(var(--scale-px) * 54);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.uptFoot__col { min-width: 0; }

/* --------------------------------------------------------------- the mark */
.uptFoot__logo { display: inline-block; color: inherit; }
.uptFoot__mark { display: block; width: auto; height: calc(var(--scale-px) * 96); }

.uptFoot__blurb {
  margin: calc(var(--scale-px) * 22) 0 0;
  max-width: 34ch;
  font-size: calc(var(--scale-px) * 14);
  line-height: 1.66;
  text-transform: none;
  letter-spacing: 0;
  opacity: .55;
}

/* ------------------------------------------------------- column headings */
.uptFoot__head {
  margin: 0 0 calc(var(--scale-px) * 20);
  font-size: calc(var(--scale-px) * 13);
  letter-spacing: .08em;
  text-transform: none;
  opacity: .45;
  font-weight: 450;
}

/* ------------------------------------------------------------- contact */
.uptFoot__phone {
  display: block;
  margin-bottom: calc(var(--scale-px) * 14);
  font-size: calc(var(--scale-px) * 26);
  line-height: 1.2;
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
}
.footer a.uptFoot__phone:hover { color: var(--upt-gold); opacity: 1; }

.uptFoot__line {
  display: inline-block;
  margin-bottom: calc(var(--scale-px) * 16);
  font-size: calc(var(--scale-px) * 14);
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .68;
}
.footer a.uptFoot__line:hover { color: var(--upt-gold); opacity: 1; }

.uptFoot__address {
  margin: 0;
  font-size: calc(var(--scale-px) * 13.5);
  line-height: 1.7;
  text-transform: none;
  letter-spacing: 0;
  opacity: .5;
}

/* ------------------------------------------------------------- enquire */
.uptFoot__buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--scale-px) * 18);
  margin-bottom: calc(var(--scale-px) * 30);
}

.uptFoot__links { display: flex; flex-direction: column; gap: calc(var(--scale-px) * 10); }

.uptFoot__links a {
  font-size: calc(var(--scale-px) * 13.5);
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
  opacity: .6;
}
.footer .uptFoot__links a:hover { color: var(--upt-gold); opacity: 1; }

/* --------------------------------------------------------- legal strip */
.uptFoot__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--scale-px) * 14);
  padding: calc(var(--scale-px) * 26) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.uptFoot__strip p {
  margin: 0;
  font-size: calc(var(--scale-px) * 12.5);
  text-transform: none;
  letter-spacing: 0;
  opacity: .5;
}
.uptFoot__strip a { color: var(--upt-gold); text-decoration: underline; text-underline-offset: 3px; }
.footer .uptFoot__strip a:hover { color: #fff; opacity: 1; }

/* ---------------------------------------------------------- small print */
.uptFoot__small { padding-top: calc(var(--scale-px) * 28); }

/* --------------------------------------------------------------- phones */
@media (max-width: 1023px) {
  .uptFoot__top { grid-template-columns: 1fr 1fr; gap: calc(var(--scale-px) * 36); }
  .uptFoot__col--brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .footer { padding-top: calc(var(--scale-px) * 54); padding-bottom: calc(var(--scale-px) * 40); }
  .uptFoot__top {
    grid-template-columns: 1fr;
    gap: calc(var(--scale-px) * 34);
    padding-bottom: calc(var(--scale-px) * 32);
  }
  .uptFoot__mark { height: calc(var(--scale-px) * 78); }
  .uptFoot__phone { font-size: calc(var(--scale-px) * 22); }
  .uptFoot__strip { flex-direction: column; align-items: flex-start; gap: calc(var(--scale-px) * 8); }
}

/* the credit strip had its labels sitting on top of their own values, and the
   call to action floated a long way below the prose it belongs to */
.dev__fact > p:first-child { margin-bottom: calc(var(--scale-px) * 10); opacity: .5; letter-spacing: .05em; }
.dev__fact > p:nth-child(2) { margin-bottom: calc(var(--scale-px) * 10); }
.dev__fact > p:last-child { margin: 0; line-height: 1.65; opacity: .5; }

.developer .row.mt-4 { margin-top: calc(var(--scale-px) * 56) !important; }
.developer .developer__cta,
.developer .row--pad > .col > .mt-3 { margin-top: calc(var(--scale-px) * 34) !important; }

/* ===========================================================================
   37  ABOUT THE DEVELOPER — THE MARK
   The left column held only a two-line headline and a screen of empty navy.
   The mark fills it and doubles as a way into the enquiry form.
   ========================================================================= */

.dev__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--scale-px) * 14);
  margin-top: calc(var(--scale-px) * 44);
  color: inherit;
  transition: opacity .22s ease;
}
.developer a.dev__brand:hover { opacity: .72; }

.dev__mark { display: block; width: auto; height: calc(var(--scale-px) * 104); }

.dev__brandNote {
  text-transform: none;
  letter-spacing: .05em;
  opacity: .45;
}

@media (max-width: 767px) {
  .dev__brand { margin-top: calc(var(--scale-px) * 28); }
  .dev__mark { height: calc(var(--scale-px) * 76); }
}


/* ===========================================================================
   38  FLOATING CALL / WHATSAPP DOCK — DESKTOP ONLY
   Phones already carry the fixed bottom bar, which does the same job; two
   sets of always-on buttons on one small screen would just eat the page, so
   this is hidden below 1024px exactly where .uptBar takes over.
   ========================================================================= */

.uptDock {
  position: fixed;
  right: calc(var(--scale-px) * 24);
  bottom: calc(var(--scale-px) * 24);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: calc(var(--scale-px) * 12);
  pointer-events: none;
}

.uptDock__btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: calc(var(--scale-px) * 54);
  padding: 0;
  width: calc(var(--scale-px) * 54);
  border-radius: calc(var(--scale-px) * 27);
  background: var(--upt-ink);
  color: #fff;
  box-shadow: 0 calc(var(--scale-px) * 10) calc(var(--scale-px) * 28) rgba(0, 0, 0, .45);
  overflow: hidden;
  transition: width .34s cubic-bezier(.2, .7, .3, 1), background .22s ease, box-shadow .22s ease;
}

.uptDock__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--scale-px) * 54);
  height: calc(var(--scale-px) * 54);
}
.uptDock__icon svg { width: calc(var(--scale-px) * 23); height: calc(var(--scale-px) * 23); display: block; }

/* the label is revealed by the button growing, so nothing shifts around it */
.uptDock__label {
  white-space: nowrap;
  padding-right: calc(var(--scale-px) * 22);
  font-size: calc(var(--scale-px) * 13);
  letter-spacing: .04em;
  text-transform: none;
  opacity: 0;
  transition: opacity .2s ease .06s;
}

.uptDock__btn:hover,
.uptDock__btn:focus-visible {
  width: calc(var(--scale-px) * 160);
  box-shadow: 0 calc(var(--scale-px) * 14) calc(var(--scale-px) * 34) rgba(0, 0, 0, .55);
}
.uptDock__btn:hover .uptDock__label,
.uptDock__btn:focus-visible .uptDock__label { opacity: 1; }

.uptDock__btn--call:hover,
.uptDock__btn--call:focus-visible { background: var(--upt-gold); }

.uptDock__btn--wa { background: #1faa54; }
.uptDock__btn--wa:hover,
.uptDock__btn--wa:focus-visible { background: #17904a; }

.uptDock__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* the phone has .uptBar for this */
@media (max-width: 1023px) {
  .uptDock { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .uptDock__btn { transition: background .22s ease; }
  .uptDock__btn:hover, .uptDock__btn:focus-visible { width: calc(var(--scale-px) * 160); }
  .uptDock__label { transition: none; }
}

/* --scale-px shrinks with the viewport, which took these to 32px at 1024 —
   below a comfortable click target. The dock is chrome, not type, so it is
   sized in real pixels and stays the same at every width it appears at. */
.uptDock { right: 24px; bottom: 24px; gap: 12px; }
.uptDock__btn { height: 54px; width: 54px; border-radius: 27px; }
.uptDock__icon { width: 54px; height: 54px; }
.uptDock__icon svg { width: 23px; height: 23px; }
.uptDock__label { padding-right: 22px; font-size: 13px; }
.uptDock__btn:hover,
.uptDock__btn:focus-visible { width: 162px; }

@media (prefers-reduced-motion: reduce) {
  .uptDock__btn:hover, .uptDock__btn:focus-visible { width: 162px; }
}

/* ===========================================================================
   39  SUBMIT BUTTON — LOADING STATE
   While the enquiry is in flight the label dims and a ring spins beside it,
   so nobody presses twice wondering whether it went.

   The spinner is a real element, injected by the script. It cannot be a
   pseudo-element: .btn__text::before/::after carry the template's optical
   leading-trim, and .btn--bitten-corner::after paints the notched fill.
   ========================================================================= */

.btn.is-loading { cursor: wait; pointer-events: none; }

.btn.is-loading .btn__text {
  opacity: .45;
  transition: opacity .2s ease;
}

.btn__spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 10px;
  vertical-align: middle;
  border: 2px solid currentColor;
  /* one transparent quadrant is what makes the rotation readable */
  border-top-color: transparent;
  border-radius: 50%;
  animation: uptSpin .62s linear infinite;
}

@keyframes uptSpin { to { transform: rotate(360deg); } }

/* the bitten-corner buttons centre their content, so the spinner rides along */
.btn--bitten-corner .btn__content { display: inline-flex; align-items: center; justify-content: center; }

/* on the gold popup button the ring reads better slightly inset */
#callback-modal .btn.is-loading .btn__spinner { border-width: 2px; }

@media (prefers-reduced-motion: reduce) {
  .btn__spinner { animation-duration: 1.6s; }
}

/* ===========================================================================
   40  PHONE — TIGHTER RHYTHM, WHOLE BANNER, NOTHING BEHIND THE BAR
   Measured on a 390x844 screen before changing anything: most sections were
   carrying 110px of top padding and 70px of bottom, which is a desktop
   rhythm applied to a screen a third as wide. The banner was showing 66% of
   the render's width, and the last of the footer small print was sitting
   underneath the fixed action bar.
   ========================================================================= */

@media (max-width: 767px) {

  /* --- section rhythm ---------------------------------------------------- */
  /* In most sections the vertical space is on the inner .px-layout, not on
     the <section>. Adding padding to the section as well just stacked the
     two - the fix is to reduce the element that actually carries it. */
  .section > .px-layout,
  .section > .px-layout.py-layout,
  .section > .px-layout.pt-layout.pb-layout {
    padding-top: calc(var(--scale-px) * 46);
    padding-bottom: calc(var(--scale-px) * 38);
  }

  /* these carry their space on the section itself */
  .abt,
  .loc,
  .contact-sec {
    padding-top: calc(var(--scale-px) * 46);
    padding-bottom: calc(var(--scale-px) * 38);
  }

  /* these four own their spacing on the section, so their inner wrapper
     must not add a second helping of it */
  .abt > .px-layout,
  .loc > .px-layout,
  .contact-sec > .px-layout,
  .footer > .px-layout { padding-top: 0; padding-bottom: 0; }

  .gallery-sec > .px-layout.galStrip__head { padding-top: calc(var(--scale-px) * 46); padding-bottom: calc(var(--scale-px) * 18); }
  .gallery-sec .ps.galStrip { padding-bottom: calc(var(--scale-px) * 40); }

  /* the template's own vertical steps are sized for the desktop grid */
  .section .py-layout { padding-top: calc(var(--scale-px) * 40); padding-bottom: calc(var(--scale-px) * 40); }
  .section .pt-layout { padding-top: calc(var(--scale-px) * 40); }
  .section .pb-layout { padding-bottom: calc(var(--scale-px) * 40); }
  .section .mt-layout { margin-top: calc(var(--scale-px) * 28); }
  .section .mt-3 { margin-top: calc(var(--scale-px) * 24) !important; }
  .section .mt-4 { margin-top: calc(var(--scale-px) * 28) !important; }
  .section .mb-2, .section .mb-3, .section .mb-4 { margin-bottom: calc(var(--scale-px) * 22) !important; }

  /* the head-to-content gap in each rebuilt section */
  .abt__head, .loc__head, .ctf__head { margin-bottom: calc(var(--scale-px) * 26); }
  .highlights__grid { margin-top: calc(var(--scale-px) * 14); }

  /* --- the banner shows the whole render, not a slice of it -------------- */
  /* cover was cutting a third off each side of a portrait render; contain
     fits it whole, and the frame is painted so the margins read as intent */
  /* The render is portrait (820x1180). Fitting it whole into a full-height
     hero left a band of empty navy underneath, so the hero is sized to the
     image instead: the whole picture, no crop, and no dead space below it. */
  /* The banner is sized to the render itself, so it fills the width edge to
     edge, sits straight under the header with no band above it, and is not
     cropped: 390 wide by 561 tall for an 820x1180 picture. */
  .intro .sticky__layer--sticky,
  .intro .intro__content,
  .intro__building {
    height: calc(100vw * 1180 / 820);
    min-height: 0;
  }

  .intro__building img {
    object-fit: cover;
    object-position: center top;
  }

  /* --- nothing hides behind the fixed action bar ------------------------- */
  /* the bar is 59px; this restores the clearance a later rule had overridden */
  .footer { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .uptFoot__small { padding-bottom: calc(var(--scale-px) * 8); }
}

/* --- the menu panel is a list, not a poster ------------------------------ */
/* the backdrop render sat behind the last entries and read as a broken image
   rather than a background */
@media (max-width: 1023px) {
  /* the panel carries id="menu" but no .menu class, so a .menu-prefixed
     selector never matched it */
  #menu .menu-background,
  #menu picture.menu-background { display: none !important; }
  #menu .modal__content { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ===========================================================================
   41  FOOTER TEXT — WHITE
   Everything in the footer was dimmed to between 45% and 58% opacity, which
   on the navy ground read as grey and cost legibility, worst of all in the
   small print. The type is white now; only a light touch of transparency is
   kept on the labels so the hierarchy still reads.
   ========================================================================= */

.footer,
.footer p,
.footer a,
.footer h2,
.uptFoot__blurb,
.uptFoot__address,
.uptFoot__line,
.uptFoot__links a,
.uptFoot__strip p,
.footer__footnote {
  color: #fff;
}

/* full strength for anything the visitor actually reads */
.uptFoot__blurb,
.uptFoot__address,
.footer__footnote,
.uptFoot__strip p { opacity: 1; }

.uptFoot__line { opacity: 1; }
.uptFoot__links a { opacity: 1; }

/* the column labels stay a step back so they read as labels, not content */
.uptFoot__head { opacity: .7; color: #fff; }

/* the small print is quieter through size and weight rather than through
   being greyed out */
.footer__footnote { opacity: .82; }
.footer__footnote strong { opacity: 1; color: #fff; font-weight: 600; }

.uptFoot__strip p { opacity: .78; }
.uptFoot__strip a { color: var(--upt-gold); }
.footer .uptFoot__strip a:hover { color: #fff; }

/* the bitten-corner button paints a white fill through its own ::after, so it
   must keep the dark label the template gives it - the blanket white above
   had turned it into an empty white box */
.footer .btn--bitten-corner,
.footer .btn--bitten-corner .btn__text { color: var(--upt-ink); }
.footer .btn--bitten-corner--outline,
.footer .btn--bitten-corner--outline .btn__text { color: #fff; }