/* ==========================================================================
   Rent UK Property — the rest of the site.

   Two jobs:
     1. bring the property system (.rpuk-*: search, cards, archive, single) into
        the same design language as the homepage;
     2. tidy the Elementor content pages after the palette/font sweep.

   Colours are NOT redeclared here. The property system already carries the new
   palette in --rpuk-* (Properties → Settings → Appearance), and the Elementor
   pages carry theirs per widget, so this file only adds the two faces the older
   CSS never had — the display face and the mono — plus structure.
   ========================================================================== */

.rpuk{
  --rpuk-display:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --rpuk-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --rpuk-line:#DCE4DA;
}

/* ---------- listing card: same shape as the homepage card ---------- */
.rpuk-card{
  border:1px solid var(--rpuk-line);
  box-shadow:0 10px 26px -22px rgba(16,21,17,.5);
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.rpuk-card:hover{
  transform:translateY(-3px);
  border-color:var(--rpuk-heading);
  box-shadow:0 20px 34px -24px rgba(8,65,31,.55);
}
.rpuk-card__media{border-radius:0;}
.rpuk-card__media img{aspect-ratio:4/3;object-fit:cover;width:100%;}

/* the status flag becomes the hero's pill */
.rpuk-card__tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  top:12px;
  left:12px;
  padding:6px 11px;
  border-radius:999px;
  background:rgba(8,65,31,.92);
  color:#fff;
  font-family:var(--rpuk-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:500;
}
.rpuk-card__tag::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#5FD08A;
}
.rpuk-card__distance{
  border-radius:999px;
  font-family:var(--rpuk-mono);
  font-size:10.5px;
  letter-spacing:.06em;
}

/* the green address bar becomes a quiet mono line inside the card */
.rpuk-card__address{
  background:transparent;
  color:var(--rpuk-muted);
  padding:16px 18px 0;
  margin:0;
  font-family:var(--rpuk-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:7px;
}
/* .rpuk-card__address .rpuk-ico is white in rpuk.css, for the green band this replaces —
   two classes, so it has to be matched class-for-class or the pin stays invisible. */
.rpuk-card__address .rpuk-ico,
.rpuk-card__address svg{width:14px;height:14px;flex:none;color:var(--rpuk-primary);opacity:1;}
.rpuk-card__body{padding:8px 18px 18px;}
.rpuk-card__title{
  font-family:var(--rpuk-display);
  font-weight:600;
  font-size:18px;
  line-height:1.25;
  letter-spacing:-.01em;
  margin:0 0 8px;
}
.rpuk-card__title a{color:var(--rpuk-heading);}
.rpuk-card__title a:hover{color:var(--rpuk-primary);}
.rpuk-card__price{display:flex;align-items:baseline;gap:6px;margin:0 0 10px;}
.rpuk-card__amount{
  font-family:var(--rpuk-display);
  font-weight:700;
  font-size:23px;
  letter-spacing:-.02em;
  color:var(--rpuk-accent);
}
.rpuk-card__period{
  font-family:var(--rpuk-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--rpuk-muted);
}
.rpuk-card__summary{font-size:14.5px;line-height:1.55;color:var(--rpuk-muted);}
.rpuk-specs{
  border-top:1px solid var(--rpuk-line);
  padding-top:12px;
  margin-top:12px;
  gap:8px 16px;
  font-size:13.5px;
  color:var(--rpuk-muted);
}
.rpuk-specs svg{color:var(--rpuk-primary);}

/* ---------- search bar ---------- */
.rpuk-searchbar{
  border:1px solid var(--rpuk-line);
  box-shadow:0 12px 30px -26px rgba(16,21,17,.6);
}
.rpuk-field label,
.rpuk-facets legend,
.rpuk-facet__n{
  font-family:var(--rpuk-mono);
  font-size:10.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--rpuk-muted);
}
.rpuk-field input,
.rpuk-field select{
  font-family:inherit;
  font-size:15px;
}
.rpuk-btn--primary{
  font-weight:600;
  letter-spacing:-.005em;
}
.rpuk-chip{
  border-radius:999px;
  font-family:var(--rpuk-mono);
  font-size:11.5px;
  letter-spacing:.04em;
}

/* ---------- archive head, counts, pagination ---------- */
.rpuk-archive__title,
.rpuk-single__title,
.rpuk h1,
.rpuk h2{
  font-family:var(--rpuk-display);
  letter-spacing:-.02em;
  color:var(--rpuk-heading);
}
.rpuk-count{font-family:var(--rpuk-mono);font-size:13px;letter-spacing:.02em;}
.rpuk-count strong{color:var(--rpuk-heading);}
.rpuk-pagination a,
.rpuk-pagination span{border-radius:10px;font-family:var(--rpuk-mono);font-size:13px;}

/* ---------- single property ---------- */
.rpuk-single__price .rpuk-card__amount{
  font-family:var(--rpuk-display);
  font-weight:700;
  color:var(--rpuk-accent);
  letter-spacing:-.02em;
}
/* The enquiry price sits ON the forest header, so it stays white — rose on forest is the
   one place the price colour must not go. */
