/* ==========================================================================
   OFFICE SPACE CALCULATOR: PAGE LAYOUT
   Loaded after the page's own styles (index.html) and the shared chrome
   (kf-chrome.css), which it does not touch: the header, the footer and the
   admin view keep their rules.

   One family with the Flex Space Portal: its flat red banner with a light
   white headline and a white "Talk to an advisor", cards on white and warm
   paper, the same tokens. A little Swiss and Bauhaus on top, kept quiet:
     - one 12-column grid under the banner, everything flush left on it;
     - each input block opens on a rule with its number (01, 02, 03) and the
       result opens on a heavier rule with "=", so the page reads as inputs
       adding up to an answer;
     - scale contrast: a very large figure, small captions, little between;
     - the geometry is the portal banner's circle, square and rule, in the
       banner only, plus the status shapes the charts already use.
   No red square dots beside labels; red marks the step numbers, the one
   primary action and the figure that matters.
   ========================================================================== */

:root {
  --col: calc((100% - 11 * var(--gutter)) / 12);
  --rule-strong: 1.8px solid var(--ink);
  --rule-soft: 1px solid var(--line);
  --sec-pad: 50.4px;
  --card-pad: 28.8px;
}

/* --------------------------------------------------------------------------
   1. THE RED BANNER
   -------------------------------------------------------------------------- */
.band.band--intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* The colour only: the banner's backdrop image (the skyline in index.html)
     stays as the page sets it. */
  background-color: var(--kf-red);
  padding: 50.4px 0 0;
}
.band--intro .wrap { position: relative; z-index: 1; }

/* The geometry: an outlined circle with its centre disc, a filled square and
   a long rule, low on contrast, at the right where the copy is not. */
.hero-geo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* The shapes show only when the banner has no drawn backdrop of its own
   (the motion layer adds .geo-on); with the skyline they would compete. */
.hero-geo .geo { position: absolute; display: none; }
.band--intro.geo-on .hero-geo .geo { display: block; }
.geo-circle { width: 342px; height: 342px; right: -90px; top: -97.5px; border-radius: 50%; border: 1.8px solid rgba(255, 255, 255, 0.22); }
.geo-disc { width: 16.2px; height: 16.2px; right: 54.9px; top: 45.9px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); }
.geo-square { width: 79.2px; height: 79.2px; right: 396px; top: 32.4px; background: rgba(255, 255, 255, 0.12); }
.geo-rule { height: 1.8px; width: 468px; right: -30px; top: 266.4px; background: rgba(255, 255, 255, 0.22); transform-origin: right center; }

.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 21.6px var(--gutter);
  align-items: end;
}
.hero-copy { grid-column: 1 / span 8; min-width: 0; }
.hero-eyebrow {
  font-size: 10.8px; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86); margin: 0 0 18px;
}
.band--intro h1 {
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(36px, 5vw, 64.8px); line-height: 1; letter-spacing: -0.03em;
  color: var(--white); margin: 0;
}
.band--intro h1 em { font-style: normal; color: var(--white); }
.band--intro .intro-line { margin-top: 18px; max-width: 46ch; font-size: 16.2px; line-height: 1.45; color: rgba(255, 255, 255, 0.9); }

/* Who answers, and the one white button, as on the portal's banner. */
.hero-side {
  grid-column: 9 / -1; justify-self: end; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10.8px;
}
.hero-adviser {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  padding: 3.6px 14.4px 3.6px 3.6px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 899.1px;
  background: rgba(255, 255, 255, 0.12); color: var(--white);
}
.hero-adviser-img {
  flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 1.8px solid rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.2);
}
.hero-adviser-text { display: grid; min-width: 0; line-height: 1.25; }
.hero-adviser-name { font-size: 12.6px; font-weight: 400; }
.hero-adviser-role { font-size: 10.8px; color: rgba(255, 255, 255, 0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: var(--ctl-m); padding: 0 21.6px;
  background: var(--white); color: var(--kf-red); border: 1px solid var(--white); border-radius: var(--radius);
  font: inherit; font-size: 14.4px; font-weight: 400; white-space: nowrap; cursor: pointer;
  box-shadow: 0 9px 19.8px -9px rgba(26,26,26, 0.5);
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.hero-cta svg { flex: none; transition: transform var(--dur-base) var(--ease-entrance); }
.hero-cta:hover { background: var(--paper); transform: translateY(-1px); box-shadow: 0 12.6px 23.4px -9px rgba(26,26,26, 0.55); }
.hero-cta:hover svg { transform: translateX(2.7px); }
.hero-cta:active { transform: scale(0.98); }
.hero-cta:focus-visible { outline: 1.8px solid var(--white); outline-offset: 2.7px; }

/* The two tools as tabs standing on the banner's lower edge. The chosen one
   is white, the colour of the tool under it, so tab and tool read as one
   piece; the other is a tint of the red. Eight columns, four each. */
.band--intro .path-tabs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter);
  max-width: calc(8 * var(--col) + 7 * var(--gutter));
  margin-top: 43.2px;
}
.band--intro .path-tab {
  position: relative; display: grid; align-content: start; gap: 5.4px;
  min-height: 0; padding: 18px 21.6px 19.8px; text-align: left;
  background: rgba(255, 255, 255, 0.1); color: var(--white);
  border: 0; border-top: 1.8px solid rgba(255, 255, 255, 0.45); border-radius: 0;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.band--intro .path-tab:hover { background: rgba(255, 255, 255, 0.18); }
.band--intro .path-tab[aria-selected="true"] { background: var(--white); color: var(--ink); border-top-color: var(--ink); }
.band--intro .path-tab:focus-visible { outline: 1.8px solid var(--white); outline-offset: -4.5px; }
.band--intro .path-tab[aria-selected="true"]:focus-visible { outline-color: var(--ink); }
.band--intro .path-num { font-size: 10.8px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; opacity: 1; color: inherit; }
.band--intro .path-tab[aria-selected="true"] .path-num { color: var(--kf-red); }
.band--intro .path-q { font-size: 23.4px; font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; }
.band--intro .path-what { font-size: 12.6px; opacity: 0.82; }
.band--intro .path-status { font-size: 12.6px; padding-top: 9px; margin-top: 0; }

/* The banner's entrance: CSS, so it needs no script and starts with the
   first paint. Individual transform properties (translate, scale, rotate),
   so the scroll drift (GSAP, on transform) composes with them. The global
   reduced-motion rule in index.html ends these at once. */
@keyframes kfRise { from { opacity: 0; translate: 0 16.2px; } to { opacity: 1; translate: 0 0; } }
@keyframes kfGeoIn { from { opacity: 0; scale: 0.86; } to { opacity: 1; scale: 1; } }
@keyframes kfGeoTurn { from { opacity: 0; rotate: -24deg; scale: 0.7; } to { opacity: 1; rotate: 0deg; scale: 1; } }
@keyframes kfRuleIn { from { scale: 0 1; } to { scale: 1 1; } }
/* The headline, the advisors and the white button have the portal's own
   opening ("Banner motion", section 14); the lines around them rise in step. */
.hero-anim, .band--intro .path-tab { animation: kfRise 0.7s var(--ease-entrance) both; }
.hero-eyebrow.hero-anim { animation-delay: 0.04s; }
.intro-line.hero-anim { animation-delay: 0.4s; }
.hero-why.hero-anim { animation-delay: 0.5s; }
.band--intro .path-tab:nth-child(1) { animation-delay: 0.6s; }
.band--intro .path-tab:nth-child(2) { animation-delay: 0.68s; }
.geo-circle { animation: kfGeoIn 1s var(--ease-entrance) 0.1s both; }
.geo-disc { animation: kfGeoIn 0.8s var(--ease-entrance) 0.45s both; }
.geo-square { animation: kfGeoTurn 1s var(--ease-entrance) 0.2s both; }
.geo-rule { animation: kfRuleIn 1.1s var(--ease-entrance) 0.3s both; }

/* --------------------------------------------------------------------------
   2. SHARED PIECES: the step head, the card, the result rule
   -------------------------------------------------------------------------- */
/* A step opens on a rule, its number in red, its name beside it. */
.step-head {
  display: flex; align-items: baseline; gap: 10.8px;
  margin: 0 0 18px; padding-top: 12.6px; border-top: var(--rule-soft);
  font-family: var(--font-body); font-size: 16.2px; font-weight: 400; line-height: 1.3; color: var(--ink);
}
.step-head .meta { font-size: 11.7px; }
.step-n {
  flex: none; min-width: 19.8px;
  font-size: 10.8px; font-weight: 400; letter-spacing: 0.08em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--kf-red);
}
.step-n--eq { font-size: 18px; letter-spacing: 0; line-height: 0.8; }
/* The result opens on the heavier rule: what the steps add up to. */
.result-head {
  display: flex; align-items: baseline; gap: 10.8px;
  font-family: var(--font-body); font-size: 16.2px; font-weight: 400; line-height: 1.3; color: var(--ink);
}

/* The input field: warm paper, opened by the strong rule, the steps inside. */
.field-tone { background: var(--paper); padding: var(--card-pad); }

/* --------------------------------------------------------------------------
   3. SPACE REQUIRED
   The inputs as one command bar and the answer across the full width under
   it. From 810.9px the bar (#spaceCmd) sticks under the header and rail
   (--rail-bottom, measured by syncScrollPadding): the two counts, the
   standard, "Rooms and support" and the live estimate on one line, the
   shortcuts under them, and a panel that folds open under the bar with the
   sliders and the room lists. Up to 810px the same elements are a sheet
   docked to the foot of the screen (below). One state, .is-open, set by
   setCommandBarOpen.
   -------------------------------------------------------------------------- */
#panel-space.band--white { padding: var(--sec-pad) 0 86.4px; }

/* The hint the select is described by: in words for a screen reader here,
   on screen in the phone sheet (the options already name the sqft). */

/* The live estimate: the figure that matters, in the display face. */
.cmd-total { grid-column: -2; grid-row: 1; align-self: end; margin: 0; display: grid; justify-items: end; gap: 3.6px; text-align: right; }
@keyframes kfFigFlash { from { color: var(--kf-red); } to { color: var(--ink); } }

/* Whatever sits under a stuck bar clears it when the browser scrolls it into
   view (a focused control, an in-page link): the bar's height, measured by
   syncScrollPadding, on top of the page's scroll padding. */
#panel-space > .wrap > :not(.space-cmd), #panel-space > .wrap > :not(.space-cmd) *,
#leaseBand > .wrap > :not(.lease-bar), #leaseBand > .wrap > :not(.lease-bar) * { scroll-margin-top: var(--tool-bar-h, 0px); }

/* The panel under the line: the sliders beside the room lists. */

.cmd-more .step-head { border-top: 0; padding-top: 0; margin-bottom: 10.8px; font-size: 14.4px; }
.room-option { border-top-color: rgba(26, 26, 26, 0.1); }
.room-option:last-child { border-bottom-color: rgba(26, 26, 26, 0.1); }

