/* Reeve — askreeve.co.uk
   ------------------------------------------------------------------
   "The Ledger" — the page is organised like a steward's honest account
   book. Palette + type per the WCAG-verified Strategy 2 spec; heritage
   narrative + tally/ledger motifs per Strategy 1. Green-dominant, not
   cream-dominant, to sit apart from the gig-economy app and the generic
   cream-editorial look. Brass is punctuation and large-on-dark ONLY —
   never body text (it fails contrast on light).
   ------------------------------------------------------------------ */

:root {
  /* ---- Core palette (verified) ---- */
  --cream:       #F7F1E3;  /* page — aged vellum */
  --cream-2:     #FBF7EE;  /* raised cards on cream */
  --ink:         #2B2A26;  /* primary text — 12.76:1 on cream (AAA) */
  --primary:     #2F4A3A;  /* village green — 8.63:1 on cream (AAA) */
  --primary-2:   #3D5A45;  /* lighter green for large accents */
  --dark:        #1F2E26;  /* deep pine — dark section grounds */
  --dark-2:      #26382E;  /* pine gradient partner */
  --accent:      #C9A24B;  /* brass — DECORATIVE + large-on-dark only */
  --accent-text: #8A6B1C;  /* antique brass — safe as gold text on light */
  --muted:       #5C6B5E;  /* muted body on cream — 5.01:1 (AA) */
  --muted-cream: #C9D2C6;  /* muted text on dark grounds */
  --hairline:    #E4D8C1;  /* warm ledger rule */
  --hairline-2:  rgba(247,241,227,.16); /* rule on dark */
  --error:       #B23A2E;

  /* ---- Type ---- */
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --fs-hero:    clamp(2.6rem, 5.5vw, 4rem);
  --fs-h1:      clamp(2rem, 4vw, 2.75rem);
  --fs-h2:      clamp(1.6rem, 3.2vw, 2.15rem);
  --fs-h3:      1.375rem;
  --fs-body:    1.125rem;   /* 18px base — for 60+ legibility */
  --fs-body-lg: 1.25rem;
  --fs-small:   1rem;
  --fs-micro:   0.875rem;

  --lh-tight: 1.12;
  --lh-body:  1.6;
  --ls-caps:  0.14em;

  /* ---- Spacing / shape ---- */
  --page-max: 1140px;
  --content-max: 68ch;
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;
  --shadow-soft: 0 2px 8px rgba(31,46,38,.06), 0 12px 32px rgba(31,46,38,.07);
  --shadow-card: 0 1px 3px rgba(31,46,38,.08);
  --shadow-lift: 0 8px 40px rgba(31,46,38,.14);

  --ease: cubic-bezier(.4,0,.2,1);
  --dur: 240ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; line-height: var(--lh-tight); letter-spacing: -0.01em; margin: 0 0 .5em; }
h1 { font-size: var(--fs-h1); font-optical-sizing: auto; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 1rem; }
a  { color: var(--primary); text-decoration: none; }
a:hover { color: var(--dark); }
img { max-width: 100%; display: block; }
strong { font-weight: 600; }

/* Focus — high-visibility, honoured everywhere */
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; border-radius: 3px; }

.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted);
  margin: 0 0 1.1rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); }
.eyebrow.on-dark { color: var(--accent); }
.eyebrow.on-dark::before { background: var(--accent); opacity: .7; }
.center .eyebrow { justify-content: center; }

.lede { font-size: var(--fs-body-lg); color: var(--muted); max-width: 60ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small);
  min-height: 52px; padding: 14px 28px; border-radius: var(--r-sm);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 60ms var(--ease);
  text-align: center; white-space: nowrap; line-height: 1.1;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: var(--cream); }
