.emma-about { background: #fff; color: #403947; }
.emma-about-hero { position: relative; display: flex; min-height: clamp(500px, 72vh, 680px); align-items: flex-end; overflow: hidden; background: #3f2b50 var(--emma-about-hero) center 56% / cover no-repeat; }
.emma-about-hero::before { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30,18,43,.84) 0%, rgba(42,25,57,.58) 46%, rgba(25,16,32,.12) 78%); content: ""; }
.emma-about-hero__inner { position: relative; z-index: 1; padding-top: 68px; padding-bottom: 70px; color: #fff; }
.emma-about-hero__inner nav { display: flex; gap: 9px; margin-bottom: 80px; color: rgba(255,255,255,.7); font-size: 10px; font-weight: 800; }
.emma-about-hero__inner nav a:hover { color: #ffd33d; }
.emma-about-kicker { color: #ffd33d; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.emma-about-hero h1 { max-width: 650px; margin: 8px 0 10px; font-family: "Zilla Slab", Georgia, serif; font-size: 68px; font-weight: 800; line-height: 1; letter-spacing: 0; }
.emma-about-hero p { max-width: 560px; margin: 0 0 24px; color: rgba(255,255,255,.86); font-size: 16px; line-height: 1.6; }
.emma-about-hero__inner > a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 17px; border-radius: 7px; background: #ffd33d; color: #352642; font-size: 11px; font-weight: 900; }
.emma-about-intro { padding: 72px 0 0; background: #fff; }
.emma-about-intro__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: start; }
.emma-about-intro h2, .emma-about-projects h2, .emma-about-location h2 { margin: 10px 0 0; color: #322c38; font-family: "Zilla Slab", Georgia, serif; font-size: 37px; font-weight: 800; line-height: 1.12; letter-spacing: 0; }
.emma-about-intro__copy { color: #625b68; font-size: 15px; line-height: 1.8; }
.emma-about-intro__copy p { margin: 0 0 18px; }
.emma-about-intro__copy strong { color: #5b3890; }
.emma-about-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 55px; border-top: 1px solid #e7e1eb; border-bottom: 1px solid #e7e1eb; }
.emma-about-stats > div { padding: 27px 30px; border-right: 1px solid #e7e1eb; }
.emma-about-stats > div:first-child { padding-left: 0; }
.emma-about-stats > div:last-child { border-right: 0; }
.emma-about-stats strong, .emma-about-stats span { display: block; }
.emma-about-stats strong { color: #6844a4; font-family: "Zilla Slab", Georgia, serif; font-size: 29px; }
.emma-about-stats span { margin-top: 3px; color: #817988; font-size: 11px; }
.emma-about-projects { padding: 76px 0; background: #f7f4f9; }
.emma-about-projects header { max-width: 700px; }
.emma-about-projects header > p { margin: 12px 0 0; color: #716a77; font-size: 13px; }
.emma-about-projects__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.emma-about-projects__grid > a { --project-color: #6948bd; --project-soft: #f3eefb; display: flex; min-height: 310px; flex-direction: column; padding: 18px 25px 25px; border: 1px solid #dfd8e5; border-top: 4px solid var(--project-color); border-radius: 7px; background: #fff; transition: transform .2s, border-color .2s, box-shadow .2s; }
.emma-about-projects__grid > a.project--daruri-alese { --project-color: #c48338; --project-soft: #3b2c24; }
.emma-about-projects__grid > a.project--daruri-crestine { --project-color: #b68a42; --project-soft: #faf7f1; }
.emma-about-projects__grid > a.project--emmatoys { --project-color: #6948bd; --project-soft: #f3eefb; }
.emma-about-projects__grid > a:hover { border-color: var(--project-color); box-shadow: 0 14px 30px rgba(62,43,94,.08); transform: translateY(-3px); }
.emma-about-projects__logo { display: flex; height: 94px; align-items: center; justify-content: center; margin: 0 -7px 18px; padding: 14px 20px; border-radius: 6px; background: var(--project-soft); }
.emma-about-projects__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.project--daruri-alese .emma-about-projects__logo img { max-width: 86px; }
.project--daruri-crestine .emma-about-projects__logo img { max-width: 285px; }
.project--emmatoys .emma-about-projects__logo img { max-width: 175px; }
.emma-about-projects__grid h3 { margin: 8px 0 13px; color: #332d39; font-family: "Zilla Slab", Georgia, serif; font-size: 25px; }
.emma-about-projects__grid p { margin: 0 0 22px; color: #6f6875; font-size: 12px; line-height: 1.65; }
.emma-about-projects__grid b { margin-top: auto; color: var(--project-color); font-size: 11px; }
.emma-about-emma { padding: 82px 0; background: #6948bd; color: #fff; text-align: center; }
.emma-about-emma .emma-home-container { max-width: 790px; }
.emma-about-emma span { color: #ffd33d; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.emma-about-emma h2 { margin: 10px auto 20px; font-family: "Zilla Slab", Georgia, serif; font-size: 40px; font-weight: 800; line-height: 1.12; letter-spacing: 0; }
.emma-about-emma p { margin: 0 auto 16px; color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.8; }
.emma-about-location { padding: 76px 0 84px; background: #fff; }
.emma-about-location > .emma-home-container > header { margin-bottom: 28px; }
.emma-about-location__grid { display: grid; grid-template-columns: .8fr 1.2fr; min-height: 500px; }
.emma-about-location figure, .emma-about-location__map { min-width: 0; margin: 0; overflow: hidden; }
.emma-about-location figure { position: relative; background: #eee9f1; }
.emma-about-location figure img { width: 100%; height: 100%; object-fit: cover; }
.emma-about-location figcaption { position: absolute; right: 14px; bottom: 14px; left: 14px; padding: 10px 12px; background: rgba(43,31,49,.82); color: #fff; font-size: 10px; }
.emma-about-location__map iframe { width: 100%; height: 100%; min-height: 500px; border: 0; }
.emma-about-contact { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #e4dfe7; border-top: 0; }
.emma-about-contact > * { display: block; min-width: 0; padding: 18px; border-right: 1px solid #e4dfe7; }
.emma-about-contact > *:last-child { border-right: 0; }
.emma-about-contact span, .emma-about-contact strong, .emma-about-contact small { display: block; }
.emma-about-contact span { color: #8d8493; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.emma-about-contact strong { margin-top: 5px; overflow: hidden; color: #403648; font-size: 13px; text-overflow: ellipsis; }
.emma-about-contact small { margin-top: 3px; color: #817988; font-size: 10px; }
.emma-about-contact a:hover strong { color: #6948bd; }
@media (max-width: 900px) {
    .emma-about-intro__grid { gap: 45px; }
    .emma-about-projects__grid { grid-template-columns: 1fr 1fr; }
    .emma-about-projects__grid > a:last-child { grid-column: 1 / -1; }
    .emma-about-location__grid { grid-template-columns: 1fr 1fr; }
    .emma-about-contact { grid-template-columns: 1fr 1fr; }
    .emma-about-contact > *:nth-child(2) { border-right: 0; }
    .emma-about-contact > *:nth-child(-n+2) { border-bottom: 1px solid #e4dfe7; }
}
@media (max-width: 650px) {
    .emma-about-hero { min-height: 560px; background-position: 58% center; }
    .emma-about-hero::before { background: linear-gradient(0deg, rgba(30,18,43,.9) 0%, rgba(36,22,47,.55) 55%, rgba(30,18,43,.18) 100%); }
    .emma-about-hero__inner { padding-top: 45px; padding-bottom: 48px; }
    .emma-about-hero__inner nav { margin-bottom: 160px; }
    .emma-about-hero h1 { font-size: 52px; }
    .emma-about-hero p { font-size: 14px; }
    .emma-about-intro { padding-top: 50px; }
    .emma-about-intro__grid { grid-template-columns: 1fr; gap: 23px; }
    .emma-about-intro h2, .emma-about-projects h2, .emma-about-location h2 { font-size: 31px; }
    .emma-about-stats { grid-template-columns: 1fr; margin-top: 33px; }
    .emma-about-stats > div, .emma-about-stats > div:first-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid #e7e1eb; }
    .emma-about-stats > div:last-child { border-bottom: 0; }
    .emma-about-projects, .emma-about-emma, .emma-about-location { padding-top: 55px; padding-bottom: 58px; }
    .emma-about-projects__grid { grid-template-columns: 1fr; }
    .emma-about-projects__grid > a:last-child { grid-column: auto; }
    .emma-about-emma h2 { font-size: 32px; }
    .emma-about-location__grid { grid-template-columns: 1fr; min-height: 0; }
    .emma-about-location figure { aspect-ratio: 1 / 1; }
    .emma-about-location__map iframe { min-height: 350px; }
    .emma-about-contact { grid-template-columns: 1fr; }
    .emma-about-contact > * { border-right: 0; border-bottom: 1px solid #e4dfe7; }
    .emma-about-contact > *:last-child { border-bottom: 0; }
}