:root {
  --ink: #071d2b;
  --ink-2: #12364c;
  --blue: #0f52ba;
  --blue-2: #2f73cf;
  --sky: #d6e6f3;
  --mist: #eef6fb;
  --paper: #ffffff;
  --accent: #ef8f3c;
  --ivory: var(--mist);
  --petrol: var(--blue);
  --petrol-2: var(--ink);
  --muted: #526b7a;
  --burgundy: var(--blue-2);
  --sage: var(--sky);
  --line: #b9d1e2;
  --shadow: 0 20px 60px rgba(7, 29, 43, .12);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Avenir Next", "Montserrat", "Trebuchet MS", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  font-synthesis: none;
}

h1,
h2,
h3,
h4,
.hero h1,
.page-hero h1,
.valuation-card h2,
.section-head h2,
.metric strong,
.card h3,
.photo-card .caption strong,
.guide h3,
.listing-card h3,
.content h2,
.property-summary h1,
.footer h4 {
  font-family: "Avenir Next", "Montserrat", "Trebuchet MS", Arial, sans-serif !important;
}

.topline {
  background: var(--ink);
  color: #dfeef7;
}

.header {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: rgba(15, 82, 186, .14);
}

.brand {
  min-width: 0;
}

.brand-logo {
  display: block;
  width: 236px;
  height: auto;
  max-height: 58px;
  object-fit: contain;
  object-position: left center;
}

.navlinks a:not(.button):hover,
.content a:not(.button),
.guide a,
.listing-location,
.guide .tag,
.eyebrow {
  color: var(--blue);
}

.button {
  background: var(--blue);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(15, 82, 186, .22);
}

.button:hover {
  background: #0c4399;
  box-shadow: 0 15px 34px rgba(15, 82, 186, .28);
}

.button.petrol {
  background: var(--blue);
}

.button.light {
  color: var(--ink);
  border-color: var(--line);
  background: var(--paper);
}

.button.white {
  color: var(--blue);
}

.menu {
  background: var(--blue);
}

.hero {
  background: linear-gradient(135deg, var(--mist), #fff 58%);
}

.hero::before {
  border-color: rgba(214, 230, 243, .78);
}

.hero h1,
.page-hero h1,
.section-head h2,
.card h3,
.guide h3,
.listing-card h3,
.content h2,
.property-summary h1 {
  color: var(--ink);
}

.hero h1 span {
  color: var(--blue);
}

.hero .lead,
.section-head p,
.content p,
.content li {
  color: var(--ink-2);
}

.trust-row span,
.valuation-card,
.card,
.guide,
.listing-card,
.property-summary,
.calculator,
.faq details,
.profile-links a {
  border-color: var(--line);
}

.valuation-card::before {
  background: linear-gradient(90deg, var(--blue), var(--blue-2));
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(15, 82, 186, .12);
}

.section.petrol {
  background: var(--ink);
}

.section.sage {
  background: var(--sky);
}

.page-hero {
  background: linear-gradient(135deg, var(--sky), #f8fcff);
  border-bottom: 1px solid var(--line);
}

.photo-card .caption,
.badge {
  background: rgba(7, 29, 43, .92);
}

.city-feature {
  background: linear-gradient(140deg, var(--sky), #f8fbfd);
}

.city-feature-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 58px;
  align-items: center;
}

.city-photo {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 82, 186, .14);
  border-radius: 36px 36px 10px 36px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.city-photo img {
  width: 100%;
  height: 430px;
  object-fit: cover;
}

.city-photo figcaption {
  padding: 9px 14px 11px;
  color: #5a7280;
  background: var(--paper);
  font-size: 11px;
  line-height: 1.45;
}

.city-photo figcaption a {
  color: var(--blue);
  text-decoration: underline;
}

.city-copy {
  margin-bottom: 0;
}

.city-copy .button {
  margin-top: 24px;
}

.callout {
  border-left-color: var(--blue);
}

.footer {
  background: var(--ink);
  color: #afc5d1;
}

.footer .brand-logo {
  width: 248px;
  filter: brightness(0) invert(1);
}

.footer h4 {
  color: #7fc1ff;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer a,
.footer p {
  font-size: 14px;
}

.footer-bottom {
  color: #9fb7c4;
}

@media (max-width: 980px) {
  .city-feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .brand-logo {
    width: 184px;
    max-height: 48px;
  }

  .city-photo img {
    height: 300px;
  }
}