/* Sable and Stone Real Estate, brand foundation
   Custom properties, fonts, reset, type scale, conversion frame.
   The scroll-scrub engine themes itself from the --sw-* vars added in a later task. */

:root {
  /* Palette */
  --sable: #0B0A08;
  --ink: #161310;
  --brass: #C9A24B;
  --gilt: #E8C97E;
  --ivory: #F3ECDE;
  --stone: #CFC7B8;

  /* Light surfaces: the page alternates dark brand ground with paper
     sections so it reads bright without losing the black and gold identity. */
  --paper: #FAF8F4;
  --paper-alt: #F1EDE5;
  --charcoal: #1A1713;
  --charcoal-soft: #55504A;
  --brass-deep: #9A7A2E;

  /* Lifted warm surfaces. The header and footer stay near black as brand
     anchors; every content section sits on these lighter greys so the page
     reads warm and open rather than heavy. */
  --surface: #322C26;
  --surface-alt: #3A342C;
  --card: #453D34;
  --card-line: rgba(201, 162, 75, 0.32);
  --field: #2A251F;
  --card-dark: #201C18;

  /* Type */
  --serif: 'Marcellus', 'Times New Roman', serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* Scroll-scrub engine theme. The engine injects its own CSS and reads only
     these six custom properties, so the brand palette drives it end to end. */
  --sw-bg: var(--sable);
  --sw-ink: var(--ivory);
  --sw-accent: var(--brass);
  --sw-muted: var(--stone);
  --sw-serif: var(--serif);
  --sw-sans: var(--sans);
}

@font-face {
  font-family: 'Marcellus';
  src: url('../fonts/marcellus-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-var.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base reset ---------- */

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

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

body, h1, h2, h3, p, figure {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--sable);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg {
  display: block;
  max-width: 100%;
  /* Without this, an intrinsic height attribute wins over any aspect-ratio
     we set, and a CSS-constrained width squashes the image. */
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- Type scale ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--ivory);
}

h1 {
  font-size: clamp(2.5rem, 1.85rem + 3.3vw, 4.75rem);
}

h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
}

h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
}

p {
  max-width: 60ch;
}

/* ---------- Gold-thread hairline utility ---------- */

.thread {
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--brass), transparent);
}

/* ---------- data-sw-seo fallback content ----------
   Visible until the scroll-scrub engine mounts and hides it (later task);
   also the permanent state for crawlers and no-JS. */

[data-sw-seo] {
  max-width: 46rem;
  margin-inline: auto;
  padding: 8rem 1.5rem 4rem;
}

[data-sw-seo] a {
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

[data-sw-seo] h2 {
  margin-top: 2.5rem;
}

[data-sw-seo] p {
  margin-top: 0.75rem;
  color: var(--stone);
}

main > section {
  padding: 4rem 1.5rem;
}

/* Belt and braces: the engine's pinned copy panels are <section class="sw-panel">
   elements nested inside #world's stage, not direct children of main, so the
   rule above already skips them; this guard makes that explicit. */
.sw-panel {
  padding: 0;
}

/* Dialog fallback for browsers without native <dialog> open/close support. */
dialog:not([open]) {
  display: none;
}


/* =========================================================================
   SITE CHROME v2: header, hero band, search, sections, listings, footer
   Light surfaces alternate with the dark brand ground so the page reads
   bright while keeping the black and gold identity.
   ====================================================================== */

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  background: var(--brass);
  color: var(--sable);
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  text-decoration: none;
}

.skip-link:focus {
  top: 0.5rem;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: #0B0A08;
  border-bottom: 1px solid rgba(201, 162, 75, 0.22);
}

.utility-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid rgba(201, 162, 75, 0.16);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.utility-left,
.utility-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.utility-bar a {
  color: var(--stone);
  text-decoration: none;
}

.utility-bar a:hover {
  color: var(--gilt);
}

.utility-cta {
  background: none;
  border: 1px solid var(--brass);
  color: var(--gilt);
  font: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
}

.utility-cta:hover {
  background: var(--brass);
  color: var(--sable);
}

.main-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding: 0.85rem clamp(1rem, 3vw, 2.5rem);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list-left { justify-content: flex-start; }
.nav-list-right { justify-content: flex-end; }

.nav-list a {
  color: var(--ivory);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.nav-list a:hover {
  color: var(--gilt);
  border-bottom-color: var(--brass);
}

.nav-brand {
  display: block;
  text-decoration: none;
  color: var(--ivory);
  line-height: 0;
}

/* The client's lockup, used as artwork. It was previously rebuilt in HTML type,
   which gave the wrong ampersand and the wrong letterforms. */
.brand-lockup {
  display: block;
  /* Stacked lockup: the wordmark is only about a third of its height, so it
     has to be set large enough for REAL ESTATE to read at all. */
  height: clamp(74px, 7.4vw, 104px);
  width: auto;
}

.brand-lockup-footer { height: clamp(76px, 8vw, 96px); }


.nav-toggle,
.nav-cta {
  display: none;
}

.nav-drawer {
  border-top: 1px solid rgba(201, 162, 75, 0.18);
  padding: 1rem clamp(1rem, 3vw, 2.5rem) 1.5rem;
  max-height: 70svh;
  overflow-y: auto;
}

.nav-drawer[hidden] { display: none; }

.nav-drawer ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.nav-drawer li + li { border-top: 1px solid rgba(201, 162, 75, 0.12); }

.nav-drawer a {
  display: block;
  padding: 0.85rem 0;
  color: var(--ivory);
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

.nav-drawer-foot {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.nav-drawer-foot a { color: var(--gilt); }

/* Header height reserved above the cinematic */
#world { padding-top: 0; }

.nav-linklike {
  background: none;
  border: none;
  padding: 0 0 2px;
  font: inherit;
  color: var(--ivory);
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

.nav-linklike:hover { color: var(--gilt); border-bottom-color: var(--brass); }

.nav-drawer .nav-linklike {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.85rem 0;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

.footer-linklike {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--stone);
  cursor: pointer;
}

.footer-linklike:hover { color: var(--gilt); }

/* ---------- Search band ---------- */

.search-band {
  position: relative;
  z-index: 20;
  /* The card overlaps the film on purpose, but it must never reach the hero
     CTAs. Those sit exactly one .sw-copy bottom-padding off the stage floor,
     and that padding is fluid, so a fixed overlap drifts into the buttons at
     some widths. Deriving it from the same clamp keeps the clearance pinned at
     1.5rem whatever the viewport does. */
  margin-top: calc(1.5rem - clamp(1.25rem, 4vw, 4rem));
  padding: 0 clamp(1rem, 4vw, 3rem);
}

.search-inner {
  max-width: 68rem;
  margin: 0 auto;
  background: #0B0A08;
  border: 1px solid rgba(201, 162, 75, 0.3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.search-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 1rem 0;
  border-bottom: 1px solid rgba(201, 162, 75, 0.16);
}

.search-tabs button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--stone);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.75rem 1rem;
  cursor: pointer;
}

.search-tabs button[aria-selected="true"] {
  color: var(--gilt);
  border-bottom-color: var(--brass);
}

.search-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 0.75rem;
  align-items: end;
  padding: 1.25rem;
}

.search-field { display: grid; gap: 0.3rem; }

.search-field label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}

.search-field input,
.search-field select {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 162, 75, 0.28);
  color: var(--ivory);
  font: inherit;
  font-size: 0.95rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0;
  appearance: none;
}

