/* Harrow & Vale Capital — shared stylesheet
   Brand: one typeface (Source Serif 4) for reading, Inter for UI/labels.
   Two-colour system: navy #0B1F3A / off-white #F4F1EA. No third hue. */

/* ---------- Fonts (self-hosted, variable, latin subset) ---------- */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/source-serif-4-variable-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-variable-latin.woff2") format("woff2");
}

/* ---------- Custom properties ---------- */

:root {
  --ink: #0B1F3A;
  --paper: #F4F1EA;
  --error: #8C3B3B;

  --fg: var(--ink);
  --bg: var(--paper);
  --muted-45: rgba(11, 31, 58, 0.45);
  --muted-50: rgba(11, 31, 58, 0.5);
  --muted-60: rgba(11, 31, 58, 0.6);
  --muted-70: rgba(11, 31, 58, 0.7);
  --muted-75: rgba(11, 31, 58, 0.75);
  --muted-85: rgba(11, 31, 58, 0.85);
  --hairline: rgba(11, 31, 58, 0.1);
  --hairline-strong: rgba(11, 31, 58, 0.18);

  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-ui: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  --container-max: 1200px;
  --container-pad: 24px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Section grounds — navy sections flip the palette via these same variable names */
.section-navy {
  --fg: var(--paper);
  --bg: var(--ink);
  --muted-45: rgba(244, 241, 234, 0.45);
  --muted-50: rgba(244, 241, 234, 0.5);
  --muted-60: rgba(244, 241, 234, 0.6);
  --muted-70: rgba(244, 241, 234, 0.7);
  --muted-75: rgba(244, 241, 234, 0.75);
  --muted-85: rgba(244, 241, 234, 0.85);
  --hairline: rgba(244, 241, 234, 0.14);
  --hairline-strong: rgba(244, 241, 234, 0.18);
  background: var(--bg);
  color: var(--fg);
}

/* ---------- Reset ---------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img { max-width: 100%; display: block; }

h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }

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

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

a:hover { text-decoration: underline; text-underline-offset: 4px; }

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

input, textarea { font: inherit; color: inherit; }

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  padding: 14px 20px;
  z-index: 100;
  transition: top 150ms var(--ease);
}

.skip-link:focus {
  top: var(--space-4);
}

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

.section-navy :focus-visible,
.btn--solid:focus-visible {
  outline-color: var(--paper);
}

/* ---------- Layout ---------- */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

@media (min-width: 860px) {
  :root { --container-pad: 120px; }
}

.ui {
  font-family: var(--font-ui);
}

.kicker {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-70);
}

.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }

.section-heading {
  max-width: 900px;
}

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

h1 {
  font-size: clamp(48px, 5.3vw + 27px, 104px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(36px, 1.9vw + 28.6px, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
}

@media (min-width: 860px) {
  h3 { font-size: 26px; }
}

.body-copy {
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted-70);
}

@media (min-width: 1200px) {
  .body-copy { font-size: 20px; }
}

.reading-column {
  max-width: 680px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 18px 28px;
}

.btn--outline {
  border: 1.5px solid var(--fg);
}

.btn--solid {
  background: var(--ink);
  color: var(--paper);
  border: 0;
}

.section-navy .btn--solid {
  background: var(--paper);
  color: var(--ink);
}

.btn:hover { text-decoration: none; background-color: var(--hairline); }

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

.site-header {
  position: relative;
  border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
  gap: var(--space-4);
}

.site-logo img {
  height: 28px;
  width: auto;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  margin: -8px;
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
}

.primary-nav {
  display: none;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
}

.primary-nav.is-open {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-4) var(--container-pad) var(--space-5);
  z-index: 50;
}

.primary-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
}

@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .primary-nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 36px;
    background: none;
    border: 0;
    padding: 0;
  }
}

/* ---------- Section rhythm ---------- */

.section {
  padding-block: var(--space-7) var(--space-6);
}

@media (min-width: 860px) {
  .section {
    padding-block: var(--space-9) var(--space-8);
  }
  .section--tight { padding-block: var(--space-8) var(--space-7); }
}

/* ---------- Hero ---------- */

.hero {
  padding-block: var(--space-8) var(--space-7);
}

@media (min-width: 860px) {
  .hero { padding-block: 128px 112px; }
}

.hero__kicker { margin-bottom: var(--space-5); }