/* The answer: full width under the bar. */
.space-result { min-width: 0; margin-top: 43.2px; }
/* Where the space goes beside the gauges, on a wide screen. */
.result-figs { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 43.2px; align-items: start; }
.result-figs-side { min-width: 0; }
.result-figs-side > .viz[hidden] { display: none; }
/* The strong rule is on the figure's block (.result-pin, a name kept from
   when it was pinned), so it stays with the figure. */
.result-card { border-top: 0; }
.result-pin { border-top: var(--rule-strong); padding-top: 12.6px; padding-bottom: 10.8px; }
.result-card .result-label.result-head { margin: 0 0 7.2px; font-size: 16.2px; color: var(--ink); letter-spacing: 0; text-transform: none; }
.result-sqft { font-size: 115.2px; line-height: 0.95; letter-spacing: -0.03em; margin-top: 7.2px; gap: 12.6px; }
.result-sqft span { font-size: 19.8px; letter-spacing: 0; }
.result-card .open-plan { margin-top: 10.8px; }

/* Four figures in a ruled row, each column split by a hairline. */
.result-meta {
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  margin-top: 25.2px; padding-top: 0; border-top: var(--rule-soft);
}
.result-meta > div { padding: 12.6px 14.4px 1.8px; border-left: var(--rule-soft); }
.result-meta > div:first-child { padding-left: 0; border-left: 0; }
.result-meta .rm-label { font-size: 10.8px; color: var(--grey-strong); margin-bottom: 3.6px; }
.result-meta .rm-value { font-size: 21.6px; font-weight: 300; line-height: 1.2; font-variant-numeric: tabular-nums; }

/* The empty estimate: the question, large, over a quiet outline of the
   banner's geometry, so the column is never a blank page. */
.result-card.is-empty .result-pin { padding-bottom: 0; }
.result-card .result-empty {
  max-width: 18ch; margin-top: 14.4px;
  font-size: 28.8px; font-weight: 300; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink);
}
.result-card.is-empty { position: relative; min-height: 306px; }
.result-card.is-empty::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; pointer-events: none;
  background:
    linear-gradient(var(--line), var(--line)) left 0 bottom 36px / 100% 1px no-repeat,
    radial-gradient(circle at 70% 50%, transparent 56.7px, var(--line) 57.6px, var(--line) 58.5px, transparent 59.4px) right 0 bottom 0 / 234px 180px no-repeat,
    linear-gradient(var(--paper), var(--paper)) left 28.8px bottom 57.6px / 64.8px 64.8px no-repeat;
}
/* The floor model draws its own empty state (an outline of the floor), so the
   column is not blank and this outline would only repeat it, far below, at the
   foot of the stretched card. It stays as the fallback when the floor model
   has not drawn (its script failed or is still loading). */

/* Focused by the result bar's "See result" (the bar hides as the result shows). */
.result-card .result-head:focus, .lease-results .result-head:focus { outline: none; }

.space-result .viz { margin-top: 43.2px; }
.space-result .viz > .tile-caption, .space-result .viz figcaption.tile-caption {
  display: block; padding-top: 12.6px; border-top: var(--rule-soft);
  font-size: 12.6px; color: var(--ink); margin-bottom: 14.4px;
}
.alloc-bar { height: 43.2px; gap: 1.8px; }
.breakdown { margin-top: 7.2px; }
.breakdown .detail-row { padding: 9px 0; }
.breakdown .detail-row .dr-swatch { width: 9px; height: 9px; }
.breakdown .detail-row.total { border-top: var(--rule-strong); margin-top: -1px; padding-top: 10.8px; }
.breakdown .detail-row.total .dr-value { font-size: 16.2px; }

.space-notes { max-width: calc(7 * var(--col) + 6 * var(--gutter)); margin-top: 50.4px; padding-top: 12.6px; border-top: var(--rule-soft); }
.space-notes .caption { font-size: 10.8px; line-height: 1.5; }

/* --------------------------------------------------------------------------
   4. THE ADVISOR PROMPT (#nextStep): a white card opened by a red rule, in
   either tool. Wording and buttons are the page's (renderNextStep).
   -------------------------------------------------------------------------- */
#nextStep {
  margin-top: 36px; padding: 21.6px 25.2px 19.8px;
  background: var(--white); color: var(--ink);
  border: var(--rule-soft); border-top: 1.8px solid var(--kf-red);
  box-shadow: 0 1px 0 rgba(26,26,26, 0.03), 0 10.8px 25.2px -13.5px rgba(26,26,26, 0.25);
}
#nextStep .ns-title { font-family: var(--font-body); font-weight: 300; font-size: 25.2px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
#nextStep .ns-body { font-size: 13.5px; color: var(--ink-2); margin: 9px 0 16.2px; }
#nextStep .ns-contact { color: var(--ink-2); font-size: 11.7px; }
#nextStep .ns-actions .kf-btn { min-height: var(--ctl-m); font-size: 13.5px; padding: 0 18px; }
#nextStep .ns-actions .kf-btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
#nextStep .ns-actions .kf-btn--ghost:hover:not(:disabled) { background: var(--paper); border-color: var(--ink); color: var(--ink); }
#nextStep .ns-tertiary .text-link { color: var(--ink); }
#nextStep :focus-visible { outline: 1.8px solid var(--ink); outline-offset: 1.8px; }

/* --------------------------------------------------------------------------
   5. LEASE CHECK, now on white like the space tool and the portal.
   The rules in index.html were written for a dark band in tokens; inside the
   lease band those tokens are turned to their light values, and the few
   rules that say "white" for text are set to ink below.
   -------------------------------------------------------------------------- */
#panel-lease > .band--dark {
  --dark: #FFFFFF; --dark-2: var(--paper); --dark-line: var(--line);
  --on-dark: var(--ink); --on-dark-2: var(--grey-strong);
  --st-good-d: var(--st-good); --st-caution-d: var(--st-caution); --st-risk-d: var(--st-risk);
  background: var(--white); color: var(--ink);
  padding: var(--sec-pad) 0 86.4px;
}
#panel-lease > .band--dark :focus-visible { outline-color: var(--ink); }

/* The inputs: one paper field opened by the strong rule, in three parts:
   the step and its line (.lease-intro), the sentence (.lease-bar, the
   panel's sticky bar from 810.9px) and the detail (.lease-inputs). */
.lease-intro { border-top: var(--rule-strong); padding-bottom: 0; }
.lease-intro, .lease-bar, .lease-inputs { display: flow-root; }
.lease-bar { padding-top: 0; padding-bottom: 7.2px; }
.lease-bar .caption:empty { display: none; }
.lease-inputs { padding-top: 0; }
#panel-lease .sentence { margin-top: 25.2px; color: var(--ink); max-width: none; }
#panel-lease .s-token input, #panel-lease .s-token select { color: var(--ink); border-bottom-color: var(--line-strong); }
#panel-lease .s-token input::placeholder { color: #5E5D57; }
#panel-lease .s-token select.is-empty, #panel-lease .s-token input.is-empty { color: #5E5D57; }
#panel-lease .s-token input[type="date"].is-empty::-webkit-datetime-edit { color: #5E5D57; }
#panel-lease .s-token input:hover, #panel-lease .s-token select:hover { border-bottom-color: var(--ink); }
#panel-lease .s-token input:focus, #panel-lease .s-token select:focus { border-bottom-color: var(--kf-red); background: rgba(26, 26, 26, 0.04); }
#panel-lease .s-token input:focus-visible, #panel-lease .s-token select:focus-visible { outline: 1.8px solid var(--ink); outline-offset: 1.8px; }
#panel-lease .s-select select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A1A1A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}
#panel-lease .s-date input { color-scheme: light; }
.lease-inputs .caption, .lease-bar .caption { font-size: 11.7px; }
.lease-inputs .reset-link { margin-top: 14.4px; }
/* The sentence as the panel's bar: under the header and rail while the
   result scrolls under it at the full width. */
@media (min-width: 901px) {
  .lease-bar {
    position: sticky; top: var(--rail-bottom, 97.2px); z-index: 30;
    box-shadow: 0 1px 0 var(--line), 0 14.4px 21.6px -16.5px rgba(26,26,26, 0.4);
  }
  #panel-lease .lease-bar .sentence { margin-top: 10.8px; font-size: 23.4px; }
  #panel-lease .lease-bar .lc-progress { margin: 7.2px 0 0; }
  .lease-bar .caption { margin-top: 3.6px; }
  /* The progress, and the rent hint at the right of the same line (it wraps
     under the progress when the line is short); the checks under both. */
  .lease-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28.8px; align-items: start; }
  .lease-bar > * { grid-column: 1 / -1; }
  #panel-lease .lease-bar > .lc-progress { grid-column: 1; }
  .lease-bar > .lc-rent-hint { grid-column: 2; justify-self: end; margin-top: 7.2px; text-align: right; line-height: 1.4; }
  .lease-inputs { padding-top: 14.4px; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  #panel-lease .lease-bar .sentence:not(.sentence--small) { font-size: 19.8px; }
}
/* Wide enough for the whole sentence on one line at 19.8px: one line, so the
   stuck bar is a slim strip, not a second line holding only the date. */
@media (min-width: 1360px) {
  #panel-lease .lease-bar .sentence:not(.sentence--small) { font-size: 19.8px; }
}
/* With a mouse, the bar's blanks are the compact 36px, so the stuck sentence
   takes less of the screen; touch keeps 43.2px. */
@media (min-width: 901px) and (pointer: fine) {
  #panel-lease .lease-bar .s-token input, #panel-lease .lease-bar .s-token select { height: var(--ctl-s); }
  #panel-lease .lease-bar .s-token { margin-top: 1.8px; margin-bottom: 1.8px; }
}

/* The result: the heavier rule and "=", then the answers. */
#panel-lease .result-head { margin-top: 57.6px; padding-top: 12.6px; border-top: var(--rule-strong); }
#panel-lease .lc-empty, #panel-lease .lc-more { margin-top: 14.4px; font-size: 16.2px; color: var(--grey-strong); }
#panel-lease .scorecard { margin-top: 21.6px; }
#panel-lease .score-tile { min-height: 165.6px; padding: 21.6px; }
#panel-lease .score-tile .tile-caption { color: var(--grey-strong); }
#panel-lease .score-value { color: var(--ink); font-size: 46.8px; letter-spacing: -0.01em; }
/* Three tiles in a row down to 810.9px: a figure such as +S$138,000 ran out of
   its tile below about 1,90px. */
