/* Red Brick Lettings – Brand Kit V3, Website Edition (kit dated 01/10/2026). Colours, type and shapes are the kit's
   `red-brick-brand-tokens.css`. The --rb-* names are kept from earlier versions so shared components keep working;
   the short names (--bg, --brand …) are the ones the owner's layout page uses.
   Text pairs (kit p.7): white on brick red 9.02:1 and on ink; ink on cream, card white and stone; secondary text on
   light surfaces only. Coral is decoration only: never body text, never a primary button. */
:root {
  color-scheme: light;

  --rb-brick: #8d1d20;
  --rb-brick-dark: #5f1114;
  --rb-whatsapp: #0e7568; /* WhatsApp's dark teal: white text 5.6:1; the bright green fails contrast */
  --rb-whatsapp-dark: #075e54;
  --rb-cream: #f4f1eb;
  --rb-surface: #fffdf8;
  --rb-white: #ffffff;
  --rb-sand: #ebe5da;       /* Stone: supporting panels */
  --rb-mortar: #ebe5da;
  --rb-ink: #161616;
  --rb-stone: #5d5952;      /* Secondary text, light surfaces only */
  --rb-stone-light: #c9c4bc; /* Soft divider; supporting text on ink */
  --rb-rose: #e5b5b7;       /* labels on ink and deep red */
  --rb-coral: #ed6b53;      /* decorative outline icons only */
  --rb-attention: #8d1d20;
  --rb-success: #161616;
  --rb-error: #8d1d20;

  --rb-font-serif: Georgia, "Times New Roman", serif;
  --rb-font-body: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --rb-font-display: var(--rb-font-body); /* short tracked labels */

  --rb-text-xs: 0.8125rem;
  --rb-text-sm: 0.9375rem;
  --rb-text-body: 1.0625rem; /* 17 px */
  --rb-text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);

  --rb-space-1: 0.5rem;
  --rb-space-2: 1rem;
  --rb-space-3: 1.5rem;
  --rb-space-4: 2rem;
  --rb-space-5: 3rem;
  --rb-space-6: 4rem;
  --rb-space-7: 5rem;
  --rb-space-8: 7rem;

  --rb-radius-sm: 0.875rem;
  --rb-radius-md: 1.25rem;
  --rb-radius-lg: 1.625rem; /* 26 px cards */
  --rb-radius-pill: 999px;
  --rb-target-min: 2.75rem;
  --rb-reading-max: 75ch;
  --rb-content-max: 75rem;  /* 1200 px */
  --rb-shadow-soft: 0 18px 60px rgb(34 24 18 / 12%);
  --rb-focus-ring: 0 0 0 3px var(--rb-surface), 0 0 0 6px var(--rb-ink);

  --rb-motion-fast: 160ms;
  --rb-motion-standard: 280ms;
  --rb-motion-scene: 700ms;
  --rb-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rb-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* The layout page's own names. */
  --bg: var(--rb-cream);
  --surface: var(--rb-surface);
  --sand: var(--rb-sand);
  --ink: var(--rb-ink);
  --muted: var(--rb-stone);
  --soft: var(--rb-stone-light);
  --brand: var(--rb-brick);
  --brand-dark: var(--rb-brick-dark);
  --line: rgb(22 22 22 / 12%);
  --shadow: var(--rb-shadow-soft);
  --radius: 26px;
  --max: 1200px;
  --serif: var(--rb-font-serif);
  --sans: var(--rb-font-body);
}

/* Buttons: pills. White on brick red; deep brick on hover. */
.rb-button,
.btn {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  font: 700 1rem/1.2 var(--rb-font-body);
  -webkit-tap-highlight-color: transparent;
  gap: 0.5625rem;
  justify-content: center;
  min-block-size: 3rem;
  padding: 0.75rem 1.375rem;
  text-align: center;
  text-decoration: none;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.rb-button:hover,
.btn:hover {
  transform: translateY(-2px);
}

/* Pressed: the button settles back and darkens for the moment it is held, so a tap on a phone (where there is no
   hover) is answered straight away. */
.rb-button:active,
.btn:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 60ms;
}

.rb-button--primary:active,
.btn-brand:active,
.rb-button--dark:active,
.btn-dark:active {
  background: var(--rb-brick-dark);
}

.rb-button--secondary:active,
.btn-outline:active {
  background: rgb(22 22 22 / 10%);
}

.btn-light:active {
  background: var(--rb-cream);
}

.rb-button--primary,
.btn-brand {
  background: var(--rb-brick);
  color: #fff;
}

.rb-button--primary:hover,
.btn-brand:hover {
  background: var(--rb-brick-dark);
}

.rb-button--secondary,
.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.rb-button--dark,
.btn-dark {
  background: var(--rb-ink);
  color: #fff;
}

.btn-light {
  background: rgb(255 255 255 / 92%);
  color: var(--rb-ink);
}

/* WhatsApp: one recognisable colour for every WhatsApp button (owner, 06/10/2026), with the glyph in front. */
.rb-button--whatsapp,
.btn-whatsapp {
  background: var(--rb-whatsapp);
  color: #fff;
}

.rb-button--whatsapp:hover,
.btn-whatsapp:hover,
.rb-button--whatsapp:active,
.btn-whatsapp:active {
  background: var(--rb-whatsapp-dark);
}

.wa-icon {
  flex: none;
  inline-size: 1.125em;
  block-size: 1.125em;
}

.rb-button[disabled],
.btn[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

.rb-button:focus-visible {
  box-shadow: var(--rb-focus-ring);
  outline: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .rb-button:hover,
  .btn:hover,
  .rb-button:active,
  .btn:active {
    transform: none;
  }
}

/* Red Brick Lettings – base, header, labels, shared parts, forms, footer. Tokens: tokens.css (V3 Website Edition). */

:root {
  --header-h: 6.375rem; /* tenant strip 34 px + bar 68 px */
  --gutter: clamp(1rem, 4vw, 3rem);
  /* Kit: Georgia 400 headlines, 48–80 px on wide screens, line height 1.00–1.12, tight letter spacing. */
  --h1: clamp(2.5rem, 1.3rem + 3.6vw, 4.75rem);
  --h2: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
  --display: clamp(2.25rem, 1.2rem + 3vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scrollbar-gutter: stable;
  scroll-padding-top: calc(var(--header-h) + 1rem); /* nothing focused or linked hides under the fixed header */
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--rb-cream);
  color: var(--rb-ink);
  font: 400 var(--rb-text-body)/1.6 var(--rb-font-body);
  overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0 0 var(--rb-space-2); font-family: var(--rb-font-serif); font-weight: 400; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: italic; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; }
p { margin: 0 0 var(--rb-space-2); }
a { color: inherit; }

/* Display headlines: large Georgia, with an occasional italic phrase. */
.display { line-height: 1.02; letter-spacing: -0.02em; }
h1.display { font-size: var(--h1); }
.hl { font-style: italic; }

:focus-visible { outline: 3px solid var(--rb-ink); outline-offset: 3px; }
/* Headings focused by script (form steps) are not controls: no ring. The error summary keeps its ring. */
:is(h1, h2, h3)[tabindex="-1"]:focus { outline: none; }
.section--ink :focus-visible { outline-color: var(--rb-cream); }
.section--ink .rb-button:focus-visible, .section--ink .btn:focus-visible { box-shadow: 0 0 0 3px var(--rb-ink), 0 0 0 6px var(--rb-cream); outline: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--rb-space-2); top: -10rem; z-index: 100;
  background: var(--rb-ink); color: var(--rb-white); padding: .75rem 1rem;
  border-radius: var(--rb-radius-sm); font-weight: 700;
}
.skip-link:focus { top: var(--rb-space-1); outline-color: var(--rb-cream); }


/* ---------- Buttons and links ---------- */

.rb-button { font-size: 1rem; line-height: 1.2; text-align: center; }

.rb-button--secondary:hover { background: rgb(255 255 255 / 8%); }
.section:not(.section--ink) .rb-button--secondary:hover { background: rgb(22 22 22 / 6%); }
.rb-button[disabled] { cursor: not-allowed; opacity: .6; }
.arrow { transition: translate var(--rb-motion-fast) var(--rb-ease-standard); }
.rb-button:hover .arrow { translate: .25rem 0; }

.text-link {
  display: inline-flex; align-items: center; min-height: var(--rb-target-min);
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  font: 600 1rem/1.3 var(--rb-font-body);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
}
.text-link:hover { text-decoration-thickness: 2px; }
/* Links inside running text: a taller hit area with no change to the line (home page prose). */
main p a:not([class]), main span a:not([class]) { padding-block: .4rem; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rb-space-2); margin-top: var(--rb-space-3); }

/* ---------- Scroll progress (CSS scroll timeline; absent where unsupported) ---------- */

.progress { display: none; }
@supports (animation-timeline: scroll()) {
  .progress {
    display: block; position: fixed; inset: 0 0 auto; z-index: 60; height: 3px; pointer-events: none;
    background: var(--rb-brick); transform-origin: 0 50%;
    animation: rb-progress linear both; animation-timeline: scroll(root);
  }
}
@keyframes rb-progress { from { scale: 0 1; } }

/* ---------- Header: the owner's layout (website 2/index.html). A slim strip for tenants, then the bar with the
   logo, the landlord links and the valuation button. On the home page it sits clear over the hero photo until the
   page moves (site.js adds .scrolled to <html>); without JavaScript it is always the cream bar. ---------- */

.container { width: min(calc(100% - 32px), var(--max)); margin-inline: auto; }
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: rgb(244 241 235 / 95%); color: var(--rb-ink);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.home.js:not(.scrolled) .site-header {
  background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-color: transparent; color: #fff;
}
/* The shade behind the clear header. Measured 01/10/2026: the links need 68% at the top easing to 36% at 74 px to hold
   4.5:1 over the brightest part of the hero photo; those two stops are unchanged. Since 06/10/2026 the shade runs on
   below the bar to 240 px, so it fades into the photo instead of stopping in a grey band with a hard edge (owner:
   "yeh bura lag raha"). It is a layer behind the bar's content, and it goes with the cream bar or the open menu. */
