/* ==========================================================================
   Billionaires Ride — "The Private Ledger"
   An editorial acquisition-dossier system: vellum paper, ink, a single
   oxblood signal color, and a muted bronze used only for ornament.
   Their real gold/silver monogram survives as a sealed medallion, never
   as a flat lockup — everything else in this file is a new visual system.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Archivo:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  --paper: #e7e0ce;
  --paper-deep: #dfd6bf;
  --paper-card: #ede7d8;
  --paper-line: #c9bea0;

  --ink: #1b1815;
  --ink-deep: #121110;
  --ink-soft: #322d26;
  --muted: #57503f;

  --oxblood: #5c1a20;
  --oxblood-bright: #7a2530;
  --oxblood-light: #c97077;

  --bronze: #8b7a52;
  --bronze-light: #c4b37e;
  --cream: #ede6d3;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --radius: 2px;
  --container: 1240px;
  --container-narrow: 720px;
  --container-mid: 880px;

  --gap-section: clamp(4.5rem, 9vw, 8rem);
  --pad-inline: clamp(1.4rem, 5vw, 3.75rem);

  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: .3s;
  --dur: .8s;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; color-scheme: light; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 15% 8%, rgba(92,26,32,.035) 0%, transparent 45%),
    radial-gradient(circle at 85% 92%, rgba(139,122,82,.06) 0%, transparent 45%);
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure{ margin: 0; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea{ font: inherit; color: inherit; }
svg{ display: block; }
:focus-visible{ outline: 2px solid var(--oxblood); outline-offset: 3px; }

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

/* ---------- Layout ---------- */
.container{ max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-inline); }
.container--narrow{ max-width: var(--container-narrow); }
.container--mid{ max-width: var(--container-mid); }
.section{ padding-block: var(--gap-section); position: relative; }

.kicker{
  display: flex; align-items: baseline; gap: .7em;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 1.3rem;
}
.kicker .no{ font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1rem; color: var(--bronze); letter-spacing: 0; text-transform: none; }

.h-display{
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 380;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--ink);
  text-wrap: balance;
}
.h-xl{ font-size: clamp(2.6rem, 6.4vw, 5.6rem); }
.h-lg{ font-size: clamp(2rem, 4.2vw, 3.3rem); }
.h-md{ font-size: clamp(1.5rem, 2.6vw, 2rem); }
.h-display.italic{ font-style: italic; font-weight: 400; }

