/* Student Living — components shared by all five designs.
   Each design's theme.css (/student-living-N/theme.css) sets the variables
   below and restyles the header, hero, cards and sections in its own way. */

:root {
  --font-display: system-ui, sans-serif; --font-body: system-ui, sans-serif;
  --bg: #fff; --surface: #fff; --surface-2: #f6f7f9; --ink: #111; --ink-2: #3b3f48; --muted: #6b7280; --line: #e6e8ec;
  --primary: #111; --primary-ink: #fff; --primary-hover: #333; --accent: #f2b33d; --accent-ink: #111;
  --ok: #1f7a55; --ok-soft: #e4f3ec; --let: #575c70; --let-soft: #eef0f3;
  --field-line: #8a8c96;   /* text field edges: 3:1 against white, so a field can be seen as one */
  --radius: 16px; --radius-sm: 10px; --radius-lg: 24px; --radius-btn: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .07); --shadow-lg: 0 24px 60px rgba(16, 24, 40, .16);
  --wrap: 1200px; --gutter: 20px; --hdr-h: 72px; --sec: clamp(56px, 8vw, 104px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); scroll-padding-bottom: 24px; }
/* Focus inside the sticky header never scrolls the page: the room kept for
   the header applies to everything else, and a header slid away comes back
   before the browser looks for the focused link. */
html:has(.hdr :focus) { scroll-padding-top: 0; }
.hdr:focus-within, .bars-hidden .hdr:focus-within { transform: none; transition: none; }
/* keyboard focus never stops behind the phone's bottom bar */
@media (max-width: 760px) { html:has(body > .mbar) { scroll-padding-bottom: calc(86px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--bg); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.no-scroll { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; margin: 0; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; overflow-wrap: break-word; }
p { margin: 0; text-wrap: pretty; }
/* figures line up in prices, tables and counters */
.hcard-price, .stats4 dt, .live4-n b, .live4-list em, .rrbox, .calc output, .calc-out b, td { font-variant-numeric: lining-nums tabular-nums; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
address { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus, color-mix(in srgb, var(--primary) 70%, transparent)); outline-offset: 3px; border-radius: 4px; }
/* On photos and dark panels the focus ring turns white; light boxes inside
   them go back to the normal ring. Each theme adds its own dark surfaces. */
:is(.phero-photo, .hero-photo, .lp-photo, .phero-dark, .hcard-reg, .asst-h, .modal-lb, .toasts) { --focus: #fff; }
:is(.search, .hero-card, .card-form, .contact-card, .book, .calc, .modal:not(.modal-lb .modal), .duo-card, .lp-form) { --focus: initial; }
/* Design 4's header sits see-through on the opening photo until the page
   scrolls (from 761px up); its focus ring is white there too. */
@media (min-width: 761px) { .v4.top-photo .hdr:not(.is-scrolled) :focus-visible { outline-color: #fff; } }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: calc(820px + var(--gutter) * 2); }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--surface); padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.skip:focus { left: 8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.muted { color: var(--muted); }
svg.i { width: 20px; height: 20px; flex: none; vertical-align: middle; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 22px; border-radius: var(--radius-btn); border: 1.5px solid transparent; font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: transform .15s, background .15s, border-color .15s, box-shadow .15s, color .15s; }
.btn svg.i { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { filter: brightness(1.05); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost-inv { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn-ghost-inv:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: 15px; }
.btn-lg { min-height: 56px; padding: 16px 28px; font-size: 17px; }
.btn-block { width: 100%; }
/* long labels wrap on phones rather than pushing the page sideways */
@media (max-width: 560px) { .btn { white-space: normal; text-align: center; max-width: 100%; } }
.btn:disabled { opacity: .6; cursor: progress; }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--primary); text-decoration: none; }
.link svg.i { width: 17px; height: 17px; transition: transform .2s; }
.link:hover svg.i { transform: translateX(3px); }
.icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }

/* ------------------------------------------------------------------ forms */
.fld { display: grid; gap: 6px; }
.fld > span { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.fld input, .fld select, .fld textarea, .book-form input, .book-form select { color: var(--ink); width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--field-line, #8a8c96); border-radius: var(--radius-sm); background: var(--surface); font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.fld textarea { min-height: 110px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus, .book-form input:focus, .book-form select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent); }
[aria-invalid="true"] { border-color: #c93c3c !important; box-shadow: 0 0 0 4px rgba(201, 60, 60, .12) !important; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fld input, .fld select, .fld textarea { min-width: 0; }
.fld :is(.checks, label.chk) input { min-height: 0; padding: 0; }
/* paired fields stack on phones, so long answers ("University of Manchester") aren't cut off */
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr; } }
/* a form that didn't reach the office says so, with the phone number */
.form-err, form p.form-err { display: block; margin: 0; background: #fdecec; border: 1px solid #f3b4b4; color: #7a1d1d; border-radius: var(--radius-sm); padding: 12px 14px; font-weight: 600; font-size: 15px; line-height: 1.45; text-align: left; }
.form-err a, form p.form-err a { color: inherit; font-weight: 800; white-space: nowrap; }
.nl-box > p.form-err { margin-bottom: 14px; }
.regform > .form-err, .regform > .ok-msg, .regform > .fine { grid-column: 1 / -1; }
.form, .card-form { display: grid; gap: 14px; }
.card-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow); color: var(--ink); }
.card-form h2, .card-form h3 { font-size: 24px; }
.form-sub { color: var(--muted); margin-top: -6px; }
.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.choice label { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-weight: 700; font-size: 15px; background: var(--surface); cursor: pointer; }
.choice input:checked + span { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); color: var(--primary); }
.choice input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--primary) 50%, transparent); outline-offset: 2px; }
.choice-col { display: grid; }
.choice-col span { width: 100%; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label, label.chk { display: inline-flex; gap: 8px; align-items: center; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 9px 13px; font-weight: 600; font-size: 15px; cursor: pointer; background: var(--surface); }
.checks input, label.chk input { accent-color: var(--primary); width: 17px; height: 17px; }
/* a ticked option looks ticked as a whole, and keyboard focus shows on it */
.checks label:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.checks label:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--primary) 50%, transparent); outline-offset: 2px; }
.checks input:focus-visible { outline: none; }
.ok-msg { display: flex; gap: 12px; align-items: flex-start; background: var(--ok-soft); color: color-mix(in srgb, var(--ok) 80%, #000); border-radius: var(--radius-sm); padding: 16px; font-weight: 600; }
.ok-msg svg.i { color: var(--ok); margin-top: 2px; }
.ok-big { padding: 24px; }
.ok-big b { display: block; font-size: 20px; margin-bottom: 4px; }
.ok-big p { font-weight: 500; }
.err { color: #b42318; font-weight: 700; font-size: 15px; }
.fine { font-size: 14px; color: var(--muted); margin-top: 10px; display: flex; gap: 6px; align-items: flex-start; }
.fine svg.i { width: 16px; height: 16px; margin-top: 3px; }
/* Small print without an icon reads as one sentence, links included. */
.fine:not(:has(> svg.i)) { display: block; }
.note { display: flex; gap: 12px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; font-weight: 600; margin-bottom: 18px; }
.todo { border: 2px dashed #d9b25c; background: #fffaf0; border-radius: var(--radius-sm); padding: 16px 18px; color: #5c3b00; font-weight: 600; margin: 8px 0 20px; }
.todo b { display: block; color: #3d2700; }
.callout { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-top: 28px; }
.callout > svg.i { width: 28px; height: 28px; color: var(--primary); }
.callout > div { flex: 1; min-width: 220px; }
.callout b { display: block; font-size: 18px; }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 12px; justify-items: start; }
.box > svg.i { width: 30px; height: 30px; color: var(--primary); }
.box h3 { font-size: 21px; }
.box p { color: var(--ink-2); }

/* ----------------------------------------------------------------- header */
.util { font-size: 14px; }
.util-in { display: flex; gap: 22px; align-items: center; min-height: 38px; }
.util-in span { display: inline-flex; gap: 7px; align-items: center; }
.util-in svg.i { width: 16px; height: 16px; }
.util-in a { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }
.hdr { position: sticky; top: 0; z-index: 60; transition: transform .32s cubic-bezier(.2, .7, .2, 1), box-shadow .2s, background .2s; }
/* Scrolling down hides the header; scrolling up brings it back (core.js). The phone bar with Book a viewing always stays. */
.bars-hidden .hdr { transform: translateY(-100%); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .hdr, .mbar { transition: none; } }
.hdr-in { display: flex; align-items: center; gap: 20px; min-height: var(--hdr-h); }
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.logo-mark svg { width: 40px; height: 40px; display: block; }
.logo-word b { display: block; font-family: var(--font-display); font-size: 21px; line-height: 1; letter-spacing: -.02em; }
.logo-word small { display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-top: 5px; }
.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-list > li { position: relative; display: flex; align-items: center; }
.nav-link { display: block; padding: 10px 12px; text-decoration: none; font-weight: 600; font-size: 15.5px; border-radius: 10px; color: var(--ink-2); white-space: nowrap; }
.has-dd .nav-link { padding-right: 2px; }
.nav-link:hover, .nav-link[aria-current] { color: var(--ink); }
.dd-btn { border: 0; background: none; padding: 8px 6px 8px 2px; color: var(--muted); display: inline-flex; }
.dd-btn svg.i { width: 16px; height: 16px; transition: transform .2s; }
.dd-btn[aria-expanded="true"] svg.i { transform: rotate(180deg); }
.dd { position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; display: none; z-index: 70; }
.dd a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--ink-2); }
.dd a:hover { background: var(--surface-2); color: var(--ink); }
.dd-btn[aria-expanded="true"] + .dd { display: block; }
/* Menus open on hover for the mouse; keyboard users open them with the arrow
   button, so tabbing along the header doesn't run through every sub-link.
   Escape closes even a hovered menu (core.js adds .dd-x until the pointer leaves). */
@media (hover: hover) and (min-width: 1181px) { .has-dd:hover .dd { display: block; } .has-dd::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; } .has-dd.dd-x .dd { display: none; } }
.hdr-cta { display: flex; align-items: center; gap: 12px; }
.hdr-tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.hdr-tel svg.i { width: 18px; height: 18px; }
.burger { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); place-items: center; color: var(--ink); }
.hdr-min .hdr-in { justify-content: space-between; }
/* the smallest phones: the landing page's phone number becomes a round call button (still read out in full) */
@media (max-width: 380px) {
  .hdr-min .hdr-tel { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; }
  .hdr-min .hdr-tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.drawer { position: fixed; inset: 0; z-index: 120; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(5, 10, 20, .5); }
.drawer-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(380px, 92vw); background: var(--surface); padding: 16px 20px 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; animation: slidein .25s ease-out; color: var(--ink); }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } }
.drawer-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; }
.drawer-panel > ul > li { border-bottom: 1px solid var(--line); }
.drawer-panel > ul > li > a, .drawer-panel summary { display: flex; justify-content: space-between; align-items: center; padding: 15px 2px; font-weight: 700; font-size: 18px; text-decoration: none; cursor: pointer; list-style: none; }
.drawer-panel summary::-webkit-details-marker { display: none; }
.drawer-panel details[open] summary svg.i { transform: rotate(180deg); }
.drawer-panel details ul { padding: 0 0 12px 8px; }
.drawer-panel details a { display: block; padding: 9px 4px; text-decoration: none; color: var(--ink-2); font-weight: 600; }
.drawer-cta { display: grid; gap: 10px; margin-top: auto; padding-top: 16px; }
@media (max-width: 1180px) { .nav, .hdr-cta .hdr-tel { display: none; } .hdr-cta { margin-left: auto; } .burger { display: inline-grid; margin-left: 0; } .util-hide { display: none !important; } }
/* The same, wider, when the full header doesn't fit (core.js sets .hdr-compact, for larger text). */
.hdr-compact :is(.nav, .hdr-cta .hdr-tel) { display: none; } .hdr-compact .hdr-cta { margin-left: auto; } .hdr-compact .burger { display: inline-grid; margin-left: 0; }
/* Laptop widths: the full header is about 1,300px wide, so the menu tightens
   and the phone number becomes a round call button (still read out in full). */