.btn-primary:hover { background: var(--dark); color: var(--cream); }
.btn-brass { background: var(--accent); color: var(--dark); }
.btn-brass:hover { background: #d8b25e; color: var(--dark); }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: rgba(47,74,58,.07); color: var(--primary); }
.btn-ghost-cream { background: transparent; color: var(--cream); border-color: rgba(247,241,227,.4); }
.btn-ghost-cream:hover { background: rgba(247,241,227,.1); color: var(--cream); border-color: var(--cream); }

/* ---------- The Reeve Mark ---------- */
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-head); font-size: 1.5rem; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.brand .mark { width: 34px; height: 34px; flex: none; }
.brand.on-dark { color: var(--cream); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247,241,227,.82); backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.site-header .wrap { display: flex; align-items: center; gap: 20px; height: 74px; }
.header-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.header-nav a.navlink { color: var(--muted); font-weight: 500; font-size: var(--fs-small); }
.header-nav a.navlink:hover { color: var(--ink); }
.header-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); font-size: var(--fs-small); }
.header-phone svg { width: 18px; height: 18px; color: var(--primary); }
.header-phone .num { border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
@media (max-width: 860px) { .header-nav .navlink { display: none; } }
@media (max-width: 640px) { .header-phone .label { display: none; } }
@media (max-width: 520px) { .header-phone { display: none; } } /* phone lives in the hero on small screens */

/* ---------- Hero (green-dominant) ---------- */
.hero {
  position: relative; color: var(--cream);
  padding: 0; /* cancel the generic `section` padding — spacing is owned by .hero-grid */
  background:
    radial-gradient(120% 120% at 85% 0%, var(--dark-2) 0%, var(--dark) 55%, #1a271f 100%);
  overflow: hidden;
}
.hero::after { /* faint ledger rules — the account-book grain */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(to bottom, transparent 0 43px, var(--hairline-2) 43px 44px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 85%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 85%, transparent);
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; padding: 74px 0 66px; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; padding: 52px 0 60px; } }
.hero h1 { font-size: var(--fs-hero); color: var(--cream); margin-bottom: .28em; }
.hero .lede { color: var(--muted-cream); font-size: var(--fs-body-lg); margin-bottom: 1.7rem; max-width: 34ch; }

/* Postcode gate — a cream account-card floating on the pine */
.gate { background: var(--cream-2); border-radius: var(--r-md); padding: 22px 22px 20px; box-shadow: var(--shadow-lift); color: var(--ink); }
.gate label { display: block; font-weight: 600; font-size: var(--fs-small); margin-bottom: 9px; color: var(--ink); }
.gate-row { display: flex; gap: 10px; }
@media (max-width: 460px) { .gate-row { flex-direction: column; } }
input[type=text], input[type=tel], input[type=email] {
  flex: 1; width: 100%; font-family: var(--font-body); font-size: var(--fs-small);
  min-height: 52px; padding: 13px 15px; border: 1.5px solid var(--hairline);
  border-radius: var(--r-sm); background: #fff; color: var(--ink);
}
input::placeholder { color: #9a9488; }
input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,74,58,.14); }
.gate .btn { flex: none; }
.gate-note { font-size: var(--fs-micro); color: var(--muted); margin: 11px 0 0; }
.gate-result { margin-top: 15px; display: none; }
.gate-result.show { display: block; }
.gate-result.in  { border-left: 3px solid var(--primary); padding-left: 14px; }
.gate-result.out { border-left: 3px solid var(--accent); padding-left: 14px; }
.field-err { color: var(--error); font-size: var(--fs-micro); margin: 8px 0 0; min-height: 1em; }