.lede{ font-family: var(--sans); font-weight: 300; font-size: clamp(1rem, 1.2vw, 1.13rem); color: var(--muted); line-height: 1.8; }
.oxblood{ color: var(--oxblood); }
.on-dark .lede{ color: #cabfae; }

.hairline{ width: 100%; height: 1px; background: var(--paper-line); }
.hairline--tick{ position: relative; }
.hairline--tick::before{ content:''; position: absolute; left: 0; top: -3px; width: 1px; height: 7px; background: var(--bronze); }

/* ---------- Buttons ---------- */
.btn{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  height: 3.2rem; padding-inline: 1.9rem;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  color: var(--ink);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn--fill{ background: var(--ink); color: var(--paper); }
.btn--fill:hover{ background: var(--oxblood); border-color: var(--oxblood); }
.btn--line:hover{ border-color: var(--oxblood); color: var(--oxblood); }
.btn--sm{ height: 2.6rem; padding-inline: 1.3rem; font-size: .7rem; }
.on-dark .btn{ border-color: var(--cream); color: var(--cream); }
.on-dark .btn--fill{ background: var(--paper); color: var(--ink); border-color: var(--paper); }
.on-dark .btn--fill:hover{ background: var(--oxblood-light); border-color: var(--oxblood-light); color: var(--ink-deep); }
.on-dark .btn--line:hover{ border-color: var(--bronze-light); color: var(--bronze-light); }
.btn-row{ display: flex; flex-wrap: wrap; gap: 1rem; }

.text-link{ display: inline-flex; align-items: center; gap: .5em; color: var(--oxblood); font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: .1em; transition: gap var(--dur-fast) var(--ease); }
.text-link:hover{ gap: .8em; }

/* ---------- Reveal ---------- */
.reveal{ opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--rd, 0s); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ---------- Header / Masthead ---------- */
.utility-bar{
  border-bottom: 1px solid var(--paper-line);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.utility-bar .container{ display: flex; align-items: center; justify-content: space-between; height: 2.4rem; }
.utility-bar a:hover{ color: var(--oxblood); }

.site-header{
  position: sticky; top: 0; z-index: 500;
  background: var(--paper);
  border-bottom: 1px solid var(--paper-line);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.site-header.is-scrolled{ box-shadow: 0 8px 24px -18px rgba(27,24,21,.4); }
.site-header .container{ display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: clamp(4.6rem, 7vw, 5.6rem); }

.brand{ display: flex; align-items: center; gap: .85rem; }
.brand img{ height: clamp(34px, 4vw, 44px); width: auto; }
.brand .wordmark{ font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--ink); letter-spacing: -.005em; }

.nav-links{ display: none; align-items: center; gap: 0; }
.nav-links a{
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
  padding-inline: 1.1rem; position: relative; transition: color var(--dur-fast) var(--ease);
}
.nav-links a + a{ border-left: 1px solid var(--paper-line); }
.nav-links a:hover{ color: var(--oxblood); }

.header-actions{ display: flex; align-items: center; gap: 1rem; }
.icon-link{
  width: 2.3rem; height: 2.3rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--paper-line); border-radius: 50%; color: var(--ink-soft);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-link:hover{ border-color: var(--oxblood); color: var(--oxblood); }
.icon-link svg{ width: 15px; height: 15px; }

.menu-toggle{ display: inline-flex; flex-direction: column; gap: 5px; width: 2.3rem; height: 2.3rem; align-items: center; justify-content: center; }
.menu-toggle span{ width: 20px; height: 1px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.menu-toggle.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity: 0; }
.menu-toggle.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset: 0; z-index: 600; background: var(--paper);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.6rem;
  padding-inline: var(--pad-inline);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.mobile-menu.is-open{ opacity: 1; visibility: visible; }
.mobile-menu a{
  font-family: var(--serif); font-style: italic; font-size: clamp(1.8rem, 7vw, 2.6rem); font-weight: 400; color: var(--ink);
  opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.mobile-menu.is-open a{ opacity: 1; transform: translateY(0); }
.mobile-menu .mm-contact{ margin-top: .6rem; font-family: var(--sans); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--oxblood); }

@media (min-width: 900px){
  .nav-links{ display: flex; }
  .menu-toggle{ display: none; }
}

/* ---------- Hero ---------- */
.hero{ padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 7vw, 6rem); }
.hero-grid{ display: grid; gap: clamp(2.5rem, 6vw, 4rem); grid-template-columns: 1fr; align-items: center; }
.hero-copy .lede{ max-width: 46ch; margin-top: 1.4rem; }
.hero-copy .btn-row{ margin-top: 2.4rem; }

.hero-frame{ position: relative; }
.hero-frame .frame-border{
  position: relative; border: 1px solid var(--ink); padding: 10px;
  background: var(--paper-card);
}
.hero-frame img{ width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 32%; will-change: transform; }
.hero-frame figcaption{
  margin-top: .9rem; display: flex; justify-content: space-between; gap: 1rem;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

@media (min-width: 980px){
  .hero-grid{ grid-template-columns: 1.15fr .85fr; }
}

/* ---------- Contents strip (replaces marquee) ---------- */
.contents-strip{ border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
.contents-strip ul{ display: flex; flex-wrap: wrap; }
.contents-strip li{ display: flex; align-items: center; }
.contents-strip a{
  display: flex; align-items: baseline; gap: .5em;
  padding-block: 1rem; padding-inline: 1.4rem;
  font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease);
}
.contents-strip a .rn{ font-family: var(--serif); font-style: italic; color: var(--oxblood); font-size: .95rem; text-transform: none; letter-spacing: 0; }
.contents-strip li + li{ border-left: 1px solid var(--paper-line); }
.contents-strip a:hover{ color: var(--oxblood); }

/* ---------- Philosophy / pull-quote ---------- */
.philosophy{ position: relative; }
.pull-quote-wrap{ position: relative; max-width: 62ch; }
.pull-quote-wrap::before{
  content: '\201C';
  position: absolute; left: -.5rem; top: -3.2rem;
  font-family: var(--serif); font-size: 10rem; font-weight: 500; color: var(--oxblood);
  opacity: .12; line-height: 1; pointer-events: none;
}
.pull-quote{ font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.25; color: var(--ink); position: relative; }
.philosophy .lede{ max-width: 52ch; margin-top: 1.6rem; }
.signoff{ margin-top: 1.6rem; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--oxblood); }

.footnotes{ margin-top: clamp(3rem, 6vw, 4.5rem); display: grid; gap: 0; border-top: 1px solid var(--paper-line); }
.footnote{ display: grid; grid-template-columns: 3rem 1fr; gap: 1.2rem; padding-block: 1.5rem; border-bottom: 1px solid var(--paper-line); }
.footnote .fn-num{ font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--bronze); }
.footnote h3{ font-family: var(--sans); font-size: .88rem; font-weight: 600; letter-spacing: .02em; margin-bottom: .35rem; }
.footnote p{ font-size: .9rem; color: var(--muted); line-height: 1.6; }

@media (min-width: 860px){
  .footnotes{ grid-template-columns: repeat(2, 1fr); border-top: none; }
  .footnote{ border-top: 1px solid var(--paper-line); }
}

/* ---------- Who We Serve ---------- */
.persona-list{ margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--ink); }
.persona-row{
  display: grid; grid-template-columns: 3.5rem 1fr; gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.6rem, 3.5vw, 2.4rem);
  border-bottom: 1px solid var(--paper-line);
  align-items: baseline;
}
.persona-row .rn{ font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--oxblood); }
.persona-row .persona-body{ display: grid; gap: clamp(1rem, 3vw, 2.5rem); }
.persona-row h3{ font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.3vw, 1.8rem); }
.persona-row p{ color: var(--muted); font-size: .95rem; line-height: 1.75; max-width: 52ch; }
@media (min-width: 760px){
  .persona-row .persona-body{ grid-template-columns: 1fr 1.4fr; align-items: baseline; }
  .persona-row:nth-child(even) .persona-body{ direction: rtl; }
  .persona-row:nth-child(even) .persona-body > *{ direction: ltr; }
}

