/* Homepage cover compositions. Families deliberately uses its existing renderer. */
.brand-cover{overflow:hidden;contain:layout paint;isolation:isolate;background:#161616;pointer-events:none}
.brand-cover *{box-sizing:border-box}
.brand-cover img{display:block;width:100%;height:100%;object-fit:cover}
.brand-cover::after{content:"";position:absolute;inset:0;z-index:4;background:radial-gradient(ellipse at 50% 38%,#0007,transparent 76%),linear-gradient(0deg,#0009,transparent 35%);pointer-events:none}
.cover-stage{position:absolute;inset:0}
.cover-photo{position:absolute;overflow:hidden;margin:0}
.cover-motion{animation-play-state:paused!important}
.kinetic.motion-enabled .brand-cover.is-active .cover-motion{animation-play-state:running!important}
.kinetic.collage-paused .brand-cover.is-active .cover-motion,.kinetic.motion-paused .brand-cover.is-active .cover-motion,.kinetic.motion-hidden .brand-cover.is-active .cover-motion{animation-play-state:paused!important}

/* Modern: a large dance-floor photograph, framed by changing detail prints. */
.cover-modern{background:#282321}
.modern-sheet{inset:4% 3% 9%}
.modern-main{inset:9% 16% 8%;border:8px solid #fff;border-bottom-width:24px;transform:rotate(-2deg);box-shadow:0 10px 24px #0004}
.modern-main img{object-position:50% 43%;animation:cover-photo-zoom 24s ease-in-out infinite alternate}
.modern-snapshot{width:25%;height:37%;border:6px solid #fff;border-bottom-width:18px;background:#fff;box-shadow:0 8px 18px #0004}
.modern-snapshot img{position:absolute;inset:0;object-position:var(--crop,50%) 45%}
.modern-snapshot img:last-child{opacity:0;object-position:var(--next-crop,70%) 40%;animation:cover-photo-swap 20s ease-in-out infinite;animation-delay:var(--delay,0s)}
.modern-shot-a{left:-3%;top:1%;transform:rotate(-9deg);--crop:2%;--next-crop:40%;--delay:-3s}
.modern-shot-b{right:-2%;top:-4%;height:42%;transform:rotate(8deg);--crop:97%;--next-crop:62%;--delay:-8s}
.modern-shot-c{left:0;bottom:-5%;height:32%;transform:rotate(6deg);--crop:78%;--next-crop:12%;--delay:-13s}
.modern-shot-d{right:0;bottom:-3%;width:24%;height:35%;transform:rotate(-7deg);--crop:35%;--next-crop:95%;--delay:-18s}

/* Classic: two restrained panels with opposing, slow camera movement. */
.cover-classic{display:grid;grid-template-columns:58% 42%;gap:2px;background:#fff;filter:grayscale(1)}
.classic-panel{position:relative;overflow:hidden}
.classic-panel>img{position:absolute;inset:0;object-position:32% 75%;animation:cover-pan-right 24s ease-in-out infinite alternate}
.classic-panel:last-child>img{object-position:50% 72%;animation-name:cover-pan-left}
.classic-panel .classic-alternate{opacity:0;animation:cover-photo-swap 28s ease-in-out infinite;object-position:50% 72%}
.classic-panel:last-child .classic-alternate{object-position:32% 78%;animation-delay:-14s}

/* Legacy: the person and the thoughtful production behind their story. */
.cover-legacy{background:#25221e}
.legacy-portrait{left:4%;top:5%;bottom:6%;width:72%}
.legacy-portrait img{object-position:65% 45%;animation:cover-photo-zoom 30s ease-in-out infinite alternate;transform-origin:65% 38%}
.legacy-inset{right:4%;bottom:10%;width:34%;height:42%;border:4px solid #f4efe7;box-shadow:0 12px 28px #0005;background:#25221e}
.legacy-inset img{position:absolute;inset:0;object-position:100% 45%}
.legacy-inset img:last-child{opacity:0;object-position:0% 50%;animation:cover-photo-swap 24s ease-in-out infinite;animation-delay:-3s}

/* Business: actual interface compositions, identity and media on one canvas. */
.cover-business{background:#222527;font-family:Outfit,Arial,sans-serif;color:#242424}
.business-canvas{inset:7% 5% 12%}
.canvas-panel{position:absolute;overflow:hidden;border:1px solid #ffffff55;box-shadow:0 12px 32px #0004}
.canvas-site{left:0;top:1%;width:62%;height:69%;background:#f3f1eb;transform:translate(0,0);animation:cover-canvas-site 24s ease-in-out infinite alternate}
.canvas-browser{height:30px;display:flex;align-items:center;gap:5px;padding:0 12px;background:#f8f7f4;border-bottom:1px solid #ddd;color:#5b5b5b;font-size:11px;letter-spacing:.02em}
.canvas-browser i{width:5px;height:5px;border:1px solid #aaa;border-radius:50%}
.canvas-browser span{margin-left:12px}
.canvas-site-body{height:calc(100% - 30px);display:grid;grid-template-columns:45% 55%}
.canvas-site-copy{padding:12%;display:flex;flex-direction:column;justify-content:center;gap:18px}
.canvas-site-copy strong{font-size:clamp(20px,3vw,42px);font-weight:500;line-height:1.05;letter-spacing:-.045em}
.canvas-site-copy small{font-size:12px;line-height:1.5;letter-spacing:.05em}
.canvas-site-copy em{font-size:12px;font-style:normal;text-decoration:underline;text-underline-offset:4px}
.canvas-identity{right:0;top:0;width:31%;height:39%;padding:8% 4% 4%;background:#e64980;animation:cover-canvas-identity 24s ease-in-out infinite alternate}
.canvas-identity>img{object-fit:contain;height:65%}
.canvas-swatches{display:flex;gap:7px;height:16px;margin-top:15px}
.canvas-swatches i{flex:1;background:#24221f}.canvas-swatches i:nth-child(2){background:#f5f2eb}.canvas-swatches i:nth-child(3){background:#ed83a5}
.canvas-workflow{right:3%;bottom:0;width:51%;height:48%;padding:5%;background:#ecefea;animation:cover-canvas-workflow 24s ease-in-out infinite alternate}
.canvas-workflow-title{font-size:clamp(12px,1.3vw,18px);font-weight:500;letter-spacing:.06em;margin-bottom:18px}
.canvas-flow{display:flex;align-items:center;gap:8px;margin:18px 0}
.canvas-flow span{border:1px solid #949e94;background:#fff;padding:12px 8px;text-align:center;flex:1;font-size:clamp(10px,1vw,14px)}
.canvas-flow b{font-size:16px;font-weight:400;color:#737c73}
.canvas-workflow small{font-size:12px;color:#596459}
.canvas-media{left:2%;bottom:-1%;width:34%;height:27%;background:#161616;animation:cover-canvas-identity 24s ease-in-out infinite alternate-reverse}
.canvas-media img{object-position:50% 65%}

@keyframes cover-photo-zoom{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes cover-photo-swap{0%,28%,100%{opacity:0}37%,77%{opacity:1}86%{opacity:0}}
@keyframes cover-pan-right{from{transform:scale(1.1) translateX(-2%)}to{transform:scale(1.1) translateX(2%)}}
@keyframes cover-pan-left{from{transform:scale(1.1) translateY(2%)}to{transform:scale(1.1) translateY(-2%)}}
@keyframes cover-canvas-site{from{transform:translate(0,0) scale(1)}to{transform:translate(1.2%,-1%) scale(1.025)}}
@keyframes cover-canvas-identity{from{transform:translate(0,0)}to{transform:translate(2%,3%)}}
@keyframes cover-canvas-workflow{from{transform:translate(0,0) scale(1)}to{transform:translate(-1.5%,1%) scale(1.035)}}

@media(max-width:650px){
 .modern-sheet{inset:5% -5% 14%}.modern-main{inset:14% 10% 18%;border-width:5px;border-bottom-width:16px}
 .modern-snapshot{width:34%;height:27%;border-width:4px;border-bottom-width:12px}
 .modern-shot-a{top:1%;left:-2%}.modern-shot-b{top:0;right:-1%;height:29%}
 .modern-shot-c{bottom:0;left:-1%;height:29%}.modern-shot-d{bottom:2%;right:-2%;width:34%;height:27%}
 .cover-classic{grid-template-columns:54% 46%}
 .legacy-portrait{left:0;top:0;bottom:0;width:100%}.legacy-portrait img{object-position:65% center}
 .legacy-inset{right:5%;bottom:19%;width:43%;height:25%;border-width:3px}
 .business-canvas{inset:7% -9% 17%}.canvas-site{top:0;left:2%;width:81%;height:46%}
 .canvas-site-copy{padding:12%;gap:12px}.canvas-site-copy strong{font-size:24px}.canvas-site-copy small{font-size:10px}
 .canvas-identity{right:1%;top:5%;width:29%;height:22%;padding:5% 3% 3%}
 .canvas-workflow{right:5%;bottom:2%;width:72%;height:32%;padding:5%}
 .canvas-flow{gap:5px;margin:14px 0}.canvas-flow span{padding:10px 4px;font-size:11px}
 .canvas-media{left:2%;bottom:16%;width:31%;height:23%}.canvas-swatches{height:10px;gap:4px;margin-top:8px}
}
@media(max-height:550px) and (min-width:651px){
 .modern-sheet{inset:2% 3% 6%}.business-canvas{inset:4% 5% 9%}
 .canvas-site-copy{padding:8%;gap:10px}.canvas-site-copy strong{font-size:24px}
 .canvas-workflow{padding:3%}.canvas-workflow-title{margin-bottom:8px}.canvas-flow{margin:8px 0}
}
@media(prefers-reduced-motion:reduce){.brand-cover .cover-motion{animation-play-state:paused!important}}