/*
  Infinity: the shared stylesheet for every page.

  Structure of this file:
    1. Design tokens (CSS custom properties): colours, spacing, type scale
    2. Reset and base element styles
    3. Layout helpers (.container, sections)
    4. Header and navigation
    5. Buttons and links
    6. Cards, stat blocks, placeholders
    7. Footer
    8. Accessibility (focus, reduced motion)
    9. Responsive rules (mobile-first: base styles are for phones,
       then min-width media queries add rules for wider screens)
   10. Components used by the inner pages (steps, FAQ, contact, emergency notice, long text)
   11. Homes to rent (fact strip, status pills, listing cards, empty state)

  Colour and spacing choices are explained in docs/m1-design-plan.md.
*/

/* ---------- 1. Design tokens ---------- */

:root {
  /* Brand colours, taken from media/infinityuk logo.png.
     Each has been checked against white for WCAG AA contrast (4.5:1
     for text); see docs/m1-design-plan.md for the numbers. */
  --color-blue: #0050f8;         /* 5.99:1 on white. Safe for text, buttons, links */
  --color-blue-deep: #1e40af;    /* 8.72:1. Hover/pressed state, dark sections */
  --color-green: #008820;        /* 4.62:1. Passes, but only just: icons and large accents only */
  --color-green-deep: #166534;   /* 7.13:1. Use this instead of --color-green for any green text */
  --color-green-light: #58f870;  /* 1.39:1. Decorative only. NEVER as text or icon colour on white */

  --color-ink: #0b1220;          /* headings, body text: 18.72:1 */
  --color-body: #475569;         /* secondary text: 7.58:1 */
  --color-bg: #f6f8fc;           /* the page: a very light blue-grey, so white cards stand out */
  --color-bg-alt: #edf2fb;       /* tinted alternating sections. Every text colour here still passes AA (lowest: links, 5.3:1) */
  --color-border: #e2e8f0;
  --color-warning-bg: #fff8e1;   /* placeholder highlight, development only */
  --color-warning-border: #d97706;
  --color-danger: #b91c1c;       /* emergency guidance only: 6.47:1 on white, 5.91:1 on the pale-red box */
  --color-danger-bg: #fef2f2;
  --color-green-bg: #e8f7ec;     /* pale green behind green-deep text: status pills, soft buttons */
  --color-amber-bg: #fff4e5;     /* pale amber behind amber text: "available soon" pills */
  --color-amber-text: #9a3412;   /* 7.6:1 on the pale amber */

  /* Roles that change between light and dark. Use these, not --color-blue,
     for anything blue drawn on the page itself: text, links, icons, outlines.
     --color-blue stays for filled buttons, with white text on top. */
  --color-link: #0050f8;
  --color-link-hover: #1e40af;
  --color-surface: #ffffff;      /* cards and panels */
  --color-strong-bg: #0b1220;    /* the dark "Contact us" sections and the skip link: white text on top */
  --color-green-bg-hover: #d3f0dc;
  --color-header-bg: rgba(255, 255, 255, 0.82); /* see-through, blurred header */
  --color-dots: #c7d4ee;         /* the faint dot-grid accents */
  --color-field-border: #7c8aa0; /* form field edges: 3.3:1 on the field, 3.5:1 on the card */

  /* The deep-blue bands: page headers, the Home and About heroes, the "Talk to us"
     sections. The same in light and dark mode. White text on it: 7.1:1 at its brightest. */
  --gradient-hero:
    radial-gradient(circle at 12% 18%, rgba(0, 80, 248, 0.55), transparent 42%),
    radial-gradient(circle at 88% 85%, rgba(88, 248, 112, 0.14), transparent 38%),
    linear-gradient(135deg, #1e40af 0%, #0b1220 75%);

  color-scheme: light;           /* tells the browser to draw scrollbars and form controls to match */

  /* Type scale. Mobile first; the 768px breakpoint below scales headings up. */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --text-body: 1rem;       /* 16px, the minimum for mobile so iOS doesn't zoom on focus */
  --text-small: 0.875rem;  /* 14px */
  --text-h3: 1.25rem;      /* 20px */
  --text-h2: 1.5rem;       /* 24px */
  --text-h1: 2rem;         /* 32px */

  /* Spacing scale: multiples of 8px, used for every margin/padding/gap. */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  --radius: 10px;      /* buttons and small controls */
  --radius-lg: 16px;   /* cards */
  --radius-xl: 28px;   /* the deep-blue bands and big panels */
  --container-width: 1140px;
  /* Soft, deep shadows: cards look lifted rather than outlined. */
  --shadow-card: 0 1px 2px rgba(11, 18, 32, 0.04), 0 10px 30px -12px rgba(11, 18, 32, 0.16);
  --shadow-glow: 0 10px 24px -8px rgba(0, 80, 248, 0.55); /* blue glow under filled buttons and icon badges */
}

/* Dark theme. assets/js/theme.js puts data-theme="dark" on <html>, from the
   visitor's choice or, until they choose, their device's setting. Only the
   colours change. Each text colour below passes WCAG AA (4.5:1) on every
   background it's used on; the ratios are on each line. Brand blue stays
   for filled buttons: white on #0050f8 is 5.99:1 on any page. */
:root[data-theme="dark"] {
  --color-link: #7fa8ff;         /* 7.0:1 on cards, 8.0:1 on the page */
  --color-link-hover: #a9c4ff;   /* 9.4:1 on cards */
  --color-green: #22c55e;        /* icons and dots: 7.2:1 on cards */
  --color-green-deep: #86efac;   /* text on the green pills and soft buttons: 10.2:1 */
  --color-ink: #e6edf8;          /* 15.9:1 on the page */
  --color-body: #a8b4c8;         /* 8.9:1 on the page, 7.9:1 on cards */
  --color-bg: #0b1220;
  --color-bg-alt: #0f1a2e;
  --color-surface: #131f36;
  --color-border: #2a3a57;
  --color-strong-bg: #1e40af;    /* the brand's deep blue: white text 8.7:1 */
  --color-warning-bg: #3a2c06;
  --color-warning-border: #f59e0b;
  --color-danger: #fca5a5;       /* 9.3:1 on the emergency box */
  --color-danger-bg: #2b1115;
  --color-green-bg: #10301d;
  --color-green-bg-hover: #164227;
  --color-amber-bg: #3a2508;
  --color-amber-text: #fdba74;   /* 8.6:1 */
  --shadow-card: 0 0 0 1px rgba(127, 168, 255, 0.04), 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  --color-header-bg: rgba(11, 18, 32, 0.8);
  --color-dots: #26344f;
  --color-field-border: #6479a0; /* 4.3:1 on the field, 3.8:1 on the card */

  color-scheme: dark;
}

/* ---------- 2. Reset and base ---------- */

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

/* Anything marked hidden stays hidden, even if a class gives it a display value
   (the scripts reveal buttons that only work with JavaScript this way). */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bg);
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-2) 0;
  line-height: 1.25;
  text-wrap: balance; /* stops short headings breaking into an awkward one-word last line */
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

