/* ── ABOUT PAGE ── */

/* ── HERO (sticky; floating cards rise over it — same as services) ── */
.about-hero {
  width:100%; height:100vh; min-height:480px;
  background:var(--bg);
  position:sticky; top:0; left:0; z-index:0;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.about-hero-video {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  display:block; z-index:0;
  opacity:0.82;
}
.about-hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,
    rgba(240,238,234,0.35) 0%, rgba(240,238,234,0.05) 50%, transparent 70%);
}
.about-hero-text { position:relative; z-index:2; padding:48px 80px; text-align:center; }
.about-hero-quote {
  font-family:'Montserrat','Assistant',sans-serif;
  font-size:56px; font-weight:300;
  text-transform:uppercase; letter-spacing:0.08em;
  color:rgba(58,46,34,0.82); line-height:1.35; max-width:800px;
  text-shadow:0 1px 24px rgba(240,238,234,0.55);
}

/* ── FLOW — transparent; hero peeks between floating cards ── */
.about-flow {
  position:relative; z-index:1; background:transparent;
  padding:24px 0 0;
}

/* ── FLOATING CARD ── */
.about-block {
  width:calc(100% - 28px); max-width:1100px; margin:0 auto 24px;
  background:var(--bg);
  box-shadow:0 18px 44px rgba(58,46,34,0.16);
  padding:88px 64px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  opacity:0; transition:opacity 0.9s ease;
}
.about-block.visible { opacity:1; }
body.reduce-motion .about-block { opacity:1; }

/* section label (About / The Studio / Principles) */
.about-block .section-label {
  font-size:8.5px; letter-spacing:0.26em; text-transform:uppercase;
  color:#7a6a55; opacity:0.60; margin-bottom:24px;
}

/* ── CARD 1 — NAME + TITLE + PORTRAIT + BIO ── */
.intro-name-row {
  display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:32px;
}
.intro-name {
  font-family:'Montserrat','Assistant',sans-serif; font-size:42px; font-weight:300;
  color:#3a2e22; line-height:1.15; letter-spacing:0.06em;
  text-transform:uppercase; margin:0;
}
.intro-title {
  font-size:17px; letter-spacing:0.18em; text-transform:uppercase;
  color:#7a6a55; opacity:0.70; line-height:1.8; margin:0;
}
.portrait-img {
  width:180px; height:180px; margin-bottom:40px; display:block;
  object-fit:cover; object-position:center top;
  border-radius:50%; filter:grayscale(1); mix-blend-mode:multiply;
}
.intro-text {
  max-width:720px;
  font-size:13.5px; line-height:1.95; color:#5a4e40; letter-spacing:0.025em; opacity:0.85;
  text-align:center;
}
.intro-text strong, .studio-body strong { color:#3a2e22; font-weight:500; opacity:1; }
.intro-text p + p { margin-top:22px; }

/* ── CARD 2 + 3 — TITLE + FLOATING IMAGE + BODY ── */
.studio-title {
  font-family:'Montserrat','Assistant',sans-serif; font-size:28px; font-weight:300;
  color:#3a2e22; margin-bottom:36px; line-height:1.3; letter-spacing:0.04em;
}
.about-media {
  width:100%; max-width:680px; margin:0 auto 40px;
  aspect-ratio:16/9; overflow:hidden;
  background:#e8e4dc; box-shadow:0 16px 40px rgba(58,46,34,0.16);
}
.about-media img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── PRINCIPLE CARD (one principle per floating card) ── */
.principle-card .value-name {
  font-family:'Montserrat','Assistant',sans-serif;
  font-size:22px; font-weight:300; letter-spacing:0.10em; text-transform:uppercase;
  color:#3a2e22; opacity:1; margin:8px 0 14px;
}
.principle-card .value-desc {
  font-size:13.5px; line-height:1.9; color:#5a4e40; opacity:0.82; letter-spacing:0.025em;
  max-width:520px;
}
.principle-card .section-label { margin-bottom:28px; }
.studio-body {
  max-width:720px;
  font-size:13.5px; line-height:1.95; color:#5a4e40; letter-spacing:0.025em; opacity:0.85;
  text-align:center;
}
.studio-body p + p { margin-top:22px; }

/* ── PRINCIPLES ── */
.studio-values { width:100%; max-width:620px; }
.value-item { padding:24px 0; border-bottom:0.5px solid rgba(74,56,40,0.10); }
.value-item:first-of-type { border-top:0.5px solid rgba(74,56,40,0.10); }
.value-name { font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:#4a3828; opacity:0.80; margin-bottom:5px; text-align:center; }
.value-desc { font-size:11.5px; line-height:1.7; color:#7a6a55; opacity:0.80; text-align:center; }

/* ── WHY WORK WITH US — card grid, same look as home principles ── */
.why-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
  width:100%; max-width:760px; margin-top:8px;
}
.why-item {
  background:rgba(74,56,40,0.04);
  padding:30px 26px; text-align:center;
}
.why-name {
  font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:#4a3828; margin-bottom:10px;
}
.why-desc {
  font-size:11.5px; line-height:1.8; color:#7a6a55; opacity:0.85;
}
@media (max-width:640px) {
  .why-grid { grid-template-columns:1fr; gap:12px; }
}

/* ── CTA ── */
.about-cta {
  width:calc(100% - 28px); max-width:1100px; margin:0 auto;
  text-align:center; padding:64px 64px 40px;
}
.cta-text { font-family:'Montserrat','Assistant',sans-serif; font-size:26px; font-weight:300; font-style:italic; color:#3a2e22; opacity:0.75; margin-bottom:32px; line-height:1.4; }
.cta-btn {
  display:inline-block; font-size:9.5px; letter-spacing:0.22em; text-transform:uppercase;
  color:#4a3828; text-decoration:none;
  border:0.7px solid rgba(74,56,40,0.50); padding:13px 36px; border-radius:30px; transition:background 0.35s;
}
.cta-btn:hover { background:rgba(74,56,40,0.08); }

/* ── MOBILE ── */
@media (max-width:767px) {
  .about-hero { height:100vh; min-height:0; }
  .about-hero-text { padding:32px 24px; }
  .about-hero-quote { font-size:28px; }
  .about-flow { padding:14px 0 0; }
  .about-block { padding:52px 24px; margin-bottom:14px; }
  .intro-name { font-size:32px; }
  .intro-title { font-size:14px; }
  .portrait-img { width:140px; height:140px; margin-bottom:32px; }
  .studio-title { font-size:23px; }
  .about-media { margin-bottom:32px; }
  .about-cta { padding:44px 24px 30px; }
  .cta-text { font-size:21px; }
}
@media (min-width:768px) and (orientation:landscape) {
  .about-hero-quote { font-size:56px; white-space:nowrap; max-width:none; }
  .intro-name { font-size:52px; }
  .intro-title { font-size:21px; }
  .intro-text, .studio-body { font-size:14.5px; }
}