.home.js .site-header::before {
  content: ""; position: absolute; inset: 0 0 auto 0; z-index: -1; height: 240px; pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / 68%) 0, rgb(0 0 0 / 36%) 74px, rgb(0 0 0 / 0%) 240px);
  opacity: 0; transition: opacity .3s ease;
}
.home.js:not(.scrolled) .site-header:not(:has(.menu[open]))::before { opacity: 1; }
.home.js:not(.scrolled) .site-header:has(.menu[open]) { background: var(--rb-cream); color: var(--rb-ink); border-color: var(--line); }
.home.js:not(.scrolled) .site-header :focus-visible { outline-color: #fff; }

.utility { background: var(--rb-ink); color: #f4f1eb; font-size: .84375rem; }
.utility-inner { display: flex; justify-content: flex-end; align-items: center; gap: 22px; min-height: 34px; }
.utility a { color: inherit; font-weight: 700; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; }
.utility :focus-visible { outline-color: #fff; }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 68px; }
/* The kit's logo file has an empty margin around the artwork (20 of 640 units on the left, 105 on the right), so the
   link box is cut to the artwork and pulled left to line the icon up with the page edge. Kit: the full logo is
   never narrower than 180 px – the artwork is 0.805 of --logo-w, so 14rem is the floor. */
.brand { --logo-w: 18rem; display: block; flex: none; overflow: hidden; width: calc(var(--logo-w) * .85); margin-left: calc(var(--logo-w) * -.03125); }
.brand img { display: block; width: var(--logo-w); max-width: none; height: auto; }
.brand .logo--light { display: none; }
.home.js:not(.scrolled) .site-header:not(:has(.menu[open])) .logo--dark { display: none; }
.home.js:not(.scrolled) .site-header:not(:has(.menu[open])) .logo--light { display: block; }
.nav-links { display: flex; gap: 26px; font-size: .9375rem; font-weight: 600; }
.nav-links a { padding: 8px 0; border-bottom: 2px solid transparent; color: inherit; text-decoration: none; white-space: nowrap; transition: border-color .2s ease; }
.nav-links a:hover, .nav-links a[aria-current] { border-color: currentColor; }
.header-actions { display: flex; align-items: center; gap: 10px; }

.menu { display: none; }
.menu summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 8px 16px; border: 1px solid currentColor; border-radius: 999px;
  font-weight: 700; font-size: .9375rem;
}
.menu summary::-webkit-details-marker { display: none; }
.menu-bars { width: 18px; height: 12px; position: relative; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.menu-bars::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid currentColor; }
.menu .when-open { display: none; }
.menu[open] .when-open { display: inline; }
.menu[open] .when-closed { display: none; }
.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--rb-surface); color: var(--rb-ink);
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  max-height: calc(100vh - 110px); overflow: auto; padding: 10px 0 24px;
}
.menu-panel a:not(.btn) { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; }
.menu-panel a[aria-current]:not(.btn) { color: var(--rb-brick); }
.menu-panel .menu-label { margin: 22px 0 2px; color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.menu-panel a.menu-secondary { font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; }
.menu-panel .btn { width: 100%; margin-top: 22px; }
.menu-panel :focus-visible { outline-color: var(--rb-ink); }

@media (max-width: 1080px) { .nav-links { display: none; } .menu { display: block; } }
@media (max-width: 700px) {
  .container { width: min(calc(100% - 24px), var(--max)); }
  .utility-inner { justify-content: space-between; gap: 10px; min-height: 32px; font-size: .8125rem; }
  .scrolled .utility { display: none; }
  .header-inner { min-height: 62px; gap: 12px; }
  .header-cta { display: none; }
  .brand { --logo-w: 15rem; }
}
@media (max-width: 380px) {
  .menu summary { padding: 8px 12px; gap: 8px; }
  .utility span { display: none; }
  .brand { --logo-w: 14rem; }
}

/* ---------- Labels ---------- */

.eyebrow, .section__label {
  display: block; margin: 0 0 .75rem;
  font: 800 .75rem/1.3 var(--rb-font-display);
  letter-spacing: .18em; text-transform: uppercase;
}
.eyebrow { color: var(--rb-rose); } /* page heroes are ink */
@media (max-width: 700px) { :root { --header-h: 5.875rem; } }

/* ---------- Lower content ---------- */

.section { padding: clamp(4rem, 9vw, 8rem) var(--gutter); }
.section__inner { max-width: var(--rb-content-max); margin-inline: auto; }
.section__inner.narrow { max-width: 50rem; }
.section__inner > p, .split p { max-width: var(--rb-reading-max); }
.section__label { color: var(--rb-brick); }
.section--white { background: var(--rb-white); }
.section--sand { background: var(--rb-sand); }
.section--sand .section__label { color: var(--rb-brick-dark); }
.section--ink { background: var(--rb-ink); color: var(--rb-white); }
.section--ink h2, .section--ink h3 { color: var(--rb-white); }
.section--ink .check h3 { color: var(--rb-ink); } /* the form card is cream inside the ink section */
.section--ink .section__label { color: var(--rb-rose); }
.section__note, .small { font-size: var(--rb-text-sm); color: var(--rb-stone); }
.section--sand .small { color: var(--rb-ink); }
.section--ink .small { color: var(--rb-sand); }

.split { display: grid; gap: var(--rb-space-4) var(--rb-space-6); }
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .split--form { grid-template-columns: 5fr 7fr; }
}

/* Big outlined step numbers. */
.steps li::before {
  display: block; margin-bottom: var(--rb-space-2);
  font: 400 clamp(3rem, 2.2rem + 3vw, 4.5rem)/1 var(--rb-font-serif); letter-spacing: -.02em;
  color: var(--rb-ink);
}
.media-note { margin: 0 0 var(--rb-space-1); font-size: var(--rb-text-sm); color: var(--rb-stone); }

.steps { list-style: none; margin: var(--rb-space-5) 0 var(--rb-space-3); padding: 0; display: grid; gap: var(--rb-space-4); counter-reset: step; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; padding-top: var(--rb-space-3); border-top: 1px solid var(--line); }
.steps li::before { content: "0" counter(step); content: "0" counter(step) / ""; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); }
.steps p { margin: 0; }

.tick-list { list-style: none; margin: 0 0 var(--rb-space-3); padding: 0; display: grid; gap: .625rem; }
.tick-list li { position: relative; padding-left: 2rem; }
.tick-list li::before {
  content: ""; position: absolute; left: .35rem; top: .3em; width: .45rem; height: .85rem;
  border: solid var(--rb-brick); border-width: 0 3px 3px 0; transform: rotate(45deg);
}

.lead-dark { font-size: var(--rb-text-lead); }
.tenant-card { padding: var(--rb-space-4); border-radius: var(--rb-radius-lg); background: var(--rb-cream); border: 1px solid var(--rb-stone-light); }
.tenant-card .small { margin: var(--rb-space-2) 0 0; }

.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--rb-space-2);
  min-height: 3.5rem; padding-block: .75rem; cursor: pointer; font: 700 1.125rem/1.3 var(--rb-font-body); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 400 1.75rem/1 var(--rb-font-body); color: var(--rb-brick); transition: rotate var(--rb-motion-standard) var(--rb-ease-standard); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { max-width: 44rem; }
.faq details p { padding-bottom: var(--rb-space-2); }

/* Blocks rise in as they arrive, on every page. site.js adds .reveal to blocks that start below the fold (the home
   page marks its own in the HTML), then .visible once the block is well inside the screen. Nothing is hidden
   without JavaScript, with reduced motion or with Save-Data (html.still). */
.js:not(.still) .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s ease var(--rd, 0s), transform .7s ease var(--rd, 0s), border-color var(--rb-motion-fast) ease, translate var(--rb-motion-standard) ease;
}
.js:not(.still) .reveal.visible { opacity: 1; transform: none; }

/* ---------- Fees ---------- */

.fees__draft { max-width: var(--rb-reading-max); padding: var(--rb-space-2); border-left: 4px solid var(--rb-attention); background: var(--rb-white); font-size: var(--rb-text-sm); }
.tiers { list-style: none; margin: var(--rb-space-4) 0 var(--rb-space-5); padding: 0; display: grid; gap: var(--rb-space-3); }
@media (min-width: 40rem) { .tiers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .tiers { grid-template-columns: repeat(4, 1fr); } }
.tier { display: flex; flex-direction: column; padding: var(--rb-space-3); border-radius: var(--rb-radius-lg); background: var(--rb-white); border: 1px solid var(--rb-stone-light); }
.tier:last-child { background: var(--rb-ink); color: var(--rb-white); border-color: var(--rb-ink); }
.tier:last-child h3, .tier:last-child .tier__price strong { color: var(--rb-white); }
.tier:last-child .tier__per, .tier:last-child .tier__price span { color: var(--rb-sand); }
.tier:last-child .tick-list li::before { border-color: var(--rb-sand); }
.tier h3 { font-size: 1.125rem; margin-bottom: var(--rb-space-2); }
.tier__price { margin: 0; line-height: 1.25; }
.tier__price strong { display: block; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); font-weight: 400; letter-spacing: -.015em; color: var(--rb-brick-dark); }
.tier__price span { font-size: var(--rb-text-sm); color: var(--rb-ink); }
.tier__per { margin: var(--rb-space-1) 0 var(--rb-space-2); font-size: var(--rb-text-xs); color: var(--rb-stone); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.tier .tick-list { margin: auto 0 0; padding-top: var(--rb-space-2); border-top: 1px solid rgb(22 22 22 / 12%); font-size: var(--rb-text-sm); }
.tier:last-child .tick-list { border-top-color: rgb(244 241 235 / 18%); }
.fees__more h3 { font-size: 1.375rem; }
.fees__table { width: 100%; border-collapse: collapse; font-size: var(--rb-text-sm); background: var(--rb-white); border-radius: var(--rb-radius-md); overflow: hidden; }
.fees__table th, .fees__table td { padding: .75rem var(--rb-space-2); border-bottom: 1px solid var(--rb-stone-light); text-align: left; font-weight: 400; vertical-align: top; }
.fees__table td { text-align: right; font-weight: 700; white-space: nowrap; }
.fees__table tr:last-child th, .fees__table tr:last-child td { border-bottom: 0; }

/* ---------- Sample documents ---------- */

.doc__kicker { font: 600 var(--rb-text-xs)/1.2 var(--rb-font-display); letter-spacing: .08em; text-transform: uppercase; }
/* Sample documents: structure only; the bars stand in for figures. */
.split--records { align-items: center; }
.docs { position: relative; display: grid; gap: var(--rb-space-3); }
@media (min-width: 40rem) { .docs { grid-template-columns: 1fr 1fr; } .doc--inspection { margin-top: var(--rb-space-6); } }
.doc {
  padding: var(--rb-space-3); border-radius: var(--rb-radius-lg); background: var(--rb-white);
  border: 1px solid var(--rb-stone-light); box-shadow: var(--rb-shadow-soft);
}
.doc__kicker { margin: 0 0 .375rem; color: var(--rb-ink); }
.doc__title { margin: 0 0 var(--rb-space-2); font-weight: 400; font-size: 1.25rem; letter-spacing: -.02em; }
.doc__lines, .doc__checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; font-size: var(--rb-text-sm); }
.doc__lines li { display: flex; align-items: center; justify-content: space-between; gap: var(--rb-space-2); padding-bottom: .5rem; border-bottom: 1px solid var(--rb-stone-light); }
.doc__lines i { width: 4.5rem; height: .6rem; border-radius: var(--rb-radius-pill); background: var(--rb-stone-light); }
.doc__total { font-weight: 700; border-bottom: 0 !important; }
.doc__total i { background: var(--rb-sand); }
.doc__checks li { position: relative; padding-left: 1.6rem; }
.doc__checks li::before { content: ""; position: absolute; left: 0; top: .15em; width: 1rem; height: 1rem; border-radius: 50%; }
.doc__checks .ok::before { background: var(--rb-success); }
.doc__checks .todo::before { background: var(--rb-attention); }

/* Changing agent, on Ink */
.steps--ink li { border-top-color: rgb(244 241 235 / 18%); }
.steps--ink li::before { color: var(--rb-rose); }
.steps--ink p { color: var(--rb-cream); }
#switching h2.display { font-size: var(--display); }

