:root {
  --ink:#172c3b;
  --muted:#53606a;
  --gold:#84672e;
  --ivory:#f8f5ee;
  --paper:#fffcf7;
  --line:#d8d2c7;
  --serif:Georgia,'Times New Roman',serif;
  --sans:Arial,Helvetica,sans-serif}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7}
a {
  color:inherit;
  text-underline-offset:5px}
button {
  font:inherit}
a,button {
  -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,main:focus-visible {
  outline:3px solid #9b742c;
  outline-offset:5px}
a:hover {
  color:var(--gold)}
.container {
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto}
.skip-link {
  position:absolute;
  top:-100px;
  left:20px;
  padding:12px 20px;
  background:var(--ink);
  color:white;
  z-index:10}
.skip-link:focus {
  top:10px}
.site-header {
  background:var(--paper);
  border-bottom:1px solid var(--line)}
.header-inner {
  min-height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px}
.identity {
  font-family:var(--serif);
  font-size:23px;
  line-height:1.35;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:15px;
  flex-shrink:0}
.identity small {
  font-family:var(--sans);
  font-size:9px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  display:block;
  margin-top:7px}
.monogram {
  font-size:28px;
  border:1px solid #a88d59;
  border-radius:50%;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  color:var(--gold)}
nav {
  display:flex;
  gap:24px;
  align-items:center}
nav a {
  font-size:12px;
  text-decoration:none;
  white-space:nowrap}
.nav-contact {
  border:1px solid var(--line);
  padding:10px 16px}
.nav-contact span {
  margin-left:12px}
.menu-toggle {
  background:transparent;
  border:1px solid var(--line);
  padding:8px 13px;
  color:var(--ink)}
.hero {
  background:var(--ivory);
  padding-top:48px}
.hero-grid {
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  align-items:center;
  gap:35px}
.eyebrow {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:2.4px;
  font-weight:700;
  color:var(--gold);
  margin:0 0 24px}
h1,h2,h3,p,figure {
  margin-top:0}
h1,h2 {
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-1.5px;
  line-height:1.13}
h1 {
  font-size:clamp(40px,3.7vw,55px);
  margin-bottom:26px}
h1 em,h2 em {
  font-weight:400;
  color:var(--gold)}
h2 {
  font-size:clamp(33px,3vw,44px);
  margin-bottom:20px}
h3 {
  font-family:var(--serif);
  font-weight:400;
  font-size:26px;
  line-height:1.3;
  margin-bottom:12px}
.intro {
  font-size:16px;
  color:var(--muted);
  max-width:470px}
.hero-art {
  margin:0;
  min-width:0}
.hero-art img {
  display:block;
  width:100%;
  height:auto;
  object-fit:contain}
.actions {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  margin-top:30px}
.button {
  background:var(--ink);
  color:white;
  text-decoration:none;
  padding:13px 20px;
  font-size:12px;
  letter-spacing:.3px}
.button span {
  margin-left:22px}
.button:hover {
  background:#294659;
  color:white}
.text-link {
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid #a08b62;
  padding-bottom:4px}
.text-link span {
  margin-left:10px}
.hero-foot {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-block:24px;
  margin-top:45px;
  border-top:1px solid var(--line);
  font-size:10px;
  letter-spacing:1.1px;
  text-transform:uppercase}
.section {
  padding-block:95px}
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px}
.prose {
  max-width:580px}
.prose p {
  color:var(--muted);
  font-size:15px}
.prose .lead {
  color:var(--ink);
  font-family:var(--serif);
  font-size:24px;
  line-height:1.5;
  margin-bottom:20px}