@media (min-width: 1181px) and (max-width: 1439px) {
  .hdr-in { gap: 14px; } .nav-link { padding: 10px 9px; font-size: 15px; } .has-dd .nav-link { padding-right: 1px; } .hdr-cta { gap: 10px; }
  .hdr-cta .hdr-tel { width: 42px; height: 42px; justify-content: center; border: 1px solid var(--line); border-radius: 50%; }
  .hdr-cta .hdr-tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Wide screens: the header gets a little more room than the page column. */
@media (min-width: 1440px) { .hdr .wrap.hdr-in, .util > .wrap { max-width: calc(1320px + var(--gutter) * 2); } }
@media (max-width: 560px) { .hdr .hdr-cta .btn { display: none; } .logo-word small { display: none; } .logo-word b { font-size: 19px; } }

/* ----------------------------------------------------------------- footer */
.ftr { padding: clamp(56px, 7vw, 88px) 0 28px; font-size: 15.5px; }
.ftr-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 36px; }
.ftr h2 { font-size: 15px; letter-spacing: .02em; margin-bottom: 14px; font-family: var(--font-body); }
.ftr ul li { margin: 6px 0; }
/* The office column's About us, Reviews (while a review is published) and
   Contact: one under another, like the other columns; on phones, where the
   column is the page's width, on one line with a dot between each (the dot
   comes with the item after it, so a hidden Reviews leaves no gap). */
.ftr-more { list-style: none; margin: 14px 0 0; padding: 0; }
@media (max-width: 760px) { .ftr .ftr-grid ul.ftr-more { display: flex; flex-wrap: wrap; gap: 0; } .ftr ul.ftr-more li { margin: 0; } .ftr-more li + li::before { content: "·"; margin: 0 .5em; } }
.ftr a { text-decoration: none; }
.ftr a:hover { text-decoration: underline; }
.ftr-brand p { margin: 16px 0; max-width: 340px; }
.ftr-contact { display: grid; gap: 6px; }
.ftr-contact a { display: inline-flex; gap: 8px; align-items: center; overflow-wrap: anywhere; }
.ftr-contact svg.i { width: 17px; height: 17px; }
.ftr-hours { display: grid; gap: 2px; }
.ftr-hours dt { font-weight: 700; }
.ftr-hours dd { margin-bottom: 8px; }
.ftr-note { margin: 12px 0; font-size: 14px; opacity: .8; }
.ftr-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 48px; padding-top: 22px; font-size: 13.5px; }
.ftr-credit { margin-left: auto; }
/* "Cookie settings" is a button (it opens the cookie choices), dressed as one of the legal links */
.ftr-cookies { background: none; border: 0; padding: 0; text-align: inherit; }
.ftr-cookies:hover { text-decoration: underline; }
.ftr-min .ftr-legal { margin-top: 0; }
/* The landing page's short footer opens with the certificates: no rule above them. */
.ftr.ftr-min .ftr-badges { margin-top: 0; padding-top: 0; border-top: 0; }
/* The link lists are <details>, folded on phones (core.js); wider, the
   heading is a plain heading that can't fold. */
.ftr-col > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; }
.ftr-col > summary::-webkit-details-marker { display: none; }
.ftr-col > summary svg.i { display: none; }
@media (min-width: 761px) { .ftr-col > summary { pointer-events: none; cursor: default; } }
@media (max-width: 760px) {
  .ftr-col > summary { min-height: 40px; cursor: pointer; }
  .ftr-col > summary svg.i { display: block; width: 18px; height: 18px; transition: transform .2s; }
  .ftr-col[open] > summary svg.i { transform: rotate(180deg); }
  .ftr-col > summary h2 { margin: 0; min-width: 0; }
}
/* the bottom rows keep clear of the floating buttons in the corner */
@media (min-width: 761px) and (max-width: 1439px) { .ftr-legal, .ftr-badges { padding-right: 80px; } }
@media (max-width: 960px) { .ftr-grid { grid-template-columns: 1fr 1fr; } .ftr-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ftr-grid { grid-template-columns: 1fr; } .ftr-credit { margin-left: 0; } }