@media (min-width: 901px) and (max-width: 1099px) { #panel-lease .score-value { font-size: 34.2px; } }
#panel-lease .score-status { color: var(--ink); }
#panel-lease .score-status::before { width: 12.6px; height: 12.6px; }
#panel-lease .lc-delay { color: var(--ink); }
#panel-lease .lc-delay-fig { color: var(--ink); }
#panel-lease .lc-delay[data-kind="above"] .lc-delay-fig { color: var(--kf-red); }

/* Charts, on white: you in brand red, Knight Frank's figures in near-ink. */
#panel-lease .lc-range, #panel-lease .lc-projection, #panel-lease .lc-window {
  --viz-you: var(--kf-red); --viz-kf: #2B2B2B; --viz-track: var(--paper-2); --viz-grid: #DBD9D5;
  --viz-neutral: var(--grey); --viz-warn: var(--st-caution);
}
#panel-lease .viz--dark { margin-top: 50.4px; padding-top: 12.6px; border-top: var(--rule-soft); }
#panel-lease .lc-charts .viz--dark { margin-top: 50.4px; }
#panel-lease .viz--dark .tile-caption { color: var(--grey-strong); }
#panel-lease .viz--dark .viz-note,
#panel-lease .chart-title,
#panel-lease .chart .lab b,
#panel-lease .chart .lab.strong,
#panel-lease .tl-figure,
#panel-lease .tl .lab.is-alert b,
#panel-lease .lc-flags .sev,
#panel-lease .lc-points b { color: var(--ink); }
#panel-lease .chart-title { font-size: 18px; font-weight: 300; }
#panel-lease .tl-today { border-color: var(--ink); }
#panel-lease .lc-points li::before { color: var(--kf-red); font-family: var(--font-body); font-weight: 300; font-size: 25.2px; }
#panel-lease .lc-points li { background: var(--paper); border-top: var(--rule-strong); }
#panel-lease .lc-points-block, #panel-lease .lc-flags-block { margin-top: 57.6px; padding-top: 12.6px; border-top: var(--rule-soft); }
#panel-lease .lc-points-block .tile-caption, #panel-lease .lc-flags-block .tile-caption { color: var(--ink); font-size: 16.2px; margin-bottom: 18px; }
#panel-lease .estimate-disclaimer { margin-top: 50.4px; color: var(--grey-strong); }

/* The offer: on paper, a white field opened by the strong rule. */
#lcOfferBand.band--paper { padding: 64.8px 0 86.4px; }
#lcOfferBand:has(#lcOffer[hidden]) { padding: 0; }
.offer { background: var(--white); padding: 36px; border-top: var(--rule-strong); }
.offer-chip { background: var(--kf-red); }
.offer-title { font-family: var(--font-body); font-weight: 300; font-size: 39.6px; letter-spacing: -0.02em; max-width: 20ch; }
.deliverables { counter-reset: dl; }
.deliverables li { background: var(--paper); border-top: 1.8px solid var(--ink); counter-increment: dl; }
.deliverables li::before {
  content: counter(dl, decimal-leading-zero); content: counter(dl, decimal-leading-zero) / "";
  font-size: 10.8px; letter-spacing: 0.08em; color: var(--kf-red);
}
.hc-form h3, .hc-thanks { font-family: var(--font-body); font-weight: 300; letter-spacing: -0.02em; }
.hc-form { counter-reset: fs; }
.hc-form fieldset > legend { counter-increment: fs; display: flex; align-items: baseline; gap: 10.8px; flex-wrap: wrap; width: 100%; padding-top: 12.6px; border-top: var(--rule-soft); }
.hc-form fieldset > legend::before {
  content: counter(fs, decimal-leading-zero); content: counter(fs, decimal-leading-zero) / "";
  font-size: 10.8px; letter-spacing: 0.08em; color: var(--kf-red); min-width: 19.8px;
}
.hc-form fieldset > legend small { flex-basis: 100%; padding-left: 30.6px; }

/* --------------------------------------------------------------------------
   6. THE RAIL AND THE DIALOGS: a touch closer to the portal
   -------------------------------------------------------------------------- */
.kf-dialog { border-top: 2.7px solid var(--kf-red); }
.kf-dialog-title { font-family: var(--font-body); font-weight: 300; letter-spacing: -0.01em; }

/* --------------------------------------------------------------------------
   7. NARROWER SCREENS
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .result-sqft { font-size: 86.4px; }
  .hero-copy { grid-column: 1 / span 7; }
  .hero-side { grid-column: 8 / -1; }
}

@media (max-width: 900px) {
  :root { --sec-pad: 36px; --card-pad: 21.6px; }
  .band.band--intro { padding: 36px 0 0; }
  .hero-copy, .hero-side { grid-column: 1 / -1; }
  .hero-side { justify-self: start; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10.8px 14.4px; }
  .band--intro .path-tabs { max-width: none; margin-top: 28.8px; }
  .geo-circle { width: 252px; height: 252px; right: -72px; top: -54px; }
  .geo-disc { right: 31.5px; top: 53.1px; }
  .geo-square { right: 162px; top: 21.6px; width: 57.6px; height: 57.6px; }
  .band--intro.geo-on .hero-geo .geo-rule { display: none; }

  /* Open, a scroll inside the sheet stays in the sheet, and a control
     scrolled to inside it clears the sticky handle. */
  .cmd-total { order: -1; grid-column: 1 / -1; grid-row: auto; display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 3.6px; text-align: left; }
  /* The page ends above the peek, and the WhatsApp button rides above the
     sheet, never under it. */
  body:not(.is-admin):has(#panel-space:not([hidden])) { padding-bottom: calc(36px + var(--cmd-peek-h, 0px)); }

  /* The lease check's result bar, docked like the space tool's sheet: the
     same white, radius and shadow at the foot of the screen, the answer on
     the left and "See result" on the right. The WhatsApp button rides above
     it (--result-bar-h, measured in initResultBar). */
  #resultBar {
    left: 0; right: 0; bottom: 25.2px; width: auto; margin: 0;
    padding: 10.8px max(14.4px, calc((100% - 648px) / 2));
    background: var(--white); color: var(--ink); border-radius: 12.6px 12.6px 0 0;
    box-shadow: 0 -1px 0 var(--line), 0 -10.5px 27px -13.5px rgba(26,26,26, 0.38);
  }
  #resultBar .result-bar-label { color: var(--grey-strong); }
  #resultBar .result-bar-text { font-size: 13.5px; }

  .space-result { margin-top: 28.8px; }
  .result-figs { grid-template-columns: minmax(0, 1fr); }
  .result-card.is-empty { min-height: 0; }
  .result-card.is-empty::after { display: none; }
  .space-notes { max-width: none; }
  #panel-lease .score-tile { min-height: 0; }
}

/* A phone on its side (a short, wide screen): the peek on one line, the
   estimate beside the two counts, with a slimmer handle, so it takes about a
   quarter of the screen rather than two fifths. */
@media (max-width: 900px) and (min-width: 560px) and (max-height: 500px) {
  .cmd-total { order: 0; grid-column: 3; grid-row: 1; display: grid; justify-items: end; align-self: end; gap: 1.8px; margin: 0; text-align: right; }
}

@media (max-width: 680px) {
  .result-sqft { font-size: 64.8px; }
  .result-sqft span { font-size: 16.2px; }
  .result-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-meta > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .result-meta > div:nth-child(n+3) { border-top: var(--rule-soft); margin-top: 10.8px; }
  .offer { padding: 21.6px; }
  .offer-title { font-size: 28.8px; }
}

@media (max-width: 520px) {
  :root { --sec-pad: 25.2px; --card-pad: 14.4px; }
  .band.band--intro { padding: 25.2px 0 0; }
  .hero-eyebrow { font-size: 9.9px; margin-bottom: 10.8px; }
  .band--intro h1 { font-size: 34.2px; }
  .band--intro .intro-line { font-size: 13.5px; margin-top: 10.8px; }
  .hero-side { flex-wrap: nowrap; width: 100%; justify-content: space-between; }
  .hero-adviser { padding: 2.7px 10.8px 2.7px 2.7px; min-width: 0; }
  .hero-adviser-img { width: 30.6px; height: 30.6px; }
  .hero-cta { padding: 0 14.4px; font-size: 13.5px; flex: none; }
  .band--intro .path-tabs { gap: 7.2px; margin-top: 21.6px; }
  .band--intro .path-tab { padding: 12.6px 12.6px 14.4px; gap: 3.6px; }
  .band--intro .path-q { font-size: 17.1px; }
  .band--intro .path-what { display: none; }
  .band--intro .path-status { font-size: 10.8px; padding-top: 5.4px; }
  .geo-circle { width: 180px; height: 180px; right: -60px; top: -45px; }
  .geo-disc { width: 10.8px; height: 10.8px; right: 12.6px; top: 30.6px; }
  .band--intro.geo-on .hero-geo .geo-square { display: none; }

  .step-head, .result-head, .result-card .result-label.result-head { font-size: 14.4px; }
  .result-card .result-empty { font-size: 21.6px; }
  .result-sqft { font-size: 57.6px; }
  .result-meta .rm-value { font-size: 18px; }
  .space-result .viz { margin-top: 32.4px; }
  #nextStep { padding: 18px 14.4px 16.2px; }
  #nextStep .ns-title { font-size: 21.6px; }
  #panel-lease .result-head { margin-top: 43.2px; }
  #panel-lease .score-value { font-size: 32.4px; }
  #panel-lease .score-tile { padding: 14.4px; }
  #panel-lease .sentence .s-token::before { color: var(--grey-strong); }
  #lcOfferBand.band--paper { padding: 36px 0 57.6px; }
  .offer { padding: 18px 14.4px; }
}

@media (max-width: 400px) {
  .hero-adviser-role { display: none; }
  .band--intro h1 { font-size: 30.6px; }
}

@media print {
  .hero-geo, .hero-side { display: none !important; }
  .band.band--intro { background: none; color: var(--ink); padding: 0; }
  .band--intro h1, .band--intro .intro-line, .hero-eyebrow { color: var(--ink); }
}

/* The request form sits on the offer's white field: its tonal pieces step to paper. */
.offer .hc-prefilled { background: var(--paper); }
@media (max-width: 680px) {
  .offer .hc-actions { background: var(--white); margin: 0 -12px; }
}

/* --------------------------------------------------------------------------
   8. THE ADVISORS: both of them, large and clear, wherever the site says who
   answers. The same tile everywhere (renderAdviserTeams): photo, name, title,
   CEA registration and mobile. Mirrors the Flex Space Portal's enquiry tiles.
   -------------------------------------------------------------------------- */
