/* Before the scripts build the guided view, hide the classic form (it is 1340px tall) and hold
   a similar height, so the page does not grow and then shrink on load. */
#panel-space:not(.g-on) > :not(.v2-shell) { display: none; }
#panel-space:not(.g-on) { min-height: 70vh; }

/* The guided wizard (js/redesign/guided.js): one question at a time, a live answer bar, compact type, no wasted space.
   Same type, rules and red as v2; savings are green (the site's --st-good). Sizes: 12 / 14 / 16 / 20 and one display figure. */
#panel-space.g-on > .v2-shell:not(.g-shell),
#panel-lease.g-on > .v2-shell:not(.g-shell) { display: none !important; }
#panel-lease.g-on { padding-top: 0; margin-top: 0; }
.g-shell { padding: 8px 0 48px; background: #fff; }
.g-lease-shell { padding-top: 0; }
.w { max-width: 1000px; }
.w [hidden] { display: none !important; }
.w-step { animation: wIn .18s ease both; }
@keyframes wIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .w-step { animation: none; } }

/* The bar: the live answer and the six steps, always in reach */
.w-bar { position: sticky; top: var(--rail-bottom, 56px); z-index: 20; margin: 0 0 14px; padding: 8px 0 0; background: #fff; border-bottom: 1px solid var(--v2-rule); }
@media (max-height: 639px) { .w-bar { position: static; } }
.w-bar-top { display: flex; justify-content: space-between; align-items: center; gap: 4px 16px; flex-wrap: wrap; }
.w-ans { margin: 0; font-size: 16px; line-height: 1.35; }
.w-ans b { font-weight: 500; font-size: 20px; }
.w-sep { margin: 0 8px; color: #B7B4AE; }
.w-ex { color: var(--v2-mute); }
.w-chips { display: flex; gap: 2px; margin: 6px 0 0; padding: 0 0 8px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.w-chips::-webkit-scrollbar { display: none; }
.w-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 6px; border: 0; border-radius: 20px; background: transparent; font: inherit; font-size: 14px; color: var(--v2-mute); white-space: nowrap; cursor: pointer; }
.w-chip-n { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #B7B4AE; border-radius: 50%; font-size: 12px; }
.w-chip.is-done { color: var(--v2-ink); }
.w-chip.is-done .w-chip-n { background: var(--v2-ink); border-color: var(--v2-ink); color: #fff; }
.w-chip.is-on { background: var(--paper-2, #eae9e6); color: var(--v2-ink); }
.w-chip.is-on .w-chip-n { background: var(--v2-red); border-color: var(--v2-red); color: #fff; }
.w-chip:disabled { opacity: .4; cursor: default; }

/* A step: heading, body, navigation */
.w-h { margin: 0 0 14px; }
.w-count { margin: 0 0 2px; font-size: 12px; color: var(--v2-mute); }
.w .w-title { margin: 0; font: 500 clamp(22px, 3vw, 28px)/1.15 var(--font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif); letter-spacing: -0.02em; outline: none; }
.w-hint { margin: 6px 0 0; font-size: 15px; color: var(--v2-mute); }
.w-body > * + * { margin-top: 14px; }
.w-sub { margin: 0 0 8px; font: 500 15px/1.3 var(--font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif); }
.w-card { padding: 14px 16px; background: var(--paper, #f5f5f3); border-radius: 14px; }
.w-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--v2-rule); }
.w-back { min-height: 44px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--v2-ink); cursor: pointer; }
.w-back:hover { text-decoration: underline; }
.w .w-next { min-height: 48px; padding: 0 22px; }
.w .w-next:disabled { opacity: .4; cursor: default; background: var(--v2-red); }

/* Figures: one display number, the rest small */
.w-eyebrow { margin: 0; font-size: 14px; color: var(--v2-mute); }
.w-big { margin: 2px 0 0; font: 300 clamp(44px, 8vw, 64px)/1 var(--font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif); letter-spacing: -0.04em; color: var(--v2-ink); }
.w-big small { margin-left: .15em; font-size: .28em; letter-spacing: 0; color: var(--v2-mute); }
.w-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px 20px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line, #dbd9d5); }
.w-facts dt { font-size: 12px; line-height: 1.3; color: var(--v2-mute); }
.w-facts dd { margin: 2px 0 0; font: 400 clamp(16px, 2.2vw, 20px)/1.2 var(--font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif); letter-spacing: -0.01em; }
.w-note { margin: 8px 0 0; font-size: 13px; color: var(--v2-mute); }
.w-note b { color: var(--v2-ink); font-weight: 500; }
.w-card.is-example .w-big, .w-card.is-example .w-facts dd { color: var(--v2-ink); }

/* Step 1: the team size */
.g-step { display: flex; align-items: center; gap: 8px; max-width: 440px; }
.g-step input { flex: 1; min-width: 0; height: 64px; padding: 0 8px; border: 1px solid var(--v2-ink); border-radius: 12px; background: #fff; text-align: center; color: var(--v2-ink); appearance: textfield; -moz-appearance: textfield; }
.g-step input::-webkit-outer-spin-button, .g-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#w-space #g-n { font-size: 34px !important; font-weight: 400; }
.g-stepb { flex: none; width: 44px; height: 44px; border: 1px solid var(--v2-ink); border-radius: 50%; background: #fff; font: 300 24px/1 var(--font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif); color: var(--v2-ink); cursor: pointer; }
.g-stepb:disabled { opacity: .35; cursor: default; }
.g-step .g-stepb { width: 48px; height: 48px; }
.g-picks, .g-yn { display: flex; flex-wrap: wrap; gap: 8px; }
.g-pick { min-height: 44px; padding: 0 18px; border: 1px solid var(--v2-ink); border-radius: 22px; background: #fff; font: inherit; font-size: 16px; color: var(--v2-ink); cursor: pointer; }
@media (hover: hover) { .g-pick:hover { background: var(--paper-2, #eae9e6); } }
.g-pick[aria-pressed="true"] { background: var(--v2-ink); color: #fff; }

/* Choice cards: days, desk size, reception */
.w-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
.g-opt { display: flex; flex-direction: column; gap: 1px; padding: 12px 14px; border: 1px solid var(--v2-rule); border-radius: 12px; background: #fff; text-align: left; font: inherit; color: var(--v2-ink); cursor: pointer; }
@media (hover: hover) { .g-opt:hover { border-color: var(--v2-ink); } }
.g-opt.is-on { border-color: var(--v2-red); box-shadow: 0 0 0 2px var(--v2-red); }
.g-opt-t { font-weight: 500; }
.g-opt-d, .g-opt-m { font-size: 14px; color: var(--v2-mute); }
.g-opt-s { font-size: 13px; color: var(--v2-mute); }
.g-opt-s.is-save { color: var(--st-good, #2e7d4f); font-weight: 500; }

/* Insights: small tiles under a choice */
.w-insl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.w-insl li { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; background: #fff; border: 1px solid var(--v2-rule); border-radius: 10px; }
.w-card .w-insl li { border-color: var(--line, #dbd9d5); }
.w-ins-k { font-size: 12px; color: var(--v2-mute); }
.w-ins-v { font-size: 17px; font-weight: 500; line-height: 1.25; }
.w-ins-n { font-size: 12.5px; color: var(--v2-mute); }

/* Rooms and support spaces */
.g-rooms { margin: 0; padding: 0; list-style: none; }
.g-rooms li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 0; border-top: 1px solid var(--line, #dbd9d5); }
.g-rooms li span:first-child b { display: block; font-weight: 500; font-size: 15px; }
.g-rooms small { display: block; font-size: 13px; color: var(--v2-mute); }
.g-count { display: inline-flex; align-items: center; gap: 12px; }
.g-count output { min-width: 28px; text-align: center; font-size: 18px; }
#w-extras-fold { margin-top: 10px; }

/* Where: the areas as a ranked, tappable list */
.w-areas { display: grid; gap: 6px; }
.w-area { display: grid; grid-template-columns: minmax(140px, 240px) minmax(0, 1fr) minmax(130px, 170px); gap: 12px; align-items: center; width: 100%; padding: 9px 12px; border: 1px solid var(--v2-rule); border-radius: 10px; background: #fff; text-align: left; font: inherit; font-size: 14px; color: var(--v2-ink); cursor: pointer; }
@media (hover: hover) { .w-area:hover { border-color: var(--v2-ink); } }
.w-area.is-on { border-color: var(--v2-red); box-shadow: 0 0 0 2px var(--v2-red); }
.w-area .v2-track { height: 12px; }
.w-area.is-on .v2-track i { background: var(--v2-red); }
.w-area-v { text-align: right; line-height: 1.25; }
.w-area-v small { display: block; font-size: 12px; color: var(--v2-mute); }
@media (max-width: 640px) {
  /* The name keeps at least 40% of the row; the figures' second line wraps instead */
  .w-area { grid-template-columns: minmax(40%, 1fr) minmax(0, auto); row-gap: 6px; }
  .w-area .v2-track { grid-column: 1 / -1; grid-row: 2; }
}

/* Result */
.w-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 820px) { .w-grid2 { grid-template-columns: minmax(0, 1fr); } }
.w-card .v2-legend li { padding: 6px 0; font-size: 14px; }
.w-levers { margin: 0; padding: 0; list-style: none; }
.w-levers li { display: grid; grid-template-columns: minmax(110px, 1.3fr) minmax(0, 1fr) 84px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line, #dbd9d5); font-size: 14px; }
.w-levers li:first-child { border-top: 0; }
.w-lev-t small { display: block; font-size: 12px; color: var(--v2-mute); }
.w-levers .v2-track { height: 10px; background: var(--line, #dbd9d5); }
.w-levers .v2-track i { background: var(--st-good, #2e7d4f); }
.w-lev-v { font-weight: 500; color: var(--st-good, #2e7d4f); text-align: right; white-space: nowrap; }
@media (max-width: 520px) {
  .w-levers li { grid-template-columns: minmax(0, 1fr) 84px; row-gap: 4px; }
  .w-levers .v2-track { grid-column: 1 / -1; grid-row: 2; }
}
.w-tab { width: 100%; font-size: 14px; }
.w-tab th, .w-tab td { padding: 8px 6px; }
.w-cta { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.w-cta-note { font-size: 12px; color: var(--v2-mute); }

.w .v2-fold { border-top-color: var(--line, #dbd9d5); }

/* The lease step (it lives in the lease panel, whose field styles are its own) */
#g-lease-wrap .g-lease-form { margin-top: 14px; padding: 16px; background: var(--paper, #f5f5f3); border-radius: 14px; }
#g-lease-res { margin-top: 18px; }
.g-lease-act { display: flex; gap: 16px; margin-top: 12px; font-size: 14px; }
.w-next-step { margin-top: 18px; }
#g-lease-wrap #leaseBar .lc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
#g-lease-wrap #leaseBar .lc-f { display: block; width: auto; min-width: 0; margin: 0; }
#g-lease-wrap #leaseBar .lc-f--wide { grid-column: 1 / -1; }
#g-lease-wrap #leaseBar .lc-box, #g-lease-wrap #leaseBar select, #g-lease-wrap #leaseBar .lc-box input { width: 100%; }
#g-lease-wrap #leaseBar .lc-box { display: flex; align-items: center; }
#g-lease-wrap #leaseBar .lc-box input { flex: 1; min-width: 0; }
@media (max-width: 520px) { #g-lease-wrap #leaseBar .lc-form { grid-template-columns: minmax(0, 1fr); } }
#g-lease-wrap .lc-box input { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#g-lease-wrap .lc-box:focus-within { border-color: var(--v2-ink); box-shadow: 0 0 0 1px var(--v2-ink); }
#g-lease-res .v2-facts { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); row-gap: 8px; margin-top: 14px; }
#g-lease-res .v2-facts dd { font-size: clamp(18px, 4.6vw, 24px); }
#g-lease-res .v2-head2 { font-size: clamp(22px, 4vw, 30px); }
#g-lease-wrap .kf-btn, #w-space .v2-btn { min-height: 44px; }
#g-lease-wrap .v2-fold { border-top-color: var(--line, #dbd9d5); }

/* Real devices: touch behaviour, tap areas, notches */
#w-space button, #w-space summary, #w-space select, #w-space input, #g-lease-wrap button, #g-lease-wrap summary, #g-lease-wrap select, #g-lease-wrap input { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#w-space .kf-tip-i, #g-lease-wrap .kf-tip-i { position: relative; }
#w-space .kf-tip-i::after, #g-lease-wrap .kf-tip-i::after { content: ''; position: absolute; inset: -13px; }
@supports (padding: max(0px)) { .g-shell .wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } }
@media (max-width: 640px) {
  .w-bar-top { align-items: flex-start; }
  .w-nav .w-next { flex: 1; max-width: 70%; }
}

.w-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: 18px; font-size: 13px; }
.w .w-foot .text-link, .w .w-foot button { display: inline-flex; align-items: center; min-height: 36px; font-size: 13px; color: var(--v2-ink); }
@media (max-width: 520px) { .w-yr { display: none; } .w-ans { font-size: 15px; } .w-ans b { font-size: 18px; } }
#panel-space.g-on { padding-top: 6px; padding-bottom: 0; }
#panel-lease.g-on { padding-bottom: 0; }
.w-body > .w-sub { margin-top: 22px; }
.w-body > .w-sub:first-child { margin-top: 0; }
.w-body > .w-opts + .w-opts { margin-top: 10px; }
.w-insl { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.w-area .v2-track i { background: #B7B4AE; }
.w-area.is-on .v2-track i { background: var(--v2-red); }
.w-area .v2-track { height: 8px; border-radius: 4px; overflow: hidden; }
.w-tab td { white-space: nowrap; text-align: right; }
.w-tab th[scope="col"]:not(:first-child) { text-align: right; }
.w-tab { font-size: 13.5px; }

/* The week grid inside the wizard: the fine print is dropped, the sentence and the grid stay. */
#w-week-slot .rd-inputs-wk-disc, #w-week-slot .rd-inputs-wk-src, #w-week-slot .rd-inputs-wk-money, #w-week-slot .rd-inputs-wk-hint { display: none; }
.w-rec-lead { margin: 12px 0 0; font-size: 15px; }

/* Footer: one baseline and one left edge (the classic reset link brought its own top margin; Back its own side padding). */
.w .w-foot .reset-link { margin: 0; }

/* The request forms in the microsite's hand (Knight-Frank-Microsite app.css): square fields and buttons, a warm paper card
   with a hairline ink edge, darker 11px caps labels, the 13.5px/14px control type. */
.lease-modal.kf-dialog, .help-modal.kf-dialog { background: var(--paper, #f5f5f3); border: 1px solid var(--ink, #1a1a1a); }
.lease-modal :is(input:not([type=checkbox], [type=radio]), select, textarea), .lease-modal .kf-btn, .help-modal .kf-btn { border-radius: 0; }
.lease-modal :is(input:not([type=checkbox], [type=radio]), select, textarea) { border-color: #b7b4ae; padding-left: 10.8px; padding-right: 10.8px; }
.lease-modal :is(input, select, textarea):focus-visible { border-color: var(--ink, #1a1a1a); }
.lease-modal label, .lease-modal .field-label { font-size: 11.26px; color: #2b2b2b; }
.lease-modal .kf-btn[type=submit] { font-size: 13.96px; }
#leaseForm .kf-btn, #leaseForm .form-actions .kf-btn { border-radius: 0; }
#leaseForm :is(label, .field-label) { font-size: 11.26px; color: #2b2b2b; }

/* The Result step, shorter: the sample floor is a compact picture (the notes under it are folded away) and, from 860px,
   sits beside "If your team changes" instead of below it. */

@media (min-width: 860px) {
  [data-step="4"] .w-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  [data-step="4"] .w-body > * { margin-top: 0; }
  [data-step="4"] .w-body > :nth-child(1), [data-step="4"] .w-body > :nth-child(2) { grid-column: 1 / -1; }
  [data-step="4"] .w-body > :nth-child(3) { grid-column: 2; grid-row: 3; }
  
  [data-step="4"] .w-body > .w-cta { grid-column: 2; grid-row: 4; }
  [data-step="4"] .w-body > .v2-fold { grid-column: 2; grid-row: 5; }
}

/* Balance on the Result step: the row beside the floor stretches its card instead of leaving gaps, and the floor starts at the top of its card. */

@media (min-width: 860px) {
  [data-step="4"] .w-body { grid-template-rows: auto auto 1fr auto auto; }
  [data-step="4"] .w-body > :nth-child(3) { align-self: stretch; }
}
/* Back and Next as a pair: the same height and weight, Back outlined, both on the card edges. */
.w-nav .w-back, .w-nav .w-next { min-height: 48px; padding: 0 22px; font-size: 15px; }
.w-nav .w-back { border: 1px solid var(--v2-ink, #1a1a1a); background: transparent; color: var(--v2-ink, #1a1a1a); }
.w-nav .w-back:hover { background: var(--paper-2, #eae9e6); text-decoration: none; }

/* Step footer, one quiet block: Back and Next are exactly the same box (height, border, type, arrow gap), and the two
   utility links sit under them small and grey, underlined only on hover. */
.w-nav .w-back, .w-nav .w-next { box-sizing: border-box; height: 52px; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; font-size: 15px; line-height: 1; border-width: 1px; }
.w-nav .w-back { border-color: var(--line-strong, #b7b4ae); }
.w-nav .w-back:hover { border-color: var(--v2-ink, #1a1a1a); background: transparent; }
.w-nav .w-next { border-color: var(--v2-red, #a6192e); }
.w .w-foot { margin-top: 10px; gap: 2px 20px; }
.w .w-foot :is(.text-link, button, .reset-link) { font-size: 12.5px; color: var(--grey-strong, #5e5d57); text-decoration: none; border-bottom: 1px solid transparent; min-height: 32px; padding: 0; margin: 0; }
.w .w-foot :is(.text-link, button, .reset-link):hover { color: var(--v2-ink, #1a1a1a); border-bottom-color: currentColor; }

/* Step 3: the map beside the list from 860px, above it on a phone. Pins are buttons placed by percentage over a flat outline. */
.w-map { border: 1px solid var(--v2-rule, #dbd9d5); background: #fff; padding: 12px; }
.w-map-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.w-map-k { font-size: 12px; color: var(--grey-strong, #5e5d57); }
.w-map-v { display: inline-flex; border: 1px solid var(--line-strong, #b7b4ae); }
.w-map-v button { min-height: 30px; padding: 0 10px; border: 0; background: transparent; font: inherit; font-size: 12px; cursor: pointer; color: var(--v2-ink, #1a1a1a); }
.w-map-v button[aria-pressed="true"] { background: var(--v2-ink, #1a1a1a); color: #fff; }
.w-map-box { position: relative; width: 100%; background: #dfe7ec; overflow: hidden; }
.w-map-box svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.w-map-note { margin: 8px 0 0; font-size: 11.5px; color: var(--grey-strong, #5e5d57); }
@media (min-width: 860px) {
  [data-step="3"] .w-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px 18px; align-items: start; }
  [data-step="3"] .w-body > * { margin-top: 0; }
  [data-step="3"] .w-body > .w-map { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 130px; }
  [data-step="3"] .w-body > .w-areas { grid-column: 1; grid-row: 1; }
  [data-step="3"] .w-body > .w-ins { grid-column: 1; grid-row: 2; }
}

/* Result step, rebuilt for balance: the floor runs the full width as one short band (picture left, key and team bar right),
   then the team table and the advisor button sit side by side, each only as tall as it needs. Nothing stretches into blank space. */

@media (min-width: 860px) {
  [data-step="4"] .w-body { grid-template-rows: none; }
  
  [data-step="4"] .w-body > :nth-child(3) { grid-column: 1; grid-row: 4; align-self: start; }
  [data-step="4"] .w-body > .w-cta { grid-column: 2; grid-row: 4; align-self: start; }
  [data-step="4"] .w-body > .v2-fold { grid-column: 1 / -1; grid-row: 5; }

}

/* The map in the site's own hand: white card, hairline rule, paper-grey sea, the markets as real URA planning geography in tints
   of the brand red (lighter is cheaper). The step is two columns: the list, then the map over "What it means". */
.w-map { background: #fff; border: 1px solid var(--v2-rule, #dbd9d5); color: var(--v2-ink, #1a1a1a); }
.w-map-k { color: var(--grey-strong, #5e5d57); letter-spacing: 0; text-transform: none; font-size: 12px; }
.w-map-scale { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--v2-ink, #1a1a1a); font-variant-numeric: tabular-nums; }
.w-map-scale i { width: 84px; height: 8px; background: linear-gradient(90deg, #f3ebe8, #a6192e); }
.w-map-scale em { font-style: normal; }
/* Sea a faint cool grey; land with a soft shadow under the coast. Each market is tinted on a continuous scale (--t, 0 to 100%)
   from the lightest red to the brand red; land in no market (the outlying islands, a removed market) a neutral paper grey. White
   1px borders between markets, a hairline of the subzones inside one so the geography reads. The chosen market is raised over
   its neighbours: a brand-red edge between thin white halos and a soft lift; hover and focus ring an area in dashed brand red. */
.w-map-box { background: #eceeee; }
.w-map-box svg { overflow: visible; }
.w-map-box svg path { fill-rule: evenodd; }
.w-map-box .w-land-shadow { fill: rgba(26, 26, 26, .2); filter: blur(.0035px); transform: translate(.001px, -.0012px); }
.w-map-box .w-neutral { fill: #e6e5e1; }
.w-map-box .w-cell, .w-map-box .w-on-fill { fill: color-mix(in srgb, #a6192e var(--t, 50%), #f3ebe8); }
.w-map-box .w-cell { stroke: none; cursor: pointer; transition: filter 120ms; outline: none; }
.w-map-box .w-cell:hover, .w-map-box .w-cell:focus-visible { filter: brightness(.94) saturate(1.08); }
.w-map-box .w-inner, .w-map-box .w-borders, .w-map-box .w-coast, .w-map-box .w-hot, .w-map-box .w-hot-halo, .w-map-box .w-on, .w-map-box .w-on-halo {
  fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.w-map-box .w-on-fill { pointer-events: none; }
.w-map-box .w-inner { stroke: rgba(255, 255, 255, .2); stroke-width: .6; }
.w-map-box .w-borders { stroke: #fff; stroke-width: 1; }
.w-map-box .w-coast { stroke: rgba(26, 26, 26, .16); stroke-width: .6; }
.w-map-box .w-hot-halo { stroke: #fff; stroke-width: 4.5; }
.w-map-box .w-hot { stroke: #a6192e; stroke-width: 2; stroke-dasharray: 6 3; }
.w-map-box .w-on-lift { filter: drop-shadow(0 .0008px .0016px rgba(26, 26, 26, .4)); }
.w-map-box .w-on-halo { stroke: #fff; stroke-width: 6; }
.w-map-box .w-on { stroke: #a6192e; stroke-width: 2.5; }
.w-map-box .w-lab { fill: var(--v2-ink, #1a1a1a); font-family: inherit; font-weight: 500; pointer-events: none; paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: .0025px; stroke-linejoin: round; }
.w-map-box .w-lab .w-lab-p { font-weight: 600; }
/* Tap area for the small areas (guided.js): invisible, and only where the pointer is a finger */
.w-map-box .w-hit { fill: none; stroke: none; pointer-events: none; }
@media (pointer: coarse) {
  .w-map-box .w-hit { stroke-width: 24px; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: stroke; cursor: pointer; }
  .w-map-box .w-hit-in { pointer-events: fill; }
}
.w-map-tip { position: absolute; z-index: 3; transform: translate(-50%, -100%); padding: 6px 10px; background: var(--v2-ink, #1a1a1a); color: #fff; font-size: 13px; line-height: 1.3; white-space: nowrap; pointer-events: none; border-radius: 10px; }
.w-map-tip b { font-weight: 600; }
.w-map-tip[hidden] { display: none; }
.w-map-none { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--grey-strong, #5e5d57); }
.w-map-none i { width: 12px; height: 12px; background: #e6e5e1; border: 1px solid #fff; box-shadow: 0 0 0 1px #d3d4d2; }
.w-map-note { color: var(--grey-strong, #5e5d57); }
@media (max-width: 599px) { .w-map-scale { font-size: 13px; } .w-map-scale i { width: 110px; height: 10px; } }
@media (prefers-reduced-motion: reduce) { .w-map-box .w-cell { transition: none; } }
@media (min-width: 860px) {
  [data-step="3"] .w-body > .w-areas { grid-column: 1; grid-row: 1 / span 2; }
  [data-step="3"] .w-body > .w-map { grid-column: 2; grid-row: 1; position: static; }
  [data-step="3"] .w-body > .w-ins { grid-column: 2; grid-row: 2; }
  [data-step="3"] .w-ins .w-insl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Step 3, two columns that end together: the list's rows share whatever height the map and the notes make, so no blank gap opens under it. */
@media (min-width: 860px) {
  [data-step="3"] .w-body > .w-areas { align-self: stretch; display: grid; grid-auto-rows: 1fr; }
}

/* Balance details: the lease form's three figures share one row (Size, Rent, Lease ends) instead of leaving the last alone,
   and the five quick picks are one even row on a phone instead of four and an orphan. */
@media (min-width: 760px) {
  #g-lease-wrap #leaseBar .lc-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #g-lease-wrap #leaseBar .lc-form > :is(#lcFormLegend, .lc-f--wide) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .g-picks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .g-picks .g-pick { min-width: 0; padding-left: 0; padding-right: 0; }
}

/* What to do next: three plain cards with the whole sentence showing, no "More" to open. Side by side from 760px, stacked below. */
#g-lease-wrap .v2-points { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; border-top: 0; }
#g-lease-wrap .v2-points li { display: block; padding: 16px 18px; border: 1px solid var(--v2-rule, #dbd9d5); background: #fff; }
#g-lease-wrap .v2-points li::before { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-bottom: 10px; border-radius: 50%; background: var(--v2-red, #a6192e); color: #fff; font-size: 13px; }
#g-lease-wrap .v2-points b { display: block; font-size: 16px; line-height: 1.3; }
#g-lease-wrap .v2-points p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--v2-ink, #1a1a1a); }
@media (min-width: 760px) { #g-lease-wrap .v2-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The lease step is already the rent check: no "Is my rent fair?" button here, and the advisor is asked once, in the offer card. */
#g-lease-wrap [data-goto="lease"] { display: none; }

/* The advisors in the enquiry form, as on the microsite: white tiles on the red panel, dark type, LinkedIn in its own blue (5.7:1 on white). */
:is(.lease-modal, #lcOffer) .enq-head .adv-team { display: grid; gap: 10px; }
:is(.lease-modal, #lcOffer) .enq-head .adv-person { background: #fff; padding: 12px; align-items: center; gap: 12px; border-radius: 0; }
:is(.lease-modal, #lcOffer) .enq-head .adv-face { width: 48px; height: 48px; flex: none; }
:is(.lease-modal, #lcOffer) .enq-head .adv-av { color: var(--kf-red, #a6192e); }
:is(.lease-modal, #lcOffer) .enq-head .adv-name { color: var(--v2-ink, #1a1a1a); font-size: 14px; }
:is(.lease-modal, #lcOffer) .enq-head :is(.adv-title, .adv-cea) { color: var(--grey-strong, #5e5d57); font-size: 11.5px; }
:is(.lease-modal, #lcOffer) .enq-head .adv-tel { color: var(--kf-red, #a6192e); font-size: 13px; font-weight: 600; text-decoration: none; }
:is(.lease-modal, #lcOffer) .enq-head .adv-tel:hover { text-decoration: underline; }
:is(.lease-modal, #lcOffer) .enq-head .adv-li { color: #0A66C2; font-size: 12.5px; font-weight: 600; }
:is(.lease-modal, #lcOffer) .enq-head .adv-person :focus-visible { outline-color: var(--v2-ink, #1a1a1a); }

/* Balance, step 1: the people controls and the live estimate side by side from 860px; on a phone the estimate card steps aside once there is an answer (the bar has it). */
.g-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.g-top .g-est.is-ready { display: none; }
@media (min-width: 860px) {
  .g-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
  .g-top .g-est, .g-top .g-est.is-ready { display: block; align-self: stretch; }
  .g-top .g-est .w-big { font-size: clamp(44px, 5vw, 64px); }
}

/* Balance, lease step: the advisor-review card runs edge to edge like the sections around it (no extra inset), and with nothing
   beside it, its words sit on the left and its six deliverables on the right instead of leaving half the card blank. */
#g-lease-wrap #lcOfferBand .wrap { padding-left: 0; padding-right: 0; max-width: none; }
#g-lease-wrap #lcOfferBand .lc-adviser { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 860px) {
  #g-lease-wrap #offerBody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  #g-lease-wrap #offerBody > * { grid-column: 1; }
  #g-lease-wrap #offerBody > #offerList { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
  #g-lease-wrap #offerBody > #hcOpenBtn { justify-self: start; }
}
@media (min-width: 860px) { .g-top .g-ppl { display: grid; align-content: center; gap: 12px; } }

/* "Have an advisor review your lease", redrawn in the site's square, hairline language: a white card with an even padding, the red tag
   as a small label (not a stretched bar), words on the left with room around the button, and the six deliverables on the right
   as a neat two-by-three grid that starts level with the heading and is parted from the words by a hairline. */
#g-lease-wrap #lcOfferBand { background: transparent; padding: 0; }
#g-lease-wrap #lcOfferBand .lc-adviser { background: #fff; border: 1px solid var(--v2-rule, #dbd9d5); border-radius: 0; padding: 28px 32px; margin: 0; }
#g-lease-wrap #lcOffer { max-width: none; }
#g-lease-wrap #offerBody #offerDeliver { display: inline-block; width: auto; max-width: 100%; padding: 4px 10px; margin: 0 0 14px; font-size: 11.5px; letter-spacing: .02em; }
#g-lease-wrap #offerBody .offer-title { margin: 0 0 6px; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; }
#g-lease-wrap #offerBody #offerCount { margin: 0 0 14px; }
#g-lease-wrap #offerBody .offer-text { margin: 0 0 22px; font-size: 15px; line-height: 1.55; max-width: 52ch; }
#g-lease-wrap #offerBody #hcOpenBtn { border-radius: 0; min-height: 52px; padding: 0 28px; margin: 0 0 18px; }
#g-lease-wrap #offerBody :is(#offerUrgent, #offerFine) { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; max-width: 56ch; }
#g-lease-wrap #offerBody #offerList { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; list-style: none; align-self: start; }
#g-lease-wrap #offerBody #offerList li { padding: 14px 0; border-top: 1px solid var(--v2-rule, #dbd9d5); }
@media (min-width: 860px) {
  #g-lease-wrap #offerBody { column-gap: 48px; }
  #g-lease-wrap #offerBody > #offerList { grid-row: 1 / span 7; padding-left: 48px; border-left: 1px solid var(--v2-rule, #dbd9d5); }
}
@media (max-width: 859px) { #g-lease-wrap #lcOfferBand .lc-adviser { padding: 20px 18px; } #g-lease-wrap #offerBody #offerList { margin-top: 20px; } }
#g-lease-wrap #offerBody > #offerDeliver { display: inline-flex !important; width: fit-content !important; justify-self: start; }
@media (min-width: 860px) {
  #g-lease-wrap #offerBody > #offerList { align-self: stretch; grid-auto-rows: 1fr; align-content: stretch; }
  #g-lease-wrap #offerBody > #offerList li { display: flex; flex-direction: column; justify-content: center; }
}

/* Result step, finishing: the floor card starts at its top edge (no stray gap or rule), its right side is spread top to bottom with the
   team figures in one row, and the last row is two matching square cards: the table, and the advisor. */
[data-step="4"] .w-card{ border-radius: 0; }

.w-cta-p { margin: 0 0 16px; font-size: 15px; line-height: 1.5; max-width: 40ch; }
[data-step="4"] .w-cta { padding: 24px; background: var(--paper, #f5f5f3); display: flex; flex-direction: column; align-items: flex-start; }
[data-step="4"] .w-cta .v2-btn { border-radius: 0; }
[data-step="4"] .w-cta .w-cta-note { margin-top: 14px; }
@media (min-width: 860px) {
  [data-step="4"] .w-body > .w-cta { align-self: stretch; justify-content: center; }
  [data-step="4"] .w-body > :nth-child(3) { align-self: stretch; }

}

/* Colour audit: the custom-area input had no colour and fell back to UA black. */
#w-custom-in { color: var(--ink); }