p {
  margin: 0 0 var(--space-2) 0;
  color: var(--color-body);
  max-width: 65ch; /* comfortable reading width */
}

a {
  color: var(--color-link);
}

a:hover {
  color: var(--color-link-hover);
}

img {
  max-width: 100%;
  display: block;
}

ul {
  padding-left: 1.25em;
}

/* When a link jumps to part of a page (for example contact.html#emergencies),
   stop the sticky header from covering what it jumps to. */
[id] {
  scroll-margin-top: 6rem;
}

/* ---------- 3. Layout helpers ---------- */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-2);
}

.section {
  padding: var(--space-6) 0;
}

.section-alt {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-alt);
}

/* A faint dot grid in the top corner of tinted sections: a quiet accent from the references. */
.section-alt::before {
  content: "";
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 168px;
  height: 112px;
  background-image: radial-gradient(var(--color-dots) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
  pointer-events: none;
}

.section-alt > .container {
  position: relative; /* above the dots */
}

/* "Talk to us" sections: a rounded deep-blue panel with a soft glow, inset from the edges. */
.section-dark {
  color: #fff;
}

.section-dark > .container {
  position: relative;
  overflow: hidden;
  width: calc(100% - 2 * var(--space-2));
  padding: var(--space-6) var(--space-3);
  border-radius: var(--radius-xl);
  background: var(--gradient-hero);
  box-shadow: 0 24px 48px -24px rgba(0, 80, 248, 0.5);
}

.section-dark h1,
.section-dark h2,
.section-dark p {
  color: #fff;
}

.section-header {
  max-width: 640px;
  margin: 0 0 var(--space-4) 0;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr; /* one column on phones */
}

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

/* ---------- 4. Header and navigation ---------- */

/* See-through with a blur, so the page shows faintly behind it as you scroll. */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-header-bg);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* The header row: the logo on the left, then everything else on the right.
   On phones: the theme button and the menu button. From 768px: the menu,
   then the theme button (section 9 reorders it). */