/* The banner: one pill per advisor, side by side above the white button. */
.hero-copy { grid-column: 1 / span 6; }
.hero-side { grid-column: 7 / -1; }
.hero-advisers { display: flex; gap: 9px; justify-content: flex-end; max-width: 100%; }
.hero-advisers .hero-adviser { flex: 0 1 auto; min-width: 0; gap: 10.8px; padding: 5.4px 16.2px 5.4px 5.4px; }
.hero-advisers .hero-adviser-img { width: 54px; height: 54px; }
.hero-av {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16.2px; font-weight: 400; letter-spacing: 0.02em; color: var(--white);
}
.hero-advisers .hero-adviser-name { font-size: 16.2px; line-height: 1.2; }
.hero-advisers .hero-adviser-role {
  font-size: 11.26px; line-height: 1.3; white-space: normal; max-width: 180px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.hero-side .hero-cta { align-self: flex-end; }

/* The tile. */
.adv-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 10.8px; }
.adv-person {
  display: flex; align-items: center; gap: 14.4px; min-width: 0;
  padding: 12.6px; background: var(--white); color: var(--ink); border-radius: 5.4px;
}
.adv-face { flex: none; width: 64.8px; height: 64.8px; border-radius: 50%; object-fit: cover; background: var(--paper-2); }
.adv-av { display: inline-flex; align-items: center; justify-content: center; font-size: 19.8px; font-weight: 400; color: var(--kf-red); }
.adv-info { display: flex; flex-direction: column; gap: 1.8px; min-width: 0; }
.adv-name { font-size: 16.2px; font-weight: 400; line-height: 1.25; color: var(--ink); }
.adv-title { font-size: 11.7px; line-height: 1.35; color: var(--grey-strong); }
.adv-cea { font-size: 10.8px; line-height: 1.35; color: var(--grey-strong); }
.adv-tel {
  align-self: flex-start; margin-top: 3.6px;
  font-size: 13.5px; font-weight: 400; color: var(--kf-red); text-decoration: none; white-space: nowrap;
}
.adv-tel:hover { text-decoration: underline; text-underline-offset: 2.7px; }

/* The help dialog: wide enough for two tiles side by side, on its paper field. */
.help-modal.kf-dialog { width: min(576px, calc(100vw - 28.8px)); }
.help-modal .agent-card { display: block; padding: 14.4px 21.6px; }
.help-modal .adv-face { width: 57.6px; height: 57.6px; }

/* The advisor prompt: the two tiles under its buttons, on paper. */
#nextStep .ns-contact { margin-top: 18px; font-size: 12.6px; color: var(--ink-2); }
#nextStep .adv-person { background: var(--paper); }
#nextStep .adv-face { width: 57.6px; height: 57.6px; }
#nextStep .ns-contact .adv-tel { color: var(--kf-red); text-decoration: none; }
#nextStep .ns-contact .adv-tel:hover { text-decoration: underline; }
#nextStep .ns-wa { margin: 10.8px 0 0; font-size: 12.6px; }
#nextStep .ns-wa a { color: var(--ink); text-decoration: underline; text-underline-offset: 2.7px; }

/* --------------------------------------------------------------------------
   9. THE ENQUIRY FORMS: a red head, "Talk to our team", with the advisors as
   tiles, then a clean form: labels above 41.4px fields, two columns (one on a
   phone), a red focus ring and a large submit. The lease dialog and the
   Health Check / briefing request share it.
   -------------------------------------------------------------------------- */
.enq-head { background: var(--kf-red); color: var(--white); padding: 25.2px 25.2px 19.8px; }
.enq-eyebrow {
  margin: 0 0 5.4px; font-size: 10.8px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
.enq-title, .lease-modal .enq-head .kf-dialog-title {
  margin: 0; padding: 0 43.2px 0 0; position: static; background: none;
  font-family: var(--font-body); font-weight: 300; font-size: 30.6px; line-height: 1.08; letter-spacing: -0.02em;
  color: var(--white);
}
.enq-sub, .lease-modal .enq-head .kf-dialog-intro { margin: 7.2px 0 18px; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.9); }
.enq-company { margin: 12.6px 0 0; font-size: 10.8px; color: rgba(255, 255, 255, 0.8); }
.enq-head .adv-person { background: var(--white); }
.enq-head :focus-visible { outline-color: var(--white); }
.enq-head .adv-person :focus-visible { outline-color: var(--ink); }

