/* KV composition: compact height, grouped copy, flat and prominent nameplate. */
.hero{height:520px}
.portrait-layer{width:480px;height:776px;left:4%;top:auto;bottom:-235px}
.hero-copy{top:20px;left:42%;width:43%}
.hero #hero-heading{width:min(100%,590px);left:-56px}
.hero-description{width:420px;max-width:calc(100% - 110px);margin:12px 0 0 110px;font-size:16px;line-height:1.85}
.hero-actions{position:static;display:flex;flex-wrap:nowrap;gap:14px;width:max-content;max-width:none;margin:22px 0 0 60px}
.community-seal{top:130px;right:2.2%;width:210px;height:210px}
.identity-note{left:9%;top:auto;bottom:24px;min-width:300px;padding:14px 24px;gap:2px;transform:none;background:#fffdf9f2;box-shadow:none;border-radius:2px}
.identity-role{font-size:15px;line-height:1.6;font-weight:600;letter-spacing:.08em}
.identity-note strong{font-size:42px;line-height:1.35;font-weight:700;letter-spacing:.025em}
.leaf-sketch{width:46px;height:58px;bottom:4px}
@media(min-width:1600px){
 .hero{height:560px}
 .portrait-layer{width:520px;height:842px;left:7%;bottom:-259px}
 .hero-copy{top:26px}
 .hero #hero-heading{width:min(100%,650px)}
 .hero-description{font-size:17px}
 .community-seal{top:130px;right:5%;width:230px;height:230px}
 .identity-note{left:12%;min-width:330px}
 .identity-note strong{font-size:46px}
}
@media(max-width:1200px){
 .hero{height:480px}
 .portrait-layer{width:410px;height:663px;left:26px;bottom:-160px}
 .hero-copy{top:22px;left:42%;width:55%}
 .hero #hero-heading{width:min(100%,425px);left:-32px}
 .hero-description{width:330px;max-width:calc(100% - 45px);margin:12px 0 0 45px;font-size:15px}
 .hero-actions{margin:22px 0 0 8px;gap:10px}
 .community-seal{top:110px;right:2%;width:160px;height:160px}
 .identity-note{left:65px;bottom:22px;min-width:270px;padding:12px 22px}
 .identity-role{font-size:14px}
 .identity-note strong{font-size:38px}
}
@media(max-width:1000px){
 .hero{height:520px}
 .portrait-layer{width:350px;height:566px;left:12px;bottom:-41px}
 .hero-copy{top:20px;left:40%;width:58%}
 .hero #hero-heading{left:-20px}
 .hero-description{max-width:calc(100% - 12px);margin-left:12px;font-size:14px}
 .community-seal{top:385px;right:20px;width:110px;height:110px}
 .identity-note{left:30px;bottom:24px;min-width:240px;padding:12px 20px}
 .identity-role{font-size:13px}
 .identity-note strong{font-size:34px}
}
@media(max-width:640px){
 .hero{height:670px}
 .hero-copy{left:18px;top:24px;width:calc(100% - 36px)}
 .hero #hero-heading{width:100%;left:-6px}
 .hero-description{position:absolute;left:57%;top:180px;width:43%;max-width:none;margin:0;font-size:14px;line-height:1.85}
 .hero-actions{position:absolute;top:558px;left:0;display:grid;grid-template-columns:1.2fr 1fr;gap:8px;width:100%;max-width:100%;margin:0}
 .portrait-layer{width:278px;height:450px;left:-9px;top:198px;bottom:auto}
 .community-seal{top:403px;right:18px;width:133px;height:133px}
 .identity-note{left:18px;top:474px;bottom:auto;width:210px;min-width:0;padding:9px 12px}
 .identity-role{font-size:12px;line-height:1.5}
 .identity-note strong{font-size:34px}
}
@media(max-width:380px){
 .portrait-layer{left:-14px}
 .community-seal{right:15px;width:126px;height:126px}
}
/* Center the complete desktop copy group and companion badge vertically. */
@media(min-width:1001px){
 .hero-copy{top:50%;transform:translateY(-50%)}
 .community-seal{top:50%;transform:translateY(-50%)}
}

/* Right-facing composition: original portrait, never mirrored. */
.hero-wash{background:linear-gradient(90deg,#f6fbfcd9 0%,#f6fbfcb8 36%,#f6fbfc40 65%,#f6fbfc12 100%)}
.portrait-layer{left:auto;right:2%;isolation:isolate}
.portrait{filter:saturate(.95) contrast(.98);mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%)}
.hero-copy{left:5%;width:51%}
.hero #hero-heading{left:0}
.hero-description{max-width:100%;margin-left:40px}
.hero-actions{margin-left:0}
.community-seal{left:54%;right:auto;top:auto;bottom:24px;width:155px;height:155px;transform:none}
.identity-note{left:auto;right:7%;background:#fffdf9e8}
.portrait-flourish{left:auto;right:3%;top:55px}
.color-wisp-mint{left:auto;right:0;opacity:.45}
.leaf-sketch{right:auto;left:2%}
@media(min-width:1600px){
 .portrait-layer{left:auto;right:5%}
 .hero-copy{left:8%;width:49%}
 .identity-note{left:auto;right:10%}
 .community-seal{left:55%;right:auto;width:170px;height:170px;top:auto;bottom:28px;transform:none}
}
@media(max-width:1200px){
 .portrait-layer{left:auto;right:-12px}
 .hero-copy{left:4%;width:55%}
 .hero-description{margin-left:20px}
 .hero-actions{margin-left:0}
 .community-seal{left:51%;right:auto;top:auto;bottom:24px;width:125px;height:125px;transform:none}
 .identity-note{left:auto;right:4%}
}
@media(max-width:1000px){
 .portrait-layer{left:auto;right:-5px}
 .hero-copy{left:4%;width:55%;top:50%;transform:translateY(-50%)}
 .hero-description{margin-left:0;max-width:100%}
 .hero-actions{flex-wrap:wrap;width:100%;gap:10px}
 .community-seal{left:52%;right:auto;top:auto;bottom:24px;width:110px;height:110px}
 .identity-note{left:auto;right:2%}
}
@media(max-width:640px){
 .hero-wash{background:linear-gradient(180deg,#f6fbfcaa 0%,#f6fbfc88 30%,#fdfdf730 65%,#fffdf9cc 100%),linear-gradient(90deg,#f6fbfc80,transparent 70%)}
 .hero-landscape{object-position:60% center}
 .hero-copy{left:18px;top:24px;width:calc(100% - 36px);transform:none}
 .hero #hero-heading{left:0}
 .hero-description{left:0;top:180px;width:45%;max-width:none;margin:0}
 .hero-actions{width:100%;flex-wrap:nowrap}
 .portrait-layer{left:auto;right:-38px;top:198px}
 .portrait{mask-image:linear-gradient(to bottom,#000 0%,#000 75%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 75%,transparent 100%)}
 .identity-note{left:auto;right:18px;top:474px;bottom:auto}
 .community-seal{left:18px;right:auto;top:428px;bottom:auto;width:120px;height:120px;transform:none}
 .portrait-flourish{left:auto;right:12px;top:190px;width:42px}
}
@media(max-width:380px){.portrait-layer{left:auto;right:-44px}.community-seal{left:15px;right:auto;width:114px;height:114px}}

/* Supplied transparent portrait: retain its own silhouette and original colors. */
.portrait{clip-path:none;filter:none}

@media(min-width:1201px){.portrait-layer{bottom:-249px}}
@media(min-width:1600px){.portrait-layer{bottom:-273px}}

/* Give the portrait a little more breathing room below the header. */
@media(min-width:1201px){.portrait-layer{bottom:-271px}}
@media(min-width:1600px){.portrait-layer{bottom:-295px}}
@media(min-width:1001px) and (max-width:1200px){.portrait-layer{bottom:-182px}}

/* Bring the portrait inward and put the round message beside her face. */
.portrait-layer{right:10%}
.identity-note{right:15%}
.community-seal{left:auto;right:2%;top:125px;bottom:auto;width:170px;height:170px;transform:none}
@media(min-width:1600px){
 .portrait-layer{right:12%}
 .identity-note{right:17%}
 .community-seal{left:auto;right:3%;top:135px;width:185px;height:185px}
}
@media(max-width:1200px){
 .portrait-layer{right:7%}
 .identity-note{right:12%}
 .community-seal{left:auto;right:1.5%;top:120px;bottom:auto;width:125px;height:125px}
}
@media(max-width:1000px){
 .portrait-layer{right:9%}
 .identity-note{right:12%}
 .community-seal{left:auto;right:1.5%;top:170px;width:100px;height:100px}
}
@media(max-width:640px){
 .portrait-layer{right:45px;width:240px;height:388px;top:218px}
 .hero-description{width:37%}
 .identity-note{right:26px}
 .community-seal{left:auto;right:8px;top:315px;bottom:auto;width:88px;height:88px}
}
@media(max-width:380px){.portrait-layer{right:34px}.community-seal{left:auto;right:6px;width:84px;height:84px}}

/* A soft white halo keeps the mobile introduction legible over the portrait. */
@media(max-width:640px){
 .hero-description{text-shadow:0 0 3px #fff,0 0 7px rgba(255,255,255,.9)}
}