/* Social channels */
.social-row { list-style: none; margin: var(--rb-space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .625rem; }
.social-pill {
  display: inline-flex; align-items: center; min-height: var(--rb-target-min); padding: .5rem 1.125rem;
  border: 1px solid var(--rb-stone-light); border-radius: var(--rb-radius-pill); background: var(--rb-white);
  color: var(--rb-ink); font-weight: 600; text-decoration: none;
  transition: border-color var(--rb-motion-fast) var(--rb-ease-standard), background-color var(--rb-motion-fast) var(--rb-ease-standard);
}
.social-pill:hover { border-color: var(--rb-brick); }
.social-pill--wa { background: var(--rb-whatsapp); border-color: var(--rb-whatsapp); color: var(--rb-white); }
.social-pill--wa:hover { background: var(--rb-whatsapp-dark); border-color: var(--rb-whatsapp-dark); }
.social-pill--wa:hover { background: var(--rb-brick); border-color: var(--rb-brick); color: #fff; }

/* ---------- Renters' Rights checklist ---------- */

.rr-disclaimer { margin-top: var(--rb-space-2); padding-left: var(--rb-space-2); border-left: 3px solid var(--rb-attention); font-size: var(--rb-text-sm); color: var(--rb-ink); }
.rr { display: grid; gap: var(--rb-space-5); margin-top: var(--rb-space-5); }
@media (min-width: 64rem) { .rr { grid-template-columns: 7fr 5fr; align-items: start; } }
.rr__now { margin: 0; padding: var(--rb-space-4); border: 1px solid var(--rb-stone-light); border-radius: var(--rb-radius-lg); background: var(--rb-white); min-width: 0; }
.rr__now > legend { float: left; width: 100%; padding: 0; margin-bottom: var(--rb-space-2); }
.rr__now > legend h3, .rr__next h3 { margin: 0; font-size: 1.375rem; }
.rr__progress { clear: both; display: inline-block; margin: 0 0 var(--rb-space-2); padding: .25rem .75rem; border-radius: var(--rb-radius-pill); background: var(--rb-sand); font-weight: 600; font-size: var(--rb-text-sm); }
.rr__list { clear: both; list-style: none; margin: 0 0 var(--rb-space-3); padding: 0; }
.rr__list li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--rb-space-2); padding: .75rem 0; border-bottom: 1px solid var(--rb-stone-light); }
.rr__list label { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; line-height: 1.45; }
.rr__list input { flex: none; width: 1.375rem; height: 1.375rem; margin: .1rem 0 0; accent-color: var(--rb-success); }
.rr__list label:has(input:checked) span { color: var(--rb-stone); }
.rr-src {
  flex: none; display: inline-flex; align-items: center; min-height: var(--rb-target-min);
  color: var(--rb-brick-dark); font-weight: 600; font-size: var(--rb-text-sm); text-underline-offset: .2em;
}
.rr__list .rr-src { margin-top: -.6rem; }
.rr__timeline { list-style: none; margin: var(--rb-space-3) 0 var(--rb-space-3); padding: 0; display: grid; gap: var(--rb-space-3); }
.rr__timeline li { position: relative; padding-left: var(--rb-space-4); }
.rr__timeline li::before { content: ""; position: absolute; left: .35rem; top: .45rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--rb-brick); }
.rr__timeline li:not(:last-child)::after { content: ""; position: absolute; left: .68rem; top: 1.4rem; bottom: calc(-1 * var(--rb-space-3)); width: 2px; background: var(--rb-stone-light); }
.rr__when { margin: 0 0 .25rem; color: var(--rb-brick-dark); font: 600 var(--rb-text-sm)/1.3 var(--rb-font-display); letter-spacing: .06em; text-transform: uppercase; }
.rr__timeline p:last-child { margin: 0; }

/* ---------- Landlord Check ---------- */

#check-title { font-size: clamp(2.5rem, 1.5rem + 3vw, 4.25rem); }
.check-intro p { color: var(--rb-cream); }
.privacy-note { margin: var(--rb-space-4) 0; padding: var(--rb-space-3); background: rgb(244 241 235 / 8%); border: 1px solid rgb(244 241 235 / 22%); }
.privacy-note h3 { font-size: 1.0625rem; margin-bottom: .5rem; }
.privacy-note p { margin: 0; font-size: var(--rb-text-sm); color: var(--rb-white); }
.check-intro__alt .text-link { vertical-align: middle; }

.check {
  padding: clamp(1.25rem, 4vw, 2.5rem); border-radius: var(--rb-radius-lg);
  background: var(--rb-cream); color: var(--rb-ink);
}
.check fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.check__step > legend { padding: 0; margin-bottom: var(--rb-space-3); }
.check__step > legend h3 { margin: 0; font-size: 1.5rem; color: var(--rb-ink); }
.check__privacy { margin-bottom: var(--rb-space-3); padding-bottom: var(--rb-space-2); border-bottom: 1px solid var(--rb-stone-light); color: var(--rb-stone); font-size: var(--rb-text-sm); }
.check__progress { margin-bottom: var(--rb-space-1); color: var(--rb-stone); font-size: var(--rb-text-sm); font-weight: 600; }
.check__progress:empty { display: none; }
.check__noscript { padding: var(--rb-space-2); border-left: 4px solid var(--rb-attention); background: var(--rb-white); }

.check .field { margin-bottom: var(--rb-space-4); }
.field > label, .field > legend { display: block; margin-bottom: .375rem; padding: 0; font-weight: 600; }
.optional { font-weight: 400; color: var(--rb-stone); }
.hint { margin: 0 0 .5rem; color: var(--rb-stone); font-size: var(--rb-text-sm); }
.field__error { margin: 0 0 .5rem; color: var(--rb-error); font-weight: 600; font-size: var(--rb-text-sm); }
.field--error { padding-left: var(--rb-space-2); border-left: 4px solid var(--rb-error); }

.check input[type="text"], .check select {
  width: 100%; max-width: 22rem; min-height: 3rem; padding: .625rem .875rem;
  border: 2px solid var(--rb-stone); border-radius: var(--rb-radius-sm);
  background: var(--rb-white); color: var(--rb-ink); font: 400 1.0625rem/1.3 var(--rb-font-body);
}
.check input[type="text"] { max-width: 10rem; text-transform: uppercase; }
.check [aria-invalid="true"] { border-color: var(--rb-error); }

.choices { display: grid; gap: .5rem; }
@media (min-width: 40rem) { .choices { grid-template-columns: 1fr 1fr; } }
.choices label {
  display: flex; align-items: center; gap: .75rem; min-height: 3rem; padding: .5rem .875rem;
  border: 1px solid var(--rb-stone-light); border-radius: var(--rb-radius-sm); background: var(--rb-white); cursor: pointer;
  line-height: 1.3;
}
.choices label:has(input:checked) { border-color: var(--rb-ink); box-shadow: inset 0 0 0 1px var(--rb-ink); }
.choices input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--rb-ink); }

.check__nav { display: flex; flex-wrap: wrap; gap: var(--rb-space-2); justify-content: space-between; margin-top: var(--rb-space-2); }
.check__nav [type="submit"]:only-child { margin-left: auto; }
/* Phones: the step buttons and the finish buttons run full width, the main action first, so each is one easy tap. */
@media (max-width: 700px) {
  .check__nav { flex-direction: column; }
  .check__nav .rb-button--primary { order: -1; }
  .check__nav .rb-button, .check__done .actions .rb-button { width: 100%; }
}

.error-summary {
  margin-bottom: var(--rb-space-4); padding: var(--rb-space-3); border: 4px solid var(--rb-error); border-radius: var(--rb-radius-sm);
  background: var(--rb-white);
}
.error-summary h3 { font-size: 1.125rem; }
.error-summary ul { margin: 0; padding-left: 1.25rem; }
.error-summary a { color: var(--rb-error); font-weight: 600; }

.check__done h3 { font-size: 1.5rem; }
.summary { display: grid; grid-template-columns: auto 1fr; gap: .375rem var(--rb-space-3); margin: 0 0 var(--rb-space-3); padding: var(--rb-space-3); border-radius: var(--rb-radius-md); background: var(--rb-white); }
.summary dt { color: var(--rb-stone); font-size: var(--rb-text-sm); }
.summary dd { margin: 0; font-weight: 600; }
@media (max-width: 26rem) { .summary { grid-template-columns: 1fr; } .summary dd { margin-bottom: .5rem; } }
.check__status { padding: var(--rb-space-2); border-left: 4px solid var(--rb-attention); background: var(--rb-white); }
.check .small { color: var(--rb-stone); }

/* ---------- Footer: the layout page's light footer, with the full link lists and the legal lines ---------- */

.site-footer { padding: 56px 0 48px; background: var(--rb-cream); color: var(--rb-ink); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, .7fr); gap: 30px; }
.footer-about .brand { --logo-w: 16rem; }
.footer-about .tagline { margin: 16px 0 0; font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
.footer-about p { max-width: 400px; margin: 12px 0 0; color: var(--muted); }
.footer-about .btn { margin-top: 18px; }
.site-footer h2 { margin: 0 0 10px; font: 700 1rem/1.3 var(--sans); letter-spacing: 0; }
.site-footer details > summary { list-style: none; }
.site-footer details > summary::-webkit-details-marker { display: none; }
.footer-about .btn + .btn { margin-left: 6px; }
.site-footer nav a { display: block; padding: 6px 0; color: var(--muted); font-size: .9375rem; text-decoration: none; }
.site-footer nav a:hover { color: var(--brand); }
.footer-social { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 36px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--rb-target-min); min-width: var(--rb-target-min); color: var(--ink); font-weight: 600; font-size: .9375rem; text-underline-offset: .25em; }
.footer-legal { max-width: 860px; margin-top: 20px; padding-top: 22px; border-top: 1px solid var(--line); }
.footer-legal p { margin: 0 0 .5rem; color: var(--muted); font-size: .9375rem; }
@media (max-width: 1080px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }
@media (min-width: 701px) { .site-footer details > summary { pointer-events: none; } }
/* Phones: each link list folds under its heading (site.js closes them; without it they stay open). */
@media (max-width: 700px) {
  .site-footer { padding-top: 40px; }
  .footer-grid { grid-template-columns: 1fr; gap: 0; }
  .footer-about { margin-bottom: 22px; }
  .site-footer nav { border-top: 1px solid var(--line); }
  .site-footer nav:last-child { border-bottom: 1px solid var(--line); }
  .site-footer details > summary { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; cursor: pointer; }
  .site-footer details > summary h2 { margin: 0; }
  .site-footer details > summary::after { content: "+"; font: 400 1.5rem/1 var(--sans); color: var(--brand); }
  .site-footer details[open] > summary::after { content: "\2013"; }
  .site-footer details[open] { padding-bottom: 10px; }
  .footer-social { margin-top: 22px; }
}

/* ---------- Phone action bar: a floating pill with the two main routes ---------- */

.mobile-cta {
  display: none; position: fixed; z-index: 40; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  grid-template-columns: 1.55fr 1fr; gap: 8px;
  background: rgb(255 253 248 / 96%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line); padding: 8px; border-radius: 999px; box-shadow: var(--shadow);
  transition: transform .3s ease, opacity .3s ease, visibility .3s;
}
.mobile-cta .btn { padding-inline: 12px; font-size: .9375rem; }
/* Home page: the bar steps aside while the hero buttons or the enquiry form are on screen (home.js). */
.home.js .mobile-cta:not(.is-shown) { transform: translateY(160%); opacity: 0; visibility: hidden; }
body:has(form:focus-within) .mobile-cta { display: none; }
/* Every page: while a form is on screen the bar steps aside (site.js), so it never covers a Continue or Send button. */
body.form-on-screen .mobile-cta { display: none; }
@media (max-width: 700px) {
  body { padding-bottom: 88px; }
  .mobile-cta { display: grid; }
  html { scroll-padding-bottom: 5.5rem; }
}
@media (max-width: 380px) { .mobile-cta .btn { font-size: .875rem; padding-inline: 8px; } }