/* The lease dialog: the head runs to the dialog's edges; the form sits below. */
.lease-modal.kf-dialog { width: min(648px, calc(100vw - 28.8px)); padding: 0; border-radius: 7.2px; }
.lease-modal .modal-close { color: var(--white); background: rgba(26,26,26, 0.22); border-radius: 50%; }
.lease-modal .modal-close:hover { background: rgba(26,26,26, 0.36); }
.lease-modal .modal-close:focus-visible { outline-color: var(--white); }
.lease-modal .enq-body { padding: 21.6px 25.2px 23.4px; }
.lease-form label { font-size: 12.6px; color: var(--ink-2); }
.lease-form .form-row { gap: 14.4px; }
.lease-form input:not([type="checkbox"]), .lease-form select { height: 41.4px; }
.lease-form textarea { min-height: 99px; }
.lease-form input:not([type="checkbox"]), .lease-form select, .lease-form textarea,
.hc-form input:not([type="checkbox"]), .hc-form select, .hc-form textarea {
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.lease-form input:not([type="checkbox"]):focus, .lease-form select:focus, .lease-form textarea:focus,
.hc-form input:not([type="checkbox"]):focus, .hc-form select:focus, .hc-form textarea:focus {
  outline: none; border-color: var(--kf-red); box-shadow: 0 0 0 2.7px rgba(166, 25, 46, 0.2);
}
.lease-form .form-actions { margin-top: 19.8px; padding-top: 16.2px; border-top: var(--rule-soft); }
.lease-form .form-actions .kf-btn { min-height: 46.8px; font-size: 14.4px; }
.lease-form .form-actions .kf-btn[type="submit"] { padding: 0 25.2px; }

/* The Health Check / briefing request: the same head, inside the offer. */
.enq-head--inline { border-radius: 5.4px; }
.hc-form input:not([type="checkbox"]), .hc-form select { height: 41.4px; }
.hc-actions .kf-btn[type="submit"] { min-height: 46.8px; font-size: 14.4px; padding: 0 28.8px; }

/* Admin > Settings > Advisor details: the additional advisors' editor. */
.adv-editor-block { margin-top: 25.2px; padding-top: 18px; border-top: var(--rule-soft); }
.adv-editor { display: grid; gap: 14.4px; margin-top: 3.6px; }
.adv-row { margin: 0; padding: 7.2px 14.4px 14.4px; min-width: 0; border: 1px solid var(--line); background: var(--white); }
.adv-row legend { padding: 0 5.4px; font-size: 12.6px; color: var(--ink); }
.adv-row .settings-photo-row { flex-wrap: wrap; }
.adv-row-spacer { flex: 1; }

@media (max-width: 1100px) {
  .hero-copy { grid-column: 1 / span 6; }
  .hero-side { grid-column: 7 / -1; }
  .hero-advisers .hero-adviser-role { max-width: 144px; -webkit-line-clamp: 3; }
}
@media (max-width: 900px) {
  .hero-copy, .hero-side { grid-column: 1 / -1; }
  .hero-advisers { justify-content: flex-start; flex-wrap: wrap; }
  .hero-side .hero-cta { align-self: auto; }
}
@media (max-width: 600px) {
  .enq-head { padding: 19.8px 16.2px 16.2px; }
  .enq-title, .lease-modal .enq-head .kf-dialog-title { font-size: 25.2px; }
  .enq-head .adv-face { width: 57.6px; height: 57.6px; }
  .lease-modal .enq-body { padding: 18px 16.2px 0; }
  .adv-team { grid-template-columns: 1fr; }
}
/* Small or short screens: the form scrolls inside the dialog. The close stays
   at the top (over the red head, then over the form), Send stays at the foot. */
@media (max-width: 520px), (max-height: 600px) {
  .lease-modal .modal-close { margin: 7.2px 7.2px -42px 0; }
  .lease-modal .enq-body { padding-bottom: 0; }
}
@media (max-width: 520px) {
  .hero-side { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 9px; }
  .hero-advisers { display: grid; grid-template-columns: 1fr 1fr; gap: 7.2px; }
  .hero-advisers .hero-adviser { padding: 3.6px 9px 3.6px 3.6px; gap: 7.2px; }
  .hero-advisers .hero-adviser-img { width: 39.6px; height: 39.6px; }
  .hero-av { font-size: 13.5px; }
  .hero-advisers .hero-adviser-name { font-size: 13.5px; }
  .hero-advisers .hero-adviser-role { font-size: 10.36px; max-width: none; }
  .hero-side .hero-cta { width: 100%; }
  .help-modal .agent-card { padding: 14.4px; }
  /* Both dialogs are a full-width bottom sheet here, as before. */
  .lease-modal.kf-dialog, .help-modal.kf-dialog { width: 100%; }
}
@media (max-width: 400px) {
  .hero-advisers .hero-adviser-role { display: -webkit-box; }
}
@media print {
  .enq-head { display: none; }
}

/* --------------------------------------------------------------------------
   10. THE ANSWER IN VIEW
   The result is never a scroll away: a shorter banner, the lease check as two
   columns (the inputs held in place on the left, the result filling on the
   right as you type), the optional detail folded, and on a phone a bar at the
   foot of the screen that says the result and goes to it. Every answer gets
   a response: a tick on a filled blank, a count of what is left, and a brief
   mark on the result when it changes. Quiet, for a business audience.
   -------------------------------------------------------------------------- */

/* The banner, short and in two clear rows: the title on the left and who
   answers on the right, both sitting on one baseline; then the two tools as
   full-width tabs on the banner's lower edge. The skyline stands on the tabs
   at the right, under the advisors' card, and the loose geometry is dropped
   (it collided with the advisors). */
.band.band--intro {
  padding-top: 32.4px;
  background-position: right 2% bottom 68.4px; background-size: auto 46%;
}
.band--intro.geo-on .hero-geo .geo { display: none; }
.hero-grid { align-items: end; }
.hero-copy { grid-column: 1 / span 7; }
.band--intro h1 { font-size: clamp(30.6px, 3.6vw, 46.8px); }
.band--intro .intro-line { margin-top: 10.8px; font-size: 14.4px; }
.hero-eyebrow { margin-bottom: 12.6px; }

/* Who answers: one card, the two advisors stacked, the button across its foot. */
.hero-side {
  grid-column: 9 / -1; justify-self: stretch; align-items: stretch; gap: 0;
  padding: 10.8px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 7.2px; backdrop-filter: blur(5.4px);
}
.hero-advisers { flex-direction: column; gap: 7.2px; justify-content: flex-start; }
.hero-advisers .hero-adviser { padding: 0; gap: 10.8px; background: none; border: 0; border-radius: 0; }
.hero-advisers .hero-adviser-img { width: 39.6px; height: 39.6px; }
.hero-advisers .hero-adviser-name { font-size: 13.5px; }
.hero-advisers .hero-adviser-role { max-width: none; -webkit-line-clamp: 1; }
.hero-side .hero-cta { align-self: stretch; margin-top: 10.8px; }

.band--intro .path-tabs { position: relative; z-index: 1; max-width: none; margin-top: 28.8px; }
.band--intro .path-tab { padding: 12.6px 18px 14.4px; }
/* Solid, so the skyline stands on the tabs instead of showing through them. */
.band--intro .path-tab[aria-selected="false"] { background: #7D1322; }
.band--intro .path-tab[aria-selected="false"]:hover { background: #7D1322; }
.band--intro .path-q { font-size: 19.8px; }

@media (max-width: 1100px) {
  .hero-copy { grid-column: 1 / span 7; }
  .hero-side { grid-column: 8 / -1; }
}
@media (max-width: 900px) {
  .band.band--intro { background-image: none; }
  .hero-copy, .hero-side { grid-column: 1 / -1; }
  .hero-side { justify-self: start; width: min(100%, 378px); }
}
@media (max-width: 520px) {
  .hero-side { width: 100%; }
  .hero-advisers { display: flex; }
}

/* A filled blank shows a small tick; a blank still to fill keeps its line. */
#panel-lease .s-token { position: relative; }
#panel-lease .s-token.is-done::after {
  content: ''; position: absolute; right: -1.5px; top: -4.5px; width: 12.6px; height: 12.6px; border-radius: 50%;
  background: var(--st-good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-4.9' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12.6px no-repeat;
  animation: kfTick 0.32s var(--ease-entrance) both;
}
@keyframes kfTick { from { opacity: 0; scale: 0.4; } to { opacity: 1; scale: 1; } }

/* What is left to answer: four marks that fill, and the words. */
.lc-progress { display: flex; align-items: center; gap: 10.8px; margin: 18px 0 0 30.6px; font-size: 11.7px; color: var(--grey-strong); }
.lc-progress-marks { display: flex; gap: 3.6px; }
.lc-progress-marks i { width: 19.8px; height: 3.6px; background: var(--line); transition: background var(--dur-base) var(--ease-standard); }
.lc-progress-marks i.on { background: var(--kf-red); }
.lc-progress.is-complete { color: var(--ink); }
.lc-progress.is-complete .lc-progress-marks i { background: var(--st-good); }

/* The optional detail, folded under one line. */
.lc-optional { margin-top: 28.8px; }
.lc-optional > summary { cursor: pointer; list-style: none; margin-bottom: 3.6px; }
.lc-optional > summary::-webkit-details-marker { display: none; }
.lc-optional > summary::after {
  content: '+'; margin-left: auto; font-size: 18px; line-height: 1; color: var(--grey-strong);
  transition: rotate var(--dur-base) var(--ease-standard);
}
.lc-optional[open] > summary::after { rotate: 45deg; }
.lc-optional > summary:hover { color: var(--kf-red); }
.lc-optional > summary .meta { color: var(--grey-strong); }

/* A result that has just changed: a short red wash on its tiles. */
@keyframes kfUpdated { from { box-shadow: inset 0 0 0 1.8px var(--kf-red); } to { box-shadow: inset 0 0 0 1.8px transparent; } }
.is-updated .score-tile, .result-card.is-updated .result-pin { animation: kfUpdated 0.9s var(--ease-standard); }

/* Wide screens: the inputs as one short full-width block (the step and its
   line, the sentence across the width as the bar, the notes in a row
   beneath), and the result straight under it at full width, so the charts
   keep their room and the answer starts on the first screen. */
@media (min-width: 1000px) {
  #panel-lease > .band--dark { padding-top: 28.8px; }
  #panel-lease .lease-intro { padding: 21.6px 28.8px 0; }
  #panel-lease .lease-bar { padding: 0 28.8px 9px; }
  #panel-lease .sentence:not(.sentence--small) { margin-top: 10.8px; font-size: 23.4px; }
  #panel-lease .lease-inputs {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28.8px; align-items: start;
    padding: 12.6px 28.8px 21.6px;
  }
  #panel-lease .lease-inputs > * { grid-column: 1 / -1; }
  /* The fold on the left; privacy and clear on the right. */
  #panel-lease .lease-inputs > .lc-optional { grid-column: 1; margin-top: 0; }
  #panel-lease .lease-inputs > .lc-privacy { grid-column: 2; grid-row: 1; margin-top: 0; max-width: 46ch; text-align: right; }
  #panel-lease .lease-inputs > .reset-link { grid-column: 2; grid-row: 2; justify-self: end; margin-top: 3.6px; }
  #panel-lease .lease-inputs .lc-optional > summary { margin-bottom: 0; padding-top: 0; border-top: 0; }
  #panel-lease .lease-inputs .lc-optional[open] { grid-column: 1 / -1; }
  #panel-lease .result-head { margin-top: 28.8px; }
  #panel-lease .scorecard { margin-top: 18px; }
  #panel-lease .score-tile { min-height: 151.2px; }
  /* Off screen on a wide screen too only once scrolled far; centred and narrow. */
  .result-bar { left: 0; right: 0; margin: 0 auto; width: min(504px, calc(100vw - 28.8px)); }
}

/* The result bar: phones and narrow screens, above the fixed footer. */
.result-bar {
  position: fixed; left: 10.8px; right: 10.8px; bottom: 43.2px; z-index: 480;
  display: flex; align-items: center; gap: 10.8px; padding: 9px 9px 9px 14.4px;
  background: var(--ink); color: var(--white); border-radius: 7.2px;
  box-shadow: 0 12.6px 27px -9px rgba(26,26,26, 0.55);
  animation: kfRise 0.35s var(--ease-entrance) both;
}
.result-bar[hidden] { display: none; }
.result-bar-text { flex: 1; min-width: 0; margin: 0; font-size: 12.6px; line-height: 1.3; }
.result-bar-label { display: block; font-size: 9.9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.result-bar-text b { font-weight: 400; }
.result-bar-go { flex: none; min-height: 36px; padding: 0 14.4px; font-size: 12.6px; }
.result-bar.is-updated { animation: kfBarPulse 0.6s var(--ease-standard); }
@keyframes kfBarPulse { 40% { transform: scale(1.03); } }
@media (max-width: 640px) { .result-bar { bottom: 54px; } }
@media print { .result-bar { display: none !important; } }

/* --------------------------------------------------------------------------
   11. "WHY CALCULATE?": a quiet link in the banner, and its dialog: the red
   head the enquiry forms use, then the two tools side by side.
   -------------------------------------------------------------------------- */
.hero-why {
  margin-top: 12.6px; padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--white);
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 3.6px;
}
.hero-why::after { content: ' \2192'; content: ' \2192' / ''; }
.hero-why:hover { text-decoration-color: var(--white); }
.hero-why:focus-visible { outline: 1.8px solid var(--white); outline-offset: 2.7px; }

.why-dialog.kf-dialog {
  width: min(792px, calc(100vw - 28.8px)); max-height: calc(100dvh - 43.2px);
  position: fixed; inset: 0; margin: auto; height: fit-content;
  padding: 0; border: 0; border-radius: 7.2px; overflow-y: auto; color: var(--ink);
}
.why-dialog::backdrop { background: rgba(26,26,26, 0.55); }
.why-dialog[open] { animation: kfRise 0.3s var(--ease-entrance) both; }
body:has(.why-dialog[open]) { overflow: hidden; }
.why-dialog .modal-close {
  position: absolute; top: 12.6px; right: 12.6px; z-index: 1;
  color: var(--white); background: rgba(26,26,26, 0.22); border-radius: 50%;
}
.why-dialog .modal-close:hover { background: rgba(26,26,26, 0.36); }
.why-head { background: var(--kf-red); color: var(--white); padding: 25.2px 28.8px 21.6px; }
.why-head .enq-sub { margin-bottom: 0; max-width: 62ch; }
.why-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28.8px; padding: 25.2px 28.8px 7.2px; }
.why-col { display: flex; flex-direction: column; min-width: 0; }
.why-col-title {
  display: flex; align-items: baseline; gap: 10.8px; margin: 0 0 10.8px; padding-top: 10.8px; border-top: var(--rule-strong);
  font-family: var(--font-body); font-size: 18px; font-weight: 400; color: var(--ink);
}
.why-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10.8px; flex: 1; }
.why-list li { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); padding-left: 14.4px; position: relative; }
.why-list li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 5.4px; height: 5.4px; background: var(--kf-red); }
.why-list b { display: block; margin-bottom: 1.8px; font-size: 14.4px; font-weight: 400; color: var(--ink); }
.why-go { align-self: flex-start; min-height: var(--ctl-m); }
.why-dialog .kf-btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.why-dialog .kf-btn--ghost:hover { border-color: var(--ink); }
.why-foot { margin: 14.4px 28.8px 25.2px; padding: 12.6px 14.4px; background: var(--paper); font-size: 12.6px; line-height: 1.45; color: var(--ink-2); }
.why-foot b { font-weight: 400; color: var(--ink); }

@media (max-width: 680px) {
  .why-body { grid-template-columns: 1fr; gap: 25.2px; padding: 19.8px 16.2px 3.6px; }
  .why-head { padding: 19.8px 16.2px 16.2px; }
  .why-foot { margin: 10.8px 16.2px 19.8px; }
}

/* --------------------------------------------------------------------------
   12. PHONES: a shorter banner (the two advisors side by side, names only),
   the result bar clear of the WhatsApp button, and "Why calculate?" as a
   full-screen sheet whose close stays in reach and whose points are tighter.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .band.band--intro { padding-top: 21.6px; }
  .band--intro h1 { font-size: 28.8px; }
  .band--intro .intro-line { font-size: 13.5px; margin-top: 7.2px; }
  .hero-eyebrow { font-size: 9.9px; margin-bottom: 9px; }
  .hero-grid { gap: 16.2px; }
  .hero-side { padding: 9px; }
  .hero-advisers { display: grid; grid-template-columns: 1fr 1fr; gap: 7.2px; }
  .hero-advisers .hero-adviser { gap: 7.2px; }
  .hero-advisers .hero-adviser-img { width: 32.4px; height: 32.4px; }
  .hero-advisers .hero-adviser-name { font-size: 12.6px; }
  .hero-advisers .hero-adviser-role { display: none; }
  .hero-side .hero-cta { margin-top: 9px; min-height: 39.6px; }
  .band--intro .path-tabs { margin-top: 18px; }

  .result-bar { right: 75.6px; }

  .why-dialog.kf-dialog {
    width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0;
  }
  .why-dialog[open] { animation: kfSheetUp 0.3s var(--ease-entrance) both; }
  .why-dialog .modal-close { position: sticky; top: 9px; float: right; margin: 9px 9px -40.5px 0; background: rgba(26, 26, 26, 0.72); }
  .why-head { padding: 18px 16.2px 14.4px; }
  .why-head .enq-title { font-size: 23.4px; padding-right: 43.2px; }
  .why-head .enq-sub { font-size: 12.6px; }
  .why-body { gap: 21.6px; padding: 16.2px 16.2px 0; }
  .why-col-title { font-size: 16.2px; margin-bottom: 9px; }
  .why-list { gap: 9px; margin-bottom: 14.4px; }
  .why-list li { font-size: 12.6px; }
  .why-list b { font-size: 13.5px; }
  .why-go { width: 100%; }
  .why-foot { margin: 18px 16.2px calc(18px + env(safe-area-inset-bottom)); }
}
@keyframes kfSheetUp { from { transform: translateY(21.6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* --------------------------------------------------------------------------
   13. THE BANNER'S BUTTONS, as on the Flex Space Portal: "Why calculate?" is
   its outlined pill with a white mark (kf-compare.css .kfc-hero-btn), filling
   white on hover; "Talk to an advisor" gets the portal's sheen.
   -------------------------------------------------------------------------- */
