/* ==========================================================================
   Buyers Eye
   Independent presale property review
   ==========================================================================

   ONE stylesheet for the whole site. Both pages use it.

   Brand rules enforced here, do not loosen them without checking the brand
   handoff first:
     - Light paper ground, flat mark.
     - No gradients, gloss, metallic effects or simulated finishes.
     - No border radius anywhere. Hard edges only.
     - No drop shadows on interface elements. The single offset block behind
       the report card is a printed page metaphor, not a UI shadow.
     - Automatic hyphenation is switched off site wide so no hyphen can ever
       appear in visible copy.

   Sections below, in order:
     1.  Tokens
     2.  Reset and base
     3.  Typography
     4.  Header and navigation
     5.  Buttons
     6.  Layout and section frames
     7.  Hero
     8.  Report card
     9.  Argument
     10. Stakes (ink panel)
     11. The review and fee
     12. Report columns
     13. Evidence (held)
     14. Independence (mineral panel)
     15. Plain answers
     16. Coverage
     17. Agent page blocks
     18. Enquiry form
     19. Footer
     20. Responsive
   ========================================================================== */


/* 1. Tokens ================================================================ */

:root {
  /* Approved palette. Do not substitute. */
  --paper:         #f4f1ea;
  --white:         #fbfaf6;
  --ink:           #14110f;
  --mineral:       #5c6f73;
  --mineral-deep:  #33464a;
  --mineral-light: #93a3a6;
  --stone:         #b5b8b2;
  --slate:         #33464a;

  /* Derived neutrals, all biased toward mineral so nothing reads as a
     default grey. */
  --rule:          rgba(51, 70, 74, 0.26);
  --rule-soft:     rgba(51, 70, 74, 0.14);
  --rule-light:    rgba(244, 241, 234, 0.24);
  --paper-dim:     rgba(244, 241, 234, 0.68);
  --field:         #ffffff;

  --sans:  'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* Page gutter. Every full width section uses this so the vertical rhythm
     of the left edge never breaks. */
  --gutter: 8vw;
  --gutter-max: 132px;
}


/* 2. Reset and base ======================================================== */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Sticky header is 80px, two rows under 860px. Without this every in page
     link lands with its heading hidden behind the header. */
  scroll-padding-top: 100px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  hyphens: none;
  -webkit-hyphens: none;
}

/* Belt and braces. No element may hyphenate. */
h1, h2, h3, h4, p, li, td, th, a, span, strong, em, label, button, input,
textarea, select {
  hyphens: none;
  -webkit-hyphens: none;
}

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

img, svg { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--mineral-deep);
  outline-offset: 3px;
}
/* The same ring is invisible on the ink panels, so brighten it there. */
.on-ink :focus-visible,
.on-mineral :focus-visible {
  outline-color: var(--mineral-light);
}

::selection { background: var(--mineral-deep); color: var(--paper); }

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

