.director-message { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); padding-block: clamp(5.5rem, 10vw, 10rem); overflow: hidden; background: #f1ece2; color: var(--color-primary); }
.director-message::before { position: absolute; top: 0; right: 7%; width: 30rem; height: 30rem; border: 1px solid rgba(198,166,103,.2); border-radius: 50%; content: ""; transform: translateY(-63%); }
.director-message__layout { display: grid; grid-template-columns: minmax(18rem, .78fr) minmax(0, 1.15fr); align-items: center; gap: clamp(3rem, 9vw, 11rem); }
.director-message__portrait { position: relative; margin: 0; }
.director-message__portrait::before { position: absolute; z-index: 0; top: 2.5rem; right: -1.8rem; bottom: -2.5rem; left: 2.5rem; border: 1px solid rgba(198,166,103,.65); content: ""; }
.director-message__portrait-frame { position: relative; z-index: 1; overflow: hidden; background: #dcd8d0; box-shadow: 1.5rem 2.2rem 4.5rem rgba(20,40,32,.15); }
.director-message__portrait-frame::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(18,39,31,.38)); content: ""; pointer-events: none; }
.director-message__portrait img { width: 100%; aspect-ratio: .77; object-fit: cover; object-position: center top; filter: saturate(.88) contrast(1.02); }
.director-message__portrait figcaption { position: relative; z-index: 2; display: grid; gap: .35rem; width: min(19rem, 85%); margin: -3.6rem 0 0 auto; padding: 1.2rem 1.35rem; background: var(--color-primary); color: var(--color-surface); }
.director-message__portrait figcaption span, .director-message__portrait figcaption strong { font-family: var(--font-accent); }.director-message__portrait figcaption span { color: var(--color-secondary); font-size: .65rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }.director-message__portrait figcaption strong { font-size: .78rem; font-weight: 500; }
.director-message__eyebrow { display: flex; align-items: center; gap: .75rem; margin: 0 0 2.5rem; color: var(--color-secondary-strong); font: 700 var(--font-size-xs)/1 var(--font-accent); letter-spacing: .18em; text-transform: uppercase; }.director-message__eyebrow::before { width: 2.8rem; height: 1px; background: currentColor; content: ""; }
.director-message__kicker { margin: 0 0 .8rem; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.director-message h2 { max-width: 43rem; margin: 0; font: 600 clamp(3.25rem, 5.8vw, 6.5rem)/.87 var(--font-heading); letter-spacing: -.05em; }.director-message h2 em { color: var(--color-secondary-strong); font-weight: 500; }
.director-message blockquote { max-width: 40rem; margin: clamp(2rem, 4vw, 3.5rem) 0 1.6rem; color: var(--color-primary); font: 500 clamp(1.55rem, 2.35vw, 2.35rem)/1.15 var(--font-heading); letter-spacing: -.02em; }
.director-message__copy { display: grid; gap: .9rem; max-width: 39rem; color: var(--color-text-muted); line-height: 1.75; }.director-message__copy p { margin: 0; }
.director-message__signature { display: flex; align-items: center; gap: 1rem; margin-top: 2.2rem; }.director-message__signature-mark { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid rgba(198,166,103,.72); border-radius: 50%; color: var(--color-secondary-strong); font: italic 1.8rem var(--font-heading); }.director-message__signature p { display: grid; gap: .28rem; margin: 0; }.director-message__signature strong { font-size: var(--font-size-sm); }.director-message__signature p span { color: var(--color-text-muted); font-size: .73rem; }
@media (max-width: 820px) { .director-message__layout { grid-template-columns: minmax(0, 31rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }.director-message__portrait::before { right: -1rem; left: 1rem; } }
@media (max-width: 650px) { .director-message__layout { grid-template-columns: 1fr; }.director-message__portrait { width: min(82%, 25rem); }.director-message__portrait img { aspect-ratio: .78; }.director-message__portrait::before { top: 1.25rem; right: -1.25rem; bottom: -1.25rem; left: 1.25rem; }.director-message__eyebrow { margin-top: 2rem; margin-bottom: 1.5rem; }.director-message h2 { font-size: clamp(3.2rem, 15vw, 5rem); }.director-message blockquote { font-size: 1.7rem; } }