/* Shared pieces for the "Terea Creatives in a theme" designs: videos, brand grid, work cards. */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vc h3{font:600 1rem/1.25 var(--sans,system-ui);margin:10px 0 2px}.vc p{font-size:.85rem;opacity:.65}
.vf{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;cursor:pointer;overflow:hidden;background:#000;border-radius:var(--r,14px)}
.vf img,.vf iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;transition:transform .5s}
.vf:hover img{transform:scale(1.05)}
.vf::after{content:'▶';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:var(--a,#fff);color:var(--on,#000);display:grid;place-items:center;font-size:1.2rem;padding-left:4px;box-shadow:0 8px 26px rgba(0,0,0,.45);transition:transform .25s}
.vf:hover::after{transform:translate(-50%,-50%) scale(1.12)}.vf.on::after{display:none}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bgrid a{display:block;border:1px solid var(--line,rgba(0,0,0,.15));border-radius:var(--r,14px);overflow:hidden;background:#fff;transition:transform .3s}
.bgrid a:hover{transform:translateY(-6px)}.bgrid img{width:100%;aspect-ratio:4/3;object-fit:contain;display:block;background:#fff}
.bgrid span{display:block;padding:8px 12px;font-size:.78rem;font-weight:600;letter-spacing:.06em;background:rgba(0,0,0,.6);color:#fff}
.stu-more{margin-top:26px}
@media (max-width:900px){.vgrid,.bgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.vgrid,.bgrid{grid-template-columns:1fr}}
.na .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:1}
.sq.two{grid-template-columns:1fr 1fr}
.plan{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.plan div{border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:24px;transition:transform .3s,border-color .3s}.plan div:hover{transform:translateY(-6px);border-color:var(--a)}
.plan b{display:block;font:800 3.2rem/1 var(--head);color:var(--a)}.plan h3{font:700 1.3rem var(--head);text-transform:var(--tt,uppercase);margin:8px 0 4px}.plan p{color:var(--mute);font-size:.93rem}
.cta-strip{display:flex;justify-content:flex-end}
@media (max-width:900px){.plan{grid-template-columns:1fr 1fr}.sq.two{grid-template-columns:1fr}}
@media (max-width:560px){.plan{grid-template-columns:1fr}}