.search-field input::placeholder { color: rgba(153, 144, 127, 0.75); }

.search-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%), linear-gradient(135deg, var(--brass) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.search-field input:focus,
.search-field select:focus {
  outline: none;
  border-color: var(--brass);
  background-color: rgba(255, 255, 255, 0.08);
}

.search-submit {
  background: var(--brass);
  border: none;
  color: var(--sable);
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  padding: 0.85rem 2rem;
  cursor: pointer;
  height: fit-content;
}

.search-submit:hover { background: var(--gilt); }

/* ---------- Section shells ---------- */

main > section {
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 4vw, 3rem);
}

#services { background: var(--sable); }

.section-inner {
  max-width: 74rem;
  margin: 0 auto;
}

.section-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.75rem;
}

main > section h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 1.1rem;
}

.section-intro {
  max-width: 46ch;
  line-height: 1.75;
  margin: 0 0 1.1rem;
}

.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.link-arrow {
  display: inline-block;
  color: var(--brass);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 3px;
  white-space: nowrap;
}

.link-arrow::after { content: " \2192"; }
.link-arrow:hover { color: var(--gilt); border-bottom-color: var(--gilt); }

.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--brass);
  text-decoration: underline;
  cursor: pointer;
}

/* Properties, areas and insights sit on the brand ground; the daylight film
   and the photography carry the brightness instead of light panels. */
/* The page alternates a warm brown band with a black one all the way down,
   so neither tone dominates. Cards flip to a darker fill on the black bands. */
#properties,
#areas,
#news {
  color: var(--stone);
}

#properties { background: var(--surface); }   /* brown  */
#areas      { background: var(--sable); }     /* black  */
#news       { background: var(--surface); }   /* brown  */

/* Client note: too much brown. All three warm bands lose vertical padding
   together; trimming the padding rather than the cards or the type keeps the
   content itself at full size. */
#properties,
#team,
#news {
  padding-top: clamp(1.9rem, 3.2vw, 2.75rem);
  padding-bottom: clamp(1.9rem, 3.2vw, 2.75rem);
}

#properties h2,
#areas h2,
#news h2,
#properties h3,
#areas h3,
#news h3 {
  color: var(--ivory);
}



/* ---------- About band ---------- */

/* Copy on the left, close to the edge; the picture starts just past it and
   runs all the way out to the right of the viewport. */
.about-band {
  background: var(--surface);
  display: grid;
  grid-template-columns: minmax(0, 45%) minmax(0, 55%);
  align-items: stretch;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  overflow: hidden;
}

.about-inner {
  max-width: none;
  /* sits nearer the left edge than the page's centred measure would put it */
  padding-left: clamp(1.25rem, 5vw, 5.5rem);
  padding-right: 0;
  align-self: center;
}

.about-copy { max-width: 34rem; }

.about-copy h2 { color: var(--ivory); }

.about-media {
  position: relative;
  margin: calc(-1 * clamp(3.5rem, 7vw, 6rem)) 0;   /* full height of the band */
  min-height: 26rem;
}

.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% center;   /* keeps the fascia and door in frame */
  display: block;
  border: 0;
}

/* Fades on every side. The right edge meets the viewport and the left meets
   the copy, so both need it as much as the top and bottom. */
.about-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,  var(--surface) 0%, rgba(50, 44, 38, 0.55) 9%,  rgba(50, 44, 38, 0) 30%),
    linear-gradient(to left,   var(--surface) 0%, rgba(50, 44, 38, 0.45) 6%,  rgba(50, 44, 38, 0) 22%),
    linear-gradient(to bottom, var(--surface) 0%, rgba(50, 44, 38, 0.5) 7%,   rgba(50, 44, 38, 0) 26%),
    linear-gradient(to top,    var(--surface) 0%, rgba(50, 44, 38, 0.5) 7%,   rgba(50, 44, 38, 0) 26%);
}

@media (max-width: 860px) {
  /* stacks on phones, picture below the copy and still full width */
  .about-band { grid-template-columns: 1fr; gap: 0; }
  .about-inner { padding-right: clamp(1.25rem, 5vw, 5.5rem); }
  .about-copy { max-width: none; }
  .about-media { margin: clamp(2rem, 5vw, 3rem) 0 calc(-1 * clamp(3.5rem, 7vw, 6rem)); min-height: 20rem; }
}

/* ---------- Expertise row ---------- */

.expertise-row {
  list-style: none;
  margin: 2.5rem 0 4rem;
  padding: 0;
  display: grid;
  /* Nine services now. Three tidy rows of three below the wide breakpoints. */
  grid-template-columns: repeat(9, 1fr);
  gap: 1.25rem;
  text-align: center;
}

.expertise-row li {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  align-content: start;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(201, 162, 75, 0.28);
}

.expertise-icon {
  color: var(--brass);
  display: block;
}

.expertise-icon svg {
  width: 34px;
  height: 34px;
  display: block;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.expertise-row h3 {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0.25rem 0 0;
  color: var(--ivory);
}



/* ---------- Services grid ---------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.service-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3rem;
  margin: 0 0 0.6rem;
  color: var(--ivory);
}

.service-card p {
  line-height: 1.7;
  margin: 0;
  color: var(--stone);
  max-width: none;
}

.service-detail { margin-top: 1rem; }

.service-detail summary {
  cursor: pointer;
  color: var(--brass);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0;
}

.service-detail summary:hover { color: var(--gilt); }
.service-detail ul { margin: 0.75rem 0 0.5rem; padding-left: 1.1rem; }
.service-detail li { margin-bottom: 0.6rem; color: var(--stone); max-width: none; line-height: 1.65; }
.service-detail li strong { color: var(--ivory); }

/* The base .thread utility is a 1px-wide vertical hairline; service cards use
   it horizontally, so the width has to be reset or it renders as a dot. */
.service-card .thread {
  margin-top: 1.5rem;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, var(--brass), transparent);
}

/* ---------- Listings rail ---------- */

.listings-rail-wrap {
  position: relative;
  margin-top: 2.5rem;
}

.listings-rail {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--brass) rgba(255, 255, 255, 0.08);
}

.listings-rail::-webkit-scrollbar { height: 4px; }
.listings-rail::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); }
.listings-rail::-webkit-scrollbar-thumb { background: var(--brass); }

.listing-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  background: var(--card);
  border: 1px solid var(--card-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 200ms ease, transform 200ms ease;
}

.listing-card:hover {
  border-color: var(--brass);
  transform: translateY(-3px);
}

.listing-card[hidden] { display: none; }

.listing-media { position: relative; }

.listing-card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

.listing-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: rgba(11, 10, 8, 0.86);
  color: var(--gilt);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.32rem 0.65rem;
}

.listing-body { padding: 1rem 1.1rem 1.2rem; }

.listing-price {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--gilt);
  margin: 0 0 0.25rem;
}

.listing-card h3 {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  color: var(--ivory);
}

.listing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: 0.78rem;
  color: var(--stone);
  margin: 0 0 0.85rem;
}

