.succession-page .area-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:420px;margin-top:12px;border:0;overflow:hidden;background:#3f3f3f}
.succession-page .area-hero-image{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:-2;aspect-ratio:auto;background:#3f3f3f}
.succession-page .area-hero-image img{width:auto;height:100%;max-width:none;right:0;bottom:0;object-fit:contain;object-position:right bottom;mask-image:linear-gradient(90deg,transparent,#000 26%)}
.succession-page .area-hero-image>span{display:none}
.succession-page .area-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#3f3f3f 0%,rgba(63,63,63,.9) 20%,rgba(63,63,63,.62) 40%,rgba(63,63,63,.06) 72%,transparent 100%)}
.succession-page .area-hero-copy{position:relative;padding:28px 48px;max-width:620px;color:#f7f7f7}
.succession-page .area-hero .area-label{color:#eceee8}
.succession-page .area-hero .area-rule{background:#b9c1af;margin:18px 0}
.succession-page .area-hero h1{font-size:clamp(52px,6vw,76px)}
.succession-page .area-deck{color:#f7f7f7;margin-top:22px}
.succession-page .area-explore{color:#f7f7f7;margin-top:22px}
.succession-page .area-explore:focus-visible{outline:2px solid #f7f7f7;outline-offset:5px}
@media(max-width:700px){
.succession-page .area-hero{width:100%;min-height:340px;margin-top:0;align-items:flex-start}
.succession-page .area-hero-copy{padding:20px 24px 24px;max-width:100%}
.succession-page .area-hero .area-rule{margin:12px 0}
.succession-page .area-hero h1{font-size:48px}
.succession-page .area-deck{font-size:23px;margin-top:14px}
.succession-page .area-explore{margin-top:8px}
.succession-page .area-hero-image img{width:100%;height:100%;object-fit:cover;object-position:left center;mask-image:none}
.succession-page .area-hero:after{background:linear-gradient(90deg,rgba(63,63,63,.94),rgba(63,63,63,.82) 40%,rgba(63,63,63,.25) 100%)}
}

.succession-page .area-hero-image img{width:75%;object-fit:cover;object-position:50% 25%;filter:grayscale(1) contrast(1.06)}
.succession-page .area-feature{width:100%;border:0;padding:0;background:transparent;text-align:left;color:inherit;cursor:pointer}
.succession-page .area-feature-image{display:block;width:100%}
.succession-feature-title{display:block;font:32px/1.13 var(--serif);margin:12px 0}
.succession-feature-summary{display:block;font:16px/1.6 var(--sans);color:#62635f;max-width:390px}
.succession-page .practice-contact{margin-top:22px}
.succession-page .practice-note{font-size:16px}
.succession-page .practice-item summary:focus-visible{outline:2px solid #46513f;outline-offset:5px}
@media(max-width:700px){.succession-page .area-hero-image img{width:100%;object-position:55% 25%}.succession-page .area-hero h1{font-size:clamp(40px,12vw,48px)}.succession-feature-title{font-size:29px}}

/* v2: deslocamento discreto da fotografia para a direita. */
.succession-page .area-hero-image img{right:-5%}
@media(max-width:700px){.succession-page .area-hero-image img{mask-image:linear-gradient(90deg,transparent,#000 14%)}}

/* v3: priorizar coroamento e colunas, reduzindo o primeiro plano da grade. */
.succession-page .area-hero-image img{object-position:50% top}
@media(max-width:700px){.succession-page .area-hero-image img{width:160%;right:-40%;object-position:50% top;mask-image:none}}

/* v4: fachada à direita e transição inferior para reduzir a grade. */
.succession-page .area-hero-image img{mask-image:linear-gradient(90deg,transparent,#000 26%),linear-gradient(180deg,#000 65%,rgba(0,0,0,.32));mask-composite:intersect}
@media(max-width:700px){.succession-page .area-hero-image img{width:160%;right:-60%;mask-image:linear-gradient(90deg,transparent,#000 24%),linear-gradient(180deg,#000 60%,rgba(0,0,0,.15));mask-composite:intersect}}

/* v5: recuperar a visão ampla da fachada no celular. */
@media(max-width:700px){.succession-page .area-hero-image img{width:110%;right:-10%;object-position:50% top;mask-image:linear-gradient(90deg,transparent,#000 14%)}}

/* v6: fotografia menos encoberta, mantendo contraste junto ao texto. */
.succession-page .area-hero:after{background:linear-gradient(90deg,#3f3f3f 0%,rgba(63,63,63,.84) 20%,rgba(63,63,63,.48) 40%,rgba(63,63,63,.03) 72%,transparent 100%)}
@media(max-width:700px){.succession-page .area-hero:after{background:linear-gradient(90deg,rgba(63,63,63,.88),rgba(63,63,63,.70) 40%,rgba(63,63,63,.13) 100%)}}