/* Student Living — Design 5 "Gold", as refined in October 2026.
   Black and warm gold on warm-white pages: a full-width hero picture with the
   heading on its dark wall, white cards with a fine border, black bands, small
   dark-green capitals over headings on light, gold as the accent (and the text
   colour on black). Plain upright Playfair Display headings, Inter for
   everything else, gold buttons with dark lettering and 8px corners, and a
   header with no colour of its own. The motion is CSS only. */

/* The two typefaces, served from the site itself: the same latin files Google
   Fonts serves (variable weight; Inter 400-700, Playfair Display 500-800 and
   italic 500-700). The generator preloads Inter and Playfair normal. If a new
   file is ever needed, give it a new name (-v2): these are cached for a year. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/student-living/fonts/inter-latin-v1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/assets/student-living/fonts/playfair-normal-latin-v1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 500 700; font-display: swap; src: url("/assets/student-living/fonts/playfair-italic-latin-v1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Until they arrive, the text is set in Arial and Georgia resized to take the
   same room (widths, ascent and descent from each font's own metrics), so
   nothing moves when the real fonts swap in. Phones without Arial or Georgia
   skip these and use their own system font, as before. */
@font-face { font-family: "Inter Fallback"; font-weight: 400 600; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 107.12%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 700 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 102.54%; ascent-override: 94.47%; descent-override: 23.52%; line-gap-override: 0%; }
@font-face { font-family: "Playfair Fallback"; font-weight: 400 600; src: local("Georgia"); size-adjust: 101.39%; ascent-override: 106.72%; descent-override: 24.76%; line-gap-override: 0%; }
@font-face { font-family: "Playfair Fallback"; font-weight: 700 900; src: local("Georgia Bold"), local("Georgia-Bold"); size-adjust: 89.29%; ascent-override: 121.18%; descent-override: 28.11%; line-gap-override: 0%; }
@font-face { font-family: "Playfair Fallback"; font-style: italic; font-weight: 400 900; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 98.33%; ascent-override: 110.04%; descent-override: 25.53%; line-gap-override: 0%; }