.listing-meta span { display: inline-flex; align-items: center; }
.listing-meta span + span::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--brass);
  margin-right: 0.75rem;
}

.listing-links { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0; }

/* --brass measured 4.44:1 on the card ground, just under the 4.5 floor;
   --gilt clears it at 6.64:1 with no visible change in character. */
.listing-links a {
  color: var(--gilt);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
}

/* Rail arrows: hidden until JS confirms the rail actually overflows. */
.rail-nav {
  position: absolute;
  top: calc(85px - 1.25rem);
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 75, 0.5);
  background: rgba(11, 10, 8, 0.9);
  color: var(--gilt);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.rail-nav:hover { background: var(--brass); color: var(--sable); border-color: var(--brass); }
.rail-nav[hidden] { display: none; }
.rail-prev { left: -12px; }
.rail-next { right: -12px; }

.listings-empty {
  margin: 2rem 0 0;
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid rgba(201, 162, 75, 0.25);
  color: var(--stone);
}

.listings-empty[hidden] { display: none; }
.listings-empty a { color: var(--brass); }

#properties .areas-note,
#areas .areas-note { color: var(--stone); margin-top: 2rem; }

#properties .areas-note .link-button,
#properties .areas-note a { color: var(--brass); }

/* ---------- Areas ---------- */

.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2.5rem;
}

.area-card {
  background: var(--card-dark);
  border: 1px solid var(--card-line);
  padding: 1.75rem;
}

.area-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  margin: 0 0 0.6rem;
}

.area-card p { line-height: 1.7; margin: 0; max-width: none; }

.areas-note { line-height: 1.7; }

/* This one is a footnote under the cards rather than body copy, so it does not
   need the narrow reading measure the intros use. Client asked for one line;
   it needs about 717px and was being held to 648px. */
#properties .areas-note { max-width: 48rem; }

/* ---------- News grid ---------- */

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: 2.5rem;
}

.news-card { background: transparent; }

.news-card .post-card-thumb {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  margin-bottom: 1rem;
  border: 1px solid rgba(201, 162, 75, 0.22);
}

.news-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.4;
  margin: 0.35rem 0 0;
}

.news-card a { color: var(--ivory); text-decoration: none; }
.news-card a:hover { color: var(--gilt); text-decoration: underline; }

/* ---------- Contact ---------- */

/* The closing section carries a quiet photograph behind it, dark enough that
   the form and the contact details keep their contrast. The image is set on a
   pseudo element so no extra markup is needed and it can be dropped on smaller
   screens, where it would only cost bandwidth. */
#contact {
  background: var(--sable);
  position: relative;
  isolation: isolate;
}

#contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to bottom, rgba(11, 10, 8, 0.93), rgba(11, 10, 8, 0.97)),
    url("/assets/img/sections/country-cottage.webp?v=61");
  background-size: cover;
  background-position: center;
}

@media (max-width: 700px) {
  #contact::before { background-image: none; }
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.contact-intro h2 { color: var(--ivory); }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0 1.25rem;
}

.contact-office h3 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.5rem;
}

.contact-office p { margin: 0 0 0.4rem; }
.contact-office a { color: var(--ivory); font-size: 1.05rem; text-decoration: none; }
.contact-office a:hover { color: var(--gilt); }
.contact-address { font-size: 0.88rem; color: var(--stone); line-height: 1.6; }

.contact-email { margin: 0 0 1.75rem; }
.contact-email a { color: var(--gilt); }

.contact-hours {
  border-collapse: collapse;
  font-size: 0.9rem;
  color: var(--stone);
}

.contact-hours caption {
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  padding-bottom: 0.6rem;
}

.contact-hours th,
.contact-hours td {
  text-align: left;
  padding: 0.35rem 2rem 0.35rem 0;
  font-weight: 400;
}

.contact-form {
  background: var(--card-dark);
  border: 1px solid var(--card-line);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 1rem;
}

.contact-form .val-btn { width: 100%; justify-content: center; }
.contact-form textarea { resize: vertical; min-height: 7rem; }

.contact-form-note {
  margin: 0;
  font-size: 0.88rem;
  color: var(--gilt);
  min-height: 1.2em;
}

/* ---------- Footer ---------- */

.site-footer {
  background: #050403;
  border-top: 1px solid rgba(201, 162, 75, 0.22);
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem) 2rem;
}

.footer-inner {
  max-width: 74rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr) 1.1fr;
  gap: clamp(1.5rem, 2.4vw, 2.5rem);
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ivory);
  margin-bottom: 0.9rem;
}

.footer-tagline {
  font-family: var(--serif);
  color: var(--gilt);
  letter-spacing: 0.1em;
  margin: 0 0 0.75rem;
}

.footer-blurb {
  color: var(--stone);
  line-height: 1.7;
  font-size: 0.9rem;
  max-width: 30ch;
  margin: 0;
}

.footer-col h2 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1rem;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.footer-col a {
  color: var(--stone);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-col a:hover { color: var(--gilt); }

.footer-cta {
  margin-top: 1.25rem;
  background: none;
  border: 1px solid var(--brass);
  color: var(--gilt);
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.65rem 1.2rem;
  cursor: pointer;
}

.footer-cta:hover { background: var(--brass); color: var(--sable); }

.footer-legal-line {
  max-width: 74rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(201, 162, 75, 0.14);
  color: var(--stone);
  font-size: 0.82rem;
}

/* ---------- Smooth in-page scrolling ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .expertise-row { grid-template-columns: repeat(5, 1fr); row-gap: 2rem; }
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; }
}

/* The hamburger takes over at 960px, but the full nav only actually fits from
   about 1120px. Measured in the gap: 71px of links clipped off the right at
   980px and 36px at 1024px, which is iPad landscape. Tighten type, tracking,
   gaps and the lockup through that band rather than push everyone there onto a
   hamburger. */
@media (min-width: 961px) and (max-width: 1120px) {
  .main-nav { gap: 0.7rem; padding-left: 0.9rem; padding-right: 0.9rem; }
  .nav-list { gap: 0.6rem; }
  .nav-list a,
  .nav-linklike { font-size: 0.66rem; letter-spacing: 0.05em; }
  .brand-lockup { height: clamp(54px, 5.6vw, 66px); }
  .utility-bar { font-size: 0.72rem; }
}

@media (max-width: 960px) {
  .nav-list { display: none; }
  .nav-toggle {
    display: grid;
    gap: 4px;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    justify-self: start;
  }
  .nav-toggle-bar {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--ivory);
  }
  .nav-cta {
    display: inline-block;
    justify-self: end;
    background: var(--brass);
    border: none;
    color: var(--sable);
    font: inherit;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.6rem 1rem;
    cursor: pointer;
  }
  .utility-email { display: none; }
  .about-inner { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .search-form { grid-template-columns: 1fr 1fr; }
  .search-submit { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .utility-bar { font-size: 0.75rem; }
  .utility-left { gap: 1rem; }
  .utility-right { gap: 0.75rem; }
  .expertise-row { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .search-band { margin-top: -3rem; }
  .search-form { grid-template-columns: 1fr; padding: 1rem; }
  .about-stats { grid-template-columns: 1fr 1fr; }
  .services-grid,
  .areas-grid,
  .contact-grid { grid-template-columns: 1fr; }
  .val-flow { max-width: none; padding: 1.5rem; }
  .val-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100svh;
    max-height: 100vh;
    max-height: 100svh;
    margin: 0;
  }
  .val-dialog-inner {
    height: 100%;
    max-height: none;
    border-radius: 0;
    padding: 1.5rem;
    padding-top: max(1.5rem, env(safe-area-inset-top));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .val-actions { flex-direction: column; align-items: stretch; }
  .val-actions .val-btn { width: 100%; }
}

@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr; }
  .expertise-row { grid-template-columns: 1fr 1fr; }
}

/* ---------- Accessibility ---------- */

:focus-visible {
  outline: 2px solid var(--gilt);
  outline-offset: 2px;
}

/* ---------- Valuation flow: the engraved brass plaque ---------- */

.val-mount {
  margin-top: 2.5rem;
}

.val-flow {
  background: var(--ink);
  border: 1px solid var(--brass);
  border-radius: 4px;
  padding: clamp(1.5rem, 2vw + 1rem, 2.75rem);
  max-width: 34rem;
}

.val-fieldset,
.val-subfieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
}