/* ---------- Floating WhatsApp button (owner, 06/10/2026): always one tap from a conversation ---------- */
.wa-float {
  position: fixed; z-index: 39; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: .5rem;
  min-width: 3.5rem; min-height: 3.5rem; padding: 0 1.125rem 0 .875rem;
  border-radius: 999px; background: var(--rb-whatsapp); color: #fff;
  font: 700 1rem/1.2 var(--rb-font-body); text-decoration: none;
  box-shadow: 0 10px 28px rgb(22 22 22 / 22%);
  transition: transform .25s ease, background-color .25s ease, opacity .3s ease, visibility .3s;
  -webkit-tap-highlight-color: transparent;
}
.wa-float .wa-icon { inline-size: 1.625rem; block-size: 1.625rem; }
.wa-float:hover { background: var(--rb-whatsapp-dark); transform: translateY(-2px); }
.wa-float:active { background: var(--rb-whatsapp-dark); transform: translateY(0) scale(.985); transition-duration: 60ms; }
.wa-float:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--rb-surface), 0 0 0 6px var(--rb-ink); }
/* It steps aside while a form or the footer is on screen (site.js), or while the menu is open: those already offer WhatsApp. */
body.form-on-screen .wa-float, body.footer-on-screen .wa-float, body:has(#menu[open]) .wa-float { opacity: 0; visibility: hidden; transform: translateY(12px); }
@media (max-width: 700px) {
  /* Phones: the glyph alone, sitting above the action bar. */
  .wa-float { right: 12px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); width: 3.5rem; height: 3.5rem; padding: 0; justify-content: center; }
  .wa-float__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .home.js .mobile-cta:not(.is-shown) ~ .wa-float { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .wa-float, .wa-float:hover, .wa-float:active { transform: none; } }
@media (max-width: 22.5rem) { .arrow { display: none; } }

/* Without JavaScript the three steps show as one list; the step buttons cannot work, so hide them. */
html:not(.js) .check__nav { display: none; }

/* Figures and document titles use the headline face. */
.tier__price strong, .doc__title { font-family: var(--rb-font-serif); letter-spacing: -.01em; }

/* ---------- Contrast on the inner pages (user, 02/10/2026: "like how the first page has contrasting colors") ---------- */

/* Parts that sit inside a dark section. */
.section--ink .tick-list li::before { border-color: var(--rb-rose); }
.section--ink .tenant-card, .section--ink .tenant-card h3, .section--ink .split .tenant-card p { color: var(--rb-ink); }
.section--ink .split .tenant-card .small { color: var(--rb-stone); }
.section--ink .tenant-card :focus-visible { outline-color: var(--rb-ink); }
.section--ink .tenant-card .rb-button:focus-visible { box-shadow: var(--rb-focus-ring); }

/* The closing call to action: a brick-red box on the cream ground, as on the home page's switching block. */
.section--cta { padding-block: clamp(2.5rem, 6vw, 5rem); background: var(--rb-cream); }
.section--cta .section__inner {
  position: relative; overflow: hidden;
  padding: clamp(2rem, 5vw, 4rem); border-radius: 2.125rem;
  background: linear-gradient(135deg, var(--rb-brick-dark), var(--rb-brick)); color: #fff;
}
.section--cta .section__inner::after {
  content: ""; position: absolute; right: -4.5rem; top: -8.75rem; width: 20rem; height: 20rem;
  border: 1px solid rgb(255 255 255 / 15%); border-radius: 50%; pointer-events: none;
}
.section--cta .section__inner > * { position: relative; z-index: 1; }
.section--cta h2, .section--cta h3 { color: #fff; }
.section--cta .section__label { color: var(--rb-rose); }
.section--cta .section__inner > p, .section--cta .split p, .section--cta .small { color: rgb(255 255 255 / 92%); }
.section--cta .rb-button--primary { background: #fff; color: var(--rb-ink); }
.section--cta .rb-button--primary:hover { background: var(--rb-cream); }
.section--cta .rb-button--secondary:hover { background: rgb(255 255 255 / 10%); }
.section--cta :focus-visible { outline-color: #fff; }
.section--cta .rb-button:focus-visible { box-shadow: 0 0 0 3px var(--rb-brick-dark), 0 0 0 6px #fff; }

/* ---------- Phones: one screen at a time (site.js sizes the screens and adds .screens and .screen) ---------- */
@media (max-width: 700px) {
  html.screens:not(.still) { scroll-snap-type: y proximity; }
  html.screens:has(form :focus) { scroll-snap-type: none; } /* never pull the page while someone is typing */
  .screens .screen { scroll-snap-align: start; }
}

/* ---------- Motion polish (06/10/2026): calm entrances and answers to the hand. Nothing moves content under a
   reader, nothing loops forever, and all of it is off without JavaScript, with reduced motion or Save-Data (html.still).
   The home page keeps the layout page's own motion (home.css); these rules shape the inner pages and the chrome. ---------- */

@keyframes rb-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes rb-settle { from { transform: scale(1.05); } }
@keyframes rb-faq-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes rb-ring { to { box-shadow: 0 0 0 18px rgb(14 117 104 / 0%); } }

/* Inner-page hero: label, heading, words and buttons arrive one after another; the photograph fades in and settles. */
.js:not(.still) .page-hero__inner > div > * { animation: rb-rise .7s var(--rb-ease-standard) both; }
.js:not(.still) .page-hero__inner > div > :nth-child(1) { animation-delay: .05s; }
.js:not(.still) .page-hero__inner > div > :nth-child(2) { animation-delay: .15s; }
.js:not(.still) .page-hero__inner > div > :nth-child(3) { animation-delay: .25s; }
.js:not(.still) .page-hero__inner > div > :nth-child(4) { animation-delay: .35s; }
.js:not(.still) .page-hero__inner > div > :nth-child(n + 5) { animation-delay: .45s; }
.page-hero__media { overflow: hidden; border-radius: var(--rb-radius-lg); }
.js:not(.still) .page-hero__media { animation: rb-rise .8s var(--rb-ease-standard) .25s both; }
.js:not(.still) .page-hero__media img { animation: rb-settle 1.8s var(--rb-ease-standard) .25s both; }

/* Header links: the underline grows from the left instead of switching on. */
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--rb-ease-standard);
}
.nav-links a:hover, .nav-links a[aria-current] { border-color: transparent; }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); }
.still .nav-links a::after { transition: none; }

/* The header casts a soft shadow once the page has moved (inner pages; the home header has its own change). */
.site-header { transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.scrolled:not(.home) .site-header { box-shadow: 0 8px 28px rgb(22 22 22 / 8%); }

/* Questions: the answer eases open under its question. */
.js:not(.still) .faq details[open] > :not(summary) { animation: rb-faq-in .3s var(--rb-ease-standard) both; }

/* Floating WhatsApp button: it arrives after the page, then rings softly twice to say it is there. */
.js:not(.still) .wa-float { animation: rb-rise .6s var(--rb-ease-standard) .7s both; }
.js:not(.still) .wa-float::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgb(14 117 104 / 45%); animation: rb-ring 1.6s ease-out 4s 2;
}

/* Page to page: a short cross-fade where the browser supports view transitions; none with reduced motion. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Red Brick Lettings – shared site styles: self-hosted fonts, header navigation, inner-page parts and the footer.
   Loaded after tokens.css and landing.css (build.mjs joins them into /styles/site.css). */

/* Type is Georgia and the system sans (kit: Georgia and Segoe UI are licensed system fonts, not redistributed). */

/* ---------- Breadcrumbs and page heroes (inner pages) ---------- */

.crumbs { padding: calc(var(--header-h) + var(--rb-space-2)) var(--gutter) 0; background: var(--rb-ink); color: var(--rb-sand); font-size: var(--rb-text-sm); }
.crumbs ol { list-style: none; margin: 0 auto; padding: 0; max-width: var(--rb-content-max); display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; }
.crumbs li { display: inline-flex; align-items: center; min-height: 2rem; }
.crumbs li + li::before { content: "/"; content: "/" / ""; margin-right: .5rem; color: var(--rb-sand); }
.crumbs a { color: var(--rb-cream); text-underline-offset: .2em; }
.crumbs :focus-visible { outline-color: var(--rb-cream); }

.page-hero { padding: var(--rb-space-5) var(--gutter) clamp(3.5rem, 8vw, 6.5rem); background: var(--rb-ink); color: var(--rb-white); }
main > .page-hero:first-child { padding-top: calc(var(--header-h) + var(--rb-space-6)); }
.page-hero__inner { display: grid; gap: var(--rb-space-5) var(--rb-space-6); align-items: center; max-width: var(--rb-content-max); margin-inline: auto; }
@media (min-width: 56rem) { .page-hero--media .page-hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.page-hero h1 { max-width: 22ch; font-size: var(--h1); font-weight: 400; line-height: 1.04; letter-spacing: -.02em; color: var(--rb-white); }
.page-hero .lead { max-width: 40rem; color: var(--rb-cream); font-size: var(--rb-text-lead); }
.page-hero .actions { margin-top: var(--rb-space-4); }
.page-hero .meta-line { margin-top: var(--rb-space-3); color: var(--rb-sand); font-size: var(--rb-text-sm); }
.page-hero__media { margin: 0; }
.page-hero__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rb-radius-lg); background: rgb(244 241 235 / 8%); }
.page-hero__media figcaption { margin-top: .5rem; color: var(--rb-sand); font-size: var(--rb-text-xs); }
.page-hero :focus-visible { outline-color: var(--rb-cream); }
.page-hero .rb-button:focus-visible, .section--ink .rb-button:focus-visible, .site-footer .rb-button:focus-visible, .menu .rb-button:focus-visible {
  box-shadow: 0 0 0 3px var(--rb-ink), 0 0 0 6px var(--rb-cream);
}
.page-hero .rb-button--secondary:hover { background: rgb(255 255 255 / 8%); }

/* ---------- Cards ---------- */

.cards { list-style: none; margin: var(--rb-space-4) 0 0; padding: 0; display: grid; gap: var(--rb-space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: var(--rb-space-3); border-radius: var(--rb-radius-lg); background: var(--rb-white); border: 1px solid var(--rb-stone-light);
  transition: border-color var(--rb-motion-fast) var(--rb-ease-standard), translate var(--rb-motion-standard) var(--rb-ease-standard);
}
.card:hover { border-color: var(--rb-brick); translate: 0 -2px; }
.card:focus-within { outline: 3px solid var(--rb-ink); outline-offset: 3px; }
.card h3 { margin-bottom: .5rem; font-size: 1.25rem; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:focus-visible { outline: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card p { margin: 0; }
.card__kicker { margin: 0 0 .5rem !important; color: var(--rb-brick-dark); font: 600 var(--rb-text-xs)/1.3 var(--rb-font-display); letter-spacing: .08em; text-transform: uppercase; }
.card__more { margin-top: auto !important; padding-top: var(--rb-space-2); color: var(--rb-brick-dark); font-weight: 700; font-size: var(--rb-text-sm); }
.card__img { width: calc(100% + 2 * var(--rb-space-3)); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: calc(-1 * var(--rb-space-3)) calc(-1 * var(--rb-space-3)) var(--rb-space-3); background: var(--rb-stone-light); }
.section--ink .card { background: rgb(244 241 235 / 6%); border-color: rgb(244 241 235 / 18%); color: var(--rb-white); }
.section--ink .card:hover { border-color: var(--rb-sand); }
.section--ink .card:focus-within { outline-color: var(--rb-cream); }
.section--ink .card p { color: var(--rb-cream); }
.section--ink .card__kicker, .section--ink .card__more { color: var(--rb-sand); }
@media (prefers-reduced-motion: reduce) { .card:hover { translate: none; } }

/* ---------- Guides, legal pages and long-form text ---------- */

.prose { max-width: 46rem; }
.prose > * + h2 { margin-top: var(--rb-space-6); }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); }
.prose > * + h3 { margin-top: var(--rb-space-4); }
.prose ul, .prose ol:not([class]) { margin: 0 0 var(--rb-space-3); padding-left: 1.25rem; display: grid; gap: .5rem; }
.prose li::marker { color: var(--rb-brick); }
.prose p a:not(.rb-button), .prose li a:not(.rb-button), .prose td a, .notice a, .answer a {
  color: var(--rb-brick-dark); font-weight: 600; text-underline-offset: .2em;
}
.section__inner.split > .prose { max-width: none; }

.answer {
  margin: 0 0 var(--rb-space-5); padding: var(--rb-space-3) var(--rb-space-4);
  border-left: 5px solid var(--rb-brick); border-radius: 0 var(--rb-radius-md) var(--rb-radius-md) 0; background: var(--rb-white);
  font-size: var(--rb-text-lead);
}
.answer h2 { margin: 0 0 .5rem; color: var(--rb-brick-dark); font: 600 var(--rb-text-sm)/1.3 var(--rb-font-display); letter-spacing: .08em; text-transform: uppercase; }
.answer p:last-child, .answer ul:last-child { margin-bottom: 0; }

.notice { margin: var(--rb-space-3) 0; padding: var(--rb-space-2) var(--rb-space-3); border-left: 4px solid var(--rb-attention); background: var(--rb-white); font-size: var(--rb-text-sm); max-width: 46rem; }
.notice p:last-child { margin-bottom: 0; }
.notice--draft { border-left-width: 6px; }

.meta-line { color: var(--rb-stone); font-size: var(--rb-text-sm); }
.sources { margin-top: var(--rb-space-6); padding-top: var(--rb-space-3); border-top: 1px solid var(--line); font-size: var(--rb-text-sm); }
.sources h2 { font-size: 1.25rem; }
.sources ul { padding-left: 1.25rem; display: grid; gap: .375rem; }

.table-wrap { max-width: 100%; margin: var(--rb-space-3) 0 var(--rb-space-4); overflow-x: auto; }
.table-wrap:focus-visible { outline-offset: 2px; }
.data-table { width: 100%; border-collapse: collapse; background: var(--rb-white); font-size: var(--rb-text-sm); }
.data-table caption { caption-side: top; padding-bottom: .5rem; text-align: left; font-weight: 700; font-size: 1rem; }
.data-table th, .data-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--rb-stone-light); text-align: left; vertical-align: top; }
.data-table thead th { background: var(--rb-sand); font-weight: 700; }
.data-table tbody th { font-weight: 600; }
.data-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.data-table tr:last-child > * { border-bottom: 0; }