/* ---------- Process ---------- */
.process-list{ margin-top: clamp(3rem, 6vw, 4.5rem); }
.process-step{ display: grid; grid-template-columns: auto 1fr; gap: clamp(1.4rem, 4vw, 3rem); padding-block: clamp(1.8rem, 3.6vw, 2.6rem); }
.process-step + .process-step{ border-top: 1px solid var(--paper-line); }
.process-step .fig-col{ display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.process-step .fig-label{ font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); }
.process-step .fig-num{ font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 4.4vw, 3rem); color: var(--paper-line); transition: color .6s var(--ease); line-height: 1; }
.process-step.is-active .fig-num{ color: var(--oxblood); }
.process-step .num-track{ position: relative; width: 1px; height: 100%; min-height: 2rem; background: var(--paper-line); overflow: hidden; }
.process-step:last-child .num-track{ display: none; }
.process-step .num-track::after{ content:''; position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: var(--oxblood); transition: height .8s var(--ease); }
.process-step.is-active .num-track::after{ height: 100%; }
.process-copy h3{ font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin-bottom: .7rem; }
.process-copy p{ color: var(--muted); font-size: .96rem; line-height: 1.8; max-width: 58ch; }

/* ---------- FAQ ---------- */
.faq-list{ margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--ink); }
.faq-item{ border-bottom: 1px solid var(--paper-line); }
.faq-q{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.6rem; text-align: left; font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--ink); }
.faq-q .plus{ flex-shrink: 0; width: 26px; height: 26px; position: relative; }
.faq-q .plus::before, .faq-q .plus::after{ content: ''; position: absolute; background: var(--oxblood); top: 50%; left: 50%; transform: translate(-50%,-50%); }
.faq-q .plus::before{ width: 13px; height: 1px; }
.faq-q .plus::after{ width: 1px; height: 13px; transition: opacity .3s var(--ease); }
.faq-item.is-open .faq-q .plus::after{ opacity: 0; }
.faq-a{ max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.faq-a-inner{ padding-bottom: 1.7rem; padding-right: clamp(0rem, 6vw, 4rem); }
.faq-a p{ color: var(--muted); font-size: .95rem; line-height: 1.8; max-width: 62ch; }

/* ---------- Enquiry (inverted ledger panel) ---------- */
.enquire-panel{ background: var(--ink-deep); color: var(--cream); }
.enquire-panel .kicker{ color: var(--bronze-light); }
.enquire-panel .h-display{ color: var(--paper); }
.enquire-grid{ display: grid; gap: clamp(2.2rem, 5vw, 3.5rem); grid-template-columns: 1fr; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 960px){ .enquire-grid{ grid-template-columns: 1.2fr .8fr; } }

.field{ margin-bottom: 1.4rem; }
.field label{ display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze-light); margin-bottom: .55rem; }
.field input, .field select{
  width: 100%; background: rgba(237,230,211,.06); border: 1px solid rgba(237,230,211,.25);
  border-radius: var(--radius); padding: .9rem 1rem; color: var(--cream);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.field input::placeholder{ color: rgba(237,230,211,.4); }
.field input:focus, .field select:focus{ outline: none; border-color: var(--oxblood-light); background: rgba(237,230,211,.1); }
.field-row{ display: grid; gap: 1.4rem; }
@media (min-width: 640px){ .field-row{ grid-template-columns: 1fr 1fr; } }

.form-note{ font-size: .8rem; color: rgba(237,230,211,.55); margin-top: 1.1rem; line-height: 1.7; }
.form-status{ margin-top: 1.3rem; font-size: .88rem; display: none; }
.form-status.is-visible{ display: block; }
.form-status.ok{ color: var(--bronze-light); }

.contact-panel{ border: 1px solid rgba(237,230,211,.2); padding: clamp(1.7rem, 3vw, 2.4rem); border-radius: var(--radius); height: fit-content; }
.contact-panel h3{ font-family: var(--serif); font-style: italic; font-size: 1.4rem; font-weight: 400; margin-bottom: 1.5rem; color: var(--paper); }
.contact-line{ display: flex; align-items: flex-start; gap: 1rem; padding-block: .95rem; border-top: 1px solid rgba(237,230,211,.14); }
.contact-line:first-of-type{ border-top: none; }
.contact-line .ic{ width: 18px; height: 18px; color: var(--oxblood-light); flex-shrink: 0; margin-top: 2px; }
.contact-line a, .contact-line span.txt{ font-size: .92rem; color: var(--cream); }
.contact-line .lbl{ display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(237,230,211,.5); margin-bottom: .25rem; }
.contact-panel .appointment-note{ margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(237,230,211,.14); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-light); }