.val-fieldset > *:last-child,
.val-subfieldset > *:last-child {
  margin-bottom: 0;
}

.val-legend {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ivory);
  padding: 0;
  margin: 0 0 1.25rem;
}

.val-subfieldset legend {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  padding: 0;
  margin: 0 0 0.6rem;
}

.val-field {
  margin-bottom: 1.25rem;
}

.val-field label {
  display: block;
  font-size: 0.85rem;
  color: var(--stone);
  margin-bottom: 0.4rem;
}

.val-input {
  width: 100%;
  font: inherit;
  font-family: var(--sans);
  background: var(--field);
  border: 1px solid rgba(201, 162, 75, 0.4);
  border-radius: 2px;
  color: var(--ivory);
  padding: 0.85rem 1rem;
  min-height: 44px;
  transition: border-color 150ms ease;
}

.val-input:focus {
  border-color: var(--brass);
}

.val-input[aria-invalid="true"] {
  border-color: #d9776b;
}

.val-field-error {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: #d9776b;
}

.val-radio-row,
.val-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.val-radio input,
.val-seg input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.val-radio span,
.val-seg span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(201, 162, 75, 0.4);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--ivory);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.val-seg span {
  min-width: 44px;
  padding: 0.6rem 0.85rem;
}

.val-radio input:checked + span,
.val-seg input:checked + span {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--sable);
  font-weight: 600;
}

.val-radio input:focus-visible + span,
.val-seg input:focus-visible + span {
  outline: 2px solid var(--gilt);
  outline-offset: 2px;
}

.val-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: filter 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.val-btn-primary {
  background: var(--brass);
  color: var(--sable);
}

.val-btn-primary:hover {
  filter: brightness(1.1);
}

.val-btn-ghost {
  background: transparent;
  border-color: rgba(201, 162, 75, 0.4);
  color: var(--ivory);
}

.val-btn-ghost:hover {
  border-color: var(--brass);
}

.val-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.val-result-region {
  margin-bottom: 1.5rem;
}

.val-range {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  color: var(--gilt);
  margin: 0;
}

.val-note {
  margin: 0.75rem 0 0;
  color: var(--stone);
  font-size: 0.9rem;
}

.val-date {
  margin: 0.35rem 0 0;
  color: var(--stone);
  font-size: 0.8rem;
}

.val-error-message {
  margin: 0;
  color: var(--ivory);
}

.val-error-message a {
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.val-phones {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--stone);
}

.val-phones a {
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.val-step[tabindex="-1"] {
  outline: none;
}

/* ---------- Valuation dialog ---------- */

.val-dialog {
  border: none;
  padding: 0;
  background: transparent;
  width: min(92vw, 36rem);
  max-width: 36rem;
  max-height: min(88vh, 44rem);
  overflow: visible;
  color: var(--ivory);
}

.val-dialog::backdrop {
  background: rgba(11, 10, 8, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.val-dialog-inner {
  position: relative;
  background: var(--ink);
  border: 1px solid var(--brass);
  border-radius: 4px;
  padding: clamp(1.75rem, 2vw + 1rem, 2.75rem);
  max-height: min(88vh, 44rem);
  overflow-y: auto;
}

.val-dialog .val-flow {
  border: none;
  background: none;
  padding: 0;
  max-width: none;
}

.val-dialog-heading {
  margin: 0 0 1.5rem;
  padding-right: 2.5rem;
}

.val-dialog-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--stone);
  border-radius: 50%;
  transition: color 150ms ease, background-color 150ms ease;
}

.val-dialog-close:hover {
  color: var(--ivory);
  background: rgba(201, 162, 75, 0.12);
}

/* ---- Blog pages ----
   The homepage news strip is styled in the chrome block above; these rules
   cover the standalone /blog pages only. */

body.blog-page { background: var(--sable); }
.blog-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(201, 162, 75, 0.18);
}
.blog-top-nav { display: flex; gap: 1.5rem; align-items: center; }
.blog-top-nav a { color: var(--ivory); text-decoration: none; }
.blog-top-nav a:hover { color: var(--gilt); }
.blog-top-nav .blog-cta {
  background: var(--brass); color: var(--sable);
  padding: 0.5rem 1.1rem; border-radius: 999px; font-weight: 500;
}
.blog-top-nav .blog-cta:hover { background: var(--gilt); color: var(--sable); }
.blog-main { padding: 3rem 1.5rem 5rem; }
.post, .blog-index { max-width: 44rem; margin: 0 auto; }
.post-crumbs { color: var(--stone); font-size: 0.9rem; margin-bottom: 2rem; }
.post-crumbs a { color: var(--stone); }
.post h1, .blog-index h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem); line-height: 1.2;
  margin: 0.5rem 0 1.5rem; color: var(--ivory);
}
.post h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.45rem; margin: 2.25rem 0 0.75rem; color: var(--gilt);
}
.post p { color: var(--stone); line-height: 1.7; margin: 0 0 1.1rem; max-width: none; }
.post ul { color: var(--stone); line-height: 1.7; margin: 0 0 1.25rem; padding-left: 1.2rem; }
.post li { margin-bottom: 0.4rem; }
.post strong { color: var(--ivory); }
.post a { color: var(--brass); }
.post-cta {
  margin-top: 3rem; padding: 2rem;
  background: var(--ink); border: 1px solid rgba(201, 162, 75, 0.25);
}
.post-cta h2 { margin-top: 0; }
.btn-gold {
  display: inline-block; background: var(--brass); color: var(--sable);
  padding: 0.75rem 1.5rem; border-radius: 999px; text-decoration: none; font-weight: 500;
}
.btn-gold:hover { background: var(--gilt); }
.post-card {
  padding: 1.5rem 0; border-bottom: 1px solid rgba(201, 162, 75, 0.15);
}
.post-card h2 { font-size: 1.25rem; line-height: 1.4; margin: 0.25rem 0 0.5rem; font-family: var(--serif); font-weight: 400; }
.post-card a { color: var(--ivory); text-decoration: none; }
.post-card a:hover { color: var(--gilt); text-decoration: underline; }
.post-card p { color: var(--stone); margin: 0; max-width: none; }
.blog-index .section-intro { margin-bottom: 1rem; }

