/* =========================================================================
   Goldfinch Consulting — Direction A "Heritage Gold"
   Palette, typography, spacing and logo rules per Goldfinch_Brand_Guidelines_v2.
   No external fonts, no third-party assets: renders fully offline.
   ========================================================================= */

:root {
  /* Primary palette */
  --gold:      #B79335;   /* Goldfinch Gold  — accent only, never body text */
  --charcoal:  #1B1B1B;   /* Warm Charcoal   — headings and body text */
  --cream:     #FCF9F5;   /* Stucco Cream    — primary surface */

  /* Secondary palette */
  --graphite:  #4A4A48;   /* Soft Graphite   — secondary text, captions */
  --stone:     #E5E1D8;   /* Abbey Stone     — card edges, fills, rules */
  --white:     #FFFFFF;   /* Off-White       — layered content blocks */

  /* Type */
  --font-display: Georgia, "Lora", "Cormorant Garamond", "Times New Roman", serif;
  --font-body: Calibri, "Lato", "Open Sans", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --s1: 0.5rem;  --s2: 1rem;   --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;    --s6: 4rem;   --s7: 6rem;

  --radius: 6px;              /* gentle rounded corners, 4–8px */
  --measure: 68ch;
  --wrap: 1180px;

  /* Optional paper grain — OFF by default.
     On a cream and white palette a grain layer either does nothing visible
     (soft-light blending barely moves near-white values) or it darkens the
     surface away from the approved #FCF9F5. Depth is therefore carried by
     the tonal washes below instead, which stay exactly on palette.
     TO TRY IT: replace "none" with the commented url() on the next line. */
  --grain: none;
  /* url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.45'/%3E%3C/svg%3E"); */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background-color: var(--cream);
  background-image: var(--grain);
  background-size: 200px 200px;
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--charcoal);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.15rem); font-weight: 400; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.4rem); font-weight: 700; }
h4 { font-size: 1.075rem; font-weight: 700; }
p  { margin: 0 0 var(--s3); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }

.lede {
  font-size: clamp(1.125rem, 2vw, 1.3rem);
  line-height: 1.6;
  color: var(--graphite);
}

.label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 var(--s2);
  display: block;
}

.caption {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--graphite);
  margin-top: var(--s2);
}

a { color: var(--charcoal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gold); }