.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.site-logo {
  display: flex;
  align-items: center;
  margin-right: auto; /* takes up the spare space, pushing the rest to the right */
}

.site-logo img {
  height: 44px; /* phones; the 768px breakpoint below makes it larger */
  width: auto;
}

/* In dark mode the logo's blue lettering is hard to read on the dark header, so a
   thin, soft white outline is drawn round its shape (four small drop shadows, one
   each side), with no box behind it, as on the holding page. The colours stay exact. */
:root[data-theme="dark"] .site-logo img {
  filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.2))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2));
}

.nav-toggle,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
}

.nav-toggle svg,
.theme-toggle svg {
  width: 22px;
  height: 22px;
}

/* The moon offers dark mode; once it's dark, the sun offers light mode. */
:root[data-theme="dark"] .theme-icon-moon,
:root:not([data-theme="dark"]) .theme-icon-sun {
  display: none;
}

.nav-list {
  display: none;
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0 0 0;
  gap: var(--space-3);
}

.nav-list.is-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2);
}

.nav-list a {
  position: relative;
  display: block;
  padding: var(--space-1) 0;
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 500;
}

.nav-list a[aria-current="page"] {
  color: var(--color-link);
}

.nav-list a:hover {
  color: var(--color-link);
}

/* The bar under the current page's link (from 768px; section 9 places it). It's a
   span inside that link, and it has the same view-transition-name on every page, so
   when you click to another page the browser slides it across to the new link.
   Browsers without cross-document view transitions (Firefox, for now) just show it
   in place. On phones the menu is a drop-down list, so the bar stays hidden. */
.nav-indicator {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* Only the bar moves: the rest of the page changes instantly, as it did before. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

::view-transition-group(nav-indicator) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- 5. Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 44px; /* touch target */
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-size: var(--text-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease,
    transform 150ms ease, box-shadow 150ms ease;
}

.btn:hover {
  transform: translateY(-1px); /* a tiny lift; switched off for reduced motion (section 8) */
}

.btn-primary {
  background: var(--color-blue);
  color: #fff;
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  background: var(--color-blue-deep);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-link);
  color: var(--color-link);
}

.btn-secondary:hover {
  background: var(--color-bg-alt);
}

/* Buttons for deep-blue backgrounds, such as the About page's hero. */
.btn-light {
  background: #ffffff;
  color: var(--color-blue-deep);   /* 8.7:1 */
}

.btn-light:hover {
  background: #dbe6ff;
  color: var(--color-blue-deep);
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.75);
  color: #ffffff;
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* A quieter button in pale green, like the "Message" buttons in the references. */
.btn-soft {
  background: var(--color-green-bg);
  color: var(--color-green-deep);
}