.hero h1 { margin-bottom: var(--space-6); max-width: 1120px; }

.hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 960px) {
  .hero__body {
    flex-direction: row;
    align-items: flex-start;
    gap: 64px;
  }
}

.hero__lede {
  font-size: 22px;
  line-height: 1.5;
  max-width: 620px;
  color: var(--muted-85);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: 6px;
}

.hero__secondary {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-70);
}

/* Off-white hero variant (e.g. What We Do): a bottom hairline stands in for
   the ground-colour change that separates Home's navy hero from what follows. */
.hero--divided {
  border-bottom: 1px solid var(--hairline);
}

/* ---------- What we do ---------- */

.what-we-do__grid,
.recent-work__grid,
.how-we-work__grid,
.team__grid {
  display: grid;
  gap: var(--space-6) var(--space-7);
}

.what-we-do__grid { grid-template-columns: 1fr; }

@media (min-width: 720px) {
  .what-we-do__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.what-we-do__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-4);
}

.what-we-do__item h3 { font-size: 26px; }

/* ---------- Detail list (label / reading column) ---------- */
/* Approved Phase 2 composition pattern: a narrow label column against a wide
   reading column, for list-style sections (e.g. What We Do's four services). */

.detail-list {
  border-bottom: 1px solid var(--hairline);
}

.detail-list__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-top: 1px solid var(--hairline);
}

@media (min-width: 640px) {
  .detail-list__row {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--space-7);
  }
}

.detail-list__label {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.15;
}

.detail-list__row p {
  max-width: 720px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--muted-75);
}

/* ---------- Recent work (numbered cards) ---------- */

.recent-work__grid { grid-template-columns: 1fr; }

@media (min-width: 720px) {
  .recent-work__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.recent-work__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 1px solid var(--hairline-strong);
  padding: var(--space-5) var(--space-4) var(--space-6);
}

.recent-work__number {
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  color: var(--muted-45);
}

.recent-work__amount {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
}

.recent-work__card p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted-75);
}

/* ---------- How we work ---------- */

.how-we-work__grid { grid-template-columns: 1fr; gap: var(--space-6); }

@media (min-width: 640px) {
  .how-we-work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .how-we-work__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.how-we-work__step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.how-we-work__index {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-50);
}

.how-we-work__step h3 { font-size: 24px; }

.how-we-work__step p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted-70);
}

/* ---------- How We Work (dedicated page) ---------- */
/* Approved HowWeWork.dc.html canvas: full-width numbered rows on navy, three
   columns (numeral / label / copy). Distinct from Home's compact four-up
   preview above (.how-we-work__grid) — different column count and treatment,
   so it gets its own block rather than overloading that one. */

.how-we-work-page__list {
  border-bottom: 1px solid var(--hairline);
}

.how-we-work-page__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-top: 1px solid var(--hairline);
}

@media (min-width: 720px) {
  .how-we-work-page__row {
    grid-template-columns: 96px 280px minmax(0, 1fr);
    gap: var(--space-6);
    align-items: baseline;
  }
}

@media (min-width: 1200px) {
  .how-we-work-page__row {
    grid-template-columns: 120px 360px minmax(0, 1fr);
    gap: var(--space-7);
  }
}

.how-we-work-page__number {
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  color: var(--muted-45);
}

@media (min-width: 1200px) {
  .how-we-work-page__number { font-size: 64px; }
}

.how-we-work-page__label {
  font-size: 26px;
}

@media (min-width: 1200px) {
  .how-we-work-page__label { font-size: 30px; }
}

.how-we-work-page__row p {
  max-width: 640px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted-75);
}

@media (min-width: 1200px) {
  .how-we-work-page__row p { font-size: 20px; }
}

/* "What we ask of you": equal two-column split (heading / list), per the
   approved canvas — not the narrow-label detail-list pattern used elsewhere,
   because this canvas explicitly splits the columns evenly. */

.how-we-work-page__ask {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 860px) {
  .how-we-work-page__ask {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    align-items: start;
  }
}

.how-we-work-page__ask-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ---------- Team ---------- */

.team-section { border-top: 1px solid var(--hairline); }

.team__grid { grid-template-columns: 1fr; }