/* Phone line under the gate */
.hero-phone { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--cream); font-size: var(--fs-small); }
.hero-phone svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.hero-phone a, .hero-phone .num { color: var(--cream); font-weight: 600; border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
.hero-phone a:hover { color: #fff; }

.reassure { display: inline-flex; align-items: flex-start; gap: 9px; color: var(--muted-cream); font-size: var(--fs-small); margin-top: 22px; max-width: 46ch; }
.reassure svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 2px; }

/* Conversation mock — an errand, not a food order */
.phone { background: linear-gradient(160deg, #23362b, #1a271f); border-radius: 30px; padding: 15px; box-shadow: var(--shadow-lift); width: 100%; max-width: 350px; margin: 0 auto; border: 1px solid rgba(201,162,75,.28); }
.phone-screen { background: #ECE4D3; border-radius: 20px; padding: 16px 15px 18px; }
.phone-top { display: flex; align-items: center; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid rgba(43,42,38,.1); margin-bottom: 15px; }
.phone-top b { font-size: var(--fs-small); color: var(--ink); }
.phone-top span { font-size: var(--fs-micro); color: var(--primary); display: block; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; flex: none; }
.avatar svg { width: 24px; height: 24px; }
.bubble { max-width: 80%; padding: 10px 14px; border-radius: 16px; margin-bottom: 9px; font-size: var(--fs-small); line-height: 1.42; }
.bubble.them { background: #fff; color: var(--ink); border-bottom-left-radius: 5px; }
.bubble.me { background: #D8E9DA; color: #1c3327; margin-left: auto; border-bottom-right-radius: 5px; }
.bubble.me:last-child { font-weight: 600; }

/* ---------- Section rhythm ---------- */
section { padding: 84px 0; }
@media (max-width: 640px) { section { padding: 58px 0; } }
.section-tint { background: var(--cream-2); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.section-dark { background: linear-gradient(160deg, var(--dark-2), var(--dark)); color: var(--cream); }
.section-dark h2 { color: var(--cream); }
.section-dark .lede { color: var(--muted-cream); }
.section-head { max-width: 62ch; }
.section-head.center { margin: 0 auto; }

/* ---------- ◆ THE LEDGER (signature) ---------- */
.ledger { background: var(--cream); }
.ledger-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 900px) { .ledger-grid { grid-template-columns: 1fr; gap: 40px; } }
.ledger-copy h2 { max-width: 15ch; }
.ledger-copy .lede { margin-bottom: 1.3rem; }
.ledger-points { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 14px; }
.ledger-points li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); }
.ledger-points svg { width: 22px; height: 22px; color: var(--primary); flex: none; margin-top: 2px; }
.ledger-fee-note { margin: 1.5rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--hairline); font-size: var(--fs-small); color: var(--muted); }
.ledger-fee-note strong { color: var(--ink); }

/* The receipt — a steward's account slip */
.receipt {
  background: var(--cream-2); border-radius: 6px; padding: 30px 30px 26px;
  box-shadow: var(--shadow-soft); max-width: 400px; margin: 0 auto;
  position: relative; border: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
}
.receipt::before, .receipt::after { /* perforated top & bottom edges */
  content: ""; position: absolute; left: 0; right: 0; height: 10px;
  background:
    radial-gradient(circle at 8px 0, transparent 0 5px, var(--cream-2) 5px) repeat-x;
  background-size: 16px 10px;
}
.receipt::before { top: -9px; transform: scaleY(-1); }
.receipt::after  { bottom: -9px; }
.receipt-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid var(--hairline); padding-bottom: 12px; margin-bottom: 16px; }
.receipt-head .slip { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-micro); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); }
.receipt-head .mark { width: 26px; height: 26px; }
.receipt-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 11px 0; color: var(--muted); font-size: var(--fs-small); }
.receipt-row .lbl { display: flex; flex-direction: column; gap: 2px; color: var(--ink); }
.receipt-row .lbl small { font-size: .72rem; color: var(--muted); font-weight: 400; line-height: 1.35; }
.receipt-row .amt { font-weight: 500; color: var(--ink); font-size: var(--fs-body); white-space: nowrap; }
.receipt-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 15px; border-top: 1.5px double var(--primary); }
.receipt-total .lbl { font-family: var(--font-head); font-size: 1.2rem; color: var(--ink); }
.receipt-total .amt { font-family: var(--font-head); font-size: 1.75rem; font-weight: 600; color: var(--primary); }
.receipt-foot { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--hairline); display: flex; gap: 12px; align-items: flex-start; }
.receipt-foot .tally { flex: none; width: 34px; height: 34px; color: var(--accent-text); }
.receipt-foot p { margin: 0; font-size: var(--fs-micro); color: var(--muted); line-height: 1.5; }

