/* The supplied portrait is framed in CSS, never painted or regenerated. */
.home-page #sergi.personal-welcome { position:relative; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:clamp(3rem,7vw,7.5rem); padding:clamp(4.5rem,8vw,8rem) 7%; overflow:hidden; scroll-margin-top:90px; background:#f4f0e7; }
.home-page #sergi :is(h2,p,a) { color:#2e392b; }
.home-page #sergi :is(.eyebrow,h2 em) { color:#586344; }
.home-page #sergi .welcome-principles span { color:#8a7145; }
.home-page #sergi .welcome-principles, .home-page #sergi .welcome-principles p { border-color:#d8d9cc; }
.home-page #sergi .portrait-actions .button { background:#334435!important; color:#fffaf0!important; border:1px solid #334435!important; border-radius:6px; }
.home-page #sergi .portrait-actions .button:hover { background:#46583e!important; }
.home-page #sergi .portrait-composition { position:relative; width:100%; max-width:650px; align-self:center; margin:0; }
.portrait-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; font:400 .6rem Manrope,sans-serif; letter-spacing:.15em; color:#617052; margin-bottom:2.7rem; }
.portrait-heading span:last-child { font-size:.52rem; }
.portrait-stage { position:relative; margin:0 1.25rem; }
.portrait-window { position:relative; isolation:isolate; aspect-ratio:845/855; overflow:hidden; border-radius:46% 46% 8px 8px; background:#c3a071; box-shadow:0 25px 65px #434b3220; transform:translateY(var(--portrait-drift,0px)); }
.home-page #sergi .portrait-window img { position:absolute; width:127.810651%; max-width:none; height:auto; max-height:none; aspect-ratio:1080/1350; left:-13.609467%; top:-35.087719%; border-radius:0; object-fit:initial; display:block; }
.portrait-outline { position:absolute; inset:-7% -7% -6%; width:114%; height:113%; overflow:visible; pointer-events:none; }
.portrait-outline path { stroke:#a8874d; stroke-width:.65; opacity:.65; vector-effect:non-scaling-stroke; }
.portrait-outline path:last-child { stroke:#7b8664; }
.portrait-seal { position:absolute; right:-1.25rem; bottom:1.7rem; height:74px; width:74px; border-radius:50%; background:#f4f0e7; box-shadow:0 0 0 1px #a8874d66,0 0 0 7px #f4f0e7; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; color:#39472f; }
.portrait-seal span:first-child { font-family:var(--font-display,'Cormorant Garamond',serif); font-size:1rem; letter-spacing:.12em; }
.portrait-seal span:last-child { font-size:.42rem; letter-spacing:.12em; }
.home-page #sergi .portrait-composition figcaption { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:2.2rem 1.25rem 0; color:#3b452f; }
.portrait-signature { font:italic 400 clamp(1.9rem,2.6vw,2.6rem)/1.1 var(--font-display,'Cormorant Garamond',serif); }
.portrait-composition figcaption>span:last-child { font-size:.57rem; line-height:1.6; letter-spacing:.08em; max-width:15ch; text-align:right; text-transform:uppercase; }
.home-page #sergi .portrait-motto { margin:.75rem 1.25rem 0; font-size:.69rem; color:#6d725c; letter-spacing:.12em; }
.home-page #sergi .welcome-copy h2 { font-size:clamp(2.7rem,4.1vw,4.4rem); line-height:1.04; margin-bottom:1.6rem; }
.home-page #sergi .welcome-copy>p:not(.eyebrow) { font-size:.9rem; line-height:1.8; }
.home-page #sergi .welcome-principles { margin:1.5rem 0; }
.home-page #sergi .welcome-principles p { font-size:.82rem; padding:.8rem 0; }
.home-page #sergi .welcome-copy .welcome-inclusion { font-size:.76rem; }
.portrait-actions { margin-top:1.7rem; display:flex; align-items:flex-start; flex-direction:column; gap:.5rem; }
.portrait-actions .button { font-size:.77rem; gap:1.5rem; min-height:48px; }
.home-page #sergi .portrait-actions .text-link { font-size:.75rem; margin-top:.6rem; }
@media (max-width:1100px) and (min-width:761px) {
 .home-page #sergi.personal-welcome { gap:3.2rem; padding-left:5%; padding-right:5%; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); }
 .portrait-heading { letter-spacing:.08em; }
}
@media (max-width:760px) {
 .home-page #sergi.personal-welcome { grid-template-columns:1fr; gap:3.5rem; padding:4rem 7% 3.5rem; }
 .home-page #sergi .portrait-composition { max-width:490px; margin:auto; }
 .portrait-heading { margin-bottom:2rem; font-size:.55rem; }
 .portrait-heading span:last-child { font-size:.45rem; }
 .portrait-stage { margin:0 1rem; }
 .portrait-window { transform:none; }
 .portrait-seal { width:62px; height:62px; right:-1rem; bottom:1.2rem; }
 .portrait-seal span:first-child { font-size:.9rem; }
 .home-page #sergi .portrait-composition figcaption { margin:1.8rem 1rem 0; }
 .home-page #sergi .portrait-motto { margin-left:1rem; }
 .home-page #sergi .welcome-copy h2 { font-size:clamp(2.65rem,11vw,4rem); }
}
@media (max-width:380px) {
 .home-page #sergi .portrait-composition figcaption { align-items:flex-start; flex-direction:column; gap:.6rem; }
 .portrait-signature { white-space:nowrap; }
 .portrait-composition figcaption>span:last-child { max-width:none; text-align:left; }
}
@media (prefers-reduced-motion:reduce) { .portrait-window { transform:none!important; } }

/* Keep the complete approved 4:5 animation. */
.portrait-window.portrait-motion { aspect-ratio:4/5; border-radius:8px; transform:none; }
.home-page #sergi .portrait-motion img,
.home-page #sergi .portrait-motion video { position:absolute; inset:0; width:100%; height:100%; max-width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:0; }
.portrait-motion video { opacity:0; pointer-events:none; }
.portrait-motion.has-frame video { opacity:1; }
.portrait-playback { position:absolute; left:12px; bottom:12px; z-index:2; display:flex; align-items:center; justify-content:center; gap:7px; min-height:48px; min-width:48px; padding:0 14px; border:1px solid #fff6d95c; border-radius:30px; background:#293226e8; color:#fff9ec; font:500 .65rem/1.2 Manrope,sans-serif; cursor:pointer; }
.portrait-playback[hidden] { display:none; }
.portrait-playback svg { width:20px; height:20px; }
.portrait-playback:hover { background:#40513a; }
.portrait-playback:focus-visible { outline:2px solid #fff9ec; outline-offset:4px; }
.portrait-icon-pause,.is-playing .portrait-icon-play { display:none; }
.is-playing .portrait-icon-pause { display:block; }
@media(max-width:760px){.portrait-playback { left:10px; bottom:10px; }}

/* Keep playback controls clear of the animated campaign lettering. */
.home-page #sergi .portrait-playback { position:relative; left:auto; bottom:auto; margin:12px 0 0 auto; }