/* ---------- Footer ---------- */
.site-footer{ border-top: 1px solid var(--ink); padding-block: clamp(3rem, 6vw, 4.5rem) 1.8rem; }
.footer-top{ display: grid; gap: 2.6rem; grid-template-columns: 1fr; padding-bottom: clamp(2.2rem, 5vw, 3.5rem); }
@media (min-width: 860px){ .footer-top{ grid-template-columns: 1.3fr .8fr .8fr 1fr; } }
.footer-brand{ display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.footer-brand img{ height: 40px; }
.footer-brand .wordmark{ font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--ink); }
.footer-col p{ color: var(--muted); font-size: .9rem; max-width: 32ch; line-height: 1.7; }
.footer-col h4{ font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); margin-bottom: 1.1rem; }
.footer-col ul li{ margin-bottom: .75rem; }
.footer-col a{ color: var(--muted); font-size: .9rem; transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover{ color: var(--oxblood); }
.footer-bottom{ display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-top: 1.8rem; border-top: 1px solid var(--paper-line); font-size: .76rem; color: var(--muted); }
.footer-bottom a{ color: var(--muted); }
.footer-bottom a:hover{ color: var(--oxblood); }

/* ---------- Legal pages ---------- */
.legal-body{ padding-top: 3rem; }
.legal-body h2{ font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-top: 2.4rem; margin-bottom: 1rem; color: var(--oxblood); }
.legal-body h2:first-of-type{ margin-top: 0; }
.legal-body p{ color: var(--muted); font-size: 1rem; line-height: 1.85; margin-bottom: 1.1rem; }
.legal-body ul{ margin-bottom: 1.3rem; }
.legal-body li{ color: var(--muted); font-size: 1rem; line-height: 1.85; padding-left: 1.3rem; position: relative; margin-bottom: .5rem; }
.legal-body li::before{ content: ''; position: absolute; left: 0; top: .75em; width: 6px; height: 1px; background: var(--oxblood); }
.legal-body .updated{ color: var(--bronze); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2.2rem; }

/* ---------- Misc ---------- */
.skip-link{ position: absolute; left: -999px; top: 0; background: var(--oxblood); color: var(--paper); padding: .8rem 1.2rem; z-index: 10001; font-size: .85rem; font-weight: 600; }
.skip-link:focus{ left: 1rem; top: 1rem; }