/* News link in the top frame; hidden in the collapsed mobile bar to keep three conversion chips */
.frame-news { font-weight: 400; }
@media (max-width: 700px) {
  .frame-news { display: none; }
}

/* Blog hero + index thumbnails */
.post-hero {
  width: 100%; height: auto; display: block;
  margin: 0.5rem 0 2rem;
  border: 1px solid rgba(201, 162, 75, 0.18);
}
.post-card.has-thumb {
  display: grid; grid-template-columns: 180px 1fr; gap: 1.25rem; align-items: start;
}
.post-card-thumb {
  width: 100%; height: 120px; object-fit: cover; display: block;
  border: 1px solid rgba(201, 162, 75, 0.18);
}
@media (max-width: 560px) {
  .post-card.has-thumb { grid-template-columns: 1fr; }
  .post-card-thumb { height: 160px; }
}

/* ---------- Blog page adjustments for the v2 chrome ---------- */

.blog-brand { justify-items: start; }
.blog-footer-inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; }

@media (max-width: 700px) {
  .blog-footer-inner { grid-template-columns: 1fr 1fr; }
  .blog-top { flex-wrap: wrap; gap: 1rem; }
  .blog-top-nav { gap: 1rem; font-size: 0.85rem; }
}

/* =========================================================================
   Trust blocks: commitments, client feedback, team, credentials
   ====================================================================== */

#why { background: var(--sable); }
#team { background: var(--surface); }

.placeholder-note {
  max-width: 60ch;
  margin: 0 0 2rem;
  padding: 0.85rem 1.1rem;
  border-left: 2px solid var(--brass);
  background: rgba(201, 162, 75, 0.08);
  color: var(--gilt);
  font-size: 0.88rem;
  line-height: 1.65;
}

.promise-grid {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.promise-grid h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--gilt);
  margin: 0 0 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(201, 162, 75, 0.35);
}

.promise-grid p { margin: 0; line-height: 1.7; max-width: none; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.review-card {
  background: var(--card);
  border: 1px solid var(--card-line);
  padding: 1.75rem;
}

.review-card::before {
  content: "\201C";
  display: block;
  font-family: var(--serif);
  font-size: 2.5rem;
  line-height: 0.8;
  color: var(--brass);
  margin-bottom: 0.75rem;
}

.review-quote { margin: 0 0 1rem; line-height: 1.7; max-width: none; }
.review-card.is-placeholder .review-quote { font-style: italic; opacity: 0.7; }

.review-by {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

.team-grid {
  display: grid;
  /* Eight people, so four across in two tidy rows. The count is set explicitly
     rather than with auto-fit, which strands the last one or two on a row of
     their own at common widths. Step down to three then two so a row is never
     left part filled. */
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: 2.5rem;
}

@media (max-width: 1100px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}

.team-card { margin: 0; }

.team-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border: 1px solid var(--card-line);
}

.team-card figcaption {
  display: grid;
  gap: 0.2rem;
  padding-top: 0.9rem;
}

.team-name { color: var(--ivory); font-size: 0.95rem; }

.team-role {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

.office-shot { margin: 3rem 0 0; }

.office-shot img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--card-line);
}

.office-shot figcaption {
  padding-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--stone);
}

/* Area cards carry photography */
.area-card { padding: 0; overflow: hidden; }
.area-card img { width: 100%; height: 190px; object-fit: cover; display: block; }
.area-card h3 { margin: 1.4rem 1.5rem 0.6rem; }
.area-card p { margin: 0 1.5rem 1.75rem; }

/* Footer credentials */
.footer-credentials {
  max-width: 74rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(201, 162, 75, 0.14);
}

.footer-credentials ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Seven credentials. A 180px track fits six across and strands the seventh
     on a row of its own, so widen the track to give four and three. */
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.5rem 1.25rem;
}

.footer-credentials li { display: grid; gap: 0.25rem; }

.footer-credentials span {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}

.footer-credentials strong { font-weight: 400; color: var(--stone); font-size: 0.9rem; }

/* Contact fallback so an enquiry is never silently lost */
.contact-fallback {
  margin-top: 1rem;
  padding: 1.1rem;
  background: var(--field);
  border: 1px solid var(--card-line);
  display: grid;
  gap: 0.75rem;
}

.contact-fallback[hidden] { display: none; }
.contact-fallback p { margin: 0; font-size: 0.88rem; line-height: 1.6; }
.contact-fallback textarea { width: 100%; min-height: 8rem; }
.contact-fallback a { color: var(--gilt); }

@media (max-width: 700px) {
  .team-grid { grid-template-columns: 1fr 1fr; }
  .footer-credentials ul { grid-template-columns: 1fr 1fr; }
}

/* ---------- Touch target sizing ----------
   Audited across 320 to 2560: no horizontal overflow anywhere, but on touch
   sizes 38 to 49 controls measured under 32px, mostly inline text links. The
   phone, email and WhatsApp links in the utility bar are the worst of it, and
   they are exactly what someone reaches for on a phone.

   The hit area is grown with a pseudo-element rather than padding, so nothing
   reflows: the bar keeps its height and the links keep their spacing. Insets
   are asymmetric because these sit in tight horizontal rows and a generous
   sideways grab would overlap the neighbour. */

/* 1024 rather than 900: iPad landscape is exactly 1024 wide, and a tablet
   paired with a trackpad can report a fine pointer, so width has to catch it
   too rather than leaning on pointer detection alone. */
@media (max-width: 1024px), (pointer: coarse) {
  .utility-bar a,
  .footer-col a,
  .footer-legal-line a,
  .link-arrow,
  .news-card a,
  .listing-links a,
  .areas-note a,
  .contact-email a,
  .pg-crumbs a,
  .footer-linklike {
    position: relative;
  }

  .utility-bar a::after,
  .footer-col a::after,
  .footer-legal-line a::after,
  .link-arrow::after,
  .news-card a::after,
  .listing-links a::after,
  .areas-note a::after,
  .contact-email a::after,
  .pg-crumbs a::after,
  .footer-linklike::after {
    content: "";
    position: absolute;
    inset: -11px -5px;
  }

  /* The main nav sits in a tight horizontal row, so it grows vertically only;
     a sideways grab here would overlap the neighbouring link. */
  .nav-list a,
  .nav-linklike { position: relative; }

  .nav-list a::after,
  .nav-linklike::after {
    content: "";
    position: absolute;
    inset: -12px -3px;
  }

  /* The hamburger is the one control everything else on a phone depends on. */
  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
    place-content: center;
  }

  /* 9.6px was the smallest type on the page, and it carries real meaning
     (For sale / Under offer) rather than decoration. */
  .listing-badge { font-size: 0.68rem; }
}

/* Reviews link in the contact block. Deliberately understated: until a real
   rating and count are verified there is nothing to make a badge out of, and a
   bare link that overpromises is worse than a quiet one. */
.contact-reviews {
  margin-top: 0.85rem;
  font-size: 0.85rem;
}

.contact-reviews a {
  color: var(--gilt);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 201, 126, 0.35);
  padding-bottom: 1px;
}

.contact-reviews a:hover { border-bottom-color: var(--gilt); }

/* ---------- Social links ----------
   Icons are inline SVG using currentColor, so they inherit the footer's ink
   and need no extra requests. The list renders nothing while every row is
   commented out, which is the state until real profile URLs are confirmed. */