/* Skip link, keyboard only. */
.skip {
  position: absolute;
  top: -100px; left: 8px;
  z-index: 50;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skip:focus { top: 8px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* 3. Typography ============================================================ */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: clamp(44px, 6.1vw, 94px);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

h2 {
  font-size: clamp(34px, 4.7vw, 68px);
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Eyebrow. The rule beneath it is the one repeating structural device on the
   site, it marks the start of a section and nothing else. */
.eyebrow {
  margin: 0 0 26px;
  color: var(--mineral-deep);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.eyebrow::after {
  content: '';
  display: block;
  width: 30px; height: 1px;
  margin-top: 16px;
  background: currentColor;
}
.eyebrow.on-dark { color: var(--mineral-light); }
.eyebrow.on-mineral { color: var(--paper); }

/* Serif is reserved for the two places the site slows down: the sentence
   that acknowledges the reader, and the printed report. */
.serif-lede {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 1.85vw, 28px);
  line-height: 1.48;
  letter-spacing: -0.008em;
}

.lede {
  color: var(--slate);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.7;
}

.measure { max-width: 34em; }


/* 4. Header and navigation ================================================= */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: 'brand nav cta';
  align-items: center;
  gap: 24px;
  height: 80px;
  padding: 0 clamp(20px, 5vw, 64px);
  background: #33464A;
  border-bottom: none;
}

/* Lockup: the interlocked BE mark, then the wordmark.
   The wordmark is set in markup rather than imported as artwork, so it stays
   crisp at any size and matches the rest of the site's typography exactly.
   BE mark, BUYERS, mineral rule, EYE. */
.site-header .brand { grid-area: brand; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Sized to sit a little above the cap height of the wordmark, with its own
   gap so the mark reads as a separate element rather than a letter. */
.brand-mark {
  width: 26px;
  height: 26px;
  margin-right: 6px;
  flex: none;
}
.brand i {
  display: block;
  width: 2px; height: 20px;
  background: var(--mineral-deep);
}
.brand.on-dark { color: var(--paper); }
.brand.on-dark i { background: var(--mineral-light); }

.site-nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
}
.site-nav a {
  color: var(--slate);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current='page'] {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--mineral-deep);
}

.header-cta {
  grid-area: cta;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border: 1px solid var(--paper);
  color: var(--paper);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.header-cta:hover { background: var(--paper); color: var(--mineral-deep); }


/* 5. Buttons =============================================================== */

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.button-primary {
  padding: 17px 22px;
  background: var(--ink);
  color: var(--paper);
}
.button-primary:hover { background: var(--mineral-deep); }

.button-invert {
  padding: 17px 22px;
  background: var(--paper);
  color: var(--ink);
}
.button-invert:hover { background: var(--white); }

.button-text {
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  color: var(--mineral-deep);
  background: none;
}
.button-text:hover { color: var(--ink); }
.button-text.on-dark { color: var(--mineral-light); }
.button-text.on-dark:hover { color: var(--paper); }

/* Small arrow glyph, drawn rather than loaded. */
.arrow {
  display: inline-block;
  width: 0.62em; height: 0.62em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(0.06em);
}


/* 6. Layout and section frames ============================================= */

.section {
  padding: clamp(80px, 9.5vw, 150px) min(var(--gutter), var(--gutter-max));
}

.section-tight {
  padding: clamp(64px, 7vw, 108px) min(var(--gutter), var(--gutter-max));
}

.on-white  { background: var(--white); border-top: 1px solid var(--rule-soft); }
.on-ink    { background: var(--ink);   color: var(--paper); }
.on-mineral{ background: var(--mineral-deep); color: var(--paper); }

.on-ink h2, .on-mineral h2 { color: var(--paper); }

/* Two column editorial split, heading left, argument right. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 120px);
}
.split-narrow-first { grid-template-columns: 0.34fr 1.66fr; }
.split-wide-first   { grid-template-columns: 1.2fr 0.8fr; }


/* 7. Hero ================================================================== */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(360px, 0.86fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
  padding: clamp(64px, 8vw, 128px) min(var(--gutter), var(--gutter-max));
}

.hero-copy { max-width: 800px; }
.hero h1 { max-width: 15ch; }
.hero .serif-lede { max-width: 26em; margin-top: 36px; }
.hero .lede { max-width: 32em; margin: 22px 0 0; }

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 38px;
  flex-wrap: wrap;
}


/* Single column hero, used on the agent page where there is no report card. */
.hero-solo {
  padding: clamp(60px, 8vw, 124px) min(var(--gutter), var(--gutter-max));
}
.hero-solo h1 { max-width: 19ch; }
.hero-solo .serif-lede { max-width: 30em; margin-top: 34px; }
.hero-solo .lede { max-width: 34em; margin: 22px 0 0; }


/* 8. Report card =========================================================== */

/* A flat sheet of paper on the page. The offset block behind it is solid,
   not a blur, so it stays inside the no simulated finishes rule. */
.report {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 520px;
  padding: clamp(26px, 3.4vw, 48px);
  background: var(--white);
  border: 1px solid var(--stone);
}
.report::after {
  content: '';
  position: absolute;
  inset: 16px -16px -16px 16px;
  background: rgba(51, 70, 74, 0.13);
  z-index: -1;
}

.report-topline {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--mineral-deep);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.report-title { margin-top: clamp(44px, 6vw, 76px); }
.report-title .kicker {
  margin: 0 0 12px;
  color: var(--slate);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.report-title .mock-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.report-rule {
  height: 3px;
  margin: 32px 0 22px;
  background: var(--mineral-deep);
}

.report-intro {
  margin: 0 0 26px;
  color: var(--slate);
  font-family: var(--serif);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
}

.report-list { display: grid; }
.report-list > div {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--rule-soft);
}
.report-list .ref {
  color: var(--mineral-deep);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}
.report-list .mock-label {
  margin: 2px 0 5px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.report-list .mock-copy {
  margin: 0;
  color: var(--slate);
  font-size: 12.5px;
  line-height: 1.5;
}

.report-footer {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  color: var(--mineral-deep);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.report-footer .tick {
  display: inline-block;
  width: 9px; height: 5px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  flex: none;
}


/* 9. Argument ============================================================== */

.argument-copy p {
  max-width: 30em;
  margin: 0 0 22px;
  color: var(--slate);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.65;
}
.argument-copy .pull {
  max-width: 26em;
  margin: 30px 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(21px, 1.8vw, 27px);
  line-height: 1.42;
  letter-spacing: -0.01em;
}


/* 10. Stakes (ink panel) =================================================== */

.stakes > h2 { max-width: 20ch; }

.stakes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(54px, 6vw, 84px);
  border-top: 1px solid var(--rule-light);
}
.stakes-grid article {
  padding: 28px clamp(20px, 3.2vw, 48px) 0 0;
}
.stakes-grid article + article {
  padding-left: clamp(20px, 3.2vw, 48px);
  border-left: 1px solid var(--rule-light);
}
.stakes-grid .ref {
  color: var(--mineral-light);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}
.stakes-grid h3 {
  max-width: 22ch;
  margin: 40px 0 14px;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.stakes-grid p {
  max-width: 26em;
  margin: 0;
  color: var(--paper-dim);
  font-size: 14.5px;
  line-height: 1.7;
}


/* 11. The review and fee =================================================== */

.review-heading {
  display: grid;
  grid-template-columns: 1fr 0.52fr;
  gap: clamp(40px, 8vw, 110px);
  align-items: end;
}
.review-heading h2 { max-width: 16ch; }

.fee {
  padding: 26px 0 4px;
  border-top: 3px solid var(--mineral-deep);
}
.fee span {
  display: block;
  color: var(--mineral-deep);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.fee strong {
  display: block;
  margin: 8px 0;
  font-family: var(--serif);
  font-size: clamp(42px, 4vw, 56px);
  font-weight: 300;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.fee p { margin: 0; color: var(--slate); font-size: 13.5px; line-height: 1.55; }

/* Numbered rows. The numbers are here because the review genuinely runs in
   this order, walk through, then assessment, then report. */
.steps {
  margin-top: clamp(54px, 6vw, 88px);
  border-top: 1px solid var(--mineral-deep);
}
.steps article {
  display: grid;
  grid-template-columns: 84px minmax(160px, 0.55fr) 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid var(--stone);
}
.steps .ref {
  color: var(--mineral-deep);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}
.steps h3 {
  margin: 3px 0 0;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.steps p {
  max-width: 40em;
  margin: 0;
  color: var(--slate);
  font-size: 15.5px;
  line-height: 1.65;
}

.review-note {
  max-width: 34em;
  margin: 32px 0 0 auto;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
}


/* 12. Report columns ======================================================= */

.columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(48px, 5vw, 76px);
  border-top: 1px solid var(--mineral-deep);
}
.columns article {
  padding: 30px clamp(20px, 2.6vw, 40px) 34px 0;
}
.columns article + article {
  padding-left: clamp(20px, 2.6vw, 40px);
  border-left: 1px solid var(--rule);
}
.columns h3 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 300;
  letter-spacing: -0.015em;
  text-transform: none;
}
.columns p {
  max-width: 24em;
  margin: 0;
  color: var(--slate);
  font-size: 15.5px;
  line-height: 1.68;
}
.columns .verdict {
  display: block;
  margin-bottom: 18px;
  color: var(--mineral-deep);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* 13. Evidence (held) ====================================================== */

.evidence {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  border-top: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
}
.evidence-plate {
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  padding: 32px;
  background: #d9ddda;
  color: var(--mineral-deep);
}
.evidence-plate span {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.evidence-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 7vw, 120px) min(var(--gutter), 110px);
  background: var(--white);
}
.evidence-copy h2 { max-width: 20ch; }
.evidence-copy p {
  max-width: 32em;
  margin: 30px 0 0;
  color: var(--slate);
  font-size: 17px;
  line-height: 1.7;
}


/* 13b. Case study: testimonial, reel, synopsis ============================= */

/* The property photograph, full width above the case. */
.case-photo {
  display: block;
  width: 100%;
  height: clamp(260px, 38vw, 520px);
  object-fit: cover;
  border-top: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
}
.case-photo-credit {
  margin: 12px 0 0;
  color: var(--mineral-deep);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Three tracks. The reel is the fixed centre because it is a 9:16 frame and
   cannot flex; the two text columns take what is left. */
.case {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 430px) 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(44px, 5vw, 72px);
}

.case-reel {
  width: 100%;
  border: 1px solid var(--stone);
  background: var(--white);
  position: relative;
}
/* The reel frame is square, so landscape and portrait photographs both show
   whole. Sized by ratio rather than a fixed pixel height, so it holds its
   shape at any column width and cannot end up squashed into a letterbox.
   The extra height over 1:1 is the strip the reel's own controls sit in. */
.case-reel iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.19;
  border: 0;
}
.case-reel figcaption {
  padding: 12px 14px;
  border-top: 1px solid var(--rule-soft);
  color: var(--mineral-deep);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Testimonial. Serif, because it is the one human voice on the page. */
.case-quote {
  margin: 0;
  padding-top: 6px;
}
.case-quote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.case-quote blockquote p { margin: 0 0 18px; }
.case-quote figcaption {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  color: var(--slate);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Synopsis. Label and value pairs, the driest thing on the page by design. */
.case-facts { padding-top: 6px; }
.case-facts h3 {
  margin: 0 0 20px;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.case-facts dl { margin: 0; border-top: 1px solid var(--rule); }
.case-facts div {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.case-facts dt {
  margin-bottom: 5px;
  color: var(--mineral-deep);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.case-facts dd {
  margin: 0;
  color: var(--slate);
  font-size: 15px;
  line-height: 1.6;
}
.case-facts dd strong { color: var(--ink); font-weight: 600; }

/* The disclosure sits under the whole thing, deliberately plain. */
.case-disclosure {
  max-width: 46em;
  margin: clamp(32px, 4vw, 52px) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--slate);
  font-size: 14.5px;
  line-height: 1.7;
}
.case-disclosure strong { color: var(--ink); font-weight: 600; }

/* Deferred reel.
   A reel is around fifty photographs and a minute of audio, so three of them
   on one page is several megabytes. Only the first loads on arrival. The rest
   show a still frame and load when someone asks for them, which keeps the page
   honest on a phone without hiding anything. */
.case-reel-hold {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  aspect-ratio: 1 / 1.19;
  background: var(--paper);
  cursor: pointer;
  overflow: hidden;
}
.case-reel-hold img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.case-reel-hold span {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 13px 22px;
  background: rgba(20, 17, 15, 0.72);
  color: var(--paper);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(3px);
  border: 1px solid rgba(251, 250, 246, 0.42);
  transition: background 0.18s ease;
}
.case-reel-hold:hover span { background: rgba(20, 17, 15, 0.9); }

/* From the review.
   This is the block that evidences the review rather than the work. It holds
   what the written opinion recommended and, more importantly, what it ruled
   out. A case study without this one shows only that the preparation was done
   well, which is not what the site sells. Two columns so the refusal sits at
   equal weight to the recommendation rather than as a footnote. */
.case-review {
  margin: clamp(36px, 4.5vw, 60px) 0 0;
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 40px);
  background: var(--paper);
  border: 1px solid var(--rule);
}
.on-white .case-review { background: var(--white); }
.case-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 3.5vw, 56px);
  margin-top: 24px;
}
.case-review h3 {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mineral-deep);
}
.case-review p { margin: 0 0 12px; color: var(--slate); font-size: 15.5px; line-height: 1.7; }
.case-review p:last-child { margin-bottom: 0; }
.case-review .ruled h3 { color: var(--ink); }
.case-review blockquote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--ink);
}
@media (max-width: 760px) {
  .case-review-grid { grid-template-columns: 1fr; }
}


/* 14. Independence (mineral panel) ========================================= */

.independence { display: grid; }
.independence h2 { max-width: 22ch; }
.independence-copy p {
  max-width: 38em;
  margin: 26px 0 0;
  color: rgba(244, 241, 234, 0.82);
  font-size: 17px;
  line-height: 1.72;
}
.independence-copy .pull {
  display: block;
  max-width: 24em;
  margin-top: 34px;
  color: var(--paper);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.4;
}


/* 15. Plain answers ======================================================== */

.answers { margin-top: clamp(44px, 5vw, 70px); border-top: 1px solid var(--rule); }
.answers > div {
  display: grid;
  grid-template-columns: minmax(200px, 0.44fr) 1fr;
  gap: clamp(20px, 5vw, 70px);
  padding: 26px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.answers h3 {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.answers p {
  max-width: 38em;
  margin: 0;
  color: var(--slate);
  font-size: 16px;
  line-height: 1.68;
}


/* 16. Coverage ============================================================= */

.coverage {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 26px;
  margin-top: 30px;
}
.coverage span {
  color: var(--slate);
  font-size: 11px;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* 17. Agent page blocks ==================================================== */

/* Strip that sends vendors or agents across to the other page. */
.crossref {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 7vw, 110px);
  align-items: start;
}
.crossref h2 { max-width: 18ch; }
.crossref p {
  max-width: 32em;
  margin: 0 0 32px;
  color: var(--slate);
  font-size: 17px;
  line-height: 1.7;
}
.crossref > div:last-child { padding-top: clamp(8px, 3vw, 46px); }

/* The objection block. Deliberately the plainest thing on the site. */
.undertakings {
  margin-top: clamp(40px, 4.5vw, 64px);
  border-top: 1px solid var(--rule);
}
.undertakings > div {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.undertakings .tick {
  display: inline-block;
  width: 13px; height: 7px;
  margin-top: 9px;
  border-left: 1.5px solid var(--mineral-deep);
  border-bottom: 1.5px solid var(--mineral-deep);
  transform: rotate(-45deg);
  flex: none;
}
.undertakings p {
  max-width: 44em;
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
}
.undertakings strong { font-weight: 600; }


/* 18. Enquiry form ========================================================= */

.enquire {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(44px, 7vw, 110px);
  align-items: start;
}
.enquire h2 { max-width: 14ch; }
.enquire-intro p {
  max-width: 30em;
  margin: 26px 0 0;
  color: var(--paper-dim);
  font-size: 17px;
  line-height: 1.7;
}
.enquire-intro .direct {
  margin-top: 30px;
  color: var(--mineral-light);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.enquire-intro .direct a {
  color: var(--paper);
  box-shadow: inset 0 -1px 0 var(--mineral-light);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 24px;
}
.field { display: flex; flex-direction: column; gap: 9px; }
.field-wide { grid-column: 1 / -1; }

.field label {
  color: var(--stone);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.field .optional { color: var(--mineral-light); letter-spacing: 0.12em; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--stone);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.4;
  appearance: none;
  transition: border-color 0.15s ease;
}
.field textarea { min-height: 116px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--mineral-deep);
  outline: 2px solid var(--mineral-deep);
  outline-offset: 1px;
}
.field select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mineral-deep) 50%),
    linear-gradient(135deg, var(--mineral-deep) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* Both enquiry forms sit on the ink panel. Solid white fields punch holes in
   it, so on that ground the fields are recessed rather than applied. */
.on-ink .field input,
.on-ink .field select,
.on-ink .field textarea {
  background-color: rgba(244, 241, 234, 0.05);
  border-color: rgba(244, 241, 234, 0.5);
  color: var(--paper);
}
.on-ink .field input:hover,
.on-ink .field select:hover,
.on-ink .field textarea:hover {
  border-color: rgba(244, 241, 234, 0.55);
}
.on-ink .field input:focus,
.on-ink .field select:focus,
.on-ink .field textarea:focus {
  background-color: rgba(244, 241, 234, 0.09);
  border-color: var(--paper);
  outline-color: var(--mineral-light);
}
.on-ink .field select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mineral-light) 50%),
    linear-gradient(135deg, var(--mineral-light) 50%, transparent 50%);
}
.on-ink .field select:invalid { color: var(--mineral-light); }
.on-ink .field select option { background: var(--ink); color: var(--paper); }
.on-ink .coverage span { color: var(--mineral-light); }

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 4px;
}
.form-note {
  max-width: 30em;
  margin: 0;
  color: rgba(244, 241, 234, 0.6);
  font-size: 12.5px;
  line-height: 1.6;
}


