.about-hero { padding:8.4rem 3.5rem 5rem; min-height:88vh; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,0.95fr); gap:5rem; align-items:center; border-bottom:1px solid var(--border); }
.eyebrow { font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); margin-bottom:0.9rem; display:flex; align-items:center; gap:0.8rem; }
.eyebrow::before { content:''; display:block; width:2rem; height:1px; background:var(--accent); }
.hero-title { font-family:'Cormorant Garamond',serif; font-size:clamp(3.2rem,7vw,7rem); font-weight:300; line-height:0.9; letter-spacing:-0.03em; max-width:760px; }
.hero-lead { margin-top:2rem; max-width:620px; font-size:clamp(1.05rem,1.5vw,1.35rem); line-height:1.75; color:var(--muted); }
.hero-actions { display:flex; gap:0.8rem; flex-wrap:wrap; margin-top:2.2rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:0.85rem 1.45rem; text-decoration:none; border:1px solid var(--ink); font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase; transition:all 0.25s; }
.btn-primary { background:var(--ink); color:#fff; }
.btn-primary:hover { background:var(--accent); border-color:var(--accent); }
.btn-ghost { background:transparent; color:var(--ink); }
.btn-ghost:hover { background:var(--ink); color:#fff; }
.portrait-frame { position:relative; }
.portrait { min-height:560px; background:linear-gradient(135deg,#e9e4dc 0%,#c8b89a 48%,#2b241c 100%); position:relative; overflow:hidden; }
.portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.portrait-note { position:absolute; left:-2rem; bottom:2rem; background:var(--bg); padding:1.2rem 1.4rem; max-width:260px; border:1px solid var(--border); box-shadow:0 18px 45px rgba(26,23,20,0.08); }
.portrait-note p:first-child { font-family:'Cormorant Garamond',serif; font-size:1.45rem; color:var(--ink); margin-bottom:0.3rem; }
.portrait-note p:last-child { font-size:0.78rem; color:var(--muted); line-height:1.55; }

section { padding:5.5rem 3.5rem; }
.section-grid { display:grid; grid-template-columns:0.8fr 1.2fr; gap:5rem; align-items:start; }
.section-grid > * { min-width:0; }
.section-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2.4rem,4.3vw,4.6rem); font-weight:300; line-height:1; }
.text-block { max-width:790px; }
.text-block p { font-size:1rem; line-height:1.9; color:var(--muted); margin-bottom:1.2rem; }
.quote { margin-top:2rem; padding-left:1.5rem; border-left:1px solid var(--accent); font-family:'Cormorant Garamond',serif; font-size:clamp(1.6rem,2.6vw,2.6rem); line-height:1.25; color:var(--ink); }
.surface { background:var(--surface); }
.values { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); margin-top:3rem; }
.value-card { background:var(--bg); padding:2rem; min-height:220px; }
.value-num { font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:1.5rem; }
.value-card h3 { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:300; margin-bottom:0.8rem; }
.value-card p { color:var(--muted); line-height:1.75; font-size:0.95rem; }
.timeline { border-top:1px solid var(--border); }
.timeline-item { display:grid; grid-template-columns:180px 1fr; gap:2rem; padding:1.6rem 0; border-bottom:1px solid var(--border); }
.timeline-year { font-size:0.76rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); }
.timeline-title { font-family:'Cormorant Garamond',serif; font-size:1.55rem; margin-bottom:0.35rem; }
.timeline-text { color:var(--muted); line-height:1.7; }
.studio-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:3rem; }
.studio-img { height:260px; background:linear-gradient(135deg,#3d4a2a,#1e2d14,#4a5c30); position:relative; overflow:hidden; }
.studio-img:nth-child(2) { background:linear-gradient(135deg,#4a3520,#2a1e0e,#5c4025); transform:translateY(2rem); }
.studio-img:nth-child(3) { background:linear-gradient(135deg,#1e2a3d,#0e1820,#253548); }
.studio-img:nth-child(4) { background:linear-gradient(135deg,#3d2020,#2a1414,#4d2a2a); transform:translateY(2rem); }
.studio-img::after { content:''; position:absolute; inset:1rem; border:1px solid rgba(255,255,255,0.18); }
.cta { background:var(--ink); color:#fff; display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center; }
.cta .eyebrow { color:var(--accent-light); }
.cta .eyebrow::before { background:var(--accent-light); }
.cta h2 { font-family:'Cormorant Garamond',serif; font-size:clamp(2.3rem,4vw,4.5rem); font-weight:300; line-height:1; max-width:800px; }
.cta p { margin-top:1.2rem; max-width:620px; color:rgba(255,255,255,0.55); line-height:1.8; }
.cta .btn { border-color:rgba(255,255,255,0.5); color:#fff; }
.cta .btn:hover { background:#fff; color:var(--ink); border-color:#fff; }

@media (max-width:980px) {
  .about-hero, section { padding-left:1.2rem; padding-right:1.2rem; }
  .about-hero { grid-template-columns:1fr; gap:3rem; padding-top:7rem; min-height:auto; }
  .portrait { min-height:440px; }
  .portrait-note { left:1rem; bottom:1rem; }
  .section-grid { grid-template-columns:1fr; gap:2rem; }
  .values { grid-template-columns:1fr; }
  .studio-grid { grid-template-columns:repeat(2,1fr); }
  .studio-img:nth-child(2), .studio-img:nth-child(4) { transform:none; }
  .cta { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .timeline-item { grid-template-columns:1fr; gap:0.6rem; }
  .studio-grid { grid-template-columns:1fr; }
  .hero-actions { flex-direction:column; align-items:stretch; }
}