/* Numbered five-step journeys (maintenance, switching agent). */
.steps--five { counter-reset: step; }
@media (min-width: 40rem) { .steps--five { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .steps--five { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 48rem) and (max-width: 63.99rem) { .steps--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .steps--four { grid-template-columns: repeat(4, 1fr); } }

/* Safety first (repairs): what to do before anything else. */
.safety { list-style: none; margin: var(--rb-space-4) 0 0; padding: 0; display: grid; gap: var(--rb-space-3); }
@media (min-width: 48rem) { .safety { grid-template-columns: repeat(3, 1fr); } }
.safety li { padding: var(--rb-space-3); border: 2px solid var(--rb-error); border-radius: var(--rb-radius-lg); background: var(--rb-white); }
.safety h3 { color: var(--rb-error); font-size: 1.125rem; }
.safety__number { display: inline-flex; align-items: center; min-height: var(--rb-target-min); color: var(--rb-ink); font: 400 clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem)/1.1 var(--rb-font-body); letter-spacing: -.02em; text-underline-offset: .15em; }
.safety p { margin: .5rem 0 0; font-size: var(--rb-text-sm); }

/* Plain lists of related links. */
.link-list { list-style: none; margin: var(--rb-space-3) 0 0; padding: 0; border-top: 1px solid var(--line); }
.link-list li { border-bottom: 1px solid var(--line); }
.link-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--rb-space-2); min-height: 3.25rem; padding-block: .5rem; font-weight: 600; text-decoration: none; }
.link-list a::after { content: "→"; content: "→" / ""; color: var(--rb-brick); transition: translate var(--rb-motion-fast) var(--rb-ease-standard); }
.link-list a:hover { text-decoration: underline; text-underline-offset: .25em; }
.link-list a:hover::after { translate: .25rem 0; }
.section--ink .link-list, .section--ink .link-list li { border-color: rgb(244 241 235 / 18%); }
.section--ink .link-list a::after { color: var(--rb-sand); }

.section__intro { max-width: 46rem; font-size: var(--rb-text-lead); }
.section--ink .section__intro, .section--ink .section__inner > p, .section--ink .split > div > p { color: var(--rb-cream); }
.section--ink .actions { margin-top: var(--rb-space-4); }
.section h2 + .section__intro { margin-top: var(--rb-space-2); }
.center { text-align: center; }
.center > * { margin-inline: auto; }
.center .actions { justify-content: center; }

.facts { display: grid; gap: var(--rb-space-3); margin: var(--rb-space-4) 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.facts li { padding: var(--rb-space-3); border-radius: var(--rb-radius-lg); background: var(--rb-white); border: 1px solid var(--rb-stone-light); }
.facts strong { display: block; color: var(--rb-brick-dark); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.1; }
.facts span { font-size: var(--rb-text-sm); }

/* Fees page: section headings inside the two fee columns. */
.fees__more h2 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; }
.fees__more div > h2:not(:first-child) { margin-top: var(--rb-space-5); }
.pending { color: var(--rb-error); }
.prose ul.columns { display: block; columns: 2 12rem; column-gap: var(--rb-space-4); }
.prose ul.columns li { margin-bottom: .5rem; break-inside: avoid; }
.docs--single { max-width: 26rem; margin: var(--rb-space-3) 0 var(--rb-space-5); }
.summary { color: var(--rb-ink); }
.summary--ink { background: rgb(244 241 235 / 6%); border: 1px solid rgb(244 241 235 / 18%); }
.summary--ink dt { color: var(--rb-sand); }
.summary--ink dd { color: var(--rb-white); }
.fees__table td.wrap { white-space: normal; min-width: 8rem; }

/* Mortar band (brand v2.0): a bridge between Ink and Cream, Ink words only. */
.band { padding: var(--rb-space-6) var(--gutter); }
.band--mortar { background: var(--rb-mortar); color: var(--rb-ink); }
.band__label { margin: 0 0 var(--rb-space-2); font: 600 var(--rb-text-sm)/1.3 var(--rb-font-display); letter-spacing: .08em; text-transform: uppercase; }
.band h2 { margin: 0; }
.band__text { margin: 0; font-size: var(--rb-text-lead); line-height: 1.55; }
.band :focus-visible { outline-color: var(--rb-ink); }

/* Proof points: a short word in large type, one line under it. */
.proof-grid { list-style: none; margin: var(--rb-space-4) 0 0; padding: 0; display: grid; gap: var(--rb-space-3) var(--rb-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.proof-grid li { padding-top: var(--rb-space-2); border-top: 3px solid var(--rb-brick); }
.proof-grid strong { display: block; margin-bottom: .25rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.1; color: var(--rb-brick-dark); }
.proof-grid span { font-size: var(--rb-text-sm); }
@media (max-width: 47.99rem) { .proof-grid { grid-template-columns: 1fr 1fr; gap: var(--rb-space-3) var(--rb-space-2); } .proof-grid strong { font-size: 1.375rem; } }

/* Services with their prices, one row each. */
.price-rows { list-style: none; margin: var(--rb-space-4) 0 var(--rb-space-2); padding: 0; border-top: 1px solid rgb(22 22 22 / 18%); }
.price-rows li { border-bottom: 1px solid rgb(22 22 22 / 18%); }
.price-rows a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .25rem var(--rb-space-3); min-height: 3.5rem; padding: .75rem 2rem .75rem 0; position: relative; color: var(--rb-ink); text-decoration: none; }
.price-rows a::after { content: "→"; content: "→" / ""; position: absolute; right: .25rem; color: var(--rb-brick-dark); font-weight: 700; transition: translate var(--rb-motion-fast) var(--rb-ease-standard); }
.price-rows a:hover .price-rows__name { text-decoration: underline; text-underline-offset: .25em; }
.price-rows a:hover::after { translate: .25rem 0; }
.price-rows__name { font-weight: 700; font-size: 1.125rem; }
.price-rows__price { color: var(--rb-brick-dark); font-weight: 700; text-align: right; }
@media (max-width: 39.99rem) { .price-rows a { grid-template-columns: 1fr; } .price-rows__price { text-align: left; } }

/* "This is our every day": numbered routine on Ink. */
.day-list { list-style: none; margin: 0; padding: 0; counter-reset: day; display: grid; gap: 0; }
.day-list li { counter-increment: day; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--rb-space-2); align-items: baseline; padding: .875rem 0; border-top: 1px solid rgb(244 241 235 / 18%); color: var(--rb-cream); }
.day-list li::before { content: counter(day, decimal-leading-zero); content: counter(day, decimal-leading-zero) / ""; color: var(--rb-sand); font: 600 var(--rb-text-sm)/1 var(--rb-font-display); letter-spacing: .08em; }
.section--ink #day-title { font-size: var(--display); }

/* ---------- Phones: shorter pages, calmer type ---------- */
@media (max-width: 47.99rem) {
  .section { padding-block: var(--rb-space-5); }
  .band { padding-block: var(--rb-space-5); }
  .page-hero { padding-bottom: var(--rb-space-5); }
  main > .page-hero:first-child { padding-top: calc(var(--header-h) + var(--rb-space-5)); }
  .crumbs { padding-top: calc(var(--header-h) + var(--rb-space-2)); }
  .page-hero { padding-top: var(--rb-space-3); }
  .page-hero__media img { aspect-ratio: 16 / 9; }
  .page-hero h1 { font-size: clamp(1.875rem, 1.4rem + 2.4vw, 2.25rem); }
  h2 { font-size: clamp(1.625rem, 1.3rem + 1.6vw, 2rem); }
  .page-hero .lead, .section__intro, .lead-dark, .band__text { font-size: 1.0625rem; }
  .section__label, .eyebrow { margin-bottom: var(--rb-space-2); }
  .steps { gap: var(--rb-space-3); margin-block: var(--rb-space-3) var(--rb-space-2); }
  .steps li { padding-top: var(--rb-space-2); }
  .steps li::before { font-size: 2.25rem; margin-bottom: .5rem; }
  .cards { gap: var(--rb-space-2); margin-top: var(--rb-space-3); }
  .card { padding: var(--rb-space-2) var(--rb-space-3); }
  .actions { margin-top: var(--rb-space-3); }
  .site-footer { padding-top: var(--rb-space-5); }
}

/* Tap targets: a linked tier name and the links inside running text get a 44 px-high hit area without moving the
   text (padding on an inline element does not change the line). WCAG 2.5.8. */
.tier h3 a { display: inline-block; padding-block: .5rem; margin-block: -.5rem; }
.prose p a:not(.rb-button), .prose li a:not(.rb-button), p .text-link, li .text-link, .notice a, .answer a { padding-block: .4rem; }
p .text-link, li .text-link { display: inline; min-height: 0; }

/* Figures use the headline face. */
.facts strong, .proof-grid strong, .safety__number { font-family: var(--rb-font-serif); letter-spacing: -.01em; }

/* ---------- Contrast on the inner pages, continued ---------- */