.hero-why {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 14.4px;
  min-height: 36px; padding: 0 14.4px 0 5.4px;
  border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 899.1px; background: rgba(255, 255, 255, 0.08);
  color: var(--white); font-size: 12.6px; text-decoration: none;
  transition: background 150ms, color 150ms, border-color 150ms;
}
.hero-why::after { content: none; }
.hero-why:hover { background: var(--white); color: var(--kf-red); border-color: var(--white); }
.hero-why-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 25.2px; height: 25.2px; border-radius: 50%;
  background: var(--white); color: var(--kf-red); font-size: 12.6px; font-weight: 700; line-height: 1;
  transition: background 150ms, color 150ms;
}
.hero-why:hover .hero-why-mark { background: var(--kf-red); color: var(--white); }
/* The pair of pills: "Why calculate?" and the way out to the Flex Space Portal. */
.hero-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 14.4px; }
.hero-pills .hero-why { margin-top: 0; }
.hero-flex-link.hero-anim { animation-delay: 0.56s; }

.hero-cta { position: relative; overflow: hidden; isolation: isolate; }
.hero-cta::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(166, 25, 46, 0.16) 50%, transparent 70%);
  transform: translate3d(-120%, 0, 0); transition: transform 0.7s var(--ease-entrance);
}
.hero-cta:hover::after, .hero-cta:focus-visible::after { transform: translate3d(120%, 0, 0); }
@media (max-width: 640px) { .hero-why { margin-top: 10.8px; font-size: 11.7px; } }

/* --------------------------------------------------------------------------
   14. BANNER MOTION, as on the Flex Space Portal's hero
   The portal's opening, ported: each headline word rises out of its own mask,
   the skyline's towers grow up from the waterline, the advisors arrive face
   first, the white button settles, its arrow nudges in and its sheen passes
   once. Behind it, the portal's ambient light: a diamond lattice drifting on
   the right and a soft sweep every eleven seconds. Script (initBannerMotion)
   adds .intro-done when the opening is over, which hands the headline to its
   shimmer, and .is-offscreen while the banner is out of view, which pauses the
   loops. Transforms and opacity only, bar the shimmer. The global reduced-
   motion rule in index.html ends all of it at once.
   -------------------------------------------------------------------------- */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
}

/* Ambient light: under the skyline and the copy (both sit above z-index 0). */
.band--intro::before {
  content: ''; position: absolute; inset: -27px 0 0 -27px; z-index: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M18 14l4 4-4 4-4-4z' fill='%23fff'/%3E%3C/svg%3E") 0 0 / 32.4px 32.4px;
  opacity: 0.09;
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 90%); mask-image: linear-gradient(90deg, transparent 35%, #000 90%);
  animation: heroLattice 14s linear infinite; will-change: transform;
}
.band--intro::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.07) 50%, transparent 100%);
  transform: translate3d(-110%, 0, 0); animation: heroSweep 11s ease-in-out 2.4s infinite;
}
@keyframes heroLattice { to { transform: translate3d(32.4px, 32.4px, 0); } }
@keyframes heroSweep { 0% { transform: translate3d(-110%, 0, 0); } 35%, 100% { transform: translate3d(260%, 0, 0); } }
.band--intro.is-offscreen::before, .band--intro.is-offscreen::after, .band--intro.is-offscreen h1 { animation-play-state: paused; }

/* The headline: each word rises out of its own mask. */
.band--intro h1 .hw { display: inline-block; vertical-align: top; overflow: hidden; padding: 0.06em 0 0.16em; margin: -0.06em 0 -0.16em; }
.band--intro h1 .hw > span { display: inline-block; transform-origin: 0 100%; }
@keyframes kfWordUp { from { transform: translate3d(0, 112%, 0) rotate(5deg); } }
.band--intro:not(.intro-done) h1 .hw > span { animation: kfWordUp 1s var(--ease-out-expo) backwards; animation-delay: calc(120ms + var(--w, 0) * 44ms); }
.band--intro h1 .hw:nth-child(2) > span { --w: 1; }
.band--intro h1 .hw:nth-child(3) > span { --w: 2; }
/* Then the shimmer. Not during the opening: Chrome leaves a transformed child
   out of a background-clip:text mask, so a rising word would vanish. Screen
   only, so a printed page keeps a solid title. */
@media screen {
  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .band--intro.intro-done h1 {
      background: linear-gradient(100deg, #fff 0%, #fff 38%, #EDD1D5 50%, #fff 62%, #fff 100%);
      background-size: 260% 100%; background-position: 100% 0;
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
      animation: heroShimmer 8s ease-in-out 1.2s infinite;
    }
  }
}
@keyframes heroShimmer { 0% { background-position: 100% 0; } 30%, 100% { background-position: 0 0; } }

/* The skyline: where the banner background put it, each tower rising in turn
   (its --i is set in the markup), then the lattice and gaps cut into it, the
   waterline drawn from the left. Placed and hidden on narrow screens in section 15. */
.hero-sky { position: absolute; right: 4%; bottom: -1.5px; height: 58%; width: auto; pointer-events: none; }
.hero-sky > g > g[fill] > * { transform-box: fill-box; transform-origin: 50% 100%; animation: heroTowerRise 900ms var(--ease-entrance) backwards; animation-delay: calc(150ms + var(--i, 0) * 55ms); }
.hero-sky > g > g:is([stroke], [clip-path]) { animation: kfFadeIn 600ms ease 1300ms backwards; }
.hero-sky > g > rect { transform-box: fill-box; transform-origin: 0 50%; animation: heroWaterline 900ms var(--ease-entrance) backwards; }
@keyframes heroTowerRise { from { transform: scaleY(0); } }
@keyframes heroWaterline { from { transform: scaleX(0); } }
@keyframes kfFadeIn { from { opacity: 0; } }

/* The advisors: the glass pill fades in place, the face settles with a small
   overshoot, then the name is wiped in from the left. */
@keyframes kfAvatarIn { from { opacity: 0; transform: scale(0.55); } }
@keyframes kfNameIn { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate3d(-3px, 0, 0); } to { clip-path: inset(0 0 0 0); } }
.band--intro:not(.intro-done) .hero-adviser { --ad: calc(560ms + var(--a, 0) * 120ms); animation: kfFadeIn 360ms ease-out backwards; animation-delay: var(--ad); }
.band--intro:not(.intro-done) .hero-adviser-img { animation: kfAvatarIn 620ms var(--ease-out-back) backwards; animation-delay: calc(var(--ad) + 80ms); }
.band--intro:not(.intro-done) .hero-adviser-text { animation: kfNameIn 520ms var(--ease-out-expo) backwards; animation-delay: calc(var(--ad) + 260ms); }
.hero-adviser:nth-child(2) { --a: 1; }
.hero-adviser:nth-child(n+3) { --a: 2; }

/* The white button: settles, its arrow nudges in, and one pass of its sheen. */
@keyframes kfCtaIn { from { opacity: 0; transform: translate3d(0, 14.4px, 0) scale(0.94); } }
@keyframes kfNudge { from { opacity: 0; transform: translate3d(-6px, 0, 0); } }
@keyframes kfSheenPass { from { transform: translate3d(-120%, 0, 0); } to { transform: translate3d(120%, 0, 0); } }
.band--intro:not(.intro-done) .hero-cta { animation: kfCtaIn 900ms var(--ease-out-expo) 720ms backwards; }
.band--intro:not(.intro-done) .hero-cta svg { animation: kfNudge 800ms var(--ease-out-expo) 1200ms backwards; }
.band--intro:not(.intro-done) .hero-cta::after { animation: kfSheenPass 1100ms var(--ease-in-out-quart) 1500ms; }

/* --------------------------------------------------------------------------
   15. BANNER LAYOUT, as on the Flex Space Portal's hero
   The same card as the portal's Browse banner: inset from the page edges with
   rounded corners, a short headline and its subline on the left, the two tools
   as the portal's numbered steps under them, "Why calculate?" as its outlined
   pill, and on the right the advisors as glass pills side by side over the one
   white button. The skyline stands centred behind it, on wide screens only.
   Settles every banner rule above (sections 1, 8, 11 and 12) for screens;
   print keeps its own. Measured against the portal at 1296px.
   -------------------------------------------------------------------------- */
