/* Monique Field Property: the "What's your property worth?" landing page.
   A page of its own for appraisal campaigns. It shares the fonts, logo and
   photos with the main site but none of its styles, so either can change
   without moving the other. */

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --night: #14211b;
  --green: #344c3d;
  --green-2: #2a3f32;
  --sage: #738a6e;
  --pale: #bfcfbb;
  --bone: #f0f0ec;
  --cream: #f5f4ef;
  --paper: #fbfaf7;
  --ink: #1d2722;
  --muted: #56625b;
  --line: rgba(29, 39, 34, .13);
  --gold: #c89a2c;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(18px, 4vw, 56px);
}

/* [hidden] is a weak user-agent rule; a class that sets display beats it. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--green); color: #fff; padding: 10px 14px; border-radius: 4px; }
.skip:focus { top: 12px; }
.kicker { font-size: 14px; font-weight: 600; color: var(--sage); margin-bottom: 14px; }
.ico { fill: currentColor; flex: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border: 0; border-radius: 4px; cursor: pointer;
  font: 500 15.5px var(--sans); text-decoration: none; transition: background-color .15s ease, border-color .15s ease;
}
.btn-quiet { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); min-height: 40px; padding: 0 16px; font-size: 14.5px; }
.btn-quiet:hover { box-shadow: inset 0 0 0 1px var(--sage); }

/* Header */
.top { border-bottom: 1px solid var(--line); background: var(--cream); }
.top-bar { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.logo img { height: 46px; width: auto; }
.top-phone { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 500; font-size: 15px; }
.top-phone:hover { color: var(--green); }

/* Hero: the pitch on the left, the questionnaire on the right */
.hero { padding: clamp(36px, 5vw, 64px) 0 clamp(48px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: 1fr minmax(0, 470px); gap: clamp(32px, 5vw, 72px); align-items: start; }
.hero h1 { font-size: clamp(36px, 4.4vw, 56px); letter-spacing: -.01em; color: var(--ink); max-width: 15ch; }
.lede { font-size: clamp(16.5px, 1.3vw, 18px); color: var(--muted); max-width: 470px; margin: 20px 0 16px; }
.ticks { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14.5px; }
.ticks li { display: inline-flex; align-items: center; gap: 7px; }
.ticks > li > svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--pale); fill: none; stroke: var(--green); stroke-width: 2.2; }
.tick-google { gap: 8px !important; }
.tick-google .stars svg { width: 13px; height: 13px; }
/* Google's own four colours, letter by letter. */
.google-word { font-weight: 600; letter-spacing: -.01em; }
.google-word span:nth-child(1), .google-word span:nth-child(4) { color: #4285f4; }
.google-word span:nth-child(2), .google-word span:nth-child(6) { color: #ea4335; }
.google-word span:nth-child(3) { color: #fbbc05; }
.google-word span:nth-child(5) { color: #34a853; }
.hero-photo { position: relative; margin: 0; border-radius: 8px; overflow: hidden; max-width: 560px; }
.hero-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hero-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; font-size: 14px; color: #fff;
  background: linear-gradient(to top, rgba(20,33,27,.75), rgba(20,33,27,0));
}

/* The questionnaire card */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 26px 26px 20px;
  box-shadow: 0 24px 60px -28px rgba(29,39,34,.28); scroll-margin-top: 16px;
}
.card:focus { outline: none; }
.card-head { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.progress { height: 3px; background: var(--bone); border-radius: 3px; margin: 12px 0 24px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 16.6%; background: var(--green); border-radius: 3px; transition: width .35s ease; }
@media (prefers-reduced-motion: reduce) { .progress span { transition: none; } }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; float: left; width: 100%; }
legend + * { clear: both; }
.step-title { font-size: clamp(24px, 2.2vw, 28px); color: var(--ink); }
.step-title:focus { outline: none; }
.step-help { color: var(--muted); font-size: 15px; margin: 8px 0 18px; }

.choices { display: grid; gap: 10px; }
.choice {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 44px 14px 14px;
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.choice:hover { border-color: var(--sage); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border: 1.5px solid rgba(29,39,34,.35); border-radius: 50%; background: #fff;
}
.choice:has(input:checked) { border-color: var(--green); background: #f6f8f4; box-shadow: inset 0 0 0 1px var(--green); }
.choice:has(input:checked)::after { border: 5px solid var(--green); }
.choice:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.choice-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--bone); }
.choice-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.choice-text { display: flex; flex-direction: column; gap: 2px; }
.choice-text strong { font-weight: 600; font-size: 15.5px; }
.choice-text span { font-size: 14px; color: var(--muted); }
.choices.compact .choice { padding-top: 13px; padding-bottom: 13px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 14.5px; font-weight: 500; margin-bottom: 6px; }
.optional { color: var(--muted); font-weight: 400; }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid rgba(29,39,34,.25); border-radius: 6px;
  font: 400 16px var(--sans); color: var(--ink); background: #fff;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.field input[aria-invalid="true"] { border-color: #b4472f; }

.group { margin-bottom: 18px; }
.group-label { font-size: 14.5px; font-weight: 500; margin-bottom: 8px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px;
  border: 1px solid rgba(29,39,34,.22); border-radius: 999px; font-size: 14.5px; transition: border-color .15s ease, background-color .15s ease;
}
.pills.tight .pill span { min-width: 46px; padding: 0 10px; }
.pill:hover span { border-color: var(--sage); }
.pill input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.pill input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.rooms { display: grid; grid-template-columns: auto auto; gap: 0 26px; justify-content: start; }
.rooms .group:first-child { grid-column: 1 / -1; }
.wrap-pills { margin-bottom: 18px; }
.pill-none input:checked + span { background: var(--ink); border-color: var(--ink); }
.after-choices { margin-top: 20px; margin-bottom: 0; }
.step .group:last-child, .step .field:last-child { margin-bottom: 0; }

.form-error { margin: 4px 0 0; padding: 10px 12px; border-radius: 6px; background: #fbeeea; color: #8a2f1c; font-size: 14.5px; }
.card-actions { display: flex; gap: 10px; margin-top: 20px; }
.btn-go { flex: 1; background: var(--green); color: #fff; min-height: 50px; font-size: 16px; }
.btn-go:hover { background: var(--green-2); }
.btn-go[disabled] { opacity: .65; cursor: wait; }
.btn-back { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); min-height: 50px; }
.btn-back:hover { box-shadow: inset 0 0 0 1px var(--sage); }
.card-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center; flex-wrap: wrap; }
.card-note svg { fill: none; stroke: currentColor; stroke-width: 2; }
.card-note a { color: var(--ink); text-underline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.done { padding: 18px 4px 10px; text-align: center; }
.done:focus { outline: none; }
.done-mark { margin: 0 auto 16px; fill: none; stroke: var(--green); stroke-width: 2; }
.done-mark circle { fill: #eef3ec; stroke: none; }
.done h2 { font-size: 30px; margin-bottom: 10px; }
.done p { color: var(--muted); }
.done-call { margin-top: 18px !important; padding-top: 16px; border-top: 1px solid var(--line); }
.done-call a { color: var(--green); font-weight: 600; }

/* Reviews */
.voices { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(52px, 6vw, 80px) 0; }
.voices-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.voices h2, .faq h2 { font-size: clamp(30px, 3vw, 40px); }
.score { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.score-text { display: flex; flex-direction: column; line-height: 1.35; }
.score-text strong { font-weight: 600; }
.score-text span { font-size: 13.5px; color: var(--muted); }
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars svg { width: 15px; height: 15px; fill: currentColor; }
.stars.small { font-size: 14px; letter-spacing: 2px; }
.sources { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 22px 0 28px; font-size: 14px; }
.sources a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--muted); }
.sources a:hover { color: var(--ink); }
.rma { font-weight: 700; color: #fff; background: var(--night); padding: 3px 8px; border-radius: 3px; font-size: 12.5px; letter-spacing: -.01em; }
.sources-rule { width: 1px; height: 22px; background: var(--line); }
.g-mark { flex: none; }

.quotes {
  list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 36px) / 3); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.quotes::-webkit-scrollbar { display: none; }
.quotes > li { scroll-snap-align: start; }
.quotes figure { margin: 0; height: 100%; min-height: 200px; display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 18px; background: var(--cream); border: 1px solid var(--line); border-radius: 8px; }
.quotes blockquote { margin: 0; font-family: var(--serif); font-size: clamp(18px, 1.5vw, 20px); line-height: 1.4; color: var(--ink); }
.quotes figcaption { margin-top: auto; font-size: 13px; color: var(--muted); }
.quotes-nav { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.q-pause { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 6px 0; font: 500 14px var(--sans); color: var(--ink); cursor: pointer; }
.q-pause-ico { width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.q-pause[aria-pressed="true"] .q-pause-ico { width: 0; height: 0; border: 0; border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.dots { display: flex; gap: 6px; margin: 0 auto; }
.dots span { width: 6px; height: 6px; border-radius: 3px; background: rgba(29,39,34,.2); transition: width .2s ease, background-color .2s ease; }
.dots span.on { width: 18px; background: var(--green); }
.arrows { display: flex; gap: 8px; margin-left: auto; }
.arrow { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid rgba(29,39,34,.25); cursor: pointer; color: var(--ink); }
.arrow svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
.arrow:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.arrow:disabled { opacity: .35; cursor: default; }

/* Questions */
.faq { padding: clamp(56px, 7vw, 96px) 0; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq h2 { max-width: 12ch; }
.faq-call { margin-top: 20px; font-size: 15px; color: var(--muted); }
.faq-call a { color: var(--green); font-weight: 500; text-underline-offset: 4px; }
.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; position: relative; padding: 20px 40px 20px 0; font-size: 16.5px; font-weight: 500; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 15px; font-size: 22px; font-weight: 300; color: var(--sage); }
details[open] summary::after { content: "−"; }
details p { padding: 0 40px 22px 0; color: var(--muted); max-width: 640px; }

/* Footer */
.foot { background: var(--bone); padding: 40px 0 28px; font-size: 14.5px; color: var(--muted); }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.foot-top p { margin: 0; color: var(--ink); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; padding: 36px 0; }
.foot-brand .logo img { height: 44px; margin-bottom: 14px; }
.foot-brand p { max-width: 300px; }
.socials { display: flex; gap: 8px; margin-top: 16px; }
.socials a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; text-decoration: none; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.socials a:hover { border-color: var(--sage); }
.foot h2 { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.foot nav a { display: block; padding: 3px 0; text-decoration: none; }
.foot nav a:hover, .foot address a:hover { color: var(--ink); }
.foot address { font-style: normal; line-height: 1.8; }
.foot address a { text-decoration: none; }
.foot-legal { display: flex; gap: 12px 28px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; }
.foot-legal a { margin-left: auto; text-decoration: none; }

/* Tablet */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  /* On a narrow screen the question leads: the pitch on a band of the
     agency's green, the questionnaire lifted over its edge, the photo after. */
  .hero { padding-top: 0; }
  .hero-copy { display: contents; }
  .pitch {
    order: -2; margin: 0 calc(-1 * var(--gutter)); padding: 40px var(--gutter) 76px;
    background: var(--green); color: var(--cream);
  }
  .pitch .kicker { color: var(--pale); }
  .pitch h1 { color: #fff; max-width: 16ch; font-size: clamp(38px, 7vw, 52px); line-height: 1.06; }
  .pitch .lede { color: #dfe6dc; }
  .pitch .ticks li { color: #fff; }
  .pitch .ticks > li > svg { background: rgba(255,255,255,.18); stroke: #fff; }
  .pitch .tick-google .stars { color: #f1c24b; }
  .pitch .google-word { background: #fff; padding: 1px 7px 2px; border-radius: 4px; }
  .card { order: -1; margin-top: -48px; position: relative; }
  .hero-photo { order: 0; max-width: none; margin-top: 28px; }
  .quotes { grid-auto-columns: calc((100% - 18px) / 2); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* Phone */
@media (max-width: 640px) {
  .top-bar { min-height: 64px; gap: 14px; }
  .logo img { height: 38px; }
  .top .btn-quiet { display: none; }
  .pitch { padding-top: 32px; padding-bottom: 70px; }
  .pitch h1 { font-size: 38px; }
  .card { margin-top: -44px; }
  .lede { margin-top: 14px; }
  .ticks { margin-bottom: 4px; }
  .card { padding: 20px 16px 16px; border-radius: 8px; }
  .choice { padding-right: 40px; }
  .rooms { grid-template-columns: 1fr; }
  .quotes { grid-auto-columns: 86%; }
  .faq-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 24px; }
  .foot-legal a { margin-left: 0; }
}