/* A full-width opening scene; the canvas never blocks page scrolling. */
.morphing-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 420px; height: min(56vh, 580px); background: #f5f6f7; color: #3d4449; border-radius: 18px; margin: 20px 0 0; }
/* Override the template's section padding; the caption sits outside this scene. */
#main > .inner > .morphing-hero {
 padding: 0;
 border-top: 0;
 min-width: 0;
 container-type: inline-size;
}
.morphing-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 72% 45%, #dcefe7 0%, transparent 65%); }
.morphing-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.morphing-hero .hero-copy { position: absolute; left: 7%; top: 50%; transform: translateY(-50%); width: 42%; max-width: 470px; pointer-events: none; }
.morphing-hero .hero-eyebrow { font: 11px/1.5 Arial, sans-serif; text-transform: uppercase; letter-spacing: .22em; color: #1e9a75; margin: 0 0 22px; }
.morphing-hero h2 { color: #3d4449; font-size: clamp(38px, 5vw, 72px); line-height: 1.06; letter-spacing: -.045em; margin: 0 0 22px; }
.morphing-hero .hero-description { color: #59666c; font-size: 16px; line-height: 1.6; width: 100%; max-width: 310px; margin: 0; white-space: normal; overflow-wrap: break-word; }
/* A quiet caption below the scene, with natural wrapping and a compact width. */
.hero-caption {
 display: block;
 box-sizing: border-box;
 width: 40%;
 max-width: 420px;
 min-width: 0;
 margin: 10px 0 28px auto;
 padding: 0 4px;
 white-space: normal;
 overflow-wrap: break-word;
 text-align: right;
 font: 11px/1.5 Arial, sans-serif;
 color: #7f888f;
}

@media (max-width: 736px) {
 .morphing-hero { min-height: 540px; height: 68svh; max-height: 640px; border-radius: 12px; margin-top: 20px; }
 .morphing-hero .hero-copy { top: 28px; left: 28px; right: 28px; width: auto; transform: none; }
 .morphing-hero h2 { font-size: 38px; }
 .morphing-hero .hero-description { font-size: 14px; max-width: 280px; }
 .morphing-hero .hero-eyebrow { margin-bottom: 14px; }
 .hero-caption { width: 100%; }
}

/* Respond to the actual figure width, including when the sidebar is open. */
@container (max-width: 736px) {
 .morphing-hero .hero-copy { top: 28px; left: 28px; right: 28px; width: auto; transform: none; }
 .morphing-hero h2 { font-size: 38px; }
 .morphing-hero .hero-description { font-size: 14px; max-width: 280px; }
 .morphing-hero .hero-eyebrow { margin-bottom: 14px; }
}