/* Concept sample posts and shorts, pure HTML and CSS. Every piece carries the concept label. */
.brandrow { margin:30px 0; }
.brandhead { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; margin-bottom:10px; }
.concept { font-size:.75rem; font-weight:700; letter-spacing:.03em; padding:2px 10px; border-radius:20px; background:#8a4b00; color:#fff; }
.posts { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap:12px; }
.posts > div, .shorts > div { min-width:0; }
.post { position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:8%; font-family:"Helvetica Neue", Arial, sans-serif; line-height:1.1; container-type:inline-size; }
.post .k { font-size:7cqw; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.85; margin-bottom:4cqw; }
.post .h { font-size:12cqw; font-weight:800; letter-spacing:-.01em; }
.post .s { font-size:6cqw; margin-top:4cqw; line-height:1.3; }
.post .lbl { position:absolute; left:4cqw; bottom:3cqw; font-size:4.2cqw; opacity:.8; }
.post .mk { position:absolute; right:5cqw; top:5cqw; font-size:5cqw; font-weight:800; }
.split { display:grid; grid-template-columns:1fr 1fr; position:absolute; inset:0; }
.split div { display:flex; align-items:flex-end; padding:5cqw; font-size:6cqw; font-weight:800; color:#fff; }
.cap { font-size:.86rem; color:var(--muted); margin-top:4px; }
/* Brand A: Bright Acre Home and Yard */
.a1 { background:#1f5130; color:#f4f1e6; }
.a2 { background:#b5d56a; color:#163a22; }
.a3 { background:#f4f1e6; color:#1f5130; }
.a4 { background:#163a22; color:#b5d56a; }
.before { background:repeating-linear-gradient(135deg, #6b6658 0 12px, #5d584b 12px 24px); }
.after { background:linear-gradient(160deg, #c9ccc6, #e9ebe6); color:#163a22 !important; }
/* Brand B: Wrenfield Coffee */
.b1 { background:#3b2a20; color:#f6ecdf; }
.b2 { background:#e07a3a; color:#2a1c14; }
.b3 { background:#f6ecdf; color:#3b2a20; }
.b4 { background:#2a1c14; color:#e07a3a; }
/* Brand C: Maple Row Family Dental */
.c1 { background:#1d6f7a; color:#ffffff; }
.c2 { background:#d9f0ec; color:#14525a; }
.c3 { background:#ffffff; color:#14525a; border:1px solid #cfe5e1; }
.c4 { background:#14525a; color:#d9f0ec; }
/* Shorts: 9:16, 8 second loop */
.split + .mk + .lbl, .split ~ .lbl { left:auto; right:4cqw; }
.shorts { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap:14px; margin-top:12px; }
.short { position:relative; aspect-ratio:9/16; border-radius:14px; overflow:hidden; font-family:"Helvetica Neue", Arial, sans-serif; container-type:inline-size; }
.short .f { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:10cqw; opacity:0; animation:frame 8s infinite; }
.short .f:nth-child(1) { animation-delay:0s; } .short .f:nth-child(2) { animation-delay:2s; } .short .f:nth-child(3) { animation-delay:4s; } .short .f:nth-child(4) { animation-delay:6s; }
.short .f b { font-size:13cqw; line-height:1.05; display:block; }
.short .f span { font-size:7cqw; margin-top:4cqw; display:block; }
.short .lbl { position:absolute; left:5cqw; bottom:4cqw; font-size:5cqw; color:#fff; opacity:.85; z-index:2; }
@keyframes frame { 0% { opacity:0; transform:translateY(6%); } 4% { opacity:1; transform:none; } 24% { opacity:1; } 28% { opacity:0; } 100% { opacity:0; } }
.wipe { position:absolute; inset:0; background:linear-gradient(160deg, #c9ccc6, #e9ebe6); clip-path:inset(0 100% 0 0); animation:wipe 8s infinite; }
@keyframes wipe { 0%,25% { clip-path:inset(0 100% 0 0); } 40%,100% { clip-path:inset(0 0 0 0); } }
.steam { position:absolute; left:50%; top:30%; width:8cqw; height:30cqw; margin-left:-4cqw; border-radius:50%; background:rgba(246,236,223,.35); filter:blur(3cqw); animation:steam 3s infinite ease-in-out; }
@keyframes steam { 0% { transform:translateY(20%) scaleX(1); opacity:0; } 40% { opacity:1; } 100% { transform:translateY(-40%) scaleX(1.8); opacity:0; } }
.timer { position:absolute; left:10cqw; right:10cqw; bottom:18cqw; height:3cqw; border-radius:3cqw; background:rgba(255,255,255,.3); overflow:hidden; }
.timer i { display:block; height:100%; width:0; background:#fff; animation:fill 8s linear infinite; }
@keyframes fill { to { width:100%; } }
@media (prefers-reduced-motion: reduce) { .short .f { animation:none; } .short .f:nth-child(1) { opacity:1; } .wipe, .steam, .timer i { animation:none; } }