:focus-visible {
  outline: 3px solid var(--charcoal);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Focus ring must stay visible on the dark charcoal surfaces */
.cta-band :focus-visible,
.site-footer :focus-visible,
.video-shell :focus-visible {
  outline-color: var(--cream);
}

/* Anchor targets must clear the sticky header */
:target,
[id] { scroll-margin-top: 7.5rem; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.narrow { max-width: 760px; }
/* Vertical rhythm between bands. Tightened from 4rem/6rem — adjust here
   and every section, service block and page header follows. */
:root { --band-y: 2.75rem; }
@media (min-width: 800px) { :root { --band-y: 4rem; } }

section { padding-block: var(--band-y); }
/* ---------- Section surfaces ----------
   Each band is a soft tonal wash rather than a flat fill, finished with a
   fine grain. Only palette colours are used, so contrast is unaffected:
   text sits on values between #FCF9F5 and #FFFFFF throughout (16.4:1+). */
.section-cream {
  background-color: var(--cream);
  background-image:
    var(--grain),
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, var(--cream) 0%, #FDFBF8 55%, var(--cream) 100%);
  background-size: 200px 200px, auto, auto;
  background-blend-mode: soft-light, normal, normal;
}
.section-white {
  background-color: var(--white);
  background-image:
    var(--grain),
    linear-gradient(180deg, var(--white) 0%, var(--white) 72%, #FDFBF7 100%);
  background-size: 200px 200px, auto;
  background-blend-mode: soft-light, normal;
}
.section-stone {
  background-color: var(--stone);
  background-image:
    var(--grain),
    linear-gradient(180deg, #EDEAE3 0%, var(--stone) 100%);
  background-size: 200px 200px, auto;
  background-blend-mode: soft-light, normal;
}

/* A hairline stone seam between bands, so the tonal change reads as
   deliberate layering rather than an accident of scrolling. */
.section-cream + .section-white,
.section-white + .section-cream,
.section-cream + .section-cream,
.section-white + .section-white { border-top: 1px solid rgba(229, 225, 216, 0.9); }

.rule {
  border: 0;
  border-top: 1px solid var(--gold);   /* hairline gold divider, used sparingly */
  width: 64px;
  margin: 0 0 var(--s3);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--charcoal); color: var(--white);
  padding: var(--s2) var(--s3); border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */
.site-header {
  background-color: var(--cream);
  background-image: linear-gradient(180deg, var(--white) 0%, var(--cream) 100%);
  border-bottom: 1px solid var(--stone);
  box-shadow: 0 1px 0 rgba(183, 147, 53, 0.28);  /* hairline gold seam, not a shadow */
  position: sticky; top: 0; z-index: 100;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  padding-block: var(--s3);   /* clearspace around the lockup */
}
.logo-link { display: inline-block; line-height: 0; text-decoration: none; }
.logo-link img { width: 250px; }   /* ≥240px minimum for the horizontal lockup */
@media (max-width: 520px) {
  /* Hold the 240px brand minimum and give the toggle a tighter footprint */
  .logo-link img { width: 240px; }
  .header-inner { gap: var(--s2); }
  .nav-toggle { padding: 0.45rem 0.65rem; font-size: 0.75rem; letter-spacing: 0.08em; }
}

.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: transparent; color: var(--charcoal);
  border: 1px solid var(--charcoal); border-radius: var(--radius);
  padding: 0.55rem 0.85rem; cursor: pointer;
}
.nav-toggle:hover { background: var(--charcoal); color: var(--cream); }

.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s4);
}
.site-nav a {
  font-size: 0.9375rem; letter-spacing: 0.04em;
  text-decoration: none; color: var(--charcoal);
  padding-block: 0.35rem; display: inline-block;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--gold); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--gold); font-weight: 700; }

@media (max-width: 899px) {
  .site-nav {
    display: none;
    width: 100%;
    border-top: 1px solid var(--stone);
    padding-block: var(--s2);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { padding: 0.7rem 0; border-bottom: 1px solid var(--stone); width: 100%; }
  .header-inner { flex-wrap: wrap; }
}
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav { display: block !important; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
/* Gold fill with charcoal label — 5.94:1, meets WCAG AA */
.btn-primary { background: var(--gold); color: var(--charcoal); border-color: var(--gold); }
.btn-primary:hover { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }
.btn-secondary { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn-secondary:hover { background: var(--charcoal); color: var(--cream); }
.btn-invert { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn-invert:hover { background: var(--cream); color: var(--charcoal); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--stone); padding: 0; }
.hero-media { position: relative; }
.hero-media img { width: 100%; height: clamp(320px, 52vh, 560px); object-fit: cover; display: block; }
/* Warm scrim so the photograph settles into the cream rather than stopping dead */
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(27, 27, 27, 0.18) 0%, rgba(27, 27, 27, 0) 38%),
    linear-gradient(0deg, rgba(252, 249, 245, 0.55) 0%, rgba(252, 249, 245, 0) 34%);
}
.hero-panel {
  background-color: var(--cream);
  background-image:
    var(--grain),
    linear-gradient(158deg, var(--white) 0%, var(--cream) 62%);
  background-size: 200px 200px, auto;
  background-blend-mode: soft-light, normal;
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  padding: var(--s4);
}
@media (min-width: 900px) {
  .hero-panel {
    margin-top: -120px; position: relative; z-index: 2;
    max-width: 680px; padding: var(--s5);
  }
}
@media (max-width: 899px) {
  .hero-panel { margin-top: 0; border-radius: 0; border-inline: 0; }
  .hero-panel-wrap { width: 100%; }
}
.hero-panel h1 { margin-bottom: var(--s2); }
.hero-tagline {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--graphite); margin-bottom: var(--s3);
}