@media (min-width: 720px) {
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.team__member {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.team__portrait {
  flex: 0 0 160px;
  width: 160px;
  height: 213px;
  object-fit: cover;
  background: var(--hairline);
}

.team__name { font-size: 24px; }

.team__role {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--muted-70);
}

.team__bio {
  margin-top: var(--space-2);
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted-70);
}

/* ---------- Team page (full bios) ---------- */
/* The Team page's own full-width rows, per the approved Team.dc.html artboard:
   larger portraits and reading text than the compact .team__grid preview used
   on Home, so this is a separate block rather than a resize of that one. */

.team-page__list {
  border-bottom: 1px solid var(--hairline);
}

.team-page__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-top: 1px solid var(--hairline);
}

@media (min-width: 640px) {
  .team-page__row {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
  }
}

.team-page__portrait {
  width: 200px;
  height: 267px;
  object-fit: cover;
  background: var(--hairline);
}

@media (min-width: 640px) {
  .team-page__portrait { width: 280px; height: 373px; }
}

.team-page__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.team-page__name { font-size: 32px; }

@media (min-width: 860px) {
  .team-page__name { font-size: 40px; }
}

.team-page__role {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-70);
}

.team-page__bio {
  margin-top: var(--space-2);
  max-width: 640px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted-75);
}

@media (min-width: 1200px) {
  .team-page__bio { font-size: 20px; }
}

/* ---------- Legal pages (Privacy) ---------- */
/* Approved Privacy.dc.html canvas reads as continuous sections, not the
   label/reading-column pattern used for service lists — a policy is read
   top to bottom, not scanned as a list. */

.legal {
  max-width: 760px;
}

.legal__updated {
  font-size: 13px;
  color: var(--muted-70);
  margin-top: var(--space-2);
  margin-bottom: var(--space-7);
}

.legal__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.legal__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.legal__item h2 {
  font-size: 28px;
  letter-spacing: -0.01em;
}

.legal__item p {
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted-75);
}

/* ---------- CTA banner ---------- */

.cta-banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding-block: var(--space-8) var(--space-7);
}

@media (min-width: 860px) {
  .cta-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-7);
  }
}

.cta-banner h2 {
  max-width: 720px;
}

.cta-banner .btn {
  flex: none;
}

/* ---------- FCA disclosure ---------- */

.disclosure {
  margin-inline: auto;
  max-width: var(--container-max);
  padding: var(--space-5) var(--container-pad);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.disclosure p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted-70);
  max-width: 900px;
}

.disclosure strong {
  font-weight: 500;
  color: var(--ink);
}

.disclosure__gap {
  color: var(--error);
}

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

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

@media (min-width: 860px) {
  .contact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 96px; }
}

.contact__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact__intro p {
  max-width: 460px;
  color: var(--muted-70);
}

.contact__email { font-size: 19px; }

.contact__email-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
}

.form-field input,
.form-field textarea {
  font-family: var(--font-serif);
  font-size: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(11, 31, 58, 0.3);
  background: #FFFFFF;
  color: var(--ink);
}

.form-field textarea { resize: vertical; }

.form-error {
  color: var(--error);
  font-family: var(--font-ui);
  font-size: 13px;
}

.contact-form__submit { align-self: flex-start; }

.contact-form__note {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-70);
  max-width: 420px;
}

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

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: var(--space-6) 0 var(--space-6);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted-70);
}

@media (min-width: 720px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.site-footer__legal span {
  display: inline;
}

.site-footer__links {
  display: flex;
  gap: var(--space-4);
}

/* ---------- Motion: on-scroll reveal ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal-init {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 400ms var(--ease), transform 400ms var(--ease);
  }

  .reveal-init.reveal-in {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Motion: scroll-fill paragraph ---------- */

@media (prefers-reduced-motion: no-preference) {
  .fill-copy.fill-init {
    color: transparent;
    /* Floor is --muted-70, not the lighter --muted-45 used for decorative
       numerals: a paused mid-scroll read still needs to clear 4.5:1 at the
       22px normal-weight size heroes use. --muted-60 measures ~4.27:1 on an
       off-white ground (fails); --muted-70 clears 4.5:1 on both grounds. */
    background-image: linear-gradient(
      to bottom,
      var(--fill-strong, var(--fg)) 0%,
      var(--fill-strong, var(--fg)) var(--fill, 0%),
      var(--fill-muted, var(--muted-70)) var(--fill, 0%),
      var(--fill-muted, var(--muted-70)) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
  }
}