:root {
  --ivory: #f3eee4;
  --ivory-light: #faf7f0;
  --graphite: #1e1d1a;
  --black: #10100f;
  --gold: #a78649;
  --gold-dark: #7e642f;
  --taupe: #b8ad9b;
  --muted: #6d675e;
  --line: rgba(30, 29, 26, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--graphite);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.site-header {
  height: 96px;
  padding: 0 clamp(24px, 3.4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(167, 134, 73, .16);
  position: relative;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 22px; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; font-weight: 700; }
.brand-monogram { color: var(--gold); font: 500 46px/1 Georgia, "Times New Roman", serif; letter-spacing: -.08em; text-transform: none; }
.brand-divider { width: 1px; height: 48px; background: var(--taupe); }
.site-header nav { display: flex; gap: clamp(24px, 3.3vw, 54px); font-size: 14px; }
.site-header nav a { position: relative; padding: 10px 0; }
.site-header nav a::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.hero { min-height: calc(100vh - 96px); display: grid; grid-template-columns: minmax(0, 68fr) minmax(300px, 32fr); overflow: hidden; }
.hero-copy { padding: clamp(92px, 12vh, 148px) 5vw 84px 6.8vw; position: relative; z-index: 2; }
.gold-rule { display: block; width: 134px; height: 3px; background: var(--gold); margin-bottom: 38px; }
.hero h1, .inner-hero h1, .section-heading h2, .manifesto blockquote, .contact-band h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.045em;
}
.hero h1 { font-size: clamp(54px, 6.1vw, 104px); line-height: .99; margin: 0 0 34px; max-width: 1040px; }
.hero-subtitle { font-size: clamp(17px, 1.45vw, 22px); line-height: 1.5; max-width: 730px; margin: 0 0 22px; }
.credential { display: flex; align-items: center; gap: 12px; font-size: 16px; margin: 0 0 40px; }
.credential span { color: var(--gold); }
.outline-button, .light-button { display: inline-flex; min-width: 306px; min-height: 66px; padding: 18px 28px; align-items: center; justify-content: space-between; border: 1px solid var(--gold); color: var(--gold-dark); font: 500 18px Georgia, serif; transition: .25s ease; }
.outline-button:hover, .outline-button:focus-visible { background: var(--gold); color: var(--ivory-light); }
.outline-button.compact { min-width: 270px; margin-top: 40px; }
.monogram-art { position: relative; min-height: 100%; border-left: 1px solid var(--line); overflow: hidden; }
.monogram-art b { position: absolute; top: 35%; left: 11%; font: 400 clamp(170px, 19vw, 340px)/.8 Georgia, serif; color: rgba(167, 134, 73, .68); letter-spacing: -.16em; white-space: nowrap; }
.circle, .art-line { position: absolute; display: block; border-color: rgba(126,100,47,.36); }
.circle { border: 1px solid rgba(126,100,47,.36); border-radius: 50%; }
.circle-one { width: 520px; height: 520px; top: 40px; left: 9%; }
.circle-two { width: 250px; height: 250px; left: -25%; bottom: -30px; }
.art-line { background: rgba(126,100,47,.36); }
.diagonal { width: 720px; height: 1px; transform: rotate(-45deg); left: -80px; bottom: 120px; }
.horizontal { height: 1px; width: 100%; bottom: 86px; }
.vertical { width: 1px; height: 100%; top: 0; right: 15%; }

.eyebrow { color: var(--gold-dark); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; font-weight: 700; }
.manifesto { background: var(--black); color: var(--ivory); display: grid; grid-template-columns: 1fr 2.2fr 1fr; gap: 6vw; padding: 110px 6.8vw; }
.manifesto .eyebrow { color: #c6a765; }
.manifesto blockquote { font-size: clamp(36px, 4.3vw, 68px); line-height: 1.08; margin: 0; }
.manifesto-copy { align-self: end; font-size: 15px; line-height: 1.75; color: #d9d3c9; }
.text-link { display: inline-block; margin-top: 22px; color: #c6a765; border-bottom: 1px solid #c6a765; padding-bottom: 5px; }

.section { padding: 120px 6.8vw; }
.section-heading { display: grid; grid-template-columns: .8fr 1.7fr 1fr; gap: 6vw; align-items: start; margin-bottom: 66px; }
.section-heading h2 { font-size: clamp(42px, 5.1vw, 76px); line-height: 1.03; margin: 0; }
.section-heading > p:last-child { color: var(--muted); line-height: 1.75; margin: 4px 0 0; }
.practice-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.practice-card { min-height: 330px; padding: 38px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; transition: background .25s; }
.practice-card:hover { background: rgba(255,255,255,.36); }
.practice-card > span { color: var(--gold); font: 500 14px Georgia, serif; }
.practice-card h3 { font: 400 clamp(28px, 3vw, 44px)/1.1 Georgia, serif; margin: 58px 0 18px; }
.practice-card p { color: var(--muted); line-height: 1.7; max-width: 570px; margin: 0 0 30px; }
.practice-card a { color: var(--gold-dark); margin-top: auto; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.practice-card a b { margin-left: 14px; }

.method { background: #ddd4c6; }
.method-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(30,29,26,.28); }
.method-list li { display: grid; grid-template-columns: 1fr 2fr 2fr; gap: 3vw; border-bottom: 1px solid rgba(30,29,26,.28); padding: 30px 0; align-items: start; }
.method-list li > span { color: var(--gold-dark); }
.method-list h3 { font: 400 29px Georgia, serif; margin: 0 0 8px; }
.method-list p { margin: 0; color: #5e594f; line-height: 1.6; max-width: 630px; }
.insights { background: var(--ivory-light); }
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.insight-card { padding: 30px 28px; min-height: 290px; border-right: 1px solid var(--line); display: flex; flex-direction: column; transition: .25s; }
.insight-card:hover { background: var(--ivory); }
.insight-card > span { color: var(--gold-dark); text-transform: uppercase; font-size: 11px; letter-spacing: .14em; }
.insight-card h3 { font: 400 29px/1.18 Georgia, serif; margin: 48px 0 20px; }
.insight-card b { margin-top: auto; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--gold-dark); }

.contact-band { background: var(--gold-dark); color: var(--ivory-light); padding: 100px 6.8vw; }
.contact-band .eyebrow { color: #e1cfaa; }
.contact-band h2 { font-size: clamp(42px, 5.5vw, 80px); line-height: 1.02; max-width: 1050px; margin: 20px 0; }
.contact-band > p:not(.eyebrow) { font-size: 17px; margin-bottom: 38px; }
.light-button { border-color: var(--ivory-light); color: var(--ivory-light); }
.light-button:hover, .light-button:focus-visible { background: var(--ivory-light); color: var(--gold-dark); }
.contact-band.slim h2 { font-size: clamp(38px, 4.5vw, 66px); }

.site-footer { background: var(--black); color: #d8d1c6; padding: 60px 6.8vw; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4vw; font-size: 13px; line-height: 1.7; }
.footer-brand { display: flex; align-items: center; gap: 20px; }
.footer-brand strong { color: var(--ivory-light); text-transform: uppercase; letter-spacing: .12em; }
.footer-brand p, .site-footer p { margin: 3px 0; }
.site-footer a { color: #c6a765; }
.footer-legal { text-align: right; }

.inner-hero { min-height: 560px; padding: 110px 6.8vw 90px; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.inner-hero h1 { font-size: clamp(56px, 7.5vw, 112px); line-height: .98; max-width: 1080px; margin: 28px 0; position: relative; z-index: 2; }
.inner-hero > p:last-of-type { font-size: 19px; line-height: 1.65; max-width: 720px; position: relative; z-index: 2; }
.inner-mark { position: absolute; right: 2vw; top: 50px; font: 400 330px/.9 Georgia, serif; color: rgba(167,134,73,.1); letter-spacing: -.16em; }
.prose-section { padding: 96px 6.8vw; display: grid; grid-template-columns: 1fr 2.2fr; gap: 7vw; }
.prose-section aside { color: var(--gold-dark); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 700; }
.prose { max-width: 900px; }
.prose h2 { font: 400 clamp(34px, 4vw, 58px)/1.06 Georgia, serif; margin: 0 0 30px; }
.prose h3 { font: 400 30px/1.2 Georgia, serif; margin: 54px 0 16px; }
.prose p, .prose li { color: #58534a; line-height: 1.85; font-size: 17px; }
.prose ul { padding-left: 20px; }
.notice { border-left: 3px solid var(--gold); padding: 20px 24px; background: rgba(255,255,255,.35); margin: 34px 0; }
.notice p { margin: 0; }
.content-list { border-top: 1px solid var(--line); }
.content-row { display: grid; grid-template-columns: .7fr 2fr auto; gap: 30px; padding: 32px 0; border-bottom: 1px solid var(--line); align-items: center; }
.content-row span { color: var(--gold-dark); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.content-row h2 { font: 400 30px/1.2 Georgia, serif; margin: 0; }
.content-row b { color: var(--gold-dark); }

.contact-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 40px; }
.contact-option { padding: 30px; border: 1px solid var(--line); }
.contact-option h3 { margin-top: 0; }
.contact-option a { color: var(--gold-dark); font-weight: 700; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 700; }
.form-field input, .form-field select, .form-field textarea { background: rgba(255,255,255,.42); border: 1px solid var(--taupe); padding: 14px; color: var(--graphite); font: inherit; border-radius: 0; }
.form-field textarea { min-height: 130px; resize: vertical; }
.form-submit { margin-top: 24px; background: var(--gold-dark); color: white; border: 0; padding: 18px 28px; cursor: pointer; font-weight: 700; }
.form-result { margin-top: 28px; padding: 24px; border: 1px solid var(--gold); background: var(--ivory-light); white-space: pre-wrap; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .6s both; }
  .hero-copy > *:nth-child(2) { animation-delay: .08s; }
  .hero-copy > *:nth-child(3) { animation-delay: .16s; }
  .hero-copy > *:nth-child(4) { animation-delay: .24s; }
  .hero-copy > *:nth-child(5) { animation-delay: .32s; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } }
}

@media (max-width: 980px) {
  .site-header { height: auto; min-height: 86px; }
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { padding-top: 90px; }
  .monogram-art { min-height: 360px; border-left: 0; border-top: 1px solid var(--line); }
  .monogram-art b { top: 18%; left: 31%; }
  .manifesto, .section-heading { grid-template-columns: 1fr; }
  .manifesto { gap: 35px; }
  .section-heading { gap: 18px; }
  .site-footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .site-header { padding: 14px 20px; }
  .brand { gap: 12px; font-size: 11px; }
  .brand-divider { height: 36px; }
  .brand-monogram { font-size: 36px; }
  .hero-copy { padding: 70px 22px; }
  .hero h1 { font-size: 50px; }
  .credential { flex-wrap: wrap; }
  .outline-button, .light-button { min-width: 0; width: 100%; }
  .section, .manifesto, .contact-band, .prose-section { padding: 76px 22px; }
  .practice-grid, .insight-grid, .contact-options, .form-grid { grid-template-columns: 1fr; }
  .method-list li, .content-row { grid-template-columns: 1fr; gap: 12px; }
  .prose-section { grid-template-columns: 1fr; gap: 24px; }
  .site-footer { grid-template-columns: 1fr; padding: 50px 22px; }
  .footer-legal { text-align: left; }
  .inner-hero { min-height: 480px; padding: 80px 22px 60px; }
  .inner-hero h1 { font-size: 55px; }
  .inner-mark { font-size: 210px; right: -40px; top: 140px; }
}