.social-links {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  gap: 0.85rem;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(201, 162, 75, 0.28);
  border-radius: 50%;
  color: var(--stone);
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}

.social-links a:hover,
.social-links a:focus-visible {
  color: var(--sable);
  background: var(--gilt);
  border-color: var(--gilt);
}

/* ---------- Sub-pages ----------
   Sidebar plus article, shared by every section page. The sidebar is a plain
   list rather than a component so it degrades to an ordinary block of links
   with no JS and no layout when the viewport gets narrow. */

.page-body { background: var(--sable); color: var(--stone); }

.pg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.75rem clamp(1rem, 4vw, 3rem);
  background: #0B0A08;
  border-bottom: 1px solid rgba(201, 162, 75, 0.22);
  position: sticky;
  top: 0;
  z-index: 50;
}

.pg-top .brand-lockup { height: clamp(46px, 5vw, 62px); }

.pg-top-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 2rem);
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.pg-top-nav a { color: var(--ivory); text-decoration: none; }
.pg-top-nav a:hover { color: var(--gilt); }

.pg-top-nav .pg-cta {
  border: 1px solid var(--brass);
  padding: 0.6rem 1rem;
  color: var(--gilt);
}

.pg-top-nav .pg-cta:hover { background: var(--gilt); color: var(--sable); }

.pg-main { padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }

.pg-shell { max-width: 78rem; margin: 0 auto; }

.pg-shell.has-nav {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* ---------- Sidebar ---------- */

.pg-nav {
  position: sticky;
  top: calc(clamp(46px, 5vw, 62px) + 2.5rem);
  border-left: 1px solid rgba(201, 162, 75, 0.22);
  padding-left: 1.25rem;
}

.pg-nav-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ivory);
  margin: 0 0 1rem;
  letter-spacing: 0.04em;
}

.pg-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }

.pg-nav-group {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 1.25rem 0 0.35rem;
}

.pg-nav a {
  display: block;
  padding: 0.42rem 0;
  color: var(--stone);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.45;
  border-left: 2px solid transparent;
  margin-left: -1.3rem;
  padding-left: 1.3rem;
  transition: color 180ms ease, border-color 180ms ease;
}

.pg-nav a:hover { color: var(--ivory); }

.pg-nav a.is-current {
  color: var(--gilt);
  border-left-color: var(--brass);
}

/* ---------- Article ---------- */

.pg-crumbs {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.5rem;
}

.pg-crumbs a { color: inherit; text-decoration: none; }
.pg-crumbs a:hover { color: var(--gilt); }
.pg-crumbs span { opacity: 0.5; margin: 0 0.35rem; }

.pg-article { max-width: 46rem; }
.pg-shell:not(.has-nav) .pg-article { margin: 0 auto; }

.pg-article h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem);
  line-height: 1.1;
  color: var(--ivory);
  margin: 0 0 1.25rem;
}

.pg-lead {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.6;
  color: var(--gilt);
  margin: 0 0 2rem;
  font-family: var(--serif);
}

.pg-article h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
  color: var(--ivory);
  margin: 2.75rem 0 0.85rem;
  line-height: 1.2;
}

.pg-article h3 {
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 2rem 0 0.6rem;
}

.pg-article p { margin: 0 0 1.1rem; line-height: 1.75; }

.pg-article a { color: var(--gilt); text-underline-offset: 0.2em; }

/* numbered steps in the guides */
.pg-step {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ivory);
  border-top: 1px solid rgba(201, 162, 75, 0.18);
  padding-top: 1.5rem;
  margin: 2.5rem 0 0.75rem;
}

.pg-step-n {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--brass);
  flex: none;
}

.pg-list { margin: 0 0 1.35rem; padding-left: 1.1rem; }
.pg-list li { margin: 0 0 0.5rem; line-height: 1.7; }
.pg-list li::marker { color: var(--brass); }

/* the legal disclaimers this copy carries throughout */
.pg-note {
  border-left: 2px solid var(--brass);
  background: rgba(201, 162, 75, 0.06);
  padding: 1rem 1.25rem;
  margin: 1.75rem 0;
}

.pg-note p { margin: 0; font-size: 0.92rem; line-height: 1.7; color: var(--stone); }

.pg-hero {
  margin: 0 0 2.25rem;
  position: relative;
}

.pg-hero img {
  width: 100%;
  height: clamp(13rem, 26vw, 22rem);
  object-fit: cover;
  display: block;
  border: 1px solid rgba(201, 162, 75, 0.2);
}

/* ---------- Section index cards ---------- */

.pg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}

.pg-card {
  display: block;
  padding: 1.5rem;
  border: 1px solid var(--card-line);
  background: var(--card-dark);
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease;
}

.pg-card:hover { border-color: var(--brass); transform: translateY(-2px); }
.pg-card h2 { font-family: var(--serif); font-size: 1.15rem; color: var(--ivory); margin: 0 0 0.5rem; }
.pg-card p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--stone); }

/* ---------- Closing call to action ---------- */

.pg-cta-block {
  margin-top: 3.5rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--card-line);
  background: var(--card-dark);
}

.pg-cta-block h2 { margin-top: 0; }
.pg-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 1.5rem 0 0; }
.pg-cta-alt { color: var(--gilt); text-decoration: none; letter-spacing: 0.06em; }
.pg-cta-alt:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .pg-shell.has-nav { grid-template-columns: 1fr; gap: 2rem; }
  .pg-nav {
    position: static;
    border-left: 0;
    border-bottom: 1px solid rgba(201, 162, 75, 0.22);
    padding-left: 0;
    padding-bottom: 1.5rem;
  }
  .pg-nav ul { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .pg-nav a { margin-left: 0; padding-left: 0.75rem; }
  .pg-top-nav a:not(.pg-cta) { display: none; }
}

/* ---------------------------------------------------------------------------
   Sub-page tools and forms. Calculators and enquiry forms sit inside the
   article column, so they are styled as a panel that reads as part of the
   page rather than as an embedded widget.
   ------------------------------------------------------------------------ */
.pg-tool,
.pg-form {
  margin: 1.75rem 0 2rem;
  padding: clamp(1.25rem, 3vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: 4px;
}

.pg-tool-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--ivory);
  margin: 0 0 1.25rem;
  letter-spacing: 0.01em;
}

.pg-tool-grid,
.pg-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.1rem 1.25rem;
}

.pg-field { display: block; }

.pg-field > span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gilt);
  margin: 0 0 0.45rem;
}

.pg-field small {
  display: block;
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--stone);
  opacity: 0.85;
}

.pg-field input,
.pg-field select,
.pg-field textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ivory);
  background: var(--field);
  border: 1px solid rgba(201, 162, 75, 0.26);
  border-radius: 3px;
}

.pg-field textarea { min-height: 5.5rem; line-height: 1.6; resize: vertical; }

.pg-field input:focus-visible,
.pg-field select:focus-visible,
.pg-field textarea:focus-visible {
  outline: 2px solid var(--gilt);
  outline-offset: 1px;
  border-color: var(--gilt);
}