/* 18b. Thank you page ====================================================== */

/* Netlify shows a generic success page if a form has no action of its own.
   thanks.html exists so a submission never lands off brand. */
.thanks {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 62vh;
  padding: clamp(72px, 10vw, 150px) min(var(--gutter), var(--gutter-max));
}
.thanks h1 { max-width: 14ch; }
.thanks .serif-lede { max-width: 26em; margin-top: 32px; }
.thanks .lede { max-width: 30em; margin: 20px 0 0; }
.thanks .hero-actions { margin-top: 36px; }
.thanks a.inline {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--mineral);
}


/* 19. Footer =============================================================== */

.site-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px 40px;
  padding: 40px clamp(20px, 5vw, 64px);
  background: #33464A;
  border-top: none;
}
.site-footer .lineage {
  justify-self: center;
  margin: 0;
  color: rgba(244,241,234,0.6);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-footer .legal {
  justify-self: end;
  margin: 0;
  color: rgba(244,241,234,0.6);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* 20. Responsive =========================================================== */

@media (max-width: 1060px) {
  .hero { grid-template-columns: 1fr; }
  .report { justify-self: stretch; max-width: 560px; }
  .split, .split-narrow-first, .split-wide-first,
  .review-heading, .evidence, .crossref, .enquire {
    grid-template-columns: 1fr;
  }
  .review-heading { align-items: start; }
  .fee { max-width: 420px; }
  .columns { grid-template-columns: 1fr; }
  .columns article,
  .columns article + article {
    padding: 26px 0 28px;
    border-left: 0;
    border-bottom: 1px solid var(--rule);
  }
  .evidence-plate { min-height: 380px; }
  .answers > div { grid-template-columns: 1fr; gap: 12px; }

  /* Reel first on narrow screens, then the voice, then the facts. */
  .case { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .case-reel { order: -1; justify-self: center; max-width: 430px; }
}

@media (max-width: 860px) {
  .site-header {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'brand cta'
      'nav   nav';
    gap: 0 16px;
    padding-bottom: 0;
  }
  .site-nav {
    margin: 0 clamp(-64px, -5vw, -20px);
    padding: 0 clamp(20px, 5vw, 64px) 14px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }

  .stakes-grid { grid-template-columns: 1fr; }
  .stakes-grid article,
  .stakes-grid article + article {
    padding: 26px 0 32px;
    border-left: 0;
    border-bottom: 1px solid var(--rule-light);
  }
  .steps article { grid-template-columns: 48px 1fr; gap: 14px 18px; }
  .steps p { grid-column: 2; }
  .review-note { margin-left: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .site-footer {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .site-footer .lineage,
  .site-footer .legal { justify-self: start; }
}

@media (max-width: 560px) {
  :root { --gutter: 22px; }
  body { font-size: 16px; }
  .hero { padding-top: 52px; padding-bottom: 64px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 20px; }
  .report { padding: 26px 22px; }
  .report::after { inset: 12px -12px -12px 12px; }
  .evidence-copy { padding-left: 22px; padding-right: 22px; }
  .undertakings > div { grid-template-columns: 22px 1fr; gap: 12px; }
}

@media print {
  .site-header, #enquire, .hero-actions, .skip { display: none; }
  body { background: #ffffff; }
}

/* BuyersEye nav on dark header */
.site-nav a { color: rgba(244,241,234,0.8); }
.site-nav a:hover, .site-nav a[aria-current='page'] { color: #F4F1EA; }

/* Brand logo fills header height */
/* Nav logo */
.brand-logo { display: block; height: 80px; width: auto; }
.site-footer .brand-logo { height: 56px; width: auto; }