.btn-soft:hover {
  background: var(--color-green-bg-hover);
  color: var(--color-green-deep);
}

/* ---------- 6. Cards, stat blocks, placeholders ---------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
}

/* An icon at the top of a card sits in a round, glowing blue badge (the references' style). */
.card > .icon {
  width: 48px;
  height: 48px;
  padding: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-blue), #3d7bff);
  color: #fff;
  box-shadow: var(--shadow-glow);
}

.stat-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: var(--space-3);
}

.stat-block .stat-number {
  display: inline-block;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-link);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-block .stat-label {
  color: var(--color-body);
  font-size: var(--text-small);
}

.icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-link);
}

/* Anything still waiting on real content from the business owner.
   This makes placeholders impossible to miss during development:
   search this project for class="placeholder" before anything goes live. */
.placeholder {
  background: var(--color-warning-bg);
  outline: 2px dashed var(--color-warning-border);
  outline-offset: 2px;
  padding: 0 0.25em;
  border-radius: 4px;
}

.photo-placeholder {
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-body);
  font-size: var(--text-small);
  text-align: center;
  padding: var(--space-2);
}

/* Drawn illustrations, standing in until the owner's own photos are used.
   They're decorative, so each <img> has alt="". The width and height
   attributes reserve the space; this keeps the shape as the image scales. */
.illustration {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 28px rgba(11, 18, 32, 0.14)); /* lifts the drawing off the page */
}

/* In dark mode, pictures with light skies would glare, so they're dimmed slightly. */
:root[data-theme="dark"] .illustration {
  filter: brightness(0.9) drop-shadow(0 16px 28px rgba(0, 0, 0, 0.45));
}

:root[data-theme="dark"] .listing-photo {
  filter: brightness(0.9);
}

/* The fee list on the Services page. A real <table>, so screen readers
   announce each fee with its row and column headings. */
.fee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.fee-table th,
.fee-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-1) var(--space-2) var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
}

.fee-table th {
  color: var(--color-ink);
  font-weight: 600;
}

.fee-table tbody th {
  width: 40%;
}

/* The heading row at the start of each group of fees, styled like the eyebrow labels. */
.fee-table .fee-group th {
  width: auto;
  padding-top: var(--space-3);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-green-deep);
}

/* ---------- 7. Footer ---------- */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-6) 0 var(--space-4) 0;
  color: var(--color-body);
  font-size: var(--text-small);
}

.site-footer a {
  color: var(--color-body);
}

.site-footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

/* ---------- 8. Accessibility ---------- */

:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: 2px;
}

/* "Skip to main content": off-screen until a keyboard user tabs to it,
   then it appears so they can jump past the menu on every page. */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  background: var(--color-strong-bg);
  color: #fff;
}

.skip-link:focus {
  top: var(--space-2);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .btn:hover {
    transform: none; /* no hover lift */
  }
}

/* ---------- 9. Responsive: tablet and up ---------- */

@media (min-width: 768px) {
  :root {
    --text-h1: 3rem;      /* 48px */
    --text-h2: 2rem;      /* 32px */
    --text-h3: 1.5rem;    /* 24px */
    --text-body: 1.0625rem; /* 17px */
  }

  .site-logo img {
    height: 56px;
  }

  .nav-toggle {
    display: none;
  }

  /* On wider screens the theme button moves after the menu. */
  .theme-toggle {
    order: 1;
    margin-left: var(--space-2);
  }

  .nav-list {
    display: flex;
    flex-direction: row;
    padding: 0;
    gap: var(--space-4);
  }

  .nav-list .nav-indicator {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: var(--color-link);
    view-transition-name: nav-indicator;
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .section {
    padding: var(--space-8) 0;
  }
}

/* ---------- 10. Components used by the inner pages ---------- */

/* The deep-blue bands at the top of every page: the inner-page headers here,
   and the About and Home heroes (sections 12 and 13). Rounded bottom corners,
   a faint ring and a dot grid for texture, and white text. The same in light
   and dark mode. */
.page-header,
.about-hero,
.home-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--gradient-hero);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.page-header {
  padding: var(--space-6) 0;
}