.pg-field select {
  appearance: none;
  /* The caret is drawn rather than linked, so the page stays self-contained. */
  background-image: linear-gradient(45deg, transparent 50%, var(--gilt) 50%),
                    linear-gradient(135deg, var(--gilt) 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 1.2rem, calc(100% - 0.75rem) 1.2rem;
  background-size: 0.32rem 0.32rem, 0.32rem 0.32rem;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}

.pg-field-wide { grid-column: 1 / -1; }

/* A currency or percent affix sits inside the field frame so the input still
   reads as a single control. */
.pg-input-prefix,
.pg-input-suffix {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(201, 162, 75, 0.26);
  border-radius: 3px;
  background: var(--field);
  overflow: hidden;
}

.pg-input-prefix i,
.pg-input-suffix i {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  font-style: normal;
  color: var(--gilt);
  background: rgba(201, 162, 75, 0.08);
}

.pg-input-prefix input,
.pg-input-suffix input {
  border: 0;
  border-radius: 0;
  background: transparent;
  flex: 1 1 auto;
  min-width: 0;
}

.pg-input-prefix:focus-within,
.pg-input-suffix:focus-within {
  outline: 2px solid var(--gilt);
  outline-offset: 1px;
  border-color: var(--gilt);
}

.pg-check { display: block; }
.pg-check input { width: auto; min-height: 0; margin-right: 0.5rem; accent-color: var(--brass); }
.pg-check > span { display: inline; text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--ivory); }

.pg-fieldset { border: 0; margin: 0 0 1.4rem; padding: 0; }

.pg-fieldset legend {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gilt);
  padding: 0;
  margin: 0 0 0.7rem;
}

.pg-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.5rem 1.25rem;
}

.pg-checks label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  /* 44px keeps every option comfortably above the 24px minimum target size. */
  min-height: 2.75rem;
  font-size: 0.92rem;
  color: var(--ivory);
  cursor: pointer;
}

.pg-checks input { accent-color: var(--brass); width: 1.05rem; height: 1.05rem; flex: none; }

/* Results ---------------------------------------------------------------- */
.pg-tool-out { margin-top: 1.5rem; }

.pg-tool-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin: 0 0 1.1rem;
}

.pg-figure {
  padding: 0.95rem 1rem;
  background: var(--card-dark);
  border: 1px solid rgba(201, 162, 75, 0.2);
  border-radius: 3px;
}

.pg-figure-lead { border-color: var(--brass); background: rgba(201, 162, 75, 0.07); }
.pg-figure-wide { grid-column: 1 / -1; }

.pg-figure span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gilt);
  margin: 0 0 0.4rem;
}

.pg-figure strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3.2vw, 1.75rem);
  font-weight: 400;
  color: var(--ivory);
  line-height: 1.15;
}

.pg-figure strong.is-negative { color: #E8927C; }

.pg-figure small {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--stone);
}

.pg-tool-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.1rem;
  font-size: 0.88rem;
}

.pg-tool-table th,
.pg-tool-table td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid rgba(201, 162, 75, 0.16);
  color: var(--ivory);
}

.pg-tool-table th {
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gilt);
}

.pg-tool-table td:last-child,
.pg-tool-table th:last-child { text-align: right; }

.pg-tool-note,
.pg-tool-hint,
.pg-tool-flag,
.pg-form-consent {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--stone);
}

.pg-tool-flag {
  padding: 0.6rem 0.8rem;
  border-left: 2px solid var(--brass);
  background: rgba(201, 162, 75, 0.07);
  color: var(--ivory);
}

.pg-tool-note a,
.pg-form-consent a { color: var(--gilt); }

.pg-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin: 1.5rem 0 0;
}

.pg-form-note:empty { display: none; }

.pg-form-note {
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  color: var(--gilt);
}

.pg-form-fallback {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(201, 162, 75, 0.2);
}

.pg-form-fallback p { font-size: 0.85rem; color: var(--stone); margin: 0 0 0.75rem; }
.pg-form-fallback a { color: var(--gilt); }

.pg-form-fallback textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ivory);
  background: var(--field);
  border: 1px solid rgba(201, 162, 75, 0.26);
  border-radius: 3px;
  margin: 0 0 0.75rem;
}

.pg-form-fallback .pg-cta-alt {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--brass);
  border-radius: 2px;
  background: none;
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 620px) {
  .pg-tool-grid,
  .pg-form-grid { grid-template-columns: 1fr; }
  .pg-tool-figures { grid-template-columns: 1fr; }
  .pg-tool-table { font-size: 0.82rem; }
  .pg-tool-table th,
  .pg-tool-table td { padding: 0.5rem 0.4rem; }
}

/* ---------------------------------------------------------------------------
   Collapsed section nav below 900px. pg-nav.js adds .is-collapsible, so
   without script the list stays open and everything below is inert.
   ------------------------------------------------------------------------ */
.pg-nav-toggle { display: none; }

@media (max-width: 900px) {
  .pg-nav.is-collapsible .pg-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 2.9rem;
    padding: 0.65rem 0.9rem;
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    color: var(--ivory);
    background: var(--surface);
    border: 1px solid var(--card-line);
    border-radius: 3px;
    cursor: pointer;
  }

  .pg-nav.is-collapsible .pg-nav-toggle-mark {
    width: 0.55rem;
    height: 0.55rem;
    border-right: 1.5px solid var(--gilt);
    border-bottom: 1.5px solid var(--gilt);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.18s ease;
  }

  .pg-nav.is-collapsible.is-open .pg-nav-toggle-mark {
    transform: rotate(225deg) translate(-2px, -2px);
  }

  .pg-nav.is-collapsible ul { display: none; }
  .pg-nav.is-collapsible.is-open ul { display: grid; margin-top: 0.9rem; }

  /* With the list collapsed the divider under it reads as a stray rule. */
  .pg-nav.is-collapsible:not(.is-open) {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

/* Expertise tiles now lead somewhere, so they need link affordances without
   changing the tile geometry the row was built around. */
.expertise-link {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  color: inherit;
  text-decoration: none;
  /* The tile is the target, so fill the li rather than hugging the text. */
  width: 100%;
}

.expertise-link h3 { transition: color 0.18s ease; }
.expertise-link .expertise-icon { transition: color 0.18s ease; }
.expertise-link:hover h3,
.expertise-link:focus-visible h3 { color: var(--brass-deep); }
.expertise-link:hover .expertise-icon,
.expertise-link:focus-visible .expertise-icon { color: var(--brass-deep); }

.expertise-link:focus-visible {
  outline: 2px solid var(--brass-deep);
  outline-offset: 6px;
  border-radius: 3px;
}

/* ---------------------------------------------------------------------------
   Tools band. The calculators are the most useful thing on the site for
   someone still deciding, so they get a card each rather than a buried link.
   ------------------------------------------------------------------------ */
.tools-intro {
  margin: 1.1rem 0 0;
  max-width: 44rem;
}

.tools-grid {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.tool-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.6rem 1.5rem 1.75rem;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 3px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.tool-card:hover { border-color: var(--brass); transform: translateY(-2px); }

.tool-card-icon { color: var(--brass); display: block; }
.tool-card-icon svg {
  width: 30px;
  height: 30px;
  display: block;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.12rem;
  margin: 0;
}

.tool-card h3 a,
.tool-card-trigger {
  color: var(--gilt);
  text-decoration: none;
}

/* The instant valuation opens a dialog rather than navigating, so it has to be
   a button. Strip the button chrome so it reads as the sibling links do. */
.tool-card-trigger {
  font: inherit;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}

.tool-card h3 a::after,
.tool-card-trigger::after {
  /* Stretch the target over the whole card, so the card is the click area. */
  content: "";
  position: absolute;
  inset: 0;
}

.tool-card { position: relative; }

.tool-card h3 a:hover,
.tool-card-trigger:hover { text-decoration: underline; }

.tool-card h3 a:focus-visible,
.tool-card-trigger:focus-visible {
  outline: 2px solid var(--gilt);
  outline-offset: 4px;
}

.tool-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--stone);
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .tool-card { transition: border-color 0.18s ease; }
  .tool-card:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Calculator buttons inside the search card. Same padding as the form above
   them, separated by a hairline so the card still reads as one object.
   ------------------------------------------------------------------------ */
.search-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid rgba(201, 162, 75, 0.18);
  margin-top: 0.25rem;
  padding-top: 1rem;
}