/* A guide's short answer is a dark panel, so the page opens with the same light-then-dark rhythm as the home page. */
.answer { border-left-color: var(--rb-brick); background: var(--rb-ink); color: #fff; }
.answer h2 { color: var(--rb-rose); }
.answer a, .answer a:visited { color: #fff; }
.answer li::marker { color: var(--rb-rose); }
.answer :focus-visible { outline-color: var(--rb-cream); }

.band--ink { background: var(--rb-ink); color: #fff; }
.band--ink h2 { color: #fff; }
.band--ink .band__label { color: var(--rb-rose); }
.band--ink .band__text { color: var(--rb-cream); }
.band--ink :focus-visible { outline-color: var(--rb-cream); }
.band--ink .rb-button:focus-visible { box-shadow: 0 0 0 3px var(--rb-ink), 0 0 0 6px var(--rb-cream); }

/* Red Brick Lettings – home page. Ported from the owner's layout page
   (E:/000.Red Brick Lettings/website 2/index.html, third pass, 01/10/2026): its own CSS, scoped to html.home so it
   cannot touch other pages. The shared header, footer and phone bar are in landing.css. Edit with care: the section
   rules below are the page's originals. */

html.home { scroll-padding-top: 122px; }
.home {
  --p1: url("/assets/img/photos/house-2x.webp");
  --p2: url("/assets/img/photos/living.webp");
  --p3: url("/assets/img/photos/kitchen.webp");
  --p4: url("/assets/img/photos/bedroom.webp");
  --p5: url("/assets/img/photos/lounge.webp");
  --p6: url("/assets/img/photos/hall.webp");
  --p7: url("/assets/img/photos/open-plan.webp");
}
.home body { overflow-x: clip; }
/* The layout page's base rules, at zero specificity so every section rule below still wins. */
:where(.home main) a:where(:not(.btn)) { color: inherit; text-decoration: none; } /* (0,0,1): after landing.css, before the section rules */
:where(.home main) :is(button, input, select, textarea) { font: inherit; }
:where(.home main) :is(h2, h3, h4) { margin: 0 0 .83em; font-family: var(--sans); font-size: 1.5em; font-weight: 700; letter-spacing: normal; line-height: inherit; text-wrap: wrap; }
:where(.home main) h3 { margin-bottom: 1em; font-size: 1.17em; }
:where(.home main) h4 { margin-bottom: 1.33em; font-size: 1em; }
:where(.home main) p { margin: 0 0 1em; }
.home main :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--surface); }
.home .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.home .eyebrow { display: block; margin: 0; color: inherit; font: 800 12px/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.home .eyebrow.brand-text { color: var(--brand); }
.home .eyebrow.rose { color: #e5b5b7; }
.home main .text-link { display: inline; min-height: 0; color: var(--brand); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* The enquiry form does not send anything: it prepares the details to send on WhatsApp (home.js). */
.home .form-done { margin: 0; }
.home .form-done h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 14px; }
.home .form-done dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 16px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.home .form-done dt { color: var(--muted); font-size: 14.5px; }
.home .form-done dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.home .form-done .btn { width: 100%; margin-top: 8px; }
.home .form-done .hint { margin-top: 12px; }
.home .form-done button.text-link { background: none; border: 0; padding: 10px 0 0; cursor: pointer; }
.home .compare-foot { margin: 16px 0 0; }
.home .compare td.plus small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 700; line-height: 1.15; }

/* ---------- Icons ---------- */
.home .icon{
  width:24px;height:24px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.home .icon-badge{
  width:52px;height:52px;border-radius:16px;flex:none;
  display:grid;place-items:center;background:rgba(141,29,32,.1);color:var(--brand);
}
.home .go-link{
  display:inline-flex;align-items:center;gap:8px;padding:10px 0;
  color:var(--brand);font-weight:700;font-size:15.5px;
}
.home .go-link .icon{width:18px;height:18px;transition:transform .25s ease}
.home .go-link:hover .icon{transform:translateX(4px)}

/* ---------- Hero ---------- */
.home .hero{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:100vh;min-height:min(100svh, 880px);
  padding:170px 0 60px;color:#fff;background:#1d1a18;
}
.home .hero-media{
  position:absolute;inset:0;
  background:var(--p1) center/cover no-repeat;
  animation:settle 1.8s ease-out both;
}
.home .hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.14) 34%, rgba(0,0,0,.76) 100%),
    linear-gradient(90deg, rgba(0,0,0,.46), rgba(0,0,0,0) 72%);
}
@keyframes settle{from{transform:scale(1.06)}to{transform:scale(1)}}
.home .hero-content{position:relative;z-index:2;width:min(calc(100% - 32px), var(--max));margin-inline:auto}
.home .hero .eyebrow{opacity:.92}
.home h1{
  font-family:var(--serif);
  font-size:clamp(40px,7.2vw,98px);
  line-height:.96;font-weight:500;letter-spacing:-.04em;
  max-width:1000px;margin:14px 0 26px;text-wrap:balance;
}
.home .hero-bottom{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:end}
.home .hero-copy{max-width:600px;font-size:19px;color:rgba(255,255,255,.92);margin:0}
.home .hero-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}

/* ---------- Shared section pieces ---------- */
.home section{padding:100px 0}
.home section.follows-on{padding-top:0}
.home .section-head{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-bottom:38px}
.home .section-head h2, .home .display{
  margin:0;font-family:var(--serif);font-weight:500;
  font-size:clamp(36px,5.4vw,68px);line-height:.98;letter-spacing:-.035em;text-wrap:balance;
}
.home .section-head .eyebrow{margin-bottom:12px}
.home .section-head p.lede{flex:none;max-width:420px;color:var(--muted);margin:0;font-size:19px;line-height:1.45}
.home .section-cta{margin-top:30px}

.home .photo{background-color:#d8d0c3;background-size:cover;background-position:center;background-repeat:no-repeat}
.home .p1{background-image:var(--p1)}
.home .p2{background-image:var(--p2)}
.home .p3{background-image:var(--p3)}
.home .p4{background-image:var(--p4)}
.home .p5{background-image:var(--p5)}
.home .p6{background-image:var(--p6)}
.home .p7{background-image:var(--p7)}

/* ---------- Landlord introduction ---------- */
/* Stone ground so the white tiles stand out from it (owner, 02/10/2026: "put some difference here for the buttons from the back ground"). */
.home .intro{background:var(--sand);border-bottom:1px solid var(--line);padding:64px 0;position:relative;z-index:3}
.home .intro-grid{display:grid;grid-template-columns:.85fr 1.65fr;gap:48px;align-items:center}
.home .intro h2{
  font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.4vw,44px);
  line-height:1.04;letter-spacing:-.03em;margin:10px 0 0;
}
.home .routes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.home .route{
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;height:100%;
  padding:22px;border:1px solid rgba(22,22,22,.16);border-radius:20px;background:#fff;
  box-shadow:0 1px 2px rgba(34,24,18,.06), 0 10px 28px rgba(34,24,18,.10);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.home .route:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:0 1px 2px rgba(34,24,18,.06), 0 16px 34px rgba(34,24,18,.16)}
.home .route strong{font-family:var(--serif);font-size:25px;font-weight:500;line-height:1.1;letter-spacing:-.02em}
.home .route .route-go{margin-top:auto;color:var(--brand);display:flex}

/* ---------- What landlords need help with ---------- */
.home .needs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.home .need{
  display:flex;flex-direction:column;gap:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px 20px;
}
.home .need h3{font-size:18.5px;line-height:1.2;margin:0}
.home .need p{margin:6px 0 0;color:var(--muted);font-size:15.5px;line-height:1.4}
/* Four tiles carry a photograph, with the icon sitting over its lower edge; the fifth runs full width beneath them
   (user, 01/10/2026: "put some pics in those 4 buttons"). */
