:root {
  --ink: #26332d;
  --sage: #6f887b;
  --sage-dark: #52695e;
  --sage-pale: #dfe6df;
  --cream: #f7f4ed;
  --paper: #fffdf8;
  --line: rgba(38, 51, 45, .15);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--cream); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page-shell {
  width: min(1180px, calc(100% - 48px));
  min-height: calc(100vh - 88px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: stretch;
  background: var(--paper);
  box-shadow: 0 28px 80px rgba(45, 61, 53, .1);
}

.content { padding: clamp(42px, 7vw, 92px); display: flex; flex-direction: column; justify-content: center; }
.brand { min-height: 72px; margin-bottom: clamp(48px, 8vh, 90px); display: flex; align-items: center; }
.brand-logo { display: block; width: clamp(126px, 12vw, 150px); height: auto; object-fit: contain; object-position: left center; }
.brand-fallback { display: flex; align-items: center; gap: 16px; }
.brand-mark { width: 62px; height: 62px; display: grid; place-items: center; border: 1px solid var(--sage); border-radius: 50%; color: var(--sage-dark); font: 27px Georgia, serif; letter-spacing: -2px; }
.brand-name { font: 21px/1.05 Georgia, 'Times New Roman', serif; letter-spacing: .02em; }
.eyebrow { margin: 0 0 18px; color: var(--sage-dark); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
h1 { max-width: 700px; margin: 0; font: 400 clamp(46px, 6vw, 78px)/.98 Georgia, 'Times New Roman', serif; letter-spacing: -.045em; }
.intro { max-width: 640px; margin: 30px 0 38px; color: #536159; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.75; }
.contact-card { padding-top: 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(150px, .8fr) 1.4fr; gap: 28px; }
.person p { margin: 0; }
.person-name { font: 24px Georgia, 'Times New Roman', serif; }
.person-title { margin-top: 6px !important; color: var(--sage-dark); font-size: 13px; letter-spacing: .05em; }
.contact-links { display: grid; gap: 10px; }
.contact-links a { width: fit-content; color: var(--ink); text-decoration: none; }
.contact-links span { display: inline-block; width: 55px; color: var(--sage-dark); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.contact-links strong { font-size: 14px; font-weight: 500; border-bottom: 1px solid transparent; transition: border-color .2s; }
.contact-links a:hover strong, .contact-links a:focus-visible strong { border-color: var(--sage); }
.contact-links a:focus-visible { outline: 2px solid var(--sage); outline-offset: 5px; }
.credentials { margin: 20px 0 0; color: #68736d; font-size: 11px; line-height: 1.6; letter-spacing: .025em; }
.credentials p { margin: 0; }
.credentials span { padding: 0 5px; color: var(--sage); }
.membership { width: fit-content; margin-top: 34px; display: flex; align-items: center; gap: 10px; opacity: .72; }
.membership img { width: 66px; height: 46px; object-fit: contain; mix-blend-mode: multiply; }
.membership p { margin: 0; color: #5f6964; font-size: 11px; line-height: 1.35; letter-spacing: .05em; }
.membership span, .membership strong { display: block; }
.membership span { font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }
.membership strong { color: var(--ink); font-weight: 600; }

.visual { position: relative; min-height: 640px; overflow: hidden; background: var(--sage); }
.visual::before { content: ''; position: absolute; inset: 0; opacity: .13; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 22px 22px; }
.orb { position: absolute; border-radius: 50%; }
.orb-one { width: 430px; height: 430px; right: -130px; top: -90px; background: var(--sage-pale); opacity: .82; }
.orb-two { width: 270px; height: 270px; left: -110px; bottom: -70px; border: 1px solid rgba(255,255,255,.45); }
.ledger-lines { position: absolute; inset: 20% 14%; border: 1px solid rgba(255,255,255,.2); transform: rotate(-5deg); }
.ledger-lines::before, .ledger-lines::after { content: ''; position: absolute; left: 0; right: 0; border-top: 1px solid rgba(255,255,255,.2); }
.ledger-lines::before { top: 33.33%; } .ledger-lines::after { top: 66.66%; }
.visual-note { position: absolute; left: 13%; bottom: 13%; margin: 0; color: white; font: 38px/1.12 Georgia, 'Times New Roman', serif; letter-spacing: -.02em; }
.visual-note em { color: var(--sage-pale); font-weight: 400; }
footer { height: 88px; display: grid; place-items: center; color: #79827d; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }

@media (max-width: 820px) {
  .page-shell { width: 100%; min-height: auto; grid-template-columns: 1fr; }
  .content { padding: 42px 28px 56px; }
  .brand { margin-bottom: 56px; }
  .visual { min-height: 300px; }
  .visual-note { left: 28px; bottom: 34px; font-size: 32px; }
}

@media (max-width: 520px) {
  h1 { font-size: 46px; }
  .contact-card { grid-template-columns: 1fr; gap: 22px; }
  .contact-links strong { font-size: 13px; }
  footer { height: 68px; padding: 0 20px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }