/* HOME: Intro + portrait, then the original research section. */
.hero { position: relative; padding-block: clamp(4rem, 7vw, 7rem) 6rem; min-height: min(780px, calc(100svh - 90px)); }
.hero-copy { display: flex; flex-direction: column; }
.hero::before { content: ''; position: absolute; z-index: -1; inset: 2rem -2rem 2rem 55%; opacity: .27; background-image: radial-gradient(var(--accent) .8px, transparent .8px); background-size: 23px 23px; mask-image: radial-gradient(ellipse, black, transparent 70%); animation: atmosphere 18s ease-in-out infinite alternate; }
.hero-copy .eyebrow { display: flex; gap: .8rem; align-items: center; white-space: nowrap; flex-shrink: 0; }
.hero-eyebrow > span:first-child { flex: 0 0 auto; }
.hero-eyebrow .rule { min-width: 0; height: 1px; background: var(--accent); flex: 1 1 0; }
.hero h1 { margin-top: 1.6rem; max-width: 8ch; }
.intro { margin-top: 1.65rem; color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.8; }
.contact-block { margin-top: auto; padding-top: 2.3rem; }
.contact-block .eyebrow { margin-bottom: .8rem; }
.portrait-composition { position: relative; width: 100%; display: flex; flex-direction: column; }
.portrait-frame { position: relative; flex: 1; min-height: 20rem; overflow: hidden; border-radius: var(--radius); background: #dbdcd4; }
.portrait-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transition: transform 1s var(--ease); }
.portrait-frame:hover img { transform: scale(1.035); }
.portrait-corner { position: absolute; inset: 1.1rem 1rem 3.9rem; border: 1px solid #d0af7877; border-radius: var(--radius-small); pointer-events: none; }
.portrait-composition figcaption { margin-top: 1.5rem; display: flex; justify-content: center; gap: .75rem; color: var(--subtle); font-size: .75rem; letter-spacing: .02em; }
.portrait-composition figcaption span:first-child { color: var(--accent); }
.section-cue { position: absolute; bottom: 1.2rem; left: 0; display: flex; align-items: center; gap: 1.6rem; color: var(--subtle); font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; }
.section-cue span:last-child { font-size: 1.3rem; color: var(--accent); }
.research { padding-top: 3.5rem; }
.research-image { position: relative; min-height: 24rem; overflow: hidden; border-radius: var(--radius); }
.research-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.research-image::after { content: ''; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent, #091016e8); }
.research-image figcaption { position: absolute; z-index: 1; inset: auto 2rem 2rem; font: 2.25rem/1.2 var(--font-display); letter-spacing: -.02em; }
.research-image figcaption em { color: var(--accent-bright); }
.research-copy h2 { margin: 1rem 0 1.8rem; }
.research-copy .button { margin-top: 2rem; }

/* Breakpoint: swap to one column when the portrait + prose need more room. */
@media (max-width: 900px) {
  .hero { padding-top: 3rem; }
  .hero h1 { max-width: 12ch; }
  .portrait-composition { order: -1; }
  .portrait-frame { flex: auto; min-height: 0; aspect-ratio: 1 / 1.05; }
  .hero::before { inset: 40% 0 0; }
  .research-image { min-height: 0; aspect-ratio: 4/3; }
}
@media (max-width: 450px) { .research-image figcaption { inset-inline: 1.4rem; font-size: 1.9rem; } }
@media (max-width: 450px) {
  .hero-copy .hero-eyebrow { font-size: clamp(.625rem, 2.8vw, .75rem); letter-spacing: .08em; gap: .5rem; }
}