/* ---------- How it works — ledger line-items ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 44px; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; gap: 22px; } }
.step { border-top: 2px solid var(--primary); padding-top: 18px; }
.step .num { font-family: var(--font-head); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: 12px; }
.step h3 { margin-bottom: .35em; }
.step p { color: var(--muted); margin: 0; }
.step .ic { width: 30px; height: 30px; color: var(--primary); margin-bottom: 14px; }

/* ---------- Trust cards ---------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 40px; }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--cream-2); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 26px; }
.card .ic { width: 28px; height: 28px; color: var(--primary); margin-bottom: 14px; }
.card h3 { margin-bottom: .3em; }
.card p { color: var(--muted); margin: 0; font-size: var(--fs-small); }
.hold-box { margin-top: 30px; background: #fff; border: 1px solid var(--hairline); border-left: 3px solid var(--primary); border-radius: var(--r-md); padding: 24px 26px; }
.hold-box h3 { margin-bottom: .4em; }
.hold-box p { color: var(--ink); margin: 0; }

/* ---------- What Reeve handles — itemised ledger ---------- */
.handle-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 44px; margin: 30px 0 0; padding: 0; list-style: none; max-width: 760px; }
@media (max-width: 620px) { .handle-list { grid-template-columns: 1fr; } }
.handle-list li { display: flex; gap: 13px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--hairline); }
.handle-list svg { width: 22px; height: 22px; color: var(--primary); flex: none; }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin: 40px auto 0; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { cursor: pointer; font-weight: 600; font-size: var(--fs-body); padding: 20px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-text); font-size: 1.6rem; font-family: var(--font-head); line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { color: var(--muted); padding: 0 0 20px; margin: 0; max-width: 66ch; }

/* ---------- Waitlist ---------- */
.waitlist-card { background: rgba(247,241,227,.06); border: 1px solid var(--hairline-2); border-radius: var(--r-lg); padding: 34px; max-width: 560px; margin: 38px auto 0; }
.stack > * { margin-bottom: 14px; }
.field-label { display: block; font-weight: 600; font-size: var(--fs-small); margin-bottom: 7px; color: var(--cream); }
.consent { display: flex; gap: 11px; align-items: flex-start; font-size: var(--fs-small); color: var(--muted-cream); }
.consent input { margin-top: 4px; flex: none; width: 20px; height: 20px; accent-color: var(--accent); }
.consent a { color: var(--cream); text-decoration: underline; }
.form-success { display: none; text-align: center; padding: 12px 0; }
.form-success.show { display: block; }
.form-success .tick { width: 52px; height: 52px; color: var(--accent); margin: 0 auto 14px; }

/* ---------- Footer ---------- */
.site-footer { background: #172018; color: var(--muted-cream); padding: 60px 0 40px; font-size: var(--fs-small); }
.site-footer a { color: #DDE7DE; }
.site-footer a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr; gap: 26px; } }
.foot-grid h4 { font-family: var(--font-body); font-size: var(--fs-micro); letter-spacing: var(--ls-caps); text-transform: uppercase; color: #8FA398; margin: 0 0 15px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: 10px; }
.foot-brand { margin-bottom: 12px; }
.foot-legal { border-top: 1px solid var(--hairline-2); margin-top: 40px; padding-top: 26px; color: #7f9384; font-size: var(--fs-micro); line-height: 1.7; }
.foot-legal .placeholder { color: #B7A46B; }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}