/* ------------------------------------------------------- mobile action bar */
.mbar { display: none; }
@media (max-width: 760px) {
  .mbar { display: grid; grid-template-columns: auto 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .mbar a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: var(--radius-btn); font-weight: 700; text-decoration: none; }
  .mbar-main { background: var(--primary); color: var(--primary-ink); }
  /* WhatsApp sits in the bar on phones instead of floating over the page, beside the one main action */
  .mbar .mbar-wa { background: #25d366; color: #fff; }
  .mbar-wa svg.i { width: 24px; height: 24px; }
  .mbar a.mbar-main { padding: 0 12px; white-space: nowrap; }
  .mbar ~ .fabs { display: none; }
  /* the end of the page scrolls clear of the bar */
  body:has(> .mbar) { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}
@media (max-width: 520px) {
  body { padding-bottom: 74px; }
  .pg-review { padding-bottom: 0; }
}

/* --------------------------------------------------------------- sections */
.sec { padding: var(--sec) 0; }
.sec-tight { padding: calc(var(--sec) * .6) 0; }
.sec-flush { padding-top: 0; }
.sec-alt { background: var(--surface-2); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 40px; flex-wrap: wrap; margin-bottom: clamp(26px, 4vw, 44px); }
.sec-head h2 { font-size: clamp(30px, 4vw, 46px); max-width: 760px; }
:is(.sec-head, .results-head) > .link { white-space: nowrap; }
@media (max-width: 560px) { :is(.sec-head, .results-head) > .link { white-space: normal; } }   /* (only matters with much larger text) */
.sec-lead { color: var(--ink-2); max-width: 620px; margin-top: 12px; font-size: 18px; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.split-map { align-items: stretch; }
.split > * { min-width: 0; }
.split-media { position: relative; }
.split-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split-media img { aspect-ratio: 4 / 3; } }
.prose { font-size: 18px; color: var(--ink-2); }
.prose h2 { font-size: clamp(24px, 3vw, 30px); color: var(--ink); margin: 40px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 16px; }
.prose ul { list-style: disc; padding-left: 22px; margin: 0 0 18px; }
.prose li { margin: 8px 0; }
.prose a { color: var(--primary); font-weight: 600; overflow-wrap: anywhere; }
.stack { display: grid; gap: 20px; }

/* inner page hero */
.phero { padding: clamp(40px, 6vw, 80px) 0; }
.phero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.phero-in:not(:has(.phero-media)) { grid-template-columns: minmax(0, 1fr); }
.phero h1 { font-size: clamp(36px, 5.2vw, 62px); max-width: 900px; }
.phero .lead { font-size: clamp(18px, 1.7vw, 21px); margin-top: 18px; max-width: 680px; color: var(--ink-2); }
.phero-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.phero-slim { padding-bottom: clamp(24px, 3vw, 36px); }
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: inherit; text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: var(--primary); }
@media (max-width: 900px) { .phero-in { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ house cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
/* A listing card (the refined design, 31 October 2026): white, a fine border,
   the photo framed inside it (fitted over its own blurred copy, never cut),
   the area and kind of let, the name, the rent with what it is for, bills and
   deposit, which rooms are free and when, and a full-width button. */
.hcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--card-line, var(--line)); border-radius: var(--radius-card, var(--radius)); padding: 10px; position: relative; transition: transform .25s, box-shadow .25s, border-color .25s; }
.hcard-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); border-radius: 10px; }
.hcard-media img { width: 100%; height: 100%; object-fit: cover; }
.hcard-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 10px 10px; flex: 1; }
.hcard-kicker { font-size: 12.5px; font-weight: 700; color: var(--eyebrow, var(--muted)); letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }
.hcard-title { font-size: 24px; line-height: 1.2; }
.hcard-title a { text-decoration: none; }
.hcard-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hcard-price { color: var(--muted); font-size: 15px; line-height: 1.35; }
.hcard-price b { color: var(--ink); font-size: 21px; font-weight: 700; letter-spacing: -.01em; margin-right: 4px; white-space: nowrap; }
.hcard-price small { font-size: 14px; font-weight: 600; white-space: nowrap; }
.hcard-terms, .hcard-avail, .hcard-when { color: var(--muted); font-size: 16px; line-height: 1.45; }
.hcard-avail + .hcard-when { margin-top: -6px; }
.hcard-avail b { color: var(--ok-text, color-mix(in srgb, var(--ok) 85%, #000)); font-weight: 700; }
.hcard-avail b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 7px 2px 0; border-radius: 50%; background: var(--ok); vertical-align: middle; }
.hcard-avail.let b { color: var(--let); }
.hcard-avail.let b::before { background: var(--let); }
.hcard-zd { font-size: 14px; line-height: 1.45; color: var(--ink-2); padding: 8px 11px; border-radius: 8px; background: var(--surface-2); }
.hcard-zd b { color: var(--ink); }
.hcard-match { display: flex; gap: 6px; align-items: center; font-size: 15px; font-weight: 700; color: color-mix(in srgb, var(--ok) 85%, #000); }
.hcard-match svg.i { width: 17px; height: 17px; color: var(--ok); }
.hcard-cta { margin-top: auto; position: relative; z-index: 2; width: 100%; justify-content: flex-start; border-radius: var(--radius-field, var(--radius-sm)); }
.hcard-body > :nth-last-child(2) { margin-bottom: 8px; }
.hcard.is-let .hcard-media img { filter: grayscale(.5); }
.empty { grid-column: 1 / -1; text-align: center; padding: 48px 24px; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--surface); }
.empty h3, .empty h1 { font-size: 24px; margin-bottom: 8px; }
.empty p { color: var(--ink-2); }
.empty .actions { justify-content: center; margin-top: 18px; }
/* an empty search: ways to widen it, then the phone */
.empty-try { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.empty-try a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: none; }
.empty-try a:hover { border-color: var(--ink); }
.empty .empty-call { margin-top: 16px; font-size: 15px; }
.empty-lg { margin: 40px 0 60px; }

/* the register card that closes every grid */
.hcard-reg { background: var(--band, var(--primary)); color: var(--band-text, var(--primary-ink)); border-color: transparent; justify-content: flex-start; min-height: 0; }
.hcard-reg-in { padding: 24px 20px; display: grid; gap: 12px; justify-items: start; }
.hcard-reg h3 { font-size: 26px; color: #fff; }
.hcard-reg p:not(.eyebrow) { color: inherit; }
.hcard-reg .eyebrow { color: var(--accent); margin: 0; }
.hcard-reg .btn { margin-top: 8px; }
.hcard-reg:hover { transform: none; }

/* ------------------------------------------------------------------ steps */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; counter-reset: s; }
.steps-4 { grid-template-columns: repeat(4, 1fr); }
.steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; }
.step-n { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--primary); margin-bottom: 18px; }
.steps h3 { font-size: 19px; margin-bottom: 8px; }
.steps p { color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 1080px) { .steps, .steps-4 { grid-template-columns: repeat(2, 1fr); } }
/* five steps on a tablet: three, then two */
@media (min-width: 761px) and (max-width: 1080px) { .steps:not(.steps-4) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps, .steps-4 { grid-template-columns: 1fr; } }
/* what to do next, under a step: a block only as wide as its words, so a
   label that wraps keeps its arrow after the last word, not at the far edge */
.step-go { display: block; width: fit-content; margin-top: 12px; font-size: 15.5px; }
.step-go svg.i { margin-left: 2px; }

/* ---------------------------------------------------------------- reviews */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.review blockquote { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 500; }
.review figcaption { margin-top: auto; color: var(--muted); font-weight: 700; font-size: 15px; }
.stars { display: inline-flex; gap: 2px; color: #f2a71b; }
.stars svg.i { width: 18px; height: 18px; }
.ex-chip { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: #fff4dc; color: #7a4d00; vertical-align: middle; }
.gbadge { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: center; margin-bottom: 30px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-weight: 600; color: var(--ink-2); }
.gbadge .g { font-family: Arial, sans-serif; font-weight: 700; font-size: 22px; color: #4285f4; }
/* Reviews and testimonials published in the back office (Reviews): the
   Worker fills the empty data-rv-slot placeholders (worker/student-living/reviews.js). */
.rv-grid.rv-n1 { grid-template-columns: minmax(0, 760px); }
.rv-grid.rv-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; min-height: 18px; }
.rv-src { margin-left: auto; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.stars svg.i.rv-off { color: #e3ded4; }
.review blockquote p { margin: 0 0 .7em; }
.review blockquote p:last-child { margin-bottom: 0; }
.review figcaption { display: flex; flex-direction: column; gap: 2px; }
.review figcaption b { color: var(--ink); }
.review figcaption > span { font-weight: 600; font-size: 14.5px; }
.rv-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 14.5px; font-weight: 700; color: var(--primary); }
.rv-link svg.i { width: 15px; height: 15px; }
.rv-google { margin: 26px 0 0; }
.rv-google-top { margin: 0 0 30px; }
.rv-group + .rv-group { margin-top: clamp(44px, 6vw, 72px); }
.rv-group h2 { margin: 0 0 24px; font-size: clamp(26px, 3vw, 38px); }
.rv-band { margin-top: clamp(36px, 5vw, 56px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid rgba(255, 255, 255, .16); }
.rv-band-h { margin: 0 0 22px; font-size: clamp(22px, 2.4vw, 28px); color: #fff; }
.rv-band .review { color: var(--ink); }
.rv-band-more { display: flex; flex-wrap: wrap; gap: 12px 30px; margin: 24px 0 0; }
.rv-lp { margin-top: clamp(40px, 6vw, 64px); }
.rv-lp-h { margin: 0 0 24px; font-size: clamp(26px, 3vw, 38px); }
.rv-cta { justify-content: center; }
@media (max-width: 960px) { .reviews, .rv-grid.rv-n1, .rv-grid.rv-n2 { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------------------------- faq */
/* FAQ accordions: flat one-line rows, one open at a time (core.js). */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0 18px; transition: border-color .2s, box-shadow .2s; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.faq details[open] { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-weight: 600; font-size: 16px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq-i { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: transparent; color: var(--ink-2); flex: none; transition: transform .25s; }
.faq-i svg.i { width: 18px; height: 18px; }
.faq details[open] .faq-i { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--ink-2); }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group h2 { font-size: 26px; margin-bottom: 16px; }

/* ------------------------------------------------------------------ areas */
.areas { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.area { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "n name go" "n strap go" "n meta go"; gap: 2px 14px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .2s; }
.area > :not(.area-go) { transition: transform .25s; }
/* only where there is a real pointer (a tap on a phone would leave it shifted) */
@media (hover: hover) { .area:hover { background: var(--surface-2); } .area:hover > :not(.area-go) { transform: translateX(14px); } }
.area-n { grid-area: n; font-family: var(--font-display); font-weight: 700; color: var(--muted); }
.area b { grid-area: name; font-family: var(--font-display); font-size: 23px; letter-spacing: -.01em; }
.area small { grid-area: strap; color: var(--ink-2); font-size: 15.5px; }
.area-meta { grid-area: meta; display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: 14px; font-weight: 600; }
.area-meta svg.i { width: 16px; height: 16px; }
.area-go { grid-area: go; color: var(--primary); }

/* ----------------------------------------------------------------- office */
.office { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.office-media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); }
.office-text h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 14px; }
.office-text > p:not(.eyebrow) { color: var(--ink-2); font-size: 18px; }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 26px; margin-top: 22px; font-weight: 600; color: var(--ink-2); }
.hours dt { color: var(--ink); font-weight: 700; }
@media (max-width: 800px) { .office { grid-template-columns: 1fr; } .office-media img { aspect-ratio: 4 / 3; } }

/* --------------------------------------------------------- landlord band */
.llband { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: center; border-radius: var(--radius-lg); padding: clamp(28px, 5vw, 64px); overflow: hidden; position: relative; }
.llband h2 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 16px; }
.llband-text > p { font-size: 18px; max-width: 560px; }
.ll-services { display: grid; gap: 10px; margin-top: 26px; }
.ll-services a { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; padding: 14px 18px; border-radius: var(--radius-sm); text-decoration: none; transition: background .2s; }
.ll-services b { font-size: 17px; }
.ll-services span { font-size: 15px; grid-column: 1; opacity: .8; }
.ll-services svg.i { grid-column: 2; grid-row: 1 / 3; }
.llband-media { position: relative; }
.llband-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.llband-stat { position: absolute; left: -18px; bottom: 24px; padding: 18px 20px; border-radius: var(--radius); max-width: 220px; box-shadow: var(--shadow-lg); }
.llband-stat b { display: block; font-family: var(--font-display); font-size: 40px; line-height: 1; }
.llband-stat span { font-size: 14px; font-weight: 600; }
@media (max-width: 900px) { .llband { grid-template-columns: 1fr; } .llband-media img { aspect-ratio: 16 / 10; } .llband-stat { left: 14px; } }

/* --------------------------------------------------- services, props, why */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
@media (hover: hover) { .service:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); } }
.service-i { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); margin-bottom: 6px; }
.service-i svg.i { width: 26px; height: 26px; }
.service h3 { font-size: 22px; }
.service p { color: var(--ink-2); }
.service .link { margin-top: auto; padding-top: 6px; }
.service-cta { background: var(--surface-2); }
@media (max-width: 900px) { .services { grid-template-columns: 1fr; } }
.props { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.props > div { display: grid; gap: 8px; align-content: start; }
.props svg.i { width: 30px; height: 30px; color: var(--primary); margin-bottom: 8px; }
.props h3 { font-size: 19px; }
.props p { color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 960px) { .props { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .props { grid-template-columns: 1fr; } }
.why { display: grid; gap: 22px; counter-reset: w; }
.why li { display: grid; grid-template-columns: 54px 1fr; gap: 4px 14px; counter-increment: w; }
.why li::before { content: "0" counter(w); grid-row: 1 / 3; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--primary); padding-top: 2px; }
.why b { font-size: 19px; font-family: var(--font-display); }
.why span { color: var(--ink-2); }
.ticks { display: grid; gap: 10px; margin-top: 18px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-weight: 500; }
.ticks svg.i { color: var(--ok); margin-top: 3px; width: 19px; height: 19px; }
.ticks-lg li { font-size: 17.5px; }
.checklist { display: grid; gap: 10px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; font-weight: 600; }
.checklist svg.i { color: var(--primary); margin-top: 2px; }
.feature-link { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; text-decoration: none; transition: border-color .2s, transform .2s; }
.feature-link:hover { border-color: var(--primary); transform: translateY(-2px); }
.feature-link > svg.i:first-child { width: 30px; height: 30px; color: var(--primary); }
.feature-link b { display: block; font-size: 19px; font-family: var(--font-display); }
.feature-link small { color: var(--ink-2); font-size: 15px; }
/* Area pages: the line for landlords under the hero's buttons, and the
   landlords' block lower down (HMO management in the area). */
.phero-ll { margin-top: 18px; }
.area-ll .actions { margin-top: 26px; }
.area-ll-services { align-content: start; gap: 14px; }
/* The landlords page: the areas we cover, under the services. */
.ll-areas { margin-top: clamp(56px, 7vw, 96px); }

/* ----------------------------------------------------- register band */
.regband { display: grid; grid-template-columns: .9fr 1.1fr; gap: 32px; align-items: center; border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 48px); }
.regband h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 10px; }
/* The email gets a full row so "you@example.com" is never cut off; group
   size, area and the button share the row under it. (Design 4's theme sets
   its own single-row layout.) */
.regform { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.regform .fld-email, .regform .btn, .regform-more { grid-column: 1 / -1; }
/* The choices beyond the email sit in "More options": open (and the summary
   hidden) from 761px up, folded on phones (core.js). */
.regform-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.regform-more > summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.regform-more[open] > summary { margin-bottom: 6px; }
@media (min-width: 761px) { .regform-more > summary { display: none; } }
.regform .btn { min-height: 48px; }
.fld-help { display: block; font-size: 13px; line-height: 1.35; margin-top: 4px; opacity: .8; font-weight: 400; }
.regband .fld-help { color: rgba(255, 255, 255, .74); opacity: 1; }
.want { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.want > .fld:first-child { grid-column: 1 / -1; }
@media (max-width: 520px) { .want { grid-template-columns: 1fr; } }
.regband .link { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
@media (max-width: 1000px) { .regband { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .regform, .regform-opts { grid-template-columns: 1fr 1fr; } .regform .fld-movein, .regform .fld-area { grid-column: 1 / -1; } }
@media (max-width: 360px) { .regform, .regform-opts { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- search form */
/* The property search (the homepage's bar and the houses filters, the refined
   design): white boxes on the page, each with its label in small capitals
   inside it, so the whole box is the control, and its value in 16px text. */
.search { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: stretch; color: var(--ink); }
.s-box, .f-box { position: relative; display: grid; align-content: center; gap: 3px; min-width: 0; min-height: 66px; padding: 10px 14px 9px; background: var(--surface); border: 1px solid var(--field-line, #8a8c96); border-radius: var(--radius-field, var(--radius-sm)); color: var(--ink); cursor: pointer; }
.s-box > span, .f-box > span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; color: var(--eyebrow, var(--muted)); }
.s-box select, .f-box select { width: 100%; min-width: 0; min-height: 30px; padding: 0 24px 0 0; border: 0; border-radius: 0; background: transparent 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 16px; color: var(--ink); font: inherit; font-size: 16px; font-weight: 500; line-height: 1.4; text-overflow: ellipsis; cursor: pointer; appearance: none; -webkit-appearance: none; }
.f-box input[type="date"] { width: 100%; min-width: 0; min-height: 30px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; font-weight: 500; }
.s-box :is(select, input):focus-visible, .f-box :is(select, input):focus-visible { outline: none; }
/* the list fills its whole box, caption included, so a tap anywhere in the box opens it (the caption stays visible through it) */
.s-box > select, .f-box > select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 28px 40px 8px 14px; background-position: right 14px center; }
.s-box > span, .f-box > span { pointer-events: none; }
.s-box:has(> select), .f-box:has(> select) { align-content: start; }
.s-box:hover, .f-box:hover { border-color: var(--ink); }
.s-box:has(:focus-visible), .f-box:has(:focus-visible) { border-color: var(--ink); outline: 3px solid var(--focus, color-mix(in srgb, var(--primary) 70%, transparent)); outline-offset: 2px; }
.search .btn { min-height: 66px; padding: 12px 28px; border-radius: var(--radius-field, var(--radius-sm)); }
@media (max-width: 900px) { .search { grid-template-columns: repeat(2, minmax(0, 1fr)); } .search .btn { grid-column: 1 / -1; min-height: 56px; } }
@media (max-width: 600px) { .search { grid-template-columns: minmax(0, 1fr); } .s-box { min-height: 62px; } }

/* ----------------------------------------------- the houses filters, results */
/* The four main filters in one row (type, area, budget and its basis,
   move-in) with "More filters" beside them; the rest underneath, folded
   away until asked for (or while one of them is set). Without scripts
   everything shows. */
.filters { display: grid; gap: 12px; }
.f-main { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: stretch; }
.f-extra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.js .filters:not(.is-open) .f-extra { display: none; }
.filters label.chk { min-height: 56px; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--field-line, #8a8c96); border-radius: var(--radius-field, var(--radius-sm)); background: var(--surface); font-size: 16px; font-weight: 600; }
.filters label.chk[hidden] { display: none; }
.filters label.chk input { width: 20px; height: 20px; margin: 0; }
.filters label.chk:has(:focus-visible) { outline: 3px solid var(--focus, color-mix(in srgb, var(--primary) 70%, transparent)); outline-offset: 2px; }
.filters label.chk input:focus-visible { outline: none; }
.f-toggle { min-height: 66px; padding: 10px 18px; gap: 8px; background: var(--surface); border: 1px solid var(--field-line, #8a8c96); border-radius: var(--radius-field, var(--radius-sm)); font-size: 16px; }
.f-toggle svg.i { width: 19px; height: 19px; }
.f-acts { display: none; }
@media (max-width: 1000px) {
  .f-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-toggle { grid-column: 1 / -1; min-height: 52px; }
  .f-extra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .f-main, .f-extra { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .filters { gap: 10px; }
  .f-box { min-height: 62px; }
  .f-toggle { min-height: 48px; }
  /* open: Clear and "Show 2 listings", kept in view just above the phone bar */
  .js .filters.is-open .f-acts { display: flex; gap: 8px; position: sticky; bottom: calc(var(--mbar-h, 70px) + env(safe-area-inset-bottom)); z-index: 2; margin: 0 calc(var(--gutter, 20px) * -1); padding: 10px var(--gutter, 20px); background: var(--paper, var(--surface)); border-top: 1px solid var(--line); }
  /* each label on one line: Clear takes the room its words need, Show the rest */
  .f-acts .btn { min-height: 48px; flex: 1 1 auto; justify-content: center; white-space: nowrap; padding-left: 12px; padding-right: 12px; font-size: 16px; }
  .f-acts .f-show { flex-grow: 3; }
}
.results-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 20px; margin: clamp(30px, 4vw, 44px) 0 20px; }
.results-h { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; }
.results-count { font-weight: 600; font-size: 16px; color: var(--ink-2); }
.results-note { font-size: 15px; color: var(--muted); max-width: 40em; }
.results-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; font-weight: 700; font-size: 15px; color: var(--ink-2); }
.seg button svg.i { width: 17px; height: 17px; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.results-page .results-map { display: none; }
.results-page[data-view="map"] .results-list { display: none; }
.results-page[data-view="map"] .results-map { display: block; }
/* Map view with nothing found: the empty message, with its ways out, above the map. */
.results-page[data-view="map"].is-empty .results-list { display: block; margin-bottom: 18px; }
.results-info { display: grid; gap: 2px; justify-items: start; }
/* Inline, so on a phone the arrow follows the last word when the link wraps. */
.results-area { display: inline-block; min-height: 24px; font-size: 15px; }
.results-area svg.i { vertical-align: -3px; margin-left: 4px; }

/* ------------------------------------------------------------------- maps */
.map { width: 100%; height: 420px; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); z-index: 1; position: relative; }
.map-tall { height: min(680px, 75vh); min-height: 420px; }
.map-sm { height: 260px; margin-top: 18px; }
.map-house { height: 340px; }
.map-fallback { padding: 24px; color: var(--muted); }
.map-fallback p + p { margin-top: 14px; }
.leaflet-container { font-family: var(--font-body) !important; }
.mpin-wrap { background: none !important; border: 0 !important; }
/* keyboard focus on map pins and the map credits (the map clips anything outside it) */
.mpin-wrap:focus-visible { outline: none; }
.mpin-wrap:focus-visible .mpin { outline: 3px solid var(--focus, color-mix(in srgb, var(--primary) 70%, transparent)); outline-offset: 2px; }
.leaflet-control-attribution a:focus-visible, .leaflet-control-zoom a:focus-visible { outline-offset: -3px; }
.mpin { display: inline-flex; align-items: center; gap: 6px; transform: translate(-50%, -50%); white-space: nowrap; font-weight: 800; font-size: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); }
.mpin svg.i { width: 18px; height: 18px; }
.mpin-house { background: var(--primary); color: var(--primary-ink); padding: 6px 11px; border-radius: 999px; border: 2px solid #fff; }
.mpin-house.is-let { background: #6b7280; }
.mpin-uni, .mpin-office { width: 36px; height: 36px; justify-content: center; border-radius: 50%; background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.mpin-office { background: var(--accent); color: var(--accent-ink); border-color: #fff; }
/* An area's name sits above its point, so the price pins of houses there don't cover it. */
.mpin-area { background: rgba(255, 255, 255, .92); color: var(--ink); padding: 5px 10px 5px 7px; border-radius: 999px; font-size: 13px; transform: translate(-50%, -160%); }
.mpin-area svg.i { width: 15px; height: 15px; color: var(--primary); }
.leaflet-popup-content-wrapper { border-radius: 14px !important; }
.leaflet-popup-content { margin: 10px 12px !important; font-size: 15px !important; }
.mpop { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: center; text-decoration: none; color: var(--ink) !important; min-width: 230px; }
.mpop img { width: 74px; height: 56px; object-fit: cover; border-radius: 8px; }
.mpop b { display: block; font-size: 15px; line-height: 1.25; }
.mpop small { color: var(--muted); font-size: 13px; }
.mpop-txt { font-weight: 700; color: var(--ink) !important; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }

/* ------------------------------------------------------------- house page */
/* The refined design's property detail: the kind of let, the name and the
   summary; the listing's own photos beside the price card; then the
   description, "Availability and costs" (the rooms one by one), the booking
   card in its own column (sticky beside the page from 1001px; after
   "Availability and costs" below that), media, location, the question form
   and applying. */
.house-wrap { --side: 390px; padding-top: 22px; padding-bottom: 40px; }
.house-head { margin: 22px 0 26px; max-width: 920px; }
.house-kind { margin-bottom: 10px; }
.house-title { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.06; margin: 0; }
.house-lead { margin-top: 14px; font-size: 19px; line-height: 1.5; color: var(--muted); max-width: 46em; }
.house-top { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); column-gap: clamp(28px, 4vw, 56px); row-gap: 20px; align-items: start; }
/* The gallery: the main photo in a wide frame, up to four more under it. */
.house-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; position: relative; }
.hg-item { border: 0; padding: 0; background: var(--surface-2); overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; border-radius: 8px; }
.hg-item img { width: 100%; height: 100%; object-fit: cover; }
.hg-0 { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 10; border-radius: var(--radius-card, var(--radius)); }
/* "View all N photos" sits on the main photo's corner (the same grid cell). */
.hg-count { grid-column: 1 / -1; grid-row: 1; align-self: end; justify-self: end; margin: 0 14px 14px 0; position: relative; display: inline-flex; gap: 7px; align-items: center; min-height: 40px; background: rgba(255, 255, 255, .95); color: #111; padding: 8px 13px; border-radius: 10px; font-weight: 700; font-size: 15px; }
.hg-count svg.i { width: 17px; height: 17px; }
.hg-data { display: none; }
/* The price card: the rent with its period and what it is for, then the facts a visitor weighs it with. */
.house-price { display: grid; gap: 16px; padding: clamp(20px, 2.4vw, 28px); background: var(--surface); border: 1px solid var(--card-line, var(--line)); border-radius: var(--radius-card, var(--radius)); }
.hp-rent { font-family: var(--font-display); font-size: 24px; line-height: 1.2; color: var(--ink); font-variant-numeric: lining-nums; }
.hp-rent b { font-size: clamp(34px, 3.2vw, 42px); font-weight: 600; letter-spacing: -.01em; }
.hp-eq { margin-top: -10px; font-size: 15px; color: var(--muted); }
.hp-facts > div { display: grid; grid-template-columns: minmax(7.5em, 38%) minmax(0, 1fr); gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--card-line, var(--line)); }
.hp-facts dt { font-size: 15px; color: var(--muted); }
.hp-facts dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.hp-note { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--ink-2); }
.hp-acts { display: grid; gap: 10px; }
.hp-acts .btn { justify-content: flex-start; padding-left: 18px; border-radius: var(--radius-field, var(--radius-sm)); }
.hp-acts .btn svg.i { width: 19px; height: 19px; }
.hp-more { font-size: 15.5px; color: var(--muted); line-height: 1.6; }
.hp-more a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
/* The rest: the details in the wide column, the booking card in the narrow one. */
.house-grid > * { min-width: 0; }
.house-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); grid-template-areas: "about book" "avail book" "details book" "live book"; column-gap: clamp(28px, 4vw, 56px); align-items: start; }
.house-about { grid-area: about; }
.house-avail { grid-area: avail; }
.house-details { grid-area: details; }
.house-grid > .book { grid-area: book; align-self: start; margin-top: 44px; }
.house-grid > .live-here { grid-area: live; margin-top: 30px; }
.house-sec { margin-top: 44px; }
.house-sec h2 { font-size: clamp(26px, 2.6vw, 32px); margin-bottom: 16px; }
.house-desc { font-size: 18px; color: var(--ink-2); }
.house-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 22px; }
.house-facts > div { padding: 12px 14px; background: var(--surface); border: 1px solid var(--card-line, var(--line)); border-radius: var(--radius-field, var(--radius-sm)); }
.house-facts dt { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.house-facts dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; }
.house-addr { display: flex; gap: 8px; align-items: center; margin-top: 20px; color: var(--ink-2); font-weight: 600; }
.avail-card { padding: clamp(18px, 2.4vw, 26px); background: var(--surface); border: 1px solid var(--card-line, var(--line)); border-radius: var(--radius-card, var(--radius)); }
.avail-card h2 { margin-bottom: 16px; }
.avail-card .fine { margin-top: 12px; }
.rooms { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--card-line, var(--line)); border-radius: var(--radius-field, var(--radius)); overflow: hidden; }
.rooms th, .rooms td { text-align: left; padding: 14px 14px; border-bottom: 1px solid var(--card-line, var(--line)); font-size: 16px; vertical-align: middle; }
.rooms th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); background: var(--surface-2); }
.rooms tr:last-child td { border-bottom: 0; }
.rooms small { color: var(--muted); }
.rooms-pw { display: block; font-size: 14px; color: var(--muted); }
.rooms tr.is-let td { color: var(--muted); }
.show-s { display: none; }
.pill { display: inline-flex; padding: 5px 11px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.pill.ok { background: var(--ok-soft); color: color-mix(in srgb, var(--ok) 85%, #000); }
.pill.let { background: var(--let-soft); color: var(--let); }
.area-mini { margin-top: 18px; padding: 22px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); }
.area-mini p { color: var(--ink-2); }
.area-mini .link { margin-top: 14px; }
/* The question form, in a card of its own. */
.house-ask-sub { margin: -6px 0 16px; color: var(--muted); }
.ask-form { padding: clamp(18px, 2.4vw, 26px); background: var(--surface); border: 1px solid var(--card-line, var(--line)); border-radius: var(--radius-card, var(--radius)); }
.ask-form .btn { justify-self: start; }
.apply-band { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; padding: 28px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.apply-band h2 { font-size: 26px; margin-bottom: 6px; }
.apply-band p { color: var(--ink-2); max-width: 520px; }
.book { position: sticky; top: calc(var(--hdr-h) + 18px); background: var(--surface); border: 1px solid var(--card-line, var(--line)); border-radius: var(--radius-card, var(--radius-lg)); padding: 24px; display: grid; gap: 12px; }
.bf-f { display: grid; gap: 4px; }
.book h2 { font-size: 24px; }
.book-sub { color: var(--muted); font-size: 15px; margin-top: -4px; }
.book .lbl { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-top: 4px; }
.days, .slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot { min-width: 0; border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: 9px 4px; font-weight: 700; font-size: 15px; text-align: center; line-height: 1.25; transition: border-color .15s, background .15s; }
.slot small { display: block; font-weight: 600; color: var(--muted); font-size: 12.5px; }
.slot:hover:not(:disabled) { border-color: var(--primary); }
.slot[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.slot[aria-pressed="true"] small { color: inherit; opacity: .8; }
.slot:disabled { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.book-form { display: grid; gap: 10px; margin-top: 6px; }
.book-alt { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 14.5px; color: var(--muted); }
.book-alt svg.i { width: 16px; height: 16px; }
.book-alt a { color: var(--ink); font-weight: 700; }
/* "More dates" sits on the Day heading's line, so it adds no height to the card. */
.bk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.slot-more { border: 0; background: none; padding: 10px 0; margin: -10px 0; font-size: 13.5px; font-weight: 700; line-height: 1.2; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.apply-acts { display: flex; flex-wrap: wrap; gap: 10px; }
/* Beside the page the card is laid out tight (days on one row, times in
   fives, phone and group side by side), so the whole form, button included,
   fits a laptop screen while it sticks. Only on a very short screen does it
   scroll inside itself. The floating buttons step aside if they would cover
   any of it. */
@media (min-width: 1001px) {
  .book { gap: 10px; max-height: calc(100vh - var(--hdr-h) - 36px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .book-sub { font-size: 14.5px; line-height: 1.45; }
  .book .lbl { margin-top: 2px; }
  .book .days { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .book .slots { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .book .days .slot { padding: 6px 0; }
  .book .days .slot small { font-size: 12px; }
  .book-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 4px; }
  .book-form > * { grid-column: 1 / -1; }
  .book-form > .bf-f:nth-of-type(3), .book-form > .bf-f:nth-of-type(4) { grid-column: auto; }
  /* Times read "12.30pm": a size smaller so five fit a row, rows the same height as before. */
  .book .slots .slot { padding: 9.625px 0; font-size: 14px; }
  .book .bf-f > .lbl { display: none; }
  .book-alt { font-size: 14px; line-height: 23.2px; }   /* fits "Privacy notice" on the line; same line height as at 14.5px */
}
.loading { padding: 60px 0; color: var(--muted); }
@media (max-width: 1000px) {
  .house-top { grid-template-columns: minmax(0, 1fr); }
  .house-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "about" "avail" "book" "details" "live"; }
  .book { position: static; }
}
@media (max-width: 700px) {
  .rooms .hide-s { display: none; } .show-s { display: block; font-size: 15px; color: var(--muted); font-weight: 500; }
  .rooms th, .rooms td { padding: 12px 10px; font-size: 16px; }
  .avail-card { padding: 16px 12px; margin: 0 -4px; }
}
/* Phones: the first photo only, with "View all N photos" on it, then the price card. */
@media (max-width: 760px) {
  .house-head { margin: 14px 0 20px; }
  .house-title { font-size: clamp(32px, 9vw, 40px); }
  .house-lead { font-size: 17px; }
  .house-gallery { grid-template-columns: minmax(0, 1fr); }
  .hg-1, .hg-2, .hg-3, .hg-4 { display: none; }
  .hg-0 { aspect-ratio: 3 / 2; }
  .hg-count { min-height: 44px; }
  .hp-more a { display: inline-flex; align-items: center; min-height: 44px; }
  .house-sec { margin-top: 36px; }
  .house-grid > .book { margin-top: 36px; }
}

/* ------------------------------------------------------------ area pages */
.area-facts { display: grid; gap: 12px; }
.area-facts div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.area-facts small { display: block; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.area-facts b { font-family: var(--font-display); font-size: 22px; overflow-wrap: anywhere; }
.area-life { display: grid; gap: 26px; }
.area-life h2 { font-size: 24px; margin-bottom: 8px; }
.area-life p { color: var(--ink-2); font-size: 17.5px; }

/* ------------------------------------------------- calculator, law box */
.calc { border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 32px); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.calc-in { display: grid; gap: 14px; }
.calc > *, .calc-in > *, .calc-out > * { min-width: 0; }
.calc h3 { font-size: 24px; }
.calc > .calc-in > p { color: var(--ink-2); }
/* A hint or error under one field of a two-column row (here and in every
   form) doesn't stretch or push down the other field's box. */
.row2:has(.err-msg) > .fld { align-content: start; }
.calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-out div { background: var(--surface-2); border-radius: var(--radius-sm); padding: 16px; }
.calc-out small { display: block; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.calc-out b { font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); letter-spacing: -.02em; }
/* Phones: on the narrowest the two figures sit one above the other, so a yearly figure fits on its
   line; with large text a long figure wraps inside its box instead of pushing the page sideways. */
@media (max-width: 760px) { .calc-out b { overflow-wrap: anywhere; } }
@media (max-width: 374px) { .calc-out { grid-template-columns: 1fr; } }
.rrbox { border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 32px); background: var(--surface); border: 1px solid var(--line); }
.rrbox-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.rrbox-head > svg.i { width: 34px; height: 34px; color: var(--primary); flex: none; }
.rrbox-head .eyebrow { margin-bottom: 4px; }
.rrbox h3 { font-size: 24px; }
.rrbox > p { color: var(--ink-2); }
.rrbox dl { display: grid; gap: 14px; margin-top: 18px; }
.rrbox dl div { border-left: 3px solid var(--accent); padding-left: 14px; }
.rrbox dt { font-weight: 800; }
.rrbox dd { color: var(--ink-2); font-size: 16px; }

/* ---------------------------------------------------------------- contact */
.contact { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.contact > * { min-width: 0; }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 12px; }
.contact-card h2 { font-size: 24px; margin-bottom: 4px; }
.contact-card > p { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.contact-card > p svg.i { color: var(--primary); margin-top: 3px; }
.contact-card a { text-decoration: none; overflow-wrap: anywhere; }
.contact-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

/* --------------------------------------------------- landing page (ads) */
.lp { padding: clamp(36px, 6vw, 80px) 0; }
.lp-in { display: grid; grid-template-columns: 1fr 470px; gap: clamp(30px, 5vw, 64px); align-items: start; }
.lp h1 { font-size: clamp(36px, 5vw, 58px); }
.lp .lead { font-size: 19px; margin-top: 18px; color: var(--ink-2); }
.lp-call { margin-top: 26px; font-weight: 600; color: var(--ink-2); }
.lp-call a { display: inline-flex; gap: 6px; align-items: center; font-weight: 800; color: var(--ink); text-decoration: none; }
@media (max-width: 980px) { .lp-in { grid-template-columns: 1fr; } }
.steps-form { display: grid; }
.sf-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 18px; }
.sf-progress span { height: 6px; border-radius: 6px; background: var(--line); transition: background .3s; }
.sf-progress span.on { background: var(--accent); }
.sf-step { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; min-width: 0; }
.sf-step legend { font-family: var(--font-display); font-size: 24px; font-weight: 700; padding: 0; margin-bottom: 4px; display: flex; flex-direction: column; letter-spacing: -.01em; }
.sf-step legend small { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.sf-nav { display: grid; grid-template-columns: auto 1fr; gap: 10px; }

/* ------------------------------------------------------ modal, lightbox */
.modal-wrap { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; }
.modal-scrim { position: absolute; inset: 0; background: rgba(5, 10, 20, .6); backdrop-filter: blur(3px); }
.modal { position: relative; width: 100%; max-width: 600px; max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); color: var(--ink); border-radius: var(--radius-lg); padding: clamp(22px, 4vw, 34px); box-shadow: var(--shadow-lg); animation: pop .22s ease-out; }
.modal h2 { font-size: 26px; padding-right: 44px; }
.modal-sub { color: var(--ink-2); margin: 8px 0 18px; }
.apply-form .person { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px 2px; margin: 0; min-width: 0; display: grid; gap: 12px; }
.apply-form .person legend { font-weight: 700; padding: 0 6px; margin-left: -6px; }
.apply-form .g-block { display: grid; gap: 12px; }
.modal-x { position: absolute; top: 14px; right: 14px; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.modal-lb .modal { max-width: 1100px; background: #0b0d12; padding: 0; overflow: hidden; }
.modal:focus { outline: none; }   /* focused only when it holds nothing else to focus; the dialog itself isn't a control */
.modal-lb .modal-x { z-index: 2; background: rgba(255, 255, 255, .92); }
.lb { margin: 0; }
.lb img { width: 100%; max-height: 82vh; object-fit: contain; background: #0b0d12; }
.lb figcaption { color: #cbd5e1; text-align: center; padding: 10px; font-weight: 600; }
.lb img { touch-action: pan-y; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .92); }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 160; display: grid; gap: 10px; width: min(480px, calc(100vw - 28px)); }
.toast { display: flex; gap: 12px; align-items: center; background: #0d1220; color: #fff; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-lg); font-weight: 600; animation: pop .2s ease-out; }
.toast svg.i { color: #5eead4; }
@media (max-width: 760px) { .toasts { bottom: 90px; } }
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 140; max-width: 560px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 18px 20px; display: grid; gap: 12px; font-size: 15px; }
.consent a { color: var(--primary); font-weight: 700; }
.consent-btns { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 760px) { .consent { bottom: 86px; } }

/* -------------------------------------------------------------- assistant */
/* Desktop: two small round buttons in the corner (chat, WhatsApp). They
   appear once the first screen has been scrolled past (body.fab-on) and step
   aside while a field, button or link is underneath (.is-clear), both set by
   core.js. Phones have the same things in the bottom bar instead. */
.fabs { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
.fab-on .fabs:not(.is-clear), .asst-open .fabs { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s, visibility 0s; }
/* while a corner button has focus (back from the chat, say) it stays in sight */
.fabs:focus-within { opacity: 1; visibility: visible; transform: none; }
.fab { position: relative; display: inline-grid; place-items: center; width: 52px; min-width: 52px; height: 52px; padding: 0; border-radius: 999px; border: 0; box-shadow: 0 10px 26px rgba(0, 0, 0, .22); font-weight: 700; font-size: 14px; text-decoration: none; transition: transform .2s; }
.fab:hover { transform: translateY(-2px); }
.fab svg.i { width: 22px; height: 22px; }
.fab-ai { background: var(--primary); color: var(--primary-ink); }
/* the label shows beside the button on hover and focus (it is also the button's name) */
.fab-ai span { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); padding: 8px 12px; border-radius: 8px; background: #0d1220; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.fab-ai:hover span, .fab-ai:focus-visible span { opacity: 1; }
.asst-open .fabs .fab-ai span { display: none; }
.fab-wa { background: #25d366; color: #fff; }
.fab-wa svg.i { width: 26px; height: 26px; }
/* (On phones the bottom bar has both, so the corner buttons only show on a
   page without that bar, such as the free review landing page.) */
/* The chat panel opens above the two buttons, so they stay usable. */
.asst { position: fixed; right: 20px; bottom: 144px; z-index: 95; width: min(400px, calc(100vw - 24px)); height: min(600px, calc(100vh - 168px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 80px rgba(5, 10, 25, .3); display: flex; flex-direction: column; overflow: hidden; overflow: clip; animation: pop .22s ease-out; transform-origin: bottom right; }
.fabs:not(:has(.fab-wa)) ~ .asst { bottom: 84px; height: min(600px, calc(100vh - 108px)); }
@media (max-width: 760px) {
  .asst, .fabs:not(:has(.fab-wa)) ~ .asst { left: 10px; right: 10px; width: auto; bottom: calc(78px + env(safe-area-inset-bottom)); height: min(560px, calc(100dvh - 96px)); }
  body:not(:has(> .mbar)) .fabs ~ .asst { bottom: 144px; height: min(560px, calc(100dvh - 160px)); }
  body:not(:has(> .mbar)) .fabs:not(:has(.fab-wa)) ~ .asst { bottom: 84px; height: min(560px, calc(100dvh - 100px)); }
}
.asst-h { display: flex; gap: 12px; align-items: center; padding: 16px 16px 16px 18px; background: var(--primary); color: var(--primary-ink); }
/* On a very short screen (zoomed right in) the messages give up the room, never the title, the close button or the message box. */
.asst-h, .asst-f { flex: none; }
.asst-b { min-height: 0; }
.asst-av { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .16); }
.asst-h b { display: block; font-size: 16px; }
.asst-h small { display: inline-flex; gap: 6px; align-items: center; opacity: .85; font-size: 13px; font-weight: 600; }
.asst-h small i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }
.asst-h .icon-btn { margin-left: auto; background: rgba(255, 255, 255, .14); border: 0; color: inherit; width: 44px; height: 44px; flex: none; }
.asst-b { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.msg { max-width: 88%; padding: 11px 15px; border-radius: 18px; font-size: 15.5px; line-height: 1.5; }
.msg.bot { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg.me { background: var(--primary); color: var(--primary-ink); margin-left: auto; border-bottom-right-radius: 6px; }
.msg-act { margin-top: 10px; }
.typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.qr { display: flex; flex-wrap: wrap; gap: 6px; }
.qr button { min-height: 44px; border: 1.5px solid color-mix(in srgb, var(--primary) 40%, var(--line)); background: var(--surface); color: var(--primary); border-radius: 999px; padding: 7px 13px; font-weight: 700; font-size: 14px; }
.qr button:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.asst-f { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--surface); }
.asst-f input { flex: 1; min-width: 0; border: 1.5px solid var(--field-line, #8a8c96); border-radius: 12px; padding: 11px 14px; font-size: 16px; }
.asst-f input:focus { outline: none; border-color: var(--primary); }
.asst-f .btn { min-height: 46px; width: 48px; padding: 0; }
.asst-note { font-size: 12px; color: var(--muted); text-align: center; padding: 0 12px 10px; background: var(--surface); }
/* (on a very short screen, the heading and the box keep to one line each) */
@media (max-height: 480px) {
  .asst-note, .asst-av, .asst-h small { display: none; }
  .asst-h { gap: 10px; padding: 8px 10px 8px 14px; }
  .asst-f { padding: 8px; }
}

/* ----------------------------------------------------------------- reveal */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ photo heroes */
/* Photos are never cropped. Each slide fits its photo inside the frame
   (object-fit: contain) over a blurred copy of the same photo, so the spare
   space is filled with the photo's own colours rather than bars. The slow
   "zoom" moves inside the frame, from 94% to full size, never past it. */
.slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #0b0f18; }
.slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; will-change: opacity; }
.slide::before { content: ""; position: absolute; inset: -60px; background: var(--img) center / cover no-repeat; filter: blur(30px) saturate(1.15) brightness(.78); }
.slide img { position: relative; width: 100%; height: 100%; max-width: none; object-fit: contain; will-change: transform; animation: sl-kb 14s ease-in-out infinite alternate; }
.slide:first-child { opacity: 1; }
.slides-2 .slide { animation: sl-fade2 14s linear infinite; }
.slides-3 .slide { animation: sl-fade3 21s linear infinite; }
.slides-4 .slide { animation: sl-fade4 24s linear infinite; }
.slides-2 .slide:nth-child(1), .slides-3 .slide:nth-child(1), .slides-4 .slide:nth-child(1) { animation-delay: -1.2s; }
.slides-2 .slide:nth-child(2), .slides-3 .slide:nth-child(2) { animation-delay: 5.8s; }
.slides-3 .slide:nth-child(3) { animation-delay: 12.8s; }
.slides-4 .slide:nth-child(2) { animation-delay: 4.8s; }
.slides-4 .slide:nth-child(3) { animation-delay: 10.8s; }
.slides-4 .slide:nth-child(4) { animation-delay: 16.8s; }
@keyframes sl-kb { from { transform: scale(.94); } to { transform: scale(1); } }
@keyframes sl-fade2 { 0% { opacity: 0; } 8.5% { opacity: 1; } 50% { opacity: 1; } 58.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sl-fade3 { 0% { opacity: 0; } 5.7% { opacity: 1; } 33.3% { opacity: 1; } 39% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sl-fade4 { 0% { opacity: 0; } 5% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .slide, .slide img { animation: none !important; transform: none; } .slide { opacity: 0; } .slide:first-child { opacity: 1; } }
/* pause button for pictures that keep moving (core.js adds it to the first section) */
.motion-btn { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); background: rgba(10, 12, 20, .58); color: #fff; cursor: pointer; --focus: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.motion-btn svg { width: 16px; height: 16px; }
.motion-btn:hover { background: rgba(10, 12, 20, .78); }
@media (max-width: 760px) { .motion-btn { bottom: 10px; right: 12px; width: 36px; height: 36px; } }

.phero-photo, .hero-photo, .lp-photo { position: relative; isolation: isolate; overflow: hidden; color: #fff; }
.phero-photo::before, .hero-photo::before, .lp-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--photo-overlay, linear-gradient(90deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .5) 55%, rgba(0, 0, 0, .2))); pointer-events: none; }
.phero-photo { min-height: clamp(380px, 54vh, 580px); display: flex; align-items: center; border: 0 !important; background: none !important; }
.phero-photo.phero-slim { min-height: clamp(300px, 42vh, 440px); }
.phero-photo .phero-in { width: 100%; }
.phero.phero-photo h1, .hero-photo h1, .lp-photo h1 { color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.phero.phero-photo .lead, .hero-photo .lead, .lp-photo .lead { color: rgba(255, 255, 255, .9); }
.phero.phero-photo .eyebrow, .hero-photo .eyebrow, .lp-photo .eyebrow { color: var(--photo-eyebrow, #fff); }
.phero.phero-photo .crumbs, .phero.phero-photo .crumbs a { color: rgba(255, 255, 255, .82); }
.phero.phero-photo .crumbs a:hover { color: #fff; }
.phero-photo .btn-ghost, .hero-photo .btn-ghost { border-color: rgba(255, 255, 255, .6); color: #fff; background: rgba(255, 255, 255, .06); }
.phero-photo .btn-ghost:hover, .hero-photo .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .14); }
/* dark glass, so the small labels stay readable over a bright photo */
.phero-photo .area-facts div { background: rgba(8, 10, 24, .62); border-color: rgba(255, 255, 255, .22); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.phero-photo .area-facts small { color: rgba(255, 255, 255, .92); }
.phero-photo h1 em, .hero-photo h1 em, .phero-photo .eyebrow, .hero-photo .eyebrow, .lp-photo .eyebrow { text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 18px rgba(0, 0, 0, .5); }
.lp-photo .ticks li, .lp-photo .lp-call, .lp-photo .lp-call a { color: #fff; }
.lp-photo .ticks svg.i { color: var(--photo-eyebrow, #4ade80); }
/* Phones: the photo sits whole at the top, at its own shape, and the words
   go underneath on the design's dark colour, so nothing is cropped or covered. */
@media (max-width: 760px) {
  :is(.phero-photo, .hero-photo, .lp-photo, .hero4, .band4, .dark4, .cta5, .ftr-photo) { display: block !important; min-height: 0 !important; margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; background: var(--photo-bg, #0b0f18) !important; clip-path: none !important; }
  :is(.phero-photo, .hero-photo, .lp-photo, .hero4, .band4, .dark4, .cta5, .ftr-photo)::before { display: none; }
  :is(.phero-photo, .hero-photo, .lp-photo, .hero4, .band4, .dark4, .cta5, .ftr-photo) > .slides { position: relative; inset: auto; z-index: 0; aspect-ratio: var(--ar, 3 / 2); }
  :is(.phero-photo, .hero-photo, .lp-photo, .hero4, .band4, .dark4, .cta5, .ftr-photo) > .wrap { padding-top: 28px; padding-bottom: 40px; }
  .slide img { animation: none; }
}

/* Photos on the page keep their own shape: no fixed frames that cut them. A photo that states its own
   shape (Design 5's area photo, style="aspect-ratio: w / h") keeps that, so its room is held before it loads. */
:is(.split-media, .phero-media, .office-media, .llband-media, .duo-card, .people4-media) img:not([style*="aspect-ratio"]) { aspect-ratio: auto !important; height: auto !important; object-fit: initial !important; }
.phero-frame img[style*="aspect-ratio"] { height: auto; object-fit: contain; border-radius: 0; }
.lb img, .mpop img { object-fit: contain; }
.mpop img { height: auto; }

/* Cards and the house gallery keep tidy, even frames, so the photo is fitted
   inside each one over a blurred copy of itself and nothing is cut off. */
.hcard-media, .hg-item { position: relative; isolation: isolate; background: #1b1f2a; }
.hcard-media::before, .hg-item::before { content: ""; position: absolute; inset: -30px; z-index: -1; background: var(--img) center / cover no-repeat; filter: blur(22px) saturate(1.1) brightness(.85); }
/* A card's blurred copy waits for its photo (core.js adds .ld once it has
   loaded, from the same file), so a card lower down costs nothing until it is
   near the screen. The house gallery is on the first screen and keeps its own. */
.hcard-media:not(.ld)::before { background: none; }
.hcard-media img, .hg-item img { object-fit: contain !important; }
.hcard:hover .hcard-media img, .hg-item:hover img { transform: none !important; }
.hcard-media img, .hg-item img { transition: filter .3s; }
.hcard:hover .hcard-media img, .hg-item:hover img { filter: brightness(1.06); }

/* report-a-repair page */
.photo-list { display: flex; gap: 10px; flex-wrap: wrap; }
.photo-list:empty { display: none; }
.photo-list figure { position: relative; margin: 0; }
.photo-list img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.photo-list button { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.fld input[type="file"] { padding: 10px 12px; min-height: 0; font-size: 14px; }
.fld-note, .fine { font-size: 13.5px; color: var(--muted); }
.fld > .fld-lbl { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.rnote { display: flex; gap: 10px; align-items: flex-start; background: #fdecec; border: 1px solid #f3b4b4; color: #7a1d1d; border-radius: var(--radius-sm); padding: 12px 14px; font-weight: 600; font-size: 15px; }
.rnote svg.i { flex: none; margin-top: 2px; }
.rnote a { color: inherit; }
.rnote[hidden] { display: none; }
.next-steps { display: grid; gap: 10px; list-style: decimal; padding-left: 1.2em; color: var(--ink-2); font-weight: 500; }
.next-steps li::marker { color: var(--acc-text, var(--primary)); font-weight: 600; }
.next-steps b { color: var(--ink); }
/* What a sent repair report says: the reference (large, with Copy), when, where and what. */
.ok-sum { display: grid; grid-template-columns: max-content 1fr; align-items: baseline; gap: 6px 16px; margin: 12px 0; font-size: 15px; }
.ok-sum dt { font-weight: 700; }
.ok-sum dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.ok-sum .ok-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ok-ref-n { font-size: 22px; font-weight: 800; letter-spacing: .04em; line-height: 1.2; }
@media (max-width: 700px) { .ok-sum { grid-template-columns: 1fr; gap: 0; } .ok-sum dd { margin-bottom: 8px; } }
/* The emergency warning at the top of a sent repair report. */
.ok-big .rnote { margin: 8px 0 10px; }
.ok-big .rnote b { display: inline; font-size: inherit; margin: 0; }
.ok-big .rnote svg.i { color: inherit; }
.form-h { font-size: 17px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.form-h:first-of-type { margin-top: 0; }
label.chk { align-items: flex-start; font-size: 15px; line-height: 1.4; }
label.chk input { margin-top: 2px; flex: none; }
/* A tick box's error goes on its own row under the words, not squeezed in beside them. */
label.chk:has(> .err-msg) { display: grid; grid-template-columns: auto 1fr auto; column-gap: 8px; }
label.chk > .err-msg { grid-column: 2 / -1; margin-top: 2px; }
.regband-more { margin-top: 10px; }
/* repair wizard */
.sf-progress.four { grid-template-columns: repeat(4, 1fr); }
/* The wizard shows its progress once, in the step list; the bar stays hidden. */
.wz .sf-progress { display: none; }
.wz .sf-step legend { flex-direction: row; align-items: center; gap: 14px; font-size: 26px; }
.wz-n { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--primary); color: var(--primary-ink, #fff); font-family: var(--font-body); font-size: 12px; font-weight: 700; line-height: 1; flex: none; }
.wz-n b { font-size: 20px; font-weight: 800; }
.wz-q { color: var(--ink-2); margin-top: -6px; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tile { position: relative; display: grid; justify-items: center; align-content: center; gap: 12px; min-height: 132px; padding: 18px 10px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface-2, #f5f6f8); color: var(--ink); text-align: center; font-weight: 600; font-size: 15px; line-height: 1.25; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.tile svg { width: 46px; height: 46px; color: var(--ink-2); }
.tile input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tile:hover { border-color: var(--primary); transform: translateY(-1px); }
.tile.on, .tile:has(input:checked) { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
.tile.on svg, .tile:has(input:checked) svg { color: var(--primary); }
.tile:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }
.tiles-sm { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tiles-sm .tile { min-height: 0; padding: 12px 10px; font-size: 14.5px; }
.wz-sum { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; margin: 0; font-size: 15px; }
.wz-sum dt { color: var(--muted); font-weight: 700; }
.wz-sum dd { margin: 0; font-weight: 600; }
.wz-sum img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; margin-right: 6px; border: 1px solid var(--line); }
.wz .sf-nav { margin-top: 6px; grid-template-columns: auto 1fr; }
.wz .sf-nav .btn:last-child { justify-self: end; }
@media (max-width: 700px) { .tiles { grid-template-columns: repeat(2, 1fr); } .tiles-sm { grid-template-columns: repeat(2, 1fr); } .wz-sum { grid-template-columns: 1fr; gap: 2px 0; } .wz-sum dd { margin-bottom: 8px; } .wz .sf-step legend { font-size: 22px; } }
/* On phones a step keeps to the card's width (the photo field's file input pushed it 23px past the card's
   padding), and Back and Next take a little less padding so they stay on one line where they can. */
@media (max-width: 700px) { .wz .sf-step { grid-template-columns: minmax(0, 1fr); } .wz .photo-btns { min-width: 0; } }
@media (max-width: 560px) { .wz .sf-nav .btn { padding-left: 14px; padding-right: 14px; } }
/* wizard extras */
.req { color: #b42318; font-style: normal; font-weight: 800; margin-left: 2px; }
.err-msg { display: block; color: #b42318; font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.tiles > .err-msg { grid-column: 1 / -1; }
.fld.has-err > input, .fld.has-err > select, .fld.has-err > textarea { border-color: #b42318; }
.tiles.has-err { outline: 2px solid #f3b4b4; outline-offset: 4px; border-radius: 12px; }
.wz-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; padding: 0; margin: 0 0 18px; counter-reset: none; }
.wz-steps li { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; border-top: 3px solid var(--line); font-size: 13.5px; font-weight: 700; color: var(--muted); }
.wz-steps li b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--line); color: var(--ink-2); font-size: 12px; flex: none; }
.wz-steps li.on { border-top-color: var(--primary); color: var(--ink); }
.wz-steps li.on b { background: var(--primary); color: var(--primary-ink, #fff); }
.wz-steps li.done { border-top-color: var(--ok); color: var(--ink-2); }
.wz-steps li.done b { background: var(--ok); color: #fff; }
.wz-steps li.done b::before { content: "✓"; }
.wz-steps li.done b span { display: none; }
/* Each step's number and name is a button (enabled once the step is done, to go back to it) that looks like plain text. */
.wz-go { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: inherit; min-width: 0; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.wz-go:disabled { cursor: default; }
.rnote-soft { background: var(--sun-soft, #fff4dc); border-color: #f1d79a; color: #5c3b00; }
.tips { display: grid; gap: 8px; background: var(--surface-2, #f5f6f8); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.tips b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.tips b svg.i { width: 18px; height: 18px; color: var(--primary); }
.tips ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); font-size: 15px; }
.chk-sm { font-size: 14px; padding: 7px 10px; }
.photo-btns { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.photo-btns input[type="file"]:not(.vh) { width: auto; flex: 1 1 220px; }
/* The camera input is opened by "Take a photo now": kept 1px and clipped (not display: none, which older iPhones won't open), out of the layout. */
.photo-btns input[type="file"].vh { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; margin: -1px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.photo-cam { display: none; }
@media (pointer: coarse) { .photo-cam { display: inline-flex; } }
.wz-note { background: var(--ok-soft); color: color-mix(in srgb, var(--ok) 80%, #000); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 14.5px; font-weight: 600; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wz-note button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.wz-eta { font-weight: 600; color: var(--ink-2); }
/* On phones the step names are hidden from sight only, so each step button is still read as "1 Problem", not "1". */
@media (max-width: 700px) { .wz-steps li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wz-steps li { justify-content: center; padding: 8px 4px; } }
/* track your repair */
.track-wrap { display: grid; gap: 22px; align-content: start; }
.track { display: grid; gap: 18px; border-top: 1px solid var(--line); padding-top: 20px; }
.track-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 17px; }
.track-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.track-line li { position: relative; padding: 14px 14px 14px 18px; border-left: 4px solid var(--line); background: var(--surface-2, #f5f6f8); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.track-line li b { display: block; font-size: 15px; }
.track-line li span { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }
.track-line li.done { border-left-color: var(--ok); }
.track-line li.done b::before { content: "✓ "; color: var(--ok); }
.track-line li.on { border-left-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.track-line li.on b { color: var(--primary); }
.my-list { display: grid; gap: 8px; }
.my-list .li { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 12px 14px; font: inherit; color: inherit; cursor: pointer; }
.my-list .li:hover { border-color: var(--primary); }
.my-list .li b { display: block; }
.my-list .li small { color: var(--muted); font-weight: 600; }
.my-list .li .pill { margin-left: auto; flex: none; }
@media (max-width: 700px) { .track-line { grid-template-columns: 1fr; } }
/* "Already living with us?": the tenants' card at the top of the footer
   (the repair form, the team, the gas emergency line) */
.tstrip { display: flex; align-items: center; justify-content: space-between; gap: 14px 32px; flex-wrap: wrap; padding: 22px 26px; border-radius: var(--radius-card, var(--radius)); background: var(--band-card, var(--surface-2)); }
.tstrip-t { display: grid; gap: 6px; min-width: 0; }
.tstrip-a { display: flex; align-items: center; gap: 4px 26px; flex-wrap: wrap; }
.tstrip-go, .tstrip-tel { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-weight: 700; text-decoration: none; }
.tstrip-go:hover, .tstrip-tel:hover { text-decoration: underline; text-underline-offset: 4px; }
.tstrip-go svg.i { width: 18px; height: 18px; }
.tstrip-tel svg.i { width: 17px; height: 17px; }
@media (max-width: 600px) { .tstrip { padding: 20px; } .tstrip-a { flex-direction: column; align-items: flex-start; gap: 0; } }
.live-here { margin-top: 14px; font-size: 14.5px; color: var(--ink-2); }
.live-here a { font-weight: 700; }
.mbar a.mbar-main { min-width: 0; white-space: nowrap; justify-content: center; }

/* ---------- News & advice ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.news-tools { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-bottom: clamp(26px, 4vw, 40px); }
.news-tools .fld { gap: 0; }
.news-q { position: relative; }
.news-q svg.i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.news-q input { padding-left: 42px; }
.post-feat { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: clamp(28px, 4vw, 44px); }
.post-feat-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.post-feat-media img, .pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.post-feat:hover .post-feat-media img, .pcard:hover .pcard-media img { transform: scale(1.04); }
.post-feat-body { padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.post-feat-body h2 { font-size: clamp(24px, 2.6vw, 34px); }
.post-feat-body h2 a, .pcard h3 a { text-decoration: none; color: inherit; }
.post-feat-body h2 a:hover, .pcard h3 a:hover { text-decoration: underline; }
.post-feat-body p { color: var(--ink-2); }
.post-feat time, .pcard time { font-size: 14px; color: var(--muted); font-weight: 600; }
.pcard-topic { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); margin-left: 12px; }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
.pcard { display: flex; flex-direction: column; gap: 10px; }
.pcard-media { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.pcard-body { display: grid; gap: 6px; }
.pcard h3 { font-size: 18px; line-height: 1.35; }
.news-empty { padding: 30px 0; color: var(--ink-2); }
.link-btn { background: none; border: 0; padding: 0; color: var(--primary); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: clamp(28px, 4vw, 44px); padding-top: 24px; border-top: 1px solid var(--line); }
.pager-mid { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 600; }
.pager select { min-height: 40px; padding: 6px 10px; border: 1px solid var(--field-line, #8a8c96); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; }
.pager button[disabled] { opacity: .45; cursor: default; }
.pager [data-pg-back] svg.i { transform: rotate(180deg); }
.nl-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); margin-top: 36px; }
.nl-box h3 { font-size: 22px; margin-bottom: 6px; }
.nl-box > p { color: var(--ink-2); margin-bottom: 16px; font-size: 15.5px; }
.nl-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 12px; align-items: end; }
.nl-box .fine { margin-top: 12px; font-size: 13px; color: var(--muted); }
.nl-box .fine a { color: inherit; }
.nl-box .ok-msg { margin: 0; }
.post { padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); }
.post-in { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.post-main { max-width: 780px; }
.post h1 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.1; margin-bottom: 16px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; color: var(--muted); font-size: 15px; margin-bottom: 26px; }
.post-sep { opacity: .6; }
.post-share, .share-row { display: inline-flex; align-items: center; gap: 6px; }
.post-share b, .share-row b { color: var(--ink-2); margin-right: 4px; }
.post-share a, .share-row a { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ink-2); border: 1px solid transparent; transition: background .2s, color .2s; }
.post-share a:hover, .share-row a:hover { background: var(--surface-2); color: var(--ink); }
.post-share svg.i, .share-row svg.i { width: 17px; height: 17px; }
.post-hero { margin: 0 0 28px; }
.post-hero img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); }
.standfirst { font-size: clamp(20px, 2vw, 25px); line-height: 1.4; color: var(--ink-2); font-weight: 500; margin-bottom: 26px; }
.post-body h2 { margin-top: 34px; }
.post-body h2 + ul, .post-body h2 + p { margin-top: 0; }
.post-body > p, .post-body li { max-width: 52ch; }   /* about 70 characters a line on wide screens (Inter's "0", which sets the ch, is wider than most letters); the standfirst stays wider */
.post-note { font-weight: 700; color: var(--ink); margin-top: 26px; }
.share-row { width: 100%; gap: 8px; padding: 22px 0 0; margin-top: 30px; border-top: 1px solid var(--line); }
.share-row b { font-size: 17px; }
.share-row a { width: 40px; height: 40px; background: var(--ink); color: #fff; }
.share-row a:hover { background: var(--primary); color: var(--primary-ink); }
.post-side { position: sticky; top: calc(var(--hdr-h, 72px) + 24px); }
.touch-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .06); }
.touch-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 6px; }
.touch-ic { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface-2); color: var(--primary); flex: none; }
.touch-ic svg.i { width: 24px; height: 24px; }
.touch-card h2 { font-size: 21px; margin-bottom: 4px; }
.touch-card p { color: var(--ink-2); font-size: 15px; }
.touch-card .fine { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.touch-card .fine a { white-space: nowrap; }
.touch-card .fine a { color: var(--ink); font-weight: 600; }
.touch-card a { overflow-wrap: anywhere; }
/* its buttons wrap inside the card rather than run past it (the long "Get a Free HMO Management Review") */
.touch-card > * { min-width: 0; }
.touch-card .btn { white-space: normal; text-align: center; }
@media (max-width: 900px) {
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-in { grid-template-columns: minmax(0, 1fr); }
  .post-side { position: static; }
  .post-feat { grid-template-columns: 1fr; }
  .news-tools { grid-template-columns: 1fr 1fr; }
  .news-tools .btn { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .news-tools, .nl-row { grid-template-columns: 1fr; }
  .posts { grid-template-columns: 1fr; }
  .pager { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 380px) { .contact-card { padding: 20px; } .hours { grid-template-columns: minmax(0, 1fr); } .hours dd { margin-bottom: 8px; } }
/* ---------- Protection and memberships ---------- */
.trust-sec { padding: 18px 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 24px; }
.trust li { display: flex; gap: 12px; align-items: flex-start; }
.trust svg.i { width: 26px; height: 26px; color: var(--primary); flex: none; margin-top: 2px; }
.trust b { display: block; font-size: 15px; }
.trust small { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; }
.trust small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ftr-badges { list-style: none; margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(127, 127, 127, .25); display: flex; flex-wrap: wrap; gap: 14px 32px; }
.ftr-badges li { margin: 0; }
.ftr-badges a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-size: 13px; line-height: 1.3; }
.ftr-badges svg.i { width: 26px; height: 26px; flex: none; opacity: .9; }
.ftr-badges b { display: block; font-size: 13.5px; }
.ftr-badges a:hover b { text-decoration: underline; }
.ftr-badges + .ftr-legal { margin-top: 22px; }
@media (max-width: 900px) { .trust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .trust { grid-template-columns: 1fr; } .ftr-badges { gap: 12px 20px; } }
/* Phones: bigger targets for thumbs on the small links and buttons. */
@media (max-width: 760px) {
  .ftr-legal a, .ftr-cookies { display: inline-block; padding: 6px 0; }
  .ftr ul a, .crumbs a { display: inline-block; padding: 10px 0; }
  .ftr-contact a { min-height: 44px; }
  /* the contact card's phone, WhatsApp and email, and a section's "see all" link */
  .contact-card > p:has(> a) { align-items: center; margin-block: -6px; }   /* the taller targets take up the card's gap, not more room */
  .contact-card > p:has(> a) svg.i { margin-top: 0; }
  .contact-card > p > a, .sec-head > .link { min-height: 44px; display: inline-flex; align-items: center; }
  .btn-sm, .hg-count { min-height: 44px; }
  .ftr ul li { margin: 2px 0; }
  .slot { min-height: 44px; }
  .post-share a { width: 44px; height: 44px; }
  .post-share { flex-wrap: wrap; }
  .post-sep { display: none; }
}
@media (max-width: 360px) { .post-share { gap: 2px; } .post-share a { width: 40px; } }

@media (max-width: 600px) { .seg button { font-size: 16px; } .results-tools { width: 100%; } .results-tools .seg { flex: 1 1 auto; } .results-tools .seg button { flex: 1 1 0; justify-content: center; } }

/* room cards */
.hcard-sub { font-size: 16px; color: var(--ink-2); margin-top: -4px; }
.hcard-media-tags { position: absolute; left: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.hcard-media-tags span { font-size: 12.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: rgba(10, 12, 18, .78); color: #fff; }

/* ------------------------------------------------------ house page extras */
button.hg-count { pointer-events: auto; border: 0; cursor: zoom-in; z-index: 2; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.hmedia { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hmedia-b { display: inline-flex; gap: 7px; align-items: center; min-height: 44px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; }
.hmedia-b svg.i { width: 17px; height: 17px; }
.hmedia-b:hover { border-color: var(--ink); }
.btn-wa { background: #0f7a3f; color: #fff; }
.btn-wa:hover { background: #0b6332; }
.bills-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--ok-soft); color: color-mix(in srgb, var(--ok) 70%, #000); font-size: 16px; }
.bills-note svg.i { flex: none; width: 19px; height: 19px; margin-top: 3px; }
.zd-note .link-btn { font-weight: 700; color: inherit; text-underline-offset: 3px; }
.prose .zd-guide > h2:first-child { margin-top: 40px; }
.rooms-sub { display: block; font-size: 14px; color: var(--muted); font-weight: 500; }
.rooms tr { scroll-margin-top: calc(var(--hdr-h) + 24px); }
.rooms tr:target td, .rooms tr.is-target td { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.hplans { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.hplan { padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; }
.hplan img { width: 100%; height: 100%; object-fit: contain; }
.hvideo { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #0b0d12; }
.hvideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hvideo-play { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; display: grid; place-items: center; align-content: center; gap: 12px; color: #fff; font-weight: 700; background: linear-gradient(rgba(8, 9, 14, .35), rgba(8, 9, 14, .55)), var(--img) center / cover no-repeat #0b0d12; }
.hvideo-btn { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #0e0f14; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .2s; }
.hvideo-btn svg.i { width: 30px; height: 30px; margin-left: 4px; }
.hvideo-play:hover .hvideo-btn { transform: scale(1.06); }
.hvideo-l { text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.hvideo-file { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); background: #0b0d12; }
.htour { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.htour .btn svg.i { width: 19px; height: 19px; }

/* lightbox: the photo, a counter and thumbnails */
.lb-stage { display: grid; place-items: center; background: #0b0d12; }
.lb img { max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); }
.modal-lb .modal { display: grid; }
.lb-thumbs { display: flex; gap: 8px; padding: 0 14px 14px; overflow-x: auto; scrollbar-width: thin; justify-content: safe center; }
.lb-th { flex: none; width: 84px; height: 60px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #1b1f2a; opacity: .6; transition: opacity .15s, border-color .15s; }
.lb-th img { width: 100%; height: 100%; object-fit: cover; max-height: none; }
.lb-th[aria-current="true"] { opacity: 1; border-color: var(--accent); }
.lb-th:hover { opacity: 1; }
@media (max-width: 700px) {
  .modal-lb { padding: 0; }
  .modal-lb .modal { max-height: 100vh; max-height: 100dvh; height: 100%; border-radius: 0; align-content: center; }
  .lb img { max-height: calc(100dvh - 170px); }
  .lb-nav { top: auto; bottom: 86px; transform: none; }
  .lb-th { width: 64px; height: 48px; }
}
.rooms-st { margin-top: 6px; }
.rooms-st i { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; font-style: normal; }
.rooms-st i.ok { background: var(--ok-soft); color: color-mix(in srgb, var(--ok) 85%, #000); }
.rooms-st i.let { background: var(--let-soft); color: var(--let); }
@media (max-width: 700px) {
  .rooms td:first-child { width: 58%; }
  .rooms td:nth-child(3) { white-space: nowrap; }
  .rooms .rooms-pw { white-space: normal; font-size: 14px; }
}
/* Where the table has the room (one column from 701px to 1000px, and from 1181px beside the booking card): the
   headings, a room's name and its rent ("£800 pcm / room") each stay on one line; only the kind of room and its
   description (and a rent's own notes under it) wrap. Between 1001px and 1180px the card is too narrow for that. */
@media (min-width: 701px) and (max-width: 1000px), (min-width: 1181px) {
  .rooms th, .rooms td:first-child > b, .rooms td:nth-child(3) { white-space: nowrap; }
  .rooms td:nth-child(3) .rooms-pw { white-space: normal; }
}

/* ------------------------------------------ tenant registration (/register)
   Every field of the reference form the client sent (title, names, current
   address in parts, university, guarantors, group size, budget from and to,
   areas, room type, year, bills, must-haves), laid out as the refined design's
   07 draws a form: on the warm-white page, labels above white boxes, "Your
   details" then "What you're looking for", with the dark card and what
   happens next beside it on computers. Choices are tiles: a real radio or
   tick box with its words, an ink edge and a light fill once picked. */
.treg { --tr-h: 52px; }
.treg-form { gap: 0; }
.treg-sub { margin-bottom: 28px; font-size: 16px; color: var(--muted); }
.treg-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: start; }
.treg-col { display: grid; gap: 20px; align-content: start; min-width: 0; }
.treg h2 { margin-bottom: 2px; font-size: clamp(24px, 2.2vw, 28px); color: var(--ink); }
.treg-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; align-items: start; }
.treg-row-t { grid-template-columns: 140px minmax(0, 1fr); }
/* A group under one heading. The heading floats so it lines up like a label
   (a fieldset's own legend can't take the grid's spacing). */
.treg-set { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.treg-set > legend:not(.sr) { float: left; width: 100%; margin: 0 0 -2px; padding: 0; }
.treg .fld { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.treg .fld > span, .treg-lbl { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.treg-opt { font-weight: 400; color: var(--muted); }
.treg-note { font-size: 15px; line-height: 1.45; color: var(--muted); }
.treg-note-up { margin-top: -10px; }
.treg-pc { width: 40%; min-width: 160px; }
.treg .fld-help { margin-top: 0; font-size: 14px; color: var(--muted); opacity: 1; }
.treg .fld :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { min-height: var(--tr-h); padding: 12px 16px; font-size: 16px; line-height: 1.3; }
.treg .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; }
.treg .fld textarea { min-height: 112px; resize: vertical; }
/* tiles: a real radio or tick box on the left, an ink edge and a light fill once picked */
.treg-tiles { display: grid; gap: 10px; }
.treg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.treg-2, .treg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.treg-tile { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border: 1px solid var(--field-line); border-radius: var(--radius-field, 8px); background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.25; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.treg .treg-tile input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; box-shadow: none; accent-color: var(--ink); cursor: pointer; }
.treg-tile input:focus-visible { outline: none; }
.treg-tile:hover { border-color: var(--ink); }
.treg-tile:has(input:checked) { border-color: var(--ink); background-color: var(--paper, #f5f2eb); box-shadow: inset 0 0 0 1px var(--ink); }
.treg-tile:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
/* the agreement */
.treg label.treg-consent { width: 100%; min-height: var(--tr-h); align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--field-line); border-radius: var(--radius-field, 8px); background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 600; }
.treg label.treg-consent input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.treg label.treg-consent:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.treg label.treg-consent input:focus-visible { outline: none; }
/* The areas: core.js puts a button in front of the tick boxes and opens them
   under it as a panel; without scripts they show as tiles like the others. */
.treg-areas { position: relative; }
.treg-dd { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: var(--tr-h); padding: 0 16px; border: 1px solid var(--field-line); border-radius: var(--radius-field, 8px); background: var(--surface); color: var(--ink); font-size: 16px; text-align: left; transition: border-color .15s; }
.treg-dd-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treg-dd svg.i { width: 18px; height: 18px; stroke-width: 2.2; transition: transform .2s; }
.treg-dd:hover, .treg-dd[aria-expanded="true"] { border-color: var(--ink); }
.treg-dd[aria-expanded="true"] svg.i { transform: rotate(180deg); }
.treg-dd:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.treg-areas.is-dd > .treg-set { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); padding: 8px; border: 1px solid var(--card-line, var(--line)); border-radius: 12px; background: var(--surface); box-shadow: 0 18px 40px rgba(16, 18, 17, .16); }
.is-dd .treg-list { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.is-dd .treg-tile { min-height: 48px; border-color: transparent; background: transparent; box-shadow: none; }
.is-dd .treg-tile:hover { border-color: transparent; background: var(--paper, #f5f2eb); }
.is-dd .treg-tile:has(input:checked) { border-color: transparent; background: var(--paper, #f5f2eb); box-shadow: none; font-weight: 600; }
/* the button and the small print */
.treg-send { display: grid; justify-items: start; gap: 6px; margin-top: 36px; }
.treg-send > .form-err { justify-self: stretch; margin-bottom: 10px; }
.treg-send .btn { min-width: 300px; }
.treg .fine { margin-top: 10px; }
.treg-form.is-done { max-width: 720px; }
@media (max-width: 760px) {
  .treg-row, .treg-row-t { grid-template-columns: minmax(0, 1fr); }
  .treg-pc { width: auto; min-width: 0; }
  .treg-send .btn { width: 100%; min-width: 0; }
}
@media (max-width: 560px) {
  .treg-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .treg-tile { padding: 10px 12px; gap: 10px; }
}
@media (max-width: 380px) {
  .treg-2 { grid-template-columns: minmax(0, 1fr); }
  .treg-tile { padding: 10px; gap: 8px; font-size: 15.5px; }
  .treg .treg-tile input { width: 18px; height: 18px; }
}

/* Words that belong together on one line: "+ bills" never breaks; a phrase
   (.phr) moves to the next line as a whole, and breaks only if it can't fit. */
.nw { white-space: nowrap; }
.phr { display: inline-block; }
.form-after { margin-top: 14px; }

/* Windows high contrast (forced colours) drops background colours, so the
   chosen day, time, option and tile are drawn in the system's highlight. */
@media (forced-colors: active) {
  .slot[aria-pressed="true"], .choice input:checked + span, .tile:has(input:checked), .mode button[aria-pressed="true"], .seg button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .tile svg { color: CanvasText; }
  :is(.slot[aria-pressed="true"], .choice input:checked + span, .tile:has(input:checked), .mode button[aria-pressed="true"], .seg button[aria-pressed="true"]) * { color: inherit !important; }
}