.rpuk-enquiry__price{
  font-family:var(--rpuk-display);
  font-weight:700;
  color:#fff;
  letter-spacing:-.02em;
  text-transform:none;
}
.rpuk-enquiry__status{
  border-radius:999px;
  font-family:var(--rpuk-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  background:rgba(255,255,255,.16);
  color:#fff;
}
.rpuk-fact__label,
.rpuk-fact dt,
.rpuk-desc__h{
  font-family:var(--rpuk-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--rpuk-muted);
}
.rpuk-fact__value,
.rpuk-fact dd{font-size:15.5px;margin:0;}
.rpuk-enquiry{border:1px solid var(--rpuk-line);}
.rpuk-enquiry__phone a{font-family:var(--rpuk-mono);}

/* ==========================================================================
   ELEMENTOR CONTENT PAGES
   The palette and both faces were swept into the page data itself; what is left
   is measure, rhythm and the button shape.
   ========================================================================== */

body:not(.home) .elementor-widget-text-editor,
body:not(.home) .elementor-widget-theme-post-content{
  font-size:16.5px;
  line-height:1.7;
}
body:not(.home) .elementor-widget-text-editor p{margin-bottom:1em;}

body:not(.home) .elementor-heading-title{letter-spacing:-.018em;}

/* buttons: the hero's shape, whatever the widget was set to */
body:not(.home) .elementor-button{
  border-radius:10px;
  font-weight:600;
  letter-spacing:-.005em;
}

/* the theme's own page title, where a page shows one */
.page-header .entry-title,
.rpuk-page-title{
  font-family:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  font-weight:700;
  letter-spacing:-.025em;
  color:#08411F;
}

/* Links inside body copy. Elementor leaves them to the theme, which inherited the old accent
   red — so email addresses in the About team block read as prices. */
body:not(.home) .elementor-widget-text-editor a:not(.elementor-button),
body:not(.home) .elementor-widget-theme-post-content a:not(.elementor-button){
  color:#0F7A38;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
body:not(.home) .elementor-widget-text-editor a:not(.elementor-button):hover,
body:not(.home) .elementor-widget-theme-post-content a:not(.elementor-button):hover{
  color:#08411F;
}


/* ---- ruk: uploaded logo replaces the brand mark — start ---- */
/* The Brand / Logo widget drops an uploaded image inside .ruk-brand-mark, the 40x40
   forest-green tile built for the drawn house SVG — so the tile's background shows as a
   green surround and the fixed box shrinks the logo. Only svg was ever sized in
   rentuk-hero.css; img was not. When an image is present, stand the tile down and let the
   logo size itself. The supplied logo carries the wording, so the text lockup is hidden too. */
.ruk-brand-mark:has(img){
  width:auto;
  height:auto;
  background:none;
  border:0;
  border-radius:0;
  display:block;
  place-items:initial;
}
.ruk-footer .ruk-brand-mark:has(img){
  background:none;
  border:0;
}
.ruk-brand-mark img{
  display:block;
  height:44px;
  width:auto;
  max-width:260px;
  object-fit:contain;
}
/* The logo already says the name — don't print it a second time beside it. */
.ruk-brand:has(.ruk-brand-mark img) .ruk-brand-name,
.ruk-brand:has(.ruk-brand-mark img) .ruk-brand-sub{
  display:none;
}
@media (max-width:600px){
  .ruk-brand-mark img{
    height:36px;
    max-width:200px;
  }
}
/* ---- ruk: uploaded logo replaces the brand mark — end ---- */


/* ---- ruk: mono caps retired in favour of the display face — start ---- */
/* The hero eyebrow moved off IBM Plex Mono onto Familjen Grotesk, so every
   other small-caps label follows. Rather than restate 17 rules across
   rentuk-hero.css and rentuk-home.css, the two font tokens they all read from
   are redefined here — this file loads last, so these win. Names kept as-is
   so the existing rules still resolve; only what they point at has changed.
   Affects: eyebrows, field labels, town chips and counts, brand sub-line,
   utility phone, showcase head/foot, pills, postcodes, the "pcm" beside a
   price, fact labels and figures, footer headings and contact links. */
.ruk{
  --ruk-mono:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
}
.rpuk{
  --rpuk-mono:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
}

/* The grotesk sits lighter and wider than the mono did at label sizes, so the
   eyebrow gets a touch more weight and less tracking to match the hero's. */
.ruk-eyebrow{
  font-weight:600;
  letter-spacing:.13em;
}
/* ---- ruk: mono caps retired in favour of the display face — end ---- */


/* ---- ruk: dark green swapped for the hero's action green — start ---- */
/* The dark forest was the site's dark ground; it now reads as the same green
   as the hero Search button. forest-deep follows in the new hue so the
   light/dark pair the gradients and hovers rely on still exists. */
.ruk{
  --ruk-forest:#0F7A38;
  --ruk-forest-deep:#0B6A2F;
}
/* the one place in this file that hard-coded the old forest */
body:not(.home) .elementor-widget-text-editor a:not(.elementor-button):hover,
body:not(.home) .elementor-widget-theme-post-content a:not(.elementor-button):hover{
  color:#0F7A38;
}

/* Solid buttons had near-black ink on a dark ground — barely legible.
   rentuk-hero.css sets ".ruk a{color:inherit}", which outranks a plain
   ".ruk-btn-solid" on specificity and was pulling the ink through, so the
   override has to name the anchor too. */
.ruk a.ruk-btn-solid,
.ruk a.ruk-btn-solid:hover{
  color:#FFFFFF;
}

/* "Available now / Homes we are letting this week" sits 50px higher. */
.ruk-section-listings{
  padding-top:42px;
}
/* ---- ruk: dark green swapped for the hero's action green — end ---- */


/* ---- ruk: section headings in the price red — start ---- */
/* Section H2s move off the green onto the same red the prices use
   (--ruk-rose, #C8102E). Deliberately NOT applied to two H2s that sit on
   coloured grounds and would fail: .ruk-cta-tenants h2 (white on green) and
   .ruk-footer-col h2 (small caps label in the footer). */
.ruk-section-head h2,
.ruk-story-copy h2,
.ruk-cta-landlords h2,
.rpuk h2{
  color:var(--ruk-rose,#C8102E);
}
/* ---- ruk: section headings in the price red — end ---- */

/* ---- ruk: Landlords button out of the header — start ---- */
/* Hides the widget, not just the link, so the flex row doesn't keep its gap.
   The tidier fix is deleting the button widget in the Elementor header
   template; this does it without touching the template. */
.ruk-head-actions .elementor-widget:has(a.ruk-btn-ghost){
  display:none;
}
/* ---- ruk: Landlords button out of the header — end ---- */
/* ---- ruk: heading colour switches — start ---- */
/* Per-heading colour overrides. Red is the site default (set above), so these
   are for the exceptions. Type one of these into the heading widget's
   "Extra class" field in Elementor:
       ruk-h2-green   the action green
       ruk-h2-grey    dark grey
       ruk-h2-red     the price red (only needed to undo one of the others)
   Written at .ruk h2.x and .ruk .x h2 so they outrank ".ruk-section-head h2"
   whichever element the class lands on, and regardless of file order. */
.ruk h2.ruk-h2-green,
.ruk .ruk-h2-green h2,
.rpuk h2.ruk-h2-green{
  color:#0F7A38;
}

.ruk h2.ruk-h2-grey,
.ruk .ruk-h2-grey h2,
.rpuk h2.ruk-h2-grey{
  color:#373E39;
}

.ruk h2.ruk-h2-red,
.ruk .ruk-h2-red h2,
.rpuk h2.ruk-h2-red{
  color:#C8102E;
}
/* ---- ruk: heading colour switches — end ---- */


/* ---- ruk: booking bar — start ---- */
/* Printed by the wp_body_open hook in functions.php. */
.ruk-bookbar{
  background:#C8102E;
  text-align:center;
}
.ruk-bookbar__link{
  display:inline-block;
  padding:9px 18px;
  font-family:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  color:#FFFFFF;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.ruk-bookbar__link:hover,
.ruk-bookbar__link:focus-visible{
  color:#FFFFFF;
  text-decoration:none;
}
.ruk-bookbar__link:focus-visible{
  outline:2px solid #FFFFFF;
  outline-offset:-3px;
}

/* The old green utility strip it replaces. Elementor's own container rules
   ("display:flex" on .e-con) match at the same or greater specificity, so
   !important is the honest way to win here rather than a selector arms race.
   Deleting the container in the header template makes this rule redundant. */
.ruk-utility{
  display:none !important;
}
/* ---- ruk: booking bar — end ---- */


/* ---- ruk: Book a Viewing button + white listings ground — start ---- */
/* The button is injected above the enquiry card by the template_redirect
   buffer in functions.php. Written at .rpuk .ruk-viewing__btn so the property
   system's own anchor rules can't pull the colour back out. */
.ruk-viewing{
  margin:0 0 14px;
}
.rpuk .ruk-viewing__btn,
.ruk-viewing__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 24px;
  /* 12px to match the enquiry form's "Send enquiry" button */
  border-radius:12px;
  background:#C8102E;
  color:#FFFFFF;
  font-family:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
  text-align:center;
  text-decoration:none;
  transition:background .16s ease;
}
.rpuk .ruk-viewing__btn:hover,
.rpuk .ruk-viewing__btn:focus-visible{
  background:#A80D26;
  color:#FFFFFF;
}
.rpuk .ruk-viewing__btn:focus-visible{
  outline:2px solid #C8102E;
  outline-offset:2px;
}

/* Listings pages sat on the pale green-grey paper; plain white instead. */
.rpuk.rpuk-archive{
  background:#FFFFFF;
}
/* ---- ruk: Book a Viewing button + white listings ground — end ---- */


/* ---- ruk: Find a Property to match the results page — start ---- */
/* The results page leaves 20px between its title and the search bar; this
   section carried 92px of top padding, which read as a hole under the H1.
   Bottom padding is left as it was. */
.ruk-section-search{
  /* the theme's H1 already carries 16px of margin-bottom, so 4px here lands
     the total gap on the results page's 20px */
  padding-top:4px;
}

/* The map sat centred at its content width instead of filling the column.
   .ruk-wrap is a flex column, so "margin: 0 auto" on the map was overriding
   the stretch and sizing it to content. width:100% takes the auto margins out
   of play; the horizontal padding goes too, so the map's edges line up with
   the search panel above it, as they do on the results page. */
.rpuk-listingsmap{
  width:100%;
  padding-left:0;
  padding-right:0;
}
/* ---- ruk: Find a Property to match the results page — end ---- */


/* ---- ruk: town finder — start ---- */
/* Styling for [ruk_town_finder] (registered in functions.php). Every class is
   prefixed .ruk-tf__ — the original mock used names like .search, .places and
   .controls, which are far too generic to drop into a WordPress page. */

.ruk-tf {
  --ruk-tf-image: none;
  padding: clamp(24px, 5vw, 72px) 0;
  font-family: var(--ruk-body, "Instrument Sans", "Helvetica Neue", Arial, sans-serif);
  color: var(--ruk-ink, #101511);
}
.ruk-tf * { box-sizing: border-box; }
.ruk-tf button,
.ruk-tf input,
.ruk-tf select { font: inherit; }

.ruk-tf__frame {
  width: min(100%, 1320px);
  margin: 0 auto;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--ruk-line, #DCE4DA);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(8, 65, 31, .12);
}

.ruk-tf__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .75fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: end;
  padding: clamp(28px, 4vw, 56px);
  background: var(--ruk-forest, #0F7A38);
  color: #FFFFFF;
}

.ruk-tf__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--ruk-display, "Familjen Grotesk", Arial, sans-serif);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.ruk-tf__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, .38);
}

.ruk-tf__title {
  max-width: 760px;
  margin: 0;
  font-family: var(--ruk-display, "Familjen Grotesk", Arial, sans-serif);
  font-size: clamp(2.25rem, 5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  font-weight: 700;
  color: #FFFFFF;
  text-wrap: balance;
}
.ruk-tf__title span { color: #FFFFFF; }

.ruk-tf__copy { max-width: 390px; margin-left: auto; }
.ruk-tf__copy p {
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: 1rem;
  line-height: 1.6;
}
.ruk-tf__avail {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  font-family: var(--ruk-display, "Familjen Grotesk", Arial, sans-serif);
  font-size: .9rem;
  font-weight: 600;
  color: #FFFFFF;
}
.ruk-tf__avail strong { font-size: 1.25rem; font-weight: 700; }
.ruk-tf__pulse {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #9FD5B0;
  box-shadow: 0 0 0 6px rgba(159, 213, 176, .16);
}

.ruk-tf__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(24px, 4vw, 56px);
}

.ruk-tf__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin-bottom: 26px;
}
.ruk-tf__searchwrap { position: relative; }
.ruk-tf__icon {
  position: absolute;
  width: 19px;
  height: 19px;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ruk-muted, #5C6B5F);
  pointer-events: none;
}
.ruk-tf__search,
.ruk-tf__sort {
  height: 54px;
  border: 1px solid var(--ruk-line, #DCE4DA);
  border-radius: 12px;
  outline: none;
  background: #FFFFFF;
  color: var(--ruk-ink, #101511);
}
.ruk-tf__search { width: 100%; padding: 0 18px 0 48px; }
.ruk-tf__sort {
  padding: 0 42px 0 16px;
  font-family: var(--ruk-display, "Familjen Grotesk", Arial, sans-serif);
  font-weight: 600;
  cursor: pointer;
}
.ruk-tf__search:focus,
.ruk-tf__sort:focus {
  border-color: var(--ruk-green, #0F7A38);
  box-shadow: 0 0 0 4px rgba(15, 122, 56, .14);
}

.ruk-tf__resultshead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.ruk-tf__resultstitle,
.ruk-tf__resultcount {
  margin: 0;
  font-family: var(--ruk-display, "Familjen Grotesk", Arial, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ruk-muted, #5C6B5F);
}
.ruk-tf__resultcount { letter-spacing: .06em; }

.ruk-tf__places {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ruk-tf__places li { list-style: none; }

.ruk-tf__card {
  width: 100%;
  min-height: 74px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 15px 16px 15px 18px;
  border: 1px solid var(--ruk-line, #DCE4DA);
  border-radius: 13px;
  background: #FFFFFF;
  color: var(--ruk-ink, #101511);
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ruk-tf__card:hover {
  transform: translateY(-2px);
  border-color: var(--ruk-green, #0F7A38);
  box-shadow: 0 10px 28px rgba(8, 65, 31, .10);
}
.ruk-tf__card:focus-visible {
  outline: 2px solid var(--ruk-green, #0F7A38);
  outline-offset: 2px;
}
.ruk-tf__card[aria-pressed="true"] {
  background: var(--ruk-green-soft, #E9F1E9);
  border-color: var(--ruk-green, #0F7A38);
}
.ruk-tf__name {
  min-width: 0;
  font-family: var(--ruk-display, "Familjen Grotesk", Arial, sans-serif);
  font-weight: 700;
}
.ruk-tf__count {
  color: var(--ruk-muted, #5C6B5F);
  font-size: .78rem;
  white-space: nowrap;
}
.ruk-tf__card svg {
  width: 18px;
  height: 18px;
  color: var(--ruk-rose, #C8102E);
}

.ruk-tf__empty {
  display: none;
  margin: 0;
  padding: 28px;
  border: 1px dashed var(--ruk-line, #DCE4DA);
  border-radius: 13px;
  color: var(--ruk-muted, #5C6B5F);
}

.ruk-tf__more {
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--ruk-display, "Familjen Grotesk", Arial, sans-serif);
  color: var(--ruk-green, #0F7A38);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

.ruk-tf__spotlight {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  border-radius: 18px;
  color: #FFFFFF;
  /* Slate, not green — the same #32323D the hero uses. The scrim only covers
     the lower part, behind the text; above that the photo runs at full colour. */
  background:
    linear-gradient(
      180deg,
      rgba(50, 50, 61, 0) 0%,
      rgba(50, 50, 61, 0) 42%,
      rgba(50, 50, 61, .40) 60%,
      rgba(50, 50, 61, .78) 78%,
      rgba(50, 50, 61, .94) 100%
    ),
    var(--ruk-tf-image) center / cover no-repeat,
    #32323D;
}
.ruk-tf__tag {
  align-self: flex-start;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--ruk-forest, #0F7A38);
  font-family: var(--ruk-display, "Familjen Grotesk", Arial, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ruk-tf__panel { margin-top: 180px; }
.ruk-tf__label {
  margin: 0 0 8px;
  font-family: var(--ruk-display, "Familjen Grotesk", Arial, sans-serif);
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.ruk-tf__selname {
  margin: 0 0 4px;
  font-family: var(--ruk-display, "Familjen Grotesk", Arial, sans-serif);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 700;
  color: #FFFFFF;
}
.ruk-tf__selcount { margin: 0 0 22px; color: rgba(255, 255, 255, .82); }

.ruk-tf .ruk-tf__view {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 17px;
  border-radius: 12px;
  background: var(--ruk-rose, #C8102E);
  color: #FFFFFF;
  font-family: var(--ruk-display, "Familjen Grotesk", Arial, sans-serif);
  font-weight: 600;
  text-decoration: none;
  transition: background .16s ease;
}
.ruk-tf .ruk-tf__view:hover { background: #A80D26; color: #FFFFFF; }

.ruk-tf__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Desktop: the spotlight panel carries the action, so the per-tile link is
   hidden entirely. */
.ruk-tf__action { display: none; }

@media (max-width: 900px) {
  .ruk-tf__intro,
  .ruk-tf__body { grid-template-columns: 1fr; }
  .ruk-tf__copy { margin-left: 0; }

  /* No image on mobile — the photo panel forced a long scroll before the
     visitor could act, so it goes and the action comes to the tile. */
  .ruk-tf__spotlight { display: none; }

  .ruk-tf__places { gap: 8px; }
  .ruk-tf__places li { display: flex; flex-direction: column; }

  .ruk-tf .ruk-tf__action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-height: 0;
    margin-top: 0;
    padding: 0 17px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--ruk-rose, #C8102E);
    color: #FFFFFF;
    font-family: var(--ruk-display, "Familjen Grotesk", Arial, sans-serif);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    opacity: 0;
    transition: max-height .26s ease, margin-top .26s ease, opacity .2s ease;
  }
  .ruk-tf__places li:has(.ruk-tf__card[aria-pressed="true"]) .ruk-tf__action {
    max-height: 56px;
    margin-top: 8px;
    opacity: 1;
  }
  .ruk-tf__action span:first-child {
    min-width: 0;
    padding: 15px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 620px) {
  .ruk-tf { padding: 0; }
  .ruk-tf__frame {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .ruk-tf__intro,
  .ruk-tf__body { padding: 26px 20px; }
  .ruk-tf__controls,
  .ruk-tf__places { grid-template-columns: 1fr; }
  .ruk-tf__sort { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ruk-tf *,
  .ruk-tf *::before,
  .ruk-tf *::after { transition: none !important; }
}
/* ---- ruk: town finder — end ---- */


/* ---- ruk: town finder corrections — start ---- */
/* reset.css sets padding on input[type="search"] — an attribute selector, so it
   outranks a plain .ruk-tf__search and the placeholder was landing under the
   magnifier. Naming the element evens the specificity up. */
.ruk-tf input.ruk-tf__search {
  height: 54px;
  padding: 0 18px 0 48px;
  border: 1px solid var(--ruk-line, #DCE4DA);
  border-radius: 12px;
  background: #FFFFFF;
  color: var(--ruk-ink, #101511);
}
.ruk-tf select.ruk-tf__sort {
  height: 54px;
  padding: 0 42px 0 16px;
  border: 1px solid var(--ruk-line, #DCE4DA);
  border-radius: 12px;
  background: #FFFFFF;
}

/* Selected tile: light green ground, so the label stays black. Stated
   explicitly on the tile and its children rather than left to inherit. */
.ruk-tf .ruk-tf__card[aria-pressed="true"],
.ruk-tf .ruk-tf__card[aria-pressed="true"] .ruk-tf__name {
  color: #000000;
}
.ruk-tf .ruk-tf__card[aria-pressed="true"] .ruk-tf__count {
  color: var(--ruk-muted, #5C6B5F);
}
/* ---- ruk: town finder corrections — end ---- */

/* ---- ruk: homepage story sections — start ---- */
/* Three sections adapted from Steven's mock into the site's own tokens:
   .ruk-rw  "Renting with us"          (green panel + journey + link row)
   .ruk-ty  "Serving tenants for..."   (white card + 10+ mark + promises)
   .ruk-vc  search / book-a-viewing card pair
   The mock's own palette (#063f31, #cf1237, #ff4962) and its decorative
   circles are dropped: colours come from --ruk-forest / --ruk-rose, and the
   highlight words go white on green, per the town finder. Weights are 600/700
   because Familjen Grotesk has no 740/760/850. */

.ruk-rw,
.ruk-ty,
.ruk-vc {
  --rs-forest: var(--ruk-forest, #0F7A38);
  --rs-rose: var(--ruk-rose, #C8102E);
  --rs-ink: var(--ruk-ink, #101511);
  --rs-line: var(--ruk-line, #DCE4DA);
  --rs-muted: var(--ruk-muted, #5C6B5F);
  --rs-display: var(--ruk-display, "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif);
  --rs-body: var(--ruk-body, "Instrument Sans", "Helvetica Neue", Arial, sans-serif);
  --rs-shadow: 0 24px 70px rgba(8, 65, 31, .12);
  padding: clamp(24px, 5vw, 72px) 0;
  font-family: var(--rs-body);
  color: var(--rs-ink);
}
.ruk-rw *,
.ruk-ty *,
.ruk-vc * { box-sizing: border-box; }

.ruk-rw__eyebrow,
.ruk-ty__eyebrow,
.ruk-vc__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--rs-display);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.ruk-rw__eyebrow::before,
.ruk-ty__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
}

.ruk-rw__frame {
  width: min(100%, 1320px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 28px;
  background: var(--rs-forest);
  color: #FFFFFF;
  box-shadow: var(--rs-shadow);
}
.ruk-rw__main { padding: clamp(34px, 5vw, 68px); }
.ruk-rw__copy { max-width: 1040px; }
.ruk-rw__eyebrow { color: #FFFFFF; }
.ruk-rw__eyebrow::before { background: rgba(255, 255, 255, .45); }

.ruk-rw__frame h2 {
  max-width: 960px;
  margin: 0;
  font-family: var(--rs-display);
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  line-height: 1;
  letter-spacing: -.025em;
  font-weight: 700;
  color: #FFFFFF;
  text-wrap: balance;
}
.ruk-rw__lede {
  max-width: 810px;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 1.02rem;
  line-height: 1.7;
}
.ruk-rw__lede + .ruk-rw__lede { margin-top: 14px; }

.ruk-rw__journey {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 1040px;
  margin: 72px 0 0;
  padding: 0;
}
.ruk-rw__journey li {
  position: relative;
  padding: 19px 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .28);
  list-style: none;
}
.ruk-rw__journey li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FFFFFF;
}
.ruk-rw__step {
  position: absolute;
  left: 0;
  top: -40px;
  font-family: var(--rs-display);
  font-size: .78rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .12em;
  color: #FFFFFF;
}
.ruk-rw__journey strong {
  display: block;
  max-width: 180px;
  font-family: var(--rs-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.ruk-rw__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.ruk-rw .ruk-rw__link {
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px clamp(22px, 3vw, 38px);
  border-right: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .04);
  color: #FFFFFF;
  text-decoration: none;
  transition: background-color .2s ease;
}
.ruk-rw .ruk-rw__link:last-child { border-right: 0; }
.ruk-rw .ruk-rw__link:hover { background: var(--rs-rose); color: #FFFFFF; }
.ruk-rw__link span {
  font-family: var(--rs-display);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 700;
}
.ruk-rw__link svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  transition: transform .2s ease;
}
.ruk-rw .ruk-rw__link:hover svg { transform: translateX(4px); }

@media (max-width: 900px) {
  .ruk-rw__copy { max-width: none; }
  /* One step per row at this width; the layout itself is set out in the
     "renting with us steps on mobile" block further down. */
  .ruk-rw__journey { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 700px) {
  .ruk-rw { padding: 0; }
  .ruk-rw__frame { border-radius: 0; }
  .ruk-rw__main { padding: 42px 20px; }
  .ruk-rw__links { grid-template-columns: 1fr; }
  .ruk-rw .ruk-rw__link {
    min-height: 82px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
  }
  .ruk-rw .ruk-rw__link:last-child { border-bottom: 0; }
}


.ruk-ty__frame {
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 68px);
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--rs-line);
  border-radius: 28px;
  box-shadow: var(--rs-shadow);
}
.ruk-ty__eyebrow { color: var(--rs-forest); }
.ruk-ty__eyebrow::before { background: var(--rs-forest); }

.ruk-ty__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, .55fr);
  gap: clamp(32px, 6vw, 92px);
  align-items: end;
  padding-bottom: clamp(34px, 5vw, 56px);
  border-bottom: 1px solid var(--rs-line);
}
.ruk-ty__frame h2 {
  max-width: 820px;
  margin: 0;
  font-family: var(--rs-display);
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  line-height: 1;
  letter-spacing: -.025em;
  font-weight: 700;
  color: var(--rs-ink);
  text-wrap: balance;
}
.ruk-ty__frame h2 span { color: var(--rs-rose); }

.ruk-ty__mark {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 14px;
  color: var(--rs-rose);
}
.ruk-ty__mark strong {
  font-family: var(--rs-display);
  font-size: clamp(5rem, 10vw, 8rem);
  line-height: .74;
  letter-spacing: -.05em;
  font-weight: 700;
}
.ruk-ty__mark span {
  max-width: 74px;
  padding-bottom: 4px;
  font-family: var(--rs-display);
  font-size: .78rem;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rs-forest);
}

.ruk-ty__promises {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.ruk-ty__promises li {
  position: relative;
  min-height: 230px;
  padding: clamp(26px, 3vw, 38px) clamp(20px, 2.5vw, 32px);
  border-right: 1px solid var(--rs-line);
  list-style: none;
  transition: background-color .2s ease, transform .2s ease;
}
.ruk-ty__promises li:last-child { border-right: 0; }
.ruk-ty__promises li:hover {
  background: var(--ruk-green-soft, #E9F1E9);
  transform: translateY(-3px);
}
.ruk-ty__num {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--rs-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  color: #A4AFA9;
}
.ruk-ty__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 42px;
  border-radius: 16px;
  background: var(--rs-rose);
  color: #FFFFFF;
  box-shadow: 0 12px 30px rgba(8, 65, 31, .16);
}
.ruk-ty__icon svg { width: 29px; height: 29px; }
.ruk-ty__promises h3 {
  max-width: 190px;
  margin: 0;
  font-family: var(--rs-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--rs-ink);
}

@media (max-width: 900px) {
  .ruk-ty__head { grid-template-columns: 1fr; }
  .ruk-ty__mark { justify-content: flex-start; }
  .ruk-ty__promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ruk-ty__promises li:nth-child(2) { border-right: 0; }
  .ruk-ty__promises li:nth-child(-n+2) { border-bottom: 1px solid var(--rs-line); }
}
@media (max-width: 620px) {
  .ruk-ty { padding: 0; }
  .ruk-ty__frame {
    padding: 42px 20px 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .ruk-ty__promises { grid-template-columns: 1fr; }
  .ruk-ty__promises li,
  .ruk-ty__promises li:nth-child(2) {
    min-height: 176px;
    border-right: 0;
    border-bottom: 1px solid var(--rs-line);
  }
  .ruk-ty__promises li:last-child { border-bottom: 0; }
  .ruk-ty__icon { margin-bottom: 28px; }
}

.ruk-vc__grid {
  width: min(100%, 1320px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.ruk-vc__card {
  position: relative;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(32px, 4vw, 54px);
  overflow: hidden;
  border-radius: 24px;
  color: #FFFFFF;
}
.ruk-vc__card--search { background: var(--rs-forest); }
.ruk-vc__card--book {
  background: var(--rs-rose);
  box-shadow: 0 24px 70px rgba(200, 16, 46, .16);
}
.ruk-vc__label {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, .75);
}
.ruk-vc__card h2 {
  max-width: 540px;
  margin: 0;
  font-family: var(--rs-display);
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.025em;
  font-weight: 700;
  color: #FFFFFF;
  text-wrap: balance;
}
.ruk-vc__copy {
  max-width: 540px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 1rem;
  line-height: 1.6;
}
.ruk-vc .ruk-vc__action {
  align-self: flex-start;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 38px;
  padding: 0 22px;
  border-radius: 12px;
  background: #FFFFFF;
  font-family: var(--rs-display);
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ruk-vc .ruk-vc__card--search .ruk-vc__action { color: var(--rs-forest); }
.ruk-vc .ruk-vc__card--book .ruk-vc__action { color: var(--rs-rose); }
.ruk-vc .ruk-vc__action:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .15);
}
.ruk-vc__action svg { width: 19px; height: 19px; }

.ruk-vc__badge {
  position: absolute;
  top: clamp(28px, 4vw, 46px);
  right: clamp(28px, 4vw, 46px);
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 16px;
  background: rgba(255, 255, 255, .12);
}
.ruk-vc__badge svg { width: 29px; height: 29px; }

@media (max-width: 800px) {
  .ruk-vc__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .ruk-vc { padding: 0; }
  .ruk-vc__grid { gap: 0; }
  .ruk-vc__card { min-height: 340px; border-radius: 0; padding: 40px 20px; }
  .ruk-vc__badge { top: 24px; right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ruk-rw *, .ruk-ty *, .ruk-vc *,
  .ruk-rw *::before, .ruk-ty *::before, .ruk-vc *::before { transition: none !important; }
}
/* ---- ruk: homepage story sections — end ---- */

/* ---- ruk: town finder corrections 2 — start ---- */
/* 1. The spotlight's hover red was a darkened #A80D26; it now stays on the
      standard button red.
   2. "Show all 34 towns" used to stretch the spotlight, because the grid
      stretched it to the row height. The panel now keeps a fixed height and
      sticks in place while the list grows past it. */
.ruk-tf .ruk-tf__view:hover { background: var(--ruk-rose, #C8102E); }

.ruk-tf__body { align-items: start; }
.ruk-tf__spotlight {
  min-height: 0;
  height: clamp(430px, 34vw, 520px);
  position: sticky;
  top: 24px;
}
@media (max-width: 900px) {
  .ruk-tf__body { align-items: stretch; }
}
/* ---- ruk: town finder corrections 2 — end ---- */

/* ---- ruk: round three — start ---- */
/* 1. The "Renting with us" panel drops to the mock's very dark green, so it
      reads as a break between the lighter greens above and below it. Its own
      token is overridden rather than --ruk-forest, which the rest of the site
      still needs. */
.ruk-rw { --rs-forest: #063F31; }
.ruk-rw__lede strong { color: #FFFFFF; font-weight: 700; }

/* 2. The promise panels sit still now — no lift, no tint. */
.ruk-ty__promises li { transition: none; }
.ruk-ty__promises li:hover { background: transparent; transform: none; }

/* 3. Town cards fill with the button red on hover, with everything on them
      going white, the arrow included — but only where there is a real pointer
      to hover with. On a touchscreen :hover latches after a tap, which turned
      the just-selected tile red instead of leaving it green. */
@media (hover: hover) and (pointer: fine) {
  .ruk-tf__card:hover,
  .ruk-tf__card:focus-visible {
    background: var(--ruk-rose, #C8102E);
    border-color: var(--ruk-rose, #C8102E);
    box-shadow: 0 10px 28px rgba(200, 16, 46, .22);
  }
  .ruk-tf__card:hover,
  .ruk-tf__card:hover .ruk-tf__name,
  .ruk-tf__card:hover .ruk-tf__count,
  .ruk-tf__card:hover svg,
  .ruk-tf__card:focus-visible,
  .ruk-tf__card:focus-visible .ruk-tf__name,
  .ruk-tf__card:focus-visible .ruk-tf__count,
  .ruk-tf__card:focus-visible svg { color: #FFFFFF; }
  /* A selected card that is also hovered reads as hovered while the pointer
     is on it, then goes back to the green selected state. */
  .ruk-tf__card[aria-pressed="true"]:hover .ruk-tf__name { color: #FFFFFF; }
}

/* 4. Footer: a white strip carrying the logo lockup, above the green blocks. */
.ruk-footstrip {
  padding: 22px 24px;
  background: #FFFFFF;
  text-align: center;
}
.ruk-footstrip img {
  display: inline-block;
  width: auto;
  max-width: min(100%, 720px);
  height: auto;
  vertical-align: middle;
}

/* ---- ruk: round three — end ---- */

/* ---- ruk: round four — start ---- */
/* 1. The spotlight already carried position:sticky, but .ruk-tf__frame's
      overflow:hidden made it a scroll container, and that cancels sticky
      outright. overflow:clip still clips the rounded corners without becoming
      one. Offset matches the property page's enquiry aside, 1.5rem. */
.ruk-tf__frame { overflow: clip; }
.ruk-tf__spotlight { top: 1.5rem; }

/* 2. The three support links are red at rest, and stay put on hover. */
.ruk-rw .ruk-rw__link,
.ruk-rw .ruk-rw__link:hover,
.ruk-rw .ruk-rw__link:focus-visible {
  background: var(--rs-rose);
  border-right-color: rgba(255, 255, 255, .32);
  color: #FFFFFF;
}
.ruk-rw .ruk-rw__link:hover svg { transform: none; }

/* 3. Renting with us steps on mobile. The desktop timeline collapses badly on
      a narrow screen, so each step becomes its own row: white icon tile on the
      left, number and label stacked to the right of it, separated by a hairline
      rule. A grid rather than a flex column, so the icon can span both text
      rows and stay vertically centred against them. */
.ruk-rw__ico { display: none; }
@media (max-width: 900px) {
  .ruk-rw__journey li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: center;
    padding: 15px 0;
    border-top: 1px solid rgba(255, 255, 255, .2);
  }
  /* the timeline dot belongs to the desktop rule */
  .ruk-rw__journey li::before { content: none; }

  .ruk-rw__ico {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin: 0;
    border-radius: 12px;
    background: #FFFFFF;
    color: var(--rs-forest);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
  }
  .ruk-rw__ico svg { width: 22px; height: 22px; }

  .ruk-rw__step {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0 0 3px;
    font-size: .72rem;
  }
  .ruk-rw__journey strong {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    max-width: none;
    margin: 0;
  }
}
/* ---- ruk: round four — end ---- */

/* ---- ruk: footer brand mark — start ---- */
/* The footer brand keeps its wordmark but loses the icon tile. Scoped to the
   footer so the header's own brand-mark rules, which swap in the uploaded
   logo, are left alone. */
footer .ruk-brand .ruk-brand-mark { display: none; }
/* ---- ruk: footer brand mark — end ---- */

/* ---- ruk: town finder title to hero scale — start ---- */
/* Matched to the hero H1's clamp so the two big headings read at one size
   (58.4px at 1920 rather than 70.4px). */
.ruk-tf__title {
  font-size: clamp(2.4rem, 4.6vw, 3.65rem);
  line-height: 1.04;
}
/* ---- ruk: town finder title to hero scale — end ---- */

/* ---- ruk: footer bar in the price red — start ---- */
/* The legal strip goes red. rentuk-home.css sets .ruk-footer-bar to
   --ruk-forest-deep at the same specificity, so this only wins because
   rentuk-site.css is enqueued after it. The text was at 66% white, which is
   too faint on red, and the divider was a green line. */
.ruk-footer-bar {
  background: var(--ruk-rose, #C8102E);
  border-top: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .92);
}
/* ---- ruk: footer bar in the price red — end ---- */

/* ---- ruk: sticky header — start ---- */
/* Desktop keeps the whole header in view: the booking bar sticks to the top
   and the masthead stacks under it. On a narrow screen only the booking bar
   stays, so the logo and menu scroll away and give the content its height
   back. 39px is the booking bar and 79px the masthead — both are fixed by
   their own rules here, so the offsets hold unless those change. Logged-in
   users get the admin bar added on top (32px desktop, 46px mobile). */
/* Height of whatever is pinned above the content, so panels further down
   can clear it. Mobile pins the booking bar alone; desktop pins the masthead
   too; a logged-in user adds the WP admin bar on top of either. */
:root { --ruk-stick: 39px; }
body.admin-bar { --ruk-stick: 85px; }

.ruk-bookbar {
  position: sticky;
  top: 0;
  z-index: 61;
}
body.admin-bar .ruk-bookbar { top: 46px; }

@media (min-width: 1025px) {
  :root { --ruk-stick: 118px; }
  body.admin-bar { --ruk-stick: 150px; }
  /* Doubled class: the plugin prints .rentuk-elementor-location{position:relative}
     in an inline <style>, which at equal specificity lands after this file and
     would otherwise leave the header relative — with the top offset shifting it
     down over the content instead of pinning it. */
  .rentuk-elementor-location.rentuk-elementor-header {
    position: sticky;
    top: 39px;
    z-index: 60;
  }
  body.admin-bar .ruk-bookbar { top: 32px; }
  body.admin-bar .rentuk-elementor-location.rentuk-elementor-header { top: 71px; }
}

/* The sticky panels further down the page have to clear the header now. */
.ruk-tf__spotlight { top: calc(var(--ruk-stick) + 1.5rem); }
.rpuk-single__aside { top: calc(var(--ruk-stick) + 1.5rem); }
/* ---- ruk: sticky header — end ---- */

/* ---- ruk: gallery placeholder — start ---- */
/* The gallery cells carry a grey behind the photo, which shows as a grey box
   whenever a slot has no image (or while one is still loading). White reads
   as empty space instead. */
.rpuk-gallery__main,
.rpuk-gallery__sideshot { background: #FFFFFF; }
/* ---- ruk: gallery placeholder — end ---- */

/* ---- ruk: homepage hero — start ---- */
/* The hero's stylesheet, moved out of the Elementor HTML widget's inline
   <style> and into this file. It lived there for the first few rounds and cost
   us two specificity workarounds, because an inline <style> in the body wins
   over a linked sheet at equal specificity. The widget is now markup only.

   The photo runs at full colour — there is no ::before wash any more. The copy
   sits on a frosted panel instead: translucent with a backdrop blur, so the
   street still reads behind the words. Where the blur is unsupported the
   @supports block below drops back to a near-opaque panel, because the light
   tint on its own is not readable against brick. */

.ruk-hero2 {
  position: relative;
  overflow: hidden;

  /* full-bleed even though the Elementor container is boxed */
  width: 100vw;
  margin-left: calc(50% - 50vw);

  background-color: #32323D;
  background-image: url("https://e-webuk.uk/rentuk/wp-content/uploads/2026/09/houses-terraced-north.jpg");
  background-size: cover;
  /* 1536x1024 in a band about 1920x760: cover scales on width and crops
     roughly 40% of the height. 42% down keeps the terrace, the church tower
     and the valley, and loses most of the sky. */
  background-position: 50% 42%;
  background-repeat: no-repeat;

  min-height: clamp(520px, calc((100vw / 1.7581) - 100px), 760px);
  display: flex;
  align-items: center;
  padding: 56px 0;
}

.ruk-hero2__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.ruk-hero2__panel {
  max-width: 580px;
  padding: 34px 36px 36px;
  border-radius: 20px;
  background: rgba(50, 50, 61, .48);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, .18);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ruk-hero2__panel { background: rgba(50, 50, 61, .74); }
}

.ruk-hero2__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  font-family: var(--ruk-display, "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.ruk-hero2__eyebrow::after {
  content: "";
  flex: 1 1 auto;
  max-width: 90px;
  height: 1px;
  background: rgba(255, 255, 255, .38);
}

.ruk-hero2__title {
  margin: 0 0 16px;
  font-family: var(--ruk-display, "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif);
  font-weight: 700;
  font-size: clamp(2.4rem, 4.6vw, 3.65rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: #FFFFFF;
  text-wrap: balance;
}

.ruk-hero2__lede {
  margin: 0 0 26px;
  max-width: 44ch;
  font-family: var(--ruk-body, "Instrument Sans", "Helvetica Neue", Arial, sans-serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}

.ruk-hero2__search {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 480px;
  padding: 8px;
  background: #FFFFFF;
  border-radius: 999px;
  box-shadow: 0 14px 34px -18px rgba(4, 26, 13, .5);
}
.ruk-hero2__field {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 0 6px 0 18px;
}
.ruk-hero2__field svg { flex: 0 0 auto; color: #7E8C81; }
.ruk-hero2 input.ruk-hero2__input {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 13px 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--ruk-body, "Instrument Sans", "Helvetica Neue", Arial, sans-serif);
  font-size: .9375rem;
  color: #08411F;
}
.ruk-hero2 input.ruk-hero2__input::placeholder { color: #8A978C; }
.ruk-hero2 button.ruk-hero2__btn {
  flex: 0 0 auto;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--ruk-forest, #0F7A38);
  color: #FFFFFF;
  font-family: var(--ruk-body, "Instrument Sans", "Helvetica Neue", Arial, sans-serif);
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .16s ease;
}
.ruk-hero2 button.ruk-hero2__btn:hover { background: var(--ruk-forest-deep, #0B6A2F); }
.ruk-hero2 input.ruk-hero2__input:focus-visible,
.ruk-hero2 button.ruk-hero2__btn:focus-visible {
  outline: 2px solid #37B86A;
  outline-offset: 2px;
}

/* Mobile: a fixed-ish band with the panel inset in the gutters. min-height
   rather than height so a long headline can push it taller instead of
   clipping. The paragraph is the first thing to go. */
@media (max-width: 820px) {
  .ruk-hero2 {
    min-height: 430px;
    padding: 0;
    /* A 360x430 band is portrait, so cover scales the 3:2 photo by height
       and the whole image height fits exactly - which makes the Y offset
       inert and leaves sky along the top and road along the bottom, the
       two least useful parts of the frame. Sizing by height at 165%
       instead crops in on the terrace and gives Y something to do. It is
       still a downscale (about 710px of a 1024px-tall source), so nothing
       is upsampled. */
    background-size: auto 165%;
    background-position: 30% 46%;
  }
  .ruk-hero2__inner { padding: 0 20px; }
  .ruk-hero2__panel {
    max-width: none;
    padding: 22px 20px 24px;
    border-radius: 18px;
    background: rgba(50, 50, 61, .55);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ruk-hero2__panel { background: rgba(50, 50, 61, .78); }
  }
  .ruk-hero2__eyebrow { font-size: 11px; }
  .ruk-hero2__title { font-size: 1.75rem; margin-bottom: 18px; }
  .ruk-hero2__lede { display: none; }
  .ruk-hero2__search {
    max-width: none;
    flex-direction: column;
    border-radius: 16px;
  }
  .ruk-hero2 button.ruk-hero2__btn { padding: 13px 24px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ruk-hero2 button.ruk-hero2__btn { transition: none; }
}
/* ---- ruk: homepage hero — end ---- */

/* ---- ruk: green gradient — start ---- */
/* The gradient already on the About page's "Find Your Next Home Today" band,
   lifted into a token so other sections can share it. Angle and stops are
   copied exactly from that container's own Elementor setting. */
:root { --ruk-green-grad: linear-gradient(290deg, #0F7A38 0%, #08411F 100%); }

/* Homepage: the town finder's intro and the search card, both previously flat
   --ruk-forest. */
.ruk-tf__intro { background: var(--ruk-green-grad); }
.ruk-vc__card--search { background: var(--ruk-green-grad); }

/* About page: Our Story, which was flat green already, so only the background
   changes — the copy is white there as it stands. */
.elementor-88 > .elementor-element-c4e6bce { background-image: var(--ruk-green-grad); }
/* ---- ruk: green gradient — end ---- */

/* ---- ruk: about page content column — start ---- */
/* The About sections set their own left inset (100px, and 80% max-width on one
   of them), so the page ran wider and further left than the rest of the site.
   The header and footer both use .ruk-wrap: a 1240px box with 48px gutters,
   which puts content 381px in at a 1905px viewport. These sections now match
   that, while keeping their full-bleed backgrounds: the padding centres a
   1144px content box and never drops below a 48px gutter.
       (1240 - 96) / 2 = 572 */
.elementor-88 > .e-con {
  width: 100%;
  max-width: none;
  padding-left: max(48px, calc(50% - 572px));
  padding-right: max(48px, calc(50% - 572px));
}

/* One section carried width:80%, which pushed it off-centre inside the new
   column, and the wrappers directly inside each section were narrower than
   the column and centred within it. Both are released so the content box is
   the column. */
.elementor-88 > .e-con > .e-con {
  width: 100%;
  max-width: none;
}

/* Those two rows were justify-content:center, which left the copy floating
   about 100px in from the column edge rather than starting on it. */
.elementor-88 .elementor-element-69dea0c,
.elementor-88 .elementor-element-83d2c89 {
  justify-content: space-between;
}

/* Elementor's stock 10px container padding on the first column of each
   section left the copy 391px in against the logo's 381px. Zeroed on the
   left only, so nothing else in those columns shifts. */
.elementor-88 .elementor-element-1f1b819,
.elementor-88 .elementor-element-390c0d0,
.elementor-88 .elementor-element-83d2c89 {
  padding-left: 0;
}

/* The CTA band sat on 10px of vertical padding while the two sections above it
   were on 60px. */
.elementor-88 > .elementor-element-97a1623 {
  padding-top: 60px;
  padding-bottom: 60px;
}

@media (max-width: 820px) {
  .elementor-88 > .e-con {
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* ---- ruk: about page content column — end ---- */

/* ---- ruk: homepage column alignment — start ---- */
/* The three sections built from the mock were on their own 1320px frame, so
   they overhung the rest of the page by 88px each side. The site's column is
   the header and footer's .ruk-wrap: 1240px with 48px gutters, which is a
   1144px content box. Matching that, with the gutters kept as real padding so
   the frames breathe between 700px and 1240px. Below the sections' own mobile
   breakpoints they still go edge to edge, which is deliberate. */
.ruk-rw__frame,
.ruk-ty__frame,
.ruk-vc__grid {
  width: min(calc(100% - 96px), 1144px);
}

/* The hero panel sat 12px inside the column because the hero's inner box was
   1200px plus 40px padding. 1224 + 40 puts its left edge on 381px like
   everything else. */
.ruk-hero2__inner { max-width: 1224px; }
/* ---- ruk: homepage column alignment — end ---- */

/* ---- ruk: renting with us order on mobile — start ---- */
/* Journey steps move above the two paragraphs on a narrow screen, so the
   four icons are the first thing under the heading rather than being buried
   below the prose. Desktop keeps its original order. */
@media (max-width: 900px) {
  .ruk-rw__copy {
    display: flex;
    flex-direction: column;
  }
  .ruk-rw__eyebrow { order: 1; }
  .ruk-rw__frame h2 { order: 2; }
  .ruk-rw__journey {
    order: 3;
    /* the step numbers sit inside each tile at this width, so the tall top
       margin the desktop timeline needs is not wanted here */
    margin-top: 40px;
    margin-bottom: 8px;
  }
  .ruk-rw__lede { order: 4; }
}
/* ---- ruk: renting with us order on mobile — end ---- */

/* ---- ruk: town finder selection feedback — start ---- */
/* Desktop: picking a town swaps the spotlight photo and the panel copy, but
   the button itself never moved, so nothing said "this link now points
   somewhere else". A ring pulses out of it on each selection - a ring rather
   than a blink, which is both less jarring and safer for anyone sensitive to
   flashing. The ring is white, not red: a red ring around a red button was
   invisible. The button also brightens briefly, so the cue survives being
   over a pale part of the photo behind it. The class is added by select() in functions.php, which forces a
   reflow first so the animation restarts on every click. */
@keyframes ruk-tf-view-flash {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .9);
    transform: none;
    filter: none;
  }
  45% {
    box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.22);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    transform: none;
    filter: none;
  }
}
.ruk-tf .ruk-tf__view.is-flash { animation: ruk-tf-view-flash .62s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .ruk-tf .ruk-tf__view.is-flash { animation: none; }
}

/* Mobile: the slide-out action was the full width of the tile it came from,
   which made it read as another panel rather than a button. It now hugs its
   own label and sits against the tile's right edge, under the arrow that
   started the selection. */
@media (max-width: 900px) {
  .ruk-tf .ruk-tf__action {
    align-self: flex-end;
    width: auto;
    max-width: calc(100% - 34px);
    gap: 14px;
  }
}
/* ---- ruk: town finder selection feedback — end ---- */

/* ---- ruk: results toggles — start ---- */
/* Pairs with the wp_footer script in functions.php. Everything that hides is
   inside the max-width query, so the desktop results page is exactly as it
   was, and the wrapper is a plain div there. The wrapper exists so the
   collapse never touches the display of the form or the map themselves -
   .rpuk-searchbar is a flex form and the map is a Leaflet container, and
   overriding their display would rearrange them when reopened. */
.ruk-mtoggle { display: none; }

@media (max-width: 820px) {
  .rpuk-archive .ruk-mtoggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0 4px;
  }

  .ruk-mtoggle__btn {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--ruk-line, #DCE4DA);
    border-radius: 12px;
    background: #FFFFFF;
    color: var(--ruk-ink, #101511);
    font-family: var(--ruk-display, "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
  }
  .ruk-mtoggle__btn[aria-expanded="true"] {
    background: var(--ruk-green-soft, #E9F1E9);
    border-color: var(--ruk-forest, #0F7A38);
    color: var(--ruk-forest, #0F7A38);
  }
  .ruk-mtoggle__btn:focus-visible {
    outline: 2px solid var(--ruk-forest, #0F7A38);
    outline-offset: 2px;
  }
  .ruk-mtoggle__btn svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    transition: transform .18s ease;
  }
  .ruk-mtoggle__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

  .rpuk-archive .ruk-collapsible { display: none; }
  .rpuk-archive .ruk-collapsible.is-open { display: block; }

  /* The map sits flush under the toggles when it is opened. */
  .rpuk-archive .ruk-collapsible.is-open .rpuk-archive__map { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ruk-mtoggle__btn svg { transition: none; }
}
/* ---- ruk: results toggles — end ---- */

/* ---- ruk: hello-elementor button reset — start ---- */
/* hello-elementor's reset.css gives every bare <button> a #CC3366 border and
   FILLS it #CC3366 on hover and focus. That is the red box around the mobile
   menu button: it is a plain <button> with nothing else styling it, so tapping
   it turned it pink. Its rules are button:hover / button:focus at (0,1,1), so
   an override needs at least that much specificity - a bare class loses. */
.site-navigation-toggle,
.site-navigation-toggle:hover,
.site-navigation-toggle:focus {
  border: 0;
  background-color: rgba(0, 0, 0, .05);
  color: #494C4F;
}
.site-navigation-toggle:focus-visible {
  outline: 2px solid var(--ruk-forest, #0F7A38);
  outline-offset: 2px;
}

/* And the button that is actually on screen. .site-navigation-toggle-holder is
   display:none site-wide because the header comes from an Elementor template,
   so the visible hamburger is .ruk-burger - which is where the pink fill was
   landing. Its resting border survived the reset (a class beats a bare
   element) but button:hover / button:focus at (0,1,1) did not, so tapping it
   filled it. */
.ruk-burger,
.ruk-burger:hover,
.ruk-burger:focus {
  background: transparent;
  border: 1.5px solid var(--ruk-line, #DCE4DA);
  color: var(--ruk-ink, #101511);
}
.ruk-burger[aria-expanded="true"],
.ruk-burger[aria-expanded="true"]:hover,
.ruk-burger[aria-expanded="true"]:focus {
  background: transparent;
  border-color: var(--ruk-forest, #0F7A38);
}
.ruk-burger:focus-visible {
  outline: 2px solid var(--ruk-forest, #0F7A38);
  outline-offset: 2px;
}
/* the three bars, in case the reset's white hover colour ever reaches them */
.ruk-burger:hover span,
.ruk-burger:focus span { background: var(--ruk-ink, #101511); }

/* The same reset was waiting to catch two buttons of our own the moment
   anyone hovered them - both had a base style but no hover style. */
.ruk-mtoggle__btn:hover,
.ruk-mtoggle__btn:focus {
  background: #FFFFFF;
  border-color: var(--ruk-line, #DCE4DA);
  color: var(--ruk-ink, #101511);
}
.ruk-mtoggle__btn[aria-expanded="true"]:hover,
.ruk-mtoggle__btn[aria-expanded="true"]:focus {
  background: var(--ruk-green-soft, #E9F1E9);
  border-color: var(--ruk-forest, #0F7A38);
  color: var(--ruk-forest, #0F7A38);
}
.ruk-tf .ruk-tf__more:hover,
.ruk-tf .ruk-tf__more:focus {
  background: transparent;
  color: var(--ruk-forest-deep, #0B6A2F);
}
/* ---- ruk: hello-elementor button reset — end ---- */

/* ---- ruk: mobile width correction — start ---- */
/* The column alignment rule above subtracts 96px of gutter at every width,
   which on a phone left these three sections 249px wide inside a 345px page -
   noticeably narrower than the town finder and the listings, both of which sit
   on a 20px gutter. Their containers carry no padding of their own, so the
   gutter has to come from the frame. */
@media (max-width: 820px) {
  .ruk-rw__frame,
  .ruk-ty__frame,
  .ruk-vc__grid { width: calc(100% - 40px); }
}
/* ---- ruk: mobile width correction — end ---- */

/* ---- ruk: about hero stats on mobile — start ---- */
/* Matches the Renting with us journey rows: a rounded tile on the left, then
   the figure with its label beside it, one stat per row. Elementor's own
   selectors are three classes and widget-icon-box.css loads after this file,
   so these carry a fourth class to win. */
@media (max-width: 820px) {
  .elementor-88 .elementor-element-36c8107 {
    flex-direction: column;
    border-radius: 18px;
    margin-bottom: 20px;
  }
  .elementor-88 .elementor-element-36c8107 .elementor-widget-icon-box .elementor-icon-box-wrapper {
    display: grid;
    grid-template-columns: 52px auto minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 14px;
    align-items: center;
    text-align: left;
  }
  .elementor-88 .elementor-element-36c8107 .elementor-widget-icon-box .elementor-icon-box-icon {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    flex: 0 0 auto;
    margin: 0;
  }
  .elementor-88 .elementor-element-36c8107 .elementor-widget-icon-box .elementor-icon-box-content { display: contents; }
  .elementor-88 .elementor-element-36c8107 .elementor-widget-icon-box .elementor-icon-box-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
    font-size: 1.55rem;
    line-height: 1;
    text-align: left;
  }
  .elementor-88 .elementor-element-36c8107 .elementor-widget-icon-box .elementor-icon-box-description {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    margin: 0;
    font-size: .72rem;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(42, 53, 44, .66);
    text-align: left;
  }
  .elementor-88 .elementor-element-36c8107 .elementor-widget-icon-box .elementor-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--ruk-forest, #0F7A38);
    box-shadow: 0 8px 20px rgba(16, 21, 17, .16);
  }
  .elementor-88 .elementor-element-36c8107 .elementor-widget-icon-box .elementor-icon svg { width: 30px; height: 30px; fill: #FFFFFF; }
  .elementor-88 .elementor-element-36c8107 > .e-con { padding: 15px 18px; }
  .elementor-88 .elementor-element-6d55e79,
  .elementor-88 .elementor-element-5a7b324 { border-top: 1px solid rgba(16, 21, 17, .12); }
}
/* ---- ruk: about hero stats on mobile — end ---- */

/* ---- ruk: Tenants dropdown in the header - start ---- */
.ruk-nav__has{position:relative;display:flex;align-items:center}
.ruk-nav .ruk-nav__top{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.ruk-nav__chev{width:14px;height:14px;flex:0 0 auto;transition:transform .18s ease}
.ruk-nav__has.is-open > .ruk-nav__top .ruk-nav__chev{transform:rotate(180deg)}
.ruk-nav__panel{position:absolute;top:calc(100% + 12px);left:-16px;min-width:274px;display:none;flex-direction:column;padding:10px 0;background:#FFFFFF;border:1px solid var(--ruk-line,rgba(16,21,17,.12));border-radius:14px;box-shadow:0 22px 44px -22px rgba(16,21,17,.45);z-index:70}
.ruk-nav__has.is-open > .ruk-nav__panel{display:flex}
.ruk-nav__panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;background:transparent}
.ruk-nav .ruk-nav__panel a{display:block;padding:9px 18px;font-size:14.5px;white-space:normal;line-height:1.35}
.ruk-nav .ruk-nav__panel a::after{display:none}
.ruk-nav .ruk-nav__panel a:hover{color:var(--ruk-forest,#0F7A38);background:rgba(15,122,56,.06)}
.ruk-nav__group{display:block;margin:6px 0;padding:6px 0;border-top:1px solid var(--ruk-line,rgba(16,21,17,.1));border-bottom:1px solid var(--ruk-line,rgba(16,21,17,.1))}
.ruk-nav .ruk-nav__grouphead{font-weight:600}
.ruk-nav .ruk-nav__sub{padding-left:34px;color:rgba(42,53,44,.78);font-size:14px}
@media (hover: hover) and (pointer: fine){
  .ruk-nav__has:hover > .ruk-nav__panel{display:flex}
  .ruk-nav__has:hover > .ruk-nav__top .ruk-nav__chev{transform:rotate(180deg)}
}
@media (max-width:900px){
  .ruk-masthead.ruk-nav-open .ruk-nav .ruk-nav__has{display:block;border-bottom:1px solid var(--ruk-line)}
  .ruk-masthead.ruk-nav-open .ruk-nav .ruk-nav__has:last-child{border-bottom:0}
  .ruk-masthead.ruk-nav-open .ruk-nav .ruk-nav__top{display:flex;width:100%;justify-content:space-between;padding:13px 2px;border-bottom:0;font-size:15px}
  .ruk-nav__panel{position:static;display:none;min-width:0;padding:0 0 8px;background:transparent;border:0;border-radius:0;box-shadow:none}
  .ruk-nav__has.is-open > .ruk-nav__panel{display:block}
  .ruk-nav__panel::before{display:none}
  .ruk-masthead.ruk-nav-open .ruk-nav .ruk-nav__panel a{padding:11px 0 11px 14px;border-bottom:0;font-size:14.5px}
  .ruk-nav .ruk-nav__sub{padding-left:30px}
}
/* ---- ruk: Tenants dropdown in the header - end ---- */

/* ---- ruk: footer legal links — start ---- */
.ruk-footer-bar p.ruk-footer-legal-links,
.ruk-footer-legal-links{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 18px;
}
.ruk-footer-legal-links a{
  color: #FFFFFF;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
}
.ruk-footer-legal-links a:hover,
.ruk-footer-legal-links a:focus{ border-bottom-color: #FFFFFF; }
/* ---- ruk: footer legal links — end ---- */

/* ---- ruk: gravity forms in site style — start ---- */
/* The enquiry form on the policy pages is Gravity Forms with its own bare
   theme, so it needs bringing in line with the rest of the site. */
.gform_wrapper.gravity-theme{
  max-width: 720px;
  margin: 8px 0 0;
  padding: 26px 26px 30px;
  border: 1px solid var(--ruk-line, #DCE4DA);
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 18px 40px -28px rgba(16, 21, 17, .35);
}
.gform_wrapper.gravity-theme .gform_fields{ grid-row-gap: 18px; }
.gform_wrapper.gravity-theme .gfield_label{
  margin-bottom: 7px;
  color: var(--ruk-ink, #101511);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.gform_wrapper.gravity-theme .gfield_required{ color: var(--ruk-rose, #C8102E); }
.gform_wrapper.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme input[type="tel"],
.gform_wrapper.gravity-theme input[type="number"],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea{
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--ruk-line, #DCE4DA);
  border-radius: 11px;
  background: var(--ruk-paper, #F4F6F2);
  color: var(--ruk-ink, #101511);
  font: inherit;
  font-size: .95rem;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.gform_wrapper.gravity-theme textarea{ min-height: 132px; padding: 12px 14px; resize: vertical; }
.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus{
  border-color: var(--ruk-green, #0F7A38);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(15, 122, 56, .12);
  outline: none;
}
.gform_wrapper.gravity-theme .ginput_container_consent{ display: flex; gap: 10px; align-items: flex-start; }
.gform_wrapper.gravity-theme .gfield--type-consent input[type="checkbox"]{
  width: 17px;
  height: 17px;
  min-height: 0;
  flex: 0 0 17px;
  margin: 3px 0 0;
  padding: 0;
  accent-color: var(--ruk-green, #0F7A38);
}
.gform_wrapper.gravity-theme .gfield_consent_label{ color: var(--ruk-muted, #5C6B5F); font-size: .84rem; line-height: 1.45; }
.gform_wrapper.gravity-theme .gform_footer{ margin: 22px 0 0; padding: 0; }
.gform_wrapper.gravity-theme .gform_button{
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--ruk-action, #12903F);
  color: #FFFFFF;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.gform_wrapper.gravity-theme .gform_button:hover,
.gform_wrapper.gravity-theme .gform_button:focus{ background: var(--ruk-rose, #C8102E); transform: translateY(-1px); }
.gform_wrapper.gravity-theme .gfield_description{ color: var(--ruk-muted, #5C6B5F); font-size: .8rem; }
.gform_wrapper.gravity-theme .gform_validation_errors{ border-radius: 12px; }
@media (max-width: 820px){
  .gform_wrapper.gravity-theme{ padding: 20px 18px 24px; border-radius: 16px; }
}
/* ---- ruk: gravity forms in site style — end ---- */

/* ---- ruk: maintenance report modal — start ---- */
.ruk-mform{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px}
.ruk-mform[hidden]{display:none!important}
.ruk-mform [hidden]{display:none!important}
.ruk-mform__backdrop{position:absolute;inset:0;background:rgba(5,45,21,.62);backdrop-filter:blur(3px)}
.ruk-mform__panel{position:relative;width:min(100%,720px);max-height:min(88vh,860px);overflow:auto;padding:30px 30px 22px;border-radius:20px;background:#FFFFFF;box-shadow:0 40px 90px -30px rgba(5,45,21,.6)}
.ruk-mform__x{position:absolute;top:12px;right:14px;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ruk-muted,#5C6B5F);font-size:26px;line-height:1;cursor:pointer}
.ruk-mform__x:hover,.ruk-mform__x:focus{background:var(--ruk-paper,#F4F6F2);border-color:transparent;color:var(--ruk-ink,#101511)}
.ruk-mform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ruk-mform__head{margin:0 0 22px}
.ruk-mform__eyebrow{margin:0 0 4px;color:var(--ruk-green,#0F7A38);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.ruk-mform__panel h2{margin:0 0 16px;font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.1}
.ruk-mform__steps{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0;padding:0;list-style:none;counter-reset:rukstep}
.ruk-mform__steps li{display:flex;align-items:center;gap:7px;padding:5px 11px 5px 6px;border-radius:999px;background:var(--ruk-paper,#F4F6F2);color:var(--ruk-muted,#5C6B5F);font-size:.74rem;font-weight:600}
.ruk-mform__steps li:before{counter-increment:rukstep;content:counter(rukstep);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#FFFFFF;color:inherit;font-size:.68rem;font-weight:800}
.ruk-mform__steps li.is-on{background:var(--ruk-forest,#08411F);color:#FFFFFF}
.ruk-mform__steps li.is-on:before{background:#FFFFFF;color:var(--ruk-forest,#08411F)}
.ruk-mform__steps li.is-done{background:rgba(15,122,56,.12);color:var(--ruk-green,#0F7A38)}
.ruk-mform__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ruk-mform__field{display:block}
.ruk-mform__field--wide{grid-column:1 / -1}
.ruk-mform__field > span{display:block;margin-bottom:6px;font-size:.82rem;font-weight:700;color:var(--ruk-ink,#101511)}
.ruk-mform__field em,.ruk-mform__consent em{color:var(--ruk-rose,#C8102E);font-style:normal}
.ruk-mform__field input,.ruk-mform__field textarea{width:100%;min-height:46px;padding:0 13px;border:1px solid var(--ruk-line,#DCE4DA);border-radius:11px;background:var(--ruk-paper,#F4F6F2);color:var(--ruk-ink,#101511);font:inherit;font-size:.94rem;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.ruk-mform__field textarea{min-height:92px;padding:11px 13px;resize:vertical}
.ruk-mform__field input[type="file"]{padding:11px 13px;min-height:0}
.ruk-mform__field input:focus,.ruk-mform__field textarea:focus{border-color:var(--ruk-green,#0F7A38);background:#FFFFFF;box-shadow:0 0 0 4px rgba(15,122,56,.12);outline:none}
.ruk-mform__hint{margin:0 0 16px;color:var(--ruk-muted,#5C6B5F);font-size:.86rem;line-height:1.5}
.ruk-mform__cats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ruk-mform__cat{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--ruk-line,#DCE4DA);border-radius:12px;background:var(--ruk-paper,#F4F6F2);font-size:.9rem;cursor:pointer;transition:border-color .18s ease,background .18s ease}
.ruk-mform__cat input{width:17px;height:17px;flex:0 0 17px;margin:0;accent-color:var(--ruk-green,#0F7A38)}
.ruk-mform__cat:has(input:checked){border-color:var(--ruk-green,#0F7A38);background:rgba(15,122,56,.08)}
.ruk-mform__cat:hover{border-color:var(--ruk-green,#0F7A38)}
.ruk-mform__detail{margin-bottom:14px}
.ruk-mform__consent{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px;color:var(--ruk-muted,#5C6B5F);font-size:.88rem;line-height:1.45}
.ruk-mform__consent input{width:17px;height:17px;flex:0 0 17px;margin:3px 0 0;accent-color:var(--ruk-green,#0F7A38)}
.ruk-mform__error{margin:14px 0 0;color:var(--ruk-rose,#C8102E);font-size:.86rem;font-weight:600}
.ruk-mform__foot{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid var(--ruk-line,#DCE4DA)}
.ruk-mform__count{margin-right:auto;color:var(--ruk-muted,#5C6B5F);font-size:.8rem}
.ruk-mform__btn{min-height:46px;padding:0 24px;border:0;border-radius:999px;background:var(--ruk-action,#12903F);color:#FFFFFF;font:inherit;font-size:.92rem;font-weight:700;cursor:pointer;transition:background .18s ease,transform .18s ease}
.ruk-mform__btn:hover,.ruk-mform__btn:focus{background:var(--ruk-rose,#C8102E);border-color:transparent;color:#FFFFFF;transform:translateY(-1px)}
.ruk-mform__btn--ghost{order:-1;background:transparent;border:1px solid var(--ruk-line,#DCE4DA);color:var(--ruk-ink,#101511)}
.ruk-mform__btn--ghost:hover,.ruk-mform__btn--ghost:focus{background:var(--ruk-paper,#F4F6F2);border-color:var(--ruk-ink,#101511);color:var(--ruk-ink,#101511);transform:none}
.ruk-mform__btn[disabled]{opacity:.6;cursor:default;transform:none}
.ruk-mform__done{text-align:left}
.ruk-mform__done p{margin:0 0 20px;color:var(--ruk-muted,#5C6B5F);line-height:1.55}
@media (max-width:640px){
  .ruk-mform{padding:0}
  .ruk-mform__panel{width:100%;max-height:100vh;border-radius:0;padding:24px 18px 18px}
  .ruk-mform__grid,.ruk-mform__cats{grid-template-columns:1fr}
  .ruk-mform__foot{flex-wrap:wrap}
  .ruk-mform__count{width:100%;order:3;margin:0}
}
/* ---- ruk: maintenance report modal — end ---- */

/* ---- ruk: map popup width — start ---- */
/* leaflet.css is enqueued after rpuk.css, so its own
   .leaflet-popup-content { margin: 13px 24px 13px 20px } beat the plugin's
   reset and squeezed the card to about 90px wide. */
.leaflet-popup-content{
  margin: 0 !important;
  width: 224px !important;
  min-width: 224px;
}
.leaflet-popup-content .rpuk-pop__price,
.leaflet-popup-content .rpuk-pop__title,
.leaflet-popup-content .rpuk-pop__link{ padding-left: .7rem; padding-right: .7rem; }
.leaflet-popup-content .rpuk-pop__title{ display: block; }
.leaflet-popup-close-button{ z-index: 2; }
/* ---- ruk: map popup width — end ---- */

/* ---- ruk: tenant policies hero on mobile — start ---- */
/* The hero fades left to right, which on a phone just reads as flat dark
   green. Use the site gradient below 820px instead. */
@media (max-width: 820px){
  .elementor-271 .elementor-element.elementor-element-9f0376c{
    background: var(--ruk-green-grad, linear-gradient(290deg, #0F7A38 0%, #08411F 100%)) !important;
  }
}
/* ---- ruk: tenant policies hero on mobile — end ---- */

/* ---- ruk: tenant policies hero order on mobile — start ---- */
/* The two hero buttons sit in the left column, so on a phone they land above
   the policy cards. display:contents promotes that column's children into the
   section flex row so the buttons can be ordered after the cards. */
@media (max-width: 820px){
  .elementor-271 .elementor-element.elementor-element-276fccf{ flex-direction: column; }
  .elementor-271 .elementor-element.elementor-element-a84f924{ --display: contents; display: contents; }
  .elementor-271 .elementor-element.elementor-element-0755db0{ order: 1; }
  .elementor-271 .elementor-element.elementor-element-679ef60{ order: 2; }
  .elementor-271 .elementor-element.elementor-element-8bbf766{ order: 3; }
  .elementor-271 .elementor-element.elementor-element-bb3a976{ order: 4; }
  .elementor-271 .elementor-element.elementor-element-47fb75c{ order: 5; margin-top: 4px; }
}
/* ---- ruk: tenant policies hero order on mobile — end ---- */

/* ---- ruk: footer link columns on mobile — start ---- */
/* Below 560px the plugin drops the footer to one column. Keep the two link
   lists side by side and let the brand and contact blocks span the row. */
@media (max-width: 560px){
  .ruk-footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .ruk-footer-grid > .ruk-footer-brand,
  .ruk-footer-grid > .ruk-footer-contact-col{ grid-column: 1 / -1; }
}
/* ---- ruk: footer link columns on mobile — end ---- */

/* ---- ruk: policy page contact prompt — start ---- */
/* Replaces the enquiry form that came across with the imported policy pages:
   it was static markup captured from the live site and submitted nowhere, and
   Gravity Forms is not installed here. */
.ruk-policy-cta{
  margin: 40px 0 8px;
  padding: 28px 30px 30px;
  border-radius: 18px;
  background: var(--ruk-green-grad, linear-gradient(290deg, #0F7A38 0%, #08411F 100%));
  color: #FFFFFF;
}
.ruk-policy-cta h2{ margin: 0 0 10px; color: #FFFFFF; font-size: clamp(1.4rem, 3vw, 1.85rem); }
.ruk-policy-cta p{ margin: 0 0 18px; color: rgba(255, 255, 255, .9); line-height: 1.55; }
.ruk-policy-cta p:last-child{ margin-bottom: 0; }
.ruk-policy-cta__btn{
  display: inline-block;
  min-height: 46px;
  padding: 13px 26px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--ruk-forest, #08411F);
  font-weight: 700;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.ruk-policy-cta__btn:hover,
.ruk-policy-cta__btn:focus{ background: var(--ruk-rose, #C8102E); color: #FFFFFF; }
.ruk-policy-cta__link{ margin-left: 14px; color: #FFFFFF; text-decoration: underline; }
@media (max-width: 640px){
  .ruk-policy-cta{ padding: 22px 20px 24px; }
  .ruk-policy-cta__link{ display: block; margin: 14px 0 0; }
}
/* ---- ruk: policy page contact prompt — end ---- */