.home .need.need-pic{padding:0;gap:0;overflow:hidden}
.home .need-photo{aspect-ratio:16/10}
.home .need-pic .icon-badge{position:relative;margin:-26px 0 0 20px;background:#f4e7e2;box-shadow:0 0 0 4px var(--surface)}
.home .need-pic > div:last-child{padding:14px 20px 22px}
.home .need:last-child{grid-column:1 / -1;flex-direction:row;align-items:center}

/* ---------- Services ---------- */
/* Dark ground, as on "Care you can see" (user, 01/10/2026): the cards stay light, the section's own words turn light. */
.home .services{background:#151515;color:#fff}
.home .services .eyebrow.brand-text, .home .tenants .eyebrow.brand-text{color:#e5b5b7}
.home .services .section-head p.lede{color:var(--soft)}
.home .service, .home .compare, .home .tenant-routes .route, .home .urgent{color:var(--ink)}
.home .services .compare-foot{color:var(--soft)}
.home .services .compare-foot .text-link{color:#fff}
.home .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.home .service{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
}
.home .service-photo{aspect-ratio:2/1}
.home .service-body{padding:24px 26px 18px;display:flex;flex-direction:column;align-items:flex-start;flex:1}
.home .service h3{font-family:var(--serif);font-size:30px;line-height:1.05;font-weight:500;letter-spacing:-.02em;margin:0 0 8px}
.home .service p{margin:0 0 6px;font-weight:600;line-height:1.35}
.home .service .go-link{margin-top:auto}

.home .compare{
  margin-top:22px;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
}
.home .compare table{width:100%;border-collapse:collapse;table-layout:fixed}
.home .compare caption{
  text-align:left;padding:26px 26px 10px;
  font-family:var(--serif);font-size:28px;line-height:1.1;letter-spacing:-.02em;
}
.home .compare th, .home .compare td{padding:14px 10px;border-top:1px solid var(--line);text-align:center;vertical-align:middle}
.home .compare thead th, .home .compare thead td{border-top:0;font-size:14px;font-weight:800;line-height:1.2;vertical-align:bottom}
.home .compare tbody th{text-align:left;font-weight:600;font-size:16px;line-height:1.3;padding-left:26px}
.home .compare thead th{width:19%}
.home .compare .short{display:none}
.home .compare td .icon{display:block;margin:auto;color:var(--brand);stroke-width:2.4}
.home .compare td.no .icon{color:rgba(22,22,22,.5);stroke-width:1.8}
.home .compare tr > :last-child{background:rgba(141,29,32,.06)}

/* ---------- The property's story ---------- */
.home .journey{background:var(--sand)}
.home .rail{
  list-style:none;margin:0 0 30px;padding:0;display:flex;flex-wrap:wrap;gap:8px 0;
  font-family:var(--serif);font-size:clamp(20px,2.4vw,28px);line-height:1.2;
}
.home .rail li{display:flex;align-items:center}
.home .rail li + li::before{content:"\2192";color:var(--brand);margin:0 14px;font-family:var(--sans);font-size:.8em}
.home .rail a{border-bottom:1px solid rgba(22,22,22,.35);padding-bottom:2px;transition:color .2s ease, border-color .2s ease}
.home .rail a:hover{color:var(--brand);border-color:var(--brand)}
.home .stages{list-style:none;margin:0;padding:0}
.home .stage{display:grid;grid-template-columns:1fr 92px 1fr;align-items:center}
.home .stage-node{grid-column:2;grid-row:1;align-self:stretch;display:flex;align-items:center;justify-content:center;position:relative}
.home .stage-node::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(22,22,22,.22)}
.home .stage:first-child .stage-node::before{top:50%}
.home .stage:last-child .stage-node::before{bottom:50%}
.home .stage-node span{
  position:relative;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:800;font-size:15px;
}
.home .stage-copy{grid-column:3;grid-row:1;padding:30px 0}
.home .stage-photo{grid-column:1;grid-row:1;aspect-ratio:16/9;border-radius:var(--radius);box-shadow:var(--shadow);margin:26px 0}
.home .stage:nth-child(even) .stage-copy{grid-column:1}
.home .stage:nth-child(even) .stage-photo{grid-column:3}
.home .stage h3{font-family:var(--serif);font-weight:500;font-size:clamp(36px,4.4vw,56px);line-height:1;letter-spacing:-.03em;margin:0}
.home .chips{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.home .chips li{
  border:1px solid rgba(22,22,22,.28);border-radius:999px;padding:7px 14px;
  font-size:15px;font-weight:600;line-height:1.3;background:rgba(255,255,255,.6);
}
.home .p1-right{background-position:88% center}
.home .p3-right{background-position:96% center}
.home .p6-left{background-position:14% center}
.home .p7-kitchen{background-size:205%;background-position:47% 43%}

/* ---------- Care you can see ---------- */
.home .care{background:#151515;color:#fff}
.home .care .section-head p.lede{color:var(--soft)}
.home .care-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.home .care-point{
  display:flex;flex-direction:column;gap:14px;
  background:#222;border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:24px 22px;
}
.home .care-point .icon-badge{background:rgba(255,255,255,.1);color:#f0c9cb}
.home .care-point h3{font-size:18.5px;line-height:1.2;margin:0}
.home .care-point p{margin:6px 0 0;color:var(--soft);font-size:15.5px;line-height:1.4}

.home .flow{margin-top:14px;background:var(--surface);color:var(--ink);border-radius:30px;padding:38px}
.home .flow h3{font-family:var(--serif);font-size:32px;line-height:1.05;font-weight:500;letter-spacing:-.02em;margin:10px 0 30px}
.home .flow ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.home .flow li{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  font-weight:700;font-size:16.5px;line-height:1.25;
}
.home .flow li:not(:last-child)::after{
  content:"";position:absolute;top:25px;left:calc(50% + 36px);width:calc(100% - 62px);
  height:2px;background:rgba(141,29,32,.35);
}
.home .flow .icon-badge{border-radius:50%;background:var(--brand);color:#fff}
.home .flow small{display:block;margin-bottom:3px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}

/* ---------- Switching agent ---------- */
.home .switch-box{
  border-radius:34px;padding:64px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--brand-dark),var(--brand));color:#fff;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;
}
.home .switch-box::after{
  content:"";position:absolute;width:320px;height:320px;border:1px solid rgba(255,255,255,.15);border-radius:50%;
  right:-70px;top:-140px;pointer-events:none;
}
.home .switch-box h2{font-family:var(--serif);font-size:clamp(36px,4.6vw,60px);line-height:.98;font-weight:500;letter-spacing:-.03em;margin:12px 0 16px;text-wrap:balance}
.home .switch-box p:not(.eyebrow){color:rgba(255,255,255,.92);margin:0 0 26px;max-width:460px;font-size:19px;line-height:1.45}
.home .switch-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:switch;position:relative;z-index:1}
.home .switch-steps li{
  counter-increment:switch;position:relative;padding:17px 18px 17px 64px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:18px;
  font-weight:700;line-height:1.3;
}
.home .switch-steps li::before{
  content:counter(switch, decimal-leading-zero);position:absolute;left:20px;top:50%;transform:translateY(-50%);
  font-family:var(--serif);font-size:22px;font-weight:400;
}

/* ---------- Presenting your property ---------- */
.home .featured{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:stretch}
.home .featured-photo{min-height:480px;border-radius:30px;box-shadow:var(--shadow)}
.home .featured-info{
  background:#1f1f1f;color:#fff;border-radius:30px;padding:40px;
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;
}
.home .featured-info h2{font-family:var(--serif);font-size:clamp(34px,3.8vw,48px);line-height:1;font-weight:500;letter-spacing:-.03em;margin:12px 0 16px}
.home .featured-info p:not(.eyebrow){color:var(--soft);margin:0;font-size:19px;line-height:1.45}
.home .featured-details{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.home .featured-details li{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.07);border-radius:16px;padding:16px;
  font-weight:700;font-size:15.5px;line-height:1.25;
}
.home .featured-details .icon{color:#f0c9cb}

/* ---------- Local knowledge ---------- */
.home .areas-grid{
  display:grid;grid-template-columns:.8fr 1.2fr;grid-template-areas:"head map" "more map";
  gap:26px 56px;align-items:center;
}
.home .areas-head{grid-area:head;align-self:end}
.home .areas-head .display{margin-top:12px}
.home .areas-more{grid-area:more;align-self:start}
.home .areas-more .chips{margin:12px 0 18px}
.home .areas-more .chips li{background:var(--surface)}
.home .map{
  grid-area:map;justify-self:end;width:100%;max-width:540px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow);
}
.home .map svg{display:block;width:100%;height:auto}
.home .map text{font-family:var(--serif);font-size:17px;fill:var(--ink)}
.home .map .land{fill:rgba(141,29,32,.06)}
.home .map .river{fill:none;stroke:#a9c0c9;stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.home .map .river-label{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.14em;fill:#56707a}
.home .map .pin-dot{fill:var(--brand)}
.home .map .pin-core{fill:#fff}
.home .map .pin-pulse{fill:none;stroke:var(--brand);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.home.js .map .river{stroke-dashoffset:1}
.home.js .map.visible .river{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s ease .1s}
.home.js .map .pin-drop{opacity:0;transform:translateY(-18px)}
.home.js .map.visible .pin-drop{
  opacity:1;transform:none;
  transition:opacity .45s ease var(--d), transform .6s cubic-bezier(.34,1.56,.64,1) var(--d);
}
.home .map.visible .pin-pulse{animation:pulse 2.8s ease-out infinite;animation-delay:calc(var(--d) + 1s)}
@keyframes pulse{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.6)}}

/* ---------- About ---------- */
.home .about{background:var(--surface);border-block:1px solid var(--line);overflow:hidden}
.home .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.home .about .display{margin-top:12px}
.home .about-copy > p:not(.eyebrow){font-size:21px;line-height:1.45;margin:18px 0 0;max-width:440px}
.home .venn{position:relative;display:flex;justify-content:center;align-items:center}
.home .venn-circle{
  width:240px;height:240px;border-radius:50%;flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  font-family:var(--serif);font-size:27px;letter-spacing:-.02em;
}
.home .venn-circle .icon{width:34px;height:34px}
.home .venn-left{background:rgba(141,29,32,.13);color:var(--brand-dark);margin-right:-36px;padding-right:36px}
.home .venn-right{background:rgba(22,22,22,.08);margin-left:-36px;padding-left:36px}
.home .venn-mark{
  position:absolute;left:50%;top:50%;z-index:1;width:52px;height:52px;margin:-26px 0 0 -26px;
  filter:drop-shadow(0 8px 14px rgba(141,29,32,.3));
}
.home.js .venn .venn-left{opacity:0;transform:translateX(-60px)}
.home.js .venn .venn-right{opacity:0;transform:translateX(60px)}
.home.js .venn .venn-mark{transform:scale(0)}
.home.js .venn.visible .venn-circle{opacity:1;transform:none;transition:opacity .6s ease .1s, transform .9s cubic-bezier(.22,1,.36,1) .1s}
.home.js .venn.visible .venn-mark{transform:none;transition:transform .5s cubic-bezier(.34,1.56,.64,1) .8s}

/* ---------- Tenants ---------- */
.home .tenants{padding:84px 0;background:#151515;color:#fff}
.home .tenants .section-head h2{font-size:clamp(32px,4vw,48px)}
.home .tenant-routes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.home .tenant-routes .route{flex-direction:row;align-items:center;background:var(--surface)}
.home .tenant-routes .route .route-go{margin:0}
.home .route-text{flex:1;display:flex;flex-direction:column;gap:10px}
.home .tags{display:flex;flex-wrap:wrap;gap:6px}
.home .tags span{
  border:1px solid rgba(22,22,22,.22);border-radius:999px;padding:4px 11px;
  font-size:13.5px;font-weight:600;line-height:1.3;color:var(--muted);
}
.home .urgent{
  display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:14px 16px;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:0 16px 16px 0;
  font-size:15.5px;font-weight:600;line-height:1.4;
}
.home .urgent .icon{color:var(--brand)}
.home .urgent a{font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ---------- FAQs ---------- */
.home .faqs{background:var(--surface);border-block:1px solid var(--line)}
.home .faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start}
.home .faq-wrap .display{font-size:clamp(36px,4.6vw,60px);margin:12px 0 16px}
.home .faq-intro p:not(.eyebrow){color:var(--muted)}
.home .faq details{border-bottom:1px solid var(--line)}
.home .faq details:first-child{border-top:1px solid var(--line)}
.home .faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:14px 4px;font-weight:700;font-size:18px;line-height:1.3;
}
.home .faq summary::-webkit-details-marker{display:none}
.home .faq summary .icon-badge{width:42px;height:42px;border-radius:13px}
.home .faq summary .icon{width:20px;height:20px}
.home .faq summary .q{flex:1}
.home .faq summary::after{content:"+";flex:none;font-size:28px;font-weight:400;line-height:1;color:var(--brand);transition:transform .3s ease}
.home .faq details[open] summary::after{transform:rotate(45deg)}
.home .faq details p{margin:0 4px 20px 60px;color:var(--muted);max-width:600px}
.home .faq details[open] p{animation:faq-in .35s ease both}
@keyframes faq-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- Enquiry ---------- */
.home .enquiry-box{
  border-radius:34px;padding:64px;background:#151515;color:#fff;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start;
}
.home .enquiry-box h2{font-family:var(--serif);font-size:clamp(36px,4.6vw,60px);line-height:.98;font-weight:500;letter-spacing:-.03em;margin:12px 0 16px}
.home .enquiry-box > div > p:not(.eyebrow){color:var(--soft);font-size:19px;line-height:1.45}
.home .next-title{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin:36px 0 16px}
.home .next{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.home .next li{display:flex;align-items:center;gap:14px;font-weight:700;font-size:17px;line-height:1.3}
.home .next .icon-badge{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.1);color:#f0c9cb}
.home .enquiry-form{background:var(--surface);color:var(--ink);border-radius:24px;padding:32px}
.home .form-row{display:grid;gap:6px;margin-bottom:18px}
.home .enquiry-form label, .home .enquiry-form legend{font-weight:700;font-size:15px;padding:0}
.home .enquiry-form input, .home .enquiry-form select, .home .enquiry-form textarea{
  width:100%;min-height:50px;padding:12px 14px;font-size:16px;
  border:1px solid rgba(22,22,22,.5);border-radius:14px;background:#fff;color:var(--ink);
}
.home .enquiry-form textarea{min-height:104px;resize:vertical}
.home .enquiry-form fieldset{border:0;margin:0 0 18px;padding:0;min-width:0}
.home .enquiry-form legend{margin-bottom:4px}
.home .two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.home .two .form-row{margin-bottom:0}
.home .two label{font-weight:600;font-size:14.5px}
.home .hint{font-size:14.5px;color:var(--muted);margin:0}
.home .optional{font-weight:400;color:var(--muted)}
.home .enquiry-form .btn{width:100%;margin-top:4px}
.home .form-status{margin:14px 0 0;padding:14px 16px;border-radius:14px;font-weight:600;font-size:15.5px;border:1px solid transparent}
.home .form-status:empty{display:none}
.home .form-status.is-notice{background:#f7ecd4;border-color:#b98a2b;color:#3d2c05}
.home .form-status.is-ok{background:#e4f1e5;border-color:#4d8a54;color:#143d19}
.home .form-status.is-error{background:#f8e3e3;border-color:var(--brand);color:var(--brand-dark)}
.home .form-privacy{font-size:14.5px;color:var(--muted);margin:16px 0 0}

/* ---------- Reveal on scroll (only when JavaScript is running) ---------- */
.home.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s ease}
.home.js .reveal.visible{opacity:1;transform:none}

/* Tiles arrive one after another, and their icons pop in. */
.home .needs > :nth-child(2), .home .care-points > :nth-child(2), .home .tenant-routes > :nth-child(2), .home .service-grid > :nth-child(2){transition-delay:.09s}
.home .needs > :nth-child(3), .home .care-points > :nth-child(3), .home .service-grid > :nth-child(3){transition-delay:.18s}
.home .needs > :nth-child(4), .home .care-points > :nth-child(4){transition-delay:.27s}
.home .needs > :nth-child(5){transition-delay:.36s}
.home.js .reveal .icon-badge{opacity:0;transform:scale(.55)}
.home.js .reveal.visible .icon-badge{
  opacity:1;transform:none;
  transition:opacity .4s ease .25s, transform .55s cubic-bezier(.34,1.56,.64,1) .25s;
}
.home.js .flow li{opacity:0;transform:translateY(14px)}
.home.js .flow.visible li{opacity:1;transform:none;transition:opacity .5s ease, transform .5s ease}
.home.js .flow.visible li:nth-child(2){transition-delay:.14s}
.home.js .flow.visible li:nth-child(3){transition-delay:.28s}
.home.js .flow.visible li:nth-child(4){transition-delay:.42s}
.home.js .flow.visible li:nth-child(5){transition-delay:.56s}
.home.js .flow .icon-badge{opacity:1;transform:none}

/* ---------- Tablet ---------- */
@media (max-width:1080px){
  .home .featured, .home .switch-box, .home .about-grid, .home .faq-wrap, .home .enquiry-box{grid-template-columns:minmax(0,1fr)}
  .home .intro-grid{grid-template-columns:1fr;gap:26px}
  .home .areas-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "map" "more";gap:22px}
  .home .map{justify-self:start;max-width:560px}
  .home .needs{grid-template-columns:1fr 1fr}
  .home .care-points{grid-template-columns:1fr 1fr}
  .home .featured-photo{min-height:400px}
  .home .switch-box, .home .enquiry-box{padding:48px;gap:36px}
  .home .stage{grid-template-columns:1fr 72px 1fr}
  .home .service h3{font-size:26px}
}

/* ---------- Phone ---------- */
@media (max-width:700px){
  html.home{scroll-padding-top:84px}
  .home body{font-size:16.5px;padding-bottom:88px}
  .home .container{width:min(calc(100% - 24px), var(--max))}
  .home section{padding:64px 0}


  .home .hero{min-height:92vh;min-height:min(92svh, 760px);padding:150px 0 112px}
  .home.js .hero{padding-bottom:44px}
  /* Phones: the words start higher up the photo, so the shade deepens sooner (measured, 4.5:1 at the brightest point). */
  .home .hero::before{background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.30) 30%, rgba(0,0,0,.64) 46%, rgba(0,0,0,.82) 100%)}
  .home .hero-content{width:min(calc(100% - 24px), var(--max))}
  .home .hero .eyebrow span{display:block}
  .home .hero .eyebrow .sep{display:none}
  .home h1{font-size:clamp(38px,10.6vw,56px);margin:12px 0 18px}
  .home .hero-bottom{grid-template-columns:1fr;gap:20px}
  .home .hero-copy{font-size:17px}
  .home .hero-actions{justify-content:flex-start}
  .home .hero-actions .btn{flex:1 1 100%}

  .home .section-head{display:block;margin-bottom:26px}
  .home .section-head p.lede{margin-top:12px;font-size:17.5px}
  .home .section-cta .btn{width:100%}

  .home .intro{padding:44px 0}
  .home .routes{grid-template-columns:1fr;gap:10px}
  .home .route{flex-direction:row;align-items:center;gap:14px;padding:12px 16px 12px 12px}
  .home .route strong{flex:1;font-size:22px}
  .home .route .route-go{margin:0}

  .home .needs{grid-template-columns:1fr 1fr;gap:10px}
  .home .need{padding:18px 16px;gap:12px}
  .home .need-pic .icon-badge{margin-left:14px}
  .home .need-pic > div:last-child{padding:10px 14px 16px}
  .home .need h3{font-size:17px}
  .home .need p{font-size:14.5px}
  .home .icon-badge{width:46px;height:46px;border-radius:14px}

  .home .service-grid{grid-template-columns:1fr;gap:12px}
  .home .service{flex-direction:row}
  .home .service-photo{width:104px;aspect-ratio:auto;flex:none}
  .home .service-body{padding:16px 16px 8px}
  .home .service h3{font-size:23px;margin-bottom:4px}
  .home .service p{font-size:15px}
  .home .compare caption{padding:20px 16px 8px;font-size:24px}
  .home .compare th, .home .compare td{padding:12px 4px}
  .home .compare tbody th{padding-left:16px;font-size:14.5px}
  .home .compare thead th{font-size:12.5px;padding-bottom:10px}
  .home .compare thead th{width:17%}
  .home .compare .full{display:none}
  .home .compare .short{display:inline}

  .home .rail{font-size:17.5px;margin-bottom:26px}
  .home .rail li + li::before{margin:0 6px}
  .home .stage{grid-template-columns:44px 1fr;column-gap:14px;align-items:start;padding-bottom:30px}
  .home .stage:last-child{padding-bottom:0}
  .home .stage-node{grid-column:1;grid-row:1 / span 2;align-items:flex-start}
  .home .stage:first-child .stage-node::before{top:10px}
  .home .stage:last-child .stage-node::before{display:none}
  .home .stage .stage-node span{width:44px;height:44px}
  .home .stage .stage-copy, .home .stage:nth-child(even) .stage-copy{grid-column:2;grid-row:1;padding:2px 0 16px}
  .home .stage .stage-photo, .home .stage:nth-child(even) .stage-photo{grid-column:2;grid-row:2;margin:0;border-radius:20px}
  .home .chips{margin-top:12px;gap:6px}
  .home .chips li{font-size:14px;padding:6px 12px}

  .home .care-points{gap:10px}
  .home .care-point{padding:18px 16px;gap:12px}
  .home .care-point h3{font-size:17px}
  .home .care-point p{font-size:14.5px}
  .home .flow{padding:26px 20px;border-radius:24px;margin-top:10px}
  .home .flow h3{font-size:28px;margin-bottom:22px}
  .home .flow ol{grid-template-columns:1fr;gap:0}
  .home .flow li{flex-direction:row;text-align:left;gap:14px;padding-bottom:18px}
  .home .flow li:last-child{padding-bottom:0}
  .home .flow li:not(:last-child)::after{top:46px;bottom:0;left:22px;width:2px;height:auto}

  .home .switch-box, .home .enquiry-box{padding:36px 20px;border-radius:28px;gap:30px}
  .home .switch-box .btn{width:100%}
  .home .switch-box p:not(.eyebrow), .home .featured-info p:not(.eyebrow), .home .enquiry-box > div > p:not(.eyebrow){font-size:17.5px}
  .home .switch-steps li{padding:14px 14px 14px 56px;font-size:16px}
  .home .switch-steps li::before{left:16px;font-size:20px}
  .home .featured-photo{min-height:260px;border-radius:24px}
  .home .featured-info{padding:28px 20px;border-radius:24px}
  .home .featured-info .btn{width:100%}
  .home .featured-details li{padding:14px 12px;font-size:14.5px;gap:10px}
  .home .map{border-radius:24px}
  .home .about-grid{gap:30px}
  .home .about-copy > p:not(.eyebrow){font-size:18.5px;margin-top:14px}
  .home .venn-circle{width:176px;height:176px;font-size:22px;gap:8px}
  .home .venn-circle .icon{width:28px;height:28px}
  .home .venn-left{margin-right:-28px;padding-right:28px}
  .home .venn-right{margin-left:-28px;padding-left:28px}
  .home .venn-mark{width:44px;height:44px;margin:-22px 0 0 -22px}
  .home .tenants{padding:56px 0}
  .home .tenant-routes{grid-template-columns:1fr;gap:10px}
  .home .route-text{gap:8px}
  .home .route-text strong{flex:none}
  .home .urgent{font-size:15px;padding:12px 14px}
  .home .faq-wrap{gap:22px}
  .home .faq summary{font-size:16.5px;padding:12px 2px;gap:12px}
  .home .faq summary .icon-badge{width:40px;height:40px}
  .home .faq details p{margin-left:54px}
  .home .enquiry-form{padding:22px 18px;border-radius:20px}
  .home .two{grid-template-columns:1fr}
}

/* ---------- Small phone ---------- */
@media (max-width:380px){
  .home .featured-details{grid-template-columns:1fr}
  .home .venn-circle{width:150px;height:150px;font-size:19px}
  .home .service-photo{width:84px}
  .home .compare tbody th{padding-left:12px;font-size:14px}
  .home .compare thead th{font-size:11.5px;width:18%;padding-inline:2px}
}

@media (prefers-reduced-motion:reduce){
  html.home{scroll-behavior:auto}
  .home *, .home *::before, .home *::after{animation:none!important;transition:none!important}
  .home.js .reveal{opacity:1;transform:none}
  .home.js .reveal .icon-badge, .home.js .flow li, .home.js .map .pin-drop, .home.js .venn .venn-circle, .home.js .venn .venn-mark{opacity:1;transform:none}
  .home.js .map .river{stroke-dashoffset:0}
  .home .btn:hover, .home .route:hover{transform:none}
}

/* ---------- Additions, 02/10/2026 (owner's review points) ---------- */

/* Proof under the three routes: verified details only, each linking to its evidence. */
.home .proof{list-style:none;margin:6px 0 0;padding:0;grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.home .proof a{
  display:flex;align-items:center;gap:12px;height:100%;padding:12px 14px;
  border:1px solid rgba(22,22,22,.14);border-radius:16px;background:var(--surface);
  color:var(--muted);font-size:14px;line-height:1.3;transition:border-color .25s ease;
}
.home .proof a:hover{border-color:var(--brand)}
.home .proof strong{display:block;color:var(--ink);font-size:14.5px}
.home .proof .icon{width:22px;height:22px;color:var(--brand)}

/* HMO: one line and a button. */
.home .hmo-line{
  display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;
  margin:20px 0 0;padding:14px 14px 14px 26px;border:1px solid rgba(255,255,255,.18);border-radius:999px;
  font-family:var(--serif);font-size:24px;line-height:1.1;letter-spacing:-.02em;color:#fff;
}

/* Enquiry: WhatsApp and email first; the form is the second route. */
.home .direct{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 10px}
.home .btn-ghost{border-color:rgba(255,255,255,.6);background:transparent;color:#fff}
.home .btn-ghost:hover{background:rgba(255,255,255,.1)}
.home .enquiry-box > div > p.direct-note{margin:0;font-size:15px;line-height:1.4;color:var(--soft)}
.home .enquiry-box :focus-visible{outline-color:#fff;box-shadow:0 0 0 3px #151515}
.home .enquiry-form :focus-visible{outline-color:var(--ink);box-shadow:0 0 0 3px var(--surface)}
/* Folded on phones by home.js (the service table and the enquiry form); always open elsewhere and without JS. */
.home .phone-fold{min-width:0}
.home .phone-fold > summary{display:none;list-style:none}
.home .phone-fold > summary::-webkit-details-marker{display:none}
.home .phone-fold:not([open]) > summary{
  display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;
  border:1px solid rgba(255,255,255,.6);border-radius:999px;color:#fff;font-weight:700;font-size:15.5px;cursor:pointer;
}

@media (max-width:1080px){
  .home .proof{grid-template-columns:1fr 1fr}
}

/* Phones: a shorter page (owner, 02/10/2026: "for mobile many have said its long"). */
@media (max-width:700px){
  .home section{padding:48px 0}
  .home .intro{padding:36px 0}
  .home .tenants{padding:44px 0}
  .home .section-head{margin-bottom:20px}

  .home .proof{gap:8px;margin-top:0}
  .home .proof a{padding:10px 12px;font-size:12.5px;border-radius:14px}
  .home .proof strong{font-size:13.5px}
  .home .proof .icon{display:none}

  .home #compare-fold{margin-top:12px}
  .home .hmo-line{padding:16px;border-radius:22px;font-size:22px}
  .home .hmo-line .btn{flex:1 1 100%}

  /* The five stages: one compact row each, photo beside the words. */
  .home .rail{display:none}
  .home .stage{grid-template-columns:92px 1fr;column-gap:14px;align-items:center;padding-bottom:12px}
  .home .stage-node{display:none}
  .home .stage .stage-photo, .home .stage:nth-child(even) .stage-photo{grid-column:1;grid-row:1;aspect-ratio:1;border-radius:16px;box-shadow:none}
  .home .stage .stage-copy, .home .stage:nth-child(even) .stage-copy{grid-column:2;grid-row:1;padding:0}
  .home .stage h3{font-size:26px}
  .home .chips{margin-top:8px;gap:5px}
  .home .chips li{font-size:13px;padding:4px 10px}

  .home .flow{padding:22px 18px}
  .home .flow h3{font-size:25px;margin-bottom:16px}
  .home .flow li{gap:12px;padding-bottom:12px;font-size:15.5px}
  .home .flow .icon-badge{width:36px;height:36px}
  .home .flow .icon-badge .icon{width:19px;height:19px}
  .home .flow li:not(:last-child)::after{top:38px;left:17px}
  .home .flow small{display:none}

  .home .switch-box, .home .enquiry-box{padding:30px 18px;gap:22px}
  .home .switch-steps{gap:6px}
  .home .switch-steps li{padding:10px 12px 10px 48px;font-size:15px}
  .home .switch-steps li::before{left:14px;font-size:18px}
  .home .featured-photo{display:none}

  .home .direct .btn{flex:1 1 100%}
}