.practice {
  background:#eeece5}
.section-heading {
  display:flex;
  justify-content:space-between;
  gap:60px;
  align-items:flex-end;
  margin-bottom:40px}
.section-heading>p {
  max-width:320px;
  font-size:14px;
  color:var(--muted)}
.practice-list {
  border-top:1px solid #c8c3b8}
.practice-list article {
  display:grid;
  grid-template-columns:60px 1fr 48px;
  gap:30px;
  padding:28px 0;
  border-bottom:1px solid #c8c3b8;
  align-items:start}
.number {
  font-family:var(--serif);
  font-size:18px;
  color:var(--gold);
  padding-top:4px}
.practice-list h3 {
  font-size:25px;
  margin-bottom:7px}
.practice-list p {
  font-size:14px;
  color:var(--muted);
  margin:0;
  max-width:760px}
.practice-list a {
  width:44px;
  height:44px;
  border:1px solid #b8b0a0;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-decoration:none;
  font-size:22px}
.practice-list a:hover {
  background:var(--ink);
  color:white}
.editorial-note {
  font-size:13px!important;
  border-left:2px solid #a38c5e;
  padding-left:18px;
  line-height:1.7}
.editorial-note strong {
  display:block;
  font-weight:600;
  color:var(--ink);
  margin-bottom:4px}
.ideas {
  background:var(--ivory);
  border-block:1px solid var(--line)}
.ideas-panel {
  display:flex;
  gap:30px;
  border-top:1px solid var(--line);
  padding-top:32px;
  max-width:850px}
.large-quote {
  font-family:var(--serif);
  font-size:100px;
  color:var(--gold);
  line-height:1}
.ideas-panel p {
  color:var(--muted)}
.contact {
  background:var(--ink);
  color:#faf6ed}
.contact .eyebrow,.contact h2 em {
  color:#d7bd85}
.contact p {
  color:#d1d6d7;
  font-size:15px}
.contact-details {
  padding-top:10px}
.contact-note {
  border-top:1px solid #61707a;
  margin-top:28px;
  padding-top:22px}
.contact-note strong {
  font-size:14px;
  color:#e5d2ad}
.contact-note p {
  font-size:13px;
  margin-top:8px}
.site-footer {
  padding-block:35px}
.footer-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px}
.footer-inner .identity {
  display:block;
  font-size:20px}
.footer-inner .identity small {
  letter-spacing:1px;
  font-size:8px}
.footer-inner p,.footer-inner>a {
  font-size:11px;
  margin:0}
.footer-inner>a {
  text-decoration:none}
@media(min-width:1500px) {
  .hero-grid {
    gap:50px}
}
@media(max-width:1150px) {
  .container {
    width:calc(100% - 64px)}
  nav {
    gap:14px}
  .identity {
    font-size:20px}
  .monogram {
    display:none}
  .split {
    gap:55px}
  .hero-grid {
    gap:24px}
  h1 {
    font-size:42px}
  .hero-foot {
    letter-spacing:.6px;
    font-size:9px}
}
@media(max-width:900px) {
  .header-inner {
    min-height:90px;
    flex-wrap:wrap;
    padding-block:20px;
    gap:20px}
  .menu-toggle:not([hidden]) {
    display:block}
  nav {
    width:100%;
    flex-wrap:wrap;
    gap:12px 26px;
    padding-bottom:10px}
  nav a {
    font-size:14px}
  nav[hidden] {
    display:none}
  .hero-grid {
    grid-template-columns:1fr 1fr;
    align-items:start}
  h1 {
    font-size:37px}
  .hero-copy .eyebrow {
    font-size:9px;
    letter-spacing:1.5px}
  .hero-art {
    margin-top:35px}
  .intro {
    font-size:14px}
  .section {
    padding-block:70px}
  .split {
    gap:40px}
  .section-heading {
    gap:35px}
  .hero-foot {
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:8px 25px}
  .footer-inner {
    flex-wrap:wrap}
}
@media(max-width:650px) {
  .container {
    width:calc(100% - 40px)}
  .identity {
    font-size:20px}
  .identity small {
    font-size:8px;
    letter-spacing:1px}
  .header-inner {
    gap:18px}
  .hero {
    padding-top:35px}
  .hero-grid {
    grid-template-columns:1fr;
    gap:30px}
  .hero-copy {
    max-width:510px}
  h1 {
    font-size:43px;
    letter-spacing:-1.4px}
  .intro {
    font-size:16px}
  .hero-art {
    margin:0}
  .hero-foot {
    margin-top:30px;
    padding-block:20px;
    display:grid;
    gap:7px;
    font-size:9px}
  .section {
    padding-block:55px}
  .split {
    grid-template-columns:1fr;
    gap:15px}
  h2 {
    font-size:35px}
  .eyebrow {
    margin-bottom:18px}
  .prose .lead {
    font-size:23px}
  .section-heading {
    display:block;
    margin-bottom:30px}
  .section-heading>p {
    max-width:100%}
  .practice-list article {
    grid-template-columns:25px 1fr 36px;
    gap:14px;
    padding-block:24px}
  .practice-list h3 {
    font-size:22px}
  .practice-list a {
    width:34px;
    height:34px;
    font-size:18px}
  .practice-list p {
    font-size:14px}
  .ideas-panel {
    gap:15px}
  .large-quote {
    font-size:70px}
  .footer-inner {
    align-items:flex-start;
    flex-direction:column;
    gap:22px}
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto}
}
.arrow-icon {
  display:inline-block;
  width:16px;
  height:16px;
  vertical-align:middle;
  flex-shrink:0}
.large-quote {
  font-size:48px}

/* Reference-led header and hero. Keep the complete, unmodified artwork in flow. */
.site-header {
  background: #fffefa;
  border: 0;
}
.header-inner {
  width: min(1560px, calc(100% - 8.8%));
  min-height: 110px;
  gap: 30px;
}
.wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  color: #0a1021;
  line-height: 1.08;
}
.wordmark-title {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0 0 5px 3px;
}
.wordmark-name {
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.header-inner nav {
  gap: clamp(15px, 2vw, 36px);
}
.header-inner nav a {
  color: #121c32;
  font-size: 13px;
}
.home-link {
  padding-block: 10px;
  text-decoration: underline;
  text-decoration-color: #8b6a33;
  text-underline-offset: 10px;
  text-decoration-thickness: 2px;
}
.header-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  border-radius: 10px;
  background: #8a6934;
  color: white;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
.header-cta:hover { background: #715326; color: white; }
.hero {
  padding-top: 0;
  background: linear-gradient(105deg, #fffefa 25%, #faf7f1 65%, #f3e9dd);
}
.hero-grid {
  width: min(1680px, 100%);
  grid-template-columns: 44% 56%;
  gap: 0;
  align-items: center;
}
.hero-copy {
  padding: 35px 0 38px 10%;
  position: relative;
  z-index: 1;
}
.hero-copy .eyebrow {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #17213a;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 4px;
  white-space: nowrap;
  margin-bottom: 22px;
}
.hero-copy .eyebrow span { width: 80px; height: 1px; background: #997741; }
.hero h1 {
  color: #080d19;
  font-size: clamp(42px, 4.25vw, 72px);
  line-height: 1.03;
  letter-spacing: -2.7px;
  margin-bottom: 25px;
}
.headline-line { display: block; }
.hero h1 em { color: #87652e; white-space: nowrap; }
.hero .intro {
  color: #26324b;
  font-size: clamp(16px, 1.3vw, 22px);
  letter-spacing: .5px;
  line-height: 1.5;
  max-width: 580px;
  margin-bottom: 24px;
  padding-right: 18px;
}
.hero-location {
  font-size: 10px;
  color: #15203a;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0 0 26px;
}
.hero-location span { margin-inline: 12px; }
.hero .actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 0; }
.hero .button {
  background: #896831;
  border-radius: 40px;
  padding: 15px 26px;
  font-size: 14px;
}
.hero .button:hover { background: #715326; }
.hero .text-link { color: #121c32; font-size: 12px; font-weight: 400; }
.hero .button .arrow-icon { transform: rotate(45deg); width: 20px; height: 20px; }
.hero-art { align-self: end; margin: 0; }
.hero-art img { width: 100%; height: auto; object-fit: contain; }
.hero-credentials { background: #fffefa; }
.hero-foot {
  width: min(1560px, calc(100% - 8.8%));
  margin-top: 0;
  border-top: 0;
  min-height: 130px;
  align-items: center;
  justify-content: flex-start;
  gap: 45px;
  padding-block: 24px;
  color: #17213a;
}
.experience-summary { display: flex; align-items: center; gap: 24px; padding-right: 35px; border-right: 1px solid #b49a71; flex-shrink: 0; }
.experience-years { color: #8a6934; font-family: var(--serif); font-size: 66px; line-height: 1; letter-spacing: -3px; }
.experience-summary > span:last-child { font-size: 9px; line-height: 1.6; letter-spacing: 2px; }
.geography p { font-size: 9px; letter-spacing: 2px; margin: 0 0 10px; }
.geography ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 9px; letter-spacing: 1.8px; }
.geography li:not(:last-child)::after { content: '•'; margin-left: 18px; }
@media (max-width: 1250px) {
  .header-cta { display: none; }
  .hero h1 { font-size: 4.5vw; }
  .hero-copy .eyebrow { font-size: 10px; letter-spacing: 3px; }
  .hero-copy .eyebrow span { width: 45px; }
  .hero-location { letter-spacing: 1.8px; font-size: 9px; }
  .hero-foot { gap: 28px; }
}
@media (max-width: 900px) {
  .header-inner { min-height: 95px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { padding: 40px 0 28px; width: calc(100% - 64px); max-width: 700px; margin-inline: auto; }
  .hero h1 { font-size: clamp(42px, 7.3vw, 65px); }
  .hero .intro { max-width: 620px; font-size: 18px; }
  .hero-art { width: 100%; max-width: 760px; margin-inline: auto; }
  .hero-location { font-size: 10px; }
  .hero-foot { flex-wrap: nowrap; }
  .experience-summary { padding-right: 24px; gap: 15px; }
  .experience-years { font-size: 55px; }
}
@media (max-width: 650px) {
  .wordmark-title { font-size: 10px; letter-spacing: 3px; }
  .wordmark-name { font-size: 29px; }
  .header-inner { width: calc(100% - 40px); }
  .hero-copy { width: calc(100% - 40px); padding-top: 32px; }
  .hero-copy .eyebrow { font-size: 9px; letter-spacing: 2.5px; gap: 15px; }
  .hero h1 { font-size: clamp(31px, 8.1vw, 50px); letter-spacing: -1.4px; line-height: 1.1; }
  .hero .intro { font-size: 16px; padding-right: 0; }
  .hero-location { font-size: 8px; letter-spacing: 1.5px; }
  .hero-location span { margin-inline: 7px; }
  .hero .actions { gap: 20px; }
  .hero .button { font-size: 13px; padding: 14px 22px; }
  .hero-foot { width: calc(100% - 40px); display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding-block: 28px; }
  .experience-summary { border-right: 0; border-bottom: 1px solid #d8cdbb; padding: 0 0 24px; gap: 24px; }
  .geography ul { gap: 10px 12px; line-height: 1.8; }
  .geography li:not(:last-child)::after { margin-left: 12px; }
}
@media (min-width: 1251px) {
  .hero h1 { font-size: clamp(58px, 4.7vw, 79px); }
}

/* Integrated masthead: the artwork sits behind the header and headline.
   The lower portrait is intentionally cropped at the user's request. */
.site-header {
  position: relative;
  z-index: 3;
  background: transparent;
}
body {
  background-color: #fffefa;
}
.hero {
  position: relative;
  isolation: isolate;
  margin-top: -110px;
  padding-top: 110px;
  background: #fffefa;
}
.hero-grid {
  position: relative;
  display: block;
  min-height: clamp(580px, 39vw, 660px);
}
.hero-copy {
  width: 49%;
  padding: 48px 0 38px 4.4%;
  z-index: 2;
}
.hero h1 {
  width: 112%;
  font-size: clamp(50px, 4.9vw, 82px);
  line-height: 1.02;
  text-shadow: 0 0 22px #fffefa, 0 0 10px #fffefa;
}
.hero .intro {
  max-width: 620px;
  font-size: clamp(16px, 1.28vw, 21px);
}
.hero-art {
  position: absolute;
  z-index: 0;
  width: 68%;
  max-width: none;
  right: 0;
  top: -110px;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  /* Only feather the outer edges. Face and interior labels remain opaque. */
  mask-image: linear-gradient(to right, transparent, #000 11%), linear-gradient(to bottom, transparent, #000 12%);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 11%), linear-gradient(to bottom, transparent, #000 12%);
  -webkit-mask-composite: source-in;
}
.hero-art img {
  position: relative;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
}
.hero-credentials {
  position: relative;
  z-index: 2;
  background: #fffefa;
}
@media (min-width: 901px) and (max-width: 1250px) {
  .hero-copy { padding-top: 38px; width: 53%; }
  .hero h1 { font-size: 5vw; width: 108%; }
  .hero-copy .intro { max-width: 440px; padding-right: 30px; }
  .hero-art { width: 68%; }
  .hero-grid { min-height: 530px; }
}
@media (max-width: 900px) {
  .hero { margin-top: -95px; padding-top: 95px; }
  .hero-grid { min-height: 0; }
  .hero-copy { width: calc(100% - 64px); padding: 32px 0 25px; }
  .hero h1 { width: 100%; font-size: clamp(42px, 7.3vw, 65px); }
  .hero .intro { font-size: 18px; }
  .hero-art {
    position: relative;
    width: 100%;
    max-width: 760px;
    top: auto;
    right: auto;
    bottom: auto;
    height: auto;
    aspect-ratio: 1448 / 720;
    margin: 0 auto;
    mask-image: linear-gradient(to bottom, transparent, #000 10%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%);
  }
}
@media (max-width: 650px) {
  .hero-copy { width: calc(100% - 40px); }
  .hero h1 { font-size: clamp(31px, 8.1vw, 50px); line-height: 1.1; }
  .hero .intro { font-size: 16px; }
}
@media (min-width: 901px) {
  .hero-art {
    width: 78%;
    mask-image: linear-gradient(to right, transparent, #000 22%), linear-gradient(to bottom, transparent, #000 13%);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 22%), linear-gradient(to bottom, transparent, #000 13%);
  }
  .hero-copy { padding-top: 65px; }
}
@media (min-width: 901px) {
  .hero-art { height: calc(100% + 110px); }
}
@media (min-width: 901px) and (max-width: 1250px) {
  .hero-art img { position: absolute; top: auto; bottom: 0; }
}
/* Stack the hero at narrow tablet widths before labels or body copy collide. */
@media (min-width: 901px) and (max-width: 1000px) {
  .hero-grid { min-height: 0; }
  .hero-copy { width: calc(100% - 64px); max-width: 700px; margin-inline: auto; padding: 32px 0 25px; }
  .hero h1 { width: 100%; font-size: 65px; }
  .hero .intro { max-width: 620px; font-size: 18px; padding-right: 0; }
  .hero-art {
    position: relative;
    width: 100%;
    max-width: 760px;
    top: auto;
    right: auto;
    bottom: auto;
    height: auto;
    aspect-ratio: 1448 / 720;
    margin-inline: auto;
    mask-image: linear-gradient(to bottom, transparent, #000 10%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%);
  }
  .hero-art img { position: relative; top: 0; bottom: auto; }
}