/* OC-SCN-033. Shared chrome is deliberately not restyled by this component. */
.oc-relief-hero{--relief-u:min(1vw,1.77778svh,19.2px);height:calc(100svh - var(--header-height));min-height:0;background:#205c40}
.relief-stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.relief-stage img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.oc-relief-hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#087e51 0,transparent 24%),linear-gradient(90deg,#163e2825,transparent 58%)}
.oc-relief-hero .hero-content{display:flex;justify-content:center;align-items:stretch;width:calc(86 * var(--relief-u));height:100%;max-width:none;padding:0;gap:0}
.oc-relief-hero .relief-intro{position:relative;z-index:3;align-self:flex-start;width:49%;padding-bottom:calc(2 * var(--relief-u));pointer-events:none}
.oc-relief-hero .hero-copy{display:block;width:100%;max-width:none}
.oc-relief-hero h1{font-size:calc(4.03 * var(--relief-u));line-height:1.08;max-width:100%;text-wrap:balance}
.oc-relief-hero .hero-copy p{font-size:calc(1.46 * var(--relief-u));max-width:calc(32 * var(--relief-u));line-height:1.4;margin-top:calc(1.65 * var(--relief-u))}
.oc-relief-hero .hero-copy .primary-button{width:clamp(230px,17.5vw,310px);height:clamp(54px,3.65vw,66px);min-height:54px;padding:14px 24px;font-size:clamp(17px,1.15vw,20px);border-radius:14px;margin-top:calc(1.7 * var(--relief-u));gap:24px}
.oc-relief-hero .primary-button .icon{width:22px;height:22px}
.oc-relief-hero .hero-partners{position:static;display:inline-flex;align-self:flex-start;width:auto;height:calc(8.2 * var(--relief-u));max-width:100%;margin-top:calc(1.65 * var(--relief-u));gap:calc(1.4 * var(--relief-u));padding:calc(.5 * var(--relief-u)) calc(1.1 * var(--relief-u));border-radius:calc(1.1 * var(--relief-u))}
.oc-relief-hero .hero-partners img{width:auto;height:100%}.oc-relief-hero .hero-partners .meta{height:76%}
.relief-art-space{display:contents}
.relief-art{position:absolute;z-index:2;width:calc(51 * var(--relief-u));aspect-ratio:1222/1007;right:0;top:50%;transform:translateY(-48%);isolation:isolate;pointer-events:none}
.relief-contact-shadow{position:absolute;z-index:0;inset:87% -3% -3% 4%;border-radius:50%;background:radial-gradient(ellipse,#082b1dda 0,#10372485 42%,transparent 70%);filter:blur(12px);transform:rotate(-2deg)}
.relief-sculpture{display:block;position:relative;z-index:2;width:100%;height:100%}
.relief-sculpture img{display:block;width:100%;height:100%;object-fit:contain}
.relief-leaf{position:absolute;display:block;max-width:none;height:auto;animation-play-state:paused!important}
.relief-leaf--rear{z-index:1;width:25%;right:-7%;bottom:22%;transform-origin:12% 97%;animation:relief-rear-sway 14s cubic-bezier(.45,0,.55,1) infinite}
.relief-leaf--front{z-index:3;width:20%;right:17%;bottom:9%;transform-origin:4% 94%;animation:relief-front-sway 17s cubic-bezier(.45,0,.55,1) -6s infinite}
[data-relief-motion="running"] .relief-leaf{animation-play-state:running!important}
@keyframes relief-rear-sway{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(1deg)}}
@keyframes relief-front-sway{0%,100%{transform:rotate(.2deg)}50%{transform:rotate(-1.2deg)}}
/* The middle-sized portrait layout is composed, not a desktop crop. */
@media(max-width:899px) and (max-aspect-ratio:1/1), (min-width:900px) and (max-width:1200px) and (max-aspect-ratio:1/1){
 .oc-relief-hero{min-height:610px}
 .oc-relief-hero .hero-content{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;align-content:stretch;justify-content:stretch;align-items:start;width:calc(100% - 40px);max-width:650px;margin:auto;padding:26px 0 20px;gap:14px}
 .oc-relief-hero .relief-intro,.oc-relief-hero .hero-copy{display:contents}
 .oc-relief-hero h1{grid-row:1;font-size:clamp(30px,7.7vw,48px);line-height:1.09;letter-spacing:-.04em;max-width:600px;text-wrap:balance}
 .oc-relief-hero .hero-copy p{grid-row:2;max-width:520px;font-size:clamp(14px,3.8vw,20px);line-height:1.45;margin:0}
 .oc-relief-hero .hero-copy .primary-button{grid-row:3;width:230px;max-width:100%;min-height:46px;height:48px;padding:12px 19px;border-radius:12px;font-size:15px;margin:0;justify-self:start;align-self:start}
 .oc-relief-hero .primary-button .icon{width:20px;height:20px}
 .relief-art-space{display:block;position:relative;grid-row:4;container-type:size;height:100%;min-height:0;min-width:0}
 .relief-art{position:absolute;width:min(94cqw,121.35cqh,594px);height:auto;max-width:none;left:50%;right:auto;top:50%;transform:translate(-54%,-50%);margin:0}
 .oc-relief-hero .hero-partners{grid-row:5;align-self:end;justify-self:center;margin:0;height:83px;width:auto;max-width:100%;padding:7px 17px;gap:20px;border-radius:14px}
 .relief-stage img{object-position:38% bottom}
 .oc-relief-hero:before{background:linear-gradient(180deg,#087e51 0,#205c401c 22%,transparent 45%)}
}
@media(max-width:599px) and (max-height:740px) and (orientation:portrait){
 .oc-relief-hero{min-height:508px}
 .oc-relief-hero .hero-content{width:calc(100% - 32px);padding:16px 0 14px;gap:10px}
 .oc-relief-hero h1{font-size:clamp(25px,7.6vw,32px);line-height:1.09}
 .oc-relief-hero .hero-copy p{font-size:13px;line-height:1.4;max-width:100%}
 .oc-relief-hero .hero-copy .primary-button{height:44px;min-height:44px;width:210px;font-size:14px;padding:10px 18px}
 .oc-relief-hero .hero-partners{height:66px;padding:5px 13px;gap:18px;border-radius:12px}
}
@media(max-height:600px) and (min-aspect-ratio:1/1){
 .oc-relief-hero{min-height:310px}
 .oc-relief-hero .hero-content{display:flex;width:calc(100% - 48px);max-width:1140px;margin:auto;padding:18px 0;justify-content:center}
 .oc-relief-hero .relief-intro{width:52%;padding:0}
 .oc-relief-hero h1{font-size:clamp(25px,3.4vw,35px);line-height:1.07;max-width:540px}
 .oc-relief-hero .hero-copy p{font-size:12px;max-width:360px;line-height:1.4;margin-top:12px}
 .oc-relief-hero .hero-copy .primary-button{width:205px;height:44px;min-height:44px;font-size:14px;padding:10px 16px;margin-top:12px;border-radius:12px}
 .oc-relief-hero .hero-partners{height:64px;margin-top:14px;padding:5px 12px;gap:16px;border-radius:12px}
 .relief-art{width:min(41vw,480px);max-width:none;right:12px;top:50%;transform:translateY(-47%)}
}
@media(prefers-reduced-motion:reduce){.oc-relief-hero .relief-leaf{animation:none!important}}