@media screen {
  .band.band--intro { margin: 9px 12.6px; border-radius: 5.4px; padding: 16.2px 23.4px 14.4px; background: var(--kf-red); }
  /* Clip, not just hide: the light sweep travels far past the right edge, and
     a hidden overflow can still be scrolled, so focusing an advisor slid the
     whole banner sideways. */
  .band.band--intro { overflow: clip; }
  .band.band--intro > .wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28.8px; align-items: center;
    max-width: none; margin: 0; padding: 0;
  }
  /* The copy's pieces and the tabs go on one grid, in the portal's order:
     headline, subline, steps, then the pill. */
  .band.band--intro .hero-grid, .band.band--intro .hero-copy { display: contents; }
  .band.band--intro .hero-eyebrow { display: none; }
  .band.band--intro h1 {
    grid-column: 1; grid-row: 1; margin: 0;
    font-family: var(--font-body); font-weight: 500; font-size: clamp(21.6px, 2vw, 27px); line-height: 1.08; letter-spacing: -0.02em;
  }
  .band.band--intro .intro-line { grid-column: 1; grid-row: 2; margin: 5.4px 0 0; max-width: none; font-size: 12.16px; font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, 0.9); }
  .band.band--intro .hero-why { grid-column: 1; grid-row: 4; justify-self: start; margin-top: 10.8px; min-height: 30.6px; font-size: 11.7px; }
  .band.band--intro .hero-pills { grid-column: 1; grid-row: 4; justify-self: start; margin-top: 10.8px; gap: 7.2px; }
  .band.band--intro .hero-pills .hero-why { margin-top: 0; }
  .band.band--intro .hero-why-mark { width: 21.6px; height: 21.6px; font-size: 10.8px; }

  /* The two tools as the portal's steps: a numbered glass disc and the name in
     bold, the note after it; the tool on screen has the white disc. Still the
     tablist they were. */
  .band.band--intro .path-tabs {
    grid-column: 1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 5.4px 21.6px;
    max-width: none; margin: 9px 0 0;
  }
  .band.band--intro .path-tab,
  .band.band--intro .path-tab[aria-selected="false"],
  .band.band--intro .path-tab[aria-selected="true"] {
    display: inline-flex; align-items: center; gap: 7.2px; min-height: 27px; padding: 0;
    background: none; color: var(--white); border: 0; border-radius: 0;
    font-size: 12.6px; line-height: 1.2; text-align: left; cursor: pointer;
  }
  .band.band--intro .path-tab[aria-selected="false"] { opacity: 0.78; }
  .band.band--intro .path-tab:hover { background: none; opacity: 1; }
  .band.band--intro .path-tab:focus-visible { outline: 1.8px solid var(--white); outline-offset: 2.7px; }
  .band.band--intro .path-num {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 21.6px; height: 21.6px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.24);
    color: var(--white); font-size: 9.9px; font-weight: 700; letter-spacing: 0;
    transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
  }
  .band.band--intro .path-tab[aria-selected="true"] .path-num { background: var(--white); color: var(--kf-red); box-shadow: none; }
  .band.band--intro .path-q { font-size: 12.6px; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
  .band.band--intro .path-what { font-size: 12.6px; font-weight: 300; opacity: 1; }
  .band.band--intro .path-status { margin: 0; padding: 0; font-size: 12.6px; font-weight: 300; }
  .band.band--intro .path-status:empty { display: none; }
  /* With a result on file the note gives way to it. */
  .band.band--intro .path-tab:has(.path-status:not(:empty)) .path-what { display: none; }

  /* Who answers, then the button, on the right. */
  .band.band--intro .hero-side {
    grid-column: 2; grid-row: 1 / span 4; align-self: center; justify-self: end; width: auto;
    display: flex; flex-direction: column; align-items: stretch; gap: 9px;
    padding: 0; background: none; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .band.band--intro .hero-advisers { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; gap: 9px; }
  .band.band--intro .hero-adviser {
    flex: 0 1 auto; min-width: 0; gap: 9px; padding: 4.5px 12.6px 4.5px 4.5px;
    background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 899.1px;
    -webkit-backdrop-filter: blur(7.2px); backdrop-filter: blur(7.2px); font-size: 12.16px;
  }
  .band.band--intro .hero-adviser-img { width: 34.2px; height: 34.2px; border: 1.8px solid rgba(255, 255, 255, 0.85); }
  .band.band--intro .hero-av { font-size: 11.7px; font-weight: 700; }
  .band.band--intro .hero-adviser-name { font-size: 12.6px; font-weight: 700; line-height: 1.25; }
  .band.band--intro .hero-adviser-role {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    max-width: 153px; white-space: normal; font-size: 10.36px; line-height: 1.3; color: rgba(255, 255, 255, 0.8);
  }
  .band.band--intro .hero-side .hero-cta {
    align-self: stretch; margin: 0; min-height: 41.4px; padding: 0 19.8px; font-size: 13.5px; font-weight: 700;
  }
  .band.band--intro .hero-cta:active { transform: scale(0.96); }

  /* The skyline, centred behind the card as on the portal. */
  .band.band--intro .hero-sky { left: 58%; right: auto; bottom: -4.5px; height: 86%; transform: translateX(-58%); }
}
@media screen and (min-width: 881px) and (max-width: 1199px) {
  .band.band--intro .path-what { display: none; }
}
/* Phones and tablets: the portal's stacked banner, the button under the
   advisors, no skyline. */
@media screen and (max-width: 880px) {
  .band.band--intro { margin: 9px 10.8px 0; padding: 16.2px 14.4px; }
  .band.band--intro > .wrap { grid-template-columns: minmax(0, 1fr); }
  .band.band--intro h1 { font-size: 21.6px; }
  .band.band--intro .hero-side { grid-column: 1; grid-row: 5; justify-self: stretch; margin-top: 12.6px; }
  .band.band--intro .hero-advisers { justify-content: flex-start; }
  .band.band--intro .path-what { display: none; }
  .hero-sky { display: none; }
}
/* Phones, as the portal: the white button first, then each advisor on a line
   of their own with the full title. */
@media screen and (max-width: 520px) {
  .band.band--intro h1 { font-size: 20.7px; }
  .band.band--intro .hero-side .hero-cta { order: -1; }
  .band.band--intro .hero-advisers { flex-direction: column; align-items: flex-start; gap: 7.2px; }
  .band.band--intro .hero-adviser { max-width: 100%; }
  .band.band--intro .hero-adviser-role { display: block; max-width: none; -webkit-line-clamp: unset; }
}

/* --------------------------------------------------------------------------
   16. ADVISOR CONTACT CARD, as on the Flex Space Portal
   The advisors in the banner are buttons; each opens a card under it with
   call, WhatsApp, email and a LinkedIn mark (whatever Settings holds). The
   card lives on <body>, so the banner's overflow cannot clip it.
   -------------------------------------------------------------------------- */
button.hero-adviser {
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.band.band--intro button.hero-adviser:hover, .band.band--intro button.hero-adviser[aria-expanded="true"] { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.6); }
button.hero-adviser:active { transform: scale(0.98); }
button.hero-adviser:focus-visible { outline: 1.8px solid var(--white); outline-offset: 1.8px; }
.adv-card {
  position: fixed; z-index: 1200; width: 270px; max-width: calc(100vw - 21.6px); padding: 14.4px;
  background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 7.2px;
  box-shadow: 0 16.2px 36px -12px rgba(26,26,26, 0.45), 0 1.8px 7.2px rgba(26,26,26, 0.06);
  animation: advCardIn 220ms var(--ease-entrance) both;
}
@keyframes advCardIn { from { opacity: 0; transform: translateY(-4.5px) scale(0.98); } }
.adv-card-head { display: flex; align-items: flex-start; gap: 10.8px; }
.adv-card-head img, .adv-card-av { flex: none; width: 46.8px; height: 46.8px; border-radius: 50%; object-fit: cover; background: var(--paper-2); }
.adv-card-av { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--kf-red); }
.adv-card-who { flex: 1; min-width: 0; }
.adv-card-name { margin: 1.8px 0; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.adv-card-title { margin: 0; font-size: 10.8px; line-height: 1.35; color: var(--grey-strong); }
.adv-card-cea { margin: 3.6px 0 0; font-size: 9.9px; color: var(--grey-strong); }
.adv-card-li {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28.8px; height: 28.8px;
  border-radius: 5.4px; color: #0A66C2; transition: background var(--dur-fast);
}
.adv-card-li svg { width: 19.8px; height: 19.8px; }
.adv-card-li:hover { background: rgba(10, 102, 194, 0.1); }
.adv-card-li:focus-visible { outline: 1.8px solid #0A66C2; outline-offset: 1.8px; }
.adv-card-rows { margin-top: 12.6px; border-top: 1px solid var(--line); }
.adv-card-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10.8px; min-height: 36px; padding: 0 1.8px;
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 11.7px;
}
.adv-card-row:last-child { border-bottom: 0; }
.adv-card-row span { color: var(--grey-strong); }
.adv-card-row b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-card-row:hover b { color: var(--kf-red); }
.adv-card-row:focus-visible { outline: 1.8px solid var(--kf-red); outline-offset: -1.5px; }
@media print { .adv-card { display: none; } }

/* --------------------------------------------------------------------------
   17. ENQUIRY FORMS, as on the Flex Space Portal
   The portal's enquiry dialog is the model for every form here: small
   uppercase labels, rounded fields with a red focus ring, the consent in
   small grey type, and a foot with "* Required" on the left and the red
   button on the right. On a wide screen the red panel with the advisors
   becomes a column beside the form, so the whole form is in view without
   scrolling. A phone still stacks. Measured against the portal at 1152px.
   -------------------------------------------------------------------------- */
.enq-title, .lease-modal .enq-head .kf-dialog-title { font-weight: 400; }
.lease-form label:not(.consent-checkbox-label),
.hc-form label:not(.consent-checkbox-label):not(.hc-consent) {
  font-size: 10.36px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey-strong);
}
.lease-form input:not([type="checkbox"]), .lease-form select, .lease-form textarea,
.hc-form input:not([type="checkbox"]), .hc-form select, .hc-form textarea {
  border: 1px solid var(--line-strong); border-radius: 5.4px; background: var(--white); font-size: 13.5px;
}
.lease-form .consent-text { font-size: 9.46px; line-height: 1.6; color: var(--grey-strong); }
.lease-form .form-actions { display: flex; align-items: center; gap: 10.8px; border-top: 1px solid var(--line); }
.lease-form .form-note { margin-right: auto; font-size: 10.8px; color: var(--grey-strong); }
.lease-form .form-actions .kf-btn[type="submit"], .hc-actions .kf-btn[type="submit"] { order: 2; border-radius: 5.4px; }
.lease-form .form-actions .kf-btn--quiet { order: 1; }

@media screen and (min-width: 900px) {
  .lease-modal.kf-dialog { width: min(936px, 94vw); grid-template-columns: minmax(234px, 279px) 1fr; overflow: hidden; }
  .lease-modal.kf-dialog.open { display: grid; }
  .lease-modal .enq-head { display: flex; flex-direction: column; padding: 25.2px 19.8px 18px; }
  .lease-modal .enq-head .kf-dialog-title { font-size: 25.2px; padding-right: 0; }
  .lease-modal .enq-head .kf-dialog-intro { margin: 7.2px 0 16.2px; font-size: 12.16px; }
  .lease-modal .enq-head .adv-team { grid-template-columns: 1fr; gap: 9px; }
  .lease-modal .enq-head .adv-person { align-items: flex-start; gap: 10.8px; padding: 10.8px; }
  .lease-modal .enq-head .adv-face { width: 46.8px; height: 46.8px; font-size: 14.4px; }
  .lease-modal .enq-head .adv-name { font-size: 14.4px; }
  .lease-modal .enq-head .adv-title { font-size: 10.8px; }
  .lease-modal .enq-company { margin-top: auto; padding-top: 14.4px; }
  /* The close button sits over the white form, not the red panel. */
  .lease-modal .modal-close { color: var(--ink); background: var(--paper-2); }
  .lease-modal .modal-close:hover { background: var(--line); }
  .lease-modal .modal-close:focus-visible { outline-color: var(--ink); }
  .lease-modal .enq-body { padding: 21.6px 25.2px 18px; overflow-y: auto; max-height: 90dvh; }
  .lease-form .form-row { gap: 9px 12.6px; margin-bottom: 9px; }
  .lease-form input:not([type="checkbox"]), .lease-form select { height: 36px; font-size: 12.6px; }
  .lease-form textarea { min-height: 57.6px; font-size: 12.6px; }
  .lease-form .consent-checkbox-label { margin-top: 10.8px; }
  .lease-form .form-actions { margin-top: 12.6px; padding-top: 10.8px; }
  .lease-form .form-actions .kf-btn { min-height: 39.6px; font-size: 13.5px; }

}
/* A phone: the pinned action bar stays short; the dialog head already carries the licence. */
@media (max-width: 600px) { .lease-form .form-note { display: none; } }