/* The faint ring, top left... */
.page-header::before,
.about-hero::before,
.home-hero::before {
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;
  left: -260px;
  top: -320px;
  border: 48px solid rgba(255, 255, 255, 0.04);
  border-radius: 50%;
  pointer-events: none;
}

/* ...and the dot grid, bottom right. */
.page-header::after,
.about-hero::after,
.home-hero::after {
  content: "";
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-3);
  width: 196px;
  height: 112px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
  pointer-events: none;
}

.page-header > .container,
.about-hero > .container,
.home-hero > .container {
  position: relative; /* above the ring and the dots */
}

.page-header h1,
.about-hero h1,
.home-hero h1 {
  color: #fff;
}

.page-header p,
.about-hero p,
.home-hero p {
  color: rgba(255, 255, 255, 0.85);
}

.page-header p {
  font-size: 1.125rem;
}

.page-header a {
  color: #fff;
}

.page-header a:hover {
  color: #dbe6ff;
}

/* Placeholders keep dark text on their yellow highlight. */
.page-header .placeholder {
  color: var(--color-ink);
}

/* A page header with an illustration: the text on the left and the picture on
   the right from 768px wide. On phones the picture sits under the text, smaller,
   so the page's content isn't pushed too far down. */
.page-header-grid {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

.page-header-art {
  width: 100%;
  max-width: 240px;
  height: auto;
  justify-self: center;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.35));
}

@media (min-width: 768px) {
  .page-header-grid {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .page-header-art {
    max-width: 380px;
    justify-self: end;
  }
}

/* A small label above a heading. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--space-1) 0;
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-green-deep);
}

/* On the deep blue, the brand's light green reads well: 5.1:1 at its brightest. */
.page-header .eyebrow,
.about-hero .eyebrow,
.home-hero .eyebrow {
  color: var(--color-green-light);
}

/* Numbered steps. Only for things that really happen in order.
   role="list" goes on the <ol> in the HTML: some screen readers stop
   announcing a list once list-style is removed. */
.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-4);
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-2);
  align-items: start;
}

.steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-blue), #3d7bff);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--shadow-glow);
}

.steps h3 {
  margin-bottom: var(--space-1);
}

/* FAQ. Built on the browser's own <details>/<summary> elements, so it
   opens and closes without JavaScript and works by keyboard. */
.faq-list {
  display: grid;
  gap: var(--space-2);
  max-width: 48rem;
}

/* The landlord and tenant questions, side by side from 768px wide. Each column
   keeps its own height (align-items: start), so opening a question in one
   column doesn't stretch the other. More space between the two lists when
   they're stacked on phones, so the second heading clearly starts a new group. */
.faq-columns {
  align-items: start;
  gap: var(--space-6) var(--space-4);
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* An open question gets a blue outline and a lift, so it's clear which one you're reading. */
.faq-item[open] {
  border-color: var(--color-link);
  box-shadow: var(--shadow-card);
}

.faq-item summary:hover {
  color: var(--color-link);
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* A chevron drawn with borders, so screen readers don't read out a "+" symbol. */
.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.25rem;
  border-right: 2px solid var(--color-link);
  border-bottom: 2px solid var(--color-link);
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
}

.faq-answer {
  padding: 0 var(--space-3) var(--space-3) var(--space-3);
}

/* Contact methods */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

/* Each contact method's icon sits on a small soft tile. */
.contact-list .icon {
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 12px;
  background: var(--color-bg-alt);
}

.contact-label {
  display: block;
  font-weight: 600;
  color: var(--color-ink);
}

/* The message form. Field edges use --color-field-border, which passes the 3:1
   contrast that form controls need (the usual border colour is too faint). */
.contact-form {
  gap: var(--space-3); /* a little more room between fields than a normal card */
}

.form-note {
  font-size: var(--text-small);
}

.form-field label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 600;
  color: var(--color-ink);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 44px; /* touch target */
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
  font: inherit;
}

