/* One shape language, the microsite's ("softer corners", e056493), last in the cascade. Each selector gets its radius here, once:
   panels, cards, dialogs, advisor cards and popups 12 · tiles, maps, the floor stage, switch tracks, closes and icon buttons 10 ·
   fields 8 · buttons, chips and contact rows 8 · switch buttons inside a track 7 · tags 6 · avatars and number discs round.
   Square by design (as on the microsite): the hero band, the red column in the enquiry dialog, the "Enquiring about" band.
   Shapes, colours and type live here; phone heights and hit areas live in mobile.css (no radius there: it loads last). */
:root { --radius: 12px; --c-r: 12px; --c-r-ctl: 8px; --r-panel: 12px; --r-tile: 10px; --r-field: 8px; --r-btn: 8px; --r-seg: 7px; --r-tag: 6px;
  /* field edges keep 3.5:1 on white (the microsite's #B7B4AE is 1.9:1) */
  --field-line: #8A8880; }

/* cards, panels and dialogs */
html body :is(.w-card, .w-map, .lc-adviser, .g-lease-form, #leaseBar, .v2-points li, .w-custom, .sp-team, .g-lock-card, .fm-card, .settings-card, .lease-modal, .help-modal, .why-dialog, .v2-rail > div){ border-radius: 12px !important; }
html body :is(.lease-modal, .help-modal, .why-dialog) { overflow: hidden; }
/* tiles, option cards, maps and the floor stage */
html body :is(.g-opt, .w-area, .w-insl li, .v2-fold, .w-cta, .v2-kpis > div, .g-save-total, .g-unlocked, .rd-inputs-wk-verdict, .g-lock-ghost .w-card, .hc-prefilled){ border-radius: 10px !important; }
html body :is(.map-box, .w-map-box){ border-radius: 10px !important; overflow: hidden; }
/* buttons, 8px. Primary red 700, secondary white with an ink edge 600, quiet grey text 600 */
html body :is(.v2-btn, .kf-btn, .w-back, .w-next, #hcOpenBtn, #leaseSubmitBtn, #leaseDismiss, #help-btn, .why-go, .rd-inputs-wk-apply, .g-lock-card button[type=submit], .skip-link, .rd-trail-b) { border-radius: 8px !important; }
html body :is(.v2-btn:not(.v2-btn--ghost), .kf-btn--primary, .w-next, #leaseSubmitBtn, #hcOpenBtn, .g-lock-card button[type=submit]) { font-weight: 700; letter-spacing: .02em; }
html body :is(.w-back, .v2-btn--ghost, .kf-btn--ghost, .kf-btn--secondary, .why-go) { font-weight: 600; }
html body :is(.w-nav .w-back, .v2-btn--ghost) { border: 1px solid var(--ink, #1a1a1a); }
html body .kf-btn--quiet { background: transparent; border: 0; color: var(--grey-strong, #5e5d57); font-weight: 600; text-decoration: none; }
/* fields, 8px */
html body :is(#g-n, .lc-box, #lcArea, #lcGrade, #lcAreaText, .standard-select, .rd-inputs-wk-spare select, .w-custom-f label, #v2-area, .rd-inputs-wk-nm input, .rd-inputs-wk-sz input,
  :is(#leaseModal, #hcForm, .hc-form, .g-lock-grid, .lc-form) :is(input:not([type=checkbox]):not([type=radio]), select, textarea)) { border-radius: 8px !important; }
html body :is(.lc-box, #lcArea, #lcGrade, .w-custom-f label, .g-lock-grid input, :is(#leaseModal, #hcForm, .hc-form) :is(input:not([type=checkbox]):not([type=radio]), select, textarea)) { border: 1px solid var(--field-line); background: #fff; }
html body .lc-box :is(input, select) { border: 0; }
html body :is(#leaseModal, #hcForm, .hc-form, .g-lock-grid, .lc-form) :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus,
html body :is(.lc-box, .w-custom-f label):focus-within, html body :is(#g-n, #lcArea, #lcGrade):focus { border-color: var(--kf-red, #a6192e) !important; box-shadow: 0 0 0 2.7px rgba(166, 25, 46, .09); outline: 0; }
/* chips, 8px; switch tracks 10 with 7px buttons inside; icon buttons and steppers 10; tags 6; avatars and number discs round */
html body :is(.w-chip, .g-pick, .rd-inputs-wk-chip, .amen-opt, .rd-inputs-wk-day) { border-radius: 8px !important; }
html body :is(.w-map-v, .sp-switch){ border-radius: 10px !important; }
html body .input-row { border-radius: 10px !important; overflow: hidden; } /* the full view's number stepper, a track as the microsite's .rail-stepper */
html body :is(.w-map-v button, .sp-tab, .sp-switch .m-pill){ border-radius: 7px !important; }
html body :is(.g-stepb){ border-radius: 10px !important; }
/* the small "+" of a fold (22-24px): a rounded square at the scale of the box, not a circle */
html body :is(.lc-notes > summary, .lc-points li details > summary)::after { border-radius: 6px !important; }
html body :is(.offer-chip, .v2-tag, .kf-tag) { border-radius: 6px !important; }
html body :is(.hero-adviser, .hero-adviser-img, .path-num, .w-chip-n, .kf-tip-i, .adv-face, .adv-av, .v2-tl-dot, .m-rip, .nav-badge) { border-radius: 50% !important; }
/* tags: the microsite's status flag, sentence case */
html body :is(.v2-tag, .kf-tag) { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; padding: 2px 9px; border: 1px solid var(--line, #dbd9d5); background: #fff; color: var(--grey-strong, #5e5d57); }
html body .offer-chip { text-transform: none !important; letter-spacing: 0 !important; padding: 3px 10px; }
/* bars and tracks: rounded tracks, flat fills */
html body :is(.v2-track, .v2-track--split, .v2-wk-col) { border-radius: 6px; overflow: hidden; }

/* One close button, the microsite's: a 40px rounded square (10px), white, an ink edge; the fill greys on hover, nothing turns. */
html body :is(.lease-modal, .help-modal, .why-dialog) .modal-close { position: absolute !important; top: 14px !important; right: 14px !important; float: none !important; margin: 0 !important; width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink, #1a1a1a); border-radius: 10px !important; background: #fff; color: var(--ink, #1a1a1a) !important; -webkit-text-fill-color: currentColor; font-size: 15px; line-height: 1; cursor: pointer; z-index: 5; transform: none; transition: background-color .2s; }
html body :is(.lease-modal, .help-modal, .why-dialog) .modal-close:hover { background: var(--paper-2, #eae9e6); }
html body :is(.lease-modal, .help-modal, .why-dialog) .modal-close:focus-visible { outline: 2px solid var(--kf-red, #a6192e); outline-offset: 2px; }

/* Selected: red, as the microsite's view switch and filter chips. Option cards get a 2px red edge (border plus an inset ring). */
html body :is(.g-opt.is-on, .w-area.is-on) { border-color: var(--kf-red, #a6192e); box-shadow: inset 0 0 0 1px var(--kf-red, #a6192e); outline: 0; }
html body :is([data-lease][aria-pressed="true"], .amen-opt[aria-pressed="true"], .amen-opt.is-on, .sp-tab[aria-selected="true"], .sp-tab.is-on, .w-map-v button[aria-pressed="true"]){ background: var(--kf-red, #a6192e) !important; border-color: var(--kf-red, #a6192e) !important; color: #fff !important; }
/* view switches (3D | Plan, Map | List) are the microsite's view-seg: a 10px track with a 3px pad, a red 7px button inside */
html body :is(.w-map-v){ padding: 3px; gap: 2px; border: 1px solid #B7B4AE; background: #fff; }

/* 3D floor zoom: 36px icon buttons with an ink edge ("Reset" wider) */

/* One button size; Back and Next stay the 52px pair in the footer. */
:is(#panel-space, #panel-lease, .lease-modal, .help-modal, .hc-form) :is(.v2-btn, .kf-btn) { min-height: 48px; padding-left: 24px; padding-right: 24px; font-size: 15px; letter-spacing: .02em; }

/* Fields in the enquiry and health forms are 44px tall. (The lease step's own fields sit inside a bordered box that already sets them.) */
:is(.lease-modal, .hc-form) :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { min-height: 44px; }

/* The lease form: Where takes two columns with Grade beside it, then Size, Rent and Lease ends on one row (rows are named so nothing is left to auto-placement). */
@media (min-width: 760px) {
  #g-lease-wrap #leaseBar .lc-form { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; }
  #g-lease-wrap #leaseBar .lc-form > #lcFormLegend { grid-column: 1 / -1; grid-row: 1; }
  #g-lease-wrap #leaseBar .lc-form > .lc-f--wide { grid-column: 1 / span 2 !important; grid-row: 2; min-width: 0; }
  #g-lease-wrap #leaseBar .lc-form > #lcGradeField { grid-column: 3 !important; grid-row: 2; min-width: 0; }
  #g-lease-wrap #leaseBar .lc-form > #lcAreaTextField { grid-column: 1 / -1; grid-row: 3; }
  #g-lease-wrap #leaseBar .lc-form > .s-num { grid-column: 1; grid-row: 4; }
  #g-lease-wrap #leaseBar .lc-form > #lcRentField { grid-column: 2; grid-row: 4; }
  #g-lease-wrap #leaseBar .lc-form > .s-date { grid-column: 3; grid-row: 4; }
}

/* One gutter: the wizard runs the width of the header and the hero, with the same side padding as the rest. */
.w { max-width: none; }
.g-shell > .wrap, .g-shell .wrap.w { padding-left: 24px; padding-right: 24px; }
@media (max-width: 640px) { .g-shell > .wrap, .g-shell .wrap.w { padding-left: 16px; padding-right: 16px; } }

#g-lease-wrap .hc-form { max-width: none; }

/* Step by step details */
@media (min-width: 640px) { .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; } }
[data-step="3"] .w-body > .w-ins { align-self: stretch; }

#g-lease-wrap [data-slot="lease-act"] { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
#g-lease-wrap [data-slot="lease-act"] > * { margin: 0; }
@media (max-width: 640px) { .w-nav > span:first-child:empty + .w-next { flex: 1; max-width: none; } }
.w .w-foot { font-size: 12.5px; }
html body #panel-space .w-foot :is(.text-link, button, a), html body #panel-space #resetSpace { font-size: 12.5px; }
#g-lease-wrap .w-next-step { display: none; }

/* Phone: every control you press is at least 44px tall. */
@media (max-width: 640px) {
  .w-chip,
#help-btn,
#leaseSubmitBtn,
#leaseDismiss,
.w-foot :is(a, button){ min-height: 44px; }
  :is(.adv-tel, .adv-li, .hero-why) { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Admin: the Forms tab grows with its content instead of clipping inside a screen-high box; the filter and export controls match the rest. */
@media (min-width: 1200px) {
  #adminFormsPanel.admin-fit { height: auto; }
  #adminFormsPanel .fm-grid { grid-template-rows: auto auto; }
  #adminFormsPanel .fm-grid > * { overflow: visible; }
  #adminFormsPanel .fm-grid > .fm-area-recent { max-height: 306px; overflow: auto; }
}
.ck-tools :is(input, button), #adminFormsPanel .admin-toolbar :is(select, button) { height: 36px; padding: 0 12px; border: 1px solid var(--line-strong, #b7b4ae); border-radius: 10px; background: #fff; font: inherit; font-size: 12.6px; color: var(--ink, #1a1a1a); }

/* ---- Swiss: the type and the grid do the work ---- */
:root { --sw-rule: #DBD9D5; --sw-mute: #5E5D57; }
/* a step counter and the small labels: sentence case, no tracking, 600 grey (the microsite has no tracked capitals) */
.w-count, .w-map-k, .w-eyebrow, .w-facts dt, .w-ins-k, .v2-lab, .fm-kpi-label, .ck-title { font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--sw-mute); }
/* a section heading inside a step */
.w-sub { margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink, #1a1a1a); }
/* headings: one confident size, tight, medium weight; hints in grey on a short measure */
.w .w-title { font-weight: 500; letter-spacing: -.03em; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; }
.w-hint { color: var(--sw-mute); max-width: 60ch; }
/* figures: tabular, light and large, tracked in */
.w-big, #w-ans, .w-facts dd, .w-ins-v, .g-opt-m, .g-opt-d, .w-area-v, .w-lev-v, .fm-kpi-value { font-variant-numeric: tabular-nums; }
.w-big { font-weight: 300; letter-spacing: -.04em; }
/* surfaces: white with a hairline, not grey fills; rules between rows */
html body :is(.w-card, .lc-adviser, .w-map, .g-lease-form){ background: #fff; border: 1px solid var(--sw-rule); }
html body :is(.g-opt, .w-area, .w-insl li, .v2-points li) { border-color: var(--sw-rule); }
.w-nav { border-top: 1px solid var(--sw-rule); }
/* the advisor-review card: the tag is a small 6px tag, the heading tight, the deliverable numbers a readout */
#g-lease-wrap #offerDeliver { font-family: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; padding: 3px 10px; }
#g-lease-wrap #offerTitle { font-weight: 500; letter-spacing: -.025em; }
#g-lease-wrap #offerList li > :first-child { font-family: inherit; font-size: 12px; letter-spacing: 0; }

/* ---- Step 1: the team-by-team grid, redrawn. A clear control to open it, then a clean table: team and people on the left, the five days
   as even 44px cells, a readout of who is in each day, and one calm line saying what it means. ---- */
#w-rec .g-fold { margin-top: 18px; border: 1px solid var(--sw-rule); border-radius: 12px; background: #fff; }
#w-rec .g-fold > summary { min-height: 76px; padding: 14px 18px; gap: 16px; cursor: pointer; }
#w-rec .g-fold:hover { border-color: var(--ink, #1a1a1a); }
#w-rec .g-fold .g-fold-t { display: grid; gap: 4px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
#w-rec .g-fold .g-fold-t small { font-size: 13px; font-weight: 300; color: var(--sw-mute); letter-spacing: 0; }
#w-rec .g-fold > summary::after { width: 38px; height: 38px; border: 1.5px solid var(--v2-red, #a6192e); border-radius: 10px !important; color: var(--v2-red, #a6192e); font-size: 22px; font-weight: 300; flex: none; transition: background-color .2s, color .2s, transform .3s cubic-bezier(.2, 0, 0, 1); }
#w-rec .g-fold > summary:hover::after { background: var(--v2-red, #a6192e); color: #fff; }
#w-rec .g-fold[open] > summary { border-bottom: 1px solid var(--sw-rule); }
#w-rec .g-fold #w-week-slot { padding: 20px 18px 22px; }

#w-week-slot .rd-inputs-wk { --wk-day: 44px; --wk-gap: 8px; --wk-size: 76px; gap: 18px; }
#w-week-slot .rd-inputs-wk-title { font-size: 18px; font-weight: 500; letter-spacing: -.015em; }
#w-week-slot .rd-inputs-wk-lead { margin: -12px 0 0; font-size: 13.5px; }
#w-week-slot .rd-inputs-wk-tools { justify-content: space-between; align-items: center; gap: 12px 28px; }
#w-week-slot .rd-inputs-wk-chip { min-height: 38px; padding: 0 16px; font-size: 13.5px; }
#w-week-slot .rd-inputs-wk-chip--n { min-width: 38px; padding: 0; }
#w-week-slot .rd-inputs-wk-dk { font-size: 13px; gap: 6px; }
#w-week-slot .rd-inputs-wk-hrow { padding: 0 0 10px; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
#w-week-slot .rd-inputs-wk-row { padding: 10px 0; border-top: 1px solid var(--sw-rule); }
#w-week-slot .rd-inputs-wk-sw { width: 10px; height: 10px; border-radius: 50% !important; }
/* names read as text you can edit: no box until you point at it */
#w-week-slot .rd-inputs-wk-nm input { height: 40px !important; padding: 0 10px !important; margin-left: 0 !important; font-size: 15px !important; border: 1px solid transparent !important; border-radius: 8px !important; background: transparent !important; }
#w-week-slot .rd-inputs-wk-nm input:hover { border-color: var(--line-strong) !important; background: #fff !important; }
#w-week-slot .rd-inputs-wk-nm input:focus { border-color: var(--ink, #1a1a1a) !important; background: #fff !important; outline: 0 !important; }
#w-week-slot .rd-inputs-wk-sz input { height: 44px !important; font-size: 15px; border-radius: 8px !important; }
#w-week-slot .rd-inputs-wk-day { border-color: var(--sw-rule); }
#w-week-slot .rd-inputs-wk-tot { padding: 14px 0 0; border-top: 1px solid var(--sw-rule); }
#w-week-slot .rd-inputs-wk-tot-k { font-size: 13px; font-weight: 500; align-self: end; padding-bottom: 6px; }
#w-week-slot .rd-inputs-wk-tot-n { align-self: end; padding-bottom: 6px; }
#w-week-slot .rd-inputs-wk-tb { height: 96px; }
#w-week-slot .rd-inputs-wk-under { padding-top: 4px; }
#w-week-slot .rd-inputs-wk-add { padding: 9px 14px; border: 1px dashed var(--line-strong); border-radius: 8px; text-decoration: none; font-size: 13.5px; }
#w-week-slot .rd-inputs-wk-add:hover { border-color: var(--ink, #1a1a1a); border-style: solid; }
/* what it means: one soft bar, the status beside it as a small pill */
#w-week-slot .rd-inputs-wk-verdict { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: #f5f5f3; }
#w-week-slot .rd-inputs-wk-line { margin: 0; font-size: 14px; line-height: 1.5; }
#w-week-slot .rd-inputs-wk-apply { flex: none; min-height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); background: #fff; font-size: 13px; }
#w-week-slot .rd-inputs-wk-tip { font-size: 13.5px; color: var(--sw-mute); }
@media (max-width: 640px) { #w-week-slot .rd-inputs-wk-verdict { flex-direction: column; align-items: flex-start; } }
/* The fold already says what the grid is: its own heading and lead would repeat it. */
#w-rec .g-fold .rd-inputs-wk-title, #w-rec .g-fold .rd-inputs-wk-lead { display: none; }

/* Lease against need */
.g-save { margin-top: 14px; padding: 20px 22px; }
.g-save-lead { margin: 0 0 14px; font-size: 15px; line-height: 1.5; }
.g-save .w-levers { margin: 0; }
.g-save-total { margin: 16px 0 6px; padding: 14px 16px; background: #f5f5f3; font-size: 15px; line-height: 1.5; }
.g-save-total b { color: var(--st-good, #2e7d4f); font-weight: 600; }

/* ---- Hero and buttons as on the microsite ("Type 04"): a flush full-width red band, one big two-weight headline, a white rule over the
   line and over the advisors and button, a 44px button with the 8px corner. (hero.css had squeezed this into a small rounded strip.) ---- */
.band.band--intro { margin: 0 !important; border-radius: 0 !important; padding: 26px 30px 18px; }
.band.band--intro .wrap { grid-template-columns: minmax(0, 1fr) auto; column-gap: 0; row-gap: 0; align-items: start; }
.band.band--intro #pageTitle { grid-column: 1 / -1; grid-row: 1; font-size: clamp(40px, 5.4vw, 72px); line-height: .98; letter-spacing: -.045em; white-space: normal; text-wrap: balance; }
.band.band--intro .intro-line { grid-column: 1; grid-row: 2; align-self: stretch; margin: 20px 0 0; padding: 12px 0 0; border: 0; border-top: 3px solid var(--white); font-size: 13px; }
.band.band--intro .hero-side { grid-column: 2; grid-row: 2; align-self: stretch; margin: 20px 0 0 !important; padding: 12px 0 0 28px; border: 0; border-top: 3px solid var(--white); gap: 18px; }
.band.band--intro .hero-adviser-img { width: 34px; height: 34px; }
.band.band--intro .path-tabs { grid-column: 1; grid-row: 2; align-self: stretch; display: flex; align-items: center; margin: 20px 0 0; padding: 12px 0 0; border: 0; border-top: 3px solid var(--white); }
.band.band--intro .hero-pills { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 12px; }
html body .band.band--intro .hero-cta, html body #heroAdviser { border-radius: 8px !important; min-height: 44px; padding: 0 20px; font-size: clamp(13px, calc(11.4px + .18vw), 14.8px); font-weight: 600; }
@media (min-width: 681px) and (max-width: 1199px) { .band.band--intro { padding: 22px 22px 16px; } }
@media (max-width: 680px) {
  .band.band--intro { padding: 18px 16px 14px; }
  .band.band--intro .wrap { grid-template-columns: minmax(0, 1fr); }
  .band.band--intro #pageTitle { font-size: clamp(36px, calc(31.5px + .49vw), 41px); }
  .band.band--intro :is(.intro-line, .hero-side, .path-tabs, .hero-pills) { grid-column: 1; grid-row: auto; }
  .band.band--intro .hero-side { justify-content: space-between; padding-left: 0; }
  .band.band--intro .hero-cta { flex: 1; }
}

/* ---- The lease results gate: a blurred placeholder behind a short form ---- */
.g-lock { position: relative; display: grid; margin-top: 8px; }
.g-lock > * { grid-area: 1 / 1; }
.g-lock-ghost { filter: blur(7px); opacity: .85; user-select: none; pointer-events: none; max-height: 620px; overflow: hidden; align-self: start; }
.g-ghost-strip { height: 10px; margin: 18px 0 22px; background: linear-gradient(90deg, #EAE9E6 0 30%, #B7B4AE 30% 62%, #EAE9E6 62%); }
.g-ghost-strip i { display: block; width: 14px; height: 14px; margin: -2px 0 0 46%; border-radius: 50%; background: var(--v2-red, #a6192e); }
.g-lock-card { position: relative; z-index: 2; align-self: start; justify-self: center; width: min(600px, 100%); margin: 28px 0; padding: 26px 28px; background: #fff; border: 1px solid var(--sw-rule); box-shadow: 0 18px 50px rgba(26, 26, 26, .16); }
.g-lock-eyebrow { margin: 0 0 6px; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--v2-red, #a6192e); }
.g-lock-card h3 { margin: 0 0 8px; font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.g-lock-lead { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--sw-mute); }
.g-lock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-bottom: 14px; }
.g-lock-grid label { display: grid; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: .02em; }
.g-lock-grid label small { font-weight: 300; color: var(--sw-mute); }
.g-lock-grid input { min-height: 44px; padding: 0 12px; font: inherit; font-size: 15px; font-weight: 300; }
.g-lock-check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; font-size: 11.5px; line-height: 1.5; color: var(--sw-mute); }
.g-lock-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--v2-red, #a6192e); }
.g-lock-check a { color: inherit; }
.g-lock-card .v2-btn { width: 100%; margin-top: 8px; }
.g-lock-err { min-height: 1.2em; margin: 10px 0 0; font-size: 13px; color: var(--danger, #b23a2e); }
.g-lock-note { margin: 4px 0 0; font-size: 12px; color: var(--sw-mute); }
.g-unlocked { margin: 0 0 14px; padding: 12px 14px; background: #f5f5f3; border-left: 3px solid var(--st-good, #2e7d4f); font-size: 14px; }
/* While locked, the hero's lease line must not give the verdict away either. */
body.kf-locked #tabStatus-lease { display: none; }
@media (max-width: 640px) { .g-lock-grid { grid-template-columns: 1fr; } .g-lock-card { padding: 20px 18px; } }
/* The header gear is the microsite's own line icon (17px, 1.8 stroke) in ink, as on the microsite. */
html body .topbar-main .nav-link--icon { color: #1A1A1A; line-height: 1; }
html body .topbar-main .nav-link--icon svg { display: block; width: 17px; height: 17px; }

/* ---- Admin: what visitors clicked, as a dashboard ---- */
.ck-card { margin: 0 0 22px; }
.ck-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ck-head h3 { margin: 0 0 4px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.ck-sec { margin: 28px 0 10px; font-size: 14px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--sw-mute); }
.ck-dash { display: grid; gap: 14px; }
.ck-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; }
.ck-kpis .fm-kpi { background: #fff; border: 1px solid var(--sw-rule); border-radius: 12px; padding: 12px 14px; }
.ck-delta { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 500; }
.ck-delta.is-up { color: var(--st-good, #2e7d4f); } .ck-delta.is-down { color: var(--v2-red, #a6192e); }
.ck-box { background: #fff; border: 1px solid var(--sw-rule); border-radius: 12px; padding: 16px 18px 18px; min-width: 0; }
.ck-bh { margin: 0 0 3px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.ck-bsub { margin: 0 0 12px; font-size: 12px; color: var(--sw-mute); line-height: 1.4; }
.ck-row { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ck-row--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .ck-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ck-ins-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ck-ins { margin: 0; padding: 12px 14px; background: #f5f5f3; border-left: 3px solid var(--line-strong, #b7b4ae); border-radius: 8px; }
.ck-ins--good { border-left-color: var(--st-good, #2e7d4f); } .ck-ins--watch { border-left-color: var(--v2-red, #a6192e); }
.ck-ins b { display: block; font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.ck-ins p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--sw-mute); }
/* bar lists */
.ckb { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ckb li { display: grid; grid-template-columns: minmax(90px, 1.4fr) minmax(60px, 1fr) auto; grid-template-areas: "l t v" "s s s"; gap: 2px 10px; align-items: center; }
.ckb-l { grid-area: l; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.ckb-t { grid-area: t; height: 8px; background: #EAE9E6; border-radius: 4px; overflow: hidden; }
.ckb-t i { display: block; height: 100%; background: var(--v2-red, #a6192e); border-radius: 4px; }
.ckb-v { grid-area: v; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.ckb-s { grid-area: s; font-size: 11px; color: var(--sw-mute); }
.ckb-s:empty { display: none; }
/* the journey */
.ckf { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ckf li { display: grid; grid-template-columns: minmax(130px, 1.2fr) minmax(80px, 2fr) 3.2ch 4ch 5ch; grid-template-areas: "l b v p d" "m m m m m"; gap: 2px 10px; align-items: center; }
.ckf-l { grid-area: l; font-size: 13.5px; } .ckf-bar { grid-area: b; height: 22px; background: #EAE9E6; border-radius: 5px; overflow: hidden; }
.ckf-bar i { display: block; height: 100%; background: var(--v2-red, #a6192e); border-radius: 5px; }
.ckf li.is-gate .ckf-bar i { background: #1a1a1a; }
.ckf-v { grid-area: v; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.ckf-p { grid-area: p; font-size: 12px; color: var(--sw-mute); text-align: right; }
.ckf-d { grid-area: d; font-size: 12px; font-weight: 500; color: var(--sw-mute); text-align: right; } .ckf-d.is-bad { color: var(--v2-red, #a6192e); }
.ckf-m { grid-area: m; font-size: 11px; color: var(--sw-mute); } .ckf-m:empty { display: none; }
/* per-day chart */
.ck-svg { display: block; width: 100%; height: 190px; }
.ck-grid { stroke: #DBD9D5; stroke-width: 1; } .ck-ax { fill: #5E5D57; font-size: 10px; font-family: inherit; }
.ck-col { fill: var(--v2-red, #a6192e); opacity: .85; } .ck-col:hover { opacity: 1; }
.ck-line { fill: none; stroke: #1a1a1a; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
/* choices, time on step */
.ck-choices { display: grid; gap: 18px; }
.ck-ch h5 { margin: 0 0 8px; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--sw-mute); }
.ck-dwell { display: grid; gap: 12px; }
.ck-dw { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(70px, 2fr); gap: 2px 10px; align-items: center; }
.ck-dw .ckb-s { grid-column: 2; }
.ck-dws { display: flex; height: 14px; gap: 2px; } .ck-dws i { display: block; background: var(--v2-red, #a6192e); border-radius: 3px; min-width: 3px; }
.ck-legend { margin: 4px 0 0; font-size: 11px; color: var(--sw-mute); }
.ck-cols { columns: 3 260px; column-gap: 22px; margin-top: 12px; }
.ck-block { break-inside: avoid; margin: 0 0 16px; }
.ck-title { display: flex; justify-content: space-between; margin: 0 0 8px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--sw-mute); } .ck-title span { text-transform: none; letter-spacing: 0; }
@media (max-width: 640px) { .ckf li { grid-template-columns: 1fr 3ch 4ch; grid-template-areas: "l v p" "b b d" "m m m"; } }

/* "My area isn't listed": the visitor's own rent per sqft. */
.w-custom { margin-top: 10px; padding: 16px 18px; background: #fff; border: 1px dashed var(--line-strong, #b7b4ae); }
.w-custom.is-on { border: 2px solid var(--v2-red, #a6192e); }
.w-custom-t { margin: 0 0 4px; font-size: 15px; font-weight: 500; } .w-custom-s { margin: 0 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--sw-mute); }
.w-custom-f { display: flex; gap: 10px; flex-wrap: wrap; }
.w-custom-f label { display: flex; align-items: center; gap: 8px; flex: 1 1 140px; min-height: 44px; padding: 0 12px; }
.w-custom-f input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; }
.w-custom-note { min-height: 1.2em; margin: 10px 0 0; font-size: 12.5px; color: var(--sw-mute); }
.w-custom.is-on .w-custom-note { color: var(--v2-ink, #1a1a1a); }
@media (min-width: 860px) { [data-step="3"] .w-body > .w-custom { grid-column: 1; grid-row: 3; } }

/* The team-by-team grid is a table for a few teams: it keeps a table's width on a wide screen instead of stretching names, people and days apart. */
#w-week-slot .rd-inputs-wk { max-width: 860px; margin: 0 auto; }
#w-week-slot .rd-inputs-wk-grid { max-width: 100%; }
#w-week-slot .rd-inputs-wk-tot { align-items: end; }
#w-week-slot .rd-inputs-wk-roof em { background: transparent; }
:is(#w-week-slot, #rd-desk-helper) .rd-inputs-wk-tb { margin-top: 18px; }
#rd-desk-helper .rd-inputs-wk-nm input { font-size: 15px; }
#w-week-slot .rd-inputs-wk-tot-n { white-space: nowrap; }

/* ---- Forms as on the microsite: a rounded card (the gate keeps its red band, square inside the card's corners), sentence-case labels
   ("Name*"), 8px fields with a red focus ring (set once at the top of this file), a red 8px button. Applies to the results gate, the lease
   inputs, the custom rent, the Health Check and the enquiry. ---- */
html body :is(.g-lock-grid, .lc-form, .hc-form, .lease-modal form, .w-custom-f) label:not(.consent-checkbox-label):not(.hc-consent):not(.g-lock-check),
html body :is(.lc-label, .field-label) { font-size: 12px; font-weight: 600; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink-2, #2b2b2b); }
:is(.g-lock-grid label, .lc-form label) small, .lc-label small { font-weight: 300; color: var(--sw-mute); }
:is(.g-lock-grid input, .lc-box, #lcArea, #lcGrade, .hc-form input, .hc-form select, .hc-form textarea, .w-custom-f label) { min-height: 41.4px; }
.w-custom-f .v2-btn, .g-lock-card .v2-btn { min-height: 45px; }
/* the gate: red band, then paper */
.g-lock-card { padding: 0; background: #f5f5f3; border: 1px solid var(--ink, #1a1a1a); box-shadow: 0 18px 50px rgba(26, 26, 26, .22); overflow: hidden; }
.g-lock-head { padding: 25px 25px 20px; background: var(--v2-red, #a6192e); color: #fff; }
.g-lock-head .g-lock-eyebrow { margin: 0 0 6px; color: rgba(255, 255, 255, .82); }
.g-lock-head h3 { margin: 0; font-size: clamp(28px, 3.4vw, 34px); font-weight: 300; line-height: 1.08; letter-spacing: -.02em; color: #fff; }
.g-lock-head h3 b { font-weight: 700; }
.g-lock-head .g-lock-lead { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .92); }
.g-lock-body { padding: 20px 25px 22px; }
.g-lock-grid input { padding: 9.9px 10.8px; font-size: 14px; }
.g-lock-check { font-size: 11px; }
.g-lock-note { margin-top: 12px; font-size: 11px; }
@media (max-width: 640px) { .g-lock-head { padding: 18px 16px 14px; } .g-lock-body { padding: 16px; } }

/* "How this is worked out" tips beside results and headings: small, inline, never wrapping alone */
:is(.w-sub, .w-eyebrow, .w-ins-k, .w-facts dt, .v2-facts dt, .v2-sec, .v2-head2, .v2-head3, .v2-lab, .w-lev-t, .v2-table th) > .kf-tip-i { margin-left: 6px; width: 16px; height: 16px; font-size: 10.5px; font-style: normal; font-family: inherit; vertical-align: 1px; }
.w-eyebrow > .kf-tip-i, .w-lev-t > .kf-tip-i { text-transform: none; letter-spacing: 0; }
.kf-src { margin: 10px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--sw-mute, #5E5D57); }
.kf-src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* The in-depth lease analysis on the results (v2.js analysisHTML), red/ink/paper, rounded as the tiles above. */
html body .v2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
html body .v2-kpis > div { background: #f5f5f3; border-radius: 10px; padding: 10px 12px; }
html body .v2-mkt { width: 100%; }
html body .v2-mkt td { white-space: nowrap; }
html body .v2-mkt .v2-track { display: inline-block; width: 64px; height: 6px; vertical-align: middle; margin-right: 6px; }
html body .v2-mkt tr.is-you th, html body .v2-mkt tr.is-you td { background: #f5f5f3; font-weight: 600; }
html body .v2-mkt tr.is-you .v2-track i { background: #a6192e; }
@media (max-width: 560px) { html body .v2-mkt .v2-track { display: none; } html body .v2-mkt td, html body .v2-mkt th { font-size: 12px; } }

/* The admin's view of a lead's lease results, under its row in Enquiries. */
.enq-detail-row > td { background: #f5f5f3; padding: 16px !important; }
.enq-dt { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; color: #1a1a1a; font-size: 13px; line-height: 1.45; white-space: normal; }
.enq-dt-verdict, .enq-dt-tiles, .enq-dt-wide { grid-column: 1 / -1; margin: 0; }
.enq-dt-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.enq-dt-tile { background: #fff; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.enq-dt-tile span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #5E5D57; }
.enq-dt-tile b { font-size: 18px; font-weight: 600; }
.enq-dt-tile small { font-size: 11.5px; color: #5E5D57; }
.enq-dt-tile.is-hot b { color: #a6192e; }
.enq-dt-block { background: #fff; border-radius: 12px; padding: 12px 14px; }
.enq-dt-block h5 { margin: 0 0 8px; font-size: 10.5px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; border-left: 2px solid #a6192e; padding-left: 6px; }
.enq-dt-block p { margin: 6px 0 0; }
.enq-dt-fine { font-size: 11.5px; color: #5E5D57; }
.enq-dt-svg { width: 100%; max-width: 420px; height: auto; display: block; }
.enq-dt-svg text { font-size: 10px; fill: #5E5D57; }
.enq-dt-svg text.is-you { fill: #a6192e; font-weight: 600; }
.enq-dt-bar { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 8px; margin: 4px 0; }
.enq-dt-bar i { height: 8px; border-radius: 4px; background: #a6192e; }
.enq-dt-bar.is-grey i { background: #b7b4ae; }
.enq-dt-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.enq-dt-table th { text-align: left; font-weight: 400; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #5E5D57; padding: 4px 6px; }
.enq-dt-table td { padding: 5px 6px; border-top: 1px solid #dbd9d5; }
.enq-dt-table tr.is-you td { font-weight: 600; background: #f5f5f3; }
.enq-dt-mini { display: inline-block; height: 6px; border-radius: 3px; background: #b7b4ae; vertical-align: middle; }
.enq-dt-table tr.is-you .enq-dt-mini { background: #a6192e; }
.enq-dt-steps { margin: 0; padding-left: 20px; }
.enq-dt-steps li { margin: 0 0 6px; }
.enq-dt-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 16px; margin: 0; }
.enq-dt-inputs div { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid #dbd9d5; padding: 4px 0; }
.enq-dt-inputs dt { color: #5E5D57; }
.enq-dt-inputs dd { margin: 0; text-align: right; }
.enq-dt-empty { margin: 0; color: #5E5D57; }

/* admin: the action buttons keep their words on one line; inline code in the notes uses the site font */
.enq-act button { white-space: nowrap; }
html body code, html body kbd, html body samp { font-family: inherit !important; }

/* ===== ENQUIRY FORMS = THE MICROSITE'S FORM (owned by the forms pass; keep this block last and self-contained) =====
   A 12px dialog with an ink edge and a 10px close (the shared rules at the top), a square red column with 12px advisor cards and
   8px contact rows, sentence-case labels, legible consent, a square light red "Enquiring about" band, an 8px Send and a quiet Cancel.
   Scoped to the enquiry dialog (#leaseModal), the Health Check request (#lcOffer) and the red advisor panels. */
html body #leaseModal.lease-modal { border: 1px solid var(--ink, #1a1a1a); }

/* advisor cards (12px, a hairline edge, as on the microsite): round 52px photo, bold name, then the outlined 8px contact rows */
html body :is(.lease-modal, #lcOffer) .enq-head .adv-team { gap: 12px; }
html body :is(.lease-modal, #lcOffer) .enq-head .adv-person { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--line, #dbd9d5); border-radius: 12px; color: var(--ink, #1a1a1a); }
html body :is(.lease-modal, #lcOffer) .enq-head .adv-info { flex: 1 1 0; }
html body :is(.lease-modal, #lcOffer) .enq-head .adv-face { width: 52px; height: 52px; font-size: 17px; border-radius: 50% !important; }
html body :is(.lease-modal, #lcOffer) .enq-head .adv-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--ink, #1a1a1a); }
html body :is(.lease-modal, #lcOffer) .enq-head :is(.adv-title, .adv-cea) { font-size: 12px; line-height: 1.35; color: #5e5d57; }
html body :is(.lease-modal, #lcOffer, .help-modal .agent-card) .adv-actions { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
html body :is(.lease-modal, #lcOffer, .help-modal .agent-card) .adv-actions .adv-btn { grid-column: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 38px; margin: 0; padding: 0 10px; border: 1px solid #b7b4ae; border-radius: 8px; background: #fff; color: var(--ink, #1a1a1a); font: inherit; font-size: 14px; font-weight: 300; line-height: 1.2; text-decoration: none; white-space: nowrap; box-sizing: border-box; transition: border-color .15s; }
html body :is(.lease-modal, #lcOffer, .help-modal .agent-card) .adv-actions .adv-btn:first-child,
html body :is(.lease-modal, #lcOffer, .help-modal .agent-card) .adv-actions .adv-btn:last-child:nth-child(even) { grid-column: 1 / -1; }
html body :is(.lease-modal, #lcOffer, .help-modal .agent-card) .adv-actions .adv-btn:hover { border-color: var(--ink, #1a1a1a); text-decoration: none; }
html body :is(.lease-modal, #lcOffer, .help-modal .agent-card) .adv-actions .adv-btn:focus-visible { outline: 2px solid var(--kf-red, #a6192e); outline-offset: 2px; }
html body :is(.lease-modal, #lcOffer, .help-modal .agent-card) .adv-actions .adv-li { color: var(--ink, #1a1a1a); }
html body :is(.lease-modal, #lcOffer, .help-modal .agent-card) .adv-actions .adv-li svg { width: 15px; height: 15px; color: #0A66C2; flex: none; }
/* on the flat red help panel the buttons are outlined in white */
html body .help-modal .agent-card .adv-person { flex-wrap: wrap; }
html body .help-modal .agent-card .adv-actions .adv-btn { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
html body .help-modal .agent-card .adv-actions .adv-btn:hover { border-color: #fff; }
html body .help-modal .agent-card .adv-actions .adv-li svg { color: #fff; }
html body .help-modal .agent-card .adv-actions .adv-btn:focus-visible { outline-color: #fff; }

/* eyebrows on the red column in sentence case, as "Your advisors" on the microsite; the required mark sits right after the word ("Name*") */
html body :is(.enq-eyebrow, .help-modal .modal-status) { font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; }
html body .required-mark { margin-left: 0; }

/* "Enquiring about" label and the light red subject band */
html body #leaseModal .enq-about-label { display: flex; align-items: center; min-height: 40px; margin: -8px 0 4px; padding-right: 52px; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--grey-strong, #5e5d57); }
html body #leaseModal .enq-about { margin: 0 0 16px; padding: 7px 11px; min-height: 30px; background: rgba(166, 25, 46, .08); color: var(--kf-red, #a6192e); font-size: 12.6px; font-weight: 600; line-height: 1.4; }
html body #leaseModal .enq-body:has(#leaseSuccess:not([style*="none"])) :is(.enq-about-label, .enq-about) { display: none; }

/* labels, fields, consent */
html body :is(#leaseModal, #hcForm) :is(label:not(.consent-checkbox-label):not(.hc-consent), .field-label) { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-2, #2b2b2b); }
html body :is(#leaseModal, #hcForm) :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: 15px; }
@media (min-width: 821px) { html body #leaseModal :is(input:not([type=checkbox]):not([type=radio]), select) { min-height: 40px; } }
html body :is(#leaseModal, #hcForm) :is(.consent-checkbox-label, .hc-consent) { text-transform: none; letter-spacing: normal; align-items: flex-start; gap: 10px; }
html body :is(#leaseModal, #hcForm) :is(.consent-text, .hc-consent span) { font-size: 13px; line-height: 1.5; font-weight: 400; text-transform: none; letter-spacing: normal; color: #2B2B2B; opacity: 1 !important; }
html body :is(#leaseModal, #hcForm) :is(.consent-text, .hc-consent span) a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
html body :is(#leaseModal, #hcForm) :is(.consent-checkbox-label, .hc-consent) input[type=checkbox] { width: 18px; height: 18px; margin: 1px 0 0; flex: none; border-radius: 0; accent-color: var(--kf-red, #a6192e); }

/* foot: rule, "* Required" at the left, a quiet Cancel and the red Send at the right */
html body #leaseModal .form-actions { border-top: 1px solid #dbd9d5; }
html body #leaseModal .form-note { font-size: 12px; color: #5e5d57; }
html body #leaseModal .form-actions .kf-btn[type=submit] { background: var(--kf-red, #a6192e); border: 1px solid var(--kf-red, #a6192e); color: #fff; }
html body #leaseModal .form-actions .kf-btn[type=submit]:hover { background: var(--kf-red-dark, #7d1322); border-color: var(--kf-red-dark, #7d1322); }

/* the form panel's top rule: "Enquiring about" shares a row with the close on a wide screen only */
@media (max-width: 899px) {
  /* the dialog itself scrolls (the shared dialog rule hides overflow), with the close kept in view */
  html body #leaseModal.lease-modal { overflow-y: auto !important; overscroll-behavior: contain; }
  html body #leaseModal .modal-close { position: sticky !important; top: 10px !important; right: auto !important; float: none !important; display: flex !important; margin: 10px 10px -50px auto !important; z-index: 5; }
  html body #leaseModal .enq-about-label { min-height: 0; margin: 0 0 6px; padding-right: 0; }
}
/* phones: slim advisor rows so the first field is on screen (small photo, name, title, then the three buttons in one row) */
@media (max-width: 600px) {
  html body :is(.lease-modal, #lcOffer) .enq-head { padding: 14px 14px 12px; }
  html body :is(.lease-modal, #lcOffer) .enq-head .enq-eyebrow { margin-bottom: 2px; }
  html body :is(.lease-modal, #lcOffer) .enq-head .enq-title { font-size: 26px; padding-right: 52px; }
  html body :is(.lease-modal, #lcOffer) .enq-head .enq-sub { display: none; }
  html body :is(.lease-modal, #lcOffer) .enq-head .enq-company { display: none; }
  html body :is(.lease-modal, #lcOffer) .enq-head .adv-team { gap: 8px; margin-top: 10px; }
  html body :is(.lease-modal, #lcOffer) .enq-head .adv-person { gap: 8px 10px; padding: 10px; }
  html body :is(.lease-modal, #lcOffer) .enq-head .adv-face { width: 38px; height: 38px; font-size: 13px; }
  html body :is(.lease-modal, #lcOffer) .enq-head .adv-name { font-size: 15px; }
  html body :is(.lease-modal, #lcOffer) .enq-head :is(.adv-title, .adv-cea) { font-size: 11px; line-height: 1.3; }
  html body :is(.lease-modal, #lcOffer) .enq-head .adv-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body :is(.lease-modal, #lcOffer) .adv-actions { grid-template-columns: 1.5fr 1fr 1fr; gap: 6px; }
  html body :is(.lease-modal, #lcOffer) .adv-actions .adv-btn { grid-column: auto !important; min-height: 36px; padding: 0 4px; font-size: 12px; gap: 4px; }
  html body :is(.lease-modal, #lcOffer) .adv-actions .adv-li svg { width: 13px; height: 13px; }
  html body :is(.lease-modal, #lcOffer, #helpModal .agent-card) .adv-actions:has(> :nth-child(4)) { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  html body #leaseModal .enq-body { padding: 14px 14px 0; }
  html body #leaseModal .enq-about { margin-bottom: 12px; padding: 9px 12px; font-size: 13px; }
  html body #leaseModal .form-actions { flex-wrap: wrap; }
  html body #leaseModal .form-actions .kf-btn[type=submit] { flex: 1 1 100%; order: 1; }
  html body #leaseModal .form-actions .kf-btn--quiet { flex: 1 1 100%; order: 2; }
}

/* lease results gate: same fields and consent reading as the enquiry form (wording and fields unchanged) */
html body .g-lock-card .g-lock-check { font-size: 13px; line-height: 1.5; color: #2B2B2B; text-transform: none; letter-spacing: normal; }
html body .g-lock-card .g-lock-check span { opacity: 1 !important; }
html body .g-lock-card .g-lock-check a { text-decoration: underline; text-underline-offset: 2px; }

html body #lcOffer .enq-head--inline { border-radius: 0; }
html body #helpModal .agent-card .adv-info { flex: 1 1 0; }
html body #helpModal .agent-card .adv-actions .adv-btn { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
html body #helpModal .agent-card .adv-actions .adv-btn:hover { border-color: #fff; }
html body #helpModal .agent-card .adv-actions .adv-li svg { color: #fff; }
html body #helpModal .agent-card .adv-actions .adv-btn:focus-visible { outline-color: #fff; }
@media (max-width: 600px) {
  html body #helpModal .agent-card .adv-actions { grid-template-columns: 1.5fr 1fr 1fr; gap: 6px; }
  html body #helpModal .agent-card .adv-actions .adv-btn { grid-column: auto !important; min-height: 36px; padding: 0 4px; font-size: 12px; gap: 4px; }
  html body #helpModal .agent-card .adv-actions .adv-li svg { width: 13px; height: 13px; }
}
/* ===== end of the enquiry-forms block ===== */

/* ---- Feedback pop-up (footer "Feedback"): a white card, a light title, a Bug / Idea row each, one full-width mail button and a quiet Close. Same look as the microsite. ---- */
/* the footer's Feedback button is a <button>: it takes exactly the footer links' type, colour and hover so Privacy, Terms and Feedback read as one set */
html body .kf-footer-btn { border: 0; background: none; margin: 0; font: inherit; font-family: inherit; font-size: clamp(10px, calc(8.76px + 0.14vw), 11.4px); font-weight: 600; line-height: inherit; letter-spacing: inherit; color: #5E5D57; cursor: pointer; text-decoration: none; padding: 3.6px 0; -webkit-appearance: none; appearance: none; }
html body .kf-footer-btn:hover { color: #A6192E; }
.fb-backdrop { position: fixed; inset: 0; z-index: 1200; background: rgba(26, 26, 26, .45); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; }
.fb-backdrop.open { opacity: 1; visibility: visible; }
.fb-modal { position: fixed; z-index: 1201; left: 50%; top: 50%; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; transform: translate(-50%, -48%); opacity: 0; visibility: hidden; background: #fff; border-radius: 12px; box-shadow: 0 18px 50px rgba(26, 26, 26, .28); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.fb-modal.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.fb-head { position: relative; padding: 24px 64px 0 24px; }
.fb-head h3 { margin: 0; font-size: clamp(22px, 5.5vw, 28px); font-weight: 300; line-height: 1.2; letter-spacing: -.01em; color: #1a1a1a; }
.fb-close { position: absolute; top: 18px; right: 18px; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid #1a1a1a; border-radius: 10px; background: #fff; color: #1a1a1a; cursor: pointer; }
.fb-close:hover { background: #f5f5f3; }
.fb-body { padding: 14px 24px 0; font-size: 16px; font-weight: 300; line-height: 1.5; color: #1a1a1a; }
.fb-body p { margin: 0 0 12px; }
.fb-list { margin: 14px 0 16px; padding: 0; list-style: none; display: grid; gap: 12px; }
.fb-list li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; }
.fb-tag { display: inline-block; text-align: center; padding: 4px 0; border-radius: 6px; background: rgba(166, 25, 46, .09); color: #a6192e; font-size: 14px; font-weight: 500; }
.fb-body p.fb-note { margin: 0; font-size: 14px; color: #5e5d57; }
.fb-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fb-actions { display: grid; justify-items: center; gap: 12px; padding: 22px 24px 20px; }
.fb-mail { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; padding: 0 18px; border-radius: 8px; border: 1px solid #a6192e; background: #a6192e; color: #fff; font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; }
.fb-mail:hover { background: #7d1322; border-color: #7d1322; }
.fb-cancel { border: 0; background: none; padding: 6px 8px; font: inherit; font-size: 15px; color: #5e5d57; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fb-cancel:hover { color: #1a1a1a; }
.fb-modal :is(button, a):focus-visible { outline: 2px solid #a6192e; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fb-backdrop, .fb-modal { transition: none; } }
@media print { .fb-backdrop, .fb-modal { display: none; } }

/* Focus on the lease form's boxed fields (size, rent, date, rent-free...): the box carries the one red border and soft ring like every other field;
   the input inside it draws nothing of its own (it used to show a second, smaller pink ring inside the box). */
html body .lc-box:focus-within, html body #g-lease-wrap .lc-box:focus-within, html body #panel-lease .lc-box:focus-within { border-color: var(--kf-red, #a6192e) !important; box-shadow: 0 0 0 2.7px rgba(166, 25, 46, .09) !important; outline: 0; }
html body .lc-box :is(input, select):focus, html body .lc-box :is(input, select):focus-visible { border-color: transparent !important; box-shadow: none !important; outline: 0 !important; background: transparent; }

/* "Talk to an advisor": a larger label, as on the microsite (16px on phones, 15px from 881px). Every advisor button follows it. */
html body :is(.band.band--intro .hero-cta, .hero-cta, #heroAdviser, #help-btn, #spAskBtn, #lcAskBtn, [data-act="advisor"]) { font-size: 16px !important; font-weight: 600; }
@media (min-width: 881px) { html body :is(.band.band--intro .hero-cta, .hero-cta, #heroAdviser, #help-btn, #spAskBtn, #lcAskBtn, [data-act="advisor"]) { font-size: 15px !important; } }
html body :is(.band.band--intro .hero-cta, #heroAdviser) svg { width: 15px; height: 15px; }

/* Phone footer, as the microsite's: one slim line (licence first, then Privacy, Terms, Feedback) that swipes sideways on the narrowest phones,
   with a soft fade at the right edge; one type size for the licence and the links. */
@media (max-width: 560px) and (min-height: 481px) {
  html body footer.kf-site-footer { height: calc(28px + env(safe-area-inset-bottom, 0px)); padding: 0 0 env(safe-area-inset-bottom, 0px) 16px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 14px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  html body footer.kf-site-footer::-webkit-scrollbar { display: none; }
  html body footer.kf-site-footer .kf-footer-copy { flex: none; min-width: 0; overflow: visible; text-overflow: clip; white-space: nowrap; text-align: left; font-size: 11px; line-height: 1; }
  html body footer.kf-site-footer .kf-footer-links { flex: none; width: auto; flex-wrap: nowrap; justify-content: flex-start; gap: 0 14px; padding-right: 32px; }
  html body footer.kf-site-footer .kf-footer-link, html body footer.kf-site-footer .kf-footer-btn { flex: none; min-height: 28px; display: inline-flex; align-items: center; padding: 0; font-size: 11px; white-space: nowrap; }
  html body footer.kf-site-footer .kf-footer-sep { display: none; }
}

/* One content width on wide screens, as the microsite's: the header, hero, steps and footer share a 1280px column centred in the window, so the
   page no longer stretches edge to edge on a big monitor. Below 1320px nothing changes. */
:root { --kf-col: 1280px; }
@media (min-width: 1321px) {
  html body .topbar-main { padding-left: max(21.6px, calc((100% - var(--kf-col)) / 2)); padding-right: max(21.6px, calc((100% - var(--kf-col)) / 2)); }
  html body .band.band--intro { padding-left: max(30px, calc((100% - var(--kf-col)) / 2)); padding-right: max(30px, calc((100% - var(--kf-col)) / 2)); }
  html body .hero-strip { padding-left: calc((100% - var(--kf-col)) / 2); padding-right: calc((100% - var(--kf-col)) / 2); }
  html body .hero-strip .wrap { padding-left: 0; padding-right: 0; }
  html body #w-space, html body .g-shell .wrap { padding-left: max(24px, calc((100% - var(--kf-col)) / 2)); padding-right: max(24px, calc((100% - var(--kf-col)) / 2)); }
  html body footer.kf-site-footer { padding-left: max(18px, calc((100% - var(--kf-col)) / 2)); padding-right: max(86px, calc((100% - var(--kf-col)) / 2)); }
}

/* The step pager (Back / Next): the two ends weigh the same: one width, one height, one radius, arrows mirrored; on a phone they share the row equally. */
html body .w-nav { gap: 16px; }
html body .w-nav :is(.w-back, .w-next) { min-width: 200px; height: 52px; min-height: 52px; border-radius: 8px; justify-content: center; }
@media (max-width: 640px) {
  html body .w-nav { gap: 10px; }
  html body .w-nav :is(.w-back, .w-next) { flex: 1 1 0; min-width: 0; max-width: none; padding: 0 12px; }
}
/* the old text link for Start again sits in the pager now */
html body .w-foot [data-slot=reset] { display: none; }

/* Lease form balance: with no building grade to pick, Where takes the whole first row instead of leaving a hole at the right; the "Is your lease about the space the
   calculator estimated?" line shows only when it has a figure to offer. */
@media (min-width: 701px) { html body #g-lease-wrap #leaseBar .lc-form:has(#lcGradeField[hidden]) > .lc-f--wide { grid-column: 1 / -1 !important; } }
html body #lcFromSpace:has(#lcUseEstimate:empty) { display: none; }

/* Text links that were made for the old dark band (paper-coloured) read as blanks on the light cards: ink-red on the wizard's light surfaces. */
html body :is(#g-lease-wrap, .g-shell) .text-link--dark, html body :is(#g-lease-wrap, .g-shell) #lcUseEstimate { color: var(--kf-red, #a6192e); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
html body :is(#g-lease-wrap, .g-shell) .text-link--dark:hover { color: var(--kf-red-hover, #7d1322); }
/* the lease step's own Start again lives in the pager now */
html body #g-lease-wrap #resetLease { display: none; }

/* ===== Accessibility pass A: focus indicators, reduced motion, large text ===== */
/* One visible focus ring for whatever has none of its own (:where keeps the specificity low, so the rings made for the dark bands and cards still win). */
html body :where(a, button, summary, [role=radio], [role=tab], [role=button], [tabindex]:not([tabindex="-1"]), .skip-link):focus-visible { outline: 2px solid #a6192e; outline-offset: 2px; }
html body :where(.band--intro, .hero-strip, .enq-head, #nextStep) :where(a, button, [tabindex]):focus-visible { outline-color: #fff; }
html body .skip-link:focus-visible { outline: 2px solid #a6192e; outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }
/* Text fields: the soft ring stays, and a firm 2px red line is added to it. Fields inside a bordered box light the box. */
html body :where(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea):focus-visible,
html body :is(#g-n, #lcArea, #lcGrade):focus { outline: 2px solid #a6192e !important; outline-offset: 1px; }
html body :where(.lc-box, .input-row, .w-custom-f label):focus-within { outline: 2px solid #a6192e; outline-offset: 1px; }
html body :is(.lc-box, .input-row, .w-custom-f label) :where(input, select, textarea):focus-visible { outline: 0 !important; }
/* The map's areas: a solid red edge with a white halo on the keyboard-focused area. */
.w-map-box .w-cell:focus-visible { stroke: #a6192e; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.w-map-box:has(.w-cell:focus-visible) .w-hot { stroke-dasharray: none; stroke-width: 3; }
.w-map-box:has(.w-cell:focus-visible) .w-hot-halo { stroke-width: 6.5; }
/* Decorative separators never read aloud (their markup also says aria-hidden). */
/* Large text: the pager buttons grow with their text instead of clipping it. */
html body .w-nav :is(.w-back, .w-next) { height: auto; min-height: 52px; padding-top: 10px; padding-bottom: 10px; white-space: normal; line-height: 1.25; text-align: center; }
/* Nothing moves for people who ask for less motion (the splash has its own calm version). */
@media (prefers-reduced-motion: reduce) {
  html body *:not(#kfSplash):not(#kfSplash *), html body *:not(#kfSplash):not(#kfSplash *)::before, html body *:not(#kfSplash):not(#kfSplash *)::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Chrome rounds the older 1.8px rings down to 1px: every keyboard ring is a full 2px. */
html body :focus-visible { outline-width: 2px !important; }
/* Large text: the desktop footer wraps onto a second line instead of cutting the licence short (still one 25px line at normal size). */
@media (min-width: 561px) {
  html body footer.kf-site-footer { height: auto; min-height: 25.2px; flex-wrap: wrap; padding-top: 2px; padding-bottom: 2px; }
  html body footer.kf-site-footer .kf-footer-copy { flex: 1 1 auto; white-space: normal; overflow: visible; text-overflow: clip; }
}
/* Next and Back are the same 52px high (the panel's 48px button rule had been winning for Next). */
html body .w-nav :is(.w-back, .w-next) { min-height: 52px !important; }
/* Touch: the hero links reach 22px around their centre; the phone footer links share the 14px gaps between them as padding (the bar itself is 28px high). */
@media (max-width: 700px) {
  html body :is(#whyOpen, #heroFlexLink)::before { content: ''; position: absolute; inset: -14px -8px; }
  html body :is(#whyOpen, #heroFlexLink) { position: relative; }
}
@media (max-width: 560px) and (min-height: 481px) {
  html body footer.kf-site-footer .kf-footer-links { gap: 0; }
  html body footer.kf-site-footer .kf-footer-link, html body footer.kf-site-footer .kf-footer-btn { padding: 0 7px; }
}