/* ---------- Page header (interior pages) ---------- */
.page-header { padding-block: var(--band-y) calc(var(--band-y) * 0.8); border-bottom: 1px solid var(--stone); }
.page-header p { max-width: 62ch; }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: var(--s4); }
@media (min-width: 700px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background-color: var(--white);
  background-image: linear-gradient(180deg, var(--white) 0%, var(--white) 62%, #FDFBF7 100%);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  padding: var(--s4);
  display: flex; flex-direction: column;
}
.card img { border-radius: var(--radius) var(--radius) 0 0; }
.card-media { padding: 0; overflow: hidden; }
.card-media .card-body { padding: var(--s4); display: flex; flex-direction: column; flex: 1; }
.card h3 { margin-bottom: var(--s2); }
.card p { color: var(--graphite); }
.card .card-link { margin-top: auto; padding-top: var(--s3); font-weight: 700; font-size: 0.9375rem; }

/* ---------- Numbered lists (preferred over bullets) ---------- */
ol.numbered {
  list-style: none; counter-reset: gf; margin: 0 0 var(--s3); padding: 0;
  max-width: var(--measure);
}
ol.numbered > li {
  counter-increment: gf;
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: var(--s2);
}
ol.numbered > li::before {
  content: counter(gf) ".";
  position: absolute; left: 0; top: 0;
  font-family: var(--font-display);
  color: var(--gold);           /* decorative numeral; adjacent text is charcoal */
  font-weight: 700;
}
ol.numbered.spaced > li { margin-bottom: var(--s3); }
ol.numbered li:last-child { margin-bottom: 0; }

/* ---------- Service blocks ---------- */
.service {
  padding-block: var(--band-y);
  border-top: 1px solid var(--stone);
}
.service:first-of-type { border-top: 0; }
.service-grid { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 900px) {
  .service-grid { grid-template-columns: 1.15fr 0.85fr; }
  .service-grid.flip > figure { order: -1; }
}
.service figure img { border-radius: var(--radius); }

/* Small print — quieter than a callout box, still WCAG AA on white (8.46:1) */
.small-print {
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--graphite);
  max-width: var(--measure);
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 1px solid var(--stone);
}
.small-print p { margin: 0; font-size: inherit; }

.fee-note {
  background: var(--stone);
  border-radius: var(--radius);
  padding: var(--s3);
  margin-top: var(--s4);
  max-width: var(--measure);
}
.fee-note .label { margin-bottom: var(--s1); }
.fee-note p { margin: 0; }

/* ---------- Fees table ---------- */
.fee-block {
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  padding: var(--s4);
  margin-bottom: var(--s4);
}
.fee-block h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.4rem);
  font-weight: 700;
  border-bottom: 1px solid var(--gold);
  padding-bottom: var(--s2);
}
.fee-table { width: 100%; border-collapse: collapse; margin-bottom: 0; }
.fee-table caption { text-align: left; font-size: 0.875rem; color: var(--graphite); padding-bottom: var(--s2); }
.fee-table th, .fee-table td {
  text-align: left; vertical-align: top;
  padding: 0.85rem 0.75rem 0.85rem 0;
  border-bottom: 1px solid var(--stone);
}
.fee-table th { font-weight: 700; width: 40%; }
.fee-table tr:last-child th, .fee-table tr:last-child td { border-bottom: 0; }
@media (max-width: 599px) {
  .fee-table, .fee-table tbody, .fee-table tr, .fee-table th, .fee-table td { display: block; width: 100%; }
  .fee-table th { border-bottom: 0; padding-bottom: 0.2rem; }
  .fee-table td { padding-top: 0; }
}

/* ---------- Founder note ---------- */
.founder { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 800px) { .founder { grid-template-columns: 0.8fr 1.2fr; } }
.founder img { border-radius: var(--radius); }
.signature { font-family: var(--font-display); font-size: 1.15rem; margin-top: var(--s3); }
.signature span { display: block; font-family: var(--font-body); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); margin-top: 0.25rem; }

/* ---------- Video ---------- */
.video-shell {
  background: var(--charcoal);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 900px;
}
.video-shell video { width: 100%; height: auto; display: block; background: var(--charcoal); }
.video-fallback {
  padding: var(--s4);
  color: var(--cream);
  border-radius: var(--radius);
}
.video-fallback a { color: var(--cream); }