.form-field textarea {
  min-height: 8rem;
  resize: vertical;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--color-link);
  outline: 3px solid var(--color-link);
  outline-offset: 1px;
}

/* Emergency guidance. Safety information, so it's styled to stand apart
   from everything else on the page. */
.callout-emergency {
  border: 2px solid var(--color-danger);
  background: var(--color-danger-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.callout-emergency h2,
.callout-emergency h3 {
  color: var(--color-danger);
}

.callout-emergency p,
.callout-emergency li {
  color: var(--color-ink);
}

.callout-emergency ul {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-2) 0;
}

/* Long-form text, such as the privacy notice. */
.prose {
  max-width: 70ch;
}

.prose h2 {
  margin-top: var(--space-6);
  font-size: var(--text-h3);
}

.prose p,
.prose li {
  color: var(--color-ink);
}

/* ---------- 11. Homes to rent (to-rent.html) ----------
   Patterns from the dashboard references in media/references/, in the brand
   colours: a strip of key facts, a heading with a count beside it, status
   pills with a dot, cards with label-and-value rows, and a soft button next
   to an outlined one. */

/* Key facts in one bordered strip, like the figures along the top of the
   references' Overview screen. Stacked on phones, side by side from 768px. */
.fact-strip {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.fact-strip > div {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.fact-strip > div:last-child {
  border-bottom: 0;
}

.fact-label {
  display: block;
  font-size: var(--text-small);
  color: var(--color-body);
}

.fact-value {
  display: block;
  font-weight: 700;
  color: var(--color-ink);
}

@media (min-width: 768px) {
  .fact-strip {
    grid-template-columns: repeat(4, 1fr);
  }

  .fact-strip > div {
    border-bottom: 0;
    border-right: 1px solid var(--color-border);
  }

  .fact-strip > div:last-child {
    border-right: 0;
  }
}

/* A small count next to a heading ("Properties  Total 19" in the references). */
.heading-count {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-alt);
  color: var(--color-body);
  font-size: var(--text-small);
  font-weight: 600;
  vertical-align: middle;
}

/* Status with a coloured dot, like "● Occupied" and "● Vacant" in the references. */
.status-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--color-green-bg);
  color: var(--color-green-deep);
  font-size: var(--text-small);
  font-weight: 600;
}

.status-pill::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-green);
}

.status-pill-soon {
  background: var(--color-amber-bg);
  color: var(--color-amber-text);
}

.status-pill-soon::before {
  background: var(--color-warning-border);
}

/* "Available now" and "Available soon" side by side from 768px wide, like the
   status columns on the references' maintenance board; stacked on phones. */
.listing-columns {
  align-items: start;
  gap: var(--space-6) var(--space-4);
}

.listing-columns h2 {
  margin: 0;
}

.listing-columns .empty-state {
  padding: var(--space-4) var(--space-3);
}

/* Half-width columns make 4:3 photos very tall, so they're a little wider here. */
.listing-columns .listing-photo {
  aspect-ratio: 3 / 2;
}

/* The one "message us" box under both lists. */
.listing-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.listing-contact h3 {
  margin: 0 0 var(--space-1) 0;
}

.listing-contact p {
  margin: 0;
}

/* Side by side, each column's heading, empty card and example share rows with
   the other column (subgrid), so they line up even when text wraps differently. */
@media (min-width: 768px) {
  .listing-columns {
    row-gap: var(--space-2);
  }

  .listing-columns > .stack {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

@media (min-width: 768px) {
  .listing-contact {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .listing-contact .cluster {
    flex-shrink: 0;
  }
}

/* One home to rent: photos on top, the details, then the contact buttons. */
.listing-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* The home's photo. Real photos come in all shapes, so every one is shown
   at 4:3 and cropped to fit (object-fit: cover) rather than stretched. */
.listing-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 1px solid var(--color-border);
}

.listing-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  padding: var(--space-3) var(--space-3) var(--space-2);
}

.listing-body h3,
.listing-body p {
  margin: 0;
}

.listing-location {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-small);
}