:root {
  --font-display: "Playfair Display", "Playfair Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #f5f2eb; --surface: #fff; --surface-2: #f5f2eb; --ink: #0e0f14; --ink-2: #3a3d4a; --muted: #5d625b; --line: rgba(14, 15, 20, .12);
  --primary: #0e0f14; --primary-ink: #fff; --primary-hover: #1c1e27; --accent: #c9a24a; --accent-ink: #0e0f14;
  --acc-text: #80621c; --glow: #e9c67a; --glow-soft: #f1dba6; --night: #0b0c10; --tile: #181920;
  --gold-grad: linear-gradient(135deg, #e9c67a, #c9a24a);
  --ok: #1f7a55; --ok-soft: #e3f2ea; --let: #575c70; --let-soft: #eceef4;
  --field-line: #7d7f88;   /* 3.5:1 on warm white, 4:1 on white */
  --radius: 18px; --radius-sm: 12px; --radius-lg: 24px; --radius-btn: 8px;
  --sec: clamp(48px, 5.5vw, 80px);
  --shadow: 0 1px 2px rgba(14, 15, 20, .05), 0 12px 32px rgba(14, 15, 20, .08); --shadow-lg: 0 30px 70px rgba(14, 15, 20, .18);
  /* header: 96px on desktop, 84px on laptops, 70px on phones (the logo's heights are set with .logo-img below) */
  --hdr-h: 96px; --logo-h: 52px;
  --photo-overlay: linear-gradient(90deg, rgba(8, 9, 14, .9) 0%, rgba(8, 9, 14, .66) 50%, rgba(8, 9, 14, .36) 100%);
  --photo-eyebrow: var(--glow-soft);
  --photo-bg: var(--night);
  /* refined design tokens (31 October 2026): warm-white pages, white cards with a
     fine border, black bands, dark green eyebrows on light, gold as the accent */
  --paper: #f5f2eb; --card-line: #dfdcd7; --eyebrow: #1f5c42; --band: #062923; --band-card: #0c3931; --band-text: #c9cdc9;
  --notice: #f3e5c9; --ok-text: #1a6847; --radius-card: 14px; --radius-field: 8px;
}
@media (max-width: 1180px) { :root { --hdr-h: 84px; --logo-h: 48px; } }
@media (max-width: 760px) { :root { --hdr-h: 70px; --logo-h: 42px; } }
/* One left edge for the header, the hero's words and the sections (the refined design: one edge, 80px
   at 1440 with 1280px of content). The header and the hero run the full width with that edge as
   their margin, so the hero's words stay on the picture's dark wall at every width (the picture is
   anchored left and scales with the screen); sections centre at most 1280px inside it, so above
   1440 they sit further in while the hero keeps to its wall. From 1181px the edge grows with the
   screen only as fast as the header's row still fits beside it (1101px at 1181). */
@media (min-width: 761px) { :root { --gutter: clamp(24px, 4.5vw, 48px); } }
@media (min-width: 1181px) { :root { --wrap: 1280px; --gutter: clamp(24px, calc(18.5vw - 186px), 80px); } }

body { font-size: 17px; }
/* Plain, upright headings (the refined design): Playfair at its regular weight, each with its own full stop. */
h1, h2, h3 { font-weight: 500; letter-spacing: -.01em; }
/* (gold italic heading endings are gone; anything still marked up that way stays plain) */
h2 em, .phero h1 em { font-style: normal; font-weight: inherit; color: inherit; }
/* small capitals over a heading: dark green on light, gold on black */
.eyebrow { color: var(--eyebrow); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; }
:is(.band5, .cta5, .hcard-reg, .regband, .talk, .ftr) .eyebrow { color: var(--accent); }
/* a link on its own line ("Explore the area", "All news"): dark green, its arrow after it, underlined on hover */
.link { color: var(--eyebrow); font-weight: 700; text-decoration: none; }
.link:hover, .link:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.link svg.i { color: currentColor; }
:is(.band5, .cta5, .regband, .talk, .ftr) .link { color: var(--glow); }
/* dark surfaces get a gold focus ring */
:is(.hdr, .hero5, .band5, .cta5, .ftr, .mbar, .drawer-top, .talk, .regband, .hcard-reg, .llband) { --focus: var(--glow); }
:is(.search, .card-form, .contact-card, .book, .calc, .lp-form, .hdr .dd) { --focus: initial; }

/* buttons: 8px corners, flat, dark lettering on gold */
.btn { font-weight: 600; letter-spacing: .01em; transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s, filter .2s; }
.btn-accent { background: var(--gold-grad); color: var(--ink); box-shadow: none; }
.btn-accent:hover { filter: brightness(1.05); box-shadow: 0 8px 20px rgba(16, 18, 17, .16); }
.btn-primary { background: var(--band); color: #fff; box-shadow: none; }
.btn-primary:hover { background: #262a27; }
/* see-through dark with a thin gold edge: the hero's second button */
.btn-glass { background: rgba(10, 9, 8, .55); border: 1px solid rgba(201, 162, 74, .85); color: #fff; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.btn-glass:hover { background: rgba(10, 9, 8, .74); border-color: var(--glow); }
.btn-line { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn-line:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn-ghost { border-color: var(--field-line); }
.btn-ghost-inv:hover { background: #fff; color: var(--ink); }
@media (max-width: 760px) { .btn-sm { min-height: 44px; } }

/* ------------------------------------------------------------------ header */
/* No colour of its own, on any page, at any width, scrolled or not: no tint,
   no line, no shadow. It lies over the hero or the page and only its words
   change: light over dark sections and photos, charcoal over light ones.
   core.js sets .hdr-on-light from what is under it (the build sets it on
   pages that open light, for when scripts don't run); where one part of the
   header sits over something different from the rest (a dark photo beside
   light ones, a white field in a dark band), that part takes its own tone
   (.tone-light or .tone-dark on a menu item, the phone or the burger; the
   logo is the client's picture and is never recoloured). Once the page scrolls, an untinted frosted blur keeps the words
   behind it from fighting with the menu; where backdrop-filter isn't
   supported it simply stays clear. */
.hdr { background: transparent; color: var(--hl-strong); }
.hdr.is-scrolled { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
/* The header is a bar of the logo's own green on every page, so the logo sits on it with no box. */
.hdr.hdr-solid { background: #0d3326; box-shadow: inset 0 -1px 0 rgba(201, 162, 74, .3); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Scrolled back up, it comes back see-through: the page shows through a light green glass. */
.hdr.hdr-solid.is-scrolled { background: rgba(13, 51, 38, .66); box-shadow: none; -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); }
/* The two tones. Light: as the header has always been. Charcoal: at least
   4.5:1 on white and on the cream page heroes; the logo picture and the
   gold button stay as they are, the underline and hovers use the darker gold
   that reads on light, and the focus ring goes back to the charcoal one. */
.hdr, .hdr .tone-dark { --hl-text: rgba(255, 255, 255, .8); --hl-strong: #fff; --hl-arrow: #bfc0c4; --hl-icon: var(--glow); --hl-hover: var(--glow); --hl-line: var(--accent); --hl-ring: rgba(201, 162, 74, .5); --hl-fill: rgba(255, 255, 255, .05); --hl-tint: rgba(201, 162, 74, .14); --halo: 8, 9, 14; --focus: var(--glow); }
.hdr.hdr-on-light, .hdr .tone-light { --hl-text: rgba(14, 15, 20, .8); --hl-strong: var(--ink); --hl-arrow: #4a4b50; --hl-icon: var(--ink); --hl-hover: var(--acc-text); --hl-line: var(--acc-text); --hl-ring: rgba(14, 15, 20, .5); --hl-fill: transparent; --hl-tint: rgba(14, 15, 20, .06); --halo: 255, 255, 255; --focus: initial; }
/* the menus that drop down: a white card (the refined design), with the normal focus ring */
.hdr .dd { --focus: initial; }
.hdr-in { gap: 28px; }
.logo { color: #fff; }
.hdr .logo { flex: 0 1 auto; min-width: 0; color: var(--hl-strong); }
.nav { margin: 0 auto; }
.nav-list { gap: 0; }
/* The menu words are solid white or charcoal: a see-through colour shows its
   own halo through the letters (below), turns grey and loses the contrast
   the halo is there to give. Hover and the current page add the underline. */
.nav-link { position: relative; padding: 10px 13px; border-radius: 0; text-transform: uppercase; font-size: 12.5px; letter-spacing: .1em; font-weight: 600; color: var(--hl-strong); }
.has-dd .nav-link { padding-right: 2px; }
.nav-link::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 1px; background: var(--hl-line); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.has-dd .nav-link::after { right: 2px; }
.nav-link:hover::after, .nav-link[aria-current]::after { transform: scaleX(1); }
.nav-link:hover, .nav-link[aria-current] { color: var(--hl-strong); }
.dd-btn { color: var(--hl-arrow); padding-right: 10px; min-width: 28px; justify-content: center; }
.dd-btn:hover, .has-dd:hover .dd-btn { color: var(--hl-hover); }
.dd { top: calc(100% + 10px); min-width: 280px; padding: 8px; background: var(--surface); border: 1px solid var(--card-line); border-radius: 12px; box-shadow: 0 18px 40px rgba(16, 18, 17, .16); }
.dd a { padding: 10px 14px; border-radius: 8px; font-weight: 500; font-size: 15.5px; color: var(--ink); }
/* a long menu (the areas) in two columns */
.dd.dd-cols { column-count: 2; column-gap: 4px; min-width: 440px; }
.dd.dd-cols li { break-inside: avoid; }
.dd a:hover { background: var(--paper); color: var(--ink); }
/* the page you are on, in its menu and in the drawer: dark green, with a bar beside it in the menu */
.dd a[aria-current="page"] { color: var(--eyebrow); font-weight: 600; box-shadow: inset 3px 0 0 var(--eyebrow); }
.drawer-panel a[aria-current="page"] { color: var(--eyebrow); font-weight: 600; }
.hdr-cta { gap: 18px; }
.hdr-tel { font-weight: 600; font-size: 15px; color: var(--hl-strong); }
.hdr-tel svg.i { color: var(--hl-icon); }
.hdr-tel:hover { color: var(--hl-hover); }
/* WhatsApp: a round icon button beside the phone, on computers and tablets
   (phones have it in the bottom bar). It takes the header's tone like the rest. */
.hdr-wa { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--hl-ring); border-radius: 50%; color: var(--hl-icon); text-decoration: none; }
.hdr-wa svg.i { width: 20px; height: 20px; }
.hdr-wa:hover { background: var(--hl-tint); color: var(--hl-hover); }
@media (max-width: 760px) { .hdr-cta .hdr-wa { display: none; } }
.hdr .btn-primary { background: var(--gold-grad); color: var(--ink); box-shadow: none; }
/* Report a repair beside the free review: outlined in the header's own tone */
.hdr .hdr-fix { border: 1px solid var(--hl-ring); background: transparent; color: var(--hl-strong); box-shadow: none; gap: 8px; }
.hdr .hdr-fix svg.i { width: 17px; height: 17px; color: var(--hl-icon); }
.hdr .hdr-fix:hover { background: var(--hl-tint); color: var(--hl-hover); }
/* calls and WhatsApp: in the menu, the footer, the contact page and the phone bar (the header leads with the free review) */
.hdr-cta .hdr-tel, .hdr-cta .hdr-wa { display: none; }
.hdr-fix-t { display: inline-block; }
/* laptops: "Repair" beside the wrench, so the six menus fit; a round wrench button on the narrowest (still read out in full) */
@media (min-width: 1440px) and (max-width: 1599px) {
  .hdr .hdr-fix-x { display: none; }
  .hdr .hdr-fix-t::first-letter { text-transform: uppercase; }
  .hdr .nav-link { padding-left: 10px; }
}
@media (min-width: 1181px) and (max-width: 1439px) {
  .hdr .hdr-fix { width: 42px; height: 42px; min-height: 42px; padding: 0; justify-content: center; border-radius: 50%; }
  .hdr .hdr-fix-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 1181px) and (max-width: 1439px) {
  .hdr .nav-link { padding-left: 8px; }
  .hdr .dd-btn { padding-right: 4px; min-width: 22px; }
  .hdr .wrap.hdr-in { gap: 10px; }
  .hdr .hdr-cta { gap: 8px; }
}
.hdr .btn-primary:hover { background: var(--gold-grad); box-shadow: 0 8px 22px rgba(201, 162, 74, .3); }
.burger { background: var(--hl-fill); border: 1px solid var(--hl-ring); border-radius: 12px; color: var(--hl-strong); }
.burger:hover { background: var(--hl-tint); }
@media (max-width: 760px) { .burger { width: 44px; height: 44px; border-radius: 11px; } }
/* the words fade between the two tones rather than jumping */
.hdr :is(.nav-link, .dd-btn, .hdr-tel, .hdr-wa, .burger) { transition: color .2s, border-color .2s, background .2s; }
/* Where what is under a word is mixed (it straddles a white field and a dark
   band, a bright sky and a dark hero), the words and icons carry a soft halo
   of the opposite tone, close around each letter, so they still read at
   4.5:1. It belongs to the words, not the bar: over a plain section it can't
   be seen. */
.hdr :is(.nav-link, .hdr-tel) { text-shadow: 0 0 1px rgba(var(--halo), .9), 0 0 3px rgba(var(--halo), .8), 0 0 8px rgba(var(--halo), .55); }
.hdr :is(.dd-btn, .hdr-tel, .hdr-wa, .burger) svg.i { filter: drop-shadow(0 0 1px rgb(var(--halo))) drop-shadow(0 0 1px rgb(var(--halo))) drop-shadow(0 0 2px rgba(var(--halo), .8)) drop-shadow(0 0 5px rgba(var(--halo), .45)); }
/* Desktop: the logo never shrinks; the menu tightens on laptops and the phone
   number becomes a round call button there (still read out in full). */
@media (min-width: 1181px) {
  .hdr .logo { flex: none; }
  .hdr .wrap.hdr-in { max-width: none; gap: 18px; }
  .hdr-cta { gap: 12px; }
}
@media (min-width: 1181px) and (max-width: 1365px) {
  :root { --logo-h: 46px; }
  /* the five menu items keep their full size and spacing here too: the row still fits at 1181px */
  .hdr .wrap.hdr-in { gap: 14px; }
  .hdr-cta { gap: 10px; }
}
@media (min-width: 1181px) and (max-width: 1599px) {
  .hdr-cta .hdr-tel { width: 42px; height: 42px; justify-content: center; border: 1px solid var(--hl-ring); border-radius: 50%; }
  .hdr-cta .hdr-tel:hover { background: var(--hl-tint); }
  .hdr-cta .hdr-tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 1600px) { .hdr .wrap.hdr-in { gap: 28px; } .hdr-cta { gap: 20px; } }
/* the header runs the full width with the shared edge (above), as the hero under it does */
@media (min-width: 761px) { .hdr .wrap.hdr-in { max-width: none; } }
@media (max-width: 1180px) {
  .hdr-in { gap: 12px; }
  .hdr .logo { margin-right: auto; }
}
.hdr-compact .logo { margin-right: auto; }   /* the same when larger text makes the full header too wide (core.js) */
/* the landing page's header: logo and phone number only */
.hdr-min .hdr-tel { color: var(--hl-strong); }
@media (max-width: 380px) { .hdr-min .hdr-tel { border-color: var(--hl-ring); } }

/* Every page starts under the header, at every width. A hero takes the
   header's height as extra room at its top, so nothing in it is hidden; on
   phones, where a page's photo sits above its words, the photo starts below
   the header. Any darkening that keeps the header readable over a photo
   belongs to the hero: a scrim across its top, never a tint on the header. */
.top-photo main > section:first-child { margin-top: calc(var(--hdr-h) * -1); }
body:not(.top-photo) main > :is(.phero, .lp):first-child { margin-top: calc(var(--hdr-h) * -1); padding-top: calc(var(--hdr-h) + clamp(28px, 4.4vw, 60px)); }

/* The menu drawer (the refined design's phone navigation): a warm-white panel, a black
   bar with the logo and the close button, then "Book a viewing" and the three
   ways to talk to us (call, WhatsApp, the website assistant), then three white
   cards of links, each row at least 44px tall. */
.drawer-scrim { background: rgba(5, 6, 10, .62); }
.drawer-panel { width: min(420px, 100vw); padding: 0 0 calc(24px + env(safe-area-inset-bottom)); gap: 0; background: var(--paper); color: var(--ink); }
.drawer-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--hdr-h); padding: 10px 16px 10px 20px; background: var(--band); border-bottom: 1px solid rgba(201, 162, 74, .4); }
.drawer-top .logo { min-width: 0; flex: 0 1 auto; color: #fff; }
.drawer .icon-btn { flex: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(201, 162, 74, .55); background: transparent; color: #fff; }
.drawer .icon-btn:hover { background: rgba(201, 162, 74, .16); }
.drawer-go { display: grid; gap: 10px; padding: 18px 20px 6px; }
.drawer-go .btn-primary { background: var(--gold-grad); color: var(--ink); }
.drawer-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.drawer-act { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 64px; padding: 8px 4px; border: 1px solid var(--card-line); border-radius: 10px; background: var(--surface); color: var(--ink); font: 600 15px/1.2 var(--font-body); text-align: center; text-decoration: none; cursor: pointer; }
.drawer-act svg.i { width: 22px; height: 22px; color: var(--ink); }
.drawer-act.drawer-wa svg.i { color: #128c4b; }
.drawer-act:hover { border-color: var(--ink); }
.drawer-cards { display: grid; gap: 14px; padding: 14px 20px 0; }
.drawer-card { padding: 16px 20px 8px; border: 1px solid var(--card-line); border-radius: var(--radius-card); background: var(--surface); }
.drawer-card h2 { margin: 0 0 4px; font: 700 12.5px/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--eyebrow); }
.drawer-card li { display: flex; align-items: center; }
.drawer-card a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; color: var(--ink); font-size: 17px; font-weight: 500; text-decoration: none; }
.drawer-card a:hover { color: var(--eyebrow); text-decoration: underline; text-underline-offset: 4px; }
.drawer-pair { gap: 10px; }
.drawer-pair > span { color: var(--muted); }

/* ---------------------------------------------------------- the home hero */
/* The designer's hero: a picture of a warm, dark bedroom across the whole
   width, the heading on its dark wall at the left, and the two audiences'
   buttons stacked at the same width. The picture is decoration (an
   illustrative interior, not one of the houses). Two washes over it, both the
   hero's own: one across the top, so the header's white words always read,
   and one from the left, under the words. Phones get a portrait crop of the
   room's middle, darkened, with the words over its lower part and both
   buttons inside the first screen. */
.hero5 { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(620px, 56.25vw, 900px); padding: var(--hdr-h) 0 clamp(28px, 4vw, 56px); background: #130f0c; color: #fff; }
.hero5-bg, .hero5-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero5-bg { z-index: -2; }
.hero5-bg img { object-fit: cover; object-position: 0% 50%; }
.hero5::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 9, 8, .8) 0, rgba(10, 9, 8, .45) calc(var(--hdr-h) * 1.1), rgba(10, 9, 8, 0) calc(var(--hdr-h) * 1.9)),
              linear-gradient(90deg, rgba(14, 11, 8, .55) 0%, rgba(14, 11, 8, .35) 34%, rgba(14, 11, 8, 0) 52%); }
/* The words line up with the header's logo, at the shared edge, and keep to the dark wall as the
   designer set them (about 4.5% to 37.5% of the picture): the heading always breaks into its four
   lines (Student / Accommodation & / HMO Management / in Manchester) and the lead after "students.". */
.hero5-in { max-width: none; }
.hero5-text { width: 100%; }
.hero5-kicker { margin: 0 0 clamp(18px, 2.4vw, 34px); font: 500 clamp(12px, 1vw, 15px)/1.3 var(--font-body); letter-spacing: .42em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.hero5-kicker span { color: var(--glow); }
.hero5 h1 { max-width: 9.4em; margin: 0; font-size: clamp(42px, 3.95vw, 70px); line-height: 1.04; letter-spacing: -.012em; color: #fff; }
.hero5 h1 .nw { white-space: nowrap; }
.hero5-gold { color: var(--glow); }
.hero5 .lead { max-width: 22.4em; margin-top: clamp(16px, 1.8vw, 26px); font-size: clamp(18px, 1.45vw, 22px); line-height: 1.55; color: rgba(255, 255, 255, .92); }
.hero5 .actions { margin-top: clamp(26px, 3vw, 42px); }
.hero5 .hero5-go { display: grid; grid-template-columns: min(100%, clamp(440px, 30.6vw, 520px)); grid-auto-rows: 1fr; gap: 14px; }
.hero5-go .btn { min-height: 58px; padding: 12px 22px; font-size: clamp(17px, 1.3vw, 19px); font-weight: 600; }
/* tablets: the column is wider than the dark wall, so the wash under it is deeper */
@media (min-width: 761px) and (max-width: 1099px) {
  .hero5::before { background: linear-gradient(180deg, rgba(10, 9, 8, .8) 0, rgba(10, 9, 8, .45) calc(var(--hdr-h) * 1.1), rgba(10, 9, 8, 0) calc(var(--hdr-h) * 1.9)),
                               linear-gradient(90deg, rgba(14, 11, 8, .8) 0%, rgba(14, 11, 8, .62) 50%, rgba(14, 11, 8, 0) 78%); }
}
/* phones: a reflow, not the computer's picture made smaller */
@media (max-width: 760px) {
  .hero5 { align-items: flex-end; min-height: clamp(540px, calc(100svh - var(--mbar-h, 59px)), 860px); padding: calc(var(--hdr-h) + 20px) 0 26px; }
  .hero5-bg img { object-position: 50% 28%; }
  .hero5::before { background: linear-gradient(180deg, rgba(10, 9, 8, .82) 0%, rgba(10, 9, 8, .46) 20%, rgba(10, 9, 8, .52) 40%, rgba(10, 9, 8, .86) 62%, rgba(10, 9, 8, .94) 100%); }
  .hero5-text { width: 100%; }
  /* the small capitals sit over the brass lamp on the narrowest phones: a close dark halo keeps them at 4.5:1 */
  .hero5-kicker { letter-spacing: .36em; font-size: 12.5px; text-shadow: 0 0 1px rgba(10, 9, 8, .95), 0 0 3px rgba(10, 9, 8, .9), 0 0 8px rgba(10, 9, 8, .7); }
  .hero5 h1 { font-size: clamp(32px, 9.6vw, 44px); line-height: 1.08; }
  .hero5 .lead { font-size: 17px; max-width: 24em; }
  .hero5 .hero5-go { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hero5-go .btn { min-height: 52px; font-size: 16px; }
}
@media (max-width: 359px) { .hero5 h1 .nw { white-space: normal; } }
/* short phone screens (an iPhone SE in Safari, 375 x 548): no fixed floor and a tighter stack, so both
   buttons still end above the phone bar */
@media (max-width: 760px) and (max-height: 620px) {
  .hero5 { min-height: calc(100svh - var(--mbar-h, 59px) - env(safe-area-inset-bottom)); padding: calc(var(--hdr-h) + 8px) 0 16px; }
  .hero5-kicker { margin-bottom: 12px; }
  .hero5 h1 { font-size: clamp(28px, 8vw, 32px); }
  .hero5 .lead { margin-top: 10px; font-size: 16px; line-height: 1.5; }
  .hero5 .actions { margin-top: 16px; }
  .hero5 .hero5-go { gap: 10px; }
  .hero5-go .btn { min-height: 48px; }
}
/* large phones on their side and small tablets: the buttons keep the computer's width, not the screen's */
@media (min-width: 560px) and (max-width: 760px) { .hero5 .hero5-go { grid-template-columns: min(100%, 440px); } }

/* ------------------------------------------------------------ home sections */
/* the search, under the hero */
.search5 .sec-head { margin-bottom: 26px; }
/* the landlords' services: a dark band over a darkened photo, with four dark cards, each a link to its page */
.band5 { position: relative; isolation: isolate; overflow: hidden; background: var(--band); color: var(--band-text); }
/* Manchester at night behind the landlords' band, darkened so the words and
   cards read as before; darkest on the left, where the heading is. */
.band5-bg, .band5-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.band5-bg { z-index: -2; }
.band5-bg img { object-fit: cover; object-position: 50% 35%; }
@media (forced-colors: active) { .band5-bg { display: none; } }
.band5::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 41, 35, .94) 0%, rgba(6, 41, 35, .84) 45%, rgba(6, 41, 35, .62) 100%); }
.band5 h2 { color: #fff; }
.band5 .sec-lead { color: var(--band-text); }
.dcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.dcards li { display: flex; }
.dcard { display: grid; align-content: start; gap: 10px; width: 100%; padding: 24px 24px 26px; border: 1px solid transparent; border-radius: var(--radius-card); background: var(--band-card); color: var(--band-text); text-decoration: none; transition: border-color .2s, transform .2s; }
.band5 .dcard { background: rgba(12, 57, 49, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dcards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .dcards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dcard h3 { color: #fff; font-size: clamp(22px, 2vw, 26px); line-height: 1.2; }
.dcard p { font-size: 16px; line-height: 1.5; }
.dcard:hover, .dcard:focus-visible { border-color: var(--accent); }
@media (hover: hover) { .dcard:hover { transform: translateY(-3px); } }
.band5-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(28px, 3vw, 40px); }
.band5-go p { color: var(--band-text); font-size: 16px; }
.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Homepage: the two ways in (landlords first), each over a Manchester photo */
.paths5-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.path5 { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-height: clamp(340px, 32vw, 460px); overflow: hidden; border-radius: var(--radius-card); background: var(--band); color: #fff; text-align: center; text-decoration: none; }
.path5-img, .path5-img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.path5-img { z-index: -2; }
.path5-img img { object-fit: cover; transition: transform .6s ease; }
.path5::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(6, 41, 35, .66); }
.path5-st::before { background: rgba(9, 47, 40, .66); }
/* the audience word fills the tile, in the middle; the rest sits under it */
.path5-in { display: grid; justify-items: center; gap: 10px; width: 100%; padding: clamp(24px, 3vw, 40px); }
.path5-k { font-family: var(--font-display); font-size: clamp(52px, 7vw, 104px); line-height: 1; letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.path5-h { font-family: var(--font-display); font-size: clamp(20px, 1.9vw, 27px); line-height: 1.2; color: var(--glow); }
.path5-p { max-width: 460px; color: rgba(255, 255, 255, .9); font-size: 16px; line-height: 1.55; }
.path5-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 700; color: var(--glow); }
.path5-go svg.i { width: 18px; height: 18px; }
@media (hover: hover) { .path5:hover .path5-img img { transform: scale(1.04); } }
.path5:focus-visible { outline: 3px solid var(--glow); outline-offset: 3px; }
@media (max-width: 860px) { .paths5-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } .path5 { min-height: 320px; } .path5-k { font-size: clamp(48px, 15vw, 72px); } }
@media (prefers-reduced-motion: reduce) { .path5-img img { transition: none; } }
/* Homepage: what a landlord gets, under the hero's buttons */
.hero5-ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 20px 0 0; padding: 0; list-style: none; color: rgba(255, 255, 255, .9); font-size: 15px; font-weight: 500; }
.hero5-ticks li { display: inline-flex; align-items: center; gap: 8px; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.hero5-ticks svg.i { width: 17px; height: 17px; color: var(--glow); flex: none; }
@media (max-width: 760px) { .hero5-ticks { flex-direction: column; gap: 6px; font-size: 14.5px; } }
/* Homepage: why landlords choose us, beside the review form */
.llwhy5 { display: grid; gap: 16px; margin: 22px 0 0; padding: 0; list-style: none; }
.llwhy5 li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; }
.llwhy5 svg.i { width: 22px; height: 22px; margin-top: 2px; padding: 3px; border-radius: 50%; background: var(--band); color: var(--glow); }
.llwhy5 b { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.llwhy5 span { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
/* Homepage: the search folded into the featured homes */
.feat5-search { margin: 0 0 28px; }
/* Homepage: Google reviews, with Google's own "G" */
.greviews5-in { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--card-line); border-radius: var(--radius-card); background: var(--surface); }
.greviews5-logo { display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(16, 18, 17, .12); }
.greviews5-logo .g-logo { width: 38px; height: 38px; }
.greviews5-text { flex: 1 1 320px; }
.greviews5 h2 { font-size: clamp(26px, 2.6vw, 36px); margin: 4px 0 6px; }
.greviews5 p:not(.eyebrow) { color: var(--ink-2); font-size: 16px; }
.greviews5-btn { gap: 10px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; box-shadow: 0 1px 3px rgba(16, 18, 17, .12); font-weight: 600; }
.greviews5-btn:hover { background: #f8f9fa; border-color: #c6c8cc; }
.greviews5-btn .g-logo { width: 20px; height: 20px; flex: none; }
@media (max-width: 640px) { .greviews5-btn { width: 100%; justify-content: center; } .greviews5-logo { width: 60px; height: 60px; } .greviews5-logo .g-logo { width: 32px; height: 32px; } }
/* Homepage: the tenants' repair strip */
.fix5 { background: #062923; color: rgba(255, 255, 255, .86); padding: clamp(28px, 3vw, 40px) 0; }
.fix5-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.fix5 .eyebrow { color: var(--glow); }
.fix5 h2 { color: #fff; font-size: clamp(24px, 2.4vw, 32px); margin: 4px 0 6px; }
.fix5 p { max-width: 640px; font-size: 16px; }
.fix5 a:not(.btn) { color: var(--glow); font-weight: 600; }
.fix5-go { display: flex; flex-wrap: wrap; gap: 12px; }
.fix5-go .btn svg.i { width: 18px; height: 18px; }
@media (max-width: 640px) { .fix5-go { width: 100%; flex-direction: column; } .fix5-go .btn { width: 100%; } }
@media (max-width: 860px) { .steps-3 { grid-template-columns: minmax(0, 1fr); } }
.band5-ticks { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 18px 0 0; padding: 0; list-style: none; color: #fff; font-size: 15.5px; font-weight: 500; }
.band5-ticks li { display: inline-flex; align-items: center; gap: 8px; }
.band5-ticks svg.i { width: 18px; height: 18px; color: var(--glow); flex: none; }
.drawer-go .drawer-review { margin-top: 0; gap: 8px; }
.drawer-go .drawer-review svg.i { width: 18px; height: 18px; }
/* why choose us: four short columns, each under a fine gold rule */
.why5-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.why5-cols li { padding-top: 22px; border-top: 1px solid var(--accent); }
.why5-cols h3 { margin-bottom: 8px; font-size: 22px; line-height: 1.25; }
.why5-cols p { color: var(--muted); font-size: 16px; line-height: 1.55; }
.why5-cols a { color: var(--eyebrow); font-weight: 600; text-underline-offset: 3px; }
/* the renting guide: five numbered steps, each with where to read more */
.journey5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.journey5 li { display: grid; align-content: start; gap: 8px; }
.journey5-n { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%; background: var(--band); color: var(--glow); font: 700 16px/1 var(--font-body); }
.journey5 h3 { font-size: 24px; line-height: 1.2; }
.journey5 p { color: var(--muted); font-size: 16px; line-height: 1.5; }
.journey5 .link { width: fit-content; margin-top: 2px; font-size: 15.5px; }
/* a link whose words wrap keeps its arrow after the last word */
@media (min-width: 761px) { .journey5 .link { display: block; max-width: 100%; } .journey5 .link svg.i { display: inline-block; vertical-align: -3px; margin-left: 6px; } }
/* text cards (the areas, news and advice): white, a fine border, the whole card one link */
.tcards { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.tcards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tcards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tcards li { display: flex; }
.tcard { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 22px 24px 20px; border: 1px solid var(--card-line); border-radius: var(--radius-card); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .25s, transform .25s, box-shadow .25s; }
.tcard h3 { font-size: clamp(22px, 2vw, 26px); line-height: 1.22; }
.tcard p { color: var(--muted); font-size: 16px; line-height: 1.5; }
.tcard .tcard-k { color: var(--eyebrow); font: 700 12.5px/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.tcard-post h3 { margin-top: 4px; }
.tcard-post p:not(.tcard-k) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcard-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; color: var(--eyebrow); font-size: 15.5px; font-weight: 700; }
.tcard-go svg.i { width: 17px; height: 17px; }
.tcard:focus-visible .tcard-go { text-decoration: underline; }
@media (hover: hover) { .tcard:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16, 18, 17, .08); } .tcard:hover .tcard-go { text-decoration: underline; text-underline-offset: 4px; } }
.more-areas { margin-top: 26px; color: var(--muted); font-size: 16px; }
.more-areas a { color: var(--eyebrow); font-weight: 600; text-underline-offset: 3px; }
/* the four questions */
.faq5 .faq { max-width: none; }
.faq5-note { margin-top: 18px; }
/* the closing band: black, the heading in white, two gold buttons and the landlords' line in gold */
.cta5 { background: var(--band); color: var(--band-text); padding: clamp(56px, 6vw, 88px) 0 clamp(48px, 5vw, 72px); }
.cta5 h2 { color: #fff; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; }
.cta5-lead { max-width: 640px; margin-top: 14px; font-size: 18px; color: var(--band-text); }
.cta5-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(26px, 3vw, 34px); }
.cta5-go .btn { min-width: 230px; }
.cta5-wa svg.i { color: #fff; }
.cta5 .cta5-ll { color: var(--glow); font-weight: 500; font-size: 17px; }

/* The landlords page's areas (llAreas): one card each, linked by what its page is. */
.areas5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.areas5 li { display: flex; }
.areas5 a { position: relative; display: grid; align-content: start; gap: 8px; width: 100%; padding: 22px 20px 70px; border: 1px solid var(--card-line); border-radius: var(--radius-card); background: #fff; color: var(--ink); text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; }
.areas5-pc { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--eyebrow); }
.areas5 b { font-family: var(--font-display); font-size: 21px; font-weight: 500; line-height: 1.2; }
.areas5 small { color: var(--muted); font-size: 15.5px; line-height: 1.45; }
.areas5-go { position: absolute; left: 20px; bottom: 20px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--card-line); border-radius: 50%; color: var(--eyebrow); transition: background .25s, color .25s, border-color .25s; }
.areas5-go svg.i { width: 17px; height: 17px; }
@media (hover: hover) { .areas5 a:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16, 18, 17, .08); border-color: var(--accent); } .areas5 a:hover .areas5-go { background: var(--accent); border-color: transparent; color: var(--ink); } }
@media (max-width: 1100px) { .areas5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .areas5 li { grid-column: span 2; } .areas5 li:nth-child(n + 4) { grid-column: span 3; } }
@media (max-width: 640px) {
  .areas5 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .areas5 li, .areas5 li:nth-child(n + 4) { grid-column: auto; }
  .areas5 a { grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 4px; padding: 16px 16px 16px 18px; }
  .areas5 a > :not(.areas5-go) { grid-column: 1; }
  .areas5-go { position: static; grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .areas5 b { font-size: 19px; }
}
/* An area page's line for landlords, under the title's buttons; on phones it
   wraps, and its arrow follows the last word. */
@media (max-width: 760px) { .phero-ll .link { display: block; width: fit-content; min-height: 44px; padding: 10px 0; } .phero-ll .link svg.i { margin-left: 2px; } }

/* ---------------------------------------------------------- shared pieces */
.sec-head h2 { max-width: 960px; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; }
.sec-lead { max-width: 860px; color: var(--muted); }
/* listing cards (components.css): no resting shadow; a real pointer lifts them a little */
@media (hover: hover) { .hcard:not(.hcard-reg):hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16, 18, 17, .08); } }
.hcard-title { font-weight: 500; }
.hcard-cta { background: var(--band); box-shadow: none; }
/* the card's frame is the shape of the listings' photos (4:3), so they fill it; others are shown whole over their blurred copy */
.hcard-media { aspect-ratio: 4 / 3; }
/* three cards to a row in the 1280px content (two on tablets), as the refined design sets them */
.cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.hcard-cta:hover { background: #262a27; }
.hcard-zd { background: #f6ecd2; }
.hcard-reg { background: var(--band); color: var(--band-text); }
/* beside listing cards it is as tall as they are: its words at the top, its button on the cards' "View property" row */
.hcard-reg .hcard-reg-in { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: 12px; padding: 26px 14px 4px; }
.hcard-reg .hcard-reg-in > .btn { width: 100%; margin-top: auto; }
.hcard-reg .hcard-reg-in > p:not(.eyebrow) { margin-bottom: 12px; }
.hcard-reg h3 { font-weight: 500; }
.hcard-reg .eyebrow { color: var(--accent); }
.review { border: 1px solid var(--card-line); border-radius: var(--radius-card); background: #fff; }
.review blockquote { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.45; }
.stars svg.i { color: #b7791f; }
/* The homepage's reviews (refined design 07), once staff publish a genuine one: one white panel, students' then landlords'. */
.rv-panel { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--card-line); border-radius: var(--radius-card); background: var(--surface); }
.rv-panel .review { border-color: var(--card-line); background: var(--paper); }
.rv-panel h3 { margin: 0 0 18px; font: 700 13px/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--eyebrow); }
.rv-panel .rv-grid + h3 { margin-top: clamp(28px, 4vw, 40px); }
.rv-home .rv-google { margin-top: 20px; }
/* Questions and answers, everywhere (the refined design): flat rows between fine rules, the question in Playfair, a green plus. */
.faq { gap: 0; border-top: 1px solid var(--card-line); }
.faq details, .faq details[open] { padding: 0; border: 0; border-bottom: 1px solid var(--card-line); border-radius: 0; background: transparent; box-shadow: none; }
.faq summary { min-height: 60px; padding: 16px 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.6vw, 21px); line-height: 1.3; }
.faq-i { color: var(--eyebrow); }
.faq details p { max-width: 72ch; padding: 0 0 22px; color: var(--ink-2); }
.area b { font-family: var(--font-display); font-size: 26px; }
.area-n { font-family: var(--font-display); font-style: italic; color: var(--acc-text); }
.steps li { border-radius: var(--radius); }
.step-n { color: var(--acc-text); }
.service-i { background: #f6ecd2; color: var(--acc-text); }
.rrbox dl div { border-color: var(--accent); }
.sf-progress span.on { background: var(--accent); }
.apply-band { background: #f6ecd2; }
.mpin-house { background: var(--ink); color: #fff; }
.mpin-office { background: var(--accent); color: var(--ink); }
.leaflet-tile-pane { filter: saturate(.45) contrast(1.03); }
.llband { background: var(--night); color: rgba(255, 255, 255, .8); }
.llband h2 { color: #fff; }
.llband .eyebrow { color: var(--glow-soft); }
.ll-services a { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #fff; }
.ll-services a:hover { background: rgba(255, 255, 255, .12); }
.ll-services svg.i { color: var(--glow); }
.llband-stat { background: var(--accent); color: var(--ink); }
.office-media .map { min-height: 340px; border-radius: var(--radius-lg); }

/* register: a black panel, like the refined design's dark bands */
.regband { background: var(--band); color: var(--band-text); border-radius: var(--radius-card); }
.regband h2 { color: #fff; }
.regband .eyebrow { color: var(--glow-soft); }
.regband .link { color: #fff; }
.regband .fld > span { color: rgba(255, 255, 255, .82); }
.regband .fld input, .regband .fld select { border-color: transparent; }
.regform .btn-primary { background: var(--gold-grad); color: var(--ink); box-shadow: none; }
.regband .fine, .regband .fine a { color: rgba(255, 255, 255, .74); }
.regband .fine a { text-decoration: underline; text-underline-offset: 3px; }
.regband-more .link { display: inline; }
.regband-more .link svg.i { display: inline-block; vertical-align: -3px; margin-left: 4px; }
/* Light sections are all warm white now, separated by space only: two in a
   row share one gap, not two. The black bands (the landlords' services, the
   registration page's form) are backgrounds of their own. */
.sec:not(.band5):not(.sec-night) + .sec:not(.band5):not(.sec-night) { padding-top: 0; }
/* ...and the same across an empty reviews placeholder (hidden until a review is published), so the page is laid out as if it weren't there. */
.sec:not(.band5):not(.sec-night) + [data-rv-slot][hidden] + .sec:not(.band5):not(.sec-night) { padding-top: 0; }

/* Page titles (the refined design's 03, 05-10): type-only on the warm-white
   page: small crumbs, the dark-green capitals, a plain Playfair heading and
   its sentence in grey, then straight into the page. An area page keeps the
   area's photo, framed beside the words on computers (whole, never cut),
   with the area's facts under it; phones leave the photo out. */
.phero { background: transparent; border: 0; padding-bottom: 0; }
/* an area page's heading beside its photo always breaks before the area's name ("Student houses in /
   Fallowfield."), whatever font is showing, so the words under it never move when the real font arrives */
.phero-has-media h1 { max-width: 9.5em; }
/* a house page starts at the same height as every other inner page's title */
body.pg-house .house-wrap { padding-top: clamp(28px, 4.4vw, 60px); }
.phero .crumbs { margin-bottom: 14px; font-size: 14.5px; }
.phero h1 { max-width: 20em; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.06; }
.phero .lead { max-width: 46em; margin-top: clamp(12px, 1.4vw, 18px); font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.55; color: var(--muted); }
.phero .actions { margin-top: clamp(20px, 2.4vw, 28px); }
.phero .actions .btn-primary { background: var(--gold-grad); color: var(--ink); }
.phero .actions .btn-primary:hover { filter: brightness(1.05); }
/* the section after a title starts close under it, as the refined design draws it */
main > .phero + .sec, main > .phero + [data-rv-slot][hidden] + .sec { padding-top: clamp(28px, 3.4vw, 48px); }
@media (min-width: 901px) { .phero-has-media .phero-in { grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); align-items: center; } }
.phero-frame { margin: 0; overflow: hidden; border: 1px solid var(--card-line); border-radius: var(--radius-card); background: var(--surface); }
.phero-frame img { display: block; width: 100%; }
@media (max-width: 900px) { .phero-has-media .phero-media { display: none; } }
/* an area page's three facts, under its title: one white card, three columns (one under another on phones) */
.phero-text .area-facts { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin-top: clamp(24px, 2.6vw, 32px); border: 1px solid var(--card-line); border-radius: var(--radius-card); background: var(--surface); }
.phero-text .area-facts div { padding: 14px 18px; border: 0; border-radius: 0; background: transparent; }
.phero-text .area-facts div + div { border-left: 1px solid var(--card-line); }
.phero-text .area-facts small { font-size: 12px; letter-spacing: .08em; color: var(--eyebrow); }
.phero-text .area-facts b { font-size: 20px; font-weight: 500; }
@media (max-width: 560px) {
  .phero-text .area-facts { grid-template-columns: minmax(0, 1fr); }
  .phero-text .area-facts div + div { border-left: 0; border-top: 1px solid var(--card-line); }
}

/* The footer (the refined design's 12): a plain black band. The tenants' card first,
   then the brand and the link lists, "Speak to us", the certificates and the
   legal line. On phones: the brand, then "Speak to us", then the three lists
   folded (core.js), every row 44px tall. */
.ftr { position: relative; background: var(--band); color: var(--band-text); padding-top: 0; }
.ftr .wrap { position: relative; padding-top: clamp(40px, 5vw, 64px); }
.ftr-min .wrap { padding-top: 0; }
.ftr .tstrip { margin-bottom: clamp(40px, 5vw, 60px); }
.ftr-grid { font-size: 16.5px; gap: 40px 32px; grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr)) 1.7fr; }
.ftr-grid p, .ftr-grid address, .ftr-grid li, .ftr-grid dd, .ftr-grid dt { font-size: 16.5px; line-height: 1.55; }
.ftr-grid ul { display: grid; gap: 8px; }
.ftr h2 { margin-bottom: 16px; font: 700 12.5px/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ftr-sub { margin: 18px 0 8px; font: 700 12.5px/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ftr-contact a { font-size: 16.5px; overflow-wrap: normal; }
/* the numbers never split; the email breaks only after its @ (its two parts are each kept whole) */
.ftr-contact a[href^="tel:"], .ftr-contact a[href*="wa.me/"] { white-space: nowrap; }
.ftr-contact .em { min-width: 0; }
.ftr-contact .em-part { display: inline-block; }
.ftr-contact svg.i { color: var(--glow); }
.ftr-note { margin: 14px 0 8px; font-size: 15px; opacity: 1; color: var(--band-text); }
.ftr-ask { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid rgba(201, 162, 74, .6); border-radius: var(--radius-btn); background: transparent; color: #fff; font: 600 15.5px/1.2 var(--font-body); }
.ftr-ask svg.i { width: 18px; height: 18px; color: var(--glow); }
.ftr-ask:hover { border-color: var(--glow); background: rgba(201, 162, 74, .12); }
.ftr-legal { margin-top: 48px; padding-top: 24px; font-size: 14.5px; border-top: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .66); }
.ftr-badges svg.i { color: var(--glow); }
.ftr a, .ftr-cookies { color: rgba(255, 255, 255, .86); }
.ftr a:hover, .ftr-cookies:hover { color: #fff; }
.ftr .logo { color: #fff; display: block; width: max-content; max-width: 100%; margin-bottom: 22px; }
.ftr .logo-img { height: 88px; }
/* Tablets: the brand across the top, the three lists side by side, then "Speak to us" across a row of
   its own in three columns (the phone, WhatsApp and email; the hours; the assistant and the links), so
   nothing in it has to break. */
@media (min-width: 761px) and (max-width: 1180px) {
  .ftr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftr-brand { grid-column: 1 / -1; }
  .ftr-office { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 32px; align-items: start; }
  .ftr-office > h2 { grid-column: 1 / -1; }
  .ftr-office .ftr-sub, .ftr-office .ftr-note { margin-top: 0; }
  .ftr-office .ftr-more { margin-top: 14px; }
}
/* the tenants' card at the top of the footer */
.ftr .tstrip h2 { margin: 0; font: 500 clamp(24px, 2.4vw, 30px)/1.2 var(--font-display); letter-spacing: -.005em; text-transform: none; color: #fff; }
.ftr .tstrip p { color: var(--band-text); font-size: 16px; }
.ftr .tstrip p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ftr .tstrip-go { color: var(--glow); }
.ftr .tstrip-tel { color: #fff; }
.ftr .tstrip-tel svg.i { color: var(--glow); }
@media (max-width: 760px) {
  .ftr .wrap { padding-top: 32px; }
  .ftr-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ftr-brand { padding-bottom: 18px; }
  .ftr-brand .logo { margin-bottom: 14px; }
  .ftr .ftr-brand .logo-img { height: 72px; }
  .ftr-brand p, .ftr-brand address { max-width: 36ch; margin: 0 0 6px; }
  .ftr-brand { order: -2; }
  .ftr-office { order: -1; padding: 4px 0 22px; }
  .ftr-col { border-top: 1px solid rgba(255, 255, 255, .12); }
  .ftr-col:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .ftr-col > summary { min-height: 52px; }
  .ftr-col > summary h2 { margin: 0; }
  .ftr-col ul { padding-bottom: 10px; }
  .ftr .ftr-grid ul { gap: 0; }
  .ftr .ftr-grid li { margin: 0; }
  .ftr .ftr-grid :is(li, p, address, dd, dt) { font-size: 16px; line-height: 1.45; }
  .ftr .ftr-grid ul a, .ftr-contact a { display: flex; align-items: center; min-height: 44px; }
  .ftr-contact { gap: 0; }
  .ftr-office .ftr-hours { grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; }
  .ftr-office .ftr-hours dd { margin: 0; }
  .ftr .ftr-badges { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 22px; padding-top: 14px; }
  .ftr .ftr-badges a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; font-size: 14.5px; }
  .ftr .ftr-grid ul.ftr-more li { display: flex; align-items: center; }
  .ftr .ftr-legal, .ftr .ftr-badges + .ftr-legal { margin-top: 16px; padding-top: 14px; font-size: 14px; line-height: 1.45; gap: 0 18px; }
  .ftr .ftr-legal :is(a, .ftr-cookies) { display: inline-flex; align-items: center; min-height: 44px; }
  .ftr .ftr-legal > span:first-child { font-size: 13.5px; padding-bottom: 6px; }
}

/* ------------------------------------------------------------ phone bar */
/* Black with a fine gold line: WhatsApp, Report a repair, the website assistant
   and one main action, each 44px tall. It stays clear of the page: the footer runs on
   behind it with room at its end, safe areas included. */
@media (max-width: 760px) {
  .mbar.mbar-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px; padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); background: var(--band); -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid rgba(201, 162, 74, .55); box-shadow: 0 -12px 30px rgba(0, 0, 0, .22); }
  .mbar.mbar-1 { grid-template-columns: minmax(0, 1fr); }
  .mbar a { min-height: 44px; padding: 0 12px; gap: 8px; border-radius: 10px; font-size: 16px; font-weight: 700; white-space: nowrap; }
  .mbar .mbar-wa { width: auto; border: 1px solid rgba(255, 255, 255, .16); background: var(--band-card); color: #fff; }
  .mbar .mbar-wa svg.i { width: 22px; height: 22px; color: #3ddc84; }
  .mbar .mbar-wa:active { background: #2a332d; }
  .mbar a.mbar-main { background: var(--gold-grad); color: var(--ink); }
  .mbar a.mbar-main svg.i { width: 18px; height: 18px; }
  /* Report a repair and the website assistant: round buttons beside WhatsApp,
     which then shows as its round green icon, so the main action keeps its words. */
  .mbar.mbar-4 { grid-template-columns: 44px 44px 44px minmax(0, 1fr); }
  .mbar.mbar-4 .mbar-wa, .mbar .mbar-fix, .mbar .mbar-ai { display: inline-grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; }
  .mbar.mbar-4 .mbar-wa { background: #25d366; }
  .mbar.mbar-4 .mbar-wa svg.i { color: #fff; }
  .mbar.mbar-4 .mbar-wa:active { background: #1fb457; }
  .mbar .mbar-fix, .mbar .mbar-ai { background: #fff; color: var(--ink); cursor: pointer; }
  .mbar .mbar-fix svg.i, .mbar .mbar-ai svg.i { width: 20px; height: 20px; }
  .mbar .mbar-fix:active, .mbar .mbar-ai:active { background: #ece6da; }
  /* The footer itself runs on behind the bar, so no strip shows between them. */
  body.v5:has(> .mbar) { padding-bottom: 0; }
  :root { --mbar-h: 59px; }   /* the phone bar's height, for what sits just above it (the houses filters' Show row, the hero) */
  body.v5:has(> .mbar) > .ftr > .wrap { padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 359px) { .mbar.mbar-2 { padding-left: 10px; padding-right: 10px; gap: 6px; } .mbar a { padding: 0 8px; font-size: 15px; } .mbar.mbar-4 a.mbar-main svg.i { display: none; } }

/* The floating buttons, always in sight (no hiding on the first screen or while scrolling):
   - computers: bottom right, "Book a Free Professional Rental Valuation" (gold, valFab in the
     generator) above "Ask the agent" (charcoal and gold, it opens the chat) and WhatsApp;
   - phones: just above the bottom bar (the bar is unchanged): "Free Valuation" on the left,
     "Ask the agent" on the right (WhatsApp is in the bar).
   Hidden while the chat (the valuation button; the agent button stays to close it on computers),
   the menu or the houses filters are open; the valuation button also steps aside while something
   with keyboard focus is under it (.is-clear, core.js). The footer ends with room for them. */
body.v5 .fabs { opacity: 1; visibility: visible; transform: none; flex-direction: row; align-items: center; gap: 10px; transition: none; }
body.v5 .fab-ai { display: inline-flex; gap: 10px; width: auto; min-width: 0; height: 52px; padding: 0 22px 0 18px; font-size: 15px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
body.v5 .fab-ai svg.i { width: 20px; height: 20px; flex: none; }
body.v5 .fab-ai span, body.v5.asst-open .fabs .fab-ai span { position: static; display: inline; transform: none; padding: 0; background: none; color: inherit; font-size: inherit; opacity: 1; pointer-events: none; }
body.v5 .fab-ai:focus-visible { outline: 3px solid var(--glow); outline-offset: 3px; }
.valfab { position: fixed; right: 20px; bottom: 82px; z-index: 89; display: inline-flex; align-items: center; gap: 10px; max-width: calc(100vw - 40px); height: 48px; padding: 0 22px 0 18px; border-radius: 999px; background: var(--gold-grad); color: #0d3326; font-weight: 800; font-size: 15px; line-height: 1.2; white-space: nowrap; text-decoration: none; box-shadow: 0 10px 26px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(13, 51, 38, .2); transition: transform .2s; }
.valfab svg.i { width: 20px; height: 20px; flex: none; }
.valfab-s { display: none; }
.valfab:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(13, 51, 38, .2); }
.valfab:focus-visible { outline: 3px solid #0d3326; outline-offset: 3px; box-shadow: 0 0 0 6px var(--glow), 0 10px 26px rgba(0, 0, 0, .28); }
.valfab.is-clear, .asst-open .valfab, .no-scroll .valfab, body:has(.consent:not([hidden])) .valfab { visibility: hidden; opacity: 0; }
.no-scroll .fabs { visibility: hidden; }
@media (min-width: 761px) {
  /* the chat opens above "Ask the agent", where the valuation button was */
  body.v5 .fabs ~ .asst { bottom: 84px; height: min(600px, calc(100vh - 108px)); }
  body.v5 > .ftr > .wrap { padding-bottom: 140px; }
}
@media (max-width: 760px) {
  body.v5 .mbar ~ .fabs { display: flex; right: 12px; bottom: calc(var(--mbar-h, 59px) + 10px + env(safe-area-inset-bottom)); }
  body.v5 .mbar ~ .fabs .fab-wa { display: none; }
  body.v5 .fab-ai, .valfab { height: 44px; gap: 8px; padding: 0 16px 0 13px; font-size: 15px; }
  body.v5 .fab-ai svg.i, .valfab svg.i { width: 18px; height: 18px; }
  .valfab { left: 12px; right: auto; bottom: calc(var(--mbar-h, 59px) + 10px + env(safe-area-inset-bottom)); max-width: calc(50vw - 18px); }
  .valfab-l { display: none; }
  .valfab-s { display: inline; }
  body.v5.asst-open .mbar ~ .fabs, body:has(.filters.is-open) .valfab, body:has(.filters.is-open) .fabs { visibility: hidden; }
  body.v5:has(> .mbar) > .ftr > .wrap { padding-bottom: calc(126px + env(safe-area-inset-bottom)) !important; }
  /* the homepage's first screen ends above the floating buttons, so they never cover its own
     buttons: its "Free Rental Valuation" goes (the floating "Free Valuation" is the same link) */
  body.v5:has(> .valfab) .hero5-val { display: none; }
  body.v5:has(> .mbar) .hero5 { min-height: clamp(480px, calc(100svh - var(--mbar-h, 59px) - 54px), 860px); }
}
@media (max-width: 760px) and (max-height: 620px) {
  body.v5:has(> .mbar) .hero5 { min-height: calc(100svh - var(--mbar-h, 59px) - 54px - env(safe-area-inset-bottom)); }
}
@media (max-width: 359px) { body.v5 .fab-ai svg.i, .valfab svg.i { display: none; } body.v5 .fab-ai, .valfab { padding: 0 13px; } }
@media (prefers-reduced-motion: reduce) { .valfab { transition: none !important; } }
@media print { .valfab, .fabs { display: none !important; } }

/* corner buttons (desktop, and phones on the landing page): charcoal and gold chat, green WhatsApp */
.fab-ai { background: var(--night); color: var(--glow); box-shadow: 0 10px 26px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(201, 162, 74, .55); }
.fab-ai span { background: var(--night); }

/* ------------------------------------------------------------------ phones */
@media (max-width: 1000px) {
  .why5-cols, .tcards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the steps one under another, the number beside each */
  .journey5 { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .journey5 li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; }
  .journey5-n { grid-row: 1 / span 3; margin: 0; }
  .journey5 li > :not(.journey5-n) { grid-column: 2; }
}
@media (max-width: 860px) { .dcards { grid-template-columns: minmax(0, 1fr); gap: 14px; } .band5::before { background: linear-gradient(180deg, rgba(6, 41, 35, .88) 0%, rgba(6, 41, 35, .78) 40%, rgba(6, 41, 35, .66) 100%); } .band5-bg img { object-position: 30% 50%; } }
@media (max-width: 640px) {
  .why5-cols, .tcards-4, .tcards-2 { grid-template-columns: minmax(0, 1fr); }
  .tcards { gap: 14px; }
  .cta5-go { flex-direction: column; align-items: stretch; }
  .cta5-go .btn { width: 100%; min-width: 0; }
  .cta5-ll { align-self: flex-start; min-height: 44px; }
  .band5-go .btn { width: 100%; }
}
/* "Get a Free HMO Management Review" (.btn-review, wherever it is) keeps its
   words on one line in a full-width button on small phones: its type follows
   the screen's width down to 320px; in a narrower box it wraps evenly. The
   hero's two buttons are always the same height. */
@media (max-width: 439px) {
  .btn-review { padding-left: 14px; padding-right: 14px; font-size: min(16px, calc((100vw - 72px) / 18)); }
  .btn-review svg.i { display: none; }
  .btn-review { text-wrap: balance; }
  .post-side .btn-review { font-size: max(13.5px, min(16px, calc((100vw - 118px) / 19))); }   /* inside the article's "Get in touch" card */
  .hero5-go .btn-review { padding-left: 12px; padding-right: 12px; font-size: min(16px, calc((100vw - 76px) / 18)); }
}
@media (max-width: 760px) {
  /* phones: links on their own line are 44px tall and 16px */
  :is(.sec-head > .link, .journey5 .link, .cta5-ll) { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
  .tcard-go { font-size: 16px; }
  /* body text at 16px at least on phones (the refined design); 14px only for true small print */
  .faq5-note, .house-avail .fine, .hp-eq, .hp-more, .book-sub, .book-alt, .live-here, .touch-card p, .nl-box > p, .tstrip-go, .tstrip-tel, .ftr .ftr-badges a, .ftr-badges b, .talk-a, .ftr-note, .ftr-ask, .hg-count, .rooms .show-s { font-size: 16px; }
  /* every control at least 44 x 44 */
  .slot-more { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 4px; font-size: 15px; }
  .share-row a { width: 44px; height: 44px; }
  .link { min-height: 44px; }
  .pcard h3 a { padding: 10px 0; }   /* an article's title link: a taller target on each line, the layout unchanged */
  .ftr .ftr-legal a { padding: 0 6px; margin: 0 -6px; }
  .hdr .logo { min-height: 44px; display: flex; align-items: center; }
  .hdr-min .hdr-tel { display: inline-flex; align-items: center; min-height: 44px; }
  /* the header's "Book a viewing" stays in the phone bar while the bar is there */
  body:has(> .mbar) .hdr .hdr-cta .btn { display: none; }
}
@media (max-width: 560px) {
  :root { --sec: 44px; }   /* sections a little closer together */
  .sec-head h2 { font-size: clamp(30px, 8.4vw, 34px); }
  .sec-lead { font-size: 17px; }
}

/* the houses search and the house page (refined design): warm-white pages, a
   type-only heading, white boxes for the filters, dark green small capitals */
.pg-houses .phero-search { background: transparent; border: 0; padding-top: clamp(14px, 2.6vw, 36px); padding-bottom: 6px; }
.pg-houses .phero-search .eyebrow, .house-kind { color: var(--eyebrow); letter-spacing: .1em; font-weight: 700; }
.pg-houses .phero-search .eyebrow::before, .house-kind::before { display: none; }
.pg-houses .phero-search h1, .house-title, .results-h, .avail-card h2, .house-sec h2 { font-weight: 500; letter-spacing: -.01em; }
.pg-houses .phero-search .lead { color: var(--muted); }
.pg-houses #find { padding-top: 18px; }
.seg { background: var(--surface); border-color: var(--card-line); }
.seg button[aria-pressed="true"] { background: var(--band); color: #fff; box-shadow: none; }
.f-toggle { color: var(--ink); }
.pg-house .crumbs { font-size: 14.5px; }
.hp-acts .btn-accent { background: var(--gold-grad); color: var(--ink); box-shadow: none; }
.hp-acts .btn-accent:hover { transform: none; box-shadow: 0 8px 20px rgba(14, 15, 20, .14); }
.hp-wa svg.i { color: var(--ink); }
.ask-form .btn-primary { background: var(--band); box-shadow: none; }
.hmedia-b svg.i { color: var(--acc-text); }
.bills-note { background: #f6ecd2; color: var(--ink); }
.bills-note svg.i { color: var(--acc-text); }
/* the homepage's search: four white boxes and the gold button in one row; below 1280px the button
   takes its own row (so each box keeps room for its longest choice, "Room, house or studio"), then
   two boxes to a row, then one */
.search-5 .s-box { border-color: var(--field-line); }
@media (max-width: 1279px) { .search.search-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .search-5 .btn { grid-column: 1 / -1; min-height: 56px; } }
@media (max-width: 1099px) { .search.search-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .search.search-5 { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------- forms (the refined design's 05, 07, 08, 09) */
/* Labels above the boxes in plain dark type, white boxes with an edge that
   reads at 3:1 on warm white, 8px corners, 52px tall, 16px words, a clear
   ink ring on focus (gold on the black bands), and problems said under the
   field in dark red with a mark in front. */
.fld { gap: 8px; }
.fld > span, .fld > .fld-lbl, .fld > label.fld-lbl { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.fld input, .fld select, .fld textarea { min-height: 52px; padding: 12px 16px; border: 1px solid var(--field-line); border-radius: var(--radius-field); background-color: var(--surface); font-size: 16px; }
.fld textarea { min-height: 120px; }
/* every select in a form has the same arrow (the registration form's, the search boxes'), never the browser's own */
.fld select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0f14' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; }
.fld input[type="file"] { min-height: 52px; padding: 12px; font-size: 15px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 3px solid var(--focus, var(--ink)); outline-offset: 2px; border-color: var(--ink); box-shadow: none; }
.fld input::placeholder, .fld textarea::placeholder { color: #6b6f69; opacity: 1; }
[aria-invalid="true"] { border-color: #b42318 !important; box-shadow: 0 0 0 1px #b42318 !important; }
.err-msg { display: flex; align-items: flex-start; gap: 6px; margin-top: 2px; color: #a3200f; font-size: 15px; font-weight: 600; line-height: 1.4; }
.err-msg::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #a3200f; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
.req { color: #a3200f; }
/* the message when a form didn't reach the office: what happened, and the phone and WhatsApp */
.form-err, form p.form-err { border-radius: var(--radius-field); font-size: 16px; }
.form-err a, form p.form-err a { text-decoration: underline; text-underline-offset: 3px; }
/* choices: bedrooms, situations (the free review) */
.choice { gap: 10px; }
.choice span { min-height: 48px; padding: 10px 18px; border: 1px solid var(--field-line); border-radius: var(--radius-field); background: var(--surface); font-size: 16px; font-weight: 600; }
.choice label:hover span { border-color: var(--ink); }
.choice input:checked + span { border-color: var(--band); background: var(--band); color: #fff; }
.choice input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.checks label, label.chk { min-height: 48px; padding: 10px 14px; border: 1px solid var(--field-line); border-radius: var(--radius-field); background: var(--surface); font-size: 16px; }
.checks input, label.chk input { accent-color: var(--ink); width: 18px; height: 18px; }
.checks label:has(input:checked) { border-color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.checks label:has(input:focus-visible), label.chk:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
label.chk input:focus-visible { outline: none; }
.fine { font-size: 14px; line-height: 1.5; color: var(--muted); }
.fine a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* a form in a white card (the contact page, the landlords' forms): a fine edge, no shadow */
.card-form { border: 1px solid var(--card-line); border-radius: var(--radius-card); box-shadow: none; }
.card-form h2, .card-form h3 { font-weight: 500; }
/* a form straight on the warm-white page (the free review, the repair report, register interest) */
.form-plain { gap: 0; }
.form-plain .sf-step { gap: 20px; }
.sf-step legend { margin-bottom: 6px; font-weight: 500; font-size: clamp(24px, 2.2vw, 28px); }
.sf-step legend small { color: var(--eyebrow); letter-spacing: .1em; }
.sf-progress { gap: 6px; margin-bottom: 22px; }
.sf-progress span { height: 4px; border-radius: 2px; background: var(--card-line); }
.sf-progress span.on { background: var(--eyebrow); }
.sf-nav { gap: 12px; margin-top: 8px; }
.sf-nav > span:empty { display: none; }   /* step 1 has no Back: its empty place takes no room, so Next lines up with the fields */
.form-plain .sf-nav .btn { min-height: 52px; }
.form-plain .sf-nav .btn-accent { min-width: min(100%, 260px); }
@media (min-width: 761px) { .form-plain .sf-nav { grid-template-columns: auto auto; justify-content: start; } .form-plain [data-step="1"] > .btn-block { width: auto; min-width: 260px; justify-self: start; } }

/* --------------------------------------------- a form with the dark card beside it */
.form-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(32px, 5vw, 72px); align-items: start; }
.form-side > * { min-width: 0; }
.form-main { display: grid; gap: 24px; align-content: start; }
@media (max-width: 960px) { .form-side { grid-template-columns: minmax(0, 1fr); } }
/* The dark card (refined design 05, 07, 08): "A local team. A clear next step.", then the
   office phone and WhatsApp in gold, and the hours. */
.talk { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 2.6vw, 34px); border-radius: var(--radius-card); background: var(--band); color: var(--band-text); }
.talk h2 { color: #fff; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.2; }
.talk .ticks { margin: 0; gap: 8px; }
.talk .ticks li { color: var(--band-text); font-size: 16px; }
.talk .ticks svg.i { color: var(--glow); }
.talk-k { margin-top: 6px; color: var(--glow); font-size: 17px; font-weight: 600; }
.talk-l { display: grid; gap: 2px; }
.talk-l a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--glow); font-size: 18px; font-weight: 600; text-decoration: none; }
.talk-l a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.talk-l svg.i { width: 19px; height: 19px; color: var(--accent); }
.talk-h { font-size: 15px; color: var(--band-text); text-wrap: balance; }
@media (min-width: 961px) and (min-height: 700px) { .form-side > .talk { position: sticky; top: calc(var(--hdr-h) + 20px); } }
/* side cards on light: white, a fine edge */
.contact-card { border: 1px solid var(--card-line); border-radius: var(--radius-card); background: var(--surface); }
.contact-card h2 { font-weight: 500; }
.contact-side { gap: 18px; }
/* the repair page's emergency notice: a warm beige box above the form */
.notice-box { margin: 0; padding: 16px 18px; border: 0; border-radius: var(--radius-field); background: var(--notice); color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.5; }
.notice-box svg.i { color: var(--ink); }
.notice-box a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.rnote { border-radius: var(--radius-field); }

/* --------------------------------------------------- the free review (05) */
.lp { padding: 0 0 var(--sec); background: transparent; }
.lp-text { margin-bottom: clamp(28px, 3.4vw, 44px); }
.lp h1 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.06; }
.lp .lead { max-width: 46em; margin-top: clamp(12px, 1.4vw, 18px); font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.55; color: var(--muted); }
.lp-in { gap: clamp(32px, 5vw, 72px); }
.lp-form { min-width: 0; }

/* ------------------------------------------------------ the repair report (08) */
.wz-steps { gap: 8px; margin-bottom: 22px; }
.wz-steps li { border-top: 4px solid var(--card-line); padding: 10px 2px 4px; font-size: 15px; color: var(--muted); }
.wz-steps li b { width: 26px; height: 26px; background: var(--card-line); color: var(--ink); }
.wz-steps li.on { border-top-color: var(--eyebrow); color: var(--ink); }
.wz-steps li.on b { background: var(--eyebrow); color: #fff; }
.wz-steps li.done { border-top-color: var(--eyebrow); color: var(--ink-2); }
.wz-steps li.done b { background: var(--eyebrow); }
.wz-go { min-height: 44px; }
.wz .sf-step legend { font-size: clamp(24px, 2.2vw, 28px); }
.wz-n { width: 48px; height: 48px; background: var(--band); color: var(--glow); }
.wz-q { color: var(--muted); }
.tile { min-height: 120px; border: 1px solid var(--field-line); border-radius: var(--radius-field); background: var(--surface); font-size: 16px; }
.tile svg { color: var(--ink-2); }
.tile:hover { border-color: var(--ink); transform: none; }
.tile.on, .tile:has(input:checked) { border-color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.tile.on svg, .tile:has(input:checked) svg { color: var(--ink); }
.tile:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.tiles-sm .tile { min-height: 52px; font-size: 15.5px; }
.tips { border: 1px solid var(--card-line); border-radius: var(--radius-field); background: var(--surface); }
.tips ul { font-size: 16px; }
.wz-sum { font-size: 16px; }
.photo-btns .btn { min-height: 48px; }

/* ----------------------------------------------------------------- contact (09) */
/* The four ways to reach the office, two by two, then the hours and the website
   assistant; the address reads on one line with commas (its lines are spans). */
.contact5 .contact-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 0; border: 0; background: transparent; }
.ccard { display: grid; align-content: start; gap: 10px; min-width: 0; padding: clamp(20px, 2.2vw, 28px); border: 1px solid var(--card-line); border-radius: var(--radius-card); background: var(--surface); }
.ccard h2 { margin: 0; font-size: clamp(24px, 2.2vw, 28px); font-weight: 500; }
.ccard p { margin: 0; color: var(--muted); }
.ccard-v { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font-size: 18px; font-weight: 500; font-style: normal; text-decoration: none; overflow-wrap: anywhere; }
.ccard-v svg.i { color: var(--eyebrow); }
a.ccard-v:hover { text-decoration: underline; text-underline-offset: 4px; }
.ccard-adr { align-items: flex-start; min-height: 0; padding: 10px 0 0; line-height: 1.45; }
.ccard-adr svg.i { margin-top: 2px; }
.ccard-adr span span:not(:last-child)::after { content: ","; }
.ccard .link { min-height: 44px; }
.ccard .hours { margin: 4px 0 0; }
.ccard-ai .btn { justify-self: start; }
.contact-tenant { margin-top: 24px; color: var(--muted); font-size: 17px; }
.contact-tenant a { color: var(--eyebrow); font-weight: 700; text-underline-offset: 3px; }
.contact-form5 { margin-top: clamp(36px, 4vw, 56px); }
.contact-form5 { align-items: stretch; }
.contact-map { display: grid; min-height: 320px; }
.contact-map .map { height: 100%; min-height: 320px; margin-top: 0; border-color: var(--card-line); border-radius: var(--radius-card); }
@media (max-width: 900px) { .contact-map, .contact-map .map { min-height: 280px; } }
@media (max-width: 760px) {
  .contact5 .contact-card { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .contact-tenant a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ------------------------------------------------------ the renting guide (10) */
/* Four rows between fine rules: the number and heading, then what to do. */
.guide5 { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--card-line); }
.guide5 li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px clamp(24px, 4vw, 64px); padding: clamp(24px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--card-line); }
.guide5 h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; }
.guide5-n { font-variant-numeric: oldstyle-nums; }
.guide5-b { display: grid; gap: 8px; justify-items: start; }
.guide5-b p { color: var(--ink-2); font-size: 16.5px; }
.guide5-b .guide5-d { color: var(--muted); font-size: 18px; }
.guide5-b .link { min-height: 44px; }
@media (max-width: 760px) { .guide5 li { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------ landlord services (06) */
.tcards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ll-svc .tcard { min-height: 220px; padding: 26px 26px 22px; }
.ll-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(28px, 3vw, 40px); }
.ll-go p { color: var(--muted); font-size: 16px; }
.ll-go p a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.trust-card { margin-top: clamp(36px, 4vw, 56px); padding: 22px 24px; border: 1px solid var(--card-line); border-radius: var(--radius-card); background: var(--surface); }
.trust svg.i { color: var(--eyebrow); }
.trust b { font-size: 16px; }
.trust small { font-size: 14.5px; color: var(--muted); }
.ll-areas { margin-top: 0; }
.trust-sec { background: transparent; border: 0; padding: 0; }
.trust-sec .trust { padding: 22px 24px; border: 1px solid var(--card-line); border-radius: var(--radius-card); background: var(--surface); }
/* the service pages and "Other services": white cards with a fine edge, like the others */
.service { border: 1px solid var(--card-line); border-radius: var(--radius-card); box-shadow: none; }
.service h3 { font-weight: 500; font-size: clamp(22px, 2vw, 26px); }
.service p { color: var(--muted); }
.service-i { background: var(--paper); color: var(--eyebrow); }
.service-cta { background: var(--band); color: var(--band-text); border-color: transparent; }
.service-cta h3 { color: #fff; }
.service-cta p { color: var(--band-text); }
.service-cta .link { color: var(--glow); }
@media (hover: hover) { .service:hover { border-color: var(--accent); box-shadow: 0 14px 30px rgba(16, 18, 17, .08); } }
/* steps: no card behind each, a black circle with the gold number, as on the homepage's renting guide */
.steps li { padding: 0; border: 0; border-radius: 0; background: transparent; }
.steps .step-n { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: var(--band); color: var(--glow); font: 700 16px/1 var(--font-body); }
.steps h3 { font-weight: 500; font-size: 22px; }
.steps p { color: var(--muted); font-size: 16px; }
/* other boxes on light pages */
.feature-link, .box, .callout, .checklist li, .office-media .map, .area-facts div { border-color: var(--card-line); border-radius: var(--radius-card); }
.feature-link > svg.i:first-child, .box > svg.i, .callout > svg.i, .checklist svg.i, .props svg.i { color: var(--eyebrow); }
.feature-link b, .box h3 { font-weight: 500; }
.callout { background: var(--surface); }
.checklist li { font-weight: 500; }
.props h3 { font-weight: 500; font-size: 21px; }
.props p { color: var(--muted); font-size: 16px; }
.ticks li { color: var(--ink-2); }
.ticks svg.i { color: var(--eyebrow); }
.prose { color: var(--ink-2); }
.prose a { color: var(--eyebrow); }
.prose h2 { font-weight: 500; }
.rrbox { border-color: var(--card-line); border-radius: var(--radius-card); }
.hours dt { font-weight: 600; }
@media (max-width: 1000px) { .tcards-3 { grid-template-columns: minmax(0, 1fr); } .ll-svc .tcard { min-height: 0; } }
@media (max-width: 760px) {
  .ll-go { flex-direction: column; align-items: stretch; }
  .ll-go .btn { width: 100%; }
  .ll-go p a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs a { min-height: 44px; display: inline-flex; align-items: center; padding: 0; }
}
/* phones: labels and the small notes under them at 16px and 14px at least */
@media (max-width: 760px) {
  .fld > span, .fld > .fld-lbl, .fld > label.fld-lbl, .treg-lbl, .treg .fld > span, .treg-opt, .treg-note, .regform-more > summary { font-size: 16px; }
  .sf-step legend small, .fld-help, .treg .fld-help, .calc-out small { font-size: 14px; }
  .areas5 small, .talk-h { font-size: 16px; }
}

/* Areas: the area pages in the phone menu (two to a row), the directory and the council note */
.drawer-card li.drawer-areas { display: block; }
.drawer-areas ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.areas-dir { list-style: none; padding: 0; margin: 4px 0 30px; columns: 4 210px; column-gap: 32px; }
.areas-dir li { break-inside: avoid; padding: 9px 0; border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.areas-dir a { display: contents; color: var(--ink); text-decoration: none; }
.areas-dir a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.areas-dir small { color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.area-council { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0 0; padding: 16px 18px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); font-size: 15.5px; line-height: 1.55; }
.area-council > svg.i { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--eyebrow); }
.area-council .link { display: inline; }
.drawer-areas a { min-height: 40px; font-size: 16px; }

/* The client's logo, cut out of its green (no box), in its own colours, on the header's and footer's green */
.logo-img { display: block; height: var(--logo-h); width: auto; max-width: 100%; aspect-ratio: 1734 / 486; object-fit: contain; }
.drawer-top .logo-img { height: 54px; }
.hdr .logo-img { height: 78px; }
@media (max-width: 1180px) { .hdr .logo-img { height: 66px; } }
@media (max-width: 760px) { .hdr .logo-img { height: 54px; } }
.drawer-areas ul { align-items: start; }
.drawer-areas a { line-height: 1.25; }
@media (min-width: 1181px) { .hero5 { min-height: clamp(700px, 60vw, 960px); padding-top: calc(var(--hdr-h) + 28px); } }