/* On paper the space inputs and the lease sentence print where they sit,
   once: never docked as a sheet or stuck as a bar (after the sheet's rules,
   which a narrow page would otherwise match). */
@media print {
  .space-cmd, .lease-bar { position: static; max-height: none; overflow: visible; box-shadow: none; border-radius: 0; }
  body:not(.is-admin):has(#panel-space:not([hidden])) { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   18. THE BANNERS, simple: the Flex Space Portal's chosen hero (option 1)
   cut down. Flat brand red, no skyline or ambient light, a one-line serif
   headline and its sub line, the two tools as one line of text under them;
   on the right the advisors (overlapped faces and one line for everyone)
   beside the one white button, the links under them as quiet underlined
   text. The only motion is a plain fade-in (none with reduced motion, by
   the page's global rule). Settles sections 1, 8 and 11-16 for screens;
   print keeps its own. Sizes are design px x0.9.
   -------------------------------------------------------------------------- */
@media screen {
  .band.band--intro { padding: 14.4px 21.6px; background: var(--kf-red); animation: kfFadeIn 400ms ease-out both; }
  .band.band--intro::before, .band.band--intro::after, .band.band--intro .hero-geo { display: none; }
  /* One fade for the whole banner: none of the earlier word, face or sheen motion. */
  #main .band.band--intro *, #main .band.band--intro *::before, #main .band.band--intro *::after { animation: none; }
  .band.band--intro.intro-done h1 { background: none; -webkit-text-fill-color: currentColor; color: var(--white); }

  .band.band--intro > .wrap { grid-template-columns: minmax(0, 1fr) auto; column-gap: 36px; row-gap: 0; align-items: center; }
  .band.band--intro h1 {
    grid-column: 1; grid-row: 1; margin: 0; white-space: nowrap;
    font-family: var(--font-serif); font-weight: 500; font-size: 27px; line-height: 1.05; letter-spacing: -0.01em;
  }
  .band.band--intro .intro-line {
    grid-column: 1; grid-row: 2; margin: 3.6px 0 0; max-width: none;
    font-size: 12.6px; font-weight: 300; line-height: 1.4; color: rgba(255, 255, 255, 0.88);
  }

  /* The two tools: one line of text, still the tablist. The tool on screen
     is white and underlined; the other is quieter. */
  .band.band--intro .path-tabs {
    grid-column: 1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 0 21.6px; max-width: none; margin: 5.4px 0 0;
  }
  .band.band--intro .path-tab,
  .band.band--intro .path-tab[aria-selected="false"],
  .band.band--intro .path-tab[aria-selected="true"] {
    display: inline-flex; align-items: baseline; gap: 5.4px; min-height: 24px; padding: 0;
    background: none; color: var(--white); border: 0; border-radius: 0; opacity: 1; text-align: left; cursor: pointer;
  }
  .band.band--intro .path-tab[aria-selected="false"] { color: rgba(255, 255, 255, 0.75); }
  .band.band--intro .path-tab[aria-selected="false"]:hover { color: var(--white); }
  .band.band--intro .path-tab .path-num,
  .band.band--intro .path-tab[aria-selected="true"] .path-num {
    display: inline; width: auto; height: auto; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    color: inherit; font-size: 10.8px; font-weight: 600; letter-spacing: 0.04em;
  }
  .band.band--intro .path-q { font-size: 12.6px; font-weight: 600; line-height: 1.3; }
  .band.band--intro .path-tab[aria-selected="true"] .path-q { text-decoration: underline; text-underline-offset: 3.6px; text-decoration-thickness: 1px; }
  .band.band--intro .path-what { display: none; }
  .band.band--intro .path-status { margin: 0; padding: 0; font-size: 11.7px; font-weight: 300; line-height: 1.3; }

  /* The advisors and the one button, side by side; the links under them. */
  .band.band--intro .hero-side {
    grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; width: auto; margin: 0; padding: 0;
    display: flex; flex-direction: row; align-items: center; gap: 18px; background: none; border: 0;
  }
  .band.band--intro .hero-advisers { display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; gap: 0; }
  .band.band--intro .hero-adviser {
    flex: none; max-width: none; gap: 0; padding: 0; background: none; border: 0; border-radius: 50%;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .band.band--intro .hero-adviser + .hero-adviser { margin-left: -7.2px; }
  .band.band--intro button.hero-adviser:hover, .band.band--intro button.hero-adviser[aria-expanded="true"] { background: none; border-color: transparent; }
  .band.band--intro .hero-adviser-img { width: 32.4px; height: 32.4px; border: 1.8px solid var(--kf-red); }
  .band.band--intro .hero-av { font-size: 10.8px; font-weight: 600; background: #B84758; }
  /* Each face is a button named "Contact details for ..."; the names are said once, beside them. */
  .band.band--intro .hero-adviser-text { display: none; }
  .band.band--intro .hero-adviser-who { display: grid; margin-left: 9px; line-height: 1.3; }
  .band.band--intro .hero-adviser-names { font-size: 11.7px; font-weight: 600; white-space: nowrap; }
  .band.band--intro .hero-adviser-shared { font-size: 10.8px; color: rgba(255, 255, 255, 0.85); white-space: nowrap; }
  .band.band--intro .hero-side .hero-cta {
    order: 0; align-self: center; width: auto; min-height: 39.6px; margin: 0; padding: 0 18px; gap: 9px;
    border-radius: 1.8px; font-size: 13.5px; font-weight: 600; box-shadow: none;
  }
  .band.band--intro .hero-cta:hover { transform: none; box-shadow: none; }
  .band.band--intro .hero-cta::after { display: none; }

  .band.band--intro .hero-pills {
    grid-column: 2; grid-row: 3; align-self: end; justify-self: end;
    display: flex; flex-wrap: wrap; column-gap: 14.4px; margin: 5.4px 0 0;
  }
  .band.band--intro .hero-why,
  .band.band--intro .hero-why:hover {
    grid-column: auto; grid-row: auto; justify-self: start;
    display: inline-flex; align-items: center; gap: 5.4px; min-height: 24px; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: none; color: rgba(255, 255, 255, 0.9);
    font-family: inherit; font-size: 11.7px; font-weight: inherit; line-height: 1.3; text-align: left; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3.6px; text-decoration-thickness: 1px;
    text-decoration-color: rgba(255, 255, 255, 0.45); transition: text-decoration-color 200ms, color 200ms;
  }
  .band.band--intro .hero-why:hover { color: var(--white); text-decoration-color: currentColor; }
  .band.band--intro .hero-why-mark { display: none; }
}
/* One column once the row stops fitting. */
@media screen and (max-width: 860px) {
  .band.band--intro > .wrap { grid-template-columns: minmax(0, 1fr); }
  .band.band--intro .hero-side { grid-column: 1; grid-row: 4; justify-self: start; margin-top: 10.8px; }
  .band.band--intro .hero-pills { grid-column: 1; grid-row: 5; justify-self: start; }
}
@media screen and (max-width: 520px) {
  .band.band--intro { padding: 14.4px; }
  .band.band--intro h1 { font-size: 23.4px; white-space: normal; }
  .band.band--intro .intro-line { font-size: 12.16px; }
  .band.band--intro .hero-side { flex-wrap: wrap; gap: 10.8px; }
  .band.band--intro .hero-side .hero-cta { order: 0; }
}

/* The red heads of the enquiry forms, "Why calculate?" and "Speak to an
   advisor" in the route's language: compact, a serif title, the advisors as
   face, name and details straight on the red (no white tiles). The help
   dialog's head and advisors, white and paper until now, turn red with them. */
@media screen {
  .enq-head, .why-head, .help-modal .modal-head, .help-modal .agent-card { background: var(--kf-red); color: var(--white); }
  .enq-head { padding: 18px 21.6px 16.2px; }
  .why-head { padding: 18px 25.2px 16.2px; }
  .help-modal .modal-head { padding: 18px 21.6px 0; }
  .help-modal .agent-card { padding: 14.4px 21.6px 18px; }
  .enq-eyebrow, .help-modal .modal-status {
    margin: 0 0 5.4px; font-size: 9.9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.86);
  }
  .enq-head .enq-title, .why-head .enq-title, .lease-modal .enq-head .kf-dialog-title, .help-modal .modal-head .kf-dialog-title {
    margin: 0; position: static; background: none; color: var(--white);
    font-family: var(--font-serif); font-weight: 500; font-size: 27px; line-height: 1.05; letter-spacing: -0.01em;
  }
  .enq-head .enq-sub, .why-head .enq-sub, .lease-modal .enq-head .kf-dialog-intro, .help-modal .modal-head .kf-dialog-intro {
    margin: 5.4px 0 14.4px; font-size: 12.6px; line-height: 1.45; color: rgba(255, 255, 255, 0.88);
  }
  .why-head .enq-sub { margin-bottom: 0; }
  .help-modal .modal-head .kf-dialog-intro { margin-bottom: 0; }
  .help-modal .modal-close, .why-dialog .modal-close { color: var(--white); background: rgba(26,26,26, 0.22); border-radius: 50%; }
  .help-modal .modal-close:hover { background: rgba(26,26,26, 0.36); }
  .help-modal .modal-close:focus-visible { outline-color: var(--white); }
  .help-modal .modal-head :focus-visible, .help-modal .agent-card :focus-visible { outline-color: var(--white); }

  /* The advisors: face, then name, title, licence and the numbers as quiet links. */
  :is(.enq-head, .help-modal .agent-card) .adv-team { gap: 12.6px 21.6px; }
  :is(.enq-head, .help-modal .agent-card) .adv-person { align-items: flex-start; gap: 10.8px; padding: 0; background: none; border: 0; border-radius: 0; color: var(--white); }
  :is(.enq-head, .help-modal .agent-card) .adv-person :focus-visible { outline-color: var(--white); }
  :is(.enq-head, .help-modal .agent-card) .adv-face { width: 39.6px; height: 39.6px; font-size: 13.5px; background: rgba(255, 255, 255, 0.2); }
  :is(.enq-head, .help-modal .agent-card) .adv-av { color: var(--white); font-weight: 600; }
  :is(.enq-head, .help-modal .agent-card) .adv-name { font-size: 12.6px; font-weight: 600; color: var(--white); }
  :is(.enq-head, .help-modal .agent-card) :is(.adv-title, .adv-cea) { font-size: 10.8px; color: rgba(255, 255, 255, 0.85); }
  :is(.enq-head, .help-modal .agent-card) :is(.adv-tel, .adv-email) {
    font-size: 11.7px; color: var(--white);
    text-decoration: underline; text-underline-offset: 3.6px; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, 0.45);
  }
  :is(.enq-head, .help-modal .agent-card) :is(.adv-tel, .adv-email):hover { text-decoration-color: currentColor; }
  .enq-company { font-size: 9.9px; color: rgba(255, 255, 255, 0.8); }
}