.listing-location .icon {
  width: 16px;
  height: 16px;
}

.listing-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.2;
}

.listing-price span {
  font-size: var(--text-small);
  font-weight: 400;
  color: var(--color-body);
}

.listing-actions {
  display: flex;
  gap: var(--space-1);
  padding: 0 var(--space-3) var(--space-3);
}

.listing-actions .btn {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: var(--text-small);
}

/* Label-and-value rows, like "Properties : 5" on the references' People cards. */
.detail-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem var(--space-2);
  margin: var(--space-1) 0 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-small);
}

.detail-list dt {
  color: var(--color-body);
}

.detail-list dd {
  margin: 0;
  color: var(--color-ink);
  font-weight: 600;
}

/* What the page shows when nothing is available, which is most of the year. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-3);
  text-align: center;
}

.empty-state h3,
.empty-state p {
  margin: 0;
}

.empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-blue), #3d7bff);
  box-shadow: var(--shadow-glow);
}

.empty-state-icon .icon {
  color: #fff;
}

/* ---------- 12. About page ----------
   The hero is laid out like a property landing page (the owner's reference):
   text on the left, a round picture on the right. Its deep-blue background,
   ring and dots are shared with the other bands (section 10). */

.about-hero {
  padding: var(--space-6) 0;
}

.about-hero-grid {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

.about-hero .about-hero-lead {
  font-size: 1.25rem;
  color: #fff;
}

.about-hero-art {
  width: 100%;
  height: auto;
  max-width: 440px;
  justify-self: center;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.35));
}

/* The "At a glance" facts, as pills on the deep blue. */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-3) 0;
  padding: 0;
  list-style: none;
}

.hero-facts li {
  padding: 0.375rem 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: var(--text-small);
  font-weight: 600;
}

/* Postcode areas as chips on the "Where we work" cards. */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip-list li {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-alt);
  color: var(--color-ink);
  font-size: var(--text-small);
}

@media (min-width: 768px) {
  .about-hero {
    padding: var(--space-8) 0;
  }

  .about-hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .about-hero-art {
    justify-self: end;
  }
}

/* ---------- 13. Home page ----------
   The hero shares the deep-blue band styles (section 10). The figures sit in
   a white card that overlaps the hero's bottom edge, like the search bar in
   the owner's reference. */

.home-hero {
  padding: var(--space-6) 0 calc(var(--space-8) + var(--space-4)); /* room at the bottom for the card */
}

.home-hero-grid {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

.home-hero .home-hero-lead {
  max-width: 50ch;
  font-size: 1.125rem;
}

.home-hero-art {
  position: relative;
}

/* The small see-through label. On phones and tablets it sits just under the
   drawing, which is too small to share; from 1024px it moves into the drawing's
   clear sky at the top right, where it doesn't cover the houses. */
.hero-tag {
  width: fit-content;
  margin: var(--space-2) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(11, 18, 32, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.6);
}

.hero-tag strong {
  color: #fff;
}

.hero-tag span {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-small);
}

.hero-tag .icon {
  width: 16px;
  height: 16px;
  color: var(--color-green-light);
}

/* The figures card, pulled up over the bottom of the hero. */
.stats-overlap {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--space-8));
}

.stats-card {
  gap: 0;
  padding: var(--space-1);
}

/* Thin dividers between the figures: across on phones, down from 768px. */
.stats-card .stat-block + .stat-block {
  border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .home-hero {
    padding: var(--space-8) 0 calc(var(--space-8) + var(--space-6));
  }

  .home-hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .stats-card .stat-block + .stat-block {
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }
}

@media (min-width: 1024px) {
  .hero-tag {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    margin: 0;
  }
}