/* Transcript link beneath the player — quiet, but unmissable to a screen reader */
.transcript-link {
  margin-top: var(--s3);
  font-size: 0.9375rem;
  color: var(--graphite);
  max-width: 900px;
}
.transcript-link a { font-weight: 700; color: var(--charcoal); }

/* ---------- Call-to-action band ----------
   Charcoal ground, a faint warm bloom, and the marque used as a watermark —
   an approved use of the marque on its own. */
.cta-band {
  position: relative;
  overflow: hidden;
  background-color: var(--charcoal);
  background-image:
    radial-gradient(80% 120% at 88% 0%, rgba(183, 147, 53, 0.16) 0%, rgba(183, 147, 53, 0) 62%),
    linear-gradient(180deg, #222220 0%, var(--charcoal) 100%);
  color: var(--cream);
}
.cta-band::after {
  content: "";
  position: absolute;
  right: -40px; bottom: -60px;
  width: 320px; height: 320px;
  background: url("../images/mark-gold.png") no-repeat center / contain;
  opacity: 0.07;
  pointer-events: none;
}
@media (max-width: 799px) { .cta-band::after { width: 200px; height: 200px; right: -50px; bottom: -50px; } }
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band h2, .cta-band h3 { color: var(--cream); }
.cta-band p { color: var(--cream); }
.cta-band .rule { border-top-color: var(--gold); }
.cta-band a:not(.btn) { color: var(--cream); }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: var(--s3); max-width: 640px; }
@media (min-width: 700px) { .form-grid .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } }
.field label {
  display: block; font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite);
  margin-bottom: 0.4rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body); font-size: 1rem;
  color: var(--charcoal); background: var(--white);
  border: 1px solid var(--graphite);
  border-radius: var(--radius);
  padding: 0.7rem 0.8rem;
}
.field textarea { min-height: 150px; resize: vertical; }
.field .hint { font-size: 0.8125rem; color: var(--graphite); margin: 0.35rem 0 0; }
.required-note { font-size: 0.875rem; color: var(--graphite); }

/* ---------- Contact details list ---------- */
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { margin-bottom: var(--s3); }
.contact-list .label { margin-bottom: 0.2rem; }
.contact-list a { font-size: 1.15rem; display: inline-flex; align-items: center; gap: 0.6rem; }
/* Simple monoline glyphs drawn inline — no third-party logo files, no external
   requests, and they inherit the palette rather than importing brand colours. */
.contact-list .ci {
  width: 1.15em; height: 1.15em;
  flex: 0 0 auto;
  fill: var(--gold);
  transition: fill 0.35s ease;
}
.contact-list a:hover .ci { fill: var(--charcoal); }

/* ---------- Placeholder (marked, per brief) ---------- */
.placeholder {
  border: 1px dashed var(--graphite);
  border-radius: var(--radius);
  padding: var(--s4);
  color: var(--graphite);
  font-size: 0.9375rem;
  background: var(--stone);
}

/* ---------- Footer ---------- */
.site-footer {
  background-color: var(--charcoal);
  background-image: linear-gradient(180deg, #232321 0%, var(--charcoal) 45%);
  color: var(--cream);
  padding-block: var(--band-y) var(--s4);
  border-top: 3px solid var(--gold);
}
.site-footer a { color: var(--cream); }
.site-footer a:hover { text-decoration-color: var(--gold); }
.footer-grid { display: grid; gap: var(--s4); }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s5); } }
.site-footer img { width: 250px; margin-bottom: var(--s3); }
.site-footer h2 {
  color: var(--cream); font-family: var(--font-body);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: var(--s2);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.6rem; }
.site-footer p { color: var(--cream); }
.footer-bottom {
  border-top: 1px solid rgba(252, 249, 245, 0.22);
  margin-top: var(--s4); padding-top: var(--s3);
  font-size: 0.875rem;
  display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between;
}
.footer-bottom p { margin: 0; font-size: 0.875rem; }
.footer-tagline { color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.75rem; font-weight: 700; }