.search-tools-label {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  opacity: 0.75;
}

.search-tools ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.search-tool-btn {
  display: inline-flex;
  align-items: center;
  /* 44px keeps these comfortably above the minimum touch target. */
  min-height: 2.75rem;
  padding: 0.6rem 1.15rem;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sable);
  background: var(--brass);
  border: 1px solid var(--brass);
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.search-tool-btn:hover,
.search-tool-btn:focus-visible {
  background: var(--gilt);
  border-color: var(--gilt);
}

.search-tool-btn:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .search-tools { padding: 1rem 1rem 1rem; gap: 0.6rem; }
  .search-tools ul { width: 100%; }
  /* Two per row rather than a single scrolling line of four. */
  .search-tools li { flex: 1 1 calc(50% - 0.3rem); }
  .search-tool-btn {
    width: 100%;
    /* Full height too, or a button that wraps to two lines leaves its
       neighbour short and the row reads ragged. */
    height: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    letter-spacing: 0.08em;
    padding: 0.6rem 0.6rem;
  }
}

/* ---------------------------------------------------------------------------
   Content tables inside an article, e.g. the landlord fee schedule. Wrapped so
   a wide table scrolls inside its own box rather than pushing the page sideways.
   ------------------------------------------------------------------------ */
.pg-table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0 1.75rem;
  border: 1px solid var(--card-line);
  border-radius: 3px;
  background: var(--surface);
}

.pg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.pg-table th,
.pg-table td {
  text-align: left;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(201, 162, 75, 0.16);
  color: var(--ivory);
  vertical-align: top;
}

.pg-table thead th {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gilt);
  background: rgba(201, 162, 75, 0.06);
  white-space: nowrap;
}

.pg-table tbody tr:last-child td { border-bottom: 0; }

/* The value column is the one people are scanning for, so let it carry weight
   and keep it on one line where it fits. */
.pg-table td:last-child {
  color: var(--gilt);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .pg-table { font-size: 0.85rem; }
  .pg-table th,
  .pg-table td { padding: 0.65rem 0.7rem; }
  .pg-table td:last-child { white-space: normal; }
}

/* A table with no header row is a key/value list, so the first column reads as
   the label and the second carries the value. */
.pg-table-plain td:first-child {
  color: var(--stone);
  white-space: nowrap;
  width: 1%;
  padding-right: 2rem;
}

.pg-table-plain td:last-child { color: var(--ivory); white-space: normal; }

@media (max-width: 620px) {
  .pg-table-plain td:first-child { white-space: normal; padding-right: 1rem; }
}

.blog-index-hero {
  margin: 2rem 0 0;
  border: 1px solid var(--card-line);
  border-radius: 3px;
  overflow: hidden;
  line-height: 0;
}

.blog-index-hero img { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------------------
   Site assistant. A launcher bottom right and a panel above it. Deliberately
   understated: this is a quiet utility, not a pop-up that demands attention.
   Nothing appears until the script has mounted, so no-script visitors see
   nothing rather than a dead button.
   ------------------------------------------------------------------------ */
.chat-launcher {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.9rem;
  padding: 0.7rem 1.15rem;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sable);
  background: var(--brass);
  border: 1px solid var(--brass);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: background 0.18s ease;
}

.chat-launcher:hover { background: var(--gilt); border-color: var(--gilt); }
.chat-launcher:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
.chat-launcher.is-open svg { transform: rotate(8deg); }

.chat-panel {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + 3.6rem);
  z-index: 61;
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(32rem, calc(100vh - 8rem));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: 5px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.chat-panel[hidden] { display: none; }

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(201, 162, 75, 0.2);
}

.chat-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ivory);
}

.chat-close {
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  min-width: 2.2rem;
  min-height: 2.2rem;
  color: var(--stone);
  background: none;
  border: 0;
  cursor: pointer;
}

.chat-close:hover { color: var(--gilt); }

.chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem;
  display: grid;
  gap: 0.8rem;
  align-content: start;
}

.chat-msg { max-width: 100%; }
.chat-msg p { margin: 0; font-size: 0.9rem; line-height: 1.6; }

.chat-msg-bot p {
  color: var(--ivory);
  background: var(--card-dark);
  border: 1px solid rgba(201, 162, 75, 0.16);
  border-radius: 3px;
  padding: 0.65rem 0.8rem;
}

.chat-msg-you {
  justify-self: end;
  max-width: 85%;
}

.chat-msg-you p {
  color: var(--sable);
  background: var(--brass);
  border-radius: 3px;
  padding: 0.65rem 0.8rem;
}

.chat-msg.is-thinking p { color: var(--stone); font-style: italic; }

.chat-sources {
  margin-top: 0.4rem !important;
  font-size: 0.78rem !important;
  color: var(--stone);
}

.chat-sources a { color: var(--gilt); }

.chat-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.chat-chip {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.45rem 0.7rem;
  min-height: 2.2rem;
  color: var(--gilt);
  background: none;
  border: 1px solid rgba(201, 162, 75, 0.35);
  border-radius: 999px;
  cursor: pointer;
  text-align: left;
}

.chat-chip:hover { border-color: var(--brass); color: var(--ivory); }

.chat-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  border-top: 1px solid rgba(201, 162, 75, 0.2);
}

.chat-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.6rem;
  padding: 0.5rem 0.7rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ivory);
  background: var(--field);
  border: 1px solid rgba(201, 162, 75, 0.26);
  border-radius: 3px;
}

.chat-input:focus-visible { outline: 2px solid var(--gilt); outline-offset: 1px; }

.chat-send {
  font: inherit;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 2.6rem;
  padding: 0 0.95rem;
  color: var(--sable);
  background: var(--brass);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.chat-send:hover:not(:disabled) { background: var(--gilt); }
.chat-send:disabled { opacity: 0.5; cursor: default; }

.chat-foot {
  margin: 0;
  padding: 0 1rem 0.9rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--stone);
}

.chat-foot a { color: var(--gilt); }

@media (max-width: 620px) {
  .chat-launcher span { display: none; }
  .chat-launcher { padding: 0.8rem; border-radius: 50%; }
  .chat-panel {
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    bottom: 4.6rem;
    max-height: min(28rem, calc(100vh - 7rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-launcher { transition: none; }
}