/* =========================================================================
   CRAFT LAYER — motion, imagery behaviour and micro-interaction.
   These go beyond Direction A, which is silent on motion and assumes static
   imagery. Palette, typography and logo rules are untouched. Everything here
   degrades to the plain static site if JavaScript is off, and switches itself
   off entirely for anyone who has asked for reduced motion.
   ========================================================================= */

/* --- 1. Reveal on scroll ---------------------------------------------- */
/* Only applies once JS confirms it can un-hide again — no JS, no hiding. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 0.61, 0.25, 1),
    transform 0.75s cubic-bezier(0.22, 0.61, 0.25, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* The gold hairline draws itself in as its section arrives */
.js .rule { width: 0; transition: width 0.9s cubic-bezier(0.22, 0.61, 0.25, 1) 0.15s; }
.js [data-reveal].is-visible .rule,
.js .rule.is-visible { width: 64px; }

/* --- 2. Imagery behaviour --------------------------------------------- */
/* Hero: a very slow drift, so the photograph is alive without being busy */
.hero-media img { animation: gf-drift 26s cubic-bezier(0.33, 0, 0.2, 1) forwards; transform-origin: 55% 60%; }
@keyframes gf-drift { from { transform: scale(1.005); } to { transform: scale(1.075); } }

/* Cards and figures: slow scale on hover, and a mask that wipes the image
   in as it enters view. No shadows — Direction A's rule is respected. */
.card-media { overflow: hidden; }
.card-media img,
.service figure img,
.founder figure img {
  transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.25, 1);
  backface-visibility: hidden;
}
.card:hover .card-media img,
.card:focus-within .card-media img { transform: scale(1.045); }

.service figure,
.founder figure { overflow: hidden; border-radius: var(--radius); }
.service figure:hover img,
.founder figure:hover img { transform: scale(1.03); }

.card {
  transition: border-color 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.25, 1);
}
.card:hover, .card:focus-within { border-color: var(--gold); transform: translateY(-3px); }

/* --- 3. Micro-interaction --------------------------------------------- */
/* Underlines that draw in rather than switch on */
.site-nav a, .card-link a, .contact-list a, .site-footer a {
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.4s cubic-bezier(0.22, 0.61, 0.25, 1);
  padding-bottom: 2px;
}
.site-nav a:hover, .card-link a:hover, .contact-list a:hover, .site-footer a:hover { background-size: 100% 1px; }
.site-nav a { border-bottom: 0; }
.site-nav a[aria-current="page"] { background-size: 100% 1px; font-weight: 700; }

/* Buttons lift and fill rather than flick between two states */
.btn {
  transition: background-color 0.35s ease, color 0.35s ease,
              border-color 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.25, 1);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Scroll progress — a 2px gold thread across the top of the viewport */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--gold);
  z-index: 120; pointer-events: none;
}

/* Header condenses on scroll. The lockup never drops below the 240px
   brand minimum — only the surrounding space tightens. */
.site-header { transition: background-color 0.4s ease, backdrop-filter 0.4s ease; }
.header-inner { transition: padding-block 0.4s cubic-bezier(0.22, 0.61, 0.25, 1); }
.site-header.is-condensed {
  background-color: rgba(252, 249, 245, 0.88);
  backdrop-filter: saturate(1.6) blur(10px);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
}
.site-header.is-condensed .header-inner { padding-block: var(--s2); }

/* --- 4. Typographic detail -------------------------------------------- */
p { text-wrap: pretty; }
.fee-table td, .fee-table th { font-variant-numeric: tabular-nums lining-nums; }
::selection { background: var(--gold); color: var(--charcoal); }   /* 5.94:1 */

/* --- 5. Honour the reduced-motion preference -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .rule { width: 64px !important; transition: none !important; }
  .hero-media img { animation: none; transform: none; }
  .card-media img, .service figure img, .founder figure img,
  .card, .btn, .header-inner, .site-nav a, .card-link a,
  .contact-list a, .site-footer a { transition: none !important; }
  .card:hover, .card:focus-within, .btn:hover { transform: none; }
  .scroll-progress { display: none; }
}

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }